/*
 * ===================================================================
 *  GLOBAL CSS VARIABLES & THEME CONFIGURATION
 * ===================================================================
 */
:root {
  --c-bg-card: #fff;
  --c-bg-subtle: #f4f4f4;
  --c-bg-blue-light: #fff;
  --c-bg-hover-row:#3333330a;
    --color-success: #1DB954;
  --c-border: #ebebeb;
  --c-border-avatar: #ebebeb;
  --c-border-lifeline: #ccc;
 --color-warning: #F5A623;


  /* --- OMBRES --- */
  --shadow-base: 0 10px 35px rgba(26, 59, 88, 0.08);
  --shadow-hover: 0 15px 45px rgba(26, 59, 88, 0.15);
  --shadow-glow: 0 0 10px rgb(188 194 195 / 50%);

  /* --- ANIMATIONS --- */
  --ease-elastic: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-gate: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-seal: cubic-bezier(0.2, 1, 0.2, 1);
  
  --speed-normal: 0.4s;
  --speed-slow: 0.6s;
  --speed-fast: 0.3s;

  /* --- PATTERNS --- */
  --pattern-stripes: repeating-linear-gradient(
    -45deg, transparent, transparent 3px,
    rgba(255, 255, 255, 0.05) 3px, rgba(255, 255, 255, 0.05) 6px
  );
  --pattern-stripes-lg: repeating-linear-gradient(
    -45deg, transparent, transparent 5px,
    rgba(255, 255, 255, 0.04) 5px, rgba(255, 255, 255, 0.04) 10px
  );
}

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

/*
 * ===================================================================
 *  BASE COMMUNE (Architecture des blocs)
 *  S'applique à tous les conteneurs principaux
 * ===================================================================
 */
.tldr-hybrid, .tldr-paragraph, .tldr-list,
.case-study-block,
.block-spc,
.faq-block,
.key-takeaways,
.author-block,
.actionable-list,
blockquote,
.table-data {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
    text-align: justify;
}

/* Interaction commune de "lift" */
.tldr-hybrid:hover, .tldr-paragraph:hover, .tldr-list:hover,
.case-study-block:hover,
.key-takeaways:hover,
.author-block:hover,
.actionable-list:hover,
blockquote:hover,
.table-data:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/*
 * ===================================================================
 *  1. BLOCS TL;DR ("Le Sceau Magnétique")
 * ===================================================================
 */
.tldr-hybrid, .tldr-paragraph, .tldr-list {
  padding: 45px 30px 30px 30px;
}

/* Le Sceau (Split top) */
.tldr-hybrid::before, .tldr-hybrid::after,
.tldr-paragraph::before, .tldr-paragraph::after,
.tldr-list::before, .tldr-list::after, .actionable-list::before, .table-data::before, .actionable-list::after, .table-data::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 18px;
  background-color: var(--color-primary);
  z-index: 1;
  transition: transform var(--speed-normal) var(--ease-elastic), box-shadow 0.3s ease;
}

.tldr-hybrid::before, .tldr-paragraph::before, .tldr-list::before, .actionable-list::before, .table-data::before {
  left: 0; border-bottom-left-radius: 10px;
}
.tldr-hybrid::after, .tldr-paragraph::after, .tldr-list::after, .actionable-list::after, .table-data::after {
  right: 0; border-bottom-right-radius: 10px;
}

/* Animation Sceau */
.tldr-hybrid:hover::before, .tldr-paragraph:hover::before, .tldr-list:hover::before, .actionable-list:hover::before, .table-data:hover::before{
  transform: translateX(-4px);
}
.tldr-hybrid:hover::after, .tldr-paragraph:hover::after, .tldr-list:hover::after, .actionable-list:hover::after, .table-data:hover::after {
  transform: translateX(4px);
}

/* Contenu TL;DR */
.tldr-hybrid p, .tldr-paragraph p {
  position: relative; z-index: 0;
 margin: 0;
}


.tldr-hybrid ul, .tldr-list ul {
  position: relative; z-index: 0; list-style: none; padding-left: 0; margin: 20px 0 0 0;
}
.tldr-list ul{margin:  0;}
.tldr-hybrid ul li, .tldr-list ul li {
  position: relative; padding-left: 25px; margin-bottom: 10px;
  font-size: 1rem; color: inherit; line-height: 1.6;
}
.tldr-hybrid ul li:last-child, .tldr-list ul li:last-child { margin-bottom: 0; }
.tldr-hybrid ul li::before, .tldr-list ul li::before {
  content: ''; position: absolute; top: 10px; left: 0;
  width: 9px; height: 9px; background-color: var(--color-primary);
}

/* Recommandation box */
.tldr-hybrid p:last-of-type {
  background-color: var(--c-bg-subtle);
  padding: 15px 20px; margin-top: 25px; border-radius: 6px;
  border-top: 4px solid var(--color-primary);
}
.tldr-hybrid p:last-of-type em, .tldr-hybrid p:last-of-type strong {
  font-style: normal;  color: inherit;
}

/*
 * ===================================================================
 *  2. CASE STUDY ("La Révélation Diptyque")
 * ===================================================================
 */
.case-study-block {
  padding: 30px; overflow: hidden;
  transition: transform var(--speed-normal) var(--ease-reveal), box-shadow var(--speed-normal) var(--ease-reveal);
}

.case-study-block::before, .case-study-block::after {
  content: ''; position: absolute; left: 0; width: 100%; z-index: 1;
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes-lg);
  transition: transform 0.5s var(--ease-reveal);
}
.case-study-block::before { top: 0; height: 62px; transform: translateY(-100%); }
.case-study-block::after { bottom: 0; height: 5px; transform: translateY(100%); }

.case-study-block:hover::before, .case-study-block:hover::after { transform: translateY(0); }

.case-study-block p { position: relative; z-index: 2; }
.case-study-block-title {
  font-size: 1.3rem; font-weight: 700; color: var(--color-primary);
  margin: 0 0 15px 0;
  transition: color var(--speed-normal) ease 0.1s, transform var(--speed-normal) var(--ease-reveal) 0.1s;
}
.case-study-block p:not(.case-study-block-title) {
 color: inherit;
  margin: 0; transition: color var(--speed-normal) ease 0.2s;
}

.case-study-block:hover .case-study-block-title { color: #fff; transform: translateY(-3px); }
.case-study-block:hover p:not(.case-study-block-title) { color: inherit; }
@media (max-width: 768px) {
.case-study-block:hover::before, .case-study-block:hover::after {
    height: 100%;
}
.case-study-block:hover p:not(.case-study-block-title) {
    color: #fff;
}
}
/*
 * ===================================================================
 *  3. PORTE CHROMATIQUE (Overlay)
 * ===================================================================
 */
.block-spc {
  padding: 30px; overflow: hidden;
  transition: transform var(--speed-normal) var(--ease-gate), box-shadow var(--speed-normal) var(--ease-gate);
     font-size: 16px;
    line-height: 1.7; color: inherit;
  transition: color var(--speed-normal) ease 0.2s;
}



/*
 * ===================================================================
 *  4. PANNEAUX CONVERGENTS (Key Takeaways)
 * ===================================================================
 */
.key-takeaways {
  display: flex; align-items: center; padding: 30px; overflow: hidden;
  transition: transform var(--speed-normal) var(--ease-reveal), box-shadow var(--speed-normal) var(--ease-reveal);    gap: 25px;
}

.key-takeaways::before, .key-takeaways::after {
  content: ''; position: absolute; top: 0; height: 100%; z-index: 1;
  transition: transform var(--speed-slow) var(--ease-reveal);
}
.key-takeaways::before {
  left: 0; width: 23%; background-color: var(--color-primary);
  background-image: var(--pattern-stripes-lg);
  transform: translateX(-100%);
}
.key-takeaways::after {
  right: 0; width: 77%; border-left: 2px solid var(--c-border);
  transform: translateX(100%);
}
.key-takeaways:hover::before, .key-takeaways:hover::after { transform: translateX(0); }

.key-takeaways p {
  position: relative; z-index: 2; flex: 0 0 20%;
  font-size: 24px; font-weight: 700; text-align: center; color: var(--color-primary);
  margin: 0; padding-right: 20px; transition: color var(--speed-normal) ease 0.2s;
}
.key-takeaways:hover p { color: #fff; }

.key-takeaways ul { position: relative; z-index: 2; flex: 1; list-style: none; padding: 0; margin: 0; }
.key-takeaways ul li {
  position: relative; padding-left: 25px; font-size: 1rem; line-height: 1.6;
  color: inherit; margin-bottom: 15px; transition: color var(--speed-fast) ease;
}
.key-takeaways ul li:last-child { margin-bottom: 0; }
.key-takeaways:hover ul li { color: inherit; }

.key-takeaways ul li::before {
  content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px;
  background-color: var(--c-border-lifeline); border-radius: 2px; opacity: 0.5;
  transition: all var(--speed-normal) var(--ease-reveal);
}
.key-takeaways:hover ul li::before { background-color: var(--color-primary); opacity: 1; }
/* Délais cascade */
.key-takeaways:hover ul li:nth-child(1), .key-takeaways:hover ul li:nth-child(1)::before { transition-delay: 0.2s; }
.key-takeaways:hover ul li:nth-child(2), .key-takeaways:hover ul li:nth-child(2)::before { transition-delay: 0.3s; }
.key-takeaways:hover ul li:nth-child(3), .key-takeaways:hover ul li:nth-child(3)::before { transition-delay: 0.4s; }

/* --- Version Mobile / Tablette (< 768px) --- */
@media (max-width: 768px) {

  .key-takeaways {
    /* On empile verticalement au lieu d'horizontalement */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    
    /* On réinitialise le padding du conteneur car on va le gérer dans les enfants */
    padding: 0;
    overflow: visible; /* Important pour le shadow si besoin */
    
    /* On ajoute une bordure au conteneur global car le ::after disparaît */
    border: 1px solid var(--c-border);
    border-radius: 8px; /* Optionnel : un peu plus joli sur mobile */
  }

  /* 
     STRATÉGIE : On désactive les pseudo-éléments glissants (::before/::after).
     Sur mobile, gérer des positions absolues sur un contenu fluide vertical est trop fragile.
     On applique le style directement sur les éléments enfants (p et ul).
  */
  .key-takeaways::before, 
  .key-takeaways::after {
    display: none;
  }

  /* --- Le Titre (p) --- */
  /* Il prend l'apparence du ::before original (fond primaire) */
  .key-takeaways p {
    flex: auto; /* Annule le 20% */
    width: 100%;
    text-align: left;
    padding: 20px;
    
    /* On applique le style "Actif" par défaut */
    background-color: var(--color-primary);
    background-image: var(--pattern-stripes-lg);
    color: #fff; 
    
    /* Petit ajustement border-radius si tu veux */
    border-radius: 8px 8px 0 0;
  }

  /* --- La Liste (ul) --- */
  .key-takeaways ul {
    padding: 20px;
    background-color: transparent; /* Ou une couleur de fond unie si nécessaire */
  }

  /* --- Les Éléments de liste (li) --- */
  /* On force l'état "visible/coloré" sans avoir besoin de survoler */
  .key-takeaways ul li {
    color: inherit; 
    margin-bottom: 12px;
  }

  /* Les puces carrées */
  .key-takeaways ul li::before {
    background-color: var(--color-primary);
    opacity: 1;
    /* On annule les délais de transition qui peuvent faire ramer le scroll mobile */
    transition-delay: 0s !important; 
  }
}




/*
 * ===================================================================
 *  6. AUTEUR & CITATIONS (Sceau de Connexion)
 * ===================================================================
 */
/* Styles partagés pour le Sceau de Connexion */
.author-block .avatar::before, .author-block .avatar::after,
blockquote::before, blockquote::after {
  content: ''; position: absolute; width: 6px;
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes);
  transform-origin: center;
  transition: all 0.5s var(--ease-seal); /* Auteur */
}
blockquote::before, blockquote::after { transition-duration: 0.6s; transition-timing-function: var(--ease-reveal); }

/* --- Auteur --- */
.author-block {
  display: flex; align-items: center; gap: 40px; padding: 25px;
  transition: box-shadow var(--speed-normal) var(--ease-seal);
}
.author-block .avatar {
  position: relative; z-index: 2; flex-shrink: 0; width: 70px; height: 70px;
  background-size: cover; background-position: center; border-radius: 50%;
  border: 3px solid var(--c-border-avatar); transition: border-color var(--speed-normal) ease;
}
.author-block .avatar::before, .author-block .avatar::after { right: -20px; }
.author-block .avatar::before { top: 50%; height: 50%; transform: translateY(-100%); border-radius: 3px 3px 0 0; }
.author-block .avatar::after { bottom: 50%; height: 50%; transform: translateY(100%); border-radius: 0 0 3px 3px; }

.author-block:hover .avatar { border-color: var(--color-primary); }
.author-block:hover .avatar::before { transform: translateY(-120%) rotate(-15deg); box-shadow: var(--shadow-glow); }
.author-block:hover .avatar::after { transform: translateY(120%) rotate(15deg); box-shadow: var(--shadow-glow); }

.author-block .author-text {
color: inherit; transition: color var(--speed-normal) ease 0.1s;text-align:justify;
}
.author-block .author-text a { font-weight: 700; color: inherit; text-decoration: none; transition: color var(--speed-normal) ease 0.1s; }
.author-block:hover .author-text { color: inherit; }
.author-block:hover .author-text a { color: var(--color-primary); }

/* --- Citation --- */
blockquote {
  background-color: var(--c-bg-blue-light); padding: 30px 40px 30px 50px; border-left: none;
}
blockquote::before, blockquote::after { left: 0; height: 20px; }
blockquote::before { top: 50%; transform: translateY(-100%); border-radius: 3px 3px 0 0; }
blockquote::after { bottom: 50%; transform: translateY(100%); border-radius: 0 0 3px 3px; }

blockquote:hover::before { transform: translateY(-120%) rotate(-15deg); box-shadow: var(--shadow-glow); }
blockquote:hover::after { transform: translateY(120%) rotate(15deg); box-shadow: var(--shadow-glow); }

.citation-content::before, .temoignage-content::before, blockquote cite::after {
  position: absolute; z-index: 1; font-weight: 700; font-size: 8rem; line-height: 1;
  color: rgba(28, 123, 145, 0.08); opacity: 0;
  transition: transform 0.6s var(--ease-reveal), opacity 0.6s ease;
}
.citation-content::before, .temoignage-content::before { content: '“'; top: 10px; left: 25px; transform: translate(-30px, -30px); }
blockquote cite::after { content: '”'; bottom: 0; right: 15px; transform: translate(30px, 30px); }
blockquote:hover .citation-content::before, blockquote:hover .temoignage-content::before, blockquote:hover cite::after { transform: translate(0, 0); opacity: 1; }

.citation-content, .temoignage-content{
  position: relative; z-index: 2; font-family: Oswald; font-size: 1.3rem; font-style: italic;
  line-height: 1.6; color:inherit; margin: 0 0 15px; transition: color var(--speed-normal) ease;
}
blockquote cite {
  display: block; position: relative; z-index: 2; text-align: right;
  font-size: 1rem; font-style: normal;
  color: inherit; margin-top: 20px; transition: color var(--speed-normal) ease 0.1s;
}
blockquote:hover .citation-content, blockquote:hover .temoignage-content { color: inherit; }
blockquote:hover cite { color: inherit; }

blockquote cite a {
  color: var(--color-primary); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px;
  transition: background-size var(--speed-normal) var(--ease-reveal) 0.1s;
}
blockquote:hover cite a { background-size: 100% 2px; }

/*
 * ===================================================================
 *  7. LISTE ACTIONNABLE ("Le Sceau Progressif")
 * ===================================================================
 */
.actionable-list {
  padding: 50px 30px 40px 30px;
  transition: transform var(--speed-normal) var(--ease-reveal), box-shadow var(--speed-normal) var(--ease-reveal);
}


.actionable-list h3 {
  position: relative; z-index: 1; font-size: 1.3rem; font-weight: 700; color: var(--color-primary); margin: 0 0 25px 0;
}

.actionable-list ol {
  position: relative; z-index: 1; list-style: none; padding: 0; margin: 0; padding-left: 40px; counter-reset: actionable-counter;
}
.actionable-list ol::before, .actionable-list ol::after {
  content: ''; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 2px;
}
.actionable-list ol::before { background-color: var(--c-border); z-index: 1; }
.actionable-list ol::after {
  background-color: var(--color-primary); height: 0; z-index: 2;
  transition: height var(--speed-slow) var(--ease-reveal) 0.1s;
}
.actionable-list:hover ol::after { height: calc(100% - 20px); }

.actionable-list li {
  position: relative; color: inherit;
  margin-bottom: 20px; counter-increment: actionable-counter; transition: color 0.3s ease;
}
.actionable-list li:last-child { margin-bottom: 0; }
.actionable-list:hover li { color: inherit; }

.actionable-list li::before {
  content: counter(actionable-counter); position: absolute; left: -40px; top: 0;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: var(--color-primary); background-color: #fff;
  border: 2px solid var(--c-border); border-radius: 50%; z-index: 3;
}
.actionable-list li::after {
  content: ''; position: absolute; left: -40px; top: 0; width: 22px; height: 22px;
  border: 2px solid var(--color-primary); border-radius: 50%; z-index: 4; opacity: 0;
  transform: scale(0.8); transition: opacity 0.4s var(--ease-reveal), transform 0.4s var(--ease-reveal);
}
.actionable-list:hover li::after { opacity: 1; transform: scale(1.3); }

/* Délais cascade liste */
.actionable-list:hover li:nth-child(1), .actionable-list:hover li:nth-child(1)::after { transition-delay: 0.2s; }
.actionable-list:hover li:nth-child(2), .actionable-list:hover li:nth-child(2)::after { transition-delay: 0.3s; }
.actionable-list:hover li:nth-child(3), .actionable-list:hover li:nth-child(3)::after { transition-delay: 0.4s; }
.actionable-list:hover li:nth-child(4), .actionable-list:hover li:nth-child(4)::after { transition-delay: 0.5s; }
.actionable-list:hover li:nth-child(5), .actionable-list:hover li:nth-child(5)::after { transition-delay: 0.6s; }

/*
 * ===================================================================
 *  8. TABLE DYNAMIQUE
 * ===================================================================
 */
.table-data {
  width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 12px;
  transition: transform var(--speed-normal) var(--ease-reveal), box-shadow var(--speed-normal) var(--ease-reveal);
}
/* Note: Sceau .table-data::before/after géré avec .actionable-list ci-dessus */

.table-data thead th {
  padding: 40px 25px 20px; background-color: var(--c-bg-blue-light);
  font-size: 1rem; font-weight: 700; color: var(--color-primary); text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.table-data thead th:first-child { border-top-left-radius: 0; }
.table-data thead th:last-child { border-top-right-radius: 0; }

.table-data tbody tr td {
  padding: 18px 25px; font-size: 0.95rem; color: inherit;
  border-bottom: 1px solid var(--c-bg-blue-light);
  opacity: 0.8; 
  transition: opacity 0.4s var(--ease-reveal), transform 0.4s var(--ease-reveal), background-color 0.3s ease, color 0.3s ease;
}
.table-data tbody tr:last-child td { border-bottom: none; }
.table-data tbody tr:hover td { background-color: var(--c-bg-hover-row); color: inherit; }
.table-data tbody tr:hover td:first-child { color: var(--color-primary); }

/* Délais cascade tableau */
.table-data:hover tbody tr:nth-child(1) td { transition-delay: 0.1s; }
.table-data:hover tbody tr:nth-child(2) td { transition-delay: 0.2s; }
.table-data:hover tbody tr:nth-child(3) td { transition-delay: 0.3s; }
.table-data:hover tbody tr:nth-child(4) td { transition-delay: 0.4s; }
.table-data:hover tbody tr:nth-child(5) td { transition-delay: 0.5s; }
.single th, .single tr, .single td { border: none; }
/*
 * ===================================================================
 *  9. BLOC PRO TIP AUTHOR ("Astuce de Pro" - 100% Universel)
 * ===================================================================
 */
.pro-tip-author {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 30px 30px 30px 50px; /* Espace à gauche pour l'icône */
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--color-primary); /* Marqueur visuel fort à gauche */
  box-shadow: var(--shadow-base);
  text-align: justify;
  overflow: hidden;
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease,
              border-color var(--speed-normal) ease;
}

/* Effet de lévitation commun */
.pro-tip-author:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * Icône d'ampoule universelle (Pas besoin de traduction).
 * Forme un badge rond à cheval sur la bordure gauche.
 */
.pro-tip-author::before {
 content: '';
  position: absolute;
  top: 30px;
  left: -20px;
  width: 40px;
  height: 40px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: var(--shadow-glow);
  z-index: 2;
  transition: transform var(--speed-normal) var(--ease-elastic);
}

/* L'ampoule grandit légèrement et s'illumine au survol */
.pro-tip-author:hover::before {
  transform: scale(1.15) rotate(10deg);
}

/* Pattern subtil en fond (Rappel de l'identité de ton thème) */
.pro-tip-author::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 100%;
  background-image: var(--pattern-stripes-lg);
  background-color: var(--color-primary);
  opacity: 0;
  transform: translateX(100%);
  transition: all var(--speed-normal) var(--ease-reveal);
  z-index: 0;
  pointer-events: none;
}

.pro-tip-author:hover::after {
  opacity: 0.05;
  transform: translateX(0);
}

/* Typographie - Propre, lisible, PAS de style citation */
.pro-tip-author .author-content {
  position: relative;
  z-index: 2;
}

.pro-tip-author .author-content p {
  margin: 0;
  color: inherit;
}
/*
 * ===================================================================
 *  10. BLOC MYTH BUSTING AUTHOR ("L'Avis Tranché")
 * ===================================================================
 */
.myth-busting-author {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 40px;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden;
  text-align: justify;
}

/* Effet de lévitation commun */
.myth-busting-author:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* Marqueur visuel "Alerte/Attention" (Coin en haut à droite) */
.myth-busting-author::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(to bottom left, var(--color-primary) 50%, transparent 50%);
  z-index: 1;
  opacity: 0.9;
  transition: transform var(--speed-normal) var(--ease-elastic);
}
.myth-busting-author:hover::before {
  transform: scale(1.2); /* Le triangle grandit au survol */
}

/* Base pour tous les paragraphes du bloc */
.myth-busting-author p {
  position: relative;
  z-index: 2;
  margin: 0 0 15px 0;
  color: inherit;
}


.myth-busting-author > p:first-of-type {
  font-size: 1.25rem;
  color: var(--color-primary);
  border-bottom: 2px solid var(--c-border-lifeline);
  padding-bottom: 15px;
  margin-bottom: 20px;
  transition: border-color var(--speed-normal) ease;
}
.myth-busting-author:hover > p:first-of-type {
  border-color: var(--color-primary); /* La ligne s'illumine au survol */
}

/* 2. Le Mythe ("Idée reçue") */
.myth-busting-author > p:nth-of-type(2) {
  background-color: var(--c-bg-subtle);
  padding: 15px 20px;
  border-radius: 6px;
  border-left: 4px dashed var(--c-border-lifeline);
  font-style: italic;
  opacity: 0.9;
}

/* 3. La Réalité (Corps de l'analyse) */
.myth-busting-author [itemprop="reviewBody"] {
  position: relative;
  z-index: 2;
  margin-top: 30px;
}

/* Style de la liste des points de blocage */
.myth-busting-author [itemprop="reviewBody"] ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.myth-busting-author [itemprop="reviewBody"] ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: inherit;
}
/* Flèche universelle pour la liste (pas de traduction requise) */
.myth-busting-author [itemprop="reviewBody"] ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.2rem;
    line-height: 1;
  transition: transform var(--speed-fast) var(--ease-reveal);
}
.myth-busting-author:hover [itemprop="reviewBody"] ul li::before {
  transform: translateX(5px); /* Les flèches avancent au survol du bloc */
}

/* 4. La Recommandation Finale */
.myth-busting-author [itemprop="reviewBody"] p:last-of-type {
  background-color: var(--color-primary);
  color: #fff;
  padding: 18px 25px;
  border-radius: 8px;
  font-weight: 500;
  margin-top: 25px;
  margin-bottom: 0;
  box-shadow: var(--shadow-glow);
  background-image: var(--pattern-stripes-lg); /* Texture du thème */
}

/* 5. Le Disclaimer / Constat (Tout en bas) */
.myth-busting-author > p:last-of-type {
  margin-top: 30px;
  margin-bottom: 0;
  font-size: 0.9rem;
  opacity: 0.7;
  border-top: 1px solid var(--c-border);
  padding-top: 15px;
}
/*
 * ===================================================================
 *  11. BLOC DIRECT ANSWER ("Design identique au TL;DR")
 * ===================================================================
 */
.direct-answer {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 45px 30px 30px 30px;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  text-align: justify;
}

/* Interaction commune de "lift" */
.direct-answer:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* Le Sceau (Split top - Exactement comme le TL;DR) */
.direct-answer::before, 
.direct-answer::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 18px;
  background-color: var(--color-primary);
  z-index: 1;
  transition: transform var(--speed-normal) var(--ease-elastic), box-shadow 0.3s ease;
}

.direct-answer::before {
  left: 0; 
  border-bottom-left-radius: 10px;
}
.direct-answer::after {
  right: 0; 
  border-bottom-right-radius: 10px;
}

/* Animation Sceau */
.direct-answer:hover::before {
  transform: translateX(-4px);
}
.direct-answer:hover::after {
  transform: translateX(4px);
}

/* 
 * Mise en forme du texte intérieur 
 * (Adapté à ton HTML spécifique pour ce bloc)
 */
.direct-answer .direct-answer-label {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
}

.direct-answer [itemprop="text"] p {
  position: relative; 
  z-index: 2;
  margin: 0;
  color: inherit;
}
/*
 * ===================================================================
 *  12. BLOC LIST CHECK ("La Liste de Validation")
 * ===================================================================
 */
.list-check {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 40px 30px;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden;
}

/* Interaction de "lift" commune */
.list-check:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * Ligne de progression dynamique en haut 
 * (Se remplit de gauche à droite au survol)
 */
.list-check::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes-lg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed-slow) var(--ease-reveal);
  z-index: 1;
}

.list-check:hover::before {
  transform: scaleX(1);
}

/* Titre du bloc */
.list-check h3 {
  margin: 0 0 25px 0;
  position: relative;
  z-index: 2;
    border-bottom: 1px dashed var(--c-border);
    padding-bottom: 15px;
}

/* Liste (Reset des marges et puces par défaut) */
.list-check ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Éléments de la liste */
.list-check li {
  position: relative;
  padding-left: 40px; /* Espace pour la coche */
  margin-bottom: 15px;
  color: inherit;
}

.list-check li:last-child {
  margin-bottom: 0;
}

/* 
 * La Coche (Checkmark) 100% pure CSS (Aucun texte/émoji)
 * Créée en pliant une bordure à 45 degrés
 */
.list-check li::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 6px; /* Ajustement vertical */
  width: 6px;
  height: 12px;
  border: solid var(--c-border-lifeline);
  border-width: 0 3px 3px 0; /* Dessine le L */
  transform: rotate(45deg); /* Tourne le L pour faire un V */
  opacity: 0.6;
  transition: border-color var(--speed-normal) ease, 
              transform var(--speed-fast) var(--ease-elastic),
              opacity var(--speed-normal) ease;
}

/* Animation au survol : la coche devient primaire, opaque et fait un petit rebond */
.list-check:hover li::before {
  border-color: var(--color-primary);
  opacity: 1;
  transform: rotate(45deg) scale(1.2);
}

/* 
 * Animation en cascade des coches (Cascade delay)
 * Les coches s'allument les unes après les autres
 */
.list-check:hover li:nth-child(1)::before { transition-delay: 0.1s; }
.list-check:hover li:nth-child(2)::before { transition-delay: 0.2s; }
.list-check:hover li:nth-child(3)::before { transition-delay: 0.3s; }
.list-check:hover li:nth-child(4)::before { transition-delay: 0.4s; }
.list-check:hover li:nth-child(5)::before { transition-delay: 0.5s; }
.list-check:hover li:nth-child(6)::before { transition-delay: 0.6s; }

/*
 * ===================================================================
 *  13. BLOC LIST STEPS ("La Timeline Interactive / Tutoriel")
 * ===================================================================
 */
.list-steps {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 40px 40px 40px 30px;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden;
}

/* Effet de lévitation au survol */
.list-steps:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* Titre principal du tutoriel */
.list-steps h3 {
  margin: 0 0 35px 0;
  position: relative;
  z-index: 2;
  border-bottom: 2px solid var(--c-bg-subtle);
  padding-bottom: 15px;
}

/* 
 * Conteneur des étapes
 * Initialisation du compteur automatique
 */
.list-steps .steps-container {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px; /* Décalage pour laisser la place à la timeline */
  position: relative;
  counter-reset: step-counter; /* Prépare le comptage (1, 2, 3...) */
  z-index: 2;
}

/* La ligne grise de fond (Timeline inactive) */
.list-steps .steps-container::before {
  content: '';
  position: absolute;
  left: 17px; /* Centré par rapport aux cercles numérotés */
  top: 10px;
  bottom: 20px; /* S'arrête avant la fin */
  width: 2px;
  background-color: var(--c-border);
  z-index: 1;
}

/* La ligne de progression colorée (Se remplit au survol) */
.list-steps .steps-container::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 10px;
  width: 2px;
  height: 0; /* Cachée par défaut */
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes); /* Texture subtile */
  z-index: 2;
  transition: height var(--speed-slow) var(--ease-reveal) 0.1s;
}

/* Animation de la jauge au survol du bloc complet */
.list-steps:hover .steps-container::after {
  height: calc(100% - 30px);
}

/* Style de chaque étape */
.list-steps li {
  position: relative;
  padding-left: 55px; /* Place pour le numéro rond */
  margin-bottom: 30px;
  counter-increment: step-counter; /* +1 à chaque <li> */
}

.list-steps li:last-child {
  margin-bottom: 0;
}

/* 
 * Le Cercle Numéroté (100% CSS, chiffres générés automatiquement)
 */
.list-steps li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: -2px;
  width: 36px;
  height: 36px;
  background-color: var(--c-bg-card);
  border: 2px solid var(--c-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  z-index: 3;
  transition: all var(--speed-normal) var(--ease-elastic);
}

/* Animation des cercles au survol (Pulsation + Remplissage) */
.list-steps:hover li::before {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: scale(1.15);
  box-shadow: var(--shadow-glow);
}

/* Titre de l'étape (strong) */
.list-steps li strong {
  display: block;
  font-size: 16px;
  color: inherit;
  margin-bottom: 8px;
  transition: color var(--speed-normal) ease;
}

.list-steps:hover li strong {
  color: var(--color-primary);
}

/* Paragraphe de description de l'étape */
.list-steps li div p {
  margin: 0;
  color: inherit;
  opacity: 0.9;
}

/* 
 * Délais en cascade : les cercles s'allument un par un 
 * de haut en bas quand on passe la souris sur le bloc
 */
.list-steps:hover li:nth-child(1)::before { transition-delay: 0.1s; }
.list-steps:hover li:nth-child(2)::before { transition-delay: 0.2s; }
.list-steps:hover li:nth-child(3)::before { transition-delay: 0.3s; }
.list-steps:hover li:nth-child(4)::before { transition-delay: 0.4s; }
.list-steps:hover li:nth-child(5)::before { transition-delay: 0.5s; }
.list-steps:hover li:nth-child(6)::before { transition-delay: 0.6s; }
/*
 * ===================================================================
 *  14. BLOC CHECKLIST ("La Checklist Pré-cochée Interactive")
 * ===================================================================
 */
.checklist {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 40px 35px 40px 40px;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden;
}

.checklist:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.checklist h3 {
  margin: 0 0 25px 0;
  position: relative;
  z-index: 2;
  border-bottom: 1px dashed var(--c-border);
  padding-bottom: 15px;
}

.checklist .checklist-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

.checklist .checklist-steps li {
  position: relative;
  padding-left: 45px;
  margin-bottom: 18px;
  color: inherit;
  transition: transform var(--speed-normal) var(--ease-elastic);
}

.checklist .checklist-steps li:last-child {
  margin-bottom: 0;
}

/* 
 * 1. La Case Carrée (Vide par défaut) 
 */
.checklist .checklist-steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border: 2px solid var(--c-border);
  border-radius: 6px;
  background-color: var(--c-bg-card);
  transition: all var(--speed-normal) var(--ease-elastic);
  z-index: 2;
}

/* 
 * 2. La Coche à l'intérieur (DESSINÉE EN CSS)
 * >>> MODIFICATION : Elle est visible par défaut et en couleur primaire. <<<
 */
.checklist .checklist-steps li::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  width: 6px;
  height: 12px;
  /* La coche est colorée par défaut */
  border: solid var(--color-primary); 
  border-width: 0 2px 2px 0;
  /* Elle est visible par défaut */
  transform: rotate(45deg) scale(1); 
  opacity: 0.8; /* Légèrement transparente pour un meilleur effet au survol */
  transition: all var(--speed-normal) var(--ease-elastic);
  z-index: 3;
}

/* 
 * ANIMATIONS AU SURVOL
 */
/* La case se remplit */
.checklist:hover .checklist-steps li::before {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.1);
  box-shadow: var(--shadow-glow);
}

/* >>> MODIFICATION : La coche devient BLANCHE pour rester visible <<< */
.checklist:hover .checklist-steps li::after {
  border-color: #fff; /* La coche passe en blanc */
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.checklist:hover .checklist-steps li {
  transform: translateX(5px);
}

/* 
 * Délais en cascade : les cases se cochent les unes après les autres
 */
.checklist:hover li:nth-child(1),
.checklist:hover li:nth-child(1)::before,
.checklist:hover li:nth-child(1)::after { transition-delay: 0.1s; }

.checklist:hover li:nth-child(2),
.checklist:hover li:nth-child(2)::before,
.checklist:hover li:nth-child(2)::after { transition-delay: 0.2s; }

.checklist:hover li:nth-child(3),
.checklist:hover li:nth-child(3)::before,
.checklist:hover li:nth-child(3)::after { transition-delay: 0.3s; }

.checklist:hover li:nth-child(4),
.checklist:hover li:nth-child(4)::before,
.checklist:hover li:nth-child(4)::after { transition-delay: 0.4s; }

.checklist:hover li:nth-child(5),
.checklist:hover li:nth-child(5)::before,
.checklist:hover li:nth-child(5)::after { transition-delay: 0.5s; }

/*
 * ===================================================================
 *  15. BLOC SUCCESS BOX ("La Confirmation Visuelle")
 * ===================================================================
 */
.success-box {
  position: relative;
  background-color:#f4fff8;
  border-radius: 12px;
  margin: 30px 0;
  padding: 30px 30px 30px 45px;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--color-success); /* Marqueur vert à gauche */
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: visible; /* Important pour le badge qui dépasse */
}

/* Effet de lévitation au survol */
.success-box:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * Le Badge circulaire "Succès" avec la coche
 */

/* 1. Le cercle vert */
.success-box::before {
  content: '';
  position: absolute;
  left: -22px; /* Dépasse sur la gauche */
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-color: var(--color-success);
  border-radius: 50%;
  box-shadow: var(--shadow-glow);
  z-index: 2;
  transition: transform var(--speed-normal) var(--ease-elastic);
}

/* 2. La coche blanche à l'intérieur (100% CSS) */
.success-box::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 16px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  z-index: 3;
}

/* Animation au survol : le badge pulse */
.success-box:hover::before {
  transform: translateY(-50%) scale(1.15);
}

/* Typographie du message */
.success-box p {
  margin: 0;
  color: inherit;
}

.success-box p strong {
  color: var(--color-success);
  font-weight: 600;
}

/*
 * ===================================================================
 *  16. BLOC WARNING ("Le Point d'Attention")
 * ===================================================================
 */
.warning {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 30px 30px 30px 45px;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--color-warning); /* Marqueur orange à gauche */
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: visible; /* Pour le badge qui dépasse */
}

/* Effet de lévitation commun */
.warning:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * Le Badge circulaire "Attention" avec le point d'exclamation
 */

/* 1. Le cercle orange */
.warning::before {
  content: '';
  position: absolute;
  left: -22px; /* Positionné à cheval sur la bordure */
  top: 30px; /* Aligné avec le premier paragraphe */
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-color: var(--color-warning);
  border-radius: 50%;
  box-shadow: var(--shadow-glow);
  z-index: 2;
  transition: transform var(--speed-normal) var(--ease-elastic);
}

/* 2. Le "!" à l'intérieur (symbole universel, pas de traduction) */
.warning::after {
  content: '!';
  position: absolute;
  left: -5px;
  top: 30px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  z-index: 3;
  pointer-events: none; /* Pour ne pas gêner le survol */
}

/* Animation au survol : le badge pulse */
.warning:hover::before {
  transform: translateY(-50%) scale(1.15);
}

/* Typographie du contenu */
.warning p {
  margin: 0 0 20px 0;
}
.warning p strong {
  color: var(--color-warning);
  font-weight: 700;
}

/* Style de la liste des risques/actions */
.warning ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px dashed var(--c-border);
  padding-top: 20px;
}
.warning ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
}
.warning ul li:last-child {
  margin-bottom: 0;
}

/* Puces carrées oranges pour la liste */
.warning ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  background-color: var(--color-warning);
  border-radius: 2px;
}

.warning ul li strong {
  color: var(--color-warning);
  font-weight: 600;
}

/*
 * ===================================================================
 *  17. BLOC INFO BOX ("Le Sceau Vertical")
 * ===================================================================
 */
.info-box {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  /* Plus de padding à gauche pour faire place au sceau */
  padding: 30px 30px 30px 50px; 
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
}

/* L'effet de lévitation est conservé */
.info-box:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * Le Sceau Vertical (Adaptation du design TL;DR)
 * Une barre verticale à gauche, scindée en deux.
 */
.info-box::before, 
.info-box::after {
  content: '';
  position: absolute;
  left: 0;
  width: 8px; /* Épaisseur du sceau */
  height: 50%;
  background-color: var(--color-primary);
  z-index: 1;
  transition: transform var(--speed-normal) var(--ease-elastic);
}

/* Moitié supérieure du sceau */
.info-box::before {
  top: 0; 
  border-top-left-radius: 10px;
}
/* Moitié inférieure du sceau */
.info-box::after {
  bottom: 0; 
  border-bottom-left-radius: 10px;
}

/* 
 * Animation du Sceau Vertical au survol :
 * Les deux moitiés s'écartent verticalement.
 */
.info-box:hover::before {
  transform: translateY(-4px);
}
.info-box:hover::after {
  transform: translateY(4px);
}

/* Typographie du contenu */
.info-box p {
  margin: 0;
}

/* Mise en avant du titre avec la même couleur que le sceau */
.info-box p strong {
  font-weight: 600;
  color: var(--color-primary);
}

/*
 * ===================================================================
 *  18. BLOC INSTANT ANSWER ("La Réponse Ciblée")
 * ===================================================================
 */
.instant-answer {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden; /* Pour que les coins arrondis s'appliquent aux enfants */
}

/* Effet de lévitation au survol */
.instant-answer:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * 1. La Section "Question"
 * Elle sert d'en-tête coloré pour attirer l'œil.
 */
.instant-answer .question {
  position: relative;
  padding: 20px 30px;
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes-lg); /* Réutilisation de votre motif */
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  z-index: 2;
}


.instant-answer .answer {
  position: relative;
  padding: 25px 30px;
  z-index: 1;
}

.instant-answer .answer p {
  margin: 0;
  color: inherit;
}
/*
 * ===================================================================
 *  19. BLOC PRO TIP ("Le Sceau Vertical - Expert")
 * ===================================================================
 */
.pro-tip {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 30px 30px 30px 50px; /* Espace à gauche pour le sceau */
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
}

/* Effet de lévitation commun */
.pro-tip:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * Le Sceau Vertical en couleur primaire
 * (Même structure que l'info-box, mais avec la couleur principale)
 */
.pro-tip::before, 
.pro-tip::after {
  content: '';
  position: absolute;
  left: 0;
  width: 8px;
  height: 50%;
  background-color: var(--color-primary); /* <-- COULEUR PRIMAIRE UTILISÉE ICI */
  background-image: var(--pattern-stripes); /* J'ajoute le motif pour plus d'impact */
  z-index: 1;
  transition: transform var(--speed-normal) var(--ease-elastic);
}

/* Moitié supérieure du sceau */
.pro-tip::before {
  top: 0; 
  border-top-left-radius: 10px;
}
/* Moitié inférieure du sceau */
.pro-tip::after {
  bottom: 0; 
  border-bottom-left-radius: 10px;
}

/* Animation du Sceau au survol */
.pro-tip:hover::before {
  transform: translateY(-4px);
}
.pro-tip:hover::after {
  transform: translateY(4px);
}

/* Typographie du contenu */
.pro-tip p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

/* Mise en avant du titre avec la couleur principale */
.pro-tip p strong {
  font-weight: 600;
  color: var(--color-primary); /* <-- COULEUR PRIMAIRE UTILISÉE ICI */
}

/*
 * ===================================================================
 *  20. BLOC KEY STAT (Version unifiée et flexible)
 * ===================================================================
 */
.key-stat {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden;
}

.key-stat:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * 1. Panneau de la valeur (gauche) - Maintenant plus flexible
 */
.key-stat .value {
  flex: 0 0 220px; /* Panneau légèrement plus large pour les textes longs */
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px 15px; /* Ajout d'un padding horizontal */
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes-lg);
  color: #fff;
  font-weight: 600;
  text-align: center;
  transition: transform var(--speed-normal) var(--ease-elastic);
  
  /* --- MODIFICATIONS CLÉS --- */
  font-size: 20px; /* Taille de police par défaut, adaptée aux textes longs */
  white-space: nowrap; /* Force le texte à rester sur une seule ligne */
  line-height: 1.2;
}

/* 
 * 2. Panneau du texte (droite) - Inchangé
 */
.key-stat .label {
  flex: 1;
  margin: 0;
  padding: 20px 30px;
  color: inherit;
  transition: color var(--speed-fast) ease;
}

/* 
 * 3. COMPATIBILITÉ AVEC L'ANCIEN FORMAT ("68%")
 * Ces règles ne s'appliqueront que si les <span> sont présents.
 */
.key-stat .value span[itemprop="value"] {
  font-size: 4.5rem; /* Rétablit la très grande taille pour les chiffres simples */
  line-height: 1;
}
.key-stat .value span[itemprop="unitText"] {
  font-size: 1.5rem;
  margin-left: 5px;
  align-self: flex-start;
  margin-top: 0.5rem;
}

/*
 * ANIMATIONS AU SURVOL - Inchangées
 */
.key-stat:hover .value {
  transform: scale(1.05);
}
.key-stat:hover .label {
  color: var(--color-primary);
}

/*
 * ===================================================================
 *  21. BLOC TIMELINE ("La Ligne de Vie Chronologique")
 * ===================================================================
 */
.timeline {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 50px 40px 40px 40px; /* Espace pour le sceau et le contenu */
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  list-style: none; /* Supprime les puces par défaut */
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
}

/* Effet de lévitation au survol */
.timeline:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * 1. LE SCEAU MAGNÉTIQUE (Identique au TL;DR)
 */
.timeline::before, 
.timeline::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 18px;
  background-color: var(--color-primary);
  z-index: 3;
  transition: transform var(--speed-normal) var(--ease-elastic);
}
.timeline::before { left: 0; border-bottom-left-radius: 10px; }
.timeline::after { right: 0; border-bottom-right-radius: 10px; }

/* Animation du sceau */
.timeline:hover::before { transform: translateX(-4px); }
.timeline:hover::after { transform: translateX(4px); }

/* 
 * 2. LA LIGNE VERTICALE (Connecteur)
 */
.timeline-line-decorator {
  /* On crée un conteneur interne pour la ligne afin de ne pas interférer avec le sceau */
  position: absolute;
  left: 55px;
  top: 70px;
  bottom: 60px;
  width: 2px;
  background-color: var(--c-border);
  z-index: 1;
}

/* 
 * 3. LES ÉTAPES (LI)
 */
.timeline li {
  position: relative;
  padding-left: 60px; /* Espace pour la ligne et les points */
  margin-bottom: 30px;
  z-index: 2;
}
.timeline li:last-child { margin-bottom: 0; }

/* Le Point (Circle) sur la ligne */
.timeline li::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 6px;
  width: 14px;
  height: 14px;
  background-color: var(--c-bg-card);
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  z-index: 3;
  transition: transform var(--speed-normal) var(--ease-elastic),
              background-color var(--speed-fast) ease;
}

/* Animation des points au survol */
.timeline:hover li::before {
  transform: scale(1.3);
  background-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
}

/* 
 * 4. LE CONTENU (Time & Text)
 */

/* Le Badge de temps (J+0, J+15...) */
.timeline li time {
  display: inline-block;
  font-weight: 700;
  color: var(--color-primary);
  background-color: var(--c-bg-subtle);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-right: 15px;
  transition: background-color var(--speed-normal) ease, color var(--speed-normal) ease;
}

.timeline:hover li time {
  background-color: var(--color-primary);
  color: #fff;
}

/* Le nom de l'événement */
.timeline li span[itemprop="name"] {
  font-size: 1.05rem;
  font-weight: 500;
  color: inherit;
}

/* Délais en cascade pour les points */
.timeline:hover li:nth-child(1)::before { transition-delay: 0.1s; }
.timeline:hover li:nth-child(2)::before { transition-delay: 0.2s; }
.timeline:hover li:nth-child(3)::before { transition-delay: 0.3s; }
.timeline:hover li:nth-child(4)::before { transition-delay: 0.4s; }

/*
 * ===================================================================
 *  22. BLOC LEXIQUE ("La Fiche de Définition")
 * ===================================================================
 */
.lexique {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden;
}

.lexique:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* Le terme à définir (DT) sert d'en-tête coloré */
.lexique dt {
  margin: 0;
  padding: 20px 30px;
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes-lg);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}

/* Le terme principal (DFN) est mis en avant */
.lexique dt dfn {
  font-size: 1.3rem;
  font-weight: 700;
  font-style: normal;
}

.lexique dd {
  margin: 0;
  padding: 25px 30px;
  color: inherit;
}

/*
 * ===================================================================
 *  23. BLOC DECISION TREE ("La Timeline des Choix") - Version Moderne
 * ===================================================================
 */
.decision-tree {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 40px; /* Ajustement du padding pour la timeline */
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden;
}

/* Effet de lévitation commun */
.decision-tree:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* Titre principal de l'arbre de décision */
.decision-tree > p {
  margin: 0 0 35px 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
  position: relative;
  z-index: 2;
  border-bottom: 2px solid var(--c-border); /* Séparateur subtil */
  padding-bottom: 15px;
  text-align: left; /* Centrer le titre */
}

/* Conteneur des étapes (UL) */
.decision-tree ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  counter-reset: decision-counter; /* Initialise le compteur pour les numéros */
  z-index: 2; /* S'assure que le contenu est au-dessus des lignes */
}

/* La ligne verticale de fond (incolore) */
.decision-tree ul::before {
  content: '';
  position: absolute;
  left: 17px; /* Position de la ligne (décalée à gauche) */
  top: 10px;
  bottom: 20px; /* Arrêt un peu avant la fin de la liste */
  width: 2px;
  background-color: var(--c-border);
  z-index: 1;
}

/* La ligne de progression colorée (se remplit au survol) */
.decision-tree ul::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 10px;
  width: 2px;
  height: 0; /* Hauteur initiale à zéro (cachée) */
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes); /* Texture du thème */
  z-index: 2;
  transition: height var(--speed-slow) var(--ease-reveal) 0.1s;
}

/* Au survol du bloc, la ligne colorée se remplit */
.decision-tree:hover ul::after {
  height: calc(100% - 30px); /* S'étend sur toute la hauteur visible */
}

/* Chaque étape individuelle (LI) */
.decision-tree li {
  position: relative;
  padding-left: 60px; /* Espace pour le cercle numéroté et la ligne */
  margin-bottom: 30px;
  counter-increment: decision-counter; /* Incrémente le compteur pour chaque li */
}

.decision-tree li:last-child {
  margin-bottom: 0;
}

/* Le cercle numéroté (comme un jalon sur la timeline) */
.decision-tree li::before {
  content: counter(decision-counter); /* Affiche le numéro */
  position: absolute;
  left: 0;
  top: 0; /* Aligné avec le haut du strong */
  width: 36px;
  height: 36px;
  background-color: var(--c-bg-card); /* Fond blanc */
  border: 2px solid var(--c-border-lifeline); /* Bordure bleu-gris */
  border-radius: 50%; /* Cercle parfait */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary); /* Numéro en couleur primaire */
  z-index: 3;
  transition: all var(--speed-normal) var(--ease-elastic);
}

/* Animation du cercle numéroté au survol */
.decision-tree:hover li::before {
  background-color: var(--color-primary); /* Fond primaire */
  border-color: var(--color-primary); /* Bordure primaire */
  color: #fff; /* Numéro en blanc */
  transform: scale(1.15); /* Pulsation */
  box-shadow: var(--shadow-glow); /* Léger effet de lueur */
}

/* La condition (strong) */
.decision-tree li strong {
  display: block;
  font-size: 16px;
  color: inherit;
  margin-bottom: 8px;
  transition: color var(--speed-normal) ease;
}

/* La conséquence (div) */
.decision-tree li div[itemprop="text"] {
  color: inherit;
  opacity: 0.9;
}

/* Animation du texte de la condition au survol */
.decision-tree:hover li strong {
  color: var(--color-primary); /* Prend la couleur primaire */
}

/* Délais en cascade pour les cercles et le texte (effet de progression) */
/* Chaque élément s'anime l'un après l'autre */
.decision-tree:hover li:nth-child(1)::before, .decision-tree:hover li:nth-child(1) strong { transition-delay: 0.1s; }
.decision-tree:hover li:nth-child(2)::before, .decision-tree:hover li:nth-child(2) strong { transition-delay: 0.2s; }
.decision-tree:hover li:nth-child(3)::before, .decision-tree:hover li:nth-child(3) strong { transition-delay: 0.3s; }
.decision-tree:hover li:nth-child(4)::before, .decision-tree:hover li:nth-child(4) strong { transition-delay: 0.4s; }
.decision-tree:hover li:nth-child(5)::before, .decision-tree:hover li:nth-child(5) strong { transition-delay: 0.5s; }
/*
 * ===================================================================
 *  24. BLOC MYTH BUSTING ("Vérification Directe") - Design Moderne
 * ===================================================================
 */
.myth-busting {
  position: relative;
  background-color: var(--c-bg-card); /* Fond blanc par défaut */
  border-radius: 12px;
  margin: 30px 0;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden; /* Important pour les coins arrondis et les animations */
}

/* Effet de lévitation commun */
.myth-busting:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}


.myth-busting > p:first-of-type {
  padding: 20px 30px 20px 30px; /* Espace pour l'icône */
  background-color: var(--c-bg-subtle); /* Fond gris clair subtil */
  color: inherit;
  border-bottom: 1px solid var(--c-border); /* Séparation visuelle */
  margin: 0;
  position: relative;
  z-index: 2;
  transition: all var(--speed-normal) ease;
}



/* Texte "Affirmation :" */
.myth-busting > p:first-of-type strong {
  color: inherit;
  font-weight: 700;
  transition: color var(--speed-normal) ease;
}

/* Au survol du bloc, l'affirmation s'estompe */
.myth-busting:hover > p:first-of-type {
  background-color: var(--c-bg-card); /* Rejoint le blanc du reste du bloc */
  color: var(--c-border-lifeline); /* Texte légèrement estompé */
}
.myth-busting:hover > p:first-of-type strong {
  color: var(--c-border-lifeline); /* Même couleur estompée pour le "Affirmation :" */
}


.myth-busting [itemprop="reviewBody"] {
  padding: 20px 30px 10px 30px; /* Espace pour l'icône */
  background-color: var(--c-bg-card); /* Fond blanc initial */
  color: inherit;
  margin: 0;
  position: relative;
  z-index: 2;
  transition: all var(--speed-normal) var(--ease-reveal);
}




/* Texte "Réponse :" */
.myth-busting [itemprop="reviewBody"] p strong {
  color: var(--color-primary); /* Mise en avant de la réponse avec la couleur primaire */
  font-weight: 600;
  transition: color var(--speed-normal) ease;
}

/* Au survol du bloc, la réponse prend la couleur primaire */
.myth-busting:hover [itemprop="reviewBody"] {
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes-lg); /* Motif du thème pour un effet plus riche */
  color: #fff; /* Texte blanc sur fond primaire */
}
.myth-busting:hover [itemprop="reviewBody"] p strong {
  color: #fff; /* Le "Réponse :" passe aussi en blanc pour le contraste */
}


/*
 * ===================================================================
 *  25. BLOC ANALOGY ("Le Sceau Vertical - Analogie")
 * ===================================================================
 */
.analogy {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 30px 30px 30px 50px; /* Espace à gauche pour le sceau */
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
}

/* Effet de lévitation commun */
.analogy:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * Le Sceau Vertical en couleur primaire
 * (Même structure que le pro-tip)
 */
.analogy::before, 
.analogy::after {
  content: '';
  position: absolute;
  left: 0;
  width: 8px;
  height: 50%;
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes); /* Ajout du motif pour plus d'impact */
  z-index: 1;
  transition: transform var(--speed-normal) var(--ease-elastic);
}

/* Moitié supérieure du sceau */
.analogy::before {
  top: 0; 
  border-top-left-radius: 10px;
}
/* Moitié inférieure du sceau */
.analogy::after {
  bottom: 0; 
  border-bottom-left-radius: 10px;
}

/* Animation du Sceau au survol */
.analogy:hover::before {
  transform: translateY(-4px);
}
.analogy:hover::after {
  transform: translateY(4px);
}

/* Typographie du contenu */
.analogy p {
  margin: 0;
}

/* Mise en avant du titre "Analogie :" avec la couleur principale */
.analogy p strong {
  font-weight: 600;
  color: var(--color-primary);
}
/*
 * ===================================================================
 *  26. BLOC BEFORE-AFTER ("Le Contraste Révélé")
 * ===================================================================
 */
.before-after {
  position: relative;
  background-color: var(--c-bg-card); /* Fond blanc standard */
  border-radius: 12px;
  margin: 30px 0;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden; /* Pour que les coins arrondis s'appliquent partout */
}

/* Effet de lévitation commun */
.before-after:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* Conteneur principal des paragraphes */
.before-after [itemprop="reviewBody"] {
  display: flex;
  flex-direction: column; /* Les paragraphes s'empilent verticalement */
}

/* 
 * 1. Section "Avant"
 * Panneau supérieur, avec un fond gris discret.
 */
.before-after [itemprop="reviewBody"] p:first-of-type {
  position: relative;
  padding: 25px 30px 25px 70px; /* Espace pour l'icône */
  background-color: var(--c-bg-subtle); /* Fond gris clair pour l'état "avant" */
  border-bottom: 1px solid var(--c-border); /* Ligne de séparation */
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
  transition: all var(--speed-normal) ease;
}

/* Texte "Avant :" */
.before-after [itemprop="reviewBody"] p:first-of-type strong {
  color: inherit; /* Le texte "Avant" garde sa couleur naturelle */
  font-weight: 700;
}

/* Icône "Avant" (un simple tiret/dash, 100% CSS) */
.before-after [itemprop="reviewBody"] p:first-of-type::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
  width: 25px;
  height: 2px;
  background-color: var(--c-border-lifeline); /* Couleur bleu-gris pour l'icône "avant" */
  border-radius: 1px;
  transition: all var(--speed-normal) var(--ease-elastic);
  z-index: 2;
}

/* 
 * 2. Section "Après"
 * Panneau inférieur, avec un fond blanc au repos, qui se révèle au survol.
 */
.before-after [itemprop="reviewBody"] p:last-of-type {
  position: relative;
  padding: 25px 30px 25px 70px; /* Espace pour l'icône */
  background-color: var(--c-bg-card); /* Fond blanc pour l'état "après" au repos */
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
  transition: all var(--speed-normal) var(--ease-reveal); /* Transition plus dramatique */
}

/* Texte "Après :" */
.before-after [itemprop="reviewBody"] p:last-of-type strong {
  color: var(--color-primary); /* Le texte "Après" est en couleur primaire au repos */
  font-weight: 700;
  transition: color var(--speed-normal) ease;
}

/* Icône "Après" (une coche, 100% CSS) */
.before-after [itemprop="reviewBody"] p:last-of-type::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 28px;
  transform: translateY(-50%) rotate(45deg) scale(0.8); /* Coche légèrement plus petite au repos */
  width: 10px;
  height: 18px;
  border: solid var(--color-primary); /* Coche en couleur primaire */
  border-width: 0 3px 3px 0;
  transition: all var(--speed-normal) var(--ease-elastic);
  z-index: 2;
}

/* -------------------- EFFETS AU SURVOL DU BLOC ENTIER -------------------- */

/* Quand on survole le bloc entier... */

/* 1. La section "Avant" s'estompe */
.before-after:hover [itemprop="reviewBody"] p:first-of-type {
  background-color: var(--c-bg-card); /* Le fond devient blanc */
  color: var(--c-border-lifeline); /* Le texte devient plus subtil */
}
.before-after:hover [itemprop="reviewBody"] p:first-of-type::before {
  background-color: var(--color-primary); /* Le tiret devient primaire */
  transform: translateY(-50%) rotate(90deg) scale(0.6); /* Le tiret tourne pour devenir un "minus" et se réduit */
  opacity: 0.5; /* Devient plus discret */
}

/* 2. La section "Après" se révèle pleinement */
.before-after:hover [itemprop="reviewBody"] p:last-of-type {
  background-color: var(--color-primary); /* Le fond devient primaire */
  background-image: var(--pattern-stripes-lg); /* Ajout du motif du thème */
  color: #fff; /* Le texte devient blanc */
}
.before-after:hover [itemprop="reviewBody"] p:last-of-type strong {
  color: #fff; /* Le texte "Après" en gras devient blanc */
}
.before-after:hover [itemprop="reviewBody"] p:last-of-type::before {
  border-color: #fff; /* La coche devient blanche */
  transform: translateY(-50%) rotate(45deg) scale(1.1); /* La coche pulse et s'agrandit */
}

/*
 * ===================================================================
 *  27. BLOC TABLE OF CONTENTS ("Le Sommaire Magnétique avec Coches")
 * ===================================================================
 */
.table-of-contents {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 45px 30px 30px 30px; /* Padding comme le TL;DR */
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden; /* Important pour le sceau en haut */
}

/* Interaction commune de "lift" (identique à tous vos blocs) */
.table-of-contents:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* Le Sceau (Split top - Exactement comme le TL;DR) */
.table-of-contents::before, 
.table-of-contents::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 18px;
  background-color: var(--color-primary);
  z-index: 1;
  transition: transform var(--speed-normal) var(--ease-elastic), box-shadow 0.3s ease;
}

.table-of-contents::before {
  left: 0; 
  border-bottom-left-radius: 10px;
}
.table-of-contents::after {
  right: 0; 
  border-bottom-right-radius: 10px;
}

/* Animation Sceau au survol */
.table-of-contents:hover::before {
  transform: translateX(-4px);
}
.table-of-contents:hover::after {
  transform: translateX(4px);
}

/* Titre "Sommaire" (H2) */
.table-of-contents h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 25px 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--c-border);
}

/* La liste ordonnée (OL) - Cache les numéros HTML par défaut */
.table-of-contents ol {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Chaque élément de la liste (LI) */
.table-of-contents li {
  position: relative;
  padding-left: 30px; /* Espace pour la coche */
  margin-bottom: 12px;
}
.table-of-contents li:last-child {
  margin-bottom: 0;
}

/* 
 * La COCHE (Checkmark) 100% pure CSS
 * >>> MODIFICATION ICI : Remplace le compteur par une coche <<<
 */
.table-of-contents li::before {
  content: ''; /* Plus de compteur */
  position: absolute;
  left: 0;
  top: 5px; /* Ajustement vertical */
  width: 8px; /* Largeur de la branche horizontale de la coche */
  height: 14px; /* Longueur de la branche verticale de la coche */
  border: solid var(--c-border-lifeline); /* Couleur par défaut (bleu-gris) */
  border-width: 0 3px 3px 0; /* Dessine la forme de la coche */
  transform: rotate(45deg); /* Fait pivoter le "L" pour former la coche */
  opacity: 0.6; /* Plus discret au repos */
  transition: all var(--speed-fast) var(--ease-elastic);
  z-index: 3;
}

/* Le Lien (A) */
.table-of-contents li a {
  text-decoration: none;
  color: inherit; /* Couleur de texte normale */
  font-size: 1rem;
  line-height: 1.6;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px; /* Ligne de soulignement cachée par défaut */
  transition: background-size var(--speed-normal) var(--ease-reveal) 0.1s, color var(--speed-normal) ease;
}

/* ANIMATIONS AU SURVOL DU BLOC ENTIER */
.table-of-contents:hover li::before {
  border-color: var(--color-primary); /* La coche prend la couleur primaire */
  transform: rotate(45deg) scale(1.15); /* La coche pulse */
  opacity: 1; /* Devient complètement visible */
}

.table-of-contents:hover li a {
  color: var(--color-primary); /* Le lien devient primaire */
  background-size: 100% 1px; /* La ligne de soulignement apparaît */
}

/* Délais en cascade pour les coches et les liens */
.table-of-contents:hover li:nth-child(1)::before, .table-of-contents:hover li:nth-child(1) a { transition-delay: 0.1s; }
.table-of-contents:hover li:nth-child(2)::before, .table-of-contents:hover li:nth-child(2) a { transition-delay: 0.2s; }
.table-of-contents:hover li:nth-child(3)::before, .table-of-contents:hover li:nth-child(3) a { transition-delay: 0.3s; }
.table-of-contents:hover li:nth-child(4)::before, .table-of-contents:hover li:nth-child(4) a { transition-delay: 0.4s; }
.table-of-contents:hover li:nth-child(5)::before, .table-of-contents:hover li:nth-child(5) a { transition-delay: 0.5s; }
/*
 * ===================================================================
 *  28. BLOC YMYL DISCLAIMER ("L'Encadré de Responsabilité")
 * ===================================================================
 */
.ymyl-disclaimer {
  position: relative;
  background-color: var(--c-bg-card); /* Fond blanc de base */
  border-radius: 12px;
  margin: 30px 0;
  padding: 45px 30px 30px 30px; /* Padding similaire au TL;DR pour le contenu */
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden; /* Pour les pseudo-éléments et coins arrondis */
}

/* Effet de lévitation commun */
.ymyl-disclaimer:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * La banderole supérieure en couleur primaire
 * (Pleine largeur, comme un sceau protecteur)
 */
.ymyl-disclaimer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* S'étend sur toute la largeur */
  height: 18px; /* Épaisseur de la banderole */
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes); /* Motif du thème pour un effet plus riche */
  border-top-left-radius: 10px; /* Assure les coins arrondis */
  border-top-right-radius: 10px; /* Assure les coins arrondis */
  z-index: 1;
  transition: transform var(--speed-normal) var(--ease-elastic);
}

/* Animation subtile de la banderole au survol */
.ymyl-disclaimer:hover::before {
  transform: translateY(3px); /* La banderole "s'abaisse" légèrement */
}

/* Styles généraux pour les paragraphes */
.ymyl-disclaimer p {
  position: relative;
  z-index: 2; /* S'assure que le contenu est au-dessus de la banderole */
  margin: 0; /* Supprime les marges par défaut pour un contrôle précis */
  color: inherit;
}

.ymyl-disclaimer > p:first-of-type {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary); /* Met "Information" en couleur primaire */
  margin-bottom: 15px; /* Espace après le label */
  padding-bottom: 10px; /* Espace avant la ligne de séparation */
  border-bottom: 1px dashed var(--c-border); /* Ligne de séparation subtile */
}

/* Le texte fort à l'intérieur du premier p hérite de la couleur du parent */
.ymyl-disclaimer > p:first-of-type strong {
  color: inherit; 
}

/* 
 * 2. Style pour le(s) paragraphe(s) de disclaimer
 * Rends le texte légèrement plus subtil et plus petit.
 */
.ymyl-disclaimer > p:not(:first-of-type) {
  font-size: 0.95rem; /* Taille légèrement réduite */
  opacity: 0.8; /* Légèrement estompé pour un ton de "disclaimer" */
}

/* Assure que le dernier paragraphe n'ajoute pas de marge excessive en bas */
.ymyl-disclaimer p:last-of-type {
    margin-bottom: 0;
}

/*
 * ===================================================================
 *  29. BLOC PROS CONS ("L'Analyse Estampillée") - Design Moderne
 * ===================================================================
 */
.pros-cons {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden;
}

/* Effet de lévitation pour le bloc entier */
.pros-cons:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* Conteneur principal pour les colonnes (flexbox) */
.pros-cons > div[itemprop="review"] {
    display: flex;
    flex-grow: 1;
}

/* Styles communs aux colonnes "Pros" et "Cons" */
.pros-column, .cons-column {
  flex: 1; /* Chaque colonne prend la moitié de l'espace */
  padding: 30px;
  position: relative;
  z-index: 1;
}

/* Séparateur vertical entre les colonnes */
.pros-column::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: var(--c-border);
  transition: background-color var(--speed-normal) ease;
}
/* Le séparateur s'illumine au survol du bloc */
.pros-cons:hover .pros-column::after {
  background-color: var(--color-primary);
}

/* Titres des colonnes (H3) */
.pros-column h3, .cons-column h3 {
  margin: 0 0 25px 0;
  text-align: center;
}
.pros-column h3 {
  color: var(--color-primary); /* Titre "Les Plus" en couleur primaire */
}
.cons-column h3 {
  color: inherit; /* Titre "Les Moins" en couleur par défaut */
}

/* Listes (UL) et éléments de liste (LI) */
.pros-column ul, .cons-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pros-column li, .cons-column li {
  position: relative;
  padding-left: 45px; /* Espace pour les icônes */
  margin-bottom: 15px;
  font-size: 1rem;
  line-height: 1.6;
  color: inherit; /* Couleur par défaut */
  transition: color var(--speed-fast) ease, transform var(--speed-fast) var(--ease-elastic);
}
.pros-column li:last-child, .cons-column li:last-child {
  margin-bottom: 0;
}

/* --- ICÔNES "ESTAMPILLÉES" (100% PURE CSS pour la traduction) --- */

/* Base commune : La boîte carrée derrière chaque icône */
.pros-column li::before, .cons-column li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px; /* Ajustement vertical */
  width: 24px;
  height: 24px;
  border-radius: 4px; /* Carré légèrement arrondi */
  z-index: 1;
  transition: all var(--speed-normal) var(--ease-elastic);
}

/* PROS : Icône de COCHE (Checkmark) */
.pros-column li::before {
  background-color: var(--color-primary); /* Fond primaire pour la boîte */
  border: 2px solid var(--color-primary); /* Bordure primaire */
}
.pros-column li::after { /* La coche elle-même */
  content: '';
  position: absolute;
  left: 8px; /* Position de la coche dans la boîte */
  top: 9px;
  width: 6px;
  height: 12px;
  border: solid #fff; /* Coche blanche pour le contraste */
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  z-index: 2;
  transition: all var(--speed-normal) var(--ease-elastic);
}

/* CONS : Icône de MINUS (Tiret) */
.cons-column li::before {
  background-color: var(--c-border-lifeline); /* Fond neutre pour la boîte */
  border: 2px solid var(--c-border-lifeline); /* Bordure neutre */
}
.cons-column li::after { /* Le tiret lui-même */
  content: '';
  position: absolute;
  left: 6px; /* Position du tiret dans la boîte */
  top: 14px; /* Verticalement centré */
  width: 12px;
  height: 2px;
  background-color: #fff; /* Tiret blanc */
  z-index: 2;
  transition: all var(--speed-normal) var(--ease-elastic);
}

/* --- ANIMATIONS AU SURVOL DU BLOC ENTIER --- */

/* Les éléments de liste (texte) glissent et leur couleur change */
.pros-cons:hover .pros-column li {
  color: var(--color-primary); /* Texte "Plus" devient primaire */
}
.pros-cons:hover .cons-column li {
  color: inherit; /* Texte "Moins" reste neutre */
}

/* Animations pour les icônes "Plus" */
.pros-cons:hover .pros-column li::before {
  transform: scale(1.1); /* La boîte pulse */
  box-shadow: var(--shadow-glow); /* Ajoute une lueur */
}
.pros-cons:hover .pros-column li::after {
  transform: rotate(45deg) scale(1.1); /* La coche pulse */
}

/* Animations pour les icônes "Moins" */
.pros-cons:hover .cons-column li::before {
  transform: scale(1.1); /* La boîte pulse */
  box-shadow: 0 0 8px rgba(188, 205, 219, 0.4); /* Lueur subtile pour le neutre */
}
.pros-cons:hover .cons-column li::after {
  transform: scale(1.1); /* Le tiret pulse */
}

/* Délais en cascade pour toutes les animations des éléments de liste */
.pros-cons:hover li:nth-child(1), .pros-cons:hover li:nth-child(1)::before, .pros-cons:hover li:nth-child(1)::after { transition-delay: 0.1s; }
.pros-cons:hover li:nth-child(2), .pros-cons:hover li:nth-child(2)::before, .pros-cons:hover li:nth-child(2)::after { transition-delay: 0.2s; }
.pros-cons:hover li:nth-child(3), .pros-cons:hover li:nth-child(3)::before, .pros-cons:hover li:nth-child(3)::after { transition-delay: 0.3s; }
.pros-cons:hover li:nth-child(4), .pros-cons:hover li:nth-child(4)::before, .pros-cons:hover li:nth-child(4)::after { transition-delay: 0.4s; }
/*
 * ===================================================================
 *  30. BLOC FINAL THOUGHT ("Le Guide Lumineux")
 * ===================================================================
 */
.final-thought {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 30px; /* Padding standard pour le contenu */
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden; /* Important pour les coins arrondis et les animations */
}

/* Effet de lévitation commun (standard pour vos blocs) */
.final-thought:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * La banderole supérieure pleine largeur en couleur primaire
 * (Comme un sceau de conclusion ou d'importance)
 */
.final-thought::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* S'étend sur toute la largeur */
  height: 8px; /* Épaisseur de la banderole */
  background-color: var(--color-primary);
  background-image: var(--pattern-stripes-lg); /* Motif du thème pour un effet plus riche */
  z-index: 1;
  /* Les bordures arrondies du bloc s'appliquent à la banderole */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: transform var(--speed-normal) var(--ease-elastic);
}

/* Animation subtile de la banderole au survol */
.final-thought:hover::before {
  transform: translateY(3px); /* La banderole "s'abaisse" légèrement */
}

/* Styles pour tous les paragraphes du bloc */
.final-thought p {
  position: relative;
  z-index: 2; /* S'assure que le texte est au-dessus de la banderole */
  margin: 0 0 15px 0; /* Marge par défaut entre les paragraphes */
  color: inherit;
}
.final-thought p:last-child {
  margin-bottom: 0; /* Pas de marge en bas pour le dernier paragraphe */
  opacity: 0.9;
}

/* 
 * Style pour le texte en gras du premier paragraphe ("La prochaine étape pour vous :")
 * C'est le titre principal de l'appel à l'action.
 */
.final-thought p:first-of-type strong {
  display: inline-block; /* Permet le positionnement de la flèche */
  color: var(--color-primary);
  font-weight: 600;
  padding-left: 25px; /* Espace pour la flèche */
  position: relative;
  transition: color var(--speed-fast) ease;
}

/* 
 * La flèche "→" (Next Step) comme pseudo-élément
 * (Universelle, pas de souci de traduction)
 */
.final-thought p:first-of-type strong::before {
  content: '→'; /* Flèche universelle */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-5px); /* Légèrement décalée à gauche et cachée initialement */
  font-size: 1.2rem;
    line-height: 1;
  color: var(--color-primary);
  opacity: 0.8; /* Légèrement estompée au repos */
  transition: all var(--speed-normal) var(--ease-elastic);
}

/* Animation au survol : la flèche glisse et s'illumine */
.final-thought:hover p:first-of-type strong::before {
  transform: translateY(-50%) translateX(0); /* Glisse vers sa position finale */
  opacity: 1; /* Devient complètement visible */
}

/*
 * ===================================================================
 *  31. BLOC FAQ (Nouveau design avec <details>/<summary>) - STYLE TL;DR APPLIQUÉ
 * ===================================================================
 */

/* 
 * Le conteneur principal .faq-block
 * Reprend le padding du TL;DR et override les anciens styles de pseudo-éléments.
 */
.faq-block {
  /* Padding pour s'adapter à la hauteur de 18px du sceau */
  padding: 45px 30px 30px 30px; 
  /* Les autres propriétés (box-shadow, transform, border, background-color, border-radius)
     sont déjà appliquées via la classe de base .faq-block, donc pas besoin de les redéfinir ici. */
}

/* 
 * Le Sceau (Split top) - Exactement comme le TL;DR (Override des anciens styles)
 */
.faq-block::before, 
.faq-block::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 18px; /* Hauteur identique au TL;DR */
  background-color: var(--color-primary);
  z-index: 1; /* Z-index identique au TL;DR */
  transition: transform var(--speed-normal) var(--ease-elastic), box-shadow 0.3s ease;
}

.faq-block::before {
  left: 0; 
  border-bottom-left-radius: 10px; /* Arrondi identique au TL;DR */
}
.faq-block::after {
  right: 0; 
  border-bottom-right-radius: 10px; /* Arrondi identique au TL;DR */
}

/* Animation Sceau (Identique au TL;DR) */
.faq-block:hover::before {
  transform: translateX(-4px);
}
.faq-block:hover::after {
  transform: translateX(4px);
}


.faq-block h2 {
  position: relative;
  z-index: 2; 
    margin-bottom: 20px;
}

/* Styles pour chaque question/réponse individuelle (le <details>.faq-item) */
.faq-item {
  background-color: var(--c-bg-card); /* Fond blanc pour chaque item */
  border-radius: 8px; /* Coins légèrement arrondis */
  margin-bottom: 15px; /* Espace entre les items */
  border: 1px solid var(--c-border); /* Bordure discrète */
  overflow: hidden; /* Important pour l'icône et les coins */
  box-shadow: 0 3px 10px rgba(26, 59, 88, 0.05); /* Ombre légère pour effet de carte */
  transition: box-shadow var(--speed-normal) ease;
  position: relative; /* Pour que les enfants puissent être positionnés par rapport à lui */
  z-index: 2; /* Assure que les items sont au-dessus du sceau */
}
.faq-item:last-of-type {
  margin-bottom: 0; /* Pas de marge après le dernier item */
}

/* Effet de lueur sur l'item au survol */
.faq-item:hover {
  box-shadow: 0 5px 15px rgba(26, 59, 88, 0.1);
}

/* Styles de la question (le <summary>) */
.faq-item summary {
  list-style: none; /* Cache la flèche par défaut du navigateur */
  cursor: pointer;
  padding: 20px 25px 20px 50px; /* Espace pour l'icône +/- */
  font-size: 1rem;
  font-weight: 600;
  color: inherit; /* Couleur du texte par défaut */
  position: relative;
  transition: color var(--speed-fast) ease;
  user-select: none; /* Empêche la sélection du texte au clic */
}
/* Pour les navigateurs Webkit (Chrome, Safari) */
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* La question devient primaire au survol */
.faq-item summary:hover {
  color: var(--color-primary);
}


.faq-item summary::before,
.faq-item summary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 25px; /* Position de l'icône */
  transform: translateY(-50%);
  background-color: var(--c-border-lifeline); /* Couleur neutre par défaut */
  border-radius: 1px;
  transition: all var(--speed-fast) var(--ease-elastic);
}

/* Barre horizontale du "+" (largeur fixe) */
.faq-item summary::before {
  width: 18px;
  height: 2px;
}
/* Barre verticale du "+" (tourne pour faire un "-") */
.faq-item summary::after {
  width: 2px;
  height: 18px;
}


.faq-item[open] summary::before {
  background-color: var(--color-primary); /* La barre horizontale devient primaire */
}
.faq-item[open] summary::after {
  background-color: var(--color-primary); /* La barre verticale devient primaire */
  transform: translateY(-50%) rotate(90deg); /* La barre verticale tourne à l'horizontal (forme un "-" ) */
}


.faq-item summary:hover::before,
.faq-item summary:hover::after {
  background-color: var(--color-primary); /* Les barres deviennent primaires au survol */
}


/* Styles de la réponse (le <div> avec itemprop="acceptedAnswer") */
.faq-item div[itemprop="acceptedAnswer"] {
  max-height: 0; /* Initialement cachée (mais animable) */
  overflow: hidden;
  padding: 0 25px 0 50px; /* Padding initial sans le padding-bottom */
  transition: max-height 0.5s var(--ease-reveal), padding 0.5s var(--ease-reveal);
  border-top: 1px solid var(--c-border); /* Ligne de séparation subtile */
  margin-top: -1px; /* Compense la bordure pour ne pas doubler l'espace */
}

/* Styles de la réponse quand la <details> est ouverte */
.faq-item[open] div[itemprop="acceptedAnswer"] {
  max-height: 500px; /* Une valeur suffisamment grande pour contenir la réponse */
  padding: 15px 25px 20px 50px; /* Padding final pour la réponse ouverte */
}

/* Styles du paragraphe de la réponse */
.faq-item div[itemprop="text"] p {
  margin: 0; /* Supprime les marges par défaut des paragraphes */
  color: inherit;
  opacity: 0.9;
}

/*
 * ===================================================================
 *  32. BLOC YMYL LIMITES ("Les Indicateurs Clés") - Design Moderne (Effet Inversé pour "Limites")
 * ===================================================================
 */
.ymyl-bloc-limites {
  position: relative;
  background-color: var(--c-bg-card);
  border-radius: 12px;
  margin: 30px 0;
  padding: 30px; /* Padding de base */
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-base);
  transition: transform var(--speed-normal) var(--ease-elastic),
              box-shadow var(--speed-normal) ease;
  overflow: hidden;
  text-align: justify;
}

.ymyl-bloc-limites:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* 
 * TITRE "Limites de ce guide et prochaines étapes" (premier strong)
 * >>> MODIFICATION CLÉ ICI : En couleur primaire au repos, neutre au survol <<<
 */
.ymyl-bloc-limites > strong:first-of-type {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary); /* COULEUR PRIMAIRE AU REPOS */
  margin-bottom: 20px;
  padding-left: 35px;
  position: relative;
  transition: color var(--speed-fast) ease;
}

/* Icône "Info" pour les limites (Pure CSS - cercle avec un 'i') */
.ymyl-bloc-limites > strong:first-of-type::before {
    content: 'i';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(1.1); /* LÉGÈRE PULSATION AU REPOS */
    width: 26px;
    height: 26px;
    background-color: var(--color-primary); /* COULEUR PRIMAIRE AU REPOS */
    color: #fff;
    font-family: Georgia, serif;
    font-size: 1.2rem;
    font-weight: bold;
    font-style: italic;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: var(--shadow-glow); /* LUEUR AU REPOS */
    transition: all var(--speed-fast) var(--ease-elastic);
}

/* Animation INVERSÉE de l'icône au survol */
.ymyl-bloc-limites:hover > strong:first-of-type {
    color: var(--c-border-lifeline); /* Le texte du titre devient NEUTRE au survol */
}
.ymyl-bloc-limites:hover > strong:first-of-type::before {
    background-color: var(--c-border-lifeline); /* L'icône devient NEUTRE au survol */
    transform: translateY(-50%) scale(1); /* Revert à taille normale */
    box-shadow: none; /* Supprime la lueur */
}

/* 
 * Liste des limites (UL) - Inchangée
 */
.ymyl-bloc-limites ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  border-bottom: 1px dashed var(--c-border);
  padding-bottom: 20px;
}
.ymyl-bloc-limites ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  color: inherit;
}
.ymyl-bloc-limites ul li:last-child {
  margin-bottom: 0;
}
.ymyl-bloc-limites ul li::before {
  content: '»';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-border-lifeline);
  font-weight: 700;
  font-size: 1.2rem;
  transition: all var(--speed-fast) var(--ease-elastic);
}
.ymyl-bloc-limites:hover ul li::before {
    color: var(--color-primary);
    transform: translateX(5px);
}

/* 
 * TITRE "Risques à connaître :" (le deuxième strong) - Inchangé
 */
.ymyl-bloc-limites > strong:nth-of-type(2) {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 30px;
    margin-bottom: 15px;
    padding-left: 35px;
    position: relative;
    transition: color var(--speed-fast) ease;
}
.ymyl-bloc-limites > strong:nth-of-type(2)::before {
    content: '!';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: var(--color-primary);
    color: #fff;
    font-family: Oswald, sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all var(--speed-fast) var(--ease-elastic);
}
.ymyl-bloc-limites:hover > strong:nth-of-type(2)::before {
    transform: translateY(-50%) rotate(15deg) scale(1.1);
    box-shadow: var(--shadow-glow);
}

/* 
 * Le texte des risques (le texte brut après strong:nth-of-type(2)) - Inchangé
 */
.ymyl-bloc-limites em::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 0;
  background-color: rgba(224, 36, 84, 0.05);
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  z-index: 0;
  transition: height var(--speed-normal) var(--ease-reveal);
}
.ymyl-bloc-limites:hover em::before {
    height: calc(100% + 50px);
}

/* 
 * Disclaimer final (em) - Inchangé
 */
.ymyl-bloc-limites em {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: inherit;
  opacity: 0.7;
  text-align: center;
  border-top: 1px dashed var(--c-border);
  padding-top: 15px;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}
br {  display: none !important; }
.table-of-contents ol ol{padding-top:10px;}
p:empty {  display: none !important; }

/*
 * ===================================================================
 *  33. BLOCS DATE (Publié / Modifié)
 * ===================================================================
 */
.dt-published,
.dt-modified {
  position: relative;
  display: inline-flex; /* Permet aux blocs de s'aligner côte à côte si l'espace le permet */
  align-items: center; /* Centre verticalement le texte et l'icône */
  background-color: var(--c-bg-subtle); /* Fond gris subtil */
  border-radius: 8px; /* Coins légèrement arrondis pour une touche de douceur */
  padding: 10px 15px 10px 40px; /* Espace pour le texte et l'icône à gauche */
  margin: 5px 10px 5px 0; /* Petite marge pour séparer les blocs */
  border: 1px solid var(--c-border); /* Bordure discrète */
  box-shadow: none; /* Pas d'ombre par défaut, pour rester léger */
  font-size: 0.9rem; /* Taille de police légèrement plus petite pour les métadonnées */
  color: inherit; /* Utilise la couleur de texte par défaut du parent */
  line-height: 1.4;
  transition: all var(--speed-fast) ease; /* Transition rapide pour les effets au survol */
}

/*
 * Icônes pour "Publié" et "Modifié" (100% pure CSS)
 * (Un petit cercle pour distinguer les deux types de date)
 */
.dt-published::before,
.dt-modified::before {
  content: '';
  position: absolute;
  left: 15px; /* Position de l'icône à gauche */
  top: 50%;
  transform: translateY(-50%);
  width: 14px; /* Taille du cercle */
  height: 14px;
  border-radius: 50%; /* Forme de cercle parfait */
  transition: all var(--speed-fast) var(--ease-elastic); /* Animation subtile */
}

/* Icône spécifique pour "Publié" : un cercle plein de couleur primaire */
.dt-published::before {
  background-color: var(--color-primary); /* Fond primaire */
  box-shadow: 0 0 5px rgba(224, 36, 84, 0.4); /* Petite lueur discrète */
}

/* Icône spécifique pour "Modifié" : un cercle en contour, couleur neutre */
.dt-modified::before {
  border: 2px solid var(--c-border-lifeline); /* Bordure en bleu-gris neutre */
  background-color: transparent; /* Fond transparent */
}

/* -------------------- EFFETS AU SURVOL DU BLOC ENTIER -------------------- */

/* Le bloc entier se soulève légèrement et gagne une ombre subtile */
.dt-published:hover,
.dt-modified:hover {
  background-color: var(--c-bg-card); /* Fond plus clair au survol */
  transform: translateY(-2px); /* Léger effet de lévitation */
  box-shadow: var(--shadow-base); /* Ombre légère pour une touche d'importance */
}

/* Animation de l'icône "Publié" au survol : elle pulse */
.dt-published:hover::before {
  transform: translateY(-50%) scale(1.1); /* L'icône grossit légèrement */
  box-shadow: var(--shadow-glow); /* Lueur plus prononcée */
}

/* Animation de l'icône "Modifié" au survol : elle se remplit et pulse */
.dt-modified:hover::before {
  border-color: var(--color-primary); /* La bordure devient primaire */
  background-color: var(--color-primary); /* Le cercle se remplit de primaire */
  transform: translateY(-50%) scale(1.1); /* L'icône grossit légèrement */
  box-shadow: var(--shadow-glow); /* Lueur plus prononcée */
}
@media (max-width: 960px) { 
  .success-box,
  .warning {
    margin-left: 15px;  
    margin-right: 15px;
  }
}