/* =====================================================================
   MI12 FUN CENTER — style.css
   Structure du site : en-tête, sections, pied de page.
   Les briques réutilisables (boutons, cartes, champs) sont dans
   components.css. Le tunnel de réservation est dans reservation.css.
   ===================================================================== */

/* ==================================================================== */
/*  MISE EN PAGE GÉNÉRALE                                               */
/* ==================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }
.section--void { background: var(--void); }
.section--surface { background: linear-gradient(180deg, var(--bg-0), var(--void)); }

.section__head { margin-bottom: var(--space-md); max-width: 44ch; }
.section__head h2 { font-size: var(--fs-h2); }
.section__head p { color: var(--text-muted); font-size: var(--fs-lead); margin-top: 14px; }

/* Révélation au défilement (js/animations.js) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.is-in { opacity: 1; transform: none; }


/* ==================================================================== */
/*  EN-TÊTE                                                             */
/* ==================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  /* Fond PLEIN, sans flou d'arrière-plan (demande client : plus aucun
     flou sur le site). Un `backdrop-filter` force en prime le navigateur
     à recomposer la zone derrière l'en-tête à chaque image de défilement,
     ce qui coûte cher sur la tablette d'accueil. */
  background: var(--bg-0);
  border-bottom: 1px solid transparent;
  transition: background var(--t), border-color var(--t);
}
.header.is-stuck {
  background: var(--void);
  border-bottom-color: var(--line);
}

.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Logo officiel du client : assets/logo.svg, badge horizontal
   441,8 × 174,6. Il porte ses propres couleurs (rouge de marque + blanc,
   cerné de noir) et tient aussi bien sur fond sombre que clair : aucun
   filtre, aucune variante à maintenir. */
.logo { display: flex; align-items: center; }
/* Badge très large (rapport 2,53) : c'est la HAUTEUR qui décide de la
   lisibilité du bloc « mi12 », pas la largeur. En dessous de 44 px il
   s'écrase. */
.logo__img { height: 46px; width: auto; display: block; }

@media (max-width: 640px) {
  .logo__img { height: 36px; }
}

/* La navigation tient sur UNE ligne au-dessus de 1024 px, sinon tiroir. */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 26px; }
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  padding-block: 6px;
  transition: color var(--t-fast);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--text); }

.header__cta { margin-left: 4px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  align-items: center; justify-content: center;
  margin-left: auto;
}
.burger span {
  display: block; width: 18px; height: 2px;
  background: var(--text);
  position: relative;
  transition: background var(--t-fast);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; background: var(--text);
  transition: transform var(--t);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }


/* ==================================================================== */
/*  HÉROS — composition asymétrique, jamais centrée                     */
/* ==================================================================== */
.hero {
  position: relative;
  /* Plein écran, c'était une promesse coûteuse : sur un portable 16/10
     l'accroche et les boutons tombaient sous la ligne de flottaison, et
     le bandeau suivant n'était jamais deviné. À 84 % de la fenêtre, le
     haut de la section suivante dépasse — le visiteur SAIT qu'il faut
     faire défiler. Le plafond à 720 px évite le vide sur un grand écran. */
  min-height: min(84dvh, 720px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 28px);
  padding-bottom: 44px;
  overflow: hidden;
}

/* Halo : deux taches de la MÊME famille rouge — l'accent vif d'un côté,
   sa version sourde de l'autre. Pas une seconde teinte, pas de dégradé
   de fond.

   PLUS AUCUN `filter: blur()` (demande client). Le dégradé radial fait
   déjà le dégradé : le flou ne servait qu'à adoucir un bord que le
   radial-gradient n'a pas. On étale donc les arrêts jusqu'à 100 % pour
   obtenir la même diffusion, sans passe de flou. C'est même plus net et
   nettement moins coûteux : un blur de 120 px sur 46vw fait travailler
   le GPU sur toute la surface à chaque image. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}
.hero::before {
  width: 62vw; height: 62vw;
  right: -20vw; top: -22vw;
  background: radial-gradient(circle closest-side,
              rgba(228, 3, 46, 0.30) 0%, rgba(228, 3, 46, 0.15) 38%,
              rgba(228, 3, 46, 0.05) 66%, transparent 100%);
}
.hero::after {
  width: 54vw; height: 54vw;
  left: -20vw; bottom: -24vw;
  background: radial-gradient(circle closest-side,
              rgba(142, 12, 30, 0.38) 0%, rgba(142, 12, 30, 0.18) 40%,
              rgba(142, 12, 30, 0.06) 68%, transparent 100%);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  width: 100%;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.94;
  letter-spacing: -0.035em;
}
.hero__title em {
  font-style: normal;
  color: var(--accent-ink);
}
.hero__lead {
  margin-top: 22px;
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}
.hero__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Colonne visuelle : une photo réelle, pas un aplat décoratif. */
.hero__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px;
  font-size: var(--fs-sm);
  background: linear-gradient(180deg, transparent, rgba(8, 7, 11, 0.9));
}


/* ==================================================================== */
/*  BANDE DE RÉSERVATION RAPIDE                                         */
/* ==================================================================== */
.quickbook {
  background: var(--void);
  border-block: 1px solid var(--line);
  padding-block: 26px;
}
.quickbook__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 14px;
  align-items: end;
}
.quickbook__field { display: grid; gap: 6px; }
.quickbook__field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ==================================================================== */
/*  GRILLE DES ACTIVITÉS (bento à cellules inégales)                    */
/* ==================================================================== */
.acts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.act {
  position: relative;
  grid-column: span 2;
  min-height: 240px;
  padding: 26px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), background var(--t);
}
.act:hover { border-color: var(--accent); transform: translateY(-3px); }
.act:active { transform: translateY(-1px) scale(0.995); }

/* Rythme : deux cellules larges, le reste en tiers. */
.act--wide { grid-column: span 3; }
.act--tall { grid-row: span 2; min-height: 496px; }

/* Cellules « teintées » : au moins deux par grille, jamais toutes. */
.act--tint { background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.act--photo { padding: 0; }
.act--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act--photo .act__body {
  position: relative;
  padding: 26px;
  width: 100%;
  background: linear-gradient(180deg, transparent, rgba(8, 7, 11, 0.92));
}

.act__icon {
  width: 40px; height: 40px;
  color: var(--accent-ink);
  margin-bottom: auto;
}
.act__icon svg { width: 100%; height: 100%; }
.act__name { font-size: var(--fs-h3); margin-top: 18px; }
.act__desc { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 8px; max-width: 40ch; }
.act__meta {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.act__tag {
  position: absolute; top: 20px; right: 20px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
}


/* ==================================================================== */
/*  LES CENTRES — lignes pleine largeur, pas des cartes                 */
/* ==================================================================== */
.site-list { border-top: 1px solid var(--line); }

.site-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.2fr) auto auto;
  gap: 24px;
  align-items: center;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.site-row:hover { background: rgba(255, 255, 255, 0.02); }

.site-row__no {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.site-row__city { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.site-row__addr { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 4px; }
.site-row__acts { color: var(--text-muted); font-size: var(--fs-sm); }
.site-row__cta { display: flex; align-items: center; gap: 18px; }


/* ==================================================================== */
/*  FORMULES — défilement horizontal à accroche                         */
/* ==================================================================== */
.formulas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 340px);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}
.formula {
  scroll-snap-align: start;
  padding: 28px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.formula__audience { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-ink); }
.formula__name { font-size: var(--fs-h3); margin-top: 10px; }
.formula__price {
  font-family: var(--font-display);
  font-size: 2.4rem;
  margin-top: 16px;
  font-variant-numeric: tabular-nums;
}
.formula__price small { font-size: 0.85rem; font-family: var(--font-body); color: var(--text-muted); font-weight: 400; }
.formula__desc { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 12px; }
.formula__includes { margin-top: 18px; display: grid; gap: 8px; }
.formula__includes li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.formula__includes svg { width: 16px; height: 16px; color: var(--accent-ink); flex: none; margin-top: 4px; }
.formula__foot { margin-top: auto; padding-top: 22px; }


/* ==================================================================== */
/*  PUBLICS — deux colonnes groupées, pas une liste à puces             */
/* ==================================================================== */
.audiences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 6vw, 90px);
}
.audience {
  padding-block: 24px;
  border-top: 1px solid var(--line);
}
.audience h3 { font-size: 1.15rem; }
.audience p { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 6px; }


/* ==================================================================== */
/*  INFOS PRATIQUES — données nues, sans conteneur                      */
/* ==================================================================== */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.fact__icon { width: 26px; height: 26px; color: var(--accent-ink); }
.fact h3 { font-size: 1rem; margin-top: 14px; }
.fact p { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 6px; }


/* ==================================================================== */
/*  APPEL FINAL — déclaration pleine largeur                            */
/* ==================================================================== */
.closing {
  background: var(--void);
  text-align: left;
  position: relative;
  overflow: hidden;
  /* Un titre et deux boutons ne méritent pas la hauteur d'une section
     de contenu : on la coupe de moitié. */
  padding-block: var(--space-lg);
}
.closing__title { font-size: var(--fs-h2); max-width: 20ch; }
.closing__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; }


/* ==================================================================== */
/*  PAGES INTÉRIEURES                                                   */
/* ==================================================================== */
.page-head {
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 110px));
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: var(--fs-h1); max-width: 20ch; }
.page-head p { color: var(--text-muted); font-size: var(--fs-lead); margin-top: 18px; max-width: 60ch; }

/* Fiche d'un centre (centres.html) */
.center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.center__title { font-size: var(--fs-h2); }
.center__info { margin-top: 24px; display: grid; gap: 14px; }
.center__info li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-muted); font-size: var(--fs-sm); }
.center__info svg { width: 18px; height: 18px; color: var(--accent-ink); flex: none; margin-top: 3px; }
.center__hours { margin-top: 26px; }
.center__hours table { font-size: var(--fs-sm); }
.center__hours th, .center__hours td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--line); }
.center__hours th { font-weight: 500; color: var(--text-muted); width: 40%; }
.center__hours td { font-variant-numeric: tabular-nums; }
.center__hours tr[data-today] td, .center__hours tr[data-today] th { color: var(--accent-ink); }
.center__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Contact : formulaire à gauche, coordonnées des centres à droite */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* Fiche d'une activité (activites.html) */
.act-sheet {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding-block: 40px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.act-sheet__icon { width: 44px; height: 44px; color: var(--accent-ink); }
.act-sheet h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.act-sheet p { color: var(--text-muted); margin-top: 10px; max-width: 52ch; }
.act-sheet__where { display: flex; flex-wrap: wrap; gap: 8px; }


/* ==================================================================== */
/*  PIED DE PAGE                                                        */
/* ==================================================================== */
.footer {
  background: var(--void);
  border-top: 1px solid var(--line);
  padding-block: var(--space-lg) 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.footer h3 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.footer li + li { margin-top: 10px; }
.footer a { color: var(--text-muted); font-size: var(--fs-sm); transition: color var(--t-fast); }
.footer a:hover { color: var(--accent-ink); }
.footer__tagline {
  color: var(--text); font-size: var(--fs-sm); margin-top: 14px; max-width: 34ch;
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
/* La description sous le logo. Elle dit ce qu'est MI12 à quelqu'un qui
   atterrit en bas d'une page sans avoir lu le reste — et elle donne aux
   moteurs de recherche, sur CHAQUE page, les mots qui comptent :
   les activités et les trois villes. */
.footer__about {
  color: var(--text-muted);
  font-size: var(--fs-sm); line-height: 1.66;
  margin-top: 12px; max-width: 48ch;
}
.footer__about strong { color: var(--text); font-weight: 600; }
.footer__bottom {
  margin-top: var(--space-md);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.footer__social a:hover { border-color: var(--accent); color: var(--accent-ink); }
.footer__social svg { width: 18px; height: 18px; }

/* Retour en haut */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--t), transform var(--t);
  z-index: calc(var(--z-header) - 1);
  box-shadow: var(--shadow);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top svg { width: 20px; height: 20px; transform: rotate(-90deg); }


/* =====================================================================
   ==  « ARCADE PENCHÉE » — couche de refonte (27/07/2026)            ==
   =====================================================================
   Cette section vient APRÈS le reste du fichier et l'emporte donc sur
   les règles d'origine. Elle est isolée volontairement : on peut la
   commenter d'un bloc pour comparer avec l'ancienne direction, et elle
   se lit comme un tout plutôt que dispersée en trente retouches.

   Trois partis pris, tous tirés du logo du client :
     · arêtes vives partout (rayons à 0 dans variables.css) ;
     · inclinaison de 8° sur les blocs, jamais sur le texte ;
     · typo Archivo poussée sur son axe de chasse, très condensée.
   ===================================================================== */

/* ---------- HÉROS ---------- */
.hero { position: relative; isolation: isolate; }
.hero__grid { position: relative; z-index: 1; align-items: center; }
.hero__col { min-width: 0; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--text-muted); margin-bottom: 26px;
}
.hero__eyebrow .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); color: var(--accent); flex: none;
}

.hero__title {
  font-family: var(--font-display);
  font-stretch: var(--w-jersey);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: 0.84;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}
/* La ligne d'accent est en italique : c'est la même inclinaison que le
   logo, transposée à la typographie. */
.hero__title em {
  font-style: italic;
  color: var(--accent-ink);
}

.hero__lead { margin-top: 26px; max-width: 46ch; }

/* Le visuel, cadré par une équerre rouge décalée. */
.hero__stage { position: relative; }
.hero__frame { position: relative; }
.hero__frame::before {
  content: ""; position: absolute; inset: -14px -14px auto auto;
  width: 84px; height: 84px;
  border-top: 3px solid var(--accent); border-right: 3px solid var(--accent);
  transform: skewX(var(--skew));
  z-index: 2;
}
.hero__frame::after {
  content: ""; position: absolute; inset: auto auto -14px -14px;
  width: 84px; height: 84px;
  border-bottom: 3px solid var(--accent); border-left: 3px solid var(--accent);
  transform: skewX(var(--skew));
  z-index: 2;
}
/* 16/9, exactement le rapport des PNG de assets/illus/ : le dessin y
   entre en entier. Le cadre était en 4/3,4, ce qui rognait les côtés de
   la scène — acceptable pour du SVG qui se redessine, pas pour une image. */
.illus--hero { aspect-ratio: 16 / 9; }

.hero__badge {
  position: absolute; left: -10px; bottom: -18px; z-index: 3;
  padding: 11px 20px;
  background: var(--void); border: 1px solid var(--line-strong);
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- TABLEAU DE MARQUE ---------- */
.board { background: var(--void); border-bottom: 1px solid var(--line); }
.board__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.board__cell {
  padding: clamp(28px, 4vw, 52px) clamp(14px, 2vw, 30px);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.board__cell:first-child { border-left: 0; }
.board__cell b {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 0.82;
  color: var(--text);
}
.board__cell span { color: var(--text-dim); }
.board__word i { font-style: normal; color: var(--accent-ink); }

/* ---------- GRILLE DES ACTIVITÉS ---------- */
.acts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);      /* les filets de la grille = le fond */
  border: 1px solid var(--line);
}
.act {
  position: relative;
  background: var(--bg-0);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: background var(--t);

  /* Remise à zéro de l'ancien bento (voir « GRILLE DES ACTIVITÉS » plus
     haut) : il posait 6 colonnes et un `span 2` par carte. Sur 3 colonnes,
     ce span n'en laissait tenir qu'une par ligne — les activités
     s'empilaient. Les cellules sont désormais toutes égales et jointives,
     donc plus de rayon, plus de bordure propre (les filets viennent du
     `gap` de 1 px) et plus de padding sur la carte : il est dans
     `.act__body`. */
  grid-column: auto;
  grid-row: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  justify-content: flex-start;
}
/* Une cellule qui se soulève déchire un bloc jointif : le survol ne joue
   plus que sur le fond. */
.act:hover,
.act:active { background: var(--surface); transform: none; border-color: var(--line); }
.act--wide { grid-column: span 2; }
.act--tall { grid-row: span 2; }
/* 16/11 par défaut, mais dans la grille des activités la scène est
   ramenée à 16/9 : neuf vignettes en 16/11, c'est 150 px de page en
   plus pour un dessin qui ne dit rien de plus. */
.act .illus { border: 0; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 9; }
.act--tall .illus { aspect-ratio: 4 / 5; }

.act__body { padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.act__name {
  font-family: var(--font-display); font-stretch: var(--w-cond);
  font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-h3); line-height: 1;
}
.act__desc { color: var(--text-muted); font-size: var(--fs-sm); }
.act__meta {
  margin-top: auto; padding-top: 14px;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
.act__tag {
  position: absolute; top: 0; right: 0; z-index: 3;
  padding: 8px 16px;
  background: var(--accent); color: var(--on-accent);
  transform: skewX(var(--skew)) translateX(8px);
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- TITRES DE SECTION ---------- */
.section__head h2 {
  font-family: var(--font-display); font-stretch: var(--w-jersey);
  font-weight: 900; text-transform: uppercase;
  font-size: var(--fs-h2); line-height: 0.88;
}

/* ---------- EN-TÊTE ---------- */
.header.is-stuck { background: rgba(8, 7, 11, 0.96); }
.nav__link {
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-xs); letter-spacing: 0.14em;
}
.nav__link::after { transform: skewX(var(--skew)) scaleX(0); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: skewX(var(--skew)) scaleX(1); }

@media (max-width: 1024px) {
  .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .act--wide, .act--tall { grid-column: auto; grid-row: auto; }
  .board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board__cell:nth-child(3) { border-left: 0; }
  .board__cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .acts { grid-template-columns: 1fr; }
  .board__grid { grid-template-columns: 1fr; }
  .board__cell { border-left: 0; border-top: 1px solid var(--line); }
  .board__cell:first-child { border-top: 0; }
  .hero__badge { position: static; display: inline-block; margin-top: 18px; }
}

/* ---------- FORMULES ------------------------------------------------
   Le prix est ce qu'on vient chercher : il occupe une colonne à lui, en
   cartouche penché, et non une ligne perdue dans le texte. */
.formulas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.formula {
  position: relative;
  background: var(--bg-0);
  display: flex; flex-direction: column;
  transition: background var(--t);
}
.formula:hover { background: var(--surface); }

.formula__price {
  position: relative;
  padding: 26px clamp(20px, 2.4vw, 30px) 22px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
/* Le rouge arrive par la gauche au survol : la carte se « charge ». */
.formula__price::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: 0; background: var(--accent);
  transform: skewX(var(--skew)) translateX(-14px);
  transition: width 0.5s var(--ease-out);
  z-index: 0;
}
.formula:hover .formula__price::before { width: 118%; }
.formula__price > * { position: relative; z-index: 1; }

.formula__from, .formula__unit, .formula__to {
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--t);
}
.formula__price b {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  line-height: 0.84; color: var(--text);
  transition: color var(--t);
}
.formula__price b i { font-style: normal; font-size: 0.44em; margin-left: 4px; color: var(--accent-ink); }
.formula:hover .formula__price b,
.formula:hover .formula__price b i,
.formula:hover .formula__from,
.formula:hover .formula__unit,
.formula:hover .formula__to { color: var(--on-accent); }

.formula__body {
  padding: clamp(20px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.formula__audience { color: var(--accent-ink); }
.formula__name {
  font-family: var(--font-display); font-stretch: var(--w-cond);
  font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-h3); line-height: 1;
}
.formula__desc { color: var(--text-muted); font-size: var(--fs-sm); }
.formula__includes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.formula__includes li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.formula__includes svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--accent-ink); }
.formula__cta { margin-top: auto; align-self: flex-start; }


/* ---------- PUBLICS -------------------------------------------------- */
.audiences { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
             background: var(--line); border: 1px solid var(--line); }
.audience { background: var(--bg-0); padding: clamp(22px, 2.6vw, 32px); transition: background var(--t); }
.audience:hover { background: var(--surface); }
.audience h3 {
  font-family: var(--font-display); font-stretch: var(--w-cond);
  font-weight: 800; text-transform: uppercase; font-size: 1.05rem;
  margin-bottom: 8px;
}
.audience p { color: var(--text-muted); font-size: var(--fs-sm); }


/* ---------- AVIS GOOGLE ----------------------------------------------
   Composition en deux temps : à gauche la note, figée ; à droite les
   avis, qui défilent horizontalement. Neuf avis empilés verticalement
   auraient allongé l'accueil de deux écrans pour une information qui
   se lit en diagonale.
   -------------------------------------------------------------------- */
.reviews__grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.reviews__score {
  background: var(--bg-0);
  padding: clamp(24px, 3vw, 38px);
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
  justify-content: center;
}
.reviews__google { width: 96px; height: auto; margin-bottom: 6px; }
.reviews__score .stars svg { width: 19px; height: 19px; }
.reviews__note {
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text);
}
.reviews__note a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.reviews__note a:hover { color: var(--text); }
/* La provenance est écrite en toutes lettres : on affiche des avis
   Verviers, pas une note de réseau. */
.reviews__src {
  font-size: var(--fs-xs); line-height: 1.5;
  color: var(--text-dim); text-transform: none; letter-spacing: 0;
  margin-top: 4px;
}

.reviews__rail {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  background: var(--line);
}
.review {
  flex: 0 0 clamp(260px, 30vw, 340px);
  scroll-snap-align: start;
  background: var(--bg-0);
  padding: clamp(20px, 2.4vw, 28px);
  margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  transition: background var(--t);
}
.review:hover { background: var(--surface); }
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review__date {
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
}
.review__text { margin: 0; }
/* Un avis long ne doit pas déformer la rangée : on le coupe à sept
   lignes, le reste se lit sur Google. */
.review__text p {
  color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.62;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
  overflow: hidden;
}
.review__who {
  margin-top: auto;
  font-family: var(--font-display); font-stretch: var(--w-cond);
  font-weight: 800; text-transform: uppercase; font-size: 0.95rem;
  color: var(--text);
}

.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars svg { width: 15px; height: 15px; }

/* Flèches du rail. Le bouton « précédent » retourne la flèche plutôt
   que d'embarquer une seconde icône. */
.rail-nav { display: flex; gap: 1px; margin-top: 1px; justify-content: flex-end; }
.rail-nav__b {
  width: 52px; height: 44px;
  display: grid; place-items: center;
  background: var(--bg-0);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.rail-nav__b svg { width: 19px; height: 19px; }
.rail-nav__b[data-rail="-1"] svg { transform: scaleX(-1); }
.rail-nav__b:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rail-nav__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail-nav__b:disabled { color: var(--text-dim); opacity: 0.4; cursor: default; }

@media (max-width: 900px) {
  .reviews__grid { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- PARTENAIRES ----------------------------------------------
   Un rail de logos. Tant que le client n'en a fourni aucun, la seule
   cellule affichée est un emplacement en pointillé qui dit ce qui
   manque — même convention que les photos absentes.
   -------------------------------------------------------------------- */
.partners {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.partner {
  flex: 1 1 180px;
  min-height: 118px;
  background: var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  transition: background var(--t);
}
.partner:hover { background: var(--surface); }
.partner img {
  max-width: 150px; max-height: 60px; width: auto; height: auto;
  /* Des logos de provenances diverses jurent sur un fond noir : on les
     ramène au blanc, et la couleur revient au survol. */
  filter: grayscale(1) brightness(1.9) contrast(0.85);
  opacity: 0.62;
  transition: filter var(--t), opacity var(--t);
}
.partner:hover img { filter: none; opacity: 1; }

.partner.is-todo {
  flex-basis: 100%;
  border: 1px dashed var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center;
}


/* ---------- FAQ -------------------------------------------------------
   <details> natifs. Le triangle du navigateur est masqué et remplacé
   par une croix qui pivote — le seul rond du site serait de trop.
   -------------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2.2vw, 26px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display); font-stretch: var(--w-cond);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.15;
  transition: color var(--t-fast);
}
.faq__q::-webkit-details-marker { display: none; }   /* Safari */
.faq__q:hover { color: var(--accent-ink); }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* La croix : deux traits en pseudo-éléments, penchés comme le reste. */
.faq__sign {
  position: relative; flex: none;
  width: 22px; height: 22px;
  transform: skewX(var(--skew));
  transition: transform var(--t);
}
.faq__sign::before,
.faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; margin-top: -1px; background: var(--accent);
  transition: transform var(--t);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign { transform: skewX(var(--skew)) rotate(135deg); }
.faq__item[open] .faq__q { color: var(--accent-ink); }

.faq__a {
  padding: 0 0 clamp(20px, 2.4vw, 28px);
  max-width: 68ch;
  color: var(--text-muted);
  font-size: var(--fs-sm); line-height: 1.68;
}
.faq__a p + p { margin-top: 10px; }
.faq__a strong { color: var(--text); }
.faq__a a { color: var(--accent-ink); }
.faq__note { color: var(--text-dim); font-size: var(--fs-xs); }

/* Horaires et activités par centre : deux colonnes, filet à gauche. */
.faq__hours { display: grid; gap: 1px; margin: 12px 0; background: var(--line); }
.faq__site {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px;
  background: var(--bg-0); padding: 12px 14px;
}
.faq__site b {
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}
.faq__site span { color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width: 560px) {
  .faq__site { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}


/* ---------- « VOIR PLUS » SUR LA GRILLE DES ACTIVITÉS -----------------
   Les cartes en trop sont masquées par `display: none`, pas par une
   hauteur nulle : sur une grille, une cellule de hauteur nulle laisse
   quand même sa ligne et creuse un vide.

   La classe n'est posée que par le JavaScript : sans lui, les neuf
   activités s'affichent, et les moteurs de recherche les lisent toutes
   puisqu'elles restent dans le document.
   -------------------------------------------------------------------- */
.acts--folded .act--more { display: none; }
.acts--folded.acts--open .act--more { display: flex; }

.acts__more {
  display: inline-flex;
  margin-top: 22px;
}
/* Le chevron suit l'état du bouton. */
.acts__more::after {
  content: ""; margin-left: 12px;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t);
}
.acts__more[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}


/* ---------- INFOS PRATIQUES, EN BAS DE LA SECTION « PUBLICS » ---------
   Elles occupaient une section à elles seules pour quatre lignes de
   texte. Rangées ici, elles ne coûtent plus que leur propre hauteur.
   -------------------------------------------------------------------- */
.facts--inline {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  gap: clamp(20px, 3vw, 44px);
}


/* ---------- TITRE DES PARTENAIRES ------------------------------------ */
.partners__title {
  font-family: var(--font-display); font-stretch: var(--w-cond);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem); line-height: 1.05;
  margin: var(--space-xl) 0 var(--space-md);
  max-width: 24ch;
}


/* ---------- SÉLECTEUR PERSONNALISÉ ----------------------------------
   Le <select> natif ne se style pas : sur fond sombre, sa liste reste
   celle du système, blanche et arrondie, en travers de la direction
   artistique. js/select.js en fabrique donc un équivalent et GARDE le
   <select> d'origine, caché, comme source de vérité — les formulaires
   et le tunnel de réservation continuent de lire la même valeur.
   -------------------------------------------------------------------- */
.csel { position: relative; }
.csel select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.csel__btn {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.csel__btn:hover { border-color: var(--line-strong); }
.csel__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.csel__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel__ph { color: var(--text-dim); }
.csel__car {
  width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t);
}
.csel.is-open .csel__btn { border-color: var(--accent); background: var(--surface-2); }
.csel.is-open .csel__car { transform: rotate(-135deg) translate(-3px, -3px); }

.csel__list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  max-height: 280px; overflow-y: auto;
  background: var(--void);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-8px) scaleY(0.96); transform-origin: top;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.csel.is-open .csel__list { opacity: 1; transform: none; pointer-events: auto; }

.csel__opt {
  padding: 11px 14px; cursor: pointer;
  font-size: var(--fs-sm); color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
  transition: background var(--t-fast), color var(--t-fast);
}
/* Un liseré rouge penché marque l'option survolée : même signe que le
   soulignement de la navigation. */
.csel__opt::before {
  content: ""; width: 3px; height: 15px; flex: none;
  background: var(--accent);
  transform: skewX(var(--skew)); opacity: 0;
  transition: opacity var(--t-fast);
}
.csel__opt:hover, .csel__opt.is-active { background: var(--surface); color: var(--text); }
.csel__opt:hover::before, .csel__opt.is-active::before { opacity: 1; }
.csel__opt[aria-selected="true"] { color: var(--text); font-weight: 600; }
.csel__opt[aria-selected="true"]::before { opacity: 1; }

/* ---------- CALENDRIER (js/calendar.js) ------------------------------
   Même logique que le sélecteur : le champ natif reste dans la page,
   caché, et c'est lui qui part avec le formulaire.
   -------------------------------------------------------------------- */
.cdate { position: relative; }
.cdate input[type="date"] {
  position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
}

.cdate__btn {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit; font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.cdate__btn:hover { border-color: var(--line-strong); }
.cdate__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cdate__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdate__ph  { color: var(--text-dim); }

/* Le pictogramme : un calendrier dessiné en bordures, pas une icône
   chargée. Deux ergots en haut, un cadre, une ligne d'en-tête. */
.cdate__ico {
  position: relative; flex: none;
  width: 17px; height: 16px; margin-top: 1px;
  border: 2px solid var(--accent-ink);
  border-top-width: 5px;
}
.cdate__ico::before,
.cdate__ico::after {
  content: ""; position: absolute; top: -8px;
  width: 2px; height: 4px; background: var(--accent-ink);
}
.cdate__ico::before { left: 2px; }
.cdate__ico::after  { right: 2px; }

.cdate.is-open .cdate__btn { border-color: var(--accent); background: var(--surface-2); }

.cdate__pop {
  position: absolute; z-index: 70; left: 0; top: calc(100% + 6px);
  width: min(320px, calc(100vw - 32px));
  padding: 12px;
  background: var(--void);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow-lg);
}
/* Sur un champ collé au bord droit, le panneau sortirait de l'écran. */
.quickbook__field:last-of-type .cdate__pop { left: auto; right: 0; }

.cdate__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.cdate__mois {
  font-family: var(--font-display); font-stretch: var(--w-cond);
  font-weight: 800; text-transform: uppercase;
  font-size: 0.98rem; letter-spacing: 0.02em;
}
.cdate__nav {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line);
  cursor: pointer;
}
/* La flèche est un chevron en bordures : elle tourne selon le sens. */
.cdate__nav::before {
  content: ""; width: 7px; height: 7px;
  border-left: 2px solid var(--text); border-bottom: 2px solid var(--text);
  transform: rotate(45deg) translate(1px, -1px);
}
.cdate__nav[data-mois="1"]::before { transform: rotate(-135deg) translate(1px, -1px); }
.cdate__nav:hover:not(:disabled) { border-color: var(--accent); background: var(--surface); }
.cdate__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cdate__nav:disabled { opacity: 0.3; cursor: default; }

.cdate__jours {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  margin-bottom: 4px;
}
.cdate__jours span {
  text-align: center; padding: 4px 0;
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}

.cdate__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cdate__d {
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  color: var(--text); font: inherit; font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cdate__d:hover:not(.is-off) { background: var(--surface-2); }
.cdate__d:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cdate__d.is-out  { color: var(--text-dim); opacity: 0.45; }
/* Jour de fermeture ou hors bornes : barré, pas seulement pâli. Un
   simple gris se confond avec les jours du mois voisin. */
.cdate__d.is-off {
  color: var(--text-dim); opacity: 0.34; cursor: default;
  text-decoration: line-through;
}
.cdate__d.is-today { border-color: var(--line-strong); }
.cdate__d.is-sel {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  font-weight: 700;
}

.cdate__pied {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.cdate__auj {
  align-self: flex-start;
  background: transparent; border: 0; padding: 0;
  color: var(--accent-ink); cursor: pointer;
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.cdate__auj:hover { color: var(--text); }
.cdate__note { color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.4; }

@media (max-width: 900px) {
  .formulas { grid-template-columns: 1fr; }
}