/* ============================================================
   PB-SIN 18 — feuille de style principale
   Palette produit : sarcelle #4FAFAD / vert foncé #115139 /
   gris #5E5E5D / noir / blanc
   Typo : Baloo 2 (titres) + Work Sans (texte courant)
   ============================================================ */

:root{
  --orange:#4FAFAD;
  --orange-dark:#3d8f8d;
  --green:#115139;
  --green-dark:#0b3826;
  --green-light:#7CC4C2;
  --yellow:#5E5E5D;
  --ink:#17150f;
  --ink-soft:#3c3a33;
  --paper:#ffffff;
  --cream:#f7fbfb;
  --mist:#eaf5f4;
  --line:#e2eae9;
  --shadow: 0 18px 40px -20px rgba(17,81,57,.35);
  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --maxw: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  padding-top:75px;
  overflow-x:hidden;
  font-family:"Work Sans", "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Baloo 2", "Work Sans", sans-serif;
  color:var(--green-dark);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:700;
}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem); color:var(--paper);}
h2{font-size:clamp(1.7rem,3vw,2.4rem);}
h3{font-size:1.2rem; color:var(--ink);}
p{margin:0 0 1em;}
a{color:inherit;}
img{max-width:100%; height:auto; display:block;}
ul{margin:0; padding:0;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
[id]{scroll-margin-top:92px;}
.section{padding:88px 0;}
.section--tight{padding:64px 0;}
.section--alt{background:var(--mist);}
.eyebrow{
  display:inline-block;
  font-family:"Baloo 2", sans-serif;
  font-weight:600;
  font-size:.8rem;
  color:var(--orange);
  background:#fdece1;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:14px;
  letter-spacing:.02em;
}
.section-head{max-width:680px; margin-bottom:44px;}
.section-head p{color:var(--ink-soft); font-size:1.05rem;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* Boutons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family:"Baloo 2", sans-serif;
  font-weight:700;
  font-size:1.05rem;
  padding:16px 34px;
  border-radius:999px;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{
  background:var(--orange);
  color:#fff;
  box-shadow:0 14px 28px -12px rgba(226,100,36,.65);
}
.btn-primary:hover{background:var(--orange-dark);}
.btn-secondary{
  background:transparent;
  border-color:rgba(255,255,255,.6);
  color:#fff;
}
.btn-secondary:hover{background:rgba(255,255,255,.12);}
.btn-outline{
  background:transparent;
  border-color:var(--green);
  color:var(--green-dark);
}
.btn-outline:hover{background:var(--green); color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:11px 22px; font-size:.92rem;}

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; padding-bottom:12px; gap:20px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:38px; width:auto;}
.nav-primary{display:flex; align-items:center; gap:30px;}
.nav-primary a{
  text-decoration:none; color:var(--ink); font-weight:600; font-size:.95rem;
  position:relative; padding:4px 0;
}
.nav-primary a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.nav-primary a:hover::after{transform:scaleX(1);}
.header-actions{display:flex; align-items:center; gap:14px;}
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px;}

/* Language switcher */
.lang-switch{position:relative;}
.lang-switch summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px;
  font-weight:600; font-size:.88rem; padding:6px 12px; border:1px solid var(--line);
  border-radius:999px; color:var(--ink); user-select:none;
}
.lang-switch summary::-webkit-details-marker{display:none;}
.lang-switch summary .chev{font-size:.65rem; color:var(--ink-soft); transition:transform .15s ease;}
.lang-switch[open] summary .chev{transform:rotate(180deg);}
.lang-switch summary .flag{font-size:1.05rem; line-height:1;}
.lang-switch .lang-list{
  position:absolute; top:calc(100% + 8px); left:0;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:8px; margin:0; list-style:none;
  min-width:210px; max-height:340px; overflow-y:auto; z-index:90;
  display:grid; gap:2px;
}
.lang-switch .lang-list li a{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  text-decoration:none; color:var(--ink); font-size:.9rem;
}
.lang-switch .lang-list li a:hover{background:var(--mist);}
.lang-switch .lang-list li a.is-current{background:var(--mist); font-weight:700; color:var(--green-dark);}
.lang-switch .lang-list .flag{font-size:1.1rem; line-height:1;}

/* Hero */
.hero{
  position:relative;
  color:#fff;
  padding:120px 0 96px;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url('../img/imagehome.webp');
  background-size:cover;
  background-position:center 38%;
  filter:blur(2px) saturate(1.05);
  transform:scale(1.03);
  z-index:-2;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,56,38,.74) 0%, rgba(17,81,57,.68) 45%, rgba(17,81,57,.62) 72%, rgba(17,81,57,.22) 94%),
    linear-gradient(0deg, #ffffff 0%, rgba(255,255,255,0) 20%);
  z-index:-1;
}
.hero-copy{max-width:680px; margin:0 auto; text-align:center;}
.hero-copy p.lead{
  font-size:1.15rem; color:rgba(255,255,255,.92); max-width:560px; margin-left:auto; margin-right:auto;
}
.hero-cta-row{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin:30px 0 26px;}
.hero-rating{
  display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-weight:600; flex-wrap:wrap;
}
.stars{color:var(--yellow); font-size:1.05rem; letter-spacing:1px; font-family:Arial,"Helvetica Neue",sans-serif;}
.hero-badges{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:26px;
  font-size:.88rem; color:rgba(255,255,255,.85); font-weight:600;
}
.hero-badges span{display:flex; align-items:center; gap:8px;}
.hero-badges .dot{width:7px; height:7px; border-radius:50%; background:var(--yellow); flex:none;}

/* Achat packshot */
.achat-head{display:flex; gap:40px; align-items:center; margin-bottom:44px; flex-wrap:wrap;}
.achat-head .packshot{
  flex:none; width:240px; border-radius:var(--radius-md); box-shadow:var(--shadow);
}
.achat-head .section-head{margin-bottom:0; flex:1; min-width:280px;}

/* Intro / explication produit */
.intro-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;
}
.intro-media{position:relative;}
.intro-media img{border-radius:var(--radius-lg); box-shadow:var(--shadow);}
.intro-media .badge-float{
  position:absolute; bottom:-18px; left:-18px;
  background:var(--paper); border-radius:16px; box-shadow:var(--shadow);
  padding:14px 18px; display:flex; gap:12px; align-items:center;
  font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--green-dark);
}
.intro-media .badge-float .badge-icon{
  width:38px; height:38px; border-radius:50%; background:var(--mist);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  color:var(--green);
}
.intro-block + .intro-block{margin-top:28px;}
.intro-block h3{display:flex; align-items:center; gap:10px;}
.intro-block h3 .ico{
  width:34px; height:34px; border-radius:10px; background:var(--mist);
  display:flex; align-items:center; justify-content:center; color:var(--green); flex:none;
}

/* Bienfaits */
.benefit-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.benefit-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px 22px; text-align:left;
}
.benefit-card .ico{
  width:46px; height:46px; border-radius:13px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  color:#fff;
}
.benefit-card p{color:var(--ink-soft); font-size:.94rem; margin-bottom:.6em;}
.tag-efsa{
  display:inline-block; font-size:.72rem; font-weight:700; color:var(--green-dark);
  background:var(--mist); padding:3px 10px; border-radius:999px; letter-spacing:.02em;
}

/* Ingredients */
.table-wrap{overflow-x:auto; border-radius:var(--radius-md); box-shadow:var(--shadow); margin-bottom:40px;}
table.ingredients{width:100%; border-collapse:collapse; background:var(--paper); min-width:640px;}
table.ingredients thead th{
  background:var(--green-dark); color:#fff; text-align:left; padding:16px 20px;
  font-family:"Baloo 2",sans-serif; font-size:.95rem;
}
table.ingredients tbody td{
  padding:15px 20px; border-bottom:1px solid var(--line); font-size:.95rem; color:var(--ink-soft);
}
table.ingredients tbody tr:last-child td{border-bottom:none;}
table.ingredients tbody tr:nth-child(even){background:#fbfbf7;}
table.ingredients td.ing-name{color:var(--ink); font-weight:700; font-family:"Baloo 2",sans-serif; font-size:.98rem;}
table.ingredients td.ing-dose{white-space:nowrap; color:var(--orange); font-weight:700;}

.ing-detail-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.ing-detail{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:18px 20px;
}
.ing-detail h4{
  font-family:"Baloo 2",sans-serif; color:var(--green-dark); margin:0 0 8px; font-size:1rem;
  display:flex; align-items:center; gap:8px;
}
.ing-detail h4 .swatch{width:10px; height:10px; border-radius:3px; flex:none;}
.ing-detail p{margin:0; font-size:.9rem; color:var(--ink-soft);}

/* Posologie */
.steps{counter-reset:step; display:grid; gap:26px; grid-template-columns:repeat(3,1fr);}
.step{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:30px 24px 26px;
}
.step .step-num{
  counter-increment:step; content:counter(step);
  width:40px; height:40px; border-radius:50%; background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:"Baloo 2",sans-serif;
  font-weight:700; font-size:1.05rem; margin-bottom:16px;
}
.step .step-num::before{content:counter(step);}
.posology-media{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); margin-top:40px;}
.posology-media img{width:100%;}

/* Efficacité */
.eff-wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.eff-media img{border-radius:var(--radius-lg); box-shadow:var(--shadow);}
.eff-list{display:grid; gap:18px; margin-top:8px;}
.eff-item{display:flex; gap:16px; align-items:flex-start;}
.eff-item .check{
  width:30px; height:30px; border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:none; font-size:.95rem; margin-top:2px;
}
.eff-item h4{margin:0 0 4px; font-family:"Baloo 2",sans-serif; color:var(--ink); font-size:1.02rem;}
.eff-item p{margin:0; color:var(--ink-soft); font-size:.94rem;}
.note-callout{
  margin-top:26px; padding:18px 20px; background:var(--mist); border-left:4px solid var(--green);
  border-radius:0 12px 12px 0; font-size:.92rem; color:var(--ink-soft);
}

/* Achat */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
.price-card{
  background:var(--paper); border:2px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 26px; display:flex; flex-direction:column; text-align:center; position:relative;
}
.price-card.featured{
  border-color:var(--orange); box-shadow:0 24px 50px -24px rgba(226,100,36,.5); transform:translateY(-10px);
}
.price-card .ribbon{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--orange); color:#fff; font-family:"Baloo 2",sans-serif; font-weight:700;
  font-size:.78rem; padding:6px 16px; border-radius:999px; white-space:nowrap;
}
.price-card .pack-name{font-family:"Baloo 2",sans-serif; font-size:1.1rem; color:var(--green-dark); margin-bottom:6px;}
.price-card .pack-detail{color:var(--ink-soft); font-size:.9rem; margin-bottom:20px;}
.price-card ul{list-style:none; text-align:left; margin:0 0 24px; display:grid; gap:10px;}
.price-card ul li{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ink-soft);}
.price-card ul li::before{content:"✓"; color:var(--green); font-weight:700;}
.price-card .btn{margin-top:auto;}
.buy-note{
  margin-top:30px; text-align:center; color:var(--ink-soft); font-size:.88rem; max-width:640px; margin-left:auto; margin-right:auto;
}

/* Fabrication */
.fab-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:10px;}
.fab-item{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:24px 20px; text-align:center;
}
.fab-item .ico{
  width:52px; height:52px; border-radius:50%; margin:0 auto 14px; background:var(--mist);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--green-dark);
}
.fab-item h4{font-family:"Baloo 2",sans-serif; margin:0 0 6px; font-size:.98rem; color:var(--ink);}
.fab-item p{margin:0; font-size:.85rem; color:var(--ink-soft);}

/* CTA blocks */
.cta-inline{
  background:linear-gradient(120deg, var(--green-dark), var(--green));
  color:#fff; border-radius:var(--radius-lg); padding:36px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin:64px 0;
}
.cta-inline h3{color:#fff; margin:0 0 6px; font-size:1.3rem;}
.cta-inline p{color:rgba(255,255,255,.85); margin:0; max-width:460px;}
.cta-big{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  padding:64px 40px; text-align:center; color:#fff; isolation:isolate;
}
.cta-big::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg, var(--orange) 0%, var(--green-dark) 100%);
}
.cta-big h2{color:#fff;}
.cta-big p{color:rgba(255,255,255,.9); max-width:560px; margin-left:auto; margin-right:auto;}
.cta-big .stars{margin:8px auto 0; display:block;}

/* FAQ */
.faq-list{display:grid; gap:14px;}
.faq-item{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:20px 24px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; font-family:"Baloo 2",sans-serif; font-weight:600; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; font-size:1.4rem; color:var(--orange); flex:none; transition:transform .2s ease; font-weight:400;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-a{padding:0 24px 22px; color:var(--ink-soft); font-size:.95rem;}

/* Footer */
.site-footer{background:var(--ink); color:#e9e6dc;}
.footer-top{padding:64px 0 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
.footer-brand img{height:36px; width:auto; margin-bottom:14px;}
.footer-brand p{color:#b7b2a1; font-size:.9rem; max-width:280px;}
.footer-col h5{font-family:"Baloo 2",sans-serif; color:#fff; font-size:.95rem; margin:0 0 16px;}
.footer-col ul{display:grid; gap:10px;}
.footer-col a{color:#c8c3b3; text-decoration:none; font-size:.9rem;}
.footer-col a:hover{color:var(--yellow);}
.footer-legal{border-top:1px solid rgba(255,255,255,.12); padding:34px 0;}
.disclaimer-block{display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; margin-bottom:30px;}
.disclaimer-block h6{
  font-family:"Baloo 2",sans-serif; color:var(--yellow); font-size:.82rem; margin:0 0 8px;
  text-transform:none; letter-spacing:.01em;
}
.disclaimer-block p{color:#a7a294; font-size:.8rem; line-height:1.55; margin:0;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; color:#8f8a7c; font-size:.82rem;
}
.footer-bottom a{color:#8f8a7c; text-decoration:underline;}

/* Utility */
.mt-0{margin-top:0;}
.center{text-align:center;}

/* Responsive */
@media (max-width:980px){
  .intro-grid, .eff-wrap{grid-template-columns:1fr;}
  .benefit-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr 1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .price-card.featured{transform:none;}
  .fab-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;}
  .disclaimer-block{grid-template-columns:1fr;}
  .ing-detail-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  body{padding-top:68px;}
  .nav-primary{
    position:fixed; inset:68px 0 0 0; background:var(--paper); flex-direction:column;
    align-items:flex-start; padding:30px 24px; gap:22px; transform:translateX(100%);
    transition:transform .25s ease; overflow-y:auto;
  }
  .nav-primary.is-open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .header-actions .btn-sm{padding:8px 12px; font-size:.72rem; white-space:nowrap;}
  .lang-switch{width:100%;}
  .lang-switch summary{width:fit-content;}
  .lang-switch .lang-list{
    position:static; box-shadow:none; border:none; margin-top:10px; padding:0;
    max-height:none; width:100%; background:transparent;
  }
  .section{padding:60px 0;}
  .steps{grid-template-columns:1fr;}
  .fab-grid{grid-template-columns:1fr 1fr;}
  .cta-inline{flex-direction:column; text-align:center; padding:30px 26px;}
  .footer-top{grid-template-columns:1fr;}
  .hero{padding:96px 0 70px;}
  .benefit-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* Focus visibility */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--yellow); outline-offset:2px;
}