/* Foyane · kit commun des maquettes du site (phase 6a, 28/09/2026).
   Identité L'Émergence v3 (ARBITRAGES §11.98). Les valeurs viennent des tokens du territoire
   `emergence` (région générée ci-dessous par kit/generer.py) ; rien n'est codé en dur hors de la
   région, sauf des dérivés arithmétiques de tokens (notés « dérivé »).
   Angles vifs, filets de 1 px, une seule ombre (le produit posé au premier écran), aucun CDN. */

@font-face{font-family:"Atkinson Hyperlegible Next";src:url("../fonts/atkinson-hyperlegible-next-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("../fonts/atkinson-hyperlegible-next-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("../fonts/atkinson-hyperlegible-next-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("../fonts/atkinson-hyperlegible-next-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url("../fonts/atkinson-hyperlegible-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url("../fonts/atkinson-hyperlegible-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Foyane Zero";src:url("../fonts/foyane-zero-400.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0030}
@font-face{font-family:"Foyane Zero";src:url("../fonts/foyane-zero-600.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0030}
@font-face{font-family:"Foyane Zero";src:url("../fonts/foyane-zero-700.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0030}
@font-face{font-family:"Foyane Zero";src:url("../fonts/foyane-zero-800.woff2") format("woff2");font-weight:800;font-display:swap;unicode-range:U+0030}

/* tokens:debut — généré par kit/generer.py depuis branding/tokens/territoires/emergence (thème clair). Ne pas éditer à la main. */
:root{
  --espace-0: 0px;
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 20px;
  --espace-6: 24px;
  --espace-8: 32px;
  --espace-10: 40px;
  --espace-12: 48px;
  --espace-16: 64px;
  --espace-20: 80px;
  --espace-intra-groupe: 8px;
  --espace-inter-groupes: 16px;
  --espace-section: 32px;
  --espace-carte: 24px;
  --espace-carte-compacte: 16px;
  --motion-duree-instant: 0ms;
  --motion-duree-etat: 150ms;
  --motion-duree-popover: 200ms;
  --motion-duree-modale: 300ms;
  --motion-duree-fondu-court: 100ms;
  --motion-duree-fondu-long: 200ms;
  --motion-duree-levee: 900ms;
  --motion-duree-fondu-recit: 500ms;
  --motion-duree-lecteur: 300ms;
  --motion-duree-recit: 8000ms;
  --motion-courbe-sortie: cubic-bezier(0, 0, 0.58, 1);
  --motion-courbe-entree-sortie: cubic-bezier(0.42, 0, 0.58, 1);
  --motion-courbe-levee: cubic-bezier(0.3, 0.7, 0.2, 1);
  --motion-echelle-bouton-presse: 0.96;
  --motion-echelle-dialogue-depart: 0.95;
  --densite-file-hauteur-rangee: 36px;
  --densite-file-marge-interne: 16px;
  --densite-file-ecart: 8px;
  --densite-file-taille-corps: 13px;
  --densite-fiche-marge-interne: 24px;
  --densite-fiche-ecart: 16px;
  --densite-fiche-taille-corps: 15px;
  --densite-interligne-corps: 1.5;
  --police-famille-next: "Atkinson Hyperlegible Next";
  --police-famille-mono: "Atkinson Hyperlegible Mono";
  --police-famille-zero: "Foyane Zero";
  --police-titre: "Foyane Zero","Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --police-interface: "Foyane Zero","Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --police-mono: "Atkinson Hyperlegible Mono",ui-monospace,"SF Mono","Menlo","Consolas",monospace;
  --graisse-normale: 400;
  --graisse-semi: 600;
  --graisse-grasse: 700;
  --graisse-forte: 800;
  --typo-titre-taille-min: 24px;
  --typo-titre-taille-max: 34px;
  --typo-titre-graisse: 700;
  --typo-titre-approche: -0.02;
  --typo-titre-interligne: 1.12;
  --typo-label-taille-min: 12px;
  --typo-label-taille-max: 13px;
  --typo-label-graisse: 400;
  --typo-label-approche-capitales: 0.03;
  --typo-corps-taille-min: 14px;
  --typo-corps-taille-max: 16px;
  --typo-corps-interligne: 1.5;
  --typo-bouton-taille-min: 14px;
  --typo-bouton-taille-max: 16px;
  --typo-bouton-graisse: 600;
  --typo-affiche-titre-1-taille: 64px;
  --typo-affiche-titre-1-interligne: 1.03;
  --typo-affiche-titre-1-approche: -0.03;
  --typo-affiche-titre-1-graisse: 700;
  --typo-affiche-titre-2-taille: 48px;
  --typo-affiche-titre-2-interligne: 1.08;
  --typo-affiche-titre-2-approche: -0.02;
  --typo-affiche-titre-2-graisse: 700;
  --typo-affiche-titre-3-taille: 24px;
  --typo-affiche-titre-3-interligne: 1.2;
  --typo-affiche-titre-3-approche: -0.01;
  --typo-affiche-titre-3-graisse: 700;
  --typo-affiche-corps-long-taille: 18px;
  --typo-affiche-corps-long-interligne: 1.55;
  --typo-affiche-corps-long-graisse: 400;
  --typo-affiche-mono-taille: 13px;
  --typo-affiche-mono-graisse: 400;
  --trait-filet: 1px;
  --trait-bouton: 1.5px;
  --trait-focus: 3px;
  --trait-focus-decalage: 3px;
  --trait-situation: 4px;
  --trait-icone: 1.8;
  --mise-en-page-conteneur: 1280px;
  --mise-en-page-conteneur-etroit: 760px;
  --mise-en-page-marge-site: 80px;
  --rayon-pilule: 0px;
  --rayon-aucun: 0px;
  --couleur-surface-100: #f8f7f2;
  --couleur-surface-200: #f3f1ea;
  --couleur-surface-300: #ffffff;
  --couleur-bord-400: #d9d5c9;
  --couleur-bord-500: #c9c4b6;
  --couleur-bord-600: #878272;
  --couleur-bord-champ: #878272;
  --couleur-encre-900: #545b66;
  --couleur-encre-1000: #082d51;
  --couleur-encre-survol: #16416e;
  --couleur-accent-base: #082d51;
  --couleur-accent-survol: #16416e;
  --couleur-accent-ink: #082d51;
  --couleur-accent-tint: #e5ebf2;
  --couleur-lien: #082d51;
  --couleur-focus: #082d51;
  --couleur-situation-va-bien-base: #4e7a5b;
  --couleur-situation-va-bien-ink: #3e6449;
  --couleur-situation-va-bien-tint: #e6efe8;
  --couleur-situation-a-accompagner-base: #9b1b5a;
  --couleur-situation-a-accompagner-ink: #9b1b5a;
  --couleur-situation-a-accompagner-tint: #f6e6ee;
  --couleur-situation-a-rappeler-base: #3f6690;
  --couleur-situation-a-rappeler-ink: #3f6690;
  --couleur-situation-a-rappeler-tint: #e6edf5;
  --couleur-situation-pas-joint-base: #77737f;
  --couleur-situation-pas-joint-ink: #5a5663;
  --couleur-situation-pas-joint-tint: #eeedf0;
  --couleur-situation-repondeur-base: #8b8570;
  --couleur-situation-repondeur-ink: #66604c;
  --couleur-situation-refus-base: #6b5c52;
  --couleur-situation-refus-ink: #6b5c52;
  --couleur-agent-base: #e2601a;
  --couleur-agent-ink: #9a4210;
  --couleur-agent-tint: #fbf1ea;
  --couleur-matiere-champ: #e4e1d6;
  --couleur-matiere-trait: #a9a495;
  --couleur-bouton-encre: #f8f7f2;
  --ombre-produit: 0 24px 48px -32px rgba(8,45,81,0.25);
}
/* tokens:fin */

/* ------------------------------------------------------------------ rôles du site */
:root{
  color-scheme: light;
  --page: var(--couleur-surface-100);
  --papier: var(--couleur-surface-200);
  --ecran: var(--couleur-surface-300);
  --encre: var(--couleur-encre-1000);
  --encre-2: var(--couleur-encre-900);
  --filet: var(--couleur-bord-400);
  --filet-fort: var(--couleur-bord-500);
  --pourpre: var(--couleur-situation-a-accompagner-base);
  --pourpre-teinte: var(--couleur-situation-a-accompagner-tint);
  --capucine: var(--couleur-agent-base);
  --capucine-encre: var(--couleur-agent-ink);
  --capucine-teinte: var(--couleur-agent-tint);
  --marge: clamp(var(--espace-4), 5.5vw, var(--mise-en-page-marge-site));
  --gouttiere: var(--espace-6);
  --section: clamp(var(--espace-16), 8.4vw, calc(var(--espace-20) * 1.5)); /* dérivé : 64 à 120 px */
  --entete: var(--espace-20);
  --tirage: min(calc(var(--espace-16) + var(--espace-2)), calc(var(--marge) * .75)); /* dérivé : 72 px au plus, la fiche tirée */
}

/* ------------------------------------------------------------------ socle */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--entete) + var(--espace-4))}
body{margin:0;background:var(--page);color:var(--encre);font-family:var(--police-interface);
  font-size:var(--typo-affiche-corps-long-taille);line-height:var(--typo-affiche-corps-long-interligne);
  font-weight:var(--graisse-normale);font-feature-settings:"tnum" 1;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,figure,ol,ul,dl,dd,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
a{color:var(--couleur-lien);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:var(--trait-focus) solid var(--couleur-focus);outline-offset:var(--trait-focus-decalage)}
.mono{font-family:var(--police-mono);font-size:var(--typo-affiche-mono-taille);font-weight:var(--graisse-normale)}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:var(--espace-4);top:-100px;background:var(--encre);color:var(--page);padding:var(--espace-3) var(--espace-4);z-index:30}
.evitement:focus{top:var(--espace-2)}

/* ------------------------------------------------------------------ grille */
.conteneur{max-width:calc(var(--mise-en-page-conteneur) + 2 * var(--marge));margin-inline:auto;padding-inline:var(--marge)}
.grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gouttiere)}
.grille > *{grid-column:1 / -1}
@media (min-width:960px){
  .c1-5{grid-column:1 / span 5}.c1-6{grid-column:1 / span 6}.c1-7{grid-column:1 / span 7}.c1-8{grid-column:1 / span 8}
  .c6-12{grid-column:6 / -1}.c7-12{grid-column:7 / -1}.c8-12{grid-column:8 / -1}.c9-12{grid-column:9 / -1}
  .c5-11{grid-column:5 / span 7}.c6-11{grid-column:6 / span 6}
}

/* ------------------------------------------------------------------ typographie */
.t1{font-family:var(--police-titre);font-weight:var(--typo-affiche-titre-1-graisse);
  font-size:clamp(calc(var(--typo-titre-taille-max) + var(--espace-1)), 2.1rem + 2.6vw, var(--typo-affiche-titre-1-taille));
  line-height:var(--typo-affiche-titre-1-interligne);letter-spacing:calc(var(--typo-affiche-titre-1-approche) * 1em);text-wrap:balance}
.t2{font-family:var(--police-titre);font-weight:var(--typo-affiche-titre-2-graisse);
  font-size:clamp(calc(var(--typo-titre-taille-max) - var(--espace-1)), 1.4rem + 2.1vw, var(--typo-affiche-titre-2-taille));
  line-height:var(--typo-affiche-titre-2-interligne);letter-spacing:calc(var(--typo-affiche-titre-2-approche) * 1em);text-wrap:balance}
.t3{font-family:var(--police-titre);font-weight:var(--typo-affiche-titre-3-graisse);font-size:var(--typo-affiche-titre-3-taille);
  line-height:var(--typo-affiche-titre-3-interligne);letter-spacing:calc(var(--typo-affiche-titre-3-approche) * 1em)}
.accroche{font-size:clamp(var(--typo-corps-taille-max), .95rem + .55vw, calc(var(--typo-affiche-titre-3-taille) - var(--espace-1)));line-height:1.45;max-width:36em}
.chapo{color:var(--encre-2);max-width:34em;margin-top:var(--espace-5)}
.texte{max-width:36em}
.texte p + p{margin-top:var(--espace-4)}
.legende{font-family:var(--police-mono);font-size:var(--typo-affiche-mono-taille);color:var(--encre-2);line-height:1.5;margin-top:var(--espace-3)}
.appel-note{font-size:.62em;vertical-align:super;line-height:0;margin-left:1px;font-family:var(--police-mono)}
.appel-note a{text-decoration:none;padding:0 1px}
.appel-note a:hover{text-decoration:underline}

/* ------------------------------------------------------------------ barre d'accès (et bandeau de maquette) */

/* ------------------------------------------------------------------ boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--espace-2);min-height:var(--espace-12);
  padding:var(--espace-3) var(--espace-5);border:var(--trait-bouton) solid var(--couleur-accent-base);border-radius:var(--rayon-aucun);
  background:transparent;color:var(--couleur-accent-ink);font:inherit;font-weight:var(--typo-bouton-graisse);
  font-size:var(--typo-bouton-taille-max);line-height:1.15;text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color var(--motion-duree-etat) var(--motion-courbe-sortie),color var(--motion-duree-etat) var(--motion-courbe-sortie),transform var(--motion-duree-fondu-court) var(--motion-courbe-sortie)}
.btn:hover{background:var(--couleur-accent-tint);text-decoration:none}
.btn:active{transform:scale(var(--motion-echelle-bouton-presse))}
.btn--plein{background:var(--couleur-accent-base);color:var(--couleur-bouton-encre)}
.btn--plein:hover{background:var(--couleur-accent-survol)}
.btn--petit{font-size:var(--typo-bouton-taille-min);min-height:calc(var(--espace-10) + var(--espace-1));padding:var(--espace-2) var(--espace-4)}
.lien-fleche{font-weight:var(--graisse-semi);text-decoration:none;border-bottom:var(--trait-filet) solid currentColor;padding-bottom:2px;display:inline-flex;min-height:calc(var(--espace-10) + var(--espace-1));align-items:center}
.lien-fleche::after{content:"\2192";margin-left:var(--espace-2);transition:transform var(--motion-duree-etat) var(--motion-courbe-sortie)}
.lien-fleche:hover::after{transform:translateX(3px)}
.nuit{background:var(--encre);color:var(--page)}
.nuit a{color:var(--page)}
.nuit .btn{border-color:var(--page);color:var(--page)}
.nuit .btn:hover{background:var(--couleur-encre-survol)}
.nuit .btn--plein{background:var(--page);color:var(--encre)}
.nuit .btn--plein:hover{background:var(--couleur-matiere-champ)}
.nuit :focus-visible{outline-color:var(--page)}

/* ------------------------------------------------------------------ en-tête */
.entete{position:sticky;top:0;z-index:20;background:var(--page);border-bottom:var(--trait-filet) solid var(--filet)}
.entete__barre{display:flex;align-items:center;gap:var(--espace-8);min-height:var(--entete)}
.entete__logo{display:block;flex:none;padding-block:var(--espace-2)}
.entete__logo img{width:132px;height:auto}
.entete__nav ul{display:flex;gap:var(--espace-6)}
.entete__nav li,.entete__actions .btn{white-space:nowrap}
.entete__nav a{display:inline-flex;align-items:center;min-height:var(--espace-12);color:var(--encre);text-decoration:none;font-size:15.5px}
.entete__nav a:hover{text-decoration:underline}
.entete__nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--encre)}
.entete__actions{margin-left:auto;display:flex;align-items:center;gap:var(--espace-3)}
.entete__connexion{font-size:var(--typo-bouton-taille-min);color:var(--encre-2);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--espace-12);padding-inline:var(--espace-2)}
.entete__connexion:hover{color:var(--encre);text-decoration:underline}
.menu{display:none;margin-left:auto}
.menu > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--espace-2);min-height:var(--espace-12);padding:0 var(--espace-4);
  border:var(--trait-bouton) solid var(--encre);font-weight:var(--graisse-semi);font-size:var(--typo-bouton-taille-min)}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary::after{content:"";width:12px;height:8px;background:linear-gradient(var(--encre),var(--encre)) 0 0/100% 1.5px no-repeat,linear-gradient(var(--encre),var(--encre)) 0 100%/100% 1.5px no-repeat}
.menu[open] > summary::after{height:1.5px;background:var(--encre)}
.menu__panneau{position:absolute;left:0;right:0;top:100%;background:var(--page);border-bottom:var(--trait-filet) solid var(--filet);padding:var(--espace-4) var(--marge) var(--espace-8)}
.menu__panneau ul{display:grid}
.menu__panneau li a{display:flex;align-items:center;min-height:var(--espace-12);border-bottom:var(--trait-filet) solid var(--filet);text-decoration:none;color:var(--encre);font-size:calc(var(--typo-corps-taille-max) + 2px)}
.menu__panneau .menu__actions{display:grid;gap:var(--espace-3);margin-top:var(--espace-6)}
@media (max-width:1179px){.entete__nav{display:none}.menu{display:block}.entete__actions{margin-left:0}}
@media (max-width:759px){.entete__actions{display:none}.entete__barre{min-height:calc(var(--espace-16))}.entete__logo img{width:116px}}

/* ------------------------------------------------------------------ sections */
.section{padding-block:var(--section);border-top:var(--trait-filet) solid var(--filet)}
.section--papier{background:var(--papier)}
.section-tete{margin-bottom:clamp(var(--espace-10),5vw,var(--espace-16))}
.section.nuit{border-top:0}

/* ------------------------------------------------------------------ statut (icône et mot) */
.st{display:inline-flex;align-items:center;gap:7px;font-weight:var(--graisse-semi);font-size:var(--densite-fiche-taille-corps);white-space:nowrap;line-height:1.2}
.st svg{width:18px;height:18px;flex:none}
.st--aa{color:var(--couleur-situation-a-accompagner-ink);font-weight:var(--graisse-grasse)}
.st--vb{color:var(--couleur-situation-va-bien-ink)}.st--vb svg{color:var(--couleur-situation-va-bien-base)}
.st--ar{color:var(--couleur-situation-a-rappeler-ink)}
.st--pj{color:var(--couleur-situation-pas-joint-ink)}.st--pj svg{color:var(--couleur-situation-pas-joint-base)}
.st--rp{color:var(--couleur-situation-repondeur-ink)}.st--rp svg{color:var(--couleur-situation-repondeur-base)}
.st--rf{color:var(--couleur-situation-refus-ink)}
.st--petit{font-size:13px;gap:5px}.st--petit svg{width:16px;height:16px}
.ic{flex:none;display:inline-block}
.ic--aa{color:var(--pourpre)}.ic--agent{color:var(--capucine)}.ic--pj{color:var(--couleur-situation-pas-joint-base)}
.signature{display:inline-flex;align-items:center;gap:var(--espace-2);color:var(--capucine-encre);font-weight:var(--graisse-semi);font-size:var(--densite-fiche-taille-corps);white-space:nowrap}
.signature svg{width:16px;height:16px;color:var(--capucine);flex:none}

/* ------------------------------------------------------------------ écran produit encadré */
.ecran-produit{background:var(--ecran);border:var(--trait-filet) solid var(--filet);color:var(--encre);position:relative;font-size:var(--densite-fiche-taille-corps);line-height:1.4}
.ecran-produit--pose{box-shadow:var(--ombre-produit)}
.ecran-produit__demo{display:flex;justify-content:space-between;gap:var(--espace-4);background:var(--papier);border-bottom:var(--trait-filet) solid var(--filet);
  padding:var(--espace-2) var(--espace-5);font-family:var(--police-mono);font-size:12px;color:var(--encre-2)}
.ecran-produit__corps{display:grid;grid-template-columns:208px minmax(0,1fr)}
.appnav{background:var(--papier);border-right:var(--trait-filet) solid var(--filet);padding:var(--espace-5) var(--espace-3);display:flex;flex-direction:column;gap:2px;font-size:14px}
.appnav__marque{display:flex;align-items:center;gap:var(--espace-2);padding:0 var(--espace-2) var(--espace-5);font-weight:var(--graisse-grasse);font-size:15px}
.appnav__marque img{width:20px;height:20px}
.appnav span{display:block;padding:var(--espace-2) var(--espace-3);color:var(--encre)}
.appnav .actif{background:var(--ecran);font-weight:var(--graisse-semi);box-shadow:inset 2px 0 0 var(--encre)}
.appnav__qui{margin-top:auto;padding:var(--espace-3);border-top:var(--trait-filet) solid var(--filet);font-size:12.5px;color:var(--encre-2);line-height:1.45}
.ecran-produit__principal{padding:var(--espace-6) var(--espace-8) var(--espace-5);min-width:0}
.ecran-produit__titre{display:flex;justify-content:space-between;align-items:baseline;gap:var(--espace-4);flex-wrap:wrap;margin-bottom:var(--espace-5)}
.ecran-produit__titre h3,.ecran-produit__titre h4{font-size:22px;font-weight:var(--graisse-grasse);letter-spacing:-.015em}
.ecran-produit__titre .mono{color:var(--encre-2);font-size:12.5px}
.nw{white-space:nowrap}
@media (min-width:760px){.ecran-produit__demo .court{display:none}}
@media (max-width:759px){.ecran-produit__demo .long{display:none}.ecran-produit__demo{padding-inline:var(--espace-4)}}

/* ------------------------------------------------------------------ file du matin et ligne de file */
.file__tete{display:flex;justify-content:space-between;align-items:baseline;gap:var(--espace-4);flex-wrap:wrap;padding-bottom:var(--espace-3);border-bottom:var(--trait-filet) solid var(--encre)}
.file__tete b{font-size:17px}
.file__tete .mono{font-size:12px;color:var(--encre-2)}
.ligne{display:grid;grid-template-columns:44px minmax(160px,220px) minmax(0,1fr) 150px 200px;gap:var(--espace-4);align-items:center;
  padding:var(--espace-4) var(--espace-4) var(--espace-4) var(--espace-3);border-bottom:var(--trait-filet) solid var(--filet);background:var(--ecran);position:relative}
.ligne__signe{display:inline-flex;align-items:center;gap:2px}
.ligne__signe svg{width:20px;height:20px}
.ligne__signe .ic--aa{width:22px;height:22px}
.ligne__nom{font-weight:var(--graisse-grasse);font-size:16px;line-height:1.25}
.ligne__nom small{display:block;font-weight:var(--graisse-normale);font-size:13px;color:var(--encre-2);margin-top:2px}
.ligne__raison{font-size:14.5px;line-height:1.4}
.ligne__raison .mono{display:block;font-size:12px;color:var(--encre-2);margin-top:3px}
.ligne__geste{display:grid;justify-items:end;align-items:center}
.ligne__geste > *{grid-area:1 / 1}
.ligne--aa{background:var(--pourpre-teinte);box-shadow:inset var(--trait-situation) 0 0 var(--pourpre)}
.ligne--aa .ligne__nom{font-weight:var(--graisse-forte)}
.file__total{display:flex;gap:var(--espace-2) var(--espace-5);flex-wrap:wrap;padding:var(--espace-3) 0 0;font-size:13.5px;color:var(--encre-2)}
.file__total b{color:var(--encre);font-weight:var(--graisse-grasse)}

/* la fiche tirée : la ligne prise par un agent sort du cadre, comme la fiche du symbole */
.ligne--tiree{transform:translateX(var(--tirage));border:var(--trait-filet) solid var(--filet);border-left:0;z-index:2}
.ligne--tiree .ligne__geste .btn{visibility:hidden}

@media (max-width:1099px){
  .ecran-produit__corps{grid-template-columns:minmax(0,1fr)}
  .appnav{display:none}
  .ecran-produit__principal{padding:var(--espace-4)}
  .ligne{grid-template-columns:28px minmax(0,1fr);gap:var(--espace-1) var(--espace-3);align-items:start;padding:var(--espace-4) var(--espace-3)}
  .ligne__signe{grid-row:1 / span 3;padding-top:2px;flex-direction:column;align-items:flex-start;gap:4px}
  .ligne__nom,.ligne__raison,.ligne__statut,.ligne__geste{grid-column:2}
  .ligne__statut{margin-top:var(--espace-2)}
  .ligne__geste{justify-items:start;margin-top:var(--espace-2)}
  .ligne__geste:empty{display:none}
}

/* ------------------------------------------------------------------ alerte d'astreinte */
.alerte{background:var(--ecran);border:var(--trait-filet) solid var(--filet);max-width:390px;width:100%;color:var(--encre)}
.alerte__haut{padding:var(--espace-4) var(--espace-5) var(--espace-5);border-bottom:var(--trait-filet) solid var(--filet)}
.alerte__l1{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--encre-2)}
.alerte__l1 span:first-child{display:flex;align-items:center;gap:var(--espace-2)}
.alerte__l1 img{width:16px;height:16px}
.alerte h3,.alerte h4{font-size:28px;font-weight:var(--graisse-grasse);letter-spacing:-.02em;margin-top:var(--espace-4);line-height:1.1}
.alerte__adresse{font-size:14px;color:var(--encre-2);margin-top:var(--espace-1)}
.alerte__statut{display:inline-flex;align-items:center;gap:9px;margin-top:var(--espace-3);padding:var(--espace-2) var(--espace-3);border:var(--trait-bouton) solid var(--pourpre);
  background:var(--pourpre-teinte);color:var(--pourpre);font-weight:var(--graisse-grasse);font-size:17px}
.alerte__statut svg{width:22px;height:22px}
.alerte__corps{padding:var(--espace-5);display:grid;gap:var(--espace-4)}
.alerte__verbatim{font-size:17px;line-height:1.45;border-left:2px solid var(--encre);padding-left:var(--espace-3)}
.alerte__verbatim small{display:block;font-family:var(--police-mono);font-size:12px;color:var(--encre-2);margin-top:var(--espace-2)}
.relais{display:flex;align-items:center;gap:var(--espace-3);background:var(--capucine-teinte);color:var(--capucine-encre);font-weight:var(--graisse-semi);font-size:16px;padding:var(--espace-3) var(--espace-4)}
.relais svg{width:20px;height:20px;color:var(--capucine);flex:none}
.alerte__gestes{display:grid;gap:var(--espace-3)}

/* ------------------------------------------------------------------ carnet */
.carnet{font-size:14.5px}
.carnet__titre{font-family:var(--police-mono);font-size:12px;color:var(--encre-2);padding-bottom:var(--espace-2);border-bottom:var(--trait-filet) solid var(--encre)}
.carnet li{display:grid;grid-template-columns:88px 18px minmax(0,1fr);gap:var(--espace-2);align-items:start;padding:var(--espace-3) 0;border-bottom:var(--trait-filet) solid var(--filet)}
.carnet .h{font-family:var(--police-mono);font-size:12px;color:var(--encre-2);padding-top:2px;line-height:1.35}
.carnet .ic{width:16px;height:16px;margin-top:2px}
.carnet .point{width:9px;height:9px;margin:6px 0 0 3px;border:1.5px solid var(--encre-2);border-radius:50%}
.carnet .carre{width:9px;height:9px;margin:6px 0 0 3px;background:var(--encre-2)}
.carnet li.humain,.carnet li.humain .h{color:var(--capucine-encre)}
.carnet li.humain .h{font-family:var(--police-interface);font-weight:var(--graisse-semi);font-size:12.5px}

/* ------------------------------------------------------------------ lecteur de l'appel */
.lecteur{background:var(--ecran);border:var(--trait-filet) solid var(--filet);color:var(--encre)}
.lecteur__tete{display:flex;justify-content:space-between;align-items:baseline;gap:var(--espace-3);padding:var(--espace-4) var(--espace-5);border-bottom:var(--trait-filet) solid var(--filet)}
.lecteur__tete b{font-size:17px}
.lecteur__tete .mono{color:var(--encre-2)}
.lecteur__ia{padding:var(--espace-3) var(--espace-5) 0;font-size:14px;color:var(--encre-2)}
.lecteur__commande{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--espace-4);align-items:center;padding:var(--espace-3) var(--espace-5)}
.lecteur__jouer{width:var(--espace-12);height:var(--espace-12);border:0;background:var(--encre);color:var(--page);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.lecteur__jouer:hover{background:var(--couleur-accent-survol)}
.lecteur__jouer svg{width:16px;height:16px}
.lecteur__jouer .pause{display:none}
.lecteur[data-etat="joue"] .lecteur__jouer .jouer{display:none}
.lecteur[data-etat="joue"] .lecteur__jouer .pause{display:block}
.lecteur__avance{height:10px;width:100%}
.lecteur__temps{font-family:var(--police-mono);font-size:13px;color:var(--encre-2);min-width:7ch;text-align:right}
.lecteur__voix{display:flex;align-items:center;gap:var(--espace-2);padding:0 var(--espace-5) var(--espace-3);font-size:14px;color:var(--encre-2)}
.lecteur__voix input{width:20px;height:20px;accent-color:var(--encre);margin:0}
.lecteur__voix label{display:inline-flex;align-items:center;gap:var(--espace-2);min-height:calc(var(--espace-10) + var(--espace-1));cursor:pointer}
.deroule{padding:var(--espace-1) var(--espace-5) var(--espace-5);display:grid;gap:var(--espace-2)}
.rep{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--espace-3);font-size:15.5px;line-height:1.45;padding-left:var(--espace-3);border-left:2px solid transparent;
  transition:color var(--motion-duree-lecteur) var(--motion-courbe-sortie),border-color var(--motion-duree-lecteur) var(--motion-courbe-sortie)}
.rep .qui{font-size:13px;color:var(--encre-2);padding-top:2px}
.rep--voix .dit{color:var(--encre-2)}
.rep--pers .dit{font-weight:var(--graisse-semi)}
.rep--carnet{border-top:var(--trait-filet) solid var(--filet);padding-top:var(--espace-3);margin-top:var(--espace-2)}
.rep--carnet .qui{font-family:var(--police-mono);font-size:12px}
.rep--relais .qui,.rep--relais .dit{color:var(--capucine-encre);font-weight:var(--graisse-semi)}
.rep--relais .qui{font-family:var(--police-interface);font-size:13px}
.rep.en-cours{border-left-color:var(--encre)}
/* à venir pendant l'écoute : graphite (AA), graisse normale ; la réplique en cours porte le filet marine */
.lecteur.pret .rep.a-venir,.lecteur.pret .rep.a-venir .qui,.lecteur.pret .rep.a-venir .dit{color:var(--encre-2);font-weight:var(--graisse-normale)}
.lecteur.pret .rep.a-venir .dit{opacity:1}
.lecteur__pied{padding:var(--espace-3) var(--espace-5);border-top:var(--trait-filet) solid var(--filet);font-family:var(--police-mono);font-size:12px;color:var(--encre-2)}
@media (max-width:520px){.rep{grid-template-columns:1fr;gap:0}.lecteur__tete,.lecteur__ia,.lecteur__commande,.lecteur__voix,.deroule,.lecteur__pied{padding-inline:var(--espace-4)}}

/* ------------------------------------------------------------------ le champ (proportion) */
.champ img{width:100%;height:auto}
.champ figcaption{margin-top:var(--espace-4)}
.champ__titre{font-weight:var(--graisse-semi);font-size:15px;margin-bottom:var(--espace-3);display:flex;justify-content:space-between;gap:var(--espace-4);flex-wrap:wrap}
.champ__titre .mono{color:var(--encre-2);font-weight:var(--graisse-normale)}

/* ------------------------------------------------------------------ chiffres de bilan */
.chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--trait-filet) solid var(--encre);border-bottom:var(--trait-filet) solid var(--filet)}
.chiffres > div{padding:var(--espace-5) var(--espace-5) var(--espace-5) 0;color:var(--encre-2);font-size:15px;line-height:1.4}
.chiffres > div + div{padding-left:var(--espace-5);border-left:var(--trait-filet) solid var(--filet)}
.chiffres b{display:block;font-size:clamp(36px,3vw + 12px,var(--typo-affiche-titre-2-taille));font-weight:var(--graisse-grasse);letter-spacing:-.03em;line-height:1;color:var(--encre);margin-bottom:var(--espace-2)}
.chiffres b.aa{color:var(--pourpre)}
@media (max-width:640px){.chiffres{grid-template-columns:1fr}.chiffres > div + div{padding-left:0;border-left:0;border-top:var(--trait-filet) solid var(--filet)}}

/* ------------------------------------------------------------------ bloc « Pour votre DPO » */
.dpo{border-top:var(--trait-filet) solid var(--encre)}
.dpo > div{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--espace-1);padding:var(--espace-5) 0;border-bottom:var(--trait-filet) solid var(--filet)}
.dpo dt{font-family:var(--police-mono);font-size:var(--typo-affiche-mono-taille);color:var(--encre-2);padding-top:4px}
.dpo dd{font-size:var(--typo-affiche-corps-long-taille);max-width:40em}
@media (min-width:760px){.dpo > div{grid-template-columns:200px minmax(0,1fr);gap:var(--gouttiere)}}

/* ------------------------------------------------------------------ bloc tarif */
.tarif{width:100%;border-collapse:collapse;font-size:var(--typo-affiche-corps-long-taille)}
.tarif caption{text-align:left;font-family:var(--police-mono);font-size:var(--typo-affiche-mono-taille);color:var(--encre-2);padding-bottom:var(--espace-3)}
.tarif th{text-align:left;font-weight:var(--graisse-normale);font-family:var(--police-mono);font-size:12.5px;color:var(--encre-2);padding:var(--espace-3) var(--espace-4) var(--espace-3) 0;border-bottom:var(--trait-filet) solid var(--encre);vertical-align:bottom}
.tarif td{padding:var(--espace-5) var(--espace-4) var(--espace-5) 0;border-bottom:var(--trait-filet) solid var(--filet);vertical-align:baseline}
.tarif td.montant{font-size:clamp(26px,1.2vw + 16px,34px);font-weight:var(--graisse-grasse);letter-spacing:-.02em;white-space:nowrap}
.tarif td.unite{color:var(--encre-2);white-space:nowrap}
.tarif tr.discret td{font-size:16px;color:var(--encre-2);padding-block:var(--espace-4)}
.tarif tr.discret td.montant{font-size:18px;font-weight:var(--graisse-semi);color:var(--encre)}
.tarif td:first-child{white-space:nowrap}
@media (max-width:759px){
  .tarif caption{display:block;padding-bottom:var(--espace-2);border-bottom:var(--trait-filet) solid var(--encre)}
  .tarif thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tarif,.tarif tbody,.tarif tr,.tarif td{display:block}
  .tarif tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--espace-1) var(--espace-4);padding:var(--espace-5) 0;border-bottom:var(--trait-filet) solid var(--filet)}
  .tarif td{border:0;padding:0}
  .tarif td:first-child{grid-column:1 / -1;font-weight:var(--graisse-semi);white-space:normal}
  .tarif td[data-l]::before{content:attr(data-l);display:block;font-family:var(--police-mono);font-size:12px;color:var(--encre-2);font-weight:var(--graisse-normale);letter-spacing:0}
  .tarif td.vide{display:none}
  .tarif tr.discret td.montant{font-size:18px}
}
.defile{overflow-x:auto}
@media (min-width:760px){.defile > table{min-width:620px}}

/* ------------------------------------------------------------------ notes de bas de page */
.notes{margin-top:var(--espace-12);padding-top:var(--espace-4);border-top:var(--trait-filet) solid var(--filet);display:grid;gap:var(--espace-2);counter-reset:none;font-size:14px;color:var(--encre-2);line-height:1.5;max-width:60em}
.notes li{display:grid;grid-template-columns:2.2em minmax(0,1fr)}
.notes li > span:first-child{font-family:var(--police-mono);font-size:12.5px;padding-top:1px}
.notes li:target{background:var(--couleur-accent-tint);outline:var(--espace-1) solid var(--couleur-accent-tint)}
.notes a.retour{margin-left:var(--espace-1)}

/* ------------------------------------------------------------------ pied de page */
.pied{background:var(--papier);border-top:var(--trait-filet) solid var(--filet);padding-block:var(--espace-16) var(--espace-10);font-size:15px}
.pied__haut{display:grid;gap:var(--espace-10) var(--gouttiere);grid-template-columns:minmax(0,1fr)}
.pied__signature{font-size:clamp(24px,1.2vw + 16px,32px);font-weight:var(--graisse-grasse);letter-spacing:-.02em;line-height:1.15;max-width:18em;margin-top:var(--espace-6)}
.pied__perimetre{color:var(--encre-2);margin-top:var(--espace-3);max-width:32em}
.pied__logo img{width:260px;height:auto}
.pied nav h2{font-family:var(--police-mono);font-weight:var(--graisse-normale);font-size:12.5px;color:var(--encre-2);margin-bottom:var(--espace-3)}
.pied nav a{display:inline-flex;align-items:center;min-height:calc(var(--espace-10) + var(--espace-1));color:var(--encre);text-decoration:none}
.pied nav a:hover{text-decoration:underline}
.pied__bas{display:flex;flex-wrap:wrap;gap:var(--espace-2) var(--espace-8);margin-top:var(--espace-12);padding-top:var(--espace-5);border-top:var(--trait-filet) solid var(--filet);color:var(--encre-2);font-size:14px}
.pied__bas a{color:var(--encre-2)}
.pied__herberge{color:var(--encre);font-weight:var(--graisse-semi)}
@media (min-width:960px){.pied__haut{grid-template-columns:repeat(12,minmax(0,1fr))}.pied__marque{grid-column:1 / span 6}.pied__nav1{grid-column:8 / span 2}.pied__nav2{grid-column:10 / span 3}}



/* ------------------------------------------------------------------ orchestration du premier écran
   Une seule orchestration forte sur le site : la file arrive, puis la ligne de Mme Arnaud est tirée
   hors du cadre (900 ms, courbe « levée ») et la signature de l'agent apparaît. Jouée une fois.
   Sans JavaScript et en mouvement réduit : l'état final, d'emblée (règle M3). */
@media (prefers-reduced-motion: no-preference){
  .js [data-orchestre] .ligne{opacity:0}
  .js [data-orchestre] .ligne--tiree{transform:none}
  .js [data-orchestre] .ligne--tiree .ligne__geste .btn{visibility:visible;opacity:1}
  .js [data-orchestre] .ligne--tiree .signature,.js [data-orchestre] .ligne--tiree .ligne__signe .ic--agent{opacity:0}
  .js [data-orchestre].joue .ligne{opacity:1;transition:opacity var(--motion-duree-fondu-long) var(--motion-courbe-sortie) calc(var(--i, 0) * 90ms)}
  .js [data-orchestre].joue .ligne--tiree{transform:translateX(var(--tirage));
    transition:opacity var(--motion-duree-fondu-long) var(--motion-courbe-sortie),transform var(--motion-duree-levee) var(--motion-courbe-levee) 900ms}
  .js [data-orchestre].joue .ligne--tiree .ligne__geste .btn{opacity:0;visibility:hidden;transition:opacity var(--motion-duree-etat) linear 750ms,visibility 0s linear 900ms}
  .js [data-orchestre].joue .ligne--tiree .signature,.js [data-orchestre].joue .ligne--tiree .ligne__signe .ic--agent{opacity:1;transition:opacity var(--motion-duree-fondu-recit) var(--motion-courbe-sortie) 1650ms}
}

/* ------------------------------------------------------------------ mouvement */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:0ms!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.entete,.lecteur__commande{display:none}.ecran-produit--pose{box-shadow:none}}


/* ================================================================== ajouts phase 6b (28/09/2026)
   Composants ajoutés pour les pages Le produit, Petites communes et Pour votre DPO. Rien d'existant n'est
   modifié : ces règles ne visent que des classes nouvelles (ou un composant existant placé dans une
   classe nouvelle, comme l'alerte dans un téléphone). Montrés dans kit/index.html, sections 14 à 21. */

/* ------------------------------------------------------------------ 14. téléphone (écran mobile encadré) */
.mobile{width:100%;max-width:360px;background:var(--ecran);border:var(--trait-filet) solid var(--filet-fort);color:var(--encre);font-size:var(--densite-fiche-taille-corps);line-height:1.4}
.mobile__barre{display:flex;justify-content:space-between;gap:var(--espace-3);padding:var(--espace-2) var(--espace-4);background:var(--papier);border-bottom:var(--trait-filet) solid var(--filet);
  font-family:var(--police-mono);font-size:12px;color:var(--encre-2)}
.mobile .alerte{border:0;max-width:none}
.mobile__corps{padding:var(--espace-5)}
.mobile--pose{box-shadow:var(--ombre-produit)}
.mobile + .legende,.mobile-legende{max-width:360px}

/* ------------------------------------------------------------------ 15. SMS d'alerte */
.sms{display:grid;gap:var(--espace-2)}
.sms__de{font-family:var(--police-mono);font-size:12px;color:var(--encre-2)}
.sms__bulle{background:var(--papier);border-left:2px solid var(--encre);padding:var(--espace-3) var(--espace-4);font-size:16px;line-height:1.45}
.sms__bulle .lien{color:var(--couleur-lien);text-decoration:underline;text-underline-offset:.2em;word-break:break-all}

/* ------------------------------------------------------------------ 16. « Qu'avez-vous fait ? » (clôture, image du geste) */
.cloture{display:grid;gap:var(--espace-4)}
.cloture__titre{font-weight:var(--graisse-grasse);font-size:18px}
.cases{display:grid;border-top:var(--trait-filet) solid var(--filet)}
.cases li{display:flex;align-items:center;gap:var(--espace-3);min-height:var(--espace-12);border-bottom:var(--trait-filet) solid var(--filet);font-size:16px}
.cases .boite{width:20px;height:20px;flex:none;border:var(--trait-bouton) solid var(--encre);display:inline-flex;align-items:center;justify-content:center;color:var(--page)}
.cases .coche .boite{background:var(--encre)}
.cases .coche .boite::after{content:"";width:10px;height:5px;border:solid currentColor;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.cases .coche{font-weight:var(--graisse-semi)}
.cloture__note{border:var(--trait-filet) solid var(--filet-fort);padding:var(--espace-3);font-size:15px;min-height:calc(var(--espace-16) + var(--espace-1))}
.cloture__note small{display:block;font-family:var(--police-mono);font-size:11.5px;color:var(--encre-2);margin-bottom:var(--espace-1)}
.situation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:var(--trait-filet) solid var(--filet-fort)}
.situation span{display:flex;align-items:center;justify-content:center;gap:var(--espace-2);min-height:var(--espace-12);font-size:15px;padding-inline:var(--espace-2);text-align:center}
.situation span + span{border-left:var(--trait-filet) solid var(--filet-fort)}
.situation .choisi{background:var(--couleur-accent-tint);font-weight:var(--graisse-semi);box-shadow:inset 0 0 0 var(--trait-bouton) var(--encre)}

/* ------------------------------------------------------------------ 17. résultats d'un passage (compte par statut) */
.passage{display:grid;border-top:var(--trait-filet) solid var(--encre)}
.passage li{display:grid;grid-template-columns:minmax(0,11em) 3.2em minmax(0,1fr);gap:var(--espace-4);align-items:center;padding:var(--espace-3) 0;border-bottom:var(--trait-filet) solid var(--filet)}
.passage b{font-size:20px;font-weight:var(--graisse-grasse);text-align:right;letter-spacing:-.01em}
.passage i{display:block;height:6px;width:calc(var(--p) * 1%);min-width:3px;background:var(--couleur-matiere-trait)}
.passage .aa b{color:var(--pourpre)}
.passage .aa i{background:var(--pourpre)}
.passage__pied{display:flex;justify-content:space-between;gap:var(--espace-2) var(--espace-4);flex-wrap:wrap;padding-top:var(--espace-3);font-size:13.5px;color:var(--encre-2)}
@media (max-width:520px){.passage li{grid-template-columns:minmax(0,1fr) 3em;gap:var(--espace-1) var(--espace-3)}.passage i{grid-column:1 / -1}}

/* ------------------------------------------------------------------ 18. fiche : tête et rubriques */
.rubriques{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--espace-3) var(--espace-5);padding:var(--espace-4) 0;border-top:var(--trait-filet) solid var(--filet);margin-bottom:var(--espace-5)}
.rubriques dt{font-family:var(--police-mono);font-size:11.5px;color:var(--encre-2)}
.rubriques dd{font-size:14.5px;margin-top:2px}

/* ------------------------------------------------------------------ 19. étapes (réception d'un fichier) */
.etapes{display:flex;flex-wrap:wrap;gap:var(--espace-1) var(--espace-5);padding-bottom:var(--espace-4);margin-bottom:var(--espace-4);border-bottom:var(--trait-filet) solid var(--filet);font-size:13.5px;color:var(--encre-2)}
.etapes li{display:inline-flex;align-items:baseline;gap:var(--espace-2)}
.etapes li::before{content:attr(data-n);font-family:var(--police-mono);font-size:11.5px}
.etapes .fait{color:var(--encre)}
.etapes .ici{color:var(--encre);font-weight:var(--graisse-grasse);box-shadow:inset 0 -2px 0 var(--encre)}
.compte-rendu{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border-top:var(--trait-filet) solid var(--encre);border-bottom:var(--trait-filet) solid var(--filet);margin-bottom:var(--espace-5)}
.compte-rendu > div{padding:var(--espace-3) var(--espace-4) var(--espace-3) 0;font-size:13.5px;color:var(--encre-2);line-height:1.35}
.compte-rendu b{display:block;font-size:26px;font-weight:var(--graisse-grasse);color:var(--encre);letter-spacing:-.02em;line-height:1.1}

/* ------------------------------------------------------------------ 20. tableaux (dans l'écran produit, et sur la page) */
.table-produit,.tableau{width:100%;border-collapse:collapse}
.table-produit{font-size:14.5px}
.table-produit caption,.tableau caption{text-align:left;font-family:var(--police-mono);font-size:12px;color:var(--encre-2);padding-bottom:var(--espace-2)}
.table-produit th,.tableau th{text-align:left;font-weight:var(--graisse-normale);font-family:var(--police-mono);font-size:12px;color:var(--encre-2);padding:var(--espace-2) var(--espace-4) var(--espace-2) 0;border-bottom:var(--trait-filet) solid var(--encre);vertical-align:bottom}
.table-produit td{padding:var(--espace-3) var(--espace-4) var(--espace-3) 0;border-bottom:var(--trait-filet) solid var(--filet);vertical-align:baseline}
.table-produit td.n,.table-produit th.n{text-align:right}
.table-produit a{font-weight:var(--graisse-semi)}
.tableau{font-size:17px}
.tableau td,.tableau th[scope="row"]{padding:var(--espace-4) var(--espace-5) var(--espace-4) 0;border-bottom:var(--trait-filet) solid var(--filet);vertical-align:baseline;text-align:left}
.tableau th[scope="row"]{font-family:var(--police-interface);font-size:17px;color:var(--encre);font-weight:var(--graisse-semi);border-bottom-color:var(--filet)}
.tableau td.duree{font-weight:var(--graisse-grasse);white-space:nowrap}
.tableau td.discret{color:var(--encre-2);font-size:15.5px}
@media (max-width:759px){
  .tableau thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tableau,.tableau tbody,.tableau tr,.tableau td,.tableau th[scope="row"]{display:block}
  .tableau tr{padding:var(--espace-4) 0;border-bottom:var(--trait-filet) solid var(--filet)}
  .tableau td,.tableau th[scope="row"]{border:0;padding:var(--espace-1) 0}
  .tableau td[data-l]::before{content:attr(data-l);display:block;font-family:var(--police-mono);font-size:11.5px;color:var(--encre-2);font-weight:var(--graisse-normale)}
}

/* ------------------------------------------------------------------ 21. feuille (courrier, bilan : un papier du maire) */
.feuille{background:var(--ecran);border:var(--trait-filet) solid var(--filet);padding:clamp(var(--espace-5),3vw,var(--espace-10));color:var(--encre);font-size:14px;line-height:1.5;max-width:640px}
.feuille__type{display:flex;justify-content:space-between;gap:var(--espace-3);flex-wrap:wrap;font-family:var(--police-mono);font-size:11.5px;color:var(--encre-2);padding-bottom:var(--espace-3);border-bottom:var(--trait-filet) solid var(--filet);margin-bottom:var(--espace-5)}
.feuille__emetteur{font-size:13px;line-height:1.45}
.feuille__emetteur b{display:block;font-size:15px}
.feuille__dest{margin:var(--espace-6) 0 var(--espace-5) auto;width:max-content;max-width:100%;font-size:14px}
.feuille__objet{font-weight:var(--graisse-grasse);margin-bottom:var(--espace-4)}
.feuille p + p{margin-top:var(--espace-3)}
.feuille__signe{margin-top:var(--espace-6);text-align:right}
.feuille__pied{display:flex;justify-content:space-between;align-items:center;gap:var(--espace-3);flex-wrap:wrap;margin-top:var(--espace-8);padding-top:var(--espace-3);border-top:var(--trait-filet) solid var(--filet);font-size:11.5px;color:var(--encre-2)}
.feuille__pied img{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:var(--espace-1);opacity:.7}
.feuille h3,.feuille h4{font-size:22px;letter-spacing:-.015em;line-height:1.2}
.feuille .chiffres b{font-size:34px}
.feuille .chiffres > div{font-size:13px}

/* ------------------------------------------------------------------ 22. formulaire (demande envoyée à /api/contact) */
.formulaire{display:grid;gap:var(--espace-5);max-width:40em}
.formulaire .duo{display:grid;gap:var(--espace-5);align-items:start}
@media (min-width:760px){.formulaire .duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.saisie{display:grid;gap:var(--espace-2);align-content:start}
.saisie label{font-weight:var(--graisse-semi);font-size:16px}
.saisie .aide{font-size:14px;color:var(--encre-2);margin-top:-4px}
.saisie input,.saisie select,.saisie textarea{font:inherit;font-size:17px;color:var(--encre);background:var(--ecran);border:var(--trait-bouton) solid var(--couleur-bord-600);border-radius:var(--rayon-aucun);
  min-height:var(--espace-12);padding:var(--espace-2) var(--espace-3);width:100%}
.saisie textarea{min-height:calc(var(--espace-20) + var(--espace-8));resize:vertical;line-height:1.45}
.saisie select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),linear-gradient(135deg,var(--encre) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:var(--espace-10)}
.saisie input:focus-visible,.saisie select:focus-visible,.saisie textarea:focus-visible{outline:var(--trait-focus) solid var(--couleur-focus);outline-offset:1px;border-color:var(--encre)}
.saisie [aria-invalid="true"]{border-color:var(--encre);border-width:2px}
.saisie .erreur{color:var(--encre);font-size:15px;font-weight:var(--graisse-grasse)} /* jamais pourpre : il ne sert qu'à À accompagner */
.formulaire__mention{font-size:14px;color:var(--encre-2);max-width:40em}
.formulaire__envoi{display:flex;flex-wrap:wrap;align-items:center;gap:var(--espace-4)}
.formulaire__merci{border-left:var(--trait-situation) solid var(--encre);background:var(--couleur-accent-tint);padding:var(--espace-4) var(--espace-5);max-width:40em}
.formulaire__merci b{display:block;margin-bottom:var(--espace-1)}
@media (max-width:759px){.formulaire__envoi .btn{width:100%}}

/* ------------------------------------------------------------------ site en ligne (29/09/2026)
   Ajouts de la mise en ligne : crédits repliés du pied de page, lecteur à fichier audio. */
[hidden]{display:none!important}
.credits-pied{margin-top:var(--espace-5);font-size:13.5px;color:var(--encre-2)}
.credits-pied summary{cursor:pointer;display:inline-flex;align-items:center;min-height:var(--espace-12);font-family:var(--police-mono);font-size:12.5px}
.credits-pied ul{display:grid;gap:var(--espace-1);max-width:62em;padding-bottom:var(--espace-2)}
.credits-pied a{color:var(--encre-2)}
.pied__herberge a{color:var(--encre)}
.lecteur__reconstitution{padding:var(--espace-2) var(--espace-5) 0;font-size:13.5px;line-height:1.45;color:var(--encre-2)}
.lecteur__audio{display:block;width:calc(100% - 2 * var(--espace-5));margin:var(--espace-3) var(--espace-5)}
.lecteur.pret .lecteur__audio{display:none}
.lecteur__avance{cursor:pointer}
@media (max-width:520px){.lecteur__reconstitution{padding-inline:var(--espace-4)}.lecteur__audio{width:calc(100% - 2 * var(--espace-4));margin-inline:var(--espace-4)}}

/* Bandeau « registre 2027 » (01/10/2026) : une ligne au-dessus de l'en-tête, sur toutes les pages sauf /registre-2027. */
.bandeau{background:var(--encre);color:var(--page);font-size:15px;line-height:1.4}
.bandeau__barre{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--espace-1) var(--espace-5);padding-block:var(--espace-2)}
.bandeau p{margin:0;text-align:center}
.bandeau__lien{color:var(--page);font-weight:var(--graisse-grasse);text-decoration:underline;text-underline-offset:.2em;white-space:nowrap;min-height:var(--espace-10);display:inline-flex;align-items:center}
.bandeau__lien:hover{text-decoration-thickness:2px}
.bandeau__lien::after{content:"\2192";margin-left:var(--espace-2);text-decoration:none;display:inline-block}
.bandeau__lien:focus-visible{outline:var(--trait-focus) solid var(--page);outline-offset:2px}
@media (max-width:759px){.bandeau{font-size:14px}.bandeau p span{display:none}}