/* ============================================================================
   LIQUID GLASS — Planning Playsport FR
   Feuille de surcharge : à charger APRÈS le <style> existant, sans toucher
   au HTML ni au JS. Mode clair = variante « Halo clair » (1a),
   body.dark = variante « Halo sombre » (1c).

   Intégration (planning.html ET login.html), juste après </style> :
     <link rel="stylesheet" href="/static/liquid-glass-planning.css">

   Pense aussi à :
     <meta name="theme-color" content="#edf0f8">   (au lieu de #1f3864)
   et à la couleur de fond du manifest si tu veux une PWA assortie.
   ============================================================================ */

/* Police moderne : Manrope (auto-hébergeable plus tard si besoin hors-ligne) */
/* Manrope auto-hébergée (police variable, un seul fichier) — conforme CSP 'self', RGPD, offline PWA */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/manrope-var.woff2') format('woff2');
}

/* ---------- 1. Jetons : on redirige la palette existante vers iOS ---------- */
:root {
  --bleu: #0A84FF;        /* accent principal (était #1f3864) */
  --ok:   #30D158;        /* attribué / succès */
  --ko:   #FF453A;        /* annulé / danger  */
  --or:   #b25e00;        /* texte « à pourvoir » */
  --gris: #edf0f8;        /* fond de base clair */
}

/* ---------- 2. Fond : halos colorés type iOS 26 derrière le verre ---------- */
body {
  background: var(--gris);
  color: #1c1c1e;
  color-scheme: light;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
h1 { letter-spacing: -0.02em; }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 420px at 10% 4%,  rgba(157,184,255,.8),  transparent 62%),
    radial-gradient(720px 520px at 90% 14%, rgba(216,190,255,.72), transparent 62%),
    radial-gradient(640px 520px at 28% 96%, rgba(165,227,207,.7),  transparent 62%),
    radial-gradient(520px 420px at 78% 82%, rgba(255,214,160,.5),  transparent 65%);
}
body.dark { background: #0a0c12; color: #f2f3f7; color-scheme: dark; }
body.dark::before {
  background:
    radial-gradient(640px 440px at 10% 2%,  rgba(52,86,190,.55),  transparent 62%),
    radial-gradient(720px 520px at 92% 12%, rgba(112,58,190,.5),  transparent 62%),
    radial-gradient(640px 520px at 26% 98%, rgba(18,110,88,.45),  transparent 62%);
}

/* ---------- 3. Header : pilule de verre flottante ---------- */
header {
  position: relative;
  z-index: 10;   /* au-dessus des bannières/cartes, sous le drawer (21) et l'overlay (20) */
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  backdrop-filter: blur(26px) saturate(1.8);
  color: #1c1c1e;
  margin: 14px auto 0; max-width: 1252px; width: calc(100% - 28px);
  border-radius: 999px; padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 12px 40px rgba(31,38,60,.14), inset 0 1px 0 rgba(255,255,255,.85);
}
body.dark header {
  background: rgba(28,30,40,.55);
  border-color: rgba(255,255,255,.12);
  color: #f2f3f7;
  box-shadow: 0 16px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
h1 { color: inherit; letter-spacing: -0.02em; white-space: nowrap; }
#meBtn:hover, .gear:hover { background: rgba(60,60,67,.08); }
body.dark #meBtn:hover, body.dark .gear:hover { background: rgba(255,255,255,.08); }
.ava.h { border-color: rgba(255,255,255,.9); }
#hlogo { background: rgba(255,255,255,.7); border-radius: 8px; }

/* « Saison » aligné sur le titre + sélecteur harmonisé */
.hmid { font-size: 16.5px; font-weight: 700; gap: 10px; }
#saison {
  appearance: none;
  -webkit-appearance: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 6px 30px 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background-color: rgba(60,60,67,.07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233c3c43' stroke-opacity='.65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
#saison:hover { background-color: rgba(60,60,67,.11); }
body.dark #saison {
  background-color: rgba(255,255,255,.09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ebebf5' stroke-opacity='.7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.dark #saison:hover { background-color: rgba(255,255,255,.14); }

/* Icônes et libellés des interrupteurs à l'échelle des toggles */
#safeWrap { font-size: 14px; }
#safeWrap svg, #darkWrap svg { width: 19px; height: 19px; }
#filterWrap small { font-size: 13.5px; display: inline-flex; align-items: center; gap: 5px; }
#filterWrap svg { width: 18px; height: 18px; }

/* ---------- 4. Contrôles : capsules, verre, focus ---------- */
select, input, textarea {
  border: 1px solid rgba(60,60,67,.15);
  background: rgba(255,255,255,.6);
  color: #1c1c1e;
  border-radius: 11px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input::placeholder, textarea::placeholder { color: rgba(60,60,67,.48); }
body.dark input::placeholder, body.dark textarea::placeholder { color: rgba(235,235,245,.4); }
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(10,132,255,.22);
}
body.dark select, body.dark input, body.dark textarea {
  background: rgba(255,255,255,.07);
  color: #f2f3f7;
  border-color: rgba(255,255,255,.14);
  color-scheme: dark;
}
body.dark select:focus, body.dark input:focus, body.dark textarea:focus {
  border-color: #64D2FF;
  box-shadow: 0 0 0 3px rgba(100,210,255,.25);
}
button {
  background: linear-gradient(180deg, #3B9DFF, var(--bleu));
  border-radius: 999px;
  border: 0;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(10,132,255,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .15s ease, filter .15s ease, background .18s, box-shadow .18s;
}
button:hover { filter: brightness(1.06); }
button:active { transform: scale(.97); }
button:disabled { transform: none; filter: none; }
button.sec {
  background: rgba(255,255,255,.65);
  color: #1c1c1e;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
body.dark button.sec {
  background: rgba(255,255,255,.1);
  color: #f2f3f7;
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
button.ok { background: var(--ok); box-shadow: 0 4px 14px rgba(48,209,88,.35), inset 0 1px 0 rgba(255,255,255,.35); }
button.danger {
  background: rgba(255,69,58,.13);
  color: #c22d22;
  border: 1px solid rgba(255,69,58,.3);
  box-shadow: none;
}
body.dark button.danger { background: rgba(255,69,58,.18); color: #ff8177; border-color: rgba(255,69,58,.45); }

/* ---------- 5. Interrupteurs iOS ---------- */
.switch .knob { background: rgba(60,60,67,.25); }
body.dark .switch .knob { background: rgba(255,255,255,.18); }
body.dark .switch input:checked + .knob { background: var(--bleu); }
body.dark .switch.ok .knob { background: var(--ko); }
body.dark .switch.ok input:checked + .knob { background: var(--ok); }

/* ---------- 6. Cartes compteurs & blocs de verre ---------- */
.card, .bloc {
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  backdrop-filter: blur(26px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 12px 40px rgba(31,38,60,.14), inset 0 1px 0 rgba(255,255,255,.85);
}
.card { border-radius: 20px; transition: transform .18s ease, box-shadow .18s ease; }
.card .nom + small { font-size: 14px; }  /* nom de famille : même taille que le prénom, graisse conservée */
.card:hover { transform: translateY(-1px); }
.bloc { border-radius: 22px; }
.card.mine { outline: 2px solid rgba(10,132,255,.75); outline-offset: -2px; }
body.dark .bloc, body.dark .card {
  background: rgba(28,30,40,.55);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
body.dark .card.mine { outline-color: rgba(100,210,255,.6); }
h2 { color: #1c1c1e; }
body.dark h2 { color: #f2f3f7; }
.ava { background: rgba(255,255,255,.7); }

/* ---------- 7. Barre de vues : contrôle segmenté iOS ---------- */
.views {
  border: none;
  background: rgba(60,60,67,.08);
  padding: 3px;
  border-radius: 12px;
  overflow: visible;
  gap: 0;
}
.views button {
  background: transparent;
  color: rgba(60,60,67,.7);
  border-right: none;
  border-radius: 9px;
  box-shadow: none;
}
.views button.on {
  background: rgba(255,255,255,.92);
  color: #1c1c1e;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
body.dark .views { border: none; background: rgba(255,255,255,.08); }
body.dark .views button { background: transparent; color: rgba(235,235,245,.6); border: none; }
body.dark .views button.on { background: rgba(82,86,104,.9); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.legend { color: rgba(60,60,67,.62); flex: 1 1 340px; margin-left: 0; justify-content: flex-start; }
.legend > span { white-space: nowrap; }
#filterWrap.on { margin-left: auto; }
#filterWrap:not(.on) + #panelBtn { margin-left: auto; }
body.dark .legend { color: rgba(235,235,245,.55); }

/* ---------- 8. Calendrier : cellules détachées et arrondies ---------- */
table.cal { border-collapse: separate; border-spacing: 5px; margin: -5px; width: calc(100% + 10px); }
.cal th { color: rgba(60,60,67,.55); }
body.dark .cal th { color: rgba(235,235,245,.45); }
.cal td {
  border: none;
  background: rgba(255,255,255,.4);
  border-radius: 12px;
  padding: 5px 7px;
}
.cal td.out { background: rgba(255,255,255,.15); }
.cal td.today { outline: none; box-shadow: inset 0 0 0 2px var(--bleu); background: rgba(255,255,255,.55); }
body.dark .cal td { background: rgba(255,255,255,.05); border: none; }
body.dark .cal td.out { background: rgba(255,255,255,.02); }
body.dark .cal td.today { box-shadow: inset 0 0 0 2px #64D2FF; background: rgba(255,255,255,.09); }
.dnum { color: rgba(60,60,67,.62); }
body.dark .dnum { color: rgba(235,235,245,.5); }
.dnum .add { background: rgba(10,132,255,.14); color: var(--bleu); border-radius: 6px; box-shadow: none; }
body.dark .dnum .add { background: rgba(100,210,255,.18); color: #64D2FF; }

/* Chips de shift */
.chip {
  border-radius: 9px;
  padding: 4px 7px;
  border-left-width: 3px;
  background: rgba(60,60,67,.08);
  transition: filter .15s ease;
}
.chip.att { background: rgba(48,209,88,.16); border-color: var(--ok); }
.chip.apu { background: rgba(255,159,10,.18); border-color: #FF9F0A; }
.chip.non { background: rgba(60,60,67,.08); border-color: rgba(60,60,67,.35); color: rgba(60,60,67,.72); }
.chip.ann { background: rgba(255,69,58,.12); border-color: var(--ko); color: #c22d22; }
body.dark .chip { background: rgba(255,255,255,.07); }
body.dark .chip.att { background: rgba(48,209,88,.17); }
body.dark .chip.apu { background: rgba(255,159,10,.18); }
body.dark .chip.non { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.3); color: rgba(235,235,245,.55); }
body.dark .chip.ann { background: rgba(255,69,58,.16); color: #ff8177; }

/* Mini-badges de dispo */
/* Mini-badges de dispo : toujours sur une seule ligne (réduits pour tenir) */
.mini { flex-wrap: nowrap; }
.mini span {
  border-radius: 6px;
  background: rgba(60,60,67,.09);
  color: rgba(60,60,67,.55);
  font-size: 9.5px;
  padding: 0.5px 3.5px;
  letter-spacing: -0.1px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 640px) { .mini { flex-wrap: wrap; } }
.mini .d-ok { background: rgba(48,209,88,.22); color: #1d7a3d; }
.mini .d-ko { background: rgba(255,69,58,.16); color: #b3261e; }
.mini .me-tag { outline-color: var(--bleu); }
body.dark .mini span { background: rgba(255,255,255,.08); color: rgba(235,235,245,.45); }
body.dark .mini .d-ok { background: rgba(48,209,88,.25); color: #8fe0a8; }
body.dark .mini .d-ko { background: rgba(255,69,58,.22); color: #ffa39a; }
body.dark .mini .me-tag { outline-color: #64D2FF; }

/* ---------- 9. Mini-mois (trimestre / année) ---------- */
.mmonth { border: none; background: rgba(255,255,255,.35); border-radius: 14px; }
body.dark .mmonth { background: rgba(255,255,255,.04); border: none; }
.mmonth h3 { color: #1c1c1e; }
body.dark .mmonth h3 { color: #f2f3f7; }
.mini-cal td { border-radius: 6px; }
.mini-cal td:hover { background: rgba(10,132,255,.1); }
body.dark .mini-cal td:hover { background: rgba(100,210,255,.12); }
.mini-cal td.today { outline-color: var(--bleu); }
body.dark .mini-cal td.today { outline-color: #64D2FF; }

/* ---------- 10. Vue liste ---------- */
.lmois { color: #1c1c1e; }
body.dark .lmois { color: #f2f3f7; }
.lrow {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.7);
  border-left: 5px solid #ccc;
  border-radius: 12px;
  transition: transform .15s ease, filter .15s ease;
}
.lrow:hover { filter: none; transform: translateX(2px); }
.lrow.att { border-left-color: var(--ok); }
.lrow.apu { border-left-color: #FF9F0A; }
.lrow.ann { color: #c22d22; }
.lrow.me-ok { background: rgba(48,209,88,.14); }
.lrow.me-ko { background: rgba(255,69,58,.1); }
.lrow.me-mine { outline-color: var(--ok); background: rgba(48,209,88,.16); }
body.dark .lrow { background: rgba(28,30,40,.55); border-color: rgba(255,255,255,.1); }
body.dark .lrow.att { border-left-color: var(--ok); }
body.dark .lrow.me-ok { background: rgba(48,209,88,.14); }
body.dark .lrow.me-ko { background: rgba(255,69,58,.14); }
body.dark .lrow.me-mine { background: rgba(48,209,88,.16); }
body.dark .lrow.ann { color: #ff8177; }
body.dark .lrow.non { color: rgba(235,235,245,.55); }

/* ---------- 11. Réponses rapides + popover ---------- */
.qb {
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1.5px solid rgba(60,60,67,.18);
  color: rgba(60,60,67,.8);
  white-space: nowrap;
  transition: transform .15s ease, background .18s, border-color .18s;
}
.qb:hover { border-color: rgba(60,60,67,.35); }
.qb:active { transform: scale(.95); }
.qb.qon-ok { background: var(--ok); border-color: var(--ok); box-shadow: 0 3px 10px rgba(48,209,88,.35); }
.qb.qon-ko { background: var(--ko); border-color: var(--ko); box-shadow: 0 3px 10px rgba(255,69,58,.3); }
.qb.qedge { color: #c22d22; border-color: rgba(255,69,58,.35); }
body.dark .qb { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(235,235,245,.75); }
body.dark .qb.qedge { color: #ff8177; border-color: rgba(255,69,58,.45); }
#qpop {
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,.25);
}
body.dark #qpop { background: rgba(38,40,50,.8); border-color: rgba(255,255,255,.12); }

/* ---------- 12. Drawer & overlay ---------- */
#overlay {
  background: rgba(10,14,24,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#drawer {
  background: rgba(248,250,255,.82);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  border-left: 1px solid rgba(255,255,255,.7);
  border-radius: 24px 0 0 24px;
  box-shadow: -18px 0 60px rgba(20,26,40,.25);
  transition: transform .24s cubic-bezier(.22,1,.36,1);
}
body.dark #drawer { background: rgba(24,26,34,.82); border-left-color: rgba(255,255,255,.1); }
#drawer h3 { color: #1c1c1e; }
body.dark #drawer h3 { color: #f2f3f7; }
.close {
  background: none;
  border: 0;
  box-shadow: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  color: rgba(60,60,67,.6);
}
.close:hover { background: rgba(60,60,67,.08); filter: none; }
.close:active { transform: scale(.92); }
body.dark .close { color: rgba(235,235,245,.6); }
body.dark .close:hover { background: rgba(255,255,255,.08); }
.mydispo { background: rgba(10,132,255,.08); border-radius: 14px; }
body.dark .mydispo { background: rgba(100,210,255,.09); }
.mydispo button { border-radius: 999px; background: rgba(255,255,255,.7); border: 1.5px solid rgba(60,60,67,.18); box-shadow: none; color: #1c1c1e; }
body.dark .mydispo button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #f2f3f7; }
.mydispo button.on-ok { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 4px 14px rgba(48,209,88,.35); }
.mydispo button.on-ko { background: var(--ko); border-color: var(--ko); color: #fff; box-shadow: 0 4px 14px rgba(255,69,58,.3); }
.frow { background: rgba(60,60,67,.05); border-radius: 12px; }
body.dark .frow { background: rgba(255,255,255,.05); }
.frow.best { outline-color: var(--ok); }
.extbox { background: rgba(60,60,67,.05); border-radius: 12px; }
body.dark .extbox { background: rgba(255,255,255,.05); }
.st.ok { background: rgba(48,209,88,.18); color: #1d7a3d; }
.st.ko { background: rgba(255,69,58,.14); color: #c22d22; }
.st.nr { background: rgba(60,60,67,.1); color: rgba(60,60,67,.6); }
body.dark .st.ok { background: rgba(48,209,88,.22); color: #8fe0a8; }
body.dark .st.ko { background: rgba(255,69,58,.2); color: #ffa39a; }
body.dark .st.nr { background: rgba(255,255,255,.08); color: rgba(235,235,245,.5); }
.attbox { background: rgba(48,209,88,.14); border-radius: 14px; }
.attbox.waiting { background: rgba(255,159,10,.16); }
body.dark .attbox { background: rgba(48,209,88,.15); }
body.dark .attbox.waiting { background: rgba(255,159,10,.15); }
.modlabel { color: #1c1c1e; }
body.dark .modlabel { color: #f2f3f7; }

/* ---------- 13. Bannières & notifications ---------- */
.banner {
  background: rgba(255,159,10,.16);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,159,10,.32);
  border-radius: 14px;
}
.banner a { color: var(--bleu); }
body.dark .banner { background: rgba(255,159,10,.14); border-color: rgba(255,159,10,.3); color: #ffd9a1; }
body.dark .banner a { color: #64D2FF; }

/* ---------- 14. Tags, code, tableaux ---------- */
.tag { border-radius: 999px; white-space: nowrap; }
.t-att { background: rgba(48,209,88,.18); color: #1d7a3d; }
.t-apu { background: rgba(255,159,10,.2); color: var(--or); }
.t-non { background: rgba(60,60,67,.1); color: rgba(60,60,67,.65); }
.t-ann { background: rgba(255,69,58,.14); color: #c22d22; }
body.dark .tag.t-att { background: rgba(48,209,88,.22); color: #8fe0a8; }
body.dark .tag.t-apu { background: rgba(255,159,10,.2); color: #ffc36e; }
body.dark .tag.t-non { background: rgba(255,255,255,.08); color: rgba(235,235,245,.55); }
body.dark .tag.t-ann { background: rgba(255,69,58,.2); color: #ffa39a; }
code.pw { background: rgba(255,214,102,.35); border-radius: 8px; }
body.dark code.pw { background: rgba(255,214,102,.2); color: #ffe08a; }
#logtbl td, .cpt td { border-bottom-color: rgba(60,60,67,.1); }
body.dark #logtbl td, body.dark .cpt td { border-bottom-color: rgba(255,255,255,.08); }
.imgprev { background: rgba(60,60,67,.07); }
body.dark .imgprev { background: rgba(255,255,255,.07); }

/* ---------- 15. Menu ⚙️ ---------- */
.gmenu {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,.22);
}
.gmenu a:hover { background: rgba(10,132,255,.1); }
body.dark .gmenu { background: rgba(38,40,50,.85); border-color: rgba(255,255,255,.12); }
body.dark .gmenu a:hover { background: rgba(100,210,255,.12); }

/* ---------- 16. Toast ---------- */
#msg {
  background: rgba(28,30,36,.78);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 999px;
  padding: 9px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
body.dark #msg { background: rgba(58,62,76,.85); }

/* ---------- 17. Login (login.html avec le même <link>) ---------- */
.box {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  backdrop-filter: blur(26px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 26px;
  box-shadow: 0 20px 60px rgba(31,38,60,.2), inset 0 1px 0 rgba(255,255,255,.85);
}
.box h1 { color: #1c1c1e; }
a.forgot { color: var(--bleu); }

/* ---------- 18. Mobile : verre allégé (performance PWA) ---------- */
@media (max-width: 640px) {
  header { border-radius: 22px; margin-top: 10px; width: calc(100% - 16px); }
  header, .bloc, .card, #drawer, .gmenu, #qpop, .lrow {
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
  }
  table.cal { border-spacing: 3px; margin: -3px; width: calc(100% + 6px); }
  .cal td { border-radius: 9px; }
  #drawer { border-radius: 0; }
}

/* ---------- 19. Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  button, .qb, .card, .lrow, .chip, #drawer { transition: none; }
}

/* --- correctif v17.1 : états Dispo/Indispo francs, modes clair ET sombre
       (verrouillage en fin de feuille : vert plein si Dispo déclaré, rouge si Indispo,
        neutre sans réponse — la règle générique dark écrasait .on-ok/.on-ko) --- */
.mydispo button.on-ok, body.dark .mydispo button.on-ok {
  background: var(--ok); border-color: var(--ok); color: #fff; }
.mydispo button.on-ko, body.dark .mydispo button.on-ko {
  background: var(--ko); border-color: var(--ko); color: #fff; }