/* Trium Café · feuille de style unique */
@font-face{font-family:'EB Garamond';src:url(/fonts/EBGaramond-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(/fonts/EBGaramond-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/IBMPlexMono-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/IBMPlexMono-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/IBMPlexMono-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'La Belle Aurore';src:url(/fonts/LaBelleAurore-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --noir:#000;--blanc:#fff;--rouge:#ec0002;--rose:#e7dcd9;--brun:#714632;--sachet:#231f20;
  --bois:#160e0a;--bois2:#1a110c;--creme:#fbf8f3;--papier:#fffef9;--encre:#0b1a5d;
  --mauve:#b69a91;--abricot:#ffb980;--peche:#ffdeb5;--sauge:#ccd5b5;--pistache:#e7f2cb;--vanille:#fffabb;--rosethe:#efd4c5;
  --serif:'EB Garamond',Garamond,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --main:'La Belle Aurore',cursive;
  --pad:clamp(20px,4.5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bois);color:var(--blanc);font-family:var(--mono);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.clair{background:var(--creme);color:var(--noir)}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-weight:400;margin:0}
p{margin:0}
.serif{font-family:var(--serif);font-weight:400}
.main{font-family:var(--main);color:var(--encre)}
.lbl{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.c-abricot{color:var(--abricot)}.c-mauve{color:var(--mauve)}.c-brun{color:var(--brun)}.c-rouge{color:var(--rouge)}
.wrap{padding-inline:var(--pad)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--abricot);outline-offset:3px}
.clair :focus-visible{outline-color:var(--brun)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;background:var(--blanc);color:var(--noir);border:1px solid var(--blanc);font-family:var(--mono);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s;text-align:center}
.btn:hover{background:var(--rose);border-color:var(--rose)}
.btn.noir{background:var(--noir);color:var(--blanc);border-color:var(--noir)}
.btn.noir:hover{background:var(--brun);border-color:var(--brun)}
.btn.ghost{background:transparent;color:var(--blanc);border-color:rgba(255,255,255,.6)}
.btn.ghost:hover{background:var(--blanc);color:var(--noir)}
.btn.ghost-noir{background:transparent;color:var(--noir);border-color:var(--noir)}
.btn.ghost-noir:hover{background:var(--noir);color:var(--blanc)}
.btn.plein{width:100%}
.btn[disabled]{opacity:.5;cursor:wait}
.lien{text-decoration:underline;text-underline-offset:5px;font-size:13px}

/* Bandeau + en-tête */
.bandeau{background:var(--noir);color:var(--rose);font-size:12px;line-height:18px;padding:10px var(--pad);display:flex;justify-content:space-between;gap:24px}
.bandeau span:not(:first-child){display:none}
@media(min-width:900px){.bandeau span:not(:first-child){display:inline}}
.entete{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--pad);background:var(--bois);color:var(--blanc)}
.entete.sur-photo{position:absolute;left:0;right:0;background:transparent}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:20px;white-space:nowrap}
.logo img{height:26px;width:auto}
.nav{display:none;gap:28px;font-size:13px}
.nav a,.outils a,.outils button{text-decoration:none;border-bottom:1px solid transparent;padding:4px 0}
.nav a:hover,.nav a[aria-current],.outils a:hover,.outils button:hover{border-bottom-color:currentColor}
.outils{display:flex;align-items:center;gap:20px;font-size:13px}
.outils button{background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;padding:4px 0}
.burger{display:inline-flex}
@media(min-width:1100px){.nav{display:flex}.burger{display:none}}
.menu-mobile{position:fixed;inset:0;z-index:60;background:var(--bois);color:var(--blanc);padding:24px var(--pad);display:none;flex-direction:column;gap:8px}
.menu-mobile.ouvert{display:flex}
.menu-mobile a{font-family:var(--serif);font-size:38px;line-height:1.3;text-decoration:none}
.menu-mobile .fermer{align-self:flex-end;background:none;border:0;font-size:14px;min-height:44px;cursor:pointer}

/* Hero accueil */
.hero{position:relative;background:var(--bois2);overflow:hidden}
.hero-photo{position:relative;height:62vh;min-height:380px}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:47% 50%}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bois2) 0%,rgba(26,17,12,0) 45%)}
.hero-texte{position:relative;z-index:2;padding:0 var(--pad) 56px;margin-top:-90px;display:flex;flex-direction:column;gap:22px}
.hero h1{font-family:var(--serif);font-size:clamp(50px,9vw,84px);line-height:.95;letter-spacing:-.02em}
.hero .sous{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--rose);margin-top:-6px}
.hero p.chapo{max-width:470px;font-size:15px;line-height:26px;color:rgba(255,255,255,.82)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.reassurance{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);font-size:12px;color:rgba(255,255,255,.75)}
.point{position:absolute;z-index:3;width:44px;height:44px;margin:-22px 0 0 -22px;display:none;align-items:center;justify-content:center;text-decoration:none}
.point i{width:14px;height:14px;background:var(--blanc);border-radius:50%;animation:pulse 2.2s infinite}
.point .bulle{position:absolute;left:34px;top:-8px;width:230px;background:var(--blanc);color:var(--noir);padding:14px 16px;display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(6px);transition:.25s;pointer-events:none;font-size:12px;line-height:1.5}
.point.a-gauche .bulle{left:auto;right:34px}
.point:hover .bulle,.point:focus-visible .bulle,.point.ouvert .bulle{opacity:1;transform:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 18px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media(min-width:1000px){
  .hero{display:flex;min-height:900px}
  .hero-photo{position:absolute;inset:0 0 0 600px;height:auto}
  .hero-photo::after{background:linear-gradient(90deg,var(--bois2) 0%,rgba(26,17,12,0) 28%),linear-gradient(0deg,rgba(10,6,4,.55) 0%,rgba(10,6,4,0) 30%)}
  .hero-texte{width:620px;margin:0;padding:150px 40px 64px var(--pad)}
  .reassurance{flex-wrap:nowrap;justify-content:space-between;white-space:nowrap;font-size:11px}
  .point{display:flex}
}

/* Défilé */
.defile{background:var(--brun);color:var(--rose);padding:20px 0;overflow:hidden;white-space:nowrap}
.defile-in{display:flex;width:max-content;animation:defile 40s linear infinite;font-family:var(--serif);font-style:italic;font-size:clamp(26px,3vw,40px)}
.defile-in span{padding-right:56px}
.defile-in b{font-weight:400;font-style:normal;padding-right:56px}
@keyframes defile{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.defile-in,.point i{animation:none}}

/* Sections */
.section{padding:clamp(72px,9vw,120px) var(--pad)}
.titre-section{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:40px}
.titre-section .bloc{display:flex;flex-direction:column;gap:16px}
.h2{font-family:var(--serif);font-size:clamp(42px,6vw,76px);line-height:.98}
.h2-m{font-family:var(--serif);font-size:clamp(36px,4.5vw,60px);line-height:1}
.chapo-s{max-width:440px;font-size:14px;line-height:24px;color:rgba(255,255,255,.75)}
.clair .chapo-s,.fond-clair .chapo-s{color:rgba(0,0,0,.75)}
.fond-sachet{background:var(--sachet)}
.fond-noir{background:var(--noir)}
.fond-clair{background:var(--creme);color:var(--noir)}
.fond-rose{background:var(--rose);color:var(--noir)}

/* Filtres */
.filtres{display:flex;flex-wrap:wrap;gap:8px}
.puce{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid rgba(255,255,255,.4);background:transparent;font-size:13px;cursor:pointer;color:inherit}
.puce:hover{border-color:currentColor}
.puce[aria-pressed=true]{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.clair .puce,.fond-clair .puce{border-color:var(--noir)}
.clair .puce[aria-pressed=true],.fond-clair .puce[aria-pressed=true]{background:var(--noir);color:var(--blanc);border-color:var(--noir)}
.puce small{font-size:11px;opacity:.6}

/* Cartes produit */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:48px 20px}
@media(min-width:1200px){.grille.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.grille.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.carte{position:relative;display:flex;flex-direction:column;gap:12px}
.carte[hidden]{display:none}
.visuel{position:relative;display:block;aspect-ratio:4/5;perspective:1400px;text-decoration:none}
.visuel-in{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
@media(hover:hover){.carte:hover .visuel-in.retourne{transform:rotateY(180deg)}}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face img.sachet{position:absolute;left:50%;bottom:4%;height:90%;width:auto;max-width:none;transform:translateX(-50%);transition:transform .6s}
.face img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s}
@media(hover:hover){.carte:hover img.photo{transform:scale(1.05)}}
.face.dos{transform:rotateY(180deg);background:var(--papier);color:var(--noir);padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.face.dos .titre-conseil{display:flex;align-items:center;gap:10px;color:var(--rouge);font-size:14px}
.face.dos .titre-conseil img{width:40px}
.face.dos .main{font-size:21px;line-height:32px}
.face.dos .pied{font-size:12px;border-top:1px solid var(--noir);padding-top:12px;display:flex;justify-content:space-between;gap:12px}
.pastille{position:absolute;top:14px;left:14px;background:var(--noir);color:var(--blanc);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;line-height:1.3}
.pastille.inverse{background:var(--blanc);color:var(--noir)}
.carte .infos{display:flex;flex-direction:column;gap:4px}
.carte .ligne-nom{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.carte .nom{font-family:var(--serif);font-size:32px;line-height:34px;text-decoration:none}
.carte .nom em{font-size:20px}
.carte .prix{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.carte .origine{font-size:12px;color:var(--mauve)}
.carte .devise{font-size:13px;line-height:20px;font-style:italic;opacity:.85;min-height:40px}
.clair .carte .origine,.fond-clair .carte .origine{color:var(--brun)}
.ajout{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 18px;border:1px solid rgba(255,255,255,.55);background:transparent;font-size:13px;font-weight:500;cursor:pointer;width:100%;text-align:left;transition:.2s}
.ajout:hover,.ajout.fait{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.clair .ajout,.fond-clair .ajout{border-color:var(--noir)}
.clair .ajout:hover,.clair .ajout.fait,.fond-clair .ajout:hover,.fond-clair .ajout.fait{background:var(--noir);color:var(--blanc);border-color:var(--noir)}
.tampon{position:absolute;right:-12px;bottom:56px;width:104px;pointer-events:none;opacity:0;z-index:4}
.tampon.go{animation:tampon .55s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes tampon{0%{opacity:0;transform:scale(2.4) rotate(-24deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
.carte-trio{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:30px;border:1px solid rgba(255,255,255,.35);text-decoration:none}
.carte-trio .sachets{display:flex;justify-content:center;margin:10px 0}
.carte-trio .sachets img{height:180px;width:auto}
.carte-trio .sachets img:first-child{transform:rotate(-8deg) translateX(30px)}
.carte-trio .sachets img:nth-child(2){position:relative;z-index:2;height:200px}
.carte-trio .sachets img:last-child{transform:rotate(8deg) translateX(-30px)}

/* Quiz */
.quiz{display:flex;flex-direction:column;background:var(--rose);color:var(--noir)}
.quiz-photo{position:relative;min-height:340px;overflow:hidden}
.quiz-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quiz-photo .legende{position:absolute;left:32px;right:32px;bottom:32px;color:var(--blanc);display:flex;flex-direction:column;gap:8px}
.quiz-corps{padding:clamp(40px,6vw,90px) var(--pad);display:flex;flex-direction:column;gap:28px}
.progres{display:flex;align-items:center;gap:18px}
.progres .barre{flex:1;height:2px;background:rgba(0,0,0,.12);position:relative}
.progres .barre i{position:absolute;left:0;top:0;bottom:0;background:var(--noir);transition:width .4s}
.reponses{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){.reponses{grid-template-columns:1fr 1fr}}
.reponse{display:flex;align-items:center;gap:16px;min-height:62px;padding:12px 22px;border:1px solid var(--noir);background:transparent;font-size:15px;text-align:left;cursor:pointer;transition:.2s}
.reponse:hover{background:var(--blanc)}
.reponse b{font-weight:500}
.resultat{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.resultat img{height:260px;width:auto}
.resultat .txt{flex:1 1 280px;display:flex;flex-direction:column;gap:14px}
@media(min-width:1000px){.quiz{flex-direction:row;min-height:760px}.quiz-photo{flex:0 0 560px}.quiz-corps{flex:1;padding:90px 96px}}

/* Tuiles moments */
.tuiles{display:grid;grid-template-columns:1fr;gap:16px}
.tuile{position:relative;overflow:hidden;display:block;min-height:420px;color:var(--blanc);text-decoration:none}
.tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tuile:hover img{transform:scale(1.06)}
.tuile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,0) 55%)}
.tuile .txt{position:absolute;z-index:2;left:32px;right:32px;bottom:32px;display:flex;flex-direction:column;gap:10px}
.tuile .serif{font-size:clamp(40px,4vw,54px);line-height:1}
@media(min-width:1000px){.tuiles{grid-template-columns:1.25fr 1fr 1fr;height:680px}.tuile{min-height:0}}

/* Offrir */
.offrir{display:flex;flex-direction:column;background:var(--creme);color:var(--noir)}
.offrir-photo{position:relative;min-height:420px;overflow:hidden}
.offrir-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.carte-mot{position:absolute;right:24px;bottom:32px;width:min(300px,80%);background:var(--papier);padding:24px 26px 28px;box-shadow:0 24px 50px rgba(0,0,0,.18);transform:rotate(-3deg);display:flex;flex-direction:column;gap:10px}
.carte-mot .main{font-size:24px;line-height:34px}
.offrir-corps{padding:clamp(56px,7vw,110px) var(--pad);display:flex;flex-direction:column;gap:26px}
.liste-cadeaux{border-top:1px solid var(--noir)}
.liste-cadeaux a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--noir);text-decoration:none}
.liste-cadeaux .serif{font-size:28px}
@media(min-width:1000px){.offrir{flex-direction:row;min-height:820px}.offrir-photo,.offrir-corps{flex:1 1 50%}.carte-mot{right:48px;bottom:56px}}

/* Abonnement */
.abo{display:flex;flex-direction:column;gap:56px}
.etapes{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.35)}
.etape{padding:24px 0;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid rgba(255,255,255,.2)}
.etape .serif{font-size:80px;line-height:1}
@media(min-width:800px){.etapes{grid-template-columns:repeat(3,1fr)}.etape{padding:28px 24px 0;border-bottom:0;border-left:1px solid rgba(255,255,255,.35)}.etape:first-child{border-left:0;padding-left:0}}
@media(min-width:1100px){.abo{flex-direction:row;align-items:center;gap:80px}.abo>*{flex:1}}

/* Manifeste */
.manifeste{display:flex;flex-direction:column;gap:40px;align-items:flex-start}
.manifeste .aigle{width:180px;transform:rotate(-8deg)}
.manifeste .cri{color:var(--rouge);font-size:clamp(32px,4.5vw,54px);line-height:1.25;letter-spacing:.02em;text-transform:uppercase}
@media(min-width:1100px){.manifeste{flex-direction:row;align-items:center;gap:90px}.manifeste .aigle{width:240px}.manifeste .cri{flex:1}.manifeste .cote{flex:0 0 300px}}

/* Lieu */
.lieu{position:relative;min-height:760px;overflow:hidden;display:flex;align-items:flex-end}
.lieu>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.lieu::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 60%,rgba(0,0,0,0) 100%)}
.lieu .txt{position:relative;z-index:2;padding:56px var(--pad);max-width:620px;display:flex;flex-direction:column;gap:22px}
@media(min-width:1000px){.lieu{align-items:center}.lieu::after{background:linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,0) 70%)}}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.galerie div{aspect-ratio:1/1;overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.galerie div:hover img{transform:scale(1.05)}
@media(min-width:900px){.galerie{grid-template-columns:repeat(5,1fr);gap:12px}}

/* Pied */
.pied{background:var(--noir);color:var(--blanc);padding:clamp(56px,7vw,90px) var(--pad) 32px;display:flex;flex-direction:column;gap:56px}
.lettre{display:flex;flex-direction:column;gap:28px;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:56px}
.lettre form{display:flex;flex-direction:column;gap:10px;max-width:540px;width:100%}
.lettre .champ{display:flex}
.lettre input{flex:1;min-width:0;min-height:56px;padding:0 18px;border:1px solid rgba(255,255,255,.5);border-right:0;background:transparent;color:var(--blanc);font:inherit;font-size:14px}
.lettre input::placeholder{color:rgba(255,255,255,.55)}
.colonnes{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 24px;font-size:13px}
.colonnes>div{display:flex;flex-direction:column;gap:10px}
.colonnes a{text-decoration:none}.colonnes a:hover{text-decoration:underline}
.colonnes .marque{grid-column:1/-1}
.colonnes .marque img{width:200px}
.mentions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px;color:rgba(255,255,255,.55)}
.mentions a{text-decoration:none}
@media(min-width:1000px){.lettre{flex-direction:row;justify-content:space-between;align-items:flex-end}.colonnes{grid-template-columns:1.3fr repeat(4,1fr)}.colonnes .marque{grid-column:auto}}

/* Tiroir panier */
.voile{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .3s}
.voile.ouvert{opacity:1;pointer-events:auto}
.tiroir{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(460px,100%);background:var(--creme);color:var(--noir);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tiroir.ouvert{transform:none}
.tiroir-tete{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--noir)}
.tiroir-tete .serif{font-size:30px}
.tiroir-tete button{background:none;border:0;min-height:44px;cursor:pointer;font-size:13px;text-decoration:underline}
.tiroir-corps{flex:1;overflow-y:auto;padding:8px 24px}
.jauge{padding:16px 24px;font-size:12px;border-bottom:1px solid rgba(0,0,0,.12)}
.jauge .barre{height:3px;background:rgba(0,0,0,.1);margin-top:8px;position:relative}
.jauge .barre i{position:absolute;left:0;top:0;bottom:0;background:var(--brun)}
.article{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(0,0,0,.12)}
.article .vig{flex:0 0 78px;height:98px;position:relative;overflow:hidden}
.article .vig img{position:absolute;left:50%;bottom:3%;height:94%;width:auto;max-width:none;transform:translateX(-50%)}
.article .vig img.photo{inset:0;width:100%;height:100%;object-fit:cover;transform:none;left:0;bottom:0}
.article .det{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.article .det .serif{font-size:22px;line-height:1.1}
.article .det small{font-size:12px;color:var(--brun)}
.article .det .mot{font-family:var(--main);color:var(--encre);font-size:16px;line-height:1.3}
.qte{display:inline-flex;align-items:center;border:1px solid var(--noir);margin-top:8px;align-self:flex-start}
.qte button{width:38px;height:38px;border:0;background:transparent;cursor:pointer;font-size:16px}
.qte span{min-width:26px;text-align:center;font-size:14px}
.article .droite{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;font-size:14px}
.article .retirer{background:none;border:0;font-size:12px;text-decoration:underline;cursor:pointer;min-height:32px}
.tiroir-pied{padding:20px 24px 24px;border-top:1px solid var(--noir);display:flex;flex-direction:column;gap:14px;background:var(--creme)}
.total{display:flex;justify-content:space-between;font-size:15px}
.total b{font-weight:500;font-size:18px}
.mode-liv{display:flex;flex-direction:column;gap:8px;font-size:13px}
.mode-liv label{display:flex;gap:10px;align-items:center;cursor:pointer;min-height:32px}
.mode-liv input{accent-color:var(--noir);width:16px;height:16px}
.vide{padding:48px 0;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.vide .serif{font-size:32px;line-height:1.1}
.erreur{color:var(--brun);font-size:13px}
.note-secu{font-size:11px;color:rgba(0,0,0,.6);text-align:center}

/* Toast */
.toast{visibility:hidden;position:fixed;left:16px;right:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:14px;background:var(--noir);color:var(--blanc);padding:12px 14px 12px 16px;box-shadow:0 18px 40px rgba(0,0,0,.3);transform:translateY(140%);transition:transform .35s}
.toast.vu{transform:none;visibility:visible}
.toast img{height:56px;width:auto}
.toast .serif{font-size:20px;line-height:1.1}
.toast small{display:block;font-size:11px;color:var(--mauve)}
.toast .btn{min-height:44px;padding:0 16px;font-size:13px;margin-left:auto}
@media(min-width:700px){.toast{left:auto;right:28px;bottom:28px;width:auto}}

/* Pages boutique */
.bandeau-page{position:relative;min-height:360px;overflow:hidden;background:var(--bois);color:var(--blanc);display:flex;align-items:flex-end}
.bandeau-page>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;opacity:.55}
.bandeau-page::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bois) 15%,rgba(22,14,10,0) 80%)}
.bandeau-page .txt{position:relative;z-index:2;padding:72px var(--pad) 56px;display:flex;flex-direction:column;gap:18px;max-width:780px}
.bandeau-page h1{font-family:var(--serif);font-size:clamp(48px,7vw,96px);line-height:.95}
.barre-filtres{position:sticky;top:0;z-index:15;background:var(--creme);border-bottom:1px solid var(--noir);padding:14px var(--pad);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.barre-filtres .filtres{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
.barre-filtres .filtres::-webkit-scrollbar{display:none}
.barre-filtres .puce{white-space:nowrap}
@media(min-width:800px){.barre-filtres .filtres{margin:0;padding:0}}
.boutique{padding:48px var(--pad) 110px}
.fil{padding:16px var(--pad);font-size:12px;color:var(--brun)}
.fil a{text-decoration:none}

/* Fiche café */
.fiche{display:flex;flex-direction:column;gap:40px;padding:0 var(--pad) 90px}
.galerie-fiche{display:flex;flex-direction:column-reverse;gap:12px}
.vignettes{display:flex;gap:10px;overflow-x:auto}
.vignettes button{flex:0 0 72px;height:90px;padding:0;border:1px solid transparent;overflow:hidden;cursor:pointer;background:var(--rosethe)}
.vignettes button[aria-pressed=true]{border-color:var(--noir)}
.vignettes img{width:100%;height:100%;object-fit:cover}
.scene{position:relative;aspect-ratio:4/5;overflow:hidden}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene img.sachet{inset:auto;left:50%;bottom:4%;height:90%;width:auto;max-width:none;transform:translateX(-50%);object-fit:contain}
.scene .main-scene{position:absolute;left:28px;top:32px;font-size:24px;line-height:32px;transform:rotate(-6deg);max-width:200px}
.scene .legende{position:absolute;right:16px;bottom:16px;background:rgba(255,255,255,.9);font-size:11px;padding:8px 12px}
.achat{display:flex;flex-direction:column;gap:24px}
.achat h1{line-height:.88}
.achat h1 em{display:block;font-size:36px}
.achat h1 span{display:block;font-size:clamp(72px,10vw,120px);letter-spacing:-.02em}
.achat .devise-f{font-family:var(--serif);font-style:italic;font-size:24px;line-height:30px}
.profil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:1px solid var(--noir);border-bottom:1px solid var(--noir);padding:20px 0}
.profil div{display:flex;flex-direction:column;gap:8px}
.profil .t{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.profil .pts{display:flex;gap:4px}
.profil .pts i{flex:1;height:8px;background:rgba(113,70,50,.18)}
.profil .pts i.on{background:var(--brun)}
.option{display:flex;flex-direction:column;gap:10px}
.option .tete{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.choix{display:flex;flex-wrap:wrap;gap:6px}
.choix button{flex:1 1 auto;min-height:46px;padding:0 12px;border:1px solid var(--noir);background:transparent;font-size:13px;cursor:pointer}
.choix button:hover{background:var(--rose)}
.choix button[aria-pressed=true]{background:var(--noir);color:var(--blanc)}
.modes{display:flex;flex-direction:column;gap:8px}
.mode{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid rgba(0,0,0,.25);cursor:pointer;background:transparent;font-size:13px;text-align:left;width:100%}
.mode[aria-pressed=true]{border-color:var(--noir);background:var(--blanc)}
.mode .rond{width:16px;height:16px;border:1px solid var(--noir);border-radius:50%;flex:0 0 16px}
.mode[aria-pressed=true] .rond{border-width:5px}
.mode .lib{flex:1;display:flex;flex-direction:column;gap:3px}
.mode .lib small{font-size:12px;color:var(--brun)}
.mode .p{font-size:15px;white-space:nowrap}
.mode select{font:inherit;font-size:12px;border:1px solid var(--brun);background:transparent;padding:2px 4px}
.ligne-achat{position:relative;display:flex;gap:10px}
.ligne-achat .qte{margin:0}
.ligne-achat .qte button{height:58px;width:44px}
.ligne-achat .btn{flex:1;min-height:60px;font-size:15px}
.ligne-achat .tampon{right:-10px;top:-80px;bottom:auto;width:110px}
.garanties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;font-size:12px;line-height:18px}
.garanties span{border-top:1px solid rgba(0,0,0,.2);padding-top:10px}
.mot-cadeau{display:flex;flex-direction:column;gap:8px}
.mot-cadeau textarea{font-family:var(--main);font-size:22px;line-height:1.4;color:var(--encre);background:var(--papier);border:1px solid rgba(0,0,0,.25);padding:14px 16px;min-height:120px;resize:vertical}
.mot-cadeau small{font-size:12px;color:var(--brun)}
@media(min-width:1000px){
  .fiche{flex-direction:row;gap:72px;align-items:flex-start}
  .galerie-fiche{flex:1.15 1 0;min-width:0;flex-direction:row;position:sticky;top:20px}
  .vignettes{flex-direction:column;overflow:visible}
  .scene{flex:1}
  .achat{flex:1 1 0;min-width:0}
}
.conseil{display:flex;flex-direction:column;gap:40px;background:var(--rose);color:var(--noir)}
.conseil .sig{display:flex;flex-direction:column;gap:10px;color:var(--rouge)}
.conseil .sig img{width:96px;transform:rotate(-10deg)}
.conseil .sig span{font-size:30px;line-height:36px}
.conseil .papier{background:var(--papier);padding:clamp(28px,5vw,56px) clamp(24px,5vw,64px);box-shadow:0 30px 60px rgba(113,70,50,.18);transform:rotate(-1deg)}
.conseil .papier p{font-size:clamp(26px,3vw,36px);line-height:1.55}
@media(min-width:1000px){.conseil{flex-direction:row;align-items:center;gap:80px}.conseil .sig{flex:0 0 240px}.conseil .papier{flex:1}}
.recettes{display:grid;grid-template-columns:1fr;gap:16px}
.recette{padding:32px;display:flex;flex-direction:column;gap:24px;min-height:320px}
.recette .serif{font-size:44px;line-height:1}
.chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid currentColor;margin-top:auto}
.chiffres span{padding-top:14px;display:flex;flex-direction:column;gap:4px}
.chiffres .serif{font-size:30px}
.chiffres small{font-size:11px}
@media(min-width:900px){.recettes{grid-template-columns:repeat(3,1fr)}}
.origine-f{position:relative;min-height:640px;overflow:hidden;color:var(--blanc);display:flex;align-items:flex-end}
.origine-f>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.origine-f::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,8,5,.94) 0%,rgba(14,8,5,.7) 55%,rgba(14,8,5,.3) 100%)}
.origine-f .txt{position:relative;z-index:2;padding:56px var(--pad);max-width:580px;display:flex;flex-direction:column;gap:22px}
@media(min-width:1000px){.origine-f{justify-content:flex-end;align-items:center}.origine-f::after{background:linear-gradient(270deg,rgba(14,8,5,.96) 0%,rgba(14,8,5,.88) 42%,rgba(14,8,5,.2) 75%)}}
.reco{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.reco a{display:flex;flex-direction:column;gap:10px;text-decoration:none}
.reco .v{position:relative;aspect-ratio:1/1;overflow:hidden}
.reco .v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reco .v img.sachet{inset:auto;left:50%;bottom:4%;height:92%;width:auto;max-width:none;transform:translateX(-50%)}
.reco .serif{font-size:22px}
@media(min-width:900px){.reco{grid-template-columns:repeat(4,1fr);gap:20px}}
.barre-achat{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bois);color:var(--blanc);display:flex;align-items:center;gap:14px;padding:10px var(--pad);box-shadow:0 -10px 30px rgba(0,0,0,.2);transform:translateY(110%);transition:transform .3s}
.barre-achat.vu{transform:none}
.barre-achat img{height:52px;width:auto}
.barre-achat .n{display:none;flex-direction:column}
.barre-achat .n small{font-size:11px;color:var(--mauve)}
.barre-achat .p{margin-left:auto;font-size:16px}
.barre-achat .btn{min-height:50px;padding:0 20px}
@media(min-width:700px){.barre-achat .n{display:flex}}

/* Pages texte */
.texte{max-width:760px;padding:64px var(--pad) 110px;margin:0 auto;display:flex;flex-direction:column;gap:18px;font-size:14px;line-height:1.75}
.texte h1{font-family:var(--serif);font-size:clamp(44px,6vw,64px);line-height:1;margin-bottom:16px}
.texte h2{font-family:var(--serif);font-size:30px;margin-top:24px}
.texte .a-completer{background:#fff3c4;padding:0 4px}
.merci{min-height:70vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px;padding:80px var(--pad)}
.merci img{width:140px;transform:rotate(-10deg)}

/* Mobile : grille produits sur 2 colonnes */
@media(max-width:599px){
  .grille{grid-template-columns:1fr 1fr;gap:36px 12px}
  .carte .ligne-nom{flex-direction:column;align-items:flex-start;gap:2px}
  .carte .nom{font-size:23px;line-height:25px}.carte .nom em{font-size:15px}
  .carte .origine,.carte .devise{display:none}
  .carte .prix{font-size:14px}
  .ajout{min-height:44px;padding:0 12px;font-size:12px}
  .opt-ajout{display:none}
  .pastille{top:8px;left:8px;font-size:9px;padding:4px 6px}
  .tampon{width:72px;bottom:48px;right:-6px}
  .carte-trio{grid-column:1/-1}
}