/*
Theme Name: Formulaire.org
Description: Thème du site Formulaire.org — démarches et formulaires administratifs.
Version: 4.0 — DA V3 « Le champ rempli » (22/09/2026)
*/

/* ==========================================================================
   1. POLICES — self-hostées, zéro requête externe (assets/fonts/*.woff2).
   DA V3 §4 : Funnel Display (titres, chiffres, logo, boutons) + Funnel Sans
   (lecture, nav, libellés). Golos et Brygada sont retirés.
   ========================================================================== */
@font-face{font-family:'Funnel Display';src:url('assets/fonts/FunnelDisplay-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Funnel Display';src:url('assets/fonts/FunnelDisplay-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Funnel Display';src:url('assets/fonts/FunnelDisplay-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Funnel Sans';src:url('assets/fonts/FunnelSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Funnel Sans';src:url('assets/fonts/FunnelSans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Funnel Sans';src:url('assets/fonts/FunnelSans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ==========================================================================
   2. JETONS — DA V3 §3. Palette : la couleur est dans le champ actif, pas
   dans l'encre. Un seul accent (anis), aucun mode sombre (§12).
   ========================================================================== */
:root{
  --papier:#F6F5EE; --champ:#FFFFFF; --encre:#191A14; --encre-2:#55574B; --filet:#D6D6C6;
  --anis:#C6F03C; --anis-pale:#EEF7CF; --anis-fonce:#4B6300; --refus:#B2311B; --refus-pale:#FBE8E2;
  --nuit-2:#2A2D22; --sur-nuit-2:#B9BCA9;

  /* ALIAS DE COMPATIBILITÉ — les gabarits PHP et fo-produit.css appellent encore ces noms.
     Ils pointent vers la nouvelle palette : aucun violet ne peut réapparaître. */
  --bg:var(--papier); --surface:var(--champ); --ink:var(--encre); --muted:var(--encre-2);
  --line:var(--filet); --purple:var(--encre); --purple-fonce:#000; --lavender:var(--anis-pale);
  --coral:var(--anis); --soft:var(--anis-pale); --peach:var(--refus-pale); --mint:var(--anis-pale);
  --bande:var(--encre); --bande-texte:var(--papier); --accent-sur-bande:var(--anis);
  /* jetons fantômes appelés par functions.php / category.php / single.php (CONSTAT B4) */
  --tampon:var(--encre-2); --archive:var(--anis-fonce); --encre-2-legacy:var(--encre-2);
  --feuillet:var(--anis-pale); --f-sante:var(--anis-pale); --f-argent:var(--anis-pale);
  --f-famille:var(--anis-pale); --f-emploi:var(--anis-pale); --f-logement:var(--anis-pale);

  --header:rgba(246,245,238,.96);
  --ombre-1:0 1px 2px rgba(25,26,20,.06),0 4px 14px rgba(25,26,20,.06);
  --ombre-2:0 2px 4px rgba(25,26,20,.06),0 18px 40px rgba(25,26,20,.12);
  --shadow:var(--ombre-2);

  --r-s:8px; --r-m:14px; --r-l:22px; --r-pill:999px;
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:72px; --e-9:112px;

  --container:1240px; --gutter:20px; --colonne:min(70ch,100%);
  --font-titre:'Funnel Display',ui-sans-serif,system-ui,sans-serif;
  --font-texte:'Funnel Sans',ui-sans-serif,system-ui,sans-serif;
  --font-sans:var(--font-texte); --font-serif:var(--font-texte); /* Brygada supprimé */
  --header-h:72px; --header-h-compact:60px;
  color-scheme:light;
}

/* ==========================================================================
   3. RESET / BASE — aucun mode sombre, aucune bascule automatique de thème (DA V3 §12).
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--font-texte);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--encre);text-decoration-color:var(--anis);text-decoration-thickness:3px;text-underline-offset:3px}
a:hover{background:var(--anis-pale)}
:focus-visible{outline:3px solid var(--anis);outline-offset:2px;box-shadow:0 0 0 6px var(--encre)}
ul,ol{padding:0;margin:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-titre);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 .4em;color:var(--encre)}
p{margin:0 0 1.1em}
em{font-style:italic}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit}
input,select,textarea{font-family:inherit}
table{border-collapse:collapse}

.cg-container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);width:100%}
.cg-bande{padding:var(--e-8) 0}
.cg-bande--serree{padding:var(--e-5) 0}
.tabular{font-variant-numeric:lining-nums tabular-nums}
.cg-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cg-skip{position:fixed;left:-999px;top:0;background:var(--encre);color:var(--papier);padding:14px 18px;z-index:200;border-radius:0 0 6px 0}
.cg-skip:focus{left:0}

/* Libellé de champ — casse normale, jamais de capitales espacées (DA V3 §3). */
.cg-caps{
  font-family:var(--font-texte);font-weight:600;letter-spacing:.01em;font-size:13px;color:var(--encre-2);
}

/* ==========================================================================
   4. ICÔNES ET COCHE — les seuls pictogrammes du site (DA V3 §5). Le peigne
   a disparu ; les .cg-peigne* restent définies plus bas, inertes, au cas où
   un contenu ancien les référencerait encore (elles ne sont plus appelées).
   ========================================================================== */
.fo-icone{display:inline-block;flex-shrink:0;vertical-align:-.15em}

/* La case qui se coche (procédé 4) — remplace toutes les puces. */
.fo-coche{
  position:relative;display:inline-block;flex-shrink:0;width:22px;height:22px;
  border:2px solid var(--anis);border-radius:6px;background:var(--champ);
}
.fo-coche svg{position:absolute;inset:2px;stroke:var(--anis-fonce);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .5s ease}
.est-vu .fo-coche svg,.fo-coche.est-vu svg{stroke-dashoffset:0}

/* Repli neutre (image manquante) — icône sur fond champ, plus de hachures ni de peigne. */
.cg-peigne,.cg-peigne__case{display:none} /* inertes (DA V3 §9) */
.cg-repli{display:flex;align-items:center;justify-content:center;width:100%;background:var(--anis-pale);color:var(--encre-2);overflow:hidden}
.cg-article__hero.cg-repli{color:var(--encre-2)}

/* ==========================================================================
   5. BOUTONS ET LIENS (DA V3 §5)
   ========================================================================== */
.fo-bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border:2px solid var(--encre);border-radius:var(--r-s);
  background:var(--anis);color:var(--encre);font-family:var(--font-titre);font-weight:700;
  font-size:16px;line-height:1.2;text-decoration:none;box-shadow:0 3px 0 var(--encre);
  cursor:pointer;text-align:center;transition:transform .12s,box-shadow .12s;
}
.fo-bouton:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--encre);text-decoration:none}
.fo-bouton:active{transform:translateY(2px);box-shadow:0 1px 0 var(--encre)}
.fo-bouton[disabled]{opacity:.55;cursor:default}
.fo-bouton--grand{padding:17px 30px;font-size:18px;width:100%}
@media (min-width:560px){.fo-bouton--grand{width:auto}}
.fo-bouton--fin{background:var(--champ);color:var(--encre)}
.fo-bouton--sur-encre{border-color:var(--papier);box-shadow:0 3px 0 var(--papier)}
.fo-bouton--sur-encre:hover{box-shadow:0 4px 0 var(--papier)}
.fo-bouton--sur-encre:active{box-shadow:0 1px 0 var(--papier)}

.cg-bouton,.cg-pagination__bouton{
  display:inline-block;background:var(--champ);color:var(--encre);border:2px solid var(--encre);
  border-radius:var(--r-s);padding:12px 24px;font-family:var(--font-titre);font-weight:700;
  text-decoration:none;box-shadow:0 3px 0 var(--encre);transition:transform .12s,box-shadow .12s;
}
.cg-bouton:hover,.cg-pagination__bouton:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--encre);text-decoration:none}
.cg-pagination__bouton a{color:var(--encre);text-decoration:none;display:block}

/* ==========================================================================
   6. EN-TÊTE — sticky, logo « champ », navigation, recherche (DA V3 §7.1)
   ========================================================================== */
.cg-header{
  position:sticky;top:0;z-index:100;background:var(--header);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--filet);height:var(--header-h);transition:height .15s ease;
}
.cg-header.is-compact{height:var(--header-h-compact)}
.cg-header__inner{
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);height:100%;
  display:flex;align-items:center;gap:16px;
}

.cg-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;color:var(--encre)}
.cg-logo:hover{background:none}
.fo-logo{display:inline-flex;align-items:baseline;gap:1px;font-family:var(--font-titre);font-weight:800;font-size:24px;color:inherit}
.fo-logo__mot{text-transform:lowercase;letter-spacing:-.01em}
.fo-logo__champ{
  display:inline-block;background:var(--anis);color:var(--encre);border-radius:6px;
  padding:1px 7px;font-weight:700;font-size:.72em;margin-left:2px;
}
.cg-footer .fo-logo,.cg-footer .fo-logo__mot{color:var(--papier)}
.fo-logo__curseur{
  display:inline-block;width:.08em;height:.85em;background:currentColor;margin-left:3px;
  animation:fo-clignoter 1.1s steps(1) 3;
}
.fo-curseur{
  display:inline-block;width:.08em;height:1em;background:var(--encre);vertical-align:-.08em;
  animation:fo-clignoter 1.1s steps(1) infinite;
}
@keyframes fo-clignoter{0%,100%{opacity:1}50%{opacity:0}}
.cg-header.is-compact .cg-logo{font-size:15px}

/* 27/09/2026 (R-1226) : .cg-header__inner a align-items:center (pas stretch) —
   .cg-nav n'avait donc pas de hauteur DÉFINIE, .cg-nav__link{height:100%} se
   résolvait en auto (petite hauteur = ligne de texte), et le filet actif/survol
   posé à bottom:14px du lien (donc proche du texte) traversait la lettre au
   lieu de passer sous elle. align-self:stretch rend .cg-nav aussi haut que le
   header (72/60px compact), .cg-nav__link{height:100%} devient réel, le texte
   se centre (align-items:center déjà posé sur .cg-nav__link) et le filet à
   bottom:14px retombe sous le texte avec un vrai écart. */
.cg-nav{display:flex;gap:4px;flex:1 1 auto;min-width:0;overflow:hidden;align-self:stretch}
.cg-nav__link{
  position:relative;display:flex;align-items:center;height:100%;padding:0 12px;color:var(--encre);
  text-decoration:none;font-family:var(--font-texte);font-weight:500;font-size:15px;
  white-space:nowrap;flex-shrink:0;
}
.cg-nav__link:hover{background:none}
.cg-nav__link:after{
  content:'';position:absolute;left:12px;right:12px;bottom:14px;height:4px;border-radius:2px;
  background:var(--anis);width:0;transition:width .2s;
}
.cg-nav__link:hover:after,.cg-nav__link.is-active:after{width:calc(100% - 24px)}
.cg-nav__link.is-active{font-weight:600}

/* 27/09/2026 (R-1226) : à 240px de flex-basis, le placeholder "Quel formulaire
   cherchez-vous ?" (14px) dépassait la largeur dispo dans le champ (240 - bouton
   44 - padding 24 ≈ 172px) et se faisait couper visuellement — pas un problème
   de manque de place dans le header (de la marge y reste à 1440), juste un
   champ trop étroit pour son propre texte. */
.cg-recherche{display:flex;align-items:center;border:1.5px solid var(--filet);border-radius:var(--r-s);background:var(--champ);flex:0 1 320px;min-width:220px;height:44px;overflow:hidden}
.cg-recherche__champ{
  border:0;background:transparent;color:var(--encre);outline:none;
  padding:0 12px;font-family:var(--font-texte);font-size:14px;flex:1 1 140px;min-width:0;width:auto;
}
.cg-recherche__champ::placeholder{color:var(--encre-2)}
.cg-recherche:focus-within{border-color:var(--encre);background:var(--anis-pale)}
.cg-recherche__bouton{
  flex-shrink:0;width:auto;min-width:44px;padding:0 12px;white-space:nowrap;height:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--encre);
}
.cg-recherche--feuille{height:52px;max-width:none}
.cg-recherche--feuille .cg-recherche__champ{font-size:16px}

.cg-dept{flex-shrink:0}
.cg-dept select{
  border:1.5px solid var(--filet);background:var(--champ);color:var(--encre);
  padding:9px 34px 9px 12px;font-family:var(--font-texte);font-weight:500;font-size:14px;border-radius:var(--r-s);
  max-width:220px;width:100%;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23191A14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:16px 16px;
}
.cg-dept select:focus{outline:3px solid var(--anis);outline-offset:2px;border-color:var(--encre)}

/* Le hamburger et le menu plein écran n'existent plus (DA V3 §9). */
.cg-burger,.cg-bascules-mobile,.cg-menu-mobile{display:none!important}

@media (max-width:1100px) and (min-width:961px){
  .cg-recherche{display:none}
}
@media (max-width:960px){
  /* 26/09/2026 (A1) : la recherche du HEADER se masque sous 960px (barre basse
     "Chercher" la remplace), mais .cg-recherche est RÉUTILISÉE dans la feuille
     mobile (.cg-recherche.cg-recherche--feuille, footer.php) : un sélecteur
     .cg-recherche nu masquait aussi ce formulaire-là, feuille "Chercher" cassée. */
  .cg-nav,.cg-header .cg-recherche,.cg-header .cg-dept{display:none}
  .cg-header__inner{justify-content:space-between}
}

/* ==========================================================================
   7. BARRE BASSE MOBILE ET TABLETTE (≤960 px) + FEUILLES (DA V3 §7.2)
   ========================================================================== */
.cg-bottombar{display:none}
@media (max-width:960px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}

  .cg-bottombar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;
    width:100%;max-width:100vw;box-sizing:border-box;height:64px;
    background:var(--champ);border-top:1px solid var(--filet);
    box-shadow:0 -6px 20px rgba(25,26,20,.08);
    padding:0 4px calc(0px + env(safe-area-inset-bottom));
  }
  .cg-bottombar__item{
    flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:6px 2px;min-height:44px;color:var(--encre-2);text-decoration:none;font-size:12px;font-weight:600;
    font-family:var(--font-texte);position:relative;background:none;border:0;
  }
  .cg-bottombar__item:hover{background:none}
  .cg-bottombar__item span:last-child{line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .cg-bottombar__item .fo-icone{width:24px;height:24px}
  .cg-bottombar__item.is-active{color:var(--encre)}
  .cg-bottombar__item.is-active .cg-bottombar__pastille{background:var(--anis-pale)}
  .cg-bottombar__pastille{display:flex;align-items:center;justify-content:center;width:44px;height:30px;border-radius:15px}

  .cg-bottombar__item--mesaides{margin-top:-14px}
  .cg-bottombar__item--mesaides .cg-bottombar__pastille{
    width:52px;height:52px;border-radius:16px;background:var(--anis);border:2px solid var(--encre);
    box-shadow:0 3px 0 var(--encre);
  }
  .cg-bottombar__item--mesaides.is-active .cg-bottombar__pastille{background:var(--anis)}
}
@media (min-width:961px){ .cg-bottombar{display:none!important} }

/* La feuille basse (bottom sheet) — Chercher / Thèmes. */
.fo-feuille{position:fixed;inset:0;z-index:150}
.fo-feuille[hidden]{display:none}
.fo-feuille__voile{position:absolute;inset:0;background:rgba(25,26,20,.45)}
.fo-feuille__panneau{
  position:absolute;inset:auto 0 0;max-height:78vh;overflow-y:auto;background:var(--papier);
  border-radius:22px 22px 0 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .28s cubic-bezier(.22,.9,.3,1);
}
.fo-feuille.est-ouverte .fo-feuille__panneau{transform:translateY(0)}
.fo-feuille__poignee{display:block;width:40px;height:4px;border-radius:2px;background:var(--filet);margin:6px auto 18px}
.fo-feuille__grille{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.fo-feuille__tuile{position:relative;display:block;border-radius:var(--r-m);overflow:hidden;background:var(--champ);border:1px solid var(--filet);aspect-ratio:1/1}
.fo-feuille__tuile img{width:100%;height:100%;object-fit:cover}
.fo-feuille__tuile .cg-repli{position:absolute;inset:0}
.fo-feuille__tuile span{position:absolute;left:8px;bottom:8px;background:var(--champ);border-radius:var(--r-s);padding:5px 9px;font-family:var(--font-titre);font-weight:700;font-size:13px;color:var(--encre)}
.fo-feuille__actions{display:flex;gap:10px;flex-wrap:wrap}

/* ==========================================================================
   8. FO-SAS — le premier écran de l'accueil (DA V3 §7.3 bande 1).
   Fond papier (plus de bande sombre) : la couleur reste dans le champ actif.
   ========================================================================== */
.fo-sas{background:var(--papier);color:var(--encre)}
.fo-sas .cg-container{
  display:grid;grid-template-columns:7fr 5fr;grid-template-areas:"texte media";gap:44px;align-items:center;
  min-height:min(86vh,780px);padding:var(--e-8) 0 var(--e-7);
}
.fo-sas__contenu{grid-area:texte;display:flex;flex-direction:column;gap:14px;max-width:640px}
.fo-sas__media{grid-area:media;position:relative}
.fo-sas__media--vitrine{padding:24px 0 0 24px}
.fo-sas__media--vitrine::before{
  content:'';position:absolute;inset:24px -24px -24px 24px;background:var(--anis);border-radius:var(--r-l);z-index:0;
}
.fo-sas__media--vitrine .fo-vitrine{position:relative;z-index:1}
.fo-sas__media:not(.fo-sas__media--vitrine){
  border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;background-size:cover;background-position:center;
}

.fo-sas__promesse{display:flex;align-items:baseline;gap:8px;margin:0}
.fo-champ-lib{font-family:var(--font-texte);font-weight:600;font-size:13px;color:var(--encre-2)}
.fo-champ-val{font-family:var(--font-titre);font-weight:700;font-size:clamp(22px,1.2vw + 16px,30px);color:var(--encre)}
.fo-sas h1{font-family:var(--font-titre);font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(36px,3.4vw + 16px,64px);max-width:16ch;color:var(--encre);margin:0}
.fo-sas__chapo{font-size:19px;font-weight:400;color:var(--encre-2);max-width:52ch;margin:0}
.fo-sas__question{font-family:var(--font-texte);font-weight:600;font-size:15px;color:var(--encre);margin:6px 0 2px;padding-top:14px;border-top:1px solid var(--filet)}
.fo-sas__mention{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--encre-2);margin:8px 0 0}

.fo-sas .fo-choix{margin-top:2px}
.fo-sas .fo-choix__item{
  display:flex;align-items:center;gap:12px;background:var(--champ);border:1.5px solid var(--filet);
  border-radius:var(--r-s);color:var(--encre);font-family:var(--font-texte);font-weight:500;font-size:16px;
  text-decoration:none;
}
.fo-sas .fo-choix__item:hover{border-color:var(--encre);background:var(--anis-pale)}
.fo-sas .fo-choix__item .fo-icone{color:var(--encre)}

@media (max-width:960px){
  .fo-sas .cg-container{grid-template-columns:1fr;grid-template-areas:"texte" "media";min-height:0;padding:var(--e-7) var(--gutter) var(--e-6)}
  .fo-sas__media{margin-top:24px}
  .fo-sas h1{max-width:none}
  /* D11 (26/09/2026) : sous 960px, .fo-sas__media--vitrine passe pleine largeur (grille 1fr) ;
     son padding-left:24px desktop s'ajoutait alors à la gouttière du conteneur (var(--gutter), 20px),
     décalant la carte "Votre résultat" à 44px du bord au lieu de 20px comme le H1. Le bloc anis
     décoratif (::before, inset ... -24px à droite) débordait alors du viewport et se faisait couper
     par overflow-x:clip (html, style.css:59). Deux valeurs seulement : la carte revient à la gouttière,
     le bloc anis ne déborde plus à droite. Rien ne change à 1440 (règles hors media query intactes). */
  .fo-sas__media--vitrine{padding-left:0}
  .fo-sas__media--vitrine::before{right:0}
}
@media (max-width:640px){
  .fo-sas__chapo-reste{display:none}
  .fo-sas .fo-choix{grid-template-columns:1fr!important}
  .fo-sas .fo-choix__item{padding:14px 16px;font-size:15px;min-height:52px}
}

/* ==========================================================================
   9. FO-FAITS — bande d'encre, les objections levées (DA V3 §7.3 bande 2)
   ========================================================================== */
.fo-faits-bande{background:var(--encre);color:var(--papier)}
.fo-faits{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px}
.fo-faits__item{display:flex;gap:12px;align-items:flex-start;padding-left:20px;border-left:1px solid var(--nuit-2)}
.fo-faits__item:first-child{padding-left:0;border-left:0}
.fo-faits__item strong{display:block;font-family:var(--font-titre);font-weight:700;font-size:18px;color:var(--papier)}
.fo-faits__item span{display:block;font-size:14px;color:var(--sur-nuit-2);margin-top:2px}
.fo-faits .fo-coche{border-color:var(--anis);background:transparent;flex-shrink:0}
.fo-faits .fo-coche svg{stroke:var(--anis)}

@media (max-width:640px){
  .fo-faits{grid-template-columns:1fr 1fr;gap:20px 16px}
  .fo-faits__item{border-left:0;padding-left:0;padding-top:0}
  .fo-faits__item:nth-child(n+3){border-top:1px solid var(--nuit-2);padding-top:14px}
}

/* ==========================================================================
   10. FO-ETAPES — le schéma de 3 champs remplis reliés (DA V3 §7.3 bande 3)
   ========================================================================== */
.fo-etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:start}
.fo-etapes__item{
  position:relative;padding:24px;background:var(--champ);border:1px solid var(--filet);border-radius:var(--r-m);
  /* 23/09/2026 : l'etat de depart etait opacity:0 + clip-path, et la classe .est-vu
     (fo-anim.js) n'arrivait pas -> la section entiere restait vide a l'ecran.
     Le contenu passe avant l'animation : on part visible. */
  opacity:1;clip-path:none;transition:opacity .6s,clip-path .6s;
}
.fo-etapes__item.est-vu{opacity:1;clip-path:inset(0 0 0 0)}
.fo-etapes__item:nth-child(2){transition-delay:.15s}
.fo-etapes__item:nth-child(3){transition-delay:.3s}
.fo-etapes{gap:36px}
.fo-etapes__item:not(:last-child):after{
  content:'';position:absolute;top:50%;right:-30px;width:20px;height:2px;background:var(--encre);
}
.fo-etapes__n{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-s);
  background:var(--anis);color:var(--encre);font-family:var(--font-titre);font-weight:800;font-size:18px;
  font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.fo-etapes__titre{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px;font-family:var(--font-titre)}
.fo-etapes__item p{font-size:15px;color:var(--encre-2);line-height:1.6;margin:0}

@media (max-width:640px){
  .fo-etapes{grid-template-columns:1fr;gap:0}
  .fo-etapes__item{border-radius:0;border-left:0;border-right:0;padding:20px 0}
  .fo-etapes__item:first-child{border-top:1px solid var(--filet)}
  .fo-etapes__item:after{content:none}
  .fo-etapes__item:not(:last-child){border-bottom:0}
}

/* ==========================================================================
   11. FO-APERCU — cadre du résultat (DA V3 §7.3 bande 4)
   ========================================================================== */
.fo-apercu{margin-top:28px}
.fo-apercu__cadre{max-width:720px;background:var(--champ);border:2px solid var(--encre);border-radius:var(--r-l);box-shadow:var(--ombre-2);padding:26px;margin:0 auto}
.fo-apercu__legende{display:inline-block;margin-top:18px}

@media (max-width:640px){
  .fo-apercu__cadre{padding:20px}
  .fo-apercu__cadre .fo-aide__haut{flex-direction:column;align-items:flex-start;gap:2px}
}

/* ==========================================================================
   12. PAR SITUATION — tuiles avec photo + champ en surimpression (procédé 6,
   DA V3 §7.3 bande 5). Réutilisées, en compact, dans la feuille « Thèmes ».
   ========================================================================== */
.cg-mosaique__grille{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cg-carte{
  background:var(--champ);border:1px solid var(--filet);border-radius:var(--r-m);
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.cg-carte:hover{transform:translateY(-3px);box-shadow:var(--ombre-2);border-color:var(--encre);background:var(--champ)}
.cg-media,.cg-carte__media{width:100%;object-fit:cover;background:var(--anis-pale)}
.cg-carte__corps{padding:16px 18px 18px}
.cg-carte__surtitre{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:var(--r-pill);background:var(--anis-pale);color:var(--anis-fonce);font-size:12px;font-weight:600}
.cg-carte__titre{font-size:18px;margin:0 0 6px;letter-spacing:-.01em;font-family:var(--font-titre);font-weight:700}
.cg-carte__titre a{color:var(--encre);text-decoration:none}
.cg-carte__amorce{font-size:14px;color:var(--encre-2);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.fo-tuile{position:relative}
.fo-tuile .cg-media,.fo-tuile .cg-carte__media,.fo-tuile .cg-repli{aspect-ratio:4/3}
/* 26/09/2026 (A7, ui-ux-pro-max) : .fo-tuile englobait TOUTE la carte (photo +
   champ + compteur + légende "Dernière : titre" SOUS la photo) ; le champ en
   bottom:12px absolu retombait donc au bas de la carte entière, sur la légende,
   au lieu de rester au bas de la seule photo. Sur .cg-carte.fo-tuile (les tuiles
   "Par situation" de l'accueil — la feuille mobile "Thèmes" utilise un <span>
   séparé, non concerné) : photo + champ + compteur superposés dans la même
   cellule de grille (grid-row 1), la légende passe en ligne 2, sous la photo,
   jamais recouverte. Le composant visuel (fond blanc, rayon 8px, tailles) ne
   change pas, seul le mécanisme d'ancrage change. */
.cg-carte.fo-tuile{display:grid;grid-template-rows:auto auto}
.cg-carte.fo-tuile>.cg-media,.cg-carte.fo-tuile>.cg-carte__media,.cg-carte.fo-tuile>.cg-repli{grid-row:1;grid-column:1;width:100%}
.cg-carte.fo-tuile>.fo-tuile__champ{grid-row:1;grid-column:1;align-self:end;justify-self:start}
.cg-carte.fo-tuile>.fo-tuile__compte{grid-row:1;grid-column:1;align-self:end;justify-self:end}
.cg-carte.fo-tuile>.cg-carte__corps{grid-row:2;grid-column:1}
.fo-tuile__champ{
  margin:12px;background:var(--champ);border-radius:var(--r-s);
  padding:8px 12px;display:flex;flex-direction:column;gap:1px;max-width:calc(100% - 90px);
}
.fo-tuile__champ .fo-champ-lib{font-size:12px}
.fo-tuile__champ .fo-champ-val{font-size:18px}
.fo-tuile__compte{
  margin:12px;background:var(--champ);border-radius:var(--r-pill);
  padding:4px 10px;font-family:var(--font-texte);font-weight:600;font-size:13px;color:var(--encre);
}
.fo-tuile--compact .cg-media,.fo-tuile--compact .cg-repli{aspect-ratio:1/1}

@media (max-width:960px){ .cg-mosaique__grille{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .cg-mosaique__grille{grid-template-columns:1fr} }

/* ==========================================================================
   13. FO-DUO / LE DOSSIER À 29€ — bande d'encre (DA V3 §7.3 bande 6)
   ========================================================================== */
.fo-duo{display:grid;grid-template-columns:1fr;gap:28px;margin-top:26px}
.fo-duo>*{min-width:0}
.fo-duo>* p,.fo-duo>* li{overflow-wrap:break-word}
@media(min-width:760px){.fo-duo{grid-template-columns:1fr 1fr;gap:36px}}

.fo-liste-nette{list-style:none;padding:0;margin:0;display:grid;gap:11px}
/* 26/09/2026 (A3, R-0792) : display:flex sur le <li> éclatait chaque segment de
   texte mixte + <strong> en item flex séparé (gap erratique, dernier mot hors
   écran à 390px). Motif repris de .cg-article__corps li (même fichier) : coche
   en ::before positionnée en absolute + padding-left, le texte reste un bloc
   normal qui wrap. */
.fo-liste-nette li{position:relative;padding:1px 0 1px 33px;font-size:16.5px;line-height:1.5;overflow-wrap:break-word}
.fo-liste-nette li::before{
  content:'';position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:6px;border:2px solid var(--anis);
  background-color:var(--champ);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%234B6300' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;
}
.fo-liste-nette--contre li::before{
  border-color:var(--filet);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%2355574B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.fo-prix{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.fo-prix__montant{font-family:var(--font-titre);font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1}

/* ==========================================================================
   14. LES BASCULES — ce qui a changé récemment (DA V3 §7.3 bande 7)
   ========================================================================== */
.cg-bascules__titre{font-size:clamp(26px,1.6vw + 16px,40px);margin-bottom:20px}
.cg-bascules__liste{display:flex;flex-direction:column}
.cg-bascules__item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--filet);align-items:baseline;flex-wrap:wrap;min-height:64px}
.cg-bascules__item:last-child{border-bottom:none}
.cg-bascules__date{
  display:inline-block;background:var(--anis-pale);color:var(--anis-fonce);border-radius:var(--r-pill);
  padding:4px 12px;font-family:var(--font-texte);font-weight:600;font-size:14px;flex-shrink:0;width:auto;
}
.cg-bascules__texte{flex:1;min-width:200px;font-size:17px;font-weight:500}
.cg-bascules__source{font-size:14px;color:var(--encre-2);font-weight:500;text-decoration-color:var(--anis)}
.cg-bascules__vide{color:var(--encre-2);font-size:14px;font-style:normal}

/* ==========================================================================
   15. LES CHIFFRES — tuiles en très gros, bande anis (DA V3 §7.3 bande 8,
   procédé 5 ; rendu par footer.php sur toutes les pages)
   ========================================================================== */
.cg-chiffres{background:var(--anis);color:var(--encre)}
.cg-chiffres__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}
.cg-chiffres__grille>div{position:relative;padding-left:0;text-align:center}
.cg-chiffres__grille>div:not(:first-child){border-left:2px solid rgba(25,26,20,.3)}
.cg-chiffres__valeur{
  font-family:var(--font-titre);font-weight:800;font-size:clamp(56px,5vw + 20px,88px);
  letter-spacing:-.03em;color:var(--encre);display:block;line-height:1;
}
.cg-chiffres__label{font-size:15px;font-weight:600;color:var(--encre);opacity:1}

@media (max-width:640px){
  .cg-chiffres__grille{grid-template-columns:1fr 1fr}
  .cg-chiffres__grille>div:nth-child(odd){border-left:0}
}

/* ==========================================================================
   16. LES QUESTIONS — FAQ (DA V3 §7.3 bande 9)
   ========================================================================== */
.fo-faq{max-width:760px;margin-left:auto;margin-right:auto}
.fo-faq__item{border-top:1px solid var(--filet);padding:18px 0}
.fo-faq__item:last-child{border-bottom:1px solid var(--filet)}
.fo-faq__item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-titre);font-weight:700;font-size:20px;color:var(--encre);min-height:48px}
.fo-faq__item summary::-webkit-details-marker{display:none}
.fo-faq__item summary::after{
  content:'+';flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--encre);border-radius:var(--r-s);font-family:var(--font-titre);font-size:16px;font-weight:700;
}
.fo-faq__item[open] summary::after{content:'–';background:var(--anis)}
.fo-faq__item p{margin:12px 0 0;font-size:17px;line-height:1.7;color:var(--encre-2);max-width:64ch}

@media (max-width:640px){
  .fo-faq__item summary{font-size:17px}
}

/* ==========================================================================
   17. PIED DE PAGE (DA V3 §7.6)
   ========================================================================== */
.cg-footer{background:var(--encre);color:var(--papier)}
.cg-footer a{color:var(--papier);text-decoration-color:var(--anis)}
.cg-footer a:hover{background:none;text-decoration-color:var(--papier)}
/* 26/09/2026 (A4) : .cg-footer a{color:var(--papier)} (classe+élément, plus
   spécifique que .fo-bouton seul) écrasait le texte encre du bouton "Voir mes
   aides" du bandeau d'appel -> papier sur anis, contraste mesuré 1.21:1. Le
   bouton reste anis + texte encre comme partout ailleurs sur le site (13.28:1). */
.cg-footer .fo-bouton,.cg-footer .fo-bouton:hover{color:var(--encre)}
/* 27/09/2026 (R-1226) : ce padding SHORTHAND (0 sur l'axe vertical) écrasait
   entièrement celui de .cg-bande (var(--e-8) 0, même spécificité 0-1-0 mais
   déclaré plus haut dans le fichier) porté par le même élément
   (class="cg-footer__interieur cg-bande") -> 0 respiration réelle avant le
   bandeau d'appel, collé à la bande anis des chiffres au-dessus, bouton au bord. */
.cg-footer__interieur{max-width:var(--container);margin:0 auto;padding:var(--e-8) var(--gutter);box-sizing:border-box;width:100%}

.cg-footer__appel{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;min-width:0;padding-bottom:var(--e-6);margin-bottom:var(--e-6);border-bottom:1px solid var(--nuit-2)}
.cg-footer__appel .fo-champ-lib{color:var(--sur-nuit-2)}
.cg-footer__appel .fo-champ-val{color:var(--papier);font-size:clamp(22px,1.4vw + 16px,32px)}

.cg-footer__grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.cg-footer__baseline{font-size:15px;color:var(--sur-nuit-2);margin-top:10px;max-width:28ch}
.cg-footer__titre{font-family:var(--font-titre);font-weight:700;font-size:16px;color:var(--papier);margin-bottom:14px}
.cg-footer__liste li{margin-bottom:9px;font-size:15px}
.cg-footer__liste a{text-decoration:none;color:var(--sur-nuit-2)}
.cg-footer__liste a:hover{color:var(--papier);text-decoration:underline;text-decoration-color:var(--anis);background:none}
.cg-footer__bas{
  border-top:1px solid var(--nuit-2);margin-top:40px;padding-top:20px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--sur-nuit-2);
}

@media (max-width:640px){
  .cg-footer__grille{grid-template-columns:1fr 1fr}
  .cg-footer__appel{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   18. GABARIT ARTICLE (DA V3 §7.4)
   ========================================================================== */
/* 27/09/2026 (R-0509, ouverture refaite, ui-ux-pro-max invoqué) :
   .fo-article__ouverture porte l'image ET le bloc titre. Mobile-first : base
   = colonne (flex-direction:column, ordre DOM = image puis titre, identique
   à avant — 0 régression à 390/tablette). À partir de 1024px seulement, la
   ligne bascule en flex row et l'image passe visuellement à droite (`order`,
   le DOM ne change pas) : la hauteur de l'ouverture devient le MAX(colonne
   texte, image) et non plus leur somme — c'est ça, concrètement, qui libère
   la ligne de flottaison sur un H1 long à 1440/1366 (R-0509). */
.fo-article__ouverture{max-width:var(--container);margin:24px auto 0;padding:0 var(--gutter);display:flex;flex-direction:column;gap:20px}
/* Nid : .cg-article__hero et .cg-article__entete portent chacun leur propre
   marge/padding pour l'inset gutter quand ils sont seuls dans le flux ; ici
   .fo-article__ouverture porte déjà ce padding — sans cette neutralisation,
   le gutter et la marge du haut se seraient additionnés deux fois. */
.fo-article__ouverture .cg-article__hero{width:100%;max-width:100%;margin:0}
.fo-article__ouverture .cg-article__entete{max-width:none;margin:0;padding:0}
@media (min-width:1024px){
  .fo-article__ouverture{flex-direction:row;align-items:flex-start;gap:48px}
  /* flex-basis (pas width) fixe la taille sur l'axe principal d'un item flex :
     ça gagne sur le width:100% inline posé par cg_media_ou_repli() pour
     l'image (thumbnail réelle) — comportement standard flexbox, pas un
     bricolage. L'image passe donc bien à 380px quel que soit son ratio réel
     (16:9 posé en inline par single.php -> ~213px de haut à cette largeur). */
  .fo-article__ouverture .cg-article__hero{order:2;flex:0 0 380px;max-width:380px;margin:0}
  .fo-article__ouverture .cg-article__entete{order:1;flex:1 1 auto;min-width:0}
  /* H1 : la taille "Display" pensée pour un titre court (DA V3 §7.4, clamp
     jusqu'à 52px, max-width 22ch) fabrique 4 lignes sur un titre long
     ("Le P0i n'existe plus : où se déclare aujourd'hui le début d'activité
     d'un indépendant", 87 car.) et epuise seule le budget vertical avant
     l'image même. Réduite pour cette seule tranche desktop (jamais sous
     1024px, jamais tronquée — R21 intact) et élargie à la largeur réelle de
     la colonne texte (~750px) au lieu du plafond 22ch (~450px, pensé pour un
     entête centré pleine page, plus pertinent ici). */
  .fo-article__ouverture .cg-article__h1{font-size:clamp(28px,1.7vw + 12px,40px);max-width:none}
}
.cg-article__hero{width:calc(100% - 2 * var(--gutter));object-fit:cover;max-width:var(--container);margin:24px auto 0;border-radius:var(--r-l);aspect-ratio:21/9;max-height:440px;display:block}
/* 27/09/2026 (R-1222) : la respiration sous l'image à la une monte maintenant
   sur .fo-article__grille (profite aux 2 colonnes), retirée ici pour ne pas
   la doubler sur la colonne principale. */
.cg-article__entete{max-width:var(--colonne);margin:0 auto;padding:0 var(--gutter)}
.cg-article__surtitre{
  display:inline-block;margin-bottom:14px;padding:4px 12px;border-radius:var(--r-pill);
  background:var(--anis-pale);color:var(--anis-fonce);font-size:13px;font-weight:600;
}
.cg-article__h1{font-family:var(--font-titre);font-weight:800;font-size:clamp(30px,2.4vw + 16px,52px);line-height:1.06;letter-spacing:-.025em;max-width:22ch}
.cg-millesime{color:var(--encre-2);font-family:var(--font-texte);font-weight:500;font-size:14px;margin:8px 0 20px;padding:0;border:0}
.cg-article__chapo{font-family:var(--font-texte);font-weight:400;font-size:21px;line-height:1.7;color:var(--encre);margin-bottom:22px;max-width:60ch}

.cg-article__partage{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cg-article__partage a{border:1.5px solid var(--filet);padding:8px 14px;font-size:13px;text-decoration:none;color:var(--encre);border-radius:var(--r-s)}
.cg-article__partage a:hover{border-color:var(--encre);background:var(--anis-pale)}
.cg-article__partage--fin{max-width:var(--colonne);margin:0 auto 44px;padding:0 var(--gutter)}
.cg-article__partage--fin a{
  border:none;padding:0;font-family:var(--font-texte);font-weight:600;font-size:13px;color:var(--encre-2);
}
.cg-article__partage--fin a:hover{color:var(--encre);background:none}
.cg-article__partage--fin .fo-icone{width:16px;height:16px}

.cg-refus{background:var(--refus-pale);border-radius:var(--r-m);padding:28px var(--gutter);margin:0 0 36px}
.cg-refus__titre{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--refus);font-family:var(--font-titre);font-weight:700;font-size:20px}
.cg-refus__corps{color:var(--encre);font-size:16px;line-height:1.8;max-width:var(--colonne);margin:0 auto}

.cg-article__corps{max-width:var(--colonne);margin:0 auto;padding:0 var(--gutter)}
.cg-article__corps p{margin:0 0 1.3em;font-size:19px;line-height:1.7}
.cg-article__corps h2{font-size:30px;margin-top:2em;letter-spacing:-.02em;position:relative;padding-top:20px}
.cg-article__corps h2::before{content:'';position:absolute;top:0;left:0;width:40px;height:4px;background:var(--anis);border-radius:2px}
.cg-article__corps h3{font-size:22px;margin-top:1.3em}
.cg-article__corps a{color:var(--encre);text-decoration-color:var(--anis);text-decoration-thickness:3px;text-underline-offset:3px}
.cg-article__corps ul,.cg-article__corps ol{padding:0;margin:0 0 1.3em;list-style:none}
.cg-article__corps li{font-size:18px;line-height:1.7;margin-bottom:.6em;padding:10px 0 10px 36px;border-bottom:1px solid var(--filet);position:relative}
.cg-article__corps ul li::before{
  content:'';position:absolute;left:0;top:10px;width:22px;height:22px;border-radius:6px;border:2px solid var(--anis);
  background-color:var(--champ);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%234B6300' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;
}
.cg-article__corps ol{counter-reset:fo-compte}
.cg-article__corps ol li::before{
  counter-increment:fo-compte;content:counter(fo-compte);position:absolute;left:0;top:8px;width:26px;height:26px;
  border-radius:var(--r-pill);background:var(--anis);color:var(--encre);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-titre);font-weight:700;font-size:13px;
}
.cg-article__corps img{border-radius:var(--r-m);margin:1.5em 0}

.sbs_tableau{overflow-x:auto;margin:1.8em 0;border:1px solid var(--filet);border-radius:var(--r-m)}
.sbs_tableau table{width:100%;border-collapse:collapse;font-size:14px;min-width:460px;background:var(--champ)}
.sbs_tableau th,.sbs_tableau td{border-top:1px solid var(--filet);padding:12px 14px;text-align:left;line-height:1.6}
.sbs_tableau thead th{font-weight:600;font-size:13px;color:var(--encre-2);background:var(--anis-pale);border-top:0}
@media (max-width:640px){
  .sbs_tableau table,.sbs_tableau tbody,.sbs_tableau tr,.sbs_tableau td{display:block;width:100%}
  .sbs_tableau thead{display:none}
  .sbs_tableau tr{background:var(--champ);border-radius:var(--r-m);margin-bottom:12px;border:1px solid var(--filet);padding:8px 14px}
  .sbs_tableau td{border-top:0;padding:8px 0}
}

.cg-pratique{max-width:var(--colonne);margin:36px auto;padding:26px 28px;background:var(--champ);border:2px solid var(--encre);border-radius:var(--r-m)}
.cg-pratique__titre{font-family:var(--font-titre);font-weight:700;font-size:20px;color:var(--encre);margin-bottom:4px}
.cg-pratique__grille{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0 0}
.cg-pratique__grille dt{font-family:var(--font-texte);font-weight:600;font-size:13px;color:var(--encre-2);margin-bottom:4px}
.cg-pratique__grille dd{margin:0;font-family:var(--font-titre);font-weight:500;font-size:18px;color:var(--encre)}

.cg-action-officielle{
  max-width:var(--colonne);margin:26px auto 34px;padding:22px 24px;background:var(--anis-pale);border:2px solid var(--encre);border-radius:var(--r-m);
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
}
.cg-action-officielle__label{font-size:13px;color:var(--encre-2);margin:0 0 6px;font-weight:600}
.cg-action-officielle__nom{font-family:var(--font-titre);font-weight:700;font-size:22px;color:var(--encre)}
.cg-action-officielle__bouton{
  display:inline-block;background:var(--anis);color:var(--encre);font-family:var(--font-titre);font-weight:700;
  font-size:16px;padding:13px 22px;text-decoration:none;border-radius:var(--r-s);border:2px solid var(--encre);
  box-shadow:0 3px 0 var(--encre);transition:transform .12s,box-shadow .12s;
}
.cg-action-officielle__bouton:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--encre)}
@media (max-width:640px){
  .cg-action-officielle{grid-template-columns:1fr;padding:20px}
  .cg-action-officielle__bouton{width:100%;text-align:center}
}

.cg-cartouche{max-width:var(--colonne);margin:0 auto 40px;padding:20px 22px;border:1px solid var(--filet);background:var(--papier);border-radius:var(--r-m)}
.cg-cartouche__label{font-size:13px;color:var(--encre-2);margin-bottom:10px}
.cg-cartouche__corps{margin:0;font-size:15px;display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.cg-cartouche__source{font-family:var(--font-titre);font-weight:700;color:var(--encre)}
.cg-cartouche__date{color:var(--encre-2)}
.cg-cartouche__lien{font-weight:600;color:var(--encre);text-decoration-color:var(--anis)}

.cg-auteur{max-width:var(--colonne);margin:0 auto 48px;padding:26px var(--gutter) 0;display:flex;gap:18px;align-items:flex-start;border-top:1px solid var(--filet)}
.cg-auteur__avatar{width:60px;height:60px;flex-shrink:0;border-radius:50%}
.cg-auteur__nom{font-family:var(--font-titre);font-weight:700;font-size:18px;margin-bottom:2px}
.cg-auteur__role{
  display:inline-block;background:var(--anis-pale);color:var(--anis-fonce);border-radius:var(--r-pill);
  padding:3px 11px;font-size:13px;font-weight:600;margin-bottom:8px;
}
.cg-auteur__bio{font-size:14px;color:var(--encre-2);margin:0;line-height:1.7}

/* 27/09/2026 (R-1223) : .cg-pres-de-chez-vous supprimée — la section HTML
   (sélecteur département + 2 cartes voisines) n'existe plus nulle part
   (single.php), cette règle était devenue du CSS mort. */

/* Colonne latérale collante (sommaire) — DA V3 §7.4 pt.7
   27/09/2026 (R-1222) : .fo-article__grille n'avait pas de margin-top alors
   que .cg-article__entete (colonne principale) en portait un -> les 2 colonnes
   ne démarraient pas au même niveau, et la colonne de droite (sans son propre
   décalage) se retrouvait collée à l'image à la une (0 respiration, R-0580).
   La respiration monte sur la grille (les 2 colonnes en profitent pareil) et
   .cg-article__entete perd la sienne pour ne pas la doubler. margin-bottom
   ajouté pour une vraie fin de colonne avant la section suivante (R-0539). */
/* 27/09/2026 (alignement, /peaufiner, ROUGE recette) : justify-content:center
   centrait les 2 pistes (colonne texte + 300px) dans la boîte de la grille dès
   que leur somme+gap était plus étroite que la largeur disponible (quasi
   toujours) — ça décalait le corps ~130px à droite du surtitre/H1/chapô, qui
   eux n'ont qu'un padding simple (.fo-article__ouverture). start (comportement
   par défaut, ici explicite) aligne la 1re piste sur le même bord gauche que
   l'en-tête ; grille Mathias AR-059 vérifiée : le gap texte→colonne reste les
   64px déclarés, aucun écart blanc ajouté, le reliquat part après la colonne
   latérale, pas entre les deux. */
.fo-article__grille{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;justify-content:start;max-width:var(--container);margin:var(--e-6) auto var(--e-7);padding:0 var(--gutter)}
/* 27/09/2026 : le corps (.cg-article__corps) hérite d'un padding:0 var(--gutter)
   pensé pour un usage hors grille (page.php etc., neutralisé là-bas par un
   style inline) ; ici la piste fait déjà exactement --colonne et
   .fo-article__grille porte déjà le gutter — ce 2e padding décalait tout le
   corps (paragraphes, H2, images) de 20-40px de plus que le bloc titre. Zéro
   ici, scopé à l'article seul (.cg-article__corps reste inchangée pour
   page.php/page-dossier.php/page-bascules.php/page-contact.php). Même bug sur
   le bloc de partage de fin (aucun fond/bordure ne justifiait son padding). */
.fo-article__principal .cg-article__corps{padding:0;max-width:none}
.fo-article__principal .cg-article__partage--fin{padding:0}
/* 27/09/2026 (2e cause, trouvée en mesurant à 1024) : sous 1101px la grille
   passe à 1 seule piste et .fo-article__principal devient PLEINE largeur
   (~984px à 1024) — tout ce qui porte max-width:var(--colonne);margin:0 auto
   (pensé pour se centrer dans un .cg-container large, hors article) se
   recentre alors DANS ce bloc devenu plus large que --colonne, avec un vrai
   décalage mesuré de 184px (Playwright, getBoundingClientRect, corps à
   gauche=204 contre H1=20). Au-dessus de 1101px la piste fait déjà
   exactement --colonne (aucun effet, ces règles restent des no-op). Neutralise
   le centrage pour que le bord GAUCHE de chaque bloc reste sur celui du H1 à
   toutes les largeurs ; le padding propre à chaque carte (fond/bordure :
   pratique, cartouche, action officielle, sources, refus) n'est pas touché,
   seul son centrage externe l'est. */
.fo-article__principal .cg-article__corps,
.fo-article__principal .cg-article__partage--fin,
.fo-article__principal .cg-refus__corps,
.fo-article__principal .cg-pratique,
.fo-article__principal .cg-action-officielle,
.fo-article__principal .cg-cartouche,
.fo-article__principal .cg-auteur,
.fo-article__principal .fo-sources{margin-left:0;margin-right:0}
.fo-article__grille>.fo-article__principal{min-width:0}
.fo-article__cote{
  position:sticky;top:88px;align-self:start;
  display:flex;flex-direction:column;gap:var(--e-6);padding-bottom:var(--e-6);
}
.fo-article__cote__bloc{display:flex;flex-direction:column;gap:10px;width:100%}
.fo-article__cote__titre{font-family:var(--font-texte);font-weight:600;font-size:13px;color:var(--encre-2);margin:0}
.fo-article__cote ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
/* R-1222 : <a> était display:inline -> padding-left/border-left ne
   s'appliquaient qu'au premier fragment de ligne (fragmentation CSS des
   boîtes inline), la 2e ligne d'un titre qui wrap revenait à gauche SOUS le
   filet au lieu de rester indentée avec la 1re. display:block fait de chaque
   lien une seule boîte : le filet et l'indentation courent sur toute sa
   hauteur, quel que soit le nombre de lignes. Plus de troncature au mot
   (wp_trim_words retiré côté PHP, single.php) : le titre complet wrap proprement. */
.fo-article__cote a{
  display:block;font-family:var(--font-texte);font-weight:500;font-size:15px;line-height:1.4;
  color:var(--encre);text-decoration:none;padding-left:10px;border-left:2px solid var(--filet);
}
.fo-article__cote a:hover,.fo-article__cote a.est-actif{border-left-color:var(--anis);background:none}
@media (max-width:1100px){ .fo-article__cote{display:none} .fo-article__grille{grid-template-columns:1fr;gap:0} .fo-article__principal .cg-article__corps{max-width:760px} }

/* 27/09/2026 (R-1224, ui-ux-pro-max invoqué) : « Articles suggérés », remplace
   l'ancienne section « Près de chez vous ». Cartes compactes, motif .cg-carte
   déjà validé (vignette 4/3, .cg-carte__surtitre en pastille pour la rubrique,
   .cg-carte__titre, une ligne de méta ajoutée pour la date/temps de lecture).
   Grille .cg-cartes déjà responsive : 3 col (1440) / 2 col (960) / 1 col (640,
   donc 390 aussi) — aucune nouvelle règle de colonnes à écrire. */
.fo-suggestions{padding:var(--e-8) 0;background:var(--papier)}
.fo-suggestions__titre{font-family:var(--font-titre);font-weight:700;font-size:clamp(24px,1.6vw + 16px,32px);margin-bottom:var(--e-5)}
.fo-carte-suggestion__meta{font-size:13px;color:var(--encre-2);margin:6px 0 0}

/* ==========================================================================
   19. GABARIT RUBRIQUE (DA V3 §7.5)
   ========================================================================== */
.cg-rubrique__entete{padding:56px 0 40px}
.cg-rubrique__titre{font-family:var(--font-titre);font-weight:800;font-size:clamp(34px,3vw + 16px,56px)}
.cg-rubrique__filtre{display:flex;gap:14px;align-items:center;margin-top:22px;flex-wrap:wrap;font-size:14px;color:var(--encre-2)}
.cg-rubrique__entete .fo-champ-lib{margin-bottom:8px;display:block}
.cg-pagination{display:flex;justify-content:center;margin:44px 0}

/* 26/09/2026 (A11, ui-ux-pro-max) : appel à l'action en bas de rubrique — même
   motif que le bandeau .cg-footer__appel (champ + bouton), en anis-pale au lieu
   d'encre puisqu'on est en pleine page claire, pas en pied de page sombre. */
.cg-rubrique__cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:40px;padding:28px var(--gutter);background:var(--anis-pale);border-radius:var(--r-l);
}
.cg-rubrique__cta .fo-champ-val{font-size:clamp(20px,1.2vw + 14px,26px)}
@media (max-width:640px){.cg-rubrique__cta{flex-direction:column;align-items:flex-start;padding:22px var(--gutter)}}

/* ==========================================================================
   20. FORMULAIRES GÉNÉRIQUES (contact…)
   ========================================================================== */
.cg-formulaire{max-width:560px}
.cg-formulaire p{margin-bottom:18px}
.cg-formulaire label{display:block;font-weight:600;font-size:13px;margin-bottom:7px;color:var(--encre-2)}
.cg-formulaire input,.cg-formulaire textarea{
  width:100%;border:1.5px solid var(--filet);background:var(--champ);color:var(--encre);
  padding:12px 14px;font-family:var(--font-texte);font-size:15px;border-radius:var(--r-s);
}
.cg-formulaire input:focus,.cg-formulaire textarea:focus{outline:3px solid var(--anis);outline-offset:1px;border-color:var(--encre)}
.cg-formulaire__piege{position:absolute;left:-9999px}
.cg-confirmation{padding:16px 20px;background:var(--anis-pale);color:var(--encre);border:1px solid var(--filet);border-radius:var(--r-s);margin-bottom:22px;font-weight:600}
/* 26/09/2026 (A5) : bouton "Envoyer" du Contact mesuré recouvert à 100% par la
   barre basse fixe à 390px (.cg-bottombar, 64px). Marge de dégagement sous
   960px pour que le bouton clique librement quel que soit le point de défilement. */
@media (max-width:960px){
  .cg-formulaire button[type="submit"],.cg-formulaire .cg-bouton{
    margin-bottom:calc(64px + 24px + env(safe-area-inset-bottom));
    scroll-margin-bottom:calc(64px + 24px + env(safe-area-inset-bottom));
  }
}

/* 26/09/2026 (A2) : base 3 colonnes DÉPLACÉE ici, AVANT les media queries
   mobiles ci-dessous — elle était déclarée après (fin de fichier), donc plus
   tardive dans la cascade à spécificité égale : elle écrasait le 1fr/2fr des
   media queries à toutes les largeurs, y compris 390px (titres coupés sur
   3 colonnes ~110px). Utilisée par category.php, search.php, archive.php,
   author.php, single.php (liés), taxonomy-departement.php, index.php. */
.cg-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* ==========================================================================
   21. RESPONSIVE GÉNÉRAL
   ========================================================================== */
@media (max-width:960px){
  .cg-cartes{grid-template-columns:repeat(2,1fr)}
  .cg-footer__grille{grid-template-columns:1fr 1fr}
  .cg-pratique__grille{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cg-header{height:var(--header-h-compact)}
  .cg-header__inner{gap:10px}
  .fo-logo{font-size:20px}

  .cg-cartes{grid-template-columns:1fr}
  .cg-auteur{flex-direction:column}

  .cg-article__h1{font-size:clamp(28px,7vw,36px)}
  .cg-article__chapo{font-size:18px}
  .cg-article__corps p,.cg-article__corps li{font-size:17px}
  .cg-rubrique__titre{font-size:clamp(26px,7vw,34px)}
}
@media (max-width:380px){
  .cg-cartes{grid-template-columns:1fr}
}

/* État vide générique (rubrique/archive/recherche/auteur sans résultat) — la
   classe .cg-une__vide est réutilisée telle quelle par 5 gabarits, elle ne
   désigne plus l'ancienne « Une » de journal (supprimée, DA V3 §9). */
.cg-une__vide{padding:40px;text-align:center;color:var(--encre-2);border:1px dashed var(--filet);border-radius:var(--r-m);grid-column:1/-1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fo-etapes__item{opacity:1;clip-path:none}
  .fo-coche svg{stroke-dashoffset:0}
}

/* Tableaux hérités du contenu : défilement interne sur mobile, jamais de débordement de page (22/09/2026). */
@media (max-width:760px){main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* Colonne d'article : formulaire « Mes aides » (22/09/2026). */
/* 27/09/2026 (R-1222) : margin-top retiré, .fo-article__cote{gap:var(--e-6)}
   fait déjà un espacement régulier entre le bloc sommaire et ce formulaire. */
.fo-cote-form{padding:20px;background:var(--champ);border:1px solid var(--filet);border-radius:8px;display:flex;flex-direction:column;gap:10px;width:100%;min-width:0;box-sizing:border-box}
.fo-cote-form__titre{font-family:var(--font-titre);font-weight:700;font-size:19px;line-height:1.25;color:var(--encre)}
.fo-cote-form__lib{font-family:var(--font-texte);font-weight:600;font-size:13px;color:var(--encre-2)}
.fo-cote-form__champ{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--filet);border-radius:8px;background:#fff;color:var(--encre);min-height:44px}
.fo-cote-form__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:0;border-radius:8px;background:var(--anis);color:var(--encre);font-family:var(--font-texte);font-weight:600;font-size:16px;cursor:pointer}
.fo-cote-form__btn:hover{filter:brightness(.95)}
.fo-cote-form__note{font-size:13px;color:var(--encre-2)}

/* 23/09/2026 — retours Mathias : le bouton du bandeau de pied debordait sur petit ecran. */
.cg-footer__appel > p{min-width:0;max-width:100%;overflow-wrap:break-word}

/* =========================================================================
 * B2 (26/09/2026, /peaufiner lot B — gabarit, ui-ux-pro-max invoqué) —
 * infographie de cartes qui remplace un <table> de contenu chiffré/
 * comparatif (fo_gabarit_tableau_en_infographie, functions.php). Mobile-
 * first : base = 1 colonne (jamais de débordement, quelle que soit la
 * largeur), les media queries min-width ajoutent des colonnes ensuite —
 * on évite volontairement le piège trouvé sur .cg-cartes (A2, lot A :
 * une règle sans garde de media query déclarée après les media queries
 * gagnait la cascade à toutes les largeurs). minmax(0,1fr) sur chaque
 * colonne : un minmax(200px,1fr) aurait pu forcer un débordement sur un
 * mot long/une cellule dense (min-width par défaut d'un item de grille =
 * la taille de son contenu, pas 0).
 * ========================================================================= */
/* 27/09/2026 (/peaufiner, rouge recette) : align-items:start — une carte à
 * réponse courte ("—") dans une ligne à côté de 2 cartes à paragraphe complet
 * ne doit jamais être étirée à leur hauteur (stretch = défaut de grid) : ça
 * fabriquait ~800px de blanc sous le contenu court, lu comme "cassé". Chaque
 * carte garde sa hauteur naturelle ; à 1 colonne (<640px) l'effet n'existe
 * déjà pas (chaque ligne de grille = 1 carte), donc rien à changer là. */
.fo-tableau-cartes{max-width:var(--colonne);margin:1.8em auto;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:640px){.fo-tableau-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.fo-tableau-cartes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fo-tableau-carte{min-width:0;background:var(--champ);border:1px solid var(--filet);border-radius:var(--r-m);box-shadow:var(--ombre-1);padding:18px 20px}
.fo-tableau-carte__titre{font-family:var(--font-titre);font-weight:700;font-size:17px;line-height:1.3;color:var(--encre);margin:0 0 12px;overflow-wrap:break-word}
.fo-tableau-carte__titre br{content:"";display:block;margin-top:2px}
.fo-tableau-carte__grille{margin:0;display:flex;flex-direction:column;gap:10px}
.fo-tableau-carte__item{padding-top:10px;border-top:1px solid var(--filet)}
.fo-tableau-carte__item:first-child{padding-top:0;border-top:0}
.fo-tableau-carte__lib{font-family:var(--font-texte);font-weight:600;font-size:12px;color:var(--encre-2);margin:0 0 3px}
.fo-tableau-carte__val{margin:0;font-family:var(--font-titre);font-weight:500;font-size:15px;line-height:1.5;color:var(--encre);overflow-wrap:break-word}
.fo-tableau-carte__val strong,.fo-tableau-carte__val b{color:var(--anis-fonce);font-weight:700}

/* =========================================================================
 * B3 (26/09/2026, /peaufiner lot B — gabarit, ui-ux-pro-max invoqué) —
 * bloc « Sources citées dans cette fiche » (fo_sources_html, functions.php).
 * Même famille visuelle que .cg-cartouche (carte --papier bordée), liste
 * NUMÉROTÉE native (R-0496), aucun lien (pas de règle a nécessaire : le
 * composant n'en écrit jamais).
 * ========================================================================= */
.fo-sources{max-width:var(--colonne);margin:0 auto 40px;padding:22px 24px;border:1px solid var(--filet);background:var(--papier);border-radius:var(--r-m)}
.fo-sources__titre{font-size:13px;color:var(--encre-2);margin:0 0 14px}
.fo-sources__liste{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:12px;list-style:decimal outside}
.fo-sources__liste::marker,.fo-sources__item::marker{color:var(--anis-fonce);font-weight:700}
.fo-sources__item{font-size:15px;line-height:1.6;padding-left:4px}
.fo-sources__nom{font-family:var(--font-titre);font-weight:700;color:var(--encre)}
.fo-sources__domaine{color:var(--anis-fonce);font-weight:600;margin-left:6px}
.fo-sources__detail{display:block;color:var(--encre-2);margin-top:2px}
.fo-sources__maj{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--filet);font-size:13px;color:var(--encre-2)}
.cg-footer__appel .fo-bouton{max-width:100%;flex-shrink:0}

/* ==========================================================================
   ROXANE 28/09/2026 — corrections R1…R18 (CORRECTIONS.md du jour)
   ========================================================================== */
.fo-surtitre{display:inline-block;margin:0 0 12px;padding:5px 12px;border-radius:var(--r-pill);background:var(--champ);border:1px solid var(--filet);color:var(--anis-fonce);font-family:var(--font-texte);font-weight:700;font-size:13px;letter-spacing:.02em}
.fo-surtitre--sur-encre{background:rgba(198,240,60,.14);border-color:rgba(198,240,60,.3);color:var(--anis)}

/* R1 — les trois étapes ont la même hauteur */
.fo-etapes{align-items:stretch}
.fo-etapes__item{display:flex;flex-direction:column;height:100%}

/* R2 — aperçu du résultat : texte à gauche, carte à droite, sans vide autour */
.fo-apercu-bande{background:var(--anis-pale);padding:var(--e-7) 0}
.fo-apercu-grille{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media (min-width:960px){.fo-apercu-grille{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px}}
.fo-apercu-intro h2{font-size:clamp(28px,2vw + 16px,42px);font-weight:800;letter-spacing:-.03em;margin-bottom:18px}
.fo-apercu-intro__cas{margin:0 0 20px;padding:14px 16px;background:var(--champ);border:1px solid var(--filet);border-left:4px solid var(--anis);border-radius:var(--r-s);font-size:16px;line-height:1.5}
.fo-apercu-intro__lib{display:block;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--anis-fonce);margin-bottom:4px}
.fo-apercu-intro__liste{margin:0 0 26px}
.fo-apercu-bande .fo-apercu{margin-top:0}
.fo-apercu-bande .fo-apercu__cadre{max-width:none;margin:0;transform:rotate(-.6deg)}
@media (max-width:959px){.fo-apercu-bande .fo-apercu__cadre{transform:none}}

/* R3 — le dossier : blocs lisibles + ticket de prix à droite */
.fo-dossier-bande{background:var(--encre);color:var(--papier)}
.fo-dossier-bande h2{color:var(--papier);font-size:clamp(28px,2vw + 16px,42px);font-weight:800;letter-spacing:-.03em;max-width:18ch;margin-bottom:28px}
.fo-dossier-grille{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media (min-width:1000px){.fo-dossier-grille{grid-template-columns:minmax(0,1fr) 380px;gap:56px}}
.fo-dossier-duo{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:700px){.fo-dossier-duo{grid-template-columns:1fr 1fr}}
.fo-dossier-bloc{background:rgba(246,245,238,.06);border:1px solid rgba(246,245,238,.16);border-radius:var(--r-m);padding:22px}
.fo-dossier-bloc__titre{margin:0 0 14px;font-family:var(--font-titre);font-weight:700;font-size:17px;color:var(--anis)}
.fo-dossier-bloc--contre .fo-dossier-bloc__titre{color:var(--papier)}
.fo-dossier-bloc .fo-liste-nette{color:var(--papier)}
.fo-dossier-bloc .fo-liste-nette li{font-size:15.5px}
.fo-ticket{position:relative;background:var(--anis);color:var(--encre);border:2px solid var(--papier);border-radius:var(--r-l);padding:30px 28px;box-shadow:8px 8px 0 rgba(246,245,238,.18)}
.fo-ticket::before,.fo-ticket::after{content:'';position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:var(--encre);transform:translateY(-50%)}
.fo-ticket::before{left:-15px}.fo-ticket::after{right:-15px}
.fo-ticket__lib{margin:0;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.fo-ticket__prix{margin:4px 0 16px;font-family:var(--font-titre);font-weight:800;font-size:72px;line-height:1;letter-spacing:-.04em}
.fo-ticket__prix span{font-size:18px;letter-spacing:0;font-weight:700}
.fo-ticket__liste{list-style:none;margin:0 0 22px;padding:16px 0 0;border-top:2px dashed rgba(25,26,20,.35);display:grid;gap:8px;font-weight:600;font-size:15.5px}
.fo-ticket__liste li{padding-left:24px;position:relative}
.fo-ticket__liste li::before{content:'';position:absolute;left:2px;top:.35em;width:12px;height:7px;border-left:2.5px solid var(--encre);border-bottom:2.5px solid var(--encre);transform:rotate(-45deg)}
.fo-ticket__bouton{width:100%;justify-content:center;text-align:center;background:var(--encre);color:var(--anis);box-shadow:0 3px 0 rgba(25,26,20,.45)}
.fo-ticket__bouton:hover{background:var(--encre);color:var(--anis)}
.fo-ticket__note{margin:14px 0 0;font-size:14px;line-height:1.5}
.fo-ticket__note a{color:var(--encre);text-decoration-color:var(--encre)}

/* R4 — FAQ : titre et questions sur la même grille, bords alignés */
.fo-faq-bande{background:var(--anis-pale)}
.fo-faq-grille{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media (min-width:960px){.fo-faq-grille{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px}.fo-faq-intro{position:sticky;top:100px}}
.fo-faq-intro h2{font-size:clamp(28px,2vw + 16px,42px);font-weight:800;letter-spacing:-.03em;margin-bottom:14px}
.fo-faq-intro p{color:var(--encre-2);font-size:16px;margin:0}
.fo-faq-grille .fo-faq{max-width:none;margin:0}

/* R5 — simulateur : colonne large + panneau « ce que vous obtenez », sans vide autour */
.fo-simu-page{padding:var(--e-6) 0 var(--e-7)}
.fo-simu-page__tete{max-width:none;margin-bottom:26px}
.fo-simu-page__h1{font-family:var(--font-titre);font-weight:800;font-size:clamp(32px,2.6vw + 16px,54px);line-height:1.04;letter-spacing:-.03em;margin:0 0 12px;max-width:24ch}
.fo-simu-page__chapo{font-size:18px;line-height:1.6;color:var(--encre-2);max-width:62ch;margin:0}
.fo-simu-page__grille{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media (min-width:1000px){.fo-simu-page__grille{grid-template-columns:minmax(0,1fr) 340px;gap:32px}.fo-simu-page__cote{position:sticky;top:96px}}
.fo-simu-page__parcours .fo-simu{max-width:none;margin:0}
.fo-simu-cote{background:var(--encre);color:var(--papier);border-radius:var(--r-l);padding:24px}
.fo-simu-cote__titre{margin:0 0 16px;font-family:var(--font-titre);font-weight:700;font-size:19px;color:var(--anis)}
.fo-simu-cote__etapes{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:e}
.fo-simu-cote__etapes li{counter-increment:e;position:relative;padding-left:40px;font-size:14.5px;line-height:1.45;color:rgba(246,245,238,.8)}
.fo-simu-cote__etapes li::before{content:counter(e);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:8px;background:var(--anis);color:var(--encre);font-family:var(--font-titre);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.fo-simu-cote__etapes strong{display:block;color:var(--papier);font-size:15.5px}
.fo-simu-garanties{list-style:none;margin:14px 0 0;padding:18px;display:grid;gap:12px;background:var(--champ);border:1px solid var(--filet);border-radius:var(--r-m)}
.fo-simu-garanties li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--encre-2)}
.fo-simu-garanties strong{display:block;color:var(--encre);font-size:15px}
.fo-simu-garanties .fo-coche{flex:0 0 auto;margin-top:2px}

/* R6/R7 — haut du catalogue : deux colonnes, recherche en évidence, fiche exemple */
.fo-cat-tete{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;background:var(--anis-pale);border:1px solid var(--filet);border-radius:var(--r-l);padding:clamp(24px,4vw,56px);margin-bottom:8px;overflow:hidden}
@media (min-width:1000px){.fo-cat-tete{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.fo-cat-tete__h1{font-family:var(--font-titre);font-weight:800;font-size:clamp(34px,3vw + 16px,60px);line-height:1.02;letter-spacing:-.035em;margin:0 0 14px}
.fo-cat-tete__chapo{font-size:18px;line-height:1.6;color:var(--encre-2);margin:0 0 24px;max-width:56ch}
.fo-cat-recherche{display:flex;align-items:center;gap:10px;background:var(--champ);border:2px solid var(--encre);border-radius:var(--r-m);padding:8px 8px 8px 16px;box-shadow:0 4px 0 var(--encre);max-width:620px}
.fo-cat-recherche .fo-icone{flex:0 0 auto;color:var(--encre-2)}
.fo-cat-recherche input{flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent;font-family:var(--font-texte);font-size:17px;color:var(--encre);padding:10px 0}
.fo-cat-recherche:focus-within{box-shadow:0 4px 0 var(--encre),0 0 0 4px var(--anis)}
.fo-cat-recherche .fo-bouton{flex:0 0 auto;padding:12px 20px;box-shadow:none}
.fo-cat-frequents{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 0;font-size:14px;color:var(--encre-2)}
.fo-cat-frequents span{font-weight:600;margin-right:2px}
.fo-cat-frequents a{padding:6px 12px;border-radius:var(--r-pill);background:var(--champ);border:1px solid var(--filet);text-decoration:none;font-weight:600;color:var(--encre);min-height:32px;display:inline-flex;align-items:center}
.fo-cat-frequents a:hover{border-color:var(--encre);background:var(--anis)}
.fo-cat-tete__visuel{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center}
@media (max-width:999px){.fo-cat-tete__visuel{display:none}}
.fo-fiche-demo{position:relative;z-index:2;width:min(100%,380px);background:var(--champ);border:2px solid var(--encre);border-radius:var(--r-m);padding:22px;box-shadow:var(--ombre-2);transform:rotate(2deg)}
.fo-fiche-demo--dos{position:absolute;z-index:1;height:300px;transform:rotate(-5deg) translate(-18px,8px);background:var(--anis);box-shadow:none}
.fo-fiche-demo__haut{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}
.fo-fiche-demo__cerfa{font-family:var(--font-titre);font-weight:800;font-size:13px;background:var(--encre);color:var(--anis);border-radius:6px;padding:4px 9px}
.fo-fiche-demo__rub{font-weight:700;font-size:12px;color:var(--anis-fonce);background:var(--anis-pale);border-radius:var(--r-pill);padding:4px 10px}
.fo-fiche-demo__titre{font-family:var(--font-titre);font-weight:800;font-size:21px;line-height:1.2;margin:0 0 14px}
.fo-fiche-demo__lignes{margin:0;display:grid;gap:10px}
.fo-fiche-demo__lignes div{padding-top:10px;border-top:1px dashed var(--filet)}
.fo-fiche-demo__lignes dt{font-size:12px;font-weight:700;color:var(--encre-2);text-transform:uppercase;letter-spacing:.04em}
.fo-fiche-demo__lignes dd{margin:2px 0 0;font-size:15px;font-weight:600}
.fo-fiche-demo__refus dt{color:var(--refus)}
.fo-fiche-demo__tampon{position:absolute;right:-14px;bottom:-16px;transform:rotate(-8deg);border:2px solid var(--anis-fonce);color:var(--anis-fonce);background:var(--anis-pale);border-radius:8px;padding:6px 10px;font-family:var(--font-titre);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.05em}

/* R8 — barème (tableau à une colonne de valeurs) + cartes multi-colonnes dans la colonne d'article */
.sbs_tableau:has(> .fo-bareme),.sbs_tableau:has(> .fo-tableau-cartes){border:0;overflow:visible;border-radius:0;margin:1.6em 0}
.fo-bareme{margin:1.6em 0;border:2px solid var(--encre);border-radius:var(--r-m);overflow:hidden;background:var(--champ);box-shadow:0 4px 0 var(--encre)}
.fo-bareme__tete{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;background:var(--encre);color:var(--papier);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.fo-bareme__tete span:last-child{color:var(--anis)}
.fo-bareme__ligne{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border-top:1px solid var(--filet)}
.fo-bareme__tete + .fo-bareme__ligne{border-top:0}
.fo-bareme__ligne:nth-child(odd){background:#FBFBF6}
.fo-bareme__lib{font-weight:600;font-size:16px;line-height:1.4;color:var(--encre);min-width:0}
.fo-bareme__val{flex:0 1 auto;max-width:58%;text-wrap:balance;text-align:right;font-family:var(--font-titre);font-weight:800;font-size:17px;line-height:1.3;color:var(--encre);background:var(--anis);border-radius:8px;padding:5px 10px;overflow-wrap:break-word}
.fo-bareme__val--gratuit{background:var(--anis-pale);color:var(--anis-fonce)}
@media (max-width:560px){.fo-bareme__ligne{flex-direction:column;align-items:flex-start;gap:6px}.fo-bareme__val{max-width:none;text-align:left}}
.cg-article__corps .fo-tableau-cartes,.fo-article__principal .fo-tableau-cartes{max-width:none;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));align-items:stretch}
.cg-article__corps .fo-tableau-carte,.fo-article__principal .fo-tableau-carte{height:100%}

/* R9 — haut de rubrique */
.fo-rub-tete{background:var(--anis-pale);padding:var(--e-7) 0;border-bottom:1px solid var(--filet)}
.fo-rub-tete__grille{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media (min-width:960px){.fo-rub-tete__grille{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px}}
.fo-rub-tete__h1{font-family:var(--font-titre);font-weight:800;font-size:clamp(40px,4vw + 16px,76px);line-height:1;letter-spacing:-.04em;margin:0 0 14px}
.fo-rub-tete__desc{font-size:19px;line-height:1.55;color:var(--encre-2);max-width:48ch}
.fo-rub-tete__desc p{margin:0}
.fo-rub-tete__reperes{list-style:none;margin:22px 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fo-rub-tete__reperes li{background:var(--champ);border:1px solid var(--filet);border-radius:var(--r-pill);padding:8px 14px;font-size:14.5px;color:var(--encre-2)}
.fo-rub-tete__reperes strong{color:var(--encre)}
.fo-rub-tete__actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.fo-rub-tete__lien{font-weight:700}
.fo-rub-tete__visuel{position:relative}
.fo-rub-tete__visuel img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-l);border:2px solid var(--encre);box-shadow:10px 10px 0 var(--anis)}
.fo-rub-tete__derniere{position:absolute;left:-18px;bottom:-22px;max-width:78%;background:var(--champ);border:2px solid var(--encre);border-radius:var(--r-m);padding:12px 16px;text-decoration:none;font-family:var(--font-titre);font-weight:700;font-size:15px;line-height:1.3;color:var(--encre);box-shadow:var(--ombre-2)}
.fo-rub-tete__derniere span{display:block;font-family:var(--font-texte);font-size:12px;font-weight:700;color:var(--anis-fonce);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.fo-rub-tete__derniere:hover{background:var(--anis)}
@media (max-width:959px){.fo-rub-tete__derniere{left:12px;right:12px;max-width:none}}

/* R10-R12 — page auteur */
.fo-auteur-tete{background:var(--anis-pale);padding:var(--e-7) 0 var(--e-8);border-bottom:1px solid var(--filet)}
.fo-auteur-tete__grille{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media (min-width:900px){.fo-auteur-tete__grille{grid-template-columns:360px minmax(0,1fr);gap:64px}}
.fo-auteur-tete__photo{position:relative;max-width:360px}
.fo-portrait{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.fo-auteur-tete__photo .fo-portrait{border-radius:var(--r-l);border:2px solid var(--encre);box-shadow:14px 14px 0 var(--anis)}
.fo-auteur-tete__badge{position:absolute;left:18px;bottom:-16px;background:var(--encre);color:var(--anis);border-radius:var(--r-pill);padding:8px 14px;font-family:var(--font-titre);font-weight:700;font-size:13px}
.fo-auteur-tete__h1{font-family:var(--font-titre);font-weight:800;font-size:clamp(40px,4vw + 16px,78px);line-height:1;letter-spacing:-.04em;margin:0 0 18px}
.fo-auteur-tete__bio{font-size:19px;line-height:1.65;color:var(--encre);max-width:58ch;margin:0 0 26px}
.fo-auteur-reperes{list-style:none;margin:0 0 20px;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.fo-auteur-reperes li{background:var(--champ);border:2px solid var(--encre);border-radius:var(--r-m);padding:12px 18px;min-width:150px;box-shadow:0 3px 0 var(--encre)}
.fo-auteur-reperes strong{display:block;font-family:var(--font-titre);font-weight:800;font-size:38px;line-height:1;letter-spacing:-.03em}
.fo-auteur-reperes span{font-size:14px;color:var(--encre-2);font-weight:600}
.fo-auteur-rubs{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.fo-auteur-rubs a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 12px;border-radius:var(--r-pill);background:var(--champ);border:1px solid var(--filet);text-decoration:none;font-weight:600;font-size:14px;color:var(--encre)}
.fo-auteur-rubs a span{background:var(--anis);border-radius:var(--r-pill);padding:1px 7px;font-size:12px}
.fo-auteur-rubs a:hover{border-color:var(--encre)}
.fo-auteur-methode{background:var(--encre);color:var(--papier);padding:var(--e-5) 0}
.fo-auteur-methode__grille{display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
@media (min-width:900px){.fo-auteur-methode__grille{grid-template-columns:220px repeat(3,minmax(0,1fr));gap:28px}}
.fo-auteur-methode__titre{margin:0;font-family:var(--font-titre);font-weight:700;font-size:18px;color:var(--anis)}
.fo-auteur-methode__item{display:flex;gap:12px;align-items:flex-start}
.fo-auteur-methode__item span{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--anis);color:var(--encre);font-family:var(--font-titre);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.fo-auteur-methode__item p{margin:0;font-size:15px;line-height:1.5;color:rgba(246,245,238,.85)}
.fo-auteur-methode__item strong{color:var(--papier)}
.fo-auteur-methode__item a{color:var(--anis)}
.fo-auteur-fiches__titre{font-size:clamp(26px,1.6vw + 16px,36px);font-weight:800;letter-spacing:-.03em;margin-bottom:24px}

/* R13-R15 — À propos / Méthode */
.fo-apropos-tete{background:var(--anis-pale);padding:var(--e-7) 0 var(--e-8);border-bottom:1px solid var(--filet);overflow:hidden}
.fo-apropos-tete--simple{padding:var(--e-7) 0}
.fo-apropos-tete__grille{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media (min-width:1000px){.fo-apropos-tete__grille{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px}}
.fo-apropos-tete__h1{font-family:var(--font-titre);font-weight:800;font-size:clamp(36px,3.4vw + 16px,68px);line-height:1.02;letter-spacing:-.04em;margin:0 0 20px;max-width:18ch}
.fo-apropos-tete__chapo{font-size:19px;line-height:1.65;max-width:56ch;margin:0 0 28px;color:var(--encre)}
.fo-apropos-tete__actions{display:flex;flex-wrap:wrap;gap:14px}
.fo-apropos-tete__visuel{position:relative;min-height:420px}
@media (max-width:999px){.fo-apropos-tete__visuel{min-height:340px;max-width:460px}}
.fo-apropos-polaroid{position:absolute;margin:0;width:58%;background:var(--champ);border:2px solid var(--encre);border-radius:var(--r-m);padding:10px 10px 12px;box-shadow:var(--ombre-2)}
.fo-apropos-polaroid .fo-portrait{border-radius:8px}
.fo-apropos-polaroid figcaption{margin-top:8px;font-family:var(--font-titre);font-weight:700;font-size:15px;text-align:center}
.fo-apropos-polaroid--1{left:0;top:0;transform:rotate(-4deg)}
.fo-apropos-polaroid--2{right:0;top:70px;transform:rotate(3deg)}
.fo-apropos-polaroid{z-index:1}.fo-apropos-polaroid--2{z-index:2}
.fo-apropos-pastille{position:absolute;left:4%;bottom:-18px;z-index:3;background:var(--encre);color:var(--papier);border-radius:50%;width:124px;height:124px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:13px;line-height:1.2;transform:rotate(-8deg);box-shadow:0 0 0 6px var(--anis)}
.fo-apropos-pastille strong{font-family:var(--font-titre);font-size:34px;color:var(--anis);line-height:1}
.fo-apropos-chiffres{background:var(--encre);color:var(--papier);padding:var(--e-6) 0}
.fo-apropos-chiffres__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (min-width:900px){.fo-apropos-chiffres__liste{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fo-apropos-chiffres__liste li{border-left:3px solid var(--anis);padding-left:16px}
.fo-apropos-chiffres__liste strong{display:block;font-family:var(--font-titre);font-weight:800;font-size:clamp(34px,2.4vw + 16px,52px);line-height:1;letter-spacing:-.03em;color:var(--anis)}
.fo-apropos-chiffres__liste span{font-size:15px;color:rgba(246,245,238,.8)}
.fo-apropos-pourquoi{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:900px){.fo-apropos-pourquoi{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}}
.fo-apropos-pourquoi h2,.fo-apropos-engagements h2,.fo-apropos-equipe h2{font-size:clamp(28px,2vw + 16px,42px);font-weight:800;letter-spacing:-.03em;margin:0}
.fo-apropos-pourquoi__texte p{font-size:18px;line-height:1.7;margin:0 0 16px}
.fo-apropos-engagements{background:var(--anis-pale)}
.fo-apropos-duo{display:grid;grid-template-columns:1fr;gap:18px;margin-top:28px}
@media (min-width:800px){.fo-apropos-duo{grid-template-columns:1fr 1fr}}
.fo-apropos-carte{background:var(--champ);border:1px solid var(--filet);border-radius:var(--r-l);padding:26px}
.fo-apropos-carte--oui{border:2px solid var(--encre);box-shadow:0 4px 0 var(--encre)}
.fo-apropos-carte__titre{margin:0 0 16px;font-family:var(--font-titre);font-weight:800;font-size:20px}
.fo-apropos-carte p{font-size:16px;line-height:1.65}
.fo-apropos-equipe__grille{display:grid;grid-template-columns:1fr;gap:24px;margin-top:28px}
@media (min-width:900px){.fo-apropos-equipe__grille{grid-template-columns:1fr 1fr}}
.fo-equipier{display:grid;grid-template-columns:140px minmax(0,1fr);gap:22px;align-items:start;background:var(--champ);border:1px solid var(--filet);border-radius:var(--r-l);padding:22px;box-shadow:var(--ombre-1)}
@media (max-width:520px){.fo-equipier{grid-template-columns:1fr}.fo-equipier__photo{max-width:180px}}
.fo-equipier__photo .fo-portrait{border-radius:var(--r-m);border:2px solid var(--encre)}
.fo-equipier__nom{font-size:22px;font-weight:800;margin:0}
.fo-equipier__role{margin:2px 0 10px;font-weight:700;font-size:14px;color:var(--anis-fonce)}
.fo-equipier__bio{margin:0 0 14px;font-size:15.5px;line-height:1.6;color:var(--encre-2)}
.fo-equipier__lien{display:inline-block;margin-top:14px;font-weight:700}
.fo-apropos-finance{border-top:1px solid var(--filet)}
.fo-apropos-fin{padding:0 0 var(--e-8)}
.fo-apropos-fin__boite{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;background:var(--anis);border:2px solid var(--encre);border-radius:var(--r-l);padding:clamp(24px,3vw,44px);box-shadow:8px 8px 0 var(--encre)}
.fo-apropos-fin__boite h2{font-size:clamp(24px,1.6vw + 14px,34px);font-weight:800;letter-spacing:-.03em;margin:0 0 6px}
.fo-apropos-fin__boite p{margin:0;font-size:16px}
.fo-apropos-fin__boite .fo-bouton{background:var(--encre);color:var(--anis)}
.fo-regles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:900px){.fo-regles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fo-regle{position:relative;background:var(--champ);border:2px solid var(--encre);border-radius:var(--r-l);padding:28px 24px 24px;box-shadow:0 5px 0 var(--encre);display:flex;flex-direction:column}
.fo-regle__n{position:absolute;top:-18px;right:20px;width:44px;height:44px;border-radius:12px;background:var(--anis);border:2px solid var(--encre);font-family:var(--font-titre);font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center}
.fo-regle__icone{width:48px;height:48px;border-radius:12px;background:var(--anis-pale);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.fo-regle__titre{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px;line-height:1.2}
.fo-regle p{margin:0;font-size:16px;line-height:1.65;color:var(--encre-2)}

/* R16 — contact : deux colonnes, tient dans un écran */
.fo-contact{background:linear-gradient(90deg,var(--anis-pale) 0 50%,var(--papier) 50% 100%);padding:var(--e-6) 0}
@media (max-width:999px){.fo-contact{background:var(--anis-pale)}}
.fo-contact__grille{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media (min-width:1000px){.fo-contact__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.fo-contact__h1{font-family:var(--font-titre);font-weight:800;font-size:clamp(32px,2.6vw + 16px,54px);line-height:1.04;letter-spacing:-.035em;margin:0 0 14px;max-width:16ch}
.fo-contact__chapo{font-size:17px;line-height:1.6;color:var(--encre-2);margin:0 0 20px;max-width:48ch}
.fo-contact__motifs{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.fo-contact__motifs li{display:flex;gap:12px;align-items:center;background:var(--champ);border:1px solid var(--filet);border-radius:var(--r-m);padding:10px 14px;font-size:14.5px;color:var(--encre-2)}
.fo-contact__motifs li>span{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--anis);display:flex;align-items:center;justify-content:center;color:var(--encre)}
.fo-contact__motifs strong{display:block;color:var(--encre);font-size:15.5px}
.fo-contact__redac{display:flex;gap:14px;align-items:center}
.fo-contact__redac p{margin:0;font-size:14px;line-height:1.5;color:var(--encre-2)}
.fo-contact__redac strong{color:var(--encre);font-size:15.5px}
.fo-contact__visages{display:flex;flex:0 0 auto}
.fo-contact__visages img,.fo-contact__visages .cg-auteur__avatar{width:52px;height:52px;border-radius:50%;border:2px solid var(--papier);box-shadow:0 0 0 2px var(--encre)}
.fo-contact__visages > *+*{margin-left:-14px}
.fo-contact__carte{background:var(--champ);border:2px solid var(--encre);border-radius:var(--r-l);padding:clamp(20px,2.4vw,32px);box-shadow:10px 10px 0 var(--anis)}
.fo-contact__carte-titre{margin:0 0 14px;font-family:var(--font-titre);font-weight:800;font-size:22px}
.fo-contact__form{max-width:none;margin:0}
.fo-contact__form p{margin:0 0 12px}
.fo-contact__form label{display:block;font-weight:700;font-size:13.5px;margin-bottom:5px;color:var(--encre)}
.fo-contact__form input[type=text],.fo-contact__form input[type=email],.fo-contact__form textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--filet);border-radius:var(--r-s);background:#FBFBF6;padding:11px 12px;font-family:var(--font-texte);font-size:16px;color:var(--encre)}
.fo-contact__form input:focus,.fo-contact__form textarea:focus{outline:3px solid var(--anis);outline-offset:1px;border-color:var(--encre);background:var(--champ)}
.fo-contact__form textarea{min-height:110px;resize:vertical}
.fo-contact__duo{display:grid;grid-template-columns:1fr;gap:0 14px}
@media (min-width:600px){.fo-contact__duo{grid-template-columns:1fr 1fr}}
.fo-contact__avertissement{font-size:13px;color:var(--encre-2);line-height:1.45}
.fo-contact__envoyer{width:100%;justify-content:center}

/* R17/R18 — pages légales */
.fo-legal-tete{background:var(--anis-pale);padding:var(--e-6) 0 0;border-bottom:1px solid var(--filet)}
.fo-legal-tete__h1{font-family:var(--font-titre);font-weight:800;font-size:clamp(34px,3vw + 16px,60px);line-height:1.02;letter-spacing:-.035em;margin:0 0 8px}
.fo-legal-tete__maj{margin:0 0 22px;color:var(--encre-2);font-size:15px}
.fo-legal-onglets{display:flex;gap:6px;flex-wrap:wrap}
.fo-legal-onglets a{padding:12px 18px;border:1px solid var(--filet);border-bottom:0;border-radius:var(--r-s) var(--r-s) 0 0;background:transparent;text-decoration:none;font-weight:700;font-size:15px;color:var(--encre-2);min-height:44px;display:inline-flex;align-items:center}
.fo-legal-onglets a[aria-current=page]{background:var(--papier);color:var(--encre);border-color:var(--filet);box-shadow:inset 0 3px 0 var(--anis)}
.fo-legal__grille{display:grid;grid-template-columns:1fr;gap:32px;padding-top:var(--e-6);padding-bottom:var(--e-8)}
@media (min-width:1000px){.fo-legal__grille{grid-template-columns:260px minmax(0,1fr);gap:56px}.fo-legal__sommaire{position:sticky;top:96px;align-self:start}}
.fo-legal__sommaire{background:var(--champ);border:1px solid var(--filet);border-radius:var(--r-m);padding:18px 18px 12px}
.fo-legal__sommaire-titre{margin:0 0 10px;font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--anis-fonce)}
.fo-legal__sommaire ol{margin:0;padding-left:20px;display:grid;gap:4px}
.fo-legal__sommaire li{font-size:14.5px;line-height:1.4}
.fo-legal__sommaire a{text-decoration:none;color:var(--encre)}
.fo-legal__sommaire a:hover{text-decoration:underline;background:none}
.fo-legal__corps{max-width:760px;font-size:17px;line-height:1.75}
.fo-legal__corps > p:first-child{font-size:19px;line-height:1.6;padding:18px 20px;background:var(--champ);border-left:4px solid var(--anis);border-radius:var(--r-s);margin-top:0}
.fo-legal__corps h2{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:800;letter-spacing:-.02em;margin:40px 0 12px;padding-top:24px;border-top:1px solid var(--filet);scroll-margin-top:100px}
.fo-legal__num{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--anis);border:2px solid var(--encre);font-size:15px;display:inline-flex;align-items:center;justify-content:center}
.fo-legal__corps ul{padding-left:0;list-style:none;display:grid;gap:12px}
.fo-legal__corps ul li{background:var(--champ);border:1px solid var(--filet);border-radius:var(--r-m);padding:14px 16px}
/* R6/R7 — mobile : la colonne de texte ne doit jamais élargir le bandeau */
.fo-cat-tete{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.fo-cat-tete{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.fo-cat-tete__texte{min-width:0}
@media (max-width:600px){
  .fo-cat-tete{padding:22px 18px;border-radius:var(--r-m)}
  .fo-cat-recherche{padding:6px 6px 6px 12px}
  .fo-cat-recherche .fo-icone{display:none}
  .fo-cat-recherche input{font-size:16px}
  .fo-cat-recherche .fo-bouton{padding:10px 14px;font-size:15px}
}
/* R8 — les cartes de tableau héritaient des marges/tailles des <p> du corps d'article */
.cg-article__corps .fo-tableau-carte{padding:20px}
.cg-article__corps .fo-tableau-carte__titre{font-size:17px;line-height:1.35;margin:0 0 12px;padding-bottom:12px;border-bottom:2px solid var(--anis)}
.cg-article__corps .fo-tableau-carte p{margin:0}
.cg-article__corps .fo-tableau-carte__lib{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--anis-fonce);margin:0 0 4px}
.cg-article__corps .fo-tableau-carte__val{font-family:var(--font-texte);font-weight:500;font-size:15px;line-height:1.55}
.cg-article__corps .fo-tableau-carte__grille{gap:12px}