/* ==========================================================
   VARIABLES GLOBALES (:root)
   ========================================================== */
:root {
    /* --- Palette de Couleurs --- */
    --color-dark: #000;           /* Bleu gris foncé (Texte, Bordures) */
    --color-white: #ffffff;
    --color-text-muted: #8395a7;     /* Gris clair (Meta données) */
    --color-bg-light: #f8f8f8;       /* Fond très clair (Texture) */

--margin-block: 30px 0;
    
    /* --- Ombres & Transparences --- */
 --shadow-accent-color: color-mix(in srgb, var(--color-primary-dark), transparent 85%);
    --shadow-block: 15px 15px 0 var(--shadow-accent-color); /* L'ombre signature */
    --border-light: rgba(47, 53, 66, 0.1);
    
    /* --- Typographie --- */
    --font-serif: "Open Sans";
    
    /* --- Dimensions Structurelles (Le "Système") --- */
    --size-square: 50px;      /* Taille standard des carrés rouges */
    --size-half: 35px;        /* 70px / 2 (Alignement central) */
    --spacing-deep: 105px;    /* 35px + 70px (Padding profond) */
}
br {  display: none !important; }
.table-of-contents ol ol{padding-top:10px;}
p:empty {  display: none !important; }
.the-post header{text-align: justify;}

.single figcaption, .single caption {
text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 0.5em;
        color: inherit;
}
/* ==========================================================
   STYLES DU CONTENU
   ========================================================== */

/* --- Conteneur Principal --- */
.actionable-list {
   margin: var(--margin-block);
    position: relative;
    counter-reset: my-list-counter;
}

/* --- Titre H3 --- */
.actionable-list h3 {
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--color-dark);
    display: inline-block;
}

/* --- Nettoyage --- */
.actionable-list ol, .actionable-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- L'ITEM (Structure avec la ligne verticale) --- */
.actionable-list li {
    position: relative;
    padding: 30px 0 40px;
    /* Marge gauche pour centrer le carré (35px = moitié de 70px) */
    margin-left: var(--size-half); 
    
    /* Espace entre la ligne et le texte */
    padding-left: 60px; 
    
    /* La Ligne Noire Verticale */
    border-left: 2px solid var(--color-dark);
    
    /* Alignement du texte */
    list-style: none;
    align-items: center; 
    min-height: 70px;
    align-content: center;
    counter-increment: my-list-counter;
}

/* On retire la bordure du dernier élément */
.actionable-list li:last-child {
    border-left: 2px solid transparent;
}

/* Le texte */
.actionable-list li span, 
.actionable-list li {
    font-weight: 400;
}

/* --- CALQUE 1 : Le Carré Rouge (::before) --- */
.actionable-list li::before {
    content: counter(my-list-counter);
    position: absolute;    
    /* Positionnement : Centré exactement sur la ligne verticale */
    left: calc(var(--size-half) * -1); 
    top: 0;    
    width: 50px;
    height: 50px;    
    background-color: var(--color-primary);    
    /* L'Ombre "Bloc" Rose Pâle */
    box-shadow: var(--shadow-block);     
    color: var(--color-white);
    font-weight: 700;
    font-size: 2.5rem;    
    /* Centrage du chiffre */
    display: flex;
    justify-content: center;
    align-items: center;
    
    z-index: 2; 
}

/* --- CALQUE 2 : Le petit trait décoratif (::after) --- */
.actionable-list li::after {
    content: "";
    position: absolute;    
    left: 0px; 
    top: 40px; 
    
    width: 15px;
    height: 4px; 
    
    background-color: rgba(255, 255, 255, 0.4); 
    border-radius: 2px;
    
    z-index: 3;
    pointer-events: none;
}









/* --- CONFIGURATION GLOBALE --- */
 .instant-answer {
   margin: var(--margin-block);
    position: relative;
}



/* --- KEY TAKEAWAYS --- */

.key-takeaways {
   margin: var(--margin-block);
    position: relative;
    padding-left: 100px; 
}

/* --- LA COLONNE ROUGE --- */
.key-takeaways p {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0; 
    text-align: center;
    width: 70px; 
    
    background-color: var(--color-primary);
    margin: 0;
    
    writing-mode: vertical-rl; 
    transform: rotate(180deg); 
    
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: 10px 10px 0 var(--shadow-accent-color); 
    z-index: 2;
padding: 10px;
}



/* --- LE CONTENU --- */
.key-takeaways ul {
    list-style: none;
    margin: 0;
    border-top: 2px solid var(--color-dark);
    border-bottom: 2px solid var(--color-dark);
    padding: 30px 0; 
    position: relative;
}

/* --- LES ITEMS --- */
.key-takeaways li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
}

/* --- LES PUCES --- */
.key-takeaways li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    background-color: var(--color-primary);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- INTERACTION --- */
.key-takeaways li:hover::before {
    transform: rotate(90deg) scale(1.2);
    background-color: var(--color-dark); 
}


/* --- BLOCKQUOTE --- */
blockquote {
    position: relative;
    margin: var(--margin-block);
    padding: var(--size-half) 40px 45px var(--spacing-deep);
    border-left: none;
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y; 
    color: inherit;
    box-shadow: 5px 5px 0 rgba(47, 53, 66, 0.05);
    background-color: var(--color-bg-light);
}

blockquote::before {
    content: "“";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-size: 5rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    line-height: 1rem;
    padding-right: 8px;
    padding-top: 15px;
    box-sizing: border-box;
    z-index: 2;
}

.temoignage-content, .citation-content {
    font-size: 1.4rem;
    line-height: 1.5;
    font-style: italic;
    color: #000;
    margin: 0 0 1.5rem 0;
 font-family: var(--font-serif);
}

/* --- ALIGNEMENT DU NOM ET DU LIEN --- */
blockquote cite {
    display: block; /* On repasse en bloc pour aligner les spans dedans */
    font-style: normal;
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Le nom de l'auteur */
blockquote cite span:first-child {
    color: var(--color-dark);
    text-transform: uppercase;
}

/* Le lien aligné à côté du texte */
blockquote cite a {
    position: relative;
    display: inline-block;
    background-color: var(--color-dark);
    color: var(--color-white) !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 6px 15px;
    margin-left: 15px; /* Espace entre le nom et le lien */
    vertical-align: middle; /* Aligne le bouton avec le texte */
    box-shadow: 3px 3px 0 var(--color-primary);
    transition: transform 0.3s ease;
}

/* --- LE FIL ET LE RIVET --- */

/* Le fil qui part du bouton vers la ligne au survol */
blockquote cite a::before {
    content: "";
    position: absolute;
    right: 100%; 
    top: 50%;
    width: 0;
    height: 2px;
    background-color: var(--color-dark);
    transition: width 0.3s ease-out;
}

/* Le rivet (point) sur la ligne verticale de gauche */
/* Il est maintenant positionné par rapport au conteneur CITE */
blockquote cite {
    position: relative;
}

blockquote cite::after {
    content: "";
    position: absolute;
    /* Aligne le point exactement sur la ligne verticale à 35px */
    left: -74px; 
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: var(--color-primary);
    border: 2px solid var(--color-dark);
    border-radius: 50%;
    z-index: 1;
}

/* Interaction au survol du lien */
blockquote cite a:hover {
    transform: translateX(5px);
}

blockquote cite a:hover::before {
    width: 55px; /* Longueur du fil pour rejoindre la ligne */
}


/* --- CASE STUDY BLOCK --- */

.case-study-block {
    position: relative;
   margin: var(--margin-block);
    padding: 10px 30px 10px 100px;
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y; 
}

/* --- LE CARRÉ ROUGE --- */
.case-study-block::before {
    content: "";
    position: absolute;
    
    left: 0; 
    top: 0;
    
    width: var(--size-square);
    height: var(--size-square);
    
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    
    z-index: 2;
}

/* --- L'INSERT GÉOMÉTRIQUE --- */
.case-study-block::after {
    content: "";
    position: absolute;    
    left: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    border: 4px solid var(--color-white);
    box-sizing: border-box;    
    z-index: 3;
    pointer-events: none;
}

/* --- LE TITRE --- */
.case-study-block-title {
    position: relative;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-dark);
    letter-spacing: 1px;
    margin: 0 0 1.5rem 0;
    padding-top: 10px;
    
    display: flex;
    align-items: center;
}

.case-study-block-title::before {
    content: "";
    display: inline-block;
    
    width: 45px; 
    height: 2px;
    background-color: var(--color-dark);
    
    margin-right: 15px; 
    margin-left: -30px; 
}

.case-study-block p:not(.case-study-block-title) {
    font-size: 1.15rem;
    line-height: 1.6;
    color: inherit;
    margin: 0;
    padding-left: 0; 
}

/* --- INTERACTION --- */
.case-study-block:hover::after {
    transform: rotate(90deg);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/* --- BLOCK SPC (Special) --- */

.block-spc {
    position: relative;
  margin: var(--margin-block);
    padding: var(--size-half) 40px 45px var(--spacing-deep);       
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    background-color: #f8f8f8;
}

/* --- LE CARRÉ ROUGE --- */
.block-spc::before {
    content: ""; 
    position: absolute;    
    left: 0;
    top: 0;    
    width: var(--size-square);
    height: var(--size-square);    
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);    
    z-index: 2;
}

/* --- LE MOTIF GÉOMÉTRIQUE --- */
.block-spc::after {
    content: "";
    position: absolute;    
    left: 10px; 
    top: 10px;
    
    width: 30px;
    height: 30px;
    
    border: 4px solid var(--color-white);
    box-sizing: border-box;
    
    z-index: 3;
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* --- LE LIEN --- */
.block-spc a {
    display: inline-block;
    position: relative;
}

/* --- TL;DR HYBRIDES --- */

.tldr-hybrid,
.tldr-paragraph,
.tldr-list {
    position: relative;
  margin: var(--margin-block);
    
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    margin-bottom: 4rem;
}

/* --- LE CARRÉ ROUGE --- */
.tldr-hybrid::before,
.tldr-paragraph::before,
.tldr-list::before {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    z-index: 2;
padding-bottom: 5px;
}

/* --- SYMBOLES --- */
.tldr-hybrid::before    { content: "∑"; } 
.tldr-paragraph::before { content: "¶"; } 
.tldr-list::before      { content: "≣"; } 

/* --- LE CONNECTEUR --- */
.tldr-hybrid::after,
.tldr-paragraph::after,
.tldr-list::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* --- CONTENU --- */
.tldr-hybrid p:first-of-type,
.tldr-paragraph p {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--color-dark);
    line-height: 1.5;
    border-left: 4px solid var(--border-light);
    padding-left: 20px;
    margin-bottom: 1.5rem;
}

/* --- LISTES --- */
.tldr-hybrid ul,
.tldr-list ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.tldr-hybrid li,
.tldr-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: inherit;
}

.tldr-hybrid li::before,
.tldr-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--color-primary);
    background-color: var(--color-white);
    z-index: 2;
    transform: rotate(45deg);
}

.tldr-hybrid li::after,
.tldr-list li::after {
    content: "";
    position: absolute;
    left: 5px; 
    top: -50px; 
    bottom: 15px;
    width: 1px;
    border-left: 1px dashed var(--color-primary);
    opacity: 0.5;
    z-index: 1;
}

.tldr-hybrid li:first-child::after,
.tldr-list li:first-child::after {
    display: none;
}

/* --- RECOMMANDATION FINALE --- */
.tldr-hybrid p:last-of-type {
position: relative;
    color: #424040;
    padding: 25px 30px;
    margin-left: calc(var(--size-square) * -1);
    width: calc(100% + var(--size-square));
    margin-bottom: 0;
    box-shadow: 5px 5px 0 rgba(47, 53, 66, 0.05);
    background-color: var(--color-bg-light);
}

.tldr-hybrid p:last-of-type strong {
    display: inline-block;
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: 2px;
}

.tldr-hybrid p:last-of-type em {
    font-style: normal;
    font-weight: 300;
    opacity: 0.9;
    display: block;
}

.tldr-hybrid p:last-of-type::before {
    content: "";
    position: absolute;
    left: 10px; 
    top: 40px;
    transform: translateY(-50%);
    
    width: 12px;
    height: 12px;
    background-color: var(--color-primary);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    z-index: 5;
}


/* --- AUTHOR BLOCK --- */

.author-block {
    position: relative;
 margin: var(--margin-block);
    padding: 20px 0 20px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    border-top: 1px solid var(--border-light);
    padding-top: 40px;
}

.author-block .avatar {
    position: absolute;
    left: 0;
    top: 40px; 
    
    width: 70px;
    height: 70px;
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    filter: grayscale(100%) contrast(1.2);
    
    box-shadow: inset 0 0 0 4px var(--color-white), 
                var(--shadow-block);
    
    z-index: 2;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.author-block::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: 75px; 
    width: 30px; 
    height: 4px;
    background-color: var(--color-dark);
    z-index: 1;
}

.author-text {
    font-family: var(--font-serif); 
    font-size: 1rem;
    line-height: 1.6;
    color: inherit;
    position: relative;
}

.author-text a {
    display: block;
    width: fit-content;
    position: relative;
    
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.2rem;
    color: var(--color-dark);
    text-decoration: none;
    letter-spacing: 1px;
    
    margin-top: 5px;
    margin-bottom: 15px; 
    
    margin-left: -20px; 
    padding-left: 20px; 
    
    transition: color 0.3s ease;
}

.author-text a::before {
    content: "";
    position: absolute;
    left: 20px;
    bottom: -37px;
    top: 49px;    
    width: 3px; 
    background-color: var(--color-primary);    
    transition: width 0.3s ease;
}

.author-block:hover .avatar {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.author-text a:hover {
    color: var(--color-primary);
}

.author-text a:hover::before {
    width: 6px; 
}


.dt-modified, .dt-published { display: inline-block; }
.dt-modified { float: right; }


/* --- TABLE DATA --- */

.table-data {
    width: 100%;
   margin: var(--margin-block);
    border-collapse: separate; 
    border-spacing: 0; 
    
    margin-left: 10px; 
    
    border-right: 2px solid var(--color-dark);
    border-bottom: 2px solid var(--color-dark);
    
    background-color: var(--color-white);
}

/* --- THE HEAD --- */
.table-data thead th {
    background-color: var(--color-dark);
    color: var(--color-white);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    padding: 20px;
    text-align: left;
    position: relative;
    
    border-right: 1px solid rgba(255,255,255,0.1);
}

/* Carré Rouge signature */
.table-data thead th:first-child {
    background-color: var(--color-primary);
    height: var(--size-square);
    padding: 10px; 
    
    box-shadow: var(--shadow-block);
    
    vertical-align: bottom;
    border-right: none;
    z-index: 2;
}

.table-data thead th:not(:first-child) {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.05) 0,
        rgba(255,255,255,0.05) 1px,
        transparent 1px,
        transparent 10px
    );
}

/* --- THE BODY --- */
.table-data tbody td {
    padding: 20px;
    color: inherit;
    font-size: 1rem;
    border-bottom: 1px solid var(--border-light);
    border-left: 2px solid var(--color-dark); 
    transition: all 0.2s ease;
    position: relative;
}

.table-data tbody td:first-child {
    font-weight: 700;
    color: var(--color-dark);
    border-left: 2px solid var(--color-dark); 
}

.table-data tbody td:nth-child(2) {
    color: var(--color-primary);
}

/* --- INTERACTIONS --- */
.table-data tbody tr:hover td {
    background-color: #f8f9fa;
    color: #000;
}



.table-data tbody tr:hover td:last-child::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
}

/* --- SINGLE PAGE OVERRIDES --- */
.single th, .single tr, .single td {
    border: none;
}

/***********************new*****************************/
/* ==========================================================
   PRO TIP AUTHOR & MYTH BUSTING AUTHOR
   ========================================================== */

.pro-tip-author,
.myth-busting-author {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    /* La ligne verticale signature */
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
}

/* --- LE CARRÉ ROUGE/PRIMAIRE (::before) --- */
.pro-tip-author::before,
.myth-busting-author::before {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Icônes/Symboles spécifiques selon le bloc */
.pro-tip-author::before {
    content: "!";
    font-size: 2.5rem;
}

.myth-busting-author::before {
    content: "×"; /* Croix pour briser le mythe */
    font-size: 3.5rem;
    line-height: 1;
    padding-bottom: 5px; /* Ajustement optique de la croix */
}

/* --- LE CONNECTEUR HORIZONTAL (::after) --- */
.pro-tip-author::after,
.myth-busting-author::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* --- CONTENU DU PRO TIP --- */
.pro-tip-author .author-content {
    background-color: var(--color-bg-light);
    padding: 25px 30px;
    border-left: 4px solid var(--color-dark);
    font-style: italic;
    box-shadow: 5px 5px 0 rgba(47, 53, 66, 0.05);
}

.pro-tip-author .author-content p {
    margin: 0;
}

/* --- CONTENU DU MYTH BUSTING --- */

.myth-busting-author > p:first-of-type strong{ color: #000;     font-size: 1.5rem;
    font-weight: 800;}
.myth-busting-author p {
    margin-top: 0;
    margin-bottom: 1.2rem;
}



.myth-busting-author p:nth-of-type(2) {
    color: inherit;
    font-style: italic;
    padding-left: 15px;
    border-left: 3px solid var(--border-light);
}

.myth-busting-author [itemprop="reviewBody"] {
    background-color: #ffffffa6;
    padding: 20px 25px;
    border: 2px solid var(--color-dark);
    box-shadow: 8px 8px 0 var(--color-bg-light);
    margin-bottom: 1.5rem;
}

/* Liste à l'intérieur du Mythe */
.myth-busting-author [itemprop="reviewBody"] ul {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

.myth-busting-author [itemprop="reviewBody"] ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
}

.myth-busting-author [itemprop="reviewBody"] ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--color-primary); /* Petite flèche rouge */
}

/* Mention de limitation (texte en petit à la fin) */
.myth-busting-author p:last-of-type em {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    display: block;
    border-top: 1px dashed var(--border-light);
    padding-top: 10px;
}

/* ==========================================================
   DIRECT ANSWER
   ========================================================== */

.direct-answer {
    position: relative;
    margin: var(--margin-block);
    /* On met un fond très léger pour faire ressortir la réponse comme un encart Google */
    background-color: var(--color-bg-light); 
    padding: 25px 30px 25px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
}

/* --- LE CARRÉ PRIMAIRE --- */
.direct-answer::before {
    content: "→"; /* Une flèche pour indiquer la réponse directe */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* --- LE TITRE DE LA RÉPONSE --- */
.direct-answer .direct-answer-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}


.direct-answer [itemprop="text"] p {
    margin: 0;
}


/* ==========================================================
   LISTE À PUCES CHECK (list-check)
   ========================================================== */

.list-check {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
}

/* --- LE CARRÉ PRIMAIRE --- */
.list-check::before {
    content: "✓"; /* Symbole de validation */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* --- LE CONNECTEUR HORIZONTAL --- */
.list-check::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* --- LE TITRE H3 --- */
.list-check h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* --- LE NETTOYAGE DE LA LISTE --- */
.list-check ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- LES ÉLÉMENTS DE LA LISTE --- */
.list-check li {
    position: relative;
    padding-left: 40px; /* Espace pour la coche personnalisée */
    margin-bottom: 15px;
}

/* --- LA COCHE PERSONNALISÉE (Carré avec bordure) --- */
.list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    background-color: var(--color-white);
    box-sizing: border-box;
}

/* --- LA COCHE PERSONNALISÉE (Le V à l'intérieur) --- */
.list-check li::after {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 5px;
    font-size: 16px;
    color: var(--color-primary);
    font-weight: bold;
    line-height: 16px;
}
/* ==========================================================
   LISTE NUMÉROTÉE (list-steps) - HowTo
   ========================================================== */

.list-steps {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
}

/* --- LE CARRÉ PRIMAIRE --- */
.list-steps::before {
    content: "↳"; /* Symbole universel d'étape / sous-élément (aucune traduction requise) */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px; /* Ajustement optique pour centrer la flèche */
    padding-right: 2px;
    z-index: 2;
}

/* --- LE CONNECTEUR HORIZONTAL --- */
.list-steps::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* --- LE TITRE H3 --- */
.list-steps h3 {
    margin-top: 0;
    margin-bottom: 2rem;
}

/* --- LA LISTE ORDONNÉE --- */
.list-steps .steps-container {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: custom-step-counter;
}

/* --- LES ÉTAPES --- */
.list-steps li {
    position: relative;
    padding-left: 55px; /* Laisse la place pour le rond numéroté */
    margin-bottom: 25px;
    counter-increment: custom-step-counter;
}

/* --- LE ROND NUMÉROTÉ --- */
.list-steps li::before {
    content: counter(custom-step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    background-color: var(--color-dark);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 3px 3px 0 var(--color-bg-light);
}

/* --- LE TITRE DE L'ÉTAPE (strong) --- */
.list-steps li strong {
    display: block;
    font-size: 1.15rem;
    color: var(--color-primary);
    margin-bottom: 5px;
    padding-top: 5px;
}

/* --- LE TEXTE DE L'ÉTAPE --- */
.list-steps li .text p {
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-dark);
    line-height: 1.5;
}


/* ==========================================================
   LISTE SIMPLE (checklist)
   ========================================================== */

.checklist {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
}

/* --- LE CARRÉ PRIMAIRE --- */
.checklist::before {
    content: "≡"; /* Icône de liste minimaliste */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* --- LE CONNECTEUR HORIZONTAL --- */
.checklist::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* --- LE TITRE H3 --- */
.checklist h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* --- LE NETTOYAGE DE LA LISTE --- */
.checklist .checklist-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- LES ÉLÉMENTS DE LA LISTE --- */
.checklist li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
}

/* --- LA PETITE PUCE CARRÉE --- */
.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px; /* Centré par rapport à la hauteur de ligne */
    width: 10px;
    height: 10px;
    background-color: var(--color-primary);
    transition: transform 0.2s ease;
}

/* --- INTERACTION AU SURVOL --- */
.checklist li:hover::before {
    transform: rotate(45deg); /* Le carré devient un losange au passage de la souris */
    background-color: var(--color-dark);
}

/* ==========================================================
   BLOCS D'ALERTE (Success & Warning)
   ========================================================== */

/* --- BLOC SUCCÈS (Vert) --- */
.success-box {
    /* Définition de la couleur de succès locale */
    --color-success: #27ae60; 
    --bg-success: #f0fdf4; /* Vert très clair pour le fond */
    
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
}

/* Le Carré Vert */
.success-box::before {
    content: "✓"; 
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-success);
    /* Ombre teintée en vert */
    box-shadow: 15px 15px 0 rgba(39, 174, 96, 0.15); 
    color: var(--color-white);
    font-weight: 700;
    font-size: 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Le Connecteur */
.success-box::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* Le Contenu du Message de Succès */
.success-box p {
    margin: 0;
    background-color: var(--bg-success);
    border-left: 4px solid var(--color-success);
    padding: 20px 25px;
    font-size: 1.1rem;
    color: var(--color-dark);
    line-height: 1.6;
    box-shadow: 4px 4px 0 rgba(47, 53, 66, 0.05);
}

.success-box p strong {
    color: var(--color-success);
    font-size: 1.15rem;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* --- BLOC WARNING (Orange) --- */
.warning {
    /* Définition de la couleur d'alerte locale */
    --color-warning: #e67e22; 
    --bg-warning: #fff9f4; /* Orange très clair pour le fond */
    
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
}

/* Le Carré Orange */
.warning::before {
    content: "!"; 
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-warning);
    /* Ombre teintée en orange */
    box-shadow: 15px 15px 0 rgba(230, 126, 34, 0.15); 
    color: var(--color-white);
    font-weight: 700;
    font-size: 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Le Connecteur */
.warning::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* Le Contenu du Message Warning */
.warning p, .warning ul {
    margin: 0;
    background-color: var(--bg-warning);
    border-left: 4px solid var(--color-warning);
    padding: 20px 25px;
    font-size: 1.1rem;
    color: var(--color-dark);
    line-height: 1.6;
    box-shadow: 4px 4px 0 rgba(47, 53, 66, 0.05);
}

.warning p strong {
    color: var(--color-warning);
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Si le warning contient une liste */
.warning ul {
    padding-top: 0; /* Évite un double padding avec le p précédent */
    padding-left: 45px; /* Laisse de l'espace pour les puces */
}

.warning ul li {
    margin-bottom: 8px;
}

.warning ul li strong {
    color: var(--color-dark);
    font-size: 1rem;
    text-transform: none;
}

/* ==========================================================
   INFO BOX (Bon à savoir / Limites)
   ========================================================== */

.info-box {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    /* Le texte hérite naturellement de la couleur du body */
    color: inherit; 
}

/* Le Carré Primaire */
.info-box::before {
    content: "i"; /* Lettre d'information universelle */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 2.2rem;
    font-family: serif; /* Rend le "i" plus élégant */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Le Connecteur */
.info-box::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* Le Contenu */
.info-box p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 15px;
}

.info-box ul {
    padding-left: 20px;
    margin-bottom: 20px;
    font-size: 1.05rem;
    line-height: 1.5;
}

.info-box li {
    margin-bottom: 8px;
}

/* On met en valeur les mots importants (strong) dans l'encart */
.info-box strong {
    color: var(--color-primary);
}


/* ==========================================================
   KEY STAT (Chiffre Clé) - Proposition 2
   ========================================================== */

.key-stat {
    position: relative;
    margin: var(--margin-block);
    padding: 5px 0 20px var(--spacing-deep);
    
    /* On garde la ligne verticale signature */
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit; 
}

/* Le Carré Primaire */
.key-stat::before {
    content: "#"; /* Symbole universel pour Numéro/Chiffre */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}


.key-stat::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: 23px; /* Aligné sur le centre du carré */
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}


.key-stat .value {
    position: relative;
    display: inline-block;
    margin: 0 0 20px 0;
    font-size: 30px;
    font-weight: 800;
    color: var(--color-primary);
    padding: 10px 25px;
    background-color: var(--color-white);
    border: 2px solid var(--color-dark);
    z-index: 2;
}


.key-stat .label {
    margin: 0;
    border-left: 3px solid var(--color-primary); 
    padding-left: 15px;
}

/* ==========================================================
   TIMELINE (Chronologie)
   ========================================================== */

.timeline {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    /* On retire les puces par défaut du ul */
    list-style: none;
    color: inherit;
}

/* Le Carré Primaire (Tête de la timeline) */
.timeline::before {
    content: "↓"; /* Flèche vers le bas pour indiquer le déroulement du temps */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* --- LES ÉLÉMENTS DE LA TIMELINE --- */
.timeline li {
    position: relative;
    margin-bottom: 30px;
}

/* Le "Point" sur la ligne du temps */
.timeline li::before {
    content: "";
    position: absolute;
    /* On recule de 70px pour centrer le point exactement sur la ligne verticale de 35px */
    left: -76px; 
    top: 5px;
    
    width: 14px;
    height: 14px;
    background-color: var(--color-white);
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    z-index: 2;
    
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Le Conteneur de l'événement */
.timeline [itemprop="item"] {
    background-color: var(--color-white);
    border: 1px solid var(--border-light);
    padding: 15px 20px;
    box-shadow: 4px 4px 0 rgba(47, 53, 66, 0.05);
    display: flex;
    flex-direction: column;
}

/* La Date / Le Délai (J+0, J+15...) */
.timeline time {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}


/* Interaction au survol */
.timeline li:hover::before {
    transform: scale(1.3);
    background-color: var(--color-primary);
}


/* ==========================================================
   LEXIQUE (Définition)
   ========================================================== */

.lexique {
    position: relative;
    margin: var(--margin-block);
    padding: 15px 0 15px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit;
}

/* Le Carré Primaire */
.lexique::before {
    content: "Aa"; /* Symbole universel du dictionnaire/texte */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Le Connecteur */
.lexique::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* Le Terme à définir (dt) */
.lexique dt {
    font-size: 1.15rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
    
    /* Petite ligne de soulignement pour bien séparer le mot de sa définition */
    border-bottom: 1px dashed var(--border-light);
    padding-bottom: 8px;
    display: inline-block;
}

/* Le sigle/mot principal (dfn) */
.lexique dfn {
    font-style: normal;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-right: 5px;
}

/* La Définition (dd) */
.lexique dd {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* ==========================================================
   DECISION TREE (Arbre de décision)
   ========================================================== */

.decision-tree {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit;
}

/* Le Carré Primaire */
.decision-tree::before {
    content: "?"; 
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Le Connecteur */
.decision-tree::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* Titre de l'arbre de décision */
.decision-tree > p {
    font-size: 1.15rem;
    color: var(--color-dark);
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Nettoyage de la liste */
.decision-tree ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Les "Branches" (Les choix) */
.decision-tree li {
    background-color: var(--color-white);
    border-left: 4px solid var(--color-primary);
    padding: 15px 20px;
    margin-bottom: 12px;
    box-shadow: 4px 4px 0 rgba(47, 53, 66, 0.05);
    border-top: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.decision-tree li strong {
    display: block;
    font-size: 1.1rem;
    color: #000;
    margin-bottom: 5px;
}




/* ==========================================================
   MYTH BUSTING (Simple - Sans Auteur)
   ========================================================== */

.myth-busting {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit;
}

.myth-busting::before {
    content: "×"; 
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 3.5rem;
    line-height: 1;
    padding-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.myth-busting::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* L'Affirmation (Le Mythe) - SANS texte barré */
.myth-busting > p {
    margin-top: 0;
    margin-bottom: 15px;
    font-style: italic;
    padding-left: 15px;
    border-left: 3px solid var(--border-light);
}

.myth-busting > p strong {
    font-style: normal;
    color: var(--color-dark);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* La Réponse (La Réalité) */
.myth-busting [itemprop="reviewBody"] {
    background-color: var(--color-white);
    border: 2px solid var(--color-dark);
    padding: 15px 20px;
    box-shadow: 6px 6px 0 var(--color-bg-light);
}

.myth-busting [itemprop="reviewBody"] p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.5;
}

.myth-busting [itemprop="reviewBody"] strong {
    color: var(--color-primary);
}


/* ==========================================================
   ANALOGY (Analogie)
   ========================================================== */

.analogy {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit;
}

.analogy::before {
    content: "≈"; /* Symbole universel "environ égal à / Analogie" */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px; /* Ajustement visuel */
    z-index: 2;
}

.analogy::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* Le texte de l'analogie */
.analogy [itemprop="hasPart"] p {
    margin: 0;
    background-color: var(--color-bg-light);
    border-left: 4px solid var(--color-primary);
    padding: 20px 25px;
    font-style: italic; /* Donne un effet "pensée/image" */
}

.analogy strong {
    display: block;
    font-style: normal;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--color-primary);
    margin-bottom: 8px;
}

/* ==========================================================
   BEFORE / AFTER (Avant / Après)
   ========================================================== */

.before-after {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit;
}

.before-after::before {
    content: "⇄"; /* Flèches pour indiquer l'échange/la transformation */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.before-after::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* Conteneur Flex pour aligner "Avant" et "Après" */
.before-after [itemprop="reviewBody"] {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Style des deux paragraphes */
.before-after p {
    flex: 1; /* Chaque paragraphe prend la moitié de l'espace */
    margin: 0;
    padding: 15px 20px;
    border: 2px solid var(--border-light);
    background-color: var(--color-white);
    font-size: 1.1rem;
    line-height: 1.5;
}



.before-after p:last-child {
    border-color: var(--color-primary); /* "Après" est mis en valeur */
}

.before-after strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.before-after p:first-child strong {
    color: var(--color-text-muted);
}
.before-after p:last-child strong {
    color: var(--color-primary);
}


/* ==========================================================
   PROS / CONS (Les Plus / Les Moins)
   ========================================================== */

section.pros-cons {
    /* Définition de couleurs locales pour ce bloc */
    --color-success: #27ae60;
    --color-danger: #e74c3c;
    
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit;
}

section.pros-cons::before {
    content: "±"; /* Symbole universel "Plus-Moins" */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
    z-index: 2;
}

section.pros-cons::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* Conteneur Grid pour les deux colonnes */
section.pros-cons [itemprop="review"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Style des titres de colonnes */
section.pros-cons h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 8px;
    border-bottom: 2px solid;
}

.pros-column h3 {
    color: var(--color-success);
    border-color: var(--color-success);
}
.cons-column h3 {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* Nettoyage des listes */
section.pros-cons ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style des items */
section.pros-cons li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
}

/* La puce personnalisée */
section.pros-cons li::before {
    position: absolute;
    left: 0;
    top: 5px;
    width: 20px;
    height: 20px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

/* Puces des "Plus" (✓ vert) */
.pros-column li::before {
    content: "✓";
    background-color: var(--bg-success, #f0fdf4);
    color: var(--color-success);
}

/* Puces des "Moins" (× rouge) */
.cons-column li::before {
    content: "×";
    background-color: var(--bg-danger, #fff5f5);
    color: var(--color-danger);
}
/* ==========================================================
   YMYL DISCLAIMER (Information) - PROPOSITION 2
   ========================================================== */

.ymyl-disclaimer {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit;
}

/* Le Carré Primaire avec une icône de Trombone */
.ymyl-disclaimer::before {
    content: "📎";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-45deg); /* Le trombone est penché */
    z-index: 2;
}

.ymyl-disclaimer::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* --- Le Contenu avec effet "Document" --- */
/* Note : Il est mieux d'envelopper vos <p> dans un <div> pour cet effet,
   mais on peut aussi styler le premier <p> directement. */
.ymyl-disclaimer p {
    position: relative;
    margin: 0;
    background-color: #f8f8f8; /* Fond de la "feuille" */
    padding: 20px 25px;
    font-size: 1.05rem;
    line-height: 1.6;
    border: 1px solid var(--border-light);
    box-shadow: 4px 4px 0 rgba(47, 53, 66, 0.05);
}



.ymyl-disclaimer p:first-of-type {
    border-bottom: none;
    padding-bottom: 10px;
}
.ymyl-disclaimer p:last-of-type {
    border-top: 1px dashed var(--border-light);
    padding-top: 10px;
}



/* ==========================================================
   TABLE OF CONTENTS (Sommaire)
   ========================================================== */

.table-of-contents {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit;
}

.table-of-contents::before {
    content: "☰"; /* Icône de menu/sommaire */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.table-of-contents::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* Titre H2 du sommaire */
.table-of-contents h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* La liste ordonnée */
.table-of-contents ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-counter;
}

.table-of-contents li {
    position: relative;
    counter-increment: toc-counter;
    margin-bottom: 10px;
}

.table-of-contents a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    padding: 5px 0 5px 35px; /* Espace pour le numéro */
    transition: color 0.2s ease, padding-left 0.2s ease;
}

/* Le numéro personnalisé */
.table-of-contents a::before {
    content: "0" counter(toc-counter) ".";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    transition: color 0.2s ease;
}

/* Interaction au survol */
.table-of-contents a:hover {
    color: var(--color-primary);
    padding-left: 40px; /* Le texte se décale un peu */
}

.table-of-contents a:hover::before {
    color: var(--color-dark);
}


/* ==========================================================
   FINAL THOUGHT (Pour aller plus loin) - PROPOSITION 2
   ========================================================== */

.final-thought {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit;
}

/* Le Carré Primaire avec une Ampoule */
.final-thought::before {
    content: "💡";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.final-thought::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* --- La boîte de texte avec une forme personnalisée --- */
.final-thought p {
      position: relative;
    margin: 0;
    background-color: #f8f8f8;
    padding: 20px 25px 20px 35px;
    font-size: 1.15rem;
    line-height: 1.6;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70%, -20px 50%, 0% 30%);
}

.final-thought p:first-of-type {
    display: none; /* On cache le "Pour aller plus loin :" qui est implicite */
}



/* ==========================================================
   FAQ BLOCK (Questions Fréquentes)
   ========================================================== */

section.faq-block {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit;
}

section.faq-block::before {
    content: "Q&A"; /* Question & Answer */
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

section.faq-block::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* Titre H2 de la FAQ */
section.faq-block h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Chaque question (l'élément <details>) */
.faq-item {
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 10px;
}

/* Le titre de la question cliquable (<summary>) */
.faq-item summary {
    position: relative;
    display: block;
    cursor: pointer;
    padding: 15px 35px 15px 0;
    list-style: none; /* Cache la flèche par défaut */
    transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker {
    display: none; /* Cache aussi la flèche sur Safari */
}

/* L'icône "+" par défaut */
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-primary);
}

/* La réponse cachée */
.faq-item [itemprop="acceptedAnswer"] {
    padding: 0 15px 20px 0;
    font-size: 1.1rem;
    line-height: 1.6;
}
.faq-item [itemprop="acceptedAnswer"] p {
    margin: 0;
}

/* Quand la question est ouverte */
.faq-item[open] summary {
    color: var(--color-primary);
}
.faq-item[open] summary::after {
    content: "−"; /* On change l'icône en "-" */
}


/* ==========================================================
   YMYL BLOC LIMITES (Disclaimer de Fin) - VERSION CORRIGÉE
   ========================================================== */

.ymyl-bloc-limites {
    /* On crée une version claire de ta couleur primaire pour le fond */
    --bg-primary-light: color-mix(in srgb, var(--color-primary), transparent 95%);

    position: relative;
    margin: var(--margin-block);
    padding: 20px 25px 20px var(--spacing-deep);
    
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    
    color: inherit;
    background-color: var(--bg-primary-light); /* Fond teinté avec la couleur primaire */
    border: 1px solid var(--color-primary);
}

/* Le Carré utilise la couleur primaire, comme demandé */
.ymyl-bloc-limites::before {
    content: "⚠️"; 
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block); /* On réutilise l'ombre signature */
    color: var(--color-white);
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.ymyl-bloc-limites::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

/* Les titres utilisent la couleur primaire */
.ymyl-bloc-limites strong {
    display: inline-block;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--color-primary);
}

.ymyl-bloc-limites ul {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.ymyl-bloc-limites li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* La puce triangle utilise la couleur primaire */
.ymyl-bloc-limites li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--color-primary);
}

.ymyl-bloc-limites em {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    border-top: 1px solid var(--border-light);
    padding-top: 15px;
    margin-top: 20px;
    background-color: var(--color-white);
    padding: 15px;
}
/* ==========================================================
   INSTANT ANSWER (Question-Réponse)
   ========================================================== */
.instant-answer {
    position: relative;
    margin: var(--margin-block);
    padding: 10px 0 10px var(--spacing-deep);
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    color: inherit;
}

.instant-answer::before {
    content: "Q";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-block);
    color: var(--color-white);
    font-weight: 900;
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.instant-answer::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

.instant-answer .question {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.instant-answer .answer {
    font-size: 1.15rem;
    line-height: 1.6;
    background-color: var(--color-bg-light);
    padding: 20px;
    border-left: 4px solid var(--color-dark);
}
/* ==========================================================
   PRO TIP (Conseil Pro)
   ========================================================== */
.pro-tip {
    position: relative;
    margin: var(--margin-block);
    padding: 15px 0 15px var(--spacing-deep);
    background-image: linear-gradient(
        to right, 
        transparent 34px, 
        var(--color-dark) 34px, 
        var(--color-dark) 36px, 
        transparent 36px
    );
    background-repeat: repeat-y;
    color: inherit;
}

.pro-tip::before {
    content: "💡";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size-square);
    height: var(--size-square);
    background-color: var(--color-dark);
    box-shadow: 15px 15px 0 var(--shadow-accent-color);
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pro-tip::after {
    content: "";
    position: absolute;
    left: var(--size-square); 
    top: var(--size-half); 
    width: var(--size-half); 
    height: 4px; 
    background-color: var(--color-dark);
    z-index: 1;
}

.pro-tip p {
    margin: 0;
    border: 2px solid var(--color-dark);
    padding: 20px 25px;
    background-color: var(--color-white);
    border: 1px solid var(--border-light);
}

.pro-tip strong:first-child {
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* ==========================================================
   DATES (Published & Modified) - DESIGN "STAMPS"
   ========================================================== */

.dt-published, 
.dt-modified {
    position: relative;
    display: inline-block;
    padding: 5px 12px;
    margin-bottom: 10px;
    
    /* Alignement sur ta ligne verticale */
    margin-left: var(--spacing-deep); 
    
    font-family: var(--font-serif);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Look "Badge" */
    background-color: var(--color-dark);
    color: var(--color-white) !important;
    border: 1px solid var(--color-dark);
    
    /* Ombre signature courte */
    box-shadow: 4px 4px 0 var(--color-bg-light);
}

/* On différencie la date de modification par ta couleur primaire */
.dt-modified {
    background-color: var(--color-white);
    color: var(--color-dark) !important;
    border: 2px solid var(--color-primary);
    box-shadow: 4px 4px 0 var(--color-primary);
    float: right; /* Sur PC, on l'envoie à droite */
}

/* --- CONNECTEUR AVEC LA LIGNE VERTICALE --- */
.dt-published::before {
    content: "";
    position: absolute;
    left: -70px; /* Rejoint la ligne à 35px */
    top: 50%;
    width: 70px;
    height: 2px;
    background-color: var(--color-dark);
    z-index: -1;
}

/* Le point sur la ligne verticale */
.dt-published::after {
    content: "";
    position: absolute;
    left: -74px; /* Pile sur la ligne */
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: var(--color-primary);
    border: 2px solid var(--color-dark);
    border-radius: 50%;
}

/* ==========================================================
   RESPONSIVE : LE FIXE PARFAIT
   ========================================================== */

@media (max-width: 768px) {
    .dt-published, 
    .dt-modified {
        display: table; /* S'adapte à la largeur du texte seulement */
        float: none !important; /* Annule le float right */
        margin-bottom: 15px;
        margin-right: 0;
        width: auto;
    }

    /* On s'assure que la date de modification a aussi son connecteur sur mobile */
    .dt-modified::before {
        content: "";
        position: absolute;
        left: -70px;
        top: 50%;
        width: 70px;
        height: 2px;
        background-color: var(--color-primary);
        z-index: -1;
    }
    
    /* On rajoute le point sur la ligne pour la deuxième date sur mobile */
    .dt-modified::after {
        content: "";
        position: absolute;
        left: -74px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        background-color: var(--color-white);
        border: 2px solid var(--color-primary);
        border-radius: 50%;
    }
}

/* Clearfix pour les floats */
.article-meta-dates::after { /* Si tu as un parent, sinon utilise sur le bloc suivant */
    content: "";
    display: table;
    clear: both;
}