/* =========================================================
   Thermeo - feuille de style unique
   Palette bleu nuit / cuivre, d'apres la maquette du 03/09/2026.
   ========================================================= */

:root{
  --nuit:#08131d;
  --nuit-2:#0b1823;
  --nuit-3:#0f1c27;
  --nuit-4:#060f17;
  --carte:rgba(255,255,255,.022);
  --carte-bord:rgba(224,155,108,.22);
  --cuivre:#e09b6c;
  --cuivre-clair:#f3c39c;
  --cuivre-ico:#dd9b70;
  --cuivre-sombre:#a8683d;
  --texte:#f2f5f7;
  --texte-doux:#aeb7bf;
  --texte-faible:#71808c;
  --ligne:rgba(255,255,255,.09);
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:1424px;
  --pad:clamp(1.25rem,2.6vw,2.4rem);
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--nuit);
  color:var(--texte);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:var(--sans);margin:0;line-height:1.15;font-weight:700;letter-spacing:-.015em}
p{margin:0}

::selection{background:var(--cuivre);color:#0d1c26}

:focus-visible{outline:2px solid var(--cuivre-clair);outline-offset:3px}

.contenu{width:100%;max-width:var(--max);margin-inline:auto;padding-inline: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}
a.sr-only:focus{
  position:fixed;top:.7rem;left:.7rem;z-index:99;width:auto;height:auto;
  clip:auto;margin:0;padding:.8rem 1.2rem;background:var(--cuivre);color:#0d1c26;font-weight:600;
}

/* ---------- vocabulaire commun ---------- */

.surtitre{
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cuivre);font-weight:600;margin:0 0 1.1rem;
}

.titre-section{font-size:clamp(1.9rem,3.4vw,2.85rem);margin:0 0 1.1rem;letter-spacing:-.02em}
.chapeau{color:var(--texte-doux);font-size:1.03rem;max-width:60ch}

.filet{width:84px;height:2px;background:var(--cuivre);margin:0 0 1.5rem;border-radius:2px}

section{position:relative}

.section{padding-block:clamp(3.6rem,7.5vw,6.6rem)}
.section--sombre{background:var(--nuit-2)}

.entete-section{margin-bottom:clamp(2.2rem,4.5vw,3.6rem);max-width:70ch}
.entete-section--centre{margin-inline:auto;text-align:center}
.entete-section--centre .filet{margin-inline:auto}
.entete-section--centre .chapeau{margin-inline:auto}

/* ---------- boutons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.85rem;
  font-family:var(--sans);font-size:.8rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  padding:1.05rem 1.9rem;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn svg{width:17px;height:17px;flex-shrink:0;transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}

.btn--cuivre{
  background:linear-gradient(100deg,#c9855c 0%,#e9b286 55%,#f0c096 100%);
  color:#14232e;border-color:rgba(255,255,255,.12);
}
.btn--cuivre:hover{background:linear-gradient(100deg,#d99366,#f4c39a 55%,#f8d0ac);transform:translateY(-1px)}

.btn--contour{background:rgba(255,255,255,.02);color:var(--texte);border-color:rgba(255,255,255,.28)}
.btn--contour:hover{border-color:var(--cuivre);color:var(--cuivre-clair)}

.btn--large{width:100%}

/* lien texte fleche, comme les cartes de service */
.lien-fleche{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cuivre);transition:color .22s;
}
.lien-fleche svg{width:18px;height:18px;transition:transform .25s}
.lien-fleche:hover{color:var(--cuivre-clair)}
.lien-fleche:hover svg{transform:translateX(5px)}

/* ---------- en-tete ---------- */

.entete{
  position:fixed;inset:0 0 auto;z-index:60;
  background:rgba(8,19,29,0);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.entete.est-collee{
  background:rgba(8,19,29,.93);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--ligne);
}
.entete__barre{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:104px;
}

.marque{display:flex;align-items:center;gap:.95rem}
.marque__logo{display:block;flex-shrink:0;line-height:0}
.marque__logo img{width:42px;height:58px}
.marque__mots{display:block}
.marque__nom{
  display:block;font-size:1.55rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;line-height:1;
}
/* 11 px et non .66rem : le plancher de 11 px vaut a TOUTES les largeurs, pas
   seulement dans le bloc de reduction. Mesure a 1440 px avant correction :
   10,56 px reels. */
.marque__metier{
  display:block;margin-top:.5rem;font-size:11px;font-weight:600;letter-spacing:.235em;
  text-transform:uppercase;color:var(--cuivre);line-height:1;
}
/* Dans l'EN-TETE seulement, le libelle du metier reste sur une ligne, comme
   sur la maquette, et la marque ne se laisse pas comprimer par la barre flex.
   Mesure avant correction : « PLOMBERIE - CHAUFFAGE » passait sur deux lignes
   (hauteur 21,1 px au lieu de 10,6) de 1041 a 1130 px et de 1181 a 1270 px.
   Surtout pas porte au pied de page : la colonne de marque y vaut 107 px a
   375 px, ou le libelle DOIT se replier (mesure : 158 px sans repli). */
.entete .marque{flex-shrink:0}
.entete .marque__metier{white-space:nowrap}

.nav{display:flex;align-items:center;gap:clamp(1.4rem,2.7vw,2.9rem)}
/* white-space:nowrap : sans lui, la barre flex comprime les liens et « A
   propos » comme « Avis clients » se coupent en deux lignes des que la place
   manque, alors que les quatre autres restent sur une ligne. La rangee de six
   libelles de la maquette reste une rangee de six libelles d'une ligne ; ce
   qui se reduit, c'est la taille et la gouttiere (bloc <= 1280 px ci-dessous). */
.nav a{
  font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texte);padding-block:.5rem;position:relative;transition:color .22s;
  white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:var(--cuivre);transform:scaleX(0);transform-origin:left;transition:transform .28s;
}
.nav a:hover{color:var(--cuivre-clair)}
.nav a[aria-current="page"]{color:var(--cuivre)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.bloc-tel{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r);
  padding:.85rem 1.5rem;background:rgba(8,19,29,.35);
  transition:border-color .25s,background .25s;
}
.bloc-tel:hover{border-color:var(--cuivre);background:rgba(224,155,108,.07)}
.bloc-tel__num{
  display:flex;align-items:center;gap:.6rem;
  font-size:1.28rem;font-weight:600;letter-spacing:.02em;color:var(--cuivre);white-space:nowrap;
}
.bloc-tel__num svg{width:19px;height:19px;flex-shrink:0}
/* 11 px : mesure a 1440 px avant correction, 10,88 px reels. */
.bloc-tel__mention{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texte-doux);white-space:nowrap;
}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--texte)}
.burger svg{width:26px;height:26px}

@media (max-width:1180px){
  .nav{gap:1.3rem}
  .nav a{font-size:.74rem}
  .marque__nom{font-size:1.3rem}
}
@media (max-width:1040px){
  .nav,.bloc-tel{display:none}
  .burger{display:block}
  .entete{background:rgba(8,19,29,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--ligne)}
  .entete__barre{min-height:84px}
}

/* menu mobile */
/* Ferme, le menu sort de l'ecran par une translation ET passe en
   visibility:hidden : sans cela ses liens restent focusables au clavier alors
   qu'ils sont invisibles et que le bloc porte aria-hidden="true". La
   visibilite bascule sans duree, retardee de la duree de la translation a la
   fermeture, pour ne pas couper l'animation. */
.menu-mobile{
  position:fixed;inset:0;z-index:70;background:var(--nuit);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad);overflow-y:auto;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .4s cubic-bezier(.7,0,.2,1),visibility 0s linear .4s;
}
.menu-mobile[data-ouvert="true"]{
  transform:translateY(0);visibility:visible;
  transition:transform .4s cubic-bezier(.7,0,.2,1),visibility 0s linear 0s;
}
.menu-mobile__fermer{
  position:absolute;top:20px;right:var(--pad);
  background:none;border:0;color:var(--texte);cursor:pointer;padding:.5rem;
}
.menu-mobile__fermer svg{width:28px;height:28px}
.menu-mobile nav{display:flex;flex-direction:column}
.menu-mobile nav a{
  font-size:1.55rem;font-weight:600;padding-block:.7rem;
  border-bottom:1px solid var(--ligne);
}
.menu-mobile nav a:last-child{border-bottom:0}
.menu-mobile .btn{margin-top:2rem}
.menu-mobile__tel{
  margin-top:1.4rem;display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:1.15rem;font-weight:600;color:var(--cuivre);
}
.menu-mobile__tel svg{width:18px;height:18px}

/* ---------- heros ---------- */

.heros{
  position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:max(660px,94svh);padding-top:104px;padding-bottom:clamp(9rem,15vw,13rem);
}
.heros__image{position:absolute;inset:0;z-index:0}
.heros__image img{width:100%;height:100%;object-fit:cover;object-position:56% 42%}
.heros__voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(8,19,29,.97) 0%,rgba(8,19,29,.93) 26%,rgba(8,19,29,.55) 48%,rgba(8,19,29,.12) 68%,rgba(8,19,29,.05) 100%),
    linear-gradient(0deg,rgba(8,19,29,.92) 0%,rgba(8,19,29,.15) 26%,rgba(8,19,29,0) 50%),
    linear-gradient(180deg,rgba(8,19,29,.75) 0%,rgba(8,19,29,0) 22%);
}

.heros__contenu{position:relative;z-index:2;width:100%}
.heros__texte{max-width:min(47rem,56vw)}

.heros h1{
  font-size:clamp(2.35rem,4.5vw,4.25rem);line-height:1.03;letter-spacing:-.03em;
  margin:0 0 1.5rem;font-weight:700;max-width:min(36rem,42vw);
}
/* Les trois lignes du titre sont celles de la maquette : le mot cuivre y est
   seul sur sa ligne. La coupe est la MEME a toutes les largeurs, telephone
   compris : c'est la composition de la maquette, reduite, pas un autre titre.
   Voir le bloc de reduction en fin de feuille pour la taille correspondante. */
.heros h1 .ligne,.heros h1 .chaud{display:block}
.heros h1 .chaud{
  color:var(--cuivre);
  background:linear-gradient(96deg,#c07f52 0%,#e5a578 42%,#f6cfa9 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .heros h1 .chaud{-webkit-text-fill-color:currentColor;background:none}
}

.heros__accroche{
  color:var(--texte-doux);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.55;
  max-width:min(25rem,32vw);margin-bottom:2.4rem;
}

.heros__reperes{
  list-style:none;margin:0 0 2.6rem;padding:0;
  display:flex;flex-wrap:wrap;gap:1.3rem clamp(1.5rem,2.6vw,2.6rem);
}
.heros__reperes li{display:flex;align-items:flex-start;gap:.85rem}
.heros__reperes svg{width:26px;height:26px;color:var(--cuivre);flex-shrink:0;margin-top:.05rem}
.heros__reperes strong{
  display:block;font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cuivre);margin-bottom:.3rem;
}
.heros__reperes span{display:block;font-size:.93rem;color:var(--texte)}

.heros__actions{display:flex;flex-wrap:wrap;gap:1rem 1.5rem}

/* La colonne de texte garde sa largeur relative (56vw) et le titre la sienne
   (42vw) : elles sont deja en vw, elles se reduisent toutes seules. Les
   elargir ici reorganiserait la composition au lieu de la mettre a l'echelle. */
@media (max-width:1040px){
  .heros{padding-top:84px;min-height:max(600px,88svh)}
}

/* ---- 1041 a 1280 px : la bande ou la composition se defaisait ----
   Ce bloc doit rester ICI, apres les regles de base du heros et apres le
   @media 1180 px, et AVANT le bloc de reduction : a specificite egale c'est
   le dernier qui gagne, et la reduction (<= 1040) doit garder le dernier mot.

   1) La rangee de TROIS reperes du heros se repliait en 2 + 1 sur toute cette
      bande. Mesures : la ligne demande 711,13 px et la colonne en offre
      711,19 a 1270 px (ca passe), puis 710,61 px demandes contre 705,59
      offerts a 1260 px, soit 5,02 px de trop, et l'ecart se creuse jusqu'a
      699,23 contre 582,95 a 1041 px. En grille de trois colonnes la rangee
      reste une rangee de trois, comme sur la maquette et comme sous 1040 px.
      minmax(0,1fr) : sans lui « Zone d'intervention » impose sa largeur a sa
      colonne et pousse la grille hors du bloc de texte.
      L'icone reste A GAUCHE du texte ici, contrairement au bloc de reduction :
      a 1041 px la colonne vaut 176 px, l'icone et sa gouttiere en prennent 39,
      il en reste 137 pour un texte qui n'en demande que 95. Rien ne justifie
      de la passer au-dessus avant 1040 px.

   2) L'en-tete : les six libelles de la navigation et le libelle du metier
      tiennent chacun sur une ligne (voir .nav a plus haut). Ce qui se reduit,
      c'est la taille et les gouttieres, pas le nombre de lignes. Verifie de
      1041 a 1280 px : aucun libelle sur deux lignes, et le bloc telephone
      s'arrete pile sur le bord interieur de la barre (1013,9 px pour un
      bord a 1013,93 px a 1041 px). Le plancher de 11 px est atteint a
      1158 px et tient jusqu'a 1041. */
@media (max-width:1280px){
  .heros__reperes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .heros__reperes li{min-width:0}
  .heros__reperes li>div{min-width:0}

  .entete__barre{gap:clamp(.75rem,1.5vw,1.5rem)}
  .entete .marque__metier{letter-spacing:.16em}
  .nav{gap:clamp(.62rem,1.35vw,1.4rem)}
  .nav a{font-size:clamp(11px,.95vw,12.8px)}
  .bloc-tel{padding:clamp(.5rem,.85vw,.85rem) clamp(.7rem,1.5vw,1.5rem)}
  .bloc-tel__num{font-size:clamp(14px,1.28vw,20.5px)}
  .bloc-tel__num svg{width:clamp(14px,1.48vw,19px);height:clamp(14px,1.48vw,19px)}
}

/* ---------- bande des cartes de service ---------- */

.cartes{position:relative;z-index:5;margin-top:clamp(-11rem,-13vw,-5rem)}
.cartes__grille{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.88fr);
  background:rgba(15,28,39,.93);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--ligne);border-radius:var(--r);
  box-shadow:0 30px 70px rgba(3,8,13,.5);
  overflow:hidden;
}
.carte-service{
  display:flex;gap:1.3rem;padding:2.4rem 1.6rem 2.2rem;
  border-right:1px solid var(--ligne);transition:background .3s;
}
.carte-service:hover{background:rgba(255,255,255,.028)}
.carte-service__ico{width:52px;height:60px;color:var(--cuivre-ico);flex-shrink:0}
.carte-service__corps{display:flex;flex-direction:column;min-width:0;flex:1}
.carte-service h3{
  font-size:1.06rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:#fff;margin:0 0 .9rem;line-height:1.3;
}
.carte-service p{color:var(--texte-doux);font-size:.9rem;line-height:1.55;margin-bottom:1.7rem}
.carte-service .lien-fleche{margin-top:auto;align-self:flex-start}

.carte-devis{
  background:var(--nuit-4);padding:2.4rem 1.7rem 2.2rem;
  display:flex;flex-direction:column;
}
.carte-devis__ico{width:44px;height:44px;color:var(--cuivre);margin-bottom:1.5rem}
.carte-devis p{font-size:1.12rem;line-height:1.45;color:var(--texte);font-weight:500;margin-bottom:1.9rem}
.carte-devis .lien-fleche{margin-top:auto;align-self:flex-start}

/* La rangee de cinq reste une rangee de cinq a toutes les largeurs. Seule
   l'icone passe AU-DESSUS du texte : a cinq colonnes sous 1240 px, l'icone a
   gauche ne laisse que 78 px au corps de la carte, ou le mot PLOMBERIE
   (105 px a 16,96 px) ne tient pas. Mesure faite a 1041 px. */
@media (max-width:1240px){
  .carte-service{flex-direction:column;gap:1.1rem}
  .carte-service__ico{width:44px;height:51px}
}

/* ---------- bande des reperes ---------- */

.bande{padding-block:clamp(2.2rem,4vw,3.2rem)}
.bande__ligne{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem);justify-content:center}
.bande__trait{flex:1;max-width:200px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),var(--ligne))}
.bande__trait:last-child{background:linear-gradient(90deg,var(--ligne),rgba(255,255,255,0))}
.bande__ico{width:30px;height:30px;color:var(--cuivre);flex-shrink:0}
.bande__mots{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.6rem clamp(.9rem,1.8vw,1.5rem);
  font-size:.78rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--texte-doux);text-align:center;
}
.bande__mots i{width:5px;height:5px;border-radius:50%;background:var(--cuivre);display:block;flex-shrink:0}

/* ---------- reserves d'image ---------- */
/* Bloc d'attente aux dimensions exactes de la photo a venir : la page garde sa
   composition tant que l'image n'existe pas. Voir A-COMPLETER.md. */

/* align-content:center est indispensable : sans lui les deux lignes de la
   grille s'etirent sur toute la hauteur, le gap ne se voit pas et le
   pictogramme et son libelle se retrouvent au quart et aux trois quarts du
   bloc au lieu d'etre groupes en son centre. */
.reserve{
  position:relative;display:grid;place-items:center;align-content:center;gap:.7rem;
  background:
    linear-gradient(135deg,rgba(224,155,108,.07),rgba(224,155,108,0) 55%),
    var(--nuit-3);
  border:1px dashed rgba(224,155,108,.32);border-radius:var(--r);
  color:var(--texte-faible);text-align:center;padding:1.2rem;overflow:hidden;
}
.reserve::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 12px,rgba(255,255,255,0) 12px 24px);
}
.reserve svg{width:30px;height:30px;color:rgba(224,155,108,.55)}
/* 11 px : mesure a 1440 px avant correction, 10,56 px reels. Le bloc de
   reduction remontait deja ce libelle a 11 px sous 1040 px ; il descendait
   donc sous le plancher sur grand ecran seulement. */
.reserve span{
  font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  max-width:22ch;line-height:1.5;
}

/* ---------- services detailles ---------- */

.services__grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,2.4vw,2.2rem)}
.service{
  display:flex;flex-direction:column;
  border:1px solid var(--ligne);border-radius:var(--r);background:var(--carte);
  overflow:hidden;transition:border-color .3s,transform .3s;
}
.service:hover{border-color:var(--carte-bord);transform:translateY(-3px)}
.service__visuel{aspect-ratio:16/10;width:100%}
.service__corps{padding:clamp(1.5rem,2.4vw,2.1rem);display:flex;flex-direction:column;flex:1}
.service__tete{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.service__tete svg{width:34px;height:38px;color:var(--cuivre);flex-shrink:0}
.service h3{font-size:1.35rem;letter-spacing:-.01em}
.service p{color:var(--texte-doux);font-size:.97rem;margin-bottom:1.4rem}
.service ul{list-style:none;margin:0 0 1.7rem;padding:0;display:grid;gap:.7rem}
.service li{display:flex;gap:.75rem;align-items:flex-start;font-size:.93rem;color:var(--texte-doux)}
.service li svg{width:17px;height:17px;color:var(--cuivre);flex-shrink:0;margin-top:.25rem}
.service .lien-fleche{margin-top:auto;align-self:flex-start}

/* ---------- realisations ---------- */

.realisations__grille{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem,2vw,1.8rem);
}

.realisation h3{
  font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cuivre);margin-bottom:.85rem;
}
.realisation .reserve{aspect-ratio:4/3}

/* ---------- a propos ---------- */

.apropos{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.apropos .reserve{aspect-ratio:4/5}
.apropos__liste{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.3rem}
.apropos__liste li{display:flex;gap:1.1rem;align-items:flex-start}
.apropos__liste svg{width:24px;height:24px;color:var(--cuivre);flex-shrink:0;margin-top:.15rem}
.apropos__liste strong{display:block;font-size:1.02rem;font-weight:600;margin-bottom:.2rem}
.apropos__liste p{color:var(--texte-doux);font-size:.94rem}

/* ---------- avis ---------- */

.avis{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.avis .reserve,.avis .photo-remplie{aspect-ratio:1/1}

.avis__cartes{display:grid;gap:1.1rem;margin-top:2rem}
.avis__attente{
  display:flex;align-items:center;gap:1.1rem;
  border:1px dashed rgba(224,155,108,.3);border-radius:var(--r);
  background:rgba(255,255,255,.02);padding:1.35rem 1.5rem;
}
.avis__attente svg{width:26px;height:26px;color:rgba(224,155,108,.6);flex-shrink:0}
.avis__attente span{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-faible);
}

/* ---------- questions ---------- */

.questions{max-width:900px;margin-inline:auto}
.question{border-bottom:1px solid var(--ligne)}
.question summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.45rem 0;cursor:pointer;list-style:none;
  font-size:1.12rem;font-weight:600;transition:color .22s;
}
.question summary::-webkit-details-marker{display:none}
.question summary:hover{color:var(--cuivre-clair)}
.question__signe{position:relative;width:16px;height:16px;flex-shrink:0}
.question__signe::before,.question__signe::after{content:"";position:absolute;background:var(--cuivre);transition:transform .3s}
.question__signe::before{top:7px;left:0;width:16px;height:2px}
.question__signe::after{left:7px;top:0;width:2px;height:16px}
.question[open] .question__signe::after{transform:scaleY(0)}
.question__corps{padding:0 0 1.6rem;color:var(--texte-doux);font-size:.98rem;max-width:74ch}
.question__corps p+p{margin-top:.9rem}

/* ---------- contact ---------- */

.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.4rem,5vw,4.5rem)}

.contact__voies{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.4rem}
.contact__voies li{display:flex;gap:1.1rem;align-items:flex-start}
.contact__voies svg{width:21px;height:21px;color:var(--cuivre);flex-shrink:0;margin-top:.35rem}
.contact__voies span{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--texte-faible);margin-bottom:.2rem;
}
.contact__voies a,.contact__voies p{font-size:1.05rem;color:var(--texte)}
.contact__voies a:hover{color:var(--cuivre-clair)}

.form{display:grid;gap:1.25rem}
.form__duo{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.champ{display:grid;gap:.5rem}
.champ label{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-faible)}
.champ input,.champ select,.champ textarea{
  width:100%;background:rgba(255,255,255,.035);color:var(--texte);
  border:1px solid var(--ligne);border-radius:var(--r);
  padding:.95rem 1.05rem;font-family:var(--sans);font-size:.98rem;font-weight:400;
  transition:border-color .25s,background .25s;
}
.champ textarea{min-height:132px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--cuivre);background:rgba(255,255,255,.06);
}
.champ select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#e09b6c 50%),linear-gradient(135deg,#e09b6c 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.champ select option{background:var(--nuit-3);color:var(--texte)}
.form__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__mention{font-size:.8rem;color:var(--texte-faible);line-height:1.6}
.form__etat{font-size:.92rem;color:var(--cuivre-clair);min-height:1.4em}

/* ---------- pied de page ---------- */

.pied{border-top:1px solid var(--ligne);background:var(--nuit-4);padding-block:3.5rem 2rem}
.pied__haut{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;
  padding-bottom:2.5rem;border-bottom:1px solid var(--ligne);
}
.pied .marque{margin-bottom:1.2rem}
.pied p{color:var(--texte-doux);font-size:.92rem;max-width:42ch}
.pied h4{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cuivre);margin:0 0 1.1rem;
}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pied ul a{font-size:.92rem;color:var(--texte-doux);transition:color .22s}
.pied ul a:hover{color:var(--texte)}
.pied__bas{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;padding-top:1.8rem}
.pied__bas p,.pied__bas a{font-size:.8rem;color:var(--texte-faible)}
.pied__bas a:hover{color:var(--texte-doux)}

/* ---------- apparition au defilement ---------- */

.js .apparait{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .apparait.est-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .apparait{opacity:1;transform:none;transition:none}
}

/* ---------- page annexe ---------- */

.page-texte{padding-block:clamp(8rem,15vh,11rem) clamp(4rem,8vw,6rem)}
.page-texte h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:2rem}
.page-texte h2{font-size:1.35rem;margin:2.6rem 0 .9rem;color:var(--cuivre)}
.page-texte p,.page-texte li{color:var(--texte-doux);font-size:.98rem}
.page-texte p+p{margin-top:.8rem}
.page-texte ul{padding-left:1.2rem;display:grid;gap:.5rem;margin:.6rem 0 0}
.page-texte a{color:var(--cuivre-clair);text-decoration:underline;text-underline-offset:3px}
.page-texte .bloc{max-width:78ch}

/* =========================================================
   REDUCTION - la MEME page, en plus petit
   ---------------------------------------------------------
   L'ecran de reference est 1280 px de large : 1 vw y vaut 12,8 px. Chaque
   valeur ci-dessous est la mesure du grand ecran divisee par 12,8, donc
   exprimee en vw. A n'importe quelle largeur la page garde la composition de
   la maquette : texte a gauche et photo a droite dans le heros, rangee de
   cinq cartes, grille deux par deux des services, rangee de trois
   realisations, photo et texte cote a cote pour « A propos » et « Avis »,
   quatre colonnes de pied de page. Rien n'est reorganise, tout est mis a
   l'echelle.
   Chaque clamp() porte un PLANCHER EN PIXELS : sans lui, a 375 px, 1,2 vw
   tomberait a 4,5 px. Le plancher est a 11 px pour tout texte.
   minmax(0,1fr) sur les grilles etroites : sans lui un mot insecable impose
   sa largeur a la colonne et pousse la grille hors de l'ecran.
   Ce bloc doit rester en fin de feuille : plusieurs @media plus haut portent
   les memes selecteurs et, a specificite egale, c'est le dernier qui gagne.
   ========================================================= */
@media (max-width:1040px){

  .contenu{padding-inline:clamp(10px,2.6vw,38.4px)}
  .section{padding-block:clamp(22px,7.5vw,105.6px)}

  /* ---- vocabulaire commun ---- */
  .surtitre{font-size:clamp(11px,.975vw,12.48px);letter-spacing:.16em;margin-bottom:clamp(6px,1.375vw,17.6px)}
  .titre-section{font-size:clamp(13px,3.4vw,45.6px);margin-bottom:clamp(6px,1.375vw,17.6px)}
  .chapeau{font-size:clamp(11px,1.2875vw,16.48px)}
  .filet{width:clamp(14px,6.5625vw,84px);margin-bottom:clamp(6px,1.875vw,24px)}
  .entete-section{margin-bottom:clamp(14px,4.5vw,57.6px)}

  /* ---- boutons ---- */
  .btn{
    font-size:clamp(11px,1vw,12.8px);letter-spacing:.06em;
    gap:clamp(4px,1.0625vw,13.6px);
    padding:clamp(7px,1.3125vw,16.8px) clamp(8px,2.375vw,30.4px);
  }
  .btn svg{width:clamp(11px,1.328vw,17px);height:clamp(11px,1.328vw,17px)}

  /* ---- heros : texte a gauche, photo a droite, comme sur grand ecran ----
     La colonne de texte et celle du titre gardent leurs largeurs relatives
     (56 vw et 42 vw) : elles sont deja en vw et se reduisent seules. */
  .heros .surtitre{letter-spacing:.14em;margin-bottom:clamp(5px,1.375vw,17.6px)}
  /* Plancher a 20 px : le texte courant est bloque a 11 px par son propre
     plancher, et un titre laisse a sa valeur en vw (16,9 px a 375) passerait
     sous le rang qu'il tient sur grand ecran. 20 px est la plus grande taille
     qui laisse « votre quotidien. » (140 px) tenir dans sa colonne de 60 vw. */
  .heros h1{font-size:clamp(20px,4.5vw,68px);margin-bottom:clamp(6px,1.875vw,24px)}
  .heros__accroche{
    font-size:clamp(11px,1.25vw,17.6px);line-height:1.5;
    max-width:min(25rem,44vw);margin-bottom:clamp(9px,3vw,38.4px);
  }
  /* La rangee de trois reperes reste une rangee de trois : en grille, elle ne
     peut plus se replier en colonne quand la place manque. L'icone passe
     AU-DESSUS du texte, comme sur les cartes de service : posee a gauche elle
     ne laisserait que 52 px de texte a 375 px, ou le mot D'INTERVENTION
     (84,3 px au plancher de 11 px) ne tient pas. */
  .heros__reperes{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(6px,1.625vw,20.8px) clamp(6px,1.8vw,33.28px);
    margin-bottom:clamp(10px,3.25vw,41.6px);
  }
  .heros__reperes li{flex-direction:column;gap:clamp(3px,.664vw,8.5px);min-width:0}
  .heros__reperes li>div{min-width:0}
  .heros__reperes svg{width:clamp(13px,2.03vw,26px);height:clamp(13px,2.03vw,26px);margin-top:0}
  .heros__reperes strong{font-size:clamp(11px,.925vw,11.84px);letter-spacing:.08em;margin-bottom:clamp(2px,.375vw,4.8px)}
  .heros__reperes span{font-size:clamp(11px,1.1625vw,14.88px);line-height:1.35}
  .heros__actions{gap:clamp(5px,1.25vw,16px) clamp(6px,1.875vw,24px)}
  .heros__actions .btn{letter-spacing:.02em;padding-inline:clamp(7px,2.375vw,30.4px)}

  /* ---- rangee de cinq cartes ----
     Elle reste une rangee de cinq. Seule l'icone passe au-dessus du texte :
     posee a gauche elle ne laisse que 24 px au corps de la carte a 768 px. */
  .cartes{margin-top:clamp(-176px,-13vw,-30px)}
  .carte-service{
    flex-direction:column;gap:clamp(5px,1.03vw,13.2px);
    padding:clamp(8px,3vw,38.4px) clamp(4px,2vw,25.6px) clamp(8px,2.75vw,35.2px);
  }
  .carte-service__ico{width:clamp(20px,4.06vw,52px);height:clamp(23px,4.69vw,60px)}
  .carte-service h3{font-size:clamp(11px,1.325vw,16.96px);letter-spacing:.02em;margin-bottom:clamp(5px,1.125vw,14.4px)}
  .carte-service p{font-size:clamp(11px,1.125vw,14.4px);line-height:1.45;margin-bottom:clamp(8px,2.125vw,27.2px)}
  .carte-devis{padding:clamp(8px,3vw,38.4px) clamp(4px,2.125vw,27.2px) clamp(8px,2.75vw,35.2px)}
  .carte-devis__ico{width:clamp(18px,3.4375vw,44px);height:clamp(18px,3.4375vw,44px);margin-bottom:clamp(7px,1.875vw,24px)}
  .carte-devis p{font-size:clamp(11px,1.4vw,17.92px);line-height:1.4;margin-bottom:clamp(9px,2.375vw,30.4px)}
  .lien-fleche{font-size:clamp(11px,.975vw,12.48px);letter-spacing:.04em;gap:clamp(4px,.875vw,11.2px)}
  .lien-fleche svg{width:clamp(11px,1.406vw,18px);height:clamp(11px,1.406vw,18px)}

  /* ---- bande de reperes ---- */
  .bande{padding-block:clamp(12px,4vw,51.2px)}
  .bande__ligne{gap:clamp(6px,2.4vw,30.72px)}
  /* flex-basis fixe au lieu de flex:1 : les deux filets encadrent le
     pictogramme et les mots comme sur grand ecran. Laisses en flex:1, ils
     cedent toute leur place aux mots des que la ligne se replie, et le
     pictogramme se retrouve colle au bord gauche au lieu de rester groupe
     avec le texte au centre. */
  .bande__trait{flex:0 0 clamp(12px,4.7vw,200px);max-width:clamp(12px,15.625vw,200px)}
  .bande__ico{width:clamp(15px,2.34vw,30px);height:clamp(15px,2.34vw,30px)}
  .bande__mots{font-size:clamp(11px,.975vw,12.48px);letter-spacing:.08em;gap:clamp(4px,.75vw,9.6px) clamp(7px,1.8vw,23.04px)}

  /* ---- reserves d'image ---- */
  .reserve{padding:clamp(5px,1.5vw,19.2px);gap:clamp(4px,.875vw,11.2px)}
  .reserve svg{width:clamp(14px,2.34vw,30px);height:clamp(14px,2.34vw,30px)}
    /* 10,56 px sur grand ecran : sous le plancher de 11 px, on le remonte */
  .reserve span{font-size:11px;letter-spacing:.09em;line-height:1.4}

  /* ---- services : la grille reste deux par deux ---- */
  .services__grille{gap:clamp(8px,2.4vw,30.72px)}
  .service__corps{padding:clamp(8px,2.4vw,30.72px)}
  .service__tete{gap:clamp(5px,1.25vw,16px);margin-bottom:clamp(6px,1.25vw,16px)}
  .service__tete svg{width:clamp(17px,2.656vw,34px);height:clamp(19px,2.969vw,38px)}
  .service h3{font-size:clamp(13px,1.6875vw,21.6px)}
  .service p{font-size:clamp(11px,1.2125vw,15.52px);margin-bottom:clamp(8px,1.75vw,22.4px)}
  .service ul{gap:clamp(5px,.875vw,11.2px);margin-bottom:clamp(9px,2.125vw,27.2px)}
  .service li{font-size:clamp(11px,1.1625vw,14.88px);gap:clamp(5px,.9375vw,12px);line-height:1.4}
  .service li svg{width:clamp(11px,1.328vw,17px);height:clamp(11px,1.328vw,17px);margin-top:.15em}

  /* ---- realisations : la rangee de trois reste une rangee de trois ---- */
  .realisations__grille{gap:clamp(6px,2vw,25.6px)}
  .realisation h3{font-size:clamp(11px,1.025vw,13.12px);letter-spacing:.05em;margin-bottom:clamp(5px,1.0625vw,13.6px)}

  /* ---- a propos : photo a gauche, texte a droite ----
     align-items:start au lieu de center : reduite, la colonne de texte est
     plusieurs fois plus haute que la photo, et un centrage laisserait la
     photo flotter au milieu d'un vide. Calee en haut, elle retrouve la ligne
     de tete commune du grand ecran. */
  .apropos{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(10px,4.5vw,57.6px);align-items:start;
  }
  .apropos__liste{margin-top:clamp(10px,2.5vw,32px);gap:clamp(7px,1.625vw,20.8px)}
  .apropos__liste li{gap:clamp(5px,1.375vw,17.6px)}
  .apropos__liste svg{width:clamp(12px,1.875vw,24px);height:clamp(12px,1.875vw,24px);margin-top:.1em}
  .apropos__liste strong{font-size:clamp(11px,1.275vw,16.32px);margin-bottom:clamp(1px,.15vw,3.2px)}
  .apropos__liste p{font-size:clamp(11px,1.175vw,15.04px);line-height:1.45}

  /* ---- avis : texte a gauche, photo a droite ---- */
  .avis{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:clamp(10px,4.5vw,57.6px);align-items:start;
  }
  .avis__cartes{margin-top:clamp(10px,2.5vw,32px);gap:clamp(6px,1.375vw,17.6px)}
  .avis__attente{padding:clamp(7px,1.6875vw,21.6px) clamp(7px,1.875vw,24px);gap:clamp(5px,1.375vw,17.6px)}
  .avis__attente svg{width:clamp(13px,2.03vw,26px);height:clamp(13px,2.03vw,26px)}
  .avis__attente span{font-size:clamp(11px,.9vw,11.52px);letter-spacing:.06em;line-height:1.35}
  /* la marge du lien est posee en style en ligne dans le HTML : on la met a
     l'echelle sans toucher au HTML */
  .avis p[style]{margin-top:clamp(10px,2.5vw,32px)!important}
  .apropos p[style]{margin-top:clamp(5px,1.25vw,16px)!important}

  /* ---- questions : la colonne garde sa largeur relative (900/1280) ---- */
  .questions{max-width:70.3vw}
  .question summary{font-size:clamp(12px,1.4vw,17.92px);padding-block:clamp(8px,1.8125vw,23.2px);gap:clamp(8px,1.875vw,24px)}
  .question__signe{width:clamp(9px,1.25vw,16px);height:clamp(9px,1.25vw,16px)}
  .question__signe::before{top:calc(50% - .5px);left:0;width:100%;height:1px}
  .question__signe::after{left:calc(50% - .5px);top:0;width:1px;height:100%}
  .question__corps{font-size:clamp(11px,1.225vw,15.68px);padding-bottom:clamp(8px,2vw,25.6px)}
  .question__corps p+p{margin-top:clamp(5px,1.125vw,14.4px)}

  /* ---- contact : texte a gauche, formulaire a droite ---- */
  .contact{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(10px,5vw,72px)}
  .contact__voies{margin-top:clamp(10px,2.75vw,35.2px);gap:clamp(7px,1.75vw,22.4px)}
  .contact__voies li{gap:clamp(5px,1.375vw,17.6px)}
  .contact__voies svg{width:clamp(11px,1.64vw,21px);height:clamp(11px,1.64vw,21px);margin-top:.2em}
  .contact__voies span{font-size:clamp(11px,.875vw,11.2px);letter-spacing:.07em;margin-bottom:clamp(1px,.25vw,3.2px)}
  /* l'adresse de courriel est un mot de 19 signes : sans coupure elle sort de
     sa colonne des que celle-ci descend sous 112 px */
  .contact__voies a,.contact__voies p{font-size:clamp(11px,1.3125vw,16.8px);overflow-wrap:anywhere;line-height:1.35}

  .form{gap:clamp(7px,1.5625vw,20px)}
  .form__duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(7px,1.5625vw,20px)}
  .champ{gap:clamp(3px,.625vw,8px)}
  .champ label{font-size:clamp(11px,.875vw,11.2px);letter-spacing:.06em;line-height:1.3}
  .champ input,.champ select,.champ textarea{
    padding:clamp(5px,1.1875vw,15.2px) clamp(6px,1.3125vw,16.8px);
    font-size:clamp(11px,1.225vw,15.68px);
  }
  .champ textarea{min-height:clamp(45px,10.3125vw,132px)}
  /* La fleche du menu deroulant est peinte en fond, a 13 px du bord droit.
     La reserve de droite doit la degager : laissee a la valeur commune
     (6 px a 375), le dernier caractere du libelle passait SOUS la fleche
     (« Je ne sais pas e~ » mesure a 375). Et comme aucune reduction ne peut
     faire tenir 181 px de libelle dans 65 px de champ, la coupe est rendue
     lisible par des points de suspension au lieu d'un caractere tranche.
     Le menu deroule, lui, s'ouvre a sa largeur naturelle. */
  .champ select{
    background-position:calc(100% - clamp(8px,1.484vw,19px)) 50%,calc(100% - clamp(5px,1.09vw,14px)) 50%;
    padding-right:clamp(15px,2.6vw,33px);text-overflow:ellipsis;
  }
  .form__mention{font-size:clamp(11px,1vw,12.8px);line-height:1.45}
  .form__etat{font-size:clamp(11px,1.15vw,14.72px)}

  /* ---- pied de page : les quatre colonnes restent quatre colonnes ---- */
  .pied{padding-block:clamp(16px,4.375vw,56px) clamp(10px,2.5vw,32px)}
  .pied__haut{
    grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
    gap:clamp(7px,3.125vw,40px);padding-bottom:clamp(12px,3.125vw,40px);
  }
  /* la marque du pied vit dans une colonne de 107 px a 375 px : le logo et le
     nom y descendent avec elle, sinon le seul mot THERMEO (145 px a 24,8 px)
     la fait deborder */
  .pied .marque{margin-bottom:clamp(6px,1.5vw,19.2px);gap:clamp(5px,.742vw,15.2px)}
  .pied .marque__logo img{width:clamp(14px,3.28vw,42px);height:auto}
  .pied .marque__nom{font-size:clamp(11px,1.9375vw,24.8px);letter-spacing:.08em}
  .pied .marque__metier{font-size:11px;letter-spacing:.09em;margin-top:clamp(2px,.5vw,8px)}
  .pied p{font-size:clamp(11px,1.15vw,14.72px);line-height:1.45}
  .pied h4{font-size:clamp(11px,.875vw,11.2px);letter-spacing:.07em;margin-bottom:clamp(6px,1.375vw,17.6px)}
  .pied ul{gap:clamp(4px,.875vw,11.2px)}
  .pied ul a{font-size:clamp(11px,1.15vw,14.72px);overflow-wrap:anywhere;line-height:1.3;display:inline-block}
  .pied__bas{padding-top:clamp(8px,2.25vw,28.8px);gap:clamp(5px,.625vw,12.8px) clamp(8px,2.5vw,32px)}
  /* base de 48 % : les deux mentions restent sur la MEME ligne, comme sur
     grand ecran, au lieu de se mettre l'une sous l'autre */
  .pied__bas p{font-size:clamp(11px,1vw,12.8px);flex:0 1 48%;line-height:1.35}
  .pied__bas p:last-child{text-align:right}

  /* ---- en-tete : le libelle du metier passe le plancher de 11 px ---- */
  .marque__metier{font-size:11px;letter-spacing:.16em}

  /* ---- menu mobile : hors reduction ----
     Le menu plein ecran n'existe pas sur grand ecran : il n'a pas de
     composition a reproduire, et rien n'y contraint la largeur (le bouton
     occupe une colonne de 335 px a 375). Pris par la regle commune .btn il
     tombait a 11 px et 7 px de garde a cote de liens a 24,8 px : une barre
     ecrasee. Il garde donc les valeurs de la feuille de base. */
  .menu-mobile .btn{
    font-size:.8rem;letter-spacing:.11em;gap:.85rem;padding:1.05rem 1.9rem;
  }
  .menu-mobile .btn svg{width:17px;height:17px}

  /* ---- page annexe (mentions legales) ---- */
  .page-texte{padding-block:clamp(90px,10vw,176px) clamp(20px,6.25vw,96px)}
  .page-texte h1{font-size:clamp(18px,3.75vw,48px);margin-bottom:clamp(10px,2.5vw,32px)}
  .page-texte h2{font-size:clamp(13px,1.6875vw,21.6px);margin:clamp(12px,3.25vw,41.6px) 0 clamp(5px,1.125vw,14.4px)}
  .page-texte p,.page-texte li{font-size:clamp(11px,1.225vw,15.68px)}
  .page-texte p+p{margin-top:clamp(5px,1vw,12.8px)}
  .page-texte ul{gap:clamp(3px,.625vw,8px);margin-top:clamp(4px,.75vw,9.6px)}
}

/* ---- telephone : la MEME page, en reduction ----
   Sous 760 px, le HTML sert le MEME fichier paysage que le grand ecran.
   Modele repris du projet peinture et du site de phare : la photo est servie
   ENTIERE (hauteur naturelle, aucun rognage) et le texte reste POSE DESSUS,
   cale en haut a gauche, bride en vw a la zone libre de l'image pour ne pas
   couvrir le visage. La composition du grand ecran est reproduite en
   reduction, pas reorganisee.
   Pourquoi le cadrage carre a ete retire du <picture> le 06/09/2026 : servi
   sur 100 vw il occupait 100 vw de haut, mais c'est un autre cadrage, pas un
   recadrage du paysage. Mesure a largeur d'affichage egale (390 px) : le
   miroir passe de 101 a 123 px, soit un sujet grossi d'environ 20 %, le
   montage de cuivre de droite et l'etagere de gauche sortent du champ. Le
   telephone montrait donc moins de scene que le bureau, alors qu'il devait en
   montrer autant, en plus petit. Les fichiers hero-plombier-carre-* restent
   sur le disque, ils ne sont simplement plus references.
   Le paysage vaut 1536 x 1024, soit 3:2 : servi sur toute la largeur il
   mesure 66,67 vw de haut (260 px a 390 px de large). Le bloc de texte est
   plus haut que lui : il deborde sous la photo et continue sur le fond de
   page, comme dans la recette du projet peinture.
   ======================================================== */
@media (max-width:760px){

  .heros{
    display:grid;grid-template-columns:1fr;align-items:start;
    min-height:0;padding-top:84px;padding-bottom:0;overflow:hidden;
  }
  .heros__image{position:relative;grid-area:1/1;align-self:start}
  /* height:auto + object-fit:contain : la boite prend le rapport naturel du
     fichier, et meme si un jour elle ne le prenait plus, contain montrerait
     l'image entiere au lieu de la rogner comme le fait le cover du bureau. */
  .heros__image img{height:auto;object-fit:contain;object-position:center}
  /* Raccord du bas de la photo avec le fond de page, comme le ::after du
     projet peinture (meme hauteur, 12 vw). Le voile est cale sur la hauteur du
     HEROS, pas sur celle de la photo : au bord bas de l'image il ne vaut plus
     que 0,27 d'opacite. Mesure a 390 px sans ce degrade : la derniere ligne de
     la photo sort a RVB 19,3 / 19,5 / 19,8 contre 8 / 19 / 29 pour le fond, un
     ecart de 11 sur le rouge, visible en bande horizontale. Le degrade finit
     sur var(--nuit) exact, c'est-a-dire la couleur du fond de page. */
  .heros__image::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:20vw;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(8,19,29,0) 0%,rgba(8,19,29,.42) 30%,rgba(8,19,29,.80) 65%,var(--nuit) 100%);
  }
  /* Le voile est renforce sur sa moitie droite, ici seulement. Sur grand ecran
     le bloc de texte s'arrete a 52 % de la largeur, devant le mur et le meuble
     de salle de bains ; ici il va jusqu'a 85 % et rencontre la plante verte du
     meuble (48 a 52 % de la largeur) puis le montage de cuivre eclaire (58 a
     85 %), sur lequel tombe le mot D'INTERVENTION, ecrit en cuivre.
     Contraste reel mesure sous les glyphes eux-memes (masque obtenu par
     difference entre la page rendue et la meme page texte masque, 390 px) :
       - accroche sur la plante : 2,92 au pire pixel avant, 4,70 apres ;
       - intitules des reperes sur le cuivre : 3,21 avant, 5,46 apres ;
       - toutes les autres zones du heros etaient et restent au-dessus de 5.
     Le seuil de 4,5 (texte courant) est donc franchi partout. Les valeurs
     touchees sont 0,55 -> 0,70 a 48 %, 0,12 -> 0,28 a 68 % et 0,05 -> 0,22 au
     bord droit ; les deux autres degrades (bas et haut) sont recopies a
     l'identique, une seule declaration background remplacant le tout. */
  .heros__voile{
    background:
      linear-gradient(90deg,rgba(8,19,29,.97) 0%,rgba(8,19,29,.93) 26%,rgba(8,19,29,.70) 48%,rgba(8,19,29,.28) 68%,rgba(8,19,29,.22) 100%),
      linear-gradient(0deg,rgba(8,19,29,.92) 0%,rgba(8,19,29,.15) 26%,rgba(8,19,29,0) 50%),
      linear-gradient(180deg,rgba(8,19,29,.75) 0%,rgba(8,19,29,0) 22%);
  }
  /* La reserve du bas vaut la remontee des cartes (13 vw) plus 8 px de garde.
     Sur grand ecran, les cartes remontent dans les 15 vw de padding-bottom du
     heros : elles mordent sur la PHOTO, jamais sur le texte. Ici le heros n'a
     plus de padding-bottom, et depuis le passage au fichier paysage la photo
     (66,67 vw de haut) est TOUJOURS moins haute que le bloc de texte : c'est
     donc le texte qui fixe la hauteur du heros, a toutes les largeurs. Sans
     cette reserve, les cartes remontent SUR LUI et le panneau, qui est
     au-dessus dans l'empilement, masque le second bouton.
     Mesure a 320 px avant correction : bas du bloc de texte a 445,3 px, haut
     de la rangee de cartes a 419,7 px, soit 25,6 px des 33,6 px du bouton
     NOS SERVICES recouverts. La reserve fait grandir le heros juste ce qu'il
     faut : les cartes retombent a 8 px sous le texte. */
  .heros__contenu{grid-area:1/1;align-self:start;padding-block:clamp(10px,3vw,24px) calc(13vw + 8px)}

  /* Bridage en vw sur la zone libre de la photo. Sur le fichier paysage, le
     mur gris est libre jusqu'a 48 % de la largeur : la silhouette du plombier
     commence la (mesure sur hero-plombier-1536.jpg, bande 45-70 % de la
     hauteur). Le titre (60 vw) et l'accroche (62 vw) mordent donc un peu sur
     son epaule et son bras croise, qui sont en tissu bleu nuit, la partie la
     plus sombre de l'image : le contraste y reste tres au-dessus du seuil,
     mesure plus bas.
     Le bloc de texte, lui, garde ses 82 vw : en deca, ni les deux boutons
     (276 px cote a cote au plancher de 11 px) ni la rangee de trois reperes
     n'y tiennent, le mot D'INTERVENTION mesurant 94,9 px au plancher, et 82 vw
     moins deux gouttieres de 6,75 px donnant trois colonnes de 98 px a 375 px.
     Position exacte a 390 px : la photo occupe 84 a 344 px, la rangee de
     reperes 256 a 339 px (donc sur le tiers bas de la photo, la ou le degrade
     ci-dessus l'assombrit) et la rangee de boutons 349 a 383 px, c'est-a-dire
     SOUS la photo, sur le fond de page uni. La gouttiere de la rangee de
     reperes est ramenee de 2,6 vw a 1,8 vw pour degager 3 px : c'est une
     gouttiere reduite, pas une colonne supprimee. */
  .heros__texte{max-width:82vw}
  .heros h1{max-width:60vw}
  .heros .surtitre{letter-spacing:.2em}
  .heros__accroche{max-width:62vw;margin-bottom:clamp(8px,2.4vw,30.72px)}
  .heros__reperes{margin-bottom:clamp(9px,2.6vw,33.28px)}
  .heros__reperes strong{letter-spacing:.02em}
  .heros__actions .btn{letter-spacing:.02em;padding-inline:clamp(7px,1.875vw,30.4px)}

  /* La rangee de cinq cartes passe a fond perdu, comme les trois cartes du
     site de phare : c'est la largeur entiere de l'ecran qui fait tenir les
     cinq colonnes. */
  .cartes .contenu{max-width:none;padding-inline:0}
  .cartes__grille{border-left:0;border-right:0;border-radius:0}
  .carte-service{padding-inline:clamp(4px,2vw,25.6px)}

  /* La bande de reperes garde sa composition : filet, pictogramme, mots,
     filet. Les mots se replient sur deux lignes, comme ils le feraient sur
     grand ecran dans une colonne aussi etroite. */
  .bande__mots{letter-spacing:.06em}

  /* INTERVENTIONS mesure 89 px au plancher de 11 px, interlettrage retire,
     pour une colonne de 71 px a 375 px : ni la police (deja au plancher) ni
     les gouttieres (reduites a 11,7 px) ne peuvent lui rendre ces 18 px. Le
     mot accepte donc la cesure, plutot que de passer le pied de page de
     quatre colonnes a deux pour un seul intertitre. */
  .pied h4{hyphens:auto}
}

/* Sous 640 px, la rangee de cinq cartes passe a DEUX colonnes, jamais a une.
   Ce qui l'impose, mesure a 375 px avec les cinq colonnes forcees et la
   rangee a fond perdu (le corps d'une carte de service y vaut 61 px, celui de
   la carte devis 52 px) :
     - CHAUFFAGE deborde de 7 px de sa colonne, DEPANNAGE de 9 px ; ce sont
       des mots uniques, ils ne peuvent pas se replier ;
     - le texte de la carte Plomberie deborde de 3 px, celui de la carte devis
       de 13 px (le mot « engagement, ») ;
     - le lien DEMANDER UN DEVIS de la carte devis mesure 79,4 px avec sa
       fleche : il sort de 27 px de sa carte et de 19,7 px de l'ecran ;
     - la grille elle-meme mesure 20 px de plus que l'ecran.
   La feuille etant en overflow:hidden sur la grille, ces debordements ne se
   voient pas : ils rognent le texte. Ce n'est donc pas une rangee de cinq
   plus petite, c'est une rangee de cinq amputee.
   Ou passe le seuil : le plus long element insecable de la colonne la plus
   etroite (le lien de la carte devis, 79,4 px) tient dans une colonne de
   0,88 x L/4,88 moins deux marges de 2,125 vw, soit 0,13783 x L. Il faut donc
   576 px. Arrondi a 640 px, ce qui laisse 8,8 px de marge.
   Au-dessous, les quatre cartes de service forment une grille deux par deux
   et la carte devis prend la largeur entiere sous elles : elle garde sa place
   de derniere carte de la rangee, comme sur grand ecran. */
@media (max-width:639px){
  .cartes__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .carte-service{border-bottom:1px solid var(--ligne);padding-inline:clamp(8px,2.6vw,25.6px)}
  .carte-service:nth-child(2n){border-right:0}
  .carte-devis{grid-column:1/-1;padding-inline:clamp(8px,2.6vw,27.2px)}
}

/* Sous 374 px seulement : quelques mots des colonnes les plus etroites
   acceptent la cesure, et les deux boutons du heros restent COTE A COTE.
   Mesure a 320 px : la rangee de boutons demande 268,03 px pour une colonne
   de 262,39 px, soit 5,64 px de trop ; laissee ainsi, elle passait a deux
   lignes, ce qui est un empilement. Les 5,64 px sont repris la ou ils ne
   coutent rien : l'interlettrage des deux libelles (17 et 12 signes a 11 px,
   soit 3,74 et 2,64 px) et la gouttiere entre les boutons, ramenee de 6 a
   4 px. La police reste au plancher de 11 px. */
@media (max-width:374px){
  .heros__reperes strong,.realisation h3{hyphens:auto}
  .heros__actions{column-gap:4px}
  .heros__actions .btn{letter-spacing:normal}
  /* PLOMBERIE, avec son interlettrage, mesure 74,7 px pour les 71 px que
     laisse la colonne de marque du pied de page a cette largeur. */
  .pied .marque__metier{letter-spacing:.02em}
}

@media print{
  .entete,.menu-mobile,.bande,.reserve{display:none}
  body{background:#fff;color:#000}
}

/* Photos livrees le 08/09/2026 : la case reservee garde sa geometrie, l'image la remplit. */
.photo-remplie{border:0!important;background:none!important;padding:0!important;overflow:hidden}
.photo-remplie .photo-modele{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}