@font-face{font-family:'Poppins';font-weight:300;font-display:swap;src:url(/assets/fonts/poppins-300.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700.woff2) format('woff2')}

:root{
  /* Charte Premier Repère — huit couleurs de marque. Les trois premières forment
     le dégradé, dans cet ordre. */
  --vert-eau:#a2cec0; --lilas:#dddbec; --mauve:#c9afd5;
  --violet-sombre:#4e3355;   /* prune foncé — titres, texte principal */
  --violet:#6f4b77;          /* prune — boutons, liens */
  --lavande-pale:#dad0ec;    /* badges, étiquettes */
  --fond:#faf8fb;            /* blanc cassé rosé */
  --papier:#fff;

  /* Alias de service : le code existant les nomme ainsi. */
  --menthe:var(--vert-eau); --menthe-claire:#e6f1ec; --lavande:var(--mauve);
  --encre:#2c2a2e; --encre-douce:#6a6570; --trait:#e8e2ec;

  /* Cinq couleurs d'état, chacune vérifiée à 4,5:1 sur son fond. */
  --alerte:#8e3542; --alerte-fond:#f7e9eb;
  --vigilance:#75530b; --vigilance-fond:#f7efdd;
  --conforme:#2a5f4c; --conforme-fond:#e6f1ec;
  --information:#6f4b77; --information-fond:#efe9f3;
  --indisponible:#54505f; --indisponible-fond:#edecf1;

  /* Largeur unique du site, reprise de la charte : bandeau, étapes, bandes
     et pied s'alignent tous dessus. */
  --largeur:1120px;

  --rayon:14px; --ombre:0 1px 2px rgba(78,51,85,.05), 0 8px 28px rgba(78,51,85,.07);

  /* ⚠️ Le retrait du bloc de tête d'une section VAUT LE PADDING HORIZONTAL DES
     CARTES qui la suivent : le titre s'aligne alors sur le texte DANS la
     carte, pas sur son bord. À 30 px il tombait six pixels trop à droite —
     assez pour se voir. Changer le padding des cartes sans changer ceci
     recasserait l'alignement, d'où la variable.
     ⚠️ 25 et non 24 : la carte porte AUSSI une bordure d'un pixel, et le texte
     commence donc à bord + 1 + 24. Mesuré au rendu — à 24 px, le titre tombait
     un pixel à gauche du texte des cartes. */
  --retrait-tete:25px;
}

*{box-sizing:border-box}
/* Le défilement jusqu'à une ancre de navigation se fait en douceur : un saut
   brutal fait perdre où l'on était dans la page.
   ⚠️ Annulé pour qui a demandé moins d'animations — un défilement long est la
   première chose qui gêne en cas de sensibilité au mouvement. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
/* ⚠️ C'est l'ÉTIQUETTE d'une section qui doit arriver sous la barre, pas son
   bord haut : le bord haut d'une `.bande` précède l'étiquette de toute la marge
   interne (64 à 96 px, 52 sur mobile). Avec 8 px seulement sous la barre,
   l'étiquette tombait 125 px plus bas sur ordinateur et 140 px sur mobile
   (mesuré au rendu le 05/10/2026), et le bas des cartes de la section
   précédente restait visible. On retranche donc la marge interne :
   écart voulu (28 px) = barre + 28 − marge interne. La hauteur de la barre vient
   de la mesure faite à l'exécution (--h-barre) ; la valeur de repli sert le
   temps que le script s'exécute.
   `.bande[id]` et non `.bande` : la règle générique `[id]` plus bas a la même
   spécificité que `.bande` et l'emportait, ce qui rendait la ligne inopérante. */
.bande{--pad-haut-bande:clamp(64px,7vw,96px)}
.bande[id]{scroll-margin-top:calc(var(--h-barre, 92px) + 28px - var(--pad-haut-bande))}
.appel,#recherche{scroll-margin-top:calc(var(--h-barre, 92px) + 8px)}

/* Une règle d'affichage explicite (ici .actions{display:flex}) l'emporte sur le
   display:none par défaut de [hidden] : l'attribut est alors posé mais
   l'élément reste visible. Ce garde-fou doit précéder toute règle display. */
[hidden]{display:none !important}
/* Lisible par les lecteurs d'écran et les robots, invisible à l'écran (titre h2 d'une page de rubrique, audit SEO C3). */
.sr-seul{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--encre); background:var(--fond); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--violet)}

/* ---------- En-tête ---------- */
/* ⚠️ Pas d'`overflow:hidden` ici : la liste de suggestions de l'adresse est
   posée en absolu dans le hero et déborde sous le bandeau. Un rognage la
   coupait net à la limite du dégradé. Le motif de fond n'en a pas besoin, son
   `inset:0` le contient déjà. */
.entete{
  position:relative; isolation:isolate; color:var(--violet-sombre);
  background:linear-gradient(135deg,var(--vert-eau) 0%,var(--lilas) 52%,var(--mauve) 100%);
}
/* Les courbes de niveau remplacent les diagonales : le motif de la marque dit
   le terrain, pas une texture. Blanc à 45 %, comme la charte le fixe pour le
   dégradé. */
.entete::after{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:url('/assets/marque/contours.svg') repeat;
  /* 900 px : la tuile fait 1200x800, la réduire à 480 px resserrait les
     courbes au point de les faire lire comme une trame. À 900 px elles
     gardent la pente du dessin d'origine. */
  background-size:900px auto;
  mix-blend-mode:soft-light;
}
/* z-index au-dessus de `main` (3) : sans quoi la carte de confirmation, qui
   remonte de 26 px sous le bandeau, passerait devant les suggestions. Seul le
   contenu de ce bloc est peint — le dégradé reste porté par `.entete`, donc la
   carte continue de le recouvrir. */
/* ⚠️ +64 px : avec box-sizing:border-box, une max-width de 1120 px avec 32 px
   de marge interne ne laisse que 1056 px de contenu, alors que les bandes en
   offrent 1120 — leur marge est portée par le parent. Sans ce rattrapage, le
   hero est visiblement plus étroit que le reste du site. */
.entete-int{position:relative; z-index:4; max-width:calc(var(--largeur) + 64px); margin:0 auto; padding:0 32px 72px}
/* La barre reste collée en haut de PAGE, et non le temps de l'en-tête : elle
   est donc sortie du dégradé. Transparente dessus, elle prend un fond blanc,
   un filet et une ombre dès 8 px de défilement — sans quoi la navigation
   devient illisible une fois sur le fond de page clair. */
.barre-fixe{
  position:sticky; top:0; z-index:50; border-bottom:1px solid transparent;
  transition:background-color .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.barre-fixe.posee{
  background:var(--papier); border-bottom-color:var(--trait);
  box-shadow:0 1px 2px rgba(78,51,85,.04), 0 8px 24px rgba(78,51,85,.07);
}
/* ⚠️ Sur l'espace client, la barre est BLANCHE d'emblée, filet compris — c'est
   le dessin de « Espace client ». Ailleurs elle est transparente et ne se pose
   qu'au défilement, parce qu'elle surplombe le dégradé de l'en-tête ; ici il
   n'y a pas de dégradé, et une barre transparente sur le fond de page laissait
   le menu flotter sans limite basse.
   `:has()` plutôt qu'une classe sur `body` : la barre est un partiel commun,
   servi tel quel aux six pages, et c'est la PAGE qui doit décider. */
body:has(.page-compte) .barre-fixe{background:var(--papier); border-bottom-color:var(--trait)}

.barre-int{
  position:relative; z-index:50; max-width:calc(var(--largeur) + 64px); margin:0 auto;
  padding:22px 32px; display:flex; align-items:center; justify-content:space-between;
  gap:16px 24px; flex-wrap:wrap;
}
/* Cotes d'Accueil.dc.html (Claude Design) : symbole à 55 px, mot-signe à 25 px, écart de 10 px puis -4 px sur le mot (le
   -0,16 em de `.lockup-nom`, à 25 px) (decisions/barre-logo-suit-maquette-accueil-2110, Benoist, « Suivre la maquette », 21/10/2026). Vaut pour les six
   pages, qui partagent cette barre. L'en-tête rejoint ainsi le rapport du pied (44 / 20 = 0,4545) ; la taille du mot
   reste la formule unique de `.lockup-nom`, seul son rapport est posé ici, en fraction pour tomber juste
   (25 / 55). ⚠️ Le commentaire de la maquette (« symbole 34, rapport 41 / 25 ») est périmé : ce sont ses valeurs
   calculées qui font foi. */
.barre-int .lockup{--lockup-h:55px; --lockup-rapport:calc(25 / 55); gap:10px}
/* Le lockup : symbole puis nom, écartés du quart de la hauteur du symbole. */
/* ⚠️ Le lockup est BICOLORE, c'est la règle du projet de design : symbole en
   prune (--violet), mot-signe en prune foncé (--violet-sombre). Les unifier
   sur une seule teinte, dans un sens ou dans l'autre, n'est pas un arbitrage
   de goût — c'est s'écarter de la marque.
   `flex:none` et `nowrap` : un logo ne se coupe jamais. Il se coupait sous
   1180 px avant que le projet de design ne le signale. */
.lockup{
  display:inline-flex; align-items:center; flex:none;
  gap:calc(var(--lockup-h,26px) / 4);
  color:var(--violet-sombre); white-space:nowrap;
  /* Le lockup est un lien de retour : il ne doit ni se souligner ni changer de
     couleur, la règle globale sur `a` s'appliquant sinon. */
  text-decoration:none; cursor:pointer;
}
a.lockup:hover{color:var(--violet-sombre)}
a.lockup:focus-visible{outline:3px solid var(--lavande); outline-offset:4px; border-radius:6px}
/* Le symbole est carré (viewBox 64x64) : la boîte l'est aussi, et le SVG en
   ligne la remplit — c'est ce qui permet au currentColor de prendre la couleur
   du nom à côté, ce qu'un `img` ne fait pas. */
.lockup-symbole{
  width:var(--lockup-h,26px); height:var(--lockup-h,26px);
  flex:0 0 auto; display:block; color:var(--violet);
}
.lockup-symbole svg{width:100%; height:100%; display:block}
/* Rattrapage optique : -16 % du corps du texte, réglage du projet de design.
   La contre-forme du symbole creuse l'écart à l'œil ; l'écart géométrique d'un
   quart de la hauteur se lit trop large sans cette reprise.
   ⚠️ LA SEULE FORMULE DE TAILLE DU MOT-SIGNE (lot pied-logo, 01/10/2026) :
   0,61 est le ratio RÉEL de la barre (41 px de symbole, 25 px de texte —
   `41 * .61 ≈ 25`), pas une approximation. Avant ce lot, la barre portait un
   override fixe à 25 px (desktop) et 21 px (mobile) tandis que le pied
   suivait une formule à .82 : l'accent, dimensionné en `em` du texte,
   grossissait et se déplaçait d'un tiers entre les deux endroits — ce que
   Benoist a vu comme « pas le même dessin » (decisions/pied-logo). Une
   seule formule, nulle part d'override : la barre, le pied et la vitrine
   portent désormais le même rapport symbole/texte.
   Le rapport est la variable `--lockup-rapport` (0,61 par défaut) : seul le pied pourrait la poser, pour basculer au dessin de
   la maquette « PiedDePage v2 » (symbole 44 px, texte 20 px : `--lockup-rapport:.4545`) EN UNE LIGNE sur `.pied-marque .lockup`
   — decisions/pied-v2-taille-logo, en attente de Benoist. */
.lockup-nom{
  font-weight:600; font-size:calc(var(--lockup-h,26px) * var(--lockup-rapport,.61));
  letter-spacing:-.01em; line-height:1; white-space:nowrap;
  margin-left:-.16em; flex:none;
}
/* ⚠️ LE LOGO N'ÉCRIT PAS « è » : la charte compose `Repere` avec un e
   ordinaire et DESSINE l'accent — une barre horizontale arrondie, qui rime
   avec les quatre courbes du symbole. Le grave incliné de Poppins est étranger
   à la marque.
   ⚠️ Ces trois règles sont la copie de `stylesLettrage()` dans
   `src/marque.js`, qui les sert au PDF. Les deux doivent rester en phase —
   même arrangement que `.lockup`, et même raison : le PDF n'a pas ce fichier.
   ⚠️ `display:inline-block` sur le e est indispensable : sans lui le
   `position:relative` n'a pas de boîte, et la barre se pose sur le mot entier. */
.lockup-mot{white-space:nowrap}
.lockup-grave{position:relative; display:inline-block; line-height:1}
.lockup-grave::before{
  content:''; position:absolute; left:.121em; bottom:.8em;
  width:.378em; height:.115em; background:currentColor; border-radius:.057em;
}
/* Le numéro de version est au pied de page. */
.marque-gauche{display:flex; align-items:center; gap:10px; flex:none}
.pied .version{font-weight:500; opacity:.66; margin-left:4px}
.entete h1{
  margin:0; font-size:clamp(32px,3.9vw,50px); font-weight:700;
  letter-spacing:-.022em; line-height:1.1; text-wrap:balance;
}
.entete p.accroche{margin:0; font-size:17.5px; line-height:1.55; opacity:.86; max-width:50ch}
/* Le sur-titre de la charte : capitales espacées, au-dessus du titre. */
/* ⚠️ Pleine encre, sans opacité : le design pose le sur-titre en prune foncé
   franc. L'opacité de .62 le délavait en gris sur le dégradé. */
.entete .sur-titre{
  margin:0; font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--violet-sombre);
}
/* Au téléphone, la maquette retire le sur-titre du hero (mise à jour du 21/10) : le champ remonte d'autant
   au-dessus du clavier. */
@media (max-width:639.98px){ .hero .sur-titre{display:none} }

/* ---------- Structure ---------- */
main, .resultats-recherche{max-width:calc(var(--largeur) + 64px); margin:-26px auto 64px; padding:0 32px; position:relative; z-index:3}
/* Aucune étape en cours : le conteneur ne doit pas creuser un vide. */
/* ⚠️ Cette règle vaut (0,2,1) — `:not(:has(…))` prend la spécificité de son
   argument — et écrase le padding de tout `main` qui ne porte pas de carte.
   Elle a mangé celui des pages de fond, puis celui de l'espace client : la
   grille y était 32 px plus large que le menu de chaque côté. Toute page qui
   pose son propre `main` doit donc s'exclure ICI, et une classe seule
   (0,1,0) ne suffit pas à la contrer. Mesuré au style calculé, deux fois. */
main:not(:has(.carte:not([hidden]))):not(.page-corps):not(.page-compte):not(.blog-corps),
.resultats-recherche:not(:has(.carte:not([hidden]))){margin:0 auto; padding:0}
.carte{
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  box-shadow:var(--ombre); padding:26px 28px; margin-bottom:20px;
}
.carte[hidden]{display:none}
.etiquette{
  display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--violet); background:var(--lavande-pale);
  padding:4px 9px; border-radius:6px; margin-bottom:12px;
}
h2{margin:0 0 6px; font-size:20px; font-weight:600; color:var(--violet-sombre); letter-spacing:-.01em}
h3{margin:22px 0 8px; font-size:15px; font-weight:600; color:var(--violet-sombre)}
.doux{color:var(--encre-douce); font-size:14px}

/* ---------- Recherche ---------- */
.champ{position:relative}
/* `type="search"` écarte l'autoremplissage d'adresse du navigateur, mais
   apporte son habillage natif : coins arrondis sur Safari et croix d'effacement
   qui doublerait notre liste. On le neutralise. */
.champ input[type="search"]{-webkit-appearance:none; appearance:none}
.champ input[type="search"]::-webkit-search-decoration,
.champ input[type="search"]::-webkit-search-cancel-button,
.champ input[type="search"]::-webkit-search-results-button{-webkit-appearance:none; display:none}
.champ input{
  width:100%; font:inherit; font-size:17px; padding:15px 18px;
  border:1.5px solid var(--trait); border-radius:11px; background:var(--papier); color:var(--encre);
  transition:border-color .15s, box-shadow .15s;
}
.champ input:focus{outline:none; border-color:var(--lavande); box-shadow:0 0 0 4px rgba(196,166,207,.22)}
.suggestions{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
  background:var(--papier); border:1px solid var(--trait); border-radius:11px;
  box-shadow:var(--ombre); overflow:hidden; max-height:290px; overflow-y:auto;
}
.suggestions[hidden]{display:none}
.suggestions button{
  display:block; width:100%; text-align:left; font:inherit; font-size:14.5px;
  padding:11px 16px; background:none; border:none; cursor:pointer; color:var(--encre);
}
.suggestions button:hover,.suggestions button[aria-selected=true]{background:var(--menthe-claire)}

.bouton{
  font:inherit; font-weight:600; font-size:15px; cursor:pointer;
  padding:13px 24px; border-radius:11px; border:1.5px solid transparent;
  background:var(--violet); color:#fff; transition:transform .12s, box-shadow .15s, background .15s;
  /* Un bouton peut être un lien : la règle globale sur `a` le soulignait et lui
     imposait sa couleur. */
  text-decoration:none; display:inline-block; text-align:center;
}
a.bouton, a.bouton:hover{color:#fff; text-decoration:none}
/* ⚠️ Le blanc ci-dessus est celui du bouton PLEIN. Un lien portant
   `.bouton.secondaire` l'héritait aussi : au survol, texte blanc sur fond
   clair, le libellé disparaissait — vu sur « Parcourir l'exemple page à page ».
   La règle de couleur du secondaire doit donc être rejouée pour les liens,
   `:hover` compris : à spécificité égale, c'est l'ordre qui tranche. */
a.bouton.secondaire, a.bouton.secondaire:hover{color:var(--violet)}
.bouton:hover:not(:disabled){background:var(--violet-sombre); box-shadow:0 6px 18px rgba(111,75,119,.26)}
.bouton:active:not(:disabled){transform:translateY(1px)}
/* ⚠️ Le grossissement au survol est réservé aux appels à l'action qui mènent à
   la création d'un dossier — `.cta`. Posé sur `.bouton` tout court, il touchait
   aussi « Changer d'adresse », « Télécharger le PDF », « Réessayer » : des
   boutons de travail, qu'on presse pour avancer et non pour se décider. Un
   geste d'invitation sur un bouton d'exécution, c'est du bruit.
   ⚠️ 1,03 et pas davantage : au-delà, le texte se ré-interpole et devient flou
   le temps de la transition. L'enfoncement au clic garde la priorité — `scale`
   et `translateY` dans la même propriété, le dernier état écrit l'emporte. */
.bouton.cta:hover:not(:disabled){transform:scale(1.03)}
.bouton.cta:active:not(:disabled){transform:scale(1.03) translateY(1px)}
/* Rien ne grossit pour qui a demandé moins de mouvement : la couleur suffit à
   dire que le bouton répond. */
@media (prefers-reduced-motion:reduce){
  .bouton{transition:box-shadow .15s, background .15s}
  .bouton.cta:hover:not(:disabled),.bouton.cta:active:not(:disabled){transform:none}
}
.bouton:disabled{opacity:.45; cursor:not-allowed}
.bouton.secondaire{background:transparent; color:var(--violet); border-color:var(--trait)}
.bouton.secondaire:hover:not(:disabled){background:var(--fond); border-color:var(--lavande); box-shadow:none}
.actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:20px}

/* ---------- Confirmation ---------- */
.confirmation{display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:26px; align-items:start}
.confirmation img{width:100%; border-radius:11px; border:1px solid var(--trait); display:block; background:var(--fond)}
.faits{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px 20px; margin:0 0 4px}
.faits .k{font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--encre-douce); font-weight:600}
.faits .v{font-size:18px; font-weight:600; color:var(--violet-sombre); line-height:1.3}
.faits .v small{display:block; font-size:12.5px; font-weight:400; color:var(--encre-douce)}

.alternatives{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.alternatives button{
  font:inherit; font-size:13.5px; cursor:pointer; padding:7px 13px; border-radius:9px;
  border:1px solid var(--trait); background:var(--papier); color:var(--encre);
}
/* La parcelle retenue : même forme, contour de marque. Elle n'est pas
   cliquable — on y est déjà. */
.alternatives .courante{
  font-size:13.5px; font-weight:600; padding:6px 12px; border-radius:9px;
  border:2px solid var(--violet); background:var(--lavande-pale); color:var(--violet-sombre);
}
.alternatives button:hover{border-color:var(--lavande); background:var(--menthe-claire)}

/* ---------- Aperçu ---------- */
.tuiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:16px}
.tuile{border:1px solid var(--trait); border-radius:11px; padding:16px 18px; background:var(--fond)}
.tuile .k{font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--encre-douce); font-weight:600; margin-bottom:5px}
.tuile .v{font-size:21px; font-weight:600; color:var(--violet-sombre); line-height:1.2}
.tuile .v small{display:block; font-size:12.5px; font-weight:400; color:var(--encre-douce); margin-top:3px}
.sources-apercu{font-size:12.5px; line-height:1.5; color:var(--encre-douce); margin-top:10px}
.sources-apercu span{font-weight:600; color:var(--violet-sombre)}
.tuile.accent{background:linear-gradient(135deg,var(--menthe-claire),var(--lavande-pale)); border-color:transparent}

/* ---------- Progression ---------- */
.etapes{list-style:none; margin:18px 0 0; padding:0}
.etapes li{display:flex; align-items:center; gap:12px; padding:9px 0; color:var(--encre-douce); font-size:14.5px}
.etapes .puce{
  width:22px; height:22px; border-radius:50%; border:2px solid var(--trait);
  flex:0 0 auto; display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--encre-douce);
}
.etapes li.faite{color:var(--encre)}
.etapes li.faite .puce{background:var(--conforme); border-color:var(--conforme); color:#fff}
.etapes li.active{color:var(--violet-sombre); font-weight:600}
.etapes li.active .puce{border-color:var(--violet); color:var(--violet); animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(111,75,119,.30)}50%{box-shadow:0 0 0 7px rgba(111,75,119,0)}}
.journal{margin-top:14px; font-size:13px; color:var(--encre-douce); font-variant-numeric:tabular-nums}

/* ---------- Messages ---------- */
.message{border-radius:11px; padding:15px 18px; font-size:14.5px; margin-top:16px}
/* Entre le titre de la liste et le tableau, le message a besoin d'air des deux
   côtés : sans marge basse il touchait l'en-tête du tableau. */
#msg-liste:not(:empty){margin:6px 0 22px}
#msg-liste .message{margin-top:0}
.message.info,.message.consigne{background:var(--conforme-fond); color:var(--conforme)}
/* ⚠️ `consigne` : même rendu que `info`, mais ne part PAS en toast
   (public/js/toast.js). Une consigne (« Revenez sur la parcelle… ») ou un état
   en cours (« Paiement en cours de vérification ») doit rester lisible tant que
   la page l'est : un message qui s'efface en 6 s se raterait. */
.message.vigilance{background:var(--vigilance-fond); color:var(--vigilance); border:1px solid #e8d6ae}
.message.erreur{background:var(--alerte-fond); color:var(--alerte); border:1px solid #eccdd2}
.message .titre{font-weight:600; display:block; margin-bottom:3px}
.message ul{margin:6px 0 0; padding-left:18px}
/* Le toast : un `.message.info` posé en bas à droite, qui s'efface seul
   (public/js/toast.js). Couleurs, rayon et police viennent de `.message` ; seule
   l'ombre est propre. Fond opaque : il passe par-dessus la page. */
.toasts{position:fixed; right:24px; bottom:24px; z-index:1000; display:flex; flex-direction:column; gap:10px;
  width:min(360px,calc(100vw - 32px)); pointer-events:none}
.toast{margin-top:0; display:flex; align-items:flex-start; gap:12px; pointer-events:auto;
  box-shadow:0 6px 20px rgba(20,30,25,.16); animation:toast-entree .2s ease-out}
.toast-corps{flex:1; min-width:0}
.toast-fermer{flex:none; background:none; border:0; padding:0 2px; margin:-2px -4px 0 0; font:inherit; font-size:20px;
  line-height:1; color:inherit; cursor:pointer}
.toast-fermer:focus-visible{outline:2px solid currentColor; outline-offset:2px; border-radius:4px}
@keyframes toast-entree{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .toast{animation:none} }
@media (max-width:639px){ .toasts{left:16px; right:16px; bottom:16px; width:auto} }

/* Le pied v2 — « PiedDePage v2 » du projet de design (08/10/2026), valeurs recopiées de la maquette.
   ⚠️ Le fond court d'un bord à l'autre de la fenêtre (#f3eff6, filet en haut) et le contenu se tient à 1200 px : c'est
   la maquette, qui remplace l'ancien pied à filet de gouttière. Un seul seuil de mobile, 640 px (celui de la maquette) ;
   la carte « Vos données » passe à droite à partir de 1060 px, dessous avant (pied-v2-largeurs, 08/10/2026 : 340 px de large
   à droite, intitulés à 66 px — « PiedDePage v2 - largeurs »). */
.pied{
  background:#f3eff6; border-top:1px solid #e4dcea;
  font-size:12.5px; color:var(--encre-douce); line-height:1.6;
}
.pied p{margin:0}
.pied-interieur{
  max-width:1200px; margin:0 auto; padding:clamp(48px,6vw,64px) 32px 28px;
  display:flex; flex-direction:column; gap:28px;
}
.pied-haut{display:flex; flex-wrap:wrap; gap:36px 48px; align-items:stretch}
.pied-gauche{flex:1 1 600px; min-width:0; display:flex; flex-direction:column; gap:32px}
.pied-rangee{display:flex; flex-wrap:wrap; gap:32px 40px; align-items:flex-start}
.pied-marque{flex:1 1 210px; max-width:280px; display:flex; flex-direction:column; gap:14px}
/* decisions/pied-v2-taille-logo (Benoist, 08/10/2026) : « Suivre la maquette » — symbole 44 px, nom 20 px (20/44), l'en-tête garde 0,61. */
.pied-marque .lockup{color:var(--violet-sombre); --lockup-rapport:.4545}
/* Le dessin pose aussi l'écart symbole→nom (gap 6, nom à −1 px, ≈ 5 px nets) ; le lockup partagé en met ≈ 7,8 : relevé par build-design, 3 px de trop au pied. */
.pied-marque .lockup{gap:6px}
.pied-marque .lockup-nom{margin-left:-1px}
.pied-marque p{font-size:14px; line-height:1.55; color:#5b4a61; max-width:30ch}
.pied-marque a{align-self:flex-start; text-decoration:none}
.pied-creer{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:#fff; background:var(--violet); padding:10px 16px; border-radius:10px;
}
.pied-marque .pied-creer:hover{background:var(--violet-sombre); color:#fff}
.pied-courriel{font-size:14px; font-weight:500; color:var(--violet)}
.pied-courriel:hover{color:var(--violet-sombre)}
.pied-colonnes{flex:3 1 420px; min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:28px 24px}
.pied-colonne{display:flex; flex-direction:column; gap:10px}
.pied-titre{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--violet-sombre); text-decoration:none;
}
.pied-colonne .pied-titre{margin-bottom:3px}
.pied-colonne a{font-size:14px; color:#5b4a61; text-decoration:none}
.pied-colonne a:hover{color:var(--violet-sombre)}

/* ⚠️ Provenance et mention : collées au bas de la colonne de gauche (`margin-top:auto`), à hauteur du bas de la carte. */
.pied-provenance{margin-top:auto; display:flex; flex-direction:column; gap:14px; padding-top:22px; border-top:1px solid #e4dcea}
.pied-sources{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
a.pied-titre:hover{color:var(--violet)}
.pied-sources .pied-titre{margin-right:4px}
/* ⚠️ Les capsules passent à la ligne (maquette) : l'ancien pied les tenait sur une seule ligne qui défilait. Les
   `data-etat` des pastilles de sonde ne servent plus au public (bouton retiré), leurs règles sont parties avec. */
.pied-sources-liste{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px}
.pied-sources-liste li{margin:0}
.pied-sources-liste a{
  display:inline-block; font-size:12.5px; color:#5b4a61; background:#fff; border:1px solid var(--trait);
  padding:4px 10px; border-radius:999px; text-decoration:none;
}
.pied-sources-liste a:hover{border-color:var(--mauve); color:var(--violet-sombre)}
/* ⚠️ `.pied .pied-mention` : le remise à zéro `.pied p{margin:0}` vaut (0,1,1) et battrait une classe seule. */
.pied .pied-mention{font-size:12.5px; line-height:1.6; color:var(--encre-douce); max-width:90ch}
.pied .pied-mention strong{font-weight:600; color:var(--violet-sombre)}

/* La carte « Vos données » : à droite en large (340 px max), sous la colonne de gauche en dessous de 1060 px, repliée sur mobile. */
.pied-donnees{
  flex:1 1 300px; min-width:0; background:#fff; border:1px solid var(--trait); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
}
@media (min-width:1060px){ .pied-donnees{max-width:340px} }
.pied-donnees-tete{
  all:unset; box-sizing:border-box; width:100%; padding:14px 18px; display:flex; align-items:center; gap:12px;
  cursor:default; border-bottom:1px solid #f1ebf4;
}
.pied-donnees-tete:focus-visible{outline:3px solid var(--lavande); outline-offset:-3px}
.pied-donnees-icone{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:var(--lavande-pale); color:var(--violet-sombre); flex:none}
.pied-donnees-icone svg{display:block}
.pied-donnees-titres{flex:1; display:flex; flex-direction:column; gap:1px; min-width:0}
.pied-donnees-sous{font-size:12.5px; color:var(--encre-douce)}
.pied-donnees-signe{display:none; flex:none; font-size:18px; line-height:1; color:var(--violet)}
#pied-donnees-corps{display:flex; flex-direction:column; flex:1}
.pied-donnees dl{margin:0; padding:4px 18px; display:flex; flex-direction:column; flex:1}
.pied-donnees dl > div{display:grid; grid-template-columns:66px minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px solid #f1ebf4}
.pied-donnees dl > div:last-child{border-bottom:0}
.pied-donnees dt{font-size:12px; font-weight:600; color:var(--violet-sombre); line-height:1.55}
.pied-donnees dd{margin:0; font-size:13px; line-height:1.5; color:#5b4a61}
.pied-donnees dd strong{font-weight:600; color:var(--violet-sombre)}
.pied-durees{display:flex; flex-direction:column; gap:2px}
.pied-donnees dd a{color:var(--violet); font-weight:500; border-bottom:1px solid var(--lavande-pale); text-decoration:none}
.pied-donnees dd a:hover{color:var(--violet-sombre)}
.pied-donnees-pied{padding:12px 18px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; background:var(--fond); border-top:1px solid #f1ebf4}
.pied-droits{font-size:13px; font-weight:600; color:var(--violet-sombre); background:#fff; border:1px solid var(--lavande-pale); padding:7px 12px; border-radius:9px; text-decoration:none}
.pied-droits:hover{border-color:var(--violet)}
.pied-detail{font-size:13px; font-weight:500; color:var(--violet); text-decoration:underline; text-underline-offset:2px}
.pied-detail:hover{color:var(--violet-sombre)}

/* La ligne de signature : la raison sociale et la version à gauche, les liens légaux à droite, sous un filet. */
.pied-bas{
  display:flex; align-items:center; justify-content:space-between; gap:12px 26px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid #e4dcea;
}
.pied-signature{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.pied .signature{font-size:12.5px; color:#5b4a61}
.pied .version{font-size:12px; color:#857d8b; font-variant-numeric:tabular-nums}
.pied-legal{display:flex; gap:8px 20px; flex-wrap:wrap}
.pied-legal a{font-size:12.5px; color:#5b4a61; text-decoration:none}
.pied-legal a:hover{color:var(--violet-sombre)}

/* Mobile : 640 px, la carte se replie (public/js/barre-fixe.js pose `data-replie` ; sans script, elle reste ouverte). */
@media (max-width:639px){
  .pied-interieur{padding:40px 20px 24px}
  .pied-donnees-tete{cursor:pointer}
  .pied-donnees-signe{display:block}
  .pied-donnees[data-replie="true"] #pied-donnees-corps{display:none}
  .pied-donnees[data-replie="true"] .pied-donnees-tete{border-bottom:0}
}
.chargement{display:inline-block; width:15px; height:15px; border:2px solid var(--lavande-pale);
  border-top-color:var(--violet); border-radius:50%; animation:tourne .7s linear infinite; vertical-align:-2px; margin-right:7px}
@keyframes tourne{to{transform:rotate(360deg)}}

@media (max-width:680px){
  .confirmation{grid-template-columns:1fr}
  main{margin-top:-18px}
  .carte{padding:22px 20px}
}

.etapes li.ignoree{opacity:.5}
.etapes li.ignoree .puce{border-style:dashed}

/* ---------- États d'attente ---------- */
.bouton .chargement{border-color:rgba(255,255,255,.35); border-top-color:#fff; margin-right:8px}
.bouton.secondaire .chargement{border-color:var(--lavande-pale); border-top-color:var(--violet)}
.bouton[data-charge]{cursor:progress}

/* Vignette : la requête WMS met une à deux secondes, l'attente doit se voir. */
.vignette-boite{position:relative; border-radius:11px; overflow:hidden; background:var(--fond); border:1px solid var(--trait)}
.vignette-boite::before{content:''; display:block; padding-top:66.7%}
.vignette-boite img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:none; border-radius:0;
  opacity:0; transition:opacity .28s ease}
.vignette-boite.prete img{opacity:1}
.vignette-boite .attente{
  position:absolute; inset:0; display:grid; place-items:center; gap:10px; align-content:center;
  color:var(--encre-douce); font-size:13px;
  background:linear-gradient(110deg,var(--fond) 30%,#f3eef6 50%,var(--fond) 70%);
  background-size:220% 100%; animation:balaye 1.5s ease-in-out infinite;
}
.vignette-boite.prete .attente{display:none}
.vignette-boite .attente .chargement{width:22px; height:22px; border-width:2.5px; margin:0}
@keyframes balaye{0%{background-position:120% 0}100%{background-position:-20% 0}}

/* L'étape en cours porte un vrai spinner, pas seulement une pulsation. */
.etapes li.active .puce{
  border-color:var(--lavande-pale); border-top-color:var(--violet);
  animation:tourne .7s linear infinite; color:transparent; box-shadow:none;
}
.alternatives button[data-charge]{opacity:.6; cursor:progress}


/* ---------- Vignette cliquable ---------- */
.vignette-boite{display:block; width:100%; padding:0; cursor:zoom-in; border:1px solid var(--trait);
  background:var(--fond); font:inherit; text-align:left}
.vignette-boite:focus-visible{outline:3px solid var(--lavande); outline-offset:2px}
.vignette-boite .loupe{
  position:absolute; right:10px; bottom:10px; z-index:2;
  background:rgba(255,255,255,.94); color:var(--violet-sombre);
  font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:6px 11px; border-radius:8px; box-shadow:0 2px 8px rgba(78,51,85,.16);
  opacity:0; transform:translateY(4px); transition:opacity .18s, transform .18s;
}
.vignette-boite.prete:hover .loupe,.vignette-boite:focus-visible .loupe{opacity:1; transform:none}
.vignette-boite:not(.prete) .loupe{display:none}

/* ---------- Visionneuse plein écran ---------- */
.visionneuse{
  position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
  background:rgba(30,22,34,.93); backdrop-filter:blur(3px);
}

.v-barre{display:flex; align-items:center; justify-content:space-between; gap:10px 18px;
  padding:14px 20px; color:#fff; flex-wrap:wrap}
.v-titre{font-size:15px; font-weight:600; letter-spacing:.01em}
.v-titre small{display:block; font-size:12.5px; font-weight:400; opacity:.66; margin-top:2px}
.v-outils{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.v-groupe{display:flex; background:rgba(255,255,255,.13); border-radius:10px; padding:3px; gap:2px}
.v-groupe button{
  font:inherit; font-size:13.5px; font-weight:500; cursor:pointer; color:rgba(255,255,255,.8);
  background:none; border:none; padding:7px 14px; border-radius:8px; transition:background .15s, color .15s;
}
.v-groupe button:hover{color:#fff; background:rgba(255,255,255,.12)}
.v-groupe button.actif{background:#fff; color:var(--violet-sombre); font-weight:600}
.v-fermer{font:inherit; font-size:17px; line-height:1; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.13); border:none; width:38px; height:38px; border-radius:10px}
.v-fermer:hover{background:rgba(255,255,255,.24)}

/* min-height:0 est indispensable : sans lui, un enfant flex refuse de
   rétrécir sous sa taille de contenu et l'image déborde hors du cadre. */
/* min-height:0 : sans lui, un enfant flex refuse de rétrécir sous sa taille de
   contenu. grid-template-* en minmax(0,1fr) : sans quoi la ligne de grille se
   dimensionne sur la hauteur intrinsèque de l'image (936 px pour un cadre de
   541), et le `height:100%` de l'image se résout sur cette ligne trop haute —
   l'image déborde alors du cadre au lieu de s'y inscrire. */
.v-scene{flex:1; min-height:0; position:relative; overflow:hidden;
  display:grid; grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr);
  place-items:center; padding:0 18px 6px}
.v-scene img{width:100%; height:100%; object-fit:contain; display:block; border-radius:6px;
  box-shadow:0 10px 50px rgba(0,0,0,.45);
  opacity:0; transition:opacity .2s}
.v-scene img.prete{opacity:1}
/* ⚠️ Le voile sombre n'est pas décoratif : le plan se dessine sur du blanc, et
   l'attente était écrite en blanc dessus — invisible pendant les trois
   secondes de la vue large. Le mode aérien, lui, est sombre : il fallait un
   fond qui tienne sur les deux. */
.v-attente{position:absolute; z-index:2; display:flex; align-items:center; gap:10px;
  color:#fff; font-size:14px;
  background:rgba(38,27,42,.86); padding:11px 18px; border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.28)}
.v-attente[hidden]{display:none}
.v-attente .chargement{border-color:rgba(255,255,255,.28); border-top-color:#fff; width:20px; height:20px; margin:0}
.v-aide{padding:12px 20px 18px; text-align:center; color:rgba(255,255,255,.55); font-size:12.5px}
.v-aide kbd{background:rgba(255,255,255,.16); border-radius:5px; padding:2px 6px; font:inherit; font-size:11.5px}

/* Au téléphone, la maquette ne retire que l'aide (« Échap » n'a pas de clavier pour lui) ; la barre et ses
   boutons gardent leurs valeurs et passent à la ligne. ⚠️ 640 et non 680 : la maquette n'a que ce seuil. */
@media (max-width:639.98px){ .v-aide{display:none} }

.etapes li{justify-content:flex-start}
.etapes .chrono{
  margin-left:auto; font-size:12.5px; font-weight:500; color:var(--encre-douce);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.etapes li.active .chrono{color:var(--violet)}

/* ---------- Liste des dossiers ---------- */
/* Le bandeau respire en haut comme en bas : tout y était collé au bord
   supérieur de la fenêtre, marque comprise. */
.entete-compacte .entete-int{padding-top:26px; padding-bottom:62px}
/* Le titre et les actions de la vue sur une même ligne : la carte n'a plus à
   répéter le nom de l'écran pour porter son bouton. Ils se séparent en deux
   rangées quand la place manque. */
/* ⚠️ Le titre et ses actions s'alignent sur le CONTENU de la carte, pas sur son
   bord : la carte a 28 px de marge interne, et sans ce retrait le titre
   commençait 28 px à gauche du texte qu'il coiffe, le bouton 28 px à droite du
   bord du tableau. Deux verticales pour un seul écran. */
.entete-titre{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px 20px;
  flex-wrap:wrap; padding:0 28px;
}
@media (max-width:640px){ .entete-titre{padding:0 20px} }
.actions-entete{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:4px}
.actions-entete:empty{display:none}
/* ⚠️ Sur le dégradé, un bouton secondaire au fond transparent devient illisible
   dès que le mauve arrive : il prend ici le papier plein. */
.actions-entete .bouton.secondaire{background:var(--papier); border-color:transparent}
.actions-entete .bouton.secondaire:hover{background:#fff; border-color:var(--violet)}
.entete-compacte h1{margin:34px 0 0; font-size:clamp(23px,3.4vw,32px)}
/* ⚠️ La carte MORD sur le dégradé, elle ne se pose pas dessous : c'est ce qui
   accroche l'écran au bandeau. Le retirer — même de quelques pixels — laissait
   deux blocs empilés sans rapport l'un avec l'autre. */
body.large main{margin-top:-46px}

.barre-liste{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
.champ-recherche{flex:1 1 320px}
.champ-recherche input{font-size:16px; padding:12px 15px}

.tableau-defilant{overflow-x:auto; margin:0 -4px}

/* ---------- Les tableaux de l'administration ---------- */
/* ⚠️ UN seul gabarit pour tous les tableaux du CMS, et non un style par `id` :
   celui de la liste des dossiers était soigné, les cinq autres héritaient du
   `table` nu du navigateur — en-têtes collés aux valeurs, colonnes sans
   séparation, nombres alignés à gauche. On ne lisait plus une ligne.
   Le sélecteur est porté par `body.large`, qui n'existe que dans le CMS : le
   site public garde ses propres tableaux. */
.tableau{width:100%; border-collapse:collapse; font-size:14px}
body.large .carte table{width:100%; border-collapse:collapse; font-size:14px}
body.large .carte thead th{
  text-align:left; font-size:11px; letter-spacing:.11em; text-transform:uppercase; font-weight:700;
  color:var(--violet); background:var(--lavande-pale); padding:10px 12px; white-space:nowrap;
}
body.large .carte thead th.num,body.large .carte thead th.droite{text-align:right}
body.large .carte thead th:first-child{border-radius:8px 0 0 8px}
body.large .carte thead th:last-child{border-radius:0 8px 8px 0}
body.large .carte tbody td{padding:12px; border-bottom:1px solid var(--trait); vertical-align:middle}
body.large .carte tbody tr:last-child td{border-bottom:none}
body.large .carte tbody tr:hover{background:var(--fond)}
/* ⚠️ `tabular-nums` : sans chiffres de largeur fixe, une colonne de nombres
   alignée à droite tremble d'une ligne à l'autre et ne se compare plus. */
body.large .carte td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
body.large .carte td.droite{text-align:right}
body.large .carte .source{font-size:11.5px; color:var(--encre-douce); margin-top:2px}
#table-dossiers{min-width:820px}

.pastille{display:inline-block; padding:3px 9px; border-radius:6px; font-size:11.5px; font-weight:600; white-space:nowrap}
.pastille.menthe,.pastille.conforme{background:var(--conforme-fond); color:var(--conforme)}
.pastille.indisponible{background:var(--indisponible-fond); color:var(--indisponible)}
.pastille.information{background:var(--information-fond); color:var(--information)}
.pastille.proche{background:var(--vigilance-fond); color:var(--vigilance); border:1px solid #e8d6ae}
/* ⚠️ Toute classe d'état employée dans le balisage doit avoir sa règle ici.
   « vigilance » et « alerte » manquaient : les pastilles correspondantes
   s'affichaient en texte nu, sans fond ni couleur. */
.pastille.vigilance{background:var(--vigilance-fond); color:var(--vigilance)}
.pastille.alerte{background:var(--alerte-fond); color:var(--alerte)}
.bouton.compact{padding:8px 14px; font-size:13.5px; border-radius:9px}


/* Les compteurs collaient à l'en-tête du tableau. */
#compteurs{margin-bottom:30px}
.entete-liste{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:0 0 14px;
}
/* ⚠️ Les écrans d'administration enchaînent quatre à cinq sections dans une
   seule carte : sans respiration au-dessus des titres, les grilles se touchent
   et l'écran se lit comme un seul bloc. Le premier titre, lui, ne prend pas
   cette marge — il suivrait le texte d'introduction avec un trou. */
body.large .carte .entete-liste{margin-top:34px}
body.large .carte .entete-liste:first-child{margin-top:0}
.entete-liste h3{margin:0; font-size:15px; font-weight:600; color:var(--violet-sombre)}
.entete-liste .bouton[hidden]{display:none !important}

.actions-ligne{display:inline-flex; gap:8px; align-items:center; justify-content:flex-end}
/* Relancer un travail échoué depuis l'endroit où l'échec s'affiche. */
.actions-echec{margin-top:10px}
.bouton.discret{
  background:transparent; color:var(--encre-douce); border:1px solid var(--trait);
}
.bouton.discret:hover:not(:disabled){background:var(--fond); color:var(--encre); border-color:var(--lavande); box-shadow:none}
.bouton.danger{
  background:var(--alerte); color:#fff; border-color:var(--alerte);
}
.bouton.danger:hover:not(:disabled){background:#762b36; border-color:#762b36; box-shadow:0 4px 14px rgba(142,53,66,.28)}

/* La liste a besoin de plus de largeur que le tunnel de génération. */
/* ⚠️ L'administration tient la MÊME largeur que le site (`--largeur`), à la
   demande de Benoist : elle s'élargissait à 1240 px pour ses tableaux, et les
   deux écrans ne s'alignaient plus quand on passait de l'un à l'autre. Les
   tableaux larges défilent de côté dans `.tableau-defilant`, ce qui est leur
   affaire, pas celle de la page. */
body.large #table-dossiers{min-width:0}
body.large #table-dossiers tbody td{padding:11px 10px}
body.large #table-dossiers thead th{padding:9px 10px}

/* Actions en pictogrammes : la ligne tient sans défilement horizontal. */
.picto{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; cursor:pointer;
  border:1px solid var(--trait); background:var(--papier); color:var(--violet);
  transition:background .15s, border-color .15s, color .15s;
}
.picto:hover{background:var(--menthe-claire); border-color:var(--menthe); color:var(--violet-sombre)}
.picto:focus-visible{outline:2px solid var(--lavande); outline-offset:2px}
.picto-danger{color:var(--encre-douce)}
.picto-danger:hover{background:var(--alerte-fond); border-color:#eccdd2; color:var(--alerte)}
.picto.arme{background:var(--alerte); border-color:var(--alerte); color:#fff}
.picto.arme:hover{background:#762b36; border-color:#762b36; color:#fff}
.picto:disabled{opacity:.6; cursor:progress}
.picto .chargement{margin:0; width:15px; height:15px; border-color:var(--lavande-pale); border-top-color:var(--violet)}

#table-dossiers td.nowrap{white-space:nowrap}
.actions-ligne{gap:6px}

/* ---------- Générations en cours ---------- */
.bloc-file{
  border:1px solid var(--trait); border-radius:12px; overflow:hidden;
  background:var(--papier); margin:0 0 26px;
}
.bloc-file-titre{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  color:var(--violet); background:var(--lavande-pale); padding:9px 16px;
}
.travail{padding:14px 16px; border-top:1px solid var(--trait)}
.travail:first-of-type{border-top:none}
.travail-tete{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14.5px}
.travail-tete strong{color:var(--violet-sombre)}
.travail-tete .chargement{margin:0; width:14px; height:14px}
.travail-chrono{margin-left:auto; font-size:13px; color:var(--encre-douce); font-variant-numeric:tabular-nums}
.travail-etape{font-size:13.5px; color:var(--encre-douce); margin-top:5px}
.jauge{height:4px; border-radius:99px; background:var(--lavande-pale); margin-top:9px; overflow:hidden}
.jauge span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--menthe),var(--lavande));
  transition:width .4s ease;
}
.travail-echec{background:var(--alerte-fond)}
.travail-echec .travail-tete strong{color:var(--alerte)}
.travail-echec .travail-chrono{color:var(--alerte); font-weight:600}
.puces-fines{margin:6px 0 0; padding-left:16px; font-size:13px}

/* Avertissement de version : la page peut rester ouverte pendant un déploiement. */
.bandeau-version{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:200;
  display:flex; align-items:center; gap:14px; max-width:calc(100vw - 32px);
  background:var(--violet-sombre); color:#fff; font-size:14px;
  padding:12px 16px; border-radius:12px; box-shadow:0 10px 34px rgba(78,51,85,.34);
}
.bandeau-version button{
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  background:#fff; color:var(--violet-sombre); border:none; border-radius:8px; padding:8px 14px;
}
.bandeau-version button:hover{background:var(--menthe-claire)}

/* ---------- Pièces annexes ---------- */
.pieces{margin-top:26px; padding-top:22px; border-top:1px solid var(--trait)}
.pieces[hidden]{display:none !important}
.pieces h3{margin:0 0 6px}
.liste-pieces{list-style:none; margin:0 0 14px; padding:0}
.liste-pieces li{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--trait); border-radius:10px; margin-bottom:8px; background:var(--fond);
}
.piece-titre{font-weight:500; color:var(--violet-sombre); font-size:14.5px}
.liste-pieces .source{margin-left:auto; white-space:nowrap; font-size:12.5px; color:var(--encre-douce)}
.liste-pieces .picto{width:30px; height:30px; border-radius:8px}


/* Une pièce rapportée par la recherche automatique se signale comme telle :
   l'utilisateur doit pouvoir la distinguer de ce qu'il a lui-même déposé. */
.pastille-auto{
  margin-left:7px; padding:1px 6px; border-radius:5px; vertical-align:1px;
  font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  background:var(--menthe-claire); color:#2f6b56;
}


/* Jauge de la page de génération : les étapes disent où l'on en est,
   la jauge dit combien il reste. */
/* Le polygone se redessine pendant que le dossier se calcule : le mouvement
   dit le travail en cours. Il s'arrête de lui-même quand la page se ferme, et
   se fige si le visiteur a réduit les animations dans son système. */
.tete-production{display:flex; align-items:center; gap:12px; margin-bottom:2px}
.tete-production h2{margin:0}
/* Le symbole est en prune partout, comme dans le lockup. */
.symbole-production{
  width:30px; height:30px; flex:0 0 auto; display:block; color:var(--violet);
}
.symbole-production svg{width:100%; height:100%; display:block}

/* ⚠️ Bord à bord, sans rayon ni marge : au design la jauge est un filet de
   5 px qui traverse la barre. Un ruban arrondi flottant dans le padding
   lisait comme une décoration, pas comme une mesure. */
.jauge-production{
  height:5px; border-radius:0; margin:0; background:var(--trait);
}
.jauge-production span{border-radius:0; background:var(--violet); transition:width .5s ease}
.jauge-production.termine span{background:var(--menthe)}
.jauge-production.echec span{background:var(--alerte)}


/* ═══════════════ Page d'accueil ═══════════════
   Reprise de Accueil.dc.html. Le design, fait pour un canvas, portait tous ses
   styles en attribut — ici ils reviennent dans la feuille, sur les variables de
   la charte, pour rester modifiables en un point. */

.nav-site{display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap}
/* Le filet sépare la navigation de lecture de l'appel à l'action, comme
   dans la charte. Il disparaît quand la nav se replie sur plusieurs lignes,
   où il ne séparerait plus rien. */
.nav-site .filet{width:1px; height:22px; background:rgba(78,51,85,.2); flex:0 0 auto}
.nav-site .bouton{
  padding:11px 20px; font-size:14.5px; border-radius:11px; opacity:1;
  text-decoration:none; flex:0 0 auto;
}
/* Pleine opacité : sur le dégradé, un texte affaibli passe sous le seuil de
   contraste dès que le fond vire au mauve.
   ⚠️ Le `:not(.bouton)` n'est pas décoratif : `.nav-site a` (0,1,1) l'emporte
   sur `.bouton` (0,1,0), et sans lui cette couleur écrasait le blanc du bouton
   — texte violet sombre sur fond violet, illisible. */
.nav-site a:not(.bouton){
  font-size:14.5px; font-weight:500; color:var(--violet-sombre);
  text-decoration:none; white-space:nowrap;
}
.nav-site a:not(.bouton):hover{opacity:.7}
/* ⚠️ Lot nav-mobile-dessin, 05/10/2026 : le repli à 720 px de ces liens (et
   du filet) a été retiré — mort depuis que `.nav-site` entier se masque dès
   1120 px pour un anonyme (plus bas), et que `barre-fixe.js` masque déjà
   les mêmes liens par style en ligne, à la même largeur, pour un connecté.
   Les deux cas qu'il couvrait étaient donc déjà couverts avant qu'il ne
   joue. */

/* ---------- Le bouton du compte, sur toutes les pages (05/10/2026) ---------- */
/* ⚠️ Repris de la maquette Claude Design « Espace client », sur les variables
   de la charte plutôt que ses couleurs à elle : `--violet-sombre`,
   `--violet`, `--lavande-pale`, `--trait`, `--alerte`/`--alerte-fond`,
   `--information-fond` (teinte exacte du badge crédits de la maquette). */
.nav-site-liens{display:flex; align-items:center; gap:14px 20px}
.compte-pastille{position:relative}
.compte-bouton{
  display:flex; align-items:center; gap:10px; background:#ffffff; border:1px solid var(--trait);
  border-radius:999px; padding:4px 12px 4px 4px; cursor:pointer; font:inherit;
}
.compte-bouton:hover{background:#f6f2f8}
.compte-bouton[aria-expanded="true"]{background:#f6f2f8; border-color:var(--lavande-pale)}
.compte-bouton[aria-expanded="true"] .compte-chevron{transform:rotate(180deg)}
.compte-avatar{
  width:32px; height:32px; border-radius:999px; background:var(--lavande-pale); color:var(--violet-sombre);
  display:grid; place-items:center; font-size:12px; font-weight:700; flex:none;
}
.compte-prenom{font-size:14px; font-weight:500; color:var(--violet-sombre); white-space:nowrap}
.compte-chevron{display:block; color:var(--violet); transition:transform .18s ease; flex:none}

.compte-menu{
  position:absolute; right:0; top:calc(100% + 10px); z-index:60; width:264px;
  background:#ffffff; border:1px solid var(--trait); border-radius:14px;
  box-shadow:0 2px 6px rgba(78,51,85,.06), 0 18px 44px rgba(78,51,85,.16); padding:8px;
}
.compte-menu[hidden]{display:none}
.compte-menu-identite{
  padding:10px 12px 12px; display:flex; flex-direction:column; gap:1px;
  border-bottom:1px solid #f1ebf4; margin-bottom:6px;
}
.compte-menu-nom{font-size:14.5px; font-weight:600; color:var(--violet-sombre)}
.compte-menu-identifiant{font-size:12.5px; color:var(--encre-douce); overflow-wrap:anywhere}
.compte-menu-credits{
  margin-top:8px; align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--violet); background:var(--information-fond);
  padding:4px 9px; border-radius:6px; font-variant-numeric:tabular-nums;
}
.compte-menu a, .compte-menu-deconnexion button{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
  font-size:14px; font-weight:500; color:var(--violet-sombre); text-decoration:none;
  width:100%; border:none; background:none; cursor:pointer; font:inherit; text-align:left;
}
.compte-menu a:hover, .compte-menu-deconnexion button:hover{background:#f6f2f8}
/* ⚠️ `:focus-visible`, jamais `:focus` nu : demandé par Benoist (05/10/2026)
   en plus du vrai correctif (le script ne déplace plus le focus qu'au
   clavier) — ceinture et bretelles, pour qu'un futur focus programmatique
   sur ces liens ne dessine pas non plus un anneau à la souris. */
.compte-menu a:focus-visible, .compte-menu-deconnexion button:focus-visible{
  outline:2px solid var(--lavande); outline-offset:2px;
}
.compte-menu a svg{flex:none; display:block; color:var(--violet)}
.compte-menu-liens-site[hidden]{display:none}
/* ⚠️ Relevé par build-design (05/10/2026) : la maquette distingue les quatre
   liens du site, repliés ici sous 1120 px, des quatre vraies entrées du
   compte — plus clairs (#5b4a61) et sans le gras, pour ne pas prétendre que
   « Le dossier » ou « Tarifs » sont au même niveau que « Mes dossiers ». */
.compte-menu-liens-site a{font-weight:400; color:#5b4a61}
.compte-menu-liens-site a:hover{background:#f6f2f8}
.compte-menu-filet{height:1px; background:#f1ebf4; margin:6px 4px}
.compte-menu-deconnexion button{color:var(--alerte)}
.compte-menu-deconnexion button:hover{background:var(--alerte-fond)}
.compte-menu-deconnexion button svg{color:inherit}

/* ---------- La bulle de connexion de l'anonyme (21/10/2026) ---------- */
/* ⚠️ Valeurs relevées une à une dans Accueil.dc.html (Claude Design, rechargé
   le 21/10/2026). Les sélecteurs portent `#lien-mon-compte` ou
   `.nav-site .bulle-connexion` : `.nav-site a:not(.bouton)` (0,2,1) leur
   donnerait sinon son 14,5 px, son nowrap et son survol en opacité, que la
   maquette n'a pas ici (le survol du bouton est un fond). */
.zone-connexion{position:relative; display:inline-flex}
.zone-connexion[hidden]{display:none}
#lien-mon-compte{
  display:inline-flex; align-items:center; gap:6px; border-radius:9px;
  padding:7px 10px; margin:-7px -10px; background:transparent;
}
#lien-mon-compte:hover{opacity:1; background:#f6f2f8}
#lien-mon-compte[aria-expanded="true"]{background:rgba(255,255,255,.7)}
.lien-compte-chevron{display:block; transition:transform .2s ease}
#lien-mon-compte[aria-expanded="true"] .lien-compte-chevron{transform:rotate(180deg)}
/* Le chevron n'annonce une bulle que là où le script en ouvre une. */
#lien-mon-compte:not([aria-haspopup]) .lien-compte-chevron{display:none}

@keyframes bulle{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.bulle-connexion{
  position:absolute; top:calc(100% + 14px); right:-24px; z-index:60; width:320px;
  background:#ffffff; border:1px solid var(--trait); border-radius:14px;
  box-shadow:0 12px 40px rgba(78,51,85,.16); padding:20px 20px 18px;
  display:flex; flex-direction:column; gap:14px;
  animation:bulle .18s cubic-bezier(.22,.61,.36,1);
}
.bulle-connexion[hidden]{display:none}
@media (prefers-reduced-motion:reduce){ .bulle-connexion{animation:none} }
.bulle-connexion-pointe{
  position:absolute; top:-7px; right:44px; width:12px; height:12px; background:#ffffff;
  border-left:1px solid var(--trait); border-top:1px solid var(--trait); transform:rotate(45deg);
}
.bulle-connexion-tete{display:flex; flex-direction:column; gap:3px}
.bulle-connexion-titre{font-size:16px; font-weight:600; color:var(--violet-sombre)}
.bulle-connexion-sous-titre{font-size:12.5px; line-height:1.5; color:var(--encre-douce)}
.bulle-connexion-form{display:flex; flex-direction:column; gap:14px; margin:0}
.bulle-connexion-form label{display:flex; flex-direction:column; gap:6px}
.bulle-connexion-ligne{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.bulle-connexion-etiquette{font-size:12.5px; font-weight:600; color:var(--violet-sombre)}
.nav-site .bulle-connexion a{font-size:12px; font-weight:500; color:var(--violet); white-space:normal}
.nav-site .bulle-connexion a:hover{opacity:1; color:var(--violet-sombre)}
/* 16 px : en dessous, Safari sur iPhone zoome la page au focus. */
.bulle-connexion-form input{
  width:100%; box-sizing:border-box; font:inherit; font-size:16px; color:var(--encre);
  background:#ffffff; border:1.5px solid var(--trait); border-radius:11px; padding:11px 13px; outline:none;
}
.bulle-connexion-form input:focus{border-color:var(--violet)}
.bulle-connexion-entrer{
  display:block; width:100%; text-align:center; font:inherit; font-size:15px; font-weight:600;
  color:#ffffff; background:var(--violet); padding:12px 18px; border-radius:11px; border:0; cursor:pointer;
}
.bulle-connexion-entrer:hover{background:var(--violet-sombre)}
.bulle-connexion-note{
  margin:0; padding-top:12px; border-top:1px solid #f1ebf4;
  font-size:12px; line-height:1.5; color:var(--encre-douce);
}


.menu-site{display:none}
/* ⚠️ INCONDITIONNEL, pas dans un media query : demandé par Benoist le
   05/10/2026 — « le fond n'est pas flouté en plus » — le voile flou derrière
   le menu du compte (et le panneau burger, même composant) vaut maintenant à
   TOUTES les largeurs, pas seulement sur téléphone. La barre reste au-dessus
   de lui (z-index 50 contre 45), le menu au-dessus des deux (60). */
.voile-site{
  display:block; position:fixed; inset:0; z-index:45;
  background:rgba(78,51,85,.22);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* ⚠️ UN SEUL MÉCANISME pour tout voile flou qui s'ouvre et se ferme
   (demandé par Benoist le 05/10/2026 : « que le flou apparaisse / disparaisse
   progressivement ») : le voile du menu et du burger, la visionneuse, la
   fenêtre du mot de passe. `[hidden]` ne retire plus l'élément du rendu
   (`display:none` coupait la transition d'un coup, à la fermeture surtout) :
   il le rend transparent, flou à zéro, invisible et inerte. `visibility`
   change à la FIN du fondu en sortie, au début en entrée ; sans elle, un
   voile transparent garderait le focus clavier et les clics.
   ⚠️ `!important` : le `[hidden]{display:none !important}` du début de
   feuille l'emporterait sinon. */
/* ⚠️ `visibility` n'est PAS animée à l'ouverture : elle passe à `visible` tout de
   suite, à la fermeture seulement elle attend la fin du fondu (la transition
   qui compte est celle de l'état d'ARRIVÉE). Animée aussi à l'ouverture, elle
   laissait l'élément invisible pendant l'appel `focus()` qui suit
   `hidden = false` : le focus échouait en silence et restait sous le voile
   (relecture du 05/10/2026, reproduit en Chromium). */
.voile-site,.visionneuse,.fenetre{
  transition:opacity .22s ease, visibility 0s, backdrop-filter .22s ease, -webkit-backdrop-filter .22s ease;
}
.voile-site[hidden]{display:block !important}
.visionneuse[hidden],.fenetre[hidden]{display:flex !important}
.voile-site[hidden],.visionneuse[hidden],.fenetre[hidden]{
  opacity:0; visibility:hidden; pointer-events:none;
  backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0);
  transition:opacity .22s ease, visibility 0s linear .22s, backdrop-filter .22s ease, -webkit-backdrop-filter .22s ease;
}
@media (prefers-reduced-motion:reduce){
  .voile-site,.visionneuse,.fenetre,
  .voile-site[hidden],.visionneuse[hidden],.fenetre[hidden]{transition:none}
}
/* ⚠️ Le repos du burger est ICI, et non avec les blocs responsives en fin de
   feuille : là-bas il SUIVAIT le `@media (max-width:640px)` qui lui donne
   `display:flex`, à spécificité égale (0,1,0). L'ordre source l'emportait et
   le burger restait invisible à TOUTE largeur — donc pas de menu sur
   téléphone, et le script qui lit son `display` pour savoir s'il est sur
   téléphone se croyait sur écran large.
   ⚠️ `.burger-site`, PAS `.burger` : ce dernier est celui de l'administration,
   une pastille de 47 px sur fond blanc. Les confondre donnerait au site une
   barre qui n'est pas la sienne. Ses cotes viennent de la maquette
   (design/site/Accueil.dc.html), qui les justifie elle-même. */
.burger-site{display:none}

/* ⚠️ Lot nav-mobile-dessin, 05/10/2026 : build-design a mesuré un TROU pour
   un visiteur ANONYME entre 641 et ~850 px — plus de liens de site (masqués
   à 720 px, voir plus haut), pas encore de burger (ne s'affichait qu'à
   640 px). Arbitré par le PM, sans nouveau dessin : le burger anonyme suit
   désormais le seuil de la maquette Espace client, 1120 px — la même
   largeur où les liens du site rejoignent déjà le menu du compte pour un
   connecté. Entre les deux, jamais un trou : soit les liens en clair, soit
   un menu pour les porter. Séparé du bloc PUREMENT cosmétique ci-dessous
   (logo réduit, barre blanche) qui reste à 640 px — ce n'est pas un gain de
   place, juste l'habillage du vrai téléphone. */
@media (max-width:1120px){
  /* La barre ne garde que le logo et le burger. Masquer le CONTENEUR, et non
     chaque lien : un rendu ultérieur en rétablirait un.
     ⚠️ SAUF pour un visiteur connecté (`.connecte`, posée par barre-fixe.js) :
     le menu du compte est le SEUL mécanisme de navigation mobile une fois
     connecté — il remplace le burger, qui disparaît pour lui (voir plus
     bas). Masquer `.nav-site` entier le priverait aussi de sa pilule. */
  .nav-site:not(.connecte){display:none}
  /* La maquette resserre la barre en trois crans : 22 px au large, 16 px dès que les liens rejoignent le burger,
     14 px au téléphone (règle de 640 px plus bas). Le cran du milieu manquait : à 820 px, la barre gardait 22 px. */
  .barre-int{padding:16px 32px}

  /* 44 px de côté : « la cible minimale au pouce ». */
  .burger-site{
    display:flex; margin-left:auto; width:44px; height:44px;
    align-items:center; justify-content:center; flex-direction:column; gap:5px;
    background:transparent; border:0; padding:0; cursor:pointer; flex:none;
  }
  .burger-site span{
    display:block; width:22px; height:2px; border-radius:2px;
    background:var(--violet-sombre);
    transition:transform .2s ease, opacity .15s ease;
  }
  /* La croix se dessine avec les traits eux-mêmes : pas de second pictogramme
     à tenir en accord avec le premier. */
  .burger-site[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger-site[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger-site[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .burger-site:focus-visible{outline:3px solid var(--lavande); outline-offset:2px; border-radius:8px}

  /* Le panneau se superpose sous la barre : il ne pousse rien. */
  .menu-site{
    display:flex; flex-direction:column;
    position:absolute; left:0; right:0; top:100%; z-index:3;
    background:var(--papier);
    border-top:1px solid #e8e2ec; border-bottom:1px solid #e8e2ec;
    box-shadow:0 14px 34px rgba(78,51,85,.14);
    padding:8px 20px 16px;
  }
  .menu-site[hidden]{display:none}
  /* Rangées de 55 px : 16 px de corps entre 14 px de marge haute et basse. */
  .menu-site a{
    font-size:16px; font-weight:500; color:var(--violet-sombre);
    padding:14px 4px; border-bottom:1px solid #f4eff6; text-decoration:none;
  }
  .menu-site a:last-child{border-bottom:0}
  /* ⚠️ `a.menu-site-cta`, PAS `.menu-site-cta` : le sélecteur nu vaut (0,1,0)
     et perdait contre `.menu-site a` (0,1,1) juste au-dessus. Le `color:#fff`
     était écrit et sans effet — « Créer un dossier » s'affichait en violet
     sombre sur fond violet, illisible. */
  .menu-site a.menu-site-cta{
    margin-top:12px; font-weight:600; color:#fff; background:var(--violet);
    padding:15px 20px; border-radius:11px; text-align:center;
  }
  .menu-site a.menu-site-cta:hover{background:var(--violet-sombre); color:#fff}

  /* Le voile lui-même est défini plus haut, hors media query (toutes
     largeurs désormais). Panneau ouvert : la barre prend le fond plein du
     panneau, sans quoi le dégradé transparaît derrière ses liens. */
  .barre-fixe.menu-ouvert{background:var(--papier)}
  /* La page ne défile pas derrière le panneau. */
  body.menu-site-ouvert{overflow:hidden}
}

@media (max-width:640px){
  /* Sans les liens, 14 px de marge verticale suffisent — la maquette mesure
     69 px de haut au lieu de 145. */
  .barre-int{padding:14px 20px; flex-wrap:nowrap}

  /* ⚠️ La barre est BLANCHE DÈS LE CHARGEMENT sur téléphone, avec son filet et
     son ombre — sans attendre le défilement. Décidé au design le 18/09/2026 :
     « plus besoin de défiler ». Sur l'écran large la barre reste transparente
     au repos, parce qu'elle se lit sur le dégradé ; sur 393 px de large, logo
     et burger seuls sur un dégradé n'ont plus l'assise d'une barre. */
  .barre-fixe{
    background:var(--papier); border-bottom-color:var(--trait);
    box-shadow:0 1px 2px rgba(78,51,85,.04), 0 8px 24px rgba(78,51,85,.07);
  }
  /* Lockup du téléphone, même maquette : symbole round(21 × 2,2) = 46 px, mot-signe 21 px, écart 10 px, -5 px sur le
     mot. 46 × 0,4545 donnerait 20,9 : le rapport s'écrit 21 / 46 pour que le mot tombe sur les 21 px dessinés. */
  .barre-int .lockup{--lockup-h:46px; --lockup-rapport:calc(21 / 46); gap:10px}
  .barre-int .lockup-nom{margin-left:-5px}

  /* ---------- Connecté, sous 640 px (nav-mobile-dessin, 05/10/2026) ---------- */
  /* ⚠️ Le prénom disparaît, l'avatar seul reste — comme la pilule du compte
     sur l'accueil mobile de la maquette. Le bouton garde sa forme, juste plus
     étroit. */
  .nav-site.connecte .compte-prenom{display:none}
  .nav-site.connecte .compte-bouton{padding:4px}
  /* Le bouton « Créer un dossier » de la barre s'efface : chaque page connectée
     porte sa propre action (le bouton flottant de /compte, par exemple),
     plutôt qu'un bouton qui n'aurait plus la place de son texte. */
  .nav-site.connecte > a.bouton.cta{display:none}
  /* Le menu du compte, lui, ne change pas de forme sous 640 px. */
}

/* Le hero : le texte à gauche, la fiche de parcelle à droite. */
/* ⚠️ `align-items:start`, et non `center` : centrée, la fiche se place selon la
   HAUTEUR de la colonne de gauche, qui change dès qu'une recherche remplace le
   discours par la confirmation. Elle sautait alors de 43 px, dont 23 qui
   dépendaient de la largeur de l'écran. Calée en haut, elle ne bouge plus. */
/* ⚠️ 24 px et non 44 : Benoist a fait remonter le hero de 20 px le 18/09/2026.
   La valeur de `body.en-travail .hero` suit à l'identique — une assertion tient
   les deux égales, parce qu'un écart ferait sauter la fiche au passage à la
   confirmation. */
.hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px;
  align-items:start; margin-top:24px}
/* Essai : la fiche de parcelle à gauche, le discours à droite. L'inversion est
   PUREMENT visuelle — le balisage garde l'ordre texte-puis-fiche — pour que le
   champ de recherche reste le premier élément atteint au clavier. Les largeurs
   suivent le contenu, pas la position : la colonne de texte garde ses 1.05fr. */
.hero.inverse{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.hero.inverse .hero-texte{order:2}
.hero.inverse .hero-fiche{order:1}


/* La colonne de texte espace ses blocs par le gap, pas par des marges :
   c'est le réglage de la charte, et il survit à l'insertion d'un bloc. */
/* ⚠️ 16 px et non 22 : au design, la colonne du hero espace ses BLOCS de
   16 px, et c'est à l'intérieur d'un bloc de discours qu'on respire à 22 px.
   Aplatir les deux niveaux en un seul gap creusait 44 px entre l'accroche et
   le champ, avec la marge du champ par-dessus. */
.hero-texte{min-width:0; display:flex; flex-direction:column; gap:16px}
.hero-discours{display:flex; flex-direction:column; gap:22px}
/* ⚠️ Les enfants des BLOCS aussi : en groupant le discours, `.hero-aide` est
   devenu un petit-fils et a retrouvé la marge par défaut d'un <p> — 14 px de
   plus sous le champ, invisibles à la lecture du CSS. */
.hero-texte > *, .hero-discours > *{margin:0}
/* Le conteneur de message est vide tant qu'il n'y a rien à dire : sans
   cela il ouvrirait un gap de 22 px au milieu du hero. */
#msg-recherche:empty{display:none}

/* Le champ et son bouton forment une seule pastille, comme au design : deux
   boîtes séparées donnaient deux lignes dès que la colonne se resserre. */
.hero-recherche{
  display:flex; align-items:center; padding:6px;
  background:var(--papier); border-radius:14px;
  box-shadow:0 2px 12px rgba(78,51,85,.10);
}
.hero-recherche:focus-within{box-shadow:0 0 0 4px rgba(111,75,119,.16), 0 2px 12px rgba(78,51,85,.10)}
.hero-recherche .champ{flex:1 1 auto; min-width:0; position:relative}
.hero-recherche input{
  width:100%; font:inherit; font-size:16px; padding:13px 16px;
  border:none; background:transparent;
}
/* ⚠️ `box-shadow:none` autant que l'outline : la règle générique
   `.champ input:focus` pose un halo, qui doublait ici celui de la pilule —
   deux anneaux concentriques autour du même champ. La pilule porte seule
   l'état de focus, via son `:focus-within`. */
.hero-recherche input:focus{outline:none; box-shadow:none; border-color:transparent}
.hero-recherche .bouton{flex:0 0 auto; padding:14px 26px; font-size:15px; border-radius:11px}

.hero-aide{font-size:13.5px; color:var(--violet-sombre); opacity:.8}
.hero-aide code{background:rgba(255,255,255,.6); padding:2px 7px; border-radius:6px; font-size:12.5px}

.hero-gages{display:flex; gap:8px; flex-wrap:wrap}
.hero-gages span{
  font-size:12px; font-weight:500; color:var(--violet-sombre);
  background:rgba(255,255,255,.55); border-radius:999px; padding:6px 13px;
}

/* La fiche de parcelle : un aperçu de ce que le dossier contient. */
.hero-fiche{
  margin:0; background:var(--papier); border:1px solid var(--trait);
  border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(78,51,85,.05), 0 14px 38px rgba(78,51,85,.13);
}
.hero-fiche-tete{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--trait);
}
.hero-fiche-tete .ref{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--violet);
}
/* La commune reste en casse normale : c'est un nom de lieu, pas une étiquette. */
.hero-fiche-tete .lieu{font-size:12.5px; color:var(--encre-douce); font-variant-numeric:tabular-nums}
/* Au téléphone, la tête tient sur UNE ligne (maquette) : « BO 0489 » seul, entier, et le lieu tronqué par
   « … » plutôt que de passer à la ligne et d'épaissir la fiche. */
@media (max-width:639.98px){
  .hero-fiche-tete .ref{flex:none}
  .hero-fiche-tete .ref-mot{display:none}
  .hero-fiche-tete .lieu{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}
.hero-fiche-plan{position:relative; background:var(--fond)}
.hero-fiche-plan svg{display:block; width:100%; height:auto}
/* En deux colonnes, le plan gagne 30 px de haut (Benoist, 23/10, decisions/carte-accueil-plus-haute-30px-2310) : à 507 px
   de large il n'en faisait que 338. La boîte grandit, pas le dessin : `viewBox` 300 × 200 (les 2/3 ci-dessous, ceux de
   construirePlan) reste à l'échelle de la largeur, et le cadrage par défaut (`meet`) montre 15 px de voisinage de plus en
   haut et en bas au lieu d'étirer la parcelle. `cqw` : la largeur du plan lui-même, pas celle de la fenêtre.
   ⚠️ `not all and (max-width:1120px)`, complément exact du repli en une colonne : une largeur entre 1120 et 1121 px
   n'est ainsi d'aucun côté à la fois. En une colonne, le plan fait déjà toute la largeur ; il ne change pas. */
@media not all and (max-width:1120px){
  .hero-fiche-plan{container-type:inline-size}
  .hero-fiche-plan svg{height:calc(100cqw * 2 / 3 + 30px)}
}
/* Le plan, au dessin de la charte. L'ordre des couches porte le sens :
   les voisines situent, le bâti ancre, la parcelle prime. */
.plan-voisines path{fill:#f3eff6; stroke:#cfc6d6; stroke-width:1}
/* Le bâti est une masse, pas un contour — et une masse pâle : dans un îlot
   dense il couvre presque tout, et un gris trop appuyé noyait la parcelle. */
.plan-bati path{fill:#e0d9e6; stroke:#cec4d7; stroke-width:.6}
/* La parcelle passe au-dessus du bâti : sa teinte doit tenir par-dessus, d'où
   un remplissage plus franc que sur le fond clair seul. */
.plan-parcelle{fill:rgba(111,75,119,.22); stroke:var(--violet); stroke-width:2.2}
.plan-sommets circle{fill:var(--violet)}
/* ⚠️ Halo blanc sous le texte : posé sur le contour violet ou sur une masse de
   bâti, un nom sans halo devient illisible. `paint-order:stroke` dessine le
   contour AVANT le remplissage, sinon le blanc mangerait la lettre. */
/* Corps en unités du plan, pas en pixels : les deux cartes ont des échelles
   voisines — 300 unités sur ~505 px pour la fiche, 900 sur ~1370 px pour la
   grande — donc une même valeur y rend une taille comparable. */
.plan-nom{
  font:600 10px Poppins,sans-serif; fill:var(--violet-sombre);
  paint-order:stroke; stroke:#fff; stroke-width:2.8px; stroke-linejoin:round;
}
.plan-nom-voisine{
  font:500 7px Poppins,sans-serif; fill:var(--encre-douce);
  paint-order:stroke; stroke:#fff; stroke-width:2.4px; stroke-linejoin:round;
}
/* Les zones voisines sont invisibles au repos : le plan doit rester lisible.
   Elles ne se révèlent qu'au survol, là où le doigt ou le curseur se pose. */
.plan-zones .voisine{
  fill:transparent; stroke:transparent; stroke-width:1.5; cursor:pointer;
  transition:fill .12s, stroke .12s;
}
/* ⚠️ Les voisines de la vitrine, avant toute recherche : elles gardent leur
   infobulle — le nom et la surface renseignent — mais ni curseur de main ni
   survol. Le pointeur en main promettait un clic que rien ne branchait. */
/* ⚠️ `pointer-events:none` : sans lui, la zone reste sous le pointeur et son
   `<title>` fait surgir une bulle au survol — la seule chose qui répondait
   encore à la souris sur une illustration. */
.plan-zones .voisine-inerte{fill:transparent; stroke:transparent; cursor:default; pointer-events:none}
.plan-zones .voisine:hover,
.plan-zones .voisine:focus-visible{
  fill:rgba(111,75,119,.22); stroke:var(--violet);
}
/* ⚠️ `outline:none` sur `:focus` et pas seulement `:focus-visible` : sur un
   `path` focalisable, le navigateur trace son anneau autour de la BOÎTE
   ENGLOBANTE, soit un grand rectangle bleu au milieu du plan. Le survol et le
   focus sont déjà signalés par le remplissage. */
.plan-zones .voisine:focus,
.plan-zones .voisine:focus-visible{outline:none}
/* La source se pose sur le plan, comme une mention de carte. */
/* ⚠️ Le plan est masqué tant que la vitrine n'a pas répondu, sinon le dessin
   de repli clignote et l'on voit une parcelle remplacée par une autre. Il
   garde sa PLACE — `visibility` et non `display` — pour que la fiche ne change
   pas de hauteur au moment où le plan arrive. */
html.vitrine-attendue .hero-fiche-plan{visibility:hidden}
.hero-fiche-plan{transition:opacity .2s ease}
html.vitrine-attendue .hero-fiche-plan{opacity:0}
/* Rien à animer pour qui a demandé moins de mouvement : le plan apparaît. */
@media (prefers-reduced-motion:reduce){ .hero-fiche-plan{transition:none} }

.hero-fiche-legende{
  position:absolute; left:14px; bottom:12px; font-size:11px; color:var(--encre-douce);
  background:rgba(255,255,255,.88); padding:4px 9px; border-radius:6px;
}
/* Le gap de 1 px sur fond de trait dessine les séparateurs : pas de bordure à
   poser, donc pas de double filet aux extrémités. */
.hero-fiche-pied{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--trait)}
.hero-fiche-pied > div{background:var(--papier); padding:14px 18px}
.hero-fiche-pied .k{display:block; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--encre-douce); font-weight:600}
.hero-fiche-pied .v{display:block; font-size:19px; font-weight:600; color:var(--violet-sombre);
  margin-top:3px; font-variant-numeric:tabular-nums}
/* Au téléphone, trois tuiles côte à côte sur 358 px : la maquette resserre tout pour que « 1 250 m² » tienne
   sans passer à la ligne. */
@media (max-width:639.98px){
  .hero-fiche-pied > div{padding:8px 12px}
  .hero-fiche-pied .k{font-size:9.5px}
  .hero-fiche-pied .v{font-size:16px}
}

/* Les bandes de contenu. Une sur deux sur fond blanc, pour scander la page. */
/* ⚠️ Marge haute seulement, comme dans le dessin : le bas d'une bande est la
   marge haute de la suivante. Avec les deux, les écarts doublaient.
   Et pas d'alternance de fond : le dessin pose toutes les bandes sur le fond
   de page, ce sont les cartes qui font le relief. */
.bande{padding:var(--pad-haut-bande) 32px 0}
.bande-int{max-width:var(--largeur); margin:0 auto}
.bande-int.etroit{max-width:760px}
/* Étiquette, titre et chapeau forment un seul bloc serré à 12 px, comme dans
   la charte. Les marges portent l'écart plutôt qu'un gap : les trois éléments
   sont des frères directs de la bande, pas les enfants d'un conteneur. */
.bande h2{
  font-size:clamp(24px,2.7vw,32px); margin:0; font-weight:600;
  color:var(--violet-sombre); letter-spacing:-.015em; line-height:1.18;
}
/* ⚠️ Le bloc de tête d'une bande — étiquette, titre, chapeau — est RENTRÉ de
   30 px par rapport aux cartes qui le suivent. Demandé par Benoist le
   17/09/2026 : aligné au même bord, il se lisait comme une première carte sans
   cadre. Le décalage le détache de la grille.
   ⚠️ Sur les ENFANTS DIRECTS de `.bande-int` seulement : `.bande h2` attrape
   aussi le titre de l'encart « Ce qui nous distingue », qui vit à l'intérieur
   d'une carte blanche et n'a rien à rentrer. */
.bande-int > .etiquette,
.bande-int > h2,
.bande-int > .chapeau,
.exemple-dire{margin-left:var(--retrait-tete)}
/* La tête de l'exemple porte son bouton à droite : le décalage va sur le bloc
   de texte, pas sur la rangée, sinon le bouton s'éloignerait du bord. */
.exemple-dire > *{margin-left:0}
@media (max-width:620px){
  /* Sous 620 px la bande n'a plus que 20 px de marge latérale : rentrer de
     30 px de plus mangerait le titre. */
  .bande-int > .etiquette,
  .bande-int > h2,
  .bande-int > .chapeau,
  .exemple-dire{margin-left:0}
}
.bande .etiquette{margin-bottom:0}
.bande .etiquette + h2{margin-top:12px}
.bande h2 + .chapeau{margin-top:12px}
.chapeau{margin:0 0 38px; max-width:62ch; color:var(--encre-douce); font-size:15px; line-height:1.6}
/* ⚠️ L'écart de 38 px sous l'en-tête d'une bande était porté par le seul
   chapeau. « À qui sert un dossier d'urbanisme » n'en a pas : ses cartes
   touchaient le titre. C'est au titre de porter l'écart quand il est seul. */
.bande h2 + :not(.chapeau){margin-top:38px}

/* ⚠️ La perspective est portée par la GRILLE, pas par chaque carte : posée sur
   la carte, chacune aurait son propre point de fuite et les huit basculeraient
   comme si on les regardait toutes de face. */
.grille-rubriques{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
  perspective:900px;
}
/* ⚠️ Huit rubriques : quatre colonnes, ou deux. Jamais trois — huit ne se
   divise pas par trois, et `auto-fit` sur 252 px laissait deux rubriques
   seules en dernière rangée pour toute grille de 788 à 1055 px — mesuré dans
   Chromium, de 900 à 1100 px de fenêtre. Le seuil de 900 px est
   celui du dessin (`deuxCol` dans Accueil.dc.html), propre à ses grilles de
   quatre, et ne remplace aucun des deux seuils du repli de page. */
@media (max-width:899.98px){
  .grille-rubriques{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.rubrique{
  background:var(--papier); border:1px solid var(--trait); border-radius:14px;
  padding:22px 24px; gap:9px;
}
/* Titre à gauche, numéro calé à droite sur la même ligne, à TOUTES les largeurs (maquette, `appliquerMobile` :
   « titre et numéro sur une ligne à toutes les largeurs »). Une grille, et non un flex en rangée, qui emporterait
   aussi le texte et la pastille. La troisième rangée en 1fr chasse la pastille en bas : les cartes d'une même ligne
   s'alignent. */
.rubrique{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto 1fr;
  column-gap:16px; align-items:baseline; align-content:start;
}
.rubrique h3{grid-column:1; grid-row:1}
.rubrique p, .rubrique .pastille{grid-column:1 / -1}
/* Une cote discrète, en lavande pâle et à 13 px : la maquette l'a sortie du gris du texte quand elle l'a calée à
   droite, où elle ne se lit plus comme une couleur d'état à côté du titre. */
.rubrique-num{
  grid-column:2; grid-row:1;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mauve); font-variant-numeric:tabular-nums;
}
.rubrique h3{margin:0; font-size:16px; font-weight:600; color:var(--violet-sombre)}
.rubrique p{margin:0; font-size:14px; line-height:1.55; color:var(--encre-douce)}
/* Plus grande que dans un tableau : ici la pastille porte l'exemple chiffré,
   c'est elle qu'on lit après le titre. */
.rubrique .pastille{font-size:13px; font-weight:500; padding:5px 10px; font-variant-numeric:tabular-nums}
/* Les pastilles d'état sont conçues pour une cellule de tableau, où elles ne
   doivent pas se couper. Dans une carte étroite, il leur faut le droit de
   passer à la ligne, sinon elles débordent. */
.rubrique .pastille{white-space:normal; line-height:1.4; display:inline-block}
/* Les cartes d'une même ligne s'alignent : le contenu chasse la pastille en bas. */
.rubrique .pastille{align-self:end; justify-self:start}

.parcours{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
/* Trois étapes : trois colonnes ou une seule, jamais deux — la troisième resterait orpheline (maquette,
   `grilleEtapes`). L'`auto-fit` sur 280 px en mettait deux de 640 à 899 px. */
@media (max-width:899.98px){ .parcours{grid-template-columns:minmax(0,1fr)} }
.parcours li{
  background:var(--papier); border:1px solid var(--trait); border-radius:14px;
  padding:26px; display:flex; flex-direction:column; gap:12px;
}
.parcours-tete{display:flex; align-items:center; gap:12px}
.parcours-num{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:999px; background:var(--lavande-pale); color:var(--violet-sombre);
  font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
}
/* L'étape payante prend le violet plein : la barrière se voit avant d'être lue. */
.parcours-num.courant{background:var(--violet); color:#fff}
.parcours-cout{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--information); background:var(--information-fond); padding:4px 9px; border-radius:6px;
}
.parcours-cout.gratuit{color:var(--conforme); background:var(--conforme-fond)}
/* ⚠️ Le symbole animé de la troisième carte a été RETIRÉ à la demande de
   Benoist. Le dessin le pose, mais sur la carte il doublait le lockup de la
   barre à quelques centimètres et tirait l'œil hors du texte. La règle reste,
   sans emploi, pour que le remettre soit une ligne de balisage. */
.parcours-symbole{width:42px; height:42px; flex:none; margin-left:auto; color:var(--violet)}
.parcours-symbole svg{width:100%; height:100%; display:block}
.parcours h3{margin:0; font-size:17px; font-weight:600; color:var(--violet-sombre)}
.parcours p{margin:0; font-size:14.5px; line-height:1.6; color:var(--encre-douce)}

/* Une seule carte, cinq rangées séparées d'un filet — le dessin de septembre.
   ⚠️ `subgrid` sur chaque rangée : sans lui, les cinq rangées calculeraient
   chacune sa colonne et les moments (« Avant de faire une offre ») ne
   s'aligneraient pas d'une ligne à l'autre. */
.liste-profils{
  background:var(--papier); border:1px solid var(--trait); border-radius:14px;
  overflow:hidden; display:grid; grid-template-columns:minmax(170px,.44fr) minmax(0,1fr);
}
.profil{display:grid; grid-template-columns:subgrid; grid-column:1/-1; border-bottom:1px solid #f1ebf4}
.profil:last-child{border-bottom:0}
/* ⚠️ Chaque profil est un `<details open>` : c'est sur TÉLÉPHONE qu'il se
   replie, et l'attribut `open` est dans le balisage pour que la page reste
   entièrement lisible si le script ne s'exécute pas. Le `<summary>` doit donc
   se faire oublier sur écran large — pas de marqueur, pas de curseur de
   main : rien n'y est repliable. */
.profil > summary{list-style:none}
.profil > summary::-webkit-details-marker{display:none}
.profil .chevron{display:none}
.profil-qui{padding:19px 24px; display:flex; flex-direction:column; gap:2px}
.profil-nom{font-size:16px; font-weight:600; color:var(--violet-sombre); line-height:1.35}
.profil-quand{font-size:12.5px; color:var(--encre-douce); line-height:1.4}
.profil-quoi{margin:0; padding:19px 24px; align-self:center; font-size:14.5px; line-height:1.55; color:#5b4a61}
/* ⚠️ Repli sous 620 px : la colonne de gauche à 170 px ne laisse plus de quoi
   lire la phrase, et `subgrid` ne se replie pas tout seul. */
@media (max-width:620px){
  .liste-profils{grid-template-columns:1fr}
  .profil{display:block}
  .profil-qui{padding-bottom:0}
  .profil-quoi{padding-top:8px}
}

/* « Ce qui nous distingue » est un encart : une carte blanche qui contient son
   propre titre, lequel est donc plus petit qu'un titre de bande. */
.encart{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px;
  background:var(--papier); border:1px solid var(--trait); border-radius:14px;
  padding:clamp(28px,4vw,44px);
}
/* Quatre points de méthode sur une ligne, deux sous 900 px, un au téléphone (maquette, `grilleMethode`) : quatre se
   divise par deux, jamais d'orphelin. Le compte est écrit : un `auto-fit` sur 230 px le tirait de la largeur. */
@media (max-width:899.98px){ .encart{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* À deux colonnes, le texte tombait à deux ou trois mots par ligne. */
@media (max-width:640px){ .encart{grid-template-columns:minmax(0,1fr); gap:22px} }
.encart-tete{grid-column:1/-1; display:flex; flex-direction:column; gap:12px; max-width:62ch}
.encart-tete h2{font-size:clamp(22px,2.4vw,28px)}
.encart-tete p{margin:0; font-size:16px; color:var(--encre-douce); text-wrap:pretty}
.atout{display:flex; flex-direction:column; gap:7px; padding-left:16px; border-left:2px solid var(--lavande-pale)}
.atout h3{margin:0; font-size:15.5px; font-weight:600; color:var(--violet-sombre)}
.atout p{margin:0; font-size:14px; line-height:1.55; color:var(--encre-douce)}
/* La limite se distingue par la couleur de vigilance : c'est une réserve, pas
   un argument de plus. */
.atout.limite{border-left-color:var(--vigilance-fond)}
.atout.limite h3{color:var(--vigilance)}

/* Les sources sont une mention de bas de page, pas une rubrique : bande plus
   courte, titre au corps du texte, jetons en regard. */
.bande.mince{padding:clamp(48px,5vw,64px) 32px 0}
.sources-int{display:flex; gap:28px; flex-wrap:wrap; align-items:baseline; justify-content:space-between}
.sources-dire{display:flex; flex-direction:column; gap:10px; max-width:46ch}
.sources-dire h2{font-size:17px}
.sources-dire p{margin:0; font-size:14px; line-height:1.6; color:var(--encre-douce)}
.jetons{display:flex; flex-wrap:wrap; gap:8px; max-width:600px}
.jeton{
  font-size:13.5px; font-weight:500; color:var(--violet-sombre);
  background:var(--papier); border:1px solid var(--trait);
  border-radius:999px; padding:9px 15px;
}

/* Chaque question est une carte, comme dans la charte — et non une liste
   séparée par des filets. La bande reste sur le fond de page : des cartes
   blanches sur une bande blanche ne se verraient pas. */
.faq{display:flex; flex-direction:column; gap:10px}
.faq details{
  background:var(--papier); border:1px solid var(--trait);
  border-radius:14px; padding:18px 22px;
}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer; list-style:none;
  font-size:16px; font-weight:600; color:var(--violet-sombre);
}
.faq summary::-webkit-details-marker{display:none}
.faq .chevron{color:var(--violet); font-size:13px; transition:transform .18s}
.faq details[open] .chevron{transform:rotate(180deg)}
.faq details p{margin:12px 0 0; font-size:14.5px; line-height:1.65; color:var(--encre-douce); max-width:70ch}

.appel{padding:clamp(64px,7vw,96px) 32px 64px}
/* Le titre à gauche, l'action à droite, sur la même ligne : le bouton posé
   sous le titre laissait toute la moitié droite du bandeau vide, et le regard
   n'avait rien à y trouver. Ils se replient l'un sous l'autre quand la largeur
   ne suffit plus. */
.appel-int{
  max-width:var(--largeur); isolation:isolate; margin:0 auto; border-radius:14px;
  padding:clamp(36px,5vw,60px); position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--vert-eau) 0%,var(--lilas) 52%,var(--mauve) 100%);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
/* ⚠️ `flex:none` sur le bouton : sans lui, le fond flexible le comprimait et
   « Créer un dossier » passait sur deux lignes avant que le bandeau ne se
   replie.
   Plus grand que les autres boutons du site : c'est la dernière chose que la
   page propose, et elle est seule sur sa moitié de bandeau — au corps courant
   elle s'y perdait. */
.appel-int .bouton{
  flex:none; font-size:16.5px; padding:17px 32px; border-radius:12px;
  box-shadow:0 1px 2px rgba(78,51,85,.12), 0 8px 20px rgba(111,75,119,.24);
}
.appel-int::after{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:url('/assets/marque/contours.svg') repeat; background-size:900px auto;
  mix-blend-mode:soft-light;
}
.appel-int>*{position:relative; z-index:2}
.appel-int h2{
  margin:0; max-width:640px; font-size:clamp(24px,2.9vw,34px); font-weight:700;
  letter-spacing:-.02em; line-height:1.14; color:var(--violet-sombre); text-wrap:balance;
}


/* ---------- Mode travail ---------- */
/* Dès qu'une parcelle est à l'examen, la présentation s'efface : l'étape se
   joue en haut de l'écran, sous le champ, sans défilement. Rien n'est
   supprimé — « Changer d'adresse » ramène la page d'accueil intacte.
   Le choix de la parcelle est la raison d'être de cette règle : il était sous
   la ligne de flottaison, donc invisible au moment où il compte. */
/* Le discours tient dans ses deux blocs : les effacer suffit, et la carte de
   confirmation — qui est déplacée dans le hero et porte elle aussi un h1 —
   n'est plus à portée de la règle. */
body.en-travail .hero-discours{display:none}
/* La fiche reste : elle ne montre plus une parcelle d'exemple mais celle qu'on
   cherche. C'est le contrôle visuel le plus rapide avant de confirmer. */
/* Même marge qu'à l'accueil : la fiche doit rester où elle était. */
body.en-travail .hero{margin-top:24px}
/* ⚠️ Le champ s'efface pendant la confirmation, sur demande de Benoist : le
   bouton « Changer d'adresse » est le seul chemin de retour, et deux entrées
   pour la même action encombraient la colonne au moment où le choix de la
   parcelle est tout ce qui compte. */
body.en-travail .hero-recherche{display:none}
/* ⚠️ Le centrage porte sur la SEULE colonne de texte, pas sur `.hero` :
   `align-items:center` sur la grille ferait sauter la fiche de 43 px au
   passage à la confirmation — c'est la raison du `align-items:start`
   d'origine. Calée en haut, la fiche ne bouge pas ; c'est la
   confirmation, plus courte de 81 px, qui vient à sa hauteur. */
@media (min-width:901px){ body.en-travail .hero-texte{align-self:center} }
body.en-travail .entete-int{padding-bottom:52px}

/* La confirmation fusionnée dans le hero : plus de carte dans la carte. */
/* Page de ville : la confirmation prend la colonne de texte à la place du fil d'Ariane, du titre et de la recherche, comme celle de
   l'accueil prend la place du discours. Le titre d'une commune ne reste pas au-dessus d'une parcelle d'une autre. */
body.en-travail .ville-hero-texte > :not(#carte-confirmation){display:none}
@media (min-width:901px){ body.en-travail .ville-hero-texte{align-self:center} }
body.en-travail .hero-texte #carte-confirmation,
body.en-travail .ville-hero-texte #carte-confirmation{
  background:transparent; border:0; box-shadow:none; padding:0; margin:0;
}
/* L'extrait cadastral est déjà dans la fiche, en plus grand : le garder ici
   afficherait deux fois le même plan à quelques centimètres d'écart. */
body.en-travail #carte-confirmation .vignette-boite{display:none}
body.en-travail #carte-confirmation .confirmation{grid-template-columns:minmax(0,1fr); gap:0}
body.en-travail #carte-confirmation h2{font-size:22px}
/* La loupe est le seul déclencheur de la grande carte : un plan entier
   cliquable se disputerait avec les parcelles voisines, qui se choisissent au
   clic elles aussi. Le geste doit dire lequel des deux on veut. */
.hero-fiche-carte{position:relative}
.loupe-plan{
  position:absolute; right:10px; bottom:10px; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; cursor:zoom-in;
  color:var(--violet-sombre); background:rgba(255,255,255,.92);
  border:1px solid var(--trait); border-radius:9px;
  box-shadow:0 2px 8px rgba(78,51,85,.16);
  transition:background .15s, transform .12s;
}
.loupe-plan:hover{background:#fff; transform:translateY(-1px)}
/* ⚠️ Ni loupe ni déplacement avant qu'une parcelle soit chargée : le plan de
   l'accueil est une illustration, et un curseur « à tirer » sur une image fixe
   promet ce qui n'existe pas.
   `user-select:none` parce qu'un glissement sélectionnait le nom de la parcelle
   comme du texte, surlignage bleu compris. */
.loupe-plan{display:none}
body.en-travail .loupe-plan{display:inline-flex}
.hero-fiche-plan{user-select:none; -webkit-user-select:none}
body.en-travail .hero-fiche-plan{cursor:grab; touch-action:none}
.hero-fiche-plan.tire{cursor:grabbing}
/* Pendant un déplacement, la légende et les zones ne doivent pas happer le
   pointeur — sinon le geste s'interrompt au premier survol. */
.hero-fiche-plan.tire *{pointer-events:none}
.loupe-plan:focus-visible{outline:3px solid var(--lavande); outline-offset:2px}
/* ⚠️ Masqués seulement, jamais retirés du balisage : hors mode travail — la
   liste des dossiers, un écran étroit sans fiche — ils restent la seule source
   de ces trois informations. */
body.en-travail #faits-parcelle [data-fait="parcelle"],
body.en-travail #faits-parcelle [data-fait="commune"],
body.en-travail #faits-parcelle [data-fait="contenance"]{display:none}

/* La grande carte : même dessin que la fiche, sur toute la scène. */
.v-plan{width:min(96vw, 1400px); max-height:calc(100vh - 170px); aspect-ratio:3/2;
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none}
/* Le fond « Plan » de la maquette : blanc cassé, sur lequel les voisines (#f3eff6) se lisent encore. */
.v-plan svg{width:100%; height:100%; display:block; background:var(--fond); border-radius:10px}
.v-plan.tire{cursor:grabbing}
/* Même règle que sur la fiche : pendant un déplacement, rien ne doit happer le
   pointeur, sinon le geste s'interrompt au premier survol d'une voisine. */
.v-plan.tire *{pointer-events:none}

/* ---------- Tarifs ---------- */
.grille-offres{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch}
/* Tablette : l'unité et le pack côte à côte, l'abonnement pro en pleine largeur dessous, À PLAT — offre, prix et
   bouton à gauche, avantages à droite (maquette, `grilleTarifs`). En deux colonnes, il tombait seul sur sa rangée
   et la comparaison des trois offres se cassait là. */
@media (min-width:640.02px) and (max-width:899.98px){
  .grille-offres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille-offres > .offre:nth-child(3){
    grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr; column-gap:32px;
  }
  .grille-offres > .offre:nth-child(3) > h3{grid-column:1; grid-row:1}
  .grille-offres > .offre:nth-child(3) > .offre-pour{grid-column:1; grid-row:2}
  .grille-offres > .offre:nth-child(3) > .offre-prix{grid-column:1; grid-row:3}
  .grille-offres > .offre:nth-child(3) > ul{grid-column:2; grid-row:1 / -1; align-self:center; margin:0}
  .grille-offres > .offre:nth-child(3) > .bouton{grid-column:1; grid-row:4; justify-self:start; align-self:start; margin-top:0}
}
.offre{
  display:flex; flex-direction:column; position:relative;
  background:var(--fond); border:1px solid var(--trait); border-radius:14px; padding:26px 24px;
}
/* L'offre mise en avant se distingue par un filet plus marqué, pas par une
   couleur : trois cartes de teintes différentes se liraient comme trois
   produits sans rapport. */
.offre.en-avant{border-color:var(--lavande-pale); box-shadow:0 1px 2px rgba(78,51,85,.05), 0 10px 30px rgba(78,51,85,.08)}
.offre h3{margin:0 0 6px; font-size:17px; font-weight:600; color:var(--violet-sombre)}
.offre-pour{margin:0 0 16px; font-size:13.5px; line-height:1.55; color:var(--encre-douce)}
.offre-prix{
  margin:0 0 16px; font-size:27px; font-weight:700; color:var(--violet-sombre);
  letter-spacing:-.02em; line-height:1.15;
}
.offre-prix small{display:block; margin-top:4px; font-size:12.5px; font-weight:400; color:var(--encre-douce); letter-spacing:0}
.offre ul{margin:0 0 22px; padding:0; list-style:none; display:grid; gap:8px}
.offre li{position:relative; padding-left:20px; font-size:14px; line-height:1.5; color:var(--encre)}
.offre li::before{
  content:''; position:absolute; left:2px; top:.55em;
  width:7px; height:7px; border-radius:2px; background:var(--lavande-pale);
}
/* Le bouton se cale en bas : les cartes n'ont pas le même nombre de lignes. */
.offre .bouton{margin-top:auto; text-align:center}

/* ---------- Exemple ---------- */
.exemple-tete{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.exemple-dire{max-width:62ch}
.exemple-dire .chapeau{margin-bottom:0}
/* Cinq feuilles en colonnes fluides, trois sous 900 px, deux au téléphone (maquette, `grilleExemple`) : jamais la
   feuille du téléchargement seule sur une rangée. ⚠️ Le flex à 196 px fixes qu'elle remplace passait à la ligne de
   900 à 1 119 px et y laissait cette feuille orpheline ; une grille fluide atteint aussi le bord droit de la bande
   sans `space-between`. Rayon 6, 16 px entre les feuilles. */
.planches{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin-top:30px; align-items:start}
.planches figure{margin:0; min-width:0; display:flex; flex-direction:column; gap:10px}
.planches img{
  display:block; width:100%; height:auto; object-fit:cover; object-position:top;
  background:var(--papier); border:1px solid var(--trait); border-radius:6px;
  box-shadow:0 10px 26px rgba(78,51,85,.13);
}
.planches figcaption{font-size:12.5px; color:var(--encre-douce)}
@media (max-width:899.98px){ .planches{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Le bouton « Parcourir » se cale en bas de la tête de section, à hauteur du
   chapeau : aligné en haut il flottait au-dessus du titre. */
.exemple-tete{display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap}
.exemple-parcourir{display:inline-flex; align-items:center; gap:10px; flex:none}
/* La cinquième feuille : même encombrement que les aperçus, mais vide et en
   pointillé — elle se lit comme une page à prendre, pas à regarder. */
.exemple-entier{
  /* ⚠️ Le rapport des images elles-mêmes, 400 × 566, et non une taille fixe : une fois les feuilles fluides, une
     cote de 196 × 277 débordait de sa colonne et dépassait les aperçus en hauteur. */
  width:100%; height:auto; aspect-ratio:400 / 566; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:24px;
  text-align:center; text-decoration:none; color:var(--violet);
  background:var(--papier); border:1.5px dashed var(--lavande); border-radius:6px;
}
.exemple-entier-titre{font-size:15px; font-weight:600; color:var(--violet-sombre); line-height:1.35}
.exemple-entier-poids{font-size:12.5px; color:var(--encre-douce); line-height:1.45; font-variant-numeric:tabular-nums}

/* ---------- Zone applicative ---------- */
/* ⚠️ UNE SEULE carte blanche, qui avance. Le fond lavande et ses deux filets
   sont portés par le contenu et non par le panneau : à hauteur nulle il ne
   doit rien rester à l'écran, pas même les deux traits. */
/* ⚠️ La bande reste dans le document à hauteur nulle, jamais `display:none` :
   sinon il n'y a aucune hauteur de départ à interpoler. Le fond et les filets
   sont portés par le contenu, pas par le panneau — à hauteur nulle il ne doit
   rien rester à l'écran, pas même les deux traits. */
.zone-app{overflow:hidden}
.zone-app[hidden]{display:block; height:0; opacity:0}
.zone-app-fond{
  position:relative; background:#f2eef6;
  border-top:1px solid #e4dcea; border-bottom:1px solid #e4dcea;
}
.zone-app-int{
  max-width:calc(var(--largeur) + 64px); margin:0 auto; width:100%;
  padding:clamp(40px,5vw,56px) 32px;
}
.carte-parcours{
  background:var(--papier); border:1px solid var(--trait); border-radius:14px;
  box-shadow:0 1px 2px rgba(78,51,85,.05), 0 10px 30px rgba(78,51,85,.07);
  overflow:hidden;
  /* Conteneur de requête : les tuiles choisissent leurs colonnes sur la
     largeur de la carte, pas sur celle de la fenêtre. */
  container-type:inline-size;
}
/* Ligne de base commune et gap 4/16 (maquette, 21/10) : quand la commune passe sous le titre, elle s'y
   colle à 4 px au lieu de flotter à 12 ; sur une ligne, elle se lit au pied des lettres du titre. */
.carte-tete{
  padding:18px 24px; display:flex; align-items:baseline; justify-content:space-between;
  gap:4px 16px; flex-wrap:wrap; border-bottom:1px solid var(--trait);
}
.carte-tete h2{margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em}
.carte-ref{font-size:12.5px; color:var(--encre-douce); font-variant-numeric:tabular-nums}

/* Les quatre tuiles, séparées par le fond qui transparaît dans le gap.
   ⚠️ Quatre colonnes ou deux, JAMAIS trois. Avec `auto-fit` sur 232 px, une
   carte de 698 à 930 px posait trois tuiles puis une seule en seconde
   rangée : les deux pistes vides laissaient voir le fond du gap en aplat gris.
   `auto-fit` ne peut pas les replier, elles sont occupées en première rangée.
   Le seuil est celui du dessin, 4 × 232 + 3 gouttières = 931 px de largeur
   MESURÉE — d'où la requête de conteneur, et non une requête média. */
.carte-parcours .tuiles{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--trait); margin:0;
}
@container (min-width:931px){
  .carte-parcours .tuiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ⚠️ Bordure et arrondi annulés : dans la carte, les tuiles sont jointives et
   c'est le filet qui transparaît dans le gap d'un pixel qui les sépare. La
   tuile « accent » perd aussi son dégradé — quatre fonds différents dans une
   même rangée se liraient comme quatre objets sans rapport. */
.carte-parcours .tuile,
.carte-parcours .tuile.accent{
  background:var(--papier); border:0; border-radius:0; padding:20px 24px;
  display:flex; flex-direction:column; gap:6px;
}
.carte-parcours .tuile .k{
  font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--encre-douce);
}
.carte-parcours .tuile .v{
  font-size:24px; font-weight:600; color:var(--violet-sombre); line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.carte-parcours .tuile .v small{
  display:block; margin-top:4px; font-size:13px; font-weight:400;
  line-height:1.5; color:var(--encre-douce); overflow-wrap:anywhere;
}
/* Au téléphone, l'aperçu devient une liste compacte (maquette, mise à jour du 21/10, qui remplace les deux
   colonnes de deux) : une ligne par donnée, libellé à gauche, valeur à droite, détail dessous. En deux
   colonnes, la valeur et son détail se partageaient 170 px et le détail des servitudes tenait sur six lignes.
   ⚠️ `.v` en `display:contents` : la valeur et son `<small>` sont dans le même élément (app.js,
   etablirApercu) ; c'est ce qui permet de poser le texte à droite et le détail sur la ligne d'en dessous
   sans changer le HTML que les deux largeurs partagent. */
@media (max-width:639.98px){
  .carte-tete{padding:14px 16px}
  .carte-tete h2{font-size:16.5px}
  .carte-parcours .tuiles{grid-template-columns:minmax(0,1fr)}
  .carte-parcours .tuile,
  .carte-parcours .tuile.accent{
    display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:2px;
    align-items:baseline; justify-items:end; padding:11px 16px;
  }
  .carte-parcours .tuile .k{grid-column:1; grid-row:1; justify-self:start}
  .carte-parcours .tuile .v{display:contents; font-size:17px}
  .carte-parcours .tuile .v small{grid-column:1/-1; grid-row:2; justify-self:stretch; margin-top:0; font-size:12.5px}
}

/* ⚠️ `overflow-wrap:anywhere`, jamais `word-break:break-all` : la césure brutale coupait « Maisons » en « Ma isons » et « à moins d / e 100 m » à
   390 px. Elle ne coupe plus un mot que s'il est seul plus long que la ligne. */

/* Les bandeaux d'aperçu occupent toute la largeur, séparés par un filet. */
.carte-parcours #msg-apercu:not(:empty),
.carte-parcours #dossier-existant:not(:empty),
.carte-parcours .pieces:not([hidden]){border-top:1px solid var(--trait)}

/* ⚠️ Le bandeau « dossier déjà produit » prend TOUTE la bande, d'un filet au
   suivant. En encart arrondi — la mise en forme par défaut d'un `.message` —
   il laissait une gouttière blanche sur les quatre côtés et se lisait comme
   une note collée sur la carte, pas comme une section de celle-ci. Le filet
   du dessus sépare déjà : la bordure propre du message ferait doublon. */
.carte-parcours #dossier-existant .message{
  margin:0; border:0; border-radius:0; padding:20px 24px;
}

/* ⚠️ Une bande d'état N'EST PAS un `.message` : celui-ci pose un titre en gras
   sur sa propre ligne, ce qui annonçait deux fois le même fait — la pastille
   dit déjà le niveau. Ici, une pastille et UNE phrase, les valeurs en gras
   dedans. Cotes du projet de design. */
.bande-etat{display:flex; gap:14px; align-items:flex-start; padding:16px 24px}
.bande-etat p{margin:0; font-size:14px; line-height:1.55}
.bande-etat strong{font-weight:600; font-variant-numeric:tabular-nums}
.bande-niveau{
  flex:none; margin-top:1px; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; background:rgba(255,255,255,.6); padding:4px 9px; border-radius:5px;
}
.bande-etat.vigilance{background:var(--vigilance-fond); color:var(--vigilance)}
.bande-etat.information{background:var(--information-fond); color:var(--violet-sombre)}
.bande-etat.information .bande-niveau{color:var(--information); background:rgba(255,255,255,.7)}
.bande-etat.echec{background:var(--alerte-fond); color:var(--alerte)}
/* L'échec porte sa propre issue, sous la phrase : « Réessayer » relance
   l'aperçu sans renvoyer au début. */
.bande-corps{display:flex; flex-direction:column; gap:9px}
.bande-action{
  align-self:flex-start; font:inherit; font-size:14px; font-weight:600; color:#fff;
  background:var(--alerte); border:0; padding:10px 18px; border-radius:10px; cursor:pointer;
}
.bande-action:hover{background:#752c37}
.bande-action:disabled{opacity:.6; cursor:default}
/* ⚠️ Dans le CMS, la bande d'état est un ENCART de la carte, pas un bandeau :
   posée bord à bord comme sur le parcours du visiteur, elle débordait du cadre
   blanc et se lisait comme un message système collé par-dessus la page. */
body.large .bande-etat{border-radius:11px; padding:14px 18px; margin:18px 0 2px}
.carte-parcours .pieces{padding:18px 24px; display:flex; flex-direction:column; gap:10px}
.pieces-titre{
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--encre-douce);
}

/* ⚠️ La barre : un seul emplacement, plusieurs rôles successifs. */
.barre-parcours{background:var(--fond); border-top:1px solid var(--trait)}
/* ---------- C1 — la production, cotes du projet de design ---------- */
/* Le bloc va d'un bord à l'autre de la barre : la jauge doit courir sur toute
   la largeur, donc les paddings sont portés par les rangées, pas par le bloc. */
.production{padding:0}
.tete-production{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:20px 24px}
.symbole-production{width:52px; height:52px; flex:none; color:var(--violet)}
.symbole-production svg{width:100%; height:100%; display:block}
.production-dire{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:3px}
.production-rang{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet);
}
.production-etape{font-size:17px; font-weight:600; color:var(--violet-sombre)}
.production-pourcent{
  flex:none; font-size:24px; font-weight:700; color:var(--violet); font-variant-numeric:tabular-nums;
}
/* Deux colonnes dès que la place le permet : sept étapes sur une seule
   colonne poussaient le bas du bloc hors de l'écran. */
.etapes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:0 28px; padding:16px 24px 18px; margin:0; list-style:none;
}
/* ⚠️ Hauteur plancher de 44 px et corps IDENTIQUE pour les trois états : un
   corps plus grand sur l'étape en cours faisait bouger la hauteur de la rangée
   à chaque avancement, et toute la carte sautait. Seule la graisse change. */
.etapes .etape{
  display:flex; align-items:baseline; gap:12px; padding:8px 0; min-height:44px;
  font-size:14.5px; line-height:1.45; color:#9a93a0; border-bottom:1px solid #f1ebf4;
}
.etapes .etape-num{
  width:21px; flex:none; font-size:12px; font-weight:700;
  color:#9a93a0; font-variant-numeric:tabular-nums;
}
.etapes .etape-nom{flex:1; min-width:0}
/* ⚠️ L'état se lit en toutes lettres — faite, en cours, à venir — et pas
   seulement à la couleur (doctrine : aucune information sur la seule couleur). */
.etapes .etape-marque{flex:none; font-size:11.5px; font-weight:600; color:#9a93a0}
.etapes .etape.faite{color:#5b4a61}
.etapes .etape.faite .etape-num,
.etapes .etape.faite .etape-marque{color:var(--conforme)}
.etapes .etape.active{color:var(--violet-sombre); font-weight:600}
.etapes .etape.active .etape-num,
.etapes .etape.active .etape-marque{color:var(--violet)}
.etapes .etape.ignoree{opacity:.6}
.production-note{margin:0; padding:0 24px 20px; font-size:13px; line-height:1.55; color:var(--encre-douce)}
.production .journal{padding:0 24px}
.production #msg-production:not(:empty){padding:0 24px 4px}
/* ---------- Le dossier prêt, cotes de « Scénario complet » ---------- */
.pret-rangee{
  padding:22px 24px; background:var(--fond); border-bottom:1px solid #f1ebf4;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.pret-dire{flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:9px}
.pret-tete{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pret-pastille{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--conforme); background:var(--conforme-fond); padding:5px 10px; border-radius:6px;
}
.pret-meta{font-size:13px; color:var(--encre-douce); font-variant-numeric:tabular-nums}
.pret-note{margin:0; font-size:14.5px; line-height:1.55; color:#5b4a61}
.pret-actions{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:9px}
.pret-actions .bouton{
  font-size:16px; padding:16px 28px; border-radius:12px; white-space:nowrap;
  box-shadow:0 1px 2px rgba(78,51,85,.12), 0 10px 24px rgba(111,75,119,.28);
}
.pret-copier{
  font:inherit; font-size:13px; font-weight:500; color:var(--violet); background:none; border:0;
  padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.carte-parcours #pret-bandes .bande-etat{border-bottom:1px solid #f1ebf4}
.pret-pied{
  padding:16px 24px; background:var(--fond);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.pret-pied span{font-size:13px; color:var(--encre-douce)}
.pret-autre{
  font:inherit; font-size:14px; font-weight:600; color:var(--violet); background:none; border:0;
  padding:0; cursor:pointer;
}
.pret-autre:hover,.pret-copier:hover{color:var(--violet-sombre)}

/* ---------- A3 — la confirmation, cotes du projet de design ---------- */
.carte.confirme{display:flex; flex-direction:column; gap:13px; min-height:0}
/* ⚠️ Sélecteur renforcé : `.entete h1` (0,1,1) l'emporte sur une simple
   classe (0,1,0), et imposait au titre de confirmation le corps du titre
   d'accueil — 50 px au lieu de 28. */
.entete .confirme-titre{
  margin:0; flex:none; font-size:clamp(23px,2.5vw,28px); font-weight:700;
  letter-spacing:-.02em; line-height:1.14; color:var(--violet-sombre);
}
/* ⚠️ Le garde-fou n'est pas du remplissage : il peut être raccourci, jamais
   supprimé. C'est lui qui évite un dossier entièrement faux. */
.confirme-garde{margin:0; flex:none; font-size:14px; line-height:1.45; color:var(--violet-sombre); max-width:62ch}
/* ⚠️ Le défilement est sur CETTE liste seulement : la note « Les six plus
   proches » reste dehors, sinon elle disparaît dès que la liste déborde. */
.confirme-liste{display:flex; flex-direction:column; gap:6px; min-height:0; overflow-y:auto}
.confirme-retenue{
  background:var(--papier); border:2px solid var(--violet); border-radius:11px;
  padding:9px 13px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:none;
}
.marque-retenue{
  font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:#fff; background:var(--violet); padding:3px 8px; border-radius:5px; flex:none;
}
.confirme-retenue .ref{font-size:16px; font-weight:600; color:var(--violet-sombre); font-variant-numeric:tabular-nums}
.confirme-retenue .surface{font-size:13px; color:var(--encre-douce); font-variant-numeric:tabular-nums}
.confirme-voisines{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:6px}
.confirme-voisines button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:rgba(255,255,255,.68); border:1px solid rgba(255,255,255,.9);
  border-radius:10px; padding:8px 12px; cursor:pointer; font-family:inherit;
  transition:background .12s, border-color .12s;
}
.confirme-voisines button:hover{background:var(--papier); border-color:var(--violet)}
.confirme-voisines .ref{font-size:14px; font-weight:600; color:var(--violet-sombre); font-variant-numeric:tabular-nums}
.confirme-voisines .surface{font-size:12.5px; color:#5b4a61; font-variant-numeric:tabular-nums}
.confirme-voisines .distance{margin-left:auto; font-size:12.5px; font-weight:500; color:var(--violet); font-variant-numeric:tabular-nums}
.confirme-note{margin:0; flex:none; font-size:12.5px; line-height:1.45; color:#5b4a61}
.confirme-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; flex:none}
.confirme-actions .bouton{font-size:15px; padding:13px 22px}
.confirme-actions .bouton.secondaire{border:1.5px solid rgba(78,51,85,.28); padding:12px 20px}

/* ---------- A4 — vigilances en surimpression du plan ---------- */
/* ⚠️ Fond translucide et non opaque : le bandeau couvre le haut du plan, et
   masquer complètement cette bande cachait les parcelles du nord au moment
   précis où l'on demande de vérifier le plan. Le flou garde le texte lisible
   par-dessus le dessin ; la couleur pleine reste le repli sans `backdrop-filter`. */
.bandeau-plan{
  position:absolute; left:0; right:0; top:0; z-index:3;
  background:rgba(247,239,221,.86); border-bottom:1px solid rgba(234,223,198,.9);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:10px 20px; display:flex; gap:11px; align-items:baseline; flex-wrap:wrap;
}
.bandeau-plan .niveau{
  font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--vigilance); flex:none;
}
.bandeau-plan p{margin:0; flex:1 1 220px; min-width:0; font-size:13px; line-height:1.4; color:var(--vigilance)}
/* Au téléphone, le bandeau couvre une part plus grande d'un plan plus petit : la maquette l'amincit. */
@media (max-width:639.98px){
  .bandeau-plan{padding:7px 14px; gap:8px}
  .bandeau-plan p{flex-basis:180px; font-size:11.5px}
}

/* ---------- A5 — l'échec en pastille flottante ---------- */
/* Valeurs de design/site/Accueil.dc.html (mise à jour du 21/10, A4a/A5a). */
.pastille-echec{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:min(390px, calc(100vw - 40px));
  background:var(--papier); border:1px solid #eccdd2; border-left:4px solid var(--alerte);
  border-radius:12px; padding:16px 18px;
  box-shadow:0 12px 40px rgba(78,51,85,.18);
  display:flex; flex-direction:column; gap:8px;
  animation:bulle .2s cubic-bezier(.22,.61,.36,1);
}
.pastille-tete{display:flex; align-items:flex-start; gap:12px}
.pastille-titre{flex:1; min-width:0; font-size:15px; font-weight:600; color:var(--alerte)}
#pastille-fermer{
  flex:none; font-size:18px; line-height:1; color:var(--alerte);
  background:transparent; border:0; padding:0 2px; cursor:pointer; font-family:inherit;
}
#pastille-fermer:hover{color:var(--violet-sombre)}
/* Le premier paragraphe dit ce qui s'est passé, le suivant ce qu'il faut en faire : la maquette les distingue
   (texte 14 px encre, issue 13 px grise), le site les écrit en paragraphes successifs. */
.pastille-corps{display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:1.5; color:#2c2a2e}
.pastille-corps p{margin:0}
.pastille-corps p + p{font-size:13px; color:#6a6570}
.pastille-action{
  align-self:flex-start; margin-top:4px; font-family:inherit; font-size:14px; font-weight:600;
  color:#fff; background:var(--violet); border:0; padding:10px 18px; border-radius:10px; cursor:pointer;
}
.pastille-action:hover{background:var(--violet-sombre)}
.pastille-action[hidden]{display:none}
@media (max-width:639.98px){
  .pastille-echec{left:16px; right:16px; bottom:16px; width:auto}
  /* L'échec d'une recherche, sous le champ : une alerte en ligne et non une carte. */
  .pastille-echec.en-ligne{
    position:static; width:auto; animation:none;
    background:var(--alerte-fond); border:0; border-left:3px solid var(--alerte);
    border-radius:0 10px 10px 0; padding:10px 12px 11px 14px; box-shadow:none; gap:2px;
  }
  .pastille-echec.en-ligne .pastille-titre{font-size:13.5px}
  .pastille-echec.en-ligne #pastille-fermer{font-size:16px; padding:2px}
  .pastille-echec.en-ligne .pastille-corps{gap:2px; font-size:12.5px; line-height:1.45}
  .pastille-echec.en-ligne .pastille-corps,
  .pastille-echec.en-ligne .pastille-corps p + p{font-size:12.5px; color:var(--alerte)}
  .pastille-echec.en-ligne .pastille-action{display:none}
}

/* ---------- Le survol des cartes, repris du projet de design ---------- */
/* Une seule règle pour toutes : rubriques, profils, étapes du parcours,
   planches d'exemple et offres. Le dessin ne donne ce mouvement qu'à une
   carte — la feuille de téléchargement — mais Benoist le veut partout, et
   deux survols différents sur deux cartes voisines se lisent comme deux
   composants distincts.
   Cotes du design : 3 px de levée, 250 ms, la même courbe que l'ouverture du
   hero. */
.parcours li, .offre, .planches figure img, .exemple-entier{
  transition:border-color .2s ease, background .2s ease,
             transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.parcours li:hover, .offre:hover, .exemple-entier:hover{
  border-color:var(--violet); background:var(--fond);
  transform:translateY(-3px); box-shadow:0 10px 26px rgba(78,51,85,.14);
}
/* ⚠️ Les huit cartes du dossier ont LEUR survol, en relief, piloté au pointeur
   depuis app.js. Elles sont donc hors de la règle commune : deux `transform`
   sur le même élément, l'un en CSS l'autre en ligne, et c'est le style en
   ligne qui gagne — la levée n'aurait jamais eu lieu, sans que rien ne le
   dise. `preserve-3d` et `will-change` viennent du dessin. */
.rubrique{transform-style:preserve-3d; will-change:transform}
/* La planche est une image : c'est elle qui se lève, pas la légende dessous. */
.planches figure:hover img{
  border-color:var(--violet); transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(78,51,85,.14);
}
/* ⚠️ L'offre mise en avant garde SA bordure au survol : lui donner le violet
   commun effaçait la seule chose qui la distingue des deux autres. */
.offre.en-avant:hover{border-color:var(--violet-sombre)}
/* ⚠️ Rien ne bouge pour qui a demandé moins de mouvement — cinq cartes qui se
   soulèvent au passage de la souris, c'est exactement ce que ce réglage vise.
   La couleur, elle, reste : elle dit où l'on est. */
@media (prefers-reduced-motion:reduce){
  .parcours li, .offre, .planches figure img, .exemple-entier{transition:border-color .2s ease, background .2s ease}
  .profil:hover, .parcours li:hover, .offre:hover,
  .planches figure:hover img, .exemple-entier:hover{transform:none; box-shadow:none}
  /* La bascule est déjà neutralisée dans app.js — le gestionnaire n'est même
     pas posé. Cette ligne couvre le cas où le réglage change en cours de
     visite, où l'écouteur resterait en place. */
  .rubrique{transform:none !important; will-change:auto}
}

/* ---------- Administration : le menu replié ---------- */
/* ⚠️ Replié à TOUTES les largeurs, et pas seulement sur mobile. Le bandeau
   portait sept éléments, dont « Nouveau dossier » en double avec le bouton de
   la barre de filtre, au-dessus d'un écran dont tout le contenu utile est le
   tableau. Un CMS se juge à la place laissée à sa matière. */
/* ⚠️ Duotone propre à l'administration, demandé par Benoist : on part de
   l'orange pour rejoindre le MÊME mauve que le site — rien d'autre ne change.
   Le sélecteur porte les deux classes pour ne pas dépendre de l'ordre des
   règles : `.entete` seul a la même spécificité et pose déjà un dégradé.
   ⚠️ Contrastes MESURÉS pour le texte prune foncé (#4e3355) : 6,21:1 au départ,
   5,81:1 au milieu, 5,48:1 à l'arrivée — au moins aussi bons que le dégradé du
   site (6,29:1 → 5,48:1), et au-dessus du 4,5:1 que la charte exige. */
.entete.entete-compacte{background:linear-gradient(135deg,#efb98a 0%,#dcb4b0 52%,var(--mauve) 100%)}

/* ⚠️ Pas de `z-index` sur l'en-tête : il le portait pour que l'ancien panneau
   déroulant passe devant la carte, et il recouvrait du même coup les 46 px
   dont celle-ci mord sur le dégradé — mesuré, le haut de la carte répondait
   `.entete-int` au clic. Le tiroir est aujourd'hui `position:fixed` et posé
   hors du `<header>` : il n'a plus besoin de cet appui. */
.menu-admin{margin-left:auto}
/* ⚠️ Le burger prend la hauteur du bouton d'appel du site (47 px, mesurée) :
   c'est lui qui étire la rangée sur l'accueil, et sans cette hauteur la barre
   de l'administration faisait 85 px contre 91 — la marque sautait de 3 px en
   passant d'un écran à l'autre. */
.burger{
  min-height:47px;
  display:flex; align-items:center; gap:10px; cursor:pointer;
  font:inherit; font-size:13.5px; color:var(--violet-sombre);
  background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.9);
  border-radius:999px; padding:8px 14px 8px 12px;
  transition:background .15s, border-color .15s;
}
.burger:hover,.burger[aria-expanded="true"]{background:#fff; border-color:var(--lavande-pale)}
.burger:focus-visible{outline:3px solid var(--lavande); outline-offset:2px}
/* ⚠️ Sur la barre posée, le burger passait blanc sur blanc : ses deux tons de
   blanc translucide ne tiennent que sur le dégradé. */
.barre-fixe.posee .burger{background:var(--fond); border-color:var(--trait)}
.barre-fixe.posee .burger:hover,.barre-fixe.posee .burger[aria-expanded="true"]{
  background:var(--papier); border-color:var(--lavande-pale);
}
.burger-traits{display:grid; gap:3.5px; width:17px; flex:none}
.burger-traits span{display:block; height:2px; border-radius:2px; background:currentColor;
  transition:transform .18s ease, opacity .12s ease}
/* La croix se dessine avec les traits eux-mêmes : pas de second pictogramme à
   tenir en accord avec le premier. */
.burger[aria-expanded="true"] .burger-traits span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-traits span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-traits span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
/* Sous quelle identité on agit : sur un écran qui montre les dossiers de tout
   le monde, ce n'est pas un ornement. Il s'efface quand la place manque, le
   panneau le redonne. */
.burger-qui{font-weight:500; white-space:nowrap}
@media (max-width:560px){ .burger-qui{display:none} }

/* ⚠️ Un tiroir pleine hauteur, et non un menu déroulant sous le bouton :
   demandé par Benoist, et plus juste pour un CMS — le menu est un lieu où l'on
   va, pas une liste qu'on effleure. Il est POSITION FIXED, donc hors du
   contexte d'empilement de l'en-tête : le z-index de celui-ci ne le concerne
   plus. */
.menu-voile{
  position:fixed; inset:0; z-index:90; background:rgba(44,42,46,.30);
  opacity:0; transition:opacity .28s ease;
  /* ⚠️ Le préfixe `-webkit-` n'est pas décoratif : Safari ne connaît que
     celui-là, et c'est le navigateur d'où le service est administré. Le voile
     est éclairci en conséquence — assombrir ET flouter effaçait la page au
     lieu de la mettre en retrait. */
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}
.menu-voile.ouvert{opacity:1}
.menu-admin-panneau{
  position:fixed; top:0; right:0; bottom:0; z-index:91;
  width:min(320px, 86vw); display:flex; flex-direction:column; gap:2px;
  background:var(--papier); border-left:1px solid var(--trait);
  padding:calc(22px + env(safe-area-inset-top, 0px)) 18px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow:-18px 0 48px rgba(78,51,85,.20);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;
}
.menu-admin-panneau.ouvert{transform:none}
/* ⚠️ `prefers-reduced-motion` : un panneau qui traverse l'écran est exactement
   le geste que ce réglage demande d'éviter. */
@media (prefers-reduced-motion:reduce){
  .menu-voile,.menu-admin-panneau{transition:none}
}
/* ⚠️ Le panneau reçoit le focus à l'ouverture, pour que le menu soit annoncé
   plutôt qu'une de ses entrées. Il ne doit pas pour autant se cercler : c'est
   un conteneur, pas une commande. */
.menu-admin-panneau:focus{outline:none}
.menu-admin-panneau a:focus-visible,.menu-admin-panneau button:focus-visible{
  outline:3px solid var(--lavande); outline-offset:-3px;
}

/* La tête ne porte que le nom de la section et la fermeture : on ouvre ce
   tiroir pour aller quelque part, pas pour lire son propre nom. L'identité est
   descendue en pied. */
.menu-admin-tete{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 4px 12px; margin-bottom:6px; border-bottom:1px solid var(--trait);
}
.menu-avatar{
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--lavande-pale); color:var(--violet-sombre); font-size:15px; font-weight:600;
}
.menu-identite{display:flex; flex-direction:column; gap:3px; min-width:0}
.menu-identite strong{font-size:15px; font-weight:600; color:var(--violet-sombre)}
/* ⚠️ Une adresse tient lieu d'identifiant : sans coupure, elle élargit le
   tiroir ou déborde sous le bouton de fermeture. */
.menu-identifiant{font-size:12.5px; line-height:1.4; color:var(--encre-douce); overflow-wrap:anywhere}
.menu-identite .role-super{align-self:flex-start; margin-top:3px}
.menu-fermer{
  flex:none; display:grid; place-items:center; width:32px; height:32px;
  background:none; border:0; border-radius:8px; cursor:pointer; color:var(--encre-douce);
}
.menu-fermer:hover{background:var(--fond); color:var(--violet-sombre)}

.menu-admin-titre{
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--encre-douce); padding:0 8px;
}
.menu-admin-panneau a,.menu-admin-panneau .lien-deconnexion{
  display:block; width:100%; text-align:left; text-decoration:none;
  font-size:15px; font-weight:500; color:var(--violet-sombre);
  padding:11px 12px; border-left:3px solid transparent; border-radius:0 9px 9px 0;
}
.menu-admin-panneau a:hover,.menu-admin-panneau .lien-deconnexion:hover{background:var(--fond)}
/* Le groupe repliable porte le même gabarit qu'une entrée, chevron en bout. */
.menu-groupe{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; font:inherit; font-size:15px; font-weight:500; text-align:left;
  color:var(--violet-sombre); background:none; border:0; cursor:pointer;
  padding:11px 12px; border-left:3px solid transparent; border-radius:0 9px 9px 0;
}
.menu-groupe:hover{background:var(--fond)}
.menu-chevron{flex:none; color:var(--encre-douce); transition:transform .18s ease}
.menu-groupe[aria-expanded="true"] .menu-chevron{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .menu-chevron{transition:none} }
/* ⚠️ Le filet vertical rattache les sous-entrées à leur groupe : sans lui,
   elles se lisent comme quatre entrées de plus, simplement décalées. */
.menu-sous{margin:2px 0 2px 15px; padding-left:11px; border-left:1px solid var(--trait)}
.menu-sous[hidden]{display:none}
.menu-admin-panneau .menu-sous a{font-size:14px; font-weight:400; padding:9px 12px}
/* ⚠️ L'entrée courante se marque d'un FILET autant que d'un fond : le brief
   pose qu'aucune information ne repose sur la seule couleur, et `aria-current`
   la dit au lecteur d'écran. */
.menu-admin-panneau a.actif{
  color:var(--violet); background:var(--information-fond); border-left-color:var(--violet);
}
/* Le pied tombe en bas du tiroir : qui l'on est, la version, la déconnexion.
   Ce ne sont pas des entrées parmi les autres — on ne rencontre pas la
   déconnexion en cherchant « Comptes ». */
.menu-admin-pied{
  margin:auto 0 0; padding-top:14px; border-top:1px solid var(--trait);
  display:flex; flex-direction:column; gap:10px;
}
.menu-admin-pied .menu-identite-bloc{
  display:flex; align-items:flex-start; gap:11px; width:100%;
  padding:8px; border-left:0; border-radius:10px; text-decoration:none;
}
.menu-admin-pied .menu-identite-bloc:hover{background:var(--fond)}
/* ⚠️ Pas de filet gauche ici, contrairement aux entrées : il couperait
   l'avatar. Le fond suffit à dire qu'on est sur son compte. */
.menu-admin-pied .menu-identite-bloc.actif{background:var(--information-fond)}
/* La version partage la ligne de la déconnexion : posée seule, elle ajoutait un
   troisième retrait sous l'identité et flottait entre deux blocs. */
.menu-admin-sortie{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:6px; border-top:1px solid var(--trait);
}
.menu-admin-sortie form{margin:0; min-width:0}
.menu-admin-sortie .version{flex:none; padding-right:8px; font-size:12px; color:var(--encre-douce)}
.lien-deconnexion{
  font:inherit; background:none; border:0; cursor:pointer; color:var(--encre-douce);
}
.menu-admin-panneau .lien-deconnexion:hover{color:var(--alerte)}
/* ⚠️ Le fond ne défile plus derrière le tiroir : sans cela, la molette
   emportait la page et le tiroir restait seul à l'écran. */
body.menu-ouvert{overflow:hidden}

.formulaire-compte{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--fond); border:1px solid var(--trait); border-radius:12px;
  padding:14px 16px; margin:14px 0 18px;
}
.formulaire-compte .champ{flex:1 1 180px; min-width:0}
.formulaire-compte .case{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--encre-douce)}

/* ---------- Cache : une carte par document ---------- */
.grille-cartes{display:grid; gap:12px; margin-top:16px}
.carte-cache{
  display:flex; flex-direction:column; gap:9px;
  background:var(--fond); border:1px solid var(--trait); border-radius:12px; padding:15px 17px;
}
/* ⚠️ Pas de `flex-wrap` ici : la liste des communes d'un PLUi tient sur deux
   lignes, et le bouton passait dessous, à gauche, comme s'il appartenait au
   bloc suivant. Il reste à droite, et c'est le texte qui plie — d'où `min-width:0`
   sur la colonne de gauche, sans quoi un mot long l'empêche de rétrécir. */
.carte-cache-tete{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.carte-cache-tete>div:first-child{flex:1 1 auto; min-width:0}
.carte-cache-tete>.bouton,.carte-cache-tete>.pastille{flex:none}
.carte-cache-tete strong{font-size:15px; color:var(--violet-sombre); margin-right:10px}
.carte-cache-communes{font-size:13px; color:var(--encre-douce)}
/* Le département coiffe le type de document : il situe avant qu'on lise. */
.carte-cache-dept{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--encre-douce); margin-bottom:2px}
/* Une pièce dont le fichier a disparu ne doit pas se lire comme le reste :
   le dossier ne l'annexe pas, et il ne le dit pas. */
.alerte-texte{color:var(--alerte)}
/* Les mesures sur une rangée : ce sont des repères qu'on balaie, pas des
   colonnes qu'on compare d'une ligne à l'autre. */
.carte-cache-mesures{display:flex; flex-wrap:wrap; gap:6px 22px; font-size:12.5px; color:var(--encre-douce)}
.carte-cache-mesures strong{color:var(--violet-sombre); font-variant-numeric:tabular-nums}
.carte-cache-source{font-size:11.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere}
.fiche .bouton{align-self:flex-start; margin-top:4px}

/* ---------- Couverture : la carte de France ---------- */
/* ⚠️ `position:relative` : le panneau de survol est posé en absolu DANS la
   carte, et se déplace par `transform` — déplacer un élément par `left/top`
   relance la mise en page à chaque mouvement de souris. */
.carte-france{margin-top:16px; position:relative}
.carte-france svg{display:block; width:100%; height:auto; max-height:620px}
/* ⚠️ Le survol ne touche pas au REMPLISSAGE : changer la couleur de fond ferait
   lire un autre palier de couverture. Seul le contour, redessiné par-dessus
   dans `.surbrillance`, marque le département. */
.carte-france .surbrillance{pointer-events:none}

.carte-info{
  position:absolute; top:0; left:0; z-index:5; pointer-events:none;
  min-width:210px; max-width:260px; padding:12px 14px;
  background:var(--papier); border:1px solid var(--trait); border-radius:11px;
  box-shadow:0 2px 6px rgba(78,51,85,.08), 0 14px 34px rgba(78,51,85,.16);
}
.carte-info[hidden]{display:none}
.carte-info-tete{display:flex; align-items:baseline; gap:8px; margin-bottom:8px}
.carte-info-tete strong{font-size:15px; color:var(--violet-sombre)}
.carte-info-code{font-size:12px; color:var(--encre-douce); font-variant-numeric:tabular-nums}
.carte-info-taux{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--encre-douce);
  padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--trait)}
.carte-info-lignes{display:flex; flex-direction:column; gap:4px; margin:0}
.carte-info-lignes>div{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.carte-info-lignes dt{font-size:12.5px; color:var(--encre-douce)}
.carte-info-lignes dd{margin:0; font-size:13.5px; font-weight:600; color:var(--violet-sombre); font-variant-numeric:tabular-nums}

/* ---------- Pagination de la liste ---------- */
.pagination{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:18px}
.pagination:empty{display:none}
.pagination-etat{font-size:13px; color:var(--encre-douce); font-variant-numeric:tabular-nums}
.pagination-etat strong{color:var(--violet-sombre)}
.pagination .bouton[disabled]{opacity:.45; cursor:default}

/* ---------- Espace disque : la barre empilée ---------- */
.graphe{margin-top:16px}
.graphe svg{display:block; border-radius:8px; overflow:hidden; background:var(--fond)}
.legende{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px}
.legende-item{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--encre-douce); font-variant-numeric:tabular-nums}
.legende-item strong{color:var(--violet-sombre); font-weight:600}
.legende-pastille{width:11px; height:11px; border-radius:3px; flex:none; border:1px solid rgba(78,51,85,.12)}

/* ---------- État des services : fiches plutôt que tableaux ---------- */
/* Un tableau trie et compare ; ici on lit sept états d'un coup d'œil, et une
   grille de fiches s'y prête mieux — surtout sous 620 px, où un tableau à
   quatre colonnes se met à défiler de côté. */
.grille-services,.grille-fiches{
  display:grid; gap:12px; margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
}
.grille-fiches{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.fiche,.fiche-service{
  display:flex; flex-direction:column; gap:5px;
  background:var(--fond); border:1px solid var(--trait); border-radius:12px; padding:14px 16px;
}
.fiche-tete{display:flex; align-items:center; justify-content:space-between; gap:10px}
.fiche-tete strong{font-size:14.5px; color:var(--violet-sombre)}
.fiche-role{font-size:12.5px; line-height:1.45; color:var(--encre-douce)}
.fiche-detail{font-size:12.5px; color:var(--violet-sombre); font-variant-numeric:tabular-nums}
.fiche-hote{font-size:11.5px; color:var(--encre-douce); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere}
.pastille.alerte{background:var(--alerte-fond); color:var(--alerte)}

/* ---------- Sauvegardes : la jauge et les lignes ---------- */
.jauge-espace{margin:22px 0 18px}
.jauge-tete{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:var(--encre-douce); margin-bottom:7px}
.jauge-tete strong{color:var(--violet-sombre); font-variant-numeric:tabular-nums}
.jauge-barre{height:9px; border-radius:99px; background:var(--lavande-pale); overflow:hidden}
.jauge-barre span{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--vert-eau),var(--violet))}

/* Une ligne par sauvegarde : la date à gauche, les mesures à droite, la
   suppression au bout. Ce sont des objets qu'on parcourt, pas des colonnes
   qu'on compare — d'où des lignes plutôt qu'un tableau. */
.liste-sauvegardes{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.ligne-sauvegarde{
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  background:var(--fond); border:1px solid var(--trait); border-radius:11px;
}
.ligne-sauvegarde:hover{border-color:var(--lavande-pale)}
.ligne-date{font-weight:600; font-size:14.5px; color:var(--violet-sombre); flex:1 1 auto; min-width:0}
.ligne-par{font-size:12.5px; color:var(--encre-douce); overflow-wrap:anywhere}
.ligne-mesure{font-size:13px; color:var(--encre-douce); font-variant-numeric:tabular-nums; white-space:nowrap}
.ligne-poids{font-weight:600; color:var(--violet-sombre); min-width:76px; text-align:right}
/* ⚠️ Le cadenas est un BOUTON, pas un pictogramme d'état : il pose et lève le
   verrou qui met la sauvegarde à l'abri de la purge automatique. Il doit donc
   se voir cliquable, et son état se lire sans la couleur — d'où le cadenas
   ouvert ou fermé, et `aria-pressed`. */
.picto-verrou{font-size:15px; line-height:1; filter:grayscale(1); opacity:.55}
.picto-verrou:hover{filter:none; opacity:1}
.picto-verrou.pose{filter:none; opacity:1}
/* Sous 620 px, la ligne se replie plutôt que de déborder — contrainte du brief. */
@media (max-width:620px){
  .ligne-sauvegarde{flex-wrap:wrap; gap:8px 12px}
  .ligne-date{flex:1 0 100%}
}

/* ---------- Sauvegardes : le choix de la clé ---------- */
.cles-usb{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:16px}
.cle-usb{
  display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer;
  font:inherit; background:var(--fond); border:1px solid var(--trait);
  border-radius:12px; padding:14px 16px;
  transition:border-color .14s, background .14s;
}
.cle-usb:hover{border-color:var(--violet)}
.cle-usb:focus-visible{outline:3px solid var(--lavande); outline-offset:2px}
/* ⚠️ Le cadre prune ne fait pas seul le travail : la pastille « retenue »
   écrit l'état en toutes lettres, comme le brief l'exige. */
.cle-usb.retenue{border-color:var(--violet); background:var(--information-fond)}
.cle-nom{display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--violet-sombre)}
.cle-detail{font-size:12.5px; color:var(--encre-douce); font-variant-numeric:tabular-nums}

/* ---------- Mon compte ---------- */
/* Les faits du compte en bandeau de cases jointives : ce sont quatre valeurs
   qu'on lit d'un coup d'œil, pas un tableau qu'on trie. */
.faits-compte{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:1px;
  margin:16px 0 4px; background:var(--trait); border:1px solid var(--trait);
  border-radius:12px; overflow:hidden;
}
.faits-compte>div{background:var(--papier); padding:12px 16px}
.faits-compte dt{
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--encre-douce);
}
.faits-compte dd{margin:5px 0 0; font-size:14.5px; color:var(--violet-sombre)}
.role-super{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--violet); background:var(--information-fond); padding:3px 8px; border-radius:5px;
}

/* ---------- Les pages de fond, au dessin de septembre ---------- */
/* ⚠️ L'en-tête de page est un BANDEAU DÉGRADÉ, comme le hero : ces pages font
   partie du site, pas d'une annexe documentaire. Il est plus court que le hero
   — ni champ ni fiche à loger. */
.entete-page .entete-int{padding-top:clamp(34px,4.5vw,54px); padding-bottom:clamp(38px,5vw,58px)}
.entete-page .etiquette.sur-degrade{
  color:var(--violet-sombre); background:rgba(255,255,255,.72); margin-bottom:0;
}
.entete-page h1{
  margin:16px 0 0; font-size:clamp(28px,3.4vw,42px); font-weight:700;
  letter-spacing:-.022em; line-height:1.1; color:var(--violet-sombre); text-wrap:balance;
}
.entete-page p.accroche{
  margin:16px 0 0; max-width:60ch; font-size:17px; line-height:1.55;
  color:var(--violet-sombre); opacity:1;
}
/* Le fil d'Ariane : on sait toujours d'où l'on vient, et d'un clic on y
   retourne. */
/* ⚠️ Le fil d'Ariane a QUITTÉ le bandeau dégradé, à la demande de Benoist. En
   tête du bandeau il était la première chose lue d'une page, avant son titre,
   et posé sur le dégradé il en cassait le haut. Sous le bandeau, il ouvre le
   corps de page et se cale sur la même gouttière que le sommaire — les deux
   partagent les 32 px de retrait de `main.page-corps`. */
.bande-ariane{
  max-width:calc(var(--largeur) + 64px); margin:0 auto;
  padding:clamp(20px,2.4vw,28px) 32px 0;
}
.fil-ariane{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--encre-douce)}
.fil-ariane a{color:var(--violet-sombre); text-decoration:underline; text-underline-offset:2px}
/* Le bandeau ne porte plus de fil : sa marge basse n'a plus d'objet. */
.bande-ariane + main.page-corps{padding-top:clamp(18px,2.2vw,26px)}
.fil-ariane span[aria-hidden]{opacity:.55}
.fil-ariane > span:last-child{font-weight:500}

/* ⚠️ Deux colonnes : un sommaire COLLANT à gauche, le contenu à droite. Sur
   une page de huit rubriques, c'est ce qui dit où l'on en est. */
/* ⚠️ `main.page-corps` et non `.page-corps` : la règle
   `main:not(:has(.carte:not([hidden])))` remet `padding:0` sur un `main` sans
   carte — c'est le cas de ces pages — et le sommaire se retrouvait collé au
   bord de la fenêtre, 32 px à gauche du titre. Il faut une spécificité qui la
   dépasse. */
main.page-corps{
  max-width:calc(var(--largeur) + 64px); margin:0 auto;
  /* ⚠️ Le bas porte le même espace que le haut : à 0, la dernière carte d'une page longue touchait le pied (mentions, Benoist, 08/10/2026). */
  padding:clamp(40px,5vw,60px) 32px clamp(40px,5vw,60px);
  display:grid; grid-template-columns:minmax(0,212px) minmax(0,1fr);
  gap:clamp(32px,4vw,56px); align-items:start;
}
/* Calé sur la hauteur réelle de la barre (--h-barre, posée par barre-fixe.js), à 24 px dessous : à 96 px fixes, le titre « Sur cette page » touchait la barre au défilement (Benoist, 07/10/2026, 20 px de trop). */
.page-sommaire{position:sticky; top:calc(var(--h-barre, 92px) + 24px); display:flex; flex-direction:column; gap:11px}
.page-sommaire-titre{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--encre-douce);
}
.page-sommaire nav{display:flex; flex-direction:column; gap:1px; border-left:2px solid var(--trait)}
.page-sommaire a{
  font-size:13.5px; line-height:1.4; color:var(--encre-douce); text-decoration:none;
  padding:6px 0 6px 13px; margin-left:-2px; border-left:2px solid transparent;
}
.page-sommaire a:hover{color:var(--violet-sombre); border-left-color:var(--lavande)}
/* Sous-rubrique (`###`) : plus petite et en retrait, comme la maquette. */
.page-sommaire a.sous-rubrique{font-size:12.5px; padding:4px 0 4px 27px}
/* ⚠️ Sous 900 px le sommaire n'a plus de place : il disparaît et le contenu
   prend toute la largeur. Le masquer sans repasser à une colonne laisserait
   212 px de vide à gauche. */
/* ⚠️ `main.page-corps` et non `.page-corps` ci-dessous : la règle de base a cette
   spécificité, et `.page-corps` seul ne la battait pas — le sommaire disparaissait mais
   le contenu restait dans sa colonne de 212 px (vu sur /faq à 390 px, 05/10/2026). */
/* ⚠️ 899,98 px et non 900 : la maquette bascule à `innerWidth < 900` ; à 900 px pile la colonne de 212 px et le sommaire latéral sont encore là. */
@media (max-width:899.98px){
  main.page-corps{grid-template-columns:minmax(0,1fr)}
  .page-sommaire{display:none}
}
.page-contenu{display:flex; flex-direction:column; min-width:0}
.page-chapeau{margin:0; font-size:16px; line-height:1.65; color:#5b4a61; max-width:74ch; text-wrap:pretty}

/*
 * Le glossaire — projet de design « Glossaire », 05/10/2026. Une pastille de
 * lettres collante sous la barre, puis une carte par lettre.
 * ⚠️ La pastille se cale sur `--h-barre` (posée par barre-fixe.js) : la barre
 * fait ~85 px sur une rangée et ~147 px quand elle se replie, et une valeur en
 * dur en recouvrait une moitié ou laissait un vide pour l'autre. La marge de
 * défilement des ancres ajoute sa propre hauteur, pour que la lettre visée
 * s'arrête SOUS la pastille.
 */
.glossaire-lettres{position:sticky; top:calc(var(--h-barre, 92px) + 4px); z-index:20; padding:18px 32px 0; pointer-events:none}
.glossaire-lettres nav{
  pointer-events:auto; max-width:var(--largeur); margin:0 auto; padding:6px 8px;
  display:flex; justify-content:space-between; gap:2px; overflow-x:auto; scrollbar-width:none;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid #ece5f0; border-radius:14px;
  box-shadow:0 1px 2px rgba(78,51,85,.04), 0 10px 26px rgba(78,51,85,.08);
}
.glossaire-lettres a,.glossaire-lettres span{
  flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:8px;
  font-size:14px; font-weight:600; color:var(--violet-sombre); text-decoration:none;
}
.glossaire-lettres a:hover{background:#efe9f3}
.glossaire-lettres span{font-weight:500; color:#cdc6d2}
/* ⚠️ Un `div` dans un `main` nu, et non `main.glossaire-corps` : la règle
   `main:not(:has(.carte…))` remet `padding:0` avec une spécificité que la classe
   n'égale pas — mesuré, la page débordait de 32 px de chaque côté. */
.glossaire-corps{
  max-width:calc(var(--largeur) + 64px); margin:0 auto; padding:clamp(32px,4vw,48px) 32px clamp(32px,4vw,48px);
  display:flex; flex-direction:column; gap:clamp(28px,3vw,40px);
}
/* ⚠️ `[id]` dans le sélecteur : la règle générique `[id]{scroll-margin-top}` plus bas
   a la même spécificité qu'une simple classe et l'emporte par l'ordre — mesuré par
   build-revue, la lettre visée s'arrêtait SOUS la pastille (120 px au lieu de 176). */
.glossaire-lettre[id]{display:grid; grid-template-columns:minmax(0,72px) minmax(0,1fr); gap:8px 24px; scroll-margin-top:calc(var(--h-barre, 92px) + 84px)}
.glossaire-initiale{margin:0; font-size:38px; font-weight:700; line-height:1; color:var(--mauve); letter-spacing:-.02em}
.glossaire-carte{display:flex; flex-direction:column; background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon); overflow:hidden}
.glossaire-carte dl[id]{margin:0; display:flex; flex-wrap:wrap; gap:4px 28px; padding:17px 22px; scroll-margin-top:calc(var(--h-barre, 92px) + 84px)}
.glossaire-article{color:var(--violet); font-weight:500; border-bottom:1px solid var(--lavande-pale); white-space:nowrap; text-decoration:none}
.glossaire-article:hover{color:var(--violet-sombre)}
.glossaire-carte dl + dl{border-top:1px solid #f1ebf4}
.glossaire-carte dt{flex:0 0 220px; font-size:15.5px; font-weight:600; color:var(--violet-sombre); line-height:1.5}
.glossaire-carte dd{margin:0; flex:1 1 320px; min-width:0; font-size:15px; line-height:1.65; color:#5b4a61; max-width:68ch}
@media (max-width:600px){
  .glossaire-lettres{padding-inline:20px}
  .glossaire-corps{padding-inline:20px}
  /* ⚠️ ÉCART À LA MAQUETTE DÉCIDÉ par Benoist (decisions/glossaire-mobile, 05/10/2026,
     20 h 15 UTC, relayé par le PM) : sur téléphone seulement, la lettre passe AU-DESSUS de son
     groupe de définitions et le texte prend toute la largeur ; sur ordinateur rien ne change.
     Une relecture ne le défait pas. `[id]` : sans lui la règle `.glossaire-lettre[id]` (grille à
     deux colonnes, plus haut) l'emportait et celle-ci était morte. */
  .glossaire-lettre[id]{grid-template-columns:minmax(0,1fr)}
}

/*
 * Les fiches des mentions légales — projet de design « Mentions », 01/10/2026.
 * Une ligne par point, libellé à gauche et valeur à droite dans une carte
 * blanche, plutôt qu'une suite de paragraphes : c'est ce que montre la
 * maquette pour les quatre rubriques (mentions, CGV, données, cookies).
 */
.mentions-section{display:flex; flex-direction:column; gap:16px}
.mentions-section + .mentions-section{margin-top:12px; padding-top:50px; position:relative}
/* Le filet de courbes qui sépare deux rubriques, repris du motif de marque —
   même usage que les bandes de l'accueil, à une opacité qui reste discrète. */
.mentions-section + .mentions-section::before{
  content:''; position:absolute; left:0; right:0; top:0; height:22px;
  background:url(/assets/marque/contours-prune.svg) repeat-x; background-size:560px auto;
  opacity:.17; pointer-events:none;
}
.mentions-titre{display:flex; align-items:center; gap:14px}
.mentions-titre h2{margin:0; font-size:22px; font-weight:600; letter-spacing:-.014em; color:var(--violet-sombre)}
.mentions-icone{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; border-radius:11px; background:var(--lavande-pale); color:var(--violet-sombre);
}
.mentions-carte{
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  overflow:hidden; display:flex; flex-direction:column;
}
.mentions-ligne{display:flex; flex-wrap:wrap; gap:6px 28px; padding:18px 24px}
.mentions-ligne + .mentions-ligne{border-top:1px solid #f1ebf4}
.mentions-label{flex:0 0 190px; font-size:14px; font-weight:600; color:var(--violet-sombre); line-height:1.55}
.mentions-valeur{flex:1 1 320px; min-width:0; font-size:14.5px; line-height:1.65; color:#5b4a61; max-width:68ch}
.mentions-valeur p{margin:0}
.mentions-valeur p + p{margin-top:8px}
/* ⚠️ Même paire de couleurs que les autres avertissements du site
   (`--vigilance`/`--vigilance-fond`) : une troisième nuance d'ambre aurait
   dit la même chose avec un vocabulaire différent. */
.mentions-ligne--alerte{background:var(--vigilance-fond); border-top-color:#eadfc6 !important}
.mentions-ligne--alerte .mentions-label,
.mentions-ligne--alerte .mentions-valeur{color:var(--vigilance)}

/* ⚠️ `.appel-page` n'avait JAMAIS été stylée (trouvé en portant ce dessin,
   pas en le lisant au hasard) : la page rendait ce bloc en display block
   nu depuis sa création. Le projet de design en fait une barre compacte,
   différente du grand bandeau `.appel-int` des autres pages de fond — pas
   un oubli à corriger en réutilisant `.appel-int`, un second composant,
   plus discret, pour une page qui n'a pas besoin d'un appel à produire un
   dossier. */
.appel-page{
  margin-top:44px; background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.appel-page p{margin:0; font-size:16px; font-weight:600; color:var(--violet-sombre)}

/* ⚠️ La marge de défilement dégage la barre collante, qui se replie en deux
   rangées sous 1180 px : sans elle, une ancre du sommaire amène le titre SOUS
   la barre. */
[id]{scroll-margin-top:160px}
@media (min-width:1180px){ [id]{scroll-margin-top:120px} }

/* Une rubrique par bloc, séparée par un filet de courbes de niveau — le motif
   de la marque plutôt qu'un trait. */
.rubrique-longue{position:relative; display:flex; flex-direction:column; gap:13px; padding-top:46px; margin-top:34px}
.rubrique-longue::before{
  content:''; position:absolute; left:0; right:0; top:0; height:22px;
  background:url('/assets/marque/contours-prune.svg') repeat-x; background-size:560px auto;
  opacity:.17; pointer-events:none;
}
.rubrique-tete{display:flex; align-items:center; gap:16px; margin-bottom:2px}
.rubrique-tete h2{margin:0; font-size:22px; font-weight:600; letter-spacing:-.012em; color:var(--violet-sombre)}
.rubrique-icone{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border-radius:12px;
  background:var(--lavande-pale); color:var(--violet-sombre);
}
.rubrique-icone svg{display:block}
.rubrique-longue > p{margin:0; font-size:15.5px; line-height:1.65; color:#5b4a61; max-width:74ch; text-wrap:pretty}
.rubrique-source{font-size:13px !important; line-height:1.5 !important; color:var(--encre-douce) !important}
.rubrique-source span{font-weight:600; color:var(--violet-sombre)}
/* ⚠️ « Ne dit pas » porte la couleur de VIGILANCE et non d'alerte : c'est une
   limite assumée du document, pas un incident. Le liseré la distingue du
   corps sans en faire un avertissement. */
.ne-dit-pas{
  background:var(--vigilance-fond); border-left:3px solid #c79a3c;
  border-radius:0 9px 9px 0; padding:13px 16px;
  display:flex; flex-direction:column; gap:4px; max-width:74ch;
}
.ne-dit-pas > span{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vigilance);
}
.ne-dit-pas p{margin:0; font-size:14px; line-height:1.55; color:var(--vigilance)}

.encart-page{
  background:var(--papier); border:1px solid var(--trait); border-radius:14px;
  padding:clamp(24px,3vw,32px); display:flex; flex-direction:column; gap:13px; margin-top:34px;
}
.encart-page h2{margin:0; font-size:22px; font-weight:600; letter-spacing:-.012em; color:var(--violet-sombre)}
.encart-page p{margin:0; font-size:15.5px; line-height:1.65; color:#5b4a61; max-width:74ch; text-wrap:pretty}
.lien-souligne{font-weight:500; border-bottom:1px solid var(--lavande-pale); text-decoration:none}
.lien-souligne:hover{border-bottom-color:var(--violet)}

/* La mention de portée, en carte à part : elle se lit en dernier et n'a pas à
   peser dans le pied. */
.mention-encadree{max-width:calc(var(--largeur) + 64px); margin:0 auto; padding:clamp(48px,6vw,72px) 32px 0}
.mention-encadree > p{
  margin:0; background:var(--papier); border:1px solid var(--trait); border-radius:14px;
  padding:18px 24px; font-size:12.5px; line-height:1.55; color:var(--encre-douce); max-width:96ch;
}
.mention-encadree strong{font-weight:600; color:var(--violet-sombre)}

/* L'appel des pages porte deux actions : le bouton plein et un bouton clair,
   lisible sur le dégradé — la variante secondaire, bordée de gris, y
   disparaissait. */
.appel-actions{display:flex; gap:10px; flex-wrap:wrap; flex:none}
.appel-int h2{flex:1 1 360px; min-width:0}
.bouton.clair{
  background:var(--papier); color:var(--violet-sombre); border-color:transparent;
  box-shadow:0 2px 8px rgba(78,51,85,.1);
}
.bouton.clair:hover:not(:disabled){background:#fff; color:var(--violet); box-shadow:0 2px 8px rgba(78,51,85,.14)}
a.bouton.clair, a.bouton.clair:hover{color:var(--violet-sombre)}


/* L'avis « à compléter » des mentions légales : un encart, pas une alerte —
   c'est un état du document, pas un incident du service. */
.avis-brouillon{
  display:flex; align-items:flex-start; gap:14px; margin:0 0 30px var(--retrait-tete);
  background:var(--vigilance-fond); border-radius:12px; padding:16px 20px;
}
.avis-brouillon p{margin:0; font-size:14px; line-height:1.55; color:var(--vigilance)}
@media (max-width:620px){ .avis-brouillon{margin-left:0} }


/* ---------- Contact : formulaire à gauche, aparté à droite ---------- */
/* ⚠️ Ce gabarit-ci n'a PAS de sommaire collant : la page est courte et porte
   une action. Les colonnes sont donc les siennes, et non celles des trois
   autres pages de fond. */
main.page-contact{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,4vw,48px)}
@media (max-width:899.98px){ main.page-contact{grid-template-columns:minmax(0,1fr)} }
.contact-colonne{display:flex; flex-direction:column; gap:18px; min-width:0}
.contact-aparte{display:flex; flex-direction:column; gap:14px; min-width:0}
.contact-aparte h2{margin:0; font-size:20px; font-weight:600; letter-spacing:-.012em; color:var(--violet-sombre)}
.contact-aparte p{margin:0; font-size:15px; line-height:1.65; color:#5b4a61; text-wrap:pretty}
/* L'encart d'attente n'a pas de titre : c'est une phrase, pas un état. */
.contact-colonne .a-savoir > p{margin:0; font-size:14px; line-height:1.6; color:var(--violet-sombre)}

.formulaire-contact{
  display:flex; flex-direction:column; gap:16px;
  background:var(--papier); border:1px solid var(--trait); border-radius:14px;
  padding:clamp(22px,3vw,28px);
}
.contact-duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.champ-contact{display:flex; flex-direction:column; gap:6px}
.champ-contact > span{font-size:13px; font-weight:600; color:var(--violet-sombre)}
.champ-contact input,.champ-contact select,.champ-contact textarea{
  font:inherit; font-size:16px; color:var(--encre); padding:12px 14px; min-width:0;
  background:var(--papier); border:1.5px solid var(--trait); border-radius:10px;
}
.champ-contact textarea{resize:vertical; min-height:120px; line-height:1.6}
.champ-contact input:focus,.champ-contact select:focus,.champ-contact textarea:focus{
  outline:none; border-color:var(--violet); box-shadow:none;
}
/* ⚠️ Hors de l'écran ET hors tabulation, mais PAS `display:none` : plusieurs
   robots ignorent les champs masqués ainsi, et le leurre ne sert plus à rien. */
.leurre{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* ⚠️ 16 px même hors de l'écran : un remplissage automatique ou un lecteur d'écran peut y poser le focus, et iOS zoome sur tout champ
   sous 16 px (mesuré 13,33 px aux trois largeurs, préprod du 20/10/2026). */
.leurre input{font-size:16px}
.contact-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding-top:2px;
}

/* ---------- Page des sources : callouts et état des services ---------- */
/* ⚠️ Deux encarts de nature différente, et la couleur les distingue : « À
   savoir » est une précision utile (violet, information), « Limite » est ce
   que la donnée ne permet pas de conclure (ambre, vigilance). Les confondre
   ferait lire une précision comme un avertissement. */
.a-savoir{
  background:var(--information-fond); border-left:3px solid var(--violet);
  border-radius:0 9px 9px 0; padding:13px 16px;
  display:flex; flex-direction:column; gap:4px; max-width:74ch;
}
.a-savoir > span{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--violet);
}
.a-savoir p{margin:0; font-size:14px; line-height:1.55; color:var(--violet-sombre)}
/* Le modèle n'est ni une précision ni une limite : il est gris, comme un état
   indisponible — il n'apporte rien à la donnée. */
.ne-fait-pas{
  background:var(--fond); border:1px solid var(--trait); border-radius:10px; padding:14px 16px;
  display:flex; flex-direction:column; gap:4px; max-width:74ch;
}
.ne-fait-pas > span{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--indisponible);
}
.ne-fait-pas p{margin:0; font-size:14px; line-height:1.55; color:var(--indisponible)}
/* La première entrée n'a pas de filet : il séparerait du chapeau, pas de la
   rubrique précédente. */
.rubrique-longue.sans-filet{padding-top:4px; margin-top:0}
.rubrique-longue.sans-filet::before{display:none}
/* ⚠️ La maquette (Sources.dc.html) ne porte qu'UN chapeau, margin 0 0 40px avant la première rubrique ; l'app en a deux, qui se touchaient, et le h2 de la première rubrique collait au second (Benoist, 22/10). 13 px = le gap des rubriques. */
.page-chapeau + .page-chapeau{margin-top:13px}
.page-contenu > .page-chapeau + .rubrique-longue.sans-filet{margin-top:40px}
.rubrique-longue h2{margin:0; font-size:22px; font-weight:600; letter-spacing:-.012em; color:var(--violet-sombre)}
.lien-adresse{
  align-self:flex-start; font-size:13.5px; font-weight:500; color:var(--violet);
  text-decoration:none; border-bottom:1px solid var(--lavande-pale); padding-bottom:1px;
}
.lien-adresse:hover{border-bottom-color:var(--violet)}

.etat-services{max-width:calc(var(--largeur) + 64px); margin:0 auto; padding:clamp(48px,6vw,72px) 32px 0}
.etat-cadre{background:var(--papier); border:1px solid var(--trait); border-radius:14px; overflow:hidden}
.etat-tete{
  padding:18px 24px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--trait);
}
.etat-tete h2{margin:0; font-size:17px; font-weight:600; color:var(--violet-sombre)}
/* ⚠️ `gap:1px` sur fond de trait : les séparateurs sont le fond qui affleure,
   donc pas de double filet aux extrémités de la grille. */
.etat-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:1px; background:var(--trait)}
.etat-ligne{
  background:var(--papier); padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.etat-nom{font-size:14px; color:var(--violet-sombre); min-width:0}
.etat-valeur{
  flex:none; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:5px;
  color:var(--indisponible); background:var(--indisponible-fond);
}
.etat-ligne[data-etat="ok"] .etat-valeur{color:var(--conforme); background:var(--conforme-fond)}
.etat-ligne[data-etat="vide"] .etat-valeur{color:var(--vigilance); background:var(--vigilance-fond)}
.etat-ligne[data-etat="panne"] .etat-valeur{color:var(--alerte); background:var(--alerte-fond)}
.etat-pied{padding:16px 24px; background:var(--fond); border-top:1px solid var(--trait)}
.etat-pied p{margin:0; font-size:12.5px; line-height:1.55; color:var(--encre-douce); max-width:96ch}
.etat-pied strong{font-weight:600; color:var(--violet-sombre)}

/* ---------- FAQ : sections et dépliants ---------- */
.faq-section{position:relative; display:flex; flex-direction:column; gap:14px; padding-top:48px; margin-top:10px}
.faq-section::before{
  content:''; position:absolute; left:0; right:0; top:0; height:22px;
  background:url('/assets/marque/contours-prune.svg') repeat-x; background-size:560px auto;
  opacity:.17; pointer-events:none;
}
.faq-section.sans-filet{padding-top:6px; margin-top:0}
.faq-section.sans-filet::before{display:none}
.faq-section > h2{margin:0; font-size:22px; font-weight:600; letter-spacing:-.012em; color:var(--violet-sombre)}
.faq-section .faq{display:flex; flex-direction:column; gap:9px}
.faq-section details{background:var(--papier); border:1px solid var(--trait); border-radius:12px; padding:16px 20px}
.faq-section summary{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  cursor:pointer; list-style:none;
  font-size:15.5px; font-weight:600; color:var(--violet-sombre); line-height:1.45;
}
.faq-section summary::-webkit-details-marker{display:none}
.faq-section .chev{color:var(--violet); font-size:11px; flex:none; transition:transform .18s}
.faq-section details[open] .chev{transform:rotate(180deg)}
.faq-section details p{margin:11px 0 0; font-size:14.5px; line-height:1.65; color:#5b4a61; max-width:74ch}
.faq-section code{font-size:13.5px; background:var(--fond); border:1px solid var(--trait); padding:1px 5px; border-radius:4px}
/* Le bouton vit dans le sommaire, sous les liens : c'est une commande de page,
   pas une réponse. */
.faq-tout{
  margin-top:8px; padding:14px 0 0; border:0; border-top:1px solid var(--trait);
  font:inherit; font-size:13px; font-weight:500; color:var(--violet);
  background:transparent; text-align:left; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.faq-tout:hover{color:var(--violet-sombre)}
@media (prefers-reduced-motion:reduce){ .faq-section .chev{transition:none} }

/* ═══════════════════════════════════════════════════════════════════════════
   LE RESPONSIVE, D'APRÈS design/site/Accueil.dc.html

   ⚠️ CES BLOCS SONT EN FIN DE FEUILLE, ET C'EST STRUCTUREL. À spécificité
   égale, c'est la règle la PLUS TARDIVE qui gagne : posés au milieu du
   fichier, trois d'entre eux perdaient contre des bases définies plus bas —
   `.hero-fiche` (ligne 1048), `.carte-parcours .tuiles` (1520) et
   `.etapes .etape` (1616). Les règles étaient écrites et n'étaient appliquées
   nulle part. Mesuré au simulateur : la fiche gardait ses marges et son
   arrondi sur un téléphone, alors que la maquette la veut pleine largeur.

   ⚠️ Deux seuils, et deux seulement — `SEUIL = 1120` et `MOBILE = 640` de la
   maquette. Toute valeur intermédiaire serait un arbitrage refait sans elle.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ---------- Le repli à une colonne, d'après design/site/Accueil.dc.html ------ */
/*
 * ⚠️ 1120 px, et non 900. C'est le `SEUIL` de la maquette, et elle le mesure :
 * « à 1080 px la carte du champ tombe à 508 px et l'adresse est encore coupée
 * de 13 px ; c'est propre à partir de 1120, soit la largeur du site ». À 900,
 * l'adresse restait donc coupée sur toute la bande de 900 à 1120.
 *
 * ⚠️ La maquette n'a que DEUX seuils — 1120 et 640. Toute valeur intermédiaire
 * ajoutée ici serait un arbitrage refait sans elle.
 */
@media (max-width:1120px){
  /* ⚠️ `.hero.inverse` EST REPRIS ICI, et ce n'est pas une redondance : il pose
     ses colonnes avec une spécificité de (0,2,0) contre (0,1,0) pour `.hero`.
     Écrite sur `.hero` seul, la règle de repli perdait — quel que soit l'ordre
     des blocs, et quelle que soit la requête média. Le hero restait donc en
     DEUX colonnes sur un téléphone : mesuré à 393 px, le plan tenait dans
     167 px à gauche et le titre se coupait sur six lignes à droite. */
  .hero,
  .hero.inverse{grid-template-columns:minmax(0,1fr); gap:28px; margin-top:32px}
  /* En pile : le titre, puis le plan, puis la saisie (maquette, `appliquerMobile` ; Benoist, 21/10,
     decisions/hero-mobile-suit-maquette-2110). La colonne s'efface pour que la fiche, sa sœur, vienne
     s'intercaler entre ses blocs : `order` ne franchit pas un conteneur. Ses 16 px d'écart passent ainsi
     à la grille du hero, qui les porte elle-même (28 px ici, 16 au téléphone, comme la maquette).
     ⚠️ `.hero.inverse` est repris pour la spécificité : son `order:1` de la fiche gagnerait sinon. */
  .hero-texte{display:contents}
  .hero-texte > *{order:3}
  .hero-texte > :first-child{order:1}
  .hero.inverse .hero-fiche{order:2}
  /* ⚠️ En mode travail, `modeTravail()` ajoute la carte de confirmation À LA FIN de la colonne : avec l'`order:3` de
     ses sœurs, elle passait sous le plan (mesuré à 820 px : fiche à 24 px, carte à 252 px), et le choix de la
     parcelle retombait sous la ligne de flottaison. Le titre y est masqué : la carte prend sa place, avant la fiche. */
  body.en-travail .hero-texte #carte-confirmation{order:1}
}

/* ---------- A3 au téléphone (maquette, mise à jour du 21/10) ---------- */
@media (max-width:639.98px){
  /* La confirmation passe SOUS le plan : on voit d'abord la parcelle, puis on la confirme. ⚠️ Au téléphone
     seulement : entre 640 et 1120 rien ne colle « Oui » au bas de l'écran, et le choix retombait sous la
     ligne de flottaison (f62a2591). Ici la barre collée ci-dessous le garde sous le pouce.
     Écart assumé à la maquette, accepté par build-design le 22/10 : tablette, ordre de f62a2591 conservé ;
     la maquette passe la confirmation sous la carte dès 1120 px. */
  body.en-travail .hero-texte #carte-confirmation{order:3}
  /* Les deux boutons sur UNE ligne, resserrés : « Oui » prend la place, « Changer d'adresse » la sienne. */
  .confirme-actions{flex-wrap:nowrap}
  .confirme-actions .bouton{font-size:14px; padding:12px 14px; white-space:nowrap; flex:1 1 auto; text-align:center}
  .confirme-actions .bouton.secondaire{padding:11px 14px; flex:none}
  /* Collés au bas de l'écran tant que la parcelle reste à confirmer (`app.js`, `collerLaConfirmation`). */
  .confirme-actions.collee{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    background:#fff; border-top:1px solid #e8e2ec; box-shadow:0 -8px 24px rgba(78,51,85,.10);
  }
}

/* ⚠️ 640 px et non 620 : c'est le `MOBILE = 640` de la maquette. Entre les
   deux, un écran de 630 px gardait les marges de 32 px, soit 10 % de sa
   largeur de chaque côté. */
@media (max-width:640px){
  /* La maquette resserre le hero à `16px 20px 32px` — « 32 px de chaque côté
     sur 393, c'est 16 % ». La saisie et les capsules venant après la fiche
     (bloc 1120 ci-dessus), les 32 px du bas sont du dégradé sous elles. Le
     `28px 20px 0` du 18/09, qui arrêtait le dégradé au bord de la fiche
     quand elle était le dernier élément, est remplacé le 21/10
     (decisions/hero-mobile-suit-maquette-2110). */
  .entete-int{padding:16px 20px 32px}
  /* ⚠️ `margin-top:0` sur le hero, et ce n'est pas un réglage à l'œil : la
     maquette pose son écart entre la barre et le contenu une seule fois, en
     marge interne du hero. Ici il s'additionnait — marge interne de l'en-tête
     PLUS les 32 px de marge du hero : Benoist l'avait vu comme « 20 px de
     trop ». C'est le total qui compte, et il vaut les 16 px de la maquette. */
  .hero,
  .hero.inverse{margin-top:0; gap:16px}
  .bande{--pad-haut-bande:52px; padding:52px 20px}
  .appel{padding:0 20px 52px}
}

/* ---------- Le téléphone, d'après design/site/Accueil.dc.html ---------- */
/*
 * ⚠️ 640 px, et un seul seuil. C'est `MOBILE = 640` de la maquette, dont le
 * commentaire dit pourquoi : « 640 px couvre tous les téléphones en portrait ».
 * Ces règles étaient réparties sur 480 et 620 px — entre les deux, un écran de
 * 500 px gardait la mise en forme large.
 *
 * ⚠️ Les valeurs viennent de la maquette, pas d'un arbitrage refait ici. La
 * référence se relit par `DesignSync` (voir design/LISEZ-MOI.md), jamais d'une
 * capture d'écran : ces nombres ne se retrouvent pas à l'œil.
 */
@media (max-width:640px){
  /* Le champ prend toute la largeur, le bouton passe dessous. La maquette
     mesure ce qu'il en coûtait : « à 393 px, un bouton en ligne ne laisse que
     180 px pour saisir une adresse ». */
  .hero-recherche{flex-direction:column; align-items:stretch; gap:8px}
  /* ⚠️ `flex:none` sur le champ, et ce n'est pas cosmétique : en colonne, son
     `flex:1 1 auto` fait du flex-basis une HAUTEUR. La maquette a payé le même
     défaut avec un flex-basis de 120 px, qui donnait un bloc de 120 px de haut. */
  .hero-recherche .champ{flex:none}
  .hero-recherche .bouton{flex:none; width:100%}
  /* 16 px : en dessous, iOS zoome sur le champ à la mise au point. */
  .hero-recherche input{font-size:16px; padding:13px 14px}

  /* Deux colonnes de deux, jamais une pile de quatre. La maquette : « Zone,
     contenance, servitudes et document sont courts — une pile de quatre
     repousse l'action hors de l'écran ». Le `auto-fit` sur 180 px n'en tenait
     qu'une seule sur les 353 px utiles d'un écran de 393. */
  .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* ⚠️ « Ou une référence cadastrale directe, au format 17300 CL 518 » tient
     sur UNE ligne à 11 px, et pas un de plus : MESURÉ dans Chromium à 393 px,
     la ligne fait 345 px pour 353 utiles. À 12 px elle en demandait 380 et se
     coupait après « au format », laissant la référence seule au-dessous. */
  .hero-aide{font-size:11px}
  .hero-aide code{font-size:10px; padding:2px 5px}

  /* Les trois capsules restent dans leur bloc, sous la saisie, comme dans la
     maquette ; `app.js` leur donne au téléphone le libellé court de
     `data-court`.

     ⚠️ `nowrap` ne suffirait pas seul : MESURÉ, les libellés longs de la
     maquette pèsent 443 px sur une ligne même à 11 px avec un padding serré.
     Les tenir sur une ligne IMPOSE le libellé court. Les valeurs sont celles
     CALCULÉES de la maquette Claude Design du 21/10 sous 640 px (gageTaille,
     gagePad, gageGap de Accueil.dc.html) : 10,5 px, padding 5 px 9 px, écart
     6 px. L'app gardait 12 px et 6 px 10 px — à 12 px « Sources officielles »
     demandait 353 px pour 353 utiles à 393 px (MESURÉ) et débordait à 375 ;
     aux valeurs de la maquette les trois capsules font 312 px. */
  .hero-gages{flex-wrap:nowrap; gap:6px}
  .hero-gages span{font-size:10.5px; padding:5px 9px; white-space:nowrap}

  /* Échelle typographique du téléphone, un cran sous l'écran large. Le texte
     courant reste à 15,5 px : « en dessous, la lecture d'un paragraphe de six
     lignes devient pénible ». */
  /* 26 px, la valeur de la maquette (Accueil.dc.html, `appliquerMobile`). Le 30 px du 18/09 (037b124c) ne citait
     aucune source. */
  .entete h1{font-size:26px}
  .entete p.accroche{font-size:15.5px}

  /* ⚠️ La production ne montre que l'étape EN COURS : « sept lignes sur un
     téléphone forment un mur sans information — la jauge et le nom de l'étape
     suffisent à dire où en est le calcul ». En fin de production plus aucune
     n'est active : la dernière tient alors lieu de compte rendu. */
  .etapes .etape{display:none}
  .etapes .etape.active{display:flex}
  /* ⚠️ `:not(:has(...))` et non un simple `:last-child` : celui-ci affichait
     DEUX étapes pendant la production — celle en cours et la dernière. La
     dernière ne tient lieu de compte rendu que lorsque plus aucune n'est
     active, c'est-à-dire une fois le dossier produit. */
  .etapes:not(:has(.etape.active)) .etape:last-child{display:flex}

  /* La fiche passe en bande : sans bords latéraux, l'ombre réduite à un filet
     du haut, 10 px de plus sous le titre (maquette, `appliquerMobile` ; Benoist,
     21/10, decisions/fiche-mobile-en-bande-maquette-2110). Elle garde son
     arrondi et les 20 px de l'en-tête, comme la maquette. Le 18/09 (e3400990),
     Benoist l'avait gardée encadrée, après l'avoir vue pleine largeur : c'est
     la maquette qui prévaut depuis.

     ⚠️ Cette règle reste ICI, en fin de feuille : sans elle à cet endroit,
     rien ne garde le bloc mobile de `.hero-fiche` après sa base de la ligne
     958, et le prochain réglage mobile de la fiche retomberait dans le défaut
     d'ordre source qui rendait trois blocs inopérants. */
  .hero-fiche{margin-inline:0; margin-top:10px; border-left:0; border-right:0;
    box-shadow:0 -1px 0 rgba(78,51,85,0.06)}

  /* ═══ Réglages du téléphone demandés par Benoist le 18/09/2026 ═══ */

  /* ⚠️ La ligne de la référence cadastrale disparaît du téléphone : les trois
     capsules, posées sous la fiche, disent la même chose — c'est gratuit, les
     sources sont citées, le PDF est daté — et le format `17300 CL 518` ne se
     saisit pas au pouce. Elle reste sur écran large, où la place ne coûte
     rien. */
  .hero-aide{display:none}

  /* Les pages d'exemple sur deux colonnes : en file, il fallait quatre écrans pour les voir toutes. */
  .planches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exemple-entier{padding:18px; gap:10px}
  .exemple-entier-titre{font-size:14px}
  .exemple-entier-poids{font-size:12px}
  .exemple-entier svg{width:32px; height:37px}

  /* Une colonne, cartes resserrées : à deux, le texte tombait à deux ou trois mots par ligne (maquette). */
  .grille-rubriques{grid-template-columns:minmax(0,1fr); gap:10px}
  .rubrique{padding:18px 20px; row-gap:10px; align-items:center}
  .rubrique .pastille{margin-top:6px}
  /* ⚠️ L'accordéon n'existe que si `app.js` a posé `.accordeon` sur la grille : sans script, les huit rubriques
     restent ouvertes, plutôt que fermées sans moyen de les ouvrir. Une seule ouverte à la fois. */
  .grille-rubriques.accordeon .rubrique{cursor:pointer}
  .grille-rubriques.accordeon .rubrique:not(.ouverte){grid-template-rows:auto; row-gap:0}
  .grille-rubriques.accordeon .rubrique:not(.ouverte) > p,
  .grille-rubriques.accordeon .rubrique:not(.ouverte) > .pastille{display:none}
  /* Le chevron suit le numéro et pivote à l'ouverture : c'est lui qui dit que la carte s'ouvre. */
  .grille-rubriques.accordeon .rubrique-num{
    padding-right:22px; background:no-repeat right center / 12px 12px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236f4b77' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .grille-rubriques.accordeon .rubrique.ouverte .rubrique-num{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 7.5 6 4l3.5 3.5' fill='none' stroke='%236f4b77' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .grille-rubriques.accordeon .rubrique h3:focus-visible{outline:3px solid var(--lavande); outline-offset:3px; border-radius:4px}

  /* ⚠️ Les trois étapes en carrousel, et non en pile : empilées, la troisième
     — celle qui porte la barrière du paiement — tombait à deux écrans de la
     première, et personne ne descendait jusque-là. Le défilement est natif,
     avec accrochage : pas de script, donc rien à réparer si l'un échoue. */
  .parcours{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; column-gap:12px;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    scroll-padding-inline:20px; padding-bottom:6px;
    /* Le carrousel sort des marges pour que la carte suivante s'annonce au
       bord de l'écran ; le `scroll-padding` la recale une fois accrochée. */
    margin-inline:-20px; padding-inline:20px;
    scrollbar-width:none;
  }
  .parcours::-webkit-scrollbar{display:none}
  /* `always` : le geste fait glisser UNE carte à la fois, sans en sauter (maquette). */
  .parcours li{scroll-snap-align:start; scroll-snap-stop:always; padding:22px}

  /* Les trois offres défilent du même geste que les étapes, la suivante dépassant à droite (maquette,
     `grilleTarifs`) : en pile, l'abonnement pro tombait à deux écrans du prix à l'unité. */
  .grille-offres{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; column-gap:12px;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    scroll-padding-inline:20px; padding-bottom:6px;
    margin-inline:-20px; padding-inline:20px;
    scrollbar-width:none;
  }
  .grille-offres::-webkit-scrollbar{display:none}
  .grille-offres > .offre{scroll-snap-align:start; scroll-snap-stop:always}

  /* ⚠️ Les profils se replient : le nom et le moment restent, le reste se
     déplie d'une flèche. Cinq profils dépliés faisaient à eux seuls un écran
     et demi entre l'exemple et les tarifs. */
  /* ⚠️ Le nom et le moment gardent leurs DEUX lignes — « Marchand de biens »
     puis « Avant de faire une offre » —, et la flèche se pose à droite en
     regard des deux. En ligne, la flèche était rejetée sous le moment et le
     repère de dépliage se retrouvait au milieu du bloc. */
  .profil > summary{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    column-gap:12px; align-items:center;
    cursor:pointer; padding:15px 20px;
  }
  .profil-nom, .profil-quand{grid-column:1}
  .profil .chevron{
    display:block; grid-column:2; grid-row:1 / span 2; align-self:center;
    font-size:10px; color:var(--encre-douce); transition:transform .18s ease;
  }
  .profil[open] .chevron{transform:rotate(180deg)}
  .profil[open] > summary{padding-bottom:4px}
  .profil-quoi{padding:0 20px 16px}
}

@media (prefers-reduced-motion:reduce){ .profil .chevron{transition:none} }

/* ---------- L'espace client ---------- */
/* ⚠️ Même gouttière que les pages de fond, sans le bandeau dégradé : l'espace
   client n'est pas une page de discours, il n'a rien à annoncer avant sa
   liste. Le dessin le pose de même — en-tête blanc, puis le contenu. */
/* 24 px en tête et non 44 : Benoist a fait remonter la page de 20 px, comme le
   hero de l'accueil le même jour. */
/* ⚠️ `margin:0 auto 64px`, PAS `0 auto` : la règle de base `main{}` pose
   64 px avant le pied, mais le 2-valeurs écrasait aussi le bas en l'annulant.
   Sans lui, le dernier bloc de l'onglet ouvert touchait le filet du pied —
   sur Factures vide, sa propre bordure (1px, même couleur `--trait`) se
   collait à celle du pied et se lisait comme UN second trait. */
.page-compte{
  max-width:calc(var(--largeur) + 64px); margin:0 auto 64px;
  padding:clamp(14px,2.4vw,24px) 32px 0;
  display:flex; flex-direction:column; gap:22px;
}
.compte-tete{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px 28px;
  flex-wrap:wrap; border-bottom:1px solid var(--trait); padding-bottom:14px;
}
.compte-tete-gauche{display:flex; flex-direction:column; gap:14px}
.compte-dire{display:flex; flex-direction:column; gap:7px}
.compte-tete h1{
  margin:0; font-size:clamp(25px,2.7vw,32px); font-weight:600;
  letter-spacing:-.018em; line-height:1.16; color:var(--violet-sombre);
}
.compte-chiffres{display:flex; gap:12px; flex-wrap:wrap}
.compte-chiffres[hidden]{display:none}
.compte-chiffre{
  background:var(--papier); border:1px solid var(--trait); border-radius:12px;
  padding:13px 20px; display:flex; flex-direction:column; gap:1px; min-width:130px;
}
.compte-chiffre .k{
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--encre-douce);
}
.compte-chiffre .v{
  font-size:23px; font-weight:700; color:var(--violet-sombre); line-height:1.25;
  font-variant-numeric:tabular-nums;
}

.compte-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px}
.compte-carte{
  background:var(--papier); border:1px solid var(--trait); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
}
/* La vignette est à fleur de carte, comme au dessin : le corps porte le
   retrait, pas la carte. */
.compte-carte > :not(.compte-vignette){margin-inline:20px}
.compte-carte > .compte-carte-tete{margin-top:18px}
.compte-carte > :last-child{margin-bottom:18px}
.compte-carte > .compte-pastilles,
.compte-carte > .compte-note{margin-top:13px}
.compte-vignette{
  height:150px; background:var(--fond); border-bottom:1px solid var(--trait);
  display:grid; place-items:center;
}
.compte-vignette svg{display:block; width:100%; height:100%}
/* ⚠️ Une vignette VIDE reste une vignette : sans hauteur réservée, les cartes
   d'un dossier sans contour — produit avant que la géométrie ne soit gardée —
   remonteraient de 150 px et la grille deviendrait un escalier. */
.compte-vignette.vide{background:repeating-linear-gradient(135deg,var(--fond) 0 8px,var(--papier) 8px 16px)}
.compte-trace{fill:rgba(111,75,119,.16); stroke:var(--violet); stroke-width:2.4; stroke-linejoin:round}
.compte-identite{display:flex; flex-direction:column; gap:2px; min-width:0}
.compte-adresse{
  display:block; font-size:13.5px; color:var(--violet-sombre); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis;
}
/* Une entrée dont le PDF a disparu reste lisible, mais ne se présente plus
   comme une pièce qu'on peut prendre. */
.compte-carte.eteinte .compte-ref{color:var(--indisponible)}
.compte-carte-tete{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.compte-ref{display:block; font-size:16.5px; font-weight:600; color:var(--violet-sombre)}
.compte-lieu{display:block; font-size:13.5px; color:var(--encre-douce)}
.compte-marque{
  flex:none; font-size:11px; font-weight:600; padding:4px 9px; border-radius:6px; white-space:nowrap;
}
.compte-marque.conforme{color:var(--conforme); background:var(--conforme-fond)}
.compte-marque.vigilance{color:var(--vigilance); background:var(--vigilance-fond)}
.compte-marque.indisponible{color:var(--indisponible); background:var(--indisponible-fond)}
.compte-pastilles{display:flex; gap:7px; flex-wrap:wrap}
.compte-pastilles:empty{display:none}
.compte-note{margin:0; font-size:12.5px; line-height:1.55; color:var(--encre-douce)}
/* `margin-top:auto` : les cartes d'une même rangée alignent leur pied, quelle
   que soit la longueur de ce qui précède. */
.compte-pied{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:auto; padding-top:13px; border-top:1px solid var(--fond);
}
.compte-quand{font-size:12px; color:var(--encre-douce); font-variant-numeric:tabular-nums}
.compte-actions{display:flex; gap:7px}

.compte-nouveau{
  border:1.5px dashed var(--lavande); border-radius:14px; padding:26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:11px; text-align:center; min-height:200px; text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}
.compte-nouveau:hover{border-color:var(--violet); background:var(--papier)}
.compte-plus{
  width:42px; height:42px; border-radius:999px; background:var(--lavande);
  color:var(--violet-sombre); display:grid; place-items:center;
  font-size:22px; font-weight:600; line-height:1;
}
.compte-nouveau-titre{font-size:15.5px; font-weight:600; color:var(--violet-sombre)}
.compte-nouveau-dire{font-size:13px; line-height:1.5; color:var(--encre-douce); max-width:28ch}

/* ⚠️ Caché par défaut : il ne vaut que sous 640 px, où le bouton de la barre
   s'efface (voir `.nav-site.connecte > a.bouton.cta`) — à toute autre
   largeur, « Créer un dossier » reste dans la barre, pas besoin d'un double. */
.compte-flottant{display:none}
@media (max-width:640px){
  .compte-grille{grid-template-columns:minmax(0,1fr)}

  /* ---------- Le bouton flottant, maquette Espace client (05/10/2026) ---------- */
  /* ⚠️ Relevé par build-design : `text-decoration:none`, sans quoi le texte
     ressort souligné — la règle de base (`a{color:var(--violet)}`) ne pose
     que la couleur, jamais le soulignement par défaut du navigateur, et les
     autres boutons de la page le retirent chacun à leur niveau. */
  .compte-flottant{
    position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:40;
    display:inline-flex; align-items:center; gap:9px;
    font-size:15px; font-weight:600; color:#ffffff; background:var(--violet);
    padding:14px 20px; border-radius:999px; text-decoration:none;
    box-shadow:0 2px 4px rgba(78,51,85,.15), 0 12px 28px rgba(111,75,119,.32);
  }
  .compte-flottant:hover{background:var(--violet-sombre); color:#fff}

  /* ---------- /compte, sous 640 px : titre, puis compteurs, puis onglets ---------- */
  /* ⚠️ Relevé par build-design : la maquette met les DEUX compteurs en grille
     juste sous le titre, puis les onglets sur une rangée défilante SANS
     « Mon profil » (déjà dans le menu du compte) — le lot gardait l'ordre
     ordinateur (onglets avant les compteurs) et les quatre onglets. */
  .page-compte{padding:22px 16px 96px}
  .compte-tete{flex-direction:column; align-items:stretch; gap:16px}
  /* `display:contents` : le titre et les onglets deviennent des enfants
     directs de `.compte-tete`, pour se glisser entre les compteurs via
     `order` — sans lui, ils resteraient groupés dans `.compte-tete-gauche`,
     avant le bloc des compteurs quel que soit l'ordre demandé. */
  .compte-tete-gauche{display:contents}
  .compte-tete h1{order:1}
  .compte-chiffres{
    order:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
    margin-left:0; padding-bottom:0;
  }
  .compte-chiffre{min-width:0; padding:11px 14px}
  .compte-onglets{
    order:3; flex-wrap:nowrap; overflow-x:auto; gap:22px;
    margin-inline:-16px; padding-inline:16px; scrollbar-width:none;
  }
  .compte-onglets::-webkit-scrollbar{display:none}
  .compte-onglets a{white-space:nowrap; flex:none}
  /* Déjà dans le menu du compte (voir la barre) : pas la peine d'un
     cinquième onglet qui ferait défiler les quatre autres pour rien. */
  .compte-onglets a[href="#profil"]{display:none}
}

/* ---------- L'espace client : onglets, crédits, factures, profil ---------- */
/* ⚠️ Des LIENS d'ancre et non des boutons : l'onglet ouvert est dans l'adresse,
   donc il survit à un rechargement et se partage. `aria-current` dit lequel est
   ouvert — une couleur de soulignement ne se lit pas à l'écran vocal. */
/* ⚠️ Plus de filet ICI depuis nav-espace-client (05/10/2026) : c'est
   `.compte-tete` qui le porte désormais, pour qu'il coure sous le titre ET
   les onglets ET les compteurs, d'un seul tenant. */
.compte-onglets{display:flex; align-items:center; gap:4px 30px; flex-wrap:wrap}
.compte-onglets a{
  font-size:15px; font-weight:500; color:var(--encre-douce); text-decoration:none;
  padding:12px 2px; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.compte-onglets a:hover{color:var(--violet-sombre); border-bottom-color:var(--lavande)}
.compte-onglets a.actif{color:var(--violet-sombre); font-weight:600; border-bottom-color:var(--violet)}
.compte-vue[hidden]{display:none}
/* La phrase décrit la vue ouverte : elle se lit entre les onglets et le
   contenu, à la largeur d'une ligne de texte. */
.compte-resume{margin:0; font-size:15px; line-height:1.6; color:var(--encre-douce); max-width:78ch}
.compte-titre{margin:0 0 12px; font-size:17px; font-weight:600; color:var(--violet-sombre)}
.compte-vue .compte-titre:not(:first-child){margin-top:28px}
.compte-vide{
  margin:0; padding:22px 24px; font-size:14px; line-height:1.6; color:var(--encre-douce);
  background:var(--papier); border:1px solid var(--trait); border-radius:12px;
}

.compte-solde{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:var(--papier); border:1px solid var(--trait); border-radius:14px; padding:20px 24px;
}
.compte-solde-chiffre{display:flex; flex-direction:column; gap:1px; flex:none}
.compte-solde-chiffre .k{
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--encre-douce);
}
.compte-solde-chiffre .v{
  font-size:34px; font-weight:700; color:var(--violet-sombre); line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.compte-solde-dire{margin:0; flex:1 1 320px; font-size:14px; line-height:1.6; color:var(--encre-douce)}

.compte-packs{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.compte-pack{
  position:relative; background:var(--papier); border:1px solid var(--trait); border-radius:14px;
  padding:22px 24px; display:flex; flex-direction:column; gap:9px;
}
.compte-pack.en-avant{border-color:var(--violet); box-shadow:0 8px 28px rgba(78,51,85,.10)}
.compte-pack h3{margin:0; font-size:16px; font-weight:600; color:var(--violet-sombre)}
.compte-pack-prix{margin:0; font-size:24px; font-weight:700; color:var(--violet-sombre); line-height:1.2}
.compte-pack-dire{margin:0; font-size:13.5px; line-height:1.55; color:var(--encre-douce)}
/* Le bouton se cale en bas : les trois cartes alignent leur action. */
.compte-pack .bouton{margin-top:auto; align-self:flex-start}

.compte-table{width:100%; border-collapse:collapse; background:var(--papier);
  border:1px solid var(--trait); border-radius:12px; overflow:hidden; font-size:14px}
.compte-table th,.compte-table td{padding:11px 16px; text-align:left; border-bottom:1px solid var(--fond)}
.compte-table th{
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--encre-douce); background:var(--fond);
}
.compte-table tr:last-child td{border-bottom:0}
/* Alignés à droite et chasse fixe : deux nombres qui ne s'alignent pas ne se
   comparent pas d'une ligne à l'autre. */
.compte-table .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.compte-table .droite{text-align:right}
.compte-table .plus{color:var(--conforme); font-weight:600}
.compte-table .moins{color:var(--encre-douce)}

.compte-colonnes{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; align-items:start}
.carte-compte{
  background:var(--papier); border:1px solid var(--trait); border-radius:14px; padding:22px 24px;
}
.compte-faits{margin:0 0 18px; display:flex; flex-direction:column; gap:10px}
.compte-faits > div{display:flex; justify-content:space-between; gap:14px; align-items:baseline}
.compte-faits dt{
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--encre-douce); flex:none;
}
.compte-faits dd{margin:0; font-size:14.5px; color:var(--violet-sombre); text-align:right; min-width:0;
  overflow-wrap:anywhere}
.compte-forme{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.compte-forme .champ-contact{width:100%}
.compte-dire-doux{margin:0 0 14px; font-size:13.5px; line-height:1.6; color:var(--encre-douce)}

/* ---------- Le profil : identité de facturation ---------- */
.compte-profil{display:flex; flex-direction:column; gap:16px; max-width:820px}
.compte-profil .carte-compte{display:flex; flex-direction:column; gap:14px}
/* ⚠️ Deux boutons radio et non une liste déroulante : deux choix se lisent d'un
   coup, et le type commande tout le reste du formulaire. */
.compte-choix{display:flex; gap:10px; flex-wrap:wrap}
.compte-choix label{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--trait); border-radius:11px; padding:11px 16px;
  font-size:14.5px; color:var(--violet-sombre); background:var(--fond);
}
.compte-choix label:has(input:checked){border-color:var(--violet); background:var(--lavande-pale); font-weight:600}
.compte-choix input{accent-color:var(--violet); margin:0}
.compte-duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
/* Le code postal tient en cinq chiffres : lui donner la moitié d'une ligne
   laisse croire qu'on y écrit autre chose. */
.compte-duo .compte-cp{max-width:170px}
.compte-pro{display:flex; flex-direction:column; gap:14px}
.compte-pro[hidden]{display:none}
.champ-contact small{font-weight:400; color:var(--encre-douce); text-transform:none; letter-spacing:0}
.compte-verdict{display:block; margin-top:6px; font-size:12.5px; color:var(--encre-douce); line-height:1.45}
.compte-profil-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.compte-profil-actions .compte-dire-doux{margin:0}
.compte-profil + .compte-colonnes{margin-top:28px}

/* ---------- La fenêtre du mot de passe (sans maquette, Benoist 01/10/2026,
   decisions/modale-mdp-sans-design) ---------- */
/* ⚠️ Aucune couleur ni aucun rayon neufs : le voile reprend EXACTEMENT les
   propriétés de `.visionneuse` (plus haut dans ce fichier) sous son propre nom
   — lui donner la classe `.visionneuse` aurait réutilisé un sélecteur qui
   désigne la grande vue de la parcelle, pas une fenêtre de formulaire. Le
   panneau, lui, EST `.carte-compte` (voir le HTML) : `.fenetre-carte` n'ajoute
   que ce qu'une carte ordinaire n'a pas besoin de savoir — se centrer dans un
   voile plein écran et ne pas déborder dessous. */
.fenetre{
  position:fixed; inset:0; z-index:100; display:flex; padding:24px;
  background:rgba(30,22,34,.93); backdrop-filter:blur(3px);
}
.fenetre-carte{margin:auto; width:100%; max-width:460px; max-height:calc(100vh - 48px); overflow:auto}
.fenetre-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap}

/* ---------- La barrière : compte et paiement, dans la carte ---------- */
/* ⚠️ Elle prend la place du pied de la carte, jamais celle d'une page : le
   visiteur garde ses quatre tuiles sous les yeux. Cotes reprises de
   `CarteApercu.dc.html`. */
.barriere[hidden]{display:none}
.barriere-tete{
  border-top:1px solid var(--trait);
  background:linear-gradient(180deg,#f6f1f8 0%,var(--fond) 100%);
  padding:22px 24px 8px; display:flex; flex-direction:column; gap:8px;
}
.barriere-rang{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet);
}
.barriere-tete h3{
  margin:0; font-size:clamp(20px,2.2vw,25px); font-weight:700;
  letter-spacing:-.02em; line-height:1.16; color:var(--violet-sombre);
}
.barriere-tete p{margin:0; font-size:15px; line-height:1.55; color:#5b4a61; max-width:74ch}

/* Les filets sont le fond du conteneur vu par des gouttières d'un pixel. */
.barriere-grille{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px; background:var(--trait); border-top:1px solid var(--trait); margin-top:14px;
}
.barriere-vue{background:var(--fond); padding:22px 24px; display:flex; flex-direction:column; gap:14px}
.barriere-vue[hidden]{display:none}
/* ⚠️ `grid-column:1/-1` sur les vues larges. Sans cela, une vue SEULE dans une
   grille à deux pistes occupe la première et laisse la seconde vide : le fond
   gris du conteneur se voit alors en aplat sur la moitié de la carte. */
.barriere-large{grid-column:1 / -1}
.barriere-rangee{
  flex-direction:row; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.barriere-champ{display:flex; flex-direction:column; gap:6px}
.barriere-champ > span{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet);
}
.barriere-champ input, .barriere-champ select{
  width:100%; font:inherit; font-size:16px; color:var(--encre); padding:14px;
  border:1.5px solid var(--trait); border-radius:11px; background:var(--papier);
}
.barriere-champ input:focus{outline:none; border-color:var(--lavande); box-shadow:0 0 0 4px rgba(196,166,207,.22)}
.barriere-champ input:disabled{background:var(--fond); color:var(--encre-douce); cursor:not-allowed}
/* ⚠️ La boîte qui reçoit l'iframe de Stripe (Card Element) : même habillage
   que les autres champs de la barrière, pour que rien ne trahisse qu'il ne
   nous appartient pas. `--focus` est posée en JS sur les événements `focus`/
   `blur` de Stripe, qu'aucun `:focus` CSS ne peut voir à travers l'iframe. */
.barriere-carte-stripe{
  width:100%; padding:14px; border:1.5px solid var(--trait); border-radius:11px; background:var(--papier);
}
.barriere-carte-stripe--focus{border-color:var(--lavande); box-shadow:0 0 0 4px rgba(196,166,207,.22)}
.barriere-carte-erreur{margin:0; font-size:13px; color:var(--alerte); min-height:1.4em}

/* ⚠️ Trois Stripe Elements séparés (numéro, expiration, cryptogramme) depuis
   le lot `saisie-cb-design` (maquette Claude Design, 05/10/2026), au lieu
   d'un Card Element unique : « 12/28 123 » ne se lisait que par habitude,
   sans libellé. Chaque boîte de montage garde le même habillage que
   `.barriere-carte-stripe` — même raison : rien ne doit trahir qu'elle ne
   nous appartient pas. */
.barriere-carte-bloc{display:flex; flex-direction:column; gap:7px; width:100%; max-width:520px}
.barriere-carte-entete{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.barriere-carte-titre{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet);
}
.barriere-carte-logos{display:flex; gap:5px}
.barriere-carte-logo{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--indisponible);
  background:var(--papier); border:1px solid var(--trait); padding:3px 7px; border-radius:5px;
}
.barriere-carte-boite{
  border:1.5px solid var(--trait); border-radius:12px; background:var(--papier); overflow:hidden;
}
.barriere-carte-boite--focus{border-color:var(--mauve); box-shadow:0 0 0 4px rgba(196,166,207,.22)}
.barriere-carte-numero{padding:11px 16px; display:flex; align-items:center; gap:14px}
.barriere-carte-numero svg{flex:none; display:block; color:var(--violet)}
.barriere-carte-champ{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.barriere-carte-champ > span{
  font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--encre-douce);
}
/* La boîte où Stripe monte CHAQUE iframe (une par champ) — même hauteur de
   ligne que le texte d'exemple de la maquette, pour que les trois champs
   s'alignent sans sursaut au chargement. */
.barriere-carte-montage{min-height:21px}
.barriere-carte-rangee{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-top:1px solid var(--trait)}
.barriere-carte-rangee > div{padding:10px 16px}
.barriere-carte-rangee > div:first-child{border-right:1px solid var(--trait)}
/* ⚠️ `flex-direction:row`, PAS la colonne de `.barriere-carte-rangee > div` :
   relevé par build-design (05/10/2026) — la cellule Cryptogramme empilait
   son libellé et « au dos » au lieu de les mettre côte à côte, la règle
   générale (0,1,1) l'emportant sur `.barriere-carte-cvc` seule (0,1,0). */
.barriere-carte-rangee > .barriere-carte-cvc{display:flex; flex-direction:row; align-items:center; gap:10px}
.barriere-carte-cvc > .barriere-carte-champ{flex:1; min-width:0}
.barriere-carte-dos{font-size:11.5px; color:var(--encre-douce); flex:none}
.barriere-carte-aide{margin:0; font-size:12px; line-height:1.5; color:var(--encre-douce)}
/* ⚠️ AUCUN bouton en pleine largeur : ils sont dimensionnés par leur libellé.
   Dans une colonne flex, `align-self` est la seule façon de les en empêcher.
   ⚠️ La règle vaut AUSSI pour les liens posés directement dans la colonne.
   `.lien-souligne` souligne par une `border-bottom`, donc par la BOÎTE et non
   par le texte : étiré, « Mot de passe oublié » tirait un trait d'un bord à
   l'autre de la colonne. Le sélecteur vise les enfants DIRECTS — un lien à
   l'intérieur d'un paragraphe est en flux, et doit le rester. */
.barriere-vue .bouton,
.barriere-vue > a{align-self:flex-start}
.barriere-note{margin:0; font-size:13px; line-height:1.5; color:var(--encre-douce)}
.barriere-note:last-child{margin-top:auto}

.barriere-rappel{
  border-radius:10px; padding:12px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:13.5px; line-height:1.45;
}
.barriere-rappel > span{flex:1 1 180px; min-width:0}
.barriere-rappel.conforme{background:var(--conforme-fond); color:var(--conforme)}
.barriere-rappel.information{background:var(--lavande-pale); color:var(--violet-sombre)}
.barriere-changer{
  flex:none; font:inherit; font-size:12.5px; font-weight:500; color:inherit;
  background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}

.barriere-entete-large{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.barriere-entete-large .barriere-rappel{flex:1 1 320px}
.barriere-prix{flex:none; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.barriere-montant{font-size:28px; font-weight:700; color:var(--violet-sombre); letter-spacing:-.022em}
.barriere-regime{font-size:12.5px; color:var(--encre-douce)}

.barriere-bloc{display:flex; flex-direction:column; gap:7px}
.barriere-intitule{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet);
}
.barriere-bascule{
  display:inline-flex; background:var(--papier); border:1.5px solid var(--trait);
  border-radius:11px; padding:4px; gap:4px; align-self:flex-start; flex-wrap:wrap;
}
.barriere-bascule button{
  font:inherit; font-size:14.5px; font-weight:600; color:var(--violet-sombre);
  background:transparent; padding:10px 20px; border-radius:8px; border:0; cursor:pointer;
}
.barriere-bascule button.actif{background:var(--violet); color:#fff}

/* ⚠️ 150 px et non 230 : le formulaire n'est plus pleine largeur, il tient
   dans la colonne de gauche. À 230 px, prénom et nom tombaient l'un sous
   l'autre et la colonne doublait de hauteur. */
.barriere-champs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px}

/* ---- Le choix de la formule, en regard du formulaire ---- */
.barriere-formules{display:flex; flex-direction:column; gap:13px}
.barriere-formule{
  position:relative; font:inherit; text-align:left; cursor:pointer;
  background:var(--papier); border:1.5px solid var(--trait); border-radius:12px;
  padding:16px 18px; display:flex; flex-direction:column; gap:7px;
}
/* ⚠️ La formule retenue se lit au CADRE et au FOND, pas à la seule couleur :
   deux cartes qui ne diffèrent que par une teinte ne se distinguent pas en
   daltonien. `aria-pressed` la dit aux lecteurs d'écran. */
.barriere-formule.actif{border:2px solid var(--violet); background:var(--lavande-pale)}
.barriere-formule-tete{display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%}
.barriere-formule-tete .nom{font-size:15.5px; font-weight:600; color:var(--violet-sombre)}
.barriere-formule-tete .prix{
  font-size:22px; font-weight:700; color:var(--violet-sombre);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.barriere-formule-dire{font-size:13px; line-height:1.5; color:var(--encre-douce)}
.barriere-formule-dire strong{font-weight:600; color:var(--conforme)}
.barriere-pleine{grid-column:1 / -1}
.barriere-pleine[hidden]{display:none}
/* Le mot de passe ne s'étire pas sur toute la carte : un champ de 900 px de
   large invite à écrire une ligne, pas une phrase de douze caractères. */
.barriere-motdepasse{padding-top:14px; border-top:1px solid #eee7f1}
.barriere-motdepasse input{max-width:420px}
.barriere-fin{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.barriere-fin .bouton{flex:none}
.barriere-fin .barriere-note{flex:1 1 260px; min-width:0; margin:0}

.barriere-contexte{flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:8px}
.barriere-contexte p{margin:0; font-size:14.5px; line-height:1.55; color:#5b4a61}
.barriere-qui{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
/* ⚠️ L'adresse ne se coupe jamais en deux (maquette, P2/P3) : « camille@ » en fin de ligne et le domaine
   dessous se lisaient comme deux informations. Trop longue pour la carte, elle se tronque plutôt que de
   faire défiler la page de côté. */
.barriere-mail{font-size:13.5px; color:var(--encre-douce); white-space:nowrap; min-width:0; max-width:100%;
  overflow:hidden; text-overflow:ellipsis}
#b-payer{white-space:nowrap}
.barriere-agir{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:9px}
.barriere-agir .bouton{align-self:auto}
.barriere-paiement{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap}
.barriere-paiement .barriere-champ{flex:1 1 300px; min-width:0}
.barriere-paiement .bouton{flex:none; align-self:auto}

#msg-barriere:not(:empty){padding:0 24px 20px; background:var(--fond)}

@media (max-width:639.98px){ .payer-suite{display:none} }
@media (max-width:640px){
  .barriere-tete{padding:18px 20px 8px}
  .barriere-vue{padding:18px 20px}
  .barriere-agir{align-items:stretch}
  #msg-barriere:not(:empty){padding:0 20px 18px}
}

/* Les deux consentements, et l'argumentaire en regard des prix. */
.barriere-cases{display:flex; flex-direction:column; gap:10px}
.barriere-cases label{display:flex; align-items:flex-start; gap:10px; cursor:pointer}
.barriere-cases input{width:17px; height:17px; flex:none; margin:2px 0 0; accent-color:var(--violet); cursor:pointer}
.barriere-cases span{font-size:13px; line-height:1.5; color:var(--violet-sombre)}
/* ⚠️ Les garanties répondent à l'objection que soulève le MONTANT : elles se
   lisent donc en regard des prix, pas au bas du formulaire. */
.barriere-garanties{
  list-style:none; margin:0; padding:15px 17px; display:flex; flex-direction:column; gap:9px;
  background:var(--papier); border:1px solid #eee7f1; border-radius:12px;
}
.barriere-garanties li{
  position:relative; padding-left:24px; font-size:13px; line-height:1.5; color:var(--violet-sombre);
}
/* La coche est dessinée en CSS : une puce de liste ne dit pas « garanti ». */
.barriere-garanties li::before{
  content:''; position:absolute; left:2px; top:5px; width:11px; height:6px;
  border-left:1.6px solid var(--conforme); border-bottom:1.6px solid var(--conforme);
  transform:rotate(-45deg);
}
.barriere-pourquoi{
  background:var(--papier); border:1px solid #eee7f1; border-radius:12px;
  padding:15px 17px; display:flex; flex-direction:column; gap:7px; margin-top:auto;
}
.barriere-pourquoi p{margin:0; font-size:13px; line-height:1.55; color:#5b4a61}
.barriere-formule-dire br{content:''; display:block; margin-top:5px}


/* ---------- La vitrine « Prochainement » ---------- */
/* ⚠️ Pas de barre ni de pied du site complet (build-design, 01/10/2026) :
   ils laisseraient croire que le service tourne alors que c'est une
   présentation. Une section centrée, seule, et rien d'autre.
   Dessin repris de Claude Design, projet Premier Repère, fichier
   « Prochainement.dc.html » (01/10/2026) : le dégradé et le motif de courbes
   sont ceux déjà en charte pour `.appel-int` (mêmes variables, même recette
   d'overlay) — pas une nouvelle combinaison, la même bande dégradée tournée
   en pleine page. */
body.prochainement-corps{
  min-height:100vh; margin:0; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--vert-eau) 0%,var(--lilas) 52%,var(--mauve) 100%);
}
/* Le motif de courbes en surimpression, identique à `.appel-int::after` :
   même fichier, même taille, même mélange — c'est la même texture de marque,
   seulement posée sur toute la page plutôt que sur un bandeau. */
body.prochainement-corps::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:url('/assets/marque/contours.svg') repeat; background-size:900px auto;
  mix-blend-mode:soft-light;
}
.prochainement{
  position:relative; flex:1; display:flex; align-items:center; justify-content:center;
  padding:clamp(48px,8vw,96px) 24px;
}
.prochainement-carte{
  display:flex; flex-direction:column; align-items:center; gap:30px;
  max-width:640px; text-align:center;
}
/* Le lockup du dessin monte le symbole à 56-76 px (la barre n'en montre que
   41) : `--lockup-h` porte déjà tout le calcul (écart, taille du mot, reprise
   optique), il suffit de la hausser ici. ⚠️ Le symbole est ANIMÉ ici
   (`data-symbole-anime` sur `__SYMBOLE__`, lot vitrine-motion, 01/10/2026) :
   la vitrine est la quatrième place de la charte du symbole animé
   (public/js/symbole-anime.js) — la limite à trois tenait d'une mauvaise
   lecture, pas d'un choix de marque (Benoist, sur la maquette Claude
   Design). `color:var(--violet)` sur `.lockup-symbole` suffit : le symbole
   est peint en `currentColor`, aucun réglage de plus. */
.prochainement-lockup{--lockup-h:clamp(48px,7vw,68px)}
.prochainement-phrase{
  margin:0; font-size:clamp(17px,1.8vw,20px); line-height:1.5; color:var(--violet-sombre);
  text-wrap:balance;
}
/* Pastille « Prochainement » : plus ronde et plus posée que `.etiquette`
   courante (coins carrés, 11 px) — le dessin en fait un vrai badge de
   statut, pas une rubrique de page. Modificateur local plutôt que retoucher
   `.etiquette` partout ailleurs. */
.prochainement .etiquette{
  margin-bottom:0; font-size:12px; letter-spacing:.16em; color:var(--violet-sombre);
  background:rgba(255,255,255,.78); padding:9px 16px; border-radius:999px;
  box-shadow:0 1px 2px rgba(78,51,85,.06);
}
.prochainement-contact{
  margin-top:18px; background:rgba(255,255,255,.86); border-radius:14px; padding:16px 24px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  box-shadow:0 1px 2px rgba(78,51,85,.05), 0 12px 32px rgba(78,51,85,.1);
}
.prochainement-contact span{font-size:15px; color:#5b4a61}
.prochainement-contact a{font-size:15px; color:var(--violet); font-weight:600; text-underline-offset:3px}
.prochainement-contact a:hover{color:var(--violet-sombre)}
.prochainement-mentions{
  position:relative; padding:0 24px 28px; text-align:center;
  font-size:13px; color:var(--violet-sombre); text-decoration:underline;
  text-underline-offset:2px; text-decoration-color:rgba(78,51,85,.4);
}
.prochainement-mentions:hover{text-decoration-color:var(--violet-sombre)}
/* ⚠️ Mesuré en rendu réel (chromium headless, 390 px) : `.lockup` est
   `white-space:nowrap` par construction (un logo ne se coupe jamais), et le
   plancher du clamp (48 px) restait trop large pour « Premier Repère » en
   entier — le mot-signe débordait hors de l'écran. Même reprise que la barre
   (`.barre-int .lockup` à 640 px) : on redescend `--lockup-h` sous 480 px,
   la seule largeur où ce plancher dépasse encore le texte. */
@media (max-width:480px){
  .prochainement-lockup{--lockup-h:34px}
}

/* ---------- La page 404 ---------- */
/* Dessin de Claude Design, projet Premier Repère, « 404.dc.html » (07/10/2026) :
   le fond, le motif et le pied sont ceux de la présentation (`body.prochainement-corps`,
   `.prochainement-mentions`), la carte est la même colonne centrée. Seuls
   l'en-tête (le lockup seul, à gauche), le grand « 404 » et les deux boutons
   sont propres à cette page. Valeurs reprises du dessin, pas de l'œil. */
.erreur-entete{position:relative; padding:24px clamp(20px,4vw,48px); display:flex; align-items:center}
.erreur-lockup{--lockup-h:38px}
.prochainement.erreur-principal{padding:clamp(32px,6vw,72px) 24px clamp(48px,8vw,96px)}
.erreur-carte{gap:22px; max-width:620px}
.erreur-code{
  font-size:clamp(110px,20vw,200px); font-weight:300; line-height:.9;
  letter-spacing:-.04em; color:var(--violet-sombre);
}
.erreur-titre{
  margin:0; font-size:clamp(24px,3.2vw,34px); font-weight:600; line-height:1.2;
  letter-spacing:-.01em; text-wrap:balance; color:var(--violet-sombre);
}
.erreur-texte{
  margin:0; font-size:clamp(16px,1.6vw,18px); line-height:1.6; color:#5b4a61; text-wrap:pretty;
}
.erreur-actions{margin-top:10px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.erreur-bouton, .erreur-bouton:hover{text-decoration:none}
.erreur-bouton{
  display:inline-flex; align-items:center; height:50px; padding:0 24px; border-radius:12px;
  background:var(--violet-sombre); color:#fff; font-size:15px; font-weight:600;
  box-shadow:0 8px 22px rgba(78,51,85,.22);
}
.erreur-bouton:hover{background:var(--violet); color:#fff}
.erreur-bouton.secondaire{
  background:rgba(255,255,255,.86); color:var(--violet-sombre);
  box-shadow:0 1px 2px rgba(78,51,85,.05);
}
.erreur-bouton.secondaire:hover{background:#fff; color:var(--violet-sombre)}
.erreur-signaler{margin:18px 0 0; font-size:14px; color:#5b4a61}
.erreur-signaler a{font-weight:600; color:var(--violet); text-decoration:underline; text-underline-offset:3px}
.erreur-signaler a:hover{color:var(--violet-sombre)}

/* Le bandeau de contexte sur /mentions quand il est servi depuis la vitrine :
   même habillage que l'avis « à compléter » plus bas sur la page, pour que les
   deux se lisent comme la même famille de notice. */
.avis-contexte{
  display:flex; align-items:flex-start; gap:14px; margin:0 0 30px var(--retrait-tete);
  background:var(--information-fond); border-radius:12px; padding:16px 20px;
}
.avis-contexte p{margin:0}
.avis-contexte a{font-weight:600}

/* ---------- La page où mène le lien de confirmation d'adresse ---------- */
/* ⚠️ Même carte que l'écran de connexion (src/auth.js, `pageConnexion`), dont le
   style est écrit dans la page : on le reprend ici par ses valeurs, sans
   toucher à celui-là. Aucune couleur ni aucun rayon neufs. */
.confirmation-corps{
  min-height:100vh; display:grid; place-items:center; position:relative;
  background:linear-gradient(135deg,var(--vert-eau) 0%,var(--lilas) 52%,var(--mauve) 100%);
}
.confirmation-corps::before{
  content:''; position:fixed; inset:0; opacity:.45; pointer-events:none;
  background:url('/assets/marque/contours.svg') repeat; background-size:480px auto;
}
.confirmation-boite{
  position:relative; z-index:2; width:min(420px,calc(100vw - 40px)); background:var(--papier);
  border-radius:16px; padding:34px 32px; box-shadow:0 12px 40px rgba(78,51,85,.16); text-align:center;
}
.confirmation-lockup{display:flex; justify-content:center; margin-bottom:22px}
.confirmation-boite h1{margin:0 0 8px; font-size:21px; font-weight:600; color:var(--violet-sombre)}
.confirmation-boite p{margin:0 0 22px; color:var(--encre-douce); font-size:14px; line-height:1.55}
.confirmation-boite .bouton{display:block; width:100%; box-sizing:border-box; text-align:center}
.confirmation-boite section[hidden]{display:none}
/* Le panneau « Lien expiré ou déjà utilisé » de la maquette « Compte et
   paiement - états » (section 03) : bordure et filet ambrés, étiquette en
   `--vigilance`. Ces deux teintes (#f4e6c9, #c79a3c) sont celles du dessin. */
.confirmation-boite.lien-inutilisable{
  border:1px solid #f4e6c9; border-left:4px solid #c79a3c; border-radius:14px; padding:26px; text-align:left;
}
.confirmation-etiquette-lien{
  display:block; margin-bottom:10px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vigilance);
}
.confirmation-boite.lien-inutilisable h1{font-size:20px}
.confirmation-boite p.confirmation-erreur{margin:14px 0 0; color:var(--alerte); font-size:13.5px}
.confirmation-boite p.confirmation-erreur[hidden]{display:none}

/* ---------- Mot de passe oublié (lot 1340) ----------
   D'après « Mot de passe oublié.dc.html » (projet Claude Design), écrans 2A à 3H : valeurs relevées une à une. Le fond est
   celui de `.confirmation-corps`, que la maquette reprend de /connexion. Les teintes sans variable (#dcd3e2, #c9afd5,
   #eccdd2, #b9a9c0, #8a6c93, #c79a3c) sont celles du dessin. */
.oubli-boite{
  position:relative; z-index:2; box-sizing:border-box; width:min(420px,calc(100vw - 40px)); background:var(--papier);
  border-radius:16px; padding:34px 32px; box-shadow:0 12px 40px rgba(78,51,85,.16);
  display:flex; flex-direction:column; gap:20px;
}
.oubli-boite [hidden]{display:none !important}
.oubli-lockup{align-self:center; --lockup-rapport:calc(17 / 30); gap:6px}
.oubli-etat{display:flex; flex-direction:column; gap:20px}
.oubli-tete{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.oubli-tete h1{margin:0; font-size:21px; font-weight:600; line-height:1.3; color:var(--violet-sombre); text-wrap:balance}
.oubli-tete h1:focus{outline:none}
.oubli-tete p{margin:0; font-size:14px; line-height:1.55; color:var(--encre-douce); text-wrap:pretty}
.oubli-tete p.oubli-rappel{font-size:12.5px; line-height:1.4}
.oubli-rappel strong{font-weight:600; color:var(--violet-sombre); word-break:break-all}
.oubli-etiquette{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-left:4px solid; padding:5px 10px 5px 9px; border-radius:0 6px 6px 0;
}
.oubli-etiquette-info{color:var(--information); background:var(--information-fond); border-left-color:var(--information)}
.oubli-etiquette-ok{color:var(--conforme); background:var(--conforme-fond); border-left-color:var(--conforme)}
.oubli-etiquette-vigil{color:var(--vigilance); background:var(--vigilance-fond); border-left-color:#c79a3c}
.oubli-erreur{
  display:flex; gap:8px; margin:0; background:var(--alerte-fond); border:1px solid #eccdd2; border-radius:9px;
  padding:10px 12px; font-size:13.5px; line-height:1.45; color:var(--alerte); text-align:left;
}
.oubli-pastille{
  flex:none; width:17px; height:17px; margin-top:1px; border-radius:50%; background:var(--alerte); color:#fff;
  font-size:11px; font-weight:700; line-height:17px; text-align:center;
}
.oubli-formulaire{display:flex; flex-direction:column; gap:20px; margin:0}
.oubli-champs{display:flex; flex-direction:column; gap:14px}
.oubli-champ{display:flex; flex-direction:column; gap:6px}
.oubli-champ label{font-size:13.5px; font-weight:600; color:var(--violet-sombre); white-space:nowrap}
.oubli-champ input{
  box-sizing:border-box; width:100%; margin:0; font:inherit; font-size:16px; line-height:1.4; padding:14px 16px;
  border:1.5px solid #dcd3e2; border-radius:11px; background:var(--papier); color:var(--encre);
}
.oubli-champ input:focus{outline:none; border-color:#c9afd5; box-shadow:0 0 0 4px rgba(111,75,119,.16)}
.oubli-champ input.oubli-saisie-erreur{border-color:var(--alerte)}
.oubli-champ input.oubli-masque{letter-spacing:.12em}
.oubli-aide{margin:0; font-size:12.5px; line-height:1.4; color:var(--encre-douce)}
.oubli-erreur-champ{
  display:flex; gap:6px; margin:0; background:var(--alerte-fond); border:1px solid #eccdd2; border-radius:9px;
  padding:7px 10px; font-size:13.5px; line-height:1.4; color:var(--alerte);
}
.oubli-erreur-champ > span:first-child{font-weight:700}
.oubli-action{display:flex; flex-direction:column; gap:8px}
.oubli-bouton{
  box-sizing:border-box; width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-size:15px; font-weight:600; color:#fff; background:var(--violet); border:0; border-radius:11px;
  padding:14px 20px; cursor:pointer; text-decoration:none;
}
a.oubli-bouton:hover{color:#fff}
.oubli-bouton:hover:not(:disabled){filter:brightness(.92)}
.oubli-bouton:focus-visible{outline:3px solid var(--lavande); outline-offset:3px}
.oubli-bouton.oubli-bouton-inactif{background:#b9a9c0; cursor:not-allowed}
.oubli-bouton.oubli-bouton-attente{background:#8a6c93; cursor:progress}
.oubli-roue{display:none; width:15px; height:15px; box-sizing:border-box; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:tourne .8s linear infinite}
.oubli-bouton-attente .oubli-roue{display:block}
.oubli-note{margin:0; font-size:12.5px; line-height:1.4; color:var(--encre-douce); text-align:center}
.oubli-encart{
  display:flex; flex-direction:column; gap:4px; background:var(--fond); border:1px solid var(--trait); border-radius:11px;
  padding:13px 15px; text-align:left;
}
.oubli-encart strong{font-size:13.5px; font-weight:600; color:var(--violet-sombre)}
.oubli-encart p{margin:0; font-size:13px; line-height:1.5; color:var(--encre-douce)}
.oubli-encart a, .oubli-pied a{color:var(--violet); text-decoration:underline; text-underline-offset:2px}
.oubli-pied{display:flex; flex-direction:column; align-items:center; gap:6px; margin:0; font-size:13px; line-height:1.5;
  color:var(--encre-douce); text-align:center}
@media (max-width:399px){
  .oubli-boite{width:calc(100vw - 24px); padding:26px 20px}
}

/* ---------- Le blog (lot blog) ----------
   D'après Blog.dc.html, Article.dc.html et la section « Repères » d'Accueil.dc.html
   (projet Claude Design). Les valeurs sont celles de la maquette, relevées une à une. */
.blog-corps{
  box-sizing:border-box; max-width:calc(var(--largeur) + 64px); margin:0 auto;
  padding:clamp(36px,4vw,52px) 32px clamp(36px,4vw,52px); display:flex; flex-direction:column; gap:26px;
}
.bande-ariane + .blog-corps{padding-top:clamp(18px,2.2vw,26px)}
.blog-pastilles{display:flex; gap:8px; flex-wrap:wrap}
.blog-pastille{
  font-size:13.5px; font-weight:500; color:var(--violet-sombre); background:var(--papier);
  border:1px solid var(--trait); padding:9px 16px; border-radius:999px; white-space:nowrap; text-decoration:none;
}
.blog-pastille:hover{border-color:var(--lavande)}
.blog-pastille.actif{font-weight:600; color:#fff; background:var(--violet); border-color:var(--violet)}
.blog-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:18px}
.blog-vide{margin:0; color:var(--encre-douce)}
.blog-carte{
  display:flex; flex-direction:column; background:var(--papier); border:1px solid #f1ecf4; border-radius:16px;
  overflow:hidden; color:inherit; text-decoration:none;
  box-shadow:0 1px 2px rgba(78,51,85,.04), 0 10px 26px rgba(78,51,85,.05);
}
.blog-carte:hover{box-shadow:0 2px 4px rgba(78,51,85,.06), 0 16px 36px rgba(78,51,85,.1)}
.blog-carte-visuel{height:150px; flex:none; position:relative}
.blog-carte-texte{flex:1; padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; min-width:0}
.blog-carte h2,.blog-carte h3{margin:0; color:var(--violet-sombre); text-wrap:pretty}
.blog-carte h3{font-size:17px; font-weight:600; line-height:1.3}
.blog-carte p{margin:0; font-size:14px; line-height:1.6; color:var(--encre-douce); text-wrap:pretty}
.blog-rubrique{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet)}
.blog-meta{margin-top:auto; padding-top:8px; font-size:12.5px; color:#8a8290; font-variant-numeric:tabular-nums}
/* L'article à la une : pleine largeur, la couverture à gauche, le texte à droite. */
.blog-carte--une{flex-direction:row; flex-wrap:wrap; grid-column:1/-1}
.blog-carte--une .blog-carte-visuel{flex:1 1 360px; height:auto; min-height:240px}
.blog-carte--une .blog-carte-texte{flex:1 1 380px; padding:30px 32px}
.blog-carte--une h2{font-size:clamp(21px,2.3vw,26px); font-weight:700; letter-spacing:-.015em; line-height:1.3}
.blog-carte--une p{font-size:15.5px}
.blog-couverture,.blog-couverture svg,.blog-couverture-courbes,.blog-couverture-image{position:absolute; inset:0; width:100%; height:100%}
.blog-couverture{overflow:hidden; display:block}
.blog-couverture svg{display:block}
.blog-couverture-courbes{
  background:url('/assets/marque/contours.svg') repeat; background-size:520px auto; opacity:.55; mix-blend-mode:soft-light;
}
.blog-couverture-image{object-fit:cover; display:block}
.blog-signature{margin:16px 0 0; font-size:13.5px; color:var(--violet-sombre); font-variant-numeric:tabular-nums}

/* L'en-tête de la page Article : le visuel à gauche, le texte à droite (Article.dc.html). Valeurs relevées une à une dans la maquette.
   ⚠️ `.entete-article` seul : la liste /blog et les pages de contenu gardent l'en-tête commun `entete-page`. */
.article-hero{
  display:flex; flex-wrap:wrap; flex-direction:row-reverse;
  gap:clamp(28px,4vw,48px); align-items:center;
}
/* Le texte vient en premier dans le DOM : en colonne il passe au-dessus du visuel, `row-reverse` garde le visuel à gauche sur grand écran. */
.article-hero > *{flex:1 1 min(400px,100%); min-width:0}
.article-hero-visuel{margin:0; display:flex; flex-direction:column; gap:8px}
.article-hero-cadre{
  position:relative; width:100%; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(78,51,85,.05), 0 16px 40px rgba(78,51,85,.12);
}
.article-hero-texte{display:flex; flex-direction:column; gap:16px}
.article-hero-texte > *{margin:0}
.entete-article .etiquette.sur-degrade{align-self:flex-start; letter-spacing:.13em; background:rgba(255,255,255,.78); padding:6px 12px; border-radius:7px}
.entete-article h1{margin:0; font-size:clamp(27px,3.1vw,37px)}
.entete-article p.accroche{margin:0; font-size:16.5px; line-height:1.6; max-width:none}
.entete-article .blog-signature{margin:0}
/* Le bandeau de la maquette est rogné à ses bords et se clôt par un filet ; sous 900 px le visuel le déborde (règle plus bas). */
.entete-article{overflow:hidden; border-bottom:1px solid var(--trait)}

/* Sous 900 px (Article.dc.html, `majLargeur`) : le visuel chevauche le bas du bandeau, deux tiers sur le dégradé et un tiers sur le fond de page, et le corps commence 36 px dessous.
   ⚠️ En CSS seul, sans script : le cadre est en 4/3 et le visuel n'a pas de légende, donc le tiers qui déborde vaut le quart de la largeur du visuel. Les pourcentages de marge et de remplissage se
   comptent sur la largeur du bloc contenant : 25 % de `.article-hero` (largeur du visuel) pour la marge négative, 25 % de la largeur de la page moins ses 2 × 32 px de gouttière (donc + 20 px = 36 − 16) pour le haut du corps.
   899,98 px et non 900 : à 900 px les deux colonnes tiennent encore, le visuel n'est pas sous le texte. */
@media (max-width:899.98px){
  .entete-article{overflow:visible}
  /* La maquette garde 32 px de gouttière à toute largeur ; la règle mobile commune (`.entete-int`, 20 px sous 640 px) ne vaut pas ici, et le texte s'alignerait 12 px avant le corps. */
  .entete-article .entete-int{padding-left:32px; padding-right:32px}
  .entete-article .article-hero-visuel{margin-bottom:calc(-25% - clamp(38px,5vw,58px))}
  main.page-corps.page-article{padding-top:calc(25% + 20px)}
}

/* Le sommaire repliable : visible là où le sommaire latéral disparaît (même seuil que la règle de `.page-sommaire`). */
.sommaire-mobile{display:none; margin:0 0 28px; background:#fff; border:1px solid var(--trait); border-radius:12px; overflow:hidden}
.sommaire-mobile summary{
  list-style:none; cursor:pointer; min-height:52px; padding:12px 16px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.sommaire-mobile summary::-webkit-details-marker{display:none}
.sommaire-mobile-libelle{display:flex; align-items:baseline; gap:10px; min-width:0}
.sommaire-mobile-titre{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet-sombre)}
.sommaire-mobile-compte{font-size:12.5px; color:var(--encre-douce)}
.sommaire-mobile summary svg{flex:none; display:block; transition:transform .2s}
.sommaire-mobile details[open] summary svg{transform:rotate(180deg)}
.sommaire-mobile-liste{display:flex; flex-direction:column; padding:4px 0 10px; border-top:1px solid #f1ebf4}
/* ⚠️ `.article .…` : le sommaire est dans l'article, et `.article a` (violet, trait lavande dessous) l'emportait à égalité de spécificité en le teintant #6f4b77 et en ajoutant 1 px aux liens (relevé le 14/10, 390 px). */
.article .sommaire-mobile-liste a{display:flex; align-items:center; min-height:44px; padding:0 16px; font-size:15px; font-weight:500; color:var(--violet-sombre); border-bottom:0; text-decoration:none}
.sommaire-mobile-sous{display:flex; flex-direction:column; margin:0 16px 4px 18px; border-left:2px solid var(--trait)}
.article .sommaire-mobile-sous a{padding:0 0 0 14px; font-size:14px; font-weight:400; color:#5b4a61}
@media (max-width:899.98px){ .sommaire-mobile{display:block} }
/* Le sommaire est le premier enfant de l'article : le premier intertitre ne reprend pas sa marge haute. */
.article .sommaire-mobile + h2{margin-top:0}

/* Le corps d'un article : mesure de 68 caractères, texte à 17 px. */
.article{max-width:68ch}
.article h2{margin:34px 0 0; font-size:24px; font-weight:600; letter-spacing:-.015em; line-height:1.25; color:var(--violet-sombre); scroll-margin-top:96px}
.article h2:first-child{margin-top:0}
.article h3{margin:26px 0 0; font-size:19px; font-weight:600; line-height:1.3; color:var(--violet-sombre); scroll-margin-top:96px}
.article p,.article li{font-size:17px; line-height:1.75; color:#3d3542; text-wrap:pretty}
.article p{margin:14px 0 0}
.article ul,.article ol{margin:14px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:8px}
.article li{line-height:1.7}
.article a{color:var(--violet); font-weight:500; border-bottom:1px solid var(--lavande-pale); text-decoration:none}
.article-encart{margin:22px 0 0; background:var(--information-fond); border-left:3px solid var(--violet); border-radius:0 10px 10px 0; padding:16px 20px}
.article .article-encart p{margin:0; font-size:15px; line-height:1.65; color:var(--violet-sombre)}
.article-tableau{margin:20px 0 0; border:1px solid var(--trait); border-radius:12px; overflow:auto; background:var(--papier)}
.article-tableau table{width:100%; border-collapse:collapse; font-size:15px}
.article-tableau th{
  text-align:left; padding:11px 16px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--encre-douce); background:var(--fond); border-bottom:1px solid #eee7f1;
}
.article-tableau td{padding:12px 16px; color:var(--violet-sombre); border-bottom:1px solid #f4eff6}
.article-tableau tr:last-child td{border-bottom:0}
.article-tableau .a-droite{text-align:right; font-variant-numeric:tabular-nums}
.article-tableau .au-centre{text-align:center}
.article-appel{
  margin:30px 0 0; position:relative; overflow:hidden; border-radius:14px; padding:24px 26px;
  background:linear-gradient(135deg,var(--vert-eau) 0%,var(--lilas) 52%,var(--mauve) 100%);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.article-appel::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url('/assets/marque/contours.svg') repeat; background-size:600px auto; opacity:.5; mix-blend-mode:soft-light;
}
.article .article-appel p{position:relative; margin:0; flex:1 1 280px; min-width:0; font-size:16px; line-height:1.55; color:var(--violet-sombre)}
.article .article-appel .bouton{position:relative; flex:none; white-space:nowrap; color:#fff; font-weight:600; border-bottom:0}
.article .article-portee{margin-top:24px; font-size:13.5px; line-height:1.6; color:var(--encre-douce)}
.article-suite{margin-top:48px; padding-top:28px; border-top:1px solid var(--trait); display:flex; flex-direction:column; gap:16px}
.article-suite-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:14px}
.article-suite .blog-carte{border-radius:14px; box-shadow:none}
.article-suite .blog-carte-visuel{height:110px}
.article-suite .blog-carte-texte{padding:14px 16px 16px; gap:6px}
.article-suite .blog-carte p,.article-suite .blog-meta{display:none}
.article-suite .blog-carte h3{margin:0; font-size:15px; line-height:1.35}
.article-suite .blog-rubrique{font-size:10px}
/* ⚠️ La carte est un `a` DANS `.article` : sans ces deux lignes elle hérite du filet et du
   graisse des liens du texte (`.article a`), et son survol serait neutralisé par `box-shadow:none`. */
.article a.blog-carte{border-bottom:1px solid #f1ecf4; font-weight:inherit}
.article-suite .blog-carte:hover{box-shadow:0 12px 28px rgba(78,51,85,.09)}
main.page-corps.sans-sommaire{grid-template-columns:minmax(0,1fr)}

/* La section de l'accueil. */
.reperes-tete{padding-left:var(--retrait-tete); display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-bottom:30px}
.reperes-titre{display:flex; flex-direction:column; align-items:flex-start; gap:12px; max-width:62ch}
.reperes-titre > *{margin:0}
/* Trois articles : trois colonnes, une au téléphone. Entre les deux, le premier en pleine largeur et visuel à gauche,
   les deux autres dessous — jamais un orphelin sur une rangée (maquette, `grilleBlog`). L'`auto-fit` sur 300 px en
   mettait deux à 820 px et laissait le troisième seul. */
.blog-grille--accueil{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:899.98px){
  .blog-grille--accueil{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-grille--accueil > .blog-carte:first-child{grid-column:1 / -1; flex-direction:row}
  .blog-grille--accueil > .blog-carte:first-child .blog-carte-visuel{width:44%; height:auto; min-height:200px}
}
@media (max-width:640px){
  .blog-grille--accueil{grid-template-columns:minmax(0,1fr)}
  .blog-grille--accueil > .blog-carte:first-child{flex-direction:column}
  .blog-grille--accueil > .blog-carte:first-child .blog-carte-visuel{width:auto; height:150px; min-height:0}
}
@media (max-width:620px){.reperes-tete{padding-left:0}}

/*
 * Les pages de ville et la section « L'urbanisme ville par ville » de l'accueil — maquette Ville.dc.html (projet Claude
 * Design) et section #villes d'Accueil.dc.html, 06/10/2026. Valeurs recopiées du dessin, pas d'une capture.
 */
/* La recherche des pages de ville est celle de l'accueil (`.hero-recherche`, partiel `recherche.html`) : seule la mesure du hero change. */
.ville-hero .hero-recherche{margin-top:8px; max-width:560px}
.fil-ariane--sur-degrade{margin-bottom:20px; font-size:12.5px; color:var(--violet-sombre)}
.fil-ariane--sur-degrade a{color:var(--violet-sombre); text-decoration:underline; text-underline-offset:2px}
.fil-ariane--sur-degrade span[aria-hidden]{opacity:.55}
.ville-rubrique{display:flex; flex-direction:column; gap:14px}
.ville-rubrique + .ville-rubrique{padding-top:44px}
.ville-rubrique h2{margin:0; font-size:22px; font-weight:600; letter-spacing:-.014em; color:var(--violet-sombre)}
.ville-chiffres{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--trait); border:1px solid var(--trait); border-radius:14px; overflow:hidden}
.ville-chiffre{background:var(--papier); padding:16px 20px; display:flex; flex-direction:column; gap:3px}
.ville-chiffre-etiquette{font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--encre-douce)}
.ville-chiffre-valeur{font-size:21px; font-weight:700; color:var(--violet-sombre); font-variant-numeric:tabular-nums}
.ville-chiffre-sous{font-size:12.5px; color:var(--encre-douce)}
.ville-chiffre-sous.casse{word-break:break-all}
.ville-texte{margin:0; font-size:16px; line-height:1.7; color:#3d3542; max-width:68ch}
.ville-texte--doux{font-size:15px; line-height:1.65; color:var(--encre-douce)}
.ville-texte--petit{font-size:14px; line-height:1.6; color:var(--encre-douce)}
.ville-texte a{color:var(--violet); font-weight:500; border-bottom:1px solid var(--lavande-pale)}
.ville-tableau{border:1px solid var(--trait); border-radius:12px; overflow:hidden; background:var(--papier)}
.ville-tableau table{width:100%; border-collapse:collapse; font-size:14.5px}
.ville-tableau thead tr{background:var(--fond)}
.ville-tableau th{text-align:left; padding:11px 16px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--encre-douce); border-bottom:1px solid #eee7f1}
.ville-tableau td{padding:11px 16px; color:var(--violet-sombre); border-bottom:1px solid #f4eff6}
.ville-tableau tbody tr:last-child td{border-bottom:0}
.ville-tableau .ville-inconnu{color:#8a8290}
.ville-tableau .ville-nombre{text-align:right; font-variant-numeric:tabular-nums; font-weight:500}
.ville-tableau th.ville-nombre{font-weight:700}
.ville-zone-col{width:90px}
.ville-zone{font-size:12.5px; font-weight:600; color:#2a5f4c; background:var(--menthe-claire); padding:3px 8px; border-radius:5px}
.ville-notes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:12px}
.ville-note{border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:6px}
.ville-note-titre{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.ville-note-texte{font-size:14.5px; line-height:1.6}
.ville-note--vigilance{background:#f7efdd}
.ville-note--vigilance .ville-note-titre,.ville-note--vigilance .ville-note-texte{color:#75530b}
.ville-note--info{background:#efe9f3}
.ville-note--info .ville-note-titre{color:var(--violet)}
.ville-note--info .ville-note-texte{color:var(--violet-sombre)}
.ville-questions{display:flex; flex-direction:column; gap:14px}
.ville-questions details{background:var(--papier); border:1px solid var(--trait); border-radius:12px; padding:15px 19px}
.ville-questions summary{font-size:15.5px; font-weight:600; color:var(--violet-sombre); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.ville-questions summary::-webkit-details-marker{display:none}
.ville-questions .chev{color:var(--violet); font-size:11px; flex:none; transition:transform .18s}
.ville-questions details[open] .chev{transform:rotate(180deg)}
.ville-questions details p{margin:10px 0 0; font-size:14.5px; line-height:1.65; color:#5b4a61}
.ville-autres{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr)); gap:0 22px}
.ville-autres a{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #f1ebf4; color:var(--violet-sombre); text-decoration:none; font-size:14.5px; font-weight:500; line-height:1.35}
.ville-autres a:hover{color:var(--violet)}
.ville-dep{font-size:12px; color:#8a8290; font-variant-numeric:tabular-nums; flex:none; font-weight:400}
/* Accueil : la tête de bande, puis la grille des vingt-quatre villes. */
.villes-tete{padding-left:var(--retrait-tete); display:flex; align-items:flex-end; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-bottom:24px}
.villes-titre{display:flex; flex-direction:column; gap:10px; max-width:62ch}
.villes-titre > *{margin:0}
.villes-titre h2{font-size:clamp(21px,2.2vw,26px); font-weight:700; letter-spacing:-.018em; line-height:1.2}
.villes-titre .chapeau{font-size:15px; line-height:1.6; color:var(--encre-douce)}
.villes-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr)); gap:8px}
.villes-grille a{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:11px 14px; background:var(--papier); border:1px solid #efe9f3; border-radius:10px; color:var(--violet-sombre); text-decoration:none; font-size:14.5px; font-weight:500; line-height:1.35}
.villes-grille a > span:first-child{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.villes-grille a:hover{border-color:var(--mauve); background:#fcfbfd}
@media (max-width:620px){.villes-tete{padding-left:0}}
/* ⚠️ Écart À LA MAQUETTE, décidé par Benoist (decisions/marge-villes-pied, 06/10/2026) : Accueil.dc.html pose #villes
   avec un bas à 0 et PiedDePage.dc.html n'a pas de marge haute, si bien que la grille touchait le filet du pied. C'est la
   dernière bande avant le pied : les autres ont leur bas porté par la marge haute de la suivante. Même variable que la
   marge haute des bandes. Ne pas le défaire pour « se conformer au dessin ». */
.bande#villes{padding-bottom:var(--pad-haut-bande)}
/* La fiche « plan de la commune » de l'en-tête — Ville.dc.html (projet Claude Design), 07/10/2026. Valeurs recopiées du dessin : texte
   et fiche côte à côte (0,92fr / 1,08fr), la fiche À GAUCHE en large (`order:-1`) et sous la recherche sous 900 px, comme le fait
   le script de la maquette. Les teintes des familles sont celles de sa légende (UV, N, A) ; AU n'y est pas définie : sans teinte. */
.ville-hero-texte{min-width:0}
/* ⚠️ Écart à la maquette Ville.dc.html (0,92fr / 1,08fr, gap fluide), demandé par Benoist le 08/10/2026 : la fiche des villes
   s'ancre EXACTEMENT comme celle de l'accueil — mêmes colonnes que `.hero.inverse` (0,95fr / 1,05fr), même gap de 48 px, et même
   marge haute (24 px, `.hero`) à la place du padding de page de 54 px. Mesuré à 1440 px : fiche à 146 px de haut et 491 px de
   large sur La Rochelle, 116 et 509 sur l'accueil. Ne pas le défaire pour « se conformer au dessin ». */
.ville-hero--plan{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:48px; align-items:center}
@media (min-width:900px){ .entete-page .entete-int:has(.ville-hero--plan){padding-top:24px} }
.ville-hero--plan .ville-plan, .ville-hero .hero-fiche{order:-1}
@media (max-width:899px){
  .ville-hero--plan{grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,52px)}
  .ville-hero--plan .ville-plan, .ville-hero .hero-fiche{order:0}
}
/* La recherche aboutie : la fiche de la parcelle (celle de l'accueil) prend la place du plan de la commune, au même endroit. */
.ville-hero:not(.ville-hero--parcelle) .hero-fiche, .ville-hero--parcelle .ville-plan{display:none}
.ville-hero--parcelle:not(.ville-hero--plan){display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:48px; align-items:center}
@media (max-width:899px){.ville-hero--parcelle:not(.ville-hero--plan){grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,52px)}}
.ville-plan{margin:0; min-width:0; overflow:hidden; background:var(--papier); border:1px solid var(--trait); border-radius:14px; box-shadow:0 1px 2px rgba(78,51,85,.05), 0 14px 38px rgba(78,51,85,.13)}
.ville-plan-tete{padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--trait)}
.ville-plan-titre{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--violet)}
.ville-plan-lieu{font-size:12.5px; color:var(--encre-douce)}
.ville-plan-svg{position:relative; background:var(--fond); aspect-ratio:300/190}
.ville-plan-svg svg,.ville-plan-svg img{display:block; width:100%; height:auto}
.ville-plan-source{margin:0; padding:10px 20px; border-top:1px solid var(--trait); border-bottom:1px solid #f1ebf4; font-size:11px; line-height:1.45; color:var(--encre-douce)}
.ville-plan-legende{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; padding:13px 20px}
.ville-plan-cle{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--violet-sombre)}
.ville-plan-pastille{width:12px; height:12px; border-radius:3px; border:1px solid; flex:none}
.ville-plan-pastille--U{background:#e9dff0; border-color:#d6c8df}
.ville-plan-pastille--AU{background:var(--fond); border-color:#ddd3e3}
.ville-plan-pastille--A{background:#f7efdd; border-color:#e8d9b8}
.ville-plan-pastille--N{background:#e6f1ec; border-color:#c9dfd5}
@media (max-width:640px){
  .ville-chiffres{grid-template-columns:minmax(0,1fr)}
}

/* ⚠️ 24 px au moins au-dessus du téléphone (WCAG 2.2, 2.5.8) : mesurés sur la préprod du 20/10/2026, les liens du menu faisaient 23 px de
   haut à 1180 px et ceux du pied 22 px à 820 px. Padding compensé d'une marge négative, comme plus bas : la zone grandit, la mise en page
   ne bouge pas. Le téléphone a ses 44 px, posés juste après : la règle s'arrête à son seuil pour ne pas s'y ajouter. */
@media (min-width:641px){
  .nav-site a:not(.bouton), .pied-colonne a, .pied-legal a{padding-block:3px; margin-block:-3px}
}

/* ⚠️ Cibles tactiles de 44 px sur téléphone (audit mobile du 07/10/2026 : liens
   légaux 19 px, liste du pied 22 px, fil d'Ariane 20 px, « Changer » 18 px,
   croix des toasts 24 px). Les petites cibles agrandissent leur zone de toucher
   par un padding compensé d'une marge négative : la mise en page ne bouge pas.
   Les listes du pied, serrées l'une contre l'autre, prennent une vraie hauteur.
   Rien ne change au-dessus de 640 px. */
@media (max-width:640px){
  .pied-colonne{gap:0}
  .pied-colonne a{display:flex; align-items:center; min-height:44px}
  .pied-legal{gap:0 18px}
  .pied-legal a{display:inline-flex; align-items:center; min-height:44px}
  .fil-ariane a, .fil-ariane--sur-degrade a{display:inline-block; padding:12px 6px; margin:-12px -6px}
  .barriere-changer{padding:13px 8px; margin:-13px -8px}
  .toast-fermer{width:44px; height:44px; padding:0; margin:-12px -12px -12px 0; display:flex; align-items:center; justify-content:center}
  /* Mesurés au rendu (chromium, 390 px) : le logo 198×34, le lien du pied de l'accueil 350×21 et les villes en pied des pages de ville 326×39 restaient
     sous 44 px. Même procédé, sans rien changer à ce qu'on voit (consigne de Benoist, 07/10/2026). Un lien SANS filet se compense des deux côtés ;
     celui des villes porte un filet en bas : le renfort n'est qu'au-dessus, pour que le filet reste où il est. */
  a.lockup{padding:6px 0; margin:-6px 0}
  .pied-marque a:not(.pied-creer){padding:12px 0; margin:-12px 0}
  .ville-autres a{padding-top:14.5px; margin-top:-5.5px}
}

/* ⚠️ Le double espace (build-design, 08/10/2026) : le bas des pages de fond (lot espace-avant-pied) s'ajoutait au haut de la bande « Votre question
   n'est pas là ? » (64 à 96 px, 0 sur mobile) — 156 px entre le contenu et la carte à 1440, 40 px à 390, pour 80 et 56 px dessinés. Quand une bande
   suit le contenu, c'est elle qui porte l'espace (clamp(56px,6vw,80px), celui du dessin), et le bas de la page se tait ; sans bande (mentions), le
   bas garde son espace avant le pied. Une seule règle pour main.page-corps, .blog-corps (blog, villes) et .glossaire-corps. */
main + .appel, .etat-services + .appel{padding-top:clamp(56px,6vw,80px)}
main.page-corps:has(+ .appel), main.page-corps:has(+ .etat-services), main.blog-corps:has(+ .appel), main:has(+ .appel) > .glossaire-corps{padding-bottom:0}
/* ⚠️ /sources : l'état des services passe AVANT la bande (Benoist, 08/10/2026) ; la bande est alors le dernier bloc avant le pied et porte, comme ailleurs,
   l'espace de 80 / 56 px qui la précède ; le haut de l'état garde le sien (72 / 48), le bas de la page se tait devant lui. */