/* ==========================================================================
FACILITY RENOV — DESIGN SYSTEM « FUSION »
Base Piste 1 « Épure » · typographie Piste 2 « Signature »
couleurs profondes marine/orange · interactions Piste 3 « Atelier »
--------------------------------------------------------------------------
Ce fichier est partagé par les 8 pages. Ne pas dupliquer ces styles
dans les pages : tout composant commun vit ici. Voir SPEC.md.
========================================================================== */
/* ==========================================================================
1. TOKENS — deux thèmes : clair (:root) et sombre ([data-theme="dark"])
Règle absolue : les PAGES ne posent jamais de couleur en dur — uniquement
ces variables. Le thème est commuté par data-theme sur (voir SPEC §0).
========================================================================== */
:root{
color-scheme:light;
/* --- Couleurs (thème clair) --- */
--bg:#FAFAF7; /* blanc cassé chaud — fond de page */
--ink:#16181D; /* noir doux — texte principal */
--grey:#5A5E66; /* texte courant secondaire */
--grey-2:#6E727A; /* mentions, légendes — assombri pour AA (≥4.5:1 sur fond clair) */
--navy:#1F3864; /* accent marine ADAPTATIF — devient bleu acier en sombre */
--navy-deep:#16284A; /* hover des boutons pleins */
--marine:#1F3864; /* marine FIXE (identique dans les 2 thèmes) — aplats sur photo */
--orange:#E06C00; /* micro-accent technique — JAMAIS sur fond marine */
--em-accent:#E06C00; /* mot accentué des titres (Manrope droit) — AA large sur --bg/--blanc */
--em-accent-beige:#D26400; /* variante assombrie — AA (≥3:1 texte large) sur --beige #F4F0E8 */
--em-accent-dark:#F08A33; /* variante éclaircie — AA sur hero photo et fonds marine (retour client) */
--beige:#F4F0E8; /* sections de transition */
--blanc:#FFFFFF; /* surfaces de composants : cartes, champs, panneaux */
--creme:#FAFAF7; /* texte sur fonds sombres */
--error:#B3261E;
/* --- Surfaces sombres de la marque (footer, .sec--navy, hero) --- */
--navy-band:#1F3864; /* bandeau hero, .sec--navy, footer */
--navy-band-2:#16284A; /* fond du hero / .page-head--photo */
/* --- Texte posé sur un aplat var(--navy) (boutons pleins, onglets actifs) --- */
--btn-ink:#FFFFFF;
/* --- Filets --- */
--line:rgba(22,24,29,.12);
--line-soft:rgba(22,24,29,.08);
--line-cl:rgba(250,250,247,.16); /* filets clairs sur fonds sombres */
--ink-50:rgba(22,24,29,.5); /* texte estompé (mots-clés défilants) */
/* --- Surfaces & habillages thémés --- */
--header-bg:rgba(250,250,247,.94);
--badge-bg:rgba(250,250,247,.92);
--stage-bg:#CFCBC2; /* fond de la scène galerie */
--ph-bg:#DCD8CE; /* fond de base des placeholders */
--ph-tag-ink:rgba(22,24,29,.62);
--ph-tag-bg:rgba(250,250,247,.78);
--track:rgba(22,24,29,.1); /* rails (barres de performance) */
--input-hover:rgba(22,24,29,.3);
--sw-line:rgba(22,40,74,.25); /* contour des pastilles de couleur */
--toggle-off:#D9DDE4; /* interrupteurs inactifs */
/* --- Ombres --- */
--shadow-pop:0 18px 40px rgba(22,24,29,.12);
--shadow-knob:0 4px 16px rgba(10,12,16,.25);
--shadow-card:0 8px 20px rgba(22,40,74,.07);
--shadow-shell:0 26px 50px rgba(22,40,74,.16);
/* --- Grain « matière feutre » (SVG feTurbulence) --- */
--grain-o:.035;
--noise: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
--noise-soft: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
/* --- Typographie --- */
--sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
/* V2.2 — Fraunces retirée (retour client : plus d'italique serif). Manrope seule. */
/* --- Mouvement --- */
--ease:cubic-bezier(.25,.46,.45,.94); /* ease-out doux */
/* --- Échelle d'espacement (base 8 px) --- */
--sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
--sp-5:40px; --sp-6:48px; --sp-8:64px; --sp-12:96px; --sp-16:128px;
/* --- Rayons (V2.1 — angles adoucis, retour client) --- */
--radius-s:10px; /* champs de formulaire, petits encarts, liens de dropdown */
--radius-m:16px; /* cartes, placeholders .ph, panneaux */
--radius-l:24px; /* grands encarts : galerie, avant/après, vignettes, configurateur */
--radius-pill:999px; /* boutons pleins/outline, onglets, badges, pastilles */
--radius:var(--radius-s); /* alias rétrocompatible (ex-3px) — consommé par les composants V1/V2 */
/* --- Décors de fond .deco (V2.1 — voir SPEC §7.24) --- */
--deco-o:.05; /* opacité des motifs décoratifs (3–6 %) */
/* --- Layout --- */
--container:1200px;
--header-h:88px;
--header-h-scrolled:64px;
}
/* --------------------------------------------------------------------------
THÈME SOMBRE — encre bleutée profonde, jamais de noir pur.
Accents marine éclaircis vers le bleu acier du logo ; orange avivé.
Contrastes AA vérifiés sur --bg (#10141C) et --blanc (#1A2130).
-------------------------------------------------------------------------- */
[data-theme="dark"]{
color-scheme:dark;
--bg:#10141C;
--ink:#ECEEF2;
--grey:#A8B0BC;
--grey-2:#838C9B;
--navy:#7E96B8; /* bleu acier (proche du R du logo) — lisible sur fond sombre */
--navy-deep:#93A9C7; /* hover des boutons pleins (légèrement plus clair) */
--orange:#E8843A; /* orange avivé pour rester lisible */
--em-accent:#E8843A; /* mot accentué des titres — ≈6.8:1 sur #10141C */
--em-accent-beige:#E8843A; /* le « beige » sombre est une surface bleutée foncée — même accent */
--beige:#141926; /* sections de transition : surface bleutée */
--blanc:#1A2130; /* surfaces de composants */
--creme:#ECEEF2;
--error:#F2917C;
--navy-band:#161C28;
--navy-band-2:#11151F;
--btn-ink:#10141C; /* texte sombre sur les aplats bleu acier */
--line:rgba(236,238,242,.16);
--line-soft:rgba(236,238,242,.09);
--line-cl:rgba(236,238,242,.16);
--ink-50:rgba(236,238,242,.55);
--header-bg:rgba(16,20,28,.92);
--badge-bg:rgba(22,28,40,.92);
--stage-bg:#1C2331;
--ph-bg:#1F2532;
--ph-tag-ink:rgba(236,238,242,.72);
--ph-tag-bg:rgba(16,20,28,.62);
--track:rgba(236,238,242,.14);
--input-hover:rgba(236,238,242,.35);
--sw-line:rgba(236,238,242,.3);
--toggle-off:#39414F;
--shadow-pop:0 18px 40px rgba(0,0,0,.55);
--shadow-knob:0 4px 16px rgba(0,0,0,.5);
--shadow-card:0 8px 20px rgba(0,0,0,.35);
--shadow-shell:0 26px 50px rgba(0,0,0,.45);
--grain-o:.05;
--deco-o:.06; /* décors un peu plus présents pour rester perceptibles */
}
/* ==========================================================================
2. BASE
========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;background:var(--bg)}
body{
font-family:var(--sans);
font-weight:400;font-size:16px;line-height:1.7;
color:var(--ink);background:var(--bg);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
strong{font-weight:500}
address{font-style:normal}
ul[class],ol[class]{list-style:none}
::selection{background:var(--navy);color:var(--btn-ink)}
::placeholder{color:var(--grey-2);opacity:1}
section{scroll-margin-top:84px}
/* bascule de thème : transition circulaire via l'API View Transitions
(le clip-path est animé par app.js depuis les coordonnées du bouton) */
::view-transition-old(root),
::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* fallback « fondu simple » quand l'API est absente (classe posée 350 ms par app.js) */
html.theme-fading body,
html.theme-fading body *{
transition:background-color .3s var(--ease),color .3s var(--ease),
border-color .3s var(--ease),fill .3s var(--ease),stroke .3s var(--ease)!important;
}
/* ---------- accessibilité ---------- */
.skip{
position:absolute;left:-9999px;top:0;z-index:300;
background:var(--marine);color:#fff;padding:10px 18px;font-size:13px;
border-radius:var(--radius-s);
}
.skip:focus{left:16px;top:16px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
.sr-only{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;
}
/* ==========================================================================
3. HELPERS LAYOUT
========================================================================== */
.container{max-width:var(--container);margin:0 auto;padding:0 48px}
.sec{padding:var(--sp-16) 0}
.sec--beige{background:var(--beige)}
.sec--navy{background:var(--navy-band);color:rgba(250,250,247,.8)}
.grid{display:grid;gap:28px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
/* en-tête de section : titre à gauche, lien d'action à droite */
.sec-head{
display:flex;align-items:flex-end;justify-content:space-between;
gap:40px;margin-bottom:var(--sp-8);
}
.sec-head .btn-ligne{margin-bottom:8px;flex:none}
.sec-head--center{flex-direction:column;align-items:center;text-align:center}
/* ==========================================================================
4. TYPOGRAPHIE
========================================================================== */
.eyebrow{
display:flex;align-items:center;gap:16px;
font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
color:var(--navy);margin-bottom:26px;
}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--orange);flex:none}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:"";width:30px;height:1px;background:var(--orange);flex:none}
.sec--navy .eyebrow{color:rgba(250,250,247,.7)}
.sec--navy .eyebrow::before,.sec--navy .eyebrow::after{background:rgba(250,250,247,.4)}
.title{
font-size:clamp(30px,3.3vw,44px);font-weight:300;line-height:1.18;
letter-spacing:.015em;color:var(--navy);max-width:760px;
}
.title strong{font-weight:500}
.sec--navy .title{color:var(--creme)}
/* mot accentué : Manrope droite, graisse renforcée, accent orange de la charte —
UN mot ou groupe court par titre. (V2.2 retour client : remplace l'italique Fraunces.) */
.title em,.hero-title em,.band-phrase em,.page-head em{
font-family:var(--sans);font-style:normal;font-weight:500;
font-size:1em;letter-spacing:inherit;text-transform:none;
color:var(--em-accent);
}
/* fonds sombres (hero photo, en-têtes photo, sections marine) : orange éclairci — AA */
.hero-title em,.page-head--photo em,
.sec--navy .title em,.sec--navy .band-phrase em{color:var(--em-accent-dark)}
/* fonds beige (en-tête de page standard, bandeau de transition) : orange assombri — AA */
.page-head:not(.page-head--photo) em,
.transition-band .band-phrase em{color:var(--em-accent-beige)}
.lead{font-size:16px;color:var(--grey);max-width:560px;margin-top:18px}
.sec--navy .lead{color:rgba(250,250,247,.65)}
/* ==========================================================================
5. BOUTONS — un seul CTA primaire (.btn-plein) par écran
========================================================================== */
/* bouton signature « texte + flèche » */
.btn-ligne{
display:inline-flex;align-items:center;gap:14px;min-height:44px;
font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink);transition:color .25s var(--ease);cursor:pointer;
}
.btn-ligne svg{flex:none;transition:transform .25s var(--ease)}
.btn-ligne svg line,.btn-ligne svg path{stroke:currentColor}
.btn-ligne:hover{color:var(--orange)}
.btn-ligne:hover svg{transform:translateX(6px)}
.btn-ligne--light{color:var(--creme)}
.btn-ligne--light:hover{color:var(--orange)}
.btn-ligne--navy{color:var(--navy)}
.btn-ligne--navy:hover{color:var(--orange)}
/* sur fond marine : pas d'orange — le hover reste crème + flèche */
.sec--navy .btn-ligne,.site-footer .btn-ligne{color:rgba(250,250,247,.85)}
.sec--navy .btn-ligne:hover,.site-footer .btn-ligne:hover{color:var(--creme)}
/* bouton outline marine */
.btn-outline{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:44px;padding:12px 32px;
border:1px solid var(--navy);border-radius:var(--radius-pill);
font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:var(--navy);background:transparent;cursor:pointer;
transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn-outline:hover{background:var(--navy);color:var(--btn-ink)}
.btn-outline--light{border-color:rgba(250,250,247,.55);color:var(--creme)}
.btn-outline--light:hover{background:var(--creme);border-color:var(--creme);color:var(--marine)}
/* bouton plein marine — CTA primaire */
.btn-plein{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:44px;padding:12px 34px;
border:1px solid var(--navy);border-radius:var(--radius-pill);
font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--btn-ink);background:var(--navy);cursor:pointer;
transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.btn-plein:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn-plein .arr,.btn-outline .arr{transition:transform .25s var(--ease)}
.btn-plein:hover .arr,.btn-outline:hover .arr{transform:translateX(4px)}
/* ---------- micro-interaction « point → flèche » (InteractiveHoverButton) ----------
Un point discret précède le libellé ; au survol il s'efface vers la droite
pendant qu'un chevron glisse en fin de bouton. Largeurs fixes : aucun
décalage de mise en page, transform/opacity uniquement, pas de grossissement.
Le sélecteur :has() écarte les boutons qui embarquent déjà une flèche SVG. */
.btn-plein:not(:has(svg))::before,
.btn-outline:not(:has(svg))::before{
content:"";flex:none;width:5px;height:5px;border-radius:50%;
background:currentColor;opacity:.5;
transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.btn-plein:not(:has(svg)):hover::before,
.btn-plein:not(:has(svg)):focus-visible::before,
.btn-outline:not(:has(svg)):hover::before,
.btn-outline:not(:has(svg)):focus-visible::before{
opacity:0;transform:translateX(8px) scale(.4);
}
.btn-plein:not(:has(svg))::after,
.btn-outline:not(:has(svg))::after{
content:"";flex:none;width:7px;height:7px;
border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
transform:translateX(-10px) rotate(45deg);opacity:0;
transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.btn-plein:not(:has(svg)):hover::after,
.btn-plein:not(:has(svg)):focus-visible::after,
.btn-outline:not(:has(svg)):hover::after,
.btn-outline:not(:has(svg)):focus-visible::after{
opacity:1;transform:translateX(0) rotate(45deg);
}
/* ==========================================================================
6. HEADER — transparent sur hero, solide au scroll
========================================================================== */
.site-header{
--hd:var(--creme); /* couleur du texte du header */
position:fixed;top:0;left:0;right:0;z-index:100;color:var(--hd);
transition:background-color .35s var(--ease),box-shadow .35s var(--ease);
}
.header-in{
max-width:1344px;margin:0 auto;padding:0 48px;height:var(--header-h);
display:flex;align-items:center;justify-content:space-between;gap:32px;
transition:height .35s var(--ease);
}
.site-header.is-scrolled,
.site-header--solid{
--hd:var(--ink);
background:var(--header-bg);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
box-shadow:0 1px 0 var(--line-soft);
}
.site-header.is-scrolled .header-in{height:var(--header-h-scrolled)}
body.menu-open .site-header{--hd:var(--ink);background:var(--bg);box-shadow:none}
/* ---------- ancien logo texte extensible (V1) : F → Facility, R → Rénov ---------- */
.logo{
display:inline-flex;align-items:baseline;
font-size:21px;font-weight:700;letter-spacing:.05em;color:var(--hd);
transition:color .35s var(--ease);white-space:nowrap;
}
.logo-ext{
display:inline-block;max-width:0;opacity:0;overflow:hidden;vertical-align:baseline;
font-weight:300;letter-spacing:.03em;
transition:max-width .5s var(--ease),opacity .4s var(--ease);
}
.logo-amp{color:var(--orange);margin:0 .1em;transition:margin .5s var(--ease)}
.logo:hover .logo-ext,.logo:focus-visible .logo-ext{max-width:5.2em;opacity:1}
.logo:hover .logo-amp,.logo:focus-visible .logo-amp{margin:0 .28em}
/* ---------- logo IMAGE (V2) : monogramme PNG + mots qui se déploient ----------
logo-couleur (F noir + R bleu acier) sur header solide en thème clair ;
logo-sombre (F blanc cassé + R bleu acier) sur hero sombre ET en thème sombre.
L'ancien logo texte .logo-ext/.logo-amp reste supporté (pages V1). */
.logo--img{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:7px 0}
.logo-mono{position:relative;height:30px;width:72px;flex:none}
.logo-mono img{
position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;
transition:opacity .3s var(--ease);
}
.logo-mark--couleur{opacity:0}
.logo-mark--sombre{opacity:1}
.site-header.is-scrolled .logo-mark--couleur,
.site-header--solid .logo-mark--couleur,
body.menu-open .logo-mark--couleur{opacity:1}
.site-header.is-scrolled .logo-mark--sombre,
.site-header--solid .logo-mark--sombre,
body.menu-open .logo-mark--sombre{opacity:0}
[data-theme="dark"] .logo-mark--couleur{opacity:0!important}
[data-theme="dark"] .logo-mark--sombre{opacity:1!important}
/* les mots « FACILITY » et « RENOV » se déploient À CÔTÉ du monogramme */
.logo-words{
display:inline-flex;align-items:baseline;gap:.5em;
font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
color:var(--hd);transition:color .35s var(--ease);
}
.logo-words span{
display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
letter-spacing:.34em;
transition:max-width .5s var(--ease),opacity .4s var(--ease),letter-spacing .5s var(--ease);
}
.logo-words span+span{transition-delay:.06s}
.logo--img:hover .logo-words span,
.logo--img:focus-visible .logo-words span{max-width:7em;opacity:1;letter-spacing:.14em}
/* ---------- bouton de bascule clair/sombre ---------- */
.theme-toggle{
position:relative;width:44px;height:44px;flex:none;
display:inline-flex;align-items:center;justify-content:center;
border-radius:50%;color:var(--hd);
transition:color .35s var(--ease),background-color .25s var(--ease);
}
.theme-toggle:hover{background:rgba(127,134,147,.16)}
.theme-toggle svg{position:absolute;transition:transform .5s var(--ease),opacity .35s var(--ease)}
.theme-toggle .tt-sun{opacity:1;transform:none}
.theme-toggle .tt-moon{opacity:0;transform:rotate(-60deg) scale(.55)}
[data-theme="dark"] .theme-toggle .tt-sun{opacity:0;transform:rotate(60deg) scale(.55)}
[data-theme="dark"] .theme-toggle .tt-moon{opacity:1;transform:none}
/* ---------- barre de progression de lecture (2 px sous le header) ---------- */
.scroll-progress{
position:absolute;left:0;right:0;bottom:0;height:2px;
background:linear-gradient(90deg,var(--navy) 0%,var(--orange) 100%);
opacity:.85;transform:scaleX(0);transform-origin:left;
pointer-events:none;
}
/* ---------- navigation ---------- */
.nav{display:flex;align-items:center;gap:34px;margin-left:auto}
.nav-link{
position:relative;display:inline-flex;align-items:center;gap:7px;
font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
color:var(--hd);padding:14px 0;transition:color .35s var(--ease);cursor:pointer;
}
.nav-link::after{
content:"";position:absolute;left:0;bottom:8px;width:100%;height:1px;
background:var(--orange);transform:scaleX(0);transform-origin:left;
transition:transform .25s var(--ease);
}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link.is-active{font-weight:700}
.nav-link.is-active::after{transform:scaleX(1)}
.site-header.is-scrolled .nav-link.is-active,
.site-header--solid .nav-link.is-active{color:var(--navy)}
.nav .nav-cta{border-color:rgba(250,250,247,.55);color:var(--hd)}
.site-header.is-scrolled .nav .nav-cta,
.site-header--solid .nav .nav-cta{border-color:var(--navy);color:var(--navy)}
.site-header.is-scrolled .nav .nav-cta:hover,
.site-header--solid .nav .nav-cta:hover,
.nav .nav-cta:hover{background:var(--navy);border-color:var(--navy);color:var(--btn-ink)}
.nav .nav-cta{min-height:40px;padding:9px 22px;font-size:11.5px}
.nav .nav-cta.is-active{background:var(--navy);border-color:var(--navy);color:var(--btn-ink)}
/* V2.3 (retour client) — état ACTIF (page contact) : le couple fond marine /
texte contrasté doit survivre à la solidification du header. Sans ces règles,
« .site-header.is-scrolled .nav .nav-cta » (spécificité supérieure) repassait
le TEXTE en var(--navy) par-dessus le FOND var(--navy) hérité de .is-active :
pill illisible au scroll (les 2 thèmes). Le hover actif s'assombrit/s'éclaircit
via --navy-deep, comme .btn-plein — toujours sur --btn-ink (AA). */
.site-header.is-scrolled .nav .nav-cta.is-active,
.site-header--solid .nav .nav-cta.is-active{background:var(--navy);border-color:var(--navy);color:var(--btn-ink)}
.nav .nav-cta.is-active:hover,
.site-header.is-scrolled .nav .nav-cta.is-active:hover,
.site-header--solid .nav .nav-cta.is-active:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:var(--btn-ink)}
/* ---------- dropdown « Acoustique » ---------- */
.nav-drop{position:relative}
.nav-drop .chev{transition:transform .25s var(--ease)}
.nav-drop:hover .chev,.nav-drop:focus-within .chev{transform:rotate(180deg)}
.drop-panel{
position:absolute;top:calc(100% + 10px);left:50%;
transform:translate(-50%,8px);
min-width:248px;padding:8px;
background:var(--blanc);border:1px solid var(--line);border-radius:var(--radius-m);
box-shadow:var(--shadow-pop);
opacity:0;visibility:hidden;
transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.drop-panel::before{ /* pont invisible : le survol ne se coupe pas */
content:"";position:absolute;top:-12px;left:0;right:0;height:12px;
}
.nav-drop:hover .drop-panel,.nav-drop:focus-within .drop-panel{
opacity:1;visibility:visible;transform:translate(-50%,0);
}
.drop-panel a{
display:block;padding:11px 14px;border-radius:calc(var(--radius-m) - 8px);
font-size:13px;font-weight:500;letter-spacing:.03em;text-transform:none;
color:var(--ink);transition:background-color .2s var(--ease),color .2s var(--ease);
}
.drop-panel a:hover{background:var(--beige);color:var(--navy)}
.drop-panel a.is-active{color:var(--navy);font-weight:700}
/* ---------- burger + menu mobile ---------- */
.burger{
display:none;align-items:center;gap:10px;min-height:44px;
font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--hd);padding:8px 0;transition:color .35s var(--ease);
}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;position:relative}
.burger i::before,.burger i::after{
content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;
transition:transform .25s var(--ease);
}
.burger i::before{top:-6px}
.burger i::after{top:6px}
body.menu-open .burger i{background:transparent}
body.menu-open .burger i::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger i::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{
position:fixed;inset:0;z-index:95;background:var(--bg);
display:flex;flex-direction:column;justify-content:center;gap:2px;
padding:120px 48px 64px;overflow-y:auto;
opacity:0;visibility:hidden;
transition:opacity .3s var(--ease),visibility .3s;
}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
.mobile-menu a{
font-size:26px;font-weight:300;letter-spacing:.02em;
padding:12px 0;border-bottom:1px solid var(--line-soft);
}
.mobile-menu a:hover{color:var(--navy)}
.mobile-menu a.is-active{color:var(--navy);font-weight:500}
.mobile-menu a.sub{font-size:18px;padding-left:24px;color:var(--grey)}
.mobile-menu a.sub.is-active{color:var(--navy)}
.mobile-menu .mobile-foot{margin-top:32px;font-size:13px;color:var(--grey-2);border:none}
/* ==========================================================================
7. PLACEHOLDERS PHOTO — 100 % CSS, ratio réservé, étiquette obligatoire
========================================================================== */
.ph{position:relative;overflow:hidden;border-radius:var(--radius-m);background:var(--ph-bg)}
.ph::before{ /* lumière douce + grain « matière feutre » */
content:"";position:absolute;inset:0;
background-image:var(--noise-soft),radial-gradient(90% 60% at 28% 0%,rgba(255,255,255,.45),transparent 60%);
background-size:160px 160px,auto;
}
.ph__tag{
position:absolute;left:14px;bottom:14px;z-index:4;
font-size:11px;font-weight:500;letter-spacing:.04em;
color:var(--ph-tag-ink);background:var(--ph-tag-bg);
-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
padding:5px 12px;border-radius:var(--radius-pill);white-space:nowrap;
max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;
pointer-events:none;
}
.ph__tag--right{left:auto;right:14px}
.ph__tag--dark{color:rgba(250,250,247,.78);background:rgba(22,24,29,.45)}
/* teintes */
.ph--t1{background:linear-gradient(165deg,#E9E5DC 0%,#CDC7BA 100%)} /* beige chaud */
.ph--t2{background:linear-gradient(165deg,#E3E7ED 0%,#C3CAD5 100%)} /* gris bleuté */
.ph--t3{background:linear-gradient(165deg,#E8E0D2 0%,#C8BBA4 100%)} /* sable */
.ph--t4{background:linear-gradient(160deg,#33415E 0%,#1F3864 55%,#16284A 100%)} /* marine (photos sombres, hero) */
.ph--t5{background:linear-gradient(160deg,#9AA0A8 0%,#70767F 100%)} /* gris « avant travaux » */
.ph--t6{background:linear-gradient(165deg,#E2E6DE 0%,#C2CBBD 100%)} /* vert de gris */
.ph--hatch::after{ /* trame chantier */
content:"";position:absolute;inset:0;
background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 26px);
}
.ph--lines::after{ /* calepinage discret */
content:"";position:absolute;inset:0;opacity:.5;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 140px),
repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 110px);
}
/* ratios réservés — zéro layout shift */
.ph--169{aspect-ratio:16/9}
.ph--167{aspect-ratio:16/7}
.ph--43{aspect-ratio:4/3}
.ph--34{aspect-ratio:3/4}
.ph--11{aspect-ratio:1/1}
.ph--219{aspect-ratio:21/9}
.ph--fill{position:absolute;inset:0;border-radius:0}
/* ---- vraie image DANS un .ph (remplace le visuel CSS, zéro layout shift) ----
L'![]()
remplit le cadre arrondi du .ph et respecte le ratio
déjà réservé (.ph--169, .ph--43… ou .ph--fill) : aucun décalage de mise en
page. object-fit:cover recadre sans déformer ; border-radius:inherit reprend
l'arrondi du parent (--radius-m, ou 0 quand le .ph est en --fill / .card-media).
Apparition douce en fondu au chargement (opacity), neutralisée par
prefers-reduced-motion (§28) — l'image reste alors simplement visible. */
.ph__img{
position:absolute;inset:0;z-index:2;
display:block;width:100%;height:100%;
object-fit:cover;border-radius:inherit;
opacity:1;transition:opacity .6s var(--ease);
}
/* Fondu d'apparition si JS présent (html.js) : l'image part transparente puis
apparaît. Deux déclencheurs, l'un suffit — aucune image jamais bloquée :
1) app.js ajoute .is-loaded sur l'évènement `load` (fondu piloté) ;
2) filet de sécurité CSS pur : animation `phFadeIn` qui amène à opacity:1
même si le JS d'attache manque ou si l'image est déjà en cache.
Sans JS, l'image reste à opacity:1 (défaut ci-dessus). */
.js .ph__img{opacity:0;animation:phFadeIn .6s var(--ease) forwards}
.js .ph__img.is-loaded{opacity:1;animation:none}
@keyframes phFadeIn{to{opacity:1}}
/* dès qu'une vraie image est posée, masquer le décor CSS sous-jacent
(lumière + grain, trames .ph--hatch/.ph--lines) pour ne pas voiler la photo */
.ph.has-img::before,
.ph.has-img.ph--hatch::after,
.ph.has-img.ph--lines::after{display:none}
/* variante légende sur photo : voile/dégradé pour la lisibilité du texte
superposé (.ph__tag conservé). Le dégradé descend du bas, via tokens. */
.ph--overlay.has-img::after{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
border-radius:inherit;
background:linear-gradient(to top,rgba(22,24,29,.55) 0%,rgba(22,24,29,.12) 38%,transparent 60%);
}
[data-theme="dark"] .ph--overlay.has-img::after{
background:linear-gradient(to top,rgba(8,10,15,.66) 0%,rgba(8,10,15,.2) 40%,transparent 62%);
}
/* ==========================================================================
8. HERO — carrousel à barres de progression + bandeau marine
========================================================================== */
.hero{position:relative;height:100vh;min-height:660px;overflow:hidden;background:var(--navy-band-2)}
.hero::after{ /* grain sur les photos du hero */
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:var(--noise) repeat;background-size:160px 160px;opacity:var(--grain-o);
}
.hero-slide{
position:absolute;inset:0;opacity:0;pointer-events:none;
transition:opacity 1s var(--ease);
}
.hero-slide.is-active{opacity:1}
.hero-slide .ph__tag{left:auto;right:48px;bottom:auto;top:104px}
.hero-veil{
position:absolute;inset:0;z-index:2;pointer-events:none;
/* V2.4 (audit AA) — scrim renforcé sous le header TRANSPARENT : alpha .6 tenu
sur les ~112 premiers px (zone des liens de nav + libellé .nav-cta, crème
11,5–13 px / 500 → seuil 4,5:1), puis fondu vers le voile d'origine
(.12 à 42 %, .55 en bas — bandeau et bas de photo inchangés).
Avant : .42 en haut → min 3,07:1 sur photos claires (hero-1, real-1) ;
après : ≥ ~6:1 dans les deux thèmes. Partagé hero + .page-head--photo. */
background:linear-gradient(180deg,
rgba(10,14,22,.6) 0,rgba(10,14,22,.6) 112px,
rgba(10,14,22,.12) 42%,rgba(10,14,22,.55) 100%);
}
.hero-center{
position:relative;z-index:3;height:100%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:0 24px 150px;color:var(--creme);
}
.hero-kicker{
margin-bottom:26px;
font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
color:rgba(250,250,247,.8);
}
.hero-title{
font-size:clamp(44px,6.5vw,96px);font-weight:300;line-height:1.06;
letter-spacing:.02em;color:var(--creme);text-wrap:balance;
}
.hero-rule{width:56px;height:1px;background:rgba(250,250,247,.45);margin:32px auto 22px}
.hero-sub{
font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
color:rgba(250,250,247,.78);max-width:560px;
}
/* mots tournants synchronisés avec les slides (optionnel) */
.hero-words{position:relative;width:100%;height:1.15em}
.hero-words span{
position:absolute;left:0;right:0;top:0;opacity:0;
transition:opacity 1s var(--ease);
}
.hero-words span.is-active{opacity:1}
/* barres de progression — remplissage ORANGE (signature Fusion) */
.hero-bars{
position:absolute;left:50%;bottom:118px;transform:translateX(-50%);z-index:4;
display:flex;gap:10px;
}
.hero-bar{
position:relative;width:64px;height:44px;padding:0;
display:flex;align-items:center;cursor:pointer;
}
.hero-bar i{
display:block;width:100%;height:3px;border-radius:99px;
background:rgba(250,250,247,.3);overflow:hidden;
transition:background-color .25s var(--ease);
}
.hero-bar:hover i{background:rgba(250,250,247,.5)}
.hero-bar i span{
display:block;width:100%;height:100%;border-radius:99px;
background:var(--orange);transform:scaleX(0);transform-origin:left;
}
.hero-bar.is-active i span{animation:heroFill 6s linear forwards}
@keyframes heroFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* bandeau des 4 solutions — marine solide, visible sans scroller */
.hero-band{
position:absolute;left:0;right:0;bottom:0;z-index:5;
display:grid;grid-template-columns:repeat(4,1fr);
background:var(--navy-band);border-top:1px solid var(--line-cl);
}
.band-item{
display:flex;align-items:center;gap:14px;
padding:26px 28px;color:var(--creme);
border-left:1px solid var(--line-cl);
transition:background-color .3s var(--ease);
}
.band-item:first-child{border-left:none}
.band-n{ /* index Manrope gras droit — harmonisé avec .item-filet .num (V2.2) */
font-weight:800;font-size:12px;letter-spacing:.1em;
color:rgba(250,250,247,.6);
}
.band-t{font-size:14px;font-weight:500;letter-spacing:.04em;line-height:1.3}
.band-a{ /* flèche crème — pas d'orange sur marine */
margin-left:auto;flex:none;opacity:0;transform:translateX(-8px);
transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.band-a line,.band-a path{stroke:currentColor}
.band-item:hover{background:rgba(250,250,247,.07)}
.band-item:hover .band-a{opacity:1;transform:none}
/* ==========================================================================
9. EN-TÊTE DE PAGE INTÉRIEURE (pages sans hero plein écran)
========================================================================== */
.page-head{
padding:calc(var(--header-h) + var(--sp-8)) 0 var(--sp-8);
background:var(--beige);
}
.page-head .title{max-width:880px}
.page-head--photo{
position:relative;overflow:hidden;background:var(--navy-band-2);
padding:calc(var(--header-h) + var(--sp-12)) 0 var(--sp-12);color:var(--creme);
}
.page-head--photo .ph--fill{z-index:0}
.page-head--photo .container{position:relative;z-index:3}
.page-head--photo .title{color:var(--creme)}
.page-head--photo .eyebrow{color:rgba(250,250,247,.75)}
.page-head--photo .eyebrow::before{background:rgba(250,250,247,.45)}
.page-head--photo .lead{color:rgba(250,250,247,.72)}
.page-head--photo .hero-veil{z-index:2}
/* ==========================================================================
10. CARTES
========================================================================== */
.card{display:block}
.card-media{position:relative;overflow:hidden;border-radius:var(--radius-m)}
.card-media .ph{transition:transform .55s var(--ease);border-radius:0}
.card-media::after{
content:"";position:absolute;inset:0;background:rgba(31,56,100,.14);
opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
.card:hover .card-media .ph{transform:scale(1.045)}
.card:hover .card-media::after{opacity:1}
.card h3{
margin:22px 0 8px;font-size:18px;font-weight:500;letter-spacing:.02em;
color:var(--ink);transition:color .25s var(--ease);
}
.card:hover h3{color:var(--navy)}
.card p{font-size:14px;color:var(--grey);line-height:1.65;margin-bottom:14px}
.card .btn-ligne{font-size:11px;min-height:auto}
/* liste sobre à filet (univers acoustique, pourquoi nous…) */
.item-filet{border-top:1px solid var(--line);padding-top:28px}
.sec--navy .item-filet{border-top-color:var(--line-cl)}
.item-filet .num{ /* V2.2 retour client : Manrope 800 droit, marine adaptatif, discret */
font-family:var(--sans);font-style:normal;font-weight:800;
font-size:clamp(30px,3.3vw,44px);line-height:1;letter-spacing:.02em;
color:var(--navy);opacity:.9;
display:block;margin-bottom:20px;
}
.sec--navy .item-filet .num{color:rgba(250,250,247,.75)}
.item-filet h3{font-size:18px;font-weight:500;margin-bottom:10px;letter-spacing:.02em}
.item-filet p{font-size:14.5px;color:var(--grey);margin-bottom:18px}
.sec--navy .item-filet p{color:rgba(250,250,247,.65)}
/* ==========================================================================
11. SECTION DE TRANSITION BEIGE
========================================================================== */
.transition-band{
position:relative;background:var(--beige);overflow:hidden;
padding:var(--sp-12) 0;text-align:center;
}
.transition-band .band-deco{
position:absolute;right:-140px;top:50%;transform:translateY(-50%);
width:520px;height:520px;pointer-events:none;opacity:.9;
}
.transition-band .container{position:relative;z-index:2}
.band-phrase{
font-size:clamp(22px,2.6vw,32px);font-weight:300;line-height:1.4;
letter-spacing:.01em;color:var(--ink);max-width:760px;margin:0 auto var(--sp-4);
}
.band-phrase em{font-weight:700} /* corps 22–32 px : gras => seuil AA « texte large » dès 22 px */
/* ==========================================================================
12. REVEALS AU SCROLL — [data-reveal] + .is-visible, stagger 40 ms
Upgrade V2 « BlurFade » : opacité + flou 8px→0 + translation légère.
========================================================================== */
.js [data-reveal]{
opacity:0;transform:translateY(18px);filter:blur(8px);
transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease);
}
.js [data-reveal].is-visible{opacity:1;transform:none;filter:none}
/* ---- révélation mot à mot au scroll — [data-textreveal] (V2) ----
app.js découpe la phrase en .tr-word ; chaque mot passe de 0.15 à 1
selon la position de scroll. Sans JS / reduced-motion : texte intact. */
.js [data-textreveal] .tr-word{opacity:.15;transition:opacity .25s var(--ease)}
.js [data-textreveal] .tr-word.is-on{opacity:1}
/* ==========================================================================
13. MARQUEE LOGOS CLIENTS — N&B, pause + couleur au survol
========================================================================== */
.marquee{overflow:hidden}
.marquee--lined{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:34px 0}
.marquee-track{display:flex;width:max-content}
.js .marquee-track{animation:marquee 36s linear infinite}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
/* V2.3 — boucle EXACTE : translation d'UNE largeur de série. app.js duplique la
série N fois (assez pour couvrir la fenêtre + une série : jamais de trou) et
pose --marquee-shift:calc(-100%/N) sur la piste. Séries strictement identiques
⇒ -100%/N de la piste = exactement une série ⇒ raccord invisible.
Fallback -50% : cas historique à 2 séries (JS présent requis pour animer). */
@keyframes marquee{to{transform:translateX(var(--marquee-shift,-50%))}}
.marquee-set{display:flex;align-items:center;gap:84px;padding-right:84px;flex:none}
.client-logo{
display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
color:var(--c,var(--navy));
filter:grayscale(1);opacity:.42;cursor:default;
transition:filter .4s var(--ease),opacity .4s var(--ease);
}
.client-logo:hover{filter:grayscale(0);opacity:1}
.client-logo i{display:inline-block;font-style:normal;flex:none}
.lgm-sq{width:9px;height:9px;background:currentColor}
.lgm-dot{width:9px;height:9px;border-radius:50%;background:currentColor}
.lgm-ring{width:11px;height:11px;border-radius:50%;border:2.5px solid currentColor}
.lgm-bar{width:3px;height:16px;background:currentColor;transform:skewX(-18deg)}
/* ==========================================================================
14. MOTS-CLÉS DÉFILANTS — capitales estompées + mots pleins Manrope
(V2.2 : ex-italique Fraunces remplacée par Manrope grasse droite)
========================================================================== */
.words{
overflow:hidden;padding:22px 0;
border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.words-track{display:flex;width:max-content}
.js .words-track{animation:marquee 44s linear infinite}
.words:hover .words-track{animation-play-state:paused}
.words-set{display:flex;align-items:baseline;gap:0;padding-right:0;flex:none}
.w-sans{
font-size:clamp(15px,1.5vw,20px);font-weight:500;letter-spacing:.22em;
text-transform:uppercase;color:var(--ink-50);white-space:nowrap;padding:0 18px;
}
.w-serif{ /* nom de classe historique — rendu désormais en Manrope grasse droite */
font-weight:700;
font-size:clamp(16px,1.6vw,21px);color:var(--navy);white-space:nowrap;padding:0 18px;
}
.w-dot{font-style:normal;color:var(--orange);font-size:14px;align-self:center}
/* ==========================================================================
15. RÉALISATIONS — rideau (volets + monogramme FR)
========================================================================== */
.gallery-stage{
position:relative;overflow:hidden;border-radius:var(--radius-l);
aspect-ratio:16/7;min-height:340px;background:var(--stage-bg);
}
.gallery-slide{
position:absolute;inset:0;opacity:0;pointer-events:none;
transition:filter .3s var(--ease);
}
.gallery-slide.is-active{opacity:1}
.is-closing .gallery-slide.is-active{filter:brightness(.6)}
.shutter{
position:absolute;left:0;right:0;height:50.5%;background:var(--bg);
transform:scaleY(0);transition:transform .45s var(--ease);z-index:6;
}
.shutter--t{top:0;transform-origin:top}
.shutter--b{bottom:0;transform-origin:bottom}
.is-closing .shutter{transform:scaleY(1)}
.gallery-mark{
position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;
font-size:clamp(40px,5vw,60px);font-weight:300;letter-spacing:.14em;color:var(--navy);
opacity:0;transition:opacity .25s var(--ease) .18s;pointer-events:none;
}
.gallery-mark span{color:var(--orange);margin:0 .06em} /* le R du monogramme — fond clair, orange autorisé */
.is-closing .gallery-mark{opacity:1}
.gallery-foot{
display:flex;align-items:flex-end;justify-content:space-between;
gap:32px;margin-top:28px;
}
.gallery-title{font-size:19px;font-weight:500;letter-spacing:.01em;color:var(--ink)}
.gallery-meta{font-size:13.5px;color:var(--grey);margin-top:4px}
.gallery-nav{display:flex;align-items:center;gap:18px;flex:none}
.gallery-count{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--grey-2)}
.gallery-btn{
width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
display:flex;align-items:center;justify-content:center;color:var(--ink);
transition:border-color .25s var(--ease),color .25s var(--ease);cursor:pointer;
}
.gallery-btn svg line,.gallery-btn svg path{stroke:currentColor}
.gallery-btn:hover{border-color:var(--navy);color:var(--orange)}
/* ==========================================================================
16. AVANT / APRÈS — curseur draggable
========================================================================== */
.ba{
--pos:50%;
position:relative;overflow:hidden;border-radius:var(--radius-l);
aspect-ratio:16/8;min-height:320px;
cursor:col-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.ba-layer{position:absolute;inset:0}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);z-index:2}
.ba-handle{
position:absolute;top:0;bottom:0;left:var(--pos);transform:translateX(-50%);
width:44px;display:flex;align-items:center;justify-content:center;
cursor:col-resize;touch-action:none;z-index:5;background:transparent;border:none;
}
.ba-handle::before{
content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
background:rgba(250,250,247,.88);
}
.ba-knob{
position:relative;width:44px;height:44px;border-radius:50%;background:var(--bg);
box-shadow:var(--shadow-knob);
display:flex;align-items:center;justify-content:center;gap:5px;
transition:transform .2s var(--ease);
}
.ba-handle:hover .ba-knob{transform:scale(1.06)}
.ba-knob svg path{stroke:var(--navy);transition:stroke .2s var(--ease)}
.ba-handle:hover .ba-knob svg path{stroke:var(--orange)}
.ba-tag{
position:absolute;top:18px;z-index:4;
font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
padding:6px 14px;border-radius:var(--radius-pill);pointer-events:none;
}
.ba-tag--avant{
left:18px;color:var(--creme);background:rgba(22,24,29,.45);
-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
border:1px solid rgba(250,250,247,.3);
}
.ba-tag--apres{right:18px;color:#fff;background:var(--marine)} /* posé sur photo : marine fixe */
.ba-hint{margin-top:18px;font-size:12.5px;color:var(--grey-2);letter-spacing:.04em}
/* ==========================================================================
17. CHIFFRES CLÉS — compteurs animés
========================================================================== */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;margin-top:var(--sp-8)}
.stat{border-top:1px solid var(--line);padding-top:26px}
.stat-num{
font-size:clamp(40px,4vw,58px);font-weight:300;letter-spacing:.02em;line-height:1;
color:var(--orange); /* orange sur fonds clairs uniquement */
}
.stat-unit{font-size:15px;font-weight:500;color:var(--grey-2);margin-left:10px}
.stat p{font-size:13.5px;color:var(--grey);margin-top:14px;line-height:1.6}
.sec--navy .stat{border-top-color:var(--line-cl)}
.sec--navy .stat-num{color:var(--creme)} /* JAMAIS d'orange sur marine */
.sec--navy .stat-unit{color:rgba(250,250,247,.55)}
.sec--navy .stat p{color:rgba(250,250,247,.6)}
/* ==========================================================================
18. BARRES DE PERFORMANCE — [data-bars]
========================================================================== */
.perf-row{margin-bottom:18px}
.perf-row:last-child{margin-bottom:0}
.perf-lab{
display:flex;justify-content:space-between;gap:16px;
font-size:12.5px;font-weight:500;color:var(--grey);margin-bottom:7px;
}
.perf-lab b{color:var(--orange);font-weight:700}
.perf-track{height:4px;border-radius:2px;background:var(--track);overflow:hidden}
.perf-fill{display:block;height:100%;border-radius:2px;background:var(--orange);width:var(--w,0%)}
.js [data-bars] .perf-fill{width:0;transition:width 1s var(--ease) .3s}
.js [data-bars].is-in .perf-fill{width:var(--w)}
/* ==========================================================================
19. FAQ ACCORDÉON — [data-faq]
========================================================================== */
.faq-wrap{max-width:860px;margin:var(--sp-8) auto 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:23px 4px;text-align:left;min-height:44px;
font-size:16px;font-weight:500;letter-spacing:.01em;cursor:pointer;
transition:color .25s var(--ease);
}
.faq-q:hover{color:var(--navy)}
.faq-x{position:relative;width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.faq-x::before,.faq-x::after{content:"";position:absolute;background:var(--navy)}
.faq-x::before{left:0;right:0;top:50%;height:1.5px;transform:translateY(-50%)}
.faq-x::after{top:0;bottom:0;left:50%;width:1.5px;transform:translateX(-50%)}
.faq-item.is-open .faq-x{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a-in{overflow:hidden}
.faq-a p{font-size:14.5px;color:var(--grey);padding:0 48px 26px 4px;max-width:720px}
/* ==========================================================================
20. CONFIGURATEUR BOX — [data-box] (signature Piste 3)
========================================================================== */
.box-grid{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start}
.box-visual{
position:relative;border-radius:var(--radius-l);overflow:hidden;aspect-ratio:4/3.1;
background:linear-gradient(180deg,#F0EEE8 0%,#E7E4DC 63%,#CFCBC0 63.4%,#DCD9D0 100%);
border:1px solid var(--line);
}
.box-shell{
position:absolute;left:50%;bottom:11%;width:62%;height:74%;transform:translateX(-50%);
border-radius:14px;padding:16px;
background:#F4F4F2;border:1px solid #DAD8D2;
box-shadow:var(--shadow-shell);
transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
.box-visual[data-shell="noir"] .box-shell{background:#22252B;border-color:#22252B}
.box-visual[data-shell="marine"] .box-shell{background:var(--marine);border-color:var(--marine)} /* couleur produit : fixe */
.box-inner{ /* panneaux acoustiques intérieurs */
position:absolute;inset:16px;border-radius:8px;overflow:hidden;
background:
linear-gradient(180deg,rgba(0,0,0,.07),transparent 22%),
repeating-linear-gradient(90deg,#BCB19E 0 16px,#B0A492 16px 18px);
}
.box-glass{
position:absolute;inset:16px;border-radius:8px;pointer-events:none;
background:linear-gradient(105deg,transparent 52%,rgba(255,255,255,.3) 53% 66%,transparent 67%);
}
/* accessoires qui montent depuis le bas */
.acc-layer{position:absolute;opacity:0;transition:transform .45s var(--ease),opacity .3s var(--ease)}
.acc-layer.is-on{transform:none!important;opacity:1}
.lay-tablette{left:14%;bottom:34%;width:50%;height:7%;transform:translateY(330px)}
.lay-tablette::before{content:"";position:absolute;inset:0;border-radius:3px;background:linear-gradient(180deg,#CFA06A,#B4854F)}
.lay-tablette::after{content:"";position:absolute;left:12%;top:100%;width:7%;height:470%;background:#8A6A42;border-radius:0 0 2px 2px}
.lay-assise{left:70%;bottom:13%;width:13%;height:22%;transform:translateY(280px)}
.lay-assise::before{content:"";position:absolute;left:0;right:0;top:0;height:34%;border-radius:8px;background:linear-gradient(180deg,#46546F,#39455C)}
.lay-assise::after{content:"";position:absolute;left:42%;top:34%;width:14%;bottom:0;background:#39455C}
.lay-lum{left:22%;top:7%;width:54%;height:9px;transform:translateY(420px)}
.lay-lum::before{content:"";position:absolute;inset:0;border-radius:6px;background:#FFE2B0;box-shadow:0 8px 26px 9px rgba(255,214,150,.45)}
/* sélecteurs */
.ctrl-block{margin-top:30px}
.ctrl-block:first-child{margin-top:0}
.ctrl-label{
font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--navy);margin-bottom:13px;
}
.ctrl-label b{color:var(--orange);font-weight:500;letter-spacing:.02em;text-transform:none;font-size:13px}
.swatches{display:flex;gap:12px}
.sw{
width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid var(--sw-line);
background:var(--c,#fff);cursor:pointer;padding:0;position:relative;
transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.sw:hover{transform:scale(1.06)}
.sw.is-active{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--navy)}
.accs{display:grid;gap:10px}
.acc{
display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:14px;
min-height:44px;padding:11px 14px;
border:1px solid var(--line);border-radius:var(--radius);
background:var(--blanc);cursor:pointer;text-align:left;
transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.acc:hover{box-shadow:var(--shadow-card)}
.acc.is-on{border-color:var(--navy)}
.acc-win{width:58px;height:44px;border-radius:6px;background:var(--beige);overflow:hidden;display:grid;place-items:center}
.acc-win svg{transform:translateY(150%);transition:transform .35s var(--ease)}
.acc.is-on .acc-win svg{transform:none}
.acc-txt strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.acc-txt small{font-size:11.5px;color:var(--grey-2)}
.acc-sw{width:36px;height:21px;border-radius:var(--radius-pill);background:var(--toggle-off);position:relative;flex:none;transition:background-color .25s var(--ease)}
.acc-sw::after{
content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .25s var(--ease);
}
.acc.is-on .acc-sw{background:var(--navy)}
.acc.is-on .acc-sw::after{left:18px}
/* ==========================================================================
21. VIGNETTE PHOTO → VIDÉO — [data-video]
========================================================================== */
.vignette{
position:relative;border-radius:var(--radius-l);overflow:hidden;cursor:pointer;
min-height:44px;
}
.vignette .vid-over{
position:absolute;inset:0;z-index:5;display:flex;align-items:center;gap:16px;padding:0 20px;
background:rgba(17,27,48,.58);opacity:0;transition:opacity .3s var(--ease);
}
.vignette:hover .vid-over,
.vignette:focus-visible .vid-over,
.vignette.is-playing .vid-over{opacity:1}
.play-disc{
flex:none;width:46px;height:46px;border-radius:50%;background:var(--bg);
display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.play-disc svg{margin-left:3px}
.play-disc svg path{fill:var(--navy)}
.vid-over .vid-label{font-size:13px;font-weight:500;color:#fff;line-height:1.4}
/* ==========================================================================
22. ONGLETS — [data-tabs] (page contact : 4 entrées)
========================================================================== */
.tabs-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.tab{
min-height:44px;padding:11px 24px;
border:1px solid var(--line);border-radius:var(--radius-pill);
font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--grey);background:transparent;cursor:pointer;
transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.tab:hover{border-color:var(--navy);color:var(--navy)}
.tab.is-active{background:var(--navy);border-color:var(--navy);color:var(--btn-ink)}
.tab-panel{display:none}
.tab-panel.is-active{display:block}
/* ==========================================================================
23. FORMULAIRES — labels visibles, focus net, erreurs explicites
========================================================================== */
.form{max-width:720px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.field label{
font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--navy);
}
.field .req{color:var(--orange)}
.field input,.field textarea,.field select{
font:inherit;font-size:15px;color:var(--ink);
min-height:48px;padding:12px 16px;
background:var(--blanc);border:1px solid var(--line);border-radius:var(--radius-s);
transition:border-color .2s var(--ease);
width:100%;
}
.field textarea{min-height:140px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--input-hover)}
.field input:focus,.field textarea:focus,.field select:focus{
border-color:var(--navy);outline:2px solid rgba(31,56,100,.18);outline-offset:0;
}
.field-hint{font-size:12.5px;color:var(--grey-2)}
.field-error{display:none;font-size:13px;font-weight:500;color:var(--error)}
.field.is-error input,.field.is-error textarea,.field.is-error select{border-color:var(--error)}
.field.is-error .field-error{display:block}
.check{
display:flex;align-items:flex-start;gap:12px;margin-bottom:24px;
font-size:13.5px;color:var(--grey);cursor:pointer;
}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--navy);cursor:pointer}
/* ==========================================================================
24. CTA FINAL — effet d'écriture
========================================================================== */
.cta-final{position:relative;padding:172px 0;text-align:center;overflow:hidden}
.cta-title{
position:relative;font-size:clamp(34px,4.4vw,56px);font-weight:300;letter-spacing:.02em;
line-height:1.2;min-height:1.25em;color:var(--navy);
}
.caret{
display:inline-block;width:2px;height:.9em;background:var(--orange);
vertical-align:-.08em;margin-left:6px;opacity:0;
}
.caret.is-on{opacity:1;animation:caretBlink 1.05s step-end infinite}
@keyframes caretBlink{50%{opacity:0}}
.cta-sub{margin:26px auto 48px;font-size:15px;color:var(--grey);max-width:520px}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
/* ==========================================================================
25. FOOTER — marine
========================================================================== */
.site-footer{background:var(--navy-band);color:rgba(250,250,247,.75);padding:88px 0 40px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:56px}
.footer-logo{font-size:24px;font-weight:700;letter-spacing:.05em;color:var(--creme)}
.footer-logo span{color:var(--creme);opacity:.85;margin:0 .12em} /* & crème — pas d'orange sur marine */
/* logo image du footer (V2) : logo-blanc sur marine (clair), logo-sombre en thème sombre */
.footer-logo--img{position:relative;display:inline-block;line-height:0}
.footer-logo--img img{display:block;height:34px;width:auto;transition:opacity .35s var(--ease)}
.footer-logo--img .logo-foot--sombre{position:absolute;left:0;top:0;opacity:0}
[data-theme="dark"] .footer-logo--img .logo-foot--blanc{opacity:0}
[data-theme="dark"] .footer-logo--img .logo-foot--sombre{opacity:1}
.footer-tagline{
margin-top:18px;font-size:14px;font-weight:300;
color:rgba(250,250,247,.6);max-width:300px;line-height:1.7;
}
.footer-h{
font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
/* V2.4 (audit AA) — .45 donnait ≈3,6:1 sur marine en clair ; .58 donne
≈4,9:1 clair / ≈6:1 sombre (marge sous le grain du footer) en gardant
la hiérarchie titre (estompé) / liens (.75). */
color:rgba(250,250,247,.58);margin-bottom:22px;
}
.footer-grid ul li{margin-bottom:12px}
.footer-grid a{font-size:14px;transition:color .25s var(--ease)}
.footer-grid a:hover{color:var(--creme);text-decoration:underline;text-underline-offset:4px}
.footer-grid address{font-size:14px;line-height:1.9}
.footer-bottom{
margin-top:72px;padding-top:28px;border-top:1px solid rgba(250,250,247,.14);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
font-size:12.5px;color:rgba(250,250,247,.5);
}
.footer-bottom a{transition:color .25s var(--ease)}
.footer-bottom a:hover{color:var(--creme)}
/* ==========================================================================
26. BADGE MAQUETTE
========================================================================== */
.badge-maquette{
position:fixed;right:18px;bottom:18px;z-index:200;
font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--grey);
background:var(--badge-bg);border:1px solid var(--line);border-radius:var(--radius-pill);
padding:8px 16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
pointer-events:none;
}
/* ==========================================================================
26 bis. GRAIN « NoiseTexture » + AJUSTEMENTS THÈME SOMBRE
========================================================================== */
/* .grain : utilitaire public (surfaces sombres, placeholders custom des pages).
Appliqué d'office aux grandes surfaces sombres du système. */
.grain,.sec--navy,.site-footer{position:relative}
.grain::after,
.sec--navy::after,
.site-footer::after,
.page-head--photo::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:var(--noise) repeat;background-size:160px 160px;
opacity:var(--grain-o);
}
/* placeholders : teintes assombries, désaturées, même esprit matière */
[data-theme="dark"] .ph::before{
background-image:var(--noise-soft),radial-gradient(90% 60% at 28% 0%,rgba(255,255,255,.07),transparent 60%);
}
[data-theme="dark"] .ph--t1{background:linear-gradient(165deg,#2B2B33 0%,#1E1E25 100%)}
[data-theme="dark"] .ph--t2{background:linear-gradient(165deg,#232B3B 0%,#192030 100%)}
[data-theme="dark"] .ph--t3{background:linear-gradient(165deg,#2E2A22 0%,#211E18 100%)}
[data-theme="dark"] .ph--t5{background:linear-gradient(160deg,#383C44 0%,#262932 100%)}
[data-theme="dark"] .ph--t6{background:linear-gradient(165deg,#252B26 0%,#1A201C 100%)}
/* .ph--t4 (marine photo sombre) reste identique dans les deux thèmes */
/* marquee logos clients : les teintes inline des pages restent lisibles */
[data-theme="dark"] .client-logo{filter:grayscale(1) brightness(2.1);opacity:.5}
[data-theme="dark"] .client-logo:hover{filter:grayscale(0) brightness(1.4);opacity:1}
/* scène du configurateur : pièce sombre */
[data-theme="dark"] .box-visual{
background:linear-gradient(180deg,#1C2230 0%,#181D29 63%,#10141C 63.4%,#161B26 100%);
border-color:var(--line);
}
/* footer : liseré subtil pour détacher la surface du fond */
[data-theme="dark"] .site-footer{box-shadow:0 -1px 0 var(--line-cl)}
/* ==========================================================================
26 ter. DÉCORS DE FOND — bibliothèque .deco (V2.1, voir SPEC §7.24)
Motifs très pâles (opacité --deco-o ≈ 5 %) qui habillent les sections par-
dessus le grain existant — habillé mais jamais chargé. JAMAIS au-dessus du
contenu : pointer-events:none + z-index:-1 sous isolation:isolate.
Usage :
Règles : aria-hidden="true" obligatoire, 2–3 décors par PAGE maximum,
couleur currentColor (thème-aware) ; sur surface sombre : ajouter .deco--cl.
========================================================================== */
.has-deco{position:relative;isolation:isolate;overflow:hidden}
.deco{
position:absolute;z-index:-1;pointer-events:none;user-select:none;
color:var(--navy);opacity:var(--deco-o);
}
.deco--cl{color:var(--creme)} /* décor crème sur .sec--navy / footer */
/* tailles (2–3 variantes par motif) */
.deco--s{scale:.7}
.deco--l{scale:1.4}
/* positions — coins, à l'intérieur de la section */
.deco--tl{top:var(--sp-6);left:var(--sp-6)}
.deco--tr{top:var(--sp-6);right:var(--sp-6)}
.deco--bl{bottom:var(--sp-6);left:var(--sp-6)}
.deco--br{bottom:var(--sp-6);right:var(--sp-6)}
/* positions débordantes — le motif sort du coin (rogné par .has-deco) */
.deco--bleed-tl{top:0;left:0;translate:-38% -38%}
.deco--bleed-tr{top:0;right:0;translate:38% -38%}
.deco--bleed-bl{bottom:0;left:0;translate:-38% 38%}
.deco--bleed-br{bottom:0;right:0;translate:38% 38%}
/* 1. lames verticales fines — rappel des panneaux acoustiques */
.deco-slats{
width:300px;height:190px;
background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 20px);
}
/* 2. arcs / anneaux fins concentriques */
.deco-ring{width:340px;height:340px;border:1.5px solid currentColor;border-radius:50%}
.deco-ring::before,.deco-ring::after{
content:"";position:absolute;border:1.5px solid currentColor;border-radius:50%;
}
.deco-ring::before{inset:13%}
.deco-ring::after{inset:27%}
/* 3. trame de points */
.deco-dots{
width:260px;height:180px;
background-image:radial-gradient(currentColor 1.3px,transparent 1.4px);
background-size:22px 22px;
}
/* 4. ligne fine qui serpente (mask SVG rempli de currentColor → thème-aware) */
.deco-wave{
width:440px;height:90px;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 90' fill='none'%3E%3Cpath d='M2 45C42 8 82 8 122 45s80 37 120 0 80-37 120 0 60 37 76 18' stroke='%23000' stroke-width='2'/%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 440 90' fill='none'%3E%3Cpath d='M2 45C42 8 82 8 122 45s80 37 120 0 80-37 120 0 60 37 76 18' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* 5. grand cercle pâle débordant du coin d'une section */
.deco-circle{width:560px;height:560px;border:1.5px solid currentColor;border-radius:50%}
.deco-circle::before{
content:"";position:absolute;inset:16%;
border:1px solid currentColor;border-radius:50%;
}
/* mobile : on retire les décors (comme .band-deco) — l'espace manque */
@media (max-width:820px){.deco{display:none}}
/* ---- trait serpentant vertical [data-beam-zigzag] (V2.1, voir SPEC §7.25) ----
app.js injecte un