/* Styles des fiches produit : base identique à la page d'accueil + styles propres aux fiches. */

/* Layout : page de drop sur une colonne, sections pleine largeur, contenu limité à 1200px, beaucoup de blanc. */
:root{
  --bg:#FFFFFF;
  --wash:#F4F4F1;
  --ink:#111111;
  --muted:#3A3A3A;
  --line:#E4E4E4;
  --blue:#0F1BD1;
  --blue-deep:#0A129A;
  --cta:#317F0D;        /* vert matcha des boutons : texte blanc = contraste 5:1 (AA) */
  --cta-hover:#276A08;
  --matcha:#2F7A0C;
  --ph:#E9EDE3;
  --ph-ink:#0F1BD1;
  --on-blue:#FFFFFF;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1160px;
  --gutter:clamp(22px,5.5vw,80px);
  --radius:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);border:1.5px solid var(--blue);border-radius:999px;padding:5px 13px;line-height:1.3}  /* pastille contour, comme les étiquettes « 60 pièces » */
.section-head .eyebrow,.waitlist-box .eyebrow{align-self:center}
h1,h2,h3{margin:0;line-height:1.1;text-wrap:balance;font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(28px,3.4vw,40px)}
p{margin:0}
.lead{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:52ch}
section{padding-block:clamp(64px,9vw,112px)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:999px;font:600 15px/1 var(--font);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--cta);color:#fff}
.btn-primary:hover{background:var(--cta-hover)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn[aria-disabled="true"],.btn:disabled{background:var(--wash);color:var(--muted);border-color:var(--line);cursor:default}
.btn-block{width:100%}
.btn{white-space:nowrap}
.card .btn{font-size:clamp(12.5px,1.15vw,15px);padding-inline:14px}

/* Bandeau + header */
.announce{background:var(--blue);color:var(--on-blue);text-align:center;font-size:12px;font-weight:600;letter-spacing:.08em;padding:10px 16px}
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px}
.nav{display:flex;gap:28px;font-size:14px;font-weight:500}
.nav a{text-decoration:none}
.nav a:hover{color:var(--blue)}
.logo img{height:26px;width:auto}
.header-cta{justify-self:end}
.header-cta .btn{min-height:42px;padding:0 18px;font-size:13px}

/* Hero */
.hero{padding-block:0}
.hero .wrap{padding-block:clamp(40px,6vw,80px)}
.hero-copy{max-width:760px}
.hero h1{font-size:clamp(52px,8vw,104px);letter-spacing:-.03em;line-height:.95}
.hero h1 .blue{color:var(--blue)}
.sig-inline{display:inline-block;height:.74em;width:auto;vertical-align:baseline;margin-left:.08em}
.hero-title img{width:clamp(280px,58vw,720px);height:auto;margin-block:4px 2px} /* titre en Allotrope Heavy, vectorisé */

.hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero-banner{width:100%;height:clamp(300px,42vw,620px);overflow:hidden;background:var(--wash)}
.hero-banner img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.status-pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:var(--wash)}
.status-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:440px}
.countdown div{border:1.5px solid var(--ink);border-radius:12px;padding:12px 6px;display:flex;flex-direction:column;align-items:center}
.countdown b{font-size:clamp(26px,3vw,36px);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.countdown span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.countdown div:last-child{border-color:var(--blue);color:var(--blue)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Réassurance */
.trust{border-block:1px solid var(--line);padding-block:0}
.trust ul{list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.trust li{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.trust svg{flex-shrink:0;color:var(--blue)}
.trust li{color:var(--blue);flex-direction:column;gap:8px}
.trust li img{height:clamp(22px,2.4vw,30px);width:auto}  /* mots en Allotrope Heavy, vectorisés */
/* Bandeau défilant (style drop) : mot en Allotrope en haut, précision en dessous, bleu sur blanc */
.marquee{background:var(--bg);border-block:1px solid var(--line);overflow:hidden;padding-block:0}
.mq-track{display:flex;width:max-content;animation:mq 45s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-group{display:flex;align-items:center;flex-shrink:0;padding-block:18px}
.mq-item{display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--blue);font-family:'Eczar',Georgia,serif;font-size:16px;font-weight:500;line-height:1.1;white-space:nowrap}  /* Eczar pour les précisions */
.mq-item{--h:clamp(22px,2.4vw,30px)}
.mq-item img{height:var(--h);width:auto}
.mq-item img.tall{height:calc(var(--h) * 1.4277);margin-top:calc(var(--h) * -.36);margin-bottom:calc(var(--h) * -.0826)}  /* accent du È et queue du Q */
.mq-sep{display:inline-flex;align-items:center;padding-inline:clamp(28px,4vw,56px)}
.mq-sep i{width:9px;height:9px;border-radius:50%;background:var(--blue);opacity:.35;display:block}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none;width:auto;justify-content:center}.mq-track>.mq-group:not(:first-child){display:none}.mq-group{flex-wrap:wrap;justify-content:center;row-gap:10px}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Produits */
.section-head{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;margin-bottom:44px}
#pieces{padding-top:clamp(36px,4.5vw,56px)}
.atelier{padding-bottom:clamp(40px,5vw,64px)}
.ritual{padding-top:clamp(40px,5vw,64px)}  /* moins de vide sous le bandeau de réassurance */
.products{display:block}
/* Deep Green mis en avant : grande carte, accessoires en dessous */
.card.feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:center;margin-bottom:clamp(40px,5vw,64px)}
.card.feature:hover{transform:none}
.feature-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.feature-copy h3{font-family:'Eczar',Georgia,serif;font-weight:600;font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-.015em}
.feature-copy .card-sub{font-size:16px}
.feature-facts{list-style:none;margin:4px 0 0;padding:0;width:100%;border-top:1.5px solid var(--blue)}
.feature-facts li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.feature-facts span{color:var(--muted)}
.feature-facts b{text-align:right}
.feature-price{font-size:28px;font-weight:700;color:var(--blue);margin-top:4px}
.feature-copy .btn{max-width:420px}
.feature-more{font-size:14px;font-weight:600;color:var(--blue)}
.acc-head{display:flex;justify-content:center;margin-bottom:22px}
.acc-head .eyebrow{align-self:center}
.acc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:820px;margin-inline:auto}
@media (max-width:900px){.card.feature{grid-template-columns:1fr;max-width:520px;margin-inline:auto}.acc-grid{grid-template-columns:1fr;max-width:480px}}
.card{display:flex;flex-direction:column;gap:12px;min-width:0}
.card-media{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--wash)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media .slide{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.card-media .slide.on{opacity:1}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s}
.gal-nav.prev{left:10px}.gal-nav.next{right:10px}
.card-media:hover .gal-nav,.gal-nav:focus-visible{opacity:1}
@media (hover:none){.gal-nav{opacity:1;width:36px;height:36px}}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:4px}
.dots button{width:22px;height:22px;border:0;padding:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dots button::before{content:'';width:7px;height:7px;border-radius:50%;background:rgba(19,21,43,.28)}
.dots button[aria-current="true"]::before{background:var(--ink)}
.badge{position:absolute;left:12px;top:12px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(15,27,209,.25)}  /* pastille pleine : se détache des fonds blancs */
.badge{transition:background .3s,color .3s}
.badge.inv{background:#fff;color:var(--blue);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.temp{position:absolute;right:12px;bottom:12px;background:rgba(19,21,43,.72);color:#fff;font-size:10px;font-weight:600;letter-spacing:.06em;padding:4px 8px;border-radius:6px}
.card-row{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.card-sub{font-size:14px;color:var(--muted)}
.card-link{text-decoration:none}
/* Système typo : Allotrope = signature (images), Eczar = titres de section + noms de produits, Montserrat = texte, prix, boutons */
h2,.card-row h3,.pack-copy h3,.steps b,.ritual-grid article>b{font-family:'Eczar',Georgia,serif;font-weight:600;letter-spacing:-.01em}
h2{font-size:clamp(30px,3.8vw,46px);line-height:1.08}
#piecesTitle{font-size:clamp(32px,4vw,50px)}
.card-row h3{font-size:21px!important;line-height:1.15;letter-spacing:0}
.steps b,.ritual-grid article>b{font-size:19px;letter-spacing:0}
.card-row>span{font-family:'Montserrat',sans-serif}
.card-link:hover{text-decoration:underline;text-underline-offset:3px}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--ph);color:var(--ph-ink);font-size:13px;font-weight:500;padding:16px;width:100%;height:100%}

/* Deep Green */
.detail .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.detail-media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.detail-media img{width:100%;height:100%;object-fit:cover}
.detail-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.spec{margin:0;border-top:1.5px solid var(--ink)}
.spec div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec dt{color:var(--muted)}
.spec dd{margin:0;font-weight:600;text-align:right}

/* Atelier */
.atelier{background:var(--wash)}
.atelier-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:40px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.steps li{display:flex;flex-direction:column;gap:10px;min-width:0}
.steps .media{aspect-ratio:4/5;border-radius:12px;overflow:hidden}
.steps b{font-size:15px}
.steps p{font-size:13px;color:var(--muted)}
.step-n{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.08em}

/* Rituel */
.ritual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ritual-grid article{display:flex;flex-direction:column;gap:10px}
.ritual-grid .media{aspect-ratio:4/3;border-radius:12px;overflow:hidden}
.ritual-grid .media img{width:100%;height:100%;object-fit:cover}

/* Liste d'attente */
.waitlist-box{border:1.5px solid var(--ink);border-radius:24px;padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.waitlist-box .countdown{margin-inline:auto}
.form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px}
.form-row{display:flex;gap:8px}
.form input[type=email]{flex:1;min-width:0;height:52px;border-radius:999px;border:1.5px solid var(--line);padding:0 20px;font:500 15px var(--font);color:var(--ink);background:var(--bg)}
.form input[type=email]:focus{border-color:var(--blue);outline:none}
.form input[type=email]{flex:1 1 auto}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--muted);text-align:left}
.consent input{margin-top:3px;accent-color:var(--blue)}
.form-msg{font-size:14px;font-weight:600;color:var(--blue);min-height:1.2em}

/* Pack des 3 pièces */
.pack{margin-top:32px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;border:1.5px solid var(--blue);border-radius:20px;padding:clamp(16px,2.4vw,28px)}
.pack-media{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pack-media div{aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--wash)}
.pack-media img{width:100%;height:100%;object-fit:cover}
.pack-media.single{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#F8F8F8}
.pack-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.pack-copy h3{font-size:clamp(24px,2.4vw,32px)}
.pack-copy ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
.pack-copy li::before{content:'+ ';color:var(--blue);font-weight:700}
.pack-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pack-price b{font-size:24px;color:var(--blue)}
.pack-price s{color:var(--muted);font-size:15px}
.gift{color:var(--cta);font-weight:700}
.save{background:var(--cta);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:999px}
.pack .btn{min-width:260px}
.pack>*{min-width:0}
@media (max-width:900px){.pack{grid-template-columns:1fr;max-width:480px;margin-inline:auto}.pack .btn{width:100%;min-width:0;font-size:clamp(12.5px,3.6vw,15px);padding-inline:14px}}

/* FAQ */
.faq{max-width:800px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:20px;line-height:1;color:var(--blue)}
.faq details[open] summary::after{content:'−'}
.faq details p{padding:0 0 20px;color:var(--muted);max-width:65ch}

/* Footer */
.footer{background:var(--wash);padding-block:48px 32px}
.footer .wrap{display:flex;flex-direction:column;gap:28px}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.footer-cols{display:flex;flex-wrap:wrap;gap:48px;font-size:14px}
.footer-cols div{display:flex;flex-direction:column;gap:8px}
.footer-cols b{font-size:13px}
.footer-cols a{text-decoration:none;color:var(--muted)}
.footer-cols a:hover{color:var(--blue)}
.footer small{color:var(--muted);border-top:1px solid var(--line);padding-top:18px}

/* Titres et typos fortes en bleu, petites typos en noir */
h1,h2,h3,.card-row,.countdown b,.steps b,.ritual-grid article>b,.faq summary,.footer-cols b{color:var(--blue)}
.countdown div,.waitlist-box,.spec{border-color:var(--blue)}
.btn-ghost{color:var(--blue);border-color:var(--blue)}
.btn-ghost:hover{background:var(--blue);color:var(--on-blue)}
.nav,.nav a,.nav-dd-btn{color:var(--blue)}
.nav a:hover,.nav-dd-btn:hover{text-decoration:underline;text-underline-offset:4px}

/* Menu déroulant « Les produits » */
.nav{align-items:center}
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.nav-dd-btn:hover,.nav-dd-btn[aria-expanded="true"]{color:var(--blue)}
.nav-dd-btn svg{transition:transform .2s}
.nav-dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd{position:absolute;left:-14px;top:calc(100% + 14px);min-width:260px;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(15,27,209,.12);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:40}
.dd[hidden]{display:none}
.dd::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.dd a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--blue)}
.dd a:hover,.dd a:focus-visible{background:var(--wash)}
.dd img{width:40px;height:50px;object-fit:cover;border-radius:6px;background:var(--wash)}
.dd .dd-all{font-weight:500;font-size:13px;color:var(--ink);border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;padding:12px 8px 6px}

/* Sélecteur d'aperçu (retiré en production) */
.preview-bar{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--ink);color:#fff;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;font-size:12px;box-shadow:0 10px 30px rgba(19,21,43,.25)}
.preview-bar[hidden]{display:none}
.preview-bar span{font-weight:600;opacity:.8;padding-inline:4px}
.preview-bar div{display:flex;gap:6px}
.preview-bar button{font:600 12px var(--font);border:0;border-radius:8px;padding:8px 10px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.preview-bar button[aria-pressed="true"]{background:#fff;color:var(--ink)}

/* Hero photo : canette à droite, textes en blanc à gauche */
.hero{position:relative;background:linear-gradient(90deg,rgba(6,12,110,.5) 0%,rgba(6,12,110,.32) 34%,rgba(6,12,110,0) 52%),url("assets/hero-deep-green.webp") right center/cover no-repeat;background-color:#0A16A8;color:#fff}
.hero .wrap{display:flex;justify-content:flex-start}
@media (min-width:1181px){.hero .wrap,.header .wrap{max-width:none;padding-inline:clamp(48px,6.5vw,140px)}}  /* sur grand écran, menu et texte du haut calés à gauche */
.hero-copy{max-width:500px}
.hero .hero-actions{flex-wrap:nowrap}
.hero-photo{display:none}
.hero-title img{width:min(100%,470px)}
.hero .lead{color:rgba(255,255,255,.92)}
.hero .eyebrow{color:#fff;border:0;padding:0;border-radius:0;font-size:12px;letter-spacing:.18em}
.hero .status-pill{background:rgba(255,255,255,.16);color:#fff}
.hero .status-pill .dot{background:#fff}
.hero .countdown div{border-color:rgba(255,255,255,.75);color:#fff}
.hero .countdown div:last-child{border-color:#fff;background:rgba(255,255,255,.12)}
.hero .countdown b{color:#fff}
.hero .countdown span{color:rgba(255,255,255,.85)}
.hero .btn-primary{background:var(--cta);color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
.hero .btn-primary:hover{background:var(--cta-hover)}
.hero .btn-ghost{color:#fff;border-color:#fff}
.hero .btn-ghost:hover{background:#fff;color:var(--blue)}
.hero .btn[disabled]{background:rgba(255,255,255,.2);color:#fff;border-color:transparent}
.hero :focus-visible{outline-color:#fff}
@media (max-width:1180px){
  .hero{background:linear-gradient(90deg,rgba(6,12,110,.78) 0%,rgba(6,12,110,.55) 45%,rgba(6,12,110,0) 75%),url("assets/hero-deep-green.webp") 72% center/cover no-repeat;background-color:#0A16A8}
}
@media (max-width:700px){
  .hero{background:linear-gradient(180deg,rgba(10,22,168,0) 0,rgba(10,22,168,0) 170px,rgba(10,22,168,.85) 300px,#0A16A8 380px),url("assets/hero-deep-green.webp") 94% top/auto 380px no-repeat;background-color:#0A16A8}
  .hero .wrap{padding-top:230px}
  .hero-copy{max-width:none}
  .hero .hero-actions{flex-wrap:wrap}
}

/* Bouton « remonter en haut » */
.to-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;width:48px;height:48px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(15,27,209,.28);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .25s,background .2s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--blue-deep)}
.to-top:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.has-preview .to-top{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
@media (max-width:900px){.has-sticky .to-top{bottom:calc(84px + env(safe-area-inset-bottom,0px))}.has-sticky.has-preview .to-top{bottom:calc(176px + env(safe-area-inset-bottom,0px))}}

/* ===== Animations douces (essai 1) ===== */
#liste{scroll-margin-top:92px}
@media (max-width:900px){#liste{scroll-margin-top:76px}}
body.fx1 .btn{transition:background .2s,color .2s,border-color .2s,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
body.fx1 .btn:not([disabled]):hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,27,209,.18)}
body.fx1 .countdown b{display:inline-block}
body.fx1 [data-cd].tk{animation:cdTick .45s cubic-bezier(.2,.7,.2,1)}
@keyframes cdTick{from{transform:translateY(-40%);opacity:0}to{transform:none;opacity:1}}
body.fx1 .hero-copy>*{opacity:0;transform:translateY(22px)}
body.fx1.hero-in .hero-copy>*{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
body.hero-in .hero-copy>*:nth-child(2){transition-delay:.12s}
body.hero-in .hero-copy>*:nth-child(3){transition-delay:.24s}
body.hero-in .hero-copy>*:nth-child(4){transition-delay:.36s}
body.hero-in .hero-copy>*:nth-child(5){transition-delay:.48s}
body.fx1 .rv{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 110ms)}
body.fx1 .rv.in{opacity:1;transform:none}
body.fx1 .card-media img{transition:opacity .35s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
body.fx1 .card:hover .card-media img{transform:scale(1.045)}
body.fx1 .card{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
body.fx1 .card:hover{transform:translateY(-4px)}
body.fx1 .ritual-grid .media img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
body.fx1 .ritual-grid article:hover .media img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){body.fx1 .rv,body.fx1 .hero-copy>*{opacity:1!important;transform:none!important;transition:none!important}}

/* Bloc liste d'attente : fond bleu électrique, textes blancs, bouton vert conservé */
.waitlist-box{background:var(--blue);border-color:var(--blue)!important;color:#fff}
.waitlist-box h2{color:#fff}
.waitlist-box .lead{color:rgba(255,255,255,.9)}
.waitlist-box .eyebrow{color:#fff;border-color:#fff}
.waitlist-box .countdown div{border-color:rgba(255,255,255,.7)}
.waitlist-box .countdown div:last-child{border-color:#fff;background:rgba(255,255,255,.12)}
.waitlist-box .countdown b{color:#fff}
.waitlist-box .countdown span{color:rgba(255,255,255,.85)}
.waitlist-box .form input[type=email]{border-color:#fff}
.waitlist-box .form input[type=email]:focus{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.waitlist-box .btn-primary{box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
.waitlist-box .consent{color:rgba(255,255,255,.88)}
.waitlist-box .consent a{color:#fff}
.waitlist-box .consent input{accent-color:#7CC420}
.waitlist-box .form-msg{color:#fff!important}
.waitlist-box :focus-visible{outline-color:#fff}

/* ===== Plus de bleu électrique ===== */
/* 1 · pied de page bleu */
.footer{background:var(--blue);color:#fff}
.footer .footer-cols b{color:#fff}
.footer .footer-cols a,.footer span,.footer span a{color:rgba(255,255,255,.88)!important}
.to-top{border:2px solid #fff}
.footer .footer-cols a:hover{color:#fff;text-decoration:underline}
.footer small{color:rgba(255,255,255,.75);border-top-color:rgba(255,255,255,.25)}
.footer :focus-visible{outline-color:#fff}
/* 2 · section gyokuro sur fond bleu */
.detail{background:var(--blue);color:#fff}
.detail h2{color:#fff}
.detail .lead{color:rgba(255,255,255,.9)}
.detail .eyebrow{color:#fff;border-color:#fff}
.detail .spec{border-top-color:#fff!important}
.detail .spec div{border-bottom-color:rgba(255,255,255,.35)}
.detail .spec div{font-size:15px}
.detail .spec dt{color:#fff;font-weight:500}  /* 10:1, niveau AAA */
.detail .spec dd{color:#fff}
.detail .btn[disabled]{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5)}
.detail .btn-primary{box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
/* 3 · atelier sur bleu très pâle + 5 · cases photo en attente bleutées */
.atelier{background:#EEF0FD}
:root{--ph:#DCE0FA;--ph-ink:#0F1BD1}
/* 4 · bandeau défilant bleu, mots en blanc */
.marquee{background:var(--blue)!important;border-color:var(--blue)!important}
.mq-item{color:#fff!important}
.mq-sep i{background:#fff!important}

/* Qui est derrière Machi Matcha */
.founder .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center}
.founder-media{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--ph)}
.founder-media img{width:100%;height:100%;object-fit:cover}
.founder-copy{display:flex;flex-direction:column;gap:18px;max-width:540px}
.founder-sign{font-family:'Eczar',Georgia,serif;font-size:20px;font-weight:600;color:var(--blue);margin-top:6px}
.ph{flex-direction:column}
.ph small{display:block;margin-top:6px;opacity:.8;max-width:26ch}
/* Vidéos des réseaux */
.reels{background:#EEF0FD}
.reels-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.reel{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--blue);scroll-snap-align:start;display:block;color:#fff;text-decoration:none}
.reel video,.reel img{width:100%;height:100%;object-fit:cover;display:block}
.reel .cap{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(6,12,110,.85));font-size:13px;font-weight:600;line-height:1.35}
.reel .play{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--blue);display:grid;place-items:center}
.reel.soon{background:repeating-linear-gradient(135deg,#DCE0FA 0 14px,#E6E9FC 14px 28px);color:var(--blue);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;font-weight:600;font-size:13px}
.reel.soon svg{opacity:.7}
.reels-links{margin-top:22px;text-align:center;font-size:14px}
.reels-links a{color:var(--blue);font-weight:600}
@media (max-width:900px){.founder .wrap{grid-template-columns:1fr}.founder-media{max-width:480px}.reels-track{grid-auto-columns:62%}}
/* Nombre d'inscrits */
.count-line{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.count-dots{display:inline-flex}
.count-dots i{width:22px;height:22px;border-radius:50%;border:2px solid currentColor;margin-left:-7px;background:#7CC420}
.count-dots i:nth-child(2){background:#fff}
.count-dots i:nth-child(3){background:#317F0D}
.count-dots i:first-child{margin-left:0}
.hero .count-line{color:#fff;margin-top:-4px}
.hero .count-dots i{border-color:#0A16A8}
.waitlist-box .count-line{color:#fff}
.waitlist-box .count-dots i{border-color:var(--blue)}

/* Blocs de réassurance */
.reassure{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.reassure li{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;background:#EEF0FD}
.reassure li>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.reassure b{color:var(--blue);font-size:15px}
.reassure span{font-size:13.5px;line-height:1.45;color:var(--ink)}
.reassure a{color:var(--blue);font-weight:600}
.ra-ic{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--blue);display:grid;place-items:center}
.ra-ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pay{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.pay i{font-style:normal;font-size:11px;font-weight:700;color:var(--blue);background:#fff;border-radius:6px;padding:3px 7px}
@media (max-width:1000px){.reassure{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.reassure{grid-template-columns:1fr}}

/* Compte à rebours en chiffres Allotrope (vectorisés), sans cases */
.countdown.allo{display:flex;align-items:flex-end;gap:0;max-width:none}
.countdown.allo div{border:0!important;background:none!important;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.countdown.allo div+div{margin-left:clamp(26px,3vw,40px);position:relative}
.countdown.allo div{color:inherit!important}
.countdown.allo div+div::before{content:':';position:absolute;left:calc(clamp(26px,3vw,40px) * -.62);top:calc(clamp(40px,4.6vw,58px) / 2);transform:translate(-50%,-50%);font-weight:900;font-size:clamp(28px,3.2vw,40px);line-height:1;opacity:.55}
.countdown.allo b{display:flex!important;flex-direction:row;gap:2px;height:clamp(40px,4.6vw,58px);animation:none!important}
.countdown.allo b svg{height:100%;width:auto;display:block}
.countdown.allo span{font-size:11px;letter-spacing:.14em}
.waitlist-box .countdown.allo{justify-content:center}
@media (max-width:480px){.waitlist-box .countdown.allo b{height:32px}.waitlist-box .countdown.allo div+div{margin-left:22px}.waitlist-box .countdown.allo div+div::before{left:-13px;top:16px;font-size:24px}}

/* Menu mobile (burger) */
.header-cta{display:flex;align-items:center;gap:8px}
.burger{display:none;width:44px;height:44px;flex:none;border:1.5px solid var(--blue);border-radius:999px;background:none;color:var(--blue);align-items:center;justify-content:center;cursor:pointer;padding:0}
.burger svg{display:block}
.burger .x{display:none}
.burger[aria-expanded="true"]{background:var(--blue);color:#fff}
.burger[aria-expanded="true"] .l{display:none}
.burger[aria-expanded="true"] .x{display:block}
.mnav{position:fixed;left:0;right:0;bottom:0;top:64px;z-index:25;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;padding:18px var(--gutter,16px) calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:22px;animation:mnavIn .22s ease-out}
.mnav[hidden]{display:none}
@keyframes mnavIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav .m-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.mnav .m-prods a{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--blue);font-family:'Eczar',Georgia,serif;font-size:20px;font-weight:600;line-height:1.2}
.mnav .m-prods img{width:52px;height:64px;object-fit:cover;border-radius:8px;background:var(--wash);flex:none}
.mnav .m-prods a::after,.mnav .m-links a::after{content:'→';margin-left:auto;font-family:'Montserrat',sans-serif;font-size:16px;opacity:.6}
.mnav .m-all{font-size:14px;font-weight:600;color:var(--blue);padding-top:12px;display:inline-block}
.mnav .m-links a{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--blue);font-family:'Eczar',Georgia,serif;font-size:24px;font-weight:600}
.mnav .m-cta{width:100%;justify-content:center}
.mnav .m-soc{font-size:14px;color:var(--muted);text-align:center}
.mnav .m-soc a{color:var(--blue);font-weight:600}
body.menu-open{overflow:hidden}
body.menu-open .to-top,body.menu-open .sticky-buy,body.menu-open .preview-bar{display:none!important}
@media (max-width:900px){.burger{display:inline-flex}}
@media (max-width:360px){.header-cta .btn{padding:0 12px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.mnav{animation:none}}

/* Accueil mobile : « affiche » (piste C) */
.hero-date,.hero-lead-s,.hero-video{display:none}
@media (max-width:700px){
  .announce{display:none}
  .hero[data-state="pre"]{min-height:calc(100svh - 64px);display:flex;overflow:hidden;background:#0A16A8 url("assets/hero-mobile-poster.webp") center top/100% auto no-repeat}
  .hero[data-state="pre"] .hero-video{display:block;position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:720/776;object-fit:cover;z-index:0}
  .hero[data-state="pre"]::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,22,168,0) 0,rgba(10,22,168,0) 32%,rgba(10,22,168,.9) 49%,#0A16A8 54%)}
  .hero[data-state="pre"] .wrap{position:relative;z-index:1}
  .hero[data-state="pre"] .wrap{padding-top:0;padding-bottom:24px;display:flex;align-items:flex-end;width:100%}
  .hero[data-state="pre"] .hero-copy{gap:14px}
  .hero[data-state="pre"] #heroCountdownWrap,.hero[data-state="pre"] .hero-actions .btn-ghost{display:none!important}
  .hero[data-state="pre"] .hero-actions .btn{width:100%;justify-content:center}
  .hero[data-state="pre"] .status-pill{align-self:flex-start}
  .hero[data-state="pre"] .hero-title img{width:100%}
  .hero-lead-l{display:none}.hero-lead-s{display:inline}
  .hero[data-state="pre"] .hero-date{display:block;margin:0;font-weight:700;font-size:15px;color:#fff}
  .hero[data-state="pre"] .count-line{font-size:13px;margin-top:0}
}

/* Accueil ordinateur : vidéo plein écran derrière le texte */
.hero-media{display:none}
@media (min-width:701px){
  .hero{background:#0A16A8;overflow:hidden;min-height:min(calc(100svh - 110px),820px);display:flex;align-items:center}
  .hero .wrap{position:relative;z-index:1;width:100%}
  .hero-media{display:block;position:absolute;inset:0;z-index:0;background:#0A16A8 url("assets/hero-desktop-poster.webp") right center/cover no-repeat}
  .hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
  .hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,16,140,.85) 0,rgba(8,16,140,.55) 30%,rgba(8,16,140,0) 46%)}
}

@media (min-width:701px) and (max-width:1180px){.hero-media::after{background:linear-gradient(90deg,rgba(8,16,140,.88) 0,rgba(8,16,140,.7) 36%,rgba(8,16,140,0) 54%)}}

/* Section gyokuro : fond blanc, bloc de texte entouré d'un trait bleu fin, étiquette posée sur le trait */
.detail{background:#fff;color:var(--ink)}
.detail h2{color:var(--blue)}
.detail .lead{color:var(--ink)}
.detail .eyebrow{color:var(--blue);border-color:var(--blue)}
.detail .spec{border-top-color:var(--blue)!important}
.detail .spec div{border-bottom-color:#D9DCF7}
.detail .spec dt{color:var(--blue)}
.detail .spec dd{color:var(--ink)}
.detail .btn[disabled]{background:var(--wash);color:var(--ink);border-color:transparent}
.detail .btn-primary{box-shadow:none}
.detail-copy{border:1.5px solid var(--blue);border-radius:20px;padding:clamp(28px,3vw,44px) clamp(24px,3vw,40px) clamp(24px,3vw,40px);position:relative}
.detail-copy>.eyebrow{position:absolute;top:0;left:28px;transform:translateY(-50%);background:#fff;padding:5px 12px;margin:0}

/* Atelier : fond bleu électrique + logo rond agrandi en bleu clair discret, étapes en cartes blanches */
.atelier{position:relative;overflow:hidden;background:#0F1BD1;isolation:isolate}
.atelier::before,.atelier::after{content:'';position:absolute;z-index:-1;background:url("assets/logo-forme.webp") center/contain no-repeat;opacity:.5;pointer-events:none}
.atelier::before{width:clamp(520px,58vw,920px);aspect-ratio:1200/1322;right:-12%;top:-42%;transform:rotate(14deg)}
.atelier::after{width:clamp(480px,50vw,820px);aspect-ratio:1200/1322;left:-16%;bottom:-55%;transform:rotate(-18deg)}
.atelier h2{color:#fff}
.atelier .eyebrow{color:#fff;border-color:#fff}
.atelier .lead{color:rgba(255,255,255,.92)}
.atelier .sig-inline{filter:brightness(0) invert(1)}
.atelier .steps li{background:#fff;border-radius:18px;padding:12px 12px 18px;box-shadow:0 18px 40px rgba(4,8,90,.3)}
.atelier .steps .media{border-radius:10px}
.atelier .steps li>*:not(.media){padding-inline:6px}
.atelier .steps p{color:#555}
@media (max-width:900px){.atelier::before{width:620px;right:-55%;top:-10%}.atelier::after{width:560px;left:-60%;bottom:-25%}.atelier .steps{padding:4px 2px 18px}}

/* Responsive */
@media (max-width:900px){
  .header .wrap{grid-template-columns:auto 1fr;height:64px}
  .nav{display:none}
  .detail .wrap,.atelier-head{grid-template-columns:1fr}
  .hero-banner{height:clamp(260px,70vw,420px)}
  .trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .steps li{scroll-snap-align:start}
  .ritual-grid{grid-template-columns:1fr}
  .form-row{flex-direction:column}
}

/* Menu déroulant « Les produits » */
.nav{align-items:center}
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.nav-dd-btn:hover,.nav-dd-btn[aria-expanded="true"]{color:var(--blue)}
.nav-dd-btn svg{transition:transform .2s}
.nav-dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd{position:absolute;left:-14px;top:calc(100% + 14px);min-width:260px;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(15,27,209,.12);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:40}
.dd[hidden]{display:none}
.dd::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.dd a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--blue)}
.dd a:hover,.dd a:focus-visible{background:var(--wash)}
.dd img{width:40px;height:50px;object-fit:cover;border-radius:6px;background:var(--wash)}
.dd .dd-all{font-weight:500;font-size:13px;color:var(--ink);border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;padding:12px 8px 6px}

/* Bouton « remonter en haut » */
.to-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;width:48px;height:48px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(15,27,209,.28);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .25s,background .2s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--blue-deep)}
.to-top:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.has-preview .to-top{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
@media (max-width:900px){.has-sticky .to-top{bottom:calc(84px + env(safe-area-inset-bottom,0px))}.has-sticky.has-preview .to-top{bottom:calc(176px + env(safe-area-inset-bottom,0px))}}

/* ================= FICHES PRODUIT ================= */
.crumbs{font-size:13px;color:var(--muted);padding-top:24px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.pdp{padding-block:24px clamp(56px,8vw,96px)}
.pdp .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}

/* Galerie : grande image + vignettes */
.gallery{display:flex;flex-direction:column;gap:12px}
.g-main{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--wash)}
.g-main > img,.g-main > .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.g-main > .on{opacity:1}
.g-main .gal-nav{opacity:1}
.g-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.g-thumbs button{aspect-ratio:1;border-radius:10px;overflow:hidden;border:1.5px solid transparent;padding:0;background:var(--ph);cursor:pointer;font:500 10px/1.3 var(--font);color:var(--ph-ink)}
.g-thumbs button[aria-current="true"]{border-color:var(--blue)}
.g-thumbs img{width:100%;height:100%;object-fit:cover}
.ph{flex-direction:column}
.ph small{display:block;margin-top:6px;opacity:.8;max-width:24ch}

/* Colonne d'infos (collante sur grand écran) */
.buy{display:flex;flex-direction:column;gap:20px}
/* la galerie suit le défilement pendant qu'on lit la colonne d'infos : pas de vide sous les photos */
.gallery{position:sticky;top:96px;align-self:start}
.buy h1{font-size:clamp(34px,4vw,52px);letter-spacing:-.02em}
/* Titres secondaires en Eczar */
.howto b,.xsell h3,.c-card h2{font-family:'Eczar',Georgia,serif;font-weight:600;letter-spacing:0}
.howto b{font-size:19px}
.xsell h3{font-size:19px!important}
.contact h1{font-family:'Eczar',Georgia,serif;font-weight:600;letter-spacing:-.015em}
/* Signature : nom du produit en Allotrope Heavy (vectorisé) */
.sig{--cap:clamp(34px,3.8vw,54px);line-height:0}
.sig img{width:auto;max-width:100%;object-fit:contain;object-position:left center}
.buy .price{font-size:22px;font-weight:600;color:var(--blue)}
.buy .lead{max-width:none}
.stock{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.stock .dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.buy-note{font-size:13px;color:var(--muted);margin-top:-8px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.facts div{background:var(--bg);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.facts span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts b{font-size:14px;font-weight:600}
.assure{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px}
.assure li{display:flex;gap:10px;align-items:center}
.assure svg{color:var(--blue);flex-shrink:0}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-weight:600;font-size:15px;color:var(--blue)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-size:20px;line-height:1}
.acc details[open] summary::after{content:'−'}
.acc .acc-body{padding:0 0 18px;font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:10px}

/* Blocs image / texte alternés */
.story{display:flex;flex-direction:column;gap:clamp(48px,7vw,88px)}
.story-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.story-row:nth-child(even) .story-media{order:2}
.story-media{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--wash)}
.story-media img{width:100%;height:100%;object-fit:cover}
.story-copy{display:flex;flex-direction:column;gap:16px;max-width:460px}

/* Cultivars */
.cv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cv-grid article{background:#EEF0FD;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.cv-grid h3{font-family:'Eczar',Georgia,serif;font-weight:600;font-size:24px;color:var(--blue)}
.cv-grid p{font-size:15px;line-height:1.55}
/* Comparatif matcha / gyokuro : tableau en carte bleue sur fond bleu pâle */
.compare{background:#EEF0FD}
.cmp-wrap{overflow-x:auto;background:var(--blue);border-radius:20px;padding:10px 10px 6px;box-shadow:0 14px 34px rgba(15,27,209,.22);max-width:980px;margin-inline:auto}
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:560px;font-size:15.5px;line-height:1.55;color:#fff}
.cmp th,.cmp td{padding:16px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,.22);vertical-align:top}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{font-family:'Eczar',Georgia,serif;font-size:21px;font-weight:600;border-bottom:1.5px solid rgba(255,255,255,.7)}
.cmp tbody th{font-weight:700;white-space:nowrap;font-size:14px}
.cmp td{color:rgba(255,255,255,.88)}
.cmp td:last-child,.cmp thead th:last-child{background:#fff;color:var(--blue)}
.cmp td:last-child{font-weight:600;border-bottom-color:var(--line)}
.cmp thead th:last-child{border-radius:12px 12px 0 0;border-bottom-color:var(--blue)}
.cmp tbody tr:last-child td:last-child{border-radius:0 0 12px 12px}
@media (max-width:640px){.cmp-wrap{padding:6px 12px}.cmp{min-width:0}.cmp thead{display:none}.cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block}.cmp tr{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.22)}.cmp tbody tr:last-child{border-bottom:0}.cmp th,.cmp td{border:0!important;padding:0}.cmp tbody th{font-family:'Eczar',Georgia,serif;font-size:19px;font-weight:600;white-space:normal;margin-bottom:8px}.cmp td::before{content:attr(data-l);display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.75;margin-bottom:2px}.cmp td:last-child{border-radius:10px!important;margin-top:10px;padding:10px 12px}}
/* Tableau matcha / gyokuro : fond bleu électrique avec le logo rond agrandi (bleu clair, discret), tableau blanc + étiquette */
.compare{position:relative;overflow:hidden;background:#0F1BD1;isolation:isolate}
.compare::before,.compare::after{content:'';position:absolute;z-index:-1;background:url("logo-forme.webp") center/contain no-repeat;opacity:.5;pointer-events:none}
.compare::before{width:clamp(520px,62vw,980px);aspect-ratio:1200/1322;left:-14%;top:-38%;transform:rotate(-14deg)}
.compare::after{width:clamp(480px,55vw,860px);aspect-ratio:1200/1322;right:-16%;bottom:-48%;transform:rotate(16deg)}
.compare .section-head h2{color:#fff}
.compare .section-head .eyebrow{color:#fff;border-color:#fff}
.cmp-wrap{background:#fff;border:0;border-radius:22px;box-shadow:0 24px 60px rgba(4,8,90,.35);padding:30px 10px 6px;position:relative;overflow:visible}
.cmp-wrap::before{content:'Matcha vs Deep Green';position:absolute;top:0;left:28px;transform:translateY(-50%);background:#fff;color:var(--blue);border:1.5px solid var(--blue);border-radius:999px;padding:5px 13px;font:700 11px 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.cmp{color:var(--ink)}
.cmp th,.cmp td{border-bottom:1px solid #D9DCF7}
.cmp thead th{color:var(--blue);border-bottom:1.5px solid var(--blue)}
.cmp tbody th{color:var(--blue)}
.cmp td{color:#333}
.cmp td:last-child,.cmp thead th:last-child{background:#fff;color:var(--blue)}
.cmp td:last-child{border-bottom-color:#D9DCF7}
@media (max-width:640px){.compare::before{width:640px;left:-60%;top:-12%}.compare::after{width:560px;right:-70%;bottom:-14%}.cmp-wrap{padding:26px 16px 4px}.cmp tr{border-bottom:1px solid #D9DCF7}.cmp td::before{color:var(--blue);opacity:1}.cmp td:last-child{background:#EEF0FD}}
/* Tableau mobile : deux colonnes côte à côte (Matcha | Deep Green) */
@media (max-width:640px){
.compare .cmp thead{display:block}
.compare .cmp thead tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:2px 0 10px;border-bottom:1.5px solid var(--blue)}
.compare .cmp thead th:first-child{display:none}
.compare .cmp thead th{display:block;padding:0 4px;border:0!important;background:none!important;font-size:17px;border-radius:0!important}
.compare .cmp tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 0}
.compare .cmp tbody th{grid-column:1/-1;margin:0 0 2px!important;font-size:17px}
.compare .cmp td{display:block;padding:10px 11px!important;margin:0!important;font-size:13.5px;line-height:1.45;border-radius:10px!important}
.compare .cmp td::before{display:none!important}
.compare .cmp td:first-of-type{background:#F4F5FB;color:#444}
.compare .cmp td:last-child{background:#EEF0FD;color:var(--blue)}
}
@media (max-width:900px){.cv-grid{grid-template-columns:1fr}}

/* Mode d'emploi en 3 temps */
.howto{background:var(--wash)}
.howto ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.howto li{display:flex;flex-direction:column;gap:10px}
.howto .media{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--ph)}
.howto .media img{width:100%;height:100%;object-fit:cover}
.howto b{color:var(--blue);font-size:16px}
.howto p{font-size:14px;color:var(--muted)}

/* Complète ton rituel */
.xsell{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:820px;margin-inline:auto}
.xsell a{text-decoration:none;display:flex;flex-direction:column;gap:10px}
.xsell .media{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--wash)}
.xsell img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.xsell a:hover img{transform:scale(1.03)}

/* Barre d'achat collante (mobile) */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));display:none;align-items:center;gap:12px;transform:translateY(100%);transition:transform .25s}
.sticky-buy.show{transform:none}
.x-price{white-space:nowrap}
.sticky-buy .t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.sticky-buy .t b{color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy .btn{min-height:46px;padding:0 20px;font-size:14px}

@media (max-width:900px){
  .pdp .wrap,.story-row{grid-template-columns:1fr}
  .story-row:nth-child(even) .story-media{order:0}
  .buy,.gallery{position:static}
  .howto ol{grid-template-columns:1fr}
  .sticky-buy{display:flex}
  .footer{padding-bottom:110px}
  .preview-bar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){
  .xsell{grid-template-columns:1fr 1fr;gap:12px}
  .facts{grid-template-columns:1fr 1fr}
  .g-thumbs{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
}

/* ================= PAGE CONTACT ================= */
.contact{padding-block:24px clamp(56px,8vw,96px)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,80px);align-items:start}
.contact h1{font-size:clamp(36px,5vw,60px);letter-spacing:-.02em}
.c-head{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.cform{display:flex;flex-direction:column;gap:18px}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:13px;font-weight:600}
.field label small{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;font:500 15px var(--font);color:var(--ink);background:var(--bg)}
.field textarea{min-height:170px;resize:vertical;line-height:1.5}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F1BD1' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none}
.field .hint{font-size:12px;color:var(--muted)}
.cform .btn{align-self:flex-start}
.c-msg{font-size:14px;font-weight:600;color:var(--blue);min-height:1.2em}
.c-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:100px}
.c-card{border:1.5px solid var(--blue);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:8px}
.c-card.soft{border:1px solid var(--line);background:var(--wash)}
.c-card h2{font-size:18px}
.c-card p,.c-card li{font-size:14px}
.c-card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.c-card a{color:var(--blue);font-weight:600}
@media (max-width:900px){
  .contact .wrap{grid-template-columns:1fr}
  .c-side{position:static}
}
@media (max-width:560px){ .cform .row2{grid-template-columns:1fr} }

/* Verrou mode clair : l'aperçu ne doit jamais repeindre la page en sombre */
html:root,html:root[data-theme],html:root[data-theme="dark"]{--bg:#FFFFFF!important;--wash:#F4F4F1!important;--ink:#111111!important;--muted:#3A3A3A!important;--line:#E4E4E4!important;--blue:#0F1BD1!important;--blue-deep:#0A129A!important;--cta:#317F0D!important;--cta-hover:#276A08!important;--matcha:#2F7A0C!important;--ph:#DCE0FA!important;--ph-ink:#0F1BD1!important;--on-blue:#FFFFFF!important;color-scheme:only light!important;background:#FFFFFF!important}
html body{background:#FFFFFF!important;color:#111111}

/* Flèches des photos : rond bleu électrique, flèche blanche épaisse */
.gal-nav{width:44px!important;height:44px!important;background:#fff!important;color:var(--blue)!important;border:2.5px solid var(--blue)!important;opacity:1!important;box-shadow:0 4px 12px rgba(15,27,209,.18);transition:transform .15s!important}
.gal-nav:hover{transform:translateY(-50%) scale(1.06)}
.gal-nav:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.gal-nav.prev{left:12px!important}.gal-nav.next{right:12px!important}
@media (hover:none){.gal-nav{width:40px!important;height:40px!important}}
.dots button::before{background:rgba(15,27,209,.3)!important;box-shadow:0 0 0 1.5px rgba(255,255,255,.85);transition:width .2s}
.dots button[aria-current="true"]::before{background:var(--blue)!important;width:20px;border-radius:4px}

/* Une seule carte « produit associé » : centrée */
.xsell:has(> a:only-child){grid-template-columns:minmax(0,320px)!important;justify-content:center}

/* Confort de lecture : lignes de texte pas trop longues */
.lead,.faq p,.story-copy .lead{max-width:62ch}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}

/* Doser · préparer · savourer : toujours trois colonnes, même sur téléphone */
@media (max-width:700px){
  .ritual-grid,.howto ol{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  .ritual-grid .media,.howto .media{aspect-ratio:3/4!important;border-radius:10px}
  .ritual-grid article,.howto li{gap:6px}
  .ritual-grid article>b,.howto b{font-size:15px!important}
  .ritual-grid .card-sub,.howto p{font-size:12px!important;line-height:1.4}
}

/* Autocollant vert « 60 canettes » / « 45 pièces » qui dépasse de la photo */
.sticker{position:absolute;z-index:5;top:-14px;left:-12px;width:clamp(64px,7vw,88px);aspect-ratio:1;border-radius:50%;background:#317F0D;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;transform:rotate(-10deg);border:3px solid #fff;box-shadow:0 6px 14px rgba(10,20,60,.22);pointer-events:none;text-align:center}
.sticker b{font-family:'Eczar',Georgia,serif;font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em}
.sticker span{font-size:clamp(8.5px,.8vw,10.5px);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.sticker::after{content:'';position:absolute;inset:3px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.55)}
.card.mini{position:relative}
.card.mini .card-media .badge{display:none}
@media (max-width:700px){.sticker{top:-12px;left:-8px;width:58px;border-width:2.5px}.sticker b{font-size:20px}.sticker span{font-size:7.5px;letter-spacing:.03em}}
.gallery{position:relative}
@media (min-width:901px){.gallery{position:sticky}}

/* Étiquette verte v2 : plus grande, sans contour, typo Deep Green */
.sticker{width:clamp(112px,11vw,150px)!important;aspect-ratio:auto!important;border-radius:14px!important;border:0!important;padding:12px 14px!important;top:-20px!important;left:-16px!important;transform:rotate(-8deg)!important;box-shadow:0 8px 18px rgba(10,20,60,.22)!important;background:#317F0D!important}
.sticker::after{display:none!important}
.sticker img{display:block;width:100%;height:auto}
@media (max-width:700px){.sticker{width:84px!important;padding:8px 10px!important;border-radius:10px!important;top:-14px!important;left:-8px!important}}

/* Étiquette verte v3 : rond, sans contour, typo Deep Green */
.sticker{width:clamp(108px,10vw,140px)!important;aspect-ratio:1!important;border-radius:50%!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;transform:rotate(-10deg)!important}
.sticker img{width:74%!important;margin-top:4%}
@media (max-width:700px){.sticker{width:82px!important;padding:0!important;border-radius:50%!important;top:-16px!important;left:-10px!important}}

/* Étiquette ronde v4 : texte qui remplit le rond */
.sticker img{width:80%!important;margin-top:0!important}
.card.mini .card-media .badge{display:inline-block!important}
.gallery .badge-pill{position:absolute;z-index:5;left:14px;top:14px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(15,27,209,.25)}

/* Étiquette ronde v5 : un peu plus petite, vert plus vif */
.sticker{width:clamp(96px,8.8vw,122px)!important;background:#3E9F12!important}
@media (max-width:700px){.sticker{width:72px!important}}

/* Flèches des photos un peu plus petites */
.gal-nav{width:36px!important;height:36px!important;border-width:2px!important}
.gal-nav svg{width:16px;height:16px}
.card.mini .gal-nav{width:32px!important;height:32px!important}
.card.mini .gal-nav svg{width:14px;height:14px}
.card.mini .gal-nav.prev{left:8px!important}.card.mini .gal-nav.next{right:8px!important}

/* Affichage plus rapide : apparitions courtes, déclenchées un peu avant d'arriver à l'écran */
body.fx1 .hero-copy>*{opacity:1!important;transform:none!important;transition:none!important}
body.fx1 .rv{transform:translateY(12px)!important;transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1)!important;transition-delay:calc(var(--i,0) * 40ms)!important}
body.fx1 .rv.in{transform:none!important}
.card-media,.vid,.detail-media,.ritual-grid .media,.howto .media,.g-main{background-color:#EEF0F6}