/* ÉtatCivil Connect — thème « Minuit & or » (dossier de passation design du 14/10/2026).
   Règles : aucune couleur du drapeau ; bleu nuit pour les surfaces sombres ; ivoire au fond ;
   or = accent unique (sélection, étape en cours, compteurs, bandeau) ; framboise = danger ;
   Bricolage Grotesque (titres), Figtree (texte), JetBrains Mono (identifiants).
   Thème unique, choisi délibérément : couleurs explicites partout. */
:root {
  --nuit: #0c1a33;
  --nuit-2: #1a2d52;
  --nuit-bordure: #34507e;
  --sur-nuit: #dce3ef;
  --sur-nuit-doux: #9aabc7;
  --sur-nuit-clair: #c5d0e3;
  --or: #d4af5a;
  --or-fonce: #c9a24a;
  --action: #14284b;
  --desactive: #e3e1da;
  --fond: #f4f3ef;
  --surface: #ffffff;
  --ligne: #e3e1da;
  --ligne-forte: #d3d0c6;
  --ligne-douce: #efede7;
  --texte: #141b2b;
  --texte-doux: #5b6375;
  --texte-discret: #8a8f9c;
  --a-valider-fond: #e6ecf6;
  --a-valider: #1e3a6b;
  --verif-fond: #f6eedb;
  --verif: #7a5a12;
  --danger-fond: #fbe4ea;
  --danger: #9f1239;
  --danger-fort: #7f0f2e;
  --danger-bordure: #ebb3c6;
  --citoyen-fond: #ece6d8;
  --citoyen: #3e3a2e;
  --controle-fond: #e9e1ee;
  --controle: #5b3e70;
  --serie-1: #1e3a6b;
  --serie-2: #c9a24a;
  --papier: #fffdf8;
  --papier-encre: #1b2233;
  /* Élément sélectionné dans une liste ou un tableau ; option cochée d'un choix de décision. */
  --selection-fond: #faf5e8;
  --choix-fond: #f5f7fb;
  --ombre: 0 12px 32px rgba(12, 26, 51, 0.08);

  --titres: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --police: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --police-acte: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  color-scheme: light;
}

/* --- Mode nuit : mêmes jetons, valeurs sombres ; l'or reste l'accent unique, les actes restent sur papier clair --- */
:root[data-theme='nuit'] {
  color-scheme: dark;
  --fond: #0b1424;
  --surface: #152238;
  --ligne: #26375a;
  --ligne-forte: #3a4f7a;
  --ligne-douce: #1d2c4a;
  --texte: #e8edf7;
  --texte-doux: #aab6cf;
  --texte-discret: #8391ad;
  --action: #3f67b0;
  --desactive: #2a3650;
  --a-valider-fond: #1b2f56;
  --a-valider: #b9c9ea;
  --verif-fond: #3a2e10;
  --verif: #e6c36a;
  --danger-fond: #3d1522;
  --danger: #f28ca8;
  --danger-fort: #ffb3c6;
  --danger-bordure: #7a2a44;
  --citoyen-fond: #2b2719;
  --citoyen: #e2d9bf;
  --controle-fond: #2d2338;
  --controle: #cdb6e0;
  --selection-fond: #2a2716;
  --choix-fond: #1b2f56;
  --ombre: 0 12px 32px rgba(0, 0, 0, 0.45);
}
/* En mode nuit, ce qui était écrit « couleur nuit » sur fond clair s'écrit en clair — sauf sur les documents
   « papier » (acte, récépissé, page de registre), qui restent clairs avec leur encre sombre. */
:root[data-theme='nuit'] :is(h1, h2, h3, legend, .fil b, .menu-compte summary b, .nav-agent button[aria-current='page'], .etapes li.fait, .etapes li.courant,
  .onglets button[aria-selected='true'], .transmis dd, .vide b, .json b, .chiffres b, .resultat .tete b, .etape-carte.courant b, .etapes-form button.fait,
  .etapes-form button[aria-current='step'], .logo-repli, .connexion-portail b, .groupe .portail > b, .etapes-connexion .fait, .etapes-connexion .courant,
  .segment button[aria-pressed='true'], .marque.claire, .onglets-bas button[aria-current='page']):not(:where(.acte, .acte-apercu, .planche-registre) *) { color: var(--texte); }
:root[data-theme='nuit'] .menu-compte summary:hover, :root[data-theme='nuit'] .menu-compte[open] > summary { background: rgba(255, 255, 255, 0.08); }
:root[data-theme='nuit'] .plaque-logo { background: #fff; border-radius: 12px; }
.theme { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: var(--surface); color: var(--texte); cursor: pointer; }
.theme:hover { border-color: var(--or); color: var(--or); }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 15px/1.5 var(--police); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
#racine { min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3 { font-family: var(--titres); margin: 0; text-wrap: balance; letter-spacing: -0.02em; color: var(--nuit); }
h1 { font-size: clamp(1.9rem, 3.2vw, 2.4rem); line-height: 1.05; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: var(--action); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.mono, .code { font-family: var(--mono); font-weight: 500; letter-spacing: 0; font-size: 0.92em; }
.doux { color: var(--texte-doux); }
.discret { color: var(--texte-discret); }
.petit { font-size: 0.87rem; }
.pile { display: grid; gap: 12px; }
.pile-l { display: grid; gap: 20px; }
.ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ecarte { justify-content: space-between; }
.min0 { min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Bandeau de démonstration (or, texte nuit) --- */
.bandeau-demo { background: var(--or); color: var(--nuit); font-size: 13px; padding-block: 7px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.bandeau-demo button { background: none; border: 0; color: var(--nuit); font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px 0; min-height: 28px; }

/* --- Marque --- */
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.marque strong { font-family: var(--titres); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; display: block; line-height: 1.1; }
.marque strong span { color: var(--or); }
.marque small { display: block; font-size: 12px; color: var(--sur-nuit-doux); }
.marque.claire { color: var(--nuit); }
.marque.claire small { color: var(--texte-doux); }

/* --- Boutons (pilules) --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 0 20px; min-height: 46px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--ligne-forte); background: var(--surface); color: var(--texte); text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--action); }
.btn.principal { background: var(--action); border-color: var(--action); color: #fff; font-weight: 800; }
.btn.principal:hover { background: var(--nuit); }
.btn.or { background: var(--or); border-color: var(--or); color: var(--nuit); font-weight: 800; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 800; }
.btn.danger-texte { background: none; border-color: transparent; color: var(--danger); padding-inline: 12px; }
.btn.lien { background: none; border-color: transparent; color: var(--action); padding-inline: 10px; text-decoration: underline; }
.btn.grand { min-height: 50px; padding-inline: 24px; }
.btn:disabled, .btn[aria-disabled='true'] { background: var(--desactive); border-color: var(--desactive); color: var(--texte-discret); cursor: not-allowed; }
.btn.danger-texte:disabled { background: none; border-color: transparent; }
.btn.sur-nuit { background: transparent; border-color: var(--nuit-bordure); color: #fff; }
.btn.blanc { background: #fff; border-color: #fff; color: var(--nuit); }

/* --- Badges d'état --- */
.badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; font-size: 12px; font-weight: 800; padding: 2px 10px; white-space: nowrap; }
.badge.grand { font-size: 13.5px; padding: 6px 14px; }
.badge.a-valider { background: var(--a-valider-fond); color: var(--a-valider); }
.badge.verif { background: var(--verif-fond); color: var(--verif); }
.badge.danger { background: var(--danger-fond); color: var(--danger); }
.badge.fait { background: var(--nuit); color: var(--or); }
.badge.neutre { background: var(--ligne-douce); color: var(--texte-doux); }
.badge.compteur { background: var(--or); color: var(--nuit); }

/* --- Avatars (initiales) --- */
.avatar { flex: none; width: 40px; height: 40px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: var(--or); color: var(--nuit); }
.avatar.sante { background: var(--danger-fond); color: var(--danger); }
.avatar.etat-civil { background: var(--a-valider-fond); color: var(--a-valider); }
.avatar.organisme { background: var(--verif-fond); color: var(--verif); }
.avatar.citoyen { background: var(--citoyen-fond); color: var(--citoyen); }
.avatar.controle { background: var(--controle-fond); color: var(--controle); }
.avatar.photo { padding: 0; overflow: hidden; background: #fff; }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mon profil : en-tête d'identité (photo, nom, rattachement, actions photo), puis sections. */
.panneau.profil h3 { margin: 6px 0 0; font-size: 1.05rem; padding-top: 14px; border-top: 1px solid var(--ligne); }
.panneau.profil h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.profil-entete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.profil-entete .avatar { width: 96px; height: 96px; border-radius: 28px; font-size: 32px; }
.profil-entete h2 { font-size: 1.3rem; }
.profil-photo-actions { display: grid; gap: 6px; justify-items: start; max-width: 220px; }
.profil-photo-actions small { font-size: 12px; line-height: 1.3; }
@media (max-width: 640px) { .profil-entete { grid-template-columns: auto minmax(0, 1fr); } .profil-photo-actions { grid-column: 1 / -1; } }

/* ================= Pages publiques ================= */
.public-entete { background: var(--nuit); color: var(--sur-nuit); }
.public-entete .barre { max-width: 1200px; margin: 0 auto; padding-block: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.public-entete nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.public-entete nav a, .public-entete nav button:not(.btn) { color: #fff; text-decoration: none; font-weight: 600; padding: 10px 12px; border-radius: 999px; background: none; border: 0; cursor: pointer; min-height: 44px; }
.public-entete nav a:hover, .public-entete nav button:not(.btn):hover { background: var(--nuit-2); }
.heros { max-width: 1200px; margin: 0 auto; padding-block: 36px 52px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 34px; }
.heros h1 { color: #fff; font-size: clamp(2.2rem, 5.2vw, 3.9rem); max-width: 16ch; }
.heros h1 span { color: var(--or); }
.heros p { color: var(--sur-nuit-clair); font-size: 1.08rem; max-width: 58ch; }
.entrees { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.entree { border-radius: 24px; padding: 22px; display: grid; gap: 10px; align-content: start; text-decoration: none; text-align: left; background: var(--nuit-2); color: var(--sur-nuit); border: 0; cursor: pointer; min-height: 186px; }
.entree b { font-family: var(--titres); font-size: 1.35rem; color: #fff; letter-spacing: -0.01em; }
.entree span { font-size: 0.92rem; }
.entree .aller { color: var(--or); font-weight: 800; }
.entree.premiere { background: var(--or); color: var(--nuit); }
.entree.premiere b, .entree.premiere .aller { color: var(--nuit); }
.entree:hover { outline: 2px solid var(--or); }
.public-corps { max-width: 1200px; width: 100%; margin: 0 auto; padding-block: 44px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 52px; }
.principes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.principes li { background: var(--surface); border: 1px solid var(--ligne); border-radius: 22px; padding: 20px; display: grid; gap: 6px; align-content: start; }
.principes .num { font-family: var(--titres); font-size: 2rem; font-weight: 800; color: var(--or-fonce); line-height: 1; }
.principes p { color: var(--texte-doux); font-size: 0.93rem; }
.parcours { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.parcours button { width: 100%; height: 100%; text-align: left; background: var(--nuit); color: var(--sur-nuit-clair); border: 0; border-radius: 18px; padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 0.86rem; }
.parcours button b { color: #fff; display: block; font-size: 0.95rem; }
.parcours .n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--or); color: var(--nuit); font-weight: 800; font-size: 0.8rem; display: grid; place-items: center; }
.parcours button:hover { outline: 2px solid var(--or); }
.groupes { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.groupe { background: var(--surface); border: 1px solid var(--ligne); border-radius: 22px; padding: 18px; display: grid; gap: 4px; }
.groupe h3 { font-family: var(--police); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-discret); font-weight: 800; padding: 0 4px 6px; }
.groupe .portail { padding: 10px 4px 2px; display: grid; gap: 1px; border-top: 1px solid var(--ligne-douce); }
.groupe .portail:first-of-type { border-top: 0; }
.groupe .portail > b { font-size: 0.93rem; color: var(--nuit); }
.groupe .portail > small { color: var(--texte-discret); font-size: 0.8rem; }
.profil { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 14px; padding: 8px 4px; cursor: pointer; min-height: 56px; }
.profil:hover { background: var(--fond); }
.profil b { display: block; font-size: 0.95rem; }
.profil span.r { color: var(--texte-doux); font-size: 0.83rem; }
.profil svg { margin-left: auto; flex: none; color: var(--texte-discret); }
.portail-vide { padding: 10px 4px; font-size: 0.86rem; color: var(--texte-discret); border-top: 1px solid var(--ligne-douce); }
.public-pied { background: var(--nuit); color: var(--sur-nuit-doux); font-size: 0.86rem; margin-top: auto; }
.public-pied div { max-width: 1200px; margin: 0 auto; padding-block: 22px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.avertissement-portails { background: var(--surface); border: 1px dashed var(--ligne-forte); border-radius: 18px; padding: 14px 18px; color: var(--texte-doux); font-size: 0.92rem; }

/* --- Connexion en deux étapes --- */
.connexion { flex: 1; display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); }
.connexion aside { background: var(--nuit); color: var(--sur-nuit); padding: 40px max(24px, env(safe-area-inset-left, 0px)) 40px 48px; display: flex; flex-direction: column; gap: 30px; }
.connexion aside h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.05; font-weight: 800; }
.connexion aside h2 span { color: var(--or); }
.connexion aside ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.connexion aside li { display: flex; gap: 14px; align-items: flex-start; font-size: 0.92rem; color: var(--sur-nuit-doux); }
.connexion aside li b { display: block; color: #fff; font-size: 1rem; }
.connexion aside .pastille { flex: none; width: 42px; height: 42px; border-radius: 14px; background: var(--nuit-2); color: var(--or); display: grid; place-items: center; }
.connexion main { display: grid; place-items: center; padding: 40px max(16px, env(safe-area-inset-right, 0px)) 40px 16px; }
.connexion form { width: min(440px, 100%); display: grid; gap: 18px; }
.etapes-connexion { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; font-weight: 700; color: var(--texte-discret); }
.etapes-connexion span { display: grid; gap: 8px; }
.etapes-connexion span::before { content: ''; height: 5px; border-radius: 5px; background: var(--ligne); }
.etapes-connexion .fait { color: var(--nuit); }
.etapes-connexion .fait::before { background: var(--action); }
.etapes-connexion .courant { color: var(--nuit); }
.etapes-connexion .courant::before { background: var(--or); }
.acces-rapide { border-top: 1px solid var(--ligne); padding-top: 16px; display: grid; gap: 10px; }
.acces-rapide > span { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-discret); font-weight: 800; }
.puces { display: flex; gap: 8px; flex-wrap: wrap; }
.puces button { border: 0; border-radius: 999px; padding: 0 14px; min-height: 44px; font-weight: 800; cursor: pointer; }
@media (max-width: 820px) { .connexion { grid-template-columns: 1fr; } .connexion aside { padding: 28px 16px; } .connexion aside ul { display: none; } }

/* --- Champs --- */
/* `align-content: start` : dans une rangée à plusieurs champs, une case ne s'étire pas pour compenser l'aide d'une voisine. */
.champ { display: grid; gap: 6px; min-width: 0; align-content: start; }
.champ > span { font-size: 0.86rem; font-weight: 700; color: var(--texte); display: flex; justify-content: space-between; gap: 8px; }
.champ input, .champ select, .champ textarea { width: 100%; border: 1.5px solid var(--ligne); background: var(--surface); border-radius: 14px; padding: 0 16px; min-height: 52px; }
.champ textarea { padding: 12px 16px; min-height: 92px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--action); outline: none; box-shadow: 0 0 0 3px rgba(212, 175, 90, 0.35); }
.champ small { color: var(--texte-doux); }
.champ-groupe { position: relative; display: flex; }
.champ-groupe input { padding-right: 100px; }
.champ-groupe button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-weight: 800; color: var(--action); min-height: 44px; padding: 0 12px; cursor: pointer; }
.champ-code input { font-family: var(--mono); font-size: 1.6rem; letter-spacing: 0.4em; text-align: center; min-height: 64px; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.case { display: flex; gap: 10px; align-items: center; cursor: pointer; min-height: 44px; }
.case input { width: 22px; height: 22px; accent-color: var(--action); flex: none; }
.segment { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.segment button { min-height: 52px; border-radius: 14px; border: 1.5px solid var(--ligne); background: var(--surface); font-weight: 700; cursor: pointer; }
.segment button[aria-pressed='true'] { border-color: var(--action); background: var(--a-valider-fond); color: var(--nuit); box-shadow: inset 0 0 0 1px var(--action); }
fieldset { border: 1px solid var(--ligne); border-radius: 22px; padding: 18px 20px 20px; margin: 0; display: grid; gap: 14px; min-width: 0; background: var(--surface); }
fieldset.accent { border: 1.5px solid var(--or); }
legend { font-family: var(--titres); font-weight: 800; font-size: 1.05rem; padding: 0 8px; color: var(--nuit); }
.recherche { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--ligne); border-radius: 999px; padding: 0 16px; min-height: 46px; background: var(--surface); min-width: 0; }
.recherche input { flex: 1; border: 0; background: none; min-width: 0; outline: none; min-height: 42px; }
.recherche:focus-within { border-color: var(--action); }

/* ================= Espace agent ================= */
.agent { flex: 1; display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.laterale { background: var(--nuit); color: var(--sur-nuit); padding: 22px 14px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.laterale .marque { padding: 0 8px; }
.carte-org { background: var(--nuit-2); border-radius: 16px; padding: 12px 14px; display: grid; gap: 2px; }
.carte-org span { font-size: 11.5px; font-weight: 800; color: var(--sur-nuit-doux); letter-spacing: 0.05em; text-transform: uppercase; }
.carte-org b { color: #fff; font-size: 14.5px; line-height: 1.3; }
.carte-org small { color: var(--sur-nuit-doux); font-size: 12.5px; line-height: 1.35; }
.nav-agent { display: flex; flex-direction: column; gap: 4px; }
.nav-agent button { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 14px; border-radius: 999px; border: 0; background: none; color: var(--sur-nuit); font-weight: 600; text-align: left; cursor: pointer; line-height: 1.25; }
.nav-agent button:hover { background: var(--nuit-2); }
.nav-agent button[aria-current='page'] { background: var(--fond); color: var(--nuit); font-weight: 800; }
.nav-agent .badge { margin-left: auto; }
.nav-agent svg { flex: none; }
.carte-agent { margin-top: auto; background: var(--nuit-2); border-radius: 16px; padding: 12px; display: grid; gap: 10px; }
.carte-agent .qui { display: flex; gap: 10px; align-items: center; min-width: 0; }
.carte-agent b { display: block; color: #fff; font-size: 14px; line-height: 1.25; }
.carte-agent small { color: var(--sur-nuit-doux); font-size: 12.5px; }
.carte-agent .actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.reseau { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--nuit-bordure); border-radius: 999px; padding: 0 12px; min-height: 36px; background: none; color: var(--sur-nuit); cursor: pointer; font-size: 13px; }
.reseau i { width: 8px; height: 8px; border-radius: 50%; background: var(--or); }
.reseau.coupe { border-color: var(--danger-bordure); color: #fff; background: var(--danger); }
.reseau.coupe i { background: #fff; }
.carte-agent .deconnexion { color: var(--sur-nuit); background: none; border: 0; text-decoration: underline; font-weight: 700; cursor: pointer; min-height: 36px; font-size: 13.5px; }
.principal-agent { min-width: 0; display: flex; flex-direction: column; }
.fil { background: var(--surface); border-bottom: 1px solid var(--ligne); padding-block: 14px; padding-left: 28px; padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 66px; font-size: 14px; color: var(--texte-doux); }
.fil b { color: var(--nuit); }
/* Messagerie : messages en bulles, les miens à droite ; relance encadrée. */
.messages { display: grid; gap: 10px; }
.message { max-width: 80%; background: var(--fond); border-radius: 16px 16px 16px 4px; padding: 10px 14px; display: grid; gap: 4px; justify-self: start; }
.message.moi { justify-self: end; background: var(--nuit); color: #fff; border-radius: 16px 16px 4px 16px; }
.message .auteur { font-size: 12px; opacity: 0.75; }
.message.relance { border: 1.5px dashed var(--verif); background: var(--verif-fond); color: var(--texte); }
.message.moi.relance { color: var(--texte); }
/* Bloc utilisateur en haut à droite : état réseau et menu « Mon compte » (profil, déconnexion). */
.compte { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.fil .reseau { color: var(--texte); border-color: var(--ligne-forte); }
.menu-compte { position: relative; }
.menu-compte summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 999px; min-height: 48px; max-width: 320px; }
.menu-compte summary::-webkit-details-marker { display: none; }
.menu-compte summary:hover, .menu-compte[open] > summary { background: rgba(12, 26, 51, 0.06); }
.menu-compte summary b { display: block; color: var(--nuit); font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-compte summary small { display: block; color: var(--texte-discret); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-compte.sombre summary:hover, .menu-compte.sombre[open] > summary { background: rgba(255, 255, 255, 0.08); }
.menu-compte.sombre summary b { color: #fff; }
.menu-compte.sombre summary small { color: var(--sur-nuit-doux); font-family: var(--mono); }
.menu-compte.sombre summary svg { color: #fff; }
.menu-compte .deroulant { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); color: var(--texte); border: 1px solid var(--ligne); border-radius: 16px; box-shadow: var(--ombre); min-width: 240px; padding: 8px; display: grid; gap: 2px; z-index: 30; }
.menu-compte .deroulant small { padding: 6px 12px 8px; border-bottom: 1px solid var(--ligne); margin-bottom: 4px; font-family: var(--mono); font-size: 12px; }
.menu-compte .deroulant button { text-align: left; background: none; border: 0; padding: 0 12px; min-height: 44px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; display: flex; gap: 10px; align-items: center; color: inherit; }
.menu-compte .deroulant button:hover { background: var(--fond); }
.menu-compte .deroulant button.danger-texte { color: var(--danger); }
@media (max-width: 640px) { .menu-compte summary > span { display: none; } }
.travail { padding: 28px 32px 48px; min-width: 0; display: grid; gap: 20px; align-content: start; }
.titre-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.titre-page > div { max-width: 680px; display: grid; gap: 6px; }
.titre-page p { color: var(--texte-doux); }
@media (max-width: 900px) {
  .agent { grid-template-columns: 1fr; }
  .laterale { position: static; height: auto; padding: 14px; gap: 12px; }
  .laterale .carte-org { display: none; }
  .nav-agent { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .nav-agent button { white-space: nowrap; flex: none; }
  .carte-agent { margin-top: 0; }
  .fil { padding-left: 16px; }
  .travail { padding: 20px 16px 40px; }
}

/* --- Filtres --- */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.filtres button { min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; background: var(--surface); color: var(--texte); border: 1.5px solid var(--ligne); }
.filtres button[aria-pressed='true'] { background: var(--nuit); color: #fff; border-color: var(--nuit); }

/* --- File de travail + dossier --- */
.atelier { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.file { flex: 1 1 320px; max-width: 400px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.file > button { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: 100%; text-align: left; border-radius: 20px; padding: 14px 16px; cursor: pointer; background: var(--surface); color: var(--texte); border: 1px solid var(--ligne); }
.file > button:hover { border-color: var(--ligne-forte); }
.file > button[aria-current='true'] { background: var(--nuit); color: #fff; border-color: var(--nuit); box-shadow: inset 4px 0 0 var(--or); }
.file > button.traite { color: var(--texte-discret); }
/* File à ordre imposé : intitulés de section, rang dans la file, dossiers en lecture seule (reçus par « Dossier suivant », jamais choisis). */
.file .intitule { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-discret); margin: 8px 4px 0; }
.file > div.lecture { display: flex; flex-direction: column; gap: 6px; width: 100%; border-radius: 20px; padding: 12px 16px; background: var(--surface); color: var(--texte-doux); border: 1px dashed var(--ligne-forte); }
.file > div.lecture .haut b { font-weight: 600; color: var(--texte-doux); }
.file .rang { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--or); color: var(--nuit); font-weight: 800; font-size: 12px; margin-right: 6px; }
.file > .btn.grand { width: 100%; }
.file .raison-file { font-size: 13px; color: var(--texte-doux); margin: -2px 4px 4px; }
.file .haut { display: flex; justify-content: space-between; gap: 8px; width: 100%; }
.file .haut b { font-size: 15px; }
.file .haut span { font-size: 12.5px; opacity: 0.7; white-space: nowrap; }
.file .bas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.file .bas .mono { font-size: 12px; opacity: 0.75; }
.dossier { flex: 999 1 480px; min-width: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: 28px; overflow: clip; }
.dossier .corps { padding: 26px 28px 8px; display: grid; gap: 18px; }
.dossier .entete-dossier { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.surtitre { font-size: 13px; font-weight: 800; color: var(--texte-discret); letter-spacing: 0.04em; text-transform: uppercase; }
.dossier h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.015em; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.etapes li { display: grid; gap: 8px; font-size: 13px; font-weight: 700; color: var(--texte-discret); }
.etapes li::before { content: ''; height: 8px; border-radius: 8px; background: var(--ligne); }
.etapes li.fait { color: var(--nuit); }
.etapes li.fait::before { background: var(--action); }
.etapes li.courant { color: var(--nuit); }
.etapes li.courant::before { background: var(--or); }
.deux-blocs { display: flex; flex-wrap: wrap; gap: 18px; }
.deux-blocs > * { flex: 1 1 260px; min-width: 0; }
.defs { margin: 0; display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); align-content: start; }
.defs dt { color: var(--texte-doux); font-size: 14px; padding: 9px 12px 9px 0; border-top: 1px dashed var(--ligne); }
.defs dd { margin: 0; font-weight: 700; padding: 9px 0; border-top: 1px dashed var(--ligne); overflow-wrap: anywhere; }
.controles { border: 0; background: var(--fond); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.controles legend { float: left; width: 100%; padding: 0 0 6px; font-family: var(--police); font-weight: 800; font-size: 14.5px; }
.controles .case { font-size: 14.5px; }
.apercu { background: var(--nuit); color: var(--sur-nuit); border-radius: 18px; padding: 14px 18px; display: grid; gap: 8px; }
.apercu b.titre { color: #fff; font-size: 14px; }
.apercu .liste-org { display: flex; gap: 6px; flex-wrap: wrap; }
.apercu .liste-org span { background: var(--nuit-2); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.apercu .liste-org b { color: #fff; }
.apercu small { color: var(--sur-nuit-doux); font-size: 12.5px; }
.barre-actions { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--ligne); padding: 16px 28px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; z-index: 2; }
.barre-actions .raison { flex: 1 1 200px; text-align: right; font-size: 13.5px; color: var(--texte-doux); }
.encart-gel { background: var(--danger-fond); border-radius: 18px; padding: 16px 18px; display: grid; gap: 12px; color: var(--danger-fort); }
.encart-gel b { display: block; }
.encart-gel input { flex: 1 1 260px; border: 1.5px solid var(--danger-bordure); border-radius: 999px; padding: 0 16px; background: var(--surface); color: var(--texte); min-height: 46px; }
.encart { border-radius: 18px; padding: 14px 18px; display: grid; gap: 6px; }
.encart.info { background: var(--a-valider-fond); color: var(--a-valider); }
.encart.verif { background: var(--verif-fond); color: var(--verif); }
.encart.danger { background: var(--danger-fond); color: var(--danger-fort); }
.encart.ok { background: var(--nuit); color: var(--sur-nuit); }
.encart.ok b { color: var(--or); }
.encart.neutre { background: var(--fond); color: var(--texte-doux); }
.encart b { font-weight: 800; }
.candidat { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--ligne); border-radius: 18px; padding: 12px 14px; cursor: pointer; }
.candidat:has(input:checked) { border-color: var(--action); background: var(--a-valider-fond); }
.candidat input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--action); flex: none; }

/* --- Cartes et panneaux --- */
.panneau { background: var(--surface); border: 1px solid var(--ligne); border-radius: 24px; padding: 22px 24px; display: grid; gap: 14px; min-width: 0; align-content: start; }
.panneau > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.panneau.sombre { background: var(--nuit); color: var(--sur-nuit); border-color: var(--nuit); }
.panneau.sombre h2, .panneau.sombre h3 { color: #fff; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.grille-cote { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .grille-cote { grid-template-columns: 1fr; } }
.liste { display: grid; border: 1px solid var(--ligne); border-radius: 22px; overflow: hidden; background: var(--surface); }
.liste > button, .liste > div.element { display: grid; gap: 4px; text-align: left; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--ligne-douce); background: var(--surface); cursor: pointer; color: inherit; width: 100%; }
.liste > :last-child { border-bottom: 0; }
.liste > button:hover { background: var(--fond); }
.liste > button[aria-pressed='true'] { background: var(--selection-fond); box-shadow: inset 4px 0 0 var(--or); }
.liste .titre { font-weight: 800; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.liste .avec-icone { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.icone-type { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--a-valider-fond); color: var(--a-valider); }
.icone-type.deces { background: var(--controle-fond); color: var(--controle); }
.icone-type.suivi { background: var(--verif-fond); color: var(--verif); }
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--ligne); flex-wrap: wrap; }
.onglets button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 14px; font-weight: 700; color: var(--texte-doux); cursor: pointer; margin-bottom: -1px; min-height: 46px; }
.onglets button[aria-selected='true'] { color: var(--nuit); border-bottom-color: var(--or); font-weight: 800; }
.transmis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.transmis > div { border-radius: 18px; padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.transmis .oui { background: var(--a-valider-fond); color: var(--a-valider); }
.transmis .non { background: var(--fond); border: 1.5px dashed var(--ligne-forte); color: var(--texte-doux); }
.transmis b.t { display: flex; gap: 8px; align-items: center; font-weight: 800; }
.transmis dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; }
.transmis dt { font-size: 14px; }
.transmis dd { margin: 0; font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--nuit); overflow-wrap: anywhere; }
.transmis ul { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.choix-decision { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.choix-decision label { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--ligne); border-radius: 18px; padding: 14px 16px; cursor: pointer; }
.choix-decision label:has(input:checked) { border-color: var(--action); background: var(--choix-fond); box-shadow: inset 0 0 0 1px var(--action); }
.choix-decision input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--action); }
.choix-decision b { display: block; }
.choix-decision small { color: var(--texte-doux); }

/* --- Tableaux --- */
.defile { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th { text-align: left; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); font-weight: 800; padding: 10px 12px; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--ligne-douce); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; }
tbody tr.cliquable { cursor: pointer; }
tbody tr.cliquable:hover td { background: var(--fond); }
tbody tr[aria-selected='true'] td { background: var(--selection-fond); box-shadow: inset 4px 0 0 var(--or); }
tbody tr[aria-selected='true'] td + td { box-shadow: none; }

/* --- Messages --- */
.notice { border-radius: 18px; padding: 12px 16px; display: grid; gap: 4px; }
.notice.info { background: var(--a-valider-fond); color: var(--a-valider); }
.notice.alerte { background: var(--verif-fond); color: var(--verif); }
.notice.danger { background: var(--danger-fond); color: var(--danger-fort); }
.notice.ok { background: var(--nuit); color: var(--sur-nuit); }
.notice.ok b { color: var(--or); }
.notice b { font-weight: 800; }
.vide { border: 1.5px dashed var(--ligne-forte); border-radius: 22px; padding: 28px 18px; text-align: center; color: var(--texte-doux); display: grid; gap: 6px; justify-items: center; background: var(--surface); }
.vide b { color: var(--nuit); }
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; z-index: 50; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--nuit); color: #fff; border-radius: 999px; padding: 12px 22px; box-shadow: 0 16px 40px rgba(12, 26, 51, 0.3); display: flex; gap: 16px; align-items: center; animation: monte 0.2s ease-out; }
.toast b { color: var(--or); }
.toast.danger { background: var(--danger); }
.toast.danger b { color: #fff; }
.toast.avec-action { padding: 8px 8px 8px 22px; }
.toast .btn { min-height: 44px; }
@keyframes monte { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
@media (max-width: 600px) { .toast { border-radius: 18px; } }

/* --- Données reçues --- */
.json { background: var(--fond); border-radius: 14px; padding: 10px 14px; font-size: 0.86rem; display: grid; gap: 3px; }
.json div { display: flex; gap: 10px; overflow-wrap: anywhere; }
.json span:first-child { color: var(--texte-doux); min-width: 130px; }
.json b { font-family: var(--mono); font-weight: 600; color: var(--nuit); }

/* --- Indicateurs --- */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.chiffres > div { background: var(--surface); border: 1px solid var(--ligne); border-radius: 22px; padding: 18px 18px 16px; display: grid; gap: 4px; align-content: start; }
.chiffres b { font-family: var(--titres); font-size: 2rem; font-weight: 800; color: var(--nuit); line-height: 1.05; letter-spacing: -0.02em; }
.chiffres span { font-size: 0.86rem; color: var(--texte-doux); }
.barres svg { width: 100%; height: auto; display: block; }
.barres text { fill: var(--texte-doux); font-size: 11px; font-family: var(--police); }
.barres text.valeur { font-weight: 800; font-size: 11px; }
.legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.86rem; color: var(--texte-doux); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.jauge { height: 8px; border-radius: 8px; background: var(--ligne-douce); overflow: hidden; min-width: 80px; }
.jauge i { display: block; height: 100%; background: var(--action); border-radius: 8px; }
.alerte-ligne { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--ligne-douce); }
.alerte-ligne:first-child { border-top: 0; }
.alerte-ligne > i { align-self: stretch; border-radius: 4px; background: var(--or); }
.alerte-ligne > i.elevee { background: var(--danger); }

/* --- Document d'acte (papier) --- */
.acte { background: var(--papier); color: var(--papier-encre); border-radius: 6px; box-shadow: var(--ombre); display: grid; grid-template-columns: 150px minmax(0, 1fr); font-family: var(--police-acte); max-width: 820px; border: 1px solid #e3dcc8; border-top: 3px solid var(--or); }
.acte .marge { border-right: 1px solid #e3dcc8; padding: 22px 12px; font-size: 0.78rem; line-height: 1.45; display: grid; align-content: start; gap: 10px; color: #4a4f5c; }
.acte .marge h4 { margin: 0; font-size: 0.72rem; font-weight: 600; font-variant: small-caps; letter-spacing: 0.06em; color: #6b6450; }
.acte .corps { padding: 26px 30px; display: grid; gap: 14px; }
.acte .republique { text-align: center; display: grid; gap: 2px; }
.acte .republique b { font-variant: small-caps; letter-spacing: 0.12em; font-size: 1rem; }
.acte .republique i { font-size: 0.82rem; color: #6b6450; }
.acte .filet { height: 2px; width: 120px; background: var(--or-fonce); margin: 6px auto 0; }
.acte h3 { font-family: var(--police-acte); font-size: 1.45rem; text-align: center; font-weight: 700; font-variant: small-caps; letter-spacing: 0.04em; color: var(--papier-encre); }
.acte .numero { text-align: center; font-family: var(--mono); font-weight: 600; letter-spacing: 0.04em; font-size: 0.9rem; }
.acte .texte { font-size: 1.04rem; line-height: 1.75; text-align: justify; hyphens: auto; }
.acte .texte strong { font-variant: small-caps; letter-spacing: 0.03em; }
.acte .pied { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 18px; align-items: end; border-top: 1px solid #e3dcc8; padding-top: 14px; font-size: 0.86rem; }
.acte .signataire { display: flex; gap: 14px; align-items: flex-end; min-width: 0; }
.acte .signataire > div { min-width: 0; flex: 1 1 auto; }
.acte .tampon { width: 96px; height: 96px; object-fit: contain; flex: none; transform: rotate(-6deg); opacity: 0.92; mix-blend-mode: multiply; }
.acte .signature-manuscrite { display: block; height: 52px; max-width: 180px; object-fit: contain; object-position: left bottom; margin-bottom: 2px; mix-blend-mode: multiply; }
.acte .qr { display: grid; gap: 4px; justify-items: center; font-family: var(--police); font-size: 0.68rem; color: #4a4f5c; text-align: center; }
.acte .qr svg { width: 108px; height: 108px; }
/* Sceau de la République en filigrane (variable --filigrane posée par le composant), sous le texte. */
.acte, .acte-apercu { position: relative; overflow: hidden; }
.acte::before, .acte-apercu::before { content: ''; position: absolute; inset: 0; background: var(--filigrane) center / min(62%, 340px) no-repeat; opacity: 0.09; pointer-events: none; }
.acte-apercu::before { background-size: 72%; opacity: 0.08; }
.acte > *, .acte-apercu > * { position: relative; }
.acte-cadre { display: grid; gap: 10px; max-width: 820px; }
/* Historique d'une demande d'usager : frise verticale, une pastille or par étape. */
.historique { list-style: none; margin: 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--ligne); display: grid; gap: 10px; font-size: 0.88rem; }
.historique li { position: relative; line-height: 1.45; }
.historique li::before { content: ''; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 3px var(--surface); }
.historique li.rejet::before { background: var(--danger); }
.historique q { display: block; margin-top: 2px; color: var(--texte-doux); font-style: italic; quotes: '« ' ' »'; }
.prochaine-etape { border-radius: 14px; padding: 10px 14px; background: var(--a-valider-fond); color: var(--a-valider); font-size: 0.9rem; }
.prochaine-etape b { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
/* Récépissé de déclaration de naissance : papier d'acte sans marge, filigrane « PROVISOIRE ». */
.acte.recepisse { grid-template-columns: minmax(0, 1fr); }
.acte.recepisse::after { content: 'PROVISOIRE'; position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(3rem, 9vw, 5.5rem) / 1 var(--police); letter-spacing: 0.18em; color: rgba(184, 146, 63, 0.12); transform: rotate(-24deg); pointer-events: none; }
.recepisse h4 { margin: 0 0 6px; font-family: var(--police); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b6450; }
.recepisse .avertissement { text-align: center; font-family: var(--police); font-weight: 800; color: #9f1239; font-size: 0.92rem; }
.recepisse .identifiants { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.recepisse .identifiants div { background: #f6f0de; border: 1px solid #e3d5ae; border-radius: 6px; padding: 10px 14px; display: grid; gap: 2px; }
.recepisse .identifiants span { font-family: var(--police); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6450; }
.recepisse .identifiants b { font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.recepisse .avis { margin: 0; padding-left: 18px; font-family: var(--police); font-size: 0.86rem; line-height: 1.5; display: grid; gap: 4px; }
.recepisse .signataire span { font-family: var(--police); font-size: 0.86rem; }
.recepisse .cachet { width: 118px; height: 90px; flex: none; border: 1.5px dashed #c9bfa3; border-radius: 8px; display: grid; place-items: center; text-align: center; font-family: var(--police); font-size: 0.7rem; color: #8a8270; padding: 6px; }
.acte-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.acte .copie-info { font-family: var(--police); font-size: 0.78rem; color: #6b6450; margin: 0; }
/* Modèle gabonais : en-tête ministériel, rattachement, rubriques, blocs des parents, note. */
.acte .republique .ministere { font-weight: 700; font-variant: small-caps; letter-spacing: 0.08em; font-size: 0.92rem; }
.acte .republique small { font-size: 0.78rem; color: #6b6450; }
.acte .localisation .defs, .acte .evenement .defs, .acte .parents .defs { font-family: var(--police); font-size: 0.86rem; gap: 4px 14px; margin: 0; }
.acte .localisation .defs dt { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6450; align-self: center; }
.acte .evenement .defs dd, .acte .parents .defs dd { font-family: var(--police-acte); font-size: 0.98rem; }
.acte .numero .du { font-family: var(--police-acte); font-weight: 400; letter-spacing: 0; margin-left: 6px; color: #4a4f5c; }
.acte .parents { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 22px; }
.acte .parents section { display: grid; gap: 6px; align-content: start; }
.acte .parents h4 { margin: 0; font-size: 0.8rem; font-variant: small-caps; letter-spacing: 0.08em; color: #6b6450; border-bottom: 1px solid #e3dcc8; padding-bottom: 3px; }
.acte .note { font-family: var(--police); font-size: 0.74rem; font-style: italic; color: #6b6450; border-top: 1px dashed #e3dcc8; padding-top: 8px; margin: 0; }
.acte.annule::after { content: 'ANNULÉ'; position: absolute; inset: 0; display: grid; place-items: center; font: 900 5rem/1 var(--titres); color: rgba(159, 18, 57, 0.2); transform: rotate(-18deg); pointer-events: none; letter-spacing: 0.1em; }
@media (max-width: 640px) { .acte { grid-template-columns: 1fr; } .acte .marge { border-right: 0; border-bottom: 1px solid #e3dcc8; } .acte .corps { padding: 18px; } .acte .pied { grid-template-columns: 1fr; justify-items: start; } }

/* --- Vérification publique --- */
.verif-heros { background: var(--nuit); padding-bottom: 96px; }
.verif-heros .contenu { max-width: 1200px; margin: 0 auto; padding-block: 24px 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 10px; }
.verif-heros h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); }
.verif-heros p { color: var(--sur-nuit-clair); max-width: 62ch; font-size: 1.05rem; }
.verif-heros .surtitre { color: var(--or); }
.verif-corps { max-width: 1200px; width: 100%; margin: -72px auto 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: 56px; display: grid; grid-template-columns: minmax(300px, 560px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .verif-corps { grid-template-columns: 1fr; } }
.scanner { background: var(--nuit); color: #fff; border: 0; border-radius: 18px; min-height: 60px; font-weight: 800; font-size: 1.05rem; display: flex; gap: 10px; align-items: center; justify-content: center; cursor: pointer; width: 100%; }
.scanner svg { color: var(--or); }
.separateur { display: flex; align-items: center; gap: 10px; color: var(--texte-discret); font-size: 0.85rem; }
.separateur::before, .separateur::after { content: ''; flex: 1; height: 1px; background: var(--ligne); }
.resultat { background: var(--surface); border: 1.5px solid var(--nuit); border-radius: 24px; overflow: hidden; }
.resultat .tete { display: flex; gap: 16px; align-items: center; padding: 22px 24px; background: var(--a-valider-fond); }
.resultat .tete b { display: block; font-family: var(--titres); font-size: 1.3rem; color: var(--nuit); }
.resultat .tete .rond { flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--nuit); color: #fff; display: grid; place-items: center; }
.resultat.rectifie { border-color: var(--verif); }
.resultat.rectifie .tete { background: var(--verif-fond); }
.resultat.rectifie .rond { background: var(--verif); }
.resultat.faux { border-color: var(--danger); }
.resultat.faux .tete { background: var(--danger-fond); }
.resultat.faux .tete b { color: var(--danger-fort); }
.resultat.faux .rond { background: var(--danger); }
.resultat .contenu { padding: 18px 24px 22px; display: grid; gap: 12px; }
.video-scan { width: 100%; border-radius: 18px; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Portail citoyen --- */
.citoyen-entete { background: var(--nuit); color: var(--sur-nuit); }
.citoyen-entete .barre { max-width: 1200px; margin: 0 auto; padding-block: 14px 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 10px; }
.citoyen-entete .haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.citoyen-entete .moi { display: flex; gap: 12px; align-items: center; }
.citoyen-entete .moi b { color: #fff; display: block; font-size: 14px; }
.citoyen-entete .moi small { font-family: var(--mono); color: var(--sur-nuit-doux); font-size: 12px; }
.citoyen-entete .moi button { color: #fff; background: none; border: 0; text-decoration: underline; font-weight: 700; cursor: pointer; min-height: 44px; }
.onglets-citoyen { display: flex; gap: 6px; overflow-x: auto; }
.onglets-citoyen button { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--sur-nuit-clair); padding: 12px 16px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 48px; display: inline-flex; gap: 8px; align-items: center; }
.onglets-citoyen button[aria-current='page'] { color: #fff; border-bottom-color: var(--or); font-weight: 800; }
.citoyen-corps { max-width: 1200px; width: 100%; margin: 0 auto; padding-block: 28px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 24px; }
.demarche { background: var(--surface); border: 1px solid var(--ligne); border-radius: 28px; padding: 26px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 600px); gap: 24px; align-items: center; }
.demarche h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.demarche .etapes-carte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.etape-carte { border-radius: 18px; padding: 14px; display: grid; gap: 6px; align-content: start; font-size: 0.85rem; background: var(--fond); color: var(--texte-discret); border: 1.5px dashed var(--ligne-forte); min-height: 118px; }
.etape-carte b { font-size: 0.95rem; }
.etape-carte.fait { background: var(--nuit); color: var(--sur-nuit-doux); border: 0; }
.etape-carte.fait b { color: #fff; }
.etape-carte.courant { background: var(--surface); border: 1.5px solid var(--or); color: var(--texte-doux); }
.etape-carte.courant b { color: var(--nuit); }
.etape-carte .rond { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ligne-forte); display: grid; place-items: center; }
.etape-carte.fait .rond { background: var(--or); border-color: var(--or); color: var(--nuit); }
.etape-carte.courant .rond { border-color: var(--or); }
@media (max-width: 860px) { .demarche { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .demarche .etapes-carte { grid-template-columns: 1fr; } .etape-carte { min-height: 0; } }
.famille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.carte-personne { background: var(--surface); border: 1px solid var(--ligne); border-radius: 22px; padding: 18px; display: grid; gap: 12px; align-content: start; text-align: left; }
.carte-personne .qui { display: flex; gap: 12px; align-items: center; }
.carte-personne .qui b { display: block; font-size: 1.02rem; }
.carte-personne .qui span { color: var(--texte-doux); font-size: 0.86rem; }
.actions-citoyen { display: grid; border: 1px solid var(--ligne); border-radius: 22px; overflow: hidden; background: var(--surface); }
.actions-citoyen button { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 20px; min-height: 58px; border: 0; border-bottom: 1px solid var(--ligne-douce); background: none; font-weight: 800; cursor: pointer; text-align: left; }
.actions-citoyen button:last-child { border-bottom: 0; }
.actions-citoyen button:hover { background: var(--fond); }
.onglets-bas { display: none; }
@media (max-width: 700px) {
  .onglets-citoyen { display: none; }
  .onglets-bas { display: grid; grid-template-columns: repeat(4, 1fr); position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--ligne); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 5; margin-top: auto; }
  .onglets-bas button { background: none; border: 0; display: grid; justify-items: center; gap: 2px; padding: 10px 4px; min-height: 60px; font-size: 12px; font-weight: 600; color: var(--texte-doux); cursor: pointer; }
  .onglets-bas button[aria-current='page'] { color: var(--nuit); font-weight: 800; box-shadow: inset 0 -3px 0 var(--or); }
}

/* --- Dialogues --- */
dialog { border: 0; border-radius: 26px; padding: 0; background: var(--surface); color: var(--texte); width: min(560px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgba(12, 26, 51, 0.3); }
dialog::backdrop { background: rgba(12, 26, 51, 0.55); }
dialog form { padding: 24px; display: grid; gap: 16px; }
.chargement { min-height: 70vh; display: grid; place-items: center; text-align: center; gap: 12px; color: var(--texte-doux); background: var(--nuit); color: var(--sur-nuit); }
.barre-progression { width: 220px; height: 5px; background: var(--nuit-2); border-radius: 5px; overflow: hidden; }
.barre-progression i { display: block; height: 100%; width: 40%; background: var(--or); animation: va 1.2s ease-in-out infinite; }
@keyframes va { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .barre-progression i { animation: none; width: 100%; } }

/* --- Formulaire en étapes (déclaration) --- */
.etapes-form { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.etapes-form button { width: 100%; display: grid; gap: 8px; font-size: 13px; font-weight: 700; color: var(--texte-discret); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; min-height: 44px; }
.etapes-form button::before { content: ''; height: 5px; border-radius: 5px; background: var(--ligne); }
.etapes-form button.fait { color: var(--nuit); }
.etapes-form button.fait::before { background: var(--action); }
.etapes-form button[aria-current='step'] { color: var(--nuit); }
.etapes-form button[aria-current='step']::before { background: var(--or); }
.barre-form { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--ligne); padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; border-radius: 0 0 24px 24px; }
.resume { display: grid; gap: 10px; }

/* Aperçu compact d'un acte */
.acte-apercu { background: var(--papier); color: var(--papier-encre); border: 1px solid #e3dcc8; border-top: 3px solid var(--or); border-radius: 6px; padding: 18px 20px; display: grid; gap: 10px; font-family: var(--police-acte); box-shadow: var(--ombre); }
.acte-apercu.annule { opacity: 0.75; background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(159, 18, 57, 0.06) 14px 16px); }
.acte-apercu .republique { text-align: center; display: grid; gap: 2px; }
.acte-apercu .republique b { font-variant: small-caps; letter-spacing: 0.12em; font-size: 0.9rem; }
.acte-apercu .republique i { font-size: 0.76rem; color: #6b6450; }
.acte-apercu h3 { margin: 0; text-align: center; font-family: var(--police-acte); font-variant: small-caps; font-size: 1.15rem; }
.acte-apercu .numero { text-align: center; margin: 0; font-size: 0.82rem; font-weight: 600; }
.acte-apercu .defs { font-family: var(--police); font-size: 0.86rem; }
.pied-apercu { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; border-top: 1px solid #e3dcc8; padding-top: 10px; font-family: var(--police); color: #4a4f5c; }
.pied-apercu .qr svg { width: 72px; height: 72px; display: block; }

/* --- Logos des organismes (fond transparent, jamais étirés ni recolorés) --- */
.logo-org { display: inline-grid; gap: 2px; justify-items: start; }
.logo-org img { display: block; width: auto; }
.logo-org small { font-size: 10.5px; font-weight: 700; color: var(--texte-discret); letter-spacing: 0.02em; }
.logo-repli { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; background: var(--fond); color: var(--nuit); font-weight: 800; font-size: 13px; }
.plaque-logo { background: #fff; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: center; min-height: 64px; }
.carte-org .plaque-logo { margin-bottom: 8px; }
.groupe .portail .tete-portail { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.groupe .portail .tete-portail .logo-org img { max-width: 120px; }
.connexion-portail { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--ligne); border-radius: 18px; padding: 12px 16px; }
.connexion-portail b { display: block; color: var(--nuit); }
.connexion-portail span.doux { font-size: 0.86rem; }

/* --- Reprise des registres : planche de démonstration quand aucun scan n'est joint --- */
.planche-registre { background: repeating-linear-gradient(0deg, #fffdf8 0 27px, #efe9d8 27px 28px); border: 1px solid #e3dcc8; border-left: 10px solid #d9cfae; border-radius: 10px; padding: 22px 24px 26px; display: grid; gap: 8px; color: var(--papier-encre); font-family: var(--police-acte); min-height: 320px; align-content: start; }
.planche-registre b { font-size: 1.15rem; font-variant: small-caps; letter-spacing: 0.04em; }
.planche-registre .lignes { display: grid; gap: 14px; margin-top: 10px; }
.planche-registre .lignes i { display: block; height: 10px; border-radius: 6px; background: rgba(27, 34, 51, 0.14); }
details.petit summary { min-height: 44px; display: flex; align-items: center; }