/* ============================================================================
Batiproconnect — page d'atterrissage /formulaire-maquette/
Tout le CSS de la page. Aucun style en ligne dispersé dans le HTML.
Jetons repris de la nouvelle home (retouche-home/nouvelle-home) pour que
l'artisan qui vient de la home ne change pas de registre en un clic.
Corrigés ici : les jetons de texte orange, qui plafonnaient à 2,92:1 sur
fond clair dans la page actuelle. Le jeton est corrigé, jamais contourné.
========================================================================== */
:root{
--ink:#12234a; --blue:#1f3d80; --blue-2:#24438a; --deep:#122650; --deep-2:#0d1c3e;
/* ORANGE — trois rôles, trois valeurs, chacune mesurée.
--ocre : APLAT seulement (fond de bouton, pastille). Jamais du texte.
--ocre-txt : texte orange sur fond CLAIR (papier, crème, blanc) — 5,3:1.
--ocre-soft : texte orange sur fond SOMBRE (--deep, --deep-2) — 7,4:1.
La page actuelle posait --ocre en texte sur crème : 2,92:1. */
--ocre:#e87830; --ocre-2:#d76b26; --ocre-soft:#f2a577; --ocre-txt:#9e4708;
--cream:#eef2f8; --cream-2:#e2e9f3; --paper:#f7f9fc; --white:#fff;
--line:rgba(18,35,74,.10);
--hairw:rgba(255,255,255,.10);
--linew:rgba(255,255,255,.14);
--text:#1c2a44;
--soft:#4e576c; /* 7,6:1 sur --paper — l'ancien #5b6478 tenait, celui-ci tient partout */
--on-deep:#dbe3f0; /* 11,4:1 sur --deep */
--ok:#0f6b3f; /* vert de validation, 5,3:1 sur blanc */
--err:#c02020; /* rouge d'erreur, 6,2:1 sur blanc, 5,5:1 sur #fff5f5 */
--err-bg:#fdf2f2;
--ff:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--wrap:1120px;
--r-sm:10px; --r-lg:20px; --r-pill:999px;
--pad-card:26px;
--sh-ink:18,35,74;
--sh:0 0 0 1px rgba(var(--sh-ink),.07),0 1px 2px rgba(var(--sh-ink),.05),
0 4px 10px -2px rgba(var(--sh-ink),.07),0 14px 28px -10px rgba(var(--sh-ink),.10);
--sh-lg:0 0 0 1px rgba(var(--sh-ink),.07),0 1px 3px rgba(var(--sh-ink),.06),
0 10px 24px -6px rgba(var(--sh-ink),.11),0 32px 64px -20px rgba(var(--sh-ink),.22);
--sh-xl:0 2px 4px rgba(var(--sh-ink),.06),0 16px 34px -8px rgba(var(--sh-ink),.14),
0 48px 88px -28px rgba(var(--sh-ink),.30);
--sh-hd:0 1px 0 rgba(var(--sh-ink),.05),0 8px 24px -14px rgba(var(--sh-ink),.26);
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
--wa:url("data:image/svg+xml;utf8,");
--ease:cubic-bezier(.23,1,.32,1);
--barh:0px; /* hauteur réelle de la barre collante, posée par le JS */
}
/* ── SOCLE ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--ff);font-size:17px;line-height:1.58;color:var(--text);
background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;padding-bottom:var(--barh)}
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
a{color:var(--blue-2);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1em;text-wrap:pretty}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);letter-spacing:-.028em;line-height:1.14;font-weight:800;text-wrap:balance}
h2{font-size:clamp(25px,3.2vw,38px)}
h3{font-size:clamp(18px,1.7vw,21px);line-height:1.25}
h4{font-size:17px}
strong,b{font-weight:700}
em{font-style:normal;font-weight:700;color:var(--ocre-txt)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sec{padding:clamp(48px,6.4vw,84px) 0}
.lead{font-size:clamp(16.5px,1.3vw,19px);color:var(--soft);max-width:62ch;margin:0 0 1.4em}
.deep{background:var(--deep);color:var(--on-deep)}
.deep h2,.deep h3,.deep h4{color:var(--white)}
.deep .lead{color:var(--on-deep)}
.cream{background:var(--cream)}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;left:12px;top:12px;z-index:99;position:fixed;
background:var(--white);color:var(--ink);padding:10px 14px;border-radius:var(--r-sm);box-shadow:var(--sh)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vh input{width:1px;min-height:0;padding:0}
:where(a,button,summary,input,select):focus-visible{outline:3px solid var(--blue-2);outline-offset:2px;border-radius:4px}
.deep :where(a,button,summary,input,select):focus-visible,
.hero :where(a,button,summary,input,select):focus-visible{outline-color:var(--ocre-soft)}
/* eyebrow : le SEUL filet décoratif de la page — la barre ocre de 3 px,
tirée du point ocre du logo. Un dispositif, un seul, répété. */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--ocre-txt);margin:0 0 14px}
.eyebrow::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--ocre-2);flex:0 0 auto}
.deep .eyebrow,.hero .eyebrow{color:var(--ocre-soft)}
.deep .eyebrow::before,.hero .eyebrow::before{background:var(--ocre-soft)}
/* ── BOUTONS ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:52px;padding:13px 22px;border:0;border-radius:var(--r-pill);
font:800 16px/1.2 var(--ff);letter-spacing:-.01em;cursor:pointer;text-align:center;
transition:background .2s var(--ease),transform .12s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn-1{background:var(--ocre);color:var(--ink); /* #12234a sur #e87830 = 5,2:1 */
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(var(--sh-ink),.14),0 8px 18px -6px rgba(200,90,20,.42)}
.btn-1:hover{background:#f18a45}
.btn-2{background:transparent;color:var(--ocre-txt);box-shadow:inset 0 0 0 1.5px var(--ocre-2)}
.btn-2:hover{background:rgba(232,120,48,.10)}
.deep .btn-2,.hero .btn-2{color:var(--white);box-shadow:inset 0 0 0 1.5px var(--ocre-soft)}
.deep .btn-2:hover,.hero .btn-2:hover{background:rgba(242,165,119,.16)}
.btn-3{background:var(--white);color:var(--ink);box-shadow:var(--sh)}
.btn-block{display:flex;width:100%}
.wa-ico{width:19px;height:19px;flex:0 0 auto;background:currentColor;
-webkit-mask:var(--wa) center/contain no-repeat;mask:var(--wa) center/contain no-repeat}
/* ── S0 · EN-TÊTE ─────────────────────────────────────────────────────
Aucune navigation : une page payée au clic n'offre pas cinq sorties.
Le logo n'est pas un lien vers ailleurs, c'est une signature.
À droite, le seul lien sortant de la page : le numéro qui décroche —
sur trafic froid, c'est une preuve d'existence, pas un raccourci. */
.hd{position:sticky;top:0;z-index:40;background:var(--deep);box-shadow:var(--sh-hd)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding-block:8px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;color:var(--white);letter-spacing:-.02em}
.brand img{height:42px;width:auto;flex:0 0 auto}
.brand span{white-space:nowrap}
.hd-tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;
border-radius:var(--r-pill);font-size:15px;font-weight:800;color:var(--white);
box-shadow:inset 0 0 0 1.5px var(--linew);white-space:nowrap}
.hd-tel:hover{background:rgba(255,255,255,.08);text-decoration:none}
.hd-tel svg{width:17px;height:17px;flex:0 0 auto;color:var(--ocre-soft)}
.hd-tel .tel-lg{display:none}
/* La navigation du site (demande Mourad 02/09 : « la page doit quand même
avoir les autres menus »). Desktop : liens en ligne entre la marque et le
téléphone. En dessous de 1000 px : un burger, panneau .mnav qui POUSSE le
contenu (position statique) — pas d'overlay, le header est sticky et le
panneau reste solidaire. */
.brand{text-decoration:none}
.brand:hover{text-decoration:none}
.hd-nav{display:none;gap:4px;margin-inline:auto}
.hd-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;
font-size:14.5px;font-weight:600;color:var(--on-deep);text-decoration:none;
border-radius:8px;white-space:nowrap}
.hd-nav a:hover{color:var(--white);background:rgba(255,255,255,.07);text-decoration:none}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4.5px;
width:44px;height:44px;padding:0 10px;margin-right:-6px;border:0;border-radius:8px;
background:transparent;cursor:pointer}
.burger span{display:block;height:2px;border-radius:2px;background:var(--white);
transition:transform .18s ease,opacity .18s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mnav{display:none;flex-direction:column;padding:4px 0 10px;border-top:1px solid var(--hairw)}
.mnav.open{display:flex}
.mnav a{display:block;padding:12px 22px;font-size:15.5px;font-weight:700;
color:var(--on-deep);text-decoration:none}
.mnav a:hover{color:var(--white);background:rgba(255,255,255,.06);text-decoration:none}
@media (min-width:1000px){
.hd-nav{display:flex}
.burger{display:none}
.mnav{display:none !important}
}
/* la ligne S0 : le produit et le prix, une fois, sans animation */
.band{background:var(--deep-2);color:var(--on-deep);border-top:1px solid var(--hairw)}
.band p{margin:0;padding:9px 0;font-size:13.4px;line-height:1.4;font-weight:600;text-align:center}
.band b{color:var(--white);font-weight:800}
.band .band-n{color:var(--ocre-soft)}
/* ── S1 · HERO ────────────────────────────────────────────────────────────
Variante 2, retenue par le client le 01/09 : photo de chantier en bandeau
derrière, texte par-dessus. Ordre imposé sur mobile : le titre et le prix
AVANT tout le reste — la page actuelle faisait l'inverse et le H1 tombait
à 653 px.
Purgés ici avec l'ancien visuel, par SÉLECTEUR et non par règle :
.scene .lapwrap .lap .lap-bar .lap-dot .mobwrap .mob .scene-cap .gsh-lap
et le grain de .hero::before, devenu invisible sous une photo. Le grain
n'a pas disparu : il a déménagé sur le socle, où il porte encore.
Les ombres au sol ont suivi le 02/09 avec la refonte de S4 : il n’en reste
aucune sur la page, et le jeton de dégradé qui les servait est parti avec. */
.hero{position:relative;overflow:hidden;color:var(--on-deep);background:var(--deep-2)}
.hero-band{position:relative;isolation:isolate;
padding:clamp(28px,4vw,48px) 0 clamp(30px,4vw,46px)}
/* la photo : un vrai et pas un background, pour que le srcset serve la
version 900 px aux téléphones et que le hero passe en chargement prioritaire.
Cadrage imposé par le tri : ancrage à GAUCHE, jamais centré. Fond d'attente
ENCRE : tant que la photo n'est pas décodée, un aplat gris se lirait comme
un trou dans un hero sombre. */
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:28% center;background:#16264d}
/* LE VOILE, EN DEUX COUCHES — ne pas simplifier en une seule.
Couche 1 : voile plein sur toute la bande, il tient la photo entière.
Couche 2 : renfort sous la colonne de texte. Cumulées, elles ne descendent
jamais sous .84 là où il y a du texte. Mesure faite sur la page rendue,
texte masqué, pire pixel de chaque boîte — jamais une moyenne d'image. */
.hero-voile{position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(9,19,42,.66) 0%,rgba(9,19,42,.62) 42%,rgba(9,19,42,.74) 100%)}
.hero-voile::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(9,19,42,.60) 0%,rgba(9,19,42,.56) 58%,rgba(9,19,42,.30) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;gap:26px}
.hero h1{color:var(--white);font-size:clamp(29px,4.4vw,50px);margin:0 0 .4em}
.hero h1 .hl{color:var(--ocre-soft)}
.hero-lead{font-size:clamp(16.5px,1.25vw,18.5px);color:var(--on-deep);max-width:50ch;margin:0 0 20px}
/* l'ombre portée ne REMPLACE pas le voile : elle rattrape les micro-contrastes
sur les tuiles claires, là où une lettre fine passe sur un bord d'arête */
.hero h1,.hero-lead,.hero-note,.hero .eyebrow{text-shadow:0 1px 14px rgba(4,10,24,.55)}
/* le verrou de Yanis : encadré, jamais fondu dans un paragraphe.
Un aplat, pas un filet de plus (règle « corriger, c'est remplacer »). */
.verrou{position:relative;margin:0 0 22px;padding:15px 18px 15px 20px;max-width:52ch;
background:rgba(242,165,119,.10);border-radius:var(--r-sm);
box-shadow:inset 3px 0 0 var(--ocre)}
.verrou p{margin:0;font-size:15.5px;line-height:1.5;color:var(--white);font-weight:600}
.verrou p+p{margin-top:8px;color:var(--on-deep);font-weight:500;font-size:14.5px}
/* sur la photo, l'aplat ocre translucide ne tient plus : il faut du plein
sombre. Le verrou de S10, sur son fond --deep, ne bouge pas. */
.hero .verrou{background:rgba(6,14,32,.52);
box-shadow:inset 3px 0 0 var(--ocre),0 8px 26px -14px rgba(0,0,0,.8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px}
.hero-cta .btn{flex:0 1 300px}
.hero-note{font-size:14px;line-height:1.45;color:var(--on-deep);opacity:.9;margin:0;max-width:46ch}
/* ── LE SOCLE DU HERO ─────────────────────────────────────────────
Les trois appuis quittent la photo pour un aplat plein. Ce n'est pas une
préférence : sur la photo leur pire pixel passait sous 4,5:1, sur l'aplat
il est à 16,8:1. Le passage photo → aplat EST la frontière, donc aucun
filet ne vient la doubler — un seul dispositif par frontière. */
.hero-socle{position:relative;background:var(--deep-2)}
.hero-socle::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.03;
background-image:var(--grain);background-size:180px 180px}
.hero-socle .wrap{position:relative;z-index:1}
/* appuis : trois arguments DIFFÉRENTS (prix, risque, spécialisation) */
.appuis{display:grid;gap:12px;margin:0;
padding:clamp(18px,2.6vw,26px) 0 clamp(20px,2.8vw,28px)}
.appui{display:flex;align-items:flex-start;gap:13px}
.appui svg{width:25px;height:25px;flex:0 0 auto;color:var(--ocre-soft);margin-top:2px}
.appui b{display:block;font-size:15.5px;font-weight:700;color:var(--white);letter-spacing:-.012em}
.appui span span{display:block;font-size:13px;line-height:1.4;color:var(--on-deep);opacity:.9;margin-top:2px}
.appui--prix b{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.appui--prix .n{font-size:clamp(36px,4.4vw,52px);font-weight:800;line-height:1;color:var(--ocre-soft);
letter-spacing:-.04em;font-feature-settings:'tnum'}
/* ── S2 · LE FORMULAIRE, À L'ÉCRAN 2 ──────────────────────────────────
Quatre champs, et l'envoi. Le reste du brief se pose après. */
/* la marge de défilement doit couvrir l'en-tête collant RÉEL (116 px avec sa
ligne de prix), sinon le haut de la section passe dessous après un clic */
.formsec{background:var(--cream);scroll-margin-top:124px}
.form-grid{display:grid;gap:26px}
.form-card{background:var(--white);border-radius:var(--r-lg);padding:clamp(20px,3vw,30px);box-shadow:var(--sh-lg)}
.form-card h2{font-size:clamp(23px,2.6vw,30px);margin:0 0 .45em}
.form-intro{font-size:16px;color:var(--soft);margin:0 0 22px;max-width:52ch}
.fields{display:grid;gap:16px;margin:0 0 6px}
.f{display:block}
.f>.f-l{display:block;font-size:14px;font-weight:700;color:var(--ink);margin:0 0 6px}
.f input,.f select{width:100%;font:500 16.5px/1.35 var(--ff);color:var(--ink);
background:var(--white);border:1.5px solid #b9c3d4;border-radius:12px;
padding:14px 15px;min-height:52px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.f input::placeholder{color:#6b748a}
.f input:hover,.f select:hover{border-color:#8c99b1}
.f select{appearance:none;-webkit-appearance:none;padding-right:42px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;background-size:19px}
.f select:has(option[value=""]:checked){color:#6b748a}
.f-hint{display:block;font-size:13px;color:var(--soft);margin:6px 0 0}
/* l'erreur : elle se VOIT. Même rouge sur le message, sur la bordure et sur
le résumé — la page actuelle mettait le message en rouge et la bordure en
orange. Un défaut, une couleur. */
.f-err{display:none;align-items:flex-start;gap:7px;margin:7px 0 0;font-size:14px;
font-weight:600;line-height:1.4;color:var(--err)}
.f-err svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px}
.f.is-bad .f-err{display:flex}
.f.is-bad input,.f.is-bad select{border-color:var(--err);border-width:2px;background:var(--err-bg)}
.f.is-bad .f-l{color:var(--err)}
/* le résumé d'erreurs, JUSTE au-dessus du bouton : sur iOS Safari, un focus
programmatique ne fait pas toujours défiler, et l'artisan croit le bouton
cassé. Ici l'erreur apparaît là où son doigt vient d'appuyer. */
.form-sum{display:none;margin:0 0 16px;padding:14px 16px;border-radius:12px;
background:var(--err-bg);box-shadow:inset 0 0 0 1.5px var(--err);color:var(--err)}
.form-sum.on{display:block}
.form-sum b{display:block;font-size:15px;margin:0 0 6px}
.form-sum ul{display:grid;gap:4px;font-size:14.5px;font-weight:600}
.form-sum a{color:var(--err);text-decoration:underline;min-height:24px;display:inline-block}
.form-go{width:100%;margin:4px 0 0}
.form-go[aria-busy="true"]{opacity:.75;pointer-events:none}
/* le verrou, sous le bouton d'envoi */
.form-lock{margin:16px 0 0;padding:14px 16px;background:var(--cream);border-radius:12px;
box-shadow:inset 3px 0 0 var(--ocre-2)}
.form-lock p{margin:0;font-size:14.6px;line-height:1.5;color:var(--text);font-weight:600}
.form-lock p+p{margin-top:7px;font-weight:500;color:var(--soft)}
.form-rgpd{margin:14px 0 0;font-size:13.2px;line-height:1.5;color:var(--soft)}
.form-rgpd a{color:var(--blue-2);text-decoration:underline}
/* La place du captcha est RÉSERVÉE dès le départ, même vide.
Sans cette réserve, l'injection du widget pousse le bouton d'envoi de
70 px entre l'appui et le relâchement du doigt : le clic n'aboutit
jamais et l'artisan conclut que le bouton est cassé. Mesuré ici au
harnais, exactement le défaut H1 de la page actuelle sous une autre
forme. Le trou n'est pas vide : il est légendé. */
.turnstile-slot{margin:16px 0 0;min-height:78px;display:flex;flex-direction:column;
justify-content:center;gap:7px}
.turnstile-ph{font-size:13px;color:var(--soft)}
.turnstile-slot:has(iframe) .turnstile-ph,
.turnstile-slot:has(.cf-turnstile) .turnstile-ph{display:none}
/* confirmation en place, si la redirection ne se fait pas */
.form-done{display:none;padding:20px;border-radius:12px;background:#eefaf2;
box-shadow:inset 0 0 0 1.5px var(--ok);color:#0b4f2e}
.form-done.on{display:block}
.form-done b{display:block;font-size:17px;color:#0b4f2e;margin:0 0 6px}
/* le rappel latéral du formulaire : ce à quoi il s'engage, en clair */
.form-side{align-self:start}
.form-side .sk{display:grid;gap:14px;margin:0}
.form-side li{display:flex;gap:12px;align-items:flex-start}
.form-side li svg{width:22px;height:22px;flex:0 0 auto;color:var(--ocre-txt);margin-top:2px}
.form-side li b{display:block;font-size:15.5px;color:var(--ink)}
.form-side li span span{display:block;font-size:14.4px;color:var(--soft);line-height:1.45;margin-top:2px}
.form-side h3{margin:0 0 16px}
/* Le créneau de rappel (02/09) : il occupe l'espace sous les puces — la
colonne finissait à mi-hauteur du formulaire — et règle le MÊME envoi.
Chips radio : l'anneau de focus vient du navigateur sur l'input, rendu
visible sur le par :focus-visible + box-shadow. */
.rdv{margin:22px 0 0;padding:18px 18px 16px;border:0;border-radius:var(--r-md,14px);
background:var(--white);box-shadow:inset 0 0 0 1px var(--line),0 10px 26px -18px rgba(18,35,74,.35)}
.rdv legend{float:left;width:100%;padding:0;margin:0 0 4px;font-size:16px;font-weight:800;color:var(--ink)}
.rdv-note{margin:0 0 12px;font-size:13.8px;color:var(--soft);line-height:1.45;clear:both}
.rdv-note b{color:var(--ink);font-weight:700;white-space:nowrap}
.rdv-chips{display:flex;flex-wrap:wrap;gap:8px}
.rdv-chips label{position:relative;cursor:pointer}
.rdv-chips input{position:absolute;inset:0;opacity:0;cursor:pointer}
.rdv-chips span{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;
border-radius:var(--r-pill);font-size:14px;font-weight:700;color:var(--blue);
box-shadow:inset 0 0 0 1.5px var(--line);background:var(--paper);
transition:background .14s ease,color .14s ease,box-shadow .14s ease}
.rdv-chips input:checked + span{background:var(--blue);color:var(--white);
box-shadow:inset 0 0 0 1.5px var(--blue)}
.rdv-chips input:focus-visible + span{box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 3px rgba(31,61,128,.28)}
.rdv-echo{margin:12px 0 0;font-size:13.8px;font-weight:600;color:var(--ocre-txt)}
/* ── S3 · CE QUE VOUS PAYEZ ───────────────────────────────────────────── */
.split{display:grid;gap:20px}
.card{background:var(--white);border-radius:var(--r-lg);padding:var(--pad-card);box-shadow:var(--sh)}
.card h3{margin:0 0 16px}
.card-encre{background:linear-gradient(160deg,var(--deep) 0%,var(--deep-2) 100%);color:var(--on-deep);
box-shadow:var(--sh-lg),inset 0 0 0 1px var(--linew)}
.card-encre h3{color:var(--white)}
.klist{display:grid;gap:11px}
.klist li{display:flex;gap:11px;align-items:flex-start;font-size:15.6px;line-height:1.45}
.klist svg{width:20px;height:20px;flex:0 0 auto;color:var(--ok);margin-top:3px}
.card-encre .klist svg{color:var(--ocre-soft)}
.klist svg.no{color:var(--ocre-soft)}
.after{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--linew);font-size:14.8px;line-height:1.5}
.after b{color:var(--white)}
.pay-note{margin:20px 0 0;font-size:14.6px;color:var(--soft);max-width:66ch}
/* ── S4 · UN SITE EN LIGNE, OUVREZ-LE ─────────────────────────
Refonte du 02/09 après rejet client, puis huit passes d’audit visuel.
Mesuré sur l’état rejeté : coque de 286 × 601 px portant 76 % de la hauteur
de section, alignée sur rien (103 px de vide à gauche, 283 px jusqu’au bord
à droite), lévitant sur une ombre au sol dessinée ; à 768 px elle nageait
dans 240 px de crème de chaque côté ; la capture finissait sur 88 px d’aplat
vide. Coque aujourd’hui : 240 × 451 px, 56 % de la section.
Ce qui REMPLACE. Toute la section tient dans UNE carte blanche pleine
largeur — la grammaire de ses voisines. Les deux colonnes partagent donc
les bords de cette carte : c’est la ligne commune qui manquait, et il n’y a
plus de panneau étroit posé à côté du texte avec du fond nu à sa droite.
Dans la colonne de droite, la capture vient EN PREMIER — c’est elle qu’on
est venu voir — et le lien est posé DESSOUS : posé au-dessus et plus large
qu’elle, il devenait le premier objet vu de la section.
Structures regardées sur 21st.dev (métadonnées seules, aucun code repris) :
#1913, #24478, #8291, #18912.
Purgés PAR SÉLECTEUR avec l’ancienne composition : .gsh et .gsh-phone
(l’ombre au sol), le bloc tablette en ligne, et le jeton de dégradé qui
servait l’ombre au sol. */
.proof-grid{display:grid;gap:22px;background:var(--white);
border-radius:var(--r-lg);box-shadow:var(--sh);padding:clamp(16px,3.4vw,38px)}
/* le rembourrage rime avec la carte encre voisine (38 px à 1440), mais descend
à 16 px sous 480 px : à 24 px il coûtait plus en hauteur de texte qu’il
n’apportait, et retirer la carte aurait fait de S4 la seule section sans
cadre à 320 px. */
.proof-txt .lead{margin-bottom:0}
/* La dissection du site livré (02/09) : chaque bloc + pourquoi on l'a mis.
Filet ocre 3 px par ligne, le signal n°4 du §5 bis : pas de puces nues,
pas d'icônes clonées. Deux colonnes dès 700 px : sept entrées de deux
lignes en une colonne feraient une tour à côté de la coque. */
.proof-inv-t{margin:18px 0 12px;font-size:15px;font-weight:800;color:var(--ink)}
/* Variante B retenue par Mourad (02/09) : items d'UNE ligne, gras en tête de
ligne (inline, pas en bloc), interligne serré. */
.proof-diss{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.proof-diss li{padding-left:13px;border-left:3px solid var(--ocre-2);
font-size:13.9px;line-height:1.45;color:var(--soft)}
.proof-diss b{display:inline;color:var(--ink);font-size:14.2px;margin-right:4px}
@media (min-width:700px){
.proof-diss{grid-template-columns:1fr 1fr;gap:12px 22px}
}
.proof-build{margin:18px 0 0;font-size:14.6px;line-height:1.55;color:var(--ink);font-weight:600}
/* Effet au scroll (02/09), sobre et LOCAL au bloc dissection — jamais le
fade-in généralisé banni par design-artisan-btp §4. L'état masqué n'existe
que si le JS a signé (html.js-anim) : sans JavaScript, tout est visible.
Sous prefers-reduced-motion, aucune translation ni fondu. */
@media (prefers-reduced-motion:no-preference){
.js-anim .proof-diss li,
.js-anim .proof-vis{opacity:0;transform:translateY(12px);
transition:opacity .5s ease,transform .5s ease}
.js-anim .proof-diss li.en-vue,
.js-anim .proof-vis.en-vue{opacity:1;transform:none}
}
/* le surtitre appartient au titre : 26/25/24 px d intervalle donnaient quatre
blocs equidistants sans groupement */
.proof-txt .eyebrow{margin-bottom:9px}
/* la colonne de preuve a la largeur de la coque, et rien d’autre : coque,
bouton et note partagent leurs DEUX bords. Centrée en une colonne (c’est une
figure dans sa colonne de texte), calée à droite en deux colonnes. */
.proof-vis{display:flex;flex-direction:column;width:min(240px,100%);margin-inline:auto}
/* à 320 px, 240 px de coque dans une carte de 260 ne laissent que 10 px de
part et d’autre du rembourrage : la coque descend à 216 px sur ces écrans */
@media (max-width:359px){
.proof-vis{width:min(216px,100%)}
}
/* la coque : rapport du relevé réel recadré, 460 × 890 (1:1,93). Recadrage —
les 10 px de liseré crème de chaque côté partent (halo parasite dans le
cadre sombre) et la coupe remonte AU-DESSUS du bouton d’appel du site
client : coupée en dessous elle laissait 88 px d’aplat vide, coupée dessus
elle amputait le bouton d’un tiers. L’écran se termine maintenant sur la
photo, pleine matière jusqu’au bord — ce que fait un vrai téléphone. */
.phonewrap{margin:0;width:100%}
.phone{position:relative;border-radius:26px;padding:7px;background:#0b1631;
box-shadow:var(--sh-lg),inset 0 0 0 1px var(--linew)}
.phone-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);
width:32%;height:5px;border-radius:var(--r-pill);background:rgba(219,227,240,.30);z-index:1}
.phone img{width:100%;border-radius:20px;display:block}
/* L'écran qui défile (02/09) : la capture longue coulisse dans la fenêtre de
la coque. La fenêtre garde le format 460/890 de l'ancienne capture ; la
course de -72.188% vient des dimensions mesurées (3200 px de capture pour
890 px de fenêtre : (3200-890)/3200). L'animation ne DÉMARRE que quand la
section est à l'écran (.en-vue, posé par l'observateur de landing.js) —
et n'existe ni sans JS ni en reduced-motion : haut du site, immobile. */
.phone-ecran{border-radius:20px;overflow:hidden;aspect-ratio:460/890}
.phone .phone-ecran img{border-radius:0;height:auto}
@media (prefers-reduced-motion:no-preference){
.js-anim .phone-defile{animation:phone-defile 16s ease-in-out infinite;
animation-play-state:paused;will-change:transform}
.js-anim .proof-vis.en-vue .phone-defile{animation-play-state:running}
@keyframes phone-defile{
0%,10%{transform:translateY(0)}
55%,70%{transform:translateY(-72.188%)}
100%{transform:translateY(0)}
}
}
.proof-head{margin:18px 0 0}
/* le lien est l’action que la capture appelle : plein, sous elle, exactement
à sa largeur. En contour il disparaissait au test de vision floue. 10,3:1. */
.proof-open{display:flex;align-items:center;justify-content:center;gap:9px;
margin:0;padding:12px 18px;border-radius:var(--r-pill);
background:var(--blue);color:var(--white);
box-shadow:0 1px 2px rgba(var(--sh-ink),.16),0 8px 18px -8px rgba(18,35,74,.40);
font-size:15.4px;font-weight:800;min-height:46px;
transition:background .2s var(--ease),transform .18s var(--ease)}
.proof-open:hover{background:var(--blue-2);color:var(--white);
text-decoration:none;transform:translateY(-1px)}
.proof-open:active{transform:none}
/* mouvement réduit : le survol change de couleur, il ne DÉPLACE plus rien.
La règle globale ramène les durées à zéro mais laisse passer un décalage
instantané de 1 px — mesuré, donc corrigé ici. */
@media (prefers-reduced-motion:reduce){
.proof-open:hover{transform:none}
}
.proof-open svg{width:17px;height:17px;flex:0 0 auto}
.proof-cap{margin:11px 0 0;font-size:13.6px;color:var(--soft)}
/* l’interlignage serré ne vaut QUE dans la carte : .proof-cap sert aussi sur
merci.html, et une règle nue y aurait changé la note sans qu’on le voie */
.proof-vis .proof-cap{line-height:1.45;text-align:center}
/* l’argument : pas de deuxième surface dans la carte — deux blancs empilés ne
hiérarchisent rien. Un filet d’accent de 3 px le tient : UN dispositif à
cette frontière, pas deux. Il reprend le --ocre-2 du tiret du surtitre
(3,2:1 sur blanc contre 2,6:1 pour le --ocre d’aplat) : le filet vertical
se lit comme ce tiret pivoté. */
.proof-arg{margin:0;padding:1px 0 1px 16px;border-left:3px solid var(--ocre-2);
font-size:15px;line-height:1.58;color:var(--soft);max-width:64ch}
/* ≥640 : deux colonnes DANS la carte. La colonne de preuve enjambe quatre
rangées dont deux vides réparties 30 / 70 : le blanc restant tombe pour un
tiers au-dessus du titre, deux tiers dessous, sans jamais dépasser 130 px.
États écartés, mesurés : rangées auto/auto → 99 px de trou entre le chapô et
l’argument et 81 px de filet pendant dans le vide ; centré 50/50 → 140 px
au-dessus du titre ; tout en bas → 184 px, carte d’apparence inachevée. */
@media (min-width:640px){
.proof-grid{grid-template-columns:minmax(0,660px) 240px;justify-content:space-between;
grid-template-areas:". vis" "txt vis" "arg vis" ". vis";
grid-template-rows:.3fr auto auto .7fr;
column-gap:clamp(34px,3.4vw,48px);row-gap:0;align-items:start}
.proof-txt{grid-area:txt}
/* le chapô remplit sa piste : borné à 62ch il laissait 127 px de blanc
entre lui et la colonne de preuve, en plus de la gouttière */
.proof-txt .lead{max-width:none}
/* en deux colonnes la note se range sous son bouton, fer à gauche */
.proof-vis .proof-cap{text-align:left}
.proof-arg{grid-area:arg;margin-top:30px}
/* la colonne de preuve est BORNÉE et calée sur le bord droit de la carte :
sans borne, le bouton faisait 403 px pour une coque de 212 et l’ensemble
se lisait comme un T — barre large, pied étroit. */
.proof-vis{grid-area:vis;margin-left:auto;margin-right:0}
}
/* ── S5 · COMMENT ÇA SE PASSE ─────────────────────────────────────────
Quatre temps, sans numérotation décorative. Le repère est un mot, pas
un chiffre : la charte bannit les 01/02/03. */
.temps{display:grid;gap:18px;counter-reset:none}
.tp{position:relative;background:var(--white);border-radius:var(--r-lg);
padding:var(--pad-card);box-shadow:var(--sh)}
/* le picto reste `inline` par défaut : l'intitulé qui le suit se posait sur
la même ligne, décalé de 45 px vers la droite, alors que le titre et le
texte partaient du bord. Les quatre cartes avaient un bord gauche en
escalier. */
.tp .picto{display:block;width:42px;height:42px;color:var(--blue);margin:0 0 14px}
.tp .picto .oc{color:var(--ocre-2)}
.tp-k{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
letter-spacing:.11em;text-transform:uppercase;color:var(--ocre-txt);margin:0 0 8px}
.tp h3{margin:0 0 8px}
.tp p{margin:0;font-size:15.4px;line-height:1.5;color:var(--soft)}
.temps-note{margin:22px 0 0;font-size:15.4px;color:var(--text);max-width:70ch}
.temps-note b{color:var(--ink)}
/* ── S6 · CE QU'UN SITE CHANGE ────────────────────────────────────────
Quatre arguments porteurs : jamais N cellules égales de texte nu.
Signaux posés ici (design-artisan-btp §5 bis) : ASYMÉTRIE (la première
cellule occupe deux colonnes), APLAT (elle est sur fond encre), et une
IMAGE dessinée (le téléphone qui cherche un nom). */
.chg{display:grid;gap:16px}
.ch{background:var(--white);border-radius:var(--r-lg);padding:var(--pad-card);box-shadow:var(--sh)}
.ch h3{margin:0 0 9px}
.ch p{margin:0;font-size:15.4px;line-height:1.5;color:var(--soft)}
.ch-lead{background:linear-gradient(160deg,var(--deep) 0%,var(--deep-2) 100%);color:var(--on-deep);
box-shadow:var(--sh-lg),inset 0 0 0 1px var(--linew)}
.ch-lead h3{color:var(--white);font-size:clamp(19px,2vw,24px)}
.ch-lead p{color:var(--on-deep)}
.ch-in{display:grid;gap:18px;align-items:start;margin-top:16px}
.ch-obj{width:118px;height:auto;flex:0 0 auto;justify-self:center}
/* ── S7 · LES QUATRE QUESTIONS ────────────────────────────────────────
Remplace le comparatif à trois colonnes : même argument, aucun chiffre
sur un tiers, aucun dénigrement. */
.qs{display:grid;gap:14px}
.q{background:var(--white);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--sh)}
.q b{display:block;font-size:16.6px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:0 0 7px}
.q span{display:block;font-size:15.4px;line-height:1.52;color:var(--soft)}
/* ── S8 · QUI VOUS PARLE ──────────────────────────────────────────────── */
.who-card{background:linear-gradient(160deg,var(--deep) 0%,var(--deep-2) 100%);color:var(--on-deep);
border-radius:var(--r-lg);padding:clamp(24px,3.4vw,38px);box-shadow:var(--sh-lg),inset 0 0 0 1px var(--linew)}
/* la couleur des titres/textes vient de `.deep`, portée par la carte */
.who-l{display:grid;gap:12px;margin:20px 0 22px}
.who-l li{display:flex;gap:11px;align-items:flex-start;font-size:15.4px;line-height:1.45}
.who-l svg{width:20px;height:20px;flex:0 0 auto;color:var(--ocre-soft);margin-top:2px}
.who-l b{color:var(--white)}
.who-cta{display:flex;flex-wrap:wrap;gap:12px}
.who-cta .btn{flex:1 1 220px}
/* ── S9 · FAQ ─────────────────────────────────────────────────────────── */
.faq{display:grid;gap:0;background:var(--white);border-radius:var(--r-lg);
padding:6px clamp(16px,2.4vw,26px);box-shadow:var(--sh)}
.faq details+details{border-top:1px solid var(--line)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding:19px 0;min-height:44px;cursor:pointer;list-style:none;
font-size:16.4px;font-weight:700;color:var(--ink);letter-spacing:-.018em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-2)}
.faq-x{width:18px;height:18px;flex:0 0 auto;color:var(--ocre-txt);margin-top:4px;
transition:transform .22s var(--ease)}
.faq details[open] .faq-x{transform:rotate(45deg)}
.faq-a{margin:0;padding:0 0 20px;font-size:15.4px;line-height:1.58;color:var(--soft);max-width:72ch}
.faq-call{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:24px 0 0}
.faq-call p{margin:0;font-size:15.6px;color:var(--text);font-weight:600}
/* ── S10 · RAPPEL FORMULAIRE + CTA FINALE ─────────────────────────────── */
.final{position:relative;overflow:hidden;
background:linear-gradient(168deg,var(--deep) 0%,var(--deep-2) 70%,#0a1730 100%)}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.03;
background-image:var(--grain);background-size:180px 180px}
.final .wrap{position:relative;z-index:1}
.final-grid{display:grid;gap:26px;align-items:start}
.final-cta{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 14px}
.final-cta .btn{flex:1 1 220px}
/* ── PIED DE PAGE ─────────────────────────────────────────────────────── */
.ft{background:var(--deep-2);color:var(--on-deep);padding:36px 0 30px;font-size:14.6px}
.ft-grid{display:grid;gap:24px}
.ft .brand{margin:0 0 12px}
.ft a{color:var(--on-deep);text-decoration:underline;text-underline-offset:3px}
.ft a:hover{color:var(--white)}
/* les liens de contact du pied de page faisaient 18 px de haut : sous les
44 px confortables au pouce. Ils prennent leur propre ligne. */
.ft-contact{display:flex;flex-wrap:wrap;gap:0 20px;margin:0}
.ft-contact a{display:inline-flex;align-items:center;min-height:44px}
.ft-nav{display:flex;flex-wrap:wrap;gap:6px 22px}
/* « Gérer les cookies » vit parmi les liens du pied de page : sans cette
règle il gardait l'habillage natif du navigateur (aplat gris, Arial,
bordure « outset »), seule tache claire du pied sombre. */
.ft-nav button{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;
cursor:pointer;font:inherit;color:var(--on-deep);text-decoration:underline;
text-underline-offset:3px}
.ft-nav button:hover{color:var(--white)}
.ft-nav a{display:inline-flex;align-items:center;min-height:44px}
.ft-legal{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--hairw);font-size:13.2px;opacity:.85}
/* ── BARRE COLLANTE (mobile) ──────────────────────────────────────────
Elle n'apparaît qu'APRÈS le formulaire : avant, elle lui ferait
concurrence et tronquerait le premier écran. Le JS pose --barh sur le
body pour qu'elle ne recouvre jamais le bas d'une section. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;align-items:center;gap:12px;
padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:rgba(13,28,62,.97);
backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
box-shadow:0 -8px 24px -12px rgba(2,8,22,.7);border-top:1px solid var(--hairw);
transform:translateY(105%);transition:transform .28s var(--ease)}
.bar.on{transform:translateY(0)}
.bar-t{flex:1 1 auto;min-width:0;font-size:12.4px;line-height:1.3;color:var(--on-deep)}
.bar-t b{display:block;font-size:15.4px;color:var(--white);letter-spacing:-.02em}
/* le numéro n'est pas un lien noyé dans une phrase : c'est une cible de
46 px, comme le bouton d'à côté */
.bar-tel{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
width:46px;height:46px;border-radius:var(--r-pill);color:var(--white);
box-shadow:inset 0 0 0 1.5px var(--linew)}
.bar-tel:hover{background:rgba(255,255,255,.10)}
.bar-tel svg{width:21px;height:21px}
.bar .btn{flex:0 0 auto;min-height:46px;padding:11px 16px;font-size:15px}
/* ── BANDEAU COOKIES ──────────────────────────────────────────────────
En BAS, compact, jamais par-dessus le titre : sur la page actuelle il
fait 215 px et recouvre intégralement le H1, pour 100 % du trafic payant
(il ne s'affiche qu'à la première visite, celle qu'on achète). */
.cbn{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
padding:11px 15px calc(11px + env(safe-area-inset-bottom));
background:var(--white);box-shadow:0 -10px 34px -14px rgba(var(--sh-ink),.5);
border-top:2px solid var(--ocre)}
.cbn.on{display:block}
.cbn-in{max-width:var(--wrap);margin:0 auto;display:grid;gap:11px;align-items:center}
.cbn p{margin:0;font-size:13px;line-height:1.4;color:var(--text)}
.cbn p a{color:var(--blue-2);text-decoration:underline}
.cbn-btns{display:flex;gap:9px}
.cbn-btns .btn{flex:1 1 auto;min-height:46px;padding:11px 14px;font-size:15px}
.cbn-no{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px #8c99b1}
.cbn-no:hover{background:var(--cream)}
/* ── LARGEURS ─────────────────────────────────────────────────────────── */
@media (min-width:560px){
.cbn-in{grid-template-columns:1fr auto;gap:16px}
.cbn-btns{flex:0 0 auto}
.cbn-btns .btn{flex:0 0 auto;min-width:120px}
.hd-tel .tel-lg{display:inline}
.hd-tel .tel-sm{display:none}
.appuis{grid-template-columns:1fr 1fr;gap:18px 24px}
.appui--prix{grid-column:1 / -1}
.qs{grid-template-columns:1fr 1fr}
.temps{grid-template-columns:1fr 1fr}
.chg{grid-template-columns:1fr 1fr}
.ch-lead{grid-column:1 / -1}
.ch-in{grid-template-columns:auto 1fr;gap:22px;align-items:center}
.split{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
body{font-size:17.5px}
.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:44px;align-items:center}
.hero-band{padding:clamp(40px,4.4vw,64px) 0 clamp(38px,4vw,56px)}
/* sur large, le voile bascule a l horizontale : fort sous le texte a
gauche, leger a droite ou la photo doit rester lisible */
.hero-voile{background:linear-gradient(96deg,rgba(9,19,42,.80) 0%,rgba(9,19,42,.76) 46%,rgba(9,19,42,.50) 74%,rgba(9,19,42,.44) 100%)}
.hero-voile::after{background:linear-gradient(96deg,rgba(9,19,42,.42) 0%,rgba(9,19,42,.36) 52%,rgba(9,19,42,.06) 78%,transparent 100%)}
.appuis{grid-template-columns:auto 1fr 1fr;gap:26px 34px;align-items:center}
.appui--prix{grid-column:auto}
.form-grid{grid-template-columns:1.25fr .75fr;gap:40px}
/* colonne droite du formulaire : les 4 puces d'engagement respirent et la
carte créneau descend au niveau du bouton d'envoi (mesuré en prod à
1366 : bas de colonne 1654 pour un bas de bouton 1655 — verdict de
l'agent audit-visuel du 02/09, contre-épreuve par injection live). */
.form-side .sk{gap:56px}
.rdv{margin-top:50px}
.temps{grid-template-columns:repeat(4,1fr)}
.chg{grid-template-columns:repeat(3,1fr)}
.ch-lead{grid-column:span 2}
.final-grid{grid-template-columns:1fr 1fr;gap:44px}
.bar{display:none !important}
}
@media (max-width:559px){
.hero h1{font-size:clamp(26px,7.6vw,33px)}
.brand span{display:none}
.brand img{height:38px}
.faq summary{font-size:15.6px}
.bar{display:flex}
}
/* 320 px : la page actuelle déborde de 29 px. Rien ici n'a de largeur fixe,
et les deux coupables mesurés (la coque d'ordinateur du hero et la piste
du bandeau défilant) n'existent plus. Ceinture : on borne la scène. */
@media (max-width:359px){
.wrap{padding:0 14px}
.hero-cta .btn,.who-cta .btn,.final-cta .btn{flex:1 1 100%}
.cbn-btns{flex-wrap:wrap}
.btn{font-size:15.4px;padding:12px 16px}
.hd-tel{padding:8px 11px;font-size:14px}
/* La barre collante n’a plus la place de porter son libellé : sous 360 px
il ne reste que 50 px pour lui, il se casse en 5 lignes et la barre monte
à 107 px (contre 65 px à 390 px) — un sixième de l’écran mangé par un
texte illisible. On garde les deux cibles qui servent, appeler et
demander, et le bouton reprend la place libérée. Le prix reste dit par
la page ; la barre n’est qu’un rappel d’action. */
.bar-t{display:none}
.bar{gap:10px}
.bar .btn{flex:1 1 auto;min-width:0}
}
/* ── MOUVEMENT ────────────────────────────────────────────────────────
Une seule animation sur la page : l'entrée du hero, courte, une fois.
Et elle est RÉELLEMENT coupée — la règle vise `*`, pas une liste de
sélecteurs écrite à la main (la page actuelle laissait tourner six
animations infinies malgré prefers-reduced-motion). */
@media (prefers-reduced-motion:no-preference){
.hero-grid>div>*{animation:rise .5s var(--ease) both}
.hero .eyebrow{animation-delay:.02s}
.hero h1{animation-delay:.07s}
.hero-lead{animation-delay:.12s}
.verrou{animation-delay:.17s}
.hero-cta{animation-delay:.22s}
.hero-note{animation-delay:.26s}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important}
html{scroll-behavior:auto}
.bar{transition:none}
}
@media print{.bar,.cbn,.hd{display:none !important}}
/* ══════════════════════════════════════════════════════════════════════
LE DOSSIER FACULTATIF (page de remerciement, étape 2)
Le contact est déjà acquis à l'étape 1. Tout ce qui suit est un bonus :
rien n'y est obligatoire, et chaque étape est enregistrée dès qu'elle
est validée — un abandon à mi-parcours conserve ce qui a été saisi.
══════════════════════════════════════════════════════════════════ */
.dos{background:var(--white);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);box-shadow:var(--sh-lg)}
.dos-rappel{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 20px;padding:0 0 18px;
border-bottom:1px solid var(--line)}
.dos-rappel span{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-pill);
background:var(--cream);font-size:13.6px;font-weight:700;color:var(--ink)}
.dos-rappel span b{font-weight:500;color:var(--soft)}
/* progression : une barre et un compteur, pas douze pastilles */
.dos-prog{margin:0 0 20px}
.dos-prog-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
margin:0 0 8px;font-size:13.4px;font-weight:700;color:var(--soft)}
.dos-prog-t b{color:var(--ink);font-size:15px}
.dos-bar{height:8px;border-radius:var(--r-pill);background:var(--cream-2);overflow:hidden}
.dos-bar i{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--ocre-2);
transition:width .35s var(--ease)}
.dos-etape{display:none}
.dos-etape.on{display:block}
.dos-etape h3{margin:0 0 6px;font-size:clamp(19px,2vw,23px)}
.dos-etape>p.dos-s{margin:0 0 20px;font-size:15px;color:var(--soft)}
/* huit de ces blocs sont des