/* ==========================================================================
   TWO PADEL - « Verre et lumière »

   Le complexe est un hall navy percé de baies vitrées éclairées, prolongé par
   une salle sous verrière. Le site est bâti sur cette matière : une masse navy
   continue, une trame de filet en fond, un halo de lumière qui suit le geste,
   et des surfaces de verre dépoli qui portent l'information.

   Deux règles qui gouvernent tout le reste :
   1. Les photos ne sont JAMAIS teintées. Elles vivent dans un cadre de verre.
      Les fonds de section sont donc des champs de lumière abstraits.
   2. Le lime ne peint jamais une surface : il marque une action.

   Direction arrêtée avec le client sur maquettes (août 2026).
   ========================================================================== */

/* --------------------------------------------------------------- polices */
/* ============================ ATTENTION LICENCE ============================
   Les fichiers Sugo Pro Display installés ici sont les versions « trial »
   fournies par Zetafonts, accompagnées d'une licence CC BY-NC : usage NON
   COMMERCIAL uniquement. Le site d'un club qui vend des créneaux, des cours
   et des repas est un usage commercial.
   De plus, la version trial ne contient AUCUN chiffre : les glyphes 0-9 sont
   remplacés par un filigrane « ZETAFONTS.COM ». D'où l'unicode-range ci-dessous,
   qui laisse Archivo composer tous les chiffres.
   >> Avant la mise en ligne : acquérir la licence web Sugo Pro auprès de
      Zetafonts, remplacer ces fichiers, retirer le suffixe « -trial », et
      convertir en .woff2 (les .ttf pèsent ~250 Ko chacun).
   ========================================================================== */
@font-face {
  font-family: "Sugo Display";
  src: url("assets/fonts/SugoProDisplay-Light-trial.ttf") format("truetype");
  font-weight: 300; font-style: normal;
  unicode-range: U+0000-002F, U+003A-00B1, U+00B4-FFFF;
  font-display: swap;
}
@font-face {
  font-family: "Sugo Display";
  src: url("assets/fonts/SugoProDisplay-Regular-trial.ttf") format("truetype");
  font-weight: 400; font-style: normal;
  unicode-range: U+0000-002F, U+003A-00B1, U+00B4-FFFF;
  font-display: swap;
}
@font-face {
  font-family: "Sugo Display";
  src: url("assets/fonts/SugoProDisplay-Bold-trial.ttf") format("truetype");
  font-weight: 700; font-style: normal;
  unicode-range: U+0000-002F, U+003A-00B1, U+00B4-FFFF;
  font-display: swap;
}

/* ====================== Archivo et Open Sans, en local ======================
   Recuperees depuis fonts.gstatic.com le 24 aout 2026, ce sont exactement les
   fichiers que le navigateur telechargeait auparavant : memes sous-ensembles
   latin et latin-ext, memes `unicode-range`. Plus aucun appel a Google, donc
   plus aucune IP de visiteur transmise a un tiers.

   Archivo doit imperativement rester la VARIABLE : le site pilote son axe de
   largeur (`font-variation-settings: "wdth" 82` sur .num, .keys b, .hn). Les
   coupes statiques du site Google Fonts ignorent cet axe en silence et
   elargissent tous les chiffres des huit pages.

   Les deux familles sont sous SIL Open Font License 1.1, voir OFL.txt a cote :
   la redistribution est autorisee, la licence doit accompagner les fichiers.
   ========================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 900; font-stretch: 75% 125%; font-style: normal;
  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-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 900; font-stretch: 75% 125%; font-style: normal;
  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-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/opensans-latin.woff2") format("woff2");
  font-weight: 300 800; font-style: normal;
  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-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/opensans-latin-ext.woff2") format("woff2");
  font-weight: 300 800; font-style: normal;
  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-display: swap;
}

/* Heading Now 91 (Zetafonts) n'est pas encore fournie : Archivo assure le rôle
   « highlight » en attendant. Déposer HeadingNow-91.woff2 dans assets/fonts/
   et décommenter ce bloc suffit à la substituer partout.
@font-face {
  font-family: "Heading Now";
  src: url("assets/fonts/HeadingNow-91.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
*/

/* =========================================================== les jetons == */
:root {
  /* la masse navy, du plus profond au plus clair */
  --ground:    #001628;
  --ground-2:  #002039;
  --navy:      #003565;
  --blue:      #0086ff;
  /* Bleu eclairci, pour le petit texte bleu pose sur un fond lui-meme eclairci.
     Regle mesuree : des qu'une couche translucide remonte le navy, le #0086ff
     passe sous 4,5:1. Quatre cas dans le site, tous verifies : le surtitre des
     photos de tete (`.hero-photo .kick`), ou assombrir reviendrait a eteindre
     la photo ; la pastille bleue (`.badge.is-blue`), 4,05:1 ; la ligne du jour
     des horaires (`.hours-row.is-today`), 4,42:1 ; l'age des packs de
     l'academie (`.pack-age`), 4,05:1. Sur le navy plein, le
     #0086ff tient (5,11:1) : ne pas le remplacer partout, le site n'a qu'un
     bleu et cette variante n'existe que pour la lisibilite. */
  --blue-clair: #7ec4ff;
  --lime:      #dcef00;

  /* le texte */
  --fg:   #ffffff;
  --fg-2: rgba(255, 255, 255, .70);
  --fg-3: rgba(255, 255, 255, .52);

  /* La couleur de texte accentué. Le bleu #0086ff passe largement sur le navy
     (5,4:1) mais échoue sur le fond clair (3,2:1) : le chapitre clair bascule
     donc sur le navy, qui y tient 11:1. Mesuré, pas estimé. */
  --accent-text: var(--blue);

  /* le verre */
  --glass:   rgba(255, 255, 255, .06);
  --glass-2: rgba(255, 255, 255, .09);
  --line:    rgba(255, 255, 255, .16);
  --line-2:  rgba(255, 255, 255, .10);
  --blur:    blur(22px) saturate(158%);

  /* le champ de lumière */
  --halo:    rgba(0, 134, 255, .34);
  --halo-2:  rgba(0, 53, 101, .92);
  --halo-3:  rgba(0, 134, 255, .15);
  --mesh:    rgba(255, 255, 255, .05);

  --shadow:   0 32px 86px rgba(0, 0, 0, .55);
  --shadow-2: 0 18px 46px rgba(0, 0, 0, .42);

  /* les polices de la charte */
  --font-h1:   "Sugo Display", "Archivo", system-ui, sans-serif;
  --font-head: "Archivo", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;

  /* la mesure */
  --wrap: 1280px;
  /* Le rayon du disque de lueur sous le verre, identique sur tout le site. */
  --lueur: 210px;
  --nav-h: 74px;
  --bar-h: 36px;
  /* Tout ce qui se glisse sous l'en-tete lit --header-h : la barre de
     navigation, plus le bandeau epingle au dessus d'elle. */
  --header-h: calc(var(--nav-h) + var(--bar-h));
  --r: 18px;
  --r-s: 11px;

  /* l'espacement : généreux, une seule échelle */
  --s-1: 8px;
  --s-2: 14px;
  --s-3: 22px;
  --s-4: 34px;
  --s-5: clamp(38px, 5vw, 62px);
  --s-6: clamp(64px, 9vw, 128px);

  color-scheme: dark;
}

/* Le chapitre clair : le même système, inversé. Un seul jeu de jetons change,
   aucun composant n'existe en double. */
.day,
.page-day {
  --ground:    #eef2f7;
  --ground-2:  #ffffff;
  --fg:   #0c1b2a;
  /* Opacités relevées par rapport au chapitre sombre : sur un fond clair, un
     texte à 55 % ne tient que 3,5:1. À 68 % il passe 4,5:1. */
  --fg-2: rgba(12, 27, 42, .84);
  --fg-3: rgba(12, 27, 42, .70);
  --accent-text: var(--navy);
  --glass:   rgba(255, 255, 255, .62);
  --glass-2: rgba(255, 255, 255, .74);
  --line:    rgba(0, 53, 101, .16);
  --line-2:  rgba(0, 53, 101, .09);
  --halo:    rgba(0, 134, 255, .16);
  --halo-2:  rgba(160, 195, 225, .55);
  --halo-3:  rgba(0, 134, 255, .08);
  --mesh:    rgba(0, 53, 101, .055);
  --shadow:   0 30px 70px rgba(6, 26, 46, .13);
  --shadow-2: 0 16px 38px rgba(6, 26, 46, .10);
  color-scheme: light;
}

/* ============================================================== la base == */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

::selection { background: var(--lime); color: #001628; }
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}
.page-day ::selection { background: var(--navy); color: #fff; }
.page-day :focus-visible { outline-color: var(--navy); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-200%);
  background: var(--lime); color: #001628;
  font-family: var(--font-head); font-weight: 800; font-size: .78rem;
  letter-spacing: .11em; text-transform: uppercase; text-decoration: none;
  padding: 12px 20px; border-radius: 10px;
}
.skip-link:focus { transform: none; }

/* ================================================= le champ de lumière == */
/* Fixe, il ne défile pas et ne parallaxe pas : il respire avec le curseur.
   C'est la signature du site, présente sur les sept pages. */
.field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.field::before {
  content: ""; position: absolute; inset: -25%;
  background:
    radial-gradient(44vw 44vw at var(--mx, 26%) var(--my, 22%), var(--halo), transparent 62%),
    radial-gradient(58vw 52vw at 84% 74%, var(--halo-2), transparent 66%),
    radial-gradient(34vw 34vw at 8% 92%, var(--halo-3), transparent 66%);
}
/* la trame : la grammaire du filet et du marquage au sol */
.field::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  var(--mesh) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, var(--mesh) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 36%, #000 8%, transparent 78%);
          mask-image: radial-gradient(72% 62% at 50% 36%, #000 8%, transparent 78%);
}

main, .masthead, .foot, .dock { position: relative; z-index: 1; }

/* ============================================================ typographie */
h1, h2, .h-display {
  font-family: var(--font-h1);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.028em;
  line-height: .9;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 7.4vw, 6.2rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.5rem); line-height: .93; }
h1 em, h2 em, .hl { font-style: normal; color: var(--blue); }

/* Les chiffres des grands titres. Sugo Display n'a aucun chiffre (voir la note
   licence en tete de fichier) : Archivo prend le relais, mais a son poids par
   defaut il paraissait maigre et etranger a cote du Sugo. On lui donne donc
   exactement la coupe des chiffres cles, `.keys b` : Archivo 800 en largeur 82.
   Toujours poser <span class="hn"> autour du nombre, jamais autour du mot. */
h1 .hn, h2 .hn, .h-display .hn {
  font-family: var(--font-head);
  font-weight: 800;
  font-variation-settings: "wdth" 82;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.012em;
}

h3 {
  font-family: var(--font-head);
  font-weight: 800; font-size: 1.06rem; line-height: 1.3;
  letter-spacing: -.01em;
}

.kick {
  font-family: var(--font-head);
  font-weight: 700; font-size: .72rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent-text);
}
.lead { color: var(--fg-2); font-size: clamp(1rem, 1.35vw, 1.12rem); max-width: 62ch; }
.note { color: var(--fg-3); font-size: .86rem; }

/* Chiffres tabulaires partout où il y a une donnée : c'est un club, pas de
   la prose. Archivo compose tous les chiffres (voir la note licence). */
.num, time, .price, .keys b, .tabnum {
  font-family: var(--font-head);
  font-variant-numeric: tabular-nums;
  font-variation-settings: "wdth" 84;
}

.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }

/* ================================================================ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-size: .78rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; text-decoration: none;
  padding: 13px 22px; border-radius: 10px; border: 0; cursor: pointer;
  white-space: nowrap; transition: transform .22s, box-shadow .22s, background .22s, border-color .22s;
  background: var(--lime); color: #001628;
  box-shadow: 0 10px 30px rgba(220, 239, 0, .22);
  max-width: 100%;
}
/* Sous 460 px, un libellé long doit pouvoir passer à la ligne plutôt que de
   pousser la page : aucun bouton ne doit jamais créer de défilement latéral. */
@media (max-width: 460px) {
  .btn { white-space: normal; text-align: center; line-height: 1.35; }
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(220, 239, 0, .34); }
.btn .ico { width: 17px; height: 17px; }

.btn-ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--line); box-shadow: none;
}
.btn-ghost:hover { background: var(--glass-2); border-color: var(--blue); box-shadow: none; }
.page-day .btn-ghost:hover { background: rgba(0, 53, 101, .06); }

.acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* le lien-flèche, pour les actions secondaires en fin de bloc */
.arrow-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-size: .76rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--lime); transition: gap .22s;
}
.arrow-link:hover { gap: 15px; }
.arrow-link .ico { width: 16px; height: 16px; }
.page-day .arrow-link, .day .arrow-link { color: var(--navy); }

/* ================================================================= icônes */
/* Grille de 24, trait 1.6, extrémités franches : la grammaire du marquage au
   sol. Toujours en <symbol viewBox>, jamais en <g> (sinon le dessin est rogné). */
.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: square; stroke-linejoin: miter;
}
.ico-lg { width: 26px; height: 26px; }
.ico-brand { stroke: none; }

/* ============================================================== le verre */
/* Une seule surface, deux réglages (sombre / clair). La lueur bleue sous la
   surface suit le curseur : elle n'apparaît que sur ce qui est actionnable. */
.glass {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r);
  background: var(--glass-2);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .13);
  transition: border-color .3s, transform .3s;
}
/* La lueur est un disque de taille fixe, jamais un pourcentage de la carte.
   Avec `26% 26%` elle prenait 26 % de la largeur en abscisse et 26 % de la
   hauteur en ordonnee : sur une carte large et basse (la barre des creneaux,
   1200 x 90) elle s'aplatissait en un trait de 593 x 44, quand une carte carree
   la rendait presque ronde. Un rayon en pixels donne le meme disque partout.
   L'encadre est aussi revenu de `inset: -45%` a `inset: 0` : la boite valait
   190 % de la carte, donc `--gx`, calcule par script.js en pourcentage de la
   carte, ne tombait pas sur le curseur. */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle var(--lueur) at var(--gx, 50%) var(--gy, 50%), rgba(0, 134, 255, .6), transparent 70%);
  opacity: var(--go, 0); transition: opacity .35s;
}
.page-day .glass::before, .day .glass::before {
  background: radial-gradient(circle var(--lueur) at var(--gx, 50%) var(--gy, 50%), rgba(0, 134, 255, .3), transparent 70%);
}
a.glass, .glass.is-act { text-decoration: none; }
a.glass:hover, .glass.is-act:hover { border-color: rgba(0, 134, 255, .5); }

/* Repli si le navigateur ne sait pas flouter : on opacifie plutôt que de
   laisser un texte blanc sur une photo nette. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: color-mix(in srgb, var(--ground) 84%, transparent); }
}

/* ==================================================== le cadre à photo == */
/* Les photos ne sont jamais teintées : c'est le cadre qui les fait appartenir
   au site. Verre dépoli, filet lumineux, ombre portée profonde. */
.frame {
  /* display: block est indispensable. Seize .frame du site sont des <span>,
     donc inline par defaut, alors que l'image qu'ils contiennent est en bloc
     (regle globale img { display: block }). L'inline ajoutait la fuite de
     ligne autour du bloc : 50 px de verre vide sous chaque photo de la
     mosaique, mesures. Les <figure class="frame">, eux, n'avaient rien. */
  display: block;
  position: relative; padding: 7px; border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--shadow), 0 0 56px rgba(0, 134, 255, .12);
  overflow: hidden;
}
.frame > img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.frame figcaption {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  font-family: var(--font-head); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .95);
}
.frame.is-zoom { cursor: zoom-in; }

/* ========================================================== la révélation */
/* Opacité et translation seulement : aucun parallaxe, aucun décalage de mise
   en page. Sans JS, tout est visible d'emblée (la classe n'est posée que par
   script.js, cf. body.js). */
.js .rv {
  opacity: 0; transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.2, .8, .2, 1), transform .75s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--d, 0ms);
}
.js .rv.in { opacity: 1; transform: none; }

/* =============================================================== bandeau */
/* Une bande epinglee au dessus de la navigation, qui fait tourner les
   informations du moment : l'etat du restaurant, le prochain creneau de padel,
   le groupe WhatsApp du club. Les deux premieres sont ecrites par script.js et
   restent `hidden` sans JavaScript, ou il ne subsiste que le lien du groupe :
   jamais d'annonce vide. */
.bandeau {
  background: var(--ground-2);
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-head);
  font-size: .78rem;
  letter-spacing: .04em;
}
/* --bar-h est la hauteur totale du bandeau, hairline comprise : c'est elle que
   --header-h additionne, donc l'interieur se contente de --bar-h moins le trait. */
.bandeau { min-height: var(--bar-h); }
.bandeau > .wrap {
  display: flex; align-items: center; gap: 4px;
  min-height: calc(var(--bar-h) - 1px);
}
.bandeau-vue {
  position: relative; flex: 1 1 auto;
  display: grid; place-items: center;
  min-height: calc(var(--bar-h) - 1px);
}
.bandeau-item {
  display: block; max-width: 100%;
  color: var(--fg-2);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bandeau-item a {
  color: var(--accent-text);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.bandeau-item a:hover { text-decoration-thickness: 2px; }
/* `display: block` ci-dessus bat la feuille du navigateur : sans cette regle,
   l'attribut `hidden` du repli sans JavaScript ne masquerait rien. */
.bandeau-item[hidden] { display: none; }
.bandeau-item b { font-weight: 600; color: var(--fg); }

/* Avec JavaScript, les annonces se superposent et se relaient. */
.js .bandeau-item {
  position: absolute; left: 0; right: 0;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.js .bandeau-item.is-on { opacity: 1; transform: none; pointer-events: auto; }

.bandeau-fl {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: none; border: 0; padding: 0;
  color: var(--fg-3); cursor: pointer;
  transition: color .2s, background .2s;
}
.bandeau-fl:hover { color: var(--fg); background: var(--glass-2); }
.bandeau-fl .ico { width: 15px; height: 15px; }
.bandeau-fl[data-bandeau-prec] .ico { transform: rotate(90deg); }
.bandeau-fl[data-bandeau-suiv] .ico { transform: rotate(-90deg); }
.bandeau-fl[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .js .bandeau-item { transition: none; }
}
@media (max-width: 560px) {
  .bandeau { font-size: .66rem; letter-spacing: .02em; }
  .bandeau-fl { width: 22px; }
}

/* ============================================================== masthead */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .3s, border-color .3s, -webkit-backdrop-filter .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.masthead.is-stuck {
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  border-bottom-color: var(--line-2);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
}
.masthead > .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: var(--nav-h);
}
.mark { display: flex; align-items: center; flex: none; }
.mark img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav > a {
  font-family: var(--font-head); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--fg-2); padding: 9px 12px; border-radius: 8px; transition: .2s;
}
.nav > a:hover { color: var(--fg); background: var(--glass-2); }
.nav > a[aria-current="page"] { color: var(--fg); }
.nav .socials { display: flex; gap: 2px; margin-left: 4px; }
.nav .socials a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--fg-2); transition: .2s; }
.nav .socials a:hover { color: var(--fg); background: var(--glass-2); }
.nav > a.nav-act, .nav-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  font-family: var(--font-head); font-size: .74rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; text-decoration: none;
  background: var(--lime); color: #001628;
  padding: 11px 18px; border-radius: 9px; margin-left: 6px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 8px 24px rgba(220, 239, 0, .2);
}
.nav-act:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(220, 239, 0, .32); }
.nav-act .ico { width: 16px; height: 16px; }

.burger {
  display: none; width: 42px; height: 42px; place-items: center;
  background: var(--glass-2); border: 1px solid var(--line);
  border-radius: 10px; color: var(--fg); cursor: pointer;
}

@media (max-width: 980px) {
  .burger { display: grid; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 18px clamp(18px, 4vw, 40px) 26px;
    background: color-mix(in srgb, var(--ground) 94%, transparent);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--line-2);
    transform: translateY(-130%); transition: transform .34s cubic-bezier(.2, .8, .2, 1);
    max-height: calc(100svh - var(--header-h)); overflow: auto;
  }
  .nav.is-open { transform: none; }
  .nav > a { font-size: .92rem; padding: 14px 10px; border-bottom: 1px solid var(--line-2); border-radius: 0; }
  .nav .socials { margin: 12px 0 4px; }
  .nav-act { margin: 14px 0 0; text-align: center; padding: 15px; }
}

/* ================================================== le premier écran ==== */
.hero { position: relative; min-height: 100svh; }
.hero > .inner {
  position: relative; min-height: 100svh;
  display: grid; align-content: center; justify-items: center; text-align: center;
  gap: var(--s-3);
  width: min(var(--wrap), 92vw); margin-inline: auto;
  padding: calc(var(--header-h) + 44px) 0 168px;
}
.hero .lead { max-width: 56ch; }

/* les chiffres clés : une ligne nue, aucun conteneur */
.keys {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(22px, 4.4vw, 60px); margin-top: 4px;
}
.keys div { display: grid; gap: 5px; text-align: center; }
.keys b {
  font-family: var(--font-head); font-weight: 800; font-variation-settings: "wdth" 82;
  font-size: clamp(1.5rem, 2.9vw, 2.35rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.keys span {
  font-family: var(--font-head); font-size: .63rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--fg-3); line-height: 1.3;
}
/* Trois chiffres ne tiennent pas sur une ligne de telephone. En resserrant
   l'interlettrage et la gouttiere, la ligne se casse en deux plus un plutot
   qu'en un plus deux : le chiffre isole passe dessous, pas dessus. */
@media (max-width: 560px) {
  .keys { gap: 18px 24px; }
  .keys span { letter-spacing: .1em; }
}

/* la carte de réservation du hero */
.book { display: grid; grid-auto-flow: column; align-items: stretch; gap: 8px; padding: 12px; width: min(820px, 92vw); }
.book .lab {
  display: grid; align-content: center; gap: 2px;
  padding: 2px 18px 2px 10px; text-align: left; border-right: 1px solid var(--line);
}
.book .lab b {
  font-family: var(--font-head); font-size: .64rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
}
.book .lab i {
  font-style: normal; font-family: var(--font-head); font-weight: 800;
  font-size: 1.24rem; color: var(--lime); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.book .lab s { text-decoration: none; font-family: var(--font-head); font-size: .7rem; font-weight: 700; color: var(--fg-3); }
.book .go { display: grid; align-content: center; padding-left: 6px; }
.book-slots { display: grid; grid-auto-flow: column; gap: 6px; }

.book-slot {
  display: grid; align-content: center; justify-items: center; gap: 2px;
  padding: 11px 18px; border-radius: var(--r-s); text-decoration: none;
  color: var(--fg); border: 1px solid transparent; transition: .2s;
}
.book-slot:hover { background: rgba(0, 134, 255, .15); border-color: rgba(0, 134, 255, .45); }
.book-slot .t { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.book-slot .u { font-family: var(--font-head); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.book-slot.is-next { background: rgba(220, 239, 0, .1); border-color: rgba(220, 239, 0, .4); }
.book-slot.is-next .t { color: var(--lime); }
.book-slot.is-next .u { color: rgba(220, 239, 0, .78); }

/* le rappel de défilement */
.cue {
  position: absolute; left: 50%; bottom: 30px; translate: -50% 0; z-index: 4;
  display: grid; justify-items: center; gap: 9px; text-decoration: none;
  font-family: var(--font-head); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3);
}
.cue i { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, var(--fg-3), transparent); }

@media (min-width: 981px) and (max-height: 860px) {
  .hero > .inner { padding: calc(var(--header-h) + 30px) 0 118px; gap: 16px; }
  h1 { font-size: clamp(2.2rem, 5.6vw, 4.5rem); }
}
@media (max-width: 900px) {
  .book { grid-auto-flow: row; width: min(440px, 92vw); gap: 6px; }
  .book .lab {
    border-right: 0; border-bottom: 1px solid var(--line);
    text-align: center; padding: 2px 0 10px;
    grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 10px;
  }
  .book-slots { grid-auto-flow: row; gap: 4px; }
  .book-slot { grid-auto-flow: column; justify-content: space-between; align-items: baseline; padding: 11px 14px; }
  .book .go { padding: 4px 0 0; }
  .book .go .btn { width: 100%; }
  .keys { gap: 20px 26px; }
}
@media (max-width: 600px) {
  .hero > .inner { padding: calc(var(--header-h) + 20px) 0 76px; gap: 14px; }
  .hero .lead { display: none; }
  .keys { gap: 14px 20px; }
  .keys div:nth-child(n+5) { display: none; }
  .keys b { font-size: 1.35rem; }
  .cue { display: none; }
}

/* ================================================= le hero des sous-pages */
.hero-s { position: relative; padding: calc(var(--header-h) + clamp(46px, 8vh, 96px)) 0 clamp(30px, 5vw, 56px); }
.hero-s .inner { display: grid; gap: var(--s-3); justify-items: start; }
.hero-s h1 { font-size: clamp(2.2rem, 5.6vw, 4.4rem); }
.hero-s .lead { max-width: 58ch; }
.hero-s.is-centered .inner { justify-items: center; text-align: center; }

/* ================================================================ bandes */
.band { padding: var(--s-6) 0; position: relative; }
.band-tight { padding: clamp(44px, 6vw, 82px) 0; }
.band-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); max-width: 72ch; }
.band-head .lead { margin-top: 2px; }

/* le chapitre clair, opaque : il masque le champ sombre et pose le sien */
.day {
  background: var(--ground); color: var(--fg);
  position: relative; z-index: 2; overflow: hidden;
}
.day::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52vw 40vw at 78% 12%, var(--halo), transparent 64%),
    radial-gradient(46vw 40vw at 8% 88%, var(--halo-2), transparent 66%);
}
.day > .wrap { position: relative; }

/* =========================================== le tableau des neuf créneaux */
/* Trois colonnes : heure, prix, action. Aucune marque de disponibilité, faute
   d'API Matchpoint : on n'affiche jamais une disponibilité qu'on ne connaît
   pas. Le prochain créneau, lui, est un fait calculable. */
.board { display: grid; gap: 3px; }
.board-head {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: clamp(12px, 3vw, 34px); padding: 0 clamp(12px, 2vw, 20px) 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.board-head span {
  font-family: var(--font-head); font-size: .64rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
}
.board-head span:last-child { text-align: right; }

.slot {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
  gap: clamp(12px, 3vw, 34px);
  padding: 16px clamp(12px, 2vw, 20px); border-radius: 12px;
  text-decoration: none; color: var(--fg);
  background: var(--glass); border: 1px solid transparent;
  transition: background .2s, border-color .2s, transform .2s;
}
.slot:hover { background: rgba(0, 134, 255, .14); border-color: rgba(0, 134, 255, .42); transform: translateX(4px); }
.slot .t { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.05rem, 1.9vw, 1.4rem); font-variant-numeric: tabular-nums; }
.slot .to { font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.slot .price { font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--fg-2); }
.slot .go {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lime);
  opacity: 0; transition: opacity .2s;
}
.slot:hover .go, .slot:focus-visible .go { opacity: 1; }
.slot.is-next { background: rgba(220, 239, 0, .09); border-color: rgba(220, 239, 0, .38); }
.slot.is-next .t { color: var(--lime); }
.slot .tag {
  font-family: var(--font-head); font-size: .58rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: #001628; background: var(--lime); padding: 3px 7px; border-radius: 4px;
  margin-left: 10px; vertical-align: middle;
}
.js .slot .tag { display: none; }
.js .slot.is-next .tag { display: inline-block; }
.js .slot.is-hidden { display: none; }

.board-more {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 6px; padding: 15px;
  font-family: var(--font-head); font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2);
  background: transparent; border: 1px dashed var(--line); border-radius: 12px;
  cursor: pointer; transition: .2s;
}
.board-more:hover { color: var(--fg); border-color: var(--blue); background: var(--glass); }
.board-more .ico { transition: transform .3s; }
.board-more[aria-expanded="true"] .ico { transform: rotate(180deg); }
.board-foot { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; margin-top: var(--s-3); }

@media (max-width: 720px) {
  .board-head, .slot { grid-template-columns: auto 1fr auto; }
  .board-head span:nth-child(2), .slot .to { display: none; }
  .slot .go { opacity: 1; }
  .slot .go span { display: none; }
}

/* ======================================================= bande déroulante */
.ticker {
  overflow: hidden; border-block: 1px solid var(--line-2);
  padding: 15px 0; background: var(--glass);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; gap: 0; width: max-content; animation: ticker 44s linear infinite; }
.ticker span {
  font-family: var(--font-head); font-size: .76rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
  padding: 0 26px; white-space: nowrap; position: relative;
}
.ticker span::after {
  content: ""; position: absolute; right: -3px; top: 50%; translate: 0 -50%;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ============================================================ le tarif == */
.tariff {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(18px, 4vw, 52px);
  padding: clamp(26px, 4vw, 44px); border-radius: 22px;
}
.tariff-big {
  font-family: var(--font-head); font-weight: 800; font-variation-settings: "wdth" 80;
  font-size: clamp(3.4rem, 9vw, 7rem); line-height: .85; color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.tariff-big small {
  display: block; font-size: .16em; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-3); margin-top: 12px;
}
.tariff p { flex: 1 1 320px; color: var(--fg-2); }
.tariff b { color: var(--fg); }

/* =============================================== lignes de fiche (spec) == */
.spec { display: grid; gap: 0; }
.spec-row {
  display: grid; grid-template-columns: auto 1fr; gap: 18px 22px;
  padding: var(--s-3) 0; border-top: 1px solid var(--line-2);
  align-items: start;
}
.spec-row:last-child { border-bottom: 1px solid var(--line-2); }
/* L'icone fait 26 px, la premiere ligne du titre 19 : sans correction, la
   boite de l'icone descend 5,5 px plus bas que le centre de cette ligne. Le
   -2,5 px les recentre l'une sur l'autre. Valeur mesuree, a refaire si le
   corps ou l'interligne des h3 change. */
.spec-row .ico { color: var(--blue); margin-top: -2.5px; }
.spec-row h3 { grid-column: 2; }
.spec-row p { grid-column: 2; color: var(--fg-2); margin-top: 5px; max-width: 68ch; }
.spec-row a { color: var(--accent-text); text-underline-offset: 3px; }
@media (min-width: 900px) {
  /* `align-items: baseline` etait le reglage d'origine, pour poser le titre et
     le texte sur une meme ligne de base malgre leurs deux corps. Mais une
     <svg> n'a pas de ligne de base de texte : la sienne est son bord bas. Le
     navigateur alignait donc le BAS de l'icone sur la ligne de base du titre,
     et comme le groupe baseline poussait titre et texte de 13 px vers le bas,
     l'icone restait seule en haut de la ligne. Mesure : 26 px du haut de ligne
     pour l'icone contre 37 px pour le titre, soit 11 px d'ecart, invisible
     sous 900 px et flagrant au dela. C'est exactement ce que le client
     decrivait par « ca s'aggrave quand j'elargis la fenetre ».

     `start` remet tout le monde en haut de la ligne. Ce que `baseline` faisait
     de bien, poser le titre et le texte sur une meme ligne de base, est rendu
     par un decalage sur le texte : Archivo a 16,96 px sur 19 d'interligne
     contre Open Sans a 16 px sur 22, ce qui met la ligne de base du texte
     6 px sous celle du titre. D'ou ce -3 px, mesure au `fontBoundingBoxAscent`
     et pas choisi a l'oeil. Le remplacer par 0 remonte le texte de 3 px. */
  .spec-row { grid-template-columns: auto 20rem 1fr; align-items: start; }
  .spec-row h3 { grid-column: 2; }
  .spec-row p { grid-column: 3; margin-top: -3px; }
}

/* ================================ le visuel de tete des pages d'atterrissage
   Les .hero-s du site sont volontairement sans image. Une page d'atterrissage,
   elle, doit remplir son premier ecran : c'est le seul endroit du site ou une
   photo passe en fond de section. La photo reste un <img> dans le document,
   pas un background CSS : elle garde son alt, ses dimensions et sa priorite de
   chargement, et le premier ecran ne depend pas du parsing de la feuille.

   LE VOILE EST UN REGLAGE PAR PHOTO, PAS UNE VALEUR DU SYSTEME. Chaque page
   pose ses cinq jetons en ligne sur la section, apres mesure du contraste sur
   le rendu reel. Les valeurs par defaut ci dessous sont celles de
   padel-hero.jpg (luminance moyenne 0,014, 1,07 % de pixels au dessus de
   0,18). Une photo plus claire demande davantage : coaching.jpg est a 0,092 et
   10,5 %, padel-kids.jpg encore au dessus. Copier les jetons d'une page a
   l'autre sans remesurer, c'est passer sous le seuil AA sans s'en apercevoir.

   Le bas de la section n'est pas peint en navy : la photo ET son voile sont
   fondus par un masque commun. Sans lui, le degrade s'arretait net sur le
   champ de lumiere de la section suivante, plus clair, et la couture se
   voyait. Les deux masques doivent rester identiques. */
.hero-photo {
  --voile-haut: .82;    /* opacite du navy en haut de section */
  --voile-milieu: .46;  /* a 46 % de hauteur, la ou se pose le titre */
  --voile-bas: .70;     /* avant le fondu du masque */
  --voile-centre: .40;  /* ellipse posee sous le bloc de texte */
  --voile-ry: 48%;      /* hauteur de cette ellipse */

  position: relative; isolation: isolate; overflow: hidden;
  min-height: 82svh; display: grid; align-items: center;
  padding: calc(var(--header-h) + clamp(30px, 6vh, 72px)) 0 clamp(56px, 11vh, 130px);
}
.hero-photo .hero-fond,
.hero-photo::after {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}
.hero-photo .hero-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  border-radius: 0;
}
/* L'ellipse n'est pas un degre de plus etale sur toute la surface : c'est
   exactement la bande du titre que les degrades lineaires protegent le moins.
   Sans elle, le bleu des <em> du H1 tombait a 2,58:1, sous le seuil de 3:1 des
   grands titres, et il aurait fallu eteindre la photo entiere pour le sauver. */
.hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 64% var(--voile-ry) at 50% 44%, rgba(0, 22, 40, var(--voile-centre)), transparent 74%),
    linear-gradient(180deg,
      rgba(0, 22, 40, var(--voile-haut)) 0%,
      rgba(0, 22, 40, var(--voile-milieu)) 46%,
      rgba(0, 22, 40, var(--voile-bas)) 100%);
}

/* Le H1 d'une page d'atterrissage est centre, alors que tous les H2 du site
   sont fers a gauche. Ce n'est pas un caprice : pose a gauche comme eux, il
   rimait avec le titre de la section suivante et les deux se lisaient comme
   un seul bloc bavard. */
.hero-photo .inner {
  justify-items: center; text-align: center;
  max-width: 46rem; margin-inline: auto;
}
.hero-photo .lead { max-width: 52ch; }
.hero-photo .acts { justify-content: center; }
/* Le --blue du site passe sous 4,5:1 sur une photo de tete, et on ne peut pas
   assombrir davantage sans l'eteindre. Ce bleu eclairci n'a pas d'autre emploi. */
.hero-photo .kick { color: var(--blue-clair); }

/* ====================================== la captation MATCHi TV (reservation)
   Le chapeau de section et une photo debout cote a cote, puis la liste des
   .spec-row en pleine largeur dessous : celles ci ont besoin de leurs trois
   colonnes (icone, titre, texte) et se serreraient dans une demi largeur. */
/* La marge basse est reprise ici parce qu'elle est retiree du .band-head juste
   dessous : sans elle, la photo venait coller le premier trait de la liste. */
.video-tete { display: grid; gap: var(--s-4); align-items: center; margin-bottom: var(--s-5); }
@media (min-width: 900px) { .video-tete { grid-template-columns: 1.1fr .9fr; gap: var(--s-5); } }
.video-tete .band-head { margin-bottom: 0; }
/* Toutes les photos du club sont prises au telephone, donc debout : le cadre
   est taille pour du 3/4, pas pour du panoramique. */
.video-tete .frame { width: 100%; max-width: 420px; justify-self: center; aspect-ratio: 3 / 4; }
/* Le clip de l'academie est filme au telephone, donc en 9/16 : plus etroit que
   les photos 3/4 du site. Sans cet ecart, le cadre de verre laisserait deux
   bandes vides sur les cotes. La video est traitee comme une photo, dans le
   meme cadre : c'est la regle du site, elle vaut aussi pour ce qui bouge. */
.video-tete .clip { max-width: 320px; aspect-ratio: 9 / 16; }
.clip > video { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; display: block; }

/* ============================================================== les cartes */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.card { padding: var(--s-3); display: grid; align-content: start; gap: 10px; }
.card .ico-lg { color: var(--blue); margin-bottom: 4px; }
.card p { color: var(--fg-2); font-size: .95rem; }
.card .card-price {
  margin-top: auto; padding-top: 12px;
  font-family: var(--font-head); font-weight: 800; font-size: 1.5rem;
  color: var(--lime); font-variant-numeric: tabular-nums;
}
.card .card-price small {
  display: block; font-size: .42em; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3); margin-top: 5px;
}
.card .card-price a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
/* L'appel a l'action des cartes vient sous le tarif, pas a sa place : les
   deux cartes de cours gardent leur prix ET leur lien de reservation. */
.card .card-cta {
  margin-top: 2px; justify-self: start;
  /* Une carte de la grille fait 240 px de contenu a 1440 : a la taille
     courante de .arrow-link le libelle passait sur deux lignes. */
  font-size: .68rem; letter-spacing: .07em;
}
.card .card-cta .ico { width: 14px; height: 14px; }
.card.is-lit { border-color: rgba(220, 239, 0, .34); }
.card.is-blue { border-color: rgba(0, 134, 255, .4); }
.card.is-blue .card-price { color: var(--blue); }
.card strong { color: var(--fg); }

/* ============================================================== tarifs == */
.rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.rate { padding: var(--s-3); display: grid; gap: 12px; align-content: start; }
.rate h3 { font-size: 1.14rem; }
.rate .rate-note { color: var(--fg-3); font-size: .88rem; margin-top: -6px; }
.rate.is-featured { border-color: rgba(0, 134, 255, .4); }

.grid-rates { width: 100%; border-collapse: collapse; font-size: .92rem; }
.grid-rates th, .grid-rates td { padding: 10px 4px; text-align: right; border-bottom: 1px solid var(--line-2); }
.grid-rates thead th {
  font-family: var(--font-head); font-size: .6rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
  border-bottom-color: var(--line);
}
.grid-rates tbody th { text-align: left; font-weight: 600; color: var(--fg); }
.grid-rates tbody th small { display: block; font-weight: 400; color: var(--fg-3); font-size: .8em; }
.grid-rates td { font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); }
.grid-rates td.hp { color: var(--fg-2); }

.annual-price {
  font-family: var(--font-head); font-weight: 800; font-variation-settings: "wdth" 82;
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.annual-price small { font-size: .3em; font-weight: 700; letter-spacing: .1em; color: var(--fg-3); }

.plain-list { list-style: none; display: grid; gap: 8px; font-size: .92rem; color: var(--fg-2); }
.plain-list li { padding-left: 18px; position: relative; }
.plain-list li::before { content: ""; position: absolute; left: 0; top: .66em; width: 7px; height: 1.6px; background: var(--blue); }
.plain-list strong { color: var(--fg); }

.legend {
  margin-top: var(--s-3); padding: 16px 18px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--line-2);
  font-size: .88rem; color: var(--fg-2);
}
.legend b { color: var(--fg); font-family: var(--font-head); }

/* ============================================================= académie == */
.badge {
  /* `align-self: start` ne tient que l'axe vertical. Dans un `.band-head`, qui
     est une grille, la pastille etait donc etiree sur toute la largeur malgre
     son `inline-flex` : un element de grille est blockifie. `justify-self` est
     ce qui la ramene a la largeur de son texte. */
  display: inline-flex; align-items: center; gap: 9px;
  align-self: start; justify-self: start;
  font-family: var(--font-head); font-size: .66rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 100px;
  background: var(--glass-2); border: 1px solid var(--line); color: var(--fg);
}
.badge.is-blue { border-color: rgba(0, 134, 255, .5); color: var(--blue-clair); }

.included { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s-4); }
.included span {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2);
  padding: 9px 15px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--line-2);
}
.included .ico { width: 17px; height: 17px; color: var(--blue); }

.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pack { padding: var(--s-3); display: grid; gap: 8px; align-content: start; }
.pack-age {
  font-family: var(--font-head); font-size: .64rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue-clair);
}
.pack-when { color: var(--fg-3); font-size: .88rem; }
.pack-price {
  margin-top: 8px; font-family: var(--font-head); font-weight: 800;
  font-variation-settings: "wdth" 82; font-size: 2rem; line-height: 1;
  color: var(--lime); font-variant-numeric: tabular-nums;
}
.pack-price small { font-size: .38em; font-weight: 700; letter-spacing: .1em; color: var(--fg-3); }

/* ============================================================== coachs == */
.coaches { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.coach { display: grid; gap: 12px; align-content: start; }
.coach .frame { padding: 6px; }
.coach .frame > img { aspect-ratio: 3 / 4; }
.coach-name { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
.coach-first {
  display: block; font-family: var(--font-head); font-size: .68rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--lime);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
.coach-name h3 {
  font-family: var(--font-h1); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: .95; letter-spacing: -.02em;
  color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .95);
}
.coach-role { font-size: .78rem; color: rgba(255, 255, 255, .84); text-shadow: 0 2px 10px rgba(0, 0, 0, .95); margin-top: 3px; }
.coach .frame::after {
  content: ""; position: absolute; inset: 6px; border-radius: 11px; z-index: 1;
  background: linear-gradient(180deg, transparent 42%, rgba(0, 12, 24, .88));
  pointer-events: none;
}

/* ================================================= replis (details/faq) == */
.fold { border-top: 1px solid var(--line-2); }
.fold:last-of-type { border-bottom: 1px solid var(--line-2); }
.fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: var(--s-3) 0; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
  transition: color .2s;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { color: var(--blue); }
.fold > summary .ico { color: var(--blue); transition: transform .3s; }
.fold[open] > summary .ico { transform: rotate(180deg); }
.fold-body { padding-bottom: var(--s-3); color: var(--fg-2); display: grid; gap: 12px; max-width: 74ch; }
.fold-body a { color: var(--accent-text); text-underline-offset: 3px; }
.fold-body b { color: var(--fg); }

/* ============================================================= mosaïque == */
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.mosaic figure { margin: 0; }
.mosaic .m-a { grid-column: span 4; }
.mosaic .m-b { grid-column: span 2; }
.mosaic .m-c { grid-column: span 2; }
.mosaic .m-d { grid-column: span 2; }
.mosaic .m-e { grid-column: span 2; }
.mosaic .frame > img { aspect-ratio: 4 / 3; }
.mosaic .m-a .frame > img { aspect-ratio: 16 / 9; }
/* A cote de la grande case 16:9, la case m-b en 4:3 laissait un trou de verre
   vide sous sa legende. Elle suit donc la hauteur de la rangee : le cadre
   prend l'espace restant et la photo le remplit. Sous 761 px m-a occupe seule
   sa rangee, m-b retrouve son 4:3. */
@media (min-width: 761px) {
  .mosaic .m-b { display: flex; flex-direction: column; }
  .mosaic .m-b .frame { flex: 1; min-height: 0; }
  /* Sortie du flux : chargee, la photo portrait imposait sa hauteur naturelle
     a la rangee et la case depassait la grande de 62 px. */
  .mosaic .m-b .frame > img {
    aspect-ratio: auto; position: absolute; inset: 7px;
    width: calc(100% - 14px); height: calc(100% - 14px);
  }
}
@media (max-width: 760px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic .m-a { grid-column: span 2; }
  .mosaic .m-b, .mosaic .m-c, .mosaic .m-d, .mosaic .m-e { grid-column: span 1; }
}

.figure-wide .frame > img { aspect-ratio: 21 / 9; }
.figure-wide figcaption { margin-top: 12px; color: var(--fg-3); font-size: .86rem; }

/* ================================================================== duo == */
.duo { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo p + p { margin-top: 1em; }
.duo p { color: var(--fg-2); }
.duo .frame > img { aspect-ratio: 4 / 5; }

/* ============================================================= whatsapp == */
.wa-block { padding: clamp(30px, 5vw, 56px); display: grid; justify-items: center; text-align: center; gap: var(--s-2); }
.wa-mark {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
  background: rgba(37, 211, 102, .14); border: 1px solid rgba(37, 211, 102, .42); color: #25d366;
  margin-bottom: 6px;
}
.wa-mark .ico { width: 26px; height: 26px; }
.wa-block .hl-wa { color: #25d366; }
.btn-wa { background: #25d366; color: #04240f; box-shadow: 0 10px 30px rgba(37, 211, 102, .26); }
.btn-wa:hover { box-shadow: 0 16px 40px rgba(37, 211, 102, .38); }

/* ================================================================ avis == */
.score {
  font-family: var(--font-head); font-weight: 800; font-variation-settings: "wdth" 80;
  font-size: clamp(3rem, 8vw, 6rem); line-height: .9; color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.score span {
  display: block; font-size: .16em; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-3); margin-top: 12px;
}
/* Crochets des donnees Google. Ce sont des <b> et des <i>, pas des <span> :
   .score span est en display:block, donc un span imbrique casserait la ligne
   et heriterait de la taille reduite. */
.score b { font: inherit; }
.score span i { font-style: normal; }
/* Chapitre clair : le lime tombe a 1,14:1 sur le fond ivoire. Le chiffre
   passe en navy, seul ton de la charte lisible sur cette surface. */
.page-day .score { color: var(--accent-text); }
/* --- le mur d'avis Google ---------------------------------------------
   Des colonnes, pas une grille. Une grille aligne toutes les cartes d'une
   meme ligne sur la plus haute : un avis de deux lignes se retrouverait
   dans une boite dimensionnee par l'avis de dix lignes d'a cote. En
   colonnes, chaque carte s'arrete a son texte et la suivante remonte se
   coller contre elle. Meme mecanisme que la carte de menu.html. */
.avis-mur { column-gap: 14px; margin-top: var(--s-4); }
@media (min-width: 760px)  { .avis-mur { column-count: 2; } }
@media (min-width: 1120px) { .avis-mur { column-count: 3; } }
.avis-carte {
  break-inside: avoid; page-break-inside: avoid;
  padding: var(--s-3); margin-bottom: 14px; display: grid; gap: 11px;
}
.avis-tete { display: flex; gap: 11px; align-items: center; }
.avis-qui { min-width: 0; }
.avis-qui b { display: block; font-size: .92rem; font-weight: 700; }
.avis-carte p { color: var(--fg-2); font-size: .95rem; line-height: 1.6; }
.avis-init {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--navy); color: #fff; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: .78rem;
  border: 1px solid var(--line);
}
.page-day .avis-init { background: var(--navy); color: #fff; }
.avis-date { font-size: .74rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
/* Les etoiles gardent le jaune de Google : c'est une citation de leur
   interface, pas une couleur de la charte. Le lime reste l'action. */
.avis-etoiles { display: inline-flex; gap: 2px; }
.avis-etoiles .ico { width: 14px; height: 14px; fill: #fbbc05; stroke: none; }
.avis-etoiles .ico.off { fill: var(--line); }
.avis-lien {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-family: var(--font-head); font-size: .6rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.avis-lien .ico { width: 13px; height: 13px; }
.avis-lien:hover { color: var(--fg); }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.quote { padding: var(--s-3); display: grid; gap: 12px; }
.quote blockquote { font-size: 1.02rem; color: var(--fg); line-height: 1.6; }
.quote figcaption { font-family: var(--font-head); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.quote figcaption a { color: var(--accent-text); }
/* La note et l'appel a l'avis se partagent une ligne, en tete de section.
   align-items: flex-end aligne le bouton sur la ligne de base du chiffre,
   pas sur son milieu : cale sur le centre, il flottait dans le vide laisse
   par les 76 px du 5,0. */
.avis-entete {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 18px 26px;
}
.avis-entete .score { margin: 0; }
.btn-avis { font-size: .68rem; padding: 10px 16px; gap: 8px; }
.btn-avis .ico-brand { width: 16px; height: 16px; }
@media (max-width: 620px) { .avis-entete { align-items: flex-start; } }
.stars { display: inline-flex; gap: 2px; }
.stars .ico { width: 13px; height: 13px; fill: var(--lime); stroke: none; }

/* ============================================================== horaires */
.hours { display: grid; gap: 1px; margin: var(--s-3) 0; }
.hours-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 11px 12px; border-radius: 8px; border-bottom: 1px solid var(--line-2);
}
.hours-row b { font-family: var(--font-head); font-weight: 700; font-size: .9rem; }
.hours-row span { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.hours-row.is-today { background: rgba(0, 134, 255, .12); border-color: transparent; }
.hours-row.is-today b, .hours-row.is-today span { color: var(--blue-clair); }

address { font-style: normal; color: var(--fg-2); line-height: 1.8; }
address b { display: block; font-family: var(--font-head); font-weight: 800; color: var(--fg); font-size: 1.05rem; margin-bottom: 4px; }

.contact-lines { list-style: none; display: grid; gap: 10px; margin: var(--s-3) 0; }
.contact-lines li { display: flex; align-items: center; gap: 12px; color: var(--fg-2); font-size: .95rem; }
.contact-lines .ico { color: var(--blue); }
.contact-lines a { color: var(--fg); text-underline-offset: 3px; }

.map { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(.2) contrast(1.05); }

/* =============================================== service du restaurant == */
.service { display: grid; gap: 1px; }
.service-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  padding: 11px 12px; border-radius: 8px; border-bottom: 1px solid var(--line-2);
  font-size: .92rem;
}
.service-head span {
  font-family: var(--font-head); font-size: .62rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
}
.service-row > span:first-child { font-family: var(--font-head); font-weight: 700; }
.service-cell { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.service-cell i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.service-cell.on i { background: var(--blue); }
.service-cell.off i { background: var(--line); }
.service-cell.off { color: var(--fg-3); }
.service-row.is-today { background: rgba(0, 134, 255, .1); border-color: transparent; }

.status {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 15px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--line);
}
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); flex: none; }
.status[data-state="open"] i { background: #23c552; box-shadow: 0 0 10px #23c552; }
.status[data-state="closed"] i { background: #e06a5a; }

.callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding: var(--s-4); border-radius: var(--r);
}
.callout p { color: var(--fg-2); flex: 1 1 320px; }
.callout b { color: var(--fg); }
/* Sous 560 px, la boite du callout retire assez de largeur pour qu'un libelle
   de plus de vingt caracteres passe a la ligne dans son bouton, alors que le
   meme libelle tient dans le hero. Les deux actions s'empilent donc, pleine
   largeur : c'est aussi plus facile a viser au pouce. */
@media (max-width: 560px) {
  .callout .acts { flex-direction: column; align-items: stretch; width: 100%; }
  /* Le rembourrage lateral tombe de 22 a 14 px : le callout retire 70 px de
     largeur a ses boutons, et un libelle de vingt caracteres passait a la
     ligne pour cinq pixels manquants. */
  .callout .acts .btn { justify-content: center; padding-inline: 14px; }
}

/* ================================================== la carte du menu ====
   Deux parties (à manger, à boire), chacune coulée sur deux colonnes que le
   navigateur équilibre lui-même. C'est la seule mise en page qui reste
   équilibrée quand une catégorie s'allonge : un partage manuel en deux
   colonnes déséquilibre dès qu'un côté porte plus de lignes que l'autre. */
.menu-part + .menu-part { margin-top: var(--s-6); }
.menu-part-title {
  font-family: var(--font-h1); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: .95; letter-spacing: -.025em;
  padding-bottom: 14px; margin-bottom: var(--s-4);
  border-bottom: 2px solid var(--fg);
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
}
.menu-part-title small {
  font-family: var(--font-head); font-size: .62rem; font-weight: 800;
  letter-spacing: .2em; color: var(--fg-3); text-transform: uppercase;
}
.menu-cols { column-gap: clamp(38px, 5vw, 72px); }
@media (min-width: 900px) { .menu-cols { column-count: 2; } }
.menu-cols .menu-cat { break-inside: avoid; page-break-inside: avoid; margin-bottom: var(--s-5); }
.menu-cols .menu-cat:last-child { margin-bottom: 0; }
.menu-cat h3 {
  display: flex; align-items: center; gap: 11px;
  font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.menu-cat h3 .ico { color: var(--blue); }
.menu-cat-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg-3); font-size: .85em; }
.menu-item + .menu-item { margin-top: 14px; }
.menu-line { display: flex; align-items: baseline; gap: 8px; }
.menu-name { font-weight: 600; }
.menu-name small { font-weight: 400; color: var(--fg-3); }
.menu-dots { flex: 1; border-bottom: 1px dotted var(--line); translate: 0 -4px; }
.menu-price { font-family: var(--font-head); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-desc { color: var(--fg-3); font-size: .88rem; margin-top: 3px; max-width: 56ch; }
.veg {
  font-family: var(--font-head); font-size: .58rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text);
  border: 1px solid currentColor; padding: 2px 6px; border-radius: 4px; margin-left: 7px;
  vertical-align: middle;
}
.drink-grid { width: 100%; border-collapse: collapse; font-size: .92rem; }
.drink-grid caption { text-align: left; color: var(--fg-3); font-size: .8rem; margin-bottom: 8px; }
.drink-grid th, .drink-grid td { padding: 9px 4px; text-align: right; border-bottom: 1px solid var(--line-2); }
.drink-grid thead th { font-family: var(--font-head); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.drink-grid tbody th { text-align: left; font-weight: 600; }
.drink-grid tbody th small { font-weight: 400; color: var(--fg-3); }
.drink-grid td { font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums; }
.menu-foot { margin-top: var(--s-4); color: var(--fg-3); font-size: .9rem; }
.menu-foot b { color: var(--fg); }

/* ================================== l'aperçu de la carte (page resto) === */
.taste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-top: var(--s-4);
}
.taste-cat { padding: var(--s-3); display: grid; align-content: start; gap: 9px; }
.taste-cat .ico-lg { color: var(--blue); margin-bottom: 2px; }
.taste-cat p { color: var(--fg-2); font-size: .92rem; }
.taste-from {
  margin-top: auto; padding-top: 8px;
  font-family: var(--font-head); font-weight: 800; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.menu-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-top: var(--s-4);
  text-decoration: none; color: var(--fg);
}
.menu-cta:hover { border-color: var(--navy); }
.menu-cta-t { display: grid; gap: 4px; }
.menu-cta-t b { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; }
.menu-cta-t span { color: var(--fg-2); font-size: .9rem; }
.menu-cta-go {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: .76rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  background: var(--lime); color: #001628;
  padding: 14px 22px; border-radius: 10px; white-space: nowrap;
  transition: transform .22s;
}
.menu-cta:hover .menu-cta-go { transform: translateX(4px); }

/* ============================================ la page carte (QR code) === */
/* Lue debout, sur un téléphone, à table. Barre de retour toujours visible,
   sommaire collant, aucune photo : rien qui retarde la lecture d'un prix. */
.menu-bar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
}
.menu-bar > .wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; min-height: 62px;
}
.menu-bar .mark { justify-self: center; }
.menu-bar .mark img { height: 26px; }
.menu-back, .menu-call {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-head); font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2);
  padding: 10px 12px; border-radius: 9px; min-height: 44px; transition: .2s;
}
.menu-call { justify-self: end; color: var(--navy); }
.menu-back:hover, .menu-call:hover { color: var(--fg); background: var(--glass); }
.menu-back .ico, .menu-call .ico { width: 17px; height: 17px; }
@media (max-width: 560px) { .menu-back span, .menu-call span { display: none; } }

.menu-top { padding: clamp(30px, 5vw, 56px) 0 0; }
.menu-top h1 { font-size: clamp(2.4rem, 8vw, 4.6rem); margin: 10px 0 var(--s-3); }
.midi {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding: var(--s-3); margin-top: var(--s-3);
}
.midi b { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; }
.midi p { color: var(--fg-2); font-size: .9rem; margin-top: 3px; max-width: 42ch; }
/* Deux colonnes de meme largeur, prix et libelle centres l'un sur l'autre,
   separees par un filet : alignes a droite, les deux blocs n'avaient ni le meme
   axe ni la meme largeur, et les libelles de longueurs differentes decalaient tout. */
.midi-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.midi-prices span { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; padding-inline: clamp(16px, 3vw, 32px); }
.midi-prices span + span { border-left: 1px solid var(--line); }
@media (max-width: 560px) {
  .midi-prices { width: 100%; border-top: 1px solid var(--line); padding-top: var(--s-3); }
  .midi-prices span { padding-inline: 8px; }
}
.midi-prices b {
  font-family: var(--font-head); font-weight: 800; font-variation-settings: "wdth" 82;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.midi-prices small {
  font-family: var(--font-head); font-size: .58rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3);
  line-height: 1.5;
}
.menu-jump { display: flex; gap: 6px; margin-top: var(--s-3); }
.menu-jump a {
  flex: 1; text-align: center; text-decoration: none;
  font-family: var(--font-head); font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2);
  padding: 14px 16px; border-radius: 10px; min-height: 44px;
  background: var(--glass); border: 1px solid var(--line); transition: .2s;
}
.menu-jump a:hover { color: var(--fg); border-color: var(--navy); }

/* ================================================= widgets Matchpoint === */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-4); }
.subnav a {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--fg-2); padding: 12px 17px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--line-2); transition: .2s;
}
.subnav a:hover { color: var(--fg); border-color: var(--blue); }
.subnav a[aria-current="page"] { color: var(--fg); border-color: rgba(0, 134, 255, .55); background: rgba(0, 134, 255, .12); }
.subnav .ico { width: 17px; height: 17px; }

/* Bloc de passage vers la plateforme Matchpoint (reservation, matchs, cours).
   Matchpoint n'integre rien dans le site : on renvoie vers ses pages par des
   liens (reponse du support, septembre 2026). */
.platform {
  display: grid; justify-items: center; text-align: center; gap: 14px;
  padding: clamp(34px, 6vw, 66px); border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--line-2);
}
.platform h3 {
  font-family: var(--font-head); font-weight: 800;
  font-size: 1.06rem; line-height: 1.3; letter-spacing: -.01em;
  text-transform: none;
}
.platform .ico-lg { color: var(--blue); }
.platform p { color: var(--fg-2); max-width: 54ch; }

/* ================================================================ prose */
.prose { max-width: 72ch; display: grid; gap: 1.1em; color: var(--fg-2); }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 1.4em; color: var(--fg); }
.prose ul { list-style: none; display: grid; gap: 9px; }
.prose ul li { padding-left: 18px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 1.6px; background: var(--blue); }
.prose strong { color: var(--fg); }
.prose a { color: var(--accent-text); text-underline-offset: 3px; }
.prose em { color: var(--lime); font-style: normal; }
.prose .todo {
  padding: 16px 18px; border-radius: 12px;
  background: rgba(220, 239, 0, .08); border: 1px solid rgba(220, 239, 0, .3); color: var(--fg-2);
}
.prose .todo strong { color: var(--lime); }

/* ======================================== le passage vers la table ==== */
/* Derniere section de l'accueil. La page bascule au chapitre clair et deux
   colonnes de cadres glissent en sens contraire : c'est le contre-sens qui
   donne la profondeur, pas la vitesse.

   C'est le troisieme mouvement du site, et le seul qui tourne sans que le
   visiteur ait rien fait. Choix assume du client, voir DESIGN.md. Il est
   coupe sous prefers-reduced-motion, ou la bande devient une image fixe. */
/* Encadree, pas pleine page : posee en bloc arrondi dans la gouttiere, sur le
   navy. Une bande claire d'un bord a l'autre coupait la page net, et la
   transition se lisait comme une rupture. La carte, elle, se pose. */
.tbl {
  padding: 0; overflow: hidden;
  border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
}
.tbl-grille { display: grid; grid-template-columns: 1fr; min-height: 620px; }
@media (min-width: 900px) { .tbl-grille { grid-template-columns: 1.1fr .9fr; } }
.tbl-txt {
  display: grid; gap: 18px; align-content: center; justify-items: start;
  padding: clamp(40px, 5vw, 74px) clamp(20px, 4vw, 58px);
}
.tbl-txt .lead { color: var(--fg-2); max-width: 44ch; }
/* Les trois reperes de la section. Meme grammaire que les etiquettes du
   site : Archivo, capitales, interlettrage large, sur une pastille de verre. */
.faits { display: flex; flex-wrap: wrap; gap: 8px; }
.faits span {
  font-family: var(--font-head); font-size: .66rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2);
  padding: 8px 13px; border-radius: 40px;
  border: 1px solid var(--line); background: var(--glass);
}
/* Hauteur imposee. overflow: hidden ne suffit pas : sans hauteur, la boite
   continue de se dimensionner sur ses six cadres empiles (1628 px au lieu
   de 620) et la section entiere s'allonge. */
.tbl-colonnes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  overflow: hidden; position: relative; height: 620px;
}
.tbl-col { display: grid; gap: 12px; align-content: start; }
.tbl-col.monte { animation: tbl-monte 44s linear infinite; }
.tbl-col.descend { animation: tbl-descend 44s linear infinite; }
@keyframes tbl-monte   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes tbl-descend { from { transform: translateY(-50%); } to { transform: translateY(0); } }
/* Les cadres de la bande n'ont pas de backdrop-filter, contrairement au reste
   du site. Douze surfaces de verre depoli dans une colonne animee en transform
   obligent le navigateur a re-echantillonner un arriere-plan en mouvement : il
   affiche des bavures et des bandes remanentes en haut de chaque cadre. Un fond
   blanc franc donne exactement le meme rendu sur le chapitre clair, sans
   echantillonnage. La photo, elle, reste intacte. */
.tbl-colonnes .frame {
  aspect-ratio: 3 / 4;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(255, 255, 255, .82);
}
/* Chaque colonne sur sa propre couche de composition : le navigateur cesse de
   repeindre les cadres a chaque image. */
.tbl-col { will-change: transform; }

/* Sous 900 px, deux colonnes verticales de 620 px donnent un pave dont les
   cadres sont coupes au hasard, et la section grimpe a 1071 px. La bande
   passe donc a l'horizontale sur une seule ligne. */
@media (max-width: 899px) {
  .tbl-grille { min-height: 0; }
  .tbl-txt { padding-bottom: var(--s-3); }
  .tbl-colonnes { height: 214px; grid-template-columns: 1fr; gap: 0; }
  .tbl-col.descend { display: none; }
  .tbl-col.monte {
    display: flex; gap: 12px; width: max-content; align-items: flex-start;
    animation: tbl-glisse 44s linear infinite;
  }
  .tbl-col.monte .frame { width: 150px; flex: none; }
}
@keyframes tbl-glisse { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .tbl-col.monte, .tbl-col.descend { animation: none; }
}

/* ================================================================ footer */
/* Dans le chapitre clair, le pied de page est blanc franc et non l'ivoire
   assombri du calcul par defaut, qui virait au gris. Il se detache du corps
   de la page par le haut, vers le clair, au lieu de s'y enfoncer. */
.page-day .foot { background: var(--ground-2); }

.foot { padding: var(--s-6) 0 calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); background: color-mix(in srgb, var(--ground) 88%, #000); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); }
.foot-grid img { height: 34px; width: auto; margin-bottom: 14px; }
.foot-grid h3 { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
.foot-grid ul { list-style: none; display: grid; gap: 9px; }
.foot-grid a { color: var(--fg-2); text-decoration: none; font-size: .92rem; transition: color .2s; }
.foot-grid a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.foot-end {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line-2);
  font-size: .82rem; color: var(--fg-3);
}
.foot-legal { display: flex; gap: 18px; }
.foot-legal a { color: var(--fg-3); text-underline-offset: 3px; }

/* ============================================== barre d'action mobile == */
.dock { display: none; }
@media (max-width: 760px) {
  .dock {
    position: fixed; z-index: 70; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; gap: 6px;
    padding: 6px; border-radius: 100px;
    background: color-mix(in srgb, var(--ground) 82%, transparent);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  }
  .dock a {
    /* Largeur selon le libelle, pas en parts egales : un libelle long
       (« Réserver une table ») passait sinon sur deux lignes. */
    flex: 1 1 auto; white-space: nowrap;
    display: grid; place-items: center; padding: 13px 10px; border-radius: 100px;
    font-family: var(--font-head); font-size: .72rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--fg-2);
    min-height: 44px;
  }
  .dock a.is-primary { background: var(--lime); color: #001628; }
  .foot { padding-bottom: 96px; }
}

/* ============================================================== lightbox */
.lb {
  position: fixed; inset: 0; z-index: 120; display: none; place-items: center;
  padding: 5vh 4vw; background: rgba(0, 8, 18, .93);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lb.is-open { display: grid; }
.lb img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 12px; }
.lb button {
  position: absolute; top: 20px; right: 20px; width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 12px; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--line); color: #fff;
}

/* =============================================================== loader */
.loader {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: var(--ground); opacity: 0; pointer-events: none; transition: opacity .3s;
}
.loader.is-on { opacity: 1; pointer-events: auto; }
.loader span {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--lime);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================== mouvement réduit ======== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .rv { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}

/* ================================ lien sans decoration (maillage discret)
   Renvoi ecrit dans le corps du texte vers une page d'atterrissage. Le lien
   reste un <a href> lisible et cliquable, il n'est simplement pas peint :
   Google lit le HTML, pas la couleur, le signal est donc entier. Selecteur
   a.lk-plain (0,1,1) et non .lk-plain (0,1,0), sinon .spec-row a et
   .fold-body a le repeignent en bleu. Le focus clavier reste visible, il est
   pose plus haut sur :focus-visible et n'est pas touche ici. */
a.lk-plain, a.lk-plain:hover { color: inherit; text-decoration: none; }

/* ============================== chapeau d'une partie de la carte tarifs ==
   Deux ou trois phrases entre le titre de partie et les colonnes de prix.
   Une grille de prix seule ne se positionne pas : il lui faut du texte qui
   dise ce que le prix comprend. */
.menu-intro { color: var(--fg-2); max-width: 68ch; margin-bottom: var(--s-4); }
.menu-part-title:has(+ .menu-intro) { margin-bottom: var(--s-3); }

/* Sur mobile, la precision entre parenthese passe sous le libelle : les noms
   de la page tarifs portent des mots cles, ils sont plus longs que ceux de la
   carte du restaurant, et la ligne de pointilles tombait a zero. Mesure a
   375 px : 11 lignes sur 28 se repliaient sur deux niveaux. */
@media (max-width: 560px) { .menu-name small { display: block; } }

/* =================================== intitule de la section widget ======
   Ce h2 doit exister pour la structure (il porte la rubrique au-dessus du
   bloc de passage vers Matchpoint) mais il tombe juste sous le h1 de
   la page : en corps de titre d'affichage, l'ecran montre deux titres empiles.
   Il se rend donc comme un intitule de rubrique, pas comme une accroche. */
.widget-title {
  font-family: var(--font-head); font-weight: 800;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-3); line-height: 1.4; margin-bottom: 10px;
}

/* ============================== echelle des huit niveaux de padel =======
   Rendue en .fold pour rester compacte : huit blocs deplies feraient une
   page a eux seuls. Le summary est un flex en space-between, donc le numero
   et le libelle doivent tenir dans un seul enfant, sinon ils se retrouvent
   aux deux bouts de la ligne avec le chevron au milieu. */
.niveaux .lvl-name { display: inline-flex; align-items: center; gap: 12px; }
.niveaux .lvl {
  font-family: var(--font-head); font-weight: 800; font-size: .8rem;
  font-variation-settings: "wdth" 82;
  min-width: 26px; padding: 3px 0; border-radius: 6px;
  text-align: center; color: var(--ground); background: var(--lime);
}

/* ============================================================ page 404 == */
/* Une piste vue du dessus, dans un panneau de verre, et la balle qui sort des
   limites. Le lime reste reserve au bouton Reserver : la balle est blanche,
   la trajectoire en bleu eclairci. La page pousse le pied de page en bas de
   l'ecran, sinon il remontait au milieu d'une page presque vide. */
.lost { min-height: calc(100svh - 70px); display: flex; flex-direction: column; }
.lost-hero { padding: calc(var(--header-h) + clamp(40px, 7vh, 88px)) 0 var(--s-5); }
.lost-grid { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 960px) { .lost-grid { grid-template-columns: 1.05fr .95fr; } }
.lost-text { display: grid; gap: var(--s-3); justify-items: start; }
.lost-text h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
.lost-text .acts { margin-top: var(--s-2); }

.lost-court { margin: 0; padding: clamp(18px, 3vw, 30px); }
.lost-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lost-svg .c-line { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 2; }
.lost-svg .c-net { stroke: #fff; stroke-width: 3; stroke-dasharray: 2 5; }
.lost-svg .c-shot {
  fill: none; stroke: var(--blue-clair); stroke-width: 2; stroke-dasharray: 7 7;
  stroke-linecap: round;
}
.lost-svg .c-mark { fill: none; stroke: var(--blue-clair); stroke-width: 1.5; opacity: .55; }
.lost-svg .c-ball circle { fill: #fff; }
.lost-svg .c-ball path { fill: none; stroke: var(--ground); stroke-width: 1.4; }

.lost-score {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line);
}
.lost-code {
  font-weight: 800; font-variation-settings: "wdth" 80;
  font-size: clamp(3.4rem, 8vw, 5.6rem); line-height: .85; color: var(--fg);
  letter-spacing: -.02em;
}
.lost-call {
  font-family: var(--font-head); font-weight: 800; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg); line-height: 1.5;
}
.lost-call small { font-weight: 600; letter-spacing: .1em; color: var(--fg-2); font-size: .72rem; }

.lost-next { padding: var(--s-4) 0 var(--s-6); margin-top: auto; }
.lost-h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: var(--s-4); }
.lost-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lost-card { display: grid; gap: 8px; padding: 22px 22px 20px; color: var(--fg); }
.lost-card p { color: var(--fg-2); font-size: .94rem; }
/* Le bleu du site passe sous 4,5:1 sur le verre (3,78:1 mesure) : variante eclaircie. */
.lost-card .kick { color: var(--blue-clair); }
.lost-card .ico { margin-top: 6px; color: var(--fg-2); transition: transform .25s, color .25s; }
.lost-card:hover .ico { transform: translateX(5px); color: var(--fg); }

/* La balle part du fond de piste, passe le filet et sort. Sous
   prefers-reduced-motion rien ne bouge et le dessin est complet d'emblee.
   Dans le panneau de preview, qui gele les animations, la balle reste a son
   etat de depart : injecter `.lost-svg *{animation:none!important}` pour auditer. */
@media (prefers-reduced-motion: no-preference) {
  .lost-svg .c-shot { animation: lost-shot 1.1s .3s cubic-bezier(.3, .6, .4, 1) both; }
  .lost-svg .c-ball { animation: lost-ball .5s 1.2s ease-out both; transform-box: fill-box; transform-origin: center; }
  .lost-svg .c-mark { animation: lost-mark 1.4s 1.5s ease-out both; transform-box: fill-box; transform-origin: center; }
}
@keyframes lost-shot { from { stroke-dashoffset: 420; opacity: 0; } 10% { opacity: 1; } to { stroke-dashoffset: 0; } }
@keyframes lost-ball { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: scale(1); } }
@keyframes lost-mark { from { opacity: .8; transform: scale(.4); } to { opacity: .55; transform: scale(1); } }

/* ======================================= le restaurant dans le site ====
   Septembre 2026 : le restaurant fait vivre le complexe, le client le veut
   visible des l'arrivee sans denaturer le club de padel. */

/* Le bouton de l'en-tete, a cote de l'action principale. Encadre, jamais lime :
   le lime reste reserve a Reserver. (0,2,1) pour battre .nav > a. */
.nav > a.nav-resto {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-weight: 800; color: var(--fg);
  border: 1px solid rgba(255, 255, 255, .34); padding: 10px 16px; border-radius: 9px; margin-left: 6px;
}
.nav > a.nav-resto:hover { border-color: #fff; background: var(--glass-2); }
.page-day .nav > a.nav-resto { border-color: var(--line); }
.page-day .nav > a.nav-resto:hover { border-color: var(--navy); }
.nav-resto .ico { width: 17px; height: 17px; }
/* Entre 981 et 1180 px, l'en-tete ne tient plus avec le libelle : le bouton
   passe a l'icone seule (le nom reste dans aria-label). */
@media (min-width: 981px) and (max-width: 1180px) {
  .nav > a.nav-resto { padding: 10px 12px; margin-left: 2px; }
  .nav > a.nav-resto span { display: none; }
  .nav > a { white-space: nowrap; padding-inline: 7px; letter-spacing: .07em; }
  .nav > a.nav-act { padding-inline: 13px; margin-left: 4px; }
  .nav .socials { margin-left: 0; }
  .nav .socials a { width: 32px; }
}
@media (max-width: 980px) { .nav > a.nav-resto { justify-content: center; margin: 10px 0 0; padding: 15px; } }

/* Trois actions dans la barre mobile : libelles resserres pour tenir a 375 px. */
@media (max-width: 760px) {
  .dock:has(> a:nth-child(3)) a { font-size: .64rem; letter-spacing: .05em; padding-inline: 6px; }
}
@media (max-width: 359px) {
  .dock a { padding-inline: 6px; }
  .dock:has(> a:nth-child(3)) a { font-size: .58rem; letter-spacing: .02em; padding-inline: 2px; }
}

/* Premier ecran de l'accueil : les pistes a gauche, la salle a droite, separees
   en diagonale. Seule photo de fond hors pages d'atterrissage. La photo des
   pistes est tres sombre a la source : son exposition est relevee (sans teinte),
   sinon l'oeil ne voyait que le restaurant. Voile et halo mesures pixel par
   pixel : tous les textes du premier ecran passent AA, « 20 min » compris. */
.hero-diag { isolation: isolate; overflow: hidden; }
.hero-diag .diag {
  position: absolute; inset: 0; z-index: -2;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
.hero-diag .diag img {
  position: absolute; top: 0; height: 100%; max-width: none;
  object-fit: cover; border-radius: 0;
}
.hero-diag .d-padel { left: 0; width: 62%; clip-path: polygon(0 0, 100% 0, 61.3% 100%, 0 100%); object-position: center 40%; filter: brightness(2.2); }
.hero-diag .d-resto { left: 38%; width: 62%; clip-path: polygon(38.7% 0, 100% 0, 100% 100%, 0 100%); object-position: center 45%; }
.hero-diag .diag svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hero-diag .d-trait { stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; }
.hero-diag::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 26% at 50% 36%, rgba(0, 22, 40, .80), transparent 100%),
    radial-gradient(ellipse 42% 50% at 50% 48%, rgba(0, 22, 40, .80), transparent 80%),
    linear-gradient(180deg, rgba(0, 22, 40, .64) 0%, rgba(0, 22, 40, .44) 40%, rgba(0, 22, 40, .54) 70%, rgba(0, 22, 40, .88) 100%);
}
.hero-diag .lead, .hero-diag .keys, .hero-diag .vers-table, .hero-diag .kick { text-shadow: 0 1px 14px rgba(0, 22, 40, .9); }
.hero-diag h1 em { color: var(--blue); text-shadow: 0 0 22px rgba(0, 22, 40, .75); }
.hero-diag .kick { color: #c4e3ff; }
.hero-diag .lead { color: rgba(255, 255, 255, .88); }
.hero-diag .keys span { color: #fff; }
.hero-diag .vers-table span, .hero-diag .cue { color: rgba(255, 255, 255, .92); }
.hero-diag .book { background: rgba(0, 22, 40, .62); }
@media (min-width: 981px) { .hero-diag > .inner { padding-bottom: 112px; gap: 18px; } }
@media (max-width: 600px) {
  .hero-diag .d-padel { width: 75%; clip-path: polygon(0 0, 100% 0, 33.3% 100%, 0 100%); }
  .hero-diag .d-resto { left: 25%; width: 75%; clip-path: polygon(66.7% 0, 100% 0, 100% 100%, 0 100%); }
  .hero-diag .d-trait { display: none; }
  .hero-diag::after {
    background:
      radial-gradient(ellipse 50% 26% at 50% 31%, rgba(0, 22, 40, .80), transparent 100%),
      linear-gradient(180deg, rgba(0, 22, 40, .74) 0%, rgba(0, 22, 40, .62) 40%, rgba(0, 22, 40, .66) 70%, rgba(0, 22, 40, .92) 100%);
  }
}

/* Chiffres cles : trois colonnes egales et libelles sur deux lignes, pour que
   le chiffre du milieu tombe exactement sur l'axe du titre. */
.hero-diag .keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(10px, 3vw, 40px); width: min(720px, 100%); margin-inline: auto; }
.hero-diag .keys div { justify-items: center; align-content: start; }
@media (max-width: 600px) {
  .hero-diag .keys { gap: 0 6px; margin-bottom: 6px; }
  .hero-diag .keys span { font-size: .58rem; letter-spacing: .07em; }
}

/* La ligne centree sous les creneaux. */
.vers-table { display: grid; justify-items: center; gap: 4px; margin-top: 2px; }
.vers-table .arrow-link { font-size: .84rem; }
.vers-table span { font-size: .84rem; color: var(--fg-3); }
@media (max-width: 600px) { .vers-table .arrow-link { font-size: .72rem; letter-spacing: .06em; gap: 7px; } }

/* Une meme ligne de passage vers la table, dans chaque section ou elle a un role. */
.lien-table { display: flex; align-items: flex-start; gap: 12px; margin-top: var(--s-3); max-width: 72ch; color: var(--fg-2); font-size: .95rem; line-height: 1.55; }
.lien-table .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--blue); }
.lien-table a { color: var(--fg); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }

/* Horaires de l'accueil sur deux colonnes : pistes et restaurant. */
.hours-2 .hours-row { display: grid; grid-template-columns: 6.5em 7.5em 1fr; gap: 12px; }
.hours-2 .hours-tete { padding-block: 4px 8px; }
.hours-2 .hours-tete span { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.hours-2 .h-resto { text-align: left; }
@media (max-width: 520px) {
  .hours-2 .hours-row { grid-template-columns: 5.6em 1fr; row-gap: 2px; }
  .hours-2 .h-resto { grid-column: 2; font-size: .78rem; color: var(--fg-3); }
  .hours-2 .hours-tete { display: none; }
  .hours-2 .h-resto::before { content: "Resto "; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
}

/* Ancre #contact de l'accueil (lien « Contact » de Matchpoint) : la cible est
   un bloc, pas une section, donc sans marge haute. Sans ce decalage, l'en-tete
   fixe recouvrait l'adresse. */
#contact { scroll-margin-top: calc(var(--header-h) + 28px); }