/* Repas solidaires étudiants — Le Chalet du Parc. Langage de design SUPERWASTE Connect :
   invariants de la suite (Fraunces · DM Sans · Space Grotesk, neutres chauds, charbon olivé, cartes à bandeau haut 4 px,
   pictos en trait fin, aucun emoji) ; dialecte = vert profond du Chalet du Parc (vif pour les accents, foncé pour texte et CTA). */
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-latin.woff2?v=48282a415ec22e31') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-latin.woff2?v=aa530716b0d35186') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-latin.woff2?v=a0d054c4af557de2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  color-scheme: light;
  /* Terreau commun de la suite */
  --papier: #fbf8ef; --creme: #f6f1e4; --lin: #e9e1cf; --bordure: #d6c8a4; --mute: #57513f; --encre: #2a281f;
  --charbon: #1e2017; --charbon-clair: #262a20;
  /* Dialecte du Chalet du Parc */
  --teinte: #4f8c83; --teinte-fonce: #014d4a; --teinte-10: rgba(1, 77, 74, .1); --teinte-20: rgba(1, 77, 74, .2);
  /* Quatuor de la suite (emblème, barre) */
  --olive: #7a9b54; --terracotta: #cf7d4c; --prune: #9a86ab; --ardoise: #6f93a6;
  /* États */
  --rouge: #a8332a; --rouge-10: rgba(168, 51, 42, .1); --ambre: #8a5a12; --ambre-10: rgba(191, 158, 57, .18);
  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --corps: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --data: 'Space Grotesk', ui-monospace, 'SF Mono', Menlo, monospace;
  --rayon: 18px; --rayon-bouton: 11px; --gouttiere: clamp(16px, 4vw, 32px); --focus: var(--teinte-fonce);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 17px/1.6 var(--corps); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--teinte-fonce); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.conteneur { width: 100%; max-width: calc(1080px + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.conteneur--etroit { max-width: calc(640px + 2 * var(--gouttiere)); }
.k-lbl { font: 600 12px/1.2 var(--data); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.picto { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Barre (charbon olivé, logo du Chalet, quatuor de la suite) */
.entete { background: var(--charbon); color: var(--creme); --focus: var(--creme); }
.entete .conteneur { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.entete__logo { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin-right: auto; }
.entete__logo img { height: 40px; width: auto; }
.entete__nom { display: grid; gap: 2px; font: 500 18px/1.1 var(--titre); }
.entete__nom span { font: 600 11px/1.2 var(--data); letter-spacing: .14em; text-transform: uppercase; color: #a9cfc9; }
.quatuor { display: inline-flex; gap: 5px; }
.quatuor i { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); }
.quatuor i:nth-child(2) { background: var(--terracotta); }
.quatuor i:nth-child(3) { background: var(--prune); }
.quatuor i:nth-child(4) { background: var(--ardoise); }
.entete__qui { font: 500 14px/1.2 var(--data); color: #c9c3ad; }

/* Boutons et champs */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border: 1.5px solid transparent;
  border-radius: var(--rayon-bouton); font: 600 16px/1.2 var(--corps); cursor: pointer; text-decoration: none;
  background: var(--teinte-fonce); color: var(--creme);
}
.bouton:hover { background: var(--charbon); }
.bouton:disabled { opacity: .55; cursor: not-allowed; }
.bouton--contour { background: transparent; color: var(--teinte-fonce); border-color: var(--teinte-fonce); }
.bouton--contour:hover { background: var(--teinte-10); color: var(--teinte-fonce); }
.bouton--clair { background: var(--creme); color: var(--charbon); }
.bouton--clair:hover { background: var(--lin); }
.bouton--valider { background: var(--teinte-fonce); color: var(--creme); }
.bouton--danger { background: transparent; color: var(--rouge); border-color: var(--rouge); }
.bouton--danger:hover { background: var(--rouge-10); }
.bouton--petit { padding: 8px 13px; font-size: 14px; }
.bouton--large { width: 100%; }

.champ { display: grid; gap: 6px; }
.champ label, .champ .etiquette { font-weight: 600; font-size: 15px; }
.champ .aide { font-size: 14px; color: var(--mute); }
.champ input, .champ select, .champ textarea, .table input:not([type="checkbox"]) {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--bordure); border-radius: var(--rayon-bouton); background: var(--papier);
  font: 16px/1.4 var(--corps); color: var(--encre);
}
.champ input:focus, .champ select:focus, .table input:focus { border-color: var(--teinte-fonce); outline: none; box-shadow: 0 0 0 3px var(--teinte-20); }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.case input { width: 19px; height: 19px; margin-top: 2px; flex: none; accent-color: var(--teinte-fonce); }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .grille-champs { grid-template-columns: 1fr; } }

.message { padding: 13px 16px; border-radius: 12px; font-size: 15px; border: 1px solid transparent; }
.message--erreur { background: var(--rouge-10); color: var(--rouge); border-color: rgba(168, 51, 42, .25); }
.message--ok { background: var(--teinte-10); color: var(--teinte-fonce); border-color: var(--teinte-20); }
.message--info { background: var(--creme); color: var(--encre); border-color: var(--lin); }
.message--alerte { background: var(--ambre-10); color: var(--ambre); border-color: rgba(191, 158, 57, .35); }

/* Carte de la suite : fond crème, coins 18 px, bandeau haut 4 px à la teinte */
.carte { padding: clamp(22px, 4vw, 34px); border-radius: var(--rayon); background: var(--creme); border: 1px solid var(--lin); border-top: 4px solid var(--teinte); }

/* Accueil étudiant */
.hero { position: relative; color: var(--creme); background: var(--charbon); overflow: hidden; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.hero .conteneur { position: relative; padding-block: clamp(40px, 8vw, 92px); }
.hero__sur { font: 600 12px/1.2 var(--data); letter-spacing: .14em; text-transform: uppercase; color: #a9cfc9; }
.hero h1 { font: 500 clamp(36px, 6vw, 66px)/1.04 var(--titre); margin: 12px 0 16px; max-width: 15ch; letter-spacing: -.01em; }
.hero h1 em { font-style: italic; color: #cfe6e2; }
.hero__texte { font-size: clamp(18px, 1vw + 12px, 21px); max-width: 44ch; color: #efe9d8; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.puces li { padding: 6px 12px; border-radius: 999px; background: rgba(246, 241, 228, .14); border: 1px solid rgba(246, 241, 228, .3);
  font: 600 12px/1.3 var(--data); letter-spacing: .1em; text-transform: uppercase; }
.compteur { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.compteur strong { font: 600 clamp(40px, 6vw, 58px)/1 var(--data); color: #cfe6e2; }

.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-block: clamp(32px, 5vw, 52px) 18px; }
.etape { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: var(--rayon); background: var(--creme); border: 1px solid var(--lin); border-top: 4px solid var(--teinte); }
.etape__tete { display: flex; align-items: center; justify-content: space-between; color: var(--teinte-fonce); }
.etape__tete .picto { width: 30px; height: 30px; }
.etape__num { font: 600 13px/1 var(--data); letter-spacing: .12em; color: var(--mute); }
.etape h2 { font: 500 21px/1.2 var(--titre); }
.etape p { color: var(--mute); font-size: 15px; }
@media (max-width: 760px) { .etapes { grid-template-columns: 1fr; } }

.financement { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--rayon); background: var(--teinte-10); color: var(--teinte-fonce); font-size: 15px; margin-bottom: clamp(28px, 4vw, 44px); }
.financement .picto { margin-top: 2px; }
.financement a { font-weight: 600; }

.formulaire { display: grid; gap: 18px; }
.formulaire h2 { font: 500 clamp(24px, 2vw + 12px, 32px)/1.15 var(--titre); }
.section { padding-bottom: clamp(48px, 7vw, 88px); }
.infos { display: grid; gap: 6px; margin-top: 18px; color: var(--mute); font-size: 15px; }

/* Billet */
.billet { margin-block: clamp(24px, 5vw, 56px); border-radius: 22px; overflow: hidden; background: var(--creme); border: 1px solid var(--lin); border-top: 4px solid var(--teinte); box-shadow: 0 24px 44px -32px rgba(30, 32, 23, .5); }
.billet__haut { background: var(--charbon); color: var(--creme); padding: 22px 24px; }
.billet__haut p { font: 600 12px/1.2 var(--data); letter-spacing: .14em; text-transform: uppercase; color: #a9cfc9; }
.billet__haut h1 { font: 500 clamp(24px, 4vw, 32px)/1.15 var(--titre); margin-top: 8px; }
.billet__corps { display: grid; gap: 16px; padding: 24px; }
.billet__qr { width: min(260px, 70vw); margin-inline: auto; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--lin); }
.billet__code { text-align: center; font: 600 28px/1 var(--data); letter-spacing: .22em; color: var(--teinte-fonce); }
.billet__ligne { display: flex; justify-content: space-between; gap: 12px; padding-block: 10px; border-top: 1px dashed var(--bordure); font-size: 15px; }
.billet__ligne span:first-child { color: var(--mute); }
.billet__ligne span:last-child { font-weight: 600; text-align: right; }
.statut { justify-self: center; padding: 6px 14px; border-radius: 999px; font: 600 12px/1.2 var(--data); letter-spacing: .12em; text-transform: uppercase; }
.statut--confirme { background: var(--teinte-10); color: var(--teinte-fonce); }
.statut--servi { background: var(--teinte-fonce); color: var(--creme); }
.statut--attente { background: var(--lin); color: var(--encre); }
.statut--annule, .statut--expire { background: var(--rouge-10); color: var(--rouge); }
.zone-equipe { padding: 18px; border-radius: 14px; background: var(--lin); display: grid; gap: 12px; }

/* Espace équipe */
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin: 24px 0 18px; }
.onglets button { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--bordure); background: var(--papier); font: 600 14px/1 var(--corps); color: var(--encre); cursor: pointer; }
.onglets button[aria-selected="true"] { background: var(--charbon); color: var(--creme); border-color: var(--charbon); }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.chiffres div { padding: 16px; border-radius: var(--rayon); background: var(--creme); border: 1px solid var(--lin); border-top: 4px solid var(--teinte); }
.chiffres strong { display: block; font: 600 30px/1.1 var(--data); color: var(--teinte-fonce); }
.chiffres span { font-size: 14px; color: var(--mute); }
@media (max-width: 760px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }
.barre-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.barre-outils .champ { min-width: 220px; flex: 1; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 10px 8px; border-bottom: 1px solid var(--lin); text-align: left; vertical-align: middle; }
.table th { font: 600 11px/1.2 var(--data); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.table td.actions { text-align: right; white-space: nowrap; }
.table td strong { font-family: var(--data); letter-spacing: .08em; }
.table-defile { overflow-x: auto; }
.pastille { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 600 11px/1.3 var(--data); letter-spacing: .08em; text-transform: uppercase; }
.pastille--confirme { background: var(--teinte-10); color: var(--teinte-fonce); }
.pastille--servi { background: var(--teinte-fonce); color: var(--creme); }
.pastille--annule, .pastille--expire { background: var(--rouge-10); color: var(--rouge); }
.pastille--en_attente { background: var(--lin); color: var(--encre); }
.bloc { margin-block: 22px; display: grid; gap: 14px; }
.bloc h2 { font: 500 22px/1.2 var(--titre); }
.ligne-champs { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.ligne-champs .champ { flex: 1; min-width: 160px; }
.jours-semaine { display: flex; flex-wrap: wrap; gap: 10px; }
.connexion { max-width: 440px; margin: clamp(32px, 7vw, 80px) auto; }

/* Pied */
.pied { background: var(--charbon); color: #c9c3ad; font-size: 14px; padding-block: 26px; --focus: var(--creme); }
.pied .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.pied a { color: var(--creme); }
.page-texte { padding-block: clamp(32px, 6vw, 64px); }
.page-texte h1 { font: 500 clamp(30px, 4vw, 46px)/1.1 var(--titre); margin-bottom: 20px; }
.page-texte h2 { font: 500 22px/1.25 var(--titre); margin: 28px 0 10px; }
.page-texte p, .page-texte li { color: var(--mute); }
.page-texte p + p { margin-top: .7em; }
.page-texte ul { list-style: disc; padding-left: 1.2em; }