/* blocs.css — palette de blocs de contenu pour les articles de /guides/
   Depend de /styles/site.css pour les variables et de /styles/guides.css
   pour la typographie de .prose. Charge apres les deux, et se permet donc
   de surcharger ce qui vient de guides.css.
   Chaque bloc est autonome : un article peut n en utiliser aucun.

   Les blocs de donnees lisent leur valeur dans la variable --v, exprimee
   en pourcentage sans unite, posee en style inline sur l element concerne.
   C est la seule exception a l interdiction du style en ligne : --v est
   une donnee, pas une mise en forme. */

/* ---- 01. Etapes numerotees ---- */
.steps-num{counter-reset:sn;display:grid;gap:0}
.steps-num li{counter-increment:sn;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;padding-block:22px;border-top:1px solid var(--hair);position:relative}
.steps-num li:first-child{border-top:0;padding-top:0}
.steps-num li::before{content:counter(sn,decimal-leading-zero);font-family:var(--mono);font-size:14px;font-weight:500;color:var(--terracotta);width:34px;height:34px;border:1px solid rgba(180,80,31,.3);border-radius:50%;display:grid;place-items:center;flex:none}
/* Le numero occupe la premiere colonne, tout le reste la seconde.
   Sans cette regle, un li a deux enfants renvoie le second sous le numero,
   la colonne auto s elargit et le titre se retrouve compresse. */
.steps-num li>*{grid-column:2}
.steps-num b{display:block;font-size:clamp(17px,1.3vw,19px);font-weight:700;letter-spacing:-.012em;line-height:1.3}
.steps-num p{margin-top:8px;color:var(--gris);line-height:1.55}

/* ---- 02. Comparatif en deux colonnes ---- */
.versus{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(16px,1.8vw,24px)}
.versus>div{border:1px solid var(--hair);border-radius:var(--r-card);padding:clamp(22px,2.2vw,30px);background:var(--creme)}
.versus>div+div{background:var(--creme-chaud);border-color:rgba(180,80,31,.22)}
.versus .vs-lab{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);text-indent:.14em}
.versus>div+div .vs-lab{color:var(--terracotta)}
.versus h3{margin-top:12px;font-size:clamp(18px,1.45vw,21px)}
.versus ul{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.versus li{position:relative;padding-left:24px;font-size:16.5px;line-height:1.5;color:var(--gris)}
.versus li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--saumon)}
.versus>div+div li::before{background:var(--terracotta)}

/* ---- 03. Avertissement ---- */
.warn{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding:clamp(20px,2vw,26px) clamp(22px,2.2vw,28px);background:#FCF3EC;border:1px solid rgba(180,80,31,.24);border-radius:var(--r-card)}
.warn::before{content:"!";font-family:var(--mono);font-size:17px;font-weight:600;color:var(--creme);background:var(--terracotta);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none}
.warn>*{grid-column:2}
.warn b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.warn p{margin-top:8px;font-size:16.5px;line-height:1.55;color:var(--gris)}

/* ---- 04. Bloc source ---- */
.srcbox{border-left:3px solid var(--brun);padding:2px 0 2px 20px}
.srcbox b{display:block;font-size:clamp(19px,1.6vw,23px);font-weight:800;letter-spacing:-.025em;line-height:1.25;font-variant-numeric:tabular-nums}
.srcbox dl{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:10px 28px}
.srcbox div{display:flex;flex-direction:column;gap:3px}
.srcbox dt{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--gris)}
.srcbox dd{margin:0;font-size:15.5px;font-weight:600;color:var(--encre)}

/* ---- 05. Points-cles, en tete d article ---- */
.keypoints{background:var(--creme-chaud);border-radius:var(--r-card);padding:clamp(24px,2.4vw,32px)}
.keypoints .label{display:block}
.keypoints ul{margin-top:16px;display:flex;flex-direction:column;gap:13px}
.keypoints li{position:relative;padding-left:26px;font-size:clamp(16.5px,1.2vw,18px);font-weight:500;line-height:1.5}
.keypoints li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;background:var(--terracotta)}

/* ---- 06. Video, ecrite mais hors palette pour l instant ----
   L iframe doit passer par tarteaucitron, jamais en dur. */
.vid{margin:0}
.vid .frame{aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--creme-chaud);border:1px solid var(--hair)}
.vid .frame iframe{width:100%;height:100%;border:0;display:block}
.vid figcaption{margin-top:14px;font-size:16px;color:var(--gris);line-height:1.5}


/* ============================================================
   BLOCS DE DONNEES
   Un chiffre doit se comprendre sans etre lu. Ces cinq blocs
   remplacent le tableau chaque fois que la donnee tient sur une
   seule dimension. Le tableau reste reserve aux croisements.
   ============================================================ */

/* Conventions communes a toutes les barres de ces blocs :
   - une seule teinte par bloc, jamais une couleur qui change avec le rang ;
   - epaisseur bridee a 22px, l air autour de la barre fait partie du dessin ;
   - rail et remplissage en pilule : sur un rail arrondi, un pied carre
     depasserait du coin ;
   - min-width, pour qu une valeur tres faible reste un objet visible et non
     un filet. Le chiffre exact est toujours ecrit a cote, la barre situe. */
/* display:block n est pas decoratif : site.css definit deja un .split et un
   .funnel pour la page d accueil, tous deux en display:grid. Ils fuyaient sur
   nos cartes, qui heritaient de leurs colonnes et de leur gap. Le selecteur
   double .dataviz.split passe devant, et la carte redevient un bloc. */
.dataviz{display:block;--barre:22px;--barre-min:10px;--rail:rgba(70,52,35,.075);--rail-r:999px;--fin-r:999px;
  background:var(--creme);border:1px solid var(--hair);border-radius:var(--r-card);padding:clamp(22px,2.2vw,30px);
  box-shadow:0 2px 3px rgba(34,26,18,.04),0 18px 40px -30px rgba(34,26,18,.45)}
/* Le libelle de tete est devenu une phrase, plus une simple mention de
   source : l interlettrage de .label, cale pour deux ou trois mots en
   capitales, y ecarte trop les lettres et fait perdre la ligne. Resserre
   ici seulement — .label est partage par tous les blocs de donnees et par
   plusieurs composants du site, le corriger a la racine deplacerait
   l en-tete du generateur, celui des points-cles et celui du calcul. */
/* Ce libelle dit desormais ce que le bloc montre, plus la source et la
   periode : en capitales monospace espacees, sur deux lignes, la lecture
   ralentit nettement. Il repasse en Hanken Grotesk, casse normale, plus
   petit et plus gras que le corps pour rester un titre. Le monospace reste
   partout ailleurs : bandeau auteur, langage des blocs de code, legendes,
   etiquettes de colonnes de tableau. */
.dataviz .label{display:block;font-family:var(--sans);font-size:15.5px;font-weight:700;letter-spacing:-.005em;text-indent:0;text-transform:none;line-height:1.4;color:var(--brun);max-width:66ch}
.dataviz .dv-note{margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);font-size:13.5px;line-height:1.5;color:var(--gris)}

/* ---- 07. Entonnoir ----
   Etapes successives d une meme population. La barre dit la part
   restante, le chiffre dit la valeur, le taux dit la conversion.

   Le bloc ouvre desormais l article, a la place de l ancienne couverture :
   il doit tenir seul. Trois niveaux d encre plutot qu un seul noir — le
   libelle de tete en brun, les etapes en gris, les valeurs en encre pleine —
   et de la matiere sur le rail comme sur la barre. Le degrade de la barre
   reste dans la meme teinte et n encode rien : c est une valeur, pas une
   couleur. Une teinte qui changerait d une ligne a l autre ferait croire a
   une categorie, elle reste donc interdite. */
.funnel ol{margin:20px 0 0;padding:0;list-style:none;display:grid}
.funnel li{display:grid;grid-template-columns:minmax(120px,1.05fr) minmax(0,3fr) auto;gap:18px;align-items:center;padding-block:14px;border-top:1px solid var(--hair)}
.funnel li:first-child{border-top:0;padding-top:6px}
.funnel .fn-lab{font-size:15.5px;font-weight:600;line-height:1.35;color:var(--gris)}
/* Rail : un creux, pas un aplat. L ombre interne haute et le lisere le
   posent en retrait du fond de la carte. */
.funnel .fn-bar{height:var(--barre);border-radius:var(--rail-r);background:var(--rail);position:relative;
  box-shadow:inset 0 1px 2px rgba(70,52,35,.17),inset 0 0 0 1px rgba(70,52,35,.05)}
.funnel .fn-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v,0) * 1%);min-width:var(--barre-min);border-radius:var(--fin-r);
  background:linear-gradient(180deg,#C2602C 0%,var(--terracotta) 52%,#9C4318 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 1px 2px rgba(34,26,18,.2)}
.funnel .fn-val{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.funnel .fn-val b{font-size:clamp(20px,1.75vw,24px);font-weight:800;letter-spacing:-.03em;color:var(--encre);line-height:1}

/* ---- 08. Repartition ----
   Un tout decoupe en parts. Une seule barre, la legende dessous. */
.split .sp-bar{margin-top:20px;display:flex;gap:2px;height:24px;border-radius:var(--rail-r);background:var(--creme);overflow:hidden}
.split .sp-bar span{width:calc(var(--v,0) * 1%);min-width:var(--barre-min)}
.split .sp-bar span:first-child{border-radius:999px 0 0 999px}
.split .sp-bar span:last-child{border-radius:0 999px 999px 0}
.split .sp-bar span:nth-child(1){background:var(--brun)}
.split .sp-bar span:nth-child(2){background:var(--terracotta)}
.split .sp-bar span:nth-child(3){background:#C98A63}
.split .sp-bar span:nth-child(4){background:var(--saumon)}
.split .sp-bar span:nth-child(5){background:#EBD6C6}
.split ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px}
.split li{display:flex;align-items:baseline;gap:9px;font-size:15.5px;color:var(--gris)}
.split li i{width:10px;height:10px;border-radius:3px;flex:none;transform:translateY(1px)}
.split li:nth-child(1) i{background:var(--brun)}
.split li:nth-child(2) i{background:var(--terracotta)}
.split li:nth-child(3) i{background:#C98A63}
.split li:nth-child(4) i{background:var(--saumon)}
.split li:nth-child(5) i{background:#EBD6C6}
.split li b{font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums}

/* ---- 09. Comparaison ----
   Deux a cinq grandeurs de meme unite, mises en regard.
   La ligne marquee forte porte celle qui compte. */
.compare ol{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:16px}
.compare li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:baseline}
.compare .cp-lab{font-size:16px;font-weight:600;color:var(--encre)}
.compare .cp-val{text-align:right;white-space:nowrap;font-size:clamp(19px,1.7vw,23px);font-weight:800;letter-spacing:-.028em;color:var(--encre);font-variant-numeric:tabular-nums}
.compare .cp-bar{grid-column:1/-1;height:var(--barre);border-radius:var(--rail-r);background:var(--rail);position:relative}
.compare .cp-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v,0) * 1%);min-width:var(--barre-min);border-radius:var(--fin-r);background:var(--saumon)}
.compare li.fort .cp-bar::after{background:var(--terracotta)}
.compare li.fort .cp-val{color:var(--terracotta)}

/* ---- 10. Jauge a seuil ----
   Une mesure, une regle, un repere. Le message est la position
   par rapport au seuil, pas la valeur elle-meme. */
.gauge .gg-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:16px}
.gauge .gg-val{font-size:clamp(36px,3.6vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--terracotta);font-variant-numeric:tabular-nums}
.gauge .gg-of{font-size:16.5px;color:var(--gris)}
.gauge .gg-track{margin-top:26px;height:var(--barre);border-radius:var(--rail-r);background:var(--rail);position:relative}
.gauge .gg-track::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v,0) * 1%);min-width:var(--barre-min);border-radius:var(--fin-r);background:var(--terracotta)}
.gauge .gg-seuil{position:absolute;top:-9px;bottom:-9px;left:calc(var(--s,100) * 1%);width:2px;background:var(--brun);z-index:1}
.gauge .gg-seuil::after{content:attr(data-l);position:absolute;top:-22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brun)}
.gauge .gg-foot{margin-top:12px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}

/* ---- 11. Frise de sequence ----
   Des jalons dans le temps. Horizontale au large, verticale
   en dessous de 700 pixels, sans rien perdre. */
.timeline ol{margin:26px 0 0;padding:0;list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;position:relative}
.timeline ol::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--hair)}
.timeline li{position:relative;padding-top:30px;padding-right:16px}
.timeline li::before{content:"";position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;background:var(--creme);border:2px solid var(--terracotta)}
.timeline li.pale::before{border-color:var(--saumon)}
.timeline .tl-when{display:block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--terracotta)}
.timeline .tl-what{display:block;margin-top:7px;font-size:16px;font-weight:600;line-height:1.35;color:var(--encre)}
.timeline .tl-more{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--gris)}

@media (max-width:700px){
  .timeline ol{grid-auto-flow:row;grid-auto-columns:auto;gap:22px}
  .timeline ol::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .timeline li{padding-top:0;padding-left:32px;padding-right:0}
  .timeline li::before{top:2px}
  .funnel li{grid-template-columns:minmax(90px,1fr) minmax(0,2fr) auto;gap:10px}
  .funnel .fn-lab{font-size:14.5px}
}


/* ============================================================
   TABLEAUX DE DONNEES
   Le principe vient du tableau de bord de reporting : alignement
   a gauche par defaut, seules les colonnes chiffrees ferrees a
   droite, insecables et en chasse tabulaire. Une colonne de prose
   alignee a droite est illisible.

   Le conteneur .tbl est lui-meme la zone de defilement : arrondi,
   ombre et bord vivent sur l element qui porte overflow-x:auto.
   Un overflow:hidden pose en plus rognerait la barre de defilement
   et empecherait le geste sur telephone ; l arrondi d une boite qui
   defile suffit a clipper l en-tete colore.
   ============================================================ */

.prose .tbl{padding:0;background:var(--creme);border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:0 1px 2px rgba(34,26,18,.05),0 4px 10px -6px rgba(34,26,18,.16),0 26px 50px -30px rgba(34,26,18,.45);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.prose .tbl table{width:100%;font-size:16px}
.prose .tbl th,.prose .tbl td{padding:13px 16px;text-align:left;vertical-align:baseline}
.prose .tbl th+th,.prose .tbl td+td{text-align:left}
.prose .tbl tbody td:first-child{font-weight:600;color:var(--encre);min-width:190px;line-height:1.4}

/* En-tete : un fond chaud plutot qu un simple filet. Le filet reste,
   plus marque, pour tenir la separation quand le tableau defile. */
.prose .tbl thead th{background:var(--creme-chaud);font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);padding-block:14px;border-bottom:1px solid rgba(34,26,18,.22);white-space:nowrap}

/* Colonne de libelles detachee des colonnes suivantes : un filet
   vertical et un ecart franc, sur toute la hauteur du tableau. */
.prose .tbl tr>:first-child{border-right:1px solid var(--hair);padding-right:22px}
.prose .tbl tr>:first-child+*{padding-left:22px}

/* Alternance discrete, puis survol qui passe devant. */
.prose .tbl tbody tr:nth-child(even) td{background:rgba(70,52,35,.035)}
.prose .tbl tbody tr:hover td{background:rgba(180,80,31,.07)}

.prose .tbl th.n,.prose .tbl td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.prose .tbl tbody td.n{color:var(--encre);font-weight:600}
.prose .tbl td small{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--gris);letter-spacing:0}
.prose .tbl tbody tr+tr td{border-top:1px solid var(--hair)}
.prose .tbl tbody td{border-bottom:0}
.prose .tbl caption{caption-side:bottom;padding:14px 16px 16px;font-size:13.5px;line-height:1.5;color:var(--gris);text-align:left;border-top:1px solid var(--hair)}
.prose .tbl tbody tr.total td{border-top:1px solid var(--encre);font-weight:700;color:var(--encre);background:transparent}
/* Cellule vide, marquee par le gabarit : un tiret qui ne se lit ni comme une
   valeur ni comme une erreur. Pose en dernier, et sur tr td, pour passer
   devant la ligne de total qui reprend la couleur et la graisse pleines.
   Sans JavaScript le tiret s affiche en clair, le tableau reste juste. */
.prose .tbl tbody tr td[data-vide]{color:rgba(34,26,18,.34);font-weight:400}

@media (max-width:640px){
  .prose .tbl table{font-size:15px}
  .prose .tbl th,.prose .tbl td{padding:11px 12px}
  .prose .tbl tr>:first-child{padding-right:16px}
  .prose .tbl tr>:first-child+*{padding-left:16px}
  .prose .tbl tbody td:first-child{min-width:150px}
}

/* ============================================================
   CAPTURE ET CODE
   Deux blocs poses par le workflow, pas par le redacteur.
   ============================================================ */

/* ---- 12. Capture d ecran ----
   <figure class="illus"><img ...></figure>
   La regle ne presume rien du format : ni hauteur, ni aspect-ratio.
   Une capture d ecran de telephone en portrait et une capture de
   tableau de bord en paysage passent par la meme regle. */
.illus{margin-block:clamp(30px,3.2vw,44px);background:var(--creme);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;box-shadow:0 2px 3px rgba(34,26,18,.04),0 20px 44px -30px rgba(34,26,18,.45)}
.illus img{display:block;width:100%;height:auto}
.illus figcaption{padding:14px clamp(16px,1.6vw,22px) 16px;border-top:1px solid var(--hair);font-size:15.5px;line-height:1.5;color:var(--gris)}

/* ---- 13. Bloc de code ----
   <figure class="code"><figcaption><span class="lang">JSON</span>
   <button class="copie" type="button">Copier</button></figcaption>
   <pre><code>...</code></pre></figure>

   Aucune coloration syntaxique, aucune librairie : le fond sombre et la
   chasse fixe suffisent a distinguer le code de la prose. Le pre defile
   horizontalement, une ligne longue ne revient jamais a la ligne, sinon
   une commande copiee-collee est fausse. Le comportement du bouton vit
   dans templates/article-shell.html, jamais dans le corps d un article. */
.code{margin-block:clamp(30px,3.2vw,44px);background:var(--encre);border-radius:var(--r-card);overflow:hidden;box-shadow:0 3px 5px rgba(34,26,18,.12),0 24px 50px -32px rgba(34,26,18,.75)}
.code figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 9px 7px clamp(16px,1.6vw,22px);background:rgba(251,248,240,.07);border-bottom:1px solid var(--hair-dark)}
.code .lang{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#EFD3C1;text-indent:.14em}
.code .copie{flex:none;display:inline-flex;align-items:center;min-height:30px;padding:0 12px;background:transparent;border:1px solid rgba(251,248,240,.24);border-radius:9px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,248,240,.74);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.code .copie:hover{background:rgba(251,248,240,.13);border-color:rgba(251,248,240,.45);color:var(--creme)}
.code .copie:focus-visible{outline:2px solid var(--saumon);outline-offset:2px}
.code .copie[data-copie]{border-color:var(--saumon);color:var(--saumon)}
/* Plus de defilement lateral : on perd le debut de la ligne, et sur un
   article on parcourt le code du regard plutot qu on ne le copie. */
.code pre{margin:0;padding:clamp(18px,1.8vw,24px) clamp(16px,1.6vw,22px);overflow-x:visible}
.code code{display:block;font-family:var(--mono);font-size:13px;font-weight:400;line-height:1.65;color:rgba(251,248,240,.92);white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;-webkit-font-smoothing:antialiased}

@media (max-width:640px){
  .code code{font-size:12.5px}
}


/* ============================================================
   APPEL A L ACTION VERS LE SIMULATEUR
   Transposition de la bande .sim-band de la page d accueil.
   La page d accueil ecrit ce bloc en styles en ligne, appuyes sur
   les classes utilitaires de son propre <style> : un article ne
   charge ni l un ni l autre. Les valeurs sont donc reprises ici,
   une a une, pour un rendu identique a partir d un markup court.
   Deux variantes du meme objet : la version pleine ferme l article,
   la version .sim-cta--court se place au premier tiers.
   ============================================================ */

.sim-cta{background:#fff;border:1px solid rgba(34,26,18,.10);border-radius:22px;overflow:hidden;box-shadow:0 1px 2px rgba(34,26,18,.05),0 8px 20px -12px rgba(34,26,18,.14),0 28px 56px -28px rgba(34,26,18,.22)}
.sim-cta-grid{display:grid;grid-template-columns:1.15fr 1px .85fr;align-items:center}
.sim-cta-txt{padding:clamp(26px,2.6vw,34px);display:flex;flex-direction:column;gap:20px}
.sim-cta-txt>div+div{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sim-cta p.sim-cta-titre{font-family:var(--sans);font-size:clamp(23px,2.3vw,32px);font-weight:800;letter-spacing:-.022em;line-height:1.1;color:var(--encre);text-wrap:balance}
.sim-cta .eyebrow{display:block;margin-bottom:10px;line-height:1.6}

/* Ligne de sources : le libelle, puis un filet qui prend la place restante. */
.sim-cta p.sim-cta-src{display:flex;align-items:center;gap:14px;width:100%;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#8A6A4E;text-indent:.14em;line-height:1.6;white-space:nowrap}
.sim-cta p.sim-cta-src::after{content:"";flex:1;height:1px;background:rgba(34,26,18,.10)}

.sim-cta-chips{display:flex;flex-wrap:wrap;gap:8px}
.sim-cta-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--creme);border:1px solid rgba(34,26,18,.10);border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:-.005em;color:var(--brun)}
.sim-cta-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brique-clair);flex:none}

.sim-cta-sep{background:rgba(34,26,18,.10);align-self:stretch}

.sim-cta-act{padding:clamp(26px,2.6vw,34px);display:flex;flex-direction:column;gap:16px}
.sim-cta-btn{display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:17px 24px;background:var(--terracotta);color:var(--creme);font-size:17px;font-weight:700;letter-spacing:-.012em;border-radius:16px;text-align:center;box-shadow:0 1px 1px rgba(34,26,18,.08),0 12px 24px -14px rgba(180,80,31,.55);transition:background .25s ease}
.sim-cta-btn:hover{background:#983E13;color:var(--creme)}

/* Les filets entre chiffres sont des bordures, pas des colonnes vides :
   trois divs suffisent la ou la page d accueil ecrit cinq elements. */
.sim-cta-stats{display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;background:#F7F1E5;border:1px solid rgba(34,26,18,.07);border-radius:16px;padding:18px 0;align-items:stretch}
.sim-cta-stats div{position:relative;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:flex-start;text-align:center;padding:0 10px}
.sim-cta-stats div:nth-child(2){grid-column:3}
.sim-cta-stats div:nth-child(3){grid-column:5}
.sim-cta-stats div+div::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:1px;background:rgba(34,26,18,.10)}
.sim-cta-stats b{font-size:clamp(24px,2.3vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--terracotta);font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-cta-stats span{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:#8A6A4E;line-height:1.3;text-indent:.11em}

/* Rail des outils, decoratif : un point court le long du cable et
   allume chaque brique au passage. Neutralise plus bas au repos. */
.sim-cta-rail{background:linear-gradient(160deg,#4E3A27 0%,#3E2E1F 100%);padding:24px}
.sim-cta-rail>div{position:relative;height:42px}
.sim-cta-rail>div::before{content:"";position:absolute;left:23px;right:23px;top:50%;height:1px;background:linear-gradient(90deg,rgba(251,248,240,.06) 0%,rgba(251,248,240,.26) 50%,rgba(251,248,240,.06) 100%)}
.sim-cta-rail>div::after{content:"";position:absolute;top:50%;margin-top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--brique-clair);box-shadow:0 0 10px rgba(220,116,47,.9);animation:simCtaPoint 8s linear infinite;pointer-events:none}
.sim-cta-rail ul{position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;height:100%;margin:0;padding:0;list-style:none}
.sim-cta-rail li{flex:1 1 0;min-width:0;max-width:42px;aspect-ratio:1;border-radius:12px;background:var(--creme);display:flex;align-items:center;justify-content:center;animation:simCtaBrique 8s linear infinite}
.sim-cta-rail li:nth-child(2){animation-delay:1s}
.sim-cta-rail li:nth-child(3){animation-delay:2s}
.sim-cta-rail li:nth-child(4){animation-delay:3s}
.sim-cta-rail li:nth-child(5){animation-delay:4s}
.sim-cta-rail li:nth-child(6){animation-delay:5s}
.sim-cta-rail li:nth-child(7){animation-delay:6s}
.sim-cta-rail li:nth-child(8){animation-delay:7s}
.sim-cta-rail img{display:block;width:55%;height:55%;object-fit:contain}
@keyframes simCtaPoint{0%{left:23px}100%{left:calc(100% - 23px)}}
@keyframes simCtaBrique{0%,100%{box-shadow:0 0 0 0 rgba(220,116,47,0)}4%{box-shadow:0 0 0 0 rgba(220,116,47,.55)}12%{box-shadow:0 0 0 9px rgba(220,116,47,0)}}

/* Variante courte, au premier tiers de l article : meme carte, meme
   bouton, sans les chiffres ni le rail, et un titre d un cran plus bas. */
.sim-cta--court .sim-cta-txt{padding:clamp(22px,2.2vw,28px);gap:16px}
.sim-cta--court .sim-cta-act{padding:clamp(22px,2.2vw,28px)}
.sim-cta--court p.sim-cta-titre{font-size:clamp(20px,1.9vw,26px)}
.sim-cta--court .sim-cta-grid{grid-template-columns:1.25fr 1px .75fr}

/* Le pliage vient de la page d accueil : sous 900 px les deux colonnes
   s empilent, le filet vertical disparait et les libelles longs tombent. */
@media (max-width:900px){
  .sim-cta-grid{grid-template-columns:minmax(0,1fr)}
  .sim-cta--court .sim-cta-grid{grid-template-columns:minmax(0,1fr)}
  .sim-cta-sep{display:none}
  .sim-cta-sm{display:none}
  .sim-cta-chip{font-size:12px;padding:6px 10px}
}
@media (max-width:340px){
  .sim-cta-chip{font-size:11px;padding:5px 9px}
}


/* ============================================================
   QUESTIONS FREQUENTES
   Le gabarit injecte <details class="q"> dans section.faq. Les
   anciens articles y posent un <details> nu : les regles visent
   donc .faq details, ce qui couvre les deux.
   L ouverture est animee depuis templates/article-shell.html :
   height:auto n est pas interpolable et le markup impose ne laisse
   aucun conteneur interne a plier en grid-template-rows. Sans
   JavaScript le depliage reste celui du navigateur, instantane
   mais complet.
   ============================================================ */

.faq details{border-bottom:1px solid var(--hair)}
.faq details>summary{display:flex;align-items:center;gap:18px;min-height:68px;padding:16px 14px;margin-inline:-14px;border-radius:12px;cursor:pointer;font-size:clamp(17.5px,1.25vw,20px);font-weight:700;letter-spacing:-.012em;line-height:1.35;list-style:none;transition:background .2s ease,color .2s ease}
.faq details>summary::-webkit-details-marker{display:none}
.faq details>summary::marker{content:""}
.faq details>summary:hover{background:rgba(180,80,31,.055);color:var(--terracotta)}
.faq details>summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px;background:rgba(180,80,31,.055)}

/* Chevron maison, deux bords d un carre vide. Pointe vers le bas au
   repos, pivote d un demi-tour a l ouverture. */
.faq details>summary::after{content:"";flex:none;margin-left:auto;width:11px;height:11px;border-right:2px solid var(--terracotta);border-bottom:2px solid var(--terracotta);border-radius:0 0 2px 0;transform:translateY(-3px) rotate(45deg);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.faq details[open]>summary::after{content:"";transform:translateY(2px) rotate(-135deg)}
/* Repli en cours : le details reste ouvert le temps de l animation,
   l attribut pose par le gabarit fait redescendre le chevron des le clic. */
.faq details[open][data-ferme]>summary::after{transform:translateY(-3px) rotate(45deg)}

.faq details>p{padding:0 0 24px;font-size:17px;line-height:1.62;color:var(--gris);max-width:66ch}

@media (prefers-reduced-motion:reduce){
  .faq details>summary,
  .faq details>summary::after,
  .sim-cta-btn{transition:none}
  .sim-cta-rail>div::after,
  .sim-cta-rail li{animation:none}
  .sim-cta-rail>div::after{left:23px}
}