/* ==========================================================================
   ÉCLAIR PROVENCE — Peynier (13790)
   Direction C « Le bandeau », choisie en Phase 1bis le 2026-08-07.
   Palette TIRÉE DU LOGO : #031A24 (68 % des pixels) + #F0900F (17 %).
   Doctrine : design-artisan-btp. Interdits de convergence : DESIGN.md §4.
   ========================================================================== */

/* --------------------------------------------------------- 1. JETONS ---- */
:root{
  /* couleurs — toutes issues du logo ou dérivées */
  --nuit:#031A24;          /* le « noir-premium » du brief = le noir DU LOGO */
  --nuit-2:#0A2C39;        /* second niveau d'aplat, survols sur sombre */
  --nuit-filet:#1B3A47;    /* filets sur fond nuit */
  --orange:#F0900F;        /* accent UNIQUE */
  --orange-clair:#FFA522;  /* survol */
  --orange-fonce:#B86A08;  /* GROS corps orange sur fond clair — 3,9:1, AA large uniquement */
  /* ⚠️ #B86A08 ne vaut que 3,9:1 sur --blanc-chaud et 4,1:1 sur blanc : c'est au-dessus
     du seuil des grands corps (3:1) mais EN DESSOUS des 4,5:1 exigés pour du texte
     courant. Les étiquettes de 15 px du tableau de faits et l'astérisque des champs
     obligatoires y étaient — ils passent sur --orange-petit (4,9:1 sur blanc).
     Règle : au-dessus de 24 px (ou 18,7 px gras) → --orange-fonce ; en dessous → --orange-petit. */
  --orange-petit:#A85F06;
  --blanc-chaud:#FAF7F2;   /* fond de page : chaud, jamais gris (région ensoleillée) */
  --blanc:#FFFFFF;
  --texte:#141A1D;
  --texte-2:#54626A;       /* ⛔ jamais sur photo ni sur aplat nuit */
  --sur-nuit:#F2EFE9;      /* texte sur nuit — quasi-blanc, jamais muted */
  --sur-nuit-2:#B9C7CE;    /* texte secondaire sur nuit, contraste vérifié */
  --filet:#E2DCD2;

  /* typographie — polices fixées par DESIGN.md §3, jamais remplacées.
     Les familles de SECOURS ci-dessous (§1 bis) ne changent RIEN au rendu final :
     elles ne servent que pendant le `display=swap`. */
  --titres:'Bricolage Grotesque','Bricolage secours',system-ui,-apple-system,sans-serif;
  --corps:Inter,'Inter secours',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(36px,5.2vw,78px);   /* ⛔ plafond doctrine : clamp(40px,6vw,96px) */
  --fs-h2:clamp(25px,2.6vw,38px);
  --fs-h3:clamp(19px,1.5vw,22px);
  --fs-lead:clamp(16px,1.3vw,18.5px);

  /* grille */
  --max:1240px;
  --gut:clamp(20px,4vw,60px);
  --header-h:78px;

  /* mouvement — liste fermée, DESIGN.md §8 */
  --ease:cubic-bezier(.2,0,0,1);
  --t:.2s;
}

/* ------------------------------------------ 1 bis. POLICES (CLS = 0) -----
   ⛔⛔ LES DEUX POLICES SONT SERVIES PAR LE SITE, PLUS PAR GOOGLE.
   Ce ne sont pas d'autres polices : ce sont les fichiers woff2 que Google
   servait, sous-ensemble `latin`, déposés dans /assets/fonts. Familles
   inchangées (DESIGN.md §3), dessin inchangé, graisses inchangées.

   POURQUOI ce déplacement, alors que le `display=swap` + preconnect était en
   place et que les familles de secours calibrées existaient déjà :
   la chaîne Google impose DEUX allers-retours en série avant le moindre glyphe
   — HTML, puis fonts.googleapis.com (CSS), puis fonts.gstatic.com (woff2), deux
   origines et deux poignées de main TLS. Le texte s'affiche donc forcément en
   police de secours d'abord, et TOUT repose ensuite sur la justesse de la
   calibration. Or elle ne peut pas être juste partout : mesuré ici, la secours
   des titres reste 1,7 % plus étroite que Bricolage Grotesque, et ce seul 1,7 %
   suffisait à faire tenir « Parlons de votre installation » sur UNE ligne en
   secours et sur DEUX ensuite (+62 px de bandeau, CLS 0,086 sur contact.html
   après même le passage des `ch` en `em`).
   En local, les woff2 sont préchargés depuis la MÊME origine, en parallèle du
   CSS : ils arrivent avant le premier rendu, il n'y a plus de swap du tout, et
   le CLS ne dépend plus d'une calibration au pourcent près. Mesuré après :
   0,001 à 0,005 sur les 9 pages. Bonus : deux origines externes, deux
   résolutions DNS et deux TLS en moins sur le chemin critique.

   ⚠️ Sous-ensemble `latin` UNIQUEMENT (celui que Chrome chargeait déjà pour ce
   site) : vérifié caractère par caractère sur les 9 pages générées, tout le
   texte visible y entre, « œ », « € », « · » et les apostrophes typographiques
   compris. ⛔ Ajouter du grec, du cyrillique ou du vietnamien dans un texte
   demanderait de récupérer aussi le sous-ensemble correspondant.

   ⛔ Les familles de SECOURS ci-dessous restent en place et gardent leur
   calibration : elles couvrent le cas où le woff2 tarde ou échoue. Elles ne
   servent plus au cas nominal. Ne jamais les utiliser directement dans une règle.
   Valeurs mesurées (canvas measureText, 100px, sur le texte du site) :
     Bricolage Grotesque 600 : 9626,6 px   Arial 400 : 10036,9 px → 95,91 %
     Inter 400            : 10697,3 px   Arial 400 : 10036,9 px → 106,58 %
   ------------------------------------------------------------------------ */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  font-style:normal;font-weight:500 700;font-stretch:100%;font-display:block;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url(/assets/fonts/inter-latin.woff2) format('woff2');
  font-style:normal;font-weight:400 600;font-display:block;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ⚠️ size-adjust RECALIBRÉ à 97,04 % (il valait 95,91 %). L'ancienne valeur venait
   d'une mesure sur une chaîne d'exemple ; celle-ci vient des 33 TITRES RÉELLEMENT
   présents dans les 9 pages : rapport moyen largeur(Bricolage)/largeur(secours)
   = 1,0118, donc 95,91 × 1,0118 = 97,04. Les 1,2 % manquants faisaient tenir
   12 titres sur une ligne de moins en secours (contrôlés sur 9 pages × 3
   viewports) — chacun étant un décalage de 26 à 62 px si le woff2 arrive après
   le premier rendu. ascent/descent sont divisés par le même facteur (1,011782)
   pour que la hauteur de ligne, elle, ne bouge pas : 96,96/1,011782 = 95,83 et
   28,15/1,011782 = 27,82.
   ⛔ Recalibrer avec qa/ si les TEXTES changent, pas seulement les polices. */
@font-face{
  font-family:'Bricolage secours';
  src:local('Arial'),local('Liberation Sans'),local('Helvetica Neue');
  font-weight:100 900;font-style:normal;
  size-adjust:97.04%;ascent-override:95.83%;descent-override:27.82%;line-gap-override:0%;
}
@font-face{
  font-family:'Inter secours';
  src:local('Arial'),local('Liberation Sans'),local('Helvetica Neue');
  font-weight:100 900;font-style:normal;
  size-adjust:106.58%;ascent-override:91.01%;descent-override:22.52%;line-gap-override:0%;
}

/* ----------------------------------------------------------- 2. BASE ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--blanc-chaud);color:var(--texte);
  font-family:var(--corps);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'tnum';           /* chiffres tabulés — pas de monospace */
  overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
/* ⚠️ Les photos sont servies en <picture> (WebP + repli JPEG, srcset par largeur).
   `display:contents` efface la boîte du <picture> : l'<img> reste l'enfant direct
   effectif de son conteneur, donc TOUTES les règles écrites avant l'arrivée du
   srcset (`.duo__img img`, `.tuile img`, `.zone__flux img{float:right}`,
   `.bandeau__fond img{height:100%}`…) continuent de s'appliquer à l'identique.
   ⛔ Sans cette ligne, `.bandeau__fond img{height:100%}` se référerait à la hauteur
   AUTO du <picture> inline et le fond de tous les bandeaux s'effondrerait. */
picture{display:contents}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titres);font-weight:600;margin:0;
  line-height:1.06;letter-spacing:-.022em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* lien d'évitement */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--nuit);
  color:#fff;padding:12px 18px;text-decoration:none}
.skip:focus{left:8px;top:8px}

/* ------------------------------------ 3. MOTIF « LIGNE DE LUMIÈRE » ---- */
/* Un filet dont le segment CENTRAL est éteint, puis se rallume : le nom de
   l'entreprise et son métier, c'est la lumière. Il ne dessine AUCUNE technique
   (design-artisan-btp §7). Segment ancré en PIXELS et centré, pour que le motif
   garde la même signature à 190 px comme à 1100 px de long. */
.lum{height:3px;border:0;margin:0;flex:none;
  background:linear-gradient(90deg,
    var(--orange) 0 calc(50% - 13px),
    transparent   calc(50% - 13px) calc(50% + 13px),
    var(--orange) calc(50% + 13px) 100%)}
.lum--court{width:190px}
.lum--centre{margin-inline:auto}
/* ⛔ jamais en travers d'une photo, jamais un ::after sur une <img> */

/* --------------------------------------------------------- 4. HEADER ---- */
/* Identité de la direction C : PAS de lien « Accueil » (le logo l'est) et PAS
   de bouton d'action à droite — nos 13 sites font l'inverse (DESIGN.md §4).
   Emprunt à la direction A : nav GROUPÉE contre le logo, grand vide, numéro
   en lettrage à l'extrême droite. */
.hdr{position:sticky;top:0;z-index:60;background:var(--blanc-chaud);
  border-bottom:1px solid var(--filet)}
.hdr__in{display:flex;align-items:center;gap:clamp(18px,3vw,40px);
  padding-block:12px;min-height:var(--header-h)}
/* ⛔ padding-BLOCK, jamais le raccourci `padding:12px 0` : .hdr__in porte aussi
   .wrap, et le raccourci remettrait padding-inline à 0 (gouttière écrasée). */
.hdr__logo{display:block;flex:none}
/* le PNG n'a AUCUNE marge interne → padding obligatoire.
   box-sizing:border-box → dessin = height - padding vertical : 60-4 = 56 px. */
.hdr__logo img{height:60px;width:auto;padding:2px 6px}
.hdr__vide{flex:1}
.hdr__tel{font-family:var(--titres);font-weight:600;font-size:19px;
  text-decoration:none;white-space:nowrap;letter-spacing:-.01em;flex:none;
  padding-bottom:3px;border-bottom:3px solid var(--orange)}
.hdr__tel span{display:block;font-family:var(--corps);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2);
  margin-bottom:1px;border:0}
.hdr__tel:hover{color:var(--orange-fonce)}

/* nav desktop */
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.nav__lien{text-decoration:none;font-weight:500;font-size:15.5px;
  padding:8px 0;position:relative;background:none;border:0;font-family:inherit;
  color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.nav__lien:hover{color:var(--orange-fonce)}
.nav__lien[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;
  bottom:2px;height:2px;background:var(--orange)}
.nav__chev{width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t) var(--ease)}
[aria-expanded="true"] .nav__chev{transform:rotate(-135deg) translateY(-2px)}

/* ---- menu déroulant « Prestations » ----------------------------------
   Le composant qui a produit le plus de défauts invisibles au harnais.
   Trois pièges traités ici (mémoire feedback_menu_deroulant_trois_pieges) :
   1. LE VIDE DE SURVOL entre le bouton et le panneau → le <li> porte un
      padding-bottom qui fait le PONT ; le panneau est collé à son bord bas.
   2. LE CLIC QUI REFERME ce que le survol venait d'ouvrir → le bouton est un
      <button aria-expanded>, l'état ouvert est porté par [data-ouvert] en JS,
      et le survol ne touche PAS cet attribut : les deux ne se marchent pas
      dessus (voir site.js).
   3. LA FERMETURE → Échap, clic à l'extérieur, et perte de focus. */
.nav__item{position:relative;padding-bottom:14px;margin-bottom:-14px}
.sousmenu{
  position:absolute;top:100%;left:-18px;min-width:288px;z-index:70;
  background:var(--nuit);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.nav__item:hover>.sousmenu,
.nav__item:focus-within>.sousmenu,
.nav__item[data-ouvert]>.sousmenu{opacity:1;visibility:visible;transform:none}
.sousmenu a{display:block;padding:12px 14px;text-decoration:none;
  color:var(--sur-nuit);font-size:15.5px;line-height:1.35;
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.sousmenu a small{display:block;color:var(--sur-nuit-2);font-size:12.5px;margin-top:3px}
.sousmenu a:hover,.sousmenu a:focus-visible{background:var(--nuit-2);color:#fff}
.sousmenu a:hover small{color:#D5DEE2}

/* ---- burger + tiroir mobile ------------------------------------------
   ⚠️ Le tiroir est en position:fixed AVEC un z-index supérieur au header
   sticky : sans ça il reste enfermé dans le contexte d'empilement du header
   (mémoire feedback_burger_stacking_context). */
.burger{display:none;flex:none;width:46px;height:46px;align-items:center;
  justify-content:center;background:none;border:1px solid var(--filet);
  cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:2px;background:var(--texte);
  position:relative;transition:background var(--t) var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;
  width:20px;height:2px;background:var(--texte);
  transition:transform var(--t) var(--ease),top var(--t) var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.tiroir{position:fixed;inset:0;z-index:100;background:var(--nuit);
  padding:22px var(--gut) 40px;overflow-y:auto;
  display:none;flex-direction:column}
.tiroir[data-ouvert]{display:flex}
.tiroir__haut{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:26px}
/* ⚠️ le lettrage du logo est en bleu nuit — le MÊME bleu que le fond du tiroir.
   Sans fond clair derrière, seul l'éclair orange restait visible et le nom de
   l'entreprise disparaissait à l'ouverture du menu mobile (audit du 2026-08-07).
   Le fond clair est le repli prévu par la doctrine logo quand le détourage ne
   suffit pas à rendre le logo lisible sur son support. */
.tiroir__haut img{height:52px;width:auto;padding:5px 10px;background:var(--blanc-chaud)}
.tiroir__fermer{width:46px;height:46px;background:none;border:1px solid var(--nuit-filet);
  color:var(--sur-nuit);font-size:26px;line-height:1;cursor:pointer;flex:none}
.tiroir a{color:var(--sur-nuit);text-decoration:none;display:block}
.tiroir__nav>li{border-top:1px solid var(--nuit-filet)}
.tiroir__nav>li:last-child{border-bottom:1px solid var(--nuit-filet)}
.tiroir__nav>li>a{font-family:var(--titres);font-weight:600;font-size:24px;padding:16px 0}
.tiroir__sous{padding:0 0 14px 14px}
.tiroir__sous a{font-size:16px;padding:9px 0;color:var(--sur-nuit-2)}
.tiroir__sous a:hover{color:#fff}
.tiroir__tel{margin-top:28px;font-family:var(--titres);font-weight:600;
  font-size:30px;color:#fff!important;letter-spacing:-.02em}
.tiroir__tel small{display:block;font-family:var(--corps);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sur-nuit-2);margin-bottom:4px}

/* ---------------------------------------------- 5. BANDEAU NUIT (hero) -- */
/* Photo en arrière-plan sous un voile (demande de Mourad, 2026-08-07).
   L'aplat nuit reste la couleur de repli : si l'image ne charge pas, le bandeau
   est identique à ce qu'il était, texte lisible.

   ⚠️⚠️ LE VOILE EST PLAT, PAS UN DÉGRADÉ — c'est délibéré.
   Un dégradé s'ancre sur la HAUTEUR de la boîte : le bandeau va de ~240 px
   (mentions légales) à ~620 px (accueil en mobile), donc un même dégradé en
   pourcentage laisse le texte sortir de la zone opaque sur certaines pages et
   à certaines largeurs. C'est exactement le défaut de la mémoire
   `feedback_voile_ancre_en_pourcent`, et il est invisible au harnais.
   Un voile plat n'a pas d'ancrage : il vaut partout, à toutes les hauteurs.

   Opacité 82 % : contraste garanti par CONSTRUCTION, au PIRE pixel possible.
   Si un pixel de la photo est BLANC PUR, le composite vaut #30434B, soit
   10,3:1 sur le titre blanc (AAA exige 7) et 5,9:1 sur le lead (AA exige 4,5).
   Aucune photo ne peut donc casser la lisibilité, quelle qu'elle soit.
   ⛔ Ne pas descendre sous 78 % sans refaire ce calcul. */
.bandeau{position:relative;isolation:isolate;
  background:var(--nuit);color:var(--sur-nuit);text-align:center;
  padding:clamp(44px,6vw,84px) 0 clamp(38px,4.6vw,62px)}
.bandeau__fond{position:absolute;inset:0;z-index:-1;overflow:hidden}
.bandeau__fond img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.bandeau__fond::after{content:"";position:absolute;inset:0;
  background:rgba(3,26,36,.82)}
/* le texte reste au-dessus du voile en toutes circonstances */
.bandeau > .wrap{position:relative;z-index:1}
/* ⛔ PAS de filet en pied de bandeau : le changement de fond marque DÉJÀ la
   frontière. Deux dispositifs au même endroit = §5 ter, « corriger c'est
   remplacer », la faute qui a produit « tous ces traits qui partent de partout ». */
/* ⚠️ l'eyebrow est le SEUL texte du bandeau qui ne soit pas quasi-blanc, et il est
   petit (12 px). Mesuré au même PIRE pixel que le reste — un pixel blanc pur sous
   le voile à 82 % — l'orange d'accent #F0900F n'y vaut que 4,29:1, sous les 4,5:1
   exigés pour du texte de cette taille. L'orange clair du survol, même famille de
   teinte, y monte à 5,25:1 (et 9,05:1 sur l'aplat de repli). ⛔ Ne pas revenir à
   --orange ici sans refaire la mesure : le bandeau porte une photo sur les 9 pages. */
.bandeau__eyebrow{font-size:12px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange-clair);margin:0 0 16px}
/* text-shadow : ceinture ET bretelles par-dessus le voile à 82 % (doctrine §3,
   « texte hero quasi-blanc + text-shadow »). Discret, il ne se voit pas sur
   l'aplat de repli. */
/* ⚠️⚠️ LARGEURS DE MESURE EN `em`, PLUS JAMAIS EN `ch` — c'est ce qui restait du CLS.
   Les familles de secours du §1 bis calent la chasse MOYENNE à 1,7 % près, et
   pourtant contact.html restait à 0,127 après leur pose. La raison : `1ch` n'est
   pas la chasse moyenne, c'est la largeur du seul glyphe « 0 ». Mesuré ici :
       17ch = 10,098 em avec Bricolage Grotesque, 9,068 em avec la secours (−10,2 %)
       62ch = 39,113 em avec Inter,               36,747 em avec la secours (−6,1 %)
   La BOÎTE rétrécissait donc de 6 à 10 % le temps du swap : le H1 tenait sur deux
   lignes en secours et sur une seule ensuite (mesuré 619×131 → 726×73), le bandeau
   perdait 61 px de haut et poussait toute la page. Aucun `size-adjust` ne peut
   corriger ça : il agit sur la chasse, pas sur le rapport chasse/glyphe-zéro.
   `em` ne dépend que de la font-size : la boîte garde EXACTEMENT la largeur
   qu'elle avait avec la vraie police, et ne bouge plus au basculement.
   ⛔ Ne pas « simplifier » en revenant à `ch` : le CLS reviendrait avec.
   Valeurs mesurées au moteur CSS le 2026-08-07 ; à refaire si DESIGN.md §3
   change de police. */
.bandeau h1{color:#fff;font-size:var(--fs-display);max-width:10.10em;margin:0 auto;
  text-shadow:0 1px 10px rgba(0,0,0,.45)}
.bandeau__eyebrow,.bandeau__lead,.bandeau__preuve,.bandeau__tel{
  text-shadow:0 1px 7px rgba(0,0,0,.5)}
.bandeau--interieur h1{max-width:11.88em;font-size:clamp(31px,4.2vw,58px)}   /* était 20ch */
/* ⛔ AUCUN texte secondaire « muted » dans le bandeau depuis qu'il porte une PHOTO :
   --sur-nuit-2 (#B9C7CE) reste bon sur un aplat plein, mais posé sur une image il
   tombe sous la règle « jamais de texte muted sur photo ». Tout le bandeau passe
   donc au quasi-blanc --sur-nuit ; la hiérarchie est portée par le corps et la
   graisse, pas par un gris. Ailleurs sur le site (aplats nuit), --sur-nuit-2 est
   conservé : 10,3:1, et il y est chez lui. */
.bandeau__lead{font-size:var(--fs-lead);line-height:1.62;color:var(--sur-nuit);
  max-width:39.11em;margin:22px auto 0}   /* était 62ch */
.bandeau .lum{margin:26px auto 0}
.bandeau__actions{display:flex;flex-direction:column;align-items:center;gap:16px;
  margin-top:30px}
.bandeau__tel{font-family:var(--titres);font-weight:600;font-size:25px;color:#fff;
  text-decoration:none;letter-spacing:-.02em}
.bandeau__tel span{display:block;font-family:var(--corps);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sur-nuit);margin-bottom:3px}
.bandeau__tel:hover{color:var(--orange-clair)}
.bandeau__preuve{font-size:14px;color:var(--sur-nuit);margin-top:18px}
.bandeau__preuve b{color:#fff;font-weight:600}

/* ------------------------------------------------- 6. TUILES DU HERO ---- */
/* Le hero fait aussi office de menu de prestations. Coins droits, zéro ombre
   (interdit n°25 : 6 sites mettent leurs photos en cartes arrondies ombrées). */
.tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--nuit)}
.tuile{position:relative;display:block;text-decoration:none;overflow:hidden}
.tuile img{width:100%;height:clamp(215px,23vw,310px);object-fit:cover;
  transition:transform .24s var(--ease)}
/* ⚠️ Entre 561 et 900 px les tuiles passent en 2 colonnes et tombent à un ratio
   d'environ 2:1, alors que ces trois sources sont des PORTRAITS 1100×1467 :
   à 50 % seuls ~37 % de la hauteur restaient visibles et la platine
   d'interphone comme la borne de recharge étaient DÉCAPITÉES (écran et tête
   hors cadre). Le cadrage ne bouge quasiment pas à 1440 ni à 390 px.
   Contrôle image du 2026-08-07. */
.tuile img[src*="p-interphonie"],
.tuile img[src*="p-irve"]{object-position:50% 34%}
/* s-electricite.jpg est un PAYSAGE 555×416 : à toutes les largeurs de tuile la
   coupe est horizontale et le cadrage par défaut garde les trois rangées de
   disjoncteurs. Pas de recadrage à lui appliquer. */
.tuile:hover img,.tuile:focus-visible img{transform:scale(1.03)}
/* ⚠️ voile ancré en PIXELS, pas en % : le titre est en HAUT de la légende et la
   boîte grandit en mobile — en % le dégradé n'était opaque que trop bas
   (mémoire feedback_voile_ancre_en_pourcent). */
.tuile__cap{position:absolute;left:0;right:0;bottom:0;padding:15px;
  background:linear-gradient(to top,rgba(3,26,36,.94) 0 78px,rgba(3,26,36,.62) 120px,transparent 100%)}
.tuile__cap b{display:block;font-family:var(--titres);font-weight:600;font-size:17.5px;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);line-height:1.15}
.tuile__cap i{font-style:normal;font-size:12.5px;color:#DDE4E8;
  text-shadow:0 1px 5px rgba(0,0,0,.5)}

/* --------------------------------------------------- 7. SECTIONS ------- */
.sec{padding:clamp(44px,5.4vw,80px) 0}
.sec--clair{background:var(--blanc)}
.sec--nuit{background:var(--nuit);color:var(--sur-nuit)}
.sec--nuit h2,.sec--nuit h3{color:#fff}
.sec__titre{font-size:var(--fs-h2);max-width:15.44em}   /* était 26ch — cf. §5 */
.sec__lead{font-size:var(--fs-lead);color:var(--texte-2);max-width:39.11em;margin-top:14px}   /* était 62ch */
.sec--nuit .sec__lead{color:var(--sur-nuit-2)}

/* index typographique — remplace la grille de 4 cartes (interdit n°15/16).
   C'est ce bloc qui porte la double clientèle SANS le diptyque symétrique
   (interdit n°17, piège n°1 du projet). */
.idx{margin-top:28px}
.idx__ligne{display:grid;grid-template-columns:1fr auto;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:20px 0;border-top:1px solid var(--filet)}
.idx__ligne:last-child{border-bottom:1px solid var(--filet)}
.idx__ligne b{font-family:var(--titres);font-weight:600;
  font-size:clamp(30px,3.2vw,44px);letter-spacing:-.022em;line-height:1.05}
.idx__ligne:nth-child(2) b{color:var(--orange-fonce)}   /* asymétrie : une seule accentuée */
.idx__ligne i{font-style:normal;color:var(--texte-2);font-size:14.5px;
  text-align:right;max-width:22.71em;line-height:1.55}   /* était 36ch */

/* liste de prestations sur aplat nuit — lignes à retraits CROISSANTS
   (largeurs inégales = signal §5 bis n°5, jamais N cellules identiques) */
.lignes{margin-top:26px}
.lignes__item{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
  padding:17px 0;border-top:1px solid var(--nuit-filet)}
.lignes__item:last-child{border-bottom:1px solid var(--nuit-filet)}
.lignes__item b{font-family:var(--titres);font-weight:600;
  font-size:clamp(20px,2.1vw,28px);color:#fff}
.lignes__item i{font-style:normal;color:var(--sur-nuit-2);font-size:14.5px}
.lignes__item:nth-child(2){padding-left:clamp(0px,2.4vw,34px)}
.lignes__item:nth-child(3){padding-left:clamp(0px,4.8vw,68px)}
.lignes__item:nth-child(4){padding-left:clamp(0px,7.2vw,102px)}

/* bloc image + texte, asymétrique 58/42, coins droits, zéro ombre */
.duo{display:grid;grid-template-columns:58fr 42fr;gap:clamp(24px,4vw,56px);
  align-items:center}
.duo--inverse{grid-template-columns:42fr 58fr}
.duo--inverse .duo__img{order:-1}
/* colonnes de hauteurs très différentes (contact) : alignées en HAUT, sinon la
   plus courte flotte au milieu d'un vide et la section paraît trouée */
.duo--haut{align-items:start}
.duo__img img{width:100%;height:clamp(240px,30vw,420px);object-fit:cover}
.duo__txt h2{font-size:var(--fs-h2)}
.duo__txt p{margin-top:16px;color:var(--texte-2)}
.sec--nuit .duo__txt p{color:var(--sur-nuit-2)}
.duo__txt .lum{margin:20px 0}

/* faits — 3 lignes asymétriques dont UNE sur aplat (signal §5 bis n°3),
   remplace le trio « 3 avantages + icônes » des pages service */
.faits{display:grid;gap:2px;margin-top:26px}
.faits__l{display:grid;grid-template-columns:minmax(150px,26%) 1fr;gap:clamp(16px,3vw,36px);
  padding:20px 22px;background:var(--blanc);align-items:start}
.faits__l:nth-child(2){background:var(--nuit);color:var(--sur-nuit)}
.faits__l:nth-child(2) dt{color:var(--orange)}
.faits__l:nth-child(2) dd{color:var(--sur-nuit)}
.faits__l dt{font-family:var(--titres);font-weight:600;font-size:15px;
  letter-spacing:.02em;color:var(--orange-petit);margin:0}
.faits__l dd{margin:0;font-size:16px;line-height:1.6}

/* lexique (page interphonie) — chaque terme avec sa photo */
.lex{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);
  margin-top:28px}
.lex__t img{width:100%;height:200px;object-fit:cover;margin-bottom:14px}
.lex__t h3{font-size:var(--fs-h3)}
.lex__t p{margin-top:8px;font-size:15px;color:var(--texte-2)}
/* Troisième terme SANS photo, sur aplat nuit. Ce n'est pas un manque : c'est le
   signal « aplat » du §5 bis, qui casse trois cellules identiques et évite un
   alt invérifiable sur une image qui ne montrait pas le sujet annoncé. */
.lex__t--nuit{background:var(--nuit);color:var(--sur-nuit);padding:26px 24px;
  display:flex;flex-direction:column;justify-content:center}
.lex__t--nuit h3{color:#fff}
.lex__t--nuit p{color:var(--sur-nuit-2)}

/* zone d'intervention — flux typographique, la photo encastrée DANS le texte
   comme un mot. Les 4 formes déjà jouées sur nos sites sont interdites
   (pastilles+paysage, pano+2 colonnes, cercles concentriques, profil de crête). */
.zone__flux{margin-top:26px;font-family:var(--titres);font-weight:500;
  font-size:clamp(21px,2.5vw,34px);line-height:1.34;letter-spacing:-.018em}
.zone__flux img{float:right;width:clamp(160px,30%,330px);height:auto;
  margin:6px 0 12px 22px;shape-outside:margin-box}
.zone__flux .base{color:var(--orange-fonce)}
.zone__flux .sep{color:var(--filet)}
.zone__note{clear:both;margin-top:22px;font-size:15.5px;color:var(--texte-2);max-width:37.85em}   /* était 60ch */

/* --------------------------------------------------- 8. BOUTONS -------- */
.btn{display:inline-block;background:var(--orange);color:var(--nuit);
  text-decoration:none;font-weight:600;font-size:16.5px;padding:15px 28px;
  border:0;cursor:pointer;font-family:var(--corps);
  transition:background var(--t) var(--ease),transform .12s var(--ease)}
.btn:hover{background:var(--orange-clair)}
.btn:active{transform:scale(.96)}
.btn--fant{background:none;color:var(--texte);border:2px solid var(--nuit);padding:13px 26px}
.btn--fant:hover{background:var(--nuit);color:#fff}
.sec--nuit .btn--fant{color:#fff;border-color:var(--sur-nuit-2)}
.sec--nuit .btn--fant:hover{background:#fff;color:var(--nuit)}

/* ------------------------------------------------- 9. FORMULAIRE ------- */
.form{display:grid;gap:16px;margin-top:26px}
.form__l{display:grid;gap:7px}
.form label{font-size:14px;font-weight:600}
.form label .req{color:var(--orange-petit)}
.form input,.form select,.form textarea{
  font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--filet);
  background:var(--blanc);color:var(--texte);width:100%;
  transition:border-color var(--t) var(--ease)}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--nuit);outline:3px solid var(--orange);outline-offset:1px}
.form textarea{min-height:130px;resize:vertical}
.form__2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__note{font-size:13.5px;color:var(--texte-2)}

/* contact — coordonnées en lignes, pas un formulaire nu */
.coord{display:grid;gap:2px;margin-top:24px}
.coord__l{background:var(--blanc);padding:18px 20px;display:grid;
  grid-template-columns:minmax(110px,22%) 1fr;gap:20px;align-items:baseline}
.coord__l dt{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texte-2);margin:0}
.coord__l dd{margin:0;font-family:var(--titres);font-weight:600;font-size:21px;
  letter-spacing:-.015em;word-break:break-word}
.coord__l dd a{text-decoration:none}
.coord__l dd a:hover{color:var(--orange-fonce)}
.coord__l:first-child{background:var(--nuit);color:var(--sur-nuit)}
.coord__l:first-child dt{color:var(--orange)}
.coord__l:first-child dd{color:#fff}

/* ---------------------------------------------------- 10. PIED DE PAGE -- */
/* Les 3 formes du corpus sont prises (sombre à 3-4 colonnes, clair à wordmark
   géant, clair à numéro géant). Ici : bandeau nuit dont la PREMIÈRE LIGNE
   compose le nom et le numéro ensemble, en ours de journal, pleine largeur. */
.pied{background:var(--nuit);color:var(--sur-nuit-2);padding:clamp(40px,5vw,64px) 0 26px}
.pied__ours{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(16px,3vw,38px);padding-bottom:22px}
.pied__ours .tel{font-family:var(--titres);font-weight:600;
  font-size:clamp(22px,3vw,42px);color:var(--orange);text-decoration:none;
  letter-spacing:-.02em}
.pied__ours .tel:hover{color:var(--orange-clair)}
.pied__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(22px,4vw,56px);padding-top:26px;border-top:1px solid var(--nuit-filet)}
.pied h3{font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--orange);margin-bottom:13px;font-family:var(--corps)}
.pied a{color:var(--sur-nuit-2);text-decoration:none}
.pied a:hover{color:#fff}
.pied li{padding:5px 0;font-size:15px}
/* Le logo EST le nom dans l'ours : il remplace le wordmark composé, qui écrivait
   « Éclair Provence » une seconde fois à 80 px du logo. Fond clair obligatoire —
   lettrage bleu nuit sur aplat bleu nuit. Chaud plutôt que blanc pur : c'est le
   fond de page du site, la plaque se lit comme une respiration, pas comme une
   étiquette rapportée. */
.pied__logo{display:block;flex:none}
.pied__logo img{height:clamp(58px,6vw,84px);width:auto;padding:6px 14px;
  background:var(--blanc-chaud)}
.pied__bas{margin-top:30px;padding-top:18px;border-top:1px solid var(--nuit-filet);
  font-size:13px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}

/* ------------------------------------------------- 11. RESPONSIVE ------ */
@media(max-width:1000px){
  .tuiles{grid-template-columns:repeat(2,1fr)}
  .lex{grid-template-columns:1fr 1fr}
  /* ⚠️ en 2 colonnes, les deux termes à photo occupent la 1re rangée et « la
     ventouse » se retrouvait seule à gauche de la seconde, une case vide à sa
     droite : le bloc paraissait troué. En bandeau pleine largeur, la cellule
     sombre se lit comme une note voulue et referme la grille. */
  .lex__t--nuit{grid-column:1/-1}
  .pied__cols{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav,.hdr__tel,.hdr__vide{display:none}
  .burger{display:flex}
  .hdr__in{justify-content:space-between;gap:14px}
  .duo,.duo--inverse{grid-template-columns:1fr}
  .duo--inverse .duo__img{order:0}
  .idx__ligne{grid-template-columns:1fr;gap:8px}
  .idx__ligne i{text-align:left;max-width:none}
  .lignes__item{grid-template-columns:1fr;gap:5px}
  .lignes__item:nth-child(2),.lignes__item:nth-child(3),.lignes__item:nth-child(4){padding-left:0}
  .faits__l{grid-template-columns:1fr;gap:8px}
  .form__2{grid-template-columns:1fr}
  .coord__l{grid-template-columns:1fr;gap:5px}
  .zone__flux img{float:none;width:100%;margin:14px 0 0}
}
@media(max-width:620px){
  body{font-size:16px}
  .lex{grid-template-columns:1fr}
  .lex__t img{height:220px}
  .pied__cols{grid-template-columns:1fr;gap:26px}
  .hdr__logo img{height:52px}      /* dessin = 48 px, doctrine ≥ 40 px en mobile */
  .tuile img{height:190px}
}
@media(max-width:400px){
  .hdr__logo img{height:46px}      /* dessin = 42 px */
  .tuiles{grid-template-columns:1fr}
  .tuile img{height:200px}
}

/* --------------------------------------------- 12. MOUVEMENT RÉDUIT ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ------------------------------------------------- 13. IMPRESSION ------ */
@media print{
  .hdr,.tiroir,.burger,.pied__cols{display:none}
  body{background:#fff;color:#000}
  .bandeau,.sec--nuit{background:#fff;color:#000}
  .bandeau h1,.sec--nuit h2{color:#000}
}

/* ------------------------------- 14. GARDE-FOU D'AGRANDISSEMENT -------- */
/* `s-electricite.jpg` (l'armoire) n'a qu'une source de 555×416 : c'est la
   meilleure image du projet au tri (10/9/10) mais la plus petite. En tuile
   d'accueil elle s'affiche à 359 px, donc toujours en réduction. En photo de
   SECTION, la colonne devient pleine largeur sous 860 px et la demandait à
   708 px, soit 27 % d'agrandissement : le seul flou du site.
   On la borne à sa taille native. Elle est alors un peu plus étroite que la
   colonne de texte à ce palier, ce qui se lit comme une intention, pas comme
   un défaut. ⛔ Ne pas retirer sans remplacer l'image par une source ≥ 1100 px. */
.duo__img img[src*="s-electricite"]{max-width:555px;margin-inline:auto}

/* ---------------------------------- 15. GALERIE DE PRESTATION ---------- */
/* Trois photos d'installations réelles sur la page « Bornes de recharge ».
   Coins droits, zéro ombre (interdit n°25). Pas de lightbox : la doctrine
   l'interdit sur du généré, et ici elle n'apporterait rien de plus.
   §5 bis : le signal du groupe est l'IMAGE elle-même (signal n°1), et la
   troisième cellule est décalée pour éviter trois cellules identiques. */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);
  margin-top:28px;align-items:start}
.gal__c{margin:0}
.gal__c img{width:100%;height:clamp(250px,27vw,360px);object-fit:cover;
  object-position:50% 42%}
.gal__c:nth-child(2){margin-top:clamp(0px,2.6vw,34px)}   /* asymétrie ~9 %, localisée */
.gal__c figcaption{font-size:14px;color:var(--texte-2);padding-top:10px;line-height:1.5}
@media(max-width:860px){
  .gal{grid-template-columns:1fr 1fr}
  .gal__c:nth-child(2){margin-top:0}
  /* La 3e cellule occupe la 2e rangee, seule : sans elle la grille laisserait une
     case vide. Elle est centree a la largeur d'UNE colonne — pas plus : elle garde
     alors exactement le cadrage des deux cases du dessus, et la rangee se lit
     comme une rangee.
     ⛔ `margin-inline:auto` SEUL annule l'etirement d'un element de grille : la
     case retombait sur sa largeur de CONTENU, c'est-a-dire la longueur de sa
     LEGENDE (295,5 px identiques a 390 / 520 / 620 / 768 px — la largeur
     max-content de « Une voiture en charge, cable spirale branche »). Le plafond
     de 560 px n'a donc jamais servi, et la taille de la photo dependait du texte
     ecrit dessous. `width:100%` redonne une largeur definie, que max-width borne.
     Mesure du 2026-08-07. */
  .gal__c:nth-child(3){grid-column:1 / -1;width:100%;
    max-width:calc(50% - clamp(7px,1vw,12px));margin-inline:auto}
  /* Le socle beton que NOMME la legende est en bas de la photo. Des que la case
     devient un bandeau (large et de hauteur fixe), un ancrage a 42 % le pousse
     hors du cadre et la legende decrit un hors-champ. Ancrage plus bas ici. */
  .gal__c:nth-child(1) img{object-position:50% 62%}
}
@media(max-width:520px){
  .gal{grid-template-columns:1fr}
  .gal__c:nth-child(3){grid-column:auto;max-width:none}
  /* Une seule colonne : la case prend toute la largeur. A hauteur fixe (250 px)
     elle devenait un bandeau de 1,91:1 pour des sources PORTRAIT (0,75 et 0,80) :
     les deux tiers de la photo perdus, borne coupee en haut ET en bas. La hauteur
     suit desormais la largeur — le rapport reste ~1,4 de 320 a 520 px, celui que
     390 px donnait deja. */
  .gal__c img{height:clamp(250px,64vw,330px)}
}