dans le HTML, on le neutralise */
.page-abos .hero-abo .hero-overlay{ display:none !important; }
/* 3) Un SEUL overlay géré ici (vignette + lecture du texte) */
.page-abos .hero-abo{ position:relative; overflow:hidden; }
.page-abos .hero-abo .hero-media{
position:absolute; inset:-8% -2%; z-index:0;
background-size:cover; background-position:center 40%;
}
.page-abos .hero-abo::before{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
/* vignette + dégradé lisible */
background:
radial-gradient(1200px 300px at 10% 10%, rgba(0,0,0,.22), transparent 60%),
radial-gradient(900px 300px at 90% 90%, rgba(0,0,0,.20), transparent 60%),
linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.45) 70%);
}
/* ====== HERO ABOS : full-bleed, vignette douce, pas de bordures ====== */
.page-abos .hero-abo{
height:min(68vh,640px);
margin:0 0 28px;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
position:relative;
overflow:hidden;
}
.page-abos .hero-abo .hero-media{
position:absolute; inset:-10% -4%;
background-size:cover; background-position:center 40%;
transform:translate3d(0,0,0) scale(1.08); /* marge pour le parallax */
will-change:transform;
}
.page-abos .hero-abo::before{
/* vignette + lisibilité du texte (un seul overlay) */
content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
background:
radial-gradient(1200px 300px at 10% 10%, rgba(0,0,0,.18), transparent 60%),
radial-gradient(900px 300px at 90% 90%, rgba(0,0,0,.18), transparent 60%),
linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.45) 70%);
}
.page-abos .hero-abo .hero-inner{ position:relative; z-index:2; background:transparent }
/* ====== HERO buttons — effet “ça pète” au hover ====== */
.page-abos .hero-abo .actions-row .btn{
position:relative; overflow:hidden;
border-radius:14px;
transform:translateZ(0);
transition:transform .18s cubic-bezier(.2,.8,.2,1),
box-shadow .18s, filter .18s, background .18s;
box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.page-abos .hero-abo .actions-row .btn::after{
/* “shine” diagonal */
content:""; position:absolute; inset:-160% -20%;
background:linear-gradient(110deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 55%);
transform:translateX(-85%) rotate(16deg);
opacity:0; mix-blend-mode:screen; pointer-events:none;
transition:transform .65s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.page-abos .hero-abo .actions-row .btn:hover{
transform:translateY(-3px) scale(1.02);
filter:saturate(1.08) brightness(1.04);
box-shadow:0 18px 46px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.page-abos .hero-abo .actions-row .btn:hover::after{
transform:translateX(125%) rotate(16deg);
opacity:.7;
}
.page-abos .hero-abo .actions-row .btn:active{ transform:translateY(0) scale(.99) }
/* anneau radial subtil sous le bouton (accent pour primary, gris pour soft) */
.page-abos .hero-abo .btn--primary::before,
.page-abos .hero-abo .btn--soft::before{
content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
opacity:0; transform:scale(.96);
transition:opacity .25s, transform .25s;
}
.page-abos .hero-abo .btn--primary::before{
background:radial-gradient(120% 180% at 50% 120%, rgba(192,57,43,0) 0 52%, rgba(192,57,43,.35) 60%, rgba(192,57,43,0) 74%);
}
.page-abos .hero-abo .btn--soft::before{
background:radial-gradient(120% 180% at 50% 120%, rgba(120,130,160,0) 0 52%, rgba(120,130,160,.28) 60%, rgba(120,130,160,0) 74%);
}
.page-abos .hero-abo .actions-row .btn:hover::before{ opacity:1; transform:scale(1) }
/* un poil plus “punchy” sur les couleurs du primary en hover */
.page-abos .hero-abo .btn--primary{
background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.page-abos .hero-abo .btn--primary:hover{
filter:saturate(1.15) brightness(1.06);
}
/* Accessibilité : pas d’anim si animations réduites */
@media (prefers-reduced-motion:reduce){
.page-abos .hero-abo .actions-row .btn,
.page-abos .hero-abo .actions-row .btn::after,
.page-abos .hero-abo .actions-row .btn::before{ transition:none }
}
/* Hero Abos : on s’assure qu’un vieux style ne force pas transform:none */
.page-abos .hero.hero-abo .hero-media{
transform: translate3d(0,0,0) scale(1.08);
will-change: transform;
}
.page-abos .hero-abo .actions-row .btn:hover{
transform: translateY(-3px) scale(1.03); /* +0.01 vs avant */
}
/* === HERO ABOS — assombrir + vignette + color grade === */
.page-abos .hero-abo{ position:relative; isolation:isolate; }
.page-abos .hero-abo .hero-inner{ position:relative; z-index:2; }
/* Calque d’effet au-dessus du background, en dessous du contenu */
.page-abos .hero-abo::after{
content:"";
position:absolute; inset:-6% -4%;
z-index:1; pointer-events:none;
/* Vignette (bords plus sombres) + voile global */
background:
radial-gradient(120% 80% at 50% 40%,
rgba(0,0,0,.12) 0%,
rgba(0,0,0,.55) 66%,
rgba(0,0,0,.80) 100%),
linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42) 78%);
/* Le mix “colle” l’effet au visuel sans toucher le texte */
mix-blend-mode:multiply;
/* Léger grade : plus de contraste, un chouïa moins de saturation */
filter: contrast(1.08) saturate(.96);
}
/* Si le navigateur supporte le backdrop-filter, on gagne un assombrissement propre */
@supports (backdrop-filter: brightness(.9)) {
.page-abos .hero-abo::after{
/* on garde la vignette, et on assombrit la scène */
background:
radial-gradient(120% 80% at 50% 40%,
rgba(0,0,0,.10) 0%,
rgba(0,0,0,.50) 66%,
rgba(0,0,0,.78) 100%),
rgba(0,0,0,.10);
backdrop-filter: brightness(.84) contrast(1.06) saturate(.98);
}
}
/* --- HERO ABOS : réactive l’overlay + assombrissement net --- */
.page-abos .hero-abo { position:relative; isolation:isolate; }
.page-abos .hero-abo .hero-inner { position:relative; z-index:2; }
/* 1) réactive l'overlay (priorité > règles précédentes) */
.page-abos .hero-abo .hero-overlay{
display:block !important;
position:absolute; inset:0; z-index:1; pointer-events:none;
/* vignette + voile sombre */
background:
radial-gradient(120% 85% at 50% 40%,
rgba(0,0,0,.10) 0%,
rgba(0,0,0,.52) 64%,
rgba(0,0,0,.82) 100%),
linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.56) 78%);
mix-blend-mode:multiply; /* colle l'effet au visuel */
filter:contrast(1.06) saturate(.96); /* petit grade */
}
/* Fallback si mix-blend-mode n'est pas supporté */
@supports not (mix-blend-mode:multiply){
.page-abos .hero-abo .hero-overlay{
background:
radial-gradient(120% 85% at 50% 40%,
rgba(0,0,0,.14) 0%, rgba(0,0,0,.58) 64%, rgba(0,0,0,.86) 100%),
linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.62) 78%);
}
}
/* ABOS — assombrir l'image (texte intact) */
.page-abos .hero-abo{
/* on remplace l'image seule par : gradients + image */
background-image:
radial-gradient(110% 85% at 50% 40%,
rgba(0,0,0,.10) 0%,
rgba(0,0,0,.72) 62%,
rgba(0,0,0,.92) 100%),
linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.48) 75%),
url('assets/banner_ea.jpg') !important; /* même URL que ton inline */
background-position: center 40% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/* on laisse l’overlay désactivé pour éviter toute surcouche sur le texte */
.page-abos .hero-abo .hero-overlay{ display:none !important; }
/* === ABOS — assombrir l'image sans toucher au texte === */
/* 0) .hero-media ne doit pas masquer le fond */
.page-abos .hero-abo .hero-media{
background-color: transparent !important; /* vire le #0f1116 opaque */
}
/* 1) Calque d’assombrissement AU-DESSUS de l’image, SOUS le contenu */
.page-abos .hero.hero-abo::after{
content:"" !important; /* reprend la main si annulé ailleurs */
position:absolute; inset:0; z-index:1; pointer-events:none;
/* vignette + voile sombre, fusionné à l’image seulement */
background:
radial-gradient(110% 85% at 50% 40%,
rgba(0,0,0,.08) 0%,
rgba(0,0,0,.70) 62%,
rgba(0,0,0,.86) 100%),
linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.46) 78%);
mix-blend-mode: multiply;
}
/* 2) Le contenu reste tout en haut */
.page-abos .hero-abo .hero-inner{ position:relative; z-index:3; }
/* 3) (optionnel) petit coup de brightness sur l’image uniquement */
.page-abos .hero-abo .hero-media{
filter: brightness(1) contrast(1.06) saturate(.96) !important;
}
/* === HERO ABOS — boutons lisibles & punchy === */
.page-abos .hero-abo .actions-row{
display:flex; gap:.55rem; flex-wrap:wrap; justify-content:center;
}
.page-abos .hero-abo .actions-row .btn{
border-radius:14px;
padding:12px 16px;
font-weight:900; letter-spacing:.02em;
text-shadow:0 1px 1px rgba(0,0,0,.55);
box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05) inset;
}
/* Primaire (rouge) — plus net */
.page-abos .hero-abo .actions-row .btn--primary{
color:#fff;
background:linear-gradient(180deg,#ff6b5f,#c0392b);
border:1px solid rgba(255,255,255,.10);
}
.page-abos .hero-abo .actions-row .btn--primary:hover{
transform:translateY(-2px);
filter:saturate(1.12) brightness(1.06);
box-shadow:0 16px 40px rgba(192,57,43,.46), 0 0 0 1px rgba(255,255,255,.07) inset;
}
/* Secondaire (sombre) — contraste + effet “verre” léger */
.page-abos .hero-abo .actions-row .btn--soft{
color:#fff; /* <- vrai blanc pour la lisibilité */
background:linear-gradient(180deg,#27303b,#1c222b);
border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(2px) brightness(1.05);
}
.page-abos .hero-abo .actions-row .btn--soft:hover{
transform:translateY(-2px);
filter:saturate(1.06) brightness(1.04);
box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
}
/* Focus clavier accessible (anneau visible) */
.page-abos .hero-abo .actions-row .btn:focus-visible{
outline:none;
box-shadow:
0 0 0 3px color-mix(in srgb,#ffffff 60%, transparent),
0 0 0 6px color-mix(in srgb,#c0392b 35%, transparent);
}
/* Empiler joliment sur mobile */
@media (max-width:480px){
.page-abos .hero-abo .actions-row .btn{ flex:1 1 100% }
}
/* === HERO ABOS — hover qui claque === */
.page-abos .hero-abo .actions-row .btn--primary{
/* teintes normales + teintes hover (plus vives) */
--p1:#ff6b5f; --p2:#c0392b;
--p1h:#ff8f82; --p2h:#ff5140;
background-image: linear-gradient(90deg,var(--p1),var(--p2));
background-size: 200% 100%;
transition: background-position .35s cubic-bezier(.2,.8,.2,1),
background-image .2s ease,
box-shadow .2s ease, transform .18s ease, filter .18s ease;
}
.page-abos .hero-abo .actions-row .btn--primary:hover{
background-image: linear-gradient(90deg,var(--p1h),var(--p2h));
background-position: 100% 0;
box-shadow:
0 20px 60px rgba(255,81,64,.48),
0 0 0 1px rgba(255,255,255,.08) inset;
transform: translateY(-3px) scale(1.02);
filter: saturate(1.15) brightness(1.05);
}
.page-abos .hero-abo .actions-row .btn--primary:active{
transform: translateY(0) scale(.99);
filter: brightness(.96);
}
/* bouton sombre : passe à un gris/bleu plus clair + liseré accent */
.page-abos .hero-abo .actions-row .btn--soft{
--s1:#27303b; --s2:#1c222b;
--s1h:#3b4a5c; --s2h:#242c38;
color:#fff;
background-image: linear-gradient(90deg,var(--s1),var(--s2));
background-size: 200% 100%;
border:1px solid rgba(255,255,255,.14);
transition: background-position .35s cubic-bezier(.2,.8,.2,1),
background-image .2s ease,
border-color .2s ease,
box-shadow .2s ease, transform .18s ease, filter .18s ease;
}
.page-abos .hero-abo .actions-row .btn--soft:hover{
background-image: linear-gradient(90deg,var(--s1h),var(--s2h));
background-position: 100% 0;
border-color: color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,.14));
box-shadow:
0 18px 48px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.10) inset,
0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
transform: translateY(-3px) scale(1.02);
filter: saturate(1.08) brightness(1.04);
}
.page-abos .hero-abo .actions-row .btn--soft:active{
transform: translateY(0) scale(.99);
}
/* booste le “shine” diagonal déjà en place */
.page-abos .hero-abo .actions-row .btn:hover::after{ opacity:.8 }
/* respect des préférences d’accessibilité */
@media (prefers-reduced-motion: reduce){
.page-abos .hero-abo .actions-row .btn--primary,
.page-abos .hero-abo .actions-row .btn--soft{
transition: box-shadow .2s ease, transform .18s ease, filter .18s ease;
background-size: 100% 100%;
}
}
/* === ABOS — Intro courte : ruban “glass” + accent === */
.page-abos section.section > p.lead{
position:relative;
display:inline-block;
max-width:min(980px,96vw);
margin:16px auto 28px;
padding:12px 16px 12px 28px; /* place pour l’accent gauche */
text-align:center;
color:#eae7de;
background:linear-gradient(180deg, rgba(28,32,40,.55), rgba(22,24,30,.38));
border:1px solid #2b3140;
border-radius:12px;
box-shadow:0 12px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
backdrop-filter:blur(3px);
}
/* barre d’accent à gauche (dégradé rouge) */
.page-abos section.section > p.lead::before{
content:"";
position:absolute; left:12px; top:50%; transform:translateY(-50%);
width:6px; height:60%;
border-radius:6px;
background:linear-gradient(180deg,#ff6b5f,#c0392b);
box-shadow:0 0 12px rgba(192,57,43,.35);
}
/* met en valeur la partie en
*/
.page-abos section.section > p.lead strong{
display:inline-block;
font-weight:900;
background:linear-gradient(180deg,#ffffff,#e9e4ff);
-webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow:0 2px 10px rgba(0,0,0,.35);
position:relative;
}
.page-abos section.section > p.lead strong::after{
content:"";
position:absolute; left:.1em; right:.1em; bottom:-.18em;
height:3px; border-radius:999px;
background:linear-gradient(90deg,#ff6b5f,#c0392b);
opacity:.9;
}
/* ABOS — Intro en “stamp” (mêmes effets que l’accueil) */
#abo-intro{ text-align:center; padding: 10px 1rem 24px; }
/* resserre le “pavé” pour éviter l’effet gros panneau */
#abo-intro .parax-tagline{
display:inline-block; /* wrap au plus proche du texte */
font-size: clamp(2.2rem, 6.8vw, 4.8rem);
margin: 0;
}
/* booster un peu le rendu (verre + ombre) pour fond sombre */
#abo-intro .parax-tagline{
background: linear-gradient(180deg, rgba(22,24,28,.55), rgba(22,24,28,.30));
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 52px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
}
/* déclencheur d’anim, identique à .parallax-2.in-view */
.stamp-intro.in-view .parax-tagline.is-stamp{
animation: stampIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.stamp-intro.in-view .parax-tagline.is-stamp::after{
animation: underlineIn .9s ease-out .45s forwards;
}
/* note sous le titre */
#abo-intro .intro-note{
margin:.65rem 0 0;
color: var(--muted);
text-align:center;
}
#abo-intro .intro-note strong{ color:#fff; }
/* ==== A) RELIEF + NETTETÉ (scope abo) ==== */
#abo-intro .parax-tagline{
position:relative; isolation:isolate;
letter-spacing:.03em;
/* relief + lisibilité forte sur fond sombre */
-webkit-text-stroke:.7px rgba(0,0,0,.55);
text-shadow:
0 2px 0 rgba(0,0,0,.90),
0 14px 36px rgba(0,0,0,.55),
0 0 18px rgba(255,255,255,.06);
transition: transform .18s ease, text-shadow .18s ease, filter .18s ease;
}
#abo-intro .parax-tagline:hover{
transform: translateY(-1px) scale(1.005);
filter: brightness(1.02);
}
/* petit “ring” intérieur du pill pour un rendu plus premium */
#abo-intro .parax-tagline::before{
content:""; position:absolute; inset:2px; border-radius:.8rem; pointer-events:none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05);
}
/* ==== B) SOULIGNEMENT qui “respire” après le draw ==== */
/* (réutilise déjà ton underlineIn ; on ajoute un glow bref) */
@keyframes underlineGlow{
0%{ box-shadow:0 0 0 rgba(192,57,43,0) }
40%{ box-shadow:0 0 18px rgba(192,57,43,.45) }
100%{ box-shadow:0 0 0 rgba(192,57,43,0) }
}
.stamp-intro.in-view .parax-tagline.is-stamp::after{
/* ta largeur animée vient d’underlineIn ; on chaîne un glow */
animation: underlineIn .9s ease-out .45s forwards, underlineGlow .9s ease .95s 1;
background: linear-gradient(90deg,#ff6b5f,#c0392b);
height:4px; border-radius:999px;
}
/* ==== C) SHINE sur la police (optionnel) ==== */
/* Nécessite data-text sur le H2 (voir HTML ci-dessous) */
#abo-intro .parax-tagline[data-text]::after{
content: attr(data-text);
position:absolute; inset:0; z-index:2; pointer-events:none;
background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.75) 50%, transparent 58%);
background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
mix-blend-mode: screen;
animation: stampShine 1.2s .65s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes stampShine{
from{ background-position: -120% 0 }
to { background-position: 120% 0 }
}
/* === PLANS : stop au stretch + grille centrée (page-abos) === */
.page-abos #abo .grid{
grid-template-columns: repeat(auto-fit, minmax(320px, 380px)); /* cap max ~380px */
justify-content: center; /* centre la grille si de l’espace autour */
align-items: stretch;
gap: 18px;
max-width: 1240px; /* largeur totale confortable pour 3 cartes */
margin-inline: auto;
}
/* Chaque carte garde la même hauteur visuelle, sans s’étaler */
.page-abos #abo .card{
width: 100%;
max-width: 420px; /* sécurité si la carte sort de la grille */
height: 100%;
padding: 18px 18px 16px;
}
/* Titre + prix resserrés, stop “grands blancs” */
.page-abos .abo-head{
align-items: baseline;
gap: 10px;
margin-bottom: 6px;
}
.page-abos .price{ font-size: 26px; } /* -2px vs avant */
.page-abos .features{ margin: 8px 0 12px 18px; }
.page-abos .features li{ margin: 6px 0; }
.page-abos #abo .card ul{ max-width: 58ch; } /* largeur de ligne lisible */
/* Boutons : légère mise en avant quand beaucoup d’espace */
.page-abos #abo .card .cta-row .btn{ min-width: 150px; }
/* XXL : si l’écran est très large, autorise 400px par colonne */
@media (min-width: 1500px){
.page-abos #abo .grid{
grid-template-columns: repeat(auto-fit, minmax(340px, 400px));
}
}
/* XS : quand on repasse en 1 colonne, on garde une carte compacte */
@media (max-width: 420px){
.page-abos #abo .grid{ grid-template-columns: 1fr; }
.page-abos #abo .card{ max-width: 100%; }
}
.page-abos #abo .card:hover{
box-shadow: 0 18px 46px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset;
border-color:#2c3244;
transform: translateY(-3px);
}
/* === ABOS — vignette plan dans l’en-tête ========================= */
.page-abos .abo-head{
display:flex; align-items:center; gap:12px; /* laisse de la place à la vignette */
}
/* La vignette (petit visuel carré arrondi) */
.page-abos .plan-thumb{
flex:0 0 auto;
width:46px; height:46px; border-radius:10px;
background: #111 center/cover no-repeat;
border:1px solid rgba(255,255,255,.08);
box-shadow:
0 8px 22px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.20);
position:relative; isolation:isolate; transform: translateZ(0);
}
/* Petit reflet et vignette douce pour donner du relief */
.page-abos .plan-thumb::before{
content:""; position:absolute; inset:0; border-radius:inherit;
background:
radial-gradient(120% 120% at 50% 100%, rgba(0,0,0,.25), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%);
mix-blend-mode: soft-light; opacity:.55; pointer-events:none;
}
/* Anneau discret (accent) visible au hover de la carte */
.page-abos #abo .card:hover .plan-thumb{
transform: translateY(-2px) scale(1.02);
box-shadow:
0 12px 28px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.06) inset;
}
.page-abos #abo .card:hover .plan-thumb::after{
content:""; position:absolute; inset:-2px; border-radius:inherit;
background: radial-gradient(130% 180% at 50% 120%,
rgba(255,255,255,.14) 0 30%, rgba(255,255,255,0) 60%);
opacity:.35; pointer-events:none;
}
/* Mapping des images par type de plan (tu peux changer les URLs) */
.page-abos #abo .card[data-plan="nomade"] .plan-thumb{
background-image:url('assets/abos/nomade.jpg');
}
.page-abos #abo .card[data-plan="visionnaire"] .plan-thumb{
background-image:url('assets/abos/visionnaire.jpg');
}
.page-abos #abo .card[data-plan="federateur"] .plan-thumb{
background-image:url('assets/abos/federateur.jpg');
}
/* Option : “plan recommandé” (fédérateur) — léger glow constant */
.page-abos #abo .card[data-plan="federateur"] .plan-thumb{
box-shadow:
0 10px 26px rgba(192,57,43,.25),
0 0 0 1px rgba(255,255,255,.07) inset;
}
/* === Art décoratif à droite des cartes (page-abos) === */
.page-abos .abo-card{ position:relative; }
/* Laisse de la place au visuel à droite (desktop) */
@media (min-width:980px){
.page-abos .abo-card{
padding-right: clamp(180px, 32%, 320px);
}
}
/* Bloc décoratif à droite */
.page-abos .abo-card .plan-art{
position:absolute; z-index:0; pointer-events:none;
right: clamp(12px, 2vw, 20px);
top: clamp(52px, 6vw, 70px); /* sous le prix */
bottom: clamp(60px, 8vw, 90px); /* au-dessus des CTA */
width: min(36%, 340px);
background: var(--plan-art) center/contain no-repeat;
opacity:.22;
filter: drop-shadow(0 18px 40px rgba(0,0,0,.42));
transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.page-abos .abo-card:hover .plan-art{
transform: translateY(-2px) scale(1.02);
opacity:.28;
}
/* Mobile : pas de visuel pour éviter la compression */
@media (max-width:980px){
.page-abos .abo-card .plan-art{ display:none }
}
/* Mappage des illustrations par plan */
.abo-card[data-plan="nomade"] { --plan-art: url('abo_nomade.svg'); }
.abo-card[data-plan="visionnaire"] { --plan-art: url('abo_visionnaire.svg'); }
.abo-card[data-plan="federateur"] { --plan-art: url('abo_federateur.svg'); }
/* Vignettes carrées en haut à gauche */
.page-abos .plan-thumb{
width:36px; height:36px; border-radius:8px;
background:center/cover no-repeat;
box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}
.abo-card[data-plan="nomade"] .plan-thumb{ background-image:url('abo_thumb_nomade.svg'); }
.abo-card[data-plan="visionnaire"] .plan-thumb{ background-image:url('abo_thumb_visionnaire.svg'); }
.abo-card[data-plan="federateur"] .plan-thumb{ background-image:url('abo_thumb_federateur.svg'); }
/* Entête des cartes = grille : [vignette][titre][prix] */
.page-abos .abo-head{
display: grid;
grid-template-columns: 44px 1fr auto; /* 36px de thumb + 8px de marge */
align-items: center;
column-gap: .8rem;
padding: 6px 8px 2px; /* petit breathing */
}
/* Vignette calée à gauche de l’entête */
.page-abos .abo-head .plan-thumb{
width:36px; height:36px; border-radius:8px;
grid-column: 1;
justify-self: start;
}
/* Titre et prix décalés à droite de la vignette */
.page-abos .abo-head h3{
grid-column: 2;
margin: 0;
transform: translateY(1px); /* micro-align baseline, optionnel */
}
.page-abos .abo-head .price{
grid-column: 3;
margin: 0;
padding-left: .8rem; /* un peu d’air avant le bord droit */
}
/* Mobile : réduis un peu l’empreinte de la vignette */
@media (max-width:640px){
.page-abos .abo-head{
grid-template-columns: 38px 1fr auto;
column-gap: .6rem;
}
.page-abos .abo-head .plan-thumb{ width:32px; height:32px; }
}
/* header = grille vignette / titre / prix */
.page-abos .abo-head{
display:grid;
grid-template-columns: 48px 1fr auto;
align-items:center;
column-gap:.9rem;
padding:10px 14px 6px;
}
/* prix : plus gros + bien calé à droite */
.page-abos .abo-card > .abo-head .price{
position:static !important; /* au cas où un vieux absolute traîne */
justify-self:end; /* colle à droite */
align-self:start; /* léger effet “coin haut droit” */
display:flex; align-items:baseline; gap:.35rem;
font-weight:900;
font-size: clamp(1.2rem, 2.1vw, 1.7rem); /* un peu plus grand */
letter-spacing:.01em; line-height:1;
padding:.35rem .6rem;
border-radius:.7rem;
color:#fff;
background:linear-gradient(180deg,#1f2430,#171b24);
border:1px solid #2b3140;
box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}
/* détail “/ mois” plus discret, bien aligné */
.page-abos .abo-card > .abo-head .price small{
font-size:.72rem;
font-weight:700;
color:#a7abb2;
transform: translateY(2px);
}
/* si tu veux un décalage encore plus marqué, élargis la 1re colonne */
@media (min-width:900px){
.page-abos .abo-head{ grid-template-columns: 52px 1fr auto; }
}
/* mobile : un peu moins imposant */
@media (max-width:640px){
.page-abos .abo-head{ grid-template-columns: 40px 1fr auto; column-gap:.6rem; }
.page-abos .abo-card > .abo-head .price{
font-size: clamp(1.1rem, 4vw, 1.45rem);
padding:.28rem .5rem;
}
}
/* le card devient le référentiel */
.page-abos .abo-card{
position: relative;
}
/* header: 2 colonnes (vignette + titre) — on libère la place du prix */
.page-abos .abo-head{
display: grid;
grid-template-columns: 52px 1fr;
align-items: center;
column-gap: .9rem;
padding: 10px 14px 6px;
/* on réserve un peu de place à droite pour éviter que le titre passe sous le prix */
padding-right: 96px;
}
/* Titre plan — plus grand et plus “display” */
.page-abos .abo-head h3{
font-family: var(--ff-display, "Bebas Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
letter-spacing: .02em;
color: #fff;
margin: 0;
text-shadow: 0 2px 0 rgba(0,0,0,.70);
}
/* Prix : badge fixé dans l’angle haut droit du bloc */
.page-abos .abo-card > .abo-head .price{
position: absolute !important;
top: 14px;
right: clamp(14px, 1.6vw, 22px);
z-index: 3;
display: inline-flex;
align-items: baseline;
gap: .35rem;
font-weight: 900;
font-size: clamp(1.3rem, 2.1vw, 1.9rem);
line-height: 1;
color: #fff;
padding: .35rem .6rem;
border-radius: .7rem;
background: linear-gradient(180deg,#1f2430,#171b24);
border: 1px solid #2b3140;
box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}
/* “/ mois” discret et bien aligné */
.page-abos .abo-card > .abo-head .price small{
font-size: .72rem;
font-weight: 700;
color: #a7abb2;
transform: translateY(2px);
}
/* Mobile : léger ajustement */
@media (max-width: 640px){
.page-abos .abo-head{
grid-template-columns: 44px 1fr;
padding-right: 84px;
}
.page-abos .abo-card > .abo-head .price{
top: 12px;
right: 12px;
font-size: clamp(1.2rem, 4vw, 1.6rem);
padding: .3rem .5rem;
}
}
/* ============ COMPARATIF — polish compact ============ */
.section.abos-compare{
/* on le traite comme une carte centrée */
max-width: min(1180px, 100% - 2rem);
margin-inline: auto;
padding: 0;
background:#13161d;
border:1px solid #252a36;
border-radius:16px;
box-shadow: 0 12px 36px rgba(0,0,0,.45);
overflow:hidden;
}
/* header sobre + bouton à droite */
.abos-compare .cmp-head{
display:flex; align-items:center; justify-content:space-between;
gap:.8rem; padding:12px 14px;
background:linear-gradient(180deg,#171a20,#14171c);
border-bottom:1px solid #252a36;
}
.abos-compare .cmp-head h2{
margin:0; font-size:18px; color:#fff; letter-spacing:.02em;
text-transform:uppercase; text-shadow:0 2px 0 rgba(0,0,0,.6);
}
/* tableau compact et stable */
.abos-compare .table-wrap{ overflow-x:auto; }
.abos-compare .table{
width:100%;
table-layout:fixed;
border-collapse:separate; border-spacing:0;
font-size:14px;
}
/* colonnes : 1ère plus large, les 3 autres égales */
.abos-compare thead th:first-child,
.abos-compare tbody td:first-child{
width:38%;
text-align:left;
padding-left:16px;
}
.abos-compare thead th:not(:first-child),
.abos-compare tbody td:not(:first-child){
width:calc((100% - 38%) / 3);
text-align:center;
}
/* sticky header + sticky première colonne (utile si ça scrolle en petit écran) */
.abos-compare thead th{
position:sticky; top:0; z-index:2;
background:#161a20; color:#aeb4bd; font-weight:700;
}
.abos-compare th, .abos-compare td{
padding:12px 10px;
border-top:1px solid #222735;
}
.abos-compare tbody tr:nth-child(odd){ background:#10141b; }
.abos-compare tbody tr:hover{
background:linear-gradient(90deg,#141a22,#141a22) !important;
}
/* “pills” lisibles pour les valeurs */
.abos-compare .yes,
.abos-compare .no,
.abos-compare .emph,
.abos-compare .hot{
display:inline-flex; align-items:center; justify-content:center;
min-width:52px;
padding:.22rem .5rem; border-radius:.55rem;
font-weight:800; letter-spacing:.01em;
}
/* Oui / Non / Prix / Bonus */
.abos-compare .yes{
color:#2ecc71;
background:rgba(46,204,113,.10);
border:1px solid rgba(46,204,113,.25);
}
.abos-compare .no{
color:#9aa0a6; background:rgba(154,160,166,.08);
border:1px solid rgba(154,160,166,.18);
}
.abos-compare .emph{
color:#fff; background:linear-gradient(180deg,#1f2430,#171b24);
border:1px solid #2b3140; box-shadow:0 6px 12px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.03);
}
.abos-compare .hot{
color:#fff; background:linear-gradient(180deg,#ff6b5f,#c0392b);
border:1px solid rgba(255,255,255,.08); box-shadow:0 6px 14px rgba(192,57,43,.35);
}
/* colonne mise en avant (via classe .highlight) */
.abos-compare .col.highlight{
background: linear-gradient(180deg,#1a1f2b,#151a22);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
/* première colonne sticky a besoin d’un fond solide */
.abos-compare tbody td:first-child{
position:sticky; left:0; z-index:1;
background:inherit;
}
/* note finale */
.abos-compare .note{
margin:10px 12px 14px;
color:#a7abb2; font-size:13px;
}
/* responsive : un peu plus d’air et tailles adaptées */
@media (max-width: 900px){
.abos-compare thead th:first-child,
.abos-compare tbody td:first-child{ width:44%; }
}
@media (max-width: 640px){
.abos-compare .cmp-head{ padding:10px 12px; }
.abos-compare th, .abos-compare td{ padding:10px 8px; }
}
/* ===== CENTRAGE + TYPO + TAILLES (Comparatif) ===== */
.section.abos-compare .table { font-size:15px; }
.section.abos-compare th,
.section.abos-compare td {
vertical-align: middle;
}
/* 1) colonnes : 1ère à gauche, le reste CENTRÉ strict */
.section.abos-compare thead th:first-child,
.section.abos-compare tbody td:first-child{
width:42%;
text-align:left;
padding-left:16px;
}
.section.abos-compare thead th.col,
.section.abos-compare tbody td.col{
width:calc((100% - 42%) / 3);
text-align:center;
}
/* 2) centrage “géométrique” du contenu d’en-tête (ignore padding) */
.section.abos-compare thead th.col{
display:flex; align-items:center; justify-content:center; gap:.45rem;
white-space:nowrap;
}
/* 3) style des intitulés d’abos (header) */
.section.abos-compare thead th.col{
font-family: var(--ff-display, "Bebas Neue", system-ui, sans-serif);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .03em;
font-size: clamp(15px, 1.5vw, 20px);
color:#e9eaec;
}
/* 4) pills : taille/rythme homogènes */
.section.abos-compare .yes,
.section.abos-compare .no,
.section.abos-compare .emph,
.section.abos-compare .hot{
min-width: 58px;
padding: .28rem .6rem;
border-radius: .6rem;
font-weight: 800;
letter-spacing: .01em;
font-size: .98rem;
}
/* ligne Prix plus lisible */
.section.abos-compare tbody tr:first-child .emph{
min-width: 64px;
font-size: 1.05rem;
padding: .32rem .68rem;
}
/* les tirets un peu plus présents mais discrets */
.section.abos-compare .no{ opacity:.9 }
/* 5) resserrer légèrement la hauteur de ligne pour éviter l’effet “étiré” */
.section.abos-compare th,
.section.abos-compare td{
padding: 11px 10px; /* avant: 12px */
}
/* 6) responsive : quand l’écran est étroit on donne plus de place à la 1ère col */
@media (max-width: 900px){
.section.abos-compare thead th:first-child,
.section.abos-compare tbody td:first-child{ width:48%; }
.section.abos-compare thead th.col,
.section.abos-compare tbody td.col{ width:calc((100% - 48%) / 3); }
}
@media (max-width: 640px){
.section.abos-compare .table{ font-size:14px; }
.section.abos-compare .yes,
.section.abos-compare .no,
.section.abos-compare .emph{ font-size:.95rem; }
}
/* === HOTFIX noms d'abonnements (header) === */
.section.abos-compare thead th.col{
/* on redevient une vraie cellule de tableau */
display: table-cell !important;
text-align: center;
vertical-align: middle;
white-space: nowrap;
padding: 14px 10px; /* hauteur propre, pas étirée */
/* neutralise l'ancien gap de la version flex */
gap: 0;
}
/* typo header (on garde Bebas) */
.section.abos-compare thead th.col{
font-family: var(--ff-display, "Bebas Neue", system-ui, sans-serif);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .03em;
font-size: clamp(15px, 1.5vw, 20px);
color:#e9eaec;
}
/* rythme global de la table un poil resserré */
.section.abos-compare th,
.section.abos-compare td{
line-height: 1.25;
padding-top: 11px;
padding-bottom: 11px;
}
/* première colonne (libellés) reste alignée à gauche */
.section.abos-compare thead th:first-child,
.section.abos-compare tbody td:first-child{
text-align: left;
padding-left: 16px;
}
/* BASE — mettez cette règle à la place de votre .hot actuelle */
.section.abos-compare :where(.hot){
--bg1:#ff6b5f; --bg2:#c0392b; /* valeurs par défaut (rouge) */
--txt:#fff; --ring:rgba(255,255,255,.10);
--glow:rgba(192,57,43,.40);
display:inline-block; padding:8px 14px; border-radius:12px;
color:var(--txt); font-weight:900; letter-spacing:.02em; line-height:1;
background:linear-gradient(180deg,var(--bg1),var(--bg2));
border:1px solid var(--ring);
box-shadow:0 12px 26px var(--glow), 0 0 0 1px rgba(255,255,255,.04) inset;
transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.section.abos-compare .hot:hover{
transform:translateY(-1px);
filter:saturate(1.08) brightness(1.04);
box-shadow:0 16px 36px var(--glow), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.section.abos-compare .hot:active{ transform:translateY(0) scale(.99); }
/* VARIANTES — hot hot--green / hot--amber / hot--red */
.section.abos-compare .hot--green{
--bg1:#33dc7f; --bg2:#1fa260; --txt:#fff; --ring:rgba(255,255,255,.10);
--glow:rgba(46,204,113,.40);
}
.section.abos-compare .hot--amber{
--bg1:#ffe063; --bg2:#e7bd1b; --txt:#111; --ring:rgba(255,255,255,.14);
--glow:rgba(246,201,14,.45);
text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.section.abos-compare .hot--red{
--bg1:#ff6b5f; --bg2:#c0392b; --txt:#fff; --ring:rgba(255,255,255,.10);
--glow:rgba(192,57,43,.45);
}
/* --- Compare : polaroids collés aux bords du tableau --- */
.compare-band{
position: relative;
overflow: visible;
/* largeur max “visuelle” du contenu de .section (à adapter si besoin) */
--content-max: min(1180px, 100% - 64px);
/* écart entre le polaroid et le bloc (diminue pour rapprocher) */
--polaroid-gap: 200px;
}
.compare-band .abos-compare{ position: relative; z-index: 5; }
.compare-band .cmp-polaroid{
position:absolute; top:50%; z-index:1; pointer-events:none;
width: clamp(220px, 22vw, 440px);
aspect-ratio: 16/10;
border-radius:14px;
background:#0f1216;
box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
overflow:hidden; isolation:isolate;
}
.compare-band .cmp-polaroid::before{
content:""; position:absolute; inset:0;
background: var(--photo) center/cover no-repeat;
transform:scale(1.06);
opacity:.95; box-shadow: inset 0 0 0 100vmax rgba(0,0,0,.14);
}
.compare-band .cmp-polaroid::after{
content:""; position:absolute; left:50%; top:12px;
width:100px; height:22px; transform:translateX(-50%) rotate(-10deg);
border-radius:4px;
background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.25));
mix-blend-mode:screen; opacity:.55; box-shadow:0 8px 18px rgba(0,0,0,.45);
}
/* Positionnement par rapport aux BORDS du contenu */
.compare-band .cmp-polaroid.left{
left: calc(55% - var(--content-max)/2 - var(--polaroid-gap));
transform: translate(-100%, -50%) rotate(-20deg);
}
.compare-band .cmp-polaroid.right{
right: calc(52% - var(--content-max)/2 - var(--polaroid-gap));
transform: translate(100%, -50%) rotate(7deg);
}
@media (max-width:1100px){
.compare-band .cmp-polaroid{ display:none; }
}
/* coupe le débordement horizontal sans casser le scroll vertical */
html, body{
width: 100%;
overflow-x: clip; /* moderne */
}
@supports not (overflow-x: clip){
html, body{ overflow-x: hidden; } /* fallback Safari/anciens Firefox */
}
/* évite le "pan" horizontal sur mobile (rebond latéral) */
body{ overscroll-behavior-x: none; touch-action: pan-y; }
/* ===== Infos importantes (scopé) ===== */
.legal-info{
position:relative;
margin-top:26px;
padding: clamp(16px, 2vw, 22px);
border:1px solid #2b3140;
border-radius:16px;
background: radial-gradient(120% 140% at 0% 0%, #161a22 0%, #11141a 60%);
box-shadow: 0 14px 46px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
color:#cfd3da;
overflow:hidden;
/* apparition au viewport */
opacity:0; transform: translateY(12px) scale(.985);
transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.legal-info.in-view{ opacity:1; transform:none; }
.legal-title{
margin:0 0 .6rem; color:#fff;
font-family:"Bebas Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
font-size: clamp(1.4rem, 3.2vw, 1.9rem);
letter-spacing:.02em; display:inline-block; position:relative; padding-left:.2rem;
text-shadow:0 2px 0 rgba(0,0,0,.7);
}
.legal-title::after{
content:""; display:block; height:4px; width:0; margin-top:.35rem;
background:linear-gradient(90deg,#ff6b5f,#c0392b);
border-radius:3px; box-shadow:0 2px 14px rgba(192,57,43,.35);
transition: width .7s cubic-bezier(.2,.8,.2,1) .12s;
}
.legal-info.in-view .legal-title::after{ width:min(300px, 42%); }
.legal-list{
list-style:none; margin:0; padding:0;
display:grid; gap:.6rem;
}
.legal-item{
position:relative;
padding: .75rem .9rem .75rem 2.6rem;
border:1px solid rgba(255,255,255,.06);
border-radius:.8rem;
background: linear-gradient(180deg, rgba(28,32,40,.55), rgba(22,24,30,.38));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
color:#d6d9df;
}
.legal-item strong{ color:#fff; font-weight:800; }
.legal-item a{ color:#c6d3ff; text-decoration:underline; }
.legal-item::before{
content:""; position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
width:10px; height:10px; border-radius:50%;
background: radial-gradient(circle at 30% 30%, #ff766b, #c0392b);
box-shadow:0 0 0 3px rgba(192,57,43,.18);
}
.legal-item::after{
/* mini “surlignage” vertical */
content:""; position:absolute; left:.55rem; top:.6rem; bottom:.6rem; width:3px; border-radius:3px;
background:linear-gradient(180deg,#ff6b5f,#c0392b);
opacity:.55;
}
/* Stagger reveal */
.legal-info .legal-item{ opacity:0; transform:translateY(8px); }
.legal-info.in-view .legal-item{
animation: legalRise .45s cubic-bezier(.2,.8,.2,1) forwards;
}
.legal-info.in-view .legal-item:nth-child(1){ animation-delay:.05s }
.legal-info.in-view .legal-item:nth-child(2){ animation-delay:.12s }
.legal-info.in-view .legal-item:nth-child(3){ animation-delay:.19s }
.legal-info.in-view .legal-item:nth-child(4){ animation-delay:.26s }
@keyframes legalRise{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){
.legal-info,.legal-info .legal-item{ transition:none; animation:none; opacity:1; transform:none; }
}
/* Plus d'espace sous le comparatif + bloc centré, pas pleine largeur */
.abos-compare + .legal-card,
.compare-band + .legal-card{
margin-top: clamp(28px, 5vw, 60px);
}
.legal-card{
/* largeur contenue sous le comparatif */
max-width: min(1000px, 100% - 2rem);
margin-inline: auto;
/* carte compacte */
padding: clamp(14px, 2.4vw, 20px) clamp(16px, 3vw, 24px);
background: var(--card);
border: 1px solid var(--ring);
border-radius: 14px;
box-shadow: 0 12px 36px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.02);
/* apparition douce */
opacity: 0; transform: translateY(10px);
transition: opacity .45s ease, transform .45s ease;
}
.legal-card.in-view{ opacity:1; transform:none; }
/* Titre harmonisé */
.legal-title{
margin: 0 0 .6rem;
color:#fff;
font-family:"Bebas Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
font-size: clamp(1.4rem, 4.2vw, 2rem);
letter-spacing:.02em; line-height:.95;
text-shadow:0 2px 0 rgba(0,0,0,.7);
position:relative;
}
.legal-title::after{
content:""; display:block; height:3px; margin-top:.35rem;
width:min(260px, 40%); border-radius:3px;
background:linear-gradient(90deg,#ff6b5f,#c0392b);
box-shadow:0 2px 10px rgba(192,57,43,.35);
}
/* Rangées : 1 colonne mobile, 2 colonnes sur desktop (hauteur réduite) */
.legal-rows{
display:grid; gap:.6rem;
}
@media (min-width: 920px){
.legal-rows{ grid-template-columns: 1fr 1fr; }
}
/* Chaque point = petite pill lisible */
.legal-rows p{
margin:0;
padding:.65rem .8rem .65rem .9rem;
border-radius:.7rem;
background:linear-gradient(180deg, rgba(28,32,40,.55), rgba(22,24,30,.38));
border:1px solid rgba(255,255,255,.06);
color: var(--fg);
line-height:1.62;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}
.legal-rows p strong{ color:#fff; font-weight:800 }
.legal-rows a{ color:#dfe3ff; text-decoration:underline dotted; }
/* petite bordure d’accent à gauche */
.legal-rows p{
position:relative;
}
.legal-rows p::before{
content:""; position:absolute; left:-1px; top:10px; bottom:10px; width:4px;
border-radius:6px;
background:linear-gradient(180deg,#ff6b5f,#c0392b);
opacity:.8;
}
/* réduit encore un peu si demandé par l’utilisateur */
@media (max-width: 520px){
.legal-card{ padding: 12px 14px; }
}
/* ===== Animations dans le bloc légal ===== */
/* 1) Soulignement du titre qui se déroule */
.legal-card .legal-title::after{
width: 0; /* fermé au repos */
transition: width .7s cubic-bezier(.2,.8,.2,1);
}
.legal-card.in-view .legal-title::after{
width: min(260px, 40%); /* se déroule à l'entrée */
}
/* 2) Apparition en cascade des points (fade + rise) */
@keyframes rowIn{
from{ opacity:0; transform: translateY(8px); }
to { opacity:1; transform: none; }
}
.legal-card.in-view .legal-rows p{
animation: rowIn .45s var(--ease) both;
}
/* décalage progressif */
.legal-card.in-view .legal-rows p:nth-child(1){ animation-delay:.05s }
.legal-card.in-view .legal-rows p:nth-child(2){ animation-delay:.12s }
.legal-card.in-view .legal-rows p:nth-child(3){ animation-delay:.19s }
.legal-card.in-view .legal-rows p:nth-child(4){ animation-delay:.26s }
/* 3) Barre d’accent qui “pousse” (du haut vers le bas) */
.legal-rows p::before{
transform: scaleY(0);
transform-origin: top;
transition: transform .55s var(--ease) .02s;
}
.legal-card.in-view .legal-rows p::before{
transform: scaleY(1);
}
/* on synchronise le délai avec la cascade */
.legal-card.in-view .legal-rows p:nth-child(1)::before{ transition-delay:.05s }
.legal-card.in-view .legal-rows p:nth-child(2)::before{ transition-delay:.12s }
.legal-card.in-view .legal-rows p:nth-child(3)::before{ transition-delay:.19s }
.legal-card.in-view .legal-rows p:nth-child(4)::before{ transition-delay:.26s }
/* 4) “Shine” très léger au survol d’une ligne (verre) */
.legal-rows p::after{
content:"";
position:absolute; inset:-140% -20%;
background: linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 62%);
transform: translateX(-85%) rotate(12deg);
opacity:0; mix-blend-mode:screen; pointer-events:none;
transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .3s;
border-radius: inherit;
}
@media (hover:hover){
.legal-rows p:hover::after{
transform: translateX(125%) rotate(12deg);
opacity:.55;
}
}
/* Accessibilité : coupe les anims si l'utilisateur réduit le mouvement */
@media (prefers-reduced-motion: reduce){
.legal-card,
.legal-title::after,
.legal-rows p,
.legal-rows p::before,
.legal-rows p::after{
transition: none !important;
animation: none !important;
}
}
/* Clip le shine dans chaque ligne + sécurise le contexte */
.legal-rows p{
position: relative; /* au cas où */
overflow: hidden; /* coupe l'overlay au bord de la ligne */
}
/* Shine plus petit (ne déborde plus) */
.legal-rows p::after{
inset: -20% -10%; /* AVANT: -140% -20% -> beaucoup trop grand */
transform: translateX(-115%) rotate(12deg);
}
@media (hover:hover){
.legal-rows p:hover::after{
transform: translateX(115%) rotate(12deg); /* traverse proprement la ligne */
}
}
/* ===== FAQ rich ===== */
.faq-rich{
max-width: min(1100px, 100% - 2rem);
margin-inline:auto;
scroll-margin-top: 84px;
}
.faq-head{
display:flex; align-items:center; justify-content:space-between; gap:.6rem;
margin-bottom:.6rem;
}
.faq-head h2{
margin:0; color:#e9eaec; text-transform:uppercase; letter-spacing:.02em;
font-family:"Bebas Neue",var(--ff-display, system-ui); font-size:clamp(1.6rem,4.8vw,2rem);
}
.faq-actions{ display:flex; gap:.4rem; flex-wrap:wrap; }
/* Liste */
.faq-list details{
position:relative;
margin:.55rem 0;
border:1px solid var(--ring);
background: radial-gradient(120% 140% at 0% 0%, #171b22 0%, #12161b 60%);
border-radius:12px;
box-shadow: var(--shadow-1);
overflow:hidden;
transition:border-color .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
opacity:0; transform: translateY(10px);
}
.faq-rich.in-view .faq-list details{ animation: faqIn .45s var(--ease) forwards; }
.faq-rich.in-view .faq-list details:nth-child(2){ animation-delay:.04s }
.faq-rich.in-view .faq-list details:nth-child(3){ animation-delay:.08s }
.faq-rich.in-view .faq-list details:nth-child(4){ animation-delay:.12s }
@keyframes faqIn{ to{ opacity:1; transform:none } }
.faq-list details::before{
content:""; position:absolute; left:-1px; top:0; bottom:0; width:4px;
background: linear-gradient(180deg, var(--accent), var(--accent-2));
opacity:.85;
}
/* Summary */
.faq-list summary{
list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6rem;
padding: .9rem 1rem;
font-weight:800; letter-spacing:.02em; color:#e9eaec;
}
.faq-list summary::-webkit-details-marker{ display:none }
.faq-list summary .ico{ filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.faq-list summary::after{
content:"▸"; margin-left:auto; opacity:.9; transform:translateY(.04em);
transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.faq-list details[open] summary::after{ transform: rotate(90deg); opacity:1; }
/* Mentions légales (résumé) */
.legal-notes{
margin-top:1rem;
border:1px solid var(--ring); border-radius:12px;
background: radial-gradient(120% 140% at 0% 0%, #171b22 0%, #12161b 60%);
box-shadow: var(--shadow-1);
padding: .9rem 1rem;
}
.legal-notes h3{
margin:0 0 .3rem; color:#fff; font-family:"Bebas Neue",var(--ff-display, system-ui);
letter-spacing:.02em; font-size:clamp(1.2rem,3.5vw,1.35rem);
}
.legal-notes .note{ color:var(--muted); font-size:.95rem; margin:.35rem 0 0; }
/* Hover/focus states */
.faq-list details:hover{ border-color: color-mix(in srgb, var(--accent) 30%, var(--ring)); box-shadow: var(--shadow-2); }
.faq-list summary:focus-visible{ outline:none; box-shadow: 0 0 0 3px color-mix(in srgb, #fff 60%, transparent); }
/* Respect préférences */
@media (prefers-reduced-motion:reduce){
.faq-list details{ transition:none; animation:none; opacity:1; transform:none }
.faq-pane{ transition:none; max-height:none; opacity:1 }
}
/* ===== FAQ : grille 2 colonnes sur desktop ===== */
.faq-rich .faq-list{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .8rem; /* espace horizontal/vertical entre cartes */
}
.faq-rich .faq-list details{
margin: 0; /* on laisse le gap gérer l'espacement */
}
/* (optionnel) un item qui doit prendre toute la largeur */
.faq-rich .faq-list details.span-2{
grid-column: 1 / -1;
}
/* Responsive : 1 colonne sous 900px ~ */
@media (max-width: 900px){
.faq-rich .faq-list{
grid-template-columns: 1fr;
}
}
.faq-list details{ transition: border-color .18s ease, background .18s ease; }
.faq-list summary{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.faq-list summary .chev{ transition: transform .25s ease; }
.faq-list details[open] summary .chev{ transform: rotate(90deg); }
/* FAQ — version unique rejouable */
.faq-pane{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .28s var(--ease);
will-change:grid-template-rows;
}
.faq-pane > *{ overflow:hidden; padding:10px 14px 14px; }
.faq-list details[open] .faq-pane{ grid-template-rows:1fr; }
.faq-list summary{ user-select:none; }
/* assets/site.css */
.audio-toggle{
background: none;
border: 0;
font-size: 1.15rem;
cursor: pointer;
}
body.is-muted .audio-toggle{ opacity: .7 }
/* bouton + icône + texte */
.audio-toggle{ display:inline-flex; align-items:center; gap:.45rem; }
.audio-toggle .label{ font-weight:700 }
/* icône via CSS mask (2 états) */
.audio-toggle{ --ico:url('data:image/svg+xml;utf8,'); }
.audio-toggle .ico{
width:18px;height:18px;background:currentColor;
-webkit-mask: var(--ico) center/contain no-repeat;
mask: var(--ico) center/contain no-repeat;
}
.audio-toggle.is-muted{ --ico:url('data:image/svg+xml;utf8,'); }
/* ===== Header pro + boutons animés ===== */
:root{
--bg:#0b0c0f; --panel:#12141a; --line:#252a36;
--title:#efe9db; --text:#dcd8cc; --muted:#a7abb2;
--accent:#c0392b; --accent-2:#e74c3c;
}
.site-header{
position:sticky; top:0; z-index:1000;
display:flex; align-items:center; gap:16px;
padding:10px 16px;
background:color-mix(in srgb, var(--bg) 85%, transparent);
backdrop-filter: blur(8px);
border-bottom:1px solid var(--line);
transition: box-shadow .25s ease;
}
.site-header.scrolled{ box-shadow:0 8px 24px rgba(0,0,0,.35); }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-title{ color:var(--title); font-weight:800; letter-spacing:.3px; }
.nav{ margin-left:auto; position:relative; display:flex; align-items:center; gap:10px; }
.menu{
list-style:none; margin:0; padding:6px 6px 14px; /* place pour l'underline */
display:flex; align-items:center; gap:6px; position:relative;
border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
border-radius:14px;
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
}
.menu li{ position:relative; }
.menu .nav-link{
display:block; padding:10px 14px; border-radius:12px;
color:var(--text); text-decoration:none; font-weight:600; letter-spacing:.2px;
transition: color .2s ease, transform .2s ease;
outline: none;
}
.menu .nav-link::before{
content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
background:
radial-gradient(120% 120% at 50% -20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.15));
opacity:0; transform:scale(.96);
transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.menu .nav-link:hover,
.menu .nav-link:focus-visible{ color:var(--title); transform:translateY(-1px); }
.menu .nav-link:hover::before,
.menu .nav-link:focus-visible::before{ opacity:1; transform:scale(1); box-shadow:0 6px 18px rgba(0,0,0,.25) inset; }
.menu .nav-link.is-active{ color:var(--title); }
.menu .nav-link.is-active::before{ opacity:1; transform:scale(1); }
/* underline “ink” glissant (créé en JS) */
.menu .ink{
position:absolute; left:0; bottom:6px; height:2px; width:0; opacity:0;
background:linear-gradient(90deg, var(--accent), var(--accent-2));
border-radius:2px; box-shadow:0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
transition: transform .25s ease, width .25s ease, opacity .2s;
}
/* CTA Discord */
.menu .cta{
display:inline-block; padding:10px 14px; border-radius:12px;
text-decoration:none; font-weight:700; letter-spacing:.2px;
color:var(--title);
background: linear-gradient(180deg, #2d2d2d, #171717);
border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
transition: transform .2s ease, box-shadow .2s ease;
}
.menu .cta:hover{ transform:translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
/* Bouton burger */
.nav-toggle{
display:none; width:42px; height:38px; border-radius:12px; margin-right:6px;
border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.15));
color:var(--title); cursor:pointer;
}
/* Audio toggle — style (pas de logique JS modifiée) */
.audio-toggle{
margin-left:8px; padding:8px 12px; border-radius:12px;
border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.15));
color:var(--text); display:flex; align-items:center; gap:8px;
}
.audio-toggle .ico{ width:12px; height:12px; border-radius:50%;
box-shadow:0 0 0 2px rgba(0,0,0,.3) inset;
background: radial-gradient(circle at 50% 40%, var(--accent-2), var(--accent));
opacity:.7;
}
.audio-toggle.is-muted .ico{ background: radial-gradient(circle at 50% 40%, #666, #333); opacity:.6; }
/* Responsive */
@media (max-width: 900px){
.nav-toggle{ display:block; }
.menu{
position:absolute; right:0; top:calc(100% + 8px);
display:grid; gap:4px; padding:10px; width:min(92vw, 320px);
transform-origin: top right; transform: scaleY(0);
opacity:0; pointer-events:none;
}
.nav[aria-expanded="true"] .menu{
transform: scaleY(1); opacity:1; pointer-events:auto;
}
.menu .ink{ display:none; }
}
/* === CENTRER LE MENU ENTRE LE LOGO ET LE BOUTON AUDIO === */
.site-header{
display:flex; align-items:center; gap:16px;
}
.brand{ flex:0 0 auto; }
.nav{
flex:1 1 auto; /* prend l’espace central */
display:flex; justify-content:center; /* centre la pastille */
align-items:center; gap:10px;
position:relative;
margin:0; /* annule un éventuel margin-left:auto */
}
.audio-toggle{ flex:0 0 auto; margin-left:8px; }
/* === VARIANTE NÉON ROUGE (couleurs et glow) === */
:root{
--accent:#ff3b30; /* rouge néon */
--accent-2:#ff6b57; /* rouge orangé */
}
/* pastille du menu (verre + liseré rouge très léger) */
.menu{
list-style:none; margin:0; padding:6px 6px 16px;
display:flex; align-items:center; gap:6px; position:relative;
border-radius:14px;
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
box-shadow:
inset 0 0 0 1px rgba(255,90,90,.08),
0 8px 30px rgba(255,60,60,.06);
}
/* liens + halo néon */
.menu .nav-link{
position:relative; display:block; padding:10px 14px; border-radius:12px;
color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.2px;
transition: color .2s ease, transform .2s ease;
}
.menu .nav-link::before{
content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
background:
radial-gradient(120% 120% at 50% -20%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 65%),
linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22));
opacity:0; transform:scale(.96);
transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.menu .nav-link:hover,
.menu .nav-link:focus-visible{ color:var(--title); transform:translateY(-1px); }
.menu .nav-link:hover::before,
.menu .nav-link:focus-visible::before{
opacity:1; transform:scale(1);
box-shadow: 0 6px 18px rgba(255,80,80,.25) inset;
}
.menu .nav-link.is-active{
color:var(--title);
text-shadow: 0 0 8px rgba(255,80,80,.6), 0 0 18px rgba(255,80,80,.25);
}
.menu .nav-link.is-active::before{ opacity:1; transform:scale(1); }
/* soulignement “ink” façon néon */
.menu .ink{
position:absolute; left:0; bottom:6px; height:3px; width:0; opacity:0;
background:linear-gradient(90deg, #ff3b30, #ff6b57);
border-radius:3px;
filter: drop-shadow(0 0 10px rgba(255,58,46,.65)) drop-shadow(0 0 20px rgba(255,58,46,.35));
transition: transform .25s ease, width .25s ease, opacity .2s;
}
/* bouton Rejoindre en néon rouge */
.menu .cta{
display:inline-block; padding:10px 14px; border-radius:12px; font-weight:800;
text-decoration:none; color:var(--title);
background: linear-gradient(180deg, #ff6b57, #d6312a);
box-shadow:
0 8px 26px rgba(255,60,60,.25),
0 0 0 1px rgba(255,60,60,.15) inset;
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.menu .cta:hover{
transform:translateY(-1px);
box-shadow:
0 12px 34px rgba(255,60,60,.35),
0 0 0 1px rgba(255,60,60,.25) inset;
filter: drop-shadow(0 0 8px rgba(255,60,60,.5));
}
/* responsive (inchangé) */
@media (max-width: 900px){
.menu{
position:absolute; right:0; top:calc(100% + 8px);
display:grid; gap:4px; padding:10px; width:min(92vw,320px);
transform-origin: top right; transform:scaleY(0);
opacity:0; pointer-events:none;
}
.nav[aria-expanded="true"] .menu{
transform:scaleY(1); opacity:1; pointer-events:auto;
}
.menu .ink{ display:none; }
}
/* Bouton Discord : long, blurple + super effet */
.menu .discord-btn{
--blurple-1:#6A75FF; /* dégradé haut */
--blurple-2:#5865F2; /* Discord officiel */
--blurple-3:#4450D8; /* ombre */
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:12px 22px;
min-width:180px; /* >> plus long */
border-radius:14px;
text-transform:uppercase; letter-spacing:.6px; font-weight:800;
color:#fff; text-decoration:none;
background:linear-gradient(180deg, var(--blurple-1), var(--blurple-2));
border:1px solid rgba(88,101,242,.55);
box-shadow:
0 10px 28px rgba(88,101,242,.32),
inset 0 1px 0 rgba(255,255,255,.12);
position:relative; overflow:hidden;
transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
.menu .discord-btn .icon{ line-height:0; }
.menu .discord-btn svg{ display:block; color:#fff; }
/* halo externe + liseré animé */
.menu .discord-btn::before{
content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
box-shadow: 0 0 0 3px rgba(88,101,242,.25), 0 0 30px rgba(88,101,242,.35);
opacity:.0; transition: opacity .25s ease;
}
/* rayon “shimmer” qui traverse le bouton au hover */
.menu .discord-btn::after{
content:""; position:absolute; left:-35%; top:-120%;
width:30%; height:300%; transform:rotate(20deg);
background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%);
filter:blur(2px); opacity:0;
transition: opacity .2s ease, transform .55s ease;
}
.menu .discord-btn:hover{
transform:translateY(-1px);
box-shadow:
0 14px 40px rgba(88,101,242,.45),
inset 0 1px 0 rgba(255,255,255,.18);
filter: drop-shadow(0 0 10px rgba(88,101,242,.45));
}
.menu .discord-btn:hover::before{ opacity:1; }
.menu .discord-btn:hover::after{ opacity:1; transform:translateX(270%) rotate(20deg); }
.menu .discord-btn:active{ transform:translateY(0); }
/* (Optionnel) petite pulsation automatique : ajoute .is-pulsing à l'ancre si tu veux */
@keyframes glowpulse{
0%,100%{ box-shadow:0 10px 28px rgba(88,101,242,.28) }
50%{ box-shadow:0 14px 44px rgba(88,101,242,.45) }
}
.menu .discord-btn.is-pulsing{ animation: glowpulse 2.6s ease-in-out infinite; }
/* ==== RÈGLEMENT — HERO PARALLAXE (scopé, n'impacte rien d'autre) ==== */
.reg-hero{
position:relative; isolation:isolate;
min-height:clamp(42vh,56vh,68vh);
display:grid; place-items:center;
margin: 12px 16px 24px; /* un peu d'air autour du hero */
overflow:hidden; border-radius:14px;
background:#0b0c0f;
}
.reg-hero__media{ position:absolute; inset:0; overflow:hidden; }
.reg-hero__media img{
width:100%; height:100%; object-fit:cover;
transform: translate3d(0,var(--regY,0px),0) scale(1.12);
filter: brightness(.66) contrast(1.05) saturate(1.05);
will-change: transform;
}
.reg-hero::after{ /* dégradé sombre pour lisibilité du titre */
content:""; position:absolute; inset:0; z-index:1;
background:
radial-gradient(110% 70% at 50% 10%, rgba(0,0,0,.2), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.65) 65%, rgba(0,0,0,.82));
}
.reg-hero__inner{ position:relative; z-index:2; text-align:center; padding: 10vh 3vw; }
.reg-hero__title{
margin:0 0 .6rem; line-height:.95;
font-family: var(--font-hero, "Bebas Neue","Anton",system-ui,sans-serif);
font-size: clamp(40px, 7.5vw, 90px);
font-weight:900; letter-spacing:.06em; text-transform:uppercase;
color:#efe9db;
text-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.reg-hero__sub{
margin:0; color:#dcd8cc; opacity:.9; font-weight:600;
letter-spacing:.02em; font-size: clamp(14px, 1.6vw, 14px);
}
/* Force la même display que l'accueil */
.reg-hero__title{
font-family: 'Bebas Neue', system-ui, sans-serif !important;
font-weight: 400; /* Bebas Neue n’a qu’un poids, évite le fallback */
letter-spacing: .06em;
text-transform: uppercase;
font-synthesis-weight: none; /* pas de faux bold */
}
/* === Règlement — Titre: look identique Accueil/Abonnements === */
.reg-hero__title{
/* même fonte et rythme */
font-family:'Bebas Neue', system-ui, sans-serif !important;
font-weight:400; /* Bebas n’a pas de bold → pas de faux gras */
font-synthesis-weight:none;
letter-spacing:.06em;
text-transform:uppercase;
line-height:.92;
/* relief + léger dégradé de matière (comme la home) */
color:transparent;
background:linear-gradient(180deg, #ffffff, #efe9db 55%, #d8d2c7 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
/* outline & ombres (lisibilité sur image sombre) */
-webkit-text-stroke:1px rgba(0,0,0,.35);
text-shadow:
0 1px 0 rgba(255,255,255,.06),
0 2px 0 rgba(0,0,0,.25),
0 10px 30px rgba(0,0,0,.60);
}
/* Fallback si le clip-text n’est pas dispo (vieux navigateurs) */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.reg-hero__title{
color:#efe9db;
-webkit-text-stroke:0;
text-shadow:0 10px 30px rgba(0,0,0,.6);
}
}
/* Sous-titre aligné au style des autres pages */
.reg-hero__sub{
font-weight:700;
letter-spacing:.02em;
opacity:.95;
}
/* --- REGLEMENT — Hero full-bleed sans bordure ni rayons --- */
.reg-hero{
margin: 0 !important; /* plus de marge autour */
border-radius: 0 !important; /* coins carrés */
box-shadow: none !important;
/* au cas où un parent a des paddings : force le full-bleed */
width: 100vw;
margin-inline: calc(50% - 50vw);
}
/* enlève le calque assombrissant au-dessus de l'image */
.reg-hero::after{
background: none !important; /* plus d’assombrissement */
}
/* sous-titre plus lisible aussi */
.reg-hero__sub{
color: #efe9db !important;
opacity: 1 !important;
}
/* garde un léger zoom pour la parallaxe sans bord visible */
.reg-hero__media img{
transform: translate3d(0,var(--regY,0px),0) scale(1.12);
}
/* --- Règlement : assombrir l'image du hero seulement --- */
/* le media reste derrière le texte */
.reg-hero__media{ position:absolute; inset:0; z-index:0; }
.reg-hero__inner{ position:relative; z-index:2; }
/* 1) assombrissement “physique” de l’image */
.reg-hero__media img{
filter: brightness(.80) contrast(1.08) saturate(1.05);
/* ajuste si besoin : brightness(.50 → .70) */
}
/* 2) voile doux appliqué AU MEDIA (et pas à tout le hero) */
.reg-hero__media::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(120% 80% at 50% 10%, rgba(0,0,0,.15), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.38) 60%, rgba(0,0,0,.46));
}
/* Règlement — bordure + relief identiques */
.reg-hero__title{
font-family:'Bebas Neue', system-ui, sans-serif !important;
font-weight:400;
letter-spacing:.06em;
text-transform:uppercase;
line-height:.92;
color:#fff;
/* épaisseur de bordure responsive (comme home/abo) */
--stroke: clamp(1px, .18vw, 2.2px);
/* outline net + léger relief */
-webkit-text-stroke: var(--stroke) rgba(0,0,0,.65);
text-shadow:
0 1px 0 rgba(255,255,255,.12), /* petit liseré clair interne */
0 2px 0 rgba(0,0,0,.35), /* léger relief */
0 12px 36px rgba(0,0,0,.60); /* ombre portée pour la lisibilité */
}
/* Fallback Firefox/anciens navigateurs sans -webkit-text-stroke */
@supports not (-webkit-text-stroke: 1px black){
.reg-hero__title{
text-shadow:
/* pseudo-outline (8 directions) */
0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000,
1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
/* relief + lisibilité */
0 12px 36px rgba(0,0,0,.60);
}
}
/* RÈGLEMENT — hard override : même rendu que Accueil/Abos */
.reg-hero .reg-hero__title{
font-family:'Bebas Neue',system-ui,sans-serif !important;
font-weight:400; letter-spacing:0.00em; line-height:.92; text-transform:uppercase;
/* texte blanc + outline */
color:#fff !important;
-webkit-text-fill-color:#fff !important;
background:none !important;
-webkit-background-clip:initial !important;
-webkit-text-stroke: var(--stroke) rgba(0,0,0,.65) !important;
text-shadow:
0 1px 0 rgba(255,255,255,.12),
0 2px 0 rgba(0,0,0,.35),
0 12px 36px rgba(0,0,0,.60) !important;
}
/* RÈGLEMENT — contour plus marqué sur le titre */
.reg-hero .reg-hero__title{
/* réglages faciles à tweaker */
--stroke-w: clamp(2px, .35vw, 4px); /* épaisseur du trait */
text-shadow:
/* petit liseré clair interne (relief) */
0 1px 0 rgba(255,255,255,.18),
/* fallback “faux contour” pour navigateurs sans text-stroke */
0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000,
1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
2px 1px 0 #000, -2px 1px 0 #000, 2px -1px 0 #000, -2px -1px 0 #000,
/* ombre douce pour la profondeur */
0 14px 36px rgba(0,0,0,.65) !important;
}
/* RÈGLEMENT — titre plus gras + contour plus marqué */
.reg-hero__title{
letter-spacing: .03em; /* un peu moins d’air = plus massif */
color:#fff;
/* contour très présent (responsive) */
--stroke: clamp(2px, .36vw, 4px);
-webkit-text-stroke: var(--stroke) rgba(0,0,0,.90);
text-shadow:
0 1px 0 rgba(255,255,255,.20), /* petit liseré clair interne */
0 2px 0 rgba(0,0,0,.55), /* relief */
0 16px 42px rgba(0,0,0,.65); /* ombre portée longue */
}
/* Fallback sans -webkit-text-stroke : faux “bold” par 8 directions */
@supports not (-webkit-text-stroke: 1px black){
.reg-hero__title{
text-shadow:
0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000,
1.5px 1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px -1.5px 0 #000,
0 16px 42px rgba(0,0,0,.65);
}
}
/* ===== RÈGLEMENT — accordéon (match ton HTML) ===== */
#rules.accordion{
max-width:min(1200px,100% - 2rem);
margin:10px auto 40px;
display:grid;
gap:8px;
}
#rules .accordion-item{
background:linear-gradient(180deg,#171b22,#12161b);
border:1px solid #252a36;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 28px rgba(0,0,0,.35);
}
#rules .accordion-header{
width:100%;
display:flex; align-items:center; justify-content:space-between;
gap:.8rem;
padding:16px 18px;
background:transparent;
color:#e9eaec;
border:0; cursor:pointer;
text-align:left;
}
#rules .accordion-header .title{
font-family:"Bebas Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
font-weight:400; /* Bebas n’a pas de vrai gras */
letter-spacing:.02em; line-height:.95;
font-size: clamp(18px, 2.6vw, 22px);
text-transform:uppercase;
text-shadow:0 1px 0 rgba(0,0,0,.6);
}
#rules .accordion-header .caret{
flex:0 0 auto;
font-weight:900; opacity:.85;
transition: transform .25s ease;
}
#rules .accordion-header.active .caret{ transform:rotate(90deg); }
/* corps fermé par défaut (anim hauteur) */
#rules .accordion-body{
overflow:hidden;
max-height:0;
padding:0 18px; /* base padding (LR) pour éviter le “saut” */
background:#13161e;
color:#cfcfcf;
line-height:1.65;
transition:
max-height .28s cubic-bezier(.2,.8,.2,1),
padding .28s cubic-bezier(.2,.8,.2,1);
will-change: max-height, padding;
}
/* on anime SEULEMENT la hauteur sur le conteneur */
#rules .accordion-body{
overflow:hidden;
max-height:0;
background:#13161e;
color:#cfcfcf;
line-height:1.65;
transition:max-height .28s cubic-bezier(.2,.8,.2,1);
will-change:max-height;
padding:0; /* important: pas de padding ici */
}
/* le padding vit dans un wrapper interne, toujours présent */
#rules .accordion-inner{
padding:16px 18px;
}
/* évite le coup de fouet des marges qui “collapsent” */
#rules .accordion-inner > :first-child{ margin-top:0; }
#rules .accordion-inner > :last-child{ margin-bottom:0; }
#rules .accordion-item{ contain: layout paint; }
#rules .accordion-body h4{ margin:10px 0 6px; color:#efe9db }
#rules .accordion-body ul{ margin:8px 0 12px 18px }
/* barrette d’actions */
.accordion-tools{
max-width:min(1200px,100% - 2rem);
margin: 8px auto 10px;
display:flex; gap:8px; flex-wrap:wrap;
}
.accordion-tools .btn{
padding:8px 12px; border-radius:10px; font-weight:800;
color:#eae7de; border:1px solid #2b3140;
background:linear-gradient(180deg,rgba(28,32,40,.55),rgba(22,24,30,.38));
box-shadow:0 8px 22px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.04) inset;
}
.accordion-tools .btn:hover{ transform:translateY(-1px) }
/* ====== Règlement — toolbar bien placée ====== */
/* le bloc de règles a une largeur fixe centrée */
#rules.accordion{
width: min(1200px, 100% - 2rem); /* même largeur partout */
margin: 10px auto 40px; /* centré */
}
/* la barre de boutons prend la même largeur et s’aligne à droite */
.accordion-tools{
width: min(1200px, 100% - 2rem); /* colle visuellement au bloc */
margin: 8px auto 10px; /* centrée comme #rules */
display: flex;
justify-content: flex-end; /* boutons à droite */
gap: 8px;
}
/* style light des boutons (garde tes .btn existants) */
.accordion-tools .btn{
padding: 8px 12px;
border-radius: 10px;
font-weight: 800;
}
/* mobile : boutons sur toute la largeur et centrés */
@media (max-width: 560px){
.accordion-tools{
justify-content: center;
}
.accordion-tools .btn{
flex: 1 1 auto;
text-align: center;
}
}
/* Règlement – patch clic & caret */
#rules .accordion-header { position: relative; }
#rules .accordion-header .caret { pointer-events: none; } /* pour que tout le header soit cliquable */
/* rotation de la flèche quand c’est ouvert (peu importe la classe .active) */
#rules .accordion-header[aria-expanded="true"] .caret,
#rules .accordion-header.active .caret { transform: rotate(90deg); }
/* === HERO RÈGLEMENT (parallax) === */
.reg-hero{
position: relative;
min-height: clamp(500px, 62vh, 740px);
border-radius: 16px;
overflow: hidden;
display: grid;
place-items: center;
isolation: isolate;
box-shadow: 0 16px 60px rgba(0,0,0,.45);
}
/* calque image piloté en JS */
.reg-hero__media{
position: absolute;
inset: -8% -4%; /* marge pour bouger sans montrer les bords */
transform: translate3d(0,0,0) scale(1.08);
will-change: transform;
z-index: 0;
}
.reg-hero__media img{
width: 100%; height: 100%;
object-fit: cover; display: block;
}
/* lisibilité du texte par-dessus */
.reg-hero::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
background:
radial-gradient(110% 80% at 50% 40%,
rgba(0,0,0,.10) 0%,
rgba(0,0,0,.55) 66%,
rgba(0,0,0,.80) 100%),
linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42) 78%);
mix-blend-mode: multiply;
}
.reg-hero__inner{ position: relative; z-index: 2; text-align: center; padding: clamp(24px,5vw,48px) 16px; }
.reg-hero__title{
font-family:"Bebas Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
text-transform: uppercase; letter-spacing:.02em; line-height:.92;
font-size: clamp(2.8rem, 8.2vw, 5.6rem);
color:#fff; margin:0;
-webkit-text-stroke:.7px rgba(0,0,0,.65);
text-shadow:0 2px 0 rgba(0,0,0,.9), 0 22px 48px rgba(0,0,0,.55);
}
.reg-hero__sub{ margin:.35rem 0 0; color:#d8d6d0; opacity:.95; }
/* Règlement : overlay + clair */
.reg-hero::before{
opacity:.20; /* 0.55–0.75 */
}
/* ===== Trailer Hero (Video Background) ===== */
.hero-trailer{
position:relative;
min-height:68vh;
display:grid;
place-items:center;
overflow:hidden;
background:#0b0c0f;
border-bottom:1px solid var(--ring);
}
.hero-trailer .hero-trailer-media{ position:absolute; inset:0; }
.hero-trailer .trailer-video{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center;
filter:contrast(1.05) brightness(0.8) saturate(1.1);
transform:translateZ(0);
}
.hero-trailer .hero-trailer-overlay{
position:relative;
z-index:2;
text-align:center;
padding:8rem 1rem 6rem;
width:min(1100px, 92vw);
}
.hero-trailer::after{
content:"";
position:absolute; inset:0;
background:
radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.55) 100%),
linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.65) 100%);
z-index:1;
}
.hero-title{
font-family:'Bebas Neue', system-ui, sans-serif;
letter-spacing:.5px;
margin:0 0 .25rem 0;
font-size:clamp(44px, 7vw, 86px);
color:var(--title);
text-shadow:0 6px 24px rgba(0,0,0,.6);
}
.hero-subtitle{
margin:0 0 1.75rem 0;
font-size:clamp(16px, 2.2vw, 22px);
color:var(--muted);
}
.hero-ctas{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.btn{
display:inline-flex; align-items:center; justify-content:center;
padding:.85rem 1.2rem; border-radius:12px; text-decoration:none;
border:1px solid var(--ring);
transition:transform .16s ease, background-color .2s ease, border-color .2s ease;
font-weight:600;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:#fff; border-color:transparent; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-ghost{ background:transparent; color:var(--fg); }
.trailer-sound{
position:absolute; z-index:3; right:1rem; bottom:3rem;
background:rgba(0,0,0,.55);
color:#fff; border:1px solid rgba(255,255,255,.2);
padding:.6rem .8rem; border-radius:10px; cursor:pointer;
font-weight:600;
backdrop-filter:blur(6px);
}
.trailer-sound[aria-pressed="true"]{
background:rgba(192,57,43,.85); border-color:transparent;
}
/* Mobile */
@media (max-width:720px){
.hero-trailer{ min-height:56vh; }
.trailer-sound{ bottom:.75rem; right:.75rem; }
}
/* Fallback si data/motion réduits */
@media (prefers-reduced-data:reduce){
.hero-trailer .trailer-video{ display:none; }
.hero-trailer{ background:url('assets/banner_ea.jpg') center/cover no-repeat; }
}
@media (prefers-reduced-motion:reduce){
.hero-trailer .trailer-video{ animation:none !important; }
}
.trailer-sound[aria-pressed="true"]{
background:rgba(192,57,43,.85);
border-color:transparent;
}
/* --- Fix clic overlay & ordre des calques --- */
.hero-trailer-overlay{ pointer-events:none; }
.hero-trailer-overlay .btn{ pointer-events:auto; }
.trailer-sound{
position:absolute; right:1rem; bottom:3rem;
z-index:999;
pointer-events:auto;
}
.trailer-sound[aria-pressed="true"]{
background:rgba(192,57,43,.85);
border-color:transparent;
}
/* === Trailer : supprimer les surcouches sombres globales === */
.hero.hero-trailer::before,
.hero.hero-trailer::after {
content: none !important;
background: none !important;
}
.hero.hero-trailer .hero-inner::before {
content: none !important;
}
/* Optionnel : si tu veux un léger voile juste sous le titre (pas sur toute la vidéo) */
.hero.hero-trailer .hero-trailer-overlay {
background: none; /* ou: background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0)); */
}
/* ===== Hero trailer : titre très haut, CTA très bas, centrés ===== */
.hero.hero-trailer .hero-trailer-overlay{
position: absolute;
inset: 0;
pointer-events: none; /* clics passent vers la vidéo */
}
.hero.hero-trailer .hero-inner{
position: absolute; /* occupe tout le cadre vidéo */
inset: 0;
margin: 0;
width: 100%;
max-width: none !important; /* annule un éventuel max-width global */
padding: calc(var(--header-h, 72px) + 8px) 2vw 24px; /* espace sous le header + bas */
display: flex;
flex-direction: column;
justify-content: space-between; /* haut / bas */
align-items: center; /* centré horizontalement */
gap: 0;
}
.hero.hero-trailer h1{
margin: 0;
text-align: center;
}
.hero.hero-trailer .hero-cta{
margin: 0;
align-self: center;
pointer-events: auto; /* réactive le clic sur le bouton */
padding-bottom: max(env(safe-area-inset-bottom), 12px);
}
/* Si tu veux que le bouton touche encore plus le bas, baisse ce padding-bottom à 0 */
/* ===== Hero trailer : centrage horizontal forcé ===== */
.hero.hero-trailer .hero-inner{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center; /* centre les enfants */
width: 100vw; /* pleine largeur */
max-width: none !important;
left: 50%; transform: translateX(-50%); /* neutralise tout container à gauche */
padding: calc(var(--header-h, 72px) + 8px) 2vw 16px;
}
/* Supprime tout offset/marge gauche héritée */
.hero.hero-trailer h1,
.hero.hero-trailer .hero-cta{
margin-left: 0 !important;
margin-right: 0 !important;
align-self: center !important; /* certains styles globaux mettent flex-start */
text-align: center;
}
/* Optionnel : le bouton plus collé au bas */
.hero.hero-trailer .hero-cta{ padding-bottom: max(env(safe-area-inset-bottom), 8px); }
.hero.hero-trailer .hero-trailer-overlay{ padding: 0 !important; }
/* ===== Hero trailer — centrage strict ===== */
.hero.hero-trailer .hero-trailer-overlay{
/* centre le conteneur overlay */
margin-inline: auto !important;
width: 100% !important;
max-width: none !important;
/* on garde la mise en page top/bottom */
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center; /* <- centre horizontalement */
padding: calc(var(--header-h, 72px) + 8px) 2vw 16px;
}
.hero.hero-trailer .hero-inner{
/* centre la boîte de contenu */
margin-inline: auto !important;
width: min(1100px, 92vw) !important; /* même largeur que l’overlay prévue */
max-width: none !important;
/* s’assure du centrage des enfants */
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
height: 100%;
}
.hero.hero-trailer h1,
.hero.hero-trailer .hero-cta{
align-self: center !important;
text-align: center;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ===== Décalage léger à gauche du titre + CTA ===== */
.hero.hero-trailer {
--hero-shift: -2vw; /* ajuste: -2vw à -8vw selon ton goût */
}
.hero.hero-trailer h1,
.hero.hero-trailer .hero-cta{
transform: translateX(var(--hero-shift));
}
/* Sur mobile, recentre pour éviter de sortir de l’écran */
@media (max-width: 768px){
.hero.hero-trailer { --hero-shift: -2vw; }
}
@media (max-width: 480px){
.hero.hero-trailer { --hero-shift: 0; }
}
/* ===== Trailer: contrôles d'ajustement ===== */
.hero-trailer{
--fit: cover; /* mode par défaut */
--pos-x: 50%; /* centre horizontal par défaut */
--pos-y: 90%; /* ancre vers le bas pour voir la date */
}
/* applique les variables */
.hero-trailer .trailer-video{
object-fit: var(--fit) !important;
object-position: var(--pos-x) var(--pos-y) !important;
background:#000; /* si on passe en contain, bandes propres */
}
/* Si tu préfères encore pousser la vidéo un peu à gauche */
@media (min-width: 1024px){
.hero-trailer{ --pos-x: 46%; } /* 46–48% agréable, ajuste à ta guise */
}
.hero-trailer{ --fit: cover; --pos-x: 46%; --pos-y: 100%; } /* bas visible en priorité */
/* ===== HERO TRAILER — plein écran, bas prioritaire ===== */
.hero.hero-trailer{
/* occupe tout le viewport moins le header */
--header-h: 72px;
min-height: calc(100dvh - var(--header-h));
position: relative;
overflow: hidden; /* pas de bandes parasites */
}
/* Le media remplit TOUT, indépendamment de l’overlay */
.hero.hero-trailer .hero-trailer-media{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* La vidéo couvre et s’ancre en BAS-CENTRE (montre la date) */
.hero.hero-trailer .trailer-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover !important;
object-position: 50% 100% !important; /* 96–100% selon tes plans */
background: #000; /* sécurité */
}
/* L’overlay ne doit PAS contraindre la vidéo */
.hero.hero-trailer .hero-trailer-overlay{
position: relative; /* au-dessus de la vidéo */
z-index: 2;
pointer-events: none; /* clics passent, sauf CTA */
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between; /* titre tout en haut / CTA tout en bas */
align-items: center;
padding: calc(var(--header-h) + 8px) 2vw 20px;
margin: 0; /* pas de centrage "narrow" ici */
max-width: none;
}
/* Le contenu reste centrée, clics actifs sur CTA */
.hero.hero-trailer .hero-inner{
width: 100%;
max-width: none !important;
display: flex; flex-direction: column; align-items: center;
gap: 0; height: 100%;
}
.hero.hero-trailer h1{ margin: 0; text-align: center; }
.hero.hero-trailer .hero-cta{
pointer-events: auto;
margin: 0;
padding-bottom: max(env(safe-area-inset-bottom), 8px);
}
/* Micro-ajustement du cadrage horizontal sur grands écrans (facultatif) */
@media (min-width: 1200px){
.hero.hero-trailer .trailer-video{ object-position: 46% 100%; }
}
.hero.hero-trailer .trailer-video{ object-position: 50% 98%; } /* 95–100% */
/* ===== HERO TRAILER — supprimer la bande noire du bas ===== */
.hero.hero-trailer{
--header-h: 72px;
min-height: calc(100dvh - var(--header-h));
position: relative;
overflow: hidden;
}
.hero.hero-trailer .hero-trailer-media{
position: absolute;
inset: 0;
}
.hero.hero-trailer .trailer-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* plein écran */
object-position: 50% 98%; /* bas prioritaire (ajuste 95–100%) */
background:#000;
}
/* ⬇️ L’OVERLAY ne doit plus impacter la hauteur */
.hero.hero-trailer .hero-trailer-overlay{
position: absolute; /* <- était relative */
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between; /* titre en haut / CTA en bas */
align-items: center;
pointer-events: none; /* laisse passer les clics */
padding: calc(var(--header-h) + 8px) 2vw 8px; /* padding bas minimal */
margin: 0;
max-width: none;
}
/* contenu centré + clics réactivés uniquement sur le CTA */
.hero.hero-trailer .hero-inner{
height: 100%;
width: 100%;
max-width: none !important;
display: flex; flex-direction: column; align-items: center;
}
.hero.hero-trailer h1{ margin: 0; text-align: center; }
.hero.hero-trailer .hero-cta{
margin: 0;
pointer-events: auto; /* le bouton reste cliquable */
padding-bottom: 0; /* pas d’espace qui recrée une bande */
}