/* ============================================
   BISBAU ÉLECTRICITÉ — Base Styles
   styles.css — Structure, layout, components
   
   THEME SWITCH:
   - Include theme-a.css for Pays Basque (green + red)
   - Include theme-b.css for Anthracite + Blue
   ============================================ */

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'Outfit', system-ui, sans-serif;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition: .3s cubic-bezier(.4,0,.2,1);
  --transition-slow: .6s cubic-bezier(.4,0,.2,1);
  --max-w: 1240px;
}

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  font-family: var(--ff-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
}

h1,h2,h3,h4 { font-family: var(--ff-display); line-height: 1.15; color: var(--c-primary); font-weight: 600; }
h1 { font-size: clamp(2.6rem,6vw,4.2rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem,4vw,3rem); }
h3 { font-size: 1.35rem; font-weight: 600; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }

.container { width: 90%; max-width: var(--max-w); margin: 0 auto; }
.section { padding: 6rem 0; position: relative; }

/* === SCROLL REVEAL === */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-60px); transition:opacity .8s ease,transform .8s ease; }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(60px); transition:opacity .8s ease,transform .8s ease; }
.reveal-right.visible { opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(.9); transition:opacity .7s ease,transform .7s ease; }
.reveal-scale.visible { opacity:1; transform:scale(1); }
.stagger > * { transition-delay: calc(var(--i,0) * .12s); }

/* === BUTTONS === */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 2rem; border-radius:var(--radius);
  font-family:var(--ff-body); font-weight:600; font-size:.95rem;
  border:none; cursor:pointer; transition:all var(--transition);
  text-decoration:none; position:relative; overflow:hidden;
}
.btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.15)0%,transparent 50%); opacity:0; transition:opacity var(--transition); }
.btn:hover::before { opacity:1; }
.btn--accent { background:var(--c-accent); color:#fff; box-shadow:0 4px 15px rgba(192,57,43,.3); }
.btn--accent:hover { background:var(--c-accent-deep); transform:translateY(-2px); box-shadow:0 8px 25px rgba(192,57,43,.35); }
.btn--warm { background:var(--c-warm); color:var(--c-primary); box-shadow:0 4px 15px rgba(212,168,83,.3); }
.btn--warm:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(212,168,83,.4); }
.btn--outline { background:transparent; border:2px solid rgba(255,255,255,.4); color:#fff; }
.btn--outline:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7); }
.btn--ghost { background:transparent; border:2px solid var(--c-accent); color:var(--c-accent); }
.btn--ghost:hover { background:var(--c-accent); color:#fff; }

/* === SECTION LABEL === */
.section-label { display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.section-label__line { width:40px; height:2px; background:var(--c-accent); border-radius:2px; }
.section-label__text { font-size:.78rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--c-accent); }

/* === URGENCE BANDEAU === */
.urgence { background:var(--c-accent); color:#fff; overflow:hidden; position:relative; padding:.55rem 0; font-size:.85rem; font-weight:600; }
.urgence__track { display:flex; gap:4rem; animation:marquee 25s linear infinite; white-space:nowrap; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.urgence__item { display:inline-flex; align-items:center; gap:.5rem; }
.urgence__dot { width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }

/* === HEADER === */
.header { position:sticky; top:0; z-index:100; background:var(--c-primary); border-bottom:1px solid rgba(255,255,255,.06); transition:all var(--transition); }
.header.scrolled { box-shadow:0 4px 30px rgba(0,0,0,.2); }
.header__inner { display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.header__logo { display:flex; align-items:center; gap:.8rem; color:var(--c-text-inv); }
.header__logo-icon { width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-deep)); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 12px rgba(192,57,43,.3); }
.header__logo-text { font-family:var(--ff-display); font-size:1.4rem; font-weight:700; line-height:1.1; }
.header__logo-text small { display:block; font-family:var(--ff-body); font-size:.65rem; font-weight:400; letter-spacing:.15em; text-transform:uppercase; opacity:.6; margin-top:1px; }
.header__nav { display:flex; align-items:center; gap:2.2rem; }
.header__nav a { color:rgba(255,255,255,.7); font-size:.88rem; font-weight:500; transition:all var(--transition); position:relative; letter-spacing:.01em; }
.header__nav a::after { content:''; position:absolute; bottom:-6px; left:0; width:0; height:2px; background:var(--c-accent); transition:width var(--transition); }
.header__nav a:hover { color:#fff; }
.header__nav a:hover::after { width:100%; }
.header__nav a.active { color:#fff; }
.header__nav a.active::after { width:100%; }
.header__cta-wrap { display:flex; align-items:center; gap:1rem; }
.header__phone { color:rgba(255,255,255,.6); font-size:.82rem; display:flex; align-items:center; gap:.35rem; }
.header__cta { background:var(--c-accent); color:#fff; padding:.6rem 1.4rem; border-radius:var(--radius); font-weight:600; font-size:.88rem; transition:all var(--transition); display:inline-flex; align-items:center; gap:.4rem; box-shadow:0 3px 12px rgba(192,57,43,.25); }
.header__cta:hover { background:var(--c-accent-deep); transform:translateY(-1px); }
.header__burger { display:none; background:none; border:none; cursor:pointer; padding:.5rem; position:relative; width:36px; height:36px; }
.header__burger span { position:absolute; left:6px; width:24px; height:2px; background:#fff; transition:all var(--transition); }
.header__burger span:nth-child(1){top:10px} .header__burger span:nth-child(2){top:17px;width:18px} .header__burger span:nth-child(3){top:24px}

/* === MOBILE NAV === */
.mobile-nav { position:fixed; inset:0; z-index:200; background:var(--c-primary); padding:5rem 2rem 2rem; transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
.mobile-nav.open { transform:translateX(0); }
.mobile-nav a { display:block; color:var(--c-text-inv); font-size:1.3rem; font-family:var(--ff-display); font-weight:600; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-nav__close { position:absolute; top:1.2rem; right:1.5rem; background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; }

/* === HERO === */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.hero__bg { position:absolute; inset:0; background:var(--hero-grad),url('../img/hero.jpg') center/cover no-repeat; transform:scale(1.05); transition:transform 8s ease; }
.hero:hover .hero__bg { transform:scale(1); }
.hero__deco { position:absolute; right:-5%; top:-10%; width:50%; height:120%; border-left:1px solid rgba(212,168,83,.15); transform:rotate(15deg); z-index:1; }
.hero__deco::before { content:''; position:absolute; top:30%; left:-1px; width:2px; height:120px; background:linear-gradient(to bottom,var(--c-warm),transparent); }
.hero__floating { position:absolute; right:8%; top:20%; width:160px; height:160px; border-radius:50%; border:2px solid rgba(212,168,83,.3); display:flex; align-items:center; justify-content:center; flex-direction:column; z-index:2; animation:floatBadge 5s ease-in-out infinite; backdrop-filter:blur(8px); background:rgba(27,46,31,.4); }
@keyframes floatBadge { 0%,100%{transform:translateY(0)rotate(-2deg)} 50%{transform:translateY(-15px)rotate(2deg)} }
.hero__floating-num { font-family:var(--ff-display); font-size:2.8rem; color:var(--c-warm); font-weight:700; line-height:1; }
.hero__floating-label { color:rgba(255,255,255,.6); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; margin-top:4px; }
.hero__floating-stars { color:var(--c-warm); font-size:.8rem; margin-top:4px; }
.hero__content { position:relative; z-index:3; max-width:680px; padding:2rem 0; }
.hero__tag { display:inline-flex; align-items:center; gap:.6rem; padding:.4rem 1.2rem .4rem .8rem; border:1px solid rgba(212,168,83,.3); border-radius:50px; margin-bottom:2rem; background:rgba(212,168,83,.08); }
.hero__tag-dot { width:8px; height:8px; border-radius:50%; background:var(--c-warm); animation:pulse 2s infinite; }
.hero__tag span { color:var(--c-warm); font-size:.82rem; font-weight:500; letter-spacing:.03em; }
.hero h1 { color:var(--c-text-inv); margin-bottom:1.5rem; }
.hero h1 em { font-style:italic; color:var(--c-warm); position:relative; }
.hero h1 em::after { content:''; position:absolute; bottom:4px; left:0; width:100%; height:8px; background:var(--c-accent); opacity:.3; border-radius:4px; z-index:-1; }
.hero__desc { color:rgba(255,255,255,.7); font-size:1.15rem; margin-bottom:2.5rem; max-width:540px; line-height:1.8; font-weight:300; }
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero__bottom { position:absolute; bottom:0; left:0; right:0; z-index:3; }
.hero__stats-bar { display:grid; grid-template-columns:repeat(4,1fr); background:rgba(27,46,31,.7); backdrop-filter:blur(16px); border-top:1px solid rgba(212,168,83,.15); }
.hero__stat { padding:1.5rem 2rem; text-align:center; border-right:1px solid rgba(255,255,255,.06); transition:background var(--transition); }
.hero__stat:hover { background:rgba(255,255,255,.04); }
.hero__stat:last-child { border:none; }
.hero__stat-num { font-family:var(--ff-display); font-size:2.2rem; color:var(--c-warm); font-weight:700; line-height:1; }
.hero__stat-label { color:rgba(255,255,255,.5); font-size:.78rem; margin-top:.3rem; text-transform:uppercase; letter-spacing:.08em; }

/* === SERVICES === */
.services { background:var(--c-bg); overflow:hidden; }
.services__header { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:end; margin-bottom:4rem; }
.services__header p { color:var(--c-text-light); font-size:1.05rem; line-height:1.8; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card { background:var(--c-surface); border:1px solid var(--c-border-light); border-radius:var(--radius-lg); padding:2.2rem; transition:all var(--transition); position:relative; overflow:hidden; }
.service-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--c-accent),var(--c-warm)); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.service-card:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(0,0,0,.1); border-color:transparent; }
.service-card:hover::after { transform:scaleX(1); }
.service-card__num { font-family:var(--ff-display); font-size:3rem; color:var(--c-border); font-weight:700; line-height:1; position:absolute; top:1rem; right:1.5rem; transition:color var(--transition); }
.service-card:hover .service-card__num { color:var(--c-accent-glow); }
.service-card__icon { width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg,var(--c-accent-glow),var(--c-warm-light)); display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem; transition:all var(--transition); }
.service-card:hover .service-card__icon { background:linear-gradient(135deg,var(--c-accent),var(--c-accent-deep)); box-shadow:0 6px 20px rgba(192,57,43,.25); }
.service-card:hover .service-card__icon svg { color:#fff!important; }
.service-card__icon svg { width:26px; height:26px; color:var(--c-accent); transition:color var(--transition); }
.service-card h3 { margin-bottom:.6rem; font-family:var(--ff-body); font-weight:700; }
.service-card p { color:var(--c-text-light); font-size:.92rem; line-height:1.7; }

/* === ABOUT === */
.about { background:var(--c-primary); color:var(--c-text-inv); overflow:hidden; position:relative; }
.about::before { content:''; position:absolute; top:-50px; right:-100px; width:400px; height:400px; border-radius:50%; border:1px solid rgba(212,168,83,.08); }
.about-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:0; align-items:stretch; min-height:550px; }
.about__img-col { position:relative; overflow:hidden; margin:-6rem 0; margin-left:-5%; }
.about__img { width:100%; height:100%; background-size:cover; background-position:center; position:relative; }
.about__img-overlay { position:absolute; bottom:2rem; right:-30px; background:var(--c-accent); color:#fff; padding:1.5rem 2rem; border-radius:var(--radius-lg); box-shadow:0 12px 40px rgba(192,57,43,.3); text-align:center; }
.about__img-overlay strong { display:block; font-family:var(--ff-display); font-size:2.4rem; line-height:1; }
.about__img-overlay span { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.about__content { padding:4rem 4rem 4rem 5rem; display:flex; flex-direction:column; justify-content:center; }
.about__content h2 { color:var(--c-text-inv); margin-bottom:1.5rem; }
.about__content .lead { color:rgba(255,255,255,.65); font-size:1.05rem; line-height:1.8; margin-bottom:2rem; font-weight:300; }
.process-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.process-card { display:flex; gap:1rem; align-items:flex-start; padding:1.2rem; border-radius:var(--radius); border:1px solid rgba(255,255,255,.08); transition:all var(--transition); background:rgba(255,255,255,.03); }
.process-card:hover { background:rgba(255,255,255,.06); border-color:rgba(212,168,83,.2); }
.process-num { flex-shrink:0; width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-deep)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; color:#fff; }
.process-text strong { display:block; color:#fff; font-size:.92rem; margin-bottom:.15rem; }
.process-text span { color:rgba(255,255,255,.5); font-size:.82rem; }

/* === GALLERY === */
.gallery-marquee-wrap { position:relative; overflow:hidden; }
.gallery-marquee-wrap::before,.gallery-marquee-wrap::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.gallery-marquee-wrap::before { left:0; background:linear-gradient(to right,var(--c-bg-warm),transparent); }
.gallery-marquee-wrap::after { right:0; background:linear-gradient(to left,var(--c-bg-warm),transparent); }
.gallery-marquee { display:flex; gap:1.2rem; animation:galleryScroll 40s linear infinite; width:max-content; }
.gallery-marquee:hover { animation-play-state:paused; }
@keyframes galleryScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.gallery-item { position:relative; border-radius:var(--radius-lg); overflow:hidden; width:320px; height:240px; flex-shrink:0; cursor:pointer; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(27,46,31,.85)0%,transparent 60%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.2rem; opacity:0; transition:opacity .4s ease; }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay span { color:#fff; font-weight:600; font-size:.95rem; }
.gallery-overlay small { color:rgba(255,255,255,.7); font-size:.8rem; margin-top:.2rem; }
.gallery-filter { padding:.5rem 1.3rem; border-radius:50px; border:1px solid var(--c-border); background:var(--c-surface); font-family:var(--ff-body); font-size:.85rem; font-weight:500; cursor:pointer; transition:all var(--transition); }
.gallery-filter:hover { border-color:var(--c-accent); color:var(--c-accent); }
.gallery-filter.active { background:var(--c-accent); color:#fff; border-color:var(--c-accent); }
.gallery-grid-mode { overflow:visible; }
.gallery-grid-mode::before,.gallery-grid-mode::after { display:none; }
.gallery-grid-mode .gallery-marquee { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; width:100%; padding:0 5%; }
.gallery-grid-mode .gallery-item { width:100%; height:220px; }

/* === ZONE === */
.zone { overflow:hidden; background:var(--c-bg-warm); }
.zone__content { text-align:center; margin-bottom:2.5rem; }
.zone-marquee { display:flex; gap:1rem; animation:zoneScroll 20s linear infinite; width:max-content; }
.zone-marquee:hover { animation-play-state:paused; }
@keyframes zoneScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.zone-chip { padding:.7rem 1.6rem; border-radius:50px; background:var(--c-surface); border:1px solid var(--c-border); font-size:.92rem; font-weight:500; white-space:nowrap; transition:all var(--transition); cursor:default; }
.zone-chip:hover { background:var(--c-accent); color:#fff; border-color:var(--c-accent); transform:scale(1.05); }
.zone-chip--accent { background:var(--c-accent); color:#fff; border-color:var(--c-accent); }

/* === AVIS === */
.avis { position:relative; overflow:hidden; }
.avis__header { text-align:center; margin-bottom:3rem; }
.avis__stars-big { font-size:2rem; color:var(--c-warm); letter-spacing:.15em; margin-top:.5rem; }
.avis__sub { color:var(--c-text-light); margin-top:.3rem; }
.avis-marquee-wrap { position:relative; }
.avis-marquee-wrap::before,.avis-marquee-wrap::after { content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none; }
.avis-marquee-wrap::before { left:0; background:linear-gradient(to right,var(--c-bg),transparent); }
.avis-marquee-wrap::after { right:0; background:linear-gradient(to left,var(--c-bg),transparent); }
.avis-marquee { display:flex; gap:1.5rem; animation:avisScroll 35s linear infinite; width:max-content; }
.avis-marquee:hover { animation-play-state:paused; }
@keyframes avisScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.avis-card { flex:0 0 380px; padding:2rem; background:var(--c-surface); border:1px solid var(--c-border-light); border-radius:var(--radius-lg); position:relative; overflow:hidden; transition:all var(--transition); }
.avis-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.08); border-color:var(--c-warm); }
.avis-card__deco { position:absolute; top:-10px; right:15px; font-family:var(--ff-display); font-size:6rem; color:var(--c-accent-glow); line-height:1; font-weight:700; pointer-events:none; }
.avis-card__stars { color:var(--c-warm); font-size:1rem; margin-bottom:.8rem; letter-spacing:.1em; }
.avis-card__text { color:var(--c-text-mid); font-size:.95rem; line-height:1.8; font-style:italic; margin-bottom:1.2rem; position:relative; z-index:1; }
.avis-card__author { display:flex; align-items:center; gap:.8rem; }
.avis-card__avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--c-accent-glow),var(--c-warm-light)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; color:var(--c-accent); }
.avis-card__name { font-weight:600; font-size:.9rem; }
.avis-card__loc { color:var(--c-text-light); font-size:.8rem; }

/* === FAQ === */
.faq { background:var(--c-bg-warm); }
.faq-layout { display:grid; grid-template-columns:.8fr 1fr; gap:4rem; align-items:start; }
.faq__side h2 { margin-bottom:1rem; }
.faq__side p { color:var(--c-text-light); line-height:1.8; margin-bottom:1.5rem; }
.faq-list { display:flex; flex-direction:column; gap:.6rem; }
.faq-item { border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden; background:var(--c-surface); transition:all var(--transition); }
.faq-item:hover { border-color:var(--c-accent); }
.faq-item.active { border-color:var(--c-accent); box-shadow:0 4px 20px rgba(192,57,43,.08); }
.faq-q { width:100%; padding:1.1rem 1.4rem; background:none; border:none; font-family:var(--ff-body); font-size:.95rem; font-weight:600; color:var(--c-text); cursor:pointer; display:flex; justify-content:space-between; align-items:center; text-align:left; gap:1rem; }
.faq-q__icon { width:28px; height:28px; border-radius:50%; background:var(--c-accent-glow); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.faq-item.active .faq-q__icon { background:var(--c-accent); transform:rotate(45deg); }
.faq-q__icon svg { width:14px; height:14px; color:var(--c-accent); transition:color var(--transition); }
.faq-item.active .faq-q__icon svg { color:#fff; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a__inner { padding:0 1.4rem 1.2rem; color:var(--c-text-light); font-size:.92rem; line-height:1.8; }

/* === CTA BUTTONS (reusable) === */
.cta-buttons { display:flex; gap:1rem; justify-content:center; margin-top:2rem; }
.cta-buttons .btn { min-width:260px; justify-content:center; text-align:center; }

/* === CTA BAND === */
.cta-band { background:var(--c-primary); position:relative; overflow:hidden; padding:5rem 0; text-align:center; }
.cta-band::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 50%,rgba(192,57,43,.15)0%,transparent 60%),radial-gradient(ellipse at 70% 50%,rgba(212,168,83,.1)0%,transparent 60%); }
.cta-band .container { position:relative; z-index:1; }
.cta-band h2 { color:var(--c-text-inv); margin-bottom:.8rem; }
.cta-band p { color:rgba(255,255,255,.6); font-size:1.05rem; margin-bottom:2rem; }

/* === CONTACT === */
.contact-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; align-items:start; }
.contact__info h2 { margin-bottom:1rem; }
.contact__info p { color:var(--c-text-light); line-height:1.8; margin-bottom:2rem; }
.contact__detail { display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1.2rem; }
.contact__detail-icon { width:44px; height:44px; border-radius:12px; background:var(--c-accent-glow); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.contact__detail-icon svg { width:20px; height:20px; color:var(--c-accent); }
.contact__detail-text strong { display:block; font-size:.9rem; margin-bottom:.1rem; }
.contact__detail-text span { color:var(--c-text-light); font-size:.88rem; }
.form-card { background:var(--c-surface); border:1px solid var(--c-border-light); border-radius:var(--radius-xl); padding:2.5rem; box-shadow:0 8px 40px rgba(0,0,0,.06); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; }
.form-group--full { grid-column:1/-1; }
.form-group label { font-size:.82rem; font-weight:600; margin-bottom:.4rem; color:var(--c-text); text-transform:uppercase; letter-spacing:.05em; }
.form-group input,.form-group textarea,.form-group select { padding:.85rem 1rem; border:1px solid var(--c-border); border-radius:var(--radius); font-family:var(--ff-body); font-size:.95rem; background:var(--c-bg); transition:all var(--transition); }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 4px var(--c-accent-glow); background:var(--c-surface); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-msg { padding:1rem 1.4rem; border-radius:var(--radius); margin-bottom:1rem; font-size:.92rem; }
.form-msg--success { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.form-msg--error { background:#ffebee; color:#c62828; border:1px solid #ef9a9a; }
.form-field-error { color:var(--c-accent); font-size:.8rem; margin-top:.25rem; }
.hp { position:absolute; left:-9999px; }

/* === FOOTER === */
.footer { background:var(--c-primary); color:rgba(255,255,255,.6); padding:5rem 0 0; position:relative; overflow:hidden; }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--c-accent),var(--c-warm),var(--c-accent)); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:3rem; }
.footer h4 { color:#fff; font-family:var(--ff-body); font-size:.82rem; font-weight:700; margin-bottom:1.2rem; text-transform:uppercase; letter-spacing:.12em; }
.footer__brand p { margin-top:1rem; font-size:.88rem; line-height:1.7; }
.footer__links a { display:block; font-size:.88rem; padding:.35rem 0; transition:all var(--transition); }
.footer__links a:hover { color:var(--c-warm); padding-left:.3rem; }
.footer__contact-item { display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; margin-bottom:.8rem; }
.footer__contact-item svg { flex-shrink:0; margin-top:3px; color:var(--c-warm); }
.footer__bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:3rem; padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; font-size:.8rem; }
.footer__legal { display:flex; gap:1.5rem; }
.footer__legal a:hover { color:var(--c-warm); }

/* === BREADCRUMB === */
.breadcrumb { padding:.8rem 0; font-size:.82rem; color:var(--c-text-light); }
.breadcrumb a { color:var(--c-accent); }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb span { margin:0 .4rem; }

/* === PAGE HERO (inner pages) === */
.page-hero { background:var(--c-primary); padding:4rem 0 3rem; text-align:center; }
.page-hero h1 { color:var(--c-text-inv); margin-bottom:.8rem; font-size:clamp(2rem,4vw,3rem); }
.page-hero p { color:rgba(255,255,255,.6); max-width:550px; margin:0 auto; }

/* === DEPANNAGE CARDS === */
.depannage-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-bottom:4rem; }
.depannage-card { background:var(--c-surface); border:1px solid var(--c-border-light); border-radius:var(--radius-lg); padding:2.5rem; text-align:center; }
.depannage-layout { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.depannage-box { background:var(--c-primary); border-radius:var(--radius-xl); padding:3rem; text-align:center; color:#fff; }

/* === SERVICE ROW (services page) === */
.service-row { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; margin-bottom:3rem; }
.service-row--reverse { direction:rtl; }
.service-row--reverse > * { direction:ltr; }
.service-row__img { border-radius:var(--radius-xl); overflow:hidden; height:300px; }
.service-row__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.service-row:hover .service-row__img img { transform:scale(1.05); }

/* ============================================
   RESPONSIVE — MOBILE OPTIMIZED
   ============================================ */
@media (max-width:1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .about-layout { grid-template-columns:1fr; }
  .about__img-col { margin:0; height:350px; }
  .about__content { padding:3rem 2rem; }
  .about__img-overlay { right:2rem; }
  .faq-layout { grid-template-columns:1fr; }
  .contact-layout { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .hero__floating { display:none; }
}

@media (max-width:768px) {
  .section { padding:3.5rem 0; }
  .header__nav,.header__phone { display:none; }
  .header__burger { display:block; }

  /* Services page mobile */
  .svc-block { grid-template-columns:1fr !important; direction:ltr !important; gap:1.5rem !important; margin-bottom:2.5rem !important; }
  .svc-block > div { direction:ltr !important; }

  /* Depannage mobile */
  .depannage-cards { grid-template-columns:1fr; gap:1rem; margin-bottom:2.5rem; }
  .depannage-card { padding:1.5rem; }
  .depannage-layout { grid-template-columns:1fr; gap:2rem; }
  .depannage-box { padding:2rem; }

  /* Hero mobile */
  .hero { min-height:auto; padding-bottom:0; }
  .hero__content { padding:6rem 0 2rem; }
  .hero h1 { font-size:clamp(1.8rem,7vw,2.6rem); }
  .hero__desc { font-size:1rem; margin-bottom:1.8rem; }
  .hero__actions { flex-direction:column; }
  .hero__actions .btn { justify-content:center; text-align:center; }
  .hero__stats-bar { grid-template-columns:repeat(2,1fr); }
  .hero__stat { padding:1rem .8rem; }
  .hero__stat-num { font-size:1.6rem; }
  .hero__stat-label { font-size:.68rem; }
  .hero__deco { display:none; }

  /* Services mobile */
  .services__header { grid-template-columns:1fr; gap:1rem; margin-bottom:2.5rem; }
  .services-grid { grid-template-columns:1fr; gap:1rem; }
  .service-card { padding:1.5rem; }
  .service-card__num { font-size:2rem; }

  /* About mobile */
  .about__img-col { height:280px; }
  .about__content { padding:2rem 1.2rem; }
  .about__content h2 { font-size:1.6rem; }
  .process-grid { grid-template-columns:1fr; gap:.8rem; }
  .process-card { padding:.8rem; }
  .about__img-overlay { bottom:1rem; right:1rem; padding:1rem 1.2rem; }
  .about__img-overlay strong { font-size:1.8rem; }

  /* Gallery mobile */
  .gallery-item { width:260px; height:195px; }
  .gallery-grid-mode .gallery-item { height:180px; }
  .gallery-grid-mode .gallery-marquee { grid-template-columns:1fr 1fr; padding:0; }

  /* Avis mobile */
  .avis-card { flex:0 0 300px; padding:1.5rem; }
  .avis-card__deco { font-size:4rem; }

  /* FAQ mobile */
  .faq__side { text-align:center; }
  .faq__side .section-label { justify-content:center; }
  .faq__side .btn { width:100%; justify-content:center; }

  /* Contact mobile */
  .form-card { padding:1.5rem; }
  .form-grid { grid-template-columns:1fr; }

  /* Footer mobile */
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer__bottom { flex-direction:column; gap:.8rem; text-align:center; }
  .footer__legal { flex-wrap:wrap; justify-content:center; }

  /* CTA buttons mobile - stack vertically */
  .cta-buttons { flex-direction:column; align-items:stretch; gap:1rem; padding:0 1rem; }
  .cta-buttons .btn { min-width:0; width:100%; }

  /* CTA band mobile */
  .cta-band { padding:3.5rem 0; }
  .cta-band h2 { font-size:1.6rem; }

  /* Zone mobile */
  .zone-chip { padding:.5rem 1.2rem; font-size:.82rem; }

  /* Page hero mobile */
  .page-hero { padding:3rem 0 2rem; }

  /* Urgence mobile */
  .urgence { font-size:.78rem; }
}

@media (max-width:400px) {
  .container { width:92%; }
  .hero__content { padding:5rem 0 1.5rem; }
  .hero h1 { font-size:1.7rem; }
  .hero__tag { font-size:.72rem; padding:.3rem .8rem .3rem .6rem; }
  .hero__stats-bar { grid-template-columns:1fr 1fr; }
  .btn { padding:.75rem 1.4rem; font-size:.88rem; }
  .service-card__icon { width:46px; height:46px; }
  h2 { font-size:1.5rem; }
  .form-card { padding:1.2rem; border-radius:var(--radius-lg); }
  /* Ensure tap targets are at least 44px */
  .faq-q { min-height:48px; }
  .footer__links a { padding:.5rem 0; }
}