/* Guides (guides/, de/ratgeber/, it/guide/, en/guides/), en plus de style.css : bandeau de titre avec fil d'Ariane,
   article sur une colonne de lecture, sommaire et carte de recherche à côté (au-dessus de 960px), cartes des guides. */

/* Bandeau de titre */
.g-hero{padding-block:clamp(28px,4.5vw,56px) clamp(36px,5vw,60px);background:radial-gradient(70% 90% at 0% 0%,#EEF3F9 0%,transparent 70%),var(--bg);border-bottom:1px solid var(--line)}
.g-hero .wrap{display:grid;gap:18px;justify-items:start}
.g-hero-grille.wrap{grid-template-columns:minmax(0,1fr) 360px;gap:clamp(28px,5vw,72px);align-items:center}
.g-hero-texte{display:grid;gap:18px;justify-items:start;min-width:0}
.g-hero h1{font-size:clamp(2rem,4.6vw,3.3rem);max-width:21ch}
.g-hero .lead{max-width:62ch}
.fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:.88rem;color:var(--muted)}
.fil li{min-width:0}
.fil li+li::before{content:"›";margin-right:8px;color:var(--muted)}
.fil a{color:var(--pine);text-decoration:none;font-weight:500}
.fil a:hover{text-decoration:underline;text-underline-offset:2px}
.fil [aria-current]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(52ch,60vw)}
.g-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:.9rem}
.g-meta>span{display:inline-flex;align-items:center;gap:7px}
.g-meta svg{color:var(--accent);flex:none}
/* « L'essentiel » : trois points à retenir, à droite du titre (sous le chapeau sur téléphone) */
.g-essentiel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 22px 24px;display:grid;gap:14px;box-shadow:0 24px 60px -32px rgba(14,27,42,.35);min-width:0;width:100%}
.g-essentiel .ticks{gap:14px;font-size:.95rem;line-height:1.55}
.g-essentiel strong{font-weight:650}
@media (max-width:960px){.g-hero-grille.wrap{grid-template-columns:1fr}}

/* Article et colonne de côté */
.g-grille{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,6vw,80px);padding-block:clamp(32px,5vw,60px) clamp(56px,7vw,88px);align-items:start}
.g-article{max-width:700px;min-width:0;font-size:1.06rem;line-height:1.72}
.g-article section{scroll-margin-top:88px;padding-block:0}
.g-article section+section{margin-top:clamp(40px,5vw,56px)}
.g-article h2{font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.18;margin-bottom:4px}
.g-article p,.g-article ul,.g-article ol{margin:14px 0 0}
.g-article a{color:var(--pine);text-underline-offset:2px}
.g-article strong{font-weight:650}

/* Listes à puces : un point de couleur */
.g-liste{list-style:none;padding:0}
.g-liste li{position:relative;padding-left:26px;margin-top:10px}
.g-liste li::before{content:"";position:absolute;left:6px;top:.66em;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* Étapes numérotées, reliées par un trait */
.g-etapes{list-style:none;padding:0;counter-reset:etape}
.g-etapes li{counter-increment:etape;position:relative;padding:0 0 22px 52px;margin:0}
.g-etapes li:last-child{padding-bottom:0}
.g-etapes li::before{content:counter(etape);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--pine);color:#fff;font:600 .92rem/34px var(--mono);text-align:center;box-shadow:0 6px 14px -8px rgba(38,47,107,.7)}
.g-etapes li:not(:last-child)::after{content:"";position:absolute;left:16px;top:38px;bottom:4px;width:2px;background:var(--line)}

/* Encadrés : information, ou appel à la recherche (fond bleu nuit, bouton blanc) */
.g-encadre{margin-top:26px;padding:18px 22px;border-radius:14px;background:var(--pine-soft);border-left:4px solid var(--pine)}
.g-encadre p{margin:0}
.g-cta{display:grid;gap:18px;justify-items:start;padding:26px 28px;border:0;color:#fff;background:radial-gradient(120% 140% at 100% 0%,#3A4590 0%,transparent 60%),var(--pine);box-shadow:0 26px 50px -32px rgba(38,47,107,.9)}
.g-cta p{color:rgba(255,255,255,.88)}
.g-cta strong{color:#fff}
.g-cta .btn{background:#fff;color:var(--pine)}
.g-cta .btn:hover{transform:translateY(-1px);background:#F1F3FA}

/* Questions fréquentes et sources */
.g-faq details:first-of-type{margin-top:6px}
.g-faq summary{font-size:1.04rem}
.g-faq details p{margin-top:10px;font-size:1rem}
.g-sources{padding-top:28px;border-top:1px solid var(--line)}
.g-sources h2{font-size:1.15rem}
.g-sources ul{padding-left:1.2em;font-size:.93rem;color:var(--muted)}
.g-sources li{margin-top:6px}
.g-note{margin-top:20px!important;padding:14px 16px;border-radius:10px;background:var(--band);color:var(--muted);font-size:.9rem;line-height:1.6}

/* Colonne de côté : sommaire et carte de recherche, qui suivent la lecture */
.g-aside{position:sticky;top:88px;display:grid;gap:22px}
.g-toc ol{list-style:none;margin:12px 0 0;padding:0;border-left:2px solid var(--line)}
.g-toc li{margin:0}
.g-toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:.92rem;line-height:1.4}
.g-toc a:hover{color:var(--ink);border-left-color:var(--pine)}
.g-carte{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;gap:16px;box-shadow:0 24px 60px -32px rgba(14,27,42,.35)}
.g-carte-t{font:700 1.15rem/1.25 var(--display)}
.g-carte .ticks{font-size:.92rem}
.g-carte .btn{width:100%}

/* Sommaire repliable, à la place de la colonne de côté sur téléphone et tablette */
.g-sommaire-mobile{display:none}
@media (max-width:960px){
  .g-grille{grid-template-columns:1fr}
  .g-aside{display:none}
  .g-sommaire-mobile{display:block;margin-bottom:32px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .g-sommaire-mobile summary{padding:14px 0;font:700 1rem var(--display)}
  .g-sommaire-mobile[open]{padding-bottom:14px}
  .g-sommaire-mobile ol{margin:0;padding-left:1.3em;font-size:.95rem;display:grid;gap:6px}
  .g-sommaire-mobile a{color:var(--pine)}
}

/* Page des guides et « À lire aussi » (les cartes elles-mêmes sont dans style.css, l'accueil les montre aussi) */
.g-voir h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:28px}
.g-hub{padding-block:clamp(40px,6vw,72px)}