/* 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. */
main { max-width: 760px; margin: 0 auto; padding: 20px 14px 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 ------------------------------------------------------------- */
.site-header {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { border-radius: 8px; object-fit: contain; background: #fff; }
.brand strong { display: block; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand small { display: block; color: var(--muted); font-size: 0.8rem; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.site-header nav a, .site-header nav button {
  padding: 6px 11px; border-radius: 999px; text-decoration: none;
  color: var(--muted); font-size: 0.88rem; font-weight: 500;
}
.site-header nav a:hover, .site-header nav button:hover { background: var(--surface-2); color: var(--text); }
.site-header form { margin: 0; }
.site-footer { border-top: 1px solid var(--line); padding: 18px 16px; color: var(--muted); font-size: 0.85rem; text-align: center; }

/* 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; }
.page-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

/* 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); }
.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); }
input[type='text'], input[type='number'], input[type='password'], input[type='date'], input[type='time'], 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: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; }
.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: 14px;
  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; }

/* 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); }
.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 { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.82rem; }
.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); }