/* Vigiloc, feuille de style unique.
   Reprend la refonte graphique : fond creme, accent rose, cartes arrondies,
   typographie Plus Jakarta Sans auto hebergee. Aucune ressource distante :
   la politique de securite du serveur (default-src 'self') interdit les CDN,
   les polices Google distantes et les gestionnaires d'evenements en ligne.
   Toutes les pages du produit pointent ici, une seule source a maintenir. */

/* --------------------------------------------------------------- police */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- jetons */
:root {
  color-scheme: light;

  /* surfaces */
  --bg: #FDFBF7;
  --card: #FFFFFF;
  --elev: #F4F0E8;

  /* traits */
  --border: rgba(17, 24, 39, 0.07);
  --border-strong: rgba(17, 24, 39, 0.14);

  /* encre */
  --ink: #111827;
  --text: #374151;
  --muted: #4B5563;
  --muted-2: #6B7280;

  /* accent */
  --accent: #E11D48;
  --accent-hover: #BE123C;
  --accent-soft: #FFF1F2;
  --accent-line: rgba(225, 29, 72, 0.22);
  --grad: linear-gradient(135deg, #E11D48 0%, #EF4444 100%);

  /* etats */
  --green: #047857;
  --green-soft: #ECFDF5;
  --green-line: rgba(4, 120, 87, 0.26);
  --amber: #B45309;
  --amber-soft: #FFFBEB;
  --amber-line: rgba(180, 83, 9, 0.26);
  --red: #DC2626;
  --red-soft: rgba(220, 38, 38, 0.08);
  --red-line: rgba(220, 38, 38, 0.26);

  /* ombres */
  --sh-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --sh-sm: 0 1px 3px rgba(17, 24, 39, 0.05), 0 1px 2px rgba(17, 24, 39, 0.03);
  --sh-md: 0 10px 24px -14px rgba(17, 24, 39, 0.22);
  --sh-lg: 0 24px 48px -24px rgba(17, 24, 39, 0.22);
  --sh-rose: 0 14px 30px -14px rgba(225, 29, 72, 0.5);

  /* rayons */
  --r-xs: 8px;
  --r-sm: 10px;
  --r: 12px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  --max: 1080px;
}
body.page-mid { --max: 960px; }
body.page-narrow { --max: 780px; }
body.page-report { --max: 800px; }
body.page-legal { --max: 46rem; }

/* --------------------------------------------------------------- base */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* titres */
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -0.022em; line-height: 1.2; }
h1 { font-weight: 800; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.13; }
h2 { font-weight: 800; font-size: clamp(22px, 3vw, 30px); }
.hl {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Le titre du heros coupe apres « de », jamais au milieu de « courte
   duree » : la fin de phrase reste d'un seul tenant, et passe a la ligne
   entiere si la place manque. */
.hero .hl { white-space: nowrap; }

/* --------------------------------------------------------------- entete */
header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(253, 251, 247, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.brand img, .brand .logo { height: 32px; width: auto; display: block; }
.brand b { font-weight: 800; }
.brand b span { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--muted); }
.nav-link { font-weight: 600; color: var(--muted); transition: color 0.15s; }
.nav-link:hover { color: var(--ink); }
/* zone de compte, injectee par le script : non connecte puis identifie */
.who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.who .av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}
.link {
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 13.5px;
  font-family: inherit;
  padding: 0;
}
.link:hover { color: var(--accent); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 700;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: var(--r);
  transition: background 0.15s;
}
.nav-cta:hover { background: #FFE4E6; }
/* Pastille de statut, à côté de l'appel à l'action. Elle répond à la question
   posée avant toute inscription : est-ce que ça tourne vraiment ? Le point est
   celui de l'espace (même icône, même animation), donc le signal est identique
   d'un bout à l'autre du site. Le clignotement s'arrête tout seul pour qui a
   demandé moins de mouvement (voir prefers-reduced-motion en fin de fichier). */
.nav-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 8px 15px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.nav-live:hover {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}
.nav-live .live-ic { width: 16px; height: 16px; color: var(--green); }
.nav-live .live-word {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
}
.nav-live .live-sep {
  width: 1px;
  height: 15px;
  background: var(--border-strong);
}
/* Le libelle court sert sur telephone, quand la place ne permet pas la phrase
   entiere : la pastille reste un bouton vers les outils, sans se replier. */
.nav-live .live-short { display: none; }

/* --------------------------------------------------------------- boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  padding: 15px 24px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s,
    box-shadow 0.15s;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--sh-rose); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.985); }
.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--border-strong);
  box-shadow: var(--sh-xs);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-hover); }
.btn-small { padding: 11px 17px; font-size: 14px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn svg { flex-shrink: 0; }

/* --------------------------------------------------------------- champs */
.field {
  flex: 1 1 300px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 0 15px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field svg { color: var(--muted-2); flex-shrink: 0; }
.field input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  padding: 14px 0;
  min-width: 0;
}
.field input::placeholder { color: var(--muted-2); }
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="number"] {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 12px 13px;
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}
.check input { width: auto; margin-top: 3px; accent-color: var(--accent); }

/* --------------------------------------------------------------- heros */
.hero { position: relative; padding: 64px 0 52px; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  top: 44%;
  left: 50%;
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 228, 230, 0.85) 0%,
    rgba(255, 241, 242, 0.5) 45%, rgba(253, 251, 247, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero-inner { max-width: 760px; margin: 0 auto; text-align: center; display: grid; gap: 22px; justify-items: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid #FFE4E6;
  padding: 7px 14px;
  border-radius: var(--r-pill);
}
.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulseDot 2s ease-in-out infinite;
}
.lede { font-size: 17.5px; color: var(--muted); max-width: 36rem; line-height: 1.65; }
.lede strong { color: var(--ink); font-weight: 700; }

.lookup { display: flex; gap: 10px; width: 100%; max-width: 660px; flex-wrap: wrap; }
.lookup-card {
  width: 100%;
  max-width: 700px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  padding: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  transition: box-shadow 0.2s;
}
.lookup-card:hover { box-shadow: 0 28px 56px -26px rgba(17, 24, 39, 0.26); }
.lookup-card .field {
  flex: 1 1 260px;
  min-width: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.lookup-card .field:focus-within { box-shadow: none; }
/* Le formulaire remplit la carte : sans cela il garde sa largeur maximale
   d'origine (660 px) et laisse une bande vide sur la droite de la pastille. */
.lookup-card .lookup { max-width: none; }
/* En pastille, le champ prend la place restante et le bouton la sienne : les
   deux tiennent sur une ligne tant qu'il y a la place, et se separent sinon.
   Le bouton ne se coupe jamais, et garde son libelle entier. */
.lookup-card .btn { flex: 0 0 auto; white-space: nowrap; }
/* Sous 680 px, le champ et le bouton ne tiennent plus cote a cote : le bouton
   reprend toute la largeur, et la pastille redevient une carte arrondie. Le
   reste est deja regle par la feuille, au meme palier. */

.trust {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  padding: 7px 15px;
  border-radius: var(--r-pill);
}
.trust svg { flex-shrink: 0; }

/* bandeau de retour sous le formulaire, reutilise par la page d'accueil */
.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 660px;
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
}
.flash.info { background: var(--green-soft); border: 1px solid var(--green-line); color: var(--green); }
.flash.warn { background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber); }
.flash strong { font-weight: 800; }

/* --------------------------------------------------------------- sections */
section.block { padding: 58px 0; }

/* --------------------------------------------------------------- cartes */

.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tool {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: box-shadow 0.22s, border-color 0.22s, transform 0.22s;
}
.tool:hover { box-shadow: var(--sh-lg); border-color: #FFE4E6; transform: translateY(-3px); }
.tool .ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--accent-soft);
  color: var(--accent);
}
.tool .ic svg { width: 21px; height: 21px; }
.tool h3 { font-size: 17px; font-weight: 800; }
.tool p { font-size: 14px; color: var(--muted); margin-top: 9px; flex: 1; line-height: 1.65; }
.tool .more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 18px;
  transition: gap 0.18s, color 0.15s;
}
.tool:hover .more { gap: 11px; color: var(--accent-hover); }

/* ------------------------------------------ la page des outils (le choix)
   La porte « En ligne · Voir les outils gratuits » ouvre une page qui ne fait
   qu'une chose : demander par ou commencer. Deux outils aujourd'hui, donc deux
   colonnes. Posee ici, avant les media queries, pour que la grille retombe a
   une seule colonne sur telephone comme celle des trois cartes.
   La carte entiere est le lien : un seul arret de tabulation, rien a viser. */
.tools-two { grid-template-columns: repeat(2, 1fr); margin-top: 22px; }
.tool h2 { font-size: 17px; font-weight: 800; }
.tool .pub-points { margin-top: 16px; gap: 9px; }
.tool .pub-points li { font-size: 13.5px; }
.tool .pub-points .ic { width: 19px; height: 19px; margin-top: 2px; }
.tool .pub-points .ic svg { width: 11px; height: 11px; }
/* La pastille de la page des outils n'est pas une porte : elle dit ou l'on est.
   On lui retire donc l'affordance de survol, qui promettrait un clic. */
.nav-live.is-here, .nav-live.is-here:hover {
  cursor: default;
  border-color: var(--border-strong);
  background: var(--elev);
  color: var(--ink);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  align-self: flex-start;
  margin-bottom: 16px;
}
.badge.on { color: var(--green); background: var(--green-soft); border: 1px solid var(--green-line); }
.badge.off { color: var(--muted); background: var(--elev); border: 1px solid var(--border); }

.cta-box {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 52px 34px;
  text-align: center;
  box-shadow: var(--sh-lg);
}
.cta-box::before {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 230, 0.9), rgba(253, 251, 247, 0));
  pointer-events: none;
}
.cta-box > * { position: relative; }
.cta-box p { font-size: 15.5px; color: var(--muted); margin: 12px auto 0; max-width: 34rem; }
.cta-box .btn { margin-top: 26px; }

/* --------------------------------------------------------------- produit */
main.app { padding: 34px 0 68px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(25px, 3.2vw, 32px); }
.sub { font-size: 15px; color: var(--muted); margin-top: 7px; max-width: 42rem; }

.mode {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-radius: var(--r-lg);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.mode.ok { border-color: var(--green-line); background: var(--green-soft); color: #065F46; }
.mode svg { flex-shrink: 0; }
.mode .go {
  margin-left: auto;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  font-size: 13.5px;
  font-family: inherit;
  white-space: nowrap;
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 26px;
  margin-top: 22px;
  box-shadow: var(--sh-sm);
  scroll-margin-top: 92px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.panel h2 { font-size: 19px; }
/* Le titre de la veille : une seule ligne, lisible d'un coup d'oeil. Il remplace
   l'ancienne accroche en paragraphe et sert de h1 a la page. */
.panel-title { font-size: clamp(21px, 2.7vw, 27px); line-height: 1.25; margin-top: 15px; letter-spacing: -0.015em; }
.panel-note { font-size: 13.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--elev);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
/* Le plafond atteint se dit en ambre, la couleur d'attention du site (l'encart
   de risque et les pastilles « a declarer » de l'accueil). Le rouge reste au
   geste destructeur, la croix de suppression d'une commune. */
.count.full { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); }
.hint {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
  margin-top: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  padding: 15px 18px;
}
.note { font-size: 12.5px; color: var(--muted-2); margin-top: 20px; line-height: 1.65; }
.also { font-size: 12.5px; color: var(--muted-2); }
.empty { font-size: 13.5px; color: var(--muted-2); padding: 14px 2px; }
.empty a { color: var(--accent); font-weight: 700; }

/* ajout de commune
   Le lavis creme et l'arrondi des pastilles du site (celles des contreparties,
   celles du heros), pas un bloc plat au coin court : le formulaire se pose sur
   le panneau blanc comme une pastille, pas comme un encadre a part. */
.add {
  margin-top: 16px;
  display: grid;
  gap: 12px;
  background: var(--elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 18px;
}
.add-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.add-field { flex: 1 1 240px; }
.add-field.small { flex: 0 1 130px; }

/* liste des agents */
.prop {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
}
.prop:last-child { border-bottom: none; }
/* La pastille d'icone d'une commune suivie suit celle des cartes d'outils de
   l'accueil (.tool .ic) : lavis rose clair, icone rose, meme arrondi. L'aplat
   au degrade et son ombre portee rose en faisaient le seul element plein de la
   ligne, alors que l'accueil ne pose ce degrade que sur son bouton d'action. */
.prop .thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent);
}
.prop .thumb svg { width: 20px; height: 20px; }
.prop .mid { min-width: 0; }
.prop .mid .p { font-size: 15px; font-weight: 800; color: var(--ink); }
.prop .mid .s { font-size: 12.5px; color: var(--muted-2); margin-top: 3px; }
.prop .facts { grid-column: 2 / 4; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.fact {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 4px 10px;
}
.prop .right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.prop .rm {
  color: var(--muted-2);
  font-size: 18px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: var(--r-xs);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}
.prop .rm:hover { color: var(--red); background: var(--red-soft); }
/* Le bouton qui manquait : une commune suivie sans adresse n'attend pas une
   relecture, elle attend l'email. Le bouton le dit et ouvre la carte. */
.prop-cta { padding: 10px 16px; font-size: 14px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--green); background: var(--green-soft); border: 1px solid var(--green-line); }
.pill.warn { color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-line); }
.pill.gray { color: var(--muted); background: var(--elev); border: 1px solid var(--border); }

/* activation de l'agent */
.activate {
  margin-top: 20px;
  background: var(--elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 22px;
}
.activate h3 { font-size: 16.5px; font-weight: 800; }
.activate p { font-size: 13.5px; color: var(--muted); margin-top: 7px; }
.act-row { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
.act-row input { flex: 1 1 240px; }
.activate .check { margin-top: 13px; }
.activate .done-state {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--green);
  font-weight: 700;
  margin-top: 14px;
}
.activate .done-state svg { flex-shrink: 0; margin-top: 2px; }

/* Le panneau d'activation est la carte de tete de l'espace : il reprend la
   recette de la carte « le risque local » de l'accueil — un lavis qui s'efface
   vers le blanc en diagonale, un filet teinte, l'arrondi large et l'ombre
   moyenne — en rose au lieu de l'ambre. Il portait en plus une barre de 4 px au
   degrade et une pastille pleine : les deux derniers restes de l'ancien
   habillage, et les seules surfaces saturees du site hors bouton d'action. */
#activateBox {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-soft) 0%, #FFFFFF 62%);
  border-color: var(--accent-line);
  box-shadow: var(--sh-md);
}
.notice-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 9px 18px;
  border-radius: var(--r-pill);
}
/* La veille active passe au vert, la couleur du succes sur tout le site (la
   pastille « Gratuit » de la carte d'activation, la ligne de confiance du
   heros, la pastille d'etat des guides). Sans ce reglage, les deux etats du
   panneau se ressemblaient trait pour trait. */
#activateBox[data-active="1"] .notice-badge {
  color: var(--green);
  background: var(--green-soft);
  border-color: var(--green-line);
}
.live-ic { width: 17px; height: 17px; flex-shrink: 0; animation: livePulse 1.4s ease-in-out infinite; }
.live-txt { animation: blink 1.4s ease-in-out infinite; }

/* modale de suivi d'une grande ville */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 30, 0.48);
  border: none;
  width: 100%;
  height: 100%;
  cursor: pointer;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 26px;
  box-shadow: var(--sh-lg);
  animation: rise 0.18s ease-out;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-card h3 { font-size: 19px; }
.modal-hint { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--elev);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.modal-x:hover { background: var(--accent-soft); color: var(--accent-hover); }
.modal-card input[type="email"], .modal-card input[type="text"] { width: 100%; }
.modal-card .btn { width: 100%; }

/* villes pretes a ajouter */
.quick-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* grandes villes pre-remplies, avec preuve sociale */
.featured { margin-top: 24px; }
.featured-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.featured-note { font-size: 12.5px; color: var(--muted-2); }
.featured-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.fcity {
  position: relative;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 26px 28px;
  box-shadow: var(--sh-xs);
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.fcity::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.16s;
}
.fcity:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--sh-lg); }
.fcity:hover::before { opacity: 1; }
.fcity-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.fcity-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.fcity-name { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.fcity-zip { font-size: 14px; color: var(--muted-2); font-weight: 600; }
.fcity-facts { display: flex; flex-direction: column; gap: 7px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.fcity-line { display: block; }
.fcity-site {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-hover);
  margin-top: 2px;
}
.fcity-site svg { width: 15px; height: 15px; flex-shrink: 0; }
.fcity-site-txt { white-space: nowrap; }

/* Ligne de veille : la derniere decision verifiee a la source. Un encadre
   sobre, distinct du bloc de faits, pour qu'on voie au premier regard ce qui
   est date et rattache a un document. */
.fcity-veille {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 2px 0 4px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
}
.fcity-veille-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fcity-veille-tag {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-hover);
}
.fcity-veille-date { font-size: 12.5px; font-weight: 700; color: var(--muted-2); }
.fcity-veille-label { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.fcity-veille-src { font-size: 12.5px; color: var(--muted-2); line-height: 1.4; }
.fcity-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fcity-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.fcity-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.fcity-followers { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green); white-space: nowrap; }
.fcity-followers.none { color: var(--muted-2); font-weight: 600; }
.fcity-followers svg { width: 14px; height: 14px; flex-shrink: 0; }
.fcity-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-rose);
  transition: background 0.15s, gap 0.15s;
  white-space: nowrap;
}
.fcity:hover .fcity-cta { background: var(--accent-hover); gap: 10px; }
/* Sur telephone, la carte change de metier : au lieu d'entasser la fiche
   communale sur 390px de large, elle se lit comme une petite annonce. Le nom
   d'abord, puis ce qui a change (l'information qui vaut le detour), puis les
   regles pratiques, et l'action en dernier dans sa propre zone. Ce qui etait
   tasse : sept tailles de texte entre 11,5 et 15px, un bouton de 14px coince
   dans une ligne avec le compteur, et des libelles plus petits que le texte
   qu'ils annoncent. Ici chaque bloc respire, et le geste « Suivre » occupe
   toute la largeur, sous le pouce. */
@media (max-width: 680px) {
  .fcity {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 18px 16px 16px;
  }
  .fcity-main { gap: 14px; }
  .fcity-top { align-items: baseline; justify-content: space-between; gap: 12px; }
  .fcity-name { font-size: 26px; }
  .fcity-zip { font-size: 14.5px; }

  /* Le bloc « derniere evolution » est la raison de lire la carte : il prend
     la taille du corps de texte, et son etiquette cesse de passer sur deux
     lignes. */
  .fcity-veille { gap: 7px; margin: 0; padding: 15px 16px; border-radius: var(--r-lg); }
  .fcity-veille-top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fcity-veille-tag { font-size: 11px; letter-spacing: 0.05em; }
  .fcity-veille-date { font-size: 13.5px; }
  .fcity-veille-label { font-size: 16.5px; line-height: 1.45; }
  .fcity-veille-src { font-size: 13px; line-height: 1.5; }

  /* Les regles pratiques : une ligne par information, interligne large. */
  .fcity-facts { gap: 12px; font-size: 15.5px; line-height: 1.6; }
  .fcity-tags { gap: 8px; margin-top: 2px; }
  .fcity-tag { font-size: 13px; padding: 7px 14px; }
  .fcity-site { font-size: 13.5px; }

  /* L'action sort de la ligne ou elle se battait avec le compteur : un filet
     la separe du texte, et le bouton prend toute la largeur. */
  .fcity-side {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .fcity-followers { font-size: 13.5px; }
  .fcity-cta {
    width: 100%;
    justify-content: center;
    padding: 16px 22px;
    font-size: 16px;
    border-radius: var(--r-lg);
  }
  .featured-note { font-size: 13px; line-height: 1.55; }
  .quick-label { font-size: 12.5px; }
}

/* compte */
.account { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.account .me { font-size: 14px; color: var(--ink); font-weight: 700; }
.danger {
  color: var(--red);
  background: none;
  border: 1px solid var(--red-line);
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  padding: 10px 15px;
  border-radius: var(--r-sm);
  transition: background 0.15s;
}
.danger:hover { background: var(--red-soft); }

/* --------------------------------------------------------------- rapport */
.steps { margin-top: 16px; }
.step {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--border);
  opacity: 0.4;
  transition: opacity 0.3s;
}
.step:last-child { border-bottom: none; }
.step.act, .step.done { opacity: 1; }
.step .ic {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  color: var(--muted-2);
  background: var(--elev);
}
.step.act .ic { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.step.done .ic { border-color: var(--green-line); background: var(--green-soft); color: var(--green); }
.step .spin {
  width: 11px;
  height: 11px;
  border: 2px solid rgba(225, 29, 72, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rot 0.8s linear infinite;
  display: none;
}
.step.act .spin { display: block; }
.step .ic svg { display: none; }
.step.done .ic svg { display: block; }
.step .body { flex: 1; min-width: 0; }
.step .t { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.step .src { font-size: 12px; color: var(--muted-2); margin-top: 2px; word-break: break-word; }
.step .state { font-size: 11.5px; font-weight: 700; color: var(--muted-2); white-space: nowrap; padding-top: 2px; }
.step.act .state { color: var(--accent); }
.step.done .state { color: var(--green); }

.rblock { margin-top: 16px; }
.rblock h3 {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 9px;
}
.rtable {
  width: 100%;
  border-collapse: collapse;
  background: var(--elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rtable td {
  text-align: left;
  padding: 11px 15px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 13.5px;
}
.rtable tr:last-child td { border-bottom: none; }
.rtable .rk { font-weight: 700; color: var(--ink); white-space: nowrap; width: 34%; }
.rtable .rv { color: var(--text); }
.rlist { margin: 6px 0 0; padding-left: 18px; }
.rlist li { font-size: 13.5px; margin: 7px 0; }
.rlist .n { font-size: 12px; color: var(--muted-2); }

/* La fiche est le resultat du travail de l'agent : elle se lit floutee tant
   que l'adresse n'a pas ete donnee, comme la liste des proprietaires et le
   guide. Le flou est une invitation, pas une protection : le texte reste dans
   le document. L'invite qui l'accompagne est le seul endroit ou l'on demande
   quelque chose sur cette page. */
.report-lock {
  margin-top: 18px;
  padding: 20px 22px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
}
.report-lock-t { font-weight: 800; color: var(--ink); font-size: 15.5px; }
.report-lock-s { font-size: 13.5px; color: var(--text); margin: 7px 0 14px; line-height: 1.55; }
#reportBody.locked, #checkResult.locked, .page-report #report.locked {
  filter: blur(7px); pointer-events: none; user-select: none; }

/* Dernieres decisions verifiees, dans la fiche communale : une ligne par
   decision, avec sa date et son document source. */
.rveille { list-style: none; margin: 8px 0 0; padding: 0; }
.rveille-item {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
}
.rveille-item:last-child { margin-bottom: 0; }
.rveille-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rveille-kind {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-hover);
}
.rveille-date { font-size: 12.5px; font-weight: 700; color: var(--muted-2); }
.rveille-nat {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 2px 9px;
}
.rveille-label { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.rveille-detail { font-size: 13.5px; color: var(--text); line-height: 1.6; margin-top: 5px; }
.rveille-src { font-size: 12px; color: var(--muted-2); margin-top: 7px; }
.rveille-src a { color: var(--accent-hover); }
.rveille-note { font-size: 12.5px; color: var(--muted-2); line-height: 1.55; margin: 10px 0 0; }
.rnote {
  margin-top: 13px;
  font-size: 13px;
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: 13px 16px;
}
.rnote strong { color: var(--amber); }
.rnote.ok { background: var(--green-soft); border-color: var(--green-line); }
.rnote.ok strong { color: var(--green); }
.rsrc { font-size: 12px; color: var(--muted-2); margin-top: 15px; }

.weekly-note { font-size: 13.5px; color: var(--muted); }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.rule { height: 5px; background: var(--grad); border-radius: 3px; margin: 18px 0 28px; }
.reveal { display: none; }
.reveal.shown { display: block; animation: rise 0.6s ease both; }

/* --------------------------------------------------------------- fiche publique
   La page rapport partage des noms de classes avec l'espace (note, steps,
   foot) mais pas leur sens : tout est donc scope sous .page-report. */
.page-report .meta { font-size: 14px; color: var(--muted); margin-top: 8px; }
.page-report .eyebrow { margin-bottom: 2px; }
.page-report .weekly { font-size: 13.5px; color: var(--muted); }
.page-report h2 { font-size: 19px; font-weight: 800; margin: 36px 0 12px; }
.page-report #report { display: none; }
.page-report #report.shown { display: block; animation: rise 0.6s ease both; }
.page-report .steps {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 6px 22px;
  margin-top: 12px;
  box-shadow: var(--sh-xs);
}
.page-report .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-top: 12px;
  box-shadow: var(--sh-xs);
}
.page-report table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.page-report td, .page-report th {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 14.5px;
  color: var(--text);
}
.page-report th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 800;
}
.page-report tr:last-child td { border-bottom: none; }
.page-report .k { font-weight: 700; color: var(--ink); white-space: nowrap; width: 36%; }
.page-report ul { padding-left: 20px; }
.page-report li { margin: 8px 0; font-size: 14.5px; color: var(--muted); }
.page-report li strong { color: var(--ink); }
.page-report .note {
  background: var(--elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-sm);
  padding: 15px 18px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
}
.page-report .note strong { color: var(--amber); }
.page-report .note.green { border-left-color: var(--green); background: var(--green-soft); }
.page-report .note.green strong { color: var(--green); }
.page-report .cta-box { margin-top: 42px; }
.wl { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.wl .field { flex: 1 1 260px; max-width: 340px; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  text-align: left;
  max-width: 460px;
  margin: 14px auto 0;
}
.consent input { margin-top: 3px; accent-color: var(--accent); width: auto; }
.page-report .foot { display: block; font-size: 12.5px; color: var(--muted-2); }
.page-report .foot p { max-width: 60rem; line-height: 1.7; }

@media (max-width: 560px) {
  .page-report .k { width: 100%; display: block; padding-bottom: 0; }
  .page-report td { display: block; padding: 6px 0; }
  .page-report tr { display: block; border-bottom: 1px solid var(--border); }
  .page-report tr:last-child { border-bottom: none; }
  .page-report .steps, .page-report .card { padding: 8px 16px; }
}

/* --------------------------------------------------------------- avis */
.toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #1F2937;
  border: 1px solid #1F2937;
  color: #F9FAFB;
  font-size: 13px;
  font-weight: 600;
  padding: 13px 16px;
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  max-width: 340px;
}
.toast.on { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------- pied */
footer { border-top: 1px solid var(--border); padding: 32px 0; }
.foot {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted-2);
}
.foot .legal { max-width: 60rem; font-size: 12px; line-height: 1.7; }
.foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot a { font-weight: 600; }
.foot a:hover { color: var(--accent); }
/* Les pages publiques, liees entre elles. C'est le seul bloc present sur tout
   le site : sans lui, une page que rien ne cite reste invisible — le plan la
   liste, mais aucun texte ne repond d'elle. Elles se lisent plus sombres que
   les liens legaux, parce que ce sont des portes, pas des mentions. */
.foot .foot-pages { font-size: 13px; }
.foot .foot-pages a { color: var(--text); }
.foot .foot-pages a:hover { color: var(--accent); }

/* --------------------------------------------------------------- legal */
body.legal-page { background: var(--bg); }
.legal-wrap { max-width: var(--max); margin: 0 auto; padding: 36px 24px 80px; }
.legal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  font-size: 13.5px;
}
.legal-nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.legal-nav a { color: var(--muted-2); }
.legal-nav a:hover, .legal-nav a[aria-current] { color: var(--accent); }
.card-legal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 40px;
  box-shadow: var(--sh-sm);
}
.card-legal h1 { font-size: clamp(24px, 3.4vw, 32px); }
.card-legal h2 { font-size: 17.5px; font-weight: 800; margin: 30px 0 10px; }
.card-legal p, .card-legal li { color: var(--muted); font-size: 14.5px; }
.card-legal ul { padding-left: 20px; margin: 8px 0; }
.card-legal a { color: var(--accent); font-weight: 600; }
.card-legal .meta { font-size: 12.5px; color: var(--muted-2); margin-top: 8px; }
.card-legal .box {
  background: var(--accent-soft);
  border: 1px solid #FFE4E6;
  border-radius: var(--r);
  padding: 16px 20px;
  margin: 16px 0;
}
.card-legal .box strong { color: var(--accent-hover); }
.card-legal mark.missing {
  background: var(--amber-soft);
  color: var(--amber);
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 700;
}
.card-legal .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.card-legal .pills li {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border: 1px solid #FFE4E6;
  border-radius: var(--r-pill);
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 700;
}
.legal-back { margin-top: 26px; font-size: 13.5px; font-weight: 600; text-align: center; }
.legal-back a { color: var(--muted-2); }
.legal-back a:hover { color: var(--accent); }
.legal-top .brand img { height: 30px; }

/* --------------------------------------------------------------- anims */
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.12); } }
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }

/* --------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .tools { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .tools { grid-template-columns: 1fr; }
  .cta-box { padding: 40px 24px; }
  .hero { padding: 44px 0 40px; }
  /* Le champ et le bouton ne tiennent plus cote a cote : la pastille redevient
     une carte arrondie, et le bouton prend toute la largeur. */
  .lookup-card { border-radius: var(--r-xl); }
  .lookup-card .btn { width: 100%; flex: 1 1 100%; }
  .nav { height: 62px; gap: 10px; }
  .brand { font-size: 16px; }
  .brand img, .brand .logo { height: 28px; }
  .nav-right { gap: 12px; font-size: 13px; }
  .nav-cta { padding: 8px 13px; font-size: 13px; }
  .nav-right .nav-link { display: none; }
  /* La pastille de statut garde son point qui bat et son acces aux outils,
     mais raccourcit son libelle : sur un ecran de telephone, la phrase
     entiere passerait sur deux lignes. Le point vert dit deja le direct. */
  .nav-live { padding: 8px 13px; gap: 7px; }
  .nav-live .live-word, .nav-live .live-sep, .nav-live .live-long { display: none; }
  .nav-live .live-short { display: inline; }
  .panel { padding: 20px; }
  .card-legal { padding: 26px 22px; }
  /* Les communes suivies : le nom et son sous-titre prennent la taille du corps
     de texte, et la croix de suppression devient une vraie cible (40px) plutot
     qu'un caractere de 12px au bout de la ligne. La pastille et la croix se
     partagent la largeur : l'une a gauche, l'autre a droite. */
  .prop { grid-template-columns: 44px 1fr; gap: 13px; padding: 15px 2px; }
  .prop .right {
    grid-column: 1 / 3;
    justify-self: stretch;
    justify-content: space-between;
    margin-top: 4px;
  }
  .prop .facts { grid-column: 1 / 3; }
  .prop .mid .p { font-size: 17px; }
  .prop .mid .s { font-size: 13.5px; margin-top: 4px; line-height: 1.5; }
  .prop .rm {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 20px;
    border: 1px solid var(--border);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------- vos données publiques */
.rnote.amber { background: var(--amber-soft); border: 1px solid var(--amber-line); }
.rnote.amber strong { color: var(--amber); }
.rnote.rose { background: var(--accent-soft); border: 1px solid var(--accent-line); }
.rnote.rose strong { color: var(--accent); }

.kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }

/* ------------------------------------------- le registre de la commune
   Un seul bloc pour deux gestes : la liste floutée (ligne pliable, masque au
   centre) et la recherche par nom (qui allume la ligne trouvée). La ligne
   d'en-tête est un bouton, donc elle se plie au clavier comme à la souris. */
.reg-row { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
.reg-row .field { flex: 1 1 260px; }
.reg-row .btn { flex: 0 0 auto; }
.reg-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.reg-chip { font-size: 12.5px; color: var(--muted); background: var(--elev);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 5px 12px; }
.reg-chip strong { color: var(--ink); font-weight: 800;
  font-variant-numeric: tabular-nums; }
.reg-chip.warn { color: var(--amber); background: var(--amber-soft);
  border-color: var(--amber-line); }
.reg-chip.warn strong { color: var(--amber); }
.reg-empty { font-size: 13.5px; color: var(--muted-2); line-height: 1.6;
  background: var(--elev); border: 1px dashed var(--border-strong);
  border-radius: var(--r); padding: 16px; margin: 0; }

.owner-list { margin-top: 16px; display: grid; gap: 10px; }
.owner-list.loading { opacity: 0.55; transition: opacity 0.2s; }
.owner-row { background: var(--elev); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.owner-row:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm);
  transform: translateY(-1px); }
/* La liste se remplit en cascade : deux dixiemes de seconde par ligne, assez
   pour voir que quelque chose arrive, trop court pour attendre. */
.owner-row.in { animation: ownerIn 0.34s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
@keyframes ownerIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.owner-row.you { border-color: var(--accent-line); background: var(--accent-soft); }
.owner-row.you.hit { animation: ownerHit 0.9s ease-out both; }
@keyframes ownerHit {
  0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.34); }
  70% { box-shadow: 0 0 0 9px rgba(225, 29, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}
.owner-head {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px;
  background: none; border: none; font-family: inherit; text-align: left;
  cursor: pointer; color: inherit;
}
.owner-rank { font-weight: 800; font-size: 13px; color: var(--muted);
  width: 22px; flex-shrink: 0; }
.owner-ava { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--muted);
  background: #fff; border: 1px solid var(--border-strong);
  letter-spacing: 0.02em; }
.owner-row.you .owner-ava { color: var(--accent); border-color: var(--accent-line); }
.owner-mask { flex: 1; min-width: 0; }
.owner-name { display: block; font-weight: 700; font-size: 14.5px; color: var(--ink);
  filter: blur(5px); user-select: none; }
.owner-meta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.owner-you { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--accent); background: #fff;
  border: 1px solid var(--accent-line); border-radius: var(--r-pill);
  padding: 1px 8px; margin-left: 8px; }
.owner-toggle { font-size: 12.5px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.owner-head:hover .owner-toggle { color: var(--ink); }
.owner-head:hover .owner-ava { border-color: var(--accent-line); color: var(--accent); }
.owner-chev { flex-shrink: 0; color: var(--muted-2); transition: transform 0.18s; }
.owner-head[aria-expanded="true"] .owner-chev { transform: rotate(180deg); }
.owner-head[aria-expanded="true"] { border-bottom: 1px solid var(--border); }
.owner-detail { padding: 14px 16px; background: var(--elev); }
.owner-facts { display: grid; gap: 10px; margin: 0; }
.owner-facts dt { font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted-2); }
.owner-facts dd { margin: 3px 0 0; font-size: 13.5px; color: var(--text); }
.owner-fine { font-size: 12px; color: var(--muted-2); line-height: 1.55;
  margin-top: 12px; }
.owner-note { font-size: 12.5px; color: var(--muted-2); margin-top: 10px;
  line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .owner-row.in, .owner-row.you.hit { animation: none; }
  .owner-chev, .owner-row { transition: none; }
  .owner-row:hover { transform: none; }
}
@media (max-width: 560px) {
  .owner-toggle { display: none; }
  .owner-ava { width: 30px; height: 30px; font-size: 11px; }
}
.linkbtn { background: none; border: none; padding: 0; font: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--accent-hover); }
.reg-result { margin-top: 18px; }
.reg-result:empty { margin-top: 0; }
.reg-actions { margin-top: 12px; }

.offer { border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: var(--r-lg); padding: 20px; margin-top: 14px; }
.offer .top { display: flex; justify-content: space-between; align-items:
  baseline; gap: 12px; flex-wrap: wrap; }
.offer p { font-size: 13.5px; margin: 12px 0 4px; }
.price-tag { font-size: 15px; font-weight: 800; color: var(--ink); }
.price-tag small { font-size: 12px; color: var(--muted); font-weight: 500; }

.check-list { list-style: none; padding: 0; margin: 12px 0 0; }
.check-list li { display: flex; gap: 10px; padding: 9px 0; font-size: 13.5px;
  border-bottom: 1px dashed var(--border); }
.check-list li:last-child { border-bottom: none; }
.check-list .ic { color: var(--green); font-weight: 800; flex-shrink: 0; }

.act-pick { display: grid; gap: 10px; margin: 14px 0 4px; }
.act-pick label { display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--r); cursor: pointer; font-size: 13.5px; }
.act-pick label.on { border-color: var(--accent-line);
  background: var(--accent-soft); }
.act-pick input { margin-top: 3px; accent-color: var(--accent);
  width: auto; flex-shrink: 0; }
.act-pick b { display: block; color: var(--ink); }
.act-pick span.d { color: var(--muted); font-size: 12.5px; }

.divider { border-top: 1px solid var(--border); margin: 24px 0; }
.legal-fine { font-size: 12px; color: var(--muted-2); margin-top: 12px; }

/* ---------------------------------------- être en règle, en tête de page
   Ce bloc ouvre « Vos données publiques » : avant de savoir ce qui est déjà
   public, la question est « suis-je en règle ». Meme recette que le bandeau
   de la page d'accueil (degrade rose), mais aligne a gauche : il porte une
   liste, pas un slogan. Chaque obligation donne sa raison legale, et la
   sanction quand la loi en prevoit une : ce qui separe un rappel utile d'un
   discours de peur, c'est la reference qu'on peut verifier. */
.law-band {
  border: 1px solid var(--accent-line);
  background: linear-gradient(135deg, var(--accent-soft) 0%, #FFFFFF 62%);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-sm);
  padding: 30px 32px 28px;
  margin-top: 22px;
}
.law-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.law-band h2 {
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.16;
  max-width: 40rem;
}
.law-lede {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 42rem;
  margin-top: 12px;
}
.law-lede strong { color: var(--ink); font-weight: 700; }
.law-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  counter-reset: law;
}
.law-list > li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px dashed var(--border-strong);
}
.law-item-n {
  counter-increment: law;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.law-item-n::before { content: counter(law); }
.law-item-b { flex: 1; min-width: 0; }
/* Une ligne par obligation, en clair : le libelle en gras, la phrase en
   romain. Le detail (texte de loi, sanction) est replie dessous. */
.law-do { font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.5; }
.law-do b { font-weight: 800; }
.law-do em { font-style: normal; font-weight: 500; color: var(--muted); }
.law-max { white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--amber); }
.law-more { margin-top: 7px; }
.law-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 3px 11px;
  cursor: pointer;
  list-style: none;
}
.law-more > summary::-webkit-details-marker { display: none; }
.law-more > summary::after { content: "+"; font-weight: 800; color: var(--accent); }
.law-more[open] > summary::after { content: "\2212"; }
.law-more > summary:hover { color: var(--ink); border-color: var(--accent-line); }
.law-more[open] > summary { margin-bottom: 6px; }
.law-why { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 5px; }
.law-why b { color: var(--ink); font-weight: 700; }
.law-why em { font-style: italic; color: var(--muted-2); }
.law-ref {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  padding: 2px 7px;
  margin-right: 5px;
  line-height: 1.45;
}
.law-risk { font-size: 12.5px; color: var(--amber); line-height: 1.55; margin-top: 5px; }
.law-risk b { font-weight: 800; }
.law-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.law-fine {
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.6;
  margin-top: 14px;
  max-width: 44rem;
}
@media (max-width: 680px) {
  .law-band { padding: 24px 18px 22px; }
}

/* ------------------------------------------ la carte « mise en conformité »
   Dans la liste des démarches, la création du SIREN/SIRET n'est pas une
   demande de retrait : c'est l'inverse, une entrée au registre. Elle porte
   donc un lisere ambre et sa propre pastille, pour qu'on ne la confonde pas
   avec les deux demandes de non-diffusion qui la suivent. Elle occupe une
   case comme les autres : la distinguer par un fond different, oui ; par une
   taille differente, non — c'est la meme demarche a faire, au meme rang. */
.guide-card.conform {
  border-color: var(--amber-line);
  background: linear-gradient(180deg, var(--amber-soft) 0%, var(--elev) 70%);
}
.guide-pill.duty { color: var(--amber); background: #fff;
  border-color: var(--amber-line); }
.guide-card.conform .guide-num { background: #fff; border-color: var(--amber-line);
  color: var(--amber); }

/* ------------------------------------------------- bandeau "donnees publiques" */
/* La bande se lit en deux volets : ce que l'outil apporte, puis l'apercu de la
   fiche. Les deux volets s'alignent en haut, et la colonne de texte se cale
   verticalement quand l'apercu est plus court. */
.pub-band { padding: 8px 0 40px; }
.pub-band-inner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 38px;
  align-items: center;
  background: linear-gradient(135deg, var(--accent-soft) 0%, #FFFFFF 60%);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-2xl);
  padding: 44px 40px 40px;
  box-shadow: var(--sh-sm);
  text-align: left;
}
.pub-band-inner::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 29, 72, 0.13),
    rgba(253, 251, 247, 0) 70%);
  pointer-events: none;
}
.pub-band-copy {
  position: relative;
  min-width: 0;
}
.pub-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.pub-band h2 {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.pub-lede {
  margin: 12px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 34rem;
}
/* Les trois apports, en lignes cochees : le volet est a gauche, donc les
   lignes s'alignent sur le texte au lieu de se centrer. */
.pub-points {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 10px;
}
.pub-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.pub-points .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--green);
}
.pub-points .ic svg { width: 12px; height: 12px; }
.pub-band-act {
  position: relative;
  margin-top: 26px;
}
/* Le bouton reste sur la largeur de son libelle : c'est une action, pas une
   banniere. */
.pub-band-act .pub-btn { max-width: 100%; }
.pub-btn { white-space: nowrap; }
.pub-btn svg { transition: transform 0.2s; }
.pub-btn:hover svg { transform: translateX(3px); }
.pub-band-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
/* Le renvoi vers les guides : la bande dit ce qui est public, les guides
   disent comment le retirer. Discret, une ligne sous l'action. */
.pub-band-more {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.pub-band-more a { color: var(--accent); font-weight: 700; }
.pub-band-more a:hover { color: var(--accent-hover); text-decoration: underline; }
/* L'apercu de la fiche : une carte blanche posee sur le fond rose, avec ses
   trois champs et leur etat. C'est une illustration, pas une capture : le pied
   de carte le dit, et les libelles sont ceux du registre, pas d'une commune
   inventee. */
.reg-preview {
  position: relative;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: 18px 18px 16px;
}
.reg-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}
.reg-preview-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.reg-preview-rows { list-style: none; padding: 0; margin: 0; }
.reg-preview-rows li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  font-size: 14px;
}
.reg-preview-rows li + li { border-top: 1px solid var(--border); }
.reg-preview-rows .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--elev);
  color: var(--muted);
}
.reg-preview-rows .ic svg { width: 16px; height: 16px; }
.reg-preview-rows .lbl {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  color: var(--ink);
}
.reg-preview-rows .pill { flex: 0 0 auto; }
.reg-preview-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted-2);
}
@media (max-width: 940px) {
  .pub-band-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pub-lede { max-width: 44rem; }
}
@media (max-width: 680px) {
  .pub-band-inner { padding: 32px 22px 28px; }
  .pub-btn { width: 100%; }
}

/* ------------------------------------------------- carte "le risque local"
   Une mise en garde, pas une nouveaute : meme recette que la carte donnees
   publiques, mais en ambre. Elle vit sous le heros, en carte centree : le
   texte se lit d'un bloc, et la largeur bornee l'empeche de s'etirer en
   bandeau. Aucun bouton : le formulaire du heros reste la seule action. */
.risk-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--amber-soft) 0%, #FFFFFF 62%);
  border: 1px solid var(--amber-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: 24px 26px;
  text-align: left;
}
.risk-body { min-width: 0; }
.risk-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: rgba(180, 83, 9, 0.12);
  color: var(--amber);
}
.risk-ic svg { width: 24px; height: 24px; }
.risk-kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}
.risk-title {
  font-size: 17.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.risk-lede {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
/* Le montant et son symbole restent solidaires : sans cela, sur mobile le
   signe euro tombe seul a la ligne, detache du chiffre qu'il designe. */
.risk-lede strong { color: var(--ink); font-weight: 800; white-space: nowrap; }
@media (max-width: 680px) {
  .risk-card { flex-direction: column; gap: 14px; padding: 18px 18px; }
}

/* =========================================================== fork alpha ===
   Composants propres a la version alpha : les contreparties de la carte
   d'activation, les demarches guidees faites soi meme, et l'annuaire de
   prestataires. */

/* ------------------------------------------- contreparties de l'activation
   Ce que l'adresse ouvre, en grille 2 x 2 : quatre pastilles de meme taille,
   alignees, plutot qu'une rangee qui se casse au gre de la longueur des
   libelles. La grille est bornee a 580 px, de quoi laisser a chaque colonne
   les 240 px dont le plus long libelle a besoin ; plus etroite, il passait a
   la ligne tout seul.
   Sur un telephone, la grille passe a une colonne. */
.letter-perks {
  list-style: none;
  padding: 0;
  margin: 24px auto 0;
  max-width: 580px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Les quatre pastilles font la meme taille, quoi qu'il arrive aux libelles :
     la plus haute fixe la hauteur de sa rangee, et les autres suivent. */
  grid-auto-rows: 1fr;
  gap: 10px;
}
.letter-perks li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--elev);
  border: 1px solid var(--border-strong);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  text-align: left;
}
.letter-perks .ic { display: inline-flex; color: var(--green); flex-shrink: 0; }
.letter-perks .ic svg { width: 14px; height: 14px; }
/* Les quatre contreparties partagent la meme pastille claire. La premiere se
   distingue par le gras de son libelle, pas par un aplat de couleur : un fond
   plein pesait plus lourd que le reste de la carte. */
.letter-perks li strong { font-weight: 800; }

/* Le verrou d'acces par la lettre a ete retire : les guides s'ouvrent a tout
   le monde, sans adresse. Il ne reste de ce mecanisme que la cle de
   deverrouillage du resultat de recherche (vos-donnees-publiques.js), qui
   n'affiche plus rien ici. */

/* ---------------------------------------------------- carte d'activation
   Une seule carte pour toutes les demandes d'adresse email du site : suivre
   une commune, activer la veille, débloquer les guides. Le balisage vient de
   activation.py, l'apparence d'ici. Le mode (veille ou guide) ne change que le
   titre, l'accroche et le bouton : les contreparties sont identiques, parce
   que c'est la même adresse et donc la même promesse. */
.activation {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  overflow-y: auto;
}
.activation[hidden] { display: none; }
.activation-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  background: rgba(20, 18, 30, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
/* Le plafond de hauteur est ce qui empeche la coupure : centre verticalement,
   la carte deborde par le haut des qu'elle depasse la fenetre, et le titre
   disparait. Elle defile donc a l'interieur, et reste entiere. */
.activation-card {
  position: relative;
  width: 100%;
  max-width: 700px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 34px 40px 30px;
  box-shadow: var(--sh-lg);
  animation: rise 0.2s ease-out;
  text-align: left;
}
.activation-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--elev);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.activation-x:hover { background: var(--accent-soft); color: var(--accent-hover); }
.activation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-right: 38px;
}
.activation-logo { width: 34px; height: 34px; }
.activation-badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  padding: 4px 11px;
  border-radius: var(--r-pill);
}
.activation-title {
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.14;
  margin: 0;
}
.activation-lede {
  margin: 11px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}
/* Le titre et l'accroche occupent toute la largeur : la promesse se lit en
   grand, avant les deux colonnes. */
.activation-mode { margin: 0; }
.activation-mode[hidden] { display: none; }
/* Le corps : les contreparties a gauche, l'action a droite. La carte reste
   lisible d'un coup d'oeil, et le bouton remonte au-dessus de la ligne de
   flottaison sur un ecran de portable. */
.activation-body {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items: start;
  margin-top: 20px;
}
.activation-pitch { min-width: 0; }
.activation-action { min-width: 0; }
/* Les contreparties remplacent leur titre de section par un filet : dans la
   colonne, la liste se lit comme la suite de l'accroche. */
.activation-sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 17px 0 9px;
}
.activation-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.activation-benefit {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
}
.activation-benefit .ic {
  display: inline-flex;
  color: var(--green);
  margin-top: 1px;
}
.activation-benefit .ic svg { width: 20px; height: 20px; }
.activation-benefit .txt { display: grid; gap: 2px; }
.activation-benefit b {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.activation-benefit span span {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.5;
}
/* La bande de reassurance passe sous les deux colonnes, en travers. */
.activation-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 24px 0 0;
  border: 1px solid var(--green-line);
  border-radius: var(--r-lg);
  background: var(--green-soft);
  overflow: hidden;
}
.activation-proof-item {
  display: grid;
  gap: 3px;
  padding: 13px 15px;
  border-left: 1px solid var(--green-line);
}
.activation-proof-item:first-child { border-left: none; }
.activation-proof-item b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green);
  line-height: 1.3;
}
.activation-proof-item span {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* La colonne de droite porte le champ : un filet la separe de la promesse. */
.activation-steps {
  padding-left: 26px;
  border-left: 1px solid var(--border);
}
.activation-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
}
.activation-card input[type="email"],
.activation-card input[type="text"] {
  width: 100%;
  font-size: 15.5px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--elev);
  color: var(--ink);
}
.activation-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.activation-consent { margin: 13px 0 0; font-size: 12.5px; line-height: 1.55; }
/* La phrase qui suit le bouton dit ce qui se passe ensuite, selon le mode :
   une fiche qui part, ou un guide qui s'ouvre tout de suite. */
.activation-next {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  text-align: center;
}
.activation-cta {
  width: 100%;
  margin-top: 17px;
  padding: 17px 24px;
  font-size: 16px;
  justify-content: center;
}
/* Le parcours en trois temps, sous le bouton : ce qui est demande, ce qui est a
   confirmer, et ce qui reste a faire ensuite. Les numeros se suivent parce que
   l'ordre compte : on ne confirme qu'apres avoir donne l'adresse. */
.activation-how {
  list-style: none;
  counter-reset: how;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 11px;
}
.activation-how li {
  counter-increment: how;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.activation-how li > span { display: block; }
.activation-how li::before {
  content: counter(how);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
  background: var(--elev);
  border: 1px solid var(--border-strong);
}
.activation-how b { color: var(--ink); font-weight: 800; }
.activation-flash {
  margin: 13px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.activation-flash.good { color: var(--green); }
.activation-flash.bad { color: var(--accent); }
/* La mention de fin : ce qui est vrai de l'adresse partout, y compris le role
   de Substack pour la lettre, et les liens vers les pages legales. */
.activation-fine {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin: 15px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.activation-fine a {
  color: var(--text);
  text-decoration: underline;
}
.activation .btn:disabled { opacity: 0.6; cursor: default; }

/* ---------------------------------------- carte d'activation, version telephone
   Le meme balisage, mais une autre mise en page. Sur un telephone (390px), la
   carte centree ne laissait que 312px au champ email, place sous quatre lignes
   d'accroche, et elle defilait a l'interieur d'une page qui defilait aussi :
   au doigt, la page bougeait sous la carte. Ici la carte prend l'ecran, comme
   une feuille : le champ email vient en premier, sur toute la largeur, et le
   reste de la promesse suit. Rien ne change cote HTML ni cote script. */
@keyframes sheetUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 680px) {
  /* Tant que la feuille est ouverte, la page derriere ne defile plus : sans
     cela, le doigt qui fait defiler la carte atteint la page des qu'il sort de
     la carte, et l'on revient sur un document deplace. */
  html.activation-open, html.activation-open body { overflow: hidden; }

  .activation {
    padding: 0;
    align-items: flex-start;
    /* Le doigt qui atteint le bord de la feuille ne fait plus glisser la page
       derriere : le defilement s'arrete avec la feuille. */
    overscroll-behavior: contain;
  }
  .activation-card {
    width: 100%;
    max-width: none;
    min-height: 100%;
    max-height: none;
    /* La feuille ne defile pas elle-meme : c'est la page qui defile, comme
       partout ailleurs, et le clavier ne se retrouve pas dans une zone a part. */
    overflow: visible;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* Les encoches du telephone sont respectees : le texte ne passe pas sous
       la barre d'etat ni sous l'indicateur du bas. */
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px
      calc(22px + env(safe-area-inset-bottom, 0px));
    animation: sheetUp 0.22s ease-out;
  }

  /* En-tete : la croix devient une vraie cible (40px) et la pastille Gratuit
     garde sa distance. */
  .activation-head { margin-bottom: 12px; padding-right: 48px; }
  .activation-x {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 22px;
    background: var(--elev);
  }

  /* L'accroche se resserre pour que le champ email tienne dans le premier
     ecran, sous le titre. */
  .activation-title { font-size: 27px; }
  .activation-lede { margin-top: 9px; font-size: 15.5px; line-height: 1.5; }
  .activation-body { grid-template-columns: 1fr; gap: 20px; margin-top: 16px; }
  .activation-pitch { order: 2; }
  .activation-action { order: 1; }
  .activation-steps { padding-left: 0; border-left: none; }

  /* Le champ email est le geste de la page : il prend la largeur, 54px de
     haut, et 16px de texte. En dessous de 16px, iOS agrandit la page des que
     le champ recoit le focus : la carte partait alors de travers. */
  .activation-card input[type="email"] {
    font-size: 16px;
    padding: 15px 16px;
    border-radius: var(--r-lg);
  }
  .activation-consent {
    margin-top: 14px;
    gap: 11px;
    font-size: 14px;
    line-height: 1.5;
  }
  .activation-consent input { width: 20px; height: 20px; margin-top: 2px; }
  .activation-cta {
    margin-top: 18px;
    padding: 18px 22px;
    font-size: 16.5px;
    border-radius: var(--r-lg);
  }
  .activation-next { margin-top: 13px; font-size: 13px; }
  /* Le parcours passe au meme corps de texte que le reste de la feuille : sur
     un telephone, la version compacte se lit mal. */
  .activation-how { margin-top: 18px; padding-top: 16px; gap: 13px; }
  .activation-how li { font-size: 14px; grid-template-columns: 24px 1fr; }
  .activation-how li::before { width: 24px; height: 24px; font-size: 12px; }

  /* Les contreparties passent après l'action : un filet marque la coupure, et
     le titre de section redevient une vraie entree de lecture. */
  .activation-sub {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .activation-benefit { grid-template-columns: 22px 1fr; gap: 12px; }
  .activation-benefit b { font-size: 16px; }
  .activation-benefit span span { font-size: 14px; line-height: 1.55; }

  /* La bande de reassurance reste sur trois colonnes, sans les explications :
     les trois mots suffisent, et la feuille raccourcit d'autant. */
  .activation-proof { margin-top: 22px; }
  .activation-proof-item { padding: 12px 10px; }
  .activation-proof-item b { font-size: 12.5px; }
  .activation-proof-item span { display: none; }
  .activation-fine { margin-top: 18px; font-size: 12.5px; }
}

/* Un telephone couche en travers reste au-dessus de 680px : la carte garde sa
   mise en page d'ordinateur, mais le champ doit quand meme rester a 16px. En
   dessous, iOS agrandit la page des que le champ prend le focus, et la carte
   part de travers. Le doigt, lui, ne se trompe pas de media query. */
@media (pointer: coarse), (max-width: 900px) and (max-height: 500px) {
  .activation-card input[type="email"] { font-size: 16px; }
}

/* ------------------------------------------ page espace, version telephone
   Le formulaire d'ajout se range en colonne : la commune prend toute la
   largeur, le code postal et le bouton se partagent la ligne suivante. Les
   champs passent a 16px, seuil sous lequel iOS agrandit la page des qu'ils
   prennent le focus (c'est ce qui donnait l'impression d'une page cassee). Les
   tableaux du rapport, eux, empilent le libelle au-dessus de la valeur, plutot
   que de comprimer la valeur dans les deux tiers de la largeur. */
@media (max-width: 680px) {
  input[type="text"], input[type="email"], input[type="number"] { font-size: 16px; }

  /* main.app pose son propre padding, qui remplace celui de .wrap : sans
     marge laterale, les panneaux touchaient les bords de l'ecran. On la
     remet ici, ou elle se voit, sans rien changer au grand ecran. */
  main.app { padding-left: 16px; padding-right: 16px; }

  .add { padding: 15px; }
  .add-row { gap: 12px; }
  .add-field { flex: 1 1 100%; }
  .add-field.small { flex: 0 0 118px; }
  #addBtn { flex: 1 1 auto; padding-left: 14px; padding-right: 14px; }
  .also { font-size: 13px; }

  .app .panel { padding: 16px; }
  .panel-title { font-size: 23px; }
  .notice-badge { font-size: 14px; padding: 8px 15px; }
  .note { font-size: 12px; }

  /* La fiche communale : une information par ligne. */
  .app .rtable tr { display: block; border-bottom: 1px solid var(--border); }
  .app .rtable tr:last-child { border-bottom: none; }
  .app .rtable td { display: block; border-bottom: none; padding: 0 14px; }
  .app .rtable td.rk { width: auto; white-space: normal; padding-top: 12px; }
  .app .rtable td.rv { padding-bottom: 12px; }
}

/* ------------------------------------------------- demarches guidees */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
/* Trois colonnes ne tiennent que sur un ecran large. Entre les deux, une
   grille automatique rangerait les cartes 2 par 2 et la troisieme, seule sur
   sa ligne, serait plus courte que les autres : une seule colonne les rend
   identiques, ce qui est le but. */
@media (max-width: 1040px) {
  .guide-grid { grid-template-columns: 1fr; }
}
.guide-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--elev);
  padding: 18px 20px;
  /* Les trois cartes s'alignent sur la plus longue. Sans colonne souple, la
     plus courte garderait son pied au milieu et un vide en dessous. */
  display: flex;
  flex-direction: column;
}
.guide-card .guide-foot { margin-top: auto; }
/* Le detail replie des cartes : plus compact que dans le bandeau de loi, pour
   que la pastille « Texte de loi » tienne sur une seule ligne. */
.guide-card .law-more { margin-top: 10px; }
.guide-card .law-why { font-size: 12.5px; }
.guide-card .guide-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.guide-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-card h3 {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.guide-card .guide-what {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.65;
}
.guide-steps {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  counter-reset: gstep;
}
.guide-steps li {
  position: relative;
  padding: 0 0 16px 34px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
  counter-increment: gstep;
}
.guide-steps li:last-child { padding-bottom: 0; }
.guide-steps li::before {
  content: counter(gstep);
  position: absolute;
  left: 0;
  top: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-steps li::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 23px;
  bottom: 2px;
  width: 1px;
  background: var(--border);
}
.guide-steps li:last-child::after { display: none; }
.guide-steps b { color: var(--ink); }
.guide-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px dashed var(--border);
}
.guide-pill {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--border);
  color: var(--muted);
}
.guide-pill.free { color: var(--green); background: var(--green-soft);
  border-color: var(--green-line); }
.guide-pill.paid { color: var(--amber); background: var(--amber-soft);
  border-color: var(--amber-line); }
.guide-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.guide-link:hover { text-decoration: underline; }
.guide-link svg { width: 14px; height: 14px; }

/* ------------------------------------------------- annuaire prestataires */
.dir-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: var(--r);
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  margin-top: 14px;
}
.dir-note strong { color: var(--amber); }
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.dir-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
}
.dir-card .dir-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.dir-card h3 { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.dir-card .dir-kind {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--elev);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.dir-card .dir-what {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 9px;
  flex: 1;
}
.dir-card .dir-price {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 700;
  margin-top: 12px;
}
.dir-card .dir-link {
  margin-top: 11px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dir-card .dir-link:hover { text-decoration: underline; }
.dir-card .dir-link svg { width: 14px; height: 14px; }
.dir-disclosure {
  font-size: 12px;
  color: var(--muted-2);
  margin-top: 16px;
  line-height: 1.65;
}
.dir-disclosure a { color: var(--muted); }

/* Le bandeau vert « modele gratuit » a ete retire de la page des guides : il
   repetait, en 108 px, ce que le sous-titre de tete et les encarts disent
   deja. Le message est dans le sous-titre. */

@media (max-width: 680px) {
  /* La grille des contreparties passe a une colonne : deux colonnes sur un
     telephone couperaient les libelles. */
  .letter-perks { grid-template-columns: minmax(0, 1fr); }
  .guide-card { padding: 17px 16px; }
  .dir-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- guides : visuel etape */
.flow {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 0;
}
.flow li {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 13px;
  padding: 0 0 16px 0;
}
.flow li:last-child { padding-bottom: 0; }
.flow .mark {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow li::before {
  content: "";
  position: absolute;
  left: 14.5px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
}
.flow li:last-child::before { display: none; }
.flow .txt { padding-top: 4px; }
.flow .txt b { color: var(--ink); display: block; font-size: 14px; }
.flow .txt span { font-size: 13px; color: var(--muted); line-height: 1.6; }
.flow .txt .where {
  display: inline-block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}
.flow .txt .where a { color: var(--accent); text-decoration: none; }
.flow .txt .where a:hover { text-decoration: underline; }

/* Pas de maquette d'ecran ici : la page explique la demarche, en texte, avec
   le lien du guichet officiel. Une capture simulee ne dit rien de plus que
   l'etape qu'elle illustre, et se lit comme un ecran de Vigiloc. */
.callout {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 12px;
  max-width: 46rem;
}
.callout.info { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); }
.callout.info strong { color: var(--accent); }
.callout.good { background: var(--green-soft); border: 1px solid var(--green-line); color: var(--text); }
.callout.good strong { color: var(--green); }
.callout.warn { background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--text); }
.callout.warn strong { color: var(--amber); }

.guide-section {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl);
  background: var(--card);
  box-shadow: var(--sh-sm);
  padding: 24px 26px 26px;
  margin-top: 18px;
  scroll-margin-top: 88px;
}
.guide-section > h3 {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.guide-section .g-sub {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 6px;
  max-width: 46rem;
}
/* Une seule colonne : la liste des etapes, pleine largeur. Les maquettes qui
   occupaient la colonne de droite ont ete retirees. */
.guide-section .flow { max-width: 46rem; }
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}
.toc a {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 8px 15px;
  text-decoration: none;
  box-shadow: var(--sh-xs);
}
.toc a:hover { border-color: var(--accent-line); color: var(--accent); }

/* ------------------------------------- guides : demande d'aide (deleguer)
   La bande de sortie de page : les etapes sont faisables seul, mais si la
   personne prefere deleguer, c'est ici qu'elle le dit. Le bouton n'ouvre
   qu'une carte qui demande une adresse : aucun dossier, aucune commande. */
.help-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  border: 1px solid var(--amber-line);
  border-radius: var(--r-2xl);
  background: linear-gradient(180deg, var(--amber-soft) 0%, var(--card) 78%);
  box-shadow: var(--sh-sm);
  padding: 22px 26px;
  margin-top: 18px;
  scroll-margin-top: 88px;
}
.help-band .help-copy { flex: 1 1 420px; min-width: 0; }
.help-band .help-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--amber);
}
.help-band h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 5px;
}
.help-band .help-lede {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 7px;
  max-width: 46rem;
}
.help-band .help-btn { flex: 0 0 auto; }

@media (max-width: 860px) {
  .guide-section { padding: 20px 16px 22px; margin-top: 14px; }
  .help-band { padding: 20px 18px; gap: 16px; }
  .help-band .help-btn { width: 100%; }
}

/* ======================================================== accueil, refonte ==
   La page d'accueil reprend la maquette de refonte : heros centre, encart
   « risque local » qui chevauche le bas du heros, puis une section
   « Comment ça marche ? » en deux volets — les etapes a gauche, un panneau
   sombre a droite qui montre ce que fait l'agent. Rien n'est importe de la
   maquette : ses polices Google, son Tailwind et ses icones distantes seraient
   bloques par la politique du serveur. Tout est ecrit ici, avec les jetons du
   site. */

/* --------------------------------------------------- le risque, sous l'appel
   Encart centre sous le heros, sans chevauchement : la mise en garde suit
   l'appel a l'action de pres, mais respire. La carte elle-meme est decrite
   plus haut, a sa place d'origine. */
.risk-band { position: relative; z-index: 2; padding-bottom: 8px; }
/* ------------------------------------------------ « comment ca marche ? »
   Deux volets : la liste des etapes (cliquable) et le panneau qui les montre.
   Le panneau est sombre parce qu'il figure un ecran de machine, pas une carte
   du site : la distinction est volontaire, pour qu'on ne le lise pas comme une
   page de Vigiloc. */
.how { padding: 64px 0 12px; }
.how-head { text-align: center; max-width: 44rem; margin: 0 auto 34px; }
.how-head .kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid #FFE4E6;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 16px;
}
.how-head h2 { font-size: clamp(25px, 3.4vw, 34px); }
.how-head .sub { margin-top: 11px; font-size: 16.5px; color: var(--muted); }

.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 26px;
  /* Les deux volets s'alignent sur la hauteur du plus grand : la liste des
     cinq etapes est plus haute que le panneau, et un panneau centre laisserait
     une bande vide en haut et en bas. */
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-sm);
  padding: 24px;
}

/* les etapes, a gauche */
.how-steps { list-style: none; display: grid; gap: 10px; }
.how-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 15px;
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  background: var(--bg);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.how-step:hover { background: var(--elev); }
.how-step[aria-current="true"] {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #FFFFFF 70%);
  border-color: var(--accent-line);
}
.how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--elev);
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  transition: background 0.25s, color 0.25s;
}
.how-step[aria-current="true"] .how-num { background: var(--accent); color: #fff; }
.how-step.sch-fait .how-num { background: var(--green-soft); color: var(--green); }
.how-body { min-width: 0; }
.how-step h3 { font-size: 15.5px; font-weight: 800; }
.how-step p { font-size: 12.8px; color: var(--muted); margin-top: 4px; line-height: 1.55; }

/* le panneau, a droite : un ecran sombre, facon fenetre */
.how-stage {
  display: flex;
  flex-direction: column;
  min-height: 396px;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.stage-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.stage-dots { display: inline-flex; gap: 5px; }
.stage-dots i {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.22);
}
.stage-dots i:first-child { background: #EF4444; }
.stage-dots i:nth-child(2) { background: #F59E0B; }
.stage-dots i:nth-child(3) { background: #10B981; }
.stage-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 4px;
}
.stage-badge {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  color: #FDA4AF;
  background: rgba(225, 29, 72, 0.18);
  border: 1px solid rgba(225, 29, 72, 0.34);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
/* Les cinq vues occupent la meme cellule : elles se superposent, donc le cadre
   ne saute pas d'une etape a l'autre. La vue active est la seule visible. Le
   contenu est centre dans la hauteur disponible, qui suit celle de la liste. */
.stage-body {
  flex: 1;
  display: grid;
  align-content: center;
  padding: 20px 16px;
}
.stage-canvas {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity 0.3s, transform 0.3s;
}
.stage-canvas.on { opacity: 1; visibility: visible; transform: none; }
.stage-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 11px;
}
.stage-line {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 14px;
  color: #fff;
}
.stage-line + .stage-line { margin-top: 9px; }
.stage-line .grow { flex: 1; min-width: 0; }
.stage-line .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-line svg { width: 17px; height: 17px; flex: 0 0 auto; color: rgba(255, 255, 255, 0.5); }
.stage-line.ok svg { color: #34D399; }
/* La pastille de resultat ferme la ligne, a droite : chaque ligne se lit
   « ce qui est fait, et ce que ca donne ». Elle ne se comprime pas et ne
   passe pas a la ligne du dessous quand le libelle est long. */
.stage-line .stage-tag { flex: 0 0 auto; margin: 0; }
.stage-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.stage-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
  padding: 5px 10px;
  border-radius: var(--r-sm);
}
.stage-tag.warn { color: #FCD34D; background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.34); }
.stage-tag.ok { color: #6EE7B7; background: rgba(16, 185, 129, 0.16); border-color: rgba(16, 185, 129, 0.34); }
.stage-tag.stop { color: #FCA5A5; background: rgba(220, 38, 38, 0.18); border-color: rgba(220, 38, 38, 0.36); }
.stage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
}
.stage-live { display: inline-flex; align-items: center; gap: 8px; }
.stage-live i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: #10B981;
  animation: pulseDot 2s ease-in-out infinite;
}
.stage-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  transition: color 0.2s;
}
.stage-play:hover { color: #fff; }
.stage-play svg { width: 14px; height: 14px; }
@media (max-width: 940px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px; }
  .how-stage { min-height: 340px; }
}
@media (max-width: 680px) {
  .how { padding: 46px 0 8px; }
  .risk-band { margin-top: -18px; }
  .stage-url { display: none; }
  .how-step h3 { font-size: 15px; }
  .how-step p { font-size: 13px; }
}
/* Le bouton Lecture porte les deux libelles, et l'etat choisit lequel se voit :
   le nom accessible du bouton est donc toujours celui de l'action a venir,
   comme sur la page du schema. */
.stage-play .p-play { display: none; }
.stage-play[aria-pressed="false"] .p-play { display: inline-flex; }
.stage-play[aria-pressed="false"] .p-pause { display: none; }
.stage-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* En pause, le point « en direct » s'arrete : il dit que la machine tourne,
   pas qu'on regarde. */
.how-stage.en-pause .stage-live i { animation: none; opacity: 0.5; }

/* ------------------------------------------------------- cookies (choix)
   La banniere de consentement (consent.py pour le balisage, consent.js pour
   le comportement). Elle est posee en bas de la fenetre, sur toutes les
   pages, et ne masque jamais le contenu : la page reste lisible et utilisable
   avant comme apres la reponse. */
.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 16px 16px;
  pointer-events: none;
}
.cookie[hidden] { display: none; }
.cookie-body {
  pointer-events: auto;
  width: 100%;
  max-width: 60rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 16px 18px;
}
.cookie-body p {
  margin: 0;
  flex: 1 1 22rem;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}
.cookie-body a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { padding: 11px 20px; font-size: 14px; }
/* Refuser et Accepter portent le meme poids visuel : la politique annonce deux
   reponses de meme valeur, un bouton efface a cote d'un bouton plein dirait le
   contraire. La difference se fait sur la teinte, pas sur la presence. */
.cookie-actions .btn-ghost {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: var(--sh-xs);
}
.cookie-actions .btn-ghost:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}
@media (max-width: 560px) {
  .cookie { padding: 0 10px 10px; }
  .cookie-body { padding: 14px; gap: 12px; }
  .cookie-actions { width: 100%; }
  /* 44 px : le choix se fait au doigt sur un telephone, et c'est la seule
     reponse que la loi exige vraiment. Un bouton plus court se rate. */
  .cookie-actions .btn {
    flex: 1 1 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Le lien « Cookies » des pieds de page : il doit se lire comme les liens
   voisins, alors que c'est un bouton (il rouvre la banniere, il ne navigue
   pas). */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--muted-2);
  cursor: pointer;
  text-align: left;
}
.linklike:hover { color: var(--accent); }
.legal-back .linklike { font-size: 13.5px; }