/* ============================================================
   ELEC74 — Électricien à Annecy
   Mobile-first : styles de base = smartphone, min-width = desktop
   ============================================================ */

:root{
  --primary:#0F2A43;
  --primary-soft:#E7EDF4;
  --accent:#F5B83D;
  --accent-dark:#B97F0B;
  --bg:#F6F4EF;
  --card:#FFFDF9;
  --text:#221E18;
  --text-soft:#5B564D;
  --border:#E4DFD4;
  --radius:16px;
  --shadow:0 4px 18px rgba(15,42,67,.08);
  --serif:ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  padding-bottom:72px; /* barre d'appel mobile */
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:var(--primary);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;
}

.container{width:100%;max-width:1120px;margin:0 auto;padding:0 1.1rem;}
.container-narrow{max-width:780px;}

/* ---------- Accessibilité ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;
  padding:.8rem 1.2rem;z-index:200;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

/* ---------- Typographie ---------- */
h1,h2,h3,.stat-num,.footer-brand,.brand-name{
  font-family:var(--serif);
  line-height:1.08;
  letter-spacing:-0.015em;
  color:var(--primary);
  margin:0 0 .8rem;
}
h1{font-size:clamp(2.4rem,7vw,4rem);}
h2{font-size:clamp(1.7rem,5vw,2.5rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1rem;}

.eyebrow{
  font-size:.8rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent-dark);margin:0 0 .6rem;
}
.eyebrow-light{color:var(--accent);}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8rem 1.6rem;border-radius:999px;
  font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:active{transform:scale(.98);}
.btn-solid{background:var(--primary);color:#fff;}
.btn-solid:hover{background:#173a5c;box-shadow:var(--shadow);}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary);}
.btn-outline:hover{background:var(--primary-soft);}
.btn-accent{background:var(--accent);color:var(--primary);}
.btn-accent:hover{box-shadow:var(--shadow);}
.btn-full{width:100%;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(246,244,239,.96);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(6px);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;min-height:64px;flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem;
}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;}
.brand-icon{border-radius:8px;flex:none;}
.brand-name{font-size:1.35rem;font-weight:700;margin:0;}

.nav-toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;min-width:44px;padding:.5rem .9rem;
  background:transparent;border:2px solid var(--primary);border-radius:999px;
  color:var(--primary);font-weight:700;font-size:.95rem;cursor:pointer;
}
.nav-toggle-bar{
  display:block;width:18px;height:2px;background:currentColor;position:relative;
}
.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;
}
.nav-toggle-bar::before{top:-6px;}
.nav-toggle-bar::after{top:6px;}

.main-nav{display:none;width:100%;order:4;}
.main-nav.open{display:block;}
.main-nav ul{list-style:none;margin:0;padding:.4rem 0 .8rem;}
.main-nav a{
  display:block;padding:.85rem .4rem;text-decoration:none;font-weight:600;
  border-bottom:1px solid var(--border);
}
.header-actions{display:none;}

/* ---------- Hero ---------- */
.hero{padding:2.4rem 0 2.8rem;background:linear-gradient(180deg,#F1EEE6,var(--bg));}
.hero-grid{display:flex;flex-direction:column;gap:1.8rem;}
.hero-sub{font-size:1.06rem;color:var(--text-soft);max-width:56ch;}
.hero-ctas{display:flex;flex-direction:column;gap:.75rem;margin:.4rem 0 1rem;}
.hero-trust{
  font-size:.92rem;color:var(--text-soft);font-weight:600;margin:0;
  border-left:3px solid var(--accent);padding-left:.75rem;
}
.hero-media{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:3/2;
  background:linear-gradient(135deg,#E7EDF4,#DCE6F0);
}
.hero-media img{width:100%;height:100%;object-fit:cover;}

/* ---------- Bandeau urgence ---------- */
.urgence{background:var(--primary);color:#F2EFE8;padding:1.4rem 0;}
.urgence svg{color:var(--accent);flex:none;}
.urgence-inner{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;}
.urgence-title{font-weight:700;font-size:1.1rem;margin:0 0 .2rem;color:#fff;}
.urgence-text{margin:0;font-size:.95rem;color:#C9D4E0;}

/* ---------- Chiffres ---------- */
.stats{padding:2.2rem 0;}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
.stat{text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem .6rem;}
.stat-num{font-size:2.1rem;font-weight:700;margin:0;color:var(--primary);}
.stat-label{font-size:.85rem;color:var(--text-soft);margin:.2rem 0 0;}

/* ---------- Sections ---------- */
.section{padding:3.2rem 0;}
.section-alt{background:#EFECE3;}
.section-intro{max-width:70ch;color:var(--text-soft);}
.section-cta{margin-top:2rem;text-align:center;}

/* ---------- Cartes prestations ---------- */
.cards-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:1.6rem;}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.5rem 1.3rem;box-shadow:0 2px 8px rgba(15,42,67,.05);
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card-icon{
  width:52px;height:52px;border-radius:14px;background:var(--primary-soft);
  color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.card h3{margin-bottom:.5rem;}
.card p{color:var(--text-soft);font-size:.97rem;}
.card-price{
  font-weight:700;color:var(--accent-dark);font-size:.9rem;text-transform:uppercase;
  letter-spacing:.08em;margin:0;
}

/* ---------- Étapes ---------- */
.steps-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:1.6rem;}
.step{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.3rem;}
.step-num{
  font-family:var(--serif);font-size:2.4rem;font-weight:700;color:var(--accent);
  margin:0 0 .4rem;line-height:1;
}
.step p{color:var(--text-soft);font-size:.97rem;margin:0;}

/* ---------- À propos ---------- */
.about-grid{display:flex;flex-direction:column;gap:1.8rem;}
.about-media{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:4/5;max-height:520px;
  background:linear-gradient(135deg,#E7EDF4,#DCE6F0);
}
.about-media img{width:100%;height:100%;object-fit:cover;}
.about-points{list-style:none;padding:0;margin:1.2rem 0 1.6rem;}
.about-points li{display:flex;align-items:flex-start;gap:.6rem;padding:.45rem 0;font-weight:600;}
.about-points svg{color:var(--accent-dark);flex:none;margin-top:.25rem;}

/* ---------- Zone chips ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:1.4rem 0;}
.chips li{
  background:var(--card);border:1px solid var(--border);border-radius:999px;
  padding:.55rem 1.1rem;font-size:.92rem;font-weight:600;color:var(--primary);
}
.zone-note{color:var(--text-soft);font-size:.95rem;max-width:65ch;}

/* ---------- FAQ ---------- */
.faq-list{margin-top:1.4rem;}
.faq-item{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:.9rem;overflow:hidden;
}
.faq-item summary{
  cursor:pointer;padding:1.1rem 1.2rem;font-weight:700;color:var(--primary);
  list-style:none;position:relative;padding-right:2.6rem;min-height:44px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--accent-dark);font-weight:400;
}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding:0 1.2rem 1.2rem;margin:0;color:var(--text-soft);}

/* ---------- Contact ---------- */
.section-dark{background:var(--primary);color:#E9EDF2;}
.section-dark h2,.section-dark h3{color:#fff;}
.section-dark a{color:var(--accent);}
.contact-grid{display:flex;flex-direction:column;gap:2.2rem;}
.contact-list{list-style:none;padding:0;margin:1.4rem 0;}
.contact-list li{display:flex;align-items:flex-start;gap:.7rem;padding:.5rem 0;}
.contact-list svg{color:var(--accent);flex:none;margin-top:.3rem;}
.hours-title{margin-top:1.4rem;font-size:1.1rem;}
.hours-table{width:100%;border-collapse:collapse;font-size:.97rem;}
.hours-table th,.hours-table td{
  text-align:left;padding:.6rem .2rem;border-bottom:1px solid rgba(255,255,255,.15);
}
.hours-table th{font-weight:600;color:#C9D4E0;}

.contact-form-wrap{
  background:var(--card);border-radius:var(--radius);padding:1.6rem 1.3rem;
  box-shadow:var(--shadow);color:var(--text);
}
.contact-form-wrap h3{color:var(--primary);}
.contact-form-wrap a{color:var(--primary);}
.form-row{margin:0 0 1.05rem;}
.form-row label{display:block;font-weight:600;margin-bottom:.35rem;font-size:.95rem;}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row textarea{
  width:100%;padding:.85rem 1rem;min-height:48px;font-size:1rem;font-family:inherit;
  border:1.5px solid var(--border);border-radius:10px;background:#fff;color:var(--text);
}
.form-row textarea{resize:vertical;}
.form-consent{display:flex;gap:.65rem;align-items:flex-start;}
.form-consent input{width:22px;height:22px;margin-top:.2rem;flex:none;accent-color:var(--primary);}
.form-consent label{font-weight:400;font-size:.88rem;margin:0;color:var(--text-soft);}
.req{color:#B0322A;}
.form-status{font-weight:700;margin:0;min-height:1.4em;}
.form-status.ok{color:#1E7A3C;}
.form-status.err{color:#B0322A;}

.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* ---------- Footer ---------- */
.site-footer{background:#0A1E31;color:#B9C4D1;padding:2.6rem 0 1.2rem;font-size:.95rem;}
.site-footer a{color:#DCE4EC;}
.footer-grid{display:flex;flex-direction:column;gap:1.6rem;}
.footer-brand{font-size:1.4rem;color:#fff;margin-bottom:.4rem;}
.footer-title{font-weight:700;color:#fff;margin-bottom:.4rem;}
.footer-bottom{
  margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);
  text-align:center;font-size:.85rem;
}
.websaas-credit{margin:.3rem 0 0;text-align:center;font-size:.8rem;opacity:.8;}
.websaas-credit a{color:#DCE4EC;}

/* ---------- Barre d'appel mobile ---------- */
.mobile-cta-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:120;
  display:flex;background:#fff;border-top:1px solid var(--border);
  box-shadow:0 -4px 16px rgba(15,42,67,.12);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-cta{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;font-weight:700;text-decoration:none;font-size:1rem;
}
.mobile-cta-call{background:var(--accent);color:var(--primary);}
.mobile-cta-devis{background:var(--primary);color:#fff;}

/* ---------- Révélation au scroll ---------- */
.reveal{opacity:1;transform:none;}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
  .js .reveal.visible{opacity:1;transform:none;}
}

/* ============================================================
   TABLETTE ET PLUS — min-width 768px
   ============================================================ */
@media (min-width:768px){
  body{padding-bottom:0;}
  .mobile-cta-bar{display:none;}

  .nav-toggle{display:none;}
  .main-nav{display:block;width:auto;order:0;}
  .main-nav ul{display:flex;gap:.2rem;padding:0;}
  .main-nav a{border-bottom:none;padding:.6rem .7rem;font-size:.95rem;border-radius:8px;}
  .main-nav a:hover{background:var(--primary-soft);}
  .header-actions{display:flex;align-items:center;gap:.9rem;}
  .header-phone{
    display:inline-flex;align-items:center;gap:.45rem;font-weight:700;
    text-decoration:none;font-size:.95rem;
  }
  .btn-header{min-height:42px;padding:.5rem 1.2rem;font-size:.92rem;}

  .hero{padding:3.6rem 0 4rem;}
  .hero-ctas{flex-direction:row;}

  .urgence-inner{flex-direction:row;align-items:center;gap:1.4rem;}
  .urgence-inner > div{flex:1;}

  .stats-grid{grid-template-columns:repeat(4,1fr);}
  .cards-grid{grid-template-columns:repeat(2,1fr);}
  .steps-grid{grid-template-columns:repeat(3,1fr);}

  .contact-grid{flex-direction:row;align-items:flex-start;}
  .contact-info{flex:1;}
  .contact-form-wrap{flex:1;padding:2rem 1.8rem;}
}

/* ============================================================
   DESKTOP — min-width 1024px
   ============================================================ */
@media (min-width:1024px){
  .hero-grid{flex-direction:row;align-items:center;gap:3rem;}
  .hero-content{flex:1.1;}
  .hero-media{flex:1;aspect-ratio:4/3;}

  .cards-grid{grid-template-columns:repeat(3,1fr);}
  .section{padding:4.5rem 0;}

  .about-grid{flex-direction:row;align-items:center;gap:3.2rem;}
  .about-media{flex:0 0 40%;max-height:none;}
  .about-content{flex:1;}
}

/* ---------- Pages intérieures (légal) ---------- */
.breadcrumb{padding:1.2rem 0 0;font-size:.9rem;}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;}
.breadcrumb li+li::before{content:"›";margin-right:.4rem;color:var(--text-soft);}
.legal-content{padding:2rem 0 3.5rem;}
.legal-content h1{font-size:clamp(1.9rem,5vw,2.8rem);}
.legal-content h2{font-size:1.35rem;margin-top:2rem;}
.legal-content .placeholder{background:#FFF3D6;padding:.1rem .4rem;border-radius:4px;font-weight:600;}