/* Palette tirée du logo de l'école : indigo profond du lettrage, bleu ciel de la
   silhouette, jaune de la croix. Gai sans être enfantin — ce sont des parents pressés
   qui commandent, souvent le soir sur leur téléphone. */
:root {
  --bg: #f7f6fb;
  --surface: #ffffff;
  --surface-2: #f0eef8;
  --surface-3: #e3dff3;
  --text: #1d1a2e;
  --muted: #625d7a;
  --line: #ddd8ee;
  --line-strong: #c3bce0;
  --accent: #3a2bb5;
  --accent-hover: #2c1f90;
  --accent-text: #ffffff;
  --accent-soft: #eae7fa;
  --ciel: #2f8fd4;
  --ciel-soft: #e4f2fc;
  --jaune: #8a6a00;
  --jaune-soft: #fdf3d4;
  --vert: #1f7a4d;
  --vert-soft: #e2f4ea;
  --danger: #a3302a;
  --danger-soft: #f8e9e7;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(35, 25, 80, 0.05), 0 8px 24px rgba(35, 25, 80, 0.07);
  --shadow-sticky: 0 -4px 18px rgba(35, 25, 80, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14121c;
    --surface: #1e1b2b;
    --surface-2: #272336;
    --surface-3: #332e46;
    --text: #eceaf5;
    --muted: #a49ec0;
    --line: #322d45;
    --line-strong: #474063;
    --accent: #9d90ff;
    --accent-hover: #b3a8ff;
    --accent-text: #16112e;
    --accent-soft: #272044;
    --ciel: #6cb8ec;
    --ciel-soft: #1b2c3a;
    --vert: #74cf9f;
    --vert-soft: #162c22;
    --jaune: #e5b84f;
    --jaune-soft: #332a17;
    --danger: #e89b95;
    --danger-soft: #331f1d;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
    --shadow-sticky: 0 -4px 18px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(60rem 30rem at 50% -8rem, var(--accent-soft), transparent 70%);
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Le parent commande sur son téléphone : marges généreuses, place pour la barre de
   total fixée en bas. */
/* Le parent commande sur son téléphone, mais la barre d'onglets doit tenir sur une
   ligne dès qu'il est sur un ordinateur : 880 px laissent la place aux cinq onglets
   sans étirer les lignes de texte au point de les rendre pénibles à lire. */
main { max-width: 880px; margin: 0 auto; padding: 22px 16px 130px; }
body.admin main { max-width: 1120px; }

h1 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.95rem); line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 6px; }
h2 { font-size: 1.12rem; letter-spacing: -0.01em; margin: 0 0 10px; }
h3 { font-size: 0.95rem; margin: 18px 0 8px; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.9rem; margin: 6px 0 14px; }
.num { text-align: right; }
.grand { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* En-tête ------------------------------------------------------------- */
/* Un lien d'évitement, invisible tant qu'on n'y arrive pas au clavier : sur les
   pages longues, il épargne de traverser tout le menu avant le contenu. */
.saut-contenu {
  position: absolute; left: 8px; top: -60px; z-index: 60;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-text); text-decoration: none;
  transition: top 0.15s ease;
}
.saut-contenu:focus { top: 8px; }

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header-barre {
  max-width: 1120px; margin: 0 auto;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 9px 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { border-radius: 9px; object-fit: contain; background: #fff; flex: none; }
.brand strong { display: block; font-size: 1.05rem; letter-spacing: -0.015em; line-height: 1.2; }
.brand small { display: block; color: var(--muted); font-size: 0.78rem; }

/* Le menu : un tiroir sur téléphone, une barre d'onglets dès qu'il y a la place.
   La même liste sert aux deux, seule la mise en forme change. */
.menu { position: relative; }
.menu > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; list-style: none;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 0.9rem; font-weight: 600; color: var(--text);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: var(--accent); }
.menu-barres { position: relative; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.menu-barres::before, .menu-barres::after {
  content: ''; position: absolute; left: 0; width: 16px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.menu-barres::before { top: -5px; }
.menu-barres::after { top: 5px; }
.menu[open] > summary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.menu-liens {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 232px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.menu-liens a {
  padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none;
  color: var(--text); font-size: 0.94rem; font-weight: 500; white-space: nowrap;
}
.menu-liens a:hover { background: var(--surface-2); }
.menu-liens a[aria-current='page'] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.menu-pied {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line);
}
.menu-pied a { flex: 1; }
.menu-pied form { margin: 0; }
.btn-quitter {
  padding: 10px 12px; font: inherit; font-size: 0.9rem; font-weight: 500;
  color: var(--danger); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer;
}
.btn-quitter:hover { background: var(--danger-soft); }

/* À partir d'ici, tout tient sur une ligne : le tiroir devient une barre d'onglets,
   toujours dépliée quel que soit l'état du <details>. */
@media (min-width: 940px) {
  .menu > summary { display: none; }
  .menu-liens { flex-wrap: nowrap; }
  .menu-liens > a, .menu-liens > .menu-pied { flex: none; }
  /* Redonner au contenu un display suffisait autrefois. Chrome masque désormais le
     contenu d'un <details> fermé par « content-visibility » sur ::details-content,
     que « display » ne défait pas : sans cette règle, la barre d'onglets serait
     invisible sur grand écran alors que le bouton d'ouverture est caché. Les
     navigateurs qui ignorent ce pseudo-élément se contentent de la règle suivante. */
  .menu::details-content { content-visibility: visible; block-size: auto; overflow: visible; }
  .menu-liens {
    position: static; display: flex; flex-direction: row; align-items: center;
    min-width: 0; padding: 0; gap: 2px;
    background: none; border: none; box-shadow: none;
  }
  .menu-liens a { padding: 7px 12px; border-radius: 999px; font-size: 0.89rem; color: var(--muted); }
  .menu-liens a[aria-current='page'] { background: var(--accent-soft); color: var(--accent); }
  .menu-pied { margin: 0 0 0 6px; padding: 0 0 0 10px; border-top: none; border-left: 1px solid var(--line); }
  .menu-pied a { flex: none; padding: 7px 12px; border-radius: 999px; font-size: 0.89rem; color: var(--muted); }
  .btn-quitter { padding: 7px 10px; font-size: 0.89rem; }
}


/* Pied de page --------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 16px 30px; color: var(--muted); font-size: 0.86rem; }
.pied-bloc {
  max-width: 1120px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-start; justify-content: space-between;
}
.pied-ecole { margin: 0; line-height: 1.5; }
.pied-ecole strong { color: var(--text); font-weight: 600; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pied-liens a { color: var(--muted); text-decoration: none; }
.pied-liens a:hover { color: var(--accent); text-decoration: underline; }

/* Le logo de l'école donne le ton dès l'arrivée : c'est ce qui rassure un parent
   sur le fait qu'il est au bon endroit. */
.hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--surface), var(--ciel-soft));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero img { border-radius: 12px; background: #fff; padding: 4px; flex: none; }
.hero p { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 46ch; }
/* Titre à gauche, commandes de la page à droite : la même charpente partout, pour
   que l'œil sache d'emblée où chercher le sélecteur de date ou de mois. */
.page-head {
  display: flex; gap: 12px 20px; align-items: flex-start; flex-wrap: wrap;
  justify-content: space-between; margin: 4px 0 20px;
}
.page-head > div:first-child { flex: 1; min-width: 12rem; }
.page-head .hint { margin: 4px 0 0; max-width: 62ch; }
/* Une pastille posée dans le titre suit sa ligne de base plutôt que sa taille. */
.page-head h1 .badge { vertical-align: middle; font-size: 0.8rem; margin-left: 6px; }

/* Blocs --------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin: 0 0 16px; box-shadow: var(--shadow);
}
.card.est-ferme { opacity: 0.6; }

/* Chaque jour se replie : dix blocs entièrement dépliés faisaient un mur de champs
   qu'il fallait parcourir en entier pour trouver le bon jour. Le résumé dit ce qui est
   déjà commandé, si bien qu'on n'ouvre que ce qu'on veut changer. */
details.jour { padding: 0; }
details.jour > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 18px; cursor: pointer; list-style: none; border-radius: var(--radius);
}
details.jour > summary::-webkit-details-marker { display: none; }
details.jour > summary::after {
  content: '⌄'; color: var(--muted); font-size: 1.1rem; line-height: 1;
  transform: translateY(-2px);
}
details.jour[open] > summary::after { content: '⌃'; transform: translateY(3px); }
details.jour[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
details.jour > summary:hover { background: var(--surface-2); }
details.jour > *:not(summary) { padding: 0 18px; }
details.jour > *:last-child { padding-bottom: 16px; }
.jour-nom { flex: 1; font-weight: 600; color: var(--text); }

/* Pastille façon calendrier : dans une liste de dix jours, c'est le numéro qu'on
   cherche, pas la phrase. */
.pastille {
  display: grid; place-items: center; flex: none;
  width: 48px; padding: 5px 0; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); line-height: 1.05;
}
.pastille-jour, .pastille-mois { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.pastille-numero { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
details.jour.est-ferme .pastille { background: var(--surface-3); color: var(--muted); }
details.jour[open] .pastille { background: var(--accent); color: var(--accent-text); }
.badge.vide { background: var(--surface-3); color: var(--muted); font-weight: 500; }

.chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.chip-repas { background: var(--ciel-soft); color: var(--ciel); }
.chip-sandwich { background: var(--vert-soft); color: var(--vert); }
/* L'état d'une case commandée : un brouillon n'engage à rien, une ligne validée est
   partie chez l'école. Le vert de « validé » reprend celui déjà utilisé pour un
   paiement réglé, par cohérence — les deux disent « c'est fait, acté ». */
.chip-brouillon { background: var(--jaune-soft); color: var(--jaune); }
.chip-valide { background: var(--vert-soft); color: var(--vert); }
.chip-perime { background: var(--danger-soft); color: var(--danger); }
.enfant-bloc { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.enfant-bloc:first-of-type { border-top: none; padding-top: 14px; }
.enfant-bloc h3 { margin: 0 0 8px; font-size: 1rem; }
.groupe { margin: 12px 0 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ciel); }

/* Articles : la cible tactile fait toute la ligne, le champ reste à droite. */
.articles { list-style: none; margin: 0; padding: 0; }
.articles li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 8px; margin: 0 -8px; border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--line);
}
.articles li:hover { background: var(--surface-2); }
.articles li:last-child { border-bottom: none; }
.articles label { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; cursor: pointer; }
.article-nom { font-weight: 500; }
.article-desc { color: var(--muted); font-size: 0.85rem; width: 100%; }
.article-prix { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
/* Les flèches natives d'un champ nombre font quelques pixels. Deux boutons de
   44 px — la cible tactile recommandée — les remplacent. */
.stepper { display: flex; align-items: center; gap: 0; flex: none; }
.stepper input[type='number'] {
  width: 46px; text-align: center; font-size: 1.05rem; font-weight: 600; padding: 9px 2px;
  border-radius: 0; border-left: none; border-right: none;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input[type='number']::-webkit-outer-spin-button,
.stepper input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pas {
  width: 40px; height: 42px; flex: none;
  font: inherit; font-size: 1.15rem; line-height: 1; color: var(--accent);
  background: var(--surface-2); border: 1px solid var(--line-strong); cursor: pointer;
}
.pas:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.pas:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pas:hover { background: var(--accent-soft); }
.pas:active { background: var(--accent); color: var(--accent-text); }

.enfants { list-style: none; margin: 0 0 12px; padding: 0; }
.enfants li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.enfants li:last-child { border-bottom: none; }
.enfants form { margin: 0; }

details.ajout { border-top: 1px solid var(--line); padding-top: 12px; }
details.ajout summary { cursor: pointer; color: var(--accent); font-weight: 500; }
details.ajout .grid-form { margin-top: 12px; }

.apercu { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.9rem; }
.apercu li { padding: 4px 0; }

/* Formulaires --------------------------------------------------------- */
label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 5px; color: var(--muted); }
/* Énumérer les types menait à en oublier : email, tel et file ne recevaient aucun
   style et s'affichaient à leur largeur par défaut, bien plus étroits que les autres.
   On exclut plutôt les rares types qui ne sont pas des champs de saisie. */
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']),
select, textarea {
  width: 100%; padding: 10px 11px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
input[type='file'] { padding: 8px 10px; font-size: 0.9rem; }

/* Le remplissage automatique du navigateur impose son propre fond, souvent jaune
   vif, qui jure avec le reste. On le neutralise par une ombre intérieure, seule
   méthode qui tienne face au style navigateur. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--surface) inset;
  box-shadow: 0 0 0 100px var(--surface) inset;
  caret-color: var(--text);
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; }
form.inline { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px;
  font: inherit; font-weight: 500; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer;
}
.btn:hover { border-color: var(--accent); background: var(--surface-2); }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-mini {
  padding: 4px 10px; font: inherit; font-size: 0.82rem; color: var(--muted);
  background: none; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
}
.btn-mini:hover { color: var(--danger); border-color: var(--danger); }
button.link { background: none; border: none; font: inherit; cursor: pointer; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.toolbar form { margin: 0; }
.row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.row-actions form { margin: 0; }

/* Rôle et actions tiennent dans une seule colonne plutôt que deux : c'est ce qui
   forçait le tableau à déborder et à devoir défiler pour atteindre « Supprimer ». Le
   sélecteur au-dessus, les boutons en dessous, alignés à gauche comme le reste de la
   cellule plutôt qu'à droite. */
.cellule-actions-compte .row-actions { justify-content: flex-start; margin-top: 8px; flex-wrap: wrap; }
.nav-jour { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.nav-jour form { margin: 0; }

/* Barre de total, toujours visible pendant la saisie. */
.barre-total {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  padding: 12px 16px;
  background: linear-gradient(to bottom, var(--surface), var(--surface-2));
  border-top: 1px solid var(--line-strong); box-shadow: var(--shadow-sticky);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.barre-total .label { display: block; color: var(--muted); font-size: 0.78rem; }
.barre-total .value { font-size: 1.3rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
/* Enregistrer garde un brouillon de côté ; Valider l'engage pour de bon — c'est le
   second bouton qui porte l'accent, comme geste qui conclut la session. */
.barre-boutons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Tableaux ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.table th, .table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.table th.num, .table td.num { text-align: right; }
.table thead th { font-size: 0.76rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.table tfoot th { font-weight: 700; border-top: 1px solid var(--line-strong); border-bottom: none; }

/* Étiquettes et messages ---------------------------------------------- */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
}
.badge.ferme { background: var(--jaune-soft); color: var(--jaune); }
/* Distincte de la classe : c'est un second repère, pas la donnée principale de la ligne. */
.badge-enseignante { background: var(--surface-3); color: var(--muted); }
.notice { padding: 11px 15px; margin: 14px 0; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.notice.warn { border-left-color: var(--jaune); background: var(--jaune-soft); }
.error { color: var(--danger); background: var(--danger-soft); padding: 11px 15px; border-radius: var(--radius-sm); }

/* Connexion ----------------------------------------------------------- */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 16px;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft) 0%, var(--bg) 60%); }
.login { width: min(380px, 100%); text-align: center; }
.login img { border-radius: 12px; margin-bottom: 8px; }
.login label { text-align: left; }
.login .btn { width: 100%; justify-content: center; margin-top: 16px; }

@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #fff; --text: #000; --muted: #444;
          --line: #999; --line-strong: #666; --accent: #000; --accent-soft: #fff; --shadow: none; }
  .site-header, .site-footer, .no-print, .nav-jour, .barre-total { display: none; }
  .card { box-shadow: none; border: none; padding: 0; margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Accès au back-office depuis la page des parents : présent pour qui le cherche,
   assez effacé pour qu'un parent ne le prenne pas pour son propre accès. */
.footer-admin { max-width: 1120px; margin: 18px auto 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.82rem; text-align: center; }
.footer-admin a { color: var(--muted); text-decoration: none; }
.footer-admin a:hover { color: var(--accent); text-decoration: underline; }

/* Un article de la carte tient sur une ligne et se déplie pour l'édition : quatre
   formulaires complets empilés occupaient tout l'écran pour un réglage rare. */
.ligne-article { border-top: 1px solid var(--line); }
.ligne-article:first-of-type { border-top: none; }
.ligne-article > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 4px; cursor: pointer; list-style: none;
}
.ligne-article > summary::-webkit-details-marker { display: none; }
.ligne-article > summary:hover { background: var(--surface-2); }
.ligne-article > summary .article-nom { flex: 1; min-width: 140px; }
.ligne-article > summary::after { content: '⌄'; color: var(--muted); }
.ligne-article[open] > summary::after { content: '⌃'; }
.ligne-article .grid-form { padding: 6px 4px 14px; }
.ligne-article.est-ferme > summary .article-nom { text-decoration: line-through; color: var(--muted); }

/* Version 2 ------------------------------------------------------------- */

/* Les deux circuits s'atteignent depuis l'accueil, en grand : c'est le geste le plus
   fréquent, il ne doit pas se chercher. */
.acces { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; }
.acces-carte {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px; text-decoration: none;
  background: linear-gradient(135deg, var(--surface), var(--accent-soft));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.acces-carte:hover { border-color: var(--accent); }
.acces-titre { font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.acces-detail { font-size: 0.86rem; color: var(--muted); }

.nav-mois { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.bascule-vue { display: flex; gap: 8px; margin-bottom: 14px; }

/* Une ligne « pour qui » et « quoi » : le choix se fait dans une liste déroulante,
   plus sûre au doigt qu'une série de cases sur un téléphone. */
.ligne-choix { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; }
.ligne-choix label { flex: 1; min-width: 110px; margin: 0; color: var(--text); font-weight: 500; }
.ligne-choix label .muted { font-weight: 400; font-size: 0.82rem; display: block; }
.ligne-choix select { flex: 2; min-width: 190px; }

/* Sauce et crudités, sur leur propre ligne sous le nom et l'article — flex-basis à
   100% force le retour à la ligne même s'il restait de la place, pour ne jamais les
   faire tenir à l'étroit à côté du sélecteur principal. */
.garnitures { display: flex; gap: 8px; flex: 1 1 100%; margin-left: calc(110px + 12px); }
.garnitures select { flex: 1; min-width: 130px; font-size: 0.88rem; }
.garnitures select:disabled { opacity: 0.45; }
@media (max-width: 520px) {
  .garnitures { margin-left: 0; }
}

.jour-repas {
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.jour-repas.est-ferme { opacity: 0.55; }

/* Un compte supprimé (désactivé) reste dans la liste — son historique ne disparaît
   pas — mais s'efface visuellement au profit des comptes actifs. */
.ligne-inactive { opacity: 0.55; }
.jour-entete { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

/* Vue calendrier : les mêmes jours, disposés en grille. Sur téléphone la grille
   retombe à une colonne, ce qui redonne la vue liste — c'est voulu. */
.calendrier { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.calendrier .jour-repas { margin-bottom: 0; }

.menu-image { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; }

.virement { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.virement h3 { margin: 0 0 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ciel); }
.identity { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; }
.identity div { margin: 0; }
.identity dt { font-size: 0.76rem; color: var(--muted); }
.identity dd { margin: 2px 0 0; }

/* L'état de paiement se bascule d'un clic : c'est le geste le plus répété du
   back-office, il mérite d'être lisible d'un coup d'œil. */
.btn-statut {
  padding: 4px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 600; border: 1px solid currentColor;
}
.btn-statut.a_payer { color: var(--jaune); background: var(--jaune-soft); }
.btn-statut.paye { color: var(--vert); background: var(--vert-soft); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.stat-value { display: block; font-size: 1.4rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-value.warn { color: var(--jaune); }
.stat-label { font-size: 0.8rem; color: var(--muted); }

.login.large { width: min(480px, 100%); }
.login .grid-form { text-align: left; }
.card-head { display: flex; align-items: center; gap: 10px; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

/* Les pages de connexion et d'inscription centrent leur carte : leur pied de page
   se pose sous elle plutôt que de s'ancrer en bas de l'écran. */
.login-pied { border-top: none; padding-top: 4px; }
.login-pied .footer-admin { border-top: none; padding-top: 0; margin: 0; }

/* Une étiquette réservée aux lecteurs d'écran : le tableau des classes donne le
   contexte à l'œil par la colonne voisine, un lecteur d'écran a besoin du texte. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Un contrôle dans un tableau ne doit pas suivre la règle « width: 100% » des
   formulaires : sur téléphone, la colonne se réduit à quelques pixels et la liste
   déroulante devient impossible à viser. Elle prend donc la largeur de son contenu,
   avec un minimum, et le tableau défile horizontalement plutôt que de s'écraser. */
.table select,
.table input:not([type='checkbox']):not([type='radio']) {
  width: auto;
  min-width: 11ch;
}

/* En dessous de cette largeur, un tableau à cinq colonnes ne tient plus. Chaque
   ligne devient une fiche, l'intitulé de colonne passant devant la valeur. */
@media (max-width: 680px) {
  .table-cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .table-cartes,
  .table-cartes tbody,
  .table-cartes tr,
  .table-cartes td { display: block; width: 100%; }
  .table-cartes tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .table-cartes td {
    border-bottom: none;
    padding: 3px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: left;
  }
  .table-cartes td.num { text-align: left; }
  .table-cartes td::before {
    content: attr(data-colonne);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
  }
  /* La première cellule porte le nom : elle sert de titre à la fiche. */
  .table-cartes td:first-child {
    font-weight: 700;
    font-size: 1.02rem;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .table-cartes td:first-child::before { content: none; }
  .table-cartes select { min-width: 12ch; }
}

/* Notice d'utilisation ------------------------------------------------- */
/* Une page qu'on parcourt en diagonale pour trouver une réponse précise : les
   règles qui coûtent cher quand on les ignore sont mises en avant, le reste suit. */
.encadre-cle { border-color: var(--accent); border-width: 1px; background: linear-gradient(135deg, var(--surface), var(--accent-soft)); }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.bloc-cle { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cle-regle { margin: 8px 0 6px; font-size: 1.05rem; line-height: 1.35; }
.cle-regle strong { color: var(--accent); }
.note-limite {
  margin: 14px 0 0; padding: 11px 14px; font-size: 0.89rem;
  background: var(--jaune-soft); border-radius: var(--radius-sm); color: var(--text);
}

.etapes { margin: 0; padding-left: 0; list-style: none; counter-reset: etape; }
.etapes li {
  position: relative; padding: 0 0 14px 42px; counter-increment: etape;
}
.etapes li:last-child { padding-bottom: 0; }
.etapes li::before {
  content: counter(etape);
  position: absolute; left: 0; top: -1px;
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--accent); color: var(--accent-text);
  font-size: 0.85rem; font-weight: 800;
}

.liste-propre { margin: 0; padding-left: 20px; }
.liste-propre li { margin-bottom: 7px; }
.liste-propre li:last-child { margin-bottom: 0; }

/* Le libellé exact de l'onglet, puis ce qu'on y trouve : le parent cherche un mot
   qu'il a vu dans le menu, pas une périphrase. */
.liste-repere { list-style: none; margin: 0; padding: 0; }
.liste-repere li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.liste-repere li:last-child { border-bottom: none; }
.liste-repere a { font-weight: 600; text-decoration: none; min-width: 9rem; }
.liste-repere a:hover { text-decoration: underline; }
.liste-repere span { flex: 1; font-size: 0.91rem; }

/* Accueil --------------------------------------------------------------- */
.acces-echeance {
  margin-top: 6px; font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ciel);
}
.notice-depart { border-color: var(--accent); }
.notice-depart .btn { margin-top: 10px; }
.card-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.btn-discret { padding: 5px 12px; font-size: 0.85rem; }

/* Ce qui est déjà commandé : une ligne par commande, le jour d'abord — c'est par le
   jour qu'un parent cherche, pas par l'article. */
.liste-avenir { list-style: none; margin: 0; padding: 0; }
.liste-avenir li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.liste-avenir li:last-child { border-bottom: none; }
.avenir-jour { font-weight: 600; min-width: 11rem; }
.avenir-quoi { flex: 1; min-width: 12rem; font-size: 0.92rem; color: var(--muted); }
.avenir-quoi strong { color: var(--text); font-weight: 600; }
.avenir-prix { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; }

/* Un brouillon non validé est facile à rater dans une liste calme : ce cadre-ci n'a
   rien de calme, exprès. Bordure pleine plutôt qu'un simple liseré, pour peser plus
   qu'un « notice.warn » ordinaire — c'est le geste qu'on redoute de voir oublié. */
.alerte-brouillon {
  margin-bottom: 16px; padding: 14px 16px;
  background: var(--danger-soft); border: 2px solid var(--danger); border-radius: var(--radius);
}
.alerte-brouillon h3 { margin: 0 0 6px; color: var(--danger); font-size: 0.98rem; }
.alerte-brouillon p { margin: 4px 0 0; font-size: 0.9rem; color: var(--text); }
.alerte-brouillon p:first-of-type { margin-top: 0; }

/* Tri « par enfant » : un groupe par enfant, comme dans le récapitulatif envoyé par
   e-mail — c'est le même regroupement, affiché ici plutôt que dans un message. */
.groupe-enfant { margin-bottom: 18px; }
.groupe-enfant:last-child { margin-bottom: 0; }
.groupe-enfant h3 { margin: 0 0 4px; font-size: 0.98rem; }
.groupe-total { margin: 6px 0 0; font-size: 0.9rem; text-align: right; color: var(--muted); }
.groupe-total strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* La liste des rôles en tête de la page des comptes : un rappel de ce que chacun
   ouvre, là où on s'apprête à en accorder un. */
.liste-roles { margin-top: 10px; }
.liste-roles strong { min-width: 9rem; display: inline-block; }