/* ============================================================
   Zenwela — style.css
   Palette: clair · saturé · argent · chrome · graphite · bleu · marine
   ============================================================ */

:root{
  --marine-900:#0d1b34;
  --marine-800:#122444;
  --marine-700:#1a3358;
  --bleu-600:#2f5f96;
  --bleu-500:#3a78c2;
  --bleu-400:#5a94d6;
  --chrome-300:#aebfd4;
  --argent-200:#c9d4e2;
  --argent-100:#e4eaf2;
  --graphite-700:#2b3646;
  --graphite-500:#48586c;
  --sable-50:#f5f8fc;
  --blanc:#ffffff;
  --texte:#1f2c3f;
  --texte-doux:#556377;
  --ligne:#d9e2ee;

  --ombre-douce:0 18px 48px -22px rgba(18,36,68,.35);
  --ombre-carte:0 12px 30px -16px rgba(18,36,68,.28);
  --rayon-l:26px;
  --rayon-m:18px;
  --rayon-s:12px;

  --police-titre:"Georgia","Times New Roman",serif;
  --police-corps:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --contenu:1180px;
  --transi:.4s cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--police-corps);
  color:var(--texte);
  background:var(--sable-50);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--police-titre);line-height:1.15;letter-spacing:-.01em;color:var(--marine-900)}

.enveloppe{width:min(92%,var(--contenu));margin-inline:auto}
.eyebrow{
  display:inline-block;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bleu-600);font-weight:700;margin-bottom:14px;
}
.section-titre{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:16px}
.section-intro{max-width:640px;color:var(--texte-doux);font-size:1.06rem}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border:none;cursor:pointer;
  border-radius:999px;font-size:1rem;font-weight:600;font-family:var(--police-corps);
  transition:transform var(--transi),box-shadow var(--transi),background var(--transi);
}
.bouton--plein{
  color:#fff;
  background:linear-gradient(135deg,var(--bleu-500),var(--marine-700));
  box-shadow:0 14px 30px -12px rgba(26,51,88,.65);
}
.bouton--plein:hover{transform:translateY(-3px);box-shadow:0 20px 38px -12px rgba(26,51,88,.7)}
.bouton--fantome{
  color:var(--marine-800);background:rgba(255,255,255,.7);
  border:1px solid var(--ligne);backdrop-filter:blur(6px);
}
.bouton--fantome:hover{transform:translateY(-3px);background:#fff}
.bouton.pulse{animation:pulseBtn 1.6s ease}
@keyframes pulseBtn{0%,100%{box-shadow:0 14px 30px -12px rgba(26,51,88,.65)}50%{box-shadow:0 0 0 12px rgba(58,120,194,.12)}}

/* ============================================================
   En-tête
   ============================================================ */
.cap-entete{
  position:sticky;top:0;z-index:50;
  background:rgba(245,248,252,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--transi),box-shadow var(--transi),background var(--transi);
}
.cap-entete.est-figee{border-color:var(--ligne);box-shadow:0 8px 24px -18px rgba(18,36,68,.5)}
.cap-entete__interieur{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.cap-marque{display:flex;align-items:center;gap:12px;font-family:var(--police-titre);font-size:1.35rem;font-weight:700;color:var(--marine-900)}
.cap-marque__point{
  width:30px;height:30px;border-radius:9px;
  background:conic-gradient(from 140deg,var(--bleu-400),var(--marine-800),var(--chrome-300),var(--bleu-500));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
}
.cap-nav{display:flex;align-items:center;gap:30px}
.cap-nav a{font-size:.95rem;color:var(--graphite-500);font-weight:500;transition:color var(--transi)}
.cap-nav a:hover{color:var(--bleu-600)}
.cap-nav .bouton{padding:11px 22px}
.cap-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.cap-burger span{width:24px;height:2px;background:var(--marine-800);border-radius:2px;transition:var(--transi)}
.cap-burger.actif span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cap-burger.actif span:nth-child(2){opacity:0}
.cap-burger.actif span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   1. Hero
   ============================================================ */
.harbor-shell{position:relative;padding:76px 0 90px;overflow:hidden}
.harbor-shell::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 55% at 78% 18%,rgba(90,148,214,.18),transparent 70%),
    radial-gradient(50% 50% at 12% 80%,rgba(174,191,212,.28),transparent 70%),
    linear-gradient(180deg,var(--sable-50),#eef3f9);
}
.harbor-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.harbor-copy h1{font-size:clamp(2.3rem,5vw,3.7rem);margin-bottom:20px}
.harbor-copy h1 span{
  background:linear-gradient(120deg,var(--bleu-500),var(--marine-800));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.harbor-copy p.lead{font-size:1.12rem;color:var(--texte-doux);max-width:520px;margin-bottom:30px}
.harbor-prix{display:flex;align-items:baseline;gap:12px;margin-bottom:28px}
.harbor-prix strong{font-family:var(--police-titre);font-size:2.4rem;color:var(--marine-900)}
.harbor-prix small{color:var(--texte-doux);font-size:.95rem}
.harbor-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px}
.harbor-note{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--texte-doux)}
.harbor-note .coche{
  width:20px;height:20px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--bleu-400),var(--marine-700));
  position:relative;
}
.harbor-note .coche::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}

.product-frame{
  position:relative;border-radius:var(--rayon-l);
  padding:36px;
  background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(228,234,242,.55));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--ombre-douce);
  backdrop-filter:blur(8px);
  display:flex;justify-content:center;
}
.product-frame::after{
  content:"";position:absolute;inset:auto 0 -30px 0;height:60px;
  background:radial-gradient(60% 100% at 50% 0,rgba(26,51,88,.22),transparent 70%);
}
.product-frame img{width:min(320px,80%);height:auto;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(18,36,68,.28))}
.product-etiquette{
  position:absolute;top:26px;right:26px;
  background:var(--marine-800);color:#fff;font-size:.78rem;font-weight:600;
  padding:8px 15px;border-radius:999px;letter-spacing:.04em;
}

/* ============================================================
   Sections génériques
   ============================================================ */
.bloc{padding:84px 0}
.bloc--clair{background:var(--blanc)}
.bloc--voile{background:linear-gradient(180deg,#eef3f9,var(--sable-50))}
.tete-centre{text-align:center;max-width:720px;margin:0 auto 52px}
.tete-centre .section-intro{margin-inline:auto}

/* 2. Mode de vie */
.pure-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.pure-media{position:relative;border-radius:var(--rayon-l);overflow:hidden;box-shadow:var(--ombre-carte);aspect-ratio:5/4}
.pure-media img{width:100%;height:100%;object-fit:cover}
.pure-media::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 55%,rgba(18,36,68,.22))}
.pure-liste{list-style:none;margin-top:26px;display:grid;gap:16px}
.pure-liste li{display:flex;gap:14px;align-items:flex-start;color:var(--texte-doux)}
.pure-liste .puce{
  width:26px;height:26px;flex:none;border-radius:8px;margin-top:2px;
  background:linear-gradient(135deg,var(--argent-100),var(--chrome-300));
  display:grid;place-items:center;color:var(--marine-800);font-weight:700;font-size:.85rem;
}

/* 3. Comment ça marche */
.balance-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.nova-card{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon-m);
  padding:30px 26px;box-shadow:var(--ombre-carte);
  transition:transform var(--transi),box-shadow var(--transi);
}
.nova-card:hover{transform:translateY(-6px);box-shadow:0 22px 42px -20px rgba(18,36,68,.4)}
.nova-card__num{
  font-family:var(--police-titre);font-size:1.1rem;font-weight:700;color:#fff;
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,var(--bleu-500),var(--marine-700));
}
.nova-card h3{font-size:1.14rem;margin-bottom:10px}
.nova-card p{color:var(--texte-doux);font-size:.96rem}

/* 4. Pourquoi Zenwela */
.story-wave{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.story-visuel{position:relative;display:flex;justify-content:center}
.story-visuel .cadre{
  border-radius:var(--rayon-l);padding:34px;
  background:linear-gradient(160deg,rgba(174,191,212,.35),rgba(255,255,255,.6));
  border:1px solid rgba(255,255,255,.6);box-shadow:var(--ombre-douce);
}
.story-visuel img{width:min(300px,72vw);height:auto;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(18,36,68,.26))}
.story-ingredients{list-style:none;display:grid;gap:14px;margin-top:24px}
.story-ingredients li{
  display:flex;gap:14px;align-items:center;padding:14px 18px;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon-s);
}
.story-ingredients .rond{
  width:12px;height:12px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--bleu-400),var(--marine-700));
}
.story-ingredients b{color:var(--marine-900)}
.story-ingredients span{color:var(--texte-doux);font-size:.94rem}

/* 5. Routine */
.flow-banner{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:etape}
.glow-column{
  position:relative;background:var(--blanc);border-radius:var(--rayon-m);
  padding:34px 28px 30px;border:1px solid var(--ligne);box-shadow:var(--ombre-carte);
  transition:transform var(--transi);
}
.glow-column:hover{transform:translateY(-6px)}
.glow-column__moment{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--bleu-600);
}
.glow-column__heure{font-family:var(--police-titre);font-size:1.5rem;color:var(--marine-900);margin:6px 0 14px}
.glow-column p{color:var(--texte-doux);font-size:.96rem}
.glow-column::before{
  counter-increment:etape;content:counter(etape);
  position:absolute;top:26px;right:26px;font-family:var(--police-titre);
  font-size:2.6rem;color:var(--argent-200);line-height:1;
}

/* 6. Qualité */
.balance-panel--trois{grid-template-columns:repeat(3,1fr)}
.qualite-tete{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-bottom:52px}
.qualite-media{border-radius:var(--rayon-l);overflow:hidden;box-shadow:var(--ombre-carte);aspect-ratio:16/11}
.qualite-media img{width:100%;height:100%;object-fit:cover}

/* 7. FAQ */
.faq-liste{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq-item{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon-m);
  overflow:hidden;transition:box-shadow var(--transi),border-color var(--transi);
}
.faq-item.ouvert{box-shadow:var(--ombre-carte);border-color:var(--chrome-300)}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:22px 26px;font-size:1.05rem;font-weight:600;color:var(--marine-900);
  display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--police-corps);
}
.faq-q .signe{
  width:26px;height:26px;flex:none;position:relative;border-radius:8px;
  background:linear-gradient(135deg,var(--argent-100),var(--chrome-300));transition:transform var(--transi);
}
.faq-q .signe::before,.faq-q .signe::after{content:"";position:absolute;background:var(--marine-800);border-radius:2px}
.faq-q .signe::before{left:7px;right:7px;top:12px;height:2px}
.faq-q .signe::after{top:7px;bottom:7px;left:12px;width:2px;transition:transform var(--transi)}
.faq-item.ouvert .signe::after{transform:scaleY(0)}
.faq-r{max-height:0;overflow:hidden;transition:max-height var(--transi)}
.faq-r__interieur{padding:0 26px 24px;color:var(--texte-doux)}

/* 8. Commande */
.commande-carte{
  max-width:720px;margin:0 auto;position:relative;
  border-radius:var(--rayon-l);overflow:hidden;
  background:linear-gradient(155deg,var(--marine-800),var(--marine-900));
  box-shadow:var(--ombre-douce);color:#fff;
}
.commande-carte__interieur{padding:48px}
.commande-carte .eyebrow{color:var(--bleu-400)}
.commande-carte h2{color:#fff}
.commande-carte p.sous{color:var(--argent-200);margin:10px 0 26px;max-width:460px}
.commande-prix{display:flex;align-items:baseline;gap:10px;margin-bottom:26px}
.commande-prix strong{font-family:var(--police-titre);font-size:2.2rem}
.commande-prix span{color:var(--chrome-300);font-size:.92rem}
.champ{margin-bottom:18px}
.champ label{display:block;font-size:.9rem;margin-bottom:8px;color:var(--argent-100)}
.champ input{
  width:100%;padding:15px 18px;border-radius:var(--rayon-s);
  border:1px solid rgba(201,212,226,.3);background:rgba(255,255,255,.06);
  color:#fff;font-size:1rem;font-family:var(--police-corps);transition:border-color var(--transi),background var(--transi);
}
.champ input::placeholder{color:rgba(201,212,226,.55)}
.champ input:focus{outline:none;border-color:var(--bleu-400);background:rgba(255,255,255,.1)}
.champ.invalide input{border-color:#e2879a;background:rgba(226,135,154,.1)}
.champ__err{display:none;color:#f2b4c0;font-size:.82rem;margin-top:7px}
.champ.invalide .champ__err{display:block}
.commande-carte .bouton--plein{width:100%;justify-content:center;background:linear-gradient(135deg,var(--bleu-400),var(--bleu-600))}
.commande-privacy{font-size:.82rem;color:var(--chrome-300);margin-top:18px;line-height:1.6}
.commande-privacy a{color:#fff;text-decoration:underline}

/* Avis important */
.avis-important{
  max-width:820px;margin:40px auto 0;padding:24px 28px;
  background:rgba(174,191,212,.16);border:1px solid var(--ligne);
  border-radius:var(--rayon-m);font-size:.9rem;color:var(--texte-doux);
}
.avis-important strong{color:var(--marine-900)}
.avis-important ul{list-style:none;margin-top:12px;display:grid;gap:8px}
.avis-important li{padding-left:20px;position:relative}
.avis-important li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--bleu-500)}

/* ============================================================
   Pied de page
   ============================================================ */
.cap-pied{background:var(--marine-900);color:var(--argent-200);padding:64px 0 28px}
.cap-pied a{transition:color var(--transi)}
.cap-pied a:hover{color:#fff}
.pied-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:40px;border-bottom:1px solid rgba(201,212,226,.16)}
.pied-marque{display:flex;align-items:center;gap:12px;font-family:var(--police-titre);font-size:1.4rem;color:#fff;margin-bottom:16px}
.pied-col h4{color:#fff;font-family:var(--police-corps);font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.pied-col ul{list-style:none;display:grid;gap:10px;font-size:.95rem}
.pied-contact{font-size:.95rem;display:grid;gap:8px;max-width:280px}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:22px;font-size:.84rem;color:var(--chrome-300)}
.pied-legal{display:flex;flex-wrap:wrap;gap:18px}

/* ============================================================
   Bannière cookies
   ============================================================ */
.cookie-banniere{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,180%);
  width:min(94%,880px);z-index:80;
  background:rgba(255,255,255,.9);backdrop-filter:blur(16px);
  border:1px solid var(--ligne);border-radius:var(--rayon-l);
  box-shadow:var(--ombre-douce);padding:24px 28px;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.cookie-banniere.visible{transform:translate(-50%,0)}
.cookie-banniere h4{font-family:var(--police-corps);font-size:1.05rem;color:var(--marine-900);margin-bottom:8px}
.cookie-banniere p{font-size:.9rem;color:var(--texte-doux);margin-bottom:16px}
.cookie-actions{display:flex;flex-wrap:wrap;gap:12px}
.cookie-actions .bouton{padding:11px 22px;font-size:.92rem}
.cookie-perso{margin-top:16px;padding-top:16px;border-top:1px solid var(--ligne);display:none}
.cookie-perso.ouvert{display:block}
.cookie-ligne{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;font-size:.9rem;color:var(--texte-doux)}
.cookie-ligne b{color:var(--marine-900)}
.interrupteur{position:relative;width:44px;height:24px;flex:none}
.interrupteur input{opacity:0;width:0;height:0}
.interrupteur .piste{position:absolute;inset:0;background:var(--argent-200);border-radius:999px;transition:var(--transi);cursor:pointer}
.interrupteur .piste::before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:var(--transi)}
.interrupteur input:checked+.piste{background:var(--bleu-500)}
.interrupteur input:checked+.piste::before{transform:translateX(20px)}
.interrupteur input:disabled+.piste{opacity:.55;cursor:not-allowed}

/* ============================================================
   Pages légales & succès
   ============================================================ */
.doc-entete{padding:64px 0 40px;background:linear-gradient(180deg,#eef3f9,var(--sable-50))}
.doc-entete h1{font-size:clamp(2rem,4vw,3rem)}
.doc-entete p{color:var(--texte-doux);margin-top:12px}
.doc-corps{padding:20px 0 84px}
.doc-corps .enveloppe{max-width:840px}
.doc-corps h2{font-size:1.4rem;margin:36px 0 12px}
.doc-corps h3{font-size:1.1rem;margin:24px 0 8px}
.doc-corps p,.doc-corps li{color:var(--texte-doux);margin-bottom:12px}
.doc-corps ul{padding-left:22px;margin-bottom:16px}
.doc-corps a{color:var(--bleu-600);text-decoration:underline}
.doc-maj{font-size:.86rem;color:var(--graphite-500);font-style:italic}

.succes-shell{min-height:72vh;display:grid;place-items:center;text-align:center;padding:80px 0}
.succes-carte{
  max-width:600px;background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--rayon-l);padding:56px 44px;box-shadow:var(--ombre-douce);
}
.succes-coche{
  width:84px;height:84px;border-radius:50%;margin:0 auto 26px;position:relative;
  background:linear-gradient(135deg,var(--bleu-400),var(--marine-700));
  box-shadow:0 16px 34px -14px rgba(26,51,88,.6);
}
.succes-coche::after{content:"";position:absolute;left:30px;top:24px;width:16px;height:30px;border:4px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.succes-carte h1{font-size:2rem;margin-bottom:14px}
.succes-carte p{color:var(--texte-doux);margin-bottom:28px}

/* ============================================================
   Révélation au scroll
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.vu{opacity:1;transform:none}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:960px){
  .harbor-grid,.pure-grid,.story-wave,.qualite-tete{grid-template-columns:1fr;gap:40px}
  .harbor-copy{order:1}.harbor-visuel{order:0}
  .balance-panel{grid-template-columns:1fr 1fr}
  .pied-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .cap-nav{
    position:fixed;inset:0 0 0 auto;width:min(78%,320px);
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:8px;
    background:var(--blanc);padding:96px 28px 40px;
    transform:translateX(110%);transition:transform var(--transi);box-shadow:var(--ombre-douce);
  }
  .cap-nav.ouverte{transform:translateX(0)}
  .cap-nav a{padding:12px 4px;border-bottom:1px solid var(--ligne)}
  .cap-nav .bouton{margin-top:10px;justify-content:center}
  .cap-burger{display:flex;z-index:60}
  .flow-banner{grid-template-columns:1fr}
  .commande-carte__interieur{padding:32px 24px}
}
@media(max-width:520px){
  .balance-panel,.balance-panel--trois{grid-template-columns:1fr}
  .pied-grid{grid-template-columns:1fr}
  .cookie-actions .bouton{flex:1 1 100%;justify-content:center}
  .bloc{padding:60px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}