/* =============================================================================
   Non au permis de tuer — feuille de style
   =============================================================================

   Identité reprise du site SAVE (mêmes fontes, même palette, mêmes surtitres
   mono en capitales) : l'espace d'organisation ne doit pas ressembler à un
   outil générique posé à côté de la campagne, il en fait partie.

   Le dispositif propre à cette application est le DÉCOMPTE. Tout ici est
   orienté vers une date ; chaque séance, chaque marche porte donc son « J-5 »
   dans la même fonte d'affichage que les grands titres. C'est une information
   vraie, pas un ornement : à trois semaines de l'échéance, « J-2 » se lit plus
   vite que « 18 septembre ».

   Chargé par <link> depuis /app.css plutôt qu'importé en CSS global : l'admin
   Payload a sa propre feuille, et rien de ce fichier ne doit fuir dedans.
   ========================================================================== */

/* --- Fontes ---------------------------------------------------------------
   Fichiers locaux, servis par l'application. Aucune requête vers un tiers :
   une fonte Google trahirait l'IP de chaque visiteur (SPEC §10.4). */
@font-face {
  font-family: 'TuskerGrotesk';
  src: url('/fonts/TuskerGrotesk-3500Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'TuskerGrotesk';
  src: url('/fonts/TuskerGrotesk-3700Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'TuskerGroteskWide';
  src: url('/fonts/TuskerGrotesk-5500Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'TuskerGroteskWide';
  src: url('/fonts/tusker-grotesk-5700-bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  --bg: #0a0a0a;
  --bg-2: #141414;
  --bg-3: #1c1c1c;
  --ink: #f4f1ec;
  --ink-dim: #a8a29e;
  --ink-faint: #6b6764;
  --rule: #262626;
  --rule-strong: #3a3a3a;
  --red: #e02424;
  --red-deep: #a81818;
  --red-wash: rgba(224, 36, 36, .08);

  --font-display: 'TuskerGroteskWide', 'Haettenschweiler', 'Impact', 'Arial Black', sans-serif;
  --font-narrow: 'TuskerGrotesk', 'Impact', 'Arial Narrow', sans-serif;
  --font-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

  --step: 6px;
  --gutter: 20px;
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--red); color: #fff; }

/* Le focus doit rester visible : on organise ces pages au clavier, vite. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- Primitives de texte -------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow--red { color: var(--red); }

.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.01em;
}

h1.title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(34px, 9vw, 68px);
  line-height: .88;
  letter-spacing: -.015em;
}
h1.title em { font-style: italic; color: var(--red); }

h2.section-title {
  font-family: var(--font-narrow);
  text-transform: uppercase;
  font-size: clamp(22px, 5vw, 32px);
  line-height: 1;
  letter-spacing: .01em;
}

.lede { color: var(--ink-dim); font-size: 17px; max-width: 62ch; }
.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }

/* --- Mise en page --------------------------------------------------------- */

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 620px; }

.stack > * + * { margin-top: calc(var(--step) * 3); }
.stack-lg > * + * { margin-top: calc(var(--step) * 7); }

.row-between {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

/* =============================================================================
   LE DÉCOMPTE — dispositif signature
   ========================================================================== */

/**
 * Un jalon relatif à la date de la marche. « J-5 », « JOUR J », « J+2 ».
 * Toujours dans la fonte d'affichage, toujours tabulaire, pour qu'une colonne
 * de jalons s'aligne au pixel et se parcoure d'un coup d'oeil.
 */
.jour {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: .8;
  color: var(--ink);
  display: inline-block;
}
.jour--xl { font-size: clamp(56px, 18vw, 132px); color: var(--red); }
.jour--lg { font-size: clamp(28px, 7vw, 40px); }
.jour--sm { font-size: 22px; }
/* Le jour même, et lui seul, passe au rouge : c'est le seul jour qui compte. */
.jour[data-today="true"] { color: var(--red); }
/* Le passé s'efface sans disparaître. */
.jour[data-past="true"] { color: var(--ink-faint); }

.jour-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); display: block; margin-top: 8px;
}

/* =============================================================================
   Contrôles
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;                 /* cible tactile : ces pages servent dans la rue */
  padding: 10px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { border-color: var(--ink-dim); background: var(--bg-3); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.btn--primary:hover { background: var(--red-deep); border-color: var(--red-deep); }

.btn--ghost { border-color: transparent; color: var(--ink-dim); padding-inline: 8px; }
.btn--ghost:hover { color: var(--ink); background: transparent; text-decoration: underline; }

.btn--danger { border-color: var(--red-deep); color: var(--red); }
.btn--danger:hover { background: var(--red-wash); border-color: var(--red); }

.btn--sm { min-height: 34px; padding: 6px 12px; font-size: 11px; }
.btn--block { width: 100%; }

.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Champs --------------------------------------------------------------- */

label.field { display: block; }
.field-label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); display: block; margin-bottom: 6px;
}
.field-hint { font-size: 13px; color: var(--ink-faint); margin-top: 6px; }

input[type="text"], input[type="tel"], input[type="email"], input[type="date"],
input[type="time"], input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;                  /* < 16px déclenche un zoom au focus sur iOS */
  line-height: 1.4;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ink-dim); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
                    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* Le code d'accès : caractères espacés, lecture chiffre par chiffre. */
input.code-input {
  font-family: var(--font-mono);
  font-size: 26px;
  letter-spacing: .34em;
  text-align: center;
  text-transform: uppercase;
  padding: 14px 12px;
}

/* --- Messages ------------------------------------------------------------- */

.notice {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-faint);
  background: var(--bg-2);
  padding: 12px 14px;
  font-size: 14px;
  border-radius: var(--radius);
}
.notice--error { border-left-color: var(--red); color: var(--ink); }
.notice--ok { border-left-color: var(--ink); }

/* Encart juridique des collages : ne se replie pas, ne se ferme pas. */
.notice--legal {
  border-left-color: var(--red);
  background: var(--red-wash);
  font-size: 13.5px;
  line-height: 1.5;
}
.notice--legal strong { color: var(--ink); }

.empty {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 14.5px;
}
.empty strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }

/* =============================================================================
   Statuts — encodés par le POIDS DE L'ENCRE, pas par la couleur
   =============================================================================
   Une palette de statuts multicolore (vert = soutien, orange = en cours…) est
   la solution attendue, mais elle jure avec une identité qui n'a que deux
   couleurs, et elle échoue pour qui distingue mal le rouge du vert. Ici, un
   statut acquis est plein, un statut en cours est en contour, un statut mort
   est barré. Le rouge reste réservé à ce qui appelle une action.
   ========================================================================== */

.pip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink-dim);
  white-space: nowrap;
}
/* Acquis : plein. */
.pip[data-tone="acquis"] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
/* En cours : contour net. */
.pip[data-tone="encours"] { border-color: var(--ink-dim); color: var(--ink); }
/* À faire : contour discret, mais marqué en rouge — c'est ce qui appelle. */
.pip[data-tone="afaire"] { border-color: var(--red); color: var(--red); }
/* Perdu : barré. */
.pip[data-tone="perdu"] { color: var(--ink-faint); text-decoration: line-through; }
/* Neutre : rien. */
.pip[data-tone="neutre"] { color: var(--ink-faint); }

/* Le menu de statut porte lui-même son ton : il se lit sans qu'on ait besoin
   d'une pastille en plus, qui répétait la même information. */
.select-statut {
  min-height: 36px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-color: var(--rule-strong);
}
.select-statut[data-tone="acquis"] { background: var(--ink); color: var(--bg); font-weight: 700; border-color: var(--ink); }
.select-statut[data-tone="encours"] { color: var(--ink); border-color: var(--ink-dim); }
.select-statut[data-tone="afaire"] { color: var(--red); border-color: var(--red); }
.select-statut[data-tone="perdu"] { color: var(--ink-faint); }

/* =============================================================================
   Listes et tableaux
   =============================================================================
   Pas de <table> pour les registres : sur un téléphone, un tableau à huit
   colonnes est illisible quoi qu'on fasse. Une grille CSS qui se replie en
   fiche empilée sous 760 px donne les deux lectures sans dupliquer le balisage.
   ========================================================================== */

.list { border-top: 1px solid var(--rule); }

.item {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
a.item:hover, button.item:hover { background: var(--red-wash); }

.item-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.item-name {
  font-family: var(--font-narrow);
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: .01em;
}
.item-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: .04em;
  margin-top: 4px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.item-meta span::after { content: " ·"; color: var(--rule-strong); }
.item-meta span:last-child::after { content: ""; }

/* Grille de registre : colonnes sur grand écran, fiches empilées sur mobile.
   Le tableau défile horizontalement plutôt que de comprimer les colonnes —
   un champ de six caractères de large ne sert à personne. */
.tableau-defilant { overflow-x: auto; padding-bottom: 4px; }
.grid-rows { border-top: 1px solid var(--rule); }
.grid-row {
  display: grid;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.grid-head {
  display: none;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-strong);
}
@media (min-width: 760px) {
  .grid-head { display: grid; gap: 6px; grid-template-columns: var(--cols); min-width: max-content; }
  .grid-row { grid-template-columns: var(--cols); min-width: max-content; }
}

/* --- Cellules -------------------------------------------------------------
   TOUTES les cellules ont la même hauteur et la même assise. C'est la seule
   règle qui compte : une ligne dont les champs ne s'alignent pas se lit comme
   un escalier, et rend un tableau de cent lignes pénible à parcourir. */
.cellule {
  height: 34px;
  min-height: 34px;
  padding: 4px 8px;
  font-size: 13.5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink);
  width: 100%;
}
.cellule:hover:not(:disabled) { border-color: var(--rule); background: var(--bg-2); }
.cellule:focus { border-color: var(--ink-dim); background: var(--bg-2); }
.cellule:disabled { color: var(--ink-faint); cursor: not-allowed; }
.cellule::placeholder { color: var(--ink-faint); }
select.cellule { padding-right: 26px; background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; }

.cellule--nom { font-weight: 600; font-size: 14px; }

/* Les notes prennent toute la largeur, sous la rangée principale. */
.cellule--notes {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--ink-dim);
  border-color: transparent;
}

.cellule--supprimer {
  padding: 0; font-size: 18px; line-height: 1;
  color: var(--ink-faint); cursor: pointer;
}
.cellule--supprimer:hover:not(:disabled) { color: var(--red); border-color: var(--red); background: transparent; }
.cellule--supprimer:disabled { opacity: 0; pointer-events: none; }

button.cellule { justify-content: center; }

/* La ligne d'ajout.
   Elle était trop discrète : un champ vide au bas d'une liste de cinquante
   lignes ne se voit pas, et on en conclut qu'il faut passer par l'admin. Elle
   porte donc un cadre pointillé et un « + » rouge — la seule chose de la page
   qui ressemble à un bouton d'ajout. */
.ligne-ajout {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color .12s ease, background .12s ease;
}
.ligne-ajout:hover, .ligne-ajout:focus-within {
  border-color: var(--red);
  background: var(--red-wash);
}
.ligne-ajout-plus {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1;
  color: var(--red);
  flex: 0 0 auto;
}
.ligne-ajout-champ {
  flex: 1 1 auto;
  height: 38px; min-height: 38px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 14px;
  padding: 0;
}
.ligne-ajout-champ:focus { outline: none; }
.ligne-ajout-champ::placeholder { color: var(--ink-dim); }

/* =============================================================================
   Cartes de séance
   ========================================================================== */

.card {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 16px;
}
/* Une séance qui manque de bras porte la marque rouge — c'est le seul appel. */
.card[data-needs="true"] { border-left: 3px solid var(--red); }
.card[data-status="annulee"] { opacity: .5; }

.card-top {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
}
.card-title {
  font-family: var(--font-narrow);
  text-transform: uppercase;
  font-size: 19px; line-height: 1.05;
}
.card-when {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--ink-dim); margin-top: 6px;
}
/* Le délai d'une séance, en toutes lettres. Volontairement PAS traité comme le
   décompte « J-n » de la marche : ce sont deux repères différents, et leur
   donner la même apparence les faisait confondre. */
.card-delai {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  padding-top: 3px;
}
.card-delai[data-imminent] { color: var(--red); }

.card-body { margin-top: 12px; font-size: 14.5px; color: var(--ink-dim); }
.card-body dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 10px;
}
.card-body dd { color: var(--ink); font-size: 14.5px; }
/* Le matériel à apporter est une demande adressée à qui lit : il porte la
   couleur des choses qui appellent une action, comme les séances dégarnies. */
.card-body dd.card-ask {
  color: var(--red);
  border-left: 2px solid var(--red);
  padding-left: 10px;
  margin-left: -12px;
}

.card-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule);
}

/* Les inscrit·es : des initiales, jamais des noms complets. */
.people { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.person {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--rule-strong);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink);
  text-transform: uppercase;
}
.person[data-status="peut_etre"] { border-style: dashed; color: var(--ink-dim); }
.person[data-me="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.people-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }

/* =============================================================================
   Pads
   ========================================================================== */

/* Le titre s'édite sur place : pas de bouton « renommer », on tape dedans. */
.pad-titre {
  font-family: var(--font-narrow);
  text-transform: uppercase;
  font-size: clamp(22px, 5vw, 32px);
  line-height: 1;
  letter-spacing: .01em;
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  margin-left: -8px;
  min-height: 0;
  flex: 1 1 auto;
}
.pad-titre:hover { border-color: var(--rule); }
.pad-titre:focus { border-color: var(--ink-dim); background: var(--bg-2); }

/* --- Barre d'outils ------------------------------------------------------
   Collante en haut de la zone : sur un compte rendu d'une page, on met en
   forme aussi bien au milieu du texte qu'au début. */
.pad-barre {
  position: sticky; top: 96px; z-index: 5;
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 6px 8px;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.pad-outil {
  min-width: 32px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}
.pad-outil:hover { background: var(--bg-2); color: var(--ink); }
.pad-outil[data-actif] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pad-pastille {
  width: 15px; height: 15px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,.25); display: block;
}
.pad-sep { width: 1px; height: 20px; background: var(--rule-strong); margin: 0 5px; }
.pad-taille {
  min-height: 32px; width: auto; min-width: 120px;
  padding: 4px 26px 4px 8px;
  font-size: 12.5px;
  background-color: var(--bg-2);
}

/* --- Zone d'écriture ------------------------------------------------------
   Haute et aérée : on y prend des notes de réunion, ce qui compte est de voir
   beaucoup de lignes à la fois. */
.pad-zone {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 0 0 var(--radius) var(--radius);
}
.pad-contenu {
  min-height: 58vh;
  padding: 18px;
  outline: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
}
.pad-contenu > * + * { margin-top: .7em; }
.pad-contenu h1 { font-family: var(--font-narrow); text-transform: uppercase; font-size: 30px; line-height: 1.1; }
.pad-contenu h2 { font-family: var(--font-narrow); text-transform: uppercase; font-size: 23px; line-height: 1.15; }
.pad-contenu h3 { font-size: 18px; font-weight: 700; }
.pad-contenu ul, .pad-contenu ol { padding-left: 1.4em; }
.pad-contenu li { margin-top: .25em; }
.pad-contenu blockquote {
  border-left: 3px solid var(--red);
  padding-left: 14px;
  color: var(--ink-dim);
}
.pad-contenu code {
  font-family: var(--font-mono); font-size: .9em;
  background: var(--bg-3); padding: 1px 5px; border-radius: 3px;
}
.pad-contenu pre {
  background: var(--bg-3); padding: 12px; border-radius: var(--radius);
  overflow-x: auto; font-family: var(--font-mono); font-size: 13px;
}
/* Le surligneur porte du texte sombre : nos couleurs sont claires, et de
   l'encre claire dessus serait illisible. */
.pad-contenu mark { color: #16130f; padding: 1px 3px; border-radius: 2px; }
.pad-contenu hr { border: 0; border-top: 1px solid var(--rule-strong); }

/* Cases à cocher : le compte rendu se termine souvent en liste de choses à faire. */
.pad-contenu ul[data-type="taskList"] { list-style: none; padding-left: 0; }
.pad-contenu ul[data-type="taskList"] li { display: flex; gap: 10px; align-items: flex-start; }
.pad-contenu ul[data-type="taskList"] li > label { margin-top: .2em; }
.pad-contenu ul[data-type="taskList"] li > div { flex: 1 1 auto; }
.pad-contenu input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; accent-color: var(--red); }

/* Placeholder de premier usage : une page blanche n'aide personne à démarrer. */
.pad-contenu p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  float: left; height: 0; pointer-events: none;
}

.pad-etat {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 8px;
}
.pad-etat[data-etat="hors-ligne"] { color: var(--red); text-transform: none; letter-spacing: .02em; }

.pad-apercu {
  font-size: 13.5px;
  color: var(--ink-dim);
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============================================================================
   Compteurs du tableau de bord
   ========================================================================== */

.counters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 700px) { .counters { grid-template-columns: repeat(4, 1fr); } }

.counter { padding: 16px 14px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.counter:nth-child(2n) { border-right: 0; }
@media (min-width: 700px) {
  .counter { border-bottom: 0; }
  .counter:nth-child(2n) { border-right: 1px solid var(--rule); }
  .counter:last-child { border-right: 0; }
}
.counter-value {
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 44px);
  line-height: .85;
  font-variant-numeric: tabular-nums;
}
.counter-value[data-alert="true"] { color: var(--red); }
.counter-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 10px;
}

/* =============================================================================
   Barre de l'espace
   ========================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 10, 10, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
}
.topbar-city {
  font-family: var(--font-narrow); text-transform: uppercase;
  font-size: 18px; letter-spacing: .01em; text-decoration: none;
}
.topbar-city span { color: var(--red); }

/* --- Navigation de l'espace ------------------------------------------------
   Sur téléphone : un bouton qui nomme la section courante et déplie la liste.
   À partir de 760 px : la rangée d'onglets.

   La barre défilante d'avant ne marchait pas — elle montrait trois sections sur
   dix, sans rien indiquer qu'il y en avait d'autres. */

.nav-espace { border-bottom: 1px solid var(--rule); }

.nav-bouton {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 46px; padding: 0 var(--gutter);
  background: transparent; border: 0; border-top: 1px solid var(--rule);
  color: var(--ink); cursor: pointer; text-align: left;
}
.nav-bouton-icone { font-size: 17px; color: var(--red); width: 16px; }
.nav-bouton-libelle {
  flex: 1 1 auto;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
}
.nav-bouton-compte {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-faint);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 1px 7px;
}

.nav-liste { display: none; padding-bottom: 6px; }
.nav-liste[data-ouvert] { display: block; }

.nav-lien {
  display: block;
  min-height: 46px; line-height: 46px;
  padding: 0 var(--gutter);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
  border-left: 3px solid transparent;
}
.nav-lien:hover { color: var(--ink); background: var(--bg-2); }
.nav-lien[aria-current="page"] { color: var(--ink); border-left-color: var(--red); }

.nav-quitter { padding: 8px var(--gutter) 0; border-top: 1px solid var(--rule); margin-top: 6px; }

@media (min-width: 760px) {
  /* Le bouton et le repli n'ont plus lieu d'être : tout tient sur une ligne. */
  .nav-bouton { display: none; }
  .nav-quitter { display: none; }

  .nav-liste {
    display: flex; gap: 2px;
    padding-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-liste::-webkit-scrollbar { display: none; }

  .nav-lien {
    flex: 0 0 auto;
    min-height: 0; line-height: 1;
    padding: 13px 12px;
    font-size: 11px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
  }
  .nav-lien:hover { background: transparent; }
  .nav-lien[aria-current="page"] { border-bottom-color: var(--red); }
}

/* Le nom et « Quitter » passent dans le menu sur petit écran. */
.topbar-fin { display: none; align-items: center; gap: 12px; }
@media (min-width: 760px) { .topbar-fin { display: flex; } }

/* =============================================================================
   Pages publiques
   ========================================================================== */

/* --- En-tête public --------------------------------------------------------
   Collant, discret, toujours là : on arrive souvent sur une page intérieure
   par un lien partagé, et il faut pouvoir remonter au reste du site. */
.entete {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10, 10, 10, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.entete-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  min-height: 54px; padding-block: 8px;
}
.entete-marque {
  font-family: var(--font-narrow);
  text-transform: uppercase;
  font-size: 17px; line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.entete-marque span { color: var(--red); }
.entete-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.entete-nav a {
  display: inline-flex; align-items: center;
  min-height: 38px; padding: 0 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.entete-nav a:hover { color: var(--ink); border-bottom-color: var(--red); }

.hero {
  padding: 44px 0 40px;
  border-bottom: 1px solid var(--rule);
}
.hero-count { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }

/* La confrontation chiffrée : 732 086 signatures contre 0 débat. */
.confront {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 20px;
}
@media (min-width: 700px) { .confront { grid-template-columns: 1fr 1px 1fr; align-items: center; } }
.confront-rule { background: var(--rule); width: 100%; height: 1px; }
@media (min-width: 700px) { .confront-rule { height: 100%; width: 1px; } }
.confront-value {
  font-family: var(--font-display); font-size: clamp(38px, 10vw, 72px);
  line-height: .85; font-variant-numeric: tabular-nums;
}
.confront-value[data-tone="red"] { color: var(--red); }
.confront-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 12px;
}

.doors { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .doors { grid-template-columns: repeat(3, 1fr); } }
.door {
  background: var(--bg); padding: 22px 18px; text-decoration: none;
  display: flex; flex-direction: column; gap: 8px; min-height: 120px;
  transition: background .12s ease;
}
.door:hover { background: var(--bg-2); }
.door-title { font-family: var(--font-narrow); text-transform: uppercase; font-size: 24px; line-height: 1; }
.door:hover .door-title { color: var(--red); }
.door-desc { font-size: 14px; color: var(--ink-dim); }

/* =============================================================================
   Kit de mobilisation
   ========================================================================== */

.kit-grille {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .kit-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .kit-grille { grid-template-columns: repeat(3, 1fr); } }

.kit-carte {
  background: var(--bg);
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: background .12s ease;
}
.kit-carte:hover { background: var(--bg-2); }

/* L'aperçu montre l'affiche : c'est elle qu'on reconnaît, pas son titre. */
.kit-apercu {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.kit-apercu img { width: 100%; height: 100%; object-fit: cover; }

/* Sans aperçu, la tuile ne doit pas être un aplat noir : une trame diagonale
   discrète et le format en grand disent au moins de quoi il s'agit. */
.kit-apercu:not(:has(img)) {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bg-2) 0 10px,
    var(--bg-3) 10px 20px
  );
}
.kit-format {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--ink-dim);
  text-transform: uppercase;
  padding: 6px 14px;
  border: 2px solid var(--rule-strong);
  background: var(--bg);
}
.kit-apercu[data-canva] .kit-format { color: var(--red); border-color: var(--red); }

.kit-corps { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.kit-titre {
  font-family: var(--font-narrow);
  text-transform: uppercase;
  font-size: 19px; line-height: 1.05;
}
.kit-carte:hover .kit-titre { color: var(--red); }
.kit-desc { font-size: 13.5px; color: var(--ink-dim); line-height: 1.45; }
.kit-action {
  margin-top: auto; padding-top: 10px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--red);
}
.kit-meta { color: var(--ink-faint); letter-spacing: .04em; }

.footer {
  border-top: 1px solid var(--rule);
  margin-top: 60px; padding: 28px 0 40px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink-faint);
}
.footer a { color: var(--ink-dim); }

/* Utilitaires ------------------------------------------------------------- */
.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;
}


/* =============================================================================
   Éditeur de visuels personnalisables
   =============================================================================
   Repris de la feuille du site SAVE, dont le composant est repris aussi. Les
   classes gardent leur préfixe `pdt-` : renommer trente sélecteurs dans un
   composant de 19 Ko pour le seul plaisir de la cohérence des noms, c'est
   trente occasions de casser quelque chose sans rien gagner.

   Les variables (--red, --ink, --rule…) sont les mêmes des deux côtés : la
   charte est commune.
   ========================================================================== */
.pdt-kit-preview {
  border: 1px solid var(--rule); background: #000; padding: 16px;
  display: flex; align-items: center; justify-content: center; min-height: 320px;
}
.pdt-kit-preview canvas { max-width: 100%; max-height: 70vh; height: auto; display: block; }
.pdt-canvas { cursor: grab; touch-action: none; }
.pdt-canvas:active { cursor: grabbing; }
.pdt-hint {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--ink-dim); line-height: 1.6; margin: -4px 0 4px;
}
.pdt-field select {
  background: transparent; border: 1px solid var(--rule); color: var(--ink);
  padding: 11px 13px; font-family: var(--font-body); font-size: 14px;
}
.pdt-field select option { background: #0a0a0a; }
.pdt-field input[type="range"] { accent-color: var(--red); padding: 0; border: 0; }
.pdt-field input[type="color"] {
  width: 100%; height: 42px; padding: 2px; background: transparent;
  border: 1px solid var(--rule); cursor: pointer;
}
.pdt-field-inline { flex-direction: row; align-items: flex-end; gap: 16px; }
.pdt-field-inline > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pdt-check {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim); padding-bottom: 12px;
}
.pdt-check input { accent-color: var(--red); }
.pdt-dl-row { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pdt-download-alt { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.pdt-download-alt:hover { background: transparent; border-color: var(--red); color: var(--red); }
.pdt-kit-form { display: flex; flex-direction: column; gap: 18px; }
.pdt-tpl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pdt-tpl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; padding: 9px 14px; cursor: pointer;
  background: transparent; color: var(--ink-dim); border: 1px solid var(--rule);
}
.pdt-tpl[aria-pressed="true"] { border-color: var(--red); color: var(--red); }
.pdt-field { display: flex; flex-direction: column; gap: 6px; }
.pdt-field label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.pdt-field input {
  background: transparent; border: 1px solid var(--rule); color: var(--ink);
  padding: 11px 13px; font-family: var(--font-body); font-size: 14px;
}
.pdt-field input:focus { outline: none; border-color: var(--red); }
.pdt-download {
  padding: 15px 22px; background: var(--red); color: #fff; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
}
.pdt-download:hover { background: var(--red-deep); }
.pdt-download:disabled { opacity: .45; cursor: not-allowed; }
.pdt-kit-call:hover { border-color: var(--red); background: rgba(224,36,36,.04); }
.pdt-kit-call-counts {
  display: flex; flex-wrap: wrap; gap: 10px 32px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim);
}
.pdt-kit-call-counts strong {
  font-family: var(--font-display); font-size: 22px; color: var(--ink);
  margin-right: 8px; vertical-align: -2px;
}
.pdt-kit-call-cta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red); white-space: nowrap;
}
.pdt-kitsec:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.pdt-kitsec-head {
  display: flex; align-items: center; gap: 15px; margin-bottom: 12px;
}
.pdt-kitsec-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px;
}
.pdt-kitsec-title {
  font-family: var(--font-display-narrow); text-transform: uppercase;
  font-size: clamp(22px, 3.2vw, 34px); line-height: 1.05; color: var(--ink);
}
.pdt-kitsec-desc {
  color: var(--ink-dim); line-height: 1.6; max-width: 62ch;
  margin: 0 0 32px 45px; font-size: 14px;
}
.pdt-kit { grid-template-columns: 1fr; }