/* Atelier du thé — charte « étagère d'apothicaire » : bocaux en verre, couleurs tirées des infusions. */
@font-face{font-family:"Young Serif";src:url(/custom-tea/assets/fonts/young-serif-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/custom-tea/assets/fonts/instrument-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/custom-tea/assets/fonts/instrument-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --paper:#EEF1EC;   /* porcelaine froide */
  --panel:#F8FAF6;   /* plan de travail */
  --ink:#1F2B25;     /* feuille infusée */
  --mute:#56645B;
  --line:#CBD4CB;
  --sencha:#5E7D2E;
  --assam:#A0451B;
  --hibiscus:#8E1E3A; /* action principale */
  --gold:#D9A441;     /* camomille */
  --wood:#B9895A;     /* étagère, bouchon */
  --glass:#FFFFFF;
  color-scheme:light;
}
/* sombre : selon le système, sauf choix contraire du visiteur (bouton du haut, data-theme sur <html>) */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#121815;--panel:#1A221E;--ink:#E7ECE7;--mute:#9DAAA1;--line:#2F3A34;--sencha:#9BBD62;--hibiscus:#D2557A;--wood:#8A6440;--glass:#DDE7E1;color-scheme:dark}}
:root[data-theme=dark]{--paper:#121815;--panel:#1A221E;--ink:#E7ECE7;--mute:#9DAAA1;--line:#2F3A34;--sencha:#9BBD62;--hibiscus:#D2557A;--wood:#8A6440;--glass:#DDE7E1;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 "Instrument Sans",system-ui,sans-serif}
a{color:inherit;text-decoration-color:var(--sencha);text-underline-offset:3px}
a:hover{color:var(--sencha)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
img{max-width:100%;height:auto}
main{max-width:1120px;margin:0 auto;padding:20px 20px 60px}
h1,h2,h3{font-family:"Young Serif",Georgia,serif;font-weight:400;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(34px,5.6vw,58px);margin:.2em 0 .3em;max-width:16ch}
h2{font-size:clamp(24px,3vw,30px);margin:1.6em 0 .6em}
h3{font-size:19px;margin:1.2em 0 .5em}
.lead{font-size:19px;color:var(--mute);max-width:56ch}
.small{font-size:14px;color:var(--mute)}
svg.defs{position:absolute;width:0;height:0;overflow:hidden}

/* en-tête */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;max-width:1120px;margin:0 auto;padding:16px 20px}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:"Young Serif",Georgia,serif;font-size:22px;text-decoration:none}
.brand svg{width:22px;height:28px}
.brand .tea{color:var(--hibiscus)}   /* CreativiTea : « Tea » en hibiscus */
.nav{display:flex;gap:4px 18px;flex:1;flex-wrap:wrap}.nav a{text-decoration:none;color:var(--mute)}.nav a:hover{color:var(--ink)}
.langs{display:flex;align-items:center;gap:10px;font-size:14px}.langs a{color:var(--mute);text-decoration:none}
.theme{display:grid;place-items:center;width:34px;height:34px;margin-left:4px;padding:0;border:0;border-radius:50%;background:none;color:var(--mute);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.theme:hover{color:var(--ink)}.theme svg{width:17px;height:17px}.theme .sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .theme .sun{display:block}:root:not([data-theme=light]) .theme .moon{display:none}}
:root[data-theme=dark] .theme .sun{display:block}:root[data-theme=dark] .theme .moon{display:none}
.btn{display:inline-block;background:var(--hibiscus);color:#fff;text-decoration:none;border:0;border-radius:999px;padding:12px 22px;font:600 16px/1.2 "Instrument Sans",system-ui,sans-serif;cursor:pointer}
.btn:hover{color:#fff;filter:brightness(1.08)}.btn:disabled{opacity:.45;cursor:default;filter:none}
.btn.cta{padding:10px 18px}.btn.big{width:100%;padding:16px;font-size:18px;margin-top:6px}
.tag{display:inline-block;font-size:14px;padding:3px 12px;border-radius:999px;background:var(--sencha);color:#fff;text-decoration:none;margin:0 6px 6px 0}
.tag.line{background:none;color:var(--assam);box-shadow:inset 0 0 0 1.5px var(--assam)}.tag.moment{background:var(--gold);color:#2a1d05}
.crumbs{font-size:15px;color:var(--mute)}.crumbs a{text-decoration:none}.crumbs a::before{content:"‹ "}

/* bocal et tasse */
.jar{display:block}
.jar text{font-family:"Young Serif",Georgia,serif;fill:#1F2B25}   /* étiquette papier : même encre en mode sombre */
ul.shelf .jar text,.mobilebar .jar .jar-tag{display:none}   /* petites tailles : étiquette sans texte, ou sans étiquette */
.seal text{font-family:"Young Serif",Georgia,serif}
.stage{position:relative;display:flex;justify-content:center;align-items:flex-end}
.stage .jar{width:min(300px,70vw);height:auto;filter:drop-shadow(0 18px 18px rgba(31,43,37,.16))}
.stage .seal{position:absolute;right:max(0px,calc(50% - 185px));bottom:0;width:116px;height:116px;filter:drop-shadow(0 6px 8px rgba(31,43,37,.22))}
/* nuancier d'infusion : léger, conseillé, corsé */
.steeps{margin:4px 0 12px}.steeps h3{margin:0 0 8px;font:600 13px/1.3 "Instrument Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.steeps ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px}
.steeps li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute)}.steeps svg{width:40px;height:40px;flex:none}
.steeps b{display:block;color:var(--ink);font-weight:600}.steeps .rec b::after{content:" ✓";color:var(--hibiscus)}

/* page d'un mélange */
.hero-blend{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:28px 56px;align-items:center;margin-top:10px}
.mixlist{list-style:none;padding:0;margin:18px 0 6px;border-top:1px solid var(--line)}
.mixlist li{display:grid;grid-template-columns:56px 1fr auto auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.mixlist img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.mixlist .nm a{font-weight:600;text-decoration:none}.mixlist .nm small{display:block;color:var(--mute);font-size:14px}
.mixlist .pc{font-family:"Young Serif",Georgia,serif;font-size:24px}.mixlist .gr{color:var(--mute);font-size:15px;min-width:52px;text-align:right}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
ul.bars{list-style:none;padding:0;margin:0}
ul.bars li{display:grid;grid-template-columns:minmax(120px,1.2fr) 2fr 48px;gap:12px;align-items:center;padding:7px 0}
ul.bars .bar{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--sencha) var(--w),transparent var(--w)),var(--line)}
ul.bars .v{text-align:right;color:var(--mute);font-size:15px}
ul.bars.thumbs a{display:flex;align-items:center;gap:10px;text-decoration:none}ul.bars.thumbs img{width:40px;height:40px;border-radius:50%}
.brew{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 10px}
.brew span{flex:1 1 120px;background:var(--panel);border-radius:16px;padding:12px 14px;color:var(--mute);font-size:15px}
.brew b{display:block;font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:26px;color:var(--ink)}
.steps{padding-left:22px}.steps li{margin:4px 0}
.note{max-width:68ch;margin:36px 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold)}
.note h2{margin-top:.4em}.note .sig{color:var(--mute);font-style:italic}

/* commande */
.price-from{font-family:"Young Serif",Georgia,serif;font-size:21px;margin:6px 0 14px}
.order{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 36px;align-items:start;margin-top:40px;padding:22px;background:var(--panel);border-radius:28px}
.order-photo{margin:0;position:sticky;top:16px}
.order-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:56% 50%;border-radius:20px}
.order-body{min-width:0;padding:4px 4px 0}
/* photo d'ambiance : accueil des mélanges et composeur */
.intro.with-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px 48px;align-items:center}
.intro-photo{margin:0}.intro-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:58% 45%;border-radius:24px}
.bag-note{display:flex;align-items:center;gap:12px;margin:16px 0 4px;padding:8px;background:var(--paper);border-radius:16px}
.bag-note img{width:92px;height:64px;object-fit:cover;object-position:58% 50%;border-radius:11px;flex:none}
.publish-note{margin:10px 2px 0;font-size:13px;color:var(--mute);text-align:center}
.bag-note figcaption{font-size:14px;line-height:1.4;color:var(--mute)}
.order h2{margin-top:.1em}
.order-form label{display:block;margin:12px 0;font-weight:600;font-size:15px}
.order-form input[type=text],.order-form input:not([type]),.order-form input[type=email],.order-form input[type=tel],.order-form textarea{display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;font-weight:400}
.jars{min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border:0;padding:0;margin:0 0 6px}
.jars legend{font-size:15px;color:var(--mute);margin-bottom:8px}
.jar-opt{margin:0!important;position:relative;display:flex!important;flex-direction:column;gap:2px;padding:14px;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.jar-opt input{position:absolute;opacity:0}.jar-opt .g{font-weight:600}.jar-opt .p{font-family:"Young Serif",Georgia,serif;font-size:24px;font-weight:400}
.jar-opt:has(input:checked){box-shadow:inset 0 0 0 2.5px var(--hibiscus)}
/* photo du sachet : hauteur proportionnelle au poids (--s), posée sur la même ligne de base */
.jar-opt .bag{display:flex;align-items:flex-end;justify-content:center;height:170px;margin:0 0 12px}
.jar-opt .bag img{height:calc(var(--s) * 100%);width:auto;mix-blend-mode:multiply;opacity:.85;transition:transform .25s ease,opacity .25s ease}   /* fond gris clair de la photo fondu dans la carte */
.jar-opt:hover .bag img{opacity:1}
.jar-opt:has(input:checked) .bag img{opacity:1;transform:translateY(-5px)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .jar-opt .bag img{mix-blend-mode:normal;border-radius:12px}}
:root[data-theme=dark] .jar-opt .bag img{mix-blend-mode:normal;border-radius:12px}.jar-opt:has(input:focus-visible){outline:3px solid var(--gold)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.consent{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important;color:var(--mute)}.consent input{margin-top:5px;accent-color:var(--hibiscus)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg.ok{background:#E3EEDB;color:#2C4A17}
@media (max-width:560px){.jars{gap:8px}.jar-opt{padding:10px!important}.jar-opt .bag{height:110px}.jar-opt .g{font-size:12px;line-height:1.3}.jar-opt .p{font-size:19px!important}.row2{grid-template-columns:1fr}.order{padding:20px 16px}}

/* étagère de bocaux (galerie, mélanges proches) */
ul.shelf{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:34px 0}
ul.shelf li{padding:0 12px;text-align:center}
ul.shelf a{display:block;text-decoration:none}
ul.shelf .jar{width:118px;height:auto;margin:0 auto;filter:drop-shadow(0 10px 8px rgba(31,43,37,.14));transition:transform .25s ease}
ul.shelf a:hover .jar{transform:translateY(-6px)}
ul.shelf .nm{display:block;margin:0 -12px;padding:12px 12px 4px;border-top:10px solid var(--wood);box-shadow:inset 0 4px 0 rgba(0,0,0,.08);font-weight:600;line-height:1.3}
ul.shelf .small{display:block;margin-top:2px}

/* tuiles d'ingrédients */
ul.tiles{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
ul.tiles a,ul.tiles button{display:block;width:100%;text-decoration:none;text-align:center;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;position:relative}
ul.tiles img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
ul.tiles .nm{display:block;margin-top:8px;font-weight:600;font-size:15px;line-height:1.25}
ul.tiles small{display:block;color:var(--mute);font-size:13px}
ul.tiles button[aria-pressed=true] img{box-shadow:0 0 0 4px var(--hibiscus)}
ul.tiles .pc{position:absolute;top:4px;right:4px;background:var(--hibiscus);color:#fff;border-radius:999px;font-size:13px;font-weight:600;padding:2px 8px}
ul.tiles .pc:empty{display:none}

/* pages ingrédient et moment */
.hero-ing{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:28px 48px;align-items:center}
.hero-ing .photo{border-radius:50%;width:100%}
.hero-ing .tag{background:none;color:var(--sencha);box-shadow:inset 0 0 0 1.5px var(--sencha)}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:16px 0 22px}dl.facts dt{color:var(--mute)}dl.facts dd{margin:0}
.proof{max-width:760px}
ul.moments{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
ul.moments a{display:block;height:100%;padding:20px;border-radius:20px;background:var(--panel);text-decoration:none;color:var(--mute)}
ul.moments .nm{display:block;font-family:"Young Serif",Georgia,serif;font-size:26px;color:var(--ink);margin-bottom:6px}

/* composeur */
.composer{display:grid;grid-template-columns:1fr 400px;gap:32px;align-items:start}
.composer .shelfside h2{margin-top:.2em}
.famtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{border:0;background:var(--panel);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:15px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.bench{position:sticky;top:12px;background:var(--panel);border-radius:28px;padding:20px 22px 22px;box-shadow:0 1px 0 var(--line)}
.bench h2{margin-top:.2em}.bench .stage .jar{width:210px}.bench .stage .seal{width:92px;height:92px;right:calc(50% - 150px)}
.hint{text-align:center}
.sel{display:grid;grid-template-columns:40px 1fr 54px 26px;gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.sel img{width:40px;height:40px;border-radius:50%;grid-row:span 2}
.sel input[type=range]{grid-column:2 / 5;width:100%;accent-color:var(--hibiscus);margin:0}
.sel .nm{grid-column:2;grid-row:1;font-weight:600;font-size:15px}.sel .pc{grid-column:3;grid-row:1}.sel .rm{grid-column:4;grid-row:1}.sel input[type=range]{grid-row:2}.sel .pc{font-family:"Young Serif",Georgia,serif;font-size:19px;text-align:right}
.rm{background:none;border:0;color:var(--mute);font-size:22px;line-height:1;cursor:pointer}
.msg{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:#F6E3E7;color:#6E1630}.msg:empty{display:none}
.mobilebar{display:none}
.pages{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0;font-size:17px}.pages a{text-decoration:none}

.foot{max-width:1120px;margin:40px auto 0;padding:34px 20px 44px;color:var(--mute);font-size:15px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:28px 36px}
.foot .brand{font-size:24px;color:var(--ink)}.foot-brand p{margin:10px 0 0;max-width:42ch}
.foot-col{display:flex;flex-direction:column;gap:8px;min-width:0}.foot-col h2{margin:0 0 4px;font:600 12px/1.3 "Instrument Sans",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.foot-col a{color:var(--mute);text-decoration:none;overflow-wrap:anywhere}.foot-col a:hover{color:var(--ink)}
.foot-langs{display:flex;gap:10px;margin-top:8px;font-size:14px}.foot-langs a{color:var(--mute);text-decoration:none}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
/* bouton « Créer un mélange » qui apparaît au défilement */
.float-cta{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:6;box-shadow:0 10px 26px rgba(31,43,37,.28);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.float-cta.on{opacity:1;transform:none;pointer-events:auto}
@media (max-width:560px){.float-cta{left:16px;right:16px;text-align:center}}
@media (prefers-reduced-motion:reduce){.float-cta{transition:none}}
/* tendances */
.kpis{list-style:none;padding:0;margin:8px 0 34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpis li{background:var(--panel);border-radius:16px;padding:14px 16px;color:var(--mute);font-size:14.5px;line-height:1.35}
.kpis b{display:block;font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:30px;color:var(--ink);margin-bottom:2px}
.asof{color:var(--mute);font-size:14.5px;margin:-6px 0 14px}
.key{background:var(--panel);border-radius:20px;padding:18px 22px;margin:0 0 28px}.key h2{margin:.1em 0 .4em;font-size:22px}.key ul{margin:0;padding-left:1.1em}.key li{margin:6px 0}
.method{max-width:760px;margin:10px 0 30px}.method p{color:var(--mute);font-size:15.5px}
.note-early{background:var(--panel);border-left:3px solid var(--gold);padding:10px 14px;border-radius:8px;color:var(--mute);max-width:70ch}
ul.pairs{list-style:none;padding:0;margin:0 0 24px}ul.pairs li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
ul.pairs li>span:nth-child(2){flex:1}ul.pairs .v{color:var(--mute);font-size:15px;white-space:nowrap}ul.pairs a{text-decoration:none}
ul.pairs .dots{display:flex;flex:none}ul.pairs .dots i{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 2px var(--paper)}ul.pairs .dots i+i{margin-left:-6px}
ul.pairs img.r{width:40px;height:40px;border-radius:50%}ul.pairs li>a{flex:1}
ul.moments-sig{list-style:none;padding:0;margin:0 0 30px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
ul.moments-sig li{background:var(--panel);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
ul.moments-sig .m{font-family:"Young Serif",Georgia,serif;font-size:19px;text-decoration:none}
ul.moments-sig .i{display:flex;align-items:center;gap:10px;font-weight:600;text-decoration:none}ul.moments-sig img{width:44px;height:44px;border-radius:50%}
/* composeur : contenu lisible sans JavaScript */
.how{max-width:760px;margin:40px 0 10px}.how ol{padding-left:1.2em;color:var(--mute)}.how li{margin:6px 0}
.ing-index{margin:20px 0 30px}.ing-index h3{font:600 13px/1.3 "Instrument Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:18px 0 8px}
.ing-index ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px}.ing-index a{text-decoration:none}.ing-index a:hover{text-decoration:underline}
/* pages légales */
.legal{max-width:760px}.legal h2{font-size:22px;margin:1.6em 0 .4em}.legal p,.legal li{color:var(--ink)}.legal ul{padding-left:1.2em}

@media (max-width:860px){
  .hero-blend,.hero-ing,.duo,.order,.intro.with-photo{grid-template-columns:1fr}
  .order-photo{position:static}.order-photo img{aspect-ratio:16/9}
  .composer{grid-template-columns:1fr;padding-bottom:70px}
  .bench{position:static}
  .mobilebar{display:flex;align-items:center;gap:12px;position:fixed;left:12px;right:12px;bottom:12px;z-index:5;background:var(--ink);color:var(--paper);border-radius:999px;padding:6px 8px 6px 14px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
  .mobilebar .jar{width:30px;height:39px}.mobilebar .count{flex:1;font-weight:600}
}
@media (max-width:560px){
  body{font-size:16px}main{padding:12px 16px 50px}
  .top{gap:8px 14px;padding:12px 16px}.brand{flex:1;font-size:20px}.nav{order:3;flex-basis:100%;gap:2px 16px;font-size:15px}.btn.cta{order:2;padding:8px 14px;font-size:15px}.langs{order:1}
  ul.tiles{grid-template-columns:repeat(3,1fr);gap:10px}ul.tiles .nm{font-size:13px}
  ul.shelf{grid-template-columns:repeat(2,1fr)}ul.shelf .jar{width:96px}
  .mixlist li{grid-template-columns:44px 1fr auto}.mixlist img{width:44px;height:44px}.mixlist .gr{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.price-live{font-family:"Young Serif",Georgia,serif;font-size:19px;margin:16px 0 4px;min-height:1.4em}