/* ============================================================
   KOH KAMPAGNA — App mobile (prototype)
   app.css · thème clair/sombre + phone frame + composants
   S'appuie sur les tokens de ds.css. À charger APRÈS ds.css.
   ============================================================ */

/* modifs17 — neutralise le « font boosting » des navigateurs mobiles (text-size-adjust:auto par défaut),
   qui ré-agrandit tout seul le texte des blocs étroits : les tailles calculées (ex. le facteur --k du
   planning) restent alors celles qu'on a écrites. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* ---------- Tokens sémantiques (thème) ---------- */
.kk-app{
  --accent:var(--gold-400); --accent-2:var(--gold-300); --accent-ink:#2a1a0a;
  --fire:var(--fire-500);
  --bg:#0e0a06; --bg-2:#160f08;
  --surface:#1a130b; --surface-2:#241810; --surface-3:#2e2012;
  --text:#efe2c4; --text-2:#d8c39a; --text-muted:#a4906c;
  --border:#382818; --border-soft:#271c10;
  --shadow:0 10px 30px rgba(0,0,0,.5);
  --cat-yellow:oklch(0.80 0.15 95);
}
.kk-app[data-theme="light"]{
  /* Accent gold assez FONCÉ pour rester lisible en TEXTE sur fond clair (liens, libellés),
     tout en gardant l'encre foncée lisible quand il sert de FOND de bouton. */
  --accent:#835c17; --accent-2:#6a4a12; --accent-ink:#fbf4e2;
  --fire:#ad4718;
  /* Fonds : page (bg) plus soutenue que les cartes (surface) qui « ressortent » plus claires. */
  --bg:#ded0a6; --bg-2:#e7dab8;
  --surface:#f7f0de; --surface-2:#fbf5e6; --surface-3:#ffffff;
  /* Texte : quasi-noir brun pour le corps, brun soutenu pour le secondaire, brun moyen LISIBLE pour le muted. */
  --text:#221807; --text-2:#43341a; --text-muted:#655026;
  /* Bordures/traits FONCÉS : sur fond crème une bordure claire disparaît → la structure (cartes,
     séparateurs, grilles) devient illisible. On les passe en brun net (demande Paul). */
  --border:#9a8149; --border-soft:#bda874;
  --shadow:0 10px 26px rgba(80,55,20,.22);
  /* États sémantiques : nuances plus FONCÉES en clair (le vert/rouge/orange/bleu « vifs » du thème
     sombre perdent en lisibilité sur crème, surtout en petit texte, libellés « Arbitre », montants). */
  --success:#2f8a4f; --error:#bb2f22; --warning:#9c6410; --info:#2f6cbe;
  /* Jaune catering/repas : le même jaune vif que le sombre passe mal sur fond crème (demande Paul) — assombri,
     réutilise la nuance déjà choisie pour les libellés de section « Catering » ci-dessous. */
  --cat-yellow:#8a6410;
}
/* Traits/séparateurs dérivés du texte-muted (grouplabel ::after, .gl-rule, hairlines) : en clair, le
   color-mix avec --border-soft les rendait fantomatiques → on renforce la part sombre en clair. */
.kk-app[data-theme="light"] .grouplabel::after,
.kk-app[data-theme="light"] .grouplabel .gl-rule{
  background:linear-gradient(90deg,color-mix(in srgb,var(--text-muted) 62%,var(--border)),transparent);
}
/* Libellés de SECTION colorés par pôle : en sombre ils sont volontairement CLAIRS (ils ressortent sur
   fond noir). Sur crème, jaune/gris/vert-clair deviennent illisibles → on conserve la TEINTE du pôle
   (identité activités/catering/camp/admin) mais dans une nuance FONCÉE et nette. */
.kk-app[data-theme="light"] .grouplabel.act{color:#2b6b41;}
.kk-app[data-theme="light"] .grouplabel.cat{color:#8a6410;}
.kk-app[data-theme="light"] .grouplabel.camp{color:#295aa6;}
.kk-app[data-theme="light"] .grouplabel.admin{color:#59637a;}
/* #Paul (23/07) — TITRES DE PAGE (.appbar .ttl) plus FONCÉS en thème clair. Les teintes de pôle
   (act/cat/camp) posées plus bas sont calibrées pour le fond SOMBRE → délavées sur crème. On les
   repasse dans les mêmes nuances foncées que les grouplabels. Spécificité 0,5,0 (deux attributs sur
   .kk-app) → bat les règles de pôle 0,3,0 quel que soit l'ordre. Vaut AUSSI pour la carte au trésor
   (thème clair forcé, pôle 'act') — cf. surcharge encre du skin JdP pour ces écrans. */
.kk-app[data-theme="light"][data-pole="act"] .appbar .ttl{color:#2b6b41;}
.kk-app[data-theme="light"][data-pole="cat"] .appbar .ttl{color:#8a6410;}
.kk-app[data-theme="light"][data-pole="camp"] .appbar .ttl{color:#295aa6;}
.kk-app[data-theme="light"][data-pole="admin"] .appbar .ttl{color:#59637a;}
.kk-app[data-theme="light"] .kk-groupnav-ttl{opacity:1;}
.kk-app[data-theme="light"] .kk-groupnav.gn-act{--gn-accent:#2b6b41;}
.kk-app[data-theme="light"] .kk-groupnav.gn-cat{--gn-accent:#8a6410;}
.kk-app[data-theme="light"] .kk-groupnav.gn-camp{--gn-accent:#295aa6;}
.kk-app[data-theme="light"] .kk-groupnav.gn-admin{--gn-accent:#59637a;}

/* ---------- Stage / backdrop ---------- */
.stage{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:24px 16px;position:relative;
  background:
    radial-gradient(700px 460px at 12% 100%, rgba(224,119,42,.16), transparent 60%),
    radial-gradient(700px 460px at 88% 0%, rgba(224,119,42,.10), transparent 58%),
    radial-gradient(1100px 700px at 50% -14%, #241910, transparent 60%),
    linear-gradient(#160f08,#0b0805);
}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- iPhone 12 frame ---------- */
.phone{
  position:relative;
  width:392px;
  height:min(844px,92vh);
  flex:none;
  background:#0a0a0a;
  border-radius:52px;
  padding:12px;
  /* Cadre aluminium plat — effet multicouche */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1.5px rgba(180,180,190,.22),
    0 0 0 4.5px #2c2c2e,
    0 0 0 6px rgba(255,255,255,.08),
    0 0 0 8px #1a1a1c,
    0 32px 80px rgba(0,0,0,.82),
    0 6px 22px rgba(0,0,0,.45);
  z-index:1;
}

/* Reflet supérieur droit (artefact aluminium) */
.phone::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:52px;
  background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 40%);
  pointer-events:none;
  z-index:0;
}

/* ----- Boutons latéraux physiques ----- */
/* Commun */
.phone-btn{
  position:absolute;
  background:linear-gradient(90deg,#202022,#3a3a3c,#202022);
  border-radius:3px;
  z-index:10;
}
/* Silence toggle (côté gauche, haut) */
.phone-btn.mute{
  left:-5px;
  top:108px;
  width:5px;
  height:30px;
  box-shadow:-2px 0 4px rgba(0,0,0,.6),inset 1px 0 0 rgba(255,255,255,.1);
}
/* Volume + */
.phone-btn.vol-up{
  left:-5px;
  top:160px;
  width:5px;
  height:56px;
  box-shadow:-2px 0 4px rgba(0,0,0,.6),inset 1px 0 0 rgba(255,255,255,.1);
}
/* Volume − */
.phone-btn.vol-dn{
  left:-5px;
  top:230px;
  width:5px;
  height:56px;
  box-shadow:-2px 0 4px rgba(0,0,0,.6),inset 1px 0 0 rgba(255,255,255,.1);
}
/* Power / veille (côté droit) */
.phone-btn.power{
  right:-5px;
  top:182px;
  width:5px;
  height:76px;
  background:linear-gradient(270deg,#202022,#3a3a3c,#202022);
  box-shadow:2px 0 4px rgba(0,0,0,.6),inset -1px 0 0 rgba(255,255,255,.1);
}

/* ----- Notch iPhone 12 ----- */
.phone .notch{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:150px;
  height:28px;
  background:#0a0a0a;
  border-radius:0 0 20px 20px;
  z-index:8;
  /* légère ombre interne pour profondeur */
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9);
}
/* Caméra frontale dans le notch */
.phone .notch::before{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  background:radial-gradient(circle at 35% 35%,#1a3a2a,#0a1510);
  border-radius:50%;
  top:7px;
  right:34px;
  box-shadow:0 0 0 1.5px #111,inset 0 0 3px rgba(0,200,100,.12);
}
/* Face ID (barre du capteur) */
.phone .notch::after{
  content:"";
  position:absolute;
  width:42px;
  height:5px;
  background:#0f0f0f;
  border-radius:3px;
  top:9px;
  left:26px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9);
}

/* ----- Indicateur Home (barre bas écran) ----- */
.home-bar{
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:5px;
  background:rgba(255,255,255,.28);
  border-radius:3px;
  z-index:8;
  pointer-events:none;
}
.kk-app{
  position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;
  background:var(--bg);color:var(--text);display:flex;flex-direction:column;
  font-family:var(--ff-body);transition:background .25s,color .25s;
}

/* status bar */
/* Barre vide servant uniquement à dégager l'encoche (safe-area) sur mobile : 0 dans un navigateur classique. */
.statusbar{height:env(safe-area-inset-top,0px);flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 30px;
  font-family:var(--ff-display);font-size:13px;font-weight:600;color:var(--text);}
.statusbar .ic{display:flex;gap:6px;align-items:center;}
.statusbar svg{width:15px;height:15px;}

/* ---------- App top bar ---------- */
.appbar{flex:none;display:flex;align-items:center;gap:12px;padding:8px 16px 10px;border-bottom:2px solid var(--border-soft);}
.appbar .logo{height:26px;flex:1;min-width:0;object-fit:contain;object-position:center;}
.gear-btn{background:transparent;border:1px solid var(--border);border-radius:10px;cursor:pointer;padding:5px;display:flex;align-items:center;flex:none;}
.ed-logo{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--surface-3);border:1px solid var(--border);overflow:hidden;}
.ed-logo-img{width:34px;height:34px;object-fit:contain;display:block;}
.ed-logo-img.ed-logo-std{filter:invert(1) brightness(1.15);opacity:.92;}
.gear-btn svg{width:23px;height:23px;color:var(--text-muted);transition:.18s;}
.gear-btn:hover svg{color:var(--accent);transform:rotate(40deg);}
.appbar .ed{font-family:var(--ff-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);}
.appbar .ttl{flex:1;font-family:var(--ff-display);font-weight:700;font-size:17px;color:var(--text);line-height:1;min-width:0;text-align:center;}
.appbar .ttl>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;top:1.5px;}
.appbar .sp{flex:1;}
/* modifs9 #13/#22/#29/#33/#41/#65 — champs date/heure : rétrécissables dans une rangée flex → fini le
   débordement à droite (les inputs date/time natifs ont une largeur intrinsèque qui les empêchait de réduire). */
.kk-app input[type="time"],.kk-app input[type="date"]{min-width:0;max-width:100%;}
.kk-app .fld{min-width:0;}
.iconbtn{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:transparent;border:1px solid var(--border);color:var(--accent);cursor:pointer;transition:.15s;}
.iconbtn:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);}
.iconbtn svg{width:20px;height:20px;}
.ed-pill{display:inline-flex;align-items:center;gap:3px;border:1.5px solid color-mix(in srgb,var(--edc,var(--accent)) 50%,var(--border));border-radius:var(--r-pill);padding:4px 7px;font-family:var(--ff-display);font-size:10px;color:var(--edc,var(--accent));cursor:pointer;background:color-mix(in srgb,var(--edc,var(--accent)) 12%,var(--surface));font-weight:700;letter-spacing:.02em;transition:background .2s,border-color .2s,color .2s;white-space:nowrap;}
.ed-pill svg{width:11px;height:11px;color:var(--edc,var(--accent));opacity:.8;}
/* Bouton de déconnexion persistant dans l'en-tête (glissé à droite du filtre d'édition) — compact, teinte rouge. */
.ed-logout{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;margin-left:6px;background:color-mix(in srgb,oklch(0.55 0.22 25) 12%,transparent);border:1.5px solid color-mix(in srgb,oklch(0.55 0.22 25) 42%,var(--border));color:oklch(0.63 0.2 25);cursor:pointer;transition:.15s;}
.ed-logout svg{width:16px;height:16px;transform:scaleX(-1);}
.ed-logout:hover{background:color-mix(in srgb,oklch(0.55 0.22 25) 22%,transparent);}
/* modifs4 : curseurs « % de victoire par tribu » — piste + pouce TOUJOURS à la couleur de la tribu (jamais grisé, y compris jaune) */
input[type=range].pw-slider{-webkit-appearance:none;appearance:none;height:8px;border-radius:6px;background:color-mix(in srgb,var(--tc,var(--accent)) 32%,var(--surface-2));outline:none;}
input[type=range].pw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;background:var(--tc,var(--accent));border:2px solid var(--surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--tc,var(--accent)) 60%,transparent);cursor:pointer;}
input[type=range].pw-slider::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--tc,var(--accent));border:2px solid var(--surface);cursor:pointer;}
input[type=range].pw-slider::-moz-range-track{height:8px;border-radius:6px;background:color-mix(in srgb,var(--tc,var(--accent)) 32%,var(--surface-2));}
/* modifs4 : cartes repliables (résumé inscriptions) — masque le marqueur natif, chevron qui pivote */
details.rz > summary{list-style:none;}
details.rz > summary::-webkit-details-marker{display:none;}
details.rz > summary .rz-chv svg{width:15px;height:15px;transition:transform .18s;}
details.rz[open] > summary .rz-chv svg{transform:rotate(180deg);}
/* Guide d'installation iPhone (PWA) — modifs17 : 3 étapes COMPACTES (numéro · icône iOS · libellé), sans grande maquette */
.ios-guide{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:9999;padding:18px;}
.ios-guide-card{position:relative;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:16px;padding:34px 16px 16px;max-width:320px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 14px 44px rgba(0,0,0,.55);}
.ios-guide-x{position:absolute;top:6px;right:10px;border:none;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--text-muted);}
.ios-steps{display:flex;flex-direction:column;gap:9px;}
.ios-step{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:10px 12px;}
.ios-step-n{flex:none;width:23px;height:23px;border-radius:50%;background:var(--accent);color:var(--accent-ink,#1a1206);font-family:var(--ff-display);font-weight:800;font-size:12.5px;display:grid;place-items:center;}
/* modifs18 — tous les libellés du guide CENTRÉS. */
.ios-step-tx{flex:1;min-width:0;font-size:13.5px;line-height:1.3;color:var(--text-2);text-align:center;}
.ios-step-tx b{color:var(--text);font-weight:700;}
.ios-ico{flex:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:#ffffff;display:grid;place-items:center;}
/* .kk-app svg force 18px : surspécifier pour la vignette d'icône iOS. */
.ios-guide .ios-ico svg{display:block;width:24px;height:24px;}
.ios-pill{font-family:Arial,Helvetica,sans-serif;font-size:10.5px;font-weight:700;color:#0a84ff;background:rgba(10,132,255,.13);border-radius:6px;padding:3px 6px;line-height:1;white-space:nowrap;}
/* modifs18 — étape 3 : le mot « Ajouter » réduit pour tenir DANS la vignette blanche 38px (même largeur que les icônes 1&2). */
.ios-add-txt{font-family:Arial,Helvetica,sans-serif;font-size:8px;font-weight:800;color:#0a84ff;line-height:1.05;letter-spacing:-.2px;text-align:center;}
/* ============================================================
   OVERLAY INFO (modifs96) — message d'information de l'admin, par-dessus n'importe quel écran.
   Remplace l'ancien encadré épinglé `.pinned` du dashboard. `position:fixed` mais rattaché DANS
   `.kk-app` (comme le guide d'installation iOS) : les tokens de thème --surface/--border/--accent
   y sont portés, donc un montage sur .kk-frame/<body> donnerait une carte sans fond ni contour.
   .kk-app ne crée pas de bloc conteneur (ni transform ni filter) → le fixed couvre bien l'écran.
   Corollaire : KK.go réécrit .kk-app.innerHTML → le nœud est ré-attaché (cf. overlay-info.js).
   ============================================================ */
.ovinfo{position:fixed;inset:0;background:rgba(0,0,0,.66);display:flex;align-items:center;justify-content:center;z-index:9998;padding:18px;
  padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));}
/* 🔴 modifs236 (#Paul 30/07) — « quand le message Overlay est activé, masquer tous les éléments du fond
   de l'application SAUF la navbar et le header ». Le voile à 66 % laissait lire tout l'écran derrière
   (listes, couleurs, photos) : le message se posait sur un fond bavard. Le contenu est donc effacé, et
   il ne reste que le cadre de l'app — bannière en haut, onglets en bas.
   ⚠️ `visibility` et NON `display:none` : sortir le contenu du flux ferait remonter la navbar juste sous
   le header, or c'est précisément elle qu'on veut garder À SA PLACE. La place reste réservée, le contenu
   s'efface. (`visibility` s'hérite : tout ce qu'un écran contient disparaît avec lui, y compris ses
   éléments en `position:fixed`, ce qu'un simple fond opaque n'aurait pas couvert.)
   La classe est posée sur `.kk-app` par `_ovInfoMount` et retirée par `_ovInfoDestroy` — pas de `:has()`,
   absent des Safari les plus anciens qu'on croise au camp.
   Les COUCHES D'APPLICATION sont exclues nommément (feuille, toast, visionneuse PDF/photo, guide iOS) :
   ce ne sont pas « le fond de l'app », et l'une d'elles peut être montée au même instant. */
.kk-app.ovinfo-on > :not(.statusbar):not(.appbar):not(.tabbar):not(.ovinfo):not(.sheet-bg):not(.toast):not(.kk-pdfview):not(.ios-guide):not(#kk-photo-viewer){visibility:hidden;}
.ovinfo-card{position:relative;display:flex;flex-direction:column;background:var(--surface);color:var(--text);
  border:2px solid color-mix(in srgb,var(--accent) 60%,var(--border));border-radius:16px;max-width:340px;width:100%;max-height:100%;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent),0 14px 44px rgba(0,0,0,.6);}
.ovinfo-head{display:flex;align-items:center;gap:9px;padding:13px 44px 11px 14px;border-bottom:1px solid var(--border);flex:none;}
.ovinfo-head .ovinfo-ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent);}
.ovinfo-head .ovinfo-ic svg{width:17px;height:17px;}
.ovinfo-title{font-family:var(--ff-title);font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--accent);line-height:1.2;}
.ovinfo-x{position:absolute;top:8px;right:9px;width:30px;height:30px;border-radius:8px;border:none;background:none;
  font-size:24px;line-height:1;cursor:pointer;color:var(--text-muted);display:grid;place-items:center;padding:0;}
.ovinfo-x:hover{color:var(--text);background:var(--surface-2);}
.ovinfo-body{padding:13px 14px;overflow-y:auto;flex:1 1 auto;min-height:0;}
.ovinfo-msg{font-size:14px;line-height:1.6;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;}
.ovinfo-photo{display:block;width:100%;max-height:230px;object-fit:contain;border-radius:11px;border:1px solid var(--border);
  background:#0e0a06;margin-bottom:11px;cursor:zoom-in;}
.ovinfo-foot{flex:none;padding:11px 14px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 14px 14px;}
.ovinfo-ack{display:flex;align-items:flex-start;gap:9px;cursor:pointer;user-select:none;}
.ovinfo-ack input{flex:none;width:19px;height:19px;margin:0;accent-color:var(--accent);cursor:pointer;}
.ovinfo-ack span{font-size:12.5px;line-height:1.35;color:var(--text-2);}
/* Icône appareil photo (raccourci dashboard) agrandie. */
.kk-app .cam-big{width:27px;height:27px;}
/* Zone défilante sans barre de défilement visible (ex. pop-up d'ajout à une tribu). */
.noscroll{scrollbar-width:none;-ms-overflow-style:none;}
.noscroll::-webkit-scrollbar{width:0;height:0;display:none;}

/* modifs11 — AUCUNE barre de défilement, NULLE PART (le défilement reste possible, seule la barre est masquée). */
*{scrollbar-width:none!important;-ms-overflow-style:none!important;}
*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;}

/* modifs212 (#Paul 28/07) — DOUBLE-TAP : `manipulation` supprime le zoom au double-tap (et le délai de
   300 ms au passage). Le pincement, lui, se bloque en JS (`KK._lockZoom`, components.js) : le CSS seul
   n'y suffit pas sur iOS.
   🗺️ La carte du jeu de piste est EXCLUE — Leaflet gère ses propres gestes et a besoin de `none` ; sans
   cette exception, le zoom de la carte serait cassé, c'est-à-dire exactement le seul zoom que Paul veut
   conserver. Règle placée APRÈS celle de `.kk-app` pour la surcharger sans dépendre de la spécificité. */
.kk-app{touch-action:manipulation;}
.kk-app .leaflet-container,.leaflet-container{touch-action:none;}

/* modifs11 — anti-zoom iOS à l'ouverture du clavier : un champ < 16px déclenche un zoom auto au focus.
   Combiné à maximum-scale du viewport, on force 16px sur tous les contrôles → le clavier ne zoome plus.
   modifs217 (#Paul 28/07 : « réduire la police dans les champs de tous les formulaires, c'est tellement
   gros … ça fait trop chargé ») — RELÂCHÉE, et c'est LA cause du problème : les écrans demandaient déjà
   14px (128 styles en ligne `font-size:14px`), mais un style en ligne ne peut pas gagner contre
   `!important`. On baisse à 14px ET on retire le `!important` → un écran qui choisit explicitement une
   autre taille est enfin respecté au lieu d'être écrasé.
   ⚠️ CE QUI RESTE DU COMPROMIS : l'autre moitié de la protection est INTACTE (`maximum-scale=1.0,
   user-scalable=no` dans le viewport d'index.html), et le zoom-au-focus ne s'applique pas en PWA
   `standalone` — le cas de la plupart des utilisateurs. Le risque résiduel ne concerne donc qu'iOS Safari
   NON installé. Si un zoom réapparaît à l'ouverture du clavier sur iPhone : remettre `16px!important`
   ici, une seule ligne, rien d'autre à défaire.
   Planchers tenus : 14px ≥ 12px (arbitrage Paul du 27/07) et hauteur de champ ≥ 24px (WCAG 2.2 SC 2.5.8),
   les deux mesurés par `tools/audit-champs-check.js` sur 4 largeurs. */
.kk-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.kk-app select,.kk-app textarea{font-size:14px;}

/* ---------- Screen content ---------- */
.screen{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;}
.screen::-webkit-scrollbar{width:0;height:0;display:none;}
.screen.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* Les enfants d'un écran défilant ne se compriment pas : le contenu défile au lieu d'être rogné/superposé. */
.screen.scroll>*{flex-shrink:0;}
.screen.pad{padding:16px;gap:14px;}
.screen::-webkit-scrollbar{width:0;}

/* ---------- Bottom tab bar ---------- */
.tabbar{flex:none;display:flex;border-top:2.5px solid color-mix(in srgb,var(--accent) 40%,var(--border));background:var(--surface-2);padding:7px 8px 10px;box-shadow:0 -7px 20px rgba(0,0,0,.45);}
/* modifs18 — libellés en police du CORPS (Hanken Grotesk), comme les onglets segmentés et le reste du
   chrome (les libellés étaient en Cinzel serif = seul élément à jurer avec le reste de l'app). */
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--text-muted);
  font-family:var(--ff-body);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 2px;border-radius:12px;cursor:pointer;transition:.15s;}
.tabbar a svg{width:23px;height:23px;}
.tabbar a.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);}
.tabbar a.active svg{color:var(--accent);}
.tabbar a.active[data-tab="dashboard"],.tabbar a.active[data-tab="settings"]{color:oklch(0.75 0.012 240);background:color-mix(in srgb,oklch(0.75 0.012 240) 16%,transparent);}
.tabbar a.active[data-tab="dashboard"] svg,.tabbar a.active[data-tab="settings"] svg{color:oklch(0.75 0.012 240);}
.tabbar a:hover{color:var(--text-2);background:color-mix(in srgb,var(--text) 7%,transparent);}
.tabbar a:active{background:color-mix(in srgb,var(--accent) 14%,transparent);}
.tabbar a[data-tab="games"]:hover{color:var(--forest-300);}
.tabbar a[data-tab="catering"]:hover{color:oklch(0.82 0.16 95);}
.tabbar a[data-tab="camp"]:hover{color:oklch(0.65 0.15 250);}
.tab-sep{width:1px;background:var(--border);margin:6px 0;align-self:stretch;flex:none;opacity:.6;}
.tabbar a.active img{filter:brightness(1.2) drop-shadow(0 0 4px rgba(199,154,58,.6));transform:scale(1.08);}
.tabbar a img{transition:.15s;}

/* ---------- Headings inside app ---------- */
.kk-app h1,.kk-app h2,.kk-app h3,.kk-app h4{font-family:var(--ff-display);color:var(--text);}
/* Garde-fou : toute icône sans règle contextuelle reste petite (évite le ballon 300×150) */
.kk-app svg{width:18px;height:18px;flex:none;}
/* modifs14d — EXCEPTION Leaflet (jeu de piste) : le calque vectoriel de la carte est un GRAND <svg>
   dimensionné par Leaflet (attributs width/height). Le garde-fou ci-dessus l'écrasait à 18×18 px
   → tracé piéton entre balises et cercles de zone INVISIBLES (les métrages, en HTML, s'affichaient).
   width/height:auto = retombe sur les attributs posés par Leaflet. */
.kk-app .leaflet-container svg{width:auto;height:auto;max-width:none;max-height:none;}
.bdg svg{width:13px;height:13px;}
.tile .tinfo .time svg,.lrow .time svg{width:14px;height:14px;}
.eyebrow-s svg,.muted-s svg{width:14px;height:14px;}
.eyebrow-s{font-family:var(--ff-display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600;}
.h-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.muted-s{color:var(--text-muted);font-size:13px;}

/* ---------- Big action tiles (dashboard) ---------- */
.tiles{display:grid;gap:12px;}
.tile{position:relative;border:1px solid var(--border);border-radius:var(--r-md);background:linear-gradient(180deg,var(--surface-2),var(--surface));
  padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;overflow:hidden;transition:.15s;text-decoration:none;color:var(--text);}
.tile:hover{border-color:var(--accent);transform:translateY(-2px);}
.tile .glyph{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid var(--border);color:var(--accent);}
.tile .glyph svg{width:26px;height:26px;}
.tile .tname{font-family:var(--ff-display);font-weight:700;font-size:18px;}
.tile .tinfo{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);}
.tile .tinfo .k{color:var(--text-muted);font-family:var(--ff-display);font-size:10px;letter-spacing:.08em;text-transform:uppercase;}
.tile .chev{position:absolute;top:16px;right:14px;color:var(--text-muted);}
.tile .chev svg{width:18px;height:18px;}

/* ---------- KPI / stat tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.kpi{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:13px 14px;display:flex;flex-direction:column;gap:3px;}
.kpi .k{font-family:var(--ff-display);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:6px;}
.kpi .k svg{width:14px;height:14px;color:var(--accent);}
.kpi .v{font-family:var(--ff-display);font-weight:800;font-size:24px;color:var(--text);line-height:1.05;}
.kpi .v small{font-size:13px;color:var(--text-muted);font-weight:600;}
.kpi.fire .v{color:var(--fire);}

/* ---------- Cards / list rows ---------- */
.card-a{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:14px;}
.list{display:flex;flex-direction:column;}
.lrow{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border-soft);cursor:pointer;}
.lrow:last-child{border-bottom:none;}
.lrow .lic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);flex:none;border:1px solid var(--border-soft);}
.lrow .lic svg{width:20px;height:20px;}
.lrow .lmain{flex:1;min-width:0;}
.lrow .lt{font-weight:600;color:var(--text);font-size:15px;}
.lrow .ls{font-size:12px;color:var(--text-muted);}
.lrow .lend{font-family:var(--ff-display);font-weight:700;color:var(--accent);font-size:14px;white-space:nowrap;}
.lrow .time{font-family:var(--ff-display);font-weight:700;color:var(--fire);font-size:13px;min-width:48px;}

/* ---------- Segmented control / tabs ---------- */
.seg{display:flex;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:4px;gap:4px;}
.seg button{flex:1;border:none;background:transparent;color:var(--text-muted);font-family:var(--ff-display);font-weight:600;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:9px 6px;border-radius:9px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:6px;}
.seg button svg{width:16px;height:16px;}
.seg button.active{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink);box-shadow:var(--sh-1);}
/* #Paul — toggle menus des pôles (Camp / Catering / Activités) : bordure PLUS ÉPAISSE et teintée de la couleur
   du pôle (bleu camp, jaune catering, vert activités), même épaisseur partout. */
[data-pole] .seg{border-width:2px;border-color:color-mix(in srgb,var(--accent) 60%,var(--border));}
/* Tâches — exception jaune dans le camp */
#v-seg [data-t="tach"].active{background:linear-gradient(180deg,oklch(0.68 0.17 250),oklch(0.55 0.17 250));color:#fff;}
.seg-labeled button{flex-direction:column;gap:2px;padding:5px 4px;}
.seg-labeled button svg{width:16px;height:16px;}
.seg-labeled button span{font-size:9px;letter-spacing:.05em;line-height:1;}
/* Nav de groupe : tous les onglets sur UNE seule ligne (hauteur uniforme).
   Le libellé peut s'enrouler sur 2 lignes dans sa pastille (ex. « Créer activité »,
   « Planifier activités »). min-height = même hauteur que les toggles des autres
   menus paramètres, quel que soit le nombre d'onglets (2 pour un activ, 5 pour l'admin). */
.seg.seg-grp{flex-wrap:nowrap;gap:5px;}
.seg.seg-grp button{flex:1 1 0;min-width:0;font-size:9.5px;letter-spacing:.02em;padding:6px 4px;line-height:1.12;white-space:normal;min-height:38px;}
/* Photos de membres dans la liste des tribus (légèrement superposées) */
.tri-avs .av{margin-left:-7px;box-shadow:0 0 0 2px var(--surface);width:24px;height:24px;font-size:9px;border-width:2px;}
.tri-avs .av:first-child{margin-left:0;}

/* ---------- Blason chip ---------- */
.tribu-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);font-weight:600;font-size:13px;color:var(--text);}

/* ---------- Buttons (app) ---------- */
.btn-a{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;text-decoration:none;border:none;width:100%;
  padding:15px 20px;border-radius:12px;transition:.16s;}
.btn-a svg{width:19px;height:19px;}
.btn-a.primary{color:var(--accent-ink);background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 50%, #000),0 8px 18px rgba(0,0,0,.4);}
.btn-a.primary:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 50%, #000);}
.btn-a.outline{color:var(--accent);background:transparent;border:1.5px solid var(--accent);}
.btn-a.ghost{color:var(--text-2);background:var(--surface);border:1px solid var(--border);}
.btn-a.sm{padding:11px 14px;font-size:13px;width:auto;}   /* compact par defaut ; les CTA pleine largeur forcent width:100% en inline */

/* ---------- Inputs (app) ---------- */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:13px;}
.fld label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);font-weight:800;}
/* modifs217 — 16px → 14px, cohérent avec la règle globale relâchée plus haut. */
.fld input,.fld select,.fld textarea{font-family:var(--ff-body);font-size:14px;color:var(--text);background:var(--bg-2);
  border:1px solid var(--border);border-radius:10px;padding:13px 14px;width:100%;}
.fld input::placeholder{color:var(--text-muted);}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}
/* Pas de contour blanc par défaut du navigateur sur les champs (feuille de connexion, etc.) */
.kk-app input:focus,.kk-app textarea:focus,.kk-app select:focus{outline:none;border-color:var(--accent);}
/* Aucune flèche ▲▼ (spinner) sur les champs numériques, partout dans l'application. */
.kk-app input[type=number]{-moz-appearance:textfield;appearance:textfield;}
.kk-app input[type=number]::-webkit-outer-spin-button,
.kk-app input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;}
.code-input{display:flex;gap:8px;justify-content:center;}
.code-input input{width:46px;height:56px;text-align:center;font-family:var(--ff-display);font-weight:800;font-size:24px;color:var(--accent);
  background:var(--bg-2);border:1px solid var(--border);border-radius:12px;}

/* ---------- Bars / progress ---------- */
.barline{height:8px;border-radius:5px;background:color-mix(in srgb,var(--text-muted) 20%,transparent);overflow:hidden;}
.barline i{display:block;height:100%;border-radius:5px;}
.prog{height:10px;border-radius:6px;background:color-mix(in srgb,var(--text-muted) 22%,transparent);overflow:hidden;}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--fire-600),var(--fire-400));}

/* ---------- Badges (app) ---------- */
.bdg{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-display);font-weight:600;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--border);color:var(--text-2);}
.bdg.ok{color:var(--success);border-color:color-mix(in srgb,var(--success) 45%,transparent);background:color-mix(in srgb,var(--success) 12%,transparent);}
.bdg.warn{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 45%,transparent);background:color-mix(in srgb,var(--warning) 12%,transparent);}
.bdg.err{color:var(--error);border-color:color-mix(in srgb,var(--error) 45%,transparent);background:color-mix(in srgb,var(--error) 12%,transparent);}
.bdg.gold{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);}

/* ---------- Sheet / modal ---------- */
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:1500;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:.2s;}
.sheet-bg.open{opacity:1;pointer-events:auto;}
/* Feuille « claire » : fond transparent → la carte reste visible derrière (édition de waypoint) */
.sheet-bg.clear{background:transparent;}
/* 🔴 modifs243 (#Paul 30/07) — « le popup de modification des waypoints doit aller jusqu'en bas de l'écran
   s'il y a beaucoup de champs, et non jusqu'aux 3/4 maximum ». La feuille « clear » (fond transparent, pour
   garder la carte visible) était plafonnée à 72 % : depuis que le formulaire de balise porte la visibilité,
   le type, l'énigme, le QCM et le message de réussite, ce plafond forçait un scroll dans un scroll.
   On l'aligne sur la feuille ordinaire (92 %) : le fond reste transparent, seule la hauteur cède. */
/* 🔴 modifs245 (#Paul 31/07) — « utilise toute la hauteur NÉCESSAIRE : ni trop comme sur l'image, ni pas
   assez si j'augmente la hauteur d'un champ ; la partie grisée doit servir à afficher le maximum possible ».
   MESURÉ avant correctif, viewport 900 : la feuille rendait 828 px (= 92 %) alors que son contenu s'arrêtait
   à 727 ⇒ 101 px de beige VIDE sous le dernier champ, et 72 px de gris inutilisés en dessous. La cause n'est
   pas le plafond mais l'ÉTIREMENT : `.sheet-bg` est un conteneur flex, et son enfant unique s'étirait sur
   toute la hauteur (`align-items:stretch` par défaut sur l'axe transverse), le `max-height` ne faisant que
   l'écrêter. Deux gestes, et un seul suffit pas : `height:auto` + `align-self:flex-end` pour ÉPOUSER le
   contenu, et le plafond porté à 100 % pour que la zone grise serve quand le contenu, lui, en a besoin. */
.sheet-bg.clear .sheet{box-shadow:0 -10px 30px rgba(0,0,0,.55);}
/* modifs13-i — le corps déroulant (.sbody, overflow) porte 5px de padding interne : l'anneau de grade
   (box-shadow 4,1px hors boîte) d'un avatar collé en haut/gauche n'est plus rogné. Les retraits visuels
   sont conservés : 9px (sheet) + 5px (sbody) = 14px comme avant. */
.sheet{width:100%;height:auto;align-self:flex-end;max-height:100%;background:var(--surface);border-radius:22px 22px 0 0;border-top:1px solid var(--border);
  padding:6px 9px 11px;transform:translateY(100%);transition:.25s;display:flex;flex-direction:column;}
.sheet-bg.open .sheet{transform:none;}
.sheet .grip{width:42px;height:4px;border-radius:3px;background:var(--border);margin:6px auto 10px;flex:none;}
.sheet .sbody{overflow-y:auto;padding:5px;}

/* ---------- Toast ---------- */
/* modifs106 — z-index 1600 -> 10100. Le toast est le retour d'action de l'app : à 1600 il passait DERRIÈRE tous les
   overlays plein écran ajoutés depuis (.ovinfo 9998 · .ios-guide 9999 · #kk-photo-viewer 10000, fond noir à 94 % ·
   la feuille 10001 de components.js) ⇒ il était bien dans le DOM, mais invisible à l'écran. Toute action menée
   depuis la visionneuse photo échouait donc EN SILENCE — « Photo supprimée », et surtout le REFUS serveur d'un
   changement d'événement : la photo revenait à son dossier d'origine sans un mot.
   Vérifié au banc (375 px, avec témoin) : à 1600 elementFromPoint tombe sur la visionneuse, à 10100 sur le toast.
   ⚠️ Volontairement SOUS le plein écran du jeu de piste GPS (gps.js, 99999) : cette vue immersive ne m'appartient
   pas et je ne l'ai pas testée. Si un toast doit y apparaître un jour, c'est un arbitrage à part. */
.toast{position:absolute;left:16px;right:16px;bottom:20px;z-index:10100;background:var(--surface-3);border:1px solid var(--accent);
  border-radius:12px;padding:13px 15px;display:flex;align-items:center;gap:11px;box-shadow:var(--shadow);
  transform:translateY(140%);transition:.3s;color:var(--text);}
.toast.show{transform:none;}
.toast svg{width:20px;height:20px;color:var(--success);flex:none;}
.toast .tt{font-size:13px;line-height:1.4;}

/* ---------- Map placeholder ---------- */
.mapph{position:relative;flex:1;min-height:0;border-radius:0;overflow:hidden;background:
  repeating-linear-gradient(45deg,#1a2a1c,#1a2a1c 10px,#162416 10px,#162416 20px);}
.kk-app[data-theme="light"] .mapph{background:repeating-linear-gradient(45deg,#d6e0cf,#d6e0cf 10px,#cdd8c4 10px,#cdd8c4 20px);}
.mapph .you{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--info);border:3px solid #fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--info) 35%,transparent);}
.mapph .wp{position:absolute;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);border:2px solid var(--accent);color:var(--accent);font-family:var(--ff-display);font-weight:800;font-size:13px;}
.mapph .wp.done{border-color:var(--success);color:var(--success);}

/* ---------- Photo grid ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.pcell{aspect-ratio:1;border-radius:8px;border:1px solid var(--border);background:
  repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 8px,var(--surface) 8px,var(--surface) 16px);
  display:grid;place-items:center;color:var(--text-muted);}
.pcell svg{width:20px;height:20px;opacity:.6;}
.pcell.add{border-style:dashed;border-color:var(--accent);color:var(--accent);cursor:pointer;}

/* ---------- Styleguide swatches ---------- */
.sg-sw{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-radius:10px;overflow:hidden;border:1px solid var(--border);}
.sg-sw div{height:46px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-size:9px;font-family:ui-monospace,monospace;color:rgba(255,255,255,.7);}

/* ---------- Stage controls (outside phone) ---------- */
.stage-ctrl{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;max-width:420px;z-index:1;}
.stage-ctrl .lbl{font-family:var(--ff-display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7a6a4e;width:100%;text-align:center;margin-bottom:2px;}
.jump{font-family:var(--ff-display);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#cbb38a;background:rgba(30,22,12,.7);
  border:1px solid #3a2c1a;border-radius:8px;padding:7px 11px;cursor:pointer;transition:.15s;}
.jump:hover{border-color:var(--gold-600);color:var(--gold-300);}
.jump.active{background:rgba(199,154,58,.16);border-color:var(--gold-500);color:var(--gold-200);}
.themebtn{display:flex;align-items:center;gap:7px;}
.proto-toggle{font-family:var(--ff-display);font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;
  color:#1a1000;background:linear-gradient(180deg,#d8ad32,#a07818);border:1px solid #c9a227;border-radius:8px;
  padding:8px 16px;cursor:pointer;width:100%;max-width:260px;margin-bottom:4px;transition:.15s;}
.proto-toggle:hover{filter:brightness(1.08);}

/* ---------- Responsive: real mobile = full screen, no bezel ---------- */
@media (max-width:480px){
  .stage{padding:0;gap:0;background:#000;}
  .stage-ctrl{display:none;}
  .phone{width:100vw;height:100vh;height:100dvh;border-radius:0;padding:0;box-shadow:none;}
  .phone .notch{display:none;}
  .phone-btn{display:none;}
  .home-bar{display:none;}
  .kk-app{border-radius:0;}
}

/* ============================================================
   PASS LEAN — plus dense, moins de texte, vue d'ensemble
   (placé en fin de fichier : surcharge les valeurs au-dessus)
   ============================================================ */
.kk-app{font-size:15px;line-height:1.45;}
.screen.pad{padding:11px 12px;gap:8px;}
.appbar{padding:7px 12px 8px;gap:9px;}
/* Titre compact : tient en entier entre le bouton retour et le filtre d'édition. */
.appbar .ttl{font-size:13.5px;letter-spacing:0;}
.appbar .logo{height:26px;}
.statusbar{height:env(safe-area-inset-top,0px);font-size:12px;}

.btn-a{padding:11px 16px;font-size:13px;border-radius:10px;letter-spacing:.1em;gap:8px;}
.btn-a svg{width:17px;height:17px;}
.btn-a.sm{padding:8px 12px;font-size:11.5px;}
.btn-a.primary{box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 50%, #000),0 7px 15px rgba(0,0,0,.38);}

.lrow{padding:8px 4px;gap:10px;}
.lrow .lic{width:34px;height:34px;border-radius:9px;}
.lrow .lic svg{width:18px;height:18px;}
.lrow .lt{font-size:14px;}
.lrow .ls{font-size:11.5px;}
.lrow .lend{font-size:13px;}
.lrow .time{font-size:12px;min-width:42px;}

.tile{padding:12px 13px;gap:6px;border-radius:13px;}
.tile .glyph{width:40px;height:40px;border-radius:11px;}
.tile .glyph svg{width:23px;height:23px;}
.tile .tname{font-size:16px;}
.tile .tinfo{font-size:12px;gap:7px;}
.tile .chev{top:13px;right:12px;}

.kpi{padding:9px 11px;border-radius:11px;}
.kpi .v{font-size:19px;}
.kpi .k{font-size:9.5px;}
.kpis{gap:8px;}

.seg{padding:3px;gap:3px;border-radius:11px;}
.seg button{padding:7px 5px;font-size:11px;gap:5px;}
.seg button svg{width:15px;height:15px;}

.card-a{padding:11px;border-radius:11px;}
.eyebrow-s{font-size:10px;letter-spacing:.16em;}
.muted-s{font-size:12px;}
.fld{margin-bottom:9px;gap:5px;}
/* modifs217 — 15px → 14px : sur petit écran cette règle rendait les champs PLUS gros que la base. */
.fld input,.fld select,.fld textarea{padding:10px 12px;font-size:14px;border-radius:9px;}
.fld label{font-size:10px;}

/* modifs20i — Nav du bas COMPACTE et collée au bord. Le shell 100dvh (index.html) fait descendre le
   fond de la barre jusqu'au bord physique (fini la bande noire). Restait le padding : en PWA installée,
   env(safe-area-inset-bottom) vaut ~34px (indicateur d'accueil) et gonflait la barre → gros bandeau
   marron sous les icônes (retour Paul : « la barre s'arrête trop bas »). En Safari mobile env=0 donc
   c'était déjà compact — d'où « le phénomène n'existe que dans l'app installée ». On PLAFONNE donc la
   contribution de env avec min(...) : la barre reste compacte (~10px sous les libellés) sur iPhone
   installé COMME dans Safari, tout en gardant un petit dégagement de l'indicateur d'accueil. */
/* modifs27 — Paul : barre « très bien », la remonter TRÈS légèrement (cap 10→14, base 6→9). BACKUP de la
   valeur validée (min(10px, calc(6px + env(…)))) noté en mémoire koh-kampagna-nav-bottom-glued. */
.tabbar{padding:5px 6px min(14px, calc(9px + env(safe-area-inset-bottom,0px)));}
.tabbar a{font-size:11px;gap:3px;padding:4px 2px;}   /* #Paul (modifs195) — 9px → 11px : c'est le texte le PLUS LU de l'application, et il était le plus petit. Option A de l'arbitrage du 27/07. */
.tabbar a svg{width:21px;height:21px;}

.bdg{font-size:10px;padding:3px 8px;}
.h-row h2{font-size:19px;}

/* ============================================================
   NOUVEAUX COMPOSANTS
   ============================================================ */

/* --- Grille d'icônes (Paramètres) --- */
.icongrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.icongrid .it{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;cursor:pointer;
  border:1px solid var(--border);border-radius:11px;background:var(--surface);padding:10px 5px 8px;transition:.15s;text-decoration:none;color:var(--text);}
.icongrid .it:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--surface-2);}
.icongrid .it .gi{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);border:1px solid var(--border-soft);}
.icongrid .it .gi svg{width:28px;height:28px;}
.icongrid .it .lb{font-family:var(--ff-display);font-weight:600;font-size:9.5px;letter-spacing:.02em;line-height:1.2;color:var(--text);}
.icongrid .it .role{font-size:8px;color:var(--text-muted);font-family:var(--ff-display);letter-spacing:.06em;text-transform:uppercase;}
.icongrid .it.locked{opacity:.42;}
.icongrid .it.act .gi{background:color-mix(in srgb,var(--forest-500) 20%,transparent);color:var(--forest-300);border-color:color-mix(in srgb,var(--forest-500) 30%,var(--border-soft));}
.icongrid .it.act:hover{border-color:var(--forest-500);}
.icongrid .it.cat .gi{background:color-mix(in srgb,oklch(0.72 0.14 95) 17%,transparent);color:oklch(0.85 0.16 95);border-color:color-mix(in srgb,oklch(0.72 0.14 95) 30%,var(--border-soft));}
.icongrid .it.cat:hover{border-color:oklch(0.72 0.14 95);}
.icongrid .it.camp .gi{background:color-mix(in srgb,oklch(0.62 0.17 250) 18%,transparent);color:oklch(0.66 0.15 250);border-color:color-mix(in srgb,oklch(0.62 0.17 250) 30%,var(--border-soft));}
.icongrid .it.camp:hover{border-color:oklch(0.62 0.17 250);}
.grouplabel.act{color:var(--forest-300);}
.grouplabel.act::after{background:linear-gradient(90deg,color-mix(in srgb,var(--forest-500) 50%,var(--border-soft)),transparent);}
.grouplabel.cat{color:oklch(0.85 0.16 95);}
.grouplabel.cat::after{background:linear-gradient(90deg,color-mix(in srgb,oklch(0.72 0.14 95) 50%,var(--border-soft)),transparent);}
/* Administration — nuances de gris */
.icongrid.admin-grid .it .gi{background:color-mix(in srgb,oklch(0.75 0.012 240) 13%,transparent);color:oklch(0.80 0.012 240);border-color:color-mix(in srgb,oklch(0.75 0.012 240) 28%,var(--border-soft));}
.icongrid.admin-grid .it:hover{border-color:oklch(0.70 0.012 240);}
.grouplabel.admin{color:oklch(0.80 0.012 240);}
.grouplabel.admin::after{background:linear-gradient(90deg,color-mix(in srgb,oklch(0.75 0.012 240) 45%,var(--border-soft)),transparent);}
/* Pastille du bouton notifications (en-tête) */
.notif-btn .notif-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:oklch(0.55 0.22 25);color:#fff;font-family:var(--ff-display);font-weight:800;font-size:9px;line-height:16px;text-align:center;border:1.5px solid var(--bg-2);box-sizing:border-box;}
.grouplabel.camp{color:oklch(0.66 0.15 250);}
.grouplabel.camp::after{background:linear-gradient(90deg,color-mix(in srgb,oklch(0.62 0.17 250) 50%,var(--border-soft)),transparent);}
/* --- Barre d'onglets des menus regroupés --- */
.kk-groupnav{flex:none;display:flex;flex-direction:column;gap:6px;padding:9px 12px 10px;
  border-bottom:1px solid var(--border-soft);background:var(--bg-2);--gn-accent:var(--accent);}
.kk-groupnav.gn-act{--gn-accent:var(--forest-300);}
.kk-groupnav.gn-cat{--gn-accent:oklch(0.85 0.16 95);}
.kk-groupnav.gn-camp{--gn-accent:oklch(0.66 0.15 250);}
.kk-groupnav.gn-admin{--gn-accent:oklch(0.78 0.012 240);}
.kk-groupnav-ttl{font-family:var(--ff-display);font-weight:800;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gn-accent);opacity:.9;padding-left:2px;}
.kk-groupnav-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.kk-groupnav-pills::-webkit-scrollbar{display:none;}
.kk-groupnav-pills button{flex:none;width:104px;padding:7px 8px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-muted);font-family:var(--ff-display);font-weight:700;
  font-size:12px;letter-spacing:.01em;cursor:pointer;white-space:normal;text-align:center;line-height:1.18;transition:.12s;}
.kk-groupnav-pills button:hover{color:var(--text);border-color:color-mix(in srgb,var(--gn-accent) 40%,var(--border));}
.kk-groupnav-pills button.active{background:color-mix(in srgb,var(--gn-accent) 16%,transparent);
  color:var(--gn-accent);border-color:color-mix(in srgb,var(--gn-accent) 45%,var(--border));}

.grouplabel{font-family:var(--ff-display);font-weight:800;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin:4px 2px 2px;display:flex;align-items:center;gap:8px;}
.grouplabel::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--text-muted) 45%,var(--border-soft)),transparent);}
/* Label avec bouton œil : on remplace le liseré ::after par un liseré explicite (.gl-rule) suivi du bouton à droite. */
.grouplabel.has-eye::after{display:none;}
.grouplabel .gl-rule{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--text-muted) 45%,var(--border-soft)),transparent);}
.grouplabel.act .gl-rule{background:linear-gradient(90deg,color-mix(in srgb,var(--forest-500) 50%,var(--border-soft)),transparent);}
.grouplabel.cat .gl-rule{background:linear-gradient(90deg,color-mix(in srgb,oklch(0.72 0.14 95) 50%,var(--border-soft)),transparent);}
.grouplabel.admin .gl-rule{background:linear-gradient(90deg,color-mix(in srgb,oklch(0.75 0.012 240) 45%,var(--border-soft)),transparent);}
.grouplabel.camp .gl-rule{background:linear-gradient(90deg,color-mix(in srgb,oklch(0.62 0.17 250) 50%,var(--border-soft)),transparent);}
.gl-eye{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;line-height:1;}
.gl-eye:hover{border-color:var(--accent);color:var(--accent);}
.gl-logout{color:var(--error);border-color:color-mix(in srgb,var(--error) 35%,var(--border));}
.gl-logout:hover{border-color:var(--error);color:var(--error);background:color-mix(in srgb,var(--error) 12%,var(--surface-2));}
.gl-logout svg{transform:scaleX(-1);}   /* porte à gauche + flèche vers la droite (sortie) */

/* --- Tableau de données compact (zone scrollable dédiée) --- */
.dwrap{flex:1;min-height:0;overflow:auto;border:1px solid var(--border);border-radius:11px;background:var(--surface);scrollbar-width:none;-ms-overflow-style:none;}
.dwrap::-webkit-scrollbar{width:0;height:0;display:none;}
.dtable{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap;table-layout:fixed;}
.dtable th,.dtable td{overflow:hidden;text-overflow:ellipsis;}
/* lignes budget en flex (toujours pleine largeur, description tronquée) */
.blist{display:flex;flex-direction:column;}
.brow{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid var(--border-soft);}
.brow:last-child{border-bottom:none;}
.brow .pole-dot{flex:none;}
.blib-wrap{flex:1;min-width:0;}
.blib{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bsub{font-size:10px;color:var(--text-muted);}
.brow .bm{font-family:var(--ff-display);font-weight:700;font-size:13px;white-space:nowrap;color:var(--text);flex:none;}
.dtable th{position:sticky;top:0;background:var(--surface-2);z-index:2;font-family:var(--ff-display);font-weight:600;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);}
.dtable td{padding:8px 10px;border-bottom:1px solid var(--border-soft);color:var(--text-2);}
.dtable tbody tr:hover td{background:color-mix(in srgb,var(--accent) 7%,transparent);}
.dtable .num{text-align:right;font-variant-numeric:tabular-nums;}
.dtable .stick{position:sticky;left:0;background:var(--surface);font-weight:600;color:var(--text);}
.dtable tbody tr:hover .stick{background:color-mix(in srgb,var(--accent) 9%,transparent);}
.cellblason{display:inline-block;width:14px;height:16px;border-radius:3px 3px 6px 6px;vertical-align:-3px;border:1px solid rgba(0,0,0,.35);}
.dot-ok{width:9px;height:9px;border-radius:50%;background:var(--success);display:inline-block;}
.dot-no{width:9px;height:9px;border-radius:50%;background:var(--border);display:inline-block;}
.dot-warn{width:9px;height:9px;border-radius:50%;background:var(--warning);display:inline-block;}

/* --- Onglets icônes (navigation entre tables) --- */
.icontabs{display:flex;gap:5px;flex:none;}
.icontabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--border);
  background:var(--surface);border-radius:10px;padding:7px 4px;cursor:pointer;color:var(--text-muted);
  font-family:var(--ff-display);font-size:9px;letter-spacing:.04em;text-transform:uppercase;transition:.15s;}
.icontabs button svg{width:19px;height:19px;}
.icontabs button.active{color:var(--accent-ink);background:linear-gradient(180deg,var(--accent-2),var(--accent));border-color:transparent;}

/* --- Mini barres KPI horizontales --- */
.kbar{display:flex;align-items:center;gap:8px;font-size:12px;margin:5px 0;}
.kbar .kl{min-width:74px;color:var(--text-2);}
.kbar .kt{flex:1;height:7px;border-radius:4px;background:color-mix(in srgb,var(--text-muted) 20%,transparent);overflow:hidden;}
.kbar .kt i{display:block;height:100%;border-radius:4px;}
.kbar .kv{font-family:var(--ff-display);font-weight:700;font-size:12px;color:var(--text);min-width:54px;text-align:right;}

/* --- Form builder (créateur de formulaire) --- */
.fb-block{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:9px 11px;margin-bottom:7px;}
.fb-block .fbi{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);flex:none;}
.fb-block .fbi svg{width:17px;height:17px;}
.fb-block .fbm{flex:1;min-width:0;}
.fb-block .fbt{font-size:13px;font-weight:600;color:var(--text);}
.fb-block .fbs{font-size:10.5px;color:var(--text-muted);}
.fb-block .drag{color:var(--text-muted);}
.fb-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.fb-palette button{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px dashed var(--border);background:transparent;
  border-radius:9px;padding:8px 4px;cursor:pointer;color:var(--accent);font-family:var(--ff-display);font-size:8.5px;letter-spacing:.03em;text-transform:uppercase;}
.fb-palette button svg{width:18px;height:18px;}
.fb-palette button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);}

/* --- Bloc upload / import --- */
.dropzone{border:1.5px dashed var(--accent);border-radius:12px;padding:18px 14px;text-align:center;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);cursor:pointer;}
.dropzone svg{width:26px;height:26px;}
.dropzone .dz-t{font-family:var(--ff-display);font-weight:600;font-size:13px;margin-top:6px;color:var(--text);}
.dropzone .dz-s{font-size:11px;color:var(--text-muted);}

/* --- Toggle switch --- */
.sw{width:42px;height:24px;border-radius:14px;background:var(--border);position:relative;cursor:pointer;transition:.18s;flex:none;}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s;}
.sw.on{background:var(--accent);}
.sw.on::after{left:21px;}

/* --- Pastille pôle budget --- */
.pole-dot{width:10px;height:10px;border-radius:3px;display:inline-block;vertical-align:0;}
.pole-cat{background:oklch(0.80 0.15 95);}
.pole-act{background:var(--forest-500);}
.pole-com{background:var(--info);}
.pole-inv{background:var(--gold-500);}

/* ===================================================
   COULEURS PÔLES — propagation sur tout le site
   =================================================== */
/* Activités — vert forêt */
[data-pole="act"]{
  --accent:var(--forest-500); --accent-2:var(--forest-400); --accent-ink:#0d2014;
  --fire:var(--forest-300);
}
[data-pole="act"] .appbar{border-bottom-color:color-mix(in srgb,var(--forest-500) 40%,var(--border));}
[data-pole="act"] .appbar .ttl{color:var(--forest-300);}
[data-pole="act"] .tabbar a.active{color:var(--forest-300);background:color-mix(in srgb,var(--forest-500) 22%,transparent);}
[data-pole="act"] .tabbar a.active::before{background:var(--forest-500);}
[data-pole="act"] .seg button.active{color:#d4edda;}
/* Catering — rouge */
[data-pole="cat"]{
  --accent:oklch(0.80 0.15 95); --accent-2:oklch(0.88 0.14 95); --accent-ink:#2a2200;
}
[data-pole="cat"] .appbar{border-bottom-color:color-mix(in srgb,oklch(0.80 0.15 95) 40%,var(--border));}
[data-pole="cat"] .appbar .ttl{color:oklch(0.85 0.16 95);}
[data-pole="cat"] .tabbar a.active{color:oklch(0.84 0.15 95);background:color-mix(in srgb,oklch(0.80 0.15 95) 20%,transparent);}
[data-pole="cat"] .tabbar a.active::before{background:oklch(0.74 0.15 95);}
[data-pole="cat"] .lrow .time{color:oklch(0.85 0.16 95);}
/* Camp — bleu */
[data-pole="camp"]{
  --accent:oklch(0.62 0.17 250); --accent-2:oklch(0.72 0.14 250); --accent-ink:#fff;
}
[data-pole="camp"] .appbar .ttl{color:oklch(0.65 0.15 250);}
[data-pole="camp"] .tabbar a.active{color:oklch(0.72 0.17 250);background:color-mix(in srgb,oklch(0.62 0.17 250) 20%,transparent);}
[data-pole="camp"] .tabbar a.active::before{background:oklch(0.48 0.15 250);}
/* Compte/perso — or (par défaut) */
[data-pole="me"]{
  --accent:var(--gold-500); --accent-2:var(--gold-400);
}
.appbar .ttl,.tile .tname,.stat-card .big{font-family:var(--ff-title);font-weight:700;letter-spacing:.01em;text-transform:uppercase;}
.btn-a,.btn-wood-ghost,.btn{font-family:var(--ff-title);letter-spacing:.05em;}

/* ============================================================
   BOUTONS CTA — BOIS GRAVÉ
   ============================================================ */
.btn-a.primary{
  color:#f6dca6;
  background:url('ui/wood-board.png') center/cover, #5e3418;
  border:none;
  border-image:url('ui/wood-sign.png') 26 fill / 26px / 0 stretch;
  box-shadow:0 5px 0 #20120a, 0 12px 22px rgba(0,0,0,.55);
  text-shadow:0 1px 0 rgba(0,0,0,.85), 0 2px 2px rgba(0,0,0,.5), 0 -1px 0 rgba(255,228,175,.2);
  position:relative;
}
.btn-a.primary::before{content:none;}
.btn-a.primary svg{color:var(--gold-300);position:relative;}
.btn-a.primary:active{transform:translateY(2px);
  box-shadow:0 2px 0 #20120a,0 6px 12px rgba(0,0,0,.5);}

/* S'INSCRIRE — grand, Cinzel espacé */
.btn-cta-xl{font-family:var(--ff-title);font-size:25px;letter-spacing:.18em;
  text-indent:.18em;padding:19px 18px 18px;line-height:1;}
/* bouton PDF compact */
.btn-pdf{width:auto;align-self:center;padding:7px 22px 8px;font-size:13px;letter-spacing:.12em;gap:8px;}

/* bouton bois secondaire (accueil) */
.btn-wood-ghost{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;cursor:pointer;color:#e8d2a4;
  padding:12px 16px;border:none;
  background:url('ui/wood-board-dark.png') center/cover, #2c1909;
  border-image:url('ui/wood-sign.png') 26 fill / 26px / 0 stretch;
  box-shadow:0 3px 0 #1a0f06,0 7px 13px rgba(0,0,0,.45);
  text-shadow:0 1px 0 rgba(0,0,0,.7);}
.btn-wood-ghost svg{width:16px;height:16px;color:var(--gold-400);}
.btn-wood-ghost:active{transform:translateY(1px);box-shadow:0 1px 0 #1a0f06,0 4px 8px rgba(0,0,0,.4);}
.btn-wood-ghost.btn-pdf{width:auto;align-self:center;padding:7px 26px 8px;}

/* ============================================================
   BOUTONS CTA — B1 (bois brûlé braise) + B10 (pierre de feu)
   ============================================================ */
.btn-b1,.btn-b10{
  border:none;cursor:pointer;position:relative;
  font-family:var(--ff-title);text-transform:uppercase;
  letter-spacing:.13em;font-weight:700;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;
}
.btn-b1:active,.btn-b10:active{transform:translateY(3px);}

/* B1 — bois brûlé + bord braise vive */
.btn-b1{
  background:url('ui/wood-fire.png') center/cover,#1c0d02;
  border-radius:11px;color:#f9d08a;
  font-size:14px;padding:13px 18px;
  box-shadow:
    inset 0 0 0 2px rgba(20,10,3,.9),
    inset 0 0 28px rgba(0,0,0,.65),
    0 0 22px rgba(224,100,20,.55),
    0 7px 0 #0d0601,
    0 14px 22px rgba(0,0,0,.6);
  text-shadow:0 0 12px rgba(240,130,40,.7),0 1px 0 rgba(0,0,0,.85);
}
.btn-b1::before{
  content:"";position:absolute;inset:0;border-radius:11px;padding:2px;pointer-events:none;
  background:linear-gradient(180deg,#f0a23c 0%,#d96a2b 50%,#8a2a0a);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;
}
.btn-b1:hover{filter:brightness(1.08);}
.btn-b1.sm{font-size:11px;padding:8px 14px;width:auto;letter-spacing:.1em;}

/* B10 — pierre de feu + rune + double cadre or/braise */
.btn-b10{
  background:url('ui/stone-runic.png') center/cover,#1e1410;
  border-radius:12px;color:#f4cc70;
  font-size:14px;padding:11px 16px;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.55),
    inset 0 -8px 16px rgba(0,0,0,.6),
    0 0 24px rgba(224,100,20,.45),
    0 0 60px rgba(200,70,10,.2),
    0 8px 0 #0e0905,
    0 16px 26px rgba(0,0,0,.65);
  text-shadow:0 0 14px rgba(240,150,50,.6),0 1px 0 rgba(0,0,0,.85);
}
.btn-b10::before{
  content:"";position:absolute;inset:0;border-radius:12px;padding:2.5px;pointer-events:none;
  background:linear-gradient(180deg,#f0a23c,#c2521b 50%,#c79a3a);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.75;
}
.btn-b10::after{
  content:"";position:absolute;inset:6px;border-radius:7px;
  border:1px solid rgba(199,154,58,.3);pointer-events:none;
}
/* #Paul (modifs170) — CTA EN THÈME CLAIR. B1/B10 sont bâtis sur une TEXTURE SOMBRE (bois brûlé /
   pierre runique) + texte or + halos noirs : cohérent sur fond nuit, mais quasi noir et hors-sujet
   sur crème (ex. « + Nouveau jeu de piste »). En clair on les repasse en APLAT FEU à texte blanc,
   sans texture ni double cadre. Vaut PARTOUT où le thème clair est actif (y compris la carte au
   trésor, qui le force). Le relief (translateY à l'appui) est conservé, en plus léger. */
.kk-app[data-theme="light"] .btn-b1,
.kk-app[data-theme="light"] .btn-b10{
  background:linear-gradient(180deg,#d5773b,#bd5a24);
  color:#fff;
  text-shadow:none;
  box-shadow:0 3px 0 #9c4517,0 6px 14px rgba(150,70,25,.26);
}
.kk-app[data-theme="light"] .btn-b1::before,
.kk-app[data-theme="light"] .btn-b10::before,
.kk-app[data-theme="light"] .btn-b10::after{display:none;}
.kk-app[data-theme="light"] .btn-b1:active,
.kk-app[data-theme="light"] .btn-b10:active{box-shadow:0 1px 0 #9c4517,0 3px 8px rgba(150,70,25,.22);}
.kk-app[data-theme="light"] .btn-b1:hover,
.kk-app[data-theme="light"] .btn-b10:hover{filter:brightness(1.05);}
/* modifs109 — B10 compact, pour une action EN LIGNE (le « + » du Bon Coud'main).
   `.btn-b10` est un CTA pleine largeur : il porte `width:100%`. Dans une flexbox, `flex:none`
   (= flex-basis:auto → retombe sur `width`, + flex-shrink:0) le rendait donc large comme TOUTE
   la ligne et incompressible : le bloc nom/matériel voisin tombait à 0 px. Aucun override inline
   ne pouvait le rattraper (il faut aussi remettre ::before/::after à l'échelle). Même idiome que
   `.btn-b1.sm` ci-dessus ; ombre portée et cadres réduits à proportion. */
.btn-b10.sm{
  width:auto;font-size:12px;padding:7px 12px;border-radius:9px;letter-spacing:.06em;
  box-shadow:
    inset 0 0 0 1.5px rgba(0,0,0,.55),
    inset 0 -5px 10px rgba(0,0,0,.55),
    0 0 12px rgba(224,100,20,.35),
    0 3px 0 #0e0905,
    0 6px 10px rgba(0,0,0,.5);
}
.btn-b10.sm::before{border-radius:9px;padding:1.5px;}
.btn-b10.sm::after{inset:3.5px;border-radius:5px;}
.btn-b10.sm:active{transform:translateY(2px);}
/* modifs109 — sélecteur RESTAURÉ : il avait été supprimé par accident dans 0fb3678 (commit de socle),
   laissant un bloc de déclarations orphelin. Le parseur avalait alors la règle SUIVANTE : `.btn-fire-sm::before`
   était absente du CSSOM (constaté au navigateur). Inerte jusqu'ici — la classe n'est utilisée nulle part —
   mais c'était un piège pour toute règle ajoutée à cet endroit. */
.btn-fire-sm{
  font-family:var(--ff-title);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:#f9d08a;padding:8px 14px;
  background:url('ui/wood-fire.png') center/cover,#1c0d02;
  box-shadow:inset 0 0 0 2px rgba(20,10,3,.9),0 0 14px rgba(224,100,20,.5),0 4px 0 #0d0601,0 8px 14px rgba(0,0,0,.55);
  text-shadow:0 0 10px rgba(240,130,40,.55),0 1px 0 rgba(0,0,0,.8);
  position:relative;
}
.btn-fire-sm::before{content:"";position:absolute;inset:0;padding:2px;pointer-events:none;
  background:linear-gradient(180deg,#f0a23c,#d96a2b 50%,#8a2a0a);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;}
.btn-fire-sm:active{transform:translateY(2px);}

/* ============================================================
   DASHBOARD — tuiles impactantes
   (modifs96 : le bloc `.pinned` — encadré « Message de l'organisateur » — est SUPPRIMÉ ;
    il est remplacé par l'Overlay Info `.ovinfo-*` plus bas.)
   ============================================================ */
.tile .t-head{display:flex;align-items:center;gap:9px;}
.tile .t-label{font-family:var(--ff-title);font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--accent);font-weight:700;flex:1;}
.tile .t-big{font-family:var(--ff-title);font-weight:700;font-size:21px;text-transform:uppercase;letter-spacing:.01em;line-height:1.02;color:var(--text);margin-top:1px;}
.tile .t-big .hr{color:var(--fire);}
.tile .t-sub{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2);margin-top:2px;white-space:nowrap;}
.tile .t-sub .k{font-family:var(--ff-display);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.tile .t-camp{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.tile .t-cline{display:flex;align-items:baseline;gap:9px;font-size:13px;color:var(--text);}
.tile .t-cline .k{font-family:var(--ff-display);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);min-width:50px;font-weight:600;flex:none;}
.tile .t-cline .hr{font-family:var(--ff-title);color:var(--fire);font-size:15px;letter-spacing:.01em;}
.tile .t-cline .d{font-weight:600;}

@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}

/* dashboard — cartes cohérentes (classement + agenda) */
.dash-card{border:2px solid var(--border);border-radius:14px;background:linear-gradient(180deg,var(--surface-2),var(--surface));overflow:hidden;}
.dash-card-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 6px;}
.dch-title{display:flex;align-items:center;gap:7px;font-family:var(--ff-title);font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.dch-title svg{width:16px;height:16px;}
.dch-day{font-family:var(--ff-display);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
/* classement */
.rank-list{display:flex;flex-direction:column;padding:0 6px 6px;}
.rank-row{display:flex;align-items:center;gap:10px;padding:5px 7px;border-radius:9px;}
.rank-row.is-me{background:color-mix(in srgb,var(--accent) 12%,transparent);}
.rank-pos{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--ff-display);font-weight:800;font-size:11px;background:var(--surface-3);color:var(--text-2);border:1px solid var(--border);}
.rank-pos-1{background:linear-gradient(160deg,#d4a828,#a07818);color:#1a1000;border-color:#c9a227;}
.rank-pos-2{background:linear-gradient(160deg,#c8c8d0,#8e9098);color:#1a1a22;border-color:#b0b2ba;}
.rank-pos-3{background:linear-gradient(160deg,#c8844a,#8a5228);color:#1a0a00;border-color:#b07040;}
.rank-name{flex:1;min-width:0;font-weight:800;font-size:15.5px;color:var(--text);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-you{font-family:var(--ff-display);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);border-radius:4px;padding:1px 5px;flex:none;}
.rank-pts{font-family:var(--ff-display);font-weight:900;font-size:17px;color:var(--text);flex:none;}
.rank-pts span{font-size:10px;font-weight:400;color:var(--text-muted);}
/* agenda */
.agenda-list{display:flex;flex-direction:column;padding:0 6px 6px;}
.agenda-row{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:9px;cursor:pointer;text-decoration:none;color:var(--text);transition:.12s;}
.agenda-row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);}
.ag-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border:2px solid var(--border-soft);}
.ag-ic svg{width:16px;height:16px;}
.ag-ic.live{background:color-mix(in srgb,var(--fire) 16%,transparent);color:var(--fire);border-color:color-mix(in srgb,var(--fire) 40%,var(--border));}
.ag-time{font-family:var(--ff-title);font-weight:700;font-size:14px;color:var(--fire);flex:none;min-width:42px;}
.ag-label{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ag-badge{font-family:var(--ff-display);font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--warning);border:1px solid color-mix(in srgb,var(--warning) 45%,var(--border));border-radius:5px;padding:1px 5px;flex:none;}
.ag-tag{font-family:var(--ff-display);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);flex:none;}
.agenda-row>svg{width:16px;height:16px;color:var(--text-muted);flex:none;}

/* ============================================================
   « EN COURS » — LE HALO PARTAGÉ  (modifs255, #Paul 02/08)
   « ce qui est EN COURS doit avoir un HALO sur la page d'accueil et dans
     activites->planning, catering->menu, camp->soiree »
   UNE seule classe pour les quatre écrans : `.kk-encours`, posée par le
   prédicat PARTAGÉ `KK.enCours` (calc.js). Quatre feuilles auraient dérivé.

   ⚠️ POURQUOI UN box-shadow ET PAS UNE BORDURE. Un `box-shadow` ne participe
   pas à la mise en page ; une `border` de 2 px ajoute 4 px de hauteur et 4 px
   de largeur à la ligne — donc décale TOUTES ses voisines à la seconde où un
   évènement démarre, et fait sauter les grilles « soirées » et « menu » qui
   sont en `grid-auto-rows:1fr`. Mesuré au navigateur (banc modifs255 : même
   hauteur et même largeur, au pixel, entre une ligne haloée et sa voisine).

   ⚠️ POURQUOI L'ESSENTIEL DU HALO EST « inset ». Les trois conteneurs qui
   portent ces lignes sont en `overflow:hidden` — `.dash-card` (agenda de
   l'accueil), `.cat-day` (menu), `.soir-day` (soirées) — et les lignes y
   occupent toute la largeur : une lueur EXTÉRIEURE y serait rognée sur les
   côtés, donc invisible là où on la veut. La lueur interne, elle, est toujours
   rendue ; elle tient dans le padding des lignes (min. 5 px partout, l'anneau
   en fait 2), donc elle ne passe jamais sous le texte. La lueur extérieure est
   conservée en 3ᵉ position : elle sert quand il y a de la place autour
   (planning des activités, cartes détachées).

   Couleur : `--fire`, qui EST déjà la couleur « en cours » de l'app
   (`.ag-ic.live`, `.ep-row.live .ep-ic`, le libellé de statut « En cours ») —
   et elle suit le thème, sombre comme clair. Aucune ANIMATION : un halo qui
   pulse sur quatre écrans à la fois fatigue, et une valeur qui bouge ne se
   mesure pas de façon fiable au banc.
   ⚠️ Spécificité 0-2-0 (`.kk-app` + la classe) : `.cat-ep`, `.soir-ev`,
   `.agenda-row` et `.dash-card` sont à 0-1-0 et sont déclarées APRÈS app.css
   (styles injectés dans l'écran) — à égalité elles gagneraient. Vérifié au
   `getComputedStyle`, pas à la lecture (cf. le piège de spécificité modifs219).
   ============================================================ */
.kk-app .kk-encours{
  --kk-halo:var(--fire);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb,var(--kk-halo) 78%,transparent),
    inset 0 0 14px color-mix(in srgb,var(--kk-halo) 26%,transparent),
    0 0 12px color-mix(in srgb,var(--kk-halo) 34%,transparent);
}

/* ============================================================
   PLANNING ACTIVITÉS — séparateurs de journée + lignes épreuve
   ============================================================ */
.day-sep{display:flex;align-items:center;gap:9px;margin:12px 2px 5px;font-family:var(--ff-title);font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--accent);}
.day-sep:first-child{margin-top:2px;}
.day-sep::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);transform:rotate(45deg);flex:none;}
.day-sep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent);}
.ep-row{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:1px solid var(--border-soft);cursor:pointer;}
.ep-row:last-child{border-bottom:none;}
.ep-compact{padding:6px 2px;gap:8px;}
.ep-time{font-family:var(--ff-display);font-weight:700;font-size:12.5px;color:var(--text-2);text-align:right;min-width:44px;line-height:1.22;flex:none;}
.ep-time .e{display:block;color:var(--text-muted);font-weight:400;font-size:11px;}
.ep-time-c{font-family:var(--ff-display);font-weight:700;font-size:11px;color:var(--text-2);text-align:right;min-width:36px;line-height:1.3;flex:none;}
.ep-time-c span{display:block;color:var(--text-muted);font-weight:400;font-size:10px;}
.ep-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border:1px solid var(--border-soft);}
.ep-ic svg{width:19px;height:19px;}
.ep-ic-sm{width:28px;height:28px;border-radius:8px;}
.ep-ic-sm svg{width:15px;height:15px;}
.ep-row.live .ep-ic{border-color:var(--fire);color:var(--fire);background:color-mix(in srgb,var(--fire) 15%,transparent);}
.ep-main{flex:1;min-width:0;}
.ep-name{font-weight:600;font-size:14px;color:var(--text);line-height:1.15;}
.ep-name-sm{font-size:12.5px;font-weight:700;}
.ep-loc{font-size:10.5px;color:var(--text-muted);display:flex;align-items:center;gap:3px;margin-top:1px;}
.ep-loc svg{width:11px;height:11px;flex:none;}
.ep-meta{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:8px;margin-top:1px;}
.ep-pts{font-family:var(--ff-display);font-weight:700;color:var(--gold-400);}
.ep-end{flex:none;text-align:right;}
.ep-end-c{display:flex;align-items:center;gap:3px;flex:none;}
.ep-res{font-family:var(--ff-display);font-weight:700;font-size:11px;color:var(--success);white-space:nowrap;}
.ep-myres{font-family:var(--ff-display);font-weight:800;font-size:11px;white-space:nowrap;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success);}
.ep-myres.pos-1{background:color-mix(in srgb,#c9a227 15%,transparent);color:#c9a227;}
.ep-myres.pos-2{background:color-mix(in srgb,#a8aab4 15%,transparent);color:#a8aab4;}
.ep-myres.pos-3{background:color-mix(in srgb,#b07040 15%,transparent);color:#b07040;}

/* stats par couleur (Mon compte) */
.colorbreak{display:flex;gap:7px;margin-top:5px;flex-wrap:wrap;}
.cbchip{display:inline-flex;align-items:center;gap:3px;font-family:var(--ff-display);font-weight:700;font-size:12px;color:var(--text-2);}
.cbchip .blason.sm{width:13px;height:15px;}

/* formulaire compact (nouvelle édition) */
.compact-form .fld{margin-bottom:6px;gap:3px;}
.compact-form .fld input,.compact-form .fld select,.compact-form .fld textarea{padding:7px 10px;font-size:13px;border-radius:8px;}
.compact-form .grouplabel{margin:5px 2px 1px;}
.compact-form .dropzone{padding:9px 8px;}
.compact-form .dropzone .dz-t{font-size:11px;margin-top:3px;}
.compact-form .dwrap{max-height:96px;}

/* photo likes */
.plike{position:absolute;left:5px;bottom:5px;display:flex;align-items:center;gap:3px;font-family:var(--ff-display);font-weight:700;font-size:11px;
  color:#fff;background:rgba(0,0,0,.55);border-radius:20px;padding:2px 7px 2px 6px;cursor:pointer;border:none;}
.plike svg{width:13px;height:13px;color:#fff;}
.plike.on{color:var(--fire-300);}
.plike.on svg{color:var(--fire);}
.pcell{position:relative;}

/* pastille notif */
.notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--fire);border:1.5px solid var(--surface);}

/* écran Arbitre — saisie score */
.score-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:12px;margin-bottom:10px;}
.score-card .sc-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.score-card .sc-name{flex:1;font-weight:600;font-size:14px;color:var(--text);}
.score-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--border-soft);}
.score-row .blason{flex:none;}
.score-row .sr-name{flex:1;font-size:14px;color:var(--text);}
.stepper{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:9px;overflow:hidden;flex:none;}
.stepper button{width:34px;height:34px;border:none;background:var(--surface-2);color:var(--accent);font-size:19px;cursor:pointer;font-family:var(--ff-display);}
.stepper button:active{background:var(--accent);color:var(--accent-ink);}
.stepper .val{min-width:42px;text-align:center;font-family:var(--ff-display);font-weight:700;font-size:16px;color:var(--text);}

/* ============================================================
   FICHE COMPACTE — KOH KAMPAGNARD (une seule page, sans scroll)
   ============================================================ */
/* masquer scrollbar sur le sheet */
.sheet .sbody::-webkit-scrollbar{display:none;}
.sheet .sbody{overflow-y:auto;scrollbar-width:none;}
/* masquer scrollbar des panneaux du jeu de piste (éditeur / joueur) */
#gps-panel, #gps-ppanel{scrollbar-width:none;-ms-overflow-style:none;}
#gps-panel::-webkit-scrollbar, #gps-ppanel::-webkit-scrollbar{display:none;width:0;height:0;}
.acc-noscroll{scrollbar-width:none;-ms-overflow-style:none;}
.acc-noscroll::-webkit-scrollbar{display:none;height:0;}
/* header fiche */
.fc-hd{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px;}
.fc-info{flex:1;min-width:0;}
.fc-name{font-family:var(--ff-display);font-size:20px;font-weight:900;line-height:1.1;color:var(--text);letter-spacing:.02em;}
.fc-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:5px;}
.fc-birth{font-size:12px;color:var(--text-muted);margin-top:3px;}
/* partner compact */
.fc-partner{display:flex;align-items:center;gap:7px;padding:4px 8px;border:1px solid var(--border);border-radius:9px;margin-bottom:5px;cursor:pointer;transition:.12s;}
.fc-partner:hover{border-color:var(--accent);}
.fc-partner svg:first-child{width:13px;height:13px;color:var(--fire);flex:none;}
.fc-partner .fp-label{font-size:11.5px;color:var(--text-muted);}
.fc-partner .fp-nom{font-weight:600;font-size:13px;color:var(--text);flex:1;min-width:0;}
.fc-partner svg:last-child{width:14px;height:14px;color:var(--text-muted);}
/* kpi row */
.fc-kpis{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:5px;}
.fc-kpi{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:5px 8px;}
.fc-kpi .fk-v{font-family:var(--ff-display);font-weight:800;font-size:20px;color:var(--text);line-height:1;}
.fc-kpi .fk-l{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:3px;margin-top:2px;}
.fc-kpi .fk-l svg{width:13px;height:13px;}
.fc-kpi .fk-p{font-family:var(--ff-display);font-size:11px;font-weight:700;color:var(--accent);margin-top:2px;}
.fc-kpi .fk-p span{font-weight:400;color:var(--text-muted);}
/* enfants compact */
.fc-kids{display:flex;align-items:center;gap:6px;margin-bottom:5px;flex-wrap:wrap;}
.fc-kid{display:inline-flex;align-items:center;gap:3px;}
.fc-kid .kidface{font-size:18px;}
.fc-kid-name{font-size:11px;color:var(--text-2);font-family:var(--ff-display);font-weight:600;}
/* performances compact */
.fc-perf{margin-bottom:0;}
.fc-perf-title{font-family:var(--ff-display);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px;}
.fc-perf-chips{display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
.fc-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 7px;color:var(--text-2);}
.fc-chip svg{width:12px;height:12px;color:var(--accent);}
.fc-chip.gold{border-color:color-mix(in srgb,#c9a227 50%,var(--border));color:var(--accent);}
/* historique rôles — tableau */
.fc-hist{margin-bottom:0;}
.fc-hist-table{display:flex;flex-direction:column;gap:0;}
.fc-hist-row{
  display:grid;
  grid-template-columns:44px 1fr auto 32px;
  align-items:center;
  gap:6px;
  padding:6px 0;
  border-bottom:1px solid var(--border-soft);
}
.fc-hist-row:last-child{border-bottom:none;}
.fhr-current{
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  border-radius:8px;
  padding:7px 10px;
  margin:2px -10px;
  border-bottom:none !important;
  align-items:center;
}
.fhr-year{font-family:var(--ff-display);font-weight:800;font-size:13px;color:var(--text-2);flex:none;letter-spacing:.01em;}
.fhr-current .fhr-year{color:var(--accent);}
.fhr-role{display:flex;align-items:center;flex-wrap:wrap;gap:4px;}
.fhr-jours{font-family:var(--ff-display);font-size:11px;font-weight:700;color:var(--text-muted);text-align:right;flex:none;}
.fhr-current .fhr-jours{color:var(--text-2);}
.fht-trophy{display:flex;align-items:center;gap:2px;color:var(--accent);flex:none;width:26px;justify-content:flex-end;}
.fht-trophy svg{width:13px;height:13px;}
.fht-trophy span{font-family:var(--ff-display);font-size:10px;font-weight:800;}
.fht-no-trophy{opacity:0;pointer-events:none;}
.av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--ff-display);font-weight:800;font-size:15px;color:#fff;
  border:2px solid var(--border);background:var(--surface-3);background-size:cover;background-position:center 28%;
  text-shadow:0 1px 2px rgba(0,0,0,.4);}
.av-lg{width:66px;height:66px;font-size:23px;border-width:4px;}
.av-sm{width:30px;height:30px;font-size:11px;border-width:3px;}
/* bordures de rang */
.av-rank-vet{border-color:#c9a227;}
.av-rank-hab{border-color:#a8aab4;}
.av-rank-occ{border-color:#b07040;}
.av-rank-cur{border-color:var(--border);}
.av-t-rouge{background-color:#9a342a;background-image:linear-gradient(160deg,var(--tribu-rouge),#7a1d12);}
.av-t-jaune{background-color:#b89028;background-image:linear-gradient(160deg,var(--tribu-jaune),#8a6c14);color:#2a1a0a;text-shadow:none;}
.av-t-bleu{background-color:#2a5288;background-image:linear-gradient(160deg,var(--tribu-bleu),#1a3a6a);}
.av-t-gris{background-color:#7a7a7a;background-image:linear-gradient(160deg,var(--tribu-gris),#555);color:#2a1a0a;text-shadow:none;}
.av-t-vert{background-color:#2a6a3a;background-image:linear-gradient(160deg,var(--tribu-vert),#1a5226);}
.av-t-orange{background-color:#c26a12;background-image:linear-gradient(160deg,var(--tribu-orange),#a85a0f);}
.av-cam{position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;border-radius:50%;border:2px solid var(--surface);
  background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer;padding:0;}
.av-cam svg{width:13px;height:13px;}

/* top 3 (remplace les KPI tiles) */
/* modifs9 #10 — minmax(0,1fr) empêche une colonne de s'élargir au-delà de sa moitié (débordement du cadre à droite). */
.annu-top3s{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
.top3-block{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:9px 10px 10px;overflow:hidden;min-width:0;}
.annu-col-count{font-family:var(--ff-display);font-weight:700;font-size:11px;color:var(--accent);margin-left:4px;}
.top3-lab{display:flex;align-items:center;justify-content:center;gap:5px;font-family:var(--ff-display);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;text-align:center;}
.top3-lab svg{width:13px;height:13px;}
.top3-row{display:flex;justify-content:center;gap:8px;align-items:flex-start;flex-wrap:wrap;}
.top3-rows{display:flex;flex-direction:column;gap:5px;}
.top3-rank-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;}
.t3-rank{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-family:var(--ff-display);font-weight:800;font-size:10px;flex:none;}
.t3-r1{background:linear-gradient(160deg,#d4a828,#a07818);color:#1a1000;}
.t3-r2{background:var(--surface-3);color:var(--text-2);border:1px solid var(--border);}
.t3-r3{background:color-mix(in srgb,#b07030 25%,var(--surface));color:#c07828;border:1px solid color-mix(in srgb,#b07030 40%,var(--border));}
/* modifs12 #18 + modifs13-h — l'anneau de grade est un box-shadow (4.1px) hors de la boîte de l'avatar :
   overflow:hidden le COUPAIT en haut/bas (corrigé par padding-block) ET à gauche/droite du 1er/dernier
   avatar (Top victoires / Plus venus). padding latéral 6px = l'anneau respire des 4 côtés ; le
   chevauchement d'ex-æquo compense (-10px) pour ne pas élargir les rangées chargées. */
.t3-stack{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;flex-wrap:nowrap;min-width:0;overflow:hidden;padding:5px 6px;}
/* Si dépassement (beaucoup d'ex-æquo), chevauchement PROGRESSIF : plus il y a d'avatars, plus ils se
   superposent — la rangée tient dans la colonne au lieu de déborder (1er/dernier avatar coupés). */
.t3-stack:has(.t3-av:nth-child(4)) .t3-av+.t3-av{margin-left:-10px;}
.t3-stack:has(.t3-av:nth-child(5)) .t3-av+.t3-av{margin-left:-14px;}
.t3-stack:has(.t3-av:nth-child(6)) .t3-av+.t3-av{margin-left:-20px;}
.t3-stack:has(.t3-av:nth-child(4)){gap:0;}
.t3-av{display:block;flex:none;}
.t3-names{font-family:var(--ff-display);font-weight:600;font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.t3-stat{display:inline-flex;align-items:center;gap:2px;font-family:var(--ff-display);font-weight:700;font-size:12px;color:var(--accent);flex:none;}
.t3-item{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;}
.t3-name{font-family:var(--ff-display);font-size:11px;font-weight:600;color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56px;}
.t3-stat{display:inline-flex;align-items:center;gap:2px;font-family:var(--ff-display);font-weight:700;font-size:11px;color:var(--accent);}
.t3-stat svg{width:11px;height:11px;color:var(--accent);}

/* bouton ajouter (remonté) */
.add-mini{display:inline-flex;align-items:center;gap:4px;border:none;border-radius:8px;cursor:pointer;flex:none;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink);
  font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.02em;padding:6px 10px 6px 8px;}
.add-mini svg{width:14px;height:14px;}

/* légende repliable */
.annu-legend{border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden;}
.annu-legend>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;padding:8px 11px;
  font-family:var(--ff-display);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-2);}
.annu-legend>summary::-webkit-details-marker{display:none;}
.annu-legend>summary>svg:first-child{width:15px;height:15px;color:var(--text-muted);}
.annu-legend .lg-chev{margin-left:auto;display:flex;transition:.2s;}
.annu-legend .lg-chev svg{width:15px;height:15px;}
.annu-legend[open] .lg-chev{transform:rotate(180deg);}
.annu-legend .lg-body{padding:2px 12px 12px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border-soft);}
.annu-legend .lg-item{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2);}
.annu-legend .lg-item svg{width:16px;height:16px;color:var(--text-muted);flex:none;}
.annu-legend .lg-sub{font-family:var(--ff-display);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-top:5px;}
.annu-legend .lg-roles{display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
.annu-legend .lg-tribu{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text-2);}

/* visages d'enfants */
.kidfaces{display:inline-flex;gap:1px;align-items:center;}
.kidface{font-size:13px;line-height:1;}
.kidface.big{font-size:30px;}
.kids-big{display:flex;gap:4px;}

/* en-tête de colonnes (tri + filtre par clic) */
/* Chips de sélection multi-éditions (ajout d'un Kampagnard) */
.ed-chips{display:flex;flex-wrap:wrap;gap:6px;}
.ed-chip{font-family:var(--ff-display);font-size:12px;font-weight:700;letter-spacing:.03em;padding:5px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);cursor:pointer;}
.ed-chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
/* Barre verticale séparant la colonne Activités (win) de la colonne Participations (part) */
.annu-head button:nth-child(4),.annu-trow>:nth-child(4){box-sizing:border-box;border-left:1px solid var(--border);}
/* +N d'avatars supplémentaires dans un podium (cap par grade) */
.t3-more{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 3px;border-radius:9px;background:var(--surface-3);border:1px solid var(--border);color:var(--text-2);font-family:var(--ff-display);font-weight:800;font-size:9.5px;margin-left:2px;}
.annu-head{display:grid;grid-template-columns:1fr 31px 31px 31px 31px 31px 31px;gap:5px;align-items:center;
  padding:6px 16px 7px;border-bottom:1.5px solid var(--border);}
.annu-head button{border:none;background:transparent;cursor:pointer;text-align:left;padding:0;
  font-family:var(--ff-display);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);
  display:flex;align-items:center;gap:3px;position:relative;transition:.15s;}
.annu-head button.num{justify-content:center;}
.annu-head button svg{width:14px;height:14px;}
.annu-head button.active{color:var(--accent);}
.annu-head button.filtered{color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:5px;}
.annu-head button.active::after{content:"";width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;}
.annu-head button.active[data-dir="desc"]::after{border-top:4px solid var(--accent);}
.annu-head button.active[data-dir="asc"]::after{border-bottom:4px solid var(--accent);}

/* lignes du tableau (6 colonnes numériques) */
.annu-trow{display:grid;grid-template-columns:1fr 31px 31px 31px 31px 31px 31px;gap:5px;align-items:center;
  padding:8px 4px;border-bottom:1px solid var(--border-soft);cursor:pointer;transition:.12s;}
.annu-trow:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);}
.at-name{display:flex;align-items:center;gap:8px;min-width:0;}
.annu-name{font-weight:600;font-size:13.5px;color:var(--text);line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.at-age{font-size:11px;color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.at-num{font-family:var(--ff-display);font-weight:700;font-size:13px;color:var(--text);text-align:center;}
.at-num.zero{color:var(--text-muted);opacity:.45;}

/* barre Ajouter pleine largeur (bas de l'annuaire) */
.annu-add-bar{flex:none;padding:8px 12px;border-top:1px solid var(--border-soft);background:var(--surface);}
.annu-add-full{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border:none;border-radius:11px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink);
  font-family:var(--ff-display);font-weight:700;font-size:14px;letter-spacing:.02em;cursor:pointer;transition:.15s;}
.annu-add-full:hover{filter:brightness(1.06);}
.annu-add-full svg{width:17px;height:17px;}

/* statut Kampagnard (quartile participations) */
.kampstatut{font-family:var(--ff-display);font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);border:1px solid;}
.s-vet{color:#c9a227;border-color:#c9a227;background:color-mix(in srgb,#c9a227 15%,transparent);}
.s-hab{color:#a8aab4;border-color:#a8aab4;background:color-mix(in srgb,#a8aab4 12%,transparent);}
.s-occ{color:#b07040;border-color:#b07040;border-width:2px;background:color-mix(in srgb,#b07040 12%,transparent);}
.s-cur{color:var(--text-muted);border-color:var(--border-soft);background:transparent;}
/* % sous les KPI */
.kpct{font-size:11px;color:var(--accent);font-family:var(--ff-display);font-weight:700;margin-top:2px;line-height:1.2;}
.kpct .muted-s{font-weight:400;font-size:10.5px;}
/* légende compacte inline (toujours visible) */
.annu-legend-inline{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:7px 10px;display:flex;flex-direction:column;gap:5px;align-items:center;}
.ali-row{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;justify-content:center;}
.ali-item{display:inline-flex;align-items:center;gap:2px;font-size:10px;color:var(--text-muted);white-space:nowrap;}
.ali-item svg{width:12px;height:12px;}
.ali-hash,.col-hash{font-family:var(--ff-display);font-weight:800;font-size:14px;color:currentColor;line-height:1;}
.ali-tribu{display:inline-flex;align-items:center;gap:2px;font-family:var(--ff-display);font-size:10px;color:var(--text-muted);}

/* fiche : partenaire + enfants nommés */
.fiche-partner{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;margin-bottom:12px;transition:.12s;}
.fiche-partner:hover{border-color:var(--accent);}
.fiche-partner svg:first-child{width:15px;height:15px;color:var(--fire);flex:none;}
.fiche-partner>span:first-of-type{font-size:12.5px;color:var(--text-muted);flex:none;}
.fiche-partner .fp-name{flex:1;font-weight:600;font-size:14px;color:var(--text);}
.fiche-partner svg:last-child{width:16px;height:16px;color:var(--text-muted);flex:none;}
.kids-big-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.t-kid{display:flex;flex-direction:column;align-items:center;gap:3px;}
.t-kid .kidface{font-size:28px;line-height:1;}
.kid-name{font-family:var(--ff-display);font-weight:600;font-size:11px;color:var(--text-2);text-align:center;}

/* fiche : performances & historique des rôles */
.perf-block{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:9px 11px;}
.perf-lab{font-family:var(--ff-display);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px;}
.perf-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--text);padding:3px 0;}
.perf-row+.perf-row{border-top:1px solid var(--border-soft);}
.perf-x{display:inline-flex;align-items:center;gap:3px;font-family:var(--ff-display);font-weight:700;font-size:13px;color:var(--accent);flex:none;}
.perf-x svg{width:14px;height:14px;}
.rolehist{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden;}
.rh-row{display:flex;align-items:center;gap:10px;padding:7px 11px;}
.rh-row+.rh-row{border-top:1px solid var(--border-soft);}
.rh-y{font-family:var(--ff-display);font-weight:700;font-size:13px;color:var(--text-2);width:42px;flex:none;}

.annu-chips{display:flex;gap:5px;flex-wrap:wrap;}
.annu-chips button{border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-family:var(--ff-display);font-size:10.5px;letter-spacing:.02em;padding:5px 11px;border-radius:var(--r-pill);cursor:pointer;transition:.15s;}
.annu-chips button:hover{border-color:var(--accent);}
.annu-chips button.active{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent);color:var(--accent);}

.role-toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:8px;background:var(--surface);
  color:var(--accent);font-family:var(--ff-display);font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;cursor:pointer;flex:none;}
.role-toggle svg{width:13px;height:13px;}

.annu-role-tag{font-family:var(--ff-display);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.tag-admin,.tag-staff{color:var(--accent);}
.tag-arbitre{color:var(--warning);}
.tag-supporter{color:var(--info);}
.tag-participant{color:var(--text-muted);}

/* ── Accordion Mon compte ── */
.kk-acc{margin-top:10px;}
.kk-acc > summary{list-style:none;-webkit-appearance:none;display:flex;align-items:center;gap:7px;
  padding:9px 0;cursor:pointer;user-select:none;-webkit-user-select:none;
  font-family:var(--ff-display);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--border-soft);}
.kk-acc > summary::-webkit-details-marker{display:none;}
.kk-acc > summary svg{width:14px;height:14px;flex:none;}
.kk-acc .acc-chev{margin-left:auto;width:16px!important;height:16px!important;
  color:var(--text-muted)!important;transition:transform .2s ease;}
.kk-acc[open] .acc-chev{transform:rotate(90deg);}
.kk-acc-body{padding-top:8px;}

/* ── #Paul (modifs101) — CONTOUR DE VALIDATION (rouge/vert) ──────────────────────────────────────────
   Posé/retiré par KK.fieldState (components.js). Règle : obligatoire vide/invalide = ROUGE · obligatoire
   rempli et valide = VERT · facultatif = aucun contour.
   `!important` est NÉCESSAIRE (et volontaire) : les champs portent leur bordure en style INLINE
   (`border:1px solid …`), qui bat toute règle de feuille. C'est aussi ce qui permet de retirer la classe
   sans rien restaurer à la main — l'inline d'origine reprend la main tout seul.
   Le :focus reprend la couleur de l'ÉTAT : sinon le halo doré de `.fld :focus` (app.css) se superposait à
   une bordure rouge → deux couleurs sur le même champ, exactement ce qu'on cherche à supprimer. */
.kk-app .kk-fld-err{border-color:var(--error)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--error) 30%,transparent)!important;}
.kk-app .kk-fld-ok{border-color:var(--success)!important;box-shadow:none!important;}
.kk-app .kk-fld-err:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--error) 32%,transparent)!important;}
.kk-app .kk-fld-ok:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 26%,transparent)!important;}
/* modifs107 — 3ᵉ état ORANGE ('warn') : « il te faudra ce champ pour réserver ton shuttle, mais il ne bloque
   pas l'enregistrement de ta fiche ». Halo volontairement plus discret que le rouge (22 % contre 30 %) : c'est
   un rappel, pas une faute. Ne s'applique QU'À un champ listé par un checkFn — le facultatif reste sans contour. */
.kk-app .kk-fld-warn{border-color:var(--warning)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--warning) 22%,transparent)!important;}
.kk-app .kk-fld-warn:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 28%,transparent)!important;}
/* `type=email` : Firefox applique un halo rouge via `:invalid` de sa feuille UA pendant la frappe (« a@b »
   est invalide tant que le TLD manque) — un rouge que l'app ne contrôle pas et qui contredisait l'état vert. */
.kk-app input:invalid{box-shadow:none;}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   UX-A11Y-904 (audit 27/07) — INDICATEUR DE FOCUS CLAVIER. Mesuré : sur 6 champs testés sur 6, RIEN
   ne changeait à la prise de focus. Échec WCAG 2.2 SC 2.4.7 (niveau AA), sur toute l'application.

   POURQUOI ÇA MANQUAIT, alors que le CSS en posait un. Deux couches se neutralisaient :
     ① `.kk-app input:focus` (l.446) enlève l'outline et le remplace par `border-color:var(--accent)` ;
     ② mais la quasi-totalité des champs porte un `border` — et souvent un `outline:none` — EN STYLE
        EN LIGNE (public.js:799/859/938, components.js:1432, catering-staff.js:138, …). Un style en
        ligne bat n'importe quel sélecteur : le remplaçant était donc systématiquement défait, et
        l'outline restait supprimé. Résultat : focus invisible.

   D'OÙ CE BLOC, ET D'OÙ LE `!important`. C'est ici l'usage légitime : un PLANCHER d'accessibilité que
   le style en ligne ne doit pas pouvoir défaire. On utilise `outline` (hors du modèle de boîte : il ne
   déplace rien, ne casse aucune mise en page) et `:focus-visible` (le halo n'apparaît donc PAS au clic
   ou au toucher — seulement au clavier, là où il sert).

   ⚠️ NE PAS remplacer par une `border` ou une `box-shadow` : les deux sont écrasées par l'inline, et
   la box-shadow des états de validation (`.kk-fld-err/ok/warn`) s'y superposerait — c'est le conflit
   que documente le commentaire de la l.1328. L'outline cohabite avec eux sans les toucher.

   🎨 VARIANTE VISUELLE — 3 options ont été proposées à Paul (or / double anneau / accent épais).
   Celle-ci est l'option A (« or discret »). Pour basculer : ne changer QUE les 2 lignes `outline`
   et `outline-offset` ci-dessous, rien d'autre ne dépend d'elles.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
.kk-app :is(input,textarea,select,button,a,[tabindex]):focus-visible,
.kk-app .col:focus-visible,
body:not(.kk-app) :is(input,textarea,select,button,a):focus-visible{
  outline:2px solid var(--gold-400,#d7b25a)!important;
  outline-offset:2px!important;
  border-radius:inherit;
}
/* Sur fond clair, l'or pâle disparaît : on repasse sur l'encre foncée du thème.
   ⚠️ CIBLER `[data-theme="light"]`, PAS `prefers-color-scheme`. Cette application est SOMBRE
   UNIQUEMENT et son thème clair s'active par cet attribut (app.css:23) — elle ne suit jamais la
   préférence de l'OS. Une première version de ce bloc utilisait `@media (prefers-color-scheme:light)` :
   mesuré au navigateur, le halo sortait alors en `rgb(239,226,196)` (le `--text` du thème SOMBRE) chez
   tout utilisateur dont l'OS est en clair — visible par chance sur fond sombre, mais illisible sur les
   deux écrans réellement clairs. C'est le piège « la préférence de l'OS n'est pas le thème de l'app ». */
.kk-app[data-theme="light"] :is(input,textarea,select,button,a,[tabindex]):focus-visible{
  outline-color:var(--text,#221807)!important;
}
.kk-app [data-jdp] :is(input,textarea,select,button,a,[tabindex]):focus-visible{outline-color:var(--fire-400,#f0a23c)!important;}
/* Repli pour les navigateurs sans `:focus-visible` (aucun ciblé aujourd'hui, mais le repli est gratuit
   et l'absence d'indicateur est un échec de niveau AA — mieux vaut un halo au clic que pas de halo). */
@supports not selector(:focus-visible){
  .kk-app :is(input,textarea,select,button,a,[tabindex]):focus{outline:2px solid var(--gold-400,#d7b25a)!important;outline-offset:2px!important;}
}

/* ============================================================
   modifs217 (#Paul 28/07) — BANDEAU MÉTÉO de l'accueil
   modifs220 (#Paul 28/07) — L'EN-TÊTE EST SUPPRIMÉE : titre, horodatage « ↻ … »,
   indice de fiabilité et bascule Semaine/Jour. La navigation est devenue tactile
   (tap sur une journée → ses heures ; tap sur les heures → retour ; double tap
   sur une journée → températures de nuit). Le bandeau n'est plus que sa donnée.
   Budget de hauteur : 80 px → 58 px, MESURÉ au DOM sous Chromium
   (corps 54 + 2×2 de bordure). C'est la place gagnée par l'en-tête, rendue à
   l'agenda qui est juste en dessous — et non réinvestie dans le bandeau.
   ⚠️ UNE DÉROGATION au plancher de 12 px (arbitrage du 27/07, qui ne tolérait
   que `.tabbar a`), demandée explicitement par Paul le 28/07 :
     · `.mt-day .d1` à 11 px — le libellé de jour « s'affichait mal » ; la cause
       première était la POLICE (Cinzel, un serif d'affichage, illisible en
       capitales à cette taille) : il est passé sur la police de corps.
   (La 2e dérogation, `.mt-maj` à 10 px, est PARTIE avec l'horodatage.)
   Le banc `tools/meteo-check.js` inscrit cette exception ; sans quoi le banc
   du plancher rougirait, et la CI enverrait un mail d'échec à chaque push.
   ============================================================ */
.mt-card{border:2px solid color-mix(in srgb,var(--info) 34%,var(--border));border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--info) 9%,var(--surface-2)),var(--surface));}
.mt-body{height:54px;}

/* ---- vue SEMAINE ---- */
.mt-days{display:flex;gap:1px;padding:1px 2px 2px;height:54px;}
.mt-day{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:9px;border:1px solid transparent;cursor:pointer;user-select:none;overflow:hidden;}
.mt-day.nodata{cursor:default;}
.mt-day.today{background:color-mix(in srgb,var(--info) 17%,transparent);border-color:color-mix(in srgb,var(--info) 48%,transparent);}
.mt-day .d1{font-family:var(--ff-body);font-size:11px;font-weight:800;text-transform:uppercase;
  color:var(--text-muted);line-height:1.2;white-space:nowrap;letter-spacing:-.03em;}
.mt-day.today .d1{color:color-mix(in srgb,var(--info) 45%,var(--text));}
.mt-day .tt{font-size:15px;font-weight:800;color:var(--text);line-height:1.2;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;}
.mt-day .tt.nuit{color:#bcd8ff;}
.mt-day .mm{font-size:12px;font-weight:800;color:color-mix(in srgb,var(--info) 55%,var(--text));line-height:1.2;
  white-space:nowrap;letter-spacing:-.025em;}
.mt-day .mm u{text-decoration:none;font-size:12px;font-weight:600;opacity:.72;}
.mt-day .mm.sec{color:var(--text-muted);opacity:.45;font-weight:700;}
.mt-day .nd{font-size:12px;color:var(--text-muted);opacity:.4;}
/* modifs220 — témoin de la vue NUIT. La bascule n'a plus de bouton depuis que l'en-tête a sauté :
   sans ce glyphe, seule la couleur distinguerait une température de nuit d'une de jour. */
.mt-day .tt .mt-lune{font-style:normal;font-size:12px;color:#9ec6ff;margin-right:2px;flex:none;}

/* ---- vue JOUR ---- */
.mt-strip{display:flex;height:54px;overflow-x:auto;padding:1px 6px 2px;scrollbar-width:none;
  cursor:grab;user-select:none;overscroll-behavior-x:contain;}
/* modifs220 — la DATE consultée, portée par le titre avant la suppression de l'en-tête. Collée à
   gauche (`sticky`) : elle reste lisible pendant qu'on parcourt les heures, et elle ne coûte
   AUCUNE hauteur. Le dégradé la détache du ruban qui défile dessous. */
.mt-hd{position:sticky;left:0;z-index:1;flex:none;width:42px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;border-radius:8px;
  background:linear-gradient(90deg,var(--surface) 78%,transparent);}
.mt-hd span{font-family:var(--ff-body);font-size:12px;font-weight:800;text-transform:uppercase;
  color:color-mix(in srgb,var(--info) 45%,var(--text));line-height:1.1;letter-spacing:-.03em;}
.mt-hd b{font-size:12px;font-weight:800;color:var(--text-muted);line-height:1.1;letter-spacing:-.03em;}
.mt-strip::-webkit-scrollbar{display:none;}
.mt-strip.grab{cursor:grabbing;}
/* 46 px et non 42 : le ruban DÉFILE, la largeur d'un créneau n'est pas contrainte par l'écran.
   Ces 4 px permettent d'écrire « 0,4mm » en entier plutôt qu'un « 0,4 » sans unité. */
.mt-hr{flex:none;width:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;}
.mt-hr .h{font-family:var(--ff-display);font-size:12px;font-weight:800;color:var(--text-muted);line-height:1.15;}
.mt-hr .t{font-size:16px;font-weight:800;color:var(--text);line-height:1.25;display:flex;align-items:center;justify-content:center;}
.mt-hr .t.nd{opacity:.35;}
.mt-hr .mm{font-size:12px;font-weight:800;color:color-mix(in srgb,var(--info) 55%,var(--text));line-height:1.25;
  letter-spacing:-.025em;white-space:nowrap;}
.mt-hr .mm u{text-decoration:none;font-size:12px;font-weight:600;opacity:.72;}
.mt-hr .mm.sec{color:var(--text-muted);opacity:.35;font-weight:700;}
.mt-hr.now{background:color-mix(in srgb,var(--fire) 15%,transparent);}
.mt-hr.now .h{color:var(--fire);}
.mt-nsep{flex:none;width:1px;align-self:stretch;margin:4px 4px;background:linear-gradient(180deg,transparent,var(--border),transparent);}

/* ---- ORAGE ---- #Paul : « c'est possible d'avoir l'éclair pour les heures de risque ? »
   Il y était déjà — mais un ⚡ de 12 px collé à un chiffre de 16 px passe inaperçu. À cette
   taille le glyphe seul ne suffit pas : c'est le FOND qui porte l'information. Des heures
   orageuses consécutives forment alors une BANDE qu'on lit d'un coup (« ça tape de 15 à 18 h »)
   au lieu de 4 pastilles à repérer une par une. Rayon nul ⇒ les créneaux voisins se soudent. */
.mt-or{font-style:normal;font-weight:800;line-height:1;margin-left:1px;flex:none;}
/* palier 1 : même taille que les autres (le banc refuse toute valeur sous 12 px non
   déclarée) — c'est l'OPACITÉ qui le rend plus discret, pas une police plus petite. */
.mt-or.o1{font-size:12px;color:var(--warning);opacity:.62;}
.mt-or.o2{font-size:12px;color:#ffb03a;}
.mt-or.o3{font-size:12px;color:#ff6a3d;text-shadow:0 0 7px rgba(255,106,61,.55);}
.mt-hr .mt-or{font-size:14px;margin:0;}
.mt-hr.o1{background:color-mix(in srgb,#e0a52a 11%,transparent);border-radius:0;}
.mt-hr.o2{background:color-mix(in srgb,#ffb03a 19%,transparent);border-radius:0;}
.mt-hr.o3{background:color-mix(in srgb,#ff6a3d 24%,transparent);border-radius:0;}
.mt-hr.o1 .h{color:#e0a52a;}
.mt-hr.o2 .h{color:#ffb03a;}
.mt-hr.o3 .h{color:#ff6a3d;}
/* ═══ modifs205 — case « Je préfère ne pas répondre » (Q7) : PETITE À L'ŒIL, GRANDE AU DOIGT ═══════
   #Paul (28/07) : « la case à cocher pour ne pas répondre doit être plus petite ». Elle était carrée à
   24 px, ce qui est lourd à côté d'un libellé de 12,5 px.
   ⚠️ Mais 24 px est le plancher de CIBLE TACTILE (WCAG 2.2 SC 2.5.8), gardé par
   `tools/audit-champs-check.js`, et c'est une case qu'on tape sur un téléphone. Les deux exigences ne
   sont conciliables qu'en les SÉPARANT : l'élément garde 24×24 (donc la cible et la mesure du banc),
   et l'on DESSINE une case de 15 px au centre.
   Première tentative, écartée : `width:15px;padding:4.5px`. Chromium ignore le padding sur une case
   NATIVE — mesuré 15×15 au navigateur. D'où `appearance:none` : on reprend le rendu à la main, ce qui
   est aussi le seul moyen d'avoir un état coché lisible sans dépendre du thème du système. */
.kk-app input.kk-nrp{
  appearance:none;-webkit-appearance:none;
  width:24px;height:24px;flex:none;margin:0;padding:0;border:none;background:transparent;
  cursor:pointer;display:grid;place-content:center;
}
.kk-app input.kk-nrp::before{
  content:"";width:15px;height:15px;border-radius:4px;
  border:1.5px solid var(--border);background-color:var(--surface-2);
  transition:background .12s,border-color .12s;
}
.kk-app input.kk-nrp:checked::before{
  /* `background-color` explicite plutôt que le raccourci `background:` — ce dernier réinitialiserait
     `background-image`, posée juste en dessous, et la coche disparaîtrait. */
  border-color:var(--success);background-color:var(--success);
  /* la coche, dessinée en fond : aucun glyphe de police, donc identique partout */
  background-image:linear-gradient(45deg,transparent 42%,#fff 42%,#fff 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 58%,#fff 58%,#fff 72%,transparent 72%);
  background-size:100% 100%;
}

/* ============================================================
   modifs223 (#Paul 28/07) — ÉCRAN « COMPTES COURANTS », vue compacte
   Trois demandes, un seul bloc : boutons fortement réduits, écritures
   d'une même personne dans UN rectangle, et liste de comptes plus dense.
   ⚠️ Rien ne descend sous 12 px (arbitrage du 27/07) : la densité vient
   des rembourrages, des écarts et de la suppression des libellés sur
   2 lignes — jamais de la taille du texte. Les boutons d'action gardent
   32 px de haut (plancher tactile) : ils écrivent de la comptabilité.
   ============================================================ */
/* ---- liste des comptes : la LIGNE, 52 px → 34 px ---- */
.cpt-l{display:flex;align-items:center;gap:8px;padding:5px 9px;margin-bottom:3px;cursor:pointer;}
.cpt-i{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:12px;}
.cpt-i svg{width:14px;height:14px;}
.cpt-n{flex:1;min-width:0;font-weight:700;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpt-s{flex:none;font-family:var(--ff-display);font-weight:800;font-size:13px;}
.cpt-c{flex:none;color:var(--text-muted);display:flex;}
.cpt-c svg{width:14px;height:14px;}

/* ---- écritures : UN rectangle par personne ---- */
.tx-grp{padding:4px 6px;margin-bottom:5px;}
/* En-tête PERSONNE — n'apparaît qu'à partir de 2 écritures (sinon il répéterait la ligne). */
.tx-per{display:flex;align-items:baseline;gap:7px;padding:3px 4px 4px;border-bottom:1px solid var(--border-soft,var(--border));margin-bottom:2px;}
.tx-per .n{flex:1;min-width:0;font-weight:800;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tx-per .c{flex:none;font-size:12px;color:var(--text-muted);}
.tx-per .m{flex:none;font-family:var(--ff-display);font-weight:800;font-size:13px;color:var(--accent);}
/* Une écriture = UNE ligne : libellé + montant + actions, plus jamais de bloc de boutons en dessous. */
.tx-l{display:flex;align-items:center;gap:7px;padding:3px 4px;}
.tx-l + .tx-l{border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);}
.tx-txt{flex:1;min-width:0;}
.tx-txt .a{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;}
.tx-txt .b{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25;}
.tx-m{flex:none;font-family:var(--ff-display);font-weight:800;font-size:13px;color:var(--accent);white-space:nowrap;}
.tx-act{flex:none;display:flex;gap:4px;}
/* Le bouton : 32 px de HAUT (plancher tactile), mais tenu au plus court en LARGEUR. */
.tx-b{min-height:32px;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:0 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-2);font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;}
.tx-b svg{width:14px;height:14px;}
.tx-b.ok{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  background:color-mix(in srgb,var(--accent) 16%,var(--surface-2));color:var(--accent);}
.tx-b.no{border-color:color-mix(in srgb,var(--error) 45%,var(--border));color:var(--error);padding:0 10px;}