/* ============================================================
   LUCARNE — THÈME « FC »
   ------------------------------------------------------------
   La structure vient de SportEasy et Spond (grand titre, sections,
   pavés, barre flottante). L'habillage vient de l'univers EA FC :
   nuit profonde, un seul vert néon pour l'action, typographie
   italique très grasse, angles coupés.
   L'or reste à nous : la cocarde et les distinctions.

   Chargé APRÈS styles.css, ce fichier a le dernier mot.
   Sombre par défaut, clair si le téléphone le demande.
   ============================================================ */

:root {
  --fc-nuit:      #070B12;
  --fc-fond:      #0B1119;
  --fc-panneau:   #141C2B;
  --fc-panneau-h: #1B2536;
  --fc-neon:      #0BE66E;
  --fc-neon-sourd:#0A9E52;
  --fc-or:        #F5C542;
  --fc-or-p:      #C9A227;
  --fc-rouge:     #FF4D4D;
  --fc-bleu:      #3B9DFF;
  --fc-texte:     #F4F7FB;
  --fc-texte2:    #93A1B5;
  --fc-texte3:    #5E6D82;
  --fc-ligne:     rgba(255,255,255,.09);
  --fc-ligne-f:   rgba(255,255,255,.17);
  --fc-sur-neon:  #04210F;
  --fc-ombre:     0 6px 24px rgba(0,0,0,.45);
  --fc-biseau:    polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

/* Le même vocabulaire en clair : mêmes formes, contraste inversé.
   Le vert s'assombrit pour rester lisible sur du blanc. */
html.clair {
    --fc-nuit:      #EDEFF3;
    --fc-fond:      #F1F3F6;
    --fc-panneau:   #FFFFFF;
    --fc-panneau-h: #F7F8FA;
    --fc-neon:      #087A3F;
    --fc-neon-sourd:#0BE66E;
    --fc-or:        #B8860B;
    --fc-or-p:      #8A6508;
    --fc-texte:     #0B1119;
    --fc-texte2:    #4A5769;
    --fc-texte3:    #78859A;
    --fc-ligne:     rgba(11,17,25,.10);
    --fc-ligne-f:   rgba(11,17,25,.20);
    --fc-sur-neon:  #FFFFFF;
    --fc-rouge:     #C5303A;
    --fc-ombre:     0 2px 10px rgba(11,17,25,.09);
  }

/* ---------- le fond ---------- */
html, body { background: var(--fc-nuit); color: var(--fc-texte); }
#app { background: var(--fc-nuit); }

/* ---------- le bandeau et son grand titre ---------- */
.topbar {
  background: var(--fc-fond);
  border-bottom: 1px solid var(--fc-ligne);
  box-shadow: none;
  padding: 0;
  display: block;
  position: relative;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--fc-neon) 0%, transparent 62%);
}
.bandeau { display: block; padding: 13px 16px 16px; max-width: none; }
.cap-h { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.cap-cocarde { width: 26px; height: 26px; flex: none; }
.cap-nom {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fc-texte2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-ava {
  width: 30px; height: 30px; flex: none; padding: 0; border: none; background: none;
  border-radius: 50%; cursor: pointer; display: grid; place-items: center;
}
.cap-ava .ava {
  width: 30px; height: 30px; font-size: 11px; font-weight: 900;
  background: var(--fc-neon); color: var(--fc-sur-neon); border: none;
}
.cap-b { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.cap-titre {
  font-size: 31px; font-weight: 900; font-style: italic; letter-spacing: -.035em;
  text-transform: uppercase; line-height: .95; margin: 0; color: var(--fc-texte);
}
.cap-act {
  width: 40px; height: 40px; flex: none; border: none; cursor: pointer;
  display: grid; place-items: center;
  background: var(--fc-neon); color: var(--fc-sur-neon);
  clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%);
}
.cap-act .ic { width: 20px; height: 20px; }

/* ---------- les titres de section, hors carte ---------- */
.sect-titre {
  font-size: 10.5px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase;
  margin: 22px 2px 10px; display: flex; align-items: center; gap: 9px; color: var(--fc-texte2);
}
.sect-titre::before { content: ''; width: 3px; height: 13px; background: var(--fc-neon); flex: none; }
.sect-titre.club::before  { background: var(--fc-or); }
.sect-titre.joueur::before { background: var(--fc-bleu); }
.view > .sect-titre:first-child, .wrap > .sect-titre:first-child { margin-top: 4px; }

/* ---------- les panneaux ---------- */
.card {
  background: var(--fc-panneau); border: 1px solid var(--fc-ligne); border-radius: 4px;
  box-shadow: none; padding: 15px; margin-bottom: 11px; color: var(--fc-texte);
}
.card.tight { padding: 0; }
.card h2, .card h3 { color: var(--fc-texte); font-weight: 800; letter-spacing: -.015em; }
.card h3 { font-size: 16px; }
.card-head { padding: 14px 15px 10px; }
.card.tight .card-head + .lv, .card.tight > .lv:first-child { border-top: 1px solid var(--fc-ligne); }

/* le rendez-vous du jour : la seule surface pleine de l'écran */
.card.hero {
  background: linear-gradient(135deg, #0E7A44 0%, #06351E 100%);
  border: none; padding: 16px; position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11,230,110,.32), 0 8px 30px rgba(11,230,110,.14);
  clip-path: var(--fc-biseau);
}
.card.hero::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--fc-neon), transparent);
}
.card.hero, .card.hero h1, .card.hero h2, .card.hero h3, .card.hero p, .card.hero b { color: #FFFFFF; }
.card.hero h2 { font-size: 25px; font-weight: 900; font-style: italic;
                letter-spacing: -.03em; text-transform: uppercase; line-height: 1; }
.card.hero .pill, .pill.blanc { background: var(--fc-neon); color: var(--fc-sur-neon); }
/* un entraînement n'est pas un match : il reste sobre */
.card.hero.entrainement {
  background: var(--fc-panneau); border: 1px solid var(--fc-ligne);
  box-shadow: none; clip-path: none;
}
.card.hero.entrainement h2 { font-size: 19px; color: var(--fc-texte); }
.card.hero.entrainement p, .card.hero.entrainement b { color: var(--fc-texte2); }
.card.hero.entrainement::before { display: none; }
.card.hero.entrainement .pill { background: rgba(255,255,255,.08); color: var(--fc-texte2); }

/* ---------- les compteurs de disponibilité ---------- */
.dispos { display: flex; gap: 6px; margin: 12px 0 13px; }
.dispos .dp { flex: 1; text-align: center; padding: 7px 3px; background: rgba(0,0,0,.26); border-radius: 3px; }
.dispos .dp b { display: block; font-size: 17px; font-weight: 900; font-style: italic; line-height: 1; }
.dispos .dp span {
  display: block; font-size: 8px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; margin-top: 3px; color: rgba(255,255,255,.58);
}
.dispos .dp.oui b { color: var(--fc-neon); }
.dispos .dp.peut b { color: var(--fc-or); }
.dispos .dp.non b { color: var(--fc-rouge); }
.dispos .dp.rien b { color: var(--fc-texte2); }
html.clair .dispos .dp { background: rgba(11,17,25,.05); }
html.clair .dispos .dp span { color: var(--fc-texte3); }

/* ---------- les lignes ---------- */
.lv, .action-item {
  border-top-color: var(--fc-ligne); color: var(--fc-texte);
}
.lv b, .action-item b { color: var(--fc-texte); }
.lv-sous, .muted2, .muted { color: var(--fc-texte3); }
.action-item { padding: 13px 15px; }
.action-item:active, .lv[onclick]:active { background: var(--fc-panneau-h); }

/* le pavé coloré de l'icône : c'est lui qui porte l'univers */
.action-item .ic-rond, .pave {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  background: rgba(11,230,110,.15); color: var(--fc-neon);
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
}
.pave.club   { background: rgba(245,197,66,.15); color: var(--fc-or); }
.pave.joueur { background: rgba(59,157,255,.15); color: var(--fc-bleu); }

/* ---------- les boutons ---------- */
.btn {
  border-radius: 0; font-weight: 900; font-style: italic; letter-spacing: .05em;
  text-transform: uppercase; font-size: 13px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background: var(--fc-neon); color: var(--fc-sur-neon); border: none;
}
.btn.ghost, .btn.sm.ghost {
  background: transparent; color: var(--fc-texte); box-shadow: inset 0 0 0 1px var(--fc-ligne-f);
}
.btn.danger { background: var(--fc-rouge); color: #FFFFFF; }
.card.hero .btn { background: #FFFFFF; color: #0A5C33; }
.card.hero .btn.ghost { background: rgba(255,255,255,.14); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.btn-retour { background: none; color: var(--fc-texte2); box-shadow: none; clip-path: none; font-style: normal; }

/* ---------- les pastilles ---------- */
.pill {
  border-radius: 0; font-weight: 900; font-style: italic; letter-spacing: .12em;
  padding: 4px 9px; font-size: 9px;
}
.pill.vert  { background: rgba(11,230,110,.18); color: var(--fc-neon); }
.pill.or, .pill.jaune { background: rgba(245,197,66,.18); color: var(--fc-or); }
.pill.gris, .pill.creme { background: rgba(255,255,255,.09); color: var(--fc-texte2); }
.pill.rouge { background: rgba(255,77,77,.18); color: var(--fc-rouge); }
html.clair .pill.gris,html.clair .pill.creme { background: rgba(11,17,25,.07); color: var(--fc-texte2); }

/* ---------- champs ---------- */
input, select, textarea {
  background: var(--fc-panneau-h); color: var(--fc-texte);
  border: 1px solid var(--fc-ligne); border-radius: 3px;
}
input:focus, select:focus, textarea:focus { border-color: var(--fc-neon); outline: none; }
label { color: var(--fc-texte2); }

/* ---------- la barre du bas, flottante ---------- */
@media (max-width: 999px) {
  .nav {
    left: 10px; right: 10px; bottom: 10px; height: 60px;
    background: rgba(20,28,43,.96); border: 1px solid var(--fc-ligne); border-radius: 6px;
    backdrop-filter: blur(14px); box-shadow: var(--fc-ombre);
    padding: 0 4px; overflow: visible;
  }
  .nav button {
    color: var(--fc-texte3); font-size: 8.5px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .nav button.on { color: var(--fc-neon); }
  /* la cocarde reste ronde : un cercle net cerclé de vert, rien d'autre */
  .nav-fab .fab-rond {
    width: 48px; height: 48px; margin-top: -23px; border-radius: 50%;
    background: #1B4DE0; border: 2.5px solid var(--fc-neon);
    box-shadow: 0 0 16px rgba(11,230,110,.30);
    clip-path: none;
  }
}
@media (max-width: 999px) {
html.clair .nav { background: rgba(255,255,255,.97); }
}

/* ---------- le menu latéral ---------- */
.menu-panneau { background: var(--fc-fond); }
.menu-profil b, .menu-item { color: var(--fc-texte); }
.menu-profil span { color: var(--fc-texte3); }
.menu-section { color: var(--fc-texte3); letter-spacing: .18em; }
.menu-item.on { color: var(--fc-neon); }
.menu-casquette { background: var(--fc-panneau); border: 1px solid var(--fc-ligne); border-radius: 3px; }
.menu-casquette b { color: var(--fc-texte); }
.menu-casquette span { color: var(--fc-texte3); }

/* ---------- les feuilles ---------- */
.sheet { background: var(--fc-fond); color: var(--fc-texte); }
.sheet h2 { color: var(--fc-texte); font-weight: 900; font-style: italic; text-transform: uppercase; }
.grip { background: var(--fc-ligne-f); }
.opt {
  background: var(--fc-panneau); border: 1px solid var(--fc-ligne); border-radius: 3px;
  color: var(--fc-texte); align-items: center;
}
/* le libellé au-dessus, l'explication en dessous : plus de bagarre sur une ligne */
.opt b { flex: 1; min-width: 0; display: block; font-weight: 700; font-size: 14.5px; }
.opt .muted2 { display: block; font-size: 12px; margin-top: 1px; }
.opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

/* ---------- l'écran vide ---------- */
.vide-etat { text-align: center; padding: 34px 18px; }
.vide-etat svg { margin-bottom: 14px; opacity: .9; }
.vide-etat b {
  display: block; font-size: 17px; font-weight: 900; font-style: italic;
  text-transform: uppercase; margin-bottom: 6px; color: var(--fc-texte);
}
.vide-etat p { font-size: 12.5px; color: var(--fc-texte3); margin-bottom: 17px; line-height: 1.5; }

/* ---------- la sous-navigation ---------- */
.sous-nav button {
  background: transparent; color: var(--fc-texte3); border: 1px solid var(--fc-ligne);
  border-radius: 3px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px;
}
.sous-nav button.on { background: var(--fc-neon); color: var(--fc-sur-neon); border-color: var(--fc-neon); }

/* ---------- le bureau ---------- */
@media (min-width: 1000px) {
  .nav { background: var(--fc-fond); box-shadow: inset -1px 0 0 var(--fc-ligne); border-top: none; }
  .nav button { color: var(--fc-texte2); }
  .nav button.on { background: rgba(11,230,110,.14); color: var(--fc-neon); }
  .nav-marque { color: var(--fc-texte); }
  .topbar { padding: 0; }
  .bandeau { padding: 14px 24px 18px; max-width: none; }
  .nav button.nav-fab { display: none; }
}

/* ---------- moins d'animation si le téléphone le demande ---------- */
@media (prefers-reduced-motion: reduce) {
  .card.hero, .btn, .cap-act { transition: none; }
}

/* ============================================================
   FINITIONS relevées au premier rendu
   ============================================================ */
@media (max-width: 999px) {
  /* le contenu ne passe plus sous la barre flottante */
  .view, .wrap { padding-bottom: 92px; }

  /* le libellé du bouton central se cale sous la cocarde, pas à côté */
  .nav button.nav-fab {
    justify-content: flex-start; gap: 3px; padding-top: 0; margin-top: 0;
    align-self: stretch; padding-bottom: 6px;
  }
  .nav-fab span { margin-top: 1px; }
}

/* un libellé de bouton ne se coupe jamais en deux lignes */
.btn, .card.hero .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.hero .row .btn { font-size: 12px; padding: 11px 8px; }

/* le rendez-vous : un seul langage de forme, le biseau */
.card.hero { border-radius: 0; }
.card.hero.entrainement { border-radius: 4px; }

/* les icônes de la liste d'actions reçoivent enfin leur pavé coloré */
.action-item > .ic, .action-item > svg.ic {
  width: 34px; height: 34px; padding: 8px; flex: none; box-sizing: border-box;
  background: rgba(11,230,110,.15); color: var(--fc-neon);
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
}
.action-item.club > .ic   { background: rgba(245,197,66,.15); color: var(--fc-or); }
.action-item.joueur > .ic { background: rgba(59,157,255,.15); color: var(--fc-bleu); }

/* le chiffre dans un bouton reste lisible sans allonger le libellé */
.btn b { font-weight: 900; margin-left: 3px; }

/* le voile bas a été retiré : il passait sous la barre et le verre
   ne floutait plus que lui, d'où un rendu opaque. Le contenu garde
   sa marge basse, ça suffit. */

/* ============================================================
   PASSE DE CONTRASTE ET DE FINITION
   Relevé sur les captures : texte trop sombre sur la nuit,
   boutons restés au style natif du navigateur (fond blanc),
   biseau à deux coins qui donnait un parallélogramme.
   ============================================================ */

/* 1. le texte respire : on remonte les deux gris de deux crans */
:root {
  --fc-texte2: #C2CEDC;
  --fc-texte3: #93A2B5;
}
html.clair { --fc-texte2: #3E4B5C; --fc-texte3: #5F6D80; }
.muted, .muted2, .lv-sous, .li-t span, p.muted { color: var(--fc-texte3); }
.card p, .card li { color: var(--fc-texte2); }

/* 2. plus aucun bouton ne sort au style du navigateur */
button { font-family: inherit; color: inherit; }
.lien, .lien-discret {
  background: none; border: none; padding: 0; font-family: inherit;
  color: var(--fc-neon); font-weight: 700; font-size: inherit;
  text-decoration: underline; text-decoration-color: rgba(11,230,110,.4);
  text-underline-offset: 3px; cursor: pointer;
}
.lien:active { color: var(--fc-texte); }
/* garde-fou : tout bouton sans classe reconnue reste dans l'univers */
.card button:not([class]), .view button:not([class]), .sheet button:not([class]) {
  background: rgba(255,255,255,.08); color: var(--fc-texte);
  border: 1px solid var(--fc-ligne); border-radius: 3px; padding: 7px 11px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* 3. un seul coin coupé, en bas à droite : plus de parallélogramme */
.btn, .card.hero .btn {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.cap-act { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%); }
.pave, .action-item > .ic, .action-item > svg.ic {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}

/* 4. les titres de carte gagnent leur poids */
.card h3, .card-head h3 { font-size: 17px; font-weight: 800; color: var(--fc-texte); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* 5. le bureau : le titre et le contenu partagent le même axe */
@media (min-width: 1000px) {
  .bandeau { max-width: 960px; margin: 0 auto; padding: 16px 20px 18px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
}

/* ---------- l'écran de connexion rejoint l'univers ---------- */
.login .logo-nom { color: var(--fc-texte); letter-spacing: .3em; font-weight: 900; }
.login > p { color: var(--fc-texte3); }
.login label { color: var(--fc-texte2); }

/* ---------- une carte cliquable le dit ---------- */
.card.cliquable { cursor: pointer; }
.card.cliquable:active { background: var(--fc-panneau-h); }
.card.cliquable .card-head { padding: 14px 15px; }
.card.cliquable p { padding: 0 15px 13px; }
.row-droite { display: flex; align-items: center; gap: 8px; flex: none; }
.row-droite .chev { font-style: normal; }
.cotis-barre { margin: 0 15px 13px; }

/* ---------- la maintenance se replie, sobre ---------- */
details.maintenance { margin-top: 26px; border-top: 1px solid var(--fc-ligne); padding-top: 10px; }
details.maintenance summary {
  cursor: pointer; list-style: none; font-size: 10.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fc-texte3);
  display: flex; align-items: center; gap: 7px;
}
details.maintenance summary::before { content: '›'; transition: transform .2s; }
details.maintenance[open] summary::before { transform: rotate(90deg); }
details.maintenance .card { margin-top: 10px; }
details.maintenance .action-item > .ic { background: rgba(255,255,255,.07); color: var(--fc-texte3); }

/* les demandes à valider portent le liseré or du club */
.card.demandes { border-left: 3px solid var(--fc-or); }

/* ============================================================
   RACCORD DES VARIABLES HISTORIQUES
   ------------------------------------------------------------
   styles.css peint encore beaucoup d'écrans avec les variables
   de la V1 claire (--txt marine, --card blanc...). Sur la nuit,
   ces textes devenaient illisibles : le calendrier en premier.
   On raccorde les NEUTRES à l'univers FC, une fois pour toutes.
   Les couleurs de sens (--vert, --or, --terre...) ne bougent pas.
   ============================================================ */
:root {
  --bg: var(--fc-nuit);
  --bg2: var(--fc-panneau);
  --card: var(--fc-panneau);
  --card2: var(--fc-panneau-h);
  --txt: var(--fc-texte);
  --txt2: var(--fc-texte2);
  --txt3: var(--fc-texte3);
  --line: var(--fc-ligne);
  --line2: var(--fc-ligne-f);
  --line-soft: var(--fc-ligne);
}

/* ============================================================
   L'AIR À GAUCHE
   Les cartes compactes posaient leurs lignes au ras du bord.
   ============================================================ */
.card.tight .lv, .card.tight > p, .card.tight .actions-liste { padding-left: 15px; padding-right: 15px; }
.card.tight .lv { padding-top: 11px; padding-bottom: 11px; }
.card.tight > p.muted2 { padding-bottom: 13px; }
.bandeau { padding-left: 18px; padding-right: 18px; }
.sect-titre { margin-left: 4px; }

/* le calendrier, relu sur la nuit */
.cal-date b { color: var(--fc-texte); }
.cal-date { color: var(--fc-texte3); }
.cal-evt { background: var(--fc-panneau); border: 1px solid var(--fc-ligne); }
.cal-corps b { color: var(--fc-texte); }

/* un <b> dans un bouton suit la couleur du BOUTON, pas celle du bandeau */
.card.hero .btn b, .btn b { color: inherit; }

/* les cartes de statistiques rejoignent la nuit */
.stat { background: var(--fc-panneau); border: 1px solid var(--fc-ligne); }
.stat b { color: var(--fc-texte); }
.stat span { color: var(--fc-texte3); }

/* la palette de l'éditeur et la durée du constructeur, relues sur la nuit */
.ed-pal .ed-o {
  background: var(--fc-panneau-h); border: 1px solid var(--fc-ligne);
  color: var(--fc-texte);
}
.ed-pal .ed-o.on { border-color: var(--fc-neon); color: var(--fc-neon); }
.sb-duree { background: var(--fc-panneau-h); }
.sb-duree b { color: var(--fc-texte); }

/* les boutons de réponse rapide (dispo / indispo / ?) sur la nuit */
.rv {
  background: var(--fc-panneau-h); border: 1px solid var(--fc-ligne-f);
  color: var(--fc-texte);
}
/* neutres tant qu'on n'a pas répondu : seul l'état choisi s'allume */
.rv.ok { color: var(--fc-neon); border-color: color-mix(in srgb, var(--fc-neon) 40%, transparent); font-weight: 800; }
.rv.no { color: var(--fc-rouge); border-color: color-mix(in srgb, var(--fc-rouge) 35%, transparent); }
.rv.ok.on { background: var(--fc-neon); color: var(--fc-sur-neon); border-color: var(--fc-neon); }
.rv.no.on { background: var(--fc-rouge); color: #2E0507; border-color: var(--fc-rouge); }
html.clair .rv.no.on { color: #FFFFFF; }
.rv.on:not(.ok):not(.no) { background: var(--fc-or); color: #3A2B00; border-color: var(--fc-or); }

/* le bandeau d'alerte (droit à l'image, relances) sur la nuit */
.alert { background: rgba(245,197,66,.14); border: 1px solid rgba(245,197,66,.35); color: var(--fc-texte); }
.alert b { color: var(--fc-or); }

/* ============================================================
   LE LANCEMENT — la cocarde se fabrique sous les yeux.
   Quatre temps : le disque, l'anneau d'or tracé comme un tour
   de terrain, le monogramme, puis le carré dans la lucarne.
   Une fois par session ; coupé si le téléphone demande le calme.
   ============================================================ */
#splash {
  position: fixed; inset: 0; z-index: 999;
  background: linear-gradient(165deg, #0D1626 0%, #05080E 100%);
  display: grid; place-items: center;
}
#splash .sp-in { text-align: center; }
#splash .sp-c { width: 106px; height: 106px; }
#splash .sp-mot {
  margin-top: 20px; font-size: 21px; font-weight: 900; font-style: italic;
  letter-spacing: .4em; padding-left: .4em; color: #F2EFE6; opacity: 0;
  animation: sp-monte .55s cubic-bezier(.2,.9,.3,1) 1.3s both;
}
#splash .sp-sous {
  margin-top: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(242,239,230,.42); opacity: 0;
  animation: sp-monte .5s ease 1.55s both;
}
#splash .an-fond   { animation: sp-nait .45s ease both; transform-origin: 60px 60px; }
#splash .an-anneau { stroke-dasharray: 302; animation: sp-trace 1.05s cubic-bezier(.6,0,.25,1) .2s both; }
#splash .an-l      { animation: sp-monte .55s cubic-bezier(.2,1.1,.35,1) .82s both; }
#splash .an-carre  { animation: sp-pose .5s cubic-bezier(.25,1.5,.4,1) 1.18s both; transform-origin: 71px 61px; }
#splash.fini { animation: sp-sortie .7s cubic-bezier(.5,0,.75,0) both; }
@keyframes sp-nait  { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: none; } }
@keyframes sp-trace { from { stroke-dashoffset: 302; } to { stroke-dashoffset: 0; } }
@keyframes sp-monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sp-pose  { from { opacity: 0; transform: scale(2.4) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes sp-sortie { to { opacity: 0; transform: scale(1.1); visibility: hidden; } }

/* pendant le lancement, l'app attend derrière le rideau */
html.lancement { overflow: hidden; }

/* les formules, dans la feuille */
.formule {
  background: var(--fc-panneau); border: 1px solid var(--fc-ligne); border-radius: 4px;
  padding: 13px 15px; margin-bottom: 9px;
}
.formule.star { border-color: var(--fc-neon); box-shadow: 0 0 0 1px rgba(11,230,110,.25); }
.formule .card-head { padding: 0 0 4px; }
.card.abo { border-left: 3px solid var(--fc-or); }

/* ============================================================
   LA MESSAGERIE — des bulles, la mienne à droite en vert.
   ============================================================ */
.msg-carte { padding: 0; display: flex; flex-direction: column; height: calc(100vh - 300px); min-height: 340px; }
.msg-fil { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 2px; }
.msg-att { text-align: center; padding: 30px 10px; }
.msg-jour {
  text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fc-texte3); margin: 12px 0 8px;
}
.msg { max-width: 82%; align-self: flex-start; margin-bottom: 7px; }
.msg.moi { align-self: flex-end; text-align: right; }
.msg-qui { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fc-texte3); margin: 0 0 2px 4px; text-align: left; }
.msg-bulle {
  display: inline-block; padding: 9px 12px; font-size: 14px; line-height: 1.4;
  background: var(--fc-panneau-h); border: 1px solid var(--fc-ligne);
  border-radius: 12px 12px 12px 3px; text-align: left; word-break: break-word;
}
.msg.moi .msg-bulle {
  background: rgba(11,230,110,.16); border-color: rgba(11,230,110,.3);
  border-radius: 12px 12px 3px 12px;
}
.msg-heure { display: block; font-size: 9.5px; color: var(--fc-texte3); margin: 2px 4px 0; }
.msg-saisie {
  display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fc-ligne); background: var(--fc-panneau);
}
.msg-saisie input { flex: 1; margin: 0; }
.msg-envoi {
  flex: none; width: 44px; height: 44px; border: none; cursor: pointer;
  background: var(--fc-neon); color: var(--fc-sur-neon);
  display: grid; place-items: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
@media (min-width: 1000px) { .msg-carte { height: calc(100vh - 260px); } }

/* ============================================================
   PASSE DESIGN SYSTÈME (guidée par ui-ux-pro-max, DA FC 26 gardée)
   ------------------------------------------------------------
   1. le verre trempé sur les surfaces flottantes
   2. les cibles tactiles à 44 pt minimum
   3. le retour au toucher, 150 ms, partout
   4. la pilule active dans la barre
   5. le focus clavier visible
   Échelle d'espacement : 4 / 8 / 12 / 16 / 24 / 32.
   Étages : nav 60 · voile 80 · menu 90 · toast 120 · splash 999.
   ============================================================ */

/* ---------- 1. LE VERRE ---------- */
@media (max-width: 999px) {
  .nav {
    left: 14px; right: 14px; height: 62px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 0 6px;
    background: rgba(18, 26, 40, .42);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
  }
  /* le reflet du verre, comme une vitre inclinée vers la lumière */
  .nav::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 42%);
  }
  /* les icônes au centre exact de la capsule */
  .nav button.nav-rapide { height: 100%; justify-content: center; gap: 3px; padding: 0 2px; margin: 0; }
  .nav button.nav-rapide > * { position: relative; }
  .nav button .ic { margin: 0; }
}
html.clair .nav { background: rgba(255, 255, 255, .55); }
.menu-panneau {
  background: rgba(13, 20, 32, .84);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.sheet {
  background: rgba(16, 23, 36, .88);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ov, .menu-ov { background: rgba(2, 4, 8, .55); }   /* le scrim isole le premier plan */
html.clair .nav { background: rgba(255, 255, 255, .72); border-color: rgba(11, 17, 25, .1); }
html.clair .menu-panneau { background: rgba(244, 246, 249, .88); border-right-color: rgba(11, 17, 25, .08); }
html.clair .sheet { background: rgba(248, 250, 252, .92); border-top-color: rgba(11, 17, 25, .08); }
html.clair .ov,html.clair .menu-ov { background: rgba(11, 17, 25, .42); }
/* pas de verre sans flou : si le navigateur ne sait pas, il opacifie */
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: var(--fc-panneau); }
  .menu-panneau, .sheet { background: var(--fc-fond); }
}

/* ---------- 2. LES CIBLES TACTILES ---------- */
.mini, .rv { position: relative; }
.mini::after, .rv::after { content: ''; position: absolute; inset: -8px; }
button { cursor: pointer; touch-action: manipulation; }

/* ---------- 3. LE RETOUR AU TOUCHER ---------- */
.btn, .action-item, .li, .opt, .cq, .nav button, .mini, .rv, .cap-act,
.menu-item, .menu-casquette, .msg-envoi, .sous-nav button {
  transition: transform .15s cubic-bezier(.2, .8, .3, 1), opacity .15s ease, background .2s ease;
}
.btn:active, .cap-act:active, .msg-envoi:active { transform: scale(.96); }
.action-item:active, .li:active, .opt:active, .cq:active,
.menu-item:active, .menu-casquette:active { transform: scale(.985); opacity: .85; }
.nav button:active .ic, .nav button:active .fab-rond { transform: scale(.9); }
.nav button .ic, .nav-fab .fab-rond { transition: transform .15s cubic-bezier(.2, .8, .3, 1); }

/* ---------- 4. LA PILULE ACTIVE ---------- */
@media (max-width: 999px) {
  .nav button.nav-rapide { position: relative; }
  .nav button.nav-rapide.on::before {
    content: ''; position: absolute; inset: 8px 3px; border-radius: 999px;
    background: rgba(11, 230, 110, .15);
    box-shadow: inset 0 0 0 1px rgba(11, 230, 110, .18);
  }
}

/* ---------- 5. LE FOCUS CLAVIER ---------- */
:focus-visible { outline: 2px solid var(--fc-neon); outline-offset: 2px; border-radius: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

/* le néon respire sur l'action principale, et nulle part ailleurs */
.card.hero .btn:first-child, .bv { box-shadow: 0 0 16px rgba(11, 230, 110, .22); }

@media (prefers-reduced-motion: reduce) {
  .btn, .action-item, .li, .opt, .cq, .nav button, .mini, .rv,
  .menu-item, .menu-casquette { transition: none; }
}

/* le point de messages non lus, sur la cocarde du menu */
.nav-fab.notif .fab-rond::after {
  content: ''; position: absolute; top: -1px; right: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--fc-neon); border: 2px solid var(--fc-fond);
}
.nav-fab .fab-rond { position: relative; }

/* ============================================================
   LE VERRE, PARTOUT OÙ L'ŒIL SE POSE
   ------------------------------------------------------------
   Le verre ne se lit que s'il y a quelque chose derrière. Des
   lueurs d'ambiance (néon, bleu du logo, or) vivent sous la page,
   et les cartes deviennent givrées : elles laissent passer la
   lumière sans sacrifier la lisibilité. Les lueurs sont fixes,
   floues par nature : aucun coût de flou par carte.
   ============================================================ */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(440px 320px at 88% -6%, rgba(11, 230, 110, .10), transparent 62%),
    radial-gradient(560px 400px at -12% 28%, rgba(27, 77, 224, .12), transparent 62%),
    radial-gradient(420px 320px at 72% 108%, rgba(245, 197, 66, .06), transparent 62%);
}
html.clair body::before {
  background:
    radial-gradient(440px 320px at 88% -6%, rgba(10, 158, 82, .08), transparent 62%),
    radial-gradient(560px 400px at -12% 28%, rgba(27, 77, 224, .07), transparent 62%),
    radial-gradient(420px 320px at 72% 108%, rgba(184, 134, 11, .06), transparent 62%);
}

/* les cartes givrées : translucides sur les lueurs */
.card {
  background: rgba(20, 28, 43, .72);
  border-color: rgba(255, 255, 255, .10);
}
html.clair .card {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(11, 17, 25, .09);
}
.card.hero { background: linear-gradient(135deg, rgba(14, 122, 68, .94) 0%, rgba(6, 53, 30, .96) 100%); }
.stat, .formule, .cq, .opt { background: rgba(20, 28, 43, .66); }
html.clair .stat, html.clair .formule, html.clair .cq, html.clair .opt { background: rgba(255, 255, 255, .72); }

/* la barre et le menu gagnent un liseré de lumière : le bord du verre */
@media (max-width: 999px) {
  .nav {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
                0 18px 42px rgba(0, 0, 0, .55),
                0 4px 12px rgba(0, 0, 0, .35);
  }
}
.sheet { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 -12px 40px rgba(0, 0, 0, .4); }

/* le sélecteur d'apparence du menu */
.theme-seg { display: flex; gap: 6px; padding: 2px 14px 6px; }
.theme-seg button {
  flex: 1; padding: 9px 6px; font-family: inherit; font-size: 11px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: var(--fc-texte2);
  border: 1px solid var(--fc-ligne); border-radius: 3px;
}
.theme-seg button.on { background: var(--fc-neon); color: var(--fc-sur-neon); border-color: var(--fc-neon); }
html.clair .theme-seg button { background: rgba(11, 17, 25, .05); }
html.clair .theme-seg button.on { background: var(--fc-neon); color: #fff; }

/* ============================================================
   LE FLOTTEMENT — repris après la capture d'Alexis
   ============================================================ */
/* le menu latéral se détache franchement de la page */
.menu-panneau {
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .08), 24px 0 60px rgba(0, 0, 0, .5);
}
/* les boutons pleins portent une ombre : ils sont posés SUR le verre */
.btn, .card.hero .btn { box-shadow: 0 6px 16px rgba(0, 0, 0, .28); }
.btn.ghost, .btn-retour, .rdv.entr .bt.s { box-shadow: none; }
.card.hero .btn:first-child { box-shadow: 0 6px 16px rgba(0, 0, 0, .28), 0 0 16px rgba(11, 230, 110, .22); }
/* l'appui s'enfonce : l'ombre se resserre en même temps que l'échelle */
.btn:active { box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
/* la cocarde du menu flotte au-dessus de la capsule */
@media (max-width: 999px) {
  .nav-fab .fab-rond { box-shadow: 0 0 18px rgba(11, 230, 110, .35), 0 10px 24px rgba(0, 0, 0, .45); }
}
/* les cartes givrées attrapent la lumière sur leur tranche haute */
.card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.card.hero { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 34px rgba(6, 53, 30, .5); }
html.clair .card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 14px rgba(11, 17, 25, .06); }

/* ============================================================
   CHASSE AUX BLANCS EN DUR — les carrés blancs d'Alexis
   styles.css garde des fonds #FFFFFF de la V1 : sur la nuit,
   ils deviennent des pavés aveuglants. On les raccorde tous.
   ============================================================ */
.chip { background: var(--fc-panneau-h); border-color: var(--fc-ligne); color: var(--fc-texte); }
.wsess, .wcell.vert .wsess, .wcell.creme .wsess {
  background: var(--fc-panneau); border-color: var(--fc-ligne); color: var(--fc-texte);
}
.srow { background: var(--fc-panneau); border-color: var(--fc-ligne); }
html.clair .chip { background: #FFFFFF; }
html.clair .wsess, html.clair .srow { background: #FFFFFF; }

/* le texte ne colle plus au bas des cartes compactes */
.card.tight > p.mb0, .card.tight .lv:last-child { padding-bottom: 13px; }
.card.tight .card-head { padding-bottom: 6px; }

/* le menu latéral : la lisibilité prime, le verre reste sur les bords */
.menu-panneau {
  background: rgba(11, 17, 27, .96);
}
html.clair .menu-panneau { background: rgba(246, 248, 251, .97); }

/* ============================================================
   L'AÉRATION — bordures fines, espace, la page respire
   ============================================================ */
.card { border-color: rgba(255, 255, 255, .055); margin-bottom: 14px; }
html.clair .card { border-color: rgba(11, 17, 25, .07); }
.view > :first-child, .wrap > :first-child { margin-top: 18px; }
.bandeau { padding-bottom: 20px; }
.sect-titre { margin-top: 26px; }
.action-item { padding: 15px; }
.menu-item { padding: 13px 16px; }
.menu-section { padding-top: 20px; }
/* la pastille de la barre respire autour de l'icône */
@media (max-width: 999px) {
  .nav button.nav-rapide.on::before { inset: 6px 1px; }
}

/* le sélecteur de section : un seul bouton, plus rien qui déborde */
.tiroir-nav {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 14px;
  padding: 10px 14px; width: auto; cursor: pointer; font-family: inherit;
  background: var(--fc-panneau-h); color: var(--fc-texte);
  border: 1px solid var(--fc-ligne); border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  font-style: italic;
}
.tiroir-nav svg { opacity: .7; }
.tiroir-nav:active { transform: scale(.97); }

/* le sommaire de section : rien que des tiroirs, du calme */
.card.sommaire { margin-top: 4px; }
.card.sommaire .action-item { padding: 17px 15px; }
.card.sommaire .action-item b { font-size: 15.5px; }

/* ---------- les sondages : des barres qui se remplissent ---------- */
.card.sondage { border-left: 3px solid var(--fc-bleu); }
.sd-opt {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; margin: 0 0 7px; padding: 11px 13px; overflow: hidden;
  background: var(--fc-panneau-h); border: 1px solid var(--fc-ligne); border-radius: 4px;
  font-family: inherit; font-size: 14px; color: var(--fc-texte); cursor: pointer; text-align: left;
}
.sd-opt i {
  position: absolute; inset: 0 auto 0 0; background: rgba(59, 157, 255, .16);
  border-right: 2px solid rgba(59, 157, 255, .4); transition: width .4s cubic-bezier(.2, .8, .3, 1);
}
.sd-opt span { position: relative; flex: 1; min-width: 0; }
.sd-opt b { position: relative; font-weight: 900; font-style: italic; }
.sd-opt.on { border-color: var(--fc-neon); }
.sd-opt.on b { color: var(--fc-neon); }
.sd-opt:disabled { cursor: default; opacity: .8; }
.card.sondage .lien { margin-top: 4px; }

/* ---------- les groupes : des tuiles, comme Spond ---------- */
.grille-groupes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.tuile-groupe {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 15px; cursor: pointer; font-family: inherit; text-align: left;
  background: rgba(20, 28, 43, .72); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px; color: var(--fc-texte);
}
html.clair .tuile-groupe { background: rgba(255, 255, 255, .78); border-color: rgba(11, 17, 25, .08); }
.tuile-groupe.on { border-color: var(--fc-neon); box-shadow: 0 0 0 1px rgba(11, 230, 110, .25); }
.tuile-groupe b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.tuile-groupe .tg-sous { font-size: 11px; color: var(--fc-texte3); }
.tg-pave {
  width: 46px; height: 46px; display: grid; place-items: center;
  font-size: 16px; font-weight: 900; font-style: italic; border-radius: 12px; color: #fff;
}
.tg-pave.g { background: linear-gradient(140deg, #0E7A44, #06351E); }
.tg-pave.o { background: linear-gradient(140deg, #B8860B, #6B4E07); color: #FFF6DC; }
.tg-pave.b { background: linear-gradient(140deg, #1B4DE0, #0E2A7A); }
.tg-pave.r { background: linear-gradient(140deg, #C2547E, #6E2543); }
.tuile-groupe .pill { align-self: flex-end; margin-top: -4px; }

/* la tête du profil, au sommaire : qui je suis, d'un coup d'œil */
.profil-tete { display: flex; align-items: center; gap: 13px; padding: 6px 4px 16px; }
.profil-tete b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.profil-tete span { display: block; font-size: 12px; color: var(--fc-texte3); }
.profil-tete .ava.moyen { width: 52px; height: 52px; font-size: 17px; }

/* ============================================================
   CHASSE AUX BLANCS, DEUXIÈME BATTUE (captures d'Alexis, v78)
   .evt et .club-logo gardaient leur blanc V1 codé en dur.
   ============================================================ */
.evt { background: var(--fc-panneau); border-color: var(--fc-ligne); color: var(--fc-texte); }
.evt b { color: var(--fc-texte); }
html.clair .evt { background: #FFFFFF; }
.club-logo { background: var(--fc-panneau-h); border-color: var(--fc-ligne); color: var(--fc-texte3); }
html.clair .club-logo { background: #FFFFFF; }

/* ============================================================
   UNE COULEUR PAR TYPOLOGIE — on se repère d'un coup d'œil
   match = gazon · entraînement = ardoise · perso = bleu ·
   annonce et paiement = or · sondage = bleu (déjà posé)
   ============================================================ */
.evt.match, .cal-evt.match {
  border-left: 3px solid var(--fc-neon);
  background: linear-gradient(90deg, rgba(11, 230, 110, .10), rgba(20, 28, 43, .72) 55%);
}
html.clair .evt.match, html.clair .cal-evt.match {
  background: linear-gradient(90deg, rgba(10, 158, 82, .10), #FFFFFF 55%);
}
.card.perso { border-left: 3px solid var(--fc-bleu); }
.card.annonce-acc { border-left: 3px solid var(--fc-or); }

/* le trio de réponse : l'actif se voit, le changement est à un tap */
.rv { min-width: 40px; }

/* les cartes match de l'accueil aussi */
.card.match { border-left: 3px solid var(--fc-neon); }

/* ---------- messages : la liste des conversations ---------- */
.cv-ligne { display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-bottom: 1px solid var(--fc-ligne); cursor: pointer; }
.cv-ligne:last-child { border-bottom: none; }
.cv-ligne.vide { opacity: .55; }
.cv-ligne:active { background: var(--fc-panneau-h); }
.cv-pave { width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 15px; font-weight: 900; font-style: italic; color: #fff; }
.cv-pave.g { background: linear-gradient(140deg, #0E7A44, #06351E); }
.cv-pave.o { background: linear-gradient(140deg, #B8860B, #6B4E07); }
.cv-txt { flex: 1; min-width: 0; }
.cv-txt b { display: block; font-size: 14.5px; font-weight: 800; }
.cv-apercu { display: block; font-size: 12px; color: var(--fc-texte3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-droite { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cv-droite time { font-size: 10px; color: var(--fc-texte3); }
.cv-nb { display: inline-grid; place-items: center; min-width: 19px; height: 19px; border-radius: 999px;
  background: var(--fc-neon); color: var(--fc-sur-neon); font-size: 10.5px; font-weight: 900; padding: 0 5px; }

/* la tête du fil */
.fil-tete { display: flex; align-items: center; gap: 11px; margin: 2px 0 12px; }
.fil-retour { width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  background: var(--fc-panneau-h); border: 1px solid var(--fc-ligne); border-radius: 10px;
  color: var(--fc-texte2); cursor: pointer; }
.fil-tete .cv-pave { width: 34px; height: 34px; font-size: 12px; border-radius: 9px; }
.fil-qui { flex: 1; min-width: 0; }
.fil-qui b { display: block; font-size: 15px; font-weight: 800; }
.fil-qui span { display: block; font-size: 11px; color: var(--fc-texte3); }

/* ---------- le constructeur allégé ---------- */
.cherche-exo { display: flex; gap: 8px; margin: 2px 0 12px; }
.cherche-exo input { flex: 1; border-radius: 999px; padding: 11px 16px; }
.flt-btn { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 15px;
  border-radius: 999px; background: var(--fc-panneau-h); border: 1px solid var(--fc-ligne-f);
  color: var(--fc-texte2); font-family: inherit; font-size: 11.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; font-style: italic; cursor: pointer; }
.flt-nb { display: inline-grid; place-items: center; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--fc-neon); color: var(--fc-sur-neon);
  font-size: 10px; font-weight: 900; font-style: normal; }
.fgrp-titre { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fc-texte3); margin: 4px 0 9px; }
.chips-feuille { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.ch-f { padding: 9px 13px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--fc-panneau-h); border: 1px solid var(--fc-ligne); color: var(--fc-texte2);
  font-family: inherit; cursor: pointer; }
.ch-f.on { background: rgba(11, 230, 110, .18); border-color: var(--fc-neon);
  color: var(--fc-neon); font-weight: 900; }

/* ---------- les segments du flux d'accueil ---------- */
.segs { display: flex; gap: 4px; overflow-x: auto; padding: 2px 0 10px;
  scrollbar-width: none; }
.sg { flex: none; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650;
  font-style: normal; text-transform: none; letter-spacing: 0;
  background: transparent; border: 1px solid transparent; color: var(--fc-texte3); }
.sg.on { background: var(--fc-panneau); border-color: var(--fc-ligne-f); color: var(--fc-texte);
  font-weight: 800; }
.sg-pt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }

/* la bannière des notifications */
.card.push-invite { border-left: 3px solid var(--fc-neon); }

/* mesures de l'audit : l'échelle s'unifie sur 16, l'avatar devient une vraie cible */
.card { padding: 16px; }
.card.tight .lv, .card.tight > p, .card.tight .actions-liste { padding-left: 16px; padding-right: 16px; }
.action-item { padding: 15px 16px; }
.cap-ava { width: 38px; height: 38px; position: relative; }
.cap-ava::after { content: ''; position: absolute; inset: -5px; }
.cap-ava .ava { width: 38px; height: 38px; font-size: 13px; }

/* ============================================================
   MODE CLAIR — corrections de l'audit contraste
   ============================================================ */
/* le rendez-vous du jour garde son maillot vert, même en clair :
   la règle des cartes givrées l'écrasait d'un blanc translucide */
html.clair .card.hero {
  background: linear-gradient(135deg, #0E7A44 0%, #06351E 100%);
  border: none;
}
html.clair .card.hero.entrainement { background: #FFFFFF; border: 1px solid var(--fc-ligne); }

html.clair .pill.or, html.clair .pill.jaune { background: rgba(184, 134, 11, .14); color: #6B4E07; }

/* ============================================================
   ESPRIT SPOND (v83) : cartes à bloc date, bannière de réponses,
   sections temporelles, gros boutons de réponse, compteurs.
   Tout en variables : le mode clair suit tout seul.
   ============================================================ */

/* bannière « N réponses en attente » */
.brep { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--fc-panneau); border: 1px solid var(--fc-ligne); border-radius: 14px;
  padding: 13px 16px; margin-bottom: 12px; color: var(--fc-texte);
  font-size: 13.5px; font-weight: 700; cursor: pointer; }
.brep .pt { width: 9px; height: 9px; border-radius: 50%; background: var(--fc-neon);
  flex: none; box-shadow: 0 0 10px var(--fc-neon); animation: brep-p 1.6s ease-in-out infinite; }
.brep i { margin-left: auto; font-style: normal; color: var(--fc-texte3); }
@keyframes brep-p { 50% { opacity: .45; } }

/* titre de tranche temporelle : Cette semaine / Semaine prochaine */
.tempo { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fc-texte3); margin: 16px 2px 8px; }
.tempo:first-child { margin-top: 0; }

/* carte événement à bloc date, façon agenda */
.evt-c { display: flex; align-items: center; gap: 14px; background: var(--fc-panneau);
  border: 1px solid var(--fc-ligne); border-radius: 16px; padding: 14px 16px;
  margin-bottom: 10px; cursor: pointer; position: relative; overflow: hidden; }
.evt-c:active { transform: scale(.985); }
.evt-c.att::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--fc-neon); border-radius: 0 2px 2px 0; }
.evt-c.passe { opacity: .55; }
.evt-d { flex: none; width: 44px; text-align: center; }
.evt-d span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fc-texte3); }
.evt-d b { display: block; font-size: 24px; line-height: 1.05; font-weight: 900;
  font-style: italic; color: var(--fc-texte); }
.evt-x { flex: 1; min-width: 0; }
.evt-x > b { display: block; font-size: 14.5px; font-weight: 800; color: var(--fc-texte);
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt-et { display: block; font-size: 12px; font-weight: 600; margin-top: 2px; color: var(--fc-texte3); }
.evt-et.vert { color: var(--fc-neon); }
.evt-et.or { color: var(--fc-or); }
.evt-et.rouge { color: var(--fc-rouge); }
.evt-x .qui { display: block; font-size: 11px; color: var(--fc-texte3); margin-top: 1px; }
.evt-dr { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.evt-c .rep-vite { margin: 0; }

/* deux grands boutons de réponse, côte à côte */
.rep2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.rep2 button { padding: 14px 10px; border-radius: 999px; font-size: 14.5px; font-weight: 800;
  font-style: italic; letter-spacing: .02em; border: 1.5px solid var(--fc-ligne);
  background: transparent; color: var(--fc-texte); cursor: pointer; min-height: 48px; }
.rep2 button:active { transform: scale(.97); }
.rep2 .oui.on { background: var(--fc-neon); border-color: var(--fc-neon); color: var(--fc-sur-neon); }
.rep2 .non.on { background: var(--fc-rouge); border-color: var(--fc-rouge); color: #2E0507; }
html.clair .rep2 .non.on { color: #FFFFFF; }
.rep2 .oui:not(.on) { color: var(--fc-neon); border-color: color-mix(in srgb, var(--fc-neon) 45%, transparent); }
.rep2 .non:not(.on) { color: var(--fc-rouge); border-color: color-mix(in srgb, var(--fc-rouge) 40%, transparent); }
.rep-maybe { display: block; width: 100%; text-align: center; margin-top: 10px; background: none;
  border: none; color: var(--fc-texte3); font-size: 12.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; }
.rep-maybe.on { color: var(--fc-or); }

/* compteurs de réponses en lignes, dépliables */
.repL { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none;
  padding: 11px 2px; cursor: pointer; text-align: left; color: var(--fc-texte);
  border-bottom: 1px solid var(--fc-ligne); font-size: 14px; font-weight: 700; }
.repL:last-of-type { border-bottom: none; }
.repL .ic { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid;
  place-items: center; font-size: 13px; font-weight: 900; font-style: normal; }
.repL .ic.v { background: color-mix(in srgb, var(--fc-neon) 16%, transparent); color: var(--fc-neon); }
.repL .ic.o { background: color-mix(in srgb, var(--fc-or) 16%, transparent); color: var(--fc-or); }
.repL .ic.r { background: color-mix(in srgb, var(--fc-rouge) 14%, transparent); color: var(--fc-rouge); }
.repL .ic.g { background: var(--fc-panneau-h); color: var(--fc-texte3); }
.repL i { margin-left: auto; font-style: normal; color: var(--fc-texte3); transition: transform .18s; }
.repL.ouvert i { transform: rotate(90deg); }
.repN { padding: 2px 2px 12px 40px; font-size: 13px; color: var(--fc-texte2); line-height: 1.7;
  border-bottom: 1px solid var(--fc-ligne); }
.repN .motif { display: block; font-size: 12px; color: var(--fc-texte3); font-style: italic; margin: -2px 0 4px; }
.repN:last-child { border-bottom: none; }

/* en-tête club, façon fiche de groupe */
.club-tete { text-align: center; padding: 22px 16px 18px; }
.club-tete h1 { font-size: 24px; margin: 10px 0 2px; }
.club-tete .muted2 { font-size: 12.5px; }
.club-tete .rangee-btn { justify-content: center; margin-top: 14px; }

/* mode clair : l'or des états s'approfondit pour rester lisible */
html.clair .evt-et.or, html.clair .rep-maybe.on { color: var(--fc-or-p); }

/* ============================================================
   v84 : filtre temporel du flux, notifications, commentaires
   ============================================================ */

/* la rangée d'outils du flux : discrète, à droite */
.flux-outils { display: flex; justify-content: flex-end; margin: 2px 0 6px; }
.tempo-filtre { background: none; border: none; color: var(--fc-texte3); font-size: 12px;
  font-weight: 700; cursor: pointer; padding: 6px 2px; display: inline-flex; align-items: center; gap: 4px; }
.tempo-filtre svg { width: 13px; height: 13px; }

/* le fil de notifications */
.notif-ligne { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--fc-ligne); padding: 13px 4px;
  cursor: pointer; color: var(--fc-texte); }
.notif-ligne:last-child { border-bottom: none; }
.notif-ligne.neuve { background: color-mix(in srgb, var(--fc-neon) 5%, transparent); border-radius: 10px; }
.notif-rond { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid;
  place-items: center; background: var(--fc-panneau-h); color: var(--fc-texte2); font-size: 15px; }
.notif-ligne.neuve .notif-rond { background: color-mix(in srgb, var(--fc-neon) 16%, transparent); color: var(--fc-neon); }
.notif-txt { flex: 1; min-width: 0; }
.notif-txt b { display: block; font-size: 13.5px; font-weight: 750; }
.notif-txt span { display: block; font-size: 12.5px; color: var(--fc-texte2); margin-top: 1px; }
.notif-txt i { display: block; font-style: normal; font-size: 11px; color: var(--fc-texte3); margin-top: 3px; }

/* les commentaires d'un événement */
.comm-ligne { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--fc-ligne); }
.comm-ligne:last-of-type { border-bottom: none; }
.comm-ava { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--fc-panneau-h); color: var(--fc-texte2); font-size: 11px; font-weight: 800; }
.comm-txt { flex: 1; min-width: 0; }
.comm-txt b { font-size: 12.5px; font-weight: 750; margin-right: 6px; }
.comm-txt i { font-style: normal; font-size: 11px; color: var(--fc-texte3); }
.comm-txt p { margin: 2px 0 0; font-size: 13.5px; color: var(--fc-texte); line-height: 1.45; }
.comm-saisie { display: flex; gap: 8px; margin-top: 12px; }
.comm-saisie textarea { flex: 1; min-height: 44px; max-height: 110px; }
.comm-saisie .btn { width: auto; padding: 0 16px; min-height: 44px; }