/* --- Polices auto-hebergees (D1) -------------------------------------------
Etaient chargees depuis fonts.googleapis.com : 2 hotes tiers, une feuille
bloquante de 490 ms, et le swap d'Archivo deplacait h1.hero__title
(0,23239 des 0,23333 de CLS desktop au releve du 30-08).
Les 8 fichiers sont VARIABLES : Archivo 500-900 tient dans UN fichier.
Precharges dans le des pages servies. --- */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500 900; /* fichier VARIABLE : une seule declaration couvre la plage */
font-display: swap;
src: url('assets/fonts/archivo-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500 900; /* fichier VARIABLE : une seule declaration couvre la plage */
font-display: swap;
src: url('assets/fonts/archivo-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400 700; /* fichier VARIABLE : une seule declaration couvre la plage */
font-display: swap;
src: url('assets/fonts/inter-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400 700; /* fichier VARIABLE : une seule declaration couvre la plage */
font-display: swap;
src: url('assets/fonts/inter-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700; /* fichier VARIABLE : une seule declaration couvre la plage */
font-display: swap;
src: url('assets/fonts/inter-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700; /* fichier VARIABLE : une seule declaration couvre la plage */
font-display: swap;
src: url('assets/fonts/inter-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 700; /* fichier VARIABLE : une seule declaration couvre la plage */
font-display: swap;
src: url('assets/fonts/jetbrains-mono-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 700; /* fichier VARIABLE : une seule declaration couvre la plage */
font-display: swap;
src: url('assets/fonts/jetbrains-mono-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, sans-serif;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* ---------- TOKENS ---------- */
:root {
--ink: #0E0E12;
--ink-2: #2a2a35;
--ink-3: #6b6b78;
--bg: #FAF6EE;
--bg-soft: #F2EEE5;
--bg-blue: #ECE6D8;
--line: #E0DBCE;
--blue: #1849A9;
--blue-deep: #0E2960;
--blue-pale: #C5D2EA;
--water: #1849A9;
--red: #8A8478;
--red-deep: #6B6660;
--accent: #1849A9;
--radius: 14px;
--radius-lg: 22px;
--shadow-sm: 0 2px 8px rgba(14,14,18,0.06);
--shadow: 0 12px 40px rgba(14,14,18,0.10);
--shadow-lg: 0 30px 80px rgba(14,14,18,0.18);
--container: 1240px;
--pad: clamp(20px, 4vw, 48px);
}
/* ---------- TYPE (Archivo headlines = industrial display, Inter body = lisible) ---------- */
h1, h2, h3, h4 {
font-family: 'Archivo', 'Inter', system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1.0;
text-wrap: balance;
}
h1 { font-size: clamp(44px, 7vw, 96px); font-weight: 700; letter-spacing: -0.04em; }
h2 { font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.035em; }
h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 700; }
p { font-size: clamp(16px, 1.1vw, 18px); color: var(--ink-2); text-wrap: pretty; }
.eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 12px;
color: var(--blue);
font-weight: 500;
}
/* ---------- LAYOUT ---------- */
.container {
max-width: var(--container);
margin: 0 auto;
padding-left: var(--pad);
padding-right: var(--pad);
}
section { padding: clamp(64px, 10vw, 140px) 0; }
/* ---------- NAV ----------
États possibles :
.nav → transparent par défaut, liens BLANCS lisibles sur fond hero noir (home avant scroll)
.nav.scrolled → crème opaque + blur, liens GRIS FONCÉ (home après scroll)
.nav.nav--no-hero → comme .scrolled mais permanent (pages sans hero)
------------------------------------------------------------- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 12px 0;
/* État inversé (top, sur le hero) : petit dégradé sombre→transparent pour lisibilité des liens blancs */
background: linear-gradient(180deg, rgba(14,14,18,.55) 0%, rgba(14,14,18,.22) 55%, rgba(14,14,18,0) 100%);
transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.scrolled,
.nav.nav--no-hero {
background: rgba(250,246,238,.92);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
box-shadow: 0 1px 0 var(--line);
padding: 10px 0;
}
.nav .container {
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
}
.nav__logo {
display: flex; align-items: center; gap: 10px;
font-family: 'Archivo', 'Inter', system-ui, sans-serif;
font-weight: 700;
font-size: 20px;
position: relative;
color: var(--ink);
}
.nav__logo img { height: 84px; width: auto; transition: height .3s ease; } /* logo bien visible */
.nav.scrolled .nav__logo img,
.nav.nav--no-hero .nav__logo img { height: 74px; } /* léger shrink en mode crème, reste bien lisible */
/* Swap light/dark variant : light = crème (sur fond foncé/hero), dark = noir (sur fond crème) */
.nav__logo-img--dark { display: none; }
.nav.scrolled .nav__logo-img--light,
.nav.nav--no-hero .nav__logo-img--light { display: none; }
.nav.scrolled .nav__logo-img--dark,
.nav.nav--no-hero .nav__logo-img--dark { display: block; }
.nav__links {
display: flex; gap: 6px; align-items: center;
}
.nav__link {
padding: 8px 14px;
border-radius: 999px;
font-size: 14.5px;
font-weight: 600;
/* État par défaut (nav transparente sur fond hero foncé) : liens BLANCS lisibles */
color: rgba(255,255,255,.95);
text-shadow: 0 1px 8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
transition: background .2s, color .2s;
}
.nav__link:hover {
color: white;
background: rgba(255,255,255,.12);
}
.nav__link.active {
color: #8FB2F0; /* bleu pâle pour le lien sélectionné (état inversé) */
background: rgba(255,255,255,.14);
}
/* Mode crème (scrolled OU no-hero) : liens GRIS FONCÉ visibles sur crème */
.nav.scrolled .nav__link,
.nav.nav--no-hero .nav__link {
color: var(--ink-2);
text-shadow: none;
}
.nav.scrolled .nav__link:hover,
.nav.nav--no-hero .nav__link:hover {
color: var(--ink);
background: var(--bg-soft);
}
.nav.scrolled .nav__link.active,
.nav.nav--no-hero .nav__link.active {
color: var(--blue);
background: transparent;
}
.nav__cta {
padding: 10px 18px;
border-radius: 999px;
/* Default sur fond hero : pill blanche pleine, contraste max */
background: white;
color: var(--blue-deep);
font-size: 14px;
font-weight: 700;
transition: transform .2s, background .2s, color .2s;
}
.nav__cta:hover { background: var(--blue); color: white; transform: translateY(-1px); }
.nav.scrolled .nav__cta,
.nav.nav--no-hero .nav__cta {
background: var(--ink);
color: white;
}
.nav.scrolled .nav__cta:hover,
.nav.nav--no-hero .nav__cta:hover { background: var(--blue); color: white; }
.lang-toggle {
display: flex; align-items: center;
border: 1px solid rgba(255,255,255,.4);
border-radius: 999px;
overflow: hidden;
font-size: 12px;
font-weight: 700;
background: rgba(255,255,255,.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lang-toggle button {
padding: 6px 10px;
color: rgba(255,255,255,.9);
}
.lang-toggle button.active { background: white; color: var(--ink); }
.nav.scrolled .lang-toggle,
.nav.nav--no-hero .lang-toggle {
border-color: var(--line);
background: white;
}
.nav.scrolled .lang-toggle button,
.nav.nav--no-hero .lang-toggle button { color: var(--ink-3); }
.nav.scrolled .lang-toggle button.active,
.nav.nav--no-hero .lang-toggle button.active { background: var(--ink); color: white; }
.hamburger { display: none; }
.mobile-menu { display: none; }
@media (max-width: 900px) {
.nav__links { display: none; }
.hamburger {
display: flex; flex-direction: column; gap: 4px;
padding: 10px; border-radius: 10px;
}
/* Hamburger blanc sur fond hero transparent ; noir quand nav scrolled ou pages sans hero */
.hamburger span { width: 22px; height: 2px; background: white; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.nav.scrolled .hamburger span,
.nav.nav--no-hero .hamburger span { background: var(--ink); box-shadow: none; }
.nav__cta { display: none; }
.mobile-menu {
position: fixed; top: 72px; left: 8px; right: 8px;
background: white; border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: 14px; display: none; z-index: 99;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
display: block; padding: 12px 14px; border-radius: 10px;
color: var(--ink); font-weight: 500;
}
.mobile-menu a:hover { background: var(--bg-soft); }
}
/* ---------- BUTTONS ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
transition: all .2s ease;
white-space: nowrap;
}
.btn--primary { background: var(--blue); color: white; box-shadow: 0 10px 30px rgba(24,73,169,.35); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(24,73,169,.45); background: #143F94; }
.btn--dark { background: var(--ink); color: white; }
.btn--dark:hover { background: var(--blue); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--red { background: var(--red); color: white; }
.btn--red:hover { background: var(--red-deep); }
/* ---------- HERO (scroll-scrub canvas, frames extraites de la vidéo) ---------- */
.hero {
position: relative;
height: 300vh; /* sticky pin 100vh + course anim 200vh → scrub raccourci (~2.6vh/frame sur 76 frames), moins long au scroll */
background: #0E0E12;
margin: 0; padding: 0; /* zéro espace au-dessus, le canvas touche le top du viewport sous la nav transparente */
}
.hero__sticky {
position: sticky; top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
/* Fallback image : la frame 001 affichée en background AVANT que le canvas dessine. Plus de flash noir au load. */
background: #0E0E12 url('assets/hero-frames/001.jpg') center center / cover no-repeat;
color: white;
}
/* Hard reset : aucun ancêtre du .hero ne doit pousser le sticky vers le bas */
body, main, .page { margin: 0; padding-top: 0; }
/* canvas qui draw les 76 frames extraites de la vidéo avant→après */
.hero__canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block;
background: #0E0E12;
filter: saturate(.5) brightness(1.06) contrast(.9); /* vidéo plus pâle/délavée → texte plus lisible par-dessus */
}
/* vignette + gradient pour lisibilité du headline par-dessus (renforcé pour contraste texte sur pavé clair) */
.hero__vignette {
position: absolute; inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(14,14,18,.75) 0%, rgba(14,14,18,.45) 22%, rgba(14,14,18,.35) 50%, rgba(14,14,18,.55) 78%, rgba(14,14,18,.85) 100%),
radial-gradient(ellipse at 50% 50%, rgba(14,14,18,.18) 0%, rgba(14,14,18,.6) 100%);
z-index: 2;
}
/* Scroll progress-bar at top */
.scroll-bar {
position: absolute; top: 0; left: 0;
height: 3px; background: var(--water);
width: 0%; z-index: 10;
box-shadow: 0 0 20px var(--water);
}
/* (Anciens éléments .hero__stage / .scene / .jet supprimés — remplacés par canvas scrub) */
/* Hero headline text (sticky overlay au-dessus du canvas, fade out au scroll) */
.hero__headline {
position: absolute;
inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
z-index: 4;
padding: 0 24px;
pointer-events: none;
text-shadow: 0 4px 24px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5);
}
.hero__eyebrow {
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 13px;
color: #8FB2F0; /* cobalt éclairci → lisible sur la vidéo pâle */
margin-bottom: 20px;
opacity: var(--h-eyebrow, 1);
transform: translateY(calc((1 - var(--h-eyebrow, 1)) * 12px));
}
.hero__title {
color: white;
font-size: clamp(46px, 8vw, 120px);
font-weight: 600;
line-height: 1.0;
letter-spacing: -0.035em;
opacity: var(--h-title, 1);
transform: translateY(calc((1 - var(--h-title, 1)) * 40px));
max-width: 16ch;
}
.hero__title em {
font-style: italic;
color: #8FB2F0; /* cobalt éclairci → contraste sur la vidéo pâle (le titre blanc reste sur la vignette) */
}
.hero__sub {
margin-top: 28px;
font-size: clamp(16px, 1.5vw, 20px);
color: rgba(255,255,255,.95);
max-width: 580px;
opacity: var(--h-sub, 1);
transform: translateY(calc((1 - var(--h-sub, 1)) * 20px));
font-weight: 500;
}
.hero__cta-row {
margin-top: 40px;
display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
opacity: var(--h-cta, 1);
transform: translateY(calc((1 - var(--h-cta, 1)) * 20px));
pointer-events: auto;
}
/* Rotating storytelling text — affiché par-dessus le canvas pendant le scrub, transitions cross-fade via JS opacity */
.hero__story {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 3;
padding: 0 24px;
}
.hero__story-line {
position: absolute;
font-family: 'Archivo', 'Inter', system-ui, sans-serif;
font-weight: 800;
font-size: clamp(38px, 6.5vw, 96px);
line-height: 1.0;
letter-spacing: -0.035em;
color: white;
text-align: center;
text-shadow: 0 4px 28px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.5);
max-width: 18ch;
opacity: 0;
will-change: opacity, transform;
transform: translateY(0);
}
.hero__story-line em { color: var(--water); font-style: italic; }
/* scroll hint */
.scroll-hint {
position: absolute;
bottom: 30px; left: 50%;
transform: translateX(-50%);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
display: flex; flex-direction: column; align-items: center; gap: 10px;
opacity: var(--hint-o, 1);
transition: opacity .3s;
}
.scroll-hint::after {
content: '';
width: 1px; height: 36px;
background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
animation: pulseDown 1.6s ease-in-out infinite;
}
@keyframes pulseDown {
0%, 100% { transform: scaleY(.3); transform-origin: top; opacity: .2; }
50% { transform: scaleY(1); opacity: 1; }
}
/* --- Labels avant/après en overlay du canvas, contrôlés par opacity JS --- */
.hero__labels {
position: absolute; inset: 0;
pointer-events: none;
z-index: 3;
}
.label {
position: absolute;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: white;
padding: 7px 12px;
border-radius: 999px;
white-space: nowrap;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
box-shadow: 0 6px 24px rgba(0,0,0,.35);
transition: opacity .35s;
will-change: opacity, transform;
}
.label--dirty {
top: 22%; left: 6%;
background: rgba(60,55,50,.78);
border: 1px solid rgba(255,255,255,.15);
opacity: var(--label-dirty-o, 0);
}
.label--clean {
bottom: 18%; right: 6%;
background: rgba(24,73,169,.85);
border: 1px solid rgba(255,255,255,.2);
opacity: var(--label-clean-o, 0);
}
.label::before {
content: ''; display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: white; margin-right: 8px;
vertical-align: middle;
}
@media (max-width: 700px) {
.label--dirty { top: 16%; left: 4%; font-size: 10px; }
.label--clean { bottom: 14%; right: 4%; font-size: 10px; }
}
/* ---------- POLYMER FEATURE ---------- */
/* Bande eyebrow de délimitation hero (ink #0E0E12) → section spécialité (navy) — accueil */
.section-divider {
display: flex;
align-items: center;
gap: clamp(16px, 3vw, 40px);
background: var(--blue); /* cobalt #1849A9 : accent net entre le hero ink et la section navy */
padding: 15px clamp(20px, 5vw, 64px);
}
.section-divider__line {
flex: 1 1 auto;
height: 1px;
background: rgba(250,246,238,.35); /* filet crème translucide */
}
.section-divider__label {
flex: 0 0 auto;
font-size: 12px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--bg); /* crème #FAF6EE */
white-space: nowrap;
text-align: center;
}
@media (max-width: 600px) {
.section-divider { padding: 12px 18px; gap: 14px; }
.section-divider__label { font-size: 10px; letter-spacing: .1em; white-space: normal; }
}
.polymer-feature {
background:
radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.06), transparent 55%),
linear-gradient(180deg, #1c2440 0%, #182040 100%);
color: white;
padding-top: clamp(48px, 6vw, 80px); /* réduit le black gap visible avant le contenu */
}
/* Transition hero (ink #0E0E12) → polymer-feature (cobalt #1c2440 direct, no dark zone) : section change visible immédiat, plus de barre noire entre les deux. */
.polymer-feature__grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 72px;
align-items: center;
}
@media (max-width: 900px) { .polymer-feature__grid { grid-template-columns: 1fr; gap: 40px; } }
.polymer-feature h2 em { font-style: italic; color: var(--water); }
.polymer-feature__bullets { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.polymer-feature__bullets li {
padding-left: 28px;
position: relative;
color: rgba(255,255,255,.85);
font-size: 15.5px;
}
.polymer-feature__bullets li::before {
content: '';
position: absolute; left: 0; top: 8px;
width: 16px; height: 2px;
background: var(--water);
}
.polymer-feature__visual {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius-lg);
padding: 0;
overflow: hidden;
position: relative;
}
/* Macro photo des joints (remplace l'ancien diagramme schématique) */
.polymer-photo {
margin: 0;
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
}
.polymer-photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.polymer-feature__visual:hover .polymer-photo img { transform: scale(1.04); }
.polymer-photo__cap {
position: absolute;
left: 16px; bottom: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: white;
background: rgba(24,73,169,.85);
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(6px);
}
.polymer-diagram {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 16px;
align-items: center;
}
@media (max-width: 700px) { .polymer-diagram { grid-template-columns: 1fr; }
.polymer-diagram__arrow { transform: rotate(90deg); justify-self: center; }
}
.polymer-diagram__step { text-align: center; }
.polymer-diagram__num {
font-family: 'JetBrains Mono', monospace;
color: var(--water);
font-size: 12px;
letter-spacing: 0.15em;
margin-bottom: 12px;
}
.polymer-diagram__pavers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
background: #1a1f28;
padding: 6px;
border-radius: 8px;
aspect-ratio: 3/2;
position: relative;
overflow: hidden;
}
.pvr {
background: linear-gradient(135deg, #9a9284, #6d6559);
border-radius: 2px;
}
.polymer-diagram__joints {
position: absolute;
inset: 6px;
pointer-events: none;
}
.polymer-diagram__joints--bad::before,
.polymer-diagram__joints--bad::after {
content: ''; position: absolute;
background: #5a7a3a;
border-radius: 2px;
}
.polymer-diagram__joints--bad::before {
left: 33%; top: 20%; width: 3px; height: 30%;
box-shadow: 15px 10px 0 #6b8a48, -8px 30px 0 #4d6b30;
}
.polymer-diagram__joints--bad::after {
right: 20%; bottom: 15%; width: 4px; height: 25%;
box-shadow: -25px -20px 0 #5a7a3a;
}
.polymer-diagram__joints--empty {
background:
repeating-linear-gradient(90deg, transparent 0 33%, rgba(0,0,0,.55) 33% calc(33% + 3px), transparent calc(33% + 3px) 66%, rgba(0,0,0,.55) 66% calc(66% + 3px), transparent calc(66% + 3px) 100%),
repeating-linear-gradient(0deg, transparent 0 49%, rgba(0,0,0,.55) 49% calc(49% + 3px), transparent calc(49% + 3px) 100%);
}
.polymer-diagram__joints--new {
background:
repeating-linear-gradient(90deg, transparent 0 33%, #d4b98c 33% calc(33% + 3px), transparent calc(33% + 3px) 66%, #d4b98c 66% calc(66% + 3px), transparent calc(66% + 3px) 100%),
repeating-linear-gradient(0deg, transparent 0 49%, #d4b98c 49% calc(49% + 3px), transparent calc(49% + 3px) 100%);
}
.polymer-diagram__label {
margin-top: 14px;
font-size: 12.5px;
color: rgba(255,255,255,.75);
line-height: 1.35;
min-height: 32px;
}
.polymer-diagram__arrow {
color: var(--water);
font-size: 24px;
font-weight: 300;
}
/* Featured service card */
.service-card--featured {
border: 2px solid var(--blue);
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
box-shadow: 0 12px 40px rgba(24,73,169,.15);
}
.service-card__badge {
position: absolute;
top: 18px; right: 18px;
background: var(--blue);
color: white;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
}
/* ---------- GENERIC SECTIONS ---------- */
.section-head { text-align: center; max-width: 780px; margin: 0 auto 60px; }
.section-head .eyebrow { display: inline-block; margin-bottom: 16px; }
.section-head h2 { margin-bottom: 18px; }
/* Services grid */
.services {
background: var(--bg-soft);
}
.services__grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.service-card {
background: white;
border-radius: var(--radius-lg);
padding: 0;
border: 1px solid var(--line);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
display: flex; flex-direction: column;
min-height: 360px;
position: relative;
overflow: hidden;
cursor: pointer;
overflow: hidden;
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
border-color: transparent;
}
.service-card__icon { display: none; }
.service-card__photo {
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--bg-soft);
position: relative;
}
.service-card__photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.service-card:hover .service-card__photo img { transform: scale(1.05); }
.service-card__body {
padding: 24px 26px 26px;
display: flex; flex-direction: column; flex: 1;
}
.service-card h3 { font-size: 22px; margin-bottom: 10px; }
.service-card p { font-size: 15px; flex: 1; }
.service-card__arrow {
margin-top: 18px;
color: var(--blue);
font-weight: 600;
font-size: 14px;
display: flex; align-items: center; gap: 6px;
}
.service-card--featured .service-card__photo::after {
content: '★ Spécialité';
position: absolute;
top: 14px; left: 14px;
background: var(--blue);
color: white;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 999px;
z-index: 2;
}
.service-card__badge { display: none; }
/* ---------- WHY US ---------- */
/* WHY ("Du métier sérieux") — section CLAIRE, cartes 2×2 bordées.
Tranche volontairement avec le PROCESS sombre juste en dessous (fini la fusion noir-sur-noir). */
.why {
background: var(--bg); /* crème #FAF6EE */
color: var(--ink);
}
.why h2 { color: var(--ink); }
.why .eyebrow { color: var(--blue); }
.why__grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2×2 strict → jamais de carte seule en bas */
gap: 24px;
margin-top: 56px;
max-width: 940px;
margin-inline: auto;
}
.why .why__item {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 36px 34px;
transition: opacity .8s ease, transform .8s ease, box-shadow .28s ease, border-color .28s ease;
}
.why .why__item:hover {
box-shadow: 0 18px 44px rgba(14,14,18,.09);
border-color: var(--blue-pale);
}
.why__item h3 {
color: var(--ink);
font-size: clamp(28px, 2.6vw, 40px);
word-break: break-word;
hyphens: auto;
line-height: 1.05;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 600;
letter-spacing: -0.03em;
margin-bottom: 10px;
}
.why__item h3 em { font-style: normal; color: var(--blue); }
.why__item p { color: var(--ink-3); font-size: 15.5px; line-height: 1.6; }
.why__item .label-sm {
font-family: 'JetBrains Mono', monospace;
font-size: 12px; text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--blue);
margin-bottom: 14px;
}
@media (max-width: 640px) {
.why__grid { grid-template-columns: 1fr; gap: 18px; }
.why .why__item { padding: 28px 24px; }
}
/* ---------- PROCESS ---------- */
/* ---------- PROCESS (industrial blueprint section) ---------- */
.process {
background: var(--ink);
color: white;
background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 60px),
repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 60px),
radial-gradient(ellipse at 80% 20%, rgba(24,73,169,.18), transparent 55%);
position: relative;
}
.process .section-head { margin-bottom: 70px; }
.process h2 { color: white; }
.process .eyebrow { color: var(--water); }
.section-head__lead {
margin-top: 20px;
font-size: clamp(15px, 1.1vw, 17px);
color: rgba(255,255,255,.65);
max-width: 640px;
}
.process__steps {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 étapes en ligne → 2×2 ≤900px, 1 col ≤540px : jamais de carte seule */
gap: 0;
border: 1px solid rgba(255,255,255,.14);
border-radius: 16px;
overflow: hidden; /* cadre le panneau « fiche technique » */
background: rgba(255,255,255,.02);
counter-reset: step;
}
.process__step {
position: relative;
padding: 56px 28px 36px;
border-right: 1px solid rgba(255,255,255,.10);
counter-increment: step;
transition: background .25s ease;
}
.process__step:last-child { border-right: none; }
.process__step:hover { background: rgba(24,73,169,.07); }
.process__num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-weight: 700;
font-size: 56px;
line-height: 1;
color: rgba(255,255,255,.10);
letter-spacing: -0.04em;
position: absolute;
top: 18px; right: 22px;
pointer-events: none;
}
.process__meta {
display: inline-block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--water);
padding: 5px 9px;
border: 1px solid rgba(24,73,169,.55);
margin-bottom: 18px;
}
.process__step h3 {
margin-bottom: 12px;
font-size: clamp(22px, 1.8vw, 28px);
color: white;
font-family: 'Archivo', 'Inter', sans-serif;
font-weight: 700;
letter-spacing: -0.025em;
}
.process__step p {
color: rgba(255,255,255,.72);
font-size: 14.5px;
line-height: 1.55;
}
@media (max-width: 900px) {
.process__steps { grid-template-columns: repeat(2, 1fr); }
.process__step:nth-child(2) { border-right: none; }
.process__step:nth-child(1), .process__step:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.10); }
}
@media (max-width: 540px) {
.process__steps { grid-template-columns: 1fr; }
.process__step { border-right: none; border-bottom: 1px solid rgba(255,255,255,.10); }
.process__step:last-child { border-bottom: none; }
}
/* ---------- BEFORE/AFTER ---------- */
.gallery__grid {
/* auto-fit + justify-content:center → la rangée reste centrée quel que soit le nombre de cartes
(2 vraies jobs depuis 2026-07-15 ; à 3 le rendu est identique à l'ancien repeat(3,1fr)).
Les pistes vides sont effondrées par auto-fit, donc pas de trou à droite. */
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
justify-content: center;
gap: 24px;
}
@media (max-width: 760px) {
.gallery__grid { grid-template-columns: 1fr; } /* mobile : pleine largeur (skip le 2-col qui ferait 2+1) */
}
.ba-card {
position: relative;
aspect-ratio: 4/3;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-soft);
cursor: ew-resize;
box-shadow: var(--shadow-sm);
touch-action: pan-y; /* FIX mobile : le drag horizontal du slider est capté par le JS (sinon le navigateur volait le geste pour scroller → slider bloqué). pan-y garde le scroll vertical de la page. */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none; /* empêche le menu image long-press iOS pendant le drag */
}
.ba-card__before, .ba-card__after {
position: absolute; inset: 0;
}
.ba-card__after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ba-card__handle {
position: absolute; top: 0; bottom: 0;
left: var(--split, 50%);
width: 2px;
background: white;
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
pointer-events: none;
}
.ba-card__handle::after {
content: '⇄';
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 36px; height: 36px;
background: white; color: var(--ink);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow);
font-size: 14px;
}
.ba-card__tag {
position: absolute; top: 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.14em;
padding: 5px 10px;
border-radius: 999px;
color: white;
}
.ba-card__tag--before { left: 14px; background: rgba(10,22,40,.7); }
.ba-card__tag--after { right: 14px; background: rgba(24,73,169,.9); }
/* Placeholders (fallback couleurs) — fond visible UNIQUEMENT s'il n'y a pas d'![]()
dedans */
.ph {
position: absolute; inset: 0;
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 10px, rgba(0,0,0,.04) 10px 20px),
var(--ph-bg, #c8c8c4);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.ph:has(img) { background: none; }
.ph > img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.ph__note { display: none; }
.ph--dirty { --ph-bg: #4a4742; }
.ph--clean { --ph-bg: #b4ab9a; }
.ph--dirty-roof { --ph-bg: #5a4635; }
.ph--clean-roof { --ph-bg: #8a6b52; }
.ph--dirty-siding { --ph-bg: #6b6660; }
.ph--clean-siding { --ph-bg: #d8d2c8; }
/* BA card images (par-dessus le .ph background) */
.ba-card__before img,
.ba-card__after img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* ---------- CTA BANNER ---------- */
.cta-banner {
background: linear-gradient(135deg, var(--blue-deep), var(--blue));
color: white;
border-radius: var(--radius-lg);
padding: clamp(40px, 6vw, 72px);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 32px;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute; top: -40%; right: -10%;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(24,73,169,.35), transparent 60%);
border-radius: 50%;
}
.cta-banner h2 { color: white; position: relative; }
.cta-banner p { color: rgba(255,255,255,.8); margin-top: 10px; position: relative; }
.cta-banner .btn { position: relative; }
.cta-banner > div, .cta-banner > a { position: relative; z-index: 2; }
/* Variant CTA avec vidéo background (golden hour lance) */
.cta-banner--video { background: #0E0E12; }
.cta-banner--video::before {
background: linear-gradient(135deg, rgba(10,18,40,.78) 0%, rgba(24,73,169,.55) 60%, rgba(24,73,169,.35) 100%);
position: absolute; inset: 0;
width: auto; height: auto; border-radius: 0;
top: 0; right: 0;
z-index: 1;
}
.cta-banner__bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
opacity: .55;
filter: saturate(1.1);
}
/* About page : vidéo loop (cour restaurée) */
.about-grid__media {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
aspect-ratio: 4/5;
box-shadow: var(--shadow);
}
.about-grid__video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 700px) {
.cta-banner { grid-template-columns: 1fr; }
}
/* ---------- FOOTER ---------- */
.footer {
background: var(--ink);
color: rgba(255,255,255,.86); /* textes plus contrastés */
padding: 80px 0 40px;
}
.footer a { color: rgba(255,255,255,.86); text-decoration: none; transition: color .2s ease; }
.footer a:hover { color: #8FB2F0; } /* hover cobalt clair, cohérent avec le hero */
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.2fr;
gap: 48px;
margin-bottom: 56px;
align-items: start;
}
@media (max-width: 800px) {
.footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}
@media (max-width: 480px) {
.footer__grid { grid-template-columns: 1fr; }
}
.footer__brand img {
height: 124px; /* logo bien gros (le PNG a une marge interne → on resserre via marges négatives) */
width: auto; display: block;
margin: -26px 0 6px -22px;
}
.footer__brand p {
color: rgba(255,255,255,.78);
font-size: 15px;
line-height: 1.6;
max-width: 340px;
}
.footer h4 {
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
margin-bottom: 18px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; font-size: 15px; line-height: 1.45; }
.footer__bottom {
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,.14);
display: flex; justify-content: space-between;
font-size: 13.5px; color: rgba(255,255,255,.66);
flex-wrap: wrap; gap: 12px;
}
/* ---------- PAGE-SPECIFIC HERO (sub pages) ---------- */
.page-hero {
padding-top: 160px; padding-bottom: 80px;
background:
radial-gradient(ellipse at 30% 0%, rgba(24,73,169,.12), transparent 55%),
linear-gradient(180deg, #ECE6D8, #FAF6EE);
text-align: center;
}
.page-hero .eyebrow { margin-bottom: 16px; display: inline-block; }
.page-hero h1 { font-size: clamp(44px, 6vw, 80px); margin-bottom: 20px; }
.page-hero p { font-size: clamp(17px, 1.3vw, 20px); max-width: 640px; margin: 0 auto; color: var(--ink-2); }
/* ---------- Services page rows ---------- */
.srv-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
padding: 60px 0;
border-bottom: 1px solid var(--line);
}
.srv-row:nth-child(even) .srv-row__media { order: -1; }
.srv-row__media {
aspect-ratio: 4/3;
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
background: var(--bg-soft);
box-shadow: var(--shadow-sm);
}
.srv-row__text h2 { font-size: clamp(28px, 3vw, 44px); margin-bottom: 16px; }
.srv-row__text p { margin-bottom: 20px; }
.srv-row__list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.srv-row__list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 15px; color: var(--ink-2);
}
.srv-row__list li::before {
content: ''; display: block;
width: 8px; height: 8px; border-radius: 50%;
background: var(--blue);
margin-top: 7px; flex: none;
}
/* ---------- SERVICES PAGE — REDESIGN (page-hero stats + chip nav + srv-block) ---------- */
.page-hero--services {
padding-top: clamp(140px, 18vw, 200px);
padding-bottom: clamp(48px, 6vw, 80px);
background:
radial-gradient(ellipse at 20% 0%, rgba(24,73,169,.14), transparent 55%),
radial-gradient(ellipse at 90% 100%, rgba(24,73,169,.08), transparent 60%),
linear-gradient(180deg, var(--bg-blue) 0%, var(--bg) 100%);
text-align: left;
}
.page-hero--services .container { display: flex; flex-direction: column; align-items: flex-start; max-width: 1100px; }
.page-hero--services h1 { text-align: left; max-width: 18ch; line-height: 1.0; }
.page-hero--services h1 em { font-style: italic; color: var(--blue); font-weight: 800; }
.page-hero--services > .container > p { text-align: left; max-width: 640px; margin: 0; }
.page-hero__stats {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(4, auto);
gap: clamp(28px, 4vw, 56px);
border-top: 1px solid var(--line);
padding-top: 32px;
width: 100%;
}
.page-hero__stat { display: flex; flex-direction: column; gap: 4px; }
.page-hero__stat strong {
font-family: 'Archivo', 'Inter', sans-serif;
font-size: clamp(32px, 3.5vw, 48px);
font-weight: 800;
letter-spacing: -0.04em;
color: var(--blue);
line-height: 1;
}
.page-hero__stat span {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-3);
}
@media (max-width: 760px) {
.page-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
.services-detail-section {
padding: 0;
background: var(--bg);
}
.seo-section {
padding: clamp(64px, 8vw, 104px) 0;
background: var(--bg);
border-top: 1px solid var(--line);
}
.seo-section--services { padding-bottom: clamp(48px, 7vw, 84px); }
.seo-section--proof { background: var(--bg-soft); }
.seo-split {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
gap: clamp(32px, 6vw, 72px);
align-items: start;
}
.seo-copy h2 {
max-width: 900px;
margin: 14px 0 22px;
font-size: clamp(32px, 4vw, 56px);
}
.seo-copy p {
max-width: 860px;
margin-top: 16px;
line-height: 1.72;
}
.seo-panel {
padding: clamp(24px, 3vw, 34px);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.seo-panel h3 {
margin-bottom: 18px;
font-size: 22px;
}
.seo-panel ul {
display: grid;
gap: 12px;
list-style: none;
}
.seo-panel li {
position: relative;
padding-left: 22px;
color: var(--ink-2);
font-size: 15px;
line-height: 1.55;
}
.seo-panel li::before {
content: '';
position: absolute;
left: 0;
top: .72em;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--blue);
}
.seo-service-grid,
.proof-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: clamp(34px, 5vw, 56px);
}
.seo-service-grid article,
.proof-card {
padding: 26px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.seo-service-grid h3,
.proof-card h3 {
font-size: 22px;
margin-bottom: 12px;
}
.seo-service-grid p,
.proof-card p {
font-size: 15.5px;
line-height: 1.65;
color: var(--ink-2);
}
.seo-service-grid a,
.proof-card a {
display: inline-block;
margin-top: 18px;
color: var(--blue);
font-weight: 700;
text-decoration: none;
}
.proof-card span {
display: inline-block;
margin-bottom: 14px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .13em;
color: var(--blue);
}
@media (max-width: 900px) {
.seo-split,
.seo-service-grid,
.proof-grid {
grid-template-columns: 1fr;
}
}
/* Chip nav rapide — sticky en haut de la liste */
.srv-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 24px 0;
margin-bottom: 24px;
border-bottom: 1px solid var(--line);
position: sticky;
top: 70px;
background: var(--bg);
z-index: 5;
}
.srv-nav__chip {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-2);
background: var(--bg);
transition: all .2s ease;
cursor: pointer;
}
.srv-nav__chip:hover { border-color: var(--blue); color: var(--blue); }
.srv-nav__chip--featured {
border-color: var(--blue);
color: var(--blue);
font-weight: 700;
}
.srv-nav__chip--featured:hover { background: var(--blue); color: white; }
/* Service block — pleine bleed alterné gauche/droite avec numéro géant en filigrane */
.srv-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
padding: clamp(60px, 9vw, 120px) 0;
border-bottom: 1px solid var(--line);
position: relative;
scroll-margin-top: 100px;
}
.srv-block:last-child { border-bottom: none; }
.srv-block:nth-child(even) .srv-block__media { order: 2; }
.srv-block--featured {
background: linear-gradient(180deg, transparent, rgba(24,73,169,.04) 50%, transparent);
}
.srv-block__num {
position: absolute;
top: 30px; right: 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-weight: 700;
font-size: clamp(80px, 12vw, 160px);
line-height: 1;
color: var(--line);
letter-spacing: -0.06em;
pointer-events: none;
z-index: 0;
user-select: none;
}
.srv-block:nth-child(even) .srv-block__num { right: auto; left: 0; }
.srv-block__media {
aspect-ratio: 4/3;
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
background: var(--bg-soft);
box-shadow: var(--shadow);
z-index: 1;
}
.srv-block__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .8s ease;
}
.srv-block:hover .srv-block__media img { transform: scale(1.04); }
.srv-block__badge {
position: absolute;
top: 18px; left: 18px;
background: var(--blue);
color: white;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 11px;
border-radius: 999px;
z-index: 2;
}
.srv-block__text { position: relative; z-index: 1; }
.srv-block__text .eyebrow { margin-bottom: 14px; display: inline-block; }
.srv-block__text h2 {
font-size: clamp(34px, 3.6vw, 52px);
margin-bottom: 20px;
font-family: 'Archivo', 'Inter', sans-serif;
font-weight: 800;
letter-spacing: -0.035em;
}
.srv-block__lead {
font-size: clamp(16px, 1.2vw, 18px);
color: var(--ink-2);
margin-bottom: 24px;
line-height: 1.55;
}
.srv-block__stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
padding: 16px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.srv-stat {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 6px 10px;
background: var(--bg-blue);
color: var(--blue-deep);
border-radius: 4px;
font-weight: 500;
}
.srv-block__list {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px 16px;
margin-bottom: 32px;
}
.srv-block__list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14.5px;
color: var(--ink-2);
line-height: 1.45;
}
.srv-block__list li::before {
content: '✓';
color: var(--blue);
font-weight: 700;
font-size: 14px;
flex: none;
width: 16px;
text-align: left;
}
.srv-block__cta { align-self: flex-start; }
@media (max-width: 900px) {
.srv-block { grid-template-columns: 1fr; gap: 32px; padding: 60px 0; }
.srv-block:nth-child(even) .srv-block__media { order: 0; }
.srv-block__num { font-size: 100px; top: 16px; }
.srv-block:nth-child(even) .srv-block__num { left: auto; right: 0; }
.srv-nav { top: 64px; padding: 16px 0; }
}
@media (max-width: 800px) {
.srv-row { grid-template-columns: 1fr; gap: 30px; padding: 40px 0; }
.srv-row:nth-child(even) .srv-row__media { order: 0; }
}
/* ---------- About ---------- */
.about-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 60px;
align-items: center;
}
.about-grid__media {
aspect-ratio: 4/5;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-soft);
position: relative;
}
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }
.values-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.value-card {
padding: 28px;
background: white;
border-radius: var(--radius);
border: 1px solid var(--line);
}
.value-card .num {
font-family: 'Inter', system-ui, sans-serif;
color: var(--blue);
font-size: 42px;
font-weight: 600;
line-height: 1;
margin-bottom: 14px;
}
.value-card h3 { font-size: 20px; margin-bottom: 8px; }
.value-card p { font-size: 14.5px; }
/* ---------- Quote form ---------- */
.quote-wrap {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 60px;
align-items: start;
}
@media (max-width: 900px) { .quote-wrap { grid-template-columns: 1fr; } }
.quote-info h2 { font-size: clamp(32px, 3.5vw, 44px); margin-bottom: 16px; }
.quote-info p { margin-bottom: 30px; }
.quote-info__item {
display: flex; gap: 14px; align-items: flex-start;
padding: 18px 0;
border-top: 1px solid var(--line);
}
.quote-info__item:last-child { border-bottom: 1px solid var(--line); }
.quote-info__item svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 2px; }
.quote-info__item h4 { font-family: Inter; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 4px; font-weight: 600; }
.quote-info__item p { font-size: 16px; color: var(--ink); margin: 0; }
.quote-form {
background: white;
border-radius: var(--radius-lg);
padding: 40px;
box-shadow: var(--shadow);
border: 1px solid var(--line);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row--full { grid-template-columns: 1fr; }
.field label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 6px;
}
.field input, .field select, .field textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 10px;
font: inherit;
background: var(--bg-soft);
color: var(--ink);
transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--blue);
background: white;
}
.field textarea { min-height: 120px; resize: vertical; }
@media (max-width: 560px) {
.form-row { grid-template-columns: 1fr; } /* mobile : champs pleine largeur → plus de select tronqué + meilleurs tap targets */
.quote-form { padding: 24px; }
}
/* service chip selector */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 13px;
background: white;
color: var(--ink-2);
cursor: pointer;
transition: all .2s;
}
.chip:hover { border-color: var(--ink-3); }
.chip.active { background: var(--blue); color: white; border-color: var(--blue); }
/* honeypot anti-spam : display:none pour bloquer l'autofill navigateur/gestionnaires (les bots remplissent quand meme) */
.qf-honeypot {
display: none !important;
}
/* feedback message (success / error) */
.qf-feedback {
margin-top: 14px;
padding: 0 14px;
font-size: 14px;
line-height: 1.5;
border-radius: 10px;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .25s ease, opacity .25s ease, padding .25s ease;
}
.qf-feedback.is-visible {
padding: 14px;
max-height: 200px;
opacity: 1;
}
.qf-feedback--success {
background: rgba(16, 185, 129, .08);
border: 1px solid rgba(16, 185, 129, .35);
color: #047857;
}
.qf-feedback--error {
background: rgba(220, 38, 38, .08);
border: 1px solid rgba(220, 38, 38, .35);
color: #b91c1c;
}
/* bouton submit en cours d'envoi */
#qf-submit[disabled] {
opacity: .55;
cursor: not-allowed;
}
/* ---------- SMS consent checkbox ---------- */
.qf-consent-row { margin-top: 4px; margin-bottom: 20px; }
.qf-consent-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.qf-consent-label input[type="checkbox"] {
flex: 0 0 auto;
margin-top: 3px;
width: 16px;
height: 16px;
accent-color: var(--blue);
cursor: pointer;
}
.qf-consent-label span {
font-size: 12px;
line-height: 1.55;
color: var(--ink-3);
}
.qf-consent-label span a {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---------- Placeholder notes throughout (hidden in prod) ---------- */
.note-placeholder {
display: none;
}
/* ---------- Reveal-on-scroll ---------- */
[data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity .8s ease, transform .8s ease;
}
[data-reveal].is-in {
opacity: 1;
transform: none;
}
/* Pages: hidden by default except #home */
.page { display: none; }
.page.active { display: block; }
/* ==========================================================
PAGES GÉO (hub-ville) — secteurs desservis, FAQ locale
========================================================== */
/* Bande "Secteurs desservis" — sitewide footer + in-content */
.area-links { display: flex; flex-wrap: wrap; gap: 10px; }
.area-link {
display: inline-block;
padding: 8px 16px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 999px;
font-size: 14px; font-weight: 500;
transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.area-link:hover { border-color: #8FB2F0; background: rgba(143,178,240,.12); }
.footer__area {
padding: 30px 0 4px;
border-top: 1px solid rgba(255,255,255,.14);
margin-bottom: 26px;
}
.footer__area h4 {
color: #fff; font-family: 'Inter', sans-serif;
font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
font-weight: 700; margin-bottom: 16px;
}
/* In-content area band (sur fond crème) */
.area-band { padding: 64px 0; background: var(--bg-soft); border-top: 1px solid var(--line); }
.area-band .area-links { margin-top: 22px; }
.area-band .area-link { color: var(--ink); border-color: var(--line); background: #fff; }
.area-band .area-link:hover { border-color: var(--blue); color: var(--blue); background: #fff; }
/* FAQ locale */
.faq { padding: 72px 0; background: var(--bg); }
.faq__list { max-width: 840px; margin: 30px auto 0; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); padding: 22px 26px;
}
.faq-item h3 { font-size: 18px; margin-bottom: 8px; color: var(--ink); }
.faq-item p { color: var(--ink-3); font-size: 15.5px; line-height: 1.6; margin: 0; }
/* Intro locale : lead paragraph riche sous le page-hero */
.local-intro { padding: 64px 0 8px; background: var(--bg); }
.local-intro__lead { max-width: 760px; font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); line-height: 1.7; }
.local-intro__lead strong { color: var(--ink); font-weight: 600; }
/* ---------- Fil d'Ariane (breadcrumb) — pages SEO generees ---------- */
.breadcrumb { background: var(--bg); border-bottom: 1px solid var(--line); }
.breadcrumb .container { padding-top: 14px; padding-bottom: 14px; font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }
.breadcrumb__sep { color: var(--line); }
/* ---------- Module liens internes (A lire aussi) ---------- */
.related { padding: clamp(56px, 8vw, 90px) 0; background: var(--bg); border-top: 1px solid var(--line); }
.related .section-head { margin-bottom: 40px; }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 860px) { .related__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .related__grid { grid-template-columns: 1fr; } }
.related__card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; background: white; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15.5px; line-height: 1.4; transition: transform .2s, border-color .2s, box-shadow .2s; }
.related__card:hover { transform: translateY(-2px); border-color: var(--blue-pale); box-shadow: 0 14px 34px rgba(14,14,18,.07); }
.related__arrow { color: var(--blue); font-weight: 700; flex: 0 0 auto; }
/* ---------- Avis Google ---------- */
.reviews { padding: clamp(64px, 9vw, 110px) 0; background: var(--bg); }
.reviews__summary { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.reviews__avg { font-family: Archivo, sans-serif; font-weight: 800; font-size: 30px; color: var(--ink); line-height: 1; }
.reviews__stars { color: #f5a623; font-size: 20px; letter-spacing: 2px; }
.reviews__count { color: var(--ink-3); font-size: 14px; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1040px; margin: 48px auto 0; }
@media (max-width: 860px) { .reviews__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .reviews__grid { grid-template-columns: 1fr; } }
.review-card { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.review-card__stars { color: #f5a623; font-size: 15px; letter-spacing: 2px; }
.review-card blockquote { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.review-card figcaption { color: var(--ink-3); font-size: 13px; font-weight: 600; margin-top: auto; }
/* Barre CTA mobile collante — pages money (Vague 1 reliquat, shippé 2026-07-16).
Même classe .call-bar que les landings Ads → les clics tel: sont déjà trackés
phone_call_click par app.js. Visible mobile seulement. */
.call-bar{display:none}
@media(max-width:768px){
.call-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:2147480000;background:#0E0E12;padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;justify-content:center}
.call-bar a{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;max-width:220px;font:700 15px/1 Inter,system-ui,sans-serif;border-radius:10px;padding:14px 12px;text-decoration:none}
.call-bar a.call-bar__tel{background:#1849A9;color:#fff}
.call-bar a.call-bar__quote{background:#FAF6EE;color:#0E0E12}
body:has(.call-bar){padding-bottom:70px}
body:has(.call-bar) #bmp-cookie-reopen{bottom:84px}
/* La banniere de temoins est position:fixed : elle ne pousse rien. Sans reserve, le
DERNIER controle d'une page reste piege dessous, quelle que soit sa hauteur.
Mesure LIVE le 20-08 apres deploy, a 390x844 sur /soumission-express : « Continuer »
recouvert de 42,5 px et l'option 6 de 28,8 px — alors que la banniere ne fait plus
que 95 px. Compacter ne suffisait pas : le bloc promesse+prix ajoute au-dessus du pli
par le couloir B a pousse le formulaire de ~148 px vers le bas, et les deux passes
etaient justes SEPAREMENT. Meme idiome que .call-bar ci-dessus : on RESERVE la
hauteur, on ne remonte pas la banniere (voir la note « NON FAIT, VOLONTAIREMENT »
plus bas, qui reste valable). 136 = 112 de banniere (pire cas mesure) + 16 + marge. */
body:has(#bmp-consent){padding-bottom:136px}
body:has(.call-bar):has(#bmp-consent){padding-bottom:206px}
}
/* ---------- Hero : repli image fixe quand le scrub n'est pas charge (SEO C-2) ----------
Le canvas est OPAQUE (background:#0E0E12) : tant qu'aucune frame n'y est dessinee il
RECOUVRE l'image de fond de .hero__sticky — c'est le « canvas noir » mesure le 20-08.
Sous 900px et en reduced-motion, app.js ne precharge plus les 76 frames (6,53 Mo) :
on masque le canvas et .hero__sticky peint la DERNIERE frame, l'etat « apres ».
🛑 Mesure : 001.jpg (99 Ko) est QUAND MEME telechargee sur mobile — pas par cette CSS,
mais par `` dans index.html (l. 149), inconditionnel.
Cette balise appartient au couloir B ; il lui manque un `media="(min-width:900px)"`. */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
.hero__canvas { display: none; }
.hero__sticky { background-image: url('assets/hero-frames/076.jpg'); }
}
/* Meme repli, mais decide en JS (connexion lente / saveData) la ou la CSS ne peut pas trancher. */
.hero--still .hero__canvas { display: none; }
.hero--still .hero__sticky { background-image: url('assets/hero-frames/076.jpg'); }
/* ---------- Banniere de temoins #bmp-consent : compactage mobile (SEO C-1) ----------
Mesure du 20-08 a 390x844 : la banniere courait de y=490 a y=805 (46 % de l'ecran) et
recouvrait les DEUX CTA (y=518 et y=583), y compris sur /soumission-express, la page
d'atterrissage payante.
Le markup ET la CSS de la banniere sont injectes par un