/*
 * RIBAMBELLE — FEUILLE DE STYLE
 * -----------------------------
 * Tout l'habillage de l'application, d'après la planche « Maquette visuelle/Charte graphique.jpg » :
 * des surfaces douces, tantôt en RELIEF (elles semblent posées sur la page), tantôt en CREUX
 * (elles semblent enfoncées), dans des tons crème, avec un bleu canard profond pour ce qui compte.
 *
 * Sommaire :
 *   1. Réglages communs : couleurs (clair et sombre), reliefs, arrondis, hauteurs, tailles de texte
 *   2. Éléments de base : boutons, champs, interrupteurs, cases, pastilles, étiquettes
 *   3. Volet de saisie, messages, calendrier
 *   4. Accueil, en-tête et onglets
 *   5. Tableaux (Présence, Intendance, Activités)
 *   6. Couchage
 *   7. Pied de page, événement archivé, écrans larges, impression
 *
 * Le langage des couleurs :
 *   bleu canard (--brand) = l'action, ce qui est coché, ce qui est complet, ce qu'on peut toucher
 *   ocre (--warn)         = il manque quelque chose
 *   gris (--muted)        = un texte secondaire, qui ne réagit pas au toucher
 *
 * Les règles validées lors de l'audit de la charte (13 novembre 2026) :
 *   - 7 tailles de texte et 4 graisses (400, 600, 700, 750), voir --fs-… ;
 *   - 3 hauteurs de boutons : 36 px (petits), 44 px (standard), 56 px (fiches de l'en-tête) ;
 *   - arrondis : 8 px (petites cases), 12 px (champs, cases à remplir), 16 px (fiches, cartes,
 *     onglets), pilule pour les boutons à texte ; 24 px pour la goulotte des onglets et pour les volets ;
 *   - icônes de 16 px dans les petits boutons et à côté d'un petit texte, 20 px ailleurs, 12 px dans les pastilles ;
 *   - un seul style de petites capitales (--fs-label) ;
 *   - au survol, un texte qu'on peut toucher passe en bleu canard ; s'il l'est déjà, il fonce d'un ton
 *     (--brand-deep) ; jamais de soulignement ni de fond ;
 *   - tout élément en relief s'enfonce quand on appuie, avec la même courte animation ;
 *   - un bouton inactif est à 40 % ;
 *   - espacements (marges, écarts) en multiples de 4 px : 4, 8, 12, 16, 20, 24…
 */

/* ---------- 1. Réglages communs ---------- */

/* La police Inter, hébergée avec le site (assets/fonts) : le même texte sur tous les appareils.
   Un seul fichier contient toutes les graisses, de la plus fine à la plus grasse. Licence : assets/fonts/OFL.txt */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f0e7de;            /* le fond de la page */
  --surface: #f3ebe0;       /* une surface en relief */
  --hollow: #e7dccd;        /* une surface en creux */
  --night: rgb(110 84 50 / 0.13);   /* le voile posé sur les colonnes de nuit, en mode « produit » */
  --ink: #1f1c17;           /* le texte */
  --muted: #685f53;         /* le texte secondaire (assez foncé pour se lire sans effort) */
  --line: rgb(96 78 48 / 0.14);
  --brand: #064b50;         /* bleu canard */
  --brand-deep: #022a2d;    /* le même, d'un ton plus profond : un texte déjà bleu canard, au survol */
  --brand-soft: #d5e3df;
  --on-brand: #f6f1e8;
  --warn: #9c5a1c;          /* ocre : « il manque quelque chose » */
  --warn-bg: #f4dfc4;
  --danger: #a3352b;
  /* Les ombres qui font le relief : une claire en haut à gauche, une brune en bas à droite. */
  --light: rgb(255 252 246 / 0.95);
  --shade: rgb(168 146 110 / 0.42);
  --shade-strong: rgb(118 94 58 / 0.6);   /* l'ombre des éléments bleu canard, plus foncée */
  --raise: 6px 6px 14px var(--shade), -6px -6px 14px var(--light);
  --raise-sm: 3px 3px 7px var(--shade), -3px -3px 7px var(--light);
  --sink: inset 3px 3px 6px var(--shade), inset -3px -3px 6px var(--light);
  --sink-sm: inset 2px 2px 4px var(--shade), inset -2px -2px 4px var(--light);
  /* Un élément bleu canard en relief (bouton principal, case cochée, prénom ou lieu choisi) :
     une face unie, et autour les mêmes dégradés qu'un bouton en relief, en plus marqué.
     Les petits éléments ont une ombre plus courte, mais aussi foncée. */
  --raise-brand: 3px 3px 7px var(--shade-strong), -3px -3px 7px var(--light);
  --raise-brand-sm: 2px 2px 4px var(--shade-strong), -2px -2px 4px var(--light);
  /* Le même élément enfoncé (appuyé, ou interrupteur allumé) : des ombres intérieures sombres seulement,
     car une ombre claire sur un fond coloré fausserait la profondeur. */
  --sink-brand: inset 2px 2px 5px rgb(0 0 0 / 0.38), inset -1px -1px 3px rgb(0 0 0 / 0.12);
  /* Le halo posé par-dessus ce qui concerne une personne survolée (voir main.js), en mode « produit ». */
  --halo: rgb(6 75 80 / 0.22);
  --halo-blend: multiply;
  /* Arrondis */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-rail: 24px; --r-sheet: 24px; --r-pill: 99px;
  /* Hauteurs de boutons */
  --h-sm: 36px; --h-md: 44px; --h-lg: 56px;
  /* Les 7 tailles de texte */
  --fs-title: clamp(1.75rem, 6.4vw, 2.5rem);   /* titre de page : 28 à 40 px, graisse 750 */
  --fs-h: 1.125rem;                            /* titre : 18 px, 700 */
  --fs-body: 1rem;                             /* texte : 16 px, 400 ou 600 */
  --fs-btn: 0.9375rem;                         /* bouton : 15 px, 600 */
  --fs-sm: 0.875rem;                           /* petit : 14 px, 400 ou 600 */
  --fs-xs: 0.78125rem;                         /* détail : 12,5 px, 400 ou 700 */
  --fs-label: 0.6875rem;                       /* étiquette : 11 px, 700, capitales */
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Mode sombre : mêmes reliefs, dans des tons de nuit. Choisi par l'interrupteur du pied de page. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c2425;
  --surface: #212b2c;
  --hollow: #182021;
  --night: rgb(0 0 0 / 0.3);
  --ink: #ece5d8;
  --muted: #98a19c;
  --line: rgb(255 255 255 / 0.09);
  --brand: #63bdb6;
  --brand-deep: #a3e0db;
  --brand-soft: #24403f;
  --on-brand: #0d2526;
  --warn: #e7a968;
  --warn-bg: #3d2f1f;
  --danger: #ef8a7e;
  --light: rgb(255 255 255 / 0.055);
  --shade: rgb(0 0 0 / 0.5);
  --shade-strong: rgb(0 0 0 / 0.7);
  --halo: rgb(99 189 182 / 0.16);
  --halo-blend: screen;
}

*, *::before, *::after { box-sizing: border-box; }
/* « manipulation » : un double toucher ne zoome pas la page (on peut ainsi toucher deux fois le même jour). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; touch-action: manipulation; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--ink);
  font: var(--fs-body)/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#app { max-width: 1080px; margin: 0 auto; padding: 0 16px 40px; }
.loading { text-align: center; color: var(--muted); padding: 30vh 0; }

/* ---------- 2. Éléments de base ---------- */

/* Petites capitales : le seul style d'étiquette (rubriques, intitulés de repas, jours du calendrier). */
.eyebrow, .grid__kind, .cal__grid > span {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.hint { font-size: var(--fs-sm); color: var(--muted); }

/* Bouton « pilule » en relief ; il s'enfonce quand on appuie. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h-md); padding: 0 20px; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--raise-sm);
  font-size: var(--fs-btn); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: box-shadow 0.15s;
}
.btn:active { box-shadow: var(--sink-sm); }
.btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--raise-brand); }
.btn--primary:active { box-shadow: var(--sink-brand); }
.btn--block { display: flex; width: 100%; }
/* Action secondaire d'un volet (« Pas besoin à ce repas », « Libérer ce lit »…) : en relief, texte gris. */
.btn--secondary { color: var(--muted); }
.btn--danger { color: var(--danger); }
.btn[disabled] { opacity: 0.4; cursor: default; }

/* Bouton rond ne contenant qu'une icône. */
.iconbtn {
  flex: none; display: inline-grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: 50%;
  background: var(--surface); box-shadow: var(--raise-sm); color: var(--brand);
  transition: box-shadow 0.15s;
}
.iconbtn:active { box-shadow: var(--sink-sm); }
.iconbtn[disabled] { opacity: 0.4; pointer-events: none; }
.iconbtn--small { width: var(--h-sm); height: var(--h-sm); }
.iconbtn--small .icon { width: 16px; height: 16px; }

/* Champ de saisie : en creux ; un halo bleu canard quand on écrit dedans. */
.input {
  width: 100%; min-height: var(--h-md); padding: 0 12px; border: 0; border-radius: var(--r-md);
  background: var(--hollow); box-shadow: var(--sink-sm); outline: none;
}
.input:focus-visible { outline: none; }
.input::placeholder { color: var(--muted); opacity: 0.8; }
.input:focus { box-shadow: var(--sink-sm), 0 0 0 2px var(--brand), 0 0 0 6px color-mix(in srgb, var(--brand) 16%, transparent); }
.field { display: grid; gap: 8px; }
.field > span:not(.clearable) { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
/* Un champ avec sa croix pour le vider (champ « Qui ? »). */
.clearable { position: relative; display: block; }
.clearable .input { padding-right: 44px; }
.clearable__btn {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); border-radius: 50%; color: var(--muted);
}
.clearable__btn:hover { color: var(--brand); }
.clearable__btn .icon { width: 16px; height: 16px; }

/* Interrupteur : une vraie case à cocher, dessinée comme un bouton à glissière. */
.switch { display: flex; align-items: center; gap: 12px; min-height: var(--h-md); cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track { flex: none; position: relative; width: 52px; height: 30px; border-radius: var(--r-pill); background: var(--hollow); box-shadow: var(--sink-sm); transition: background 0.2s; }
.switch__track::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); box-shadow: 2px 2px 5px var(--shade); transition: transform 0.2s;
}
.switch input:checked + .switch__track { background: var(--brand); box-shadow: var(--sink-brand); }
.switch input:checked + .switch__track::after { transform: translateX(22px); box-shadow: 2px 2px 5px rgb(0 0 0 / 0.35); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch--right { justify-content: space-between; }
/* Une liste d'interrupteurs (repas d'une ligne d'intendance, repas d'un jour) : sur deux colonnes. */
.switches { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.switches .switch, .switches .kindrow { font-size: var(--fs-sm); line-height: 1.2; }

/* Case à cocher des tableaux : en creux quand elle est vide, bleu canard et en relief une fois cochée. */
.box {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--hollow); box-shadow: var(--sink-sm); color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.box .icon { width: 16px; height: 16px; stroke-width: 3; }
.box.is-on { background: var(--brand); color: var(--on-brand); box-shadow: var(--raise-brand-sm); }
.box:active { transform: scale(0.9); }

/* Pastille : le nombre d'éléments manquants (ocre), une coche (bleu canard), ou un compte d'inscrits (bleu clair). */
.pastille {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--warn-bg); color: var(--warn); font: 700 var(--fs-label)/1 var(--sans); font-style: normal;
  box-shadow: 0 0 0 2px var(--bg);
}
.pastille--ok { background: var(--brand); color: var(--on-brand); padding: 0; }
.pastille--ok .icon { width: 12px; height: 12px; stroke-width: 3.2; }
.pastille--count { background: var(--brand-soft); color: var(--brand); box-shadow: none; vertical-align: middle; }

/* Étiquettes de prénoms à toucher : à choisir = en creux ; choisie = bleu canard, en relief. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: var(--h-sm); padding: 0 16px; border-radius: var(--r-pill);
  background: var(--hollow); box-shadow: var(--sink-sm); font-size: var(--fs-sm); font-weight: 600;
}
.chip:not(.is-on):hover { color: var(--brand); }
.chip.is-on { background: var(--brand); color: var(--on-brand); box-shadow: var(--raise-brand-sm); }

/* Carte en relief qui porte chaque onglet. */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--raise); }
.blank { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 44px 20px; color: var(--muted); }
.blank b { color: var(--ink); font-size: var(--fs-h); font-weight: 700; }
.note { margin: 16px 4px 0; font-size: var(--fs-sm); color: var(--muted); }
.note b { color: var(--warn); font-weight: 600; }

/* Boutons pour AJOUTER quelque chose : toujours en relief, texte bleu canard. */
.addbtn {
  display: inline-grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: 50%;
  background: var(--surface); box-shadow: var(--raise-sm); color: var(--brand);
  transition: box-shadow 0.15s;
}
.addbtn:active { box-shadow: var(--sink-sm); }
.addbtn--wide { display: inline-flex; gap: 8px; width: auto; padding: 0 20px 0 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
/* Dans un volet, un bouton d'ajout prend toute la largeur, comme les autres boutons. */
.sheet__panel .addbtn--wide { display: flex; width: 100%; justify-content: center; }

/* ---------- 3. Volet de saisie, messages, calendrier ---------- */

/* Le volet glisse depuis le bas sur téléphone ; c'est une fenêtre centrée sur grand écran. */
.sheet {
  width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; padding: 0; border: 0;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--surface); color: var(--ink);
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.25); overflow: auto;
}
.sheet::backdrop { background: rgb(40 32 20 / 0.4); backdrop-filter: blur(3px); }
.sheet[open] { animation: rise 0.22s ease-out; }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.sheet__panel { position: relative; display: grid; gap: 16px; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); outline: none; }
.sheet__panel h2 { font-size: var(--fs-h); font-weight: 700; padding-right: 52px; }
.sheet__close { position: absolute; top: 16px; right: 16px; }
.sheet__lead { color: var(--muted); margin-top: -8px; }

.form { display: grid; gap: 16px; }
.form__error { color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.form__row { display: flex; gap: 12px; }
.form__row > * { flex: 1; min-width: 0; }
/* Les actions secondaires d'un volet, l'une sous l'autre, chacune sur toute la largeur. */
.form__more { display: grid; gap: 12px; }
.form__more > .btn { width: 100%; }

/* Compteur « − 2 + » (nombre de lits d'une chambre). */
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper output { min-width: 28px; text-align: center; font-weight: 700; font-size: var(--fs-h); }
.stepper .iconbtn { width: var(--h-sm); height: var(--h-sm); }
.stepper .iconbtn .icon { width: 16px; height: 16px; }

/* Liste de choix (les lieux enregistrés) : à choisir = en creux ; choisi = bleu canard, en relief. */
.options { display: grid; gap: 8px; }
.option__main {
  min-width: 0; display: grid; min-height: var(--h-lg); align-content: center; text-align: left; padding: 8px 16px;
  border-radius: var(--r-lg); background: var(--hollow); box-shadow: var(--sink-sm);
}
.option__main b { font-weight: 600; }
.option__main small { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.option__main.is-on { background: var(--brand); color: var(--on-brand); box-shadow: var(--raise-brand); }
.option__main.is-on small { color: inherit; opacity: 0.8; }
/* Une liste d'actions (ex. choix de l'application de cartes) : chaque lien est un bouton en relief. */
.options a.option__main { text-decoration: none; background: var(--surface); box-shadow: var(--raise-sm); }
.options a.option__main:active { box-shadow: var(--sink-sm); }

/* Messages éphémères : de petites cartes crème en relief, comme les lignes d'une liste de la charte,
   avec éventuellement « Annuler » en bleu canard. */
.toasts {
  position: fixed; inset: auto 0 calc(20px + env(safe-area-inset-bottom)) 0; margin: 0 auto; padding: 0 16px; border: 0; background: none;
  display: grid; gap: 8px; justify-items: center; width: min(460px, 100%); overflow: visible;
}
.toast {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: var(--h-md); padding: 4px 8px 4px 16px; border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--raise-sm), 0 10px 26px rgb(0 0 0 / 0.14); animation: rise 0.2s ease-out;
}
.toast > span { flex: 1; }
.toast--error { color: var(--danger); }
.toast__action { flex: none; min-height: var(--h-sm); padding: 0 12px; border-radius: var(--r-pill); color: var(--brand); font-weight: 600; }
.toast__action:hover { color: var(--brand-deep); }
/* La barre qui se vide pendant les 8 secondes où l'on peut annuler. */
.toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--brand); opacity: 0.6; transform-origin: left; animation: drain linear forwards; }
@keyframes drain { to { transform: scaleX(0); } }

/* Calendrier : on touche le premier jour, puis le dernier (deux fois le même pour une seule journée). */
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal__head b { text-transform: capitalize; font-size: var(--fs-h); font-weight: 700; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; text-align: center; }
.cal__grid > span { padding: 8px 0; }
.cal__day { height: var(--h-md); font-weight: 600; border-radius: 0; }
.cal__day:not(.is-start, .is-end):hover { color: var(--brand); }
/* Aujourd'hui : un petit point sous le chiffre (sur le bleu canard du début ou de la fin, il passe en crème). */
.cal__day.is-today { position: relative; }
.cal__day.is-today::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--brand);
}
.cal__day.is-today:is(.is-start, .is-end)::after { background: var(--on-brand); }
.cal__day.is-in { background: var(--brand-soft); }
.cal__day.is-start, .cal__day.is-end { background: var(--brand); color: var(--on-brand); box-shadow: var(--raise-brand-sm); }
.cal__day.is-start { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.cal__day.is-end { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.cal__day.is-start.is-end { border-radius: var(--r-pill); }
/* Le dernier jour touche la bande de la période sur sa gauche : pas de reflet clair de ce côté. */
.cal__day.is-end:not(.is-start) { box-shadow: 2px 2px 4px var(--shade-strong); }
.cal__sum { text-align: center; font-weight: 600; min-height: 1.5em; }

/* Listes des volets : les inscrits d'un repas, ceux qui apportent un aliment, les éléments à prévoir. */
.namelist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.namelist li { padding: 8px 16px; border-radius: var(--r-pill); background: var(--brand-soft); font-size: var(--fs-sm); font-weight: 600; }
.helpers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.helpers li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--raise-sm); }
.helpers li > span { display: grid; min-width: 0; }
.helpers b { font-weight: 600; }
.helpers small { color: var(--muted); font-size: var(--fs-xs); }
.itemlist { display: grid; gap: 8px; }
.itemlist:empty { display: none; }
.itemrow { display: flex; align-items: center; gap: 8px; }

/* Volet d'un jour : un intitulé (à toucher pour le renommer) et son interrupteur. */
.kindrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--h-md); }
.kindrow__name { display: inline-flex; align-items: center; min-height: var(--h-sm); text-align: left; }
.kindrow__name:hover { color: var(--brand); }
.kindrow__input { flex: 1; min-width: 0; min-height: var(--h-sm); padding: 0 12px; }

/* ---------- 4. Accueil, en-tête et onglets ---------- */

/* Page d'accueil : le logo, le titre, puis une carte en relief par événement. */
.home { display: flex; align-items: center; gap: 16px; padding: 28px 4px 24px; }
.home img { border-radius: var(--r-md); }
.home h1 { font-size: var(--fs-title); font-weight: 750; line-height: 1.12; letter-spacing: -0.02em; }
.evcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.evcard { display: flex; align-items: flex-start; transition: box-shadow 0.15s; }
.evcard:has(> .evcard__main:active) { box-shadow: var(--sink); }
/* Un événement terminé (archivé) : sa carte passe en nuances de gris. */
.evcard.is-archived { filter: grayscale(1); }
.evcard__main { flex: 1; min-width: 0; display: grid; gap: 8px; padding: 16px 8px 16px 20px; text-align: left; border-radius: var(--r-lg); }
.evcard__main b { font-size: var(--fs-h); font-weight: 700; line-height: 1.2; }
.evcard__main:hover b { color: var(--brand); }
.evcard__main span { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: var(--fs-sm); }
.evcard__main .icon { width: 16px; height: 16px; color: var(--brand); }
.evcard__main .evcard__tag { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.evcard__delete { margin: 12px 12px 0 0; color: var(--muted); }
.evcard__delete:hover { color: var(--danger); }

.head { display: grid; gap: 16px; padding: 28px 4px 16px; }
/* Le nom de l'événement est un champ déguisé en titre : on clique, on écrit. */
.head__title {
  width: 100%; margin: 0 -12px; padding: 4px 12px; border: 0; border-radius: var(--r-md); background: transparent; resize: none; overflow: hidden;
  font-size: var(--fs-title); font-weight: 750; line-height: 1.12; letter-spacing: -0.02em; outline: none;
  transition: background 0.15s, box-shadow 0.15s; field-sizing: content;
}
.head__title:not([readonly]):hover { background: color-mix(in srgb, var(--hollow) 55%, transparent); }
.head__title:not([readonly]):focus { background: var(--hollow); box-shadow: var(--sink-sm); }
.head__rows { display: grid; gap: 12px; }
.head__row { display: flex; align-items: center; gap: 12px; }
/* Une « fiche » cliquable : les dates, le lieu ; et les boutons du pied de page. */
.fact {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: var(--h-lg); padding: 8px 16px;
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--raise-sm); text-align: left;
  transition: box-shadow 0.15s;
}
.fact:active { box-shadow: var(--sink-sm); }
.fact .icon { color: var(--brand); }
.fact > span { display: grid; min-width: 0; line-height: 1.25; }
.fact b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact small { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact.is-empty b { color: var(--muted); font-weight: 400; }

/* Événement terminé : un bandeau en creux sous l'en-tête. */
.banner { display: grid; gap: 4px; margin: 0 4px 16px; padding: 12px 16px; border-radius: var(--r-md); background: var(--hollow); box-shadow: var(--sink-sm); font-size: var(--fs-sm); color: var(--muted); }
.banner b { color: var(--ink); font-weight: 600; }

/* Les quatre onglets : un rail en creux, l'onglet affiché en relief. Ils restent visibles en haut de l'écran.
   L'onglet a le même arrondi que les autres boutons et que le tableau (16 px) ; le rail, 8 px plus large
   sur les côtés, a un arrondi de 16 + 8 = 24 px : les deux courbes sont concentriques.
   Le rail laisse 8 px au-dessus de l'onglet et 4 px au-dessous : l'ombre portée vers le bas
   faisait paraître l'onglet trop haut quand les deux espaces étaient égaux. */
.tabsbar { position: sticky; top: 0; z-index: 20; margin: 0 -16px 16px; padding: 8px 16px; background: var(--bg); }
.tabs { position: relative; display: flex; gap: 4px; padding: 8px 8px 4px; border-radius: var(--r-rail); background: var(--hollow); box-shadow: var(--sink-sm); }
/* Le curseur en relief, sous l'onglet choisi : il glisse d'un onglet à l'autre (placé par main.js). */
.glider {
  position: absolute; top: 0; left: 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--raise-sm);
  pointer-events: none; transition: transform 0.22s cubic-bezier(0.3, 0.8, 0.3, 1), width 0.22s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.tabs__btn {
  position: relative; z-index: 1; flex: 1; min-width: 0; min-height: var(--h-md); padding: 0 4px; border-radius: var(--r-lg);
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted); transition: color 0.15s;
}
.tabs__btn:hover, .tabs__btn.is-active { color: var(--brand); }
.tabs__btn .pastille { position: absolute; top: -7px; right: 2px; box-shadow: 0 0 0 2px var(--hollow); }

/* ---------- 5. Tableaux (Présence, Intendance, Activités) ---------- */

/* Le tableau défile dans sa carte, dans les deux sens : ses deux premières lignes (les jours, puis les
   repas ou les activités) et sa première colonne restent visibles. Sa hauteur est celle de l'écran,
   moins la barre d'onglets. Pas de barre de défilement : un fondu à droite signale les colonnes cachées,
   et la première colonne prend une ombre dès qu'on a fait défiler (classes posées par main.js). */
.gridwrap { overflow: auto; max-height: calc(100dvh - 92px); border-radius: var(--r-lg); scrollbar-width: none; }
.gridwrap::-webkit-scrollbar { display: none; }
.gridwrap.can-right { -webkit-mask-image: linear-gradient(to left, transparent, #000 40px); mask-image: linear-gradient(to left, transparent, #000 40px); }
.gridwrap.can-left .grid__corner, .gridwrap.can-left .grid tbody th { box-shadow: 1px 0 0 var(--line), 10px 0 12px -10px var(--shade); }
.grid { border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); min-width: 100%; }
.grid th, .grid td { position: relative; padding: 0; height: 48px; min-width: 50px; text-align: center; font-weight: 400; border-bottom: 1px solid var(--line); background-clip: padding-box; }
.grid tbody tr:last-child > * { border-bottom: 0; }

/* Les deux premières lignes restent en haut ; la première colonne (prénoms, aliments) reste à gauche. */
.grid thead th { position: sticky; top: 0; z-index: 3; height: 36px; background: var(--surface); }
.grid thead tr + tr th { top: 36px; }
.grid--acts thead tr:first-child th { height: var(--h-lg); }
.grid--acts thead tr + tr th { top: var(--h-lg); }
.grid__corner, .grid tbody th {
  position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left;
  min-width: 124px; max-width: 150px; padding: 0 8px 0 16px; box-shadow: 1px 0 0 var(--line);
}
.grid__corner { z-index: 4 !important; vertical-align: bottom; padding-bottom: 8px !important; }

/* Un jour : en bleu canard quand on peut le toucher (Présence : choisir ses repas), en gris sinon. */
.grid__day { border-left: 1px solid var(--line); }
.daybtn { width: 100%; height: var(--h-sm); padding: 0 8px; font-weight: 700; font-size: var(--fs-xs); text-transform: capitalize; color: var(--brand); white-space: nowrap; }
.daybtn:hover { color: var(--brand-deep); }
.daylabel { font-weight: 700; font-size: var(--fs-xs); text-transform: capitalize; color: var(--muted); white-space: nowrap; }
/* Un repas : un toucher montre les inscrits (bleu canard). En Intendance, ocre s'il lui manque quelque chose. */
.grid__kind { color: var(--brand); line-height: 1.15; padding: 0 4px !important; }
.kindbtn { width: 100%; min-height: var(--h-sm); padding: 0 4px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; line-height: 1.15; }
.grid__kind:not(.is-missing) .kindbtn:hover { color: var(--brand-deep); }
.grid__kind.is-missing { color: var(--warn); background: color-mix(in srgb, var(--warn-bg) 55%, var(--surface)); }
.grid__kind.is-complete { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.is-daystart { border-left: 1px solid var(--line); }
/* Les colonnes de nuit : un voile posé par-dessus, en mode « produit », comme le halo (cases comprises) ;
   il descend d'un pixel pour assombrir aussi le trait horizontal sous chaque case. */
.grid .is-night::before {
  content: ""; position: absolute; inset: 0 0 -1px; z-index: 1; pointer-events: none;
  background: var(--night); mix-blend-mode: multiply;
}
/* Dans les en-têtes, les intitulés passent au-dessus du voile, pour rester nets. */
.grid thead .is-night > * { position: relative; z-index: 2; }

/* Lignes des participants (Présence, Activités) : plus basses, pour en voir davantage ; le prénom et
   la case restent faciles à toucher (36 et 28 px). */
.grid tbody tr[data-g] > * { height: 40px; }
.grid tbody tr[data-g] .rowbtn { min-height: var(--h-sm); }
/* Lignes « Présents » et « Inscrits » : le compte de chaque colonne, et le total dans la première cellule. */
.grid__totals > * { height: 40px !important; font-size: var(--fs-xs); font-weight: 700 !important; color: var(--muted); background: color-mix(in srgb, var(--hollow) 45%, var(--surface)); }
.totals { display: inline-flex; align-items: center; gap: 8px; }

/* Nom cliquable dans la première colonne. */
.rowbtn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--h-md); text-align: left; font-weight: 600; }
.rowbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowbtn:hover span { color: var(--brand); }
.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.grid td > .box { vertical-align: middle; }

/* La colonne du « + » (Activités). */
.grid__addcol { min-width: 60px !important; padding: 8px !important; border-left: 1px solid var(--line); vertical-align: middle; }
/* Sous un tableau : le bouton reste centré et immobile, même quand on fait défiler le tableau. */
.cardfoot { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--line); }
.cardfoot--bare { border-top: 0; padding: 16px 0 0; }

/* Dernière ligne : le champ « Ajouter… », à remplir, donc en creux. */
.grid__add th { padding: 4px 8px !important; }
.grid__add .input { min-height: var(--h-sm); padding: 0 12px; font-size: var(--fs-sm); }

/* Intendance : un bouton par personne qui apporte l'aliment (prénom et détails), puis, s'il manque
   encore quelqu'un, la case en creux. La ligne s'agrandit autant qu'il faut. */
.grid--cells th, .grid--cells td { min-width: 112px; }
.grid--cells .grid__day { text-align: left; padding-left: 16px; }
/* Le nom des repas tient sur une ligne : la colonne s'élargit s'il le faut. */
.grid--cells .grid__kind { white-space: nowrap; padding: 0 8px !important; }
.grid--cells td { padding: 4px !important; height: 56px; vertical-align: middle; }
.cellstack { display: grid; gap: 4px; }
.cellchip {
  position: relative; display: grid; align-content: center; width: 100%; min-height: var(--h-md); padding: 4px 12px; border-radius: var(--r-md);
  text-align: left; line-height: 1.2; overflow: hidden; transition: box-shadow 0.15s;
}
.cellchip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cellchip small { font-size: var(--fs-xs); color: var(--muted); }
/* Quelqu'un s'en occupe : la case est remplie, donc en relief. */
.cellchip.is-filled { background: var(--surface); box-shadow: var(--raise-sm); }
.cellchip.is-filled:active { box-shadow: var(--sink-sm); }
/* Attendu, mais personne encore : la case est à remplir, donc en creux, avec le nom de l'aliment. */
.cellchip.is-empty { background: var(--hollow); box-shadow: var(--sink-sm); color: var(--muted); }
.cellchip.is-empty:hover { color: var(--brand); }
/* Pas prévu à ce repas : un « + » discret permet de l'ajouter. */
.cellchip.is-off { justify-items: center; color: var(--muted); opacity: 0.35; }
.cellchip.is-off:hover, .cellchip.is-off:focus-visible { opacity: 1; background: var(--hollow); }

/* Activités : titre et date en tête de colonne ; dessous, ce qu'il faut prévoir. */
.grid--acts th, .grid--acts td { min-width: 108px; }
.actbtn { display: grid; align-content: center; gap: 4px; width: 100%; min-height: var(--h-lg); padding: 8px; line-height: 1.2; }
.actbtn b { font-weight: 600; color: var(--brand); }
.actbtn:hover b { color: var(--brand-deep); }
.actbtn small { color: var(--muted); font-size: var(--fs-xs); }
.grid__prep { padding: 4px 8px 8px !important; max-width: 170px; vertical-align: top; border-left: 1px solid var(--line); }
/* Un élément « à prévoir » : sa case (vide, ou l'initiale de celui qui l'apporte) et son intitulé. */
.prep { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--h-sm); padding: 4px 0; border-radius: var(--r-sm); text-align: left; font-size: var(--fs-xs); line-height: 1.2; }
.prep .box { flex: none; width: 24px; height: 24px; font-size: var(--fs-xs); font-weight: 700; }
.prep:hover > span:last-child { color: var(--brand); }
.grid--acts .grid__corner { vertical-align: middle; }

/* ---------- 6. Couchage ---------- */

/* Choix de la nuit affichée : le rail des onglets, avec son curseur qui glisse, en plus petit (boutons de 36 px
   au lieu de 44) : c'est un sous-menu, il reste en retrait des onglets. */
.nights { position: relative; display: flex; gap: 4px; padding: 8px 8px 4px; margin: 0 0 16px; border-radius: var(--r-rail); background: var(--hollow); box-shadow: var(--sink-sm); overflow-x: auto; scrollbar-width: none; }
.nights__btn { position: relative; z-index: 1; flex: 1; min-height: var(--h-sm); padding: 0 16px; border-radius: var(--r-lg); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; text-transform: capitalize; transition: color 0.15s; }
.nights__btn:hover, .nights__btn.is-active { color: var(--brand); }

/* Une chambre : une tuile en relief, son nom en titre (bleu canard : on le touche pour la modifier), ses lits dessous. */
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.room { display: grid; align-content: start; gap: 16px; padding: 16px; }
.room__name { justify-self: start; display: inline-flex; align-items: center; min-height: var(--h-sm); font-size: var(--fs-h); font-weight: 700; color: var(--brand); text-align: left; }
.room__name:hover { color: var(--brand-deep); }
.room__beds { display: grid; gap: 12px; }

/* Un lit : un emplacement en creux, une place (lit simple ou enfant) ou deux côte à côte (lit double).
   Place libre : reste en creux ; place occupée : le prénom, en relief. */
.bed { display: grid; gap: 4px; }
.bed__spots { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--hollow); box-shadow: var(--sink-sm); }
.spot { position: relative; flex: 1; min-width: 0; min-height: var(--h-md); padding: 0 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: box-shadow 0.15s; }
.spot.is-free { color: var(--muted); font-weight: 400; }
.spot.is-free + .spot.is-free { box-shadow: -4px 0 0 -3px var(--line); }
.spot.is-free:hover { color: var(--brand); }
.spot.is-taken { background: var(--surface); box-shadow: var(--raise-sm); }
.spot.is-taken:active { box-shadow: var(--sink-sm); }
.bed__meta { padding-left: 4px; font-size: var(--fs-xs); color: var(--muted); }
.bed__meta b { font-weight: 700; }
.bed__meta b.is-no { color: var(--warn); }

/* Formulaire d'une chambre : un interrupteur « draps fournis » par lit. */
.bedlist { display: grid; }
.bedlist .eyebrow { margin-bottom: 4px; }
.bedlist__sheets { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- 7. Pied de page, événement archivé, écrans larges, impression ---------- */

/* Deux lignes : un grand bouton (réinitialiser l'onglet ; tous les événements) et, à sa droite, trois
   petits boutons ronds (mode, Tricount, partager ; imprimer, dupliquer, supprimer). */
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; max-width: 560px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--line); }
.foot--home { display: flex; justify-content: center; max-width: none; }
/* Boutons du pied de page : même taille de texte que les onglets. */
.fact--small { min-height: var(--h-md); padding: 4px 16px; font-size: var(--fs-sm); }
.foot .fact b { white-space: normal; line-height: 1.2; }  /* sur téléphone, l'intitulé passe sur deux lignes plutôt que d'être coupé */
.iconbtn--danger { color: var(--danger); }

/* Événement terminé (archivé) : son contenu passe en nuances de gris. Tous les boutons restent à leur
   place ; ceux qui modifieraient quelque chose n'ont simplement plus d'effet (voir main.js). */
/* Absolument tout passe en gris, fond compris ; seuls les boutons du pied de page qui servent encore
   (revenir, imprimer, Tricount, dupliquer, supprimer : data-live) gardent leurs couleurs. */
body.is-archived { background: #e8e8e8; }
:root[data-theme="dark"] body.is-archived { background: #222; }
#app.is-archived > :not(.foot), #app.is-archived > .foot > :not([data-live]) { filter: grayscale(1); }
#app.is-archived > .foot { border-top-color: rgb(0 0 0 / 0.12); }
.is-archived :is(.box, .cellchip, .spot, .rowbtn, .prep, .actbtn, .daybtn, .room__name, .addbtn,
  [data-action="edit-dates"], [data-action="edit-place"], [data-action="reset-tab"]) { cursor: default; }

/* Réordonner en glissant (drag.js) : l'intitulé sert de poignée ; l'élément saisi se soulève. */
[data-drag-handle] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
tr.is-dragging > * { background: var(--brand-soft) !important; }
.room.is-dragging { box-shadow: var(--raise), 0 12px 28px rgb(0 0 0 / 0.18); outline: 2px solid var(--brand); outline-offset: 2px; }

/* L'écran du code d'accès du site. */
.access { display: grid; justify-items: center; gap: 16px; max-width: 380px; margin: 16vh auto 0; padding: 32px 24px; text-align: center; }
.access img { border-radius: var(--r-md); }
.access h1 { font-size: var(--fs-h); font-weight: 700; }

@media (min-width: 680px) {
  #app { padding: 0 28px 56px; }
  .tabsbar { margin: 0 -28px 16px; padding: 8px 28px; }
  .head { padding-top: 44px; }
  .head__rows { grid-template-columns: 1fr 1fr; }
  .tabs__btn, .fact--small { font-size: var(--fs-btn); }
  .tabs__btn .pastille { position: static; margin-left: 8px; vertical-align: 2px; }
  /* Sur grand écran, le volet devient une fenêtre centrée. */
  .sheet { max-width: 460px; margin: auto; border-radius: var(--r-sheet); }
  .grid th, .grid td { min-width: 58px; }
  .grid__corner, .grid tbody th { min-width: 170px; max-width: 220px; }
}

/* Respect du réglage « réduire les animations » de l'appareil. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition: none !important; scroll-behavior: auto !important; }
}

/* La copie du tableau préparée pour l'impression (footer.js) : invisible à l'écran. */
.printout { display: none; }
.printout.is-measuring { display: block; position: absolute; top: 0; left: -99999px; visibility: hidden; }

/* Impression : l'onglet affiché, sur des pages A4 à l'horizontale, couleurs comprises. Le tableau est
   recopié page par page, avec autant de colonnes que chaque page peut en contenir (voir footer.js). */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tabsbar, .foot, .toasts, .banner, .grid__add, .grid__addcol, .cardfoot, .iconbtn { display: none !important; }
  body { background: #fff; }
  #app { max-width: none; padding: 0; }
  .head { padding-top: 0; }
  .card, .fact { box-shadow: none; }
  .gridwrap { overflow: visible; max-height: none; -webkit-mask-image: none !important; mask-image: none !important; }
  /* Sur papier, rien ne reste fixé ; mais chaque case garde « relative » : le voile des nuits (::before)
     se pose sur sa case, et non sur toute la page. Les décalages prévus pour fixer les en-têtes à l'écran
     sont annulés : sinon la seconde ligne d'en-tête descendrait sur la ligne « Présents ». */
  .grid th, .grid td, .grid thead th, .grid__corner, .grid tbody th { position: relative; top: auto !important; left: auto !important; }
  body.is-printing-table #app main { display: none; }
  .printout { display: block; }
  .printout__page + .printout__page { break-before: page; }
}