/*
  Patron de marque — feuille de style unique, sans dépendance.
  Direction : le registre des marques. Colonne de lecture étroite comme une fiche d'enregistrement,
  vert « registre » pour l'action, violet « tampon encreur » pour les repères, chiffres en mono
  (numéros de classe, redevances, délais). Titres en grotesque élargie, comme sur un tampon.
*/

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/public-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/public-sans-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-500-latin.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --papier: #f2f4f0;
  --feuille: #ffffff;
  --feuille-2: #e8ece7;
  --encre: #17211d;
  --gris: #56625c;
  --filet: #d4dbd5;
  --registre: #124d40;
  --registre-fort: #0b382e;
  --sur-registre: #ffffff;
  --tampon: #6a2b8a;
  --tampon-doux: #f2eaf6;
  --ok: #1d6b3c;
  --ok-doux: #e6f4ea;
  --alerte: #7f4c00;
  --alerte-doux: #fdf3dc;
  --alerte-filet: #e6c37a;
  --danger: #a3271c;
  --info-doux: #e7f0ec;
  --info-filet: #b9d3c8;
  --pied-fond: #0f2a24;
  --pied-texte: #cfdcd5;
  --pied-lien: #ffffff;
  --ombre: 0 1px 2px rgba(15, 42, 36, .06), 0 4px 14px rgba(15, 42, 36, .07);

  --f-titre: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-chiffre: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --rayon: 6px;
  --large: 72rem;
  --lecture: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier: #0e1412;
    --feuille: #161f1c;
    --feuille-2: #1d2925;
    --encre: #e3eae6;
    --gris: #a0aea7;
    --filet: #2c3934;
    --registre: #6cc7ad;
    --registre-fort: #93dcc6;
    --sur-registre: #08201a;
    --tampon: #cfa6e8;
    --tampon-doux: #2a1f33;
    --ok: #7dd3a0;
    --ok-doux: #15291e;
    --alerte: #f0c56b;
    --alerte-doux: #2c2312;
    --alerte-filet: #6b5320;
    --danger: #ff8f80;
    --info-doux: #14241f;
    --info-filet: #2d4a40;
    --pied-fond: #090e0c;
    --pied-texte: #a8b7b0;
    --pied-lien: #e3eae6;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #0e1412; --feuille: #161f1c; --feuille-2: #1d2925; --encre: #e3eae6; --gris: #a0aea7; --filet: #2c3934;
  --registre: #6cc7ad; --registre-fort: #93dcc6; --sur-registre: #08201a; --tampon: #cfa6e8; --tampon-doux: #2a1f33;
  --ok: #7dd3a0; --ok-doux: #15291e; --alerte: #f0c56b; --alerte-doux: #2c2312; --alerte-filet: #6b5320; --danger: #ff8f80;
  --info-doux: #14241f; --info-filet: #2d4a40; --pied-fond: #090e0c; --pied-texte: #a8b7b0; --pied-lien: #e3eae6;
  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 1.0625rem/1.65 var(--f-texte); }
img, svg { max-width: 100%; }
a { color: var(--registre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--registre-fort); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tampon); outline-offset: 2px; border-radius: 2px; }
strong { font-weight: 650; }

.cadre { max-width: var(--large); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.evitement { position: absolute; left: -999px; top: 0; z-index: 20; background: var(--registre); color: var(--sur-registre); padding: .5rem .8rem; }
.evitement:focus { left: 8px; top: 8px; }
.hors-champ { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.discret { color: var(--gris); font-size: .875rem; }
.num, .chiffre { font-family: var(--f-chiffre); font-variant-numeric: tabular-nums; }

/* ---------- En-tête ---------- */
.entete { background: var(--feuille); border-top: 4px solid var(--registre); border-bottom: 1px solid var(--filet); }
.entete-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: .75rem; }
.marque { display: inline-flex; align-items: center; gap: .55rem; color: var(--encre); text-decoration: none; margin: 0; }
.marque:hover { color: var(--encre); }
.tampon { width: 2.1rem; height: 2.1rem; color: var(--tampon); flex: none; }
.marque-nom { font-family: var(--f-titre); font-weight: 800; font-stretch: 118%; font-size: 1.12rem; letter-spacing: -.01em; line-height: 1; }
.marque-nom span { font-weight: 500; color: var(--gris); }
.nav-principale { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.nav-principale a { color: var(--encre); text-decoration: none; font-weight: 600; font-size: .95rem; padding-block: .3rem; border-bottom: 2px solid transparent; }
.nav-principale a:hover, .nav-principale a[aria-current] { border-bottom-color: var(--tampon); color: var(--encre); }

/* ---------- Fil d'Ariane, tête de page ---------- */
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 1.25rem 0 0; padding: 0; font-size: .85rem; color: var(--gris); }
.ariane li + li::before { content: "/"; margin-right: .25rem; color: var(--filet); }
.ariane a { color: var(--gris); }
.page { max-width: var(--lecture); padding-block: 1.5rem 3rem; }
.type-tool .page, .type-hub .page, .type-home .page { max-width: none; }
.tete-page { margin-bottom: 1.75rem; }
.surtitre { font-family: var(--f-chiffre); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tampon); margin: 0 0 .5rem; }
h1, h2, h3 { font-family: var(--f-titre); font-stretch: 108%; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; color: var(--encre); }
h1 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 2.75rem); font-weight: 800; margin: 0 0 .6rem; }
h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.65rem); font-weight: 750; margin: 2.6rem 0 .8rem; padding-top: 1.2rem; border-top: 1px solid var(--filet); }
h3 { font-size: 1.15rem; font-weight: 700; margin: 1.8rem 0 .5rem; font-stretch: 100%; }
.date-maj { font-size: .875rem; color: var(--gris); margin: 0; }
.chapo, .lead { font-size: 1.16rem; line-height: 1.6; color: var(--encre); }
.page p, .page li { max-width: 68ch; }
.page ul, .page ol { padding-left: 1.3rem; }
.page li { margin-block: .3rem; }
.page li::marker { color: var(--tampon); }

/* ---------- Sommaire ---------- */
.sommaire { background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.sommaire-titre { font-family: var(--f-chiffre); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); margin: 0 0 .4rem; }
.sommaire ol { margin: 0; padding-left: 1.3rem; columns: 2 18rem; column-gap: 2rem; }
.sommaire li { break-inside: avoid; font-size: .95rem; }

/* ---------- Encadrés ---------- */
.encart { border: 1px solid var(--info-filet); background: var(--info-doux); border-radius: var(--rayon); padding: .9rem 1.15rem; margin: 1.4rem 0; }
.encart > :first-child { margin-top: 0; }
.encart > :last-child { margin-bottom: 0; }
.encart-titre { font-weight: 700; margin: 0 0 .3rem; }
.encart--attention { background: var(--alerte-doux); border-color: var(--alerte-filet); }
.encart--attention .encart-titre { color: var(--alerte); }
.encart--cle { background: var(--tampon-doux); border-color: color-mix(in srgb, var(--tampon) 35%, transparent); }
.encart--cle .encart-titre { color: var(--tampon); }
.avertissement { font-size: .875rem; color: var(--gris); border-top: 1px dashed var(--filet); padding-top: .8rem; margin-top: 2rem; }

/* ---------- Tableaux ---------- */
.tableau { overflow-x: auto; margin: 1.25rem 0; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--feuille); }
.tableau table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.tableau caption { text-align: left; font-weight: 700; padding: .7rem .9rem 0; }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: .6rem .9rem; border-bottom: 1px solid var(--filet); }
.tableau thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); background: var(--feuille-2); }
.tableau tbody tr:last-child > * { border-bottom: 0; }
.tableau tbody th { font-weight: 600; }
.tableau .num { text-align: right; }
.rubrique-comparatifs.type-article .page { max-width: none; }
.rubrique-comparatifs.type-article .page > * { max-width: var(--lecture); }
.rubrique-comparatifs.type-article .page > .tableau { max-width: none; }

/* ---------- Étapes d'une procédure ---------- */
.etapes { list-style: none; counter-reset: etape; padding: 0 !important; margin: 1.25rem 0; display: grid; gap: .7rem; }
.etapes > li { counter-increment: etape; position: relative; padding: .1rem 0 .1rem 2.6rem; margin: 0; }
.etapes > li::before { content: counter(etape); position: absolute; left: 0; top: .05rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 2px solid var(--tampon); color: var(--tampon); font: 500 .85rem/1.6rem var(--f-chiffre); text-align: center; }

/* ---------- Questions ---------- */
.questions { display: grid; gap: .5rem; margin: 1rem 0; }
.questions details { background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); padding: .1rem 1rem; }
.questions summary { cursor: pointer; font-weight: 650; padding: .7rem 0; }
.questions details[open] summary { border-bottom: 1px solid var(--filet); margin-bottom: .6rem; }
.questions details > div > :last-child { margin-bottom: .8rem; }

/* ---------- Sources ---------- */
.sources { font-size: .9rem; }
.sources ul { padding-left: 1.1rem; }
.sources li { margin-block: .25rem; }

/* ---------- Boutons, mentions ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: .55rem 1.1rem; border-radius: var(--rayon); border: 2px solid var(--registre); background: var(--registre); color: var(--sur-registre); font: 650 .98rem/1.2 var(--f-texte); text-decoration: none; cursor: pointer; }
.bouton:hover { background: var(--registre-fort); border-color: var(--registre-fort); color: var(--sur-registre); text-decoration: none; }
.bouton--second { background: transparent; color: var(--registre); }
.bouton--second:hover { background: var(--info-doux); color: var(--registre-fort); }
.pub { display: inline-block; font: 500 .68rem/1 var(--f-chiffre); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); border: 1px solid var(--filet); border-radius: 3px; padding: .2rem .3rem; vertical-align: middle; }

.passer-action { background: var(--feuille); border: 1px solid var(--filet); border-left: 4px solid var(--tampon); border-radius: var(--rayon); padding: 1rem 1.2rem; margin: 2rem 0; }
.passer-action-titre { font-family: var(--f-titre); font-weight: 750; font-size: 1.1rem; margin: 0 0 .6rem; }
.passer-action ul { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .8rem; }
.passer-action li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0; max-width: none; }
.passer-action li > span:first-child { flex: 1 1 18rem; }

/* ---------- Lettre d'information ---------- */
.lettre { display: grid; gap: .8rem; background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.2rem; margin: 2.5rem 0 1rem; }
.lettre p { margin: 0; }
.lettre-titre { font-family: var(--f-titre); font-weight: 750; font-size: 1.1rem; margin-bottom: .3rem !important; }
.lettre-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.lettre-form input[type="email"] { flex: 1 1 14rem; min-width: 0; }

/* ---------- Formulaires ---------- */
input[type="text"], input[type="email"], input[type="number"], input[type="date"], select, textarea {
  font: inherit; font-size: 1rem; color: var(--encre); background: var(--feuille); border: 1px solid color-mix(in srgb, var(--gris) 55%, transparent);
  border-radius: var(--rayon); padding: .55rem .7rem; min-height: 2.75rem; max-width: 100%;
}
textarea { min-height: 8rem; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--tampon) 45%, transparent); outline-offset: 0; border-color: var(--tampon); }
.champ { display: grid; gap: .3rem; margin: 0 0 1rem; }
.champ > label, .champ > .champ-titre { font-weight: 650; font-size: .95rem; }
.aide { font-size: .85rem; color: var(--gris); margin: 0; }
fieldset { border: 1px solid var(--filet); border-radius: var(--rayon); padding: .8rem 1rem 1rem; margin: 0 0 1rem; min-width: 0; }
legend { font-weight: 650; padding: 0 .3rem; }
.coches { display: grid; gap: .35rem; }
.coches label { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; align-items: start; font-weight: 400; cursor: pointer; }
.coches label > :not(input) { grid-column: 2; }
.coches input { margin-top: .3rem; accent-color: var(--registre); width: 1.05rem; height: 1.05rem; flex: none; }

/* ---------- Fiches (listes de pages) ---------- */
.fiches { list-style: none; padding: 0 !important; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.fiche { margin: 0; max-width: none !important; }
.fiche a { display: grid; gap: .35rem; height: 100%; padding: 1rem 1.1rem; background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); color: var(--encre); text-decoration: none; }
.fiche a:hover { border-color: var(--registre); box-shadow: var(--ombre); }
.fiche-titre { font-family: var(--f-titre); font-weight: 750; font-size: 1.08rem; line-height: 1.25; color: var(--registre); }
.fiche-texte { font-size: .93rem; color: var(--gris); }

/* ---------- Accueil ---------- */
.accroche { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem; align-items: center; padding-block: 2rem 1rem; }
.accroche h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.4rem); font-stretch: 112%; }
.accroche-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.section-titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-top: 3rem; border-top: 1px solid var(--filet); padding-top: 1.2rem; }
.section-titre h2 { margin: 0; padding: 0; border: 0; }
.parcours { list-style: none; padding: 0 !important; counter-reset: p; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0 0; }
.parcours li { counter-increment: p; background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1rem 1.1rem; margin: 0; max-width: none !important; }
.parcours li::before { content: "Étape " counter(p); display: block; font: 500 .75rem/1 var(--f-chiffre); letter-spacing: .08em; text-transform: uppercase; color: var(--tampon); margin-bottom: .5rem; }
.parcours strong { display: block; font-family: var(--f-titre); font-size: 1.05rem; margin-bottom: .3rem; }
.parcours p { margin: 0 0 .5rem; font-size: .94rem; color: var(--gris); }

/* Le récépissé : pièce maîtresse de l'accueil */
.recepisse { position: relative; background: var(--feuille); border: 1px solid var(--filet); border-radius: 4px; box-shadow: var(--ombre); padding: 1.3rem 1.4rem 1.2rem; font-size: .92rem; transform: rotate(1.2deg); }
.recepisse::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--filet); border-radius: 2px; pointer-events: none; }
.recepisse-tete { font-family: var(--f-chiffre); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin: 0 0 .2rem; }
.recepisse-nom { font-family: var(--f-titre); font-weight: 900; font-stretch: 125%; font-size: clamp(1.3rem, .9rem + 1.3vw, 1.85rem); line-height: 1.1; letter-spacing: .02em; margin: .2rem 0 .8rem; }
.recepisse dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; }
.recepisse dt { color: var(--gris); }
.recepisse dd { margin: 0; font-family: var(--f-chiffre); text-align: right; }
.recepisse dd.texte { font-family: var(--f-texte); }
.recepisse-total { border-top: 1px dashed var(--filet); padding-top: .4rem; margin-top: .2rem; font-weight: 700; }
.classes-puces { display: inline-flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.puce { display: inline-block; min-width: 2rem; text-align: center; font: 500 .8rem/1.6 var(--f-chiffre); border: 1px solid var(--registre); color: var(--registre); border-radius: 3px; padding: 0 .3rem; }
.coup-de-tampon { position: absolute; right: -.7rem; top: -1rem; background: var(--feuille); transform: rotate(-14deg); border: 3px double var(--tampon); color: var(--tampon); border-radius: 6px; padding: .25rem .6rem; font: 900 1rem/1 var(--f-titre); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .coup-de-tampon { animation: tampon .5s cubic-bezier(.2, 1.4, .5, 1) .35s both; }
  @keyframes tampon { from { transform: rotate(-14deg) scale(1.6); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: .9; } }
}

/* ---------- Grille des 45 classes de Nice ---------- */
.nice { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; margin: 1rem 0; max-width: 30rem; }
.nice span { aspect-ratio: 1; display: grid; place-items: center; font: 500 .78rem/1 var(--f-chiffre); border-radius: 3px; background: var(--feuille-2); color: var(--gris); border: 1px solid transparent; }
.nice span.service { background: transparent; border-color: var(--filet); }
.nice span.choisie { background: var(--tampon); color: var(--feuille); border-color: var(--tampon); font-weight: 700; }
.nice-legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: var(--gris); }
.nice-legende i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -1px; margin-right: .3rem; background: var(--feuille-2); }
.nice-legende i.service { background: transparent; border: 1px solid var(--filet); }
.nice-legende i.choisie { background: var(--tampon); }

/* ---------- Outils ---------- */
.outil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin: 1.5rem 0 2rem; }
.outil-saisie, .outil-resultat { background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.2rem; min-width: 0; }
.outil-resultat { position: sticky; top: 1rem; }
.outil-resultat h2 { margin: 0 0 .8rem; padding: 0; border: 0; font-size: 1.2rem; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 2px solid var(--encre); margin-top: .6rem; padding-top: .6rem; }
.total strong { font-family: var(--f-chiffre); font-size: 1.6rem; font-weight: 500; }
.lignes { width: 100%; border-collapse: collapse; font-size: .94rem; }
.lignes td { padding: .35rem 0; border-bottom: 1px dotted var(--filet); vertical-align: top; }
.lignes td:last-child { text-align: right; font-family: var(--f-chiffre); white-space: nowrap; padding-left: 1rem; }
.lignes tr.sous td { color: var(--gris); font-size: .86rem; }
.lignes tr.groupe td { font-weight: 700; padding-top: .9rem; border-bottom: 1px solid var(--filet); font-family: var(--f-texte); }
.ligne-num { display: inline-flex; gap: .5rem; align-items: center; }
.ligne-num input { width: 6rem; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .6rem; margin: 1rem 0 0; }
.compare div { border: 1px solid var(--filet); border-radius: var(--rayon); padding: .6rem .7rem; }
.compare span { display: block; font-size: .8rem; color: var(--gris); }
.compare strong { font-family: var(--f-chiffre); font-weight: 500; font-size: 1.15rem; }

.activites { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .4rem 1rem; }
.classe-liste { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .7rem; }
.classe-liste li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .8rem; margin: 0; max-width: none !important; border-bottom: 1px solid var(--filet); padding-bottom: .7rem; }
.classe-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.classe-n { font: 500 1.4rem/1 var(--f-chiffre); color: var(--tampon); text-align: center; padding-top: .15rem; }
.classe-liste p { margin: 0; font-size: .92rem; }
.classe-liste .pourquoi { color: var(--gris); font-size: .86rem; margin-top: .2rem; }

.frise { list-style: none; padding: 0 !important; margin: 0; position: relative; }
.frise::before { content: ""; position: absolute; left: .45rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--filet); }
.frise li { position: relative; padding: 0 0 1rem 1.8rem; margin: 0; max-width: none !important; }
.frise li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--feuille); border: 2px solid var(--registre); }
.frise li.passee::before { background: var(--registre); }
.frise li.cle::before { border-color: var(--tampon); background: var(--tampon); }
.frise time { display: block; font-family: var(--f-chiffre); font-size: .9rem; color: var(--tampon); }
.frise strong { display: block; }
.frise p { margin: .1rem 0 0; font-size: .88rem; color: var(--gris); }
.etat { display: inline-block; font: 500 .7rem/1 var(--f-chiffre); text-transform: uppercase; letter-spacing: .05em; padding: .2rem .35rem; border-radius: 3px; margin-left: .35rem; vertical-align: 2px; }
.etat--passe { background: var(--feuille-2); color: var(--gris); }
.etat--proche { background: var(--alerte-doux); color: var(--alerte); }
.etat--avenir { background: var(--ok-doux); color: var(--ok); }
.boutons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---------- Pied de page ---------- */
.pied { background: var(--pied-fond); color: var(--pied-texte); font-size: .92rem; margin-top: 2rem; }
.pied a { color: var(--pied-lien); }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; padding-block: 2.5rem 1.5rem; }
.pied-marque .marque, .pied-marque .marque-nom span { color: var(--pied-texte); }
.pied-marque .marque-nom { color: var(--pied-lien); }
.pied-marque .tampon { color: var(--pied-lien); }
.pied-titre { font-family: var(--f-chiffre); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .5rem; color: var(--pied-texte); opacity: .8; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.pied-legal { border-top: 1px solid color-mix(in srgb, var(--pied-texte) 25%, transparent); padding-block: 1rem 1.5rem; font-size: .84rem; }
.pied-legal p { margin: .3rem 0; max-width: 90ch; }

/* ---------- Petits écrans ---------- */
@media (max-width: 960px) {
  .parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .accroche, .outil { grid-template-columns: minmax(0, 1fr); }
  .outil-resultat { position: static; }
  .recepisse { transform: none; max-width: 26rem; }
}
@media (max-width: 480px) {
  .parcours { grid-template-columns: minmax(0, 1fr); }
  body { font-size: 1rem; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); }
  .nice { gap: 3px; }
  .nice span { font-size: .68rem; }
}
@media print {
  .entete, .pied, .lettre, .ariane, .sommaire, .passer-action, .outil-saisie, .boutons { display: none !important; }
  body { background: #fff; color: #000; }
  .outil { display: block; }
}