/* ==========================================================================
   PRO PICKLEBALL — Joliette
   Feuille de style principale
   --------------------------------------------------------------------------
   Couleur d'accent : champagne bronze UNI (#C69240), tirée directement du
   dégradé du logo. Aucun dégradé, aucun effet métallique dans les textes,
   les chiffres ou les boutons du site.

   Le logo, lui, garde son fichier d'origine et son dégradé : il est affiché
   tel quel, sans aucun filtre ni retouche CSS.

   Tous les réglages courants sont dans le bloc 1.
   ========================================================================== */

/* ==========================================================================
   1. RÉGLAGES
   ========================================================================== */
:root {

  /* ---- CHAMPAGNE BRONZE ----
     #C69240 est le ton « bronze » du dégradé du logo. C'est la seule couleur
     d'accent du site, appliquée en aplat. */
  --bronze:        #C69240;
  --bronze-sombre: #B8853A;   /* Survol des boutons : plus profond, jamais plus jaune */
  --bronze-fonce:  #7A571F;   /* Même teinte, assombrie pour être lisible sur fond clair */

  /* ---- NOIR ET GRIS FONCÉ ---- */
  --noir:      #000000;
  --gris:      #141516;   /* Surfaces légèrement décollées du noir */
  --gris-2:    #1E2022;   /* Cartes et encadrés */

  /* ---- BLANC ET GRIS CLAIR ---- */
  --blanc:     #FFFFFF;
  --clair:     #F4F4F3;   /* Fond des sections claires */
  --clair-2:   #E9E9E7;
  --clair-3:   #DCDCD9;

  /* ---- TEXTES SUR FOND SOMBRE ---- */
  --sur-noir:       #F0F0EE;
  --sur-noir-doux:  #A2A29E;
  --sur-noir-pale:  #6C6C68;

  /* ---- TEXTES SUR FOND CLAIR ---- */
  --sur-clair:      #131313;
  --sur-clair-doux: #52524E;
  --sur-clair-pale: #7E7E79;

  /* ---- FILETS ---- */
  --filet-sombre: rgba(240, 240, 238, .13);
  --filet-bronze: rgba(198, 146, 64, .32);
  --filet-clair:  rgba(19, 19, 19, .13);

  /* ---- POLICES ---- */
  --titre: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texte: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- TAILLES ----
     Les titres s'adaptent seuls. La borne minimale est calculée pour
     qu'aucun titre ne se coupe à 360 px. */
  --t-hero:  clamp(2.05rem, 8.5vw, 6.5rem);
  --t-1:     clamp(1.85rem, 5vw, 4rem);
  --t-2:     clamp(1.4rem, 2.6vw, 2.2rem);
  --t-3:     clamp(1.15rem, 1.7vw, 1.45rem);
  --t-corps: clamp(1.02rem, 1.15vw, 1.15rem);
  --t-etiq:  .74rem;

  /* ---- ESPACEMENTS ---- */
  --large:   1240px;
  --marge:   clamp(20px, 5vw, 64px);
  --respire: clamp(80px, 9.5vw, 156px);   /* Air entre les sections */
  --nav-h:   80px;

  --arrondi: 2px;
  --doux:    .4s cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--sur-noir);
  font-family: var(--texte);
  font-size: var(--t-corps);
  line-height: 1.65;
  overflow-x: hidden;              /* Aucun débordement horizontal, jamais */
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 800;
  font-stretch: 112%;              /* Archivo est variable : titres légèrement élargis */
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

::selection { background: var(--bronze); color: var(--noir); }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

/* ==========================================================================
   3. STRUCTURE COMMUNE
   ========================================================================== */
.bloc {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section {
  padding-block: var(--respire);
  position: relative;
}

/* Sections claires */
.section--claire {
  background: var(--clair);
  color: var(--sur-clair);
}
.section--claire h1, .section--claire h2,
.section--claire h3, .section--claire h4 { color: var(--sur-clair); }

/* Texture signature : les perforations d'une balle de pickleball.
   Elle vient du logo et sert de fil conducteur discret. */
.perfore::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(198, 146, 64, .15) 1.6px, transparent 1.8px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 88% 8%, #000 0%, transparent 68%);
          mask-image: radial-gradient(ellipse 70% 80% at 88% 8%, #000 0%, transparent 68%);
}
.section--claire.perfore::before {
  background-image: radial-gradient(circle, rgba(19, 19, 19, .11) 1.6px, transparent 1.8px);
}

/* Étiquette de section */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-etiq);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 22px;
}
/* Petite ligne décorative, en bronze uni */
.etiquette::before {
  content: "";
  width: 30px; height: 2px;
  background: var(--bronze);
  flex-shrink: 0;
}
.section--claire .etiquette { color: var(--bronze-fonce); }
.section--claire .etiquette::before { background: var(--bronze-fonce); }

.titre-section { font-size: var(--t-1); margin-bottom: 26px; max-width: 18ch; }

.chapeau {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--sur-noir-doux);
  max-width: 60ch;
}
.section--claire .chapeau { color: var(--sur-clair-doux); }

/* Mot mis en valeur : couleur pleine, sans dégradé ni effet métallique */
.accent { color: var(--bronze); }
.section--claire .accent { color: var(--bronze-fonce); }

/* ==========================================================================
   4. BOUTONS
   Taille pensée pour le doigt : au moins 54 px de haut.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 16px 30px;
  border: 1.5px solid transparent;
  border-radius: var(--arrondi);
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 105%;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  transition: var(--doux);
}

/* Bouton principal : aplat de champagne bronze */
.btn--bronze {
  background: var(--bronze);
  color: var(--noir);
}
.btn--bronze:hover {
  background: var(--bronze-sombre);
  transform: translateY(-2px);
}

.btn--contour {
  background: transparent;
  color: var(--sur-noir);
  border-color: rgba(240, 240, 238, .3);
}
.btn--contour:hover { border-color: var(--bronze); color: var(--bronze); }

.section--claire .btn--contour {
  color: var(--sur-clair);
  border-color: rgba(19, 19, 19, .26);
}
.section--claire .btn--contour:hover {
  border-color: var(--bronze-fonce);
  color: var(--bronze-fonce);
}

.btn--petit { min-height: 44px; padding: 11px 22px; font-size: .88rem; }

/* ==========================================================================
   5. BANDEAU + NAVIGATION
   ========================================================================== */
/* Bandeau d'état : noir et sobre. Le bronze n'y sert que de point de repère. */
.bandeau {
  background: var(--noir);
  color: var(--sur-noir-doux);
  text-align: center;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 11px var(--marge);
  border-bottom: 1px solid var(--filet-sombre);
}
/* Le point ne vise que sa propre classe : le bandeau contient d'autres
   spans (l'adresse, le séparateur de l'horaire) qui ne sont pas des points. */
.bandeau__point {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bronze);
  margin-right: 10px;
  vertical-align: middle;
}

/* Le mot sur la construction à gauche, l'horaire à droite. */
.bandeau__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px clamp(16px, 3vw, 40px);
  max-width: 1900px;
  margin-inline: auto;
}

.bandeau__mot { margin: 0; }

.bandeau__heures {
  margin: 0;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bronze);
}
.bandeau__sep { margin-inline: 3px; }

/* En-tête entièrement noir. Une seule ligne fine en bronze au bas,
   qui apparaît au défilement : c'est le seul accent de couleur. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--noir);
  border-bottom: 1px solid var(--filet-sombre);
  transition: border-color var(--doux);
}
.nav.collee { border-bottom-color: var(--filet-bronze); }

/* L'en-tête respire plus large que le contenu des sections : c'est ce qui
   permet au logo d'être grand ET aux sept liens de tenir sur une ligne. */
.nav__interieur {
  height: var(--nav-h);
  max-width: 1600px;
  padding-inline: clamp(20px, 2.2vw, 32px);   /* Marge propre au menu, plus serrée que celle des sections */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 1.5vw, 24px);
}

/* LOGO — le fichier original, affiché tel quel.
   Hauteur fixe, largeur automatique et object-fit: contain : jamais étiré,
   jamais compressé, jamais rogné. Aucun filtre, aucun fond, aucune bordure. */
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;              /* La barre ne comprime jamais le logo */
}
.nav__logo img {
  height: 42px;
  width: auto;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
  background: none;
  border: 0;
  filter: none;
}

/* Le bloc de navigation occupe l'espace entre le logo et le bouton,
   et garde les liens centrés dedans. */
.nav__menu {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.nav__liens {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* « Devenir membre » existe à deux endroits : dans la barre de droite sur
   ordinateur, et dans le menu déroulant sur téléphone. Un seul des deux
   s'affiche à la fois — jamais les deux. */
.nav__liens .btn--entete { display: none; }
.nav__liens li.nav__membre { display: none; border-bottom: 0; }
.nav__liens a {
  display: block;
  white-space: nowrap;         /* Aucun nom de menu ne revient à la ligne */
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sur-noir-doux);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color var(--doux), border-color var(--doux);
}
.nav__liens a:hover {
  color: var(--sur-noir);
  border-bottom-color: var(--bronze);   /* Fine ligne bronze au survol */
}

.nav__droite {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

/* Bouton de l'en-tête : noir, fine bordure bronze */
.btn--entete {
  min-height: 42px;
  padding: 10px 16px;
  background: transparent;
  color: var(--bronze);
  border: 1px solid var(--bronze);
  border-radius: var(--arrondi);
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 105%;
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--doux);
}
.btn--entete:hover {
  background: rgba(198, 146, 64, .12);
  color: var(--bronze);
}

/* « Réserver » est l'action principale : bronze plein, texte noir.
   « Devenir membre » garde le contour, plus discret, juste à côté. */
.btn--entete-plein {
  background: var(--bronze);
  color: var(--noir);
  border-color: var(--bronze);
}
.btn--entete-plein:hover {
  background: var(--bronze-sombre);
  border-color: var(--bronze-sombre);
  color: var(--noir);
}

/* Bouton « Réserver » compact, réservé au téléphone.
   Masqué par défaut : la version ordinateur ne change pas.
   Il s'affiche dans la règle « max-width: 768px » du bloc 17. */
.btn--reserver-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 14px;
  background: var(--bronze);
  color: var(--noir);
  border-radius: var(--arrondi);
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 105%;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--doux);
}
.btn--reserver-mobile:active { background: var(--bronze-sombre); }

.burger {
  display: none;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid var(--filet-sombre);
  border-radius: var(--arrondi);
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute;
  left: 13px;
  width: 20px; height: 2px;
  background: var(--blanc);
  transition: var(--doux);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ==========================================================================
   6. ACCUEIL
   ========================================================================== */
.accueil {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 9vh, 110px) clamp(44px, 6vh, 76px);
  background:
    radial-gradient(120% 85% at 82% 12%, rgba(198, 146, 64, .16) 0%, transparent 62%),
    var(--noir);
}

.accueil__contenu { position: relative; z-index: 2; }

/* Pastille d'état du projet */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--filet-bronze);
  border-radius: 100px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 30px;
}
.pastille__point {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bronze);
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

.accueil h1 {
  font-size: var(--t-hero);
  letter-spacing: -.035em;
  margin-bottom: 28px;
}
/* Chaque membre de phrase sur sa propre ligne : le titre ne se coupe jamais
   à un endroit imprévu, quelle que soit la largeur de l'écran. */
.accueil h1 span { display: block; }

.accueil__texte {
  color: var(--sur-noir-doux);
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 34px;
}

.accueil__faits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-bottom: 38px;
  font-size: .92rem;
  color: var(--sur-noir-doux);
}
.accueil__faits span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.accueil__faits span::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--bronze);
  border-radius: 50%;
  flex-shrink: 0;
}

.accueil__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Bande de chiffres — bronze uni, aucun dégradé */
.chiffres {
  position: relative;
  z-index: 2;
  margin-top: clamp(52px, 7vh, 88px);
  padding-top: 32px;
  border-top: 1px solid var(--filet-bronze);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 20px;
}
.chiffre__valeur {
  font-family: var(--titre);
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;             /* « 100 % » et « 7 h – 22 h » restent sur une ligne */
  color: var(--bronze);
}
.chiffre__nom {
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sur-noir-pale);
  margin-top: 10px;
  line-height: 1.45;
}

/* ==========================================================================
   7. LE CENTRE  (image de façade + texte)
   ========================================================================== */
.centre__duo {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* L'image de façade porte sa mention de façon visible et permanente */
.facade { margin: 0; position: relative; }

.facade__cadre {
  position: relative;
  border: 1px solid var(--filet-clair);
  overflow: hidden;
  background: var(--clair-2);
}
.facade__cadre img { width: 100%; height: auto; }

.facade__mention {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--noir);
  color: var(--bronze);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 14px;
  max-width: calc(100% - 16px);
  line-height: 1.35;
}
.facade__mention::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--bronze);
  border-radius: 50%;
  flex-shrink: 0;
}

.facade figcaption {
  margin-top: 14px;
  font-size: .88rem;
  color: var(--sur-clair-pale);
  font-style: italic;
}

.centre__texte h2 { font-size: var(--t-1); margin-bottom: 24px; }
.centre__texte p { color: var(--sur-clair-doux); }

.centre__liste {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--filet-clair);
}
.centre__liste li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet-clair);
  font-size: .98rem;
  color: var(--sur-clair-doux);
}
.centre__liste strong {
  font-family: var(--titre);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bronze-fonce);
  min-width: 96px;
  flex-shrink: 0;
}

/* ==========================================================================
   8. L'OUVERTURE  (progression en trois étapes)
   ========================================================================== */
.progression {
  margin-top: clamp(46px, 6vw, 76px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
  position: relative;
}

.jalon {
  position: relative;
  padding-top: 40px;
  border-top: 2px solid var(--filet-sombre);
}
/* Le point de repère sur la ligne du temps */
.jalon::before {
  content: "";
  position: absolute;
  top: -9px; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--noir);
  border: 2px solid var(--sur-noir-pale);
}
/* L'étape en cours est marquée en bronze et pleine */
.jalon--actuel { border-top-color: var(--bronze); }
.jalon--actuel::before {
  background: var(--bronze);
  border-color: var(--bronze);
  box-shadow: 0 0 0 6px rgba(198, 146, 64, .18);
}

.jalon__quand {
  font-family: var(--titre);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sur-noir-pale);
  margin-bottom: 14px;
}
.jalon--actuel .jalon__quand { color: var(--bronze); }

.jalon h3 { font-size: var(--t-2); margin-bottom: 12px; }
.jalon p { color: var(--sur-noir-doux); font-size: .97rem; }

/* ==========================================================================
   9. LES FAÇONS DE JOUER
   ========================================================================== */
.jouer {
  margin-top: clamp(46px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--filet-sombre);
  border: 1px solid var(--filet-sombre);
}

.facon {
  background: var(--noir);
  padding: clamp(28px, 3.2vw, 44px);
  position: relative;
  transition: background var(--doux);
}
.facon:hover { background: var(--gris); }
.facon::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--bronze);
  transition: width var(--doux);
}
.facon:hover::after { width: 100%; }

/* Icônes en bronze uni */
.facon__icone {
  width: 40px; height: 40px;
  margin-bottom: 22px;
  color: var(--bronze);
}
.facon__icone svg {
  width: 100%; height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.facon h3 { font-size: var(--t-3); margin-bottom: 12px; line-height: 1.15; }
.facon p { color: var(--sur-noir-doux); font-size: .96rem; }

/* ==========================================================================
   10. POUR TOUS LES NIVEAUX
   ========================================================================== */
.niveaux {
  margin-top: clamp(46px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

.niveau {
  background: var(--clair-2);
  border: 1px solid var(--filet-clair);
  border-radius: var(--arrondi);
  padding: clamp(24px, 2.6vw, 34px);
  transition: var(--doux);
}
.niveau:hover { border-color: var(--bronze-fonce); transform: translateY(-3px); }

.niveau__pour {
  font-family: var(--titre);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze-fonce);
  margin-bottom: 14px;
}
.niveau h3 { font-size: var(--t-3); margin-bottom: 10px; line-height: 1.15; }
.niveau p { color: var(--sur-clair-doux); font-size: .94rem; }

/* ==========================================================================
   11. WINGFIELD
   ========================================================================== */
.wingfield { position: relative; overflow: hidden; }

.wingfield__entete {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(30px, 5vw, 66px);
  align-items: end;
}

/* Encadré de la configuration prévue */
.config {
  border: 1px solid var(--filet-bronze);
  border-radius: var(--arrondi);
  background: var(--gris);
  padding: 28px;
}
.config__titre {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sur-noir-pale);
  margin-bottom: 20px;
}
.config dl { margin: 0; display: grid; gap: 15px; }
.config div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--filet-sombre);
}
.config div:last-child { border-bottom: 0; padding-bottom: 0; }
.config dt { font-size: .88rem; color: var(--sur-noir-doux); }
.config dd {
  margin: 0;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
  color: var(--bronze);
  text-align: right;
  white-space: nowrap;
}

/* Les six étapes du parcours joueur */
.parcours {
  margin-top: clamp(46px, 6vw, 76px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--filet-sombre);
  border: 1px solid var(--filet-sombre);
}

.pas {
  background: var(--noir);
  padding: clamp(26px, 3vw, 38px);
}
/* Numéro en bronze uni, en contour : pas de remplissage métallique */
.pas__num {
  display: block;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--bronze);
  margin-bottom: 20px;
}
.pas h3 { font-size: var(--t-3); margin-bottom: 10px; line-height: 1.15; }
.pas p { color: var(--sur-noir-doux); font-size: .95rem; }

.avis {
  margin-top: 40px;
  padding: 22px 26px;
  border-left: 2px solid var(--bronze);
  background: var(--gris);
  color: var(--sur-noir-doux);
  font-size: .95rem;
  max-width: 78ch;
}
.avis strong { color: var(--sur-noir); font-weight: 600; }

/* ==========================================================================
   12. APRÈS LE MATCH
   ========================================================================== */
.apres__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.apres h2 { font-size: var(--t-1); margin-bottom: 24px; }
.apres p { color: var(--sur-noir-doux); }

.apres__services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--filet-sombre);
  border: 1px solid var(--filet-sombre);
}
.service {
  background: var(--gris);
  padding: clamp(24px, 2.6vw, 34px);
}
.service h3 {
  font-size: 1.02rem;
  letter-spacing: .02em;
  margin-bottom: 8px;
  color: var(--bronze);
}
.service p { color: var(--sur-noir-doux); font-size: .92rem; }

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.faq {
  margin-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--filet-clair);
}
.faq__item { border-bottom: 1px solid var(--filet-clair); }

.faq__q {
  width: 100%;
  background: none;
  border: 0;
  padding: 26px 52px 26px 0;
  text-align: left;
  color: var(--sur-clair);
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 105%;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  position: relative;
  transition: color var(--doux);
  min-height: 60px;
}
.faq__q:hover { color: var(--bronze-fonce); }
.faq__q::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 14px; height: 2px;
  background: var(--bronze-fonce);
  transform: translateY(-50%);
}
.faq__q::before {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 2px; height: 14px;
  background: var(--bronze-fonce);
  transform: translateY(-50%);
  transition: transform var(--doux), opacity var(--doux);
}
.faq__q[aria-expanded="true"]::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }

.faq__r { overflow: hidden; max-height: 0; transition: max-height .45s ease; }
.faq__r p {
  color: var(--sur-clair-doux);
  padding-bottom: 28px;
  max-width: 74ch;
  font-size: .99rem;
}

/* ==========================================================================
   14. APPEL À L'ACTION FINAL
   ========================================================================== */
.final {
  text-align: center;
  padding-block: clamp(84px, 11vw, 160px);
  background: var(--gris);
  border-block: 1px solid var(--filet-bronze);
}
.final h2 { font-size: var(--t-1); margin-bottom: 22px; }
.final p {
  color: var(--sur-noir-doux);
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: 36px;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
}
.final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.final__courriel {
  margin-top: 28px;
  font-size: .92rem;
  color: var(--sur-noir-pale);
}
.final__courriel a {
  color: var(--bronze);
  border-bottom: 1px solid var(--filet-bronze);
  padding-bottom: 1px;
  transition: var(--doux);
}
.final__courriel a:hover { border-bottom-color: var(--bronze); }

/* ==========================================================================
   15. PIED DE PAGE
   ========================================================================== */
.pied { padding-block: clamp(56px, 7vw, 88px) 32px; }

.pied__haut {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: clamp(30px, 4vw, 56px);
}

/* LOGO — mêmes règles que dans la navigation : tel quel, jamais étiré,
   sans filtre, sans fond, sans bordure. Version empilée, donc plus haute. */
.pied__logo img {
  height: 86px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 4px;
  background: none;
  border: 0;
  filter: none;
}

.pied h4 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 20px;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pied li, .pied address {
  color: var(--sur-noir-doux);
  font-size: .93rem;
  font-style: normal;
}
.pied a { transition: color var(--doux); }
.pied a:hover { color: var(--bronze); }
.pied__attente { color: var(--sur-noir-pale); }

.pied__reseaux { display: flex; gap: 12px; margin-top: 24px; }
.pied__reseaux a {
  width: 44px; height: 44px;
  border: 1px solid var(--filet-sombre);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--sur-noir-doux);
  transition: var(--doux);
}
.pied__reseaux a:hover { border-color: var(--bronze); color: var(--bronze); }
.pied__reseaux svg { width: 18px; height: 18px; fill: currentColor; }

.pied__bas {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--filet-sombre);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  color: var(--sur-noir-pale);
  font-size: .82rem;
}

/* ==========================================================================
   16. ANIMATIONS  (discrètes : une seule montée, pas de rebond)
   ========================================================================== */
.monte {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22, .61, .36, 1);
}
.monte.vu { opacity: 1; transform: none; }

/* ==========================================================================
   17. ADAPTATION AUX ÉCRANS
   ========================================================================== */

/* --- Portables et tablettes --- */
@media (max-width: 1024px) {
  .centre__duo,
  .apres__duo,
  .wingfield__entete { grid-template-columns: 1fr; }
  .wingfield__entete { align-items: start; }

  .jouer,
  .parcours { grid-template-columns: repeat(2, 1fr); }
  .niveaux  { grid-template-columns: repeat(2, 1fr); }
  .progression { grid-template-columns: 1fr; gap: 34px; }

  .pied__haut { grid-template-columns: 1fr 1fr; }
}

/* --- MENU DÉROULANT ---
   Le basculement se fait à 1300 px, et non à 768 px. La barre complète
   (logo + les six liens + les deux boutons + marges) demande 1292 px : en dessous,
   les liens ne tiennent plus sur une seule ligne sans rapetisser le texte.
   Un menu déroulant vaut mieux qu'un texte illisible.

   Si tu ajoutes ou retires un lien de menu, refais le calcul : additionne la
   largeur du logo, celle des liens et celle des boutons, puis place ce seuil
   juste au-dessus. */
@media (max-width: 1700px) {
  .burger { display: block; }
  .nav__menu { flex: 0; }   /* Le menu sort du flux : il ne pousse plus rien */

  .nav__liens {
    /* Ancré sous la barre elle-même, et non à une distance fixe du haut
       de l'écran : en haut de page, la barre est sous le bandeau, et un
       menu « fixed » venait recouvrir le logo et le bouton Réserver. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--noir);
    border-bottom: 0;          /* Menu fermé : aucune bordure.
                                  Sinon, sa hauteur nulle laisse quand même
                                  paraître un filet en travers de la page. */
    padding: 0 var(--marge);
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s ease, padding .45s ease;
  }
  .nav__liens.ouvert {
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--filet-bronze);
  }
  .nav__liens li { border-bottom: 1px solid var(--filet-sombre); }
  .nav__liens li:last-child { border-bottom: 0; }
  .nav__liens a {
    display: block;
    padding: 18px 0;
    font-size: .95rem;
    border-bottom: 0;
  }
  /* « Devenir membre » descend dans le menu déroulant : l'en-tête du
     téléphone ne garde que LOGO | RÉSERVER | menu.

     Dans le menu, il est en bronze plein comme « Réserver ». En contour,
     il se perdait sur le fond noir du menu ouvert. Même arrondi, même
     graisse et mêmes majuscules que les autres boutons du site. */
  .nav__liens li.nav__membre { display: block; }
  .nav__liens .btn--entete {
    display: flex;
    width: 100%;
    margin-block: 30px 10px;     /* + les 24 px de marge basse du menu ouvert */
    min-height: 58px;
    font-size: .9rem;
    letter-spacing: .06em;
    background: var(--bronze);
    color: var(--noir);
    border-color: var(--bronze);
  }
  .nav__liens .btn--entete:hover,
  .nav__liens .btn--entete:active {
    background: var(--bronze-sombre);
    border-color: var(--bronze-sombre);
    color: var(--noir);
  }
  .nav__droite .btn--entete { display: none; }
}

/* --- Téléphones --- */
@media (max-width: 768px) {
  :root {
    --nav-h: 66px;
    --respire: clamp(56px, 12vw, 84px);
  }

  .nav__logo img { height: 36px; }

  /* Disposition du haut sur téléphone : LOGO | RÉSERVER | ☰
     Les trois restent sur une seule ligne, alignés verticalement. */
  .btn--reserver-mobile { display: inline-flex; }
  .nav__interieur { gap: 12px; padding-inline: 16px; }
  .nav__droite { gap: 10px; }
  .burger { width: 42px; height: 42px; }
  .burger span { left: 11px; }
  .burger span:nth-child(1) { top: 15px; }
  .burger span:nth-child(2) { top: 20px; }
  .burger span:nth-child(3) { top: 25px; }
  .burger[aria-expanded="true"] span:nth-child(1),
  .burger[aria-expanded="true"] span:nth-child(3) { top: 20px; }

  .accueil { padding-block: 48px 44px; }
  .accueil h1 { letter-spacing: -.03em; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }

  /* Boutons pleine largeur : plus faciles à viser au doigt */
  .accueil__actions .btn,
  .final__actions .btn { flex: 1 1 100%; }

  .jouer,
  .parcours,
  .niveaux,
  .apres__services { grid-template-columns: 1fr; }

  /* Sur téléphone, l'image de façade est basse : une mention posée par-dessus
     en masquerait le tiers. On la place donc juste au-dessus de l'image, où
     elle reste tout aussi visible sans rien cacher. */
  .facade__mention {
    position: static;
    max-width: none;
    font-size: .68rem;
    padding: 11px 14px;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--filet-bronze);
  }

  .centre__liste li { flex-direction: column; gap: 4px; }
  .centre__liste strong { min-width: 0; }

  /* Les valeurs de la fiche Wingfield (« 2 caméras / terrain ») sont trop
     longues pour tenir à côté de leur intitulé sur un téléphone : on les
     empile plutôt que de les serrer. */
  .config div { flex-direction: column; align-items: flex-start; gap: 5px; }
  .config dd { text-align: left; }

  .pied__haut { grid-template-columns: 1fr; }
  .pied__bas { flex-direction: column; }
}

/* --- Très petits téléphones (360 px) --- */
@media (max-width: 380px) {
  :root { --marge: 18px; }
  .chiffre__valeur { font-size: 1.6rem; }
  .accueil__faits { gap: 8px 18px; font-size: .87rem; }

  /* Sur 360 px, LOGO | RÉSERVER | ☰ ne tiennent qu'en resserrant le bouton.
     On réduit le bouton plutôt que le logo, qui garde sa taille. */
  .btn--reserver-mobile { padding: 0 10px; font-size: .68rem; letter-spacing: .03em; }
  .nav__interieur { gap: 10px; }
  .nav__droite { gap: 8px; }
}

/* --- Réglage « réduire les animations » du téléphone --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .monte { opacity: 1; transform: none; transition: none; }
  .pastille__point { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   18. SECTIONS DE LA LANDING PAGE COURTE
   Ajouts uniquement : aucune règle existante n'est modifiée.
   ========================================================================== */

/* ---- Le centre en chiffres (sur fond clair) ---- */
.section--claire .chiffres {
  border-top-color: var(--filet-clair);
  grid-template-columns: repeat(5, 1fr);
  margin-top: clamp(36px, 4vw, 52px);
}
.section--claire .chiffre__valeur { color: var(--bronze-fonce); }
.section--claire .chiffre__nom    { color: var(--sur-clair-pale); }

/* ---- Horaires & tarifs ---- */
.tarifs {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--filet-sombre);
  border: 1px solid var(--filet-sombre);
}
.tarif {
  background: var(--noir);
  padding: clamp(26px, 3vw, 38px);
  transition: background var(--doux);
}
.tarif:hover { background: var(--gris); }

.tarif__nom {
  font-size: var(--t-etiq);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sur-noir-pale);
  margin-bottom: 16px;
}
.tarif__valeur {
  font-family: var(--titre);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 800;
  font-stretch: 106%;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--bronze);
  margin-bottom: 8px;
}
.tarif__note { color: var(--sur-noir-doux); font-size: .93rem; }

.tarifs__actions {
  margin-top: clamp(32px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---- Pourquoi Pro Pickleball ---- */
.avantages {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.avantage {
  background: var(--clair-2);
  border: 1px solid var(--filet-clair);
  border-radius: var(--arrondi);
  padding: clamp(24px, 2.6vw, 32px);
  transition: var(--doux);
}
.avantage:hover { border-color: var(--bronze-fonce); transform: translateY(-3px); }
.avantage__icone { width: 34px; height: 34px; margin-bottom: 18px; color: var(--bronze-fonce); }
.avantage__icone svg {
  width: 100%; height: 100%;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.avantage h3 { font-size: var(--t-3); margin-bottom: 10px; line-height: 1.15; }
.avantage p { color: var(--sur-clair-doux); font-size: .94rem; }

/* ---- Photos du centre ---- */
.photos {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(14px, 1.6vw, 20px);
  align-items: stretch;
}
.photo {
  position: relative;
  border: 1px solid var(--filet-sombre);
  overflow: hidden;
  background: var(--gris);
  min-height: 200px;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Emplacement en attente d'une vraie photo */
.photo--attente {
  display: grid;
  place-items: center;
  border-style: dashed;
}
.photo--attente span {
  font-size: var(--t-etiq);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sur-noir-pale);
  text-align: center;
  padding: 20px;
  line-height: 1.9;
}
.photo__mention {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--noir);
  color: var(--bronze);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 13px;
  max-width: calc(100% - 16px);
  line-height: 1.35;
}
.photo__mention::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--bronze);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- Adaptation aux écrans ---- */
@media (max-width: 1024px) {
  .section--claire .chiffres { grid-template-columns: repeat(3, 1fr); }
  .tarifs    { grid-template-columns: repeat(2, 1fr); }
  .avantages { grid-template-columns: repeat(2, 1fr); }
  .photos    { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .section--claire .chiffres { grid-template-columns: repeat(2, 1fr); }
  .tarifs    { grid-template-columns: 1fr; }
  .avantages { grid-template-columns: 1fr; }
  .photos    { grid-template-columns: 1fr; }
  .tarifs__actions .btn { flex: 1 1 100%; }

  /* Sur téléphone, la mention se place au-dessus de la photo plutôt que
     par-dessus, pour ne pas la masquer. */
  .photo__mention { position: static; max-width: none; }
}

/* ==========================================================================
   19. ENTRÉE — grande photo du bâtiment, pleine largeur
   Ajouts uniquement : aucune règle existante n'est modifiée.
   ========================================================================== */
.entree {
  position: relative;
  min-height: clamp(440px, 76vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--noir);
  padding-block: clamp(56px, 8vh, 96px);
}

/* La photo occupe toute la largeur de l'écran, sans marge latérale. */
.entree__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.entree__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

/* Voile : assombrit le bas pour que le texte reste lisible sur la brique
   claire, et fond vers le noir au bas de la section. */
.entree__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .58) 0%,
    rgba(0, 0, 0, .30) 30%,
    rgba(0, 0, 0, .74) 72%,
    rgba(0, 0, 0, .95) 100%);
}

.entree__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Mention obligatoire : le centre est encore en construction. */
.entree__mention {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--noir);
  color: var(--bronze);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 16px;
  max-width: calc(100% - 16px);
  line-height: 1.35;
}
.entree__mention::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--bronze);
  border-radius: 50%;
  flex-shrink: 0;
}

.entree h1 {
  font-size: clamp(2.15rem, 7.4vw, 6rem);
  letter-spacing: -.035em;
  margin-bottom: 26px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.entree h1 span { display: block; }

.entree__accroche {
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 104%;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  letter-spacing: -.01em;
  color: var(--sur-noir);
  margin-bottom: 14px;
}

.entree__texte {
  color: var(--sur-noir-doux);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.6;
  max-width: 58ch;
  margin-bottom: 22px;
}

.entree__adresse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  color: var(--sur-noir-doux);
}
.entree__adresse::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--bronze);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==========================================================================
   20. HORAIRES & TARIFS
   Trois blocs sobres. Aucun prix inventé.
   ========================================================================== */
.horaires {
  margin-top: clamp(40px, 5vw, 62px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--filet-sombre);
  border: 1px solid var(--filet-sombre);
}
.horaire {
  background: var(--noir);
  padding: clamp(28px, 3.2vw, 42px);
  transition: background var(--doux);
}
.horaire:hover { background: var(--gris); }

.horaire__nom {
  font-size: var(--t-etiq);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sur-noir-pale);
  margin-bottom: 18px;
}
.horaire__valeur {
  font-family: var(--titre);
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  font-weight: 800;
  font-stretch: 106%;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--bronze);
  margin-bottom: 8px;
  white-space: nowrap;
}
.horaire__note { color: var(--sur-noir-doux); font-size: .95rem; }

/* ---- Adaptation aux écrans ---- */
@media (max-width: 1024px) {
  .horaires { grid-template-columns: 1fr; }
}

/* --- ENTRÉE SUR TÉLÉPHONE ---
   La photo est très panoramique (2103 × 748, soit un rapport de 2,81).
   Sur un écran vertical, la garder en fond « cover » n'en montrerait qu'un
   quart : le bâtiment serait méconnaissable.

   On change donc de méthode ici, et ici seulement : la photo devient une
   bande en haut de la section, avec un rapport de 2,45. Le bâtiment est
   alors visible sur 87 % de sa largeur, sans aucune déformation. Le texte
   passe dessous, sur fond noir, donc parfaitement lisible.

   La version ordinateur n'est pas touchée. */
@media (max-width: 768px) {
  .entree {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(40px, 6vh, 60px);
  }

  .entree__photo {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 2103 / 860;   /* Un peu plus haut que la photo : léger recadrage
                                   vertical seulement, jamais horizontal */
  }
  .entree__photo img { object-position: center 52%; }

  /* Voile réduit : il ne sert plus qu'à fondre le bas de la photo vers le
     noir, puisque le texte n'est plus posé dessus. */
  .entree__voile {
    top: auto;
    height: 42%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .92) 100%);
  }

  .entree__contenu { padding-top: clamp(28px, 4.5vh, 40px); }

  .entree h1 {
    letter-spacing: -.03em;
    text-shadow: none;          /* Plus utile : le fond est noir uni */
  }

  .entree__mention { font-size: .62rem; padding: 8px 12px; letter-spacing: .07em; }
}

/* ==========================================================================
   21. RESPIRATION — plus d'air autour des titres et des grilles
   Ajouts uniquement : aucune règle existante n'est modifiée.
   ========================================================================== */

/* Le titre d'une section respire davantage avant son contenu. */
.titre-section { margin-bottom: 30px; }
.chapeau { max-width: 56ch; }

/* Les grilles décollent un peu plus du texte qui les précède. */
.jouer,
.niveaux,
.parcours,
.horaires,
.progression { margin-top: clamp(52px, 6.5vw, 84px); }

/* Cartes de niveau : sans leur liste, elles gagnent à être moins hautes
   et mieux centrées sur leur message. */
.niveau { padding: clamp(28px, 3vw, 40px); }
.niveau p { max-width: 34ch; }

/* Les étapes Wingfield et les façons de jouer tiennent en une phrase :
   on leur donne un peu plus de marge intérieure plutôt que du texte. */
.facon,
.pas { padding: clamp(30px, 3.4vw, 46px); }

/* L'encadré de remarques prend de la distance avec la grille du dessus. */
.avis { margin-top: clamp(48px, 5.5vw, 68px); }

/* Questions plus espacées : la liste se parcourt plus vite. */
.faq__q { padding-block: 30px; }

/* ==========================================================================
   22. SERVICES — rangée compacte de quatre éléments
   Remplace les anciennes grosses cartes : un titre, une phrase, rien d'autre.
   ========================================================================== */
.services {
  margin-top: clamp(44px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}

.service-item {
  padding-top: 22px;
  border-top: 2px solid var(--bronze);
}
.service-item h3 {
  font-size: var(--t-3);
  line-height: 1.15;
  margin-bottom: 10px;
}
.service-item p {
  color: var(--sur-noir-doux);
  font-size: .95rem;
  max-width: 30ch;
}

@media (max-width: 1024px) {
  .services { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
}

@media (max-width: 620px) {
  .services { grid-template-columns: 1fr; gap: 26px; }
  .service-item { padding-top: 18px; }
  .service-item p { max-width: none; }
}

/* ==========================================================================
   23. SITE MULTIPAGE (V5)
   Ajouts uniquement. Rien de ce qui précède n'est modifié.
   ========================================================================== */

/* ---- Lien de la page courante dans le menu ---- */
.nav__liens a[aria-current="page"] {
  color: var(--bronze);
  border-bottom-color: var(--bronze);
}

/* ==========================================================================
   EN-TÊTE DE PAGE INTÉRIEURE
   Bandeau sobre en haut de chaque page autre que l'accueil.
   ========================================================================== */
.entete-page {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 9vh, 120px) clamp(56px, 8vh, 96px);
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(198, 146, 64, .14) 0%, transparent 62%),
    var(--noir);
  border-bottom: 1px solid var(--filet-sombre);
}
.entete-page h1 {
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  letter-spacing: -.03em;
  margin-bottom: 22px;
  max-width: 20ch;
}
.entete-page .chapeau { max-width: 60ch; }

/* Fil d'Ariane : toujours un chemin de retour vers l'accueil. */
.fil {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-etiq);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sur-noir-pale);
  margin-bottom: 24px;
}
.fil a { color: var(--bronze); transition: color var(--doux); }
.fil a:hover { color: var(--bronze-sombre); }

/* ==========================================================================
   PORTES D'ENTRÉE — grands blocs visuels de l'accueil
   ========================================================================== */
.portes {
  margin-top: clamp(48px, 6vw, 76px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

.porte {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  border: 1px solid var(--filet-sombre);
  background: var(--gris);
  overflow: hidden;
  transition: var(--doux);
}
.porte:hover { border-color: var(--filet-bronze); }

/* Zone image : remplace le contenu par une balise img quand la photo existe. */
.porte__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(90% 80% at 70% 20%, rgba(198, 146, 64, .12) 0%, transparent 65%),
    var(--gris);
}
.porte__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.porte:hover .porte__image img { transform: scale(1.04); }

/* Texture perforée, reprise du logo, quand il n'y a pas encore de photo. */
.porte__image--attente::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(198, 146, 64, .16) 1.6px, transparent 1.8px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 75% 15%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse 80% 90% at 75% 15%, #000 0%, transparent 70%);
}

.porte__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .72) 62%, rgba(0, 0, 0, .93) 100%);
}

.porte__contenu {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: clamp(26px, 3vw, 38px);
}
.porte h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  margin-bottom: 12px;
}
.porte p {
  color: var(--sur-noir-doux);
  font-size: .96rem;
  max-width: 40ch;
  margin-bottom: 22px;
}

/* Le bouton « Découvrir » : discret, il s'anime au survol du bloc. */
.porte__lien {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 105%;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--filet-bronze);
  transition: var(--doux);
}
.porte__lien::after { content: "\2192"; transition: transform var(--doux); }
.porte:hover .porte__lien { border-bottom-color: var(--bronze); }
.porte:hover .porte__lien::after { transform: translateX(5px); }

/* Le bloc entier est cliquable, sans imbriquer un lien dans un lien. */
.porte__zone {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ==========================================================================
   EMPLACEMENTS PHOTO — à remplacer par de vraies photos
   ========================================================================== */
.photos-grille {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}
.photo-slot {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--filet-sombre);
  background: var(--gris);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot span {
  font-size: var(--t-etiq);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sur-noir-pale);
  text-align: center;
  padding: 18px;
  line-height: 1.9;
}
.section--claire .photo-slot {
  border-color: var(--filet-clair);
  background: var(--clair-2);
}
.section--claire .photo-slot span { color: var(--sur-clair-pale); }

/* ==========================================================================
   FICHES ENTRAÎNEURS
   ========================================================================== */
.entraineurs {
  margin-top: clamp(40px, 5vw, 62px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}
.entraineur {
  border: 1px solid var(--filet-sombre);
  background: var(--gris);
}
.entraineur__portrait {
  aspect-ratio: 3 / 4;
  border-bottom: 1px solid var(--filet-sombre);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.entraineur__portrait img { width: 100%; height: 100%; object-fit: cover; }
.entraineur__portrait span {
  font-size: var(--t-etiq);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sur-noir-pale);
  text-align: center;
  padding: 18px;
  line-height: 1.9;
}
.entraineur__infos { padding: clamp(20px, 2.2vw, 26px); }
.entraineur__nom { font-family: var(--titre); font-weight: 800; font-size: 1.15rem; margin-bottom: 6px; }
.entraineur__role {
  font-size: var(--t-etiq);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 12px;
}
.entraineur__mot { color: var(--sur-noir-doux); font-size: .93rem; }

/* ==========================================================================
   TABLEAU DE TARIFS — prêt à recevoir les prix
   ========================================================================== */
.grille-tarifs {
  margin-top: clamp(36px, 4.5vw, 56px);
  border-top: 1px solid var(--filet-sombre);
}
.ligne-tarif {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: baseline;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--filet-sombre);
}
.ligne-tarif__nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: var(--t-3);
  letter-spacing: -.01em;
}
.ligne-tarif__detail { color: var(--sur-noir-doux); font-size: .94rem; }
.ligne-tarif__prix {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--bronze);
  white-space: nowrap;
  text-align: right;
}

/* ==========================================================================
   ADAPTATION AUX ÉCRANS
   ========================================================================== */
@media (max-width: 1024px) {
  .entraineurs        { grid-template-columns: repeat(2, 1fr); }
  .photos-grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .portes        { grid-template-columns: 1fr; }
  .porte         { min-height: 300px; }
  .entraineurs        { grid-template-columns: 1fr; }
  .photos-grille { grid-template-columns: 1fr; }

  .ligne-tarif {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ligne-tarif__prix { text-align: left; }
}

/* ==========================================================================
   24. PAGE HORAIRES & TARIFS — les vrais montants
   Rien de neuf côté identité : mêmes polices, même bronze, même noir.
   Ce qui change, c'est la taille des chiffres : ils doivent se lire d'un
   coup d'œil, sans lecture.
   ========================================================================== */

/* ---- Les heures : deux énoncés, rien autour ---- */
.heures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(18px, 4vw, 56px);
  margin-top: 8px;
}
.heures__item {
  font-family: var(--titre);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
/* Le deuxième énoncé porte l'accent : c'est l'information qu'on cherche. */
.heures__item:last-child { color: var(--bronze); }

.heures__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: clamp(30px, 4vw, 44px);
}
.heures__note {
  font-size: .95rem;
  color: var(--sur-noir-doux);
}

/* ---- Tarif sans abonnement ---- */
.libre {
  margin-top: clamp(36px, 4.5vw, 56px);
  padding-top: clamp(30px, 3.5vw, 42px);
  border-top: 1px solid var(--filet-clair);
}
.libre__nom {
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 105%;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sur-clair-doux);
  margin: 0 0 clamp(20px, 2.5vw, 30px);
}

.libre__duo {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 90px);
}

/* Un prix : le montant en grand, l'unité et le moment en petit à côté. */
.prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}
.prix__montant {
  font-family: var(--titre);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(2.8rem, 8vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--bronze-fonce);
  font-variant-numeric: tabular-nums;
}
.prix__unite {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--sur-clair-doux);
}
.prix__quand {
  flex-basis: 100%;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sur-clair-pale);
}

.libre__par {
  margin: clamp(22px, 2.5vw, 30px) 0 0;
  font-size: .95rem;
  color: var(--sur-clair-doux);
}

/* Le supplément Wingfield : une ligne, pas une section. */
.supplement {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-top: clamp(26px, 3vw, 34px);
  padding: 18px 20px;
  background: var(--clair-2);
  border-left: 2px solid var(--bronze-fonce);
}
.supplement__nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
}
.supplement__valeur {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--bronze-fonce);
  font-variant-numeric: tabular-nums;
}
.supplement__detail {
  flex-basis: 100%;
  font-size: .9rem;
  color: var(--sur-clair-doux);
}

.libre__plages {
  margin: clamp(24px, 3vw, 32px) 0 0;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--sur-clair-pale);
}
.libre__plages strong { color: var(--sur-clair-doux); font-weight: 600; }

/* ---- Les deux abonnements ----
   Deux colonnes égales sur ordinateur, l'une sous l'autre sur téléphone.
   Les listes ont le même nombre de lignes, dans le même ordre : on compare
   en balayant du regard, sans tableau. */
.offres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(40px, 5vw, 60px);
  align-items: start;
}

.offre {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 42px);
  background: var(--gris);
  border: 1px solid var(--filet-sombre);
  border-radius: var(--arrondi);
}
/* PRO+ ressort par la bordure et le fond, sans badge ni effet. */
.offre--plus {
  background: var(--gris-2);
  border-color: var(--filet-bronze);
}

.offre__nom {
  font-family: var(--titre);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -.01em;
  margin: 0;
}
.offre--plus .offre__nom { color: var(--bronze); }

.offre__prix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(16px, 2vw, 22px) 0 0;
}
.offre__montant {
  font-family: var(--titre);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.offre__periode {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1rem;
  color: var(--sur-noir-doux);
}
.offre__mois {
  margin: 8px 0 0;
  font-size: .95rem;
  color: var(--sur-noir-doux);
}

.offre__liste {
  list-style: none;
  margin: clamp(26px, 3vw, 34px) 0 0;
  padding: 0;
  border-top: 1px solid var(--filet-sombre);
}
.offre__liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  min-height: 56px;              /* Les deux cartes gardent le même rythme */
  padding: 14px 0;
  border-bottom: 1px solid var(--filet-sombre);
}
.offre__liste li span {
  font-size: .92rem;
  color: var(--sur-noir-doux);
}
.offre__liste li strong {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.offre--plus .offre__liste li strong { color: var(--bronze); }

.offre__btn {
  margin-top: clamp(26px, 3vw, 34px);
  width: 100%;
}

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

@media (max-width: 768px) {
  .heures { gap: 6px 24px; }
  .heures__item { flex-basis: 100%; }

  .libre__duo { gap: 26px; }
  .prix { flex-basis: 100%; }

  /* Sur téléphone, on garde le nom à gauche et le montant à droite : la
     carte reste deux fois plus courte qu'en empilant les deux. Si une
     ligne ne rentre pas, flex-wrap la renvoie seule en dessous. */
  .offre__liste li {
    min-height: 0;
    padding: 13px 0;
    gap: 2px 12px;
  }
  .offre__liste li span   { font-size: .88rem; }
  .offre__liste li strong { font-size: 1rem; }
}

/* ==========================================================================
   25. INFOLETTRE — bande identique sur les six pages, juste avant le pied
   Volontairement plus courte que les sections « final » : le texte à
   gauche, le bouton à droite. Sur téléphone, tout s'empile et le bouton
   prend toute la largeur.
   ========================================================================== */
.infolettre {
  background: var(--gris);
  border-top: 1px solid var(--filet-bronze);
  padding-block: clamp(44px, 5vw, 68px);
}

.infolettre__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3.5vw, 48px);
}

.infolettre__texte { flex: 1 1 420px; }

.infolettre__texte p {
  margin: 0;
  color: var(--sur-noir-doux);
  max-width: 58ch;
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
}

.infolettre .etiquette { margin-bottom: 14px; }

.infolettre .btn { flex-shrink: 0; }

@media (max-width: 768px) {
  .infolettre__interieur { gap: 24px; }
  .infolettre .btn { width: 100%; }
}

/* ==========================================================================
   26. FINITION
   Passe de détail sur l'existant. Même identité, mêmes couleurs, mêmes
   polices : on règle le cadrage, la lisibilité et quelques petites
   choses qui trahissaient un site « généré ». Rien de doré, rien de
   flashy, rien qui bouge vite.
   ========================================================================== */

/* ---- Hero : le texte passe à droite, l'enseigne reste visible ----
   Sur la photo, l'enseigne Pro Pickleball est à gauche. Le texte à gauche
   la recouvrait. On le loge dans une colonne à droite, sur la partie calme
   de la façade, et on garde plus de ciel visible en haut. */
.entree {
  min-height: clamp(520px, 82vh, 800px);
  padding-block: clamp(64px, 9vh, 110px);
}
.entree__photo img { object-position: 38% 58%; }

/* Voile : léger en haut, dense sous le texte. Le côté droit est un peu
   plus sombre pour porter le texte, le côté gauche laisse voir l'enseigne. */
.entree__voile {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .34) 60%, rgba(0, 0, 0, .56) 100%),
    linear-gradient(180deg,
      rgba(0, 0, 0, .30) 0%,
      rgba(0, 0, 0, .16) 32%,
      rgba(0, 0, 0, .66) 70%,
      rgba(0, 0, 0, .96) 100%);
}

.entree__contenu { display: flex; justify-content: flex-end; }
.entree__cadre   { width: min(100%, 640px); }

.entree h1 {
  font-size: clamp(2.15rem, 6vw, 5rem);
  text-shadow: none;              /* Le voile suffit : plus d'ombre floue */
  margin-bottom: 22px;
}
.entree__texte { margin-bottom: 30px; }

.entree__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 30px;
}

/* La mention « centre en construction » : posée, pas collée dans le coin */
.entree__mention {
  top: 16px;
  left: 16px;
  background: rgba(0, 0, 0, .70);
  border: 1px solid var(--filet-bronze);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

/* ---- Barre de navigation : une ombre courte quand elle est collée ---- */
.nav.collee { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7); }

/* ---- Bandeau : la partie « adresse » est un vrai bout de texte.
   La règle « .bandeau span » du bloc 5 transforme tout span en point
   bronze : on l'annule ici pour celui-là. ---- */

/* ---- Boutons ---- */
.btn--bronze:active { transform: translateY(0); }
.btn--entete-plein:hover { transform: translateY(-1px); }

/* ---- Emplacements photo : un cadre net et la texture perforée du logo,
   plutôt que des pointillés de maquette ---- */
.photo-slot,
.entraineur__portrait {
  position: relative;
  border-style: solid;
}
.photo-slot::before,
.entraineur__portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(198, 146, 64, .18) 1.6px, transparent 1.8px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 80% 15%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 85% 90% at 80% 15%, #000 0%, transparent 72%);
}
.section--claire .photo-slot::before {
  background-image: radial-gradient(circle, rgba(19, 19, 19, .12) 1.6px, transparent 1.8px);
}
.photo-slot span,
.entraineur__portrait span { position: relative; }

/* ---- Rangée « services » sur fond clair : le texte était gris clair
   sur fond clair (2,3 pour 1), en dessous du seuil de lisibilité ---- */
.section--claire .service-item   { border-top-color: var(--bronze-fonce); }
.section--claire .service-item p { color: var(--sur-clair-doux); }

/* Cinq colonnes, pour la page Après-match */
.services--cinq { grid-template-columns: repeat(5, 1fr); }

/* ---- Après-match : une mosaïque plutôt que trois cases égales ----
   Une grande image et deux petites : c'est ce qui donne l'air d'un lieu,
   pas d'une grille. */
.mosaique {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  height: clamp(340px, 40vw, 560px);
}
.mosaique .photo-slot { aspect-ratio: auto; height: 100%; }
.mosaique .photo-slot:first-child { grid-row: 1 / -1; }

/* ---- Le centre en chiffres : sur téléphone, cinq cases sur deux colonnes
   laissaient une case orpheline. La dernière prend toute la largeur. ---- */
@media (max-width: 768px) {
  .chiffres > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ---- Adaptation ---- */
@media (max-width: 1024px) {
  .services--cinq { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  /* Hero : la photo redevient une bande, le texte revient à gauche dessous */
  .entree { min-height: 0; padding-block: 0 clamp(40px, 6vh, 60px); }
  .entree__photo img { object-position: center 52%; }
  .entree__voile {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .92) 100%);
  }
  .entree__contenu { justify-content: flex-start; }
  .entree__cadre   { width: 100%; }
  .entree__actions .btn { flex: 1 1 100%; }
  .entree__mention { top: 12px; left: 12px; }

  /* Le bandeau du haut répétait l'adresse, déjà dans le hero et le pied :
     sur téléphone il prenait trois lignes. Sans l'adresse, il en prend deux. */
  /* Sur téléphone, le bandeau tient sur deux lignes centrées : le mot
     d'abord, l'horaire dessous. L'adresse sort, elle est dans le pied. */
  .bandeau__detail { display: none; }
  .bandeau__interieur { justify-content: center; text-align: center; }
  .bandeau__mot,
  .bandeau__heures { flex-basis: 100%; }
  .bandeau__heures { font-size: .66rem; }

  .mosaique {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .mosaique .photo-slot { aspect-ratio: 16 / 10; height: auto; }
  .mosaique .photo-slot:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
}

@media (max-width: 620px) {
  .services--cinq { grid-template-columns: 1fr; }
}

/* ---- Page Horaires & tarifs : elle commence directement par les heures.
   Plus de grand en-tête noir ; le petit titre « Heures d'ouverture » sert
   de h1, et les deux énoncés tiennent sur une ligne, séparés d'un point. ---- */
.section--compacte { padding-block: clamp(44px, 6vw, 84px) clamp(56px, 7vw, 104px); }

h1.etiquette {
  font-family: var(--texte);
  font-stretch: 100%;
  line-height: 1.5;
  letter-spacing: .2em;
}

.heures { gap: clamp(14px, 2vw, 28px); }
.heures__sep {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.05;
  color: var(--sur-noir-pale);
}

/* ---- Cartes de niveau : elles sont claires, mais posées parfois sur une
   section noire. Leurs titres héritaient alors du blanc. On les fixe en
   foncé, et le texte gagne un peu de contraste. ---- */
.niveau h3 { color: var(--sur-clair); }
.niveau p  { color: var(--sur-clair); opacity: .84; }

@media (max-width: 768px) {
  .heures__sep { display: none; }
}

/* ---- Tarifs : sous « Jour » et « Soir & week-end », une ligne discrète
   précise les plages. Elle remplace l'ancien paragraphe d'explications. ---- */
.prix__detail {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: .9rem;
  color: var(--sur-clair-doux);
}

/* Les deux prix restent côte à côte. En disposition flexible, la ligne
   de précision élargissait chaque bloc au point de renvoyer le second
   prix à la ligne : deux colonnes égales règlent le cas. */
.libre__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

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

/* ==========================================================================
   27. FORFAITS — Visiteur, PRO, PRO+ et Fondateur
   Rien de neuf côté identité : mêmes polices, même bronze, même noir.
   Trois cartes de front sur ordinateur, empilées sur téléphone.
   ========================================================================== */

/* ---- Bloc Visiteur ---- */
.libre__abo {
  margin: -12px 0 clamp(20px, 2.5vw, 30px);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sur-clair-doux);
}

.libre__liste {
  margin-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--filet-clair);
}

.libre__phrase {
  margin: clamp(22px, 2.5vw, 30px) 0 0;
  font-size: .98rem;
  color: var(--sur-clair-doux);
  max-width: 60ch;
}

/* ---- Trois cartes de front ----
   Sous 1100 px elles passent à deux colonnes, puis à une seule : trois
   colonnes deviennent trop étroites pour des lignes « nom + montant ». */
.offres--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .offres--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .offres--trois { grid-template-columns: 1fr; }
}

/* ---- La carte Fondateur : un cran plus haut, sans tapage ----
   Une bordure bronze pleine et un halo très léger repris de l'en-tête
   des pages intérieures. Aucun dégradé dans le texte. */
.offre--fondateur {
  background:
    radial-gradient(120% 80% at 82% 0%, rgba(198, 146, 64, .11) 0%, transparent 62%),
    var(--gris-2);
  border-color: var(--bronze);
}
.offre--fondateur .offre__nom { color: var(--bronze); }
.offre--fondateur .offre__liste li strong { color: var(--bronze); }

.offre__badge {
  align-self: flex-start;
  margin: 0 0 16px;
  padding: 6px 12px;
  border: 1px solid var(--filet-bronze);
  border-radius: var(--arrondi);
  font-family: var(--titre);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* ---- Phrase de positionnement, sous le prix ---- */
.offre__phrase {
  margin: clamp(16px, 2vw, 20px) 0 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--sur-noir-doux);
}

.offre__soustitre {
  margin: clamp(22px, 2.6vw, 28px) 0 -10px;
  font-size: var(--t-etiq);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sur-noir-pale);
}

/* ---- La note qui explique la suite de la première année ----
   Plus petite que le reste, mais lisible : 6,9 pour 1 sur le fond
   de la carte. */
.offre__note {
  margin: clamp(20px, 2.4vw, 26px) 0 0;
  padding-top: clamp(16px, 2vw, 20px);
  border-top: 1px solid var(--filet-sombre);
  font-size: .85rem;
  line-height: 1.7;
  color: var(--sur-noir-doux);
}

/* ---- Blocs d'explication : partage du terrain, Wingfield ---- */
.explique {
  margin-top: clamp(36px, 4.5vw, 56px);
  padding: clamp(24px, 3vw, 34px);
  background: var(--clair-2);
  border-left: 2px solid var(--bronze-fonce);
}

.explique__titre {
  margin: 0 0 6px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
}

.explique__intro {
  margin: 0;
  color: var(--sur-clair-doux);
  font-size: .96rem;
  max-width: 62ch;
}

.explique__parts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 44px);
  margin-top: clamp(18px, 2.2vw, 24px);
}
.explique__parts > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.explique__parts span {
  font-size: var(--t-etiq);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sur-clair-pale);
}
.explique__parts strong {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -.02em;
  color: var(--bronze-fonce);
  font-variant-numeric: tabular-nums;
}
.explique__parts sup { font-size: .6em; }

.explique__note {
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--sur-clair-doux);
  max-width: 68ch;
}

/* ==========================================================================
   28. PAGE ABONNEMENTS — en-tête compact et trois cartes de même hauteur
   Mêmes couleurs, mêmes polices, même bronze. Ce qui change, c'est la
   mise en page : une grille qui étire les trois cartes à la même hauteur,
   et trois gabarits qui gardent les prix sur la même ligne.
   ========================================================================== */

/* ---- En-tête : tout centré, du plus discret au plus visible.
   L'horaire est une simple ligne au-dessus des deux actions : il se lit
   tout de suite sans prendre la place d'un titre. ---- */
.entete-tarifs {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.entete-tarifs__heures {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 104%;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--sur-noir);
}
.entete-tarifs__part { white-space: nowrap; }
.entete-tarifs__sep {
  color: var(--bronze);
  margin-inline: 2px;
}

.entete-tarifs__horloge {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--bronze);
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Un vrai palier entre l'horaire et les boutons : la ligne informe,
   les boutons agissent. */
.entete-tarifs__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 32px);
}

/* ---- Trois cartes, même hauteur ----
   La grille étire (align-items: stretch par défaut), chaque carte est une
   colonne flexible, et le bouton descend au bas avec margin-top: auto. */
.offres--trois {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1180px;
  margin-inline: auto;
  align-items: stretch;
}

.offres--trois .offre { height: 100%; }

/* Gabarit 1 — la ligne du badge existe même quand la carte n'en a pas,
   pour que les titres commencent tous à la même hauteur. */
.offre__haut {
  display: flex;
  align-items: stretch;
  height: 32px;                /* hauteur fixe : le badge la remplit,
                                  la carte sans badge la réserve quand même */
  margin-bottom: 14px;
}
.offre__haut .offre__badge {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-block: 0;
}

/* Gabarit 2 — trois lignes réservées pour le sous-titre.
   Deux ne suffisaient pas : celui du Fondateur en prend trois, et les
   prix des trois cartes se retrouvaient décalés de 22 px. */
.offre__soustitre {
  margin: 8px 0 0;
  min-height: 4.35em;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--sur-noir-doux);
}

/* La période passe sous le montant sur les trois cartes.
   « / première année » ne tenait pas à côté de « 1 999 $ » : le bloc prix
   du Fondateur devenait 34 px plus haut que les deux autres. */
.offres--trois .offre__periode {
  flex-basis: 100%;
  margin-top: 4px;
}

/* Gabarit 3 — la ligne du prix annuel, vide sur la carte Fondateur. */
.offre__mois { min-height: 25px; }

.offre__liste { margin-top: clamp(22px, 2.6vw, 30px); }

/* Le bouton tombe au bas de chaque carte : les trois sont alignés. */
.offre__btn { margin-top: auto; }
.offre__liste + .offre__btn { margin-top: auto; }

/* ---- PRO+ : la carte du centre, mise en avant sans tapage.
   Fond légèrement plus chaud que les deux autres, bordure bronze pleine,
   badge en bronze plein. Aucun aplat doré. ---- */
.offre--plus {
  background:
    linear-gradient(180deg, rgba(198, 146, 64, .08) 0%, rgba(198, 146, 64, .02) 100%),
    var(--gris-2);
  border-color: var(--bronze);
  box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .9);
}
.offre--plus .offre__nom { color: var(--bronze); }
.offre--plus .offre__badge {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--noir);
}

/* ---- Trois boutons, trois rôles ----
   PRO garde le contour clair et sobre, PRO+ le bronze plein qui appelle
   l'action, et Fondateur un charbon cerné de bronze : le plus discret
   des trois à distance, le plus habillé de près. ---- */
.btn--fondateur {
  background: var(--gris);
  color: var(--bronze);
  border-color: var(--bronze);
}
.btn--fondateur:hover {
  background: rgba(198, 146, 64, .14);
  border-color: var(--bronze);
  color: var(--bronze);
  transform: translateY(-2px);
}

/* Le contour de PRO se voit un peu mieux sur le fond de la carte. */
.offre .btn--contour { border-color: rgba(240, 240, 238, .42); }
.offre .btn--contour:hover { border-color: var(--bronze); color: var(--bronze); }

/* ---- Fondateur : sombre et premium, détails bronze ---- */
.offre--fondateur {
  background:
    radial-gradient(120% 80% at 82% 0%, rgba(198, 146, 64, .11) 0%, transparent 62%),
    var(--gris-2);
  border-color: var(--filet-bronze);
}
.offre--fondateur .offre__nom { color: var(--bronze); }
.offre--fondateur .offre__liste li strong { color: var(--bronze); }

/* ---- La ligne d'information sous les cartes ---- */
.apropos {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.8vw, 20px);
  max-width: 1160px;
  margin: clamp(30px, 3.5vw, 44px) auto 0;
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--gris);
  border: 1px solid var(--filet-sombre);
  border-left: 2px solid var(--bronze);
}

.apropos__icone {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--bronze);
}
.apropos__icone svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.apropos__titre {
  margin: 0 0 8px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--sur-noir);
}
.apropos__texte p {
  margin: 0 0 10px;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--sur-noir-doux);
  max-width: 88ch;
}
.apropos__texte p:last-child { margin-bottom: 0; }

/* ==========================================================================
   ADAPTATION AUX ÉCRANS
   Trois colonnes ne tiennent plus sous 1080 px : on passe à deux, puis à
   une seule. Jamais de texte écrasé pour garder trois colonnes.
   ========================================================================== */
@media (max-width: 1080px) {
  .offres--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Le sous-titre n'a plus besoin de deux lignes réservées : les cartes
     ne sont plus toutes sur la même rangée. */
  .offre__soustitre { min-height: 0; }
}

@media (max-width: 760px) {
  /* Les cartes sont l'une sous l'autre : plus besoin des gabarits qui
     réservaient la place ligne par ligne. */
  .offres--trois { grid-template-columns: 1fr; }
  .offre__haut { height: auto; }
  .offre__haut:empty { display: none; }
  .offre__mois:empty { display: none; }

  .entete-tarifs__actions { width: 100%; }
  .entete-tarifs__actions .btn { flex: 1 1 100%; }

  /* La ligne ne tient plus sur une seule ligne : les deux moitiés se
     placent l'une sous l'autre et le point séparateur disparaît, plutôt
     que de rester seul en bout de ligne. */
  .entete-tarifs__part { flex-basis: 100%; }
  .entete-tarifs__sep { display: none; }

  .apropos { flex-direction: column; gap: 12px; }
}

/* ==========================================================================
   30. PANNEAU DE L'ESSENTIEL
   Un seul encadré, trois colonnes : sans abonnement, partage du terrain,
   Wingfield. Les séparateurs sont les bordures des colonnes elles-mêmes —
   verticales sur ordinateur, horizontales une fois empilées.
   ========================================================================== */
.panneau {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--filet-clair);
  background: var(--clair-2);
}

.panneau__part { padding: clamp(24px, 2.8vw, 34px); }
.panneau__part + .panneau__part { border-left: 1px solid var(--filet-clair); }

.panneau__titre {
  margin: 0 0 clamp(16px, 2vw, 22px);
  font-size: var(--t-etiq);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze-fonce);
}

.panneau__mot {
  margin: 0 0 16px;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--sur-clair-doux);
}

/* Cette ligne reste sur un seul rang partout. Mesuré : le texte fait
   314 px à .8rem/.1em, alors que la colonne n'en offre que 302 sur
   ordinateur et 247 en deux colonnes. La taille et l'interlettrage
   descendent donc par paliers, calés sur les ruptures du panneau. */
.panneau__exemple {
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sur-clair-pale);
}

/* Une ligne par tarif : le nom à gauche, le montant à droite. */
.panneau__prix {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.panneau__prix li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 14px;
}
.panneau__prix span {
  font-size: .92rem;
  color: var(--sur-clair-doux);
}
.panneau__prix strong {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  color: var(--bronze-fonce);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Le tarif sans abonnement est le premier repère : il se lit de plus loin. */
.panneau__prix--gros strong { font-size: clamp(1.35rem, 2.1vw, 1.75rem); }

.panneau__note {
  margin: clamp(16px, 2vw, 20px) 0 0;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--sur-clair-pale);
}

/* ---- Adaptation ----
   Trois colonnes deviennent trop étroites vers 980 px : les deux premières
   restent côte à côte et Wingfield passe dessous, puis tout s'empile. */
/* Le palier descend dès 1180 px : entre 980 et 1180, les trois colonnes
   sont encore là mais déjà étroites (237 px de texte disponible), et
   c'est là que la ligne débordait. */
@media (max-width: 1180px) {
  .panneau__exemple { font-size: .64rem; letter-spacing: .03em; }
}

@media (max-width: 980px) {
  .panneau { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panneau__part + .panneau__part { border-left: 0; }
  .panneau__part:nth-child(2) { border-left: 1px solid var(--filet-clair); }
  .panneau__part:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--filet-clair);
  }
}

@media (max-width: 640px) {
  .panneau { grid-template-columns: 1fr; }
  .panneau__part:nth-child(2) { border-left: 0; }
  .panneau__part + .panneau__part { border-top: 1px solid var(--filet-clair); }
}

/* Très petits téléphones : un dernier palier pour que la ligne tienne
   encore, jusque vers 320 px. */
@media (max-width: 380px) {
  .panneau__exemple { font-size: .6rem; letter-spacing: .02em; }
}

/* ==========================================================================
   31. GALERIE — trois vues du centre, agrandissables
   Les cases gardent la grille et les proportions existantes. La vignette
   est recadrée pour que les trois aient la même hauteur ; l'agrandissement
   montre l'image entière, sans recadrage.
   ========================================================================== */
/* Quand la galerie suit directement un autre bloc — la ligne des chiffres
   de l'accueil — elle se rapproche : de 30 à 50 px, pas davantage. */
.photos-grille--suite { margin-top: clamp(30px, 3vw, 50px); }

/* Sur une tablette à l'horizontale, les trois vues restent lisibles
   côte à côte : on garde donc trois colonnes jusqu'à 901 px. En dessous,
   la règle générale reprend la main — deux colonnes, puis une seule. */
@media (min-width: 901px) and (max-width: 1024px) {
  .photos-grille--suite { grid-template-columns: repeat(3, 1fr); }
}

.photo-vue { margin: 0; }

.photo-vue__zone {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--filet-clair);
  border-radius: var(--arrondi);
  background: var(--clair-2);
  cursor: zoom-in;
  transition: border-color var(--doux);
}
.photo-vue__zone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.photo-vue__zone:hover { border-color: var(--bronze-fonce); }
.photo-vue__zone:hover img { transform: scale(1.03); }

.photo-vue figcaption {
  margin-top: 12px;
  font-size: var(--t-etiq);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze-fonce);
}

/* ---- L'agrandissement ---- */
.zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  /* « minmax(0, 1fr) » donne à la case une hauteur définie, égale à
     celle de l'écran. Sans le 0, la rangée s'étirerait à la hauteur
     réelle de l'image et une grande photo déborderait vers le bas. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  /* Le bas est plus dégagé : il réserve la place du petit libellé. */
  padding: clamp(14px, 3vw, 44px);
  padding-bottom: clamp(52px, 6vw, 82px);
  background: rgba(0, 0, 0, .95);
  opacity: 0;
  transition: opacity .25s ease;
  cursor: zoom-out;
}
.zoom.vu { opacity: 1; }

/* L'image entière, jamais rognée, jamais agrandie au-delà de sa taille. */
.zoom__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: default;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9);
}

.zoom__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 2vw, 26px);
  text-align: center;
  font-size: var(--t-etiq);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sur-noir-doux);
  pointer-events: none;
}

.zoom__fermer {
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--filet-sombre);
  border-radius: var(--arrondi);
  color: var(--sur-noir);
  cursor: pointer;
  transition: var(--doux);
}
.zoom__fermer:hover {
  border-color: var(--bronze);
  color: var(--bronze);
}
.zoom__fermer svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Pendant l'agrandissement, la page derrière ne défile plus. */
body.zoom-ouvert { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .zoom { transition: none; }
  .photo-vue__zone img { transition: none; }
  .photo-vue__zone:hover img { transform: none; }
}


/* ==========================================================================
   32. LA BANDE DE CHIFFRES — une grille vraiment régulière

   Les cinq colonnes étaient déjà égales, mais le texte était aligné à
   gauche : « 13 », « 32 000 », « 100 % », « 1 » et « 6 » n'ayant pas la
   même largeur, la ligne paraissait irrégulière. On centre donc chaque
   bloc dans sa colonne et on réserve deux zones de hauteur fixe :
   une pour le chiffre, une pour le libellé.

   Aucune marge particulière n'est appliquée à une statistique plutôt
   qu'à une autre : les cinq blocs suivent exactement la même règle.
   Les couleurs, les tailles et les interlignes ne changent pas.
   ========================================================================== */
.chiffres {
  text-align: center;
  align-items: start;
  justify-items: stretch;
}

.chiffres > div {
  /* Toute la colonne, sans décalage propre. */
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* La zone du chiffre : une seule ligne, toujours la même hauteur, donc
   la même ligne de base pour les cinq. « line-height: 1 » vient de la
   règle d'origine et n'est pas touché. */
.chiffre__valeur {
  min-height: 1em;
  display: block;
}

/* La zone du libellé : la place de deux lignes est toujours réservée,
   même quand le texte n'en occupe qu'une (« Pieds carrés »). Les cinq
   libellés commencent donc à la même hauteur et les cinq blocs se
   terminent aussi à la même hauteur. */
.chiffre__nom {
  min-height: 2.9em;          /* 2 lignes de 1.45 */
  display: block;
}


/* ==========================================================================
   33. APRÈS-MATCH — une seule section : le titre, le rappel, la photo

   La page reprend l'en-tête sombre des autres pages, mais sans fil
   d'Ariane et sans section en dessous : le titre, la ligne
   « Restaurant · Bar · Lounge », le texte, puis une grande photo.
   ========================================================================== */
.entete-page--photo {
  padding-block: clamp(56px, 8vh, 104px) clamp(56px, 8vh, 96px);
}

/* Le titre est une phrase complète. « balance » répartit les deux lignes
   de façon égale au lieu de laisser un mot seul sur la dernière ; la
   largeur maximale reste celle des titres des autres pages. */
.entete-page--photo h1 {
  text-wrap: balance;
  margin-bottom: 20px;
}

/* Le rappel « Restaurant · Bar · Lounge » vient sous le titre,
   et non au-dessus comme les étiquettes des autres pages. */
.etiquette--sous {
  margin-bottom: 18px;
}

/* La grande photo occupe toute la largeur du bloc et garde
   ses proportions d'origine à toutes les tailles d'écran. */
.photo-large {
  margin: clamp(40px, 5vw, 64px) 0 0;
  border: 1px solid var(--filet-sombre);
  border-radius: var(--arrondi);
  overflow: hidden;
  background: var(--gris);
}
.photo-large img {
  display: block;
  width: 100%;
  height: auto;
}


/* ==========================================================================
   34. UNE ÉTIQUETTE QUI SERT DE TITRE

   Sur la page Événements, la petite étiquette est le seul intitulé de sa
   section : elle porte donc une balise de titre (h1, h2) pour que la page
   garde une structure lisible par les moteurs de recherche et les lecteurs
   d'écran. Ces trois lignes annulent ce que les balises de titre imposent,
   pour que l'apparence reste exactement celle d'une étiquette.
   ========================================================================== */
h1.etiquette,
h2.etiquette,
h3.etiquette {
  font-family: var(--texte);
  font-stretch: normal;
  line-height: 1.45;
}

/* Sans grand titre entre l'étiquette et la grille, l'écart d'origine
   laissait un trou : les blocs remontent. */
h1.etiquette + .services,
h2.etiquette + .services,
h1.etiquette + .niveaux,
h2.etiquette + .niveaux,
h1.etiquette + .entraineurs,
h2.etiquette + .entraineurs {
  margin-top: clamp(30px, 3.4vw, 48px);
}

/* Les fiches d'entraîneurs ne portent plus de paragraphe : la spécialité
   est la dernière ligne et ne doit rien réserver sous elle. */
.entraineur__role:last-child { margin-bottom: 0; }


/* ==========================================================================
   35. LA BARRE DU HAUT SANS TEXTE À GAUCHE

   Sur la page Équipement, la barre ne porte que l'horaire. Le fond, la
   hauteur, la typographie et la couleur restent ceux des autres pages :
   seul le texte de gauche disparaît.
   ========================================================================== */
.bandeau--horaire .bandeau__interieur {
  justify-content: flex-end;
}

/* Une ligne vide, à la taille du texte des autres pages. Elle ne se voit
   pas mais elle occupe la même hauteur : la barre garde donc exactement
   les mêmes dimensions, sans aucune valeur écrite en dur. */
.bandeau__mot--vide::before {
  content: "\200B";       /* espace de largeur nulle */
}

@media (max-width: 768px) {
  /* Sur téléphone, les paragraphes de la barre passent en pleine largeur :
     la ligne vide ferait une deuxième ligne et doublerait la hauteur. */
  .bandeau--horaire .bandeau__mot--vide { display: none; }

  /* L'horaire reste contre le bord droit, comme sur grand écran. */
  .bandeau--horaire .bandeau__interieur {
    justify-content: flex-end;
    text-align: right;
  }
  .bandeau--horaire .bandeau__heures { flex-basis: auto; }
}


/* ==========================================================================
   36. LES PÉRIODES DU TARIF SANS ABONNEMENT

   Le nom de la période reste en gros, l'horaire qui le précise vient juste
   après en plus petit. « nowrap » garde l'horaire d'un seul tenant : quand
   la colonne devient étroite, il passe entier à la ligne suivante au lieu
   de se couper au milieu.
   ========================================================================== */
.panneau__quand {
  font-style: normal;
  font-size: .78rem;
  color: var(--sur-clair-pale);
  white-space: nowrap;
}

/* La précision sur le Fondateur suit la note principale, en plus discret.
   Elle se colle à la note du dessus au lieu de repartir du même écart. */
.panneau__note--petit {
  margin-top: 10px;
  font-size: .76rem;
}

@media (max-width: 1180px) {
  .panneau__quand { font-size: .72rem; }
}


/* ==========================================================================
   37. « DEVENIR MEMBRE » EN TÊTE DU MENU DÉROULANT

   L'entrée est passée en premier dans le HTML : elle ouvre donc le menu
   sur téléphone et tablette, avant les liens de navigation.

   Elle reprend l'allure du bouton de l'en-tête sur ordinateur : fond
   transparent, filet champagne, texte champagne, majuscules. C'est le
   filet et la couleur qui la distinguent des liens, pas la taille.

   Ces règles remplacent celles du bloc 10, qui la mettaient en bronze
   plein quand elle se trouvait au bas du menu.
   ========================================================================== */
@media (max-width: 1700px) {

  .nav__liens .btn--entete {
    /* Premier élément du menu : l'écart du haut le décolle de la barre,
       celui du bas le sépare du premier lien. */
    margin-block: 22px 14px;
    background: transparent;
    color: var(--bronze);

    /* La bordure est écrite en entier, et non seulement en couleur :
       la règle « .nav__liens a { border-bottom: 0 } » du bloc 10 est plus
       forte que « .btn--entete », et elle effaçait le filet du bas. Le
       rectangle restait ouvert en dessous. */
    border: 1px solid var(--bronze);

    /* Même raison : « .nav__liens a » impose « padding: 18px 0 » à tous les
       liens du menu. On redonne au bouton un retrait à lui, pour que le
       texte ne touche jamais le filet. */
    padding: 16px 20px;
    box-sizing: border-box;
  }

  .nav__liens .btn--entete:hover,
  .nav__liens .btn--entete:active,
  .nav__liens .btn--entete:focus-visible {
    background: rgba(198, 146, 64, .14);
    border-color: var(--bronze);
    color: var(--bronze);
  }

  /* Le bouton porte son propre filet : aucune ligne de séparation
     sous lui, ni au-dessus du premier lien. */
  .nav__liens li.nav__membre { border-bottom: 0; }
}


/* ==========================================================================
   38. LE PIED DE PAGE À TROIS COLONNES

   La colonne « Le centre » a été retirée du pied. Sans cette ligne, la
   quatrième piste de la grille resterait déclarée et laisserait une
   colonne vide à droite.

   La règle est enfermée dans « min-width: 1025px » : plus bas, les paliers
   d'origine reprennent la main — deux colonnes, puis une seule. Sans cette
   précaution, elle les écraserait et le pied resterait sur trois colonnes
   serrées jusque sur téléphone.
   ========================================================================== */
@media (min-width: 1025px) {
  .pied__haut { grid-template-columns: 1.5fr 1fr 1.25fr; }
}


/* ==========================================================================
   39. LA VIDÉO WINGFIELD

   Un lecteur YouTube au format 16:9, centré, qui ne dépasse jamais la
   largeur du bloc. Le cadre porte l'arrondi du site et masque ce qui
   dépasse, pour que les coins du lecteur soient arrondis eux aussi.
   ========================================================================== */
/* La vidéo suit directement le titre de la section : l'écart du haut est
   celui d'une grille après un titre, ni plus ni moins. */
.video {
  margin: clamp(34px, 4vw, 52px) auto 0;
  max-width: 960px;
}

/* Le rapport 16:9 est tenu par le cadre : le lecteur se contente
   de le remplir. Aucune hauteur en dur, donc aucun recadrage. */
.video__cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--filet-clair);
  border-radius: var(--arrondi);
  background: var(--noir);
}
.video__cadre iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* ==========================================================================
   40. LA FICHE D'ENTRAÎNEUR

   Trois ajouts : la photo dans la carte, le bouton « Voir le profil »,
   et la fenêtre qui s'ouvre par-dessus la page. Le noir et l'or de la
   section ne changent pas.
   ========================================================================== */

/* ---- La carte ---- */

/* Le portrait garde ses proportions ; le cadrage est haut pour que le
   visage reste au centre de la case, jamais coupé. */
.entraineur__portrait img { object-position: center 6%; }

/* Le texte de la carte pousse le bouton vers le bas : les trois cartes
   ont la même hauteur, donc les boutons s'alignent. */
.entraineur { display: flex; flex-direction: column; }
.entraineur__infos { display: flex; flex-direction: column; flex: 1; }

.entraineur__mot {
  margin: 0 0 15px;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--sur-noir-doux);
}

/* Courriel visible directement sur la petite fiche, sans surcharger le profil complet.
   L'auto-margin pousse les coordonnées vers le bas de la carte : les courriels
   et les boutons restent parfaitement alignés même si les descriptions ont
   une longueur différente. */
.entraineur__courriel {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--filet-sombre);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.entraineur__courriel span {
  font-size: .65rem;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sur-noir-pale);
}
.entraineur__courriel a {
  width: fit-content;
  max-width: 100%;
  color: var(--bronze);
  font-size: .88rem;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: var(--doux);
}
.entraineur__courriel a:hover,
.entraineur__courriel a:focus-visible {
  color: var(--blanc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entraineur__btn {
  margin-top: clamp(18px, 2.2vw, 24px);
  align-self: flex-start;
  padding: 11px 20px;
  min-height: 42px;
  background: transparent;
  color: var(--bronze);
  border: 1px solid var(--bronze);
  border-radius: var(--arrondi);
  font-family: var(--titre);
  font-weight: 700;
  font-stretch: 105%;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--doux);
}
.entraineur__btn:hover,
.entraineur__btn:focus-visible {
  background: rgba(198, 146, 64, .14);
  color: var(--bronze);
}

/* ---- La fenêtre ---- */
.fiche {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(0, 0, 0, .9);
  opacity: 0;
  transition: opacity .25s ease;
}
.fiche.vu { opacity: 1; }

/* La boîte ne dépasse jamais l'écran : c'est elle qui défile. */
.fiche__boite {
  position: relative;
  width: min(920px, 100%);
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--gris);
  border: 1px solid var(--filet-sombre);
  border-radius: var(--arrondi);
}

/* Le X est posé sur la fenêtre et non dans la boîte : celle-ci défile,
   lui reste au même endroit, toujours visible. */
.fiche__fermer {
  position: absolute;
  top: clamp(18px, 3.4vw, 46px);
  right: clamp(18px, 3.4vw, 46px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .72);
  border: 1px solid var(--filet-sombre);
  border-radius: var(--arrondi);
  color: var(--sur-noir);
  cursor: pointer;
  z-index: 2;
  transition: var(--doux);
}
.fiche__fermer:hover,
.fiche__fermer:focus-visible {
  border-color: var(--bronze);
  color: var(--bronze);
}
.fiche__fermer svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

/* ---- Le contenu du profil ---- */
.fiche .profil {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(22px, 3vw, 36px);
}

.profil__photo {
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--filet-sombre);
  border-radius: var(--arrondi);
  background: var(--noir);
}
.profil__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.profil__nom {
  margin: 0 0 4px;
  font-family: var(--titre);
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--sur-noir);
}
.profil__role {
  margin: 0 0 clamp(20px, 2.4vw, 26px);
  font-size: var(--t-etiq);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* Les sous-titres restent discrets : même traitement que les étiquettes
   du site, jamais de gros titre dans la fenêtre. */
.profil__texte h3 {
  margin: clamp(22px, 2.6vw, 28px) 0 10px;
  font-family: var(--texte);
  font-weight: 600;
  font-stretch: normal;
  font-size: var(--t-etiq);
  letter-spacing: .16em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--bronze);
}
.profil__texte h3:first-of-type { margin-top: 0; }

.profil__texte p {
  margin: 0 0 12px;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--sur-noir-doux);
}
.profil__texte p:last-child { margin-bottom: 0; }

/* La phrase mise en avant : un filet bronze, rien de plus. */
.profil__citation {
  margin: 16px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--bronze);
  color: var(--sur-noir);
  font-size: .98rem;
}

/* ---- Adaptation ---- */
@media (max-width: 760px) {
  /* Sur téléphone, la photo passe au-dessus du texte et se limite en
     hauteur : la biographie reste atteignable sans trop défiler. */
  .fiche .profil {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    /* De la place sous le X, qui est posé sur le coin haut droit :
       rien du contenu ne passe dessous. */
    padding-top: 68px;
  }
  .profil__photo {
    max-width: 240px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fiche { transition: none; }
}

/* ==========================================================================
   PRÉ-LANCEMENT 2026
   ========================================================================== */
.btn--entete {
  gap: 9px;
}

.btn__bientot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: 0;
  padding: 3px 7px 2px;
  border: 1px solid rgba(214, 166, 80, .42);
  border-radius: 999px;
  background: rgba(214, 166, 80, .10);
  color: var(--bronze);
  font-size: .58rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  opacity: .92;
}

.btn--entete-plein .btn__bientot {
  border-color: rgba(0, 0, 0, .22);
  background: rgba(0, 0, 0, .12);
  color: var(--noir);
}

.btn--entete:hover .btn__bientot,
.btn--entete:focus-visible .btn__bientot {
  transform: none;
}

.entree__prelancement {
  margin-top: 12px;
  color: rgba(240, 240, 238, .76);
  font-size: clamp(.88rem, 1.25vw, 1rem);
  font-weight: 600;
}

.btn--prelancement { white-space: nowrap; }

.prelancement {
  position: relative;
  overflow: hidden;
  padding-block: clamp(62px, 8vw, 112px);
  background:
    radial-gradient(circle at 82% 22%, rgba(214, 166, 80, .16), transparent 28%),
    linear-gradient(135deg, #090909 0%, #111 100%);
  border-bottom: 1px solid var(--filet-sombre);
}
.prelancement::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -150px;
  bottom: -210px;
  border: 1px solid rgba(214, 166, 80, .18);
  border-radius: 50%;
  pointer-events: none;
}
.prelancement__interieur { max-width: 980px; }
.prelancement__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--bronze);
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.prelancement__kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--bronze);
}
.prelancement h1 {
  max-width: 850px;
  margin: 0;
  font-family: var(--titre);
  font-size: clamp(2.35rem, 5.8vw, 5.25rem);
  font-weight: 800;
  font-stretch: 108%;
  line-height: .98;
  letter-spacing: -.045em;
}
.prelancement__texte {
  max-width: 760px;
  margin-top: clamp(22px, 3vw, 32px);
  color: var(--sur-noir-doux);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.72;
}
.prelancement__texte strong { color: var(--sur-noir); }
.prelancement__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 40px);
}

.prelaunch-teaser {
  padding-block: clamp(54px, 7vw, 92px);
  background: #f4f4f2;
}
.prelaunch-teaser__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
}
.prelaunch-teaser__eyebrow {
  margin: 0 0 12px;
  color: #9a6b24;
  font-family: var(--titre);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.prelaunch-teaser h2 {
  margin: 0;
  color: #111;
  font-family: var(--titre);
  font-size: clamp(2.1rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}
.prelaunch-teaser__copy {
  margin: 0;
  color: #454545;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.75;
}
.prelaunch-teaser__copy strong { color: #111; }

@media (max-width: 1180px) {
  .nav__droite .btn--entete {
    padding-inline: 12px;
    font-size: .7rem;
    gap: 7px;
  }
  .btn__bientot { font-size: .54rem; padding-inline: 6px; }
}

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

@media (max-width: 768px) {
  .btn__bientot { font-size: .58rem; }
  .nav__liens .btn--entete { gap: 8px; }
  .prelancement__actions .btn { width: 100%; }
  .btn--prelancement { white-space: normal; }
}


/* Aperçu local de la vidéo Wingfield : YouTube bloque parfois les iframes en file://. */
.video__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #090909;
}
.video__fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28);
}
.video__fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video__fallback-play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 76px;
  height: 54px;
  border-radius: 14px;
  background: #ff0033;
  font-size: 28px;
  line-height: 1;
  padding-left: 4px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.video__fallback-label {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  font-weight: 700;
  white-space: nowrap;
}
.video__note-local {
  margin: 12px 0 0;
  text-align: center;
  color: #666;
  font-size: .9rem;
}
.video__note-local a { color: var(--bronze); font-weight: 700; }

/* En-tête : réservation visible à toutes les largeurs, badges lisibles. */
.nav__liens { flex-shrink: 0; }
.burger { flex-shrink: 0; }
.nav .btn__bientot {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .03em;
  opacity: 1;
}
.nav .btn--entete-plein .btn__bientot,
.nav .btn--reserver-mobile .btn__bientot,
.nav__liens .btn--entete .btn__bientot {
  background: #111;
  color: #fff;
  border-color: #111;
}
@media (max-width: 1700px) {
  .nav__menu { display: contents; }
  .nav__droite .btn--entete { display: none; }
  .btn--reserver-mobile { display: inline-flex; gap: 8px; }
}
@media (max-width: 480px) {
  .nav__interieur { padding-inline: 12px; gap: 10px; }
  .nav__droite { gap: 8px; }
  .nav__logo { min-width: 0; max-width: calc(100% - 156px); }
  .nav__logo img { width: 100%; height: auto; max-height: 36px; }
  .btn--reserver-mobile {
    flex-direction: column;
    gap: 3px;
    width: 96px;
    height: 48px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .02em;
  }
  .nav .btn--reserver-mobile .btn__bientot { padding: 2px 7px; }
}