@layer base, ancien;
/* droitausejour.fr — système « La chemise de dossier » (proposition, étape 1).
   Chargée après les feuilles existantes : redéfinit les jetons, puis les composants.
   Aucun contenu, aucun lien, aucun champ de formulaire n'est modifié. */

/* ---------- 1. Jetons ---------- */
:root {
  /* Matières */
  --table: #F3F6F5;          /* la table sur laquelle on pose les dossiers (fond de page) */
  --feuille: #FFFFFF;        /* la feuille, le document */
  --encre: #13202B;          /* 17.6:1 sur feuille, 15.0:1 sur table */
  --encre-2: #3A4A55;        /*  9.6:1 / 8.1:1 */
  --encre-3: #56636D;        /*  6.3:1 / 5.3:1 */
  --filet: #DDE5E7;          /* séparateurs décoratifs */
  --filet-fort: #83919A;     /* bordures de champs : 3.8:1 (WCAG 1.4.11) */

  /* Action */
  --action: #1D4F7A;         /* bouton principal : encre pleine, texte blanc 17.6:1 */
  --sur-action: #FFFFFF;
  --action-survol: #153B5C;  /* 12.4:1 */
  --lien: #1D4F7A;           /* 8.2:1 sur feuille, 6.9:1 sur table */
  --lien-survol: #153B5C;
  --focus: #1D4F7A;
  --surligneur: #8FCFDD;     /* soulignement décoratif de l'accroche */
  --ciel: #D6ECF0;           /* fonds d'accent : rappel, onglets, choix retenus ; encre 14.8:1 */
  --trait: #C3D1D5;          /* contour doux des feuilles et onglets */     /* le seul geste de mise en valeur */

  /* Chemises, une par démarche ; l'étiquette est toujours écrite à l'encre (≥ 10:1) */
  --chemise-bleu: #A9CBEA;       /* Titre de séjour */
  --chemise-rose: #F3B3C1;       /* OQTF */
  --chemise-vert: #9FD3B1;       /* Régularisation */
  --chemise-lilas: #CDBEE8;      /* Naturalisation, nationalité */
  --chemise-orange: #F5BE85;     /* Famille, regroupement */
  --chemise-turquoise: #9AD6D1;  /* DCEM */
  --chemise-ardoise: #C9D3E3;      /* ANEF */
  --chemise-sable: #DCCFB6;      /* Guides, pages générales */
  --sur-chemise: #13202B;

  /* Statuts : couleur + icône + libellé, jamais la couleur seule */
  --favorable: #11663A;  --favorable-fond: #DDF2E5;   /* 6.0:1 */
  --verifier: #8A4600;   --verifier-fond: #FCEACC;    /* 6.0:1 */
  --urgent: #A3161B;     --urgent-fond: #FBE2E1;      /* 6.4:1 ; blanc sur --urgent 8.1:1 */

  /* Typographie : deux familles, deux graisses chacune au plus */
  --font-titre: "Schibsted Grotesk", "Atkinson Hyperlegible Next", system-ui, sans-serif;  /* 700 */
  --font-texte: "Atkinson Hyperlegible Next", system-ui, sans-serif;                       /* 400, 700 */
  --t-xs: .875rem;   /* 14 px : mentions, fil d'Ariane — plancher absolu */
  --t-sm: 1rem;      /* 16 px : textes secondaires, champs */
  --t-base: 1.125rem;/* 18 px : texte courant */
  --t-md: 1.25rem;   /* 20 px */
  --t-lg: clamp(1.375rem, 2.2vw, 1.625rem);
  --t-xl: clamp(1.625rem, 3vw, 2.125rem);
  --t-2xl: clamp(2rem, 4.6vw, 2.875rem);
  --t-3xl: clamp(2.25rem, 5.6vw, 3.5rem);
  --interligne: 1.6;

  /* Espacements (base 4) */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;

  /* Rayons et ombres : bords nets, pile de papier, pas de halo flou */
  --r-controle: 12px;
  --r-feuille: 18px;
  --r-onglet: 10px 10px 0 0;
  --ombre-pile: 0 1px 0 var(--filet), 0 3px 0 -1px var(--feuille), 0 4px 0 -1px var(--filet);
  --ombre-levee: 0 2px 0 var(--filet-fort);

  /* Mouvement */
  --duree-court: 140ms;
  --duree-moyen: 220ms;
  --courbe: cubic-bezier(.2, .7, .2, 1);

  /* Compatibilité : les anciens noms pointent vers les nouveaux jetons */
  --papier: var(--table); --papier-pur: var(--feuille); --papier-2: #DDE3E9; --filet-doux: #DCE2E8;
  --fond: var(--table); --surface: var(--feuille); --texte: var(--encre); --texte-2: var(--encre-2); --texte-3: var(--encre-3);
  --signal: var(--lien); --signal-fonce: var(--lien-survol); --signal-doux: #E6F2F4;
  --laiton: var(--verifier); --laiton-doux: var(--verifier-fond);
  --urgence: var(--urgent); --urgence-doux: var(--urgent-fond);
  --valide: var(--favorable); --valide-doux: var(--favorable-fond);
  --font-display: var(--font-titre); --font-body: var(--font-texte); --font-mono: var(--font-texte);
  --rayon: var(--r-controle); --rayon-lg: var(--r-feuille);
  --ombre: var(--ombre-pile);
  --mesure: 66ch;
  --rubrique: var(--chemise-sable);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --table: #0E1519; --feuille: #162027;
    --encre: #EAF0F2; --encre-2: #C2CDD2; --encre-3: #98A6AE;   /* 14.7 / 10.2 / 6.7 :1 sur feuille */
    --filet: #26333A; --filet-fort: #6C7C86; --trait: #36474F; --ciel: #9FD0DC;
    --action: #8CC3E6; --sur-action: #13202B; --action-survol: #B5D9EF;
    --lien: #8CC3E6; --lien-survol: #B5D9EF; --focus: #8CC3E6;
    --chemise-bleu: #8FB5DA; --chemise-rose: #E39CAD; --chemise-vert: #86C29C; --chemise-lilas: #B7A6D6;
    --chemise-orange: #E3A870; --chemise-turquoise: #80C3BE; --chemise-ardoise: #B4C0D3; --chemise-sable: #C9BB9F;
    --surligneur: #4FA9BF;
    --favorable: #7FD3A3; --favorable-fond: #132A1E;
    --verifier: #F2B866; --verifier-fond: #2E2213;
    --urgent: #F59A94; --urgent-fond: #341819;
    --papier-2: #222831; --filet-doux: #262C35; --signal-doux: #1B2737;
  }
}

/* Couleur de la rubrique courante, déduite de l'adresse canonique de la page */
:root:has(link[rel=canonical][href*="/titre-de-sejour/"]) { --rubrique: var(--chemise-bleu); }
:root:has(link[rel=canonical][href*="/oqtf/"]) { --rubrique: var(--chemise-rose); }
:root:has(link[rel=canonical][href*="/regularisation/"]) { --rubrique: var(--chemise-vert); }
:root:has(link[rel=canonical][href*="/naturalisation/"]),
:root:has(link[rel=canonical][href*="/nationalite-francaise/"]),
:root:has(link[rel=canonical][href*="/guides/naturalisation"]) { --rubrique: var(--chemise-lilas); }
:root:has(link[rel=canonical][href*="/regroupement-familial/"]) { --rubrique: var(--chemise-orange); }
:root:has(link[rel=canonical][href*="/dcem/"]) { --rubrique: var(--chemise-turquoise); }
:root:has(link[rel=canonical][href*="/anef/"]) { --rubrique: var(--chemise-ardoise); }
:root:has(link[rel=canonical][href*="/effacement-taj/"]) { --rubrique: var(--chemise-ardoise); }

/* Couleur de chemise portée par chaque lien de démarche */
:root a[href^="/titre-de-sejour/"] { --chemise: var(--chemise-bleu); }
:root a[href^="/oqtf/"] { --chemise: var(--chemise-rose); }
:root a[href^="/regularisation/"] { --chemise: var(--chemise-vert); }
:root a[href^="/naturalisation/"], :root a[href^="/nationalite-francaise/"], :root a[href^="/guides/naturalisation"] { --chemise: var(--chemise-lilas); }
:root a[href^="/regroupement-familial/"] { --chemise: var(--chemise-orange); }
:root a[href^="/dcem/"] { --chemise: var(--chemise-turquoise); }
:root a[href^="/anef/"] { --chemise: var(--chemise-ardoise); }
:root a[href^="/effacement-taj/"] { --chemise: var(--chemise-ardoise); }

/* ---------- 2. Base (couche « base » : sous les anciennes règles de composants) ---------- */
@layer base {
body { font-family: var(--font-texte); font-size: var(--t-base); line-height: var(--interligne); background: var(--table); color: var(--encre); }
h1, h2, h3, h4 { font-family: var(--font-titre); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--lien-survol); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ciel); color: var(--sur-chemise); }
strong, b { font-weight: 700; }

}

/* Plus de petites capitales espacées ni de chasse fixe : des étiquettes lisibles */
:root .surtitre, :root .rp-surtitre, :root .rp-etape, :root .titre-col, :root .lbl, :root .compteur,
:root .etape, :root .bientot, :root .sommaire summary, :root .prose th, :root figcaption, :root .tel,
:root .hero-meta .date, :root .num, :root .code {
  font-family: var(--font-texte); text-transform: none; letter-spacing: 0; font-size: var(--t-sm); font-weight: 700;
}
:root .surtitre { color: var(--encre-2); }
:root .chapo { font-family: var(--font-texte); font-size: var(--t-md); line-height: 1.55; color: var(--encre-2); }

/* ---------- 3. Boutons et choix ---------- */
:root .btn {
  font-family: var(--font-texte); font-size: var(--t-sm); font-weight: 700; min-height: 48px; padding: .75rem 1.35rem;
  border-radius: var(--r-controle); border-width: 2px; transition: background-color var(--duree-court), border-color var(--duree-court), color var(--duree-court), box-shadow var(--duree-court);
}
:root .btn-primaire { background: var(--action); border-color: var(--action); color: var(--sur-action); }
:root .btn-primaire:hover { background: var(--action-survol); border-color: var(--action-survol); color: var(--sur-action); }
:root .btn-primaire:active { box-shadow: inset 0 2px 0 rgb(0 0 0 / .35); }
:root .btn-secondaire { background: var(--feuille); border-color: var(--action); color: var(--action); }
:root .btn-secondaire:hover { background: var(--signal-doux); border-color: var(--action-survol); color: var(--action-survol); }
:root .btn-urgence { background: var(--urgent); border-color: var(--urgent); color: #fff; filter: none; }
:root .btn-urgence:hover { background: color-mix(in srgb, var(--urgent) 86%, #000); color: #fff; filter: none; }
:root .btn:disabled, :root .btn[aria-disabled=true] { background: var(--papier-2); border-color: var(--filet); color: var(--encre-3); cursor: not-allowed; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .btn-primaire, :root:not([data-theme=light]) .btn-primaire:hover { color: var(--sur-action); }
  :root:not([data-theme=light]) .btn-urgence, :root:not([data-theme=light]) .btn-urgence:hover { background: var(--urgent); border-color: var(--urgent); color: #16191D; }
}

/* Choix (réponses du questionnaire, motifs du rappel) : des fiches qu'on coche */
:root .reponse, :root .rp-motif {
  background: var(--feuille); color: var(--encre); border: 2px solid var(--filet-fort); border-radius: var(--r-controle);
  font-family: var(--font-texte); font-size: var(--t-base); min-height: 56px; padding: .85rem 1.1rem;
  transition: border-color var(--duree-court), background-color var(--duree-court);
}
:root .rp-motif { font-size: var(--t-sm); min-height: 48px; }
:root .reponse:hover, :root .rp-motif:hover { border-color: var(--action); background: var(--signal-doux); color: var(--encre); }
:root .reponse:active, :root .rp-motif:active { background: var(--papier-2); }
:root .rp-motif.choisi { background: var(--ciel); border-color: var(--action); color: var(--sur-chemise); font-weight: 700; }
:root .reponses .rep-aide { font-size: var(--t-sm); color: var(--encre-3); }

/* Champs : 16 px minimum, bordure à 3:1, erreur avec icône */
:root input[type=text], :root input[type=tel], :root input[type=email], :root input[type=date], :root select, :root textarea {
  font-family: var(--font-texte); font-size: max(var(--t-sm), 16px); color: var(--encre); background: var(--feuille);
  border: 2px solid var(--filet-fort); border-radius: var(--r-controle); min-height: 48px;
}
:root input:focus-visible, :root select:focus-visible, :root textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--encre); }
:root input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--action); }
:root label:has(> input[type=checkbox]) { min-height: 44px; }
:root input:user-invalid, :root select:user-invalid, :root textarea:user-invalid { border-color: var(--urgent); background: var(--urgent-fond); }

/* ---------- 4. Statuts : marque + libellé ---------- */
:root { --icone-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icone-attention: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2L19 18H1Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10 8v4.5M10 15v.2' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icone-urgent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 1.5h7l5 5v7l-5 5h-7l-5-5v-7z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10 5.5v5.5M10 14v.2' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --icone-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M10 9v5.5M10 5.6v.2' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --icone-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 1.5h8l4 4v13H4z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M7 10h6M7 13.5h6' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.badge { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; padding: .2rem .7rem .2rem .55rem; border-radius: 999px; font-size: var(--t-sm); font-weight: 700; border: 1.5px solid currentColor; white-space: nowrap; }
.badge::before { content: ""; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; }
.badge-favorable { color: var(--favorable); background: var(--favorable-fond); --icone: var(--icone-ok); }
.badge-verifier { color: var(--verifier); background: var(--verifier-fond); --icone: var(--icone-attention); }
.badge-urgent { color: var(--urgent); background: var(--urgent-fond); --icone: var(--icone-urgent); }

/* Encadrés des guides : une fiche bordée dont l'intitulé est un onglet, plus de liseré latéral */
:root .enc { position: relative; background: var(--feuille); border: 2px solid var(--enc, var(--filet-fort)); border-radius: 0 var(--r-feuille) var(--r-feuille) var(--r-feuille); margin-top: 2.75rem; padding: 1.1rem 1.3rem; }
:root .enc .lbl { position: absolute; left: -2px; bottom: 100%; display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .3rem .8rem .25rem .6rem;
  background: var(--enc-fond, var(--papier-2)); color: var(--enc-texte, var(--encre)); border: 2px solid var(--enc, var(--filet-fort)); border-bottom: 0; border-radius: var(--r-onglet); }
:root .enc .lbl::before { content: ""; width: 1.1em; height: 1.1em; flex: none; background: currentColor; -webkit-mask: var(--icone, var(--icone-info)) center / contain no-repeat; mask: var(--icone, var(--icone-info)) center / contain no-repeat; }
:root .enc-retenir { --enc: var(--lien); --enc-fond: var(--signal-doux); --enc-texte: var(--encre); --icone: var(--icone-info); }
:root .enc-vigilance { --enc: var(--verifier); --enc-fond: var(--verifier-fond); --enc-texte: var(--verifier); --icone: var(--icone-attention); }
:root .enc-urgence { --enc: var(--urgent); --enc-fond: var(--urgent-fond); --enc-texte: var(--urgent); --icone: var(--icone-urgent); }
:root .enc-source { --enc: var(--filet-fort); --enc-fond: var(--chemise-sable); --enc-texte: var(--sur-chemise); --icone: var(--icone-source); }
:root .enc .corps { font-size: var(--t-sm); color: var(--encre); }
:root .enc-retenir, :root .enc-vigilance, :root .enc-urgence, :root .enc-source { background: var(--feuille); }

/* Alertes d'urgence (OQTF) : fond, bordure pleine, icône, texte foncé */
:root .urgence-encart, :root .rp-alerte, :root .alerte-urgence, :root .cta-urgence {
  background: var(--urgent-fond); border: 2px solid var(--urgent); border-radius: var(--r-feuille); color: var(--encre);
}
:root .rp-alerte { padding: .85rem 1rem .85rem 2.6rem; position: relative; font-size: var(--t-sm); }
:root .rp-alerte::before, :root .urgence-encart .lbl::before, :root .alerte-urgence .lbl::before {
  content: ""; display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.25em; margin-right: .45rem; background: var(--urgent);
  -webkit-mask: var(--icone-urgent) center / contain no-repeat; mask: var(--icone-urgent) center / contain no-repeat;
}
:root .rp-alerte::before { position: absolute; left: .9rem; top: .95rem; margin: 0; }
:root .urgence-encart .lbl, :root .alerte-urgence .lbl { color: var(--urgent); font-size: var(--t-sm); }
:root .urgence-encart p { color: var(--encre); font-size: var(--t-sm); }
:root .alerte-ligne { font-size: var(--t-sm); color: var(--encre); }
:root .garantie { border-left: 0; padding-left: 0; display: flex; gap: .5rem; color: var(--encre-2); font-size: var(--t-sm); }
:root .garantie::before { content: ""; flex: none; width: 1.2em; height: 1.2em; margin-top: .2em; background: var(--favorable); -webkit-mask: var(--icone-ok) center / contain no-repeat; mask: var(--icone-ok) center / contain no-repeat; }

/* ---------- 5. Feuilles et chemises ---------- */
/* La carte de démarche est une chemise : onglet coloré, étiquette blanche, résumé dessous */
:root .carte {
  background: var(--feuille); border: 1.5px solid var(--trait); border-radius: 0 var(--r-feuille) var(--r-feuille) var(--r-feuille);
  box-shadow: none; padding: 0; margin-top: 18px; position: relative; display: flex; flex-direction: column;
}
:root a.carte::before {
  content: ""; position: absolute; left: -2px; top: -18px; width: 44%; height: 18px; background: var(--chemise, var(--chemise-sable));
  border: 1.5px solid var(--trait); border-bottom: 0; border-radius: var(--r-onglet);
}
:root .carte :is(h3, h4) { background: var(--chemise, var(--chemise-sable)); color: var(--sur-chemise); margin: 0; padding: .9rem 1.2rem .8rem; font-size: var(--t-md); border-bottom: 1.5px solid var(--trait); border-radius: 0 calc(var(--r-feuille) - 2px) 0 0; }
:root .carte p { color: var(--encre-2); font-size: var(--t-sm); padding: .9rem 1.2rem 1.2rem; margin: 0; }
:root .carte ul { color: var(--encre-2); font-size: var(--t-sm); margin: 0; padding: .9rem 1.2rem 1.2rem 2.4rem; }
:root .carte li { margin-bottom: .45rem; }
:root a.carte { transition: transform var(--duree-court) var(--courbe), box-shadow var(--duree-court) var(--courbe); }
:root a.carte:hover { border-color: var(--encre); transform: translateY(-3px); box-shadow: 0 3px 0 var(--trait); }
:root a.carte:hover :is(h3, h4) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
:root .carte .fleche { position: static; margin: auto 1.2rem 1rem; color: var(--encre); }
:root .carte-inactive { opacity: 1; border-style: dashed; }
:root .carte-inactive h3 { background: var(--papier-2); }

/* Feuille de document : le questionnaire, le rappel, le formulaire */
:root .cadre, :root .rappel, :root .formulaire, :root .cta {
  background: var(--feuille); border: 1.5px solid var(--trait); border-radius: var(--r-feuille); box-shadow: 0 2px 0 var(--filet);
}
:root .cta { background: var(--feuille); border-color: var(--encre); }

/* Le questionnaire est un dossier ouvert : le compteur devient l'onglet */
:root .outil .cadre { position: relative; margin-top: 26px; border-top-left-radius: 0; }
:root .outil .compteur {
  position: absolute; left: -2px; top: -26px; margin: 0; height: 26px; padding: .1rem .9rem 0; line-height: 24px;
  background: var(--ciel); color: var(--sur-chemise); border: 1.5px solid var(--trait); border-bottom: 0; border-radius: var(--r-onglet); font-size: var(--t-xs);
}
:root .outil .progression { height: 8px; border-radius: 4px; background: var(--papier-2); border: 1px solid var(--filet-fort); }
:root .outil .jauge { background: var(--action); border-radius: 3px; transition: width var(--duree-moyen) var(--courbe); }
:root .outil .question { font-family: var(--font-titre); font-size: var(--t-lg); }
:root .outil .retour { font-size: var(--t-sm); color: var(--encre-2); min-height: 44px; text-decoration: underline; text-underline-offset: .2em; }
:root .resultat-urgence { border-color: var(--urgent); border-width: 3px; }
:root .resultat .bloc p, :root .resultat .bloc ul { font-size: var(--t-sm); color: var(--encre); }
:root .resultat .bloc-urgence h3 { color: var(--urgent); display: flex; align-items: center; gap: .5rem; }
:root .resultat .bloc-urgence h3::before { content: ""; width: 1.2em; height: 1.2em; flex: none; background: currentColor; -webkit-mask: var(--icone-urgent) center / contain no-repeat; mask: var(--icone-urgent) center / contain no-repeat; }
:root .resultat .bloc-limite { border-left: 0; padding-left: 0; }
:root .resultat .reserve { font-size: var(--t-xs); color: var(--encre-2); }

/* Le rappel gratuit : la fiche bleu glacier posée sur le dossier */
:root .rappel { overflow: visible; position: relative; margin-top: 22px; border-top-left-radius: 0; }
:root .rp-tete { background: var(--ciel); color: var(--sur-chemise); border-bottom: 1.5px solid var(--trait); border-radius: 0 calc(var(--r-feuille) - 2px) 0 0; }
:root .rp-tete h2, :root .rp-intro { color: var(--sur-chemise); }
:root .rp-surtitre { position: absolute; left: -2px; top: -24px; height: 24px; line-height: 22px; padding: 0 .8rem; margin: 0; background: var(--ciel); color: var(--sur-chemise);
  border: 1.5px solid var(--trait); border-bottom: 0; border-radius: var(--r-onglet); font-size: var(--t-xs); }
:root .rp-etape { color: var(--encre-2); font-size: var(--t-xs); }
:root .rp-jauge { height: 8px; border-radius: 4px; background: var(--papier-2); border: 1px solid var(--filet-fort); }
:root .rp-jauge span { background: var(--action); }
:root .rp-consentement label { font-size: var(--t-sm); color: var(--encre-2); }
:root .rp-mentions { font-size: var(--t-xs); color: var(--encre-2); }
:root .rp-modifier { font-size: var(--t-sm); min-height: 44px; }

/* ---------- 6. Écrans ---------- */
/* En-tête : barre blanche, onglets de rubrique posés sur son filet */
:root .entete { background: var(--feuille); backdrop-filter: none; border-bottom: 1.5px solid var(--trait); }
:root .marque { min-height: 48px; color: var(--encre); text-decoration: none; }
:root .sigle { width: 36px; height: 30px; margin-top: 6px; position: relative; background: var(--action); color: var(--sur-action); border: 1.5px solid var(--trait);
  border-radius: 0 6px 6px 6px; font-family: var(--font-titre); font-weight: 700; font-size: .8rem; letter-spacing: 0; }
:root .sigle::before { content: ""; position: absolute; left: -2px; top: -8px; width: 16px; height: 8px; background: var(--action); border: 1.5px solid var(--trait); border-bottom: 0; border-radius: 4px 4px 0 0; }
:root .nom { font-family: var(--font-titre); font-weight: 700; font-size: 1.15rem; }
:root .marque .logo { display: block; height: 44px; width: auto; }
@media (width <= 560px) { :root .marque .logo { height: 40px; } }
:root .nav-bureau a { font-size: var(--t-sm); color: var(--encre); font-weight: 400; border-radius: var(--r-onglet); padding: .7rem .7rem .6rem; min-height: 44px; }
:root .nav-bureau > ul > li > a:hover { background: color-mix(in srgb, var(--chemise, var(--papier-2)) 45%, transparent); color: var(--encre); }
:root .nav-bureau > ul > li > a[aria-current=page] { background: var(--chemise, var(--chemise-sable)); color: var(--sur-chemise); font-weight: 700; box-shadow: inset 0 -3px 0 var(--action); }
:root .volet ul { border: 1.5px solid var(--trait); border-radius: 0 var(--r-feuille) var(--r-feuille) var(--r-feuille); box-shadow: 0 3px 0 var(--trait); }
:root .volet a { color: var(--encre); }
:root .volet a:hover { background: var(--signal-doux); }
:root .tel { font-size: var(--t-sm); color: var(--encre); font-weight: 700; min-height: 44px; align-items: center; }
@media (width > 1240px) { :root .tel { display: inline-flex; } }
@media (width <= 1420px) { :root .nav-bureau a { padding-inline: .5rem; } :root .barre { gap: .75rem; } }
@media (width <= 1240px) { :root .btn-agenda-mot { display: none; } :root .btn-agenda { width: 44px; padding: 0; justify-content: center; } }
:root .btn-agenda { min-height: 44px; gap: .5rem; padding-inline: 1rem; font-weight: 700; background: var(--action); border: 1.5px solid var(--action); color: var(--sur-action); }
:root .btn-agenda:hover, :root .btn-agenda[aria-current=page] { background: var(--action-survol); border-color: var(--action-survol); color: var(--sur-action); }
:root .bascule { border: 1.5px solid var(--trait); color: var(--encre); }
:root .nav-mobile a { min-height: 48px; display: flex; align-items: center; }
:root .nav-mobile .sous a { font-size: var(--t-sm); color: var(--encre-2); }

/* Accueil */
:root .hero { border-bottom: 1.5px solid var(--trait); }
:root .accroche { font-family: var(--font-titre); font-weight: 700; letter-spacing: -.025em; line-height: 1.06; }
:root .accroche { font-size: clamp(1.75rem, 1rem + 1.9vw, 2.4rem); text-wrap: balance; }
:root .accroche em::before { content: none; }
:root .accroche em { font-style: normal; color: var(--encre); display: inline; background: none; text-decoration: underline; text-decoration-color: var(--surligneur); text-decoration-thickness: .32em; text-underline-offset: -.12em; text-decoration-skip-ink: none; }
:root .hero h1 { text-wrap: pretty; font-family: var(--font-texte); font-weight: 700; color: var(--encre-2); font-size: var(--t-md); }
:root .parcours li { border-top: 1.5px solid var(--trait); }
:root .section-alt { background: var(--feuille); border-block: 1.5px solid var(--trait); }
:root .illustration img, :root .bandeau img { border-radius: var(--r-feuille); border: 1.5px solid var(--trait); }

/* Pages de rubrique et guides : bandeau de la chemise de la rubrique */
:root .fil { font-size: var(--t-xs); }
:root .fil a { color: var(--encre-2); text-decoration: underline; text-underline-offset: .2em; min-height: 32px; display: inline-flex; align-items: center; }
:root .entete-article, :root .page > header.hero {
  position: relative; margin-top: 22px; background: var(--feuille); border: 1.5px solid var(--trait); border-radius: 0 var(--r-feuille) var(--r-feuille) var(--r-feuille); padding: clamp(1.25rem, 3vw, 2rem);
}
:root .entete-article::before, :root .page > header.hero::before {
  content: ""; position: absolute; left: -2px; top: -22px; width: min(40%, 220px); height: 22px; background: var(--rubrique); border: 1.5px solid var(--trait); border-bottom: 0; border-radius: var(--r-onglet);
}
:root .entete-article .surtitre { display: inline-block; background: var(--rubrique); color: var(--sur-chemise); padding: .15rem .6rem; border-radius: 4px; border: 1.5px solid var(--trait); }
:root .signature { font-size: var(--t-xs); color: var(--encre-2); border-top: 1px solid var(--filet); }
:root .hero-meta { border-left: 2px solid var(--filet); color: var(--encre-2); }
:root .hero-meta .date { font-size: var(--t-base); color: var(--encre); }
:root .prose { font-size: var(--t-base); }
:root .prose h2 { border-top: 1.5px solid var(--trait); padding-top: 1.2rem; }
:root .prose li::marker { color: var(--encre); }
:root .prose th { background: var(--rubrique); color: var(--sur-chemise); font-size: var(--t-sm); }
:root .sommaire summary { font-size: var(--t-sm); color: var(--encre); min-height: 44px; display: flex; align-items: center; }
:root .sommaire a { color: var(--encre-2); border-left: 3px solid var(--filet); padding: .6rem 0 .6rem .8rem; min-height: 44px; display: block; overflow-wrap: anywhere; }
:root .sommaire { min-width: 0; }
@media (width <= 940px) { :root .page .corps:has(> .sommaire) { grid-template-columns: minmax(0, 1fr); } }
:root .prose, :root .enc .corps, :root .faq { overflow-wrap: break-word; }
@media (width <= 640px) { :root .prose table { display: block; max-width: 100%; overflow-x: auto; } :root .prose th, :root .prose td { padding: .55rem .6rem; } }
:root .sommaire a:hover { color: var(--encre); border-left-color: var(--rubrique); background: color-mix(in srgb, var(--rubrique) 25%, transparent); }
:root .faq .qr { border-bottom: 1px solid var(--filet); }
:root .faq dd { font-size: var(--t-sm); color: var(--encre-2); }
:root .avertissement { font-size: var(--t-xs); color: var(--encre-2); }

/* Rendez-vous */
:root .note-tarif { max-width: var(--mesure); margin: 1.25rem 0 0; padding: 1rem 1.2rem 1rem 2.9rem; position: relative; background: var(--ciel); color: var(--sur-chemise); border: 1.5px solid var(--trait); border-radius: var(--r-feuille); font-size: var(--t-sm); }
:root .note-tarif::before { content: ""; position: absolute; left: 1rem; top: 1.15rem; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--icone-info) center / contain no-repeat; mask: var(--icone-info) center / contain no-repeat; }
:root .note-tarif a { color: var(--sur-chemise); font-weight: 700; }
:root .groupe-creneaux .chips { display: flex; flex-wrap: wrap; gap: .6rem; }
:root .groupe-creneaux .chip { min-height: 48px; padding: .6rem 1rem; }
:root .etapes .num { color: var(--sur-chemise); background: var(--ciel); border: 1.5px solid var(--trait); border-radius: 50%; width: 2.2rem; height: 2.2rem; display: inline-grid; place-items: center; font-size: var(--t-sm); }
:root .cal-jour, :root .cal-nav { min-height: 44px; }
:root .cal-nav { min-width: 44px; }
@media (width >= 420px) { :root .cal-grille .cal-jour { min-width: 44px; } }
@media (width < 480px) { :root .formulaire { padding: 1.1rem .75rem; } :root .calendrier { padding: .7rem .4rem .9rem; } :root .cal-grille, :root .cal-jours { gap: 3px; } }
:root .cal-grille .cal-jour { border: 1.5px solid var(--filet-fort); color: var(--encre); }
:root .cal-grille .cal-jour:hover:not(:disabled) { border-color: var(--encre); color: var(--encre); background: var(--signal-doux); }
:root .cal-grille .cal-jour.choisi { background: var(--ciel); border: 1.5px solid var(--trait); color: var(--sur-chemise); font-weight: 700; }
:root .cal-grille .cal-jour:disabled { border-color: transparent; }
:root .aide, :root .cal-legende, :root .precision { font-size: var(--t-sm); color: var(--encre-2); }
:root legend { font-size: var(--t-sm); font-weight: 700; color: var(--encre); }
/* Étiquettes des formulaires, coordonnées et tableaux : même voix que le reste, plus de petites capitales */
:root .formulaire legend, :root .cal-sous-titre, :root .alerte-urgence .lbl, :root .page dt, :root thead th {
  font-family: var(--font-texte); text-transform: none; letter-spacing: 0; font-size: var(--t-sm); font-weight: 700; color: var(--encre);
}
:root .formulaire legend { font-family: var(--font-titre); font-size: var(--t-md); }
:root thead th { color: var(--encre-2); }
/* Le texte du consentement n'est pas une alerte : seul l'astérisque reste rouge */
:root .consentement label > span { color: var(--encre-2); }
/* Encadré « rétention » de la page contact : alerte complète, icône comprise */
:root:has(link[rel=canonical][href$="/contact/"]) .note { background: var(--urgent-fond); border: 2px solid var(--urgent); border-radius: var(--r-feuille); color: var(--encre); padding: 1rem 1.2rem 1rem 2.9rem; position: relative; }
:root:has(link[rel=canonical][href$="/contact/"]) .note::before { content: ""; position: absolute; left: 1rem; top: 1.1rem; width: 1.3em; height: 1.3em; background: var(--urgent); -webkit-mask: var(--icone-urgent) center / contain no-repeat; mask: var(--icone-urgent) center / contain no-repeat; }

/* Pied de page */
:root .pied { background: var(--encre); color: var(--table); border-top: 0; font-size: var(--t-sm); }
:root .pied .nom, :root .pied .titre-col { color: #fff; }
:root .pied .promesse, :root .pied .col li, :root .pied .col a, :root .pied .statut, :root .pied .bas, :root .pied .legal a { color: #D5DBE2; }
:root .pied .col a:hover, :root .pied .legal a:hover { color: #fff; }
:root .pied .col a, :root .pied .legal a { min-height: 32px; display: inline-flex; align-items: center; }
:root .pied .statut { font-size: var(--t-xs); }
:root .pied :focus-visible { outline-color: var(--surligneur); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .pied { background: #0A0C0F; border-top: 2px solid var(--filet); }
}



/* Menu regroupé : 4 entrées, sous-catégories nommées selon la situation */
:root [data-groupe="titre"] { --chemise: var(--chemise-bleu); }
:root [data-groupe="famille"] { --chemise: var(--chemise-orange); }
:root [data-groupe="probleme"] { --chemise: var(--chemise-rose); }
:root [data-groupe="nous"] { --chemise: var(--chemise-sable); }
:root .nav-bureau > ul { gap: .2rem; }
@media (width <= 1320px) { :root .menu-groupe { font-size: .9375rem; } :root .barre { gap: .6rem; } }
:root .menu-groupe { font: inherit; font-size: var(--t-sm); color: var(--encre); background: transparent; border: 0; cursor: pointer;
  min-height: 44px; padding: .6rem .6rem .55rem; border-radius: var(--r-onglet); display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
:root .menu-groupe::after { content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); }
:root .a-menu:hover > .menu-groupe, :root .a-menu:focus-within > .menu-groupe { background: color-mix(in srgb, var(--chemise) 45%, transparent); }
:root .a-menu.actif > .menu-groupe { background: var(--chemise); color: var(--sur-chemise); font-weight: 700; box-shadow: inset 0 -3px 0 var(--action); }
:root .volet { padding-top: 8px; }
:root .volet ul { border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; border-radius: 0; }
:root .volet-corps { background: var(--feuille); border: 1.5px solid var(--trait); border-top: 6px solid var(--chemise); border-radius: 0 0 var(--r-feuille) var(--r-feuille);
  box-shadow: 0 3px 0 var(--trait); padding: 1rem 1.1rem 1.1rem; display: grid; gap: 1.25rem; }
:root .volet-2 .volet-corps { grid-template-columns: repeat(2, minmax(14rem, 1fr)); width: max-content; max-width: min(40rem, 90vw); }
:root .volet-1 .volet-corps { width: 16rem; }
:root .a-menu[data-groupe="nous"] .volet, :root .a-menu[data-groupe="probleme"] .volet { left: auto; right: 0; }
:root .volet-titre { margin: 0 0 .4rem; font-size: var(--t-xs); font-weight: 700; color: var(--encre-2); text-transform: none; letter-spacing: 0; }
:root .volet a { padding: .5rem .55rem; border-radius: 6px; min-height: 40px; display: flex; align-items: center; white-space: normal; }
:root .volet a[aria-current=page] { background: var(--ciel); color: var(--sur-chemise); font-weight: 700; }
/* Mobile : groupes repliés, on n'ouvre que celui qui nous concerne */
:root .mobile-groupes > li { border-bottom: 1px solid var(--filet); }
:root .mobile-groupes summary { list-style: none; cursor: pointer; min-height: 52px; display: flex; align-items: center; gap: .75rem; font-weight: 700; font-size: var(--t-base); color: var(--encre); }
:root .mobile-groupes summary::-webkit-details-marker { display: none; }
:root .mobile-groupes summary::before { content: ""; flex: none; width: 22px; height: 16px; background: var(--chemise); border: 1.5px solid var(--trait); border-radius: 0 3px 3px 3px; box-shadow: -2px -5px 0 -2px var(--chemise); }
:root .mobile-groupes summary::after { content: ""; margin-left: auto; width: .55em; height: .55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--duree-court); }
:root .mobile-groupes details[open] summary::after { transform: rotate(-135deg); }
:root .mobile-titre { margin: .4rem 0 0 2.2rem; font-size: var(--t-xs); font-weight: 700; color: var(--encre-2); }
:root .mobile-groupes .sous { padding: 0 0 .5rem 2.2rem; }
:root .mobile-actions { margin-top: 1rem !important; display: grid; gap: .5rem; }
:root .mobile-actions a { font-weight: 700; }
:root .nav-mobile a[aria-current=page] { background: var(--ciel); color: var(--sur-chemise); font-weight: 700; border-radius: 6px; padding-left: .6rem; }
/* Accueil : cartes rangées par sous-catégorie */
:root .groupe-demarches + .groupe-demarches { margin-top: 2.25rem; }
:root .groupe-titre { font-size: var(--t-lg); margin: 0 0 .25rem; display: flex; align-items: center; gap: .6rem; }

/* Correctifs de la revue de fin */
/* 1. Le grand titre des rubriques retrouve la voix des titres ; seul le héros de l'accueil garde son h1 de signature */
:root .hero h1 { font-family: var(--font-titre); font-size: var(--t-2xl); color: var(--encre); text-wrap: balance; max-width: 22ch; }
:root section.hero h1 { font-family: var(--font-texte); font-size: var(--t-md); color: var(--encre-2); text-wrap: pretty; max-width: 44ch; }
/* 2. Guides : l'étiquette de rubrique est écrite dans l'onglet de la feuille */
:root .entete-article .surtitre { position: absolute; left: -2px; bottom: 100%; margin: 0; display: block; height: auto; min-height: 26px; max-width: calc(100% - 1rem);
  padding: .2rem .9rem .1rem; background: var(--rubrique); color: var(--sur-chemise); border: 1.5px solid var(--trait); border-bottom: 0; border-radius: var(--r-onglet); font-size: var(--t-xs); line-height: 1.4; }
:root .entete-article:has(.surtitre)::before { content: none; }
:root .entete-article { margin-top: 30px; }
/* 3. Résultat du questionnaire : la phrase d'introduction devient l'onglet de la feuille */
:root .outil .resultat { margin-top: 3.2rem; }
:root .outil .resultat > .surtitre { position: absolute; left: -2px; bottom: 100%; margin: 0; max-width: calc(100% - 1rem); padding: .3rem .9rem .2rem;
  background: var(--ciel); color: var(--sur-chemise); border: 1.5px solid var(--trait); border-bottom: 0; border-radius: var(--r-onglet); font-size: var(--t-xs); line-height: 1.35; }
:root .outil .resultat-urgence > .surtitre { background: var(--urgent-fond); color: var(--urgent); border-color: var(--urgent); border-width: 3px; border-bottom: 0; left: -3px; }
/* 4. Accueil : le slogan quitte la position de surtitre et se pose sous l'alerte, comme une signature */
:root section.hero .hero-grille > div:first-child { display: flex; flex-direction: column; }
:root section.hero .surtitre { order: 9; margin: 1.25rem 0 0; font-weight: 400; color: var(--encre-2); font-size: var(--t-sm); }
/* 5. Mobile : l'action principale tient dans le premier écran */
@media (width <= 480px) {
  :root section.hero { padding-block: 1.5rem 2rem; }
  :root .accroche { font-size: 1.6rem; margin-bottom: 1rem; text-wrap: balance; }
  :root section.hero h1 { font-size: var(--t-base); margin-bottom: .6rem; }
  :root section.hero .chapo { font-size: var(--t-base); line-height: 1.5; }
  :root section.hero .actions { margin-top: 1.1rem; }
}
/* 6. « Trois niveaux » : trois fiches dont l'onglet porte la cote */
:root .parcours { gap: 1.25rem; }
:root .parcours li { position: relative; border: 1.5px solid var(--trait); border-radius: 0 var(--r-feuille) var(--r-feuille) var(--r-feuille); background: var(--feuille); padding: 1.1rem 1.2rem 1.2rem; margin-top: 26px; }
:root .parcours .etape { position: absolute; left: -2px; bottom: 100%; margin: 0; padding: .1rem .8rem 0; min-width: 3.2rem; background: var(--chemise-sable); color: var(--sur-chemise);
  border: 1.5px solid var(--trait); border-bottom: 0; border-radius: var(--r-onglet); font-size: var(--t-sm); line-height: 1.5; }
/* 7. Grille d'étiquette fixe : les têtes d'une même rangée ont la même hauteur */
@supports (grid-template-rows: subgrid) {
  :root .grille > .carte { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  :root .grille > .carte:not(:has(> :nth-child(3))) { grid-row: span 2; }
}
/* 8. Rails latéraux affinés */
:root .sommaire a { border-left-width: 1px; }
:root .hero-meta { border-left-width: 1px; }


/* Accueil : repères, étapes, prix publiés, questions fréquentes */
:root .reperes-bande { padding-block: 0 1.5rem; }
:root .reperes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .75rem; }
:root .reperes li { border-left: 4px solid var(--action); background: var(--feuille); border-radius: 0 10px 10px 0; padding: .7rem 1rem; display: flex; flex-direction: column; gap: .1rem; }
:root .reperes strong { font-family: var(--font-titre); }
:root .reperes span { font-size: var(--t-sm); color: var(--encre-2, var(--encre)); }
:root .parcours-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; padding: 0; }
:root .suite-etapes { margin-top: 1.75rem; }
:root .prix-liste { list-style: none; margin: 1.25rem 0 0; padding: 0; border: 1.5px solid var(--trait); border-radius: 0 var(--r-feuille) var(--r-feuille) var(--r-feuille); background: var(--feuille); max-width: 52rem; }
:root .prix-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .85rem 1.2rem; }
:root .prix-liste li + li { border-top: 1px solid var(--trait); }
:root .prix-nom { font-weight: 700; display: flex; flex-direction: column; }
:root .prix-nom small, :root .prix-montant small { font-weight: 400; font-size: var(--t-sm); }
:root .prix-montant { font-family: var(--font-titre); font-weight: 700; white-space: nowrap; text-align: right; display: flex; flex-direction: column; }
:root .prix-note { max-width: 52rem; margin-top: 1rem; font-size: var(--t-sm); }
:root .lien-fort { font-weight: 700; color: var(--action); min-height: 44px; display: inline-flex; align-items: center; }
:root .contenant-etroit { max-width: 56rem; }
:root .faq { margin-top: 1.25rem; display: grid; gap: .6rem; }
:root .faq details { border: 1.5px solid var(--trait); border-radius: 10px; background: var(--feuille); }
:root .faq summary { cursor: pointer; font-weight: 700; padding: .8rem 2.6rem .8rem 1.1rem; min-height: 44px; list-style: none; position: relative; }
:root .faq summary::-webkit-details-marker { display: none; }
:root .faq summary::after { content: "+"; position: absolute; right: 1.1rem; top: .65rem; font-size: 1.3rem; line-height: 1; }
:root .faq details[open] summary::after { content: "−"; }
:root .faq summary:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
:root .faq details p { padding: 0 1.1rem 1rem; margin: 0; }
@media (width <= 560px) { :root .prix-liste li { flex-direction: column; gap: .25rem; } :root .prix-montant { text-align: left; flex-direction: row; gap: .35rem; align-items: baseline; } }

/* Premier rendez-vous gratuit, engagements négatifs */
:root .pastille-gratuit { display: inline-flex; width: fit-content; align-self: flex-start; max-width: 100%; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .35rem .9rem; border-radius: 999px; background: var(--ciel); color: var(--sur-chemise); font-weight: 700; font-size: var(--t-sm); }
:root .pastille-gratuit::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--action); flex: none; }
:root .jamais { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
:root .jamais li { background: var(--feuille); border: 1.5px solid var(--trait); border-radius: 10px; padding: 1rem 1.2rem; }
:root .jamais h3 { font-size: var(--t-md, 1.15rem); margin: 0 0 .4rem; display: flex; gap: .55rem; align-items: baseline; }
:root .jamais h3::before { content: "✕"; color: var(--action); font-size: .95em; flex: none; }
:root .jamais p { margin: 0; }

/* Expertise vérifiable : preuves + refus évitables */
:root .expertise { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
@media (width > 960px) { :root .expertise { grid-template-columns: 1.15fr 1fr; align-items: start; } }
:root .preuves { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
:root .preuves li { border-top: 3px solid var(--action); padding-top: .8rem; }
:root .preuves h3 { font-size: 1.1rem; margin: 0 0 .35rem; }
:root .preuves p { margin: 0; }
:root .preuves a { font-weight: 700; color: var(--action); white-space: nowrap; }
:root .pieges { background: var(--feuille); border: 1.5px solid var(--trait); border-radius: 0 var(--r-feuille) var(--r-feuille) var(--r-feuille); padding: 1.2rem 1.2rem .6rem; }
:root .pieges h3 { font-size: 1.15rem; margin: 0 0 .6rem; }
:root .pieges ul { list-style: none; margin: 0; padding: 0; }
:root .pieges li + li { border-top: 1px solid var(--trait); }
:root .pieges a { display: flex; flex-direction: column; gap: .2rem; padding: .75rem 2rem .75rem 0; color: var(--encre); text-decoration: none; position: relative; min-height: 44px; }
:root .pieges a::after { content: "→"; position: absolute; right: .25rem; top: .75rem; color: var(--action); font-weight: 700; }
:root .pieges a:hover strong { text-decoration: underline; }
:root .pieges a:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; border-radius: 4px; }
:root .pieges span { font-size: var(--t-sm); color: var(--encre-2); }
:root #sources { scroll-margin-top: 90px; }

/* Bandeau de consentement (Google Ads) : Refuser et Accepter ont le même poids, conformément à la CNIL */
:root .bandeau-cookies { position: fixed; z-index: 60; left: 1rem; right: 1rem; bottom: 1rem; max-width: 46rem; margin-inline: auto; background: var(--feuille); color: var(--encre);
  border: 1.5px solid var(--encre); border-radius: 0 var(--r-feuille) var(--r-feuille) var(--r-feuille); box-shadow: 0 6px 0 var(--trait); padding: 1rem 1.2rem; display: grid; gap: .75rem; }
:root .bandeau-cookies p { margin: 0; font-size: var(--t-sm); }
:root .bandeau-cookies a { color: var(--action); font-weight: 700; }
:root .bandeau-choix { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
:root .bandeau-choix .btn { min-width: 9rem; min-height: 44px; }
:root .gerer-cookies { background: none; border: 0; padding: 0 0 0 1rem; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }
@media print { :root .bandeau-cookies { display: none; } }

/* Bandeau Master 2 au-dessus de l'en-tête */
:root .bandeau-master { background: var(--action); color: var(--sur-action); font-size: var(--t-sm); }
:root .bandeau-master p { margin: 0 auto; padding-block: .5rem; text-align: center; line-height: 1.4; }
:root .bandeau-master strong { font-weight: 700; }
@media (width <= 520px) { :root .bandeau-master .bm-sep, :root .bandeau-master .bm-suite { display: none; } }

/* ---------- 7. Mouvement (idées Magic UI, réécrites en CSS sans dépendance) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Transition entre questions : la nouvelle série de réponses glisse de 8 px et apparaît (d'après « blur-fade », sans flou) */
  :root .outil .reponse { animation: arrivee var(--duree-moyen) var(--courbe) both; }
  :root .outil .reponse:nth-child(2) { animation-delay: 30ms; } :root .outil .reponse:nth-child(3) { animation-delay: 60ms; }
  :root .outil .reponse:nth-child(4) { animation-delay: 90ms; } :root .outil .reponse:nth-child(n+5) { animation-delay: 120ms; }
  /* Apparition du résultat : les blocs se posent l'un après l'autre (d'après « animated-list », sans zoom) */
  :root .resultat:not([hidden]) > * { animation: arrivee 260ms var(--courbe) both; }
  :root .resultat:not([hidden]) > :nth-child(2) { animation-delay: 60ms; } :root .resultat:not([hidden]) > :nth-child(3) { animation-delay: 120ms; }
  :root .resultat:not([hidden]) > :nth-child(4) { animation-delay: 180ms; } :root .resultat:not([hidden]) > :nth-child(n+5) { animation-delay: 240ms; }
  /* Progression de lecture des guides : un filet à la couleur de la rubrique sous l'en-tête (d'après « scroll-progress »), sans script */
  @supports (animation-timeline: scroll()) {
    :root:has(.entete-article) .entete::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--rubrique); transform-origin: left; transform: scaleX(0);
      animation: lecture linear both; animation-timeline: scroll(root);
    }
  }
}
@keyframes arrivee { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lecture { to { transform: scaleX(1); } }
/* Mouvement réduit : les états changent sans déplacement, la progression reste lisible */
@media (prefers-reduced-motion: reduce) {
  :root a.carte:hover { transform: none; }
  :root .outil .jauge, :root .rp-jauge span { transition: none; }
}

/* Page « Suis-je naturalisé ? » : les deux liens officiels */
:root .verif-liens { display: grid; gap: .75rem; margin: 1.25rem 0 1.5rem; }
@media (min-width: 640px) { :root .verif-liens { grid-template-columns: 1fr 1fr; } }
:root .prose a.verif-lien { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 12px; background: var(--action); color: #fff; text-decoration: none; min-height: 44px; }
:root .prose a.verif-lien:hover { filter: brightness(1.08); }
:root .prose a.verif-lien:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
:root .verif-num { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--action); font-weight: 700; }
:root .verif-texte { display: grid; gap: .15rem; }
:root .verif-texte strong { font-size: 1.05rem; color: #fff; }
:root .verif-texte span { font-size: .85rem; color: #fff; opacity: .92; }