/* ============================================================
   AFRICAN MANPOWER ENERGY — Styles globaux v2
   ============================================================ */
:root {
  --vert:       #1E6B3C;
  --vert-l:     #2A8B4F;
  --vert-xl:    #3aaf65;
  --vert-p:     #E8F5EE;
  --vert-dark:  #0d3a1e;
  --orange:     #8B4513;
  --orange-l:   #A0522D;
  --orange-p:   #FEF3E8;
  --accent:     #E8841F;
  --noir:       #0B1A0F;
  --blanc:      #FFFFFF;
  --gris:       #F5F5F5;
  --gris2:      #E8E8E8;
  --txt:        #1A1A18;
  --txt2:       #555550;
  --txt3:       #888880;
  --bord:       rgba(0,0,0,0.09);
  --shadow-sm:  0 2px 10px rgba(0,0,0,0.06);
  --shadow-md:  0 8px 30px rgba(0,0,0,0.1);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.14);
  --r:          12px;
  --r-lg:       20px;
  --tr:         all 0.25s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans','Segoe UI',system-ui,sans-serif;
  background:var(--blanc); color:var(--txt);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; }
img { max-width:100%; display:block; }

/* ── Container ───────────────────────────────────────────── */
.container { width:100%; max-width:1240px; margin:0 auto; padding:0 20px; }
@media(min-width:1024px) { .container { padding:0 48px; } }

/* ══════════════════════════════════════════════════════════
   TOPBAR (barre info supérieure)
══════════════════════════════════════════════════════════ */
.topbar {
  background:var(--vert-dark);
  padding:7px 0;
  font-size:12px; color:rgba(255,255,255,0.75);
}
.topbar-inner {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar-left { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.topbar-left span { display:flex; align-items:center; gap:5px; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-right a {
  color:rgba(255,255,255,0.65); font-size:12px; transition:color .2s;
  display:flex; align-items:center; gap:4px;
}
.topbar-right a:hover { color:#fff; }
.tb-sep { opacity:0.3; }
@media(max-width:640px) { .topbar-left { display:none; } }

/* ══════════════════════════════════════════════════════════
   NAVBAR PRINCIPALE
══════════════════════════════════════════════════════════ */
#navbar {
  background:#fff;
  border-bottom:2px solid var(--gris2);
  position:sticky; top:0; z-index:500;
  transition:box-shadow .3s;
}
#navbar.scrolled { box-shadow:var(--shadow-md); }

.nav-inner {
  height:80px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* Logo — propre, lisible, professionnel */
.nav-logo { display:flex; align-items:center; flex-shrink:0; }
.nav-logo img {
  height:56px; width:auto;
  max-width:220px;
  object-fit:contain;
  display:block;
}
@media(max-width:960px) {
  .nav-inner { height:72px; }
  .nav-logo img { height:48px; max-width:180px; }
}
@media(max-width:640px) {
  .nav-inner { height:64px; }
  .nav-logo img { height:40px; max-width:150px; }
}

/* Liens nav */
.nav-links {
  display:none; align-items:center; gap:4px;
}
@media(min-width:960px) { .nav-links { display:flex; } }
.nav-links a {
  font-size:14px; font-weight:500; color:var(--txt2);
  padding:8px 14px; border-radius:8px; transition:var(--tr);
  white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active { color:var(--vert); background:var(--vert-p); }
.nav-links .nav-shop {
  background:var(--vert); color:#fff; border-radius:8px; font-weight:600;
}
.nav-links .nav-shop:hover { background:var(--vert-l); }

/* Actions nav (panier, compte, devis) */
.nav-actions { display:flex; align-items:center; gap:8px; }

.nav-btn-icon {
  position:relative; width:42px; height:42px;
  border-radius:10px; border:1.5px solid var(--bord);
  background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:17px; color:var(--txt2); transition:var(--tr);
  -webkit-tap-highlight-color:transparent;
}
.nav-btn-icon:hover { border-color:var(--vert); color:var(--vert); background:var(--vert-p); }
.nav-btn-icon .badge {
  position:absolute; top:-5px; right:-5px;
  width:18px; height:18px; border-radius:50%;
  background:var(--vert); color:#fff;
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}

.nav-auth-btn {
  display:none; align-items:center; gap:6px;
  padding:9px 18px; border-radius:100px;
  font-size:13px; font-weight:600;
  background:var(--vert); color:#fff; border:none;
  transition:var(--tr); white-space:nowrap;
}
@media(min-width:640px) { .nav-auth-btn { display:flex; } }
.nav-auth-btn:hover { background:var(--vert-l); transform:translateY(-1px); }

/* Burger */
.burger {
  display:flex; flex-direction:column; gap:5px;
  width:42px; height:42px; border:1.5px solid var(--bord);
  background:#fff; border-radius:10px; padding:10px;
  -webkit-tap-highlight-color:transparent;
}
@media(min-width:960px) { .burger { display:none; } }
.burger span { display:block; height:2px; background:var(--txt); border-radius:2px; transition:var(--tr); }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Menu mobile */
#mob-menu {
  position:fixed; inset:0; top:64px; z-index:490;
  background:#fff; padding:20px;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
@media(min-width:960px) { #mob-menu { display:none !important; } }
#mob-menu.open { transform:translateX(0); }
#mob-menu a {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; border-bottom:1px solid var(--bord);
  font-size:17px; font-weight:600; color:var(--txt);
}
#mob-menu .mob-shop {
  background:var(--vert); color:#fff; border-radius:12px;
  padding:16px; text-align:center; margin-top:16px;
  justify-content:center; border-bottom:none;
}

/* ══════════════════════════════════════════════════════════
   HERO SLIDER — Design premium 2 colonnes SANS photo de fond
══════════════════════════════════════════════════════════ */
#hero-slider {
  position:relative; overflow:hidden;
}
.slider-track {
  display:flex; transition:transform .75s cubic-bezier(.77,0,.18,1);
}

/* === Chaque slide === */
.slide {
  min-width:100%; position:relative;
  min-height:480px; display:flex; align-items:stretch;
  overflow:hidden;
}
@media(min-width:768px) { .slide { min-height:520px; } }
@media(min-width:1024px) { .slide { min-height:560px; } }

/* Fond couleur pur (pas de photo de fond) */
.slide-bg {
  position:absolute; inset:0;
  /* couleur solide définie inline par data-color ou gradient */
}
/* Suppression de l'overlay qui assombrissait les photos */
.slide-overlay { display:none !important; }

/* Décoration géométrique en fond */
.slide-deco {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.slide-deco::before {
  content:'';
  position:absolute; right:-120px; top:-120px;
  width:600px; height:600px; border-radius:50%;
  background:rgba(255,255,255,0.04);
}
.slide-deco::after {
  content:'';
  position:absolute; right:60px; bottom:-80px;
  width:360px; height:360px; border-radius:50%;
  background:rgba(255,255,255,0.035);
}

/* === Layout 2 colonnes === */
.slide-inner {
  position:relative; z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-items:center;
  padding:40px 0 36px;
}
@media(min-width:900px) {
  .slide-inner {
    grid-template-columns:54% 46%;
    padding:48px 0;
    gap:0;
  }
}

/* === Colonne texte === */
.slide-content { padding-right:0; position:relative; z-index:5; }
@media(min-width:900px) { .slide-content { padding-right:40px; } }

/* Tag badge */
.slide-tag {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25);
  padding:5px 14px; border-radius:100px; margin-bottom:16px;
  backdrop-filter:blur(4px);
}
.slide-tag .dot {
  width:8px; height:8px; border-radius:50%;
  background:#4ADE80; animation:pulse 2s infinite;
  flex-shrink:0;
}
.slide-tag span { font-size:12px; color:#fff; font-weight:600; letter-spacing:.3px; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }

/* Titre */
.slide h1 {
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(28px,3.2vw,46px);
  color:#fff; font-weight:900; line-height:1.2; margin-bottom:14px;
  text-shadow:0 2px 16px rgba(0,0,0,0.3);
  word-break:normal; overflow-wrap:normal;
  hyphens:none;
}
.slide h1 em { color:#FCD34D; font-style:normal; }

/* Texte description */
.slide p {
  font-size:clamp(13px,1.3vw,15px); color:rgba(255,255,255,0.85);
  line-height:1.65; margin-bottom:22px;
  text-shadow:0 1px 6px rgba(0,0,0,0.15);
  max-width:480px;
}

/* Boutons slide */
.slide-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }

/* Badge prix (colonne texte) */
.slide-price-badge {
  display:inline-flex; flex-direction:column;
  background:rgba(0,0,0,0.25);
  border:1.5px solid rgba(255,255,255,0.22);
  border-radius:16px; padding:14px 24px;
  gap:3px; backdrop-filter:blur(8px);
  max-width:fit-content;
}
.slide-price-badge .spb-label {
  font-size:10px; color:rgba(255,255,255,0.65);
  font-weight:700; text-transform:uppercase; letter-spacing:1.2px;
}
.slide-price-badge .spb-price {
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(22px,3vw,30px); color:#fff; font-weight:700; line-height:1.15;
}

/* === Colonne image côté droit === */
.slide-img-col {
  display:none;
  align-items:center; justify-content:flex-end;
  position:relative;
  padding-left:12px;
}
@media(min-width:900px) { .slide-img-col { display:flex; } }

/* Carte produit illustrative (sans photo de fond dans le slide) */
.slide-product-card {
  position:relative;
  background:rgba(255,255,255,0.10);
  border:1.5px solid rgba(255,255,255,0.20);
  border-radius:28px;
  padding:36px 32px;
  backdrop-filter:blur(16px);
  width:100%; max-width:400px;
  animation:slideCardIn .9s cubic-bezier(.22,1,.36,1) both;
  box-shadow:0 32px 80px rgba(0,0,0,0.28);
}
@keyframes slideCardIn {
  from { opacity:0; transform:translateY(30px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.spc-icon {
  width:88px; height:88px; border-radius:22px;
  background:rgba(255,255,255,0.12);
  border:1.5px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  font-size:44px; margin:0 auto 20px;
  animation:imgFloat 4s ease-in-out infinite;
}
@keyframes imgFloat {
  0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) }
}

/* Si une vraie photo produit est fournie */
.slide-product-card img.spc-photo {
  width:100%; max-height:220px;
  object-fit:contain;
  filter:drop-shadow(0 16px 40px rgba(0,0,0,0.45));
  animation:imgFloat 4s ease-in-out infinite;
  margin-bottom:18px; display:block;
}

.spc-brand {
  font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,0.55); margin-bottom:6px;
}
.spc-name {
  font-family:'Playfair Display',serif;
  font-size:20px; color:#fff; font-weight:700; margin-bottom:4px;
}
.spc-spec { font-size:12px; color:rgba(255,255,255,0.55); margin-bottom:16px; }

.spc-price-row {
  display:flex; align-items:baseline; gap:8px;
  border-top:1px solid rgba(255,255,255,0.12); padding-top:16px; margin-bottom:16px;
}
.spc-price {
  font-family:'Playfair Display',serif;
  font-size:28px; color:#FCD34D; font-weight:700;
}
.spc-currency { font-size:13px; color:rgba(255,255,255,0.55); font-weight:500; }

.spc-badges {
  display:flex; flex-wrap:wrap; gap:6px;
}
.spc-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:100px; font-size:11px; font-weight:600;
  background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.75);
  border:1px solid rgba(255,255,255,0.15);
}
.spc-badge.green { background:rgba(74,222,128,0.15); color:#4ADE80; border-color:rgba(74,222,128,0.3); }
.spc-badge.yellow { background:rgba(252,211,77,0.15); color:#FCD34D; border-color:rgba(252,211,77,0.3); }
.spc-badge.red { background:rgba(248,113,113,0.15); color:#F87171; border-color:rgba(248,113,113,0.3); }

/* Placeholder quand pas d'image/card */
.slide-no-img {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:360px;
  animation:imgFloat 4s ease-in-out infinite;
}

/* === Contrôles slider === */
.slider-btn {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,0.15); backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,0.25); color:#fff; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:var(--tr); -webkit-tap-highlight-color:transparent;
}
.slider-btn:hover { background:rgba(255,255,255,0.32); transform:translateY(-50%) scale(1.07); }
.slider-prev { left:16px; }
.slider-next { right:16px; }
@media(min-width:900px) { .slider-prev { left:28px; } .slider-next { right:28px; } }

.slider-dots {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:10;
}
.slider-dot {
  width:8px; height:8px; border-radius:100px;
  background:rgba(255,255,255,0.35); border:none;
  transition:var(--tr); -webkit-tap-highlight-color:transparent; cursor:pointer;
}
.slider-dot.active { width:30px; background:#fff; }

/* ══════════════════════════════════════════════════════════
   SECTION PARTENAIRES
══════════════════════════════════════════════════════════ */
.partners-bar {
  background:var(--gris); border-bottom:1px solid var(--gris2);
  padding:16px 0;
}
.pb-inner {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px;
}
.pb-label { font-size:10px; font-weight:700; color:var(--txt3); text-transform:uppercase; letter-spacing:1.5px; margin-right:6px; }
.pb-badge {
  display:flex; align-items:center; gap:7px;
  background:#fff; border:1.5px solid var(--bord);
  padding:7px 14px; border-radius:10px;
  transition:var(--tr);
}
.pb-badge:hover { border-color:var(--vert); }
.pb-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pb-name { font-size:12px; font-weight:700; }
.pb-sub { font-size:10px; color:var(--txt3); }

/* ══════════════════════════════════════════════════════════
   TITRES DE SECTION
══════════════════════════════════════════════════════════ */
.sec-head { text-align:center; margin-bottom:40px; }
.sec-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; border-radius:100px;
  font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  background:var(--vert-p); color:var(--vert); margin-bottom:12px;
}
.sec-tag.or { background:var(--orange-p); color:var(--orange); }
.sec-title {
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(24px,4vw,40px); font-weight:700; line-height:1.18;
  color:var(--txt); margin-bottom:10px;
}
.sec-title span { color:var(--vert); }
.sec-title em { color:var(--accent); font-style:normal; }
.sec-sub { font-size:clamp(14px,1.8vw,16px); color:var(--txt2); line-height:1.7; max-width:540px; margin:0 auto; }

/* ══════════════════════════════════════════════════════════
   FILTRES
══════════════════════════════════════════════════════════ */
.filters {
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:24px;
}
@media(min-width:768px) { .filters { justify-content:center; flex-wrap:wrap; overflow:visible; } }
.filters::-webkit-scrollbar { display:none; }
.f-btn {
  flex-shrink:0; white-space:nowrap; padding:9px 18px;
  border-radius:100px; border:1.5px solid var(--bord);
  font-size:13px; font-weight:500; background:#fff; color:var(--txt2);
  transition:var(--tr); -webkit-tap-highlight-color:transparent;
}
.f-btn.active, .f-btn:hover { background:var(--vert); color:#fff; border-color:var(--vert); }

/* ══════════════════════════════════════════════════════════
   GRILLE PRODUITS
══════════════════════════════════════════════════════════ */
.products-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
@media(min-width:560px) { .products-grid { gap:18px; } }
@media(min-width:768px) { .products-grid { grid-template-columns:repeat(3,1fr); gap:22px; } }
@media(min-width:1100px) { .products-grid { grid-template-columns:repeat(4,1fr); } }

.prod-card {
  background:#fff; border-radius:var(--r); border:1.5px solid var(--bord);
  overflow:hidden; display:flex; flex-direction:column;
  transition:var(--tr); position:relative;
}
.prod-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.prod-card.hidden { display:none; }

.pc-img {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:clamp(38px,9vw,64px); position:relative; overflow:hidden;
}
.pc-img img { width:100%; height:100%; object-fit:cover; }
.pc-badge {
  position:absolute; top:10px; left:10px;
  font-size:9px; font-weight:700; padding:4px 10px; border-radius:100px;
}
.b-new { background:#DCFCE7; color:#16A34A; }
.b-pop { background:#FEF3C7; color:#D97706; }
.b-top { background:#FEE2E2; color:#DC2626; }
.pc-wishlist {
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(4px);
  border:none; font-size:13px; display:flex; align-items:center; justify-content:center;
  color:var(--txt3); transition:var(--tr); -webkit-tap-highlight-color:transparent;
}
.pc-wishlist:hover { color:#EF4444; background:#fff; }

.pc-body { padding:14px; flex:1; display:flex; flex-direction:column; }
.pc-brand { font-size:9px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.pc-name { font-size:13px; font-weight:600; line-height:1.4; flex:1; margin-bottom:6px; }
@media(min-width:480px) { .pc-name { font-size:14px; } }
.pc-specs { font-size:11px; color:var(--txt2); line-height:1.5; margin-bottom:10px; display:none; }
@media(min-width:600px) { .pc-specs { display:block; } }
.pc-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto; }
.pc-price { font-family:'Playfair Display',Georgia,serif; font-size:clamp(13px,2.5vw,17px); font-weight:700; color:var(--vert); line-height:1.1; }
.pc-price small { font-size:9px; font-family:'DM Sans',sans-serif; font-weight:400; color:var(--txt3); display:block; }
.pc-price .old-price { font-size:11px; font-family:'DM Sans',sans-serif; color:var(--txt3); text-decoration:line-through; font-weight:400; }

.btn-cart {
  background:var(--vert); color:#fff; border:none;
  padding:8px 12px; border-radius:100px;
  font-size:10px; font-weight:700; flex-shrink:0;
  transition:var(--tr); -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; gap:4px;
}
@media(min-width:480px) { .btn-cart { padding:9px 16px; font-size:11px; } }
.btn-cart:hover { background:var(--vert-l); transform:scale(1.04); }

/* ══════════════════════════════════════════════════════════
   SECTION ÉCLAIRAGE
══════════════════════════════════════════════════════════ */
#lighting { background:var(--gris); padding:72px 0; }
.lights-grid {
  display:grid; grid-template-columns:1fr; gap:14px; margin-top:40px;
}
@media(min-width:520px) { .lights-grid { grid-template-columns:repeat(2,1fr); gap:18px; } }
@media(min-width:960px) { .lights-grid { grid-template-columns:repeat(3,1fr); } }
.light-card {
  background:#fff; border-radius:var(--r); padding:22px;
  border:1.5px solid var(--bord); transition:var(--tr);
  display:flex; flex-direction:column;
}
.light-card:hover { box-shadow:var(--shadow-md); border-color:var(--accent); transform:translateY(-3px); }
.lc-ico { font-size:32px; margin-bottom:12px; }
.lc-name { font-size:15px; font-weight:700; margin-bottom:6px; }
.lc-spec { font-size:12px; color:var(--txt2); line-height:1.6; margin-bottom:12px; flex:1; }
.lc-watt { display:inline-flex; background:var(--orange-p); color:var(--orange); font-size:10px; font-weight:700; padding:4px 12px; border-radius:100px; margin-bottom:14px; width:fit-content; }
.lc-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lc-price { font-size:17px; font-weight:700; color:var(--vert); }

/* ══════════════════════════════════════════════════════════
   POURQUOI NOUS
══════════════════════════════════════════════════════════ */
#why { padding:72px 0; }
.why-grid { display:grid; grid-template-columns:1fr; gap:14px; margin-top:40px; }
@media(min-width:560px) { .why-grid { grid-template-columns:repeat(2,1fr); gap:18px; } }
@media(min-width:1024px) { .why-grid { grid-template-columns:repeat(4,1fr); } }
.why-card { padding:26px; border-radius:var(--r); border:1.5px solid var(--bord); transition:var(--tr); }
.why-card:hover { border-color:var(--vert); box-shadow:var(--shadow-sm); }
.why-num { font-family:'Playfair Display',serif; font-size:48px; font-weight:900; color:var(--vert-p); line-height:1; margin-bottom:12px; }
.why-title { font-size:15px; font-weight:700; margin-bottom:8px; }
.why-txt { font-size:13px; color:var(--txt2); line-height:1.7; }

/* ══════════════════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════════════════ */
#contact {
  background:linear-gradient(150deg, #040f07, #061f10 40%, #1e6b3c 100%);
  padding:80px 0;
}
.contact-grid { display:grid; grid-template-columns:1fr; gap:48px; }
@media(min-width:960px) { .contact-grid { grid-template-columns:1fr 1fr; gap:72px; align-items:start; } }
.contact-info h2 { font-family:'Playfair Display',serif; font-size:clamp(26px,4vw,40px); font-weight:700; color:#fff; margin-bottom:16px; }
.contact-info > p { font-size:15px; color:rgba(255,255,255,0.65); line-height:1.75; margin-bottom:32px; }
.c-items { display:flex; flex-direction:column; gap:14px; }
.c-item { display:flex; align-items:center; gap:14px; }
.c-ico { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.c-lbl { font-size:10px; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:.8px; }
.c-val { font-size:14px; font-weight:500; color:#fff; word-break:break-all; }
.contact-form { background:rgba(255,255,255,0.07); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.12); border-radius:var(--r-lg); padding:32px; }
.contact-form h3 { font-size:18px; font-weight:700; color:#fff; margin-bottom:22px; }
.fg { margin-bottom:16px; }
.fg label { font-size:11px; color:rgba(255,255,255,0.55); display:block; margin-bottom:6px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.fg input,.fg select,.fg textarea { width:100%; padding:12px 14px; background:rgba(255,255,255,0.08); border:1.5px solid rgba(255,255,255,0.15); border-radius:10px; color:#fff; font-size:14px; font-family:inherit; transition:border-color .2s; }
.fg input::placeholder,.fg textarea::placeholder { color:rgba(255,255,255,0.28); }
.fg select option { background:#0d3a1e; color:#fff; }
.fg input:focus,.fg select:focus,.fg textarea:focus { outline:none; border-color:rgba(255,255,255,0.42); }
.fg textarea { height:90px; resize:vertical; }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:420px) { .fg-row { grid-template-columns:1fr; } }
.btn-submit { width:100%; background:var(--accent); color:#fff; border:none; padding:15px; border-radius:100px; font-size:15px; font-weight:700; transition:var(--tr); font-family:inherit; }
.btn-submit:hover { background:var(--orange-l); transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,132,31,0.4); }
.form-ok { display:none; background:rgba(74,222,128,0.15); border:1px solid rgba(74,222,128,0.3); border-radius:10px; padding:14px 18px; color:#4ADE80; font-size:14px; font-weight:600; text-align:center; margin-top:14px; }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
footer { background:#060d08; color:rgba(255,255,255,0.45); padding:56px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:44px; }
@media(min-width:768px) { .footer-grid { grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; } }
.footer-logo { margin-bottom:14px; }
.footer-logo img { height:52px; filter:brightness(0) invert(1); opacity:0.85; }
.footer-brand p { font-size:13px; line-height:1.75; max-width:260px; }
.footer-col h4 { font-size:11px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; }
.footer-col a { display:block; font-size:13px; color:rgba(255,255,255,0.4); margin-bottom:9px; transition:color .2s; }
.footer-col a:hover { color:#fff; }
.footer-bot { border-top:1px solid rgba(255,255,255,0.07); padding-top:18px; display:flex; flex-direction:column; gap:14px; }
@media(min-width:640px) { .footer-bot { flex-direction:row; justify-content:space-between; align-items:center; } }
.footer-bot p { font-size:12px; }
.socials { display:flex; gap:8px; }
.socials a { width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; font-size:13px; color:rgba(255,255,255,0.5); transition:var(--tr); }
.socials a:hover { background:var(--vert); color:#fff; }

/* ══════════════════════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════════════════════ */
.newsletter-section {
  background: linear-gradient(135deg, var(--vert-dark) 0%, var(--vert) 100%);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.newsletter-section::before {
  content:'';
  position:absolute;
  width:500px; height:500px;
  background:rgba(255,255,255,0.04);
  border-radius:50%;
  top:-200px; right:-100px;
  pointer-events:none;
}
.newsletter-section::after {
  content:'';
  position:absolute;
  width:300px; height:300px;
  background:rgba(255,255,255,0.03);
  border-radius:50%;
  bottom:-120px; left:-80px;
  pointer-events:none;
}
.nl-inner {
  display:flex;
  align-items:center;
  gap:48px;
  position:relative;
  z-index:1;
}
.nl-text { flex:1; }
.nl-tag {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(255,255,255,0.12);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 14px;
  border-radius:50px;
  margin-bottom:16px;
}
.nl-title {
  font-size:clamp(22px,3.5vw,32px);
  font-weight:700;
  color:#fff;
  line-height:1.25;
  margin-bottom:12px;
}
.nl-title span { color:#4ADE80; }
.nl-sub {
  font-size:15px;
  color:rgba(255,255,255,0.75);
  line-height:1.6;
  max-width:440px;
}
.nl-form { flex:1; max-width:460px; }
.nl-input-wrap {
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.1);
  border:1.5px solid rgba(255,255,255,0.2);
  border-radius:50px;
  overflow:hidden;
  transition:.25s;
  backdrop-filter:blur(8px);
}
.nl-input-wrap:focus-within {
  border-color:rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.15);
  box-shadow:0 0 0 4px rgba(255,255,255,0.08);
}
.nl-ico {
  color:rgba(255,255,255,0.55);
  font-size:14px;
  padding:0 0 0 18px;
  flex-shrink:0;
}
.nl-input-wrap input {
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  padding:14px 14px;
  font-size:14px;
  color:#fff;
}
.nl-input-wrap input::placeholder { color:rgba(255,255,255,0.5); }
.nl-input-wrap button {
  background: linear-gradient(135deg,#FF6B00,#E8841F);
  border:none;
  padding:13px 24px;
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:.25s;
  border-radius:0 50px 50px 0;
  white-space:nowrap;
  flex-shrink:0;
}
.nl-input-wrap button:hover { background:linear-gradient(135deg,#E8841F,#FF6B00); transform:none; }
.nl-hint {
  font-size:12px;
  color:rgba(255,255,255,0.5);
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:6px;
}
.nl-success {
  color:#4ADE80;
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
}
@media(max-width:860px) {
  .nl-inner { flex-direction:column; gap:32px; text-align:center; }
  .nl-form { max-width:100%; width:100%; }
  .nl-sub { max-width:100%; }
  .nl-hint { justify-content:center; }
}
@media(max-width:480px) {
  .nl-input-wrap { flex-direction:column; border-radius:16px; padding:6px; gap:6px; }
  .nl-ico { display:none; }
  .nl-input-wrap input { width:100%; padding:12px 14px; text-align:center; }
  .nl-input-wrap button { width:100%; justify-content:center; border-radius:12px; }
}

/* ══════════════════════════════════════════════════════════
   WHATSAPP FLOTTANT
══════════════════════════════════════════════════════════ */
.wa-float {
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.wa-btn {
  width:58px;
  height:58px;
  border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:#fff;
  box-shadow:0 6px 24px rgba(37,211,102,0.45);
  cursor:pointer;
  text-decoration:none;
  transition:.3s;
  animation: waPulse 2.5s infinite;
}
.wa-btn:hover {
  transform:scale(1.1);
  box-shadow:0 10px 32px rgba(37,211,102,0.6);
}
@keyframes waPulse {
  0%,100% { box-shadow:0 6px 24px rgba(37,211,102,0.45); }
  50% { box-shadow:0 6px 32px rgba(37,211,102,0.75), 0 0 0 10px rgba(37,211,102,0.08); }
}
.wa-bubble {
  background:#fff;
  color:#111;
  font-size:13px;
  font-weight:500;
  padding:10px 16px;
  border-radius:14px 14px 0 14px;
  box-shadow:0 4px 18px rgba(0,0,0,0.14);
  max-width:220px;
  line-height:1.5;
  display:none;
  animation:fadeInUp .3s ease;
}
.wa-bubble strong { display:block; color:var(--vert); font-size:13px; margin-bottom:3px; }
.wa-float:hover .wa-bubble { display:block; }
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
@media(max-width:480px) {
  .wa-float { bottom:18px; right:16px; }
  .wa-btn { width:52px; height:52px; font-size:24px; }
}

/* ══════════════════════════════════════════════════════════
   MODAL PANIER
══════════════════════════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:800;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
  align-items:flex-start; justify-content:flex-end;
}
.modal-overlay.open { display:flex; }
.cart-panel {
  background:#fff; width:100%; max-width:420px;
  height:100vh; display:flex; flex-direction:column;
  animation:slideIn .3s ease;
}
@keyframes slideIn { from{transform:translateX(100%)} to{transform:translateX(0)} }
.cart-header { padding:20px 24px; border-bottom:1px solid var(--bord); display:flex; align-items:center; justify-content:space-between; }
.cart-header h3 { font-size:17px; font-weight:700; }
.cart-close { width:34px; height:34px; border-radius:8px; background:var(--gris); border:none; font-size:16px; display:flex; align-items:center; justify-content:center; color:var(--txt2); transition:var(--tr); }
.cart-close:hover { background:var(--gris2); }
.cart-body { flex:1; overflow-y:auto; padding:20px 24px; }
.cart-empty { text-align:center; padding:60px 20px; }
.cart-empty .ce-ico { font-size:56px; margin-bottom:14px; }
.cart-empty h4 { font-size:16px; font-weight:700; margin-bottom:6px; }
.cart-empty p { font-size:13px; color:var(--txt2); }
.cart-item { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--bord); align-items:center; }
.ci-img { width:56px; height:56px; border-radius:10px; background:var(--gris); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.ci-info { flex:1; min-width:0; }
.ci-name { font-size:13px; font-weight:600; line-height:1.3; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-price { font-size:13px; color:var(--vert); font-weight:700; }
.ci-qty { display:flex; align-items:center; gap:6px; margin-top:6px; }
.qty-btn { width:24px; height:24px; border-radius:6px; border:1.5px solid var(--bord); background:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; transition:var(--tr); }
.qty-btn:hover { border-color:var(--vert); color:var(--vert); }
.qty-val { font-size:13px; font-weight:600; min-width:20px; text-align:center; }
.ci-del { background:none; border:none; color:var(--txt3); font-size:14px; margin-left:auto; transition:color .2s; }
.ci-del:hover { color:#EF4444; }
.cart-footer { padding:20px 24px; border-top:1px solid var(--bord); }
.cart-total-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.ct-label { font-size:14px; color:var(--txt2); }
.ct-val { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--vert); }
.btn-checkout { width:100%; background:var(--vert); color:#fff; border:none; padding:15px; border-radius:100px; font-size:15px; font-weight:700; transition:var(--tr); font-family:inherit; margin-bottom:10px; }
.btn-checkout:hover { background:var(--vert-l); transform:translateY(-1px); box-shadow:0 8px 24px rgba(30,107,60,0.3); }
.btn-devis { width:100%; background:var(--gris); color:var(--txt); border:none; padding:13px; border-radius:100px; font-size:14px; font-weight:600; transition:var(--tr); font-family:inherit; }
.btn-devis:hover { background:var(--gris2); }

/* ══════════════════════════════════════════════════════════
   MODAL AUTH (connexion/inscription)
══════════════════════════════════════════════════════════ */
#auth-modal .modal-overlay { justify-content:center; align-items:center; }
.auth-box {
  background:#fff; border-radius:var(--r-lg);
  width:100%; max-width:460px; padding:36px 32px;
  animation:fadeUp .3s ease;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.auth-logo { text-align:center; margin-bottom:24px; }
.auth-logo img { height:48px; margin:0 auto 10px; }
.auth-logo h3 { font-size:18px; font-weight:700; }
.auth-logo p { font-size:13px; color:var(--txt2); margin-top:4px; }
.auth-tabs { display:flex; background:var(--gris); border-radius:100px; padding:4px; margin-bottom:24px; }
.auth-tab { flex:1; padding:9px; text-align:center; border-radius:100px; font-size:13px; font-weight:600; color:var(--txt2); border:none; background:none; transition:var(--tr); }
.auth-tab.active { background:#fff; color:var(--vert); box-shadow:var(--shadow-sm); }
.auth-field { margin-bottom:14px; }
.auth-field label { font-size:11px; font-weight:700; color:var(--txt2); text-transform:uppercase; letter-spacing:.5px; display:block; margin-bottom:5px; }
.auth-field input { width:100%; padding:11px 14px; background:var(--gris); border:1.5px solid var(--bord); border-radius:10px; font-size:14px; font-family:inherit; transition:border-color .2s; }
.auth-field input:focus { outline:none; border-color:var(--vert); background:#fff; }
.btn-auth { width:100%; background:var(--vert); color:#fff; border:none; padding:14px; border-radius:100px; font-size:15px; font-weight:700; transition:var(--tr); font-family:inherit; margin-top:4px; }
.btn-auth:hover { background:var(--vert-l); }
.auth-sep { text-align:center; font-size:12px; color:var(--txt3); margin:16px 0; }
.auth-close-btn { position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; background:var(--gris); border:none; font-size:16px; display:flex; align-items:center; justify-content:center; color:var(--txt2); }

/* ══════════════════════════════════════════════════════════
   MODAL CHECKOUT CINETPAY
══════════════════════════════════════════════════════════ */
.checkout-box {
  background:#fff; border-radius:var(--r-lg);
  width:100%; max-width:520px; max-height:92vh;
  display:flex; flex-direction:column;
  animation:fadeUp .3s ease;
}
.checkout-header { padding:20px 24px; border-bottom:1px solid var(--bord); display:flex; align-items:center; justify-content:space-between; }
.checkout-header h3 { font-size:17px; font-weight:700; }
.checkout-body { padding:24px; overflow-y:auto; flex:1; }
.checkout-steps { display:flex; gap:0; margin-bottom:28px; }
.cs-step { flex:1; text-align:center; position:relative; }
.cs-step::after { content:''; position:absolute; top:14px; right:-50%; width:100%; height:2px; background:var(--gris2); z-index:0; }
.cs-step:last-child::after { display:none; }
.cs-num { width:28px; height:28px; border-radius:50%; border:2px solid var(--gris2); background:#fff; font-size:12px; font-weight:700; color:var(--txt3); display:inline-flex; align-items:center; justify-content:center; position:relative; z-index:1; transition:var(--tr); }
.cs-label { font-size:10px; color:var(--txt3); margin-top:4px; font-weight:500; }
.cs-step.active .cs-num { border-color:var(--vert); background:var(--vert); color:#fff; }
.cs-step.done .cs-num { border-color:var(--vert); background:var(--vert-p); color:var(--vert); }
.checkout-step-panel { display:none; }
.checkout-step-panel.active { display:block; }
.order-summary { background:var(--gris); border-radius:var(--r); padding:16px; margin-bottom:20px; }
.os-item { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:6px 0; border-bottom:1px solid var(--gris2); }
.os-item:last-child { border-bottom:none; font-weight:700; color:var(--vert); font-size:15px; }
.payment-methods { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.pm-option { border:2px solid var(--bord); border-radius:12px; padding:14px; text-align:center; cursor:pointer; transition:var(--tr); }
.pm-option:hover, .pm-option.selected { border-color:var(--vert); background:var(--vert-p); }
.pm-option .pm-icon { font-size:24px; margin-bottom:6px; }
.pm-option .pm-name { font-size:12px; font-weight:600; }
.pm-option .pm-sub { font-size:10px; color:var(--txt3); margin-top:2px; }
.cinetpay-badge { background:linear-gradient(135deg,#FF6B00,#FF8C00); color:#fff; border-radius:8px; padding:10px 16px; display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.cinetpay-badge .cb-logo { font-size:22px; }
.cinetpay-badge .cb-text .cb-name { font-size:13px; font-weight:700; }
.cinetpay-badge .cb-text .cb-sub { font-size:11px; opacity:.8; }
.checkout-footer { padding:16px 24px; border-top:1px solid var(--bord); display:flex; gap:10px; }
.btn-back-step { flex:1; background:var(--gris); color:var(--txt); border:none; padding:13px; border-radius:100px; font-size:14px; font-weight:600; font-family:inherit; transition:var(--tr); }
.btn-back-step:hover { background:var(--gris2); }
.btn-next-step { flex:2; background:var(--vert); color:#fff; border:none; padding:13px; border-radius:100px; font-size:14px; font-weight:700; font-family:inherit; transition:var(--tr); }
.btn-next-step:hover { background:var(--vert-l); }

/* ══════════════════════════════════════════════════════════
   TOAST & DIVERS
══════════════════════════════════════════════════════════ */
#toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--vert); color:#fff; padding:12px 24px; border-radius:100px;
  font-size:13px; font-weight:600; opacity:0; pointer-events:none;
  z-index:999; transition:all .28s; white-space:nowrap;
  box-shadow:0 8px 24px rgba(30,107,60,0.35);
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.error { background:#DC2626; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 26px; border-radius:100px; font-size:14px; font-weight:600; border:none; transition:var(--tr); white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.btn-primary { background:var(--vert); color:#fff; }
.btn-primary:hover { background:var(--vert-l); transform:translateY(-1px); box-shadow:0 8px 20px rgba(30,107,60,0.3); }
.btn-accent { background:var(--accent); color:#fff; }
.btn-accent:hover { background:var(--orange-l); }
.btn-ghost { background:rgba(255,255,255,0.12); color:#fff; border:1.5px solid rgba(255,255,255,0.25); }
.btn-ghost:hover { background:rgba(255,255,255,0.2); }
.btn-lg { padding:16px 36px; font-size:16px; }
.btn-sm { padding:8px 16px; font-size:12px; }

/* Spinner */
.spinner { display:inline-block; width:20px; height:20px; border-radius:50%; border:3px solid rgba(255,255,255,0.3); border-top-color:#fff; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Fade-in animation */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* Sections padding */
#products { padding:72px 0; }
@media(max-width:768px) { #products, #lighting, #why { padding:52px 0; } #contact { padding:56px 0; } }