/* ═══════════════════════════════════════════════════════════════════════
GAME POINT — v5 PIXEL-PERFECT POLISH LAYER
───────────────────────────────────────────────────────────────────────
Objectif : alignement et espacement au pixel près sur tout le site.
Cette couche normalise :
· les conteneurs (max-width, padding horizontal)
· les rythmes verticaux entre sections
· les grilles internes (gap, columns)
· les paddings/margins internes des cartes
· les centrages d'éléments
Charge en dernier — surcharge les v2/v3/v4/sections au besoin.
═══════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────
1. TOKENS UNIFIÉS — Single source of truth pour les espacements
─────────────────────────────────────────────────────────────────────── */
:root {
/* Container : 1 seule largeur pour TOUT le site (sauf newsletter qui
reste plus étroit pour la lisibilité du formulaire) */
--v5-container-max: 1440px;
--v5-container-pad: clamp(20px, 4vw, 64px);
--v5-container-pad-narrow: clamp(20px, 3vw, 48px);
/* Rythme vertical : entre sections, dans une section, entre éléments */
--v5-section-y: clamp(96px, 11vw, 160px); /* padding-top + bottom de section */
--v5-section-gap: clamp(48px, 6vw, 88px); /* espace head → body dans une section */
--v5-stack-lg: clamp(24px, 2.4vw, 40px); /* entre titre et texte */
--v5-stack-md: clamp(16px, 1.6vw, 24px); /* entre paragraphes */
--v5-stack-sm: clamp(8px, 0.9vw, 14px); /* entre éléments serrés */
/* Grilles : gap unifié entre cartes */
--v5-grid-gap: clamp(20px, 2.2vw, 32px);
--v5-grid-gap-tight: clamp(14px, 1.6vw, 22px);
/* Cartes : padding intérieur */
--v5-card-pad: clamp(24px, 2.6vw, 40px);
--v5-card-radius: 16px;
/* Bordures premium */
--v5-border-subtle: 1px solid rgba(10, 10, 10, 0.06);
--v5-border-subtle-dark: 1px solid rgba(255, 255, 255, 0.08);
}
/* ───────────────────────────────────────────────────────────────────────
2. CONTENEURS — Tous les .gp-container alignés à la même largeur
─────────────────────────────────────────────────────────────────────── */
.gp-container {
max-width: var(--v5-container-max) !important;
margin: 0 auto !important;
padding-left: var(--v5-container-pad) !important;
padding-right: var(--v5-container-pad) !important;
width: 100%;
box-sizing: border-box;
}
/* Container plus étroit pour la newsletter (formulaire concentré) */
.gp-newsletter-light .gp-container {
max-width: 1140px !important;
padding-left: var(--v5-container-pad-narrow) !important;
padding-right: var(--v5-container-pad-narrow) !important;
}
/* Services : on aligne à la largeur principale (était 1340px → 1440px) */
.gp-light-services .gp-container {
max-width: var(--v5-container-max) !important;
}
/* Pillars wrap utilise les mêmes valeurs */
.gpv4-pillars__wrap {
max-width: var(--v5-container-max) !important;
padding-left: var(--v5-container-pad) !important;
padding-right: var(--v5-container-pad) !important;
}
/* ───────────────────────────────────────────────────────────────────────
3. RYTHME VERTICAL — Padding identique entre sections
─────────────────────────────────────────────────────────────────────── */
.gp-light-hero,
.gp-light-features,
.gp-light-services,
.gp-light-partners,
.gp-newsletter-light,
.gpv4-pillars,
.section-home-work-intro {
padding-top: var(--v5-section-y) !important;
padding-bottom: var(--v5-section-y) !important;
}
/* Hero : un peu plus de padding-top à cause de la nav fixed */
.gp-light-hero {
padding-top: calc(var(--v5-section-y) + 24px) !important;
}
/* Sections qui se suivent en thème clair : on peut réduire le bottom de
l'une et le top de l'autre pour éviter le double padding */
.gp-light-features {
padding-top: clamp(40px, 4vw, 64px) !important; /* hero juste avant déjà aéré */
}
.gp-light-services {
padding-top: clamp(120px, 13vw, 200px) !important; /* respire bien après le bento sombre */
}
/* Section-home-work-intro (Pourquoi) suit Services immédiatement → on enlève
le top pour qu'il n'y ait qu'un seul espace entre elles */
.section-home-work-intro {
padding-top: clamp(40px, 5vw, 80px) !important;
}
/* Partners suit Pourquoi (les 2 sur fond architectural) */
.gp-light-partners {
padding-top: clamp(60px, 7vw, 100px) !important;
padding-bottom: clamp(80px, 9vw, 140px) !important;
}
/* ───────────────────────────────────────────────────────────────────────
4. HEAD DE SECTION — Eyebrow + Titre + (optionnel) Lead
Marge uniforme entre head et body de chaque section
─────────────────────────────────────────────────────────────────────── */
.gp-light-services__head,
.gp-light-partners__head,
.gpv4-pillars__head {
margin-bottom: var(--v5-section-gap) !important;
}
/* Espace constant entre eyebrow et titre */
.gp-light-services__eyebrow,
.gp-light-partners__eyebrow {
margin-bottom: var(--v5-stack-md) !important;
}
/* ───────────────────────────────────────────────────────────────────────
5. HERO LIGHT — Grid 2 colonnes alignées
─────────────────────────────────────────────────────────────────────── */
.gp-light-hero__grid {
gap: clamp(40px, 5vw, 80px) !important;
align-items: center !important;
}
.gp-light-hero__text {
padding-left: clamp(20px, 2vw, 32px) !important;
}
.gp-light-hero__title {
margin-bottom: var(--v5-stack-lg) !important;
}
.gp-light-hero__lead {
margin-bottom: var(--v5-stack-lg) !important;
max-width: 520px !important;
}
.gp-light-hero__ctas {
display: flex !important;
flex-wrap: wrap !important;
gap: 14px !important;
align-items: center !important;
}
/* ───────────────────────────────────────────────────────────────────────
6. 3 CARTES FEATURES — Hauteur uniforme, padding identique, centrées
─────────────────────────────────────────────────────────────────────── */
.gp-light-features__grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: var(--v5-grid-gap) !important;
max-width: 1180px !important;
margin-left: auto !important;
margin-right: auto !important;
align-items: stretch !important;
}
.gp-light-features__card {
padding: var(--v5-card-pad) !important;
border-radius: var(--v5-card-radius) !important;
display: flex !important;
align-items: center !important;
gap: 18px !important;
min-height: clamp(120px, 11vw, 160px);
}
.gp-light-features__icon {
flex-shrink: 0 !important;
width: 28px !important;
height: 28px !important;
}
.gp-light-features__text {
margin: 0 !important;
line-height: 1.45 !important;
}
@media (max-width: 900px) {
.gp-light-features__grid {
grid-template-columns: 1fr !important;
}
}
/* ───────────────────────────────────────────────────────────────────────
7. PILIERS BENTO — Gap, padding, alignement intra-carte
─────────────────────────────────────────────────────────────────────── */
.gpv4-pillars__grid {
gap: var(--v5-grid-gap-tight) !important;
}
.gpv4-pillars__head {
align-items: end !important;
gap: clamp(24px, 3vw, 48px) !important;
}
.gpv4-pillars__body {
padding: clamp(24px, 2.6vw, 40px) !important;
}
.gpv4-pillars__badge {
margin-bottom: var(--v5-stack-lg) !important;
}
.gpv4-pillars__title {
margin: 0 0 var(--v5-stack-sm) !important;
}
.gpv4-pillars__bar {
margin: 0 0 var(--v5-stack-md) !important;
}
.gpv4-pillars__desc {
margin: 0 0 var(--v5-stack-md) !important;
}
/* ───────────────────────────────────────────────────────────────────────
8. SERVICES — Grille 3 cols, cartes uniformes
─────────────────────────────────────────────────────────────────────── */
.gp-light-services__grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: var(--v5-grid-gap) !important;
align-items: stretch !important;
}
.gp-light-services__card {
border-radius: var(--v5-card-radius) !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.gp-light-services__media {
aspect-ratio: 4 / 3 !important;
overflow: hidden !important;
position: relative !important;
}
.gp-light-services__info {
padding: clamp(20px, 2vw, 28px) !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
flex-grow: 1 !important;
}
.gp-light-services__num {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.28em;
color: rgba(255, 255, 255, 0.5);
}
.gp-light-services__name {
margin: 0 !important;
line-height: 1.08 !important;
}
@media (max-width: 1100px) {
.gp-light-services__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 700px) {
.gp-light-services__grid {
grid-template-columns: 1fr !important;
}
}
/* ───────────────────────────────────────────────────────────────────────
9. POURQUOI CHOISIR — Centrage parfait + max-width texte
─────────────────────────────────────────────────────────────────────── */
.section-home-work-intro .container,
.section-home-work-intro > .container {
max-width: var(--v5-container-max) !important;
padding-left: var(--v5-container-pad) !important;
padding-right: var(--v5-container-pad) !important;
text-align: center !important;
}
.section-home-work-intro .row,
.section-home-work-intro .row.split {
display: block !important;
grid-template-columns: none !important;
text-align: center !important;
max-width: 880px !important;
margin: 0 auto !important;
}
.section-home-work-intro h2,
.section-home-work-intro h3 {
text-align: center !important;
margin: 0 auto var(--v5-stack-lg) !important;
max-width: 18ch;
}
.section-home-work-intro p {
text-align: center !important;
max-width: 62ch !important;
margin-left: auto !important;
margin-right: auto !important;
line-height: 1.6 !important;
}
/* ───────────────────────────────────────────────────────────────────────
10. PARTNERS — Track centré, cartes uniformes
─────────────────────────────────────────────────────────────────────── */
.gp-light-partners__head {
text-align: center !important;
margin-bottom: var(--v5-section-gap) !important;
}
.gp-light-partners__eyebrow {
margin-bottom: var(--v5-stack-md) !important;
}
.gp-light-partners__track {
margin: 0 auto !important;
}
/* ───────────────────────────────────────────────────────────────────────
11. NEWSLETTER — Grid centré
─────────────────────────────────────────────────────────────────────── */
.gp-newsletter-light__grid {
gap: clamp(40px, 5vw, 72px) !important;
align-items: center !important;
}
@media (max-width: 900px) {
.gp-newsletter-light__grid {
grid-template-columns: 1fr !important;
text-align: center !important;
}
}
/* ───────────────────────────────────────────────────────────────────────
12. FOOTER — Colonnes alignées, padding cohérent
─────────────────────────────────────────────────────────────────────── */
.gp-footer__inner {
max-width: var(--v5-container-max) !important;
margin: 0 auto !important;
padding-left: var(--v5-container-pad) !important;
padding-right: var(--v5-container-pad) !important;
padding-top: clamp(64px, 7vw, 96px) !important;
padding-bottom: clamp(40px, 4vw, 56px) !important;
}
.gp-footer__top {
display: grid !important;
grid-template-columns: 1.4fr repeat(3, 1fr) !important;
gap: clamp(32px, 4vw, 64px) !important;
align-items: start !important;
padding-bottom: clamp(40px, 4.5vw, 64px) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.gp-footer__bottom {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding-top: clamp(24px, 3vw, 40px) !important;
gap: 24px !important;
}
@media (max-width: 900px) {
.gp-footer__top {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 600px) {
.gp-footer__top {
grid-template-columns: 1fr !important;
}
.gp-footer__bottom {
flex-direction: column !important;
align-items: flex-start !important;
}
}
/* ───────────────────────────────────────────────────────────────────────
13. UTILS — Forcer le centrage parfait sur les éléments génériques
─────────────────────────────────────────────────────────────────────── */
/* Toute section avec align-center reçoit ses enfants horizontalement centrés */
.gp-light *:where(h2.gp-light-services__title, h2.gp-light-partners__title) {
margin-left: auto !important;
margin-right: auto !important;
}
/* Empêche les débordements horizontaux qui décalent tout */
html, body {
overflow-x: hidden !important;
}
/* Cartes pillars : titre + body verticalement bas, alignement bas constant */
.gpv4-pillars__card {
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
}
/* Bouton Scroll-Down du hero header — bien aligné à gauche avec padding constant */
.home-header .bottom-links {
padding-left: clamp(24px, 3vw, 48px) !important;
padding-right: clamp(24px, 3vw, 48px) !important;
padding-bottom: clamp(24px, 3vw, 40px) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
}
/* ───────────────────────────────────────────────────────────────────────
14. NAV HAMBURGER + LOGO — Baseline alignée (24px du haut, même
padding horizontal de chaque côté)
─────────────────────────────────────────────────────────────────────── */
.navigation .logo,
nav .logo {
top: 24px !important;
left: 24px !important;
}
.navigation .hamburger,
.hamburger {
top: 24px !important;
right: 24px !important;
}
/* ───────────────────────────────────────────────────────────────────────
15. POLISH FINAL — Évite les sauts de mise en page (font swap)
─────────────────────────────────────────────────────────────────────── */
img {
vertical-align: middle;
}
button, .btn, a {
font-feature-settings: "kern" 1, "liga" 1;
}
/* ═══════════════════════════════════════════════════════════════════════
16. SERVICES — Titres parfaitement centrés dans chaque carte
Le num pill et le h3 étaient alignés à gauche → décalage visuel.
On centre tout horizontalement pour un rendu symétrique.
═══════════════════════════════════════════════════════════════════════ */
.gp-light-services__info {
text-align: center !important;
align-items: center !important;
gap: clamp(10px, 1vw, 14px) !important;
}
/* Num pill (01, 02, ...) centré */
.gp-light-services__num {
display: inline-block !important;
margin: 0 auto !important;
text-align: center !important;
padding: 4px 14px !important;
border-radius: 999px !important;
background: rgba(255, 94, 0, 0.12) !important;
color: var(--accent) !important;
border-bottom: 0 !important;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.28em;
}
/* H3 du nom — centré + même largeur pour rythme */
.gp-light-services__name {
text-align: center !important;
margin: 0 auto !important;
max-width: 280px !important;
}
/* ═══════════════════════════════════════════════════════════════════════
18. CARTE ÉVÈNEMENTS — Poster All-Star traitement premium
La carte Événements affiche le poster officiel de l'événement,
pas une vidéo. On veut que l'affiche soit pleinement visible avec
un traitement premium (badge date, fade subtil, hover qui révèle).
═══════════════════════════════════════════════════════════════════════ */
.gp-light-services__card--poster .gp-light-services__media {
aspect-ratio: 4 / 5 !important; /* poster vertical → ratio 4:5 conserve la composition */
background: #0A0A0A;
}
.gp-light-services__poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gp-light-services__card--poster:hover .gp-light-services__poster {
transform: scale(1.04);
}
/* Overlay très léger sur le poster — on veut qu'il garde sa lisibilité */
.gp-light-services__card--poster .gp-light-services__overlay {
background: linear-gradient(
180deg,
rgba(10, 10, 10, 0) 0%,
rgba(10, 10, 10, 0) 55%,
rgba(10, 10, 10, 0.45) 85%,
rgba(10, 10, 10, 0.78) 100%
) !important;
}
/* Badge "13 JUIN · 6ᵉ ÉDITION" en haut du poster */
.gp-light-services__event-badge {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(10, 10, 10, 0.72);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #FFFFFF;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
white-space: nowrap;
z-index: 4;
box-shadow: 0 8px 24px rgba(10, 10, 10, 0.32);
}
.gp-light-services__event-date {
color: var(--accent);
}
.gp-light-services__event-dot {
color: rgba(255, 255, 255, 0.4);
font-weight: 400;
}
.gp-light-services__event-edition {
color: rgba(255, 255, 255, 0.9);
}
/* Cas où l'image n'est pas encore chargée → placeholder très subtil */
.gp-light-services__poster[src=""],
.gp-light-services__poster:not([src]) {
background: linear-gradient(135deg, #0A0A0A 0%, #1a1a1a 100%);
}
/* ═══════════════════════════════════════════════════════════════════════
19. CARTE AAU ELITE — Variant accent or (sub-brand AAU Elite)
La carte AAU utilise le poster Game Point Elite × Under Armour.
On garde le poster intact (composition or/noir parfaite) et on
teinte légèrement le badge en or pour matcher le sub-brand AAU Elite.
═══════════════════════════════════════════════════════════════════════ */
.gp-light-services__card--poster-aau .gp-light-services__media {
aspect-ratio: 1 / 1 !important; /* poster carré → ratio 1:1 */
background: #0A0A0A;
}
/* Le poster Game Point Elite a un fond sombre + gros logo : overlay minimal */
.gp-light-services__card--poster-aau .gp-light-services__overlay {
background: linear-gradient(
180deg,
rgba(10, 10, 10, 0) 0%,
rgba(10, 10, 10, 0) 60%,
rgba(10, 10, 10, 0.55) 88%,
rgba(10, 10, 10, 0.85) 100%
) !important;
}
/* Badge AAU spécifique → couleur or (sub-brand), pas orange */
.gp-light-services__event-badge--aau {
background: rgba(10, 10, 10, 0.78) !important;
border-color: rgba(212, 175, 55, 0.42) !important; /* bord or subtil */
box-shadow:
0 8px 24px rgba(10, 10, 10, 0.4),
inset 0 0 0 1px rgba(212, 175, 55, 0.15) !important;
}
.gp-light-services__event-badge--aau .gp-light-services__event-date {
color: #D4AF37 !important; /* or AAU Elite */
}
.gp-light-services__event-badge--aau .gp-light-services__event-edition {
color: rgba(255, 255, 255, 0.95) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
20. CARTE CAMPS D'ÉTÉ — Variant accent gold (poster gold sur noir)
Le poster Camps d'été 2026 a une palette or/noir avec un grand titre
"CAMPS D'ÉTÉ 2026" en doré. On respecte cette palette en utilisant
l'accent or aussi pour le badge.
═══════════════════════════════════════════════════════════════════════ */
.gp-light-services__card--poster-camps .gp-light-services__media {
aspect-ratio: 4 / 5 !important; /* poster vertical, ratio 4:5 conserve la composition */
background: #0A0A0A;
}
/* Overlay léger en bas seulement — laisse respirer le titre or */
.gp-light-services__card--poster-camps .gp-light-services__overlay {
background: linear-gradient(
180deg,
rgba(10, 10, 10, 0) 0%,
rgba(10, 10, 10, 0) 60%,
rgba(10, 10, 10, 0.45) 85%,
rgba(10, 10, 10, 0.78) 100%
) !important;
}
/* Badge Camps spécifique → or (cohérent avec la palette du poster) */
.gp-light-services__event-badge--camps {
background: rgba(10, 10, 10, 0.78) !important;
border-color: rgba(212, 175, 55, 0.42) !important;
box-shadow:
0 8px 24px rgba(10, 10, 10, 0.4),
inset 0 0 0 1px rgba(212, 175, 55, 0.15) !important;
}
.gp-light-services__event-badge--camps .gp-light-services__event-date {
color: #E4B85B !important; /* or chaud du poster */
}
.gp-light-services__event-badge--camps .gp-light-services__event-edition {
color: rgba(255, 255, 255, 0.95) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
21. CARTE DANS LE LABO — Poster Session d'hiver 2026
Palette or chaud sur noir cohérente avec Camps + AAU.
═══════════════════════════════════════════════════════════════════════ */
.gp-light-services__card--poster-labo .gp-light-services__media {
aspect-ratio: 4 / 5 !important;
background: #0A0A0A;
}
.gp-light-services__card--poster-labo .gp-light-services__overlay {
background: linear-gradient(
180deg,
rgba(10, 10, 10, 0) 0%,
rgba(10, 10, 10, 0) 60%,
rgba(10, 10, 10, 0.45) 85%,
rgba(10, 10, 10, 0.78) 100%
) !important;
}
.gp-light-services__event-badge--labo {
background: rgba(10, 10, 10, 0.78) !important;
border-color: rgba(212, 175, 55, 0.42) !important;
box-shadow:
0 8px 24px rgba(10, 10, 10, 0.4),
inset 0 0 0 1px rgba(212, 175, 55, 0.15) !important;
}
.gp-light-services__event-badge--labo .gp-light-services__event-date {
color: #C9A24C !important; /* or du poster Dans Le Labo */
}
.gp-light-services__event-badge--labo .gp-light-services__event-edition {
color: rgba(255, 255, 255, 0.95) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
22. CARTE LIGUE MINI-BASKET — Poster bleu/rouge avec accent orange
Le poster a une palette bleue dominante. Pour rester cohérent avec
le système GP (orange = ligue/événement, or = formation/sub-brand),
on utilise l'orange comme accent badge sur cette carte aussi.
═══════════════════════════════════════════════════════════════════════ */
.gp-light-services__card--poster-ligue .gp-light-services__media {
aspect-ratio: 4 / 5 !important;
background: #0A1F3D; /* bleu profond pour fallback assorti au poster */
}
.gp-light-services__card--poster-ligue .gp-light-services__overlay {
background: linear-gradient(
180deg,
rgba(10, 10, 10, 0) 0%,
rgba(10, 10, 10, 0) 60%,
rgba(10, 10, 10, 0.45) 85%,
rgba(10, 10, 10, 0.78) 100%
) !important;
}
/* Badge Ligue → orange GP (cohérent avec All-Star = catégorie "événement") */
.gp-light-services__event-badge--ligue {
background: rgba(10, 10, 10, 0.78) !important;
border-color: rgba(255, 94, 0, 0.42) !important;
box-shadow:
0 8px 24px rgba(10, 10, 10, 0.4),
inset 0 0 0 1px rgba(255, 94, 0, 0.15) !important;
}
.gp-light-services__event-badge--ligue .gp-light-services__event-date {
color: var(--accent) !important; /* orange GP */
}
.gp-light-services__event-badge--ligue .gp-light-services__event-edition {
color: rgba(255, 255, 255, 0.95) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
23. CARTE MÉDIAS — Photo événement (couverture média réelle)
Contrairement aux autres cartes posters (graphiques/posters), celle-ci
est une vraie photo d'événement. On crop horizontal (4:3) plutôt que
vertical pour donner une vibe "photojournalisme" qui se démarque.
Badge accent orange (compétition/événement).
═══════════════════════════════════════════════════════════════════════ */
.gp-light-services__card--poster-medias .gp-light-services__media {
aspect-ratio: 4 / 5 !important; /* aligné aux autres pour la grille uniforme */
background: #0A0A0A;
}
.gp-light-services__card--poster-medias .gp-light-services__overlay {
background: linear-gradient(
180deg,
rgba(10, 10, 10, 0.18) 0%, /* léger fade en haut pour le badge */
rgba(10, 10, 10, 0) 28%,
rgba(10, 10, 10, 0) 58%,
rgba(10, 10, 10, 0.50) 86%,
rgba(10, 10, 10, 0.82) 100%
) !important;
}
/* Cadrage spécifique : on remonte légèrement pour que la bannière GP soit
centrée visuellement (la foule est en haut, la bannière au milieu/bas) */
.gp-light-services__card--poster-medias .gp-light-services__poster {
object-position: center 40% !important;
}
/* Badge Médias → orange GP (catégorie événement/live) */
.gp-light-services__event-badge--medias {
background: rgba(10, 10, 10, 0.78) !important;
border-color: rgba(255, 94, 0, 0.42) !important;
box-shadow:
0 8px 24px rgba(10, 10, 10, 0.4),
inset 0 0 0 1px rgba(255, 94, 0, 0.15) !important;
}
.gp-light-services__event-badge--medias .gp-light-services__event-date {
color: var(--accent) !important;
}
.gp-light-services__event-badge--medias .gp-light-services__event-edition {
color: rgba(255, 255, 255, 0.95) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
24. SERVICES HEAD — CENTRAGE FORCÉ (override v2 grid 2 colonnes)
gp-v2.css ligne 461 transforme le head en grid 2-col (eyebrow gauche /
titre droite) avec !important. On force ici un layout centré propre.
═══════════════════════════════════════════════════════════════════════ */
.gp-light-services__head {
display: block !important;
grid-template-columns: none !important;
text-align: center !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
margin: 0 auto var(--v5-section-gap) !important;
max-width: 100%;
}
.gp-light-services__eyebrow {
grid-column: auto !important;
display: inline-block !important;
margin: 0 auto var(--v5-stack-md) !important;
text-align: center !important;
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.32em !important;
color: var(--accent) !important;
}
/* On enlève le tiret pseudo qui crée du désordre, on garde juste le tiret
en caractère ASCII dans le texte */
.gp-light-services__eyebrow::before {
display: none !important;
}
.gp-light-services__title {
grid-column: auto !important;
display: block !important;
text-align: center !important;
margin: 0 auto !important;
max-width: 100%;
}
/* ═══════════════════════════════════════════════════════════════════════
26. PARTENAIRES — Refonte premium "Hall of Fame"
───────────────────────────────────────────────────────────────────────
Concept :
- Rail sombre (#0F0F0F dégradé) avec coins rounded 24px
- Logos sur cartes glass individuelles, claires sur le fond sombre
- Eyebrow minuscule "— PARTENAIRES OFFICIELS" centré au-dessus
- 4 étoiles décoratives aux coins du rail (signature premium)
- Marquee ralenti à 50s pour rythme cinéma
- Séparateurs en points (·) entre logos
- Hover : carte logo qui pop avec scale + glow orange
═══════════════════════════════════════════════════════════════════════ */
/* ─── Section : padding + fond ─── */
.gp-light-partners {
padding-top: clamp(64px, 7vw, 110px) !important;
padding-bottom: clamp(80px, 9vw, 140px) !important;
}
/* ─── Eyebrow réintroduit, minuscule ─── */
.gp-light-partners__head {
display: block !important;
text-align: center !important;
margin: 0 auto clamp(28px, 3vw, 48px) !important;
max-width: 100%;
}
.gp-light-partners__eyebrow {
display: inline-block !important;
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.36em !important;
text-transform: uppercase !important;
color: var(--accent) !important;
margin: 0 !important;
}
.gp-light-partners__eyebrow::before {
display: none !important;
}
/* Le titre "Ils nous font confiance" reste caché */
.gp-light-partners__title {
display: none !important;
}
/* ─── Container partners : positioning de base ─── */
.gp-light-partners .gp-container {
position: relative !important;
}
/* ─── RAIL SUPPRIMÉ — on garde la section nette sur fond clair ─── */
.gp-light-partners .gp-container::before {
content: none !important;
display: none !important;
}
/* À la place : 2 hairlines orange très subtiles haut + bas pour cadrer la barre */
.gp-light-partners__track {
border-top: 1px solid rgba(10, 10, 10, 0.06);
border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}
/* ─── 4 ÉTOILES décoratives aux coins du rail ─── */
.gp-light-partners .gp-container::after {
content: '✦';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + clamp(80px, 8vw, 120px)));
font-size: 14px;
color: rgba(255, 94, 0, 0.55);
text-shadow: 0 0 12px rgba(255, 94, 0, 0.6);
pointer-events: none;
z-index: 1;
letter-spacing: 2em;
padding-left: 2em; /* compensation pour le centrage avec letter-spacing */
}
/* ─── La track au-dessus du rail ─── */
.gp-light-partners__track {
position: relative !important;
z-index: 2 !important;
padding: clamp(24px, 2.4vw, 36px) 0 !important;
gap: clamp(40px, 4.4vw, 72px) !important;
animation-duration: 50s !important; /* Ralenti pour rythme cinéma */
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
#000 10%,
#000 90%,
transparent 100%
) !important;
mask-image: linear-gradient(
90deg,
transparent 0,
#000 10%,
#000 90%,
transparent 100%
) !important;
}
.gp-light-partners__group {
gap: clamp(40px, 4.4vw, 72px) !important;
align-items: center !important;
}
/* ─── CARTE LOGO PREMIUM ─── */
/* Logos en mode minimal sur fond clair — pas de cadre, juste le logo */
.gp-light-partners__card {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: clamp(160px, 16vw, 220px) !important;
height: clamp(80px, 9vw, 120px) !important;
padding: clamp(12px, 1.4vw, 22px) clamp(18px, 2vw, 32px) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
/* Logos en grayscale subtil au repos pour effet "wall of fame" élégant */
filter: grayscale(0.4) opacity(0.65) !important;
transition:
transform 0.5s cubic-bezier(.22, 1, .36, 1),
filter 0.5s ease !important;
}
/* ─── Séparateur élégant entre logos (point centré) ─── */
.gp-light-partners__group .gp-light-partners__card:not(:last-child)::before {
content: '·';
position: absolute;
right: calc(clamp(40px, 4.4vw, 72px) / -2);
top: 50%;
transform: translate(50%, -50%);
font-size: 24px;
font-weight: 700;
color: rgba(10, 10, 10, 0.18);
pointer-events: none;
line-height: 0;
}
/* ─── HOVER — logo retrouve ses couleurs + petit lift ─── */
.gp-light-partners__card:hover {
transform: translateY(-3px) !important;
filter: grayscale(0) opacity(1) !important;
background: transparent !important;
box-shadow: none !important;
}
.gp-light-partners__card:hover::after {
border-color: transparent !important;
}
/* ─── Logos : adaptés au fond clair ─── */
.gp-light-partners__card img {
max-height: 100% !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
transition: transform 0.5s cubic-bezier(.22, 1, .36, 1) !important;
}
.gp-light-partners__card:hover img {
transform: scale(1.06) !important;
}
/* Gestev : son logo gradient reste vibrant en toutes circonstances */
.gp-light-partners__card--gestev {
filter: grayscale(0) opacity(0.9) !important;
}
.gp-light-partners__card--gestev:hover {
filter: grayscale(0) opacity(1) !important;
}
.gp-light-partners__card--gestev img {
max-height: 72px !important;
width: 72px !important;
border-radius: 14px !important;
box-shadow: 0 4px 12px rgba(10, 10, 10, 0.1) !important;
}
.gp-light-partners__card--gestev:hover img {
transform: scale(1.08) !important;
}
/* Pause au hover de la section */
.gp-light-partners:hover .gp-light-partners__track,
.gp-light-partners:focus-within .gp-light-partners__track {
animation-play-state: paused;
}
/* ─── Petite ligne accent orange en bas du rail ─── */
.gp-light-partners::after {
content: '';
position: absolute;
left: 50%;
bottom: clamp(48px, 6vw, 80px);
transform: translateX(-50%);
width: 64px;
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
var(--accent) 50%,
transparent 100%
);
border-radius: 2px;
opacity: 0.7;
pointer-events: none;
}
/* ─── Responsive ─── */
@media (max-width: 900px) {
.gp-light-partners .gp-container::before {
height: clamp(120px, 18vw, 170px);
border-radius: 22px;
left: clamp(12px, 3vw, 32px);
right: clamp(12px, 3vw, 32px);
}
.gp-light-partners__card {
width: clamp(140px, 28vw, 200px) !important;
height: clamp(80px, 14vw, 110px) !important;
padding: clamp(12px, 2.4vw, 22px) clamp(16px, 3vw, 28px) !important;
}
.gp-light-partners__group .gp-light-partners__card:not(:last-child)::before {
font-size: 18px;
}
.gp-light-partners__eyebrow {
font-size: 11px !important;
letter-spacing: 0.32em !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
28. À PROPOS — Refonte complète DA Game Point
───────────────────────────────────────────────────────────────────────
Reprend la DA de la home : fond architectural clair, paper #F7F5EF,
typo Bulevar + Barlow Condensed + GeneralSans, accent orange #FF5E00.
Sections : Hero / Mission-Vision-Objectifs / Valeurs / CTA
═══════════════════════════════════════════════════════════════════════ */
/* Base : tout About en thème clair avec background architectural */
.gp-about-hero,
.gp-about-pillars,
.gp-about-values,
.gp-about-cta {
background-color: var(--paper) !important;
background-image:
linear-gradient(rgba(247, 245, 239, 0.92), rgba(247, 245, 239, 0.92)),
url('../img/gp-real/white-architectural-bg.jpg') !important;
background-size: cover !important;
background-position: center !important;
background-attachment: scroll !important;
color: var(--ink) !important;
position: relative;
overflow: hidden;
}
/* ─────────────────────────────────────────────────────────────────────
1) HERO ABOUT — Titre géant + lead + stats + photo
───────────────────────────────────────────────────────────────────── */
.gp-about-hero {
padding-top: calc(var(--v5-section-y) + 32px) !important;
padding-bottom: var(--v5-section-y) !important;
}
.gp-about-hero__grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: center;
}
.gp-about-hero__eyebrow {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--v5-stack-md);
}
.gp-about-hero__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(56px, 8vw, 132px);
line-height: 0.92;
letter-spacing: -0.018em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 var(--v5-stack-lg);
}
.gp-about-hero__title em {
font-style: normal;
color: var(--accent);
}
.gp-about-hero__lead {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(16px, 1.2vw, 19px);
line-height: 1.65;
color: rgba(10, 10, 10, 0.72);
max-width: 540px;
margin: 0 0 clamp(32px, 4vw, 56px);
}
.gp-about-hero__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 32px);
padding-top: clamp(20px, 2.4vw, 32px);
border-top: 1px solid rgba(10, 10, 10, 0.12);
}
.gp-about-hero__stat {
display: flex;
flex-direction: column;
gap: 6px;
}
.gp-about-hero__stat-num {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(36px, 4vw, 56px);
line-height: 1;
letter-spacing: -0.014em;
color: var(--accent);
}
.gp-about-hero__stat-label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: rgba(10, 10, 10, 0.6);
}
/* Visual photo droite */
.gp-about-hero__visual {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 30px 80px -20px rgba(10, 10, 10, 0.25),
0 0 0 1px rgba(10, 10, 10, 0.06) inset;
transform: rotate(-1.5deg);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gp-about-hero__visual:hover {
transform: rotate(0deg) scale(1.02);
}
.gp-about-hero__photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.gp-about-hero__photo-tag {
position: absolute;
top: 20px;
left: 20px;
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: rgba(10, 10, 10, 0.78);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #ffffff;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.26em;
text-transform: uppercase;
}
/* ─────────────────────────────────────────────────────────────────────
2) MISSION · VISION · OBJECTIFS — 3 cartes
───────────────────────────────────────────────────────────────────── */
.gp-about-pillars {
padding-top: clamp(60px, 7vw, 100px) !important;
padding-bottom: var(--v5-section-y) !important;
}
.gp-about-pillars__head {
text-align: center;
margin: 0 auto var(--v5-section-gap);
max-width: 760px;
}
.gp-about-pillars__eyebrow {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--v5-stack-md);
}
.gp-about-pillars__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(40px, 5.6vw, 84px);
line-height: 0.94;
letter-spacing: -0.014em;
text-transform: uppercase;
color: var(--ink);
margin: 0;
}
.gp-about-pillars__title em {
font-style: normal;
color: var(--accent);
}
.gp-about-pillars__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2.4vw, 36px);
align-items: stretch;
}
.gp-about-pillar {
position: relative;
background: #FFFFFF;
border: 1px solid rgba(10, 10, 10, 0.06);
border-radius: 20px;
padding: clamp(28px, 3vw, 44px);
box-shadow:
0 1px 2px rgba(10, 10, 10, 0.02),
0 24px 60px -20px rgba(10, 10, 10, 0.08);
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s ease,
border-color 0.4s ease;
overflow: hidden;
}
.gp-about-pillar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gp-about-pillar:hover {
transform: translateY(-6px);
box-shadow:
0 4px 8px rgba(10, 10, 10, 0.04),
0 36px 80px -16px rgba(255, 94, 0, 0.18);
border-color: rgba(255, 94, 0, 0.18);
}
.gp-about-pillar:hover::before {
transform: scaleX(1);
}
.gp-about-pillar__num {
display: inline-block;
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(72px, 9vw, 140px);
line-height: 0.9;
letter-spacing: -0.02em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(10, 10, 10, 0.10);
text-stroke: 1.5px rgba(10, 10, 10, 0.10);
margin: 0 0 var(--v5-stack-md);
transition: -webkit-text-stroke 0.5s ease;
}
.gp-about-pillar:hover .gp-about-pillar__num {
-webkit-text-stroke: 1.5px var(--accent);
text-stroke: 1.5px var(--accent);
}
.gp-about-pillar__badge {
display: inline-block;
padding: 6px 14px;
background: rgba(255, 94, 0, 0.10);
color: var(--accent);
border-radius: 999px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
margin: 0 0 var(--v5-stack-md);
}
.gp-about-pillar__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.22;
letter-spacing: -0.005em;
color: var(--ink);
margin: 0 0 var(--v5-stack-md);
}
.gp-about-pillar__desc {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.65;
color: rgba(10, 10, 10, 0.7);
margin: 0;
}
.gp-about-pillar__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.gp-about-pillar__list li {
position: relative;
padding-left: 22px;
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.55;
color: rgba(10, 10, 10, 0.78);
}
.gp-about-pillar__list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
/* ─────────────────────────────────────────────────────────────────────
3) VALEURS — Bento grid 6 valeurs
───────────────────────────────────────────────────────────────────── */
.gp-about-values {
padding-top: clamp(60px, 7vw, 100px) !important;
padding-bottom: var(--v5-section-y) !important;
}
.gp-about-values__head {
text-align: center;
margin: 0 auto var(--v5-section-gap);
max-width: 760px;
}
.gp-about-values__eyebrow {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--v5-stack-md);
}
.gp-about-values__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(40px, 5.6vw, 84px);
line-height: 0.94;
letter-spacing: -0.014em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 var(--v5-stack-md);
}
.gp-about-values__title em {
font-style: normal;
color: var(--accent);
}
.gp-about-values__lead {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.65;
color: rgba(10, 10, 10, 0.7);
margin: 0 auto;
max-width: 560px;
}
.gp-about-values__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 1.8vw, 24px);
}
.gp-about-value {
position: relative;
background: #FFFFFF;
border: 1px solid rgba(10, 10, 10, 0.06);
border-radius: 16px;
padding: clamp(24px, 2.6vw, 36px);
min-height: clamp(180px, 18vw, 240px);
display: flex;
flex-direction: column;
gap: 10px;
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s ease,
background 0.4s ease;
overflow: hidden;
}
.gp-about-value:hover {
transform: translateY(-4px);
background: #FFFFFF;
box-shadow: 0 24px 60px -16px rgba(10, 10, 10, 0.12);
}
.gp-about-value--accent {
background: var(--ink) !important;
color: #ffffff !important;
}
.gp-about-value--accent:hover {
background: var(--accent) !important;
box-shadow: 0 24px 60px -16px rgba(255, 94, 0, 0.35);
}
.gp-about-value__num {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(10, 10, 10, 0.4);
margin: 0 0 8px;
}
.gp-about-value--accent .gp-about-value__num {
color: rgba(255, 255, 255, 0.5);
}
.gp-about-value__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(26px, 3vw, 40px);
line-height: 1;
letter-spacing: -0.012em;
text-transform: uppercase;
color: var(--ink);
margin: 0;
}
.gp-about-value--accent .gp-about-value__title {
color: #ffffff;
}
.gp-about-value__desc {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: 14.5px;
line-height: 1.6;
color: rgba(10, 10, 10, 0.65);
margin: auto 0 0;
}
.gp-about-value--accent .gp-about-value__desc {
color: rgba(255, 255, 255, 0.8);
}
/* ─────────────────────────────────────────────────────────────────────
4) CTA FINAL — Carte sombre avec gros titre
───────────────────────────────────────────────────────────────────── */
.gp-about-cta {
padding-top: clamp(40px, 5vw, 80px) !important;
padding-bottom: var(--v5-section-y) !important;
}
.gp-about-cta__card {
background:
radial-gradient(ellipse at 80% 20%, rgba(255, 94, 0, 0.16) 0%, transparent 55%),
linear-gradient(180deg, #131313 0%, #0A0A0A 100%);
border-radius: 28px;
padding: clamp(48px, 6vw, 96px) clamp(28px, 4vw, 80px);
text-align: center;
color: #ffffff;
box-shadow:
0 30px 80px -20px rgba(10, 10, 10, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
}
.gp-about-cta__eyebrow {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--v5-stack-md);
}
.gp-about-cta__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(40px, 5.6vw, 80px);
line-height: 0.94;
letter-spacing: -0.014em;
text-transform: uppercase;
color: #ffffff;
margin: 0 0 var(--v5-stack-lg);
max-width: 22ch;
margin-left: auto;
margin-right: auto;
}
.gp-about-cta__title em {
font-style: normal;
color: var(--accent);
}
.gp-about-cta__lead {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.72);
max-width: 540px;
margin: 0 auto clamp(28px, 3.5vw, 44px);
}
.gp-about-cta__btns {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.gp-about-cta__btn {
display: inline-flex;
align-items: center;
padding: 14px 28px;
border-radius: 999px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.gp-about-cta__btn--solid {
background: var(--accent);
color: #ffffff;
box-shadow: 0 14px 30px -10px rgba(255, 94, 0, 0.5);
}
.gp-about-cta__btn--solid:hover {
background: #ffffff;
color: var(--ink);
transform: translateY(-2px);
}
.gp-about-cta__btn--outline {
background: transparent;
color: #ffffff;
border: 1.5px solid rgba(255, 255, 255, 0.25);
}
.gp-about-cta__btn--outline:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
/* ─────────────────────────────────────────────────────────────────────
RESPONSIVE
───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.gp-about-hero__grid {
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 56px);
}
.gp-about-hero__visual {
max-width: 480px;
margin: 0 auto;
}
.gp-about-pillars__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.gp-about-values__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.gp-about-hero__stats {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.gp-about-hero__stat-num {
font-size: clamp(28px, 8vw, 40px);
}
.gp-about-values__grid {
grid-template-columns: 1fr;
}
.gp-about-cta__btns {
flex-direction: column;
align-items: stretch;
}
}
/* ═══════════════════════════════════════════════════════════════════════
29. HERO PLAYERS — IMAGE COMPOSITE UNIQUE (solution permanente)
───────────────────────────────────────────────────────────────────────
Les 2 joueurs sont fusionnés dans UN SEUL PNG transparent
(gp-hero-players-duo.png). Une seule image = un seul élément qui
scale comme un bloc indivisible via object-fit: contain.
→ Position relative TOUJOURS identique, quel que soit :
la résolution, le zoom navigateur, le resize, le breakpoint.
Plus aucune dérive possible (le bug des 2 images séparées est éliminé).
═══════════════════════════════════════════════════════════════════════ */
.gp-light-hero__visual--players {
position: relative;
width: 100%;
/* Ratio fixe = la zone ne change jamais de forme */
aspect-ratio: 810 / 1100;
max-width: 560px;
margin-left: auto; /* ancré à droite dans sa colonne */
display: flex;
align-items: flex-end;
justify-content: center;
isolation: isolate;
}
/* Halo orange — ancré au centre-bas, derrière l'image */
.gp-hero-players__halo {
position: absolute;
bottom: 8%;
left: 50%;
width: 86%;
height: 62%;
transform: translateX(-50%);
background: radial-gradient(
ellipse at center,
rgba(255, 94, 0, 0.26) 0%,
rgba(255, 94, 0, 0.10) 42%,
transparent 74%
);
filter: blur(34px);
z-index: 0;
pointer-events: none;
animation: gpHaloPulse 7s ease-in-out infinite;
}
@keyframes gpHaloPulse {
0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}
/* Dot pattern — coin haut-gauche, décoratif */
.gp-light-hero__visual--players .gp-light-hero__dots {
position: absolute;
top: 6%;
left: 2%;
width: clamp(48px, 6vw, 78px);
height: auto;
opacity: 0.4;
z-index: 1;
pointer-events: none;
transform: rotate(-8deg);
}
/* L'IMAGE DUO — occupe toute la zone, contain garde le ratio interne */
.gp-hero-players__duo {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom center;
filter:
drop-shadow(0 22px 30px rgba(10, 10, 10, 0.26))
drop-shadow(0 6px 12px rgba(10, 10, 10, 0.16));
animation: gpDuoFloat 7s ease-in-out infinite;
}
@keyframes gpDuoFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Ombre au sol sous le duo */
.gp-light-hero__visual--players::after {
content: '';
position: absolute;
bottom: 4%;
left: 50%;
transform: translateX(-50%);
width: 72%;
height: 22px;
background: radial-gradient(
ellipse at center,
rgba(10, 10, 10, 0.28) 0%,
rgba(10, 10, 10, 0.08) 55%,
transparent 80%
);
filter: blur(10px);
z-index: 1;
pointer-events: none;
}
.gp-light-hero { overflow: hidden; }
/* ═══════════════════════════════════════════════════════════════════════
30. HAMBURGER + LOGO — Position FIXE permanente (jamais déplacé/caché)
───────────────────────────────────────────────────────────────────────
Le bouton menu disparaissait à certaines tailles à cause de règles
conflictuelles dans les couches précédentes. Ici on verrouille tout
en position:fixed avec valeurs absolues + z-index maximal.
Une seule source de vérité, valable à TOUTES les résolutions.
═══════════════════════════════════════════════════════════════════════ */
/* CRUCIAL : on retire le transform GPU du template sur .navigation.
Un ancêtre "transformé" devient le bloc conteneur des enfants
position:fixed → le hamburger (right:24px) était mesuré contre la
boîte .navigation (100vw, plus large que la zone visible à cause de
la barre de défilement) et se retrouvait poussé hors écran.
transform:none → fixed redevient relatif au VRAI viewport. */
.navigation {
transform: none !important;
-webkit-transform: none !important;
filter: none !important;
perspective: none !important;
width: 100% !important;
max-width: 100% !important;
inset: 0 !important;
}
.navigation .hamburger,
.hamburger {
position: fixed !important;
top: 24px !important;
right: 24px !important;
left: auto !important;
bottom: auto !important;
width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
background: #FF5E00 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
pointer-events: auto !important;
z-index: 999999 !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow:
0 10px 30px rgba(255, 94, 0, 0.42),
0 4px 14px rgba(0, 0, 0, 0.28),
inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
overflow: hidden !important;
transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
box-shadow 0.3s ease !important;
}
.navigation .hamburger:hover,
.hamburger:hover {
transform: scale(1.08) !important;
}
.navigation .hamburger .bar,
.hamburger .bar {
background: #ffffff !important;
height: 2px !important;
width: 40% !important;
position: absolute !important;
}
.navigation .logo,
nav .logo {
position: fixed !important;
top: 24px !important;
left: 24px !important;
right: auto !important;
bottom: auto !important;
z-index: 999999 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.navigation .logo img {
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.32));
}
/* ═══════════════════════════════════════════════════════════════════════
31. RESPONSIVE — Stable sur desktop / tablette / mobile
═══════════════════════════════════════════════════════════════════════ */
/* ─── TABLETTE (≤1024px) ─── */
@media (max-width: 1024px) {
:root {
--v5-section-y: clamp(72px, 9vw, 120px);
--v5-section-gap: clamp(36px, 5vw, 64px);
--v5-container-pad: clamp(20px, 3.5vw, 48px);
}
.gp-light-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) !important;
gap: clamp(24px, 3vw, 40px) !important;
}
.gp-light-hero__title { font-size: clamp(40px, 6.5vw, 76px) !important; }
.gp-light-hero__visual--players { max-width: 460px; }
.gp-light-features__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
.gp-light-features__grid > *:nth-child(3) { grid-column: 1 / -1; }
.gpv4-pillars__grid { grid-template-columns: repeat(6, 1fr) !important; }
.gpv4-pillars__card--xl { grid-column: 1 / 7 !important; min-height: 480px !important; }
.gpv4-pillars__card--md { grid-column: 1 / 4 !important; min-height: 320px !important; }
.gpv4-pillars__card--md:nth-of-type(3) { grid-column: 4 / 7 !important; }
.gpv4-pillars__card--lg,
.gpv4-pillars__card--closing { grid-column: 1 / 7 !important; }
.gpv4-pillars__head { grid-template-columns: 1fr !important; text-align: left; }
.gp-light-services__grid { grid-template-columns: repeat(2, 1fr) !important; }
.gp-about-hero__grid { grid-template-columns: 1fr !important; gap: 32px !important; }
.gp-about-hero__visual { max-width: 480px; margin: 0 auto; }
.gp-about-pillars__grid { grid-template-columns: 1fr !important; }
.gp-about-values__grid { grid-template-columns: repeat(2, 1fr) !important; }
.gp-light-partners__card {
width: clamp(150px, 18vw, 200px) !important;
height: clamp(80px, 11vw, 110px) !important;
}
.gp-newsletter-light__grid {
grid-template-columns: 1fr !important;
gap: 40px !important;
text-align: center;
}
.gp-footer__top { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
}
/* ─── MOBILE (≤768px) ─── */
@media (max-width: 768px) {
:root {
--v5-section-y: clamp(56px, 9vw, 88px);
--v5-section-gap: clamp(28px, 5vw, 48px);
--v5-container-pad: clamp(16px, 4vw, 32px);
}
/* HERO → 1 col, texte centré, duo en dessous */
.gp-light-hero__grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.gp-light-hero__text { padding-left: 0 !important; text-align: center; }
.gp-light-hero__title { font-size: clamp(36px, 10vw, 56px) !important; }
.gp-light-hero__title br { display: none; }
.gp-light-hero__lead { margin-left: auto !important; margin-right: auto !important; }
.gp-light-hero__ctas { justify-content: center !important; }
.gp-light-hero__social { justify-content: center !important; }
.gp-light-hero__visual--players {
max-width: 380px;
margin: 0 auto; /* centré, pas ancré droite, sur mobile */
}
.gp-light-features__grid { grid-template-columns: 1fr !important; }
.gp-light-features__grid > *:nth-child(3) { grid-column: auto; }
.gpv4-pillars__grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.gpv4-pillars__card--xl,
.gpv4-pillars__card--md,
.gpv4-pillars__card--lg,
.gpv4-pillars__card--closing {
grid-column: auto !important;
min-height: 340px !important;
}
.gpv4-pillars__card--xl { min-height: 420px !important; }
.gpv4-pillars__heading { font-size: clamp(32px, 9vw, 52px) !important; }
.gpv4-pillars__title { font-size: clamp(24px, 7vw, 36px) !important; }
.gp-light-services__grid { grid-template-columns: 1fr !important; gap: 16px !important; }
.gp-light-services__title { font-size: clamp(36px, 10vw, 56px) !important; }
.section-home-work-intro h2,
.section-home-work-intro h3 { font-size: clamp(26px, 7vw, 38px) !important; }
.section-home-work-intro p { font-size: 15px !important; }
.gp-about-hero__title { font-size: clamp(40px, 11vw, 68px) !important; }
.gp-about-hero__stats { gap: 12px !important; }
.gp-about-hero__stat-num { font-size: clamp(26px, 8vw, 38px) !important; }
.gp-about-hero__stat-label { font-size: 9px !important; letter-spacing: 0.22em !important; }
.gp-about-pillars__title,
.gp-about-values__title,
.gp-about-cta__title { font-size: clamp(32px, 9vw, 52px) !important; }
.gp-about-values__grid { grid-template-columns: 1fr !important; }
.gp-about-cta__card { padding: clamp(32px, 8vw, 48px) clamp(18px, 5vw, 32px) !important; }
.gp-about-cta__btns { flex-direction: column !important; width: 100%; }
.gp-about-cta__btn { justify-content: center; width: 100%; }
.gp-light-partners__card {
width: clamp(130px, 30vw, 180px) !important;
height: clamp(72px, 16vw, 100px) !important;
}
.gp-light-partners__group,
.gp-light-partners__track { gap: 32px !important; }
.gp-newsletter-light__lead { font-size: 15px !important; line-height: 1.5 !important; }
.gp-newsletter-light-form__btn { align-self: stretch !important; text-align: center !important; }
.gp-footer__top { grid-template-columns: 1fr !important; gap: 28px !important; text-align: center; }
.gp-footer__bottom { flex-direction: column !important; gap: 16px !important; text-align: center !important; }
/* Nav mobile — hamburger reste fixed, juste repositionné plus près du bord */
.navigation .logo,
nav .logo { top: 16px !important; left: 16px !important; }
.navigation .logo img { height: 36px !important; width: auto !important; }
.navigation .hamburger,
.hamburger {
top: 16px !important;
right: 16px !important;
width: 50px !important;
height: 50px !important;
}
}
/* ─── PETIT MOBILE (≤480px) ─── */
@media (max-width: 480px) {
:root { --v5-container-pad: clamp(14px, 4vw, 24px); }
.gp-light-hero__title { font-size: clamp(32px, 11vw, 48px) !important; }
.gp-light-hero__lead { font-size: 14px !important; }
.gp-light-hero__visual--players { max-width: 300px; }
.gp-light-services__info { padding: 16px !important; }
.gp-light-services__name { font-size: 20px !important; }
.gpv4-pillars__body { padding: 18px !important; }
.gpv4-pillars__title--xl { font-size: 32px !important; }
.gp-newsletter-light-form__input { font-size: 16px !important; height: 52px !important; }
}
@media (prefers-reduced-motion: reduce) {
.gp-hero-players__duo,
.gp-hero-players__halo { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
32. INFOLETTRE — Refonte typo + logo recentré
───────────────────────────────────────────────────────────────────────
- Titre en Bulevar Poster (même famille que tous les grands titres)
- Logo GP recentré dans sa carte (plus de désalignement)
- Espacements harmonisés
═══════════════════════════════════════════════════════════════════════ */
/* ── Titre : Bulevar Poster comme les autres titres principaux ── */
.gp-newsletter-light__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif !important;
font-weight: 800 !important;
font-size: clamp(40px, 5.2vw, 76px) !important;
line-height: 0.94 !important;
letter-spacing: -0.014em !important;
text-transform: uppercase !important;
color: var(--ink) !important;
margin: 0 0 var(--v5-stack-lg) !important;
}
/* ── Eyebrow harmonisé (Barlow Condensed, accent orange) ── */
.gp-newsletter-light__eyebrow {
display: inline-block !important;
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.36em !important;
text-transform: uppercase !important;
color: var(--accent) !important;
margin: 0 0 var(--v5-stack-md) !important;
}
/* ── Lead ── */
.gp-newsletter-light__lead {
font-family: 'GeneralSans', 'Barlow', sans-serif !important;
font-weight: 400 !important;
font-size: clamp(15px, 1.1vw, 17px) !important;
line-height: 1.6 !important;
color: rgba(10, 10, 10, 0.7) !important;
margin: 0 0 clamp(28px, 3vw, 40px) !important;
max-width: 480px !important;
}
/* ── Visual : on centre parfaitement la carte logo ── */
.gp-newsletter-light__visual {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: clamp(360px, 40vw, 520px) !important;
}
/* ── Carte logo : recentrée, rotation douce, ombre nette ── */
.gp-newsletter-light__logo-card {
position: relative !important;
width: min(100%, 380px) !important;
aspect-ratio: 1 / 1 !important;
margin: 0 auto !important;
border-radius: 20px !important;
background: #FFFFFF !important;
box-shadow: 0 30px 70px -20px rgba(10, 10, 10, 0.22) !important;
transform: rotate(-4deg) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.gp-newsletter-light__logo-card:hover {
transform: rotate(0deg) scale(1.02) !important;
}
/* ── Badge logo : parfaitement centré dans la carte ── */
.gp-logo-badge {
position: relative !important;
width: 80% !important;
aspect-ratio: 1.3 / 1 !important;
margin: 0 auto !important;
background: var(--accent) !important;
border-radius: 50% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2% !important;
}
.gp-logo-badge__mark {
width: 52% !important;
height: auto !important;
margin: 0 0 -3% 0 !important;
mix-blend-mode: screen !important;
}
.gp-logo-badge__word {
width: 62% !important;
height: auto !important;
margin: 0 !important;
}
/* ── Dots décoratifs repositionnés ── */
.gp-newsletter-light__dots {
top: 8% !important;
left: 6% !important;
}
/* ── Bouton : Barlow Condensed cohérent ── */
.gp-newsletter-light-form__btn {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
}
/* Mobile : carte logo plus petite, centrée */
@media (max-width: 768px) {
.gp-newsletter-light__visual {
min-height: auto !important;
margin-bottom: 8px;
}
.gp-newsletter-light__logo-card {
width: min(80%, 300px) !important;
}
.gp-newsletter-light__title {
font-size: clamp(34px, 9vw, 52px) !important;
}
.gp-newsletter-light__lead {
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
33. HERO LAYOUT LOCK — Neutralise l'ancien hero "stratifié" de gp-v3
───────────────────────────────────────────────────────────────────────
gp-v3.css forçait .gp-light-hero__grid en display:block + un visual en
position:absolute (ancien design abandonné). Résultat : la grille ne
s'appliquait jamais → joueurs empilés/désorganisés au resize.
Ici on REVERROUILLE la grille proprement, SANS toucher à
grid-template-columns (laissé au cascade desktop + media queries v5),
pour que la composition reste stable à toutes les tailles.
═══════════════════════════════════════════════════════════════════════ */
/* Conteneur hero : block normal (pas flex v3) */
.gp-light-hero {
display: block !important;
min-height: 0 !important;
}
.gp-light-hero .gp-container {
display: block !important;
flex-direction: initial !important;
}
/* La grille REDEVIENT une vraie grid (tue le display:block de v3) */
.gp-light-hero__grid {
display: grid !important;
position: relative !important;
flex: none !important;
min-height: 0 !important;
/* grid-template-columns NON défini ici → géré par cascade + media queries */
}
/* Texte : redevient un élément de grille normal (tue position:relative full-width v3) */
.gp-light-hero__text {
position: relative !important;
max-width: 100% !important;
z-index: 3 !important;
}
/* Titre : annule le mix-blend-mode multiply de v3 (lisibilité garantie) */
.gp-light-hero__title {
mix-blend-mode: normal !important;
}
/* VISUAL : tue le position:absolute de v3 → redevient colonne de grille */
.gp-light-hero__visual,
.gp-light-hero__visual--players {
position: relative !important;
right: auto !important;
bottom: auto !important;
height: auto !important;
z-index: 2 !important;
}
/* Le numéro éditorial "01 / 05" de v3 — on le cache (vestige template) */
.gp-light-hero::after {
content: none !important;
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
34. MENU DÉROULANT — Adapté à 6 items (était calibré pour 4)
───────────────────────────────────────────────────────────────────────
Avec Accueil/À Propos/Nos Services/Événements/Nos Partenaires/Contact,
la taille template (153px) débordait la hauteur d'écran. On passe à une
taille relative à la hauteur de viewport → les 6 items tiennent toujours,
sur desktop / tablette / mobile, sans rogner Contact.
═══════════════════════════════════════════════════════════════════════ */
.main-navigation .col-ul {
/* Taille bornée par la hauteur d'écran : 6 items tiennent toujours */
font-size: clamp(28px, min(8vw, 11vh), 116px) !important;
gap: clamp(2px, 1vh, 10px) !important;
}
.main-navigation .col-ul h3 {
line-height: 0.96 !important;
}
/* Espacement vertical interne du menu resserré pour 6 items */
.main-navigation .main-navigation-inner .row.split {
align-items: center !important;
}
/* Mobile : items encore un peu plus compacts + alignés à gauche */
@media (max-width: 768px) {
.main-navigation .col-ul {
font-size: clamp(30px, 9.5vh, 64px) !important;
}
}
/* Écran court (paysage mobile, petit laptop) : réduit pour éviter coupe */
@media (max-height: 700px) {
.main-navigation .col-ul {
font-size: clamp(24px, 9vh, 72px) !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
35. À PROPOS — VALEURS améliorées (icônes + watermark + hover premium)
───────────────────────────────────────────────────────────────────────
Refonte des 6 cartes valeurs : icône en pastille, gros chiffre
watermark outline en fond, barre d'accent qui se déploie au hover,
carte Passion (06) en accent orange plein.
═══════════════════════════════════════════════════════════════════════ */
.gp-about-values__grid {
gap: clamp(16px, 1.8vw, 24px) !important;
}
.gp-about-value {
position: relative !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
padding: clamp(26px, 2.8vw, 40px) !important;
min-height: clamp(220px, 22vw, 280px) !important;
background: #FFFFFF !important;
border: 1px solid rgba(10, 10, 10, 0.07) !important;
border-radius: 18px !important;
box-shadow:
0 1px 2px rgba(10, 10, 10, 0.02),
0 18px 44px -22px rgba(10, 10, 10, 0.10) !important;
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s ease,
border-color 0.4s ease !important;
}
/* Barre d'accent qui se déploie en haut */
.gp-about-value::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Gros chiffre watermark outline en bas-droite */
.gp-about-value__num {
position: absolute !important;
bottom: -0.18em !important;
right: 0.12em !important;
font-family: 'Bulevar', 'Barlow Condensed', sans-serif !important;
font-weight: 800 !important;
font-size: clamp(90px, 10vw, 150px) !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
color: transparent !important;
-webkit-text-stroke: 1.5px rgba(10, 10, 10, 0.07) !important;
text-stroke: 1.5px rgba(10, 10, 10, 0.07) !important;
margin: 0 !important;
pointer-events: none !important;
transition: -webkit-text-stroke 0.5s ease !important;
}
/* Pastille icône */
.gp-about-value__icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: clamp(48px, 4.4vw, 60px) !important;
height: clamp(48px, 4.4vw, 60px) !important;
border-radius: 14px !important;
background: rgba(255, 94, 0, 0.10) !important;
color: var(--accent) !important;
margin: 0 0 auto !important;
position: relative !important;
z-index: 2 !important;
transition: background 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.gp-about-value__icon svg {
width: 52% !important;
height: 52% !important;
}
/* Titre */
.gp-about-value__title {
position: relative !important;
z-index: 2 !important;
font-family: 'Bulevar', 'Barlow Condensed', sans-serif !important;
font-weight: 800 !important;
font-size: clamp(24px, 2.6vw, 34px) !important;
line-height: 1 !important;
letter-spacing: -0.012em !important;
text-transform: uppercase !important;
color: var(--ink) !important;
margin: clamp(20px, 2.2vw, 32px) 0 10px !important;
}
/* Description */
.gp-about-value__desc {
position: relative !important;
z-index: 2 !important;
font-family: 'GeneralSans', 'Barlow', sans-serif !important;
font-weight: 400 !important;
font-size: clamp(13.5px, 1vw, 15px) !important;
line-height: 1.55 !important;
color: rgba(10, 10, 10, 0.66) !important;
margin: 0 !important;
max-width: 30ch !important;
}
/* HOVER premium */
.gp-about-value:hover {
transform: translateY(-6px) !important;
border-color: rgba(255, 94, 0, 0.18) !important;
box-shadow:
0 4px 8px rgba(10, 10, 10, 0.03),
0 30px 60px -18px rgba(255, 94, 0, 0.20) !important;
}
.gp-about-value:hover::before {
transform: scaleX(1);
}
.gp-about-value:hover .gp-about-value__icon {
background: var(--accent) !important;
color: #FFFFFF !important;
transform: scale(1.06) rotate(-4deg) !important;
}
.gp-about-value:hover .gp-about-value__num {
-webkit-text-stroke: 1.5px rgba(255, 94, 0, 0.30) !important;
text-stroke: 1.5px rgba(255, 94, 0, 0.30) !important;
}
/* ── Carte ACCENT (Passion 06) — fond orange plein ── */
.gp-about-value--accent {
background: linear-gradient(160deg, #FF6A12 0%, #FF5E00 60%, #E04E00 100%) !important;
border-color: transparent !important;
box-shadow: 0 24px 60px -20px rgba(255, 94, 0, 0.45) !important;
}
.gp-about-value--accent::before { background: #FFFFFF !important; }
.gp-about-value--accent .gp-about-value__icon {
background: rgba(255, 255, 255, 0.18) !important;
color: #FFFFFF !important;
}
.gp-about-value--accent .gp-about-value__title { color: #FFFFFF !important; }
.gp-about-value--accent .gp-about-value__desc { color: rgba(255, 255, 255, 0.86) !important; }
.gp-about-value--accent .gp-about-value__num {
-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.22) !important;
text-stroke: 1.5px rgba(255, 255, 255, 0.22) !important;
}
.gp-about-value--accent:hover {
transform: translateY(-6px) !important;
box-shadow: 0 34px 70px -18px rgba(255, 94, 0, 0.55) !important;
}
.gp-about-value--accent:hover .gp-about-value__icon {
background: rgba(255, 255, 255, 0.28) !important;
color: #FFFFFF !important;
}
.gp-about-value--accent:hover .gp-about-value__num {
-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4) !important;
text-stroke: 1.5px rgba(255, 255, 255, 0.4) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
36. À PROPOS — Valeurs : carte Passion uniformisée + espace avant footer
───────────────────────────────────────────────────────────────────────
- La carte 06 redevient blanche comme les 5 autres (plus d'orange plein)
- La section Valeurs (désormais dernière avant le footer) reçoit un
padding-bas plus généreux → elle ne colle plus à la ligne du footer
═══════════════════════════════════════════════════════════════════════ */
/* Espace respiratoire sous la dernière section claire avant le footer sombre */
.gp-about-values {
padding-bottom: clamp(96px, 12vw, 180px) !important;
}
/* Sécurité : si une carte garde encore la classe accent, on la neutralise
pour cohérence (toutes les cartes valeurs en blanc) */
.gp-about-value--accent {
background: #FFFFFF !important;
border-color: rgba(10, 10, 10, 0.07) !important;
box-shadow:
0 1px 2px rgba(10, 10, 10, 0.02),
0 18px 44px -22px rgba(10, 10, 10, 0.10) !important;
}
.gp-about-value--accent::before { background: var(--accent) !important; }
.gp-about-value--accent .gp-about-value__icon {
background: rgba(255, 94, 0, 0.10) !important;
color: var(--accent) !important;
}
.gp-about-value--accent .gp-about-value__title { color: var(--ink) !important; }
.gp-about-value--accent .gp-about-value__desc { color: rgba(10, 10, 10, 0.66) !important; }
.gp-about-value--accent .gp-about-value__num {
-webkit-text-stroke: 1.5px rgba(10, 10, 10, 0.07) !important;
text-stroke: 1.5px rgba(10, 10, 10, 0.07) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
37. INFOLETTRE — Emblème de marque premium (remplace le badge orange)
───────────────────────────────────────────────────────────────────────
Carte sombre haut de gamme (identité GP noir + orange) avec :
- monogramme GP blanc NET (PNG transparent, plus de JPG screen-blend)
- wordmark GAMEPOINT. haute résolution
- halo orange diffus + anneau lumineux
- grain subtil + reflets → rendu "produit"
═══════════════════════════════════════════════════════════════════════ */
/* La carte devient un panneau sombre premium */
.gp-newsletter-light__logo-card {
width: min(100%, 400px) !important;
aspect-ratio: 1 / 1 !important;
margin: 0 auto !important;
border-radius: 26px !important;
background:
radial-gradient(ellipse at 50% 35%, rgba(255, 94, 0, 0.22) 0%, transparent 58%),
linear-gradient(165deg, #1c1c1c 0%, #121212 45%, #0A0A0A 100%) !important;
box-shadow:
0 40px 90px -30px rgba(10, 10, 10, 0.5),
0 12px 30px -12px rgba(255, 94, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: rotate(-4deg) !important;
overflow: hidden !important;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.6s ease !important;
}
.gp-newsletter-light__logo-card:hover {
transform: rotate(0deg) scale(1.02) !important;
box-shadow:
0 48px 100px -28px rgba(10, 10, 10, 0.55),
0 18px 40px -12px rgba(255, 94, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
/* Grain de film très subtil pour la matière premium */
.gp-newsletter-light__logo-card::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
}
/* L'emblème : conteneur centré */
.gp-brand-emblem {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(18px, 2.4vw, 30px);
width: 100%;
padding: clamp(28px, 5vw, 56px);
}
/* Halo orange derrière le monogramme */
.gp-brand-emblem__glow {
position: absolute;
top: 38%;
left: 50%;
width: 70%;
height: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center, rgba(255, 94, 0, 0.40) 0%, rgba(255, 94, 0, 0.10) 45%, transparent 72%);
filter: blur(26px);
pointer-events: none;
z-index: -1;
animation: gpEmblemPulse 6s ease-in-out infinite;
}
@keyframes gpEmblemPulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
/* Anneau lumineux décoratif */
.gp-brand-emblem__ring {
position: absolute;
top: 38%;
left: 50%;
width: clamp(150px, 20vw, 210px);
height: clamp(150px, 20vw, 210px);
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgba(255, 94, 0, 0.22);
box-shadow:
inset 0 0 40px rgba(255, 94, 0, 0.10),
0 0 30px rgba(255, 94, 0, 0.06);
pointer-events: none;
z-index: -1;
}
/* Monogramme GP blanc — net */
.gp-brand-emblem__mark {
width: clamp(120px, 16vw, 170px) !important;
height: auto !important;
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
position: relative;
z-index: 2;
}
/* Wordmark GAMEPOINT. */
.gp-brand-emblem__word {
width: clamp(150px, 20vw, 210px) !important;
height: auto !important;
opacity: 0.96;
position: relative;
z-index: 2;
}
/* Dots décoratifs orange — repositionnés autour de la carte */
.gp-newsletter-light__dots {
z-index: 1 !important;
opacity: 0.7 !important;
}
@media (prefers-reduced-motion: reduce) {
.gp-brand-emblem__glow { animation: none !important; }
}
/* Mobile : carte un peu plus petite */
@media (max-width: 768px) {
.gp-newsletter-light__logo-card {
width: min(82%, 320px) !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
38. CONTACT — Style Propulse 8 adapté Game Point
───────────────────────────────────────────────────────────────────────
Page sombre : hero centré (gros titre Bulevar) + formulaire 2 colonnes
(form à gauche / infos à droite), champs à bordure fine, bouton orange.
═══════════════════════════════════════════════════════════════════════ */
/* ─── HERO contact ─── */
.gp-contact-hero {
position: relative;
background: #0A0A0A;
color: #FFFFFF;
padding-top: clamp(160px, 18vw, 260px) !important;
padding-bottom: clamp(48px, 6vw, 80px) !important;
overflow: hidden;
text-align: center;
}
.gp-contact-hero__bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 94, 0, 0.16) 0%, transparent 55%),
radial-gradient(ellipse at 80% 100%, rgba(255, 94, 0, 0.08) 0%, transparent 50%),
linear-gradient(180deg, #131313 0%, #0A0A0A 100%);
pointer-events: none;
}
.gp-contact-hero .gp-container { position: relative; z-index: 1; }
.gp-contact-hero__eyebrow {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--v5-stack-md);
}
.gp-contact-hero__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(44px, 7vw, 110px);
line-height: 0.92;
letter-spacing: -0.018em;
text-transform: uppercase;
color: #FFFFFF;
margin: 0 0 var(--v5-stack-lg);
}
.gp-contact-hero__title em {
font-style: normal;
color: var(--accent);
}
.gp-contact-hero__sub {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.66);
max-width: 560px;
margin: 0 auto;
}
/* ─── SECTION formulaire ─── */
.gp-contact-form-section {
background: #0A0A0A;
color: #FFFFFF;
padding-top: clamp(40px, 5vw, 72px) !important;
padding-bottom: clamp(80px, 10vw, 150px) !important;
}
.gp-contact-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: start;
max-width: 1180px;
margin: 0 auto;
}
/* ─── Formulaire ─── */
.gp-contact-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(14px, 1.6vw, 22px);
}
.gp-contact-form__col {
margin-bottom: clamp(14px, 1.6vw, 22px);
}
.gp-contact-form__label {
display: block;
margin-bottom: 8px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.gp-contact-form__label span { color: var(--accent); }
.gp-contact-form__field {
width: 100%;
appearance: none;
-webkit-appearance: none;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 12px;
padding: 16px 18px;
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: 15px;
color: #FFFFFF;
outline: 0;
box-sizing: border-box;
transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.gp-contact-form__field::placeholder {
color: rgba(255, 255, 255, 0.38);
}
.gp-contact-form__field:focus {
border-color: rgba(255, 94, 0, 0.6);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 0 3px rgba(255, 94, 0, 0.14);
}
textarea.gp-contact-form__field {
min-height: 150px;
resize: vertical;
line-height: 1.55;
}
/* Bouton submit */
.gp-contact-form__btn {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 8px;
padding: 16px 32px;
background: var(--accent);
color: #FFFFFF;
border: 0;
border-radius: 999px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
box-shadow: 0 14px 30px -10px rgba(255, 94, 0, 0.5);
}
.gp-contact-form__btn:hover {
background: #FF6A12;
transform: translateY(-2px);
box-shadow: 0 18px 38px -12px rgba(255, 94, 0, 0.6);
}
.gp-contact-form__btn svg { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
.gp-contact-form__btn:hover svg { transform: translateX(4px); }
/* ─── Colonne infos ─── */
.gp-contact-info {
display: flex;
flex-direction: column;
gap: clamp(28px, 3vw, 40px);
padding-top: 8px;
}
.gp-contact-info__block {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: clamp(20px, 2.4vw, 28px);
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.gp-contact-info__block:last-child { border-bottom: 0; padding-bottom: 0; }
.gp-contact-info__label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--accent);
}
.gp-contact-info__link {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 500;
font-size: clamp(16px, 1.4vw, 20px);
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s ease, transform 0.3s ease;
width: fit-content;
}
.gp-contact-info__link:hover { color: var(--accent); transform: translateX(3px); }
.gp-contact-info__text {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
.gp-contact-info__socials {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.gp-contact-info__socials a {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.gp-contact-info__socials a:hover { color: var(--accent); }
/* ─── Responsive ─── */
@media (max-width: 900px) {
.gp-contact-grid {
grid-template-columns: 1fr;
gap: clamp(40px, 8vw, 64px);
}
}
@media (max-width: 560px) {
.gp-contact-form__row { grid-template-columns: 1fr; }
.gp-contact-form__field { font-size: 16px; } /* évite zoom iOS */
.gp-contact-form__btn { width: 100%; justify-content: center; }
}
/* ═══════════════════════════════════════════════════════════════════════
39. PARTENAIRES v2 — Style Rouge et Or (tiers sur fond blanc archi)
───────────────────────────────────────────────────────────────────────
- Fond blanc architectural (hérité de .gp-light)
- Tier "Partenaire majeur" : Shop Santé en grande carte vedette
- Tier "Partenaires officiels" : grille de cartes logos
- Labels de tier centrés avec filets de chaque côté
═══════════════════════════════════════════════════════════════════════ */
/* On annule l'ancien rail/marquee (classes __track etc. ne sont plus dans le DOM,
mais on neutralise au cas où) */
.gp-partners-v2 .gp-container::before,
.gp-partners-v2 .gp-container::after,
.gp-partners-v2::after { content: none !important; display: none !important; }
.gp-partners-v2 {
padding-top: clamp(80px, 9vw, 140px) !important;
padding-bottom: clamp(90px, 10vw, 160px) !important;
}
/* ─── Head ─── */
.gp-partners-v2__head {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(48px, 6vw, 80px);
}
.gp-partners-v2__eyebrow {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--v5-stack-md);
}
.gp-partners-v2__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(40px, 5.6vw, 84px);
line-height: 0.94;
letter-spacing: -0.014em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 var(--v5-stack-md);
}
.gp-partners-v2__title em { font-style: normal; color: var(--accent); }
.gp-partners-v2__lead {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: rgba(10, 10, 10, 0.66);
margin: 0 auto;
max-width: 580px;
}
/* ─── Tier ─── */
.gp-partners-v2__tier {
max-width: 1080px;
margin: 0 auto;
}
.gp-partners-v2__tier + .gp-partners-v2__tier {
margin-top: clamp(56px, 7vw, 96px);
}
.gp-partners-v2__tier-head {
display: flex;
align-items: center;
gap: clamp(16px, 2vw, 28px);
margin-bottom: clamp(28px, 3vw, 44px);
}
.gp-partners-v2__tier-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(10,10,10,0.14), transparent);
}
.gp-partners-v2__tier-label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: clamp(12px, 1vw, 14px);
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(10, 10, 10, 0.55);
white-space: nowrap;
}
.gp-partners-v2__tier--major .gp-partners-v2__tier-label { color: var(--accent); }
/* ─── Carte MAJEUR (Shop Santé vedette) ─── */
.gp-partners-v2__major-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 22px;
max-width: 620px;
margin: 0 auto;
padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px);
background: #FFFFFF;
border: 1px solid rgba(10, 10, 10, 0.07);
border-radius: 24px;
text-decoration: none;
box-shadow:
0 1px 2px rgba(10, 10, 10, 0.03),
0 30px 70px -24px rgba(10, 10, 10, 0.16);
overflow: hidden;
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s ease, border-color 0.4s ease;
}
.gp-partners-v2__major-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent), #FF9248);
}
.gp-partners-v2__major-card:hover {
transform: translateY(-6px);
border-color: rgba(255, 94, 0, 0.18);
box-shadow:
0 4px 10px rgba(10, 10, 10, 0.04),
0 40px 90px -22px rgba(255, 94, 0, 0.22);
}
.gp-partners-v2__major-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
background: rgba(255, 94, 0, 0.10);
color: var(--accent);
border-radius: 999px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.gp-partners-v2__major-logo {
width: auto;
max-width: min(100%, 360px);
height: auto;
max-height: 120px;
object-fit: contain;
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.gp-partners-v2__major-card:hover .gp-partners-v2__major-logo {
transform: scale(1.04);
}
.gp-partners-v2__major-tag {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.04em;
color: rgba(10, 10, 10, 0.5);
text-align: center;
}
/* ─── Grille partenaires officiels ─── */
.gp-partners-v2__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2.2vw, 28px);
}
.gp-partners-v2__card {
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(120px, 13vw, 170px);
padding: clamp(24px, 3vw, 44px);
background: #FFFFFF;
border: 1px solid rgba(10, 10, 10, 0.07);
border-radius: 18px;
box-shadow: 0 1px 2px rgba(10,10,10,0.02), 0 18px 44px -24px rgba(10,10,10,0.10);
transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s ease, border-color 0.4s ease;
}
.gp-partners-v2__card:hover {
transform: translateY(-5px);
border-color: rgba(255, 94, 0, 0.16);
box-shadow: 0 4px 10px rgba(10,10,10,0.03), 0 28px 56px -20px rgba(255,94,0,0.18);
}
.gp-partners-v2__card img {
width: auto;
max-width: 100%;
height: auto;
max-height: clamp(48px, 6vw, 72px);
object-fit: contain;
filter: grayscale(0.3);
opacity: 0.85;
transition: filter 0.4s ease, opacity 0.4s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.gp-partners-v2__card:hover img {
filter: grayscale(0);
opacity: 1;
transform: scale(1.05);
}
/* Gestev : logo carré, garde ses couleurs */
.gp-partners-v2__card--gestev img {
max-height: clamp(60px, 7vw, 84px) !important;
border-radius: 12px;
filter: grayscale(0) !important;
opacity: 1 !important;
}
/* ─── Responsive ─── */
@media (max-width: 760px) {
.gp-partners-v2__grid { grid-template-columns: 1fr; }
.gp-partners-v2__major-card { padding: 40px 28px; }
}
/* ═══════════════════════════════════════════════════════════════════════
40. PAGE PARTENAIRES — Hero + CTA (page dédiée)
═══════════════════════════════════════════════════════════════════════ */
/* ─── HERO ─── */
.gp-partners-hero {
text-align: center;
padding-top: calc(var(--v5-section-y) + 40px) !important;
padding-bottom: clamp(20px, 3vw, 40px) !important;
}
.gp-partners-hero__eyebrow {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--v5-stack-md);
}
.gp-partners-hero__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(48px, 7.5vw, 120px);
line-height: 0.92;
letter-spacing: -0.018em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 var(--v5-stack-lg);
}
.gp-partners-hero__title em { font-style: normal; color: var(--accent); }
.gp-partners-hero__lead {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.65;
color: rgba(10, 10, 10, 0.66);
max-width: 640px;
margin: 0 auto;
}
/* La section tiers sur la page dédiée : head déjà absent, on garde padding */
.gp-partners-hero + .gp-partners-v2 {
padding-top: clamp(24px, 3vw, 48px) !important;
}
/* On retire le head interne (utilisé seulement sur la home) si présent */
.gp-partners-v2 .gp-partners-v2__head { display: none; }
/* ─── CTA devenir partenaire ─── */
.gp-partners-cta {
max-width: 720px;
margin: clamp(64px, 8vw, 110px) auto 0;
text-align: center;
padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px);
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 94, 0, 0.16) 0%, transparent 60%),
linear-gradient(180deg, #131313 0%, #0A0A0A 100%);
border-radius: 26px;
box-shadow: 0 30px 70px -24px rgba(10, 10, 10, 0.3);
}
.gp-partners-cta__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(32px, 4.4vw, 60px);
line-height: 0.96;
letter-spacing: -0.012em;
text-transform: uppercase;
color: #FFFFFF;
margin: 0 0 var(--v5-stack-md);
}
.gp-partners-cta__title em { font-style: normal; color: var(--accent); }
.gp-partners-cta__lead {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.72);
max-width: 480px;
margin: 0 auto clamp(24px, 3vw, 36px);
}
.gp-partners-cta__btn {
display: inline-flex;
align-items: center;
padding: 15px 32px;
background: var(--accent);
color: #FFFFFF;
text-decoration: none;
border-radius: 999px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
box-shadow: 0 14px 30px -10px rgba(255, 94, 0, 0.5);
}
.gp-partners-cta__btn:hover {
background: #FF6A12;
transform: translateY(-2px);
box-shadow: 0 18px 38px -12px rgba(255, 94, 0, 0.6);
}
/* ═══════════════════════════════════════════════════════════════════════
41. AJUSTEMENTS — Logo Propulse 8 (icône+texte) + CTA partenaires clair
═══════════════════════════════════════════════════════════════════════ */
/* Logo Propulse 8 (icône + wordmark) — taille adaptée (plus haut que le texte seul) */
.gp-partners-v2__card[href*="propulse8"] img {
max-height: clamp(70px, 8vw, 104px) !important;
filter: grayscale(0) !important;
opacity: 1 !important;
}
/* Marquee (page d'accueil) */
.gp-light-partners__card--p8 img {
max-height: clamp(56px, 7vw, 88px) !important;
filter: grayscale(0) !important;
opacity: 0.9;
}
.gp-light-partners__card--p8:hover img { opacity: 1; }
/* ─── CTA « Devenez partenaire » → carte CLAIRE (plus de noir) ─── */
.gp-partners-cta {
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 94, 0, 0.10) 0%, transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, #FBF9F4 100%) !important;
border: 1px solid rgba(10, 10, 10, 0.07) !important;
box-shadow:
0 1px 2px rgba(10, 10, 10, 0.03),
0 30px 70px -24px rgba(10, 10, 10, 0.14) !important;
position: relative;
overflow: hidden;
}
.gp-partners-cta::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent), #FF9248);
}
.gp-partners-cta__title { color: var(--ink) !important; }
.gp-partners-cta__lead { color: rgba(10, 10, 10, 0.62) !important; }
/* ═══════════════════════════════════════════════════════════════════════
42. PARTENAIRES — Logos cliquables fiables (pause marquee + affordance)
───────────────────────────────────────────────────────────────────────
Les logos sont des liens (target=_blank). Sur la home le marquee défile,
donc on garantit : pause INSTANTANÉE au survol (section ET carte),
curseur main, et léger lift pour montrer que c'est cliquable.
═══════════════════════════════════════════════════════════════════════ */
/* Pause robuste du défilement dès qu'on entre dans la zone OU sur une carte */
.gp-light-partners:hover .gp-light-partners__track,
.gp-light-partners__track:hover,
.gp-light-partners__card:hover ~ .gp-light-partners__track,
.gp-light-partners:focus-within .gp-light-partners__track {
animation-play-state: paused !important;
}
/* Carte marquee : clairement cliquable */
.gp-light-partners__card {
cursor: pointer !important;
pointer-events: auto !important;
}
.gp-light-partners__card img { pointer-events: none; } /* le clic passe au lien */
/* Affordance : au survol, le logo retrouve sa couleur + se soulève */
.gp-light-partners__card:hover {
filter: grayscale(0) opacity(1) !important;
transform: translateY(-3px) !important;
}
/* Cartes page dédiée : curseur main garanti */
.gp-partners-v2__card,
.gp-partners-v2__major-card {
cursor: pointer !important;
}
.gp-partners-v2__card img,
.gp-partners-v2__major-logo { pointer-events: none; }
/* ═══════════════════════════════════════════════════════════════════════
43. PAGE NOS SERVICES — Premium blanc (style Elite / Under Armour)
───────────────────────────────────────────────────────────────────────
Fond blanc pur, beaucoup d'espace, cartes arrondies + ombres légères,
listes à puces avec icônes discrètes, séparateurs subtils, hover fluide,
reveal au scroll (gpv2-reveal). Aucune emoji — icônes SVG.
═══════════════════════════════════════════════════════════════════════ */
.gp-svc-hero,
.gp-svc {
background: #FFFFFF !important;
color: #0A0A0A;
position: relative;
}
.gp-svc-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 56px);
width: 100%;
box-sizing: border-box;
}
/* ─── HERO ─── */
.gp-svc-hero {
padding: calc(clamp(120px, 16vw, 200px)) 0 clamp(40px, 5vw, 72px);
text-align: center;
}
.gp-svc-hero__eyebrow {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 18px;
}
.gp-svc-hero__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(52px, 8vw, 128px);
line-height: 0.9;
letter-spacing: -0.018em;
text-transform: uppercase;
margin: 0 0 24px;
}
.gp-svc-hero__title em { font-style: normal; color: var(--accent); }
.gp-svc-hero__lead {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.3vw, 19px);
line-height: 1.65;
color: rgba(10, 10, 10, 0.62);
max-width: 680px;
margin: 0 auto;
}
/* ─── SECTION service ─── */
.gp-svc {
padding: clamp(56px, 7vw, 100px) 0;
}
/* Séparateur subtil entre catégories */
.gp-svc + .gp-svc::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(100% - 40px, 1200px);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(10,10,10,0.10), transparent);
}
.gp-svc--accent { background: linear-gradient(180deg, #FFF7F2 0%, #FFFFFF 100%) !important; }
/* ─── Head de catégorie ─── */
.gp-svc__head {
position: relative;
display: flex;
align-items: flex-start;
gap: clamp(18px, 2.2vw, 30px);
margin-bottom: clamp(36px, 4.5vw, 60px);
}
.gp-svc__num {
position: absolute;
top: -0.35em;
right: 0;
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(80px, 11vw, 170px);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgba(10, 10, 10, 0.06);
text-stroke: 1.5px rgba(10, 10, 10, 0.06);
pointer-events: none;
user-select: none;
z-index: 0;
}
.gp-svc__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(56px, 5vw, 72px);
height: clamp(56px, 5vw, 72px);
border-radius: 18px;
background: rgba(255, 94, 0, 0.10);
color: var(--accent);
position: relative;
z-index: 1;
}
.gp-svc__icon svg { width: 52%; height: 52%; }
.gp-svc__head-text { position: relative; z-index: 1; padding-top: 4px; }
.gp-svc__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(30px, 4vw, 56px);
line-height: 0.98;
letter-spacing: -0.012em;
text-transform: uppercase;
margin: 0 0 12px;
}
.gp-svc__title em { font-style: normal; color: var(--accent); }
.gp-svc__desc {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: rgba(10, 10, 10, 0.64);
max-width: 620px;
margin: 0;
}
/* ─── Body ─── */
.gp-svc__body {
display: flex;
flex-direction: column;
gap: clamp(32px, 4vw, 52px);
padding-left: clamp(0px, 7vw, 102px);
}
.gp-svc__block-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(10, 10, 10, 0.45);
margin: 0 0 20px;
}
/* ─── Liste avec icônes discrètes (checkmark) ─── */
.gp-svc__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 36px;
}
.gp-svc__list--inline { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
.gp-svc__list li {
position: relative;
padding-left: 30px;
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 500;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.4;
color: rgba(10, 10, 10, 0.82);
}
.gp-svc__list li::before {
content: '';
position: absolute;
left: 0;
top: 0.05em;
width: 19px;
height: 19px;
background: rgba(255, 94, 0, 0.10);
border-radius: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 13px 13px;
}
/* ─── Cartes ─── */
.gp-svc__cards { display: grid; gap: clamp(16px, 1.8vw, 24px); }
.gp-svc__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gp-svc__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gp-svc__card {
background: #FFFFFF;
border: 1px solid rgba(10, 10, 10, 0.07);
border-radius: 18px;
padding: clamp(24px, 2.6vw, 36px);
box-shadow: 0 1px 2px rgba(10,10,10,0.02), 0 14px 36px -22px rgba(10,10,10,0.12);
transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.45s ease, border-color 0.4s ease;
}
.gp-svc__card:hover {
transform: translateY(-5px) scale(1.012);
border-color: rgba(255, 94, 0, 0.18);
box-shadow: 0 4px 10px rgba(10,10,10,0.04), 0 30px 60px -22px rgba(255,94,0,0.2);
}
.gp-svc__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px; height: 48px;
border-radius: 14px;
background: rgba(255, 94, 0, 0.10);
color: var(--accent);
margin-bottom: 18px;
}
.gp-svc__card-icon svg { width: 50%; height: 50%; }
.gp-svc__card-tag {
display: inline-block;
padding: 5px 13px;
background: rgba(10, 10, 10, 0.05);
color: rgba(10, 10, 10, 0.6);
border-radius: 999px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 16px;
}
.gp-svc__card-tag--accent { background: rgba(255, 94, 0, 0.12); color: var(--accent); }
.gp-svc__card-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: clamp(19px, 1.8vw, 24px);
line-height: 1.1;
letter-spacing: -0.005em;
margin: 0 0 10px;
color: #0A0A0A;
}
.gp-svc__card-text {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: 14.5px;
line-height: 1.55;
color: rgba(10, 10, 10, 0.6);
margin: 0;
}
.gp-svc__card--lg .gp-svc__list { margin-top: 16px; }
.gp-svc__card--lg .gp-svc__list li { color: rgba(10,10,10,0.7); font-weight: 400; }
/* ─── Pills ─── */
.gp-svc__pills { display: flex; flex-wrap: wrap; gap: 12px; }
.gp-svc__pill {
display: inline-flex;
align-items: center;
padding: 12px 24px;
background: #FFFFFF;
border: 1px solid rgba(10, 10, 10, 0.1);
border-radius: 999px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: clamp(15px, 1.3vw, 18px);
letter-spacing: 0.02em;
color: #0A0A0A;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.gp-svc__pill:hover {
border-color: rgba(255, 94, 0, 0.4);
transform: translateY(-2px);
box-shadow: 0 12px 24px -12px rgba(255, 94, 0, 0.25);
}
.gp-svc__pill sup { font-size: 0.6em; }
/* ─── CTA ─── */
.gp-svc-cta-section { padding-top: clamp(40px, 5vw, 70px) !important; }
.gp-svc-cta {
text-align: center;
max-width: 760px;
margin: 0 auto;
padding: clamp(44px, 6vw, 80px) clamp(28px, 4vw, 64px);
background:
radial-gradient(ellipse at 50% 0%, rgba(255,94,0,0.10) 0%, transparent 60%),
linear-gradient(180deg, #FBF9F4 0%, #FFFFFF 100%);
border: 1px solid rgba(10, 10, 10, 0.07);
border-radius: 26px;
position: relative;
overflow: hidden;
box-shadow: 0 30px 70px -28px rgba(10,10,10,0.16);
}
.gp-svc-cta::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--accent), #FF9248);
}
.gp-svc-cta__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(34px, 4.6vw, 64px);
line-height: 0.96;
letter-spacing: -0.012em;
text-transform: uppercase;
margin: 0 0 16px;
}
.gp-svc-cta__title em { font-style: normal; color: var(--accent); }
.gp-svc-cta__lead {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: rgba(10, 10, 10, 0.6);
max-width: 500px;
margin: 0 auto 32px;
}
.gp-svc-cta__btn {
display: inline-flex;
align-items: center;
padding: 16px 36px;
background: var(--accent);
color: #FFFFFF;
text-decoration: none;
border-radius: 999px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
transition: background 0.3s ease, transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s ease;
box-shadow: 0 14px 30px -10px rgba(255,94,0,0.5);
}
.gp-svc-cta__btn:hover {
background: #FF6A12;
transform: translateY(-2px);
box-shadow: 0 18px 38px -12px rgba(255,94,0,0.6);
}
/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
.gp-svc__body { padding-left: 0; }
.gp-svc__cards--3 { grid-template-columns: 1fr 1fr; }
.gp-svc__num { font-size: clamp(70px, 16vw, 120px); opacity: 0.7; }
}
@media (max-width: 680px) {
.gp-svc__head { flex-direction: column; gap: 16px; }
.gp-svc__list { grid-template-columns: 1fr; }
.gp-svc__cards--3,
.gp-svc__cards--2 { grid-template-columns: 1fr; }
.gp-svc__num { top: -0.2em; }
}
/* ═══════════════════════════════════════════════════════════════════════
44. NOS SERVICES → ÉVÉNEMENTS — Frise des éditions All-Star
═══════════════════════════════════════════════════════════════════════ */
.gp-allstar-intro {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: rgba(10, 10, 10, 0.64);
max-width: 680px;
margin: 0 0 clamp(28px, 3.2vw, 44px);
}
.gp-allstar-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2vw, 26px);
}
.gp-allstar-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 18px;
overflow: hidden;
background: #FFFFFF;
border: 1px solid rgba(10, 10, 10, 0.07);
box-shadow: 0 1px 2px rgba(10,10,10,0.02), 0 16px 40px -24px rgba(10,10,10,0.16);
transition: transform 0.5s cubic-bezier(.22,1,.36,1), box-shadow 0.5s ease, border-color 0.4s ease;
}
.gp-allstar-card:hover {
transform: translateY(-6px) scale(1.012);
border-color: rgba(255, 94, 0, 0.2);
box-shadow: 0 6px 14px rgba(10,10,10,0.05), 0 34px 64px -22px rgba(255,94,0,0.24);
}
/* Média — affiche en 4:5 */
.gp-allstar-card__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: linear-gradient(160deg, #15233f 0%, #0c1526 100%);
}
.gp-allstar-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(.22,1,.36,1);
}
.gp-allstar-card:hover .gp-allstar-card__media img { transform: scale(1.05); }
/* Placeholder (affiche manquante) */
.gp-allstar-card__ph {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
background:
radial-gradient(ellipse at 50% 40%, rgba(255,94,0,0.18) 0%, transparent 60%),
repeating-linear-gradient(135deg, #15233f 0 14px, #11203a 14px 28px);
}
.gp-allstar-card.is-empty .gp-allstar-card__media img { display: none; }
.gp-allstar-card.is-empty .gp-allstar-card__ph { display: flex; }
/* Badge "Prochaine" */
.gp-allstar-card__badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
padding: 6px 14px;
background: var(--accent);
color: #fff;
border-radius: 999px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
box-shadow: 0 6px 16px rgba(255,94,0,0.4);
}
/* Info sous l'affiche */
.gp-allstar-card__info {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 16px 18px;
}
.gp-allstar-card__ed {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(17px, 1.6vw, 22px);
letter-spacing: -0.005em;
text-transform: uppercase;
color: #0A0A0A;
}
.gp-allstar-card__ed sup { font-size: 0.55em; }
.gp-allstar-card__cap {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
text-align: right;
}
.gp-allstar-card--next { border-color: rgba(255, 94, 0, 0.28); }
/* Carte Battle of the Cities pleine largeur */
.gp-svc__card--wide { max-width: 720px; }
@media (max-width: 900px) {
.gp-allstar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.gp-allstar-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.gp-allstar-card__info { padding: 12px; flex-direction: column; align-items: flex-start; gap: 2px; }
.gp-allstar-card__cap { text-align: left; }
}
/* ═══════════════════════════════════════════════════════════════════════
45. ALL-STAR — Cartes slideshow (éditions à 2 affiches)
═══════════════════════════════════════════════════════════════════════ */
.gp-allstar-slides {
position: absolute;
inset: 0;
}
.gp-allstar-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.7s ease;
transform: translateZ(0);
}
.gp-allstar-slide.is-active { opacity: 1; }
.gp-allstar-card:hover .gp-allstar-slide.is-active { transform: scale(1.05); transition: opacity 0.7s ease, transform 0.6s cubic-bezier(.22,1,.36,1); }
/* Points de navigation */
.gp-allstar-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 3;
}
.gp-allstar-dot {
width: 8px;
height: 8px;
border-radius: 999px;
border: 0;
padding: 0;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background 0.3s ease, width 0.3s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.gp-allstar-dot.is-active {
background: var(--accent);
width: 22px;
}
/* ═══════════════════════════════════════════════════════════════════════
46. BATTLE OF THE CITIES — Bloc vedette (slideshow + texte)
═══════════════════════════════════════════════════════════════════════ */
.gp-botc {
display: grid;
grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
background: #FFFFFF;
border: 1px solid rgba(10, 10, 10, 0.07);
border-radius: 22px;
padding: clamp(20px, 2.4vw, 32px);
box-shadow: 0 1px 2px rgba(10,10,10,0.02), 0 24px 56px -28px rgba(10,10,10,0.16);
}
/* Média = slideshow (réutilise .gp-allstar-slides/.gp-allstar-slide/.gp-allstar-dots) */
.gp-botc__media {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(160deg, #15233f 0%, #0c1526 100%);
}
/* Texte */
.gp-botc__text { padding: clamp(4px, 1vw, 16px) 0; }
.gp-botc__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(30px, 4vw, 56px);
line-height: 0.98;
letter-spacing: -0.012em;
text-transform: uppercase;
color: #0A0A0A;
margin: 14px 0 16px;
}
.gp-botc__title em { font-style: normal; color: var(--accent); }
.gp-botc__desc {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: rgba(10, 10, 10, 0.66);
margin: 0 0 22px;
max-width: 520px;
}
.gp-botc__desc strong { font-weight: 600; color: var(--ink); }
.gp-botc__list { max-width: 520px; }
.gp-botc__list li sup { font-size: 0.6em; }
@media (max-width: 760px) {
.gp-botc {
grid-template-columns: 1fr;
gap: 22px;
}
.gp-botc__media { max-width: 360px; margin: 0 auto; width: 100%; }
.gp-botc__text { text-align: center; }
.gp-botc__desc, .gp-botc__list { margin-left: auto; margin-right: auto; }
}
/* ═══════════════════════════════════════════════════════════════════════
47. Battle of the Cities — 2 affiches séparées (grille 2 colonnes)
═══════════════════════════════════════════════════════════════════════ */
.gp-allstar-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 760px;
}
@media (max-width: 560px) {
.gp-allstar-grid--2 { grid-template-columns: 1fr 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
48. Titres d'événement (All-Star / Battle) — Bulevar Poster premium
═══════════════════════════════════════════════════════════════════════ */
.gp-evt-title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(28px, 3.4vw, 48px);
line-height: 0.98;
letter-spacing: -0.012em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 14px;
}
.gp-evt-title em { font-style: normal; color: var(--accent); }
/* ═══════════════════════════════════════════════════════════════════════
49. Services — blocs détaillés visuels (faits, calendrier, horaires, infos)
═══════════════════════════════════════════════════════════════════════ */
.gp-mt { margin-top: clamp(28px, 3vw, 40px) !important; }
/* — Faits clés : grille de stats — */
.gp-facts {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(12px, 1.3vw, 18px);
margin: clamp(24px, 2.6vw, 36px) 0 0;
}
.gp-fact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
background: #FFFFFF;
border: 1px solid rgba(10, 10, 10, 0.07);
border-radius: 16px;
padding: clamp(18px, 1.9vw, 28px) clamp(16px, 1.6vw, 24px);
box-shadow: 0 1px 2px rgba(10,10,10,0.02), 0 14px 36px -24px rgba(10,10,10,0.12);
transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .4s ease;
}
.gp-fact:hover {
transform: translateY(-4px);
border-color: rgba(255,94,0,0.18);
box-shadow: 0 4px 10px rgba(10,10,10,0.04), 0 28px 56px -24px rgba(255,94,0,0.22);
}
.gp-fact__num {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(30px, 3.4vw, 46px);
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--ink);
}
.gp-fact__num small { font-size: 0.46em; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.gp-fact__label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: clamp(12px, 0.95vw, 13.5px);
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(10,10,10,0.5);
line-height: 1.2;
}
.gp-fact--accent { background: linear-gradient(155deg, #FF5E00 0%, #FF7A2E 100%); border-color: transparent; }
.gp-fact--accent .gp-fact__num { color: #fff; }
.gp-fact--accent .gp-fact__label { color: rgba(255,255,255,0.88); }
/* — Lignes d'informations clé / valeur — */
.gp-info-rows {
margin-top: clamp(22px, 2.4vw, 32px);
border-top: 1px solid rgba(10,10,10,0.09);
}
.gp-info-row {
display: grid;
grid-template-columns: 190px 1fr;
gap: 16px;
padding: clamp(14px, 1.4vw, 18px) 0;
border-bottom: 1px solid rgba(10,10,10,0.09);
align-items: baseline;
}
.gp-info-row__k {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.gp-info-row__v {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 500;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.5;
color: rgba(10,10,10,0.82);
}
/* — Callout (places limitées / inscription) — */
.gp-callout {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 22px;
margin-top: clamp(26px, 2.8vw, 38px);
padding: clamp(24px, 2.5vw, 34px) clamp(26px, 2.9vw, 42px);
background: var(--ink);
border-radius: 18px;
}
.gp-callout__text {
margin: 0;
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.15vw, 18px);
line-height: 1.55;
color: rgba(255,255,255,0.76);
max-width: 660px;
}
.gp-callout__text strong { color: #fff; font-weight: 600; }
.gp-callout__btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 14px 32px;
background: var(--accent);
color: #fff;
border-radius: 999px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.gp-callout__btn:hover {
transform: translateY(-2px);
background: #ff7325;
box-shadow: 0 16px 32px -14px rgba(255,94,0,0.6);
}
/* — Carte horaire — */
.gp-sched { display: flex; flex-direction: column; }
.gp-sched__time {
display: inline-flex;
align-self: flex-start;
align-items: center;
padding: 7px 15px;
background: rgba(255,94,0,0.10);
color: var(--accent);
border-radius: 999px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.03em;
margin-bottom: 16px;
}
/* — Calendrier : pastilles de dates — */
.gp-dates {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: clamp(8px, 0.9vw, 12px);
margin-top: 18px;
}
.gp-date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
aspect-ratio: 1 / 1.06;
background: #FFFFFF;
border: 1px solid rgba(10,10,10,0.08);
border-radius: 14px;
box-shadow: 0 10px 26px -22px rgba(10,10,10,0.22);
transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
}
.gp-date:hover {
transform: translateY(-4px);
border-color: rgba(255,94,0,0.22);
box-shadow: 0 22px 44px -24px rgba(255,94,0,0.3);
}
.gp-date__w {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(10,10,10,0.4);
}
.gp-date__d {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(20px, 2vw, 28px);
line-height: 1;
color: var(--ink);
}
.gp-date__d sup { font-size: 0.5em; }
.gp-date__m {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
/* — Lead (texte de mission) — */
.gp-svc__lead {
font-family: 'GeneralSans', 'Barlow', sans-serif;
font-weight: 400;
font-size: clamp(16px, 1.25vw, 19px);
line-height: 1.65;
color: rgba(10,10,10,0.74);
max-width: 800px;
margin: 0 0 clamp(28px, 3vw, 40px);
}
/* — Responsive — */
@media (max-width: 1024px) {
.gp-facts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
.gp-info-row { grid-template-columns: 1fr; gap: 3px; }
.gp-callout { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
.gp-facts { grid-template-columns: repeat(2, 1fr); }
.gp-dates { grid-template-columns: repeat(4, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════════
50. Dans Le Labo — feature (affiche + horaires), calendrier mensuel, inscription
═══════════════════════════════════════════════════════════════════════ */
/* — Feature : affiche + infos (2 colonnes) — */
.gp-feat {
display: grid;
grid-template-columns: 340px 1fr;
gap: clamp(24px, 3vw, 48px);
align-items: start;
margin-top: clamp(24px, 2.6vw, 36px);
}
.gp-feat__media {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 60px -30px rgba(10,10,10,0.4);
background: #f0f0f0;
}
.gp-feat__media img { width: 100%; height: auto; display: block; }
/* — Horaires compacts (liste) — */
.gp-sched-list { display: flex; flex-direction: column; gap: 12px; }
.gp-sched-list__item {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 15px 20px;
background: #FFFFFF;
border: 1px solid rgba(10,10,10,0.07);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(10,10,10,0.02), 0 12px 30px -24px rgba(10,10,10,0.14);
transition: border-color .35s ease, transform .35s ease;
}
.gp-sched-list__item:hover { border-color: rgba(255,94,0,0.2); transform: translateX(3px); }
.gp-sched-list__lvl {
font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
font-size: clamp(15px, 1.4vw, 18px); color: var(--ink);
}
.gp-sched-list__lvl sup { font-size: 0.62em; }
.gp-sched-list__time {
flex-shrink: 0;
font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
font-size: 14px; letter-spacing: 0.02em;
color: var(--accent); background: rgba(255,94,0,0.10);
padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.gp-info-rows--tight { margin-top: clamp(18px, 2vw, 24px); }
/* — Calendrier groupé par mois — */
.gp-cal {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 22px);
margin-top: 18px;
}
.gp-cal__month {
background: #FFFFFF;
border: 1px solid rgba(10,10,10,0.07);
border-radius: 16px;
padding: clamp(16px, 1.7vw, 24px);
box-shadow: 0 1px 2px rgba(10,10,10,0.02), 0 14px 36px -24px rgba(10,10,10,0.12);
}
.gp-cal__mlabel {
display: block;
font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px; padding-bottom: 11px;
border-bottom: 1px solid rgba(10,10,10,0.09);
}
.gp-cal__days { display: flex; flex-direction: column; gap: 11px; }
.gp-cal__day { display: flex; align-items: baseline; gap: 11px; }
.gp-cal__day b {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif; font-weight: 800;
font-size: clamp(20px, 1.9vw, 26px); line-height: 1; color: var(--ink);
min-width: 38px;
}
.gp-cal__day b sup { font-size: 0.5em; }
.gp-cal__day i {
font-style: normal;
font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(10,10,10,0.42);
}
/* — Panneau d'inscription (sombre) — */
.gp-reg {
margin-top: clamp(28px, 3vw, 44px);
background: var(--ink);
border-radius: 22px;
padding: clamp(28px, 3.4vw, 52px);
}
.gp-reg__head { margin-bottom: clamp(22px, 2.4vw, 32px); }
.gp-reg__title {
font-family: 'Bulevar', 'Barlow Condensed', sans-serif; font-weight: 800;
font-size: clamp(24px, 2.6vw, 38px); line-height: 1; letter-spacing: -0.01em;
text-transform: uppercase; color: #fff; margin: 0 0 9px;
}
.gp-reg__sub {
font-family: 'GeneralSans', 'Barlow', sans-serif; font-weight: 400;
font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5;
color: rgba(255,255,255,0.6); margin: 0;
}
.gp-reg .gp-contact-form__btn { width: 100%; justify-content: center; margin-top: 4px; }
/* — Responsive — */
@media (max-width: 900px) { .gp-cal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
.gp-feat { grid-template-columns: 1fr; gap: 22px; }
.gp-feat__media { max-width: 440px; }
}
@media (max-width: 480px) { .gp-cal { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════════════════
51. Camps — facts (3), semaines, note, select d'inscription
═══════════════════════════════════════════════════════════════════════ */
.gp-facts--3 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
/* — Semaines de camp — */
.gp-weeks {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
gap: clamp(12px, 1.4vw, 18px);
margin-top: 18px;
}
.gp-week {
display: flex; flex-direction: column; gap: 5px;
background: #FFFFFF; border: 1px solid rgba(10,10,10,0.07); border-radius: 14px;
padding: 16px 18px;
box-shadow: 0 1px 2px rgba(10,10,10,0.02), 0 12px 30px -24px rgba(10,10,10,0.14);
transition: border-color .35s ease, transform .35s ease;
}
.gp-week:hover { border-color: rgba(255,94,0,0.2); transform: translateY(-3px); }
.gp-week__n {
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.gp-week__d {
font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
font-size: clamp(16px, 1.5vw, 19px); color: var(--ink);
}
.gp-note {
margin: 14px 0 0;
font-family: 'GeneralSans', 'Barlow', sans-serif; font-size: 14px; font-style: italic;
color: rgba(10,10,10,0.55);
}
/* — Select (fond sombre, formulaire) — */
select.gp-contact-form__field {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 16px center;
padding-right: 44px; cursor: pointer;
}
select.gp-contact-form__field option { color: #0A0A0A; }
/* ═══════════════════════════════════════════════════════════════════════
52. Services médiatiques — cartes image (couverture médiatique)
═══════════════════════════════════════════════════════════════════════ */
.gp-media-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 1.8vw, 26px);
margin-top: clamp(6px, 1vw, 14px);
}
.gp-media-card {
background: #FFFFFF;
border: 1px solid rgba(10,10,10,0.07);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(10,10,10,0.02), 0 18px 44px -26px rgba(10,10,10,0.22);
transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .4s ease;
}
.gp-media-card:hover {
transform: translateY(-6px);
border-color: rgba(255,94,0,0.16);
box-shadow: 0 6px 14px rgba(10,10,10,0.05), 0 36px 70px -28px rgba(255,94,0,0.22);
}
.gp-media-card__img { aspect-ratio: 4 / 5; overflow: hidden; background: #eee; }
.gp-media-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.gp-media-card:hover .gp-media-card__img img { transform: scale(1.05); }
.gp-media-card__label { display: flex; align-items: center; gap: 13px; padding: 18px 22px; }
.gp-media-card__label::before { content: ''; flex-shrink: 0; width: 4px; height: 20px; background: var(--accent); border-radius: 2px; }
.gp-media-card__label span {
font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
font-size: clamp(14px, 1.2vw, 16px); letter-spacing: 0.12em;
text-transform: uppercase; color: var(--ink);
}
/* mission centrée + CTA */
.gp-svc__lead--center { text-align: center; margin-left: auto; margin-right: auto; margin-top: clamp(36px, 4vw, 56px); }
.gp-media-cta { display: flex; justify-content: center; margin-top: clamp(22px, 2.6vw, 34px); }
.gp-media-cta a {
display: inline-flex; align-items: center;
padding: 16px 36px; background: var(--accent); color: #fff;
border-radius: 999px; font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
text-decoration: none; box-shadow: 0 14px 30px -10px rgba(255,94,0,0.5);
transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.gp-media-cta a:hover { transform: translateY(-2px); background: #ff7325; box-shadow: 0 18px 38px -12px rgba(255,94,0,0.6); }
@media (max-width: 760px) { .gp-media-grid { grid-template-columns: 1fr; max-width: 420px; } }
/* ── Slideshow All-Star — affiche cliquable + zone de clic des points agrandie ── */
.gp-allstar-card__media[data-allstar-slider] { cursor: pointer; }
.gp-allstar-dot { position: relative; }
.gp-allstar-dot::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
/* ── Transitions / écrans : retirer la texture ROUGE du template — que de l'orange ── */
.fixed-background.primary .texture { background-image: none !important; }
.fixed-background.primary { background-color: var(--gp-orange) !important; }
.transition-container[data-transition-status="loading"] .fixed-background.primary { background-color: var(--color-dark) !important; }
/* ── Galerie médias : pleine largeur (annule l'indentation du body) → cartes plus grandes ── */
#medias .gp-svc-container { max-width: 1680px; }
#medias .gp-svc__body > .gp-media-grid {
margin-left: calc(-1 * clamp(0px, 7vw, 102px));
width: calc(100% + clamp(0px, 7vw, 102px));
gap: clamp(20px, 2.4vw, 34px);
}
/* ── Menu : agrandir l'image d'aperçu (le template la réduisait à 0×0) ── */
.main-navigation .col-images { min-height: 80vh; position: relative; }
.main-navigation .stacked-images {
position: relative !important;
height: min(78vh, 720px) !important;
width: auto !important;
aspect-ratio: 4 / 5;
}
.main-navigation .stacked-images .single-stacked-image img,
.main-navigation .stacked-images .single-stacked-image picture { width: 100%; height: 100%; object-fit: cover; }