/* ============================================================
   EXOTIC YOGURT — template.css
   ============================================================ */

  /* RESET & BASE */
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    :root {
      --mango:#F7A726; --passion:#E84545; --banana:#F5D547; --aloe:#5DB075;
      --cream:#FFF8EE; --dark:#1C1410; --brown:#5C3D2E; --gray:#8A7060;
      --light:#FEF3E2; --white:#FFFFFF;
      --grad:linear-gradient(135deg,#F7A726 0%,#E84545 100%);
      --radius:16px;
      --shadow:0 8px 32px rgba(92,61,46,.12);
      --shadow-lg:0 20px 60px rgba(92,61,46,.18);
    }
    body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--dark); line-height:1.65; overflow-x:hidden; }

    /* NAV */
    nav { position:fixed; top:0; width:100%; padding:1rem 2rem; z-index:1000; transition:background .4s,box-shadow .4s,transform .3s; }
    nav.scrolled { background:rgba(255,248,238,.96); backdrop-filter:blur(12px); box-shadow:0 2px 20px rgba(92,61,46,.1); }
    nav.hidden { transform:translateY(-100%); }
    .nav-container { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
    .nav-logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
    .nav-logo img { height:52px; border-radius:0; transition:transform .3s; }
    .nav-logo:hover img { transform:rotate(-4deg) scale(1.05); }
    .nav-logo-text { display: none; }
    nav ul { display:flex; list-style:none; gap:1.8rem; align-items:center; }
    nav a { text-decoration:none; color:var(--brown); font-weight:500; font-size:.95rem; transition:color .2s; }
    nav a:hover { color:var(--passion); }
    .nav-cta { background:var(--grad); color:var(--white)!important; padding:.5rem 1.3rem; border-radius:50px; font-weight:600!important; transition:transform .2s,box-shadow .2s!important; }
    .nav-cta:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(232,69,69,.35)!important; }
    .lang-switcher { display:flex; gap:.3rem; align-items:center; }
    .lang-btn { background:none; border:1.5px solid transparent; padding:.22rem .55rem; border-radius:6px; font-size:.78rem; font-weight:700; cursor:pointer; color:var(--gray); transition:all .2s; font-family:'DM Sans',sans-serif; }
    .lang-btn:hover { border-color:var(--mango); color:var(--mango); }
    .lang-btn.active { border-color:var(--passion); color:var(--passion); background:rgba(232,69,69,.07); }
    .mobile-menu-btn { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--brown); }

    /* HERO */
    .hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding:7rem 2rem 4rem; }
    .hero-bg { position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 70% 50%,#FFE0A0 0%,#FFDEDE 40%,#FFF0D4 70%,var(--cream) 100%); }
    .blob { position:absolute; border-radius:50%; filter:blur(60px); }
    .blob-1 { width:500px; height:500px; background:var(--mango); opacity:.4; top:-100px; right:-100px; animation:float1 8s ease-in-out infinite; }
    .blob-2 { width:300px; height:300px; background:var(--passion); opacity:.35; top:40%; right:15%; animation:float2 10s ease-in-out infinite; }
    .blob-3 { width:250px; height:250px; background:var(--aloe); opacity:.3; bottom:10%; left:5%; animation:float1 12s ease-in-out infinite reverse; }
    @keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-30px)} }
    @keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-15px,20px)} }
    .hero-container { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; position:relative; z-index:1; width:100%; }
    .hero-tag { display:inline-block; background:rgba(247,167,38,.15); color:var(--brown); padding:.4rem 1rem; border-radius:50px; font-size:.85rem; font-weight:600; margin-bottom:1.5rem; border:1px solid rgba(247,167,38,.3); animation:fadeUp .6s ease both; }
    .hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2.5rem,5vw,4.2rem); line-height:1.1; font-weight:900; animation:fadeUp .7s ease .1s both; }
    .hero h1 em { font-style:italic; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .hero-sub { font-size:1.05rem; color:var(--gray); margin:1.5rem 0 2.5rem; max-width:500px; animation:fadeUp .7s ease .2s both; }
    .hero-buttons { display:flex; gap:1rem; flex-wrap:wrap; animation:fadeUp .7s ease .3s both; }
    .btn-primary { background:var(--grad); color:var(--white); padding:.85rem 2rem; border-radius:50px; text-decoration:none; font-weight:600; font-size:1rem; border:none; cursor:pointer; transition:transform .2s,box-shadow .2s; display:inline-block; font-family:'DM Sans',sans-serif; }
    .btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(232,69,69,.35); }
    .btn-secondary { background:transparent; color:var(--brown); padding:.85rem 2rem; border-radius:50px; text-decoration:none; font-weight:600; font-size:1rem; border:2px solid var(--brown); transition:all .2s; display:inline-block; }
    .btn-secondary:hover { background:var(--brown); color:var(--white); }
    .hero-visual { display:flex; justify-content:center; align-items:center; position:relative; animation:fadeUp .8s ease .15s both; }
    .hero-logo-wrap { position:relative; width:300px; height:300px; }
    .hero-logo-ring { position:absolute; inset:-20px; border-radius:50%; background:var(--grad); opacity:.1; animation:pulse 3s ease-in-out infinite; }
    .hero-logo-ring-2 { position:absolute; inset:-42px; border-radius:50%; background:var(--grad); opacity:.06; animation:pulse 3s ease-in-out .5s infinite; }
    @keyframes pulse { 0%,100%{transform:scale(1);opacity:.1} 50%{transform:scale(1.08);opacity:.18} }
    .hero-logo-wrap img { width:100%; height:100%; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 20px 40px rgba(232,69,69,.25)); animation:logoFloat 6s ease-in-out infinite; }
    @keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    .fruit-float { position:absolute; font-size:2rem; animation:fruitFloat 5s ease-in-out infinite; filter:drop-shadow(0 4px 8px rgba(0,0,0,.15)); }
    .fruit-float:nth-child(2){top:0;right:-20px;animation-delay:0s}
    .fruit-float:nth-child(3){top:50%;left:-30px;animation-delay:1.2s}
    .fruit-float:nth-child(4){bottom:20px;right:-10px;animation-delay:2.4s}
    .fruit-float:nth-child(5){bottom:0;left:10px;animation-delay:.6s}
    @keyframes fruitFloat { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-15px) rotate(10deg)} }
    @keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

    /* SECTIONS */
    section { padding:5rem 2rem; position:relative; z-index:1; }
    .container { max-width:1200px; margin:0 auto; }
    .section-title { font-family:'Playfair Display',serif; font-size:clamp(1.9rem,3.5vw,2.7rem); font-weight:900; text-align:center; margin-bottom:1rem; }
    .section-sub { text-align:center; color:var(--gray); font-size:1.05rem; max-width:600px; margin:0 auto 3.5rem; }

    /* BENEFITS */
    #bienfaits { background:var(--white); }
    .benefits-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.5rem; }
    .benefit-card { padding:2rem; border-radius:var(--radius); background:var(--cream); border:1.5px solid rgba(247,167,38,.15); transition:transform .3s,box-shadow .3s,border-color .3s; }
    .benefit-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--mango); }
    .benefit-icon { font-size:2.2rem; margin-bottom:1rem; }
    .benefit-card h3 { font-family:'Playfair Display',serif; font-size:1.1rem; color:var(--brown); margin-bottom:.5rem; }
    .benefit-card p { color:var(--gray); font-size:.93rem; }

    /* PRODUCTS */
    #produits { background:var(--light); }
    .products-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem; }
    .product-card { background:var(--white); border-radius:var(--radius); overflow:hidden; position:relative; box-shadow:var(--shadow); transition:transform .3s,box-shadow .3s; }
    .product-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
    .product-img { height:170px; display:flex; align-items:center; justify-content:center; font-size:5rem; position:relative; }
    .product-img-1{background:linear-gradient(135deg,#FFF0B0,#FFD89A)}
    .product-img-2{background:linear-gradient(135deg,#FFE0A0,#FFBCBC)}
    .product-img-3{background:linear-gradient(135deg,#FFD0B0,#FFA07A)}
    .product-img-4{background:linear-gradient(135deg,#C8F0D0,#A0D8AF)}
    .product-badge { position:absolute; top:12px; right:12px; padding:.28rem .7rem; border-radius:50px; font-size:.73rem; font-weight:700; background:var(--grad); color:var(--white); }
    .product-body { padding:1.4rem; }
    .product-body h3 { font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--dark); margin-bottom:.4rem; }
    .product-body p { color:var(--gray); font-size:.9rem; margin-bottom:1rem; }
    /* Options pills */
    .product-opts { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.1rem; }
    .opt-pill { padding:.28rem .75rem; border-radius:20px; font-size:.78rem; font-weight:600; background:rgba(247,167,38,.12); color:var(--brown); border:1.5px solid rgba(247,167,38,.25); }
    .product-cta { width:100%; background:var(--grad); color:var(--white); border:none; padding:.72rem; border-radius:50px; font-weight:600; cursor:pointer; font-size:.93rem; font-family:'DM Sans',sans-serif; transition:opacity .2s,transform .2s; }
    .product-cta:hover { opacity:.9; transform:scale(1.02); }

    /* ORDER */
    #commander { background:var(--white); }
    .order-layout { display:grid; grid-template-columns:1fr 340px; gap:2.5rem; align-items:start; }

    /* Step labels */
    .step-label { font-size:.75rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--gray); margin-bottom:.7rem; margin-top:1.6rem; }
    .step-label:first-of-type { margin-top:0; }

    /* Flavor selector */
    .flavor-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
    .flavor-btn { display:flex; align-items:center; gap:.5rem; background:var(--cream); border-radius:12px; padding:.75rem 1rem; cursor:pointer; border:2px solid transparent; transition:border-color .2s,background .2s; font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:500; color:var(--dark); }
    .flavor-btn:hover { border-color:var(--mango); }
    .flavor-btn.active { border-color:var(--passion); background:rgba(232,69,69,.06); }
    .flavor-emoji { font-size:1.4rem; }

    /* Sub-options */
    .sub-opts-wrap { display:flex; gap:.65rem; flex-wrap:wrap; min-height:40px; }
    .sub-btn { padding:.45rem 1.1rem; border-radius:20px; border:2px solid rgba(247,167,38,.3); background:var(--cream); font-size:.85rem; font-weight:600; cursor:pointer; color:var(--brown); transition:all .2s; font-family:'DM Sans',sans-serif; }
    .sub-btn:hover { border-color:var(--mango); }
    .sub-btn.active { border-color:var(--passion); background:rgba(232,69,69,.08); color:var(--passion); }
    .sub-placeholder { color:var(--gray); font-size:.88rem; font-style:italic; align-self:center; }

    /* Sweeteners */
    .sweetener-list { display:flex; flex-direction:column; gap:.5rem; }
    .sweetener-btn { display:flex; align-items:center; justify-content:space-between; padding:.65rem 1rem; border-radius:12px; border:2px solid transparent; background:var(--cream); cursor:pointer; transition:all .2s; font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:500; color:var(--dark); }
    .sweetener-btn:hover { border-color:var(--mango); }
    .sweetener-btn.active { border-color:var(--passion); background:rgba(232,69,69,.06); }
    .sweetener-price { font-weight:700; color:var(--passion); font-size:.82rem; }

    /* Format selector */
    .format-list { display:flex; flex-direction:column; gap:.55rem; }
    .format-btn { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; border-radius:12px; border:2px solid transparent; background:var(--cream); cursor:pointer; transition:all .2s; font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:500; color:var(--dark); }
    .format-btn:hover { border-color:var(--mango); }
    .format-btn.active { border-color:var(--passion); background:rgba(232,69,69,.06); }
    .format-price { font-weight:700; color:var(--passion); font-size:.82rem; }

    /* Quantity */
    .qty-row { display:flex; align-items:center; gap:1rem; margin-top:.5rem; }
    .qty-label { font-size:.9rem; color:var(--gray); }
    .qty-control { display:flex; align-items:center; gap:.6rem; background:var(--cream); border-radius:10px; padding:.45rem .75rem; border:1.5px solid rgba(247,167,38,.2); }
    .qty-btn { width:28px; height:28px; border-radius:50%; background:var(--grad); color:var(--white); border:none; cursor:pointer; font-size:1rem; font-weight:700; display:flex; align-items:center; justify-content:center; transition:opacity .2s; }
    .qty-btn:hover { opacity:.85; }
    .qty-value { min-width:24px; text-align:center; font-weight:700; color:var(--dark); }

    /* Summary */
    .order-summary { background:var(--cream); border-radius:var(--radius); padding:1.8rem; border:1.5px solid rgba(247,167,38,.25); box-shadow:var(--shadow); position:sticky; top:90px; }
    .summary-title { font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--dark); margin-bottom:1.4rem; }
    .summary-row { display:flex; justify-content:space-between; align-items:flex-start; padding:.5rem 0; border-bottom:1px solid rgba(247,167,38,.15); font-size:.88rem; gap:.5rem; }
    .summary-row:last-of-type { border-bottom:none; }
    .summary-key { color:var(--gray); font-weight:500; white-space:nowrap; }
    .summary-val { color:var(--dark); font-weight:600; text-align:right; }
    .summary-total-row { display:flex; justify-content:space-between; align-items:center; padding-top:1rem; margin-top:.5rem; border-top:2px solid rgba(247,167,38,.2); }
    .summary-total-label { font-weight:700; font-size:1rem; color:var(--dark); }
    .summary-total-price { font-weight:800; font-size:1.3rem; color:var(--passion); }
    .order-btn { width:100%; margin-top:1.3rem; }
    .order-note { font-size:.78rem; color:var(--gray); margin-top:.9rem; line-height:1.5; }

    /* CONTACT */
    #contact { background:var(--light); }
    .contact-wrap { max-width:660px; margin:0 auto; }
    .contact-form { background:var(--white); border-radius:var(--radius); padding:2.8rem; box-shadow:var(--shadow); }
    .form-group { margin-bottom:1.4rem; }
    .form-group label { display:block; margin-bottom:.45rem; font-weight:600; color:var(--dark); font-size:.93rem; }
    .form-group input, .form-group select, .form-group textarea { width:100%; padding:.72rem 1rem; border:1.5px solid rgba(92,61,46,.15); border-radius:10px; font-size:.93rem; font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--dark); transition:border-color .3s; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--mango); background:var(--white); }
    .form-group textarea { resize:vertical; min-height:115px; }
    .error-msg { color:var(--passion); font-size:.8rem; margin-top:.25rem; display:none; }
    .form-group.error input, .form-group.error select, .form-group.error textarea { border-color:var(--passion); }
    .form-group.error .error-msg { display:block; }
    .alert-msg { padding:.9rem; border-radius:10px; margin-bottom:1.4rem; text-align:center; font-weight:600; display:none; }
    .alert-msg.success { background:#d1fae5; color:#065f46; }
    .alert-msg.error-box { background:#fee2e2; color:#991b1b; }

    /* FOOTER */
    footer { background:var(--dark); color:var(--white); padding:4rem 2rem 2rem; }
    .footer-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
    .footer-logo { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
    .footer-logo img { height:38px; border-radius:8px; }
    .footer-logo-text { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; }
    .footer-tagline { color:#A0887A; font-size:.9rem; max-width:270px; }
    .footer-col h4 { font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:#A0887A; font-weight:700; margin-bottom:1rem; }
    .footer-col ul { list-style:none; }
    .footer-col li { margin-bottom:.6rem; }
    .footer-col a { color:#C8B0A5; text-decoration:none; font-size:.9rem; transition:color .2s; }
    .footer-col a:hover { color:var(--mango); }
    .footer-bottom { max-width:1200px; margin:0 auto; border-top:1px solid rgba(255,255,255,.08); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
    .footer-copy { color:#6B5B54; font-size:.86rem; }

    /* COOKIE BANNER */
    #cookieConsent { position:fixed; bottom:0; left:0; right:0; background:rgba(28,20,16,.97); backdrop-filter:blur(12px); z-index:10000; padding:1.4rem 2rem; transform:translateY(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); box-shadow:0 -5px 30px rgba(0,0,0,.4); }
    #cookieConsent.show { transform:translateY(0); }
    .cookie-container { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
    .cookie-text { flex:1; min-width:260px; }
    .cookie-text h3 { font-size:1.05rem; color:var(--white); margin-bottom:.25rem; }
    .cookie-text p { color:rgba(255,255,255,.72); font-size:.87rem; }
    .cookie-buttons { display:flex; gap:.65rem; flex-wrap:wrap; }
    .cookie-btn { padding:.55rem 1.3rem; border-radius:8px; font-size:.88rem; font-weight:600; cursor:pointer; border:none; transition:all .2s; font-family:'DM Sans',sans-serif; }
    .cookie-btn-accept { background:var(--grad); color:var(--white); }
    .cookie-btn-accept:hover { opacity:.9; }
    .cookie-btn-refuse { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.3); }
    .cookie-btn-refuse:hover { background:rgba(255,255,255,.1); }
    .cookie-btn-customize { background:transparent; color:var(--mango); border:1.5px solid var(--mango); }
    .cookie-btn-customize:hover { background:rgba(247,167,38,.15); }

    /* COOKIE MODAL */
    #cookieModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:10001; align-items:center; justify-content:center; padding:2rem; }
    #cookieModal.show { display:flex; }
    .modal-content { background:var(--white); border-radius:var(--radius); max-width:580px; width:100%; padding:2.3rem; box-shadow:var(--shadow-lg); animation:slideIn .3s ease; }
    @keyframes slideIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    .modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; padding-bottom:.9rem; border-bottom:1.5px solid rgba(92,61,46,.1); }
    .modal-header h2 { font-family:'Playfair Display',serif; font-size:1.35rem; }
    .modal-close { background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--gray); }
    .modal-close:hover { color:var(--dark); }
    .cookie-category { background:var(--cream); border-radius:10px; padding:1.1rem; margin-bottom:.9rem; border:1.5px solid rgba(247,167,38,.15); }
    .category-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
    .category-header h3 { font-size:.95rem; font-weight:600; }
    .category-desc { font-size:.85rem; color:var(--gray); }
    .required-badge { background:var(--aloe); color:var(--white); padding:.18rem .55rem; border-radius:20px; font-size:.7rem; font-weight:700; margin-left:.45rem; }
    .toggle-switch { position:relative; width:46px; height:25px; }
    .toggle-switch input { opacity:0; width:0; height:0; }
    .toggle-slider { position:absolute; inset:0; cursor:pointer; background:#CBD5E0; border-radius:26px; transition:.3s; }
    .toggle-slider:before { content:''; position:absolute; height:17px; width:17px; left:4px; bottom:4px; background:var(--white); border-radius:50%; transition:.3s; }
    input:checked + .toggle-slider { background:var(--mango); }
    input:checked + .toggle-slider:before { transform:translateX(21px); }
    input:disabled + .toggle-slider { opacity:.5; cursor:not-allowed; }
    .modal-footer { display:flex; gap:1rem; margin-top:1.4rem; justify-content:flex-end; }

    /* CONFIRM MODAL */
    #confirmModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:10001; align-items:center; justify-content:center; padding:2rem; }
    #confirmModal.show { display:flex; }
    .confirm-box { background:var(--white); border-radius:var(--radius); padding:3rem; max-width:420px; width:100%; text-align:center; box-shadow:var(--shadow-lg); animation:slideIn .3s ease; }
    .confirm-icon { font-size:3.5rem; margin-bottom:1rem; }
    .confirm-box h2 { font-family:'Playfair Display',serif; font-size:1.55rem; margin-bottom:.7rem; }
    .confirm-box p { color:var(--gray); margin-bottom:1.8rem; }

    /* RESPONSIVE */
    @media (max-width:920px) {
      .hero-container { grid-template-columns:1fr; text-align:center; gap:2.5rem; }
      .hero-buttons { justify-content:center; }
      .hero-sub { margin:1.5rem auto 2.5rem; }
      .hero-visual { order:-1; }
      .hero-logo-wrap { width:220px; height:220px; }
      .order-layout { grid-template-columns:1fr; }
      .order-summary { position:static; }
      .footer-grid { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:768px) {
      nav ul { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(255,248,238,.98); padding:1.4rem; box-shadow:var(--shadow); }
      nav ul.active { display:flex; }
      .mobile-menu-btn { display:block; }
      section { padding:3.5rem 1.25rem; }
      .contact-form { padding:1.8rem 1.3rem; }
      .footer-grid { grid-template-columns:1fr; gap:2rem; }
      .footer-bottom { flex-direction:column; text-align:center; }
      .flavor-grid { grid-template-columns:1fr; }
    }