/* =========================================================
   Les guides publics de la rôtisserie ambulante (/guide/), sur
   Rôtisseur Pro. Chargée après /socle.css (les jetons : papier,
   encre, braise, or ; les polices droites ; .marque, .btn,
   .evitement) et /hub.css (l'en-tête et le pied de la vitrine
   publique hors accueil, comme les documents), sans rien y
   changer. Ici, tout ce qui est propre à une page de lecture :
   la tête de l'article, la réponse directe, le sommaire, le corps
   (titres numérotés, listes, étapes, tableaux de chiffres, renvois
   de sources), l'encadré « Ce que la formation ajoute », les
   questions, les guides voisins, les sources, le lexique, l'index.
   Filets fins et numéros plutôt que des cartes ; une seule surface
   sombre par page, l'encadré de la formation.
   Aucune couleur écrite ici (sauf l'impression, en noir) : les
   jetons du socle seulement. L'accent est la braise.
   Aucun texte dans les content: (outils-dev/verifier-textes.mjs
   les lit) : les traits, les signes plus et les chevrons sont
   dessinés.
   ========================================================= */

/* L'italique des titres (Fraunces italique, latin) : le socle ne déclare que le romain. */
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 600;font-display:swap;src:url(/fonts/f5.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --gout:clamp(16px,4.2vw,56px);  /* la gouttière de /hub.css (.enveloppe) : 16 px sur téléphone */
  --haut-entete:70px;             /* l'en-tête de /hub.css : 68 px et son trait d'encre */
}

/* ---------- Base ---------- */
html{scroll-padding-top:calc(var(--haut-entete) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body.guides{display:flex;flex-direction:column;min-height:100vh;overflow-x:clip;font-size:1.0625rem;line-height:1.65}
body.guides>main{flex:1 0 auto}
@media (max-width:560px){body.guides{font-size:1rem}}
.guides :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.guides .ajoute :focus-visible,.guides .vitrine-pied :focus-visible{outline-color:var(--focus-sombre)}
:where(.guides main) p+p{margin-top:16px}
.guides h1,.guides h2,.guides h3{font-family:var(--police-titre);font-weight:600;letter-spacing:-.012em}
.guides :is(h1,h2) em{font-style:italic;font-weight:500;color:var(--braise)}

/* Le cadre : le titre, le corps et l'index partent du même bord que la
   marque de l'en-tête (.enveloppe de /hub.css), à toutes les largeurs. */
.wrap{width:min(1180px,100% - 2 * var(--gout));margin-inline:auto}

/* ---------- Les boutons : ceux du hub (un chevron dessiné, un filet) ---------- */
.guides .btn{min-height:52px;padding:0 24px;border:2px solid var(--braise);border-radius:6px;font-size:1rem;letter-spacing:.01em;box-shadow:none;transition:background-color .25s var(--lent),color .25s var(--lent),border-color .25s var(--lent),transform .25s var(--lent)}
.guides .btn:hover{background:var(--braise-fonce);border-color:var(--braise-fonce);color:var(--blanc);box-shadow:none}
.guides .btn:active{transform:translateY(1px)}
.guides a.btn:not(.btn--discret)::after{content:"";flex:none;width:.48em;height:.48em;margin-left:4px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--lent)}
.guides a.btn:hover::after{transform:translateX(4px) rotate(45deg)}
.guides .btn--discret{border-color:transparent;background:none;color:var(--encre)}
.guides .btn--discret:hover{border-color:transparent;background:var(--papier-2);color:var(--encre)}

/* ---------- L'en-tête (/hub.css), du téléphone à la petite tablette ----------
   La marque mène au hub, le bouton à la formation. « Tous les guides » (le
   test, sur l'index) attend 680 px : plus étroit, la marque et le fil
   d'Ariane suffisent. Le bouton se resserre sur téléphone pour que la marque
   ne soit jamais rognée. */
.guides .vitrine-entete .btn{min-height:44px;padding:0 16px;font-size:.9375rem;white-space:nowrap}
.guides .vitrine-entete .btn::after{display:none}
@media (max-width:679px){.vitrine-entete .entete__plus{display:none}}
@media (max-width:419px){
  .guides .vitrine-entete .btn{padding:0 12px;font-size:.8125rem}
  .guides .vitrine-entete .marque{gap:8px;letter-spacing:.16em}
  .guides .vitrine-entete .marque svg{width:28px;height:28px}
}
@media (max-width:359px){.guides .vitrine-entete .marque{font-size:.78rem;letter-spacing:.12em}}

/* ---------- La tête de l'article ---------- */
.guide__tete{padding-block:clamp(26px,3.6vw,52px) clamp(30px,4vw,52px);border-bottom:1px solid var(--filet-fort)}
@media (max-width:1099px){.guide__corps>*{max-width:46rem}}
@media (max-width:999px){.guides-liste>*{max-width:46rem}}

/* Le fil d'Ariane. */
.fil{margin:0 0 18px;font-size:.85rem;color:var(--encre-sourde)}
.fil a{color:var(--braise-fonce);font-weight:600;text-decoration:none}
.fil a:hover{color:var(--braise-fonce);text-decoration:underline}
.fil span{margin-inline:6px}

/* Le repère : un trait de 28 px et des capitales espacées, à la braise. */
.eyebrow{display:flex;align-items:flex-start;gap:14px;margin:0;font:700 .75rem/1.35 var(--police);letter-spacing:.22em;text-transform:uppercase;color:var(--braise)}
.eyebrow::before{content:"";flex:none;width:28px;height:2px;margin-top:.6em;background:currentColor}

/* Le titre. Les guides ont tous un titre en deux temps, « le sujet : ce
   que le guide en dit » : le sujet en grand, puis la suite en italique
   braise, sur sa ligne (le texte du titre reste celui du JSON-LD, le <em>
   ne fait que le marquer). La taille optique d'affiche (opsz 144)
   seulement au-dessus de 600 px : plus petit, ses déliés disparaissent. */
.guide__tete h1{max-width:22ch;margin-top:clamp(14px,1.6vw,22px);font-size:clamp(2rem,1.3rem + 2.7vw,3.45rem);line-height:1.03;letter-spacing:-.024em;word-spacing:.03em;text-wrap:balance}
@media (min-width:600px){.guide__tete h1{font-variation-settings:"opsz" 144;line-height:1}}
.guide .guide__tete h1 em{display:block;margin-top:.3em;font-size:.54em;line-height:1.18;letter-spacing:-.008em;font-variation-settings:normal}
.lead{max-width:60ch;color:var(--encre-douce)}
.guide__tete .lead{margin-top:clamp(18px,2vw,26px);font-size:clamp(1.06rem,1rem + .3vw,1.2rem);line-height:1.55}

/* L'auteur, la date, la durée : une ligne sous un filet, séparées par des
   traits verticaux dessinés. Chaque information porte son trait à gauche ;
   la ligne part 29 px plus à gauche et ces 29 px sont rognés : le trait de
   la première information de chaque ligne disparaît, même quand la ligne
   se replie. Sur téléphone, une information par ligne. */
.guide__meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;width:fit-content;max-width:calc(100% + 29px);margin:clamp(20px,2.4vw,28px) 0 0 -29px;padding-top:14px;border-top:1px solid var(--filet-fort);clip-path:inset(0 0 0 29px);font-size:.875rem;line-height:1.5;color:var(--encre-sourde)}
.guide__meta b{color:var(--encre);font-weight:600}
.guide__meta span{position:relative;margin-left:29px}
.guide__meta span::before{content:"";position:absolute;left:-15px;top:.3em;width:1px;height:.95em;background:var(--filet-fort)}
@media (max-width:559px){
  .guide__meta{flex-direction:column;align-items:flex-start;width:auto}
}

/* ---------- Le corps : une colonne de lecture ----------
   Chaque bloc ne porte qu'une marge haute : l'espacement est le même
   dans le flux (téléphone) et dans la grille à deux colonnes (grand
   écran), où les marges ne fusionnent pas. */
.guide__corps{padding-block:clamp(30px,4vw,48px) clamp(64px,8vw,112px);line-height:1.7;counter-reset:partie}
.guide__corps>*{margin-block:0}
.guide__corps>*+*{margin-top:1.05em}
.guide__corps li,.guide__corps dd{max-width:68ch}
.guide__corps>.sommaire{margin-top:28px}

/* Les liens du texte : braise, soulignés finement. */
.guide__corps a:not([class]),.qui a{color:var(--braise);text-decoration-thickness:1px;text-underline-offset:3px}
.guide__corps a:not([class]):hover,.qui a:hover{color:var(--braise-fonce);text-decoration-thickness:2px}

/* Les parties : un filet, le numéro (le même que dans le sommaire), le titre. */
.guide__corps h2{font-size:clamp(1.55rem,1.2rem + 1.4vw,2.2rem);line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
.guide__corps>h2{margin-top:clamp(52px,5.5vw,76px);padding-top:22px;border-top:1px solid var(--filet-fort)}
.guide__corps>h2[id]{counter-increment:partie}
.guide__corps>h2[id]::before{content:counter(partie,decimal-leading-zero);display:block;margin-bottom:14px;font:700 .75rem/1 var(--police);letter-spacing:.2em;color:var(--braise);font-variant-numeric:tabular-nums}
.guide__corps>h2+*{margin-top:18px}
.guide__corps>h3{margin-top:34px;font-size:clamp(1.16rem,1.06rem + .4vw,1.32rem);line-height:1.25;letter-spacing:-.01em}
.guide__corps>h3+*{margin-top:8px}

/* Le renvoi vers une source : petit numéro, cliquable, avec un peu de
   marge autour pour le doigt. */
sup.s{font-size:.68em;line-height:0;vertical-align:super;margin-left:1px}
sup.s a{padding:0 .18em;border-radius:3px;color:var(--braise-fonce);font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
sup.s a:hover{background:var(--braise-voile);color:var(--braise-fonce);text-decoration:underline}

/* ---------- La réponse directe, en tête ----------
   Ce que lisent un moteur ou un assistant : posée sous un trait d'encre,
   en Fraunces, comme un chapeau d'article. */
.reponse{padding-top:20px;border-top:2px solid var(--encre)}
.reponse__f,.sommaire__f,.ajoute__f{display:flex;align-items:flex-start;gap:14px;margin:0 0 12px;font:700 .6875rem/1.35 var(--police);letter-spacing:.22em;text-transform:uppercase;color:var(--braise)}
.reponse__f::before,.ajoute__f::before{content:"";flex:none;width:28px;height:2px;margin-top:.6em;background:currentColor}
.reponse p:not(.reponse__f){max-width:none;font:400 clamp(1.1rem,1.03rem + .3vw,1.24rem)/1.56 var(--police-titre);letter-spacing:-.003em;color:var(--encre)}

/* ---------- Le sommaire : une liste numérotée, sur deux colonnes ---------- */
.sommaire{font-size:.9375rem}
.sommaire__f{color:var(--encre-sourde)}
.sommaire ol{display:block;margin:0;padding:0;list-style:none;columns:2;column-gap:32px;counter-reset:entree;border-top:2px solid var(--encre)}
.sommaire li{break-inside:avoid;counter-increment:entree;border-bottom:1px solid var(--filet)}
.guide__corps .sommaire a{display:flex;align-items:baseline;gap:10px;padding:9px 0;line-height:1.35;color:var(--encre);text-decoration:none;transition:color .2s}
.sommaire a::before{content:counter(entree,decimal-leading-zero);flex:none;width:2em;font:700 .75rem/1 var(--police);letter-spacing:.1em;color:var(--braise);font-variant-numeric:tabular-nums}
.guide__corps .sommaire a:hover{color:var(--braise-fonce);text-decoration:underline;text-underline-offset:3px}
/* Les sources ferment la page sans numéro de partie : leur ligne n'en porte pas non plus. */
.sommaire li:has(> a[href="#sources"]){counter-increment:none}
.sommaire li:has(> a[href="#sources"]) a::before{visibility:hidden}
@media (max-width:559px){.sommaire ol{columns:1}}

/* ---------- Les listes : un trait de braise devant chaque ligne ---------- */
.liste{display:grid;gap:12px}
.liste li{position:relative;padding-left:34px;color:var(--encre)}
.liste li::before{content:"";position:absolute;left:0;top:.8em;width:16px;height:2px;background:var(--braise)}
.liste strong{color:var(--encre)}

/* Les étapes numérotées : le numéro, la question en gras, la raison dessous. */
.sept{counter-reset:s;border-top:2px solid var(--encre)}
.sept li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:18px 0;border-bottom:1px solid var(--filet-fort);counter-increment:s}
.sept li::before{content:counter(s,decimal-leading-zero);grid-column:1;grid-row:1 / span 2;padding-top:4px;font:700 .8125rem/1.3 var(--police);letter-spacing:.14em;color:var(--braise);font-variant-numeric:tabular-nums}
.sept li>b,.sept li>span{grid-column:2}
.sept li>b{display:block;font:600 clamp(1.08rem,1.02rem + .25vw,1.18rem)/1.3 var(--police-titre);color:var(--encre)}
.sept li>span{display:block;max-width:68ch;margin-top:4px;font-size:.97rem;line-height:1.62;color:var(--encre-douce)}
/* Sur téléphone, le numéro rend sa place au texte. */
@media (max-width:559px){.sept li{grid-template-columns:30px minmax(0,1fr);column-gap:8px}}

/* Une remarque en marge : un trait d'or, sans cadre. */
.nuance{padding:16px 20px;border-left:3px solid var(--or);border-radius:0 8px 8px 0;background:var(--or-voile);font-size:.97rem;line-height:1.6;color:var(--encre-douce)}
.nuance b{color:var(--encre)}

/* ---------- Les tableaux de chiffres ----------
   Pas de boîte : un trait d'encre en haut et en bas, des filets entre
   les lignes, les montants en chiffres alignés. */
.tableau-defile{overflow-x:auto}
.chiffres{border-top:2px solid var(--encre);border-bottom:1px solid var(--encre)}
.chiffres table{width:100%;border-collapse:collapse;font-size:.97rem;line-height:1.5}
.chiffres th,.chiffres td{padding:14px 18px 14px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--filet);color:var(--encre)}
.chiffres thead th{padding:12px 18px 10px 0;border-bottom:1px solid var(--encre);font:700 .6875rem/1.35 var(--police);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-sourde)}
.chiffres tbody tr:last-child td{border-bottom:0}
.chiffres th:last-child,.chiffres td:last-child{padding-right:0}
.chiffres td:last-child{min-width:14ch;font-weight:600;font-variant-numeric:tabular-nums}
/* Trois colonnes de texte (des formats comparés) : le nom du format porte
   l'accent, les deux colonnes de texte restent égales. */
.chiffres:has(th:nth-child(3)) td:first-child{font:600 1.04rem/1.45 var(--police-titre)}
.chiffres:has(th:nth-child(3)) td:last-child{font-weight:400}
/* Deux colonnes : l'intitulé laisse la place aux montants, qui se coupent moins. */
.chiffres:not(:has(th:nth-child(3))) td:first-child{width:42%}
@media (max-width:560px){
  /* Le tableau se lit empilé (l'intitulé, puis le montant) plutôt qu'en
     défilement latéral, où la colonne des montants resterait hors écran. */
  .chiffres thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .chiffres tr{display:block;padding:14px 0;border-bottom:1px solid var(--filet)}
  .chiffres tr:last-child{border-bottom:0}
  .chiffres td,.chiffres:not(:has(th:nth-child(3))) td:first-child{display:block;width:auto;padding:0;border:0}
  .chiffres td:first-child{font-size:.95rem;color:var(--encre-douce)}
  .chiffres td:last-child{min-width:0;margin-top:4px;font:600 1.1rem/1.35 var(--police-titre);color:var(--encre)}
  /* Un tableau à trois colonnes (formats, ce qu'ils apportent, ce qu'ils
     coûtent) : l'en-tête reste visible comme légende, et chaque cellule
     reprend le trait de couleur de sa colonne. */
  .chiffres:has(th:nth-child(3)) thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .chiffres:has(th:nth-child(3)) thead tr{display:block;padding:12px 0;border-bottom:1px solid var(--encre)}
  .chiffres:has(th:nth-child(3)) thead th{display:block;padding:2px 0;border:0}
  .chiffres:has(th:nth-child(3)) td:first-child{font:600 1.08rem/1.35 var(--police-titre);color:var(--encre)}
  .chiffres:has(th:nth-child(3)) td:nth-child(n+2){position:relative;margin-top:6px;padding-left:24px;font:400 .97rem/1.5 var(--police);color:var(--encre)}
  .chiffres:has(th:nth-child(3)) :is(th,td):nth-child(n+2)::before{content:"";display:inline-block;width:14px;height:2px;margin-right:10px;vertical-align:.3em;background:var(--or-texte)}
  .chiffres:has(th:nth-child(3)) td:nth-child(n+2)::before{position:absolute;left:0;top:.72em;margin:0}
  .chiffres:has(th:nth-child(3)) :is(th,td):nth-child(3)::before{background:var(--braise)}
}

/* ---------- Ce que la formation ajoute : la seule surface sombre ---------- */
.ajoute{margin-top:clamp(56px,6vw,84px);padding:clamp(24px,4vw,44px);border-radius:8px;background:var(--nuit);color:var(--reflet)}
.guide__corps>.ajoute{margin-top:clamp(56px,6vw,84px)}
.ajoute__f{margin-bottom:14px;color:var(--or-clair)}
.ajoute h2{margin:0 0 16px;padding:0;border:0;font-size:clamp(1.4rem,1.15rem + 1vw,1.95rem);line-height:1.15;letter-spacing:-.015em;color:var(--reflet);text-wrap:balance}
.ajoute p{max-width:62ch;color:var(--filet-fort)}
.ajoute p+p{margin-top:12px}
.ajoute__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.guides .ajoute .btn:hover{background:var(--reflet);border-color:var(--reflet);color:var(--nuit)}
.guides .ajoute .btn--ghost{background:transparent;border-color:var(--filet-fort);color:var(--reflet)}
.guides .ajoute .btn--ghost:hover{background:var(--reflet);border-color:var(--reflet);color:var(--nuit)}
.ajoute .ajoute__note{margin-top:18px;font-size:.875rem;color:var(--filet-fort)}
@media (max-width:559px){.ajoute__actions .btn{flex:1 1 100%}}

/* ---------- Les questions ---------- */
.faq{border-top:2px solid var(--encre)}
.faq details{border-bottom:1px solid var(--filet-fort)}
.faq summary{position:relative;display:flex;align-items:center;min-height:64px;padding:16px 56px 16px 0;cursor:pointer;list-style:none;font:600 clamp(1.05rem,1rem + .3vw,1.2rem)/1.35 var(--police-titre);color:var(--encre);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--braise-fonce)}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:14px;top:50%;width:16px;height:2px;margin-top:-1px;background:var(--braise);transition:transform .35s var(--lent)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq details p{max-width:66ch;padding:0 0 22px;color:var(--encre-douce)}

/* ---------- Les guides voisins : des lignes, pas des cartes ---------- */
.voisins{display:block;margin:0;border-top:2px solid var(--encre)}
.voisin{display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px;padding:18px 0;border-bottom:1px solid var(--filet-fort);color:var(--encre);text-decoration:none;transition:background-color .25s}
.voisin:hover{color:var(--encre)}
.voisin__f{font:700 .6875rem/1.4 var(--police);letter-spacing:.16em;text-transform:uppercase;color:var(--braise)}
.voisin__n{font:600 clamp(1.15rem,1.05rem + .45vw,1.38rem)/1.2 var(--police-titre);letter-spacing:-.01em;transition:color .2s}
.voisin__d{max-width:60ch;font-size:.95rem;line-height:1.55;color:var(--encre-douce)}
.voisin__t{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:.9rem;font-weight:600;color:var(--braise-fonce)}
.voisin__t::after{content:"";flex:none;width:.46em;height:.46em;margin-right:3px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--lent)}
.voisin:hover .voisin__n{color:var(--braise-fonce)}
.voisin:hover .voisin__t::after{transform:translateX(4px) rotate(45deg)}
@media (min-width:700px){
  .voisin{grid-template-columns:minmax(0,1fr) auto;column-gap:32px}
  .voisin>span{grid-column:1}
  .voisin>.voisin__t{grid-column:2;grid-row:1 / span 3;align-self:center;margin-top:0}
}
@media (prefers-reduced-motion:no-preference){
  .voisin:hover{background:linear-gradient(90deg,var(--papier-2),transparent 85%)}
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--lent),content-visibility .45s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* ---------- Les sources, en fin de page ---------- */
.sources{margin-top:clamp(56px,6vw,84px);padding-top:22px;border-top:1px solid var(--filet-fort);font-size:.875rem;line-height:1.55;color:var(--encre-douce)}
.guide__corps>.sources{margin-top:clamp(56px,6vw,84px)}
.sources h2{margin:0 0 16px;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);color:var(--encre)}
.sources ol{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:source}
/* Pas de grille sur la ligne elle-même : un lien au milieu du texte y
   deviendrait une cellule à part. */
.sources li{position:relative;max-width:80ch;padding-left:2.6em;counter-increment:source;overflow-wrap:anywhere}
.sources li::before{content:counter(source);position:absolute;left:0;top:0;font-weight:700;color:var(--braise-fonce);font-variant-numeric:tabular-nums}
.sources li:target{border-radius:2px;background:var(--or-voile);box-shadow:0 0 0 6px var(--or-voile)}

/* ---------- Le lexique : un dictionnaire, le mot à gauche ---------- */
.lexique{margin:0;border-top:2px solid var(--encre)}
.lexique dt{padding-top:16px;font:600 1.1rem/1.3 var(--police-titre);color:var(--encre)}
.lexique dt b{font-weight:inherit}
.lexique dd{margin:4px 0 0;padding-bottom:16px;border-bottom:1px solid var(--filet-fort);color:var(--encre-douce)}
.lexique dt:target,.lexique dt:target+dd{background:var(--or-voile)}
@media (min-width:760px){
  /* Pas d'espace entre les colonnes : le filet court d'un bord à l'autre, le mot garde sa marge à droite. */
  .lexique{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
  .lexique dt{grid-column:1;padding:19px 28px 16px 0;border-bottom:1px solid var(--filet-fort)}
  .lexique dd{grid-column:2;max-width:none;margin:0;padding:16px 0}
}

/* ---------- Grand écran : le sommaire en marge, qui suit la lecture ----------
   Le corps devient une grille : le sommaire à gauche, sur toute la hauteur
   de l'article (une plage de lignes plus longue qu'aucun guide), collé
   sous l'en-tête ; tout le reste dans la colonne de lecture. Le titre
   part du bord, comme la marque ; le texte, de la colonne. */
@media (min-width:1100px){
  .guide__corps{display:grid;grid-template-columns:15.5rem minmax(0,46rem);column-gap:clamp(48px,6vw,104px);align-items:start}
  .guide__corps>*{grid-column:2}
  .guide__corps>.sommaire{grid-column:1;grid-row:1 / span 200;position:sticky;top:calc(var(--haut-entete) + 28px);max-height:calc(100vh - var(--haut-entete) - 56px);margin-top:0;overflow-y:auto;font-size:.9rem}
  .guide__corps>.sommaire ol{columns:1}
}

/* ---------- L'index des guides ---------- */
/* La tête : le titre court en grand, l'italique braise dans la ligne. */
main>.guide__tete h1{max-width:16ch;font-size:clamp(2.4rem,1.3rem + 4.4vw,4.8rem);line-height:.96;letter-spacing:-.032em}
.guides-liste{padding-block:clamp(32px,4vw,56px) clamp(64px,8vw,112px);counter-reset:guide}

/* Chaque thème pend à un trait d'encre : son titre et sa phrase, puis ses
   guides, numérotés d'un bout à l'autre de l'index. */
.groupe{padding-top:20px;border-top:2px solid var(--encre)}
.groupe+.groupe{margin-top:clamp(48px,6vw,80px)}
.groupe h2{font-size:clamp(1.45rem,1.2rem + 1.1vw,2rem);line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
.groupe>p{max-width:44ch;margin-top:10px;color:var(--encre-douce);line-height:1.55}
.groupe .voisins{margin-top:20px;border-top:1px solid var(--filet-fort)}
.guides-liste .voisin{counter-increment:guide;grid-template-columns:3rem minmax(0,1fr)}
.guides-liste .voisin::before{content:counter(guide,decimal-leading-zero);grid-column:1;grid-row:1 / span 4;padding-top:2px;font:700 .8125rem/1.3 var(--police);letter-spacing:.14em;color:var(--braise);font-variant-numeric:tabular-nums}
.guides-liste .voisin>span{grid-column:2}
@media (max-width:559px){.guides-liste .voisin{grid-template-columns:2.4rem minmax(0,1fr)}}
@media (min-width:700px){
  .guides-liste .voisin{grid-template-columns:3.4rem minmax(0,1fr) auto}
  .guides-liste .voisin>.voisin__t{grid-column:3}
}

/* La formation et « qui écrit ces guides ». */
.guides-liste>.ajoute{margin-top:clamp(64px,7vw,104px)}
.qui{margin-top:clamp(56px,6vw,88px);padding-top:20px;border-top:2px solid var(--encre)}
.qui h2{font-size:clamp(1.45rem,1.2rem + 1.1vw,2rem);line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
.qui p{max-width:68ch;margin-top:16px;color:var(--encre-douce)}

@media (min-width:1000px){
  /* La tête de l'index : le titre à gauche, l'introduction en face, sur sa ligne de base. */
  main>.guide__tete>.wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(40px,5vw,72px);align-items:end}
  main>.guide__tete .eyebrow{grid-column:1 / -1}
  main>.guide__tete h1{grid-column:1}
  main>.guide__tete .lead{grid-column:2;margin-top:0;padding-bottom:.4em}
  /* Le thème à gauche, ses guides à droite, sur le même trait. */
  .groupe,.qui{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);column-gap:clamp(40px,5vw,80px);align-items:start}
  /* La phrase du thème reste sous son titre : la hauteur de la liste va à la dernière ligne. */
  .groupe{grid-template-rows:auto 1fr}
  .groupe>h2,.groupe>p,.qui>h2{grid-column:1}
  .groupe .voisins{grid-column:2;grid-row:1 / span 2;margin-top:0;border-top:0}
  .groupe .voisin:first-child{padding-top:0}
  .qui>h2{grid-row:1 / span 3}
  .qui>p{grid-column:2}
  .qui>p:first-of-type{margin-top:0}
  /* L'encadré : le repère et le titre à gauche, le texte et les boutons à droite. */
  .guides-liste>.ajoute{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);column-gap:clamp(40px,5vw,80px);align-items:start}
  .guides-liste>.ajoute>.ajoute__f,.guides-liste>.ajoute>h2{grid-column:1}
  .guides-liste>.ajoute>p:not(.ajoute__f),.guides-liste>.ajoute>.ajoute__actions{grid-column:2}
  .guides-liste>.ajoute>p:not(.ajoute__f){grid-row:1 / span 2;margin-top:0}
}

/* ---------- L'impression ----------
   A4, sans l'en-tête collé ni ses boutons ; la marque, la tête, le corps,
   l'index et le pied prennent toute la largeur, et partent donc du même
   bord. Le navigateur n'imprime pas les fonds : la nuit de l'encadré et du
   pied passe en noir sur blanc, ses traits en bordures. */
@media print{
  @page{size:A4;margin:16mm 14mm}
  body.guides{background:#fff;font-size:11pt}
  .vitrine-entete{position:static;border-bottom:1px solid #000}
  .vitrine-entete .actions,.evitement{display:none!important}
  .enveloppe,.wrap,.guide__tete>.wrap,.guide__corps,.guides-liste{width:auto!important}
  .vitrine-pied{padding:6mm 0 0;background:none!important;color:#333!important;break-inside:avoid}
  .vitrine-pied .marque,.vitrine-pied a,.vitrine-pied p a{color:#000!important}
  .vitrine-pied .marque svg{fill:#000}
  .guide__tete{padding-block:0 6mm;border:0}
  .guide__corps{display:block!important;padding-block:4mm 0}
  .guide__corps>.sommaire{display:none}
  .reponse,.sept li,.faq details,.voisin,.sources li,.lexique dt,.lexique dd{break-inside:avoid}
  .guide__corps h2,.guide__corps h3,.eyebrow{break-after:avoid}
  .eyebrow::before{height:0;background:none!important;border-top:2px solid currentColor}
  .liste li::before{height:0;background:none!important;border-top:2px solid var(--braise)}
  .ajoute{border:1px solid #000;border-radius:0;background:none!important;color:#000!important}
  .ajoute h2,.ajoute p,.ajoute__f{color:#000!important}
  .ajoute__f::before,.reponse__f::before{height:0;background:none!important;border-top:2px solid currentColor}
  .ajoute__actions,.voisin__t{display:none!important}
  .faq details::details-content{content-visibility:visible;block-size:auto}
  .faq summary::before,.faq summary::after{display:none}
  *{animation:none!important;transition:none!important}
}