/* ===================================================================== BOXING CENTER — MINIMES · REFONTE v4 « NAVY PREMIUM » base.css — design system. ───────────────────────────────────────────────────────────────────── LA CHARTE VIENT DU LOGO, MESURÉE — PAS ESTIMÉE. Quantification des pixels opaques de /assets/img/logo.png : 73,3 % #202048 ← le navy du lettrage BOXING CENTER. LA couleur. 8,9 % #182048 (même teinte, ombre du trait) 3,1 % #683010 ← la rouille du liseré. L'accent, et rien d'autre. Tout le reste de la palette est un DEGRÉ de ce navy (teinte 240°) ou un gris neutre légèrement bleuté. Aucune teinte inventée. ───────────────────────────────────────────────────────────────────── CE QUI CHANGE PAR RAPPORT À v3, ET POURQUOI. v3 était un site SOMBRE de bout en bout : fond #0a1020 partout, photos passées en grayscale. C'est cohérent, mais ça écrase deux atouts réels de cette salle — la lumière zénithale des verrières et les tapis orange sur les rings bleus. Une photo désaturée d'une salle lumineuse ne vend rien. v4 inverse la logique : le BLANC devient la surface par défaut, le navy devient l'ENCRE et l'aplat d'appui, et les photos repassent en couleur. Le contraste de la marque ne vient plus de l'obscurité, il vient de l'ALTERNANCE — c'est ce qui fait « haut de gamme » plutôt que « club ». ───────────────────────────────────────────────────────────────────── LE SYSTÈME DE SURFACES (le cœur de la refonte). Une section ne choisit plus ses couleurs : elle déclare son TERRAIN via data-surface, et le terrain repeint les tokens sémantiques localement. data-surface="paper" → blanc (défaut, lecture) data-surface="soft" → gris clair (respiration, cartes) data-surface="navy" → navy de marque (appui, chiffres, offres) data-surface="deep" → navy profond (hero, gong, footer) Conséquence : les 46 usages de --bone, 30 de --mark, 28 de --line écrits pour v3 continuent de fonctionner — ils suivent leur terrain. On ne réécrit pas 2 000 lignes, on rebranche leur source. RÈGLE ABSOLUE : ne jamais poser une couleur littérale dans un composant. Un composant qui écrit #fff ou rgba(238,241,246,.13) casse dès qu'il change de terrain — c'est exactement le bug que ce système supprime. ===================================================================== */ /* --------------------------- ENCRES BRUTES ------------------------- Les seules valeurs littérales du design system. Elles ne sont jamais utilisées directement par un composant : elles alimentent les tokens sémantiques ci-dessous. */ :root { /* le navy du logo et ses degrés — teinte 240°, une seule famille */ --navy-900: #0B0D22; /* le plus profond — hero, gong, footer */ --navy-800: #12142E; /* fond deep */ --navy-700: #1A1C3C; /* carte sur deep */ --navy-600: #202048; /* ◄ LOGO — l'aplat de marque, les boutons */ --navy-500: #2C2C63; /* survol d'aplat */ --navy-400: #3D3E85; /* filets sur navy */ --navy-300: #6B6DAF; /* texte tertiaire sur navy */ --navy-200: #B9BAD9; /* texte secondaire sur navy */ /* la rouille du liseré — 3 % du logo, donc 3 % du site. Réservée : badge « populaire », soulignement d'un chiffre clé. Jamais un fond de bouton, jamais un bloc entier. */ --rust: #8A3D14; --rust-400: #C2601F; /* degré clair — lisible sur navy (5.1:1) */ /* les surfaces claires — gris neutres très légèrement bleutés, pour qu'ils appartiennent à la même famille que le navy */ --paper: #FFFFFF; --paper-2: #F4F6FB; /* gris clair — la respiration */ --paper-3: #E9EDF6; /* gris d'appui — cartes sur soft */ --hair: #DCE2EF; /* le filet sur fond clair */ /* les textes, mesurés sur leur fond */ --on-light: #14162F; /* 15.8:1 sur blanc */ --on-light-2: #474D6D; /* 8.1:1 sur blanc — corps secondaire */ --on-light-3: #6E7590; /* 4.9:1 sur blanc — micro-labels SEULEMENT */ --white: #FFFFFF; } /* --------------------- TOKENS SÉMANTIQUES (défaut = papier) -------- C'est ce vocabulaire, et lui seul, que les composants consomment. */ :root { --bg: var(--paper); --fg: var(--on-light); --bone: var(--on-light); /* « l'encre forte » — titres, emphase */ --read: var(--on-light-2); /* le corps de lecture */ --muted: var(--on-light-2); --bone-dim: var(--on-light-2); --steel: var(--on-light-3); /* micro-labels, jamais du corps */ --mark: var(--navy-600); /* les barres, filets, soulignés */ --accent: var(--navy-600); --line: var(--hair); --line-soft: #EFF2F8; --char: var(--paper-2); /* fond de carte / de média */ --on-accent: var(--white); /* texte posé sur un aplat navy */ --on-bone-dim: rgba(20,22,47,.72); /* compat v3 — d'anciens composants nomment encore ces trois-là */ --ink: var(--navy-800); --ink-2: var(--paper-2); --black: var(--navy-900); --navy: var(--navy-600); --navy-2: var(--navy-500); --navy-deep: var(--navy-900); --navy-glow: rgba(32,32,72,.28); --silver: var(--navy-600); /* Type — l'Archivo Black du lettrage reste : c'est l'identité. Ce qui change, c'est le RÉGLAGE — interlettrage resserré, corps de lecture plus généreux, échelle plus contrastée entre les niveaux. */ --f-display:"Archivo Black", "Arial Black", Impact, sans-serif; --f-ui: "Archivo", system-ui, sans-serif; --f-mono: "Space Mono", "JetBrains Mono", monospace; --step--2: clamp(.68rem, .64rem + .2vw, .76rem); --step--1: clamp(.78rem, .74rem + .25vw, .88rem); --step-0: clamp(1.02rem, .97rem + .3vw, 1.18rem); --step-1: clamp(1.22rem, 1.08rem + .7vw, 1.62rem); --step-2: clamp(1.9rem, 1.35rem + 2.4vw, 3.3rem); --step-3: clamp(2.6rem, 1.5rem + 5vw, 6rem); --step-4: clamp(4rem, 2rem + 11vw, 13rem); --wrap: min(92vw, 1320px); --wrap-tight: min(92vw, 1060px); --measure: 62ch; /* longueur de ligne de lecture — jamais dépassée */ --gut: clamp(1.2rem, 4vw, 3rem); /* rythme vertical — la refonte demande PLUS de respiration : le pas principal passe de 5-11rem à 6-13rem, et gagne un pas « large ». */ --sec: clamp(6rem, 11vw, 13rem); --sec-wide: clamp(8rem, 15vw, 17rem); --sec-tight: clamp(3rem, 6vw, 5rem); --sec-flush: 0rem; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-punch: cubic-bezier(.2,1.4,.3,1); /* v3 était à angles vifs (« poster, not app »). Le haut de gamme demandé passe par un rayon FAIBLE mais non nul : assez pour adoucir, trop peu pour ressembler à une application. */ --radius: 4px; --radius-lg: 10px; --shadow-sm: 0 1px 2px rgba(20,22,47,.06), 0 4px 12px rgba(20,22,47,.05); --shadow-md: 0 2px 6px rgba(20,22,47,.07), 0 14px 38px rgba(20,22,47,.09); --shadow-lg: 0 6px 18px rgba(20,22,47,.10), 0 32px 70px rgba(20,22,47,.14); } /* ------------------------- LES QUATRE TERRAINS --------------------- Chaque terrain redéfinit le MÊME vocabulaire. Un composant posé sur l'un ou l'autre se repeint tout seul, sans une ligne de plus. */ [data-surface="paper"] { --bg: var(--paper); --fg: var(--on-light); --bone: var(--on-light); --read: var(--on-light-2); --muted: var(--on-light-2); --bone-dim: var(--on-light-2); --steel: var(--on-light-3); --mark: var(--navy-600); --line: var(--hair); --line-soft: #EFF2F8; --char: var(--paper-2); --silver: var(--navy-600); color: var(--fg); background: var(--bg); } [data-surface="soft"] { --bg: var(--paper-2); --fg: var(--on-light); --bone: var(--on-light); --read: var(--on-light-2); --muted: var(--on-light-2); --bone-dim: var(--on-light-2); --steel: var(--on-light-3); --mark: var(--navy-600); --line: var(--hair); --line-soft: #E4E9F3; --char: var(--paper); --silver: var(--navy-600); color: var(--fg); background: var(--bg); } [data-surface="navy"] { --bg: var(--navy-600); --fg: var(--white); --bone: var(--white); --read: #DCDDEE; --muted: #DCDDEE; --bone-dim: var(--navy-200); --steel: var(--navy-300); --mark: var(--white); --line: rgba(255,255,255,.16); --line-soft: rgba(255,255,255,.08); --char: var(--navy-500); --silver: var(--white); --on-accent: var(--navy-600); color: var(--fg); background: var(--bg); } [data-surface="deep"] { --bg: var(--navy-900); --fg: var(--white); --bone: var(--white); --read: #C9CBE4; --muted: #C9CBE4; --bone-dim: var(--navy-200); --steel: var(--navy-300); --mark: var(--white); --line: rgba(255,255,255,.14); --line-soft: rgba(255,255,255,.07); --char: var(--navy-700); --silver: var(--white); color: var(--fg); background: var(--bg); } /* ----------------------------- RESET ------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--f-ui); font-size: var(--step-0); line-height: 1.55; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video, svg, canvas { display: block; max-width: 100%; } /* [hidden] EST CACHÉ — sans discussion. La règle navigateur « [hidden]{display:none} » ne pèse que 0,0,1,0 : n'importe quelle classe posant un display (.slot, .pday, .btn, le reset img/video/svg…) la bat dans la cascade. Le JS masquait alors correctement pendant que l'écran continuait de tout afficher — le compteur annonçait un chiffre, l'utilisateur en voyait un autre. Correction de FAMILLE, en tête du design system. */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: rgba(38,64,115,.35); } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: rgba(38,64,115,.35); } ul { list-style: none; } ::selection { background: var(--navy); color: var(--on-accent); } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } html.is-locked, html.is-locked body { overflow: hidden; height: 100%; } /* --------------------------- TEXTURE ------------------------------ */ .grain { position: fixed; inset: -50%; z-index: 9000; pointer-events: none; /* v3 posait le grain à .07 en overlay sur TOUTE la page. Sur un fond blanc, un bruit à cette densité se lit comme une impression sale — l'exact contraire du haut de gamme demandé. Il descend à .025 et passe en multiply : il ne salit plus le blanc, il donne juste de la matière aux aplats navy et aux photos. */ opacity: .025; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain .6s steps(3) infinite; } @keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-2%)} 100%{transform:translate(-2%,1%)} } /* La vignette globale assombrissait les bords de l'écran : indispensable sur un site noir, désastreuse sur un site blanc (elle grise le papier). Elle ne s'applique donc plus qu'AU-DESSUS des terrains profonds — hero et gong — où elle sert encore à river l'œil au centre. */ .vignette { position: fixed; inset: 0; z-index: 8990; pointer-events: none; background: none; } .hero .vignette-local, .gong .vignette-local { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 95% at 50% 40%, transparent 45%, rgba(11,13,34,.72) 100%); } @media (prefers-reduced-motion: reduce){ .grain{ animation: none; } } /* --------------------------- CURSOR ------------------------------- */ .cursor { position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none; mix-blend-mode: difference; will-change: transform; } .cursor__ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1.5px solid var(--bone); border-radius: 50%; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, border-color .3s; } .cursor__dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--silver); border-radius: 50%; z-index: 9501; pointer-events: none; } .cursor.is-hover .cursor__ring { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: var(--navy-2); border-color: var(--navy-2); } .cursor__label { position: absolute; inset: 0; display: grid; place-items: center; font: 700 9px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-accent); opacity: 0; transition: opacity .25s; } .cursor.is-hover .cursor__label { opacity: 1; } @media (hover: none) { .cursor, .cursor__dot { display: none; } } /* --------------------------- LAYOUT ------------------------------- */ .wrap { width: var(--wrap); margin-inline: auto; } .section { padding-block: var(--sec); position: relative; } /* les deux seuls écarts autorisés au rythme — utilisés en CLASSE, jamais en style="padding-top:…" (sinon on a six rythmes pour huit pages) */ .section--tight { padding-block: var(--sec-tight); } .section--flush { padding-top: var(--sec-flush); } .split { display: grid; gap: clamp(2rem,5vw,5rem); grid-template-columns: 1fr; } @media (min-width: 900px){ .split { grid-template-columns: 1.05fr 1fr; align-items: center; } } /* bande de contraste — utilisée par /le-club/, /contact/, /coachs/, /tarifs/ et /galerie/. Elle vivait dans club.css, que deux de ces cinq pages ne chargent pas : la moitié des « band » du site étaient donc des sections nues. Un composant partagé vit dans le socle (§5.2). */ /* La bande de contraste. Elle vaut desormais "terrain doux" : gris clair sur une page blanche, et elle herite des tokens du terrain si la section en declare un. */ .band { background: var(--paper-2); border-block: 1px solid var(--hair); } [data-surface="navy"] .band, [data-surface="deep"] .band { background: rgba(255,255,255,.05); border-color: var(--line); } /* eyebrow — le sur-titre. La barre suit --mark (navy sur clair, blanc sur navy) ; les mots suivent --bone. Aucune couleur littérale : la puce fonctionne à l'identique sur les quatre terrains. */ .eyebrow { display: inline-flex; align-items: center; gap: .8ch; font: 700 var(--step--2)/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--steel); } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--mark); flex: 0 0 26px; opacity: .9; } /* Le titre. Archivo Black reste — c'est le lettrage du logo. Ce qui change : l'interlettrage se resserre (-.02em) et l'interligne s'ouvre très légèrement (.92), le réglage qui sépare un titre « criard » d'un titre « affirmé ». */ .display { font-family: var(--f-display); font-weight: 400; line-height: .92; letter-spacing: -.02em; text-transform: uppercase; font-size: var(--step-3); color: var(--bone); text-wrap: balance; } .display--sm { font-size: var(--step-2); } .display--xs { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem); } /* le mot d'accent. Sur fond clair il prend le navy de marque ; sur fond navy, --silver vaut blanc et l'accent se fait par l'opacité du reste. */ .tint { color: var(--mark); } /* la rouille du logo — l'accent RARE. Un mot par page, pas un de plus. */ .tint--rust { color: var(--rust); } [data-surface="navy"] .tint--rust, [data-surface="deep"] .tint--rust { color: var(--rust-400); } .lead { font-size: var(--step-1); line-height: 1.5; color: var(--bone); font-weight: 500; max-width: var(--measure); text-wrap: pretty; } .muted { color: var(--muted); } /* Lisibilité (demande explicite du brief) : tout paragraphe de corps est plafonné à 62ch et respire à 1.7. Une ligne de 110 caractères sur un écran 1440 est la première cause d'abandon de lecture. */ .prose p { max-width: var(--measure); line-height: 1.7; color: var(--read); } .prose p + p { margin-top: 1.1em; } .prose strong { color: var(--bone); font-weight: 700; } /* split-letter reveal helper (JS fills .char) */ .char { display: inline-block; will-change: transform; } /* ---------------------------- BOUTONS ------------------------------ Le balayage vertical de v3 est conservé (c'est une signature du site), mais les paires couleur/fond sont refaites pour tenir sur les QUATRE terrains. v3 avait un défaut réel : au survol, `color: var(--ink)` posait du texte sombre sur un fond qui pouvait l'être aussi. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .8ch; min-height: 48px; /* ≥44px requis ; 48 pour un vrai confort de pouce */ padding: 1.05em 1.9em; font: 700 var(--step--1)/1 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; border: 2px solid currentColor; border-radius: var(--radius); position: relative; overflow: hidden; isolation: isolate; color: var(--bone); text-align: center; text-wrap: balance; transition: color .35s var(--ease), border-color .35s, background-color .35s, transform .35s var(--ease-out), box-shadow .35s var(--ease-out); } .btn span { position: relative; z-index: 2; } .btn::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--bone); transform: translateY(101%); transition: transform .45s var(--ease-out); } .btn:hover::after, .btn:active::after { transform: translateY(0); } .btn:hover, .btn:active { color: var(--bg); } /* PRIMAIRE — l'aplat navy du logo, texte blanc. C'est LE bouton de conversion : il porte une ombre portée et se soulève au survol, pour qu'on le repère sans lire. */ .btn--primary { background: var(--navy-600); border-color: var(--navy-600); color: var(--white); box-shadow: var(--shadow-sm); } .btn--primary::after { background: var(--navy-500); } .btn--primary:hover, .btn--primary:active { color: var(--white); border-color: var(--navy-500); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* sur un terrain déjà navy, l'aplat s'inverse — blanc sur navy */ [data-surface="navy"] .btn--primary, [data-surface="deep"] .btn--primary { background: var(--white); border-color: var(--white); color: var(--navy-600); box-shadow: none; } [data-surface="navy"] .btn--primary::after, [data-surface="deep"] .btn--primary::after { background: var(--paper-2); } [data-surface="navy"] .btn--primary:hover, [data-surface="deep"] .btn--primary:hover { color: var(--navy-600); border-color: var(--white); } /* SECONDAIRE — contour discret. Il ne doit jamais rivaliser avec le primaire : filet fin, pas d'ombre. */ .btn--ghost { background: transparent; border-width: 1.5px; border-color: var(--line); color: var(--bone); } .btn--ghost::after { background: var(--bone); } .btn--ghost:hover, .btn--ghost:active { color: var(--bg); border-color: var(--bone); } /* grand format — hero et gong uniquement */ .btn--lg { min-height: 58px; padding: 1.25em 2.4em; font-size: var(--step-0); letter-spacing: .07em; } .btn--block { width: 100%; } .btn sup { font-size: .6em; } /* le prix dans le bouton — il doit se voir sans casser la capitale */ .btn b { font-weight: 800; } /* keyboard focus — anneau de marque, jamais invisible (QA) */ :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; border-radius: 2px; } .btn:focus-visible { outline-color: var(--mark); outline-offset: 4px; } /* ------------------------- MEDIA (une seule définition) ------------ §5.2 : un composant = une définition. Avant, home.css et club.css déclaraient chacun `.media` avec un grade différent → les photos ne racontaient pas la même salle selon la page. Le grade vit ICI ; home.css / club.css n'overrident QUE le filtre par contexte. */ /* ⚠ LE CHANGEMENT LE PLUS LOURD DE LA REFONTE. v3 imposait `filter: grayscale(1)` à TOUTE photo du site. Cette salle a des tapis orange, des rings bleus et une verrière qui l'éclaire : le grayscale supprimait précisément ce qui la rend désirable, et faisait payer 48 photos professionnelles pour un rendu de photocopie. Les photos repassent en couleur, avec un grade léger (saturation +4 %, contraste +4 %) — assez pour l'unité, jamais assez pour trahir. */ .media { position: relative; overflow: hidden; background: var(--char); border: 0; border-radius: var(--radius); } .media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper-2) 100%); } /* le cartouche de légende — il flottait sur la photo sans fond et devenait illisible dès que le cliché était clair. Il porte maintenant son propre voile. */ .media::after { content: attr(data-label); position: absolute; left: 0; bottom: 0; z-index: 2; padding: 2.4rem 1.1rem .9rem; width: 100%; font: 700 var(--step--2)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #fff; background: linear-gradient(to top, rgba(11,13,34,.78), transparent); } .media[data-label=""]::after, .media:not([data-label])::after { content: none; } .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: saturate(1.04) contrast(1.04); transition: transform 1.1s var(--ease-out), filter .6s var(--ease); } /* respiration au survol — discrète (1.03), jamais un zoom de carrousel */ a:hover > .media img, .media--zoom:hover img, .split__media:hover img { transform: scale(1.03); } /* ----------------------- PAGE HEAD (partagé) ---------------------- §5.2 : les 5 sous-pages posaient LA MÊME règle sous 5 préfixes (.act-head/.co-head/.con-head/.ga-head/.tar-head). La répétition est maintenant HONNÊTE — un composant — et chaque page se différencie par sa STRUCTURE (modifieur + élément propre), pas par un préfixe renommé. /le-club/ garde son hero bespoke 78svh : c'est la page « la salle ». */ /* v4 : l'en-tête de page devient une VRAIE bannière photo. v3 posait la photo à 20 % d'opacité sur du noir — soit une image qu'on ne voyait pas, sur toutes les pages. Ici la photo est pleine, et c'est un voile navy dégradé qui garantit le contraste du texte (et non l'écrasement de l'image). */ .page-head { position: relative; overflow: hidden; padding-top: clamp(9rem,18vh,13rem); padding-bottom: clamp(3.5rem,7vw,5.5rem); background: var(--navy-900); color: #fff; --bone: #fff; --read: #C9CBE4; --muted: #C9CBE4; --mark: #fff; --steel: var(--navy-200); --line: rgba(255,255,255,.18); } .page-head__bg { position: absolute; inset: 0; z-index: 0; opacity: 1; } .page-head__bg .media { position: absolute; inset: 0; border-radius: 0; } .page-head__bg .media::after { content: none; } .page-head__bg .media img { filter: saturate(.92) contrast(1.06) brightness(.62); } .page-head__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,34,.86) 0%, rgba(11,13,34,.62) 45%, rgba(11,13,34,.9) 100%); } .page-head .wrap { position: relative; z-index: 1; } .page-head__lead { max-width: 56ch; margin-top: 1.3rem; color: #DCDDEE; } /* ----------------------------- NAV -------------------------------- */ /* La barre a deux états, et c'est ce qui la rend « haut de gamme » : TRANSPARENTE sur le hero (elle laisse la photo respirer, encre blanche), PLEINE et blanche dès qu'on scrolle (encre navy, logo d'origine). v3 restait sombre dans les deux cas — sur un site devenu blanc, la barre aurait flotté comme un bandeau étranger. */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 8000; display: flex; align-items: center; justify-content: space-between; padding: clamp(.9rem,2vw,1.4rem) var(--gut); transition: transform .5s var(--ease), background .4s var(--ease), box-shadow .4s, padding .4s var(--ease); --bone: #fff; --mark: #fff; --line: rgba(255,255,255,.28); color: #fff; } .nav.is-scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--hair); padding-block: clamp(.6rem,1.4vw,.95rem); --bone: var(--on-light); --mark: var(--navy-600); --line: var(--hair); color: var(--on-light); } .nav.is-scrolled .nav__logo { filter: none; } .nav.is-hidden { transform: translateY(-110%); } /* the open menu owns the screen — the nav (higher z) must fully yield, otherwise its burger-X doubles the menu's FERMER ✕ */ html.is-menu-open .nav { opacity: 0; visibility: hidden; pointer-events: none; transition: none; } /* le logo mesure 24-34px de haut : le LIEN autour doit rester une cible de pouce (QA ≥44px) */ .nav__brand { display: inline-flex; align-items: center; gap: .8ch; min-height: 44px; } .nav__logo { height: clamp(24px, 3vw, 34px); width: auto; filter: brightness(0) invert(1); transition: opacity .3s; } .nav__brand:hover .nav__logo { opacity: .8; } /* le nom de la salle : info, pas décor → os (loi du navy) */ .nav__salle { font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bone); padding-left: .8ch; border-left: 2px solid var(--mark); } .nav__links { display: none; gap: clamp(1rem,1.8vw,1.9rem); } .nav__links a { font: 600 var(--step--1)/1 var(--f-ui); letter-spacing: .02em; text-transform: uppercase; position: relative; padding-block: .4em; color: var(--bone); white-space: nowrap; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--mark); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); } .nav__links a:hover::after, .nav__links a:active::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nav__right { display: flex; align-items: center; gap: 1rem; } .nav__cta { display: none; } /* 1240 et non 1100 : à 1100 les libellés se chevauchaient avec la marque. */ @media (min-width: 1240px){ .nav__links { display: flex; } .nav__cta { display: inline-flex; } } /* Burger → animated, becomes X */ .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 46px; height: 46px; padding: 0 8px; border: 2px solid var(--line); border-radius: 50%; transition: border-color .3s, background .3s; } .burger:hover, .burger:active { border-color: var(--mark); } .burger:active { background: rgba(38,64,115,.45); } .burger span { height: 2px; background: var(--bone); transform-origin: center; transition: transform .4s var(--ease-punch), opacity .25s, width .3s; } .burger span:nth-child(1){ width: 100%; } .burger span:nth-child(2){ width: 70%; } .burger span:nth-child(3){ width: 100%; } .burger:hover span:nth-child(2){ width: 100%; } .is-menu-open .burger span:nth-child(1){ transform: translateY(8px) rotate(45deg); } .is-menu-open .burger span:nth-child(2){ opacity: 0; } .is-menu-open .burger span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); width: 100%; } /* ---------------------- FULL-SCREEN MENU -------------------------- ⚠ `visibility` est OBLIGATOIRE, pas cosmétique : sans elle, le menu fermé (aria-hidden=true) gardait ses 13 liens focusables → le Tab tombait dans un trou noir de 13 arrêts invisibles (WCAG 4.1.2). clip-path + pointer-events ne retirent RIEN du parcours clavier. */ /* grid-template-columns: minmax(0,1fr) — la colonne implicite d'une grille se dimensionne sur le max-content de son plus gros enfant, et ne connaît PAS la largeur du panneau. Un libellé de menu un peu long (« Première fois » en Archivo Black à 41 px) poussait donc la colonne à 397 px dans un écran de 320 : le bouton « Fermer » partait à 332 px, hors de l'écran. Le menu s'ouvrait et ne pouvait plus se fermer au doigt — mesuré à 320 px. Le plancher à 0 interdit ce débordement quel que soit le libellé qu'on ajoutera demain : c'est la cause, pas le symptôme. */ .menu { position: fixed; inset: 0; z-index: 7990; background: var(--navy-900); --char: var(--navy-700); --bone:#fff; --bone-dim:var(--navy-200); --mark:#fff; --silver:#fff; --line:rgba(255,255,255,.16); --muted:#C9CBE4; color: var(--bone); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding: clamp(1.2rem,3vw,2rem) var(--gut) clamp(1.5rem,3vw,2.4rem); clip-path: inset(0 0 100% 0); pointer-events: none; visibility: hidden; transition: clip-path .7s var(--ease-out), visibility 0s linear .7s; } .menu.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; visibility: visible; transition: clip-path .7s var(--ease-out), visibility 0s linear 0s; } .menu__bg { position: absolute; inset: 0; z-index: 0; opacity: .3; } .menu__bg video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.1) brightness(.5); } .menu__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, var(--navy-deep), transparent 60%); mix-blend-mode: multiply; } .menu__top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; } .menu__close { font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bone); display: inline-flex; align-items: center; gap: .7ch; min-height: 44px; padding: .4em .2em; transition: color .3s; } /* le survol éclaircit : sur le noir, seule la lumière porte le petit texte */ .menu__close:hover, .menu__close:active { color: var(--white); } /* align-self:center laissait la liste grandir hors du cadre : neuf liens a 10.5vw font 1357 px dans un ecran de 841, et « Contact » devenait inatteignable — .menu est fixed, rien ne defile. La rangee 1fr borne desormais la liste (stretch + min-height:0), qui reste centree tant qu elle tient et defile au-dela. */ .menu__nav { position: relative; z-index: 2; align-self: stretch; justify-content: center; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: clamp(.35rem,1vw,.4rem); } /* padding-block : la taille du mot est l'identité, la boîte autour ne l'est pas — 39.5px → ~49px sans toucher à l'échelle typo (QA thumb ≥44px) */ /* Le mot du menu se mesure sur la LARGEUR, pas seulement sur la hauteur de l'écran : à 320 px, 11vw = 35 px et le plancher de 2,6rem reprenait la main à 41,6 px — un libellé de treize lettres ne rentrait plus dans les 281 px utiles. Le plancher descend à 2,05rem (33 px) : neuf entrées tiennent toujours d'un coup d'œil, et le mot le plus long tient sur sa ligne. `min-width: 0` autorise le rétrécissement si un jour il le faut — un mot coupé reste lisible, un bouton hors écran ne l'est pas. */ /* 10.5vw seul est aveugle a la hauteur : le plafond en vh fait tenir les neuf entrees dans un seul ecran, quelle que soit la fenetre. */ .menu__link { font-family: var(--f-display); font-size: clamp(1.5rem, min(10.5vw, 5.5vh), 7rem); line-height: .95; padding-block: .12em; text-transform: uppercase; color: var(--bone); display: inline-flex; align-items: baseline; gap: 1.2rem; width: max-content; max-width: 100%; min-width: 0; transition: color .3s, transform .5s var(--ease-out); } .menu__link .n { font: 700 clamp(.7rem,1.4vw,1rem)/1 var(--f-mono); color: var(--bone-dim); } .menu__link:hover, .menu__link:active { color: var(--silver); transform: translateX(18px); } /* Sur téléphone, 10.5vw donnait 39 px de capitales dans une boîte de 44 : 7 px d’air en tout, et le plus long libellé courait sur 337 px de 375. Neuf lignes ainsi tassées se lisent comme un mur, pas comme un menu. On descend le corps pour rendre l’air à la cible tactile — qui garde ses 44 px — et on desserre l’interligne. */ @media (max-width: 620px){ .menu__link { font-size: clamp(1.4rem, 7.2vw, 2.2rem); } .menu__nav { gap: .5rem; } } .menu__link:hover .n, .menu__link:active .n { color: var(--bone); } .menu__foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 1.4rem; } /* :not(.btn) — sinon cette règle repeignait le CTA principal du menu mobile en argent SUR NAVY = 1.9:1 (le bouton le plus important du site). Le footer avait déjà le :not(.btn) 24 lignes plus bas. */ .menu__foot a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .2em; font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); transition: color .3s; } .menu__foot a:not(.btn):hover, .menu__foot a:not(.btn):active { color: var(--white); } /* --------------------------- MARQUEE ------------------------------ */ /* Le bandeau defilant devient un RUBAN NAVY pleine largeur : il sert de separateur entre deux sections claires et rappelle la couleur de marque sans meubler une section entiere. */ .marquee { overflow: hidden; padding-block: clamp(.9rem,2vw,1.3rem); background: var(--navy-600); color: #fff; border: 0; } .marquee__track span::after { color: rgba(255,255,255,.45); } .marquee__track { display: inline-flex; gap: 2.2rem; white-space: nowrap; will-change: transform; } .marquee__track span { font-family: var(--f-display); font-size: clamp(1.4rem,3.6vw,2.8rem); text-transform: uppercase; display: inline-flex; align-items: center; gap: 2.2rem; } .marquee__track span::after { content: "✦"; font-size: .5em; color: var(--mark); } /* --------------------------- REVEAL FX ---------------------------- */ html.fx [data-reveal] { opacity: 0; transform: translateY(40px); } .reveal-mask { display: block; overflow: hidden; } .reveal-mask > span { display: block; } html.fx .reveal-mask > span { opacity: 0; } /* ---------------------------- FOOTER ------------------------------ */ .footer { background: var(--navy-900); color: #fff; --char: var(--navy-700); --bone:#fff; --bone-dim:var(--navy-200); --mark:#fff; --silver:#fff; --line:rgba(255,255,255,.14); --muted:#C9CBE4; --steel:var(--navy-300); border-top: 0; padding-block: clamp(2.5rem,5vw,4rem) 2rem; position: relative; overflow: hidden; } .footer__big { font-family: var(--f-display); text-transform: uppercase; line-height: .86; font-size: clamp(2.4rem, 8.5vw, 7rem); color: transparent; -webkit-text-stroke: 1.5px var(--line); letter-spacing: -.01em; padding-bottom: clamp(1rem,3vw,2.4rem); max-width: 14ch; } .footer__grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; padding-block: 2.2rem; border-top: 1px solid var(--line); } @media (min-width: 760px){ .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } /* titre de colonne : os + filet argent (loi du navy) */ .footer__col h4 { display: flex; align-items: center; gap: .7ch; font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bone); margin-bottom: 1rem; } .footer__col h4::before { content: ""; width: 18px; height: 2px; background: var(--mark); flex: 0 0 18px; } /* ≥44px : le footer est la nav secondaire du site — 13 liens à 36.4px, sur les 8 pages, c'était le manque systématique (QA) */ .footer__col a:not(.btn) { display: flex; align-items: center; min-height: 44px; color: var(--muted); padding-block: .7em; transition: color .3s; } .footer__col p { display: block; color: var(--muted); padding-block: .35em; } .footer__col a:not(.btn):hover, .footer__col a:not(.btn):active { color: var(--bone); } .footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-top: 1.6rem; border-top: 1px solid var(--line); font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .08em; color: var(--bone-dim); } /* ========================= FINAL GONG ========================== Shared closing-CTA chrome — lives here (base) because it appears on ALL 8 pages (home.css / club.css both rely on it). Page CSS only sets the .gong__bg .media img photo filter. ⚠ L'EYEBROW de chaque gong est PROPRE À SA PAGE (§5.9) — « Le gong final » ×7 + États-Unis, c'était un template, pas une formule. */ .gong { position: relative; overflow: hidden; text-align: center; padding-block: clamp(6rem,13vw,11rem); background: var(--navy-900); color:#fff; --bone:#fff; --read:#C9CBE4; --muted:#C9CBE4; --mark:#fff; --silver:#fff; --line:rgba(255,255,255,.16); --bone-dim:var(--navy-200); } .gong__bg { position: absolute; inset: 0; z-index: 0; opacity: .35; } .gong__bg .media { position: absolute; inset: 0; } .gong__inner { position: relative; z-index: 2; width: min(92vw, 60ch); margin-inline: auto; } .gong h2 { margin-block: 1rem 1.4rem; } .gong .lead { margin-inline: auto; max-width: 46ch; color: var(--read); } .gong__cta { margin-top: 2rem; display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .gong .eyebrow { justify-content: center; } /* ------------------------- LA PASTILLE --------------------------- L'ICÔNE EST UN GANT DE BOXE — la marque de la maison, pas la bulle de messagerie de tout le monde. Tracé unique, courbes pleines, lisible à 24px comme à 56px (le poing, le poignet, la bande : trois masses, zéro détail qui se referme en petit). ⚠ Un aplat navy sur le fond profond mesure 1.30:1 : SANS bordure, la pastille n'a plus de forme. L'anneau argent (9.83:1) la dessine, le gant blanc la remplit à 14.6:1. */ .chatbot { position: fixed; right: clamp(1rem,2.5vw,2rem); bottom: clamp(1rem,2.5vw,2rem); z-index: 8500; height: 56px; width: 56px; display: inline-flex; align-items: center; overflow: hidden; background: var(--navy); color: var(--white); border: 2px solid var(--silver); border-radius: 100px; box-shadow: 0 10px 30px rgba(5,8,15,.65); transition: width .45s var(--ease-punch), transform .35s var(--ease), box-shadow .35s, background .35s; } .chatbot__icon { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; } .chatbot__icon svg { width: 26px; height: 26px; } .chatbot__label { white-space: nowrap; font: 700 var(--step--1)/1 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; padding-right: 1.5rem; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .35s var(--ease); } .chatbot:hover, .chatbot:active { width: 15rem; transform: translateY(-3px); background: var(--navy-2); box-shadow: 0 16px 42px rgba(5,8,15,.75); } .chatbot:hover .chatbot__label, .chatbot:active .chatbot__label { opacity: 1; transform: none; } .chatbot::after { content: ""; position: absolute; inset: -2px; border-radius: 100px; border: 2px solid var(--silver); opacity: .55; animation: chatpulse 2.4s var(--ease) infinite; pointer-events: none; } .chatbot:hover::after { animation: none; opacity: 0; } @keyframes chatpulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.3); opacity: 0; } } /* touch : pas de hover → le libellé doit être LÀ. Sinon le chemin le plus court vers la salle est une pastille navy muette (§5.4 touch-life) */ @media (hover: none) { .chatbot { width: auto; } .chatbot__label { opacity: 1; transform: none; } .chatbot::after { animation: none; opacity: 0; } } /* --------------------------- HELPERS ------------------------------ */ .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; } .scroll-cue { display: inline-flex; align-items: center; gap: 1ch; font: 700 var(--step--1)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone); } .scroll-cue .line { width: 60px; height: 2px; background: var(--mark); position: relative; overflow: hidden; } .scroll-cue .line::after { content: ""; position: absolute; inset: 0; background: var(--bone); transform: translateX(-100%); animation: cue 1.8s var(--ease) infinite; } @keyframes cue { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} } /* ---------------------- FAQ / ACCORDÉON (partagé) ----------------- Composant du SYSTÈME, pas d'une page : /contact/ porte la FAQ canonique (+ son FAQPage) et /tarifs/ les questions d'argent — deux pages qui ne chargent pas la même feuille secondaire. Il a donc sa place ici, une fois, et pas deux copies qui divergent. ⚠ `visibility` obligatoire : sans elle, `max-height:0` laisse les réponses dans l'arbre d'accessibilité pendant qu'aria-expanded="false" affirme le contraire — un mur de texte au lecteur d'écran. ⚠ Et elle n'est PAS transitionnée. L'astuce `visibility 0s linear .5s` (garder le texte visible le temps du repli) ne retombait pas : mesuré sur la page servie, un panneau ouvert puis refermé restait `visible`, donc lisible au lecteur d'écran, pendant qu'aria-expanded disait « fermé ». Le sursis est maintenant porté par `.is-closing`, posé et retiré par site.js sur une horloge — un état qu'on peut vérifier. ⚠ La question est un