/*
Theme Name: WRC Padel
Theme URI: https://wrcpadel.fr
Author: WRC Padel
Description: Theme one page sur mesure pour le club de padel WRC Padel. Barre fixe avec ancres, sections presentation / application mobile / tarifs / cours / entreprises / contact, bouton de reservation vers une page dediee.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wrc-padel
Tags: one-page, custom-colors, responsive
*/

/* =========================================================================
   OU MODIFIER QUOI
   -------------------------------------------------------------------------
   Couleurs .............. bloc ":root" juste en dessous
   Textes ................ front-page.php (page d accueil), footer.php (pied)
   Menu et logo .......... header.php
   Photos ................ front-page.php, balises <img> dans les <figure>
   Animations ............ assets/js/main.js
   ========================================================================= */

/* =========================================================
   1. VARIABLES — PALETTE & RÉGLAGES GLOBAUX
   ========================================================= */
:root{
  /* Palette imposée */
  --blanc:        #ffffff;
  --rouille:      #b7410e;   /* couleur secondaire */
  --rouille-dark: #8f320a;
  --rouille-soft: #fbeee8;
  --noir:         #121110;
  --noir-soft:    #1e1c1a;
  --beige:        #f4ece2;
  --beige-dark:   #e3d4c1;

  /* Texte */
  --texte:        #23201d;
  --texte-doux:   #6d645b;

  /* Mise en page */
  --header-h:     78px;
  --max:          1220px;
  --r-sm:         10px;
  --r-md:         18px;
  --r-lg:         26px;
  --shadow:       0 18px 45px -22px rgba(18,17,16,.45);
  --shadow-soft:  0 10px 30px -18px rgba(18,17,16,.35);

  /* Typographie */
  --font-titre:   'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-texte:   'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Image de fond du hero — remplacer par une URL de photo */
  --hero-image: url("https://wrcpadel.fr/wp-content/uploads/2026/09/hero.webp");
/* url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='1000'%3E%3Crect%20width='1600'%20height='1000'%20fill='%231e1c1a'/%3E%3C/svg%3E"); */
}

/* =========================================================
   2. BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--blanc); color:var(--texte);
  font-family:var(--font-texte); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-titre); line-height:1.1; margin:0; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--rouille); outline-offset:3px; border-radius:4px; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--rouille); color:#fff;
  padding:12px 18px; z-index:200; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }

section[id]{ scroll-margin-top:var(--header-h); }

/* =========================================================
   3. COMPOSANTS RÉUTILISABLES
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-titre); font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:14px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn--primary{ background:var(--rouille); color:#fff; box-shadow:0 10px 24px -14px rgba(183,65,14,.9); }
.btn--primary:hover{ background:var(--rouille-dark); transform:translateY(-2px); }
.btn--dark{ background:var(--noir); color:#fff; }
.btn--dark:hover{ background:var(--rouille); transform:translateY(-2px); }
.btn--ghost{ border-color:currentColor; color:var(--noir); }
.btn--ghost:hover{ background:var(--noir); color:#fff; border-color:var(--noir); transform:translateY(-2px); }
.btn--light{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.5); backdrop-filter:blur(6px); }
.btn--light:hover{ background:#fff; color:var(--noir); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-titre); font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--rouille); margin-bottom:18px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--rouille); }
.eyebrow--light{ color:var(--beige-dark); }
.eyebrow--light::before{ background:var(--rouille); }

.section{ padding:110px 0; position:relative; }
.section--beige{ background:var(--beige); }
.section--dark{ background:var(--noir); color:#fff; }
.section--dark .lead{ color:#c9c1b8; }

.section-head{ max-width:660px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(2rem, 4.2vw, 3.1rem); font-weight:700; }
.lead{ color:var(--texte-doux); font-size:1.06rem; margin-top:18px; }

/* Photos : figure.photo > img  ------------------------------------------- */
.photo{ margin:0; position:relative; overflow:hidden; border-radius:var(--r-md); background:var(--beige-dark); }
.photo img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.photo.is-placeholder::after{
  content:attr(data-label); position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:16px;
  font-family:var(--font-titre); font-weight:600; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:#a08d75; background:var(--beige-dark);
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 12px, transparent 12px 24px);
}

/* Animations d'apparition ------------------------------------------------
   Par defaut le contenu est VISIBLE. L'etat masque n'est applique que si le
   petit script du <head> a ajoute la classe "anim" sur <html>, c'est-a-dire
   dans une vraie fenetre. Consequence : si le JavaScript ne s'execute pas, ou
   si la page est affichee dans un cadre d'apercu, rien ne disparait. */
.reveal{ opacity:1; transform:none; }
html.anim .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
html.anim .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, html.anim .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================
   4. HEADER FIXE
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:100;
  display:flex; align-items:center;
  background:transparent; transition:background .35s ease, box-shadow .35s ease, height .35s ease;
}
.header::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:rgba(183,65,14,.96); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.14); transition:opacity .35s ease;
}
.header.solid::after{ opacity:1; }
.header.solid{ box-shadow:0 6px 30px -18px rgba(18,17,16,.75); }

.header .wrap{ display:flex; align-items:center; gap:26px; }

/* Logo */
.logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo__mark{ width:42px; height:42px; flex-shrink:0; }
.logo__txt{ font-family:var(--font-titre); font-weight:800; font-size:19px; letter-spacing:.02em; line-height:1; color:#fff; transition:color .35s ease; }
.logo__txt span{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.3em; color:var(--rouille); margin-top:4px; transition:color .35s ease; }
.header.solid .logo__txt{ color:#fff; }
.header.solid .logo__txt span{ color:rgba(255,255,255,.85); }

/* Navigation */
.nav{ margin-left:auto; }
.nav ul{ display:flex; align-items:center; gap:6px; }
.nav a{
  position:relative; display:block; padding:10px 14px; border-radius:8px;
  font-family:var(--font-titre); font-weight:500; font-size:15px; white-space:nowrap;
  color:rgba(255,255,255,.88); transition:color .3s ease;
}
.header.solid .nav a{ color:rgba(255,255,255,.92); }
.header.solid .nav a:hover,
.header.solid .nav a.active{ color:#fff; }
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--rouille); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.header.solid .nav a::after{ background:#fff; }
.nav a:hover::after, .nav a.active::after{ transform:scaleX(1); }
.nav a:hover, .nav a.active{ color:var(--rouille); }

/* Réseaux sociaux dans la barre fixe */
.header__socials{
  display:flex; align-items:center; gap:2px;
  margin:0 4px 0 12px; padding-left:14px;
  border-left:1px solid rgba(255,255,255,.22); transition:border-color .35s ease;
}
.header.solid .header__socials{ border-color:rgba(255,255,255,.32); }
.header__socials a{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; color:rgba(255,255,255,.85);
  transition:color .3s ease, background .3s ease;
}
.header.solid .header__socials a{ color:#fff; }
.header__socials a:hover{ color:var(--rouille); background:rgba(183,65,14,.1); }
.header.solid .header__socials a:hover{ color:#fff; background:rgba(0,0,0,.18); }
.header__socials svg{ width:18px; height:18px; }

.header .btn{ padding:12px 22px; font-size:14px; }
.header.solid .btn--primary{ background:#fff; color:var(--rouille); box-shadow:none; }
.header.solid .btn--primary:hover{ background:var(--noir); color:#fff; }

/* Burger */
.burger{
  display:none; margin-left:auto; width:46px; height:46px; border:0; background:transparent;
  cursor:pointer; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:6px;
}
.burger span{ display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:transform .3s ease, opacity .25s ease, background .35s ease; }
.header.solid .burger span{ background:#fff; }
.burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Menu mobile plein écran */
.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--noir);
  display:flex; flex-direction:column; justify-content:flex-start; padding:var(--header-h) 30px 40px;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu a{
  font-family:var(--font-titre); font-weight:600; font-size:clamp(1.7rem,7vw,2.4rem);
  color:#fff; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-menu a:hover{ color:var(--rouille); }
.mobile-menu a small{ font-family:var(--font-texte); font-size:12px; color:var(--rouille); letter-spacing:.2em; }
.mobile-menu .btn{ margin-top:34px; width:100%; padding:18px; font-size:16px; }
.mobile-menu .socials{ justify-content:center; margin-top:30px; }
.mobile-menu .socials a{ border-color:rgba(255,255,255,.25); }

.mobile-menu > nav{ margin-top:auto; }
.mobile-menu > *:last-child{ margin-bottom:auto; }

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  color:#fff; padding:calc(var(--header-h) + 50px) 0 90px; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; background:var(--hero-image) center/cover no-repeat; z-index:0; animation:heroZoom 18s ease-out forwards; }
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(18,17,16,.93) 0%, rgba(18,17,16,.78) 45%, rgba(18,17,16,.4) 100%);
}
.hero::after{
  content:""; position:absolute; right:-140px; top:-140px; width:560px; height:560px; z-index:1;
  background:radial-gradient(circle, rgba(183,65,14,.5), transparent 65%); filter:blur(20px);
}
.hero .wrap{ position:relative; z-index:2; }
.hero__inner{ max-width:760px; }
.hero h1{ font-size:clamp(2.6rem, 7vw, 4.9rem); font-weight:800; letter-spacing:-.03em; }
.hero h1 em{ font-style:normal; color:var(--rouille); }
.hero__sub{ font-size:clamp(1.02rem,2vw,1.2rem); color:#ddd5cb; max-width:530px; margin:24px 0 0; }
.hero__stats{
  display:flex; flex-wrap:wrap; gap:14px 46px; margin-top:56px;
  padding-top:32px; border-top:1px solid rgba(255,255,255,.16);
}
.hero__stats div strong{ display:block; font-family:var(--font-titre); font-size:2.1rem; font-weight:700; color:#fff; line-height:1; }
.hero__stats div span{ font-size:13.5px; letter-spacing:.06em; color:#b7ada2; }
.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.6);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero__scroll::after{ content:""; width:1px; height:38px; background:linear-gradient(rgba(255,255,255,.7), transparent); animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine{ 0%,100%{ opacity:.3; transform:scaleY(.6); } 50%{ opacity:1; transform:scaleY(1); } }

/* Bandeau défilant */
.marquee{ background:var(--rouille); color:#fff; padding:15px 0; overflow:hidden; }
.marquee__track{ display:flex; gap:56px; white-space:nowrap; width:max-content; animation:slide 34s linear infinite; }
.marquee span{ font-family:var(--font-titre); font-weight:600; font-size:14px; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:56px; }
.marquee span::after{ content:"●"; font-size:8px; opacity:.7; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* =========================================================
   6. PRÉSENTATION DU CENTRE
   ========================================================= */
.club__grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.club__features{ display:grid; gap:20px; margin-top:34px; }
.feature{ display:flex; gap:16px; align-items:flex-start; }
.feature__ico{
  width:44px; height:44px; flex-shrink:0; border-radius:12px; background:var(--rouille-soft);
  display:flex; align-items:center; justify-content:center; color:var(--rouille);
}
.feature__ico svg{ width:21px; height:21px; }
.feature h3{ font-size:1.05rem; font-weight:600; margin-bottom:3px; }
.feature p{ margin:0; font-size:15px; color:var(--texte-doux); }

.club__collage{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:190px 150px 190px; gap:16px; }
.club__collage .photo:nth-child(1){ grid-row:span 2; }
.club__collage .photo:nth-child(3){ grid-row:span 2; }
.club__collage .photo:hover img{ transform:scale(1.06); }

/* Galerie (optionnelle — voir le commentaire dans la section LE CLUB) */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:70px; }
.gallery .photo{ aspect-ratio:4/3; cursor:zoom-in; }
.gallery .photo:hover img{ transform:scale(1.07); }
.gallery .photo::before{
  content:""; position:absolute; inset:0; z-index:2; opacity:0;
  background:rgba(183,65,14,.25); transition:opacity .35s ease;
}
.gallery .photo:hover::before{ opacity:1; }

/* Lightbox — sert à agrandir les photos de la galerie si vous la réactivez */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(10,9,8,.94);
  display:flex; align-items:center; justify-content:center; padding:30px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(1100px,92vw); max-height:88vh; border-radius:var(--r-sm); object-fit:contain; }
.lightbox__close{
  position:absolute; top:22px; right:24px; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; font-size:24px; cursor:pointer;
  transition:background .25s ease;
}
.lightbox__close:hover{ background:var(--rouille); border-color:var(--rouille); }

/* =========================================================
   7. TARIFS
   ========================================================= */
/* Bascule heures creuses / heures pleines — placée dans la carte des sessions */
.toggle{
  display:flex; width:100%; padding:4px; background:var(--beige);
  border:1px solid var(--beige-dark); border-radius:999px; margin:0 0 22px;
}
.toggle button{
  flex:1; border:0; background:transparent; cursor:pointer; padding:10px 14px; border-radius:999px;
  font-family:var(--font-titre); font-weight:600; font-size:13.5px; color:var(--texte-doux);
  white-space:nowrap; transition:background .3s ease, color .3s ease;
}
.toggle button:hover{ color:var(--texte); }
.toggle button.on{ background:var(--rouille); color:#fff; box-shadow:0 6px 16px -8px rgba(183,65,14,.9); }

.tarifs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  background:var(--blanc); border:1px solid var(--beige-dark); border-radius:var(--r-lg);
  padding:34px 30px; position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.card:hover{ transform:translateY(-7px); box-shadow:var(--shadow); border-color:var(--rouille); }
.card:has(.card__tag) h3{ padding-right:100px; }
.card__tag{
  position:absolute; top:32px; right:26px; background:var(--rouille); color:#fff;
  font-family:var(--font-titre); font-weight:600; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; padding:6px 12px; border-radius:999px;
}
.card h3{ font-size:1.3rem; font-weight:700; margin-bottom:6px; }
.card__note{ font-size:14px; color:var(--texte-doux); margin-bottom:24px; }
.price-row{ display:flex; justify-content:space-between; align-items:baseline; padding:13px 0; border-bottom:1px dashed var(--beige-dark); }
.price-row:last-child{ border-bottom:0; }
.price-row span{ font-size:15px; color:var(--texte-doux); }
.price-row strong{ font-family:var(--font-titre); font-size:1.5rem; font-weight:700; color:var(--noir); }
.price-row strong small{ font-size:13px; font-weight:500; color:var(--texte-doux); }

.card--pack{ background:var(--noir); color:#fff; border-color:var(--noir); }
.card--pack .card__note{ color:#a89e94; }
.card--pack .price-row{ border-color:rgba(255,255,255,.14); }
.card--pack .price-row span{ color:#c9c1b8; }
.card--pack .price-row strong{ color:#fff; }
.card--pack .price-row strong small{ color:#a89e94; }
.card__old{ text-decoration:line-through; opacity:.5; font-size:1rem; margin-right:8px; font-weight:500; }

.tarifs__foot{
  margin-top:34px; display:flex; flex-wrap:wrap; gap:18px 34px; align-items:center;
  padding:24px 28px; background:var(--blanc); border-radius:var(--r-md); border:1px solid var(--beige-dark);
  font-size:14.5px; color:var(--texte-doux);
}
.tarifs__foot b{ color:var(--noir); font-family:var(--font-titre); }

/* =========================================================
   8. COURS
   ========================================================= */
.cours__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cours-card{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg); padding:30px 26px; display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background .35s ease, border-color .35s ease;
}
.cours-card:hover{ transform:translateY(-7px); background:rgba(183,65,14,.12); border-color:var(--rouille); }
.cours-card__num{ font-family:var(--font-titre); font-size:13px; font-weight:600; letter-spacing:.2em; color:var(--rouille); margin-bottom:20px; }
.cours-card h3{ font-size:1.3rem; font-weight:700; color:#fff; margin-bottom:11px; }
.cours-card p{ font-size:14.5px; color:#b7ada2; }
.cours-card ul{ margin:16px 0 24px; display:grid; gap:9px; }
.cours-card li{ display:flex; gap:9px; font-size:14px; color:#d6cec5; line-height:1.45; }
.cours-card li::before{ content:"→"; color:var(--rouille); flex-shrink:0; }
.cours-card__price{
  margin-top:auto; padding-top:20px; border-top:1px solid rgba(255,255,255,.13);
}
.cours-card__price strong{ display:block; font-family:var(--font-titre); font-size:1.85rem; font-weight:700; color:#fff; line-height:1.1; }
.cours-card__price small{ display:block; margin-top:6px; font-size:12.5px; color:#a89e94; line-height:1.5; }

/* Plusieurs tarifs côte à côte dans une carte de cours */
.cours-card .cours-card__price{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-start; }
.cours-card .cours-card__price .tarif{ flex:1 1 0; min-width:86px; }
.cours-card .cours-card__price .tarif strong{ display:block; font-family:var(--font-titre); font-size:1.85rem; font-weight:700; color:#fff; line-height:1.1; }
.cours-card .cours-card__price .tarif small{ display:block; margin-top:6px; font-size:12.5px; color:#a89e94; line-height:1.4; }

/* Unité plus petite que le montant */
.cours-card .cours-card__price .tarif strong span{
  font-size:.52em; font-weight:600; color:#a89e94; margin-left:4px;
}

/* =========================================================
   8 bis. APPLICATION MOBILE
   ========================================================= */
.app{ position:relative; overflow:hidden; }
.app__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; }
.app__list{ display:grid; gap:18px; margin:32px 0 38px; }
.app__list li{ display:flex; gap:15px; align-items:flex-start; }
.app__list h3{ font-size:1.02rem; font-weight:600; color:#fff; margin-bottom:3px; }
.app__list p{ margin:0; font-size:14.5px; color:#b7ada2; }
.app__ico{
  width:40px; height:40px; flex-shrink:0; border-radius:12px;
  background:rgba(183,65,14,.16); border:1px solid rgba(183,65,14,.45);
  display:flex; align-items:center; justify-content:center; color:var(--rouille);
}
.app__ico svg{ width:19px; height:19px; }

/* Boutons de téléchargement */
.app__stores{ display:flex; flex-wrap:wrap; gap:14px; }
.store{
  display:inline-flex; align-items:center; gap:13px; padding:11px 22px; border-radius:14px;
  background:#fff; color:var(--noir); border:1px solid #fff;
  transition:transform .25s ease, box-shadow .25s ease;
}
.store:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -18px rgba(0,0,0,.9); }
.store svg{ width:27px; height:27px; flex-shrink:0; }
.store small{ display:block; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--texte-doux); }
.store b{ display:block; font-family:var(--font-titre); font-size:16px; font-weight:700; line-height:1.2; }
.app__note{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:24px; font-size:13.5px; color:#a89e94; }
.app__note span{ display:flex; align-items:center; gap:9px; }
.app__note span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--rouille); }

/* Mockup téléphone */
.phone{ position:relative; width:min(310px,80%); margin:0 auto; }
.phone__glow{
  position:absolute; inset:-16% -26%; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(183,65,14,.5), transparent 62%); filter:blur(26px);
}
.phone__frame{
  position:relative; z-index:1; padding:11px; border-radius:46px;
  background:#0a0908; border:2px solid #3a3733;
  box-shadow:0 44px 80px -34px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone__notch{
  position:absolute; z-index:3; top:22px; left:50%; transform:translateX(-50%);
  width:98px; height:22px; border-radius:14px; background:#0a0908;
}
.phone .photo{ border-radius:36px; aspect-ratio:9/19.5; background:var(--beige-dark); }
.phone__side{ position:absolute; right:-4px; top:120px; width:3px; height:64px; border-radius:3px; background:#3a3733; z-index:2; }

/* =========================================================
   9. ENTREPRISES
   ========================================================= */
.entreprise__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:70px; align-items:center; }
.formules{ display:grid; gap:16px; }
.formule{
  background:var(--blanc); border:1px solid var(--beige-dark); border-left:4px solid var(--rouille);
  border-radius:var(--r-sm); padding:24px 26px; display:flex; gap:22px; align-items:flex-start;
  transition:transform .3s ease, box-shadow .3s ease;
}
.formule:hover{ transform:translateX(6px); box-shadow:var(--shadow-soft); }
.formule h3{ font-size:1.12rem; font-weight:600; margin-bottom:5px; }
.formule p{ margin:0; font-size:14.5px; color:var(--texte-doux); }
.formule__price{ margin-left:auto; text-align:right; flex-shrink:0; }
.formule__price strong{ font-family:var(--font-titre); font-size:1.3rem; font-weight:700; display:block; }
.formule__price small{ font-size:12px; color:var(--texte-doux); }

.entreprise__aside .photo{ aspect-ratio:4/5; border-radius:var(--r-lg); }
.entreprise__logos{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.entreprise__logos div{
  flex:1 1 120px; height:62px; border-radius:var(--r-sm); border:1px dashed var(--beige-dark);
  display:flex; align-items:center; justify-content:center; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#a08d75; background:var(--blanc);
}

/* =========================================================
   10. CONTACT
   ========================================================= */
.contact__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; }
.infos{ display:grid; gap:14px; margin:34px 0; }
.info{ display:flex; gap:16px; align-items:flex-start; }
.info__ico{
  width:42px; height:42px; flex-shrink:0; border-radius:12px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:var(--rouille);
}
.info__ico svg{ width:19px; height:19px; }
.info h3{ font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:#a89e94; font-weight:600; margin-bottom:4px; }
.info p{ margin:0; color:#fff; font-size:15.5px; }
.info a:hover{ color:var(--rouille); }

.horaires{ margin-top:28px; padding:22px 24px; border:1px solid rgba(255,255,255,.13); border-radius:var(--r-md); }
.horaires h3{ font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:#a89e94; font-weight:600; margin-bottom:14px; }
.horaires li{ display:flex; justify-content:space-between; padding:7px 0; font-size:15px; color:#d6cec5; border-bottom:1px solid rgba(255,255,255,.07); }
.horaires li:last-child{ border-bottom:0; }
.horaires li b{ color:#fff; font-weight:500; }

.form{ background:var(--blanc); border-radius:var(--r-lg); padding:38px; color:var(--texte); }
.form h3{ font-size:1.5rem; font-weight:700; margin-bottom:6px; }
.form > p{ font-size:14.5px; color:var(--texte-doux); margin-bottom:26px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; letter-spacing:.05em; margin-bottom:7px; color:var(--texte); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 16px; border:1px solid var(--beige-dark); border-radius:var(--r-sm);
  font-family:inherit; font-size:15px; color:var(--texte); background:var(--blanc);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--rouille); box-shadow:0 0 0 3px var(--rouille-soft);
}
.field textarea{ resize:vertical; min-height:110px; }
.field--2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form .btn{ width:100%; padding:16px; font-size:15.5px; margin-top:8px; }
.form__legal{ font-size:12.5px; color:var(--texte-doux); margin:16px 0 0; text-align:center; }

.map{ position:relative; margin-top:26px; border-radius:var(--r-md); overflow:hidden; border:1px solid rgba(255,255,255,.13); min-height:230px; }
.map::before{
  content:"Plan d'accès — carte à intégrer"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:16px;
  font-family:var(--font-titre); font-weight:600; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#8d857c; background:rgba(255,255,255,.05);
}
.map iframe{ position:relative; width:100%; height:230px; border:0; display:block; filter:grayscale(1) contrast(1.05); }

/* =========================================================
   11. FOOTER
   ========================================================= */
.footer{ background:var(--noir); color:#8d857c; padding:64px 0 30px; border-top:1px solid rgba(255,255,255,.09); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px; padding-bottom:44px; }
.footer h4{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.footer li{ padding:5px 0; font-size:14.5px; }
.footer a:hover{ color:var(--rouille); }
.footer__brand p{ font-size:14.5px; max-width:290px; margin-top:18px; }
.socials{ display:flex; gap:10px; margin-top:22px; }
.socials a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.socials a:hover{ background:var(--rouille); border-color:var(--rouille); color:#fff; transform:translateY(-3px); }
.socials svg{ width:17px; height:17px; }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.09); padding-top:24px;
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; font-size:13.5px;
}

/* Bouton réserver flottant (mobile) */
.sticky-cta{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:90; display:none;
  transform:translateY(120%); transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.sticky-cta.show{ transform:none; }
.sticky-cta .btn{ width:100%; padding:16px; font-size:15.5px; box-shadow:0 12px 34px -12px rgba(183,65,14,.85); }

/* =========================================================
   12. RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .nav a{ padding:10px 10px; font-size:14.5px; }
  .club__grid, .entreprise__grid, .contact__grid, .app__grid{ grid-template-columns:1fr; gap:48px; }
  .app__grid{ gap:56px; }
  .phone{ width:min(300px,78%); }
  .cours__grid{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
}
/* En dessous de 1000 px le menu passe en burger : 6 entrées + le bouton
   « Réserver » ne tiennent plus confortablement sur une seule ligne. */
@media (max-width:1050px){
  .nav, .header .btn--header, .header__socials{ display:none; }
  .burger{ display:flex; }
  .sticky-cta{ display:block; }
}
@media (max-width:900px){
  :root{ --header-h:70px; }
  .section{ padding:80px 0; }
  .tarifs__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ padding:0 20px; }
  .section{ padding:68px 0; }
  .section-head{ margin-bottom:40px; }
  .hero__stats{ gap:22px 32px; margin-top:44px; }
  .hero__stats div strong{ font-size:1.7rem; }
  .club__collage{ grid-template-rows:150px 120px 150px; gap:12px; }
  .store{ flex:1 1 100%; }
  .cours__grid{ grid-template-columns:1fr; }
  .card, .cours-card, .form{ padding:28px 22px; }
  .formule{ flex-wrap:wrap; gap:14px; }
  .formule__price{ margin-left:0; text-align:left; }
  .field--2{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .toggle button{ padding:11px 8px; font-size:13px; }
}

/* =========================================================
   13. PAGES INTERNES (reservation, mentions legales, etc.)
   ========================================================= */
.page-hero{ background:var(--noir); color:#fff; padding:calc(var(--header-h) + 80px) 0 70px; }
.page-hero h1{ font-size:clamp(2.1rem,5vw,3.4rem); font-weight:800; }
.page-hero p{ color:#b7ada2; margin-top:14px; max-width:620px; }
.page-content{ padding:70px 0 100px; }
.page-content .entry{ max-width:760px; }
.page-content h2{ font-size:1.7rem; font-weight:700; margin:38px 0 14px; }
.page-content h3{ font-size:1.25rem; font-weight:600; margin:28px 0 10px; }
.page-content ul{ list-style:disc; padding-left:22px; margin-bottom:1em; }
.page-content li{ margin-bottom:6px; }
.page-content a{ color:var(--rouille); text-decoration:underline; }
.page-content img{ border-radius:var(--r-md); margin:20px 0; }
.page-content table{ width:100%; border-collapse:collapse; margin:20px 0; }
.page-content th, .page-content td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--beige-dark); }
.page-content blockquote{ border-left:4px solid var(--rouille); padding-left:20px; margin:24px 0; color:var(--texte-doux); }
.alignwide, .alignfull{ margin-left:auto; margin-right:auto; }
.wp-caption-text, .wp-element-caption{ font-size:13.5px; color:var(--texte-doux); }
.logo__img{ height:46px; width:auto; }
.page-links, .pagination, .nav-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.pagination a, .pagination span, .nav-links a, .nav-links span{
  padding:9px 15px; border:1px solid var(--beige-dark); border-radius:var(--r-sm);
  font-family:var(--font-titre); font-weight:600; font-size:14px; text-decoration:none;
}
.pagination .current, .nav-links .current{ background:var(--rouille); border-color:var(--rouille); color:#fff; }