/* =========================================================
   Avenir Moto — POC v3
   ---------------------------------------------------------
   Palette tirée du matériel réel du club, plus d'invention :
   · le rouge et le noir viennent du logo ;
   · le vibreur bleu et blanc vient des vibreurs de Carole,
     visibles sur les photos. L'ancien vibreur rouge était
     joli mais faux.

   Deux registres assumés :
   · SOMBRE — vitrine et page d'événement. Photo plein cadre.
   · CLAIR  — dès que le pilote s'inscrit, et back-office.

   Signature : l'inclinaison, reprise du lettrage du logo.
   Badges de date, titres et compteurs. Trois endroits, pas
   plus — sinon ce n'est plus une signature, c'est un tic.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700;1,800&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  /* Sombre */
  --nuit:      #0E1114;
  --nuit-2:    #171B20;
  --carbone:   #20252B;
  --carbone-2: #2A3038;
  --blanc:     #F5F6F4;
  --gris:      #99A1A9;

  /* Clair */
  --beton:      #E7E8E4;
  --papier:     #FFFFFF;
  --bitume:     #140F0F;   /* le noir du logo */
  --bitume-doux:#585F66;
  --ligne:      #CDD0CB;

  /* Identité */
  --marque:     #EA0E1A;   /* le rouge du logo */
  --marque-fonce:#B80A14;
  --kerb:       #2A62B0;   /* le bleu des vibreurs de Carole */

  /* Signalétique d'état */
  --jaune: #F5C518;
  --vert:  #22B368;

  --r: 5px;
  --max: 940px;
  --tunnel: 720px;

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --texte:   'Barlow', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.sombre { background: var(--nuit); color: var(--blanc); }
body.clair  { background: var(--beton); color: var(--bitume); }

.page   { max-width: var(--max);    margin: 0 auto; padding: 0 18px 72px; }
.etroit { max-width: var(--tunnel); margin: 0 auto; padding: 0 18px 72px; }

/* ---------- Vibreur bleu et blanc ---------- */
.vibreur {
  height: 9px;
  background: repeating-linear-gradient(115deg, var(--kerb) 0 16px, #FFF 16px 32px);
}

/* ---------- En-tête ---------- */
.site { background: var(--bitume); }
.site .inner {
  max-width: var(--max); margin: 0 auto; padding: 13px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site .logo { display: block; height: 42px; width: auto; }
.site .logo-texte {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase; color: #FFF;
}
.pied .logo-texte {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 22px; text-transform: uppercase; color: #FFF;
}

/* Bandeau de simulation — outil de développement, absent en production */
.simulation {
  background: #2A2F36; color: #C3CAD2; font-size: 13px;
  padding: 7px 18px; display: flex; gap: 12px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.simulation a { color: #FFF; text-decoration: none; border-bottom: 1px solid #55606B; }
.simulation a[aria-current] { color: var(--marque); border-color: var(--marque); }
.simulation strong { color: #8A939C; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; }
.site nav a {
  color: #A7AEB6; text-decoration: none; font-family: var(--display);
  font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 20px;
}
.site nav a:hover { color: #FFF; }
.site nav a:focus-visible { outline: 2px solid var(--marque); outline-offset: 3px; }
/* Page active sur la nav du haut (desktop) — D85. Soulignement en position
   absolue pour ne PAS casser la mise en ligne des liens. */
.site nav a[aria-current] { color: #FFF; position: relative; }
.site nav a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 2px; border-radius: 2px; background: var(--marque);
}

/* =================================================================
   Barre d'onglets PWA pilote (mobile) — D85.
   Générée en JS (data.js/monterTabbar) sur les pages pilotes ; la nav
   du haut est masquée uniquement là où la tabbar existe (body:has).
   ================================================================= */
.tabbar { display: none; }
.tabbar a svg { width: 23px; height: 23px; display: block; }

@media (max-width: 720px) {
  html.a-tabbar .site nav { display: none; }
  html.a-tabbar body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* Hygiène mobile PWA : jamais de scroll horizontal (overflow sur html, seul
     propagé au viewport), et le contenu qui déborde s'adapte. */
  html.a-tabbar, html.a-tabbar body { overflow-x: clip; }
  html.a-tabbar .heros h1 { overflow-wrap: break-word; }
  html.a-tabbar .stats { grid-template-columns: 1fr 1fr; }
  html.a-tabbar .stat, html.a-tabbar .date-carte,
  html.a-tabbar .bloc, html.a-tabbar .profil-grille > * { min-width: 0; }

  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0;
    box-sizing: border-box; overflow: hidden; z-index: 60;
    background: rgba(20, 15, 15, .90);
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
    backdrop-filter: saturate(1.5) blur(12px);
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    position: relative; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 9px 1px 8px; text-decoration: none; color: #8A939C;
    font-family: var(--display); font-size: 9.5px; letter-spacing: .02em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent; transition: color .15s ease;
  }
  .tabbar a span { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tabbar a:active { color: #FFF; }
  .tabbar a[aria-current] { color: var(--marque); }
  .tabbar a[aria-current]::before {
    content: ""; position: absolute; top: 0; width: 26px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--marque);
  }
}
@media (prefers-reduced-motion: reduce) { .tabbar a { transition: none; } }

/* ---------- Pied de page ---------- */
.pied { background: var(--bitume); color: var(--gris); margin-top: 40px; }
.pied .inner {
  max-width: var(--max); margin: 0 auto; padding: 26px 18px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.pied img { height: 46px; width: auto; }
.pied p { margin: 0; font-size: 13.5px; }

/* ---------- Typographie ---------- */
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: 0.01em; }
h1 { font-size: 46px; font-weight: 800; font-style: italic; line-height: 0.95; text-transform: uppercase; }
h2 { font-size: 23px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
h3 { font-size: 19px; font-weight: 700; }

.etiquette {
  font-family: var(--display); font-size: 12.5px; letter-spacing: 0.18em;
  text-transform: uppercase; margin: 0;
}
body.sombre .etiquette { color: var(--marque); }
body.clair  .etiquette { color: var(--bitume-doux); }

.secondaire { font-size: 14.5px; }
body.sombre .secondaire { color: var(--gris); }
body.clair  .secondaire { color: var(--bitume-doux); }

/* ---------- Héros photographique ---------- */
.heros {
  position: relative; overflow: hidden;
  min-height: 380px; display: flex; align-items: flex-end;
  background: var(--carbone);
}
.heros .fond {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 38%;
}
.heros .fond.sans-photo {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 34px, transparent 34px 68px),
    linear-gradient(160deg, #1B2C48 0%, #0E1114 62%);
}
.heros::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,20,.18) 0%, rgba(14,17,20,.55) 48%, rgba(14,17,20,.96) 100%);
}
.heros .contenu {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto; width: 100%;
  padding: 52px 18px 30px;
}
.heros h1 { text-shadow: 0 2px 24px rgba(0,0,0,.55); }

/* Bandeau incliné : signature reprise du lettrage du logo */
.incline {
  display: inline-block; transform: skewX(-10deg);
  background: var(--marque); padding: 5px 15px 4px; margin-bottom: 12px;
}
.incline > span {
  display: inline-block; transform: skewX(10deg);
  font-family: var(--display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: #FFF;
}

/* ---------- Carte de date ---------- */
.date-carte {
  display: block; text-decoration: none; color: inherit;
  background: var(--nuit-2); border: 1px solid var(--carbone-2);
  border-radius: var(--r); overflow: hidden; margin-bottom: 14px;
  transition: border-color .15s ease, transform .15s ease;
}
.date-carte:hover { border-color: var(--marque); transform: translateY(-2px); }
.date-carte:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }
.date-carte .visuel { height: 190px; background-size: cover; background-position: center 40%; position: relative; }
.date-carte .visuel.sans-photo {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 30px, transparent 30px 60px),
    linear-gradient(140deg, #1E3252, #121820);
}
.date-carte .badge-date {
  position: absolute; left: 0; bottom: 14px;
  transform: skewX(-10deg); background: var(--marque); padding: 7px 18px 6px 16px;
}
.date-carte .badge-date > span {
  display: block; transform: skewX(10deg); color: #FFF;
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 30px; line-height: 1; text-transform: uppercase;
}
.date-carte .badge-date small {
  display: block; font-size: 12px; font-style: normal; font-weight: 700;
  letter-spacing: 0.16em; line-height: 1.4;
}
.date-carte .infos { padding: 16px 18px 18px; display: flex; gap: 16px; align-items: flex-end; }
.date-carte .infos .txt { flex: 1; min-width: 0; }

.compteur-gros { flex: none; text-align: right; }
.compteur-gros .nb {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 40px; line-height: 0.9;
}
.compteur-gros .lib {
  font-family: var(--display); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gris);
}
.vert { color: var(--vert); } .jaune { color: var(--jaune); } .rouge { color: var(--marque); }

.prix-gros { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 27px; }

/* ---------- Galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 16px 0 4px; }
.galerie img { width: 100%; height: 112px; object-fit: cover; border-radius: var(--r); display: block; }

/* ---------- Bandes de groupe ---------- */
.groupe {
  display: flex; align-items: stretch; width: 100%; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  border-radius: var(--r); overflow: hidden; margin-bottom: 10px;
  background: var(--nuit-2); border: 1px solid var(--carbone-2);
  transition: border-color .15s ease;
}
.groupe:hover:not(:disabled) { border-color: var(--marque); }
.groupe:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }
.groupe:disabled { cursor: not-allowed; }
.groupe .rang { width: 6px; flex: none; background: var(--vert); }
.groupe.tendu   .rang { background: var(--jaune); }
.groupe.complet .rang { background: var(--marque); }
.groupe .corps { padding: 15px 17px; flex: 1; min-width: 0; }
.groupe .nom {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 24px; text-transform: uppercase; line-height: 1.05;
}
.groupe .desc { font-size: 13.5px; color: var(--gris); display: block; }
.groupe .compteur {
  flex: none; width: 96px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 10px 6px;
  background: var(--carbone); border-left: 1px solid var(--carbone-2);
}
.groupe .compteur .nb {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 36px; line-height: 1;
}
.groupe .compteur .lib {
  font-family: var(--display); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gris);
}
.groupe.dispo .compteur .nb { color: var(--vert); }
.groupe.tendu .compteur .nb { color: var(--jaune); }
.groupe.complet .compteur {
  background: repeating-linear-gradient(115deg, var(--marque) 0 11px, #FFF 11px 22px);
}
.groupe.complet .compteur .nb, .groupe.complet .compteur .lib { display: none; }
.groupe.complet .corps { opacity: .5; }

/* ---------- Blocs ---------- */
.bloc {
  background: var(--papier); border: 1px solid var(--ligne);
  border-radius: var(--r); padding: 20px; margin-bottom: 14px;
}
body.sombre .bloc { background: var(--nuit-2); border-color: var(--carbone-2); }

/* ---------- Formulaires ---------- */
label.champ {
  display: block; font-family: var(--display); font-size: 12.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bitume-doux); margin: 15px 0 5px;
}
/* Champs texte : on énumère les types texte ET on rattrape les inputs SANS
   attribut `type` (qui se comportent comme du texte mais échappaient au style).
   Toutes les branches ont la même spécificité (0,1,1) que les branches d'origine,
   donc les largeurs volontaires posées par une classe (ex. .r-icone) ou en inline
   continuent de l'emporter — aucune régression sur les champs dimensionnés. */
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], input[type=url], input[type=password], input[type=time],
input[type=search], input:not([type]), select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--ligne);
  border-radius: var(--r); font: inherit; background: var(--papier); color: var(--bitume);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--marque); outline-offset: 1px; border-color: var(--marque);
}
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.option { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ligne); }
.option:last-child { border-bottom: none; }
.option input { width: 19px; height: 19px; flex: none; accent-color: var(--marque); }
.option .prix { margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 20px; }

/* ---------- Boutons ---------- */
button.action, a.action {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 13px 26px; border: none; border-radius: var(--r);
  background: var(--marque); color: #FFF; cursor: pointer;
}
/* Utilisé aussi sur des <a> (CTA de connexion) : bouton, jamais un lien visité violet. */
a.action, a.action:link, a.action:visited, a.action:hover { color: #FFF; text-decoration: none; display: inline-block; }
button.action:hover, a.action:hover { background: var(--marque-fonce); }
button.action:disabled { background: #9AA0A4; cursor: not-allowed; }
button.discret {
  background: none; border: 1px solid var(--ligne); color: var(--bitume-doux);
  font-family: var(--display); font-size: 15px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 11px 18px; border-radius: var(--r); cursor: pointer;
}
body.sombre button.discret { border-color: var(--carbone-2); color: var(--gris); }
.barre-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }

/* ---------- Étapes et rebours ---------- */
.etapes { display: flex; gap: 5px; margin: 22px 0 18px; }
.etapes span { flex: 1; height: 4px; background: var(--ligne); border-radius: 2px; }
.etapes span.faite { background: var(--marque); }

.rebours {
  background: var(--bitume); color: #FFF; padding: 10px 15px; border-radius: var(--r);
  font-family: var(--display); font-size: 14.5px; letter-spacing: 0.1em;
  text-transform: uppercase; display: flex; justify-content: space-between; margin-bottom: 14px;
}
.rebours .temps { font-weight: 800; font-style: italic; color: var(--jaune); }

/* ---------- Récapitulatif ---------- */
.recap-ligne { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.recap-total {
  display: flex; justify-content: space-between; padding-top: 13px;
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 26px; text-transform: uppercase;
}

.paiement-choix { display: grid; gap: 10px; }
.paiement-choix button {
  text-align: left; padding: 15px 17px; border: 1px solid var(--ligne);
  border-radius: var(--r); background: var(--papier); font: inherit; cursor: pointer;
}
.paiement-choix button:hover { border-color: var(--marque); }
.paiement-choix .titre { font-family: var(--display); font-weight: 700; font-size: 19px; text-transform: uppercase; }

.alerte-tarif {
  background: rgba(245,197,24,.14); border-left: 3px solid var(--jaune);
  padding: 11px 15px; font-size: 14.5px; border-radius: 0 var(--r) var(--r) 0;
}
body.clair .alerte-tarif { background: #FCF3D8; color: #6B5108; }

/* ---------- Onglets du back-office ---------- */
.onglets { display: flex; gap: 4px; border-bottom: 2px solid var(--ligne); margin: 24px 0 22px; flex-wrap: wrap; }
.onglets button {
  background: none; border: none; border-bottom: 3px solid transparent;
  margin-bottom: -2px; padding: 11px 16px; cursor: pointer;
  font-family: var(--display); font-size: 16px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bitume-doux);
}
.onglets button:hover { color: var(--bitume); }
.onglets button[aria-selected="true"] { color: var(--marque); border-bottom-color: var(--marque); }
.onglets button:focus-visible { outline: 3px solid var(--marque); outline-offset: -3px; }
.panneau[hidden] { display: none; }

/* ---------- Tables ---------- */
table.liste { width: 100%; border-collapse: collapse; font-size: 14px; }
table.liste th {
  text-align: left; font-family: var(--display); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bitume-doux);
  border-bottom: 1px solid var(--ligne); padding: 9px 6px;
}
table.liste td { padding: 9px 6px; border-bottom: 1px solid var(--ligne); }

.jauge { display: flex; height: 13px; border-radius: 2px; overflow: hidden; background: var(--ligne); }
.jauge i { display: block; }

.vide {
  padding: 42px 20px; text-align: center; color: var(--bitume-doux);
  border: 1px dashed var(--ligne); border-radius: var(--r);
}

.vignette { position: relative; }
.vignette button {
  position: absolute; top: 6px; right: 6px; border: none; cursor: pointer;
  background: rgba(0,0,0,.65); color: #FFF; border-radius: 3px;
  font-family: var(--display); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 8px;
}

/* Crédit photo : obligation contractuelle courante avec un photographe */
.credit {
  font-size: 12px; letter-spacing: .04em; margin: 8px 0 0;
}
body.sombre .credit { color: #6E767E; }
body.clair  .credit { color: var(--bitume-doux); }

@media (max-width: 620px) {
  h1 { font-size: 33px; }
  .duo { grid-template-columns: 1fr; }
  .heros { min-height: 280px; }
  .site .logo { height: 34px; }
  .groupe .compteur { width: 78px; }
  .galerie img { height: 92px; }
}

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

/* =========================================================
   Multi-association
   ========================================================= */

/* Signature typographique pour une association sans logo fourni */
.logo-texte {
  font-family: var(--display); font-weight: 800; font-style: italic;
  text-transform: uppercase; color: #FFF; letter-spacing: 0.02em;
  border-left: 5px solid var(--marque); padding-left: 11px; display: inline-block;
}

/* Barre de démonstration — n'existe pas en production */
.barre-demo {
  background: #2A3038; color: #B9C0C7;
  font-family: var(--display); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 18px; display: flex; justify-content: space-between;
  align-items: center; gap: 14px; flex-wrap: wrap;
}
.barre-demo a {
  color: #B9C0C7; text-decoration: none; margin-left: 14px;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.barre-demo a:hover { color: #FFF; }
.barre-demo a.actif { color: #FFF; border-bottom-color: var(--marque); }

/* État du prestataire de paiement */
.etat-psp {
  display: inline-block; font-family: var(--display); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 3px;
}
.etat-psp.actif       { background: rgba(34,179,104,.15); color: #16794A; }
.etat-psp.a-configurer{ background: #FCF3D8; color: #6B5108; }


/* ---------- Association sans logo : signature typographique ---------- */
.logo-texte {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase;
  color: #FFF; display: inline-block;
  border-left: 5px solid var(--marque); padding-left: 11px; line-height: 1;
}

/* ---------- Bandeau de démonstration ----------
   Visible uniquement dans le POC : en production, c'est le nom
   de domaine qui détermine l'association. Volontairement laid
   pour qu'on ne le confonde jamais avec le produit. ---------- */
.demo {
  background: #221E1E; color: #C9C4C4; border-bottom: 1px dashed #4A4444;
  font-size: 13px; padding: 7px 0;
}
.demo .inner {
  max-width: var(--max); margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.demo select { width: auto; padding: 4px 8px; font-size: 13px; }
.demo .mention { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-size: 11.5px; }

/* ---------- Multi-association ---------- */
/* Marque textuelle quand l'association n'a pas de logo */
.logo-texte {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase; color: #FFF;
  display: inline-block; padding: 4px 0;
}
[data-logo] { display: inline-block; text-decoration: none; }

/* Barre de démonstration : n'existe que dans le POC.
   En production, l'association est déduite du nom de domaine. */
.barre-demo {
  background: #2A3038; color: #C7CDD3;
  font-family: var(--display); font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.barre-demo .inner {
  max-width: var(--max); margin: 0 auto; padding: 8px 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.barre-demo select {
  width: auto; padding: 5px 9px; font-size: 13px;
  background: #171B20; color: #FFF; border-color: #3A424B;
}
.barre-demo .note { color: #7E868E; text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* Santé du branchement PSP */
.pastille {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: baseline; margin-right: 7px;
}
.pastille.ok { background: var(--vert); }
.pastille.ko { background: var(--marque); }

/* =========================================================
   Ajouts multi-association
   ========================================================= */

/* Barre de démonstration — n'existe pas en production. */
.demo {
  background: #2A3038; color: #C8CDD3;
  font-family: var(--display); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 18px;
}
.demo select {
  width: auto; padding: 4px 8px; font-size: 13px;
  background: #171B20; color: #FFF; border: 1px solid #3A424B;
  font-family: var(--texte); text-transform: none; letter-spacing: 0;
}

/* Logo de secours : badge aux initiales, dans la couleur de l'association */
.logo-texte { display: inline-flex; align-items: center; gap: 10px; }
.logo-texte .sigle {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--h); min-width: var(--h);
  transform: skewX(-10deg); background: var(--marque); color: #FFF;
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: calc(var(--h) * 0.5); letter-spacing: .02em; padding: 0 10px;
}
.logo-texte .nom {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: calc(var(--h) * 0.52); text-transform: uppercase;
  letter-spacing: .02em; color: #FFF; white-space: nowrap;
}

/* Bandeau « connecté en tant que » du back-office */
.contexte-asso {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--papier); border: 1px solid var(--ligne);
  border-left: 4px solid var(--marque);
  border-radius: var(--r); padding: 14px 18px; margin-top: 22px;
}
.contexte-asso .nom { font-family: var(--display); font-weight: 700; font-size: 21px; text-transform: uppercase; }

.pastille {
  display: inline-block; font-family: var(--display); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px;
}
.pastille.ok    { background: rgba(34,179,104,.15); color: #14603A; }
.pastille.alerte{ background: rgba(245,197,24,.22); color: #7A5A05; }

/* ---------- Multi-association ---------- */
.logo-texte {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase;
  color: #FFF; display: block; line-height: 1.2;
}
.pied .logo-texte { font-size: 22px; }

.bandeau-demo {
  background: #2A3038; color: #A7AEB6;
  font-size: 12.5px; letter-spacing: .04em;
}
.bandeau-demo .inner {
  max-width: var(--max); margin: 0 auto; padding: 7px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.bandeau-demo select {
  width: auto; padding: 4px 8px; font-size: 13px;
  background: #171B20; color: #FFF; border-color: #3A414A;
}

.pastille {
  display: inline-block; font-family: var(--display); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px;
}
.pastille.ok    { background: rgba(34,179,104,.16); color: #157A4A; }
.pastille.ko    { background: rgba(234,14,26,.12);  color: #A80D16; }

/* ---------- Fiche date : tableau de bord ---------- */
.fiche-entete {
  background: var(--papier); border: 1px solid var(--ligne);
  border-radius: var(--r); padding: 20px; margin-bottom: 14px;
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.fiche-entete .txt { flex: 1; min-width: 240px; }
.rebours-jours {
  flex: none; text-align: center; background: var(--papier-2, #F3F4F1);
  border: 1px solid var(--ligne); border-radius: var(--r); padding: 12px 18px;
}
.rebours-jours .nb {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 34px; line-height: 1;
}
.rebours-jours .lib {
  font-family: var(--display); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bitume-doux);
}

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.chiffres > div {
  background: var(--papier); border: 1px solid var(--ligne);
  border-radius: var(--r); padding: 14px 16px;
}
.chiffres .nb {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 28px; line-height: 1.05;
}
.chiffres .lib {
  font-family: var(--display); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bitume-doux); margin-top: 3px;
}
.chiffres .sous { font-size: 12.5px; color: var(--bitume-doux); margin-top: 4px; }

.alerte {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 15px; border-radius: var(--r); margin-bottom: 8px; font-size: 14.5px;
}
.alerte.grave { background: rgba(234,14,26,.09); border-left: 3px solid var(--marque); color: #8E0A11; }
.alerte.moyen { background: #FCF3D8; border-left: 3px solid var(--jaune); color: #6B5108; }
.alerte button { margin-left: auto; }

.filtres { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filtres button {
  background: none; border: 1px solid var(--ligne); border-radius: 20px;
  padding: 6px 14px; cursor: pointer; font-family: var(--display);
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--bitume-doux);
}
.filtres button[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: #FFF; }

.pastille-groupe {
  display: inline-block; font-family: var(--display); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 20px;
  background: var(--papier-2, #F1F2EF); border: 1px solid var(--ligne);
}
.jeton-pilote {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 14px; color: #FFF;
}
.fil li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ligne); font-size: 14px; }
.fil { list-style: none; padding: 0; margin: 0; }
.fil li:last-child { border-bottom: none; }
.fil .point { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }

.colonnes { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .colonnes { grid-template-columns: 1fr; } }