/* ============================================================
   AQUALIS — Design System v2 (YAM Distribution)
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg:#0b2033;
  --bg-2:#0e2a42;
  --panel:rgba(255,255,255,.055);
  --panel-2:rgba(255,255,255,.09);
  --stroke:rgba(126,214,255,.2);
  --ink:#eaf6fb;
  --muted:rgba(214,236,247,.72);
  --cyan:#00a8e8;
  --cyan-2:#4fc9f5;
  --cyan-glow:rgba(0,168,232,.35);
  --green:#2ee6a8;
  --radius:18px;
  --font:'Geist','Inter',system-ui,-apple-system,sans-serif;
}

html{ scroll-behavior:smooth; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--cyan); color:#03222f; }

/* ---------- Keyframes ---------- */
@keyframes fadeSlideUp{ from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:translateY(0);} }
@keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);}
  70%{ box-shadow:0 0 0 18px rgba(37,211,102,0);}
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
@keyframes waveMove{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes shimmer{ from{background-position:-200% 0;} to{background-position:200% 0;} }
@keyframes marqueeX{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-d1{ transition-delay:.1s; } .reveal-d2{ transition-delay:.2s; }
.reveal-d3{ transition-delay:.3s; } .reveal-d4{ transition-delay:.4s; }

/* ---------- Layout ---------- */
.container{ width:min(1180px, 92vw); margin-inline:auto; }
section{ padding:clamp(70px,9vw,120px) 0; position:relative; }

.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-2); font-weight:600;
  padding:8px 16px; border:1px solid var(--stroke); border-radius:999px;
  background:var(--panel);
}
.kicker::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }

h1,h2,h3{ font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.section-title{ font-size:clamp(1.9rem,4.4vw,3.1rem); margin:18px 0 14px; }
.section-sub{ color:var(--muted); font-size:clamp(1rem,1.4vw,1.12rem); max-width:640px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:14px; font-weight:600; font-size:1rem;
  cursor:pointer; border:none; transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  font-family:var(--font);
}
.btn:active{ transform:scale(.96); }
.btn-primary{
  background:linear-gradient(135deg, var(--cyan) 0%, #0077c8 100%);
  color:#fff; box-shadow:0 10px 32px var(--cyan-glow);
}
.btn-primary:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 16px 44px var(--cyan-glow); }
.btn-white{ background:#fff; color:#04222f; }
.btn-white:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 36px rgba(255,255,255,.18); }
.btn-ghost{
  background:rgba(16,40,60,.72); color:var(--ink); border:1px solid var(--stroke);
}
.btn-ghost:hover{ background:var(--panel-2); transform:translateY(-2px); }
.btn-lg{ padding:18px 38px; font-size:1.06rem; border-radius:16px; }

/* ---------- Navbar ---------- */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:60;
  transition:background .4s, backdrop-filter .4s, box-shadow .4s, padding .4s;
  padding:12px 0;
}
.nav.scrolled{
  background:rgba(10,30,48,.85); backdrop-filter:blur(18px);
  box-shadow:0 1px 0 var(--stroke); padding:10px 0;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav-logos{ display:flex; align-items:center; gap:18px; }
.nav-logos img{ height:clamp(72px, 9vw, 118px); width:auto; transition:height .4s cubic-bezier(.16,1,.3,1); }
.nav.scrolled .nav-logos img{ height:64px; }
.nav-links{ display:none; align-items:center; gap:28px; }
.nav-links a{ font-size:.94rem; color:var(--muted); transition:color .25s; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:none; align-items:center; gap:12px; }
.nav-cta .btn{ padding:11px 22px; font-size:.92rem; }
@media(min-width:900px){ .nav-links{display:flex;} .nav-cta{display:flex;} .nav-burger{display:none!important;} }

.nav-burger{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--stroke); border-radius:12px;
  color:var(--ink); cursor:pointer; z-index:70; transition:transform .2s;
}
.nav-burger:active{ transform:scale(.9); }

.mobile-menu{
  position:fixed; inset:0; z-index:65;
  background:rgba(8,24,40,.97); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; padding:0 34px; gap:8px;
  opacity:0; pointer-events:none; transition:opacity .5s cubic-bezier(.16,1,.3,1);
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{
  font-size:1.9rem; font-weight:500; color:rgba(234,246,251,.9); padding:12px 0;
  transform:translateY(20px); opacity:0; transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .5s;
}
.mobile-menu.open a{ transform:translateY(0); opacity:1; }
.mobile-menu.open a:nth-child(2){transition-delay:.05s} .mobile-menu.open a:nth-child(3){transition-delay:.1s}
.mobile-menu.open a:nth-child(4){transition-delay:.15s} .mobile-menu.open a:nth-child(5){transition-delay:.2s}
.mobile-menu .btn{ margin-top:22px; align-self:flex-start; }

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--stroke); border-radius:var(--radius);
  padding:30px; transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(126,214,255,.35); box-shadow:0 24px 50px rgba(0,0,0,.35); }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.86rem; font-weight:600; color:var(--muted); }
.field label b{ color:var(--cyan-2); }
.field input, .field select, .field textarea{
  background:rgba(255,255,255,.05); border:1px solid var(--stroke); border-radius:12px;
  padding:14px 16px; color:var(--ink); font-family:var(--font); font-size:1rem;
  transition:border-color .25s, box-shadow .25s; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(0,168,232,.15);
}
.field select option{ background:var(--bg-2); color:var(--ink); }
.form-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:640px){ .form-grid{ grid-template-columns:1fr 1fr; } .form-grid .full{ grid-column:1/-1; } }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:.85rem; color:var(--muted); }
.consent input{ margin-top:3px; accent-color:var(--cyan); width:18px; height:18px; flex:none; }

/* Honeypot anti-spam */
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* ---------- WhatsApp flottant ---------- */
.wa-float{
  position:fixed; right:22px; bottom:26px; z-index:80;
  display:flex; align-items:center; gap:12px;
}
.wa-label{
  background:#fff; color:#0b2a1c; font-weight:700; font-size:.92rem;
  padding:12px 18px; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.35);
  animation:fadeSlideUp .8s ease 1.6s both;
  max-width:220px; line-height:1.3;
}
.wa-label small{ display:block; font-weight:500; color:#4b6b5c; font-size:.78rem; }
.wa-btn{
  width:64px; height:64px; flex:none; border-radius:50%;
  background:#25d366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 34px rgba(37,211,102,.45); animation:pulseRing 2.4s infinite;
  transition:transform .25s;
}
.wa-btn:hover{ transform:scale(1.1); }
.wa-btn svg{ width:34px; height:34px; fill:#fff; }
@media(max-width:560px){ .wa-label{ display:none; } .wa-float{ right:16px; bottom:18px; } }

/* ---------- Bandeau livraison offerte ---------- */
.ship-banner{
  background:linear-gradient(90deg, #063a52, #075d80, #063a52);
  border-block:1px solid var(--stroke); overflow:hidden; padding:13px 0;
}
.ship-track{ display:flex; gap:56px; width:max-content; animation:marqueeX 22s linear infinite; }
.ship-track span{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
}
.ship-track em{ font-style:normal; color:var(--green); }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--stroke); padding:60px 0 34px; background:var(--bg-2); }
.footer-grid{ display:grid; gap:36px; grid-template-columns:1fr; }
@media(min-width:820px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
footer h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; color:var(--cyan-2); margin-bottom:16px; }
footer a, footer p{ color:var(--muted); font-size:.93rem; }
footer a{ display:block; padding:5px 0; transition:color .25s; }
footer a:hover{ color:var(--ink); }
.footer-bottom{ margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; color:var(--muted); font-size:.82rem; }

/* ---------- Sélecteur de langue ---------- */
.lang-float{ position:fixed; left:22px; bottom:26px; z-index:80; font-family:var(--font); }
.lang-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:12px 18px; border-radius:14px; font-size:.92rem; color:var(--ink);
  background:rgba(10,30,48,.95); border:1px solid var(--stroke);
  box-shadow:0 12px 30px rgba(0,0,0,.3); transition:transform .25s, border-color .25s;
  font-family:var(--font);
}
.lang-btn:hover{ transform:translateY(-2px); border-color:rgba(126,214,255,.45); }
.lang-menu{
  position:absolute; bottom:calc(100% + 10px); left:0; min-width:180px;
  background:rgba(10,30,48,.98); border:1px solid var(--stroke); border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  padding:8px; display:none; flex-direction:column; gap:2px;
}
.lang-float.open .lang-menu{ display:flex; animation:fadeSlideUp .3s cubic-bezier(.16,1,.3,1) both; }
.lang-menu button{
  text-align:left; padding:10px 14px; border-radius:10px; border:none; cursor:pointer;
  background:transparent; color:var(--ink); font-size:.92rem; font-family:var(--font);
  transition:background .2s;
}
.lang-menu button:hover{ background:rgba(0,168,232,.15); }
.lang-menu button.on{ background:rgba(0,168,232,.22); font-weight:700; }
@media(max-width:560px){ .lang-float{ left:14px; bottom:18px; } }

/* Neutraliser la barre imposée par Google Translate */
body{ top:0 !important; position:static !important; }
iframe.skiptranslate, .goog-te-banner-frame, #goog-gt-tt{ display:none !important; }
body > .skiptranslate{ display:none !important; }
font[style]{ background:transparent !important; box-shadow:none !important; }

/* ---------- Petites pages (devis / commande / merci) ---------- */
.page-head{ padding:150px 0 30px; }
.crumb{ font-size:.85rem; color:var(--muted); margin-bottom:16px; }
.crumb a{ color:var(--cyan-2); }

.notice{
  display:flex; gap:12px; align-items:flex-start;
  background:rgba(46,230,168,.08); border:1px solid rgba(46,230,168,.25);
  border-radius:14px; padding:16px 18px; font-size:.92rem; color:#c9f5e4;
}
.notice.blue{ background:rgba(0,168,232,.08); border-color:rgba(0,168,232,.3); color:#cfeaf7; }

/* ---------- Barre de confiance (livraison + paiement) ---------- */
.trustbar{ border-top:1px solid var(--stroke); padding:36px 0; background:var(--bg-2); }
.trust-inner{ display:flex; gap:40px 60px; flex-wrap:wrap; justify-content:space-between; align-items:center; }
.t-group p{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; font-weight:600; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.chip{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 15px; border-radius:9px;
  background:#fff; color:#0b2033; font-weight:800; font-size:.88rem; letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(0,0,0,.25); user-select:none;
}
.chip-visa{ color:#1A1F71; font-style:italic; letter-spacing:.08em; }
.chip-mc i{ width:17px; height:17px; border-radius:50%; display:inline-block; }
.chip-mc i.c1{ background:#EB001B; }
.chip-mc i.c2{ background:#F79E1B; margin-left:-9px; opacity:.9; }
.chip-mc em{ font-style:normal; font-size:.74rem; font-weight:700; color:#222; }
.chip-amex{ background:#2E77BC; color:#fff; letter-spacing:.12em; font-size:.8rem; }
.chip-stripe{ color:#635BFF; text-transform:lowercase; font-size:.95rem; }
.chip-apple{ background:#000; color:#fff; }
.chip-apple svg{ width:13px; height:15px; fill:#fff; margin-top:-2px; }
.chip-gpay b{ color:#4285F4; font-weight:800; margin-right:1px; }
.chip-dhl{ background:#FFCC00; color:#D40511; font-style:italic; letter-spacing:.14em; font-weight:900; }
.chip-chrono{ color:#20336b; text-transform:lowercase; font-size:.92rem; }
.chip-chrono::before{ content:""; width:9px; height:9px; background:#e2001a; border-radius:2px; transform:rotate(45deg); margin-right:2px; }
@media(max-width:640px){ .trust-inner{ justify-content:flex-start; } }

/* ---------- Popups documents légaux ---------- */
.legal-overlay{
  position:fixed; inset:0; z-index:150; background:rgba(4,12,20,.75);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .35s cubic-bezier(.16,1,.3,1);
}
.legal-overlay.open{ opacity:1; pointer-events:auto; }
.legal-modal{
  width:min(780px, 100%); max-height:84vh; display:flex; flex-direction:column;
  background:linear-gradient(170deg, #10293f, #0c2234); border:1px solid var(--stroke);
  border-radius:20px; box-shadow:0 40px 100px rgba(0,0,0,.6);
  transform:translateY(24px) scale(.97); transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.legal-overlay.open .legal-modal{ transform:translateY(0) scale(1); }
.legal-head{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 28px; border-bottom:1px solid var(--stroke); flex:none;
}
.legal-head b{ font-size:1.1rem; }
.legal-close{
  width:38px; height:38px; border-radius:11px; border:1px solid var(--stroke); cursor:pointer;
  background:var(--panel-2); color:var(--ink); font-size:1rem; font-family:var(--font);
  transition:background .2s, transform .2s;
}
.legal-close:hover{ background:rgba(0,168,232,.2); }
.legal-close:active{ transform:scale(.92); }
.legal-body{ padding:26px 30px 34px; overflow-y:auto; font-size:.92rem; line-height:1.7; color:var(--muted); }
.legal-body h3{ color:var(--ink); font-size:1rem; margin:26px 0 8px; }
.legal-body h3:first-child{ margin-top:0; }
.legal-body p{ margin:0 0 12px; }
.legal-body ul{ margin:0 0 12px 20px; }
.legal-body li{ margin-bottom:5px; }
.legal-body b{ color:var(--ink); }
.legal-body .maj{ font-size:.78rem; color:rgba(214,236,247,.45); margin-top:26px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); }
.legal-links a{ cursor:pointer; transition:color .2s; }
.legal-links a:hover{ color:var(--ink); }