/* ═══════════════════════════════════════════════════════════════
   R2 ÉNERGIE & CONFORT — feuille de style
   Direction C « LE RAYON » (DESIGN.md §8)
   Motif signature : LE PAN PLEIN — une bande de couleur pleine qui
   porte le texte, borde une section ou en fait le fond. Structurel,
   jamais ornemental. Le texte des heros repose toujours sur un aplat
   de couleur, jamais sur la photo : contraste garanti par construction.
   ═══════════════════════════════════════════════════════════════ */

/* ── Polices auto-hébergées ─────────────────────────────────────
   Fichiers .woff2 IDENTIQUES à ceux servis par fonts.gstatic.com
   (Bricolage Grotesque v9, Work Sans v24), descripteurs @font-face
   recopiés tels quels depuis la réponse de l'API css2 : le rendu est
   inchangé au pixel près. Ce sont des polices VARIABLES — un seul
   fichier par sous-ensemble couvre 600+700 (titres) et 400+500+600
   (texte), d'où seulement 2 fichiers réellement téléchargés.
   Pourquoi : la requête bloquante vers fonts.googleapis.com était sur
   le chemin critique et sa latence de queue est incontrôlable (mesuré
   sur ce site : LCP de 468 ms à 2 908 ms, et un load à 30 s). En même
   origine + preload, la police arrive avec la CSS : LCP déterministe,
   aucun FOUT, cache immutable 1 an via _headers.
   Le sous-ensemble « latin » suffit au texte rendu (vérifié : aucun
   glyphe hors U+0000-00FF/Œœ/€/ponctuation) ; « latin-ext » est
   embarqué en filet de sécurité et n'est jamais téléchargé tant que
   le texte reste tel quel (unicode-range).
   ─────────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;
  font-stretch:100%;font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;
  font-stretch:100%;font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;
  font-stretch:100%;font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;
  font-stretch:100%;font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/work-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/work-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/work-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/work-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/work-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/work-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────── */
:root{
  --noir:#16130F;
  --noir-90:#211D18;
  --orange:#E4610D;
  --orange-fonce:#C4510A;
  --jaune:#F4B914;
  --papier:#FFFFFF;
  --surface:#F1F1EF;
  --encre-60:#5C564E;
  --ligne:#DCDAD5;
  --ligne-sombre:rgba(255,255,255,.18);

  --ff-titre:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --ff-texte:"Work Sans",system-ui,-apple-system,sans-serif;
  --fs-display:clamp(34px,5.2vw,68px);
  --fs-h2:clamp(26px,3.4vw,42px);
  --fs-h3:clamp(19px,1.9vw,23px);

  --wrap:1180px;
  --gutter:clamp(18px,4vw,44px);
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ff-texte);font-size:16px;line-height:1.6;
  color:var(--noir);background:var(--papier);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto est INDISPENSABLE : les attributs width/height du HTML sont des
   « presentational hints ». Sans height:auto, l'attribut height="900" fixe la
   hauteur en dur, `aspect-ratio` est ignoré (il ne s'applique que si l'une des
   deux dimensions est auto), et chaque photo était étirée à sa hauteur native
   — une 4:3 rendue en 462x900, soit une bande verticale ne montrant que 38 %
   de la largeur du sujet. Les images qui ont une hauteur imposée en CSS
   (.hero-photo, .bande img) gardent la leur : leur sélecteur est plus fort. */
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--ff-titre);margin:0;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
.tnum{font-feature-settings:'tnum';font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.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(--orange);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--noir);color:#fff;padding:12px 18px}
.skip:focus{left:8px;top:8px}

/* ── Éléments partagés ──────────────────────────────────────── */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);margin:0}
.eyebrow--sombre{color:var(--jaune)}
.lead{font-size:clamp(16px,1.3vw,18.5px);color:var(--encre-60);max-width:60ch}
.lead--sombre{color:rgba(255,255,255,.82)}

.btn{
  display:inline-block;font-family:var(--ff-texte);font-weight:600;font-size:15px;
  text-decoration:none;padding:15px 26px;border:0;cursor:pointer;
  transition:background-color 180ms ease-out,color 180ms ease-out,scale 120ms ease-out;
}
.btn:active{scale:.96}
.btn-noir{background:var(--noir);color:#fff}
.btn-noir:hover{background:var(--orange-fonce);color:#fff}
/* Texte NOIR sur l'orange, jamais blanc : blanc sur #E4610D ne donne que
   3,49:1 (mesuré) alors que le noir en donne 5,30. C'est aussi le traitement
   déjà employé partout ailleurs sur les aplats orange (pan du hero, bande CTA). */
.btn-orange{background:var(--orange);color:var(--noir)}
.btn-orange:hover{background:var(--noir);color:#fff}
.btn-blanc{background:#fff;color:var(--noir)}
.btn-blanc:hover{background:var(--jaune)}
.btn-ligne{background:transparent;color:var(--noir);box-shadow:inset 0 0 0 2px var(--noir)}
.btn-ligne:hover{background:var(--noir);color:#fff}

/* Le motif : le pan plein */
.pan-rule{display:block;height:8px;background:var(--orange)}
.pan-rule--jaune{background:var(--jaune)}
.pan-rule--noir{background:var(--noir)}
.pan-rule--court{width:64px}

/* ── Header ─────────────────────────────────────────────────── */
/* Wordmark à gauche, nav à droite, AUCUN bouton CTA : c'est ce qui
   casse le gabarit logo-gauche / nav-centrée / bouton-droite (9/9). */
.site-header{
  position:sticky;top:0;z-index:40;background:var(--papier);
  border-bottom:1px solid var(--ligne);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--header-h)}
.brandmark{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--ff-titre);font-weight:700;letter-spacing:-.025em;line-height:1;font-size:clamp(20px,2.1vw,25px)}
.brandmark img{height:52px;width:auto}
.brandmark .r2{color:var(--noir)}
.brandmark .rest{color:var(--orange);font-size:.86em}
.nav-desk{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.nav-desk a{text-decoration:none;font-size:14.5px;font-weight:500;padding:6px 0;transition:color 160ms ease-out}
.nav-desk a:hover{color:var(--orange)}
.nav-desk a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--orange)}
.nav-desk .tel{font-weight:600;white-space:nowrap}

/* Déroulant Prestations (nav groupée, jamais les services à plat) */
.nav-grp{position:relative}
.nav-grp > button{
  font-family:var(--ff-texte);font-size:14.5px;font-weight:500;background:none;border:0;
  padding:6px 0;cursor:pointer;color:inherit;display:inline-flex;align-items:center;gap:6px;
}
.nav-grp > button:hover{color:var(--orange)}
.nav-grp > button svg{transition:rotate 180ms ease-out}
.nav-grp[data-open="true"] > button svg{rotate:180deg}
.nav-drop{
  position:absolute;top:calc(100% + 10px);left:-16px;min-width:262px;background:var(--papier);
  box-shadow:0 1px 2px rgba(22,19,15,.08),0 14px 34px rgba(22,19,15,.16);
  padding:8px;display:none;border-top:4px solid var(--orange);
}
/* PASSERELLE DE SURVOL — sans elle, le menu se ferme dès qu'on bouge la souris.
   Les 10 px entre le bouton et le panneau n'appartiennent ni à l'un ni à l'autre :
   en descendant vers « Installation électrique », le pointeur sort de la boîte de
   .nav-grp (dont la hauteur s'arrête au bouton), `mouseleave` part, le menu se
   referme avant qu'on l'atteigne. Ce ::before prolonge la zone sensible du panneau
   vers le haut ; comme .nav-drop est un DESCENDANT de .nav-grp, le pointeur reste
   « à l'intérieur » et `mouseleave` ne se déclenche plus.
   Défaut signalé par Mourad sur 3 sites — voir mémoire feedback_menu_deroulant_trois_pieges. */
.nav-drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-grp[data-open="true"] .nav-drop{display:block}
.nav-drop a{display:block;padding:11px 14px;font-size:14.5px;text-decoration:none}
.nav-drop a:hover{background:var(--surface);color:var(--orange)}

/* Burger */
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px;width:44px;height:44px}
.burger span{display:block;width:22px;height:2px;background:var(--noir);margin:5px auto;transition:opacity 160ms ease-out}
/* Le tiroir est AU-DESSUS du header (z-index 60 > 40) : sans quoi le header
   sticky l'enferme et le bouton de fermeture devient inatteignable. */
.drawer{
  position:fixed;inset:0;z-index:60;background:var(--papier);
  display:flex;flex-direction:column;padding:20px var(--gutter) 40px;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity 200ms ease-out,transform 200ms ease-out;
  overflow-y:auto;
}
.drawer[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
.drawer-top{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);margin-bottom:14px}
.drawer-close{background:none;border:0;cursor:pointer;font-size:30px;line-height:1;width:44px;height:44px;color:var(--noir)}
.drawer nav a{display:block;padding:14px 0;font-family:var(--ff-titre);font-weight:600;font-size:21px;text-decoration:none;border-bottom:1px solid var(--ligne)}
/* Sans intitulé, les 4 prestations pendaient sous « Accueil » et se lisaient
   comme ses sous-pages. La nav reste groupée (jamais les services à plat). */
.drawer .sub-titre{font-family:var(--ff-titre);font-weight:600;font-size:21px;padding:14px 0 0;margin:0}
.drawer .sub a{font-family:var(--ff-texte);font-weight:500;font-size:16px;padding:11px 0 11px 18px;color:var(--encre-60);border-bottom:1px solid var(--ligne)}
.drawer .drawer-cta{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.drawer .drawer-cta .btn{text-align:center}

@media(max-width:960px){
  .nav-desk{display:none}
  .burger{display:block}
}

/* ── Hero « LE RAYON » ──────────────────────────────────────── */
/* Bande photo SANS texte + pan de couleur calé à droite qui la chevauche. */
.hero{position:relative}
/* Plancher à 280px et non 320 : sur un écran de 375x667, la bande photo à
   320px repoussait le bouton du hero 25px SOUS la ligne de flottaison. Ne
   change rien au-dessus de 583px de large (48vw reprend la main). */
.hero-photo{width:100%;height:clamp(280px,48vw,520px);object-fit:cover;object-position:center 42%}
.hero-pan{background:var(--orange);color:var(--noir);padding:clamp(24px,3.4vw,42px)}
.hero-pan .eyebrow{color:var(--noir);opacity:.9}
.hero-pan h1{font-size:clamp(29px,4vw,50px);font-weight:700;margin:12px 0 16px}
.hero-pan .lead{color:rgba(22,19,15,.88);max-width:44ch}
.hero-pan .btn{margin-top:22px}
.hero-pan .tel{display:block;margin-top:16px;font-family:var(--ff-titre);font-weight:700;font-size:clamp(20px,2.2vw,26px);text-decoration:none;letter-spacing:-.02em}
.hero-pan .tel:hover{color:#fff}
/* .8 ne donnait que 4,13:1 à 13,5px sur l'orange ; le noir plein en donne 5,30. */
.hero-note{margin-top:14px;font-size:13.5px;color:var(--noir)}

/* Variante de page intérieure : pan plus court, bande plus basse */
.hero--page .hero-photo{height:clamp(230px,30vw,360px)}
.hero--page .hero-pan h1{font-size:clamp(26px,3.4vw,42px)}

/* Variante « pan seul » des pages service : aplat noir, pas de photo.
   Le motif y est à son échelle la plus lisible, et la photo hero reste
   réservée à l'accueil (hiérarchie voulue, cf. DESIGN.md §9). */
.hero--pan{background:var(--noir);padding:clamp(34px,4.6vw,62px) 0 clamp(48px,5.4vw,76px);margin-bottom:0}
.hero--pan .hero-pan{
  width:min(100%,780px);position:relative;
  transform:none;margin:0;align-self:auto;justify-self:auto;
}
.hero--pan .hero-pan::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;background:var(--jaune)}
.hero--pan .hero-pan h1{font-size:clamp(27px,3.6vw,44px)}

/* Bande photo pleine largeur des pages service */
.bande{margin:0;position:relative}
.bande img{width:100%;height:clamp(200px,26vw,320px);object-fit:cover;object-position:center 45%}
.bande figcaption{
  position:absolute;left:0;bottom:0;background:var(--noir);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:9px 18px;
}

@media(min-width:961px){
  /* La photo est sortie du flux pour occuper EXACTEMENT la hauteur du hero.
     En flux, elle restait à la hauteur de la bande (380px sur les pages
     intérieures) pendant que le pan en mesurait 610 : le pan retombait alors
     276px dans le vide blanc sous la photo, et flottait sans support. Hors
     flux, la hauteur du hero est donnée par le pan et le débord du pan vaut
     toujours son seul translateY (46px), sur l'accueil comme ailleurs. */
  .hero{display:grid;grid-template-columns:1fr;margin-bottom:clamp(40px,5vw,68px);min-height:clamp(340px,42vw,500px)}
  /* Le second sélecteur est obligatoire : `.hero--page .hero-photo` de la
     section précédente est plus spécifique et rendait le height:100% inopérant
     sur les pages intérieures — la panne exacte du débord de 276px. */
  .hero-photo,.hero--page .hero-photo{grid-area:1/1;position:absolute;inset:0;width:100%;height:100%;min-height:0}
  .hero-pan{
    grid-area:1/1;justify-self:end;align-self:end;width:min(40%,450px);
    transform:translateY(clamp(26px,3.4vw,46px));margin-right:var(--gutter);
    position:relative; /* repasse au-dessus de la photo, elle-même positionnée */
  }
  .hero--page{min-height:clamp(260px,30vw,380px)}
  .hero--pan{min-height:0}
}
@media(max-width:960px){
  .hero{margin-bottom:clamp(30px,5vw,44px)}
}

/* ── Sections ───────────────────────────────────────────────── */
.sec{padding:clamp(46px,6.4vw,86px) 0}
.sec--surface{background:var(--surface)}
.sec--noir{background:var(--noir);color:#fff}
.sec--noir h2,.sec--noir h3{color:#fff}
.sec-head{max-width:62ch;margin-bottom:clamp(26px,3.4vw,42px)}
.sec-head h2{font-size:var(--fs-h2);font-weight:700;margin:14px 0 14px}
.sec-head .pan-rule{margin-bottom:0}

/* Prestations de l'accueil : composition volontairement inégale.
   Ni grille de cartes, ni liste-tableau à vignettes (interdits §4). */
.presta-large{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,38px);align-items:center;padding:clamp(26px,3.4vw,40px) 0;border-top:1px solid var(--ligne)}
.presta-large:first-of-type{border-top:0}
.presta-large h3{font-size:clamp(23px,2.8vw,34px);font-weight:700;margin:12px 0 12px}
.presta-large p{color:var(--encre-60);max-width:52ch}
.presta-large img{width:100%;aspect-ratio:4/3;object-fit:cover;outline:1px solid rgba(22,19,15,.08);outline-offset:-1px}
.presta-lien{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-weight:600;font-size:15px;text-decoration:none;color:var(--noir)}
/* scaleX plutôt que width : la largeur déclenche un calcul de mise en page à
   chaque image, transform reste sur le compositeur (règle animations §10). */
.presta-lien span.arw{display:block;width:22px;height:3px;background:var(--orange);transform-origin:left center;transition:transform 180ms ease-out}
.presta-lien:hover span.arw{transform:scaleX(1.73)}
.presta-paire{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,38px);padding:clamp(26px,3.4vw,40px) 0;border-top:1px solid var(--ligne)}
.presta-paire > div{padding-left:20px;border-left:8px solid var(--orange)}
.presta-paire > div:nth-child(2){border-left-color:var(--jaune)}
.presta-paire h3{font-size:var(--fs-h3);font-weight:600;margin-bottom:10px}
.presta-paire p{color:var(--encre-60)}

@media(min-width:821px){
  .presta-large{grid-template-columns:minmax(0,1fr) minmax(0,.78fr)}
  .presta-large--inverse{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}
  .presta-large--inverse .presta-txt{order:2}
  .presta-large--inverse .presta-img{order:1}
  .presta-paire{grid-template-columns:1fr 1fr}
}

/* Zone d'intervention : carte DESSINÉE (géographie = motif autorisé).
   Ni photo de paysage arrondie, ni nuage de pastilles de villes (interdit §4-14). */
.zone-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,54px);align-items:center}
.zone-carte{width:100%;height:auto}
.zone-liste{columns:2;column-gap:26px;font-size:14.5px;color:rgba(255,255,255,.8)}
.zone-liste li{padding:5px 0;break-inside:avoid}
.zone-liste li::before{content:"";display:inline-block;width:10px;height:3px;background:var(--jaune);margin-right:10px;vertical-align:middle}
@media(min-width:821px){
  .zone-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}

/* Engagements : colonnes inégales séparées par des pans. Sans icône.
   Le bloc est posé sur --surface (fond CLAIR) : texte et 3e pan doivent être
   sombres. Ils étaient en blanc (hérités d'une version sur bande noire), donc
   invisibles — contraste mesuré 1,10 sur 4,5 exigé. */
.engagements{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,38px)}
.engagements > div{padding-top:22px;border-top:8px solid var(--orange)}
.engagements > div:nth-child(2){border-top-color:var(--jaune)}
.engagements > div:nth-child(3){border-top-color:var(--noir)}
.engagements h3{font-size:var(--fs-h3);font-weight:600;margin-bottom:10px}
.engagements p{color:var(--encre-60);font-size:15px}
.sec--noir .engagements > div:nth-child(3){border-top-color:#fff}
.sec--noir .engagements p{color:rgba(255,255,255,.82)}
@media(min-width:821px){
  .engagements{grid-template-columns:1.15fr 1fr .9fr}
}

/* Bloc matière (à propos) */
.matiere{display:grid;grid-template-columns:1fr;gap:clamp(24px,3.6vw,48px);align-items:center}
/* Resserrage du cadre SANS toucher au fichier : le master 900² laisse plus de
   la moitié du carré en flou beige et le câble tombe petit, dans l'angle bas
   gauche. Le conteneur clippe, l'image est agrandie de 1,36 autour du sujet :
   fenêtre visible = x 60→720, y 200→860 du master. object-fit n'y suffit pas
   (source et boîte ont le même ratio 1:1, donc cover ne recadre rien). */
.matiere > div:first-child{overflow:hidden}
.matiere img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transform:scale(1.36);transform-origin:25% 83%}
@media(min-width:821px){.matiere{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}}

/* Tableau de faits — remplace le trio « 3 avantages + icônes » sur les pages service */
.faits{display:grid;grid-template-columns:1fr;gap:0;border-top:2px solid var(--noir)}
.faits > div{display:grid;grid-template-columns:1fr;gap:6px 26px;padding:18px 0;border-bottom:1px solid var(--ligne)}
.faits dt{font-family:var(--ff-titre);font-weight:600;font-size:17px}
.faits dd{margin:0;color:var(--encre-60);font-size:15.5px}
@media(min-width:721px){
  .faits > div{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
}

/* Cross-sell entre pages service */
.cross{display:grid;grid-template-columns:1fr;gap:2px;background:var(--ligne)}
.cross a{display:block;background:var(--papier);padding:22px;text-decoration:none;transition:background-color 180ms ease-out}
.cross a:hover{background:var(--surface)}
.cross a strong{display:block;font-family:var(--ff-titre);font-size:17px;font-weight:600;margin-top:10px}
.cross a .pan-rule{width:44px;height:6px}
@media(min-width:641px){.cross{grid-template-columns:repeat(3,1fr)}}

/* Bande CTA */
.cta-band{background:var(--orange);color:var(--noir);padding:clamp(38px,5vw,64px) 0}
.cta-band h2{font-size:var(--fs-h2);font-weight:700;max-width:22ch;margin-bottom:14px}
.cta-band p{color:rgba(22,19,15,.86);max-width:54ch;margin-bottom:24px}
.cta-band .row{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.cta-band .tel{font-family:var(--ff-titre);font-weight:700;font-size:clamp(21px,2.2vw,27px);text-decoration:none;letter-spacing:-.02em}

/* ── Formulaire ─────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,56px);align-items:start}
@media(min-width:881px){.contact-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.form{display:grid;gap:16px}
.form .duo{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:561px){.form .duo{grid-template-columns:1fr 1fr}}
.form label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.form input,.form select,.form textarea{
  width:100%;font-family:var(--ff-texte);font-size:16px;color:var(--noir);
  padding:13px 14px;border:1px solid var(--ligne);background:var(--papier);border-radius:0;
  transition:border-color 160ms ease-out;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--orange);outline:2px solid rgba(228,97,13,.28);outline-offset:0}
.form textarea{min-height:132px;resize:vertical}
/* L'astérisque est petit (13,5px) : l'orange vif n'y tient que 3,49:1. */
.form .req{color:var(--orange-fonce)}
.form-note{font-size:13px;color:var(--encre-60)}
.coord{display:grid;gap:2px;background:var(--ligne);margin-bottom:26px}
.coord > div{background:var(--surface);padding:18px 20px}
.coord dt{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-60);margin-bottom:6px}
.coord dd{margin:0;font-family:var(--ff-titre);font-weight:600;font-size:19px}
.coord a{text-decoration:none}
.coord a:hover{color:var(--orange)}

/* ── Contenu éditorial (pages service, à propos, mentions) ──── */
.prose{max-width:70ch}
.prose h2{font-size:var(--fs-h2);font-weight:700;margin:0 0 16px}
.prose h3{font-size:var(--fs-h3);font-weight:600;margin:32px 0 10px}
.prose p{margin-bottom:16px;color:var(--encre-60)}
.prose p strong{color:var(--noir)}
.prose ul{margin:0 0 20px}
.prose ul li{padding:9px 0 9px 26px;position:relative;color:var(--encre-60);border-bottom:1px solid var(--ligne)}
.prose ul li::before{content:"";position:absolute;left:0;top:18px;width:12px;height:3px;background:var(--orange)}
.prose a{color:var(--noir);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}

.duo-media{display:grid;grid-template-columns:1fr;gap:clamp(24px,3.4vw,44px);align-items:center}
.duo-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
/* Éclairage : la photo est un 4/3 dont la rampe de spots sur rail tient dans les
   6 % du haut. Le cadre 3/2 de .duo-media rogne 5,6 % en haut et 5,6 % en bas :
   centré, il supprimait la rampe et il ne restait qu'une cuisine équipée — la
   photo cessait de parler d'électricité. Calé en haut, c'est le parquet qui part
   et l'éclairage reste dans le cadre (règle ciblée : les autres pages service
   n'ont pas leur sujet en haut de cadre). */
.duo-media img[src*="accueil-eclairage"]{object-position:50% 0}
@media(min-width:821px){.duo-media{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}}

/* ── Pied de page ───────────────────────────────────────────── */
.site-footer{background:var(--noir);color:rgba(255,255,255,.72);padding:clamp(40px,5vw,64px) 0 26px;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,44px)}
@media(min-width:781px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
.site-footer .brandmark{color:#fff;margin-bottom:14px}
.site-footer .brandmark .r2{color:#fff}
.site-footer .brandmark .rest{color:var(--jaune)}
.site-footer .logo-footer{max-width:300px;height:auto;margin-bottom:18px}
.site-footer h4{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--jaune);margin-bottom:14px}
.site-footer a{color:rgba(255,255,255,.8);text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer li{padding:5px 0}
.footer-bas{margin-top:clamp(30px,4vw,48px);padding-top:20px;border-top:1px solid var(--ligne-sombre);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.55)}

/* ── Animations (liste fermée, DESIGN.md §10) ─────────────────
   Durée ramenée sous les 300 ms exigés par le contrat design. */
.enter{animation:enter 260ms cubic-bezier(.2,0,0,1) both}
.enter-2{animation-delay:90ms}
.enter-3{animation-delay:180ms}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}