/* ==================================================================
   GUIDES — le gabarit commun des pages /guides (12/10/2026)
   Direction « continuité de l'accueil » : même crème, même encre, même
   orange, même Figtree, même grammaire de titres (numéro entre deux filets,
   ligne légère puis ligne grasse finie en orange, chapô dont la partie qui
   porte l'info est en gras encre). Photo posée comme un cliché + une pièce
   de verre dépoli. Aucune animation : un guide se lit de haut en bas.

   Mise en page : l'en-tête est opaque (rien ne se voit à travers) ; sur
   ordinateur (≥ 1280 px) le sommaire est collé à gauche et suit la lecture
   (guides.js), avec une colonne vide de même largeur à droite : le texte
   reste centré sur l'axe de la page, comme le haut de page. En dessous,
   le sommaire est une carte et le texte prend toute la largeur.
   Deux largeurs seulement : --g-large (les cartes) et --g-etroit (le texte
   suivi, les titres). Les grilles du contenu se règlent sur la largeur de
   la colonne de texte (requêtes de conteneur), pas sur celle de l'écran.
   ================================================================== */
:root {
  --g-fond: #FDF8F3;
  --g-carte: #FFFFFF;
  --g-encre: #1A1614;
  --g-texte: #3A3532;
  --g-chapo: #4D4843;
  --g-gris: #5F5B57;
  --g-gris-2: #6F6862;      /* 5:1 sur la crème */
  --g-trait: #F1E9E2;
  --g-filet: #E9DED4;
  --g-orange: #FF5A00;
  --g-orange-2: #FF6A1A;
  --g-orange-x: #BE4400;    /* petit texte orange : 5,2:1 sur la crème */
  --g-orange-f: #C94E00;    /* fond de bouton, blanc dessus : 4,6:1 (comme l'accueil) */
  --g-orange-doux: #FDEBDD;
  --g-orange-pale: #FFF6EF;
  --g-ombre-carte: 0 0 0 1px rgba(240, 223, 205, .6), 0 26px 50px -30px rgba(120, 60, 20, .28);
  --g-ombre-douce: 0 0 0 1px rgba(240, 223, 205, .55), 0 14px 30px -22px rgba(120, 60, 20, .3);
  --g-ombre-photo: 0 1px 1px rgba(60, 30, 10, .06), 0 6px 12px -4px rgba(60, 30, 10, .10), 0 22px 40px -18px rgba(60, 30, 10, .30);
  --g-barre-h: 78px;
  --g-gout: 32px;
  --g-large: 940px;         /* les cartes */
  --g-etroit: 760px;        /* le texte suivi, les titres */
  --g-som: 184px;           /* le sommaire collé (et la colonne vide en face) */
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--g-barre-h) + 24px); }
body {
  margin: 0; background: var(--g-fond); color: var(--g-texte);
  font: 400 17px/1.6 "Figtree", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--g-orange-x); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--g-encre); }
:focus-visible { outline: 3px solid var(--g-encre); outline-offset: 3px; border-radius: 6px; }
strong { color: var(--g-encre); font-weight: 700; }
p, li, dd, figcaption { text-wrap: pretty; }
.nw { white-space: nowrap; }
/* .g-nw-ordi : groupe insécable sur ordinateur et tablette seulement (trop long pour un téléphone) */
sup { position: relative; top: -.5em; font-size: .62em; line-height: 0; vertical-align: baseline; }
.g-cadre { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--g-gout); }

/* lien d'évitement, visible seulement au clavier */
.g-saut { position: absolute; left: 12px; top: -80px; z-index: 60; padding: 10px 16px; border-radius: 10px; background: var(--g-encre); color: #fff; font-weight: 600; text-decoration: none; }
.g-saut:focus { top: 12px; color: #fff; }

/* ==================================================================
   L'EN-TÊTE — l'île de l'accueil, posée sur une bande opaque
   ================================================================== */
.g-barre { position: sticky; top: 0; z-index: 50; height: var(--g-barre-h); padding: 11px var(--g-gout) 0; background: var(--g-fond); }
.g-barre::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--g-filet); opacity: 0; transition: opacity .2s; }
.g-barre[data-defile]::after { opacity: 1; }
.g-barre__ile {
  width: min(100%, 800px); height: 56px; margin: 0 auto; padding: 0 6px 0 22px;
  display: flex; align-items: center; gap: 22px; border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(240, 223, 205, .7), 0 14px 32px -22px rgba(96, 46, 12, .32), 0 2px 8px -4px rgba(96, 46, 12, .12);
}
.g-barre__marque { flex: none; }
.g-barre__marque img { height: 21px; width: auto; }
.g-barre__liens { margin-left: auto; display: flex; gap: 26px; }
.g-barre__liens a { position: relative; font-size: 15px; font-weight: 500; color: var(--g-gris); text-decoration: none; }
.g-barre__liens a:hover { color: var(--g-encre); }
.g-barre__liens a[aria-current] { color: var(--g-orange-x); }
.g-barre__liens a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--g-orange); }
.g-barre__cta {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 20px; border-radius: 999px;
  background: var(--g-orange-f); color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.g-barre__cta:hover { background: #B34500; color: #FFFFFF; }
.g-barre__cta svg { width: 15px; height: 15px; }

/* ==================================================================
   LE SYSTÈME DE TITRES DE L'ACCUEIL
   ================================================================== */
.g-entete { max-width: var(--g-etroit); margin: 0 auto clamp(32px, 3.6vw, 48px); text-align: center; }
.g-num {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 18px;
  font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--g-orange-2);
}
.g-num::before, .g-num::after { content: ""; width: 64px; height: 1px; background: var(--g-filet); }
.g-titre { margin: 0; font-size: clamp(30px, 2.9vw, 44px); line-height: 1.07; letter-spacing: -.03em; color: var(--g-encre); }
.g-titre > span, .g-titre > strong { display: block; text-wrap: balance; }
.g-titre > span { font-weight: 300; letter-spacing: -.02em; }
.g-titre > strong { font-weight: 800; color: inherit; }
.g-titre em { font-style: normal; color: var(--g-orange); }
.g-titre--h1 { font-size: clamp(34px, 3.8vw, 56px); line-height: 1.06; }
.g-entete .g-titre { scroll-margin-top: 56px; }  /* + scroll-padding de html : le numéro reste visible */
.g-chapo {
  max-width: 34em; margin: clamp(14px, 1.4vw, 20px) auto 0;
  font-size: clamp(17.5px, 1.45vw, 21px); line-height: 1.45; letter-spacing: -.005em; color: var(--g-chapo); text-wrap: balance;
}
.g-chapo .g-ligne { display: block; font-weight: 700; color: var(--g-encre); }
.g-note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--g-gris); }
.g-carte { background: var(--g-carte); border-radius: 26px; padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--g-ombre-carte); }
.g-etiquette { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--g-orange-x); }

/* ==================================================================
   LE HAUT DE PAGE
   ================================================================== */
.g-ouverture {
  position: relative; overflow-x: clip; padding: clamp(28px, 3.2vw, 44px) 0 0; text-align: center;
  background: radial-gradient(ellipse 58% 48% at 70% 72%, rgba(255, 214, 170, .30), rgba(255, 214, 170, 0) 70%);
}
.g-ariane { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 0 0 26px; font-size: 13.5px; color: var(--g-gris-2); }
.g-ariane a { color: var(--g-gris-2); text-decoration: none; }
.g-ariane a:hover { color: var(--g-encre); text-decoration: underline; }
.g-sur { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 15.5px; font-weight: 500; color: var(--g-orange-x); }
.g-sur svg { width: 16px; height: 16px; flex: none; }
.g-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 20px 0 0; font-size: 14px; color: var(--g-gris); }
.g-meta > span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: #D9CEC4; vertical-align: middle; }
.g-meta a { color: inherit; }

/* l'essentiel puis la photo ; côte à côte, à la même hauteur, dès 900 px */
.g-une { display: grid; gap: 26px; max-width: 1080px; margin: clamp(32px, 3.4vw, 46px) auto 0; text-align: left; }
.g-essentiel { padding: 24px 28px 20px; border-radius: 28px; background: var(--g-carte); box-shadow: var(--g-ombre-carte); }
.g-essentiel__titre { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--g-orange-x); }
.g-essentiel__titre svg { width: 17px; height: 17px; flex: none; }
.g-tuiles { margin: 0; padding: 0; list-style: none; }
.g-tuile { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 20px; padding: 15px 0; }
.g-tuile + .g-tuile { border-top: 1px solid var(--g-trait); }
.g-tuile__etiquette { grid-row: 1 / span 2; margin: 0; padding-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--g-gris); }
.g-tuile__cle { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--g-encre); }
.g-tuile__txt { margin: 3px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--g-texte); }
.g-sans-lien { margin: 6px 0 0; padding-top: 13px; border-top: 1px solid var(--g-trait); font-size: 13px; line-height: 1.45; color: var(--g-gris-2); }

/* ---------- la photo : un cliché + une pièce de verre DANS son cadre ---------- */
.g-scene { position: relative; margin: 0; container-type: inline-size; }
.g-cliche { position: absolute; inset: 0; overflow: hidden; border: 6px solid #FFFFFF; border-radius: 20px; background: #FFFFFF; box-shadow: var(--g-ombre-photo); }
.g-cliche > img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.g-verre {
  background: rgba(255, 251, 247, .8);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 28px -14px rgba(60, 30, 10, .4);
}
.g-notif {
  position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px);
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 11px 16px 11px 11px; border-radius: 16px; text-align: left;
}
.g-notif__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(160deg, #FF8A3D, #FF5A00); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.g-notif__ico svg { width: 18px; height: 18px; }
.g-notif__txt { min-width: 0; }
.g-notif__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.g-notif__titre { font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; color: var(--g-encre); }
.g-notif__corps { margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--g-texte); }
.g-etat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.g-etat svg { width: 13px; height: 13px; flex: none; }
.g-etat--attente { background: #FFE6D4; color: #A93D00; }
.g-etat--fait { background: var(--g-orange-f); color: #FFFFFF; }

.g-scene--une { height: clamp(160px, 34vw, 260px); width: min(100%, 560px); margin: 0 auto; }
.g-scene--une .g-cliche { transform: rotate(1.5deg); }
.g-scene--une .g-cliche > img { object-position: 60% 42%; }

/* ==================================================================
   LE CORPS — sommaire + colonne de texte
   ================================================================== */
.g-corps { max-width: calc(var(--g-large) + 2 * var(--g-gout)); margin: 0 auto; padding: clamp(40px, 6vw, 96px) var(--g-gout) 0; }
.g-contenu { min-width: 0; container-type: inline-size; }

/* le sommaire : une carte en haut (téléphone, tablette), collé à gauche sur ordinateur */
.g-sommaire { padding: 14px 8px 8px; border-radius: 22px; background: var(--g-carte); box-shadow: var(--g-ombre-douce); }
.g-sommaire__titre { margin: 0; padding: 0 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--g-gris-2); }
.g-sommaire ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.g-sommaire li { border-top: 1px solid var(--g-trait); }
.g-sommaire a { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; gap: 2px; padding: 11px 12px; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--g-encre); text-decoration: none; }
.g-sommaire a span { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--g-orange-x); font-variant-numeric: tabular-nums; }
.g-sommaire a:hover { color: var(--g-orange-x); }
.g-sommaire + .g-contenu { margin-top: 64px; }

/* ---------- sections ---------- */
.g-sec { padding-top: clamp(80px, 9vw, 120px); }
.g-contenu > .g-sec:first-child { padding-top: 0; }

/* ---------- 01 · l'outil ---------- */
.g-duo { display: grid; gap: 20px; align-items: start; }
.g-pile { display: flex; flex-direction: column; }
.g-pile > .g-note { margin-top: auto; padding-top: 16px; }
.g-lead { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--g-gris); }
.g-gestes { margin: 0; padding: 0; list-style: none; }
.g-gestes li { display: flex; align-items: center; gap: 14px; padding: 7px 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--g-encre); }
.g-gestes li + li { border-top: 1px solid var(--g-trait); }
.g-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--g-orange-doux); color: var(--g-orange-2); }
.g-ico svg { width: 19px; height: 19px; }
.g-pile h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--g-encre); text-wrap: balance; }
.g-chiffre { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 4px; line-height: 1; }
.g-chiffre b { font-size: clamp(68px, 6.4vw, 88px); font-weight: 800; letter-spacing: -.05em; color: var(--g-orange); }
.g-chiffre span { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--g-encre); }
.g-pile .g-texte-carte { margin: 8px 0 0; font-size: 16px; line-height: 1.55; }

/* ---------- 02 · la frise (verticale par défaut) ---------- */
.g-frise { position: relative; display: grid; gap: 14px; margin: 0; padding: 0 0 0 60px; list-style: none; }
.g-frise__pas { position: relative; }
.g-frise__pas:not(:last-child)::after { content: ""; position: absolute; left: -39px; top: 42px; width: 2px; height: calc(100% + 14px); background: linear-gradient(180deg, #FFCDAE, var(--g-orange-2)); }
.g-frise__point {
  position: absolute; z-index: 1; left: -60px; top: 20px;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--g-orange-2); font-size: 15px; font-weight: 800;
  box-shadow: 0 0 0 5px var(--g-fond), 0 0 0 6px #FCE3D2, 0 8px 18px -8px rgba(255, 106, 26, .45);
}
.g-frise__pas--cle .g-frise__point { background: var(--g-orange); color: #fff; box-shadow: 0 0 0 5px var(--g-fond), 0 0 0 6px #FFC7A6, 0 10px 22px -8px rgba(255, 90, 0, .6); }
.g-frise__pas--cle .g-carte { background: linear-gradient(180deg, #FFF4EB, #FFFFFF 70%); box-shadow: 0 0 0 1.5px #FFC7A6, 0 26px 50px -30px rgba(255, 106, 26, .45); }
.g-frise time { display: block; margin: 6px 0 8px; font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--g-encre); }
.g-frise p:last-child { margin: 0; font-size: 15.5px; line-height: 1.55; }

/* ---------- 02 · ce qu'elle perd / ce qu'elle garde ---------- */
.g-bilan { display: grid; gap: 16px; margin-top: 16px; }
.g-bilan__tete { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; }
.g-bilan__tete h3 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--g-encre); }
.g-bilan p { margin: 0; font-size: 16px; line-height: 1.6; }
.g-bilan .g-avant { margin-top: 14px; font-size: 14.5px; color: var(--g-gris); }
.g-pastille { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; }
.g-pastille svg { width: 19px; height: 19px; }
.g-pastille--non { background: #F4EEE9; color: var(--g-gris); }
.g-pastille--oui { background: var(--g-orange); color: #fff; box-shadow: 0 8px 18px -8px rgba(255, 90, 0, .6); }
.g-puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.g-puces li { padding: 7px 13px; border-radius: 999px; background: #F6F1EC; font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--g-texte); }
.g-bilan__garde { background: linear-gradient(180deg, #FFF6EF, #FFFFFF 80%); }

.g-citation { max-width: var(--g-etroit); margin: clamp(56px, 6vw, 88px) auto 0; text-align: center; }
.g-citation__titre { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--g-orange-x); }
.g-citation blockquote { margin: 0; }
.g-citation blockquote p { margin: 0; font-size: clamp(22px, 2.1vw, 30px); font-weight: 300; line-height: 1.32; letter-spacing: -.02em; color: var(--g-encre); text-wrap: balance; }
.g-citation figcaption { max-width: 40em; margin: 18px auto 0; font-size: 14px; line-height: 1.5; color: var(--g-gris); text-wrap: balance; }
.g-alerte { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; max-width: var(--g-etroit); margin: clamp(36px, 4vw, 52px) auto 0; padding: 20px 24px 20px 20px; border-radius: 20px; background: var(--g-orange-pale); box-shadow: inset 0 0 0 1px #FBDCC7; }
.g-alerte__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--g-orange-2); }
.g-alerte__ico svg { width: 20px; height: 20px; }
.g-alerte p { margin: 0; font-size: 15.5px; line-height: 1.55; }

/* ---------- 03 · êtes-vous concerné ---------- */
.g-cas { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.g-cas__qui { margin: 0 0 14px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--g-encre); }
.g-statut { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.g-statut svg { width: 16px; height: 16px; flex: none; }
.g-statut--neutre { background: #F4EEE9; color: var(--g-texte); }
.g-statut--vise { background: var(--g-orange-f); color: #fff; }
.g-statut--doute { box-shadow: inset 0 0 0 1.5px #D9CEC4; color: var(--g-gris); }
.g-cas__txt { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--g-texte); }
.g-cas .g-note { margin-top: 8px; }
.g-cas__vise { background: linear-gradient(180deg, #FFF4EB, #FFFFFF 65%); box-shadow: 0 0 0 1.5px #FFC7A6, 0 30px 56px -30px rgba(255, 106, 26, .5); }

/* ---------- 04 · les solutions ---------- */
.g-options { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.g-option {
  display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 26px;
  background: #FFFFFF; box-shadow: 0 0 0 1px rgba(240, 223, 205, .6), 0 1px 2px rgba(60, 40, 20, .05), 0 26px 50px -30px rgba(120, 60, 20, .3);
}
.g-option__haut { display: flex; align-items: center; justify-content: space-between; }
.g-option__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #FFF1E6, #FFDCC4); color: var(--g-orange-2); }
.g-option__ico svg { width: 22px; height: 22px; }
.g-option__n { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #F2DCCB; }
.g-option__titre { margin: 16px 0 0; font-weight: 400; }
.g-option__titre b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--g-encre); }
.g-option__titre span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.35; color: var(--g-gris); }
.g-autonomie { margin: 16px 0 0; padding: 13px 15px 14px; border-radius: 16px; background: var(--g-orange-pale); }
.g-autonomie__label, .g-option__infos dt { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7A716A; }
.g-jauge { display: flex; gap: 5px; margin: 9px 0 10px; }
.g-jauge i { flex: 1; height: 6px; border-radius: 3px; background: #F1DFD1; }
.g-jauge--1 i:nth-child(-n+1), .g-jauge--2 i:nth-child(-n+2), .g-jauge--3 i { background: linear-gradient(90deg, #FF8A3D, var(--g-orange)); }
.g-autonomie__txt { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--g-texte); }
.g-autonomie__txt b { color: var(--g-encre); }
.g-option__infos { margin: 6px 0 0; }
.g-option__infos > div { padding: 13px 2px 0; }
.g-option__infos > div + div { margin-top: 13px; border-top: 1px solid var(--g-trait); }
.g-option__infos dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; font-weight: 500; color: var(--g-encre); text-wrap: balance; }
.g-option__lien { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.g-option__lien svg { width: 15px; height: 15px; }

.g-detail { margin-top: clamp(56px, 6vw, 80px); }
.g-detail__titre { display: flex; align-items: baseline; gap: 14px; margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--g-encre); text-wrap: balance; }
.g-detail__titre span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--g-orange-2); font-size: 15px; font-weight: 800; box-shadow: 0 0 0 1px #FCE3D2, 0 6px 14px -6px rgba(255, 106, 26, .45); }

/* les fiches d'entreprises : la source et sa date en badge */
.g-acteurs { display: grid; gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.g-acteur { display: flex; flex-direction: column; padding: 20px 22px; border-radius: 22px; background: var(--g-carte); box-shadow: var(--g-ombre-douce); }
.g-acteur__nom { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--g-encre); }
.g-acteur__nom small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--g-gris); }
.g-acteur__annonce { margin: 10px 0 16px; font-size: 15.5px; line-height: 1.5; color: var(--g-texte); text-wrap: balance; }
.g-source { display: flex; align-items: flex-start; gap: 8px; margin: auto 0 0; padding: 8px 12px 8px 10px; border-radius: 12px; background: #FAF4EE; box-shadow: inset 0 0 0 1px #F1E6DB; font-size: 13px; line-height: 1.45; color: var(--g-gris); }
.g-source svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--g-orange-x); }
.g-source b { font-weight: 700; color: var(--g-encre); }
.g-legende { margin: 14px 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--g-gris); }
.g-paire { display: grid; gap: 16px; margin-top: clamp(40px, 4vw, 56px); }
.g-paire .g-detail__titre { margin-bottom: 14px; }
.g-paire__txt > :first-child { margin-top: 0; }
.g-paire p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.g-paire p:last-child { margin-bottom: 0; }

/* ---------- 05 · avant / maintenant ---------- */
.g-circuit { display: grid; gap: 18px; margin: 0; padding: 20px 18px; }
.g-circuit__voie { display: grid; row-gap: 10px; }
.g-circuit__voie--long { padding-top: 18px; border-top: 1px solid var(--g-trait); }
.g-circuit__quand { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #7A716A; }
.g-circuit__voie--long .g-circuit__quand { color: var(--g-orange-x); }
.g-circuit__chemin { display: flex; flex-direction: column; align-items: flex-start; }
.g-etape { padding: 8px 13px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #F1E2D6, 0 8px 18px -12px rgba(120, 60, 20, .3); font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--g-encre); }
.g-etape--vous { background: var(--g-encre); color: #fff; box-shadow: none; }
.g-etape--plus { background: var(--g-orange-pale); box-shadow: inset 0 0 0 1.5px #FFB98F; color: #8A3200; }
.g-fleche { position: relative; flex: none; width: 2px; height: 16px; margin: 4px 0 4px 20px; background: #FFB98F; }
.g-fleche::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 8px; height: 8px; border-top: 2px solid #FFB98F; border-right: 2px solid #FFB98F; transform: translateX(-50%) rotate(135deg); }
.g-circuit__txt { margin: 0; font-size: 15px; line-height: 1.5; color: var(--g-gris); text-wrap: balance; }
.g-bascule { max-width: var(--g-etroit); margin: clamp(44px, 5vw, 72px) auto 0; text-align: center; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.15; letter-spacing: -.03em; color: var(--g-encre); }
.g-bascule > span, .g-bascule > strong { display: block; text-wrap: balance; }
.g-bascule > span { font-weight: 300; letter-spacing: -.02em; }
.g-bascule > strong { margin-top: .12em; font-weight: 800; }
.g-bascule em { font-style: normal; color: var(--g-orange); }

/* ==================================================================
   L'ENCADRÉ — la seule offre de la page
   ================================================================== */
.g-pont {
  margin-top: clamp(64px, 7vw, 104px); padding: 22px 18px 26px; border-radius: 30px;
  background: linear-gradient(165deg, #FFF2E6 0%, #FFF9F3 55%, #FFFFFF 100%);
  box-shadow: 0 0 0 1px rgba(255, 190, 140, .38), 0 34px 70px -42px rgba(255, 106, 26, .45);
}
.g-pont__grille { display: grid; gap: 26px; align-items: center; }
.g-scene--pont { aspect-ratio: 800 / 640; width: 100%; max-width: 460px; margin: 0 auto; }
.g-scene--pont .g-cliche { transform: rotate(-1.5deg); }
.g-scene--pont .g-cliche > img { object-position: 42% 35%; }
.g-badge { display: inline-block; margin: 0; padding: 6px 16px; border-radius: 999px; background: #FDE3D1; color: #A93D00; font-size: 14px; font-weight: 600; }
.g-pont__texte .g-pont__titre { margin: 18px 0 0; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.07; letter-spacing: -.03em; color: var(--g-encre); }
.g-pont__titre > span, .g-pont__titre > strong { display: block; text-wrap: balance; }
.g-pont__titre > span { font-weight: 300; letter-spacing: -.02em; }
.g-pont__titre > strong { font-weight: 800; }
.g-pont__titre em { font-style: normal; color: var(--g-orange); }
.g-pont__texte p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; }
.g-pont__texte .g-badge { margin: 0; font-size: 14px; line-height: 1.5; }
.g-pont__texte .g-pont__chapo { margin-top: 16px; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.45; color: var(--g-chapo); }
.g-pont__chapo strong { display: block; font-weight: 700; color: var(--g-encre); }
.g-pont__texte .g-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.g-pont__texte .g-pont__source { max-width: 36em; margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--g-gris); }
.g-cta {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px 16px 20px; border-radius: 999px;
  background: var(--g-orange-f); color: #fff; font-size: 16.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgba(210, 80, 0, .55);
}
.g-cta:hover { background: #B34500; color: #fff; }
.g-cta svg { width: 19px; height: 19px; display: block; flex: none; }
.g-lien-fort { font-size: 16px; font-weight: 600; color: var(--g-encre); }

/* ---------- 06 · la fiche à copier ---------- */
.g-fiche { max-width: var(--g-etroit); margin: 0 auto; overflow: hidden; border-radius: 24px; background: var(--g-carte); box-shadow: var(--g-ombre-carte); }
.g-fiche__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 14px 14px 18px; background: #FFF8F2; border-bottom: 1px solid var(--g-trait); }
.g-fiche__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--g-orange-doux); color: var(--g-orange-2); }
.g-fiche__ico svg { width: 20px; height: 20px; }
.g-fiche__titre { flex: 1; margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--g-encre); }
.g-copier {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px 0 15px; border: 0; border-radius: 999px;
  background: var(--g-encre); color: #fff; font: 600 14.5px/1 "Figtree", system-ui, sans-serif; cursor: pointer;
}
.g-copier::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2.5'/%3E%3Cpath d='M16 8V5.5A2.5 2.5 0 0 0 13.5 3h-8A2.5 2.5 0 0 0 3 5.5v8A2.5 2.5 0 0 0 5.5 16H8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2.5'/%3E%3Cpath d='M16 8V5.5A2.5 2.5 0 0 0 13.5 3h-8A2.5 2.5 0 0 0 3 5.5v8A2.5 2.5 0 0 0 5.5 16H8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.g-copier:hover { background: #3A3532; }
.g-copier[data-ok] { background: #1F7A3A; }
/* un champ par ligne réglée ; un champ qui passe à la ligne reste au-dessus de son filet */
.g-fiche__champs { margin: 0; padding: 4px 18px 8px; list-style: none; }
.g-fiche__champs li { padding: 12px 0 11px; font-size: 15.5px; font-weight: 500; line-height: 1.45; color: var(--g-texte); }
.g-fiche__champs li + li { border-top: 1px solid #EFE6DD; }

/* ---------- 07 · les 10 questions ---------- */
.g-questions { display: grid; gap: 12px 16px; margin: 0; padding: 0; list-style: none; counter-reset: q; }
/* le texte et son numéro sont centrés en hauteur : une carte d'une ligne n'a pas de vide */
.g-questions li { counter-increment: q; position: relative; display: flex; align-items: center; min-height: 66px; padding: 13px 18px 13px 66px; border-radius: 20px; background: var(--g-carte); box-shadow: var(--g-ombre-douce); font-size: 15.5px; line-height: 1.5; }
.g-questions li > span { text-wrap: balance; }
.g-questions li::before { content: counter(q, decimal-leading-zero); position: absolute; left: 14px; top: 50%; margin-top: -19px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--g-orange-pale); color: var(--g-orange-x); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px #FCE3D2; }

/* ---------- 08 · questions fréquentes ---------- */
.g-titre--un > strong { font-weight: 800; }
.g-faq { display: grid; gap: 12px; max-width: var(--g-etroit); margin: 0 auto; }
.g-faq details { border-radius: 20px; background: var(--g-carte); box-shadow: var(--g-ombre-douce); }
.g-faq summary { position: relative; padding: 18px 58px 18px 20px; list-style: none; cursor: pointer; border-radius: 20px; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary h3 { display: inline; margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.4; color: var(--g-encre); }
.g-faq summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px;
  border-radius: 50%; background: var(--g-orange-pale); color: var(--g-orange-x); font-size: 21px; font-weight: 500; line-height: 1;
}
.g-faq details[open] summary::after { content: "–"; background: var(--g-orange-f); color: #fff; }
.g-faq details p { margin: 0; padding: 0 20px 20px; font-size: 16px; line-height: 1.6; }

/* ---------- l'appel de fin ---------- */
.g-fin { padding-top: clamp(80px, 9vw, 112px); }
.g-fin__carte {
  max-width: var(--g-etroit); margin: 0 auto; padding: clamp(28px, 4vw, 46px) clamp(20px, 4vw, 46px); border-radius: 30px; text-align: center;
  background: radial-gradient(ellipse 80% 90% at 50% 0%, #FFF1E4 0%, #FFFFFF 70%);
  box-shadow: 0 0 0 1.5px rgba(255, 178, 120, .45), 0 34px 70px -34px rgba(255, 106, 26, .45);
}
.g-fin__txt { margin: 0 0 24px; font-size: clamp(21px, 2vw, 28px); font-weight: 300; line-height: 1.25; letter-spacing: -.02em; color: var(--g-encre); text-wrap: balance; }
.g-fin__txt strong { display: block; margin-bottom: 4px; font-weight: 800; }
.g-fin__txt em { font-style: normal; font-weight: 700; color: var(--g-orange); }

/* ---------- sources ---------- */
.g-sources { padding-top: clamp(64px, 7vw, 96px); }
.g-sources h2 { margin: 0 0 14px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--g-encre); }
.g-sources ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.g-sources li { counter-increment: s; position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--g-trait); font-size: 14px; line-height: 1.55; color: var(--g-gris); overflow-wrap: anywhere; }
.g-sources li::before { content: counter(s); position: absolute; left: 0; top: 12px; font-size: 12.5px; font-weight: 700; color: var(--g-orange-x); font-variant-numeric: tabular-nums; }
.g-mention { margin: 22px 0 0; font-size: 13px; line-height: 1.55; color: var(--g-gris); }

/* ---------- pied ---------- */
.g-pied { margin-top: clamp(64px, 7vw, 96px); padding: 30px 0 40px; border-top: 1px solid #EDE3D8; }
.g-pied__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.g-pied__marque img { height: 22px; width: auto; }
.g-pied__liens { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.g-pied__liens a { font-size: 14px; color: var(--g-gris); text-decoration: none; }
.g-pied__liens a:hover { color: var(--g-encre); text-decoration: underline; }
.g-pied__signature { margin: 0; font-size: 13px; color: var(--g-gris-2); }

/* ==================================================================
   LE SOMMAIRE DES GUIDES (/guides)
   ================================================================== */
.g-ouverture--liste { padding-bottom: 8px; }
.g-ouverture--liste .g-chapo { max-width: 30em; }
.g-rayon { max-width: 960px; margin: clamp(48px, 6vw, 80px) auto 0; }
.g-rayon__titre { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--g-orange-x); }
.g-rayon__titre::after { content: ""; flex: 1; height: 1px; background: var(--g-filet); }
.g-guides { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.g-guide {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 14px 14px 22px; border-radius: 26px;
  background: var(--g-carte); box-shadow: var(--g-ombre-carte); color: inherit; text-decoration: none;
}
.g-guide:hover { color: inherit; box-shadow: 0 0 0 1.5px #FFC7A6, 0 30px 56px -30px rgba(255, 106, 26, .45); }
.g-guide__photo { position: relative; height: 180px; overflow: hidden; border-radius: 18px; }
.g-guide__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 42%; }
.g-guide__corps { padding: 0 8px; }
.g-guide__titre { display: block; margin: 0; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--g-encre); text-wrap: balance; }
.g-guide__txt { display: block; margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--g-texte); text-wrap: balance; }
.g-guide__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 16px 0 0; font-size: 13.5px; color: var(--g-gris); }
.g-guide__lire { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--g-orange-x); }
.g-guide__lire svg { width: 16px; height: 16px; }

/* ==================================================================
   GRILLES DU CONTENU — selon la largeur de la colonne de texte
   ================================================================== */
/* pièce de verre étroite : l'état passe sous le titre (la carte reste à la taille de son texte) */
@container (max-width: 340px) {
  .g-notif__ligne { flex-direction: column; align-items: flex-start; gap: 5px; }
}
@container (max-width: 290px) {
  .g-notif__corps { display: none; }
}
@container (min-width: 540px) {
  .g-acteurs, .g-paire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* les deux cartes partagent la rangée du titre : pastilles et textes alignés */
  @supports (grid-template-rows: subgrid) {
    .g-paire { row-gap: 0; }
    .g-paire > .g-carte { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  }
  .g-pont { padding: 34px 34px 36px; }
  .g-circuit { padding: 26px 30px; gap: 22px; }
  .g-questions li { min-height: 72px; padding: 15px 22px 15px 72px; font-size: 16px; }
  .g-questions li::before { left: 18px; width: 40px; height: 40px; margin-top: -20px; }
  .g-fiche__champs { padding: 6px 26px 10px; }
  .g-fiche__champs li { padding: 13px 0 12px; font-size: 16px; }
  .g-fiche__tete { padding: 16px 16px 16px 22px; }
}
/* le circuit passe en ligne dès qu'il tient (≈ 610 px), l'étiquette à gauche dès 760 px */
@container (min-width: 620px) {
  .g-circuit__chemin { flex-direction: row; align-items: center; }
  .g-etape { padding: 11px 16px; border-radius: 14px; font-size: 15px; white-space: nowrap; }
  .g-fleche { flex: 1; width: auto; min-width: 22px; max-width: 110px; height: 2px; margin: 0 8px 0 6px; }
  .g-fleche::after { left: auto; bottom: auto; right: -1px; top: 50%; transform: translateY(-50%) rotate(45deg); }
}
@container (min-width: 600px) {
  .g-cas > li { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 22px 28px; }
  .g-cas > li > * { grid-column: 2; }
  .g-cas > li > .g-cas__qui { grid-column: 1; grid-row: 1 / span 3; margin: 4px 0 0; }
  .g-cas .g-statut { justify-self: start; }
  .g-cas__txt { margin-top: 10px; }
}
@container (min-width: 720px) {
  .g-pont { padding: 40px 44px; }
  .g-pont__grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; gap: 40px; }
  .g-scene--pont { aspect-ratio: auto; height: 100%; min-height: 440px; max-width: none; margin: 0; }
  .g-scene--pont .g-cliche { inset: 8px 6px; }
  .g-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 760px) {
  .g-circuit__voie { grid-template-columns: 110px minmax(0, 1fr); align-items: center; column-gap: 20px; }
  .g-circuit__txt { grid-column: 2; }
  .g-duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .g-frise { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 18px; padding: 66px 0 0; }
  .g-frise::before { content: ""; position: absolute; top: 22px; left: 16.67%; right: 16.67%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #FFCDAE, var(--g-orange-2)); }
  .g-frise__pas::after { display: none; }
  .g-frise__point { left: 50%; top: -66px; transform: translateX(-50%); }
}
/* les 3 solutions côte à côte dès 680 px (tablette comprise) : la comparaison se lit d'un coup d'œil */
@container (min-width: 680px) {
  .g-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  /* les trois cartes partagent leurs rangées : chaque rubrique tombe à la même hauteur */
  @supports (grid-template-rows: subgrid) {
    .g-option { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
    .g-option__infos { display: contents; }
    .g-option__infos > div:first-child { margin-top: 6px; }
    .g-option__lien { align-self: end; justify-self: start; }
  }
}
@container (min-width: 680px) and (max-width: 880px) {
  .g-option { padding: 20px 16px 18px; border-radius: 22px; }
  .g-option__n { font-size: 34px; }
  .g-option__ico { width: 42px; height: 42px; }
  .g-option__titre b { font-size: 19px; }
  .g-option__titre span { font-size: 14px; }
  .g-autonomie { padding: 12px 13px 13px; }
  .g-autonomie__txt, .g-option__infos dd { font-size: 14.5px; }
}
@container (min-width: 760px) and (max-width: 880px) {
  .g-frise .g-carte { padding: 22px 20px; }
}

/* ==================================================================
   ÉCRANS
   ================================================================== */
@media (min-width: 701px) {
  .g-guide { grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 26px; padding: 14px 26px 14px 14px; }
  .g-guide__photo { height: 100%; min-height: 180px; }
  .g-guide__photo img { position: absolute; inset: 0; }
  .g-guide__corps { padding: 6px 0; }
}
@media (min-width: 900px) {
  .g-une { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; gap: clamp(32px, 4vw, 56px); }
  .g-scene--une { height: auto; min-height: 320px; width: auto; margin: 0; }
  .g-scene--une .g-cliche { inset: 10px 4% 10px 5%; transform: rotate(2deg); }
}
@media (max-width: 899px) {
  .g-meta { flex-direction: column; align-items: center; gap: 0; }
  .g-meta > span + span::before { display: none; }
}
/* le sommaire en carte (4 colonnes) tant que l'écran ne permet pas texte large + sommaire collé */
@media (min-width: 701px) and (max-width: 1279px) {
  .g-sommaire ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g-sommaire li:nth-child(-n+4) { border-top: 0; }
}
@media (min-width: 1280px) {
  .g-corps {
    max-width: none; display: grid; justify-content: center; align-items: start; column-gap: clamp(32px, 3vw, 60px);
    grid-template-columns: var(--g-som) minmax(0, var(--g-large)) var(--g-som);  /* 3e colonne vide : le texte reste sur l'axe de la page */
  }
  .g-sommaire {
    position: sticky; top: calc(var(--g-barre-h) + 30px); max-height: calc(100vh - var(--g-barre-h) - 48px); overflow-y: auto;
    padding: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .g-sommaire__titre { padding: 0 0 12px; }
  .g-sommaire ol { display: block; border-left: 1px solid var(--g-filet); }
  .g-sommaire li { border: 0; }
  .g-sommaire a {
    grid-template-columns: 25px minmax(0, 1fr); margin-left: -1px; padding: 7px 0 7px 13px; border-left: 2px solid transparent;
    font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--g-gris); transition: color .2s, border-color .2s;
  }
  .g-sommaire a:hover { color: var(--g-encre); }
  .g-sommaire a[aria-current] { color: var(--g-encre); border-left-color: var(--g-orange); }
  .g-sommaire + .g-contenu { margin-top: 0; }
}

/* ---------- téléphone ---------- */
@media (max-width: 700px) {
  :root { --g-barre-h: 58px; --g-gout: 18px; }
  body { font-size: 16.5px; }
  .g-barre { padding: 0; }
  .g-barre__ile { width: auto; height: var(--g-barre-h); padding: 0 14px 0 18px; gap: 14px; border-radius: 0; background: transparent; box-shadow: none; }
  .g-barre__marque img { height: 19px; }
  .g-barre__liens a { font-size: 14.5px; }
  .g-barre__liens a[aria-current]::after { display: none; }
  .g-barre__cta { height: 38px; padding: 0 14px 0 15px; font-size: 14px; gap: 6px; }
  .g-barre__cta svg { width: 13px; height: 13px; }

  .g-ouverture { padding-top: 20px; }
  .g-ariane { margin-bottom: 14px; font-size: 12.5px; }
  .g-sur { margin-bottom: 10px; font-size: 14px; }
  .g-titre { font-size: 28px; line-height: 1.09; }
  .g-titre--h1 { font-size: 29px; line-height: 1.08; }
  .g-meta { margin-top: 12px; padding: 0 8px; font-size: 13px; line-height: 1.55; }
  .g-chapo { font-size: 16.5px; line-height: 1.45; max-width: 22em; }
  .g-num { margin-bottom: 12px; font-size: 13px; }
  .g-num::before, .g-num::after { width: 36px; }
  .g-entete { margin-bottom: 28px; }
  .g-sec { padding-top: 72px; }
  .g-carte { border-radius: 22px; padding: 20px 18px; }

  .g-une { margin-top: 22px; gap: 22px; }
  /* tuiles compactes : « Ce qui change · 1er septembre 2026 » sur une ligne, puis le texte */
  .g-essentiel { padding: 16px 16px 14px; border-radius: 22px; }
  .g-tuile { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; padding: 11px 0; }
  .g-tuile__etiquette { padding: 0; font-size: 12.5px; }
  .g-tuile__etiquette::after { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 0 9px; border-radius: 50%; background: #D9CEC4; vertical-align: middle; }
  .g-tuile__cle { font-size: 17px; }
  .g-tuile__txt { flex-basis: 100%; margin-top: 3px; font-size: 15px; line-height: 1.45; }
  .g-sans-lien { margin-top: 3px; padding-top: 11px; font-size: 12.5px; }
  .g-cliche { border-width: 5px; border-radius: 16px; }
  .g-cliche > img { border-radius: 11px; }
  .g-scene--une .g-cliche { inset: 4px 6px; }
  .g-notif { left: 10px; bottom: 10px; max-width: calc(100% - 20px); grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 9px 12px 9px 9px; border-radius: 14px; }
  .g-notif__ico { width: 30px; height: 30px; border-radius: 9px; }
  .g-notif__ico svg { width: 16px; height: 16px; }
  .g-notif__titre { font-size: 13.5px; }
  .g-notif__corps { font-size: 12px; }

  .g-corps { padding-top: 34px; }
  .g-sommaire + .g-contenu { margin-top: 56px; }
  .g-sommaire ol { grid-template-columns: minmax(0, 1fr); }
  .g-sommaire a { padding: 10px; font-size: 14.5px; }
  .g-nw-ordi { white-space: normal; }

  .g-chiffre b { font-size: 68px; }
  .g-frise { padding-left: 54px; gap: 12px; }
  .g-frise__pas:not(:last-child)::after { left: -35px; top: 40px; height: calc(100% + 12px); }
  .g-frise__point { left: -54px; width: 40px; height: 40px; font-size: 14px; }
  .g-frise time { font-size: 21px; margin: 4px 0 6px; }
  .g-frise p:last-child { font-size: 15px; }
  .g-bilan__tete h3 { font-size: 19px; }
  .g-puces li { font-size: 14px; padding: 6px 12px; }
  .g-citation blockquote p { font-size: 22px; line-height: 1.34; }
  .g-alerte { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
  .g-alerte p { font-size: 15px; }
  .g-cas__qui { font-size: 19px; margin-bottom: 12px; }
  .g-option { padding: 20px 18px 18px; border-radius: 22px; }
  .g-option__n { font-size: 34px; }
  .g-option__ico { width: 42px; height: 42px; }
  .g-option__titre { margin-top: 12px; }
  .g-detail__titre { font-size: 20px; gap: 12px; }
  .g-detail__titre span { width: 32px; height: 32px; font-size: 14px; }
  .g-acteur { padding: 18px; border-radius: 20px; }
  .g-bascule { font-size: 24px; max-width: 15em; }

  .g-pont { margin-top: 56px; border-radius: 24px; }
  .g-pont__texte .g-pont__titre { font-size: 28px; }
  .g-pont__texte .g-pont__chapo { font-size: 16.5px; }
  .g-pont__texte p { font-size: 15.5px; }
  .g-pont__texte .g-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .g-actions .g-cta { justify-content: center; }
  .g-actions .g-lien-fort { text-align: center; }

  .g-faq summary { padding: 16px 54px 16px 18px; }
  .g-faq summary h3 { font-size: 16px; }
  .g-faq summary::after { right: 14px; }
  .g-faq details p { padding: 0 18px 18px; font-size: 15.5px; }
  .g-fin__carte { border-radius: 24px; }
  .g-fin__txt { font-size: 21px; }
  .g-cta { font-size: 16px; padding: 15px 22px 15px 20px; }
  .g-pied__in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  .g-titre { font-size: 26px; }
  .g-titre--h1 { font-size: 26px; }
  .g-frise { padding-left: 46px; }
  .g-frise__pas:not(:last-child)::after { left: -29px; top: 36px; }
  .g-frise__point { left: -46px; width: 36px; height: 36px; font-size: 13px; }
  .g-frise .g-carte { padding: 18px 16px; }
  .g-barre__ile { padding: 0 12px 0 16px; gap: 12px; }
  .g-barre__cta svg { display: none; }
  .g-fiche__ico { display: none; }
  .g-tuile__cle { font-size: 16px; }
  .g-tuile__etiquette { font-size: 12px; }
  .g-tuile__etiquette::after { margin: 0 7px 0 8px; }
  .g-fiche__titre { font-size: 16px; }
  .g-fiche__champs { padding-left: 16px; padding-right: 14px; }
}
@media (max-width: 359px) {
  /* trop étroit pour « étiquette · valeur » sur une ligne : l'étiquette passe au-dessus, sans point */
  .g-tuile__etiquette { flex-basis: 100%; padding-bottom: 1px; }
  .g-tuile__etiquette::after { display: none; }
  .g-barre__liens { display: none; }
  .g-barre__cta { margin-left: auto; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .g-barre::after, .g-sommaire a { transition: none; } }