/* ESCAPAD · shared chrome for sub-pages (nav, footer, banner, modal, buttons, tokens) */
/* font-display:block (retour équipe 20/07) : le swap affichait le logo et
les titres une fraction de seconde dans la police de repli (flash visible
au chargement). Avec Ultra/Black/Medium préchargées sur toutes les pages,
la fenêtre d'invisibilité de block est imperceptible. */
@font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Light.woff2') format('woff2'), url('fonts/Umiak-Light.woff') format('woff'); font-weight: 300; font-display: block; }
@font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Normal.woff2') format('woff2'), url('fonts/Umiak-Normal.woff') format('woff'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Medium.woff2') format('woff2'), url('fonts/Umiak-Medium.woff') format('woff'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Bold.woff2') format('woff2'), url('fonts/Umiak-Bold.woff') format('woff'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Black.woff2') format('woff2'), url('fonts/Umiak-Black.woff') format('woff'); font-weight: 800; font-display: block; }
@font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Ultra.woff2') format('woff2'), url('fonts/Umiak-Ultra.woff') format('woff'); font-weight: 900; font-display: block; }
/* ===== A11Y: keyboard skip link, focus states, screen-reader helpers ===== */
/* Skip-to-content, invisible until focused. Lets keyboard users jump
past the nav directly to the page content. Inject in every page just
after as: Aller au contenu */
.skip-link {
position:absolute; top:-100px; left:8px; z-index:9999;
padding:10px 18px;
background:var(--midnight); color:var(--yellow);
font-size:13px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
text-decoration:none; border:2px solid var(--yellow);
transition:top 0.2s;
}
.skip-link:focus, .skip-link:focus-visible {
top:8px; outline:none;
}
/* Visible focus ring on all interactive elements. Tailored to the brand
(yellow ring on dark surfaces, midnight ring on light), and explicitly
uses :focus-visible so mouse users don't see it after a click. */
:focus { outline:none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.menu-tab:focus-visible,
.club-pill:focus-visible {
outline:3px solid var(--midnight);
outline-offset:2px;
}
/* On dark sections invert the ring colour for visibility */
.banner :focus-visible,
.footer :focus-visible,
.evp-hero.dark :focus-visible,
.cta-strip.dark :focus-visible,
.dash-hero :focus-visible,
.formats :focus-visible,
.bar :focus-visible,
.price-teaser :focus-visible,
.compare :focus-visible,
.hist-hero :focus-visible {
outline-color:var(--yellow);
}
/* Visually hidden but accessible to screen readers */
.sr-only {
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;
}
/* Honor user motion preferences for decorative animations */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}
:root {
/* Charte de marque (RGB officiels) · jaune pâle, pêche, vert très pâle, bleu
presque noir + couleurs du Café Central (terracotta, vert perroquet). */
--yellow:#fff4c9; /* jaune pâle rgb(255,244,201) */
--pink:#ffc09e; /* pêche rgb(255,192,158) */
--green:#dbe6d5; /* vert pâle rgb(219,230,213) */
--midnight:#0d0b22; /* bleu noir rgb(13,11,34) */
--terracotta:#ba4e2e; /* Café Central rgb(186,78,46) */
--parrot:#2c6538; /* vert perroquet rgb(44,101,56)*/
--peach:#ffc09e; /* alias lisible de --pink */
--cream:#f8f3e4; --paper:#fff;
--tight:-0.045em; --tighter:-0.055em;
--banner-h:36px; --nav-h:64px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:clip; }
/* overflow-x:clip empêche tout défilement horizontal parasite (menus
off-canvas, débordements résiduels) SANS casser position:sticky
(contrairement à overflow:hidden). */
h1, h2 { overflow-wrap:break-word; }
/* « ESCAPAD » (et tout mot ainsi balisé) ne doit jamais être coupé au milieu :
il passe à la ligne entier ou reste sur place. */
.nb { white-space:nowrap; }
body {
font-family:'Umiak',-apple-system,BlinkMacSystemFont,sans-serif;
font-weight:400; letter-spacing:var(--tight);
color:var(--midnight); background:var(--yellow);
-webkit-font-smoothing:antialiased; padding-top:calc(var(--banner-h) + var(--nav-h));
}
a { color:inherit; text-decoration:none; }
button { font:inherit; letter-spacing:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul { list-style:none; }
img { display:block; max-width:100%; }
/* ===== BANNER ===== */
.banner {
position:fixed; top:0; left:0; right:0; z-index:101; height:var(--banner-h);
background:var(--midnight); color:var(--yellow);
display:flex; align-items:center; justify-content:center; gap:8px;
font-size:12px; font-weight:500; letter-spacing:0.02em;
white-space:nowrap; overflow:hidden; padding:0 16px;
}
.banner-short { display:none; }
@media (max-width:780px) { .banner-full { display:none; } .banner-short { display:inline; } }
.banner b { font-weight:700; }
.banner .pin { width:5px; height:5px; border-radius:50%; background:var(--yellow); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.5); } }
/* ===== NAV ===== */
.nav {
position:fixed; top:var(--banner-h); left:0; right:0; z-index:100;
height:var(--nav-h); padding:0 32px;
background:var(--yellow); border-bottom:1.5px solid var(--midnight);
display:flex; align-items:center; justify-content:space-between;
}
.nav-left, .nav-right { display:flex; align-items:center; gap:8px; }
.nav-logo { font-weight:800; font-size:22px; letter-spacing:-0.04em; padding:0 16px 0 0; }
.nav-links { display:flex; align-items:center; gap:4px; height:var(--nav-h); }
.nav-item {
position:relative; height:100%; display:flex; align-items:center;
padding:0 14px; font-size:14px; font-weight:500; cursor:pointer;
}
.nav-item:hover { background:var(--cream); }
.nav-item.active { font-weight:800; }
.nav-item.active::before { content:''; position:absolute; left:14px; right:14px; bottom:0; height:3px; background:var(--midnight); }
.nav-item.has-mega::after { content:'›'; margin-left:6px; transform:rotate(90deg); display:inline-block; font-size:11px; opacity:0.5; }
/* Mega menu, content panel anchored under each nav-item; the cream stripe is a full-width
sibling drawn separately, so it covers nav width without breaking horizontal alignment. */
.mega {
position:absolute; top:100%; left:0;
padding:32px 36px; display:none; z-index:99;
background:var(--cream);
border:1.5px solid var(--midnight);
border-top:none;
box-shadow:6px 6px 0 rgba(14,11,35,0.08);
min-width:560px;
}
.nav-item:hover .mega, .mega:hover { display:grid; }
/* Right-aligned panels for items near the right of the nav (so they don't go off-screen) */
.nav-item.has-mega.align-right .mega { left:auto; right:0; }
.mega-clubs { grid-template-columns: 1fr 1fr 1fr; gap:24px; max-width:1200px; margin:0 auto; }
.mega-sport { grid-template-columns: 1fr 1fr 1.2fr; gap:32px; max-width:1200px; margin:0 auto; }
.mega-academy { grid-template-columns: 1fr 1fr 1fr; gap:24px; max-width:1100px; margin:0 auto; }
/* Events mega: 4-col layout. Anchored under its nav-item like Sports/Académie
(inherits position:absolute; top:100%; left:0 from .mega) so the cursor
stays over the trigger row when moving down into the panel. */
.mega-events {
grid-template-columns: repeat(4, 1fr);
gap:28px;
max-width:1100px;
margin:0;
}
.mega-events .mega-col h4 { white-space:nowrap; }
.mega-events .mega-col ul li a { white-space:nowrap; }
.mega-col h4 { font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:0.55; margin-bottom:14px; }
.mega-col ul li, .mega-col ul li a { padding:6px 0; font-weight:500; display:block; }
.mega-col ul li:hover, .mega-col ul li a:hover { font-weight:700; }
.mega-club-card {
border:1.5px solid var(--midnight); padding:20px; background:var(--paper);
cursor:pointer; transition:transform 0.15s, box-shadow 0.15s;
display:block;
}
.mega-club-card:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--midnight); }
.mega-club-card.disabled { opacity:0.55; cursor:default; background:var(--cream); }
.mega-club-card.disabled:hover { transform:none; box-shadow:none; }
.mega-club-card .city { font-size:24px; font-weight:800; letter-spacing:-0.03em; }
.mega-club-card .meta { font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; margin-top:6px; opacity:0.7; }
.mega-club-card .pill { display:inline-block; margin-top:10px; padding:3px 10px; background:var(--midnight); color:var(--yellow); font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border-radius:999px; }
.mega-club-card.disabled .pill { background:transparent; color:var(--midnight); border:1px solid var(--midnight); }
.btn {
display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
font-size:13px; font-weight:700; border-radius:999px;
border:1.5px solid var(--midnight); transition:all 0.15s;
cursor:pointer;
}
.btn:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--midnight); }
.btn.primary { background:var(--midnight); color:var(--yellow); }
.btn.ghost { background:transparent; }
.btn-lg { padding:16px 28px; font-size:15px; border-width:2px; }
.btn-lg:hover { box-shadow:4px 4px 0 var(--midnight); }
.btn-xl { padding:22px 38px; font-size:18px; border-width:2px; }
.btn-xl:hover { box-shadow:6px 6px 0 var(--midnight); }
/* Club selector pill in nav */
.club-pill {
display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
background:var(--cream); border:1.5px solid var(--midnight); border-radius:999px;
font-size:12px; font-weight:700; letter-spacing:0.04em; cursor:pointer;
}
.club-pill:hover { background:var(--paper); }
.club-pill .dot { width:8px; height:8px; border-radius:50%; background:var(--midnight); }
.club-pill[data-club="lille"] .dot { background:#6e5a62; }
.club-pill[data-club="champigny"] .dot { background:#6e5a62; }
.club-pill[data-club=""] .dot { background:transparent; border:1.5px dashed var(--midnight); }
/* Statut d'ouverture (prioritaire sur la couleur par club) : vert = ouvert
maintenant, gris = fermé / pas encore lancé (« Bientôt »).
Le double attribut [data-status][data-club] élève la spécificité au-dessus
des règles par club (y compris la copie de home.css) → couleur cohérente
sur TOUTES les pages, quel que soit l'ordre de chargement des CSS. */
.club-pill[data-status="open"][data-club] { border-color:var(--parrot); }
.club-pill[data-status="open"][data-club] .dot { background:var(--parrot); border:none; box-shadow:0 0 0 3px rgba(44,101,56,0.18); }
.club-pill[data-status="closed"][data-club] .dot,
.club-pill[data-status="soon"][data-club] .dot { background:#a39e95; border:none; }
/* ===== SECTIONS, HEADINGS, TYPE ===== */
.section-eyebrow { font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:0.6; margin-bottom:14px; }
.section-h2 { font-size:clamp(48px, 6vw, 92px); line-height:0.9; letter-spacing:-0.055em; text-transform:uppercase; max-width:1000px; }
.section-h2 .l1 { font-weight:300; }
.section-h2 .l2 { font-weight:500; }
.section-h2 .l3 { font-weight:900; }
/* ===== BANDE CTA (base globale) =====
Filet de sécurité : une doit TOUJOURS être stylée,
même sur une page qui ne redéfinit pas ce style en local (sinon elle s'affiche
« non designée »). Les pages qui ont leur propre