/* Outfit et Inter sont chargés via dans le des
pages HTML. Un @import ici bloquerait le rendu (chaîne CSS → CSS → police). */
/* =============================================================================
DASHYZ — Feuille de style unique
Direction artistique « GLACIER ÉMERAUDE »
L'univers vient d'une seule image : une carrosserie vert émeraude métallisé
posée sur un lac gelé, sous un ciel de nuit. Trois matières en sortent, et
tout le site ne joue que de celles-là :
· l'ÉMERAUDE — la peinture. Lumière, accent, aurore. Jamais du texte
courant : c'est la couleur qui désigne.
· le GRAPHITE — la nuit et l'asphalte. Toutes les surfaces.
· la GLACE — le lac. Le texte, les bordures, les fractures, le chrome.
Une quatrième, l'AMBRE du phare, n'apparaît que deux fois sur toute la page :
le halo du héros et le marqueur « à compléter ». Une couleur chaude qui sert
partout ne sert plus à rien.
Site vitrine — HTML/CSS/JS purs, aucune dépendance hors Google Fonts.
SOMMAIRE
1. Tokens (:root)
2. Reset moderne
3. Typographie de base
4. Primitives (container, section, kicker, grid, card, btn, badge, icon,
reveal, sr-only, skip-link, placeholder)
5. Décors — aurore, grain, arêtes chromées
6. En-tête (bandeau d'annonce, header en pastille de verre, nav, burger)
7. Héros (vidéo de fond, scrim, socle de chiffres)
8. Bande de confiance (marquee)
9. Défis → Solutions
10. Offres + tableau comparatif
11. Secteurs
12. Bande de chiffres clés
13. Systèmes
14. Méthodologie (onglets + timeline)
15. Témoignages
16. Garanties
17. Ressources
18. CTA final
19. Footer + bouton WhatsApp flottant
20. Formulaire de contact
21. Utilitaires
22. Responsive — mobile first : 480 / 768 / 1024 / 1280
23. Mouvement réduit, contraste forcé et impression
============================================================================= */
/* =============================================================================
1. TOKENS
============================================================================= */
:root {
/* --- SURFACES ------------------------------------------------------------
Cinq profondeurs de nuit. L'écart entre deux niveaux voisins est faible
par choix : sur un fond sombre, c'est la bordure claire qui découpe les
plans, pas l'écart de fond. Empiler des gris trop contrastés fabrique
des « boîtes », pas de la profondeur. */
--void: #050908; /* le plus profond — pied de page, socles */
--graphite: #0B1210; /* fond de page */
--night: #0E1714; /* sections alternées */
--slate: #131F1A; /* cartes */
--slate-2: #18271F; /* cartes survolées, champs de formulaire */
--ridge: #22332B; /* bordures pleines */
/* --- ÉMERAUDE — la carrosserie ------------------------------------------
Les quatre teintes de marque (700/500/300/200) sont conservées à
l'identique : c'est l'identité Dashyz, reprise de l'application. Les
autres sont des extensions calculées pour le fond sombre. */
--em-950: #0A1F16;
--em-900: #16342A; /* marque */
--em-800: #1B4433;
--em-700: #1F6E4F; /* marque — accent */
--em-600: #2C8360;
--em-500: #2F8D66; /* marque */
--em-400: #46B085;
--em-300: #62B594; /* marque */
--em-200: #A7D8C1; /* marque */
--em-100: #D7EDE3;
/* --- GLACE --------------------------------------------------------------- */
--ice-050: #F2F7F5;
--ice-100: #E8F0ED;
--ice-200: #C9D8D3;
--ice-300: #A3B8B2;
/* --- CHROME et PHARE ------------------------------------------------------ */
--chrome-hi: rgba(255, 255, 255, .10); /* arête supérieure des surfaces */
--amber: #E9B57C;
--amber-lt: #F3D6B4;
/* --- TEXTE ---------------------------------------------------------------
Quatre niveaux, et un seul rôle chacun. Aucun ne descend sous 4,5:1 sur
--graphite, sauf --fg-4 qui n'habille jamais du texte. */
--fg: #E8F0ED; /* 15,9:1 — titres et corps */
--fg-2: rgba(232, 240, 237, .72); /* 8,0:1 — corps secondaire */
--fg-3: rgba(232, 240, 237, .56); /* 5,4:1 — méta, légendes */
--fg-4: rgba(232, 240, 237, .30); /* décor seul : filets, séparateurs */
/* Texte sur fond clair (tuiles de logos, boutons ivoire) */
--fg-inv: #08110E;
/* --- VERRE ---------------------------------------------------------------
Le vocabulaire du modèle : surfaces translucides, arête claire au-dessus,
flou d'arrière-plan. C'est ce qui fait tenir une carte sur une image. */
--glass: rgba(255, 255, 255, .040);
--glass-2: rgba(255, 255, 255, .065);
--glass-bd: rgba(255, 255, 255, .085);
--glass-bd-2:rgba(255, 255, 255, .150);
--blur: 18px;
/* --- ACCENTS DÉRIVÉS ------------------------------------------------------ */
--em-soft: rgba(47, 141, 102, .12);
--em-soft-2: rgba(47, 141, 102, .22);
--em-line: rgba(98, 181, 148, .30);
--focus: #A7D8C1;
/* Marqueur de contenu à compléter — l'ambre du phare, second et dernier
emploi. Impossible à manquer sans casser la page. (Les alphas sont écrits
en dur : `rgba()` n'accepte pas de variable dans ses canaux.) */
--ph-bg: rgba(233, 181, 124, .13);
--ph-bd: rgba(233, 181, 124, .55);
--ph-fg: var(--amber-lt);
/* WhatsApp (couleur de marque tierce, non négociable) */
--wa: #25D366;
--wa-h: #1EBE5A;
/* --- TYPOGRAPHIE ---------------------------------------------------------
Outfit pour l'affichage : géométrique, large, resserrable très fort sans
se fermer — la lecture « ingénierie » que l'image appelle.
Inter pour tout le reste. */
--ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--ff-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--fs-display: clamp(2.5rem, 5.6vw, 4.75rem); /* h1 du héros seulement */
--fs-h1: clamp(2.15rem, 4.4vw, 3.5rem);
--fs-h2: clamp(1.85rem, 3.3vw, 2.875rem);
--fs-h3: 1.3125rem;
--fs-h4: 1.0625rem;
--fs-body: 1.0625rem;
--fs-sm: .9375rem;
--fs-xs: .8125rem;
--fs-kicker: .75rem;
--lh-body: 1.7;
--lh-title: 1.08;
--ls-display: -.038em; /* Outfit supporte un resserrage très marqué */
--ls-title: -.028em;
--ls-kicker: .16em;
/* --- ESPACEMENT (échelle 4 px) ------------------------------------------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--sp-9: 96px; --sp-10: 128px;
/* --- RAYONS ---------------------------------------------------------------
Le modèle travaille en grands rayons : 26 px pour une carte, 48 px pour un
bloc de héros, 999 px pour tout ce qui se clique. On garde cette échelle. */
--r-xs: 8px;
--r-sm: 12px;
--r: 16px;
--r-lg: 22px;
--r-xl: 28px;
--r-2xl: 40px;
--r-full: 999px;
/* --- PROFONDEUR -----------------------------------------------------------
Sur fond sombre une ombre portée ne se voit pas : ce qui crée le relief,
c'est l'arête claire au-dessus de la surface. Chaque niveau combine donc
un liseré interne et une ombre large et très douce. */
--sh-1: inset 0 1px 0 var(--chrome-hi), 0 2px 6px rgba(0, 0, 0, .34);
--sh-2: inset 0 1px 0 var(--chrome-hi), 0 14px 34px -14px rgba(0, 0, 0, .70);
--sh-3: inset 0 1px 0 var(--chrome-hi), 0 34px 70px -22px rgba(0, 0, 0, .82);
/* --- MOUVEMENT ------------------------------------------------------------ */
--t: 240ms cubic-bezier(.4, 0, .2, 1);
--t-fast: 160ms cubic-bezier(.4, 0, .2, 1);
--t-slow: 640ms cubic-bezier(.16, 1, .3, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
/* --- MATIÈRES -------------------------------------------------------------
Le grain casse le banding des grands dégradés : sans lui, un fond sombre
étiré sur 900 px affiche des bandes visibles sur la plupart des écrans. */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
/* --- GABARIT --------------------------------------------------------------- */
/* --- Habillage du héros épinglé -------------------------------------------
Écrits par main.js §10 au rythme du défilement. Les valeurs ci-dessous
sont celles du premier écran : sans JavaScript, le héros reste donc
lisible et immobile, ce qui est exactement le bon comportement. */
--hero-foot: 96px; /* respiration au pied de la scene */
--hero-fade: 1; /* opacité du bloc de titre */
--hero-rise: 0px; /* son élévation */
--hero-dim: 0; /* extinction de la scène en fin de course */
--container: 1240px;
--gutter: 22px;
--header-h: 76px;
/* Hauteur réellement occupée par l'en-tête flottant (sa marge + sa pastille).
C'est cette valeur, et pas `--header-h`, que le héros remonte pour passer
dessous : se tromper de quelques pixels ici décale toute la page. */
--header-block: 74px;
}
/* =============================================================================
2. RESET MODERNE
============================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Compense l'en-tête collant pour toutes les ancres */
scroll-padding-top: calc(var(--header-h) + 28px);
background: var(--graphite);
color-scheme: dark;
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol { margin: 0; }
ul[class],
ol[class] {
padding: 0;
list-style: none;
}
body {
min-height: 100vh;
font-family: var(--ff);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg);
/* TRANSPARENT, et c'est essentiel : le fond de page est la vidéo (§5 bis),
posée en `position: fixed` derrière tout le document. Un fond opaque ici
la masquerait entièrement. La couleur de repli est portée par , qui
la propage au canevas — elle reste donc visible si la vidéo est absente,
refusée ou en échec. */
background: var(--graphite);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
/* Chiffres à chasse fixe : évite que les compteurs animés fassent
sautiller la mise en page à chaque incrément. */
font-variant-numeric: tabular-nums lining-nums;
}
/* Le grain de la page entière, posé une seule fois, non cliquable.
Volontairement SANS `mix-blend-mode`. Une couche fixe qui couvre l'écran et
se mélange à ce qu'il y a dessous oblige le navigateur à recomposer toute la
page à chaque image de défilement — c'était la première cause de saccade du
héros. Un simple aplat très peu opaque rend presque la même chose pour un
coût nul. Le grain mélangé subsiste sur le héros seul (`.hero__grain`), où
la surface est petite et ne défile pas. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 9;
pointer-events: none;
background-image: var(--grain);
opacity: .022;
}
/* --- Garde-fous anti-chevauchement et anti-débordement ---------------------
Un mot très long (URL, e-mail, nom composé) ne doit jamais sortir de son
conteneur ni pousser une colonne au-delà de la largeur de l'écran. */
p, li, h1, h2, h3, h4, dt, dd, td, th, label, blockquote, figcaption, span {
overflow-wrap: break-word;
}
/* Équilibre des titres sur plusieurs lignes (évite le mot orphelin) et
des paragraphes (évite la dernière ligne d'un seul mot). */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
img,
picture,
video,
svg {
max-width: 100%;
display: block;
}
img { height: auto; }
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button { background: none; border: 0; }
a { color: inherit; }
hr {
border: 0;
border-top: 1px solid var(--ridge);
margin: var(--sp-7) 0;
}
/* Barre de défilement accordée au fond, sinon elle troue la page en blanc. */
* {
scrollbar-color: var(--ridge) transparent;
scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
background: var(--ridge);
border-radius: var(--r-full);
border: 2px solid var(--void);
}
::-webkit-scrollbar-thumb:hover { background: var(--em-800); }
::selection {
background: var(--em-500);
color: var(--ice-050);
}
/* --- Focus ---------------------------------------------------------------
Un seul anneau pour tout le site : la glace, jamais l'émeraude. Sur fond
sombre, l'émeraude sur un bouton émeraude serait invisible. */
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }
/* Sur les tuiles claires (logos clients, boutons ivoire), l'anneau bascule. */
.logo-ph--real :focus-visible,
.btn--white:focus-visible,
.btn--secondary:focus-visible {
outline-color: var(--em-700);
}
/* =============================================================================
3. TYPOGRAPHIE DE BASE
============================================================================= */
h1, h2, h3, h4 {
font-family: var(--ff-display);
font-weight: 600;
line-height: var(--lh-title);
letter-spacing: var(--ls-title);
color: var(--fg);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -.018em; }
h4 { font-size: var(--fs-h4); line-height: 1.4; letter-spacing: -.012em; font-weight: 600; }
strong, b { font-weight: 600; color: var(--fg); }
sup { font-size: .68em; vertical-align: super; line-height: 0; }
/* --- Prose (mentions légales) --------------------------------------------- */
.prose {
max-width: 74ch;
color: var(--fg-2);
}
.prose > h2 {
margin-top: var(--sp-8);
padding-top: var(--sp-6);
border-top: 1px solid var(--ridge);
margin-bottom: var(--sp-4);
font-size: 1.75rem;
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose > h3 {
margin-top: var(--sp-6);
margin-bottom: var(--sp-3);
color: var(--em-200);
}
.prose > p { margin-bottom: var(--sp-4); }
.prose > p:last-child { margin-bottom: 0; }
.prose strong { color: var(--fg); }
.prose ul,
.prose ol {
margin: 0 0 var(--sp-4);
padding-left: 1.35em;
list-style: disc;
}
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--em-400); }
.prose li + li { margin-top: var(--sp-2); }
.prose .card { margin-bottom: var(--sp-5); }
.prose .card dl { display: grid; gap: var(--sp-1); }
/* Liens de texte courant : soulignés, jamais « couleur seule ». */
.prose a:not([class]),
.section p a:not([class]) {
color: var(--em-200);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--t-fast);
}
.prose a:not([class]):hover,
.section p a:not([class]):hover { color: var(--em-100); }
/* =============================================================================
4. PRIMITIVES
============================================================================= */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* --- Sections -------------------------------------------------------------
Trois profondeurs seulement. `--muted` et `--dark` existaient dans la
version claire ; on les garde pour ne rien casser côté HTML, mais ils
désignent maintenant des nuits différentes, pas un clair et un foncé. */
/* --- La densité des voiles -------------------------------------------------
Toutes les sections sont VOILÉES, jamais opaques : la vidéo court derrière
tout le site et doit rester perceptible. L'opacité de chaque voile est
dictée par la densité de lecture, et par rien d'autre :
· beaucoup de texte courant → voile dense, la vidéo n'est plus qu'une
présence (défis, offres, secteurs, systèmes, ressources, mentions) ;
· peu de texte, gros calibre → voile léger, la vidéo respire vraiment
(chiffres clés, appel final, en-têtes de page) ;
· le héros → aucun voile de section, la vidéo est nue.
Les cartes posent une seconde couche par-dessus (`.card`, `.offer`…) : c'est
elle qui garantit le contraste du corps de texte. Le voile de section ne
protège que les chapeaux, qui sont en gros calibre. */
.section {
position: relative;
padding-block: clamp(var(--sp-8), 8vw, var(--sp-10));
background: var(--graphite);
}
.section--muted { background: var(--night); }
/* `--dark` désigne maintenant les FENÊTRES : les bandes où l'on ouvre sur la
vidéo au lieu de la couvrir. Le nom vient de la version claire du site ; on
le garde pour ne pas avoir à toucher les trois pages. */
.section--dark {
background: var(--void);
color: var(--fg);
}
/* Filet de séparation : une arête de glace, pas un trait gris.
Les deux bandes qui portent déjà leur propre décor (§5) en sont exclues :
elles n'ont qu'un `::before` chacune, et il leur sert aux fractures. */
.section:not(.stats-band):not(.cta-final)::before {
content: "";
position: absolute;
inset-inline: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--glass-bd) 18%,
var(--em-line) 50%,
var(--glass-bd) 82%,
transparent);
pointer-events: none;
}
/* --- Chapeaux ------------------------------------------------------------- */
.section__head {
max-width: 760px;
margin: 0 auto clamp(var(--sp-7), 5vw, var(--sp-9));
text-align: center;
}
.section__head--left {
margin-inline: 0;
text-align: left;
}
.kicker {
display: inline-flex;
align-items: center;
gap: .6em;
margin-bottom: var(--sp-6);
font-family: var(--ff);
font-size: var(--fs-kicker);
font-weight: 600;
letter-spacing: var(--ls-kicker);
text-transform: uppercase;
color: var(--em-300);
}
/* Le tiret d'amorce du kicker — l'arête lumineuse en miniature. */
.kicker::before {
content: "";
width: 26px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--em-400));
flex: none;
}
.section__head--left .kicker::before { display: none; }
/* `--light` était nécessaire quand le site était clair. Sur fond de nuit
partout, il n'a plus rien à inverser : on le neutralise sans le retirer,
pour ne pas avoir à toucher les trois pages. */
.kicker--light { color: var(--em-300); }
.section__title {
font-family: var(--ff-display);
font-size: var(--fs-h2);
font-weight: 600;
line-height: var(--lh-title);
letter-spacing: var(--ls-title);
color: var(--fg);
}
.section__sub {
max-width: 62ch;
margin: var(--sp-5) auto 0;
font-size: 1.0625rem;
color: var(--fg-2);
}
.section__head--left .section__sub { margin-inline: 0; }
/* --- Grilles --------------------------------------------------------------
`auto-fit` + `minmax` : les cartes se réorganisent seules, sans point de
rupture à maintenir. Le nombre dans le nom de classe est un maximum, pas
une contrainte. */
.grid {
display: grid;
gap: var(--sp-5);
grid-template-columns: 1fr;
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
/* --- Cartes de verre ------------------------------------------------------
La brique de base de tout le site : surface translucide, arête chromée en
haut, bordure de glace. Trois propriétés, et une carte tient sur n'importe
quel fond, y compris sur la vidéo. */
.card {
position: relative;
padding: clamp(var(--sp-5), 3vw, var(--sp-7));
border-radius: var(--r-xl);
/* Translucide, pas opaque : la vidéo doit se deviner jusque dans les cartes.
À 88 % le corps de texte reste au-dessus de 12:1 quelle que soit l'image
derrière — c'est cette couche qui porte la garantie de contraste, pas le
voile de section. */
background: var(--slate);
border: 1px solid var(--glass-bd);
box-shadow: var(--sh-1);
color: var(--fg-2);
}
.card > :last-child { margin-bottom: 0; }
.card h2,
.card h3,
.card h4 { color: var(--fg); }
.card--hover {
cursor: default;
transition:
transform var(--t) var(--ease-out),
border-color var(--t),
background var(--t),
box-shadow var(--t);
}
.card--hover:hover,
.card--hover:focus-within {
transform: translateY(-4px);
background: var(--slate-2);
border-color: var(--glass-bd-2);
box-shadow: var(--sh-2);
}
/* Le halo émeraude qui monte au survol — sous la carte, jamais au-dessus. */
.card--hover::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity var(--t);
background: radial-gradient(120% 80% at 50% 0%, var(--em-soft), transparent 62%);
}
.card--hover:hover::after,
.card--hover:focus-within::after { opacity: 1; }
/* --- Boutons --------------------------------------------------------------
Deux niveaux seulement, plus un fantôme. Au-delà, on ne sait plus lequel
est l'action principale. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 13px 24px;
border: 1px solid transparent;
border-radius: var(--r-full);
font-family: var(--ff);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: -.005em;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
transform var(--t-fast) var(--ease-out),
box-shadow var(--t),
background var(--t),
border-color var(--t),
filter var(--t);
}
.btn:active { transform: translateY(1px); }
.btn .icon {
width: 18px;
height: 18px;
flex: none;
}
/* La flèche qui avance au survol. Un seul détail, sur tous les boutons. */
.btn__arrow {
display: inline-block;
transition: transform var(--t) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(3px); }
/* Principal — la peinture. Le dégradé descend vers le vert sombre : c'est
l'extrémité basse qui garantit le contraste du texte blanc (4,65:1). */
.btn--primary {
background: linear-gradient(180deg, var(--em-600) 0%, #1A5F45 100%);
color: #FFFFFF;
border-color: rgba(167, 216, 193, .22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .16),
0 10px 26px -10px rgba(47, 141, 102, .70);
}
.btn--primary:hover {
filter: brightness(1.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .2),
0 16px 36px -12px rgba(47, 141, 102, .85);
}
/* Secondaire et ivoire — le chrome. Même objet, deux noms conservés du HTML. */
.btn--secondary,
.btn--white {
background: linear-gradient(180deg, #FFFFFF 0%, var(--ice-100) 100%);
color: var(--fg-inv);
border-color: rgba(255, 255, 255, .5);
box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .8);
}
.btn--secondary:hover,
.btn--white:hover {
background: #FFFFFF;
box-shadow: 0 16px 34px -12px rgba(232, 240, 237, .34);
}
/* Fantôme — le verre. Sans flou d'arrière-plan : ce bouton est posé sur la
vidéo du héros, où le flou serait recalculé à chaque image décodée. Un aplat
sombre translucide garantit en plus la lisibilité du libellé quelle que soit
l'image derrière — ce qu'un simple voile clair ne fait pas. */
.btn--ghost-light {
background: rgba(16, 27, 22, .56);
color: var(--fg);
border-color: var(--glass-bd-2);
}
.btn--ghost-light:hover {
background: rgba(24, 39, 31, .74);
border-color: var(--em-line);
}
.btn--lg {
padding: 16px 30px;
font-size: 1rem;
}
.btn--block {
display: flex;
width: 100%;
}
/* --- Badges --------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 7px 14px;
border-radius: var(--r-full);
background: var(--glass);
border: 1px solid var(--glass-bd);
font-size: var(--fs-xs);
font-weight: 500;
line-height: 1.4;
color: var(--fg-2);
/* Pas de flou d'arrière-plan : quatre de ces badges sont posés sur la vidéo
du héros, chacun redemandant un calcul à chaque image décodée. */
}
.badge .icon { width: 15px; height: 15px; color: var(--em-300); }
/* La coche des badges du héros, dessinée en CSS : pas de SVG à charger,
et elle reste nette à toutes les tailles. */
.badge--check::before {
content: "";
width: 15px;
height: 15px;
flex: none;
border-radius: var(--r-full);
background:
linear-gradient(140deg, var(--em-400), var(--em-700));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.2' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.2' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
position: relative;
}
.badge--check {
color: var(--fg);
position: relative;
}
/* Le V blanc par-dessus la pastille. */
.badge--check::after {
content: "";
position: absolute;
left: 18px;
top: calc(50% - 4px);
width: 7px;
height: 4px;
border-left: 1.7px solid #FFFFFF;
border-bottom: 1.7px solid #FFFFFF;
transform: rotate(-45deg);
pointer-events: none;
}
/* --- Icônes --------------------------------------------------------------- */
.icon {
width: 20px;
height: 20px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* La pastille d'icône : un disque de verre cerclé de chrome, avec une lueur
émeraude au centre. C'est le motif qui revient sur secteurs, systèmes et
garanties — un seul objet, trois emplois. */
.icon--box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex: none;
border-radius: var(--r);
background:
radial-gradient(100% 100% at 50% 0%, rgba(70, 176, 133, .22), transparent 70%),
var(--glass-2);
border: 1px solid var(--glass-bd-2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
color: var(--em-200);
transition: color var(--t), border-color var(--t), box-shadow var(--t);
}
.icon--box .icon,
.icon--box > svg {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
}
.card--hover:hover .icon--box,
.card--hover:focus-within .icon--box {
color: var(--em-100);
border-color: var(--em-line);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .2),
0 0 26px -6px rgba(47, 141, 102, .6);
}
/* --- Apparition au défilement ---------------------------------------------
Par défaut le contenu est VISIBLE. Le masquage n'est autorisé que si
porte `js-reveal`, posée par le script d'amorce du et retirée
au bout de 3 s si main.js n'a pas confirmé son exécution. Un script bloqué
ne peut donc jamais laisser une section vide. */
.reveal {
opacity: 1;
transform: none;
}
.js-reveal .reveal:not(.is-visible) {
opacity: 0;
transform: translate3d(0, 24px, 0);
}
/* Fondu + translation. 620 ms sur une courbe très décélérée : le bloc arrive
vite puis se pose, au lieu de glisser à vitesse constante. C'est ce freinage
qui fait la différence entre « ça bouge » et « ça se pose ».
`translate3d` plutôt que `translateY` : la couche est confiée au
compositeur, donc aucun repaint pendant l'apparition. */
.js-reveal .reveal {
transition:
opacity 620ms var(--ease-out),
transform 620ms var(--ease-out);
will-change: opacity, transform;
}
/* Une fois posé, on rend la main au navigateur : laisser `will-change` sur
des centaines d'éléments réserverait des couches pour rien. */
.js-reveal .reveal.is-visible { will-change: auto; }
/* Décalages en cascade. 70 ms : au-delà, la dernière carte d'une rangée de
quatre accuse un retard qui se lit comme un temps de chargement. */
.reveal--d1 { transition-delay: 70ms; }
.reveal--d2 { transition-delay: 140ms; }
.reveal--d3 { transition-delay: 210ms; }
.reveal--d4 { transition-delay: 280ms; }
.reveal--d5 { transition-delay: 350ms; }
/* --- Accessibilité --------------------------------------------------------- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -100px;
left: var(--gutter);
z-index: 200;
padding: 12px 20px;
border-radius: var(--r-full);
background: var(--ice-050);
color: var(--fg-inv);
font-size: var(--fs-sm);
font-weight: 600;
text-decoration: none;
transition: top var(--t);
}
.skip-link:focus { top: 12px; }
/* --- Marqueur « à compléter » ----------------------------------------------
L'ambre du phare. Deuxième et dernier emploi d'une couleur chaude sur tout
le site : impossible de mettre la page en ligne sans le voir. */
.placeholder {
display: inline;
padding: 2px 8px;
border-radius: var(--r-xs);
background: var(--ph-bg);
border: 1px dashed var(--ph-bd);
color: var(--ph-fg);
font-size: .9em;
font-weight: 500;
}
/* =============================================================================
5. DÉCORS — arêtes et fractures
-----------------------------------------------------------------------------
Éléments purement décoratifs, tous en `pointer-events: none` et tous posés
en pseudo-éléments : aucun n'ajoute de nœud au DOM ni de requête.
============================================================================= */
/* Aurore de section : une lueur émeraude qui monte du bord supérieur.
Posée sur les grandes bandes sombres pour qu'elles ne soient pas des
rectangles noirs les uns sur les autres. */
.stats-band::after,
.cta-final::after,
.footer::before {
content: "";
position: absolute;
inset-inline: 0;
top: 0;
height: 340px;
pointer-events: none;
background: radial-gradient(80% 100% at 50% 0%, rgba(47, 141, 102, .17), transparent 70%);
}
/* Fractures de glace : un motif de lignes fines en dégradés répétés, très
faible opacité. Sur les bandes les plus sombres uniquement. */
.stats-band::before,
.cta-final::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .5;
background-image:
linear-gradient(104deg, transparent 49.85%, var(--glass-bd) 50%, transparent 50.15%),
linear-gradient( 71deg, transparent 29.9%, var(--glass-bd) 30%, transparent 30.1%),
linear-gradient(118deg, transparent 74.9%, var(--glass-bd) 75%, transparent 75.1%);
background-size: 380px 100%, 620px 100%, 500px 100%;
}
/* =============================================================================
6. EN-TÊTE
============================================================================= */
/* --- Bandeau d'annonce -----------------------------------------------------
Le seul élément qui traverse la page de bord à bord. Il annonce, il ne
navigue pas : type discret, hauteur minimale. */
.announce {
position: relative;
z-index: 60;
background: linear-gradient(90deg, var(--em-950), var(--em-900) 50%, var(--em-950));
border-bottom: 1px solid var(--em-line);
color: var(--em-100);
font-size: var(--fs-xs);
}
.announce__inner {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding-block: 9px;
text-align: center;
}
.announce p { line-height: 1.45; }
.announce__link {
margin-left: var(--sp-2);
color: #FFFFFF;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
white-space: nowrap;
transition: color var(--t-fast);
}
.announce__link:hover { color: var(--em-200); }
/* --- En-tête ---------------------------------------------------------------
Une pastille de verre flottante, exactement comme la barre du modèle : elle
ne touche jamais les bords, elle se resserre au défilement. */
.header {
position: sticky;
top: 12px;
z-index: 80;
margin-top: 12px;
transition: top var(--t), margin-top var(--t);
}
.header__inner {
display: flex;
align-items: center;
gap: var(--sp-5);
min-height: 62px;
padding: 9px 12px 9px 20px;
border-radius: var(--r-full);
background: rgba(14, 23, 20, .72);
border: 1px solid var(--glass-bd);
box-shadow: var(--sh-1);
/* Flou volontairement modeste. Un `backdrop-filter` est recalculé à chaque
image de défilement, et l'en-tête flotte au-dessus d'une vidéo : à 22 px
de rayon, c'est le poste le plus cher de la page. À 13 px le rendu est
indiscernable et le défilement redevient net. */
-webkit-backdrop-filter: blur(13px);
backdrop-filter: blur(13px);
transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.header.is-scrolled .header__inner {
background: rgba(11, 18, 16, .90);
border-color: var(--glass-bd-2);
box-shadow: var(--sh-2);
}
/* Un repli de sécurité : sans `backdrop-filter`, la pastille devient opaque
au lieu de laisser passer le contenu en transparence illisible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.header__inner { background: rgba(11, 18, 16, .97); }
}
/* --- Logo ------------------------------------------------------------------ */
.logo {
display: inline-flex;
align-items: center;
gap: 11px;
flex: none;
text-decoration: none;
color: var(--fg);
}
.logo__mark {
display: inline-flex;
width: 30px;
height: 30px;
flex: none;
filter: drop-shadow(0 0 12px rgba(47, 141, 102, .45));
transition: filter var(--t), transform var(--t) var(--ease-out);
}
.logo:hover .logo__mark {
filter: drop-shadow(0 0 18px rgba(70, 176, 133, .75));
transform: translateY(-1px);
}
.logo__mark svg { width: 100%; height: 100%; }
.logo__text {
font-family: var(--ff-display);
font-size: 1.28rem;
font-weight: 600;
letter-spacing: -.03em;
color: var(--fg);
}
/* --- Navigation ------------------------------------------------------------ */
.nav { margin-left: auto; }
.nav__list {
display: flex;
align-items: center;
gap: 2px;
}
.nav__link {
position: relative;
display: inline-block;
padding: 8px 13px;
border-radius: var(--r-full);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--fg-2);
text-decoration: none;
white-space: nowrap;
transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover {
color: var(--fg);
background: var(--glass);
}
/* Section courante : une pastille émeraude discrète, pas un simple gras —
la couleur seule ne suffirait pas à un daltonien, la pastille si. */
.nav__link.is-active {
color: var(--em-200);
background: var(--em-soft);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--sp-3);
flex: none;
}
.header__actions .nav__link {
color: var(--fg-2);
font-variant-numeric: tabular-nums;
}
.header__actions .btn { padding: 11px 20px; }
/* --- Burger ---------------------------------------------------------------- */
.burger {
display: none;
width: 42px;
height: 42px;
flex: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border-radius: var(--r-full);
background: var(--glass);
border: 1px solid var(--glass-bd);
cursor: pointer;
transition: background var(--t), border-color var(--t);
}
.burger:hover { background: var(--glass-2); border-color: var(--glass-bd-2); }
.burger__bar {
display: block;
width: 17px;
height: 1.6px;
border-radius: 2px;
background: var(--fg);
transition: transform var(--t), opacity var(--t-fast);
}
.burger.is-open .burger__bar:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger.is-open .burger__bar:nth-child(2) { opacity: 0; }
.burger.is-open .burger__bar:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
.nav-overlay {
position: fixed;
inset: 0;
z-index: 70;
background: rgba(5, 9, 8, .72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.nav-overlay[hidden] { display: none; }
body.is-locked { overflow: hidden; }
/* =============================================================================
7. HÉROS — cadre cinéma épinglé
-----------------------------------------------------------------------------
Trois idées, et elles se tiennent :
· la vidéo n'occupe pas tout l'écran : elle vit dans un BANDEAU 21:9,
centré, dont les bords fondent dans le noir. C'est ce fondu — et non
des barres nettes — qui donne la lecture « film » ;
· `.hero` est une piste de défilement de plusieurs écrans, `.hero__stage`
y reste collé : la scène ne bouge pas pendant qu'on avance la vidéo ;
· le titre est centré SUR le bandeau, les chiffres sont ancrés en bas de
la scène. Séparer les deux est ce qui permet au titre d'être vraiment
au milieu au lieu d'être poussé vers le haut par la pile.
============================================================================= */
/* --- Le conteneur d'épinglage ----------------------------------------------
La hauteur commande le RYTHME. 460 % de la fenêtre, dont 100 % occupés par
la scène, laissent 360 % de course pour parcourir les 6 secondes de vidéo :
une image (24 i/s) tous les ~22 px de défilement. Montez la valeur pour
ralentir encore, baissez-la pour accélérer. C'est le seul réglage à toucher
pour changer la vitesse ressentie. */
.hero {
position: relative;
height: 460svh;
margin-top: calc(-1 * var(--header-block));
background: var(--void);
}
/* --- La scène épinglée ------------------------------------------------------ */
.hero__stage {
position: sticky;
top: 0;
height: 100svh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
/* Le rembourrage est sur la SCÈNE, pas sur le contenu : le centrage
vertical s'opère alors dans la zone restante, donc sous l'en-tête
flottant. Mettre ce rembourrage sur `.hero__inner` recentrerait le bloc
sur lui-même et le ferait passer derrière l'en-tête. */
padding-block: calc(var(--header-block) + var(--sp-5)) var(--hero-foot);
}
/* --- Le bandeau cinéma ------------------------------------------------------
La vidéo n'est plus en plein cadre : `aspect-ratio` lui donne son format et
elle se centre verticalement. Au-dessus et en dessous, le fond `--void` de
la scène apparaît — ce sont les bandes.
`max-height` est un garde-fou pour les écrans très larges : sans lui, un
21:9 calculé sur 2 500 px de large dépasserait la hauteur de la fenêtre et
le bandeau redeviendrait plein cadre. */
.hero__media {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: -3;
aspect-ratio: 21 / 9;
max-height: 78svh;
overflow: hidden;
/* Image de secours pour les connexions lentes : un SVG de 7 Ko, vectoriel,
donc net à toutes les définitions et affiché instantanément. Il tient
l'écran avant que la vidéo n'ait un octet, et reste SEUL si elle est
absente, refusée, ou si le visiteur a activé l'économie de données.
(Le second niveau — l'image exacte de départ — est le `poster` du