/* ==========================================================================
   Geste Solidaire — feuille de style « carnet de bons »
   Chaque besoin est un bon tiré d'un carnet à souches en double exemplaire :
   un feuillet anis, un feuillet pêche, comme les deux cercles du logo, et leur
   intersection en vert carbone. La profondeur vient du chevauchement des
   feuillets, jamais d'une ombre. Le vermillon est réservé au tampon.
   Sommaire : 1 jetons · 2 base · 3 typographie · 4 boutons · 5 formulaires
   6 coquille · 7 motifs du carnet · 8 accueil · 9 liste · 10 fiche publique
   11 formulaires de page · 12 espaces connectés · 13 équipe
   14 modale et notifications · 15 mouvement
   ========================================================================== */

/* ---------- 1. Jetons de conception -------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/assets/fonts/fragment-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Les trois couleurs du logo portent tout le site. */
  --carbon: #263e39;        /* l'intersection des deux cercles */
  --carbon-deep: #172a25;
  --anis: #d8e78e;          /* feuillet de la personne qui aide */
  --anis-soft: #eef4cc;
  --anis-ink: #4c5716;
  --peche: #f0bb9e;         /* feuillet du commerce */
  --peche-soft: #fbe6d9;
  --peche-ink: #87401f;
  --vermillon: #e0442c;     /* le tampon, et lui seul */
  --vermillon-ink: #b3301b;

  /* Anciens noms conservés : les espaces connectés les utilisent. */
  --green-900: var(--carbon-deep);
  --green-800: var(--carbon);
  --green-700: #31504a;
  --green-600: #46695e;
  --sage-200: #dfe9b8;
  --sage-100: var(--anis-soft);
  --sage-50: #f3f6e4;
  --apricot: var(--peche);
  --apricot-dark: var(--peche-ink);
  --apricot-soft: var(--peche-soft);
  --ivory: #f6f7f2;

  --ink: #13231f;
  --ink-soft: #3c4e48;
  --ink-faint: #56665f;
  --paper: #f6f7f2;
  --surface: #ffffff;
  --surface-sunk: #eceee5;
  --line: #d6dbcf;
  --line-strong: #a7b2a5;
  --danger: #9a2a1c;
  --danger-soft: #fbe9e5;
  --focus: var(--vermillon);
  --ground: var(--paper);   /* couleur des trous de perforation */

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: var(--sans);
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  --t-h3: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  --t-h2: clamp(1.75rem, 2.6vw + 1rem, 3rem);
  --t-h1: clamp(2.25rem, 4.4vw + 1rem, 4.25rem);
  --t-display: clamp(2.75rem, 7.4vw, 6rem);

  --gap: 1rem;
  --pad-x: 1rem;
  --max: 78rem;
  --r-sm: 0.25rem;
  --r: 0.375rem;
  --r-lg: 0.5rem;
  --r-pill: 62.5rem;
  /* Aucune ombre décorative : la profondeur vient du chevauchement. */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 24px 64px rgba(19, 35, 31, 0.28);

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --fast: 160ms;
  --slow: 320ms;
}
@media (min-width: 48rem) { :root { --pad-x: 2rem; --gap: 1.25rem; } }
@media (min-width: 64rem) { :root { --pad-x: 3rem; --gap: 1.5rem; } }

/* ---------- 2. Base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) var(--paper);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-base)/1.6 var(--sans);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--vermillon);
}
::selection { background: var(--anis); color: var(--ink); }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea, label { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i {
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

.skip {
  position: fixed;
  inset-inline-start: 1rem;
  top: -6rem;
  z-index: 80;
  background: var(--anis);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 0.75rem 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--fast) var(--ease);
}
.skip:focus { top: 0.75rem; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
main, footer > .footer-inner, .header-inner { max-width: var(--max); margin-inline: auto; }
main { min-height: 60vh; }

/* ---------- 3. Typographie ------------------------------------------------ */
h1, h2, h3, h4, p, ul, ol, figure { margin: 0 0 0.75em; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: var(--t-h1); font-stretch: 118%; font-weight: 850; letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: var(--t-h2); font-stretch: 112%; letter-spacing: -0.03em; line-height: 1.02; }
h3 { font-size: var(--t-h3); font-weight: 750; line-height: 1.22; }
h4 { font-size: var(--t-md); }
p { text-wrap: pretty; }
/* Ancienne mise en avant : une seconde voix de la même famille, plus large. */
h1 em, h2 em { font-style: normal; font-stretch: 125%; color: inherit; }

/* Libellé d'en-tête de colonne ou de formulaire, jamais au-dessus d'un titre de page. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--ink-faint);
  font: 400 var(--t-xs)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--vermillon); flex: none; }
.intro { font-size: var(--t-lg); color: var(--ink-soft); line-height: 1.6; max-width: 38ch; }
.muted { color: var(--ink-soft); font-size: var(--t-base); }
.quiet { color: var(--ink-faint); font-size: var(--t-sm); line-height: 1.55; }
.center { text-align: center; }
.error { color: var(--danger); font-size: var(--t-sm); }

.shop-body, .shop-about, .need-block, .review-item, .account-card, .bon-body,
.preview-shop, .message, .private-contact, .card-needs li, .bon-needs li, .submission-error {
  overflow-wrap: anywhere;
}

/* ---------- 4. Boutons --------------------------------------------------- */
button, .button {
  --btn-bg: var(--carbon);
  --btn-fg: var(--ivory);
  --btn-border: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
  border: 1.5px solid var(--btn-border);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm);
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--fast) ease, border-color var(--fast) ease,
    color var(--fast) ease, transform var(--fast) var(--ease);
}
.button .i, button .i { transition: transform 220ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  button:hover, .button:hover { --btn-bg: var(--carbon-deep); }
  button:hover .i, .button:hover .i { transform: translate(2px, -2px); }
}
button:active, .button:active { transform: scale(0.97); }
button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; }

.primary { --btn-bg: var(--carbon); }
.ink { --btn-bg: var(--ink); --btn-fg: var(--ivory); }
.accent { --btn-bg: var(--anis); --btn-fg: var(--ink); }
.outline { --btn-bg: transparent; --btn-fg: var(--carbon); --btn-border: var(--carbon); }
@media (hover: hover) and (pointer: fine) {
  .accent:hover { --btn-bg: #cbdd73; }
  .outline:hover { --btn-bg: var(--carbon); --btn-fg: var(--ivory); }
  .ghost:hover { --btn-bg: var(--anis-soft); }
  .danger:hover { --btn-bg: #7c2216; }
}
.ghost { --btn-bg: transparent; --btn-fg: var(--carbon); --btn-border: transparent; }
.danger { --btn-bg: var(--danger); }
.small { min-height: 2.5rem; padding: 0.45rem 0.95rem; font-size: var(--t-xs); }
.full-width { width: 100%; }

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.35rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--carbon);
  font-size: var(--t-sm);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
@media (hover: hover) and (pointer: fine) {
  .text-button:hover { --btn-bg: none; background: none; text-decoration-thickness: 2px; color: var(--carbon-deep); }
}
.text-button:active { transform: none; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0; }
.actions:last-child { margin-bottom: 0; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  margin-bottom: 0.5rem;
  color: var(--ink-soft);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}
.back:hover { color: var(--ink); text-decoration: underline; }

/* ---------- 5. Formulaires ----------------------------------------------- */
input, select, textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 1rem;
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}
input::placeholder, textarea::placeholder { color: #6c7a73; }
input:hover, select:hover, textarea:hover { border-color: var(--green-600); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--carbon);
  box-shadow: 0 0 0 3px var(--anis);
}
input:disabled, select:disabled, textarea:disabled { background: var(--surface-sunk); opacity: 0.7; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--carbon) 50%),
    linear-gradient(135deg, var(--carbon) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) calc(50% + 1px), calc(100% - 0.75rem) calc(50% + 1px);
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.field { display: block; margin-bottom: 1.1rem; font-size: var(--t-sm); font-weight: 700; }
.field > input, .field > select, .field > textarea { margin-top: 0.4rem; font-weight: 400; }
.field small, .field-hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.5;
}
.field-hint { display: flex; justify-content: space-between; gap: 0.75rem; }
.form-grid { display: grid; gap: 0 var(--gap); }
@media (min-width: 40rem) { .form-grid { grid-template-columns: 1fr 1fr; } }
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.9rem 0;
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.55;
  cursor: pointer;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 1.2rem; min-width: 1.2rem;
  height: 1.2rem; min-height: 1.2rem;
  margin: 0.15rem 0 0;
  accent-color: var(--carbon);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--carbon); }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
.submission-error {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--danger);
  border-radius: var(--r);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--t-sm);
}

/* ---------- 6. Coquille -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  color: var(--ivory);
}
/* Le fond est porté par une couche séparée, jamais par l'en-tête lui-même : un
   `backdrop-filter` ou un `transform` sur l'en-tête en ferait le bloc conteneur du
   tiroir de navigation, enfermé alors dans les 70 px de la barre. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--carbon);
  border-bottom: 1px solid rgba(216, 231, 142, 0.18);
}
/* Menu ouvert : l'en-tête et le tiroir qu'il contient passent au-dessus du voile. */
body[data-nav="open"] .site-header { z-index: 60; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.25rem;
  padding: 0.6rem var(--pad-x);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  color: inherit;
  font-size: clamp(1.1rem, 1.4vw + 0.7rem, 1.35rem);
  font-weight: 800;
  font-stretch: 115%;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}
.brand .logo-icone { height: 1.75rem; width: auto; display: block; transition: transform 420ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .brand:hover .logo-icone { transform: rotate(-8deg); } }
.paris {
  padding-left: 0.6rem;
  margin-left: 0.15rem;
  border-left: 1px solid rgba(246, 247, 242, 0.3);
  color: var(--anis);
  font: 400 0.625rem/1 var(--mono);
  letter-spacing: 0.14em;
}
@media (max-width: 30rem) { .paris { display: none; } }

.nav-toggle {
  --btn-bg: transparent;
  --btn-fg: var(--ivory);
  --btn-border: rgba(246, 247, 242, 0.35);
  width: 3rem;
  padding: 0;
  flex: none;
}
.nav-toggle .bars { display: grid; gap: 0.25rem; width: 1.125rem; }
.nav-toggle .bars i {
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }

/* Tiroir ancré à droite, comme un feuillet qu'on tire du carnet. Il laisse une
   bande de voile touchable pour fermer, même à 320 px. */
.site-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  z-index: 50;
  width: min(20rem, 85vw);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem var(--pad-x) 2rem;
  background: var(--anis);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  /* `visibility` bascule tout de suite à l'ouverture (sinon le tiroir n'est pas
     focusable), et seulement après le glissement à la fermeture. */
  transition: transform 380ms var(--ease-drawer), visibility 0s linear 380ms;
}
.site-nav[data-open="true"] {
  transform: none;
  visibility: visible;
  transition: transform 380ms var(--ease-drawer), visibility 0s linear 0s;
}
.nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px dotted rgba(19, 35, 31, 0.45);
}
.nav-head p { margin: 0; font: 400 var(--t-xs)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.site-nav a:not(.button) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(19, 35, 31, 0.16);
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-nav a.active::before {
  content: "";
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--vermillon);
}
.site-nav .button { margin-top: 1.25rem; }
.site-nav .merchant-button { --btn-bg: var(--ink); --btn-fg: var(--ivory); --btn-border: transparent; }
.site-nav .close { --btn-fg: var(--ink); }
.nav-sep { margin: 1rem 0 0.25rem; font: 400 var(--t-xs)/1.3 var(--mono); text-transform: uppercase; }

body[data-nav="open"] { overflow: hidden; }
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(19, 35, 31, 0.55);
  border: 0;
  border-radius: 0;
  min-height: 0;
  padding: 0;
}
.nav-scrim:active { transform: none; }

@media (min-width: 60rem) {
  .nav-toggle, .nav-scrim, .nav-head { display: none; }
  .site-nav {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
    padding: 0;
    background: none;
    color: inherit;
    overflow: visible;
    transform: none;
    visibility: visible;
  }
  .site-nav a:not(.button) {
    position: relative;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    color: var(--ivory);
    font-size: var(--t-sm);
    font-weight: 600;
    font-stretch: 100%;
    letter-spacing: 0;
  }
  /* Soulignement qui se trace de gauche à droite, une seule fois par survol. */
  .site-nav a:not(.button)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.45rem;
    height: 2px;
    background: var(--anis);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--ease);
  }
  .site-nav a:not(.button):hover::after, .site-nav a.active::after { transform: scaleX(1); }
  .site-nav a.active::before { display: none; }
  .site-nav .button { margin-top: 0; }
  .site-nav .merchant-button { --btn-bg: var(--anis); --btn-fg: var(--ink); min-height: 2.5rem; }
  .site-nav .merchant-button:hover { --btn-bg: #cbdd73; }
  .nav-sep { display: none; }
}

.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(246, 247, 242, 0.35);
  border-radius: var(--r-pill);
  color: var(--ivory);
  font: 400 var(--t-xs)/1.3 var(--mono);
  white-space: nowrap;
  text-decoration: none;
}
.role-chip .pip { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; background: var(--line-strong); }
.role-chip[data-role="merchant"] .pip { background: var(--peche); }
.role-chip[data-role="volunteer"] .pip { background: var(--anis); }
.role-chip[data-role="team"] { border-color: var(--anis); }
.role-chip[data-role="team"] .pip { background: var(--vermillon); }
/* Sur un téléphone étroit, la pastille se réduit à sa couleur : son libellé
   reste annoncé par aria-label, et le nom du site garde sa place. */
@media (max-width: 30rem) {
  #role-chip-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .role-chip { padding: 0.55rem; }
  .role-chip .pip { width: 0.7rem; height: 0.7rem; }
}

.site-footer {
  position: relative;
  margin-top: 5rem;
  background: var(--carbon);
  color: var(--ivory);
  --ground: var(--paper);
}
/* Bord supérieur perforé : le pied de page est la souche qu'on garde. */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -5px;
  height: 10px;
  background: radial-gradient(circle at 7px 5px, var(--ground) 3.5px, transparent 4px) 0 0 / 14px 10px repeat-x;
}
.footer-inner { display: grid; gap: 2rem; padding: 3.5rem var(--pad-x) 2rem; }
.site-footer .brand { font-size: clamp(1.75rem, 4vw, 2.75rem); color: var(--anis); }
.site-footer p { color: rgba(246, 247, 242, 0.78); font-size: var(--t-sm); }
.footer-links { display: grid; gap: 0.1rem; align-content: start; justify-items: start; }
.footer-links .eyebrow { margin: 0 0 0.35rem; color: var(--anis); }
.footer-links .text-button { justify-content: flex-start; color: var(--ivory); font-size: var(--t-sm); }
.footer-note {
  grid-column: 1 / -1;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(246, 247, 242, 0.18);
  font-size: var(--t-xs);
  margin: 0;
}
@media (min-width: 48rem) { .footer-inner { grid-template-columns: 1.6fr 1fr 1fr; } }

/* ---------- 7. Motifs du carnet ------------------------------------------ */
section { padding: 3rem var(--pad-x); }
@media (min-width: 48rem) { section { padding: 4.5rem var(--pad-x); } }

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}
.section-heading h2 { margin: 0; max-width: 16ch; }
.section-heading p { margin: 0; max-width: 38ch; color: var(--ink-soft); }
.section-heading .text-button { white-space: nowrap; }

/* Feuillet : un aplat de papier, sans ombre. */
.sheet { position: relative; border-radius: var(--r-lg); color: var(--ink); }
.sheet-anis { background: var(--anis); }
.sheet-peche { background: var(--peche); }

/* Souche : bandeau en tête de feuillet, séparé du corps par une perforation. */
.stub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.75rem 1.25rem 0.85rem;
  font: 400 var(--t-xs)/1.35 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stub::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: -3px;
  height: 6px;
  background: radial-gradient(circle at 5px 3px, var(--ground) 2.4px, transparent 2.8px) 0 0 / 11px 6px repeat-x;
}

/* Tampon vermillon : la vérification humaine, et rien d'autre. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem 0.3rem;
  border-radius: 0.25rem;
  background: var(--vermillon-ink);
  color: var(--ivory);
  font: 900 0.875rem/1 var(--sans);
  font-stretch: 125%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  flex: none;
}
.stamp .i { width: 1em; height: 1em; stroke-width: 3; }
.stamp-sm { font-size: 0.6875rem; padding: 0.3rem 0.5rem 0.25rem; transform: rotate(-4deg); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font: 400 var(--t-xs)/1.3 var(--mono);
  white-space: nowrap;
}
.badge[data-tone="ok"] { border-color: #b5c76a; background: var(--anis-soft); color: var(--anis-ink); }
.badge[data-tone="wait"] { border-color: #e5a989; background: var(--peche-soft); color: var(--peche-ink); }
.badge[data-tone="off"] { border-color: #e4b2a8; background: var(--danger-soft); color: var(--danger); }

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem 0.25rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--anis-soft);
  color: var(--anis-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
}
.type-badge .i { width: 1rem; height: 1rem; }
.type-badge.volunteer { background: #e3ebe6; color: var(--carbon); }
.type-badge.financial { background: var(--peche-soft); color: var(--peche-ink); }
.badge-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.notice {
  margin: 1.25rem 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r);
  background: var(--anis-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.notice > *:last-child { margin-bottom: 0; }
.notice h2, .notice h3 { font-size: var(--t-md); font-stretch: 100%; margin-bottom: 0.4rem; }
.notice.compact { padding: 0.65rem 0.85rem; font-size: var(--t-xs); }
.notice[data-tone="wait"] { background: var(--peche-soft); }
.notice[data-tone="off"] { background: var(--danger-soft); color: var(--danger); }

/* État vide : un bon encore vierge, bordé de pointillés. */
.empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 3rem 1.5rem;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}
.empty-icon {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: var(--anis);
  color: var(--ink);
}
.empty-icon .i { width: 1.5rem; height: 1.5rem; }
.empty h2 { font-size: var(--t-h3); font-stretch: 112%; margin: 0.25rem 0 0; }
.empty p { max-width: 46ch; color: var(--ink-soft); font-size: var(--t-sm); }
.empty .actions { justify-content: center; }
.page-empty { margin: 2rem auto; max-width: 44rem; }

/* Apparition au défilement : le contenu reste visible si l'API manque. */
.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 520ms var(--ease) var(--reveal-delay, 0ms), transform 620ms var(--ease) var(--reveal-delay, 0ms);
}
.reveal.shown { opacity: 1; transform: none; }

.skeleton {
  border-radius: var(--r);
  background: linear-gradient(100deg, var(--surface-sunk) 30%, var(--anis-soft) 50%, var(--surface-sunk) 70%);
  background-size: 300% 100%;
  animation: sweep 1.4s linear infinite;
}
@keyframes sweep { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.skeleton-card { height: 20rem; }
.skeleton-row { height: 1rem; margin-bottom: 0.6rem; }

/* ---------- 8. Accueil --------------------------------------------------- */
.bon-hero {
  --ground: var(--carbon);
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3.5rem, 7vw, 6rem);
  background: var(--carbon);
  color: var(--ivory);
  overflow: hidden;
}
.bon-hero-inner { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x); }
.bon-title {
  margin: 0 0 1.5rem;
  font-size: var(--t-display);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: uppercase;
}
.bon-title-l2 { display: block; color: var(--anis); }
.bon-title .w { display: inline-block; }
.bon-lede {
  max-width: 44ch;
  margin: 0 0 clamp(2.5rem, 5vw, 3.75rem);
  color: rgba(246, 247, 242, 0.86);
  font-size: var(--t-lg);
  line-height: 1.55;
}
/* Sur grand écran, le chapeau se range à droite du titre, aligné sur sa ligne de
   base : les deux portes remontent dans le premier écran. */
@media (min-width: 64rem) {
  .bon-hero-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 3rem; }
  .doors { grid-column: 1 / -1; }
  .bon-title { margin-bottom: 2.75rem; }
  .bon-lede { align-self: end; margin-bottom: 2.9rem; font-size: var(--t-md); }
}

/* Deux portes, deux feuillets qui se chevauchent comme les deux cercles du logo. */
.doors { position: relative; display: grid; gap: 0; }
.door {
  display: flex;
  flex-direction: column;
  padding: 0 0 1.5rem;
  transition: transform 420ms var(--ease);
}
.door > :not(.stub) { margin-inline: 1.25rem; }
.door h2 {
  margin-top: 1.4rem;
  margin-bottom: 0.75rem;
  font-size: clamp(1.6rem, 2.4vw + 0.9rem, 2.5rem);
  font-stretch: 115%;
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 0.98;
  max-width: 14ch;
}
.door p:not(.stub) { color: var(--ink-soft); max-width: 40ch; }
.door .button { align-self: flex-start; margin-top: auto; }
.door-help { z-index: 2; transform: rotate(-1.2deg); }
.door-shop { z-index: 1; transform: rotate(1deg); margin-top: -3rem; }
.door-shop .stub { padding-top: 3.25rem; }
.fill-line {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.15rem;
  border-bottom: 2.5px solid var(--ink);
  font: 400 var(--t-sm)/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fill-line input {
  min-height: 2.75rem;
  padding: 0.35rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 600 clamp(1.125rem, 1vw + 0.9rem, 1.375rem)/1.2 var(--sans);
  font-stretch: 108%;
}
.fill-line input:focus { box-shadow: none; }
.fill-line:focus-within { border-color: var(--vermillon); }
.fill-line input::placeholder { color: rgba(19, 35, 31, 0.55); }
@media (max-width: 30rem) {
  .fill-line { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Lentille : là où les deux feuillets se recouvrent, la promesse de la plateforme. */
.lens {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 0.6rem;
  margin: -0.75rem 1.5rem 0.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-lg);
  background: var(--carbon-deep);
  color: var(--anis);
  transform: rotate(-0.5deg);
}
.lens-shape { display: none; }
.lens ul { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; font: 400 var(--t-xs)/1.35 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.lens li { display: flex; align-items: center; gap: 0.55rem; }
.lens .stamp {
  position: absolute;
  right: -0.5rem; top: -1.6rem;
  padding: 0.45rem 0.8rem 0.4rem;
  background: var(--vermillon);
  font-size: 1.25rem;
  transform: rotate(-9deg);
}
@media (min-width: 52rem) {
  /* La lentille (colonne du milieu) recouvre chaque feuillet sur --lap ; le texte
     des feuillets s'arrête avant elle. */
  .doors { --lens: 10rem; --lap: 8rem; grid-template-columns: minmax(0, 1fr) var(--lens) minmax(0, 1fr); align-items: stretch; }
  .door { min-height: 21rem; padding-bottom: 2rem; }
  .door > :not(.stub) { margin-inline: 2rem; }
  .door-help { grid-column: 1 / 3; grid-row: 1; margin-right: calc(var(--lens) - var(--lap)); }
  .door-shop { grid-column: 2 / 4; grid-row: 1; margin-left: calc(var(--lens) - var(--lap)); margin-top: 2.5rem; margin-bottom: -2.5rem; }
  .door-shop .stub { padding-top: 0.75rem; }
  .door-shop > :not(.stub) { margin-left: calc(var(--lap) + 1.5rem); }
  .door-help > :not(.stub) { margin-right: calc(var(--lap) + 1.5rem); }
  .door-shop .stub { padding-left: calc(var(--lap) + 1.5rem); }
  .door-help .stub { padding-right: calc(var(--lap) + 1.5rem); }
  /* La lentille est dessinée exactement comme celle du logo : deux arcs de cercle. */
  .lens {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    padding: 4.5rem 1rem;
    background: none;
    text-align: center;
    transform: none;
  }
  .lens-shape { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; fill: var(--carbon-deep); }
  .lens ul { justify-items: center; gap: 1rem; }
  .lens li { flex-direction: column; gap: 0.35rem; }
  /* Le tampon chevauche le coin supérieur gauche du feuillet pêche. */
  .lens .stamp { right: -6.5rem; top: 0.9rem; font-size: 1.625rem; }
  @media (hover: hover) and (pointer: fine) {
    /* Le feuillet survolé passe devant l'autre : la profondeur vient du recouvrement. */
    .door:hover, .door:focus-within { z-index: 4; transform: rotate(0deg) translateY(-6px); }
  }
}
@media (min-width: 52rem) and (max-width: 63.99rem) {
  .doors { --lens: 9rem; --lap: 7.25rem; }
}

.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 2px dotted var(--line-strong);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}
.tally b { color: var(--ink); font-family: var(--sans); font-size: 1.5rem; font-weight: 850; font-stretch: 115%; font-variant-numeric: tabular-nums; margin-right: 0.35rem; }

/* Le trajet d'un bon : une bande de souches détachables, lue de gauche à droite. */
.trajet { --ground: var(--paper); }
.trajet-strip {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  counter-reset: step;
}
.trajet-strip li { position: relative; padding: 1.5rem 1.5rem 1.75rem; }
.trajet-strip li + li { border-top: 2px dotted var(--line-strong); }
.step-no {
  display: block;
  margin-bottom: 1rem;
  color: var(--carbon);
  font-size: 3.25rem;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.8;
  letter-spacing: -0.04em;
}
.trajet-strip h3 { margin-bottom: 0.4rem; }
.trajet-strip p { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); }
@media (min-width: 52rem) {
  .trajet-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trajet-strip li + li { border-top: 0; border-left: 2px dotted var(--line-strong); }
}

/* Ce qui est garanti, et ce qui ne l'est pas : un registre en deux colonnes. */
.ledger { display: grid; gap: 1.25rem; }
.ledger-col { position: relative; padding: 1.75rem 1.5rem; border-radius: var(--r-lg); }
.ledger-col h3 { font: 400 var(--t-xs)/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.25rem; }
.ledger-col ul { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ledger-col li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.75rem; }
.ledger-col li .i { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; }
.ledger-col b { display: block; font-size: var(--t-md); font-stretch: 108%; margin-bottom: 0.2rem; }
.ledger-col p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }
.ledger-ok { background: var(--anis); }
.ledger-ok p { color: #2f3d14; }
.ledger-ok .stamp { position: absolute; top: 1.25rem; right: 1.25rem; }
.ledger-no { align-self: start; background: var(--surface); border: 1.5px solid var(--line-strong); }
@media (min-width: 52rem) { .ledger { grid-template-columns: 1.5fr 1fr; } }

.merchant-callout {
  --ground: var(--paper);
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin-inline: var(--pad-x);
  padding: 2.25rem 1.75rem;
  border-radius: var(--r-lg);
  background: var(--peche);
  position: relative;
}
.merchant-callout::before {
  content: "";
  position: absolute;
  top: 0.9rem; bottom: 0.9rem; left: -3px;
  width: 6px;
  background: radial-gradient(circle at 3px 5px, var(--ground) 2.4px, transparent 2.8px) 0 0 / 6px 11px repeat-y;
}
.merchant-callout h2 { margin-bottom: 0.5rem; max-width: 18ch; }
.merchant-callout p { margin: 0; max-width: 46ch; color: #4a2c1c; }
.merchant-callout .button { justify-self: start; --btn-bg: var(--ink); }
@media (min-width: 48rem) {
  .merchant-callout { grid-template-columns: 1fr auto; padding: 3rem; }
}

.merchant-button-label { white-space: nowrap; }
.illu { display: block; width: 100%; height: auto; max-width: 100%; }

/* ---------- 9. Liste des besoins ---------------------------------------- */
.listing-top { max-width: 52rem; margin-bottom: 1.5rem; }
.listing-top h1 span { display: block; color: var(--green-600); }
.search-panel {
  --ground: var(--paper);
  margin-top: 1.5rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--r-lg);
  background: var(--anis);
}
.search-label { display: block; margin-bottom: 0.5rem; font: 400 var(--t-xs)/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.search-input { position: relative; display: flex; align-items: center; }
.search-input > .i:first-child { position: absolute; left: 0.9rem; width: 1.3rem; height: 1.3rem; pointer-events: none; }
.search-input input {
  min-height: 3.5rem;
  padding-left: 2.85rem;
  min-width: 0;
  border-color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
}
.pilot-label {
  position: absolute;
  right: 0.9rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-faint);
  pointer-events: none;
}
@media (max-width: 40rem) { .pilot-label { display: none; } }
@media (min-width: 40rem) { .search-input input { padding-right: 9rem; } }
.search-help { margin: 0.6rem 0 0; max-width: 46rem; color: #34421a; }
.district-filter { max-width: 20rem; margin-top: 1rem; }
.district-filter .field { margin-bottom: 0; }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.filter-chip {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: rgba(19, 35, 31, 0.45);
  min-height: 2.75rem;
  padding: 0.45rem 0.95rem;
  font-size: var(--t-xs);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) { .filter-chip:hover { --btn-bg: rgba(255, 255, 255, 0.5); --btn-border: var(--ink); } }
.filter-chip.selected { --btn-bg: var(--ink); --btn-fg: var(--ivory); --btn-border: var(--ink); }
.filter-chip .i { width: 1rem; height: 1rem; }
.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.5rem 0 1rem;
}
.results-bar p { margin: 0; font-size: var(--t-sm); font-weight: 650; }
.list-note { margin-top: 2rem; text-align: center; }

.shop-grid { display: grid; gap: 1.5rem var(--gap); }
@media (min-width: 40rem) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Un commerce = un bon : souche colorée, perforation, puis le corps du bon. */
.bon {
  --ground: var(--paper);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r-lg);
  background: var(--anis-soft);
  transition: transform 320ms var(--ease);
}
.bon .stub { z-index: 1; background: var(--anis); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.shop-grid > .bon:nth-child(even) { background: var(--peche-soft); }
.shop-grid > .bon:nth-child(even) .stub { background: var(--peche); }
/* Le tampon s'imprime quand le bon entre à l'écran. */
.reveal.shown .bon .stamp { animation: stamp-press 520ms var(--ease) both; }
.reveal.shown .bon:nth-child(2) .stamp { animation-delay: 90ms; }
.reveal.shown .bon:nth-child(3) .stamp { animation-delay: 180ms; }
.bon-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.25rem 1.4rem; }
.shop-title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.shop-title h1, .shop-title h3 { margin: 0; min-width: 0; }
.shop-title h3 { font-size: 1.5rem; font-stretch: 112%; font-weight: 850; letter-spacing: -0.03em; line-height: 1.02; }
.bon-business { margin: 0.25rem 0 0; color: var(--ink-faint); font-size: var(--t-sm); }
.shop-logo {
  flex: none;
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--r);
  background: var(--surface);
  outline: 1px solid var(--line);
  object-fit: contain;
}
.shop-about .shop-logo { width: 4rem; height: 4rem; }
.bon-needs { flex: 1; display: grid; align-content: start; gap: 0.85rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.bon-needs li { display: grid; gap: 0.35rem; font-size: var(--t-sm); line-height: 1.45; }
.bon-needs li > span:not(.type-badge) { font-weight: 600; }
/* Le besoin prioritaire est composé plus grand que les suivants. */
.bon-needs li.lead > span:not(.type-badge) { font-size: 1.125rem; font-weight: 750; font-stretch: 106%; line-height: 1.3; }
.bon-needs small { color: var(--ink-faint); font-size: var(--t-xs); }
.bon-needs .type-badge { justify-self: start; }
.bon-link { align-self: stretch; justify-content: space-between; }
@media (hover: hover) and (pointer: fine) {
  .bon:hover { transform: translateY(-4px) rotate(-0.6deg); }
  .shop-grid > .bon:nth-child(even):hover { transform: translateY(-4px) rotate(0.6deg); }
}
/* Toute la carte est cliquable, le lien reste le seul élément focusable. */
.bon-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }

/* Vitrine : la photo du commerce, ou à défaut un store rayé et son initiale. */
.store-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 6.5rem;
  overflow: hidden;
  background: var(--surface-sunk);
  color: var(--carbon);
}
.store-art::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2.25rem;
  background: repeating-linear-gradient(90deg, var(--awning, var(--carbon)) 0 1.5rem, transparent 1.5rem 3rem);
  border-bottom: 0.4rem solid var(--awning, var(--carbon));
  -webkit-mask: radial-gradient(circle at 0.75rem 100%, transparent 0.75rem, #000 0.78rem) 0 0 / 1.5rem 100% repeat-x;
  mask: radial-gradient(circle at 0.75rem 100%, transparent 0.75rem, #000 0.78rem) 0 0 / 1.5rem 100% repeat-x;
}
.store-art.sage { --awning: var(--green-600); background: var(--anis-soft); }
.shop-grid > .bon:nth-child(even) .store-art.sage { --awning: #c46a43; background: var(--peche-soft); }
.store-art.peach { --awning: #c46a43; background: var(--peche-soft); }
.store-art.blue { --awning: #3e6575; background: #e3ebed; }
.store-art.yellow { --awning: #8a7a2a; background: #f2efcf; }
.store-art.pink { --awning: #9a4f5f; background: #f3e1e2; }
.store-initial {
  margin-top: 1.75rem;
  font-size: 2.75rem;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--awning, var(--carbon));
}
.art-caption {
  position: absolute;
  left: 1rem; bottom: 0.65rem;
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.store-art.photo-art::before { display: none; }
.store-art.photo-art { display: block; height: 10rem; }
.store-art.large.photo-art { height: 15rem; }
.store-photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 10. Fiche publique ------------------------------------------ */
.detail-layout { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .detail-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3.5rem; } }
.shop-sheet {
  --ground: var(--paper);
  align-self: start;
  border-radius: var(--r-lg);
  background: var(--surface);
  outline: 1.5px solid var(--line-strong);
  outline-offset: -1.5px;
  overflow: hidden;
}
@media (min-width: 64rem) { .shop-sheet { position: sticky; top: 6rem; } }
.store-art.large { height: 11rem; }
.store-art.large .store-initial { font-size: 5rem; }
.shop-about { padding: 1.5rem; }
.location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  color: var(--ink-faint);
  font: 400 var(--t-xs)/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shop-about h1 { font-size: clamp(1.9rem, 3vw + 1rem, 2.75rem); margin-bottom: 0; }
.shop-about > p { color: var(--ink-soft); font-size: var(--t-sm); }
.shop-about .bon-business { margin-bottom: 1rem; }
.street-address { margin: 1rem 0 0.25rem; color: var(--ink); font-size: var(--t-sm); font-style: normal; font-weight: 600; }
.verification {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.25rem 0 0.5rem;
  padding: 1rem;
  border-radius: var(--r);
  background: var(--anis-soft);
}
.verification .stamp { animation: stamp-press 520ms var(--ease) 420ms both; }
.verification b { display: block; font-size: var(--t-sm); }
.verification small { color: var(--ink-soft); font-size: var(--t-xs); }
.info-button {
  --btn-bg: transparent;
  --btn-fg: var(--carbon);
  --btn-border: var(--carbon);
  width: 2.75rem; min-width: 2.75rem;
  min-height: 2.75rem;
  margin-left: auto;
  padding: 0;
  flex: none;
}
.info-button .i { width: 1.25rem; height: 1.25rem; }

.detail-needs > h2 { margin-bottom: 1.5rem; }
.need-block {
  --ground: var(--paper);
  position: relative;
  margin-bottom: 1.25rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  outline: 1.5px solid var(--line-strong);
  outline-offset: -1.5px;
  overflow: hidden;
}
.need-block .stub { background: var(--anis); }
.need-block.financial .stub { background: var(--peche); }
.need-block > :not(.stub) { margin-inline: 1.5rem; }
.need-block h3 { margin-top: 1.25rem; margin-bottom: 0.6rem; font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem); font-stretch: 108%; line-height: 1.2; }
.need-block.lead h3 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem); font-stretch: 112%; }
.need-block > p { color: var(--ink-soft); font-size: var(--t-sm); }
.need-block .timing {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  font: 400 var(--t-xs)/1.4 var(--mono);
}
.need-block .button { width: calc(100% - 3rem); justify-content: space-between; margin-top: 0.75rem; margin-bottom: 1.5rem; }
.need-block small { display: block; margin-top: -0.75rem; margin-bottom: 1.5rem; color: var(--ink-faint); font-size: var(--t-xs); }
.need-photo { display: block; width: calc(100% - 3rem); max-height: 16rem; margin: 0.75rem 1.5rem; border-radius: var(--r); object-fit: cover; }
.need-block.financial .button { --btn-bg: var(--peche); --btn-fg: var(--ink); --btn-border: var(--ink); }
.fund-host {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r);
  background: var(--peche-soft);
  font: 400 var(--t-xs)/1.4 var(--mono);
  overflow-wrap: anywhere;
}
.fund-host b { font-family: var(--sans); color: var(--peche-ink); font-weight: 700; flex: none; }
.fund-link { font-size: var(--t-xs); overflow-wrap: anywhere; }
.soft-note {
  margin-top: 1.75rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--r-lg);
  background: var(--carbon);
  color: var(--ivory);
  font-size: var(--t-sm);
}
.soft-note b { color: var(--anis); }
.soft-note p { margin: 0.4rem 0 0; color: rgba(246, 247, 242, 0.82); font-size: var(--t-sm); }

/* ---------- 11. Pages de formulaire ------------------------------------- */
.form-page { display: grid; gap: 1.75rem; }
@media (min-width: 64rem) { .form-page { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; } }
.form-intro { align-self: start; }
@media (min-width: 64rem) { .form-intro { position: sticky; top: 5.5rem; } }
.form-intro h1 { font-size: clamp(1.9rem, 3.4vw + 0.8rem, 2.75rem); margin-bottom: 0.9rem; }
.form-intro > p:not(.eyebrow):not(.quiet) { color: var(--ink-soft); font-size: var(--t-base); line-height: 1.7; }

.form-reassurance { display: grid; gap: 0.6rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.form-reassurance li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.75rem; align-items: start; }
.form-reassurance b {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 700;
}
.form-reassurance p { margin: 0.2rem 0 0; font-size: var(--t-sm); color: var(--ink-soft); }

.form-container {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 48rem) { .form-container { padding: 1.75rem; } }

/* Progression du formulaire : repère de position, pas un assistant bloquant. */
.progress-rail {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
}
.progress-rail li { flex: 1; }
.progress-rail span { display: block; height: 0.25rem; border-radius: 2px; background: var(--surface-sunk); }
.progress-rail li[data-done="true"] span { background: var(--green-600); }
.progress-rail small { display: block; margin-top: 0.4rem; color: var(--ink-faint); font-size: 0.625rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.progress-rail li[data-done="true"] small { color: var(--green-800); }

.form-section { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.form-section:last-of-type { border-bottom: 0; }
.form-section h2 { font-size: var(--t-h3); }
/* Le rail d'étapes nomme déjà chaque étape à l'écran. Le libellé reste pour les
   lecteurs d'écran : le focus y est placé à chaque changement d'étape. */
.step-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.type-choices { display: grid; gap: 0.6rem; margin: 1.25rem 0; }
@media (min-width: 30rem) { .type-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.type-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.type-choice:hover { border-color: var(--green-600); background: var(--sage-50); }
.type-choice:has(input:checked) { border-color: var(--green-700); background: var(--sage-100); box-shadow: inset 0 0 0 1px var(--green-700); }
.type-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.type-choice input { width: 1.125rem; min-width: 1.125rem; height: 1.125rem; min-height: 1.125rem; margin: 0; accent-color: var(--green-700); }
.type-icon { font-size: 1.2rem; line-height: 1; }
@media (min-width: 30rem) {
  .type-choice { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.9rem; }
  .type-icon { font-size: 1.5rem; }
}

.need-fields {
  margin: 1.25rem 0;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sage-50);
}
.need-fields legend { margin-bottom: 0.75rem; }
.need-fields .field:last-child { margin-bottom: 0; }

.directory-search {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sage-50);
}
.directory-search p { font-size: var(--t-xs); color: var(--ink-soft); }
.directory-search > *:last-child { margin-bottom: 0; }

/* Rail d'étapes du formulaire de demande : il situe sans jamais cliquer à la place
   de la personne. On avance avec les boutons, pas avec le rail. */
.stepper { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.stepper li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  font-weight: 650;
}
.stepper-num {
  display: grid;
  place-items: center;
  width: 1.6rem; height: 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.stepper li[data-state="current"] { color: var(--green-800); }
.stepper li[data-state="current"] .stepper-num { border-color: var(--green-700); background: var(--sage-100); color: var(--green-800); }
.stepper li[data-state="done"] { color: var(--green-700); }
.stepper li[data-state="done"] .stepper-num { border-color: var(--green-700); background: var(--green-700); color: var(--ivory); }
.step-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.step-nav button { flex: 1 1 10rem; }

/* Suggestions d'annuaire : une liste de boutons, utilisable au clavier et sans souris. */
.lookup { margin-bottom: 1.25rem; }
.lookup-results { display: grid; gap: 0.4rem; }
.lookup-results p { margin: 0; }
.lookup-option {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-xs);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.lookup-option:hover { border-color: var(--green-600); background: var(--sage-50); }
.lookup-option b { font-size: var(--t-sm); }
.lookup-option span { color: var(--ink-soft); }
.lookup-meta { color: var(--ink-faint); font-family: var(--mono); font-size: 0.6875rem; }

summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: var(--t-sm);
  font-weight: 650;
}
summary::marker { color: var(--green-600); }

/* Les droits RGPD closent l'espace personnel : visibles sans effort, mais repliés
   et détachés du reste, pour qu'« effacer mon compte » ne voisine jamais une
   action courante. */
.privacy-tools {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}
.privacy-tools .actions { margin-top: 0.75rem; }

.preview-shop {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.preview-need { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.preview-need p { margin: 0.5rem 0; font-size: var(--t-sm); }
.preview-need small { color: var(--ink-faint); font-size: var(--t-xs); }

.selected-need {
  margin: 1.5rem 0 1.25rem;
  padding: 1.25rem;
  border: 1px solid #c8d2bc;
  border-radius: var(--r);
  background: var(--sage-100);
}
.selected-need h3 { margin: 0.75rem 0 0.4rem; }
.selected-need p { font-size: var(--t-sm); }
.selected-need small { color: var(--ink-faint); font-size: var(--t-xs); }

.private-contact {
  padding: 0.7rem 0.85rem;
  border-radius: var(--r);
  background: var(--peche-soft);
  color: var(--peche-ink);
  font-size: var(--t-xs);
}
.private-contact b { display: block; margin-bottom: 0.2rem; }

/* Deux cartes d'inscription distinctes : bénévole ou commerçant. */
.role-fieldset legend { margin-bottom: 0.5rem; font-size: var(--t-sm); font-weight: 650; }
.role-picker { display: grid; gap: 0.6rem; margin-bottom: 1.25rem; }
@media (min-width: 36rem) { .role-picker { grid-template-columns: 1fr 1fr; } }
.role-option {
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.role-option:hover { border-color: var(--green-600); background: var(--sage-50); }
.role-option:has(input:checked) { border-color: var(--green-700); background: var(--sage-100); box-shadow: inset 0 0 0 1px var(--green-700); }
.role-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.role-option input { position: absolute; opacity: 0; pointer-events: none; }
.role-option b { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-md); }
.role-option span { font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.5; }

/* ---------- 12. Espaces connectés --------------------------------------- */
.account-page { max-width: 48rem; margin-inline: auto; min-height: 60vh; }
.account-page h1 { margin-bottom: 0.75rem; }
.account-card {
  margin: 1.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.account-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-top: 1.25rem; }
.account-links a { font-size: var(--t-sm); }

/* Tableau de bord : barre latérale collante dès l'ordinateur. */
.dash { display: grid; gap: 1.75rem; max-width: var(--max); }
@media (min-width: 64rem) { .dash { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; } }
.dash-side { align-self: start; }
@media (min-width: 64rem) { .dash-side { position: sticky; top: 5.5rem; } }
.dash-side nav { display: flex; flex-wrap: wrap; gap: 0.25rem; }
@media (min-width: 64rem) { .dash-side nav { flex-direction: column; } }
.dash-side nav a, .dash-side nav button {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: transparent;
  justify-content: flex-start;
  width: 100%;
  font-weight: 600;
}
.dash-side nav a:hover, .dash-side nav button:hover { --btn-bg: var(--sage-100); }
.dash-side nav [aria-current="true"] { --btn-bg: var(--green-800); --btn-fg: #fff; }
.dash-identity {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.dash-identity b { display: block; font-size: var(--t-sm); overflow-wrap: anywhere; }
.dash-identity .role-chip { margin-top: 0.6rem; }
.dash-main { min-width: 0; }
.dash-main > h2 { margin-top: 2rem; }
.dash-main > h2:first-child { margin-top: 0; }

.admin-page { max-width: var(--max); }
.admin-page h1 { margin-bottom: 0.5rem; }
.admin-stats { display: grid; gap: 0.75rem; margin: 1.5rem 0 2rem; }
@media (min-width: 36rem) { .admin-stats { grid-template-columns: repeat(3, 1fr); } }
.admin-stats > div {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sage-50);
}
.admin-stats b { font-size: 1.6rem; font-weight: 650; line-height: 1; color: var(--green-800); flex: none; }
.admin-stats span { font-size: var(--t-xs); color: var(--ink-soft); }
@media (min-width: 36rem) {
  .admin-stats > div { display: block; }
  .admin-stats b { display: block; margin-bottom: 0.2rem; font-size: 1.9rem; }
}

/* Onglets du back-office. Un seul rail, l'onglet actif porte le fond plein :
   la position est lisible sans dépendre de la couleur seule (le texte change de graisse). */
.seg {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.seg-tab {
  flex: 1 0 auto;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  white-space: nowrap;
}
.seg-tab[aria-selected="true"] { background: var(--green-800); color: #fff; font-weight: 600; }
.seg-tab:not([aria-selected="true"]):hover { background: var(--sage-50); color: var(--ink); }

/* Barre de filtres : empilée sur mobile, alignée dès qu'il y a la place.
   La recherche garde la priorité de largeur, les listes gardent leur taille utile. */
.filter-bar {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.filter-bar .field { margin: 0; }
@media (min-width: 44rem) {
  .filter-bar { display: flex; flex-wrap: wrap; align-items: end; }
  .filter-bar .field { flex: 1 1 12rem; }
  .filter-bar .field:first-child { flex: 2 1 18rem; }
}

/* Journal en ajout seul : une suite de lignes datées, sans action possible dessus. */
.journal { margin: 0.75rem 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.journal li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.journal li:last-child { border-bottom: 0; }
.journal b { display: block; font-weight: 600; }
.journal span { font-size: var(--t-xs); color: var(--ink-soft); overflow-wrap: anywhere; }

.review-item {
  margin: 1rem 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.review-item > .badge { margin-bottom: 0.6rem; }
.review-item h2 { font-size: var(--t-h3); }
.review-item h3 { margin: 0.4rem 0 0.5rem; }
.review-item p { font-size: var(--t-sm); }
.review-item ul { padding-left: 1.1rem; font-size: var(--t-sm); }
.review-item li { margin: 0.4rem 0; }
.review-item .actions { margin: 1rem 0 0; }
.review-item .notice { margin: 0.9rem 0; }

.review-proposal {
  margin: 1.25rem 0;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.review-proposal form { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.review-proposal p, .review-proposal li { overflow-wrap: anywhere; }

.owner-needs { margin: 0; padding: 0; list-style: none; }
.owner-needs li {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 36rem) { .owner-needs li { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.25rem; } }
.owner-needs li > span { display: grid; gap: 0.35rem; justify-items: start; font-size: var(--t-sm); }
.owner-needs small { color: var(--ink-faint); font-size: var(--t-xs); }
.owner-needs .button, .owner-needs button { flex: none; }

/* Suivi d'une proposition d'aide, de la transmission à la confirmation. */
.timeline { display: grid; gap: 0; margin: 1rem 0; padding: 0; list-style: none; }
.timeline li {
  position: relative;
  padding: 0 0 0.9rem 1.5rem;
  font-size: var(--t-sm);
  color: var(--ink-faint);
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.4rem;
  width: 0.6rem; height: 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
}
.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.28rem; top: 1.1rem; bottom: 0;
  width: 1px;
  background: var(--line);
}
.timeline li[data-done="true"] { color: var(--ink); font-weight: 600; }
.timeline li[data-done="true"]::before { border-color: var(--green-700); background: var(--green-700); }
.timeline li[data-current="true"] { color: var(--green-800); font-weight: 700; }
.timeline li[data-current="true"]::before { border-color: var(--apricot); background: var(--apricot); box-shadow: 0 0 0 3px var(--apricot-soft); }

.history { margin-top: 1.25rem; padding: 0.5rem 0; color: var(--ink-soft); font-size: var(--t-xs); }
.history ul { margin-top: 0.6rem; padding-left: 1.1rem; }
.history li { margin: 0.35rem 0; }

.photo-controls { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.photo-controls > h3 { margin-bottom: 0.4rem; }
.photo-editor { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.photo-editor h4 { margin-bottom: 0.6rem; }
.photo-editor form { max-width: 30rem; }
.photo-editor input[type="file"] { min-height: 2.75rem; padding: 0.5rem; background: var(--surface-sunk); }
.photo-previews { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.6rem 0; }
.photo-previews figure { margin: 0; }
.photo-previews img {
  display: block;
  width: 9rem; height: 6.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  object-fit: cover;
}
.photo-previews figcaption { margin-top: 0.3rem; color: var(--ink-faint); font-size: var(--t-xs); }
/* Un logo se montre en entier : contenu dans son cadre, jamais rogné. */
.photo-previews .logo-preview img { width: 6.5rem; padding: 0.4rem; background: var(--surface); object-fit: contain; }

.messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
  max-height: 32rem;
  padding: 0.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.message {
  max-width: 85%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);
  background: var(--surface);
}
.message.mine {
  align-self: flex-end;
  border-color: #c6d7c2;
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  background: var(--sage-100);
}
.message b { font-size: var(--t-xs); color: var(--green-700); }
.message p { margin: 0.25rem 0; font-size: var(--t-sm); white-space: pre-wrap; }
.message small { color: var(--ink-faint); font-size: var(--t-xs); }
@media (max-width: 36rem) { .message { max-width: 100%; } }

.totp-secret {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  font: var(--t-md) var(--mono);
  letter-spacing: 0.08em;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

/* Codes de secours : deux colonnes dès qu'il y a la place, en chasse fixe et bien
   espacés, parce qu'ils seront recopiés à la main ou imprimés. */
.codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}
.codes code {
  display: block;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  font: var(--t-md) var(--mono);
  letter-spacing: 0.1em;
  text-align: center;
  user-select: all;
  -webkit-user-select: all;
}

.success-icon {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--sage-200);
  color: var(--green-800);
  font-size: 1.6rem;
}

/* ---------- 13. Équipe -------------------------------------------------- */
.team-queue { display: grid; gap: 0.5rem; }
.queue-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
/* ---------- 13 bis. Statistiques de l'équipe ------------------------------ */
.stats-page { max-width: 72rem; margin-inline: auto; }
.stats-page h2 { margin: 3rem 0 1rem; font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem); }
.stats-page h3 { font-size: var(--t-md); margin: 1.25rem 0 0.75rem; }
.stats-intro { max-width: 62ch; }
.stats-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; margin: 1rem 0; }
.stats-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-left: auto; }
.stats-range .field, .compact-field { margin: 0; }
.stats-range input { min-height: 2.75rem; width: auto; }
.compact-field select { min-width: 16rem; }
.stats-period { margin: 0.25rem 0 0; color: var(--ink-faint); font: 400 var(--t-xs)/1.5 var(--mono); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--gap); }
.stat-tile {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem 1.2rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  outline: 1.5px solid var(--line);
  outline-offset: -1.5px;
}
.stat-label { color: var(--ink-soft); font-size: var(--t-sm); font-weight: 650; }
.stat-tile b { font-size: clamp(1.9rem, 2vw + 1rem, 2.6rem); font-weight: 850; font-stretch: 115%; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-tile small { color: var(--ink-faint); font-size: var(--t-xs); line-height: 1.4; }
.delta { font-size: var(--t-xs); font-weight: 700; color: var(--ink-soft); }
.delta.up { color: var(--green-700); }
.delta.down { color: var(--danger); }
.delta small { font-weight: 400; color: var(--ink-faint); }

.chart-figure { margin: 0; padding: 1.25rem; border-radius: var(--r-lg); background: var(--surface); outline: 1.5px solid var(--line); outline-offset: -1.5px; }
.chart-figure figcaption { margin-bottom: 0.75rem; font-weight: 700; }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--ink-faint); font: 400 11px/1 var(--sans); }
.chart .bar path { fill: var(--carbon); transition: fill var(--fast) ease; }
.chart .bar.on path { fill: var(--green-600); }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart-tip {
  position: absolute;
  top: -0.5rem;
  left: var(--x, 50%);
  z-index: 2;
  padding: 0.4rem 0.6rem;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--ivory);
  font-size: var(--t-xs);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.chart-tip b { font-size: var(--t-sm); margin-right: 0.25rem; }
.chart-figure details { margin-top: 0.75rem; }

.funnels, .stats-grid { display: grid; gap: 1.5rem var(--gap); }
@media (min-width: 64rem) { .funnels, .stats-grid { grid-template-columns: 1fr 1fr; } }
.funnel { display: grid; gap: 0.6rem; margin: 0 0 1.25rem; padding: 1rem 1.1rem; list-style: none; border-radius: var(--r-lg); background: var(--surface); outline: 1.5px solid var(--line); outline-offset: -1.5px; }
.funnel li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(4rem, 1fr) auto 3.75rem; align-items: center; gap: 0.75rem; font-size: var(--t-sm); }
.funnel-label { display: grid; font-weight: 650; line-height: 1.3; }
.funnel-label small { color: var(--ink-faint); font-size: 0.6875rem; font-weight: 400; }
.funnel-bar, .share-bar { height: 0.75rem; border-radius: 0.25rem; background: var(--surface-sunk); overflow: hidden; }
.funnel-bar i, .share-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 0.25rem; }
/* Une action terminée est pleine, un signal de navigation n'est que contour :
   la différence ne repose jamais sur la seule couleur. */
.funnel .done .funnel-bar i, .share-bar i { background: var(--carbon); }
.funnel .signal .funnel-bar i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--carbon); }
.funnel b { font-variant-numeric: tabular-nums; text-align: right; }
.funnel-rate { color: var(--ink-faint); font-size: var(--t-xs); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 36rem) {
  .funnel li { grid-template-columns: minmax(0, 1fr) auto auto; }
  .funnel-bar { grid-column: 1 / -1; grid-row: 2; }
}
.share { margin: 0; padding: 1rem 1.1rem; border-radius: var(--r-lg); background: var(--surface); outline: 1.5px solid var(--line); outline-offset: -1.5px; }
.share figcaption { font-weight: 700; margin-bottom: 0.75rem; }
.share ul { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.share li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(3rem, 1fr) auto 3.5rem; align-items: center; gap: 0.6rem; font-size: var(--t-sm); }
.share b, .share small { font-variant-numeric: tabular-nums; text-align: right; }
.share small { color: var(--ink-faint); }
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); outline: 1.5px solid var(--line); outline-offset: -1.5px; }
.stats-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.stats-table caption { padding: 1rem 1.1rem 0.5rem; text-align: left; font-weight: 700; }
.stats-table th { padding: 0.5rem 1.1rem; text-align: left; color: var(--ink-faint); font: 400 var(--t-xs)/1.3 var(--mono); text-transform: uppercase; border-bottom: 1px solid var(--line); }
.stats-table td { padding: 0.55rem 1.1rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.stats-table tr:last-child td { border-bottom: 0; }
.stats-table td:not(:first-child), .stats-table th:not(:first-child) { text-align: right; }
.stats-table small { color: var(--ink-faint); }

/* Liens par ville sous la liste des commerces (pages publiques). */
.city-links { margin-top: 2.5rem; }
.city-links h2 { font-size: var(--t-h3); }
.city-links ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }

/* ---------- 14. Modale et notifications -------------------------------- */
dialog {
  width: min(42rem, calc(100% - 1.5rem));
  max-height: 90dvh;
  padding: 1.75rem;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
dialog[open] { animation: sheet-in 280ms var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
dialog::backdrop { background: rgba(19, 35, 31, 0.6); }
dialog h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); }
dialog p, dialog li { font-size: var(--t-sm); }
dialog ul { padding-left: 1.2rem; }
dialog li { margin-bottom: 0.6rem; }
.modal-top { display: flex; justify-content: flex-end; margin-bottom: -1.5rem; }
.modal-top .eyebrow { margin: 0; }
.close {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: transparent;
  width: 2.75rem; min-width: 2.75rem;
  margin-top: -0.5rem;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) { .close:hover { --btn-bg: rgba(19, 35, 31, 0.08); } }
.success-icon {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--anis);
  font-size: 1.5rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 70;
  max-width: calc(100% - 1.5rem);
  padding: 0.85rem 1.2rem;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--ivory);
  font-size: var(--t-sm);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
  animation: rise 360ms var(--ease);
}
.toast[data-tone="error"] { background: var(--danger); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 1rem); } to { opacity: 1; transform: translateX(-50%); } }

main:focus, main :is(h1, h2):focus, dialog h2:focus { outline: none; }

/* ---------- 15. Mouvement ---------------------------------------------- */
/* Un seul moment signé : le titre se compose mot à mot, les deux feuillets se
   posent l'un sur l'autre, puis le tampon s'imprime. Le reste reste discret. */
@keyframes word-in { from { opacity: 0; transform: translateY(0.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes door-in-left { from { opacity: 0; transform: translate(-1.5rem, 1.5rem) rotate(-4deg); } }
@keyframes door-in-right { from { opacity: 0; transform: translate(1.5rem, 2rem) rotate(4deg); } }
@keyframes lens-in { from { opacity: 0; transform: scale(0.9); } }
@keyframes stamp-press {
  0% { opacity: 0; transform: scale(1.8) rotate(-2deg); }
  60% { opacity: 1; transform: scale(0.94) rotate(-10deg); }
  100% { opacity: 1; transform: scale(1) rotate(-9deg); }
}
@keyframes page-in { from { opacity: 0; transform: translateY(0.6rem); } }
.bon-title .w { animation: word-in 700ms var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.bon-lede { animation: word-in 700ms var(--ease) 320ms both; }
.door-help { animation: door-in-left 760ms var(--ease) 380ms both; }
.door-shop { animation: door-in-right 760ms var(--ease) 480ms both; }
.lens { animation: lens-in 600ms var(--ease) 640ms both; }
.lens .stamp { animation: stamp-press 520ms var(--ease) 1150ms both; }
main > :is(.listing, .detail-page, .form-page, .page-empty) { animation: page-in 380ms var(--ease) both; }

/* Page déjà écrite par le serveur : le script la redessine à l'identique, sans
   rejouer les entrées. Sinon le texte apparaîtrait, disparaîtrait puis reviendrait. */
main[data-prerendered]:not([data-prerendered="accueil"]) *,
main[data-prerendered]:not([data-prerendered="accueil"]) *::before,
main[data-prerendered]:not([data-prerendered="accueil"]) *::after { animation: none !important; }
/* Sur l'accueil, le premier écran était déjà là : seul le tampon s'imprime encore,
   le reste de la page entre comme à l'ordinaire. */
main[data-prerendered="accueil"] .bon-title .w, main[data-prerendered="accueil"] .bon-lede,
main[data-prerendered="accueil"] .door, main[data-prerendered="accueil"] .lens { animation: none !important; }
main[data-prerendered] .reveal { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .bon:hover, .door:hover, .door:focus-within { transform: none; }
}