/* *
* 
* Template : Quentinrenaux V2025 
* Author : Quentin Renaux
* Version : 2025
* Crée le : 18/12/24

* Last edit : 3/5/25
*
* pour gerer les style des contenus (par default de gutemberg / wordpress)
*
*/


/* ---------------------------------------------------------------------------- */        
/* --------------------------- PAGE & SINGLE version 5 ------------------------ */            

/* qtransfer */

/* page (et single?) 
    empeche le depassement ou scroll quand texte plus grand que la div */
    .single-index {overflow: hidden} 
    
    
    /*this is not a menu : page category */
    .thisisnotamenu {
        position: fixed; 
        top:120px; 
        right:20px;
    }
    
    @media only screen and (max-width: 820px) {
        .thisisnotamenu {
            position: relative; 
            padding:10px; 
            background: #eee;
            top:0; 
            right:0;
        }
        
        .thisisnotamenu li {
            display: inline-block; 
            padding: 4px;
        }
    }
  
   
/* red hat = title princpal */    
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');
    
/* raleway = content text and other stuff */    
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');    
       
    /* mobile */
	@media (max-width: 700px) {
        .and-single-index-v3 {
            padding: 20px;
        } 
	}	  

    /* edit button */    
    .single-edit-v3 {
        position: fixed;
        top: 50%; 
        left: 10px; 
        z-index: 99;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 512 640' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M218.5,215.1l-22.9,79.5c-1.7,5.9-0.1,12.3,4.2,16.7c3.2,3.3,7.6,5,12.1,5c1.5,0,3-0.2,4.5-0.6l80.3-22.1 c2.8-0.8,5.4-2.3,7.5-4.4l145.5-145.5c10.8-10.8,16.7-25.1,16.7-40.3c0-15.2-5.9-29.5-16.7-40.3l-0.8-0.8 c-10.8-10.8-25.1-16.7-40.3-16.7s-29.5,5.9-40.3,16.7L222.8,207.8C220.7,209.8,219.2,212.3,218.5,215.1z M249.9,228.7L392.4,86.3 c4.3-4.3,10.1-6.7,16.3-6.7c6.1,0,11.9,2.4,16.3,6.7l0.8,0.8c4.3,4.3,6.7,10.1,6.7,16.3s-2.4,11.9-6.7,16.3L283.4,262l-46.7,12.9 L249.9,228.7z'/%3E%3Cpath d='M102.5,466h255.7c31.4,0,56.8-25.1,56.8-56.5V286.6c0-9.4-7.6-17-17-17s-17,7.6-17,17v122.9 c0,12.7-10.1,22.5-22.8,22.5H102.5c-12.7,0-22.5-9.9-22.5-22.5V153.8c0-12.7,9.9-22.8,22.5-22.8h122.8c9.4,0,17-7.6,17-17 s-7.6-17-17-17H102.5C71.1,97,46,122.3,46,153.8v255.7C46,440.9,71.1,466,102.5,466z'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 30px; 
        width: 30px; 
        height: 30px;
    }   
   
    /* bloc single */
    .bloc-single-v3 { 
        margin-top: 20px;
        font-family: 'Raleway', sans-serif;
        position: relative;
    }   
    
    .ifbalise {
        font-size:12px;         
        font-weight: 400;
        color: #ababab;
        padding: 0 0; 
    } 
    
    /* number single */
    .number-single-v3 {
        position: absolute; 
        top: 10px;
        right: -30px; 
        border: 2px solid black; 
        border-radius: 50%;
        width: 76px; 
        height: 76px; 
        font-weight: 500;
        
        font-family: 'Montserrat', sans-serif;
        background: #fff;
        transform: rotate(12deg);
        
       box-shadow: 3px 3px 0px rgba(153, 153, 153, 0.67);
        
        transition: all 2.2s ease;
    }
       
     .number-single-v3 div {
        width: 100%; 
        height: 100%;   
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
     .number-single-v3 div p{
        font-size: 1.4em;
         padding: 1px 2px 3px;
         font-weight: 800;
    }    
    
    .number-single-v3:hover {
        transform: rotate(-4deg);
        transition: all 0.4s ease;
    }

    .number-single-v3 a {
        text-decoration: none;
    }    
    
    /* titre single */
    .titre-single-v3 {   
        padding: 20px 20px 0;
        overflow: hidden; 
        word-break: break-word;
    }
        
    .titre-single-v3 h2 {
        font-family: 'Red Hat Text', sans-serif; 
        font-weight: 700;
        font-size: 3.4em;
        letter-spacing: -2px;
        line-height: 0.95em;
    }    

    /* mobile */
	@media (max-width: 700px) {
        .titre-single-v3 h2 {
            font-size: 2.8em;
        }   
        .bloc-single-v3 { 
            margin-top: 10px;
        }    
	}	    
    
    .subtitle-single-v3 {
        font-size: 1.1em;
        padding-top: 8px;
    }    
    
    /* content single */
    .content-single-v3 { 
        padding: 0px 20px 40px;
        overflow: hidden; 
        word-break: break-word;  
    }  

        /* mobile */
	@media (max-width: 700px) {
        .content-single-v3 { 
            margin-top: -10px;
        }    
	}	
    
    .content-single-v3 .content-text {
        
        font-weight: 500;
        font-size: 13px; 
        line-height: 1.5em; 
    }   
    
    .content-text h1 {
        font-size: 2.4em;
        line-height: 1.1em;
        padding: 30px 10px 15px;
        border: 0;
        font-weight: 800;
    }

    .content-text h2 {
        font-size: 2em;
        line-height: 1em;
        padding: 30px 10px 15px;
        border: 0;
    }


    .content-text h3 {
        font-size: 1.8em;
        line-height: 1em;
        padding: 30px 10px 15px;
        border: 0;
    }


    .content-text h4 {
        font-size: 1.4em;
        line-height: 1em;
        padding: 30px 10px 15px;
        border: 0;
    }

    .content-text p {
        padding: 8px 10px;
    }   
   
    .content-text .wp-block-quote strong {
        font-size: 1.02em; 
    }
    

    /* ----- citation ----- */
    .content-text .wp-block-quote {
        overflow-wrap: break-word;
        font-size: 1.4em;
        line-height: 1.2em;
        /* text-align: justify; */
        /* letter-spacing: -1px; */
        border: 1px solid #ddd;
        padding: 10px 7px;
        border-radius: 7px;
        background: #fefefec9;
        margin: 10px -5px;
    }


    /* liste */
    .wp-block-list li {
        padding: 4px 11px 4px 7px;
        position: relative;
        list-style: none;
        background: #ffffff;
        margin: 4px;
        border: 1px solid black;
        border-radius: 50px;
        display: table;
    }
    
    .wp-block-list li::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #333;
        border-radius: 50%;
        margin-right: 6px;
        margin-bottom: 2px;
        vertical-align: middle;
    }


    /* ---- preformatted ---- */
    .wp-block-preformatted {
        border: 2px solid #878787;
        padding: 20px 10px;
        margin: 1px 10px 2px;
        background: #f4f4f4;
    }


    /* thumbnail single */
    .thumbnail-single-v3 {        
        padding: 20px 0 0;     
    }    
        
    
    
/* ARTICLE */    
/* bouton editeur de texte */    

.wp-block-button__link {
    
    margin: 20px;
    
    
    color: #000;
    background-color: #eee;
    border: 2px solid #222;

    border-radius: 8px;
    font-size: 18px;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
}
   

.wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-button__link:visited {
    color: #eee;
}
    
    
    
    
/* youtube / video / vimeo / etc */ 
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; 
    
    border-radius: 10px;
    } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        
/* met les video youtube, les embed en general en full width */

/*
.wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border: 0px solid red;} 

.wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0px solid black;}

*/


/* ----------------- contenu : les listes v2024 ----------------- */
/* sup */

/* ----------------- contenu : les listes v2025 ----------------- */

/* Dark/Light mode global */
:root {
    --colorliste-light-background: #ffffff;
    --colorliste-light-text: #000000;
    --colorliste-dark-background: #121212;
    --colorliste-dark-text: #e0e0e0;

    /* les rond de la lsite */
    --colorliste-primary: #673ab7; /* Ancien : Violet principal */
    --colorliste-primary: #111111; /* New : Violet principal */
    --colorliste-primaryinvert: #eee; /* New : Violet principal */


    --colorliste-secondary: #03a9f4; /* Bleu clair */
    --colorliste-highlight: #ff4081; /* Rose vif */
    --colorliste-accent: #4caf50; /* Vert accent */
    --colorliste-warning: #ffca28; /* Jaune alerte */
    --colorliste-border: #607d8b; /* Gris bleu bordure */
    --colorliste-shadow: rgba(0, 0, 0, 0.1);

    /* Dark mode colors */
    --colorliste-dark-primary: #ff9800; /* Orange en dark */
    --colorliste-dark-secondary: #ff7043; /* Orange sombre */
    --colorliste-dark-accent: #ffa726; /* Jaune orange */
    --colorliste-dark-border: #424242; /* Gris foncé bordure */
}


/* Style principal pour l'OL */
.content_v2025 ol.wp-block-list {
    counter-reset: item; /* Initialise le compteur */
    list-style: none; /* Retire les puces par défaut */
    padding-left: 0; /* Supprime le padding par défaut */
    border: 2px solid var(--colorliste-primary);
    padding: 10px;
}

/* Style pour chaque LI direct dans OL */
.content_v2025 ol.wp-block-list > li {
    counter-increment: item; /* Incrémente le compteur */
    font-weight: bold; /* Titre en gras */
    margin-bottom: 1em; /* Espacement entre les items principaux */
    position: relative;
    border: 2px solid var(--colorliste-border); /* Bordure modernisée */
    padding: 1em;
    border-radius: 12px;
    background-color: var(--colorliste-light-background);
    box-shadow: 0 4px 8px var(--colorliste-shadow);
}

.content_v2025 ol.wp-block-list > li::before {
    content: counter(item); /* Affiche le compteur */
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    text-align: center;
    border-radius: 50%; /* Cercle */
    background-color: var(--colorliste-primary);
    color: var(--colorliste-primaryinvert);
    font-weight: bold;
    margin-bottom: 0.5em;
}

.content_v2025 ol.wp-block-list > li > strong {
    border: 2px solid var(--colorliste-highlight);
    border-radius: 4px;
    padding: 0.2em 0.5em;
    background-color: var(--colorliste-highlight);
    color: #880e4f;
}

/* Style pour les UL principaux */
.content_v2025 ul.wp-block-list {
    list-style: none;
    padding-left: 1.5em;
    margin-top: 0.5em;
    border: 2px solid var(--colorliste-secondary);
    padding: 0.8em;
    border-radius: 8px;
    background-color: var(--colorliste-light-background);
}

.content_v2025 ul.wp-block-list > li {
    margin-bottom: 1em;
    padding: 0.8em 1em;
    border: 2px dashed var(--colorliste-secondary);
    border-radius: 12px;
    background-color: #e0f7fa;
    position: relative;
}

.content_v2025 ul.wp-block-list > li::before {
    content: "\25A0"; /* Carré plein */
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    background-color: var(--colorliste-highlight);
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 0.8em;
}

/* UL imbriqués dans OL */
.content_v2025 ol.wp-block-list ul.wp-block-list {
    border: 2px solid var(--colorliste-dark-secondary);
    padding-left: 1.5em;
    background-color: #fff3e0;
    border-radius: 8px;
    margin-top: 0.5em;
}

.content_v2025 ol.wp-block-list ul.wp-block-list > li {
    margin-bottom: 0.8em;
    padding: 0.6em 1em;
    border: 2px solid var(--colorliste-dark-secondary);
    border-radius: 6px;
    background-color: var(--colorliste-warning);
}

.content_v2025 ol.wp-block-list ul.wp-block-list > li::before {
    content: "\25CF"; /* Cercle plein */
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-color: var(--colorliste-dark-primary);
    color: #fff;
    border-radius: 50%;
    margin-right: 0.8em;
}

/* UL imbriqués (second niveau) */
.content_v2025 ul.wp-block-list ul.wp-block-list > li {
    margin-bottom: 0.5em;
    padding: 0.5em 1em;
    border: 2px dotted var(--colorliste-accent);
    background-color: #e8f5e9;
    border-radius: 8px;
}

.content_v2025 ul.wp-block-list ul.wp-block-list > li::before {
    content: "\25CF"; /* Cercle plein */
    background-color: var(--colorliste-accent);
    border-radius: 50%;
    color: #fff;
}

/* Dark/Light mode */
@media (prefers-colorliste-scheme: dark) {
    .content_v2025 ol.wp-block-list > li {
        border-color: var(--colorliste-dark-secondary);
        background-color: var(--colorliste-dark-border);
        color: var(--colorliste-dark-text);
    }
    .content_v2025 ol.wp-block-list > li::before {
        background-color: var(--colorliste-dark-primary);
        color: #000;
    }
    .content_v2025 ul.wp-block-list > li {
        border-color: var(--colorliste-dark-accent);
        background-color: var(--colorliste-dark-border);
        color: var(--colorliste-dark-text);
    }
    .content_v2025 ul.wp-block-list > li::before {
        background-color: var(--colorliste-dark-primary);
    }
    .content_v2025 ul.wp-block-list ul.wp-block-list > li {
        border-color: var(--colorliste-dark-accent);
        background-color: var(--colorliste-dark-border);
        color: var(--colorliste-dark-text);
    }
    .content_v2025 ul.wp-block-list ul.wp-block-list > li::before {
        background-color: var(--colorliste-warning);
    }
}


/* ----- images ----- */
.wp-block-image {
    margin: 0;
}

.wp-block-image .aligncenter {
    margin-left: auto;
    margin-right: auto;
    /*width: calc(100% + 80px);*/
}



/* ------ contenu embarquer ------ */
.wp-block-embed {
    border: 2px solid black; 
    margin: 10px;    
}

.wp-block-embed__wrapper {
    position: relative;
}

.wp-block-embed iframe {
    max-width: 100%;
    /*border: 2px solid blue;*/
    width: 100%;
}