/* OLIVIER GASTAUD — électricien à Cabris (06)
Direction A « Le cartouche ». Tokens et règles : DESIGN.md.
⛔ Zéro monospace · zéro serif italic display · zéro fond lin/bone/crème
⛔ Animations : liste FERMÉE du DESIGN.md §9. Aucun fade-in au scroll. */
/* ============ 0. POLICES — AUTO-HÉBERGÉES ============ */
/* ⛔ NE JAMAIS remettre de : cette feuille
tierce était RENDER-BLOCKING et sa chaîne (HTML → CSS googleapis → woff2
gstatic, deux origines tierces à ouvrir) coûtait 296 ms de LCP mesurés sur la
photo du hero de l'accueil, en Slow 4G / CPU ×4 (.qa/PERF.md).
Fichiers : sous-ensemble latin identique à celui que Google servait
(couverture vérifiée glyphe par glyphe sur le texte des 8 pages), axe `wght`
variable — un seul fichier couvre toutes les graisses de la famille.
Public Sans est ramené de l'axe 100→900 à 400→600, les seules graisses
utilisées ici et les seules que Google servait déjà (−17,6 % de poids).
Servis en cache immutable 1 an par `_headers` (/assets/*). */
@font-face{
font-family:"Instrument Sans";
src:url("../fonts/instrument-sans-var-latin.woff2?v=1") format("woff2");
font-weight:400 700; /* utilisées : 500 nav · 600 boutons/liens · 700 titres */
font-style:normal;
font-display:swap;
}
@font-face{
font-family:"Public Sans";
src:url("../fonts/public-sans-var-latin.woff2?v=1") format("woff2");
font-weight:400 600; /* utilisées : 400 corps · 500 sur-titre · 600 eyebrow/labels */
font-style:normal;
font-display:swap;
}
/* ============ 1. TOKENS ============ */
:root{
--stone:#F2F3F0; /* fond principal, calcaire froid */
--stone-deep:#E4E6E0; /* fond de section alternatif */
--olive:#3B4A2C; /* dominante sombre */
--olive-soft:#5E7046;
--azur:#0F72B0; /* SEUL accent vif */
--azur-deep:#0B5A8C;
--ink:#1C2118;
--muted:#5C6553; /* ⛔ jamais sur photo ni sur fond sombre */
--line:#D3D7CC;
--ff-title:"Instrument Sans",system-ui,-apple-system,sans-serif;
--ff-body:"Public Sans",system-ui,-apple-system,sans-serif;
--fs-display:clamp(2.4rem,5.2vw,4.4rem); /* plafond du skill : clamp(40px,6vw,96px) */
--fs-h2:clamp(2rem,4.4vw,3.6rem); /* 41,6 -> 57,6 px : le corpus est a 46 px en mediane,
on etait 9e sur 9. Ratio H1/H2 : 1,69 -> 1,25 */
--fs-h3:clamp(1.35rem,2.5vw,1.85rem);
--wrap:1180px;
--pad:24px;
--ease:cubic-bezier(0.2,0,0,1);
}
/* ============ 2. BASE ============ */
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding-top : le header est sticky sur 77 px. Sans cette réserve, une
ancre interne (#prestations) amène le haut de la section EXACTEMENT sous le
header, qui en recouvre alors les 77 premiers pixels (mesuré). */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:var(--ff-body);font-size:17px;line-height:1.62;
color:var(--ink);background:var(--stone);-webkit-font-smoothing:antialiased}
body.nav-open{overflow:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--ff-title);margin:0;line-height:1.09;
letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--azur);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
padding:12px 18px}
.skip:focus{left:8px;top:8px}
/* ============ 3. (PAS DE MOTIF SIGNATURE GRAPHIQUE) ============ */
/* Le « cadre décalé » (filet azur de 2 px décalé du bloc) a été RETIRÉ le 2026-08-04.
Rejet Mourad : « enlève-moi ces encadrés bleus, je ne comprends pas la plus-value,
ne serait-ce que graphique. Regarde, dans tout le site il y a ça. »
Il était posé sur la carte de zone, sur le cartouche du hero et dans le pied de page.
NE PAS le remplacer par un autre signe abstrait. C'est le DEUXIÈME motif inventé qui se
fait rejeter sur un projet d'électricien sans logo (précédent : les équerres jaunes de
DR ÉLECTRICITÉS, « j'ai pas compris cet angle jaune »).
La source n°1 d'un motif signature est une FORME DU LOGO DU CLIENT. Tant que le logo n'est
pas arrivé, ce site n'a pas de motif graphique, et c'est le bon état : mieux vaut aucun
signe qu'un signe que personne ne comprend. La signature tient alors à la palette, à la
typographie et à la composition. */
/* ============ 4. BOUTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--ff-title);font-weight:600;font-size:16px;padding:15px 26px;
min-height:48px;border-radius:2px;text-decoration:none;border:2px solid transparent;
cursor:pointer;
transition:background-color .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
.btn:active{scale:.96}
.btn-primary{background:var(--azur);color:#fff;border-color:var(--azur)}
.btn-primary:hover{background:var(--azur-deep);border-color:var(--azur-deep)}
.btn-ghost{border-color:#fff;color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.eyebrow{font-family:var(--ff-body);font-weight:600;font-size:12.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--azur);display:block}
/* ============ 5. TOPBAR + HEADER ============ */
/* Régime de nav propre au projet : le téléphone vit dans la topbar, ce qui libère
le header du bouton CTA. Aucun des 9 électriciens du corpus n'a de topbar. */
.topbar{background:var(--olive);color:#EDEFE7;font-size:14px}
.topbar .wrap{display:flex;gap:20px;align-items:center;justify-content:space-between;
min-height:42px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.topbar a{font-weight:600;color:#fff;text-decoration:none;white-space:nowrap}
.topbar a:hover{text-decoration:underline}
.hdr{background:var(--stone);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
transition:box-shadow .18s var(--ease),background-color .18s var(--ease)}
.hdr.is-solid{box-shadow:0 1px 0 rgba(28,33,24,.06),0 8px 24px -14px rgba(28,33,24,.34)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.mark{font-family:var(--ff-title);font-weight:700;font-size:20px;letter-spacing:-.01em;
text-decoration:none;line-height:1.1}
.mark span{display:block;font-family:var(--ff-body);font-weight:500;font-size:12px;
letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;gap:30px;font-family:var(--ff-title);font-weight:500;font-size:15.5px}
.nav a{text-decoration:none;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap;
transition:border-color .16s var(--ease),color .16s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--azur)}
/* ---- Sous-menu « Prestations » ------------------------------------------------
Composant le plus piégeux du repo (3 sites l'ont raté avant d'être outillé).
Les trois pièges, et leur parade ici :
1. LE VIDE DE SURVOL — aucun décalage entre le bouton et le panneau, PLUS une
passerelle `::before` qui DESCEND DU PANNEAU (donc dans le sous-arbre du
conteneur : le pointeur ne quitte jamais `.nav-grp` en y entrant).
2. LE CLIC QUI REFERME — sur écran à souris le survol a déjà ouvert le menu
quand le clic arrive. Le premier clic ÉPINGLE au lieu de basculer.
3. LA CIBLE CACHÉE — les liens du panneau ont le même contraste que la nav,
ils sont mesurables une fois ouverts. */
.nav-grp{position:relative;display:flex;align-items:center}
.nav-btn{font:inherit;font-family:var(--ff-title);font-weight:500;font-size:15.5px;
background:none;border:0;border-bottom:2px solid transparent;padding:8px 0;cursor:pointer;
color:inherit;display:inline-flex;align-items:center;gap:7px;
transition:border-color .16s var(--ease)}
.nav-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
transition:transform .16s var(--ease)}
.nav-grp[data-open="true"] .nav-btn::after{transform:rotate(-135deg) translate(-3px,-3px)}
.nav-grp[data-open="true"] .nav-btn,.nav-btn:hover{border-bottom-color:var(--azur)}
.sub{position:absolute;top:100%;left:-20px;min-width:286px;background:var(--stone);
border:1px solid var(--line);box-shadow:0 18px 40px -22px rgba(28,33,24,.55);
padding:8px 0;z-index:60;display:none}
/* la passerelle : elle appartient au PANNEAU, donc au conteneur survolé */
.sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-grp[data-open="true"] .sub{display:block}
.sub a{display:block;padding:11px 22px;white-space:nowrap;text-decoration:none;
font-family:var(--ff-title);font-weight:500;font-size:15.5px;border-bottom:0;
border-left:3px solid transparent;transition:background-color .16s var(--ease),border-color .16s var(--ease)}
.sub a:hover,.sub a:focus-visible{background:var(--stone-deep);border-left-color:var(--azur)}
.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;
background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer;
margin-right:0;color:var(--ink)}
.burger span{display:block;width:22px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;
background:currentColor}
.burger span::before{top:-7px}
.burger span::after{top:7px}
/* Tiroir : FRÈRE du header, jamais son enfant — un enfant d'un header sticky crée un
contexte d'empilement qui enferme le tiroir et rend la fermeture inatteignable. */
.drawer{position:fixed;inset:0;z-index:90;background:rgba(28,33,24,.55);
display:flex;justify-content:flex-end}
.drawer[hidden]{display:none}
.drawer-panel{background:var(--stone);width:min(320px,84vw);height:100%;padding:22px 24px 32px;
display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.drawer-panel .close{align-self:flex-end;width:48px;height:48px;border:1px solid var(--line);
background:none;border-radius:2px;font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
.drawer-panel a{font-family:var(--ff-title);font-weight:600;font-size:19px;text-decoration:none;
padding:15px 0;border-bottom:1px solid var(--line)}
/* En mobile, pas de survol : le sous-menu est DÉPLIÉ d'office, en retrait.
Un déroulant tactile ajouterait un tap de plus pour rien. */
.drawer-panel .sous a{font-size:16.5px;font-weight:500;padding:12px 0 12px 18px;
border-left:3px solid var(--line);border-bottom:0;color:var(--muted)}
.drawer-panel .sous{border-bottom:1px solid var(--line);padding-bottom:6px}
.drawer-tel{margin-top:18px}
/* ============ 6. HERO — direction A « Le cartouche » ============ */
/* La photo n'est PAS assombrie : sa lumière est l'argument. Le contraste vient du bloc. */
.hero{position:relative;min-height:min(84vh,700px);display:flex;background:var(--stone-deep);
overflow:hidden}
.hero-photo{position:absolute;inset:0}
/* ⚠️ DEUX recadrages sur cette image : `extract` au postprocess (12 % coupés par le BAS)
et `object-position` ici. Les deux doivent désigner le même côté, sinon les luminaires
sortent du cadre — et ni le rapport DOM ni image-sanity ne le verraient.
Les sources lumineuses sont à 68-82 % de la largeur : on garde la DROITE. */
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:74% 44%}
.hero .wrap{position:relative;display:flex;align-items:center;width:100%}
.cartouche{position:relative;background:var(--olive);color:#F0F2EA;
width:min(46%,520px);padding:52px 44px 46px;margin:56px 0}
/* la fiche glissée : le tiers bas du bord droit se décale */
.cartouche::before{content:"";position:absolute;right:-26px;bottom:0;top:66%;width:26px;
background:var(--olive)}
.cartouche h1{font-size:var(--fs-display);color:#fff;margin-bottom:20px}
.cartouche .lead{color:#DCE2D0;font-size:17.5px}
.cartouche .eyebrow{color:#9FC9E4;margin-bottom:16px}
/* ============ 7. BLOC D'ARGUMENTS — traitement C « L'index à vignette » ============ */
/* Règle DESIGN.md : rangées pleine largeur, vignette 16:10 à DROITE, calages alternés,
la DERNIÈRE rangée n'a pas de vignette et porte le filet olive épais + le lien.
⛔ Jamais de cellules en grille : voir qa/check-blocs-nus.mjs. */
.faits{padding:72px 0 8px}
.faits-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);
gap:40px;align-items:end;padding-bottom:26px}
.faits-head h2{font-size:var(--fs-h2)}
.faits-head p{color:var(--muted);font-size:16px}
.fait{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:center;
padding:26px 0;border-bottom:1px solid var(--line)}
.fait:first-of-type{border-top:1px solid var(--line)}
.fait .terme{font-family:var(--ff-title);font-weight:600;font-size:var(--fs-h3);
margin-bottom:8px;color:var(--olive)}
.fait p{color:var(--muted);max-width:52ch}
.fait .shot{aspect-ratio:16/10;overflow:hidden;background:var(--stone-deep)}
.fait .shot img{width:100%;height:100%;object-fit:cover;
outline:1px solid rgba(28,33,24,.10);outline-offset:-1px}
.fait.haut{align-items:start}
.fait.bas{align-items:end}
.fait-cta{border-bottom:0;border-top:3px solid var(--olive);padding:32px 0 6px;
grid-template-columns:minmax(0,1fr) auto}
.fait-cta .lien{font-family:var(--ff-title);font-weight:600;color:var(--azur);text-decoration:none;
font-size:18px;border-bottom:2px solid var(--azur);padding-bottom:3px;white-space:nowrap;
transition:color .16s var(--ease),border-color .16s var(--ease)}
.fait-cta .lien:hover{color:var(--azur-deep);border-color:var(--azur-deep)}
/* ============ 8. PRESTATIONS — splits photo dominante, alternés ============ */
/* Remplace la grille de 4 cartes (section « cassée » de l'accueil, skill §5).
Géométrie volontairement différente du bloc d'arguments ci-dessus. */
.presta{padding:76px 0 0;overflow-x:clip}
/* Le debord : la photo quitte la colonne et va au bord de l'ecran, une rangee sur deux.
`overflow-x:clip` sur la section (et non `hidden`) : pas de conteneur de defilement cree. */
.bande:nth-child(odd) .visuel{margin-left:calc(50% - 50vw)}
.bande:nth-child(even) .visuel{margin-right:calc(50% - 50vw)}
.presta-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:44px;
align-items:end;padding-bottom:34px;border-bottom:2px solid var(--ink)}
.presta-head h2{font-size:var(--fs-h2)}
.presta-head p{color:var(--muted);max-width:50ch}
.bande{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:0;align-items:stretch;
border-bottom:1px solid var(--line)}
.bande .visuel{position:relative;min-height:320px;overflow:visible}
.bande .visuel img{width:100%;height:100%;object-fit:cover}
.bande .texte{padding:52px 0 52px 52px;display:flex;flex-direction:column;justify-content:center}
.bande h3{font-size:var(--fs-h3);margin-bottom:12px}
.bande p{color:var(--muted);max-width:46ch}
.bande .lien{margin-top:22px;font-family:var(--ff-title);font-weight:600;color:var(--azur);
text-decoration:none;align-self:flex-start;border-bottom:2px solid var(--azur);padding-bottom:3px;
transition:color .16s var(--ease),border-color .16s var(--ease)}
.bande .lien:hover{color:var(--azur-deep);border-color:var(--azur-deep)}
/* alternance : une rangée sur deux inverse photo et texte */
.bande:nth-child(even) .visuel{order:2}
.bande:nth-child(even) .texte{order:1;padding:52px 52px 52px 0}
/* le cadre décalé apparaît au survol ET reste visible sur les supports tactiles */
/* ⛔ PAS de cadre sur les photos. Un filet de 2 px posé à 16 px du bord d'une
photographie ne se lit pas comme un cadre : il se lit comme une rayure en travers
de l'image. Le motif signature vit sur les blocs NON photographiques (`.motif`),
où il déborde VERS L'EXTÉRIEUR — c'est ce débord qui le rend lisible.
Rejet Mourad 2026-08-04 : « tous ces traits qui partent de partout ». */
/* ============ 9. BANDE D'IMPACT (CTA) ============ */
/* Le slot `bande-cta` du DESIGN.md §8 (« plan large atmosphérique ») n'avait JAMAIS été produit :
ni en HTML, ni en CSS, ni sur le disque. Sans lui, cette bande avait EXACTEMENT la couleur du
pied de page, à 0 px d'écart et sans bordure -> 678 px d'olive continu en desktop, 1 215 px en
mobile, où le principal moment de conversion de la page était indistinguable du footer.
La photo de matière l'en sépare mécaniquement. */
.impact{position:relative;background:var(--olive);color:#EDEFE7;padding:0;overflow:hidden}
.impact .fond{position:absolute;inset:0}
.impact .fond img{width:100%;height:100%;object-fit:cover}
.impact .wrap{position:relative;z-index:1}
.impact .cta-box{background:var(--olive);width:min(58%,600px);
padding:clamp(38px,5vw,56px) clamp(28px,4vw,48px);margin:clamp(56px,8vw,96px) 0}
/* dans un cartouche de 600 px, la grille 7fr/5fr n'a plus de sens : une seule colonne */
.impact .cta-box .grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
.impact h2{font-size:var(--fs-h2);color:#fff}
.impact p{color:#C8D3B8;margin-top:16px;max-width:52ch}
.impact .actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.impact .tel{font-family:var(--ff-title);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);
color:#fff;text-decoration:none;letter-spacing:-.01em}
.impact .tel:hover{color:#DCE2D0}
/* ============ 10. ZONE D'INTERVENTION ============ */
.zone{padding:74px 0}
.zone .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:52px;
align-items:center}
.zone h2{font-size:var(--fs-h2);margin-bottom:16px}
.zone p{color:var(--muted)}
.zone .communes{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.zone .communes li{font-size:14.5px;padding:7px 13px;background:var(--stone-deep);
border-radius:2px;color:var(--ink)}
.zone .communes li.pin{background:var(--olive);color:#fff;font-weight:600}
/* overflow VISIBLE : `.carte` porte le motif `.motif::after`, décalé vers le haut-gauche.
Avec `overflow:hidden` elle rognait son propre motif — il n'était donc jamais visible. */
.carte{position:relative;aspect-ratio:4/3;background:var(--stone-deep);overflow:visible}
.carte img{width:100%;height:100%;object-fit:cover;
outline:1px solid rgba(28,33,24,.10);outline-offset:-1px}
/* ============ 11. PIED DE PAGE ============ */
.ftr{background:var(--olive);color:#C8D3B8;padding:56px 0 30px;position:relative;overflow:hidden}
/* Le cadre décalé en filigrane. Il doit se LIRE comme un cadre : débordant de 60/70 px
dans un conteneur `overflow:hidden`, il ne restait que deux traits en L qui passaient
derrière la colonne de contacts — on ne comprenait plus la forme. Il est rentré dans
la marge, et masqué sous 1000 px où il n'a plus de gouttière libre pour vivre. */
.ftr .grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,3fr);gap:40px;
position:relative;z-index:1}
.ftr .mark-f{font-family:var(--ff-title);font-weight:700;font-size:24px;color:#fff;
letter-spacing:-.01em;display:block;margin-bottom:6px}
/* #9FB08A ne donnait que 4,11:1 sur l'olive — sous le seuil AA (4,5) pour du 14 px.
#B2C29B mesure 4,99:1 et garde l'écart de valeur avec le texte courant du footer. */
.ftr h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#B2C29B;
margin-bottom:14px;font-family:var(--ff-body);font-weight:600}
.ftr a{color:#DCE2D0;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr li{padding:5px 0}
.ftr .bas{margin-top:40px;padding-top:22px;border-top:1px solid rgba(242,243,240,.20);
display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;
position:relative;z-index:1}
/* ============ 12. PAGES INTÉRIEURES ============ */
.page-hero{background:var(--stone-deep);padding:56px 0 52px;border-bottom:1px solid var(--line)}
/* L'eyebrow est en 12,5 px capitales espacées : sur le fond pierre foncé des heros
intérieurs, `--azur` tombait à 4,12:1, sous le seuil AA (mesuré sur les 7 pages).
`--azur-deep`, déjà dans la palette, remonte à 5,85:1 sans toucher à l'accent. */
.page-hero .eyebrow{color:var(--azur-deep)}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);max-width:20ch}
.page-hero p{color:var(--muted);margin-top:18px;max-width:56ch;font-size:17.5px}
.prose{padding:66px 0}
.prose h2{font-size:var(--fs-h2);margin:0 0 18px}
.prose h3{font-size:var(--fs-h3);margin:34px 0 10px}
.prose p{margin-bottom:16px;max-width:68ch;color:var(--ink)}
.prose p.note{color:var(--muted);font-size:15.5px}
.prose ul.liste{margin:14px 0 22px}
.prose ul.liste li{padding:11px 0 11px 26px;border-bottom:1px solid var(--line);position:relative;
max-width:68ch}
.prose ul.liste li::before{content:"";position:absolute;left:0;top:22px;width:14px;height:2px;
background:var(--azur)}
/* deux colonnes de faits (pages services) — section « cassée » */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:34px 0 8px;
border-top:3px solid var(--olive)}
.duo>div{padding:28px 30px 30px 0}
.duo>div+div{padding:28px 0 30px 30px;border-left:1px solid var(--line)}
.duo h3{margin:0 0 14px;font-size:1.2rem}
.duo li{padding:10px 0 10px 26px;border-bottom:1px solid var(--line);color:var(--muted);
position:relative}
.duo li::before{content:"";position:absolute;left:0;top:21px;width:14px;height:2px;
background:var(--azur)}
/* ---- section « cassée » de RÉNOVATION : question-réponse éditoriale ---- */
.qr{margin:36px 0 8px;border-top:3px solid var(--olive)}
.qr>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;
padding:26px 0 26px 22px;border-bottom:1px solid var(--line);position:relative}
/* La question porte un filet azur épais : sans lui, quatre lignes question/réponse
de même hauteur redeviennent quatre cellules de texte nu. */
.qr>div::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:3px;
background:var(--azur)}
.qr>div:nth-child(even)::before{background:var(--olive-soft)}
.qr h3{font-size:1.15rem;margin:0;color:var(--olive)}
.qr p{margin:0;color:var(--muted);max-width:58ch}
/* ---- section « cassée » de DÉPANNAGE : déroulé en aplats, sans numérotation ---- */
.deroule{margin:34px 0 0}
.deroule .etape{padding:34px 0;border-top:1px solid var(--line);
display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}
.deroule .etape:nth-child(2){background:var(--stone-deep)}
.deroule .etape:nth-child(2) .in{padding:0 24px}
.deroule h3{font-size:var(--fs-h3);margin:0}
.deroule p{color:var(--muted);max-width:58ch}
/* ---- section « cassée » d'ÉCLAIRAGE : séquence photo à tailles inégales ---- */
.sequence{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin:34px 0 10px;
align-items:start}
.sequence figure{margin:0}
.sequence figure:nth-child(1){grid-column:1 / span 7}
.sequence figure:nth-child(2){grid-column:8 / span 5;margin-top:44px}
/* ⚠️ La forme longue est OBLIGATOIRE : `grid-column:span 6` puis `grid-column-start:4`
écrase le start et laisse l'end à `auto` — la figure retombe sur UNE colonne (76 px).
Bug vécu, audit 2026-08-04 : invisible au rapport DOM (ni overflow, ni image cassée). */
.sequence figure:nth-child(3){grid-column:4 / span 6;margin-top:8px}
/* ⚠️ `height:auto` est OBLIGATOIRE : les portent width/height en attributs ;
sans height:auto, aucune des deux dimensions n'est `auto` et `aspect-ratio` est
IGNORÉ — l'image garde ses 900 px de haut et se retrouve écrasée en colonne. */
.sequence img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
outline:1px solid rgba(28,33,24,.10);outline-offset:-1px}
.sequence figcaption{font-size:14.5px;color:var(--muted);padding-top:10px;
border-top:2px solid var(--azur);margin-top:12px}
/* ---- cross-sell entre pages services ---- */
.aussi{border-top:2px solid var(--ink);margin-top:46px;padding-top:26px;
display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:36px;align-items:baseline}
.aussi h2{font-size:1.3rem}
.aussi ul{display:flex;flex-wrap:wrap;gap:12px}
.aussi a{display:inline-block;padding:11px 18px;background:var(--stone-deep);text-decoration:none;
font-family:var(--ff-title);font-weight:600;font-size:15.5px;border-radius:2px;
border-bottom:2px solid transparent;transition:border-color .16s var(--ease)}
.aussi a:hover{border-bottom-color:var(--azur)}
.illus{margin:30px 0 6px;position:relative}
/* `height:auto` obligatoire — cf. la note de `.sequence img` : sans lui les attributs
width/height du HTML neutralisent `aspect-ratio` et l'image sort en 1,26:1 (900 px
de haut) au lieu du 16:9 voulu. */
/* .bas : le sujet de la photo de dépannage (mécanisme déposé, conducteur repris) est
à ras du bord BAS. Un recadrage 16:9 centré le décapite. */
.illus img.bas{object-position:center bottom}
.illus img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
outline:1px solid rgba(28,33,24,.10);outline-offset:-1px}
.illus figcaption{font-size:14.5px;color:var(--muted);padding-top:10px}
/* Une légende suivie d'un titre de section se lisait comme le début de ce titre :
`.prose h2` a un margin-top nul, il ne restait que les 6 px de `.illus`. */
.illus + h2,.illus + h3{margin-top:54px}
/* ============ 13. FORMULAIRE ============ */
.form-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:52px;
align-items:start}
form.devis{display:grid;gap:16px}
form.devis .duo-champ{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{font-family:var(--ff-title);font-weight:600;font-size:14.5px;display:block;margin-bottom:6px}
input,select,textarea{width:100%;font-family:var(--ff-body);font-size:16px;padding:13px 14px;
border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);
transition:border-color .16s var(--ease)}
input:focus,select:focus,textarea:focus{border-color:var(--azur)}
textarea{min-height:130px;resize:vertical}
.form-note{color:var(--muted);font-size:14px}
.sent{background:#E7F1E4;border-left:3px solid var(--olive);padding:16px 18px;margin-bottom:22px;
display:none}
body[data-sent="1"] .sent{display:block}
/* Le téléphone est le premier levier de conversion d'une page contact : il est porté
en gros corps, pas aligné avec le reste. Filet azur de rappel sur chaque ligne. */
.coord{border-top:3px solid var(--olive)}
.coord li{padding:16px 0 16px 22px;border-bottom:1px solid var(--line);position:relative}
.coord li::before{content:"";position:absolute;left:0;top:24px;width:12px;height:2px;
background:var(--azur)}
.coord .k{font-family:var(--ff-body);font-weight:600;font-size:12.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}
.coord a{color:var(--azur);text-decoration:none;font-size:18px}
.coord li:first-child a{font-family:var(--ff-title);font-weight:700;
font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-.02em;line-height:1.1;display:inline-block}
.coord a:hover{text-decoration:underline}
/* ============ 14. RESPONSIVE ============ */
@media (max-width:1000px){
.faits-head,.presta-head{grid-template-columns:1fr;gap:16px}
.fait{grid-template-columns:1fr;gap:18px}
.fait .shot{max-width:none} /* plafonnee a 420 px, elle laissait 300 px de vide a 768 */
.bande{grid-template-columns:1fr}
.bande .visuel{min-height:240px;order:1!important}
.bande .texte{order:2!important;padding:34px 0 40px!important}
.impact .grid,.zone .grid,.form-grid{grid-template-columns:1fr;gap:32px}
.impact .cta-box{width:100%}
.ftr .grid{grid-template-columns:1fr 1fr}
/* La séquence photo n'avait AUCUNE règle responsive : sa grille de 12 colonnes
survivait jusqu'à 320 px et réduisait chaque photo à une bande verticale. */
.sequence{grid-template-columns:repeat(6,1fr)}
.sequence figure:nth-child(1){grid-column:1 / span 6}
.sequence figure:nth-child(2){grid-column:1 / span 4;margin-top:26px}
.sequence figure:nth-child(3){grid-column:3 / span 4;margin-top:26px}
}
@media (max-width:640px){
.sequence{grid-template-columns:1fr;gap:26px}
.sequence figure:nth-child(1),
.sequence figure:nth-child(2),
.sequence figure:nth-child(3){grid-column:1 / -1;margin-top:0}
}
@media (max-width:860px){
.nav{display:none}
.burger{display:flex}
/* La topbar passe sur deux lignes en mobile : le `gap:20px` du flex, prévu pour
l'écart HORIZONTAL en desktop, devenait 20 px de vide vertical entre la zone et
le téléphone. 77 px pour deux lignes de 14 px, au-dessus du hero. */
.topbar .wrap{gap:2px 20px;min-height:0;padding-top:7px;padding-bottom:7px}
.hero{min-height:0;display:block}
/* Hauteurs resserrées : avec 46vw de photo et 38 px de retrait, le bouton de devis
tombait 40 px SOUS la ligne de flottaison d'un écran de 844 px — le visiteur
arrivait sur un hero sans action visible. La bande photo garde les suspensions
et le rail de spots dans le champ (vérifié à 320, 375 et 390 px). */
.hero-photo{position:relative;height:54vw;min-height:260px;max-height:420px}
.hero .wrap{padding-top:0;padding-bottom:0}
.cartouche{width:100%;margin:0;padding:30px 24px 30px}
.cartouche .cta-row{margin-top:24px}
.cartouche::before{display:none}
}
@media (max-width:720px){
body{font-size:16px}
/* ⚠️ Même famille de défaut que `.sequence` : trois grilles à deux colonnes n'avaient
AUCUNE règle responsive et survivaient jusqu'à 320 px. La colonne de titre tombait
à ~100 px et coupait les mots (« Faut-/il tout/refaire ? », « Le/constat/sur/place »),
la colonne de texte à ~130 px sortait 15 lignes pour un paragraphe de 40 mots.
Invisible au rapport DOM : ni overflow, ni image cassée. */
.qr>div{grid-template-columns:1fr;gap:10px;padding-top:22px;padding-bottom:24px}
.deroule .etape{grid-template-columns:1fr;gap:12px;padding:26px 0}
.aussi{grid-template-columns:1fr;gap:18px;align-items:start}
.duo{grid-template-columns:1fr}
.duo>div+div{padding:24px 0 26px;border-left:0;border-top:1px solid var(--line)}
form.devis .duo-champ{grid-template-columns:1fr}
.ftr .grid{grid-template-columns:1fr;gap:30px}
.fait-cta{grid-template-columns:1fr}
.cta-row .btn{flex:1 1 100%}
}
@media (max-width:380px){
.mark{font-size:18px}
.topbar{font-size:13px}
}
/* ============ 15. MOUVEMENT RÉDUIT ============ */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important}
}
/* ============ 16. IMPRESSION ============ */
@media print{
.topbar,.hdr,.drawer,.impact,.ftr .grid{display:none}
body{background:#fff;font-size:12pt}
}