/* Design tokens — crèche « Les Fées Féliciennes » (handoff haute-fidélité) */
:root {
  /* Couleurs */
  --fond: #f4eee1;
  --surface: #fffdf7;
  --bord: #e7dfcd;
  --bord-2: #e9e1cf;
  --bord-3: #f0e9d9;
  --separateur: #f6f0e2;
  --encre: #2e2a23;
  /* Gris chauds assombris pour atteindre WCAG AA (>=4.5:1) sur la surface
     claire, tout en gardant la gradation d'origine. Les codes allergènes
     (--sec-4) sont une info de sécurité : ils doivent rester lisibles. */
  --sec-1: #6a6150;
  --sec-2: #6f6653;
  --sec-3: #746a57;
  --sec-4: #756b57;
  --sec-5: #756b57;
  --sec-6: #756b57;
  --marque: #6F8F6A;
  --marque-fonce: #465e42;
  --marque-fond: #eef2e7;
  --alerte: #C05B3C;
  --alerte-texte: #A84E33;
  --alerte-fond: #f7e8e0;
  --alerte-fond-2: #fbf1ea;
  /* Gris de RETRAIT des graphiques (F28). Ni un neutre de texte, ni la marque :
     un troisième rôle, celui du « reste » derrière la donnée qui compte.
     Mesuré : contraste 3,07:1 sur la surface — le seuil des éléments
     graphiques — et ΔE 8,9 face à l'alerte en deutéranopie. Le prendre plus
     clair passait sous 3:1, plus foncé tombait à ΔE 4,1. */
  --graph-retrait: #9a9080;
  --cuisine-entete: #f3efe2;
  --stat-fond: #f7f3e8;
  --pilule-bord: #d9d0bc;
  --box-bord: #c9bfa8;
  --zone-depot-bord: #cfc4a9;
  --zone-depot-fond: #fbf8ef;
  --barre-fond: #ece5d2;
  --sombre-texte-2: #b7ae99;

  /* Typographies */
  --serif: "Cormorant Garamond", "Georgia", serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rayons */
  --r-carte: 14px;
  --r-rangee: 10px;
  --r-zone: 12px;
  --r-box: 6px;
  --r-pilule: 999px;

  /* Ombres */
  --ombre-sticky: 0 10px 28px rgba(46, 42, 35, .28);
  --ombre-segment: 0 1px 4px rgba(46, 42, 35, .14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; margin: 0; }

a { color: inherit; }

button { font-family: inherit; cursor: pointer; }

.surtitre {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--sec-3);
  font-weight: 600;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-carte);
}
/* ⚠️ `.interieur` vit ICI, avec `.carte`, et non plus dans `admin.css` (F32).
   Il y était défini, mais trois écrans emploient le motif et tous ne chargent
   pas cette feuille : l'écran Comptes obtenait donc `padding: 0` et collait son
   contenu au bord de la carte, tandis que « Mon compte », qui charge
   `admin.css`, respirait correctement. Deux écrans partageant une feuille de
   style et ne se rendant pas pareil — la marge doit voyager avec la carte. */
.carte .interieur { padding: 18px; }

.pilule {
  border-radius: var(--r-pilule);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tabular { font-variant-numeric: tabular-nums; }

/* --- Logo de la crèche -----------------------------------------------------
   Il n'apparaît que là où LA CRÈCHE s'adresse à ses familles : connexion, écran
   parent, et en tête des feuilles imprimées qui circulent dans ses murs. Jamais
   sur les écrans de travail denses (vérification, récap à l'écran), où tout ce
   qui n'est pas de l'information concurrence l'information.

   Deux fichiers, deux emplois :

   `logo_creche.png` — le bloc complet, fée ET nom dans la typographie de la
   marque. Il va sur les écrans parents, où il REMPLACE la ligne de texte qui
   donnait le nom : juxtaposer leur fée et notre propre composition du nom
   reviendrait à reconstruire leur logo dans une autre police. Comme l'image
   porte le nom, elle porte aussi un vrai `alt`.

   `icone_fee.png` — la fée seule. Favicon, et ligne de marque de TOUS les
   écrans crèche depuis US31.5 (`.logo-staff`, posée par la macro
   `_marque.html`). Le texte à côté ajoute une précision que le logo n'a pas
   (« — cuisine », « — service », « — administration »), donc l'image est
   décorative (`alt=""`) : le nom est déjà écrit. */
.logo-creche { display: block; width: auto; max-width: 100%; }
.logo-parent { height: 78px; margin: 0 auto 14px; }

/* Badges pictos qualité : vraie image du fichier Excel + libellé optionnel */
.picto-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: -4px;
  margin-left: 5px;
}
.picto-badge img {
  height: 17px;
  width: auto;
  border-radius: 3px;
  display: block;
}

/* Codes allergènes après le nom d'un plat */
.allergenes {
  font-size: 10.5px;
  color: var(--sec-4);
  white-space: nowrap;
}

/* US31.5 — la fée des écrans crèche, À CÔTÉ du bloc « surtitre + titre » et
   centrée dessus, jamais au-dessus.

   Trois positions essayées, deux mesures qui tranchent : empilée elle coûtait
   50 px de haut (42 + 8 de marge), ce qui avait justifié de la tenir hors des
   écrans de travail (leçon de F21) ; dans la ligne du surtitre elle en ajoutait
   encore 5, la ligne passant de 17 à 22 px. Contre un bloc qui fait déjà 61 px,
   elle en coûte **zéro** — et peut donc doubler de taille sans rien prendre.

   `align-items: center` et non `flex-start` : la fée regarde le titre, pas le
   surtitre. `min-width: 0` sur le bloc de texte, sinon un titre long refuse de
   se replier (enfant de flex, la leçon d'US29.3). */
.bloc-marque {
  display: flex;
  align-items: center;
  gap: 13px;
}
.bloc-titre { min-width: 0; }
.logo-staff {
  width: 44px;
  height: 44px;
  flex: none;
}
@media (max-width: 560px) {
  /* Sur un téléphone, la largeur est plus rare que la hauteur. */
  .bloc-marque { gap: 9px; }
  .logo-staff { width: 34px; height: 34px; }
}
@media print {
  /* Sur les feuilles qui circulent, c'est la fée qui dit de quelle crèche vient
     le papier, loin de tout écran. */
  .logo-staff { width: 14mm; height: 14mm; }
}

/* Sélecteur de semaine — partagé par les écrans admin et cuisine */
.barre-semaines {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--sec-2);
  flex-wrap: wrap;           /* l'étiquette passe au-dessus plutôt que d'écraser */
}
.barre-semaines label { font-weight: 600; }
.barre-semaines select {
  font: 600 12.5px var(--sans);
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-pilule);
  padding: 7px 12px;
  min-height: 36px;
  /* Un <select> se dimensionne sur sa plus longue option, et les libellés de
     semaine sont longs (« Semaine du 27 juillet au 2 août 2026 — en cuisine »).
     Sans ces deux lignes il mesurait 344 px et poussait la page à défiler
     latéralement en mobile. `min-width: 0` est indispensable : enfant de flex,
     il refuse sinon de descendre sous sa largeur de contenu. */
  min-width: 0;
  max-width: 100%;
}

/* Confirmation d'un geste irréversible — commune à tous les écrans.
   En page plutôt qu'en dialogue natif : voir la note en tête de
   confirmation.js (les dialogues natifs sont parfois neutralisés). */
.voile-confirmation {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(46, 42, 35, .46);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.voile-confirmation[hidden] { display: none; }

.boite-confirmation {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-sticky);
  width: 100%;
  max-width: 470px;
  padding: 22px 24px 20px;
}
.boite-confirmation h2 { font-size: 23px; margin-bottom: 12px; }

.lignes-confirmation {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lignes-confirmation li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sec-1);
}
.lignes-confirmation li::before {
  content: "•";
  position: absolute;
  left: 5px;
  color: var(--marque);
  font-weight: 700;
}
.lignes-confirmation li.alerte { color: var(--alerte-texte); font-weight: 600; }
.lignes-confirmation li.alerte::before { content: "⚠"; left: 2px; font-size: 11px; }

.actions-confirmation {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.bouton-confirmer {
  border: 0;
  border-radius: var(--r-rangee);
  background: var(--encre);
  color: #f6f1e6;
  font-size: 13.5px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 20px;
}
.bouton-confirmer.danger { background: var(--alerte); }
.bouton-annuler {
  border: 1px solid var(--pilule-bord);
  background: var(--surface);
  color: var(--encre);
  border-radius: var(--r-pilule);
  font-size: 12.5px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 16px;
}
.bouton-confirmer:focus-visible, .bouton-annuler:focus-visible {
  outline: 2px solid var(--marque);
  outline-offset: 2px;
}

/* Messages flash */
.flash {
  background: var(--alerte-fond-2);
  border: 1px solid var(--alerte);
  color: var(--alerte-texte);
  border-radius: var(--r-zone);
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* Notifications toast — retour transitoire, commun à tous les écrans (toast.js).
   Haut-centré : ne recouvre pas les barres collées en bas (validation parent,
   publication brouillon). Succès : sauge, s'efface seul. Erreur : terracotta,
   reste jusqu'au clic. Sans JavaScript, ce sont les bandeaux .flash qui parlent. */
.pile-toasts {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;                     /* au-dessus de la confirmation (z-index 100) */
  width: 100%;
  max-width: 440px;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;             /* le conteneur ne bloque pas la page… */
}
.toast {
  pointer-events: auto;             /* …mais le toast reçoit bien le clic */
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--marque);
  border-radius: var(--r-zone);
  box-shadow: var(--ombre-sticky);
  padding: 11px 12px 11px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--encre);
  opacity: 0;                       /* entrée / sortie animées */
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.entre  { opacity: 1; transform: translateY(0); }
.toast.sortie { opacity: 0; transform: translateY(-8px); }

.toast.succes {
  border-left-color: var(--marque);
  background: var(--marque-fond);
  color: var(--marque-fonce);
}
.toast.erreur {
  border-left-color: var(--alerte);
  background: var(--alerte-fond-2);
  color: var(--alerte-texte);
}

.toast-texte { flex: 1; min-width: 0; }
.toast-fermer {
  flex: none;
  border: 0;
  background: none;
  color: inherit;
  opacity: .7;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  margin: -2px -2px 0 0;
  cursor: pointer;
}
.toast-fermer:hover { opacity: 1; }
.toast-fermer:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.entre, .toast.sortie { transform: none; transition: opacity .12s ease; }
}

/* --- US19.6 : les identités colorées ---------------------------------------
   La charte crème/sauge/terracotta reste le défaut, et n'a donc PAS de bloc
   ici : elle est ce que déclare `:root` plus haut.

   ⚠️ Chaque palette doit garder les QUATRE rôles séparés — marque, validé,
   alternative, alerte — et rester AA. Depuis F22, le terracotta (devenu
   `--alerte`) ne veut plus dire qu'une chose : « il faut s'en occuper ». Un
   thème qui rapprocherait l'alerte de la marque casserait la lisibilité que
   F21 et F22 ont construite. Le choix se fait donc entre palettes VÉRIFIÉES,
   jamais en roue chromatique libre — `test_themes.py` refuse tout contraste
   sous 4,5:1.

   ⚠️ Le logo de la crèche ne suit pas le thème : il est violet-pervenche et
   vert vif. C'est assumé — l'application vit à côté du logo, elle ne l'imite
   pas. */

:root[data-theme="ardoise"] {          /* Ardoise & Abricot */
  --fond: #eef1f4; --surface: #ffffff;
  --bord: #dbe1e8; --bord-2: #e2e7ed; --bord-3: #eef1f5; --separateur: #eaeef2;
  --encre: #1f2933;
  --sec-1: #55616e; --sec-2: #55616e; --sec-3: #5b6875;
  --sec-4: #5b6875; --sec-5: #5b6875; --sec-6: #6b7784;
  --marque: #1f4f6b; --marque-fonce: #14384d; --marque-fond: #e2edf3;
  --alerte: #b91c1c; --alerte-texte: #a41616;
  --alerte-fond: #fbdcdc; --alerte-fond-2: #fdecec;
  --cuisine-entete: #e7ecf1; --stat-fond: #eff3f7;
  --pilule-bord: #c6cfd9; --box-bord: #b3bfcb;
  --zone-depot-bord: #bcc7d2; --zone-depot-fond: #f6f9fb;
  --barre-fond: #dfe6ec; --sombre-texte-2: #9aa7b4;
  --graph-retrait: #8d949c;
}

:root[data-theme="papier"] {           /* Papier & Encre */
  --fond: #f7f7f5; --surface: #ffffff;
  --bord: #e3e3df; --bord-2: #e8e8e4; --bord-3: #f1f1ee; --separateur: #efefec;
  --encre: #1a1a18;
  --sec-1: #5f5f5a; --sec-2: #5f5f5a; --sec-3: #6e6e68;
  --sec-4: #6e6e68; --sec-5: #6e6e68; --sec-6: #7a7a73;
  --marque: #1a1a18; --marque-fonce: #2f6f4e; --marque-fond: #e8f2ec;
  --alerte: #c2261a; --alerte-texte: #a81f15;
  --alerte-fond: #fbdedb; --alerte-fond-2: #fdeceb;
  --cuisine-entete: #efefec; --stat-fond: #f3f3f0;
  --pilule-bord: #d0d0cb; --box-bord: #bcbcb6;
  --zone-depot-bord: #c4c4be; --zone-depot-fond: #fafaf8;
  --barre-fond: #e6e6e2; --sombre-texte-2: #a3a39c;
  --graph-retrait: #94948e;
}

:root[data-theme="jardin"] {           /* Jardin d'hiver */
  --fond: #eef1ed; --surface: #fbfcfa;
  --bord: #dde3d9; --bord-2: #e4e9e0; --bord-3: #eff2ec; --separateur: #e8ede6;
  --encre: #22271f;
  --sec-1: #565f52; --sec-2: #565f52; --sec-3: #616a5c;
  --sec-4: #616a5c; --sec-5: #616a5c; --sec-6: #6d7668;
  --marque: #2f5d3f; --marque-fonce: #1f4029; --marque-fond: #e5efe6;
  --alerte: #a3232c; --alerte-texte: #8f1e26;
  --alerte-fond: #f6dcde; --alerte-fond-2: #fbe9ea;
  --cuisine-entete: #e7ece5; --stat-fond: #eff3ed;
  --pilule-bord: #c8d1c4; --box-bord: #b4beb0;
  --zone-depot-bord: #bfc9bb; --zone-depot-fond: #f7faf6;
  --barre-fond: #dfe6dc; --sombre-texte-2: #9aa596;
  --graph-retrait: #8b9387;
}

:root[data-theme="craie"] {            /* Craie & Myrtille */
  --fond: #f6f4f8; --surface: #ffffff;
  --bord: #e4dfea; --bord-2: #eae5ef; --bord-3: #f2eff5; --separateur: #efecf3;
  --encre: #241f2b;
  --sec-1: #605872; --sec-2: #605872; --sec-3: #6d6579;
  --sec-4: #6d6579; --sec-5: #6d6579; --sec-6: #797185;
  --marque: #4c3a8f; --marque-fonce: #362867; --marque-fond: #eae5f6;
  --alerte: #b83224; --alerte-texte: #9e2b1f;
  --alerte-fond: #f9e0dc; --alerte-fond-2: #fceeec;
  --cuisine-entete: #efecf3; --stat-fond: #f3f0f7;
  --pilule-bord: #cec7da; --box-bord: #bab2c8;
  --zone-depot-bord: #c5bdd3; --zone-depot-fond: #faf8fc;
  --barre-fond: #e7e2ef; --sombre-texte-2: #a49bb3;
  --graph-retrait: #938d9c;
}