/* ============================================================================
   SD CLIMATISATION — Meyzieu (69)
   Système de styles. Contrat : DESIGN.md. Faits : PRODUCT.md.
   Règles structurantes rappelées ici parce qu'elles se perdent à la retouche :
   · le NOIR est un TRAIT, jamais une MASSE (rejet Mourad) — les masses sombres
     sont en --profond, le noir porte la typo et les filets.
   · l'OR est une couleur de SENS : il n'apparaît QUE là où la page parle de
     chauffage. Jamais en décoration, jamais en CTA.
   · --bleu ne porte JAMAIS de texte (3,57 de contraste). Le CTA est --bleu-encre.
   · tout hero photo porte une RÉSERVE (bloc vide avant le socle), sinon la photo
     passe entièrement sous le socle dès qu'il grandit. Mesuré : 0 px à 1366×768.
   ========================================================================= */

:root{
  --papier:#FFFFFF;
  --papier-2:#F4F6F8;
  --encre:#16181C;
  --encre-2:#5A6169;
  --ciel:#78C0E4;
  --ciel-pale:#E4F2FA;
  --bleu:#1E8FCE;        /* NON TEXTUEL : filets, arêtes, motif, pictogrammes */
  --bleu-encre:#0D5C8A;  /* CTA et liens — blanc dessus 7,20 */
  --bleu-nuit:#094867;   /* survol du CTA */
  --profond:#0E3E52;     /* masses sombres — blanc dessus 11,48 */
  --or:#E9A517;
  --or-pale:#FBF0D9;
  --filet:#DDE3E8;
  --sol:#EFF2F4;         /* FOND DE PAGE. ⛔ PAS de papier chaud : lin, bone et creme sont bannis
                            (design-artisan-btp §4, « signature absolue de Claude Code »).
                            #F5F2EA avait R-B = 11 : c etait exactement du lin.
                            Neutre FROID, teinte vers le bleu du metier. Gate : qa/check-lin.mjs */
  --sol-2:#E1E8EC;       /* variante du sol */

  /* Couleur du texte SECONDAIRE, portee par un JETON et non ecrite en dur.
     Motif : `.chapo p{color:var(--encre-2)}` et `.section--sombre p{color:#C6D9E3}`
     ont la MEME specificite (0,0,1,1) ; la derniere ecrite gagnait, donc le
     chapo d'une section sombre repassait en gris ardoise sur bleu profond
     (1,83 de contraste mesure, AA en exige 4,5). Un jeton herite du parent :
     la section repeint son texte doux sans jamais dependre de l'ordre du fichier.
     Memoire : feedback_couleur_heritee_perd_contre_regle_element. */
  --corps-doux:var(--encre-2);

  --titre:'Epilogue',system-ui,-apple-system,sans-serif;
  --corps:'Hanken Grotesk',system-ui,-apple-system,sans-serif;

  --max:1240px;
  --gouttiere:clamp(18px,3.4vw,40px);
  --fs-display:clamp(38px,6.4vw,76px);   /* était 52 : sous le plafond du skill (96) et
                                            à hauteur des sites acceptés (86 px de moyenne) */
  --fs-geant:clamp(44px,7.6vw,74px);
  --fs-display-page:clamp(34px,5.4vw,68px); /* pages interieures : un cran sous la home,
                                              pour que le hero d accueil reste dominant */     /* le chiffre qui devient l'objet graphique */
  --fs-h2:clamp(24px,3.1vw,38px);
  --fs-h3:clamp(19px,2.1vw,25px);
  --rythme:clamp(52px,7vw,96px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--corps);color:var(--encre);background:var(--sol);
  -webkit-font-smoothing:antialiased;line-height:1.55;font-size:16.5px}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titre);text-wrap:balance;line-height:1.05;letter-spacing:-.022em}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--bleu-encre);outline-offset:3px}
.saut{position:absolute;left:-9999px}
.saut:focus{left:12px;top:12px;z-index:99;background:#fff;padding:12px 18px;
  font-family:var(--titre);font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.2)}

.enveloppe{max-width:var(--max);margin:0 auto;padding-left:var(--gouttiere);padding-right:var(--gouttiere)}
.section{padding-block:var(--rythme)}
/* ⚠ `--sol-2` et non `--papier-2`. La refonte a pose un sol CHAUD (--sol) et
   declare sa variante `--sol-2`… sans jamais la brancher : `.section--pale`
   continuait de peindre le gris FROID de l'ancien systeme. Les deux gris ont la
   meme clarte et une temperature opposee (distance 14,6 seulement), et ils se
   touchent sur les 7 pages interieures — la frontiere se lit comme un defaut
   d'impression, pas comme un changement de sol. Le pas est maintenant dans la
   meme famille : le sol se fonce, il ne change pas de camp. */
.section--pale{background:var(--sol-2)}
/* --- LES SOLS. Une section change de fond quand elle change de PROPOS. --- */
.section--blanc{background:var(--papier)}
.section--ciel{background:var(--ciel-pale)}
.section--or{background:var(--or-pale)}
.section--sombre{background:var(--profond);color:#fff;--corps-doux:#C6D9E3}
.section--sombre h2,.section--sombre h3{color:#fff}
.section--sombre p{color:#C6D9E3}
.lame{height:14px;background:var(--or)}       /* la lame qui referme le hero */
.lame--mince{height:8px}

/* ---------- boutons et téléphone ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 28px;background:var(--bleu-encre);color:#fff;text-decoration:none;
  font-family:var(--titre);font-weight:600;font-size:16px;border-radius:6px;
  transition:background-color .18s ease-out,scale .12s ease-out;white-space:nowrap}
.btn:hover{background:var(--bleu-nuit)}
.btn:active{scale:.96}
.btn--clair{background:#fff;color:var(--profond)}
.btn--clair:hover{background:var(--ciel-pale)}
.btn--ligne{background:transparent;color:var(--bleu-encre);box-shadow:inset 0 0 0 2px var(--bleu-encre)}
.btn--ligne:hover{background:var(--ciel-pale)}
.tel{display:inline-flex;align-items:center;min-height:46px;font-family:var(--titre);
  font-weight:600;font-size:17px;white-space:nowrap;text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:6px;font-variant-numeric:tabular-nums}

/* ---------- HEADER : LA PLAQUE UNIQUE ----------
   Refonte du bandeau, demande de Mourad du 02/09 sur capture : les DEUX plaques
   blanches formaient deux îles à deux hauteurs différentes, séparées par un trou
   de bleu. Un audit l'avait déjà nommé (« deux rectangles blancs flottants »).
   La contrainte qui les justifiait (nav blanche sur PHOTO : 1,70) n'existe plus :
   le hero C est un aplat --profond, le blanc y mesure 11,48. Donc : UNE plaque
   pour le logo (obligatoire : son bleu tombe à 1,30 sur fond sombre, cf. LOGO.md),
   la nav posée directement sur le fond, et le téléphone en pastille or qui
   équilibre la droite. Toujours ni barre pleine largeur, ni pilule de nav
   flottante, ni deux étages. */
/* Le bandeau MORPHING (demande Mourad 03/09) : en haut de page il se confond
   avec le fond — barre pleine largeur, ni arrondi ni ombre, filet bas — puis
   il prend l'air en pilule dès le premier scroll (.tete--l-air, posée par
   nav.js, seuil 24 px). La transition couvre largeur, rayon, fond et ombre ;
   reduced-motion la coupe. */
.tete{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:14px;
  margin:0 auto;width:100%;
  padding:10px clamp(16px,2.4vw,28px);border-radius:0;
  background:var(--papier);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid transparent;border-bottom-color:var(--filet);
  box-shadow:0 16px 40px -22px rgba(8,26,36,0);
  transition:width .38s cubic-bezier(.32,.72,0,1),margin .38s cubic-bezier(.32,.72,0,1),
    border-radius .38s cubic-bezier(.32,.72,0,1),background-color .38s cubic-bezier(.32,.72,0,1),
    box-shadow .38s cubic-bezier(.32,.72,0,1),border-color .38s cubic-bezier(.32,.72,0,1),
    top .38s cubic-bezier(.32,.72,0,1),padding .38s cubic-bezier(.32,.72,0,1)}
.tete--l-air{top:12px;margin:12px auto 0;width:min(calc(100% - 24px),calc(var(--max) + 24px));
  padding:8px 8px 8px 16px;border-radius:999px;
  background:rgba(251,252,253,.9);
  border-color:rgba(214,222,227,.8);border-bottom-color:rgba(214,222,227,.8);
  box-shadow:0 16px 40px -22px rgba(8,26,36,.35)}
@media (prefers-reduced-motion:reduce){.tete{transition:none}}
.tete--flux{position:relative;inset:auto}
/* ⚠ `text-decoration:none` OBLIGATOIRE : la feuille ne pose que `a{color:inherit}`,
   donc le soulignement par defaut du navigateur restait sur la marque. Le wordmark
   « SD CLIMATISATION » ET la ligne « MEYZIEU · EST LYONNAIS » s'affichaient soulignes
   sur les 9 pages : la marque se lisait comme un lien, et le trait sous la baseline
   passait pour un filet du logo. */
/* ⛔ `color` OBLIGATOIRE sur la plaque, pas seulement `background`. Sur l'accueil la
   plaque est une ILE CLAIRE posee dans `.hero{color:#fff}` : le wordmark, qui ne
   posait aucune couleur, heritait du blanc du hero et sortait BLANC SUR BLANC —
   contraste 1,00, « SD CLIMATISATION » present dans le DOM, invisible a l'ecran,
   sur la seule page ou le nom de l'entreprise doit se lire en premier. Les 8 autres
   pages portaient la meme balise en #16181C parce que leur entete est hors du hero :
   le defaut ne se voyait que sur la home. Un fond clair pose TOUJOURS son encre.
   Memoire : feedback_couleur_heritee_perd_contre_regle_element. */
/* Le logo vit sur SA tuile blanche (retour de Mourad : « il est sur fond blanc
   normalement ») — un carré arrondi compact, couleurs d'origine intactes.
   Le nom reste en texte, net à toute taille. */
.plaque{color:var(--encre);display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.plaque img{height:48px;width:auto}
.plaque .nom{font-family:var(--titre);font-weight:800;font-size:17px;
  letter-spacing:-.01em;line-height:1;white-space:nowrap}
.nav{display:flex;gap:2px;align-items:center;color:var(--encre);flex:1;
  justify-content:center;font-family:var(--titre);font-weight:600;font-size:14.5px}
/* Les liens se surlignent en PASTILLE (dispositif alves), plus de soulignement. */
.nav>a,.nav>.deroulant>button{padding:9px 14px;border-radius:999px;
  transition:background-color .25s cubic-bezier(.32,.72,0,1),color .25s cubic-bezier(.32,.72,0,1)}
.nav>a:hover,.nav>.deroulant:hover>button,.nav>.deroulant>button[aria-expanded="true"]{background:var(--sol-2)}
.nav>a[aria-current]{background:var(--sol-2);color:var(--bleu-encre)}
.nav>a::after,.nav>.deroulant>button::after{display:none}
/* Le téléphone en pastille : or plein, encre dessus (8,34). Autonome, il tient
   sur le fond sombre du hero comme sur le sol clair des pages intérieures. */
.tel-tete{display:inline-flex;align-items:center;gap:8px;background:var(--or);
  color:var(--encre);font-family:var(--titre);font-weight:700;font-size:15px;
  padding:11px 19px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  transition:background-color .3s cubic-bezier(.32,.72,0,1),transform .2s cubic-bezier(.32,.72,0,1)}
.tel-tete:hover{background:#fff}
.tel-tete:active{transform:scale(.97)}
.tel-tete svg{width:15px;height:15px;fill:currentColor;flex:none;
  transition:transform .3s cubic-bezier(.32,.72,0,1)}
.tel-tete:hover svg{transform:translateX(2px) rotate(8deg)}
@media (max-width:980px){.tel-tete{display:none}}
.nav>a,.nav>.deroulant>button{text-decoration:none;position:relative;padding-bottom:3px;
  background:none;border:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;
  align-items:center;gap:7px}
.nav>a::after,.nav>.deroulant>button::after{content:'';position:absolute;left:0;bottom:0;
  width:100%;height:2px;background:var(--bleu-encre);transform:scaleX(0);
  transform-origin:left center;transition:transform .18s ease-out}
.nav>a:hover::after,.nav>a[aria-current]::after,
.nav>.deroulant:hover>button::after,.nav>.deroulant>button[aria-expanded="true"]::after{transform:scaleX(1)}

/* déroulant « Prestations » — check-submenu.mjs est BLOQUANT sur ce composant.
   Les deux pièges qu'il teste : le vide de survol entre le bouton et le panneau,
   et le clic qui referme ce que le survol vient d'ouvrir. */
.deroulant{position:relative}
.deroulant>button .fleche{width:5px;height:5px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .18s ease-out}
.deroulant:hover>button .fleche,.deroulant>button[aria-expanded="true"] .fleche{transform:translateY(0) rotate(225deg)}
.panneau{position:absolute;right:0;top:100%;min-width:290px;background:#fff;
  box-shadow:0 18px 44px -14px rgba(12,30,45,.3),0 2px 6px rgba(12,30,45,.1);
  border-top:3px solid var(--bleu);padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease-out,transform .16s ease-out,visibility .16s}
/* ⚠ LE PONT, et il doit être porté par le CONTENEUR, pas par le panneau.
   Première version : `.panneau::before`. Mesuré par check-submenu : « 11 px à franchir,
   le menu se referme sous la souris », 6 échecs. La cause est que le pseudo-élément d'un
   panneau en `visibility:hidden` est hidden lui aussi — le pont s'évanouissait avec ce
   qu'il devait rejoindre, exactement au moment où le pointeur en avait besoin.
   Porté par `.deroulant`, il existe toujours, et survoler la bande garde `:hover` vrai. */
.deroulant::after{content:'';position:absolute;left:0;right:0;top:100%;height:18px}
.deroulant:hover .panneau,.deroulant:focus-within .panneau,
.deroulant>button[aria-expanded="true"]+.panneau{opacity:1;visibility:visible;transform:translateY(0)}
.panneau a{display:block;padding:11px 22px;text-decoration:none;font-size:14.5px;
  font-family:var(--corps);font-weight:500;transition:background-color .14s ease-out}
.panneau a:hover,.panneau a[aria-current]{background:var(--ciel-pale);color:var(--bleu-encre)}

/* burger — obligatoire sous 980, sinon visual-shots sort en 2 */
/* ⚠ Le burger est APRÈS la nav dans le DOM, et remis à gauche par `order`.
   Raison : qa/check-submenu.mjs retourne sur le PREMIER <button> du <header> dont un
   frère contient >= 2 liens. Le burger placé avant la nav satisfaisait ce test, le gate
   le prenait pour le déroulant, le trouvait masqué au-dessus de 980 px et rendait un
   ✅ sans avoir testé « Prestations ». Un vert sur un composant jamais ouvert. */
.burger{display:none;order:-1;background:var(--encre);border:0;cursor:pointer;
  width:44px;height:44px;border-radius:999px;position:relative;flex:none;
  align-items:center;justify-content:center;margin-right:2px}
.burger span{display:block;position:absolute;left:50%;top:50%;margin-left:-8px;
  width:16px;height:2px;background:#fff;border-radius:2px}
/* ⛔ Sur l'accueil le burger ne se pose PAS sur le sol clair des pages interieures :
   il tombe sur l'aplat --profond du hero. Mesure au pixel : 1,55 de contraste a 768
   et 860 px — le seul acces au menu du site etait un trait d'encre invisible sur bleu.
   A 390 px il tombait par hasard sur la partie claire de la photo (13,00) : la
   lisibilite dependait du CONTENU d'une image, donc de rien. La couleur se pose sur
   l'ELEMENT, dans le contexte ou il vit. */
/* barre claire partout : le burger reste encre, y compris sur l'accueil */
.burger span:nth-child(1){transform:translateY(-5px)}
.burger span:nth-child(3){transform:translateY(5px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
.burger span{transition:transform .18s ease-out,opacity .18s ease-out}

/* ---------- HERO — DIRECTION C, « la photo qui penche » ----------
   Choix de Mourad du 02/09 sur maquettes/heros.html.
   D'après 21st.dev « Hero Section » de LaviKatiyar, re-composé.

   Le parti pris : garder la structure que le visiteur sait lire — texte à
   gauche, image à droite — et n'y changer QU'UNE chose. La photo pivote de
   3,5° et porte un cadre d'or posé à 14 px de son bord.
   Le relevé system/RELEVE-21ST-HEROS.md a vérifié sur nos 40 sites qu'AUCUNE
   photo de hero n'y est pivotée. C'est le déplacement minimal qui sort du
   réflexe sans rien casser.

   ⛔ La rotation TOMBE sous 860 px : une photo inclinée y crée des conflits de
      cible tactile (high-end-visual-design §3B). Le cadre se resserre, et
      l'étiquette rentre dans le cadre au lieu de déborder. */
.hero{background:var(--profond);color:#fff;overflow:hidden;position:relative}
.hero .in{max-width:var(--max);margin:0 auto;
  padding:clamp(44px,6vw,84px) var(--gouttiere) clamp(56px,7vw,104px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(30px,5vw,80px);align-items:center}
.hero h1{font-size:var(--fs-display);font-weight:700;max-width:13ch;color:#fff}
.hero h1 em{font-style:normal;color:var(--or)}
.hero .lead{margin-top:20px;max-width:44ch;color:#C3D5DE;font-size:clamp(16px,1.15vw,18px)}
.hero .sur{font-family:var(--titre);font-weight:700;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);display:inline-block}
.hero .filet-or{width:74px;height:4px;background:var(--or);margin:18px 0 20px}
.hero .actes{display:flex;align-items:center;gap:clamp(18px,2.8vw,36px);
  flex-wrap:wrap;margin-top:clamp(28px,3.4vw,40px)}
.hero .tel{color:#fff;border-bottom:3px solid var(--or);font-size:clamp(25px,2.7vw,38px);
  font-weight:700;letter-spacing:-.03em;line-height:1;padding-bottom:5px;
  text-decoration:none;font-variant-numeric:tabular-nums;min-height:0}
/* la note Google : rang 2 du référentiel, et le meilleur atout du client */
.hero .note{display:flex;align-items:center;gap:10px;margin-top:24px;flex-wrap:wrap;
  font-size:14.5px;color:#B9CCD6}
.hero .note b{font-family:var(--titre);font-weight:800;font-size:21px;line-height:1;color:#fff}
.hero .note .et{display:inline-flex;gap:2px}
.hero .note .et svg{width:15px;height:15px;fill:var(--or)}

.hero .cadre{position:relative;aspect-ratio:4/5;
  transform:rotate(3.5deg);transition:transform .7s cubic-bezier(.32,.72,0,1)}
.hero .cadre::before{content:"";position:absolute;inset:-14px;border:3px solid var(--or);
  border-radius:4px;pointer-events:none}
.hero .cadre img{width:100%;height:100%;object-fit:cover;border-radius:2px;
  box-shadow:0 40px 80px -36px rgba(0,0,0,.6)}
.hero .cadre:hover{transform:rotate(0)}
.hero .etq-c{position:absolute;left:-16px;bottom:26px;background:var(--or);color:var(--encre);
  font-family:var(--titre);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 16px;border-radius:3px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}

/* ⛔ La colonne photo n'est pas large de la photo : le cadre or deborde de 14 px et
   la rotation de 3,5° ajoute la moitie de la HAUTEUR fois sin(3,5°), soit ~20 px de
   plus. Tant que `.in` n'est pas borne par --max (donc sous ~1320 px), ces ~34 px se
   servent dans la gouttiere et il ne reste RIEN a droite : mesure au pixel de l'or,
   1 px de marge a 861, 3 a 900, 5 a 1024, 8 a 1150 — contre 29 a 39 px a gauche.
   Le bloc se lisait comme coupe par le bord de l'ecran sur tout le format portable.
   On rend au cadre la place qu'il prend au lieu de la lui laisser voler. */
@media (min-width:861px) and (max-width:1319px){
  .hero .cadre{margin-right:clamp(20px,2.6vw,34px)}
}

@media (max-width:860px){
  /* ⛔ `.tete` est en `position:absolute` et mesure 72 px : la reserve du hero doit
     etre PLUS HAUTE que l'entete, sinon le premier element passe DESSOUS. A 34 px,
     la plaque blanche recouvrait le haut de la photo et le coin du cadre or sur
     toutes les largeurs de 320 a 860. */
  /* Le padding de 90 px datait de la pilule FLOTTANTE au-dessus du hero ; depuis
     le bandeau morphing (03/09) la barre est dans le flux, cet espace est mort. */
  .hero .in{grid-template-columns:1fr;padding-top:clamp(26px,6vw,40px)}
  /* ⛔ `order:-1` retire. La photo passait AVANT le titre : 425 px d'image + 280 px de
     H1 repoussaient « Demander un devis » a 983 px sur un ecran de 844 — le bouton
     principal du site n'etait atteignable sur AUCUN telephone (mesure 320, 375, 390,
     414, 520, 768, 860 : jamais dans le premier ecran). Le titre porte le nom de
     l'entreprise, il passe devant ; la photo suit et amorce le defilement. */
  .hero .cadre{transform:none;max-width:340px;margin:0 auto}
  .hero .cadre::before{inset:-9px}
  .hero .etq-c{left:9px}
}
/* Entre 561 et 860 px la photo restait plafonnee a 340 px dans une colonne deux
   fois plus large : elle flottait au milieu de 210 px de bleu de chaque cote, et le
   bas du hero se lisait comme un vide. Elle occupe la place qu'il y a. */
@media (min-width:561px) and (max-width:860px){
  .hero .cadre{max-width:440px}
}

/* ---------- HERO DES PAGES INTÉRIEURES — refonte du 02/09 ----------
   L'ancien cadre carré, plafonné à 1000 px, produisait un PREMIER ÉCRAN MUET sur
   ordinateur : à 1440×900 le H1 commençait à y=1224, et à 1024 à y=1007. Le visiteur
   qui arrivait par Google sur une page service voyait une photo, et rien d'autre —
   ni titre, ni phrase, ni téléphone — jusqu'à ce qu'il fasse défiler. Sur 5 pages sur 9.
   Dispositif de bt30-fournes : la bande photo n'a pas à porter de texte, donc elle peut
   être belle ; le titre n'a pas à lutter contre elle, donc il peut être grand ; et le
   filet d'or fait descendre l'œil de l'une à l'autre. */
.hero-page{background:var(--sol);padding:0 0 clamp(34px,4.6vw,60px)}
.hero-page .vue{position:relative;overflow:hidden;background:var(--profond);
  height:clamp(190px,24vw,320px);border-bottom:4px solid var(--or);
  margin-top:clamp(14px,2vw,26px)}
.hero-page .vue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-page .vue .etq{left:auto;right:0;bottom:0}
.hero-page .mots{max-width:var(--max);margin:clamp(26px,3.4vw,46px) auto 0;
  padding:0 var(--gouttiere);display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,60px);align-items:end}
/* ⚠ 22ch et non 17ch. A 68 px, une mesure de 17 signes decoupe le titre en
   MOIGNONS : « Nous posons / du gainable / en chauffage / principal, avec /
   une regulation / piece par piece. » — six lignes de trois mots, dans une
   colonne qui en offrait le double. La mesure large rend 4 lignes pleines,
   rend 120 px au premier ecran, et remplit la colonne au lieu de la creuser. */
.hero-page h1{font-size:var(--fs-display-page);font-weight:700;max-width:22ch}
.hero-page .lead{color:var(--corps-doux,var(--encre-2));margin-top:15px;max-width:50ch}

/* ---------- ECRANS DE BUREAU COURTS : LE HERO SE REGLE SUR LA HAUTEUR ----------
   La refonte du 02/09 a corrige le premier ecran muet a 390, 768 et 1920 — pas a
   768 px de HAUT, qui est la hauteur de la moitie du parc portable. Mesure du
   02/09 a 1366×768 : le premier ecran s'arretait au milieu du mot « principal ».
   Ni accroche, ni bouton, ni telephone. A 1024×768 l'accroche et le telephone
   passaient sous la ligne de flottaison, et a 1440×900 aussi.
   Cause : bande photo et corps du titre se reglaient sur la LARGEUR (24vw, 5,4vw)
   alors que ce qui manque sur ces ecrans est de la HAUTEUR. Les trois valeurs
   se plafonnent donc aussi en vh. 1920×1080 n'entre pas dans la requete et ne
   bouge pas d'un pixel. */
@media (min-width:981px) and (max-height:920px){
  .hero-page .vue{height:clamp(160px,22.5vh,300px);margin-top:14px}
  .hero-page .mots{margin-top:clamp(14px,2.1vh,28px)}
  .hero-page h1{font-size:clamp(34px,min(5.4vw,7.3vh),68px)}
}

/* ---------- LA BANDE COURTE ET SOMBRE, SUR LES PAGES INTÉRIEURES AUSSI ----------
   Sans elle, une page intérieure enchaîne des paires texte/photo sur deux sols et se
   lit comme un document. Mesuré le 02/09 : accueil 204, pages service 125-131,
   à propos 107, contact 45. Le chiffre géant y devient le sujet de sa phrase. */
.bande-fait{background:var(--profond);color:#fff;padding-block:clamp(38px,4.8vw,64px)}
.bande-fait .in{max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(22px,3.6vw,56px);align-items:center}
.bande-fait .dit{color:#fff;margin-top:12px}
.bande-fait p{color:#C6D9E3;max-width:54ch}
.bande-fait h2{font-size:var(--fs-h3);font-weight:700;margin-bottom:10px}
@media (max-width:760px){
  /* En une colonne, le sous-titre du chiffre (17 px gras) et le h2 (19 px gras)
     se retrouvaient a 18 px l'un de l'autre, meme graisse et meme blanc : quatre
     lignes de gras d'affilee, ou l'on ne voit plus ou finit la legende du chiffre
     ni ou commence le titre. Le sous-titre se resserre sur son chiffre, l'ecart
     avec le titre double, et le titre reprend deux crans d'avance. */
  .bande-fait .in{grid-template-columns:1fr;gap:32px}
  .bande-fait .dit{font-size:16px;margin-top:8px;max-width:26ch}
  .bande-fait h2{font-size:22px}
}

/* ---------- LE BLOC AVIS, VERSION COMPACTE ----------
   Sur les 5 pages service, qui sont les pages d'atterrissage de la recherche Google :
   elles n'avaient AUCUNE preuve sociale, alors que 48 avis à 5 sur 5 sont le premier
   argument de l'entreprise. Une seule carte, la note globale, et le lien vers la fiche. */
/* Le rythme de la section a trois cartes appliquait 96 px de respiration haute et
   basse a UNE seule carte de 220 px : la carte flottait au milieu d'un aplat bleu
   pale de 730 px de haut, et se lisait comme un encart oublie plutot que comme la
   preuve de la page. La bande se resserre autour de ce qu'elle contient. */
.avis--compact{padding-block:clamp(44px,5.2vw,70px)}
.avis--compact .avis-grille{grid-template-columns:minmax(0,1fr);
  max-width:720px;margin-left:auto;margin-right:auto;
  margin-top:clamp(24px,2.6vw,32px)}


/* ---------- motif signature : la couronne de rayons, BICOLORE ----------
   Tirée du logo. Le dégradé n'ayant pas d'arête, c'est le SEUL porteur du
   registre chaud dans le hero : sans l'or ici, la page devient entièrement froide. */
.rayons{display:block;width:98px;height:44px}
.rayons line{stroke-width:2;stroke-linecap:round}

/* ---------- étiquette posée DANS le cadre photo ---------- */
.etq{position:absolute;left:0;bottom:0;background:var(--encre);color:#fff;
  font-family:var(--titre);font-weight:600;font-size:12.5px;padding:8px 15px}

/* ---------- bande de preuves ----------
   Largeurs INÉGALES + une cellule sur aplat : sans ça c'est le « bloc d'arguments nu »
   que check-blocs-nus.mjs refuse (design-artisan-btp §5 bis). */
.bande{background:#fff;position:relative;z-index:5;border-top:1px solid var(--filet)}
.preuves{max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere);
  display:grid;grid-template-columns:1.2fr 1.02fr 1fr 1.6fr}
.preuve{display:flex;gap:13px;align-items:flex-start;padding:17px 22px 17px 0}
.preuve+.preuve{border-left:1px solid var(--filet);padding-left:22px}
.preuve .t{font-family:var(--titre);font-weight:700;font-size:15px;line-height:1.2}
.preuve .s{font-size:13.5px;color:var(--encre-2);margin-top:3px;line-height:1.35}
.preuve--fort{background:var(--ciel-pale);padding-left:22px}
.pic{width:30px;height:30px;flex:none;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;stroke:var(--bleu-encre)}
.marques{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* box-sizing:border-box global : sans content-box, height + padding ne laissait
   que 12 px de logo et « atlantic » devenait une tache rouge. */
.marques img{box-sizing:content-box;height:28px;width:auto;object-fit:contain;
  background:#fff;border-radius:4px;padding:8px 10px}
.marques .qp{height:36px;padding:4px 8px}

/* ---------- titres de section ---------- */
.chapo{max-width:var(--max);margin:0 auto}
.chapo h2{font-size:var(--fs-h2);font-weight:700;max-width:22ch}
.chapo p{color:var(--corps-doux);margin-top:12px;max-width:62ch}

/* ---------- les deux registres : été / hiver (section signature de l'accueil) ----------
   Remplace la grille de 4 cartes services. Chaque bande porte sa photo et sa
   famille de travaux ; l'aplat de couleur dit le registre. */
.registres{display:flex;flex-direction:column;margin-top:clamp(26px,3.4vw,42px)}
.registre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:stretch;border-top:1px solid var(--filet)}
.registre:last-child{border-bottom:1px solid var(--filet)}
.registre .txt{padding:clamp(24px,2.8vw,36px) clamp(22px,2.8vw,34px);
  display:flex;flex-direction:column;justify-content:center}
.registre h3{font-size:var(--fs-h3);font-weight:700}
.registre p{color:var(--encre-2);margin-top:10px;max-width:44ch;font-size:15.5px}
.registre .saison{font-family:var(--titre);font-weight:700;
  font-size:clamp(26px,3.4vw,44px);line-height:1;letter-spacing:-.03em;margin-bottom:12px}
.registre .ph{position:relative;overflow:hidden;min-height:240px}
.registre .ph img{width:100%;height:100%;object-fit:cover}
.registre--froid .txt{background:var(--ciel-pale)}
.registre--froid .saison{color:var(--bleu-encre)}
.registre--chaud .txt{background:var(--or-pale)}
.registre--chaud .saison{color:#8A6206}   /* l'or ne porte pas de texte : 4,9 sur or-pale */
.registre--inv{direction:rtl}
.registre--inv>*{direction:ltr}

/* ---------- la liste à filets, avec UNE image posée dessus (DESIGN.md §4 bis ①) ----------
   Découple le nombre d'entrées du nombre de photos. L'image est là AU REPOS :
   visual-shots photographie au repos, et le survol n'existe pas au doigt. */
.liste{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere)}
/* ⚠ Le filet des lignes est COLORÉ à l'accent, jamais au gris neutre — et ce n'est pas
   une coquetterie : sans lui, une liste de N lignes égales en texte nu est le « bloc
   d'arguments nu » que check-blocs-nus.mjs refuse (design-artisan-btp §5 bis). Il
   REMPLACE le gris, il ne s'y ajoute pas (§5 ter : corriger, c'est remplacer).
   Sur l'accueil le signal vient de la photo flottante ; ailleurs, il vient d'ici. */
.lg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;
  padding:clamp(15px,1.8vw,22px) 0;border-top:1px solid #A9D2E8}
.lg:last-of-type{border-bottom:1px solid #A9D2E8}
/* Les trois mots que les clients répètent : ce sont des ARGUMENTS, pas de la navigation.
   Ils sont donc portés en gros corps — le signal « corps » du §5 bis, et surtout le
   traitement que ces trois mots méritent. */
.liste--fort .lg .n{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.03em}
.liste--fort .lg .d{font-size:16px;max-width:52ch}
.lg .n{font-family:var(--titre);font-weight:700;font-size:clamp(19px,2.2vw,28px)}
.lg a.n{text-decoration:none}
.lg a.n:hover{color:var(--bleu-encre)}
.lg .d{color:var(--encre-2);font-size:15px;margin-top:4px;max-width:46ch}
.lg .m{font-family:var(--titre);font-weight:600;font-size:13px;color:var(--bleu-encre);white-space:nowrap}
.flot{position:absolute;right:var(--gouttiere);top:clamp(90px,13vw,150px);z-index:4;
  width:min(330px,32%);aspect-ratio:4/5;overflow:hidden;
  box-shadow:0 24px 54px -20px rgba(10,30,45,.42)}
.flot img{width:100%;height:100%;object-fit:cover}

/* ---------- avant / après en vis-à-vis FIXE ----------
   ⛔ pas de curseur glissant : brûlé chez chopy et luka. Avant à GAUCHE, après à DROITE. */
.avap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(24px,3vw,36px)}
.avap figure{margin:0;position:relative}
.avap img{width:100%;height:auto}
.avap figcaption{font-family:var(--titre);font-weight:700;font-size:14px;
  margin-top:10px;display:flex;align-items:center;gap:9px}
.avap figcaption::before{content:'';width:22px;height:3px;background:var(--filet)}
.avap figure:last-child figcaption::before{background:var(--bleu)}

/* ---------- fiche d'intervention (section signature des pages service) ----------
   Remplace le trio « 3 avantages + icônes ». Texte plein, une vraie photo par étape. */
.fiche{display:flex;flex-direction:column;gap:clamp(26px,3.4vw,44px);margin-top:clamp(26px,3.4vw,40px)}
.etape{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,44px);align-items:center}
.etape:nth-child(even){direction:rtl}
.etape:nth-child(even)>*{direction:ltr}
.etape h3{font-size:var(--fs-h3);font-weight:700}
.etape p{color:var(--encre-2);margin-top:10px;max-width:48ch}
.etape .ph{position:relative;overflow:hidden;aspect-ratio:4/3}
.etape .ph img{width:100%;height:100%;object-fit:cover}

/* ---------- décalage de ligne de base (DESIGN.md §4 bis ④) ----------
   UNE seule occurrence sur le site, sinon ça devient le tic. Page à propos. */
/* Le H1 des pages qui ouvrent sur `.decale` (a propos, contact) n avait AUCUNE
   taille declaree : il retombait sur le 2em du navigateur, soit 38 px, quand les
   pages service tiennent 74. Mesure : contact affichait un contraste d echelle de
   x2,3 — le seuil sous lequel une page se lit comme un tableur est x4,5. */
.decale h1{font-size:var(--fs-display-page);font-weight:700;max-width:19ch}
.decale{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(24px,4vw,64px);align-items:end}
.decale .gauche{padding-bottom:6px}
.decale .gauche p{font-family:var(--titre);font-weight:600;font-size:clamp(17px,1.9vw,21px);
  line-height:1.28;max-width:24ch}

/* ---------- bandeau d'appel ---------- */
.appel{background:var(--profond);color:#fff;position:relative;overflow:hidden}
.appel .in{max-width:var(--max);margin:0 auto;padding:clamp(36px,4.6vw,60px) var(--gouttiere);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(22px,3.4vw,48px);align-items:center}
.appel h2{font-size:var(--fs-h2);font-weight:700;color:#fff;max-width:20ch}
.appel p{color:#B8CBD6;margin-top:12px;max-width:52ch}
.appel .actes{display:flex;flex-direction:column;gap:15px;align-items:flex-start}
.appel .tel{color:#fff}

/* ---------- RÉALISATIONS — la grille ----------
   Motif « Portfolio Grid, visuals first » (ui-ux-pro-max). 20 vraies photos de ses
   chantiers : c'est le matériau du site, pas une illustration du texte.
   Grille asymétrique : certaines cases occupent 2 colonnes ou 2 rangées, ce qui casse
   la grille régulière (design-artisan-btp §6, asymétrie 10-20 %).
   ⛔ L'étiquette est TOUJOURS visible, jamais au survol : visual-shots photographie au
   repos, et le survol n'existe pas au doigt. */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px);
  grid-auto-rows:clamp(150px,15vw,210px);margin-top:clamp(26px,3.4vw,42px)}
.gal{position:relative;overflow:hidden;background:var(--papier-2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:scale .32s ease-out}
.gal:hover img{scale:1.03}
.gal figcaption{position:absolute;left:0;bottom:0;right:0;padding:22px 14px 10px;
  color:#fff;font-family:var(--titre);font-weight:600;font-size:13px;line-height:1.25;
  background:linear-gradient(to top,rgba(10,26,36,.88),rgba(10,26,36,0))}
.gal figcaption span{display:block;font-weight:500;font-size:11.5px;color:#B7CBD6;
  letter-spacing:.04em;margin-top:2px}
.gal--l2{grid-column:span 2}
.gal--h2{grid-row:span 2}
.gal--l2h2{grid-column:span 2;grid-row:span 2}

/* ---------- bloc plein cadre : une image qui porte un titre ----------
   Remplace les sections de texte pur qui fermaient chaque page. */
.plein{position:relative;min-height:clamp(400px,54vh,600px);display:flex;
  align-items:flex-end;overflow:hidden}
.plein>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plein .dit{position:relative;z-index:3;width:100%;padding:clamp(70px,10vw,130px) var(--gouttiere) clamp(28px,3.4vw,44px);
  background:linear-gradient(to top,rgba(11,49,66,.95) 0%,rgba(12,54,72,.86) 42%,rgba(14,62,82,.5) 74%,rgba(14,62,82,0) 100%)}
.plein .in{max-width:var(--max);margin:0 auto}
.plein h2{color:#fff;font-size:var(--fs-h2);max-width:20ch}
.plein p{color:#C4D6E0;margin-top:12px;max-width:54ch}

/* ---------- la note Google, portée en grand ---------- */
.note{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:18px}
.note b{font-family:var(--titre);font-weight:700;font-size:clamp(46px,7vw,86px);
  line-height:.9;letter-spacing:-.04em;color:var(--encre)}
.note .sur{font-family:var(--titre);font-weight:600;font-size:17px;color:var(--encre-2)}
.etoiles{display:flex;gap:4px}
.etoiles svg{width:22px;height:22px;fill:var(--or)}

/* ---------- page contact ----------
   ⚠ en CLASSE, jamais en style en ligne : un style en ligne bat toute media query
   et la grille resterait à deux colonnes sur mobile. */
.contact-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4.5vw,70px);align-items:start}

/* ---------- formulaire ---------- */
.form{display:grid;gap:16px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ label{font-family:var(--titre);font-weight:600;font-size:14px}
.champ input,.champ textarea,.champ select{font-family:var(--corps);font-size:16px;
  padding:13px 15px;border:1px solid var(--filet);border-radius:5px;background:#fff;
  color:var(--encre);min-height:50px;transition:border-color .16s ease-out}
.champ textarea{min-height:140px;resize:vertical}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-color:var(--bleu-encre);outline:none}
.champ .aide{font-size:13px;color:var(--encre-2)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Le logo entier du pied, sur sa tuile blanche lui aussi. */

/* ---------- pied de page ---------- */
.pied{background:var(--encre);color:#fff;padding-block:clamp(40px,5vw,64px)}
.pied .in{max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere);
  display:grid;grid-template-columns:minmax(0,1.1fr) repeat(2,minmax(0,.8fr));
  gap:clamp(26px,4vw,56px)}
.pied .logo-pied{background:#fff;padding:18px 22px;border-radius:12px;display:grid;place-items:center}
.pied .logo-pied img{height:auto;width:min(240px,100%)}
.pied h4{font-family:var(--titre);font-weight:700;font-size:14px;letter-spacing:.06em;
  color:var(--ciel);margin-bottom:14px}
.pied ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.pied a{color:#D5DFE6;text-decoration:none;font-size:15px}
.pied a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.pied .bas{max-width:var(--max);margin:clamp(30px,4vw,44px) auto 0;padding:22px var(--gouttiere) 0;
  border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13.5px;color:#9FB0BC}

/* ---------- pages de texte (mentions légales) ---------- */
.texte{max-width:78ch}
.texte h2{font-size:var(--fs-h3);font-weight:700;margin-top:clamp(28px,3.4vw,40px)}
.texte h2:first-child{margin-top:0}
.texte p,.texte li{color:var(--encre-2);margin-top:11px}
.texte ul{padding-left:22px;margin-top:6px}
.texte b{color:var(--encre)}

/* ============================== RESPONSIVE ============================== */
@media (max-width:980px){
  .burger{display:block}
  /* ⚠ background OBLIGATOIRE : détaché de la barre blanche, le panneau tombe sur
     le hero sombre — sans fond, les liens encre y étaient illisibles (audit 02/09). */
  .nav{position:absolute;right:clamp(16px,2.4vw,28px);top:100%;flex-direction:column;align-items:stretch;
    gap:0;min-width:min(280px,86vw);padding:8px 0;background:#fff;
    border-bottom-left-radius:4px;border-bottom-right-radius:4px;
    box-shadow:0 18px 44px -14px rgba(12,30,45,.32);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease-out,transform .18s ease-out,visibility .18s}
  .nav[data-ouvert="true"]{opacity:1;visibility:visible;transform:translateY(0)}
  .nav>a,.nav>.deroulant>button{padding:13px 22px;width:100%;justify-content:space-between}
  .nav>a::after,.nav>.deroulant>button::after{display:none}
  /* ⚠ La ligne du dessus supprime le SEUL repère de page courante des liens de
     premier niveau (un ::after souligné). Résultat au doigt : sur une page
     service le menu surlignait bien l'entrée du panneau, mais sur Accueil,
     À propos ou Contact il n'indiquait plus rien — deux comportements pour un
     même menu, selon la page d'où on l'ouvre. Le repère revient sous la forme
     qu'utilise déjà le panneau, pour que ce soit le MÊME signe partout. */
  .nav>a[aria-current]{background:var(--ciel-pale);color:var(--bleu-encre)}
  .panneau{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border-top:0;border-left:3px solid var(--bleu);margin:0 0 6px 22px;min-width:0;padding:2px 0}
  .panneau::before{display:none}
  .tete{align-items:flex-start}
  .plaque img{height:42px}
  .plaque .nom{font-size:16px}

  .hero-page .mots,.appel .in,.decale{grid-template-columns:1fr}

  .preuves{grid-template-columns:1fr 1fr}
  .preuve+.preuve{border-left:0}
  .preuves>.preuve:nth-child(even){border-left:1px solid var(--filet)}

  .contact-grille{grid-template-columns:1fr}
  .registre,.registre--inv,.etape,.etape:nth-child(even){grid-template-columns:1fr;direction:ltr}
  .registre .ph,.etape .ph{order:-1;min-height:210px}
  .flot{position:relative;right:auto;top:auto;width:100%;max-width:340px;
    margin:22px 0 0;aspect-ratio:4/3}
  .pied .in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .preuves{grid-template-columns:1fr}
  .preuves>.preuve,.preuves>.preuve:nth-child(even){border-left:0;
    border-top:1px solid var(--filet);padding-left:0}
  .preuve--fort{padding:17px 18px}
  .duo{grid-template-columns:1fr}
  .avap{grid-template-columns:1fr}
  .lg{grid-template-columns:1fr}
  .lg .m{margin-top:6px}
  .pied .in{grid-template-columns:1fr}
  .pied .bas{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ============================================================================
   REFONTE DU 02/09 — LES DISPOSITIFS DE RYTHME
   Origine : mesure `qa/mesure-ambiance.mjs` sur 42 sites livrés + relevé section
   par section de gda-plomberie-veauche, bt30-fournes, reymond-remi-nimes,
   marlon-greco-montpellier, dr-elec-marseille, dotelec76.
   Ce que ces sites ont et que celui-ci n'avait pas :
     · un SOL teinté (fait plus haut : --sol)
     · une bande COURTE et fortement teintée AU MILIEU du corps, pas à la fin
     · un CHIFFRE géant qui devient le sujet de la phrase
     · UNE pièce qui sort de sa boîte
     · un motif DESSINÉ qui raconte la zone
   ========================================================================= */

/* ---------- le chiffre qui devient l'objet graphique ----------
   Chez gda : « 1 » en 64 px suivi de « seul interlocuteur ». Ce n'est pas une
   numérotation 01/02/03 (bannie) : c'est un mot écrit en chiffre, dans la phrase. */
.geant{font-family:var(--titre);font-weight:800;font-size:var(--fs-geant);
  line-height:.88;letter-spacing:-.04em;display:block;font-variant-numeric:tabular-nums}
.geant--or{color:var(--or)}
.geant--ciel{color:var(--ciel)}
.geant--bleu{color:var(--bleu-encre)}
.geant+.dit{font-family:var(--titre);font-weight:600;font-size:clamp(17px,1.5vw,21px);
  margin-top:10px;max-width:22ch;line-height:1.25}
/* ⚠ selecteur `p.sous` et non `.sous` : `.decale .gauche p` (0,0,2,1) battait
   `.geant-bloc .sous` (0,0,2,0) sur font-size, et la ligne d'agrements sortait a
   21 px — meme corps que la phrase qu'elle est censee servir, sur 5 lignes de gris.
   La hierarchie du bloc « +10 » s'inversait : le tertiaire pesait plus que le sujet. */
.geant-bloc p.sous{font-size:14.5px;line-height:1.45;color:var(--encre-2);
  margin-top:11px;max-width:34ch}
.section--sombre .geant-bloc .sous{color:#A9C3CF}

/* ---------- LA MOSAÏQUE DES RÉALISATIONS ----------
   Argument de rang 1 du référentiel (« le travail fini est beau ») : il était
   absent de la page. Grille VOLONTAIREMENT irrégulière — une photo haute qui
   couvre deux rangées à côté de deux photos empilées (dispositif bt30). Une
   grille 3xN régulière se relit comme un catalogue. */
.mosaique{display:grid;grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:clamp(180px,21vw,250px) clamp(180px,21vw,250px);
  gap:10px;margin-top:clamp(30px,3.6vw,46px)}
.mosaique figure{position:relative;overflow:hidden;margin:0;background:var(--profond)}
.mosaique img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:scale .5s cubic-bezier(.2,.7,.3,1)}
.mosaique figure:hover img{scale:1.045}
.mosaique figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:30px 16px 13px;font-family:var(--titre);font-weight:700;font-size:14px;
  color:#fff;background:linear-gradient(to top,rgba(8,34,46,.88),rgba(8,34,46,0))}
.mosaique .haute{grid-row:span 2}
.mosaique .large{grid-column:span 2}
@media (max-width:860px){
  .mosaique{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,clamp(150px,32vw,210px))}
}
@media (max-width:520px){
  .mosaique{grid-template-columns:1fr;grid-template-rows:none}
  .mosaique figure{height:clamp(190px,54vw,250px)}
  .mosaique .haute,.mosaique .large{grid-row:auto;grid-column:auto}
}

/* ---------- LA ZONE, DESSINÉE EN TERRITOIRE ----------
   D'après 21st.dev « World Map » de manuarora700. Une trame de points, un point
   d'origine, des arcs vers les communes réelles. Remplace la liste de noms, qui
   est de l'information et pas un argument (gate qa/check-message.mjs).
   ⛔ Aucun contour administratif dessiné : §7 interdit un tracé qui prétend à une
      exactitude invérifiable. La trame est abstraite, elle ne prétend à rien. */
.carte{display:block;width:100%;height:auto;margin-top:clamp(26px,3.4vw,44px)}
.carte .arc{fill:none;stroke:var(--or);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:5 7;opacity:.85}
.carte .pt{fill:var(--ciel)}
.carte .ville{font-family:var(--titre);font-weight:700;fill:#fff}
.carte .orig{fill:var(--or)}
.carte .halo{fill:none;stroke:var(--or);stroke-width:1.5;opacity:.45}
.carte .chez{font-family:var(--titre);font-weight:800;fill:var(--or);letter-spacing:.14em}
/* ⛔ Un nom pose SUR un arc n'est plus un nom. Six arcs partent du meme point et
   passent sous les etiquettes : mesure par echantillonnage de chaque trace, l'arc
   vers Decines traversait « MEYZIEU » (or sur or) et l'arc vers Jons traversait
   « Jonage » a TOUTES les largeurs. Le liser dans la couleur du fond interrompt le
   trait sous la lettre, comme sur n'importe quelle carte. Il est en unites du dessin,
   donc il grandit avec lui. */
.carte .ville,.carte .chez{paint-order:stroke;stroke:var(--profond);stroke-width:4;
  stroke-linejoin:round}

/* ⛔ ECHELLE DES ETIQUETTES — le piege du texte dans un SVG a `width:100%`.
   Le dessin est en unites de viewBox : une `font-size` fixe se REDUIT avec le
   conteneur. Mesure : 19 px de viewBox donnaient 22,0 px reels a 1440 mais 9,2 px a
   390 — plus petit que la moitie du texte courant d'a cote, illisible sur telephone,
   la ou passe la majorite du trafic. Le palier `max-width:600px` cense compenser
   etait un ordre de grandeur trop court, et il INVERSAIT le rendu : 14,5 px reels a
   600, 10,6 px a 601 — l'ecran s'elargissait, le texte retrecissait.
   La taille est donc redonnee par bande, pour que le rendu ECRAN reste entre 14 et
   22 px de 320 a 1920. Verifie au pixel aux 12 largeurs du sweep. */
.carte .ville{font-size:40px}
/* ⛔ Sur la bande étroite, « MEYZIEU » est le mot le plus large du dessin et il est
   dessiné EN DERNIER : à 42,5 px d'unités et .14em d'interlettre il faisait 232
   unités de large pour 214 entre le point de Décines et celui de Jonage, et son
   liseré recouvrait purement et simplement la pastille de Jonage — la commune
   gardait son nom mais perdait son point, seule des six. L'interlettre se resserre
   là où la place manque. */
.carte .chez{font-size:38px;letter-spacing:.02em}
@media (min-width:461px){ .carte .ville{font-size:27px} .carte .chez{font-size:28.5px;letter-spacing:.14em} }
@media (min-width:621px){ .carte .ville{font-size:20px} .carte .chez{font-size:21px} }
@media (min-width:841px){ .carte .ville{font-size:15px} .carte .chez{font-size:16px} }

/* ⛔ L'animation ne se declenchait qu'au CHARGEMENT, sur un bloc qui commence a
   4 954 px du haut : elle etait finie 2 secondes avant que quiconque puisse la voir.
   Et les delais etaient mal attribues — `:nth-child` compte AUSSI le `<defs>` et le
   `<rect>` de trame, donc les arcs 5 et 6 partaient les premiers et les arcs 1 et 2
   n'etaient jamais retardes. `:nth-of-type` ne compte que les `<path>`.
   La cascade est desormais accrochee au DEFILEMENT la ou le navigateur sait le faire ;
   ailleurs, et sous `prefers-reduced-motion`, les arcs sont simplement dessines.
   Aucun risque : `stroke-dasharray` reste visible a tout instant, l'animation ne fait
   que faire glisser la phase des tirets — elle n'a jamais cache le trait. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* ⛔ La chronologie se déclare sur le `<svg>`, PAS sur les `<path>`. Un élément
       SVG interne n'a pas de boîte CSS : `animation-timeline:view()` posé dessus ne
       se résout jamais et l'animation reste figée sur sa première image (vérifié :
       dashoffset bloqué à 220 à toutes les positions de défilement). Déclarée sur le
       SVG, qui est un élément remplacé donc une vraie boîte, elle est retrouvée par
       les arcs via le nom. */
    .carte{view-timeline-name:--zone;view-timeline-axis:block}
    .carte .arc{stroke-dashoffset:220;animation:tracer 1s linear forwards;
      animation-timeline:--zone;animation-range:entry 12% entry 78%}
    .carte .arc:nth-of-type(2){animation-range:entry 16% entry 82%}
    .carte .arc:nth-of-type(3){animation-range:entry 20% entry 86%}
    .carte .arc:nth-of-type(4){animation-range:entry 24% entry 90%}
    .carte .arc:nth-of-type(5){animation-range:entry 28% entry 94%}
    .carte .arc:nth-of-type(6){animation-range:entry 32% entry 98%}
  }
}
@keyframes tracer{to{stroke-dashoffset:0}}
.rayon{display:flex;align-items:baseline;gap:14px;margin-top:clamp(22px,2.6vw,34px);
  flex-wrap:wrap}
.rayon b{font-family:var(--titre);font-weight:800;
  font-size:clamp(38px,4.6vw,64px);line-height:1;letter-spacing:-.04em;color:var(--or)}
.rayon span{font-family:var(--titre);font-weight:600;font-size:15px;color:#BCD2DC;
  max-width:30ch;line-height:1.35}

/* ---------- LE VRAI BLOC GOOGLE ----------
   Demande de Mourad, 02/09 : « tu me fais des citations, moi je veux des vrais
   blocs Google ». Anatomie relevée sur dotelec76, le plus convaincant des trois
   sites livrés qui en portent un : pastille au G quatre couleurs, ligne de note
   à trois échelles, cartes à filet gauche épais et coin CARRÉ de ce côté-là (le
   coin carré fait lire le filet comme une reliure), avatar à initiale, verbatim
   en italique entre guillemets français.
   ⛔ Aucune photo de profil : données personnelles de tiers, une initiale suffit.
   ⛔ Aucune date ni note inventée : les 8 avis sont relevés sur la fiche publique
      et consignés dans AVIS-GOOGLE.md. Un verbatim tronqué n'est pas publié. */
.avis-tete{display:flex;flex-direction:column;align-items:center;text-align:center}
/* ⚠ color POSÉE, pas héritée : sur le panneau sombre des avis (.d-panneau,
   color #DCE8EE) la pastille héritait un texte pâle sur son propre fond blanc. */
.pastille-g{display:inline-flex;align-items:center;gap:9px;background:#fff;
  color:var(--encre);border:1px solid var(--filet);border-radius:999px;padding:9px 18px;
  box-shadow:0 4px 14px -6px rgba(12,30,45,.22);
  font-family:var(--titre);font-weight:600;font-size:14px}
.pastille-g svg{width:18px;height:18px;flex:none}
.avis-tete h2{font-size:var(--fs-h2);font-weight:700;margin-top:20px;max-width:19ch}
.avis-tete h2 em{font-style:normal;color:var(--bleu-encre)}
.note-ligne{display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;margin-top:16px}
.note-ligne .chiffre{font-family:var(--titre);font-weight:800;font-size:26px;
  letter-spacing:-.02em;line-height:1}
.note-ligne .sur{font-size:14px;color:var(--encre-2)}
.etoiles{display:inline-flex;gap:3px}
.etoiles svg{width:18px;height:18px;fill:#F5A623;flex:none}
/* `stretch` et non `start` : les trois cartes finissaient a 300 / 314 / 316 px,
   soit trois bas differents sur une meme rangee. Une capture d'avis Google aligne
   ses cartes ; le decalage se lisait comme un defaut de grille, pas comme du
   naturel. `.avis-texte{flex:1}` absorbe la difference a l'interieur. */
.avis-grille{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(30px,3.6vw,44px);align-items:stretch}
.avis-carte{position:relative;background:#fff;padding:24px 24px 22px;
  border-radius:4px 16px 16px 4px;
  border-left:5px solid var(--bleu-encre);
  box-shadow:0 10px 30px -18px rgba(12,30,45,.4),0 1px 3px rgba(12,30,45,.06);
  display:flex;flex-direction:column;overflow:hidden}
.avis-carte:nth-child(2){border-left-color:var(--or)}
.avis-carte:nth-child(3){border-left-color:var(--ciel)}
/* `top:-14px` + `overflow:hidden` sur la carte : le haut du glyphe etait coupe net
   et laissait deux moignons pendus dans l'angle. Descendu pour tenir entier. */
.avis-carte .guillemet{position:absolute;right:14px;top:2px;font-family:var(--titre);
  font-weight:800;font-size:74px;line-height:1;color:var(--ciel-pale);
  pointer-events:none;user-select:none}
.avis-carte:nth-child(2) .guillemet{color:var(--or-pale)}
.avis-qui{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-family:var(--titre);font-weight:800;font-size:19px;
  background:var(--ciel-pale);color:var(--bleu-encre)}
.avis-carte:nth-child(2) .avatar{background:var(--or-pale);color:#8A5D06}
.avis-nom{font-family:var(--titre);font-weight:700;font-size:15px;line-height:1.2}
.avis-date{font-size:12px;color:var(--encre-2);margin-top:2px}
.avis-carte .etoiles{margin-top:15px}
.avis-carte .etoiles svg{width:15px;height:15px}
/* ⛔ PAS d italique. Google affiche ses avis en romain, dans la meme graisse que
   le reste. L italique est le registre CITATION — exactement ce que Mourad a
   rejete (« tu me fais des citations, je veux des vrais blocs Google »).
   Ce qui distingue le verbatim du texte marketing, c est la CARTE, pas la pente. */
.avis-texte{font-size:15px;line-height:1.5;margin-top:12px;
  position:relative;z-index:1;flex:1}
.avis-reponse{margin-top:14px;padding:12px 14px;background:var(--papier-2);
  border-radius:4px;font-size:13.5px;line-height:1.45;color:var(--encre-2)}
.avis-reponse b{display:block;font-family:var(--titre);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bleu-encre);margin-bottom:5px}
.avis-quoi{margin-top:16px;padding-top:13px;border-top:1px solid var(--filet);
  font-family:var(--titre);font-weight:700;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bleu-encre)}
.avis-pied{display:flex;justify-content:center;margin-top:clamp(24px,3vw,34px)}
@media (max-width:900px){.avis-grille{grid-template-columns:1fr}}

/* ---------- L'ENCART CHAUD QUI COUPE ----------
   Le seul territoire visuel qu'aucun concurrent n'occupe : le cache groupe.
   Ses mots, pas les nôtres : « Cache groupe gris anthracite, la touche finale. »
   La photo DÉBORDE du cadre vers le bas — c'est la pièce qui sort de sa boîte,
   et c'est elle qui coud cette section à la suivante (dispositif reymond). */
/* ⚠ Le debord ne se mesure PAS sur la marge negative : il se mesure entre le bas
   de la photo et le bas de la SECTION. Premiere version : marge -64 px, mais la
   section gardait ses 96 px de rythme en bas — la photo finissait 60 px AU-DESSUS
   du bord, le dispositif etait invisible a toutes les largeurs.
   Ici le debord est deterministe : `align-self:end` colle la boite-marge de la photo
   au bas de la rangee, donc bas de photo = bas de rangee + |marge|, et
   debord = |marge| - padding-bottom, quelle que soit la hauteur de la colonne texte. */
.encart{position:relative;z-index:1;padding-bottom:clamp(30px,3.2vw,44px)}
.encart .in{max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:center}
.encart .mots h2{font-size:var(--fs-h2);font-weight:700;max-width:15ch}
/* Ses mots a lui : c'est le deuxieme element le plus fort du bloc, il ne peut pas
   etre peint dans le gris du texte courant (il l'etait, faute de `color` propre). */
.encart .mots .sienne{font-family:var(--titre);font-weight:600;color:var(--profond);
  font-size:clamp(18px,1.7vw,23px);line-height:1.3;margin-top:20px;
  padding-left:18px;border-left:4px solid var(--or);max-width:26ch}
.encart .mots p{margin-top:18px;color:var(--encre-2);max-width:44ch}
.encart .vue{position:relative;z-index:2;align-self:end;aspect-ratio:4/3;overflow:hidden;
  margin-bottom:calc(-1 * clamp(56px,6vw,86px));
  box-shadow:0 30px 60px -34px rgba(12,30,45,.55)}
.encart .vue img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .encart{padding-bottom:0}
  .encart .in{grid-template-columns:1fr}
  .encart .vue{margin-bottom:0;align-self:auto;order:-1}
}

/* ---------- LA LIGNE PLUS LARGE QUE SES VOISINES ----------
   Dispositif dr-elec : une seule ligne d'une liste dépasse de 24 px de chaque
   côté. C'est minuscule et ça suffit à ce que la liste cesse d'être un tableau. */
.liste .ligne--large{margin-left:-24px;margin-right:-24px;padding-left:24px;
  padding-right:24px;background:var(--ciel-pale);border-radius:3px}
@media (max-width:620px){
  .liste .ligne--large{margin-left:-14px;margin-right:-14px;
    padding-left:14px;padding-right:14px}
}

/* ---------- LA BANDE D'APPEL EN OR ----------
   Elle était sombre et COLLÉE au pied de page sombre : 749 px de sombre continu
   qui ne coupaient rien. En or plein avec le texte en encre (dispositif reymond,
   panneau orange à texte noir), elle redevient une frontière. */
.appel--or{background:var(--or);color:var(--encre)}
.appel--or h2,.appel--or p{color:var(--encre)}
.appel--or p{opacity:.84}
.appel--or .btn{background:var(--encre);color:#fff}
.appel--or .btn:hover{background:#000}
.appel--or .tel{color:var(--encre)}

/* ---------- LA BANDE PHOTO PLEINE LARGEUR ----------
   Dispositif gda-plomberie-veauche. Deux raisons d'exister :
   1. elle coupe le corps de page là où il s'allonge ;
   2. son voile est en BLEU DE MARQUE, pas en noir. Un voile teinté donne une
      température à la photo, un voile noir la salit (relevé sur marlon-greco,
      dont le voile est brun et non noir). */
.bande-photo{position:relative;background:var(--profond);
  height:clamp(260px,34vw,420px);overflow:hidden;display:grid;align-items:end}
.bande-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.74}
/* ⚠ Le voile doit couvrir TOUT le bloc de texte, pas seulement le bas de la bande.
   Mesure au pixel du 02/09 (pire pixel sous chaque ligne, photo composee + voile) :
   la PREMIERE ligne du titre blanc tombait a 3,65 sur a-propos, 4,26 sur contact,
   4,48 sur l'accueil — sous les 4,5 exiges. L'ancien degrade n'atteignait .93 qu'au
   ras du bas ; a la hauteur du texte il ne valait plus que .32. Le palier haut monte
   donc jusqu'au-dessus du sur-titre, et la photo garde le tiers superieur en clair. */
.bande-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(9,42,57,.94) 0%,rgba(9,42,57,.88) 44%,
    rgba(9,42,57,.74) 64%,rgba(9,42,57,.26) 82%,rgba(9,42,57,.02) 100%)}
.bande-photo .mot{position:relative;z-index:2;max-width:var(--max);width:100%;
  margin:0 auto;padding:0 var(--gouttiere) clamp(26px,3.4vw,42px)}
/* ⚠ `--or-pale` et non `--or`. L'or plein est une valeur MOYENNE (luminance ,34) :
   sur une photo il ne peut depasser 7,8 de contraste meme sur du noir, et mesure
   1,35 a 1,83 au pire pixel sur les trois bandes — un sur-titre de 12 px illisible,
   sur l'accueil comme sur les deux pages neuves. Aucun voile raisonnable ne le
   sauve : il faudrait .92 d'opacite, soit la photo effacee. L'or PALE garde le
   registre chaud et tient 5 a 8 de contraste sur le meme fond. */
.bande-photo .mot span{display:block;font-family:var(--titre);font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-pale);
  margin-bottom:12px}
.bande-photo .mot p{font-family:var(--titre);font-weight:700;color:#fff;
  font-size:clamp(20px,2.4vw,32px);max-width:26ch;line-height:1.2;
  text-shadow:0 2px 18px rgba(6,26,36,.5)}

/* ---------- AVANT / APRÈS, EN VIS-À-VIS FIXE ----------
   ⛔ Jamais de curseur glissant : brûlé chez chopy et luka.
   Avant à GAUCHE, après à DROITE — règle non négociable.
   ⚠ Classe `duo-photo` et non `duo` : `.duo` sert DEJA la rangee a deux champs du
   formulaire de contact (nom / telephone). Les deux blocs portaient le meme nom,
   et c'est la version photo — ecrite plus bas — qui gagnait : la rangee du
   formulaire heritait de sa gouttiere de 10 px et d'une marge haute de 10 px
   qu'on ne lui avait jamais demandees. Une collision de nom de classe deforme en
   silence un composant qu'on ne regarde pas. */
.duo-photo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.duo-photo figure{position:relative;overflow:hidden;margin:0;aspect-ratio:2.5/1;
  background:var(--profond)}
.duo-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duo-photo figcaption{position:absolute;left:0;bottom:0;background:var(--encre);color:#fff;
  font-family:var(--titre);font-weight:700;font-size:12.5px;padding:7px 14px}
.duo-photo figure:last-child figcaption{background:var(--bleu-encre)}
@media (max-width:620px){.duo-photo{grid-template-columns:1fr}}


/* ---------- LA BANDE D'AGRÉMENTS — en gros, juste après le hero ----------
   Décision de Mourad (02/09) : « Atlantic + RGE + décennale doit apparaître au
   début en gros, c'est le truc pour rassurer. » Ses clients arrivent par
   recommandation et cherchent une confirmation immédiate : la voici.
   Trois cellules, deux portent un LOGO (signal image, check-blocs-nus), la
   troisième porte la décennale en typo forte. */
@media (max-width:700px){
  .agrements .in{justify-content:center;text-align:center}
  .agrements .lab{width:100%;text-align:center}
}

/* ---------- LE FORMULAIRE, STYLÉ ----------
   Demande de Mourad : « le formulaire de contact doit être stylé aussi ».
   Champs hauts (48 px = cible tactile), bordure 2 px qui répond au focus,
   étiquettes en petites capitales, aide discrète. */
.champ{display:flex;flex-direction:column;gap:7px}
.champ label{font-family:var(--titre);font-weight:700;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--encre-2)}
.champ input,.champ select,.champ textarea{
  font:inherit;color:var(--encre);background:var(--papier);
  border:2px solid var(--filet);border-radius:6px;
  padding:12px 14px;min-height:48px;width:100%;
  transition:border-color .25s cubic-bezier(.32,.72,0,1),box-shadow .25s cubic-bezier(.32,.72,0,1)}
.champ textarea{min-height:130px;resize:vertical}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:#B9C6CF}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--bleu);
  box-shadow:0 0 0 4px rgba(30,143,206,.16)}
.champ .aide{font-size:13px;color:var(--encre-2);line-height:1.45}
form .btn{width:100%;justify-content:center;min-height:54px;font-size:16.5px}
@media (min-width:700px){form .btn{width:auto;padding-inline:38px}}

/* La mosaïque étendue de la page Réalisations : quatre rangées, deux hautes. */
.mosaique--xl{grid-template-rows:repeat(4,clamp(160px,16vw,220px))}
@media (max-width:860px){.mosaique--xl{grid-template-rows:repeat(6,clamp(150px,32vw,200px))}}
@media (max-width:520px){.mosaique--xl{grid-template-rows:none}}

/* Le curseur avant/après de la page Réalisations — mécanique bso-batiment. */
.ba{position:relative;aspect-ratio:16/10;overflow:hidden;--pos:50%;
  cursor:ew-resize;user-select:none;touch-action:pan-y;background:var(--profond);
  box-shadow:0 36px 70px -32px rgba(0,0,0,.55)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-avant{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba.ba-doux .ba-avant{transition:clip-path 1.15s cubic-bezier(.32,.72,0,1)}
.ba.ba-doux .ba-poignee{transition:left 1.15s cubic-bezier(.32,.72,0,1)}
.ba-etq{position:absolute;top:14px;padding:6px 14px;border-radius:999px;
  background:rgba(10,34,46,.85);color:#fff;font-family:var(--titre);font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;z-index:3}
.ba-etq-g{left:14px}
.ba-etq-d{right:14px;background:var(--or);color:var(--encre)}
.ba-poignee{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;
  transform:translateX(-50%);z-index:4;border:0;padding:0;cursor:ew-resize;
  box-shadow:0 0 14px rgba(0,0,0,.35)}
.ba-poignee::before{content:"⇄";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
  background:#fff;color:var(--profond);font-size:19px;font-weight:700;
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.3);
  transition:transform .3s cubic-bezier(.32,.72,0,1)}
.ba-poignee:hover::before,.ba-poignee:focus-visible::before{transform:translate(-50%,-50%) scale(1.08)}
.ba-poignee:focus-visible{outline:none}
@media (max-width:860px){#grille-ba{grid-template-columns:1fr!important}.ba{aspect-ratio:4/3}}


/* ---------- LE COLLAGE DÉCALÉ ----------
   Choisi par Mourad : component-bank ecovaptoiture__index__section-c99a33.
   Deux colonnes de photos aux formats INÉGAUX, la seconde poussée vers le bas :
   le décalage fait la vie, pas la grille. */
.collage-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.5vw,72px);align-items:center}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.collage .col{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px)}
.collage .col:nth-child(2){padding-top:clamp(28px,4vw,56px)}
.collage figure{position:relative;overflow:hidden;border-radius:14px;margin:0;
  background:var(--profond);box-shadow:0 22px 44px -26px rgba(8,26,36,.4)}
.collage figure.r45{aspect-ratio:4/5}
.collage figure.r11{aspect-ratio:1/1}
.collage figure.r46{aspect-ratio:4/6}
.collage img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.32,.72,0,1)}
.collage figure:hover img{transform:scale(1.045)}
.collage figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 13px 11px;
  font-family:var(--titre);font-weight:700;font-size:12.5px;color:#fff;
  background:linear-gradient(to top,rgba(8,30,40,.88),transparent)}
.collage-mots .lien{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--titre);font-weight:700;color:var(--bleu-encre);text-decoration:none;
  border-bottom:2px solid var(--or);padding-bottom:3px}
.collage-mots .lien:hover{color:var(--encre)}
@media (max-width:860px){
  .collage-grille{grid-template-columns:1fr}
  .collage{order:-1}
}

/* ---------- L'AVANT/APRÈS SUR L'ACCUEIL, EN CLAIR ----------
   Choisi par Mourad : ecovaptoiture__index__section-2e7f37. Texte 2/5, curseur 3/5. */
.ba-accueil{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4.5vw,64px);align-items:center}
.puces{list-style:none;margin-top:22px;display:grid;gap:12px;padding:0}
.puces li{border-left:3px solid var(--or);padding-left:14px;color:var(--encre-2)}
/* ⚠ encre-2 est bannie des fonds sombres (DESIGN.md §2) : sur la section sombre
   de Réalisations, les puces prennent le clair du vocabulaire du panneau avis. */
.section--sombre .puces li{color:#DCE8EE}
@media (max-width:860px){.ba-accueil{grid-template-columns:1fr}}


/* ---------- AVIS, VARIANTE D « La parole en grand » ----------
   Choix de Mourad sur maquettes/variantes-avis.html (02/09). L'avis d'Aly L.,
   celui qui nomme l'objection mère (« il est difficile de faire confiance »),
   cité en très grand dans un cadre fileté d'or, sur panneau profond arrondi.
   Les trois autres avis en cartes verre. Aucun verbatim tronqué, dates réelles. */
.d-panneau{background:var(--profond);border-radius:24px;
  padding:clamp(30px,4.5vw,64px);margin-top:clamp(22px,2.6vw,34px);color:#DCE8EE}
.d-haut{display:flex;justify-content:center}
.d-cadre{position:relative;border:1px solid rgba(233,165,23,.65);border-radius:4px;
  padding:clamp(28px,3.8vw,52px);margin-top:30px;text-align:center}
/* top calé pour que l'ENCRE du glyphe (haut de son em-box) soit à cheval sur le
   filet : à -25px elle flottait 16 px au-dessus et la coupure semblait un accroc.
   ⚠ height BORNÉE : l'em-box de 52px descendait à +43px sous le filet et son fond
   profond repeignait la 1re ligne du texte quand le padding mobile tombe à 28px. */
.d-guillemet{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  height:32px;background:var(--profond);padding-inline:16px;font-family:var(--titre);
  font-weight:800;font-size:52px;line-height:1;color:var(--or)}
.d-grand{font-family:var(--titre);font-weight:600;
  font-size:clamp(18px,1.85vw,25px);line-height:1.45;letter-spacing:-.01em;
  color:#F2F7FA;max-width:64ch;margin:0 auto}
.d-cadre .avis-qui{justify-content:center;margin-top:26px}
.d-cadre .avatar{background:var(--ciel);color:var(--encre)}
.d-panneau .avis-nom{color:#fff}
.d-panneau .avis-date{color:#9FB8C4}
.d-suite{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.d-carte{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:20px}
.d-carte .texte{color:#DCE8EE;font-size:14.5px;line-height:1.55;margin-top:12px}
.d-carte .etoiles{margin-top:12px}
.d-carte .avis-reponse{background:rgba(255,255,255,.07);color:#C3D5DE}
.d-carte .avis-reponse b{color:#fff}
.d-pied{display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;margin-top:30px}
.d-pied .ligne-note{display:flex;align-items:center;gap:10px;color:#C3D5DE;font-size:14.5px}
.d-pied .chiffre-note{font-family:var(--titre);font-weight:800;font-size:24px;color:#fff}
.d-pied .btn--ligne{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);color:#fff}
.d-pied .btn--ligne:hover{background:#fff;color:var(--profond);box-shadow:inset 0 0 0 2px #fff}
@media (max-width:900px){.d-suite{grid-template-columns:1fr}}
@media (max-width:640px){
  .d-cadre,.d-grand{text-align:left}
  .d-cadre .avis-qui{justify-content:flex-start}
}
/* Sous 410px la rangée avatar+nom+étoiles ne tient plus (mesuré : 252px requis,
   221 disponibles à 375) : le nom/date se faisait écraser (date sur 3 lignes) et
   la 5e étoile montait sur le filet or. Les étoiles passent en rangée pleine,
   alignées sous le nom (58px = avatar 46 + gap 12). */
@media (max-width:410px){
  .d-cadre .avis-qui{flex-wrap:wrap}
  .d-cadre .avis-qui .avis-nom,.d-cadre .avis-qui .avis-date{white-space:nowrap}
  .d-cadre .avis-qui .etoiles{flex-basis:100%;margin-top:4px;padding-left:58px}
}


/* ---------- PRESTATIONS, VARIANTE B « Les cartes à étiquette » ----------
   Choix de Mourad sur maquettes/variantes-prestations.html (02/09, source
   21st.dev conditiongrid). Cinq tuiles photo pleines, deux grandes puis trois :
   la pastille posée sur la photo porte le nom et la mention, la flèche en coin
   dit que ça se visite. Zéro paragraphe. */
.b-tuiles{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;
  margin-top:clamp(22px,2.6vw,34px)}
.b-tuile{position:relative;border-radius:16px;overflow:hidden;display:block;
  background:var(--profond)}
.b-tuile img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.32,.72,0,1)}
.b-tuile:hover img{transform:scale(1.045)}
.b-grande{grid-column:span 3;aspect-ratio:16/10}
.b-petite{grid-column:span 2;aspect-ratio:4/3.2}
.b-etiquette{position:absolute;left:14px;bottom:14px;right:70px;
  background:var(--profond);color:#fff;border-radius:12px;padding:11px 16px}
.b-etiquette .n{display:block;font-family:var(--titre);font-weight:700;
  font-size:16px;line-height:1.2}
.b-etiquette .m{display:block;font-size:12px;color:#A9C6D4;margin-top:2px}
.b-tuile .fleche{position:absolute;right:14px;bottom:14px;width:36px;height:36px;
  border-radius:50%;background:var(--papier);color:var(--profond);
  display:grid;place-items:center;font-size:16px;
  transition:background-color .3s cubic-bezier(.32,.72,0,1),
    color .3s cubic-bezier(.32,.72,0,1),transform .3s cubic-bezier(.32,.72,0,1)}
.b-tuile:hover .fleche{background:var(--or);color:var(--encre);
  transform:translate(2px,-2px)}
@media (max-width:1000px){
  .b-grande{grid-column:span 6}
  .b-petite{grid-column:span 3}
}
@media (max-width:640px){
  .b-petite{grid-column:span 6;aspect-ratio:16/10}
}


/* ---------- ARGUMENTS RÉALISATIONS, VARIANTE E « L'étape éclairée » ----------
   Choix de Mourad sur maquettes/variantes-args-realisations.html (02/09, source
   21st.dev ayushmxxn/feature-section). La preuve survolée passe en profond et la
   grande photo change avec elle ; au repos le rendez-vous est allumé ; le
   clavier déclenche le même ressort (focus-visible). Sans :has(), la photo 1
   reste affichée et le bloc se lit posé : dégradation propre. */
.eyebrow{font-family:var(--titre);font-weight:700;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bleu-encre)}
.p-titre{font-family:var(--titre);font-weight:700;font-size:clamp(18px,1.6vw,21px);
  line-height:1.2;margin-top:7px}
.p-ligne{color:var(--encre-2);font-size:15px;margin-top:8px}
/* La couleur suit la même courbe que le fond : sans elle, le texte passait au
   blanc d'un coup pendant que le fond était encore clair (flash illisible). */
.eyebrow,.p-titre,.p-ligne{transition:color .35s cubic-bezier(.32,.72,0,1)}
.e-duo{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,3.6vw,54px);
  align-items:start;margin-top:clamp(26px,3vw,40px)}
.e-item{display:block;padding:20px 22px;border-radius:14px;cursor:default;
  transition:background-color .35s cubic-bezier(.32,.72,0,1)}
.e-item + .e-item{margin-top:10px}
.e-duo:not(:has(.e-item:hover)):not(:has(.e-item:focus-visible)) .e-i1,
.e-item:hover,.e-item:focus-visible{background:var(--profond)}
.e-duo:not(:has(.e-item:hover)):not(:has(.e-item:focus-visible)) .e-i1 .p-titre,
.e-item:hover .p-titre,.e-item:focus-visible .p-titre{color:#fff}
.e-duo:not(:has(.e-item:hover)):not(:has(.e-item:focus-visible)) .e-i1 .p-ligne,
.e-item:hover .p-ligne,.e-item:focus-visible .p-ligne{color:#C9DAE3}
.e-duo:not(:has(.e-item:hover)):not(:has(.e-item:focus-visible)) .e-i1 .eyebrow,
.e-item:hover .eyebrow,.e-item:focus-visible .eyebrow{color:var(--ciel)}
.e-cadre{position:sticky;top:88px;border-radius:18px;overflow:hidden;
  aspect-ratio:4/3.1;background:var(--sol-2);margin:0}
.e-cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s cubic-bezier(.32,.72,0,1)}
.e-cadre .e-p1{opacity:1}
.e-duo:has(.e-i2:hover) .e-p2,.e-duo:has(.e-i2:focus-visible) .e-p2,
.e-duo:has(.e-i3:hover) .e-p3,.e-duo:has(.e-i3:focus-visible) .e-p3{opacity:1}
.e-duo:has(.e-i2:hover) .e-p1,.e-duo:has(.e-i3:hover) .e-p1,
.e-duo:has(.e-i2:focus-visible) .e-p1,.e-duo:has(.e-i3:focus-visible) .e-p1{opacity:0}
.e-cadre figcaption{position:absolute;left:12px;bottom:12px;background:var(--profond);
  color:#fff;font-family:var(--titre);font-weight:600;font-size:12px;
  padding:7px 13px;border-radius:999px;z-index:1}
@media (max-width:900px){
  .e-duo{grid-template-columns:1fr}
  /* ⛔ relative, PAS static : les photos du cadre sont en absolute inset:0 ;
     en static le cadre cesse d'être leur bloc englobant et elles partent
     couvrir le premier écran de la page (vécu ici même, mobile 390). */
  .e-cadre{position:relative;top:auto;order:-1;aspect-ratio:16/9}
}


/* ---------- MARQUES POSÉES (bande agréments) ----------
   Station technique agréée Atlantic (statut vérifié atlantic.fr : sélection et
   formation fabricant, mise en service / entretien / dépannage, extensions de
   garantie) + Toshiba et Daikin posés. Wordmark texte en secours si les logos
   officiels ne sont pas encore sur le disque. */


/* ---------- PREUVES, VARIANTE C « Le registre en marge » ----------
   Choix de Mourad sur maquettes/variantes-preuves-services.html (02/09, source
   21st.dev uilayout.contact/testimonial-basic). Le bloc vit sur 6 pages en
   réassurance secondaire : trois lignes serrées, étiquette en marge, un seul
   style de filet. Le .lab est resurchargé ici (celui de la bande agréments
   porte d'autres réglages). */
.c-reg{margin-top:18px;border-top:3px solid var(--or)}
.c-note{font-size:14px;color:var(--encre-2);margin-top:8px}
.c-note b{font-family:var(--titre);font-weight:800;color:var(--encre);font-size:16px}
.c-ligne{display:grid;grid-template-columns:minmax(130px,190px) 1fr;
  gap:clamp(14px,2.4vw,34px);padding:clamp(14px,1.8vw,20px) 0;
  border-bottom:1px solid var(--filet)}
.c-ligne .lab{font-family:var(--titre);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bleu-encre);
  padding-top:3px}
.c-corps{font-size:15.5px;color:var(--encre-2);max-width:66ch}
.c-corps b{font-family:var(--titre);font-weight:700;color:var(--encre);
  font-size:16.5px;margin-right:6px}
@media (max-width:640px){
  .c-ligne{grid-template-columns:1fr;gap:5px;padding:13px 0}
}


/* ---------- BANDEAU, VARIANTE E « Le certificat » ----------
   Choix de Mourad (02/09) sur maquettes/variantes-bandeau-marques.html
   (21st designali-in/certificate + verified-badge). La décennale en pièce
   centrale traitée en attestation ; statut Atlantic à gauche avec sa mention
   d'annuaire vérifiable ; marques POSÉES seules à droite — RGE QualiPAC
   n'est pas une marque posée, il vit au footer avec son bénéfice (aides). */
.kick{font-family:var(--titre);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-2);line-height:1.4}
.l-atlantic{height:clamp(44px,4.4vw,58px);width:auto;object-fit:contain}


/* ---------- RGE QUALIPAC AU FOOTER ----------
   Demande Mourad 02/09 : « mets-le en avant et en valeur directement dans le
   footer ». Faits sourcés (qualit-enr.org, rge.fr) : qualification PAC délivrée
   par Qualit'EnR, 4 ans, audit terrain ; EXIGÉE pour que la pompe à chaleur du
   client ouvre droit aux aides publiques (MaPrimeRénov', prime CEE, TVA réduite).
   Le logo violet vit sur pastille claire (footer sombre). */
.pied-rge{display:flex;align-items:center;gap:clamp(16px,2.2vw,26px);
  max-width:var(--max);margin:0 auto;padding:clamp(18px,2.4vw,26px) var(--gouttiere);
  border-top:1px solid rgba(255,255,255,.14)}
.pied-rge .plaquette{background:#fff;border-radius:12px;padding:10px 14px;flex:none;
  display:grid;place-items:center}
.pied-rge .plaquette img{height:52px;width:auto;object-fit:contain;display:block}
.pied-rge b{display:block;font-family:var(--titre);font-weight:800;font-size:17px;
  color:#fff;letter-spacing:-.01em}
.pied-rge p{font-size:13.5px;color:#B9C6CF;max-width:64ch;margin-top:4px}
@media (max-width:640px){
  .pied-rge{flex-direction:column;align-items:flex-start}
}


/* ---------- CONTACT, VARIANTE A « Le duo de cartes » ----------
   Choix de Mourad (02/09) sur maquettes/variantes-formulaire-contact.html
   (banque : kt-plomberie-thiers section-3a7db3, recolorée SD). Deux portes
   d'entrée de même rang : la carte téléphone en profond, la carte formulaire
   en blanc. Les styles .champ existants continuent de s'appliquer. */
.a-grille{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(18px,2.4vw,32px);align-items:stretch}
.a-tel{background:var(--profond);color:#fff;border-radius:10px;
  padding:clamp(24px,3.2vw,42px);display:flex;flex-direction:column}
.a-tel .k{font-family:var(--titre);font-weight:700;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ciel)}
.a-tel h2{color:#fff;font-size:clamp(21px,2.4vw,28px);margin-top:10px;font-weight:700}
.a-num{display:inline-block;margin-top:clamp(18px,2.4vw,30px);color:#fff;
  font-family:var(--titre);font-weight:800;font-size:clamp(30px,3.6vw,44px);
  letter-spacing:-.01em;text-decoration:none}
.a-num:hover{color:var(--ciel)}
.a-mail{display:inline-block;margin-top:14px;font-weight:600;color:#DFEBF2;
  text-decoration:underline;text-underline-offset:5px;
  text-decoration-color:rgba(120,192,228,.65)}
.a-mail:hover{color:#fff}
.a-lignes{margin-top:auto;padding-top:clamp(20px,2.6vw,30px)}
.a-ligne{padding:15px 0;border-top:1px solid rgba(169,210,232,.34)}
.a-ligne .n{font-family:var(--titre);font-weight:700;font-size:16px;color:#fff}
.a-ligne .d{font-size:14.5px;color:#BCD2DC;margin-top:4px}
.a-form{background:#fff;border:1px solid var(--filet);border-radius:10px;
  padding:clamp(22px,3vw,40px)}
.a-form h2{font-size:clamp(20px,2.3vw,26px);font-weight:700;margin-bottom:6px}
.a-form .avant{color:var(--encre-2);font-size:15px;margin-bottom:18px}
@media (max-width:900px){
  .a-grille{grid-template-columns:1fr}
  .a-lignes{margin-top:clamp(20px,2.6vw,30px)}
}


/* ---------- AGRÉMENTS, VARIANTE E « La lame et la ligne » (03/09) ----------
   Choix de Mourad sur maquettes/variantes-bandeau-couture.html (lame du
   système SD + anatomie 21st 1828 tailark, regardé). Le hero se referme par
   sa lame or ; dessous, les trois preuves tiennent en UNE ligne sur le sol,
   jalonnée de losanges or. Pas de bande, pas de cadre : une signature.
   Les implications détaillées vivent au bloc R1, au D2 et au footer. */
.ligne-preuves{background:var(--sol)}
.ligne-preuves .in{max-width:var(--max);margin:0 auto;
  padding:clamp(16px,2vw,22px) var(--gouttiere);
  display:flex;align-items:center;column-gap:clamp(16px,2.2vw,26px)}
.lp-label{flex:none;font-family:var(--titre);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);
  padding-right:clamp(14px,2vw,24px);border-right:1px solid var(--filet)}
.lp-items{flex:1;display:flex;align-items:center;justify-content:space-between;
  column-gap:clamp(14px,2vw,28px);row-gap:12px;flex-wrap:wrap}
.lp-item{display:inline-flex;align-items:center;gap:11px;font-size:14.5px;
  color:var(--encre-2);white-space:nowrap}
.lp-item b{font-family:var(--titre);font-weight:700;color:var(--encre);font-size:14.5px}
.lp-item img{height:26px;width:auto;object-fit:contain;display:block}
.lp-item img.lp-qp{height:32px}
.pastille-logo{background:var(--papier);border-radius:12px;padding:5px 10px;
  border:1px solid var(--filet)}
.lp-dix{font-family:var(--titre);font-weight:800;font-size:22px;color:var(--encre);
  letter-spacing:-.02em}
.lp-dix small{font-size:13px;font-weight:700;color:var(--bleu-encre)}
.lp-jalon{width:7px;height:7px;background:var(--or);transform:rotate(45deg);flex:none}
@media (max-width:700px){
  .ligne-preuves .in{flex-direction:column;align-items:flex-start;row-gap:12px}
  .lp-label{border-right:0;padding-right:0}
  .lp-items{flex-direction:column;align-items:flex-start}
  .lp-jalon{display:none}
  .lp-item{white-space:normal}
}


/* ---------- BLOC RGE-AIDES « R1 » + BLOC DÉCENNALE « D2 » ----------
   Choix de Mourad (03/09) sur maquettes/variantes-blocs-rge-decennale.html.
   R1 : le label RGE traité en section d'appel (aplat profond, arête or, les
   trois aides cochées, plaquette QualiPAC sur blanc) — jamais de montant ni
   de promesse d'éligibilité. D2 : la décennale en bande minimale, « nous ne
   la vendons pas comme un plus ». Sources : 21st cta-4/cta-3 + banque
   perezelec-66 ; leçon copy domi/sidney (« ce que ça change pour vous »). */
.r1{background:var(--profond);color:#fff;border-top:3px solid var(--or)}
.r1 .in{max-width:var(--max);margin:0 auto;
  padding:clamp(34px,4.6vw,58px) var(--gouttiere);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,58px);
  align-items:center}
.r1 .kick{color:var(--or)}
.r1 h2{font-size:clamp(27px,3.4vw,44px);font-weight:800;color:#fff;
  max-width:17ch;margin-top:12px}
.r1 .meca{color:#C6D9E3;margin-top:14px;max-width:54ch;font-size:16px}
.r1 .actes{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:24px}
.r1 .tel-ligne{display:inline-flex;align-items:center;gap:10px;color:#fff;
  font-family:var(--titre);font-weight:800;font-size:clamp(19px,2vw,24px);
  text-decoration:none}
.r1 .tel-ligne svg{width:19px;height:19px;fill:var(--or);flex:none}
.r1 .tel-ligne:hover{color:var(--ciel)}
.r1 .promesse{margin-top:12px;font-size:14px;color:#9DB8C6}
.r1 .aides{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:clamp(20px,2.2vw,28px)}
.r1 .aides ul{list-style:none;margin:0;padding:0}
.r1 .aides li{display:flex;gap:12px;padding:13px 2px}
.r1 .aides li + li{border-top:1px solid rgba(255,255,255,.13)}
.r1 .aides .coche{width:19px;height:19px;flex:none;margin-top:3px}
.r1 .aides .coche path{fill:var(--or)}
.r1 .aides b{display:block;font-family:var(--titre);font-weight:700;font-size:16.5px}
.r1 .aides span{display:block;font-size:14px;color:#B8CBD6;margin-top:2px}
.r1 .verif{display:flex;align-items:center;gap:14px;margin-top:16px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.13)}
.r1 .verif .plaquette{background:#fff;border-radius:12px;padding:8px 12px;flex:none;
  display:grid;place-items:center}
.r1 .verif .plaquette img{height:44px;width:auto;object-fit:contain;display:block}
.r1 .verif p{font-size:13.5px;color:#B8CBD6;max-width:26ch}
@media (max-width:900px){.r1 .in{grid-template-columns:1fr}}

.d2{background:var(--profond);color:#fff;border-top:3px solid var(--or)}
.d2 .in{max-width:var(--max);margin:0 auto;
  padding:clamp(24px,3vw,40px) var(--gouttiere);
  display:flex;align-items:center;gap:clamp(22px,3.6vw,52px);flex-wrap:wrap}
.d2 .dix{font-family:var(--titre);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(46px,5.4vw,72px);line-height:.95;color:var(--or);flex:none}
.d2 .dix small{display:block;font-size:14px;letter-spacing:.1em;color:#C6D9E3;
  font-weight:700;text-transform:uppercase;margin-top:6px}
.d2 .texte{flex:1;min-width:260px;padding-left:clamp(22px,3.6vw,52px);
  border-left:1px solid rgba(255,255,255,.22)}
.d2 .texte b{display:block;font-family:var(--titre);font-weight:700;
  font-size:clamp(18px,1.9vw,23px);color:#fff}
.d2 .texte p{color:#C6D9E3;font-size:15px;margin-top:6px;max-width:66ch}
.d2 .texte small{display:block;color:#9DB8C6;font-size:13.5px;margin-top:8px}
@media (max-width:640px){
  .d2 .texte{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.22);
    padding-top:16px}
}


/* ---------- MARQUES, VARIANTE B « Le panneau double paroi » ----------
   Choix de Mourad (03/09) sur maquettes/variantes-bloc-marques-v2.html
   (21st 22082 Integrations 02, code lu sous licence — double paroi p-10px,
   lignes empilées arrondies). Corrections Mourad : marques SEULES, sans
   gammes ; « notamment » dit que la liste n'est pas fermée. Les classes
   b-tuile* des prestations sont distinctes, aucune collision. */
.b-panneau{max-width:940px;margin:0 auto;background:var(--profond);
  border-radius:18px;padding:10px}
.b-tete{padding:20px 22px 18px;color:#fff}
.b-tete .eyebrow{font-family:var(--titre);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ciel)}
.b-tete h2{font-size:clamp(19px,2.3vw,25px);font-weight:700;margin-top:6px;color:#fff}
.b-tete p{color:rgba(255,255,255,.82);font-size:14.5px;margin-top:6px;max-width:64ch}
.b-lignes{display:grid;gap:8px}
.b-ligne{background:var(--papier);border-radius:14px;padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:64px}
.b-plaque{display:flex;align-items:center}
.b-plaque img{width:auto;object-fit:contain;display:block}
.b-mention{flex:none;font-size:13px;color:var(--encre-2);text-align:right}
.pastille-or{display:inline-flex;align-items:center;gap:7px;background:var(--or);
  color:var(--encre);font-family:var(--titre);font-weight:700;font-size:12px;
  letter-spacing:.02em;padding:5px 13px;border-radius:999px;white-space:nowrap}
@media (max-width:520px){
  .b-ligne{flex-wrap:wrap;gap:10px 14px}
  .b-mention{text-align:left}
  .pastille-or{white-space:normal}
}


/* rafale 03/09 */
/* 1 · Le bandeau s'équilibre : le groupe nav+tel prend toute la place restante,
   le nav se centre dedans, le téléphone se colle à droite. */
.tete>div{flex:1 1 auto;min-width:0}
.tete .tel-tete{margin-left:auto}
@media (max-width:980px){
  .tete .tel-tete{margin-left:0}
  /* Le burger se colle à DROITE du bandeau (demande Mourad 03/09) : la nav est
     en absolu sous 980 px, le burger est donc seul dans le flux du groupe. */
  .tete>div{justify-content:flex-end}
}
/* 2 · Footer : logo et pitch centrés dans leur colonne ; l'ancien doublon de
   .logo-pied (radius 12 vs 4) est purgé plus haut, celui-ci fait foi. */
.pied .in>div:first-child{text-align:center}
.pied .in>div:first-child p{margin-inline:auto}
.pied .logo-pied{border-radius:12px}
@media (max-width:760px){.pied .in>div:first-child{text-align:left}
  .pied .in>div:first-child p{margin-inline:0}}


/* ---------- EXPÉRIENCE, VARIANTE E « La soudure duo » ----------
   Choix de Mourad (03/09) sur maquettes/variantes-bloc-experience.html
   (21st 18355 + geste 8977, code lu sous licence). Cellules soudées sur fond
   filet, gouttière 2 px ; la cellule ciel porte le seul chiffre du bloc,
   rattaché au MÉTIER (jamais à l entreprise, créée en 2019). */
.e-soudure{background:var(--filet);border-radius:18px;padding:2px;
  display:grid;grid-template-columns:1.65fr 1fr;gap:2px}
.e-cell{background:var(--papier);border-radius:16px;padding:clamp(22px,3.2vw,38px)}
.e-cell .eyebrow{font-family:var(--titre);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bleu-encre)}
.e-cell h2{font-size:clamp(23px,2.9vw,34px);font-weight:700;margin-top:10px;max-width:22ch}
.e-cell p{color:var(--encre-2);margin-top:14px;max-width:52ch;font-size:15.5px}
.e-cell .btn{margin-top:20px}
.e-chiffre{background:var(--ciel-pale);display:flex;flex-direction:column;
  justify-content:center;gap:4px}
.e-chiffre .etiquette{font-family:var(--titre);font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bleu-encre);margin:0}
.e-chiffre b{font-family:var(--titre);font-weight:800;
  font-size:clamp(52px,6.4vw,84px);line-height:1;color:var(--bleu-encre);
  letter-spacing:-.03em;margin-top:8px}
.e-chiffre .dit{font-family:var(--titre);font-weight:600;font-size:16px;
  color:var(--encre);max-width:20ch;margin-top:8px}
.e-chiffre .devis{margin-top:16px;padding-top:14px;border-top:1px solid rgba(13,92,138,.18);
  font-size:14px;color:var(--encre-2);max-width:26ch}
@media (max-width:820px){.e-soudure{grid-template-columns:1fr}}


/* ---------- À-PROPOS · « Le mur d'avis » (bloc 1, variante C) ----------
   Choix Mourad 03/09 (21st 19870 solaceui + 6268 uilayout). La taille de la
   cellule commande la taille du texte ; la note est posée bas dans sa case,
   comme un cachet. Quadrillage estompé derrière la grille. */
.s1c-mur{position:relative;margin-top:clamp(26px,3.4vw,44px);padding:clamp(14px,2vw,26px)}
.s1c-mur::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(to right,var(--filet) 1px,transparent 1px),
    linear-gradient(to bottom,var(--filet) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 22%,transparent 88%);
  mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 22%,transparent 88%)}
.s1c-grille{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:minmax(118px,auto);gap:clamp(12px,1.6vw,20px)}
.s1c-c{border-radius:16px;padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column}
.s1c-c .m{margin-bottom:auto}
.s1c-c .q{display:block;font-family:var(--titre);font-weight:800;
  letter-spacing:-.03em;line-height:1.02}
.s1c-c .d{margin-top:11px}
.s1c-c--haute{grid-row:span 2}
.s1c-c--haute .q{font-size:clamp(26px,3.2vw,42px);margin-top:22px}
.s1c-c--haute .d{font-size:15.5px;max-width:24ch}
.s1c-c--basse .q{font-size:clamp(20px,2.1vw,26px);margin-top:14px}
.s1c-c--basse .d{font-size:14.5px;max-width:34ch}
.s1c-c--sombre{background:var(--profond)}
.s1c-c--sombre .q{color:#fff}
.s1c-c--sombre .d{color:#C6DAE4}
.s1c-c--sombre .m{color:var(--ciel)}
.s1c-c--ciel{background:var(--ciel-pale)}
.s1c-c--ciel .q{color:var(--profond)}
.s1c-c--ciel .d{color:#2C4C5C}
.s1c-c--blanche{background:var(--papier);border:1px solid var(--filet)}
.s1c-c--blanche .d{color:var(--encre-2)}
.s1c-c--note{background:var(--papier);border:1px solid var(--filet);justify-content:flex-end}
.s1c-c--note .note{display:block;font-family:var(--titre);font-weight:800;
  letter-spacing:-.03em;font-size:clamp(26px,2.9vw,36px);color:var(--profond);line-height:1}
.s1c-c--note .ou{font-size:14.5px;color:var(--encre-2);margin-top:7px}
.s1c-c .oeil{font-family:var(--titre);font-weight:700;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--bleu-encre)}

/* ---------- À-PROPOS · « Le cartouche à cinq volets » (bloc 2, variante C) ----------
   Choix Mourad 03/09 (21st 5447 meschacirung + 3418 designali certificate, ce
   dernier déjà retenu pour le bandeau : les deux se reconnaissent de la même
   famille). Un seul objet découpé par filets ; le premier volet, repeint en
   profond jusqu'aux bords, casse la répétition des compartiments égaux. */
.s2c-cartouche{margin-top:clamp(22px,3vw,38px);background:var(--papier);
  border:1px solid var(--filet);border-radius:16px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.42fr) repeat(4,minmax(0,1fr))}
.s2c-v{padding:clamp(20px,2.3vw,28px) clamp(16px,1.9vw,24px);
  display:flex;flex-direction:column}
.s2c-v+.s2c-v{border-left:1px solid var(--filet)}
.s2c-v .n{display:block;font-family:var(--titre);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(16.5px,1.75vw,20px);line-height:1.12;margin-top:auto}
.s2c-v .d{font-size:14px;color:var(--encre-2);margin-top:8px}
.s2c-v .oeil{font-family:var(--titre);font-weight:700;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--bleu-encre)}
.s2c-tete{background:var(--profond)}
.s2c-tete .n{color:#fff;font-size:clamp(23px,2.6vw,32px);letter-spacing:-.03em;
  margin-top:clamp(14px,2vw,22px)}
.s2c-tete .d{color:#C6DAE4;font-size:14.5px}
.s2c-tete .siren{margin-top:auto;padding-top:clamp(14px,2vw,20px);
  font-family:var(--titre);font-weight:700;font-size:13.5px;letter-spacing:.07em;color:#fff}
.s2c-tete .oeil{color:var(--ciel)}
.s2c-v:not(.s2c-tete) .n{padding-top:16px}
.s2c-v--or .n{padding-top:13px;border-top:3px solid var(--or)}
@media (max-width:1080px){
  .s2c-cartouche{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .s2c-tete{grid-column:span 2}
  .s2c-v:nth-child(2){border-left:0}
  .s2c-v:nth-child(4),.s2c-v:nth-child(5){border-top:1px solid var(--filet)}
  .s2c-v:nth-child(4){border-left:0}
}
@media (max-width:900px){
  .s1c-grille{grid-template-columns:1fr}
  .s1c-c--haute{grid-row:span 1}
  .s1c-mur::before{background-size:38px 38px}
}
@media (max-width:640px){
  .s2c-cartouche{grid-template-columns:1fr}
  .s2c-tete{grid-column:span 1}
  .s2c-v+.s2c-v{border-left:0;border-top:1px solid var(--filet)}
  .s2c-v:nth-child(4){border-left:0}
}