/*
═══════════════════════════════════════════════════════════════════
TEMPUS MAGIS — Design System CSS v3 — 100% Flexbox
Aucun display:grid — compatibilité maximale navigateurs
═══════════════════════════════════════════════════════════════════
UTILISATION
───────────
Dans votre :
BLOCS DISPONIBLES
─────────────────
header En-tête non-sticky, logo à cheval
.hero Hero principal dark (étoiles + vague)
.puissance 3 colonnes flex avec trait doré
.obtenez Flex wrap 3 par ligne
.feature-block Image gauche + texte droite
.feature-block.reverse Image droite + texte gauche (flex-direction:row-reverse)
.fonctionnalites Flex wrap 4 par ligne
.bloc-manifeste Philosophie / manifeste
.tarifs Flex wrap 4 cartes
.temoignages Flex wrap 3 cartes
.garantie Bandeau garantie
.faq Accordéon FAQ
.bloc-texte Texte pleine largeur générique
.legal-section Flex wrap 3 colonnes
.cta-final CTA sombre final
CLASSES UTILITAIRES (à ajouter sur n'importe quelle )
───────────────────
.has-stars Étoiles dorées en fond (::before)
.has-constellations Constellations SVG (::after)
COMPOSANTS
──────────
.btn.btn-primary Bouton doré principal
.btn.btn-outline Bouton contour doré
.container Wrapper centré max 1060px (padding 40px)
.divider Trait doré centré (48×2px)
.tag Étiquette uppercase dorée
NOMS DE CLASSES (flexbox, sans "grid")
──────────────────────────────────────
.puissance-flex 3 cartes flex
.obtenez-flex Cartes bénéfices (flex:1 1 calc(33%-20px))
.features-flex Features (flex:1 1 calc(25%-12px))
.tarifs-flex Tarifs (flex:1 1 calc(25%-16px))
.temoignages-flex Témoignages (flex:1 1 calc(33%-18px))
.legal-flex Légal (flex:1 1 calc(33%-32px))
RESPONSIVE
──────────
> 960px Desktop complet
≤ 960px Tablette : burger menu, flex wrap 2 col
≤ 520px Mobile portrait : tout en 1 col
≤ 360px Très petit : logo et titres réduits
PALETTE
───────
Dark : --fond #0D0D1A · --or #C8A96E · --texte #E8E4D9
Light : --lf1 #F9F6F1 · --lf2 #FFFFFF · --lf3 #F2EDE5
--lt1 #1A1625 · --lt2 #4A4460 · --lt3 #8A8099
═══════════════════════════════════════════════════════════════════
*/
/* ─── RESET & VARIABLES ─── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--or: #C8A96E;
--or-clair: #E8D5A3;
--fond: #0D0D1A;
--fond2: #13132A;
--fond3: #1A1A35;
--texte: #E8E4D9;
--gris: #8A8599;
--blanc: #FFFFFF;
--radius: 10px;
--header-h: 72px;
--logo-h: 110px;
--logo-top: 12px;
--logo-below: 50px;
--logo-left: 36px;
--lf1: #F9F6F1;
--lf2: #FFFFFF;
--lf3: #F2EDE5;
--lt1: #1A1625;
--lt2: #4A4460;
--lt3: #8A8099;
--lb: rgba(200, 169, 110, 0.18);
--lb2: rgba(200, 169, 110, 0.30);
--gap: 20px;
/* ── Effet panoramique sur les images ──
running → animation active
paused → animation désactivée
--pan-hero : screens du hero
--pan-blocks : blocs feature (Astro Coach, etc.)
Chaque bloc peut aussi surcharger sa durée via
style="--pan-delay:Xs" directement sur .feature-block-img */
--pan-hero: paused;
/* running | paused */
--pan-blocks: paused;
/* running | paused */
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Source Sans 3', sans-serif;
background: var(--lf1);
color: var(--texte);
font-size: 18px;
line-height: 1.75;
}
h1,
h2,
h3 {
font-family: 'Playfair Display', serif;
line-height: 1.25;
}
img {
max-width: 100%;
display: block;
}
a {
color: var(--or);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.container {
max-width: 1060px;
margin: 0 auto;
padding: 0 40px;
}
section {
padding: 72px 0;
}
.divider {
width: 48px;
height: 2px;
background: var(--or);
margin: 0 auto 20px;
}
.tag {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--or);
margin-bottom: 14px;
}
/* Boutons */
.btn {
display: inline-block;
padding: 15px 36px;
border-radius: var(--radius);
font-weight: 700;
font-size: 1.05rem;
cursor: pointer;
border: none;
transition: background .2s, color .2s, transform .15s;
letter-spacing: .3px;
}
.btn-primary {
background: var(--or);
color: var(--fond);
box-shadow: 0 4px 18px rgba(200, 169, 110, .35);
}
.btn-primary:hover {
background: var(--or-clair);
text-decoration: none;
color: var(--fond);
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(200, 169, 110, .45);
}
.btn-outline {
background: transparent;
color: var(--or);
border: 2px solid var(--or);
}
.btn-outline:hover {
background: rgba(200, 169, 110, .1);
text-decoration: none;
}
.btn-note {
display: block;
font-size: .85rem;
color: var(--gris);
margin-top: 12px;
}
/* ══════════════════════════════════════
✦ ÉTOILES & CONSTELLATIONS
Ajoutez .has-stars et/ou .has-constellations sur n'importe quelle
══════════════════════════════════════ */
.has-stars {
position: relative;
overflow: hidden;
}
.has-stars::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(1px 1px at 6% 12%, rgba(200, 169, 110, .60) 0%, transparent 100%),
radial-gradient(1px 1px at 12% 68%, rgba(255, 255, 255, .35) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 20% 35%, rgba(200, 169, 110, .45) 0%, transparent 100%),
radial-gradient(1px 1px at 29% 7%, rgba(255, 255, 255, .30) 0%, transparent 100%),
radial-gradient(1px 1px at 35% 85%, rgba(200, 169, 110, .30) 0%, transparent 100%),
radial-gradient(2px 2px at 43% 20%, rgba(255, 255, 255, .50) 0%, transparent 100%),
radial-gradient(1px 1px at 50% 60%, rgba(200, 169, 110, .35) 0%, transparent 100%),
radial-gradient(2px 2px at 61% 10%, rgba(200, 169, 110, .55) 0%, transparent 100%),
radial-gradient(1px 1px at 66% 75%, rgba(255, 255, 255, .30) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 78% 54%, rgba(255, 255, 255, .40) 0%, transparent 100%),
radial-gradient(2px 2px at 92% 45%, rgba(200, 169, 110, .50) 0%, transparent 100%),
radial-gradient(1px 1px at 16% 88%, rgba(200, 169, 110, .30) 0%, transparent 100%),
radial-gradient(1px 1px at 39% 3%, rgba(200, 169, 110, .40) 0%, transparent 100%),
radial-gradient(1px 1px at 69% 2%, rgba(200, 169, 110, .35) 0%, transparent 100%),
radial-gradient(1px 1px at 95% 26%, rgba(200, 169, 110, .30) 0%, transparent 100%);
}
.has-constellations::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='520'%3E%3Cg stroke='%23C8A96E' stroke-opacity='0.07' stroke-width='0.8' fill='none'%3E%3Cline x1='72' y1='75' x2='198' y2='34'/%3E%3Cline x1='198' y1='34' x2='279' y2='190'/%3E%3Cline x1='279' y1='190' x2='405' y2='110'/%3E%3Cline x1='126' y1='340' x2='243' y2='385'/%3E%3Cline x1='567' y1='65' x2='648' y2='48'/%3E%3Cline x1='648' y1='48' x2='720' y2='105'/%3E%3Cline x1='720' y1='105' x2='810' y2='75'/%3E%3C/g%3E%3Ccircle cx='72' cy='75' r='1.5' fill='%23C8A96E' fill-opacity='0.3'/%3E%3Ccircle cx='198' cy='34' r='1.5' fill='%23C8A96E' fill-opacity='0.3'/%3E%3Ccircle cx='279' cy='190' r='2' fill='%23C8A96E' fill-opacity='0.25'/%3E%3Ccircle cx='405' cy='110' r='1.5' fill='%23C8A96E' fill-opacity='0.3'/%3E%3Ccircle cx='648' cy='48' r='2' fill='%23C8A96E' fill-opacity='0.35'/%3E%3Ccircle cx='720' cy='105' r='1.5' fill='%23C8A96E' fill-opacity='0.3'/%3E%3Ccircle cx='810' cy='75' r='1.5' fill='%23C8A96E' fill-opacity='0.25'/%3E%3C/svg%3E");
background-size: cover;
}
.has-stars>.container,
.has-constellations>.container {
position: relative;
z-index: 1;
}
/* ══════════════════════════════════════
HEADER — non sticky
══════════════════════════════════════ */
header {
position: relative;
height: var(--header-h);
background: var(--fond);
overflow: visible;
z-index: 100;
border-bottom: 1px solid rgba(200, 169, 110, .08);
}
.header-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
max-width: 1060px;
margin: 0 auto;
padding: 0 40px;
}
.logo-float {
position: absolute;
top: var(--logo-top);
left: var(--logo-left);
z-index: 200;
line-height: 0;
}
.logo-float img {
height: var(--logo-h);
width: auto;
filter: brightness(0) invert(1);
opacity: .92;
display: block;
}
/* Nav desktop */
.header-nav {
display: flex;
align-items: center;
gap: 4px;
}
.nav-link {
font-size: 14px;
color: var(--texte);
opacity: .75;
padding: 6px 14px;
border-radius: var(--radius);
transition: opacity .15s;
}
.nav-link:hover {
opacity: 1;
text-decoration: none;
}
.btn-connexion {
font-size: 14px;
padding: 8px 20px;
border-radius: var(--radius);
color: var(--texte);
border: 1px solid rgba(255, 255, 255, .22);
background: transparent;
transition: border-color .15s, color .15s;
}
.btn-connexion:hover {
border-color: var(--or);
color: var(--or);
text-decoration: none;
}
.btn-inscrire {
font-size: 14px;
padding: 8px 20px;
border-radius: var(--radius);
background: var(--or);
color: var(--fond);
font-weight: 700;
transition: background .15s;
}
.btn-inscrire:hover {
background: var(--or-clair);
text-decoration: none;
color: var(--fond);
}
/* Burger */
.burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 6px;
cursor: pointer;
padding: 10px;
background: none;
border: none;
z-index: 210;
}
.burger span {
display: block;
width: 26px;
height: 2px;
background: var(--texte);
border-radius: 2px;
transition: transform .28s ease, opacity .2s;
transform-origin: center;
}
.burger.open span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.burger.open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.burger.open span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* Drawer mobile */
.mobile-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(8, 8, 20, .97);
backdrop-filter: blur(16px);
z-index: 190;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
opacity: 0;
pointer-events: none;
transform: translateY(-12px);
transition: opacity .28s ease, transform .28s ease;
}
.mobile-nav.open {
opacity: 1;
pointer-events: all;
transform: translateY(0);
}
.mobile-nav .m-link {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--texte);
padding: 12px 0;
width: 240px;
text-align: center;
border-bottom: 1px solid rgba(200, 169, 110, .12);
opacity: .85;
transition: color .15s, opacity .15s;
}
.mobile-nav .m-link:hover {
color: var(--or);
opacity: 1;
text-decoration: none;
}
.mobile-nav .m-ctas {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
width: 240px;
}
.mobile-nav .m-ctas a {
display: block;
text-align: center;
padding: 14px;
border-radius: var(--radius);
font-size: 1rem;
font-weight: 700;
}
.m-connexion {
color: var(--or);
border: 2px solid var(--or);
background: transparent;
}
.m-inscrire {
background: var(--or);
color: var(--fond);
}
.mobile-close {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
color: var(--texte);
font-size: 1.8rem;
cursor: pointer;
line-height: 1;
opacity: .6;
transition: opacity .15s;
}
.mobile-close:hover {
opacity: 1;
}
/* ══════════════════════════════════════
HERO
══════════════════════════════════════ */
.hero {
position: relative;
background: radial-gradient(ellipse at 35% 55%, #1e1e42 0%, var(--fond) 65%);
padding-top: calc(var(--logo-below) + 36px);
padding-bottom: 72px;
overflow: hidden;
}
/* Flex row : texte gauche | captures droite */
.hero .container {
display: flex;
flex-direction: row;
align-items: center;
gap: 40px;
}
.hero-left {
display: flex;
flex-direction: row;
align-items: center;
flex: 1;
min-width: 0;
}
.hero-planetes {
flex-shrink: 0;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 420px;
width: auto;
opacity: .20;
pointer-events: none;
z-index: 0;
}
.hero-left-text {
flex: 1;
padding-left: 52px;
position: relative;
z-index: 1;
min-width: 0;
}
.hero h1 {
font-size: clamp(2rem, 3.8vw, 3rem);
color: var(--blanc);
margin-bottom: 20px;
}
.hero h1 span {
color: var(--or);
}
.hero p.lead {
font-size: 1.05rem;
opacity: .84;
margin-bottom: 24px;
max-width: 440px;
line-height: 1.8;
}
.hero-cite {
font-style: italic;
color: var(--gris);
font-size: .88rem;
border-left: 2px solid rgba(200, 169, 110, .35);
padding-left: 14px;
margin-bottom: 32px;
}
/* Fan de captures */
.hero-right {
flex-shrink: 0;
position: relative;
width: 46%;
height: 480px;
}
.hero-screens {
position: relative;
width: 100%;
height: 100%;
}
.screen {
position: absolute;
border-radius: 12px;
border: 1px solid rgba(200, 169, 110, .3);
box-shadow: 0 16px 50px rgba(0, 0, 0, .65);
overflow: hidden;
background: #fff;
}
@keyframes screen-pan {
0%,
15% {
object-position: center 0%;
}
85%,
100% {
object-position: center 100%;
}
}
.screen img {
width: 100%;
height: 100%;
object-fit: cover;
animation: screen-pan 9s ease-in-out infinite alternate;
animation-play-state: var(--pan-hero);
}
.screen-1 {
width: 200px;
height: 360px;
left: 10px;
top: 50%;
transform: translateY(-50%) rotate(-9deg);
z-index: 1;
opacity: .88;
}
.screen-2 {
width: 230px;
height: 415px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
.screen-3 {
width: 200px;
height: 360px;
right: 10px;
top: 50%;
transform: translateY(-50%) rotate(9deg);
z-index: 1;
opacity: .88;
}
.screen-1 img {
animation-delay: 0s;
}
.screen-2 img {
animation-delay: -3s;
}
.screen-3 img {
animation-delay: -6s;
}
/* Décos */
.hero-zodiac {
position: absolute;
bottom: -60px;
right: -80px;
width: 480px;
height: 480px;
opacity: .22;
pointer-events: none;
z-index: 0;
}
/* ══════════════════════════════════════
PUISSANCE — flex row 3 colonnes
══════════════════════════════════════ */
.puissance {
background: var(--lf1);
padding: 80px 0 72px;
}
.puissance-header {
text-align: center;
margin-bottom: 56px;
}
.puissance-header h2 {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
max-width: 700px;
margin: 0 auto 16px;
color: var(--lt1);
}
.puissance-header p {
color: var(--lt2);
max-width: 843px;
margin: 0 auto;
font-size: 1.2rem;
line-height: 1.7;
}
.puissance-flex {
display: flex;
flex-direction: row;
align-items: stretch;
}
.puissance-card {
flex: 1;
padding: 36px 36px 32px;
position: relative;
border-right: 1px solid var(--lb2);
}
.puissance-card:last-child {
border-right: none;
}
.puissance-card::before {
content: '';
display: block;
width: 40px;
height: 3px;
background: var(--or);
border-radius: 2px;
margin-bottom: 24px;
}
.puissance-card::after {
content: attr(data-num);
position: absolute;
bottom: 16px;
right: 24px;
font-family: 'Playfair Display', serif;
font-size: 6rem;
font-weight: 700;
color: rgba(200, 169, 110, .08);
line-height: 1;
pointer-events: none;
}
.puissance-card h3 {
font-size: 1.22rem;
color: var(--lt1);
margin-bottom: 14px;
line-height: 1.3;
}
.puissance-card p {
font-size: 1rem;
color: var(--lt2);
line-height: 1.8;
}
/* ══════════════════════════════════════
CE QUE VOUS OBTENEZ — flex wrap 3 par ligne
══════════════════════════════════════ */
.obtenez {
background: var(--lf3);
text-align: center;
}
.obtenez h2 {
font-size: clamp(1.7rem, 3vw, 2.2rem);
margin-bottom: 8px;
color: var(--lt1);
}
.obtenez .sous-titre {
color: var(--lt2);
margin-bottom: 40px;
font-size: 1rem;
display: block;
}
.obtenez-flex {
display: flex;
flex-wrap: wrap;
margin: -10px;
}
.obtenez-card {
flex: 1 1 calc(33.333% - 20px);
margin: 10px;
min-width: 220px;
background: var(--lf2);
border: 1px solid var(--lb);
border-radius: 12px;
padding: 24px 15px;
box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
text-align: left;
}
.obtenez-card .icone {
font-size: 1.8rem;
margin-bottom: 12px;
text-align: center;
}
.obtenez-card h3 {
font-size: 1.05rem;
color: var(--or);
margin-bottom: 8px;
font-family: 'Playfair Display', serif;
text-align: center;
}
.obtenez-card p {
font-size: .99rem;
color: var(--lt2);
line-height: 1.7;
text-align: center;
}
/* ══════════════════════════════════════
FEATURE BLOCKS image + texte
══════════════════════════════════════ */
.feature-block {
padding: 72px 0;
background: var(--lf2);
}
.feature-block:nth-child(even) {
background: var(--lf3);
}
.feature-block .container {
display: flex;
flex-direction: row;
align-items: center;
gap: 60px;
}
.feature-block.reverse .container {
flex-direction: row-reverse;
}
.feature-block-img {
flex: 1;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 40px rgba(0, 0, 0, .10);
border: 1px solid var(--lb);
}
.feature-block-img img {
width: 100%;
height: 380px;
object-fit: cover;
object-position: center 0%;
display: block;
animation: screen-pan 14s ease-in-out infinite alternate;
animation-play-state: paused;
animation-delay: var(--pan-delay, 0s);
}
.feature-block-img.pan-active img {
animation-play-state: var(--pan-blocks);
}
.feature-block-text {
flex: 1;
}
.feature-block-text h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
color: var(--lt1);
margin-bottom: 16px;
}
.feature-block-text p {
font-size: 1rem;
color: var(--lt2);
line-height: 1.85;
margin-bottom: 20px;
}
.feature-block-text p:last-of-type {
margin-bottom: 32px;
}
/* ══════════════════════════════════════
BLOC VIDÉO
══════════════════════════════════════ */
.video-bloc {
background: var(--lf1);
padding: 44px 0 0 0;
text-align: center;
}
.video-bloc h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--lt1);
margin-bottom: 16px;
}
.video-accroche {
font-size: 1.05rem;
color: var(--lt2);
max-width: 600px;
margin: 0 auto 40px;
line-height: 1.75;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 800px;
margin: 0 auto;
border-radius: 14px;
box-shadow: 0 12px 48px rgba(0, 0, 0, .15);
border: 1px solid var(--lb);
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 14px;
border: 0;
}
/* ══════════════════════════════════════
FONCTIONNALITÉS — flex wrap
══════════════════════════════════════ */
.fonctionnalites {
background: var(--lf1);
text-align: center;
}
.fonctionnalites h2 {
font-size: clamp(1.7rem, 3vw, 2.2rem);
margin-bottom: 8px;
color: var(--lt1);
}
.fonctionnalites .sous-titre {
color: var(--lt2);
margin-bottom: 40px;
font-size: 1.2rem;
display: block;
}
.features-flex {
display: flex;
flex-wrap: wrap;
margin: -6px;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 10px;
background: var(--lf2);
border: 1px solid var(--lb);
border-radius: var(--radius);
flex: 1 1 calc(25% - 12px);
min-width: 180px;
margin: 6px;
}
.feature-item .check {
color: var(--or);
font-size: .8rem;
flex-shrink: 0;
margin-top: 4px;
margin-right: 8px;
}
.feature-item h4 {
font-family: 'Playfair Display', serif;
font-size: .97rem;
color: var(--lt1);
margin-bottom: 4px;
}
.feature-item p {
font-size: .98rem;
color: var(--lt3);
line-height: 1.5;
}
/* ══════════════════════════════════════
MANIFESTE
══════════════════════════════════════ */
.bloc-manifeste {
background: var(--lf2);
border-top: 1px solid var(--lb);
text-align: center;
}
.bloc-manifeste-inner {
max-width: 740px;
margin: 0 auto;
}
.bloc-manifeste h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--lt1);
margin-bottom: 12px;
}
.manifeste-sous-titre {
font-size: 1.2rem;
color: var(--or);
font-style: italic;
font-family: 'Playfair Display', serif;
margin-bottom: 36px;
display: block;
}
.manifeste-corps {
text-align: left;
border-left: 3px solid var(--or);
padding-left: 28px;
margin-bottom: 40px;
}
.manifeste-corps p {
font-size: 1.2rem;
color: var(--lt2);
line-height: 1.9;
}
.manifeste-corps p+p {
margin-top: 16px;
}
.manifeste-valeurs {
display: flex;
flex-direction: row;
border: 1px solid var(--lb);
border-radius: 12px;
overflow: hidden;
text-align: left;
}
.manifeste-valeur {
flex: 1;
padding: 24px;
border-right: 1px solid var(--lb);
}
.manifeste-valeur:last-child {
border-right: none;
}
.manifeste-valeur::before {
content: '';
display: block;
width: 28px;
height: 2px;
background: var(--or);
border-radius: 2px;
margin-bottom: 14px;
}
.manifeste-valeur strong {
display: block;
font-family: 'Playfair Display', serif;
font-size: 1rem;
color: var(--lt1);
margin-bottom: 6px;
}
.manifeste-valeur span {
font-size: .95rem;
color: var(--lt3);
line-height: 1.65;
}
/* ══════════════════════════════════════
TARIFS — flex wrap 4 cartes
══════════════════════════════════════ */
.tarifs {
background: var(--lf3);
text-align: center;
}
.tarifs h2 {
font-size: clamp(1.7rem, 3vw, 2.2rem);
margin-bottom: 8px;
color: var(--lt1);
}
.tarifs .sous-titre {
color: var(--lt2);
margin-bottom: 40px;
font-size: 1rem;
display: block;
}
.tarifs-flex {
display: flex;
flex-wrap: wrap;
margin: -8px;
margin-bottom: 28px;
justify-content: center;
}
.tarif-card {
flex: 1 1 calc(25% - 16px);
min-width: 160px;
max-width: 240px;
margin: 8px;
background: var(--lf2);
border: 1px solid var(--lb);
border-radius: 12px;
padding: 32px 20px;
text-align: center;
position: relative;
cursor: pointer;
box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
transition: border-color .2s, box-shadow .2s, transform .15s;
}
.tarif-card:hover {
border-color: var(--or);
box-shadow: 0 4px 24px rgba(200, 169, 110, .18);
transform: translateY(-2px);
}
.tarif-card.recommande {
border-color: var(--or);
background: var(--lf1);
}
.tarif-card.selected {
border-color: var(--or);
box-shadow: 0 0 0 3px rgba(200, 169, 110, .22);
}
.badge-recommande {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: var(--or);
color: var(--fond);
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 20px;
white-space: nowrap;
}
.tarif-periode {
font-size: .82rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--lt3);
margin-bottom: 16px;
}
.tarif-prix {
font-family: 'Playfair Display', serif;
font-size: 2.6rem;
color: var(--lt1);
line-height: 1;
}
.tarif-prix sup {
font-size: 1.1rem;
vertical-align: super;
font-family: 'Source Sans 3', sans-serif;
font-weight: 400;
}
.tarif-label {
font-size: .88rem;
color: var(--lt2);
margin-top: 10px;
line-height: 1.4;
}
.tarifs-cta {
text-align: center;
}
.tarifs-note {
font-size: .88rem;
color: var(--lt3);
margin-top: 14px;
}
/* ══════════════════════════════════════
TÉMOIGNAGES — flex wrap 3 cartes
══════════════════════════════════════ */
.temoignages {
background: var(--lf1);
text-align: center;
}
.temoignages h2 {
font-size: clamp(1.7rem, 3vw, 2.2rem);
margin-bottom: 8px;
color: var(--lt1);
}
.temoignages .sous-titre {
color: var(--lt2);
margin-bottom: 40px;
font-size: 1rem;
display: block;
}
.temoignages-flex {
display: flex;
flex-wrap: wrap;
margin: -9px;
}
.temoignage {
flex: 1 1 calc(33.333% - 18px);
min-width: 240px;
margin: 9px;
background: var(--lf2);
border: 1px solid var(--lb);
border-radius: 12px;
padding: 28px;
text-align: left;
box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
.temoignage .etoiles {
color: var(--or);
font-size: .88rem;
margin-bottom: 12px;
letter-spacing: 2px;
}
.temoignage blockquote {
font-style: italic;
font-size: 1rem;
color: var(--lt2);
margin-bottom: 16px;
line-height: 1.72;
}
.temoignage .auteur-info {
font-size: .9rem;
color: var(--or);
font-weight: 700;
}
.temoignage .auteur-detail {
font-size: .84rem;
color: var(--lt3);
}
/* ══════════════════════════════════════
GARANTIE
══════════════════════════════════════ */
.garantie {
background: var(--lf3);
border-top: 1px solid var(--lb);
border-bottom: 1px solid var(--lb);
text-align: center;
}
.garantie-inner {
max-width: 650px;
margin: 0 auto;
}
.garantie .bouclier {
font-size: 2.6rem;
margin-bottom: 12px;
}
.garantie h2 {
font-size: 1.8rem;
margin-bottom: 12px;
color: var(--lt1);
}
.garantie p {
color: var(--lt2);
font-size: 1.2rem;
line-height: 1.75;
}
.garantie-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 28px;
}
.garantie-badge {
display: flex;
align-items: center;
gap: 8px;
font-size: .95rem;
color: var(--lt2);
font-weight: 500;
}
.garantie-badge .ico {
color: var(--or);
font-weight: 700;
}
/* ══════════════════════════════════════
FAQ
══════════════════════════════════════ */
.faq {
background: var(--lf1);
}
.faq h2 {
text-align: center;
font-size: clamp(1.7rem, 3vw, 2.2rem);
margin-bottom: 44px;
color: var(--lt1);
}
.faq-item {
border-bottom: 1px solid var(--lb);
}
.faq-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
color: var(--lt1);
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
font-weight: 600;
}
.faq-btn:hover {
color: var(--or);
}
.faq-arrow {
flex-shrink: 0;
width: 24px;
height: 24px;
border: 1.5px solid rgba(200, 169, 110, .4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: .72rem;
color: var(--or);
margin-left: 20px;
transition: transform .25s;
}
.faq-item.open .faq-arrow {
transform: rotate(180deg);
}
.faq-body {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
}
.faq-item.open .faq-body {
max-height: 400px;
}
.faq-body p {
font-size: 1rem;
color: var(--lt2);
padding-bottom: 20px;
max-width: 760px;
line-height: 1.8;
}
/* ══════════════════════════════════════
BLOCS TEXTE PLEINE LARGEUR
══════════════════════════════════════ */
.bloc-texte {
background: var(--lf3);
border-top: 1px solid var(--lb);
border-bottom: 1px solid var(--lb);
text-align: center;
}
.bloc-texte-inner {
max-width: 720px;
margin: 0 auto;
}
.bloc-texte h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--lt1);
margin-bottom: 12px;
}
.bloc-texte .bloc-sous-titre {
font-size: 1.2rem;
color: var(--or);
font-style: italic;
font-family: 'Playfair Display', serif;
margin-bottom: 28px;
display: block;
}
.bloc-texte p {
font-size: 1.2rem;
color: var(--lt2);
line-height: 1.85;
text-align: left;
}
.bloc-texte p+p {
margin-top: 16px;
}
.portrait-alexandre {
display: block;
width: 140px;
height: 140px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 1.5rem;
}
/* ══════════════════════════════════════
SECTION LÉGALE — flex wrap 3 colonnes
══════════════════════════════════════ */
.legal-section {
background: var(--lf2);
border-top: 1px solid var(--lb);
}
.legal-section h2 {
font-size: clamp(1.4rem, 2.5vw, 1.9rem);
color: var(--lt1);
margin-bottom: 6px;
text-align: center;
}
.legal-subtitle {
color: var(--lt3);
font-size: .95rem;
margin-bottom: 36px;
text-align: center;
display: block;
}
.legal-flex {
display: flex;
flex-wrap: wrap;
margin: -16px;
margin-top: 24px;
}
.legal-block {
flex: 1 1 calc(33.333% - 32px);
min-width: 220px;
margin: 16px;
}
.legal-block h3 {
font-family: 'Playfair Display', serif;
font-size: 1rem;
color: var(--or);
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--lb);
}
.legal-block p,
.legal-block ul {
font-size: .93rem;
color: var(--lt3);
line-height: 1.8;
}
.legal-block ul {
padding-left: 16px;
}
.legal-block ul li {
margin-bottom: 4px;
}
.legal-block a {
color: var(--or);
font-size: .93rem;
}
/* ══════════════════════════════════════
CTA FINAL
══════════════════════════════════════ */
.cta-final {
background: linear-gradient(160deg, #1A1625 0%, #0D0D1A 100%);
text-align: center;
padding: 88px 0;
border-top: 1px solid rgba(200, 169, 110, .15);
}
.cta-final h2 {
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
max-width: 570px;
margin: 0 auto 16px;
}
.cta-final p {
opacity: .78;
font-size: 1.05rem;
max-width: 440px;
margin: 0 auto 36px;
line-height: 1.75;
}
/* ══════════════════════════════════════
FOOTER
══════════════════════════════════════ */
footer {
background: var(--lf3);
border-top: 1px solid var(--lb);
padding: 28px 0;
text-align: center;
font-size: .85rem;
color: var(--lt3);
}
footer a {
color: var(--lt3);
}
footer a:hover {
color: var(--or);
}
footer .sep {
margin: 0 10px;
}
/* ══════════════════════════════════════
RESPONSIVE
══════════════════════════════════════ */
/* Tablette ≤ 960px */
@media (max-width:960px) {
:root {
--logo-h: 88px;
--logo-top: 10px;
--logo-below: 26px;
--logo-left: 24px;
}
.container {
padding: 0 24px;
}
.header-inner {
padding: 0 24px;
}
.header-nav {
display: none;
}
.burger {
display: flex;
}
/* Hero */
.hero {
padding-top: calc(var(--logo-below) + 28px);
padding-bottom: 88px;
}
.hero .container {
flex-direction: column;
gap: 0;
}
.hero-left {
flex-direction: row;
align-items: center;
gap: 20px;
}
.hero-planetes {
position: static;
transform: none;
height: 280px;
opacity: .5;
flex-shrink: 0;
}
.hero-left-text {
padding-left: 0;
}
.hero-right {
width: 100%;
height: 240px;
margin-top: 36px;
}
.screen-1 {
width: 130px;
height: 234px;
left: 4%;
}
.screen-2 {
width: 150px;
height: 270px;
}
.screen-3 {
width: 130px;
height: 234px;
right: 4%;
}
.hero-zodiac {
width: 300px;
height: 300px;
right: -30px;
bottom: -30px;
}
/* Puissance → 2 col wrappé */
.puissance-flex {
flex-wrap: wrap;
}
.puissance-card {
flex: 1 1 calc(50% - 1px);
border-right: none;
border-bottom: 1px solid var(--lb2);
}
.puissance-card:last-child {
border-bottom: none;
}
/* Feature blocks → colonne */
.feature-block .container {
flex-direction: column;
gap: 28px;
}
.feature-block.reverse .container {
flex-direction: column;
}
.feature-block-img img {
height: 260px;
}
/* Tarifs → 2 par ligne */
.tarif-card {
flex: 1 1 calc(50% - 16px);
max-width: none;
}
/* Manifeste valeurs → colonne */
.manifeste-valeurs {
flex-direction: column;
}
.manifeste-valeur {
border-right: none;
border-bottom: 1px solid var(--lb);
}
.manifeste-valeur:last-child {
border-bottom: none;
}
}
/* Mobile portrait ≤ 520px */
@media (max-width:520px) {
:root {
--logo-h: 74px;
--logo-top: 8px;
--logo-below: 10px;
--logo-left: 16px;
}
.container {
padding: 0 16px;
}
.header-inner {
padding: 0 16px;
}
section {
padding: 48px 0;
}
.feature-block {
padding: 48px 0;
}
/* Hero */
.hero {
padding-top: calc(var(--logo-below) + 20px);
padding-bottom: 72px;
}
.hero h1 {
font-size: clamp(1.8rem, 8vw, 2.3rem);
}
.hero p.lead {
font-size: 1rem;
}
.hero-left {
gap: 12px;
}
.hero-planetes {
height: 180px;
opacity: .45;
}
.hero-right {
height: 190px;
margin-top: 28px;
}
.screen-1 {
width: 106px;
height: 190px;
left: 2%;
}
.screen-2 {
width: 122px;
height: 220px;
}
.screen-3 {
width: 106px;
height: 190px;
right: 2%;
}
.hero-zodiac {
width: 200px;
height: 200px;
}
/* Toutes les listes → 1 colonne */
.puissance-card {
flex: 1 1 100%;
}
.obtenez-card {
flex: 1 1 100%;
}
.feature-item {
flex: 1 1 100%;
}
.tarif-card {
flex: 1 1 100%;
max-width: 100%;
}
.temoignage {
flex: 1 1 100%;
}
.legal-block {
flex: 1 1 100%;
}
/* Feature blocks */
.feature-block-img img {
height: 200px;
}
/* Vidéo */
.video-bloc {
padding: 48px 0;
}
.video-accroche {
font-size: .97rem;
margin-bottom: 28px;
}
/* Garantie */
.garantie-badges {
justify-content: flex-start;
}
/* CTA */
.tarifs-cta .btn-primary {
width: 100%;
text-align: center;
}
.cta-final h2 {
font-size: 1.7rem;
}
.cta-final .btn {
width: 100%;
text-align: center;
}
/* Manifeste */
.manifeste-corps {
padding-left: 16px;
}
/* Footer */
footer .sep {
display: none;
}
footer a {
display: block;
margin: 5px 0;
}
}
/* Très petit ≤ 360px */
@media (max-width:360px) {
:root {
--logo-h: 66px;
}
.hero h1 {
font-size: 1.65rem;
}
.hero-planetes {
height: 150px;
}
}
/* ══════════════════════════════════════
PAGE HERO — en-tête des pages intérieures
Utilisé sur : mentions légales, CGU, et toute page secondaire
══════════════════════════════════════ */
.page-hero {
background: linear-gradient(160deg, #1A1625 0%, #0D0D1A 100%);
padding: calc(var(--logo-below) + 48px) 0 56px;
text-align: center;
border-bottom: 1px solid rgba(200, 169, 110, .12);
}
.page-hero .tag {
margin-bottom: 16px;
}
.page-hero h1 {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
color: var(--blanc);
margin-bottom: 12px;
}
.page-hero p {
color: var(--gris);
font-size: 1rem;
max-width: 480px;
margin: 0 auto;
}
/* Logo centré dans tout bandeau bleu */
.hero-logo {
display: block;
margin: 0 auto 24px;
height: 64px;
width: auto;
position: relative;
z-index: 1;
}
/* ══════════════════════════════════════
PAGES LÉGALES — corps, articles, contact
Utilisé sur : mentions légales, CGU
══════════════════════════════════════ */
.legal-body {
background: var(--lf1);
padding: 48px 0 64px;
}
.legal-intro {
max-width: 800px;
margin: 0 auto 36px;
padding: 16px 20px;
background: var(--lf3);
border-left: 3px solid var(--or);
border-radius: 0 8px 8px 0;
font-size: 1rem;
color: var(--lt3);
font-style: italic;
line-height: 1.7;
}
.legal-article {
max-width: 800px;
margin: 0 auto 28px;
padding-bottom: 28px;
border-bottom: 1px solid var(--lb);
}
.legal-article:last-child {
border-bottom: none;
margin-bottom: 0;
}
.legal-article-num {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--or);
margin-bottom: 4px;
}
.legal-article h2 {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--lt1);
margin-bottom: 12px;
}
.legal-article p {
font-size: 1rem;
color: var(--lt2);
line-height: 1.75;
margin-bottom: 10px;
}
.legal-article ul {
font-size: 1rem;
color: var(--lt2);
line-height: 1.75;
padding-left: 20px;
margin-bottom: 10px;
}
.legal-article li {
margin-bottom: 4px;
}
.legal-article strong {
color: var(--lt1);
}
.legal-article a {
color: var(--or);
}
.contact-block {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.contact-item {
flex: 1 1 calc(33% - 16px);
min-width: 160px;
background: var(--lf2);
border: 1px solid var(--lb);
border-radius: 10px;
padding: 16px 18px;
}
.contact-item h4 {
font-family: 'Playfair Display', serif;
font-size: .95rem;
color: var(--or);
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--lb);
}
.contact-item p {
font-size: .9rem;
color: var(--lt3);
line-height: 1.65;
margin: 0;
}
.contact-item a {
color: var(--or);
}
/* ══════════════════════════════════════
PAGE INSCRIPTION
══════════════════════════════════════ */
.inscription-hero {
background: linear-gradient(160deg, #1A1625 0%, #0D0D1A 100%);
padding: calc(var(--logo-below) + 48px) 0 56px;
text-align: center;
border-bottom: 1px solid rgba(200, 169, 110, .12);
}
.inscription-hero .tag {
margin-bottom: 16px;
}
.inscription-hero h1 {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
color: var(--blanc);
margin-bottom: 12px;
}
.inscription-hero p {
color: var(--gris);
font-size: 1rem;
max-width: 500px;
margin: 0 auto;
}
.etapes-bar {
background: var(--lf3);
border-bottom: 1px solid var(--lb);
padding: 20px 0;
}
.etapes-list {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
list-style: none;
flex-wrap: wrap;
}
.etape-item {
display: flex;
align-items: center;
gap: 10px;
padding: 0 20px;
}
.etape-item+.etape-item::before {
content: '→';
color: var(--lt3);
font-size: .8rem;
margin-right: 20px;
}
.etape-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--lb2);
border: 1.5px solid var(--or);
color: var(--or);
font-size: .78rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.etape-item.active .etape-num {
background: var(--or);
color: var(--fond);
}
.etape-label {
font-size: .88rem;
color: var(--lt2);
font-weight: 600;
}
.etape-item.active .etape-label {
color: var(--lt1);
}
.inscription-body {
background: var(--lf1);
padding: 60px 0 80px;
}
.inscription-layout {
display: flex;
flex-direction: row;
gap: 48px;
align-items: flex-start;
}
.form-col {
flex: 1 1 0;
min-width: 0;
}
.form-section-title {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
color: var(--lt1);
margin: 0 0 24px;
padding-bottom: 12px;
border-bottom: 1px solid var(--lb2);
display: flex;
align-items: center;
gap: 12px;
}
.form-section-title .step-badge {
width: 24px;
height: 24px;
background: var(--or);
color: var(--fond);
border-radius: 50%;
font-size: .75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.form-row {
display: flex;
gap: 16px;
margin-bottom: 0;
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 18px;
flex: 1;
}
.form-group.shrink {
flex: 0 0 auto;
}
label {
font-size: .88rem;
font-weight: 600;
color: var(--lt2);
margin-bottom: 6px;
letter-spacing: .3px;
}
label .req {
color: var(--or);
margin-left: 2px;
}
.supObligatoire
{
display: none;
visibility: hidden;
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
width: 100%;
padding: 11px 14px;
background: var(--lf2);
border: 1px solid var(--lb2);
border-radius: 8px;
color: var(--lt1);
font-family: 'Source Sans 3', sans-serif;
font-size: .97rem;
transition: border-color .15s, box-shadow .15s;
-webkit-appearance: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--or);
box-shadow: 0 0 0 3px rgba(200, 169, 110, .12);
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder {
color: var(--lt3);
opacity: .7;
}
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8099' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
.rgpd-notice {
background: var(--lf3);
border: 1px solid var(--lb);
border-left: 3px solid var(--or);
border-radius: 0 8px 8px 0;
padding: 14px 18px;
font-size: .85rem;
color: var(--lt3);
line-height: 1.65;
margin-bottom: 16px;
}
.rgpd-notice strong {
color: var(--lt2);
}
.checkbox-group {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
.checkbox-group input[type="checkbox"] {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
accent-color: var(--or);
cursor: pointer;
}
.checkbox-group label {
font-size: .88rem;
font-weight: 400;
color: var(--lt2);
cursor: pointer;
margin-bottom: 0;
}
.checkbox-group label a {
color: var(--or);
}
.offres-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 24px;
}
.offre-option {
flex: 1 1 calc(50% - 5px);
min-width: 140px;
}
.offre-option input[type="radio"] {
display: none;
}
.offre-option label {
display: block;
padding: 14px 16px;
background: var(--lf2);
border: 1.5px solid var(--lb2);
border-radius: 10px;
cursor: pointer;
transition: border-color .15s, background .15s;
text-align: center;
margin-bottom: 0;
}
.offre-option input[type="radio"]:checked+label {
border-color: var(--or);
background: rgba(200, 169, 110, .06);
}
.offre-option label:hover {
border-color: rgba(200, 169, 110, .5);
}
.offre-name {
display: block;
font-family: 'Playfair Display', serif;
font-size: 1rem;
color: var(--lt1);
margin-bottom: 4px;
font-weight: 600;
}
.offre-price {
display: block;
font-size: 1.3rem;
font-weight: 700;
color: var(--or);
font-family: 'Playfair Display', serif;
}
.offre-note {
display: block;
font-size: .78rem;
color: var(--lt3);
margin-top: 3px;
font-weight: 400;
}
.captcha-wrapper {
margin-bottom: 20px;
}
.btn-submit {
width: 100%;
padding: 16px 24px;
font-size: 1.05rem;
letter-spacing: .3px;
}
.submit-note {
font-size: .82rem;
color: var(--lt3);
text-align: center;
margin-top: 10px;
}
.benefits-col {
flex: 0 0 340px;
width: 340px;
}
.benefits-sticky {
position: sticky;
top: 24px;
}
.benefit-card {
background: var(--lf2);
border: 1px solid var(--lb);
border-radius: 12px;
padding: 28px;
margin-bottom: 20px;
}
.benefit-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1rem;
color: var(--lt1);
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--lb);
}
.benefit-list {
list-style: none;
}
.benefit-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .9rem;
color: var(--lt2);
padding: 6px 0;
border-bottom: 1px solid rgba(200, 169, 110, .07);
line-height: 1.4;
}
.benefit-list li:last-child {
border-bottom: none;
}
.benefit-list .ico {
color: var(--or);
flex-shrink: 0;
font-size: .85rem;
margin-top: 2px;
}
.promo-badge {
background: linear-gradient(135deg, #1A1625, #0D0D1A);
border: 1px solid rgba(200, 169, 110, .3);
border-radius: 12px;
padding: 20px 22px;
text-align: center;
margin-bottom: 20px;
}
.promo-badge .promo-label {
font-size: .75rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--or);
margin-bottom: 8px;
display: block;
}
.promo-badge .promo-prix {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--blanc);
}
.promo-badge .promo-prix s {
font-size: 1rem;
color: var(--lt3);
margin-left: 6px;
}
.promo-badge .promo-detail {
font-size: .82rem;
color: var(--lt3);
margin-top: 6px;
display: block;
}
.secure-logos {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 16px;
background: var(--lf3);
border: 1px solid var(--lb);
border-radius: 8px;
flex-wrap: wrap;
}
.secure-item {
display: flex;
align-items: center;
gap: 6px;
font-size: .8rem;
color: var(--lt3);
}
.secure-item .s-ico {
color: var(--or);
font-size: .9rem;
}
/* ══════════════════════════════════════
RESPONSIVE — pages intérieures
══════════════════════════════════════ */
@media (max-width:960px) {
.page-hero {
padding-top: calc(var(--logo-below) + 32px);
}
.legal-body {
padding: 36px 0 48px;
}
.inscription-hero {
padding-top: calc(var(--logo-below) + 32px);
}
/* Décors bandeaux intérieurs — contre-spécification du position:static global */
.page-hero .hero-planetes,
.inscription-hero .hero-planetes {
position: absolute;
transform: translateY(-50%);
height: 200px;
opacity: .15;
flex-shrink: unset;
}
.page-hero .hero-zodiac,
.inscription-hero .hero-zodiac {
width: 260px;
height: 260px;
right: -20px;
bottom: -20px;
}
.inscription-layout {
flex-direction: column;
}
.benefits-col {
flex: none;
width: 100%;
}
.benefits-sticky {
position: static;
}
.etape-item+.etape-item::before {
margin-right: 12px;
}
.etape-item {
padding: 0 12px;
}
}
@media (max-width:520px) {
.page-hero {
padding-top: calc(var(--logo-below) + 20px);
}
.page-hero h1 {
font-size: 1.6rem;
}
.legal-body {
padding: 28px 0 40px;
}
.legal-article {
margin-bottom: 20px;
padding-bottom: 20px;
}
.legal-article h2 {
font-size: 1.05rem;
}
.legal-article p,
.legal-article ul {
font-size: .97rem;
}
.contact-item {
flex: 1 1 100%;
}
.inscription-hero {
padding-top: calc(var(--logo-below) + 20px);
}
.inscription-body {
padding: 40px 0 60px;
}
/* Décors bandeaux intérieurs */
.page-hero .hero-planetes,
.inscription-hero .hero-planetes {
position: absolute;
transform: translateY(-50%);
height: 120px;
opacity: .12;
flex-shrink: unset;
}
.page-hero .hero-zodiac,
.inscription-hero .hero-zodiac {
width: 140px;
height: 140px;
right: -10px;
bottom: -10px;
}
.hero-logo {
height: 48px;
margin-bottom: 16px;
}
.form-row {
flex-direction: column;
gap: 0;
}
.offre-option {
flex: 1 1 100%;
}
.etapes-list {
justify-content: flex-start;
gap: 4px;
}
.etape-item+.etape-item::before {
display: none;
}
.etape-item {
padding: 0 8px;
}
.etape-label {
font-size: .78rem;
}
}