/* ==========================================================================
   Bruno Élec Services — site.css
   Design system : bleu électrique net sur blanc cassé froid, jaune énergie.
   Tokens, base, composants. (Reveal + hero pinné ajoutés en phase finale.)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:#F3F7FA;
  --blue-logo:#00A2EA;      /* décor / dégradé uniquement, jamais du texte */
  --blue-light:#E1F2FC;
  --blue:#0A6399;
  --yellow-light:#FDF1CF;
  --yellow:#E0A100;
  --ink:#0F1A24;
  --ink-2:#4B5A68;

  --grad:linear-gradient(135deg,#00A2EA,#0A6399);
  --section-grad:linear-gradient(180deg,#F3F7FA,#E1F2FC);

  /* notes de maquette */
  --note-ink:#9E1F42; --note-bg:#FBE9EE; --note-border:#E7A9BB;
  --sugg-ink:#7A5600; --sugg-bg:#FDF1CF; --sugg-border:#E0A100;

  /* ombres (une seule pour tout le site, boutons à part) */
  --sh-card:0 1px 2px rgba(15,26,36,.08),0 8px 24px rgba(15,26,36,.08),0 24px 48px rgba(15,26,36,.06),inset 0 1px 0 rgba(243,247,250,.7);
  --sh-soft:0 1px 2px rgba(15,26,36,.06),0 6px 16px rgba(15,26,36,.06),inset 0 1px 0 rgba(243,247,250,.7);

  /* rayons */
  --r-btn:10px; --r-card:12px; --r-badge:6px;

  /* dimensions */
  --maxw:1200px; --pad:24px;
  --annonce-h:40px; --header-h:72px;

  /* animation */
  --ease:ease-in-out; --dur:.4s;

  /* type */
  --fs-h1:clamp(2.25rem,1.6rem + 3vw,4rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.8vw,2.75rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-body:clamp(1rem,.96rem + .2vw,1.0625rem);
  --fs-label:.8125rem;
  --fs-stat:clamp(2rem,1.6rem + 1.6vw,3rem);
}

@media (max-width:1023px){ :root{ --header-h:64px; } }
@media (max-width:767px){ :root{ --pad:16px; --annonce-h:36px; } }

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:400; font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; font-size:inherit; color:inherit; background:transparent;
  border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--blue); color:var(--bg); }

/* ---------- Typo ---------- */
h1,.h1{ font-family:'Sora',sans-serif; font-weight:600; font-size:var(--fs-h1);
  letter-spacing:-.015em; line-height:1.06; text-wrap:balance; }
h2,.h2{ font-family:'Sora',sans-serif; font-weight:600; font-size:var(--fs-h2);
  letter-spacing:-.015em; line-height:1.1; text-wrap:balance; }
h3,.h3{ font-family:'Sora',sans-serif; font-weight:600; font-size:var(--fs-h3); line-height:1.2; }
h4,.h4{ font-family:'Inter',sans-serif; font-weight:600; font-size:1rem; line-height:1.3; }
.overline{ font-family:'Inter',sans-serif; font-weight:600; font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.08em; color:var(--blue); }
.lead{ font-size:calc(var(--fs-body) + .12rem); color:var(--ink-2); line-height:1.55; }
.num{ font-variant-numeric:tabular-nums; font-weight:600; }
.measure{ max-width:64ch; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:96px; isolation:isolate; }
.section > .container{ position:relative; z-index:1; }
@media (max-width:767px){ .section{ padding-block:64px; } }

/* grain 4% sur les fonds de section uniquement */
.section::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section.no-grain::before{ display:none; }

/* fonds de flux (assignés par build via .bg-*) */
.bg-a{ background:var(--bg); }
.bg-ab{ background:linear-gradient(180deg,#F3F7FA,#E1F2FC); }
.bg-ba{ background:linear-gradient(180deg,#E1F2FC,#F3F7FA); }
.bg-aba{ background:linear-gradient(180deg,#F3F7FA,#E1F2FC 50%,#F3F7FA); }
.bg-light{ background:var(--blue-light); }

/* ---------- Icônes ---------- */
.ic{ width:20px; height:20px; flex:0 0 auto; stroke:currentColor; fill:none; }
svg.ic{ display:block; }

/* ---------- Boutons ---------- */
.btn{
  --btn-bg:var(--blue); --btn-fg:var(--bg); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:12px 22px; border-radius:var(--r-btn);
  font-family:'Inter',sans-serif; font-weight:600; font-size:.9375rem; line-height:1;
  border:1.5px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  cursor:pointer; white-space:nowrap; transition:transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn .ic{ width:18px; height:18px; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
/* primaire rempli */
.btn--primary{ background:var(--blue); color:var(--bg); box-shadow:0 6px 16px rgba(10,99,153,.24); }
.btn--primary:hover{ background:#0b5787; box-shadow:0 10px 22px rgba(10,99,153,.30); }
/* ghost */
.btn--ghost{ background:transparent; color:var(--blue); border-color:var(--blue); }
.btn--ghost:hover{ background:rgba(10,99,153,.08); }
/* tertiaire texte */
.btn--text{ background:transparent; color:var(--blue); border-color:transparent; min-height:44px; padding:10px 12px; }
.btn--text:hover{ background:rgba(10,99,153,.08); transform:none; }
/* inversés sur aplat / image / carte CTA */
.on-accent .btn--primary,.btn--primary.is-inverted{ background:var(--bg); color:var(--blue); box-shadow:0 8px 20px rgba(15,26,36,.18); }
.on-accent .btn--primary:hover,.btn--primary.is-inverted:hover{ background:#eaf3f9; }
.on-accent .btn--ghost,.btn--ghost.is-inverted{ color:var(--bg); border-color:rgba(243,247,250,.75); }
.on-accent .btn--ghost:hover,.btn--ghost.is-inverted:hover{ background:rgba(243,247,250,.14); }
/* sur image (hero) */
.on-image .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.8); background:rgba(15,26,36,.14); }
.on-image .btn--ghost:hover{ background:rgba(255,255,255,.16); }

/* focus visible cohérent */
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }
.on-accent :focus-visible,.on-image :focus-visible{ outline-color:#fff; }

/* ---------- Barre d'annonce ---------- */
.annonce{
  height:var(--annonce-h); background:linear-gradient(180deg,#0a70a8,#0a5480);
  color:var(--bg); display:flex; align-items:center; overflow:hidden;
}
.annonce .container{ display:flex; align-items:center; justify-content:center; height:100%; }
.annonce ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:14px; }
.annonce li{ display:inline-flex; align-items:center; gap:7px; font-size:.8125rem; white-space:nowrap; }
.annonce li .ic{ width:15px; height:15px; opacity:.95; }
.annonce .sep{ opacity:.55; }
/* ticker mobile/tablette */
.annonce--ticker{ position:relative; }
.annonce--ticker .container{ justify-content:flex-start; padding-inline:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); }
.annonce--ticker .tkr{ display:flex; align-items:center; gap:14px; white-space:nowrap;
  padding-left:var(--pad); will-change:transform; animation:tkr linear infinite; }
.annonce--ticker ul{ gap:14px; }
@keyframes tkr{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:767px){ .annonce--ticker .container{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent); } }

/* ---------- Header (verre densifié, un seul état) ---------- */
.hdr{ position:sticky; top:0; z-index:50; }
.hdr__bar{
  position:relative; height:var(--header-h);
  background:linear-gradient(180deg,rgba(243,247,250,.92),rgba(243,247,250,.72));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 6px 24px rgba(15,26,36,.08);
}
.hdr__bar > .container{ height:100%; display:flex; align-items:center; gap:24px; position:relative; z-index:1; }
/* voile opaque pour le fondu à l'ouverture mobile */
.hdr__bar::after{ content:""; position:absolute; inset:0; z-index:0; background:var(--bg);
  opacity:0; transition:opacity var(--dur) var(--ease); pointer-events:none; }
.hdr.is-open .hdr__bar::after{ opacity:1; }

.hdr__logo{ display:inline-flex; align-items:center; }
.hdr__logo img{ height:44px; width:auto; }
@media (max-width:1023px){ .hdr__logo img{ height:36px; } }

.hdr__nav{ display:flex; align-items:center; gap:6px; margin-inline:auto; }
.hdr__link{ position:relative; display:inline-flex; align-items:center; gap:5px;
  padding:10px 12px; border-radius:8px; font-weight:500; color:var(--ink);
  transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.hdr__link:hover{ color:var(--blue); background:rgba(10,99,153,.06); }
.hdr__link[aria-current="page"]{ color:var(--blue); }
.hdr__link .ic{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }

/* sous-menu Prestations (desktop) */
.hdr__has-sub{ position:relative; }
.hdr__sub{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:320px; background:var(--bg); border-radius:var(--r-card); box-shadow:var(--sh-card);
  padding:8px; opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease), visibility var(--dur); z-index:60;
}
.hdr__has-sub:hover .hdr__sub,.hdr__has-sub:focus-within .hdr__sub,.hdr__sub.is-open{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.hdr__has-sub:hover .hdr__link .ic,.hdr__has-sub:focus-within .hdr__link .ic{ transform:rotate(180deg); }
.hdr__sub a{ display:block; padding:11px 14px; border-radius:8px;
  transition:background-color var(--dur) var(--ease); }
.hdr__sub a:hover{ background:var(--blue-light); }
.hdr__sub .st{ display:block; font-weight:600; color:var(--ink); font-size:.95rem; }
.hdr__sub .sd{ display:block; font-size:.8125rem; color:var(--ink-2); margin-top:2px; }

.hdr__cta{ margin-left:auto; }
.hdr__nav + .hdr__cta{ margin-left:0; }

/* burger */
.hdr__burger{ display:none; margin-left:auto; width:44px; height:44px; align-items:center;
  justify-content:center; background:transparent; border:0; border-radius:8px; cursor:pointer; color:var(--ink); }
.hdr__burger .ic{ width:24px; height:24px; }
.hdr__burger .ic-x{ display:none; }
.hdr.is-open .hdr__burger .ic-menu{ display:none; }
.hdr.is-open .hdr__burger .ic-x{ display:block; }

/* panneau mobile (déplié dans le flux) */
.hdr__panel{ display:none; }

@media (max-width:1023px){
  .hdr__nav,.hdr__cta.hdr__cta--desktop{ display:none; }
  .hdr__burger{ display:inline-flex; }
  .hdr__panel{
    display:block; overflow:hidden; max-height:0; background:var(--bg);
    box-shadow:0 12px 24px rgba(15,26,36,.10);
    transition:max-height var(--dur) var(--ease); position:relative; z-index:1;
  }
  .hdr.is-open .hdr__panel{ max-height:80vh; overflow-y:auto; }
  .hdr__panel .container{ padding-block:14px 20px; display:flex; flex-direction:column; gap:4px; }
  .hdr__panel a:not(.btn),.hdr__panel .macc__btn{ display:flex; align-items:center; padding:12px 8px;
    border-radius:8px; font-weight:500; color:var(--ink); min-height:44px;
    transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
  .hdr__panel a:not(.btn):hover,.hdr__panel .macc__btn:hover{ background:var(--blue-light); color:var(--blue); }
  /* accordéon prestations mobile */
  .macc__btn{ width:100%; justify-content:space-between; background:transparent; border:0;
    cursor:pointer; font-family:inherit; font-size:1rem; }
  .macc__btn .ic{ width:18px; height:18px; transition:transform var(--dur) var(--ease); }
  .macc.is-open .macc__btn .ic{ transform:rotate(180deg); }
  .macc__panel{ overflow:hidden; max-height:0; transition:max-height var(--dur) var(--ease); }
  .macc.is-open .macc__panel{ max-height:340px; }
  .macc__panel a{ display:block; padding:12px 8px 12px 20px; min-height:44px; }
  .macc__panel .st{ font-weight:600; display:block; }
  .macc__panel .sd{ display:none; } /* mobile : titres seuls, descriptions réservées à l'overlay desktop */
  .macc__panel a:hover .st{ color:var(--blue); }
  .hdr__panel .btn{ width:100%; margin-top:8px; }
  .hdr__tel{ display:flex; align-items:center; gap:8px; padding:12px 8px; color:var(--ink);
    font-weight:600; }
  .hdr__tel:hover{ color:var(--blue); }
  .hdr__tel .ic{ width:18px; height:18px; color:var(--blue); }
}

/* ---------- Hero d'accueil ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100svh - var(--header-h) - var(--annonce-h));
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:64px var(--pad); }
.hero__media{ position:absolute; inset:0; z-index:-2;
  /* placeholder dégradé (image réelle à intégrer plus tard) */
  background:
    radial-gradient(120% 90% at 50% 18%, #1794cf 0%, #0a6399 42%, #08405f 100%);
}
.hero__media::after{ content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(135deg, rgba(0,162,234,.28), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:.5; }
.hero__veil{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,26,40,.55) 0%, rgba(8,26,40,.35) 40%, rgba(8,26,40,.7) 100%); }
.hero__inner{ display:flex; flex-direction:column; align-items:center; gap:22px; color:#fff;
  max-width:900px; }
.hero h1{ color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.28); }
.hero__tag{ font-size:calc(var(--fs-body) + .15rem); color:rgba(255,255,255,.92);
  max-width:640px; text-shadow:0 1px 12px rgba(0,0,0,.28); }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:4px; }

/* pastille Google (version foncée / verre) */
.gpill{ display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22); color:#fff; font-size:.875rem; white-space:nowrap; }
.gpill .g{ width:18px; height:18px; flex:0 0 auto; }
.gpill .score{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--yellow); }
.gpill .stars{ display:inline-flex; gap:1px; color:var(--yellow); }
.gpill .stars svg{ width:15px; height:15px; }
@media (max-width:767px){ .hero__cta .btn{ width:100%; } .gpill{ font-size:.8125rem; padding:6px 12px; } }

/* étoiles */
.stars{ display:inline-flex; gap:2px; color:var(--yellow); }
.stars svg{ width:16px; height:16px; fill:currentColor; }

/* ---------- En-tête de section ---------- */
.shead{ display:flex; flex-direction:column; gap:12px; margin-bottom:40px; }
.shead .overline{ margin-bottom:2px; }
.shead p{ color:var(--ink-2); max-width:60ch; }
.shead.center{ align-items:center; text-align:center; margin-inline:auto; }
.shead.center p{ margin-inline:auto; }

/* ---------- S2 Prestations : split 5/7 + item rangée ---------- */
.split57{ display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:start; }
.presta-list{ display:flex; flex-direction:column; }
.presta-row{ display:grid; grid-template-columns:auto 1fr; gap:20px; padding:26px 0;
  position:relative; }
.presta-row + .presta-row::before{ content:""; position:absolute; top:0; left:0; right:0;
  height:1px; background:rgba(15,26,36,.12); }
.presta-ico{ width:64px; height:64px; border-radius:14px; background:var(--grad); color:var(--bg);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-soft); }
.presta-ico svg{ width:40px; height:40px; stroke:currentColor; fill:none; }
.presta-row h3{ margin-bottom:8px; }
.presta-row p{ color:var(--ink-2); }
.presta-row .btn--text{ margin-top:14px; margin-left:-12px; }
@media (max-width:1023px){ .split57{ grid-template-columns:1fr; gap:32px; }
  .presta-ico{ width:56px; height:56px; } .presta-ico svg{ width:34px; height:34px; } }
@media (max-width:767px){ .presta-ico{ width:52px; height:52px; } .presta-ico svg{ width:32px; height:32px; }
  .presta-row{ gap:16px; } }

/* ---------- Ticker générique (S3 + S8) ---------- */
.ticker{ position:relative; overflow:hidden; padding-block:14px 36px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent); }
.ticker__track{ display:flex; gap:24px; width:max-content; padding-left:var(--pad);
  align-items:flex-start; will-change:transform; }
.ticker__track.run{ animation:tkr linear infinite; }
.ticker--rtl .ticker__track.run{ animation-direction:reverse; }
.ticker.paused .ticker__track.run{ animation-play-state:paused; }
@media (max-width:767px){ .ticker{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent); } }

/* carte image (réalisations) */
.rcard{ flex:0 0 280px; width:280px; background:var(--bg); border-radius:var(--r-card);
  box-shadow:var(--sh-card); overflow:hidden; transition:transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease); }
.rcard:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(15,26,36,.14); }
.rcard__img{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--blue-light); }
.rcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.rcard:hover .rcard__img img{ transform:scale(1.04); }
.rcard__t{ padding:16px 18px; font-family:'Sora',sans-serif; font-weight:600; font-size:1.02rem;
  min-height:64px; display:flex; align-items:center; }
@media (max-width:1023px){ .rcard{ flex-basis:240px; width:240px; } }
@media (max-width:767px){ .rcard{ flex-basis:200px; width:200px; } }
.after-ticker{ margin-top:8px; }

/* ---------- S4 Méthode : section de contraste + frise ---------- */
.section--contrast{ background:var(--blue); color:var(--bg); }
.section--contrast::before{ opacity:.03; }
.section--contrast .overline{ color:var(--blue-light); }
.section--contrast h2{ color:var(--bg); }
.section--contrast .shead p{ color:rgba(243,247,250,.82); }

.frise{ margin-top:56px; position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.frise__line{ position:absolute; top:24px; left:12.5%; right:12.5%; height:2px; z-index:0;
  background:linear-gradient(90deg,#bfe6fb,#e9f6ff); border-radius:2px;
  transform:scaleX(0); transform-origin:left center; }
.frise.is-drawn .frise__line{ transform:scaleX(1); transition:transform 1.5s var(--ease); }
.frise__step{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:12px; }
.frise__num{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:'Inter',sans-serif; font-weight:600; font-size:1.05rem;
  font-variant-numeric:tabular-nums; background:var(--blue); color:var(--bg);
  border:2px solid rgba(225,242,252,.5); }
.frise__step:last-child .frise__num{ background:var(--blue-light); color:var(--blue); border-color:var(--blue-light); }
.frise__step h3{ color:var(--bg); font-size:1.12rem; }
.frise__step p{ color:rgba(243,247,250,.92); font-size:.95rem; max-width:24ch; margin-inline:auto; }
@media (max-width:1023px){
  .frise{ grid-template-columns:1fr; gap:0; }
  .frise__line{ left:20px; top:0; bottom:0; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg,#bfe6fb,#e9f6ff); transform:scaleY(0); transform-origin:top center; }
  .frise.is-drawn .frise__line{ transform:scaleY(1); }
  .frise__step{ flex-direction:row; text-align:left; align-items:flex-start; gap:16px;
    padding-bottom:32px; }
  .frise__step:last-child{ padding-bottom:0; }
  .frise__num{ width:40px; height:40px; flex:0 0 auto; }
  .frise__step .fr-body{ padding-top:4px; }
  .frise__step p{ margin-inline:0; max-width:none; }
}
@media (max-width:767px){ .frise__num{ width:36px; height:36px; font-size:.95rem; } .frise__line{ left:18px; } }

/* ---------- S5 L'artisan : split chevauchement + stats ---------- */
.overlap{ position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.overlap__img{ position:relative; border-radius:var(--r-card); overflow:hidden; min-height:440px;
  box-shadow:var(--sh-card); }
.overlap__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.overlap__panel{ position:relative; z-index:2; align-self:center; margin-left:-14%;
  background:var(--bg); border-radius:var(--r-card); box-shadow:var(--sh-card);
  padding:48px; }
.overlap__panel .overline{ margin-bottom:12px; display:inline-block; }
.overlap__panel h2{ margin-bottom:16px; }
.overlap__panel p{ color:var(--ink-2); }
@media (max-width:1023px){
  .overlap{ grid-template-columns:1fr; }
  .overlap__img{ min-height:0; height:320px; }
  .overlap__panel{ margin-left:16px; margin-right:16px; margin-top:-56px; padding:32px; }
}
@media (max-width:767px){ .overlap__img{ height:260px; } .overlap__panel{ margin-top:-40px; padding:32px 24px; } }

/* bande de stats en cellules */
.stats{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--blue-light); border-radius:var(--r-card); overflow:hidden; }
.stat{ position:relative; padding:22px 24px; }
.stat .n{ display:block; font-size:var(--fs-stat); font-weight:600; color:var(--blue);
  font-variant-numeric:tabular-nums; line-height:1; }
.stat .l{ display:block; margin-top:8px; font-size:.8125rem; color:var(--ink-2); white-space:nowrap; }
.stat::after{ content:""; position:absolute; top:18px; bottom:18px; right:0; width:1px;
  background:rgba(10,99,153,.18); }
.stats .stat:last-child::after{ display:none; }
@media (max-width:767px){
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ text-align:center; }
  .stat .l{ white-space:normal; }
  .stats .stat:nth-child(2)::after{ display:none; }
  .stats .stat:last-child{ grid-column:1 / -1; }
  .stats .stat:last-child::before{ content:""; position:absolute; top:0; left:16px; right:16px;
    height:1px; background:rgba(10,99,153,.18); }
}

/* ---------- S6 Zone d'intervention : carte panneau ---------- */
.mapwrap{ max-width:720px; margin-inline:auto; background:var(--blue-light);
  border-radius:var(--r-card); box-shadow:var(--sh-card); padding:28px; }
.mapfig{ position:relative; width:100%; aspect-ratio:4/3; }
.mapfig svg{ position:absolute; inset:0; width:100%; height:100%; }
.mapfig svg path{ fill:#eef7fd; stroke:var(--blue); stroke-width:2.2; stroke-linejoin:round;
  stroke-linecap:round; }
.mappt{ position:absolute; width:0; height:0; } /* ancre ponctuelle au point */
.mappt .ic{ position:absolute; left:0; bottom:0; transform:translateX(-50%); color:var(--blue); }
.mappt--main .ic{ width:28px; height:28px; filter:drop-shadow(0 3px 6px rgba(10,99,153,.35)); }
.mappt--sec .ic{ width:22px; height:22px; }
.mappt .lbl{ position:absolute; left:0; transform:translateX(-50%);
  font-size:14px; color:var(--ink); background:rgba(243,247,250,.94);
  padding:2px 8px; border-radius:6px; white-space:nowrap; box-shadow:0 1px 3px rgba(15,26,36,.14); }
.mappt--main .lbl{ font-weight:600; top:9px; }          /* Varzay : étiquette sous le point */
.mappt--sec .lbl{ bottom:26px; }                         /* Saintes : étiquette au-dessus du pin */
.mapleg{ text-align:center; margin-top:16px; font-size:.9rem; color:var(--ink-2); }
@media (max-width:767px){ .mapwrap{ padding:18px; } .mapfig{ aspect-ratio:1/1; } }

/* ---------- S7 Assurances : bandeau emplacements ---------- */
.trust{ display:flex; gap:48px; align-items:center; }
.trust__slot{ flex:0 0 auto; width:96px; height:64px; border-radius:var(--r-card);
  background:var(--blue-light); }
@media (max-width:1023px){ .trust{ gap:32px; } .trust__slot{ height:56px; width:84px; } }
@media (max-width:767px){ .trust{ gap:16px; } .trust__slot{ height:48px; width:72px; flex:1 1 0; } }

/* ---------- S8 Avis ---------- */
.avis-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:40px; }
.avis-head .shead{ margin-bottom:0; }
.gnote{ text-align:right; flex:0 0 auto; }
.gnote__row{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.gnote__score{ font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--yellow); }
.gnote__count{ margin-top:6px; display:flex; align-items:center; gap:7px; justify-content:flex-end;
  color:var(--ink-2); font-weight:600; }
.gnote__count .g{ width:18px; height:18px; }
.gnote__count .gword{ height:20px; width:auto; display:inline-block; }
.avis-rows{ display:flex; flex-direction:column; gap:0; }
.acard{ flex:0 0 340px; width:340px; height:300px; background:var(--bg); border-radius:var(--r-card);
  box-shadow:var(--sh-card); padding:22px; color:var(--ink); display:flex; flex-direction:column; gap:12px; }
.acard__head{ display:flex; align-items:center; gap:12px; }
.acard__av{ width:42px; height:42px; border-radius:50%; background:var(--blue-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:700; overflow:hidden; flex:0 0 auto; }
.acard__av img{ width:100%; height:100%; object-fit:cover; }
.acard__name{ font-weight:600; }
.acard__meta{ display:flex; align-items:center; gap:7px; }
.acard__meta .g{ width:16px; height:16px; }
.acard__text{ color:var(--ink-2); font-size:.9375rem; line-height:1.55; flex:1 1 auto; min-height:0;
  overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);
  mask-image:linear-gradient(180deg,#000 82%,transparent); }
.avis-cta{ display:flex; gap:12px; align-items:center; margin-top:28px; flex-wrap:wrap; }
@media (max-width:1023px){ .acard{ flex-basis:300px; width:300px; } }
@media (max-width:767px){
  .avis-head{ flex-direction:column; align-items:flex-start; }
  .gnote{ text-align:left; } .gnote__row,.gnote__count{ justify-content:flex-start; }
  .acard{ flex-basis:260px; width:260px; height:288px; }
  .avis-cta .btn{ width:100%; }
}

/* ---------- S9 FAQ ---------- */
.faq{ max-width:760px; margin-inline:auto; }
.faq__item{ border-top:1px solid rgba(15,26,36,.14); }
.faq__item:last-child{ border-bottom:1px solid rgba(15,26,36,.14); }
.faq__q{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  background:transparent; border:0; cursor:pointer; text-align:left; padding:22px 4px;
  font-family:'Sora',sans-serif; font-weight:600; font-size:1.12rem; color:var(--ink); min-height:44px;
  transition:color var(--dur) var(--ease); }
.faq__q:hover{ color:var(--blue); }
.faq__q .ic{ width:22px; height:22px; flex:0 0 auto; color:var(--blue); margin-top:2px;
  transition:transform var(--dur) var(--ease); }
.faq__item.is-open .faq__q .ic{ transform:rotate(180deg); }
.faq__a{ overflow:hidden; max-height:0; transition:max-height var(--dur) var(--ease); }
.faq__a-inner{ padding:0 4px 24px; color:var(--ink-2); max-width:64ch; }
@media (max-width:767px){ .faq__q{ font-size:1.02rem; } }

/* ---------- Carte CTA (widget) ---------- */
.ctacard{ position:relative; border-radius:var(--r-card); overflow:hidden; text-align:center;
  color:var(--bg); padding:64px; box-shadow:var(--sh-card);
  background:radial-gradient(120% 130% at 50% 0%, #1a9ee0 0%, #0a6399 55%, #0a5183 100%); }
.ctacard::before{ content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ctacard > *{ position:relative; z-index:1; }
.ctacard .overline{ color:var(--blue-light); }
.ctacard h2{ color:var(--bg); margin:12px auto 14px; text-wrap:balance; }
.ctacard__lead{ color:rgba(243,247,250,.9); max-width:60ch; margin-inline:auto; }
.ctacard__rule{ height:1px; background:rgba(225,242,252,.28); margin:32px auto; max-width:520px; }
.ctacard__items{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; }
.ctacard__item{ display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.9rem; color:var(--bg); }
.ctacard__item svg{ width:40px; height:40px; stroke:var(--blue-light); fill:none; }
.ctacard__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
@media (max-width:1023px){ .ctacard{ padding:48px; } }
@media (max-width:767px){
  .ctacard{ padding:32px 24px; }
  .ctacard__items{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .ctacard__item svg{ width:32px; height:32px; }
  .ctacard__cta .btn{ width:100%; }
}

/* ---------- Hero de page ---------- */
.phero{ position:relative; isolation:isolate; text-align:center; overflow:hidden;
  min-height:calc(60svh - var(--header-h) - var(--annonce-h));
  display:flex; align-items:center; justify-content:center; padding:96px var(--pad);
  background:radial-gradient(70% 90% at 50% 42%, #ffffff 0%, #E1F2FC 55%, #cfe8fa 100%); }
.phero::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.06;
  background:url("../img/logo-bruno-elec-services.webp") no-repeat center/320px auto; }
.phero__inner{ position:relative; z-index:1; display:flex; flex-direction:column; gap:16px;
  align-items:center; max-width:840px; }
.phero p{ color:var(--ink-2); font-size:calc(var(--fs-body) + .12rem); }
@media (max-width:1023px){ .phero{ padding-block:64px; } .phero::before{ background-size:280px auto; } }
@media (max-width:767px){ .phero::before{ background-size:200px auto; } }

/* ---------- Placeholder image ---------- */
.ph{ position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card);
  background:radial-gradient(80% 80% at 50% 45%, #eaf5fd 0%, #d7ecfa 100%); }
.ph::before{ content:""; position:absolute; inset:0;
  background:url("../img/logo-bruno-elec-services.webp") no-repeat center/58% auto; opacity:.16; }
.ph__cap{ position:absolute; left:12px; bottom:12px; z-index:1; background:rgba(243,247,250,.85);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:5px 11px; border-radius:999px; font-size:.8125rem; color:var(--ink-2); }

/* ---------- Notes de maquette ---------- */
.mnote{ display:flex; gap:14px; padding:18px 20px; border-radius:var(--r-card); border:1px solid;
  align-items:flex-start; }
.mnote .ic{ width:22px; height:22px; flex:0 0 auto; margin-top:1px; }
.mnote__label{ font-weight:700; font-size:.8125rem; text-transform:uppercase; letter-spacing:.04em;
  display:block; margin-bottom:3px; }
.mnote p{ font-size:.9375rem; line-height:1.5; }
.mnote--note{ background:var(--note-bg); border-color:var(--note-border); color:var(--note-ink); }
.mnote--note p{ color:#7a2038; }
.mnote--sugg{ background:var(--sugg-bg); border-color:var(--sugg-border); color:var(--sugg-ink); }
.mnote--sugg p{ color:#6a4c07; }
.note-section .mnote{ max-width:720px; margin-inline:auto; }

/* ---------- Footer ---------- */
.foot{ background:var(--bg); color:var(--ink); }
.foot__map{ width:100%; }
.mapblock{ position:relative; width:100%; height:360px; background:var(--blue-light);
  display:flex; align-items:center; justify-content:center; }
.mapblock iframe{ width:100%; height:100%; border:0; display:block; }
.mapblock__off{ text-align:center; padding:24px; }
.mapblock__off p{ color:var(--ink-2); margin-bottom:14px; }
@media (max-width:767px){ .mapblock{ height:280px; } }

.foot__id{ padding-block:56px; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:48px; }
.foot__grid > *{ min-width:0; }
.foot__info a,.foot__info .row span{ overflow-wrap:anywhere; }
@media (max-width:1023px) and (min-width:768px){ .foot__grid{ gap:32px; } }
.foot__logo img{ height:44px; width:auto; margin-bottom:18px; }
.foot__name{ font-family:'Sora',sans-serif; font-weight:600; font-size:1.3rem; color:var(--ink); }
.foot__pos{ color:var(--blue); font-weight:600; margin-top:2px; }
.foot__tag{ color:var(--ink-2); margin-top:12px; max-width:36ch; }
.foot__reassure{ display:flex; gap:16px; margin-top:20px; }
.foot__reassure .trust__slot{ width:78px; height:52px; }
.foot__col h4{ font-family:'Inter',sans-serif; font-weight:600; font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.08em; color:var(--blue); margin-bottom:16px; }
.foot__col + .foot__col-lg h4:not(:first-child),.foot__legal-title{ margin-top:28px; }
.foot__links{ display:flex; flex-direction:column; gap:12px; }
.foot__links a,.foot__info a,.foot__info span{ color:var(--ink); }
.foot__links a{ display:inline-block; width:max-content; transition:color var(--dur) var(--ease),
  transform var(--dur) var(--ease); }
.foot__links a:hover{ color:var(--blue); transform:translateX(3px); }
.foot__sub{ display:flex; flex-direction:column; gap:10px; padding-left:14px; margin-top:2px; }
.foot__sub a{ font-size:.9rem; color:var(--ink-2); }
.foot__sub a:hover{ color:var(--blue); }
.foot__info{ display:flex; flex-direction:column; gap:12px; }
.foot__info .row{ display:flex; align-items:center; gap:10px; }
.foot__info .ic{ width:18px; height:18px; color:var(--blue); flex:0 0 auto; }
.foot__info a:hover{ color:var(--blue); }
.foot__sep{ height:1px; background:rgba(15,26,36,.16); }
.foot__msep{ display:none; }
.foot__bar{ padding-block:22px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  color:var(--ink-2); font-size:.875rem; }
.foot__bar a:hover{ color:var(--blue); }
@media (max-width:767px){
  .foot__grid{ grid-template-columns:1fr; gap:32px; }
  .foot__msep{ display:block; }
  .foot__id{ padding-block:40px; }
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:8px; }
  .foot__reassure .trust__slot{ flex:0 0 auto; }
}

/* ---------- Formulaire (contact) ---------- */
.contact-grid{ display:grid; grid-template-columns:7fr 5fr; gap:32px; align-items:start; }
.card{ background:var(--bg); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:48px; }
.form-head{ margin-bottom:28px; }
.form-head .overline{ display:inline-block; margin-bottom:10px; }
.form-body{ display:flex; flex-direction:column; gap:20px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-weight:600; font-size:.9rem; }
.field .opt{ color:var(--ink-2); font-weight:400; }
.field input,.field textarea,.field select{ width:100%; min-height:44px; padding:12px 14px;
  border:1.5px solid #d5e3ee; border-radius:10px; background:#fff; color:var(--ink);
  font-family:inherit; font-size:1rem; transition:border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease); }
.field textarea{ min-height:132px; resize:vertical; line-height:1.5; }
.field input::placeholder,.field textarea::placeholder{ color:#8a99a7; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(10,99,153,.16); }
.field .hint{ font-size:.8125rem; color:var(--ink-2); }
.field .err{ font-size:.8125rem; color:var(--note-ink); display:none; }
.field.is-err input,.field.is-err textarea,.field.is-err select{ border-color:var(--note-border);
  box-shadow:0 0 0 3px rgba(158,31,66,.12); }
.field.is-err .err{ display:block; }
/* select custom chevron */
.field.sel{ position:relative; }
.field select{ appearance:none; -webkit-appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%230A6399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px; cursor:pointer; }
.field select:invalid{ color:#8a99a7; }
/* pièce jointe */
.file{ display:flex; align-items:center; gap:12px; }
.file__btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 16px;
  border:1.5px dashed #bcd0e0; border-radius:10px; background:#fff; color:var(--blue); cursor:pointer;
  font-weight:600; font-size:.9rem; transition:background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease); }
.file__btn:hover{ background:var(--blue-light); border-color:var(--blue); }
.file__btn .ic{ width:18px; height:18px; }
.file input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.file__name{ font-size:.875rem; color:var(--ink-2); display:none; align-items:center; gap:8px; }
.file__name.show{ display:inline-flex; }
.file__clear{ background:transparent; border:0; cursor:pointer; color:var(--ink-2); display:inline-flex; padding:4px; }
.file__clear .ic{ width:16px; height:16px; }
.form-submit{ margin-top:12px; }
.form-foot{ margin-top:16px; font-size:.8125rem; color:var(--ink-2); }
.form-foot a{ color:var(--blue); text-decoration:underline; }
.form-msg{ display:none; padding:18px 20px; border-radius:var(--r-card); font-weight:600; }
.form-msg--ok{ background:#e6f4ec; color:#1c6b3a; }
.form-msg--ko{ background:var(--note-bg); color:var(--note-ink); display:none; margin-top:12px; }
.form.is-sent .form-body,.form.is-sent .form-submit,.form.is-sent .form-foot{ display:none; }
.form.is-sent .form-msg--ok{ display:block; }
.form.is-sending .form-submit .btn{ opacity:.7; pointer-events:none; }

/* cartes coordonnées + horaires */
.info-cards{ display:flex; flex-direction:column; gap:24px; }
.info-card h3{ margin-bottom:16px; }
.info-card .row{ display:flex; align-items:flex-start; gap:12px; padding:7px 0; }
.info-card .row .ic{ width:19px; height:19px; color:var(--blue); flex:0 0 auto; margin-top:2px; }
.info-card a:hover{ color:var(--blue); }
.info-card .hrow{ display:flex; justify-content:space-between; gap:16px; padding:7px 0;
  border-top:1px solid var(--blue-light); }
.info-card .hrow:first-of-type{ border-top:0; }
.info-card .hrow .d{ color:var(--ink-2); }
.info-card .htitle{ display:flex; align-items:center; gap:10px; }
.info-card .htitle .ic{ width:19px; height:19px; color:var(--blue); }
@media (max-width:1023px){ .contact-grid{ grid-template-columns:1fr; } .card{ padding:32px; } }
@media (max-width:767px){ .card{ padding:24px; } }

/* ---------- Texte légal ---------- */
.legal{ max-width:720px; margin-inline:auto; }
.legal p{ margin-bottom:14px; color:var(--ink-2); }
.legal p strong{ color:var(--ink); }
.legal h2{ margin:36px 0 14px; }

/* ---------- Utilitaires ---------- */
.mt-note{ margin-top:56px; }
.center{ text-align:center; }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); border:0; }

/* ---------- Reveal au scroll (gated par .js-reveal, sinon tout visible) ---------- */
html.js-reveal [data-reveal]{ opacity:0; transform:translateY(30px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.js-reveal [data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- Hero pinné (effet rideau, accueil uniquement) ---------- */
.hero--pin{ position:sticky; top:0; z-index:0; }
.page-flow{ position:relative; z-index:2; background:var(--bg); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ticker__track.run{ animation:none !important; }
  html.js-reveal [data-reveal]{ opacity:1 !important; transform:none !important; }
}