) : on neutralise les styles de lien par défaut
pour un rendu identique aux autres cartes. */
text-decoration: none;
color: inherit;
cursor: pointer;
}
.method-step--1::before {
opacity: 1;
top: 8%;
bottom: 8%;
}
.method-step:hover::before {
opacity: 1;
top: 8%;
bottom: 8%;
}
/* ─── COULEURS PAR ÉTAPE ─── */
.method-step--1 { --ms-color: #3b82f6; }
.method-step--2 { --ms-color: #3b82f6; }
.method-step--3 { --ms-color: #8b5cf6; }
.method-step--4 { --ms-color: #3b82f6; }
.method-step--5 { --ms-color: #3b82f6; }
.method-step--6 { --ms-color: #8b5cf6; }
.method-step-badge {
position: absolute;
top: 12px;
right: 12px;
cursor: help;
}
/* .method-step a overflow:hidden (accent gauche + coins arrondis) : sans
ça, la bulle de tooltip du badge — qui doit dépasser vers le haut —
serait rognée. On ne relâche le clip qu'au survol/focus de la carte. */
.method-step:hover,
.method-step:focus-within {
overflow: visible;
}
.method-step-badge[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 10px);
right: 0;
width: max-content;
max-width: 220px;
background: rgba(10,14,30,.97);
border: 1px solid rgba(255,255,255,.10);
color: #fff;
border-radius: 8px;
font-size: .72rem;
font-weight: 500;
line-height: 1.4;
text-align: left;
white-space: normal;
padding: 8px 12px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
transform: translateY(4px);
z-index: 30;
}
.method-step-badge[data-tooltip]:hover::after,
.method-step-badge[data-tooltip]:focus-visible::after {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* ─── NUMÉRO DÉCORATIF ─── */
.method-step-num {
font-family: "Space Grotesk", sans-serif;
font-size: clamp(1.8rem, 3vh, 2.6rem);
font-weight: 800;
color: var(--ms-color);
opacity: .16;
line-height: 1;
flex-shrink: 0;
user-select: none;
transition: opacity .25s ease;
}
.method-step:hover .method-step-num {
opacity: .30;
}
/* ─── CORPS ─── */
.method-step-body {
flex: 1;
min-width: 0;
}
.method-step-body h3 {
font-family: "Space Grotesk", sans-serif;
font-size: .96rem;
font-weight: 700;
color: #fff;
margin: 0 0 6px;
line-height: 1.25;
background: none;
box-shadow: none;
padding: 0;
text-shadow: 0 0 10px rgba(var(--header-accent),.20);
}
.method-step-body p {
font-size: .84rem;
color: rgba(255,255,255,.50);
line-height: 1.5;
margin: 0;
}
.method-step-link {
display: inline-block;
margin-top: 8px;
font-size: .78rem;
font-weight: 600;
/* Contraste relevé (.45 -> .70) : c'est un vrai lien cliquable, pas un
simple texte d'ambiance — demande explicite "améliore ce qui est
visuellement fade". */
color: rgba(255,255,255,.70);
text-decoration: underline;
text-decoration-color: rgba(255,255,255,.22);
text-underline-offset: 3px;
transition: color .2s ease, text-decoration-color .2s ease;
}
.method-step-link:hover,
.method-step-link:focus-visible {
color: var(--ms-color);
text-decoration-color: var(--ms-color);
}
/* ─── DIVIDER ───
L'espacement de ce divider (comme des 6 autres de la page) est géré par
la règle unique .site-main .section-divider plus bas dans ce fichier. */
/* ===================== PROBLEM ===================== */
.problem {
/* min-height:100dvh + flex column, même principe que .why-target /
.modules / .home-service-section : .problem-layout (flex:1, cf. plus
bas) remplit l'espace disponible et le divider reste juste au-dessus
de la barre de couleur (border-top) qui ouvre la section suivante.
Demande explicite (1ère passe) : "Sans présence digitale a besoin
d'être légèrement réduite en hauteur" — 100dvh -> 92dvh en min-height
(seule cette section, les autres gardent 100dvh).
Demande explicite (2e passe, bug réel constaté) : "j'aimerais que
l'on puisse voir le divider suivant" — un min-height ne PLAFONNE pas
la hauteur, il ne fait que fixer un minimum ; comme le contenu (titre
+ 2 groupes de 3 points) dépassait déjà 92dvh, le divider en bas se
retrouvait hors écran malgré ce changement. height (au lieu de
min-height) + overflow:hidden plafonne réellement la section, même
principe que .sol-off/.why-target plus haut — combiné au resserrement
des espacements internes de .problem-content ci-dessous pour que le
contenu tienne sans être rogné. */
height: 94dvh;
overflow: hidden;
/* demande explicite : réduction de largeur -10%/côté, cf. commentaire
détaillé sur .method plus haut. */
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
/* padding-top passé de 20px à la même échelle que les sections voisines
(demande explicite : "contenu trop collé en haut") : 20px suffisait
avant l'ajout du bandeau .section-sas en haut de section, désormais
trop court. */
padding: clamp(90px, 10vh, 120px) 0 clamp(28px, 4vh, 44px);
position: relative;
/* demande explicite : "uniformise le bg [des 7 sections de la fusée] à
la façon des sites évolutifs construits autour de modules" — reprend
exactement le fond de main .modules, cf. commentaire détaillé sur
.method plus haut. */
background:
radial-gradient(ellipse at 0% 100%, rgba(var(--header-accent),.18) 0%, transparent 45%),
radial-gradient(ellipse at 100% 0%, rgba(var(--header-accent),.10) 0%, transparent 45%),
radial-gradient(ellipse at 50% 50%, rgba(var(--header-accent),.05) 0%, transparent 65%),
repeating-linear-gradient(
0deg,
rgba(255,255,255,.025) 0,
rgba(255,255,255,.025) 1px,
transparent 1px,
transparent 44px
),
repeating-linear-gradient(
90deg,
rgba(255,255,255,.018) 0,
rgba(255,255,255,.018) 1px,
transparent 1px,
transparent 44px
),
rgba(7,10,18,.92);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-top: 1px solid rgba(var(--header-accent),.14);
border-bottom: 1px solid rgba(var(--header-accent),.14);
}
.problem::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent 0,
transparent 3px,
rgba(0,0,0,.03) 3px,
rgba(0,0,0,.03) 4px
);
pointer-events: none;
z-index: 0;
}
/* ─── LAYOUT ─── */
.problem-layout {
position: relative;
z-index: 1;
display: flex;
/* Demande explicite ("Sans présence digitale" : "image à gauche, grid
à droite") : le HTML garde l'ordre .problem-content puis
.problem-visual (inchangé, important pour l'ordre de lecture au
clavier/lecteur d'écran — le texte doit rester lu avant l'image
décorative), row-reverse inverse seulement l'ordre VISUEL en
desktop. Le mobile garde sa propre règle column-reverse (cf.
responsive.css, non affectée par ce changement). */
flex-direction: row-reverse;
/* center -> flex-end (demande explicite : "réduit au maximum l'écart
avec le divider rockette"), même logique que .sol-off-inner : colle
le contenu en bas de .problem-layout, contre le divider. */
align-items: flex-end;
gap: 100px;
max-width: 1300px;
margin: 0 auto;
/* réduit (demande explicite : "voir le divider suivant") : la section
est désormais plafonnée à height:94dvh (cf. .problem plus haut), ce
petit espace en moins aide le contenu à tenir sans être rogné. */
margin-top: 20px;
padding: 0 clamp(1rem, 3vw, 2rem);
flex: 1;
min-height: 0;
width: 100%;
box-sizing: border-box;
}
.problem .section-divider {
flex-shrink: 0;
}
/* ─── CONTENU ─── */
.problem-content {
flex: 1;
min-width: 0;
/* padding vertical resserré (demande explicite : "voir le divider
suivant"), cf. .problem plus haut. */
padding: 24px 32px;
border-radius: 18px;
background: rgba(255,255,255,.032);
border: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.problem-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(to right, transparent, rgba(var(--header-accent),.45), rgba(var(--accent-harmony-2),.35), transparent);
}
.problem-content h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
line-height: 1.25;
/* réduit (demande explicite : "voir le divider suivant"), cf. .problem
plus haut. */
margin: 0 0 .7rem;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.problem-content p {
color: rgba(255,255,255,.60);
font-size: .96rem;
line-height: 1.75;
/* réduit (demande explicite : "voir le divider suivant"), cf. .problem
plus haut. */
margin: 0 0 .5rem;
}
/* ─── RÉSULTAT ─── */
.problem-result {
/* réduits (demande explicite : "voir le divider suivant"), cf.
.problem plus haut. */
margin-top: .9rem !important;
font-weight: 700 !important;
font-size: 1.05rem !important;
color: rgb(var(--header-accent)) !important;
padding: 8px 14px 8px 16px !important;
border-left: 3px solid rgb(var(--header-accent)) !important;
border-radius: 0 8px 8px 0 !important;
background: rgba(var(--header-accent),.07) !important;
line-height: 1.5 !important;
margin-bottom: 0 !important;
}
/* ─── POINTS ─── */
.problem-points {
list-style: none;
padding: 0;
/* réduit (demande explicite : "voir le divider suivant"), cf. .problem
plus haut. */
margin: .8rem 0 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.problem-points li {
display: flex;
align-items: flex-start;
gap: 10px;
/* padding vertical réduit (demande explicite : "voir le divider
suivant"), cf. .problem plus haut. */
padding: 8px 16px;
border-radius: 10px;
background: rgba(255,255,255,.028);
border: 1px solid rgba(255,255,255,.06);
color: rgba(255,255,255,.58);
font-size: .92rem;
line-height: 1.55;
transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.problem-points li::before {
content: "→";
color: rgb(var(--header-accent));
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.problem-points li:hover {
background: rgba(var(--header-accent),.07);
border-color: rgba(var(--header-accent),.18);
color: rgba(255,255,255,.78);
transform: translateX(4px);
}
/* ─── VISUEL ─── */
.problem-visual {
flex: 0 0 420px;
text-align: center;
position: relative;
z-index: 1;
/* demande explicite : "descendre un peu l'image" — align-items:flex-end
sur .problem-layout ancre déjà le BAS de l'image sur la même ligne
que le texte ; un margin-top n'aurait ici aucun effet visuel (il
n'ajoute que du vide au-dessus, l'ancrage flex-end recolle quand même
le bas de la boîte à la même ligne). translateY, purement visuel, la
décale réellement vers le bas. */
transform: translateY(52px);
}
.problem-visual img {
width: 100%;
transform: scale(1.04);
filter: drop-shadow(0 24px 48px rgba(0,0,0,.40))
drop-shadow(0 0 40px rgba(var(--header-accent),.12));
transition: transform .4s ease, filter .4s ease;
}
.problem-visual:hover img {
transform: scale(1.07);
filter: drop-shadow(0 28px 56px rgba(0,0,0,.45))
drop-shadow(0 0 56px rgba(var(--header-accent),.20));
}
.problem-visual-caption {
margin-top: 24px;
font-size: .82rem;
color: rgba(255,255,255,.38);
line-height: 1.5;
letter-spacing: .02em;
}
/* ─── DIVIDER ───
L'espacement est géré par .site-main .section-divider (règle unique pour
les 8 dividers de la page) ; on ne garde ici que le z-index. */
.problem .section-divider {
position: relative;
z-index: 1;
}
/* Écart avec le contenu (.problem-layout) légèrement réduit par rapport à
l'écart uniforme des 8 dividers (spécificité renforcée pour primer sur
.site-main .section-divider ci-dessous). */
.site-main .problem .section-divider {
margin-top: clamp(14px, 2.5vh, 26px);
}
/* ===================== WHY-TARGET ===================== */
.why-target {
/* min-height:100dvh + flex column, même principe que .modules plus
haut : .why-target .container (flex:1, cf. plus bas) remplit
l'espace disponible et le divider reste juste au-dessus de la barre
de couleur (border-top) qui ouvre la section suivante — d'où le
padding-bottom réduit par rapport au padding-top. */
min-height: 100dvh;
/* demande explicite : réduction de largeur -10%/côté, cf. commentaire
détaillé sur .method plus haut. */
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
padding: 80px 0 clamp(44px, 6vh, 64px);
position: relative;
overflow: hidden;
/* demande explicite : "uniformise le bg [des 7 sections de la fusée] à
la façon des sites évolutifs construits autour de modules" — reprend
exactement le fond de main .modules, cf. commentaire détaillé sur
.method plus haut. */
background:
radial-gradient(ellipse at 0% 100%, rgba(var(--header-accent),.18) 0%, transparent 45%),
radial-gradient(ellipse at 100% 0%, rgba(var(--header-accent),.10) 0%, transparent 45%),
radial-gradient(ellipse at 50% 50%, rgba(var(--header-accent),.05) 0%, transparent 65%),
repeating-linear-gradient(
0deg,
rgba(255,255,255,.025) 0,
rgba(255,255,255,.025) 1px,
transparent 1px,
transparent 44px
),
repeating-linear-gradient(
90deg,
rgba(255,255,255,.018) 0,
rgba(255,255,255,.018) 1px,
transparent 1px,
transparent 44px
),
rgba(7,10,18,.92);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-top: 1px solid rgba(var(--header-accent),.14);
border-bottom: 1px solid rgba(var(--header-accent),.14);
}
.why-target::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent 0,
transparent 3px,
rgba(0,0,0,.03) 3px,
rgba(0,0,0,.03) 4px
);
pointer-events: none;
z-index: 0;
}
.why-target .container {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem);
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
/* center -> flex-end, cf. .method .container plus haut : réduit au
maximum l'écart avec le divider, demande explicite. */
justify-content: flex-end;
width: 100%;
}
/* ===================== CTA "Lancer mon site" — section dédiée =====================
Extrait de #why-target (où le CTA "trou noir" était intégré en bas de la
carte 2 colonnes) : sa propre section désormais, séparée de #why-target
par un écart important (gros padding-top), avec pour seul fond
bgsiteindex.png (+ overlay sombre pour la lisibilité) — sans les halos
radiaux ni la grille de #why-target. overflow:hidden conservé car
nécessaire pour rogner le disque du "trou noir" (.why-target-cta-halo)
s'il déborde. */
.why-cta-section {
/* Padding haut/bas ASYMÉTRIQUE (demande explicite : "garde le même
espace entre la FAQ et le trou noir mais rapproche les 2 dernières
sections du trou noir") — le haut garde l'écart doublé d'origine
(FAQ -> trou noir inchangé), seul le bas est nettement réduit pour
que #new-hebergement et la newsletter se rapprochent du trou noir. */
min-height: 100dvh;
display: flex;
flex-direction: column;
padding: clamp(1280px, 144vw, 1920px) 0 clamp(100px, 12vw, 180px);
position: relative;
overflow: hidden;
/* Fond propre retiré (demande explicite : "je ne veux que le bg de la
page ici") : cette section repeignait sa propre image + voile sombre
par-dessus le fond fixe déjà posé une fois pour toutes sur
.site-main::before — désormais transparente, seul ce fond fixe
(bgsiteindex.png + voile) reste visible, à l'identique du reste de la
page.
border-top retiré (demande explicite, bug réel constaté : "il y a une
ligne bleue horizontale qui traverse tout l'écran" en haut de cette
section) : cette section n'est PAS une des 7 sections "dans le
vaisseau" (donc pas réduite à 90% comme elles), le trait restait
ainsi visible sur toute la largeur de l'écran — incohérent avec le
reste du fond déjà retiré ("juste le bg de la page ici"). */
}
.why-cta-section .container {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem);
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.why-target .section-divider {
flex-shrink: 0;
}
/* ─── GRILLE 2 COLONNES ─── */
.why-target-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
/* Fusion "Pourquoi choisir" + "Pour qui" en une seule carte à 2 colonnes,
uniquement dans la section "why-target" — scopé par #why-target pour ne
pas affecter .home-service-dual-grid (Hébergement/Accompagnement) ni les
cartes solo (refonte/programmation) qui réutilisent aussi .why-box /
.target-box plus bas dans accueil.php. Les 2 boîtes perdent leur fond/
bordure propres et deviennent de simples colonnes de la carte commune,
séparées par un léger trait vertical (border-right sur .why-box). */
#why-target .why-target-grid {
gap: 0;
padding: 36px 0;
border-radius: 18px;
background: rgba(255,255,255,.032);
border: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#why-target .why-box,
#why-target .target-box {
background: none;
border: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 0;
padding: 0 36px;
}
#why-target .why-box {
border-right: 1px solid rgba(255,255,255,.09);
}
/* ─── BOÎTES ─── */
.why-box,
.target-box {
padding: 32px 28px;
border-radius: 18px;
background: rgba(255,255,255,.032);
border: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
overflow: hidden;
}
.why-box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(to right, transparent, rgba(var(--header-accent),.55), transparent);
}
.target-box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(to right, transparent, rgba(var(--accent-harmony-1),.55), transparent);
}
/* ─── LABEL / BADGE ─── */
.wt-box-label {
display: flex;
align-items: center;
gap: 10px;
}
.wt-badge {
font-size: 1rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
letter-spacing: .05em;
line-height: 1;
}
.wt-badge--blue {
color: rgb(var(--header-accent));
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.28);
box-shadow: 0 0 12px rgba(var(--header-accent),.15);
}
.wt-badge--cyan {
color: #3b82f6;
background: rgba(59,130,246,.10);
border: 1px solid rgba(59,130,246,.28);
box-shadow: 0 0 12px rgba(59,130,246,.15);
}
.wt-badge--violet {
color: #8b5cf6;
background: rgba(139,92,246,.10);
border: 1px solid rgba(139,92,246,.28);
box-shadow: 0 0 12px rgba(139,92,246,.15);
}
/* ─── TITRES ─── */
.why-box h2,
.target-box h2 {
font-size: clamp(1.3rem, 2.2vw, 1.75rem);
font-weight: 700;
line-height: 1.25;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.target-box h2 {
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
}
/* ─── LISTES ─── */
.feature-list {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border-radius: 12px;
background: rgba(255,255,255,.026);
border: 1px solid rgba(255,255,255,.06);
color: rgba(255,255,255,.62);
font-size: .92rem;
line-height: 1.55;
transition: background .22s ease, border-color .22s ease, transform .22s ease, color .22s ease;
}
.feature-list--why li::before {
content: "✓";
color: rgb(var(--header-accent));
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.feature-list--target li::before {
content: "→";
color: rgb(var(--accent-harmony-1));
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.feature-list--why li:hover {
background: rgba(var(--header-accent),.07);
border-color: rgba(var(--header-accent),.18);
color: rgba(255,255,255,.82);
transform: translateX(4px);
}
.feature-list--target li:hover {
background: rgba(var(--accent-harmony-1),.07);
border-color: rgba(var(--accent-harmony-1),.18);
color: rgba(255,255,255,.82);
transform: translateX(4px);
}
/* ─── CTA INTÉGRÉ ─── */
.why-target-cta {
text-align: center;
margin-top: 5px;
}
.wt-cta-sep {
width: 1px;
height: 24px;
background: linear-gradient(to bottom, rgba(var(--header-accent),.40), transparent);
margin: 0 auto 24px;
}
.why-target-cta h2 {
font-size: clamp(1.5rem, 2.8vw, 2.1rem);
font-weight: 700;
/* Décalage vers le bas (demande explicite, plusieurs ajustements
successifs : texte+CTA trop hauts par rapport au centre du disque). */
margin: 80px 0 16px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Annule le halo générique "contour" posé sur tous les h2 du site
(règle h2{} globale) : ce titre flotte sur le trou noir ci-dessous,
sans contour rectangulaire autour du texte (cf. .services-cta h2,
même traitement). */
box-shadow: none;
}
/* ─── CTA "Lancer mon site" : effet "trou noir" ───
Même technique que .services-cta-halo (services.php), à échelle réduite
puisque ce CTA est un bloc compact intégré à la section #why-target et
non une section pleine page dédiée. Réutilise les keyframes globales
blackHoleSpin/blackHolePulse définies plus bas dans ce fichier. Aucun
overflow:hidden ici : la section #why-target (qui a déjà overflow:hidden)
se charge de rogner le disque s'il déborde, comme pour .services-cta. */
/* Dimensions alignées sur .services-cta-halo (services.php) — même
taille de trou noir sur les deux pages (demande explicite).
Padding SYMÉTRIQUE (et non plus 4px en bas contre 240-420px en haut,
demande explicite "remonter le texte au centre du trou noir") : le
cercle (::before/::after) se centre sur top:50% de CETTE boîte
(padding + contenu) — avec un padding asymétrique, ce centre tombait
loin au-dessus du texte (poussé vers le bas de la boîte). Padding
réduit et égal des deux côtés : le texte/bouton se retrouvent
exactement au centre du disque. .why-cta-section (la section
englobante) a de toute façon un très grand padding propre
(clamp(640px,72vw,960px)) qui donne largement assez de marge au
disque/anneau sans que le halo ait besoin de son propre padding
massif. */
.why-target-cta-halo {
position: relative;
padding: 24px 20px;
}
.why-target-cta-halo::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: clamp(440px, 62vw, 780px);
height: clamp(440px, 62vw, 780px);
margin-top: -1px;
border-radius: 50%;
/* Demande explicite ("pour la section trou noir, mets-le à la couleur
sélectionnée") : la palette jaune/or fixe (calée sur une image de
référence lors d'une demande précédente) est remplacée par des
teintes dérivées de --header-accent. Mêmes paliers d'opacité/angles
conservés pour garder la forme du disque — seule sa couleur change
désormais avec le thème. (.hero-black-hole et .services-cta-halo
sur services.php suivent désormais la même recette — demande
explicite "tous les trous noirs de la page doivent hériter de la
couleur active"). */
/* Bande horizontale déplacée sur ::after (demande explicite : elle ne
doit pas tourner avec l'anneau — contrairement à ce calque animé par
blackHoleSpin — cf. trou noir1.jpg où la lueur équatoriale reste
fixe sur la face du disque pendant que l'anneau tourne autour). */
background:
conic-gradient(
from -20deg,
rgba(var(--header-accent),0) 0deg,
rgba(var(--header-accent),.6) 38deg,
rgba(var(--header-accent),.68) 68deg,
rgba(var(--header-accent),.7) 92deg,
rgba(var(--header-accent),.36) 118deg,
rgba(var(--header-accent),0) 152deg,
rgba(var(--header-accent),0) 222deg,
rgba(var(--header-accent),.22) 250deg,
rgba(var(--header-accent),.4) 282deg,
rgba(var(--header-accent),.55) 302deg,
rgba(var(--header-accent),.4) 320deg,
rgba(var(--header-accent),0) 360deg
);
box-shadow: 0 0 clamp(46px, 6.5vw, 82px) clamp(14px, 2vw, 25px) rgba(var(--header-accent),.30);
--hole-blur: 22px;
animation:
blackHoleSpin 22s linear infinite,
blackHoleFlicker 6.5s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.why-target-cta-halo::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: clamp(230px, 32vw, 400px);
height: clamp(230px, 32vw, 400px);
transform: translate(-50%, -50%);
border-radius: 50%;
/* Version "réaliste" restaurée (demande explicite : "on avait obtenu un
résultat très réaliste", plus de barre horizontale) : la bande
linéaire equatoriale est retirée — un seul radial-gradient forme un
cœur noir opaque avec un fin anneau photonique clair à 58-66%
(l'horizon des événements, coloré --header-accent), plus proche
d'une vraie photo de trou noir. Complété par un léger backdrop-filter
(flou + saturation) sur le bord pour un rendu moins "à plat". */
background:
radial-gradient(circle, #000000 0%, #000000 58%, rgba(var(--header-accent),.85) 62%, #000000 66%, rgba(0,0,0,0) 76%);
backdrop-filter: blur(2px) saturate(1.15);
-webkit-backdrop-filter: blur(2px) saturate(1.15);
box-shadow: 0 0 clamp(52px, 7.2vw, 90px) clamp(17px, 2.4vw, 30px) rgba(0,0,0,.85);
animation: blackHolePulse 4.5s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
.why-target-cta-halo h2,
.why-target-cta-halo .cta-text,
.why-target-cta-halo .btn-accueil {
position: relative;
z-index: 2;
}
/* ─── Rockette en orbite autour du trou noir ───
Wrapper carré centré sur le même point que le disque (::after) et
l'anneau (::before). Le rocket-icon est fixé au bord haut du wrapper
(top:0, left:50%) et tourne AVEC le wrapper : la rotation du parent
suffit à le faire orbiter, pas besoin d'animer sa position directement.
z-index:2 pour passer au-dessus de l'anneau et du disque (::before/
::after sont respectivement z-index 0 et 1). */
.why-target-cta-orbit {
position: absolute;
top: 50%;
left: 50%;
width: clamp(350px, 51vw, 610px);
height: clamp(350px, 51vw, 610px);
transform: translate(-50%, -50%) rotate(0deg);
z-index: 2;
pointer-events: none;
animation: blackHoleOrbitSpin 8s linear infinite;
}
.why-target-cta-orbit-rocket {
position: absolute;
top: 0;
left: 50%;
width: 36px;
height: 36px;
transform: translate(-50%, -50%) rotate(90deg);
color: rgba(255,255,255,.85);
/* lueur suit désormais --header-accent (demande explicite couleur
sélectionnée) au lieu d'un bleu clair fixe. */
filter: drop-shadow(0 0 6px rgba(var(--header-accent),.55));
transition: opacity .3s ease;
/* pointer-events réactivé sur la rockette uniquement (le wrapper
.why-target-cta-orbit reste pointer-events:none) : nécessaire pour
que :hover se déclenche — demande explicite "rajoute un tooltip à
la rockette en rotation autour". */
pointer-events: auto;
}
/* ─── Traînée derrière la rockette en orbite (demande explicite) ───
Même ancrage/rotation de base que .why-target-cta-orbit-rocket
(top:0, left:50%, rotate(90deg)), mais SANS le translate(-50%,-50%) de
centrage : la barre part du point d'ancrage (là où se trouve la
rockette) et s'étend uniquement vers le "bas" en repère local — ce qui,
une fois la même rotation appliquée, retombe exactement du côté
"arrière" (moteur) de la rockette plutôt que réparti moitié devant/
moitié derrière. Comme elle est un enfant du même wrapper que la
rockette (.why-target-cta-orbit, qui tourne via blackHoleOrbitSpin),
elle reste correctement alignée derrière elle tout au long de l'orbite. */
.why-target-cta-orbit-trail {
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 56px;
transform-origin: 50% 0%;
transform: translateX(-50%) rotate(90deg);
/* suit désormais --header-accent (demande explicite couleur
sélectionnée) au lieu d'un bleu clair fixe. */
background: linear-gradient(to bottom, rgba(var(--header-accent),.55) 0%, rgba(var(--header-accent),.18) 55%, rgba(var(--header-accent),0) 100%);
border-radius: 2px;
filter: blur(1.5px);
pointer-events: none;
transition: opacity .3s ease;
}
/* ─── Tooltip "Salut !" au survol de la rockette en orbite (demande
explicite, 2e passe : "le tooltip doit suivre la rockette") ───
1ère version : élément statique positionné une fois pour toutes en haut
du cercle — lisible, mais ne suivait pas la rockette dans sa course.
2e version (celle-ci) : .why-target-cta-tooltip-anchor est un enfant du
MÊME wrapper rotatif que la rockette (.why-target-cta-orbit, animé par
blackHoleOrbitSpin) et partage le MÊME point d'ancrage (top:0, left:50%)
— il est donc entraîné exactement comme elle, en cercle, à chaque
instant. Sa propre animation blackHoleOrbitCounterSpin tourne à la même
vitesse mais en sens inverse : la rotation du parent s'annule pour ce
sous-arbre, si bien que la pastille (positionnée juste au-dessus du
point d'ancrage dans ce repère "stabilisé") reste toujours droite et
lisible, tout en étant repositionnée en continu à côté de la rockette
pendant qu'elle orbite. */
.why-target-cta-tooltip-anchor {
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
transform: translate(-50%, -50%) rotate(0deg);
animation: blackHoleOrbitCounterSpin 8s linear infinite;
z-index: 3;
}
.why-target-cta-tooltip {
position: absolute;
left: 0;
top: -20px;
transform: translate(-50%, -100%);
background: rgba(var(--header-accent),.16);
color: #fff;
padding: 6px 16px;
border-radius: 999px;
font-size: .78rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: .03em;
border: 1px solid rgba(var(--header-accent),.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
pointer-events: none;
/* demande explicite : "laisse le tooltip actif au moins 1.5s" — délai
avant que le fondu de disparition ne démarre (le tooltip reste donc
pleinement visible 1.5s après la fin du survol), puis fondu rapide.
La règle :hover ci-dessous définit sa PROPRE transition (sans délai)
qui prend le dessus à l'apparition : apparition instantanée, disparition
différée. */
transition: opacity .25s ease 1.5s;
}
.why-target-cta-orbit:has(.why-target-cta-orbit-rocket:hover) .why-target-cta-tooltip {
opacity: 1;
transition: opacity .2s ease;
}
@keyframes blackHoleOrbitCounterSpin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes blackHoleOrbitSpin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* ─── État "avalée" : au clic sur "Créer mon site" (cf. main.js) ───
Le wrapper accélère puis rétrécit (scale → 0) autour de son propre
centre : combiné à la rotation, la rockette part en spirale vers le
centre du disque et disparaît, comme aspirée par le trou noir. */
.why-target-cta-halo.is-swallowing .why-target-cta-orbit {
/* linear (et non plus un cubic-bezier ease-in) : l'accélération est
désormais encodée directement dans l'espacement des paliers du
keyframe (cf. @keyframes blackHoleSwallowSpiral) — une easing
supplémentaire ici la ferait "doubler" et rendrait la fin
illisible. Durée raccourcie (3.4s -> 2.4s, demande explicite). */
animation: blackHoleSwallowSpiral 2.4s linear forwards;
}
.why-target-cta-halo.is-swallowing .why-target-cta-orbit-rocket,
.why-target-cta-halo.is-swallowing .why-target-cta-orbit-trail,
.why-target-cta-halo.is-swallowing .why-target-cta-tooltip {
opacity: 0;
/* Délai/durée mis à l'échelle de la nouvelle durée totale (2.4s), même
proportion qu'avant (~67%->81% de l'animation) : la rockette
disparaît à 1.95s — c'est CE moment précis que main.js utilise pour
déclencher la navigation, plutôt que d'attendre la fin complète de
la spirale (demande explicite). */
transition: opacity .35s ease 1.6s;
}
/* ─── Spirale d'aspiration (demande explicite, 2 ajustements) ───
1. Pas de "repop" : rotate() part de calc(var(--swallow-start) + Xdeg)
plutôt que d'un fixe 0deg. --swallow-start est posée en JS juste
avant l'ajout de .is-swallowing (cf. main.js) avec l'angle EXACT où
la rockette se trouvait dans sa rotation continue (blackHoleOrbitSpin)
au moment du clic — la spirale part donc de sa position réelle,
jamais d'un saut visuel vers le haut du cercle.
2. Plusieurs tours de plus en plus rapides avant l'aspiration : les
paliers de rotation ci-dessous couvrent des deltas croissants par
tranche de temps égale (220°, 360°, 480°, 640°, 850° ≈ 7 tours au
total) — accélération progressive plutôt qu'une vitesse constante.
translateY (décalage vers le "bas" du trou noir) reste quasi nul
pendant les premiers tours et ne s'accentue que sur les 2 derniers
paliers : la rockette n'est vraiment "tirée" vers le bas qu'en toute
fin de spirale. Valeurs en clamp() car ce keyframe est partagé entre
.why-target-cta-orbit (accueil.php) et .services-cta-orbit
(services.php, disque plus grand). */
@keyframes blackHoleSwallowSpiral {
0% { transform: translate(-50%, -50%) translateY(0) rotate(calc(var(--swallow-start, 0deg) + 0deg)) scale(1); }
18% { transform: translate(-50%, -50%) translateY(0) rotate(calc(var(--swallow-start, 0deg) + 220deg)) scale(.94); }
38% { transform: translate(-50%, -50%) translateY(2px) rotate(calc(var(--swallow-start, 0deg) + 580deg)) scale(.82); }
58% { transform: translate(-50%, -50%) translateY(6px) rotate(calc(var(--swallow-start, 0deg) + 1060deg)) scale(.62); }
78% { transform: translate(-50%, -50%) translateY(clamp(16px, 3.4vw, 40px)) rotate(calc(var(--swallow-start, 0deg) + 1700deg)) scale(.34); }
100% { transform: translate(-50%, -50%) translateY(clamp(28px, 5.8vw, 68px)) rotate(calc(var(--swallow-start, 0deg) + 2550deg)) scale(0); }
}
/* Le remplissage translucide standard de .btn-accueil (rgba(var(--accent-harmony-2),.14))
se lit trop clair/lavé une fois posé sur le disque d'accrétion du trou
noir : version plus sombre et plus opaque pour que le bouton se détache
nettement. */
.why-target-cta-halo .btn-accueil {
background: rgba(6, 10, 28, .62);
border-color: rgba(var(--accent-harmony-2), .45);
}
.why-target-cta-halo .btn-accueil:hover {
background: rgba(6, 10, 28, .78);
border-color: rgba(var(--accent-harmony-2), .65);
}
.cta-text {
color: rgba(255,255,255,.58);
font-size: .98rem;
max-width: 620px;
margin: 0 auto 32px;
line-height: 1.7;
}
/* Recoloré sur --accent-harmony-3 (demande explicite, précisée depuis :
"il faut que cela soit du ton de la couleur principale sélectionnée...
une variante du bleu utilisé", etc. pour chaque couleur) — remplace
--accent-harmony-2 utilisé jusqu'ici par une VARIANTE (plus sombre) de
la couleur principale de chaque thème (cf. --accent-harmony-3, posée
sur chaque .accent-* tout en haut de ce fichier), pour que ce bouton
générique (CTA "Livre d'or" sur index.php, "Se connecter", "Visiter le
site"/services.php, etc. — cf. tous les usages de .btn-accueil dans ce
fichier) reste dans le même ton que le reste de la page tout en s'en
distinguant légèrement. */
.btn-accueil {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 44px;
font-size: 1.05rem;
font-weight: 600;
border-radius: 999px;
background: rgba(var(--accent-harmony-3), .14);
border: 1px solid rgba(var(--accent-harmony-3), .32);
color: #ffffff;
text-decoration: none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 0 24px rgba(var(--accent-harmony-3), .08), inset 0 1px 0 rgba(255,255,255,.07);
transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
margin-bottom: 130px;
}
.btn-accueil:hover {
background: rgba(var(--accent-harmony-3), .22);
box-shadow: 0 12px 36px rgba(var(--accent-harmony-3), .28);
transform: translateY(-2px);
}
/* ========================= services.php ========================= */
/* ─── BACKGROUND ESPACE FIXE ─── */
.page-service::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
.page-service > * {
position: relative;
z-index: 1;
}
/* ─── HERO ─── */
/* La hero est suivie d'un .section-divider (160px) : on retire cette
hauteur pour que hero + divider tiennent ensemble dans 100dvh, sans
avoir besoin de scroller davantage pour voir le divider. On retire
aussi les 25px de SCROLL_OFFSET (main.js) laissés en haut à l'arrivée
par ancre, pour que le bas du divider ne soit pas coupé. */
/* ─── TITRE VISIBLE DE LA HERO ───
padding-top ramené de 200px à 60px : les 140px en trop réservaient la
place du header flottant (84px) + son sous-menu "Services" (~195px au
survol) qui restait visible en permanence en haut de la page. Depuis que
le header de cette page reste masqué à l'arrivée et ne réapparaît qu'au
scroll (cf. body:has(main.page-service, main.account-page)
.site-header:not(.visible) plus haut), cette réserve n'a plus lieu
d'être — 60px ne sert plus qu'à garder un peu d'air en haut du titre.
Section calée sur 100dvh (plein écran) comme demandé. */
.page-service .services-hero {
/* Hauteur/centrage 100dvh réservés au desktop (cf. media query
min-width:1200px) : sur mobile/tablette, la grille empilée des 5
vignettes est bien plus haute que 100dvh — un align-items:center
dans une boîte de hauteur fixe aurait débordé le contenu par le
haut ET par le bas (masqué derrière le header fixe / chevauchant
la section suivante). Ici : hauteur naturelle (auto). */
padding: 60px 0 40px;
position: relative;
}
.page-service .hero-content {
max-width: 1100px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* Le
ne contient plus que le logo CroisierWeb flottant
(.services-hero-logo), visible à TOUTES les tailles d'écran — le texte
d'origine "Où va-t-on ?" a été retiré définitivement (demande
explicite), donc l'effet terminal générique du h1 (prompt "> " +
curseur) est également neutralisé ci-dessous, à tous les breakpoints. */
.services-hero-title {
margin: 0;
text-align: center;
}
.services-hero-title::before,
.services-hero-title::after {
content: none;
}
/* Logo cliquable (renvoie vers accueil.php, demande explicite) : simple
wrapper autour de l'image existante, mêmes conventions que
.site-footer .footer-logo-link plus haut dans ce fichier. */
.services-hero-logo-link {
display: block;
line-height: 0;
transition: opacity .2s ease;
}
.services-hero-logo-link:hover,
.services-hero-logo-link:focus-visible {
opacity: .85;
}
.services-hero-logo {
display: block;
width: clamp(160px, 20vw, 260px);
height: auto;
margin: 0 auto;
/* Même effet de flottaison que le logo d'index.php (.company-logomain
img), cf. @keyframes floatSub dans animation.css. */
animation: floatSub 3s ease-in-out infinite;
}
/* Titre "Explorer" au-dessus du logo, mobile/tablette uniquement (demande
explicite) : reprend exactement le visuel du bouton "Explorer"
(.hero-cta-row .btn-secondary) du hero d'accueil.php. Cette fois un
vrai lien (ancre vers #services-cta, la dernière section avant le
footer) : au clic, défile en douceur jusqu'au bas de la page (géré par
le gestionnaire de clic générique des ancres, cf. main.js). Léger
effet de pression au clic pour le retour visuel. Masqué par défaut,
réaffiché en mobile dans responsive.css (@media max-width:960px). */
.services-hero-explore-title {
display: none;
margin: 0 auto 14px;
padding: 12px 26px;
width: fit-content;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.32);
border-radius: 14px;
color: rgba(255,255,255,.92);
font-weight: 600;
font-size: 1.02rem;
text-decoration: none;
cursor: pointer;
transition: transform .18s ease, background .2s ease, border-color .2s ease;
}
.services-hero-explore-title:active {
transform: scale(.93);
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.5);
}
/* ─── Bouton "Actualiser la page" (sous le titre) ───
Icône seule (pas de texte), volontairement discrète au repos ; forte
animation d'apparition (pop + rotation) déclenchée par défaut après un
court délai. En desktop (>=1200px), le délai est repoussé à 4s pour
apparaître juste après la fin de l'atterrissage de la vignette centrale
(4s, cf. animation-delay plus bas dans ce fichier). */
.services-hero-refresh {
/* Masqué par défaut (mobile/tablette) : réservé aux utilisateurs PC,
réaffiché uniquement dans le @media (min-width:1200px) plus bas. */
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-top: 10px;
padding: 0;
border-radius: 50%;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.5);
cursor: pointer;
opacity: 0;
animation: heroRefreshPopIn .65s cubic-bezier(.34,1.56,.64,1) forwards;
animation-delay: .3s;
transition: background .2s ease, border-color .2s ease, color .2s ease;
/* .hero-grid (desktop) chevauche cette zone via son margin-top:-70px
(cf. plus bas) : sans position/z-index explicites, les capsules de
la grille passaient devant le bouton et bloquaient le clic en
desktop (le bouton restait donc fonctionnel seulement là où rien ne
le recouvre, ex. mobile). z-index élevé pour rester cliquable en
toutes circonstances, y compris pendant le vol de la roquette
"actualiser" (cf. z-index:5 sur .hero-orbit-lines plus bas). */
position: relative;
z-index: 6;
}
.services-hero-refresh svg {
width: 17px;
height: 17px;
transition: transform .5s ease;
}
.services-hero-refresh:hover,
.services-hero-refresh:focus-visible {
background: rgba(var(--header-accent),.12);
border-color: rgba(var(--header-accent),.4);
color: #fff;
}
.services-hero-refresh:hover svg,
.services-hero-refresh:focus-visible svg {
transform: rotate(180deg);
}
.services-hero-refresh:active {
background: rgba(var(--header-accent),.22);
}
.services-hero-refresh:focus-visible {
outline: 2px solid rgba(var(--header-accent),.6);
outline-offset: 2px;
}
@keyframes heroRefreshPopIn {
0% { opacity: 0; transform: scale(.3) rotate(-120deg); }
55% { opacity: 1; transform: scale(1.18) rotate(14deg); }
75% { transform: scale(.94) rotate(-6deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
/* ─── HERO GRID CAPSULES ─── */
.hero-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
width: 100%;
}
/* Le SVG des traits de connexion (decoratif, desktop uniquement) n'est
positionné en absolute que dans la media query orbite (>=1200px) : en
dessous de ce seuil, sans cette règle, il reste un enfant flex normal
du .hero-grid (taille intrinsèque ~300×150px) et s'intercale entre les
vignettes — d'où l'écart vertical qui isolait "Création site web" des
4 autres. On le masque totalement hors desktop. */
.hero-orbit-lines {
display: none;
}
/* Trou noir d'entrée (cf. .hero-black-hole plus bas, media query orbite
>=1200px) : purement décoratif et lié à la choreographie desktop des
vignettes en orbite, masqué hors de ce contexte comme .hero-orbit-lines
ci-dessus. */
.hero-black-hole {
display: none;
}
.hero-grid .service-capsule {
flex: 1 1 300px;
max-width: 360px;
}
/* ─── CAPSULES DE SERVICE ─── */
.service-capsule {
--capsule-color: rgb(var(--header-accent));
--capsule-soft: rgba(var(--header-accent),.12);
--capsule-glow: rgba(var(--header-accent),.22);
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 28px 24px 22px;
border-radius: 24px;
text-decoration: none;
color: inherit;
overflow: hidden;
background: rgba(7,10,18,.78);
border: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* border-radius/background-color ajoutés (en plus de transform/box-
shadow/border-color déjà présents) pour le survol "redevient planète"
en desktop (cf. .page-service .hero-content.is-all-landed
.service-capsule:hover plus bas) : transition douce de la carte vers
la forme ronde/texturée et inversement. */
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, border-radius .35s ease, background-color .35s ease;
}
.service-capsule::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
background-size: 28px 28px;
border-radius: inherit;
pointer-events: none;
transition: opacity .3s ease;
}
.service-capsule::after {
content: "";
position: absolute;
bottom: 0;
left: 15%;
right: 15%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--capsule-color), transparent);
opacity: .5;
transition: opacity .35s ease, left .35s ease, right .35s ease;
}
.service-capsule--conseil {
--capsule-color: #8b5cf6;
--capsule-soft: rgba(139,92,246,.12);
--capsule-glow: rgba(139,92,246,.22);
/* Phase "boule" du voyage/déploiement sur services.php (cf.
heroPlanetTravel / heroCapsuleDeploy) */
--capsule-planet-img: url('../image/planet-violet.webp');
}
/* « Création site web » (--featured) est la vignette phare du hero de
services.php : elle doit ressortir nettement par rapport aux 4 autres
(taille supérieure, halo permanent, léger zoom au repos).
Demande explicite : cette vignette reste TOUJOURS bleue, comme
refonte/programmation/conseil sont fixés respectivement en
amber/vert/violet — elle ne doit plus suivre la couleur active. */
.service-capsule--featured {
--capsule-color: #3b82f6;
--capsule-soft: rgba(59,130,246,.16);
--capsule-glow: rgba(59,130,246,.32);
/* Phase "boule" du voyage/déploiement sur services.php (cf.
heroPlanetTravelCenter / heroCapsuleDeployCenter) */
--capsule-planet-img: url('../image/planet-terre.webp');
border-color: rgba(59,130,246,.55);
border-width: 1.5px;
background: rgba(59,130,246,.12);
box-shadow: 0 22px 55px rgba(59,130,246,.24), 0 10px 26px rgba(0,0,0,.30);
transform: scale(1.09);
z-index: 2;
animation: featuredCapsuleGlow 3.4s ease-in-out infinite;
}
@keyframes featuredCapsuleGlow {
0%, 100% { box-shadow: 0 22px 55px rgba(59,130,246,.24), 0 10px 26px rgba(0,0,0,.30); }
50% { box-shadow: 0 26px 68px rgba(59,130,246,.40), 0 12px 30px rgba(0,0,0,.34); }
}
.hero-grid .service-capsule--featured {
flex: 1 1 360px;
max-width: 420px;
}
/* Sélecteur combiné (2 classes) pour battre en spécificité la règle
générique .service-capsule:hover (plus bas dans ce fichier) et conserver
le zoom permanent de la vignette au survol. */
.service-capsule.service-capsule--featured:hover {
transform: scale(1.09) translateY(-8px);
border-color: rgba(59,130,246,.8);
box-shadow: 0 30px 72px rgba(59,130,246,.42), 0 0 42px rgba(59,130,246,.32);
}
/* Demande explicite : « Hébergement et maintenance » reste TOUJOURS
blanche/pâle (même logique que --featured en bleu fixe), comme
refonte/programmation/conseil sont fixés sur leur propre teinte —
elle ne doit plus jamais afficher du bleu. */
.service-capsule--cloud {
--capsule-color: #f1f5f9;
--capsule-soft: rgba(241,245,249,.14);
--capsule-glow: rgba(241,245,249,.24);
/* Phase "boule" du voyage/déploiement sur services.php (cf.
heroPlanetTravel / heroCapsuleDeploy) */
--capsule-planet-img: url('../image/planet-blanc.webp');
}
.service-capsule--refonte {
--capsule-color: #f59e0b;
--capsule-soft: rgba(245,158,11,.12);
--capsule-glow: rgba(245,158,11,.22);
/* Image corrigée (planet-rouge.webp -> planet-orange.webp, demande
explicite "planète orange") : planet-rouge.webp est un rendu
lave/magma noir-rouge, pas orange — même correction déjà appliquée à
.home-hero-planet--magma plus haut dans ce fichier.
Phase "boule" du voyage/déploiement sur services.php (cf.
heroPlanetTravel / heroCapsuleDeploy) */
--capsule-planet-img: url('../image/planet-orange.webp');
}
.service-capsule--programmation {
--capsule-color: #10b981;
--capsule-soft: rgba(16,185,129,.12);
--capsule-glow: rgba(16,185,129,.22);
/* Image corrigée (planet-blanc.webp -> planet-vert.webp, demande
explicite "planète verte") : planet-blanc.webp donnait une planète
blanche/grise, en doublon avec .service-capsule--cloud — même
correction déjà appliquée à .home-hero-planet--hebergement plus haut
dans ce fichier.
Phase "boule" du voyage/déploiement sur services.php (cf.
heroPlanetTravel / heroCapsuleDeploy) */
--capsule-planet-img: url('../image/planet-vert.webp');
}
.capsule-status {
position: absolute;
top: 18px;
right: 18px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--capsule-color);
box-shadow: 0 0 8px var(--capsule-color), 0 0 18px var(--capsule-soft);
animation: capsuleStatusPulse 2.8s ease-in-out infinite;
transition: opacity .25s ease;
}
@keyframes capsuleStatusPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .4; transform: scale(.75); }
}
.capsule-porthole {
position: relative;
width: 58px;
height: 58px;
flex-shrink: 0;
transition: opacity .25s ease;
}
/* ─── Disque "planète" affiché par défaut une fois déployée, masqué au
survol (desktop) — inversion demandée par rapport au comportement
précédent (planète révélée au survol) ; cf.
.page-service .hero-content.is-all-landed .service-capsule.is-deployed
et son :hover plus bas ───
Élément DÉDIÉ plutôt qu'un border-radius:50% appliqué à toute la carte :
les cartes ayant une largeur ≠ hauteur (320×300, 400×300...), un
border-radius:50% sur la boîte entière donnerait une ellipse étirée et
peu lisible, surtout une fois les vignettes agrandies. Ici, taille FIXE
et centrée, identique à la boule pendant la phase "voyage" (même
ombrage) — la zone de survol/clic reste néanmoins celle de LA VIGNETTE
ENTIÈRE (ce disque n'est qu'un habillage visuel par-dessus, la carte
elle-même ne change ni de taille ni de position). */
.capsule-planet-disc {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(.82);
background-color: var(--capsule-color);
background-image: var(--capsule-planet-img);
background-size: cover;
background-position: center;
box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease, transform .3s ease;
}
/* Centre ("Terre") : disque un peu plus grand, cohérent avec sa vignette
(400x300, redevenue plus petite que les satellites 345x320 en largeur
mais un peu plus grande en aire — léger disque plus grand tout de même
pour rester visuellement la vignette phare). */
.service-capsule--featured .capsule-planet-disc {
width: 165px;
height: 165px;
}
.capsule-porthole::before {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1px solid var(--capsule-soft);
pointer-events: none;
}
.porthole-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--capsule-soft);
border: 1.5px solid var(--capsule-color);
box-shadow: 0 0 18px var(--capsule-glow), inset 0 0 14px rgba(0,0,0,.35);
display: flex;
align-items: center;
justify-content: center;
color: var(--capsule-color);
transition: box-shadow .35s ease, background .35s ease, background-image .35s ease;
}
.porthole-inner svg { width: 22px; height: 22px; transition: opacity .25s ease; }
.capsule-seam {
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
flex-shrink: 0;
transition: opacity .25s ease;
}
.capsule-content h4 {
font-size: 1rem;
font-weight: 600;
color: #ffffff;
margin: 0 0 8px;
line-height: 1.3;
}
.capsule-content p {
font-size: .875rem;
color: rgba(255,255,255,.55);
line-height: 1.65;
margin: 0;
}
.capsule-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .78rem;
font-weight: 600;
color: var(--capsule-color);
letter-spacing: .06em;
text-transform: uppercase;
margin-top: 4px;
opacity: .8;
transition: gap .2s ease, opacity .2s ease;
}
/* ─── Rockette remplaçant les flèches "→" des liens/CTA (capsule-cta,
planet-cta, livre-dor-cta-btn) : décolle (translate + rotation) au
survol du lien parent plutôt que de rester statique comme l'ancienne
flèche. ── */
.cta-rocket {
flex-shrink: 0;
transition: transform .3s ease;
}
/* ─── Wrapper générique + traînée, réutilisable partout où .cta-rocket
apparaît (demande explicite : "applique-le à tous les boutons qui ont
la rockette"). Même technique que .planet-cta-rocket (services.php,
planètes) : un vrai frère du svg plutôt qu'un ::before dessus
(peu fiable en pseudo-élément sur ). Le translate+rotate du
décollage est porté par CE wrapper (et non plus directement par
.cta-rocket) pour que svg + traînée bougent ensemble ; ainsi les
sélecteurs :hover ci-dessous remplacent les anciens qui ciblaient
.cta-rocket directement (.service-capsule:hover .cta-rocket,
.livre-dor-cta-btn:hover .cta-rocket). ─── */
.cta-rocket-wrap {
position: relative;
display: inline-flex;
transition: transform .3s ease;
}
.cta-rocket-trail {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 8px;
transform: translateX(-50%);
transform-origin: 50% 0%;
background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
border-radius: 2px;
opacity: 0;
transition: opacity .3s ease, height .3s ease;
pointer-events: none;
}
.service-capsule:hover .cta-rocket-wrap,
.service-capsule:focus-visible .cta-rocket-wrap,
.livre-dor-cta-btn:hover .cta-rocket-wrap,
.livre-dor-cta-btn:focus-visible .cta-rocket-wrap {
transform: translate(3px, -3px) rotate(45deg);
}
.service-capsule:hover .cta-rocket-trail,
.service-capsule:focus-visible .cta-rocket-trail,
.livre-dor-cta-btn:hover .cta-rocket-trail,
.livre-dor-cta-btn:focus-visible .cta-rocket-trail {
opacity: .85;
height: 11px;
}
.service-capsule:hover {
transform: translateY(-5px);
border-color: var(--capsule-color);
box-shadow: 0 24px 60px rgba(0,0,0,.30), 0 0 35px var(--capsule-glow);
}
.service-capsule:hover::after { left: 5%; right: 5%; opacity: .9; }
.service-capsule:hover .porthole-inner {
box-shadow: 0 0 28px var(--capsule-color), 0 0 55px var(--capsule-glow), inset 0 0 12px rgba(0,0,0,.20);
}
.service-capsule:hover .capsule-cta { gap: 10px; opacity: 1; }
/* ─── MOBILE/TABLETTE (< 1200px, grille empilée d'origine) : "Création
site web" doit apparaître EN PREMIER (order) et avoir la même taille
que les 4 autres vignettes (on neutralise son scale(1.09) et son
flex-basis/max-width agrandis, propres à la mise en avant desktop). ── */
@media (max-width: 1199.98px) {
.hero-grid .service-capsule--featured {
order: -1;
transform: none;
flex: 1 1 300px;
max-width: 360px;
}
.hero-grid .service-capsule.service-capsule--featured:hover {
transform: translateY(-5px);
}
/* Léger espace entre le titre et la 1ère vignette (Création site
web) : sans marge dédiée, .services-hero-title (margin:0) et
.hero-grid étaient collés. Resserré (20px -> 10px) pour rapprocher
davantage le titre de la grille. */
.page-service .services-hero-title {
margin-bottom: 10px;
}
}
/* ================================================================
SERVICES.PHP — HERO EN « ORBITE » (desktop uniquement)
Demande : "Création site web" fixe au centre, les 4 autres vignettes
flottent autour (une à gauche, une à droite, deux en dessous),
reliées par des traits, avec une rotation rapide à l'arrivée qui
ralentit progressivement jusqu'à l'arrêt complet (animation ≤3s).
Seuil relevé à 1200px (au lieu de 993px) : au-delà, .hero-content
(max-width 1100px) est élargi à 1300px spécifiquement pour cette
section, ce qui donne assez de place pour garder aux vignettes
quasiment leur taille d'origine (320/360px sat.) et un centre
agrandi (400/420px) sans qu'elles se chevauchent. En dessous de
1200px on garde la grille empilée d'origine : les règles
.hero-grid / .service-capsule plus haut dans ce fichier s'appliquent
telles quelles, rien n'est modifié pour le mobile/tablette. ── */
@media (min-width: 1200px) {
/* Logo : visible immédiatement sur mobile/tablette (comportement
d'origine, cf. .services-hero-logo plus haut, hors media query).
En desktop uniquement, masqué au chargement et révélé seulement une
fois les 5 planètes posées ET entièrement déployées en vignette
(demande explicite) — cf. .hero-content.is-all-landed
.services-hero-logo plus bas et @keyframes heroLogoArrive. Le
bouton "Actualiser" reste réservé au desktop (display:none par
défaut, cf. .services-hero-refresh). */
.services-hero-logo {
opacity: 0;
}
.services-hero-refresh {
display: inline-flex;
}
/* Hauteur fixe + centrage vertical : n'a de sens qu'ici, où le
contenu (titre + orbite clampée à 680-780px) tient bien dans
95dvh une fois les 200px de padding-top déduits. */
.page-service .services-hero {
height: 95dvh;
display: flex;
align-items: center;
}
.page-service .hero-content {
max-width: 1300px;
}
/* Le titre "Tableau de bord" reste affiché en permanence (ancien
comportement : il disparaissait une fois "Création site web" posée
au centre — plus nécessaire depuis que ce titre est devenu un
intitulé de page fixe plutôt qu'un message d'accroche ponctuel). */
/* Bouton "Actualiser la page" : n'apparaît qu'une fois les 5 planètes
posées ET la vignette centrale déployée (cf. .is-all-landed plus
bas et heroCapsuleDeployCenter) — pas d'animation par défaut ici,
elle n'est ajoutée que par la règle .is-all-landed. */
.services-hero-refresh {
opacity: 0;
animation: none;
}
.page-service .hero-content.is-all-landed .services-hero-refresh {
animation: heroRefreshPopIn .325s cubic-bezier(.34,1.56,.64,1) forwards;
animation-delay: .6s;
}
/* Logo : arrive une fois TOUTE la choreographie de déploiement
terminée — la dernière vignette à se transformer (Conseil) finit à
.2s de délai + .6s de durée = .8s après .is-all-landed ; petite
marge (.875s) pour laisser cette dernière transformation bien se
lire avant l'arrivée du titre (délai divisé par 2 comme le reste de
la chorégraphie, demande explicite). floatSub (flottaison continue,
hors media query) tourne dès le chargement sans incidence tant que
le logo est invisible (opacity:0, cf. règle desktop plus haut) ;
heroLogoArrive ne pilote QUE l'opacité, jamais transform — sinon il
entrerait en conflit avec floatSub (déjà expérimenté avec les
vignettes, cf. heroCapsuleDeploy) et figerait la flottaison une
fois l'entrée terminée. */
.page-service .hero-content.is-all-landed .services-hero-logo {
animation: floatSub 3s ease-in-out infinite, heroLogoArrive .3s ease forwards;
animation-delay: 0s, .875s;
}
.page-service .hero-grid {
display: block;
position: relative;
width: 100%;
height: clamp(680px, 44vw, 780px);
/* Rapproche la 1ère vignette visible (ancrée à top:30%, donc avec
un vide non négligeable au-dessus d'elle dans cette boîte) du
titre juste au-dessus. Ne perturbe pas la géométrie de l'orbite
(traits SVG / positions top:%) : simple décalage du bloc entier. */
margin-top: -70px;
}
/* SVG des traits de connexion (voir services.php pour le markup
inline). Chaque trait a son propre fondu, calé juste après le
déploiement RÉEL de SA vignette — donc seulement une fois les 5
planètes posées (cf. délais ci-dessous, relatifs à .is-all-landed)
— plutôt qu'un fondu générique unique. */
.hero-orbit-lines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: visible;
pointer-events: none;
}
/* Pas d'animation par défaut : chaque trait n'apparaît qu'une fois les
5 planètes posées (cf. .is-all-landed plus bas), juste après que SA
vignette se soit déployée — pas avant, même si elle est arrivée
depuis longtemps sous forme de boule. */
.orbit-line {
fill: none;
stroke: rgba(255,255,255,.18);
stroke-width: .35;
opacity: 0;
transition: stroke .3s ease, stroke-width .3s ease, filter .3s ease;
}
/* Délais resynchronisés sur les nouveaux temps de déploiement (relatifs
à l'ajout de .is-all-landed, cf. .service-capsule--refonte/--cloud/
--programmation/--conseil plus bas : délai de déploiement + 1.2s de
durée (shake compris) + .05s de marge). Valeurs divisées par 2 en
plus (chorégraphie raccourcie globalement, demande explicite). */
.page-service .hero-content.is-all-landed .orbit-line--refonte { animation: heroOrbitLineFade .2s ease forwards; animation-delay: .675s; }
.page-service .hero-content.is-all-landed .orbit-line--cloud { animation: heroOrbitLineFade .2s ease forwards; animation-delay: .725s; }
.page-service .hero-content.is-all-landed .orbit-line--programmation { animation: heroOrbitLineFade .2s ease forwards; animation-delay: .775s; }
.page-service .hero-content.is-all-landed .orbit-line--conseil { animation: heroOrbitLineFade .2s ease forwards; animation-delay: .825s; }
/* Fil vers le divider "Création site web" : calé sur le déploiement du
centre (délai 0s + .6s de durée) + .025s. */
.page-service .hero-content.is-all-landed .orbit-line--divider { animation: heroOrbitLineFade .2s ease forwards; animation-delay: .625s; }
/* Fil bouton "Actualiser" -> "Création site web" : même repère que
l'apparition du bouton lui-même (cf. .services-hero-refresh plus
haut), pour qu'ils se révèlent ensemble. Le passage au bleu (classe
.is-active) est ensuite déclenché par JS, pas par ce délai.
Demande explicite : ce fil (comme la vignette "Création site web"
elle-même, cf. .service-capsule--featured plus haut) reste TOUJOURS
bleu — remplace rgb(var(--header-accent)) par le même bleu fixe
(#3b82f6) que la vignette, il ne doit plus suivre la couleur active. */
.page-service .hero-content.is-all-landed .orbit-line--refresh { animation: heroOrbitLineFade .2s ease forwards; animation-delay: .6s; }
.orbit-line--refresh.is-active {
stroke: #3b82f6;
stroke-width: .7;
filter: drop-shadow(0 0 2px #3b82f6) drop-shadow(0 0 5px rgba(59,130,246,.6));
}
/* ─── TROU NOIR D'ENTRÉE (voir markup services.php, .hero-black-hole) ───
Même habillage EXACT que le trou noir du CTA final (::before disque
d'accrétion + ::after horizon des événements, cf. .services-cta-halo
plus bas dans ce fichier — mêmes keyframes blackHoleSpin/blackHolePulse,
réutilisées telles quelles) recentré sur l'ancre de la vignette
centrale (50%,38%, cf. --hole-top/--hole-left ci-dessous). L'ENTRÉE
(cf. heroBlackHoleLife) est un "dézoom" : le trou noir apparaît déjà
immense (couvre tout l'écran) puis rétrécit jusqu'à sa taille normale
— écho volontaire/inversé du trou noir grossissant à la toute fin de
la séquence "Explorer" d'accueil.php (cf. homeHeroHaloGrow), pour
donner la sensation d'enchaîner sur la même plongée dans le trou
noir d'une page à l'autre.
SORTIE (demande explicite, nouvelle) : une fois toute la
choreographie terminée (5 planètes déployées, texte et logo
arrivés), le trou noir se referme à son tour (cf.
.is-all-landed .hero-black-hole / @keyframes heroBlackHoleClose plus
bas) — mouvement inverse et symétrique du dézoom d'entrée. Nuance
avec la note historique ci-dessus : un essai différent (remplacer le
trou noir par une image de galaxie statique en fin de choreographie)
avait été testé puis retiré (moins convaincant) ; ici il ne s'agit
pas d'un remplacement mais d'une fermeture progressive du trou noir
LUI-MÊME, qui disparaît plutôt que de rester en permanence. */
.hero-black-hole {
display: block;
position: absolute;
top: var(--hole-top, 38%);
left: var(--hole-left, 50%);
transform: translate(-50%, -50%);
width: 0;
height: 0;
z-index: 0;
opacity: 0;
pointer-events: none;
/* Chorégraphie d'entrée raccourcie globalement (facteur ~0.5, demande
explicite : "plus courte" dans tous les cas, pas seulement à la
1ère visite) : toutes les durées/délais de cette section (trou
noir -> trajet -> déploiement -> texte -> traits d'orbite -> logo
-> easter eggs) ont été divisés par 2, en conservant exactement
les mêmes proportions/synchronisations relatives. */
animation: heroBlackHoleLife .65s cubic-bezier(.16,1,.3,1) forwards;
}
/* Fermeture du trou noir une fois TOUTE la choreographie visible
terminée : délai calé pour démarrer juste après l'arrivée du logo
(dernier élément à apparaître, cf. .services-hero-logo plus bas —
arrivée à .875s+.3s = 1.175s après .is-all-landed), avec une petite
marge de lecture (1.2s). heroBlackHoleLife reste dans la liste
(fill "forwards", déjà figée sur son état final depuis longtemps) :
heroBlackHoleClose, listée après, prend le dessus sur les propriétés
qu'elle pilote (opacity/transform) pour cette fermeture — même
mécanique que .capsule-planet-disc/.capsule-status plus bas dans ce
fichier (une animation listée en dernier gagne sur les précédentes
pour les propriétés qu'elle gère). */
.page-service .hero-content.is-all-landed .hero-black-hole {
animation:
heroBlackHoleLife .65s cubic-bezier(.16,1,.3,1) forwards,
heroBlackHoleClose .7s cubic-bezier(.55,0,.85,.35) 1.2s forwards;
}
.hero-black-hole::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: clamp(390px, 55vw, 690px);
height: clamp(390px, 55vw, 690px);
margin-top: -1px;
border-radius: 50%;
/* Demande explicite ("le trou, et tous ceux de la page, doivent
hériter de la couleur active") : la palette jaune/or fixe est
remplacée par des teintes dérivées de --header-accent, même
recette que .why-target-cta-halo. Mêmes paliers d'opacité/angles
conservés pour garder la forme du disque — seule sa couleur
change désormais avec le thème. */
/* Bande horizontale déplacée sur ::after (demande explicite : elle
ne doit pas tourner avec l'anneau — contrairement à ce calque
animé par blackHoleSpin — cf. trou noir1.jpg où la lueur
équatoriale reste fixe pendant que l'anneau tourne autour). */
background:
conic-gradient(
from -20deg,
rgba(var(--header-accent),0) 0deg,
rgba(var(--header-accent),.6) 38deg,
rgba(var(--header-accent),.68) 68deg,
rgba(var(--header-accent),.7) 92deg,
rgba(var(--header-accent),.36) 118deg,
rgba(var(--header-accent),0) 152deg,
rgba(var(--header-accent),0) 222deg,
rgba(var(--header-accent),.22) 250deg,
rgba(var(--header-accent),.4) 282deg,
rgba(var(--header-accent),.55) 302deg,
rgba(var(--header-accent),.4) 320deg,
rgba(var(--header-accent),0) 360deg
);
box-shadow: 0 0 clamp(41px, 5.8vw, 72px) clamp(12px, 1.8vw, 22px) rgba(var(--header-accent),.30);
--hole-blur: 22px;
animation:
blackHoleSpin 22s linear infinite,
blackHoleFlicker 6.5s ease-in-out infinite;
pointer-events: none;
}
.hero-black-hole::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: clamp(200px, 28vw, 350px);
height: clamp(200px, 28vw, 350px);
transform: translate(-50%, -50%);
border-radius: 50%;
/* Version "réaliste" restaurée (demande explicite : "on avait
obtenu un résultat très réaliste", plus de barre horizontale) :
la bande linéaire equatoriale est retirée — un seul
radial-gradient forme un cœur noir opaque avec un fin anneau
photonique clair à 58-66% (l'horizon des événements, coloré
--header-accent), plus proche d'une vraie photo de trou noir.
Complété par un léger backdrop-filter (flou + saturation) sur le
bord pour un rendu moins "à plat". */
background:
radial-gradient(circle, #000000 0%, #000000 58%, rgba(var(--header-accent),.85) 62%, #000000 66%, rgba(0,0,0,0) 76%);
backdrop-filter: blur(2px) saturate(1.15);
-webkit-backdrop-filter: blur(2px) saturate(1.15);
box-shadow: 0 0 clamp(45px, 6.2vw, 78px) clamp(15px, 2.1vw, 26px) rgba(0,0,0,.85);
animation: blackHolePulse 4.5s ease-in-out infinite;
pointer-events: none;
}
/* Roquette qui file le long du trait : SMIL , déclenchée à la demande par assets/js/main.js
(bloc "ROQUETTES SATELLITES — RYTHME VARIABLE") plutôt qu'une boucle
continue — demande explicite : rythme d'envoi variable pendant le
survol (tantôt 1 roquette, tantôt 2) plutôt qu'un flux ponctuel
identique. Invisible tant qu'elle ne vole pas réellement (classe
.is-active posée par le JS le temps du vol, cf. plus bas), pas
simplement tant qu'on ne survole pas la vignette. */
.orbit-rocket {
opacity: 0;
transition: opacity .3s ease;
}
/* Révélée uniquement pendant le vol (posée/retirée par le JS pour
chacune des 2 roquettes de chaque ligne satellite, cf. ci-dessus) —
même mécanisme que .orbit-rocket--refresh.is-active plus bas, mais
générique puisque partagé par les 8 roquettes (2 par ligne x 4
lignes) plutôt qu'une seule instance par ligne. */
.orbit-rocket.is-active {
opacity: 1;
}
.orbit-rocket--refonte path, .orbit-rocket--refonte circle { fill: #f59e0b; }
/* Corrigé (demande explicite) : "Hébergement et maintenance" est fixée
blanche/pâle (cf. .service-capsule--cloud, --capsule-color: #f1f5f9,
"ne doit plus jamais afficher du bleu") — sa roquette utilisait
encore l'ancien bleu par défaut, jamais mise à jour. */
.orbit-rocket--cloud path, .orbit-rocket--cloud circle { fill: #f1f5f9; }
.orbit-rocket--programmation path, .orbit-rocket--programmation circle { fill: #10b981; }
.orbit-rocket--conseil path, .orbit-rocket--conseil circle { fill: #8b5cf6; }
/* Corrigé (demande explicite : "Création site web" reste TOUJOURS
bleue) : ce fil part de cette vignette (cf. .orbit-line--divider),
sa roquette doit donc rester bleue elle aussi, jamais teintée par la
couleur active. */
.orbit-rocket--divider path, .orbit-rocket--divider circle { fill: #3b82f6; }
/* Corrigé (demande explicite) : la roquette "Actualiser" relie le
bouton à la vignette "Création site web", fixée bleue en permanence
(cf. .service-capsule--featured plus haut) — elle doit donc toujours
être bleue elle aussi, jamais teintée par la couleur active. */
.orbit-rocket--refresh path, .orbit-rocket--refresh circle { fill: #3b82f6; }
/* Roquette "Actualiser" : contrairement aux autres, révélée par JS
(classe .is-active posée sur l'aller ET gardée pour le retour, cf.
main.js) et non par un survol. Pendant qu'elle vole (ou repose sur
la vignette "Création site web" après l'aller), le SVG entier passe
au-dessus des vignettes pour que la roquette soit visible par-dessus
la carte — même mécanisme :has() que l'élévation au survol
ci-dessous. */
.orbit-rocket--refresh.is-active {
opacity: 1;
}
.hero-grid:has(.orbit-rocket--refresh.is-active) .hero-orbit-lines {
z-index: 5;
}
.hero-grid:has(.service-capsule--refonte:hover) .orbit-line--refonte {
stroke: #f59e0b;
stroke-width: .7;
filter: drop-shadow(0 0 2px #f59e0b) drop-shadow(0 0 5px rgba(245,158,11,.6));
}
/* Même correction blanche/pâle que la roquette ci-dessus (cf.
.orbit-rocket--cloud) : le trait s'illuminait encore en bleu au
survol, incohérent avec la couleur fixe de cette vignette. */
.hero-grid:has(.service-capsule--cloud:hover) .orbit-line--cloud {
stroke: #f1f5f9;
stroke-width: .7;
filter: drop-shadow(0 0 2px #f1f5f9) drop-shadow(0 0 5px rgba(241,245,249,.6));
}
.hero-grid:has(.service-capsule--programmation:hover) .orbit-line--programmation {
stroke: #10b981;
stroke-width: .7;
filter: drop-shadow(0 0 2px #10b981) drop-shadow(0 0 5px rgba(16,185,129,.6));
}
.hero-grid:has(.service-capsule--conseil:hover) .orbit-line--conseil {
stroke: #8b5cf6;
stroke-width: .7;
filter: drop-shadow(0 0 2px #8b5cf6) drop-shadow(0 0 5px rgba(139,92,246,.6));
}
/* Survol d'une des 4 vignettes satellites : son fil + sa roquette
passent au-dessus de "Création site web" (z-index 2), sans
changer leur relation aux autres vignettes ni au survol du fil
"divider" (non concerné ici). La vignette survolée elle-même
reste toujours au-dessus (cf. règle :hover un peu plus bas, qui
élève son propre z-index au-delà de celui du SVG). */
.hero-grid:has(.service-capsule--refonte:hover) .hero-orbit-lines,
.hero-grid:has(.service-capsule--cloud:hover) .hero-orbit-lines,
.hero-grid:has(.service-capsule--programmation:hover) .hero-orbit-lines,
.hero-grid:has(.service-capsule--conseil:hover) .hero-orbit-lines {
z-index: 3;
}
/* Fil "Création site web" -> divider : même traitement au survol de
la vignette centrale (--featured) que les traits satellites.
Corrigé (demande explicite : "Création site web" reste TOUJOURS
bleue, comme refonte/cloud/programmation/conseil sont fixées sur
leur propre teinte ci-dessus) : bleu fixe au lieu de
rgb(var(--header-accent)), qui suivait encore la couleur active. */
.hero-grid:has(.service-capsule--featured:hover) .orbit-line--divider {
stroke: #3b82f6;
stroke-width: .7;
filter: drop-shadow(0 0 2px #3b82f6) drop-shadow(0 0 5px rgba(59,130,246,.6));
}
.hero-grid:has(.service-capsule--featured:hover) .orbit-rocket--divider { opacity: 1; }
/* Taille des vignettes satellites ramenée à leur format d'origine
(celui de la grille empilée : flex-basis 300 / max-width 360).
Hauteur FIXE (et non min-height) : en position absolue, les
vignettes ne s'alignent pas naturellement sur la plus haute comme
dans une grille flex/grid — un min-height seul laissait donc
"Conseil et Accompagnement" (titre + texte plus longs) dépasser
"Programmation" (contenu plus court). On fixe une hauteur unique
+ line-clamp sur le titre et la description (cf. plus bas) pour
garantir des cartes rigoureusement identiques quel que soit le
texte. */
.page-service .hero-grid .service-capsule {
/* Point d'origine commun ("trou noir", cf. .hero-black-hole) d'où
les 4 vignettes satellites ci-dessous jaillissent avant de
rejoindre leur --settle-top/--settle-left respectif — voir
@keyframes heroPlanetTravel. */
--hole-top: 38%;
--hole-left: 50%;
position: absolute;
top: 0;
left: 0;
/* Agrandies (320x300 -> 345x320, demande explicite "très légèrement")
— cf. .service-capsule--featured plus bas pour la Terre, plus
nettement agrandie. */
width: 345px;
max-width: 380px;
height: 320px;
margin: 0;
z-index: 1;
opacity: 0;
/* PHASE 1 : la vignette voyage depuis le trou noir jusqu'à sa
position (--settle-top/--settle-left), ENCORE sous forme de
boule (cf. @keyframes heroPlanetTravel), "both" : la fin de ce
trajet (opacity/transform/fond) reste acquise en base tant que
les animations suivantes ne prennent pas le relais.
PHASE 1.5 (heroPlanetIdleSpin, 2e animation de la liste) : dès
que le trajet de CETTE vignette est fini (délai = son propre
délai de départ + sa propre durée, cf. animation-delay ci-
dessous et par vignette plus bas), la boule continue de tourner
doucement sur elle-même, en continu, tant qu'elle attend que
les autres planètes arrivent à leur tour — voir main.js pour le
signal de fin d'attente (PHASE 2, .is-all-landed plus bas, qui
remplace entièrement ces 2 animations par heroCapsuleDeploy).
Délai de départ 1s (demande explicite) : le souci n'était pas la
vitesse du trajet mais le fait que les planètes se voyaient
apparaître trop tôt — désormais, PERSONNE ne commence à
apparaître avant 1s, laissant le trou noir seul à l'écran
pendant au moins cette seconde (cf. délais individuels
--refonte/--cloud/--programmation/--conseil plus bas, tous
désormais ≥1s, et heroPlanetTravelCenter plus bas). Durée
encore raccourcie (2.8s -> 2.3s -> 1.4s -> .7s, demande explicite :
les planètes doivent rejoindre leur place plus vite, puis
chorégraphie entière raccourcie d'un facteur ~0.5 en plus) une
fois ce délai initial écoulé (0.5s, ex-1s : même raccourcissement
global ~0.5). */
animation:
heroPlanetTravel .7s linear .5s both,
heroPlanetIdleSpin 5s linear 1.2s infinite,
heroLandingFlash .5s ease-out 1.2s forwards;
}
/* Lisibilité du texte descriptif (demande explicite) : depuis que le fond
de la vignette est quasi entièrement effacé par défaut (planète en
suspension, cf. .service-capsule.is-deployed plus bas), le titre/texte
flotte directement sur le fond du hero (étoiles, planète voisine...)
sans plus aucun repère de contraste derrière lui. Renforcé ICI
uniquement (scopé à ce hero) via une ombre portée marquée + une
opacité de texte plus élevée pour le paragraphe — sans toucher au
style de base de .capsule-content (h4/p, cf. plus haut), réutilisé
ailleurs (ex. .presentation-grid) où le fond de carte reste opaque et
n'a pas besoin de ce renfort. */
.page-service .hero-grid .service-capsule .capsule-content h4 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.7);
}
.page-service .hero-grid .service-capsule .capsule-content p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: rgba(255,255,255,.85);
text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.7);
}
/* Texte masqué durant tout le voyage ET l'attente qui suit (aucune
animation ici) : il ne se révèle qu'à la transformation, cf. la
règle .hero-content.is-all-landed plus bas qui lui ajoute
heroOrbitTextReveal au bon moment. */
.page-service .hero-grid .service-capsule .capsule-content,
.page-service .hero-grid .service-capsule .capsule-cta {
opacity: 0;
transition: opacity .25s ease;
}
/* animation-duration/-delay ci-dessous : listes à 3 valeurs (trajet,
rotation d'attente, flash d'impact) — la 2e valeur de chaque liste
décale le départ de heroPlanetIdleSpin pour qu'il prenne le relais
pile à la fin du trajet PROPRE à cette vignette (délai de départ +
durée du trajet), cf. .service-capsule de base pour la mécanique
complète ; la 3e valeur (heroLandingFlash) partage exactement ce
même repère, pour que le flash se déclenche pile à l'atterrissage. */
.page-service .hero-grid .service-capsule--refonte {
--settle-top: 30%;
--settle-left: 16%;
top: 30%;
left: 16%;
animation-delay: .5s, 1.2s, 1.2s;
}
/* Hébergement et maintenance : trajet +.2s (1.6s au lieu de 1.4s, cf.
.service-capsule de base) — durée explicite en plus du délai de
départ (base 1s + .1s = 1.1s), même logique pour --programmation et
--conseil ci-dessous : un simple décalage de départ pour garder un
effet de cascade dans l'émergence, une fois la seconde initiale
"trou noir seul" écoulée. Écarts resserrés (+.3/+.6/+.9 -> +.2/+.4/
+.6) en même temps que le raccourcissement de la durée de base
(demande explicite : planètes plus rapides à rejoindre leur place),
pour garder les mêmes proportions de cascade. Valeurs divisées par 2
en plus (chorégraphie raccourcie globalement, demande explicite). */
.page-service .hero-grid .service-capsule--cloud {
--settle-top: 30%;
--settle-left: 84%;
top: 30%;
left: 84%;
animation-duration: .8s, 5s, .5s;
animation-delay: .55s, 1.35s, 1.35s;
}
/* Programmation : trajet +.4s (1.8s), délai 1.2s — divisés par 2. */
.page-service .hero-grid .service-capsule--programmation {
--settle-top: 80%;
--settle-left: 32%;
top: 80%;
left: 32%;
animation-duration: .9s, 5s, .5s;
animation-delay: .6s, 1.5s, 1.5s;
}
/* Conseil et accompagnement : trajet +.6s (2s), délai 1.3s — divisés par 2. */
.page-service .hero-grid .service-capsule--conseil {
--settle-top: 80%;
--settle-left: 68%;
top: 80%;
left: 68%;
animation-duration: 1s, 5s, .5s;
animation-delay: .65s, 1.65s, 1.65s;
}
/* Centre : pas de trajet (déjà sur l'ancre du trou noir) — juste une
brève apparition sous forme de boule, qui enchaîne elle aussi sur
une rotation d'attente continue (heroPlanetIdleSpinCenter) jusqu'à
la transformation (PHASE 2 plus bas). Délai avant l'apparition porté
à 1.4s (base 1s commune à toutes les planètes + .4s de retard propre
au centre) : au tout premier instant du chargement, "Création site
web" (la Terre) n'est donc pas encore visible — elle reste à
opacity:0 (frame 0% de heroPlanetTravelCenter, tenue par le fill
"both") le temps de ce délai, puis apparaît normalement. Durée
encore raccourcie (2s -> 1.6s -> 1s -> .5s, même demande que pour les
4 satellites ci-dessus : planètes plus rapides à rejoindre leur
place, puis chorégraphie entière raccourcie d'un facteur ~0.5 en
plus) ; le délai de heroPlanetIdleSpinCenter suit (.7s + .5s = 1.2s)
pour continuer à prendre le relais pile à la fin RÉELLE du trajet. */
.page-service .hero-grid .service-capsule--featured {
top: 38%;
left: 50%;
/* Agrandie une première fois (400x300 -> 460x340) puis rétrécie
(demande explicite, "trop grande") : retour à sa taille
d'origine 400x300 (ratio 4:3), d'où le scale(.25,.333) repris tel
quel (au lieu de .25,.338) dans heroPlanetTravelCenter/
heroPlanetIdleSpinCenter/heroCapsuleDeployCenter plus bas. */
width: 400px;
max-width: 420px;
height: 300px;
z-index: 2;
animation:
heroPlanetTravelCenter .5s linear .7s both,
heroPlanetIdleSpinCenter 5s linear 1.2s infinite,
heroLandingFlash .5s ease-out 1.2s forwards;
}
/* ═══════════════════════════════════════════════════════════════════
PHASE 2 — TRANSFORMATION EN VIGNETTE (déclenchée par JS)
Ne démarre QUE lorsque les 5 planètes ont toutes fini leur trajet et
sont posées en boule à leur place : main.js écoute la fin
("animationend") de heroPlanetTravel/heroPlanetTravelCenter sur les 5
vignettes puis, une fois les 5 reçues, ajoute la classe
.is-all-landed sur .hero-content. Avant ce moment, AUCUNE vignette ne
se déploie — même celle arrivée en premier (le centre, "Création
site web") attend les autres. Léger décalage entre les 5 une fois le
feu vert donné (0/.1/.2/.3/.4s) pour garder un effet de cascade dans
le déploiement lui-même. ═══════════════════════════════════════ */
.page-service .hero-content.is-all-landed .service-capsule {
/* fill "both" (et non juste "forwards") : sur les vignettes
décalées (--refonte/--cloud/--programmation/--conseil ci-dessous,
animation-delay > 0), ça garde l'état d'arrivée de la PHASE 1
(identique au frame 0% de heroCapsuleDeploy, cf. plus bas)
affiché pendant leur délai d'attente propre — sans "both", la
vignette flasherait un instant à son état non-animé (transform
"none", etc.) avant que le délai ne s'écoule.
Durée 1.2s (au lieu de 1s) : les .3s du début sont désormais le
petit "shake" avant transformation (cf. heroCapsuleDeploy), le
reste (.9s) est inchangé pour la transformation elle-même.
Toutes les durées/délais de ce bloc PHASE 2 (déploiement, texte,
planète) divisés par 2 en plus (chorégraphie raccourcie
globalement, demande explicite, mêmes proportions conservées). */
animation: heroCapsuleDeploy .6s cubic-bezier(.16,1,.3,1) both;
}
.page-service .hero-content.is-all-landed .service-capsule--refonte {
animation-delay: .05s;
}
.page-service .hero-content.is-all-landed .service-capsule--cloud {
animation-delay: .1s;
}
.page-service .hero-content.is-all-landed .service-capsule--programmation {
animation-delay: .15s;
}
.page-service .hero-content.is-all-landed .service-capsule--conseil {
animation-delay: .2s;
}
/* Centre : démarre le premier (0s). featuredCapsuleGlow tournait ici en
permanence juste après heroCapsuleDeployCenter — retiré (demande
explicite : plus de halo par défaut, seulement au survol désormais,
cf. .service-capsule--featured.is-deployed / :hover plus bas) : dès
que .is-deployed est posé, cette liste `animation` est de toute façon
entièrement remplacée. */
.page-service .hero-content.is-all-landed .service-capsule--featured {
animation: heroCapsuleDeployCenter .6s cubic-bezier(.16,1,.3,1) both;
}
.page-service .hero-content.is-all-landed .service-capsule .capsule-content,
.page-service .hero-content.is-all-landed .service-capsule .capsule-cta {
animation: heroOrbitTextReveal .8s ease forwards;
}
.page-service .hero-content.is-all-landed .service-capsule--refonte .capsule-content,
.page-service .hero-content.is-all-landed .service-capsule--refonte .capsule-cta {
animation-delay: .05s;
}
.page-service .hero-content.is-all-landed .service-capsule--cloud .capsule-content,
.page-service .hero-content.is-all-landed .service-capsule--cloud .capsule-cta {
animation-delay: .1s;
}
.page-service .hero-content.is-all-landed .service-capsule--programmation .capsule-content,
.page-service .hero-content.is-all-landed .service-capsule--programmation .capsule-cta {
animation-delay: .15s;
}
.page-service .hero-content.is-all-landed .service-capsule--conseil .capsule-content,
.page-service .hero-content.is-all-landed .service-capsule--conseil .capsule-cta {
animation-delay: .2s;
}
/* Fondu croisé de la planète définitive (cf. @keyframes
heroPlanetDiscReveal dans le bloc PHASE 2 plus bas) : mêmes délais que
heroCapsuleDeploy(Center) sur cette même vignette (ci-dessus), pour
rester bien synchronisée avec l'extinction de la boule. */
.page-service .hero-content.is-all-landed .service-capsule .capsule-planet-disc {
animation: heroPlanetDiscReveal .6s cubic-bezier(.16,1,.3,1) both;
}
.page-service .hero-content.is-all-landed .service-capsule--refonte .capsule-planet-disc {
animation-delay: .05s;
}
.page-service .hero-content.is-all-landed .service-capsule--cloud .capsule-planet-disc {
animation-delay: .1s;
}
.page-service .hero-content.is-all-landed .service-capsule--programmation .capsule-planet-disc {
animation-delay: .15s;
}
.page-service .hero-content.is-all-landed .service-capsule--conseil .capsule-planet-disc {
animation-delay: .2s;
}
.page-service .hero-grid .service-capsule:hover {
transform: translate(-50%,-50%) translateY(-6px);
/* Passe au-dessus du fil/roquette (élevé à 3 pendant ce survol,
cf. règle :has() plus haut) : la vignette survolée reste
toujours au premier plan. */
z-index: 4;
}
.page-service .hero-grid .service-capsule.service-capsule--featured:hover {
transform: translate(-50%,-50%) scale(1.13) translateY(-6px);
}
/* ═══════════════════════════════════════════════════════════════════
PHASE 3 — SURVOL "REDEVIENT PLANÈTE" (desktop uniquement)
1re tentative (retirée) : essayer de forcer border-radius/background/
box-shadow au survol par-dessus heroCapsuleDeploy(Center) via
!important. Ça ne marchait pas : une fois qu'une animation a
"terminé" en fill both/forwards, elle CONTINUE de gagner sur une
déclaration normale — mais elle gagne aussi sur les déclarations
!important dans certains navigateurs pour les propriétés qu'elle
gère encore activement via la liste `animation` de l'élément (la
vignette avait toujours heroCapsuleDeploy dans sa liste
d'animations, jamais retirée) : résultat, rien ne changeait, ou la
planète apparaissait masquée derrière le rendu figé de la carte.
Solution robuste : dès que le déploiement de CHAQUE vignette est
réellement fini (cf. main.js, "animationend" sur heroCapsuleDeploy/
heroCapsuleDeployCenter -> classe .is-deployed posée sur CETTE
vignette précise), on retire complètement heroCapsuleDeploy(Center) de
sa liste `animation` (animation:none — y compris featuredCapsuleGlow,
qui ne reprend désormais qu'au survol, cf. plus bas : la garder active
en permanence forçait box-shadow à chaque frame et empêchait
"box-shadow: none" de s'appliquer par défaut) et on fige ses valeurs
finales en dur (mêmes valeurs que le 100% du keyframe). Plus aucune
animation ne contrôle alors transform/border-radius/background/
box-shadow/opacity : un simple
:hover classique (transition, sans !important) peut enfin reprendre
la main normalement. ═══════════════════════════════════════════ */
.page-service .hero-content.is-all-landed .service-capsule.is-deployed {
animation: none;
opacity: 1;
transform: translate(-50%,-50%) rotate(0deg) scale(1);
border-radius: 24px;
background-color: transparent;
background-image: none;
border-color: transparent;
box-shadow: none;
/* Fond encore plus effacé (demande explicite : "je veux vraiment les
planètes en suspension") : le flou de fond hérité de
.service-capsule (backdrop-filter) créait encore un voile visible
même une fois le fond rendu transparent — désactivé par défaut,
restauré au survol (cf. règle :hover plus bas) en même temps que
le reste du "look carte". */
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.page-service .hero-content.is-all-landed .service-capsule--featured.is-deployed {
/* Corrigé (le fond n'était pas effacé pour "Création site web" : le
halo featuredCapsuleGlow tournait encore EN PERMANENCE ici, et ses
keyframes forcent box-shadow à chaque frame — une animation
active gagne toujours sur une déclaration normale pour les
propriétés qu'elle pilote, donc notre "box-shadow: none"
ci-dessous n'avait jamais d'effet réel tant que cette animation
restait active par défaut). Elle est donc retirée par défaut, tout
comme heroCapsuleDeployCenter (animation: none, comme le reste),
et ne reprend qu'au survol (cf. .service-capsule--featured.
is-deployed:hover plus bas) : fond/bordure/ombre/halo masqués
comme les autres tant qu'on ne survole pas. */
animation: none;
transform: translate(-50%,-50%) rotate(0deg) scale(1.09);
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
/* Comportement par défaut (demande explicite) : sans survol, on ne voit
QUE la planète (.capsule-planet-disc) en suspension + le texte
descriptif (.capsule-content, toujours visible, cf. plus haut) — tout
le reste du "look carte" (fond/bordure/ombre/grille/liseré, point de
statut en haut à droite, icône du hublot en haut à gauche, CTA
"Explorer") reste masqué tant qu'on ne survole pas. Le survol inverse
ça : planète masquée, carte révélée (cf. règles :hover plus bas). */
/* animation: none — sans ça, l'animation heroPlanetDiscReveal (posée plus
haut, fill-mode "both") reste active indéfiniment sur cet élément et
son opacité de fin (1) prime TOUJOURS sur une déclaration normale,
même plus spécifique (:hover incluse) : la planète ne pouvait donc
jamais réellement disparaître au survol tant que cette animation
n'était pas explicitement coupée ici. */
.page-service .hero-content.is-all-landed .service-capsule.is-deployed .capsule-planet-disc {
animation: none;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.page-service .hero-content.is-all-landed .service-capsule.is-deployed::before,
.page-service .hero-content.is-all-landed .service-capsule.is-deployed::after,
.page-service .hero-content.is-all-landed .service-capsule.is-deployed .capsule-porthole,
.page-service .hero-content.is-all-landed .service-capsule.is-deployed .capsule-seam,
.page-service .hero-content.is-all-landed .service-capsule.is-deployed .capsule-cta {
opacity: 0;
}
/* Même souci que .capsule-planet-disc ci-dessus : .capsule-status porte
nativement une animation infinie (capsuleStatusPulse, cf. règle de
base) qui, elle aussi, prime en permanence sur "opacity: 0" — sans la
couper ici, le point lumineux restait visible (en pulsant) même hors
survol. Isolé de la liste ci-dessus pour pouvoir lui couper SON
animation spécifiquement. */
.page-service .hero-content.is-all-landed .service-capsule.is-deployed .capsule-status {
animation: none;
opacity: 0;
}
/* Survol : la planète s'efface et la carte (fond/bordure/ombre/flou)
reprend le dessus — léger lift -6px conservé comme retour visuel du
survol (indépendant de l'inversion planète/carte ci-dessus) + le
scale(1.09) propre au centre. Fond/bordure/ombre/flou restaurés aux
mêmes valeurs que l'ancien état "carte" par défaut (cf.
.service-capsule / .service-capsule--featured de base plus haut). */
.page-service .hero-content.is-all-landed .service-capsule.is-deployed:hover {
transform: translate(-50%,-50%) translateY(-6px) scale(1);
background-color: rgba(7,10,18,.78);
border-color: rgba(255,255,255,.07);
box-shadow: none;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* Passe au-dessus du fil/roquette (élevé à 3 pendant ce survol, cf.
règle :has() plus haut) : la vignette survolée reste toujours au
premier plan. */
z-index: 4;
}
.page-service .hero-content.is-all-landed .service-capsule--featured.is-deployed:hover {
/* Le halo pulsant (featuredCapsuleGlow) ne reprend qu'ici, pendant le
survol — cf. commentaire sur .service-capsule--featured.is-deployed
plus haut : il ne doit plus tourner en permanence, seulement quand
la carte est révélée. Corrigé (demande explicite : cette vignette
reste TOUJOURS bleue) : background-color/box-shadow utilisaient
encore rgb(var(--header-accent)) au lieu du bleu fixe déjà posé sur
border-color juste en dessous — remplacés par le même bleu
(#3b82f6 / rgba(59,130,246,...)) que .service-capsule--featured de
base, pour ne plus suivre la couleur active au survol. */
animation: featuredCapsuleGlow 3.4s ease-in-out infinite;
transform: translate(-50%,-50%) translateY(-6px) scale(1.09);
background-color: rgba(59,130,246,.12);
border-color: rgba(59,130,246,.55);
box-shadow: 0 22px 55px rgba(59,130,246,.24), 0 10px 26px rgba(0,0,0,.30);
}
.page-service .hero-content.is-all-landed .service-capsule.is-deployed:hover .capsule-planet-disc {
opacity: 0;
transform: translate(-50%, -50%) scale(.82);
}
/* Contenu carte (grille de fond, liseré bas, point de statut, hublot,
séparateur, CTA) : révélé en fondu le temps du survol, planète
masquée pendant ce temps. .capsule-content (titre + texte) n'est PAS
concerné : il reste affiché en permanence (cf. commentaire plus
haut), donc pas de bascule d'opacité ici pour lui. */
.page-service .hero-content.is-all-landed .service-capsule.is-deployed:hover::before,
.page-service .hero-content.is-all-landed .service-capsule.is-deployed:hover::after,
.page-service .hero-content.is-all-landed .service-capsule.is-deployed:hover .capsule-porthole,
.page-service .hero-content.is-all-landed .service-capsule.is-deployed:hover .capsule-seam,
.page-service .hero-content.is-all-landed .service-capsule.is-deployed:hover .capsule-cta {
opacity: 1;
}
/* Point de statut : ne redevient visible qu'au survol, et ne se remet à
pulser (capsuleStatusPulse) que là aussi — cf. animation:none posé par
défaut juste au-dessus. */
.page-service .hero-content.is-all-landed .service-capsule.is-deployed:hover .capsule-status {
animation: capsuleStatusPulse 2.8s ease-in-out infinite;
opacity: 1;
}
/* Icône du hublot (en haut à gauche de la vignette) remplacée par la
texture de LA planète de cette vignette pendant le survol (demande
explicite) — le hublot lui-même ne redevient visible qu'au survol
(cf. règle d'opacité juste au-dessus), c'est donc uniquement SON
CONTENU qui change ici : l'icône ligne (boussole/nuage/chevrons/
cœur) s'efface au profit d'une miniature de --capsule-planet-img
(même variable que .capsule-planet-disc plus haut, cf.
.service-capsule--refonte/--cloud/--programmation/--conseil). */
.page-service .hero-content.is-all-landed .service-capsule.is-deployed:hover .porthole-inner {
background-image: var(--capsule-planet-img);
background-size: cover;
background-position: center;
}
.page-service .hero-content.is-all-landed .service-capsule.is-deployed:hover .porthole-inner svg {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.page-service .hero-content,
.page-service .hero-content * {
animation-duration: .01s !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: .01s !important;
transition-delay: 0s !important;
}
/* Roquettes SVG (, SMIL — non couvertes par les
propriétés CSS animation/transition ci-dessus) : purement
décoratives et non indispensables au parcours. */
.orbit-rocket {
display: none !important;
}
}
}
/* PHASE 1 — TRAJET (heroPlanetTravel) : la vignette n'est encore qu'une
"planète" (boule) qui sort du trou noir et rejoint sa position, elle ne
se transforme PAS en vignette ici (cf. PHASE 2, heroCapsuleDeploy plus
bas, déclenchée séparément par JS une fois les 5 planètes en place).
top/left animés en plus de transform/opacity/etc. : la boule part
littéralement du trou noir d'entrée (--hole-top/--hole-left, cf.
.hero-black-hole et .page-service .hero-grid .service-capsule) entre 0%
et 15% (elle y tourne sur place, encore minuscule, le temps de bien
marquer sa "naissance" au trou noir), puis VOYAGE en ligne droite
jusqu'à sa position finale (--settle-top/--settle-left, propre à chaque
vignette --refonte/--cloud/--programmation/--conseil) entre 15% et
100% — rotation qui ralentit jusqu'à une vitesse de croisière lente
plutôt que de s'arrêter net (cf. .16,1,.3,1 sur ce dernier tronçon),
pour qu'elle ait l'air "posée mais toujours vivante" en boule une fois
arrivée, dans l'attente de la PHASE 2. Durée volontairement courte (cf.
animation-duration sur .service-capsule/--cloud/--programmation/
--conseil) : le trajet doit être vif, contrairement à l'attente qui
peut durer le temps que les autres planètes arrivent. */
/* Traînée lumineuse pendant le trajet (demande explicite) : lueur externe
colorée (var(--capsule-color), même teinte que la sphère) ajoutée EN PLUS
des ombres internes existantes — pleine intensité de 15% à 70% (tout le
"vol"), puis rejoint la valeur de repos (aucune lueur externe) à 100%,
pile à l'instant où heroPlanetIdleSpin prend le relais avec exactement
le même box-shadow "nu" : aucun saut visuel à l'atterrissage, la lueur
s'éteint juste avant. 70% n'a besoin de redéclarer QUE box-shadow — les
autres propriétés (top/left/transform...) continuent de s'interpoler
normalement entre 15% et 100%. */
@keyframes heroPlanetTravel {
0% { top: var(--hole-top); left: var(--hole-left); transform: translate(-50%,-50%) rotate(-720deg) scale(.28); opacity: 0; border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); animation-timing-function: linear; }
15% { top: var(--hole-top); left: var(--hole-left); transform: translate(-50%,-50%) rotate(-612deg) scale(.28); opacity: 1; border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22), 0 0 34px 10px var(--capsule-color); }
70% { box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22), 0 0 34px 10px var(--capsule-color); }
100% { top: var(--settle-top); left: var(--settle-left); transform: translate(-50%,-50%) rotate(-90deg) scale(.28); opacity: 1; border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); animation-timing-function: cubic-bezier(.16,1,.3,1); }
}
/* PHASE 1.5 — ATTENTE (heroPlanetIdleSpin) : une fois posée (fin de
heroPlanetTravel ci-dessus), la boule continue de tourner doucement sur
elle-même en boucle, le temps que les autres planètes arrivent à leur
tour (cf. animation-delay 2e valeur sur .service-capsule de base et par
vignette, calé pour démarrer pile à la fin DU TRAJET PROPRE à chacune).
0% reprend très exactement l'état d'arrivée de heroPlanetTravel
(rotate(-90deg) scale(.28), même fond "planète") pour un enchaînement
sans à-coup ; 100% = +360° (un tour complet), boucle "infinite" douce et
linéaire. Toutes les propriétés du "look boule" (opacity, border-radius,
fond, ombre) sont réaffirmées à chaque palier — même raison que pour
heroCapsuleDeploy plus bas : sans ça, dès que cette animation prend le
relais de heroPlanetTravel, les propriétés qu'elle ne mentionne pas
retomberaient sur les valeurs statiques non animées de .service-capsule
(opacity:0 notamment). Remplacée entièrement (comme heroPlanetTravel)
par heroCapsuleDeploy dès que .is-all-landed apparaît. */
@keyframes heroPlanetIdleSpin {
0% { transform: translate(-50%,-50%) rotate(-90deg) scale(.28); opacity: 1; border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
100% { transform: translate(-50%,-50%) rotate(-450deg) scale(.28); opacity: 1; border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
}
/* PHASE 2 — DÉPLOIEMENT (heroCapsuleDeploy) : reprend très exactement
l'état d'arrivée de heroPlanetTravel ci-dessus (même rotate/scale/fond
"planète" à 0%) pour un enchaînement sans à-coup. Avant de se
transformer, la boule tremble légèrement sur place (0%->30%, cf.
translate(x,y) ajouté APRÈS le translate(-50%,-50%) de centrage — un
simple décalage additionnel en pixels, qui ne perturbe donc pas
l'ancrage de la vignette) : un petit "shake" pour marquer le moment où
elle s'apprête à se déployer. Termine ensuite (30%->100%, demande
explicite : plus de stade "vignette" carrée visible entre le shake et
l'état final) en s'éteignant sur place (couleur/image/bordure/ombre vers
transparent, ENCORE petite et ronde, cf. palier 75% plus bas) avant de
grandir jusqu'aux dimensions réelles de la carte une fois invisible —
.capsule-planet-disc prend le relais visuel entre-temps (fondu croisé,
cf. .service-capsule.is-deployed plus haut). Jamais lancée
automatiquement : uniquement via la classe .is-all-landed posée par JS
sur .hero-content (cf. règles plus haut), une fois les 5 planètes
arrivées.
opacity:1 explicite à chaque palier (important !) : quand cette
animation remplace heroPlanetTravel (qui, lui, pilotait l'opacité), la
propriété doit rester sous contrôle du keyframe tout du long — sinon,
pendant l'intervalle où AUCUNE des deux animations ne déclare opacity,
le navigateur retombe sur la valeur non animée de .service-capsule
(opacity:0 statique), ce qui faisait disparaître la vignette au lieu de
la voir se transformer. */
@keyframes heroCapsuleDeploy {
0% { opacity: 1; transform: translate(-50%,-50%) translate(0,0) rotate(-90deg) scale(.28); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); animation-timing-function: ease-in-out; }
6% { opacity: 1; transform: translate(-50%,-50%) translate(-5px,1px) rotate(-90deg) scale(.28); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
12% { opacity: 1; transform: translate(-50%,-50%) translate(4px,-2px) rotate(-90deg) scale(.28); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
18% { opacity: 1; transform: translate(-50%,-50%) translate(-4px,2px) rotate(-90deg) scale(.28); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
24% { opacity: 1; transform: translate(-50%,-50%) translate(2px,-1px) rotate(-90deg) scale(.28); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
30% { opacity: 1; transform: translate(-50%,-50%) translate(0,0) rotate(-90deg) scale(.28); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); animation-timing-function: cubic-bezier(.16,1,.3,1); }
/* Corrigé (demande explicite : "avant la phase finale elle passe par le
stade vignette, je ne veux pas — shake puis état final") : la boule ne
doit plus jamais se dérouler en carte rectangulaire opaque. Elle reste
d'abord identique à 30% (60% : même transform, rien ne bouge — la
boule "tient" son état posé) puis s'éteint (couleur/image/bordure/
ombre vers transparent) PENDANT qu'elle est ENCORE petite et ronde
(60%->90%), pendant que .capsule-planet-disc apparaît en fondu croisé
à SA place (cf. @keyframes heroPlanetDiscReveal plus bas — même axe
temporel, décalée pour se chevaucher avec cette extinction, pas de
"trou" entre les deux). Seule ENSUITE (90%->100%), une fois
invisible, la boîte grandit jusqu'à ses dimensions réelles de carte —
un changement de taille/forme totalement imperceptible puisque rien
n'y est plus dessiné. */
60% { opacity: 1; transform: translate(-50%,-50%) rotate(-90deg) scale(.28); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
90% { opacity: 1; transform: translate(-50%,-50%) rotate(-90deg) scale(.28); border-radius: 50%; background-color: transparent; background-image: none; border-color: transparent; box-shadow: none; }
100% { opacity: 1; transform: translate(-50%,-50%) rotate(0deg) scale(1); border-radius: 24px; background-color: transparent; background-image: none; border-color: transparent; box-shadow: none; }
}
/* Fondu croisé de .capsule-planet-disc (texture planète définitive, cf.
.capsule-planet-disc de base plus haut) pendant la 2e moitié de
heroCapsuleDeploy/heroCapsuleDeployCenter : reste masquée pendant le shake
ET le début de l'extinction de la boule (0%->55%), puis apparaît en fondu
(55%->100%) pour se superposer à l'extinction de la boule (60%->90% sur le
conteneur parent, cf. ci-dessus) sans jamais laisser de "trou" où ni l'une
ni l'autre ne serait visible. Mêmes délai/durée/cadence que
heroCapsuleDeploy(Center) sur cette même vignette (cf. règles
".is-all-landed .service-capsule--X .capsule-planet-disc" plus haut) pour
rester parfaitement synchronisée. Une fois terminée (opacity:1, scale(1)),
ces valeurs sont ensuite reprises à l'identique par .service-capsule.
is-deployed .capsule-planet-disc (état de repos permanent) : aucun saut au
moment où JS pose .is-deployed. */
@keyframes heroPlanetDiscReveal {
0%, 55% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Le centre (--featured) fait 400×300px (rectangle 4:3, pas carré) : un
scale() uniforme donne donc une boule OVALE (ratio conservé). Pour
une vraie boule ronde pendant la phase 1, on compense avec un scale
non-uniforme scale(sx, sy) où sy = sx × 4/3 (400×.25 = 300×.333 =
~100px des deux côtés → cercle). Au repos (100%), on repasse à un
scale() uniforme classique qui restaure le vrai rectangle 400×300 — fond/
halo restent transparents par défaut comme les 4 autres (featuredCapsuleGlow
ne reprend qu'au survol désormais, cf. .service-capsule--featured.
is-deployed:hover).
Même découpage en 2 phases que heroPlanetTravel/heroCapsuleDeploy
ci-dessus : le centre ne voyage pas (déjà posé sur l'ancre du trou
noir), mais attend lui aussi la classe .is-all-landed avant de se
transformer — cf. heroCapsuleDeployCenter plus bas. */
/* Même traînée lumineuse que heroPlanetTravel (satellites) ci-dessus,
appliquée au centre. */
@keyframes heroPlanetTravelCenter {
0% { transform: translate(-50%,-50%) rotate(612deg) scale(.25, .333); opacity: 0; border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); animation-timing-function: linear; }
15% { transform: translate(-50%,-50%) rotate(520deg) scale(.25, .333); opacity: 1; border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22), 0 0 34px 10px var(--capsule-color); }
70% { box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22), 0 0 34px 10px var(--capsule-color); }
100% { transform: translate(-50%,-50%) rotate(80deg) scale(.25, .333); opacity: 1; border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); animation-timing-function: cubic-bezier(.16,1,.3,1); }
}
/* Flash d'impact à l'atterrissage (demande explicite) : un bref anneau
lumineux qui se propage et se dissipe, déclenché pile au moment où
heroPlanetTravel(Center) se termine et heroPlanetIdleSpin(Center) prend
le relais (même délai que la 2e animation de la liste, cf. .service-
capsule/--refonte/--cloud/--programmation/--conseil/--featured plus
haut). Un 3e "calque" de box-shadow, EN PLUS des ombres internes de la
sphère (déjà pilotées par heroPlanetIdleSpin en parallèle) : 0% et 100%
correspondent exactement au box-shadow "au repos" (aucun saut visuel
avant/après), le pic (30%) ajoute un anneau externe large et diffus qui
se referme et s'efface aussitôt. */
@keyframes heroLandingFlash {
0% { box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22), 0 0 0 0 var(--capsule-color); }
30% { box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22), 0 0 55px 22px var(--capsule-color); }
100% { box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22), 0 0 0 0 rgba(0,0,0,0); }
}
/* Même principe que heroPlanetIdleSpin (satellites) : rotation d'attente
continue une fois heroPlanetTravelCenter terminé, en repartant très
exactement de son état d'arrivée (rotate(80deg) scale(.25,.333)). */
@keyframes heroPlanetIdleSpinCenter {
0% { transform: translate(-50%,-50%) rotate(80deg) scale(.25, .333); opacity: 1; border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
100% { transform: translate(-50%,-50%) rotate(-280deg) scale(.25, .333); opacity: 1; border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
}
/* Même petit "shake" que heroCapsuleDeploy ci-dessus (0%->30%), puis même
correctif (30%->100% : extinction sur place avant croissance invisible,
plus de stade "vignette" visible — cf. commentaire détaillé sur
heroCapsuleDeploy plus haut). */
@keyframes heroCapsuleDeployCenter {
0% { opacity: 1; transform: translate(-50%,-50%) translate(0,0) rotate(80deg) scale(.25, .333); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); animation-timing-function: ease-in-out; }
6% { opacity: 1; transform: translate(-50%,-50%) translate(-5px,1px) rotate(80deg) scale(.25, .333); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
12% { opacity: 1; transform: translate(-50%,-50%) translate(4px,-2px) rotate(80deg) scale(.25, .333); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
18% { opacity: 1; transform: translate(-50%,-50%) translate(-4px,2px) rotate(80deg) scale(.25, .333); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
24% { opacity: 1; transform: translate(-50%,-50%) translate(2px,-1px) rotate(80deg) scale(.25, .333); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
30% { opacity: 1; transform: translate(-50%,-50%) translate(0,0) rotate(80deg) scale(.25, .333); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); animation-timing-function: cubic-bezier(.16,1,.3,1); }
/* Même correctif que heroCapsuleDeploy ci-dessus (demande explicite :
plus de stade "vignette" visible, shake puis état final directement) :
tient d'abord son état posé (60%), puis la couleur/bordure/ombre
s'éteint pendant que la boule est ENCORE petite et ronde (60%->90%),
en même temps que .capsule-planet-disc apparaît en fondu croisé (cf.
@keyframes heroPlanetDiscReveal plus bas) — la boîte ne grandit
jusqu'au rectangle final QU'UNE FOIS invisible (90%->100%). Fond/halo
permanents (featuredCapsuleGlow) ne reprennent qu'au survol désormais
(cf. .service-capsule--featured.is-deployed:hover), donc plus de
couleur ici non plus par défaut. */
60% { opacity: 1; transform: translate(-50%,-50%) rotate(80deg) scale(.25, .333); border-radius: 50%; background-color: var(--capsule-color); background-image: var(--capsule-planet-img); background-size: cover; background-position: center; box-shadow: inset -22px -22px 46px rgba(0,0,0,.45), inset 16px 16px 32px rgba(255,255,255,.22); }
90% { opacity: 1; transform: translate(-50%,-50%) rotate(80deg) scale(.25, .333); border-radius: 50%; background-color: transparent; background-image: none; border-color: transparent; box-shadow: none; }
100% { opacity: 1; transform: translate(-50%,-50%) rotate(0deg) scale(1.09); border-radius: 24px; background-color: transparent; background-image: none; border-color: transparent; box-shadow: none; }
}
/* Apparition (seulement) du trou noir d'entrée (cf. .hero-black-hole) :
"dézoom" — opacity reste à 1 du début à la fin, c'est le scale qui fait
tout le travail (16 -> 1, autour du même point translate(-50%,-50%) déjà
fixé sur l'élément). Fill "forwards" : la dernière image (scale 1) est
conservée indéfiniment, le trou noir ne redisparaît jamais, il reste en
fond en permanence. Le disque (::before) et l'horizon (::after)
continuent en parallèle de tourner/pulser via leurs propres animations
infinite, indépendamment de ce scale qui ne porte que sur le conteneur
parent. */
@keyframes heroBlackHoleLife {
/* 0% à opacity:0 (et non 1) : avec "animation-fill-mode: both", cette
frame reste affichée STATIQUEMENT pendant tout le animation-delay
(cf. .index-hero-black-hole : var(--reveal-delay)). Avant, opacity:1
ici rendait le trou noir immense visible dès le chargement, pendant
toute la frappe du tagline — demande explicite : il ne doit
apparaître qu'une fois "votre présence dans l'espace numérique"
entièrement affiché. À 1%, l'opacité bascule à 1 (toujours à
scale(16)) : le trou noir apparaît donc et commence à dézoomer dans
le même instant, sans palier statique visible avant le rétrécissement. */
0% { opacity: 0; transform: translate(-50%, -50%) scale(16); }
1% { opacity: 1; transform: translate(-50%, -50%) scale(16); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Fermeture (demande explicite) : mouvement inverse et symétrique du
dézoom d'entrée ci-dessus — le trou noir se réduit jusqu'à un point puis
disparaît, plutôt que de rester indéfiniment (cf. .is-all-landed
.hero-black-hole plus haut pour le déclenchement/délai). Tenue à
scale(1) jusqu'à 15% (petite marge avant que la fermeture ne démarre
réellement, cf. .hero-black-hole::before/::after qui continuent de
tourner/pulser sans interruption pendant ce temps). */
@keyframes heroBlackHoleClose {
0%, 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
85% { opacity: 1; transform: translate(-50%, -50%) scale(.04); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}
/* NOTE (chorégraphie raccourcie globalement d'un facteur ~0.5, demande
explicite) : les valeurs ABSOLUES citées ci-dessous (1.2s, 1.6s, 1.4s,
0.2s...) sont celles d'AVANT ce raccourcissement — les pourcentages du
keyframe (87.5%, 100%) sont eux inchangés et restent exacts avec les
durées actuelles (heroCapsuleDeploy .6s / heroOrbitTextReveal .8s, cf.
règles plus haut) : le raisonnement proportionnel ci-dessous reste
valable tel quel, seules les secondes absolues ont été divisées par 2.
Re-retardé (demande explicite : "il ne doit y avoir que la planète de
visible jusqu'à son arrivée, +0.2s avant l'arrivée du texte") : la seule
tenue à 70% d'une durée PARTAGÉE avec heroCapsuleDeploy (1.2s) laissait
encore le texte commencer à apparaître pendant la fin de l'atterrissage
de la boule. Ici, la durée de CETTE animation est allongée à 1.6s (au
lieu de 1.2s, cf. règle ".is-all-landed .service-capsule .capsule-content,
.capsule-cta" plus haut) tout en gardant le même animation-delay par
vignette (0/.1/.2/.3/.4s) que heroCapsuleDeploy(Center) : le texte reste
donc à opacity:0 pendant 87.5% de 1.6s = 1.4s, soit EXACTEMENT les 1.2s
du déploiement complet de la boule/planète (heroCapsuleDeploy, jusqu'à ce
que .capsule-planet-disc soit à 100% visible) + 0.2s de marge avant que le
texte ne commence son propre fondu (les 0.2s/12.5% restants). */
@keyframes heroOrbitTextReveal {
0%, 87.5% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes heroOrbitLineFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Arrivée du logo/titre (cf. .services-hero-logo, .hero-content.is-all-landed) :
simple fondu, volontairement sans toucher transform (déjà occupé par
floatSub, la flottaison continue du logo — cf. commentaire sur la règle
gated). */
@keyframes heroLogoArrive {
from { opacity: 0; }
to { opacity: 1; }
}
/* ─── SECTIONS LAYOUT — section + divider = 100dvh ─── */
/* Chaque section (sauf la dernière) est suivie d'un .section-divider
(160px) menant à la section suivante : on retranche cette hauteur (+ les
25px de SCROLL_OFFSET laissés en haut à l'arrivée par ancre, cf. main.js)
pour que section + divider tiennent ensemble dans un seul écran quand on
arrive sur l'ancrage. La dernière section (--last) n'a pas de divider
qui suit : elle reprend quasi 100dvh plein écran (voir plus bas). */
.page-service .section-block {
padding: 100px clamp(1rem, 4vw, 3rem);
position: relative;
min-height: calc(100dvh - 185px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: perspective(1100px) translateZ(-120px) translateY(60px);
transition:
opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
.page-service .section-block.section-block--last {
min-height: calc(100dvh - 25px);
}
.section-block.is-visible {
opacity: 1;
transform: perspective(1100px) translateZ(0) translateY(0);
}
/* ─── DIVIDER : ligne se dessine puis la fusée tombe ─── */
.section-divider {
min-height: 160px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* margin-top calé pour passer sous l'étiquette-texte de .divider-action
(toujours visible, pas juste au survol : top:calc(100% + 14px) + ~27px de
hauteur propre ≈ 41px sous la bulle) plutôt que sous la seule bulle — sinon
la ligne traverse le texte au lieu de s'afficher après lui. Ordre voulu,
de haut en bas : fusée, texte, barre. */
.section-divider .divider-line {
width: 140px;
max-width: 40%;
height: 2px;
margin: 41px auto 0;
border-radius: 2px;
background: linear-gradient(90deg, transparent, rgba(var(--header-accent),.55), transparent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-divider.is-visible .divider-line {
transform: scaleX(1);
}
.section-divider .rocket-wrapper {
opacity: 0;
transform: translateY(-47px) scale(0.6);
transition:
opacity 0.5s ease 0.55s,
transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s;
}
/* +8px sur la position finale (fusée un peu trop haute par rapport à la
ligne juste en dessous, sur accueil.php ET services.php — règle non
scopée, donc partagée par toutes les pages avec ce système de divider). */
.section-divider.is-visible .rocket-wrapper {
opacity: 1;
transform: translateY(8px) scale(1);
}
/* ─── ACCUEIL.PHP : espacement uniforme des 8 dividers inter-sections ───
Chacun avait son propre traitement au cas par cas (certains gardaient le
min-height:160px hérité de la règle générique ci-dessus, d'autres avaient
été rapiécés séparément, et celui de la hero n'était même pas un
.section-divider) : le rythme vertical variait d'une transition à
l'autre. On unifie ici en une seule règle, avec un écart cohérent avant
la bulle — y compris pour le divider de la hero, désormais structuré à
l'identique. .site-main est propre à accueil.php (vérifié : aucune autre
page ne porte cette classe), donc ceci ne touche pas les dividers de
offres-site.php. */
.site-main .section-divider {
min-height: 0;
padding: 0;
margin-top: clamp(18px, 3vh, 32px);
margin-bottom: 0;
}
.site-main .section-divider .rocket-wrapper {
padding: 10px 50px;
}
.layout-split {
display: flex;
align-items: center;
justify-content: center;
gap: 80px;
max-width: 1400px;
width: 100%;
margin: 0 auto;
}
.layout-right { flex-direction: row-reverse; }
/* ========================= GALAXY TITLE BUBBLE ========================= */
@keyframes galaxyRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes galaxyPulse {
0%, 100% { box-shadow: 0 0 28px rgba(70,30,130,.16), 0 0 56px rgba(70,30,130,.06); }
50% { box-shadow: 0 0 44px rgba(70,30,130,.26), 0 0 88px rgba(70,30,130,.10); }
}
@keyframes galaxyPulseBlue {
0%, 100% { box-shadow: 0 0 28px rgba(8,70,180,.18), 0 0 56px rgba(8,70,180,.07); }
50% { box-shadow: 0 0 44px rgba(8,70,180,.30), 0 0 88px rgba(8,70,180,.12); }
}
@keyframes galaxyPulseCyan {
0%, 100% { box-shadow: 0 0 28px rgba(4,120,155,.18), 0 0 56px rgba(4,120,155,.07); }
50% { box-shadow: 0 0 44px rgba(4,120,155,.30), 0 0 88px rgba(4,120,155,.12); }
}
.title-bubble {
flex: 0 0 380px;
width: 380px;
height: 380px;
border-radius: 50%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(2.1rem, 1.8vw, 2.55rem);
font-weight: 800;
letter-spacing: -.02em;
color: #ffffff;
padding: 0;
--galaxy-speed: 22s;
opacity: 0;
transform: scale(0.08) rotate(-300deg);
transition:
opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
will-change: transform, opacity;
}
.section-block.is-visible .title-bubble {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.title-bubble::before {
content: "";
position: absolute;
inset: -10%;
border-radius: 50%;
background: conic-gradient(
from 0deg,
rgba(8,60,180,0) 0deg,
rgba(8,60,180,.18) 28deg,
rgba(8,60,180,0) 58deg,
rgba(70,30,150,0) 118deg,
rgba(70,30,150,.12) 148deg,
rgba(70,30,150,0) 178deg,
rgba(4,100,140,0) 238deg,
rgba(4,100,140,.10) 268deg,
rgba(4,100,140,0) 298deg,
rgba(8,60,180,0) 360deg
);
animation: galaxyRotate var(--galaxy-speed) linear infinite;
pointer-events: none;
z-index: 0;
}
.title-bubble::after {
content: "";
position: absolute;
inset: 20%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* Voyage : zoom + accélération de rotation */
.title-bubble:hover {
transform: scale(1.08);
transition:
transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0s,
opacity 0s;
}
.section-title--essentiel {
/* Corrigé (demande explicite : "il faut mettre galaxy web dans la
bulle titre Création site web") : le fichier réel s'appelle
galaxie-web.png (cf. assets/image/ et les 2 autres usages plus bas
dans ce fichier) — "Galaxy-web.png" n'existait pas, l'image ne
s'affichait donc jamais, seuls le glow bleu (galaxyPulseBlue) et la
bordure restaient visibles. */
background-image: url('../image/galaxie-web.png');
/* cover seul ne laissait aucune marge verticale dans ce cercle 380px
(la hauteur de la source cale exactement sur la hauteur de la boîte),
ce qui exposait tel quel le bord haut tronqué du fichier source.
170% auto crée de la marge, "center bottom" recadre vers le bas pour
masquer ce bord tronqué. */
background-size: 170% auto;
background-position: center bottom;
border: 1px solid rgba(30,65,165,.16);
animation: galaxyPulseBlue 9s ease-in-out infinite;
transition: background-image 0.3s ease;
}
/* Demande explicite : le bouton-titre "Création site web" doit devenir
bleu au survol (comme les 4 autres titres de services.php ci-dessous),
plutôt que son ancien bleu-marine quasi noir. */
.section-title--essentiel:hover {
background-image: none;
background-color: rgba(59,130,246,.92);
}
/* Demande explicite : le titre "Hébergement et maintenance" (section 4)
passe de la galerie-galaxie teintée cyan à la texture planet-blanc,
et devient bleu au survol (comme les 4 autres titres). */
.section-title--pro {
background-image: url('../image/planet-blanc.webp');
background-size: cover;
background-position: center;
border: 1px solid rgba(4,100,140,.16);
animation: galaxyPulseCyan 9s ease-in-out infinite;
transition: background-image 0.3s ease;
}
.section-title--pro:hover {
background-image: none;
background-color: rgba(59,130,246,.92);
}
/* Demande explicite : le titre "Conseil et accompagnement" (section 6)
passe de la galerie-galaxie teintée violette à la texture planet-violet,
et devient bleu au survol (comme les 4 autres titres). */
.section-title--surmesure {
background-image: url('../image/planet-violet.webp');
background-size: cover;
background-position: center;
border: 1px solid rgba(65,22,140,.16);
animation: galaxyPulse 9s ease-in-out infinite;
transition: background-image 0.3s ease;
}
.section-title--surmesure:hover {
background-image: none;
background-color: rgba(59,130,246,.92);
}
.section-title-link {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
color: inherit;
width: 100%;
padding: 20px;
}
.section-title-main {
display: block;
line-height: 1.2;
text-shadow:
0 2px 8px rgba(0,0,0,.95),
0 0 24px rgba(0,0,0,.85),
0 0 2px rgba(0,0,0,1);
}
.section-title-sub {
display: inline-block;
margin-top: 12px;
font-size: .44em;
font-weight: 500;
opacity: .90;
padding: 6px 12px;
position: relative;
text-align: center;
transition: opacity .25s ease;
color: rgba(255,255,255,.92);
text-shadow:
0 1px 6px rgba(0,0,0,.95),
0 0 16px rgba(0,0,0,.85);
}
.section-title-sub::before,
.section-title-sub::after {
content: "";
display: block;
width: 60%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(160,210,255,.55), transparent);
margin: 0 auto;
}
.section-title-sub::before { margin-bottom: 6px; }
.section-title-sub::after { margin-top: 6px; }
.title-bubble:hover .section-title-sub { opacity: 1; }
/* ─── OFFERS GRID ─── */
.layout-split .offers-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
gap: 80px 120px;
justify-content: center;
align-items: start;
}
/* « Création web » a 3 offres au lieu de 1-2 : avec le gap standard de
120px elles retombent sur 2 colonnes (2 cartes + 1 en dessous), ce qui
rend cette section bien plus haute que les autres et l'empêche de
tenir dans un seul écran avec son divider. Un gap resserré permet aux
3 cartes de tenir sur une seule ligne, comme les autres sections. */
#section-offers .offers-grid {
gap: 80px 90px;
}
.section-title--essentiel::after,
.section-title--pro::after,
.section-title--surmesure::after,
.section-title--programmation::after,
.section-title--refonte::after {
transition: opacity 0.6s ease;
opacity: 0;
}
/* Chaque titre de section a désormais sa PROPRE image de fond au hover
(demande explicite) au lieu d'une image générique partagée (l'ancienne
valeur unique "fusee1.png" n'existait même pas dans assets/image, donc
l'image ne s'affichait jamais, sur aucun des 5 titres) : chaque bouton-
*-bleu.png est une image dédiée, déjà recadrée en cercle plein cadre
(600×600, le disque touche les 4 bords du canevas), donc "cover" suffit à
la faire remplir entièrement la bulle sans aucune marge visible. */
.section-title--essentiel {
--bubble-img: url('../image/bouton-creation-site-bleu.png');
}
.section-title--refonte {
--bubble-img: url('../image/bouton-refonte-bleu.png');
}
.section-title--pro {
--bubble-img: url('../image/bouton-maintenance-hebergement-bleu.png');
}
.section-title--programmation {
--bubble-img: url('../image/bouton-programmation-bleu.png');
}
.section-title--surmesure {
--bubble-img: url('../image/bouton-conseil-accompagnement-bleu.png');
}
.section-title--essentiel::after,
.section-title--pro::after,
.section-title--surmesure::after,
.section-title--programmation::after,
.section-title--refonte::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--bubble-img) center / cover;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.6s ease;
}
.section-title--essentiel:hover::after,
.section-title--pro:hover::after,
.section-title--surmesure:hover::after,
.section-title--programmation:hover::after,
.section-title--refonte:hover::after {
opacity: 1;
}
/* ========================= PLANET CARDS ========================= */
@keyframes ribbonPulse {
0%, 100% { box-shadow: 0 0 0 rgba(251,191,36,0); }
50% { box-shadow: 0 0 14px rgba(251,191,36,.38); }
}
@keyframes planetSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes highlightFloat {
0%, 100% { opacity: .22; transform: scale(1); }
50% { opacity: .34; transform: scale(1.06); }
}
/* ─── Carte — conteneur principal ─── */
.planet-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
text-decoration: none;
color: inherit;
background: transparent;
border: none;
opacity: 0;
transform: translateY(100px) scale(0.45);
filter: blur(8px);
transition:
opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.65s ease;
will-change: transform, opacity;
animation: none;
}
.planet-card.is-visible {
opacity: 0.9;
transform: translateY(0) scale(1);
filter: blur(0);
}
.planet-card:nth-child(1) { transition-delay: 0.12s; }
.planet-card:nth-child(2) { transition-delay: 0.28s; }
.planet-card:nth-child(3) { transition-delay: 0.44s; }
.planet-card:hover {
transform: scale(1.14);
z-index: 2;
transition: transform .65s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ─── Sphère ─── */
.planet-sphere {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
transition: transform .45s ease, box-shadow .45s ease;
}
/* Surface bands — ::before (tourne, clippé par overflow:hidden) */
.planet-sphere::before {
content: "";
position: absolute;
inset: -25%;
border-radius: 50%;
pointer-events: none;
z-index: 1;
opacity: 0.30;
animation: planetSpin 40s linear infinite;
}
/* Atmospheric rim — ::after (inner glow sur le bord) */
.planet-sphere::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
z-index: 3;
}
/* ─── Infos dans la sphère ─── */
.planet-info {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 300px;
border-radius: 50%;
clip-path: circle(50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 5;
padding: 28px 20px 16px;
gap: 8px;
background: radial-gradient(
circle at center,
rgba(0,0,0,.72) 0%,
rgba(0,0,0,.55) 50%,
rgba(0,0,0,.28) 72%,
transparent 90%
);
}
/* Isolé dans sa propre couche de composition pour un rendu net et
prévisible (le flou vit désormais sur .planet-info p uniquement, cf.
juste en dessous — plus sur .planet-info dans son ensemble, demande
explicite : le titre, lui, doit rester NET par défaut). */
.planet-info {
isolation: isolate;
transform: translateX(-50%) translateZ(0);
}
/* Texte quasi illisible au repos, revélé au survol/focus de la carte (même
logique que .home-service-planet-text sur accueil.php) : flou volontaire,
désormais porté par la description SEULE (.planet-info p) plutôt que par
tout .planet-info — demande explicite : "le titre disparaît au survol et
le descriptif devient lisible", donc titre et description doivent pouvoir
évoluer indépendamment (l'un net->invisible, l'autre flou->net) plutôt
qu'ensemble comme avant. Registre "tech"/"spatial" (var(--font-title) =
JetBrains Mono) conservé sur la description. */
.planet-info p {
font-family: var(--font-title);
font-size: .85rem;
letter-spacing: .01em;
color: rgba(255,255,255,.95);
line-height: 1.55;
margin: 0;
text-shadow:
0 1px 6px rgba(0,0,0,.95),
0 0 16px rgba(0,0,0,.85),
0 0 2px rgba(0,0,0,1);
filter: blur(5px);
transition: filter .4s ease;
}
.planet-card:hover .planet-info p,
.planet-card:focus-visible .planet-info p {
filter: blur(0);
}
/* Titre superposé au centre de la sphère (demande explicite, "essai") :
.offer-planet-title réintègre .planet-info (avant la description dans le
markup, cf. services.php — sections "Création sites web" et "Refonte de
site & Audit") au lieu de rester sous/à côté de la planète. Net par
défaut (contrairement à la description juste au-dessus) et c'est l'INVERSE
qui s'efface au survol : le titre disparaît pendant que la description
devient nette, pour que les deux ne se chevauchent jamais lisiblement en
même temps. Scopé à ".planet-info .offer-planet-title" uniquement : les
sections restées en layout "à côté" (Hébergement, Programmation, Conseil —
hors de ce changement, cf. .offer-planet-title--beside plus bas) gardent
leur titre toujours visible, inchangé. */
/* Demande explicite : le titre doit être au MILIEU de la planète, PAR-DESSUS
le texte descriptif — pas seulement au-dessus de lui dans le flux (ce qui
ne faisait que l'empiler plus haut dans le même cercle, sans réel
chevauchement). Sorti du flux de .planet-info (flex column) et centré au
même repère que la sphère elle-même (.planet-info est déjà positionné
absolute, top:0/left:50%/translate(-50%), 300×300 — donc top:50%/left:50%
ici centre le titre EXACTEMENT au milieu du disque) : la description
(.planet-info p, restée seule dans le flux flex) se retrouve alors
centrée au même endroit, avec le titre superposé par-dessus (z-index +
élément positionné, qui peint toujours au-dessus du contenu non
positionné du même contexte d'empilement). Le crossfade net/flou
ci-dessous (titre visible/description floutée par défaut, inversé au
survol) garantit qu'ils ne sont jamais lisibles en même temps malgré ce
chevauchement. */
.planet-info .offer-planet-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
max-width: 240px;
opacity: 1;
transition: opacity .4s ease;
}
.planet-card:hover .planet-info .offer-planet-title,
.planet-card:focus-visible .planet-info .offer-planet-title {
opacity: 0;
}
/* ─── services.php : titres Express/Business/Premium sous leur planète ───
Demande explicite : contrairement aux autres .planet-card (dont le titre
reste dans .planet-info, superposé à la sphère, flouté hors survol), les
3 offres de création de site affichent leur titre EN DESSOUS de la
planète (flow normal, après .planet-sphere, jamais flouté) — et repris
avec exactement le même style que les titres de la section "continuer la
visite" de pages/accueil.php (.home-service-planet-col h2) : même
gabarit, même fond bleu doux + glow hérité de la règle générale "h2{}"
(var(--title-accent-soft) tout en haut de ce fichier), repris ici
explicitement puisque c'est un et non un . */
.offer-planet-title {
display: flex;
align-items: center;
justify-content: center;
min-height: 2.6em;
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
font-weight: 700;
line-height: 1.3;
margin: 0;
color: #ffffff;
background: rgba(var(--title-accent-soft), 0.10);
box-shadow: 0 0 14px rgba(var(--title-accent-soft), 0.15);
transition: background-color .4s ease, box-shadow .4s ease;
/* reçoit par défaut la police "classique" (cf. règle générale
"h3 { font-family: var(--font-title-classic); }" tout en haut de ce
fichier) — surchargée ici pour reprendre la police "terminal" des
, comme .home-service-planet-col h2 (demande explicite : même
police ET même style que "continuer la visite"). */
font-family: var(--font-title);
}
/* Reprend le préfixe "// " des (cf. règle générale "h2::before" tout en
haut de ce fichier), absent des par défaut — dernier détail pour que
ces titres soient visuellement identiques à ceux de "continuer la visite". */
.offer-planet-title::before {
content: "// ";
color: rgb(var(--title-accent));
-webkit-text-fill-color: rgb(var(--title-accent));
opacity: 0.65;
font-weight: 600;
font-size: 0.85em;
transition: color .4s ease;
}
/* Demande explicite : chacune des 5 sections de services.php (Création
sites web / Refonte de site / Hébergement et maintenance / Programmation
/ Conseil et accompagnement) a sa propre couleur fixe, qui ne doit plus
dépendre de la couleur active du site — .offer-planet-title reposait sur
var(--title-accent-soft)/var(--title-accent), qui SUIT la couleur active
(cf. .accent-amber/.accent-emerald/etc. tout en haut de ce fichier) : les
titres d'offres de chaque section prenaient donc tous la même teinte
globale au lieu de leur couleur propre. Repris ici avec les mêmes teintes
fixes que les vignettes du hero (--capsule-color de .service-capsule--
refonte/--cloud/--programmation/--conseil/--featured), scopé par section
(#section-offers/#refonte/#hebergement/#programmation/#conseil, uniques à
services.php — cf. .planet-ribbon/.offer-planet-title, aucune autre page
ne les utilise) pour ne pas affecter d'éventuels autres usages. */
#section-offers .offer-planet-title { background: rgba(59,130,246,.10); box-shadow: 0 0 14px rgba(59,130,246,.15); }
#section-offers .offer-planet-title::before { color: #3b82f6; -webkit-text-fill-color: #3b82f6; }
#refonte .offer-planet-title { background: rgba(245,158,11,.10); box-shadow: 0 0 14px rgba(245,158,11,.15); }
#refonte .offer-planet-title::before { color: #f59e0b; -webkit-text-fill-color: #f59e0b; }
#hebergement .offer-planet-title { background: rgba(241,245,249,.10); box-shadow: 0 0 14px rgba(241,245,249,.15); }
#hebergement .offer-planet-title::before { color: #f1f5f9; -webkit-text-fill-color: #f1f5f9; }
#programmation .offer-planet-title { background: rgba(16,185,129,.10); box-shadow: 0 0 14px rgba(16,185,129,.15); }
#programmation .offer-planet-title::before { color: #10b981; -webkit-text-fill-color: #10b981; }
#conseil .offer-planet-title { background: rgba(139,92,246,.10); box-shadow: 0 0 14px rgba(139,92,246,.15); }
#conseil .offer-planet-title::before { color: #8b5cf6; -webkit-text-fill-color: #8b5cf6; }
/* .planet-info ne contient désormais plus que la description (le titre est
sorti, cf. .offer-planet-title ci-dessus) : recentrée verticalement dans
le cercle sans le qu'elle centrait auparavant avec lui. */
.planet-info--no-title {
justify-content: center;
}
/* ─── services.php : sections à UNIQUEMENT 2 planètes (Refonte, Hébergement
& Maintenance, Programmation, Conseil & Accompagnement) — demande
explicite : titre à CÔTÉ de la planète plutôt qu'en dessous (contrairement
à la section "Offres" à 3 planètes, qui garde le titre en dessous), et
côté alterné d'une section à l'autre : Refonte (titre à gauche),
Hébergement (titre à droite), Programmation (titre à gauche), Conseil
(titre à droite) — cf. classes .offers-grid--title-left/--title-right
posées sur .offers-grid dans le markup.
.offers-grid repasse en 1 seule colonne (les cartes, plus larges avec le
titre à côté, ne tiennent plus 2 par ligne dans la largeur de la section
.layout-split) : les 2 planètes de la section s'empilent verticalement. */
.offers-grid--paired {
grid-template-columns: 1fr;
max-width: 620px;
gap: 48px;
margin: 0 auto;
}
/* .planet-visual regroupe la sphère + l'overlay description (.planet-info),
qui se positionne par rapport à CE wrapper plutôt que par rapport à toute
la carte — nécessaire dès que la sphère n'est plus seule sur sa ligne
(cf. .planet-visual-row ci-dessous), sinon le centrage absolu de
.planet-info (left:50%) se ferait par rapport à la largeur totale de la
ligne (sphère + titre) au lieu de la seule sphère. */
.planet-visual {
position: relative;
flex-shrink: 0;
}
/* Sphère + titre, côte à côte. Sens par défaut : titre à gauche, sphère à
droite (ordre naturel du DOM, titre écrit en premier dans le markup) —
.offers-grid--title-right inverse ce sens pour les sections où le titre
doit apparaître à droite. */
.planet-visual-row {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
}
.offers-grid--title-right .planet-visual-row {
flex-direction: row-reverse;
}
/* Largeur contrainte pour un titre à côté d'une sphère de 300px (sinon un
titre court comme "Refonte" s'étirerait sur toute la largeur restante) —
reprend .offer-planet-title tel quel (même police/fond/glow), juste plus
étroit et permettant le retour à la ligne. */
.offer-planet-title--beside {
max-width: 190px;
white-space: normal;
}
/* Écran étroit : sphère (jusqu'à 320px) + titre côte à côte déborderait —
on repasse le titre SOUS la planète (comme la section "Offres" à 3
planètes), quel que soit le côté choisi pour la section sur desktop. */
@media (max-width: 640px) {
.planet-visual-row,
.offers-grid--title-right .planet-visual-row {
flex-direction: column;
}
.offer-planet-title--beside {
max-width: none;
}
}
/* ─── Reflet spéculaire ─── */
.planet-highlight {
position: absolute;
top: 11%;
left: 15%;
width: 26%;
height: 26%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.28) 0%, transparent 68%);
pointer-events: none;
z-index: 2;
animation: highlightFloat 5s ease-in-out infinite;
}
/* ─── Anneau Saturn ─── */
.planet-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scaleY(.20);
width: 155%;
height: 155%;
border-radius: 50%;
border: 5px solid rgba(255,200,80,.30);
box-shadow: 0 0 16px rgba(251,191,36,.20);
pointer-events: none;
z-index: 4;
transition: border-color .65s ease, box-shadow .65s ease;
}
.planet-card:hover .planet-ring {
border-color: rgba(255,200,80,.62);
box-shadow: 0 0 32px rgba(251,191,36,.50);
}
.planet-card:hover{
opacity: 1;
}
/* ─── Badge featured ─── */
.planet-ribbon {
position: absolute;
top: -10px;
right: 2px;
padding: 5px 16px;
border-radius: 16px;
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
z-index: 6;
/* Libellé plus long ("Réservé aux professionnels") : retour à la ligne
borné plutôt qu'un débordement du badge hors de la carte planète. */
max-width: 160px;
white-space: normal;
text-align: center;
line-height: 1.2;
}
.planet-ribbon.pro {
background: rgba(251,191,36,.12);
color: #fbbf24;
border: 1px solid rgba(251,191,36,.35);
animation: ribbonPulse 4s ease-in-out infinite;
}
.planet-ribbon.essentiel {
background: rgba(59,130,246,.12);
color: #93c5fd;
border: 1px solid rgba(59,130,246,.35);
}
/* Corrigé (demande explicite : "Création sites web" reste TOUJOURS bleue) :
ce badge n'apparaît que sur l'offre "Premium" de #section-offers (cf.
services.php, seule page à utiliser .planet-ribbon), donc toujours dans
la section bleue — rgb(var(--header-accent)) le faisait suivre la couleur
active au lieu de rester bleu comme .planet-ribbon.essentiel juste
au-dessus, dans la même section. */
.planet-ribbon.surmesure {
background: rgba(59,130,246,.12);
color: #93c5fd;
border: 1px solid rgba(59,130,246,.35);
}
/* ─── CTA sous la planète ─── */
.planet-cta {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-title);
font-size: .74rem;
font-weight: 700;
color: rgba(255,255,255,.40);
letter-spacing: .08em;
text-transform: uppercase;
transition: color .3s ease, letter-spacing .3s ease;
}
.planet-card:hover .planet-cta {
color: rgba(255,255,255,.95);
letter-spacing: .14em;
}
/* ─── Légère traînée derrière la rockette du CTA "Explorer" (demande
explicite, uniquement ici — .cta-rocket est réutilisé ailleurs sur le
site sans cet effet, cf. .service-capsule/.livre-dor-cta-btn). Un
::before posé directement sur le ne s'affichait pas de façon
fiable selon les navigateurs (pseudo-élément sur un SVG inline) : la
traînée est donc un vrai élément frère du svg, tous deux enfants
d'un wrapper .planet-cta-rocket qui porte SEUL le translate+rotate du
décollage — svg et traînée bougent ensemble, sans dépendre d'un
pseudo-élément. La traînée est positionnée "vers le bas" en repère
local du wrapper ; une fois la rotation appliquée, elle retombe bien du
côté opposé au sens du décollage. Invisible au repos, révélée en fondu
au survol/focus de la carte. ─── */
.planet-cta-rocket {
position: relative;
display: inline-flex;
transition: transform .3s ease;
}
.planet-card:hover .planet-cta-rocket,
.planet-card:focus-visible .planet-cta-rocket {
transform: translate(3px, -3px) rotate(45deg);
}
.planet-cta-rocket-trail {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 8px;
transform: translateX(-50%);
transform-origin: 50% 0%;
background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
border-radius: 2px;
opacity: 0;
transition: opacity .3s ease, height .3s ease;
pointer-events: none;
}
.planet-card:hover .planet-cta-rocket-trail,
.planet-card:focus-visible .planet-cta-rocket-trail {
opacity: .85;
height: 11px;
}
/* ─── services.php : les 5 sections à planètes (#section-offers/#refonte/
#hebergement/#programmation/#conseil) — clic sur une .planet-card ───
Demande explicite : "peu importe la planète sélectionnée, je veux
qu'elle se mette au centre de l'écran et que tout le contenu de la page
s'estompe, ne reste que la planète cliquée. Puis la redirection se fait
une fois la planète au centre." La sphère cliquée (.planet-sphere) est
déplacée par JS (cf. assets/js/main.js) dans #planet-launch-layer, un
calque fixe plein écran ajouté à la fin de — donc au-dessus de
, qui s'estompe séparément ci-dessous, sans conflit d'opacité ni de
contexte d'empilement avec la carte d'origine. Position de départ posée
en inline par le JS (getBoundingClientRect, pour partir EXACTEMENT d'où
la sphère se trouvait dans la grille) avant l'ajout de .is-centering, qui
déclenche seul la transition CSS ci-dessous vers le centre de l'écran. */
#planet-launch-layer {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
}
#planet-launch-layer .planet-sphere {
position: fixed;
margin: 0;
transition:
top .9s cubic-bezier(.65,0,.35,1),
left .9s cubic-bezier(.65,0,.35,1),
width .9s cubic-bezier(.65,0,.35,1),
height .9s cubic-bezier(.65,0,.35,1),
transform .9s cubic-bezier(.65,0,.35,1);
}
#planet-launch-layer .planet-sphere.is-centering {
top: 50%;
left: 50%;
width: min(64vmin, 620px);
height: min(64vmin, 620px);
transform: translate(-50%, -50%);
}
/* Le reste du contenu de la page (hero + les 5 sections) s'estompe pendant
ce temps — seule la sphère déplacée dans #planet-launch-layer (sortie de
) reste visible, grossissant vers le centre par-dessus. Les widgets
flottants (Navigation/Mon compte/Couleur/Langue, cf. partials/footer.php,
rendus hors de ) ne sont volontairement pas concernés : identiques
sur la page de destination, ils n'ont pas besoin de disparaître. */
main.page-service.is-planet-launching {
transition: opacity .9s ease;
opacity: 0;
pointer-events: none;
}
/* Accessibilité : si le JS détecte prefers-reduced-motion, il navigue tout
de suite sans jamais poser .is-centering/.is-planet-launching — ce filet
CSS coupe simplement toute transition résiduelle si ces classes se
retrouvaient malgré tout posées (ex. saut direct entre deux frames). */
@media (prefers-reduced-motion: reduce) {
#planet-launch-layer .planet-sphere,
main.page-service.is-planet-launching {
transition: none !important;
}
}
/* ========================= VARIANTES PLANÈTES =========================
Tier 1 — Essentiel : ocean, desert
Tier 2 — Pro : ice, storm
Tier 3 — Sur mesure : gold, nebula, forest
======================================================================= */
/* ─────────── TIER 1 ─────────── */
/* ── ocean : Terre vue de l'espace — océan profond, nuages quasi-invisibles ── */
.planet--ocean .planet-sphere {
background-image: url('../image/planet-bleu.webp');
background-size: cover;
background-position: center;
box-shadow:
0 0 20px rgba(6,38,120,.20),
0 0 42px rgba(3,22,88,.07),
inset -30px -30px 60px rgba(0,0,14,.90);
}
.planet--ocean:hover .planet-sphere {
box-shadow:
0 0 38px rgba(6,38,120,.44),
0 0 76px rgba(3,22,88,.15),
inset -30px -30px 60px rgba(0,0,14,.90);
}
.planet--ocean .planet-sphere::before {
background: repeating-linear-gradient(
-15deg,
transparent 0px, transparent 32px,
rgba(200,220,248,.06) 32px, rgba(200,220,248,.06) 34px,
transparent 34px, transparent 64px,
rgba(160,195,235,.04) 64px, rgba(160,195,235,.04) 66px
);
animation-duration: 90s;
}
.planet--ocean .planet-sphere::after {
box-shadow:
inset 0 0 16px rgba(5,32,105,.14),
inset 0 0 32px rgba(2,18,78,.07);
}
/* ── desert : Mars — rouille terne, poussière de fer ── */
.planet--desert .planet-sphere {
background-image: url('../image/planet-jupiter.webp');
background-size: cover;
background-position: center;
box-shadow:
0 0 20px rgba(100,30,6,.22),
0 0 42px rgba(115,40,5,.07),
inset -30px -30px 60px rgba(16,2,0,.90);
}
.planet--desert:hover .planet-sphere {
box-shadow:
0 0 38px rgba(100,30,6,.46),
0 0 76px rgba(115,40,5,.15),
inset -30px -30px 60px rgba(16,2,0,.90);
}
.planet--desert .planet-sphere::before {
background: repeating-linear-gradient(
-20deg,
rgba(105,40,8,.11) 0px, rgba(105,40,8,.11) 22px,
rgba(62,16,2,.08) 22px, rgba(62,16,2,.08) 46px,
rgba(82,28,4,.07) 46px, rgba(82,28,4,.07) 72px
);
animation-duration: 60s;
}
.planet--desert .planet-sphere::after {
box-shadow:
inset 0 0 18px rgba(118,42,5,.16),
inset 0 0 36px rgba(85,26,2,.08);
}
/* ─────────── TIER 2 ─────────── */
/* ── ice : Neptune — bleu-indigo très sombre, quasi-noir ── */
.planet--ice .planet-sphere {
background-image: url('../image/planet-blanc.webp');
background-size: cover;
background-position: center;
box-shadow:
0 0 22px rgba(2,55,110,.22),
0 0 44px rgba(0,38,88,.07),
inset -30px -30px 60px rgba(0,3,14,.90);
}
.planet--ice:hover .planet-sphere {
box-shadow:
0 0 42px rgba(2,55,110,.46),
0 0 85px rgba(0,38,88,.15),
inset -30px -30px 60px rgba(0,3,14,.90);
}
.planet--ice .planet-sphere::before {
background: repeating-linear-gradient(
-35deg,
transparent 0px, transparent 40px,
rgba(80,130,172,.06) 40px, rgba(80,130,172,.06) 42px,
transparent 42px, transparent 78px,
rgba(55,100,140,.04) 78px, rgba(55,100,140,.04) 80px
);
animation-duration: 110s;
}
.planet--ice .planet-sphere::after {
box-shadow:
inset 0 0 14px rgba(2,55,110,.14),
inset 0 0 28px rgba(0,35,82,.07);
}
/* ── storm : Maintenance — texture "custom" (déplacée depuis Bot Discord),
reflet recoloré du violet d'origine vers le bleu/cyan de la section
Hébergement (même famille que .planet--ice, sa voisine dans cette
section) — cf. demande "reflet couleur de la section". ── */
.planet--storm .planet-sphere {
background-image: url('../image/planet-orange.webp');
background-size: cover;
background-position: center;
box-shadow:
0 0 20px rgba(2,55,110,.20),
0 0 42px rgba(0,38,88,.07),
inset -30px -30px 60px rgba(0,0,10,.92);
}
.planet--storm:hover .planet-sphere {
box-shadow:
0 0 38px rgba(2,55,110,.44),
0 0 76px rgba(0,38,88,.14),
inset -30px -30px 60px rgba(0,0,10,.92);
}
.planet--storm .planet-sphere::before {
background: repeating-linear-gradient(
-8deg,
rgba(20,60,110,.13) 0px, rgba(20,60,110,.13) 18px,
rgba(6,30,55,.09) 18px, rgba(6,30,55,.09) 36px,
rgba(12,45,80,.07) 36px, rgba(12,45,80,.07) 58px
);
animation-duration: 25s;
}
.planet--storm .planet-sphere::after {
box-shadow:
inset 0 0 14px rgba(2,55,110,.14),
inset 0 0 28px rgba(0,38,88,.07);
}
/* ── saturn : Hébergement & maintenance — corrigé (demande explicite : "doit
être planet-blanc et non pas saturne") : la vraie texture Saturne
(anneaux inclus, planet-saturn.webp) est remplacée par planet-blanc.webp,
cohérente avec la couleur blanche fixe de cette section (cf.
.planet--ice, sa voisine dans #hebergement, qui utilise déjà cette même
texture). Halo sable/or conservé tel quel (non redemandé). ── */
.planet--saturn .planet-sphere {
background-image: url('../image/planet-blanc.webp');
background-size: cover;
background-position: center;
box-shadow:
0 0 24px rgba(196,164,90,.24),
0 0 48px rgba(196,164,90,.09),
inset -30px -30px 60px rgba(20,14,4,.85);
}
.planet--saturn:hover .planet-sphere {
box-shadow:
0 0 46px rgba(196,164,90,.50),
0 0 92px rgba(196,164,90,.20),
inset -30px -30px 60px rgba(20,14,4,.85);
}
.planet--saturn .planet-sphere::before {
background: repeating-linear-gradient(
-12deg,
rgba(196,164,90,.10) 0px, rgba(196,164,90,.10) 24px,
rgba(120,92,44,.07) 24px, rgba(120,92,44,.07) 48px,
transparent 48px, transparent 72px
);
animation-duration: 65s;
}
.planet--saturn .planet-sphere::after {
box-shadow:
inset 0 0 18px rgba(196,164,90,.16),
inset 0 0 36px rgba(196,164,90,.08);
}
/* ─────────── TIER 3 ─────────── */
/* ── gold : Jupiter/Saturne — ocre chaud, ceintures ocre et brun ── */
.planet--gold .planet-sphere {
background-image: url('../image/planet-orange.webp');
background-size: cover;
background-position: center;
box-shadow:
0 0 28px rgba(115,68,12,.26),
0 0 55px rgba(135,85,16,.09),
0 0 90px rgba(88,42,3,.04),
inset -30px -30px 60px rgba(18,3,0,.88);
}
.planet--gold:hover .planet-sphere {
box-shadow:
0 0 52px rgba(115,68,12,.54),
0 0 105px rgba(135,85,16,.20),
0 0 165px rgba(88,42,3,.09),
inset -30px -30px 60px rgba(18,3,0,.88);
}
.planet--gold .planet-sphere::before {
background: repeating-linear-gradient(
-10deg,
rgba(145,82,18,.12) 0px, rgba(145,82,18,.12) 10px,
rgba(88,34,4,.09) 10px, rgba(88,34,4,.09) 22px,
rgba(158,98,26,.07) 22px, rgba(158,98,26,.07) 34px,
rgba(118,50,7,.11) 34px, rgba(118,50,7,.11) 44px,
rgba(75,28,2,.08) 44px, rgba(75,28,2,.08) 56px,
rgba(135,72,14,.07) 56px, rgba(135,72,14,.07) 68px,
rgba(100,38,5,.09) 68px, rgba(100,38,5,.09) 80px
);
animation-duration: 42s;
}
.planet--gold .planet-sphere::after {
box-shadow:
inset 0 0 18px rgba(145,82,18,.16),
inset 0 0 38px rgba(110,50,5,.08);
}
/* ── nebula : océan cyan profond — Sur mesure ── */
.planet--nebula .planet-sphere {
background-image: url('../image/planet-terre.webp');
background-size: cover;
background-position: center;
box-shadow:
0 0 28px rgba(59,130,246,.22),
0 0 55px rgba(4,120,155,.08),
0 0 90px rgba(2,70,100,.03),
inset -30px -30px 60px rgba(0,5,18,.92);
}
.planet--nebula:hover .planet-sphere {
box-shadow:
0 0 52px rgba(59,130,246,.48),
0 0 105px rgba(4,120,155,.18),
0 0 165px rgba(2,70,100,.08),
inset -30px -30px 60px rgba(0,5,18,.92);
}
.planet--nebula .planet-sphere::before {
background: repeating-linear-gradient(
-14deg,
rgba(59,130,246,.08) 0px, rgba(59,130,246,.08) 14px,
rgba(4,100,130,.06) 14px, rgba(4,100,130,.06) 30px,
rgba(8,160,200,.05) 30px, rgba(8,160,200,.05) 48px,
rgba(2,60,90,.06) 48px, rgba(2,60,90,.06) 68px
);
animation-duration: 34s;
}
.planet--nebula .planet-sphere::after {
box-shadow:
inset 0 0 20px rgba(59,130,246,.16),
inset 0 0 42px rgba(4,120,155,.07);
}
/* ── forest : Accompagnement — reflet recoloré du vert d'origine vers un
gris neutre, sur demande ("reflet gris"). ── */
.planet--forest .planet-sphere {
background-image: url('../image/lune.png');
background-size: cover;
background-position: center;
box-shadow:
0 0 26px rgba(148,163,184,.22),
0 0 52px rgba(100,116,139,.07),
0 0 88px rgba(71,85,105,.03),
inset -30px -30px 60px rgba(4,4,4,.90);
}
.planet--forest:hover .planet-sphere {
box-shadow:
0 0 50px rgba(148,163,184,.46),
0 0 100px rgba(100,116,139,.16),
0 0 160px rgba(71,85,105,.08),
inset -30px -30px 60px rgba(4,4,4,.90);
}
.planet--forest .planet-sphere::before {
background: repeating-linear-gradient(
-18deg,
transparent 0px, transparent 30px,
rgba(120,130,145,.08) 30px, rgba(120,130,145,.08) 32px,
transparent 32px, transparent 60px,
rgba(90,100,115,.06) 60px, rgba(90,100,115,.06) 62px
);
animation-duration: 70s;
}
.planet--forest .planet-sphere::after {
box-shadow:
inset 0 0 16px rgba(148,163,184,.14),
inset 0 0 32px rgba(100,116,139,.07);
}
/* ─── CTA FINAL : EFFET "TROU NOIR" ───
Section relevée d'un simple bloc de texte centré à un panneau "capsule"
flottant au-dessus d'un trou noir : un disque d'accrétion (anneau
conic-gradient blanc/bleu très pâle flouté) tourne lentement derrière
le panneau, autour d'un horizon des événements totalement sombre en
son centre. Le panneau lui-même est assombri et rendu plus opaque pour
qu'il se détache nettement du halo, façon vaisseau au bord de
l'horizon. Aucune icône décorative ici : par convention du site, la
roquette n'apparaît que sur des éléments cliquables (cf. .capsule-cta,
.divider-action, .planet-cta) — le CTA texte suffit.
Le halo (::before/::after) est porté par .services-cta-halo, un
conteneur qui n'enveloppe QUE .container et n'a lui-même aucun
padding : sa boîte a donc exactement la même hauteur/centre vertical
que .container. Le porter directement sur .services-cta (qui a un
padding haut/bas asymétrique à cause de --footer-clearance) décalait
le trou noir par rapport au panneau.
padding-top : le disque d'accrétion peut atteindre 780px de diamètre
(donc 390px de rayon depuis le centre du panneau) sur les grands
écrans — avec seulement 100px de marge au-dessus de .services-cta-halo,
.services-cta (overflow:hidden) tronquait le haut du disque. Le
padding-top suit désormais le même clamp que le disque (avec une marge
de sécurité) pour toujours lui laisser assez de place. */
.services-cta {
text-align: center;
padding: clamp(240px, 34vw, 420px) 20px var(--footer-clearance);
position: relative;
overflow: hidden;
}
.services-cta-halo {
position: relative;
}
/* Disque d'accrétion : anneau conic-gradient flouté qui tourne en continu.
Demande explicite ("le trou, et tous ceux de la page, doivent hériter
de la couleur active") : la palette blanche/argentée fixe est
remplacée par des teintes dérivées de --header-accent, même recette
que .why-target-cta-halo/.hero-black-hole. */
.services-cta-halo::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: clamp(390px, 55vw, 690px);
height: clamp(390px, 55vw, 690px);
margin-top: -1px;
border-radius: 50%;
/* Bande horizontale déplacée sur ::after (demande explicite : elle ne
doit pas tourner avec l'anneau — contrairement à ce calque animé par
blackHoleSpin — cf. trou noir1.jpg où la lueur équatoriale reste
fixe sur la face du disque pendant que l'anneau tourne autour). */
background:
conic-gradient(
from -20deg,
rgba(var(--header-accent),0) 0deg,
rgba(var(--header-accent),.6) 38deg,
rgba(var(--header-accent),.68) 68deg,
rgba(var(--header-accent),.7) 92deg,
rgba(var(--header-accent),.36) 118deg,
rgba(var(--header-accent),0) 152deg,
rgba(var(--header-accent),0) 222deg,
rgba(var(--header-accent),.22) 250deg,
rgba(var(--header-accent),.4) 282deg,
rgba(var(--header-accent),.55) 302deg,
rgba(var(--header-accent),.4) 320deg,
rgba(var(--header-accent),0) 360deg
);
box-shadow: 0 0 clamp(41px, 5.8vw, 72px) clamp(12px, 1.8vw, 22px) rgba(var(--header-accent),.30);
--hole-blur: 22px;
animation:
blackHoleSpin 22s linear infinite,
blackHoleFlicker 6.5s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
/* Horizon des événements : cœur noir opaque qui masque le centre de
l'anneau, avec une ombre portée large pour assombrir tout autour. */
.services-cta-halo::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: clamp(200px, 28vw, 350px);
height: clamp(200px, 28vw, 350px);
transform: translate(-50%, -50%);
border-radius: 50%;
/* Version "réaliste" restaurée (demande explicite : "on avait obtenu un
résultat très réaliste", plus de barre horizontale) : la bande
linéaire equatoriale est retirée — un seul radial-gradient forme un
cœur noir opaque avec un fin anneau photonique clair à 58-66%
(l'horizon des événements, coloré --header-accent), plus proche
d'une vraie photo de trou noir. Complété par un léger backdrop-filter
(flou + saturation) sur le bord pour un rendu moins "à plat". */
background:
radial-gradient(circle, #000000 0%, #000000 58%, rgba(var(--header-accent),.85) 62%, #000000 66%, rgba(0,0,0,0) 76%);
backdrop-filter: blur(2px) saturate(1.15);
-webkit-backdrop-filter: blur(2px) saturate(1.15);
box-shadow: 0 0 clamp(45px, 6.2vw, 78px) clamp(15px, 2.1vw, 26px) rgba(0,0,0,.85);
animation: blackHolePulse 4.5s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
/* Rotation + "respiration" du disque : en plus de tourner, l'anneau se
resserre puis se redéploie deux fois par tour (35%/85%, calés pile sur
les mêmes angles de rotation 126deg/306deg = 360*.35 / 360*.85, donc la
vitesse de rotation reste parfaitement linéaire malgré ces étapes
intermédiaires) — donne l'impression que la matière est aspirée vers le
centre puis relâchée, façon tourbillon, plutôt qu'un simple anneau figé
qui tourne (demande explicite "effet d'aspiration/tourbillon autour de
la lentille"). */
@keyframes blackHoleSpin {
0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
35% { transform: translate(-50%, -50%) rotate(126deg) scale(.88); }
50% { transform: translate(-50%, -50%) rotate(180deg) scale(1); }
85% { transform: translate(-50%, -50%) rotate(306deg) scale(.88); }
100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
/* Horizon des événements : léger gonflement synchronisé (scale) en plus du
pulse d'opacité déjà présent — comme si le cœur noir "avalait" par
à-coups la matière aspirée par le disque ci-dessus, sur un rythme plus
rapide (4.5s) et volontairement désynchronisé des 22s du disque pour un
mouvement plus organique/moins mécanique. */
@keyframes blackHolePulse {
0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
/* Scintillement du disque d'accrétion (::before) : fait varier flou/luminosité
via --hole-blur (posée par chaque instance) plutôt qu'un filter fixe,
pour un rendu moins statique — restaurée avec la version "réaliste" du
trou noir (cf. commentaire sur ::after ci-dessus). */
@keyframes blackHoleFlicker {
0%, 100% { filter: blur(var(--hole-blur, 22px)) brightness(.94); }
50% { filter: blur(var(--hole-blur, 22px)) brightness(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.index-hero-black-hole::before,
.index-hero-black-hole::after,
.home-hero-halo::before,
.home-hero-halo::after,
.why-target-cta-halo::before,
.why-target-cta-halo::after,
.services-cta-halo::before,
.services-cta-halo::after,
.account-page::after,
.hole-hotspot,
.hole-hotspot::before {
animation: none;
}
}
.hole-anim-paused::before,
.hole-anim-paused::after,
.hole-anim-paused .hole-hotspot,
.hole-anim-paused .hole-hotspot::before {
animation-play-state: paused !important;
}
/* ─── Point chaud en orbite (hole-hotspot) ───
Petit point lumineux qui orbite autour de chaque trou noir (index.php,
accueil.php x2 "home-hero-halo"/"why-target-cta-halo", services.php x2
"hero-black-hole"/"services-cta-halo"), demande explicite lors du rendu
"très réaliste" obtenu — simule un point d'accrétion particulièrement
brillant qui tourne avec le disque plutôt qu'un anneau uniforme. Élément
HTML dédié déjà présent dans chaque page
(cf. markup), 0x0 + position:absolute posé au même point d'ancrage que
le trou noir parent, tout le rayon/mouvement se fait via ::before +
transform sur l'élément lui-même (rotate en continu, cf.
@keyframes holeHotspotOrbit) : évite de repositionner top/left en JS.
--hotspot-radius/--hotspot-color redéfinis par instance ci-dessous (taille
du disque + couleur cohérente avec l'anneau de chaque trou noir). */
.hole-hotspot {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
pointer-events: none;
z-index: 1;
animation: holeHotspotOrbit 9s linear infinite;
}
.hole-hotspot::before {
content: "";
position: absolute;
top: calc(var(--hotspot-radius, 160px) * -1);
left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, rgba(var(--hotspot-color, 200,225,255),.95) 45%, rgba(var(--hotspot-color, 200,225,255),0) 75%);
box-shadow: 0 0 14px 4px rgba(var(--hotspot-color, 200,225,255),.85);
animation: holeHotspotFlare 3.6s ease-in-out infinite;
}
@keyframes holeHotspotOrbit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes holeHotspotFlare {
0%, 100% { opacity: .3; transform: scale(.65); }
45% { opacity: 1; transform: scale(1.2); }
70% { opacity: .45; transform: scale(.85); }
}
.index-hero-black-hole .hole-hotspot {
--hotspot-radius: clamp(120px, 17vw, 215px);
--hotspot-color: var(--hole-light, 200,225,255);
}
.home-hero-halo .hole-hotspot {
--hotspot-radius: clamp(100px, 14vw, 185px);
--hotspot-color: var(--hole-light, 200,225,255);
}
.why-target-cta-halo .hole-hotspot {
--hotspot-radius: clamp(135px, 19vw, 240px);
--hotspot-color: var(--header-accent);
animation-delay: -3.1s;
}
.why-target-cta-halo .hole-hotspot::before {
animation-delay: -1.8s;
}
.hero-black-hole .hole-hotspot {
--hotspot-radius: clamp(120px, 17vw, 215px);
--hotspot-color: var(--header-accent);
}
.services-cta-halo .hole-hotspot {
--hotspot-radius: clamp(120px, 17vw, 215px);
--hotspot-color: var(--header-accent);
animation-delay: -3.1s;
}
.services-cta-halo .hole-hotspot::before {
animation-delay: -1.8s;
}
.why-target-cta-halo.is-swallowing .hole-hotspot,
.services-cta-halo.is-swallowing .hole-hotspot {
opacity: 0;
transition: opacity .4s ease;
}
/* ─── Rockette en orbite autour du trou noir (services.php) ───
Même traitement/technique que .why-target-cta-orbit (accueil.php
#why-cta), simplement mis à l'échelle : le disque/anneau de
.services-cta-halo est ~1.6x plus grand que celui de
.why-target-cta-halo, l'orbite suit la même proportion. Réutilise les
keyframes globales blackHoleOrbitSpin/blackHoleSwallowSpiral (déjà
définies plus haut dans ce fichier) et le même gestionnaire de clic en
JS (cf. main.js, bloc "CTA trou noir", généralisé aux deux halos). */
.services-cta-orbit {
position: absolute;
top: 50%;
left: 50%;
width: clamp(310px, 45vw, 540px);
height: clamp(310px, 45vw, 540px);
transform: translate(-50%, -50%) rotate(0deg);
z-index: 1;
pointer-events: none;
animation: blackHoleOrbitSpin 8s linear infinite;
}
.services-cta-orbit-rocket {
position: absolute;
top: 0;
left: 50%;
width: 36px;
height: 36px;
transform: translate(-50%, -50%) rotate(90deg);
color: rgba(255,255,255,.85);
filter: drop-shadow(0 0 6px rgba(139,197,255,.55));
transition: opacity .3s ease;
}
.services-cta-orbit-trail {
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 50px;
transform-origin: 50% 0%;
transform: translateX(-50%) rotate(90deg);
background: linear-gradient(to bottom, rgba(139,197,255,.55) 0%, rgba(139,197,255,.18) 55%, rgba(139,197,255,0) 100%);
border-radius: 2px;
filter: blur(1.5px);
pointer-events: none;
transition: opacity .3s ease;
}
.services-cta-halo.is-swallowing .services-cta-orbit {
/* Même ajustement que .why-target-cta-orbit (accueil.php) : linear +
durée raccourcie, cf. commentaire là-bas. */
animation: blackHoleSwallowSpiral 2.4s linear forwards;
}
.services-cta-halo.is-swallowing .services-cta-orbit-rocket,
.services-cta-halo.is-swallowing .services-cta-orbit-trail {
opacity: 0;
transition: opacity .35s ease 1.6s;
}
/* Plus de panneau/"boxe" : le texte flotte directement au-dessus du trou
noir, sans fond/bordure/ombre/flou — seule la mise en page (largeur de
lecture, centrage) est conservée. */
.services-cta .container {
position: relative;
z-index: 2;
max-width: 720px;
margin: 0 auto;
padding: 0 20px;
}
.services-cta h2,
.services-cta .cta-text,
.services-cta .btn-accueil {
position: relative;
z-index: 1;
}
/* box-shadow: none — annule le halo générique "contour" posé sur tous les
h2 du site (cf. règle h2{} globale) : ici le titre flotte sur le trou
noir, sans contour rectangulaire autour du texte. */
.services-cta h2 {
font-size: clamp(1.6rem, 3vw, 2.3rem);
font-weight: 700;
/* Décalage vers le bas (demande explicite, plusieurs ajustements
successifs : texte+CTA trop hauts par rapport au centre du disque). */
margin: 80px 0 16px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
box-shadow: none;
}
.services-cta .cta-text {
color: rgba(255,255,255,.58);
font-size: .98rem;
max-width: 520px;
margin: 0 auto 32px;
line-height: 1.7;
}
@media (max-width: 640px) {
.services-cta .container {
padding: 44px 24px 36px;
border-radius: 24px;
}
}
/* Duplicata de la règle .btn-accueil de base (cf. plus haut, section
index.php) — même correction (3ème teinte --accent-harmony-3, ton
différent de la couleur principale), pour rester identique entre les 2
déclarations. */
.btn-accueil {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 44px;
font-size: 1.05rem;
font-weight: 600;
border-radius: 999px;
background: rgba(var(--accent-harmony-3), .14);
border: 1px solid rgba(var(--accent-harmony-3), .32);
color: #ffffff;
text-decoration: none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 0 24px rgba(var(--accent-harmony-3), .08), inset 0 1px 0 rgba(255,255,255,.07);
transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.btn-accueil:hover {
background: rgba(var(--accent-harmony-3), .22);
box-shadow: 0 12px 36px rgba(var(--accent-harmony-3), .28);
transform: translateY(-2px);
}
/* ─── ANIMATION D'ENTRÉE "PLANÈTE" (partagée par les 14 pages service) ───
Demande explicite : "au début être au centre de l'écran (sans contenu de
page) puis il y a un zoom sur la planète et alors le contenu de la page
apparait en fondu". Classe .planet-entrance-page posée en dur dans le
de chaque page concernée (refonte/audit-site/hm/hebergement/
maintenance/conseil/accompagnement/conseilaccompagnement/programmation/
bot-discord/offres-site/sitevitrine/sitepro/surmesure), en plus de leur
classe .page-X existante.
Plutôt que de créer un 2e système de fondu qui entrerait en conflit avec
le "SCROLL REVEAL" existant plus bas (.section-block/.is-visible — le
hero, visible dès le chargement, y est déjà révélé en fondu par son
propre IntersectionObserver), on se contente ici de FORCER tout le
contenu direct du à rester invisible tant que .bg-entrance est
présent (zoom de la planète en cours, posé/retiré par main.js) — le
!important est nécessaire pour passer devant .section-block.is-visible.
Une fois .bg-entrance retiré (zoom terminé), ce forçage disparaît et
chaque section retrouve son fondu normal déjà défini par le "SCROLL
REVEAL" (hero révélé immédiatement, sections suivantes au scroll). */
.planet-entrance-page.bg-entrance > * {
opacity: 0 !important;
}
/* ========================= offres-site.php ========================= */
/* ─── BACKGROUND FIXE ───
TEST : Galaxy-web.png remplace bgsite.png comme fond de PAGE entier
(fixed, comme les autres pages) au lieu d'être concentrée dans
.offer-intro-block (cf. plus haut, pseudo-élément neutralisé) — même
traitement (overlay noir .52 pour la lisibilité du texte) que
bgsite.png ailleurs sur le site. À rebasculer sur bgsite.png si le
rendu page entière ne convainc pas. */
.page-offers::before {
content: "";
position: fixed;
inset: 0;
/* Rideau dégradé en haut (0 à 90px opaque, fondu jusqu'à 260px) :
masque le fond derrière le header flottant (top:20px +
height:64px ≈ 84px). */
background:
linear-gradient(to bottom, rgba(3,5,14,.96) 0, rgba(3,5,14,.96) 90px, transparent 260px),
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
/* Galaxie sur son propre calque (::after, peint par-dessus ::before) pour
pouvoir lui appliquer un masque radial qui estompe son contour
déchiqueté/tronqué en fondu, sans toucher au starfield bgsiteindex.png
en dessous. */
.page-offers::after {
content: "";
position: fixed;
inset: 0;
background: url("../image/galaxie-web.png") center / 75% 60% no-repeat;
/* Les % d'un radial-gradient explicite sont des RAYONS, pas des
diamètres : "60% 55%" s'étendait donc jusqu'à 120%/110% de la
largeur/hauteur — bien plus grand que l'image (75%/60%), donc le
fondu n'atteignait la transparence totale que largement APRÈS le
bord réel de l'image, qui restait quasi opaque (bordure visible).
Rayons resserrés (28%/22%) pour que la transparence totale soit
atteinte nettement AVANT le bord réel de l'image (75%/60%). */
-webkit-mask-image: radial-gradient(ellipse 28% 22% at center, #000 30%, transparent 92%);
mask-image: radial-gradient(ellipse 28% 22% at center, #000 30%, transparent 92%);
pointer-events: none;
z-index: 0;
/* Rétrécit + s'efface au scroll : --bg-scroll-scale/-opacity sont
posées en JS (cf. main.js, bloc "DÉCOR DE FOND") sur .page-offers,
dont ::after hérite. Valeurs par défaut (1) tant que le JS n'a pas
encore tourné, pour éviter un flash au chargement. */
transform: scale(var(--bg-scroll-scale, 1));
opacity: var(--bg-scroll-opacity, 1);
transform-origin: center center;
transition: transform .08s linear, opacity .08s linear;
}
/* Arrivée de page : demande explicite d'étendre l'animation d'entrée
(planète centrée, contenu masqué, puis zoom) à offres-site.php, qui en
était exclue jusqu'ici. Cf. .planet-entrance-page plus haut + main.js. */
.page-offers.bg-entrance::after {
transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.page-offers > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-offers .section-block {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
.page-offers .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── WRAPPER HERO + CARDS ─── */
.offer-intro-block {
height: 80dvh;
display: flex;
flex-direction: column;
}
/* ─── HERO ─── */
.page-offers .offer-hero {
padding-top: clamp(120px, 14dvh, 210px);
padding-bottom: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
max-width: 500px;
margin: 0 auto;
gap: 4px;
flex-shrink: 0;
}
.offer-hero h1 {
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 2px;
}
.offer-hero .intro {
color: rgba(255,255,255,.68);
font-size: .92rem;
line-height: 1.6;
max-width: 560px;
margin-top: 2px;
}
/* ─── OFFER CARDS (LEVELS) ─── */
.offer-levels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2dvh, 28px);
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 10px 20px 20px;
flex: 1;
align-content: center;
}
.page-offers .offer-card {
padding: clamp(20px, 2.5dvh, 36px) 28px;
display: flex;
flex-direction: column;
text-align: left;
position: relative;
border-radius: 20px;
background:
radial-gradient(circle at 15% 20%, rgba(255,255,255,.80) 0%, transparent .5%),
radial-gradient(circle at 72% 8%, rgba(255,255,255,.65) 0%, transparent .4%),
radial-gradient(circle at 88% 55%, rgba(255,255,255,.72) 0%, transparent .45%),
radial-gradient(circle at 30% 78%, rgba(255,255,255,.55) 0%, transparent .38%),
radial-gradient(circle at 58% 34%, rgba(255,255,255,.60) 0%, transparent .35%),
radial-gradient(circle at 90% 80%, rgba(255,255,255,.50) 0%, transparent .32%),
radial-gradient(circle at 45% 90%, rgba(255,255,255,.45) 0%, transparent .30%),
rgba(8,12,30,.72);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 15px 40px rgba(0,0,0,.45);
color: #fff;
text-decoration: none;
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.page-offers .offer-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
border-radius: 20px 20px 0 0;
opacity: .7;
transition: opacity .35s ease;
}
.page-offers .offer-card:hover {
transform: translateY(-6px);
}
.page-offers .offer-card:hover::before {
opacity: 1;
}
/* Tier colors — top accent + hover glow */
.page-offers .offer-card.essentiel::before {
background: linear-gradient(90deg, rgba(59,130,246,.6), rgba(147,197,253,.9));
}
.page-offers .offer-card.essentiel:hover {
border-color: rgba(59,130,246,.38);
box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 55px rgba(59,130,246,.28);
}
.page-offers .offer-card.pro::before {
background: linear-gradient(90deg, rgba(251,191,36,.8), rgba(253,230,138,1));
}
/* ─── Offre Business mise en valeur par rapport à ses voisines (même
logique que .service-capsule--featured sur services.php) : bordure et
halo permanents (pas seulement au survol) + agrandissement léger sur
desktop, où les 3 cartes sont côte à côte.
Valeurs renforcées (bordure + halo + fond) : sur le fond galaxie plus
clair implémenté depuis, le halo amber d'origine (.20/.28 d'opacité)
se fondait trop dans l'arrière-plan et la carte ne ressortait plus
assez de ses voisines. ─── */
.page-offers .offer-card.pro {
border-width: 2px;
border-color: rgba(251,191,36,.75);
/* background-color seul (pas background-image) : la carte de base
définit ses 7 halos décoratifs via background-image (shorthand) —
on ne veut retoucher que la teinte de fond solide sous-jacente,
pas remplacer/perdre ces halos. */
background-color: rgba(58,38,4,.80);
box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 60px rgba(251,191,36,.40), inset 0 1px 0 rgba(255,255,255,.12);
}
.page-offers .offer-card.pro:hover {
border-color: rgba(251,191,36,.85);
box-shadow: 0 20px 60px rgba(0,0,0,.65), 0 0 80px rgba(251,191,36,.55), inset 0 1px 0 rgba(255,255,255,.16);
}
@media (min-width: 901px) {
.page-offers .offer-card.pro {
transform: scale(1.06);
z-index: 2;
animation: offerCardProGlow 3.4s ease-in-out infinite;
}
.page-offers .offer-card.pro:hover {
transform: scale(1.06) translateY(-6px);
}
}
@keyframes offerCardProGlow {
0%, 100% { box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 42px rgba(251,191,36,.20); }
50% { box-shadow: 0 22px 60px rgba(0,0,0,.5), 0 0 58px rgba(251,191,36,.34); }
}
.page-offers .offer-card.surmesure::before {
background: linear-gradient(90deg, rgba(var(--header-accent),.7), rgba(147,197,253,.95));
}
.page-offers .offer-card.surmesure:hover {
border-color: rgba(var(--header-accent),.36);
box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 55px rgba(var(--header-accent),.26);
}
.offer-card h2 {
margin: 0 0 4px;
font-size: clamp(1rem, 1.4vw, 1.25rem);
line-height: 1.35;
word-break: break-word;
}
.offer-card p {
margin: 0;
font-size: clamp(.8rem, 1vw, .92rem);
line-height: 1.6;
color: rgba(255,255,255,.80);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.offer-card .meta {
margin-top: auto;
padding-top: 12px;
color: rgba(255,255,255,.45);
font-size: .82rem;
}
.offer-card .price {
display: inline-block;
padding: 7px 16px;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 800;
letter-spacing: -.01em;
border: 1px solid rgba(255,255,255,.08);
margin: 4px 0 6px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Demande explicite : le badge de prix Essentiel (900 CHF, section 1) doit
avoir le même fond que celui du Premium (accent-following), pas un bleu
fixe. */
.offer-card.essentiel .price { background: rgba(var(--header-accent),.18); border-color: rgba(var(--header-accent),.40); color: rgba(147,197,253,1); }
.offer-card.pro .price { background: rgba(251,191,36,.18); border-color: rgba(251,191,36,.40); color: rgba(253,230,138,1); }
.offer-card.surmesure .price { background: rgba(var(--header-accent),.18); border-color: rgba(var(--header-accent),.40); color: rgba(147,197,253,1); }
/* OFFER PLANET THUMBNAIL */
.offer-planet {
display: flex;
justify-content: center;
margin-bottom: clamp(10px, 1.5dvh, 18px);
}
.offer-planet img {
width: clamp(60px, 7dvh, 80px);
height: clamp(60px, 7dvh, 80px);
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 22px rgba(255,255,255,.12);
transition: transform .4s ease, box-shadow .4s ease;
}
.offer-card:hover .offer-planet img {
transform: scale(1.08);
}
.offer-card.essentiel:hover .offer-planet img {
box-shadow: 0 0 36px rgba(59,130,246,.45);
}
.offer-card.pro:hover .offer-planet img {
box-shadow: 0 0 36px rgba(251,191,36,.45);
}
.offer-card.surmesure:hover .offer-planet img {
box-shadow: 0 0 36px rgba(var(--header-accent),.45);
}
/* OFFER LINK */
.offer-link {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
text-decoration: none;
color: inherit;
}
/* RIBBON */
.offer-ribbon {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 12px;
border-radius: 14px;
font-size: .75rem;
font-weight: 700;
pointer-events: none;
z-index: 2;
/* Libellé plus long ("Réservé aux professionnels") : retour à la ligne
borné plutôt qu'un débordement du badge hors de la carte offre. */
max-width: 150px;
white-space: normal;
text-align: center;
line-height: 1.2;
}
/* Les 3 rubans (essentiel / pro / sur mesure) partagent le même gabarit
discret (contour + couleur de l'offre) — aucun des trois n'est mis en
avant visuellement par rapport aux autres. */
/* Demande explicite (correction) : les rubans "Le choix des professionnels"
(Business) et "Sur mesure" (Premium) ne doivent PAS dépendre de la
couleur active — ils reviennent à des teintes fixes (ambre / violet,
cohérent avec l'identité Business/Premium utilisée ailleurs sur le site).
Seul le badge de PRIX (.offer-card .price, plus haut) suit désormais
l'accent pour Essentiel ET Premium. */
.offer-ribbon.pro {
background: rgba(251,191,36,.14);
color: rgba(253,230,138,1);
border: 1px solid rgba(251,191,36,.40);
}
.offer-ribbon.essentiel {
background: rgba(59,130,246,.14);
color: rgba(147,197,253,1);
border: 1px solid rgba(59,130,246,.40);
}
.offer-ribbon.surmesure {
background: rgba(139,92,246,.14);
color: #c4b5fd;
border: 1px solid rgba(139,92,246,.40);
}
/* ─── OPTIONS HEADER ─── */
.offer-options-header {
text-align: center;
max-width: 800px;
margin: 0 auto;
padding: 60px 20px 20px;
}
.offer-options-header h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(100deg, #ffffff 40%, rgba(122,92,255,.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
}
.offer-options-header p {
color: rgba(255,255,255,.58);
font-size: 1rem;
line-height: 1.7;
}
/* ─── OPTIONS GRID ─── */
.options-section-header {
grid-column: 1 / -1;
position: relative;
padding: 48px 0 20px;
margin-top: 8px;
}
.options-section-header:first-child {
padding-top: 0;
margin-top: 0;
}
.options-section-header:not(:first-child)::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(var(--header-accent),.55) 25%,
rgba(122,92,255,.35) 75%,
transparent 100%
);
box-shadow: 0 0 14px rgba(var(--header-accent),.2);
}
.sect-header-content {
display: flex;
align-items: center;
gap: 20px;
background: linear-gradient(
135deg,
rgba(var(--header-accent),.06) 0%,
rgba(122,92,255,.04) 100%
);
border: 1px solid rgba(var(--header-accent),.14);
border-left: 3px solid rgba(var(--header-accent),.5);
border-radius: 0 10px 10px 0;
padding: 14px 20px 14px 18px;
position: relative;
overflow: hidden;
}
.sect-header-content::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(122,92,255,.04)
);
pointer-events: none;
}
.sect-num {
font-size: 2.2rem;
font-weight: 900;
font-variant-numeric: tabular-nums;
color: rgba(var(--header-accent),.22);
letter-spacing: -.03em;
line-height: 1;
flex-shrink: 0;
font-family: monospace;
}
.sect-orb {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(var(--header-accent),.55);
box-shadow: 0 0 10px rgba(var(--header-accent),.6), 0 0 24px rgba(var(--header-accent),.25);
margin-left: auto;
animation: orbPulse 3s ease-in-out infinite;
}
@keyframes orbPulse {
0%, 100% { opacity: .6; box-shadow: 0 0 8px rgba(var(--header-accent),.5), 0 0 20px rgba(var(--header-accent),.2); }
50% { opacity: 1; box-shadow: 0 0 14px rgba(var(--header-accent),.9), 0 0 32px rgba(var(--header-accent),.4); }
}
.options-section-header strong {
display: block;
font-size: .82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(255,255,255,.82);
margin-bottom: 4px;
}
.options-section-header p {
font-size: .76rem;
color: rgba(255,255,255,.38);
line-height: 1.5;
margin: 0;
}
.opt-cat-from {
font-size: .68rem;
font-weight: 500;
color: rgba(255,255,255,.3);
margin-left: 6px;
vertical-align: middle;
font-style: italic;
}
.opt-cat-from--devis {
color: rgba(251,191,36,.7);
font-style: normal;
font-weight: 600;
}
/* ─── Prix des modules (2ᵉ colonne) ───
Anciennement un flex "space-between" : le prix se retrouvait collé au
bord droit de la carte, avec un bord GAUCHE en dents de scie (chaque
libellé — "Offert", "Dès 80 CHF", "Dès 800 CHF"… — ayant une largeur
différente). Passage à une grille 2 colonnes (cf. .options-category li
plus bas) : la colonne prix a désormais une largeur fixe et le texte y
est aligné à gauche, donc tous les prix démarrent à la même position
verticale, sans être collés au bord droit de la carte. */
/* Demande explicite : les prix des modules ne doivent pas dépendre de la
couleur sélectionnée, ils restent blancs (cf. 2ᵉ règle .opt-price plus
bas dans la cascade, qui gagnait jusqu'ici avec rgb(var(--header-accent))). */
.opt-price {
font-size: .75rem;
font-weight: 600;
color: rgba(255,255,255,.82);
white-space: nowrap;
text-align: left;
}
.opt-name {
min-width: 0;
}
.options-section-divider {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 16px;
padding: 20px 0 8px;
}
.options-section-divider span {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255,255,255,.45);
white-space: nowrap;
}
.options-section-divider::after {
content: "";
flex: 1;
height: 1px;
background: rgba(255,255,255,.08);
}
.offer-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
padding: 40px 20px 60px;
text-align: left;
}
.options-category {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 16px;
padding: 20px 24px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(20px);
transition: opacity 1.2s ease, transform 1.2s ease, border-color .3s ease, box-shadow .3s ease;
}
.options-category.is-visible {
opacity: 1;
transform: translateY(0);
}
.options-category:hover {
border-color: rgba(122,92,255,.22);
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* ── Module mis en avant (offres-site.php) : Multilingue (offert avec
Business) et Réservations & Agenda (offert avec Sur-mesure/Premium)
isolés chacun sur leur propre ligne pleine largeur, séparés des autres
modules du même groupe, avec un léger habillage de couleur et un badge
« Module offert » accroché au titre. Les items restent en colonne,
comme dans une carte de module normale. Couleur ambre = offert avec
Business (Multilingue), couleur bleue = offert avec Sur-mesure/Premium
(Réservations & Agenda), pour rester cohérent avec le code couleur déjà
utilisé par .sur-adv-module-callout / .badge-offered--blue ailleurs. ── */
.options-category--featured {
grid-column: 1 / -1;
background: linear-gradient(135deg, rgba(251,191,36,.07) 0%, rgba(122,92,255,.05) 100%);
border: 1px solid rgba(251,191,36,.28);
}
.options-category--featured:hover {
border-color: rgba(251,191,36,.45);
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.options-category--featured h3 .badge-offered {
margin-left: 8px;
vertical-align: middle;
}
/* Demande explicite : le module "Réservations et agenda" (offert avec
Sur-mesure/Premium) ne doit pas hériter de la couleur active — le
commentaire ci-dessus documentait déjà "couleur bleue" pour ce module,
contrairement au code qui suivait --header-accent par erreur. */
.options-category--featured--premium {
background: linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(99,102,241,.04) 100%);
border-color: rgba(59,130,246,.28);
}
.options-category--featured--premium:hover {
border-color: rgba(59,130,246,.45);
}
/* Demande explicite : sur surmesure.php, les modules offerts avec l'offre
Premium doivent être violets (pas bleus comme sur offres-site.php). */
.page-sur .options-category--featured--premium {
background: linear-gradient(135deg, rgba(139,92,246,.08) 0%, rgba(99,102,241,.04) 100%);
border-color: rgba(139,92,246,.28);
}
.page-sur .options-category--featured--premium:hover {
border-color: rgba(139,92,246,.45);
}
.option-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.options-category h3 {
font-size: 1rem;
font-weight: 700;
color: #fff;
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.07);
display: flex;
align-items: center;
flex-wrap: wrap;
}
/* Icônes de catégorie remplaçant les emojis (offres-site.php / sitevitrine.php
/ sitepro.php / surmesure.php) : ligne sobre dans la teinte violette déjà
utilisée pour les libellés h4 de cette même grille. */
.opt-cat-icon {
width: 18px;
height: 18px;
margin-right: 8px;
flex-shrink: 0;
color: rgba(122,92,255,.85);
}
.options-category h4 {
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(122,92,255,.8);
margin: 14px 0 6px;
}
.options-category ul {
list-style: none;
padding: 0;
margin: 0 0 6px;
}
.options-category li {
font-size: .88rem;
color: rgba(255,255,255,.68);
padding: 5px 0 5px 16px;
position: relative;
line-height: 1.5;
display: grid;
grid-template-columns: 1fr clamp(84px, 12vw, 108px);
align-items: baseline;
gap: 8px;
}
.options-category li::before {
content: "▸";
position: absolute;
left: 0;
color: rgba(122,92,255,.7);
font-size: .75rem;
}
/* ─── TOOLTIP BADGES (div créé par JS) ─── */
.tooltip {
position: fixed;
background: rgba(10,15,40,.96);
color: #fff;
padding: 5px 11px;
border-radius: 6px;
font-size: .74rem;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity .15s ease;
z-index: 9999;
transform: translate(-50%, calc(-100% - 10px));
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
/* ─── BADGES ─── */
.badge {
display: inline-flex;
align-items: center;
font-size: .75rem;
padding: 3px 10px;
border-radius: 999px;
font-weight: 600;
letter-spacing: .02em;
border: 1px solid transparent;
white-space: nowrap;
}
.badge.essentiel {
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.65);
border-color: rgba(255,255,255,.10);
}
.badge.optional {
background: rgba(251,191,36,.12);
color: #fbbf24;
border-color: rgba(251,191,36,.45);
box-shadow: 0 0 8px rgba(251,191,36,.25), inset 0 0 6px rgba(251,191,36,.08);
text-shadow: 0 0 8px rgba(251,191,36,.5);
}
/* ─── Badges des étapes "Comment je crée votre site internet" (accueil.php) ─── */
.badge.free {
background: rgba(16,185,129,.12);
color: #34d399;
border-color: rgba(16,185,129,.4);
box-shadow: 0 0 8px rgba(16,185,129,.2), inset 0 0 6px rgba(16,185,129,.08);
}
.badge.offered {
background: rgba(139,92,246,.14);
color: #c4b5fd;
border-color: rgba(139,92,246,.4);
box-shadow: 0 0 8px rgba(139,92,246,.2), inset 0 0 6px rgba(139,92,246,.08);
}
.badge.milestone {
background: rgba(59,130,246,.12);
color: #93c5fd;
border-color: rgba(59,130,246,.4);
}
.badge.pro {
background: rgba(251,191,36,.14);
color: #fde68a;
border-color: rgba(251,191,36,.38);
}
.badge.surmesure {
background: rgba(59,130,246,.13);
color: #93c5fd;
border-color: rgba(59,130,246,.35);
}
/* .badge.intro : ancien bouton "Accéder aux offres" (bulle « » » anim.
arrowSlideright) remplacé par .offers-hero-cta (.modules-cta-link) ci-dessous
— son texte était uniquement dans un tooltip qui ne s'affichait jamais
(aucune règle [data-tooltip]::after ne le reliait). */
.offers-hero-cta {
margin-top: 10px;
}
.badge.suivante {
font-size: 1.4rem;
background: rgb(var(--header-accent));
color: #fff;
border-radius: 60%;
border: none;
margin-left: 20px;
animation: arrowSlideleft 5s ease-in-out infinite;
text-decoration: none;
}
.badge.precedente {
font-size: 1.4rem;
background: rgb(var(--header-accent));
color: #fff;
border-radius: 60%;
border: none;
margin-right: 20px;
animation: arrowSlide1 5s ease-in-out infinite;
text-decoration: none;
}
/* ─── TOOLTIPS ─── */
.tooltip-link {
text-decoration: none;
color: inherit;
}
.tooltip-icon {
position: relative;
display: inline-block;
margin-left: 6px;
cursor: pointer;
font-size: 14px;
color: rgba(255,255,255,.6);
vertical-align: middle;
}
.tooltip-text {
position: absolute;
background: rgba(10,14,30,.96);
border: 1px solid rgba(255,255,255,.10);
color: #fff;
border-radius: 8px;
font-size: .75rem;
font-weight: 500;
white-space: nowrap;
padding: 6px 12px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease, visibility .2s ease;
z-index: 10;
}
.tooltip-icon .tooltip-text {
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(4px);
}
.tooltip-icon:hover .tooltip-text {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* ─── Tooltip directement au survol d'un bouton (pas d'icône séparée à côté) :
ex. boutons "Enregistrer" de compte-profil.php. ─── */
.btn-tooltip { position: relative; }
.btn-tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: rgba(10,14,30,.96);
border: 1px solid rgba(255,255,255,.10);
color: #fff;
border-radius: 8px;
font-size: .75rem;
font-weight: 500;
white-space: nowrap;
padding: 6px 12px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
z-index: 20;
}
.btn-tooltip:hover::after,
.btn-tooltip:focus-visible::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* ─── COMPARISON TABLE ─── */
.offer-comparison {
max-width: 1600px;
height: 85dvh;
margin: 40px auto 0;
margin-bottom: 60px;
padding: 0 20px 60px;
}
.table-scroll-hint { display: none; }
.table-wrapper {
border-radius: 16px;
border: 1px solid rgba(255,255,255,.08);
background:
radial-gradient(circle at 8% 12%, rgba(255,255,255,.75) 0%, transparent .4%),
radial-gradient(circle at 55% 5%, rgba(255,255,255,.60) 0%, transparent .35%),
radial-gradient(circle at 92% 18%, rgba(255,255,255,.70) 0%, transparent .42%),
radial-gradient(circle at 22% 55%, rgba(255,255,255,.50) 0%, transparent .30%),
radial-gradient(circle at 78% 42%, rgba(255,255,255,.55) 0%, transparent .33%),
radial-gradient(circle at 40% 88%, rgba(255,255,255,.45) 0%, transparent .28%),
radial-gradient(circle at 88% 78%, rgba(255,255,255,.48) 0%, transparent .30%),
radial-gradient(circle at 14% 80%, rgba(255,255,255,.42) 0%, transparent .27%),
rgba(6,8,20,.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 60px rgba(0,0,0,.25);
position: relative;
padding-top: 14px;
overflow: visible;
}
/* Sticky thead */
.offer-comparison thead {
position: sticky;
top: 0;
z-index: 10;
}
.offer-comparison thead tr {
background:
radial-gradient(circle at 8% 12%, rgba(255,255,255,.75) 0%, transparent .4%),
radial-gradient(circle at 55% 5%, rgba(255,255,255,.60) 0%, transparent .35%),
radial-gradient(circle at 92% 18%, rgba(255,255,255,.70) 0%, transparent .42%),
rgba(6,8,20,.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.offer-comparison table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.offer-comparison tbody tr {
border-bottom: 1px solid rgba(255,255,255,.055);
transition: background .2s ease;
}
.offer-comparison tbody tr:last-child { border-bottom: none; }
.offer-comparison tbody tr:hover { background: rgba(255,255,255,.025); }
.offer-comparison tr.table-section-label td {
font-size: .6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255,255,255,.35);
padding-top: 24px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,.06);
background: transparent !important;
pointer-events: none;
}
.offer-comparison tr.table-section-label:hover { background: transparent !important; }
.offer-comparison td,
.offer-comparison th {
padding: 15px 20px;
text-align: center;
line-height: 1.5;
position: relative;
vertical-align: middle;
}
.offer-comparison td {
font-size: .78rem;
word-wrap: break-word;
overflow-wrap: break-word;
color: rgba(255,255,255,.75);
}
.offer-comparison th {
font-size: 0.8rem;
font-weight: 700;
color: #fff;
}
.offer-comparison td:first-child,
.offer-comparison th:first-child {
width: 30%;
text-align: left;
font-weight: 500;
color: rgba(255,255,255,.88);
padding-left: 24px;
}
.offer-comparison td:not(:first-child),
.offer-comparison th:not(:first-child) {
border-left: 1px solid rgba(255,255,255,.05);
}
/* Col 2 — Essentiel (cyan) */
.offer-comparison th:nth-child(2),
.offer-comparison td:nth-child(2) {
background: rgba(59,130,246,.03);
}
/* Col 3 — Pro (recommended, amber) */
.offer-comparison th:nth-child(3),
.offer-comparison td:nth-child(3) {
background: rgba(251,191,36,.06);
border-left: 1px solid rgba(251,191,36,.20) !important;
border-right: 1px solid rgba(251,191,36,.20);
}
.offer-comparison th:nth-child(3) {
box-shadow: 0 6px 28px rgba(251,191,36,.14);
}
/* Col 4 — Sur mesure (blue) */
.offer-comparison th:nth-child(4),
.offer-comparison td:nth-child(4) {
background: rgba(var(--header-accent),.04);
}
/* Row hover per column */
.offer-comparison tbody tr:hover td:nth-child(2) { background: rgba(59,130,246,.07); }
.offer-comparison tbody tr:hover td:nth-child(3) { background: rgba(251,191,36,.11); }
.offer-comparison tbody tr:hover td:nth-child(4) { background: rgba(var(--header-accent),.07); }
/* thead */
.offer-comparison thead th {
font-weight: 800;
padding-top: 28px;
padding-bottom: 22px;
font-size: 0.85rem;
letter-spacing: .01em;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.offer-comparison thead th:first-child { border-radius: 16px 0 0 0; }
.offer-comparison thead th:last-child { border-radius: 0 16px 0 0; }
.offer-comparison thead th:nth-child(2) { color: #93c5fd; }
.offer-comparison thead th:nth-child(3) { color: #fde68a; }
.offer-comparison thead th:nth-child(4) { color: #93c5fd; }
/* tfoot */
.offer-comparison tfoot tr {
border-top: 1px solid rgba(255,255,255,.08);
}
.offer-comparison tfoot td {
color: rgba(255,255,255,.45);
font-size: .82rem;
padding: 14px 20px;
}
.offer-comparison tfoot td:first-child { padding-left: 24px; }
/* Price row */
.offer-comparison .price-row {
border-top: 1px solid rgba(255,255,255,.10) !important;
}
/* L'intitulé "Tarifs" avait été réduit et assombri (.74rem, opacité .55) par
rapport aux autres libellés de ligne (Livraison, SEO, Pages…) : c'est ce qui
rendait la ligne plus terne. On revient à la même mise en avant que les
autres lignes. */
.offer-comparison .price-row td:first-child {
font-weight: 500;
color: rgba(255,255,255,.88);
}
.offer-comparison .price-row th {
font-size: 1.0rem;
font-weight: 800;
color: #fff;
padding-top: 22px;
padding-bottom: 22px;
}
/* Couleurs alignées sur celles du thead (col2 = Essentiel/cyan, col3 =
Business/or, col4 = Sur-mesure/bleu) : col2 et col4 étaient inversées, ce
qui donnait un bleu pastel plus terne sur la colonne Essentiel au lieu du
cyan vif utilisé partout ailleurs dans le tableau. */
.offer-comparison .price-row th:nth-child(2) { color: #93c5fd; }
.offer-comparison .price-row th:nth-child(3) { font-size: 1.4rem; color: #fde68a; }
.offer-comparison .price-row th:nth-child(4) { color: #93c5fd; }
/* Check / Cross coloring */
.offer-comparison .val-check { color: #4ade80; font-size: 1.1rem; font-weight: 700; }
/* Contraste relevé (.30 -> .42) : reste volontairement discret par rapport
au ✓ vert (fonctionnalité non incluse), mais devait rester lisible en tant
que symbole — demande explicite "améliore ce qui est visuellement fade". */
.offer-comparison .val-cross { color: rgba(255,255,255,.42); font-size: .9rem; letter-spacing: .05em; }
/* ─── OFFER CTA ─── */
/* .offer-cta suit maintenant la FAQ (padding-top réduit pour resserrer
l'écart) et précède à son tour le formulaire de commande générique
(.order-form-section, cf. plus bas dans le fichier) qui est désormais la
vraie dernière section et réserve lui-même l'espace du footer flottant. */
.offer-cta {
text-align: center;
padding: 32px 20px 48px;
max-width: 900px;
margin: 0 auto;
}
.offer-cta h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800;
margin-bottom: 40px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.cta-btn {
display: inline-block;
padding: 12px 32px;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
font-size: .95rem;
color: #fff;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.cta-btn:hover {
transform: translateY(-3px);
}
/* Essentiel (cyan) et Premium (bleu) : neutres par défaut, ne révèlent leur
couleur qu'au survol — seule l'offre Business reste mise en avant en
permanence (cf. .cta-btn--featured ci-dessous). */
.cta-btn--essentiel:hover {
border-color: rgba(59,130,246,.6);
box-shadow: 0 10px 25px rgba(59,130,246,.18);
background: rgba(59,130,246,.10);
}
.cta-btn--premium:hover {
border-color: rgba(var(--header-accent),.6);
box-shadow: 0 10px 25px rgba(var(--header-accent),.18);
background: rgba(var(--header-accent),.10);
}
/* Business (or) : couleur toujours visible, pas seulement au survol. */
.cta-btn--featured {
background: rgba(251,191,36,.75);
border-color: rgba(251,191,36,.55);
transform: scale(1.06);
box-shadow: 0 8px 24px rgba(251,191,36,.30);
}
.cta-btn--featured:hover {
background: rgba(251,191,36,.90);
box-shadow: 0 14px 34px rgba(251,191,36,.42);
transform: scale(1.06) translateY(-3px);
}
/* ─── MODALITIES ─── */
.offer-modalities {
max-width: 860px;
margin: 0 auto;
padding: 40px 20px var(--footer-clearance);
}
.offer-modalities h2 {
text-align: center;
font-size: clamp(1.4rem, 2.5vw, 1.9rem);
font-weight: 700;
margin-bottom: 28px;
color: rgba(255,255,255,.9);
}
.modalities-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.modalities-list li {
padding: 14px 20px 14px 44px;
border-radius: 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
color: rgba(255,255,255,.70);
font-size: .92rem;
line-height: 1.6;
position: relative;
transition: border-color .25s ease, background .25s ease;
}
.modalities-list li::before {
content: "✦";
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
font-size: .65rem;
color: rgba(var(--header-accent),.65);
}
.modalities-list li:hover {
background: rgba(255,255,255,.045);
border-color: rgba(255,255,255,.10);
}
/* ========================= sitevitrine.php ========================= */
/* ─── BACKGROUND FIXE ─── */
.page-vitrine::before {
content: "";
position: fixed;
inset: 0;
/* Même traitement que hm.php/offres-site.php : rideau dégradé en haut
(masque le fond derrière le header flottant) + bgsiteindex.png en
fond de page entier. La planète-eau (ex .vitrine-hero-planet,
retirée du hero) revient en ::after, cf. plus bas. */
background:
linear-gradient(to bottom, rgba(3,5,14,.96) 0, rgba(3,5,14,.96) 90px, transparent 260px),
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
/* Planète-eau (offre Essentiel) sur son propre calque ::after, masquée en
fondu radial — même principe que .page-offers::after / .page-hm::after. */
.page-vitrine::after {
content: "";
position: fixed;
inset: 0;
/* vmin (plus petit des 2 axes du viewport) au lieu de 75%/60% : garde
une taille carrée quel que soit le format d'écran, pour que la
planète reste ronde au lieu d'être étirée. Masque en cercle exact
(unité vmin également) plutôt qu'ellipse en %, pour rester
parfaitement rond lui aussi. */
background: url("../image/planet-bleu.webp") center / 62vmin no-repeat;
-webkit-mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
pointer-events: none;
z-index: 0;
/* Rétrécit + s'efface au scroll, même mécanisme que .page-offers::after
(cf. main.js, bloc "DÉCOR DE FOND"). */
transform: scale(var(--bg-scroll-scale, 1));
opacity: var(--bg-scroll-opacity, 1);
transform-origin: center center;
transition: transform .08s linear, opacity .08s linear;
}
/* Arrivée de page : la planète part d'invisible/réduite et grandit jusqu'à
sa taille pleine en 1s (cf. main.js, qui pose --bg-scroll-scale/-opacity à
0 puis 1 juste après le chargement et retire .bg-entrance une fois
l'animation terminée pour laisser le scroll reprendre la main avec sa
transition rapide habituelle). */
.page-vitrine.bg-entrance::after {
transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.page-vitrine > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-vitrine .section-block {
opacity: 0;
transform: translateY(28px);
transition: opacity 2.5s ease .5s, transform 2.5s ease .5s;
}
.page-vitrine .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── HERO : taille réduite ─── */
.vitrine-hero {
min-height: 60dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 180px 20px 60px;
text-align: center;
position: relative;
}
/* ─── NAVIGATION INTER-OFFRES : plus visible ─── */
.vitrine-offer-nav {
position: absolute;
top: clamp(90px, 12vh, 120px);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-between;
width: min(860px, calc(100% - 40px));
}
.vitrine-nav-link {
display: inline-flex;
position: relative;
align-items: center;
gap: 10px;
font-size: .95rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255,255,255,.80);
text-decoration: none;
padding: 12px 28px;
border-radius: 999px;
background: rgba(var(--header-accent),.12);
border: 1px solid rgba(var(--header-accent),.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 0 18px rgba(var(--header-accent),.15),
inset 0 1px 0 rgba(255,255,255,.08);
transition:
color .25s ease,
background .25s ease,
border-color .25s ease,
box-shadow .25s ease,
transform .25s ease;
}
.vitrine-nav-link:hover {
color: #fff;
background: rgba(var(--header-accent),.25);
border-color: rgba(var(--header-accent),.75);
box-shadow:
0 0 32px rgba(var(--header-accent),.35),
0 8px 20px rgba(var(--header-accent),.20),
inset 0 1px 0 rgba(255,255,255,.12);
transform: translateY(-2px);
}
.vitrine-nav-link--prev:hover {
transform: translateY(-2px) translateX(-3px);
}
.vitrine-nav-link--next:hover {
transform: translateY(-2px) translateX(3px);
}
.vitrine-nav-link svg {
width: 18px;
height: 18px;
transition: transform .25s ease;
flex-shrink: 0;
}
.vitrine-nav-link--prev:hover svg {
transform: translateX(-3px);
}
.vitrine-nav-link--next:hover svg {
transform: translateX(3px);
}
.vitrine-nav-link::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(-100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: rgba(10,14,30,.96);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.85);
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
white-space: nowrap;
padding: 5px 12px;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 10;
}
.vitrine-nav-link:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.vitrine-track-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,.22);
border: 1px solid rgba(255,255,255,.18);
flex-shrink: 0;
}
.vitrine-track-dot--active {
width: 10px;
height: 10px;
background: rgb(var(--header-accent));
border-color: rgba(var(--header-accent),.8);
box-shadow: 0 0 10px rgba(var(--header-accent),.70);
}
.vitrine-track-line {
width: 32px;
height: 1px;
background: rgba(255,255,255,.20);
}
/* ─── PLANÈTE DÉCORATIVE DERRIÈRE LA HERO (offre correspondante) ───
Commune aux 3 pages d'offre (sitevitrine/sitepro/surmesure) : la planète
de l'offre (déjà utilisée sur offres-site.php) est reprise en grand
format, centrée derrière le bloc "offre / descriptif / prix / cta",
sous la navigation inter-offres. Adoucie (opacité + flou + fondu radial)
pour rester lisible en arrière-plan sans nuire au contraste du texte. */
.vitrine-hero-planet,
.pro-hero-planet,
.sur-hero-planet {
position: absolute;
top: 50%;
left: 50%;
width: clamp(360px, 42vw, 620px);
height: clamp(360px, 42vw, 620px);
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
opacity: .34;
filter: blur(1px);
mask-image: radial-gradient(circle, rgba(0,0,0,.9) 55%, transparent 78%);
-webkit-mask-image: radial-gradient(circle, rgba(0,0,0,.9) 55%, transparent 78%);
}
.vitrine-hero-planet img,
.pro-hero-planet img,
.sur-hero-planet img {
width: 100%;
height: 100%;
object-fit: contain;
}
.vitrine-offer-nav,
.pro-offer-nav,
.sur-offer-nav {
z-index: 2;
}
/* ─── HERO INNER ─── */
.vitrine-hero-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 700px;
}
/* Demande explicite : le badge "EXPRESS" (nom de l'offre Essentiel) reste
bleu quelle que soit la couleur active — doit désormais en hériter. */
.vitrine-tier-label {
display: inline-flex;
align-items: center;
padding: 4px 16px;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgb(var(--header-accent));
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.28);
box-shadow: 0 0 14px rgba(var(--header-accent),.12);
}
/* ─── Ruban d'offre (même logique que les cartes offres-site.php) ─── */
.vitrine-tier-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
/* Demande explicite : le badge "express" en haut du hero doit hériter de
la couleur active. */
.vitrine-tier-ribbon {
display: inline-flex;
align-items: center;
padding: 4px 14px;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
color: rgba(var(--header-accent),.9);
background: rgba(var(--header-accent),.10);
border: 1px dashed rgba(var(--header-accent),.35);
}
.vitrine-hero h1 {
font-size: clamp(1.9rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vitrine-subtitle {
color: rgba(255,255,255,.60);
font-size: 1.05rem;
line-height: 1.75;
max-width: 560px;
margin: 0;
}
.vitrine-price-block {
margin: 4px 0;
}
.vitrine-price {
/* Pastille adoucie : le dégradé plein + halo trop marqués attiraient
trop l'œil sur le prix Essentiel par rapport au reste du hero.
Demande explicite : ce badge de prix doit hériter de la couleur
active plutôt que rester fixé en bleu/cyan. */
display: inline-flex;
align-items: baseline;
gap: 9px;
padding: 12px 28px;
border-radius: 14px;
color: rgba(255,255,255,.92);
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.28);
box-shadow: 0 0 14px rgba(var(--header-accent),.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.vitrine-price .price-amount { font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; }
.vitrine-price .price-currency { font-size: .92rem; font-weight: 700; opacity: .82; text-transform: uppercase; letter-spacing: .05em; }
/* ─── INCLUS + MODALITÉS ─── */
.vitrine-details {
max-width: 1100px;
margin: 0 auto;
padding: 60px 20px;
}
.vitrine-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.vitrine-card {
padding: 32px 28px;
border-radius: 20px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
transition: border-color .3s ease, box-shadow .3s ease;
}
.vitrine-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.vitrine-card--includes::before {
background: linear-gradient(90deg, transparent, rgba(59,130,246,.70), transparent);
}
.vitrine-card--terms::before {
background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
}
.vitrine-card--includes:hover {
border-color: rgba(59,130,246,.22);
box-shadow: 0 10px 32px rgba(59,130,246,.09);
}
.vitrine-card h2 {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.vitrine-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.vitrine-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-radius: 10px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.05);
color: rgba(255,255,255,.68);
font-size: .88rem;
line-height: 1.55;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
/* Demande explicite : les symboles "validé" du tableau inclus doivent
suivre la couleur active, pas un bleu fixe. */
.vitrine-list li::before {
content: "✓";
color: rgb(var(--header-accent));
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
font-size: .85rem;
}
.vitrine-list--terms {
counter-reset: modal-counter;
}
.vitrine-list--terms li {
counter-increment: modal-counter;
}
.vitrine-list--terms li::before {
content: counter(modal-counter, decimal-leading-zero) ".";
color: rgba(59,130,246,.55);
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
min-width: 22px;
flex-shrink: 0;
}
.vitrine-card--includes .vitrine-list li:hover {
background: rgba(59,130,246,.06);
border-color: rgba(59,130,246,.16);
color: rgba(255,255,255,.88);
}
/* ─── Feature offerte mise en évidence dans "Inclus" (même logique que
.pro-list-highlight / .sur-list-highlight) : Formulaire de contact,
offert avec Essentiel — cf. bannière .vit-adv-callout plus bas. ─── */
.vitrine-list-highlight {
color: rgba(59,130,246,.95);
font-weight: 600;
background: rgba(59,130,246,.07);
border-color: rgba(59,130,246,.2);
}
/* ─── OPTIONS ─── */
.vitrine-options {
max-width: 1100px;
margin: 0 auto;
padding: 20px 20px 60px;
}
.vitrine-options-header {
text-align: center;
max-width: 680px;
margin: 0 auto 36px;
}
.vitrine-options-header h2 {
font-size: clamp(1.35rem, 2.5vw, 1.85rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vitrine-options-header p {
color: rgba(255,255,255,.50);
font-size: .92rem;
line-height: 1.7;
}
.vitrine-options-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
}
.vitrine-options-grid .option-card {
grid-column: span 2;
}
.vitrine-options-grid .option-card:nth-child(7) {
grid-column: 3 / 5;
}
.option-card {
padding: 22px 20px;
border-radius: 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(16px);
transition:
opacity .8s ease,
transform .8s ease,
border-color .3s ease,
box-shadow .3s ease;
}
.option-card.is-visible {
opacity: 1;
transform: translateY(0);
}
.option-card:nth-child(1) { transition-delay: .05s; }
.option-card:nth-child(2) { transition-delay: .12s; }
.option-card:nth-child(3) { transition-delay: .19s; }
.option-card:nth-child(4) { transition-delay: .26s; }
.option-card:nth-child(5) { transition-delay: .33s; }
.option-card:nth-child(6) { transition-delay: .40s; }
.option-card:nth-child(7) { transition-delay: .47s; }
/* Apparition plus lente sur sitevitrine/sitepro/surmesure uniquement (le
reste du site garde .8s) : demandé pour accentuer l'effet d'arrivée sur
ces 3 pages, en cohérence avec les 2.5s des .section-block ci-dessus. */
.page-vitrine .option-card,
.page-pro .option-card,
.page-sur .option-card {
transition:
opacity 2.5s ease .5s,
transform 2.5s ease .5s,
border-color .3s ease,
box-shadow .3s ease;
}
.option-card:hover {
border-color: rgba(var(--header-accent),.22);
box-shadow: 0 8px 24px rgba(var(--header-accent),.08);
}
.option-card h3 {
font-size: .92rem;
font-weight: 700;
color: #fff;
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.option-card ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.option-card li {
font-size: .83rem;
color: rgba(255,255,255,.60);
padding: 4px 0 4px 14px;
position: relative;
line-height: 1.5;
}
.option-card li::before {
content: "▸";
position: absolute;
left: 0;
color: rgba(var(--header-accent),.65);
font-size: .72rem;
top: 5px;
}
.option-card li.opt-item {
padding-left: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.option-card li.opt-item::before {
display: none;
}
.opt-item-name {
flex: 1;
color: rgba(255,255,255,.70);
line-height: 1.5;
}
.opt-price {
flex-shrink: 0;
font-size: .78rem;
font-weight: 600;
color: rgba(255,255,255,.82);
white-space: nowrap;
margin-top: 1px;
}
/* ─── ADVANCED MODULES CALLOUT ─── */
.vit-adv-callout {
grid-column: 1 / -1;
max-width: 1100px;
margin: 8px auto 0;
padding: 0 20px 48px;
width: 100%;
box-sizing: border-box;
}
.vit-adv-callout-inner {
display: flex;
align-items: center;
gap: 20px;
background: linear-gradient(135deg, rgba(122,92,255,.07) 0%, rgba(var(--header-accent),.05) 100%);
border: 1px solid rgba(122,92,255,.22);
border-left: 3px solid rgba(122,92,255,.6);
border-radius: 0 12px 12px 0;
padding: 18px 24px;
flex-wrap: wrap;
}
.vit-adv-callout-label {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(122,92,255,.9);
white-space: nowrap;
flex-shrink: 0;
}
.vit-adv-callout-text {
flex: 1;
font-size: .82rem;
color: rgba(255,255,255,.5);
line-height: 1.55;
margin: 0;
min-width: 200px;
}
.vit-adv-callout-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .8rem;
font-weight: 600;
color: rgba(122,92,255,.85);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: color .2s ease, gap .2s ease;
}
.vit-adv-callout-link svg {
width: 14px;
height: 14px;
transition: transform .2s ease;
}
.vit-adv-callout-link:hover {
color: rgba(122,92,255,1);
gap: 10px;
}
.vit-adv-callout-link:hover svg {
transform: translateX(3px);
}
.vit-adv-callout-inner + .vit-adv-callout-inner {
margin-top: 10px;
}
.vit-adv-callout-inner--cyan {
background: linear-gradient(135deg, rgba(59,130,246,.07) 0%, rgba(var(--header-accent),.04) 100%);
border-color: rgba(59,130,246,.22);
border-left-color: rgba(59,130,246,.6);
}
.vit-adv-callout-link--cyan {
color: rgba(59,130,246,.85);
}
.vit-adv-callout-inner--cyan .vit-adv-callout-label {
color: rgba(59,130,246,.9);
}
.vit-adv-callout-link--cyan:hover {
color: rgba(59,130,246,1);
}
.vit-adv-callout-inner--green {
background: linear-gradient(135deg, rgba(34,197,94,.07) 0%, rgba(16,185,129,.04) 100%);
border-color: rgba(34,197,94,.22);
border-left-color: rgba(34,197,94,.6);
}
.vit-adv-callout-link--green {
color: rgba(34,197,94,.85);
}
.vit-adv-callout-inner--green .vit-adv-callout-label {
color: rgba(34,197,94,.9);
}
.vit-adv-callout-link--green:hover {
color: rgba(34,197,94,1);
}
/* ─── "Et après la livraison ?" : les bannières hébergement / conseil
(auparavant deux chips compacts dans .vit-adv-callout) deviennent une
vraie section à 2 blocs, sur sitevitrine.php / sitepro.php / surmesure.php.
Le contenu (label/texte/lien) reprend tel quel vit_hm_callout_* et
vit_conseil_callout_*. ─── */
.after-delivery {
max-width: 1100px;
margin: 0 auto;
padding: 16px 20px 70px;
}
.after-delivery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.after-delivery-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 32px 30px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(var(--header-accent),.04) 100%);
border: 1px solid rgba(59,130,246,.24);
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.after-delivery-card:hover {
border-color: rgba(59,130,246,.42);
box-shadow: 0 14px 34px rgba(0,0,0,.3);
transform: translateY(-3px);
}
.after-delivery-icon {
font-size: 1.7rem;
line-height: 1;
}
.after-delivery-card h3 {
font-size: 1.15rem;
font-weight: 800;
color: #fff;
margin: 0;
}
.after-delivery-card p {
font-size: .9rem;
color: rgba(255,255,255,.6);
line-height: 1.6;
margin: 0;
flex: 1;
}
.after-delivery-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .88rem;
font-weight: 700;
color: rgba(59,130,246,.9);
text-decoration: none;
transition: color .2s ease, gap .2s ease;
}
.after-delivery-link svg {
width: 15px;
height: 15px;
transition: transform .2s ease;
}
.after-delivery-link:hover {
color: rgba(59,130,246,1);
gap: 10px;
}
.after-delivery-link:hover svg {
transform: translateX(3px);
}
/* ── Couleurs alignées sur la page de destination du lien, pas sur la page
d'où l'on vient (sitevitrine/sitepro/surmesure partagent maintenant les
mêmes couleurs) : « Le site livré, et ensuite ? » pointe vers hm.php
(cyan, cf. $_header_accent_map dans partials/header.php) — c'est déjà la
teinte par défaut de .after-delivery-card ci-dessus — et « Besoin d'un
accompagnement ? » pointe vers conseil.php (violet). ── */
.after-delivery-card--conseil {
background: linear-gradient(135deg, rgba(139,92,246,.08) 0%, rgba(99,102,241,.04) 100%);
border-color: rgba(139,92,246,.24);
}
.after-delivery-card--conseil:hover {
border-color: rgba(139,92,246,.42);
}
.after-delivery-card--conseil .after-delivery-link {
color: rgba(139,92,246,.9);
}
.after-delivery-card--conseil .after-delivery-link:hover {
color: rgba(139,92,246,1);
}
.pro-adv-module-callout {
background: linear-gradient(135deg, rgba(251,191,36,.08) 0%, rgba(245,158,11,.04) 100%);
border-color: rgba(251,191,36,.25);
border-left-color: rgba(251,191,36,.65);
}
.pro-adv-module-callout .vit-adv-callout-label {
color: rgba(251,191,36,.95);
}
/* ─── PAGE ESSENTIEL (sitevitrine.php) — bannière formulaire de contact offert ─── */
.vit-contact-offer-callout {
background: linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(var(--header-accent),.04) 100%);
border-color: rgba(59,130,246,.25);
border-left-color: rgba(59,130,246,.65);
}
.vit-contact-offer-callout .vit-adv-callout-label {
color: rgba(59,130,246,.95);
}
.vit-adv-callout-link--amber {
color: rgba(251,191,36,.85);
}
.vit-adv-callout-link--amber:hover {
color: rgba(251,191,36,1);
}
.pro-list-highlight {
color: rgba(251,191,36,.95);
font-weight: 600;
background: rgba(251,191,36,.06);
border-color: rgba(251,191,36,.15);
}
/* ─── PAGE PREMIUM (surmesure.php) ─── */
.sur-adv-module-callout {
background: linear-gradient(135deg, rgba(var(--header-accent),.08) 0%, rgba(99,102,241,.04) 100%);
border-color: rgba(var(--header-accent),.25);
border-left-color: rgba(var(--header-accent),.65);
}
.sur-adv-module-callout .vit-adv-callout-label {
color: rgba(var(--header-accent),.95);
}
.vit-adv-callout-link--blue {
color: rgba(var(--header-accent),.85);
}
.vit-adv-callout-link--blue:hover {
color: rgba(var(--header-accent),1);
}
.sur-list-highlight {
color: rgba(251,191,36,.95);
font-weight: 600;
background: rgba(251,191,36,.06);
border-color: rgba(251,191,36,.15);
}
.sur-list-highlight--blue {
color: rgba(var(--header-accent),.95);
background: rgba(var(--header-accent),.06);
border-color: rgba(var(--header-accent),.15);
}
.page-sur .sur-hero,
.page-sur .sur-details,
.page-sur .sur-options,
.page-sur .sur-cta {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.sur-hero {
padding-top: clamp(100px, 14vw, 160px);
padding-bottom: 60px;
text-align: center;
position: relative;
}
.sur-offer-nav {
position: absolute;
top: clamp(90px, 12vh, 120px);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-between;
width: min(860px, calc(100% - 40px));
}
.sur-nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: .95rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255,255,255,.80);
text-decoration: none;
padding: 12px 28px;
border-radius: 999px;
background: rgba(var(--header-accent),.12);
border: 1px solid rgba(var(--header-accent),.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 0 18px rgba(var(--header-accent),.16),
inset 0 1px 0 rgba(255,255,255,.08);
transition:
color .25s ease,
background .25s ease,
border-color .25s ease,
box-shadow .25s ease,
transform .25s ease;
}
.sur-nav-link:hover {
color: #fff;
background: rgba(var(--header-accent),.24);
border-color: rgba(var(--header-accent),.75);
box-shadow:
0 0 36px rgba(var(--header-accent),.38),
0 8px 20px rgba(var(--header-accent),.20),
inset 0 1px 0 rgba(255,255,255,.12);
transform: translateY(-2px);
}
.sur-nav-link--prev:hover { transform: translateY(-2px) translateX(-3px); }
.sur-nav-link--overview:hover { transform: translateY(-2px) translateX(3px); }
.sur-nav-link svg {
width: 18px;
height: 18px;
transition: transform .25s ease;
flex-shrink: 0;
}
.sur-nav-link--prev:hover svg { transform: translateX(-3px); }
.sur-nav-link--overview:hover svg { transform: translateX(3px); }
.sur-nav-link::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(-100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: rgba(10,14,30,.96);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.85);
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
white-space: nowrap;
padding: 5px 12px;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 10;
}
.sur-nav-link:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.sur-tier-label {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(var(--header-accent),.9);
background: rgba(var(--header-accent),.1);
border: 1px solid rgba(var(--header-accent),.25);
border-radius: 20px;
padding: 4px 14px;
}
/* ─── Ruban d'offre (même logique que les cartes offres-site.php) ─── */
.sur-tier-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.sur-tier-ribbon {
display: inline-flex;
align-items: center;
padding: 4px 14px;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
color: rgba(255,255,255,.75);
background: rgba(255,255,255,.06);
border: 1px dashed rgba(255,255,255,.22);
}
.sur-hero-inner {
position: relative;
z-index: 1;
}
.sur-hero-inner h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
margin: 0 0 12px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.sur-subtitle {
color: rgba(255,255,255,.55);
font-size: 1rem;
line-height: 1.7;
max-width: 540px;
margin: 0 auto 28px;
}
.sur-price-block {
margin-bottom: 28px;
}
.sur-price {
/* Même style de pastille douce que .vitrine-price (sitevitrine.php),
couleur bleue = accent de surmesure.php. */
display: inline-flex;
align-items: baseline;
gap: 9px;
padding: 13px 30px;
border-radius: 14px;
color: rgba(255,255,255,.92);
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(96,165,250,.30);
box-shadow: 0 0 14px rgba(var(--header-accent),.14), inset 0 1px 0 rgba(255,255,255,.06);
}
.sur-price .price-amount { font-size: clamp(1.6rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; }
.sur-price .price-currency { font-size: .92rem; font-weight: 700; opacity: .82; text-transform: uppercase; letter-spacing: .05em; }
.sur-details {
padding: 0 20px 48px;
}
.sur-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 1100px;
margin: 0 auto;
}
.sur-card {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 16px;
padding: 28px 24px;
position: relative;
overflow: hidden;
transition: border-color .3s ease, box-shadow .3s ease;
}
.sur-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.sur-card--includes::before {
background: linear-gradient(90deg, transparent, rgba(var(--header-accent),.80), transparent);
}
.sur-card--terms::before {
background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
}
.sur-card--includes:hover {
border-color: rgba(var(--header-accent),.22);
box-shadow: 0 10px 32px rgba(var(--header-accent),.09);
}
.sur-card h2 {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.sur-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.sur-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-radius: 10px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.05);
font-size: .88rem;
color: rgba(255,255,255,.68);
line-height: 1.55;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.sur-list li::before {
content: '✓';
color: rgba(var(--header-accent),.8);
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
font-size: .85rem;
}
.sur-card--includes .sur-list li:hover {
background: rgba(var(--header-accent),.06);
border-color: rgba(var(--header-accent),.16);
color: rgba(255,255,255,.88);
}
.sur-list--terms {
counter-reset: modal-counter;
}
.sur-list--terms li {
counter-increment: modal-counter;
}
.sur-list--terms li::before {
content: counter(modal-counter, decimal-leading-zero) ".";
color: rgba(var(--header-accent),.55);
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
min-width: 22px;
flex-shrink: 0;
}
.badge-offered {
display: inline-flex;
align-items: center;
margin-left: auto;
font-size: .62rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
padding: 2px 9px;
border-radius: 20px;
flex-shrink: 0;
line-height: 1.7;
}
.badge-offered--amber {
background: rgba(251,191,36,.12);
color: rgba(251,191,36,.95);
border: 1px solid rgba(251,191,36,.28);
}
.badge-offered--blue {
background: rgba(var(--header-accent),.12);
color: rgba(var(--header-accent),.95);
border: 1px solid rgba(var(--header-accent),.28);
}
/* Demande explicite : sur surmesure.php, les modules offerts avec l'offre
Premium/Sur-mesure doivent être violets (identité Premium fixe), pas
dépendants de la couleur active. */
.page-sur .badge-offered--blue {
background: rgba(139,92,246,.12);
color: rgba(139,92,246,.95);
border: 1px solid rgba(139,92,246,.28);
}
.badge-offered--devis {
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.50);
border: 1px solid rgba(255,255,255,.12);
}
.highlight-anchor {
color: inherit;
text-decoration: none;
flex: 1;
}
.highlight-anchor:hover {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: currentColor;
opacity: .85;
}
.sur-options {
padding: 0 20px 48px;
}
.sur-cta {
text-align: center;
padding: 60px 20px var(--footer-clearance);
max-width: 760px;
margin: 0 auto;
}
.sur-cta h2 {
font-size: clamp(1.45rem, 2.5vw, 2rem);
font-weight: 700;
margin: 0 0 14px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.sur-cta p {
color: rgba(255,255,255,.55);
font-size: .98rem;
line-height: 1.75;
max-width: 560px;
margin: 0 auto 28px;
}
@media (max-width: 768px) {
.sur-cards {
grid-template-columns: 1fr;
}
}
/* ─── BACKGROUND FIXE ─── */
.page-sur::before {
content: "";
position: fixed;
inset: 0;
/* Même traitement que hm.php/offres-site.php : rideau dégradé en haut
+ bgsiteindex.png en fond de page entier. La planète-terre (ex
.sur-hero-planet, retirée du hero) revient en ::after, cf. plus bas. */
background:
linear-gradient(to bottom, rgba(3,5,14,.96) 0, rgba(3,5,14,.96) 90px, transparent 260px),
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
/* Planète-terre (offre Premium/sur-mesure) sur son propre calque ::after,
masquée en fondu radial. */
.page-sur::after {
content: "";
position: fixed;
inset: 0;
/* vmin, même principe que .page-vitrine::after : planète ronde quel
que soit le format d'écran. */
background: url("../image/planet-terre.webp") center / 62vmin no-repeat;
-webkit-mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
pointer-events: none;
z-index: 0;
/* Rétrécit + s'efface au scroll, même mécanisme que .page-offers::after
(cf. main.js, bloc "DÉCOR DE FOND"). */
transform: scale(var(--bg-scroll-scale, 1));
opacity: var(--bg-scroll-opacity, 1);
transform-origin: center center;
transition: transform .08s linear, opacity .08s linear;
}
.page-sur.bg-entrance::after {
transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.page-sur > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-sur .section-block {
opacity: 0;
transform: translateY(28px);
transition: opacity 2.5s ease .5s, transform 2.5s ease .5s;
}
.page-sur .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── BTN PRIMARY OVERRIDE (tier Sur-mesure / "Démarrer mon projet") : seul
bouton hero de tout le site à porter le double accent bleu (couleur de la
page, cf. .sur-adv-module-callout) + liseré ambre (rappel du positionnement
"Premium" de cette offre) — glow pulsé en continu + rockette (au lieu de la
flèche générique "→" des autres pages) qui s'envole légèrement au survol. ─── */
.page-sur .btn-primary {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 17px 46px;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
border-radius: 999px;
color: #fff;
text-decoration: none;
/* demande explicite : "les boutons (couleur blanc) ne sont pas assez
lisibles" — le dégradé qui montait jusqu'au blanc pur (mix ...#fff)
rendait le texte blanc illisible avec l'accent "Blanc"/cyan ; on reste
désormais toujours mélangé vers le noir (jamais plus clair que
l'accent lui-même), comme la recette validée du hero accueil.php. */
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 30%, #000) 0%, color-mix(in srgb, rgb(var(--header-accent)) 48%, #000) 100%);
/* demande explicite : "adapte les boutons [...] à la couleur
sélectionnée" — bordure ambre figée alors que le fond suivait déjà
--header-accent. */
border: 1.5px solid rgba(var(--header-accent),.45);
box-shadow:
0 0 34px rgba(var(--header-accent),.35),
0 10px 28px rgba(var(--header-accent),.28),
inset 0 1px 0 rgba(255,255,255,.16);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
background .3s ease,
box-shadow .3s ease,
transform .3s ease,
border-color .3s ease;
position: relative;
overflow: hidden;
animation: surCtaGlow 2.8s ease-in-out infinite;
}
.page-sur .btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.page-sur .btn-primary::after {
content: none;
}
.page-sur .btn-primary .rocket-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform .3s ease;
}
.page-sur .btn-primary:hover {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 45%, #000) 0%, color-mix(in srgb, rgb(var(--header-accent)) 62%, #000) 100%);
border-color: rgba(var(--header-accent),.75);
box-shadow:
0 0 56px rgba(var(--header-accent),.45),
0 14px 36px rgba(var(--header-accent),.32),
inset 0 1px 0 rgba(255,255,255,.20);
transform: translateY(-3px);
}
.page-sur .btn-primary:hover .rocket-icon-wrap,
.page-sur .btn-primary:focus-visible .rocket-icon-wrap {
transform: translate(3px, -3px) rotate(35deg) scale(1.1);
}
.page-sur .btn-primary:hover .rocket-icon-trail,
.page-sur .btn-primary:focus-visible .rocket-icon-trail {
opacity: .85;
height: 11px;
}
@keyframes surCtaGlow {
0%, 100% {
box-shadow:
0 0 34px rgba(var(--header-accent),.35),
0 10px 28px rgba(var(--header-accent),.28),
inset 0 1px 0 rgba(255,255,255,.16);
}
50% {
box-shadow:
0 0 46px rgba(var(--accent-harmony-1),.22),
0 10px 28px rgba(var(--header-accent),.28),
inset 0 1px 0 rgba(255,255,255,.16);
}
}
/* ─── CTA "Créer mon projet" (hero + CTA final), habillage "tech" ───
Vient compléter .page-sur .btn-primary ci-dessus (glow, gradient), sans
le remplacer : coins coupés façon panneau HUD, police monospace,
balayage lumineux en boucle. Les 2 occurrences du bouton sur
surmesure.php (hero + final) partagent cette classe. Spécificité
(3 classes) > .page-sur .btn-primary (2 classes), donc ces règles
gagnent sans !important.
Demande explicite : l'effet "terminal de saisie" (prompt "> " + curseur
clignotant "_" simulant une frappe) est retiré, mais la police monospace
est conservée — cf. .sur-cta-tech-prompt/.sur-cta-tech-cursor plus bas,
désormais orphelins (spans retirés du markup). Cette même formule
(police + coins HUD + balayage, sans effet de frappe) est reprise sur
sitevitrine.php et sitepro.php via les mêmes sélecteurs .sur-cta-tech
étendus ci-dessous à .page-vitrine/.page-pro. */
.page-sur .btn-primary.sur-cta-tech,
.page-vitrine .btn-primary.sur-cta-tech,
.page-pro .btn-primary.sur-cta-tech {
border-radius: 8px;
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
gap: 8px;
}
.sur-cta-tech-corner {
position: absolute;
width: 14px;
height: 14px;
pointer-events: none;
}
.sur-cta-tech-corner--tl {
top: 4px;
left: 4px;
border-top: 2px solid rgba(255,255,255,.8);
border-left: 2px solid rgba(255,255,255,.8);
}
.sur-cta-tech-corner--br {
bottom: 4px;
right: 4px;
border-bottom: 2px solid rgba(255,255,255,.8);
border-right: 2px solid rgba(255,255,255,.8);
}
.sur-cta-tech-prompt {
color: rgba(56,189,248,.95);
font-weight: 700;
}
.sur-cta-tech-cursor {
display: inline-block;
color: rgba(255,255,255,.85);
animation: surCtaCursorBlink 1s steps(1) infinite;
}
@keyframes surCtaCursorBlink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* Balayage lumineux en boucle — remplace le ::after neutralisé
(content:none) sur .page-sur .btn-primary de base, uniquement pour cette
variante "tech" (spécificité plus élevée, cf. note ci-dessus). */
.page-sur .btn-primary.sur-cta-tech::after,
.page-vitrine .btn-primary.sur-cta-tech::after,
.page-pro .btn-primary.sur-cta-tech::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
transform: skewX(-20deg);
animation: surCtaScan 3.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes surCtaScan {
0% { left: -60%; }
55% { left: 130%; }
100% { left: 130%; }
}
/* ─── CTA FINAL ─── */
.vitrine-cta {
text-align: center;
padding: 60px 20px var(--footer-clearance);
max-width: 760px;
margin: 0 auto;
}
.vitrine-cta h2 {
font-size: clamp(1.45rem, 2.5vw, 2rem);
font-weight: 700;
margin: 0 0 14px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vitrine-cta p {
color: rgba(255,255,255,.55);
font-size: .98rem;
line-height: 1.75;
max-width: 560px;
margin: 0 auto 28px;
}
/* ─── BTN PRIMARY (tier Essentiel / "Créer mon projet") : même structure que
.page-sur .btn-primary (référence), couleur cyan de la page à la place du
bleu — glow pulsé en continu + rockette au lieu de la flèche "→". ─── */
.page-vitrine .btn-primary {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 17px 46px;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
border-radius: 999px;
color: #fff;
text-decoration: none;
/* demande explicite : "adapte les boutons [...] voir les choix faits
[...] à accueil.php" — dégradé figé (bleu/cyan fixe) remplacé par la
même recette accent-aware que .page-refonte/.page-programmation
.btn-primary (rgb(var(--accent-harmony-1)) -> rgb(var(--header-accent))). */
/* demande explicite : "les boutons (couleur blanc) ne sont pas assez
lisibles" — dégradé toujours mélangé vers le noir (jamais la couleur
d'accent pure), pour rester lisible avec le texte blanc même quand
l'accent choisi est "Blanc"/cyan (quasi-blanc). */
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--accent-harmony-1)) 40%, #000) 0%, color-mix(in srgb, rgb(var(--header-accent)) 48%, #000) 100%);
border: 1.5px solid rgba(255,255,255,.40);
box-shadow:
0 0 34px rgba(var(--header-accent),.35),
0 10px 28px rgba(var(--header-accent),.24),
inset 0 1px 0 rgba(255,255,255,.16);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
background .3s ease,
box-shadow .3s ease,
transform .3s ease,
border-color .3s ease;
position: relative;
overflow: hidden;
animation: vitCtaGlow 2.8s ease-in-out infinite;
}
.page-vitrine .btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.page-vitrine .btn-primary::after {
content: none;
}
.page-vitrine .btn-primary .rocket-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform .3s ease;
}
.page-vitrine .btn-primary:hover {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--accent-harmony-1)) 55%, #000) 0%, color-mix(in srgb, rgb(var(--accent-harmony-3)) 62%, #000) 100%);
border-color: rgba(255,255,255,.70);
box-shadow:
0 0 56px rgba(var(--header-accent),.45),
0 14px 36px rgba(var(--header-accent),.28),
inset 0 1px 0 rgba(255,255,255,.20);
transform: translateY(-3px);
}
.page-vitrine .btn-primary:hover .rocket-icon-wrap,
.page-vitrine .btn-primary:focus-visible .rocket-icon-wrap {
transform: translate(3px, -3px) rotate(35deg) scale(1.1);
}
.page-vitrine .btn-primary:hover .rocket-icon-trail,
.page-vitrine .btn-primary:focus-visible .rocket-icon-trail {
opacity: .85;
height: 11px;
}
@keyframes vitCtaGlow {
0%, 100% {
box-shadow:
0 0 34px rgba(var(--header-accent),.35),
0 10px 28px rgba(var(--header-accent),.24),
inset 0 1px 0 rgba(255,255,255,.16);
}
50% {
box-shadow:
0 0 46px rgba(var(--accent-harmony-1),.30),
0 10px 28px rgba(var(--header-accent),.24),
inset 0 1px 0 rgba(255,255,255,.16);
}
}
.page-vitrine .section-block.is-visible .option-card {
opacity: 1;
transform: translateY(0);
}
/* ========================= sitepro.php ========================= */
/* ─── BACKGROUND FIXE ─── */
.page-pro::before {
content: "";
position: fixed;
inset: 0;
/* Même traitement que hm.php/offres-site.php : rideau dégradé en haut
+ bgsiteindex.png en fond de page entier. La planète-mars (ex
.pro-hero-planet, retirée du hero) revient en ::after, cf. plus bas. */
background:
linear-gradient(to bottom, rgba(3,5,14,.96) 0, rgba(3,5,14,.96) 90px, transparent 260px),
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
/* Planète-mars (offre Business) sur son propre calque ::after, masquée en
fondu radial. */
.page-pro::after {
content: "";
position: fixed;
inset: 0;
/* vmin, même principe que .page-vitrine::after : planète ronde quel
que soit le format d'écran. */
background: url("../image/planet-orange.webp") center / 62vmin no-repeat;
-webkit-mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
pointer-events: none;
z-index: 0;
/* Rétrécit + s'efface au scroll, même mécanisme que .page-offers::after
(cf. main.js, bloc "DÉCOR DE FOND"). */
transform: scale(var(--bg-scroll-scale, 1));
opacity: var(--bg-scroll-opacity, 1);
transform-origin: center center;
transition: transform .08s linear, opacity .08s linear;
}
.page-pro.bg-entrance::after {
transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.page-pro > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-pro .section-block {
opacity: 0;
transform: translateY(28px);
transition: opacity 2.5s ease .5s, transform 2.5s ease .5s;
}
.page-pro .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── HERO ─── */
.pro-hero {
min-height: 60dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 180px 20px 60px;
text-align: center;
position: relative;
}
/* ─── NAVIGATION INTER-OFFRES ─── */
.pro-offer-nav {
position: absolute;
top: clamp(90px, 12vh, 120px);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-between;
width: min(860px, calc(100% - 40px));
}
.pro-nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: .95rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255,255,255,.80);
text-decoration: none;
padding: 12px 28px;
border-radius: 999px;
background: rgba(var(--header-accent),.12);
border: 1px solid rgba(var(--header-accent),.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 0 18px rgba(var(--header-accent),.16),
inset 0 1px 0 rgba(255,255,255,.08);
transition:
color .25s ease,
background .25s ease,
border-color .25s ease,
box-shadow .25s ease,
transform .25s ease;
}
.pro-nav-link:hover {
color: #fff;
background: rgba(var(--header-accent),.24);
border-color: rgba(var(--header-accent),.75);
box-shadow:
0 0 36px rgba(var(--header-accent),.38),
0 8px 20px rgba(var(--header-accent),.20),
inset 0 1px 0 rgba(255,255,255,.12);
transform: translateY(-2px);
}
.pro-nav-link--prev:hover { transform: translateY(-2px) translateX(-3px); }
.pro-nav-link--next:hover { transform: translateY(-2px) translateX(3px); }
.pro-nav-link svg {
width: 18px;
height: 18px;
transition: transform .25s ease;
flex-shrink: 0;
}
.pro-nav-link--prev:hover svg { transform: translateX(-3px); }
.pro-nav-link--next:hover svg { transform: translateX(3px); }
.pro-nav-link::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(-100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: rgba(10,14,30,.96);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.85);
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
white-space: nowrap;
padding: 5px 12px;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 10;
}
.pro-nav-link:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ─── HERO INNER ─── */
.pro-hero-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 700px;
}
.pro-tier-label {
display: inline-flex;
align-items: center;
padding: 4px 16px;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgb(var(--accent-harmony-1));
background: rgba(var(--header-accent),.12);
border: 1px solid rgba(var(--header-accent),.38);
box-shadow:
0 0 18px rgba(var(--header-accent),.20),
inset 0 1px 0 rgba(255,255,255,.07);
}
/* ─── Ruban d'offre (même logique que les cartes offres-site.php) ─── */
.pro-tier-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.pro-tier-ribbon {
display: inline-flex;
align-items: center;
padding: 4px 14px;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
color: rgba(255,255,255,.75);
background: rgba(255,255,255,.06);
border: 1px dashed rgba(255,255,255,.22);
}
.pro-hero h1 {
font-size: clamp(1.9rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
background: linear-gradient(100deg, #ffffff 35%, rgba(var(--header-accent),.95) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pro-subtitle {
color: rgba(255,255,255,.60);
font-size: 1.05rem;
line-height: 1.75;
max-width: 560px;
margin: 0;
}
.pro-price-block {
margin: 4px 0;
}
.pro-price {
/* Même style de pastille douce que .vitrine-price (sitevitrine.php),
couleur ambre/or = accent de sitepro.php. */
display: inline-flex;
align-items: baseline;
gap: 9px;
padding: 12px 28px;
border-radius: 14px;
color: rgba(255,255,255,.92);
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.30);
box-shadow: 0 0 14px rgba(var(--header-accent),.14), inset 0 1px 0 rgba(255,255,255,.06);
}
.pro-price .price-amount { font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; }
.pro-price .price-currency { font-size: .92rem; font-weight: 700; opacity: .82; text-transform: uppercase; letter-spacing: .05em; }
/* ─── INCLUS + MODALITÉS ─── */
.pro-details {
max-width: 1100px;
margin: 0 auto;
padding: 60px 20px;
}
.pro-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.pro-card {
padding: 32px 28px;
border-radius: 20px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
transition: border-color .3s ease, box-shadow .3s ease;
}
.pro-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.pro-card--includes::before {
background: linear-gradient(90deg, transparent, rgba(var(--header-accent),.80), transparent);
}
.pro-card--terms::before {
background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
}
.pro-card--includes:hover {
border-color: rgba(var(--header-accent),.25);
box-shadow: 0 10px 32px rgba(var(--header-accent),.10);
}
.pro-card h2 {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.pro-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.pro-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-radius: 10px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.05);
color: rgba(255,255,255,.68);
font-size: .88rem;
line-height: 1.55;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pro-list li::before {
content: "✓";
color: rgb(var(--header-accent));
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
font-size: .85rem;
}
.pro-list--terms {
counter-reset: modal-counter;
}
.pro-list--terms li {
counter-increment: modal-counter;
}
.pro-list--terms li::before {
content: counter(modal-counter, decimal-leading-zero) ".";
color: rgba(var(--header-accent),.55);
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
min-width: 22px;
flex-shrink: 0;
}
.pro-card--includes .pro-list li:hover {
background: rgba(var(--header-accent),.07);
border-color: rgba(var(--header-accent),.18);
color: rgba(255,255,255,.88);
}
/* ─── OPTIONS ─── */
.pro-options {
max-width: 1100px;
margin: 0 auto;
padding: 20px 20px 60px;
}
.pro-options-header {
text-align: center;
max-width: 680px;
margin: 0 auto 36px;
}
.pro-options-header h2 {
font-size: clamp(1.35rem, 2.5vw, 1.85rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #ffffff 35%, rgba(var(--header-accent),.95) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pro-options-header p {
color: rgba(255,255,255,.50);
font-size: .92rem;
line-height: 1.7;
}
.pro-options-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
}
.pro-options-grid .option-card { grid-column: span 2; }
.pro-options-grid .option-card:nth-child(4) { grid-column: 2 / 4; }
.pro-options-grid .option-card:nth-child(5) { grid-column: 4 / 6; }
/* ─── CTA FINAL ─── */
.pro-cta {
text-align: center;
padding: 60px 20px var(--footer-clearance);
max-width: 760px;
margin: 0 auto;
}
.pro-cta h2 {
font-size: clamp(1.45rem, 2.5vw, 2rem);
font-weight: 700;
margin: 0 0 14px;
background: linear-gradient(100deg, #ffffff 35%, rgba(var(--header-accent),.95) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pro-cta p {
color: rgba(255,255,255,.55);
font-size: .98rem;
line-height: 1.75;
max-width: 560px;
margin: 0 auto 28px;
}
/* ─── BTN PRIMARY (tier Business / "Créer mon projet") : même structure que
.page-sur .btn-primary (référence), couleur ambre de la page à la place du
bleu — glow pulsé en continu + rockette au lieu de la flèche "→". ─── */
.page-pro .btn-primary {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 17px 46px;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
border-radius: 999px;
color: #fff;
text-decoration: none;
/* demande explicite : "les boutons (couleur blanc) ne sont pas assez
lisibles" — dégradé mélangé vers le noir plutôt que la couleur
d'accent pure, pour rester lisible avec le texte blanc quel que soit
l'accent (y compris "Blanc"/cyan, quasi-blanc). */
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--accent-harmony-3)) 40%, #000) 0%, color-mix(in srgb, rgb(var(--header-accent)) 45%, #000) 50%, color-mix(in srgb, rgb(var(--accent-harmony-1)) 40%, #000) 100%);
border: 1.5px solid rgba(255,255,255,.40);
box-shadow:
0 0 34px rgba(var(--header-accent),.35),
0 10px 28px rgba(var(--header-accent),.24),
inset 0 1px 0 rgba(255,255,255,.16);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background .3s ease, box-shadow .3s ease, transform .3s ease, border-color .3s ease;
position: relative;
overflow: hidden;
animation: proCtaGlow 2.8s ease-in-out infinite;
}
.page-pro .btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.page-pro .btn-primary::after {
content: none;
}
.page-pro .btn-primary .rocket-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform .3s ease;
}
.page-pro .btn-primary:hover {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 55%, #000) 0%, color-mix(in srgb, rgb(var(--accent-harmony-1)) 60%, #000) 45%, color-mix(in srgb, rgb(var(--accent-harmony-1)) 45%, #000) 100%);
border-color: rgba(255,255,255,.70);
box-shadow:
0 0 56px rgba(var(--header-accent),.45),
0 14px 36px rgba(var(--header-accent),.28),
inset 0 1px 0 rgba(255,255,255,.20);
transform: translateY(-3px);
}
.page-pro .btn-primary:hover .rocket-icon-wrap,
.page-pro .btn-primary:focus-visible .rocket-icon-wrap {
transform: translate(3px, -3px) rotate(35deg) scale(1.1);
}
.page-pro .btn-primary:hover .rocket-icon-trail,
.page-pro .btn-primary:focus-visible .rocket-icon-trail {
opacity: .85;
height: 11px;
}
@keyframes proCtaGlow {
0%, 100% {
box-shadow:
0 0 34px rgba(var(--header-accent),.35),
0 10px 28px rgba(var(--header-accent),.24),
inset 0 1px 0 rgba(255,255,255,.16);
}
50% {
box-shadow:
0 0 46px rgba(var(--accent-harmony-1),.30),
0 10px 28px rgba(var(--header-accent),.24),
inset 0 1px 0 rgba(255,255,255,.16);
}
}
.page-pro .section-block.is-visible .option-card {
opacity: 1;
transform: translateY(0);
}
/* ── Accents complémentaires sitepro.php : Exemples concrets et Commander
utilisaient le bleu de marque générique (var(--brand-color)) au lieu de
l'ambre/or propre à l'offre Business (cf. .pro-tier-label / .pro-price). ── */
/* Exemples concrets */
.page-pro .exemples-header .exemples-label {
color: rgb(var(--header-accent));
background: rgba(var(--header-accent),.10);
border-color: rgba(var(--header-accent),.25);
}
.page-pro .exemple-card:hover {
border-color: rgba(var(--header-accent),.4);
box-shadow: 0 16px 40px rgba(var(--header-accent),.12);
}
.page-pro .exemple-card-price {
color: rgb(var(--header-accent));
background: rgba(var(--header-accent),.10);
border-color: rgba(var(--header-accent),.25);
}
.page-pro .exemple-card-link { color: rgb(var(--header-accent)); }
/* Commander (le pill "Commander" partage déjà .exemples-label ci-dessus) :
l'invitation à se connecter/créer un compte reste volontairement en bleu
générique (pas la couleur de la page) ; seul le formulaire de commande une
fois connecté (modules, cases à cocher) reprend l'accent or ci-dessous. */
.page-pro .account-checkbox-label input[type="checkbox"]:hover {
border-color: rgba(var(--header-accent),.6);
}
.page-pro .account-checkbox-label input[type="checkbox"]:focus-visible {
outline-color: rgb(var(--header-accent));
}
.page-pro .account-checkbox-label input[type="checkbox"]:checked {
background: rgb(var(--header-accent));
border-color: rgb(var(--header-accent));
}
.page-pro .account-module-card:has(input[type="checkbox"]:checked) {
border-color: rgba(var(--header-accent),.55);
background: rgba(var(--header-accent),.08);
}
.page-pro .module-tier-badge--standard {
color: rgb(var(--header-accent));
background: rgba(var(--header-accent),.10);
border-color: rgba(var(--header-accent),.3);
}
/* ========================= surmesure.php ========================= */
/* (bloc obsolète .page-custom / .custom-* supprimé — CSS orphelin datant
d'avant le renommage de la page en "sur-*"/.page-sur, ne correspondait
plus au markup actuel de surmesure.php ; cf. .page-sur/.sur-* plus haut,
juste avant "sitevitrine.php", pour la version actuelle de cette page). */
/* ========================= refonte.php / audit-site.php ========================= */
/* Même traitement "galaxie plein fond" que sitevitrine.php/sitepro.php/
surmesure.php ci-dessus (planète retirée du hero .cw-hero, cf. plus haut
dans ce fichier, et redonnée en ::after plein écran, avec rétrécissement +
fondu au scroll + grossissement à l'arrivée sur la page, cf. main.js bloc
"DÉCOR DE FOND"). audit-site.php partage .page-refonte (posé sur
avec .page-audit-site en 2e classe, cf. plus haut) : la seule différence
entre les 2 pages est la planète affichée (magma pour refonte.php,
business pour audit-site.php — déjà la répartition utilisée par
l'ancien .cw-hero::before ci-dessus). */
/* ─── BACKGROUND FIXE ─── */
.page-refonte::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(to bottom, rgba(3,5,14,.96) 0, rgba(3,5,14,.96) 90px, transparent 260px),
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
/* Planète-magma (refonte.php) sur son propre calque ::after, masquée en
fondu radial — même principe que .page-vitrine::after/.page-pro::after/
.page-sur::after. audit-site.php reçoit sa propre planète (planet-business)
via l'override juste en dessous. */
.page-refonte::after {
content: "";
position: fixed;
inset: 0;
/* vmin, même principe que .page-vitrine::after : planète ronde quel
que soit le format d'écran. */
background: url("../image/planet-rouge.webp") center / 62vmin no-repeat;
-webkit-mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
pointer-events: none;
z-index: 0;
/* Rétrécit + s'efface au scroll, même mécanisme que .page-offers::after
(cf. main.js, bloc "DÉCOR DE FOND"). */
transform: scale(var(--bg-scroll-scale, 1));
opacity: var(--bg-scroll-opacity, 1);
transform-origin: center center;
transition: transform .08s linear, opacity .08s linear;
}
/* Demande explicite : audit-site.php doit utiliser planet-orange, pas
planet-jupiter. */
.page-audit-site::after {
background-image: url("../image/planet-orange.webp");
}
.page-refonte.bg-entrance::after {
transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.page-refonte > * {
position: relative;
z-index: 1;
}
/* ========================= hm.php ========================= */
/* ─── BACKGROUND FIXE ───
TEST : galaxy-hm.png remplace bgsite.png comme fond de PAGE entier
(fixed) au lieu d'être concentrée dans .hm-hero (cf. plus haut,
background-image neutralisée). Même traitement (overlay noir .52) que
bgsite.png ailleurs sur le site. À rebasculer sur bgsite.png si le
rendu page entière ne convainc pas. */
.page-hm::before {
content: "";
position: fixed;
inset: 0;
/* Rideau dégradé en haut, même principe que .page-offers::before :
masque le fond derrière le header flottant. */
background:
linear-gradient(to bottom, rgba(3,5,14,.96) 0, rgba(3,5,14,.96) 90px, transparent 260px),
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
/* Galaxie sur son propre calque (::after), même principe que
.page-offers::after : masque radial pour estomper le contour
déchiqueté/tronqué en fondu, sans toucher au starfield en dessous. */
.page-hm::after {
content: "";
position: fixed;
inset: 0;
background: url("../image/galaxie-web.png") center / 75% 60% no-repeat;
/* Même recalibrage que .page-offers::after (les % sont des rayons,
pas des diamètres) pour que le fondu finisse avant le bord réel de
l'image. */
-webkit-mask-image: radial-gradient(ellipse 28% 22% at center, #000 30%, transparent 92%);
mask-image: radial-gradient(ellipse 28% 22% at center, #000 30%, transparent 92%);
pointer-events: none;
z-index: 0;
/* Rétrécit + s'efface au scroll, même mécanisme que .page-offers::after
(cf. main.js, bloc "DÉCOR DE FOND") — demande explicite : étendre
l'effet déjà en place sur sitevitrine/sitepro/surmesure à hm.php. */
transform: scale(var(--bg-scroll-scale, 1));
opacity: var(--bg-scroll-opacity, 1);
transform-origin: center center;
transition: transform .08s linear, opacity .08s linear;
}
/* Arrivée de page : demande explicite d'étendre l'animation d'entrée
(planète centrée, contenu masqué, puis zoom) à hm.php, qui en était
exclue jusqu'ici. Cf. .planet-entrance-page plus haut + main.js. */
.page-hm.bg-entrance::after {
transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.page-hm > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-hm .section-block {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
.page-hm .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── HERO ─── */
.hm-hero {
min-height: 55dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 140px 20px 80px;
text-align: center;
}
.hm-hero-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
max-width: 760px;
}
.hm-page-label {
display: inline-flex;
align-items: center;
padding: 4px 16px;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
/* Demande explicite : "renforcer la lisibilité des badges section 1" —
couleur bleue figée (ignorait l'accent) remplacée par la couleur
sélectionnée, et fond translucide (.10) remplacé par un fond sombre
bien plus opaque pour rester lisible sur un fond de planète clair. */
color: rgba(var(--header-accent),.95);
background: rgba(10,14,24,.65);
border: 1px solid rgba(var(--header-accent),.55);
box-shadow: 0 0 16px rgba(var(--header-accent),.25);
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.hm-hero h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ─── PILLS FEATURES ─── */
.hm-features-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
/* Demande explicite (suite) : ces badges restaient "trop clairs/pas assez
visibles" malgré le renfort déjà posé sur .hm-subtitle juste en dessous
(même souci de fond de planète clair derrière) — le fond quasi
transparent (.07) et le texte à 70% ne protégeaient pas assez. Fond bien
plus opaque (même recette que .heberg-hero-cta-line) + texte quasi blanc +
ombre portée, pour rester lisible quel que soit le fond. */
.hm-features-pills li {
padding: 5px 14px;
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
color: rgba(255,255,255,.92);
background: rgba(10,14,24,.55);
border: 1px solid rgba(59,130,246,.35);
letter-spacing: .03em;
text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
/* Demande explicite : "le texte ... est très peu lisible" — opacité relevée
+ légère ombre portée pour rester lisible sur un fond de planète clair. */
.hm-subtitle {
color: rgba(255,255,255,.85);
font-size: .98rem;
line-height: 1.75;
max-width: 580px;
margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 1px 10px rgba(0,0,0,.55);
}
/* ─── HERO CTA ─── */
.hm-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
margin-top: 4px;
}
.hm-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 999px;
color: rgba(255,255,255,.78);
text-decoration: none;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.hm-btn-secondary:hover {
color: #fff;
background: rgba(59,130,246,.10);
border-color: rgba(59,130,246,.40);
transform: translateY(-2px);
}
/* ─── BTN PRIMARY OVERRIDE (cyan) ─── */
.page-hm .btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 36px;
font-size: 1rem;
font-weight: 700;
letter-spacing: .04em;
border-radius: 999px;
color: #fff;
text-decoration: none;
/* demande explicite : "adapte les boutons [...] voir les choix faits
[...] à accueil.php" — dégradé bleu figé remplacé par la couleur
d'accent sélectionnée. */
/* demande explicite : "les boutons (couleur blanc) ne sont pas assez
lisibles" — dégradé toujours mélangé vers le noir plutôt qu'une
simple opacité de la couleur d'accent (qui laissait passer le fond
clair et rendait le texte blanc illisible avec l'accent "Blanc"). */
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 42%, #000) 0%, color-mix(in srgb, rgb(var(--accent-harmony-3)) 38%, #000) 100%);
border: 1px solid rgba(var(--header-accent),.45);
box-shadow:
0 0 28px rgba(var(--header-accent),.22),
0 8px 20px rgba(var(--header-accent),.14),
inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.page-hm .btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.page-hm .btn-primary::after {
content: "→";
font-size: .95rem;
opacity: .7;
transition: transform .3s ease, opacity .3s ease;
}
.page-hm .btn-primary:hover {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 58%, #000) 0%, color-mix(in srgb, rgb(var(--accent-harmony-3)) 52%, #000) 100%);
box-shadow:
0 0 44px rgba(var(--header-accent),.40),
0 12px 28px rgba(var(--header-accent),.22),
inset 0 1px 0 rgba(255,255,255,.16);
transform: translateY(-3px);
}
.page-hm .btn-primary:hover::after {
transform: translateX(4px);
opacity: 1;
}
/* ─── PLANS SECTION ─── */
.hm-plans {
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px 80px;
}
.hm-plans-header {
text-align: center;
max-width: 680px;
margin: 0 auto 48px;
}
.hm-plans-header h2 {
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-weight: 800;
margin: 0 0 10px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hm-plans-header p {
color: rgba(255,255,255,.50);
font-size: .95rem;
line-height: 1.7;
}
/* ─── PLANS GRID ─── */
.hm-plans-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
align-items: stretch;
}
/* ─── BANNIÈRE RABAIS FIDÉLITÉ ─── */
.hm-loyalty {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
margin-top: 32px;
padding: 28px 32px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(99,102,241,.06));
border: 1px solid rgba(59,130,246,.22);
}
.hm-loyalty-text { max-width: 480px; }
.hm-loyalty-label {
display: inline-block;
font-size: .68rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(59,130,246,.90);
background: rgba(59,130,246,.12);
border: 1px solid rgba(59,130,246,.32);
padding: 4px 12px;
border-radius: 999px;
margin-bottom: 10px;
}
.hm-loyalty-text h3 {
font-size: 1.05rem;
font-weight: 700;
color: #fff;
margin: 0 0 8px;
}
.hm-loyalty-text p {
font-size: .86rem;
color: rgba(255,255,255,.55);
line-height: 1.6;
margin: 0;
}
.hm-loyalty-stats {
display: flex;
gap: 16px;
flex-shrink: 0;
}
.hm-loyalty-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 92px;
padding: 14px 18px;
border-radius: 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(59,130,246,.24);
}
.hm-loyalty-discount {
font-size: 1.5rem;
font-weight: 800;
color: #22d3ee;
line-height: 1.1;
}
.hm-loyalty-period {
font-size: .74rem;
color: rgba(255,255,255,.50);
text-transform: uppercase;
letter-spacing: .04em;
}
@media (max-width: 640px) {
.hm-loyalty { flex-direction: column; align-items: flex-start; padding: 24px; }
.hm-loyalty-stats { width: 100%; justify-content: space-between; }
.hm-loyalty-stat { flex: 1; min-width: 0; }
}
/* ─── PLAN CARD BASE ─── */
.hm-plan {
display: flex;
flex-direction: column;
padding: 28px 24px 24px;
border-radius: 20px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hm-plan::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.hm-plan:hover {
transform: translateY(-6px);
}
/* ─── TIER COLORS ─── */
.hm-plan--basic::before {
background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.hm-plan--basic:hover {
border-color: rgba(255,255,255,.16);
box-shadow: 0 16px 40px rgba(0,0,0,.30);
}
/* Demande explicite : l'offre Essentiel ne doit pas hériter de la couleur
active, elle reste bleue fixe (comme Premium). */
.hm-plan--essentiel::before {
background: linear-gradient(90deg, transparent, rgba(59,130,246,.65), transparent);
}
.hm-plan--essentiel:hover {
border-color: rgba(59,130,246,.28);
box-shadow: 0 16px 40px rgba(59,130,246,.12);
}
.hm-plan--pro::before {
background: linear-gradient(90deg, transparent, rgba(251,191,36,.85), transparent);
}
.hm-plan--pro {
border-color: rgba(251,191,36,.20);
box-shadow: 0 0 40px rgba(251,191,36,.08);
}
.hm-plan--pro:hover {
border-color: rgba(251,191,36,.40);
box-shadow: 0 16px 50px rgba(251,191,36,.18);
}
.hm-plan--premium::before {
background: linear-gradient(90deg, transparent, rgba(59,130,246,.70), transparent);
}
.hm-plan--premium:hover {
border-color: rgba(59,130,246,.25);
box-shadow: 0 16px 40px rgba(59,130,246,.10);
}
/* ─── RIBBON ─── */
.hm-plan-ribbon {
position: absolute;
top: 12px;
right: 12px;
padding: 3px 12px;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
background: rgba(251,191,36,.75);
border: 1px solid rgba(251,191,36,.48);
box-shadow: 0 4px 14px rgba(251,191,36,.28);
}
/* ─── PLAN TOP ─── */
.hm-plan-top {
margin-bottom: 20px;
}
/* Ligne Tier + Badge : largeur fixe pour le tier + hauteur FIXE (non min-height)
pour la ligne entière, afin que le badge démarre toujours à la même
position horizontale ET verticale, quelle que soit la longueur du mot
(Basic / Essentiel / Business / Premium) ou du badge. Le texte du badge
est contraint à une seule ligne (nowrap + ellipsis) : sans ça, un badge
plus long passerait sur 2 lignes et ferait grandir la carte concernée
uniquement, cassant l'alignement avec les 3 autres. */
.hm-plan-tier-row {
display: flex;
align-items: center;
height: 24px;
gap: 8px;
margin-bottom: 8px;
}
.hm-plan-tier {
display: inline-block;
flex: 0 0 auto;
min-width: 6.5em;
font-size: .70rem;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
margin-bottom: 0;
white-space: nowrap;
}
.hm-plan--basic .hm-plan-tier { color: rgba(255,255,255,.45); }
.hm-plan--essentiel .hm-plan-tier { color: #7aa2ff; }
.hm-plan--pro .hm-plan-tier { color: #fde68a; }
.hm-plan--premium .hm-plan-tier { color: #93c5fd; }
/* ─── BADGE DE POSITIONNEMENT (ex: "Sans maintenance", "Pour démarrer") ─── */
.hm-plan-badge {
display: inline-block;
flex: 1 1 auto;
min-width: 0;
font-size: .68rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hm-plan--basic .hm-plan-badge { color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.hm-plan--essentiel .hm-plan-badge { color: #7aa2ff; background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.28); }
.hm-plan--pro .hm-plan-badge { color: #fde68a; background: rgba(251,191,36,.14); border: 1px solid rgba(251,191,36,.30); }
.hm-plan--premium .hm-plan-badge { color: #93c5fd; background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.30); }
/* Nom du forfait : hauteur FIXE de 2 lignes (pas min-height) + troncature
propre si un nom dépasse 2 lignes dans une langue donnée, pour garantir
que le prix (et tout ce qui suit) démarre exactement à la même hauteur
sur les 4 cartes. */
.hm-plan-top h3 {
font-size: 1rem;
font-weight: 700;
color: #fff;
margin: 0 0 14px;
line-height: 1.3;
height: 2.6em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Mini-descriptif sous le prix (ex: "Idéal pour site vitrine") : hauteur
fixe identique sur les 4 cartes, quel que soit le nombre de mots. */
.hm-plan-tagline {
font-size: .80rem;
/* Contraste relevé (.40 -> .65) : demande explicite "améliore ce qui est
visuellement fade". */
color: rgba(255,255,255,.65);
margin: 6px 0 0;
font-style: italic;
height: 2.2em;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ─── PRIX ─── */
.hm-plan-price {
display: flex;
align-items: baseline;
gap: 4px;
padding: 10px 14px;
border-radius: 10px;
width: fit-content;
}
.hm-plan--basic .hm-plan-price { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.hm-plan--essentiel .hm-plan-price { background: rgba(59,130,246,.10); border: 1px solid rgba(59,130,246,.20); }
.hm-plan--pro .hm-plan-price { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.22); }
.hm-plan--premium .hm-plan-price { background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.22); }
/* Prix "Sur devis" (Premium) : texte plus long qu'un montant chiffré, taille réduite pour rester lisible dans la pastille. */
.hm-plan-price--quote .hm-price-amount { font-size: 1.05rem; }
.hm-price-prefix {
font-size: .85rem;
font-weight: 700;
color: rgba(255,255,255,.50);
align-self: baseline;
}
.hm-price-amount {
font-size: 1.4rem;
font-weight: 800;
color: #fff;
line-height: 1;
}
.hm-price-currency {
font-size: .75rem;
font-weight: 700;
color: rgba(255,255,255,.55);
margin-bottom: 2px;
}
.hm-price-period {
font-size: .75rem;
color: rgba(255,255,255,.40);
}
/* ─── PLAN LIST ─── */
.hm-plan-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
/* Hauteur FIXE + troncature propre (line-clamp) : chaque ligne d'item occupe
exactement la même hauteur sur les 4 cartes, quelle que soit la longueur
du texte (les descriptions détaillées type "Corrections de bugs simples
(affichage, liens cassés...)" sont plus longues que "Support prioritaire
(48h)"). Sans cette contrainte, un item plus long agrandit sa carte et
décale tous les items suivants par rapport aux autres colonnes. La coche
passe en position absolue (au lieu d'être un enfant flex) pour libérer le
et lui appliquer le modèle -webkit-box nécessaire au line-clamp. */
.hm-plan-list li {
position: relative;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
height: 90px;
font-size: .78rem;
color: rgba(255,255,255,.65);
line-height: 1.45;
padding: 8px 10px 8px 24px;
border-radius: 8px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.04);
transition: color .2s ease, background .2s ease;
}
.hm-plan-list li::before {
content: "✓";
position: absolute;
left: 9px;
top: 9px;
font-size: .74rem;
font-weight: 700;
}
.hm-plan--basic .hm-plan-list li::before { color: rgba(255,255,255,.30); }
.hm-plan--essentiel .hm-plan-list li::before { color: #3b82f6; }
.hm-plan--pro .hm-plan-list li::before { color: #fbbf24; }
.hm-plan--premium .hm-plan-list li::before { color: #3b82f6; }
.hm-plan:hover .hm-plan-list li {
color: rgba(255,255,255,.80);
}
/* ─── PLAN CTA ─── */
.hm-plan-cta {
display: block;
text-align: center;
padding: 10px 20px;
border-radius: 999px;
font-size: .85rem;
font-weight: 700;
text-decoration: none;
color: rgba(255,255,255,.75);
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hm-plan--pro .hm-plan-cta {
color: #fff;
background: rgba(251,191,36,.16);
border-color: rgba(251,191,36,.40);
box-shadow: 0 4px 16px rgba(251,191,36,.12);
}
.hm-plan-cta:hover {
color: #fff;
background: rgba(251,191,36,.20);
border-color: rgba(251,191,36,.55);
box-shadow: 0 6px 20px rgba(251,191,36,.20);
}
.hm-plan--basic .hm-plan-cta:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); box-shadow: none; }
.hm-plan--essentiel .hm-plan-cta:hover { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.40); box-shadow: 0 6px 20px rgba(59,130,246,.12); }
.hm-plan--premium .hm-plan-cta:hover { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.40); box-shadow: 0 6px 20px rgba(59,130,246,.12); }
/* Demande explicite : le badge lié au titre section 2 "Hébergement et
Maintenance" doit hériter de la couleur active. */
.page-hm .hm-plans-header .cw-page-label {
color: rgba(var(--header-accent),.9);
border-color: rgba(var(--header-accent),.35);
background: rgba(var(--header-accent),.10);
}
/* ─── LOGICIELS SUR-MESURE & BOTS DISCORD (offre "sur devis") ─── */
.hm-custom {
padding-top: 20px;
}
.hm-custom-card {
max-width: 880px;
margin: 0 auto;
}
.hm-custom-price {
font-size: 1.5rem;
}
.hm-custom-note {
font-size: .8rem;
color: rgba(255,255,255,.42);
line-height: 1.6;
margin: 0;
}
/* Demande explicite : "la vignette de prix pour sur-mesure ne doit pas être
verte mais dépendre de la couleur sélectionnée" — l'émeraude fixe (calquée
sur programmation.php/bot-discord.php) est remplacée par la couleur
d'accent active de hm.php (rgba(var(--header-accent))). */
.page-hm .hm-custom .cw-page-label {
color: rgba(var(--header-accent),.95);
border-color: rgba(var(--header-accent),.38);
background: rgba(var(--header-accent),.10);
}
.page-hm .hm-custom .cw-section-header h2 {
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-hm .hm-custom .cw-offer-card { border-color: rgba(var(--header-accent),.32); box-shadow: 0 0 40px rgba(var(--header-accent),.10); }
.page-hm .hm-custom .cw-offer-left { background: rgba(var(--header-accent),.10); border-right-color: rgba(var(--header-accent),.22); }
.page-hm .hm-custom .cw-offer-tier { color: rgba(var(--header-accent),.95); background: rgba(var(--header-accent),.16); border-color: rgba(var(--header-accent),.34); }
.page-hm .hm-custom .cw-offer-section-label { color: rgba(var(--header-accent),.78); }
.page-hm .hm-custom .btn-primary {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--accent-harmony-1)) 42%, #000), color-mix(in srgb, rgb(var(--header-accent)) 38%, #000));
box-shadow: 0 4px 20px rgba(var(--header-accent),.35);
}
.page-hm .hm-custom .btn-primary:hover {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--accent-harmony-1)) 58%, #000), color-mix(in srgb, rgb(var(--accent-harmony-3)) 52%, #000));
box-shadow: 0 6px 28px rgba(var(--header-accent),.50);
}
/* ─── CTA FINAL ─── */
.hm-cta {
text-align: center;
padding: 60px 20px var(--footer-clearance);
max-width: 720px;
margin: 0 auto;
}
.hm-cta h2 {
font-size: clamp(1.5rem, 2.8vw, 2.1rem);
font-weight: 700;
margin: 0 0 14px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hm-cta p {
color: rgba(255,255,255,.55);
font-size: .98rem;
line-height: 1.75;
max-width: 520px;
margin: 0 auto 28px;
}
.hm-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
/* ========================= hebergement.php ========================= */
/* ─── BACKGROUND FIXE ─── */
.page-heberg::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
/* Planète-glace (hebergement.php) sur son propre calque ::after, masquée en
fondu radial + rétrécie/effacée au scroll — même mécanisme que
.page-vitrine::after/.page-refonte::after (cf. main.js, bloc "DÉCOR DE
FOND") — demande explicite : étendre l'effet à toutes les pages offres. */
.page-heberg::after {
content: "";
position: fixed;
inset: 0;
background: url("../image/planet-blanc.webp") center / 62vmin no-repeat;
-webkit-mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
pointer-events: none;
z-index: 0;
transform: scale(var(--bg-scroll-scale, 1));
opacity: var(--bg-scroll-opacity, 1);
transform-origin: center center;
transition: transform .08s linear, opacity .08s linear;
}
.page-heberg.bg-entrance::after {
transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.page-heberg > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-heberg .section-block {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
.page-heberg .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── LAYOUT INNER COMMUN ─── */
.heberg-section-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem);
}
/* ─── HERO ─── */
.heberg-hero {
min-height: 55dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 140px 20px 80px;
text-align: center;
}
.heberg-hero-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 760px;
}
.heberg-page-label {
display: inline-flex;
align-items: center;
padding: 4px 16px;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
/* Demande explicite : "renforcer la lisibilité des badges section 1" —
couleur bleue figée (ignorait l'accent) remplacée par la couleur
sélectionnée, et fond translucide (.10) remplacé par un fond sombre
bien plus opaque pour rester lisible sur un fond de planète clair. */
color: rgba(var(--header-accent),.95);
background: rgba(10,14,24,.65);
border: 1px solid rgba(var(--header-accent),.55);
box-shadow: 0 0 16px rgba(var(--header-accent),.25);
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.heberg-hero h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Demande explicite : "le texte ... est très peu lisible" — opacité relevée
+ légère ombre portée pour rester lisible sur un fond de planète clair. */
.heberg-hero-sub {
color: rgba(255,255,255,.85);
font-size: .98rem;
line-height: 1.75;
max-width: 620px;
margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 1px 10px rgba(0,0,0,.55);
}
.heberg-impact-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
/* Demande explicite (suite) : ces badges restaient "trop clairs/pas assez
visibles" malgré le renfort déjà posé sur .heberg-hero-cta-line juste en
dessous (même souci de fond de planète clair derrière, cf. commentaire
plus bas) — le fond quasi transparent (.04) et le texte à 68% ne
protégeaient pas assez. Même recette que .heberg-hero-cta-line : fond bien
plus opaque + texte quasi blanc + ombre portée. */
.heberg-impact-list li {
padding: 6px 16px;
border-radius: 999px;
font-size: .82rem;
font-weight: 600;
color: rgba(255,255,255,.92);
background: rgba(10,14,24,.55);
border: 1px solid rgba(255,255,255,.18);
text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
/* Demande explicite : "le texte n'est pas assez lisible... ça se répète sur
plusieurs pages (1ère section) qui ont pour bg une des planètes" — couleur
bleue figée (ignorait l'accent) + fond quasi transparent (.06) qui ne
protégeait pas assez du fond de planète derrière. Couleur accent-aware +
fond sombre bien plus opaque pour rester lisible sur n'importe quel fond. */
.heberg-hero-cta-line {
font-size: .92rem;
font-weight: 600;
color: rgba(var(--header-accent),.95);
margin: 0;
padding: 10px 20px;
border-left: 2px solid rgba(var(--header-accent),.60);
background: rgba(10,14,24,.55);
border-radius: 0 8px 8px 0;
text-align: left;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
/* ─── INFOMANIAK ─── */
.heberg-infomaniak {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.heberg-infomaniak .heberg-section-inner {
display: flex;
align-items: center;
gap: 60px;
}
.heberg-section-text {
flex: 1;
min-width: 0;
}
.heberg-section-text h2 {
font-size: clamp(1.3rem, 2.5vw, 1.85rem);
font-weight: 700;
margin: 0 0 14px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.heberg-section-text p {
color: rgba(255,255,255,.55);
font-size: .95rem;
line-height: 1.75;
margin: 0;
}
.heberg-infomaniak-cta {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 28px;
}
/* Boutons plus grands et plus affirmés que les CTA génériques de fin de page :
c'est la première section de la page, elle mérite un appel à l'action
plus visible. Spécificité (.page-heberg + 2 classes) volontairement plus
forte que les règles génériques ".page-heberg .btn-primary" plus bas dans
la feuille, pour ne pas se faire écraser malgré l'ordre des règles. */
.page-heberg .heberg-infomaniak-cta .btn-primary {
padding: 17px 42px;
font-size: 1.08rem;
box-shadow:
0 0 34px rgba(var(--header-accent),.28),
0 10px 26px rgba(var(--header-accent),.18),
inset 0 1px 0 rgba(255,255,255,.10);
}
.page-heberg .heberg-infomaniak-cta .btn-primary:hover {
transform: translateY(-3px);
box-shadow:
0 0 42px rgba(var(--header-accent),.36),
0 14px 32px rgba(var(--header-accent),.22),
inset 0 1px 0 rgba(255,255,255,.12);
}
.page-heberg .heberg-infomaniak-cta .heberg-btn-secondary {
padding: 17px 38px;
font-size: 1.08rem;
border-width: 1.5px;
}
@media (max-width: 640px) {
.heberg-infomaniak-cta { flex-direction: column; }
.heberg-infomaniak-cta .btn-primary,
.heberg-infomaniak-cta .heberg-btn-secondary {
width: 100%;
justify-content: center;
}
}
.heberg-badges {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
flex-shrink: 0;
width: 340px;
}
.heberg-badge {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
font-size: .84rem;
font-weight: 600;
color: rgba(255,255,255,.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: border-color .25s ease, background .25s ease;
}
.heberg-badge:hover {
background: rgba(59,130,246,.07);
border-color: rgba(59,130,246,.22);
}
.heberg-badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
font-size: .68rem;
font-weight: 800;
letter-spacing: .04em;
flex-shrink: 0;
background: rgba(var(--header-accent),.12);
color: var(--brand-color);
border: 1px solid rgba(var(--header-accent),.2);
}
.heberg-badge--swiss .heberg-badge-icon { background: rgba(220,38,38,.10); color: #f87171; border-color: rgba(220,38,38,.22); }
.heberg-badge--privacy .heberg-badge-icon { background: rgba(var(--header-accent),.12); color: #7aa2ff; border-color: rgba(var(--header-accent),.22); }
.heberg-badge--speed .heberg-badge-icon { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }
.heberg-badge--eco .heberg-badge-icon { background: rgba(34,197,94,.10); color: #4ade80; border-color: rgba(34,197,94,.22); }
/* ─── SECTION HEADER COMMUN ─── */
.heberg-section-header {
text-align: center;
max-width: 680px;
margin: 0 auto 40px;
}
.heberg-section-header h2 {
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.heberg-section-header p {
color: rgba(255,255,255,.48);
font-size: .92rem;
line-height: 1.7;
}
/* ─── PILIERS ─── */
.heberg-pillars {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.heberg-pillars-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.heberg-pillar {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 24px 22px;
border-radius: 16px;
background: rgba(255,255,255,.028);
border: 1px solid rgba(255,255,255,.06);
position: relative;
overflow: hidden;
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.heberg-pillar::before {
content: "";
position: absolute;
left: 0; top: 15%; bottom: 15%;
width: 3px;
border-radius: 0 2px 2px 0;
opacity: .55;
transition: opacity .25s ease, top .25s ease, bottom .25s ease;
}
/* Demande explicite : pilier 2 ne doit pas hériter de la couleur active
(reste bleu fixe) ; pilier 3 ne doit pas être violet mais bleu fixe. */
.heberg-pillar--perf::before { background: #3b82f6; }
.heberg-pillar--sec::before { background: #3b82f6; }
.heberg-pillar--seo::before { background: #3b82f6; }
.heberg-pillar--scale::before { background: #3b82f6; }
.heberg-pillar:hover {
background: rgba(255,255,255,.048);
border-color: rgba(255,255,255,.10);
transform: translateX(5px);
}
.heberg-pillar:hover::before {
opacity: 1;
top: 6%;
bottom: 6%;
}
.heberg-pillar-icon {
font-size: 1.6rem;
font-weight: 800;
flex-shrink: 0;
margin-top: 2px;
line-height: 1;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: rgba(59,130,246,.55);
}
.heberg-pillar--sec .heberg-pillar-icon { color: rgba(59,130,246,.55); }
.heberg-pillar--seo .heberg-pillar-icon { color: rgba(59,130,246,.55); }
.heberg-pillar--scale .heberg-pillar-icon { color: rgba(59,130,246,.55); }
.heberg-pillar-body h3 {
font-size: .96rem;
font-weight: 700;
color: #fff;
margin: 0 0 6px;
}
.heberg-pillar-body p {
font-size: .86rem;
color: rgba(255,255,255,.52);
line-height: 1.65;
margin: 0;
}
/* ─── INCLUS ─── */
.heberg-includes {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.heberg-includes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.heberg-inc-card {
padding: 26px 22px;
border-radius: 18px;
background: rgba(255,255,255,.028);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.heberg-inc-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(59,130,246,.55), transparent);
}
.heberg-inc-card:hover {
border-color: rgba(59,130,246,.20);
box-shadow: 0 10px 28px rgba(59,130,246,.08);
transform: translateY(-4px);
}
.heberg-inc-icon {
font-size: 2rem;
font-weight: 800;
margin-bottom: 12px;
line-height: 1;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: rgba(59,130,246,.45);
display: block;
}
.heberg-inc-card h3 {
font-size: .95rem;
font-weight: 700;
color: #fff;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.heberg-inc-card ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.heberg-inc-card li {
font-size: .92rem;
color: rgba(255,255,255,.78);
padding: 6px 8px 6px 0;
display: flex;
align-items: flex-start;
gap: 9px;
line-height: 1.6;
}
.heberg-inc-card li::before {
content: "✓";
color: #22d3ee;
font-size: .84rem;
font-weight: 800;
flex-shrink: 0;
margin-top: 2px;
}
/* Distinction "garanti par Infomaniak" (infrastructure) vs "ma responsabilité"
(ce que je configure/gère moi-même) : badge au-dessus de la liste, ou
liste scindée en deux groupes pour les cartes mixtes (Performance, Sécurité). */
.heberg-owner-badge {
display: inline-block;
font-size: .64rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 999px;
margin: 0 0 10px;
}
.heberg-owner-badge--infomaniak {
color: #4db8ff;
background: rgba(0,152,255,.12);
border: 1px solid rgba(0,152,255,.28);
}
.heberg-owner-badge--me {
color: #34d399;
background: rgba(16,185,129,.12);
border: 1px solid rgba(16,185,129,.28);
}
.heberg-owner-group + .heberg-owner-group {
margin-top: 14px;
}
.heberg-owner-group ul {
margin: 0;
}
.heberg-inc-card-note {
font-size: .78rem;
color: rgba(255,255,255,.5);
font-style: italic;
line-height: 1.55;
margin: 12px 0 0;
}
.heberg-inc-card-link {
display: inline-block;
font-size: .78rem;
font-weight: 700;
color: #34d399;
margin: 6px 0 0;
text-decoration: none;
}
.heberg-inc-card-link:hover {
text-decoration: underline;
}
/* ─── PHILOSOPHIE ─── */
.heberg-philosophy {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.heberg-philosophy-card {
max-width: 780px;
margin: 0 auto;
padding: 40px 36px;
border-radius: 20px;
background: rgba(255,255,255,.032);
border: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
}
.heberg-philosophy-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, transparent, rgba(59,130,246,.55), rgba(var(--header-accent),.40), transparent);
}
.heberg-philosophy-card h2 {
font-size: clamp(1.3rem, 2.2vw, 1.75rem);
font-weight: 700;
margin: 0 0 24px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.heberg-philo-points {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 24px;
}
.heberg-philo-point {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .95rem;
font-weight: 600;
color: rgba(255,255,255,.85);
}
.heberg-philo-arrow {
color: #3b82f6;
font-weight: 700;
flex-shrink: 0;
}
.heberg-philo-sub {
font-size: .88rem;
color: rgba(255,255,255,.40);
margin: 0 0 12px;
font-style: italic;
}
.heberg-philo-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.heberg-philo-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: .88rem;
color: rgba(255,255,255,.55);
padding: 8px 14px;
border-radius: 8px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.05);
}
.heberg-philo-list li::before {
content: "✕";
color: rgba(239,68,68,.65);
font-size: .75rem;
font-weight: 700;
flex-shrink: 0;
}
/* ─── MONITORING BONUS ─── */
.heberg-monitoring {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.heberg-monitoring-inner {
display: flex;
align-items: center;
gap: 60px;
padding: 36px 36px;
border-radius: 20px;
background: rgba(var(--header-accent),.05);
border: 1px solid rgba(var(--header-accent),.16);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.heberg-monitoring-text {
flex: 1;
min-width: 0;
}
.heberg-monitoring-text h2 {
font-size: clamp(1.2rem, 2vw, 1.6rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.heberg-monitoring-text p {
color: rgba(255,255,255,.52);
font-size: .92rem;
line-height: 1.7;
margin: 0;
}
/* Demande explicite : le texte et les badges restant bleus dans la section
"Monitoring et amélioration continue" doivent hériter de la couleur
active. */
.heberg-monitoring-premium-note {
font-size: .82rem !important;
color: rgba(var(--header-accent),.80) !important;
font-style: italic;
margin: 14px 0 0 !important;
}
.heberg-monitoring-cta {
display: inline-block;
margin-top: 16px;
}
.heberg-monitoring-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
min-width: 260px;
}
.heberg-monitoring-list li {
display: flex;
align-items: center;
gap: 9px;
font-size: .88rem;
font-weight: 600;
color: rgba(255,255,255,.72);
padding: 10px 14px;
border-radius: 10px;
background: rgba(var(--header-accent),.07);
border: 1px solid rgba(var(--header-accent),.18);
}
.heberg-monitoring-list li::before {
content: "→";
color: rgb(var(--header-accent));
font-weight: 700;
flex-shrink: 0;
}
/* ─── CTA FINAL ─── */
.heberg-cta {
padding: 70px 20px var(--footer-clearance);
border-top: 1px solid rgba(255,255,255,.05);
}
.heberg-cta-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.heberg-cta-inner h2 {
font-size: clamp(1.5rem, 2.8vw, 2.1rem);
font-weight: 700;
margin: 0 0 14px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.heberg-cta-inner p {
color: rgba(255,255,255,.55);
font-size: .98rem;
line-height: 1.75;
max-width: 520px;
margin: 0 auto 28px;
}
.heberg-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.heberg-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 999px;
color: rgba(255,255,255,.78);
text-decoration: none;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.heberg-btn-secondary:hover {
color: #fff;
background: rgba(59,130,246,.10);
border-color: rgba(59,130,246,.40);
transform: translateY(-2px);
}
/* ─── BTN PRIMARY OVERRIDE ─── */
.page-heberg .btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 36px;
font-size: 1rem;
font-weight: 700;
letter-spacing: .04em;
border-radius: 999px;
color: #fff;
text-decoration: none;
/* demande explicite : "adapte les boutons [...] voir les choix faits
[...] à accueil.php" — dégradé bleu figé remplacé par la couleur
d'accent sélectionnée. */
/* demande explicite : "les boutons (couleur blanc) ne sont pas assez
lisibles" — dégradé toujours mélangé vers le noir plutôt qu'une
simple opacité de la couleur d'accent (qui laissait passer le fond
clair et rendait le texte blanc illisible avec l'accent "Blanc"). */
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 42%, #000) 0%, color-mix(in srgb, rgb(var(--accent-harmony-3)) 38%, #000) 100%);
border: 1px solid rgba(var(--header-accent),.45);
box-shadow:
0 0 28px rgba(var(--header-accent),.22),
0 8px 20px rgba(var(--header-accent),.14),
inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.page-heberg .btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.page-heberg .btn-primary::after {
content: "→";
font-size: .95rem;
opacity: .7;
transition: transform .3s ease, opacity .3s ease;
}
.page-heberg .btn-primary:hover {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 58%, #000) 0%, color-mix(in srgb, rgb(var(--accent-harmony-3)) 52%, #000) 100%);
box-shadow:
0 0 44px rgba(var(--header-accent),.40),
0 12px 28px rgba(var(--header-accent),.22),
inset 0 1px 0 rgba(255,255,255,.16);
transform: translateY(-3px);
}
.page-heberg .btn-primary:hover::after {
transform: translateX(4px);
opacity: 1;
}
/* ========================= maintenance.php ========================= */
/* ─── BACKGROUND FIXE ─── */
.page-maint::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
/* Planète-custom (maintenance.php) sur son propre calque ::after, masquée en
fondu radial + rétrécie/effacée au scroll — même mécanisme que
.page-vitrine::after/.page-refonte::after (cf. main.js, bloc "DÉCOR DE
FOND") — demande explicite : étendre l'effet à toutes les pages offres. */
.page-maint::after {
content: "";
position: fixed;
inset: 0;
background: url("../image/planet-blanc.webp") center / 62vmin no-repeat;
-webkit-mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
pointer-events: none;
z-index: 0;
transform: scale(var(--bg-scroll-scale, 1));
opacity: var(--bg-scroll-opacity, 1);
transform-origin: center center;
transition: transform .08s linear, opacity .08s linear;
}
.page-maint.bg-entrance::after {
transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.page-maint > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-maint .section-block {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
.page-maint .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── LAYOUT INNER COMMUN ─── */
.maint-section-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem);
}
/* ─── SECTION HEADER ─── */
.maint-section-header {
text-align: center;
max-width: 680px;
margin: 0 auto 40px;
}
.maint-section-header h2 {
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.maint-section-header p {
color: rgba(255,255,255,.48);
font-size: .92rem;
line-height: 1.7;
}
/* ─── HERO ─── */
.maint-hero {
min-height: 55dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 140px 20px 80px;
text-align: center;
}
.maint-hero-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 760px;
}
.maint-page-label {
display: inline-flex;
align-items: center;
padding: 4px 16px;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
/* Demande explicite : "renforcer la lisibilité des badges section 1" —
couleur bleue figée (ignorait l'accent) remplacée par la couleur
sélectionnée, et fond translucide (.10) remplacé par un fond sombre
bien plus opaque pour rester lisible sur un fond de planète clair. */
color: rgba(var(--header-accent),.95);
background: rgba(10,14,24,.65);
border: 1px solid rgba(var(--header-accent),.55);
box-shadow: 0 0 16px rgba(var(--header-accent),.25);
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.maint-hero h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Demande explicite : "le texte ... est très peu lisible" — opacité relevée
+ légère ombre portée pour rester lisible sur un fond de planète clair. */
.maint-hero-sub {
color: rgba(255,255,255,.85);
font-size: .98rem;
line-height: 1.75;
max-width: 620px;
margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 1px 10px rgba(0,0,0,.55);
}
.maint-impact-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.maint-impact-list li {
padding: 6px 16px;
border-radius: 999px;
font-size: .82rem;
font-weight: 600;
color: rgba(239,68,68,.80);
background: rgba(239,68,68,.06);
border: 1px solid rgba(239,68,68,.18);
}
/* Demande explicite : "le texte ... doit hériter de la couleur active" +
"doit être plus lisible/visible" — même correctif que .heberg-hero-cta-line
(couleur bleue figée + fond quasi transparent). */
.maint-hero-tagline {
font-size: .92rem;
font-weight: 600;
color: rgba(var(--header-accent),.95);
margin: 0;
padding: 10px 20px;
border-left: 2px solid rgba(var(--header-accent),.60);
background: rgba(10,14,24,.55);
border-radius: 0 8px 8px 0;
text-align: left;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
/* ─── POURQUOI ─── */
.maint-why {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.maint-why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.maint-why-card {
padding: 28px 26px;
border-radius: 18px;
background: rgba(255,255,255,.028);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.maint-why-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.maint-why-card--reasons::before {
background: linear-gradient(90deg, transparent, rgba(59,130,246,.55), transparent);
}
.maint-why-card--risks::before {
background: linear-gradient(90deg, transparent, rgba(239,68,68,.45), transparent);
}
.maint-why-card h3 {
font-size: .96rem;
font-weight: 700;
color: #fff;
margin: 0 0 16px;
}
.maint-tech-list,
.maint-risk-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.maint-tech-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: .88rem;
color: rgba(255,255,255,.65);
padding: 8px 12px;
border-radius: 8px;
background: rgba(59,130,246,.05);
border: 1px solid rgba(59,130,246,.12);
}
.maint-tech-list li::before {
content: "▸";
color: #3b82f6;
font-size: .72rem;
flex-shrink: 0;
}
.maint-risk-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: .88rem;
color: rgba(255,255,255,.62);
padding: 8px 12px;
border-radius: 8px;
background: rgba(239,68,68,.04);
border: 1px solid rgba(239,68,68,.10);
}
.maint-risk-list li::before {
content: "✕";
color: rgba(239,68,68,.70);
font-size: .72rem;
font-weight: 700;
flex-shrink: 0;
}
.maint-why-tagline {
margin-top: 16px;
font-size: .86rem;
font-weight: 600;
color: rgba(239,68,68,.75);
font-style: italic;
}
/* ─── PILIERS SÉCURITÉ + PERF ─── */
.maint-pillars {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.maint-pillars-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.maint-pillar {
padding: 30px 26px;
border-radius: 18px;
background: rgba(255,255,255,.028);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
overflow: hidden;
}
.maint-pillar::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.maint-pillar--sec::before {
background: linear-gradient(90deg, transparent, rgba(var(--header-accent),.65), transparent);
}
.maint-pillar--perf::before {
background: linear-gradient(90deg, transparent, rgba(59,130,246,.65), transparent);
}
.maint-pillar-head {
display: flex;
align-items: center;
gap: 12px;
}
.maint-pillar-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
border-radius: 7px;
font-size: .65rem;
font-weight: 800;
letter-spacing: .06em;
flex-shrink: 0;
background: rgba(var(--header-accent),.10);
color: var(--brand-color);
border: 1px solid rgba(var(--header-accent),.20);
}
.maint-pillar--sec .maint-pillar-icon { background: rgba(var(--header-accent),.10); color: #7aa2ff; border-color: rgba(var(--header-accent),.22); }
.maint-pillar--perf .maint-pillar-icon { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }
.maint-pillar-head h2 {
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
font-weight: 700;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.maint-pillar > p {
font-size: .90rem;
color: rgba(255,255,255,.52);
line-height: 1.7;
margin: 0;
}
.maint-pillar-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.maint-pillar-list li {
font-size: .86rem;
color: rgba(255,255,255,.55);
padding: 6px 10px 6px 0;
display: flex;
align-items: center;
gap: 8px;
}
.maint-pillar-list li::before {
content: "–";
color: rgba(255,255,255,.25);
flex-shrink: 0;
}
.maint-pillar-response {
padding: 14px 16px;
border-radius: 10px;
background: rgba(59,130,246,.06);
border: 1px solid rgba(59,130,246,.14);
}
.maint-pillar-response-label {
display: block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #3b82f6;
margin-bottom: 10px;
}
.maint-pillar-response ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.maint-pillar-response li {
font-size: .86rem;
color: rgba(255,255,255,.68);
display: flex;
align-items: flex-start;
gap: 7px;
}
.maint-pillar-response li::before {
content: "✓";
color: #3b82f6;
font-size: .76rem;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.maint-pillar-tagline {
font-size: .88rem;
font-weight: 600;
color: rgba(59,130,246,.80);
margin: 0;
font-style: italic;
}
/* ─── INCLUS ─── */
.maint-includes {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.maint-includes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.maint-includes-cta {
margin-top: 40px;
text-align: center;
}
.maint-includes-cta p {
font-size: .95rem;
color: rgba(255,255,255,.65);
margin: 0 0 16px;
}
.maint-inc-card {
padding: 26px 22px;
border-radius: 18px;
background: rgba(255,255,255,.028);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.maint-inc-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(59,130,246,.55), transparent);
}
.maint-inc-card:hover {
border-color: rgba(59,130,246,.20);
box-shadow: 0 10px 28px rgba(59,130,246,.08);
transform: translateY(-4px);
}
.maint-inc-icon {
font-size: 2rem;
font-weight: 800;
margin-bottom: 12px;
line-height: 1;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: rgba(59,130,246,.45);
display: block;
}
.maint-inc-card h3 {
font-size: .95rem;
font-weight: 700;
color: #fff;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.maint-inc-card ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.maint-inc-card li {
font-size: .84rem;
color: rgba(255,255,255,.58);
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.5;
}
.maint-inc-card li::before {
content: "✓";
color: #3b82f6;
font-size: .78rem;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
/* ─── APPROCHE ─── */
.maint-approach {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.maint-approach-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.maint-approach-card {
padding: 32px 28px;
border-radius: 18px;
background: rgba(255,255,255,.028);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
}
.maint-approach-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.maint-approach-card--results::before {
background: linear-gradient(90deg, transparent, rgba(59,130,246,.55), transparent);
}
.maint-approach-card--hosting::before {
background: linear-gradient(90deg, transparent, rgba(var(--header-accent),.45), transparent);
}
.maint-approach-card h2 {
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
font-weight: 700;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.maint-approach-card > p {
font-size: .90rem;
color: rgba(255,255,255,.52);
line-height: 1.7;
margin: 0;
}
.maint-approach-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.maint-approach-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: .88rem;
color: rgba(255,255,255,.70);
padding: 8px 12px;
border-radius: 8px;
background: rgba(59,130,246,.05);
border: 1px solid rgba(59,130,246,.12);
}
.maint-approach-list li::before {
content: "→";
color: #3b82f6;
font-weight: 700;
flex-shrink: 0;
}
.maint-approach-tagline {
font-size: .88rem;
font-weight: 600;
color: rgba(59,130,246,.80);
margin: 0;
font-style: italic;
}
.maint-hosting-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .88rem;
font-weight: 600;
color: #93c5fd;
text-decoration: none;
padding: 8px 16px;
border-radius: 8px;
border: 1px solid rgba(var(--header-accent),.28);
background: rgba(var(--header-accent),.07);
margin-top: 4px;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.maint-hosting-link::after {
content: "→";
font-size: .80rem;
}
.maint-hosting-link:hover {
background: rgba(var(--header-accent),.14);
border-color: rgba(var(--header-accent),.45);
color: #fff;
}
/* ─── SÉRÉNITÉ ─── */
.maint-serenity {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.maint-serenity-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.maint-serenity-block,
.maint-adapted-block {
padding: 30px 26px;
border-radius: 18px;
background: rgba(255,255,255,.028);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
}
.maint-serenity-block::before,
.maint-adapted-block::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(59,130,246,.50), transparent);
}
.maint-serenity-block h2,
.maint-adapted-block h2 {
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
font-weight: 700;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.maint-serenity-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.maint-serenity-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: .88rem;
color: rgba(255,255,255,.68);
padding: 9px 12px;
border-radius: 8px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.05);
}
.maint-serenity-list li::before {
content: "✓";
color: #3b82f6;
font-size: .76rem;
font-weight: 700;
flex-shrink: 0;
}
.maint-serenity-tagline {
font-size: .88rem;
font-weight: 600;
color: rgba(59,130,246,.80);
margin: 0;
font-style: italic;
}
.maint-adapted-block > p {
font-size: .90rem;
color: rgba(255,255,255,.52);
line-height: 1.7;
margin: 0;
}
.maint-adapted-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.maint-adapted-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .88rem;
color: rgba(255,255,255,.62);
padding: 10px 14px;
border-radius: 10px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.05);
line-height: 1.5;
}
.maint-adapted-level {
font-size: .70rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #3b82f6;
background: rgba(59,130,246,.10);
border: 1px solid rgba(59,130,246,.22);
border-radius: 999px;
padding: 2px 9px;
white-space: nowrap;
flex-shrink: 0;
margin-top: 1px;
}
/* ─── BONUS ─── */
.maint-bonus {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.maint-bonus-card {
max-width: 760px;
margin: 0 auto;
padding: 40px 36px;
border-radius: 20px;
background: rgba(59,130,246,.05);
border: 1px solid rgba(59,130,246,.20);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
position: relative;
overflow: hidden;
}
.maint-bonus-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, transparent, rgba(59,130,246,.75), rgba(37,99,235,.55), transparent);
}
.maint-bonus-badge {
display: inline-flex;
align-items: center;
padding: 4px 14px;
border-radius: 999px;
font-size: .70rem;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
color: #93c5fd;
background: rgba(59,130,246,.12);
border: 1px solid rgba(59,130,246,.35);
box-shadow: 0 0 16px rgba(59,130,246,.15);
}
.maint-bonus-card h2 {
font-size: clamp(1.2rem, 2vw, 1.6rem);
font-weight: 700;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.maint-bonus-card > p {
color: rgba(255,255,255,.52);
font-size: .92rem;
line-height: 1.7;
max-width: 540px;
margin: 0;
}
.maint-bonus-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
max-width: 480px;
text-align: left;
}
.maint-bonus-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: .90rem;
font-weight: 500;
color: rgba(255,255,255,.75);
padding: 10px 16px;
border-radius: 10px;
background: rgba(59,130,246,.07);
border: 1px solid rgba(59,130,246,.16);
}
.maint-bonus-list li::before {
content: "→";
color: #3b82f6;
font-weight: 700;
flex-shrink: 0;
}
.maint-bonus-tagline {
font-size: .90rem;
font-weight: 600;
color: rgba(59,130,246,.85);
margin: 0;
font-style: italic;
}
/* ─── CTA FINAL ─── */
.maint-cta {
padding: 70px 20px var(--footer-clearance);
border-top: 1px solid rgba(255,255,255,.05);
}
.maint-cta-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.maint-cta-inner h2 {
font-size: clamp(1.5rem, 2.8vw, 2.1rem);
font-weight: 700;
margin: 0 0 14px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.maint-cta-inner p {
color: rgba(255,255,255,.55);
font-size: .98rem;
line-height: 1.75;
max-width: 520px;
margin: 0 auto 28px;
}
.maint-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.maint-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 999px;
color: rgba(255,255,255,.78);
text-decoration: none;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.maint-btn-secondary:hover {
color: #fff;
background: rgba(59,130,246,.10);
border-color: rgba(59,130,246,.40);
transform: translateY(-2px);
}
/* ─── BTN PRIMARY OVERRIDE ─── */
.page-maint .btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 36px;
font-size: 1rem;
font-weight: 700;
letter-spacing: .04em;
border-radius: 999px;
color: #fff;
text-decoration: none;
/* demande explicite : "adapte les boutons [...] voir les choix faits
[...] à accueil.php" — dégradé bleu figé remplacé par la couleur
d'accent sélectionnée. */
/* demande explicite : "les boutons (couleur blanc) ne sont pas assez
lisibles" — dégradé toujours mélangé vers le noir plutôt qu'une
simple opacité de la couleur d'accent (qui laissait passer le fond
clair et rendait le texte blanc illisible avec l'accent "Blanc"). */
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 42%, #000) 0%, color-mix(in srgb, rgb(var(--accent-harmony-3)) 38%, #000) 100%);
border: 1px solid rgba(var(--header-accent),.45);
box-shadow:
0 0 28px rgba(var(--header-accent),.22),
0 8px 20px rgba(var(--header-accent),.14),
inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.page-maint .btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.page-maint .btn-primary::after {
content: "→";
font-size: .95rem;
opacity: .7;
transition: transform .3s ease, opacity .3s ease;
}
.page-maint .btn-primary:hover {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 58%, #000) 0%, color-mix(in srgb, rgb(var(--accent-harmony-3)) 52%, #000) 100%);
box-shadow:
0 0 44px rgba(var(--header-accent),.40),
0 12px 28px rgba(var(--header-accent),.22),
inset 0 1px 0 rgba(255,255,255,.16);
transform: translateY(-3px);
}
.page-maint .btn-primary:hover::after {
transform: translateX(4px);
opacity: 1;
}
/* ========================= Navigation inter-pages HM ========================= */
/* ─── Position relative sur les 3 heroes ─── */
.hm-hero,
.heberg-hero,
.maint-hero {
position: relative;
padding-top: 200px;
}
/* ─── NAV ─── */
.hmg-nav {
position: absolute;
/* Remonté (90-120px -> 70-90px, demande explicite "tu peux les remonter
étant donné qu'il n'y a plus de header au-dessus") : cet espacement
datait de l'ancienne barre horizontale, remplacée depuis par
les vignettes HUD flottantes (Navigation/Mon compte, ancrées à
top:22px) — plus besoin d'autant de marge en haut de page. */
top: clamp(70px, 8vh, 90px);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-between;
width: min(680px, calc(100% - 40px));
z-index: 2;
}
.hmg-nav-spacer {
width: 120px;
flex-shrink: 0;
}
/* ─── LIENS ─── */
.hmg-nav-link {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: .82rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
text-decoration: none;
padding: 9px 18px;
border-radius: 999px;
border: 1px solid rgba(var(--header-accent),.38);
background: rgba(var(--header-accent),.09);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 0 14px rgba(var(--header-accent),.10);
position: relative;
transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.hmg-nav-link:hover {
color: #fff;
border-color: rgba(var(--header-accent),.68);
background: rgba(var(--header-accent),.18);
box-shadow: 0 0 24px rgba(var(--header-accent),.26);
}
.hmg-nav-link--prev:hover { transform: translateX(-3px); }
.hmg-nav-link--next:hover { transform: translateX(3px); }
.hmg-nav-link svg {
transition: transform .25s ease;
flex-shrink: 0;
}
.hmg-nav-link--prev:hover svg { transform: translateX(-2px); }
.hmg-nav-link--next:hover svg { transform: translateX(2px); }
/* ─── TOOLTIP ─── */
.hmg-nav-link::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(-100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: rgba(10,14,30,.96);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.85);
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
white-space: nowrap;
padding: 5px 12px;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 10;
}
.hmg-nav-link:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(8px);
}
/* ─── TRACK ─── */
.hmg-offer-track {
display: flex;
align-items: center;
gap: 6px;
}
.hmg-track-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,.20);
border: 1px solid rgba(255,255,255,.16);
flex-shrink: 0;
}
.hmg-track-dot--active {
width: 10px;
height: 10px;
background: rgb(var(--header-accent));
border-color: rgba(var(--header-accent),.80);
box-shadow: 0 0 10px rgba(var(--header-accent),.68);
}
.hmg-track-line {
width: 28px;
height: 1px;
background: rgba(255,255,255,.18);
flex-shrink: 0;
}
/* ─── HMG-NAV COULEUR INDIGO pour pages conseil ─── */
.page-conseil .hmg-nav-link {
border-color: rgba(var(--header-accent),.38);
background: rgba(var(--header-accent),.09);
box-shadow: 0 0 14px rgba(var(--header-accent),.10);
}
.page-conseil .hmg-nav-link:hover {
border-color: rgba(var(--header-accent),.68);
background: rgba(var(--header-accent),.16);
box-shadow: 0 0 20px rgba(var(--header-accent),.20);
}
.page-conseil .hmg-track-dot--active {
background: rgb(var(--header-accent));
border-color: rgba(var(--header-accent),.80);
box-shadow: 0 0 10px rgba(var(--header-accent),.68);
}
/* ─── HMG-NAV COULEUR BLEUE pour la boucle Présentation
(presentation.php → about.php → partenaires.php → livre-dor.php) ─── */
.page-presentation .hmg-nav-link,
.page-faq-site .hmg-nav-link,
.page-about .hmg-nav-link,
.page-partenaires .hmg-nav-link,
.page-projets-suivre .hmg-nav-link,
.page-livre-dor .hmg-nav-link {
border-color: rgba(var(--header-accent),.38);
background: rgba(var(--header-accent),.09);
box-shadow: 0 0 14px rgba(var(--header-accent),.10);
}
.page-presentation .hmg-nav-link:hover,
.page-faq-site .hmg-nav-link:hover,
.page-about .hmg-nav-link:hover,
.page-partenaires .hmg-nav-link:hover,
.page-projets-suivre .hmg-nav-link:hover,
.page-livre-dor .hmg-nav-link:hover {
border-color: rgba(var(--header-accent),.68);
background: rgba(var(--header-accent),.16);
box-shadow: 0 0 20px rgba(var(--header-accent),.20);
}
.page-presentation .hmg-track-dot--active,
.page-faq-site .hmg-track-dot--active,
.page-about .hmg-track-dot--active,
.page-partenaires .hmg-track-dot--active,
.page-projets-suivre .hmg-track-dot--active,
.page-livre-dor .hmg-track-dot--active {
background: rgb(var(--header-accent));
border-color: rgba(var(--header-accent),.80);
box-shadow: 0 0 10px rgba(var(--header-accent),.68);
}
/* ─── HMG-NAV COULEUR BLEUE pour la boucle légale
(cgv.php → mentions-legales.php → politique-confidentialite.php →
politique-cookies.php) ─── partagent toutes .page-cgv, sans catégorie
de service dédiée : même bleu neutre que la boucle Présentation. */
.page-cgv .hmg-nav-link {
border-color: rgba(var(--header-accent),.38);
background: rgba(var(--header-accent),.09);
box-shadow: 0 0 14px rgba(var(--header-accent),.10);
}
.page-cgv .hmg-nav-link:hover {
border-color: rgba(var(--header-accent),.68);
background: rgba(var(--header-accent),.16);
box-shadow: 0 0 20px rgba(var(--header-accent),.20);
}
.page-cgv .hmg-track-dot--active {
background: rgb(var(--header-accent));
border-color: rgba(var(--header-accent),.80);
box-shadow: 0 0 10px rgba(var(--header-accent),.68);
}
/* ─── HMG-NAV — boucle Offres (sitevitrine.php → sitepro.php →
surmesure.php), navigation adaptée au même système que les pages "à
propos" (demande explicite), auparavant des classes dédiées
(.vitrine-offer-nav, etc.) sans ligne de progression.
Couleur adaptée à CHAQUE page plutôt qu'une seule couleur partagée
(demande explicite) — reprise de l'accent déjà utilisé ailleurs sur
chaque page :
- sitevitrine.php : cyan — c'est déjà la couleur par défaut de
.hmg-nav-link (cf. règles de base plus haut), donc aucune
surcharge nécessaire ici.
- sitepro.php : ambre/or (cf. .pro-price, .pro-hero h1).
- surmesure.php : bleu (cf. .sur-price, .sur-hero h1). */
.page-pro .hmg-nav-link {
border-color: rgba(var(--header-accent),.45);
background: rgba(var(--header-accent),.12);
box-shadow: 0 0 18px rgba(var(--header-accent),.15);
}
.page-pro .hmg-nav-link:hover {
border-color: rgba(var(--header-accent),.75);
background: rgba(var(--header-accent),.25);
box-shadow: 0 0 28px rgba(var(--header-accent),.30);
}
.page-pro .hmg-track-dot--active {
background: rgb(var(--header-accent));
border-color: rgba(var(--header-accent),.80);
box-shadow: 0 0 10px rgba(var(--header-accent),.70);
}
.page-sur .hmg-nav-link {
border-color: rgba(var(--header-accent),.45);
background: rgba(var(--header-accent),.12);
box-shadow: 0 0 18px rgba(var(--header-accent),.15);
}
.page-sur .hmg-nav-link:hover {
border-color: rgba(var(--header-accent),.75);
background: rgba(var(--header-accent),.25);
box-shadow: 0 0 28px rgba(var(--header-accent),.30);
}
.page-sur .hmg-track-dot--active {
background: rgb(var(--header-accent));
border-color: rgba(var(--header-accent),.80);
box-shadow: 0 0 10px rgba(var(--header-accent),.70);
}
/* ─── Adaptation pour libellés plus longs (boucle légale) ───
Même visuel que la boucle Présentation (aucun fond "verre" ni changement
de taille des points — juste la couleur, cf. règles ci-dessus) : les
libellés des pages légales sont simplement plus longs ("Conditions
Générales de Vente", "Politique de confidentialité") que ceux de la
boucle Présentation ("Avis", "Partenaires"...). Barre un peu plus large
et texte légèrement réduit pour que les 2 liens + la piste de points
restent sur une seule ligne sans se chevaucher. */
.page-cgv .hmg-nav {
width: min(760px, calc(100% - 40px));
}
.page-cgv .hmg-nav-link {
font-size: .74rem;
padding: 9px 14px;
letter-spacing: .03em;
}
/* ========================= conseil.php ========================= */
/* ─── BACKGROUND FIXE ─── */
.page-conseil::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
/* Planète (conseil.php : planet-jupiter ; conseilaccompagnement.php, le hub,
reprend sa planète de catégorie violette via l'override ci-dessous — même
répartition que l'ancienne décoration de .cw-hero) sur son propre calque
::after, masquée en fondu radial + rétrécie/effacée au scroll — même
mécanisme que .page-vitrine::after/.page-refonte::after (cf. main.js, bloc
"DÉCOR DE FOND") — demande explicite : étendre l'effet à toutes les pages
offres. */
.page-conseil::after {
content: "";
position: fixed;
inset: 0;
background: url("../image/planet-jupiter.webp") center / 62vmin no-repeat;
-webkit-mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
pointer-events: none;
z-index: 0;
transform: scale(var(--bg-scroll-scale, 1));
opacity: var(--bg-scroll-opacity, 1);
transform-origin: center center;
transition: transform .08s linear, opacity .08s linear;
}
.page-conseil-hub::after {
background-image: url("../image/planet-violet.webp");
}
.page-conseil.bg-entrance::after {
transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.page-conseil > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-conseil .section-block {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
.page-conseil .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── LAYOUT INNER COMMUN ─── */
.conseil-section-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem);
}
/* ─── SECTION HEADER ─── */
.conseil-section-header {
text-align: center;
max-width: 680px;
margin: 0 auto 40px;
}
.conseil-section-header h2 {
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.conseil-section-header p {
color: rgba(255,255,255,.48);
font-size: .92rem;
line-height: 1.7;
}
/* ─── HERO ─── */
.conseil-hero {
min-height: 55dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 140px 20px 80px;
text-align: center;
}
.conseil-hero-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 760px;
margin-top: 48px;
}
.conseil-page-label {
display: inline-flex;
align-items: center;
padding: 4px 16px;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #a5b4fc;
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.32);
box-shadow: 0 0 16px rgba(var(--header-accent),.14);
}
.conseil-hero h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.conseil-hero-sub {
color: rgba(255,255,255,.58);
font-size: .98rem;
line-height: 1.75;
max-width: 620px;
margin: 0;
}
.conseil-impact-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.conseil-impact-list li {
padding: 6px 16px;
border-radius: 999px;
font-size: .82rem;
font-weight: 600;
color: rgba(165,180,252,.85);
background: rgba(var(--header-accent),.08);
border: 1px solid rgba(var(--header-accent),.22);
}
.conseil-hero-tagline {
font-size: .92rem;
font-weight: 600;
color: rgba(var(--header-accent),.85);
margin: 0;
padding: 10px 20px;
border-left: 2px solid rgba(var(--header-accent),.50);
background: rgba(var(--header-accent),.06);
border-radius: 0 8px 8px 0;
text-align: left;
}
/* ─── REGARD EXPERT ─── */
.conseil-expert {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.conseil-expert-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.conseil-expert-card {
padding: 28px 26px;
border-radius: 18px;
background: rgba(255,255,255,.028);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.conseil-expert-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.conseil-expert-card--situations::before {
background: linear-gradient(90deg, transparent, rgba(var(--header-accent),.55), transparent);
}
.conseil-expert-card--choices::before {
background: linear-gradient(90deg, transparent, rgba(139,92,246,.50), transparent);
}
.conseil-expert-card h3 {
font-size: .96rem;
font-weight: 700;
color: #fff;
margin: 0 0 16px;
}
.conseil-expert-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.conseil-expert-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: .88rem;
color: rgba(255,255,255,.65);
padding: 8px 12px;
border-radius: 8px;
background: rgba(var(--header-accent),.05);
border: 1px solid rgba(var(--header-accent),.10);
}
.conseil-expert-list li::before {
content: "→";
color: #818cf8;
font-weight: 700;
flex-shrink: 0;
}
.conseil-expert-list--choices li::before {
content: "◆";
color: rgba(139,92,246,.80);
font-size: .6rem;
}
.conseil-expert-tagline {
margin-top: 16px;
font-size: .88rem;
font-weight: 600;
color: rgba(var(--header-accent),.85);
font-style: italic;
}
/* ─── DOMAINES ─── */
.conseil-domains {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.conseil-domains-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.conseil-domain {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 24px 22px;
border-radius: 16px;
background: rgba(255,255,255,.028);
border: 1px solid rgba(255,255,255,.06);
position: relative;
overflow: hidden;
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.conseil-domain::before {
content: "";
position: absolute;
left: 0; top: 15%; bottom: 15%;
width: 3px;
border-radius: 0 2px 2px 0;
opacity: .55;
transition: opacity .25s ease, top .25s ease, bottom .25s ease;
}
.conseil-domain--strategy::before { background: #6366f1; }
.conseil-domain--ux::before { background: #8b5cf6; }
.conseil-domain--perf::before { background: #6366f1; }
.conseil-domain--conv::before { background: #8b5cf6; }
.conseil-domain:hover {
background: rgba(255,255,255,.048);
border-color: rgba(var(--header-accent),.16);
transform: translateX(5px);
}
.conseil-domain:hover::before {
opacity: 1;
top: 6%;
bottom: 6%;
}
.conseil-domain-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 9px;
border-radius: 7px;
font-size: .64rem;
font-weight: 800;
letter-spacing: .06em;
flex-shrink: 0;
margin-top: 2px;
background: rgba(var(--header-accent),.10);
color: #a5b4fc;
border: 1px solid rgba(var(--header-accent),.22);
}
.conseil-domain--strategy .conseil-domain-icon { background: rgba(139,92,246,.10); color: #c4b5fd; border-color: rgba(139,92,246,.22); }
.conseil-domain--ux .conseil-domain-icon { background: rgba(99,102,241,.10); color: #a5b4fc; border-color: rgba(99,102,241,.22); }
.conseil-domain--perf .conseil-domain-icon { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }
.conseil-domain--conv .conseil-domain-icon { background: rgba(34,197,94,.10); color: #4ade80; border-color: rgba(34,197,94,.22); }
.conseil-domain-body h3 {
font-size: .96rem;
font-weight: 700;
color: #fff;
margin: 0 0 10px;
}
.conseil-domain-body ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.conseil-domain-body li {
font-size: .86rem;
color: rgba(255,255,255,.55);
padding: 4px 0 4px 14px;
position: relative;
line-height: 1.5;
}
.conseil-domain-body li::before {
content: "▸";
position: absolute;
left: 0;
color: rgba(var(--header-accent),.65);
font-size: .72rem;
top: 5px;
}
/* ─── APPROCHE ─── */
.conseil-approach {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.conseil-approach-card {
max-width: 860px;
margin: 0 auto;
padding: 40px 36px;
border-radius: 20px;
background: rgba(255,255,255,.032);
border: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 20px;
}
.conseil-approach-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, transparent, rgba(var(--header-accent),.65), rgba(var(--accent-harmony-1),.45), transparent);
}
.conseil-approach-card h2 {
font-size: clamp(1.3rem, 2.2vw, 1.75rem);
font-weight: 700;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.conseil-approach-card > p {
font-size: .92rem;
color: rgba(255,255,255,.55);
line-height: 1.75;
margin: 0;
}
.conseil-approach-qualities {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.conseil-quality {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(var(--header-accent),.08);
border: 1px solid rgba(var(--header-accent),.18);
font-size: .88rem;
font-weight: 600;
color: rgba(255,255,255,.75);
}
.conseil-quality-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #818cf8;
box-shadow: 0 0 8px rgba(var(--header-accent),.80);
flex-shrink: 0;
}
.conseil-approach-results {
padding: 18px 20px;
border-radius: 12px;
background: rgba(var(--header-accent),.06);
border: 1px solid rgba(var(--header-accent),.16);
}
.conseil-approach-results-label {
display: block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #818cf8;
margin-bottom: 12px;
}
.conseil-approach-results ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.conseil-approach-results li {
display: flex;
align-items: center;
gap: 8px;
font-size: .88rem;
color: rgba(255,255,255,.70);
}
.conseil-approach-results li::before {
content: "✓";
color: #818cf8;
font-size: .76rem;
font-weight: 700;
flex-shrink: 0;
}
/* ─── OFFRES ─── */
.conseil-offers {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.conseil-offers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
align-items: stretch;
}
.conseil-plan {
display: flex;
flex-direction: column;
gap: 16px;
padding: 26px 22px 22px;
border-radius: 20px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.conseil-plan::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.conseil-plan:hover { transform: translateY(-6px); }
.conseil-plan--basic::before {
background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.conseil-plan--basic:hover {
border-color: rgba(255,255,255,.14);
box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.conseil-plan--essential::before {
background: linear-gradient(90deg, transparent, rgba(var(--header-accent),.60), transparent);
}
.conseil-plan--essential:hover {
border-color: rgba(var(--header-accent),.26);
box-shadow: 0 16px 40px rgba(var(--header-accent),.10);
}
.conseil-plan--pro::before {
background: linear-gradient(90deg, transparent, rgba(139,92,246,.80), transparent);
}
.conseil-plan--pro {
border-color: rgba(139,92,246,.20);
box-shadow: 0 0 40px rgba(139,92,246,.08);
}
.conseil-plan--pro:hover {
border-color: rgba(139,92,246,.40);
box-shadow: 0 16px 50px rgba(139,92,246,.18);
}
.conseil-plan--premium::before {
background: linear-gradient(90deg, transparent, rgba(251,191,36,.60), transparent);
}
.conseil-plan--premium:hover {
border-color: rgba(251,191,36,.24);
box-shadow: 0 16px 40px rgba(251,191,36,.10);
}
.conseil-plan-ribbon {
position: absolute;
top: 12px;
right: 12px;
padding: 3px 12px;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
background: rgba(139,92,246,.75);
border: 1px solid rgba(139,92,246,.50);
box-shadow: 0 4px 14px rgba(139,92,246,.30);
}
.conseil-plan-top { display: flex; flex-direction: column; gap: 8px; }
.conseil-plan-tier {
display: inline-block;
font-size: .70rem;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
}
.conseil-plan--basic .conseil-plan-tier { color: rgba(255,255,255,.40); }
.conseil-plan--essential .conseil-plan-tier { color: #a5b4fc; }
.conseil-plan--pro .conseil-plan-tier { color: #c4b5fd; }
.conseil-plan--premium .conseil-plan-tier { color: #fcd34d; }
.conseil-plan-top h3 {
font-size: .98rem;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.3;
}
.conseil-plan-price {
display: flex;
align-items: baseline;
gap: 4px;
padding: 9px 12px;
border-radius: 10px;
width: fit-content;
}
.conseil-plan--basic .conseil-plan-price { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.conseil-plan--essential .conseil-plan-price { background: rgba(var(--header-accent),.10); border: 1px solid rgba(var(--header-accent),.20); }
.conseil-plan--pro .conseil-plan-price { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.24); }
.conseil-plan--premium .conseil-plan-price { background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.22); }
.conseil-price-amount {
font-size: 1.3rem;
font-weight: 800;
color: #fff;
line-height: 1;
}
.conseil-price-currency {
font-size: .75rem;
font-weight: 700;
color: rgba(255,255,255,.50);
margin-bottom: 2px;
}
.conseil-price-period {
font-size: .72rem;
color: rgba(255,255,255,.38);
}
.conseil-plan-tagline {
font-size: .80rem;
color: rgba(255,255,255,.38);
font-style: italic;
margin: 0;
}
.conseil-plan-section { display: flex; flex-direction: column; gap: 8px; }
.conseil-plan-section-label {
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.35);
}
.conseil-plan-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.conseil-plan-list li {
display: flex;
align-items: flex-start;
gap: 7px;
font-size: .83rem;
color: rgba(255,255,255,.65);
line-height: 1.5;
padding: 6px 8px;
border-radius: 7px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.04);
transition: color .2s ease;
}
.conseil-plan-list li::before {
content: "✓";
font-size: .76rem;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.conseil-plan--basic .conseil-plan-list li::before { color: rgba(255,255,255,.28); }
.conseil-plan--essential .conseil-plan-list li::before { color: #818cf8; }
.conseil-plan--pro .conseil-plan-list li::before { color: #a78bfa; }
.conseil-plan--premium .conseil-plan-list li::before { color: #fbbf24; }
.conseil-plan-list--ideal li::before { content: "→"; }
.conseil-plan:hover .conseil-plan-list li { color: rgba(255,255,255,.82); }
.conseil-plan-cta {
display: block;
text-align: center;
padding: 10px 16px;
border-radius: 999px;
font-size: .84rem;
font-weight: 700;
text-decoration: none;
color: rgba(255,255,255,.72);
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
margin-top: auto;
transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.conseil-plan--pro .conseil-plan-cta {
color: #fff;
background: rgba(139,92,246,.18);
border-color: rgba(139,92,246,.42);
box-shadow: 0 4px 16px rgba(139,92,246,.14);
}
.conseil-plan--basic .conseil-plan-cta:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.20); }
.conseil-plan--essential .conseil-plan-cta:hover { background: rgba(var(--header-accent),.14); border-color: rgba(var(--header-accent),.40); box-shadow: 0 6px 20px rgba(var(--header-accent),.12); color: #fff; }
.conseil-plan--pro .conseil-plan-cta:hover { background: rgba(139,92,246,.28); border-color: rgba(139,92,246,.60); box-shadow: 0 6px 20px rgba(139,92,246,.22); }
.conseil-plan--premium .conseil-plan-cta:hover { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.38); box-shadow: 0 6px 20px rgba(251,191,36,.12); color: #fff; }
/* ─── PHILOSOPHIE ─── */
.conseil-philosophy {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.conseil-philosophy-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.conseil-philo-card {
padding: 32px 28px;
border-radius: 18px;
background: rgba(255,255,255,.028);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
overflow: hidden;
}
.conseil-philo-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(var(--header-accent),.50), transparent);
}
.conseil-philo-card h2 {
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
font-weight: 700;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.90) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.conseil-philo-card > p {
font-size: .90rem;
color: rgba(255,255,255,.52);
line-height: 1.7;
margin: 0;
}
.conseil-philo-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.conseil-philo-steps li {
display: flex;
align-items: center;
gap: 12px;
font-size: .88rem;
color: rgba(255,255,255,.70);
padding: 10px 14px;
border-radius: 10px;
background: rgba(var(--header-accent),.06);
border: 1px solid rgba(var(--header-accent),.12);
}
.conseil-step-num {
font-family: "Space Grotesk", sans-serif;
font-size: 1.1rem;
font-weight: 800;
color: #818cf8;
opacity: .65;
flex-shrink: 0;
line-height: 1;
width: 28px;
}
.conseil-philo-tagline {
font-size: .88rem;
font-weight: 600;
color: rgba(var(--header-accent),.80);
margin: 0;
font-style: italic;
}
.conseil-partner-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.conseil-partner-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: .88rem;
color: rgba(255,255,255,.68);
padding: 9px 12px;
border-radius: 8px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.05);
}
.conseil-partner-list li::before {
content: "→";
color: #818cf8;
font-weight: 700;
flex-shrink: 0;
}
/* ─── BONUS ─── */
.conseil-bonus {
padding: 70px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.conseil-bonus-card {
max-width: 760px;
margin: 0 auto;
padding: 40px 36px;
border-radius: 20px;
background: rgba(var(--header-accent),.05);
border: 1px solid rgba(var(--header-accent),.20);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
position: relative;
overflow: hidden;
}
.conseil-bonus-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, transparent, rgba(var(--header-accent),.75), rgba(var(--accent-harmony-1),.55), transparent);
}
.conseil-bonus-badge {
display: inline-flex;
align-items: center;
padding: 4px 14px;
border-radius: 999px;
font-size: .70rem;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
color: #a5b4fc;
background: rgba(var(--header-accent),.12);
border: 1px solid rgba(var(--header-accent),.35);
box-shadow: 0 0 16px rgba(var(--header-accent),.15);
}
.conseil-bonus-card h2 {
font-size: clamp(1.2rem, 2vw, 1.6rem);
font-weight: 700;
margin: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.conseil-bonus-card > p {
color: rgba(255,255,255,.52);
font-size: .92rem;
line-height: 1.7;
max-width: 540px;
margin: 0;
}
.conseil-bonus-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
max-width: 480px;
text-align: left;
}
.conseil-bonus-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: .90rem;
font-weight: 500;
color: rgba(255,255,255,.75);
padding: 10px 16px;
border-radius: 10px;
background: rgba(var(--header-accent),.07);
border: 1px solid rgba(var(--header-accent),.16);
}
.conseil-bonus-list li::before {
content: "→";
color: #818cf8;
font-weight: 700;
flex-shrink: 0;
}
.conseil-bonus-tagline {
font-size: .90rem;
font-weight: 600;
color: rgba(var(--header-accent),.85);
margin: 0;
font-style: italic;
}
/* ─── CTA FINAL ─── */
.conseil-cta {
padding: 70px 20px var(--footer-clearance);
border-top: 1px solid rgba(255,255,255,.05);
}
.conseil-cta-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.conseil-cta-inner h2 {
font-size: clamp(1.5rem, 2.8vw, 2.1rem);
font-weight: 700;
margin: 0 0 14px;
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.conseil-cta-inner p {
color: rgba(255,255,255,.55);
font-size: .98rem;
line-height: 1.75;
max-width: 520px;
margin: 0 auto 28px;
}
.conseil-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.conseil-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 999px;
color: rgba(255,255,255,.78);
text-decoration: none;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.conseil-btn-secondary:hover {
color: #fff;
background: rgba(var(--header-accent),.10);
border-color: rgba(var(--header-accent),.40);
transform: translateY(-2px);
}
/* ─── BTN PRIMARY OVERRIDE ─── */
.page-conseil .btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 36px;
font-size: 1rem;
font-weight: 700;
letter-spacing: .04em;
border-radius: 999px;
color: #fff;
text-decoration: none;
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 42%, #000) 0%, color-mix(in srgb, rgb(var(--accent-harmony-1)) 38%, #000) 100%);
border: 1px solid rgba(var(--header-accent),.45);
box-shadow:
0 0 28px rgba(var(--header-accent),.22),
0 8px 20px rgba(var(--header-accent),.14),
inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.page-conseil .btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.page-conseil .btn-primary::after {
content: "→";
font-size: .95rem;
opacity: .7;
transition: transform .3s ease, opacity .3s ease;
}
.page-conseil .btn-primary:hover {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 58%, #000) 0%, color-mix(in srgb, rgb(var(--accent-harmony-1)) 52%, #000) 100%);
box-shadow:
0 0 44px rgba(var(--header-accent),.40),
0 12px 28px rgba(var(--header-accent),.22),
inset 0 1px 0 rgba(255,255,255,.16);
transform: translateY(-3px);
}
.page-conseil .btn-primary:hover::after {
transform: translateX(4px);
opacity: 1;
}
/* ========================= conseil.php (Conseil Web) ========================= */
/* ─── BACKGROUND FIXE ─── */
.page-conseil::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
.page-conseil > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-conseil .section-block {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
.page-conseil .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── btn-primary override ───
Ce bloc, plus bas dans la cascade que ".page-conseil .btn-primary" défini
plus haut (même sélecteur, même spécificité), est celui qui s'applique
réellement : le dégradé violet/indigo était codé en dur (ignorait le
sélecteur de couleur) et ne mélangeait jamais vers le noir, ce qui aurait
aussi rendu le texte illisible avec un accent clair. Remplacé par la même
recette accent-aware + toujours sombre que les autres pages offres. */
.page-conseil .btn-primary {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--accent-harmony-1)) 42%, #000), color-mix(in srgb, rgb(var(--header-accent)) 38%, #000));
box-shadow: 0 4px 20px rgba(var(--header-accent),.35);
}
.page-conseil .btn-primary:hover {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--accent-harmony-1)) 58%, #000), color-mix(in srgb, rgb(var(--accent-harmony-3)) 52%, #000));
box-shadow: 0 6px 28px rgba(var(--header-accent),.50);
}
/* ─── SHARED ─── */
.cw-section-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.cw-section-header {
text-align: center;
margin-bottom: 48px;
}
.cw-section-header h2 {
font-size: clamp(1.4rem, 2.5vw, 1.9rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.9) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cw-section-header p {
color: rgba(255,255,255,.50);
font-size: .95rem;
max-width: 540px;
margin: 0 auto;
}
/* ─── HERO ─── */
.cw-hero {
min-height: 55dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 140px 24px 60px;
text-align: center;
}
.cw-hero-inner {
max-width: 760px;
margin-top: 48px;
}
/* Demande explicite : "renforcer la lisibilité des badges section 1" — fond
translucide accent (.10 d'opacité) laissait trop passer l'image de
planète derrière sur certaines pages. Fond sombre bien plus opaque +
ombre portée pour rester lisible quel que soit le fond. */
.cw-page-label {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(var(--header-accent),.95);
border: 1px solid rgba(var(--header-accent),.55);
background: rgba(10,14,24,.65);
padding: 5px 14px;
border-radius: 999px;
margin-bottom: 20px;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.cw-hero h1 {
font-size: clamp(1.9rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.2;
margin: 0 0 16px;
background: linear-gradient(120deg, #fff 50%, rgba(var(--header-accent),.85) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Demande explicite : "le texte ... est très peu lisible" (accompagnement.php,
conseil.php notamment) — opacité relevée + légère ombre portée pour rester
lisible sur un fond de planète clair. */
.cw-hero-sub {
color: rgba(255,255,255,.85);
font-size: 1rem;
line-height: 1.7;
max-width: 560px;
margin: 0 auto 24px;
text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 1px 10px rgba(0,0,0,.55);
}
.cw-impact-list {
list-style: none;
padding: 0;
margin: 0 auto 20px;
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
/* Demande explicite (suite) : ces badges restaient "trop clairs/pas assez
visibles" malgré le renfort déjà posé sur .cw-hero-tagline juste en
dessous (même souci, cf. commentaire plus bas) — le fond teinté accent à
12% et le texte à 80% ne protégeaient pas assez sur un fond de planète
clair (refonte.php notamment). Fond bien plus opaque (même recette que
.heberg-hero-cta-line) + texte quasi blanc + ombre portée, tout en gardant
la bordure teintée accent comme identifiant visuel. */
.cw-impact-list li {
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
padding: 6px 16px;
border-radius: 999px;
background: rgba(10,14,24,.55);
border: 1px solid rgba(var(--header-accent),.40);
color: rgba(255,255,255,.92);
text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
/* Demande explicite : "le texte n'est pas assez lisible... ça se répète sur
plusieurs pages (1ère section) qui ont pour bg une des planètes" — 48%
d'opacité blanche sans aucune ombre portée se fondait dans les hero au
fond de planète clair (refonte.php notamment). Opacité relevée + légère
ombre portée pour rester lisible quel que soit le fond. */
.cw-hero-tagline {
font-size: .92rem;
color: rgba(255,255,255,.85);
font-style: italic;
margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 1px 10px rgba(0,0,0,.55);
}
.cw-hero-cta {
display: inline-block;
margin-top: 28px;
}
/* ─── WHY ─── */
.cw-why {
padding: 80px 0;
}
.cw-why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
/* Variante 1 seule carte (pas de carte "bénéfices" à côté) : centrée,
largeur de lecture confortable plutôt qu'étirée sur toute la grille. */
.cw-why-grid--single {
grid-template-columns: 1fr;
max-width: 640px;
margin: 0 auto;
}
.cw-why-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 32px;
}
.cw-why-card--errors {
border-color: rgba(239,68,68,.15);
}
.cw-why-card h2 {
font-size: 1.05rem;
font-weight: 700;
color: #fff;
margin: 0 0 10px;
}
.cw-why-card p {
color: rgba(255,255,255,.50);
font-size: .88rem;
line-height: 1.6;
margin: 0 0 16px;
}
.cw-why-list {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.cw-why-list li {
font-size: .85rem;
color: rgba(255,255,255,.60);
padding-left: 18px;
position: relative;
line-height: 1.5;
}
.cw-why-list li::before {
content: "✕";
position: absolute;
left: 0;
color: rgba(239,68,68,.75);
font-size: .72rem;
top: 3px;
}
.cw-why-tagline {
font-size: .85rem;
color: rgba(239,68,68,.70);
font-weight: 600;
margin: 0;
font-style: italic;
}
.cw-why-card--benefits h3 {
font-size: .72rem;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin: 0 0 16px;
}
.cw-benefits-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.cw-benefits-list li {
font-size: .88rem;
color: rgba(255,255,255,.75);
padding: 10px 14px 10px 42px;
background: rgba(var(--header-accent),.08);
border: 1px solid rgba(var(--header-accent),.14);
border-radius: 8px;
position: relative;
}
.cw-benefits-list li::before {
content: "✓";
position: absolute;
left: 14px;
color: rgba(var(--header-accent),.9);
font-weight: 800;
}
/* ─── APPROCHE ─── */
.cw-approach {
padding: 80px 0;
}
.cw-approach-inner {
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.cw-approach-inner h2 {
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
font-weight: 700;
color: #fff;
margin: 0 0 10px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.9) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cw-approach-inner > p {
color: rgba(255,255,255,.48);
font-size: .92rem;
margin: 0 0 36px;
}
.cw-approach-steps {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 12px;
text-align: left;
}
.cw-approach-steps li {
display: flex;
align-items: center;
gap: 16px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(var(--header-accent),.15);
border-radius: 10px;
padding: 16px 20px;
font-size: .92rem;
color: rgba(255,255,255,.80);
transition: border-color .25s, background .25s;
}
.cw-approach-steps li:hover {
border-color: rgba(var(--header-accent),.30);
background: rgba(var(--header-accent),.07);
}
.cw-step-num {
font-size: .68rem;
font-weight: 800;
letter-spacing: .10em;
color: rgba(var(--header-accent),.9);
background: rgba(var(--header-accent),.14);
border: 1px solid rgba(var(--header-accent),.28);
border-radius: 6px;
padding: 4px 9px;
flex-shrink: 0;
}
.cw-approach-tagline {
font-size: .88rem;
color: rgba(255,255,255,.40);
font-style: italic;
margin: 0;
}
/* ─── DOMAINS ─── */
.cw-domains {
padding: 80px 0;
}
.cw-domains-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.cw-domain {
display: flex;
gap: 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
padding: 24px;
transition: border-color .25s, box-shadow .25s;
}
.cw-domain:hover {
border-color: rgba(var(--header-accent),.22);
box-shadow: 0 6px 20px rgba(var(--header-accent),.08);
}
.cw-domain-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 9px;
border-radius: 7px;
font-size: .64rem;
font-weight: 800;
letter-spacing: .06em;
flex-shrink: 0;
margin-top: 2px;
background: rgba(var(--header-accent),.10);
color: #a5b4fc;
border: 1px solid rgba(var(--header-accent),.22);
}
.cw-domain--structure .cw-domain-icon { background: rgba(139,92,246,.10); color: #c4b5fd; border-color: rgba(139,92,246,.22); }
.cw-domain--ux .cw-domain-icon { background: rgba(99,102,241,.10); color: #a5b4fc; border-color: rgba(99,102,241,.22); }
.cw-domain--content .cw-domain-icon { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }
.cw-domain--perf .cw-domain-icon { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }
.cw-domain--conv .cw-domain-icon { background: rgba(34,197,94,.10); color: #4ade80; border-color: rgba(34,197,94,.22); }
.cw-domain-body h3 {
font-size: .85rem;
font-weight: 700;
color: #fff;
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.cw-domain-body ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.cw-domain-body li {
font-size: .80rem;
color: rgba(255,255,255,.55);
padding-left: 12px;
position: relative;
line-height: 1.5;
}
.cw-domain-body li::before {
content: "▸";
position: absolute;
left: 0;
color: rgba(var(--header-accent),.65);
font-size: .68rem;
top: 4px;
}
/* ─── WHEN ─── */
.cw-when {
padding: 80px 0;
}
.cw-when-inner {
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.cw-when-inner h2 {
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
font-weight: 700;
margin: 0 0 28px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.9) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cw-when-list {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.cw-when-list li {
font-size: .90rem;
color: rgba(255,255,255,.72);
padding: 11px 16px 11px 46px;
background: rgba(var(--header-accent),.06);
border: 1px solid rgba(var(--header-accent),.12);
border-radius: 8px;
position: relative;
text-align: left;
transition: background .2s, border-color .2s;
}
.cw-when-list li:hover {
background: rgba(var(--header-accent),.11);
border-color: rgba(var(--header-accent),.22);
}
.cw-when-list li::before {
content: "→";
position: absolute;
left: 16px;
color: rgba(var(--header-accent),.75);
font-weight: 700;
}
.cw-when-tagline {
font-size: .90rem;
color: rgba(var(--header-accent),.82);
font-weight: 600;
font-style: italic;
margin: 0;
}
/* ─── OFFER ─── */
.cw-offer {
padding: 80px 0;
}
.cw-offer-card {
display: grid;
grid-template-columns: 280px 1fr;
background: rgba(255,255,255,.03);
border: 1px solid rgba(var(--header-accent),.30);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 40px rgba(var(--header-accent),.10);
}
.cw-offer-left {
background: rgba(var(--header-accent),.10);
border-right: 1px solid rgba(var(--header-accent),.20);
padding: 36px 28px;
display: flex;
flex-direction: column;
gap: 12px;
}
.cw-offer-tier {
display: inline-block;
font-size: .66rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(var(--header-accent),.9);
background: rgba(var(--header-accent),.15);
border: 1px solid rgba(var(--header-accent),.32);
padding: 4px 10px;
border-radius: 999px;
align-self: flex-start;
}
.cw-offer-left h3 {
font-size: 1.05rem;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.35;
}
.cw-offer-tagline {
font-size: .82rem;
color: rgba(255,255,255,.48);
margin: 0;
line-height: 1.55;
}
.cw-offer-price {
display: flex;
align-items: baseline;
gap: 5px;
margin: 8px 0;
}
/* Préfixe "Dès" placé AVANT le montant (cf. refonte.php) : sans lui, le mot
"dès" finissait relégué dans le petit texte de fin de ligne
(".cw-price-period"), loin du prix qu'il est censé qualifier — on lisait
"1200 CHF dès, projet unique", pas franchement clair. */
.cw-price-prefix {
font-size: 1.1rem;
font-weight: 700;
color: rgba(255,255,255,.55);
align-self: baseline;
}
.cw-price-amount {
font-size: 2rem;
font-weight: 800;
color: #fff;
line-height: 1;
}
.cw-price-currency {
font-size: .85rem;
font-weight: 700;
color: rgba(255,255,255,.45);
}
.cw-price-period {
font-size: .78rem;
color: rgba(255,255,255,.35);
}
.cw-offer-right {
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 26px;
}
.cw-offer-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.cw-offer-section-label {
font-size: .68rem;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(var(--header-accent),.72);
}
.cw-offer-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.cw-offer-list li {
font-size: .82rem;
color: rgba(255,255,255,.78);
padding: 5px 13px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
border-radius: 6px;
}
.cw-offer-list--ideal li {
background: rgba(var(--header-accent),.08);
border-color: rgba(var(--header-accent),.18);
color: rgba(255,255,255,.65);
}
/* ─── BENEFITS ─── */
.cw-benefits {
padding: 80px 0;
}
.cw-benefits-inner {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.cw-benefits-inner h2 {
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.9) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cw-benefits-inner > p {
color: rgba(255,255,255,.48);
font-size: .92rem;
margin: 0 0 28px;
}
.cw-benefits-pills {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.cw-benefits-pills li {
font-size: .88rem;
color: rgba(255,255,255,.78);
padding: 9px 20px;
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.26);
border-radius: 999px;
}
.cw-benefits-tagline {
font-size: .90rem;
color: rgba(var(--header-accent),.82);
font-weight: 600;
font-style: italic;
margin: 0;
}
/* ─── CONSEIL VS ACCOMPAGNEMENT ─── */
.cw-vs {
padding: 80px 0;
}
.cw-vs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 900px;
margin: 0 auto;
}
.cw-vs-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 30px 32px;
}
.cw-vs-card h3 {
font-size: .72rem;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin: 0 0 16px;
}
.cw-vs-card ul {
list-style: none;
padding: 0;
margin: 0 0 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cw-vs-card li {
font-size: .88rem;
color: rgba(255,255,255,.72);
padding: 6px 14px;
background: rgba(255,255,255,.03);
border-radius: 6px;
}
.cw-vs-card--conseil {
border-color: rgba(var(--header-accent),.25);
}
.cw-vs-card--conseil li {
background: rgba(var(--header-accent),.07);
border: 1px solid rgba(var(--header-accent),.12);
}
.cw-vs-card p {
font-size: .85rem;
color: rgba(255,255,255,.42);
margin: 0 0 12px;
}
.cw-vs-tagline {
font-size: .85rem;
color: rgba(var(--header-accent),.80) !important;
font-weight: 600;
font-style: italic;
}
/* ─── EXPERTISE ─── */
.cw-expertise {
padding: 80px 0;
}
.cw-expertise-card {
max-width: 600px;
margin: 0 auto;
text-align: center;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 20px;
padding: 48px 36px;
}
.cw-expertise-card h2 {
font-size: clamp(1.25rem, 2vw, 1.65rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.9) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cw-expertise-card > p {
color: rgba(255,255,255,.48);
font-size: .92rem;
margin: 0 0 28px;
}
.cw-exp-list {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.cw-exp-list li {
font-size: .88rem;
color: rgba(255,255,255,.78);
padding: 9px 20px;
background: rgba(var(--header-accent),.09);
border: 1px solid rgba(var(--header-accent),.22);
border-radius: 8px;
}
.cw-exp-tagline {
font-size: .88rem;
color: rgba(var(--header-accent),.80);
font-weight: 600;
font-style: italic;
margin: 0;
}
/* ─── BONUS ─── */
.cw-bonus {
padding: 80px 0;
}
.cw-bonus-card {
max-width: 720px;
margin: 0 auto;
background: linear-gradient(135deg, rgba(var(--header-accent),.12), rgba(var(--accent-harmony-1),.09));
border: 1px solid rgba(var(--header-accent),.30);
border-radius: 20px;
padding: 44px 40px;
text-align: center;
}
.cw-bonus-badge {
display: inline-block;
font-size: .66rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(var(--header-accent),.9);
background: rgba(var(--header-accent),.15);
border: 1px solid rgba(var(--header-accent),.35);
padding: 4px 12px;
border-radius: 999px;
margin-bottom: 16px;
}
.cw-bonus-card h2 {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
margin: 0 0 24px;
}
.cw-bonus-list {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.cw-bonus-list li {
font-size: .85rem;
color: rgba(255,255,255,.78);
padding: 8px 18px;
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.26);
border-radius: 999px;
}
.cw-bonus-tagline {
font-size: .88rem;
color: rgba(var(--header-accent),.85);
font-weight: 600;
font-style: italic;
margin: 0;
}
/* ─── HÉBERGEMENT / MAINTENANCE ─── */
.cw-hosting {
padding: 80px 0;
}
.cw-hosting-card {
max-width: 720px;
margin: 0 auto;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 20px;
padding: 44px 40px;
text-align: center;
}
.cw-hosting-card h2 {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
margin: 0 0 10px;
}
.cw-hosting-card > p {
color: rgba(255,255,255,.48);
font-size: .92rem;
margin: 0 0 24px;
}
.cw-hosting-list {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.cw-hosting-list li {
font-size: .85rem;
color: rgba(255,255,255,.78);
padding: 8px 18px;
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.26);
border-radius: 999px;
}
.cw-hosting-tagline {
font-size: .88rem;
color: rgba(var(--header-accent),.85);
font-weight: 600;
font-style: italic;
margin: 12px 0 0;
}
.cw-hosting-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 22px;
font-size: .92rem;
font-weight: 700;
letter-spacing: .02em;
color: #fff;
text-decoration: none;
padding: 12px 28px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(var(--header-accent),.85) 0%, rgba(var(--accent-harmony-1),.75) 100%);
border: 1px solid rgba(139,146,246,.55);
box-shadow:
0 0 24px rgba(var(--header-accent),.30),
0 8px 20px rgba(var(--header-accent),.18),
inset 0 1px 0 rgba(255,255,255,.12);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cw-hosting-link::after {
content: "→";
transition: transform .2s ease;
}
.cw-hosting-link:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, rgba(129,140,248,.95) 0%, rgba(167,139,250,.85) 100%);
box-shadow:
0 0 32px rgba(var(--header-accent),.45),
0 12px 28px rgba(var(--header-accent),.28),
inset 0 1px 0 rgba(255,255,255,.16);
}
.cw-hosting-link:hover::after {
transform: translateX(3px);
}
/* ─── CTA FINAL ───
Redevenue la dernière section de la page (easter egg #autopilote retiré,
cf. conseilaccompagnement.php) : porte donc à nouveau le padding-bottom
réservé au footer flottant (var(--footer-clearance)). */
.cw-cta {
padding: 80px 0 var(--footer-clearance);
text-align: center;
}
.cw-cta-inner {
max-width: 680px;
margin: 0 auto;
padding: 0 24px;
}
.cw-cta h2 {
font-size: clamp(1.45rem, 2.5vw, 2rem);
font-weight: 700;
margin: 0 0 14px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cw-cta p {
color: rgba(255,255,255,.52);
font-size: .98rem;
line-height: 1.75;
margin: 0 auto 28px;
}
.cw-cta-buttons {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.cw-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
border-radius: 999px;
border: 1px solid rgba(var(--header-accent),.35);
background: rgba(var(--header-accent),.08);
color: rgba(255,255,255,.78);
font-size: .90rem;
font-weight: 600;
text-decoration: none;
transition: background .25s, border-color .25s, color .25s;
}
.cw-btn-secondary:hover {
background: rgba(var(--header-accent),.18);
border-color: rgba(var(--header-accent),.55);
color: #fff;
}
/* ─── HUB DE SERVICES (conseilaccompagnement.php) ─── */
.hub-services {
padding: 80px 0;
}
.hub-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.hub-service-card {
display: flex;
gap: 16px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 28px;
transition: border-color .25s, box-shadow .25s, transform .25s;
}
.hub-service-card:hover {
transform: translateY(-2px);
}
.hub-service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 10px;
font-size: .6rem;
font-weight: 800;
letter-spacing: .04em;
flex-shrink: 0;
}
.hub-service-tag {
display: block;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
color: rgba(255,255,255,.4);
margin-bottom: 4px;
}
.hub-service-body h3 {
font-size: 1.05rem;
font-weight: 700;
color: #fff;
margin: 0 0 8px;
}
.hub-service-body p {
font-size: .85rem;
color: rgba(255,255,255,.58);
line-height: 1.6;
margin: 0 0 12px;
}
.hub-service-body ul {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-direction: column;
gap: 5px;
}
.hub-service-body li {
font-size: .78rem;
color: rgba(255,255,255,.55);
padding-left: 13px;
position: relative;
line-height: 1.5;
}
.hub-service-body li::before {
content: "▸";
position: absolute;
left: 0;
font-size: .66rem;
top: 3px;
}
.hub-service-link {
font-size: .82rem;
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.hub-service-link:hover {
text-decoration: underline;
}
.hub-service-card--conseil .hub-service-icon,
.hub-service-card--accomp .hub-service-icon {
background: rgba(139,92,246,.12); color: #c4b5fd; border: 1px solid rgba(139,92,246,.25);
}
.hub-service-card--conseil .hub-service-link,
.hub-service-card--accomp .hub-service-link { color: #c4b5fd; }
.hub-service-card--conseil .hub-service-body li::before,
.hub-service-card--accomp .hub-service-body li::before { color: rgba(139,92,246,.7); }
/* Demande explicite : "le badge WEB ne doit pas hériter de la couleur active,
toujours bleu" — comme les autres cartes du hub (violet/ambre/émeraude
fixes), la carte "Création de site" garde son identité bleue fixe. */
.hub-service-card--creation .hub-service-icon {
background: rgba(59,130,246,.12); color: #7db2ff; border: 1px solid rgba(59,130,246,.25);
}
.hub-service-card--creation .hub-service-link { color: #7db2ff; }
.hub-service-card--creation .hub-service-body li::before { color: rgba(59,130,246,.7); }
.hub-service-card--audit .hub-service-icon,
.hub-service-card--refonte .hub-service-icon {
background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.25);
}
.hub-service-card--audit .hub-service-link,
.hub-service-card--refonte .hub-service-link { color: #fbbf24; }
.hub-service-card--audit .hub-service-body li::before,
.hub-service-card--refonte .hub-service-body li::before { color: rgba(245,158,11,.7); }
.hub-service-card--prog .hub-service-icon {
background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.25);
}
.hub-service-card--prog .hub-service-link { color: #34d399; }
.hub-service-card--prog .hub-service-body li::before { color: rgba(16,185,129,.7); }
/* ─── HMG-NAV COULEUR INDIGO pour pages accompagnement ─── */
.page-accomp .hmg-nav-link {
border-color: rgba(var(--header-accent),.38);
background: rgba(var(--header-accent),.09);
box-shadow: 0 0 14px rgba(var(--header-accent),.10);
}
.page-accomp .hmg-nav-link:hover {
border-color: rgba(var(--header-accent),.68);
background: rgba(var(--header-accent),.16);
box-shadow: 0 0 20px rgba(var(--header-accent),.20);
}
.page-accomp .hmg-track-dot--active {
background: rgb(var(--header-accent));
border-color: rgba(var(--header-accent),.80);
box-shadow: 0 0 10px rgba(var(--header-accent),.68);
}
/* ========================= accompagnement.php ========================= */
/* ─── BACKGROUND FIXE ─── */
.page-accomp::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
/* Lune (accompagnement.php) sur son propre calque ::after, masquée en fondu
radial + rétrécie/effacée au scroll — même mécanisme que
.page-vitrine::after/.page-refonte::after (cf. main.js, bloc "DÉCOR DE
FOND") — demande explicite : étendre l'effet à toutes les pages offres. */
.page-accomp::after {
content: "";
position: fixed;
inset: 0;
background: url("../image/lune.png") center / 62vmin no-repeat;
-webkit-mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
mask-image: radial-gradient(circle 22vmin at center, #000 30%, transparent 92%);
pointer-events: none;
z-index: 0;
transform: scale(var(--bg-scroll-scale, 1));
opacity: var(--bg-scroll-opacity, 1);
transform-origin: center center;
transition: transform .08s linear, opacity .08s linear;
}
.page-accomp.bg-entrance::after {
transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.page-accomp > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-accomp .section-block {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
.page-accomp .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── btn-primary override ───
Dégradé toujours mélangé vers le noir (jamais la couleur d'accent pure) —
demande explicite : "les boutons (couleur blanc) ne sont pas assez
lisibles", le texte du bouton restant blanc quel que soit l'accent. */
.page-accomp .btn-primary {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--accent-harmony-1)) 42%, #000), color-mix(in srgb, rgb(var(--header-accent)) 38%, #000));
box-shadow: 0 4px 20px rgba(var(--header-accent),.35);
}
.page-accomp .btn-primary:hover {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--accent-harmony-1)) 58%, #000), color-mix(in srgb, rgb(var(--accent-harmony-3)) 52%, #000));
box-shadow: 0 6px 28px rgba(var(--header-accent),.50);
}
/* ─── SHARED ─── */
.acmp-section-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.acmp-section-header {
text-align: center;
margin-bottom: 48px;
}
.acmp-section-header h2 {
font-size: clamp(1.4rem, 2.5vw, 1.9rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.9) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.acmp-section-header p {
color: rgba(255,255,255,.50);
font-size: .95rem;
max-width: 540px;
margin: 0 auto;
}
/* ─── HERO ─── */
.acmp-hero {
min-height: 55dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 140px 24px 60px;
text-align: center;
}
.acmp-hero-inner {
max-width: 780px;
margin-top: 48px;
}
.acmp-page-label {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(var(--header-accent),.9);
border: 1px solid rgba(var(--header-accent),.35);
background: rgba(var(--header-accent),.10);
padding: 5px 14px;
border-radius: 999px;
margin-bottom: 20px;
}
.acmp-hero h1 {
font-size: clamp(1.9rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.2;
margin: 0 0 16px;
background: linear-gradient(120deg, #fff 50%, rgba(var(--header-accent),.85) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.acmp-hero-sub {
color: rgba(255,255,255,.58);
font-size: 1rem;
line-height: 1.7;
max-width: 600px;
margin: 0 auto 24px;
}
.acmp-impact-list {
list-style: none;
padding: 0;
margin: 0 auto 20px;
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.acmp-impact-list li {
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
padding: 6px 16px;
border-radius: 999px;
background: rgba(var(--header-accent),.12);
border: 1px solid rgba(var(--header-accent),.30);
color: rgba(255,255,255,.80);
}
.acmp-hero-tagline {
font-size: .92rem;
color: rgba(255,255,255,.48);
font-style: italic;
margin: 0;
}
/* ─── WHY ─── */
.acmp-why {
padding: 80px 0;
}
.acmp-why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.acmp-why-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 32px;
}
.acmp-why-card--problems {
border-color: rgba(239,68,68,.15);
}
.acmp-why-card h2 {
font-size: 1.05rem;
font-weight: 700;
color: #fff;
margin: 0 0 10px;
}
.acmp-why-card p {
color: rgba(255,255,255,.50);
font-size: .88rem;
line-height: 1.6;
margin: 0 0 16px;
}
.acmp-why-list {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-direction: column;
gap: 7px;
}
.acmp-why-list li {
font-size: .85rem;
color: rgba(255,255,255,.58);
padding-left: 18px;
position: relative;
line-height: 1.5;
}
.acmp-why-list li::before {
content: "✕";
position: absolute;
left: 0;
color: rgba(239,68,68,.72);
font-size: .72rem;
top: 3px;
}
.acmp-why-result {
font-size: .85rem;
color: rgba(239,68,68,.65);
font-style: italic;
font-weight: 600;
margin: 0;
}
.acmp-why-card--benefits h3 {
font-size: .72rem;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(255,255,255,.52);
margin: 0 0 16px;
}
.acmp-benefits-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.acmp-benefits-list li {
font-size: .88rem;
color: rgba(255,255,255,.78);
padding: 10px 14px 10px 42px;
background: rgba(var(--header-accent),.08);
border: 1px solid rgba(var(--header-accent),.14);
border-radius: 8px;
position: relative;
}
.acmp-benefits-list li::before {
content: "✓";
position: absolute;
left: 14px;
color: rgba(var(--header-accent),.9);
font-weight: 800;
}
/* ─── APPROCHE ─── */
.acmp-approach {
padding: 80px 0;
}
.acmp-approach-inner {
max-width: 860px;
margin: 0 auto;
text-align: center;
}
.acmp-approach-inner h2 {
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.9) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.acmp-approach-inner > p {
color: rgba(255,255,255,.48);
font-size: .92rem;
margin: 0 0 36px;
}
.acmp-cycle {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.acmp-cycle-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.22);
border-radius: 12px;
padding: 16px 20px;
min-width: 130px;
transition: background .25s, border-color .25s;
}
.acmp-cycle-step:hover {
background: rgba(var(--header-accent),.18);
border-color: rgba(var(--header-accent),.38);
}
.acmp-cycle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
border-radius: 7px;
font-size: .62rem;
font-weight: 800;
letter-spacing: .06em;
background: rgba(var(--header-accent),.10);
color: #a5b4fc;
border: 1px solid rgba(var(--header-accent),.22);
}
.acmp-cycle-icon--aud { background: rgba(139,92,246,.10); color: #c4b5fd; border-color: rgba(139,92,246,.22); }
.acmp-cycle-icon--opt { background: rgba(var(--header-accent),.10); color: #7aa2ff; border-color: rgba(var(--header-accent),.22); }
.acmp-cycle-icon--perf { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }
.acmp-cycle-icon--conv { background: rgba(34,197,94,.10); color: #4ade80; border-color: rgba(34,197,94,.22); }
.acmp-cycle-step span:last-child {
font-size: .78rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
}
.acmp-cycle-arrow {
font-size: 1.2rem;
color: rgba(var(--header-accent),.55);
font-weight: 700;
}
.acmp-approach-tagline {
font-size: .88rem;
color: rgba(255,255,255,.40);
font-style: italic;
margin: 0;
}
/* ─── INCLUDES ─── */
.acmp-includes {
padding: 80px 0;
}
.acmp-includes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.acmp-inc-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
padding: 26px 24px;
transition: border-color .25s, box-shadow .25s;
}
.acmp-inc-card:hover {
border-color: rgba(var(--header-accent),.22);
box-shadow: 0 6px 20px rgba(var(--header-accent),.08);
}
.acmp-inc-icon {
font-size: 2rem;
font-weight: 800;
margin-bottom: 12px;
line-height: 1;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: rgba(var(--header-accent),.45);
display: block;
}
.acmp-inc-card h3 {
font-size: .85rem;
font-weight: 700;
color: #fff;
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.acmp-inc-card ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.acmp-inc-card li {
font-size: .80rem;
color: rgba(255,255,255,.55);
padding-left: 12px;
position: relative;
line-height: 1.5;
}
.acmp-inc-card li::before {
content: "▸";
position: absolute;
left: 0;
color: rgba(var(--header-accent),.65);
font-size: .68rem;
top: 4px;
}
/* ─── PROGRESSION ─── */
.acmp-progress {
padding: 80px 0;
}
.acmp-progress-inner {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.acmp-progress-inner h2 {
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.9) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.acmp-progress-inner > p {
color: rgba(255,255,255,.48);
font-size: .92rem;
margin: 0 0 28px;
}
.acmp-progress-pills {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.acmp-progress-pills li {
font-size: .88rem;
color: rgba(255,255,255,.78);
padding: 9px 20px;
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.26);
border-radius: 999px;
}
/* ─── OFFERS ─── */
.acmp-offers {
padding: 80px 0;
}
.acmp-offers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.acmp-plan {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
border-radius: 18px;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
transition: border-color .25s, box-shadow .25s;
}
.acmp-plan:hover {
border-color: rgba(var(--header-accent),.22);
box-shadow: 0 8px 28px rgba(var(--header-accent),.08);
}
.acmp-plan--pro {
border-color: rgba(var(--header-accent),.35);
background: rgba(var(--header-accent),.08);
box-shadow: 0 0 40px rgba(var(--header-accent),.12);
}
.acmp-plan-ribbon {
position: absolute;
top: -1px;
right: 24px;
font-size: .66rem;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
background: linear-gradient(135deg, #6366f1, #818cf8);
color: #fff;
padding: 5px 14px;
border-radius: 0 0 8px 8px;
}
.acmp-plan-top {
display: flex;
flex-direction: column;
gap: 8px;
}
.acmp-plan-tier {
display: inline-block;
font-size: .66rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(var(--header-accent),.9);
background: rgba(var(--header-accent),.14);
border: 1px solid rgba(var(--header-accent),.28);
padding: 3px 10px;
border-radius: 999px;
align-self: flex-start;
}
.acmp-plan-top h3 {
font-size: 1rem;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.3;
}
.acmp-plan-price {
display: flex;
align-items: baseline;
gap: 5px;
}
.acmp-price-amount {
font-size: 1.75rem;
font-weight: 800;
color: #fff;
line-height: 1;
}
.acmp-price-currency {
font-size: .82rem;
font-weight: 700;
color: rgba(255,255,255,.42);
}
/* Prix "Sur devis" (Premium) : texte plus long qu'un montant chiffré, taille réduite pour rester lisible dans la pastille. */
.acmp-plan-price--quote .acmp-price-amount { font-size: 1.05rem; }
.acmp-price-period {
font-size: .75rem;
color: rgba(255,255,255,.32);
}
.acmp-plan-tagline {
font-size: .80rem;
color: rgba(255,255,255,.45);
margin: 0;
line-height: 1.5;
}
.acmp-plan-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 7px;
flex: 1;
}
.acmp-plan-list li {
font-size: .82rem;
color: rgba(255,255,255,.68);
padding: 6px 10px 6px 28px;
position: relative;
line-height: 1.5;
}
.acmp-plan-list li::before {
content: "✓";
position: absolute;
left: 8px;
color: rgba(var(--header-accent),.80);
font-weight: 700;
font-size: .80rem;
}
.acmp-plan--pro .acmp-plan-list li::before {
color: rgba(129,140,248,.90);
}
.acmp-plan-note {
margin: 0;
}
.acmp-plan-note-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .78rem;
font-weight: 700;
color: rgba(129,140,248,.95);
text-decoration: none;
line-height: 1.4;
}
.acmp-plan-note-link:hover {
text-decoration: underline;
}
.acmp-plan-ideal {
font-size: .82rem;
color: rgba(var(--header-accent),.78);
font-style: italic;
font-weight: 600;
margin: 0;
padding-top: 4px;
border-top: 1px solid rgba(255,255,255,.06);
}
.acmp-plan-cta {
display: block;
text-align: center;
padding: 11px 20px;
border-radius: 999px;
border: 1px solid rgba(var(--header-accent),.35);
background: rgba(var(--header-accent),.10);
color: rgba(255,255,255,.85);
font-size: .85rem;
font-weight: 600;
text-decoration: none;
margin-top: auto;
transition: background .25s, border-color .25s, color .25s;
}
.acmp-plan-cta:hover {
background: rgba(var(--header-accent),.22);
border-color: rgba(var(--header-accent),.55);
color: #fff;
}
/* Demande explicite : le bouton "Commencer" de l'offre "Accompagnement
stratégique continu" doit être stylisé à la couleur de la page active,
pas un indigo fixe. Recette dark color-mix déjà utilisée ailleurs pour
rester lisible avec le texte blanc quel que soit l'accent (y compris
"Blanc"/cyan, quasi-blanc). */
.acmp-plan--pro .acmp-plan-cta {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 55%, #000) 0%, color-mix(in srgb, rgb(var(--header-accent)) 75%, #000) 100%);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 16px rgba(var(--header-accent),.30);
}
.acmp-plan--pro .acmp-plan-cta:hover {
background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--header-accent)) 70%, #000) 0%, color-mix(in srgb, rgb(var(--header-accent)) 88%, #000) 100%);
box-shadow: 0 6px 22px rgba(var(--header-accent),.45);
}
/* ─── PHILOSOPHY ─── */
.acmp-philosophy {
padding: 80px 0;
}
.acmp-philosophy-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.acmp-philo-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 32px;
}
.acmp-philo-card h2 {
font-size: 1.05rem;
font-weight: 700;
color: #fff;
margin: 0 0 10px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.9) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.acmp-philo-card p {
color: rgba(255,255,255,.48);
font-size: .88rem;
line-height: 1.6;
margin: 0 0 16px;
}
.acmp-partner-list {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-direction: column;
gap: 9px;
}
.acmp-partner-list li {
font-size: .88rem;
color: rgba(255,255,255,.72);
padding: 8px 12px 8px 32px;
background: rgba(var(--header-accent),.07);
border-radius: 7px;
position: relative;
}
.acmp-partner-list li::before {
content: "→";
position: absolute;
left: 10px;
color: rgba(var(--header-accent),.72);
font-weight: 700;
}
.acmp-philo-tagline {
font-size: .85rem;
color: rgba(var(--header-accent),.80);
font-weight: 600;
font-style: italic;
margin: 0;
}
.acmp-vs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
.acmp-vs-col {
display: flex;
flex-direction: column;
gap: 8px;
}
.acmp-vs-label {
font-size: .68rem;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(255,255,255,.45);
margin-bottom: 4px;
}
.acmp-vs-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.acmp-vs-col li {
font-size: .82rem;
color: rgba(255,255,255,.60);
padding: 5px 10px;
background: rgba(255,255,255,.03);
border-radius: 5px;
}
.acmp-vs-col--active li {
color: rgba(255,255,255,.80);
background: rgba(var(--header-accent),.09);
border: 1px solid rgba(var(--header-accent),.16);
}
.acmp-vs-tagline {
font-size: .85rem;
color: rgba(var(--header-accent),.78);
font-weight: 600;
font-style: italic;
margin: 0;
}
/* ─── GROWTH ─── */
.acmp-growth {
padding: 80px 0;
}
.acmp-growth-card {
max-width: 680px;
margin: 0 auto;
text-align: center;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 20px;
padding: 48px 36px;
}
.acmp-growth-card h2 {
font-size: clamp(1.25rem, 2vw, 1.65rem);
font-weight: 700;
margin: 0 0 10px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.9) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.acmp-growth-card > p {
color: rgba(255,255,255,.48);
font-size: .92rem;
margin: 0 0 26px;
}
.acmp-growth-list {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
}
.acmp-growth-list li {
font-size: .88rem;
color: rgba(255,255,255,.72);
padding: 9px 14px 9px 38px;
background: rgba(var(--header-accent),.08);
border: 1px solid rgba(var(--header-accent),.14);
border-radius: 7px;
position: relative;
}
.acmp-growth-list li::before {
content: "↗";
position: absolute;
left: 12px;
color: rgba(var(--header-accent),.80);
font-weight: 700;
}
.acmp-growth-tagline {
font-size: .90rem;
color: rgba(var(--header-accent),.82);
font-weight: 600;
font-style: italic;
margin: 0;
}
/* ─── BONUS ─── */
.acmp-bonus {
padding: 80px 0;
}
.acmp-bonus-card {
max-width: 720px;
margin: 0 auto;
background: linear-gradient(135deg, rgba(var(--header-accent),.12), rgba(129,140,248,.09));
border: 1px solid rgba(var(--header-accent),.30);
border-radius: 20px;
padding: 44px 40px;
text-align: center;
}
.acmp-bonus-badge {
display: inline-block;
font-size: .66rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(var(--header-accent),.9);
background: rgba(var(--header-accent),.15);
border: 1px solid rgba(var(--header-accent),.35);
padding: 4px 12px;
border-radius: 999px;
margin-bottom: 16px;
}
.acmp-bonus-card h2 {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
margin: 0 0 24px;
}
.acmp-bonus-list {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.acmp-bonus-list li {
font-size: .85rem;
color: rgba(255,255,255,.78);
padding: 8px 18px;
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.26);
border-radius: 999px;
}
.acmp-bonus-tagline {
font-size: .88rem;
color: rgba(var(--header-accent),.85);
font-weight: 600;
font-style: italic;
margin: 0;
}
/* ─── CTA FINAL ─── */
.acmp-cta {
padding: 80px 0 var(--footer-clearance);
text-align: center;
}
.acmp-cta-inner {
max-width: 680px;
margin: 0 auto;
padding: 0 24px;
}
.acmp-cta h2 {
font-size: clamp(1.45rem, 2.5vw, 2rem);
font-weight: 700;
margin: 0 0 14px;
background: linear-gradient(100deg, #fff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.acmp-cta p {
color: rgba(255,255,255,.52);
font-size: .98rem;
line-height: 1.75;
margin: 0 auto 28px;
}
.acmp-cta-buttons {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.acmp-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
border-radius: 999px;
border: 1px solid rgba(var(--header-accent),.35);
background: rgba(var(--header-accent),.08);
color: rgba(255,255,255,.78);
font-size: .90rem;
font-weight: 600;
text-decoration: none;
transition: background .25s, border-color .25s, color .25s;
}
.acmp-btn-secondary:hover {
background: rgba(var(--header-accent),.18);
border-color: rgba(var(--header-accent),.55);
color: #fff;
}
/* ========================= presentation.php ========================= */
/* ─── BACKGROUND (identique à about.php / partenaires.php) ─── */
.page-presentation::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
.page-presentation > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-presentation .section-block {
opacity: 0;
transform: translateY(44px);
transition:
opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-presentation .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
.about-hero.presentation-hero {
padding-bottom: 40px;
}
/* ─── GRILLE DES ACCÈS PRÉSENTATION (réutilise les capsules de services.php) ─── */
.presentation-grid {
max-width: 1180px;
margin: 0 auto;
}
.presentation-grid .service-capsule {
max-width: 360px;
}
/* ─── Vignette "Livre d'or" : effet brillant dans sa propre couleur ───
var(--capsule-color)/--capsule-soft sont déjà définis par la variante
.service-capsule--refonte (ambre) portée par cette carte — l'effet
suit donc automatiquement sa couleur. Implémenté via un élément dédié
(.capsule-shine, ajouté uniquement sur cette carte) plutôt qu'en
détournant .service-capsule::before/::after (déjà utilisés pour la
grille pointillée et le liseré bas), et scopé par
.presentation-card-shine (pas par --refonte) pour ne pas affecter la
vignette "Refonte de site" de services.php, qui partage la même classe
de variante de couleur. */
.presentation-card-shine .capsule-shine {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
}
.presentation-card-shine .capsule-shine::before {
content: "";
position: absolute;
inset: -40% -10%;
background: linear-gradient(115deg,
transparent 38%,
color-mix(in srgb, var(--capsule-color) 38%, transparent) 48%,
color-mix(in srgb, var(--capsule-color) 16%, transparent) 53%,
transparent 62%);
transform: translateX(-60%);
mix-blend-mode: screen;
animation: presentationCardSheen 3.8s ease-in-out infinite;
}
@keyframes presentationCardSheen {
0%, 15% { transform: translateX(-60%); }
65%, 100% { transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce) {
.presentation-card-shine .capsule-shine::before { animation: none; }
}
/* ========================= about.php ========================= */
/* ─── BACKGROUND ─── */
.page-about::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
.page-about > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-about .section-block {
opacity: 0;
transform: translateY(44px);
transition:
opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-about .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── HERO ─── */
/* padding-top porté à 200px (au lieu de 140px) pour laisser la place à la
navigation inter-pages Présentation (positionnée en absolute au-dessus
du contenu, comme pour les chaînes hm/heberg/maint et conseil). */
.about-hero {
padding: 200px 20px 80px;
}
.about-hero .container {
max-width: 1100px;
margin: 0 auto;
}
.about-hero-layout {
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
}
.about-hero-content {
flex: 1 1 0;
min-width: 0;
}
.about-hero-content h1 {
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 800;
line-height: 1.15;
margin-bottom: 22px;
background: linear-gradient(110deg, #ffffff 30%, rgba(var(--header-accent),.90) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.about-subtitle {
color: rgba(255,255,255,.65);
line-height: 1.88;
font-size: 1.05rem;
max-width: 560px;
}
/* ─── PHOTO ───
Discrète mais pas minuscule : un portrait rond façon "byline", assez
présent pour se voir clairement à côté du texte sans redevenir le point
focal de la page (fini la carte rectangulaire avec halo lumineux). */
.about-hero-image {
flex: 0 0 180px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.about-hero-image img {
position: relative;
z-index: 1;
width: 160px;
height: 160px;
object-fit: cover;
border-radius: 50%;
display: block;
filter: grayscale(25%);
border: 2px solid rgba(255,255,255,.12);
box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
/* Badge discret sous l'avatar (remplace le texte gris plat d'origine) */
.about-image-caption {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 14px;
padding: 7px 16px;
border-radius: 999px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.08);
font-size: .72rem;
color: rgba(255,255,255,.55);
text-align: center;
letter-spacing: .02em;
white-space: nowrap;
}
.about-image-caption-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
background: rgba(16,185,129,.85);
box-shadow: 0 0 8px rgba(16,185,129,.55);
}
/* ─── RÉSEAUX (dans .about-hero-content, sous le sous-titre) ───
Réutilise les classes .contact-social-heading / .contact-social-links /
.contact-social-link de contact.php (déjà génériques, non scopées à une
page en particulier). */
.about-social-heading {
margin-top: 26px;
}
/* ─── SECTIONS ─── */
.about-section {
padding: 80px 20px;
}
.about-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
max-width: 1100px;
margin: 0 auto;
}
/* ─── CARDS ─── */
.about-card,
.about-single {
padding: 34px 38px;
border-radius: 18px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
position: relative;
overflow: hidden;
transition: border-color .3s ease, box-shadow .3s ease;
}
.about-card::before,
.about-single::before {
content: "";
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--header-accent),.50), transparent);
}
.about-card:hover,
.about-single:hover {
border-color: rgba(var(--header-accent),.16);
box-shadow: 0 22px 55px rgba(0,0,0,.22), 0 0 30px rgba(var(--header-accent),.05);
}
.about-card h2,
.about-single h2 {
font-size: 1.55rem;
font-weight: 700;
margin-bottom: 18px;
line-height: 1.3;
background: linear-gradient(100deg, #ffffff 40%, rgba(148,163,184,.80) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.about-single {
max-width: 900px;
margin: 0 auto;
}
/* ─── LISIBILITÉ "Ma vision du web" ───
6 paragraphes denses sans règle dédiée héritaient juste des styles par
défaut du navigateur (line-height ~1.2, taille 16px) : trop compact sur
fond sombre. On leur donne un traitement proche de celui déjà utilisé
ailleurs sur about.php (.about-partners-text, .about-list li). */
#vision .about-card p {
font-size: .95rem;
line-height: 1.8;
color: rgba(255,255,255,.68);
margin-bottom: 16px;
}
#vision .about-card p:last-child {
margin-bottom: 0;
}
/* ─── COMPARATIF "solution générique" vs "mon approche" ───
Remplace la simple liste à puces de la différenciation par un parallèle
visuel entre une approche générique (neutre, jamais nommée) et mon
approche personnalisée — sans jamais critiquer un concurrent précis. */
.about-compare {
display: flex;
flex-direction: column;
gap: 2px;
}
.about-compare-row {
display: grid;
grid-template-columns: minmax(0, 100px) minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
align-items: stretch;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,.055);
}
.about-compare-row:last-child {
border-bottom: none;
}
.about-compare-row--header {
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.about-compare-label {
min-width: 0;
font-size: .70rem;
font-weight: 700;
color: rgba(255,255,255,.42);
text-transform: uppercase;
letter-spacing: .04em;
display: flex;
align-items: center;
line-height: 1.3;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.about-compare-col {
min-width: 0;
font-size: .84rem;
line-height: 1.55;
padding: 8px 12px;
border-radius: 10px;
overflow-wrap: break-word;
word-break: break-word;
}
.about-compare-row--header .about-compare-col {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
padding: 4px 12px;
background: none;
border: none;
}
.about-compare-col--generic {
color: rgba(255,255,255,.42);
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.05);
}
.about-compare-row--header .about-compare-col--generic {
color: rgba(255,255,255,.38);
}
.about-compare-col--custom {
color: rgba(255,255,255,.85);
background: rgba(var(--header-accent),.08);
border: 1px solid rgba(var(--header-accent),.18);
}
.about-compare-row--header .about-compare-col--custom {
color: rgba(120,170,255,.95);
}
.about-partners-teaser {
text-align: center;
}
.about-partners-teaser .about-partners-text {
color: rgba(255,255,255,.65);
line-height: 1.8;
max-width: 620px;
margin: 0 auto 24px;
}
/* ─── LISTES ─── */
.about-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
}
.about-list li {
padding: 14px 18px 14px 46px;
border-radius: 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.055);
color: rgba(255,255,255,.70);
line-height: 1.68;
position: relative;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.about-list li::before {
content: "▸";
position: absolute;
left: 18px;
top: 15px;
color: rgba(var(--header-accent),.75);
font-size: .82rem;
line-height: 1;
}
.about-list li:hover {
background: rgba(var(--header-accent),.06);
border-color: rgba(var(--header-accent),.16);
color: rgba(255,255,255,.88);
}
/* Liste numérotée (méthode) */
.about-list--numbered {
counter-reset: method-counter;
}
.about-list--numbered li {
counter-increment: method-counter;
}
.about-list--numbered li::before {
content: counter(method-counter, decimal-leading-zero);
font-size: .70rem;
font-weight: 700;
letter-spacing: .04em;
top: 50%;
transform: translateY(-50%);
color: rgba(var(--header-accent),.65);
}
/* ─── Lien vers la section "méthode" de accueil.php (#method) ─── */
.about-method-link {
margin-top: 24px;
display: flex;
justify-content: center;
}
/* ─── CTA "devis sur mesure" en bas de la section #forwho ─── */
.about-forwho-cta {
margin-top: 28px;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,.08);
text-align: center;
}
.about-forwho-cta h3 {
font-size: 1.15rem;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
}
.about-forwho-cta p {
color: rgba(255,255,255,.62);
line-height: 1.7;
max-width: 520px;
margin: 0 auto 20px;
}
/* ─── PHILOSOPHIE ─── */
.about-philosophy {
padding: 80px 20px;
text-align: center;
}
.about-philosophy .container {
max-width: 980px;
margin: 0 auto;
}
.about-philosophy h2 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0;
background: linear-gradient(100deg, #ffffff 40%, rgba(148,163,184,.80) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.philosophy-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin: 30px auto 0;
}
.philosophy-item {
padding: 26px 22px;
border-radius: 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-top-width: 2px;
color: rgba(255,255,255,.68);
line-height: 1.75;
font-size: .96rem;
transition: transform .3s ease, box-shadow .3s ease, color .25s ease;
}
.philosophy-item:hover {
transform: translateY(-3px);
color: rgba(255,255,255,.88);
}
.philosophy-item:nth-child(1) { border-top-color: rgba(var(--header-accent),.65); }
.philosophy-item:nth-child(2) { border-top-color: rgba(59,130,246,.65); }
.philosophy-item:nth-child(3) { border-top-color: rgba(139,92,246,.65); }
.philosophy-item:nth-child(4) { border-top-color: rgba(16,185,129,.65); }
.philosophy-item:nth-child(1):hover { box-shadow: 0 14px 38px rgba(var(--header-accent),.10); }
.philosophy-item:nth-child(2):hover { box-shadow: 0 14px 38px rgba(59,130,246,.10); }
.philosophy-item:nth-child(3):hover { box-shadow: 0 14px 38px rgba(139,92,246,.10); }
.philosophy-item:nth-child(4):hover { box-shadow: 0 14px 38px rgba(16,185,129,.10); }
/* ─── MINI FAQ DE RÉASSURANCE (n'est plus la dernière section de
presentation.php depuis l'ajout du CTA "projets à suivre" juste
après : c'est ce nouveau bloc qui réserve désormais l'espace du
footer flottant, cf. #presentation-projets-cta plus bas). ─── */
.presentation-faq {
padding: 20px 20px 80px;
}
.presentation-faq .container {
max-width: 760px;
margin: 0 auto;
}
/* ─── CTA ─── */
.about-cta {
padding: 100px 20px var(--footer-clearance);
text-align: center;
}
/* Sur presentation.php, le CTA précède désormais la mini FAQ : il n'est
plus la dernière section, donc plus besoin d'y réserver l'espace du
footer flottant (repris par #presentation-projets-cta, la nouvelle
dernière section de la page). */
#presentation-cta {
padding-bottom: 80px;
}
.about-cta .container {
max-width: 680px;
margin: 0 auto;
}
.about-cta h2 {
font-size: clamp(1.8rem, 3vw, 2.4rem);
font-weight: 700;
margin-bottom: 18px;
background: linear-gradient(100deg, #ffffff 35%, rgba(var(--header-accent),.88) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.about-cta p {
color: rgba(255,255,255,.60);
line-height: 1.88;
margin: 0 auto 34px;
font-size: 1rem;
}
.presentation-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
align-items: center;
}
/* .btn-accueil porte un margin-bottom:130px hérité de son usage en hero
(voir règle générale plus haut) : neutralisé ici pour éviter qu'il
n'étire le bouton secondaire voisin (align-items: stretch par défaut
aurait sinon calqué sa hauteur sur celle, artificiellement agrandie,
du bouton "Me contacter"). */
.presentation-cta-buttons .btn-accueil {
margin-bottom: 0;
}
.presentation-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 999px;
color: rgba(255,255,255,.78);
text-decoration: none;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.presentation-btn-secondary:hover {
color: #fff;
background: rgba(var(--header-accent),.10);
border-color: rgba(var(--header-accent),.40);
transform: translateY(-2px);
}
/* ========================= partenaires.php ========================= */
/* ─── BACKGROUND (identique à about.php) ─── */
.page-partenaires::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
.page-partenaires > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-partenaires .section-block {
opacity: 0;
transform: translateY(44px);
transition:
opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-partenaires .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── HERO (centrée, sans photo) ─── */
/* Cette hero n'a pas de photo (contrairement à about.php qui réutilise
.about-hero) : son contenu est plus court, donc le même padding que sur
about.php (200px haut / 80px bas + 80px haut de section suivante) laissait
un vide disproportionné avant la première section. On resserre ici,
uniquement sur cette page. */
#partners-hero.about-hero { padding-bottom: 40px; }
#partner-official.about-section { padding-top: 40px; }
.partners-hero-layout {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.partners-hero-layout h1 {
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 800;
line-height: 1.15;
margin-bottom: 22px;
background: linear-gradient(110deg, #ffffff 30%, rgba(var(--header-accent),.90) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.partners-hero-layout .about-subtitle {
margin: 0 auto;
}
/* ─── GRILLE DES PARTENAIRES ─── */
.partners-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
max-width: 950px;
margin: 0 auto;
}
/* Variante 1 seule carte (réseau partenaire réduit à Atelier.Tech) :
centrée, largeur de lecture confortable plutôt qu'étirée sur toute la
grille (même logique que .cw-why-grid--single plus bas). */
.partners-grid--single {
grid-template-columns: 1fr;
max-width: 480px;
margin: 0 auto;
}
.partner-card-domain {
display: inline-block;
align-self: flex-start;
margin-bottom: 14px;
padding: 5px 12px;
border-radius: 999px;
font-size: .74rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: rgb(var(--header-accent));
background: rgba(var(--header-accent),.10);
border: 1px solid rgba(var(--header-accent),.28);
}
.partner-card {
display: flex;
flex-direction: column;
}
.partner-card-link {
margin-top: 22px;
align-self: flex-start;
padding: 10px 20px;
font-size: .85rem;
}
/* Les 2 cartes d'une même rangée ont la même hauteur (grid stretch par
défaut), mais un texte descriptif plus long que l'autre décalait le
bouton "Découvrir le projet" vers le bas d'une carte par rapport à
l'autre. En poussant le bouton en bas de la colonne flex (.partner-card),
les deux boutons se retrouvent alignés sur la même ligne quelle que soit
la longueur du texte. */
#partners-watch .partner-card-link {
margin-top: auto;
}
.partner-card-link .rocket-icon {
width: 18px;
height: 18px;
}
.about-card h3,
.partner-card h3 {
font-size: 1.55rem;
font-weight: 700;
margin-bottom: 18px;
line-height: 1.3;
background: linear-gradient(100deg, #ffffff 40%, rgba(148,163,184,.80) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ─── TITRES DE CATÉGORIE (Partenaire / Réseau partenaire) ─── */
.partners-category-title {
text-align: center;
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 800;
margin: 0 auto 30px;
max-width: 720px;
background: linear-gradient(110deg, #ffffff 30%, rgba(var(--header-accent),.90) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.partners-network-subtitle {
text-align: center;
margin: -10px auto 36px;
}
/* ─── PARTENAIRE OFFICIEL (Infomaniak) ─── */
.partner-featured {
max-width: 560px;
margin: 0 auto;
align-items: flex-start;
}
.partner-featured .modules-cta-link {
margin-top: 6px;
align-self: flex-start;
}
/* ========================= projets-a-suivre.php ========================= */
/* ─── BACKGROUND (identique à about.php / partenaires.php) : cette page
n'avait jamais reçu son bloc .page-projets-suivre::before, elle restait
donc sans l'image de fond fixe du reste du site. ─── */
.page-projets-suivre::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
.page-projets-suivre > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-projets-suivre .section-block {
opacity: 0;
transform: translateY(44px);
transition:
opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-projets-suivre .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Chaque projet a sa propre section pleine largeur (au lieu de partager une
grille avec l'autre projet) ; la 2e section reçoit un léger fond distinct
pour bien les séparer visuellement, comme les autres pages du site
alternent parfois le fond entre sections (cf. reviews-section--accueil). */
.projet-section--tinted {
background: rgba(255,255,255,.02);
border-top: 1px solid rgba(255,255,255,.05);
border-bottom: 1px solid rgba(255,255,255,.05);
}
.projet-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 44px;
align-items: center;
max-width: 1000px;
margin: 0 auto;
}
.projet-showcase--reverse .projet-showcase-preview { order: 2; }
.projet-showcase--reverse .projet-showcase-info { order: 1; }
.projet-showcase-info .partner-card-domain {
margin-bottom: 14px;
}
.projet-showcase-info h2 {
font-size: 1.55rem;
font-weight: 700;
margin-bottom: 16px;
line-height: 1.3;
background: linear-gradient(100deg, #ffffff 40%, rgba(148,163,184,.80) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.projet-showcase-info p {
color: rgba(255,255,255,.65);
line-height: 1.75;
margin-bottom: 24px;
}
.projet-showcase-preview .browser-chrome,
.projet-showcase-preview .browser-preview {
border-radius: 0;
}
/* ─── Carousel "Projets à suivre" (surmesure.php) ─── */
.projet-carousel {
max-width: 1000px;
margin: 0 auto;
}
.projet-carousel-viewport {
position: relative;
display: grid;
}
/* Les 2 slides occupent la même cellule de grille (empilées), pour un fondu
enchaîné fluide entre elles au lieu d'un simple basculement instantané. */
.projet-carousel-slide {
grid-area: 1 / 1 / -1 / -1;
opacity: 0;
pointer-events: none;
transition: opacity .9s ease;
}
.projet-carousel-slide.is-active {
opacity: 1;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.projet-carousel-slide {
transition: none;
}
}
.projet-carousel-nav {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 28px;
}
.projet-carousel-dot {
width: 10px;
height: 10px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255,255,255,.2);
cursor: pointer;
transition: background .2s, transform .2s;
}
.projet-carousel-dot:hover {
background: rgba(255,255,255,.4);
}
.projet-carousel-dot.is-active {
background: rgb(var(--header-accent));
transform: scale(1.3);
}
.projet-showcase-preview {
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.browser-preview--soon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(255,255,255,.02);
color: rgba(255,255,255,.32);
}
.browser-preview--soon svg {
width: 30px;
height: 30px;
opacity: .6;
}
.browser-preview--soon span {
font-size: .74rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.projet-maquette-btn--soon {
opacity: .5;
cursor: default;
pointer-events: none;
border-style: dashed;
}
.projet-maquette-btn--soon:hover {
transform: none;
box-shadow: none;
}
/* ========================= contact.php ========================= */
/* ─── BACKGROUND ─── */
.page-contact::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
.page-contact > * {
position: relative;
z-index: 1;
}
/* ─── SCROLL REVEAL ─── */
.page-contact .section-block {
opacity: 0;
transform: translateY(44px);
transition:
opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-contact .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── SECTION ─── */
.contact {
/* La section newsletter (ajoutée après) est désormais la dernière de la
page et porte elle-même var(--footer-clearance) : .contact n'a donc
plus qu'un espacement de bas de section normal. */
padding: 140px 20px 60px;
}
.contact .container {
max-width: 1100px;
margin: 0 auto;
}
/* ─── HEADER ─── */
.contact-header {
text-align: center;
margin-bottom: 56px;
}
.contact-header h1 {
font-size: clamp(2.2rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.15;
margin-bottom: 14px;
background: linear-gradient(110deg, #ffffff 30%, rgba(var(--header-accent),.90) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.contact-header p {
color: rgba(255,255,255,.58);
font-size: 1.05rem;
line-height: 1.78;
max-width: 540px;
margin: 0 auto;
}
.form-group {
display: flex;
flex-direction: column;
text-align: left;
gap: 8px;
/* Évite qu'un input avec une largeur intrinsèque (ex: dans une grille à
2 colonnes comme .auth-row-split) ne force la colonne à s'élargir
au-delà de l'espace disponible et à déborder de sa carte. */
min-width: 0;
}
/* Bug réel trouvé ici : l'attribut HTML [hidden] est censé masquer un élément
via la règle par défaut du navigateur "[hidden] { display: none }", mais
celle-ci a la même spécificité que ".form-group { display: flex }"
ci-dessus — et une règle d'auteur l'emporte toujours sur celle du
navigateur à spécificité égale. Résultat : un .form-group avec l'attribut
hidden restait visible (ex : "Précisez votre nom de domaine" / "Votre site
est-il déjà en ligne ?" affichés même en cas de réponse "Non" sur
compte-projets.php). Cette règle, plus spécifique, rétablit le masquage. */
.form-group[hidden] { display: none; }
.form-group label {
font-size: .76rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: rgba(255,255,255,.45);
}
/* Mention "(facultatif)" accolée à un label (ex : "Pourquoi choisir
CroisierWeb ?" sur compte-creer-site.php, demande explicite : "doit être
facultatif") — plus discrète que le reste du label déjà très atténué. */
.field-optional-hint {
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: rgba(255,255,255,.30);
}
.form-group input,
.form-group textarea {
width: 100%;
box-sizing: border-box;
min-width: 0;
padding: 13px 16px;
border-radius: 11px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.28);
color: #fff;
font-size: .95rem;
font-family: inherit;
outline: none;
resize: vertical;
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: rgba(255,255,255,.20);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: rgba(var(--header-accent),.55);
background: rgba(var(--header-accent),.05);
box-shadow: 0 0 0 3px rgba(var(--header-accent),.10), 0 0 20px rgba(var(--header-accent),.08);
}
/* Icône calendrier des champs date (demande explicite : "l'icône calendrier
soit plus visible... la manière de choisir la date sans effort") — l'icône
native ::-webkit-calendar-picker-indicator est minuscule et quasi invisible
sur fond sombre par défaut. Remplacée par notre propre pictogramme blanc
(même langage visuel que le chevron de .form-group select ci-dessous),
agrandie et surlignée au survol dans la couleur d'accent de la page pour
bien signaler qu'elle est cliquable. color-scheme:dark fait en sorte que le
popup natif du calendrier s'ouvre lui aussi en thème sombre plutôt qu'en
blanc cru. Uniquement Chrome/Edge/Safari (WebKit/Blink) : Firefox ne permet
pas de personnaliser cette icône, elle y garde son apparence native. */
.form-group input[type="date"] {
color-scheme: dark;
cursor: pointer;
/* Bug signalé ("les box des filtres ne sont pas belles, il faut les
harmoniser") : sans appearance:none, Chromium continue de dessiner le
bouton natif "effacer" (x) et les flèches de spin par-dessus notre
fond sombre — 2 petits pavés clairs qui, combinés au texte "dd/mm/yyyy"
en gris clair, donnaient l'impression d'une case restée blanche par
endroits à côté du champ texte pleinement stylé. appearance:none
retire ces résidus visuels natifs pour un rendu uniforme avec le reste
du formulaire (fond, bordure, rayon identiques à .form-group input). */
-webkit-appearance: none;
appearance: none;
}
.form-group input[type="date"]::-webkit-clear-button,
.form-group input[type="date"]::-webkit-inner-spin-button {
display: none;
}
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
background-image: url("data:image/svg+xml;utf8, (viewBox seul ne suffit pas),
certains navigateurs retombent sur la taille par défaut d'un élément
remplacé (300x150px) et cassent visuellement le bouton — la taille est
donc aussi verrouillée ici en CSS, en plus des attributs sur la balise. */
.review-toggle-chevron { width: 14px; height: 14px; transition: transform .25s ease; flex-shrink: 0; }
.review-toggle-btn[aria-expanded="true"] .review-toggle-chevron { transform: rotate(180deg); }
.pagination-wrap { margin-top: 28px; }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 8px;
border-radius: 8px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
color: var(--text-muted);
text-decoration: none;
font-size: .85rem;
font-weight: 600;
transition: background .15s, color .15s, border-color .15s;
}
.page-btn:hover { background: rgba(var(--header-accent),.12); color: #fff; }
.page-btn.active { background: var(--brand-color); color: var(--brand-color-contrast, #fff); border-color: var(--brand-color); }
@media (max-width: 860px) {
.livre-dor-layout { grid-template-columns: 1fr; }
.livre-dor-form-card { position: static; }
}
/* ─── Diaporama des avis 5 étoiles (automatique, cf. pages/livre-dor.php) —
au-dessus du catalogue complet. ─── */
.livre-dor-featured-title {
font-family: var(--font-title);
font-size: 1.3rem;
color: #fff;
margin-bottom: 20px;
text-align: center;
}
/* Diaporama infini (.reviews-slider-wrap / .reviews-track / .review-item) :
classes partagées avec index.php et accueil.php, définies plus bas dans ce
fichier. Sur ces 2 autres pages, un bloc .reviews-footer (margin-top:36px)
suit le slider et crée l'espace avant la section suivante — livre-dor.php
n'a pas ce bloc (le CTA "Laisser un avis" suit directement), d'où ce
margin-bottom dédié pour ne pas les coller l'un à l'autre. */
.livre-dor-featured .reviews-slider-wrap {
margin-bottom: 36px;
}
/* ─── Bannière CTA "Laisser un avis" (remplace l'ancien formulaire
inline, désormais externalisé sur pages/compte-avis.php). ─── */
.livre-dor-cta-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
background: linear-gradient(135deg, color-mix(in srgb, var(--brand-color) 10%, rgba(255,255,255,.03)), rgba(255,255,255,.03));
border: 1px solid color-mix(in srgb, var(--brand-color) 25%, rgba(255,255,255,.08));
border-radius: var(--radius);
padding: 26px 30px;
margin-bottom: 36px;
}
.livre-dor-cta-banner h2 {
font-family: var(--font-title);
font-size: 1.1rem;
color: #fff;
margin: 0 0 4px;
}
.livre-dor-cta-banner p { margin: 0; font-size: .88rem; color: var(--text-muted); }
.livre-dor-cta-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Bouton dédié à cette bannière (page publique) : le langage visuel du
dashboard client (.btn-account) n'a pas sa place ici, on reprend plutôt
le style pilule/dégradé/glow des CTA publics du site (cf. .btn-contact).
Dégradé en --accent-harmony-1/-2 (demande explicite) plutôt que
var(--brand-color) directement : la couleur brute de l'accent choisi
"jurait" trop répétée partout — la paire harmonisante (cf. .accent-* en
tête de fichier) offre un accord de couleurs plutôt qu'un simple décalque. */
.livre-dor-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 30px;
border-radius: 999px;
background: linear-gradient(135deg, rgb(var(--accent-harmony-1)), rgb(var(--accent-harmony-2)));
border: 1px solid transparent;
color: var(--accent-harmony-contrast, #fff);
text-shadow: 0 1px 3px rgba(0,0,0,.3);
font-size: .92rem;
font-weight: 700;
font-family: inherit;
text-decoration: none;
letter-spacing: .01em;
box-shadow: 0 8px 24px rgba(var(--accent-harmony-1), .35);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.livre-dor-cta-btn:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow: 0 12px 32px rgba(var(--accent-harmony-1), .48);
}
.livre-dor-cta-btn:active { transform: translateY(0); }
/* "Se connecter" (visiteur déjà inscrit) : restait figé en gris neutre,
aucune adaptation à la couleur choisie (demande explicite : "reste... à
adapter en fonction du choix sélectionné"). Reprend la même paire
harmonisante que le bouton plein ci-dessus, en version discrète/outline. */
.livre-dor-cta-btn--outline {
background: rgba(var(--accent-harmony-2), .1);
border-color: rgba(var(--accent-harmony-2), .4);
color: #fff;
box-shadow: none;
}
.livre-dor-cta-btn--outline:hover {
background: rgba(var(--accent-harmony-2), .18);
border-color: rgba(var(--accent-harmony-2), .65);
filter: none;
box-shadow: none;
}
/* ══════════════════════════════════════════════════════════════
FAQ — accordéon réutilisable (page-faq-site.php, blocs "FAQ
spécialisée" sur accueil.php / offres-site.php / sitevitrine.php /
sitepro.php / surmesure.php, et page compte faq.php).
══════════════════════════════════════════════════════════════ */
.faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
overflow: hidden;
transition: border-color .2s;
}
.faq-item:hover { border-color: rgba(var(--header-accent),.3); }
.faq-item[open] { border-color: rgba(var(--header-accent),.4); }
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
cursor: pointer;
font-weight: 700;
color: #fff;
font-size: .95rem;
list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-chevron {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--brand-color);
transition: transform .25s;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer {
padding: 0 22px 20px;
color: var(--text-muted);
font-size: .88rem;
line-height: 1.7;
}
.faq-answer a {
display: flex;
align-items: center;
gap: 6px;
width: fit-content;
margin-top: 10px;
color: var(--brand-color);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgba(var(--header-accent),.35);
transition: border-color .2s ease, transform .2s ease;
}
.faq-answer a:hover,
.faq-answer a:focus-visible {
border-color: var(--brand-color);
transform: translateX(3px);
}
.faq-answer a + a { margin-top: 6px; }
/* ─── Blocs "FAQ spécialisée" intégrés en bas de page ─── */
/* Ce bloc est la dernière section sur accueil.php : c'est donc lui qui doit
réserver l'espace pour le footer flottant (var(--footer-clearance)). */
.faq-preview-section {
padding: 80px 20px var(--footer-clearance);
position: relative;
}
/* Sur offres-site.php, la FAQ n'est plus la dernière section : le CTA final
(.offer-cta) a été déplacé après elle et réserve désormais lui-même
l'espace du footer flottant. Un padding-bottom normal suffit donc ici,
sinon les deux espacements s'additionnaient et créaient un vide énorme
entre la FAQ et le CTA. */
.page-offers .faq-preview-section {
padding-bottom: 80px;
}
/* ─── accueil.php : FAQ + Newsletter regroupées dans une seule section.
Plus de fond dédié ici : le bgsite.png fixe posé sur .site-main::before
(même logique que le reste du site) suffit, comme sur les autres pages
où la dernière section n'a pas de background propre. Padding-top
légèrement réduit pour remonter le contenu en haut de section. ─── */
.faq-preview-section--bg {
overflow: hidden;
/* demande explicite : réduction de largeur -10%/côté (dernière section
"dans le vaisseau"), cf. commentaire détaillé sur .method plus haut.
La bande métallique de fin (.metal-plate-band--bottom, enfant direct
de cette section) suit automatiquement cette largeur puisqu'elle est
positionnée en absolute left:0/right:0 relativement à cette boîte —
aucun réglage séparé n'est nécessaire pour "adapter la barre de la
dernière section". */
width: 90%;
margin-left: auto;
margin-right: auto;
/* Écart avec le haut de la section augmenté (demande explicite) pour
laisser respirer le badge + titre, plutôt que les coller juste sous
le divider qui précède. */
padding-top: 110px;
/* demande explicite : "uniformise le bg [des 7 sections de la fusée] à
la façon des sites évolutifs construits autour de modules" — reprend
exactement le fond de main .modules (au lieu du fond bgsiteindex.png
repris précédemment de .home-service-section--hebergement), cf.
commentaire détaillé sur .method plus haut. */
background:
radial-gradient(ellipse at 0% 100%, rgba(var(--header-accent),.18) 0%, transparent 45%),
radial-gradient(ellipse at 100% 0%, rgba(var(--header-accent),.10) 0%, transparent 45%),
radial-gradient(ellipse at 50% 50%, rgba(var(--header-accent),.05) 0%, transparent 65%),
repeating-linear-gradient(
0deg,
rgba(255,255,255,.025) 0,
rgba(255,255,255,.025) 1px,
transparent 1px,
transparent 44px
),
repeating-linear-gradient(
90deg,
rgba(255,255,255,.018) 0,
rgba(255,255,255,.018) 1px,
transparent 1px,
transparent 44px
),
rgba(7,10,18,.92);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-top: 1px solid rgba(var(--header-accent),.14);
border-bottom: 1px solid rgba(var(--header-accent),.14);
}
/* accueil.php : la FAQ n'est plus la dernière section de la page (suite à
la permutation avec "continuer la visite") — un padding-bottom normal
suffit désormais, c'est .home-service-section--hebergement qui réserve
l'espace du footer flottant (cf. plus bas dans ce fichier), même
principe que .page-offers .faq-preview-section ci-dessus. */
.site-main .faq-preview-section--bg {
padding-bottom: 80px;
}
/* accueil.php : demande explicite — donner à la section FAQ l'impression
d'être "remplie d'essence" / immergée. Nappe teintée (couleur du thème
sélectionné) occupant la moitié basse de la section, surmontée d'une
ligne de surface ondulée qui dérive en continu, façon liquide dans une
cuve. Purement décoratif (aria-hidden), posé en tout premier enfant de
la section donc sous le sas/coques/contenu. */
.faq-fuel-immersion {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.faq-fuel-immersion::before {
content: "";
position: absolute;
left: -5%;
right: -5%;
top: 18%;
bottom: 0;
background:
linear-gradient(180deg,
rgba(var(--header-accent), .10) 0%,
rgba(var(--header-accent), .20) 35%,
rgba(var(--header-accent), .34) 100%),
repeating-linear-gradient(115deg,
rgba(255,255,255,.03) 0,
rgba(255,255,255,.03) 2px,
transparent 2px,
transparent 30px);
animation: faqFuelShimmer 10s ease-in-out infinite alternate;
}
.faq-fuel-immersion::after {
content: "";
position: absolute;
left: -10%;
right: -10%;
top: calc(18% - 15px);
height: 30px;
background-image:
radial-gradient(ellipse 70px 15px at 35px 15px, rgba(255,255,255,.18) 0%, transparent 72%),
radial-gradient(ellipse 70px 15px at 105px 15px, rgba(255,255,255,.18) 0%, transparent 72%),
linear-gradient(180deg, transparent 0%, rgba(var(--header-accent),.14) 100%);
background-size: 140px 30px, 140px 30px, 100% 30px;
background-repeat: repeat-x, repeat-x, no-repeat;
animation: faqFuelWaveDrift 9s linear infinite;
}
@keyframes faqFuelShimmer {
from { opacity: .85; }
to { opacity: 1; }
}
@keyframes faqFuelWaveDrift {
from { background-position: 0 0, 0 0, 0 0; }
to { background-position: -140px 0, -140px 0, 0 0; }
}
.faq-preview-section .container {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* accueil.php : newsletter en section indépendante, DERNIÈRE section de la
page (réserve l'espace du footer flottant). Demande explicite : "il ne
doit y avoir que le bg de la page de visible" — plus de fond ni de voile
propres à cette section, ni de border-top (qui traverserait tout l'écran
puisque cette section n'a pas la largeur réduite des sections fusée) :
transparente, seul le fond fixe .site-main::before reste visible, comme
pour .why-cta-section ci-dessus. */
.newsletter-home-section {
padding: 80px 20px var(--footer-clearance);
position: relative;
overflow: hidden;
}
.newsletter-home-section .container {
max-width: 640px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.faq-preview-header {
text-align: center;
margin-bottom: 36px;
}
.faq-preview-header .reviews-eyebrow { margin-bottom: 16px; }
.faq-preview-header h2 {
font-family: var(--font-title);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: #fff;
margin-bottom: 10px;
}
.faq-preview-header p {
color: var(--text-muted);
max-width: 480px;
margin: 0 auto;
}
.faq-preview-footer {
text-align: center;
margin-top: 28px;
}
/* ─── Cartes "Modalités" devenues FAQ sur les pages d'offre
(sitevitrine.php / sitepro.php / surmesure.php) : même emplacement
dans la grille à 2 colonnes, le contenu passe juste d'une liste à
un accordéon. ─── */
.faq-card-footer {
margin-top: 16px;
}
/* Lien "Voir toute la FAQ" : transformé en pill bien visible (au lieu
d'un simple lien souligné gris) pour inciter au clic vers faq-site.php. */
.faq-card-footer .reviews-see-all-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .82rem;
font-weight: 700;
color: rgba(var(--header-accent),.95);
text-decoration: none;
padding: 9px 18px;
border-radius: 999px;
background: rgba(var(--header-accent),.09);
border: 1px solid rgba(var(--header-accent),.28);
transition: background .2s ease, border-color .2s ease, color .2s ease, gap .2s ease;
}
.faq-card-footer .reviews-see-all-link:hover {
background: rgba(var(--header-accent),.18);
border-color: rgba(var(--header-accent),.45);
color: #fff;
gap: 10px;
}
/* Couleur à la teinte active de chaque page d'offre (sitevitrine = cyan,
sitepro = or/gold ; surmesure reste bleu, déjà la couleur de base). */
.page-vitrine .faq-card-footer .reviews-see-all-link {
color: rgba(var(--header-accent),.95);
background: rgba(var(--header-accent),.09);
border-color: rgba(var(--header-accent),.28);
}
.page-vitrine .faq-card-footer .reviews-see-all-link:hover {
background: rgba(var(--header-accent),.18);
border-color: rgba(var(--header-accent),.45);
color: #fff;
}
.page-pro .faq-card-footer .reviews-see-all-link {
color: rgba(var(--header-accent),.95);
background: rgba(var(--header-accent),.09);
border-color: rgba(var(--header-accent),.28);
}
.page-pro .faq-card-footer .reviews-see-all-link:hover {
background: rgba(var(--header-accent),.18);
border-color: rgba(var(--header-accent),.45);
color: #fff;
}
/* sitepro.php : le survol/ouverture des questions FAQ gardait le reflet
bleu générique au lieu de l'or de la page. */
.page-pro .faq-item:hover { border-color: rgba(var(--header-accent),.3); }
.page-pro .faq-item[open] { border-color: rgba(var(--header-accent),.4); }
/* sitevitrine.php : même correctif, le reflet des questions FAQ restait
bleu générique au lieu du cyan de la page. */
.page-vitrine .faq-item:hover { border-color: rgba(var(--header-accent),.3); }
.page-vitrine .faq-item[open] { border-color: rgba(var(--header-accent),.4); }
/* La flèche déroulante (.faq-chevron) reprend var(--brand-color), bleu
générique, sur toutes les pages. À la couleur active pour sitevitrine
(cyan) et sitepro (or) ; surmesure reste bleu, déjà la bonne couleur. */
.page-vitrine .faq-chevron { color: rgba(var(--header-accent),.95); }
.page-pro .faq-chevron { color: rgb(var(--header-accent)); }
/* ─── Page FAQ complète (faq-site.php) ─── */
.page-faq-site::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
}
.page-faq-site > * {
position: relative;
z-index: 1;
}
.page-faq-site .section-block {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
.page-faq-site .section-block.is-visible {
opacity: 1;
transform: translateY(0);
}
.page-faq-site .container {
max-width: 1100px;
margin: 0 auto;
}
.faq-site-hero {
text-align: center;
padding: 140px 20px 60px;
}
.faq-site-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 800;
line-height: 1.15;
margin-bottom: 22px;
background: linear-gradient(110deg, #ffffff 30%, rgba(var(--header-accent),.90) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.faq-site-hero p {
color: rgba(255,255,255,.65);
line-height: 1.88;
font-size: 1.05rem;
max-width: 560px;
margin: 0 auto;
}
.faq-site-body {
padding: 0 20px var(--footer-clearance);
max-width: 800px;
margin: 0 auto;
}
.faq-category { margin-bottom: 40px; }
.faq-category:last-child { margin-bottom: 0; }
.faq-category-title {
font-family: var(--font-title);
font-size: 1.05rem;
color: var(--brand-color);
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
/* ─── CTA de fin de page : renvoi vers le support de l'espace client ─── */
.faq-cta {
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid rgba(255,255,255,.08);
text-align: center;
}
.faq-cta-title {
font-family: var(--font-title);
font-size: 1.2rem;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
}
.faq-cta-text {
color: var(--text-muted);
font-size: .92rem;
line-height: 1.7;
max-width: 480px;
margin: 0 auto 22px;
}
@media (max-width: 700px) {
.faq-site-hero { padding: 120px 20px 40px; }
}
/* ─── INFO CARDS ─── */
.contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 48px;
}
.info-card {
padding: 22px 22px 22px 26px;
border-radius: 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-left-width: 2px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: box-shadow .3s ease;
}
.info-card h3 {
font-size: .76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 8px;
}
.info-card p {
color: rgba(255,255,255,.62);
font-size: .92rem;
line-height: 1.65;
}
.info-card .info-card-hint {
color: rgba(255,255,255,.45);
font-size: .78rem;
line-height: 1.5;
margin-top: 2px;
}
/* ─── LIENS SOCIAUX (card Email) ───
Boutons ronds assez grands (40px) pour rester faciles à toucher au pouce
sur mobile ; les liens LinkedIn/Discord ouvrent l'app native en un tap
là où elle est installée (comportement natif des liens universels,
rien à faire côté site une fois les vraies URLs renseignées). */
.info-card h3.contact-social-heading {
margin-top: 14px;
}
.contact-social-links {
display: flex;
gap: 10px;
margin-top: 12px;
}
.contact-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: rgba(255,255,255,.65);
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.contact-social-link svg {
width: 18px;
height: 18px;
}
.contact-social-link:hover {
color: #fff;
border-color: rgba(var(--header-accent),.55);
background: rgba(var(--header-accent),.16);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(var(--header-accent),.22);
}
.info-card--blue { border-left-color: rgba(var(--header-accent),.70); }
.info-card--cyan { border-left-color: rgba(59,130,246,.70); }
.info-card--purple { border-left-color: rgba(139,92,246,.70); }
.info-card--green { border-left-color: rgba(16,185,129,.70); }
.info-card--blue h3 { color: rgba(99,160,255,.90); }
.info-card--cyan h3 { color: rgba(34,211,238,.90); }
.info-card--purple h3 { color: rgba(167,139,250,.90); }
.info-card--green h3 { color: rgba(52,211,153,.90); }
.info-card--blue:hover { box-shadow: 0 12px 32px rgba(var(--header-accent),.08); }
.info-card--cyan:hover { box-shadow: 0 12px 32px rgba(59,130,246,.08); }
.info-card--purple:hover { box-shadow: 0 12px 32px rgba(139,92,246,.08); }
.info-card--green:hover { box-shadow: 0 12px 32px rgba(16,185,129,.08); }
/* ─── BOUTON "APPELER" (facilite l'appel en un tap sur mobile) ─── */
.contact-call-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
padding: 10px 20px;
border-radius: 999px;
border: 1px solid rgba(16,185,129,.35);
background: rgba(16,185,129,.12);
color: #fff;
text-decoration: none;
font-size: .86rem;
font-weight: 600;
letter-spacing: .01em;
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.contact-call-btn svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.contact-call-btn:hover {
background: rgba(16,185,129,.22);
border-color: rgba(16,185,129,.55);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(16,185,129,.18);
color: #fff;
}
.contact-call-btn:active {
transform: translateY(0);
}
/* ─── ESPACE CLIENT (liens vers les formulaires du dashboard) ─── */
.contact-client {
margin-top: 64px;
padding-top: 48px;
border-top: 1px solid rgba(255,255,255,.08);
}
.contact-client-header {
text-align: center;
max-width: 620px;
margin: 0 auto 32px;
}
.contact-client-subtitle {
color: rgba(255,255,255,.60);
font-size: .98rem;
line-height: 1.8;
margin-top: 10px;
}
.contact-client-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.contact-client-card {
padding: 28px 24px;
border-radius: 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-top-width: 2px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
transition: transform .3s ease, box-shadow .3s ease;
}
.contact-client-card:hover {
transform: translateY(-3px);
}
.contact-client-card h3 {
font-size: 1.02rem;
font-weight: 700;
margin: 0;
}
.contact-client-card p {
color: rgba(255,255,255,.62);
font-size: .90rem;
line-height: 1.65;
flex: 1;
}
.contact-client-card .contact-client-card-hint {
flex: 0 0 auto;
color: rgba(255,255,255,.42);
font-size: .78rem;
line-height: 1.5;
margin-top: -6px;
}
.contact-client-card .modules-cta-link {
margin-top: 6px;
padding: 10px 22px;
font-size: .88rem;
}
.contact-client-card--blue { border-top-color: rgba(var(--header-accent),.65); }
.contact-client-card--cyan { border-top-color: rgba(59,130,246,.65); }
.contact-client-card--purple { border-top-color: rgba(139,92,246,.65); }
.contact-client-card--blue h3 { color: rgba(99,160,255,.90); }
.contact-client-card--cyan h3 { color: rgba(34,211,238,.90); }
.contact-client-card--purple h3 { color: rgba(167,139,250,.90); }
.contact-client-card--blue:hover { box-shadow: 0 14px 38px rgba(var(--header-accent),.08); }
.contact-client-card--cyan:hover { box-shadow: 0 14px 38px rgba(59,130,246,.08); }
.contact-client-card--purple:hover { box-shadow: 0 14px 38px rgba(139,92,246,.08); }
/* ═══════════════════════════════════════════════════════
SECTION EXEMPLES — browser mockup + iframe preview
═══════════════════════════════════════════════════════ */
.exemples-section {
padding: 80px 24px;
max-width: 1100px;
margin: 0 auto;
}
.exemples-header {
text-align: center;
margin-bottom: 56px;
}
.exemples-header .exemples-label {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brand-color);
background: var(--brand-color-soft);
border: 1px solid rgba(var(--header-accent),.25);
border-radius: 999px;
padding: 4px 14px;
margin-bottom: 16px;
}
.exemples-header h2 {
font-family: var(--font-title);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: #fff;
margin-bottom: 12px;
background: none;
box-shadow: none;
}
/* Demande explicite : le titre "Prêt à lancer votre projet ?" du
formulaire de commande (sitevitrine/sitepro/surmesure, partials/
order-form.php) doit hériter de la couleur active, comme les autres
titres de section (même recette que .vitrine-cta h2) — scopé à
.order-form-section pour ne pas toucher l'autre usage de
.exemples-header ("Exemples concrets", resté blanc uni). */
.order-form-section .exemples-header h2 {
background: linear-gradient(100deg, #ffffff 40%, rgba(var(--header-accent),.88) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.exemples-header p {
color: var(--text-muted);
font-size: 1rem;
max-width: 520px;
margin: 0 auto;
}
/* ─── Section #commande générique (cf. partials/account-invite.php) ───
Demande explicite : "chaque page ait un bouton qui ramène au bas de page
(créer un compte)" — réutilise .exemples-header pour le titre/texte (même
composant que les autres CTA du site), seule cette rangée de boutons est
propre à ce bloc.
Cette section est la toute dernière avant le footer sur refonte.php,
audit-site.php, hebergement.php, maintenance.php, programmation.php,
bot-discord.php, accompagnement.php et conseil.php (demande explicite :
"il manque un léger écart bas de page pour le footer") — sans ce
padding-bottom, elle ne réservait pas l'espace du footer flottant
(var(--footer-clearance), même mécanisme que .order-form-section utilisé
sur sitevitrine/sitepro/surmesure). */
.account-invite-section {
padding: 60px 24px var(--footer-clearance);
}
/* Demande explicite : suppression du CTA "créer un compte" séparé
(partials/account-invite.php) sur refonte/audit-site/programmation/
bot-discord/accompagnement/conseil — leur propre "CTA FINAL" (.cw-cta)
devient la toute dernière section de la page et doit donc désormais
réserver lui-même l'espace du footer flottant (var(--footer-clearance)),
ce que .cw-cta ne fait pas par défaut (utilisé aussi sur des pages où il
n'est pas la dernière section, ex. conseilaccompagnement.php). Ciblé par
id plutôt que par classe pour ne pas affecter ces autres usages. */
#rf-cta-final,
#au-cta-final,
#pg-cta-final,
#bd-cta-final,
#acc-cta-final,
#conseil-cta-final {
padding-bottom: var(--footer-clearance);
}
/* ─── Bouton hero "service-hero-cta" (refonte/audit-site/hebergement/
maintenance/programmation/bot-discord/accompagnement/conseil) ───
Demande explicite : "styliser les boutons là pas beau" + "pour le style
des boutons reprends le style de accueil.php" — sans cette classe,
l'icône fusée utilisait par défaut .rocket-icon (64x64px, pensée pour le
hero d'accueil.php), ce qui rendait ce bouton disproportionné. Forme/typo
repris du CTA hero d'accueil.php (.hero-cta-row .btn-primary : majuscules,
letter-spacing, petit rayon de bordure) plutôt que le gros bouton pilule
utilisé sur les offres (essentiel/pro/surmesure). */
.service-hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
border-radius: 8px;
font-family: var(--font-title);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .06em;
}
.service-hero-cta .rocket-icon-wrap {
display: inline-flex;
}
.service-hero-cta .rocket-icon {
width: 18px;
height: 18px;
}
/* Demande explicite : "le texte est collé au dessus du bouton, il faut créer
un écart" (refonte/audit-site/programmation/bot-discord/accompagnement/
conseil) — .cw-hero-tagline a margin:0, donc rien ne séparait le texte du
bouton hero juste en dessous. Ciblé uniquement quand le bouton suit
directement ce tagline (ne touche pas hebergement.php/maintenance.php, où
le bouton suit .heberg-hero-cta-line, déjà bien espacé par son padding). */
.cw-hero-tagline + .service-hero-cta {
margin-top: 24px;
}
.account-invite-actions {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
@keyframes slide-exemples {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% / var(--sets, 2))); }
}
.exemples-slider-wrap {
overflow: hidden;
mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.exemples-track {
display: flex;
gap: 32px;
width: max-content;
animation: slide-exemples var(--slider-speed, 30s) linear infinite;
}
.exemples-track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.exemples-track { animation: none; }
}
/* ─── Bouton "Accélérer le diaporama" ───
Style "fonctionnel" (même logique que .btn-account--functional /
.footer-cta : sobre, bordure fine, fond quasi transparent, typo
majuscule) plutôt qu'un CTA marketing — c'est une commande, pas une
invitation à naviguer. Pas d'icône fusée : par convention du site elle
est réservée aux liens cliquables, pas aux boutons d'action. */
.exemples-controls {
display: flex;
justify-content: center;
margin: 28px 0 0;
}
/* Couleur pilotée par --header-accent (pas --brand-color, demande explicite,
bug signalé : "en couleur auto, le bouton accélérer le diaporama est bleu
au lieu d'orange") — --header-accent est TOUJOURS posé selon la couleur
par défaut de la page active (cf. $_header_accent_map dans
partials/header.php, 'amber' pour sitepro.php), y compris en "Couleur
auto" (aucune préférence explicite du visiteur). --brand-color, lui, n'est
posé que lorsqu'un visiteur a choisi une couleur explicite (cf. classes
.user-accent-* dans header.php) : en mode auto, ce bouton retombait donc
sur le bleu par défaut de :root au lieu de suivre l'ambre de la page. */
.exemples-speed-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: 999px;
background: rgba(255,255,255,.03);
border: 1px solid color-mix(in srgb, rgb(var(--header-accent)) 40%, rgba(255,255,255,.16));
color: rgb(var(--header-accent));
font-family: var(--font-title);
font-weight: 600;
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .06em;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.exemples-speed-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform .15s ease;
}
.exemples-speed-btn:hover {
background: color-mix(in srgb, rgb(var(--header-accent)) 12%, transparent);
border-color: rgb(var(--header-accent));
color: #fff;
}
/* État "maintenu" (clic prolongé / touche enfoncée) : le diaporama tourne
réellement plus vite (cf. main.js), le bouton le confirme visuellement. */
.exemples-speed-btn.is-active {
background: color-mix(in srgb, rgb(var(--header-accent)) 22%, transparent);
border-color: rgb(var(--header-accent));
color: #fff;
transform: scale(.96);
}
.exemples-speed-btn.is-active .exemples-speed-icon {
transform: translateX(2px);
}
.exemple-card {
width: 340px;
flex-shrink: 0;
border-radius: 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
overflow: hidden;
transition: border-color .25s, box-shadow .25s, transform .25s;
}
.exemple-card:hover {
border-color: rgba(var(--header-accent),.4);
box-shadow: 0 16px 40px rgba(var(--header-accent),.12);
transform: translateY(-4px);
}
.browser-chrome {
background: rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.07);
padding: 10px 14px;
display: flex;
align-items: center;
gap: 12px;
}
.browser-dots {
display: flex;
gap: 5px;
flex-shrink: 0;
}
.browser-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
}
.browser-dots span:nth-child(1) { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #ffbd2e; }
.browser-dots span:nth-child(3) { background: #28c840; }
.browser-url {
flex: 1;
background: rgba(255,255,255,.06);
border-radius: 6px;
padding: 4px 10px;
font-size: 0.72rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: monospace;
}
.browser-preview {
width: 100%;
height: 260px;
overflow: hidden;
position: relative;
background: #fff;
}
.browser-preview iframe {
width: 400%;
height: 400%;
border: none;
transform: scale(0.25);
transform-origin: top left;
pointer-events: none;
}
.exemple-card-meta {
padding: 14px 20px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.exemple-card-price {
display: inline-block;
align-self: flex-start;
font-family: var(--font-title);
font-size: 0.85rem;
font-weight: 700;
color: var(--brand-color);
background: var(--brand-color-soft);
border: 1px solid rgba(var(--header-accent),.25);
border-radius: 999px;
padding: 3px 12px;
}
.exemple-card-modules {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.exemple-module-tag {
font-size: 0.72rem;
font-weight: 500;
color: var(--text-muted);
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 6px;
padding: 3px 9px;
white-space: nowrap;
}
.exemple-card-footer {
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.exemple-card-info h3 {
font-family: var(--font-title);
font-size: 1rem;
font-weight: 600;
color: #fff;
margin-bottom: 2px;
}
.exemple-card-info span {
font-size: 0.8rem;
color: var(--text-muted);
}
.exemple-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 600;
color: var(--brand-color);
text-decoration: none;
white-space: nowrap;
transition: gap .2s;
}
.exemple-card-link:hover { gap: 10px; }
/* ─── Avis clients (accueil.php) ─────────────────────────────── */
.reviews-section { padding: 80px 24px var(--footer-clearance); position: relative; }
/* min-width:0 : .reviews-inner est un flex item (parent display:flex en
colonne sur accueil.php/.reviews-section--accueil). Sans ça, sa taille
minimale automatique se cale sur le min-content de .reviews-track
(width:max-content, plusieurs cartes de 340px) MALGRÉ le overflow:hidden
de .reviews-slider-wrap — un classique de flexbox. Résultat sur mobile :
.reviews-inner est forcé plus large que l'écran, et comme html a
overflow-x:clip (pas de scroll horizontal possible), le titre et le
bouton "livre d'or" qu'il contient se retrouvent simplement invisibles,
hors-champ à droite, sans aucun moyen d'y accéder. */
.reviews-inner { max-width: 1100px; width: 100%; min-width: 0; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
/* ─── accueil.php : fond assorti au reste de la page ─── */
/* Le bloc FAQ ajouté après cette section est maintenant la dernière
section de la page (voir .faq-preview-section) : c'est donc lui qui
réserve l'espace du footer flottant, pas cette section-ci. Sans cette
surcharge de padding-bottom, l'espace réservé se retrouvait au milieu
de la page, entre les avis et la FAQ, au lieu d'être tout en bas. */
.reviews-section--accueil {
/* 100dvh (demande explicite), même logique que .why-cta-section :
min-height + flex column + centrage vertical du contenu. */
min-height: 100dvh;
/* demande explicite : réduction de largeur -10%/côté, cf. commentaire
détaillé sur .method plus haut. */
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
/* flex-end (et non plus center) : demande explicite de décaler le
contenu vers le bas de la section plutôt que de le centrer
verticalement. */
justify-content: flex-end;
/* padding-top passé de 30px à la même échelle que les autres sections
"dans le vaisseau" (demande explicite : "contenu trop collé en
haut") : avec justify-content:flex-end, un contenu plus haut que la
section ne bénéficie d'aucun centrage automatique — seul ce
padding-top garantit une vraie respiration sous le nouveau bandeau
.section-sas. */
padding-top: clamp(90px, 10vh, 120px);
padding-bottom: 80px;
overflow: hidden;
/* demande explicite : "uniformise le bg [des 7 sections de la fusée] à
la façon des sites évolutifs construits autour de modules" — reprend
exactement le fond de main .modules, cf. commentaire détaillé sur
.method plus haut. */
background:
radial-gradient(ellipse at 0% 100%, rgba(var(--header-accent),.18) 0%, transparent 45%),
radial-gradient(ellipse at 100% 0%, rgba(var(--header-accent),.10) 0%, transparent 45%),
radial-gradient(ellipse at 50% 50%, rgba(var(--header-accent),.05) 0%, transparent 65%),
repeating-linear-gradient(
0deg,
rgba(255,255,255,.025) 0,
rgba(255,255,255,.025) 1px,
transparent 1px,
transparent 44px
),
repeating-linear-gradient(
90deg,
rgba(255,255,255,.018) 0,
rgba(255,255,255,.018) 1px,
transparent 1px,
transparent 44px
),
rgba(7,10,18,.92);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-top: 1px solid rgba(var(--header-accent),.14);
border-bottom: 1px solid rgba(var(--header-accent),.14);
}
.reviews-section--accueil::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent 0,
transparent 3px,
rgba(0,0,0,.03) 3px,
rgba(0,0,0,.03) 4px
);
pointer-events: none;
z-index: 0;
}
/* ===================== RESPONSIVE MOBILE : FUSÉE PLEINE LARGEUR =====================
Demande explicite : "sur mobile, il faudrait que la fusée colle les bords
du téléphone... adapter la capsule du haut de la fusée en fonction. Le but
est de gagner de l'espace pour le contenu des sections."
Les 7 sections "dans le vaisseau" (#method-heading -> #faq-preview, cf.
commentaire détaillé sur .method plus haut) sont réduites à 90% de largeur
en permanence (10% de marge répartie de chaque côté) pour donner
l'impression que la fusée flotte dans l'espace — un bel effet sur grand
écran, mais qui coûte ~20% de largeur de contenu en trop sur un téléphone,
où chaque pixel compte. Repassées à 100% sous ce breakpoint (fusée collée
aux bords de l'écran, comme demandé) :
- .metal-plate-dome-cap (la capsule, hors section, cf. commentaire détaillé
plus haut) suit avec left/right:0 pour rester exactement alignée avec le
haut de la coque désormais pleine largeur, au lieu de "flotter" en
retrait par rapport à des sections qui ne le sont plus.
- .rocket-hull-edge (coques latérales) et .section-sas (bandeau du sas)
n'ont besoin d'AUCUN ajustement : déjà en position absolute left/right:0
à l'intérieur de chaque section, ils suivent automatiquement la nouvelle
largeur — ils se retrouvent donc collés aux bords réels de l'écran
plutôt qu'à 10% de marge, exactement l'effet recherché, sans perdre le
visuel "coque de vaisseau" qui délimite chaque section. */
@media (max-width: 640px) {
.sol-off,
.problem,
.method,
.why-target,
main .modules,
.reviews-section--accueil,
.faq-preview-section--bg {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.metal-plate-dome-cap {
left: 0;
right: 0;
}
}
/* ─── index.php : la section newsletter ajoutée après les avis devient la
dernière section de la page ; c'est donc elle qui réserve l'espace du
footer flottant (même principe que reviews-section--accueil ci-dessus,
pour accueil.php/faq-preview-section). ─── */
.reviews-section--index { padding-bottom: 80px; }
/* Halo de fond accent-aware (demande explicite : "livre d'or et newsletter
[...] il s'agit de l'ensemble : la couleur d'écriture, le fond (halo),
les // etc" — ces 2 sections d'index.php n'avaient jusqu'ici AUCUN fond
dédié, contrairement à .reviews-section--accueil (accueil.php) qui a
déjà ce même radial-gradient rgba(var(--header-accent)) depuis un tour
précédent. Même halo ici, réutilisé tel quel pour rester cohérent avec
le reste du site. */
.reviews-section--index {
background: radial-gradient(ellipse at 50% 0%, rgba(var(--header-accent), .12) 0%, transparent 55%);
}
/* demande explicite : "enlève le reflet en haut de section [newsletter],
je veux que le bg soit juste l'image de la page" — .newsletter-section
partageait jusqu'ici le même halo que .reviews-section--index ci-dessus ;
il ne doit plus avoir aucun fond propre, seul le fond fixe générique
.site-main::before (bgsite.png) doit transparaître. */
.newsletter-section {
background: none;
}
.reviews-eyebrow, .newsletter-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brand-color);
background: var(--brand-color-soft);
border: 1px solid rgba(var(--header-accent),.25);
border-radius: 999px;
padding: 4px 14px;
margin-bottom: 16px;
}
/* color:#fff en dur -> rgb(var(--title-accent)) (demande explicite
ci-dessus, "la couleur d'écriture" du titre lui-même, pas seulement le
petit "//" devant lui, cf. h2::before tout en haut de ce fichier, déjà
accent-aware) : --title-accent est la variable dédiée aux titres
(cf. h1/h2, .accent-* tout en haut), déjà recalculée pour les 6
couleurs. text-shadow ajouté en plus pour un léger halo lumineux
directement sur le texte, assorti au fond ci-dessus. */
.reviews-title, .newsletter-title {
font-family: var(--font-title);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: rgb(var(--title-accent));
text-shadow: 0 0 24px rgba(var(--title-accent), .35);
margin-bottom: 0;
transition: color .4s ease, text-shadow .4s ease;
}
@keyframes slide-reviews {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% / var(--sets, 2))); }
}
.reviews-slider-wrap {
overflow: hidden;
margin-top: 44px;
mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.reviews-track {
display: flex;
gap: 20px;
width: max-content;
animation: slide-reviews var(--slider-speed, 36s) linear infinite;
}
.reviews-track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.reviews-track { animation: none; }
}
.review-item {
width: 340px;
height: 324px;
flex-shrink: 0;
text-align: left;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 28px 26px 24px;
position: relative;
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: border-color .25s, box-shadow .25s;
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.review-item::before {
content: '\201C';
position: absolute;
top: 6px; right: 18px;
font-size: 80px;
font-family: Georgia, serif;
line-height: 1;
color: var(--brand-color);
opacity: 0.12;
pointer-events: none;
}
/* Pas de transform ici volontairement : combiné à -webkit-line-clamp sur
.review-message (message tronqué à taille fixe), un translateY/scale au
survol faisait réapparaître le texte "agrandi" hors de sa zone tronquée
(bug de rendu webkit line-clamp + transform). Le lift visuel se fait donc
uniquement via bordure/ombre, sans déplacer/transformer la carte. */
.review-item:hover {
border-color: rgba(var(--header-accent),.4);
box-shadow: 0 16px 40px rgba(var(--header-accent),.12);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 6px;
gap: 10px;
}
.review-author { display: flex; align-items: center; gap: 10px; }
.review-avatar {
width: 36px; height: 36px; flex-shrink: 0;
border-radius: 50%;
/* Fond TOUJOURS blanc (demande explicite, même correctif que
.review-card-avatar ci-dessus) — l'initiale reprend --brand-color en
couleur de texte plutôt que le fond. */
background: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; color: var(--brand-color);
text-transform: uppercase;
}
.review-name { font-size: 14px; font-weight: 700; color: #fff; }
.review-rating {
color: #fbbf24;
font-size: 15px;
flex-shrink: 0;
letter-spacing: 1px;
}
.review-date { font-size: 11px; color: var(--text-muted); margin-bottom: 14px; opacity: .7; }
/* Repère discret "avis modifié" (icône crayon + tooltip), accolé à la date
d'un avis via review_edited_badge() (cf. includes/reviews_bootstrap.php) —
n'apparaît que si l'auteur a édité son avis depuis compte-avis.php. */
.review-edited-badge {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
color: rgba(255,255,255,.4);
position: relative;
cursor: help;
vertical-align: middle;
}
.review-edited-badge:hover,
.review-edited-badge:focus-visible { color: rgba(255,255,255,.75); outline: none; }
.review-edited-badge::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: #10131a;
border: 1px solid rgba(255,255,255,.12);
color: #fff;
font-size: .72rem;
font-weight: 600;
white-space: nowrap;
padding: 5px 10px;
border-radius: 8px;
opacity: 0;
visibility: hidden;
transition: opacity .15s ease;
pointer-events: none;
z-index: 20;
}
.review-edited-badge:hover::after,
.review-edited-badge:focus-visible::after { opacity: 1; visibility: visible; }
.review-message {
font-size: .88rem;
color: var(--text-muted);
line-height: 1.65;
border-top: 1px solid rgba(255,255,255,.06);
padding-top: 14px;
margin-top: 2px;
/* Même correctif que .review-card-message (livre-dor.php) : préserve les
retours à la ligne saisis dans le formulaire d'avis. */
white-space: pre-line;
/* Box de taille standardisée (.review-item a une hauteur fixe) : le
message est tronqué à 5 lignes quel que soit sa longueur (même logique
que le diaporama de livre-dor.php) — l'ellipse "…" apparaît
naturellement si ça continue, et toute la carte reste cliquable pour
lire l'avis complet dans le catalogue.
max-height (8.25em = 5 lignes à line-height:1.65) est nécessaire EN PLUS
de -webkit-line-clamp : cet élément est aussi un enfant flex (flex:1)
de .review-item, et flex:1 étire sa hauteur pour remplir tout l'espace
restant de la carte, bien au-delà des 5 lignes — sur certains avis
longs, ce conflit flex/line-clamp laissait le texte réel déborder
("hors zone") sous l'ellipse au lieu d'être masqué.
box-sizing: content-box est indispensable ici : le reset global du
site pose box-sizing:border-box partout (cf. début de ce fichier), ce
qui aurait inclus padding-top (14px) + border-top (1px) DANS les
8.25em de max-height, laissant ~15px de moins que les 5 lignes réelles
— la boîte coupait alors une partie de la 5e ligne / laissait un bout
de ligne suivante à moitié visible sous l'ellipse. En content-box,
max-height ne porte que sur le texte lui-même (padding/bordure
s'ajoutent par-dessus), ce qui fait exactement correspondre la
limite dure avec les 5 lignes que -webkit-line-clamp calcule en
interne, sans aucun bout de ligne visible en trop. */
box-sizing: content-box;
max-height: 8.25em;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Indique explicitement que la carte est cliquable et amène à l'avis complet
dans le catalogue du livre d'or (cf. ?page=X#review-ID) — sans ce repère,
rien ne signalait qu'un clic ouvrait la suite du message tronqué. */
.review-readmore {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 8px;
font-size: .74rem;
font-weight: 600;
color: var(--brand-color);
opacity: .85;
flex-shrink: 0;
transition: opacity .15s ease, transform .15s ease;
}
.review-readmore svg { flex-shrink: 0; }
.review-item:hover .review-readmore { opacity: 1; transform: translateX(3px); }
.reviews-footer { margin-top: 36px; }
.reviews-all-btn { display: inline-flex; }
/* Écart réduit entre le bouton "livre d'or" et le divider rockette juste
en dessous (demande explicite, ajustement répété : le premier passage à
4px restait encore trop grand) : surcharge le margin-top générique
.site-main .section-divider (clamp(18px,3vh,32px), pensé pour les
dividers ENTRE deux sections bien distinctes) qui donnait ici un écart
trop grand entre un bouton et le divider de SA PROPRE section. On retire
aussi le padding-top propre au rocket-wrapper (10px, hérité de la règle
générique .site-main .section-divider .rocket-wrapper) qui ajoutait
encore de l'espace au-dessus de la fusée. */
.site-main .section-divider--faq {
margin-top: -10px;
}
.site-main .section-divider--faq .rocket-wrapper {
padding-top: 0;
}
.reviews-cta {
max-width: 560px;
margin-left: auto;
margin-right: auto;
padding-top: 8px;
}
.reviews-cta-text {
font-size: .95rem;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 20px;
}
.reviews-cta-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.reviews-cta-btn { display: inline-flex; }
/* ─── index.php : section "Newsletter" (après les avis) ─── */
.newsletter-section { padding: 80px 24px var(--footer-clearance); position: relative; }
.newsletter-inner { max-width: 640px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.newsletter-text { font-size: .95rem; color: var(--text-muted); line-height: 1.6; margin: 18px auto 26px; max-width: 520px; }
.newsletter-form { display: flex; justify-content: center; }
.newsletter-hint { font-size: .85rem; color: var(--text-muted); margin-top: 16px; }
.newsletter-hint a { color: var(--brand-color); font-weight: 600; text-decoration: none; }
.newsletter-hint a:hover { text-decoration: underline; }
.newsletter-hint--active { color: #34d399; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.newsletter-hint--active svg { flex-shrink: 0; }
.reviews-see-all-link {
font-size: .82rem;
color: var(--text-muted);
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s;
}
.reviews-see-all-link:hover { color: var(--brand-color); }
@media (max-width: 700px) {
.review-item { width: 260px; }
}
/* ─── Formulaire de commande (pages d'offres) ────────────────── */
/* padding-bottom généreux : la page se termine ici, il faut laisser la
place au footer flottant (variable --footer-clearance, cf. plus haut)
sans qu'il ne recouvre le bouton "Générer mon devis". */
.order-form-section { padding: 60px 24px var(--footer-clearance); }
.order-form-section .container { max-width: 1100px; margin: 0 auto; }
/* ─── Espace compte / admin ──────────────────────────────────── */
/* Même remarque : ces pages se terminent souvent juste après une carte/table,
il faut réserver assez d'espace pour que le footer flottant ne recouvre
jamais le dernier bouton/lien visible en bas de page.
padding-top ramené de 100px à 32px : ce 100px réservait la place du
header flottant (toujours visible en haut de page auparavant). Depuis que
le header reste masqué à l'arrivée sur .account-page et ne réapparaît
qu'au scroll (cf. body:has(main.page-service, main.account-page)
.site-header:not(.visible) plus haut), cette réserve n'a plus lieu
d'être — 32px ne sert plus qu'à garder un peu d'air en haut du titre. */
.account-page { padding: 32px 24px var(--footer-clearance); }
/* Pages compte-*.php (dashboard utilisateur) : header ET mini-footer classique
(sitemap/logo/réseaux sociaux) restent entièrement désactivés (cf.
partials/header.php $_isUserAccountPage), MAIS les widgets flottants
Couleur/Langue, eux, y sont désormais visibles au même titre que sur
admin-*.php (demande explicite : "les sélecteurs de langue et de couleur
en bas de page" sur les pages utilisateur ET admin) — la réserve
var(--footer-clearance) de la règle .account-page ci-dessus reste donc
nécessaire ici aussi (ancien override à 40px retiré, il aurait laissé ces
2 widgets recouvrir le bas du contenu). */
/* ─── Lisibilité renforcée sur tout l'espace compte/admin (textes, liens, boutons) ───
--text-muted est redéfini localement (hérité par tous les descendants de
.account-page) sans toucher sa valeur globale utilisée ailleurs sur le site. */
.account-page { --text-muted: rgba(255,255,255,.85); }
/* Liens "bruts" dans les textes (hints, empty states, alertes) : pas de classe
dédiée, donc ils héritaient sinon de la couleur de lien par défaut du
navigateur — peu lisible et peu cohérent avec la charte. */
.account-page a:not([class]) {
color: #7cb8ff;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(124,184,255,.45);
text-underline-offset: 2px;
transition: color .15s ease;
}
.account-page a:not([class]):hover { color: #fff; text-decoration-color: currentColor; }
/* Boutons "outline" : bordure et fond trop discrets sur fond sombre. */
.btn-account--outline {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.34);
color: #fff;
}
.btn-account--outline:hover {
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.55);
}
/* Liens de la navigation latérale (compte/admin) : légèrement plus lisibles
à l'état inactif, sans changer la logique de surbrillance de l'état actif. */
.account-sidenav-link { color: rgba(255,255,255,.82); }
.account-sidenav-link:hover { color: #fff; }
/* ─── BACKGROUND FIXE (même image que le reste du site) ───
var(--space-bg) plutôt que bgsite.png en dur : ce calque, propre aux
dashboards (.account-page, compte-*.php ET admin-*.php), est peint
PAR-DESSUS .site-main::before (même z-index:0, mais .account-page est
descendant de .site-main dans le DOM donc peint après) — c'est en réalité
LUI qui déterminait le fond visible sur les dashboards, pas
.site-main::before : le corriger séparément était nécessaire pour que le
fond y suive aussi la couleur choisie en Mon profil. */
.account-page::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
var(--space-bg) center / cover no-repeat;
z-index: 0;
/* pointer-events:none AJOUTÉ (correctif) : cette couche décorative fixe
couvre TOUTE la page (inset:0) — contrairement à .account-page::after
juste en dessous (le trou noir), qui l'a déjà, celle-ci ne l'avait
jamais eu. Un pseudo-élément fixed sans pointer-events:none reste
cliquable/tactile par défaut : posé par-dessus toute la page, il
pouvait intercepter des gestes de glissement avant qu'ils n'atteignent
les éléments réels en dessous (ex. le scroll tactile des bandes de
nav du dashboard), tout en laissant passer les simples taps selon le
moteur de rendu — cohérent avec le bug remonté ("le tap marche, pas
le swipe"). Aucun changement visuel : purement décoratif, ne doit de
toute façon jamais intercepter d'interaction. */
pointer-events: none;
}
/* ─── Trou noir de fond, dashboards admin + utilisateur (demande explicite :
"je veux bien un trou noir en fond dépendant de la couleur sélectionnée, en
position fixe peu importe le scroll") ───
Même habillage que .index-hero-black-hole (disque d'accrétion conique
tournant + cœur noir/horizon des événements) et mêmes variables de couleur
--hole-light/-mid/-soft/-base/-glow (déjà posées par .img-accent-* sur
selon la préférence choisie en Mon profil, cf. partials/header.php
$_imgAccentColor — repli bleu par défaut si aucune préférence explicite),
mais posé ici en un seul pseudo-élément ::after (::before est déjà pris par
le fond étoilé ci-dessus) combinant l'anneau ET le cœur noir dans les
mêmes calques de background, et SANS l'animation d'entrée (dézoom lié à
--reveal-delay) propre aux heros publics : toujours visible dès le
chargement, en continu. position:fixed (comme .account-page::before,
PAS absolute) : reste bien à l'écran quel que soit le défilement, plutôt
que de défiler avec le contenu. z-index:0, même contexte d'empilement que
.account-page::before (peint APRÈS lui grâce à l'ordre before/after, donc
visible par-dessus le fond étoilé) et toujours sous le contenu réel
(.account-page > *, z-index:1 plus haut). Discret (alpha réduit sur
chaque calque, PAS de opacity: .5 sur l'élément) : sert d'ambiance de
fond permanente, ne doit jamais gêner la lecture des formulaires/tableaux
par-dessus.
Bug signalé ("le trou noir n'est pas noir, problème d'opacité") : un
`opacity: .5` posé directement sur cet ::after diminuait TOUT l'élément
d'un coup, y compris le cœur radial-gradient(#000...) censé être un vrai
noir plein (horizon des événements) — composité à 50% d'opacité sur le
fond étoilé déjà sombre, il rendait comme un gris/bleu-noir plutôt qu'un
vrai noir. Fix : opacity retirée, alpha de chaque stop du conic-gradient
(l'anneau) ET du box-shadow (la lueur) divisé par 2 pour conserver EXACTEMENT
la même luminosité visible qu'avant (alpha × opacity .5 == alpha/2 × opacity 1)
— seul le cœur #000 (jamais concerné par ces alpha) redevient un noir plein. */
.account-page::after {
content: "";
position: fixed;
top: 50vh;
left: 50vw;
width: clamp(390px, 42vw, 620px);
height: clamp(390px, 42vw, 620px);
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle, #000 0%, #000 40%, rgba(0,0,0,0) 50%),
conic-gradient(
from -20deg,
rgba(255,255,255,0) 0deg,
rgba(var(--hole-mid, 140,190,255),.3) 38deg,
rgba(var(--hole-base, 60,150,255),.34) 68deg,
rgba(var(--hole-light, 200,225,255),.35) 92deg,
rgba(var(--hole-soft, 110,180,255),.18) 118deg,
rgba(255,255,255,0) 152deg,
rgba(255,255,255,0) 222deg,
rgba(var(--hole-soft, 90,170,255),.11) 250deg,
rgba(var(--hole-soft, 90,170,255),.2) 282deg,
rgba(var(--hole-light, 200,225,255),.275) 302deg,
rgba(var(--hole-base, 50,150,255),.2) 320deg,
rgba(255,255,255,0) 360deg
);
box-shadow: 0 0 70px 22px rgba(var(--hole-glow, 80,150,255),.11);
filter: blur(20px);
animation: blackHoleSpin 26s linear infinite;
}
.account-page > * {
position: relative;
z-index: 1;
}
.account-hero { max-width: 1180px; margin: 0 auto 32px; text-align: center; }
.account-hero h1 { font-family: var(--font-title); font-size: clamp(1.5rem, 3vw, 2rem); color: #fff; margin-bottom: 8px; }
.account-hero p { color: var(--text-muted); }
/* ─── Bandeau d'en-tête des pages du dashboard client (compte-*.php +
faq.php) — remplace le titre/sous-titre centrés "flottants" par un
bandeau encadré aligné à gauche, avec une icône reprenant celle du menu
latéral (cf. partials/account-nav.php), pour donner plus de présence
visuelle qu'un simple h1/p. Recolorable via var(--brand-color) /
--brand-color-soft / --brand-color-glow (couleur choisie par le client,
cf. .user-accent-* plus haut dans ce fichier) — même mécanique que le
reste du site pour cette personnalisation.
Sélecteur combiné .account-hero.account-hero--banner (2 classes sur le
même élément) pour garantir la priorité sur .account-hero de base, quel
que soit l'ordre des règles dans ce fichier (cf. le bug de spécificité
rencontré plus tôt cette session avec .section-divider). ─── */
.account-hero.account-hero--banner {
display: flex;
align-items: center;
gap: 20px;
text-align: left;
background: linear-gradient(135deg, var(--brand-color-soft), rgba(255,255,255,.03));
border: 1px solid var(--brand-color-soft);
border-radius: 18px;
padding: 24px 28px;
box-shadow: 0 20px 45px -28px var(--brand-color-glow);
}
.account-hero--banner .account-hero-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: var(--brand-color-soft);
border: 1px solid var(--brand-color-glow);
color: var(--brand-color);
}
.account-hero--banner .account-hero-icon svg { width: 26px; height: 26px; }
/* pages/compte-creer-site.php : icône planète Terre (assets/image/planet-terre.png)
à la place d'un pictogramme SVG générique (demande explicite) — même
traitement circulaire que .offer-planet img sur offres-site.php. */
.account-hero--banner .account-hero-icon img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.account-hero--banner .account-hero-text { min-width: 0; }
.account-hero--banner h1 { text-align: left; margin-bottom: 6px; }
.account-hero--banner p { text-align: left; margin: 0; }
@media (max-width: 640px) {
.account-hero.account-hero--banner { flex-direction: column; align-items: flex-start; padding: 20px; }
}
/* Menu compte/admin splitté en 2 colonnes (gauche + droite), demande
explicite : "travail" à gauche (Tableau de bord/Mes projets côté client,
CroisierWeb/Gestion projets/Outils côté admin), "compte"/gestion à droite
— plus de place par colonne pour agrandir les liens (meilleure
lisibilité). Colonnes agrandies une 1ère fois (220px -> 280px à gauche /
240px à droite, demande explicite "surtout celle travail"), puis une 2e
fois (280px -> 310px à gauche / 240px -> 260px, demande explicite
"agrandit encore la navigation") pour accompagner l'agrandissement des
liens eux-mêmes (.account-sidenav-link) — largeur totale augmentée
d'autant à chaque fois pour que la section centrale (.account-content) ne
rétrécisse pas (reste à 1024px).
Demande explicite suivante : les 2 boutons de la barre du haut
(partials/account-topbar.php) doivent être au même niveau que le titre
de page (.account-hero--banner), à gauche et à droite de celui-ci, et
non plus au-dessus des 2 colonnes de nav. Or .account-hero et
.account-layout sont deux éléments frères directs de (cf. structure commune à toutes les pages
compte-*.php / admin-*.php) : pour que les boutons (contenus dans
.account-layout > partial > .account-topbar) et le titre (.account-hero,
frère de .account-layout) partagent la même ligne de grille, c'est
.account-page lui-même qui doit devenir l'hôte de la grille — .account-layout
ET .account-topbar passent en display:contents (à toutes les tailles
d'écran désormais, plus seulement en mobile comme avant) pour que leurs
descendants (colonnes de nav, contenu, boutons) deviennent des enfants de
grille directs de .account-page, placés explicitement via grid-column/
grid-row plutôt que via l'ordre du DOM. */
.account-page {
max-width: 1650px;
margin: 0 auto;
display: grid;
grid-template-columns: 310px 1fr 260px;
grid-template-rows: auto auto;
gap: 28px;
align-items: start;
/* Distance entre le bord de l'écran et le bord de la grille (demande
explicite : "la NAV reste fixe... peu importe le scroll", boutons du
haut y compris) — la nav et les 2 boutons passent de sticky/grid à
position:fixed ci-dessous, il faut donc recalculer À LA MAIN la
coordonnée horizontale qu'ils occupaient jusqu'ici implicitement via
la grille centrée (max-width:1650px + margin:auto + padding 24px de
.account-page, cf. plus bas dans ce fichier). max() retombe sur 24px
(le padding de .account-page) tant que l'écran fait moins de 1650px
de large, et suit ensuite la marge de centrage réelle au-delà —
reproduisant exactement la position gauche/droite qu'avait la grille,
désormais en position:fixed. */
--dash-edge: max(24px, calc((100vw - 1650px) / 2 + 24px));
}
.account-layout { display: contents; }
/* .account-layout passant en display:contents ci-dessus À TOUTE TAILLE
D'ÉCRAN (et non plus seulement en mobile), ses enfants ne sont plus
sélectionnés par ".account-page > *" (qui ne vise que les enfants
DIRECTS dans l'arbre DOM) et perdent le position:relative + z-index:1
qui les faisait passer au-dessus du fond fixe .account-page::before —
réappliqué explicitement ci-dessous (.account-sidenav-col,
.account-content) et sur .account-topbar-btn plus bas.
grid-column/grid-row ci-dessous n'ont plus d'effet réel depuis le passage
de .account-sidenav-col--left/--right en position:fixed (cf. plus bas) —
un élément hors-flux ignore son placement de grille — mais restent posés
pour documenter la colonne d'origine ; c'est désormais left/right (via
var(--dash-edge)) qui fixe leur position horizontale. */
.account-sidenav-col--left { grid-column: 1; grid-row: 2; }
.account-content { grid-column: 2; grid-row: 2; position: relative; z-index: 1; }
.account-sidenav-col--right { grid-column: 3; grid-row: 2; }
/* Le titre de page (.account-hero--banner) reste un enfant direct de
.account-page (jamais passé en display:contents) : il occupe la colonne
centrale de la 1ère ligne de grille, entre les 2 boutons de la barre du
haut. .max-width/.margin de la règle de base .account-hero (centrage en
bloc classique) sont annulés ici : dans une grille, la largeur/position
sont pilotées par la colonne, pas par des marges automatiques. */
.account-hero.account-hero--banner {
grid-column: 2;
grid-row: 1;
max-width: none;
margin: 0;
}
/* Barre du haut (partials/account-topbar.php) : "Accueil" à gauche, "Mon
profil" à droite — raccourcis en plus des liens déjà présents dans les
colonnes (demande explicite), pas un remplacement.
display:contents ici aussi (desktop) : ses 2 boutons deviennent des
enfants de grille indépendants de .account-page, placés chacun de part
et d'autre du titre (colonnes 1 et 3, même ligne que le titre). Redevient
un vrai conteneur flex en mobile (cf. media query plus bas), où les 2
boutons doivent rester groupés au-dessus du menu. */
.account-topbar { display: contents; }
/* Même habillage "vaisseau spatial" que .account-sidenav ci-dessous et que
les widgets flottants Couleur/Langue (demande explicite : améliorer le
visuel de ces 2 boutons, sans toucher à leur position haut-gauche/
haut-droite ni à leur fonction). background-image/-color remplacent
l'ancien aplat "background" unique — IMPORTANT : :hover/:focus-visible
ci-dessous utilisent donc background-color (pas le raccourci "background")
pour ne pas effacer cette vignette au survol. */
/* position:fixed (demande explicite : "2 boutons y compris" restent fixes
peu importe le scroll) — top:22px reprend le même repère que les autres
éléments flottants "vaisseau spatial" du site (cf. .hud-widget--nav/
--account, top:22px sur les pages publiques). left/right via
var(--dash-edge) (cf. .account-page plus haut) : reproduit la position
horizontale qu'avait la grille (grid-column:1/3 + justify-self start/end),
devenue sans effet sur un élément désormais hors-flux. */
.account-topbar-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
border-radius: 999px;
background-image:
linear-gradient(rgba(var(--header-accent),.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--header-accent),.05) 1px, transparent 1px);
background-size: 14px 14px;
background-color: rgba(var(--header-accent),.035);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(var(--header-accent),.16);
color: #fff;
font-size: 1.02rem;
font-weight: 700;
text-decoration: none;
position: fixed;
top: 22px;
z-index: 5;
box-shadow: 0 10px 26px -18px rgba(0,0,0,.65), 0 0 20px -12px rgba(var(--header-accent),.35);
transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.account-topbar-btn--home { left: var(--dash-edge); }
.account-topbar-btn--profile { right: var(--dash-edge); }
/* Icône en chip, même traitement que .account-sidenav-link svg ci-dessous. */
.account-topbar-btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
padding: 4px;
box-sizing: content-box;
border-radius: 50%;
background: rgba(var(--header-accent),.12);
transition: background .15s ease;
}
.account-topbar-btn:hover {
border-color: rgba(var(--header-accent),.4);
background-color: var(--brand-color-soft);
box-shadow: 0 10px 26px -16px rgba(var(--header-accent),.55), 0 0 0 1px rgba(var(--header-accent),.15);
transform: translateY(-1px);
}
.account-topbar-btn:hover svg { background: rgba(var(--header-accent),.22); }
.account-topbar-btn:focus-visible {
outline: 2px solid rgba(var(--header-accent),.7);
outline-offset: 2px;
border-color: rgba(var(--header-accent),.4);
background-color: var(--brand-color-soft);
}
/* ─── partials/account-topbar.php : switch admin <-> compte utilisateur
(demande explicite) — remplace le bouton "Mon profil" seul UNIQUEMENT
pour un compte admin, dans le même emplacement de grille
(.account-topbar-btn--profile, cf. règle grid-column:3 plus haut,
réutilisée telle quelle sur ce nouveau conteneur).
"position: relative; z-index: 1;" indispensable ici (bug identifié :
bouton invisible, ou visible une fraction de seconde puis masqué) :
.account-topbar-switch est un descendant de .account-layout, passé en
display:contents (cf. plus haut), donc PAS un enfant DIRECT de
.account-page — le sélecteur ".account-page > *" qui élève tout le
reste au-dessus du fond fixe .account-page::before (position:fixed,
z-index:0) ne le vise donc pas. .account-topbar-btn (l'ancien bouton
"Mon profil" seul, remplacé par ce switch pour un compte admin)
réapplique déjà cette élévation explicitement plus haut — il manquait
ici sur son remplaçant. ─── */
/* Même vignette/flou que .account-topbar-btn ci-dessus, pour rester cohérent
visuellement puisque ce switch occupe le même emplacement (compte admin
uniquement) — box-shadow inset d'origine conservée (creuse le fond pour
loger les 2 options), glow externe ajouté en plus. */
.account-topbar-switch {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px;
border-radius: 999px;
background-image:
linear-gradient(rgba(var(--header-accent),.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--header-accent),.05) 1px, transparent 1px);
background-size: 14px 14px;
background-color: rgba(var(--header-accent),.035);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(var(--header-accent),.16);
box-shadow: inset 0 1px 2px rgba(0,0,0,.25), 0 10px 26px -18px rgba(0,0,0,.65), 0 0 20px -12px rgba(var(--header-accent),.35);
/* position:fixed explicite ici aussi (et non hérité de .account-topbar-btn
--profile, qui porte déjà "right: var(--dash-edge)" via sa propre
classe partagée sur cet élément, cf. partials/account-topbar.php) —
évite tout risque d'écrasement par l'ordre des règles dans ce fichier :
top/position doivent rester "fixed"/22px même si cette règle est lue
après celle de .account-topbar-btn. */
position: fixed;
top: 22px;
z-index: 5;
}
.account-topbar-switch-opt {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: 999px;
font-weight: 700;
font-size: .92rem;
color: rgba(255,255,255,.55);
text-decoration: none;
transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.account-topbar-switch-opt svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
.account-topbar-switch-opt:hover {
color: #fff;
background: rgba(var(--header-accent),.14);
}
.account-topbar-switch-opt:active { transform: scale(.96); }
.account-topbar-switch-opt.active {
background: var(--brand-color);
color: var(--brand-color-contrast, #fff);
box-shadow: 0 2px 10px rgba(var(--header-accent),.45);
}
.account-topbar-switch-opt.active svg { opacity: 1; }
.account-topbar-switch-opt:focus-visible {
outline: 2px solid rgba(var(--header-accent),.7);
outline-offset: 2px;
}
/* Habillage "vaisseau spatial" (demande explicite : améliorer le visuel de
la nav, contenu/fonctions/positions inchangés) — même recette que les
widgets flottants Couleur/Langue (cf. .hud-widget) : léger quadrillage en
fond + flou de verre, pour donner de la profondeur à un panneau qui était
jusqu'ici un simple aplat semi-transparent. Padding/gap/border-radius
INCHANGÉS : seule l'habillage visuel change, pas la mise en page.
Teinté à la couleur d'accent choisie (demande explicite suivante :
"ajoutons-y un peu de couleur, en fonction de la sélectionnée") —
rgba(var(--header-accent),...) plutôt que du blanc neutre, comme partout
ailleurs sur ces pages (cf. .account-sidenav-stat, .account-sidenav-cta) ;
dosage volontairement léger ("un peu") pour rester un panneau sombre
discret, pas une carte colorée. */
.account-sidenav {
background-image:
linear-gradient(rgba(var(--header-accent),.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--header-accent),.05) 1px, transparent 1px);
background-size: 16px 16px;
background-color: rgba(var(--header-accent),.035);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(var(--header-accent),.16);
border-radius: var(--radius);
padding: 8px;
display: flex;
flex-direction: column;
gap: 1px;
box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 18px 40px -26px rgba(0,0,0,.65), 0 0 24px -12px rgba(var(--header-accent),.35);
}
/* Colonne "travail" (gauche) — ajusté suite au retour explicite : le gap
uniforme de 9px (précédent tour) créait trop d'espace À L'INTÉRIEUR même
de la nav travail (entre "Tableau de bord", l'étiquette "Mes projets" et
ses 4 liens), alors que l'écart voulu était surtout celui ENTRE les
grandes sections (stats croisierweb -> nav travail -> boutons de
demande). Remis à un gap serré (4px, proche de l'original 1px) pour
l'intérieur de la liste ; l'écart avant le bloc "nav travail" est
recréé À PART juste en dessous, via un margin-top ciblé sur
.account-sidenav-link--big ("Tableau de bord", 1er élément du bloc) —
les écarts stats-banner/CTA (margins déjà posés séparément, hors de ce
conteneur flex) restent inchangés. Seule la colonne de droite (identité/
à propos) garde le gap:1px d'origine, non concernée par la demande. */
.account-sidenav-col--left .account-sidenav { gap: 4px; }
/* Nav gauche/droite en position:fixed (demande explicite : "la NAV reste
fixe... peu importe le scroll de l'utilisateur") — remplace l'ancien
position:sticky, qui pouvait se détacher près du bas de page (cf.
l'ancienne règle body.footer-revealed ci-dessous, supprimée : elle
contredirait maintenant ce comportement). left/right posés séparément sur
.account-sidenav-col--left/--right (cf. plus haut, var(--dash-edge)) pour
reproduire la même position horizontale qu'avant, width explicite
nécessaire (un élément fixed ne reprend plus la largeur de sa colonne de
grille d'origine). top:96px sous les boutons du haut (eux aussi fixed
désormais, cf. .account-topbar-btn plus bas) ; bottom:130px réserve la
place des widgets flottants Couleur/Langue (position:fixed, bottom:22px,
cf. partials/footer.php) — demande explicite "prévoit la place pour les 2
sélecteurs du bas" — top+bottom posés ensemble dimensionnent
automatiquement la hauteur disponible, overflow-y gère le cas où le menu
est plus grand qu'elle. */
.account-sidenav-col {
position: fixed;
/* top augmenté 96px -> 114px (demande explicite : "toujours trop tassé...
Bouton / Ecart / Stats CroisierWeb / Petit écart / Nav travail" — l'écart
sous le bouton "Retour au site"/"Mon profil" était quasi nul). Rendu
possible sans repasser en débordement par la suppression des 2 pastilles
de stats personnelles juste au-dessus (cf. partials/account-nav.php,
demande explicite précédente) : le budget de hauteur libéré par leur
retrait est réinvesti ici plutôt que simplement laissé vide. */
top: 114px;
bottom: 130px;
z-index: 5;
overflow-y: auto;
overflow-x: hidden;
}
.account-sidenav-col--left { left: var(--dash-edge); width: 310px; }
.account-sidenav-col--right { right: var(--dash-edge); width: 260px; }
/* Taille des liens augmentée (.87rem -> .95rem -> 1.05rem, padding + icône
agrandis en conséquence, demandes explicites successives "agrandit
grandement... les 2 barres de nav" puis "agrandit encore la navigation")
— boost supplémentaire pour la colonne gauche ("travail") plus bas via
.account-sidenav-col--left .account-sidenav-link. */
.account-sidenav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 8px;
font-size: 1.05rem;
font-weight: 500;
color: var(--text-muted);
text-decoration: none;
border: 1px solid transparent;
position: relative;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
/* Icône en "chip" (petit fond arrondi autour du pictogramme, demande
explicite d'amélioration visuelle) — padding+box-sizing:content-box pour
ne pas réduire la taille visuelle de l'icône elle-même (width/height
ci-dessous, et surchargés plus bas pour la colonne de gauche, restent la
taille du TRAIT, le padding s'ajoute autour). */
.account-sidenav-link svg {
width: 21px;
height: 21px;
flex-shrink: 0;
padding: 5px;
box-sizing: content-box;
border-radius: 8px;
background: rgba(var(--header-accent),.10);
transition: background .15s ease;
}
/* Survol également teinté (demande explicite "un peu de couleur, en fonction
de la sélectionnée") — remplace les tons blancs neutres d'origine. */
.account-sidenav-link:hover { background: rgba(var(--header-accent),.08); color: #fff; transform: translateX(2px); }
.account-sidenav-link:hover svg { background: rgba(var(--header-accent),.18); }
/* Etat actif : fond teinté existant conservé, + une fine barre d'accent à
gauche et un léger halo (même langage que les cartes de demande
colorées/.account-sidenav-cta) pour repérer la page courante d'un coup
d'oeil, plus nettement qu'un simple changement de fond. */
.account-sidenav-link.active {
background: var(--brand-color-soft);
color: #fff;
border-color: rgba(var(--header-accent),.3);
box-shadow: inset 0 0 0 1px rgba(var(--header-accent),.12), 0 6px 18px -12px rgba(var(--header-accent),.7);
}
.account-sidenav-link.active svg { background: rgba(var(--header-accent),.24); }
.account-sidenav-link.active::before {
content: "";
position: absolute;
left: -1px;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 3px;
background: var(--brand-color);
box-shadow: 0 0 8px var(--brand-color-glow);
}
/* Navigation clavier (Tab) — même logique que .btn-account:focus-visible
ci-dessus, appliquée au menu latéral compte/admin. */
.account-sidenav-link:focus-visible {
outline: 2px solid rgba(var(--header-accent),.7);
outline-offset: 2px;
background: rgba(255,255,255,.05);
color: #fff;
}
/* Boost supplémentaire pour la colonne de gauche ("travail" : Tableau de
bord/Mes projets côté client, CroisierWeb/Gestion projets/Outils côté
admin) — demande explicite "surtout celle travail". Sélecteur combiné
(0,0,2,0) plus spécifique que .account-sidenav-link seul (0,0,1,0) :
l'emporte sans dépendre de l'ordre des règles dans ce fichier.
Revu à la baisse (demande explicite suivante : "adapter la taille de la
NAV travail pour qu'elle ne soit pas trop grande") — depuis son passage
en position:fixed (hauteur d'écran limitée, cf. .account-sidenav-col),
l'agrandissement précédent (1.14rem/16px) la faisait déborder et
nécessiter un défilement interne trop important. Reste malgré tout
légèrement au-dessus de la base (.account-sidenav-link, 1.05rem/14px 16px)
pour conserver un peu de la mise en avant demandée à l'origine. */
.account-sidenav-col--left .account-sidenav-link {
font-size: 1.02rem;
padding: 10px 14px;
}
.account-sidenav-col--left .account-sidenav-link svg { width: 20px; height: 20px; }
.account-sidenav-link--logout { margin-top: 6px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }
/* Harmonisation nav ADMIN gauche/droite (demande explicite : "elle doivent
avoir la meme taille de police (harmonise a la plus petite des 2)") — la
gauche utilisait 1.02rem (liens, règle ci-dessus) / .7rem (étiquettes de
catégorie, taille de base de .account-sidenav-group-label) contre .88rem /
.64rem à droite (cf. .account-sidenav-col--right plus bas) ; on aligne la
gauche sur la droite, la plus petite des deux. Scopé à
.account-sidenav--admin (posé uniquement sur les de
partials/admin-nav.php, cf. commentaire associé) pour ne pas retoucher le
dashboard CLIENT (partials/account-nav.php), qui partage les mêmes classes
de colonne mais n'était pas concerné par la demande. Spécificité (0,0,3,0)
volontairement supérieure à la règle 1.02rem ci-dessus (0,0,2,0) pour
l'emporter sans dépendre de l'ordre des règles dans ce fichier. */
.account-sidenav-col--left .account-sidenav--admin .account-sidenav-link {
font-size: .88rem;
}
.account-sidenav-col--left .account-sidenav--admin .account-sidenav-group-label {
font-size: .64rem;
}
/* Réduction supplémentaire, légère (demande explicite : "réduis très
légèrement la taille de la nav de gauche, elle est un petit poil trop
grande sur Chrome") — depuis le retrait du pliage/dépliage des catégories
(cf. commentaire _admin_nav_label, partials/admin-nav.php), toutes les
catégories restent dépliées en permanence, ce qui allonge le menu et
nécessite un défilement interne sur certains écrans. La colonne gauche
héritait encore du padding/de la taille d'icône "boost" (10px 14px, icône
20px) de .account-sidenav-col--left .account-sidenav-link ci-dessus,
au-delà de la simple taille de police déjà harmonisée sur la droite —
resserré ici pour l'admin uniquement (même sélecteur scopé que
ci-dessus), sans toucher le dashboard CLIENT qui garde son gabarit actuel. */
.account-sidenav-col--left .account-sidenav--admin .account-sidenav-link {
padding: 8px 12px;
gap: 10px;
}
.account-sidenav-col--left .account-sidenav--admin .account-sidenav-link svg {
width: 17px;
height: 17px;
}
/* Colonne de DROITE réduite (demande explicite : "il faudra réduire sa taille
globale pour qu'elle reste visible sur tout les navigateurs entièrement sur
une seule hauteur d'écran") — cette colonne porte presque 2 fois plus de
liens que celle de gauche (profil/abonnements/devis/factures/avis +
livre d'or/à propos/FAQ/CGV + déconnexion), avec la taille de base
(1.05rem/14px 16px) elle dépassait la hauteur disponible sur les écrans
courants et ne restait lisible qu'en scrollant À L'INTÉRIEUR du menu (cf.
overflow-y sur .account-sidenav-col). Resserré nettement plus que la
colonne de gauche (qui n'a que 5 liens) pour tenir sur un seul écran. */
.account-sidenav-col--right .account-sidenav-link {
font-size: .88rem;
padding: 8px 12px;
gap: 10px;
}
.account-sidenav-col--right .account-sidenav-link svg {
width: 16px;
height: 16px;
padding: 4px;
}
.account-sidenav-col--right .account-sidenav-group-label {
font-size: .64rem;
padding: 6px 10px 2px;
}
.account-sidenav-col--right .account-sidenav-divider { margin: 3px 6px; }
/* Enveloppe transparente sur desktop : les liens restent des enfants directs
de la colonne .account-sidenav (mise en page en colonne inchangée). Devient
une vraie bande défilable horizontalement en dessous de 860px. */
.account-sidenav-links { display: contents; }
.account-content { min-width: 0; }
.account-card {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius);
padding: 26px 28px;
margin-bottom: 24px;
}
/* Zone de danger (suppression de compte) : même rouge que status-badge--unpaid. */
.account-card--danger {
border-color: rgba(239,68,68,.28);
}
.account-card--danger h2 {
color: #f87171;
}
/* Confirmation "Vider une table" (pages/admin-tools.php) — corrige un bug où
le formulaire de confirmation restait TOUJOURS visible (demande explicite :
"la confirmation d'action est buggée elle est toujours visible") : le
formulaire portait à la fois l'attribut [hidden] ET un style inline
"display:flex", qui prenait le pas sur la règle [hidden]{display:none} du
navigateur. Le style inline a été retiré du HTML et déplacé ici, appliqué
uniquement quand [hidden] est absent (donc uniquement après clic sur
"Vider", piloté par le script en fin de page).
*/
.db-tool-confirm:not([hidden]) {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.account-card h2 {
font-family: var(--font-title);
font-size: 1.1rem;
color: #fff;
margin-bottom: 16px;
}
.account-card-hint {
font-size: .85rem;
color: var(--text-muted);
line-height: 1.6;
margin: -6px 0 16px;
}
/* ─── COULEUR DE HEADER (Mon profil) ─── */
.color-swatch-group { display: flex; gap: 16px; flex-wrap: wrap; }
.color-swatch-option {
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.color-swatch-option input[type="radio"] { display: none; }
.color-swatch-dot {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.12);
box-shadow: 0 0 0 3px transparent;
transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}
/* ─── pastilles "planète" (demande explicite) : chaque couleur devient une
mini sphère texturée (mêmes visuels que la galaxie d'offres-site.php),
plutôt qu'un simple rond de couleur plat. Ordre affiché : Eau, Terre,
Verte, Violette, Mars, Magma. ─── */
.color-swatch-dot--planet {
width: 44px;
height: 44px;
background-size: cover;
background-position: center;
border-color: rgba(255,255,255,.18);
box-shadow: 0 2px 8px rgba(0,0,0,.5), inset -8px -8px 16px rgba(0,0,0,.55);
}
.color-swatch-dot--planet-eau { background-image: url('../image/planet-bleu.webp'); }
.color-swatch-dot--planet-blanc { background-image: url('../image/planet-blanc.webp'); }
.color-swatch-dot--planet-verte { background-image: url('../image/planet-vert.webp'); }
.color-swatch-dot--planet-violette { background-image: url('../image/planet-violet.webp'); }
.color-swatch-dot--planet-orange { background-image: url('../image/planet-orange.webp'); }
.color-swatch-dot--planet-rouge { background-image: url('../image/planet-rouge.webp'); }
.color-swatch-option:hover .color-swatch-dot { transform: scale(1.08); }
/* Couleur sélectionnée : anneau blanc net + glow + coche, pour qu'elle soit
identifiable en un coup d'œil. Piloté par ":checked" (pas une classe
ajoutée par PHP) pour que l'effet suive immédiatement le clic de
l'utilisateur — y compris AVANT d'enregistrer, sur la couleur qu'il vient
de sélectionner, et pas seulement sur celle déjà enregistrée en base. */
.color-swatch-option input:checked ~ .color-swatch-dot {
border-color: #fff;
box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 14px rgba(255,255,255,.35);
}
.color-swatch-check {
width: 16px;
height: 16px;
color: #fff;
opacity: 0;
transform: scale(.4);
transition: opacity .15s ease, transform .15s ease;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.color-swatch-option input:checked ~ .color-swatch-dot .color-swatch-check { opacity: 1; transform: scale(1); }
.color-swatch-name { font-size: .68rem; color: var(--text-muted); transition: color .15s ease, font-weight .15s ease; }
.color-swatch-option input:checked ~ .color-swatch-name { color: #fff; font-weight: 700; }
/* BUG TROUVÉ (demande explicite : "changer les pastilles de couleur par les
images de planète correspondantes, voir sélecteur de couleur en bas à
gauche des pages" — cf. .hud-color-option/.hud-widget--color dans
partials/footer.php, qui lui affiche bien les planètes) : ces 6 règles
posaient "background" en RACCOURCI, qui réinitialise TOUJOURS
background-image à "none" même quand seule une couleur est précisée — et
avec 2 classes (.color-swatch-option-- .color-swatch-dot), leur
spécificité l'emportait sur .color-swatch-dot--planet-* (1 seule classe,
cf. plus haut), qui pose justement le background-image de la mini-planète.
Résultat : cette page (Mon profil) affichait des pastilles de couleur unie
au lieu des planètes, contrairement au widget bas-gauche qui n'a jamais ce
wrapper "--" et n'était donc pas touché. "background-color" (au
lieu de "background") ne touche QUE la couleur : la planète reprend la
main sur background-image, cette couleur unie ne reste visible qu'en
arrière-plan (utile si l'image tarde à charger / échoue). */
.color-swatch-option--blue .color-swatch-dot { background-color: rgb(10,88,202); }
.color-swatch-option--amber .color-swatch-dot { background-color: rgb(245,158,11); }
.color-swatch-option--emerald .color-swatch-dot { background-color: rgb(16,185,129); }
.color-swatch-option--cyan .color-swatch-dot { background-color: rgb(232,237,245); }
.color-swatch-option--gold .color-swatch-dot { background-color: rgb(24,8,8); }
.color-swatch-option--violet .color-swatch-dot { background-color: rgb(139,92,246); }
/* ─── Pastille "Automatique" (demande explicite : "rajouter une couleur par
défaut (pastille vide)... pour choisir la couleur selon la page pour les
utilisateurs n'ayant pas eux-même choisi une préférence") — contrairement
aux mini-planètes ci-dessus (image de fond), CE disque reste
volontairement creux/transparent (aucune couleur ni texture), pour se
distinguer visuellement au premier coup d'œil comme "aucune couleur
choisie" plutôt qu'une 7e couleur comme les autres. Bordure en tirets
(dashed) plutôt que pleine : renforce cette lecture "vide/neutre".
Utilisée à la fois par la grille Mon profil (.color-swatch-option--auto)
et le widget flottant public (.hud-color-option), les deux réutilisant le
même .color-swatch-dot de base (cf. règles génériques plus haut). ─── */
.color-swatch-dot--empty {
background: transparent;
border: 2px dashed rgba(255,255,255,.45);
box-shadow: none;
}
.color-swatch-option:hover .color-swatch-dot--empty,
.hud-color-option:hover .color-swatch-dot--empty {
border-color: rgba(255,255,255,.7);
}
.color-swatch-option input:checked ~ .color-swatch-dot--empty,
.hud-color-option.is-active .color-swatch-dot--empty {
border-style: solid;
}
/* ─── A2F (double authentification) — Mon profil ─── */
.totp-setup-box {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius);
padding: 16px;
margin-top: 8px;
}
.totp-qr { width: 176px; height: 176px; flex-shrink: 0; background: #fff; border-radius: 10px; padding: 8px; box-sizing: border-box; }
.totp-manual-key { display: flex; flex-direction: column; gap: 6px; }
.totp-manual-key code {
font-size: .82rem;
background: rgba(0,0,0,.35);
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
padding: 8px 10px;
color: #fff;
word-break: break-all;
}
.recovery-codes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
margin-bottom: 18px;
}
.recovery-code {
display: block;
text-align: center;
background: rgba(0,0,0,.35);
border: 1px solid rgba(255,255,255,.10);
border-radius: 8px;
padding: 10px;
font-size: .88rem;
letter-spacing: .04em;
color: #fff;
}
/* ─── Bannière "confirmez votre email" — barre horizontale centrée en haut,
non bloquante. Historique de positionnement (demande explicite,
plusieurs itérations) : d'abord coin bas-droit (chevauchait le widget
flottant Langue, cf. .hud-widget--lang, même coin), puis bas centré,
puis enfin ICI — barre horizontale fixée en haut, centrée entre les
widgets Navigation (haut-gauche) et Mon compte (haut-droite, cf.
.hud-widget--nav/--account), au même top:22px qu'eux pour rester sur
leur ligne. Contenu condensé sur une seule ligne (icône + texte court +
bouton + fermeture) pour tenir dans cet espace, plutôt que la carte
verticale (titre + 3 paragraphes) utilisée quand la bannière visait un
coin — même esprit horizontal que .cookie-banner-inner plus bas dans ce
fichier, transposé dans une pilule flottante plutôt qu'une bande
pleine largeur. */
.email-verify-banner {
position: fixed;
top: 22px;
left: 50%;
transform: translateX(-50%);
z-index: 90;
display: flex;
align-items: center;
gap: 14px;
max-width: calc(100% - 420px);
background: rgba(18, 20, 28, .94);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,.10);
border-top: 3px solid var(--brand-color);
border-radius: 14px;
padding: 12px 16px;
box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
/* Le logo (fichier PNG noir ou blanc) rendait mal sur le fond sombre de la
bannière quel que soit le traitement CSS (filtre, médaillon...) — remplacé
par l'icône roquette (déjà utilisée comme identité sur le site) dans un
badge dégradé couleur de marque, plus simple et net à cette petite taille. */
.email-verify-banner-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 9px;
background: linear-gradient(135deg, var(--brand-color), color-mix(in srgb, var(--brand-color) 70%, #000));
box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-color) 40%, transparent);
color: var(--brand-color-contrast, #fff);
}
.email-verify-banner-icon svg { width: 16px; height: 16px; }
.email-verify-banner-text {
font-size: .82rem;
color: rgba(255,255,255,.85);
line-height: 1.4;
margin: 0;
white-space: nowrap;
}
/* Bouton dédié (plutôt que le .btn-account générique) : dégradé couleur de
marque, légère élévation au survol — pour un CTA plus soigné dans cette
pilule sombre. Compact (largeur au contenu, pas 100% comme dans l'ancienne
carte verticale) pour rester sur une seule ligne avec le texte. */
.email-verify-banner-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-shrink: 0;
padding: 8px 14px;
border-radius: 8px;
background: linear-gradient(135deg, var(--brand-color), color-mix(in srgb, var(--brand-color) 75%, #fff));
color: var(--brand-color-contrast, #fff);
font-size: .78rem;
font-weight: 600;
text-decoration: none;
letter-spacing: .01em;
white-space: nowrap;
box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-color) 35%, transparent);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.email-verify-banner-btn svg { width: 13px; height: 13px; transition: transform .25s ease; }
.email-verify-banner-btn:hover {
transform: translateY(-1px);
filter: brightness(1.08);
box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-color) 45%, transparent);
}
.email-verify-banner-btn:hover svg { transform: translate(3px, -3px) rotate(45deg); }
.email-verify-banner-close {
flex-shrink: 0;
background: none;
border: none;
color: rgba(255,255,255,.35);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
padding: 4px;
}
.email-verify-banner-close:hover { color: rgba(255,255,255,.75); }
@media (max-width: 900px) {
/* En dessous de ~900px, plus assez de place pour tenir centrée entre
Navigation et Mon compte sans les chevaucher (cf. max-width ci-dessus,
calculé pour un desktop large) : repasse sous les 2 widgets du haut,
toujours horizontale mais sur toute la largeur disponible. */
.email-verify-banner { top: auto; bottom: 20px; left: 16px; right: 16px; transform: none; max-width: none; }
.email-verify-banner-text { white-space: normal; }
}
@media (max-width: 480px) {
.email-verify-banner { flex-wrap: wrap; padding: 12px 14px; }
}
/* ─── Bannière de rappel "Ajouter une photo de profil" (partials/header.php)
— même style flottant que .email-verify-banner ci-dessus (jamais
affichées ensemble : la vérification d'email est prioritaire). ─── */
.avatar-reminder-banner {
position: fixed;
top: 22px;
left: 50%;
transform: translateX(-50%);
z-index: 90;
display: flex;
align-items: center;
gap: 14px;
max-width: calc(100% - 420px);
background: rgba(18, 20, 28, .94);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,.10);
border-top: 3px solid var(--brand-color);
border-radius: 14px;
padding: 12px 16px;
box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.avatar-reminder-banner-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 9px;
background: linear-gradient(135deg, var(--brand-color), color-mix(in srgb, var(--brand-color) 70%, #000));
box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-color) 40%, transparent);
color: var(--brand-color-contrast, #fff);
}
.avatar-reminder-banner-icon svg { width: 16px; height: 16px; }
.avatar-reminder-banner-text {
font-size: .82rem;
color: rgba(255,255,255,.85);
line-height: 1.4;
margin: 0;
white-space: nowrap;
}
.avatar-reminder-banner-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-shrink: 0;
padding: 8px 14px;
border-radius: 8px;
background: linear-gradient(135deg, var(--brand-color), color-mix(in srgb, var(--brand-color) 75%, #fff));
color: var(--brand-color-contrast, #fff);
font-size: .78rem;
font-weight: 600;
text-decoration: none;
letter-spacing: .01em;
white-space: nowrap;
box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-color) 35%, transparent);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.avatar-reminder-banner-btn svg { width: 13px; height: 13px; transition: transform .25s ease; }
.avatar-reminder-banner-btn:hover {
transform: translateY(-1px);
filter: brightness(1.08);
box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-color) 45%, transparent);
}
.avatar-reminder-banner-btn:hover svg { transform: translate(3px, -3px) rotate(45deg); }
.avatar-reminder-banner-close {
flex-shrink: 0;
background: none;
border: none;
color: rgba(255,255,255,.35);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
padding: 4px;
}
.avatar-reminder-banner-close:hover { color: rgba(255,255,255,.75); }
@media (max-width: 900px) {
.avatar-reminder-banner { top: auto; bottom: 20px; left: 16px; right: 16px; transform: none; max-width: none; }
.avatar-reminder-banner-text { white-space: normal; }
}
@media (max-width: 480px) {
.avatar-reminder-banner { flex-wrap: wrap; padding: 12px 14px; }
}
.account-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 18px;
margin-bottom: 24px;
}
.account-kpi-card {
position: relative;
overflow: hidden;
display: block;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius);
padding: 20px 22px;
text-decoration: none;
color: inherit;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.account-kpi-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px -16px rgba(0,0,0,.6);
}
/* Reflet lumineux qui balaie la carte au survol (même langage que
.btn-account, cf. plus haut). */
.account-kpi-card::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 45%;
height: 100%;
z-index: 1;
background: linear-gradient(115deg, transparent 0%, rgba(var(--header-accent),.35) 45%, rgba(var(--header-accent),.6) 50%, rgba(var(--header-accent),.35) 55%, transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
}
.account-kpi-card:hover::after {
animation: kpiCardShine 1.5s ease-in-out infinite;
}
@keyframes kpiCardShine {
0% { left: -75%; }
100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
.account-kpi-card:hover::after { animation: none; }
}
/* Petite rockette qui apparaît au survol, en coin bas-droit — reprend le
même esprit "tech/spatial" que .btn-account. */
.account-kpi-rocket {
position: absolute;
right: 16px;
bottom: 14px;
width: 20px;
height: 20px;
z-index: 2;
color: rgb(var(--header-accent));
opacity: 0;
transform: translate(7px, 9px) rotate(-45deg) scale(.4);
transition: opacity .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
pointer-events: none;
}
.account-kpi-rocket svg { display: block; width: 100%; height: 100%; }
.account-kpi-card:hover .account-kpi-rocket {
opacity: 1;
transform: translate(0, 0) rotate(-45deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
.account-kpi-rocket { transform: rotate(-45deg); transition: opacity .2s ease; }
.account-kpi-card:hover .account-kpi-rocket { transform: rotate(-45deg); }
}
.account-kpi-card--profile { display: flex; align-items: center; gap: 14px; }
.account-kpi-card--profile .account-kpi-value { font-size: 1.05rem; }
.account-kpi-card--secondary {
border-color: rgba(var(--accent-harmony-2),.4);
background: rgba(var(--accent-harmony-2),.07);
box-shadow: 0 0 24px rgba(var(--accent-harmony-2),.12);
}
/* ─── Reflets de couleur conditionnels (compte-dashboard.php) : signalent en
un coup d'œil un état qui mérite l'attention du client — rouge pour une
facture impayée, vert pour un site actif, bleu pour un abonnement actif,
orange pour un devis en attente. ─── */
.account-kpi-card--danger {
border-color: rgba(239,68,68,.4);
background: rgba(239,68,68,.07);
box-shadow: 0 0 24px rgba(239,68,68,.12);
}
.account-kpi-card--success {
border-color: rgba(16,185,129,.4);
background: rgba(16,185,129,.07);
box-shadow: 0 0 24px rgba(16,185,129,.12);
}
.account-kpi-card--info {
border-color: rgba(var(--header-accent),.4);
background: rgba(var(--header-accent),.07);
box-shadow: 0 0 24px rgba(var(--header-accent),.12);
}
.account-kpi-card--warning {
border-color: rgba(245,158,11,.4);
background: rgba(245,158,11,.07);
box-shadow: 0 0 24px rgba(245,158,11,.12);
}
.account-kpi-value { font-family: var(--font-title); font-size: 1.7rem; font-weight: 700; color: #fff; }
.account-kpi-label { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }
.account-kpi-hint { font-size: .68rem; color: var(--text-muted); opacity: .75; margin-top: 6px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.data-table th {
text-align: left;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-muted);
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.data-table td { padding: 14px; border-bottom: 1px solid rgba(255,255,255,.06); color: #fff; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .muted { color: var(--text-muted); }
/* Défilement horizontal pour un tableau particulièrement large (ex :
pages/admin-apporteurs.php, 14 colonnes) — sur les autres tableaux du
site (moins de colonnes), pas de wrapper posé donc aucun changement de
comportement ; règle volontairement scopée à .data-table-scroll plutôt
que .data-table directement, pour ne rien changer ailleurs. Complète la
règle mobile existante plus bas (@media max-width:860px), qui ne
s'applique qu'en dessous de 860px : ici le scroll est actif à TOUTE
largeur d'écran dès que le tableau dépasse min-width. */
.data-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 10px;
}
.data-table-scroll .data-table { min-width: 1100px; }
/* Aperçu tronqué + "Voir tout" pour une colonne "Message" pouvant contenir
un texte long (candidatures apporteurs) — évite qu'une seule ligne
n'étire toute la hauteur du tableau. Fermé par défaut, même composant
visuel que .account-request-details ailleurs sur le site. */
.data-table-message-preview { max-width: 220px; }
.data-table-message-preview summary {
cursor: pointer;
color: var(--text-muted);
font-size: .82rem;
}
.data-table-message-preview[open] summary { color: #fff; }
.data-table-message-preview div { margin-top: 6px; white-space: normal; }
.status-badge {
display: inline-block;
font-size: .72rem;
font-weight: 700;
padding: 3px 11px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: .03em;
white-space: nowrap;
}
.status-badge--active, .status-badge--paid, .status-badge--accepted, .status-badge--approved { background: rgba(16,185,129,.14); color: #34d399; }
.status-badge--pending, .status-badge--sent, .status-badge--deploying { background: rgba(251,191,36,.14); color: #fbbf24; }
.status-badge--unpaid, .status-badge--declined, .status-badge--overdue, .status-badge--rejected { background: rgba(239,68,68,.14); color: #f87171; }
.status-badge--invoiced,.status-badge--cancelled,.status-badge--offline,.status-badge--maintenance { background: rgba(255,255,255,.08); color: var(--text-muted); }
/* ─── pages/compte-devis.php + pages/compte-factures.php : "meilleure
présentation" (demande explicite) ───
Remplace le balisage jusqu'ici entièrement en style inline (mêmes 2
pages, code dupliqué) par des classes réutilisables : bande de
statistiques en tête de page (même langage visuel que .account-kpi-card
du dashboard, en version non-cliquable/statique) + carte de document
avec liseré de couleur à gauche reprenant le code couleur déjà en place
sur .status-badge (vert=payé/accepté, orange=en attente, rouge=impayé/
refusé, gris=neutre) — repérage au coup d'oeil sans avoir à lire le
badge de statut. ─── */
.doc-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
/* Même carte que .account-kpi-card (fond quadrillé + accent couleur) mais
sans les affordances de lien (pas de hover-translate ni de fusée) : ces
cartes sont purement informatives, pas cliquables. */
.doc-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 16px;
border-radius: var(--radius);
background-image:
linear-gradient(rgba(var(--header-accent),.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--header-accent),.05) 1px, transparent 1px);
background-size: 16px 16px;
background-color: rgba(var(--header-accent),.035);
border: 1px solid rgba(var(--header-accent),.16);
}
.doc-stat-value { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.15; }
.doc-stat-label { font-size: .78rem; color: var(--text-muted); }
.doc-stat--warning { border-color: rgba(251,191,36,.35); background-color: rgba(251,191,36,.06); }
.doc-stat--warning .doc-stat-value { color: #fbbf24; }
.doc-stat--danger { border-color: rgba(239,68,68,.35); background-color: rgba(239,68,68,.06); }
.doc-stat--danger .doc-stat-value { color: #f87171; }
.doc-stat--success { border-color: rgba(16,185,129,.35); background-color: rgba(16,185,129,.06); }
.doc-stat--success .doc-stat-value { color: #34d399; }
.doc-stat--info { border-color: rgba(96,165,250,.35); background-color: rgba(96,165,250,.08); }
.doc-stat--info .doc-stat-value { color: #60a5fa; }
/* ─── pages/admin-custom-quotes.php : bloc d'actions secondaires repliable
(demande explicite, tâche #33 : "simplifier le formulaire/affichage")
— regroupe les actions les moins fréquentes/plus sensibles (transformer
en projet, annuler, supprimer) derrière un simple , pour que
la carte de demande affiche par défaut l'essentiel (contenu de la
demande + changement de statut + notes) sans la noyer sous 4 formulaires
empilés. Même esprit que .account-request-details déjà utilisé côté
client, décliné ici pour l'admin. ─── */
.doc-card-more { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.doc-card-more summary {
cursor: pointer;
font-size: .82rem;
font-weight: 600;
color: var(--text-muted);
list-style: none;
display: flex;
align-items: center;
gap: 6px;
}
.doc-card-more summary::-webkit-details-marker { display: none; }
.doc-card-more summary::before {
content: "";
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
transition: transform .15s ease;
flex-shrink: 0;
}
.doc-card-more[open] summary::before { transform: rotate(45deg); }
.doc-card-more summary:hover { color: #fff; }
.doc-card-more-body { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.doc-card--info::before { background: #60a5fa; }
.doc-card {
position: relative;
background: rgba(255,255,255,.02);
border-radius: var(--radius);
margin-bottom: 14px;
padding: 20px 22px 20px 26px;
/* Liseré de statut : posé en ::before plutôt qu'un border-left direct,
pour garder le border-radius intact sur les 4 coins (un border-left
classique casse l'arrondi du coin haut/bas-gauche). */
overflow: hidden;
}
.doc-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: rgba(255,255,255,.15);
}
.doc-card--success::before { background: #34d399; }
.doc-card--warning::before { background: #fbbf24; }
.doc-card--danger::before { background: #f87171; }
.doc-card--muted { opacity: .85; }
.doc-card-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
.doc-card-ref { color: #fff; font-size: 1.02rem; }
.doc-card-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-card-items { margin-bottom: 10px; }
.doc-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.doc-card-foot--sm { font-size: .9rem; }
.doc-card-total { color: #fff; }
.doc-card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.doc-card-extra {
margin-top: 14px;
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 14px;
}
/* Cartes "Demandes clients" (pages/admin-custom-quotes.php, demande
explicite : "rends les demandes plus visibles pour que les infos
essentiels soient lisibles facilement") — le titre du projet passait
inaperçu (simple , même gabarit que le reste du texte) et les
infos clé (budget, domaine, contenu fourni, type de projet, créneau...)
s'empilaient en lignes de texte fines et peu contrastées, difficiles à
distinguer les unes des autres. Le titre devient un vrai nettement
plus grand ; les infos clé deviennent des puces (fond + bordure, label
discret + valeur blanche en gras) affichées en ligne, qui se détachent
clairement du reste de la carte. */
.quote-card-title {
margin: 2px 0 12px;
color: #fff;
font-size: 1.18rem;
font-weight: 700;
line-height: 1.3;
}
.quote-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.quote-card-meta-chip {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 6px 12px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.10);
border-radius: 8px;
font-size: .82rem;
line-height: 1.3;
}
.quote-card-meta-chip-label { color: var(--text-muted); }
.quote-card-meta-chip-value { color: #fff; font-weight: 600; }
/* Message du client : mis dans un encart dédié (fond légèrement plus clair
que la carte) pour le distinguer visuellement des infos structurées
ci-dessus, plutôt qu'un simple paragraphe qui se fondait avec le reste. */
.quote-card-message {
padding: 12px 14px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px;
color: rgba(255,255,255,.82);
white-space: pre-line;
line-height: 1.5;
margin-bottom: 12px;
}
.quote-card-message--empty {
font-style: italic;
color: var(--text-muted);
background: none;
border: none;
padding: 0;
}
.quote-card-date { font-size: .78rem; color: var(--text-muted); margin-bottom: 14px; }
/* Formulaire de confirmation d'annulation (bug corrigé : un style inline
"display:flex" posé directement sur le