/* ============================================================
   Golf de la Jonchère — habillage graphique
   Posé par-dessus la structure d'origine : formes, accents et
   typographie de la charte Jonchère. Aucune structure modifiée.
   ============================================================ */

:root{
  --leaf:#12A85A; --leaf-deep:#0B7C41; --leaf-tint:#D6F2E1;
  --sun:#FFC63C; --sun-ink:#3A2A00;
  --r-pill:999px; --r-card:26px; --r-soft:16px;
}

/* ---------- typographie ---------- */
h1,h2,h3,h4,.hero-stat-value,.as-price-tag,.footer-brand{
  font-family:'Bricolage Grotesque','Figtree',sans-serif;
  font-weight:700; letter-spacing:-.035em; font-style:normal;
}
body,p,li,td,th,input,textarea,select,button,.btn{font-family:'Figtree',sans-serif}
.eyebrow{font-weight:700;letter-spacing:.11em;text-transform:uppercase;font-style:normal;color:var(--leaf-deep)}
.hero .eyebrow{color:var(--leaf)}

/* variantes du second membre du titre d'accueil */
.hero h1 em,.hero h1 i,.hero h1 span,.hero h1 .accent{color:var(--leaf);font-style:normal}

/* ---------- boutons en pilule ---------- */
.btn,.btn-primary,.btn-outline,.btn-sage,.btn-nav-member,button[type=submit],input[type=submit]{
  border-radius:var(--r-pill)!important; font-weight:700; letter-spacing:0;
  text-transform:none; padding:13px 26px; transition:transform .16s,background .16s,color .16s;
}
.btn:hover,.btn-primary:hover,.btn-sage:hover,.btn-outline:hover{transform:translateY(-1px)}
.btn-primary{background:var(--leaf);color:#04170D;border-color:var(--leaf)}
.btn-primary:hover{background:var(--leaf-deep);color:#fff;border-color:var(--leaf-deep)}
.btn-sage{background:var(--sun);color:var(--sun-ink);border-color:var(--sun)}
.btn-sage:hover{background:var(--sun);filter:brightness(1.06);color:var(--sun-ink)}
.btn-outline{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.42);backdrop-filter:blur(8px)}
.btn-outline:hover{background:rgba(255,255,255,.26);color:#fff}
.btn-nav-member{background:var(--leaf);color:#04170D;border-color:var(--leaf)}

/* ---------- formes douces ---------- */
.about-visual,.as-visual,.cours-card,.cours-card-img,.clubhouse-item,.clubhouse-item-img,
.contact-form,.contact-portrait,.parcours-visual,.practice-visual,.membre-visual,
.tarif-wrap,.tarif-table,.blog-card,.album-card,.promo-card{
  border-radius:var(--r-card)!important; overflow:hidden;
}
.form-field input,.form-field textarea,.form-field select,input[type=text],input[type=email],
input[type=tel],textarea,select{border-radius:var(--r-soft)!important}
.about-badge,.as-price-tag,.card-link,.tag,.chip,.pill{border-radius:var(--r-pill)!important}

/* ---------- accents ---------- */
.about-badge{background:var(--leaf-tint);color:var(--leaf-deep);font-weight:700}
.as-price-tag{background:var(--sun);color:var(--sun-ink)}
.card-link,a.card-link{color:var(--leaf-deep);font-weight:700}
.hero-stat-value{color:var(--sun)}
.hero-stat-label{font-weight:600;letter-spacing:.04em}

/* ---------- listes à puces vertes ---------- */
.about-pillars li::marker,.clubhouse-item-body li::marker,.membre-list li::marker{color:var(--leaf)}

/* ---------- liens ---------- */
a{transition:color .16s}
.footer-col a:hover,.nav-link:hover{color:var(--sun)}

/* Second membre du titre d'accueil : <strong> dans le h1.
   En vert et non en jaune : le jaune se noyait dans le ciel clair de la
   video de fond. Meme traitement que les bannieres des autres pages. */
.hero h1 strong,.hero h1 b{color:var(--leaf);font-weight:700;font-style:normal;display:block}

/* ============================================================
   Carte d'un trou : plan vertical à gauche,
   vidéo 16/9 puis texte en dessous à droite.
   ============================================================ */
.hole-body{
  grid-template-columns:minmax(240px,.78fr) minmax(340px,1.42fr)!important;
  gap:1.75rem 2rem!important; align-items:start!important;
}
.hole-main{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.hole-plan{border-radius:var(--r-soft);overflow:hidden;background:#fff}
.hole-plan img{width:100%;height:auto;display:block}
.hole-video{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-card);
  overflow:hidden;background:#0B3324;
}
.hole-video iframe,.hole-video video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;
}
.hole-video.no-video{display:none}
.hole-text{min-width:0}
.hole-text p{margin-top:.75rem;line-height:1.65;max-width:62ch}
.hole-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.hole-pill{background:var(--leaf-tint);color:var(--leaf-deep);border-radius:var(--r-pill);
  padding:5px 13px;font-weight:700;font-size:.85rem}
.hole-card.signature .hole-pill{background:rgba(255,198,60,.22);color:#7A5A00}

@media (max-width:900px){
  .hole-body{grid-template-columns:1fr!important}
  .hole-plan{max-width:340px;margin:0 auto}
}

/* le plan porte déjà par, HCP et distances : on le laisse respirer */
.hole-plan{max-width:420px}
.hole-plan-label{top:.6rem;left:.6rem}

/* --- plan du trou : image entière, jamais rognée ---------------------------
   Le gabarit d'origine imposait un cadre en 4/5 avec overflow:hidden ; les
   plans de la Jonchère sont en 810x986 (~4/4,87), le bas était donc coupé. */
.hole-plan{
  aspect-ratio:auto!important;
  height:auto!important;
  overflow:visible!important;
  background:#fff;
  border-radius:var(--r-soft);
  padding:10px 10px 6px;
  box-shadow:0 2px 14px rgba(11,51,36,.07);
}
.hole-plan img{
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  display:block;
}
.hole-plan-label{position:absolute;top:14px;left:14px;z-index:2}
.hole-plan-zoom{position:absolute;top:14px;right:14px;z-index:2}

/* réseaux sociaux non renseignés : on masque plutôt qu'un lien mort */
.topbar-socials a[href="#"]{display:none}


/* ============================================================
   Correctifs page École & Cours
   ============================================================ */

/* .btn-outline est dessiné pour un fond sombre (texte blanc sur voile
   blanc translucide) : sur la carte blanche d'une offre il devenait
   invisible. On lui redonne le contraste inverse. */
.offer-card .btn-outline{
  color: var(--green-deep) !important;
  background: transparent !important;
  border-color: rgba(11,51,36,.30) !important;
}
.offer-card .btn-outline:hover,
.offer-card .btn-outline:focus-visible{
  color: var(--cream) !important;
  background: var(--green-deep) !important;
  border-color: var(--green-deep) !important;
}

/* Portraits des moniteurs : le gabarit des offres réserve une image très
   haute, disproportionnée pour un visage. */
.enseignants .offer-img,
.enseignants .offer-img .media-slot{
  height: 300px !important;
  aspect-ratio: auto !important;
}
.enseignants .offer-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30%;
}
@media (max-width: 700px){
  .enseignants .offer-img,
  .enseignants .offer-img .media-slot{ height: 240px !important; }
}

/* ============================================================
   Bannière vidéo de la page École & Cours
   ============================================================ */
/* Hauteur calée sur le rapport des bandeaux (2,57:1) : à 100% de large,
   la vidéo occupe 38,9% de hauteur. On vise un peu au-dessus pour laisser
   respirer le texte, ce qui ne coupe plus que quelques pour cent. */
.page-hero{
  min-height: clamp(400px, 40vw, 660px);
  display: flex; align-items: flex-end;
}
.page-hero > .container{ position: relative; z-index: 2; width: 100%; }

.page-hero-media{
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; background: var(--green-deep);
}
.page-hero-media img,
.page-hero-media video{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* voile sombre : sans lui, le titre crème devient illisible sur une image claire */
.page-hero-overlay{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(7,23,15,.12) 0%,
    rgba(7,23,15,.30) 50%,
    rgba(7,23,15,.62) 100%);
}
/* Bannière posée sur une image très claire (ciel bleu, plein soleil) : un
   dégradé venu de la gauche porte le titre sans assombrir toute la photo.
   Le côté droit reste lumineux. */
.page-hero-clair .page-hero-overlay{
  background:
    linear-gradient(90deg,
      rgba(7,23,15,.58) 0%,
      rgba(7,23,15,.34) 34%,
      rgba(7,23,15,0) 66%),
    linear-gradient(180deg,
      rgba(7,23,15,.10) 0%,
      rgba(7,23,15,.22) 50%,
      rgba(7,23,15,.50) 100%);
}

/* Bannière en mosaïque (Association Sportive) : les tuiles sont lumineuses
   et le titre est long. Le dégradé est ici calculé sur la largeur de l'écran
   et non gravé dans l'image : sur téléphone, où la mosaïque est recadrée au
   centre, le titre reste porté. */
.page-hero-mosaique .page-hero-overlay{
  background:
    linear-gradient(90deg,
      rgba(7,23,15,.84) 0%,
      rgba(7,23,15,.74) 26%,
      rgba(7,23,15,.46) 52%,
      rgba(7,23,15,.12) 72%,
      rgba(7,23,15,0) 100%),
    linear-gradient(180deg,
      rgba(7,23,15,.10) 0%,
      rgba(7,23,15,.20) 50%,
      rgba(7,23,15,.46) 100%);
}

/* ESSAI — titres de bannière entièrement en blanc.
   La seconde ligne des titres était en vert (et en jaune sur l'accueil).
   Pour revenir en arrière, il suffit de supprimer ce bloc : les couleurs
   d'origine sont définies dans chaque page et reprendront la main.
   Les surtitres (« NOUS CONTACTER », « ASSOCIATION SPORTIVE »…) restent
   verts : ce sont eux qui portent la couleur de la marque dans le bandeau. */
.hero h1, .hero h1 strong, .hero h1 b, .hero h1 em, .hero h1 i, .hero h1 span, .hero h1 .accent,
.page-hero h1, .page-hero h1 strong, .page-hero h1 b{
  color: #fff;
}
/* Le surtitre suit. Son petit trait passe en blanc translucide : en blanc plein
   il pesait autant que le mot qu'il annonce. */
.hero .eyebrow,
.page-hero .eyebrow{
  color: #fff;
}
.hero .eyebrow::before,
.page-hero .eyebrow::before{
  background: rgba(255,255,255,.7);
}

/* Ombrage des textes de bannière. Les fonds sont des vidéos et des photos
   dont la luminosité change d'un instant à l'autre : le voile seul ne suffit
   pas toujours. Deux ombres superposées — une courte qui détache la lettre,
   une large et diffuse qui pose un halo — plutôt qu'une ombre portée nette,
   qui se verrait. */
.hero h1,
.page-hero h1{
  text-shadow: 0 2px 4px rgba(7,23,15,.34), 0 8px 30px rgba(7,23,15,.44);
}
.hero .eyebrow,
.hero .lead,
.hero p.lead,
.hero .hero-subtitle,
.hero .location-tag,
.hero .region-tag,
.page-hero .eyebrow,
.page-hero p.lead,
.page-hero .container > p,
.page-hero .container > p > a{
  text-shadow: 0 1px 3px rgba(7,23,15,.48), 0 3px 14px rgba(7,23,15,.40);
}

/* la pastille décorative passerait par-dessus la vidéo */
.page-hero::before{ display: none !important; }

@media (max-width: 900px){
  .page-hero{ min-height: 52vh; }
}

/* Portraits des moniteurs : les vidéos sont carrées, le cadre l'est aussi
   pour éviter tout recadrage inutile. */
.enseignants .offer-img,
.enseignants .offer-img .media-slot{
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}
@media (max-width: 700px){
  .enseignants .offer-img,
  .enseignants .offer-img .media-slot{ height: auto !important; aspect-ratio: 1 / 1 !important; }
}


/* Bannière d'accueil : même calage. Elle était à 92vh, ce qui imposait
   d'agrandir le bandeau au point d'en perdre 40% sur les côtés. */
.hero{
  min-height: clamp(480px, 40vw, 780px) !important;
  padding-top: clamp(3.5rem, 5vw, 4.5rem) !important;
}
/* La hauteur réelle du hero est dictée par son contenu, pas par le min-height :
   on resserre donc le bloc de titre, sinon le bandeau reste très rogné. */
.hero .hero-logo{ margin-bottom: 1rem !important; }
.hero h1{
  font-size: clamp(2.3rem, 5vw, 4.4rem) !important;
  margin-bottom: 1.1rem !important;
}
.hero p.lead{ margin-bottom: 1.75rem !important; }
@media (max-width: 900px){
  .hero{ min-height: 68vh !important; }
}


/* Section practice de l'accueil : les vidéos du club sont tournées au format
   carré. Le cadre l'était en 16/9, ce qui en coupait 44% en hauteur. Les deux
   cartes passent donc en carré — pour revenir au format large, supprimer ce bloc. */
.practice-img,
.practice-img .media-slot{
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

/* ============================================================
   Bannières vidéo — lisibilité et transition
   ============================================================ */

/* La page Parcours plafonnait son voile à 10% d'opacité, la page École le
   laissait à 100% : deux comportements pour le même gabarit. On unifie, sinon
   le titre crème devient illisible sur une image claire. */
.page-hero-overlay,
.page-hero-media:empty + .page-hero-overlay{
  opacity: 1 !important;
}

/* L'image de repli reste sous l'iframe le temps du chargement du lecteur,
   puis s'efface en fondu. Sans cela on voit un rectangle vide pendant
   plusieurs centaines de millisecondes. */
/* (pas de position:relative global ici : .page-hero-media est en absolute,
   une règle trop large casserait la mise en page des bannières) */
.media-slot > img,
.media-slot > video{ z-index: 0; }
.media-slot > iframe{ z-index: 1; }

/* ============================================================
   Bannière d'accueil — répartition sur deux colonnes
   ============================================================ */

/* Le logo était repris en grand au milieu de la bannière, en filigrane
   au-dessus de la vidéo, alors qu'il figure déjà dans l'en-tête juste
   au-dessus. Il flottait sans point d'accroche : on le retire. */
.hero .hero-logo{ display: none !important; }

/* Un peu d'air entre le contenu et le bandeau de chiffres, qui rognait
   le bas de l'encart compétitions. */
.hero .hero-inner{ padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 1000px){
  /* Tout était empilé dans la colonne de gauche, laissant la moitié droite
     de l'image vide et repoussant l'agenda hors du cadre. On sépare :
     le discours à gauche, l'agenda à droite, alignés sur la même ligne de base. */
  .hero .hero-inner{
    display: grid;
    grid-template-columns: minmax(0, 1.34fr) minmax(280px, 0.66fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: end;
  }
  .hero .hero-inner > .eyebrow          { grid-column: 1; grid-row: 1; }
  .hero .hero-inner > h1                { grid-column: 1; grid-row: 2; }
  .hero .hero-inner > .lead             { grid-column: 1; grid-row: 3; }
  .hero .hero-inner > .hero-ctas        { grid-column: 1; grid-row: 4; }
  .hero .hero-inner > .hero-comp-rappel {
    grid-column: 2; grid-row: 2 / 5;
    align-self: end;
    margin-top: 0;
    max-width: none;
    width: 100%;
  }

  /* Dans une colonne étroite, les pastilles se lisent mieux l'une sous
     l'autre qu'en ligne : plus de troncature des noms de compétitions. */
  .hero .hero-comp-rappel .hcr-chips{ flex-direction: column; align-items: stretch; }
  .hero .hero-comp-rappel a.hcr-chip{ justify-content: flex-start; }
  .hero .hero-comp-rappel a.hcr-chip .hcr-name{ max-width: none; }

  /* Le chapeau peut respirer, il n'est plus contraint par l'encart. */
  .hero .hero-inner > .lead{ max-width: 56ch; }
}

/* ============================================================
   Grille tarifaire
   ============================================================ */

/* Note passée sous un tableau (période de validité, tarifs de fin de saison). */
.tarif-note-bloc{
  margin: 1rem 0 0;
  padding: 0.85rem 1.1rem;
  background: var(--sage-pale, #D6F2E1);
  border-left: 3px solid var(--leaf, #12A85A);
  border-radius: 0 8px 8px 0;
  color: var(--green-deep, #0B3324);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Le tableau des cotisations a quatre colonnes : la seconde ne contient que
   « Individuel » ou « Couple », inutile de la laisser se couper en deux. */
.tarif-table td.note{ white-space: nowrap; }
@media (max-width: 560px){
  .tarif-table td.note{ white-space: normal; }
}

/* ============================================================
   Page Devenir membre — cartes de cotisation
   ============================================================ */

/* Cinq cartes sur la première ligne (individuels puis couples, puis les
   jeunes), deux sur la seconde. La grille en auto-fill donnait un nombre
   de colonnes variable selon la largeur exacte de la fenêtre. */
/* Neuf formules, trois par catégorie : une ligne par catégorie se lit
   beaucoup mieux qu'un enroulement automatique qui coupe les couples en
   deux. Ligne 1 les individuels, ligne 2 les couples, ligne 3 les jeunes
   et l'offre découverte. */
@media (min-width: 960px){
  .mb-formules{
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* La carte « Un mois illimité » est un lien vers l'offre détaillée. */
a.mb-formule-lien{
  text-decoration: none;
  color: inherit;
  display: block;
}
a.mb-formule-lien .per{ color: var(--green, #1C6B45); font-weight: 600; }
a.mb-formule-lien:focus-visible{
  outline: 3px solid var(--leaf, #12A85A);
  outline-offset: 3px;
}

/* L'offre découverte n'est pas une cotisation : elle partage la ligne des
   individuels mais doit se distinguer au premier coup d'œil. Carte pleine,
   sur fond vert profond, là où les autres sont blanches. */
.mb-formule-offre{
  background: var(--green-deep, #0B3324) !important;
  border-color: var(--green-deep, #0B3324) !important;
  border-top-color: var(--sun, #FFC63C) !important;
  box-shadow: 0 10px 30px rgba(11,51,36,.22);
}
.mb-formule-offre .cat{ color: var(--sun, #FFC63C) !important; }
.mb-formule-offre .name,
.mb-formule-offre .price{ color: var(--cream, #F2F6F0) !important; }
.mb-formule-offre .price sup{ color: var(--cream, #F2F6F0); }
a.mb-formule-offre .per{ color: var(--sun, #FFC63C) !important; }
.mb-formule-offre:hover{ box-shadow: 0 16px 40px rgba(11,51,36,.30); }

/* ============================================================
   Le Pitch & Putt (page Le Parcours, section #pitchputt)
   ============================================================ */
.compact9{ background:var(--cream, #F2F6F0); padding:clamp(3.5rem,7vw,6rem) 0; }
.c9-head{ max-width:760px; margin-bottom:clamp(2rem,4vw,3rem); }
.c9-head h2{
  font-family:'Fraunces',serif; font-style:normal; font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem); line-height:1.1;
  color:var(--green-deep); margin:.4rem 0 1rem;
}
.c9-head h2 em{ font-style:italic; color:var(--leaf-deep, #0B7C41); }
.c9-lead{ color:var(--ink-soft); font-size:1.05rem; line-height:1.65; }

.c9-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(1.8rem,4vw,3.2rem); align-items:start; }

.c9-plan .media-slot{ position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-med); background:var(--sage-pale); aspect-ratio:4/3; }
.c9-plan .media-slot img,
.c9-plan .media-slot video,
.c9-plan .media-slot iframe{ width:100%; height:100%; object-fit:cover; display:block; }
.c9-plan-cap{ display:block; margin-top:.7rem; font-size:.9rem; color:var(--ink-soft); }

.c9-chiffres{ display:flex; gap:clamp(1.2rem,3vw,2.4rem); flex-wrap:wrap; padding-bottom:1.4rem; margin-bottom:1.4rem; border-bottom:1px solid var(--sage-pale); }
.c9-chiffres div{ display:flex; flex-direction:column; }
.c9-chiffres strong{ font-family:'Fraunces',serif; font-size:2.1rem; line-height:1; color:var(--green-deep); }
.c9-chiffres span{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-top:.3rem; }

.c9-infos h3{ font-family:'Outfit',sans-serif; font-weight:600; font-size:1.05rem; color:var(--green-deep); margin:1.6rem 0 .7rem; }
.c9-infos h3:first-of-type{ margin-top:0; }

/* légende de tableau destinée aux lecteurs d'écran, invisible à l'œil */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

.c9-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.c9-table{ width:100%; min-width:460px; border-collapse:collapse; font-size:.92rem; }
.c9-table th, .c9-table td{ padding:.5rem .35rem; text-align:center; border-bottom:1px solid var(--sage-pale); }
.c9-table thead th{ background:var(--green-deep); color:var(--cream); font-weight:600; }
.c9-table thead th:first-child, .c9-table tbody th{ text-align:left; padding-left:.7rem; }
.c9-table tbody th{ font-weight:600; color:var(--ink-soft); background:var(--sage-pale); }
.c9-table .tot{ font-weight:700; color:var(--green-deep); background:rgba(18,168,90,.10); }
.c9-table thead .tot{ color:var(--cream); background:var(--leaf-deep, #0B7C41); }

.c9-note{ font-size:.9rem; color:var(--ink-soft); margin-top:.7rem; }
.c9-note a{ color:var(--leaf-deep, #0B7C41); text-decoration:underline; }

.c9-acces{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.c9-acces li{ display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:.2rem 1rem; align-items:baseline;
  padding:.65rem .9rem; background:#fff; border:1px solid var(--sage-pale); border-radius:10px; }
.c9-acces strong{ color:var(--green-deep); font-size:.95rem; }
.c9-acces span{ color:var(--ink-soft); font-size:.93rem; }

.c9-boutons{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem; }
.c9-boutons .btn-outline{ color:var(--green-deep) !important; border-color:var(--green-deep) !important; }
.c9-boutons .btn{ display:inline-flex; align-items:center; gap:.55rem; }

/* sans min-width:0, la colonne refuse de rétrécir sous la largeur du tableau
   et c'est toute la page qui se met à glisser latéralement sur téléphone. */
.c9-grid > *{ min-width:0; }

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

/* ============================================================
   Les deux autres façons de voir le parcours (360° et 3D)
   ============================================================ */
.voir-parcours{ padding-top:0 !important; }
.vp-bloc{ text-align:center; padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,3vw,2rem);
  background:#fff; border:1px solid var(--sage-pale); border-radius:16px; }
.vp-intro{ color:var(--ink-soft); font-size:1rem; margin:0 0 1.2rem; }
.vp-boutons{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; }
.vp-boutons .btn{ display:inline-flex; align-items:center; gap:.55rem; }
.vp-boutons .btn-outline{ color:var(--green-deep) !important; border-color:var(--green-deep) !important; }
.vp-pastille{ display:inline-flex; align-items:center; justify-content:center;
  min-width:2.4rem; padding:.1rem .45rem; border-radius:100px; font-size:.7rem; font-weight:700;
  letter-spacing:.04em; background:rgba(255,255,255,.22); }
.vp-boutons .btn-outline .vp-pastille{ background:var(--sage-pale); color:var(--green-deep); }
.vp-ext{ font-size:.85em; opacity:.75; }
@media (max-width:560px){ .vp-boutons .btn{ width:100%; justify-content:center; } }

/* ============================================================
   Carrousel « la vie du club » — page Association Sportive
   Fondu enchaîné plutôt que défilement : sur une colonne étroite,
   le glissement latéral donne le mal de mer.
   ============================================================ */
.vc-carrousel{ position:relative; isolation:isolate; }
.vc-piste{ position:absolute; inset:0; touch-action:pan-y; }

.vc-slide{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity .9s ease, visibility 0s linear .9s;
}
.vc-slide.is-active{ opacity:1; visibility:visible; transition:opacity .9s ease, visibility 0s; z-index:1; }
.vc-slide img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); transition:transform 6s ease-out; }
.vc-slide.is-active img{ transform:scale(1); }

.vc-slide figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:2.6rem 7.5rem 1rem 1.1rem;   /* la place à droite est pour les pastilles */
  color:#fff; font-size:.95rem; line-height:1.35;
  text-shadow:0 1px 3px rgba(7,23,15,.55);
  background:linear-gradient(to top, rgba(7,23,15,.78), rgba(7,23,15,.42) 45%, rgba(7,23,15,0));
  transform:translateY(6px); opacity:0; transition:transform .6s ease .15s, opacity .6s ease .15s;
}
.vc-slide.is-active figcaption{ transform:none; opacity:1; }

/* flèches : discrètes, elles ne sortent qu'au survol ou au clavier */
.vc-fleche{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border:0; border-radius:50%;
  background:rgba(7,23,15,.42); color:#fff; font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; transition:opacity .25s, background .2s;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.vc-fleche span{ margin-top:-3px; }
.vc-prec{ left:.6rem; } .vc-suiv{ right:.6rem; }
.vc-carrousel:hover .vc-fleche, .vc-fleche:focus-visible{ opacity:1; }
.vc-fleche:hover{ background:rgba(7,23,15,.68); }
.vc-fleche:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* pastilles : la courante s'allonge et se remplit au rythme du défilement */
/* pastilles en bas à droite : au centre, elles tombaient sur la légende */
.vc-puces{ position:absolute; right:1.1rem; bottom:1.15rem; z-index:4;
  display:flex; align-items:center; gap:.35rem; }
.vc-puce{
  width:8px; height:8px; padding:0; border:0; border-radius:100px; cursor:pointer;
  background:rgba(255,255,255,.45); position:relative; overflow:hidden;
  transition:width .35s ease, background .25s;
}
.vc-puce:hover{ background:rgba(255,255,255,.75); }
.vc-puce.is-active{ width:26px; background:rgba(255,255,255,.4); }
.vc-puce:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.vc-puce.is-active::after{
  content:""; position:absolute; inset:0; width:0; background:#fff; border-radius:100px;
}
.vc-anime .vc-puce.is-active::after{ animation:vc-remplir 5.2s linear forwards; }
@keyframes vc-remplir{ from{ width:0; } to{ width:100%; } }

@media (hover:none){ .vc-fleche{ opacity:1; } }

@media (max-width:520px){
  .vc-slide figcaption{ padding-right:1.1rem; padding-bottom:2.4rem; }
  .vc-puces{ left:1.1rem; right:auto; bottom:.8rem; }
}

@media (prefers-reduced-motion: reduce){
  .vc-slide, .vc-slide img, .vc-slide figcaption{ transition:none; }
  .vc-slide img{ transform:none; }
  .vc-puce.is-active::after{ animation:none; width:100%; }
}

/* ============================================================
   Renvoi vers l'academie Up to Golf (page Ecole & Cours)
   ============================================================ */
.utg-cta{
  margin-top:clamp(1.8rem,4vw,2.8rem);
  padding:clamp(1.2rem,3vw,1.7rem) clamp(1.3rem,3vw,2rem);
  border:1px solid rgba(242,246,240,.20); border-radius:16px;
  background:rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem,3vw,2rem); flex-wrap:wrap;
}
.utg-cta p{ margin:0; color:rgba(242,246,240,.86); font-size:1rem; line-height:1.55; max-width:56ch; }
.utg-cta .btn{ flex-shrink:0; }
.utg-ext{ display:inline-block; margin-left:.4rem; transition:transform .25s ease; }
.utg-cta .btn:hover .utg-ext{ transform:translate(2px,-2px); }

@media (max-width:700px){
  .utg-cta{ flex-direction:column; align-items:flex-start; }
  .utg-cta .btn{ width:100%; text-align:center; justify-content:center; }
}

/* ============================================================
   Tarifs des cours (page École & Cours)
   ============================================================ */
.tarifs-cours{ background:var(--cream, #F2F6F0); }
.tc-head{ max-width:70ch; margin-bottom:clamp(1.8rem,4vw,2.6rem); }
.tc-head h2{ font-family:'Fraunces',serif; font-style:normal; font-weight:400;
  font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--green-deep); margin:.35rem 0 .8rem; }
.tc-lead{ color:var(--ink-soft); line-height:1.6; }

.tc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1.1rem; }

.tc-carte{ background:#fff; border:1px solid var(--sage-pale); border-radius:14px;
  padding:1.3rem 1.3rem 1.1rem; display:flex; flex-direction:column; }
.tc-carte h3{ font-family:'Outfit',sans-serif; font-weight:600; font-size:1.02rem;
  color:var(--green-deep); margin:0 0 .8rem; padding-bottom:.6rem;
  border-bottom:2px solid var(--sage-pale); }
.tc-carte ul{ list-style:none; margin:0; padding:0; }
.tc-carte li{ display:flex; align-items:baseline; gap:.6rem; padding:.42rem 0;
  border-bottom:1px solid rgba(18,168,90,.10); }
.tc-carte li:last-child{ border-bottom:0; }
.tc-carte li span{ color:var(--ink-soft); font-size:.93rem; line-height:1.3; }
.tc-carte li b{ margin-left:auto; white-space:nowrap; font-weight:700;
  color:var(--green-deep); font-size:1rem; }
.tc-carte li.tc-sous span{ padding-left:.9rem; font-size:.88rem; opacity:.85; }
.tc-carte li.tc-sous b{ font-size:.93rem; font-weight:600; }

.tc-note{ margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--sage-pale);
  font-size:.84rem; line-height:1.45; color:var(--ink-soft); opacity:.9; }

.tc-annee{ background:linear-gradient(160deg, rgba(18,168,90,.08), rgba(18,168,90,.02));
  border-color:rgba(18,168,90,.30); }

.tc-source{ margin-top:1.4rem; font-size:.88rem; color:var(--ink-soft); }
.tc-source a{ color:var(--leaf-deep, #0B7C41); text-decoration:underline; white-space:nowrap; }

/* ============================================================
   Matériel & fitting (page d'accueil, section #materiel)
   La boutique Up to Golf, entre le club house et « Devenir membre ».
   ============================================================ */
.materiel{ background:#fff; padding:clamp(3.5rem,7vw,6rem) 0; }

.mat-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(1.8rem,4vw,3.4rem); align-items:center; }
.mat-grid > *{ min-width:0; }

.mat-visuel .media-slot{ position:relative; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-med); background:var(--sage-pale); aspect-ratio:4/3; }
.mat-visuel .media-slot img,
.mat-visuel .media-slot video,
.mat-visuel .media-slot iframe{ width:100%; height:100%; object-fit:cover; display:block; border:0; }
.mat-visuel-cap{ display:block; margin-top:.7rem; font-size:.9rem; color:var(--ink-soft); }

.mat-corps h2{
  font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.12;
  color:var(--green-deep); margin:.4rem 0 1rem;
}
.mat-corps h2 strong{ display:block; font-weight:400; font-style:italic; color:var(--leaf-deep, #0B7C41); }
.mat-lead{ color:var(--ink-soft); font-size:1.05rem; line-height:1.65; }

.mat-points{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:.7rem; }
.mat-points li{ padding:.8rem 1rem; background:var(--cream, #F2F6F0);
  border:1px solid var(--sage-pale); border-radius:10px; }
.mat-points strong{ display:block; color:var(--green-deep); font-size:.95rem; margin-bottom:.2rem; }
.mat-points span{ display:block; color:var(--ink-soft); font-size:.93rem; line-height:1.55; }

.mat-marques{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--sage-pale); }
.mat-marques-label{ display:block; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft); margin-bottom:.4rem; }
.mat-marques p{ margin:0; color:var(--green-deep); font-size:.95rem; line-height:1.7; }

.mat-boutons{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; }
.mat-boutons .btn-outline{ color:var(--green-deep) !important; border-color:var(--green-deep) !important; }
.mat-ext{ font-size:.85em; margin-left:.15em; }

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

/* ============================================================
   Le club associatif (accueil, section #as)
   L'étiquette n'annonce plus un prix mais le fait que l'adhésion
   à l'association est comprise dans l'abonnement au club.
   ============================================================ */
.as-price-tag.as-price-gratuit .as-price-amount{
  font-size:1.7rem; letter-spacing:.01em; text-transform:uppercase;
}
.as-price-tag.as-price-gratuit .as-price-period{ font-size:.86rem; line-height:1.35; }
@media (max-width:520px){
  .as-price-tag.as-price-gratuit{ padding:.9rem 1.2rem; gap:.75rem; }
  .as-price-tag.as-price-gratuit .as-price-amount{ font-size:1.4rem; }
}

/* ============================================================
   Page Compétitions — les prochaines épreuves dans l'en-tête
   ============================================================ */
.hero-comps{ margin-top:1.6rem; max-width:920px; }
.hero-comps-chargement,
.hero-comps-vide{ color:rgba(242,246,240,.72); font-size:.95rem; }
.hero-comps-vide a{ color:#fff; text-decoration:underline; }

.hero-comps-label{ display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.1em; font-weight:600;
  color:#fff; margin-bottom:.75rem; text-shadow:0 1px 3px rgba(7,23,15,.5); }
.hero-comps-label .dot{ width:8px; height:8px; border-radius:50%; background:var(--sage,#12A85A);
  box-shadow:0 0 0 4px rgba(18,168,90,.28); }

.hero-comps-liste{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.7rem; }
.hero-comps-liste > *{ min-width:0; }

.hero-comps-carte{ display:flex; gap:.85rem; align-items:flex-start; text-decoration:none;
  padding:.8rem .95rem; border-radius:12px;
  background:rgba(255,255,255,.93); box-shadow:0 6px 22px rgba(7,23,15,.28);
  transition:transform .15s, box-shadow .15s; }
.hero-comps-carte:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(7,23,15,.34); }

.hero-comps-date{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:46px; padding:.25rem .3rem; border-radius:8px;
  background:var(--green-deep,#0B3324); color:var(--cream,#F2F6F0); line-height:1.05; }
.hero-comps-date strong{ font-family:'Fraunces',serif; font-size:1.4rem; font-weight:600; }
.hero-comps-date span{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; opacity:.85; }

.hero-comps-corps{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.hero-comps-nom{ font-weight:600; color:var(--green-deep,#0B3324); font-size:.98rem; line-height:1.25; }
.hero-comps-meta{ font-size:.82rem; color:var(--ink-soft,#48594F); }
.hero-comps-etat{ align-self:flex-start; margin-top:.15rem; font-size:.72rem; font-weight:600;
  padding:.12rem .5rem; border-radius:100px; }
.hero-comps-etat.ouvert{ background:rgba(18,168,90,.16); color:#0B7C41; }
.hero-comps-etat.bientot{ background:rgba(7,23,15,.09); color:#48594F; }

.hero-comps-tout{ display:inline-block; color:#fff; font-size:.9rem;
  text-decoration:underline; text-underline-offset:3px; text-shadow:0 1px 3px rgba(7,23,15,.5); }
.hero-comps-liens{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; margin-top:.9rem; }
.hero-comps-alerte{ display:inline-flex; align-items:center; gap:.45rem; color:#fff; font-size:.9rem;
  text-decoration:none; padding:.34rem .85rem; border-radius:999px;
  border:1px dashed rgba(242,246,240,.45); transition:background .2s, border-color .2s; }
.hero-comps-alerte:hover{ background:rgba(242,246,240,.14); border-style:solid; border-color:var(--sage,#12A85A); }

/* ============================================================
   Page Compétitions — les équipes du club
   ============================================================ */
.eq-grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1.1rem; }
.eq-grille > *{ min-width:0; }
.eq-chargement, .eq-vide{ grid-column:1/-1; color:var(--ink-soft); }

.eq-carte{ display:flex; flex-direction:column; gap:.7rem; padding:1.2rem 1.3rem;
  background:#fff; border:1px solid var(--sage-pale); border-radius:14px;
  box-shadow:0 2px 10px rgba(7,23,15,.05); }
.eq-carte-tete h3{ font-family:'Fraunces',serif; font-weight:400; font-size:1.25rem;
  color:var(--green-deep); margin:0 0 .15rem; line-height:1.2; }
.eq-sous{ margin:0; font-size:.84rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--leaf-deep,#0B7C41); font-weight:600; }
.eq-cap{ margin:0; font-size:.92rem; color:var(--ink-soft); }
.eq-cap span{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; opacity:.75; }
.eq-txt{ margin:0; font-size:.93rem; line-height:1.55; color:var(--ink-soft); }
.eq-txt-attente{ font-style:italic; opacity:.8; }

.eq-prochaines{ margin-top:auto; padding-top:.7rem; border-top:1px solid var(--sage-pale); }
.eq-prochaines h4{ margin:0 0 .45rem; font-size:.74rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-soft); font-weight:600; }
.eq-prochaines ul{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.eq-prochaines li{ display:flex; gap:.6rem; align-items:baseline; font-size:.9rem; }
.eq-r-date{ min-width:58px; font-weight:600; color:var(--green-deep); }
.eq-r-adv{ color:var(--ink-soft); flex:1; min-width:0; }
.eq-r-res{ font-weight:600; color:var(--leaf-deep,#0B7C41); white-space:nowrap; }

.eq-agenda-bloc{ margin-top:2.6rem; }
.eq-agenda-titre{ font-family:'Fraunces',serif; font-weight:400; font-size:1.4rem;
  color:var(--green-deep); margin:0 0 .3rem; }
.eq-agenda-lead{ margin:0 0 1rem; color:var(--ink-soft); font-size:.95rem; }
.eq-agenda-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:#fff; border:1px solid var(--sage-pale); border-radius:12px; }
.eq-agenda{ width:100%; min-width:620px; border-collapse:collapse; font-size:.93rem; }
.eq-agenda th, .eq-agenda td{ padding:.7rem .9rem; text-align:left;
  border-bottom:1px solid var(--sage-pale); }
.eq-agenda thead th{ background:var(--green-deep); color:var(--cream); font-weight:600;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.eq-agenda tbody tr:last-child td{ border-bottom:0; }
.eq-agenda td:first-child{ white-space:nowrap; color:var(--green-deep); font-weight:600; }
.eq-a-jouer{ color:var(--ink-soft); font-style:italic; opacity:.75; }

.eq-pied{ margin-top:1.6rem; font-size:.93rem; color:var(--ink-soft); }
.eq-pied a{ color:var(--leaf-deep,#0B7C41); text-decoration:underline; white-space:nowrap; }

/* ============================================================
   Le plan 3D du parcours (leparcours.html)
   Bouton dans le bandeau titre + section de présentation.
   ============================================================ */
.hero-actions-parcours{ display:flex; align-items:center; gap:1rem 1.4rem;
  flex-wrap:wrap; margin-top:1.6rem; position:relative; z-index:2; }

.hero-btn-3d{ display:inline-flex; align-items:center; gap:.55rem; }
.hero-btn-3d-pastille{ display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:20px; padding:0 .35rem; border-radius:5px;
  background:rgba(7,23,15,.22); font-size:.7rem; font-weight:700; letter-spacing:.04em; }
.hero-lien-3d{ color:#fff; font-size:.92rem; text-decoration:underline;
  text-underline-offset:3px; text-shadow:0 1px 3px rgba(7,23,15,.5); }
.p3d-ext{ font-size:.85em; margin-left:.1em; }

.plan3d{ background:#fff; }
.p3d-grille{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.2rem); align-items:center; }
.p3d-grille > *{ min-width:0; }

.p3d-visuel{ display:block; position:relative; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-med); background:var(--green-deep,#0B3324);
  aspect-ratio:16/9; text-decoration:none; }
.p3d-visuel img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
.p3d-visuel:hover img{ transform:scale(1.03); }
.p3d-loupe{ position:absolute; right:.9rem; bottom:.9rem; width:40px; height:40px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); color:var(--green-deep,#0B3324);
  font-size:1.1rem; box-shadow:0 4px 14px rgba(7,23,15,.3); }

.p3d-corps h2{ font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.12;
  color:var(--green-deep); margin:.4rem 0 1rem; }
.p3d-corps h2 strong{ display:block; font-weight:400; font-style:italic;
  color:var(--leaf-deep,#0B7C41); }
.p3d-lead{ color:var(--ink-soft); font-size:1.03rem; line-height:1.65; }

.p3d-points{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.45rem; }
.p3d-points li{ position:relative; padding-left:1.5rem; color:var(--ink-soft); font-size:.95rem; }
.p3d-points li::before{ content:"›"; position:absolute; left:.35rem; top:-.05rem;
  color:var(--leaf-deep,#0B7C41); font-weight:700; }

.p3d-boutons{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; }
.p3d-boutons .btn-outline{ color:var(--green-deep) !important; border-color:var(--green-deep) !important; }
.p3d-note{ margin-top:1rem; font-size:.88rem; color:var(--ink-soft); opacity:.9; }

@media (max-width:900px){
  .p3d-grille{ grid-template-columns:1fr; }
  .p3d-visuel{ order:-1; }
}