/* guides.css — styles specifiques a la section /guides/
   Depend de /styles/site.css pour les variables, la grille, l en-tete,
   le pied de page, les boutons et les cartes generiques.
   Le menu mobile (#burger / #nav-mobile) est celui du site. */

/* Hauteur de l en-tete collant et hauteur du fil de lecture. Le gabarit
   les mesure et les ecrit sur :root ; elles servent a poser la barre et a
   calculer le decalage d ancre, si bien qu une valeur ne peut pas deriver
   de l autre. Les replis valent pour une page sans JavaScript : en-tete
   d environ 72px, aucune barre flottante. */
/* --bandeau : la teinte du bandeau d en-tete ET du fil de lecture. Une seule
   source : la changer ici change les deux, sans retouche. */
:root{--bandeau:#F7E8DC;--h-tete:72px;--h-fil:0px;--decal-ancre:calc(var(--h-tete) + var(--h-fil) + 16px)}
/* Un seul decalage d ancre, jamais deux. scroll-padding-top, pose sur le
   scrollport, et scroll-margin-top, pose sur la cible, s additionnent :
   l en-tete etait deja compte deux fois avant cette version (96 + 96, soit
   192px de vide au-dessus du titre vise). Le rembourrage du scrollport est
   donc remis a zero, et le decalage porte par les cibles elles-memes, ou
   qu elles soient dans la page — titres de section, corps, questions
   frequentes, generateur. */
html{scroll-padding-top:0}
[id]{scroll-margin-top:var(--decal-ancre)}
*::before, *::after{box-sizing:border-box}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
.label{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);text-indent:.1em}
/* .calc porte un fond brun sans etre dans .on-dark : son .label heritait donc
   du gris des variantes claires, soit 1,66:1 sur le brun, illisible. La regle
   sombre le couvre desormais explicitement, a 5,82:1. Portee aux contextes
   sombres seuls : les variantes claires gardent le gris, a 6,70:1 sur creme. */
.on-dark .label,.calc .label{color:var(--saumon);font-weight:600}
.btn--sm{min-height:48px;padding:12px 22px;font-size:16px;gap:9px}
.site-foot .btn{display:inline-flex;padding:16px 30px}
.btn--dark{background:var(--brique-clair);color:var(--encre);box-shadow:0 2px 2px rgba(0,0,0,.16),0 18px 36px -18px rgba(0,0,0,.55)}
.btn--dark:hover{background:#E8853C;color:var(--encre)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:90;background:var(--creme);border:1px solid var(--hair);border-radius:var(--r-btn);padding:12px 18px}
.brand b{font-size:clamp(17px,1.3vw,19px);font-weight:600;letter-spacing:-.025em}
.sec-intro{padding-top:clamp(52px,6vw,96px);padding-bottom:clamp(38px,4.4vw,64px)}
.sec-intro h1{font-size:var(--fs-h1);max-width:22ch}
.sec-intro h1::before{content:"";display:block;width:104px;height:5px;background:var(--terracotta);margin-bottom:26px}
.card:hover{color:var(--encre);transform:translateY(-4px);box-shadow:0 3px 5px rgba(34,26,18,.05),0 30px 60px -30px rgba(34,26,18,.5)}
.shot{aspect-ratio:1200/630;background:var(--creme-chaud);border-bottom:1px solid var(--hair);display:flex;align-items:center;justify-content:center}
.shot span{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.card-body{padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;gap:16px;flex:1}
.tag{align-self:flex-start;display:inline-flex;align-items:center;min-height:34px;padding:0 15px;border-radius:999px;background:rgba(180,80,31,.11);color:var(--terracotta);font-size:14.5px;font-weight:700;letter-spacing:.005em}
.card p{color:var(--gris);line-height:1.55;font-size:16.5px}
.card-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:15.5px;color:var(--gris)}
.card-foot .dot{width:5px;height:5px;border-radius:50%;background:var(--saumon)}
.card-foot .go{margin-left:auto;font-weight:700;color:var(--terracotta)}
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.4vw,36px);padding-bottom:clamp(44px,5vw,72px)}
.feat .card h3{font-size:clamp(21px,1.8vw,26px);line-height:1.14}
.feat .card p{font-size:17px}
.feat .card-body{gap:16px;padding:clamp(22px,2vw,30px)}
.filters{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding-block:20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.filters>span{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-right:10px}
.chip{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;background:var(--creme);border:1px solid var(--hair);border-radius:999px;font-size:15.5px;font-weight:600;color:var(--encre);transition:transform .18s ease,box-shadow .18s ease}
.chip:hover{color:var(--encre);transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(34,26,18,.6)}
.chip[aria-current]{background:var(--encre);border-color:var(--encre);color:var(--creme)}
.grid-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 24px;padding-top:clamp(44px,5vw,72px)}
.grid-head h2{font-size:clamp(24px,2.4vw,34px)}
.grid-head span{font-size:16px;color:var(--gris)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,36px);padding-top:clamp(26px,2.6vw,38px);padding-bottom:clamp(56px,6vw,96px)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.feat{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.grid{grid-template-columns:minmax(0,1fr)}}
.gen{padding-block:clamp(58px,6.4vw,104px);background:var(--creme-chaud)}
.gen-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.gen-left{padding:clamp(30px,3.2vw,54px);display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,2.6vw,40px)}
.gen-left h2{font-size:clamp(28px,3.1vw,44px);max-width:19ch}
.gen-right{padding:clamp(30px,3.2vw,54px);border-left:1px solid var(--hair);display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,2.2vw,32px)}
.src-head{display:flex;align-items:center;gap:18px}
.src-head span{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.src-head .rule{flex:1;height:1px;background:var(--hair)}
.pills{display:flex;flex-wrap:wrap;gap:12px}
.pills li{display:inline-flex;align-items:center;gap:11px;min-height:48px;padding:0 22px;background:var(--creme-chaud);border:1px solid var(--hair);border-radius:999px;font-size:16.5px;font-weight:600}
.pills li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brique-clair);flex:none}
.btn--block{width:100%;justify-content:center;min-height:74px;padding:18px 28px;font-size:clamp(17px,1.35vw,21px);text-align:center}
.stats{margin:0;background:var(--creme-chaud);border:1px solid var(--hair);border-radius:var(--r-card);padding:4px clamp(20px,2vw,32px)}
.stat{display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;gap:26px;padding-block:clamp(16px,1.7vw,24px);border-top:1px solid var(--hair)}
.stat:first-child{border-top:0}
.stat b{font-size:clamp(38px,3.4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--terracotta);text-align:right;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.gen-rail{background:var(--brun);padding:clamp(22px,2.4vw,34px) clamp(24px,3vw,50px);position:relative}
.rail-line{position:absolute;left:clamp(46px,5vw,90px);right:clamp(46px,5vw,90px);top:50%;height:1px;background:rgba(251,248,240,.2)}
.rail-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px}
.rail-in span{width:clamp(46px,4.6vw,66px);height:clamp(46px,4.6vw,66px);flex:none;border-radius:18px;background:var(--creme);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -12px rgba(0,0,0,.7)}
.rail-in img{width:56%;height:56%;object-fit:contain}
@media (max-width:900px){.gen-grid{grid-template-columns:minmax(0,1fr)}
.gen-right{border-left:0;border-top:1px solid var(--hair)}}
@media (max-width:620px){.rail-in{flex-wrap:wrap;justify-content:center;gap:14px}
.rail-line{display:none}}
.close{padding-block:var(--pad-sec)}
.close-grid .btn{margin-top:34px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:clamp(30px,3.6vw,64px)}
.foot-brand .brand{color:var(--creme)}
.foot-brand p{margin-top:16px;max-width:34ch;font-size:16.5px;line-height:1.55;color:rgba(251,248,240,.72)}
.foot-brand .btn{margin-top:24px}
.foot-col h3{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--saumon)}
.foot-col ul{margin-top:8px;display:flex;flex-direction:column}
.foot-col a{display:inline-flex;align-items:center;min-height:44px;font-size:16.5px;font-weight:500;color:rgba(251,248,240,.86)}
.foot-col a:hover{color:#fff}
.foot-bottom{margin-top:clamp(34px,3.6vw,56px);padding-top:24px;border-top:1px solid var(--hair-dark);display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center;font-size:15.5px;color:rgba(251,248,240,.62)}
.foot-bottom nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-bottom a{color:rgba(251,248,240,.78)}
@media (max-width:820px){.foot-top{grid-template-columns:minmax(0,1fr)}
.foot-bottom nav{margin-left:0}}
ul, ol{margin:0;padding:0;list-style:none}
.art-wrap{width:min(1240px,100% - clamp(32px,7vw,110px));margin-inline:auto}
/* Le fil d Ariane est passe dans le bandeau d en-tete, au-dessus de
   l etiquette et avant le h1 dans le DOM. C est le bandeau qui porte
   desormais l air du haut : la regle autonome ne vaut plus que pour un
   fil d Ariane pose hors bandeau. */
/* Le fil d Ariane a ete retire de l affichage : il repetait le titre que le
   h1 redit juste dessous, et l en-tete du site ramene partout. Le
   BreadcrumbList du JSON-LD reste complet et inchange, c est lui qui
   alimente le fil d Ariane des resultats Google. Ses regles sont donc
   supprimees ici plutot que laissees mortes. */
/* --mesure-tete : la mesure du titre, exprimee en pixels pour que le chapo
   puisse s y caler. 28ch du h1 valent 28 x 0,56 em, le « 0 » de Hanken
   Grotesk mesurant 0,56 em ; 28 x 0,56 = 15,68. Le h1 garde donc exactement
   sa largeur, et le chapo cesse de se retrecir en entonnoir sous lui. */
.art-head{--mesure-tete:calc(15.68 * clamp(29px,3.9vw,52px));background:var(--bandeau);border-radius:0;text-align:center;
  padding-top:calc(var(--h-fil) + clamp(30px,3.2vw,46px));padding-bottom:clamp(30px,3.2vw,46px)}
.art-head-in{display:flex;flex-direction:column;align-items:center}
.art-head .tag{align-self:center;margin-top:clamp(18px,1.9vw,26px)}
/* 28ch, pas 24 : a 24ch le titre de « Ce que coute reellement un pipeline
   de prospection automatise » tombe sur trois lignes des 768px, et il doit
   en tenir deux. 28ch est la premiere valeur ou les deux titres publies
   passent en deux lignes a 768, 1100, 1280 et 1440. Sur telephone le titre
   deborde de toute facon la mesure, la fenetre est plus etroite qu elle. */
.art-head h1{margin-top:clamp(18px,1.9vw,26px);max-width:var(--mesure-tete);margin-inline:auto;font-size:clamp(29px,3.9vw,52px)}
/* 52ch, mesure : c est la valeur ou les deux chapos publies tiennent en
   trois lignes a 1280px — 62ch en donnait deux et laissait une ligne
   beaucoup plus longue que le titre au-dessus. */
.art-head .chapo{margin-top:clamp(18px,1.9vw,26px);font-size:clamp(17.4px,1.28vw,18.4px);font-weight:500;color:var(--gris);max-width:min(var(--mesure-tete),80ch);margin-inline:auto;line-height:1.45}
/* L etiquette est desormais le premier element du bandeau : sa marge haute
   s ajouterait au padding du bandeau, qui suffit seul a l aerer. Ecrit apres
   .art-head .tag, a specificite egale, sinon la remise a zero perd. */
.art-head-in>*:first-child{margin-top:0}
.tag{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;background:rgba(180,80,31,.11);color:var(--terracotta);font-size:15px;font-weight:700}
/* Le bandeau auteur portait deux filets pour se detacher du chapo et du
   corps. Dans le bandeau d en-tete le changement de fond fait deja cette
   separation : les deux filets sautent, et le bloc se centre comme le
   reste. */
/* Ligne de pied d en-tete, pas troisieme bloc : le bandeau auteur porte des
   informations de service, a trouver plutot qu a regarder. Tout descend d un
   cran, et les libelles monospace passent du gris au brun — plus petits mais
   plus lisibles, 9,87:1 contre 5,93:1 sur le fond du bandeau. */
.meta{margin-top:clamp(24px,2.4vw,34px);padding-top:clamp(22px,2.2vw,30px);padding-bottom:clamp(4px,.6vw,8px);border-top:1px solid var(--hair);border-bottom:0;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px clamp(26px,3.2vw,48px)}
.author{display:flex;align-items:center;gap:10px}
.author img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--creme-chaud)}
.author b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.author span{font-size:14px;line-height:1.3;color:var(--gris)}
/* .facts existe aussi dans site.css, pour la page d accueil, avec un filet
   haut et un padding. Ici le bandeau .meta porte deja ses deux filets : le
   troisieme, court, coupait le bloc au-dessus des libelles. On le neutralise
   sans toucher au composant de l accueil. */
.facts{margin:0;padding:0;border-top:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(24px,3vw,44px)}
.fact{display:flex;flex-direction:column;gap:1px;text-align:center}
.fact dt{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.09em;line-height:1.35;text-transform:uppercase;color:var(--brun)}
.fact dd{margin:0;font-size:15px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
/* Sur telephone le bandeau etait le plus gros bloc de l en-tete : chaque fait
   empilait son libelle sur sa valeur, et les trois se rangeaient en colonne.
   Mis a plat, ils tiennent sur deux lignes au lieu de six. */
@media (max-width:640px){
  /* Sur telephone les quatre colonnes se marchaient dessus. Identite d abord,
     sur sa ligne, puis les trois libelles en grille de deux, qui retombe a
     une colonne si la fenetre ne tient pas trois libelles cote a cote. */
  .meta{flex-direction:column;align-items:center;gap:14px}
  .author{justify-content:center}
  .facts{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px}
  .fact{flex:0 0 auto;white-space:nowrap}
  /* La date de mise a jour est identique a celle de publication et n apporte
     rien sur un ecran etroit. Masquee, pas supprimee : le gabarit reste unique
     et dateModified reste dans le JSON-LD, seule version qui compte pour
     Google. Le rang suit l ordre du gabarit, publie / mis a jour / lecture. */
  .facts .fact:nth-child(2){display:none}
  .author img{width:34px;height:34px}
  .author b{font-size:16px}
  .author span{font-size:14.5px}
  .fact{flex-direction:row;align-items:baseline;gap:8px}
  .fact dt{font-size:11.5px;letter-spacing:.08em}
  .fact dd{font-size:15px}
}
.hero-shot{margin-top:clamp(24px,2.4vw,34px);aspect-ratio:1200/630;background:var(--creme-chaud);border:1px solid var(--hair);border-radius:var(--r-card);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 3px rgba(34,26,18,.04),0 24px 50px -32px rgba(34,26,18,.5)}
.hero-shot span{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
/* La couverture ne s affiche plus en tete d article : le PNG genere par
   templates/couverture-article.html sert au partage social (og:image) et a
   la vignette de l index, pas au corps de la page. Les regles .art-cover ont
   ete retirees avec le bloc, plus aucun markup ne les appelle. */
/* Colonne unique. Le sommaire de bureau occupait ici une colonne de 300px a
   droite : la colonne de texte etait poussee a gauche, et jamais centree.
   Il est passe en bandeau horizontal, au-dessus, a la place liberee par la
   couverture ; la grille n a plus qu une piste. */
.art-grid{display:grid;grid-template-columns:minmax(0,1fr);padding-top:clamp(28px,3vw,48px);padding-bottom:clamp(48px,5vw,84px);align-items:start}
/* Le corps tient une mesure courte — 65 a 75 signes par ligne — pendant que
   les visuels debordent de part et d autre. D ou une grille nommee a cinq
   pistes plutot qu un max-width : au centre la piste « texte », de chaque
   cote la piste « large » bornee par --deb, et aux extremites deux pistes
   souples qui absorbent le reste. Un bloc large ne deborde donc jamais de
   son conteneur, et --deb tombe naturellement a zero quand la fenetre se
   resserre : les visuels se realignent alors sur le texte.
   La grille est posee deux fois, sur .prose et sur chaque section, parce que
   le corps genere range ses blocs a l interieur des sections : la variable
   --grille evite d ecrire la liste de pistes deux fois.
   min-width:0 : sans lui, une image ou un tableau large impose sa largeur
   intrinseque a sa piste et fait deborder la page. */
.prose{--mesure:75ch;--deb:clamp(0px,11vw,170px);
  --grille:[full-start] minmax(0,1fr) [large-start] minmax(0,var(--deb)) [texte-start] min(var(--mesure),100%) [texte-end] minmax(0,var(--deb)) [large-end] minmax(0,1fr) [full-end];
  display:grid;grid-template-columns:var(--grille);
  max-width:none;min-width:0;font-size:clamp(16.5px,1.2vw,18px)}
.prose>*{grid-column:texte;min-width:0}
.prose>section{grid-column:full;display:grid;grid-template-columns:var(--grille);padding-block:0}
.prose section>*{grid-column:texte;min-width:0}
/* Les blocs qui gagnent a respirer sortent de la mesure, sans sortir de la
   page : ecrit apres les regles ci-dessus, a specificite egale.
   Les captures n en sont pas : sur la piste large, un canevas n8n devient un
   rectangle sombre illisible et le rapport a la lecture se casse. Elles
   restent sur la piste du texte, memes bords que les paragraphes. */
.prose>.tbl,.prose section>.tbl,
.prose>.dataviz,.prose section>.dataviz,
.prose>.sim-cta,.prose section>.sim-cta{grid-column:large}
/* Le bloc de code prend une largeur intermediaire : la piste large l ecrasait
   contre le texte, et la mesure du texte le ferait replier a 75 signes alors
   que le redacteur vise 80. 800px laissent 87 signes entre les marges. */
.prose>.code,.prose section>.code{grid-column:large;max-width:800px;justify-self:center;width:100%}
.prose>*+*{margin-top:28px}
.prose section>*+*{margin-top:26px}
/* En grille les marges ne fusionnent plus. Deux consequences a rattraper :
   le h2 de tete de section cumulait sa marge avec l intervalle entre
   sections, et les blocs a marge haute et basse cumulaient la leur avec
   l intervalle suivant. L ecart obtenu est celui d avant, au pixel. */
.prose>section>*:first-child{margin-top:0}
.prose>*+section{margin-top:clamp(48px,4.6vw,68px)}
.prose .illus,.prose .code{margin-block:clamp(30px,3.2vw,44px) 0}
.prose .illus+*,.prose .code+*{margin-top:clamp(30px,3.2vw,44px)}
/* Le decalage d ancre est pose plus haut, sur [id] : les deux articles
   publies n ancrent pas au meme endroit — l un sur la section, l autre sur
   le h2 — et la regle generale couvre les deux sans les enumerer. */
.prose h2{margin-top:clamp(48px,4.6vw,68px)}
.prose h3{margin-top:38px}
.prose p{line-height:1.70}
.prose strong{font-weight:700}
.prose ul.bullets{display:flex;flex-direction:column;gap:14px}
.prose ul.bullets li{position:relative;padding-left:26px;color:var(--gris)}
.prose ul.bullets li strong{color:var(--encre)}
.prose ul.bullets li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--terracotta)}
.tbl{background:var(--creme);border:1px solid var(--hair);border-radius:var(--r-card);padding:clamp(8px,1vw,14px) clamp(14px,1.6vw,24px) clamp(14px,1.4vw,20px);box-shadow:0 2px 3px rgba(34,26,18,.04),0 18px 40px -30px rgba(34,26,18,.45)}
.prose table{width:100%;border-collapse:collapse;font-size:16.5px}
.prose caption{caption-side:bottom;padding-top:14px;font-size:15px;color:var(--gris);text-align:left}
.prose th, .prose td{padding:16px 12px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:baseline}
.prose tbody tr:last-child td{border-bottom:0}
.prose thead th{font-family:var(--mono);font-size:13.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);border-bottom:1px solid var(--encre)}
.prose th+th, .prose td+td{text-align:right}
.prose tbody td:first-child{font-weight:700}
.prose tbody td+td{color:var(--gris);font-variant-numeric:tabular-nums}
blockquote{margin:0;padding:clamp(26px,2.4vw,36px) 0;border-top:2px solid var(--terracotta);border-bottom:1px solid var(--hair)}
blockquote p{font-size:clamp(22px,2.1vw,30px);font-weight:700;letter-spacing:-.022em;line-height:1.26}
blockquote footer{margin-top:18px;font-size:15.5px;color:var(--gris)}
.keyfig{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,2.4vw,38px);align-items:center;padding:clamp(26px,2.4vw,36px);background:var(--creme-chaud);border-radius:var(--r-card)}
.keyfig b{font-size:clamp(52px,5.4vw,80px);font-weight:800;letter-spacing:-.035em;line-height:.95;color:var(--terracotta);font-variant-numeric:tabular-nums}
.keyfig span{font-size:17px;color:var(--gris);line-height:1.5}
.calc{background:var(--brun);color:var(--creme);border-radius:var(--r-card);padding:clamp(26px,2.6vw,38px);box-shadow:0 3px 5px rgba(34,26,18,.12),0 26px 54px -32px rgba(34,26,18,.75)}
.calc .label{display:block}
.calc h3{margin-top:12px;color:#fff;font-size:clamp(19px,1.5vw,23px)}
.calc dl{margin:24px 0 0;display:grid}
.calc .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;padding-block:15px;border-top:1px solid var(--hair-dark)}
.calc .row:first-child{border-top:0;padding-top:0}
.calc dt{font-size:17px;color:rgba(251,248,240,.82)}
.calc dd{margin:0;font-family:var(--mono);font-size:17px;font-weight:500;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc .total{margin-top:24px;padding-top:24px;border-top:1px solid rgba(251,248,240,.4);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px}
.calc .total span{font-size:17px;color:var(--saumon)}
.calc .total b{font-size:clamp(34px,3.4vw,46px);font-weight:800;letter-spacing:-.03em;color:var(--brique-clair);font-variant-numeric:tabular-nums}
.figbox{padding:clamp(24px,2.4vw,34px);background:var(--creme-chaud);border-radius:var(--r-card)}
.figbox .label{display:block;margin-bottom:18px}
.figbox .slot{aspect-ratio:16/9;border:1px dashed rgba(34,26,18,.3);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);text-align:center;padding:18px}
.figbox figcaption{margin-top:16px;font-size:16px;color:var(--gris)}
.inline-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;padding:clamp(24px,2.4vw,32px);background:var(--creme-chaud);border-radius:var(--r-card)}
.inline-cta p{flex:1 1 22ch;font-size:clamp(17px,1.25vw,20px);font-weight:600;letter-spacing:-.012em;line-height:1.35}
/* ---- Fil de lecture -------------------------------------------------
   Le sommaire n est plus un bandeau pose au-dessus du corps : c est une
   barre fine collee sous l en-tete du site, qui apparait quand la lecture
   entre dans le corps et se retire aux questions frequentes.
   « fil- » n existe nulle part ailleurs dans le depot : site.css definit
   des noms generiques (.facts, .split, .funnel) qui fuient sur les
   composants d article portant le meme nom, et un prefixe inedit met la
   barre a l abri de cette collision.
   Etat de base — sans JavaScript, et sur telephone — : un bandeau
   horizontal defilant pose au-dessus du corps, dans le flux, non collant.
   La position fixe est reservee a .js et aux fenetres larges : une page
   sans JavaScript n herite donc jamais d une barre fantome par-dessus le
   texte, elle garde un sommaire ordinaire.
   Une seule ligne, jamais deux : le defilement horizontal absorbe les
   libelles longs, et le gabarit ramene l entree courante dans le champ. */
/* Le fil se fondait dans le creme du corps. Fond en creme chaud, filet bas
   double et plus dense : il se detache comme un outil de reperage sans
   devenir l element le plus fort de la page. Le bouton d appel reste le seul
   aplat terracotta de l ecran ; ici le terracotta ne sert qu au texte de
   l entree courante et a son soulignement. */
/* Meme fond que le bandeau, et pas de filet haut : dans le flux le fil est
   colle sous le bandeau, un trait entre deux aplats de meme couleur ne
   serait qu une couture. Le filet bas et l ombre restent : ce sont eux qui
   detachent le fil plus bas dans l article, ou il flotte sur le creme du
   corps que la couleur ne distingue plus qu a 1,13. */
.fil-lecture{--fil-h:50px;margin-top:0;background:var(--bandeau);border-top:0;border-bottom:2px solid rgba(34,26,18,.22)}
.fil-piste{width:min(1240px,100% - clamp(32px,7vw,110px));margin-inline:auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.fil-piste::-webkit-scrollbar{display:none}
/* Un bord fondu dit que la piste continue au-dela. Il n apparait que du
   cote ou il reste quelque chose a atteindre : le gabarit pose les deux
   attributs en lisant scrollLeft, sinon la derniere entree paraitrait
   effacee alors qu elle est complete. */
.fil-piste[data-droite]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.fil-piste[data-gauche]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);mask-image:linear-gradient(90deg,transparent,#000 34px)}
.fil-piste[data-gauche][data-droite]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
/* safe center, pas center : centre tant que ca tient, et bascule sur le
   bord des que ca deborde, sinon le debut de la piste devient inatteignable
   au defilement. */
.fil-liste{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:safe center;gap:2px;margin:0;padding:0;list-style:none}
.fil-liste li{flex:0 0 auto}
/* display:block plutot que flex : sans lui text-overflow n a pas de prise,
   et la troncature est ce qui rend la barre tenable tant que les h2 n ont
   pas de data-court et que les entrees portent le titre entier. Le titre
   complet reste accessible en infobulle, pose par le gabarit. */
/* Les libelles etaient justes mais trop discrets : 14.5px en gris, la
   barre se lisait comme une legende. Deux crans plus haut, en brun, les
   entrees inactives passent de 6,70:1 a 10,3:1 sur creme sans qu aucune
   couleur nouvelle soit creee — --brun sert deja au rail du generateur.
   La hauteur de la barre suit (--fil-h), et --h-fil comme --decal-ancre
   avec elle : le gabarit les mesure, rien n est ecrit en dur. */
.fil-lecture a{display:block;height:var(--fil-h);line-height:var(--fil-h);max-width:26ch;padding:0 14px;color:var(--brun);font-size:16.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 -2px 0 transparent}
.fil-lecture a:hover{color:var(--encre)}
/* Meme marquage que la navigation du site : un filet terracotta sous
   l entree. La graisse ne bouge pas d un etat a l autre, sinon la largeur
   des entrees sauterait a chaque changement de section et le defilement
   horizontal se decalerait tout seul. */
/* Texte de l entree courante en #983E13, le terracotta sombre deja employe
   au survol des boutons : le #B4501F tombe a 4,39:1 sur le fond creme chaud
   du fil, sous le seuil de 4,5 pour un texte de 16,5px, meme en gras. Le
   soulignement garde le terracotta plein, un trait n etant pas du texte et
   relevant du seuil de 3:1. */
.fil-lecture a[data-active]{color:#983E13;font-weight:700;box-shadow:inset 0 -3px 0 var(--terracotta)}
.fil-lecture[hidden]{display:none}
@media (min-width:1101px){
  .js .fil-lecture{position:fixed;top:var(--h-tete);left:0;right:0;z-index:55;margin:0;border-top:0;background:var(--bandeau);box-shadow:0 12px 26px -20px rgba(34,26,18,.95);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
  /* Pose sur le bandeau : meme fond, donc aucune separation. */
  .js .fil-lecture[data-pose]{border-bottom-color:transparent;box-shadow:none}
  .js .fil-lecture[data-visible]{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
}
@media (prefers-reduced-motion:reduce){
  .js .fil-lecture,.js .fil-lecture[data-visible]{transition:none;transform:none}
}
.faq{padding-top:clamp(18px,1.8vw,28px);padding-bottom:clamp(52px,5.4vw,88px)}
.faq-in{max-width:80ch}
.faq h2{margin-bottom:14px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{display:flex;align-items:center;gap:18px;min-height:68px;padding-block:14px;cursor:pointer;font-size:clamp(17.5px,1.25vw,20px);font-weight:700;letter-spacing:-.012em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:24px;font-weight:500;color:var(--terracotta)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:24px;font-size:17px;color:var(--gris);max-width:66ch}
.related{padding-block:clamp(60px,6vw,100px)}
.rel-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 24px;margin-bottom:clamp(24px,2.6vw,38px)}
.rel-head h2{font-size:clamp(24px,2.4vw,34px)}
.rel-head a{font-size:16.5px;font-weight:700}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,36px)}
.card-body .tag{align-self:flex-start}
@media (max-width:1000px){.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.rel-grid{grid-template-columns:minmax(0,1fr)}}