/* ═══════════════════════════════════════════════════════════════════════════
   DR ELEC — Marseille (13)
   Direction retenue : C « Le bâti » + l'index de B (DESIGN.md §7).
   Thème CLAIR. Motif signature : la bande de matière (pierre du bâti marseillais).

   ⛔ DISCIPLINE DES FILETS (DESIGN.md §4, design-artisan-btp §5 ter) —
   TROIS styles de filet sur tout le site, pas un de plus :
     1. --filet   1px   séparation de liste
     2. --encre   2px   ouverture de relevé
     3. --ocre    3px   accent d'exception
   Aucun filet en travers d'une photographie. Une frontière se marque UNE fois :
   filet OU changement de fond OU vide. Corriger = remplacer, jamais empiler.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --fond:#FFFFFF; --fond-2:#EEF1F3;
  --bleu:#0E4C6B; --bleu-fonce:#0A3549;
  /* #BE4E1B : blanc dessus = 4,89:1 (AA). L'ancien #CC5A22 tombait à 4,16:1. */
  --ocre:#BE4E1B;
  /* l'ocre posé EN TEXTE sur fond clair : 6,53:1 sur blanc */
  --ocre-texte:#A03F12;
  --encre:#10222E; --gris:#5C6B73; --filet:#D4DBDF;
  --fs-display:clamp(38px,5.2vw,72px);
  --wrap:1200px; --gut:28px;
  --ombre:0 1px 2px rgba(16,34,46,.05), 0 6px 18px rgba(16,34,46,.07);
}
@media(max-width:600px){:root{--gut:18px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:"Public Sans",system-ui,-apple-system,sans-serif;
  color:var(--encre);background:var(--fond);line-height:1.6;
  -webkit-font-smoothing:antialiased;font-size:17px}
img{max-width:100%;display:block}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif;margin:0;line-height:1.08;
  letter-spacing:-.025em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
/* Le nom de l'entreprise ne se coupe jamais en fin de ligne. */
.nom{white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;
  padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);font-weight:600;margin:0}
.lead{font-size:clamp(16.5px,1.3vw,19.5px);color:#33454F;max-width:58ch}
.h2{font-size:clamp(27px,3.2vw,44px)}
figure{margin:0;background:var(--fond-2)}
/* ⛔ aucun liseré, aucun cadre sur une photographie */
figure img{width:100%;height:100%;object-fit:cover}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ocre);color:#fff;text-decoration:none;font-weight:600;
  font-size:16.5px;padding:16px 30px;border:0;border-radius:2px;cursor:pointer;
  min-height:48px;font-family:inherit;
  transition-property:background-color,scale;transition-duration:.18s;
  transition-timing-function:cubic-bezier(.2,0,0,1)}
.btn:hover{background:#A64316}
.btn:active{scale:.96}
.btn--clair{background:#fff;color:var(--bleu-fonce)}
.btn--clair:hover{background:#E7EDF1}
.tel-xl{font-family:"Archivo";font-weight:700;font-size:clamp(27px,3.1vw,40px);
  letter-spacing:-.02em;text-decoration:none;display:inline-block;
  font-feature-settings:'tnum';white-space:nowrap}
.micro{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--gris);margin-bottom:2px}

/* ── EN-TÊTE ──────────────────────────────────────────────────────────────
   ⛔ Interdits de convergence (DESIGN.md §6) : pas de bouton plein à l'extrême
   droite (N2), pas d'item actif souligné (N3 — ici une pastille ocre),
   pas d'en-tête transparent sur photo (N4 — il est opaque, c'est la PHOTO
   qui mord dessous). ⚠ padding-block seul : le raccourci écrase la gouttière. */
.hdr{background:#fff;position:relative;z-index:30}
.hdr__in{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-block:18px}
.mark{font-family:"Archivo";font-weight:700;font-size:24px;letter-spacing:-.015em;
  text-decoration:none;display:block;line-height:1.05}
.mark small{display:block;font-family:"Public Sans";font-weight:400;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gris);margin-top:4px}
.nav{display:flex;gap:30px;align-items:center;font-size:15.5px;font-weight:500}
.nav a{text-decoration:none;padding:8px 0;display:inline-block}
.nav a:hover{color:var(--ocre-texte)}
/* page courante : pastille ocre, jamais un soulignement (N3) */
.nav [aria-current="page"]{font-weight:600;color:var(--ocre-texte)}
.nav [aria-current="page"]::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--ocre);margin-right:8px;vertical-align:middle}

/* Déroulant « Prestations » — les 3 pièges de qa/check-submenu.mjs */
.grp{position:relative}
.grp__btn{font:inherit;font-size:15.5px;font-weight:500;background:none;border:0;
  padding:8px 0;cursor:pointer;color:inherit;display:inline-flex;align-items:center;gap:7px}
.grp__btn:hover{color:var(--ocre-texte)}
.grp__btn svg{transition-property:rotate;transition-duration:.18s}
.grp[data-open="true"] .grp__btn svg{rotate:180deg}
.grp__pan{position:absolute;top:100%;left:-18px;min-width:290px;background:#fff;
  box-shadow:var(--ombre);padding:10px;z-index:40;
  opacity:0;visibility:hidden;translate:0 -6px;
  transition-property:opacity,translate,visibility;transition-duration:.18s;
  transition-timing-function:cubic-bezier(.2,0,0,1)}
/* PASSERELLE : comble le vide entre le bouton et le panneau — sans elle le
   pointeur quitte le sous-arbre en descendant et le menu se referme. */
.grp__pan::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.grp[data-open="true"] .grp__pan{opacity:1;visibility:visible;translate:0 0}
.grp__pan a{display:block;padding:11px 14px;text-decoration:none;font-size:15.5px;
  transition-property:background-color;transition-duration:.15s}
.grp__pan a:hover{background:var(--fond-2);color:var(--ocre-texte)}

/* Burger + tiroir — le tiroir est fixed AU-DESSUS du header sticky */
.burger{display:none;background:none;border:0;padding:10px;margin-right:-10px;
  cursor:pointer;min-width:48px;min-height:48px;align-items:center;justify-content:center}
.burger span{display:block;width:24px;height:2px;background:var(--encre);
  position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;
  width:24px;height:2px;background:var(--encre)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.tiroir{position:fixed;inset:0;background:#fff;z-index:100;padding:22px var(--gut);
  display:none;overflow-y:auto}
.tiroir[data-open="true"]{display:block}
.tiroir__haut{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:26px}
.tiroir__fermer{background:none;border:0;font-size:30px;line-height:1;cursor:pointer;
  padding:8px;min-width:48px;min-height:48px}
.tiroir a{display:block;padding:15px 0;text-decoration:none;font-size:19px;
  font-weight:500;border-bottom:1px solid var(--filet)}
/* ⚠ .tiroir a fixe une taille et un poids de LIEN : sans ce rappel, le numéro
   du tiroir retombe à 19px/500 et se confond avec les items de navigation.
   Il ne porte pas non plus de filet : c'est le dernier élément du tiroir. */
.tiroir a.tel-xl{font-size:clamp(27px,3.1vw,40px);font-weight:700;
  border-bottom:0;padding-bottom:0}
.tiroir__tel{margin-top:26px;color:var(--bleu)}
@media(max-width:900px){
  .nav,.hdr .grp{display:none}
  .burger{display:flex}
}

/* ── HERO en L (direction C) ──────────────────────────────────────────────
   Titre haut-gauche, photo carrée haut-droite qui MORD sur l'en-tête et
   déborde à droite, téléphone dans le creux du L sur aplat ocre. */
/* Le hero ne finit JAMAIS pile sur la frontière de la section suivante : la
   bande de matière (desktop) et la photo (mobile) sont les derniers éléments,
   et collées au changement de fond elles se lisent comme coupées. */
.hero{padding-bottom:46px}
@media(max-width:980px){.hero{padding-bottom:34px}}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:46px;align-items:start}
.hero__txt{padding-top:32px}
/* Corps réduit et colonne élargie : au corps plein le H1 tombait à 5 lignes à
   TOUTES les largeurs (mesuré 1440→320), soit le patron « H1 de 4-5 lignes
   empilées » que DESIGN.md §6 H9 range parmi les interdits (7/12 sites). */
.hero h1{font-size:clamp(34px,4.3vw,56px);max-width:20ch}
.hero .lead{margin-top:22px}
.hero__photo{aspect-ratio:1/1;margin-top:-92px;position:relative;z-index:1;
  margin-right:calc(-50vw + var(--wrap)/2 - var(--gut))}
/* Pages intérieures : la photo mord moins haut que sur l'accueil.
   ⚠ Ce décalage a été écrit en style EN LIGNE : inline gagne sur toute règle,
   y compris la media query, si bien que sous 980 px — où la grille passe en
   UNE colonne — la photo remontait de 46 px SUR le bloc précédent (bande de
   matière amputée sur contact et à propos, aplat ocre recouvert sur les pages
   service). Le décalage vit désormais ici, où la media query peut l'annuler. */
.hero__photo--interne{margin-top:-46px}
@media(max-width:1256px){.hero__photo{margin-right:calc(var(--gut) * -1)}}
.creux{display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;
  background:var(--ocre);color:#fff;padding:24px 30px;margin-top:34px}
.creux .tel-xl{color:#fff}
/* ⛔ « APPELER » était teinté #FBE0D2 : 3,89:1 sur l'ocre, sous le seuil AA de
   4,5 pour un corps de 12,5 px. C'est le libellé du bloc de conversion, présent
   sur les 8 pages. Blanc pur = 4,89:1 ; la hiérarchie tient par le corps et
   l'interlettrage, pas par la teinte. */
.creux .micro{color:#fff}
.creux .dev{color:#fff;font-weight:600;font-size:16.5px;text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.6);padding-bottom:2px}
.creux .dev:hover{border-bottom-color:#fff}
/* MOTIF SIGNATURE — bande de matière. Hauteur bornée : au-delà de
   largeur × 275/1080 la fenêtre attrape le coffret au lieu de la pierre. */
.matiere{margin-top:34px;height:104px;overflow:hidden}
.matiere img{width:100%;height:100%;object-fit:cover;object-position:center top}
@media(max-width:470px){.matiere{height:68px}}
@media(max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__txt{order:1;padding-top:22px}
  .hero__photo,.hero__photo--interne{order:2;margin-top:6px;aspect-ratio:4/3;
    margin-right:calc(var(--gut) * -1)}
}

/* ── INDEX DES PRESTATIONS (direction B) ──────────────────────────────────
   L'intitulé EST l'objet graphique (corps ≥ 40 px). Aucune vignette, aucune
   flèche, aucune icône. Signaux §5 bis : corps + aplat + asymétrie. */
.index{background:var(--fond-2);padding:74px 0}
.index__t{margin-bottom:20px}
.ligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.74fr);
  gap:38px;align-items:baseline;padding:26px 0;border-top:1px solid var(--filet);
  text-decoration:none;
  transition-property:translate;transition-duration:.18s;
  transition-timing-function:cubic-bezier(.2,0,0,1)}
.ligne:hover{translate:4px 0}
.ligne:hover h3{color:var(--ocre-texte)}
.ligne h3{font-size:clamp(27px,3.1vw,44px);
  transition-property:color;transition-duration:.18s}
.ligne p{font-size:15.5px;color:#4A5A64}
.ligne--fort{background:var(--bleu);color:#fff;border-top-color:var(--bleu);
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.ligne--fort p{color:#C5DCE8}
.ligne--fort:hover h3{color:#F0B999}
.ligne:last-of-type{border-bottom:1px solid var(--filet)}
@media(max-width:860px){.ligne{grid-template-columns:1fr;gap:9px}}

/* ── RELEVÉ (dispositif récupéré de la direction A) ───────────────────────
   Paires libellé / valeur. Sert la zone d'intervention ET la page À propos. */
.releve{border-top:2px solid var(--encre)}
/* Une frontière se marque UNE fois (DESIGN.md §4). Quand la première ligne est
   l'aplat bleu, l'aplat marque déjà l'ouverture : le filet ferait double emploi,
   et il est plus court que l'aplat de la valeur de la gouttière (il ne déborde
   pas), ce qui produisait un décrochement de 28 px de chaque côté. */
.releve:has(> .releve__l--fort:first-child){border-top:0}
.releve__l{display:grid;grid-template-columns:minmax(140px,.34fr) minmax(0,1fr);
  gap:12px 34px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--filet)}
.releve__l dt{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);font-weight:600}
.releve__l dd{margin:0;font-weight:500}
.releve__l--fort{background:var(--bleu);color:#fff;border-bottom-color:var(--bleu);
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-block:22px}
.releve__l--fort dt{color:#9EC4D8}
.releve__l--fort dd{font-family:"Archivo";font-weight:700;font-size:clamp(24px,2.7vw,40px);
  letter-spacing:-.02em}
@media(max-width:700px){.releve__l{grid-template-columns:1fr;gap:5px}}

/* ── Sections génériques ──────────────────────────────────────────────────
   Une frontière se marque UNE fois : ici par le changement de fond, donc
   AUCUN filet d'ouverture de section (sinon deux dispositifs au même endroit). */
.sec{padding:74px 0}
.sec--gris{background:var(--fond-2)}
.sec--sombre{background:var(--bleu-fonce);color:#fff}
.sec--sombre .lead{color:#C5DCE8}
.sec--sombre .eyebrow{color:#8FB3C6}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;
  align-items:center}
.duo--large{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.duo figure{aspect-ratio:4/3}
@media(max-width:860px){.duo,.duo--large{grid-template-columns:1fr;gap:28px}}

/* ── Question / réponse éditoriale (pages service) ────────────────────────
   Remplace le trio « 3 avantages + icônes » (DESIGN.md §5). */
.qr{border-top:2px solid var(--encre);margin-top:14px}
.qr__i{padding:26px 0;border-bottom:1px solid var(--filet)}
.qr__i h3{font-size:clamp(19px,1.9vw,25px);color:var(--bleu)}
.qr__i p{margin-top:11px;color:#33454F;max-width:70ch}

/* ── Pied de page ─────────────────────────────────────────────────────────
   ⛔ AUCUNE bande CTA finale (DESIGN.md §6 S9 : 12/12 des sites en ont une,
   de construction identique). Le pied s'ouvre directement sur le téléphone. */
.pied{background:var(--bleu-fonce);color:#fff;padding:60px 0 34px}
.pied__tel{display:block;color:#fff;margin-bottom:34px}
.pied__tel .micro{color:#8FB3C6}
/* ⚠ .pied a (plus bas) fixe font-size:15.5px et une couleur de lien : sans ce
   rappel, le téléphone du pied — qui REMPLACE la bande CTA finale supprimée
   (DESIGN.md §7) — retombe à 15,5px et n'est plus l'ouverture du pied. */
.pied a.pied__tel{font-size:clamp(27px,3.1vw,40px);color:#fff;padding:0}
.pied a.pied__tel:hover{text-decoration:none;color:#F0B999}
.pied__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:34px;padding-top:32px;border-top:1px solid rgba(255,255,255,.16)}
.pied h2{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8FB3C6;font-family:"Public Sans";font-weight:600;margin-bottom:13px}
.pied a{color:#DCE8EF;text-decoration:none;display:block;padding:5px 0;font-size:15.5px}
.pied a:hover{color:#fff;text-decoration:underline}
.pied p{color:#A9C2D0;font-size:15px}
.pied__bas{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  color:#8FB3C6;font-size:13.5px}
.pied__bas a{display:inline;font-size:13.5px;color:#8FB3C6}

/* ── Formulaire ──────────────────────────────────────────────────────────── */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form p{grid-column:1/-1}
.champ{display:flex;flex-direction:column;gap:7px}
.champ--large{grid-column:1/-1}
.champ label{font-size:13.5px;font-weight:600;letter-spacing:.03em}
/* Les champs obligatoires se signalent AVANT l'envoi, pas au message d'erreur. */
.oblig{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ocre-texte);font-size:12.5px}
.champ input,.champ select,.champ textarea{font:inherit;font-size:16px;padding:13px 14px;
  border:1px solid #B9C4CA;border-radius:2px;background:#fff;color:var(--encre);
  min-height:48px;width:100%}
.champ textarea{min-height:132px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--bleu);
  outline:2px solid var(--ocre);outline-offset:1px}
.form__etat{grid-column:1/-1;background:#fff;border-left:3px solid var(--ocre);
  padding:15px 17px;font-size:15.5px}
@media(max-width:700px){.form{grid-template-columns:1fr}}

/* ── Animations : liste fermée (DESIGN.md §9) ─────────────────────────────
   Une seule apparition, au chargement de l'accueil, en 3 chunks décalés.
   ⛔ Aucun fade-in au scroll. */
@media (prefers-reduced-motion:no-preference){
  .lever{animation:lever .28s cubic-bezier(.2,0,0,1) both}
  .lever:nth-child(2){animation-delay:.07s}
  .lever:nth-child(3){animation-delay:.14s}
}
@keyframes lever{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}