/* Projet : Site 15A Fichier : css/club.css Version : 0.30.0 — 2026-07-20 11:22 Objectif : Feuille de style PROPRE à la page Club (surcharges spécifiques), chargée APRÈS le socle commun base.css. À ne pas confondre avec base.css, qui s'appelait historiquement « club.css » mais est en réalité le socle partagé du site. Ce fichier-ci ne contient QUE des règles propres à la page Club, scopées sous « .page-club » pour n'avoir aucun effet sur les autres pages. */ /* Lisibilité du texte sur téléphone (demande Cédrik, 2026-06-24) : le texte du hero et des paragraphes est un cran plus grand sur petit écran, pour une lecture plus confortable. Le rendu desktop/tablette est inchangé. */ @media (max-width: 767px) { .page-club .hero-title { font-size: 2.4rem; } .page-club .text-content { font-size: 1.15rem; line-height: 1.6; } } /* Plan de superposition du hero (demande Cédrik, 2026-06-24) : seul le TITRE reçoit un plan élevé, ce qui le place AU-DESSUS de la balle. La balle, elle, garde son niveau naturel : elle reste donc DERRIÈRE le titre ET derrière le contenu des sections suivantes (cartes du tableau de bord). Lui donner un plan propre la faisait passer devant ces cartes — à ne pas faire. */ .page-club .hero-title { position: relative; z-index: 2; } /* Position de repos de la balle (demande Cédrik, 2026-06-24) : décalée vers le bas-droite pour qu'elle soit bien dégagée du titre, donc facile à attraper. En « transform » → seule la balle bouge, le texte garde sa place exacte. Le script retire ce décalage au moment où on prend la balle (pas de double décalage pendant le glisser). */ .page-club .hero-image { transform: translate(40px, 120px); } /* Boutons de défilement (haut / section suivante / bas) : à l'horizontale, décalés de la colonne de menu ordinateur (right:20px, largeur 100px → bord gauche à 120px du bord de l'écran ; marge de 20px sous ce bord → right:140px). Même réglage que l'Accueil et la FAQ, validé par Cédrik le 2026-07-05 et étendu à toutes les pages qui ont ces boutons. En dessous de 992px : pas de colonne de menu à cet endroit (menu mobile), position d'origine (bas-droite au ras du bord, empilés, définie dans base.css) inchangée. */ @media (min-width: 992px) { .scroll-buttons { right: 140px; flex-direction: row; } } /* Couleur des boutons = couleur d'accent OFFICIELLE de la page (celle du pied de page, définie une fois pour toutes dans js/script.js → COLORS["club.html"] = #013cb2). Sans cette règle, les boutons héritent du bleu par défaut de base.css (#007bff), qui n'est pas le vrai bleu de Club — demandé par Cédrik le 2026-07-05 : « les flèches doivent être de la même couleur que le pied de page ». */ .scroll-buttons button { background-color: #013cb2; } .scroll-buttons button:hover { background-color: #013cb299; transform: scale(1.1); } /* --- Titre latéral vertical (bande gauche) — aligné à l'identique sur le système des autres pages (Elo, Terrain autonome, Tournois, Actualité). L'image PNG dédiée (bande sombre + nom « LE CLUB » vertical texturé en bleu) porte tout le visuel ; ce CSS ne fait que la fixer en haut à gauche. Masquée sous 992px (mobile + tablette), comme ailleurs. Scopé sous .page-club pour ne toucher que la page Club. --- */ .page-club .tournois-titre-gauche { display: none; } @media (min-width: 992px) { .page-club .tournois-titre-gauche { display: block; position: fixed; left: 0; top: 0; width: 6rem; height: auto; /* évite un piège navigateur : avec les attributs HTML width/height sur une image en position fixe, la hauteur resterait figée à la valeur brute de l'attribut au lieu de suivre la largeur — cf. docs/ERRORS_AND_TESTS_LOG.md (v0.18.1) */ z-index: 1; } } /* ========================================================================= BLOC DE CLÔTURE « INSCRIVEZ VOTRE CLUB » (Vinci — 0.30.0) ------------------------------------------------------------------------- La page Club se terminait sans aucun appel à l'action : on démontrait tout, puis la vidéo, puis le pied de page — et le visiteur repartait sans porte d'entrée. On ajoute un bloc autonome, juste avant la vidéo de démonstration (même enchaînement que la page Terrain autonome : promesse → action → preuve filmée), qui envoie vers le back-office bo.15a.fr, là où un club s'inscrit réellement. Bouton : socle .cta15a de cta.css (géométrie, hauteur, police nulshock, comportement mobile pleine largeur) conservé sans modification, habillage surchargé via .cta15a.club-cta (spécificité 0,0,2,0), dans le même langage relief/verre que les boutons de la page Offres et du pied de page. COULEUR — attention au piège : le fond de la page est un bleu ÉLECTRIQUE très lumineux. Poser le bleu d'accent #013cb2 en aplat sur ce fond donne un bouton mou qui se fond dans le décor (même problème constaté sur la page Terrain autonome avec son cyan). On garde donc l'accent en HAUT du dégradé et on descend franchement vers le bleu de nuit : l'objet gagne du poids, le texte blanc reste à ~11:1 de contraste, et la lèvre 3D très sombre le décolle du fond. Le halo bleu clair rappelle la lumière de la scène de la vidéo juste en dessous (--demo-accent:#013cb2). ========================================================================= */ .page-club .club-cta-block { /* le bloc ne fait que se poser dans le flux : aucune incidence sur les sections existantes (aucun positionnement, aucune marge négative) */ position: relative; z-index: 0; } .page-club .cta15a.club-cta { --club-top: #0c3496; --club-bottom: #03153f; --club-lip: rgba(1, 7, 28, 0.9); --club-glow: #4f93ff; border: none; border-radius: 16px; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, var(--club-top) 0%, var(--club-bottom) 100%); backdrop-filter: none; /* lèvre 3D pleine + ombre ambiante + halo bleu + arête haute allumée */ box-shadow: 0 4px 0 var(--club-lip), 0 10px 22px rgba(0, 0, 0, 0.3), 0 0 26px -6px var(--club-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .page-club .cta15a.club-cta:hover, .page-club .cta15a.club-cta:focus-visible { transform: translateY(-2px); filter: brightness(1.12); color: #fff; background: linear-gradient(180deg, var(--club-top) 0%, var(--club-bottom) 100%); box-shadow: 0 6px 0 var(--club-lip), 0 16px 30px rgba(0, 0, 0, 0.34), 0 0 34px -4px var(--club-glow), inset 0 1px 0 rgba(255, 255, 255, 0.55); } /* Enfoncement au clic : la lèvre se réduit, le bouton « descend ». */ .page-club .cta15a.club-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--club-lip), 0 4px 12px rgba(0, 0, 0, 0.26), 0 0 18px -8px var(--club-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .page-club .cta15a.club-cta:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }