/* ============================================================================
   Styles communs à toutes les pages (chargé AVANT tailwind.css, comme sur le site d'origine
   où les styles maison précédaient ceux de Tailwind).
   Les couleurs du club sont des variables : elles sont remplacées par le thème du club
   (Espace Club → Identité & apparence) via une balise <style id="club-theme">.
   ============================================================================ */

/* Police des titres : Barlow Condensed (auto-hébergée, sans appel à Google) */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/barlow-condensed-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/barlow-condensed-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/barlow-condensed-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/barlow-condensed-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 800; src: url(../fonts/barlow-condensed-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 800; src: url(../fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 900; src: url(../fonts/barlow-condensed-latin-ext-900-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 900; src: url(../fonts/barlow-condensed-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Couleurs par défaut (rose / violet du Bad Évian) — remplacées par le thème du club */
:root {
  --pal-primary-50: 253 242 248;
  --pal-primary-100: 252 231 243;
  --pal-primary-200: 251 207 232;
  --pal-primary-300: 249 168 212;
  --pal-primary-400: 244 114 182;
  --pal-primary-500: 236 72 153;
  --pal-primary-600: 219 39 119;
  --pal-primary-700: 190 24 93;
  --pal-primary-800: 157 23 77;
  --pal-primary-900: 131 24 67;
  --pal-primary-950: 80 7 36;
  --pal-accent-50: 250 245 255;
  --pal-accent-100: 243 232 255;
  --pal-accent-200: 233 213 255;
  --pal-accent-300: 216 180 254;
  --pal-accent-400: 192 132 252;
  --pal-accent-500: 168 85 247;
  --pal-accent-600: 147 51 234;
  --pal-accent-700: 126 34 206;
  --pal-accent-800: 107 33 168;
  --pal-accent-900: 88 28 135;
  --pal-accent-950: 59 7 100;
  --club-navy: 15 23 42;
  --club-navy-light: 30 41 59;
  --club-primary-hex: #ec4899;
  --gold: #f5c842;
  --gold-dim: #b8941f;
  --emerald: #10b981;
}

html, body {
    overflow-x: hidden;
    overflow-x: clip; /* pas de défilement horizontal, sans casser les éléments « collants » (position: sticky) */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* --- FIX DU SCROLL POUR LA NAVBAR FIXE --- */
/* Cela assure que l'ancre arrive "au bon niveau" (au-dessus du titre) */
html {
    scroll-padding-top: calc(var(--nav-h, 140px) + 12px);
}
@media (min-width: 1280px) {
    html { scroll-padding-top: calc(var(--nav-h, 88px) + 12px); }
}

/* Ajustements pour la barre de défilement */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #0f172a; /* Bleu marine */
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--pal-primary-500)); /* Rose au survol */
}
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
/* Modal Styles */
.modal {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
}
.modal.open {
    opacity: 1;
    pointer-events: auto;
}

/* --- BOUTON CALENDRIER (entête) : mini-calendrier qui affiche la date du jour --- */
.be-cal-btn {
    position: relative; display: inline-flex; flex-direction: column; align-items: stretch;
    width: 42px; height: 46px; border-radius: 12px; overflow: hidden; flex: none;
    background: #fff; text-decoration: none;
    box-shadow: 0 0 0 2px rgb(var(--pal-primary-500)), 0 8px 18px -6px rgb(var(--pal-primary-500) / .75);
    transition: transform .25s ease, box-shadow .25s ease;
}
.be-cal-btn:hover, .group:hover > .be-cal-btn {
    transform: translateY(-2px) rotate(-4deg);
    box-shadow: 0 0 0 2px rgb(var(--pal-primary-500)), 0 14px 26px -8px rgb(var(--pal-primary-500) / .95);
}
.be-cal-btn__top {
    background: linear-gradient(135deg, rgb(var(--pal-primary-500)), rgb(var(--pal-accent-600))); color: #fff;
    font: 800 9px/1 'Barlow Condensed', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
    text-align: center; padding: 5px 0 4px;
}
.be-cal-btn__day {
    flex: 1; display: grid; place-items: center; color: #0f172a;
    font: 900 22px/1 'Barlow Condensed', system-ui, sans-serif;
}
.be-cal-btn::before, .be-cal-btn::after {
    content: ""; position: absolute; top: 2px; width: 4px; height: 4px; border-radius: 50%;
    background: rgba(15, 23, 42, .55); z-index: 1;
}
.be-cal-btn::before { left: 9px; } .be-cal-btn::after { right: 9px; }
.be-cal-btn:focus-visible { outline: 3px solid rgb(var(--pal-primary-300)); outline-offset: 3px; }
/* Très petits écrans / badge LIVE affiché : on garde la barre d'origine (le lien reste dans le menu) */
@media (max-width: 339px) { .be-cal-btn--m { display: none; } }
@media (max-width: 419px) { #nav-live-mobile-mini:not(.hidden) + .be-cal-btn--m { display: none; } }

/* ============================================================================
   Nouveaux composants
   ============================================================================ */

/* Mosaïque « justifiée » (La Vie du Club / L'Esprit Fun) : proportions conservées, ordre respecté */
.gallery-justified { display: flex; flex-wrap: wrap; gap: .75rem; --row-h: 210px; }
.gallery-justified::after { content: ''; flex-grow: 1000000; }
.gallery-justified > .gallery-item { position: relative; flex-grow: var(--r, 1.333); flex-basis: calc(var(--r, 1.333) * var(--row-h)); aspect-ratio: var(--r, 1.333); min-width: 0; margin: 0; }
.gallery-justified > .gallery-item[hidden] { display: none; }
.gallery-justified > .gallery-item img { position: absolute; inset: 0; }
.gallery-justified.is-justified::after { display: none; }
.gallery-justified > .gallery-item:focus-visible { outline: 3px solid rgb(var(--pal-primary-500)); outline-offset: 3px; }
@media (min-width: 768px) { .gallery-justified { gap: 1rem; --row-h: 240px; } }
@media (min-width: 1024px) { .gallery-justified { gap: 1.5rem; --row-h: 290px; } }
/* Écrans tactiles : légende toujours visible (pas de survol possible) */
@media (hover: none) {
  .gallery-justified .modern-overlay { opacity: 1; transform: none; padding: 1.75rem .5rem .5rem; background: linear-gradient(to top, rgba(15, 23, 42, .85), rgba(15, 23, 42, 0)); backdrop-filter: none; }
  .gallery-justified .modern-name { font-size: .72rem; letter-spacing: .08em; }
}

/* Pied de page : lien « offre club » (style d'origine, animé) */
.creds-cta { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: 9999px; color: #fff; overflow: hidden; background: linear-gradient(90deg, #ec4899 0%, #a855f7 100%); box-shadow: 0 6px 18px -6px rgba(236,72,153,.6); transition: transform .2s ease, box-shadow .2s ease; animation: credsGlow 3.2s ease-out infinite; }
.creds-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: credsShine 4.5s ease-in-out infinite; pointer-events: none; }
.creds-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(236,72,153,.85); }
.creds-cta-go { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; padding-left: .55rem; border-left: 1px solid rgba(255,255,255,.35); }
.creds-cta .creds-arrow { transition: transform .2s ease; }
.creds-cta:hover .creds-arrow { transform: translateX(3px); }
@keyframes credsGlow { 0% { box-shadow: 0 6px 18px -6px rgba(236,72,153,.6), 0 0 0 0 rgba(236,72,153,.45); } 70%, 100% { box-shadow: 0 6px 18px -6px rgba(236,72,153,.6), 0 0 0 10px rgba(236,72,153,0); } }
@keyframes credsShine { 0%, 55% { left: -60%; } 80%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .creds-cta, .creds-cta::after { animation: none; } }

/* Espace Club : éléments d'édition visibles seulement en « mode édition » */
[data-edit-btn] { display: none; }
body.is-editing [data-edit-btn] { display: inline-flex; }
body.is-editing [data-section] { position: relative; }
body.is-editing [data-section]:hover { outline: 2px dashed rgb(var(--pal-primary-500) / .45); outline-offset: -6px; }

/* Menu « Modifier la page » des pages sur un seul écran (galerie d'artiste : data-edit-dock), au-dessus de la barre de l'Espace */
.edit-dock { position: fixed; left: 16px; bottom: 78px; z-index: 89; width: min(344px, calc(100vw - 32px)); max-height: calc(100dvh - 110px); display: flex; flex-direction: column;
  background: rgb(255 255 255 / .97); color: #1e293b; border: 1px solid rgb(15 23 42 / .08); border-radius: 18px; box-shadow: 0 24px 60px -20px rgb(15 23 42 / .45), 0 2px 6px rgb(15 23 42 / .08);
  font: 500 14px/1.35 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.edit-dock__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 10px 10px 8px 16px; }
.edit-dock[hidden] { display: none; }
.edit-dock__title { margin: 0; font-weight: 700; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: #64748b; }
.edit-dock__fold { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; color: #475569; background: #f1f5f9; border: 0; cursor: pointer; }
.edit-dock__fold:hover { background: #e2e8f0; }
.edit-dock__body { overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 10px; }
.edit-dock__list { display: grid; gap: 2px; }
.edit-dock__item { display: flex; align-items: center; gap: .65rem; width: 100%; padding: 9px 10px; border-radius: 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.edit-dock__item svg { flex: none; color: rgb(var(--pal-primary-500)); }
.edit-dock__item:hover, .edit-dock__item:focus-visible { background: rgb(var(--pal-primary-500) / .1); outline: none; }
.edit-dock__tools:not(:empty) { margin-top: 8px; padding: 10px 8px 0; border-top: 1px solid #e2e8f0; display: grid; gap: 10px; }
[data-edit-hl] { outline: 2px solid rgb(var(--pal-primary-500) / .85) !important; outline-offset: -2px; box-shadow: 0 0 0 9999px rgb(15 23 42 / .12); border-radius: 14px; z-index: 60; }
body.is-editing [data-edit-dock] [data-section]:hover { outline: none; }
@media (max-width: 640px) {
  .edit-dock { left: 12px; right: 12px; width: auto; bottom: 74px; max-height: min(60dvh, calc(100dvh - 100px)); }
}

/* Espace Pro : recadrage d'une photo d'œuvre (admin/scan-editor.js) */
.scan-status { margin: 0 0 12px; font-size: 14px; color: #334155; }
.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.scan-main { min-width: 0; display: flex; justify-content: center; }
.scan-stage { position: relative; width: 100%; max-height: 64vh; max-width: calc(64vh * var(--scan-r, 10)); touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 10px; overflow: visible; background: #0f172a; }
.scan-photo { display: block; width: 100%; height: 100%; border-radius: 10px; }
.scan-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.scan-shade { fill: rgb(15 23 42 / .55); }
.scan-poly { fill: none; stroke: #ec4899; stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.scan-handle { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 999px; border: 3px solid #fff; background: #ec4899; box-shadow: 0 2px 8px rgb(0 0 0 / .45); cursor: grab; touch-action: none; padding: 0; }
.scan-handle:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.scan-stage.is-dragging .scan-handle { cursor: grabbing; }
.scan-loupe { position: absolute; width: 132px; height: 132px; margin: -170px 0 0 -66px; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 6px 20px rgb(0 0 0 / .45); pointer-events: none; z-index: 2; background: #fff; }
.scan-loupe.is-below { margin-top: 38px; }
.scan-aside { display: grid; gap: 12px; }
.scan-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.scan-preview-box { display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 14px; border-radius: 12px; background: #e2e8f0; }
.scan-preview { display: block; max-width: 100%; max-height: 40vh; box-shadow: 0 8px 22px -10px rgb(15 23 42 / .55); background: #fff; }
.scan-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #334155; cursor: pointer; }
.scan-check span { display: inline-flex; align-items: center; gap: 6px; }
.scan-check input { width: 18px; height: 18px; accent-color: #ec4899; }
.scan-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.scan-tools button { padding: 6px 10px !important; font-size: 13px; }
.scan-tip { margin: 0; font-size: 12.5px; line-height: 1.5; color: #64748b; }
@media (max-width: 760px) {
  .scan-grid { grid-template-columns: minmax(0, 1fr); }
  .scan-stage { max-height: 52vh; max-width: calc(52vh * var(--scan-r, 10)); }
  .scan-preview-box { min-height: 120px; }
  .scan-preview { max-height: 28vh; }
}

/* Modules non inclus dans l'offre : grisés et floutés */
.module-locked { position: relative; }
.module-locked > .module-card-inner { filter: grayscale(1) blur(1.5px); opacity: .55; }

/* Accessibilité : lien d'évitement */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; }
.skip-link:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Mode édition : le bouton de la bannière (et des pages dont le haut passe sous la barre) reste visible */
body.is-editing [data-section="hero"] > [data-edit-btn],
body.is-editing [data-section][data-below-nav] > [data-edit-btn] { top: calc(var(--nav-h, 100px) + 12px); }

/* Barre de navigation sur les écrans « juste assez larges » : tout reste sur une ligne (classe posée par ui/navbar.js) */
#navbar [data-action="logo-modal"], #navbar [data-action="logo-modal"] img { flex-shrink: 0; }
#navbar.nav-tight .container > div:first-child { flex-shrink: 0; margin-right: .75rem; }
#navbar.nav-tight #nav-title { white-space: nowrap; font-size: 1.125rem; }
#navbar.nav-tight #desktop-menu { font-size: .78rem; min-width: 0; }
#navbar.nav-tight #desktop-menu > :not([hidden]) ~ :not([hidden]) { margin-left: .45rem !important; }
#navbar.nav-tight #desktop-menu a, #navbar.nav-tight #desktop-menu button { white-space: nowrap; }
#navbar.nav-tight #desktop-menu [data-action="trial"] > span, #navbar.nav-tight #desktop-menu a > span.relative { padding-left: .7rem; padding-right: .7rem; }

/* Pages intérieures : le contenu commence sous la barre de navigation (hauteur réelle mesurée) */
.page-offset { padding-top: calc(var(--nav-h, 128px) + 1.5rem); }

/* ================================================================== Ambiance sportive « tennis »
 * Couleurs & apparence → Ambiance sportive (theme.motif = 'tennis' → <html data-motif="tennis">).
 * Titres condensés façon panneau de score, lignes de court sur les fonds sombres, balle jaune en signature.
 * Sans ce réglage, aucune de ces règles ne s'applique. */
html[data-motif="tennis"] {
  --court-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 520' fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='3'%3E%3Crect x='60' y='40' width='1080' height='440'/%3E%3Cpath d='M60 95h1080M60 425h1080M330 95v330M870 95v330M330 260h540M60 260h14M1126 260h14'/%3E%3Cpath d='M600 22v476' stroke-width='5' stroke-dasharray='2 9'/%3E%3C/svg%3E");
  --tennis-ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='50' cy='50' r='48'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='48' fill='%23d9f24a'/%3E%3Cg clip-path='url(%23c)' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 18c26 16 26 48 0 64M92 18c-26 16-26 48 0 64'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%23000' stroke-opacity='.08' stroke-width='2'/%3E%3C/svg%3E");
}
html[data-motif="tennis"] [data-section] h2:is(.text-3xl, .text-4xl),
html[data-motif="tennis"] #home h1 {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .005em;
}
html[data-motif="tennis"] [data-section] h2:is(.text-3xl, .text-4xl) { font-weight: 800; font-size: clamp(2.25rem, 1.7rem + 1.8vw, 3.25rem); line-height: 1.02; }
html[data-motif="tennis"] #home h1 { font-weight: 900; font-size: clamp(3.1rem, 1.6rem + 5.4vw, 6.75rem); line-height: .95; }
/* Le mot fort de la bannière en jaune balle */
html[data-motif="tennis"] #home h1 .text-club-pink,
html[data-motif="tennis"] #home p .text-club-pink { color: var(--gold); }
/* Surtitres : une petite balle devant */
html[data-motif="tennis"] [data-section] :is(span, p).uppercase.tracking-wider.text-club-pink:not(:empty):not(:has(svg))::before {
  content: ''; display: inline-block; width: .95em; height: .95em; margin-right: .5em; vertical-align: -.12em;
  background: var(--tennis-ball) center / contain no-repeat;
}
/* Frise : titres et surtitre en jaune balle sur le fond sombre */
html[data-motif="tennis"] #timeline :is(h3, span).text-club-pink { color: var(--gold); }
/* Fonds sombres : lignes du court */
html[data-motif="tennis"] #timeline,
html[data-motif="tennis"] #a-la-une {
  background-image: var(--court-lines);
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(1400px, 140%) auto;
}
/* Balles décoratives */
html[data-motif="tennis"] #valeurs::after,
html[data-motif="tennis"] #infos::before {
  content: ''; position: absolute; pointer-events: none; background: var(--tennis-ball) center / contain no-repeat;
}
html[data-motif="tennis"] #valeurs::after { width: 240px; height: 240px; right: -70px; bottom: -80px; transform: rotate(-18deg); opacity: .9; }
html[data-motif="tennis"] #infos { position: relative; overflow: hidden; }
html[data-motif="tennis"] #infos > * { position: relative; z-index: 1; }
html[data-motif="tennis"] #infos::before { width: 150px; height: 150px; left: -55px; top: 40px; transform: rotate(24deg); opacity: .85; }
@media (max-width: 767px) {
  html[data-motif="tennis"] #valeurs::after { width: 150px; height: 150px; right: -50px; bottom: -50px; }
  html[data-motif="tennis"] #infos::before { display: none; }
}
/* Contrastes renforcés (WCAG AA) pour les sites en ambiance tennis : couleur principale un ton plus soutenu,
   boutons turquoise plus foncés, petits textes gris plus lisibles. */
html[data-motif="tennis"] { --pal-primary-500: var(--pal-primary-600); }
html[data-motif="tennis"] .bg-teal-500 { background-color: #0f766e; }
html[data-motif="tennis"] .hover\:bg-teal-600:hover { background-color: #115e59; }
html[data-motif="tennis"] #contact .text-slate-400 { color: #64748b; }
html[data-motif="tennis"] #site-footer { color: #94a3b8; }
html[data-motif="tennis"] #site-footer .opacity-70 { opacity: 1; }
html[data-motif="tennis"] .bg-club-pink\/10.text-club-pink { color: rgb(var(--pal-primary-700)); }

/* ================================================================== Ambiance sportive « handball »
 * Couleurs & apparence → Ambiance sportive (theme.motif = 'handball' → <html data-motif="handball">).
 * Titres condensés façon affiche de match, terrain (zones des 6 m et 9 m) sur les fonds sombres, chevrons du maillot,
 * ballon en signature ; bannière : texte à gauche sur grand écran pour laisser voir la photo.
 * Sans ce réglage, aucune de ces règles ne s'applique. */
html[data-motif="handball"] {
  --hb-court: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='4'%3E%3Crect x='100' y='50' width='1000' height='500'/%3E%3Cpath d='M600 50v500M100 112.5A150 150 0 0 1 250 262.5v75A150 150 0 0 1 100 487.5M1100 112.5A150 150 0 0 0 950 262.5v75A150 150 0 0 0 1100 487.5M275 287.5v25M925 287.5v25'/%3E%3Cpath d='M174 50A225 225 0 0 1 325 262.5v75A225 225 0 0 1 174 550M1026 50A225 225 0 0 0 875 262.5v75A225 225 0 0 0 1026 550' stroke-dasharray='14 12'/%3E%3Ccircle cx='600' cy='300' r='6' fill='%23fff' fill-opacity='.09'/%3E%3C/svg%3E");
  --hb-chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cpath d='M0 20 12 6l12 14L36 6l12 14' fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='5'/%3E%3C/svg%3E");
  --hb-ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='50' cy='50' r='47'/%3E%3C/clipPath%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23dfe7e3'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='47' fill='url(%23g)'/%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M-4 40C22 22 50 30 62 52S92 86 108 74L108 96C86 104 58 92 46 70S14 46-4 60Z' fill='%2309a977'/%3E%3Cpath d='M30-6C40 14 64 18 84 10L90 22C66 32 38 26 24 2Z' fill='%230b2a1e'/%3E%3Cpath d='M-4 40C22 22 50 30 62 52S92 86 108 74M-4 60C14 46 34 48 46 70S86 104 108 96M24 2C38 26 66 32 90 22M8 84C24 70 34 74 40 100' fill='none' stroke='%230b2a1e' stroke-opacity='.35' stroke-width='1.6'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%230b2a1e' stroke-opacity='.25' stroke-width='3'/%3E%3C/svg%3E");
}
html[data-motif="handball"] [data-section] h2:is(.text-3xl, .text-4xl),
html[data-motif="handball"] #home h1 {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .005em;
}
html[data-motif="handball"] [data-section] h2:is(.text-3xl, .text-4xl) { font-weight: 800; font-size: clamp(2.25rem, 1.7rem + 1.8vw, 3.25rem); line-height: 1.02; }
html[data-motif="handball"] #home h1 { font-weight: 900; font-size: clamp(2.9rem, 1.4rem + 4.4vw, 5.75rem); line-height: .95; }
/* Le slogan de la bannière, légèrement penché comme sur les affiches de match */
html[data-motif="handball"] #home h1 .text-club-pink { color: var(--gold); display: inline-block; transform: skewX(-7deg); }
html[data-motif="handball"] #home p .text-club-pink { color: var(--gold); }
/* Surtitres : un petit ballon devant */
html[data-motif="handball"] [data-section] :is(span, p).uppercase.tracking-wider.text-club-pink:not(:empty):not(:has(svg))::before {
  content: ''; display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.14em;
  background: var(--hb-ball) center / contain no-repeat;
}
/* Fonds sombres : le terrain (zones des 6 m et des 9 m) */
html[data-motif="handball"] #timeline :is(h3, span).text-club-pink { color: var(--gold); }
/* Fonds sombres aux couleurs du club (la frise est bleu nuit par défaut) ; textes d'accent lisibles sur ces fonds */
html[data-motif="handball"] #timeline { background-color: rgb(var(--club-navy)); border-top-color: rgb(var(--club-navy-light)); }
html[data-motif="handball"] #a-la-une .text-club-pink { color: var(--gold); }
html[data-motif="handball"] #club .bg-club-navy > .text-club-pink { color: var(--gold); }
html[data-motif="handball"] #timeline,
html[data-motif="handball"] #a-la-une {
  background-image: var(--hb-court);
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(1400px, 150%) auto;
}
/* Chevrons du maillot sous la bannière et en haut du pied de page */
html[data-motif="handball"] #home::after,
html[data-motif="handball"] #site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; height: 18px; pointer-events: none;
  background: rgb(var(--pal-primary-700)) var(--hb-chevrons) left center / 36px 18px repeat-x;
}
html[data-motif="handball"] #home::after { bottom: 0; z-index: 2; }
html[data-motif="handball"] #site-footer { position: relative; background-color: rgb(var(--club-navy)); }
html[data-motif="handball"] #site-footer::before { top: 0; }
/* Ballons décoratifs */
html[data-motif="handball"] #valeurs::after,
html[data-motif="handball"] #infos::before {
  content: ''; position: absolute; pointer-events: none; background: var(--hb-ball) center / contain no-repeat;
}
html[data-motif="handball"] #valeurs::after { width: 230px; height: 230px; right: -70px; bottom: -80px; transform: rotate(-14deg); opacity: .9; }
html[data-motif="handball"] #infos { position: relative; overflow: hidden; }
html[data-motif="handball"] #infos > * { position: relative; z-index: 1; }
html[data-motif="handball"] #infos::before { width: 140px; height: 140px; left: -50px; top: 40px; transform: rotate(20deg); opacity: .85; }
@media (max-width: 767px) {
  html[data-motif="handball"] #valeurs::after { width: 140px; height: 140px; right: -50px; bottom: -50px; }
  html[data-motif="handball"] #infos::before { display: none; }
}
/* Bannière sur grand écran : texte à gauche, la photo (logo, joueurs, supporters) reste visible à droite */
@media (min-width: 1024px) {
  html[data-motif="handball"] #home { justify-content: flex-start; }
  html[data-motif="handball"] #home > div:first-child > img { object-position: 12% center; }
  html[data-motif="handball"] #home > div:first-child > div {
    background-image: linear-gradient(90deg, rgb(var(--club-navy) / .94) 0%, rgb(var(--club-navy) / .82) 34%, rgb(var(--club-navy) / .2) 62%, rgb(var(--club-navy) / .08) 100%),
      linear-gradient(180deg, rgb(var(--club-navy) / .55) 0%, transparent 22%, transparent 78%, rgb(var(--club-navy) / .6) 100%);
  }
  html[data-motif="handball"] #home > .relative.z-10 {
    text-align: left; max-width: 36rem; margin-left: max(2rem, calc((100vw - 80rem) / 2 + 2rem)); margin-right: auto; padding-left: 0; padding-right: 0;
  }
  html[data-motif="handball"] #home > .relative.z-10 > p { margin-left: 0; }
  html[data-motif="handball"] #home > .relative.z-10 > div { justify-content: flex-start; }
}
/* Contrastes renforcés (WCAG AA) : couleur principale plus soutenue sur fond clair, petits textes gris plus lisibles. */
html[data-motif="handball"] { --pal-primary-500: var(--pal-primary-700); }
html[data-motif="handball"] .bg-teal-500 { background-color: #0f766e; }
html[data-motif="handball"] .hover\:bg-teal-600:hover { background-color: #115e59; }
html[data-motif="handball"] #contact .text-slate-400 { color: #64748b; }
html[data-motif="handball"] #site-footer { color: #94a3b8; }
html[data-motif="handball"] #site-footer .opacity-70 { opacity: 1; }
html[data-motif="handball"] .bg-club-pink\/10.text-club-pink { color: rgb(var(--pal-primary-800)); }