/*
Theme Name: KBR CORP
Theme URI: https://vitres-teintees-limoges.fr/
Author: KBR CORP
Description: Theme sur mesure pour KBR CORP, poseur de films teintes et covering a Limoges. Heros pilote au scroll, simulateur de teinte, mode clair et mode sombre avec interrupteur. Zero framework, zero dependance. Compatible Amelia et WPForms, dont les fichiers ne sont charges que sur les pages qui les utilisent.
Version: 2.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kbr-corp
Tags: one-column, custom-colors, custom-menu, full-width-template, translation-ready
*/
/* =======================================================================
KBR CORP, thème clair et thème sombre.
Le thème par défaut suit le réglage du système. Un choix explicite pose
data-theme sur et gagne sur le système, dans les deux sens.
==================================================================== */
:root{
/* clair */
--canvas:#FFFFFF;
--canvas-0:rgba(255,255,255,0);
--canvas-2:#F5F5F7;
--band:#F5F5F7; /* bandes pleine largeur, sections et pied de page */
--panel:#FFFFFF;
--panel-2:#F5F5F7;
--text-primary:#1D1D1F; /* 16,8:1 sur le canvas */
--text-secondary:#6E6E73; /* 5,07:1 */
--line:#D2D2D7;
--line-strong:#86868B; /* 3,62:1, bordures interactives */
--accent:#067A55; /* 5,35:1 */
--accent-hover:#04613F;
--accent-ink:#FFFFFF;
--accent-wash:rgba(6,122,85,.08);
--danger:#C7362B;
--shadow-card:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
--shadow-btn:0 20px 40px -12px rgba(15,23,42,.28);
--shadow-lift:0 2px 6px rgba(0,0,0,.06),0 18px 40px rgba(0,0,0,.10);
--nav-bg:rgba(255,255,255,.72);
--chip-bg:rgba(255,255,255,.62);
/* couches posées sur la vidéo: elles ne changent jamais de thème */
--on-media:#F5F5F7;
--on-media-2:#D8D8DC;
--media-bg:#000000; /* noir pur: aucune nuance derriere les films */
/* les quatre teintes du logo, réservées au logo et au favicon */
--iris-1:#FF3D9A; --iris-2:#8B5CF6; --iris-3:#3FD5FF; --iris-4:#6BFF9E;
--sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--e1:cubic-bezier(.22,.61,.36,1);
--e2:cubic-bezier(.16,1,.3,1);
--tshadow:0 1px 2px rgba(3,3,5,.9),0 3px 12px rgba(3,3,5,.72),0 10px 44px rgba(3,3,5,.8);
--gut:clamp(22px,5.5vw,96px);
--radius:18px;
--radius-lg:24px;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--canvas:#000000; /* noir pur demandé: sur OLED les pixels s'éteignent */
--canvas-0:rgba(0,0,0,0);
--canvas-2:#0B0B0D; /* le cran de relief des sections alternées */
--band:#000000; /* noir pur demandé: plus aucun anthracite pleine largeur */
--panel:#0F0F12;
--panel-2:#08080A;
--text-primary:#F5F5F7;
--text-secondary:#A1A1A6; /* 7,65:1 */
--line:#232327;
--line-strong:#6E6E73; /* 3,88:1 */
--accent:#43D9A3; /* 10,95:1 */
--accent-hover:#6FE6BC;
--accent-ink:#04231A;
--accent-wash:rgba(67,217,163,.10);
--danger:#FF6B5A;
--shadow-card:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.34);
--shadow-btn:0 25px 50px -12px rgba(0,0,0,.6);
--shadow-lift:0 2px 8px rgba(0,0,0,.44),0 22px 50px rgba(0,0,0,.44);
--nav-bg:rgba(0,0,0,.74);
--chip-bg:rgba(0,0,0,.62);
}
}
:root[data-theme="dark"]{
--canvas:#000000; /* noir pur demandé: sur OLED les pixels s'éteignent */
--canvas-0:rgba(0,0,0,0);
--canvas-2:#0B0B0D; /* le cran de relief des sections alternées */
--band:#000000; /* noir pur demandé: plus aucun anthracite pleine largeur */
--panel:#0F0F12;
--panel-2:#08080A;
--text-primary:#F5F5F7;
--text-secondary:#A1A1A6;
--line:#232327;
--line-strong:#6E6E73;
--accent:#43D9A3;
--accent-hover:#6FE6BC;
--accent-ink:#04231A;
--accent-wash:rgba(67,217,163,.10);
--danger:#FF6B5A;
--shadow-card:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.34);
--shadow-btn:0 25px 50px -12px rgba(0,0,0,.6);
--shadow-lift:0 2px 8px rgba(0,0,0,.44),0 22px 50px rgba(0,0,0,.44);
--nav-bg:rgba(0,0,0,.74);
--chip-bg:rgba(0,0,0,.62);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--canvas);color:var(--text-primary);
font-family:var(--sans);font-size:clamp(16px,1.05vw,17.5px);line-height:1.5;
letter-spacing:-.011em;font-weight:400;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
opacity:0;transition:opacity .6s var(--e1),background-color .5s var(--e1),color .5s var(--e1);
}
body.ready{opacity:1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--sans);font-weight:600;line-height:1.06;letter-spacing:-.032em;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--accent-ink);
padding:12px 20px;font-size:14px;font-weight:500;border-radius:0 0 12px 0}
.skip:focus{left:0}
/* ---------- fond d'ambiance, très discret en clair ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env i{position:absolute;display:block;border-radius:50%;filter:blur(120px);opacity:.32}
.env .g1{width:64vw;height:64vw;left:-18vw;top:-16vw;background:radial-gradient(circle,var(--accent-wash),transparent 70%)}
.env .g2{width:56vw;height:56vw;right:-16vw;bottom:-18vw;background:radial-gradient(circle,var(--accent-wash),transparent 70%)}
.env .grain{display:none}
:root[data-theme="dark"] .env i{opacity:.5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .env i{opacity:.5}}
body:not(.paused) .env .g1{animation:drift1 104s var(--e1) -26s infinite alternate}
body:not(.paused) .env .g2{animation:drift2 126s var(--e1) -44s infinite alternate}
@keyframes drift1{from{transform:translate3d(0,0,0)}to{transform:translate3d(6vw,4vh,0)}}
@keyframes drift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-5vw,-5vh,0)}}
/* ---------- filet de progression ---------- */
.rail{position:fixed;left:max(14px,calc(var(--gut) * .3));top:24vh;bottom:24vh;width:2px;
background:var(--line);z-index:3;pointer-events:none;opacity:0;
transition:opacity .6s var(--e1);border-radius:2px}
.rail.on{opacity:1}
.rail span{position:absolute;left:0;top:0;width:2px;height:100%;border-radius:2px;
background:var(--accent);transform:scaleY(var(--p,0));transform-origin:top}
@media (max-width:1240px){.rail{display:none}}
/* ---------- navigation, matériau translucide ---------- */
/* La barre garde une hauteur constante et n'anime que sa matière.
Animer le padding et la hauteur du logo faisait recalculer la mise en page
à chaque image de la transition, et pile pendant un défilement. */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:20px;
padding:12px var(--gut);border-bottom:1px solid transparent;
transition:background .4s var(--e1),border-color .4s var(--e1)}
.nav.stuck{background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom-color:var(--line)}
/* Le logo repose sur une plaque de verre, la meme matiere que la fenetre
WhatsApp (memes jetons --wa-*) : le site passe dessous, flou. Tant que le
heros est derriere, la plaque prend le verre sombre de la barre, comme
l'indicateur TLV et l'interrupteur. */
.nav>a:first-child{flex:none;display:block;padding:5px 9px;border-radius:14px;
background:var(--wa-verre);border:1px solid var(--wa-filet);
box-shadow:inset 0 1px 0 var(--wa-reflet);
-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
transition:background .4s var(--e1),border-color .4s var(--e1),box-shadow .4s var(--e1)}
body.over-hero .nav>a:first-child{background:rgba(11,11,13,.55);border-color:rgba(245,245,247,.16);
box-shadow:inset 0 1px 0 rgba(245,245,247,.1)}
.nav .logo{display:block;height:46px;width:auto;flex:none}
.nav ul{display:flex;gap:28px;list-style:none;margin:0 auto 0 26px;padding:0;
font-size:14.5px;font-weight:450;letter-spacing:-.008em}
.nav ul a{text-decoration:none;color:var(--text-secondary);transition:color .3s var(--e1)}
.nav ul a:hover{color:var(--text-primary)}
.nav-tel{font-size:14.5px;font-weight:450;text-decoration:none;color:var(--text-secondary);
transition:color .3s var(--e1);white-space:nowrap;letter-spacing:-.008em}
.nav-tel:hover{color:var(--accent)}
@media (max-width:1100px){.nav ul{display:none}.nav{justify-content:flex-end;gap:14px}
.nav>a:first-child{margin-right:auto}}
@media (max-width:640px){.nav-tel{display:none}.nav .logo{height:38px}}
/* Tant que le héro est derrière elle, la barre repose sur une vidéo sombre.
En thème clair, ses couleurs claires y seraient illisibles et son fond opaque
poserait une bande blanche sur le film pendant toute la durée du héro.
On lui donne donc, pendant tout ce temps, les couleurs prévues pour un média. */
body.over-hero .nav ul a,
body.over-hero .nav .nav-tel{color:var(--on-media-2)}
body.over-hero .nav ul a:hover,
body.over-hero .nav .nav-tel:hover{color:var(--on-media)}
body.over-hero .nav.stuck{background:rgba(9,10,12,.7);border-bottom-color:rgba(245,245,247,.14)}
body.over-hero .nav .theme-toggle{
border-color:rgba(245,245,247,.42);background:rgba(245,245,247,.12)}
body.over-hero .nav .theme-toggle:hover{border-color:var(--on-media)}
body.over-hero .nav .theme-toggle .knob{background:#F5F5F7}
body.over-hero .nav .theme-toggle .knob svg{color:#1D1D1F}
/* le bouton de la barre repose sur la même vidéo que celui du héro:
même corps sombre tant que le héro est là */
body.over-hero .nav .grad-btn{color:var(--on-media)}
body.over-hero .nav .grad-btn::before{background:#0E1013}
body.over-hero .nav .grad-btn:hover::before{background:#191C21}
/* ---------- l'interrupteur clair / sombre ---------- */
.theme-toggle{
flex:none;position:relative;width:56px;height:32px;padding:0;border-radius:999px;
border:1px solid var(--line-strong);background:var(--panel-2);cursor:pointer;
display:inline-flex;align-items:center;
transition:background .4s var(--e1),border-color .4s var(--e1)}
.theme-toggle:hover{border-color:var(--accent)}
.theme-toggle .knob{
position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
background:var(--canvas);box-shadow:var(--shadow-card);
display:grid;place-items:center;
transition:transform .42s var(--e2),background .4s var(--e1)}
.theme-toggle .knob svg{width:14px;height:14px;display:block;color:var(--text-primary)}
.theme-toggle .knob .moon{display:none}
.theme-toggle[aria-checked="true"] .knob{transform:translateX(24px)}
.theme-toggle[aria-checked="true"] .knob .sun{display:none}
.theme-toggle[aria-checked="true"] .knob .moon{display:block}
/* la version tactile de l'interrupteur est plus bas, avec les autres cibles */
/* ---------- boutons, pilules à la Apple ---------- */
.btn{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:-.01em;
text-decoration:none;padding:11px 22px;border-radius:999px;
border:1px solid var(--line-strong);color:var(--text-primary);background:transparent;
cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;
transition:background .3s var(--e1),color .3s var(--e1),border-color .3s var(--e1),
transform .3s var(--e2),opacity .3s var(--e1)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);
color:var(--accent-ink);opacity:1}
.band .btn{text-shadow:none}
.band .btn:not(.btn-primary){border-color:rgba(245,245,247,.42);color:var(--on-media)}
.band .btn:not(.btn-primary):hover{border-color:var(--on-media);background:rgba(245,245,247,.1)}
@media (pointer:coarse){.btn{min-height:46px}}
/* ---------- l'appel à l'action principal: bordure dégradée et flèche ----------
Le dégradé est porté par le bouton lui-même, et un pseudo-élément opaque
posé à 2px de l'intérieur laisse dépasser exactement cette bordure.
Les quatre teintes sont celles du logo, pas un dégradé générique. */
.grad-btn{
position:relative;display:inline-flex;align-items:center;gap:12px;
padding:18px 44px;border:0;border-radius:16px;
background:linear-gradient(90deg,var(--iris-1),var(--iris-2) 38%,var(--iris-3) 72%,var(--iris-4));
font-family:var(--sans);font-size:1.0625rem;font-weight:600;line-height:1;letter-spacing:-.016em;
color:var(--text-primary);text-decoration:none;cursor:pointer;text-shadow:none;
transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.grad-btn::before{content:"";position:absolute;inset:2px;border-radius:14px;
background:var(--canvas);transition:background .3s ease;z-index:0}
.grad-btn__label,.grad-btn__arrow{position:relative;z-index:1}
.grad-btn__label{display:inline-block}
/* le soulignement est dessiné à sa largeur finale puis mis à l'échelle:
animer width ferait recalculer la mise en page à chaque image */
.grad-btn__label::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:2px;
border-radius:2px;background:linear-gradient(90deg,var(--iris-1),var(--iris-2));
transform:scaleX(0);transform-origin:left center;transition:transform .3s ease}
.grad-btn:hover{background:linear-gradient(90deg,#FF1F87,#7C3AED 38%,#0FC4FF 72%,#35F58A);
transform:translateY(-4px);box-shadow:var(--shadow-btn)}
.grad-btn:hover::before{background:var(--canvas-2)}
.grad-btn:hover .grad-btn__label::after{transform:scaleX(1)}
.grad-btn:active{transform:translateY(-1px)}
.grad-btn__arrow{font-size:1.2rem;line-height:1}
body:not(.paused) .grad-btn__arrow{animation:gradNudge 2s ease-in-out infinite}
@keyframes gradNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
/* version compacte pour la barre de navigation */
.grad-btn--sm{padding:10px 22px;font-size:15px;gap:9px;border-radius:13px}
.grad-btn--sm::before{border-radius:11px}
.grad-btn--sm .grad-btn__arrow{font-size:1.05rem}
/* dans le héro, le bouton se pose sur la vidéo: son corps reste sombre
même en thème clair, sinon il ferait une tache blanche sur le plan */
.band .grad-btn{color:var(--on-media)}
.band .grad-btn::before{background:#0E1013}
.band .grad-btn:hover::before{background:#191C21}
@media (pointer:coarse){.grad-btn{min-height:52px}.grad-btn--sm{min-height:44px;padding-block:13px}}
@media (max-width:640px){.grad-btn{padding:16px 30px;font-size:1rem}}
/* ---------- héro scrubbé ---------- */
/* La hauteur du heros, c'est sa duree : la descente vaut cette hauteur moins
un ecran, et le film comme les bandes de texte s'y repartissent. Elle a ete
ramenee de 750 a 300vh (420 a 240 sur telephone) le jour ou le heros est
passe de cinq bandes a deux : a 750vh, deux textes se seraient perdus dans
une descente prevue pour cinq. Puis a 240 / 200vh le 5 septembre 2026, le
client trouvant la descente encore longue.
Attention en rejouant ce reglage : la course vaut la hauteur MOINS un
ecran, donc elle se raccourcit bien plus vite que le chiffre. Passer de
240 a 170vh sur telephone n'aurait pas retire 30 % mais 50 % de descente,
et la seconde bande n'aurait plus eu qu'un tiers d'ecran pour se lire.
Ici on garde environ 70vh de lecture par bande. Descendre nettement plus
bas rendrait le film saccade et les textes fugaces. */
.hero{position:relative;height:240vh;z-index:1}
@media (max-width:900px){.hero{height:200vh}}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--media-bg)}
.poster,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background-size:cover;background-position:50% 50%;transition:opacity .8s var(--e1)}
.hero video{opacity:0;transition:opacity .8s var(--e1);transform:translateZ(0);will-change:transform}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed video{display:none}
/* Le film est en 16/9 et la voiture y tient toute la largeur : sur un ecran
plus haut que large, le `cover` l'agrandit jusqu'a 3,85 fois et n'en montre
qu'une aile, floue par-dessus le marche. En dessous de 4/3 on passe donc en
`contain` : la voiture est entiere, et affichee sous sa taille native, donc
nette. Le 20 % la pose juste au-dessus du titre, sa reflexion venant mourir
sur le surtitre. L'image d'attente suit la meme regle, sinon elle sauterait
au moment ou la video prend le relais. */
@media (max-aspect-ratio:4/3){
/* On dimensionne le cadre a la bande elle-meme (largeur pleine, hauteur
deduite du 16/9) plutot que de laisser un `contain` la centrer dans une
boite plein ecran : le masque de fondu se cale ainsi exactement sur le
bas de l'image, ou la reflexion s'arretait net.
Le `calc` aligne le centre de la bande sur celui du titre. Le H1 tombe a
52 % de la scene, moins les 11svh dont on le remonte ci-dessous, d'ou le
41 % ; 33,75vw vaut la demi hauteur de la bande (120vw x 9/16 / 2). Un
`top` en pourcentage seul derivait de 82 px sur une tablette en portrait.
Grossissement a 120 %. Mesuree sur toute l'orbite, la carrosserie occupe
les colonnes 12,92 % a 99,79 % : il n'y a que 13,12 % de marge, donc a ce
niveau la voiture depasse forcement. On met alors toute la coupe a gauche
(19,8 %, contre 0,2 % a droite, la marge reelle de ce cote) : le titre
couvre deja le tiers gauche, le nez y disparait sans se voir, tandis
qu'un rognage a droite trancherait la poupe en pleine lumiere. */
.poster,.hero video{inset:auto;left:-19.8%;right:auto;top:calc(41% - 33.75vw);
width:120%;height:auto;aspect-ratio:16/9;object-fit:contain;
-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent 100%);
mask-image:linear-gradient(180deg,#000 75%,transparent 100%)}
.poster{background-size:100% 100%;background-position:50% 50%;background-repeat:no-repeat}
/* Le titre remonte d'un quart de sa hauteur d'origine. Mesure : le H1 se
tient entre 43 et 47 % de la hauteur d'ecran selon le telephone, donc
11svh vaut bien 25 % partout. Le film suit, via le 41 % ci-dessus. */
.band .inner{transform:translateY(-11svh)}
/* La seconde bande porte en plus un sous-titre et deux boutons : son bloc
fait 324 px contre 159, et comme tout est centre verticalement, son titre
remonte de 117 px au-dessus de celui de la premiere, loin de la voiture.
On le redescend d'autant. La valeur est constante sur telephone : sous
714 px de large le clamp bloque le titre a 40 px, donc les deux blocs
gardent exactement la meme hauteur d'un modele a l'autre (verifie sur
375x667, 375x812 et 430x932 : ecart nul). */
.hero .band.e-rise .inner{transform:translateY(calc(-11svh + 117px))}
}
/* Au-dela, la police du titre repasse au-dessus de 40 px et les blocs
maigrissent : l'ecart mesure tombe a 104 px (768x1024). */
@media (max-aspect-ratio:4/3) and (min-width:700px){
.hero .band.e-rise .inner{transform:translateY(calc(-11svh + 104px))}
}
.scrim{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(4,4,6,.82) 0%,rgba(4,4,6,.5) 24%,rgba(4,4,6,0) 50%),
linear-gradient(180deg,rgba(4,4,6,.5) 0%,rgba(4,4,6,0) 20%,
rgba(4,4,6,0) 76%,rgba(4,4,6,.52) 100%)}
/* Le film s'arretait net sur le fond de la page. Ce degrade prend le relais
sur le dernier tiers du cadre: il part de la couleur de fond en transparent
pour eviter le voile gris qu'un "transparent" pur produirait en sRGB. */
.fade-bas{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
background:linear-gradient(to bottom,rgba(0,0,0,0),#000)}
.vignette{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 118% 100% at 56% 50%,rgba(4,4,6,0) 52%,rgba(4,4,6,.58) 100%)}
.ring{position:absolute;left:var(--gut);bottom:36px;width:44px;height:44px;color:#43D9A3;
transform:rotate(-90deg);pointer-events:none;transition:opacity .5s var(--e1)}
.ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0}
.cue{position:absolute;left:var(--gut);bottom:36px;display:flex;align-items:center;gap:12px;
font-size:13px;font-weight:450;letter-spacing:-.005em;
color:var(--on-media-2);pointer-events:none;transition:opacity .5s var(--e1)}
.cue.hide{opacity:0}
.cue b{display:block;width:2px;height:26px;border-radius:2px;
background:linear-gradient(180deg,#43D9A3,transparent)}
.hud{position:absolute;right:var(--gut);bottom:36px;display:flex;align-items:baseline;gap:9px;
padding:9px 15px;border-radius:999px;background:rgba(11,11,13,.55);
border:1px solid rgba(245,245,247,.16);backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
font-family:var(--mono);font-size:12px;letter-spacing:.02em;
color:var(--on-media-2);pointer-events:none}
.hud b{font-size:17px;font-weight:500;color:#43D9A3;font-variant-numeric:tabular-nums}
@media (max-height:620px){.hud,.cue,.ring{display:none}}
/* Sur telephone, le bouton WhatsApp occupe le coin bas droit : la TLV passe
a gauche, au-dessus du repere de defilement, et redescend a sa place quand
celui-ci s'efface au premier defilement. */
@media (max-width:640px){
.hud{right:auto;left:var(--gut);bottom:82px;transition:bottom .5s var(--e1)}
.cue.hide+.hud{bottom:36px}
}
/* ---------- bandes de texte ---------- */
.bands{position:absolute;inset:0}
.band{position:absolute;inset:0;display:grid;align-content:center;
padding:11svh var(--gut);pointer-events:none;opacity:0;
color:var(--on-media);text-shadow:var(--tshadow)}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;
opacity:calc(.25 + .75*var(--k,1));
background:radial-gradient(ellipse 56% 82% at var(--sx,24%) 50%,
rgba(3,3,6,.74) 0%,rgba(3,3,6,.5) 44%,rgba(3,3,6,0) 76%)}
.band.hot{pointer-events:auto}
.band .inner{position:relative;max-width:min(640px,58vw)}
.band .kicker{color:#43D9A3}
.band h1,.band .t{font-weight:600;
font-size:clamp(40px,5.6vw,80px);line-height:1.04;letter-spacing:-.038em;max-width:14ch;margin:0}
.band .sub{margin-top:18px;font-size:clamp(17px,1.32vw,21px);color:var(--on-media-2);
max-width:34ch;line-height:1.42;letter-spacing:-.014em}
.band .cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}
.w.em{color:#43D9A3}
.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
opacity:var(--kc);
transform:scale(calc(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
.e-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
transform:translateY(calc((1 - var(--kc))*-28px))}
.e-grid .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*3.4,1);opacity:var(--kc);
transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
transform:translateY(calc((1 - var(--kc))*22px))}
.e-rise .sub{--ks:clamp(0,(var(--k,0) - .58)*3.4,1);opacity:var(--ks);
transform:translateY(calc((1 - var(--ks))*14px))}
.e-rise .cta{--kb:clamp(0,(var(--k,0) - .74)*4.4,1);opacity:var(--kb);
transform:translateY(calc((1 - var(--kb))*14px))}
/* ---------- héro statique ---------- */
.hero-static{display:none;position:relative;min-height:92svh;z-index:1;overflow:hidden;
flex-direction:column;justify-content:center;background:var(--canvas);padding-top:74px}
.hero-static .shot{position:relative;width:100%;background:var(--media-bg)}
.hero-static .shot img{width:100%;height:auto;display:block}
.hero-static .shot::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:46%;
background:linear-gradient(180deg,transparent,var(--canvas) 92%)}
.hero-static .inner{position:relative;width:100%;padding:0 var(--gut) 44px;margin-top:-5vh}
.hero-static h1{font-size:clamp(38px,9.8vw,62px);max-width:12ch;letter-spacing:-.04em}
.hero-static .sub{margin-top:16px;color:var(--text-secondary);max-width:32ch;font-size:17.5px;
letter-spacing:-.014em}
.hero-static .cta{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
/* Les deux boutons du heros forment une paire. Plutot que d'accorder les
marges a la main — le bouton plein porte une bordure que le degrade n'a
pas, et les corps de texte changent selon l'ecran — on laisse la mise en
page les etirer a la meme hauteur. Sur telephone ils passent tous les deux
en pleine largeur, la regle generale ne le faisant que pour .tbtn. */
.band .cta,.hero-static .cta{align-items:stretch}
/* Empiles sur telephone, les deux boutons ne partagent plus la meme ligne de
flex : l'etirement ne les accorde plus. On leur donne alors la meme boite,
et un corps de texte qui evite que « Demander mon devis » passe a la ligne
— c'etait la vraie cause de l'ecart de hauteur. La hauteur minimale couvre
aussi les 52 px que les ecrans tactiles imposent au bouton degrade. */
@media (max-width:640px){
.band .cta .grad-btn,.band .cta .tbtn,
.hero-static .cta .grad-btn,.hero-static .cta .tbtn{
width:100%;justify-content:center;font-size:1rem;
min-height:54px;padding:14px 24px}
}
@media (orientation:landscape) and (min-width:721px){
.hero-static .shot img{max-height:62svh;object-fit:cover;object-position:50% 46%}
}
/* ---------- sections ---------- */
main{position:relative;z-index:2}
.sec,.hero,.hero-static{scroll-margin-top:88px}
.sec{position:relative;padding:clamp(92px,12vh,164px) var(--gut);background:var(--canvas)}
.sec.tinted{background:var(--band)}
@media (max-width:640px){.sec{padding-block:clamp(56px,9vh,92px)}}
/* "Trois choses s'arretent a la vitre": pas de lede sous le titre ici, la
tete est plus courte que sur les autres sections mais gardait le meme
vide au-dessus qu'elles. Resserre sur mobile seulement. */
@media (max-width:640px){#promesse{padding-top:clamp(12px,2vh,22px)}}
.kicker{display:block;font-size:15px;font-weight:500;letter-spacing:-.008em;
color:var(--accent);margin-bottom:12px}
.head{max-width:960px;margin-bottom:clamp(44px,6vh,80px)}
.head h2{font-size:clamp(34px,4.6vw,62px);max-width:17ch;letter-spacing:-.036em}
.head .lede{margin-top:22px;color:var(--text-secondary);max-width:60ch;
font-size:clamp(17px,1.24vw,20px);line-height:1.45;letter-spacing:-.014em}
.rev{opacity:0;transform:translateY(20px);
transition:opacity .8s var(--e1),transform .8s var(--e2)}
.sec.in .rev{opacity:1;transform:none}
.sec.in .stag>*:nth-child(1){transition-delay:0ms}
.sec.in .stag>*:nth-child(2){transition-delay:70ms}
.sec.in .stag>*:nth-child(3){transition-delay:140ms}
.sec.in .stag>*:nth-child(4){transition-delay:210ms}
.sec.in .stag>*:nth-child(5){transition-delay:280ms}
.sec.in .stag>*:nth-child(6){transition-delay:350ms}
.sec.in .stag>*:nth-child(7){transition-delay:420ms}
.sec.in .stag>*:nth-child(8){transition-delay:490ms}
.sec.done .stag>*:nth-child(n){transition-delay:0ms!important}
/* ---------- S1 · la promesse ---------- */
.promise{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(32px,5vw,88px);align-items:center}
.promise .shot{position:relative;padding:clamp(16px,2.2vw,34px);border-radius:var(--radius-lg);
background:var(--canvas-2);border:1px solid var(--line)}
:root[data-theme="dark"] .promise .shot{background:var(--panel-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .promise .shot{background:var(--panel-2)}}
.promise .shot img{width:100%;height:auto}
.gains{list-style:none;margin:0;padding:0}
.gains li{padding:clamp(22px,2.8vw,32px) 0;border-top:1px solid var(--line);
display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,30px);align-items:baseline}
.gains li:last-child{border-bottom:1px solid var(--line)}
.gains .n{font-family:var(--mono);font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.gains h3{font-size:clamp(22px,2.4vw,31px);letter-spacing:-.028em}
.gains p{margin-top:10px;color:var(--text-secondary);font-size:17px;max-width:40ch;
line-height:1.45;letter-spacing:-.012em}
@media (max-width:980px){.promise{grid-template-columns:1fr;gap:38px}}
/* ---------- S2 · la loi et le simulateur ---------- */
.law-head{max-width:800px;margin:0 auto clamp(42px,5vh,72px);text-align:center}
.law-head h2{max-width:none;margin-inline:auto}
.law-head .lede{margin-inline:auto;text-align:left}
.sim{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,64px);
align-items:center;background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
padding:clamp(18px,2.6vw,36px);max-width:1180px;margin-inline:auto}
/* Trois zones de vitrage masquées séparément sur la même photo: le pare-brise
et la vitre avant suivent le curseur avant, la custode arrière suit le sien.
Le cadre garde le rapport exact de la photo, sinon les masques exprimés en
pourcentage tomberaient à côté. */
.glass{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1448/1086;
background:var(--canvas-2)}
.glass .stack{position:absolute;inset:0;transform:scale(var(--z,1));transform-origin:62% 35%;
transition:transform .55s var(--e2);will-change:transform}
.glass .stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.glass .tint{position:absolute;inset:0;background:#05070A;pointer-events:none;
transition:opacity .14s linear}
/* Masques relevés au pixel sur la photo: sonde de luminance colonne par colonne, puis
contrôle du tracé au trait. Le pare-brise descend jusqu'à 34,8 % parce qu'on le voit
de trois quarts: son bord avant part très loin sur la gauche. */
.glass .tint--pb{opacity:var(--oav,.4);
clip-path:polygon(34.8% 38.9%,36% 37.5%,38% 36%,40% 34.4%,42% 32.8%,44% 31.3%,
44.9% 30.6%,46% 30.3%,48% 30%,50% 29.75%,54% 29.65%,58% 29.65%,61.5% 29.95%,
62.4% 30.4%,60.2% 33%,58.2% 36.2%,56.6% 38.6%,53% 39.5%,48% 39.3%,42% 39.1%,36% 39%)}
.glass .tint--av{opacity:var(--oav,.4);
clip-path:polygon(63.9% 30.55%,66% 30.25%,68% 29.9%,70% 29.85%,70.9% 30.45%,
71.2% 36%,71.05% 40.95%,67.6% 40.95%,63% 40.45%,60.5% 38.9%,59.2% 37.05%,
60.4% 35.05%,61.4% 33.05%,63.4% 31.05%)}
.glass .tint--ar{opacity:var(--oar,.75);
clip-path:polygon(71.9% 30.35%,74% 30.25%,76% 30.6%,78% 31.45%,80% 32.25%,82% 33.2%,
83.4% 34.6%,84.4% 36.5%,84.4% 37.5%,83.6% 38.25%,82% 38.6%,79.9% 39.35%,
77.9% 39.75%,75.9% 40.05%,74% 40.3%,73.3% 40.25%,73% 35%,72.5% 33%)}
/* Le rétroviseur est de la carrosserie, pas du vitrage. On le redécoupe au-dessus du
film, sinon le chrome prend la teinte et ça se voit immédiatement. */
.glass .cut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
pointer-events:none;
clip-path:polygon(61.1% 38.75%,61.9% 36.95%,64.8% 36.6%,66.9% 38.15%,67.6% 39.6%,
67.3% 40.2%,65.5% 40.5%,62.5% 40.6%)}
/* Dès qu'on zoome, le cadre se pilote à la souris: le point sous le curseur
reste fixe, comme sous une loupe. Au doigt, on fait glisser. */
.glass.pannable{cursor:crosshair;touch-action:none}
.glass:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.zoom-hint{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--text-secondary);
opacity:0;transition:opacity .3s var(--e1)}
.zoom-hint.on{opacity:1}
.sim-axis{margin:0 0 20px;font-size:13px;line-height:1.55;color:var(--text-secondary)}
.sim-axis b{color:var(--text-primary);font-weight:600}
.sim-legal{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
font-size:12.5px;line-height:1.6;color:var(--text-secondary)}
.info-btn{display:inline-flex;align-items:center;gap:9px;margin-top:14px;
padding:11px 18px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;
font-weight:500;color:var(--text-primary);background:transparent;
border:1px solid var(--line-strong);
transition:border-color .3s var(--e1),background .3s var(--e1)}
.info-btn:hover{border-color:var(--accent);background:var(--accent-wash)}
.info-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.info-btn i{display:grid;place-items:center;width:18px;height:18px;flex:none;
border-radius:50%;border:1.5px solid currentColor;font-family:var(--mono);
font-size:11px;font-style:normal;line-height:1}
/* Le détail réglementaire vit dans une boîte de dialogue: la section reste
respirable, le texte complet reste à un clic. */
.law-modal{width:min(680px,calc(100vw - 28px));max-height:min(85vh,780px);padding:0;
border:1px solid var(--line);border-radius:var(--radius-lg);
background:var(--panel);color:var(--text-primary);box-shadow:var(--shadow-card)}
.law-modal::backdrop{background:rgba(0,0,0,.66)}
.law-modal__in{padding:clamp(22px,3vw,34px);overflow-y:auto;max-height:inherit}
.law-modal__x{float:right;margin:-6px -6px 0 12px;width:36px;height:36px;
display:grid;place-items:center;border-radius:50%;cursor:pointer;
background:transparent;border:1px solid var(--line);color:var(--text-secondary);
font-size:19px;line-height:1;transition:border-color .3s var(--e1),color .3s var(--e1)}
.law-modal__x:hover{border-color:var(--line-strong);color:var(--text-primary)}
.law-modal__x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.law-modal h3{font-size:clamp(1.28rem,2.4vw,1.6rem);letter-spacing:-.022em;margin:0 0 5px}
.law-modal .src{font-family:var(--mono);font-size:12px;color:var(--text-secondary);margin:0 0 24px}
.law-modal h4{font-size:.95rem;font-weight:600;letter-spacing:-.01em;margin:26px 0 9px}
.law-modal p{margin:0 0 12px;font-size:14.5px;line-height:1.62;color:var(--text-secondary)}
.law-modal .calc{font-family:var(--mono);font-size:12.5px;line-height:1.9;
background:var(--canvas-2);border:1px solid var(--line);border-radius:12px;
padding:14px 16px;margin:0 0 14px;color:var(--text-primary);overflow-x:auto;
white-space:pre}
.law-modal dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 20px;
font-size:14.5px;line-height:1.5}
.law-modal dt{font-weight:600;color:var(--text-primary)}
.law-modal dd{margin:0;color:var(--text-secondary)}
.law-modal .fine{font-size:12.5px;color:var(--text-secondary);
margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:560px){.law-modal dl{grid-template-columns:1fr;gap:2px 0}
.law-modal dd{margin:0 0 10px}}
.glass .tag{position:absolute;left:14px;top:14px;padding:7px 13px;border-radius:999px;
background:rgba(11,11,13,.55);border:1px solid rgba(245,245,247,.16);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
font-size:12px;font-weight:450;color:var(--on-media-2)}
/* ---- Simulateur de jantes ----
La jante posee est un disque unique, neutre, tire de la planche du client:
sa moitie gauche etait entierement visible, on l'a refletee pour reconstituer
la roue complete. Les trois finitions ne sont ensuite qu'une teinte appliquee
en fusion "color": la luminance, donc tout le poli du metal, reste celle de
la photo d'origine. */
.jsim{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(26px,4vw,64px);align-items:center;background:var(--panel);
border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
padding:clamp(18px,2.6vw,36px);max-width:1180px;margin-inline:auto}
/* La photo est detouree : on laisse le fond de la carte passer au travers.
Un aplat ici (noir) reapparaissait en gris dans les coins arrondis, la ou
le rayon laisse voir le panneau. Transparent, l'arrondi devient invisible,
en clair comme en sombre. */
.jglass{position:relative;border-radius:var(--radius);overflow:hidden;
aspect-ratio:1536/1024;background:transparent}
.jglass.pannable{cursor:crosshair;touch-action:none}
.jglass:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.jglass .stack{position:absolute;inset:0;transform:scale(var(--z,1));transform-origin:22.72% 63.57%;
transition:transform .55s var(--e2);will-change:transform}
.jglass .stack>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Les deux disques sont cales sur la photo, en pourcentages : changer la photo
oblige a les recalculer, sinon ils glissent a cote des roues.
Photo actuelle (sim-jante-cla.webp, 1536x1024) : roues relevees a la grille,
centres (349, 651) et (1228, 651), rayon 87 px — 3 px de plus que le voile
pour qu'aucun lisere de la jante d'origine ne depasse. La jante-maitre est
decoupee dans cette meme photo, au meme rayon : le disque se superpose donc
pile sur la roue, seule la teinte change. */
.rim{position:absolute;width:11.3281%;height:16.9922%;border-radius:50%;isolation:isolate;
opacity:var(--jo,0);transition:opacity .32s var(--e1);pointer-events:none}
/* Le voile et sa clarte sont portes par ::before, pas par .rim : un filter
sur .rim s'appliquerait a toute la boite, logo compris, et la marque
disparaitrait sur les finitions sombres.
--jimg est la photo reelle de la finition quand l'atelier en a mis une ;
sinon on retombe sur la jante maitresse, teintee au filtre.
--jsc n'est pose (1,05) que pour une photo : le disque est cale au pixel
sur la jante d'origine, et une photo venue d'ailleurs n'a jamais tout a
fait le meme cadrage — sans ce cran, un arc de la jante d'origine ressort
la ou le calage est le moins juste. Ne jamais l'appliquer a la jante
maitresse : elle est decoupee dans la photo, l'agrandir la dedoublerait. */
.rim::before{content:"";position:absolute;inset:0;border-radius:50%;
background-image:var(--jimg,url(assets/jante-maitre-cbs03.webp?v=2));
background-position:50% 50%;background-size:100% 100%;background-repeat:no-repeat;
transform:scale(var(--jsc,1));
filter:brightness(var(--jb,.92)) contrast(1.05)}
.rim--av{left:17.0573%;top:55.0781%}
.rim--ar{left:74.2839%;top:55.0781%}
.rim i{position:absolute;inset:0;border-radius:50%;background:var(--jf,#D1CBD9);
mix-blend-mode:color;transition:background-color .32s var(--e1)}
/* Le passage de roue mange la lumiere en haut: sans cette ombre la jante
posee flotte au lieu de s'asseoir. */
.rim u{position:absolute;inset:0;border-radius:50%;
background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.02) 46%,rgba(0,0,0,.22))}
/* Le logo du fournisseur, pose sur le cache-moyeu. Il vient apres la teinte
et apres l'ombre : ni recolore par le mix-blend-mode, ni assombri par la
clarte, donc lisible sur les neuf finitions. Repere mesure sur la photo
source : le vrai logo du cache-moyeu est centre a 50,00 % / 50,57 % du
disque et mesure 6,3 x 7,5 %. On se cale dessus, un cran plus gros pour
rester net a l'echelle d'affichage. --jlo le retire (0) des qu'une photo
reelle est posee : le logo y est deja. */
.rim::after{content:"";position:absolute;left:50%;top:50.6%;width:9%;height:9%;
transform:translate(-50%,-50%);opacity:var(--jlo,1);
background:url(assets/logo-cbs.webp) 50% 50%/contain no-repeat;
filter:drop-shadow(0 0 1px rgba(0,0,0,.5))}
/* Dix choix depuis que le catalogue du fournisseur est passe en entier : deux
colonnes en feraient cinq rangees. On laisse la grille en poser autant que
la largeur en accepte. */
.finitions{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;
margin:0 0 24px;border:0;padding:0}
.finitions legend{padding:0;margin:0 0 14px;font-size:13.5px;color:var(--text-secondary)}
.finitions input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.finitions label{display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer;
border:1px solid var(--line);border-radius:14px;font-size:14.5px;font-weight:450;
color:var(--text-secondary);min-height:46px;
transition:border-color .3s var(--e1),color .3s var(--e1),background .3s var(--e1)}
.finitions label:hover{border-color:var(--line-strong);color:var(--text-primary)}
.finitions input:checked + label{border-color:var(--accent);color:var(--text-primary);
background:var(--accent-wash)}
.finitions input:focus-visible + label{outline:2px solid var(--accent);outline-offset:3px}
.finitions .pastille{width:22px;height:22px;flex:none;border-radius:50%;
border:1px solid rgba(128,128,128,.35);background:var(--p)}
.jnote{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);
font-size:12.5px;line-height:1.6;color:var(--text-secondary)}
/* ---------- S3b bis · les jantes a vendre ----------
Le simulateur juste au-dessus montre ce qu'on sait faire d'une jante ; cette
section vend les jantes elles-memes. Meme grammaire que les cartes de
prestations, avec le prix et l'appel au devis en pied de carte : chaque jante
est fabriquee sur mesure, la commande passe donc toujours par nous. */
.jv__args{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(28px,3.4vw,40px);padding:0;list-style:none}
.jv__args li{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--accent);background:var(--accent-wash);border:1px solid var(--accent);
border-radius:999px;padding:8px 15px}
.jv__grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
gap:clamp(16px,2vw,24px)}
.jv__c{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;
transition:border-color .3s var(--e1),box-shadow .3s var(--e1),transform .35s var(--e2)}
.jv__c:hover{border-color:var(--line-strong);box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.jv__photo{margin:0;aspect-ratio:1/1;background:var(--media-bg);display:grid;place-items:center;overflow:hidden}
.jv__photo img{width:100%;height:100%;object-fit:cover;display:block}
.jv__photo--vide span{font-family:var(--mono);font-size:13px;letter-spacing:.14em;
text-transform:uppercase;color:var(--on-media-2)}
.jv__corps{display:flex;flex-direction:column;flex:1 1 auto;padding:clamp(17px,2vw,22px)}
.jv__corps h3{font-size:clamp(19px,1.9vw,22px);letter-spacing:-.022em;margin:0}
.jv__mot{margin:7px 0 0;font-size:14.5px;line-height:1.5;color:var(--text-secondary)}
.jv__specs{margin:15px 0 0;padding:0;display:grid;gap:0;
border-top:1px solid var(--line)}
.jv__specs>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:8px 0;border-bottom:1px solid var(--line)}
.jv__specs dt{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--text-secondary);flex:none}
.jv__specs dd{margin:0;font-size:14px;text-align:right;letter-spacing:-.008em;
font-variant-numeric:tabular-nums}
.jv__pied{margin-top:auto;padding-top:17px;display:flex;align-items:flex-end;
justify-content:space-between;gap:14px;flex-wrap:wrap}
.jv__prix{display:flex;flex-direction:column;font-family:var(--mono);font-size:21px;font-weight:500;
color:var(--text-primary);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.jv__prix small{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.06em;
text-transform:uppercase;color:var(--text-secondary);margin-bottom:5px}
.jv__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jv__payer{font-size:13.5px;font-weight:500;color:var(--accent);text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .25s var(--e1)}
.jv__payer:hover{border-bottom-color:var(--accent)}
.jv__mention{margin:clamp(22px,2.6vw,30px) 0 0;font-size:13.5px;color:var(--text-secondary);
line-height:1.55;max-width:70ch}
/* La bande de paiement n'apparait que si un lien est renseigne. */
.jv__paiement{margin:clamp(24px,3vw,34px) 0 0;display:flex;align-items:center;
justify-content:space-between;gap:clamp(18px,3vw,34px);flex-wrap:wrap;
padding:clamp(20px,2.6vw,28px);border:1px solid var(--line);border-radius:var(--radius);
background:var(--panel)}
.jv__paiement p{margin:6px 0 0;font-size:15px;color:var(--text-secondary);line-height:1.5;max-width:52ch}
.jv__note{margin:clamp(20px,2.4vw,28px) 0 0;padding-top:18px;border-top:1px solid var(--line);
font-size:13px;line-height:1.6;color:var(--text-secondary);max-width:78ch}
@media (max-width:560px){
.jv__grille{grid-template-columns:1fr}
.jv__paiement{flex-direction:column;align-items:stretch}
}
/* Le formulaire de devis, dans sa fenetre. Il demande la voiture, jamais
l'entraxe : c'est l'atelier qui traduit. */
.kbr-jd__intro{margin:0 0 22px;font-size:15px;line-height:1.55;color:var(--text-secondary);max-width:56ch}
.kbr-jd{display:grid;gap:clamp(18px,2.4vw,26px)}
.kbr-jd__bloc{border:0;margin:0;padding:0;display:grid;gap:14px}
.kbr-jd__bloc legend{padding:0;margin:0 0 2px;font-family:var(--mono);font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.kbr-jd .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kbr-jd select{width:100%;font:inherit;color:var(--text-primary);background:var(--canvas);
border:1px solid var(--line-strong);border-radius:12px;padding:13px 14px;
appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
padding-right:40px}
.kbr-jd select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kbr-jd__legal{margin:0;font-size:12.5px;color:var(--text-secondary);line-height:1.5}
/* « facultatif » a cote du libelle : discret, mais il enleve la crainte de
devoir aller chercher sa carte grise avant d'envoyer. */
.kbr-jd__opt{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
color:var(--text-secondary);border:1px solid var(--line);border-radius:999px;
padding:2px 7px;margin-left:7px;vertical-align:1px}
.kbr-jd__aide{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-secondary)}
/* Le VIN se lit caractere par caractere : espacement large et chasse fixe,
pour qu'un 0 ne passe pas pour un O au moment de le recopier. */
.kbr-jd input#j-vin{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.kbr-jd input#j-vin::placeholder{font-family:var(--sans);letter-spacing:normal;text-transform:none}
@media (max-width:560px){
.kbr-jd .duo{grid-template-columns:1fr}
}
/* Safari sur iPhone agrandit la page sous 16 px : meme regle que pour Amelia. */
@media (max-width:620px){
.kbr-fen__vue--jantes input,
.kbr-fen__vue--jantes select,
.kbr-fen__vue--jantes textarea{font-size:16px}
}
@media (max-width:900px){
.jsim{grid-template-columns:1fr}
}
.sim-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sim-read{font-family:var(--mono);font-size:13px;color:var(--text-secondary)}
.sim-read b{font-size:36px;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums;
letter-spacing:-.02em}
.sim-hint{font-size:13.5px;color:var(--text-secondary)}
.sim-block + .sim-block{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.track{position:relative;margin:18px 0 0;padding-top:16px}
.track--free{padding-top:4px}
.track .tick{position:absolute;left:68.4%;top:0;bottom:22px;width:1px;background:var(--line-strong);pointer-events:none}
.track .tick::after{content:"70 %";position:absolute;left:8px;top:-4px;font-family:var(--mono);
font-size:11px;color:var(--text-secondary);white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;
background:transparent;margin:0;cursor:grab;display:block}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:var(--line)}
input[type=range]::-moz-range-track{height:5px;border-radius:5px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
margin-top:-10.5px;border-radius:50%;background:var(--canvas);border:1px solid var(--line-strong);
box-shadow:var(--shadow-card);transition:transform .25s var(--e2)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--canvas);
border:1px solid var(--line-strong);box-shadow:var(--shadow-card)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08)}
.verdicts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.verdict{font-size:13px;font-weight:450;letter-spacing:-.006em;
padding:9px 15px;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-secondary);
transition:color .32s var(--e1),border-color .32s var(--e1),background .32s var(--e1)}
.verdict.ok{color:var(--accent);border-color:var(--accent);background:var(--accent-wash)}
.verdict.no{color:var(--danger);border-color:var(--danger);background:rgba(199,54,43,.08)}
:root[data-theme="dark"] .verdict.no{background:rgba(255,107,90,.1)}
.sim-note{margin-top:14px;font-size:15px;color:var(--text-secondary);min-height:3em;
line-height:1.45;transition:color .32s var(--e1)}
.sim-note.warn{color:var(--danger)}
.law-close{margin:clamp(38px,5vh,64px) auto 0;padding-top:28px;border-top:1px solid var(--line);
color:var(--text-secondary);max-width:62ch;font-size:17px;text-align:center;line-height:1.45}
.law-close i{font-style:normal;color:var(--text-primary)}
.zoom-row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:4px}
.zlabel{font-family:var(--mono);font-size:12px;color:var(--text-secondary);white-space:nowrap}
.zlabel b{font-size:14px;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums}
.zoom-row input[type=range]{height:36px}
.zoom-row input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7.5px}
@media (pointer:coarse){.zoom-row input[type=range]{height:44px}}
@media (max-width:940px){.sim{grid-template-columns:1fr;gap:28px}}
/* ---------- S3 · prestations ---------- */
/* Sélecteur à deux onglets. L'indicateur ne bouge qu'en transform: les deux
segments font exactement la même largeur, donc translateX(100%) le pose
pile sur le second. Aucune propriété de mise en page n'est animée. */
.segmented{position:relative;display:grid;grid-template-columns:1fr 1fr;
padding:4px;border-radius:999px;background:var(--canvas-2);border:1px solid var(--line);
margin-bottom:clamp(28px,3.5vh,44px);width:max-content;max-width:100%}
.sec.tinted .segmented{background:var(--panel)}
.segmented button{position:relative;z-index:1;border:0;background:transparent;
font-family:var(--sans);font-size:15.5px;font-weight:500;letter-spacing:-.01em;
color:var(--text-secondary);padding:11px 30px;border-radius:999px;cursor:pointer;
white-space:nowrap;transition:color .3s var(--e1)}
.segmented button:hover{color:var(--text-primary)}
.segmented button[aria-selected="true"]{color:var(--text-primary)}
.seg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
border-radius:999px;background:var(--canvas);border:1px solid var(--line);
box-shadow:var(--shadow-card);transition:transform .42s var(--e2)}
.segmented[data-active="bat"] .seg-ind{transform:translateX(100%)}
@media (pointer:coarse){.segmented button{padding-block:14px}}
@media (max-width:420px){.segmented{width:100%}.segmented button{padding-inline:12px;font-size:15px}}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid[hidden]{display:none}
/* le panneau qui apparaît se pose en douceur, sans décaler la mise en page */
.grid.swap{animation:panelIn .45s var(--e1) both}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.svc{position:relative;background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;display:grid;grid-template-rows:auto 1fr;
transition:transform .45s var(--e2),box-shadow .45s var(--e1),border-color .45s var(--e1)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.svc figure{margin:0;position:relative;aspect-ratio:4/3;display:grid;place-items:center;padding:14px;
overflow:hidden;background:var(--canvas-2)}
:root[data-theme="dark"] .svc figure{background:var(--panel-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .svc figure{background:var(--panel-2)}}
.svc figure img{max-width:100%;max-height:100%;min-width:0;min-height:0;width:auto;height:auto;
object-fit:contain;transition:transform .9s var(--e2)}
.svc:hover figure img{transform:scale(1.04)}
.svc .mark{display:none}
.svc .body{padding:20px 22px 24px;border-top:1px solid var(--line)}
.svc h3{font-size:20px;letter-spacing:-.022em}
.svc p{margin-top:9px;color:var(--text-secondary);font-size:15.5px;max-width:32ch;
line-height:1.45;letter-spacing:-.01em}
@media (max-width:1120px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.contacts{margin-top:clamp(36px,5vh,64px);display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ctile{border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(22px,2.8vw,34px);background:var(--panel)}
.ctile h3{font-size:clamp(20px,2.1vw,26px);letter-spacing:-.026em}
.ctile p{margin-top:10px;color:var(--text-secondary);font-size:16px;max-width:40ch;line-height:1.45}
.ctile .tel{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
font-size:17px;font-weight:500;color:var(--accent);text-decoration:none;
transition:opacity .3s var(--e1);letter-spacing:-.014em}
.ctile .tel:hover{opacity:.72}
.ctile .tel::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
@media (max-width:760px){.contacts{grid-template-columns:1fr}}
.terminator{margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(22px,2.8vw,34px);display:flex;gap:26px;align-items:center;flex-wrap:wrap;
background:var(--panel)}
.terminator__photo{width:clamp(220px,34vw,360px);height:clamp(220px,34vw,360px);flex:none;object-fit:cover;
border-radius:var(--radius);border:1px solid var(--line);background:#000}
.terminator__texte{flex:1 1 240px;min-width:0}
.terminator__tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.terminator .tname{font-size:clamp(21px,2.2vw,27px);letter-spacing:-.026em;font-weight:600}
/* Rupture de stock: meme grammaire que .verdict.no, la pastille rouge deja
utilisee dans le simulateur, pour ne pas inventer une deuxieme facon de
dire "attention" sur le site. */
.terminator__stock{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
text-transform:uppercase;padding:5px 12px;border-radius:999px;white-space:nowrap;
color:var(--danger);border:1px solid var(--danger);background:rgba(199,54,43,.08)}
:root[data-theme="dark"] .terminator__stock{background:rgba(255,107,90,.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .terminator__stock{background:rgba(255,107,90,.1)}}
.terminator p{color:var(--text-secondary);max-width:46ch;font-size:16px;margin-top:8px;line-height:1.45}
.terminator__note{color:var(--danger)}
.terminator .price{margin-left:auto;font-family:var(--mono);font-size:14.5px;color:var(--accent);
text-align:right;line-height:1.9;white-space:nowrap}
@media (max-width:760px){
.terminator{flex-direction:column;align-items:flex-start}
.terminator .price{margin-left:0;text-align:left}
}
/* ---------- S4 · étapes ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.8vw,38px)}
.step{position:relative}
.step .num{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);
display:grid;place-items:center;font-family:var(--mono);font-size:15px;color:var(--accent);
background:var(--canvas-2);position:relative;z-index:2}
.step h3{margin-top:24px;font-size:clamp(20px,2vw,25px);letter-spacing:-.026em}
.step p{margin-top:11px;color:var(--text-secondary);font-size:16px;max-width:30ch;line-height:1.45}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
/* ---------- S4b . les deux freres: le flou se dissipe au defilement ----------
Le portrait arrive hors du point et se fixe a mesure qu il monte. --fb vaut
zero par defaut: sans script, sur mobile et en mouvement reduit, la photo est
nette d entree. C est le script qui la trouble, jamais l inverse. */
.freres__haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(26px,4.2vw,72px);align-items:start;max-width:1240px;margin-inline:auto;
margin-bottom:clamp(38px,5.6vh,74px)}
.freres__haut .head{margin-bottom:0;max-width:none}
.freres__vue{position:relative;overflow:hidden;isolation:isolate;
max-width:1240px;margin-inline:auto}
.freres__vue img{display:block;width:100%;height:auto;
filter:blur(var(--fb,0px));will-change:filter}
/* le bas de la photo se dissout dans le fond de la section. --canvas-0 est le
meme noir a alpha nul: partir d un rgba(0,0,0,0) generique grisaillerait le
degrade en mode clair. */
.freres__vue::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;
pointer-events:none;
background:linear-gradient(to bottom,var(--canvas-0),var(--canvas) 88%)}
.freres__mot p{margin:0 0 18px;color:var(--text-secondary);
font-size:clamp(16.5px,1.16vw,18.5px);line-height:1.52;letter-spacing:-.012em;max-width:46ch}
.freres__signe{margin-top:clamp(22px,3vh,34px)}
.freres__signe b{display:block;font-size:clamp(21px,1.9vw,27px);font-weight:600;
letter-spacing:-.03em;color:var(--text-primary)}
.freres__signe span{display:block;margin-top:7px;font-family:var(--mono);font-size:12px;
letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
@media (max-width:900px){
.freres__haut{grid-template-columns:1fr;gap:clamp(20px,3vh,32px)}
}
@media (prefers-reduced-motion:reduce){
#freres .freres__vue img{filter:none}
}
/* ---------- Tarifs: un menu, une carte a la fois ----------
Les panneaux sont empiles dans la meme cellule de grille: le conteneur prend
la hauteur du plus grand et ne bouge plus d'un onglet a l'autre. Un panneau
inactif passe en visibility:hidden, ce qui le sort aussi du parcours clavier
et de la lecture d'ecran, sans avoir a le retirer du flux. */
.tar2{max-width:860px}
.tar2__menu{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(20px,2.6vh,30px)}
.tar2__cartes{display:grid}
.tar2__c{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
transition:opacity .34s var(--e1),transform .34s var(--e2),visibility 0s .34s}
.tar2__c.on{opacity:1;visibility:visible;transform:none;
transition:opacity .34s var(--e1),transform .34s var(--e2),visibility 0s}
.tcard{display:flex;flex-direction:column;height:100%;
padding:clamp(22px,2.8vw,34px);border-radius:var(--radius-lg);
background:linear-gradient(180deg,var(--panel),var(--panel-2));
border:1px solid var(--line)}
.tcard__tete{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tcard__tete h3{font-size:clamp(18px,1.9vw,23px);font-weight:500;letter-spacing:-.022em;
color:var(--text-primary)}
.tcard__dom{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);
border-radius:999px;padding:4px 10px}
.tcard__prix{display:block;margin:clamp(14px,1.8vh,20px) 0 5px;
font-size:clamp(38px,5.4vw,58px);font-weight:600;letter-spacing:-.04em;
line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums}
.tcard__prix small{font-size:.44em;font-weight:500;letter-spacing:-.02em;
color:var(--text-secondary);margin-right:.35em;vertical-align:.42em}
.tcard__quoi{color:var(--text-secondary);font-size:15px;line-height:1.45}
.tcard ul{list-style:none;margin:clamp(22px,3vh,30px) 0 0;padding:0;
display:flex;flex-direction:column;gap:11px}
.tcard li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;line-height:1.4}
.tcard li svg{flex:0 0 16px;width:16px;height:16px;margin-top:2px;
stroke:var(--accent);fill:none;stroke-width:2.2}
.tcard li b{flex:1;font-weight:400;color:var(--text-primary)}
.tcard li span{font-family:var(--mono);font-size:14.5px;color:var(--accent);
white-space:nowrap;font-variant-numeric:tabular-nums}
.tcard li span.devis{color:var(--text-secondary)}
.tcard__note{margin:clamp(20px,2.6vh,28px) 0 0;padding:13px 15px;border-radius:12px;
background:var(--accent-wash);border:1px solid var(--accent);
font-size:14px;line-height:1.5;color:var(--text-primary)}
.tcard__pied{display:flex;flex-wrap:wrap;align-items:center;gap:11px;
margin-top:auto;padding-top:clamp(20px,2.6vh,28px)}
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
padding:18px 34px;border-radius:16px;
font-family:var(--sans);font-size:1.0625rem;font-weight:600;line-height:1;
letter-spacing:-.016em;text-decoration:none;cursor:pointer;
background:transparent;color:var(--text-primary);border:1px solid var(--line-strong);
transition:border-color .3s ease,background .3s ease,transform .3s ease}
.tbtn--sm{padding:10px 22px;font-size:15px;gap:9px;border-radius:13px}
.tbtn:hover{border-color:var(--accent);background:var(--accent-wash);transform:translateY(-2px)}
.tbtn:active{transform:none}
.tbtn:hover{border-color:var(--accent);background:var(--accent-wash)}
.tbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){
.tcard__pied{flex-direction:column}
.tcard__pied .grad-btn,.tbtn{width:100%}
}
@media (prefers-reduced-motion:reduce){
.tar2__c{transition:none}
}
/* ---------- Page tarifs ----------
Un tableau reste un tableau: en-tetes de colonne et de ligne declares, ce qui
fait lire correctement un prix par un lecteur d ecran. Les filets internes
separent des lignes de donnees, ils ne sont pas des barres decoratives. */
.tar{max-width:1060px}
.tgrp{margin-bottom:clamp(38px,5.4vh,68px)}
.tgrp:last-child{margin-bottom:0}
.tgrp__tete{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.tgrp h2{font-size:clamp(21px,2.3vw,29px);letter-spacing:-.028em}
.tgrp__marque{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);
border-radius:999px;padding:4px 11px}
.tgrp__dit{margin:0 0 18px;color:var(--text-secondary);font-size:15.5px;
line-height:1.5;max-width:64ch}
.tbl{width:100%;border-collapse:collapse;background:var(--panel);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl caption{text-align:left;font-family:var(--mono);font-size:11.5px;
letter-spacing:.11em;text-transform:uppercase;color:var(--text-secondary);
padding:0 0 10px 8px}
.tbl th,.tbl td{padding:14px clamp(14px,1.7vw,20px);text-align:left;
font-size:15.5px;line-height:1.4}
.tbl thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--text-secondary);font-weight:400;
background:var(--panel-2)}
.tbl tbody tr+tr th,.tbl tbody tr+tr td{border-top:1px solid var(--line)}
.tbl tbody th{font-weight:450;color:var(--text-primary)}
.tbl td{font-family:var(--mono);color:var(--accent);white-space:nowrap;
font-variant-numeric:tabular-nums}
.tbl td.devis{color:var(--text-secondary)}
.tbl tbody tr:hover th,.tbl tbody tr:hover td{background:var(--canvas-2)}
@media (max-width:640px){
.tbl,.tbl thead,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block}
.tbl thead{display:none}
.tbl tbody tr{padding:13px clamp(14px,1.7vw,20px)}
.tbl tbody tr+tr{border-top:1px solid var(--line)}
.tbl tbody th,.tbl tbody td{padding:0;border-top:0}
.tbl tbody td{margin-top:5px}
.tbl tbody td[data-col]::before{content:attr(data-col) " ";
font-family:var(--sans);color:var(--text-secondary);text-transform:none;
letter-spacing:0;font-size:14px}
}
.tnote{margin:16px 0 0;padding:14px 16px;border-radius:12px;
background:var(--accent-wash);border:1px solid var(--accent);
color:var(--text-primary);font-size:14.5px;line-height:1.5}
.tnote b{font-weight:600}
.tfin{max-width:1060px;margin-top:clamp(20px,3vh,34px);
display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.tfin p{margin:0;color:var(--text-secondary);font-size:15.5px;max-width:52ch}
.ctile__b{display:flex;width:max-content;margin-top:20px}
/* ---------- Deux sections centrees ----------
Leur contenu est nettement plus etroit que la page: cale a gauche, il laissait
un vide a droite. Le titre, le menu et le bloc se centrent donc ensemble. Le
detail des cartes reste aligne a gauche, une liste de prix se lit comme ca. */
#tarifs .head,#jantes .head{margin-inline:auto;text-align:center}
#tarifs .head h2,#jantes .head h2,
#tarifs .head .lede,#jantes .head .lede{margin-inline:auto}
#tarifs .tar2{margin-inline:auto}
#tarifs .tar2__menu{justify-content:center}
/* ---------- S3d . les travaux: grille filtrable et visionneuse ----------
Le filtre ne deplace rien: les cartes ecartees sortent du flux et celles qui
restent rejouent une breve apparition. Pas d animation de disposition, donc
pas de reflow a chaque clic.
La visionneuse est un dialog natif: le piege a focus, la touche Echap et le
fond modal viennent du navigateur, comme pour la modale de la loi. */
.trv__filtres{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(24px,3.2vh,38px)}
.trv__f{appearance:none;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:500;
letter-spacing:-.008em;padding:9px 16px;border-radius:999px;
background:var(--panel);color:var(--text-secondary);border:1px solid var(--line);
transition:color .25s var(--e1),border-color .25s var(--e1),background .25s var(--e1)}
.trv__f:hover{color:var(--text-primary);border-color:var(--line-strong)}
.trv__f:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.trv__f[aria-pressed="true"],.trv__f[aria-selected="true"]{background:var(--accent-wash);
color:var(--accent);border-color:var(--accent)}
.trv__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(12px,1.3vw,18px)}
@media (max-width:900px){.trv__grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.trv__grille{grid-template-columns:1fr}}
.trv__c{display:none}
.trv__c.on{display:block;animation:trv-entre .42s var(--e2) both}
@keyframes trv-entre{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.trv__v{display:block;width:100%;padding:0;border:1px solid var(--line);cursor:pointer;
border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:1/1;
background:var(--panel);transition:border-color .3s var(--e1),box-shadow .3s var(--e1)}
.trv__v:hover{border-color:var(--line-strong);box-shadow:var(--shadow-lift)}
.trv__v:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.trv__v img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s var(--e2)}
.trv__v:hover img,.trv__v:focus-visible img{transform:scale(1.06)}
.trv__voile{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:9px;text-align:center;padding:18px;
background:rgba(0,0,0,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
opacity:0;transition:opacity .28s var(--e1)}
.trv__v:hover .trv__voile,.trv__v:focus-visible .trv__voile{opacity:1}
.trv__voile svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.7}
.trv__voile b{font-size:15.5px;font-weight:600;letter-spacing:-.016em;color:#fff}
.trv__etq{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);
border-radius:999px;padding:4px 10px}
.trv__vide{display:none;color:var(--text-secondary);font-size:16px;padding:26px 0}
.trv__grille.rien+.trv__vide{display:block}
/* la visionneuse */
.lb{width:min(1080px,calc(100vw - 26px));max-height:calc(100vh - 40px);padding:0;border:0;
background:transparent;overflow:visible;color:var(--text-primary)}
.lb::backdrop{background:rgba(0,0,0,.9)}
.lb__cadre{position:relative;background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius-lg);overflow:hidden}
.lb__cadre img{display:block;width:100%;height:auto;max-height:min(74vh,760px);
object-fit:contain;background:var(--media-bg)}
.lb__pied{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:clamp(15px,1.8vw,21px)}
.lb__pied h3{font-size:clamp(1.05rem,1.8vw,1.35rem);letter-spacing:-.022em;margin:0}
.lb__pied p{margin:0;font-size:14px;color:var(--text-secondary);width:100%}
.lb__b{position:absolute;width:44px;height:44px;border-radius:50%;cursor:pointer;
display:grid;place-items:center;z-index:2;
background:rgba(10,10,12,.72);border:1px solid var(--line);color:#fff;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
transition:background .25s var(--e1),border-color .25s var(--e1)}
.lb__b:hover{background:rgba(10,10,12,.94);border-color:var(--line-strong)}
.lb__b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lb__b svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9}
.lb__x{top:12px;right:12px}
.lb__p{left:12px;top:calc(min(74vh,760px) / 2 - 22px)}
.lb__s{right:12px;top:calc(min(74vh,760px) / 2 - 22px)}
@media (max-width:560px){
.lb__p,.lb__s{top:auto;bottom:calc(100% - min(74vh,760px) + 12px)}
}
@media (prefers-reduced-motion:reduce){
.trv__c.on{animation:none}
.trv__v img{transition:none}
.trv__v:hover img,.trv__v:focus-visible img{transform:none}
}
/* ---------- S5 . avis: deux rubans qui defilent en sens contraire ----------
Le pas de translation vaut -100% de la piste plus l ecart. Chaque ruban porte
deux pistes identiques: quand la premiere a fini sa course, la seconde occupe
exactement sa place de depart, et la boucle ne montre aucun trou. Avec une
seule piste, le vide se verrait a chaque tour.
La duree n est pas ecrite ici: le script la calcule sur la largeur mesuree,
pour que la vitesse reste la meme quel que soit le nombre d avis. */
.rubans{position:relative;display:flex;flex-direction:column;
gap:clamp(12px,1.4vw,18px);width:100%;overflow:hidden;
--pas:clamp(13px,1.3vw,18px)}
.ruban{display:flex;gap:var(--pas);width:max-content}
.ruban__piste{display:flex;gap:var(--pas);flex-shrink:0;align-items:flex-start;
animation:ruban-defile var(--duree,90s) linear infinite}
.ruban--envers .ruban__piste{animation-direction:reverse}
/* :hover seul, sur tactile, peut rester "colle" apres un tap: il n'y a pas de
souris pour le retirer, et le defilement se figerait au premier contact.
On ne pause au survol que la ou un vrai pointeur a souris existe. */
@media (hover:hover){.rubans:hover .ruban__piste{animation-play-state:paused}}
.rubans:focus-within .ruban__piste{animation-play-state:paused}
@keyframes ruban-defile{to{transform:translateX(calc(-100% - var(--pas)))}}
/* les bords se fondent dans la section, comme dans le composant d origine */
.rubans::before,.rubans::after{content:"";position:absolute;top:0;bottom:0;z-index:2;
width:clamp(60px,16%,240px);pointer-events:none}
.rubans::before{left:0;background:linear-gradient(to right,var(--canvas),var(--canvas-0))}
.rubans::after{right:0;background:linear-gradient(to left,var(--canvas),var(--canvas-0))}
@media (max-width:640px){.rubans::before,.rubans::after{display:none}}
.tmo{flex:0 0 clamp(262px,25vw,320px);display:flex;flex-direction:column;margin:0;
padding:clamp(17px,1.6vw,23px);border-radius:var(--radius);
background:linear-gradient(180deg,var(--panel),var(--panel-2));
border:1px solid var(--line);transition:border-color .3s var(--e1)}
.rubans:hover .tmo{border-color:var(--line)}
.tmo__tete{display:flex;align-items:center;gap:11px;order:-1}
.tmo__pastille{flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:grid;
place-items:center;font-family:var(--mono);font-size:13.5px;letter-spacing:.01em;
background:var(--accent-wash);color:var(--accent);border:1px solid var(--line)}
.tmo__qui{display:flex;flex-direction:column;min-width:0}
.tmo__qui b{font-size:15px;font-weight:600;letter-spacing:-.014em;color:var(--text-primary);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmo__source{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
text-transform:uppercase;color:var(--text-secondary);margin-top:3px}
.tmo__notes{color:var(--accent);letter-spacing:.16em;font-size:12px;margin:14px 0 9px}
.tmo blockquote{margin:0;font-size:14.5px;line-height:1.55;letter-spacing:-.008em;
color:var(--text-secondary);display:-webkit-box;-webkit-box-orient:vertical;
-webkit-line-clamp:7;line-clamp:7;overflow:hidden}
/* Sous mouvement reduit, plus rien ne bouge tout seul: les rubans deviennent
deux bandes que l on fait defiler soi-meme. */
@media (prefers-reduced-motion:reduce){
.rubans{overflow:visible}
.rubans::before,.rubans::after{display:none}
.ruban{width:auto;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
.ruban__piste{animation:none}
}
/* ---------- S0b · le tour, second film pilote au scroll ----------
Meme discipline que le heros: seek gate, ecriture conditionnelle, et rien du
tout sous les cinq portes. Le film n'est demande qu'a l'approche. */
.tour{position:relative;height:200vh;background:var(--media-bg)}
@media (max-width:900px){.tour{height:130vh}}
.tour__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--media-bg)}
/* contain, pas cover: le film remplit la largeur et ne depasse jamais l'echelle
1:1. En cover, un ecran plus haut que 1080 px agrandissait la source, et
rognait les cotes au passage. Les bandes haut et bas prennent le fond du
studio, qui est deja noir. */
.tour__pin video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
background:var(--media-bg);opacity:0;transition:opacity .7s var(--e1)}
.tour.film-pret .tour__pin video{opacity:1}
.tour__affiche{position:absolute;inset:0;background-size:contain;background-position:50% 50%;
background-repeat:no-repeat;background-color:var(--media-bg);
transition:opacity .7s var(--e1)}
.tour.film-pret .tour__affiche{opacity:0}
/* Le voile assombrit le centre haut, la ou le titre se pose, sans toucher les
bords ou la lumiere du studio fait le travail. */
/* Le film s'eteint dans le noir a ses deux bords: en haut il prend le relais du
heros, en bas il passe la main a la section suivante. Sous le titre, jamais
dessus, d'ou le z-index. */
.tour__pin::before,.tour__pin::after{content:"";position:absolute;left:0;right:0;
z-index:1;pointer-events:none}
.tour__pin::before{top:0;height:24%;background:linear-gradient(to bottom,#000 12%,rgba(0,0,0,0))}
.tour__pin::after{bottom:0;height:28%;background:linear-gradient(to top,#000 14%,rgba(0,0,0,0))}
.tour__voile{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 78% at 50% 26%,rgba(4,4,6,.82),rgba(4,4,6,.36) 50%,rgba(4,4,6,0) 74%)}
.tour__mot{position:absolute;left:0;right:0;top:clamp(88px,15vh,190px);z-index:2;
padding:0 var(--gut);text-align:center;
/* Sur telephone le titre partait chercher le quinzieme de la hauteur, ce qui
ouvrait un grand vide noir au-dessus de lui : on le remonte. */
opacity:var(--tm,0);transform:translateY(calc((1 - var(--tm,0)) * 18px));
transition:opacity .12s linear,transform .12s linear;pointer-events:none}
.tour__marque{display:inline-block;padding:6px 17px;border-radius:999px;
border:1px solid var(--accent);color:var(--accent);background:var(--accent-wash);
font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.15em}
.tour__mot h2{margin:20px 0 0;font-size:clamp(36px,5.8vw,86px);font-weight:600;
letter-spacing:-.042em;line-height:1.02;color:var(--on-media);max-width:none}
.tour__mot h2 i{font-style:normal;color:var(--on-media-2);opacity:.58}
.tour__mot p{margin:18px 0 0;font-size:clamp(15px,1.35vw,19px);line-height:1.5;
color:var(--on-media-2)}
/* Apres la regle de base, sinon elle l'emporterait a specificite egale. */
@media (max-width:640px){.tour__mot{top:clamp(28px,5vh,64px)}}
@media (prefers-reduced-motion:reduce){
.tour{height:auto}
.tour__pin{position:relative;height:auto;aspect-ratio:16/10}
.tour__mot{opacity:1;transform:none;top:clamp(40px,9vh,84px)}
}
/* ---------- S3c · la montee: le texte passe derriere la voiture ----------
Le pin est en position sticky, la voiture ne bouge pas, seul le texte monte.
Il passe SOUS la voiture parce qu'elle est sur un calque au-dessus: c'est ce
croisement qui donne la profondeur. */
.montee{position:relative;height:180vh;background:var(--canvas)}
@media (max-width:900px){.montee{height:120vh}}
.montee__scene{position:sticky;top:0;height:100svh;overflow:hidden;
display:flex;align-items:flex-end;justify-content:center;background:var(--canvas)}
/* une nappe de lumiere au sol: sans elle, une voiture noire sur fond noir
se confond avec le fond en theme sombre */
.montee__scene::before{content:"";position:absolute;left:50%;bottom:4%;
width:min(1180px,104vw);height:56vh;transform:translateX(-50%);pointer-events:none;
background:radial-gradient(ellipse at 50% 60%,var(--accent-wash),transparent 68%);
opacity:.9}
.montee__texte{position:absolute;left:50%;top:50%;z-index:1;
width:min(940px,88vw);margin:0;text-align:center;
transform:translate(-50%,-50%) translateY(var(--ty,26vh));
opacity:var(--mo,0);filter:blur(var(--mb,16px));
will-change:opacity,filter,transform;
font-size:clamp(27px,4.3vw,58px);font-weight:600;letter-spacing:-.036em;line-height:1.16;
color:var(--text-primary);text-wrap:balance}
/* La voiture tient entiere dans le cadre, et sa largeur est bornee par la
hauteur de la fenetre (rapport 1,964) pour qu'un ecran haut ne laisse pas un
grand vide au-dessus. */
/* Le bas de la voiture se dissout dans le fond, comme au pied du heros. Pose
au-dessus de la carrosserie pour manger les roues et leur ombre. */
.montee__scene::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:3;
height:32%;pointer-events:none;opacity:.88;
background:linear-gradient(to bottom,var(--canvas-0),var(--canvas))}
.montee__auto{position:relative;z-index:2;height:auto;
width:min(96vw,calc(66.5vh * 1.964),1460px);
margin-bottom:clamp(22px,3.6vh,62px);pointer-events:none;
filter:drop-shadow(0 30px 42px rgba(0,0,0,.5))}
/* Memes cinq portes que le heros: sur telephone et en mouvement reduit, plus
d'epinglage ni de longue descente, le texte se pose simplement au-dessus. */
@media (prefers-reduced-motion:reduce){
.montee{height:auto;padding:clamp(48px,9vh,96px) 0 0}
.montee__scene{position:static;height:auto;flex-direction:column;gap:clamp(24px,5vh,44px)}
.montee__scene::before{bottom:0;height:38vh}
.montee__texte{position:static;transform:none;width:min(560px,88vw);
opacity:1;filter:none;font-size:clamp(25px,6.2vw,38px)}
.montee__auto{width:min(560px,96vw);margin-bottom:0}
}
/* ---------- S6b · le seuil, portail au contour du logo ----------
Le contour vient du logo lui-meme: alpha seuille, marching squares, Chaikin,
puis Douglas-Peucker a 1,2 px. 178 points, 1,7 Ko, net a n'importe quelle
taille, la ou un masque raster serait flou une fois agrandi. */
:root{
--masque-logo:url('data:image/svg+xml;utf8,');
--logo-rapport:2.2587;
}
/* La tete de section flottait trop haut au-dessus du portail: on resserre. */
/* La tete ne prend plus de hauteur: elle se pose par-dessus le cadre epingle
et defile normalement. Empilee dans le flux, elle laissait un vide de la
moitie d'un ecran avant que le logo n'apparaisse. */
.portail__tete{position:absolute;left:0;right:0;top:0;z-index:5;pointer-events:none;
padding:clamp(54px,8.5vh,104px) var(--gut) 0}
.portail__tete .head{margin-bottom:0}
/* Le logo se revele depuis le centre de l'ecran (50/50), pas depuis le bas:
sur un telephone, un titre pousse par le meme padding que sur grand ecran
arrive trop pres de ce centre. On remonte la tete pour lui redonner de
l'air avant que le cadre n'apparaisse. */
@media (max-width:900px){.portail__tete{padding-top:clamp(20px,3vh,40px)}}
.portail.in .rev{opacity:1;transform:none}
.portail{position:relative;height:280vh;background:var(--canvas)}
@media (max-width:900px){.portail{height:170vh}}
.portail__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--canvas)}
.portail__cadre{position:absolute;inset:0}
.portail__vue{position:absolute;inset:0;z-index:1;
-webkit-mask-image:var(--masque-logo);mask-image:var(--masque-logo);
-webkit-mask-position:50% 50%;mask-position:50% 50%;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:var(--mw,420px) auto;mask-size:var(--mw,420px) auto}
/* La photo tient entiere dans le cadre: en fin de descente rien n'est rogne.
Le fond du coin de la photo est noir pur, on le prolonge sur les bandes
laterales pour qu'elles ne se voient pas. Le zoom prend appui sur la vitre,
qui ne bouge donc pas: on plonge dedans plutot que de la chasser. */
.portail__vue img{position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;object-position:50% 50%;background:#000;
transform:scale(var(--vz,1));transform-origin:var(--vox,50%) var(--voy,50%);
will-change:transform}
.portail__pin{background:#000}
/* Le contour seul ne se lit pas comme le logo: on repasse le meme trace en
neon, dans le degrade iris de la marque, et on l'efface quand la forme devient
trop grande pour vouloir dire quelque chose. */
.portail__trait{position:absolute;z-index:2;left:50%;top:50%;
width:var(--mw,420px);height:auto;transform:translate(-50%,-50%);
opacity:var(--to,1);pointer-events:none}
.portail__trait path{fill:none;stroke:url(#iris);stroke-width:3;
vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* La phrase se pose sur la vitre. Sa position n'est pas un pourcentage fige:
l'image est en object-fit cover puis agrandie, donc le JS refait le calcul du
cadrage a chaque image et donne le centre exact de la vitre. */
.portail__mot{position:absolute;z-index:4;left:var(--wx,50%);top:var(--wy,50%);
width:var(--mot-w,420px);max-width:calc(100% - 2*var(--gut));
margin:0;padding:0;text-align:center;
font-size:var(--mot-s,40px);font-weight:600;letter-spacing:-.028em;line-height:1.14;
color:var(--on-media);text-shadow:0 2px 16px rgba(0,0,0,.75);
opacity:var(--mo,0);
transform:translate(-50%,-50%) translateY(calc((1 - var(--mo,0)) * 18px));
transition:opacity .1s linear,transform .1s linear;pointer-events:none}
/* La largeur de la phrase suit celle de la vitre (--mot-s), correcte sur
grand ecran; sur un telephone la vitre occupe une part bien plus grande du
cadrage et le texte deborde. On le reduit de 40% sous 900px. */
@media (max-width:900px){.portail__mot{font-size:calc(var(--mot-s,40px) * .6)}}
/* Sous les memes cinq portes que le heros: pas de video, pas d'epinglage, pas de
scroll interminable. On garde l'image, posee dans le contour du logo. */
@media (prefers-reduced-motion:reduce){
.portail{height:auto;padding-top:clamp(48px,8vh,88px)}
.portail__tete{position:static;padding:0 var(--gut) clamp(22px,4vh,38px)}
.portail__pin{position:relative;height:auto;overflow:visible;padding-bottom:8px}
.portail__cadre{position:relative;inset:auto;width:100%;aspect-ratio:3/2;overflow:hidden}
.portail__vue{-webkit-mask-size:88% auto;mask-size:88% auto}
.portail__vue video,.portail__vue img{transform:none}
.portail__trait{width:88%;opacity:1}
.portail__mot{position:static;opacity:1;transform:none;padding:26px var(--gut) 0;
width:auto;max-width:none;text-align:center;
color:var(--text-primary);text-shadow:none;font-size:clamp(22px,5.4vw,34px)}
}
/* ---------- S6 · questions ---------- */
.faq{max-width:900px;margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 48px 26px 0;position:relative;
font-weight:500;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.024em;
transition:color .3s var(--e1)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
margin-top:-8px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
transform:rotate(45deg);transition:transform .42s var(--e2)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq .ans{padding:0 8ch 28px 0;color:var(--text-secondary);font-size:17px;max-width:68ch;line-height:1.5}
@media (pointer:coarse){.faq summary{padding-block:28px}}
@media (max-width:700px){.faq .ans{padding-right:0}}
/* ---------- S7 · devis ---------- */
.quote-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
gap:clamp(30px,4vw,68px);align-items:start}
form{display:grid;gap:18px}
.field{display:grid;gap:9px}
.field label{font-size:14px;font-weight:450;color:var(--text-secondary);letter-spacing:-.008em}
.field input,.field select,.field textarea{
font-family:var(--sans);font-size:16.5px;color:var(--text-primary);background:var(--canvas);
border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;width:100%;
letter-spacing:-.01em;
transition:border-color .3s var(--e1),box-shadow .3s var(--e1)}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea{background:var(--panel-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .field input,
:root:not([data-theme="light"]) .field select,
:root:not([data-theme="light"]) .field textarea{background:var(--panel-2)}}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-secondary);opacity:.72}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--text-secondary)}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.err{color:var(--danger);font-size:14px;min-height:1.2em}
form .grad-btn{justify-self:start}
.sent{display:none;border:1px solid var(--accent);background:var(--accent-wash);
border-radius:var(--radius);padding:28px 30px}
.sent.on{display:block}
.sent b{font-size:25px;font-weight:600;display:block;margin-bottom:8px;letter-spacing:-.028em}
.sent p{color:var(--text-secondary);line-height:1.45}
.callbox{border:1px solid var(--line);border-radius:var(--radius-lg);
padding:clamp(26px,3vw,40px);background:var(--panel);box-shadow:var(--shadow-card)}
.callbox .big{display:block;margin-top:14px;font-weight:600;
font-size:clamp(28px,3vw,40px);letter-spacing:-.036em;text-decoration:none;color:var(--text-primary);
transition:color .3s var(--e1)}
.callbox .big:hover{color:var(--accent)}
.callbox .sm{margin-top:16px;color:var(--text-secondary);font-size:16px;line-height:1.45}
.callbox .addr{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
font-family:var(--mono);font-size:13.5px;color:var(--text-secondary);line-height:2;
overflow-wrap:anywhere}
.callbox .addr a{text-decoration:none;color:var(--accent);transition:opacity .3s var(--e1)}
.callbox .addr a:hover{opacity:.72}
.pulse{position:relative;display:inline-block;padding-left:16px}
.sec.live .pulse::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;
border-radius:50%;background:var(--accent);animation:ping 4.5s var(--e1) -1.4s infinite}
@keyframes ping{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.95;transform:scale(1.3)}}
@media (max-width:960px){.quote-grid{grid-template-columns:1fr}.duo{grid-template-columns:1fr}}
/* ---------- pied de page ---------- */
footer{position:relative;z-index:2;background:var(--band);border-top:1px solid var(--line);
padding:clamp(58px,7vh,96px) var(--gut) 44px}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(28px,4vw,60px)}
.foot .flogo{height:72px;width:auto;margin-bottom:18px}
footer h4{font-size:15px;font-weight:500;color:var(--text-primary);margin:0 0 18px;letter-spacing:-.01em}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
footer a{color:var(--text-secondary);text-decoration:none;font-size:15.5px;
transition:color .3s var(--e1);letter-spacing:-.01em}
footer a:hover{color:var(--accent)}
footer li{color:var(--text-secondary);font-size:15.5px}
.foot .about p{color:var(--text-secondary);font-size:15.5px;max-width:38ch;line-height:1.5}
footer a[href^="mailto:"]{overflow-wrap:anywhere}
.legal{margin-top:clamp(42px,5vh,68px);padding-top:24px;border-top:1px solid var(--line);
display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
font-size:13.5px;color:var(--text-secondary)}
@media (max-width:820px){.foot{grid-template-columns:1fr 1fr}.foot .about{grid-column:1/-1}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}
/* ---------- cibles tactiles: tout ce qui se tape fait au moins 44px ---------- */
@media (pointer:coarse){
/* le numéro de la barre est exclu: il est masqué sous 640px, et un sélecteur
d'attribut battrait sa classe en spécificité, ce qui le rallumerait */
a[href^="tel:"]:not(.nav-tel){min-height:44px;display:inline-flex;align-items:center}
.callbox .big{min-height:48px;display:flex;align-items:center}
.theme-toggle{width:62px;height:44px}
.theme-toggle .knob{width:34px;height:34px;top:4px;left:4px}
.theme-toggle .knob svg{width:16px;height:16px}
.theme-toggle[aria-checked="true"] .knob{transform:translateX(18px)}
}
/* ---------- la porte du héro statique ----------
Le héro défile désormais aussi sur téléphone : le film y est servi en
version allégée, et chacune de ses images est une image-clé, ce qui rend
le déplacement dans la vidéo immédiat au lieu de le faire décoder par
paquets. Seul le mouvement réduit demandé par le visiteur ramène encore
le héros fixe, et c'est un choix qu'on respecte. */
@media (prefers-reduced-motion:reduce){
.hero{display:none}
.hero-static{display:flex}
}
/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
body{opacity:1}
.rev{opacity:1;transform:none}
.rail{display:none}
}
body.pinned .rev{opacity:1;transform:none}
body.pinned *,body.pinned *::before,body.pinned *::after{animation-play-state:paused!important}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
/* =======================================================================
Pages interieures, contenus WordPress et habillage des extensions.
Ce bloc n'existe pas dans la version statique: il sert au theme.
==================================================================== */
.kbr-page{padding-top:80px}
.kbr-page .head h1{font-size:clamp(34px,4.6vw,62px);max-width:17ch;letter-spacing:-.036em}
.kbr-content{max-width:68ch;color:var(--text-secondary);font-size:clamp(17px,1.2vw,19px);line-height:1.55}
.kbr-content > * + *{margin-top:1.1em}
.kbr-content h2,.kbr-content h3{color:var(--text-primary);margin-top:1.8em}
.kbr-content h2{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.03em}
.kbr-content h3{font-size:clamp(20px,2.1vw,26px);letter-spacing:-.026em}
.kbr-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.kbr-content a:hover{color:var(--accent-hover)}
.kbr-content ul,.kbr-content ol{padding-left:1.3em}
.kbr-content li + li{margin-top:.5em}
.kbr-content img{border-radius:var(--radius)}
.kbr-content blockquote{border-left:2px solid var(--accent);padding-left:22px;color:var(--text-primary)}
.kbr-content code{font-family:var(--mono);font-size:.92em;background:var(--canvas-2);padding:2px 7px;border-radius:6px}
.kbr-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-width:860px}
.kbr-list li{padding:24px 0;border-top:1px solid var(--line)}
.kbr-list li:last-child{border-bottom:1px solid var(--line)}
.kbr-list a{font-weight:500;font-size:clamp(19px,1.9vw,24px);
letter-spacing:-.026em;text-decoration:none;transition:color .3s var(--e1)}
.kbr-list a:hover{color:var(--accent)}
.kbr-list p{margin-top:8px;color:var(--text-secondary);font-size:16px;max-width:62ch}
/* ---- WPForms : le formulaire du plugin prend l'habit du site ---- */
.kbr-wpforms .wpforms-container{max-width:none;margin:0}
.kbr-wpforms .wpforms-form .wpforms-field{padding:0 0 18px}
.kbr-wpforms .wpforms-form .wpforms-field-label{
font-family:var(--sans);font-size:14px;font-weight:450;letter-spacing:-.008em;
color:var(--text-secondary);margin-bottom:9px}
.kbr-wpforms .wpforms-form .wpforms-field-sublabel{
font-family:var(--sans);font-size:13px;color:var(--text-secondary)}
.kbr-wpforms .wpforms-form input[type=text],
.kbr-wpforms .wpforms-form input[type=email],
.kbr-wpforms .wpforms-form input[type=tel],
.kbr-wpforms .wpforms-form input[type=url],
.kbr-wpforms .wpforms-form input[type=number],
.kbr-wpforms .wpforms-form select,
.kbr-wpforms .wpforms-form textarea{
font-family:var(--sans);font-size:16.5px;color:var(--text-primary);background:var(--canvas);
border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;width:100%;
letter-spacing:-.01em;box-shadow:none;
transition:border-color .3s var(--e1),box-shadow .3s var(--e1)}
:root[data-theme="dark"] .kbr-wpforms .wpforms-form input,
:root[data-theme="dark"] .kbr-wpforms .wpforms-form select,
:root[data-theme="dark"] .kbr-wpforms .wpforms-form textarea{background:var(--panel-2)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .kbr-wpforms .wpforms-form input,
:root:not([data-theme="light"]) .kbr-wpforms .wpforms-form select,
:root:not([data-theme="light"]) .kbr-wpforms .wpforms-form textarea{background:var(--panel-2)}
}
.kbr-wpforms .wpforms-form textarea{min-height:104px}
.kbr-wpforms .wpforms-form input:hover,
.kbr-wpforms .wpforms-form select:hover,
.kbr-wpforms .wpforms-form textarea:hover{border-color:var(--text-secondary)}
.kbr-wpforms .wpforms-form input:focus,
.kbr-wpforms .wpforms-form select:focus,
.kbr-wpforms .wpforms-form textarea:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.kbr-wpforms .wpforms-form ::placeholder{color:var(--text-secondary);opacity:.72}
.kbr-wpforms .wpforms-form button[type=submit]{
font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:-.01em;
background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink);
padding:14px 28px;border-radius:999px;cursor:pointer;
transition:background .3s var(--e1),transform .3s var(--e2)}
.kbr-wpforms .wpforms-form button[type=submit]:hover{
background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.kbr-wpforms .wpforms-form button[type=submit]:active{transform:scale(.97)}
.kbr-wpforms .wpforms-form .wpforms-error{color:var(--danger);font-size:14px}
.kbr-wpforms .wpforms-form input.wpforms-error,
.kbr-wpforms .wpforms-form textarea.wpforms-error,
.kbr-wpforms .wpforms-form select.wpforms-error{border-color:var(--danger)}
.kbr-wpforms .wpforms-confirmation-container-full,
.kbr-wpforms div.wpforms-confirmation-container-full{
background:var(--accent-wash);border:1px solid var(--accent);
border-radius:var(--radius);padding:28px 30px;color:var(--text-secondary)}
@media (pointer:coarse){
.kbr-wpforms .wpforms-form input,
.kbr-wpforms .wpforms-form select,
.kbr-wpforms .wpforms-form button[type=submit]{min-height:46px}
}
/* ---- Amelia : cadre et fond. Les couleurs du module se reglent dans
ses propres options, c'est la ou elles resteront apres ses mises a jour. ---- */
.kbr-booking{margin-top:clamp(28px,4vh,52px);background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius-lg);padding:clamp(16px,2.2vw,30px);box-shadow:var(--shadow-card)}
.kbr-booking .amelia-app-booking,
.kbr-booking .amelia-v2-booking{background:transparent}
/* Dans le cadre isolé, l'application garde sa largeur pleine et ne pose pas
de marge en bas: la boîte se règle sur sa hauteur réelle. */
/* =========================================================================
La fenêtre de rendez-vous et de devis
-------------------------------------------------------------------------
Une seule boîte pour trois contenus. Elle reprend le vocabulaire de
.law-modal — même rayon, même bordure, même ombre — mais sur un élément
ordinaire plutôt qu'un