/* Projet : Site 15A Fichier : css/price.css Version : 0.28.4 — 2026-07-19 19:13 Objectif : Styles propres à la page « Nos offres » (price.html). Rendu strictement identique au site en ligne. Le grand fond de page passe en WebP (repli JPG automatique via image-set) — image visuellement identique, simplement plus légère au chargement. + Boutons d'action des 3 offres redessinés (Vinci) : socle commun .offre-cta (relief « verre » nulshock, coins 16px) et 3 variantes de couleur calées sur l'univers de chaque carte (Club bleu, Terrain teal, Tournoi doré). Scopé ici, cta.css partagé jamais modifié ; surcharge via .cta15a.offre-cta. */ body { /* Repli JPG pour les navigateurs sans image-set, puis WebP si supporté. */ background-image: url(/images/price/fond-prix-sitev2.jpg); background-image: -webkit-image-set( url(/images/price/fond-prix-sitev2.webp) type("image/webp"), url(/images/price/fond-prix-sitev2.jpg) type("image/jpeg") ); background-image: image-set( url(/images/price/fond-prix-sitev2.webp) type("image/webp"), url(/images/price/fond-prix-sitev2.jpg) type("image/jpeg") ); background-size: 125vh; background-attachment: fixed; background-position: center; background-repeat: repeat; overflow-x: hidden; } /* Clip anti-débordement horizontal sur (et pas seulement ) : sur seul, le body devient le conteneur de défilement, window.scrollY reste à 0 et l'animation de la boule de nav (qui lit window.scrollY) ne se déclenchait jamais. Sur , la fenêtre reste le scroller, l'animation repart. */ html { overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; background-image: url(/images/price/fond-prix-sitev2.jpg); background-image: -webkit-image-set( url(/images/price/fond-prix-sitev2.webp) type("image/webp"), url(/images/price/fond-prix-sitev2.jpg) type("image/jpeg") ); background-image: image-set( url(/images/price/fond-prix-sitev2.webp) type("image/webp"), url(/images/price/fond-prix-sitev2.jpg) type("image/jpeg") ); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: -1; transform: translateZ(0); } p, h3 { font-family: nulshock; } h4 { font-weight: bold !important; font-size: unset !important; } .offres { display: none; } .price { margin-top: 3rem; } .title-wrapper { margin-top: 6rem; margin-inline: 2rem; } .price-title { text-shadow: 0px 4px 4px rgb(0, 0, 0, 25%); max-width: 40rem; } .img-wrapper { position: relative; } .vague { position: absolute; width: 100vw; transform: translate(-50%,-50%); transform-origin: center; left: 50%; top: 50%; z-index: -1; } @media (min-width:768px) { .title-wrapper { margin-top: 10rem; display: flex; flex-direction: column; align-items: center; } .man { max-width: 400px; } } @media (min-width:992px) { body { background-image: url(/images/price/fond-prix-sitev2.jpg); background-image: -webkit-image-set( url(/images/price/fond-prix-sitev2.webp) type("image/webp"), url(/images/price/fond-prix-sitev2.jpg) type("image/jpeg") ); background-image: image-set( url(/images/price/fond-prix-sitev2.webp) type("image/webp"), url(/images/price/fond-prix-sitev2.jpg) type("image/jpeg") ); background-size: cover; background-attachment: fixed; background-position: center; overflow-x: hidden; } .navbar-logo { left: 100px; } .man { max-width: 550px; } .offres { display: block; position: fixed; left: 0; top: 0; width: 6rem; } } @media (min-width:1200px) { h3 { font-size: 3.25rem; } .title-wrapper { display: flex; flex-direction: row; margin-top: 5rem; align-items: center; justify-content: center; margin-inline: 8rem; } .price-title { max-width: 46rem; font-size: 3.5rem; position: relative; top: -70px; } .img-wrapper { position: static; } .man { max-width: 660px; } } @media (min-width: 1400px) { .man { max-width: 800px; } } /* ========================================================================= BOUTONS D'ACTION DES 3 OFFRES (redesign Vinci — 0.28.4) ------------------------------------------------------------------------- Problème d'origine : les 3 offres portaient un bouton ORANGE plat identique (.cta15a--primary), qui jurait avec les cartes déjà colorées (Club = bleu, Terrain autonome = teal/cyan, Tournoi = doré). Résultat brouillon. Parti pris : chaque bouton devient le SOCLE de sa carte en reprenant la couleur de son univers. Les 3 restent un ENSEMBLE homogène — même géométrie, même relief « verre », même police nulshock, coins 16px (repris du bouton « Nous contacter » du pied). Seule la couleur change → triptyque cohérent. Technique : on réutilise le socle .cta15a de cta.css (géométrie, hauteur, police, comportement mobile pleine largeur) SANS le modifier, et on surcharge uniquement l'habillage via .cta15a.offre-cta (spécificité 0,0,2,0) pour battre .cta15a malgré l'ordre de chargement. Chaque variante ne fait que poser 3 variables de couleur (teinte haute, teinte basse, lèvre 3D). Relief construit sans seconde couleur d'accent (marche sur bleu, teal, or) : dégradé vertical léger (brillance en haut) + lèvre sombre pleine sous le bouton + ombre portée ambiante + liseré clair intérieur en haut (verre). Texte blanc + ombre pour rester lisible même sur le doré (ton clair). ========================================================================= */ .cta15a.offre-cta { /* on remplace l'habillage translucide/orange du socle par une base pleine */ 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.38); background: linear-gradient( 180deg, var(--offre-top) 0%, var(--offre-bottom) 100% ); backdrop-filter: none; /* lèvre 3D pleine + ombre ambiante + liseré clair brillant en haut (verre) */ box-shadow: 0 4px 0 var(--offre-lip), 0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.42); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .cta15a.offre-cta:hover, .cta15a.offre-cta:focus-visible { transform: translateY(-2px); filter: brightness(1.07); color: #fff; background: linear-gradient( 180deg, var(--offre-top) 0%, var(--offre-bottom) 100% ); box-shadow: 0 6px 0 var(--offre-lip), 0 16px 30px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.48); } /* Enfoncement au clic : la lèvre se réduit, le bouton « descend ». */ .cta15a.offre-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--offre-lip), 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.34); } .cta15a.offre-cta:focus-visible { outline: 3px solid var(--offre-top); outline-offset: 3px; } /* --- Univers Club : bleu électrique (calé sur la carte Gestion Club) ------ */ .offre-cta--club { --offre-top: #2b57e6; --offre-bottom: #123fc4; --offre-lip: rgba(6, 24, 92, 0.75); } /* --- Univers Terrain autonome : teal / cyan (calé sur la carte) ----------- */ .offre-cta--terrain { --offre-top: #12b6a2; --offre-bottom: #0a8676; --offre-lip: rgba(3, 58, 50, 0.72); } /* --- Univers Tournoi : doré (calé sur la carte, comme l'accent Elo/Or) ---- Base volontairement profonde vers le bas pour que le texte blanc reste lisible ; brillance dorée en haut. */ .offre-cta--tournoi { --offre-top: #d9a520; --offre-bottom: #9c6f06; --offre-lip: rgba(74, 51, 3, 0.78); }