/* Le Studio : styles de la page « article ».
   Fichier chargé dans l'ordre fixé par src/layouts/Base.astro : base.css, styles de la page, megamenu.css, ambiance.css. */
/* ==================================================================
   Gabarit d'article (v4, article.py) : la page CMS « Article de blog », la même pour tous les articles.
   Maquette : Figma, « Article de blog (gabarit), 1440 » (45:202). Les styles de cartes et de couvertures viennent de la page Actualités.
================================================================== */

/* Hero : plus court que les autres pages ; le titre en haut, le chapô et la fiche calés en bas */
.ahero{min-block-size:auto}
.ahero__in{display:grid;gap:clamp(56px,9vw,140px);padding:clamp(120px,14vw,190px) calc(var(--gutter) - var(--inset)) calc(var(--gutter) - var(--inset))}
.ahero__top{display:grid;gap:clamp(20px,2.4vw,34px);justify-items:start}
.ahero h1{font-size:var(--fs-h2m);line-height:1;max-inline-size:14em;text-wrap:balance}
.ahero__bottom{display:grid;gap:40px;align-items:end}
.ahero .lead{color:var(--on-night-2);max-inline-size:28em}
.crumb a{color:var(--on-night-2);transition:color var(--d-1) ease}
.crumb [aria-hidden]{color:var(--on-night-2)}
@media (hover:hover) and (pointer:fine){ .crumb a:hover{color:var(--on-night)} }
.fiche > div{display:grid;grid-template-columns:clamp(5.5rem,7.5vw,8.5rem) minmax(0,1fr);align-items:center;gap:16px;min-height:48px;padding-block:8px;border-block-start:1px solid var(--line-night)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.fiche dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;color:var(--on-night-2)}
.fiche dd{font-size:var(--fs-md);letter-spacing:-.015em;font-weight:450}
@media (min-width:1024px){
  .ahero__bottom{grid-template-columns:minmax(0,1fr) minmax(0,512px);column-gap:calc(var(--gutter) * 2)}
}

/* Couverture : le même aplat que sur la page Actualités, en grand */
.acover{margin:var(--inset);aspect-ratio:2/1;border-radius:var(--r-frame)}
.acover .cover__logo{font-size:var(--fs-h2s)}
@media (max-width:767.98px){ .acover{aspect-ratio:4/3} }

/* Corps : sommaire à gauche, texte riche à droite (colonne de lecture d'environ 40 em, élargie le 10 nov. 2026 ; les visuels sur toute la colonne) */
.abody{display:grid;gap:clamp(40px,5vw,64px)}
.toc-art{display:grid;gap:24px;align-content:start;align-self:start}
.toc-art__list{list-style:none;padding:0;margin:0}
.toc-art__list a{display:flex;align-items:baseline;gap:14px;min-height:50px;padding-block:12px;border-block-start:1px solid var(--line);color:var(--ink-2);font-size:var(--fs-base);letter-spacing:-.015em;transition:color var(--d-1) ease}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.toc-art__list .meta{color:inherit}
/* Chapitre en cours de lecture : noir et semi-gras (demande de Jeremy, 10 nov. 2026) */
.toc-art__list a[aria-current="true"]{color:var(--ink)}
.toc-art__list a[aria-current="true"] .toc__name{font-weight:600}
.toc-art__list .toc__name{transition:transform var(--d-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .toc-art__list a:hover{color:var(--ink)} .toc-art__list a:hover .toc__name{transform:translateX(6px)} }
@media (min-width:1024px){
  .abody,.art-faq-sec{grid-template-columns:minmax(0,3.6fr) minmax(0,8.4fr);column-gap:calc(var(--gutter) * .98)}
  .toc-art{position:sticky;top:120px;max-inline-size:437px}
}

/* Texte riche : les styles du champ « Texte riche » du CMS (calques « Texte riche / … » de la maquette) */
.rt{display:grid;gap:clamp(72px,8vw,115px);min-inline-size:0}
.rt__intro,.rt__chap{display:grid;gap:36px;align-content:start}
.rt__intro{gap:20px}
/* Introduction sur fond blanc, comme les citations */
.abody:not(.abody--legal) .rt__intro{padding:clamp(28px,3.4vw,52px);border-radius:var(--r-md);background:var(--white)}
.abody:not(.abody--legal) .rt__intro p{max-inline-size:none;color:var(--ink)}
.rt p,.rt__list{max-inline-size:min(100%,40em);font-size:var(--fs-md);line-height:1.55;letter-spacing:-.01em;text-wrap:pretty}
.rt__intro p{font-size:var(--fs-lg)}
.rt p a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;transition:color var(--d-1) ease}
@media (hover:hover) and (pointer:fine){ .rt p a:hover{color:var(--accent-text)} }
.rt__chap{padding-block-start:37px;border-block-start:1px solid var(--line);scroll-margin-top:110px}
.rt__h2{display:grid;gap:14px;font-size:var(--fs-h2s);font-weight:450;letter-spacing:-.05em;line-height:1;scroll-margin-top:110px}
.rt__h2 .meta{font-size:var(--fs-xs);color:var(--ink-2);letter-spacing:.02em}
.rt__h3{font-size:var(--fs-h3);font-weight:450;letter-spacing:-.04em;line-height:1.1;margin-block-start:20px}
.rt__list{list-style:none;padding:0;margin:0}
.rt__list li{position:relative;padding:14px 0 14px 22px;border-block-start:1px solid var(--line)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.rt__list li::before{content:"";position:absolute;inset-inline-start:0;top:calc(14px + .72em);inline-size:6px;block-size:6px;background:var(--ink)}
.rt__quote{display:grid;gap:28px;padding:37px;border-radius:var(--r-md);background:var(--white)}
.rt__quote blockquote p{max-inline-size:none;font-size:var(--fs-h3l);font-weight:450;letter-spacing:-.04em;line-height:1.12;text-wrap:balance}
.rt__quote figcaption{color:var(--ink-2)}
.rt__fig{display:grid;gap:11px}
.rt__media{border-radius:var(--r-md);overflow:hidden;background:var(--grey);aspect-ratio:874/546}
.rt__media img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 0}
.rt__fig figcaption{color:var(--ink-2)}
.rt__duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rt__duo .rt__media{aspect-ratio:430/330}
@media (max-width:599.98px){ .rt__duo{grid-template-columns:minmax(0,1fr)} }
.rt__keep{display:grid;gap:24px;padding:37px;border-radius:var(--r-md);background:var(--night);color:var(--on-night)}
.rt__keep .meta{color:var(--on-night-2)}
.rt__keep ul{list-style:none;padding:0;margin:0}
.rt__keep li{padding-block:13px;border-block-start:1px solid var(--line-night);font-size:var(--fs-lg);letter-spacing:-.025em;line-height:1.35}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */

/* Partage */
.share{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-block-start:37px;border-block-start:1px solid var(--line)}
.share__links{display:flex;flex-wrap:wrap;gap:8px}

/* À lire ensuite : trois cartes, la couverture au-dessus du texte */
.next__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;padding-block-start:clamp(24px,2.5vw,36px);border-block-start:1px solid var(--line);margin-block-end:clamp(40px,4.6vw,66px)}
.next__head h2{font-size:var(--fs-h2s);letter-spacing:-.05em;line-height:.98}
.next__list{display:grid;gap:clamp(40px,4vw,48px);list-style:none;padding:0;margin:0}
.next .post__link{grid-template-columns:minmax(0,1fr);row-gap:20px}
.next .post__media{aspect-ratio:423/264}
@media (min-width:860px){ .next__list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)} }

@media (prefers-reduced-motion: reduce){ .toc-art__list .toc__name{transition:none} .toc-art__list a:hover .toc__name{transform:none} }

/* Bouton LinkedIn avec son icône (recette du 28 oct.) */
.pill--icone{gap:10px}
.share__ico{inline-size:16px;block-size:16px;flex:none}

/* Pages légales : même grille que l'article (sommaire à gauche), lignes de texte plus larges */
.abody--legal .rt p{max-inline-size:min(100%,52em)}
.abody--legal .rt__h2{font-size:var(--fs-h3l)}


/* FAQ des articles : une section sous l'article, alignée sur ses colonnes (titre à gauche, accordéons à droite),
   avec les mêmes accordéons que les autres FAQ du site (volet au survol : faq.js), 10 nov. 2026 */
.art-faq-sec{display:grid;gap:clamp(28px,3vw,44px);padding-block-start:0;scroll-margin-top:110px}
.art-faq-sec__head{display:grid;gap:16px;align-content:start}
.art-faq-sec h2{font-size:var(--fs-h2s)}
@media (min-width:1024px){ .art-faq-sec__head{position:sticky;top:120px;align-self:start} }
.art-faq{border-block-start:1px solid var(--line)}
.art-faq .q{border-block-end:1px solid var(--line)}
.art-faq .q summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:64px;padding-block:18px;cursor:pointer;list-style:none;font-size:var(--fs-md);letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.art-faq .q[open] summary{font-weight:500}
.art-faq .q summary::-webkit-details-marker{display:none}
.art-faq .q summary svg{flex:none;inline-size:18px;block-size:18px;transition:transform var(--d-1) var(--ease-out)}
.art-faq .q[open] summary svg{transform:rotate(45deg)}
.art-faq .q summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-xs)}
.art-faq .q__r{padding-block-end:24px}
.art-faq .q__r > :first-child{margin-block-start:0}
.art-faq .q__r [data-fade]{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .art-faq .q summary svg{transition:none} }