/* =========================================================
   UniC Plaquiste — v5 « Voyage horizontal »
   La molette reste verticale ; le rail se déplace latéralement.
   Les panneaux arrivent par la droite, comme une pellicule de cinéma.
   ========================================================= */

:root {
    /* Fond de page : charbon chaud (référence) */
    --page:      #17120E;
    --noir:      #0E0D0C;
    --charbon:   #1E1A16;
    --sable:     #EBE2D5;
    --creme:     #F7E9D7;
    --brun:      #241C15;
    --accent:    #FF5200;
    --or:        #D6A14F;   /* l'or de la marque (mock) */
    --brun-hero: #1B120C;
    --accent-2:  #C1370A;
    --vert:      #2E4632;
    --gris:      #8F887F;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Typo : seuls « UniC » et les titres de panneau sont XXL */
    --t-hero:   clamp(3.4rem, 17vw, 16rem);
    --t-title:  clamp(2.2rem, 5.2vw, 6rem);   /* titres de panneau, style éditorial */
    --t-h3:     clamp(1.8rem, 3.4vw, 3.4rem);
    --t-h4:     clamp(1rem, 1.2vw, 1.2rem);
    --t-body:   1rem;
    --t-small:  0.9rem;
    --t-label:  0.72rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: var(--t-body);
    background: var(--page);
    color: var(--creme);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: auto; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

h1, h2, h3, .word-main, .stat-num, .footer-huge-logo span {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.95;
}
p { line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.eyebrow {
    display: block; text-transform: uppercase; letter-spacing: 0.2em;
    font-size: var(--t-label); font-weight: 700; color: var(--accent); margin-bottom: 22px;
}
.eyebrow--clair { color: rgba(247,233,215,0.7); }
.eyebrow--vert  { color: var(--vert); }

/* =========================================================
   NAVIGATION
   ========================================================= */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 22px 4%;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 1000;
    background: linear-gradient(to bottom, rgba(10,8,6,0.9) 20%, transparent);
    pointer-events: none;
}
.navbar > * { pointer-events: auto; }
.logo { text-decoration: none; display: block; line-height: 1; }
.logo-main { display: block; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.42em; color: var(--creme); }
.logo-sub  { display: block; font-size: 0.56rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--or); margin-top: 5px; }
.nav-links { display: flex; align-items: center; }
.nav-links a {
    text-decoration: none; margin: 0 16px;
    font-size: var(--t-label); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    opacity: 0.72; transition: opacity 0.25s ease;
}
.nav-links a:hover, .nav-links a.is-active { opacity: 1; }
.nav-links a.is-active { text-decoration: underline; text-underline-offset: 6px; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.btn-primary {
    background: var(--creme); color: #16110D;
    padding: 11px 20px; border-radius: 30px;
    text-decoration: none; font-weight: 700; font-size: 0.82rem; white-space: nowrap;
    transition: transform 0.25s ease, background 0.25s ease;
}
.btn-primary:hover { background: #fff; transform: scale(1.04); }
/* Le voile derrière le menu mobile. Il n'existait pas : toucher à côté
   du menu ne fermait donc rien. Il est AVANT la navbar dans le HTML mais
   au-dessus de la page grâce au z-index. */
.nav-fond {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(8, 6, 4, 0.6);
    opacity: 0; transition: opacity 0.35s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-fond[hidden] { display: none; }
.nav-fond.is-on { opacity: 1; }

.burger { display: none; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; }
.burger span { display: block; height: 2px; width: 22px; background: var(--creme); transition: transform 0.3s var(--ease); }
.burger.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger.open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* =========================================================
   HERO — mot géant centré (structure du projet "horizontal")
   ========================================================= */
.scroll-sequence { height: 440vh; position: relative; background: var(--brun-hero); }
.sticky-container {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}

.hero-media {
    position: absolute; inset: 0; overflow: hidden;
    transform-origin: center;
    transform: translate3d(0,0,0) scale(1);
    will-change: transform;
    backface-visibility: hidden;
}
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }
/* Voile sombre : le JS l'intensifie pendant que le mot se remplit, pour le faire ressortir */
.hero-dim { position: absolute; inset: 0; background: #0B0705; opacity: 0; will-change: opacity; }
/* Voile de lisibilité permanent, léger */
.hero-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,7,5,0.4) 0%, rgba(11,7,5,0.08) 40%, rgba(11,7,5,0.62) 100%);
}

.hero-particles { position: absolute; inset: 0; z-index: 9; pointer-events: none; will-change: opacity; }
.hero-particles span {
    position: absolute; bottom: -6%; left: var(--x);
    width: var(--s); height: var(--s); border-radius: 50%;
    background: rgba(255,236,205,0.8); box-shadow: 0 0 8px rgba(255,220,170,0.5);
    opacity: 0; animation: flotte var(--t) linear var(--d) infinite;
}
@keyframes flotte {
    0%   { transform: translate3d(0,0,0) scale(0.5);            opacity: 0; }
    12%  {                                                      opacity: 0.85; }
    50%  { transform: translate3d(22px,-55svh,0) scale(1);      opacity: 0.55; }
    100% { transform: translate3d(-16px,-112svh,0) scale(1.15); opacity: 0; }
}
.hero-particles.is-off { visibility: hidden; }

/* --- LE MOT GÉANT, CENTRÉ --- */

/* =========================================================
   AURA NÉON DU HERO

   ⚠️ LE BUG DE LA VERSION PRÉCÉDENTE :
   l'épaisseur était en POURCENTAGE de l'écran (13 %).
   Sur un téléphone de 400 px -> 52 px : correct.
   Sur un PC de 1920 px      -> 250 px de chaque côté : ÉNORME.
   D'où les grosses taches violettes qui envahissaient l'écran.

   ✅ LA CORRECTION : l'épaisseur est désormais en PIXELS.
   Le liseré fait la même finesse sur téléphone et sur PC.
   ========================================================= */
:root {
    /* 🎨 Néon cyberpunk : violet -> rose -> magenta -> bleu cyan -> violet */
    --aura-1: 150,  60, 255;   /* violet électrique */
    --aura-2: 255,  45, 160;   /* rose vif */
    --aura-3: 255,   0, 220;   /* magenta */
    --aura-4:  40, 190, 255;   /* bleu cyan */
    --aura-5: 110,  70, 255;   /* violet */

    /* ⚙️ ÉPAISSEUR DU LISERÉ, EN PIXELS (identique PC / téléphone) */
    --aura-ep-x: clamp(34px, 5vw, 90px);    /* gauche / droite */
    --aura-ep-y: clamp(26px, 4vh, 70px);    /* haut / bas */
}

.hero-aura {
    position: absolute; inset: 0; z-index: 8;
    pointer-events: none;
    overflow: hidden;

    opacity: 0;                 /* INVISIBLE au chargement — le JS l'allume au scroll */
    /* ⚠️ ÉTAIT « opacity, transform ». Le transform ne sert plus (voir plus bas) :
       le déclarer force une couche GPU supplémentaire pour rien. */
    will-change: opacity;

    /* Le CADRE : opaque sur les 4 bords (en px), totalement vide au centre. */
    -webkit-mask-image:
        linear-gradient(to right,  #000 0, transparent var(--aura-ep-x)),
        linear-gradient(to left,   #000 0, transparent var(--aura-ep-x)),
        linear-gradient(to bottom, #000 0, transparent var(--aura-ep-y)),
        linear-gradient(to top,    #000 0, transparent var(--aura-ep-y));
    -webkit-mask-composite: source-over;
    mask-image:
        linear-gradient(to right,  #000 0, transparent var(--aura-ep-x)),
        linear-gradient(to left,   #000 0, transparent var(--aura-ep-x)),
        linear-gradient(to bottom, #000 0, transparent var(--aura-ep-y)),
        linear-gradient(to top,    #000 0, transparent var(--aura-ep-y));
    mask-composite: add;
}
/* ⚠️ SUPPRIMÉ : « animation: aura-respire » (scale 1 -> 1.018 sur 12 s).
   1,8 % d'agrandissement sur 12 secondes : personne ne l'a jamais vu.
   Mais cet élément porte un MASQUE à 4 dégradés. Tant qu'il bouge, le
   navigateur doit ré-appliquer les 4 masques à chaque image, 60 fois par
   seconde. Immobile, il calcule le masque UNE fois et le garde en cache.
   Effet visuel : nul. Gain : réel, et c'est sur le Hero — donc sur les
   premières secondes que voit chaque visiteur. */

/* Le disque de couleurs qui tourne lentement : les teintes glissent le long du bord. */
.hero-aura i {
    position: absolute;
    top: 50%; left: 50%;
    /* ⚠️ ÉTAIT 200vmax : sur un écran 1920, ça faisait un carré de 3840 px,
       soit 14,7 millions de pixels que la carte graphique garde en mémoire
       (≈ 59 Mo) et fait tourner en boucle. Sur téléphone, ça étouffe le GPU.
       ✅ 145vmax suffit MATHÉMATIQUEMENT : un carré qui tourne autour de son
       centre couvre l'écran dès que son côté dépasse la diagonale, et la
       diagonale ne peut jamais dépasser 141vmax. On garde 4 vmax de marge.
       Résultat : moitié moins de pixels, rendu identique à l'œil. */
    width: 145vmax; height: 145vmax;
    margin: -72.5vmax 0 0 -72.5vmax;
    display: block;
    background: conic-gradient(from 0deg,
        rgba(var(--aura-1), 1)   0deg,
        rgba(var(--aura-2), 1)  72deg,
        rgba(var(--aura-3), 1) 144deg,
        rgba(var(--aura-4), 1) 216deg,
        rgba(var(--aura-5), 1) 288deg,
        rgba(var(--aura-1), 1) 360deg);
    will-change: transform;
    animation: aura-tourne 26s linear infinite;
}
@keyframes aura-tourne { to { transform: rotate(360deg); } }

/* Liseré blanc très fin, collé au bord : c'est ce qui fait "néon" et non "tache". */
.hero-aura::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    box-shadow: inset 0 0 22px -8px rgba(255, 255, 255, 0.4);
}

/* Appareil peu puissant : l'aura reste, seule sa rotation s'arrête. */
body.eco .hero-aura i { animation: none; }

/* Halo sombre derrière le mot : il fait ressortir le contour sur le bois clair
   comme sur le tapis vert. Statique = aucun coût pendant le scroll. */
.word-halo {
    position: absolute; z-index: 9; inset: 0;
    background: radial-gradient(58% 42% at 50% 50%, rgba(8,5,3,0.72) 0%, rgba(8,5,3,0.35) 55%, transparent 78%);
    opacity: 0; will-change: opacity; pointer-events: none;
}
.hero-word {
    position: absolute; z-index: 10;
    display: grid; place-items: center;    /* 2 calques dans la même cellule = superposition parfaite */
    text-align: center; width: 100%;
    opacity: 0;
    transform: translate3d(0,0,0) scale(0.88);
    will-change: transform, opacity;
    pointer-events: none;
}
.word-layer { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; }
.word-main {
    display: block;
    font-family: 'Archivo', sans-serif; font-weight: 900;
    font-size: clamp(5.2rem, 16vw, 15rem);
    text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.86;
}
.word-sub {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(0.85rem, 3vw, 2.4rem); font-weight: 300;
    letter-spacing: 0.42em; padding-left: 0.42em;
    text-transform: uppercase; margin-top: 0.4em;
    color: var(--or);
}
/* ÉTAPE 1 : contour ÉPAIS et NET — chaque lettre doit sortir, pas seulement le C */
.word-layer--stroke {
    color: transparent;
    -webkit-text-stroke: 3px #FFF6E8;
    opacity: 1; will-change: opacity;
}
.word-layer--stroke .word-sub { -webkit-text-stroke: 0; color: var(--or); }
/* ÉTAPE 2 : les lettres se remplissent avec la photo */
.word-layer--filled {
    /* Image DÉJÀ éclaircie (aucun filter à calculer) + WebP avec repli JPEG */
    background-image: url('images/hero-fill.jpg');
    background-image: image-set(url('images/hero-fill.webp') type('image/webp'), url('images/hero-fill.jpg') type('image/jpeg'));
    background-size: cover; background-position: center 40%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    opacity: 0; will-change: opacity;
}
.word-layer--filled .word-sub { -webkit-text-fill-color: var(--or); background: none; }

.slogan {
    position: absolute; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 11;
    font-size: clamp(1rem, 1.4vw, 1.3rem); text-align: center; padding: 0 24px;
    color: var(--creme); text-shadow: 0 2px 20px rgba(0,0,0,0.7);
    will-change: opacity;
}
.scroll-hint {
    position: absolute; bottom: calc(34px + env(safe-area-inset-bottom)); z-index: 11;
    font-size: var(--t-label); letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700;
    color: rgba(247,233,215,0.8); will-change: opacity;
}
.scroll-hint span { display: block; animation: bob 2.2s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* =========================================================
   LE RAIL HORIZONTAL
   .hscroll  = zone haute (sa hauteur = la distance latérale à parcourir)
   .hviewport= écran figé (sticky) pendant tout le voyage
   .htrack   = la pellicule qui glisse vers la gauche
   ========================================================= */
.hscroll { position: relative; background: var(--page); }
.hviewport {
    position: sticky; top: 0;
    height: 100vh; height: 100svh; width: 100%;
    overflow: hidden;
    display: flex; align-items: center;
}
.htrack {
    display: flex; align-items: center;
    gap: 16px;
    padding: 0 6vw;
    height: 100%;
    will-change: transform;
    transform: translate3d(0,0,0);
}

/* --- Un panneau = une carte de la pellicule --- */
.panel {
    position: relative;
    flex: 0 0 auto;
    height: 78vh;
    overflow: hidden;
    display: flex; align-items: center;
    /* PAS de will-change ici : 9 panneaux = 9 couches GPU inutiles = ca rame.
       Seuls le rail et les images en ont besoin. */
    contain: paint;             /* le navigateur n'a plus a repeindre hors du panneau */
}
.panel--full   { width: min(92vw, 1150px); }
.panel--wide   { width: min(64vw, 860px); }
.panel--narrow { width: min(34vw, 420px); }

.panel--noir    { background: var(--noir); }
.panel--charbon { background: var(--charbon); }
.panel--sable   { background: var(--sable); color: var(--brun); }
.panel--brun    { background: linear-gradient(150deg, var(--accent-2) 0%, #7A2408 55%, #3A1405 100%); }
.panel--cta     { background: radial-gradient(120% 100% at 50% 0%, #2A1A10 0%, var(--noir) 70%); }

.panel-inner { padding: clamp(32px, 4.5vw, 70px); width: 100%; }
.panel-inner--center { text-align: center; }
.panel-inner--split { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(30px, 4vw, 60px); align-items: center; }

.panel-title { font-size: var(--t-title); color: var(--creme); }
.panel-title--sm { font-size: var(--t-h3); }
.panel--sable .panel-title { color: var(--vert); }
.panel-lead { margin-top: 26px; max-width: 460px; color: rgba(247,233,215,0.6); font-size: 1.05rem; }

/* --- Médias : parallaxe latérale pilotée par le JS --- */
.panel-media { position: relative; width: 100%; height: 100%; overflow: hidden; }
.panel-media img {
    width: 100%; height: 100%; object-fit: cover;
    transform: translate3d(0,0,0) scale(1.14);   /* marge pour que la parallaxe ne laisse aucun vide */
    will-change: transform;
}
.panel-media figcaption {
    position: absolute; left: 20px; right: 20px; bottom: 20px;
    font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.12em;
    font-weight: 700; color: var(--creme); text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.media-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 40px;
    background: linear-gradient(0deg, rgba(10,8,6,0.9) 10%, transparent 90%);
}
.media-tag { display: block; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.media-overlay h3 { font-size: var(--t-h3); color: var(--creme); }

/* --- Chiffre clé --- */
.stat-num { font-size: clamp(3.5rem, 7vw, 7rem); color: var(--creme); line-height: 0.9; }
.stat-num span { font-size: 0.32em; margin-left: 8px; letter-spacing: 0; }
.stat-label { margin-top: 22px; color: rgba(247,233,215,0.75); font-size: var(--t-small); max-width: 300px; margin-inline: auto; }

/* --- Services (filets pointillés, réf. photo 2) --- */
.srv-list { border-top: 1px dashed rgba(247,233,215,0.18); }
.srv {
    display: grid; grid-template-columns: 44px 1fr 36px;
    align-items: center; gap: 22px;
    padding: clamp(20px, 2.4vw, 32px) 0;
    border-bottom: 1px dashed rgba(247,233,215,0.18);
    text-decoration: none;
    transition: background 0.35s var(--ease);
}
.srv:hover { background: rgba(247,233,215,0.03); }
.srv-num { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.16em; color: var(--gris); }
.srv h3 { font-size: var(--t-h3); transition: color 0.3s ease, transform 0.45s var(--ease); }
.srv p { grid-column: 2; font-size: var(--t-small); color: var(--gris); margin-top: 8px; }
.srv:hover h3 { color: var(--accent); transform: translateX(10px); }
.srv-arrow { font-size: 1.3rem; color: var(--gris); justify-self: end; transition: transform 0.4s var(--ease), color 0.3s ease; }
.srv:hover .srv-arrow { transform: translateX(8px); color: var(--creme); }

/* --- Badge « pastilles » --- */
.badge { position: relative; width: 100%; aspect-ratio: 1/1; display: grid; place-items: center; }
.badge-rings { position: absolute; inset: 0; display: grid; place-items: center; }
.ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(46,70,50,0.35); }
.ring--1 { width: 100%; height: 100%; animation: tourne 46s linear infinite; }
.ring--2 { width: 82%; height: 82%; border-color: rgba(46,70,50,0.28); animation: tourne 34s linear infinite reverse; }
.ring--3 { width: 64%; height: 64%; border-color: rgba(46,70,50,0.2); animation: tourne 26s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.badge-window {
    position: relative; z-index: 2; width: 100%; height: 78%; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.badge-track { list-style: none; display: flex; flex-direction: column; align-items: center; animation: monte 16s linear infinite; will-change: transform; }
@keyframes monte { to { transform: translate3d(0,-50%,0); } }
.pill {
    flex: 0 0 auto; height: 54px; display: flex; align-items: center; justify-content: center;
    padding: 0 26px; margin: 5px 0; border-radius: 999px;
    background: var(--brun); color: var(--sable);
    font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
    white-space: nowrap; transform: translateX(var(--dx));
    box-shadow: 0 6px 20px rgba(32,29,24,0.16);
}
.why-text p { color: #5F584B; font-size: var(--t-small); margin: 18px 0 26px; max-width: 400px; }
.why-list { list-style: none; display: flex; gap: 34px; }
.why-list strong { display: block; font-family: 'Archivo', sans-serif; font-size: 1.7rem; font-weight: 900; letter-spacing: -0.03em; color: var(--brun); }
.why-list span { font-size: var(--t-label); color: #7A7263; }

/* --- Réalisations (paysage) --- */
.projets { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 10px; }
.projet figure { height: 240px; border-radius: 3px; margin-bottom: 16px; }
.projet h4 { font-size: var(--t-h4); font-weight: 700; line-height: 1.35; }
.projet span { display: block; margin-top: 8px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); font-weight: 700; }

/* --- Témoignages --- */
.quotes { display: grid; gap: 0; border-top: 1px dashed rgba(247,233,215,0.18); }
.quote { padding: 34px 0; border-bottom: 1px dashed rgba(247,233,215,0.18); }
.stars { color: var(--creme); font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 16px; }
.stars em { font-style: normal; color: var(--gris); font-weight: 700; margin-left: 6px; }
.quote blockquote { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(1.1rem, 1.7vw, 1.7rem); line-height: 1.35; letter-spacing: -0.02em; max-width: 620px; }
.quote mark { background: none; color: var(--accent); }
.quote figcaption { margin-top: 18px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--gris); }
.quote figcaption span { display: block; color: #5D574F; margin-top: 3px; }

/* --- CTA final --- */
.cta-actions { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 40px; }
.btn-big { background: var(--accent); color: #fff; padding: 18px 36px; border-radius: 999px; text-decoration: none; font-weight: 700; transition: transform 0.3s var(--ease), background 0.3s ease; }
.btn-big:hover { background: #ff6a26; transform: translateY(-3px); }
.btn-ghost { color: var(--gris); text-decoration: none; font-size: var(--t-small); border-bottom: 1px solid rgba(143,136,127,0.4); padding-bottom: 3px; transition: color 0.3s ease; }
.btn-ghost:hover { color: var(--creme); }

/* --- Interface du rail : indicateur + barre de progression --- */
.hui { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; }
.hui-hint { display: flex; align-items: center; gap: 12px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; color: rgba(247,233,215,0.7); transition: opacity 0.5s ease; }
.hui-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px dashed rgba(247,233,215,0.45); animation: bob 2.2s var(--ease) infinite; }
.hui-bar { width: min(220px, 40vw); height: 2px; background: rgba(247,233,215,0.15); overflow: hidden; }
/* On anime un transform, jamais une largeur : une largeur en % force le navigateur
   a recalculer la mise en page 60 fois par seconde. C'etait une cause du ralentissement. */
.hui-fill { height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; will-change: transform; }
.hui.is-done .hui-hint { opacity: 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: linear-gradient(180deg, var(--page) 0%, #0A0806 60%); padding-top: 100px; overflow: hidden; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 50px; padding: 0 5% 80px; max-width: 1300px; margin: 0 auto; }
.newsletter h3 { font-size: 1.4rem; margin-bottom: 12px; }
.newsletter p { color: var(--gris); margin-bottom: 24px; font-size: var(--t-small); }
.news-form { display: flex; gap: 10px; }
.news-form input { padding: 14px 22px; border-radius: 30px; border: 1px solid #2A241E; background: #171310; color: var(--creme); font-size: 0.95rem; outline: none; width: 280px; font-family: inherit; }
.news-form input:focus { border-color: var(--accent); }
.news-form button { padding: 14px 28px; border-radius: 30px; border: none; background: var(--creme); color: #16110D; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.3s ease, color 0.3s ease; }
.news-form button:hover { background: var(--accent); color: #fff; }
.form-msg { margin-top: 12px; font-size: var(--t-small); min-height: 1.2em; color: var(--accent); }
.footer-links { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-links h4 { font-size: var(--t-label); margin-bottom: 20px; color: #6A635B; text-transform: uppercase; letter-spacing: 0.14em; }
.footer-links a, .footer-links p { display: block; color: #9A938A; text-decoration: none; margin-bottom: 12px; font-size: var(--t-small); transition: color 0.25s ease; }
.footer-links a:hover { color: var(--creme); }
.footer-huge-logo {
    width: 100%;
    text-align: center;
    border-top: 1px solid #1C1712;
    padding: 2vw 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.footer-huge-logo span {
    font-size: clamp(80px, 22vw, 320px);
    line-height: 0.82;
    text-transform: uppercase;
    color: #141010;
    user-select: none;
}

.footer-huge-logo em {
    display: block;
    margin-top: 0.6vw;
    font-family: 'Archivo', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 4.2vw;
    letter-spacing: 0.3em;
    padding-left: 0.3em;
    text-transform: uppercase;
    color: #141010;
    user-select: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
    .panel--full   { width: 88vw; }
    .panel--wide   { width: 76vw; }
    .panel--narrow { width: 46vw; }
    .projets { grid-template-columns: 1fr; }
    .projet figure { height: 180px; }
}

@media (max-width: 900px) {
    .burger { display: flex; }

    /* ---------- MOBILE : mot centré, contour affiné ---------- */
    .scroll-sequence { height: 400vh; }
    .hero-img { object-position: center 38%; }
    .word-layer--stroke { -webkit-text-stroke-width: 2px; }
    .word-sub { letter-spacing: 0.3em; padding-left: 0.3em; }
    .slogan { bottom: calc(84px + env(safe-area-inset-bottom)); }
    .nav-links {
        position: fixed; top: 0; right: 0;
        /* ⚠️ ÉTAIT min(78vw, 320px) SANS padding : sur un écran étroit,
           « POURQUOI NOUS » en 1.1rem + letter-spacing dépassait le panneau
           et sortait de l'écran. On élargit et on met du padding. */
        width: min(86vw, 340px); height: 100vh; height: 100dvh;
        padding: 0 24px;
        flex-direction: column; justify-content: center; align-items: center;
        gap: 26px;
        background: rgba(12,10,8,0.98);
        /* ⚠️ MANQUAIT : sans z-index, le menu passait sous d'autres éléments. */
        z-index: 1001;
        transform: translate3d(105%,0,0);
        transition: transform 0.4s var(--ease);
        /* Le doigt ne doit pas faire défiler la page derrière le menu */
        overscroll-behavior: contain;
    }
    .nav-links.open { transform: translate3d(0,0,0); }
    .nav-links a {
        font-size: 1.05rem; margin: 0;
        letter-spacing: 0.08em;      /* 0.12em faisait déborder les mots longs */
        text-align: center;
        white-space: nowrap;
        opacity: 1;
    }

    /* ---------- LE RAIL REDEVIENT VERTICAL SUR MOBILE ----------
       Le défilement latéral au doigt entre en conflit avec le geste naturel
       du téléphone : on empile donc les panneaux, c'est plus fluide et plus sûr. */
    .hscroll  { height: auto !important; }
    .hviewport{ position: static; height: auto; overflow: visible; display: block; }
    .htrack   { display: block; height: auto; padding: 0; transform: none !important; will-change: auto; }
    .panel    { width: 100% !important; height: auto; min-height: 60vh; min-height: 60svh; margin-bottom: 14px; }
    .panel-media { height: 56vh; height: 56svh; }
    .panel-media img { transform: none !important; scale: 1; }
    .panel-inner--split { grid-template-columns: 1fr; text-align: center; }
    .badge { max-width: 300px; margin: 0 auto; }
    .why-list { justify-content: center; }
    .why-text p { margin-inline: auto; }
    .hui { display: none; }

}

@media (max-width: 640px) {
    .footer-top { flex-direction: column; }
    .news-form { flex-direction: column; }
    .news-form input { width: 100%; }
    .srv { grid-template-columns: 34px 1fr; }
    .srv-arrow { display: none; }
    .srv:hover h3 { transform: none; }
    .quote blockquote { font-size: 1.1rem; }
    .why-list { gap: 22px; }
}

/* ---------- ACCESSIBILITÉ ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    body { opacity: 1 !important; }   /* sinon le fondu ne se déclenche jamais = écran noir */
    .hero-word { opacity: 1; transform: none; }
    .word-layer--filled { opacity: 1; }
    .word-layer--stroke { opacity: 0; }
    .hero-dim { opacity: 0.35; }
    .hero-particles { display: none; }
    .panel-media img { transform: none; scale: 1; }
}

/* =========================================================
   A. TÉMOIGNAGES — style éditorial (référence photo 1)
   ========================================================= */
.reviews {
    padding: 120px 5% 100px;
    background: radial-gradient(90% 70% at 50% 0%, #2A1E14 0%, var(--page) 60%);
}
.reviews-head { max-width: 1300px; margin: 0 auto 60px; }

.reviews-grid { max-width: 1300px; margin: 0 auto; border-top: 1px dashed rgba(247,233,215,0.2); }
.review {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas: "txt media" "who media";
    align-items: start;
    gap: 0 40px;
    padding: 40px 0;
    border-bottom: 1px dashed rgba(247,233,215,0.2);   /* le filet fin qui traverse toute la largeur */
}
.review-txt { grid-area: txt; }
.review-who { grid-area: who; align-self: end; padding-top: 26px; }
.review-media { grid-area: media; overflow: hidden; border-radius: 2px; }
.review-media img { width: 100%; height: 150px; object-fit: cover; transition: transform 0.7s var(--ease), filter 0.5s ease; filter: grayscale(0.3) brightness(0.85); }
.review:hover .review-media img { transform: scale(1.06); filter: none; }

.review blockquote {
    font-family: 'Archivo', sans-serif; font-weight: 800;
    font-size: clamp(1.15rem, 1.8vw, 1.75rem); line-height: 1.4; letter-spacing: -0.02em;
    max-width: 620px; color: var(--creme);
}
.review mark { background: none; color: var(--accent); }
.review-who strong { display: block; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--creme); }
.review-who span { display: block; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.14em; color: #6E675E; margin-top: 3px; }

/* =========================================================
   B. AVANT / APRÈS (référence photo 4)
   ========================================================= */
.ba { padding: 110px 5% 120px; background: var(--page); }
.ba-head { max-width: 1000px; margin: 0 auto 40px; text-align: center; }
.ba-lead { color: var(--gris); font-size: var(--t-small); margin-top: 14px; }

.ba-stage {
    position: relative;
    /* Le format s'adapte à CHAQUE paire : le couloir est vertical, les murs sont horizontaux.
       Imposer un seul format aurait massacré la moitié des photos. */
    aspect-ratio: var(--ba-ar, 4 / 3);
    height: min(66vh, 560px);
    width: auto; max-width: 100%;
    margin: 0 auto;
    overflow: hidden; border-radius: 6px;
    background: var(--charbon);
    cursor: ew-resize;
    user-select: none; touch-action: pan-y;   /* le glissement horizontal nous appartient */
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* La couche « avant » est découpée en largeur par le JS : c'est ça, l'effet rideau */
.ba-clip { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); will-change: clip-path; }

.ba-tag {
    position: absolute; top: 18px; z-index: 3;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(14,13,12,0.82);
    font-size: var(--t-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--creme);
}
.ba-tag--l { left: 18px; }
.ba-tag--r { right: 18px; }

.ba-handle {
    position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4;
    width: 44px; margin-left: -22px;
    background: none; border: 0; cursor: ew-resize;
    display: grid; place-items: center;
    will-change: left;
}
.ba-handle::before {          /* la ligne verticale blanche */
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; margin-left: -1px; background: var(--creme);
}
.ba-handle span {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--creme); color: #16110D;
    font-weight: 900; font-size: 0.95rem;
    box-shadow: 0 6px 22px rgba(0,0,0,0.45);
    transition: transform 0.25s var(--ease);
}
.ba-handle:hover span, .ba-handle:focus-visible span { transform: scale(1.12); }

.ba-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 28px; }
.ba-btn {
    background: none; border: 1px solid rgba(247,233,215,0.25); color: var(--creme);
    padding: 11px 20px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: var(--t-small); font-weight: 600;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.ba-btn:hover { border-color: var(--accent); background: rgba(255,82,0,0.08); }
.ba-count { font-size: var(--t-small); color: var(--gris); }
.ba-count b { color: var(--creme); }

/* =========================================================
   C. LES 3 CARTES (référence photo 2)
   ========================================================= */
.cards3 {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    padding: 0 5% 110px;
    max-width: 1500px; margin: 0 auto;
    background: var(--page);
}
.c3 {
    position: relative; overflow: hidden;
    border-radius: 6px;
    padding: 40px;
    display: flex; flex-direction: column;
    min-height: 560px;
}
.c3--vert  { background: var(--vert); color: var(--sable); }
.c3--sable { background: var(--sable); color: var(--brun); }
.c3 h3 { font-size: clamp(1.4rem, 1.9vw, 1.9rem); line-height: 1.15; margin-bottom: 18px; }
.c3--vert h3  { color: var(--creme); }
.c3--sable h3 { color: var(--vert); }
.c3 p { font-size: var(--t-small); line-height: 1.65; }
.c3--vert p  { color: rgba(235,226,213,0.82); }
.c3--sable p { color: #5F584B; margin-top: auto; }

/* Le chiffre fantôme en filigrane, comme le « 25 » de la référence */
.c3-ghost {
    position: absolute; left: -10px; bottom: -40px;
    font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 11rem;
    letter-spacing: -0.05em; color: rgba(255,255,255,0.06); line-height: 1;
    pointer-events: none; user-select: none;
}

/* --- Maquette de téléphone (100 % CSS : aucune image à fournir) --- */
.phone {
    position: relative; z-index: 1;
    width: 190px; margin: 34px auto 0;
    aspect-ratio: 9 / 17;
    border-radius: 26px; padding: 8px;
    background: #0A0A0A;
    box-shadow: 0 24px 50px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.09);
}
.phone-screen {
    height: 100%; border-radius: 19px; overflow: hidden;
    background: #060D18; padding: 14px 12px;
    display: flex; flex-direction: column; gap: 9px;
}
.ph-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.ph-logo { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 0.85rem; color: #fff; letter-spacing: -0.03em; }
.ph-dot { width: 7px; height: 7px; border-radius: 50%; background: #F6C344; }
.ph-card { background: #0F1A2B; border: 1px solid #1B2941; border-radius: 9px; padding: 10px; }
.ph-card--alt { background: #101D31; }
.ph-tag { display: block; font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.14em; color: #6C7C95; }
.ph-card strong { display: block; font-size: 0.72rem; color: #F6C344; margin-top: 3px; }
.ph-bar { height: 3px; border-radius: 3px; background: #1B2941; margin: 9px 0 6px; overflow: hidden; }
.ph-bar i { display: block; height: 100%; width: 100%; background: #F6C344; }
.ph-bar--2 i { width: 68%; }
.ph-sub { font-size: 0.52rem; color: #7A8AA3; }
.ph-msg {
    margin-top: auto; align-self: flex-start;
    background: #F6C344; color: #10192A;
    font-size: 0.55rem; font-weight: 700;
    padding: 7px 10px; border-radius: 10px 10px 10px 2px;
}

/* --- Carte : la localisation --- */
.map { border-radius: 6px; overflow: hidden; margin-bottom: 22px; border: 1px solid rgba(46,70,50,0.2); }
.map iframe { width: 100%; height: 300px; border: 0; display: block; }

/* --- Badge « merci » : version réduite pour la carte --- */
.badge--sm { max-width: 280px; margin: 10px auto 26px; }
.badge--sm .pill { height: 46px; padding: 0 20px; font-size: 0.74rem; }

@media (max-width: 1100px) {
    .cards3 { grid-template-columns: 1fr; }
    .c3 { min-height: 0; }
    .review { grid-template-columns: 1fr 160px; }
    .review-media img { height: 120px; }
}
@media (max-width: 700px) {
    .review { grid-template-columns: 1fr; grid-template-areas: "media" "txt" "who"; gap: 20px; }
    .review-media img { height: 190px; }
    .review-who { padding-top: 0; }
    .ba-stage { height: min(56vh, 440px); }
    .ba-nav { flex-wrap: wrap; }
    .c3-ghost { font-size: 7rem; }
}


/* =========================================================
   ÉCONOMIE : on met en pause tout ce qui tourne hors de l'écran.
   Trois cercles + un carrousel de pastilles qui tournent en permanence
   alors qu'on ne les voit pas, ça mange du GPU et ça fait ramer le scroll.
   ========================================================= */
.anim-off,
.anim-off * { animation-play-state: paused !important; }

/* =========================================================
   CONTENU LOCAL (SEO) — texte réel, lisible par Google
   ========================================================= */
.local { padding: 110px 5% 120px; background: linear-gradient(180deg, var(--page) 0%, #0F0C09 100%); }
.local-inner { max-width: 1200px; margin: 0 auto; }
.local-head { max-width: 780px; margin-bottom: 60px; }
.local-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); margin-bottom: 22px; color: var(--creme); }
.local-head p { color: var(--gris); font-size: var(--t-small); }

.local-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 34px; margin-bottom: 60px; }
.local-grid h3 { font-size: 1.15rem; margin-bottom: 12px; color: var(--or); letter-spacing: -0.01em; }
.local-grid p { color: var(--gris); font-size: var(--t-small); }

.local-zones { padding: 34px 0; border-top: 1px dashed rgba(247,233,215,0.18); border-bottom: 1px dashed rgba(247,233,215,0.18); margin-bottom: 50px; }
.local-zones h3 { font-size: 1.05rem; margin-bottom: 14px; color: var(--creme); }
.local-zones p { color: var(--gris); font-size: var(--t-small); line-height: 1.9; }
.local-zones strong { color: rgba(247,233,215,0.9); font-weight: 600; }

.local-faq h3 { font-size: 1.05rem; margin-bottom: 20px; color: var(--creme); }
.local-faq details { border-bottom: 1px dashed rgba(247,233,215,0.14); padding: 16px 0; }
.local-faq summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--creme); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.local-faq summary::after { content: '+'; color: var(--or); font-size: 1.2rem; line-height: 1; }
.local-faq details[open] summary::after { content: '–'; }
.local-faq details p { margin-top: 12px; color: var(--gris); font-size: var(--t-small); max-width: 760px; }

/* =========================================================
   FONDU D'ENTRÉE — le site apparaît d'un bloc, pas par morceaux
   ========================================================= */
/* ⚠️ SUPPRIMÉ : « body { opacity: 0; animation: apparition 0.5s ease 0.05s } »

   CE QUE ÇA FAISAIT : la page entière restait INVISIBLE 50 ms, puis apparaissait
   en fondu sur 500 ms. Google mesure la vitesse d'un site au moment où sa plus
   grande image devient visible (le LCP). Avec cette règle, ce moment ne pouvait
   JAMAIS arriver avant 550 ms — même sur un site instantané. On payait une
   demi-seconde de note, et une demi-seconde d'attente réelle pour le visiteur,
   pour un fondu que personne ne remarquait.

   POURQUOI C'EST SANS RISQUE : le fond de la page est déjà --page (#17120E) via
   la règle body ci-dessus, et le CSS bloque l'affichage tant qu'il n'est pas lu.
   Il n'y a donc aucun flash blanc à masquer. Le fondu ne cachait rien.

   Si tu veux garder une arrivée douce, elle doit porter sur le CONTENU du hero,
   pas sur <body> : ainsi le fond s'affiche tout de suite et le LCP démarre. */

/* Mode « appareil peu puissant » : on coupe ce qui coûte cher, on garde le site fluide */
/* Le mode éco coupe la parallaxe et les particules.
   Il NE touche PAS à l'aura : ce sont de simples dégradés, ça ne coûte rien. */
body.eco .hero-particles { display: none; }
body.eco .panel-media img { transform: none !important; scale: 1; }


/* =========================================================
   CORRECTIF TACTILE
   Un filtre annulé UNIQUEMENT au :hover reste actif à vie sur un téléphone
   (il n'y a pas de survol au doigt). Les photos des témoignages restaient
   grises et sombres sur mobile. On les affiche donc en couleur d'emblée.
   ========================================================= */
@media (hover: none) {
    .review-media img { filter: none; }
    .ba-handle span   { transform: none; }
}

/* --- Les 8 autres prestations, en pastilles --- */
.srv-tags {
    list-style: none;
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 26px;
}
.srv-tags li {
    padding: 8px 16px;
    border: 1px solid rgba(247,233,215,0.22);
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 600;
    color: rgba(247,233,215,0.78);
    white-space: nowrap;
}

/* =========================================================
   VITRINE À CADRE FIXE (référence ORYZO)

   PRINCIPE : la section est haute (600 vh). Pendant tout ce scroll,
   le cadre reste COLLÉ à l'écran (position: sticky) : il ne bouge pas.
   Ce sont les images qui glissent à l'intérieur, comme derrière une fenêtre.

   Mobile  = fenêtre VERTICALE (3/4)   -> storytelling
   Desktop = fenêtre LARGE (16/9)      -> vitrine immersive

   PERFORMANCE : uniquement des transform sur le rail et les images.
   ========================================================= */
.showcase {
    position: relative;
    height: 600vh;                     /* 6 images × 100vh de scroll */
    background: linear-gradient(180deg, var(--page) 0%, #14100C 50%, var(--page) 100%);
}
.showcase-sticky {
    position: sticky; top: 0;
    /* ⚠️ ÉTAIT 100svh. « svh » = hauteur de l'écran QUAND LA BARRE D'ADRESSE EST
       VISIBLE. Sur téléphone, dès qu'on scrolle, la barre se rétracte et l'écran
       devient PLUS GRAND — mais le panneau restait à 100svh. D'où la bande noire
       sous le cadre (l'image 2).
       « dvh » suit la hauteur réelle en permanence. Le repli 100vh sert aux
       navigateurs qui ne connaissent pas dvh. */
    height: 100vh;
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: clamp(18px, 2.5vh, 32px);
    padding: 90px 5% 34px;
}

/* --- Le titre change avec l'image (fondu doux) --- */
.showcase-head { text-align: center; max-width: 800px; }
.showcase-title {
    font-size: clamp(1.5rem, 2.6vw, 2.6rem);
    color: var(--creme); line-height: 1.1;
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.showcase-sub {
    margin-top: 8px;
    font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.16em;
    font-weight: 700; color: var(--or);
    transition: opacity 0.45s var(--ease);
}
.showcase-head.is-changing .showcase-title { opacity: 0; transform: translateY(8px); }
.showcase-head.is-changing .showcase-sub   { opacity: 0; }

/* --- LE CADRE : il ne bouge JAMAIS --- */
.frame {
    position: relative;
    width: min(88vw, 560px);
    aspect-ratio: 3 / 4;               /* mobile : fenêtre verticale */
    padding: 10px;
    border: 1px dashed rgba(247, 233, 215, 0.32);   /* le liseré pointillé de la référence */
    flex: 0 1 auto;
    max-height: 62vh; max-height: 62svh;
}
.frame-window { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* --- Le rail d'images : c'est LUI qui glisse --- */
.frame-track {
    display: flex; height: 100%; width: 100%;
    will-change: transform;
    transform: translate3d(0,0,0);
}
.slide {
    flex: 0 0 100%; height: 100%;
    overflow: hidden;
    position: relative;
}
.slide img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    /* Marge d'échelle : la parallaxe peut décaler l'image sans laisser de vide */
    transform: translate3d(0,0,0) scale(1.14);
    will-change: transform;
}

/* --- Pied : indicateur + progression --- */
.showcase-foot {
    display: flex; align-items: center; gap: 16px;
    font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.2em;
    font-weight: 700; color: rgba(247,233,215,0.6);
}
.sc-bar { width: min(180px, 32vw); height: 2px; background: rgba(247,233,215,0.16); overflow: hidden; }
.sc-bar i {
    display: block; height: 100%; width: 100%;
    background: var(--or);
    transform: scaleX(0); transform-origin: left;
    will-change: transform;
}
.sc-count b { color: var(--creme); }

/* --- DESKTOP : la fenêtre devient large et immersive --- */
@media (min-width: 901px) {
    .frame {
        width: min(78vw, 1180px);
        aspect-ratio: 16 / 9;          /* format vitrine premium */
        max-height: 64vh; max-height: 64svh;
        padding: 12px;
    }
    .showcase-sticky { gap: clamp(24px, 3.5vh, 46px); }
}

@media (max-width: 400px) {
    .frame { width: 92vw; max-height: 56vh; height: 56svh; }
    .showcase-foot { gap: 10px; letter-spacing: 0.12em; }
}
/* ============================================================
   NAVIGATION RAPIDE (barre custom, compatible Lenis)
   ============================================================ */
.quick-scroll{
    position:fixed; top:0; right:0; height:100vh; width:14px;
    z-index:9998; display:flex; align-items:center; justify-content:center;
    cursor:pointer;
}
.qs-track{
    position:relative; height:92%; width:4px;
    background:rgba(255,255,255,.12); border-radius:4px;
}
.qs-progress{
    position:absolute; top:0; left:0; width:100%; height:100%;
    background:#25D366; border-radius:4px;
    transform:scaleY(0); transform-origin:top;
    will-change:transform;
}
.qs-thumb{
    position:absolute; top:0; left:50%;
    width:8px; height:44px; border-radius:8px;
    background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.4);
    transform:translate(-50%,0);
    will-change:transform;
    transition:width .15s ease;
}
/* ============================================================
   BOUTON WHATSAPP FLOTTANT
   ============================================================ */

/* Bouton d'appel flottant : au-dessus du WhatsApp */
.dock-old-tel {
    position: fixed; right: 20px; bottom: 86px; z-index: 9999;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent, #C9962E); color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    transition: transform .2s ease;
}
.dock-old-tel:hover { transform: scale(1.08); }
@media (max-width: 600px) {
    .dock-old-tel { width: 52px; height: 52px; bottom: 80px; right: 16px; }
    .dock-old-wa  { width: 52px; height: 52px; right: 16px; }
}


/* =========================================================
   AVIS CLIENTS — deux versions à tester (A et B)
   Fond crème + cercles pointillés : même famille que le badge « Merci ».
   ========================================================= */
.av { padding: 50px 5% 30px; background: var(--page); }
.av-inner {
    max-width: 980px; margin: 0 auto;
    background: var(--sable); color: var(--brun);
    border-radius: 6px;
    padding: clamp(22px, 2.4vw, 34px);
}
.av-txt p { color: #5F584B; font-size: var(--t-small); margin: 18px 0 26px; max-width: 420px; }
.av .panel-title { color: var(--vert); }

/* --- Le bouton, commun aux deux versions --- */
.av-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 8px 8px 22px;
    border-radius: 999px;
    background: var(--vert); color: var(--creme);
    text-decoration: none; font-size: 0.88rem; font-weight: 700;
    transition: transform 0.25s ease, background 0.25s ease;
}
.av-btn:hover { background: #24371f; transform: translateY(-2px); }
.av-btn i {
    display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-style: normal; font-size: 1rem; line-height: 1;
}

/* ---------- VERSION A : le badge tel quel, pastilles = prénoms ---------- */
.av-inner--split {
    display: grid; grid-template-columns: minmax(220px, 340px) 1fr;
    gap: clamp(30px, 4vw, 60px); align-items: center;
}

/* ---------- VERSION B : le décor du badge + les avis lisibles ---------- */
.av--b .av-head { text-align: center; margin-bottom: 18px; }
.av--b .panel-title { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.av--b .av-head .av-btn { margin-top: 14px; }

.av-stage { position: relative; }

/* Les cercles : décor de fond, ils ne gênent jamais la lecture */
.av-rings {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    pointer-events: none; z-index: 0;
}
.av-rings .ring--1 { width: 250px; height: 250px; }
.av-rings .ring--2 { width: 190px; height: 190px; }
.av-rings .ring--3 { width: 130px; height: 130px; }

/* La fenêtre : elle estompe le haut et le bas, comme le badge */
.av-window {
    position: relative; z-index: 1;
    height: 180px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
/* Le rail monte en boucle. -50 % car le contenu est écrit deux fois. */
.av-track {
    list-style: none; display: grid; gap: 14px;
    animation: avMonte 40s linear infinite;
    will-change: transform;
}
@keyframes avMonte { to { transform: translate3d(0, -50%, 0); } }

/* On arrête tout dès que le visiteur veut lire */
.av-window:hover .av-track,
.av-window:focus-within .av-track,
.av-window:active .av-track { animation-play-state: paused; }

.av-card {
    display: grid; grid-template-columns: 40px 1fr;
    gap: 12px; align-items: center;
    padding: 11px 38px 11px 10px;
    border-radius: 999px;
    background: var(--brun); color: var(--sable);
    box-shadow: 0 8px 24px rgba(32, 29, 24, 0.18);
}
.av-ava {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(150deg, var(--accent) 0%, #7A2408 100%);
    color: #fff;
    font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 0.8rem;
}
.av-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.av-name { font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--or); font-size: 0.85rem; }
.av-stars { color: var(--or); font-size: 0.72rem; letter-spacing: 2px; }
.av-card p { margin-top: 4px; color: rgba(235, 226, 213, 0.78); font-size: 0.78rem; line-height: 1.45; }

@media (max-width: 900px) {
    .av-inner--split { grid-template-columns: 1fr; text-align: center; }
    .av--a .badge { max-width: 300px; margin: 0 auto 30px; }
    .av-txt p { margin-inline: auto; }
    .av-rings .ring--1 { width: 300px; height: 300px; }
    .av-rings .ring--2 { width: 230px; height: 230px; }
    .av-rings .ring--3 { width: 160px; height: 160px; }
}
@media (max-width: 640px) {
    /* Sur 3 lignes de texte, un rayon de 999px rogne le contenu */
    .av-card { grid-template-columns: 46px 1fr; gap: 12px; padding: 14px 16px; border-radius: 20px; }
    .av-ava { width: 46px; height: 46px; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .av-window { height: auto; -webkit-mask-image: none; mask-image: none; }
    .av-track { animation: none; }
    /* La série 2 est un doublon : inutile quand rien ne défile */
    .av-track .av-card:nth-child(n+3) { display: none; }
}

/* =========================================================
   GALERIE — grille + filtres
   ========================================================= */
.gal { padding: 100px 5% 110px; background: var(--page); }
.gal-inner { max-width: 1400px; margin: 0 auto; }
.gal-head { margin-bottom: 30px; }

/* --- Les filtres --- */
.gal-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.gal-f {
    padding: 8px 18px; border-radius: 999px;
    border: 1px solid rgba(247,233,215,0.22);
    background: none; color: rgba(247,233,215,0.78);
    font-family: inherit; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.gal-f:hover { border-color: rgba(255,82,0,0.5); color: var(--creme); }
.gal-f.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.gal-f b { font-weight: 600; opacity: 0.55; margin-left: 6px; }

/* --- La grille --- */
.gal-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}
.gal-item {
    /* content-visibility : le navigateur ne DESSINE PAS les cases hors écran.
       Avec 40 photos, c'est ce qui garde le scroll fluide.
       contain-intrinsic-size lui donne la taille à réserver sans dessiner :
       sans lui, la barre de scroll sauterait à chaque ligne qui apparaît. */
    content-visibility: auto;
    contain-intrinsic-size: 210px 210px;
}
.gal-item[hidden] { display: none; }

.gal-btn {
    display: block; width: 100%; padding: 0;
    border: 0; background: var(--charbon);
    border-radius: 4px; overflow: hidden; cursor: zoom-in;
    aspect-ratio: 1 / 1;
    position: relative;
}
.gal-btn img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease), filter 0.4s ease;
    filter: brightness(0.88);
}
.gal-btn:hover img, .gal-btn:focus-visible img { transform: scale(1.06); filter: brightness(1); }

/* L'étiquette de catégorie, au survol */
.gal-tag {
    position: absolute; left: 8px; bottom: 8px; z-index: 2;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(14,13,12,0.82);
    font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--creme);
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s var(--ease);
    pointer-events: none;
}
.gal-btn:hover .gal-tag, .gal-btn:focus-visible .gal-tag { opacity: 1; transform: translateY(0); }

.gal-vide { color: var(--gris); font-size: var(--t-small); padding: 40px 0; text-align: center; }

@media (max-width: 640px) {
    .gal { padding: 70px 5% 80px; }
    .gal-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
    .gal-item { contain-intrinsic-size: 130px 130px; }
    /* Pas de survol au doigt : l'étiquette resterait invisible à vie */
    .gal-tag { opacity: 1; transform: none; }
}

/* =========================================================
   PLEIN ÉCRAN (LIGHTBOX)
   ========================================================= */
.lb {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(8, 6, 4, 0.94);
    display: grid; place-items: center;
    padding: 60px 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.lb[hidden] { display: none; }
.lb.is-on { opacity: 1; }

.lb-scene { max-width: 100%; max-height: 100%; display: grid; place-items: center; gap: 14px; }
.lb-img {
    max-width: min(92vw, 1400px);
    max-height: 80svh;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
.lb-legende {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
    font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.12em;
    font-weight: 700; color: rgba(247,233,215,0.8); text-align: center;
}
.lb-legende em { font-style: normal; color: var(--gris); }

.lb-fermer, .lb-nav {
    position: absolute; z-index: 2;
    display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(247,233,215,0.2);
    background: rgba(20,16,12,0.7);
    color: var(--creme); cursor: pointer;
    font-family: inherit; line-height: 1;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lb-fermer:hover, .lb-nav:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.lb-fermer { top: 18px; right: 18px; font-size: 1.8rem; }
.lb-nav { top: 50%; margin-top: -24px; font-size: 2rem; }
.lb-nav--prev { left: 18px; }
.lb-nav--next { right: 18px; }

@media (max-width: 640px) {
    .lb { padding: 70px 10px; }
    .lb-nav { width: 42px; height: 42px; margin-top: -21px; }
    .lb-nav--prev { left: 8px; }
    .lb-nav--next { right: 8px; }
    .lb-img { max-height: 68svh; }
}

@media (prefers-reduced-motion: reduce) {
    .lb { transition: none; }
    .gal-btn img { transition: none; }
}

/* =========================================================
   CORRECTIFS MOBILE
   ========================================================= */

/* ⚠️ LA BARRE DE DÉFILEMENT CUSTOM N'A RIEN À FAIRE SUR TÉLÉPHONE.
   C'est un rail fixe de 14 px collé au bord droit, prévu pour la souris.
   Au doigt, il ne sert à rien et il capte les gestes de bord (le geste
   « retour » d'Android et iOS part précisément de là). */
@media (max-width: 900px), (hover: none) {
    .quick-scroll { display: none !important; }
}

/* Le bouton WhatsApp : on le remonte au-dessus de la zone du geste système
   et on respecte l'encoche / la barre du bas des téléphones. */

/* ⚠️ DÉBORDEMENT HORIZONTAL : « overflow-x: clip » n'était posé QUE sur body.
   Sur téléphone, c'est <html> qui porte le défilement du navigateur : la règle
   ne s'appliquait donc pas et on pouvait pousser la page vers la droite.
   Il la faut sur les DEUX. */
html { overflow-x: clip; }

/* Filet de sécurité : rien ne peut dépasser la largeur de l'écran.
   (Ne s'applique pas au rail ni au plein écran, qui gèrent leur propre largeur.) */
@media (max-width: 900px) {
    /* ⚠️ .showcase EST VOLONTAIREMENT ABSENTE DE CETTE LISTE.
       Elle contient .showcase-sticky. Poser un overflow sur le PARENT d'un
       élément sticky est précisément ce qui casse le sticky : le navigateur
       ne le colle plus à l'écran mais au parent. C'est le bug de l'image 2.
       Ne la rajoute jamais ici. */
    .gal, .av, .reviews, .cards3, .ba, .local, .footer {
        max-width: 100vw;
        overflow-x: clip;
    }
}

/* Le badge tourne trop lentement et il faut qu'il soit continu.
   16 s pour 4 pastilles = une toutes les 4 s : ça traîne. */
.badge-track--merci { animation-duration: 9s; }

/* =========================================================
   ANIMATIONS D'ENTRÉE — les éléments apparaissent en douceur
   quand ils entrent à l'écran.

   Technique : le JS ajoute .is-visible via IntersectionObserver.
   Le CSS fait le fondu. Pas de librairie externe.
   PERFORMANCE : uniquement opacity + transform (GPU).
   ========================================================= */

/* État initial : invisible, légèrement décalé */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.from-left  { transform: translateX(-40px); }
.reveal.from-right { transform: translateX(40px); }
.reveal.from-scale { transform: scale(0.92); }

/* État visible */
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Délais échelonnés pour les grilles (les éléments apparaissent en cascade) */
.reveal.stagger-1 { transition-delay: 0.08s; }
.reveal.stagger-2 { transition-delay: 0.16s; }
.reveal.stagger-3 { transition-delay: 0.24s; }
.reveal.stagger-4 { transition-delay: 0.32s; }

/* Images du rail : léger zoom qui se calme à l'entrée */
.panel-media img {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Titres des panels : le texte glisse depuis le bas */
.panel-title, .eyebrow, .panel-desc {
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Avant/Après : la scène s'ouvre en fondu */
.ba-stage {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Témoignages : les cartes apparaissent en cascade */
.review-card {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Section locale (SEO) : les articles apparaissent un par un */
.local-grid article {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* reduced-motion : tout apparaît instantanément */
@media (prefers-reduced-motion: reduce) {
    .reveal, .panel-media img, .review-card, .local-grid article {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   RÉSEAUX SOCIAUX (footer) + carte Espace client
   ========================================================= */
.socials { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.socials a {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--gris, #B7A99A);
    transition: color 0.25s ease, transform 0.25s ease;
}
.socials a:hover { color: var(--creme, #F7E9D7); transform: translateX(4px); }
.socials svg { flex: 0 0 auto; }
/* Chaque réseau garde SA couleur officielle. Le texte s'éclaire au survol. */
.soc span { color: var(--gris, #B7A99A); transition: color 0.25s ease; }
.soc:hover span { color: var(--creme, #F7E9D7); }
.soc svg { filter: none; }

/* Carte "Espace client" : le lien vers l'application, mis en valeur */
.app-cta {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px dashed rgba(247, 233, 215, 0.3);
    border-radius: 8px;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.app-cta:hover {
    border-color: var(--or, #D6A14F);
    background: rgba(214, 161, 79, 0.06);
    transform: translateY(-2px);
}
.app-cta img { border-radius: 10px; flex: 0 0 auto; }
.app-cta strong {
    display: block; color: var(--creme, #F7E9D7);
    font-size: 0.95rem; margin-bottom: 4px;
}
.app-cta span { color: var(--or, #D6A14F); font-size: 0.8rem; }


/* =========================================================
   DOCK FLOTTANT REPLIABLE — bouton + qui déploie les 6 contacts.
   PILOTÉ EN CSS PUR (checkbox) : cliquable sur tout appareil,
   même si le JavaScript échoue. Le JS n'ajoute que le confort
   (fermeture au clic extérieur / Échap).
   ========================================================= */
.float-dock {
    position: fixed;
    right: clamp(12px, 2vw, 20px);
    bottom: calc(clamp(12px, 2vh, 20px) + env(safe-area-inset-bottom));
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* La zone transparente du <nav> ne doit JAMAIS voler un clic destiné
       à la page : seuls le bouton et les items sont interactifs. */
    pointer-events: none;
}
.dock-check { display: none; }

/* --- Le bouton + (label de la checkbox) --- */
.dock-toggle {
    pointer-events: auto;
    width: clamp(50px, 7vw, 56px);
    height: clamp(50px, 7vw, 56px);
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent, #C9962E);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;      /* tap immédiat, pas de délai double-tap */
    user-select: none;
}
.dock-toggle:hover { transform: scale(1.08); }
.dock-toggle svg { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }

/* Coché = ouvert : le + pivote en X */
.dock-check:checked ~ .dock-toggle { background: #3A322A; }
.dock-check:checked ~ .dock-toggle svg { transform: rotate(45deg); }

/* --- Les 6 boutons --- */
.dock-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    pointer-events: none;
}
.dockbtn {
    width: clamp(42px, 6vw, 46px);
    height: clamp(42px, 6vw, 46px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.6);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                visibility 0s linear 0.35s;
    -webkit-tap-highlight-color: transparent;
}
.dockbtn svg { width: clamp(17px, 2.4vw, 20px); height: clamp(17px, 2.4vw, 20px); pointer-events: none; }

/* Coché = les boutons apparaissent en cascade, cliquables */
.dock-check:checked ~ .dock-items { pointer-events: auto; }
.dock-check:checked ~ .dock-items .dockbtn { opacity: 1; visibility: visible; transition-property: opacity, transform; transform: translateY(0) scale(1); }
.dock-check:checked ~ .dock-items .dockbtn:nth-last-child(1) { transition-delay: 0.02s; }
.dock-check:checked ~ .dock-items .dockbtn:nth-last-child(2) { transition-delay: 0.06s; }
.dock-check:checked ~ .dock-items .dockbtn:nth-last-child(3) { transition-delay: 0.10s; }
.dock-check:checked ~ .dock-items .dockbtn:nth-last-child(4) { transition-delay: 0.14s; }
.dock-check:checked ~ .dock-items .dockbtn:nth-last-child(5) { transition-delay: 0.18s; }
.dock-check:checked ~ .dock-items .dockbtn:nth-last-child(6) { transition-delay: 0.22s; }

.dockbtn:hover { transform: scale(1.12); }

/* Couleurs officielles */
.dockbtn--wa  { background: #25D366; }
.dockbtn--tel { background: var(--accent, #C9962E); }
.dockbtn--ig  { background: radial-gradient(circle at 30% 110%, #FED373 0%, #F15245 30%, #D92E7F 60%, #9B36B7 90%); }
.dockbtn--tt  { background: #010101; }
.dockbtn--in  { background: #0A66C2; }
.dockbtn--rd  { background: #FF4500; }

/* Écrans courts (paysage) */
@media (max-height: 620px) {
    .float-dock { gap: 6px; }
    .dock-items { gap: 6px; }
    .dockbtn { width: 38px; height: 38px; }
    .dock-toggle { width: 46px; height: 46px; }
}

/* Sur écrans tactiles : la barre de défilement décorative du bord droit
   est retirée — elle chevauchait le dock et volait les taps. */
@media (pointer: coarse) {
    .quick-scroll { display: none; }
}

/* Animations réduites */
@media (prefers-reduced-motion: reduce) {
    .dock-toggle, .dock-toggle svg, .dockbtn { transition: opacity 0.2s ease !important; }
}