/* =========================================================
   Design tokens — identité "schéma électrique / tableau"
   Palette : ardoise (fond sombre), papier bleuté (fond clair),
   cuivre (accent chaleureux), bleu tableau (secondaire),
   jaune sécurité (alerte ponctuelle).
   ========================================================= */
:root{
  --ardoise-950:#101823;
  --ardoise-800:#1B2635;
  --ardoise-700:#26344A;
  --papier:#EEF1F4;
  --papier-2:#E4E9EE;
  --cuivre-500:#BD6A2E;
  --cuivre-600:#A05625;
  --bleu-600:#2C4A6E;
  --bleu-700:#203954;
  --jaune-securite:#F0B429;
  --ligne:#D3DAE1;
  --texte-900:#16202C;
  --texte-600:#4C5A68;
  --blanc:#FFFFFF;

  --police-titre:'Archivo', system-ui, sans-serif;
  --police-texte:'IBM Plex Sans', system-ui, sans-serif;
  --police-mono:'IBM Plex Mono', 'Courier New', monospace;

  --rayon:6px;
  --ombre:0 12px 30px -14px rgba(16,24,35,.35);
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
body{
  margin:0;
  font-family:var(--police-texte);
  color:var(--texte-900);
  background:var(--papier);
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ardoise-950);color:#fff;padding:.6em 1em;z-index:200}
.skip-link:focus{left:12px;top:12px}

h1,h2,h3{font-family:var(--police-titre);line-height:1.15;margin:0 0 .5em;color:var(--ardoise-950)}
h1{font-size:clamp(2rem,4vw + 1rem,3.1rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,2.4vw + 1rem,2.1rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
.eyebrow{
  font-family:var(--police-mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  color:var(--cuivre-500);
  margin:0 0 .6em;
}

/* Focus visible partout */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--jaune-securite);
  outline-offset:2px;
}

/* Boutons */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--police-mono);
  font-weight:500;
  padding:.85em 1.3em;
  border-radius:var(--rayon);
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  font-size:.95rem;
  transition:transform .15s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-cta{background:var(--cuivre-500);color:#fff}
.btn-cta:hover{background:var(--cuivre-600)}
.btn-ghost{background:transparent;border-color:var(--ardoise-950);color:var(--ardoise-950)}
.btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.1)}
.btn-block{width:100%;justify-content:center}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--ardoise-950);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-block:14px}
.logo{display:flex;align-items:center;gap:.6em;text-decoration:none;color:#fff;font-family:var(--police-titre);font-weight:800;font-size:1.05rem}
.logo-mark{
  width:14px;height:14px;border-radius:2px;
  background:var(--jaune-securite);
  box-shadow:0 0 0 3px rgba(240,180,41,.2);
  flex:none;
}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{width:22px;height:2px;background:#fff;display:block}
.nav-principale{display:flex;align-items:center;gap:1.6em}
.nav-principale ul{display:flex;gap:1.3em;list-style:none;margin:0;padding:0;font-size:.94rem}
.nav-principale a{text-decoration:none;color:rgba(255,255,255,.85);padding:.3em 0;border-bottom:2px solid transparent}
.nav-principale a:hover,.nav-principale a[aria-current="page"]{color:#fff;border-color:var(--cuivre-500)}
.nav-urgence{
  color:var(--jaune-securite) !important;
  font-family:var(--police-mono);
  display:inline-flex;align-items:center;gap:.4em;
}
.nav-urgence::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--jaune-securite);display:inline-block}
.nav-phone{font-size:.85rem;padding:.6em 1em}

@media (max-width:860px){
  .nav-toggle{display:flex}
  .nav-principale{
    position:fixed;inset:64px 0 0 0;
    background:var(--ardoise-950);
    flex-direction:column;align-items:stretch;
    padding:24px 20px;gap:1.4em;
    transform:translateY(-8px);
    opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-principale.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
  .nav-principale ul{flex-direction:column;gap:.9em;font-size:1.1rem}
  .nav-phone{align-self:flex-start}
}

/* ============ HERO ============ */
.hero{
  background:linear-gradient(180deg,var(--ardoise-950),var(--ardoise-800));
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero-inner{
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;
  align-items:center;
  padding-block:64px 56px;
  position:relative;z-index:1;
}
.hero h1{color:#fff}
.hero-intro{color:rgba(255,255,255,.78);font-size:1.08rem;max-width:46ch}
.hero-actions{display:flex;gap:.8em;flex-wrap:wrap;margin-top:1.6em}
.hero-art{position:relative}
.hero-art svg{width:100%;height:auto}
.hero-art img{width:100%;height:auto;border-radius:var(--rayon);box-shadow:var(--ombre)}

/* Trace de circuit — élément signature, en fond du hero */
.circuit-trace{position:absolute;inset:0;opacity:.35;pointer-events:none;z-index:0}
.circuit-trace path{
  fill:none;stroke:var(--cuivre-500);stroke-width:1.4;
  stroke-dasharray:6 260;stroke-dashoffset:0;
}
.circuit-trace circle{fill:var(--jaune-securite)}

@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;padding-block:48px 40px}
  .hero-art{order:-1;max-width:280px;margin-inline:auto}
}

/* ============ SECTIONS génériques ============ */
.section{padding-block:56px}
.section-tight{padding-block:32px}
.section-light{background:var(--blanc)}
.section-dark{background:var(--ardoise-950);color:#fff}
.section-dark h2{color:#fff}

.grid-usp{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-services{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:760px){.grid-usp,.grid-services{grid-template-columns:1fr}}

.carte{
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:var(--rayon);
  padding:24px;
}
.carte-usp{
  border-top:3px solid var(--cuivre-500);
  box-shadow:var(--ombre);
}
.carte-service{
  display:flex;flex-direction:column;gap:.4em;
  text-decoration:none;color:inherit;
  transition:border-color .2s ease, transform .2s ease;
}
.carte-service:hover{border-color:var(--cuivre-500);transform:translateY(-2px)}
.carte-service .voir-plus{
  margin-top:.6em;font-family:var(--police-mono);font-size:.85rem;color:var(--cuivre-500);
}
.carte-service-photo{
  margin:-24px -24px 4px;width:calc(100% + 48px);max-width:none;
  aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--rayon) var(--rayon) 0 0;
}

.liste-points{list-style:none;margin:0;padding:0;display:grid;gap:.7em}
.liste-points li{
  padding-left:1.6em;position:relative;
}
.liste-points li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:9px;height:9px;background:var(--jaune-securite);border-radius:1px;
}

/* Bande urgence dépannage */
.band-urgence{
  background:var(--ardoise-800);
  color:#fff;
  border-top:3px solid var(--jaune-securite);
  border-bottom:3px solid var(--jaune-securite);
}
.band-urgence-inner{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:36px}
.band-urgence h2{color:#fff}
.band-urgence p{color:rgba(255,255,255,.78);max-width:56ch}
.badge-urgence{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--police-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--jaune-securite);margin-bottom:.6em;
}
.badge-urgence::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--jaune-securite);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.badge-urgence::before{animation:none}}

.note-securite{
  background:#2A1A10;border:1px solid var(--jaune-securite);color:#F3D9A0;
  padding:14px 16px;border-radius:var(--rayon);font-size:.9rem;margin-top:1.4em;
}

/* Bande CTA */
.band-cta{background:var(--bleu-700);color:#fff}
.band-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:36px}
.band-cta h2{color:#fff;margin:0}
.band-cta-actions{display:flex;gap:.7em;flex-wrap:wrap}

/* FAQ — accordéon façon "disjoncteur" */
.faq-liste{display:grid;gap:12px;max-width:820px}
.faq-item{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;font-weight:600;font-family:var(--police-titre);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-switch{
  flex:none;width:34px;height:18px;border-radius:9px;background:var(--ligne);position:relative;transition:background .2s ease;
}
.faq-switch::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s ease;
}
.faq-item[open] .faq-switch{background:var(--cuivre-500)}
.faq-item[open] .faq-switch::after{transform:translateX(16px)}
.faq-item .faq-reponse{padding:0 20px 20px;color:var(--texte-600)}

/* Formulaire de contact / Brevo */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.brevo-embed{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:24px;
}
.contact-info-item{display:flex;gap:.8em;margin-bottom:1em;font-family:var(--police-mono);font-size:.95rem}

.form-contact{display:grid;gap:16px}
.form-row{display:grid;gap:.4em}
.form-row label{font-family:var(--police-mono);font-size:.85rem;color:var(--texte-600)}
.form-row input,.form-row select,.form-row textarea{
  font-family:var(--police-texte);font-size:.95rem;color:var(--texte-900);
  border:1px solid var(--ligne);border-radius:var(--rayon);padding:.7em .8em;background:var(--blanc);
}
.form-row textarea{resize:vertical}
.form-row-checkbox{display:flex;flex-direction:row;align-items:flex-start;gap:.6em}
.form-row-checkbox label{font-family:var(--police-texte);font-size:.85rem;color:var(--texte-600)}
.form-row-checkbox input{margin-top:.25em}
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-alert{padding:14px 16px;border-radius:var(--rayon);font-size:.9rem;margin-bottom:1.2em}
.form-alert-succes{background:#E8F3E8;border:1px solid #4C9A4C;color:#255C25}
.form-alert-erreur{background:#FBE8E4;border:1px solid #C0473A;color:#7A2A20}

/* Facebook */
.fb-link{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;color:rgba(255,255,255,.85)}
.fb-link:hover{color:#fff}

/* ============ Actualités (accueil) ============ */
.actus-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:stretch}
.actus-grid.actus-grid-seule{grid-template-columns:1fr;max-width:640px}
.actu-date{
  font-family:var(--police-mono);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--cuivre-500);margin:0 0 .3em;
}
.actu-texte{color:var(--texte-600);margin:0}

.actu-principale{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--ombre);
}
.actu-principale img{width:100%;aspect-ratio:16/10;object-fit:cover;flex:none}
.actu-principale-contenu{padding:24px;display:flex;flex-direction:column;gap:.6em;flex:1}
.actu-principale .actu-texte{flex:1}
.actu-lire-plus{
  font-family:var(--police-mono);font-size:.9rem;color:var(--cuivre-500);
  text-decoration:none;align-self:flex-start;
}
.actu-lire-plus:hover{text-decoration:underline}

.actus-secondaires{display:flex;flex-direction:column;gap:20px}
.actu-mini{
  position:relative;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);
  display:flex;gap:14px;padding:14px;flex:1;
}
.actu-mini img{width:84px;height:84px;object-fit:cover;border-radius:4px;flex:none}
.actu-mini-contenu{display:flex;flex-direction:column;gap:.2em;min-width:0}
.actu-mini .actu-texte{
  font-size:.9rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.actu-mini-overlay{position:absolute;inset:0;border-radius:var(--rayon)}

@media (max-width:820px){
  .actus-grid{grid-template-columns:1fr}
}

/* Page « Toutes les actualités » */
.actus-page-liste{display:grid;gap:20px;max-width:820px}
.actu-carte{
  position:relative;display:grid;grid-template-columns:220px 1fr;gap:0;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;
}
.actu-carte img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.actu-carte-contenu{padding:20px;display:flex;flex-direction:column;gap:.4em}
@media (max-width:620px){
  .actu-carte{grid-template-columns:1fr}
  .actu-carte img{aspect-ratio:16/9}
}

/* ============ Avis Google (accueil) ============ */
.avis-note{font-family:var(--police-mono);font-size:1rem;color:var(--texte-600)}
.avis-etoiles{color:var(--jaune-securite);letter-spacing:.05em}
.avis-grid{
  display:flex;gap:20px;overflow-x:auto;padding-bottom:10px;margin-bottom:-10px;
  scroll-snap-type:x proximity;scrollbar-width:thin;
}
.avis-carte{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:20px;
  flex:0 0 280px;scroll-snap-align:start;
}
.avis-entete{display:flex;align-items:center;gap:12px;margin-bottom:.6em}
.avis-photo{border-radius:50%;object-fit:cover;flex:none}
.avis-auteur{font-weight:700;margin:0}
.avis-texte{
  color:var(--texte-600);font-size:.92rem;margin:0;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.avis-pied{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}

/* Fil d'ariane */
.breadcrumb{padding-block:14px}
.breadcrumb ol{list-style:none;display:flex;gap:.4em;flex-wrap:wrap;margin:0;padding:0;font-family:var(--police-mono);font-size:.82rem;color:var(--texte-600)}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:.4em;color:var(--ligne)}

/* ============ FOOTER ============ */
.site-footer{background:var(--ardoise-950);color:rgba(255,255,255,.75);padding-block:48px 24px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-heading{font-family:var(--police-mono);text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;color:var(--jaune-securite);margin-bottom:.7em}
.logo-footer{font-family:var(--police-titre);font-weight:800;color:#fff;font-size:1.05rem}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:.5em}
.footer-links a{text-decoration:none;color:rgba(255,255,255,.75)}
.footer-links a:hover{color:#fff}
.footer-bottom{margin-top:36px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem}

/* ============ Réalisations ============ */
.grid-realisations{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){.grid-realisations{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.grid-realisations{grid-template-columns:1fr}}
.realisation-vide{
  border:1px dashed var(--ligne);border-radius:var(--rayon);
  padding:32px 20px;text-align:center;color:var(--texte-600);
  font-family:var(--police-mono);font-size:.9rem;
}
.realisation-photo{
  position:relative;margin:0;border-radius:var(--rayon);overflow:hidden;border:1px solid var(--ligne);
  background:var(--papier-2);
}
.realisation-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.realisation-photo figcaption{padding:10px 14px;font-size:.88rem;color:var(--texte-600)}

.service-photo{
  border-radius:var(--rayon);border:1px solid var(--ligne);box-shadow:var(--ombre);
  aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;
}

/* ============ Animations au scroll (sobres) ============ */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.reveal-stagger.is-visible > *{opacity:1;transform:none}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.02s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.09s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.23s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.30s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.37s}

/* Parallax très léger sur l'illustration du hero */
.hero-art{will-change:transform}

/* ============ Pages légales ============ */
.contenu-texte{max-width:76ch}
.contenu-texte h2{margin-top:1.6em}