@charset "UTF-8";

/* =========================================================================
   Souper des maternelles — AP Collège Saint-Guibert, Gembloux

   Parti pris : éditorial sombre. Un souper d'automne, le soir, dans un
   réfectoire — pas une page produit. La chaleur vient d'un noir tiède
   (jamais bleuté), la personnalité de la typographie, et l'énergie du jaune
   du logo, qui se comporte comme un accent acide dès qu'on le pose sur du
   sombre. Le logo lui-même reste une petite marque de caution, pas un décor.

   Jetons en trois couches : primitives → sémantiques → composants.
   ========================================================================= */

:root {
  /* — primitives : relevées sur le logo de l'association — */
  --ap-jaune:  #DADA08;   /* les quatre mains : jaune… */
  --ap-rose:   #E65387;   /* …rose… */
  --ap-cyan:   #1298CB;   /* …cyan… */
  --ap-orange: #EB7418;   /* …orange */
  --ap-bleu:   #135DB4;   /* le lettrage */

  /* Noirs tièdes : un gris neutre rendrait la soirée froide. */
  --nuit-000: #100E0B;
  --nuit-100: #1A1712;
  --nuit-200: #262119;
  --nuit-300: #3A332A;
  --nuit-400: #5C5347;

  --jour-000: #FFFFFF;
  --jour-050: #FBF7F0;
  --jour-100: #F2ECE1;
  --jour-200: #DED5C6;

  /* Déclinaisons contrastées pour le texte sur fond clair. */
  --rose-encre:   #C22462;
  --orange-encre: #A64F0C;

  /* — sémantiques — */
  --fond:        var(--nuit-000);
  --fond-relief: var(--nuit-100);
  --texte:       var(--jour-050);
  --texte-doux:  #B9AF9F;
  --trait:       rgba(255, 247, 232, .14);
  --accent:      var(--ap-jaune);

  /* — échelles — */
  --pas-1: .25rem; --pas-2: .5rem;  --pas-3: .75rem; --pas-4: 1rem;
  --pas-5: 1.5rem; --pas-6: 2rem;   --pas-7: 3rem;   --pas-8: 4.5rem;
  --pas-9: 7rem;

  --rayon:    16px;
  --rayon-lg: 28px;

  --police: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Décélération franche, sans rebond. */
  --sortie: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
.bouton, .chip { text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--ap-jaune);
  outline-offset: 3px;
  border-radius: 4px;
}

.enveloppe { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.enveloppe--etroit { width: min(100% - 2.5rem, 44rem); margin-inline: auto; }

.pour-lecteur {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- typographie */

.geant {
  margin: 0;
  font-size: clamp(3.1rem, 13.5vw, 10.5rem);
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.titre {
  margin: 0 0 var(--pas-5);
  font-size: clamp(1.9rem, 5.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.chapeau {
  margin: 0;
  font-size: clamp(1.05rem, 2.3vw, 1.4rem);
  line-height: 1.5;
  color: var(--texte-doux);
}

/* Étiquette de section : petite, espacée, jamais décorative pour rien. */
.etiquette {
  display: block;
  margin: 0 0 var(--pas-4);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ap-jaune);
}

/* ---------------------------------------------------------------- chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pas-2);
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--texte);
  border: 1px solid var(--trait);
  border-radius: 999px;
  white-space: nowrap;
}

.chip--plein {
  color: var(--nuit-000);
  background: var(--ap-jaune);
  border-color: var(--ap-jaune);
}

.chip--sombre { color: var(--nuit-000); border-color: rgba(16,14,11,.22); }

/* ---------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.5rem;
  padding: var(--pas-3) var(--pas-6);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--nuit-000);
  background: var(--ap-jaune);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .35s var(--sortie), background .2s;
}

.bouton:hover { background: #EFEF2A; transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }

.bouton--fil {
  color: var(--texte);
  background: transparent;
  border: 1px solid var(--trait);
}
.bouton--fil:hover { background: rgba(255,247,232,.08); }

.bouton--sombre {
  color: var(--jour-050);
  background: var(--nuit-000);
}
.bouton--sombre:hover { background: var(--nuit-200); }

.bouton--large { width: 100%; }

/* ================================================================= hero */

.hero {
  position: relative;
  padding: var(--pas-6) 0 var(--pas-8);
  overflow: hidden;
  background: var(--nuit-000);
}

/* Les quatre couleurs du logo, diffusées très bas — une chaleur, pas un décor. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% 20% -20%;
  background:
    radial-gradient(closest-side, rgba(235,116,24,.30), transparent) 18% 30%/60% 90% no-repeat,
    radial-gradient(closest-side, rgba(230,83,135,.22), transparent) 78% 12%/55% 80% no-repeat,
    radial-gradient(closest-side, rgba(18,152,203,.18), transparent) 92% 62%/50% 70% no-repeat,
    radial-gradient(closest-side, rgba(218,218,8,.14),  transparent) 40% 74%/55% 60% no-repeat;
  filter: blur(10px);
  pointer-events: none;
}

/* Grain : casse le dégradé, évite l'aplat numérique. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.35'/%3E%3C/svg%3E");
}

.hero > * { position: relative; z-index: 1; }

/* — marque de l'association : discrète, en caution — */
.marque {
  display: flex;
  align-items: center;
  gap: var(--pas-3);
  padding-block: var(--pas-3);
}

.marque img {
  width: 46px;
  height: auto;
  flex: none;
}

.marque span {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.hero-corps { padding-top: clamp(var(--pas-6), 7vw, var(--pas-8)); }

.hero-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas-3);
  margin-bottom: var(--pas-5);
}

.geant .ligne { display: block; }
.geant .creux { color: transparent; -webkit-text-stroke: 1.5px var(--ap-jaune); }

.hero-phrase {
  max-width: 34ch;
  margin: var(--pas-6) 0 0;
  font-size: clamp(1.15rem, 2.7vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--jour-050);
}

.hero-phrase strong { color: var(--ap-jaune); font-weight: 700; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-3);
  margin-top: var(--pas-6);
}

/* — panneau vitré : les informations qu'on cherche en premier — */
.panneau + .panneau { margin-top: var(--pas-4); }

/* Le cadre des compteurs est plus resserré : deux chiffres, pas trois colonnes. */
.panneau--compteurs { padding: var(--pas-5); }

.panneau {
  margin-top: var(--pas-8);
  padding: var(--pas-5);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  background: rgba(38, 33, 25, .55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.panneau-grille {
  display: grid;
  gap: var(--pas-5);
}

.panneau-item dt {
  margin-bottom: var(--pas-2);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.panneau-item dd {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.panneau-item dd small {
  display: block;
  margin-top: 2px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--texte-doux);
}

/* — compteurs : jours restants, et boulettes déjà commandées — */
.rebours {
  display: grid;
  gap: var(--pas-4);
}

.compteur-bloc {
  display: flex;
  align-items: baseline;
  gap: var(--pas-3);
  margin: 0;
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--texte-doux);
}

.compteur-bloc b {
  flex: none;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ap-jaune);
}

.compteur-bloc small { font-size: .8125rem; opacity: .75; }

.renforts {
  margin: var(--pas-4) 0 0;
  padding-top: var(--pas-4);
  border-top: 1px solid var(--trait);
  font-size: .875rem;
  color: var(--texte-doux);
}
.renforts a { color: var(--ap-jaune); }

/* Une couleur du logo par compteur — trois jaunes côte à côte s'annuleraient. */
.compteur-bloc--boulettes b { color: var(--ap-orange); }
.compteur-bloc--benevoles b { color: var(--ap-cyan); }

/* Jauge sans chiffre : montre l'élan, ne dit jamais « complet ». */
.jauge {
  display: inline-flex;
  flex: none;
  gap: 4px;
  align-items: center;
  padding-top: .35rem;
}

.jauge .cran {
  width: 7px; height: 20px;
  border-radius: 3px;
  background: rgba(255, 247, 232, .16);
}

.jauge .cran--pris { background: var(--ap-cyan); }

@media (min-width: 46rem) {
  .rebours { grid-template-columns: repeat(3, 1fr); gap: var(--pas-4); }
  .compteur-bloc--boulettes,
  .compteur-bloc--benevoles { padding-left: var(--pas-4); border-left: 1px solid var(--trait); }
}

/* ================================================================= sections */

.bloc { padding: var(--pas-9) 0; }
.bloc--serre { padding: var(--pas-8) 0; }

.bloc--nuit  { background: var(--nuit-100); }
.bloc--jour  { background: var(--jour-050); color: var(--nuit-000); }

.bloc--jour .etiquette { color: var(--orange-encre); }
.bloc--jour .chapeau   { color: #5E5548; }

/* — le propos : une affirmation, pas trois cartes identiques — */
.propos {
  display: grid;
  gap: var(--pas-7);
  align-items: start;
}

.propos-liste { display: grid; gap: var(--pas-5); margin: 0; padding: 0; list-style: none; }

.propos-liste li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pas-4);
  align-items: baseline;
  padding-bottom: var(--pas-5);
  border-bottom: 1px solid var(--trait);
}

.propos-liste li:last-child { border-bottom: 0; padding-bottom: 0; }

.propos-liste .num {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ap-jaune);
}

.propos-liste h3 {
  margin: 0 0 var(--pas-1);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.propos-liste p { margin: 0; color: var(--texte-doux); }

/* — programme : les heures portent la lecture — */
.programme { display: grid; gap: 0; margin: 0; }

.moment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pas-4) var(--pas-5);
  padding: var(--pas-5) 0;
  border-top: 1px solid rgba(16,14,11,.14);
  align-items: baseline;
}

.moment:last-child { border-bottom: 1px solid rgba(16,14,11,.14); }

.moment-heure {
  font-size: clamp(2rem, 6.5vw, 3.4rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--nuit-000);
}

.moment:nth-child(1) .moment-heure { color: var(--ap-cyan); }
.moment:nth-child(2) .moment-heure { color: var(--orange-encre); }
.moment:nth-child(3) .moment-heure { color: var(--rose-encre); }
/* Le jaune du logo est illisible sur fond clair : le 4e temps prend le bleu. */
.moment:nth-child(4) .moment-heure { color: var(--ap-bleu); }

.moment h3 { margin: 0 0 var(--pas-1); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.moment p  { margin: 0; color: #5E5548; }

/* — menu : un aplat qui assume — */
.menu-bloc {
  position: relative;
  padding: var(--pas-9) 0;
  background: var(--ap-orange);
  color: var(--nuit-000);
  overflow: hidden;
}

.menu-bloc .etiquette { color: rgba(16,14,11,.62); }

.menu-plat {
  margin: 0;
  font-size: clamp(2.4rem, 9vw, 6rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.045em;
}

.menu-note {
  max-width: 46ch;
  margin: var(--pas-6) 0 0;
  font-size: 1.0625rem;
  color: rgba(16,14,11,.78);
}

/* — tarifs : typographiques, pas deux boîtes jumelles — */
/* Un tarif = une ligne, libellé et prix collés : « Enfant — 8 € ». */
.prix { display: grid; gap: 0; margin: var(--pas-6) 0 0; }

.prix-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--pas-3);
  padding: var(--pas-4) 0;
  border-bottom: 1px solid var(--trait);
}

.prix-ligne:first-child { border-top: 1px solid var(--trait); }

.prix-qui {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.prix-tiret { color: var(--nuit-400); font-size: clamp(1.3rem, 4vw, 2rem); }

.prix-montant {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ap-jaune);
}

/* Le détail passe sous la ligne, sans la couper. */
.prix-detail {
  flex: 1 0 100%;
  margin-top: var(--pas-1);
  font-size: .875rem;
  color: var(--texte-doux);
}

.prix-note { margin: var(--pas-5) 0 0; color: var(--texte-doux); font-size: .9375rem; }

/* — destination de l'argent — */
.usages { display: grid; gap: var(--pas-4); margin: var(--pas-6) 0 0; padding: 0; list-style: none; }

/* La pastille est le seul élément flexible ; le texte coule en un bloc, sinon
   le <strong> se comporte en colonne et la ligne se scinde en deux. */
.usages li {
  display: flex;
  align-items: baseline;
  gap: var(--pas-4);
  padding: var(--pas-4) var(--pas-5);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.usages li > span { flex: 1 1 auto; min-width: 0; }
.usages li strong { color: var(--jour-050); }

.usages li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: .55rem;
  border-radius: 50%;
  background: var(--ap-jaune);
}

.usages li:nth-child(2)::before { background: var(--ap-rose); }
.usages li:nth-child(3)::before { background: var(--ap-cyan); }
.usages li:nth-child(4)::before { background: var(--ap-orange); }

/* ================================================================= formulaire */

.formulaire {
  padding: var(--pas-7);
  background: var(--jour-000);
  border-radius: var(--rayon-lg);
  color: var(--nuit-000);
}

.champ { margin-bottom: var(--pas-5); }

.champ label { display: block; margin-bottom: var(--pas-2); font-weight: 700; font-size: .9375rem; }

.champ .aide { display: block; margin-top: 2px; font-weight: 400; font-size: .875rem; color: #6B6153; }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], select, textarea {
  width: 100%;
  padding: .95rem 1rem;
  font: inherit;
  color: var(--nuit-000);
  background: var(--jour-050);
  border: 1.5px solid var(--jour-200);
  border-radius: 12px;
  transition: border-color .18s, background .18s;
}

input:focus, select:focus, textarea:focus {
  background: var(--jour-000);
  border-color: var(--nuit-000);
}

textarea { min-height: 6rem; resize: vertical; }

.duo { display: grid; gap: var(--pas-4); grid-template-columns: 1fr 1fr; }

/* Compteurs : moins/plus, plus rapide au pouce qu'un champ numérique. */
.compteur { display: flex; align-items: center; gap: var(--pas-2); }

.compteur button {
  flex: none;
  width: 3rem; height: 3rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--nuit-000);
  background: var(--jour-100);
  border: 1.5px solid var(--jour-200);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
}

.compteur button:hover { background: var(--jour-200); }
.compteur input { text-align: center; font-weight: 700; font-size: 1.15rem; }

.total-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pas-2);
  margin: var(--pas-6) 0;
  padding-top: var(--pas-5);
  border-top: 2px solid var(--nuit-000);
}

.total-ligne .lib { font-weight: 700; }
.total-ligne .lib small { display: block; font-weight: 500; font-size: .8125rem; color: #6B6153; }
.total-ligne .val {
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  letter-spacing: -.04em; white-space: nowrap;
}

/* Choix des coups de main : des pastilles, pas une liste administrative. */
.aides { display: flex; flex-wrap: wrap; gap: var(--pas-2); }

.aide-choix {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  font-size: .875rem;
  font-weight: 600;
  border: 1.5px solid var(--jour-200);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.aide-choix:hover { background: var(--jour-100); }
.aide-choix input { width: 1rem; height: 1rem; margin: 0; flex: none; accent-color: var(--nuit-000); }
.aide-choix:has(input:checked) { border-color: var(--nuit-000); background: var(--jour-100); }

.pot-de-miel {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.erreurs {
  margin: 0 0 var(--pas-5);
  padding: var(--pas-4) var(--pas-5);
  border-radius: 12px;
  background: #FCE9E4;
  border: 1.5px solid #B4341C;
  color: #7C2113;
}
.erreurs p { margin: 0; font-weight: 700; }
.erreurs ul { margin: var(--pas-2) 0 0; padding-left: 1.15rem; }

/* ================================================================= questions */

.question {
  border-bottom: 1px solid var(--trait);
}

.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-4);
  padding: var(--pas-5) 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
}

.question summary::-webkit-details-marker { display: none; }

.question summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ap-jaune);
  transition: transform .3s var(--sortie);
}

.question[open] summary::after { transform: rotate(45deg); }

.question p { margin: 0 0 var(--pas-5); max-width: 62ch; color: var(--texte-doux); }

/* ================================================================= confirmation */

.ticket {
  padding: var(--pas-7) var(--pas-6);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  background: var(--nuit-100);
  text-align: center;
}

.ticket-code {
  display: inline-block;
  margin: var(--pas-4) 0 0;
  padding: var(--pas-3) var(--pas-5);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--ap-jaune);
  border: 1px dashed rgba(218,218,8,.5);
  border-radius: 12px;
}

.recap { width: 100%; margin: var(--pas-6) 0 0; border-collapse: collapse; text-align: left; }
.recap th, .recap td { padding: var(--pas-3) 0; border-bottom: 1px solid var(--trait); }
.recap th { font-weight: 500; color: var(--texte-doux); }
.recap td { text-align: right; font-weight: 700; }
.recap tr:last-child th, .recap tr:last-child td {
  border-bottom: 0; font-size: 1.25rem; color: var(--ap-jaune);
}

.qr-cadre {
  display: inline-block;
  padding: var(--pas-4);
  background: #FFFFFF;      /* blanc pur : ce que lisent les scanners */
  border-radius: var(--rayon);
}
.qr-cadre svg { display: block; width: 100%; max-width: 260px; height: auto; }

.virement { margin-top: var(--pas-6); text-align: left; }
.virement dl { margin: 0; display: grid; gap: var(--pas-1) var(--pas-5); }
.virement dt { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.virement dd { margin: 0 0 var(--pas-4); font-weight: 700; word-break: break-word; }
.virement dd.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.note {
  margin-top: var(--pas-5);
  padding: var(--pas-4) var(--pas-5);
  border: 1px solid rgba(218,218,8,.32);
  border-radius: 12px;
  background: rgba(218,218,8,.07);
  font-size: .9375rem;
  text-align: left;
}

.note--attention {
  border-color: rgba(230,83,135,.45);
  background: rgba(230,83,135,.09);
}

.actions { display: flex; flex-wrap: wrap; gap: var(--pas-3); }
.actions .bouton { flex: 1 1 13rem; }

/* ================================================================= pied */

.pied {
  padding: var(--pas-8) 0 var(--pas-7);
  border-top: 1px solid var(--trait);
  color: var(--texte-doux);
  font-size: .9375rem;
}

.pied-haut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-5);
}

/* ================================================================= admin */

.admin { padding: var(--pas-6) 0 var(--pas-8); }

.admin-barre {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--pas-3);
  margin-bottom: var(--pas-6);
}

.chiffres { display: grid; gap: var(--pas-3); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--pas-6); }

.chiffre { padding: var(--pas-5); border: 1px solid var(--trait); border-radius: var(--rayon); }
.chiffre .val { font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ap-jaune); }
.chiffre .lib { margin-top: var(--pas-2); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }

.tableau-suite { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--trait); border-radius: var(--rayon); }
table.liste { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.liste th, table.liste td { padding: var(--pas-3) var(--pas-4); border-bottom: 1px solid var(--trait); text-align: left; white-space: nowrap; }
table.liste th { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); font-weight: 700; }
table.liste tr:last-child td { border-bottom: 0; }

.etat { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .8125rem; font-weight: 700; }
.etat--paye    { background: rgba(120,220,150,.15); color: #7BE0A0; }
.etat--attente { background: rgba(235,116,24,.16);  color: #F0A25E; }

.mini { min-height: 0; padding: .45rem .9rem; font-size: .875rem; }

.libre { white-space: normal; }
.libre--etroit { white-space: normal; max-width: 16rem; }

.m0 { margin: 0; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }

/* ================================================================= paliers */

@media (min-width: 34rem) {
  .panneau-grille { grid-template-columns: repeat(3, 1fr); }
  .chiffres { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 52rem) {
  .propos { grid-template-columns: 1fr 1.15fr; gap: var(--pas-8); }
  .moment { grid-template-columns: 9rem 1fr; }
  .panneau { padding: var(--pas-6) var(--pas-7); }
  .formulaire { padding: var(--pas-8); }
}

@media (max-width: 26rem) {
  .duo { grid-template-columns: 1fr; }
  .total-ligne { flex-direction: column; align-items: flex-start; }
}

/* Le fond vitré n'est tenable que si le flou existe : sinon on l'opacifie. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panneau { background: var(--nuit-200); }
}

@media print {
  body { background: #fff; color: #000; }
  .hero::before, .hero::after, .no-print, .bouton { display: none !important; }
  .ticket, .qr-cadre { border: 1px solid #999; background: #fff; color: #000; }
  .ticket-code { color: #000; border-color: #666; }
  .recap th, .recap td { border-color: #ccc; }
  .recap tr:last-child th, .recap tr:last-child td { color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}