/* ========================================================= Padel Teambuilding (padel-teambuilding.be) Wel Padel (Welkenraedt) & Le Midi - Padel Club (Verviers) Site one-page - Thème CLAIR, épuré et premium. Charte Wel Padel : OR/DORÉ (#C09020) sur fond blanc/crème, lignes nettes. Touches bordeaux (#7A0011) réservées à l'identité du Midi (logo, pastilles). Animations reprises du site Le Midi + du site Black Pepper. ========================================================= */ /* ---------- Polices auto-hébergées ---------- DEUX familles, chacune avec son métier. C'est le partage éditorial du design Anthropic (claude.com), repris ici tel quel : une serif de labeur pour tout ce qui se proclame, une sans humaniste pour tout ce qui se lit. - TITRES : Cormorant Garamond, en variable (300 à 700). C'est le substitut libre documenté de Copernicus / Tiempos Headline, les serifs propriétaires d'Anthropic. On la pose à la graisse 500 avec un interlettrage négatif : jamais en gras. Une serif de titre passée à 700 devient tonitruante, et le dessin perd exactement ce qu'on est venu y chercher. - TEXTE, NAVIGATION, BOUTONS, ÉTIQUETTES : Inter, en variable (100 à 900). C'est le substitut libre de StyreneB. Humaniste, dessinée pour l'écran, elle tient les petits corps et les capitales espacées sans se déformer. Ce que l'ancienne version reprochait au duo serif + sans (« deux alphabets dans le même bloc ») venait d'un mauvais partage, pas du principe : le serif y descendait jusque dans le texte courant. Ici la frontière est nette. Serif au dessus de 1,2 rem et sur les seuls titres, chiffres et prix ; sans partout ailleurs. Un bloc de texte ne mélange jamais les deux. Les deux fichiers sont servis depuis notre serveur : rien ne part chez Google au chargement (RGPD), et la CSP stricte l'exige. Voir assets/fonts/LICENSE.md. */ @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorantgaramond-latin-var.woff2") format("woff2-variations"); src: url("../fonts/cormorantgaramond-latin-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; 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: "Inter"; src: url("../fonts/inter-latin-var.woff2") format("woff2-variations"); src: url("../fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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; } /* ---------- Variables ---------- */ :root { /* Base NOIR & BLANC : tons neutres, le doré du logo Wel n'intervient qu'en touches. */ --paper: #FFFFFF; /* fond principal blanc pur */ --paper-2: #F3F3F1; /* section alternée (gris neutre très clair) */ --paper-3: #FFFFFF; /* cartes */ --paper-4: #F8F8F6; /* carte hover */ --ink: #0E0E0E; /* noir (texte titres) */ --ink-2: #141414; /* fonds sombres (bandes) */ --ink-3: #0A0A0A; /* fond sombre profond (footer, scrims) */ --body: #3C3C3C; /* texte courant sur fond clair */ --muted: #6F6F6F; /* texte secondaire sur fond clair - 5,03:1 sur blanc */ /* SUR FOND SOMBRE UNIQUEMENT. Mesuré à 2,27:1 sur blanc, il n'y passe donc aucun texte : sur les bandes noires, il monte à 9,4:1 et fait très bien son travail. Trois usages traînaient sur fond clair (mention RGPD, lieux de la mosaïque, textes indicatifs des champs), tous repassés en --muted. */ --muted-2: #ACACAC; /* texte tertiaire, RÉSERVÉ aux fonds sombres */ --gold: #C09020; /* doré EXACT du logo Wel Padel (accent unique) */ --gold-bright: #D8AE3E; /* doré éclairci (accents, halos) */ --gold-soft: #E7CE86; /* doré pâle (accents sur fond sombre) */ /* Le doré du texte sur fond clair. #9A7016 tombait à 4,46:1 sur blanc et 4,02:1 sur le gris des sections alternées, sous le seuil de 4,5:1 - pour treize sur-titres, tous les libellés du formulaire et « Afficher la carte ». #8A6413 monte à 5,37:1 sans changement de teinte perceptible. */ --gold-deep: #8A6413; /* doré foncé (texte doré sur fond clair) */ --grad-gold: linear-gradient(135deg, #D8AE3E 0%, #C09020 48%, #9A7016 100%); --cream: #F7F7F5; /* presque-blanc neutre (texte sur fond sombre) */ /* Teintes qui traînaient en dur dans la feuille, désormais nommées. Une couleur n'existe vraiment dans un système que si elle porte un nom : sinon on la recopie, on l'approxime d'un point, et la charte se disperse sans qu'on le voie. --ink-soft, elle, était APPELÉE sans avoir jamais été déclarée : le croquis des bulles tombait silencieusement sur sa valeur de repli. */ --ink-soft: #3A3A38; /* gris chaud des aplats de croquis */ --ink-hover: #262626; /* noir éclairci, survol des boutons pleins */ --ink-menu: #1D1A12; /* départ du dégradé du menu mobile */ --midi: #7A0011; /* bordeaux EXACT du logo Le Midi - Padel Club */ --midi-clair: #C4394F; /* bordeaux éclairci, lisible sur photo sombre */ --photo-fond: #E9E3D6; /* fond d'attente d'une image qui charge */ --erreur: #B3261E; /* champ fautif, message d'échec */ --erreur-fond: #FFF7F6; --succes: #1F6B3B; /* demande bien partie */ --succes-fond: #F0F8F2; --facebook: #1877F2; /* couleur de marque tierce, la seule de la page */ --line: rgba(14, 14, 14, .14); /* filet neutre (cartes, séparateurs) */ --line-soft: rgba(14, 14, 14, .08); --line-on-dark: rgba(255, 255, 255, .15); --shadow: 0 26px 64px rgba(60, 44, 8, .16); --shadow-sm: 0 12px 32px rgba(60, 44, 8, .12); --shadow-gold: 0 14px 34px rgba(192, 144, 32, .34); --radius: 14px; --radius-lg: 22px; --container: 1200px; --header-h: 88px; --ease-out: cubic-bezier(.16, 1, .3, 1); /* Les deux piles, et la frontière entre elles. `--font-display` ne sert QUE aux titres, aux chiffres et aux prix. `--font-body` sert à tout le reste, texte courant compris. */ --font-display: "Cormorant Garamond", "Tiempos Headline", Garamond, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) - 10px); -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--font-body); color: var(--body); background: var(--paper); line-height: 1.6; font-size: 17px; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: clip; /* Inter a un axe optique (opsz). Laissé libre, il redessine les lettres quand le corps change : deux paragraphes voisins de tailles différentes semblent alors composés dans deux polices. On le fige une fois pour toutes, ici, pour toute la page : un seul dessin de sans, quelle que soit la taille. */ font-optical-sizing: none; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } section { position: relative; } ::selection { background: var(--gold); color: #fff; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible { outline-offset: 4px; border-radius: 10px; } .carousel__arrow:focus-visible { outline-offset: 4px; border-radius: 50px; } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 26px; } .section { padding: clamp(72px, 9vw, 132px) 0; } .nowrap { white-space: nowrap; } /* Lien d'évitement. Il ne se voit qu'au clavier, et c'est tout l'intérêt : celui qui tabule n'a plus à traverser les quatre entrées de menu, les deux pastilles et le bouton de devis avant d'atteindre la page. */ .skip-link { position: fixed; top: 10px; left: 10px; z-index: 400; transform: translateY(-200%); background: var(--ink); color: var(--cream); padding: 13px 20px; border-radius: 10px; font-family: var(--font-body); font-weight: 500; font-size: .875rem; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .skip-link:focus { transform: none; } /* Le contenu principal reçoit le focus au clic sur le lien d'évitement ; il ne porte pas de contour, il n'est pas une commande. */ #contenu:focus { outline: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .split__cta { margin-top: 28px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* ---------- Typographie ---------- */ /* LES TITRES SONT EN SERIF, ET JAMAIS EN GRAS. Graisse 500 (le réglage documenté pour Cormorant Garamond quand elle remplace Copernicus), interlettrage négatif de -.02em. Ces deux valeurs vont ensemble : sans le resserrage, une serif de titre s'étale et sonne « document Word » ; avec une graisse plus lourde, elle crie. La hiérarchie vient du corps et du changement d'alphabet, pas de l'épaisseur du trait. */ h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; color: var(--ink); letter-spacing: -.02em; text-wrap: balance; hyphens: none; } /* Cormorant Garamond a une hauteur d'œil basse : à corps égal, ses minuscules sont nettement plus petites que celles d'une sans. Tous les corps de titre du fichier ont donc été relevés d'environ 12 % pour retrouver la présence qu'avaient les anciens titres. Ce n'est pas un choix de mise en page, c'est la compensation d'un changement de dessin. */ /* Chiffres alignés partout. Une Garamond compose volontiers en chiffres elzéviriens (le 3, le 4, le 7 descendent sous la ligne) : sur les compteurs du tableau d'affichage, dont chaque chiffre vit dans une fenêtre d'exactement 1 em, les jambages seraient tout simplement rognés. */ h1, h2, h3, .stat__num, .ardoise__montant, .ardoise__devise, .step__num, .odo { font-variant-numeric: lining-nums tabular-nums; } /* Texte courant : équilibrage des fins de ligne (anti-orphelins) + pas de césure */ p { text-wrap: pretty; hyphens: none; } /* Les commandes de formulaire n'héritent pas de la police du document : le navigateur leur impose Arial 13,33 px. La plupart de nos boutons portent leur texte dans un enfant stylé, donc le défaut ne se voyait que sur la croix de fermeture de la visionneuse. On le règle une fois pour toutes, plutôt que de le rattraper au cas par cas à la prochaine commande ajoutée. */ button, input, select, textarea { font: inherit; color: inherit; } /* ---- UNE PHRASE NE DÉMARRE JAMAIS EN FIN DE LIGNE ---- Chaque phrase des paragraphes et des titres est enveloppée dans un par la passe de dactylographie. Rendue en boîte en ligne, la phrase qui ne tient pas dans ce qui reste de la ligne bascule ENTIÈRE à la suivante, au lieu d'y abandonner ses trois premiers mots. Une phrase plus longue qu'une ligne, elle, démarre en début de ligne et se répartit normalement : rien n'est figé. Pourquoi pas l'espace insécable, qui est le réflexe habituel : une insécable ne vaut que pour la largeur qu'on avait sous les yeux en la posant. Elle règle le défaut en 1440 px et le recrée en 900. La boîte en ligne, elle, tient à toutes les largeurs, sans qu'on ait à re-mesurer à chaque texte. Les insécables restent, mais pour ce qu'elles font vraiment bien : empêcher un petit mot de finir une ligne, et un montant de quitter son symbole. */ .phrase { display: inline-block; } .kicker { display: inline-block; font-family: var(--font-body); /* Étiquette en capitales : graisse 500 et interlettrage modéré. Le .34em d'avant compensait une sans plus étroite ; Inter n'en a pas besoin, et le design de référence pose ses capitales à environ .13em. */ font-weight: 500; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 18px; /* Sur mobile, un sur-titre long se coupe et laisse un mot seul en bas (« ... PROVINCE DE / LIÈGE »). On équilibre les deux lignes, comme pour les titres : plus de mot orphelin, quelle que soit la largeur. */ text-wrap: balance; } .section-title { font-size: clamp(2.15rem, 4.3vw, 3.35rem); margin-bottom: 14px; text-wrap: balance; font-weight: 500; } /* Le mot en doré ne survit QUE dans le titre du hero. Répété à chaque section, il devenait un tic : on lisait la même page huit fois. */ .hero h1 em { font-style: normal; color: var(--gold-soft); } /* Aucun fichier italique de Cormorant Garamond n'existe dans assets/fonts/ : le navigateur penchait les lettres mécaniquement (largeur identique au romain au pixel près). On garde l'emphase, portée par le doré, comme le H1. Un titre de section est sur fond CLAIR : c'est --gold-deep (5,37:1) qu'il lui faut, et non le doré pâle du H1, réservé aux fonds sombres (1,5:1 ici). */ .section-title em { font-style: normal; color: var(--gold-deep); } .cta-band .section-title em { color: var(--gold-soft); } /* Sous-titre de section : aligné à gauche, jamais centré. Le centrage systématique du couple titre + chapeau est la signature la plus reconnaissable des pages générées ; ici chaque section choisit son propre appui. */ .lead { font-size: clamp(1.04rem, 1.5vw, 1.18rem); color: var(--muted); max-width: 56ch; text-align: left; text-wrap: pretty; } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: .875rem; line-height: 1; letter-spacing: 0; padding: 12px 22px; border-radius: 10px; cursor: pointer; border: 1.5px solid transparent; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; white-space: nowrap; /* 40 px de haut au doigt, c'est quatre de moins que le minimum confortable. Le bouton grandit de quatre pixels, personne ne le verra ; ceux qui visent mal, si. */ min-height: 44px; } .btn:hover { transform: translateY(-2px); } /* Système épuré N&B : primaire NOIR sur fond clair, pastille BLANCHE sur fond sombre. Plus aucun doré sur les boutons (le doré ne reste que sur les micro-accents). */ .btn-gold { background: var(--ink); color: var(--cream); } .btn-gold:hover { background: var(--ink-hover); box-shadow: var(--shadow-sm); } .hero .btn-gold, .cta-band .btn-gold, .mobile-menu .btn-gold, .header .btn-gold { background: var(--cream); color: var(--ink); } .hero .btn-gold:hover, .cta-band .btn-gold:hover, .mobile-menu .btn-gold:hover, .header .btn-gold:hover { background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); } .header.scrolled .btn-gold { background: var(--ink); color: var(--cream); } .header.scrolled .btn-gold:hover { background: var(--ink-hover); } .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); } .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; } /* Bouton secondaire sur fond sombre (ardoise) */ .btn-outline-light { background: transparent; color: var(--cream); border-color: rgba(255, 255, 255, .38); } .btn-outline-light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } /* LA FLÈCHE EST UN DESSIN, PAS UN CARACTÈRE. Elle apparaît 9 fois, toujours sur un appel à l'action, et U+2192 (→) est ABSENT des deux .woff2 : ce sont les sous-ensembles « latin » de Google Fonts, qui embarquent ↑ et ↓ mais pas →. Élargir la plage unicode-range n'y change rien, le glyphe n'existe pas dans le fichier ; la flèche partait donc à la police système, avec une graisse étrangère au libellé d'à côté. En SVG, elle suit `currentColor`, son trait s'accorde au texte, et elle ne dépend plus d'aucune police. */ .arrow { display: inline-flex; align-items: center; vertical-align: -.12em; } .arrow svg { width: .95em; height: .95em; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .btn .arrow { transition: transform .25s ease; } .btn:hover .arrow { transform: translateX(4px); } /* ========================================================= HEADER (ultra épuré, transparent puis verre dépoli) ========================================================= */ .header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 100; display: flex; align-items: center; /* `height` ne fait plus partie de la transition. C'est une propriété de MISE EN PAGE : l'animer obligeait le navigateur à refaire la géométrie de la barre à chaque image pendant 450 ms, et ce à chaque franchissement du seuil de 60 px de défilement, donc plusieurs fois par lecture. Le changement de gabarit est désormais net ; ce qui s'anime, ce sont les couleurs, l'ombre et le filet, qui ne coûtent qu'une peinture. */ transition: background .45s ease, box-shadow .45s ease, border-color .45s ease, transform .35s ease; border-bottom: 1px solid transparent; } .header.is-hidden { transform: translateY(-100%); } .header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* Le logo ne se comprime jamais. La cinquième entrée du menu le rétrécissait sous 1000 px, jusqu'à écraser la signature du Midi contre le premier lien : c'est le menu qui se resserre, pas la marque. */ .brand { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex-shrink: 0; } /* ---- Logotype « Padel Teambuilding » ---- Purement typographique (charte du 21/08/2026) : deux graisses d'Inter, un filet qui représente le filet de padel (doré en haut, bordeaux en bas), une balle. Composé en CSS, jamais en image : net à toutes les tailles, aucun asset à charger. Les valeurs (em) et la structure viennent telles quelles de la charte graphique fournie par le client. */ .brand__mark { display: inline-flex; align-items: center; gap: .42em; font-family: var(--font-body); font-size: 22px; font-weight: 300; line-height: 1; letter-spacing: -.025em; color: #fff; white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); transition: color .45s ease, text-shadow .45s ease, font-size .45s ease; } .brand__mark-b { font-weight: 600; display: inline-flex; align-items: baseline; gap: .1em; } .brand__mark-rule { width: .045em; height: 1.03em; flex: 0 0 auto; background: linear-gradient(var(--gold) 0%, var(--gold) 42%, var(--midi-clair) 58%, var(--midi-clair) 100%); transition: background .45s ease; } .brand__mark-dot { width: .2em; height: .2em; border-radius: 999px; flex: 0 0 auto; background: var(--midi-clair); transition: background .45s ease; } .header.scrolled .brand__mark { font-size: 19px; color: var(--ink); text-shadow: none; } .header.scrolled .brand__mark-rule { background: linear-gradient(var(--gold) 0%, var(--gold) 42%, var(--midi) 58%, var(--midi) 100%); } .header.scrolled .brand__mark-dot { background: var(--midi); } /* Pied de page : fond toujours sombre, donc toujours la version claire du logo */ .brand__mark--dark { font-size: 26px; color: #fff; text-shadow: none; } /* ---- Attribution « by Wel Padel · Le Midi », sous le logo commun ---- Discrète et subordonnée : les deux clubs restent visibles sur chaque page, sans reformer un double logo à poids égal avec la marque commune. */ .brand__by { display: flex; align-items: center; gap: 7px; } /* .75rem = 12px, le plancher typographique du site (skill typographie-web) : sous cette taille, un libellé fonctionnel devient illisible en petit corps. */ .brand__by-label { font-family: var(--font-body); font-weight: 500; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); transition: color .45s ease; } .header.scrolled .brand__by-label { color: var(--muted); } .brand__logo { position: relative; display: flex; align-items: center; } .brand__sep { width: 1px; height: 19px; background: rgba(255, 255, 255, .38); transition: background .45s ease; } .header.scrolled .brand__sep { background: var(--line); height: 17px; } /* Même raison que pour la barre : les logos changent de taille d'un coup, en même temps qu'elle. Seule l'opacité (logo clair vers logo foncé) reste animée. */ .brand__img { height: 21px; width: auto; display: block; transition: opacity .45s ease; } .brand__img--light { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .3)); } .brand__img--dark { position: absolute; inset: 0; opacity: 0; } .header.scrolled { background: rgba(251, 250, 246, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); height: 72px; border-bottom: 1px solid var(--line); box-shadow: 0 8px 30px rgba(60, 44, 8, .07); } .header.scrolled .brand__img { height: 19px; } .header.scrolled .brand__img--light { opacity: 0; } .header.scrolled .brand__img--dark { opacity: 1; } /* Pied de page : logos des clubs en petit, sous le logo commun. Tailles ajustées plus bas, avec le reste des règles `.footer`. */ .brand__by--footer { gap: 10px; } .nav { display: flex; align-items: center; gap: 28px; } .nav__links { display: flex; gap: 24px; } /* Deux états à ne JAMAIS confondre : - « actif » = la section où l'on se trouve. Doré, trait plein. Un seul à la fois. - « survolé » = la section où l'on pourrait aller. Trait neutre et plus fin. Avant, les deux avaient exactement le même style : en survolant un lien, deux entrées apparaissaient dorées et soulignées, comme si on était aux deux endroits en même temps. */ .nav__links a { font-weight: 500; font-size: .875rem; color: #fff; position: relative; padding: 5px 0; letter-spacing: 0; transition: color .25s ease; text-shadow: 0 1px 10px rgba(0,0,0,.35); } /* Le trait est là en permanence, replié sur lui-même : on l'ouvre en `scaleX`, qui se joue sur le compositeur, au lieu d'animer sa largeur, qui repasse par la mise en page. Même mouvement à l'œil, rien à recalculer. */ .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s ease; } /* Le survol NE SOULIGNE PAS. Le soulignement est réservé à la section courante : il ne peut donc jamais y en avoir deux à l'écran. Survoler change seulement la teinte du mot, ce qui suffit à dire « ce lien est cliquable ». */ .nav__links a:hover:not(.active) { color: rgba(255, 255, 255, .72); } .header.scrolled .nav__links a { color: var(--ink); text-shadow: none; } .header.scrolled .nav__links a:hover:not(.active) { color: var(--muted); } /* Section courante : le seul doré de la barre */ .nav__links a.active { color: var(--gold-soft); } .header.scrolled .nav__links a.active { color: var(--gold-deep); } .nav__links a.active::after { transform: scaleX(1); } /* Lien social dans le header */ .nav__fb, .nav__gps { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; } .nav__fb svg { width: 16px; height: 16px; display: block; } .header.scrolled .nav__fb, .header.scrolled .nav__gps { color: var(--ink); background: rgba(22, 20, 14, .05); border-color: var(--line); } .nav__fb:hover { background: var(--facebook); border-color: var(--facebook); color: #fff; transform: translateY(-2px); } /* Pastille GPS : même gabarit que Facebook, doré au survol (couleur de marque, là où Facebook prend la sienne). L'épingle est un peu plus grande que le « f » : à 16 px son cercle intérieur se bouche et le pictogramme devient une tache. */ .nav__gps svg { width: 19px; height: 19px; display: block; } .nav__gps:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-2px); } /* Burger. C'est la commande de navigation principale du mobile, et elle faisait 42 × 34 px, sous les 44 px recommandés au doigt. Le dessin ne change pas : c'est la zone sensible autour qui s'agrandit. */ .burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; z-index: 120; } .burger span { width: 26px; height: 2.5px; background: #fff; border-radius: 2px; transition: .3s ease; box-shadow: 0 1px 6px rgba(0,0,0,.3); } .header.scrolled .burger span { background: var(--ink); box-shadow: none; } .burger.open span { background: #fff; box-shadow: none; } .burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Menu mobile */ .mobile-menu { position: fixed; inset: 0; background: linear-gradient(165deg, var(--ink-menu), var(--ink-3)); z-index: 110; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 4px; padding: calc(var(--header-h) + 10px) 24px calc(30px + env(safe-area-inset-bottom)); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; } .mobile-menu.open { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s 0s; } .mobile-menu a { font-family: var(--font-display); font-size: 2.3rem; font-weight: 500; letter-spacing: -.02em; color: var(--cream); padding: 9px 0; } .mobile-menu a:hover { color: var(--gold-soft); } .mobile-menu .btn { margin-top: 22px; font-family: var(--font-body); font-size: 1rem; } .mobile-menu__contact { margin-top: 28px; color: var(--gold-soft); font-size: .9rem; letter-spacing: .04em; text-align: center; font-family: var(--font-body); } .mobile-menu > * { opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s var(--ease-out); } .mobile-menu.open > * { opacity: 1; transform: none; } .mobile-menu.open > *:nth-child(1) { transition-delay: .10s; } .mobile-menu.open > *:nth-child(2) { transition-delay: .15s; } .mobile-menu.open > *:nth-child(3) { transition-delay: .20s; } .mobile-menu.open > *:nth-child(4) { transition-delay: .25s; } .mobile-menu.open > *:nth-child(5) { transition-delay: .30s; } .mobile-menu.open > *:nth-child(6) { transition-delay: .35s; } .mobile-menu.open > *:nth-child(7) { transition-delay: .40s; } .mobile-menu.open > *:nth-child(8) { transition-delay: .45s; } body.nav-open .header { z-index: 130; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } body.nav-open .header .brand__img--light { opacity: 1; } body.nav-open .header .brand__img--dark { opacity: 0; } body.nav-open .burger span { background: #fff; } /* Le verrou de marque est du texte, pas une image : le bloc au-dessus ne le couvrait pas, et il restait en noir sur le fond noir du menu (1,11:1). */ body.nav-open .header .brand__mark { color: #fff; text-shadow: none; } body.nav-open .header .brand__mark-rule { background: linear-gradient(var(--gold) 0%, var(--gold) 42%, var(--midi-clair) 58%, var(--midi-clair) 100%); } body.nav-open .header .brand__mark-dot { background: var(--midi-clair); } body.nav-open .header .brand__by-label { color: rgba(251, 250, 246, .65); } /* ========================================================= HERO (bannière cinématographique premium) ========================================================= */ /* Le contenu s'ancre en bas à gauche, pas au centre géométrique. Un titre centré sur une photo plein écran est LE gabarit d'accueil par défaut ; en le calant en bas à gauche, la bannière se met à ressembler à une affiche. */ .hero { /* Un moteur qui ne connaît pas l'unité svh ignore toute la déclaration et la bannière s'effondre à la hauteur de son contenu. La ligne vh la rattrape. */ min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; justify-content: flex-start; text-align: left; overflow: hidden; padding: calc(var(--header-h) + 30px) 26px 108px; } /* Diptyque : les deux clubs côte à côte, séparés d'une couture diagonale dorée. Chaque moitié = un wrapper clippé (clip-path) + une image interne animée (Ken Burns), pour que la couture reste parfaitement stable pendant l'animation. */ /* La position de la couture est pilotée par une seule variable : --split (en %). 50 = équilibre parfait. Le curseur la déplace, elle revient seule au centre. */ @property --split { syntax: ""; inherits: true; initial-value: 50; } .hero { --split: 50; } .hero__bg { position: absolute; inset: 0; z-index: -2; } .hero__half { position: absolute; inset: 0; overflow: hidden; } .hero__half--wel { clip-path: polygon(0 0, calc(var(--split) * 1% + 4.8%) 0, calc(var(--split) * 1% - 4.2%) 100%, 0 100%); } .hero__half--midi { clip-path: polygon(calc(var(--split) * 1% + 4.2%) 0, 100% 0, 100% 100%, calc(var(--split) * 1% - 4.8%) 100%); } .hero__half-img { position: absolute; inset: 0; display: block; background: center / cover no-repeat; animation: kenburns 26s ease-in-out infinite alternate; } /* WebP avec repli JPEG : la ligne url() sert les navigateurs sans image-set, image-set() sert le WebP (environ le quart du poids) à tous les autres. */ .hero__half--wel .hero__half-img { background-image: url('../img/hero.jpg'); background-image: image-set(url('../img/hero-1920.webp') type('image/webp'), url('../img/hero.jpg') type('image/jpeg')); } .hero__half--midi .hero__half-img { background-image: url('../img/hero-midi.jpg'); background-image: image-set(url('../img/hero-midi-2048.webp') type('image/webp'), url('../img/hero-midi.jpg') type('image/jpeg')); animation-duration: 30s; animation-delay: -9s; } /* Petits écrans : on n'envoie pas une image de 1920 px sur un téléphone. */ @media (max-width: 820px) { .hero__half--wel .hero__half-img { background-image: image-set(url('../img/hero-1280.webp') type('image/webp'), url('../img/hero.jpg') type('image/jpeg')); } .hero__half--midi .hero__half-img { background-image: image-set(url('../img/hero-midi-1280.webp') type('image/webp'), url('../img/hero-midi.jpg') type('image/jpeg')); } } /* `will-change` n'est pas un réglage de performance qu'on laisse allumé : c'est une réservation de mémoire vive, faite au chargement et jamais rendue. Les trois découpes du diptyque la gardaient en permanence, alors qu'elles ne bougent que pendant le passage du curseur. Le script pose la classe le temps du mouvement, et le navigateur récupère sa place ensuite. */ .hero.is-splitting .hero__half, .hero.is-splitting .hero__seam { will-change: clip-path; } .hero__seam { position: absolute; inset: 0; clip-path: polygon(calc(var(--split) * 1% + 4.32%) 0, calc(var(--split) * 1% + 4.68%) 0, calc(var(--split) * 1% - 4.32%) 100%, calc(var(--split) * 1% - 4.68%) 100%); background: linear-gradient(180deg, transparent 4%, rgba(231, 206, 134, .5) 30%, rgba(231, 206, 134, .5) 70%, transparent 96%); } /* Bandeau du bas : les deux clubs se nomment, le repère de défilement au milieu. Une seule ligne, alignée sur la couture du diptyque. */ .hero__clubs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 34px 26px; border-top: 0; } .hero__club { font-family: var(--font-body); font-weight: 500; font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); transition: color .5s ease, letter-spacing .5s ease; } .hero__club--wel { justify-self: start; padding-left: 62px; } /* dégage le bouton d'appel flottant */ .hero__club--midi { justify-self: end; text-align: right; } .hero__club::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; } .hero__club--wel::before { background: var(--gold-bright); } .hero__club--midi::before { background: var(--midi-clair); } /* Le club dont le côté s'agrandit s'affirme un peu plus */ .hero.is-wel .hero__club--wel, .hero.is-midi .hero__club--midi { color: #fff; letter-spacing: .18em; } .hero.is-wel .hero__club--midi, .hero.is-midi .hero__club--wel { color: rgba(255, 255, 255, .5); } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 82% 64% at 50% 52%, rgba(16, 13, 7, .26), rgba(16, 13, 7, .62) 78%), linear-gradient(180deg, rgba(16, 13, 7, .58) 0%, rgba(16, 13, 7, .14) 30%, rgba(16, 13, 7, .5) 70%, rgba(16, 13, 7, .9) 100%); } @keyframes kenburns { from { transform: scale(1) translateY(0); } to { transform: scale(1.09) translateY(-1.2%); } } .hero__inner { position: relative; width: 100%; max-width: var(--container); margin: 0 auto; padding-left: clamp(0px, 2vw, 26px); } /* LE SUR-TITRE DE LA BANNIÈRE EST UN MARQUAGE, PAS UNE MENTION. C'est la première phrase de la page, celle qui dit ce qu'on vend et à qui : « team building d'entreprise, province de Liège ». En doré pâle de 12 px posé à même la photo, elle se lisait comme une mention de service, et il fallait la chercher. Elle passe sur un aplat doré, en noir : c'est le seul endroit de la page où le doré de marque devient une surface, et il sert à désigner le public. Les trois réglages tiennent ensemble : - le corps monte de 12 à 14,4 px, et l'interlettrage descend de .18 à .14em. Un interlettrage large sur une phrase longue écarte les mots au lieu de les poser ; il la rendait floue autant que sa taille ; - le texte est NOIR sur l'aplat, jamais blanc. Mesuré : blanc cassé sur ce doré donne 2,70:1, noir donne 6,67:1. Le dégradé s'arrête à #C09020 et ne descend pas jusqu'au #9A7016 du dégradé de marque, qui tomberait à 4,32:1, sous le seuil. Le reflet reste, la lisibilité aussi ; - chaque ligne porte sa propre bande (`box-decoration-break: clone`). Sans cela, les deux lignes du téléphone seraient enfermées dans un seul rectangle, avec du doré vide au bout de la plus courte. L'ALIGNEMENT. Le retrait intérieur de la bande décalerait le texte de 11 px vers la droite, et le sur-titre ne serait plus sur le même bord gauche que le titre juste dessous. C'est le porteur de bloc qui rattrape ce décalage, et non une marge négative sur la bande elle-même : une marge négative ne s'applique qu'au PREMIER fragment d'un texte en ligne, donc les deux lignes du téléphone partiraient de deux bords différents. Les deux valeurs sortent de la même variable pour qu'elles ne puissent pas diverger. */ .hero__surtitre { --surtitre-retrait: 11px; margin: 0 0 20px calc(-1 * var(--surtitre-retrait)); line-height: 2.45; text-wrap: balance; } .hero__kicker { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 7px var(--surtitre-retrait); border-radius: 3px; background-image: linear-gradient(100deg, var(--gold-bright), var(--gold)); color: var(--ink); font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-shadow: none; box-shadow: 0 8px 24px rgba(10, 10, 10, .34); } /* Le titre d'accueil, le seul endroit où la serif monte aussi haut. Le corps a été relevé et l'interlettrage descendu à -.025em : c'est à cette taille que le resserrage se voit le plus, et qu'il compte le plus. */ .hero h1 { font-size: clamp(2.7rem, 6.2vw, 4.9rem); line-height: 1.03; margin: 6px 0 22px; color: #fff; text-shadow: 0 4px 44px rgba(0, 0, 0, .5); font-weight: 500; letter-spacing: -.025em; max-width: 17ch; } .hero__accroche { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: rgba(255, 255, 255, .92); max-width: 46ch; margin: 0 0 34px; text-shadow: 0 2px 22px rgba(0, 0, 0, .5); } .hero__cta { display: flex; gap: 24px; justify-content: flex-start; align-items: center; flex-wrap: wrap; } .hero__meta { margin-top: 26px; font-size: .9rem; letter-spacing: .04em; color: rgba(255, 255, 255, .85); } .hero__meta strong { color: #fff; } /* Repère de défilement : le premier segment du fil de terrain, avec la balle qui descend. Pas de souris stylisée, pas de chevron. */ .scroll-cue { width: 26px; height: 52px; display: block; position: relative; justify-self: center; } .scroll-cue__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(231, 206, 134, .75) 55%, rgba(231, 206, 134, 0)); } .scroll-cue__line::after { content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 10px rgba(231, 206, 134, .8); transform: translateX(-50%); animation: cueDrop 2.4s cubic-bezier(.5, 0, .5, 1) infinite; } @keyframes cueDrop { 0% { top: 2px; opacity: 0; } 18% { opacity: 1; } 72% { opacity: 1; } 100% { top: 44px; opacity: 0; } } /* ========================================================= CONCEPT (split photo + texte) ========================================================= */ /* Colonne de texte étroite (5 colonnes sur 12), média large qui déborde du conteneur jusqu'au bord droit de la fenêtre. La page cesse d'être une suite de blocs sagement rangés dans la même boîte de 1200 px. */ .concept { background: var(--paper); overflow: hidden; } .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: center; } .split__media { position: relative; } .split__body p + p { margin-top: 18px; } .split__body p { color: var(--body); } /* Le chapeau du concept. Il était à peine 9 % plus gros que le paragraphe qui suit : trop peu pour se lire comme une hiérarchie voulue, assez pour se voir comme un défaut. Avec en plus un saut de couleur franc et deux interlignes différents, l'œil concluait « ce n'est pas la même police ». On assume l'écart : nettement plus gros, donc manifestement intentionnel. */ /* Le plancher du clamp compte autant que le plafond : sur mobile, 1.55vw ne vaut plus rien et c'est la valeur minimale qui s'applique. Réglée à 1.26rem pour que l'écart avec le paragraphe reste franc (~19 %) sur TOUTES les largeurs, et pas seulement sur grand écran. */ /* Le chapeau est désormais le SEUL paragraphe du bloc : il reprend le style des chapeaux de toutes les autres sections (même corps, même gris), pour qu'aucune section ne semble composée autrement que ses voisines. */ .split__body .lead { margin: 18px 0 22px; max-width: 46ch; } @media (min-width: 1100px) { /* le média sort de la grille et file jusqu'au bord de l'écran */ .concept .split__media { margin-right: calc((100vw - var(--container)) / -2 - 26px); } .concept .carousel__viewport { border-radius: var(--radius-lg) 0 0 var(--radius-lg); } /* la flèche « suivante » s'écarte du bouton « remonter », lui aussi collé au bord */ .concept .carousel__arrow--next { right: 74px; } } /* ========================================================= STATS (bande sombre, compteurs animés) ========================================================= */ /* Bande sombre asymétrique : une phrase à gauche, les chiffres à droite, tous alignés à gauche. Quatre colonnes centrées et identiques, c'était encore la même grille que partout ailleurs. */ .stats { background: var(--ink-2); color: var(--cream); overflow: hidden; padding: clamp(50px, 6.5vw, 76px) 0; } .stats::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 82% 6%, rgba(216, 174, 62, .13), transparent 62%); } .stats__inner { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: end; } .stats__intro { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.55rem, 2.6vw, 2.1rem); line-height: 1.16; color: var(--cream); letter-spacing: -.02em; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat { text-align: left; position: relative; padding-left: 16px; } .stat::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line-on-dark); } /* Les chiffres du tableau d'affichage restent en serif : c'est le parti pris du design de référence, où même les prix sont composés dans la police de titre. */ .stat__num { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 4.1vw, 3.4rem); line-height: 1; color: var(--gold-soft); letter-spacing: -.03em; white-space: nowrap; } .stat__num .suffix { color: var(--gold); } .stat__label { margin-top: 10px; font-size: .75rem; text-wrap: balance; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); line-height: 1.5; } /* ========================================================= RÉFÉRENCES (la bande de logos) ========================================================= */ /* Six marques, et l'envie légitime de les montrer toutes en même temps. C'est justement ce qu'il ne faut pas faire : six logos alignés d'un bord à l'autre se lisent comme un pied de page. Ils défilent donc au pas, très espacés, et on n'en regarde qu'un ou deux à la fois. Le traitement des logos est le point délicat. Ils arrivent avec six palettes qui n'ont rien à voir entre elles, dans une page qui ne s'autorise qu'une seule couleur de marque tierce. On les désature donc au repos, et chacun reçoit sa correction de densité : sans elle, le bleu clair de Knauf et l'orange d'Elia virent au gris pâle et disparaissent à côté du noir de BMW. Trois variables par marque, posées dans le HTML : --h la hauteur, --c le contraste, --b la luminosité, --o l'opacité. */ /* Trois lignes de texte et une bande de logos : avec le rythme vertical commun à toutes les sections, la moitié de l'écran serait vide. On resserre, comme le fait déjà la bande des chiffres juste au-dessus. */ .refs { background: var(--paper); overflow: hidden; padding: clamp(58px, 7vw, 100px) 0; } .refs__head { max-width: 62ch; } .refs__head .lead { margin-top: 14px; } /* La piste déborde volontairement du conteneur : elle prend toute la largeur de l'écran. Le masque en dégradé fait entrer et sortir les logos en fondu, au lieu de les trancher net contre le bord de la fenêtre. */ .refs__piste { margin-top: clamp(34px, 4.6vw, 60px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } /* ÉTAT DE REPOS, celui que voit un visiteur sans JavaScript : les six logos se posent au centre, sur une ou deux lignes. Rien ne bouge, mais tout se lit. Le défilement n'est ajouté qu'ensuite, par le script, qui recopie la liste autant de fois qu'il faut pour couvrir l'écran (--refs-pas) et règle la durée pour que la vitesse reste la même sur un téléphone et sur un 27 pouces. */ .refs__ruban { display: flex; flex-wrap: wrap; justify-content: center; } .refs__file { display: flex; align-items: center; flex-wrap: inherit; justify-content: inherit; margin: 0; padding: 0; list-style: none; } .refs--anime .refs__ruban { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: refs-defile var(--refs-duree, 40s) linear infinite; will-change: transform; } .refs--anime .refs__file { flex-wrap: nowrap; } /* Le sens demandé : les logos vont vers la DROITE. On part donc d'une copie de retard pour revenir à zéro. Comme toutes les copies sont identiques, le raccord ne se voit pas. Inverser le sens : échanger `from` et `to`. */ @keyframes refs-defile { from { transform: translate3d(var(--refs-pas, -33.3333%), 0, 0); } to { transform: translate3d(0, 0, 0); } } /* La bande s'arrête sous la souris : on veut pouvoir lire un logo qui passe, pas courir après. Le `focus-within` fait le même service au clavier. */ .refs--anime .refs__piste:hover .refs__ruban, .refs--anime .refs__piste:focus-within .refs__ruban { animation-play-state: paused; } /* Et rien ne tourne hors de l'écran : la section est observée avec le hero. */ .refs.is-paused .refs__ruban { animation-play-state: paused; } /* L'écart entre deux logos est porté par les items eux-mêmes, jamais par un `gap` : c'est ce qui garantit le même intervalle à la jonction de deux copies qu'à l'intérieur d'une copie. */ .refs__item { flex: 0 0 auto; display: grid; place-items: center; padding: 14px clamp(30px, 3.4vw, 52px); } .refs__logo { display: block; width: auto; height: var(--h, 52px); filter: grayscale(1) contrast(var(--c, 1)) brightness(var(--b, 1)); opacity: var(--o, .7); transition: opacity .4s var(--ease-out), filter .4s var(--ease-out), transform .4s var(--ease-out); } /* Au survol, la marque reprend ses couleurs. C'est la seule dérogation à la règle de la couleur unique, et elle ne dure que le temps du geste. */ .refs__item:hover .refs__logo { filter: none; opacity: 1; transform: translateY(-2px) scale(1.04); } /* LA SECONDE RANGÉE, SUR PETIT ÉCRAN, VA DANS L'AUTRE SENS. Elle est posée par le script, qui coupe la liste en deux sous 760 px (voir `bandeReferences` dans main.js). Deux réglages suffisent ici : elle se colle à la première, et son animation se joue à l'envers. `animation-direction: reverse` plutôt qu'un second jeu d'images-clés : c'est la MÊME course, lue dans l'autre sens. Deux jeux d'images-clés à maintenir finiraient par diverger, et le raccord des copies avec eux. */ .refs__piste--b { margin-top: 0; } .refs--anime .refs__ruban--inverse { animation-direction: reverse; } @media (max-width: 760px) { .refs__item { padding: 12px clamp(22px, 6vw, 34px); } .refs__logo { height: calc(var(--h, 52px) * .84); } /* Sur un écran étroit, 9 % de fondu ne font que 35 px : un logo se retrouvait tranché plus qu'estompé au bord. On élargit le dégradé. */ .refs__piste { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); } } /* Mouvement réduit : la bande s'immobilise et redevient la grille du repos. Sans le retour au `wrap`, les copies ajoutées par le script resteraient alignées en une seule ligne, arrêtée hors de l'écran. */ @media (prefers-reduced-motion: reduce) { .refs--anime .refs__ruban { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; } .refs--anime .refs__file { flex-wrap: wrap; justify-content: center; } .refs__logo { transition: none; } } /* ========================================================= POURQUOI (cartes atouts) ========================================================= */ /* Colonne d'appui à gauche (elle reste à l'écran), arguments en lignes à droite. Ni cartes, ni icônes en pastille : c'est la grille de quatre cartes blanches qui rendait cette section interchangeable avec n'importe quelle autre page. */ .pourquoi { background: var(--paper-2); } .pourquoi__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 90px); align-items: start; } .pourquoi__aside .lead { margin-top: 16px; } @media (min-width: 921px) { .pourquoi__aside { position: sticky; top: calc(var(--header-h) + 40px); } } .args { display: flex; flex-direction: column; } /* Plus de filet gris pleine largeur entre les arguments : il coupait la colonne en tranches et faisait tableau. Le petit trait doré au-dessus de chaque titre sépare déjà, en plus discret. On rend l'espace un peu plus généreux pour qu'il fasse seul le travail du trait. */ .arg { padding: 32px 0; } .arg:first-child { padding-top: 0; } .arg:last-child { padding-bottom: 0; } .arg h3 { font-size: clamp(1.45rem, 2.25vw, 1.8rem); margin-bottom: 8px; position: relative; } /* Un simple trait doré qui se tire à l'apparition, à la place du cercle à icône */ .arg h3::before { content: ""; position: absolute; left: 0; top: -14px; height: 2px; width: 0; background: var(--gold); transition: width .7s var(--ease-out) .1s; } .js .arg.in h3::before { width: 34px; } .arg:first-child h3::before { display: none; } .arg p { color: var(--muted); font-size: 1rem; max-width: 54ch; } /* ========================================================= FORMULES (tarifs) ========================================================= */ /* ========================================================= L'ARDOISE Le tableau de prix à deux cartes, badge « le plus demandé » et listes à coches vient du logiciel en abonnement. Ici on vend 1h30 de terrain et un repas : c'est une ardoise de restaurant qu'il faut, avec les points de conduite qui relient chaque ligne à ce qu'elle contient. ========================================================= */ .formules { background: var(--paper); } .formules__head { max-width: 62ch; } .formules__head .lead { margin-top: 14px; } .formules__actions { display: flex; justify-content: flex-start; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 34px; } .ardoise { /* Le retrait intérieur suit celui du formulaire, bordure comprise : les deux cartes de la page posent ainsi leur texte sur la même grille, au pixel près, à toutes les largeurs. L'ardoise garde seulement une marge plus généreuse sur grand écran, où elle est la pièce maîtresse. */ margin-top: 48px; padding: calc(clamp(26px, 4vw, 51px) + 1px); background: var(--ink-3); color: var(--cream); border-radius: var(--radius-lg); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 5vw, 64px); row-gap: 30px; box-shadow: 0 30px 70px rgba(10, 10, 10, .18); position: relative; overflow: hidden; } /* Sur fond sombre, le bouton principal s'inverse : blanc cassé sur noir. */ .ardoise .btn-gold { background: var(--cream); color: var(--ink); } .ardoise .btn-gold:hover { background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); } /* Le grain de la craie, très discret */ .ardoise::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(ellipse 70% 60% at 15% 0%, rgba(231, 206, 134, .09), transparent 62%); } .ardoise__col { position: relative; display: flex; flex-direction: column; } /* Filet de séparation entre les deux formules, comme sur une carte pliée */ .ardoise__col + .ardoise__col::before { content: ""; position: absolute; left: calc(clamp(30px, 5vw, 64px) / -2); top: 4px; bottom: 4px; width: 1px; background: var(--line-on-dark); } .ardoise__nom { font-family: var(--font-body); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; color: var(--gold-soft); } /* Montant et devise en ligne, sur une seule boîte de ligne : l'ancien flex alignait bien les baselines mais laissait le « € » dans sa propre boîte, séparable du nombre. En inline + nowrap, « 55 € » est insécable de fait. */ .ardoise__prix { display: block; white-space: nowrap; margin: 10px 0 4px; } .ardoise__devise { margin-left: 6px; } .ardoise__montant { font-family: var(--font-display); font-weight: 500; font-size: clamp(3.8rem, 8.8vw, 5.6rem); line-height: .92; color: #fff; letter-spacing: -.04em; } .ardoise__devise { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 3.3vw, 2.35rem); color: var(--gold-soft); } .ardoise__unite { font-size: .84rem; color: var(--muted-2); letter-spacing: .04em; } .ardoise__liste { margin: 26px 0 30px; display: flex; flex-direction: column; gap: 15px; } .ardoise__liste li { display: flex; align-items: baseline; gap: 10px; font-size: .96rem; line-height: 1.5; } .ardoise__item { color: #fff; font-weight: 500; flex-shrink: 0; } /* Points de conduite : ils s'étirent pour combler l'espace, comme sur un menu */ .ardoise__pt { flex: 1 1 auto; min-width: 18px; align-self: center; height: 1px; background-image: radial-gradient(circle, rgba(231, 206, 134, .55) 1px, transparent 1px); background-size: 6px 2px; background-repeat: repeat-x; background-position: 0 center; } .ardoise__val { color: var(--muted-2); text-align: right; flex-shrink: 1; } .ardoise__cta { margin-top: auto; width: 100%; } /* La ligne du bas de l'ardoise : l'option, écrite comme sur un menu. */ .ardoise__option { grid-column: 1 / -1; position: relative; padding-top: 26px; border-top: 1px solid var(--line-on-dark); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: .96rem; } /* Étiquette dans le doré de la charte : le vert néon essayé pour évoquer la lumière noire était la seule couleur hors charte de la page. */ .ardoise__option-nom { font-family: var(--font-body); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .84rem; color: var(--gold-soft); } .ardoise__option-prix { color: #fff; font-weight: 600; } .ardoise__option-note { flex-basis: 100%; color: var(--muted-2); font-size: .86rem; } .ardoise__option .ardoise__pt { background-image: radial-gradient(circle, rgba(231, 206, 134, .5) 1px, transparent 1px); } /* Une deuxième option suit la première : elle ne rouvre pas un filet, sinon les deux lignes se liraient comme deux blocs sans rapport. Le filet du haut ouvre la zone des options, les lignes s'y suivent. */ .ardoise__option--suite { padding-top: 14px; border-top: 0; } /* ========================================================= DÉROULÉ (étapes) ========================================================= */ /* Le déroulé et l'appel qui le suit partagent le même gris. Partout ailleurs sur la page, un trou de 260 px est encadré par un changement de fond qui le justifie ; ici le lecteur voyait une dalle grise de 1 327 px avec un vide inexpliqué au milieu, et sur mobile ce vide occupait 30 % de l'écran. On ne les sépare pas, on les RÉUNIT : « Une date en tête ? » est la conclusion du déroulé. Le vide est resserré et coupé par un filet à la largeur du texte, comme les autres césures internes du site (équipements, intertitres de la mosaïque). Une vraie fin de section, au lieu d'un blanc qui ressemble à un bug. */ .deroule { background: var(--paper-2); padding-bottom: clamp(46px, 5.4vw, 76px); } /* Le titre bascule à droite : la section précédente s'appuyait à gauche. C'est cette alternance qui empêche de relire six fois la même page. */ .deroule__head { max-width: 46ch; margin-left: auto; text-align: right; } .deroule__head .lead { text-align: right; margin-left: auto; } /* Les trois étapes suivent la trajectoire de la balle : la deuxième est plus haute, comme le sommet de l'échange. Plus de cartes blanches à ombre portée. */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 46px); margin-top: 8px; align-items: start; } .step { position: relative; padding-right: 12px; } .step--haut { margin-top: -38px; } /* Le doré clair sur ce fond ne donnait que 2,61:1, sous le seuil de 3:1 exigé pour du grand texte. `--gold-deep` est déjà là pour ce cas précis : même teinte à l'œil, 5,37:1 mesuré. */ .step__num { display: block; font-family: var(--font-display); font-weight: 500; font-size: 2.4rem; line-height: 1; color: var(--gold-deep); letter-spacing: -.02em; } .step h3 { font-size: clamp(1.4rem, 2.1vw, 1.7rem); margin: 12px 0 8px; } .step p { color: var(--muted); font-size: .96rem; max-width: 34ch; } /* L'échange : la balle passe d'une étape à l'autre pendant qu'on descend. Remplace les trois flèches génériques. */ .rally { margin: 42px auto 4px; } .rally__svg { display: block; width: 100%; height: auto; overflow: visible; } .rally__path { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 9; vector-effect: non-scaling-stroke; opacity: .55; } /* Les trois piquets qui relient la trajectoire aux cartes */ .rally__net { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } /* La balle de l'échange, en croquis. Le fond très pâle lui garde son rôle de repère de progression : au trait seul, elle disparaîtrait sur le papier. */ .rally__ball .balle__fond { fill: rgba(192, 144, 32, .14); stroke: none; } .rally__ball .balle__trait { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .rally__ball .balle__repasse { stroke-width: 1.1; opacity: .5; } .rally__ball .balle__couture { stroke-width: 1.3; } /* Sans JavaScript ou avant l'entrée à l'écran : la balle reste au départ, discrète */ .js .rally__ball { opacity: 0; transition: opacity .4s ease; } .js .rally.is-live .rally__ball { opacity: 1; } @media (max-width: 920px) { .rally { display: none; } } /* ========================================================= CARROUSEL (galerie) ========================================================= */ .galerie { background: var(--paper); } .carousel { position: relative; } .carousel__viewport { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); touch-action: pan-y; } .carousel__track { position: relative; aspect-ratio: 16 / 9; } .carousel__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; background: var(--photo-fond); transition: opacity .8s ease; } .carousel__slide.is-active { opacity: 1; z-index: 2; } .carousel__slide.is-prev { opacity: 1; z-index: 1; transition: none; } .carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; } /* Les légendes du carrousel ont été retirées avec la refonte : plus de titre posé sur la photo, donc plus de voile sombre pour le rendre lisible. Les deux règles allaient ensemble (le voile était annulé sur les vues sans légende), elles partent ensemble - garder le voile seul aurait assombri les six photos. */ .carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; background: rgba(22, 20, 14, .42); border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; display: grid; place-items: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .25s ease, border-color .25s ease, transform .25s ease; } .carousel__arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-50%) scale(1.06); } .carousel__arrow svg { width: 22px; height: 22px; } .carousel__arrow--prev { left: 18px; } .carousel__arrow--next { right: 18px; } .carousel__dots { display: flex; gap: 2px; justify-content: center; align-items: center; margin-top: 18px; } /* La pastille visible fait 8 px : c'est la zone autour qui compte au doigt. 26 px passaient le seuil de justesse, 32 px se visent sans réfléchir. */ .carousel__dot { position: relative; width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; padding: 0; } /* La pastille reste petite à l'œil, mais la zone touchable monte à 44 px : c'est le même procédé que le bouton « remonter », un pseudo-élément débordant qui agrandit la cible sans agrandir le dessin. */ .carousel__dot::before { content: ""; position: absolute; inset: -6px; } .carousel__dot::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 5px; background: rgba(22, 20, 14, .2); transition: background .25s ease, width .25s ease; } .carousel__dot.active::after { background: var(--gold); width: 24px; } /* La commande de pause. Discrète comme les puces : c'est un utilitaire, pas un appel à l'action. Elle prend le doré au survol, comme toutes les commandes du site. */ .carousel__pause { position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin-left: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: var(--muted); transition: background .25s ease, color .25s ease; } .carousel__pause::before { content: ""; position: absolute; inset: -6px; } .carousel__pause svg { width: 15px; height: 15px; display: block; } .carousel__pause:hover { background: rgba(22, 20, 14, .06); color: var(--ink); } /* Ken Burns doux sur la slide active */ .carousel__slide.is-active img { animation: slidedrift 9s ease-out forwards; } .carousel__slide.is-prev img { transform: scale(1.05); } @keyframes slidedrift { from { transform: scale(1); } to { transform: scale(1.05); } } /* ========================================================= GALERIE FILTRABLE PAR INFRASTRUCTURE (Terrains/Bar/Terrasse/Restaurant/Fluo) ========================================================= */ /* ========================================================= MOSAÏQUE ÉDITORIALE Avant : 44 photos au même format 4/3, dans une grille de trois colonnes, sur près de 40 % de la hauteur de page. Un dossier d'images, pas un parcours. Maintenant : 13 photos choisies, réparties en deux séquences (un club, puis l'autre). Chaque photo garde SES proportions natives — sa largeur est proportionnelle à son ratio, si bien que toutes celles d'une même ligne ont exactement la même hauteur. Aucun recadrage, et une hiérarchie réelle : une grande image ouvre chaque club, des plus petites suivent. ========================================================= */ .galerie__head { max-width: 60ch; } .galerie__head .lead { margin-top: 14px; } /* Les trois faits du lieu, remontés depuis « Les bienfaits ». Ils annoncent ce que les photos vont montrer, donc ils se lisent comme une légende de la mosaïque : un filet, un intitulé, une phrase. Pas de cartes ni de pastilles, le filet du haut suffit à séparer, comme les intertitres de clubs juste en dessous. */ /* Même gouttière que les trois étapes du déroulé : deux grilles de trois colonnes dans le même conteneur doivent tomber au même endroit, sinon leurs textes se décalent d'une section à l'autre (3,42 px mesurés en 1024 px avant correction). */ .cadre__faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 46px); margin-top: clamp(32px, 4vw, 46px); } .cadre__fait { padding-top: 14px; border-top: 1px solid var(--line); } .cadre__fait strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.12rem, 1.5vw, 1.28rem); line-height: 1.25; color: var(--ink); margin-bottom: 6px; } .cadre__fait > span { display: block; color: var(--muted); font-size: .95rem; max-width: 32ch; } @media (max-width: 700px) { .cadre__faits { grid-template-columns: 1fr; gap: 18px; } .cadre__fait > span { max-width: none; } } .mosaic { --gap: 12px; --tile: 190px; margin-top: 44px; } .mosaic__club { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 46px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 1rem; } .mosaic__club:first-child { margin-top: 0; } .mosaic__club .club-dot { align-self: center; } .mosaic__club-nom { font-family: var(--font-body); font-weight: 600; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } .mosaic__club-lieu { font-family: var(--font-body); font-weight: 500; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-left: auto; } .mosaic__row { display: flex; flex-wrap: wrap; gap: var(--gap); margin-bottom: var(--gap); } /* largeur ∝ ratio : les hauteurs d'une même ligne s'égalisent d'elles-mêmes */ .mosaic__item { flex: var(--r) 1 calc(var(--r) * var(--tile)); } .gallery-item { position: relative; overflow: hidden; border-radius: var(--radius); cursor: pointer; padding: 0; border: 0; background: var(--photo-fond); display: block; /* La vignette est son propre conteneur de référence : c'est SA largeur qui décide si l'étiquette tient, pas celle de la fenêtre. Les vignettes n'ont pas la même largeur sur une même ligne (elle est proportionnelle au ratio de chaque photo), donc une règle en largeur d'écran ne pouvait pas suffire : elle réglait le problème à 390 px et le recréait à 460. */ container-type: inline-size; /* Un