/* ═══════════════════════════════════════════════════════════════════════════
   LA VITRINE — la charte du design Claude Design du 19.09.2026 (PRESENTATION/
   TRANSPOSITION.md), transposée en classes : la colonne vertébrale reste celle de
   la marque, noir, bleu, crème ; le bleu ne sert qu'à ce sur quoi on clique et à
   ce qui est en direct ; trois polices, trois rôles : capitales très grasses pour
   les titres, Inter Tight pour ce qui se lit, Roboto Mono pour ce qui se compte.
   Aucune ressource distante : polices en woff2 dans fonts/, jamais d'un CDN.
   Les gabarits pas encore transposés (camps, fiche, inscription…) gardent leurs
   classes, servies ici avec les nouveaux jetons.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Polices locales (OFL) ─────────────────────────────────────────────── */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/inter-tight-latin-nvar.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/inter-tight-latin-ext-nvar.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Le substitut de Hanson (design system : « substitut assumé ») et la mono des chiffres,
   téléchargés de Google Fonts le 19.09.2026 et servis d'ici (fonts/LICENCES.md). Le jour où
   David fournit Hanson, on dépose ses fichiers et --police-titre les prend en premier. */
@font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/archivo-black-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/archivo-black-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/roboto-mono-latin-nvar.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/roboto-mono-latin-ext-nvar.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Les jetons ────────────────────────────────────────────────────────── */
:root {
  --couleur-noir: #0F0F0F; --couleur-encre-2: #3A3A3A; --couleur-encre-3: #1F1F1F;
  --couleur-gris: #6B6B6B; --couleur-gris-clair: #8A8A8A; --couleur-gris-2: #C8C8C8; --couleur-gris-3: #B4B4B4; --couleur-gris-4: #5E5E5E;
  --couleur-blanc: #FFFFFF; --couleur-creme: #F4F3EF; --couleur-creme-2: #F0EEE9;
  --couleur-sable: #EBE8E0; --couleur-sable-fonce: #DDD8CC; --couleur-trait: #E1DED6; --couleur-trait-fonce: #D3CDBF;
  --accent: #0D38FF; --couleur-bleu: var(--accent); --couleur-bleu-fonce: #0A2BC4; --couleur-bleu-clair: #7C93FF; --couleur-bleu-pale: #E9EAFE;
  --couleur-vert: #1E9E5A; --couleur-vert-fonce: #146B3D; --couleur-vert-pale: #E5F3EA; --couleur-vert-clair: #4ED88C;
  --couleur-orange: #E08A1E; --couleur-orange-fonce: #8A5410; --couleur-orange-pale: #FBEBD2;
  --couleur-rouge: #D14343; --couleur-rouge-fonce: #8F2B2B; --couleur-rouge-pale: #F7DDDD;
  --couleur-violet: #6E3AD6; --couleur-ardoise: #3E4C59;
  --sombre-2: #171717; --sombre-3: #1A1A1A; --sombre-4: #262626; --sombre-5: #2A2A2A;
  --police-titre: 'Hanson', 'Archivo Black', 'Arial Black', 'Inter Tight', system-ui, sans-serif;
  --police-texte: 'Inter Tight', Inter, ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --police-mono: 'Roboto Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --rayon: 4px; --pilule: 999px; --large: 1280px; --gouttiere: clamp(16px, 4vw, 40px);
  --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px; --espace-5: 24px;
  --espace-6: 32px; --espace-7: 48px; --espace-8: 64px; --espace-9: 96px;
  /* alias de l'ancienne charte : les gabarits pas encore transposés les utilisent encore */
  --noir: var(--couleur-noir); --bleu: var(--accent); --bleu-fonce: var(--couleur-bleu-fonce);
  --sable: var(--couleur-sable); --sable-fonce: var(--couleur-sable-fonce); --blanc: var(--couleur-creme);
  --pur: var(--couleur-blanc); --gris: var(--couleur-gris); --gris-clair: var(--couleur-gris-clair);
  --trait: var(--couleur-trait); --vert: var(--couleur-vert); --orange: var(--couleur-orange); --rouge: var(--couleur-rouge);
  --display: var(--police-titre); --texte: var(--police-texte); --mono: var(--police-mono);
}

/* ── La base ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--couleur-creme); color: var(--couleur-noir); font: 400 15px/1.55 var(--police-texte); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, .display { font-family: var(--police-titre); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.95; margin: 0; }
h1 { font-size: clamp(38px, 5.2vw, 66px); line-height: 0.9; letter-spacing: -0.02em; }
h2 { font-size: clamp(30px, 4vw, 52px); }
h2.moyen { font-size: clamp(26px, 2.8vw, 36px); line-height: 1; }
h3 { font-size: 20px; line-height: 1.05; }
p { margin: 0 0 1rem; }
.kicker { display: block; font: 500 12px/1 var(--police-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.kicker.clair { color: var(--couleur-bleu-clair); }
.etiquette, .mono { font-family: var(--police-mono); font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--couleur-gris); }
.mono { font-size: 0.8rem; letter-spacing: 0.04em; }
.lien { font: 600 14px/1 var(--police-texte); color: var(--accent); text-decoration: none; }
.lien:hover { text-decoration: underline; }
.lien.clair { color: var(--couleur-creme); font-weight: 500; font-size: 13px; }
.doux { color: var(--couleur-gris); }
.doux.clair { color: var(--couleur-gris-3); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.enveloppe { max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }
.enveloppe.deux { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.enveloppe.deux.large-gauche { grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.enveloppe.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 860px) { .enveloppe.deux, .enveloppe.deux.large-gauche { grid-template-columns: 1fr; gap: 28px; } .enveloppe.trois { grid-template-columns: 1fr; gap: 20px; } }

/* ── Les boutons et les pastilles ──────────────────────────────────────── */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: var(--pilule); border: 0; background: var(--accent); color: var(--couleur-blanc); font: 600 15px/1 var(--police-texte); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.bouton:hover { background: var(--couleur-bleu-fonce); color: var(--couleur-blanc); }
.bouton.contour { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
.bouton.contour:hover { background: var(--accent); color: var(--couleur-blanc); }
.bouton.contour-noir { background: transparent; border: 1.5px solid var(--couleur-noir); color: var(--couleur-noir); }
.bouton.contour-noir:hover { background: var(--couleur-noir); color: var(--couleur-creme); }
.bouton.noir { background: var(--couleur-noir); }
.bouton.noir:hover { background: var(--sombre-5); }
.bouton.clair { background: var(--couleur-blanc); color: var(--couleur-noir); border: 1px solid var(--couleur-trait); }
.bouton.clair:hover { background: var(--couleur-sable); }
.bouton.vert { background: var(--couleur-vert); }
.bouton.vert:hover { background: #18854B; }
.bouton.petit { min-height: 44px; padding: 0 20px; font-size: 14px; }
.bouton[disabled], .bouton.inactif { background: var(--couleur-sable-fonce); color: var(--couleur-gris); cursor: not-allowed; }
.pilule, .pastille { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--pilule); background: var(--couleur-sable); color: #5A5A5A; font: 500 11px/1 var(--police-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.pilule.bleu, .pastille.bleu { background: var(--couleur-bleu-pale); color: var(--couleur-bleu-fonce); }
.pilule.vert, .pastille.vert { background: var(--couleur-vert-pale); color: var(--couleur-vert-fonce); }
.pilule.orange, .pastille.orange { background: var(--couleur-orange-pale); color: var(--couleur-orange-fonce); }
.pilule.rouge, .pastille.rouge { background: var(--couleur-rouge-pale); color: var(--couleur-rouge-fonce); }
.pilule.noir, .pastille.noir { background: var(--couleur-noir); color: var(--couleur-creme); }
.pilule.sombre { background: var(--sombre-5); color: var(--couleur-gris-3); height: 24px; padding: 0 10px; font-size: 10px; vertical-align: middle; }
.pilule.accent { background: var(--accent); color: var(--couleur-blanc); letter-spacing: 0; text-transform: none; font-size: 12px; }

/* ── L'en-tête ─────────────────────────────────────────────────────────── */
.entete { position: sticky; top: 0; z-index: 20; background: var(--couleur-noir); color: var(--couleur-creme); }
.entete .enveloppe { display: flex; align-items: center; gap: 16px; height: 76px; }
.marque { display: flex; align-items: center; text-decoration: none; }
.marque img { height: 34px; width: auto; }
.entete .menu { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.entete .menu a { text-decoration: none; font: 500 14px/1 var(--police-texte); color: var(--couleur-creme); padding: 6px 0; border-bottom: 2px solid transparent; }
.entete .menu a:hover, .entete .menu a.actif { border-color: var(--accent); }
.entete .menu a.bouton { padding: 0 20px; border-bottom: 0; }
.entete .tribune-mobile, .menu-bouton { display: none; }
.menu-bouton { margin-left: auto; width: 44px; height: 44px; padding: 11px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.menu-bouton span { display: block; height: 2px; background: var(--couleur-creme); }
@media (max-width: 860px) {
  .entete .enveloppe { height: 62px; gap: 12px; }
  .marque img { height: 26px; }
  .entete .tribune-mobile { display: inline-flex; margin-left: auto; min-height: 36px; padding: 0 14px; font-size: 13px; }
  .menu-bouton { display: flex; margin-left: 0; }
  .entete .menu { display: none; position: absolute; left: 0; right: 0; top: 62px; flex-direction: column; align-items: stretch; gap: 0; background: var(--couleur-noir); border-top: 1px solid var(--sombre-4); padding: 8px 0 12px; }
  .entete .menu.ouvert { display: flex; }
  .entete .menu a { padding: 14px var(--gouttiere); font-size: 16px; border-bottom: 1px solid var(--sombre-4); }
  .entete .menu a.bouton { display: none; }
}

/* ── Les sections ──────────────────────────────────────────────────────── */
.section { padding: 72px 0; }
.section.compact { padding: 56px 0; }
.section.creme { background: var(--couleur-creme); }
.section.sable { background: var(--couleur-sable); }
.section.noir { background: var(--couleur-noir); color: var(--couleur-creme); }
.section.noir h2, .section.noir h3 { color: var(--couleur-blanc); }
.section.noir p { color: var(--couleur-gris-2); }
.section-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.section-tete .kicker { margin-bottom: 10px; }
.section-tete .sous { max-width: 72ch; font-size: 17px; line-height: 1.55; color: var(--couleur-encre-2); margin: 10px 0 0; }
.section.noir .section-tete .mono { color: var(--couleur-gris-3); }
.section-tete .mono { color: var(--accent); margin-bottom: 0.4rem; }
.texte { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.texte p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--couleur-encre-3); }
.texte p.grand { font-size: 19px; line-height: 1.55; max-width: 44ch; }
.texte .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.grille { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grille.deux { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grille.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grille.trois { grid-template-columns: 1fr; } .section { padding: 40px 0; } .section.compact { padding: 32px 0; } }
@media (max-width: 560px) { .grille.quatre { grid-template-columns: 1fr; } }
.ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── Les réserves d'image (en attendant les photos de David) ──────────── */
.reserve { display: grid; place-items: center; border-radius: var(--rayon); background: repeating-linear-gradient(135deg, var(--couleur-sable) 0 10px, var(--couleur-trait) 10px 20px); text-decoration: none; }
.reserve .etiquette { font-size: 10px; }
.reserve.quatre-tiers { aspect-ratio: 4 / 3; }
.reserve.seize-neuf { aspect-ratio: 16 / 9; }
.reserve.seize-dix { aspect-ratio: 16 / 10; border-radius: 0; }
.reserve.carre { aspect-ratio: 1; background-size: 16px 16px; }

/* ── L'accueil : la ligne des camps (piste B) ──────────────────────────── */
.bandeau-places { background: var(--couleur-noir); color: var(--couleur-creme); padding: 20px 0 4px; }
.bandeau-places .ligne { padding-bottom: 12px; }
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--sombre-4); border-top: 1px solid var(--sombre-4); border-bottom: 1px solid var(--sombre-4); }
.tuile { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--couleur-noir); color: var(--couleur-creme); text-decoration: none; transition: background .15s; }
.tuile:hover { background: var(--sombre-2); }
.tuile .quand { font: 500 11px/1.3 var(--police-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--couleur-gris-clair); }
.tuile .nom { font: 700 17px/1.2 var(--police-texte); color: var(--couleur-blanc); }
.tuile .infos { font: 500 12px/1 var(--police-mono); color: var(--couleur-gris-clair); }
.tuile .places { margin-top: 2px; font: 700 13px/1 var(--police-texte); color: var(--couleur-vert-clair); }
.tuile .places.orange { color: var(--couleur-orange); }
.tuile .places.gris { color: var(--couleur-gris-3); }
.tuile .places.bleu { color: var(--couleur-bleu-clair); }
@media (max-width: 1080px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tuiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .tuile { flex: 0 0 78%; scroll-snap-align: start; } }

/* ── L'accueil : la promesse ───────────────────────────────────────────── */
.promesse { background: var(--couleur-creme); padding: 56px 0; }
.promesse .texte p { max-width: 48ch; font-size: 19px; line-height: 1.55; }
@media (max-width: 860px) { .promesse { padding: 32px 0; } .promesse .reserve { order: -1; } }

/* ── La carte camp (traitement 2 : barre de places) ────────────────────── */
.carte-camp { background: var(--couleur-blanc); border: 1px solid var(--couleur-trait); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; }
.carte-camp .corps { padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.carte-camp h3 { font-size: 21px; }
.carte-camp h3 a { text-decoration: none; }
.carte-camp h3 a:hover { color: var(--accent); }
.carte-camp .details { font: 500 12px/1.7 var(--police-mono); color: var(--couleur-encre-2); }
.carte-camp .details .prix { font-size: 15px; font-weight: 700; color: var(--couleur-noir); }
.carte-camp .places { margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.carte-camp .etat { font: 700 15px/1 var(--police-texte); color: var(--couleur-vert-fonce); }
.carte-camp .compteur { font: 500 11px/1 var(--police-mono); color: var(--couleur-gris); }
.carte-camp .jauge { width: 100%; height: 8px; }
.carte-camp .jauge .fond { fill: var(--couleur-sable); }
.carte-camp .jauge .rempli { fill: var(--couleur-vert); }
.carte-camp .bouton { margin-top: 4px; min-height: 44px; font-size: 14px; }
.carte-camp.tendu .etat { color: var(--couleur-orange-fonce); }
.carte-camp.tendu .jauge .rempli { fill: var(--couleur-orange); }
.carte-camp.complet .etat, .carte-camp.passe .etat { color: var(--couleur-gris); }
.carte-camp.complet .jauge .rempli, .carte-camp.passe .jauge .rempli { fill: var(--couleur-gris); }

/* ── L'accueil : pourquoi, carnet, clubs pro, chiffres, à propos… ──────── */
.differences { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.difference { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 2px solid var(--accent); }
.difference .numero, .case-carnet .numero { font: 500 12px/1 var(--police-mono); color: var(--couleur-bleu-clair); }
.difference h3 { font: 700 20px/1.2 var(--police-texte); text-transform: none; letter-spacing: 0; }
.difference p { margin: 0; font-size: 15px; line-height: 1.55; }
.academies { margin-top: 34px; border-top: 1px solid var(--sombre-4); padding-top: 26px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: baseline; }
.academies .titre { font: 400 22px/1 var(--police-titre); text-transform: uppercase; color: var(--couleur-blanc); white-space: nowrap; }
.academies p { margin: 0; max-width: 78ch; font-size: 16px; line-height: 1.6; }
@media (max-width: 1080px) { .differences { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .differences { grid-template-columns: 1fr; } .academies { grid-template-columns: 1fr; gap: 12px; } }
.carnet-accueil .enveloppe.deux { grid-template-columns: 1fr 1.15fr; }
.carnet-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--couleur-sable-fonce); border: 1px solid var(--couleur-sable-fonce); border-radius: var(--rayon); overflow: hidden; }
.case-carnet { background: var(--couleur-creme); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.case-carnet .numero { font-size: 11px; color: var(--accent); }
.case-carnet h3 { font: 700 17px/1.2 var(--police-texte); text-transform: none; letter-spacing: 0; }
.case-carnet p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--couleur-encre-2); }
@media (max-width: 860px) { .carnet-accueil .enveloppe.deux { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .carnet-grille { grid-template-columns: 1fr; } }
.carte-club { background: var(--couleur-blanc); border: 1px solid var(--couleur-trait); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; }
.carte-club .reserve { border-radius: 0; }
.carte-club .corps { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-club .titre-ecu { display: flex; align-items: center; gap: 10px; }
.carte-club .ecu { width: 34px; height: 34px; border-radius: var(--pilule); background: var(--couleur-sable); display: grid; place-items: center; font: 500 8px/1 var(--police-mono); color: var(--couleur-gris); flex: 0 0 auto; }
.carte-club h3 { font-size: 20px; line-height: 1; }
.carte-club p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--couleur-encre-2); }
.carte-club .lien { margin-top: auto; padding-top: 12px; font-size: 13px; }
.chiffres-bande { background: var(--accent); color: var(--couleur-blanc); padding: 56px 0; }
.chiffre { display: flex; flex-direction: column; gap: 8px; }
.chiffre .grand { font: 400 clamp(48px, 5vw, 64px)/0.9 var(--police-titre); letter-spacing: -0.02em; color: inherit; }
.chiffre .legende { font: 500 14px/1.4 var(--police-texte); }
.chiffre .legende .pilule { margin-left: 6px; }
.chiffre .mono { color: var(--couleur-gris); margin-top: 0.4rem; }
.a-propos .texte p { color: var(--couleur-encre-3); }
.partenaires .ligne { margin-bottom: 24px; }
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.logo { height: 72px; background: var(--couleur-creme); border: 1px solid var(--couleur-sable-fonce); border-radius: var(--rayon); display: grid; place-items: center; text-align: center; font: 500 10px/1.4 var(--police-mono); color: var(--couleur-gris); }
@media (max-width: 860px) { .logos { grid-template-columns: repeat(3, 1fr); } }
.produits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.produit { display: flex; flex-direction: column; gap: 12px; }
.produit h3 { font: 700 17px/1.2 var(--police-texte); text-transform: none; letter-spacing: 0; }
.produit .lien { font-size: 13px; }
.actus { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.actus p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--couleur-encre-2); }
.actus .vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.actus .note { font: 500 10px/1.5 var(--police-mono); color: var(--couleur-gris); }
@media (max-width: 560px) { .produits { grid-template-columns: 1fr; } }
.newsletter h2 { font-size: clamp(30px, 3.2vw, 40px); line-height: 0.98; }
.newsletter .texte p { max-width: 44ch; }
.formulaire-newsletter { display: flex; flex-direction: column; gap: 14px; }
.formulaire-newsletter .ligne { display: flex; gap: 10px; flex-wrap: nowrap; }
.formulaire-newsletter input[type="email"] { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 1px solid var(--couleur-encre-2); border-radius: var(--rayon); background: var(--sombre-3); color: var(--couleur-creme); font: 400 15px/1 var(--police-texte); }
.formulaire-newsletter input[type="email"]:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.formulaire-newsletter .bouton { min-height: 52px; }
.formulaire-newsletter .consentement { display: flex; gap: 10px; align-items: flex-start; font: 400 13px/1.5 var(--police-texte); color: var(--couleur-gris-3); cursor: pointer; }
.formulaire-newsletter .consentement input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
@media (max-width: 480px) { .formulaire-newsletter .ligne { flex-wrap: wrap; } .formulaire-newsletter .bouton { width: 100%; } }

/* ── Le pied de page ───────────────────────────────────────────────────── */
.pied-de-page { background: var(--couleur-noir); color: var(--couleur-gris-clair); border-top: 1px solid var(--sombre-4); padding: 44px 0 24px; }
.pied-de-page .enveloppe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.pied-de-page .etiquette { font-size: 10px; letter-spacing: 0.14em; color: var(--couleur-gris-4); margin-bottom: 10px; }
.pied-de-page p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--couleur-creme); }
.pied-de-page a { text-decoration: none; color: var(--couleur-creme); }
.pied-de-page a:hover { text-decoration: underline; }
.pied-de-page .bas { grid-column: 1 / -1; border-top: 1px solid var(--sombre-4); padding-top: 16px; font-size: 12px; color: var(--couleur-gris-clair); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) { .pied-de-page .enveloppe { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 480px) { .pied-de-page .enveloppe { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Les gabarits pas encore transposés (camps, fiche camp, programme, carnet, pages,
   inscription, merci) : leurs classes, servies avec les nouveaux jetons. Lots 2 à 4.
   ═══════════════════════════════════════════════════════════════════════════ */
.heros { background: var(--couleur-noir); color: var(--couleur-creme); padding: clamp(40px, 8vw, 96px) 0 clamp(32px, 6vw, 72px); }
.heros h1 { max-width: 14ch; color: var(--couleur-blanc); }
.heros p { max-width: 52ch; font-size: 19px; line-height: 1.55; color: var(--couleur-creme); margin: 24px 0 32px; }
.heros .mono { color: var(--couleur-bleu-clair); margin-bottom: 16px; letter-spacing: 0.16em; font-size: 12px; font-weight: 500; }
.heros .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.heros.petit { padding: clamp(32px, 6vw, 64px) 0; }
.heros.petit h1 { font-size: clamp(30px, 4.4vw, 52px); }
.heros.petit p { margin: 16px 0 0; }
.prog-carte { background: var(--couleur-blanc); border-left: 6px solid var(--accent); padding: 20px 22px; border-radius: var(--rayon); text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.prog-carte .mono { color: var(--couleur-gris); }
.prog-carte p { color: var(--couleur-encre-2); font-size: 14px; line-height: 1.5; margin: 0; }
.prog-carte:hover { box-shadow: 0 12px 30px rgba(15,15,15,0.08); }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.section.noir .chiffre .grand { color: var(--couleur-creme); }
.section.noir .chiffre .mono { color: rgba(255,255,255,0.7); }
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; counter-reset: etape; }
.etape { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 22px; border-radius: var(--rayon); }
.etape::before { counter-increment: etape; content: counter(etape, decimal-leading-zero); font: 500 12px/1 var(--police-mono); color: var(--couleur-bleu-clair); display: block; margin-bottom: 10px; }
.etape h3 { font: 700 17px/1.2 var(--police-texte); text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.etape p { margin: 0; font-size: 14px; line-height: 1.5; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 40px; align-items: start; }
@media (max-width: 860px) { .deux-colonnes { grid-template-columns: 1fr; } }
.encadre { background: var(--couleur-blanc); border: 1px solid var(--couleur-trait); border-radius: var(--rayon); padding: 22px; position: sticky; top: 92px; }
.encadre .prix { font: 700 34px/1.1 var(--police-mono); }
.encadre ul { padding-left: 18px; margin: 12px 0; color: var(--couleur-gris); font-size: 14px; }
.journee { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.journee li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--couleur-trait); font-size: 14px; }
.journee .mono { color: var(--accent); padding-top: 2px; }
.plus { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 20px; font-size: 15px; }
.plus li { padding-left: 22px; position: relative; }
.plus li::before { content: "★"; position: absolute; left: 0; color: var(--accent); }
.rabais { font-size: 14px; color: var(--couleur-gris); }
.filtres { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.filtres select, .filtres .bouton { font-size: 14px; }
select, input, textarea { font: inherit; color: inherit; }
.filtres select { min-height: 44px; padding: 0 14px; border: 1px solid var(--couleur-sable-fonce); border-radius: var(--rayon); background: var(--couleur-blanc); }
.formulaire { display: grid; gap: 24px; }
.bloc { background: var(--couleur-blanc); border: 1px solid var(--couleur-trait); border-radius: var(--rayon); padding: 22px; }
.bloc h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.bloc h3 .num { font: 500 12px/1 var(--police-mono); color: var(--accent); }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font: 500 13px/1.3 var(--police-texte); color: var(--couleur-encre-2); }
.champ label b { color: var(--accent); }
.champ input, .champ select, .champ textarea { min-height: 44px; padding: 0 14px; border: 1px solid var(--couleur-sable-fonce); border-radius: var(--rayon); background: var(--couleur-blanc); font-size: 15px; }
.champ textarea { padding: 10px 14px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 0; border: 2px solid var(--accent); }
.champ .aide { font-size: 12px; line-height: 1.4; color: var(--couleur-gris); }
.case { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 14px; }
.case input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }
.case .prix { margin-left: auto; font: 700 14px/1.4 var(--police-mono); white-space: nowrap; }
.erreurs { background: var(--couleur-rouge-pale); border-left: 4px solid var(--couleur-rouge); color: var(--couleur-rouge-fonce); padding: 14px 18px; border-radius: var(--rayon); }
.erreurs ul { margin: 6px 0 0; padding-left: 18px; }
.recap { position: sticky; top: 92px; background: var(--couleur-noir); color: var(--couleur-creme); padding: 22px; border-radius: var(--rayon); }
.recap .ligne { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 14px; color: var(--couleur-gris-2); }
.recap .total { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sombre-4); font: 700 26px/1 var(--police-mono); color: var(--couleur-blanc); }
.recap .aide { font-size: 12px; color: var(--couleur-gris-3); margin-top: 10px; }
.avis { background: var(--couleur-sable); padding: 14px 18px; border-radius: var(--rayon); font-size: 14px; line-height: 1.5; color: var(--couleur-noir); }
.avis.attention { background: var(--couleur-orange-pale); border-left: 4px solid var(--couleur-orange); }
.avis.ok { background: var(--couleur-vert-pale); border-left: 4px solid var(--couleur-vert); }
.code { font: 700 22px/1 var(--police-mono); letter-spacing: 0.15em; background: var(--couleur-noir); color: var(--couleur-creme); padding: 10px 16px; border-radius: var(--rayon); display: inline-block; }
.detail-ligne { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; line-height: 1.4; }
.detail-ligne dt { color: var(--couleur-gris); }
.detail-ligne dd { margin: 0; }
.pagination { display: flex; gap: 8px; margin-top: 24px; }
.prose { max-width: 70ch; }
.prose p { font-size: 17px; line-height: 1.6; color: var(--couleur-encre-3); }
.prose h3 { margin: 28px 0 8px; }