/* =====================================================================
   Lexique SEO — damien-hernandez.com
   Design system porté depuis la maquette (pj2).
   Tout est scopé sous .lex pour ne pas entrer en conflit avec le thème.
   ===================================================================== */

.lex {
  /* ---- tokens ---- */
  --bg:#FBFAF7; --surface:#FFFFFF; --ink:#101A1C; --body:#21302D;
  --muted:#46534F; --faint:#576260; --faintest:#65716C;
  /* Contraste WCAG AA (4.5:1 minimum) sur --bg #FBFAF7, mesure le 08/08/2026 :
     --faintest passait a 2,94:1 et --faint a 4,41:1, tous deux en echec sur des
     textes de 11 a 13,5 px (kickers, fil d Ariane, pager, byline). Corriger le seul
     --faintest l aurait rendu plus sombre que --faint : les deux ont donc bouge
     ensemble pour garder la hierarchie. Nouveaux ratios : 4,87 / 6,06 / 7,71. */
  --line:#E6E2D9; --line-soft:#D9D4C9; --stripe:#FDFCFA;
  --primary:#0B6E5F; --primary-dark:#084C42; --accent:#14A88C;
  --teal-light:#7FC9B8; --teal-tint:#F1F7F5; --teal-border:#C9DED8;
  --terra:#B4532A; --terra-tint:#FCF6F2; --terra-ink:#3D2B22;
  --on-dark:#F4F2EC; --on-dark-muted:#A9B6B2; --def-border:#3A4A47;
  --serif:"Newsreader",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* ---- réglages à ajuster selon la hauteur de ton header sticky ---- */
  --lex-header-top:96px;   /* position sticky du sommaire */
  --lex-anchor:110px;      /* offset des ancres au scroll */

  /* ---- full-bleed : sort le bloc de la largeur de contenu du thème ---- */
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow-x:clip; /* absorbe le débordement dû à la barre de défilement
                      (contrairement à overflow:hidden, ne casse pas le sticky) */

  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
html { scroll-behavior:smooth; }
.lex *, .lex *::before, .lex *::after { box-sizing:border-box; }

/* =====================================================================
   Espacement du thème au-dessus du bloc (classe body « dh-lexique »)
   ---------------------------------------------------------------------
   GeneratePress ajoute des marges/paddings entre le header et le contenu.
   On les annule uniquement sur les fiches du lexique.
   Ajuste --lex-gap-top si tu veux garder un peu d'air.
   ===================================================================== */
.dh-lexique { --lex-gap-top:0px; }
.dh-lexique .site-content,
.dh-lexique .content-area,
.dh-lexique .site-main,
.dh-lexique .inside-article,
.dh-lexique .entry-content,
.dh-lexique article.post,
.dh-lexique article.page { margin-top:var(--lex-gap-top) !important; padding-top:var(--lex-gap-top) !important; }
.dh-lexique .entry-header,
.dh-lexique .page-header { display:none !important; }

/* =====================================================================
   Neutralisation des surcharges du thème
   ---------------------------------------------------------------------
   Le thème style les BALISES du contenu (.entry-content nav/code/h3/p…)
   avec une spécificité supérieure à mes CLASSES. Cette couche verrouille
   les primitives de mise en page pour que le rendu ne dépende plus du thème.
   ===================================================================== */
.lex .lex-inner  { display:flex !important; }
/* Un <p> vide insere par wpautop entre les deux colonnes deviendrait un 3e
   element flex et consommerait un `gap` de 56px : .lex-main perdait 32px a
   droite (1068 au lieu de 1100), et l'article n'avait plus la meme largeur
   d'une fiche a l'autre. Meme parade que sur .lex-pager plus bas. */
.lex .lex-inner > *:not(.lex-toc):not(.lex-main) { display:none !important; }
.lex .lex-pager  { display:grid !important; grid-template-columns:1fr 1fr !important; }
/* WordPress peut insérer un <p> vide ou un <br> entre les deux liens : il
   deviendrait une case de la grille et repousserait la 2e carte à la ligne
   suivante. On place donc les deux cartes explicitement et on masque le reste. */
.lex .lex-pager > a { grid-row:1 !important; }
.lex .lex-pager > a:not(.next) { grid-column:1 !important; }
.lex .lex-pager > a.next { grid-column:2 !important; }
.lex .lex-pager > *:not(a) { display:none !important; }
.lex .lex-pager a br { display:none !important; }
.lex .lex-stats  { display:grid !important; }
.lex .lex-trust li { display:grid !important; }
.lex .lex-steps, .lex .lex-myths, .lex .lex-toc-nav,
.lex .lex-trust ul, .lex .lex-keys-list, .lex .lex-list,
.lex .lex-sources { display:flex !important; flex-direction:column !important; }
.lex .lex-tags, .lex .lex-chips, .lex .lex-crumbs,
.lex .lex-badges, .lex .lex-byline, .lex .lex-step,
.lex .lex-myth, .lex .lex-cta, .lex .lex-author { display:flex !important; }
.lex .lex-pager a { display:flex !important; }

/* le thème colore/encadre <code> : on le remet à plat dans le bloc sombre */
.lex .lex-code code {
  background:none !important; background-color:transparent !important;
  color:#E6EDEA !important; padding:0 !important; margin:0 !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
}

/* marges de titres/paragraphes imposées par le thème dans les cartes */
.lex .lex-step h3, .lex .lex-myth h3, .lex .lex-case-head h3,
.lex .lex-key h3, .lex .lex-pager .t, .lex .lex-pager .k {
  margin:0 !important; padding:0 !important;
}
.lex .lex-step > div > *:first-child,
.lex .lex-myth > div > *:first-child { margin-top:0 !important; }
.lex ::selection { background:#CDECE3; }

/* ---- barre de progression ---- */
.lex-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:60; background:transparent; pointer-events:none; }
.lex-progress > i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width .05s linear; }

/* ---- ossature 2 colonnes ---- */
.lex-inner {
  width:100%;
  max-width:1520px;
  margin:0 auto;
  padding:26px 40px 96px;
  display:flex;
  gap:56px;
  align-items:flex-start;
}

.lex-toc {
  flex:0 0 260px;
  position:sticky;
  top:var(--lex-header-top);
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  gap:28px;
  padding-bottom:40px;
}

.lex-main {
  flex:1 1 auto;
  min-width:0;
  max-width:1100px;
  padding-bottom:0;
  display:block;
}

/* ---- sommaire ---- */
.lex-kicker { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faintest); }
.lex-toc-label { margin-bottom:14px; }
.lex-toc-nav { display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line); }
.lex-toc-nav a { font-size:13.5px; line-height:1.45; color:var(--muted); padding:7px 0 7px 14px; margin-left:-1px; border-left:2px solid transparent; text-decoration:none; transition:color .15s ease, border-color .15s ease; }
.lex-toc-nav a:hover { color:var(--primary); text-decoration:none; }
.lex-toc-nav a.is-active { color:var(--primary); font-weight:600; border-left-color:var(--primary); }

/* ---- carte fiabilité ---- */
.lex-toc, .lex-toc > div { min-width:0; }
.lex-trust { border:1px solid var(--line); background:var(--surface); padding:18px; min-width:0; }
.lex-trust ul { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--muted); line-height:1.5; min-width:0; }
/* Grille : la 2e colonne bornée par minmax(0,1fr) ne peut pas dépasser la carte.
   (En flex, le `flex:0 0 auto` posé plus bas sur les span empêchait le texte
   de rétrécir — d'où le débordement.) */
.lex-trust li { display:grid; grid-template-columns:14px minmax(0,1fr); gap:9px; align-items:start; min-width:0; }
.lex-trust li > * { min-width:0; overflow-wrap:break-word; }
/* la puce seule est colorée, pas le texte */
.lex-trust li > span:first-child { color:var(--primary); }
.lex-sources li > *, .lex-key > *, .lex-step > *, .lex-myth > * { min-width:0; overflow-wrap:break-word; }
.lex-trust a { border-bottom:1px solid var(--teal-border); }

/* ---- fil d'ariane ---- */
.lex-crumbs { font-size:12.5px; color:var(--faintest); display:flex; flex-wrap:wrap; gap:6px; align-items:center; line-height:1.5; }

/* ---- fil d'Ariane Rank Math remis au format du lexique ----
   Rank Math sort <nav class="rank-math-breadcrumb"><p>…</p></nav> avec ses
   propres tailles et un séparateur ». On remet tout à plat. */
.lex .lex-crumbs .rank-math-breadcrumb { display:contents; }
.lex .lex-crumbs p {
  display:flex !important; flex-wrap:wrap; align-items:center; gap:6px;
  margin:0 !important; padding:0 !important;
  font-size:12.5px !important; line-height:1.5 !important;
  color:var(--faintest) !important; font-family:var(--sans) !important;
}
.lex .lex-crumbs a {
  color:var(--faintest) !important; font-size:12.5px !important;
  font-weight:400 !important; text-decoration:none !important;
}
.lex .lex-crumbs a:hover { color:var(--primary) !important; text-decoration:underline !important; }

/* séparateur : » remplacé par / */
.lex .lex-crumbs .separator { font-size:0 !important; color:transparent !important; }
.lex .lex-crumbs .separator::after {
  content:"/"; font-size:12.5px; color:var(--line-soft); font-family:var(--sans);
}
.lex .lex-crumbs .sep { color:var(--line-soft); }

/* page courante : un peu plus sombre, tronquée si le titre SEO est long */
.lex .lex-crumbs .last, .lex .lex-crumbs .current {
  color:var(--muted) !important; font-weight:400 !important;
  max-width:min(46ch, 100%); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---- badges ---- */
.lex-badges { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:26px; }
.lex-badge { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; }
.lex-badge.solid { background:var(--primary); color:#fff; }
.lex-badge.ghost { border:1px solid var(--line-soft); color:var(--muted); padding:4px 10px; }

/* ---- titre / sous-titre / signature ---- */
.lex-title { font-family:var(--serif); font-weight:500; font-size:54px; line-height:1.08; letter-spacing:-.015em; margin:22px 0 0; color:var(--ink); text-wrap:balance; }
/* Double prefixe volontaire. `.lex-main p { margin:18px 0 0 }` plus bas donne le
   rythme a TOUS les paragraphes de l'article ; il vaut (0,1,1) et battait
   `.lex-subtitle` (0,1,0). Le chapo recevait donc 18px au lieu des 14 prevus.
   Mesure au navigateur le 12/08. */
.lex .lex-subtitle { font-family:var(--serif); font-size:25px; line-height:1.4; color:var(--muted); margin-top:14px; max-width:34em; text-wrap:pretty; }
.lex-byline { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:26px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13px; color:var(--faint); }
.lex-byline strong { color:var(--ink); font-weight:500; }

/* ---- bloc définition (sombre) ---- */
.lex-def { background:var(--ink); color:var(--on-dark); padding:34px 36px; margin-top:40px; }
.lex-def-top { display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.lex-def-top .lex-kicker { color:var(--teal-light); }
.lex-copy { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; background:transparent; color:var(--on-dark); border:1px solid var(--def-border); padding:7px 12px; cursor:pointer; transition:border-color .15s, color .15s; }
.lex-copy:hover { border-color:var(--teal-light); color:var(--teal-light); }
/* La couleur doit être DÉCLARÉE ici : une valeur héritée de .lex-def perdrait
   face à .lex-main p, qui cible directement le paragraphe. */
.lex .lex-def .lead { font-family:var(--serif); font-size:clamp(20px, 1.05rem + 0.7vw, 24px);
  line-height:1.5; margin-top:18px !important; color:var(--on-dark) !important;
  text-wrap:pretty; max-width:none; }
.lex-def .lead strong { font-weight:600; color:#fff; }
.lex .lex-def .sub { font-size:14px; line-height:1.6; color:var(--on-dark-muted) !important; margin-top:18px !important; max-width:none; }

/* ---- chiffres clés ---- */
.lex-stats { margin-top:28px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.lex-stats > div { background:var(--surface); padding:22px; }
.lex-stat-n { font-family:var(--serif); font-size:34px; line-height:1; color:var(--primary); }
.lex-stat-n.warn { color:var(--terra); }
.lex-stats p { font-size:13px; line-height:1.5; color:var(--muted); margin:10px 0 0; }

/* ---- à retenir ---- */
.lex-keys { margin-top:40px; border:1px solid var(--teal-border); background:var(--teal-tint); padding:28px 30px; }
.lex-keys .lex-kicker { color:var(--primary); }
.lex-keys-list { display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.lex-key { display:flex; gap:14px; font-size:15.5px; line-height:1.6; color:#21302D; }
.lex-key .n { font-family:var(--mono); color:var(--primary); flex:0 0 auto; }
.lex-key strong { font-weight:600; }
.lex-key a { border-bottom:1px solid var(--teal-border); }

/* ---- titres de section + prose ---- */
.lex-main h2 { font-family:var(--serif); font-weight:500; font-size:36px; line-height:1.2; letter-spacing:-.01em; margin:58px 0 0; scroll-margin-top:var(--lex-anchor); }
.lex .lex-main h3 { font-size:17px; font-weight:600; color:var(--ink); margin:0 !important; }
/* Les thèmes imposent souvent une grosse margin-top aux h3 de .entry-content,
   avec une spécificité qui battait la règle ci-dessus : d'où le vide au-dessus
   des titres dans les cartes (étapes, mythes, cas, FAQ). */
.lex .lex-step h3, .lex .lex-myth h3, .lex .lex-case-head h3, .lex .lex-key h3 { margin:0 !important; }
.lex-main p { font-size:17px; line-height:1.72; color:var(--body); margin:18px 0 0; max-width:none; text-wrap:pretty; }
.lex-lead { font-size:17.5px !important; }
.lex-note { font-size:16px !important; color:var(--muted) !important; }
.lex-main a { color:var(--primary); }
.lex-main a:hover { color:var(--primary-dark); }

/* ---- listes ---- */
.lex-list { margin:18px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:14px; max-width:none; }
.lex-list li { font-size:16px; line-height:1.65; color:var(--body); padding-left:22px; position:relative; }
.lex-list li::before { content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; background:var(--primary); border-radius:1px; }
.lex-list strong { color:var(--ink); font-weight:600; }

/* ---- encart d'alerte (terracotta) ---- */
.lex-callout { margin-top:22px; border-left:3px solid var(--terra); background:var(--terra-tint); padding:20px 24px; max-width:none; }
.lex-callout p { margin:0; font-size:15.5px; line-height:1.65; color:var(--terra-ink); max-width:none; }
.lex-callout p + p { margin-top:12px; }
.lex-callout strong { font-weight:600; }
.lex-callout .lex-kicker { color:var(--terra); display:block; margin-bottom:10px; }

/* ---- tableaux ---- */
.lex-table-wrap { margin-top:24px; border:1px solid var(--line); overflow-x:auto; }
.lex-table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
.lex-table thead tr { background:var(--ink); color:var(--on-dark); }
.lex-table th { text-align:left; padding:14px 18px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; }
.lex-table td { padding:14px 18px; border-top:1px solid var(--line); color:var(--muted); vertical-align:top; }
.lex-table tbody tr { background:var(--surface); }
.lex-table tbody tr:nth-child(even) { background:var(--stripe); }
.lex-table td:first-child { color:var(--ink); font-weight:500; }
.lex-table td.lever { color:var(--primary); }

/* ---- bouton simple ---- */
.lex-btn-wrap { text-align:center; margin:36px 0; }
.lex .lex-btn { display:inline-block; background:var(--primary); color:#fff; border-radius:4px; padding:15px 30px; font-weight:600; text-decoration:none; }
.lex .lex-btn:hover { background:var(--primary-dark); color:#fff; text-decoration:none; }

/* ---- bannière CTA (sombre) ---- */
.lex-cta { margin-top:44px; background:var(--ink); padding:32px 34px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.lex-cta > div { flex:1 1 300px; }
/* Spécificité + !important : certains thèmes stylent .entry-content h3/p avec
   une spécificité supérieure, ce qui rendait ce texte noir sur fond noir. */
.lex .lex-cta .lex-kicker { color:var(--teal-light) !important; }
.lex .lex-cta h3 { font-family:var(--serif); font-weight:500; font-size:24px; line-height:1.35; color:var(--on-dark) !important; margin:12px 0 0; }
.lex .lex-cta p { font-size:14px; line-height:1.6; color:var(--on-dark-muted) !important; margin:10px 0 0; max-width:none; }
.lex .lex-cta-btn { flex:0 0 auto; background:var(--accent); color:#06231D; font-weight:600; font-size:15px; padding:16px 26px; border-radius:2px; text-decoration:none; }
.lex .lex-cta-btn:hover { background:var(--teal-light); color:#06231D; text-decoration:none; }

/* ---- étapes numérotées ---- */
.lex-steps { margin-top:26px; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.lex-step { background:var(--surface); padding:14px 20px; display:flex; gap:14px; align-items:flex-start; }
.lex-step .n { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--primary); flex:0 0 24px; padding-top:2px; line-height:1.45; }
.lex-step p { font-size:15px; line-height:1.55; color:var(--muted); margin:4px 0 0 !important; max-width:none; }

/* ---- figure explicative (schéma, infographie) ---- */
.lex-figure { margin:28px 0 0; }
.lex-figure img { display:block; width:100%; height:auto; border:1px solid var(--line); background:var(--surface); }
.lex .lex-figure figcaption {
  font-size:13.5px; line-height:1.55; color:var(--faint);
  margin:10px 0 0 !important; padding-left:14px; border-left:2px solid var(--teal-border);
  max-width:none;
}
@media (max-width:700px){ .lex-figure { margin-top:22px; } }

/* ---- bloc de code ---- */
.lex-code { margin-top:20px; background:var(--ink); color:#E6EDEA;
  /* indentation pendante portée par le conteneur (le <code> est remis
     à plat par la couche de neutralisation plus haut) */
  padding:18px 20px 18px calc(20px + 1.7em); text-indent:-1.7em; }
.lex-code code { font-family:var(--mono); font-size:13.5px; line-height:1.75; color:#E6EDEA !important;
  white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word; display:block; }

/* ---- étude de cas ---- */
.lex-case { margin-top:20px; border:1px solid var(--line); background:var(--surface); }
.lex-case-head { padding:26px 28px; }
.lex-case-head .lex-kicker { color:var(--terra); }
.lex .lex-case-head p { font-size:16px; line-height:1.7; color:var(--body); margin:12px 0 0 !important; max-width:none; }
.lex-case-head strong { font-weight:600; }

/* ---- tags (GEO / bots) ---- */
.lex-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.lex .lex-tag { display:inline-block; font-family:var(--mono); font-size:12.5px; border:1px solid var(--teal-border); background:var(--teal-tint); color:var(--primary); padding:9px 14px; text-decoration:none; }
.lex a.lex-tag:hover { background:var(--primary); color:#fff; text-decoration:none; }

/* ---- mythes ---- */
.lex-myths { margin-top:22px; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.lex-myth { background:var(--surface); padding:17px 22px; display:flex; gap:14px; align-items:flex-start; }
.lex-myth .tag { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--terra); border:1px solid var(--terra); padding:3px 8px; flex:0 0 auto; margin-top:2px; }
.lex .lex-myth p { margin:0 !important; font-size:15.5px; line-height:1.65; color:var(--body); max-width:none; }
.lex-myth strong { color:var(--ink); font-weight:600; }

/* ---- FAQ ---- */
.lex-faq { margin-top:22px; border-top:1px solid var(--line); }
.lex-faq details { border-bottom:1px solid var(--line); }
.lex-faq summary { cursor:pointer; padding:20px 0; display:flex; justify-content:space-between; gap:20px; font-size:17px; font-weight:500; color:var(--ink); list-style:none; }
.lex-faq summary::-webkit-details-marker { display:none; }
.lex-faq summary .sign { color:var(--primary); flex:0 0 auto; }
.lex .lex-faq details > p { font-size:15.5px; line-height:1.7; color:var(--muted); padding-bottom:22px; margin:0 !important; max-width:none; }

/* ---- bloc « expliquer par une IA » ---- */
.lex-ai { margin-top:44px; border:1px solid var(--teal-border); background:var(--teal-tint); padding:26px 28px; }
.lex .lex-ai .lex-ai-title { font-family:var(--serif); font-weight:500; font-size:23px; line-height:1.3; color:var(--ink); margin:10px 0 0 !important; }
.lex .lex-ai .lex-ai-sub { font-size:14.5px; line-height:1.6; color:var(--muted); margin:8px 0 0 !important; max-width:none; }
.lex-ai-btns { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.lex .lex-ai-btn {
  display:inline-block; font-size:13.5px; font-weight:500;
  background:var(--surface); border:1px solid var(--teal-border);
  color:var(--primary) !important; padding:9px 15px; border-radius:3px;
  text-decoration:none !important;
}
.lex .lex-ai-btn:hover { background:var(--primary); border-color:var(--primary); color:#fff !important; }
@media (max-width:700px){ .lex-ai { padding:20px 18px; } .lex .lex-ai-btn { flex:1 1 auto; text-align:center; } }

/* ---- sources ---- */
.lex-sources { margin:20px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:12px; font-size:14.5px; line-height:1.6; color:var(--muted); }
.lex-sources li { display:flex; gap:12px; }
.lex-sources .n { font-family:var(--mono); color:var(--faintest); flex:0 0 auto; }
.lex-sources a { border-bottom:1px solid var(--teal-border); }

/* ---- termes liés (chips) ---- */
.lex-related { margin-top:56px; border-top:1px solid var(--line); padding-top:32px; }
.lex-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.lex-chips a { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:7px 16px; text-decoration:none; color:var(--primary); font-size:14px; }
.lex-chips a:hover { border-color:var(--primary); text-decoration:none; }

/* ---- pagination terme précédent / suivant ---- */
.lex-pager { margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.lex-pager a { border:1px solid var(--line); background:var(--surface); padding:18px 20px; display:flex; flex-direction:column; justify-content:flex-start; gap:8px; text-decoration:none; height:100%; }
.lex-pager a:hover { border-color:var(--primary); text-decoration:none; }
.lex-pager .k { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faintest); }
.lex-pager .t { font-size:16px; font-weight:500; color:var(--ink); margin:0; }


/* ---- bloc auteur ---- */
.lex-author {
  margin-top:32px;
  border:1px solid var(--line);
  background:var(--surface);
  padding:26px 28px;

  display:flex !important;
  flex-wrap:nowrap;
  gap:22px;
  align-items:flex-start;
}

.lex-author img {
  flex:0 0 76px;
  width:76px;
  height:76px;
  object-fit:cover;
  display:block;
  margin:0 !important;
}

.lex-author .body {
  flex:1 1 auto;
  min-width:0;
}
.lex-author > p:has(img) {
  flex:0 0 76px;
  width:76px;
  margin:0 !important;
  padding:0 !important;
}

.lex-author > p:has(img) img {
  display:block;
  width:76px;
  height:76px;
}
.lex-author .name { font-size:17px; font-weight:600; color:var(--ink); margin-top:8px; }
.lex-author p { font-size:14.5px; line-height:1.65; color:var(--muted); margin:8px 0 0; max-width:none; }
.lex-author .links { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:14px; }
.lex-author .links a { border-bottom:1px solid var(--teal-border); }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1024px) {
  .lex-inner { flex-direction:column; gap:22px; padding:28px 22px 64px; }

  /* En colonne, l'axe principal devient vertical : il FAUT neutraliser
     les flex-basis prévus pour la largeur, sinon ils imposent des hauteurs. */
  .lex-toc  { flex:0 0 auto; position:static; width:100%; padding-bottom:0; gap:18px; }
  .lex-main { flex:0 1 auto; width:100%; max-width:100%; }

  /* Sommaire compact : encadré + liste défilante, pour ne pas repousser
     le contenu de deux écrans vers le bas. */
  .lex-toc-nav { max-height:min(46vh,300px); overflow-y:auto; border-left:0; }
  .lex-toc > div { border:1px solid var(--line); background:var(--surface); padding:16px 18px; }
  .lex-trust { display:none; }
}

@media (max-width:700px) {
  .lex { --lex-header-top:72px; --lex-anchor:84px; overflow-wrap:anywhere; }
  .lex-inner { padding:22px 16px 56px; }

  .lex-title { font-size:33px; }
  .lex .lex-subtitle { font-size:19px; line-height:1.45; }
  .lex-main h2 { font-size:26px; line-height:1.25; margin-top:44px; }
  .lex-main p { font-size:16.5px; }

  .lex-def { padding:24px 20px; }
  .lex-def-top { flex-direction:column; align-items:flex-start; gap:14px; }

  .lex-stats { grid-template-columns:1fr 1fr; }
  .lex-stats > div:last-child:nth-child(odd) { grid-column:1 / -1; }

  .lex-byline { gap:8px; font-size:12.5px; }
  .lex-badges { gap:8px; }

  .lex-cta { padding:24px 20px; gap:18px; }
  .lex-cta h3 { font-size:21px; }
  .lex .lex-cta-btn { width:100%; text-align:center; }
  .lex .lex-btn { display:block; text-align:center; }

  .lex-step { padding:13px 15px; gap:11px; }
  .lex-myth { padding:18px 18px; gap:12px; }
  .lex-case-head { padding:22px 20px; }
  .lex-callout { padding:18px 18px; }
  .lex-code { padding:16px 16px 16px calc(16px + 1.7em); }
  .lex-code code { font-size:12.5px; }

  .lex-faq summary { font-size:16px; padding:18px 0; }
  .lex-author { padding:22px 20px; gap:16px; }
  .lex-author img { width:64px; height:64px; }
  .lex .lex-pager { grid-template-columns:1fr !important; }
  .lex .lex-pager > a { grid-row:auto !important; grid-column:1 !important; }
}

@media (max-width:400px) {
  .lex-title { font-size:29px; }
  .lex-main h2 { font-size:23px; }
  .lex-stats { grid-template-columns:1fr; }
}
/* --------------------------------------------------------------------------
   FAQ : le signe +/- est un caractere ecrit dans le contenu de la fiche.
   Seul le premier <details> porte l'attribut `open`, donc les suivants
   gardent leur « + » une fois deplies, et le premier garde son « - » une fois
   replie. On neutralise le glyphe du contenu et on le pilote par [open], ce
   qui rend le signe juste sans toucher aux 103 fiches.
   -------------------------------------------------------------------------- */
.lex-faq summary .sign { font-size:0; line-height:1; }
.lex-faq summary .sign::after { content:"+"; font-size:20px; font-weight:400; }
.lex-faq details[open] summary .sign::after { content:"\2212"; }