/* =========================================================
   NOVAKORA — Feuille de style principale
   Palette : clair, saturé, argent, chrome, menthe, vert foncé
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --clair:#f4fbf8;
  --clair-2:#eafaf3;
  --menthe:#4ec4a1;
  --menthe-vif:#1fbf95;      /* saturé */
  --menthe-clair:#c9f3e6;
  --vert-fonce:#0e4a3a;
  --vert-fonce-2:#0a3327;
  --argent:#dfe6ea;
  --argent-2:#c3cdd4;
  --chrome:#9aa8b0;
  --chrome-fonce:#6d7c85;
  --texte:#153a30;
  --texte-doux:#4a5f57;
  --blanc:#ffffff;
  --ombre-douce:0 14px 40px rgba(14,74,58,.12);
  --ombre-carte:0 8px 26px rgba(20,58,48,.10);
  --rayon:20px;
  --rayon-s:12px;
  --max:1180px;
  --trans:.28s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--texte);
  background:var(--clair);
  line-height:1.65;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
h1,h2,h3{line-height:1.2;color:var(--vert-fonce)}
section{position:relative}

/* ---------- Utilitaires ---------- */
.enveloppe{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}
.section-pad{padding:88px 0}
.pre-titre{
  display:inline-block;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--menthe-vif);
  background:var(--menthe-clair);padding:7px 16px;border-radius:40px;margin-bottom:16px;
}
.titre-section{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:16px}
.intro-section{max-width:640px;color:var(--texte-doux);font-size:1.05rem}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-weight:700;font-size:1rem;border:none;border-radius:50px;
  padding:15px 30px;transition:var(--trans);
}
.btn-primaire{
  background:linear-gradient(135deg,var(--menthe-vif),var(--vert-fonce));
  color:#fff;box-shadow:0 10px 26px rgba(31,191,149,.35);
}
.btn-primaire:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(31,191,149,.45)}
.btn-argent{
  background:linear-gradient(135deg,var(--blanc),var(--argent));
  color:var(--vert-fonce);border:1px solid var(--argent-2);
  box-shadow:var(--ombre-carte);
}
.btn-argent:hover{transform:translateY(-3px)}
.btn-contour{background:transparent;border:2px solid var(--menthe);color:var(--vert-fonce)}
.btn-contour:hover{background:var(--menthe-clair)}

/* =========================================================
   EN-TÊTE / NAVIGATION
   ========================================================= */
.entete{
  position:sticky;top:0;z-index:900;
  background:rgba(244,251,248,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--argent);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;color:var(--vert-fonce)}
.logo-pastille{
  width:34px;height:34px;border-radius:11px;
  background:linear-gradient(135deg,var(--menthe-vif),var(--vert-fonce));
  display:grid;place-items:center;color:#fff;font-size:1rem;
  box-shadow:0 4px 12px rgba(31,191,149,.4);
}
.nav-liens{display:flex;align-items:center;gap:30px}
.nav-liens a{font-weight:600;color:var(--texte-doux);font-size:.96rem;transition:color .2s}
.nav-liens a:hover{color:var(--menthe-vif)}
.nav-cta{padding:11px 22px;font-size:.92rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:26px;height:3px;background:var(--vert-fonce);border-radius:3px;transition:var(--trans)}
.burger.actif span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.actif span:nth-child(2){opacity:0}
.burger.actif span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* =========================================================
   1. HÉRO
   ========================================================= */
.hero{
  background:
    radial-gradient(1000px 500px at 85% -10%,var(--menthe-clair),transparent),
    linear-gradient(180deg,var(--clair),var(--clair-2));
  overflow:hidden;padding:74px 0 90px;
}
.hero-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero-texte h1{font-size:clamp(2.1rem,5vw,3.5rem);margin-bottom:20px}
.hero-texte h1 .accent{
  background:linear-gradient(120deg,var(--menthe-vif),var(--vert-fonce));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-texte p{font-size:1.12rem;color:var(--texte-doux);max-width:520px;margin-bottom:30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.hero-atouts{display:flex;gap:26px;flex-wrap:wrap}
.hero-atouts li{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.94rem;color:var(--texte)}
.puce{width:22px;height:22px;border-radius:50%;background:var(--menthe-clair);color:var(--menthe-vif);
  display:grid;place-items:center;font-weight:800;font-size:.8rem}
.hero-media{position:relative}
.hero-media img{
  width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:26px;
  box-shadow:var(--ombre-douce);border:6px solid #fff;
}
.badge-flottant{
  position:absolute;left:-14px;bottom:26px;background:#fff;border-radius:16px;
  padding:14px 18px;box-shadow:var(--ombre-carte);display:flex;align-items:center;gap:12px;
  border:1px solid var(--argent);
}
.badge-flottant .num{font-size:1.5rem;font-weight:800;color:var(--menthe-vif)}
.badge-flottant .lib{font-size:.82rem;color:var(--texte-doux);line-height:1.3}

/* =========================================================
   2. BIEN-ÊTRE AU QUOTIDIEN
   ========================================================= */
.bienetre{background:var(--blanc)}
.bienetre-grille{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.bienetre-liste{margin-top:26px;display:grid;gap:18px}
.bienetre-item{
  display:flex;gap:16px;padding:20px;border-radius:var(--rayon-s);
  background:var(--clair-2);border:1px solid var(--menthe-clair);transition:var(--trans);
}
.bienetre-item:hover{transform:translateX(6px);box-shadow:var(--ombre-carte)}
.bienetre-item .ico{
  flex:none;width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,var(--menthe),var(--vert-fonce));
  color:#fff;display:grid;place-items:center;font-size:1.3rem;
}
.bienetre-item h3{font-size:1.1rem;margin-bottom:4px}
.bienetre-item p{color:var(--texte-doux);font-size:.95rem}
.bienetre-visuel img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rayon);
  box-shadow:var(--ombre-douce);
}

/* =========================================================
   3. PRÉSENTATION PRODUIT
   ========================================================= */
.produit{
  background:linear-gradient(160deg,var(--vert-fonce),var(--vert-fonce-2));
  color:#eafaf3;
}
.produit .titre-section,.produit h3{color:#fff}
.produit .pre-titre{background:rgba(255,255,255,.12);color:var(--menthe-clair)}
.produit-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.produit-image{
  display:grid;place-items:center;background:
    radial-gradient(circle at 50% 40%,rgba(78,196,161,.35),transparent 62%);
  border-radius:var(--rayon);padding:10px;
}
.produit-image img{width:78%;max-width:340px;aspect-ratio:1/1;object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.4))}
.produit-infos p.desc{color:#c9f3e6;margin-bottom:26px;font-size:1.05rem}
.prix-bloc{display:flex;align-items:center;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.prix{
  font-size:2.6rem;font-weight:800;color:#fff;
  background:rgba(255,255,255,.08);padding:8px 22px;border-radius:16px;
  border:1px solid rgba(201,243,230,.3);
}
.prix small{font-size:1rem;font-weight:600;color:var(--menthe-clair)}
.prix-note{font-size:.9rem;color:#a8d9c9;max-width:230px}
.produit-atouts{display:grid;gap:12px;margin-bottom:30px}
.produit-atouts li{display:flex;gap:12px;align-items:flex-start;color:#dff5ec;font-size:.98rem}
.produit-atouts .coche{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--menthe-vif);
  color:var(--vert-fonce-2);font-weight:800;display:grid;place-items:center;font-size:.85rem;
}

/* =========================================================
   4. QUALITÉ & FABRICATION
   ========================================================= */
.qualite{background:var(--clair)}
.qualite-tete{text-align:center;max-width:660px;margin:0 auto 50px}
.qualite-tete .intro-section{margin:0 auto}
.qualite-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.qualite-carte{
  background:#fff;border-radius:var(--rayon);padding:30px 24px;text-align:center;
  border:1px solid var(--argent);box-shadow:var(--ombre-carte);transition:var(--trans);
  position:relative;overflow:hidden;
}
.qualite-carte::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--menthe-vif),var(--vert-fonce));
}
.qualite-carte:hover{transform:translateY(-8px);box-shadow:var(--ombre-douce)}
.qualite-carte .rond{
  width:62px;height:62px;margin:0 auto 18px;border-radius:20px;
  background:linear-gradient(135deg,var(--argent),var(--chrome));
  display:grid;place-items:center;font-size:1.6rem;color:var(--vert-fonce);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.7),0 6px 14px rgba(109,124,133,.3);
}
.qualite-carte h3{font-size:1.12rem;margin-bottom:10px}
.qualite-carte p{color:var(--texte-doux);font-size:.94rem}

/* =========================================================
   5. MODE DE VIE
   ========================================================= */
.modevie{background:var(--blanc)}
.modevie-grille{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.modevie-visuel img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rayon);
  box-shadow:var(--ombre-douce);
}
.modevie-blocs{display:grid;gap:22px;margin-top:24px}
.modevie-bloc{
  padding:22px 24px;border-radius:var(--rayon-s);position:relative;
  background:var(--clair-2);border-left:5px solid var(--menthe-vif);
}
.modevie-bloc h3{font-size:1.12rem;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.modevie-bloc .num-rond{
  width:30px;height:30px;border-radius:50%;background:var(--vert-fonce);color:#fff;
  display:grid;place-items:center;font-size:.9rem;font-weight:700;flex:none;
}
.modevie-bloc p{color:var(--texte-doux);font-size:.95rem}

/* =========================================================
   6. FAQ
   ========================================================= */
.faq{background:var(--clair)}
.faq-tete{text-align:center;max-width:620px;margin:0 auto 46px}
.faq-tete .intro-section{margin:0 auto}
.faq-liste{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq-item{
  background:#fff;border:1px solid var(--argent);border-radius:var(--rayon-s);
  overflow:hidden;transition:var(--trans);
}
.faq-item.ouvert{border-color:var(--menthe);box-shadow:var(--ombre-carte)}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:1.03rem;font-weight:700;color:var(--vert-fonce);
}
.faq-signe{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--menthe-clair);
  color:var(--menthe-vif);display:grid;place-items:center;font-size:1.2rem;transition:var(--trans);
}
.faq-item.ouvert .faq-signe{transform:rotate(45deg);background:var(--menthe-vif);color:#fff}
.faq-r{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-r p{padding:0 24px 22px;color:var(--texte-doux);font-size:.97rem}

/* =========================================================
   7. COMMANDE
   ========================================================= */
.commande{
  background:linear-gradient(160deg,var(--menthe-clair),var(--clair));
}
.commande-grille{display:grid;grid-template-columns:1fr .95fr;gap:52px;align-items:center}
.commande-infos h2{margin-bottom:16px}
.commande-infos p{color:var(--texte-doux);margin-bottom:22px;max-width:460px}
.commande-liste{display:grid;gap:14px}
.commande-liste li{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--texte)}
.commande-liste .mini{
  width:34px;height:34px;border-radius:11px;background:#fff;box-shadow:var(--ombre-carte);
  display:grid;place-items:center;color:var(--menthe-vif);font-size:1.1rem;flex:none;
}
.form-carte{
  background:#fff;border-radius:24px;padding:34px 30px;box-shadow:var(--ombre-douce);
  border:1px solid var(--argent);
}
.form-carte h3{font-size:1.35rem;margin-bottom:6px}
.form-carte .sous{color:var(--texte-doux);font-size:.95rem;margin-bottom:22px}
.champ{margin-bottom:18px}
.champ label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px;color:var(--texte)}
.champ input{
  width:100%;padding:14px 16px;border:2px solid var(--argent);border-radius:12px;
  font-size:1rem;font-family:inherit;background:var(--clair);transition:var(--trans);
}
.champ input:focus{outline:none;border-color:var(--menthe-vif);background:#fff;
  box-shadow:0 0 0 4px rgba(31,191,149,.14)}
.champ input.invalide{border-color:#d9534f;background:#fdf3f3}
.msg-err{display:none;color:#c0392b;font-size:.83rem;margin-top:6px}
.msg-err.visible{display:block}
.form-carte .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:.8rem;color:var(--texte-doux);margin-top:16px;text-align:center}
.form-note a{color:var(--menthe-vif);font-weight:600}
.prix-mini{
  display:flex;justify-content:space-between;align-items:center;padding:14px 18px;
  background:var(--clair-2);border-radius:12px;margin-bottom:22px;border:1px dashed var(--menthe);
}
.prix-mini span{font-weight:600;color:var(--texte-doux)}
.prix-mini strong{font-size:1.5rem;color:var(--vert-fonce)}

/* =========================================================
   8. PIED DE PAGE
   ========================================================= */
.pied{background:var(--vert-fonce-2);color:#cfe7dd;padding:64px 0 26px}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:44px}
.pied .logo{color:#fff;margin-bottom:16px}
.pied-a p{color:#a9cdc0;font-size:.94rem;max-width:280px}
.pied h4{color:#fff;font-size:1.02rem;margin-bottom:16px;letter-spacing:.02em}
.pied ul{display:grid;gap:10px}
.pied ul a,.pied-contact li{color:#a9cdc0;font-size:.92rem;transition:color .2s}
.pied ul a:hover{color:var(--menthe)}
.pied-contact li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.pied-contact .et{color:var(--menthe);font-weight:800}
.pied-bas{
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.85rem;color:#8fb6a8;
}
.pied-bas a{color:#a9cdc0}
.pied-bas a:hover{color:var(--menthe)}

/* =========================================================
   BANNIÈRE COOKIES
   ========================================================= */
.cookie-banniere{
  position:fixed;left:18px;right:18px;bottom:18px;z-index:1000;
  background:#fff;border-radius:20px;box-shadow:0 18px 50px rgba(14,74,58,.28);
  border:1px solid var(--argent);padding:24px 26px;
  display:none;grid-template-columns:1fr auto;gap:24px;align-items:center;
  max-width:1000px;margin:0 auto;animation:monte .4s ease;
}
.cookie-banniere.visible{display:grid}
@keyframes monte{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.cookie-txt h4{font-size:1.05rem;margin-bottom:6px}
.cookie-txt p{font-size:.9rem;color:var(--texte-doux)}
.cookie-txt a{color:var(--menthe-vif);font-weight:600}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions .btn{padding:11px 20px;font-size:.9rem}
.cookie-prefs{
  margin-top:16px;border-top:1px solid var(--argent);padding-top:16px;display:none;
  grid-column:1/-1;gap:12px;
}
.cookie-prefs.visible{display:grid}
.pref-ligne{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:10px 0;border-bottom:1px dashed var(--argent)}
.pref-ligne:last-child{border-bottom:none}
.pref-ligne .info h5{font-size:.95rem;margin-bottom:2px}
.pref-ligne .info p{font-size:.82rem;color:var(--texte-doux)}
.interrupteur{position:relative;width:48px;height:26px;flex:none}
.interrupteur input{opacity:0;width:0;height:0}
.curseur{position:absolute;inset:0;background:var(--argent-2);border-radius:26px;cursor:pointer;transition:var(--trans)}
.curseur::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:var(--trans)}
.interrupteur input:checked+.curseur{background:var(--menthe-vif)}
.interrupteur input:checked+.curseur::before{transform:translateX(22px)}
.interrupteur input:disabled+.curseur{opacity:.6;cursor:not-allowed}

/* =========================================================
   PAGES INTERNES (légal / succès)
   ========================================================= */
.page-tete{
  background:linear-gradient(160deg,var(--vert-fonce),var(--vert-fonce-2));
  color:#eafaf3;padding:70px 0 60px;text-align:center;
}
.page-tete h1{color:#fff;font-size:clamp(1.8rem,4vw,2.7rem);margin-bottom:12px}
.page-tete p{color:#a9cdc0;max-width:600px;margin:0 auto}
.fil{font-size:.85rem;color:var(--menthe-clair);margin-bottom:14px}
.fil a{color:var(--menthe-clair)}
.contenu-legal{max-width:820px;margin:0 auto;padding:60px 22px}
.contenu-legal h2{font-size:1.35rem;margin:34px 0 12px;color:var(--vert-fonce)}
.contenu-legal h2:first-child{margin-top:0}
.contenu-legal p,.contenu-legal li{color:var(--texte-doux);margin-bottom:12px;font-size:.98rem}
.contenu-legal ul{list-style:disc;padding-left:22px;margin-bottom:14px}
.contenu-legal .maj{font-size:.86rem;color:var(--chrome-fonce);font-style:italic;margin-bottom:30px}
.encadre{background:var(--clair-2);border:1px solid var(--menthe-clair);border-radius:var(--rayon-s);
  padding:20px 24px;margin:20px 0}

/* Page succès */
.succes{min-height:70vh;display:grid;place-items:center;text-align:center;
  background:radial-gradient(800px 400px at 50% 0,var(--menthe-clair),transparent),var(--clair);padding:60px 22px}
.succes-carte{background:#fff;border-radius:26px;box-shadow:var(--ombre-douce);
  border:1px solid var(--argent);padding:56px 44px;max-width:560px}
.succes-coche{width:88px;height:88px;margin:0 auto 26px;border-radius:50%;
  background:linear-gradient(135deg,var(--menthe-vif),var(--vert-fonce));
  display:grid;place-items:center;color:#fff;font-size:2.6rem;
  box-shadow:0 12px 30px rgba(31,191,149,.4);animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1)}}
.succes-carte h1{font-size:2rem;margin-bottom:14px}
.succes-carte p{color:var(--texte-doux);margin-bottom:14px}
.succes-carte .btn{margin-top:14px}

/* =========================================================
   ANIMATIONS AU DÉFILEMENT
   ========================================================= */
.reveler{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveler.vu{opacity:1;transform:translateY(0)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .hero-grille,.bienetre-grille,.produit-grille,.modevie-grille,.commande-grille{
    grid-template-columns:1fr;gap:40px}
  .produit-image{order:-1}
  .modevie-visuel{order:-1}
  .qualite-grille{grid-template-columns:1fr 1fr}
  .pied-grille{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:760px){
  .nav-liens{
    position:fixed;top:72px;right:0;width:min(280px,80%);height:calc(100vh - 72px);
    background:#fff;flex-direction:column;align-items:flex-start;gap:6px;padding:28px 26px;
    box-shadow:-10px 0 40px rgba(14,74,58,.18);transform:translateX(110%);transition:var(--trans);
  }
  .nav-liens.ouvert{transform:translateX(0)}
  .nav-liens a{width:100%;padding:12px 0;border-bottom:1px solid var(--argent)}
  .nav-cta{border-bottom:none!important;margin-top:12px}
  .burger{display:flex}
  .section-pad{padding:60px 0}
  .cookie-banniere{grid-template-columns:1fr}
  .cookie-actions{justify-content:stretch}
  .cookie-actions .btn{flex:1;justify-content:center}
  .pied-bas{justify-content:center;text-align:center}
}
@media (max-width:520px){
  .qualite-grille{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr}
  .hero-atouts{gap:14px}
  .prix-bloc{flex-direction:column;align-items:flex-start}
  .succes-carte{padding:40px 26px}
}