/* LADORÉ — feuille de style. Les couleurs et polices viennent de config.json (variables injectées dans <head>). */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem;-webkit-tap-highlight-color:rgba(214,226,95,.25)}
body{margin:0;background:var(--creme);color:var(--olive);font-family:var(--f-titre);font-size:1.0625rem;line-height:1.55;font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important} /* « caché » l'emporte toujours sur les styles d'affichage */
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.045em;line-height:.95;text-wrap:balance}
p,li{text-wrap:pretty}
a,button,label,input,select,textarea,summary{touch-action:manipulation}
::selection{background:var(--citron);color:var(--olive)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.evitement{position:absolute;left:-999px;top:0;background:var(--citron);padding:.6rem 1rem;z-index:100}
.evitement:focus{left:1rem;top:1rem}

/* ---------- Fonds ---------- */
.fond-olive{background:var(--olive);color:var(--creme)}
.fond-olive-profond{background:var(--olive-profond);color:var(--creme)}
.fond-creme{background:var(--creme)}
.fond-sauge{background:var(--sauge)}
.fond-citron{background:var(--citron)}

/* ---------- Typo ---------- */
.intitule{font-family:var(--f-intitule);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 1.4rem;display:flex;gap:.9rem;align-items:center}
.intitule--citron{color:var(--citron)}
.num{font-variant-numeric:tabular-nums;opacity:.7}
.num::after{content:"—";margin-left:.9rem;opacity:.7}
.titre-section{font-size:clamp(2.6rem,7vw,5.6rem);margin-bottom:2.2rem;max-width:14ch}
.titre-section--clair{color:var(--creme)}
.titre-geant{font-size:clamp(3.2rem,10.5vw,9.5rem);line-height:.88;letter-spacing:-.055em;margin-bottom:2.5rem;max-width:12ch}
.titre-geant--citron{color:var(--citron)}
.chapeau{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.4;max-width:34ch;font-weight:500;letter-spacing:-.01em}
.chapeau--clair{color:var(--creme)}
.phrase-forte{font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin-top:4rem;max-width:22ch}
.note-legale{font-size:.85rem;opacity:.85;max-width:52ch}
.note-honnete{font-family:var(--f-intitule);font-weight:600;font-size:.9rem;letter-spacing:.04em;border-left:2px solid currentColor;padding-left:.8rem;margin-top:1.5rem}

/* ---------- Mise en page ---------- */
.cadre{width:min(1280px,100% - 2*clamp(1rem,5vw,4.5rem));margin-inline:auto}
.section{padding:clamp(5rem,11vw,9.5rem) 0;position:relative}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.85rem 1.6rem;border-radius:999px;border:1.5px solid transparent;font:700 .82rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.4,.5,1),background-color .2s,color .2s}
.bouton:hover{transform:translateY(-2px)}
.bouton:active{transform:translateY(0)}
.bouton--citron{background:var(--citron);color:var(--olive)}
.bouton--olive{background:var(--olive);color:var(--citron)}
.bouton--contour{border-color:currentColor;color:var(--creme)}
.bouton--contour:hover{background:var(--creme);color:var(--olive)}
.bouton--petit{min-height:2.5rem;padding:.6rem 1.15rem;font-size:.72rem;background:var(--olive);color:var(--citron)}
.bouton--inactif{opacity:.55;cursor:not-allowed}
.bouton--inactif:hover{transform:none}
.bouton[disabled]{opacity:.6;cursor:progress}

/* ---------- Logo (lettres dansantes) ---------- */
.logo{text-decoration:none;display:inline-block;line-height:1}
.logo__mot{display:inline-flex;font-weight:800;font-size:1.55rem;letter-spacing:.02em;font-style:italic}
.logo__mot span{display:inline-block;transform:translateY(var(--y,0)) rotate(var(--r,0deg));transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.logo:hover .logo__mot span{transform:translateY(calc(var(--y,0px) * -1)) rotate(calc(var(--r,0deg) * -1))}
.logo--grand .logo__mot{font-size:clamp(3rem,9vw,7rem)}

/* ---------- En-tête ---------- */
.entete{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem clamp(1rem,5vw,4.5rem);color:var(--citron);transition:background-color .35s,color .35s,box-shadow .35s}
.entete.est-collant{background:color-mix(in srgb,var(--creme) 92%,transparent);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);color:var(--olive);box-shadow:0 1px 0 color-mix(in srgb,var(--olive) 18%,transparent)}
.entete .bouton--petit{background:var(--citron);color:var(--olive)}
.entete.est-collant .bouton--petit{background:var(--olive);color:var(--citron)}
.nav{display:flex;gap:2rem;font:600 .8rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none;position:relative;padding:.3rem 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after{transform:scaleX(1)}
@media (max-width:860px){.nav{display:none}}

/* ---------- Héro ---------- */
.hero{min-height:100svh;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:2rem;padding:7rem clamp(1rem,5vw,4.5rem) 6rem;position:relative;overflow:hidden}
.hero__texte{position:relative;z-index:2}
.escalier{color:var(--citron);font-weight:800;font-size:clamp(4.4rem,min(14vw,17.5vh),13rem);line-height:.8;letter-spacing:-.055em;margin:1rem 0 1.6rem;display:grid}
.escalier__ligne{display:block;transition:color .25s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.escalier__ligne:nth-child(1){margin-left:0}
.escalier__ligne:nth-child(2){margin-left:.55em}
.escalier__ligne:nth-child(3){margin-left:1.1em;margin-top:.1em}
.escalier__ligne.joue{color:var(--creme);transform:translateY(-.06em)}
.escalier__jadore{font-size:.36em;letter-spacing:-.045em;line-height:1;margin:.35em 0 0 3.05em;color:var(--creme);font-style:italic;font-weight:700}
.hero__baseline{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;max-width:26ch;line-height:1.3;color:var(--creme)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:2rem 0 1.6rem}
.hero__visuel{position:relative;z-index:1;display:flex;justify-content:center;align-items:center}
.hero__visuel .bouteille{height:min(76vh,640px);width:auto;max-width:100%;filter:drop-shadow(0 40px 50px rgba(0,0,0,.35));animation:flotte 7s ease-in-out infinite}
.hero__disque{position:absolute;width:min(520px,95%);aspect-ratio:1;border-radius:50%;background:var(--sauge);opacity:.14;top:50%;left:50%;translate:-50% -46%}
.portee{position:absolute;left:0;right:0;bottom:1.6rem;height:60px;width:100%;color:var(--citron);opacity:.18}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}

.accord{display:inline-flex;align-items:center;gap:.7rem;background:none;border:0;color:var(--citron);font:600 .78rem/1 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:.4rem 0}
.accord__icone{width:2rem;height:2rem;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center}
.accord__notes{display:inline-flex;gap:3px;align-items:end;height:14px}
.accord__notes i{width:3px;height:4px;background:currentColor;border-radius:2px;transition:height .2s}
.accord.joue .accord__notes i{animation:egal .5s ease-in-out infinite alternate}
.accord.joue .accord__notes i:nth-child(2){animation-delay:.15s}
.accord.joue .accord__notes i:nth-child(3){animation-delay:.3s}
@keyframes egal{to{height:14px}}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:6rem;padding-bottom:5rem;text-align:left}
  .hero{min-height:auto}
  .hero__visuel{margin-top:1rem}
  .hero__visuel .bouteille{height:auto;width:150px}
  .hero__disque{width:300px}
  .escalier{margin-top:.6rem;font-size:clamp(4.4rem,26vw,9rem)}
}

/* ---------- 01 Le nom ---------- */
.lectures{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.lecture{border-top:1.5px solid var(--olive);padding-top:1.6rem}
.lecture__mot{font-size:clamp(2.4rem,5.2vw,4.6rem);letter-spacing:-.05em;margin-bottom:1rem;white-space:nowrap}
.lecture p{max-width:28ch;font-size:1.08rem}
@media (max-width:860px){.lectures{grid-template-columns:1fr}}

/* ---------- Manifeste ---------- */
.manifeste__grille{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,6vw,6rem);align-items:start}
.manifeste__texte{max-width:46ch;font-size:1.15rem}
.manifeste__trio{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.35;font-weight:500;letter-spacing:-.02em;margin-bottom:2rem}
.manifeste__fin{font-weight:800;font-size:clamp(1.35rem,2.4vw,1.85rem);letter-spacing:-.03em;line-height:1.2;margin-top:2.4rem}
.manifeste__etiquette{position:sticky;top:6rem}
.manifeste__etiquette .etiquette{width:clamp(200px,22vw,300px);height:auto;filter:drop-shadow(0 24px 30px rgba(47,59,36,.22));transform:rotate(3deg)}
@media (max-width:860px){.manifeste__grille{grid-template-columns:1fr}.manifeste__etiquette{position:static;justify-self:center}.manifeste__etiquette .etiquette{width:190px}}

/* ---------- 02 Produit ---------- */
.produit{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,7vw,7rem);align-items:center}
.produit__visuel{display:flex;justify-content:center;position:relative}
.produit__visuel::before{content:"";position:absolute;inset:16% 2% 3%;background:var(--sauge);border-radius:999px 999px 28px 28px}
.produit__visuel .bouteille{position:relative;width:min(300px,80%);height:auto;filter:drop-shadow(0 30px 40px rgba(47,59,36,.3))}
.fiche{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;margin:2.5rem 0 1.5rem}
.fiche>div{border-top:1px solid color-mix(in srgb,var(--olive) 55%,transparent);padding:1rem 0 1.1rem}
.fiche__large{grid-column:1/-1}
.fiche dt{font:700 .72rem/1.2 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.45rem;opacity:.8}
.fiche dd{margin:0;font-size:1.2rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.fiche small{display:block;font-size:.8rem;font-weight:400;letter-spacing:0;margin-top:.3rem;opacity:.8}
@media (max-width:860px){.produit{grid-template-columns:1fr}.produit__visuel .bouteille{width:200px}.fiche{grid-template-columns:1fr}}

/* ---------- 03 Cuisine ---------- */
.partition{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--olive);border-bottom:1.5px solid var(--olive);position:relative}
.partition li{padding:2rem 1.6rem 2.2rem 0;position:relative}
.partition li+li{padding-left:1.6rem;border-left:1px solid color-mix(in srgb,var(--olive) 40%,transparent)}
.partition__temps{font:800 3.4rem/1 var(--f-titre);letter-spacing:-.06em;display:block;margin-bottom:1.2rem}
.partition h3{font-size:1.5rem;letter-spacing:-.035em;margin-bottom:.7rem}
.partition p{font-size:1rem;margin:0}
.bientot{margin-top:2.5rem;display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;font-weight:600}
.bientot .intitule{margin:0}
@media (max-width:860px){.partition{grid-template-columns:1fr 1fr}.partition li:nth-child(3){padding-left:0;border-left:0}.partition li:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--olive) 40%,transparent)}}
@media (max-width:520px){.partition{grid-template-columns:1fr}.partition li,.partition li+li{padding:1.6rem 0;border-left:0}.partition li+li{border-top:1px solid color-mix(in srgb,var(--olive) 40%,transparent)}}

/* ---------- 04 Origine ---------- */
.origine__grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,5rem);max-width:980px;font-size:1.2rem;line-height:1.5;margin-left:auto}
.engagements{margin-top:clamp(4rem,8vw,6rem);border-top:1px solid color-mix(in srgb,var(--citron) 45%,transparent);padding-top:2rem}
.engagements ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.engagements li{font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:700;letter-spacing:-.025em;line-height:1.2;position:relative;padding-top:1.4rem}
.engagements li::before{content:"";position:absolute;top:0;left:0;width:1.4rem;height:2px;background:var(--citron)}
@media (max-width:860px){.origine__grille{grid-template-columns:1fr}.engagements ul{grid-template-columns:1fr 1fr}}

/* ---------- 05 Liste ---------- */
.liste{display:grid;grid-template-columns:1fr minmax(320px,460px);gap:clamp(2rem,7vw,7rem);align-items:start}
.offres{display:flex;gap:1rem;flex-wrap:wrap;margin:2rem 0}
.offre{border:1.5px solid var(--olive);border-radius:18px;padding:1.4rem 1.6rem;min-width:180px}
.offre p{margin:0}
.offre .intitule{margin-bottom:.7rem}
.offre__prix{font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:1.05}
.offre--forte{background:var(--olive);color:var(--creme)}
@media (max-width:860px){.liste{grid-template-columns:1fr}}

/* ---------- Formulaires ---------- */
.formulaire{background:var(--etiquette);border-radius:24px;padding:clamp(1.5rem,3vw,2.4rem);display:grid;gap:1rem;color:var(--olive)}
.formulaire--sombre{background:color-mix(in srgb,var(--creme) 7%,transparent);color:var(--creme);border:1px solid color-mix(in srgb,var(--creme) 18%,transparent)}
.formulaire .intitule{margin-bottom:.3rem}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.champs-2{grid-template-columns:1fr}}
.champ{display:grid;gap:.4rem}
.champ>span{font:700 .7rem/1 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase}
.champ b{font-weight:700}
.champ input,.champ select,.champ textarea{width:100%;font:500 1rem/1.3 var(--f-titre);color:inherit;background:transparent;border:0;border-bottom:1.5px solid currentColor;padding:.55rem 0;border-radius:0;appearance:none}
.champ select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.formulaire--sombre select option{color:#222}
.champ textarea{resize:vertical;min-height:4.5rem}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-bottom-width:2.5px}
.champ input[aria-invalid=true]{border-bottom-color:#b3261e}
.formulaire--sombre .champ input[aria-invalid=true]{border-bottom-color:#ffb4a9}
.choix{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.choix legend{font:700 .7rem/1 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.6rem;padding:0}
.choix label{position:relative}
.choix input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choix span{display:inline-block;padding:.55rem 1.1rem;border:1.5px solid currentColor;border-radius:999px;font:700 .78rem/1 var(--f-intitule);letter-spacing:.1em}
.choix input:checked+span{background:var(--citron);color:var(--olive);border-color:var(--citron)}
.choix input:focus-visible+span{outline:2px solid currentColor;outline-offset:3px}
.consentement{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;line-height:1.4}
.consentement input{margin:.15rem 0 0;width:1.05rem;height:1.05rem;accent-color:var(--olive);flex:none}
.formulaire--sombre .consentement input{accent-color:var(--citron)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formulaire .bouton{justify-self:start;margin-top:.4rem}
.formulaire__retour{margin:0;font-weight:600;min-height:1.4em}
.formulaire__retour.ok{font-size:1.15rem}
.formulaire.envoye .champ,.formulaire.envoye .consentement,.formulaire.envoye .choix,.formulaire.envoye .champs-2,.formulaire.envoye .bouton{display:none}

/* ---------- 06 Pro ---------- */
.pro{display:grid;grid-template-columns:1fr minmax(320px,560px);gap:clamp(2rem,6vw,6rem);align-items:start}
.conditions{margin:2.5rem 0 0;display:grid;gap:0}
.conditions>div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid color-mix(in srgb,var(--creme) 22%,transparent)}
.conditions dt{font:700 .75rem/1.5 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase;color:var(--citron)}
.conditions dd{margin:0;font-weight:500}
@media (max-width:960px){.pro{grid-template-columns:1fr}}

/* ---------- Pied ---------- */
.pied{background:var(--olive);color:var(--creme);padding:clamp(4rem,8vw,6.5rem) clamp(1rem,5vw,4.5rem) 2rem}
.pied .logo{color:var(--citron)}
.pied__haut{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem;padding-bottom:3rem;border-bottom:1px solid color-mix(in srgb,var(--creme) 22%,transparent)}
.pied__signature{font-size:clamp(1.4rem,3vw,2.3rem);font-weight:800;letter-spacing:-.04em;margin:0;color:var(--citron)}
.pied__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:2.5rem 0}
.pied__grille .intitule{color:var(--citron);margin-bottom:.8rem}
.pied__grille p{margin:0;line-height:1.7}
.pied__bas{font-size:.82rem;opacity:.75;margin:0}
@media (max-width:700px){.pied__grille{grid-template-columns:1fr}}

/* ---------- Pages légales ---------- */
.page-texte{padding:9rem 0 6rem}
.page-texte .cadre{max-width:760px}
.page-texte h1{font-size:clamp(2.6rem,7vw,4.8rem);margin-bottom:2.5rem}
.page-texte h2{font-size:1.5rem;letter-spacing:-.03em;margin:2.6rem 0 .8rem;line-height:1.15}
.page-texte .brouillon{background:var(--citron);padding:1rem 1.2rem;border-radius:12px;font-weight:600;font-size:.95rem}
.page-texte+.pied,.page-404+.pied{margin-top:0}
.page-404{min-height:80vh;display:grid;place-items:center;text-align:center;padding:8rem 1rem}
.page-404 .escalier{font-size:clamp(5rem,20vw,12rem);color:var(--olive);justify-items:start;margin-inline:auto;width:max-content}
.entete--clair{color:var(--olive)}
.entete--clair .bouton--petit{background:var(--olive);color:var(--citron)}

/* ---------- Animations d'apparition ---------- */
.js .revele{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .revele.vu{opacity:1;transform:none}
.js .escalier__ligne{opacity:0;transform:translateY(.25em)}
.js .pret .escalier__ligne{opacity:1;transform:none;transition:opacity .8s,transform .9s cubic-bezier(.2,.9,.3,1.25),color .25s}
.js .pret .escalier__ligne:nth-child(2){transition-delay:.12s,.12s,0s}
.js .pret .escalier__ligne:nth-child(3){transition-delay:.24s,.24s,0s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .revele,.js .escalier__ligne{opacity:1;transform:none}
}
.js .page-404 .escalier__ligne{opacity:1;transform:none}

/* ---------- Héro : lien pro ---------- */
.hero__pro{margin:-.6rem 0 1.4rem;font:600 .8rem/1.4 var(--f-intitule);letter-spacing:.1em;text-transform:uppercase}
.hero__pro a{color:var(--citron);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--citron) 45%,transparent)}
.hero__pro a:hover{border-bottom-color:var(--citron)}
.hero--pro .escalier{font-size:clamp(4rem,min(12vw,15vh),11rem)}

/* ---------- 02 Trouve ton accord ---------- */
.accords{overflow:hidden}
.accords__rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem max(1rem,calc((100% - 1280px)/2)) 2rem;scroll-padding-inline:max(1rem,calc((100% - 1280px)/2));perspective:1400px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.accords__rail::-webkit-scrollbar{display:none}
.accords__rail:focus-visible{outline:2px solid var(--citron);outline-offset:-4px}
.carte-accord{flex:0 0 clamp(270px,80vw,330px);scroll-snap-align:start;background:var(--teinte);color:var(--olive-profond);border-radius:26px;min-height:400px;display:flex;box-shadow:0 24px 40px rgba(0,0,0,.25);transform-style:preserve-3d;will-change:transform}
.carte-accord__face,.carte-accord__dos{width:100%;padding:1.5rem 1.4rem 1.4rem;display:flex;flex-direction:column}
.carte-accord__face{all:unset;box-sizing:border-box;width:100%;padding:1.5rem 1.4rem 1.4rem;display:flex;flex-direction:column;cursor:pointer;border-radius:26px}
.carte-accord__face:focus-visible{outline:2px solid var(--olive-profond);outline-offset:-6px}
.carte-accord__face[hidden],.carte-accord__dos[hidden]{display:none}
.portee-accord{width:100%;height:auto;margin:.4rem 0 auto;color:var(--olive-profond);opacity:.85}
.carte-accord__photo{width:calc(100% + 2.8rem);max-width:none;margin:-1.5rem -1.4rem auto;aspect-ratio:4/3;object-fit:cover;border-radius:26px 26px 0 0}
.carte-accord__num{font:700 .72rem/1.2 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin:1.4rem 0 .6rem}
.carte-accord__dos .carte-accord__num{margin-top:0}
.carte-accord__nom{font-weight:800;font-size:clamp(2.6rem,11vw,3.4rem);letter-spacing:-.055em;line-height:.9;display:block}
.carte-accord__plat{font-size:1.1rem;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-top:.7rem;display:block}
.carte-accord__retourner{margin-top:1.4rem;font:700 .72rem/1 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase;align-self:flex-start;border:1.5px solid currentColor;border-radius:999px;padding:.55rem .9rem}
.carte-accord__face:hover .carte-accord__retourner{background:var(--olive-profond);color:var(--teinte)}
.carte-accord__geste{font-size:1.35rem;font-weight:800;letter-spacing:-.035em;line-height:1.1;margin-bottom:1rem;outline:none}
.carte-accord__etapes{margin:0 0 1rem;padding-left:1.2rem;font-size:.92rem;line-height:1.4;display:grid;gap:.45rem}
.carte-accord__etapes li::marker{font-weight:800}
.carte-accord__ambiance{font-size:.88rem;margin:auto 0 .8rem;padding-top:.8rem;border-top:1px solid color-mix(in srgb,var(--olive-profond) 30%,transparent)}
.carte-accord__actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.6rem}
.carte-accord .bouton--petit{min-height:2.2rem;padding:.5rem .9rem;font-size:.66rem}
.carte-accord .bouton--inactif{background:transparent;border-color:currentColor;color:inherit}
.lien-action{background:none;border:0;padding:.3rem 0;margin-right:.6rem;font:700 .7rem/1.2 var(--f-intitule);letter-spacing:.12em;text-transform:uppercase;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:.25em}
.accords__pied{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.accords__indice{margin:0;font:600 .75rem/1 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase;color:var(--citron);opacity:.8}
.accords__fleches{display:flex;gap:.6rem}
.fleche{width:3rem;height:3rem;border-radius:50%;border:1.5px solid var(--citron);background:none;color:var(--citron);font-size:1.2rem;cursor:pointer;transition:background-color .2s,color .2s}
.fleche:hover{background:var(--citron);color:var(--olive-profond)}
@media (hover:none){.accords__fleches{display:none}}

/* ---------- Pro ---------- */
.pro-court .bouton{margin-top:1rem}
.lectures--2{grid-template-columns:repeat(2,1fr);row-gap:2.5rem}
.lecture__titre{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.045em;margin-bottom:.8rem}
@media (max-width:860px){.lectures--2{grid-template-columns:1fr}}
#produit .produit__visuel .etiquette{position:relative;width:min(240px,70%);height:auto;filter:drop-shadow(0 24px 30px rgba(47,59,36,.25));transform:rotate(-3deg)}
.fond-sauge .produit__visuel::before{background:var(--creme)}
.bouton--contour-olive{border-color:var(--olive);color:var(--olive);background:transparent}
.bouton--contour-olive:hover{background:var(--olive);color:var(--citron)}

/* ---------- Page d'un accord ---------- */
.accord-page__hero{padding:clamp(7rem,14vw,10rem) 0 clamp(3.5rem,7vw,5rem)}
.accord-page__titre{margin-bottom:1rem;max-width:none;overflow-wrap:anywhere}
.accord-page__plat{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:600;letter-spacing:-.03em;color:var(--creme);max-width:28ch}
.accord-page__portee{width:min(360px,80%);color:var(--citron);margin:1.5rem 0 1rem}
.accord-page__portee .portee-accord{color:var(--citron)}
.accord-page__grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.accord-page__geste{margin-top:0}
.accord-page__etapes{margin:0;padding:0;list-style:none;counter-reset:temps;display:grid;gap:0;border-top:1.5px solid var(--olive)}
.accord-page__etapes li{counter-increment:temps;display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.3rem 0;border-bottom:1px solid color-mix(in srgb,var(--olive) 40%,transparent);font-size:1.1rem}
.accord-page__etapes li::before{content:counter(temps);font-weight:800;font-size:2.2rem;letter-spacing:-.06em;line-height:1}
@media (max-width:860px){.accord-page__grille{grid-template-columns:1fr}}
.autres-accords{list-style:none;margin:0 0 2.5rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 2rem}
.autres-accords a{display:block;text-decoration:none;padding:1rem 0;border-top:1px solid color-mix(in srgb,var(--olive) 40%,transparent)}
.autres-accords span{display:block;font-weight:800;font-size:1.5rem;letter-spacing:-.04em}
.autres-accords small{font-size:.9rem}
.autres-accords a:hover span{text-decoration:underline;text-decoration-thickness:2px}

/* ---------- Olive dorée en particules (héro) ---------- */
.hero__olive{position:absolute;left:50%;top:50%;width:min(720px,140%);aspect-ratio:1;translate:-50% -50%;pointer-events:none}
@media (max-width:860px){.hero__olive{width:120vw}}
.hero__visuel{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.hero__visuel .bouteille{transition:opacity .45s,filter .45s}
.hero__visuel.montre-photo .bouteille{opacity:0;filter:blur(6px)}
.hero__astuce{position:absolute;bottom:-1.5rem;left:0;right:0;text-align:center;margin:0;font:600 .68rem/1 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase;color:var(--citron);opacity:.55;pointer-events:none}
.montre-photo .hero__astuce{opacity:0}
@media (prefers-reduced-motion:reduce){.hero__astuce{display:none}}

/* ---------- Héro : scène olive / bouteille (remplace la bouteille dessinée) ---------- */
.hero__scene{position:relative;width:min(880px,150%,86vh);aspect-ratio:1;margin-left:-30%;flex:none;cursor:grab}
.hero__scene .hero__olive{position:absolute;inset:0;width:100%;height:100%;translate:none;left:auto;top:auto}
.hero__bouteille{position:absolute;left:50%;top:54%;height:78.3%;width:auto;max-width:none;translate:-50% -50%;opacity:0;scale:.92;transition:opacity .3s,scale .45s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 30px 40px rgba(0,0,0,.4));transition:opacity .5s .25s;pointer-events:none}
.montre-bouteille .hero__bouteille{opacity:1;scale:1}
.montre-bouteille .hero__astuce{opacity:0}
.hero__visuel .hero__astuce{bottom:0}
@media (max-width:860px){.hero__scene{width:100%;max-width:520px;margin:-1rem auto 0}}
@media (min-width:861px){.hero{align-items:center;padding-top:5.5rem;padding-bottom:3rem}.hero__texte{margin-top:-2rem}}
.hero__scene.attrape,.attrape .hero__scene{cursor:grabbing}
.montre-bouteille .hero__bouteille{transition:opacity .25s .12s}

/* ---------- 01 Le nom : trois cartes ---------- */
.lectures--cartes{gap:1.2rem}
.lecture-carte{border-radius:28px;padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;min-height:440px;transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .35s;box-shadow:0 20px 40px rgba(47,59,36,.12)}
.lecture-carte:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 30px 50px rgba(47,59,36,.2)}
.lecture-carte--sauge{background:var(--sauge);color:var(--olive-profond)}
.lecture-carte--olive{background:var(--olive);color:var(--creme)}
.lecture-carte--or{background:linear-gradient(160deg,#f3dd8a,#d9b04a 55%,#b8862b);color:var(--olive-profond)}
.lecture-carte__visuel{height:170px;display:grid;place-items:center;margin-bottom:auto;overflow:visible}
.lecture-carte__portee{width:100%;max-width:240px}
.lecture-carte__portee .note{transform-box:fill-box;transform-origin:bottom;animation:note-saute 2.4s ease-in-out infinite}
.lecture-carte__portee .note:nth-of-type(2){animation-delay:.25s}
.lecture-carte__portee .note:nth-of-type(3){animation-delay:.5s}
@keyframes note-saute{0%,60%,100%{transform:none}20%{transform:translateY(-8px)}}
.lecture-carte__bouteille{height:230px;width:auto;max-width:none;transform:rotate(-28deg) translateY(10px);filter:drop-shadow(0 18px 20px rgba(0,0,0,.35));transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.lecture-carte:hover .lecture-carte__bouteille{transform:rotate(-58deg) translate(-10px,20px)}
.lecture-carte__goutte{height:150px;width:auto;filter:drop-shadow(0 14px 18px rgba(90,60,10,.35));animation:goutte 3.5s ease-in-out infinite}
@keyframes goutte{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.04)}}
.lecture-carte .lecture__mot{margin:1.4rem 0 .8rem}
.lecture-carte p{margin:0}
.lecture-carte__ecouter{margin-top:1.2rem;align-self:flex-start;background:var(--olive-profond);color:var(--citron);border:0;border-radius:999px;padding:.7rem 1.1rem;font:700 .72rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.lecture-carte__ecouter.joue{background:var(--olive)}
@media (max-width:860px){.lecture-carte{min-height:0}.lecture-carte__visuel{height:140px}.lecture-carte__bouteille{height:190px}}

/* ---------- 03 Les moments : polaroids ---------- */
.moments{overflow:hidden}
.moments__scene{position:relative;display:grid;place-items:center;min-height:clamp(520px,62vw,760px);margin-top:1rem}
.polaroid{grid-area:1/1;margin:0;width:clamp(190px,17vw,280px);background:#fbfaf2;padding:.8rem .8rem 0;box-shadow:0 30px 50px rgba(47,59,36,.25);transform:rotate(var(--r));transition:box-shadow .3s}
.polaroid img{width:100%;height:auto;aspect-ratio:944/1400;object-fit:cover;object-position:center 30%;display:block}
.polaroid figcaption{font:italic 700 1.05rem/1.2 var(--f-titre);letter-spacing:-.02em;padding:.9rem .2rem 1.1rem;color:var(--olive)}
.polaroid:hover{z-index:2;box-shadow:0 40px 70px rgba(47,59,36,.35)}
@media (max-width:860px){
  .moments__scene{display:flex;flex-direction:column;align-items:center;gap:2rem;min-height:0}
  .polaroid{width:min(78vw,340px)}
  .polaroid:nth-child(2){align-self:flex-end;margin-right:4vw}
  .polaroid:nth-child(1){align-self:flex-start;margin-left:4vw}
}

/* ---------- Héro : photo d'ambiance en fond (légèrement floutée dans le fichier) ---------- */
.hero:not(.hero--pro){isolation:isolate}
.hero:not(.hero--pro)::before{content:"";position:absolute;top:0;bottom:0;left:26%;width:min(60%,880px);z-index:-1;background:url(/assets/fond-accueil.jpg) center 22%/cover no-repeat;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 75%,transparent)}
@media (max-width:860px){.hero:not(.hero--pro)::before{width:100%;opacity:.4;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}}

/* ---------- Bandeau défilant ---------- */
.bandeau{background:var(--citron);color:var(--olive-profond);overflow:hidden;border-block:1.5px solid var(--olive-profond)}
.bandeau__piste{display:flex;width:max-content;gap:2rem;padding:1rem 0;font:800 clamp(1.1rem,2.2vw,1.6rem)/1 var(--f-titre);letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;animation:defile 32s linear infinite}
.bandeau__piste span:nth-child(even){color:var(--olive);opacity:.6}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- Questions ---------- */
.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.faq__liste{border-top:1.5px solid var(--olive)}
.faq details{border-bottom:1px solid color-mix(in srgb,var(--olive) 45%,transparent)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.3rem 0;font-size:clamp(1.15rem,2vw,1.45rem);font-weight:800;letter-spacing:-.03em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.6em;line-height:.8;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 1.4rem;max-width:52ch;font-size:1.08rem}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* ---------- Bouton fixe téléphone ---------- */
.cta-mobile{display:none}
@media (max-width:860px){
  .cta-mobile{display:flex;position:fixed;left:1rem;right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));z-index:55;box-shadow:0 12px 30px rgba(0,0,0,.3);transform:translateY(150%);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
  .cta-mobile.visible{transform:none}
}

/* ---------- L'huile : vraie bouteille ---------- */
.produit__photo{position:relative;height:min(560px,70vh);width:auto;max-width:none;filter:drop-shadow(0 30px 40px rgba(47,59,36,.3));transform:rotate(-4deg)}
@media (max-width:860px){.produit__photo{height:380px}}

/* ---------- Rythme : sections un peu plus serrées ---------- */
.section{padding:clamp(4rem,8vw,7.5rem) 0}
.moments__scene{min-height:clamp(480px,50vw,640px)}
@media (prefers-reduced-motion:reduce){.bandeau__piste{animation:none}}

/* ---------- Accords : verbes (façon « so many ways ») ---------- */
.accords__tete{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center}
.verbes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem 2rem;font:italic 800 clamp(1.5rem,3vw,2.6rem)/1.15 var(--f-titre);letter-spacing:-.04em;color:var(--citron)}
.verbes li{opacity:.35;transition:opacity .3s,transform .3s}
.verbes li:nth-child(odd){transform:translateX(-.3em)}
.verbes li:hover{opacity:1}
.verbes li.allume{opacity:1}
@media (max-width:860px){.accords__tete{grid-template-columns:1fr}.verbes{grid-template-columns:repeat(4,auto);justify-content:start;font-size:1.25rem;gap:.2rem 1rem}}

/* ---------- Le saviez-vous ---------- */
.savoir__grille{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.savoir__titre{font:italic 900 clamp(3rem,8vw,7rem)/.9 var(--f-titre);letter-spacing:-.06em;transform:rotate(-4deg);color:var(--olive)}
.savoir__carte{background:var(--citron);border:1.5px solid var(--olive);border-radius:28px;padding:clamp(1.6rem,3vw,2.6rem);box-shadow:8px 8px 0 var(--olive)}
.savoir__piste p{margin:0;min-height:5.5em;font-size:clamp(1.2rem,2vw,1.55rem);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.savoir__nav{display:flex;align-items:center;gap:1rem;margin-top:1.4rem}
.savoir__compte{font:700 .8rem/1 var(--f-intitule);letter-spacing:.16em}
.fleche--olive{border-color:var(--olive);color:var(--olive)}
.fleche--olive:hover{background:var(--olive);color:var(--citron)}
@media (max-width:860px){.savoir__grille{grid-template-columns:1fr}}

/* ---------- Pied : ton complice + logo géant ---------- */
.pied__amis{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2rem;padding:2rem 0;border-top:1px solid color-mix(in srgb,var(--creme) 22%,transparent);margin-bottom:1.5rem}
.pied__amis p{margin:0;font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:700;letter-spacing:-.03em;line-height:1.2}
.pied__geant{margin:2.5rem 0 -0.12em;padding-top:.18em;font-weight:900;font-style:italic;font-size:clamp(4.5rem,22vw,21rem);line-height:.95;letter-spacing:-.06em;color:var(--citron);text-align:center;white-space:nowrap;overflow:hidden}

/* ---------- Le nom : cartes photo ---------- */
.lecture-carte--photo{position:relative;overflow:hidden;color:var(--creme);background:var(--photo) var(--pos,center)/cover no-repeat;justify-content:flex-end;isolation:isolate}
.lecture-carte--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(30,38,22,.85) 100%);transition:opacity .4s}
.lecture-carte--photo{background-size:115%;transition:background-size .8s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .35s}
.lecture-carte--photo:hover{background-size:125%}
.lecture-carte--or-photo .lecture__mot{color:#f3dd8a}
@media (max-width:860px){.lecture-carte--photo{min-height:380px}}

/* ---------- Moments : jeu de mots ---------- */
.moments__tete{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.jeu-mots{margin:0;display:flex;flex-wrap:wrap;gap:.05em .25em;font:italic 900 clamp(2.4rem,6vw,5.6rem)/.95 var(--f-titre);letter-spacing:-.05em;color:var(--olive)}
.jeu-mots span{display:inline-block}
.jeu-mots span:nth-child(2){transform:translateY(.12em)}
.jeu-mots span:nth-child(3){transform:translateY(.24em)}
.jeu-mots__fin{flex-basis:100%;font-size:.8em}
.jeu-mots__or{background:linear-gradient(90deg,#b8862b,#f3dd8a,#c9a227);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.1em}
@media (max-width:860px){.moments__tete{grid-template-columns:1fr}}

/* ---------- Manifeste : karaoké collant ---------- */
.manifeste2{position:relative;height:260vh}
.manifeste2__collant{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.manifeste2__fond{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.16;filter:grayscale(.4) blur(2px)}
.manifeste2__contenu{position:relative}
.manifeste2__texte{font-size:clamp(2rem,5vw,4.6rem);line-height:1.05;letter-spacing:-.045em;max-width:22ch;font-weight:800}
.manifeste2__texte .mot{color:color-mix(in srgb,var(--creme) 22%,transparent);transition:color .35s}
.manifeste2__texte .mot.allume{color:var(--citron)}
@media (prefers-reduced-motion:reduce){.manifeste2{height:auto}.manifeste2__collant{position:relative;height:auto;padding:6rem 0}}

/* ---------- La Classique : bouteille 3D ---------- */
.produit2__grille{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.produit2__titre{margin-bottom:1.5rem}
.scene3d{position:relative;height:min(78vh,680px);perspective:6000px;display:grid;place-items:center;cursor:grab;touch-action:pan-y;user-select:none}
.scene3d:active{cursor:grabbing}
.scene3d__halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f3dd8a 0%,color-mix(in srgb,var(--sauge) 70%,transparent) 45%,transparent 70%);opacity:.75}
.scene3d__bouteille{position:relative;height:88%;aspect-ratio:240/1020;transform-style:preserve-3d;will-change:transform}
.scene3d__bouteille img{position:absolute;inset:0;width:100%;height:100%;max-width:none;backface-visibility:visible;pointer-events:none}
.scene3d__bouteille .couche-verre{filter:brightness(.16) saturate(.5)}
.scene3d__bouteille .couche-dos{filter:brightness(.5) blur(.5px)}
.scene3d__reflet{position:absolute;inset:4% 30%;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);mix-blend-mode:screen;pointer-events:none;-webkit-mask:url(/assets/bouteille.webp) center/contain no-repeat;mask:url(/assets/bouteille.webp) center/contain no-repeat;inset:0}
.scene3d__ombre{position:absolute;bottom:4%;width:38%;height:22px;border-radius:50%;background:radial-gradient(rgba(47,59,36,.45),transparent 70%)}
.scene3d__astuce{position:absolute;bottom:0;margin:0;font:600 .7rem/1 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.pastilles{list-style:none;margin:1.8rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.pastilles li{border:1.5px solid var(--olive);border-radius:999px;padding:.6rem 1rem;font-weight:600;font-size:.95rem}
.pastilles b{font:700 .66rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase;margin-right:.5rem;opacity:.7}
.produit2__achat{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin:1.6rem 0 1.4rem}
.bouton--grand{min-height:3.6rem;padding:1rem 2rem;font-size:.9rem;box-shadow:5px 5px 0 var(--citron)}
@media (max-width:860px){.produit2__grille{grid-template-columns:1fr}.scene3d{height:480px}}

/* ---------- Bouteille 3D : face et dos ---------- */
.scene3d__bouteille .couche-face{backface-visibility:hidden}
.couche-arriere{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.couche-arriere__verre{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.couche-arriere__verre{-webkit-mask:linear-gradient(#000,#000);}
.couche-arriere__etiquette{position:absolute;left:10%;width:80%;top:40%;height:auto;filter:brightness(.95)}
.scene3d__bouteille .couche-dos{display:none}

/* ---------- Manifeste : mise en page aérée ---------- */
.manifeste2__texte{max-width:none}
.manifeste2__titre{font-size:clamp(2.8rem,7vw,6.4rem);line-height:.95;letter-spacing:-.055em;margin:0 0 2.2rem;font-weight:900}
.manifeste2__trio{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.25;letter-spacing:-.035em;font-weight:700;margin:0 0 2rem}
.manifeste2__corps{font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.45;font-weight:500;max-width:40ch;margin:0 0 2rem;letter-spacing:-.01em}
.manifeste2__fin{font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.2;font-weight:800;font-style:italic;letter-spacing:-.035em;margin:0}

/* ---------- Le nom : partition à l'huile ---------- */
.lecture-carte--partition{position:relative;overflow:hidden;justify-content:flex-end;color:var(--olive-profond);background:#efe8cf;isolation:isolate}
.partition-huile{position:absolute;inset:0;width:100%;height:100%;z-index:-1;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.lecture-carte--partition:hover .partition-huile{transform:scale(1.06)}
.lecture-carte--partition::after{content:"";position:absolute;inset:45% 0 0;z-index:-1;background:linear-gradient(180deg,transparent,rgba(239,232,207,.95) 55%)}
.note-huile{transform-box:fill-box;transform-origin:center;animation:goutte-note 3s ease-in-out infinite}
.note-huile:nth-child(2){animation-delay:.3s}.note-huile:nth-child(3){animation-delay:.6s}
@keyframes goutte-note{0%,70%,100%{transform:none}35%{transform:translateY(-5px)}}
@media (max-width:860px){.lecture-carte--partition{min-height:380px}}
.couche-arriere{opacity:0;transform-style:flat}
.de-dos .couche-arriere{opacity:1}
.de-dos .couche-verre,.de-dos .couche-face{opacity:0}
.de-dos .scene3d__reflet{opacity:0!important}

/* ---------- Bouteille : vues photo superposées ---------- */
.scene3d__bouteille{aspect-ratio:300/860;height:92%}
.scene3d__bouteille img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;transition:none}

/* ---------- Bouteille 3D (cube texturé) ---------- */
.scene3d__bouteille{transform-style:preserve-3d}
.b3d__cube{position:absolute;inset:0;transform-style:preserve-3d}
.b3d__face{position:absolute;background-repeat:no-repeat;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:0 0 10px 10px;overflow:hidden}
.b3d__face--epaule{border-radius:0}
.b3d__face i{position:absolute;inset:0;background:#0d1208;pointer-events:none}
.b3d__goulot{position:absolute;left:0;top:0;z-index:4;background-repeat:no-repeat;pointer-events:none}
.b3d__epaule{position:absolute;left:0;z-index:3;background-repeat:no-repeat;pointer-events:none;transform-origin:50% 50%}
.b3d__lamelle{position:absolute;background-repeat:no-repeat;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.b3d__lamelle i{position:absolute;inset:0;background:#0d1208;pointer-events:none}
.b3d__cou{position:absolute;z-index:5;pointer-events:none;display:flex;flex-direction:column}
.b3d__bouchon{display:block;flex:none;height:var(--bouchon);border-radius:4px 4px 2px 2px;background:repeating-linear-gradient(90deg,#0b0d08 0 2px,#2a2e22 2px 3px,#0b0d08 3px 5px),#111;box-shadow:inset 10px 0 12px rgba(0,0,0,.7),inset -10px 0 12px rgba(0,0,0,.7),inset 0 3px 0 rgba(255,255,255,.12)}
.b3d__bouchon::after{content:"";position:absolute}
.b3d__verre{display:block;flex:1;margin:0 7%;background:linear-gradient(90deg,#0f1408 0%,#2b3613 20%,#5d6a2a 32%,#3a4618 44%,#232c10 70%,#0c1006 100%)}

/* ---------- La Classique : photo de la bouteille (3D en pause) ---------- */
.scene3d--photo{cursor:default}
.scene3d__photo{position:relative;height:90%;width:auto;max-width:none;filter:drop-shadow(0 30px 34px rgba(47,59,36,.3));animation:flotte 7s ease-in-out infinite;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.scene3d--photo:hover .scene3d__photo{transform:rotate(-6deg) translateY(-8px)}

/* ================= PAGE PRO ================= */
.pro-hero{padding:clamp(7rem,12vw,9rem) 0 clamp(3.5rem,7vw,5rem);overflow:hidden}
.pro-hero__grille{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.pro-hero__titre{color:var(--citron);font-size:clamp(3rem,7.2vw,6.6rem);line-height:.9;letter-spacing:-.055em;margin:0 0 1.6rem;font-weight:900}
.pro-hero__titre em{font-style:italic;background:linear-gradient(90deg,#f3dd8a,#c9a227);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.02em;margin-right:-.02em}
.pro-hero__rayon{margin:0;background:#fbfaf2;padding:.8rem .8rem 0;transform:rotate(2deg);box-shadow:0 40px 60px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.2,.7,.2,1);will-change:transform}
.pro-hero__rayon img{width:100%;height:auto;display:block}
.pro-hero__rayon figcaption{font:italic 700 .95rem/1 var(--f-titre);color:var(--olive);padding:.9rem .2rem 1rem}
@media (max-width:860px){.pro-hero__grille{grid-template-columns:1fr}.pro-hero__rayon{max-width:360px;justify-self:center}}

.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1rem}
.chiffre{background:var(--olive);color:var(--creme);border-radius:28px;padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.8rem;min-height:280px}
.chiffre--or{background:linear-gradient(160deg,#f3dd8a,#d9b04a 55%,#b8862b);color:var(--olive-profond)}
.chiffre .chiffre__nombre{font-size:clamp(3rem,6vw,5.4rem);font-weight:900;letter-spacing:-.06em;line-height:.9;margin:0 0 auto;color:var(--citron);font-variant-numeric:tabular-nums}
.chiffre.chiffre--or .chiffre__nombre{color:var(--olive-profond)}
.chiffre p{margin:0;font-size:1.05rem;line-height:1.4}
.renvoi{font-size:.65em;opacity:.7;margin-left:.15em}
@media (max-width:860px){.chiffres{grid-template-columns:1fr}.chiffre{min-height:0}}

.pro-origine{position:relative;overflow:hidden;isolation:isolate}
.pro-origine__fond{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.18;z-index:-1;filter:grayscale(.3)}

.pro-rayon{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.pro-rayon__visuel img{width:100%;height:auto;border-radius:24px;box-shadow:0 30px 50px rgba(47,59,36,.25)}
.atouts{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--olive);counter-reset:a}
.atouts li{counter-increment:a;position:relative;display:block;padding:1.2rem 0 1.2rem 4rem;border-bottom:1px solid color-mix(in srgb,var(--olive) 40%,transparent);font-size:1.08rem;line-height:1.45}
.atouts li::before{content:"0" counter(a);position:absolute;left:0;top:1.15rem;font-weight:900;font-size:1.4rem;letter-spacing:-.04em}
.atouts b{display:block;font-size:1.25rem;letter-spacing:-.03em;margin-bottom:.2rem}
@media (max-width:860px){.pro-rayon{grid-template-columns:1fr}.pro-rayon__visuel{max-width:420px}}

.appuis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.appui{border:1.5px solid var(--olive);border-radius:24px;padding:1.6rem;background:var(--creme);box-shadow:6px 6px 0 var(--olive);transition:transform .3s,box-shadow .3s}
.appui:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--olive)}
.appui__num{font:900 2.4rem/1 var(--f-titre);letter-spacing:-.06em;color:var(--sauge);-webkit-text-stroke:1.5px var(--olive)}
.appui h3{font-size:1.35rem;letter-spacing:-.035em;margin:1rem 0 .6rem;line-height:1.05}
.appui p{margin:0;font-size:.98rem}
.moments-pro{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem}
.moments-pro img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 30%;border-radius:20px}
@media (max-width:960px){.appuis{grid-template-columns:1fr 1fr}.moments-pro{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.appuis{grid-template-columns:1fr}}
.sources-pro{padding:2rem 0}

/* ---------- La Classique : bouteille WebGL ---------- */
.scene3d--webgl{cursor:grab}
.scene3d--webgl:active{cursor:grabbing}
.scene3d__canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity .6s}
.scene3d--webgl.est-3d .scene3d__canvas{opacity:1}
.scene3d--webgl.est-3d .scene3d__photo,.scene3d--webgl.est-3d .scene3d__ombre{opacity:0;transition:opacity .4s}
.scene3d--webgl:not(.est-3d) .scene3d__astuce{display:none}

/* ---------- Accueil : olive → goutte → bouteille ---------- */
.hero__goutte3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.hero--histoire .hero__bouteille{translate:-50% -46%;transition:opacity .5s,translate .9s cubic-bezier(.2,1.4,.4,1),scale .9s cubic-bezier(.2,1.4,.4,1)}
.hero--histoire .montre-bouteille .hero__bouteille{translate:-50% -50%;scale:1;transition:opacity .45s,translate .9s cubic-bezier(.2,1.4,.4,1),scale .9s cubic-bezier(.2,1.4,.4,1)}
.hero--histoire .montre-bouteille .hero__astuce,.hero--histoire .montre-goutte .hero__astuce{opacity:.7}
.hero--histoire .montre-bouteille .hero__scene,.hero--histoire .montre-goutte .hero__scene{cursor:pointer}
@media (prefers-reduced-motion:reduce){.hero--histoire .hero__bouteille{opacity:1;translate:-50% -50%}}
.hero--histoire .hero__bouteille{aspect-ratio:240/1020}
.hero__corps{display:block;width:100%;height:100%;max-width:none}
.hero__bouchon{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;transform-origin:50% 100%;will-change:transform}
/* fond : les vidéos LADORÉ, sous un voile sombre léger pour la lisibilité */
.hero.hero--histoire::before{display:none}
/* aucun voile sur les vidéos (02/11, demande de Ziad : les vidéos telles quelles) ; seule une ombre portée sur les lettres garde le texte lisible */
.hero--histoire .hero__filigrane{display:none}
/* ordinateur : la story verticale (rayon, pizza) à droite, à la place du film des olives ; téléphone : l'inverse */
.hero__story{display:none}
@media (min-width:861px){
  .hero--histoire .hero__story{display:block;position:relative;height:min(74vh,700px);aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:var(--olive-profond);box-shadow:0 30px 70px rgba(0,0,0,.4)}
  .hero--histoire .hero__scene--film{display:none}
}
.hero--histoire .hero__texte,.hero--histoire .hero__baseline{text-shadow:0 2px 24px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.45)}
@keyframes respire{from{transform:scale(1)}to{transform:scale(1.08) translateX(-1.5%)}}
.hero__filigrane{position:absolute;z-index:0;right:-7vw;bottom:6%;font:900 clamp(6rem,19vw,20rem)/.8 var(--f-titre);letter-spacing:-.06em;color:var(--creme);opacity:.08;rotate:-9deg;pointer-events:none;white-space:nowrap;-webkit-user-select:none;user-select:none}
@media (max-width:860px){
  .hero__filigrane{bottom:auto;top:52%;right:-8vw;font-size:34vw}
}
@media (prefers-reduced-motion:reduce){.hero.hero--histoire::before{animation:none}}

/* ---------- Accords : filtres « À cru / En cuisson » ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.filtre{font:700 .78rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase;color:var(--citron);background:transparent;border:1.5px solid color-mix(in srgb,var(--citron) 45%,transparent);border-radius:999px;padding:.75rem 1.1rem;cursor:pointer;display:inline-flex;gap:.55rem;align-items:center;transition:background .25s,color .25s,border-color .25s}
.filtre span{font-size:.7rem;opacity:.6}
.filtre:hover{border-color:var(--citron)}
.filtre[aria-pressed="true"]{background:var(--citron);color:var(--olive-profond);border-color:var(--citron)}
.filtre:focus-visible{outline:2px solid var(--citron);outline-offset:3px}
.carte-accord[hidden]{display:none}
.carte-accord__usage{position:absolute;top:1rem;left:1rem;font:700 .66rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase;background:rgba(251,250,242,.92);color:var(--olive-profond);border-radius:999px;padding:.5rem .75rem;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.carte-accord__face{position:relative}

/* ---------- Accueil sur téléphone : l'olive dès le premier écran ---------- */
.hero__rassure{margin:-.8rem 0 1.4rem;font-size:.9rem;color:var(--creme);opacity:.75}
@media (max-width:860px){
  .hero--histoire{display:flex;flex-direction:column;align-items:stretch;padding-top:5.2rem;padding-bottom:3rem;gap:0}
  .hero--histoire .hero__texte{display:contents}
  .hero--histoire .intitule{order:1;margin-bottom:.4rem;font-size:.66rem}
  .hero--histoire .escalier{order:2;font-size:clamp(3.2rem,17vw,5.4rem);margin:.4rem 0 0}
  .hero--histoire .hero__visuel{order:3;margin:-2.2rem 0 .6rem}
  .hero--histoire .hero__scene{width:min(100%,42vh);margin:0 auto}
  .hero--histoire .hero__baseline{order:4}
  .hero--histoire .hero__actions{order:5;margin:1.2rem 0 1.2rem}
  .hero--histoire .hero__rassure{order:6;margin:-.4rem 0 1rem}
  .hero--histoire .hero__pro{order:7;margin:0 0 1rem}
  .hero--histoire .accord{order:8;align-self:flex-start}
}
@media (max-width:860px){.verbes{display:none}.filtres{margin-top:.4rem}}
@media (min-width:861px){.hero--histoire .escalier{font-size:clamp(4.4rem,min(13vw,15.5vh),12rem);margin-bottom:1.2rem}}

/* ---------- 05 Le voyage : de l'arbre à la table, au défilement ---------- */
.voyage{position:relative}
.voyage__collant{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:100vh;overflow:hidden}
.voyage__texte{position:relative;z-index:2;padding:clamp(5rem,9vh,7rem) clamp(1rem,5vw,4.5rem) 3rem;display:flex;flex-direction:column;justify-content:center}
.voyage__titre{color:var(--citron);font-size:clamp(2.6rem,5.4vw,5.2rem);line-height:.92;letter-spacing:-.055em;font-weight:800;margin:0 0 2.2rem;max-width:12ch}
.voyage__etapes{list-style:none;margin:0;padding:0 0 0 1.6rem;display:grid;gap:1.1rem;max-width:30rem}
.voyage__etape{position:relative;transition:opacity .5s}
.voyage__etape h3{font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.04em;line-height:1.05;margin:0;font-weight:800;color:var(--creme)}
.voyage__etape p{margin:.5rem 0 0;font-size:1.05rem;line-height:1.45;color:var(--creme);opacity:.85}
.voyage__num{position:absolute;z-index:1;left:-1.6rem;top:.35em;font:700 .7rem/1 var(--f-intitule);letter-spacing:.12em;color:var(--citron)}
.voyage__images{position:relative;min-height:60vh}
.voyage__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity 1s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.voyage__image.est-active{opacity:1;transform:scale(1)}
.voyage__image--bouteille{display:grid;place-items:center;background:radial-gradient(circle at 50% 55%,rgba(232,196,92,.42),rgba(201,162,39,.12) 38%,transparent 65%),var(--olive-profond)}
.voyage__image--bouteille img{height:min(72vh,620px);width:auto;filter:drop-shadow(0 40px 50px rgba(0,0,0,.45))}
/* Avec JavaScript : la scène reste en place, les étapes défilent. */
.js .voyage{height:400vh}
.js .voyage__collant{position:sticky;top:0;height:100vh;height:100svh;grid-template-columns:1fr}
.js .voyage__images{position:absolute;left:50%;right:0;top:0;bottom:0;min-height:0}
.js .voyage__texte{width:50%}
.js .voyage__images::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--olive-profond),color-mix(in srgb,var(--olive-profond) 50%,transparent) 14%,transparent 34%);pointer-events:none}
.js .voyage__etape{opacity:.32}
.js .voyage__etape.est-active{opacity:1}
.js .voyage__etape.est-active p{max-height:12em;margin-top:.5rem;opacity:.85;transition:max-height .7s cubic-bezier(.2,.7,.2,1),margin .5s,opacity .7s .1s}
.js .voyage__etape p{max-height:0;overflow:hidden;margin-top:0;opacity:0;transition:max-height .5s,margin .4s,opacity .3s}
.voyage__etapes{position:relative}
.js .voyage__etapes::before{content:"";position:absolute;left:.25rem;top:.3rem;bottom:.3rem;width:2px;background:color-mix(in srgb,var(--citron) 22%,transparent);border-radius:2px}
.js .voyage__etapes::after{content:"";position:absolute;left:.25rem;top:.3rem;width:2px;height:calc((100% - .6rem) * var(--avance,0));background:linear-gradient(#f3dd8a,#c9a227);border-radius:2px;box-shadow:0 0 12px rgba(243,221,138,.6)}
.js .voyage__etapes{padding-left:2.2rem}
.js .voyage__num{left:-2.2rem;width:1rem;text-align:center;top:.2em;background:var(--olive-profond);padding:.25rem 0;margin-left:-.25rem}
@media (max-width:860px){
  .voyage__collant{grid-template-columns:1fr}
  .voyage__images{min-height:70vh}
  .js .voyage__images{left:0}
  .js .voyage__images::before{background:linear-gradient(180deg,rgba(28,36,20,.55),rgba(28,36,20,.15) 30%,rgba(28,36,20,.75) 62%,var(--olive-profond) 92%)}
  .js .voyage__texte{width:auto;justify-content:flex-end;padding-bottom:6.2rem}
  .js .voyage__titre{font-size:2.1rem;margin-bottom:1.1rem}
  .js .voyage__etapes{gap:.7rem}
  .js .voyage__etape h3{font-size:1.25rem}
  .voyage__image--bouteille{place-items:start center;padding-top:11vh}
  .voyage__image--bouteille img{height:38vh}
}
@media (prefers-reduced-motion:reduce){
  .js .voyage{height:auto}
  .js .voyage__collant{position:relative;height:auto;min-height:100vh}
  .js .voyage__etape{opacity:1}
  .js .voyage__etape p{max-height:none;opacity:.85;margin-top:.5rem}
  .js .voyage__etapes::after{display:none}
  .voyage__image{transition:none}
}

/* ---------- 08 À offrir ---------- */
.offrir__grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.offrir{overflow:hidden}
.offrir__scene{position:relative;height:min(78vh,620px)}
.offrir__halo{position:absolute;inset:8% 4% 0;border-radius:50%;background:radial-gradient(circle at 50% 60%,rgba(232,196,92,.38),rgba(201,162,39,.1) 45%,transparent 70%)}
.offrir__bouteille{position:absolute;bottom:0;left:50%;height:88%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));transform-origin:50% 100%;transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.offrir__bouteille--g{transform:translateX(-96%) rotate(-11deg) scale(.86)}
.offrir__bouteille--d{transform:translateX(-4%) rotate(11deg) scale(.86)}
.offrir__scene:hover .offrir__bouteille--g{transform:translateX(-104%) rotate(-15deg) scale(.86)}
.offrir__scene:hover .offrir__bouteille--d{transform:translateX(4%) rotate(15deg) scale(.86)}
.offrir__etiquette{position:absolute;left:calc(50% + 2.2rem);top:30%;z-index:2;background:#fbfaf2;color:var(--olive-profond);border-radius:6px 14px 14px 6px;padding:.9rem 1.2rem .8rem 1.6rem;min-width:9.5rem;box-shadow:0 18px 30px rgba(0,0,0,.35);transform:rotate(8deg);transform-origin:0 50%;animation:etiquette 4.5s ease-in-out infinite;display:grid;gap:.15rem}
.offrir__etiquette::before{content:"";position:absolute;left:.55rem;top:50%;width:.5rem;height:.5rem;margin-top:-.25rem;border-radius:50%;background:var(--olive-profond);box-shadow:inset 0 0 0 2px #fbfaf2}
.offrir__etiquette::after{content:"";position:absolute;right:100%;top:50%;width:3.4rem;height:2px;background:linear-gradient(90deg,transparent,#c9a227);transform:rotate(-14deg);transform-origin:100% 50%}
.offrir__pour{font:700 .62rem/1 var(--f-intitule);letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.offrir__nom{font:italic 800 1.9rem/1 var(--f-titre);letter-spacing:-.04em;max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offrir__signe{font:700 .6rem/1 var(--f-intitule);letter-spacing:.2em;margin-top:.3rem;color:#a5841f}
@keyframes etiquette{0%,100%{transform:rotate(8deg)}50%{transform:rotate(3deg)}}
.offrir__champ{display:grid;gap:.45rem;max-width:20rem;margin:1.6rem 0 1.8rem;font:700 .72rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase;color:var(--citron)}
.offrir__champ input{font:600 1.1rem/1.2 inherit;font-family:inherit;letter-spacing:0;text-transform:none;color:var(--creme);background:transparent;border:0;border-bottom:1.5px solid color-mix(in srgb,var(--citron) 50%,transparent);padding:.5rem 0;border-radius:0}
.offrir__champ input:focus{outline:none;border-bottom-color:var(--citron)}
.offrir__champ input::placeholder{color:var(--creme);opacity:.4}
.offrir__idees{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.7rem;color:var(--creme);font-size:1.05rem;line-height:1.4}
.offrir__idees li{padding-left:1.4rem;position:relative}
.offrir__idees li::before{content:"✦";position:absolute;left:0;color:var(--citron);font-size:.8em;top:.15em}
.offrir__idees b{color:var(--citron)}
@media (max-width:860px){
  .offrir__grille{grid-template-columns:1fr}
  .offrir__scene{height:min(56vh,420px);order:2}
  .offrir__etiquette{left:calc(50% + 1.4rem);min-width:8rem;padding:.7rem 1rem .6rem 1.4rem}
  .offrir__nom{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){.offrir__etiquette{animation:none}.offrir__bouteille{transition:none}}

/* ---------- Carnet des accords offert à l'inscription ---------- */
.cadeau-carnet{display:flex;gap:1.2rem;align-items:center;margin-top:1.8rem;max-width:34rem}
.cadeau-carnet p{margin:0;line-height:1.45}
.cadeau-carnet__couv{flex:none;width:74px;aspect-ratio:148/210;background:var(--olive-profond);color:var(--citron);border-radius:3px 8px 8px 3px;padding:.55rem .5rem;font:800 .72rem/.95 var(--f-titre);letter-spacing:-.03em;box-shadow:6px 10px 20px rgba(47,59,36,.3),inset 3px 0 0 rgba(255,255,255,.08);transform:rotate(-5deg);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.cadeau-carnet:hover .cadeau-carnet__couv{transform:rotate(-1deg) translateY(-4px)}
.formulaire__carnet{margin-top:.8rem;display:inline-flex}

/* ---------- Image fixe de l'olive, le temps que la 3D se charge ---------- */
.hero__affiche{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:opacity .4s}
.olive-prete .hero__affiche{opacity:0}

/* ---------- Bouton Shop : une petite olive dorée en particules qui tourne, dans une pastille ---------- */
.entete__droite{display:flex;align-items:center;gap:.8rem}
.shop{position:relative;width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:50%;overflow:hidden;text-decoration:none;background:radial-gradient(circle at 50% 45%,#3d4b2c,var(--olive-profond) 70%);box-shadow:0 0 0 1.5px color-mix(in srgb,#e6c35c 55%,transparent),0 6px 16px rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .35s}
.shop:hover{transform:scale(1.08) rotate(-4deg);box-shadow:0 0 0 1.5px #e6c35c,0 8px 22px rgba(201,162,39,.4)}
.shop:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.shop__olive{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.shop__texte{position:relative;font:800 .66rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 0 6px var(--olive-profond),0 0 2px var(--olive-profond)}
@media (max-width:420px){.entete__droite{gap:.5rem}.entete .bouton--petit{padding-inline:1rem}}
/* Bouteille remplie : un trait de lumière glisse sur le verre */
.hero__bouteille::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,240,200,.55) 48%,rgba(255,255,255,.75) 50%,rgba(255,240,200,.55) 52%,transparent 65%) 220% 0/250% 100% no-repeat;mix-blend-mode:screen;-webkit-mask:url(/assets/bouteille-corps.webp) center/100% 100% no-repeat;mask:url(/assets/bouteille-corps.webp) center/100% 100% no-repeat}
.bouteille-pleine .hero__bouteille::after{animation:reflet-verre 1.6s 3.9s cubic-bezier(.5,0,.3,1) both}
@keyframes reflet-verre{from{background-position:220% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.bouteille-pleine .hero__bouteille::after{animation:none}}
/* La bouteille et ses olives en apesanteur : la toile déborde du cadre pour que rien ne soit coupé net, et passe sous le texte */
.produit2{overflow:clip}
.produit2 .scene3d__canvas{inset:-12% -30%!important;width:160%!important;height:124%!important;pointer-events:none}
.produit2 .produit__infos{position:relative;z-index:1}
/* Le film des olives : plein écran, fond vert sauge uni comme un studio */
.film{position:relative;height:100vh;height:100svh;min-height:520px;background:var(--sauge);overflow:hidden}
.film__scene{position:absolute;inset:0;display:grid;place-items:center}
.film__toile{position:absolute;inset:0;width:100%!important;height:100%!important}
.film__repli{height:78%;width:auto;filter:drop-shadow(0 30px 34px rgba(47,59,36,.3));transition:opacity .4s}
.film--pret .film__repli{opacity:0}
.film__fin{position:absolute;left:0;right:0;bottom:clamp(1.5rem,6vh,4rem);margin:0;display:flex;flex-direction:column;align-items:center;gap:.3rem;color:var(--olive-profond);opacity:0;translate:0 12px;transition:opacity .8s,translate .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.film__fin b{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.05em;line-height:1}
.film__fin span{font-weight:600}
.film--fin .film__fin{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.film__fin{opacity:1;translate:none}}
@media (min-aspect-ratio:11/10){.film__fin{left:58%;right:auto;top:50%;bottom:auto;translate:0 calc(-50% + 12px);align-items:flex-start}.film--fin .film__fin{translate:0 -50%}.film__fin b{font-size:clamp(3rem,7vw,6.5rem)}.film__fin span{font-size:1.15rem}}
@media (max-aspect-ratio:11/10){.film__fin{bottom:calc(5.5rem + env(safe-area-inset-bottom))}}
/* Accueil : le film remplace l'olive */
.hero__scene--film{cursor:default;display:grid;place-items:center}
.hero__scene--film .film__repli{position:absolute;top:10%;left:50%;height:80%;width:auto;max-width:none;translate:-50% 0}
@media (max-width:860px){.hero--histoire .hero__texte>*{position:relative;z-index:2}}
.hero__scene--film .film__toile{inset:-14% -24%!important;width:148%!important;height:128%!important;pointer-events:none}
.hero__scene--film .film__toile{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}

/* Fond de l'accueil : rameau d'olivier doré sur les verts de la DA */
.hero.hero--histoire{background-color:var(--olive-profond)}

/* ---------- Le shop : piles de bouteilles (galerie de /shop) ---------- */
.shop__message{min-height:1.5rem;margin:.2rem 0 1.4rem;font-size:.95rem;font-weight:600}
.shop__message a{color:inherit}
.shop__message--alerte{color:#8a2d1c}
.offre__visuel{position:relative;height:clamp(170px,19vw,230px);margin:0 0 1.2rem}
.offre__visuel img{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;translate:-50% 0;filter:drop-shadow(0 16px 18px rgba(31,40,22,.35))}
.offre__visuel--3 img{height:92%;translate:calc(-50% + (var(--i) - 1) * 46%) 0;rotate:calc((var(--i) - 1) * 9deg);transform-origin:50% 100%}
.offre__visuel--3 img:nth-child(2){height:100%;z-index:1}
/* le Sextuple : deux rangs de trois, décalés d'une demi-bouteille pour que les six se voient */
.offre__visuel--6 img{height:80%;translate:calc(-50% + (var(--i) - 1) * 105% - 28%) -16%;filter:drop-shadow(0 10px 12px rgba(31,40,22,.3)) brightness(.8)}
.offre__visuel--6 img:nth-child(n+4){height:88%;translate:calc(-50% + (var(--i) - 4) * 105% + 28%) 0;filter:drop-shadow(0 16px 18px rgba(31,40,22,.35));z-index:1}
.shop__rassure{list-style:none;margin:2.4rem 0 0;padding:1.6rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;border-block:1.5px solid color-mix(in srgb,var(--olive) 30%,transparent)}
.shop__rassure li{font-size:.92rem;line-height:1.4}
.shop__rassure b{display:block;margin-bottom:.3rem;font:700 .74rem/1.2 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase}
.shop__faq{margin-top:clamp(3rem,6vw,4.5rem)}
.shop__faq-titre{font-size:clamp(1.8rem,3.5vw,2.8rem);max-width:12ch;margin:0}
@media (max-width:960px){.shop__rassure{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.shop__rassure{grid-template-columns:1fr}}

/* Bandeau cookies (seulement si une mesure d'audience est configurée) */
.cookies{position:fixed;left:1rem;right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));z-index:80;max-width:560px;margin-inline:auto;padding:1.1rem 1.2rem;border-radius:18px;background:var(--creme);color:var(--olive-profond);box-shadow:0 20px 50px rgba(0,0,0,.35);display:grid;gap:.9rem}
.cookies p{margin:0;font-size:.92rem;line-height:1.45}
.cookies a{color:inherit}
.cookies__choix{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cookies__bouton{width:100%}
.pied__cookies{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
/* Pages de retour après paiement */
.retour-paiement{min-height:70vh}
.retour-paiement h1{max-width:18ch}
.retour-paiement__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.retour-paiement__contour{color:var(--olive)}
.retour-paiement__contour:hover{background:var(--olive);color:var(--citron)}
.page-texte .tarifs{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.95rem}
.page-texte .tarifs th,.page-texte .tarifs td{padding:.6rem .5rem;border-bottom:1px solid color-mix(in srgb,var(--olive) 30%,transparent);text-align:left}
.page-texte .tarifs th{font:700 .7rem/1.2 var(--f-intitule);letter-spacing:.12em;text-transform:uppercase}
.page-texte .formulaire-type{padding:1rem 1.2rem;border:1.5px dashed color-mix(in srgb,var(--olive) 45%,transparent);border-radius:12px;font-size:.92rem}
@media (max-width:520px){.page-texte .tarifs{font-size:.82rem}}
.cookies[hidden]{display:none}

/* ---------- Page /shop ---------- */
.page-shop{padding:7.5rem 0 5rem}
.achat{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.achat__galerie{position:sticky;top:6.5rem}
.achat__scene{position:relative;aspect-ratio:1/1.02;border-radius:28px;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--citron) 70%,transparent),transparent 62%),var(--sauge);overflow:hidden}
.achat__pile{position:absolute;inset:12% 8% 9%;height:auto;margin:0;opacity:0;transition:opacity .35s,translate .5s cubic-bezier(.3,1.3,.5,1);translate:0 14px}
.achat__pile img{filter:drop-shadow(0 26px 30px rgba(31,40,22,.4))}
.achat__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.achat__scene[data-scene=bouteille] [data-pile=bouteille],.achat__scene[data-scene=trio] [data-pile=trio],.achat__scene[data-scene=sextuple] [data-pile=sextuple],.achat__scene[data-scene=cuisine] [data-pile=cuisine]{opacity:1;translate:0 0}
.achat__legende{position:absolute;left:1.2rem;bottom:1rem;margin:0;font:700 .66rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-profond);opacity:.7}
.achat__scene[data-scene=cuisine] .achat__legende{opacity:0}
.achat__vignettes{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:.8rem}
.achat__vignettes button{position:relative;aspect-ratio:1;border-radius:16px;border:1.5px solid transparent;background:var(--etiquette);padding:0;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s}
.achat__vignettes button:hover{transform:translateY(-2px)}
.achat__vignettes button[aria-pressed=true]{border-color:var(--olive)}
.achat__vignettes .offre__visuel{position:absolute;inset:14% 10% 8%;height:auto;margin:0}
.achat__vignettes .offre__visuel img{filter:none}
.achat__vignettes > button > img{width:100%;height:100%;object-fit:cover}
.achat__panneau .intitule{margin-bottom:.9rem}
.achat__titre{font-size:clamp(3rem,6.5vw,5.4rem);line-height:.9;margin:0 0 1rem}
.achat__accroche{font-size:1.1rem;line-height:1.45;max-width:40ch;margin:0 0 1.4rem}
.achat__prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;margin:0 0 1.6rem}
.achat__prix [data-prix]{font:800 clamp(2.6rem,4.5vw,3.4rem)/1 var(--f-titre);letter-spacing:-.05em}
.achat__prix small{font:700 .72rem/1 var(--f-intitule);letter-spacing:.14em}
.achat__unite{flex-basis:100%;font-weight:600;opacity:.8}
.achat__bloc{border:0;padding:0;margin:0 0 1.4rem}
.achat__bloc legend{padding:0;margin-bottom:.7rem;font:700 .72rem/1 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase}
.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.tuile{position:relative;display:flex;flex-direction:column;gap:.15rem;padding:1.6rem .9rem .9rem;border:1.5px solid color-mix(in srgb,var(--olive) 35%,transparent);border-radius:16px;cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s}
.tuile:hover{transform:translateY(-2px)}
.tuile input{position:absolute;opacity:0;pointer-events:none}
.tuile:has(input:checked){border-color:var(--olive);background:var(--olive);color:var(--creme)}
.tuile:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:3px}
.tuile__badge{position:absolute;top:-.6rem;left:.7rem;padding:.3rem .55rem;border-radius:999px;background:var(--citron);color:var(--olive);font:700 .58rem/1 var(--f-intitule);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.tuile__nom{font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.tuile__contenu{font-size:.82rem;opacity:.8}
.tuile__prix{margin-top:.4rem;font-weight:800;font-size:1.15rem;letter-spacing:-.03em}
.tuile__port{font-size:.74rem;opacity:.8;line-height:1.25}
.tuile--epuisee{opacity:.5}
.mode-achat{display:grid;gap:.5rem}
.mode-achat__ligne{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border:1.5px solid color-mix(in srgb,var(--olive) 35%,transparent);border-radius:14px;cursor:pointer}
.mode-achat__ligne:has(input:checked){border-color:var(--olive);background:color-mix(in srgb,var(--sauge) 55%,transparent)}
.mode-achat__ligne input{accent-color:var(--olive);width:1.05rem;height:1.05rem;margin:0;flex:none}
.mode-achat__nom{flex:1;font-weight:700}
.mode-achat__nom small{display:block;font-weight:500;font-size:.8rem;opacity:.75}
.mode-achat__prix{font-weight:800}
.mode-achat__ligne--off{opacity:.45;cursor:not-allowed}
.mode-achat__note{margin:0;font-size:.85rem;opacity:.75}
.abonnement{display:grid;gap:.7rem;margin-top:.8rem;padding:1rem;border-radius:14px;background:color-mix(in srgb,var(--sauge) 40%,transparent)}
.champ-select{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:700}
.champ-select select{font:inherit;font-weight:600;padding:.55rem 2rem .55rem .9rem;border:1.5px solid var(--olive);border-radius:999px;background:var(--creme);color:var(--olive-profond)}
.livraisons{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.livraisons label{display:flex;gap:.55rem;align-items:flex-start;padding:.7rem .8rem;border:1.5px solid color-mix(in srgb,var(--olive) 30%,transparent);border-radius:12px;font-size:.9rem;line-height:1.3;cursor:pointer;background:var(--creme)}
.livraisons label:has(input:checked){border-color:var(--olive)}
.livraisons input{accent-color:var(--olive);margin:.1rem 0 0}
.livraisons b{display:block}
.achat__recoit{margin:0 0 .5rem;font-size:.95rem;line-height:1.45}
.achat__precommande{margin:0 0 1.2rem;font:700 .7rem/1.4 var(--f-intitule);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.achat__cgv{margin-bottom:1rem;font-size:.9rem}
.achat__cgv a{color:inherit}
.achat__bouton{width:100%;min-height:3.6rem;font-size:.86rem}
.achat__epuise{display:block;margin-top:.7rem;text-align:center;color:inherit}
.achat__petit{margin:.2rem 0 0;font-size:.82rem;opacity:.75;line-height:1.45}
.rythme{margin-top:clamp(4rem,8vw,6.5rem)}
.rythme__titre{font-size:clamp(2.2rem,4.5vw,3.6rem);max-width:16ch;margin:0 0 2rem}
.rythme__temps{list-style:none;counter-reset:temps;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2.4rem)}
.rythme__temps li{counter-increment:temps;padding-top:1.1rem;border-top:1.5px solid var(--olive);line-height:1.45}
.rythme__temps li::before{content:counter(temps);display:block;font:800 2.6rem/1 var(--f-titre);letter-spacing:-.05em;margin-bottom:.6rem}
.rythme__temps b{display:block;font-size:1.15rem;margin-bottom:.3rem}
.rythme__temps a{color:inherit}
.page-shop .shop__rassure{margin-top:clamp(3rem,6vw,4.5rem)}
.shop__accords{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:clamp(3rem,6vw,4.5rem);padding:1.6rem 1.8rem;border-radius:22px;background:var(--olive);color:var(--creme)}
.shop__accords-texte{margin:0;font-size:1.2rem;font-weight:700;max-width:40ch}
.shop__accords .bouton{background:var(--citron);color:var(--olive)}
@media (max-width:960px){
  .page-shop{padding-top:6rem}
  .achat{grid-template-columns:1fr}
  .achat__galerie{position:static}
  .achat__scene{aspect-ratio:1.2}
  .rythme__temps{grid-template-columns:1fr}
}
@media (max-width:480px){.tuiles{grid-template-columns:1fr 1fr 1fr;gap:.4rem}.tuile{padding:1.5rem .55rem .7rem}.tuile__badge{left:.4rem;font-size:.5rem}.livraisons{grid-template-columns:1fr}}
.abonnement[hidden],.mode-achat__note[hidden]{display:none}
.achat__vignettes .offre__visuel img{width:auto;height:100%;object-fit:fill}
.achat__vignettes .offre__visuel--3 img{height:92%}.achat__vignettes .offre__visuel--3 img:nth-child(2){height:100%}
.achat__vignettes .offre__visuel--6 img{height:80%}.achat__vignettes .offre__visuel--6 img:nth-child(n+4){height:88%}

/* ---------- Pastille « Ton olive t'attend » ---------- */
.pastille-offre{position:fixed;right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));z-index:56;display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;border:0;border-radius:999px;background:var(--citron);color:var(--olive);font:700 .7rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 26px rgba(0,0,0,.25);cursor:pointer;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.pastille-offre:hover{transform:translateY(-3px) rotate(-2deg)}
.pastille-offre[hidden]{display:none}
@media (max-width:860px){.pastille-offre{bottom:calc(5.2rem + env(safe-area-inset-bottom));right:.8rem;padding:.65rem .9rem}}

/* Accueil : montage vidéo plein écran, sous le voile vert (::before) et le texte */
.hero.hero--histoire{isolation:isolate}
.hero__videos{position:absolute;inset:0;z-index:-2;background:var(--olive-profond)}
.hero__videos picture,.hero__videos-affiche,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video{opacity:0;transition:opacity .9s ease}
.hero__video.est-active{opacity:1}
@media (max-width:860px){.hero.hero--histoire{min-height:100svh}}
/* Le film des olives, dans la section « L'huile » */
.film-produit{cursor:default}
.film-produit .film__repli{position:relative;height:84%;width:auto;filter:drop-shadow(0 30px 34px rgba(47,59,36,.3));transition:opacity .4s}
.film-produit .film__toile{inset:-10% -22%!important;width:144%!important;height:120%!important;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}

/* le film de « L'huile » déborde peu sur les côtés, en fondu : il ne passe pas sur le texte */
.film-produit .film__toile{inset:-10% -8%!important;width:116%!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 90%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 90%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent)}
@media (max-width:860px){.film-produit .film__toile{inset:-8% -6%!important;width:112%!important;height:116%!important}}

/* ---------- Compte à rebours (vraie date) et stock réel ---------- */
.rebours{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin:0 0 1.1rem;padding:.8rem 1rem;border-radius:14px;background:var(--olive);color:var(--creme)}
.rebours__titre{margin:0;font-weight:700;font-size:.92rem}
.rebours__temps{margin:0;display:flex;gap:.6rem;font:600 .72rem/1 var(--f-intitule);letter-spacing:.08em;text-transform:uppercase;color:var(--citron)}
.rebours__temps b{font:800 1.25rem/1 var(--f-titre);letter-spacing:-.03em;margin-right:.15rem;font-variant-numeric:tabular-nums}
.achat__stock{margin:-.6rem 0 1rem;font-size:.9rem;font-weight:700}
.offrir .rebours{max-width:34rem;background:var(--citron);color:var(--olive)}
.offrir .rebours__temps{color:var(--olive)}

/* ---------- Déclic (accueil) ---------- */
.declic__lignes{list-style:none;margin:0 0 2.4rem;padding:0;display:grid;gap:1.2rem}
.declic__lignes li{font:800 clamp(1.9rem,4.6vw,4rem)/1 var(--f-titre);letter-spacing:-.045em;color:var(--creme);max-width:22ch;text-wrap:balance}
.declic__lignes em{font-style:italic;color:var(--citron)}
.declic__lignes li:nth-child(2){margin-left:clamp(0rem,8vw,8rem)}
.declic__lignes li:nth-child(3){margin-left:clamp(0rem,16vw,16rem)}
.declic__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem}
.declic__lien{color:var(--citron)}

/* ---------- Mots qui montent (data-mots) ---------- */
.mot-monte{display:inline-block;will-change:transform}

/* ---------- Page Qualité ---------- */
.qualite-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;align-items:flex-end;padding:8rem clamp(1rem,5vw,4.5rem) clamp(3rem,8vh,5rem)}
.qualite-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(47,59,36,.9),rgba(47,59,36,.55) 45%,rgba(47,59,36,.15) 75%,transparent),linear-gradient(180deg,rgba(20,26,14,.4),transparent 25%,transparent 60%,rgba(47,59,36,.85))}
.qualite-hero__texte{position:relative;z-index:1;max-width:58rem}
.qualite-hero__titre{font-size:clamp(3.2rem,8.4vw,8.4rem);line-height:.88;letter-spacing:-.06em;color:var(--citron);margin:0 0 1.6rem;max-width:12ch}
.qualite-hero .chapeau{max-width:40ch}
.qualite-hero__suite{color:var(--citron);margin-top:1.4rem;display:inline-block}
.qualite__chiffres .chiffre{min-height:320px}
.voyage__image--analyse{display:grid;place-items:center;background:radial-gradient(circle at 50% 55%,rgba(232,196,92,.35),transparent 60%),var(--olive)}
.voyage__image--analyse p{margin:0;display:grid;justify-items:center;color:var(--citron)}
.voyage__image--analyse span{font:900 clamp(5rem,12vw,11rem)/.85 var(--f-titre);letter-spacing:-.06em}
.voyage__image--analyse small{font:700 .9rem/1 var(--f-intitule);letter-spacing:.18em;text-transform:uppercase;color:var(--creme);margin-top:1rem}
.jauge{margin:1rem 0 3rem}
.jauge__barre{position:relative;display:grid;grid-template-columns:32fr 48fr 20fr;height:5.5rem;border-radius:20px;overflow:visible}
.jauge__zone{display:flex;flex-direction:column;justify-content:center;padding:0 1rem;font-weight:800;letter-spacing:-.02em;font-size:clamp(.85rem,1.4vw,1.1rem);line-height:1.1}
.jauge__zone small{font-weight:600;font-size:.78em;opacity:.8;letter-spacing:0}
.jauge__zone--extra{background:var(--olive);color:var(--citron);border-radius:20px 0 0 20px}
.jauge__zone--vierge{background:color-mix(in srgb,var(--olive) 45%,var(--sauge));color:var(--olive-profond)}
.jauge__zone--lampante{background:var(--creme);color:var(--olive-profond);border-radius:0 20px 20px 0}
.jauge__repere{position:absolute;bottom:calc(100% + .6rem);left:0;translate:-50% 0;display:grid;justify-items:center;padding:.5rem .8rem;border-radius:12px;background:linear-gradient(160deg,#f3dd8a,#d9b04a);color:var(--olive-profond);font-weight:700;font-size:.85rem;white-space:nowrap;box-shadow:0 10px 24px rgba(31,40,22,.25);transition:left 1.6s cubic-bezier(.2,.8,.2,1) .3s}
.jauge__repere b{font-size:1rem}
.jauge__repere::after{content:"";position:absolute;top:100%;left:50%;width:2px;height:calc(5.5rem + .6rem);translate:-50% 0;background:var(--olive-profond)}
.jauge.vu .jauge__repere{left:calc(var(--pos) * 100%)}
.jauge{padding-top:4.5rem}
.jauge__legende{margin:.7rem 0 0;font-size:.85rem;opacity:.75}
.qualite__colonnes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);font-size:1.08rem;line-height:1.55}
.qualite__colonnes p{margin:0}
.qualite-papiers__grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.qualite-papiers__visuel{position:relative;height:clamp(380px,48vw,560px)}
.qualite-papiers__halo{position:absolute;inset:10% 5%;border-radius:50%;background:radial-gradient(circle,rgba(232,196,92,.35),transparent 65%)}
.qualite-papiers__bouteille{position:absolute;left:18%;bottom:0;height:92%;width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.qualite-papiers__feuille{position:absolute;right:6%;top:16%;width:min(240px,44%);aspect-ratio:.72;padding:1.2rem 1.1rem;border-radius:6px;background:var(--creme);color:var(--olive-profond);rotate:7deg;box-shadow:0 30px 50px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:.7rem;animation:flotte 7s ease-in-out infinite}
.qualite-papiers__feuille span{font:700 .62rem/1.2 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase}
.qualite-papiers__feuille i{display:block;height:.45rem;border-radius:4px;background:color-mix(in srgb,var(--olive) 25%,transparent)}
.qualite-papiers__feuille i:nth-child(3){width:70%}.qualite-papiers__feuille i:nth-child(5){width:55%}
.qualite-papiers__feuille b{margin-top:auto;font-size:1.3rem;letter-spacing:-.03em}
.qualite-papiers__question{color:var(--creme);opacity:.8}
.qualite-papiers__question a{color:var(--citron)}
.qualite-papiers__actions{margin-top:2rem}
.qualite-papiers .document{border-color:color-mix(in srgb,var(--citron) 50%,transparent);color:var(--creme)}
.qualite-papiers .document:hover{background:color-mix(in srgb,var(--olive) 60%,transparent)}
.qualite-papiers .document__icone{background:var(--citron);color:var(--olive)}
@media (max-width:960px){.qualite__chiffres{grid-template-columns:1fr}.qualite__colonnes,.qualite-papiers__grille{grid-template-columns:1fr}.qualite-papiers__visuel{height:360px}}
@media (max-width:620px){.jauge__barre{height:4.6rem}.jauge__zone{padding:0 .5rem;font-size:.75rem}.jauge__repere::after{height:calc(4.6rem + .6rem)}}
@media (prefers-reduced-motion:reduce){.jauge__repere{transition:none}.qualite-papiers__feuille{animation:none}}
.documents{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;max-width:720px}
.document{display:flex;gap:1rem;align-items:center;padding:1rem 1.2rem;border:1.5px solid var(--olive);border-radius:16px;color:inherit;text-decoration:none;transition:background-color .2s}
.document__icone{flex:none;display:grid;place-items:center;width:3rem;height:3.6rem;border-radius:6px;background:var(--olive);color:var(--citron);font:700 .7rem/1 var(--f-intitule);letter-spacing:.1em}
.document b{display:block}
.document small{font-size:.88rem;opacity:.8}
.jauge{padding-top:5.5rem}

.pastille-offre__olive{width:.75rem;height:1rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b7c45a,#5d7022 60%,#3c5016);rotate:-20deg;flex:none}

/* ---------- Jeu « Cueille ton olive » ---------- */
.jeu{width:min(560px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);padding:2rem 1.8rem 1.8rem;border:0;border-radius:28px;background:var(--creme);color:var(--olive-profond);overflow:auto;text-align:center}
.jeu[open]{animation:jeu-entree .5s cubic-bezier(.2,1.3,.4,1)}
.jeu::backdrop{background:rgba(20,26,14,.62);backdrop-filter:blur(4px)}
@keyframes jeu-entree{from{opacity:0;transform:translateY(30px) scale(.94)}}
.jeu__fermer{position:absolute;top:.7rem;right:.9rem;width:2.4rem;height:2.4rem;border:0;border-radius:50%;background:transparent;color:inherit;font-size:1.8rem;line-height:1;cursor:pointer}
.jeu__fermer:hover{background:color-mix(in srgb,var(--olive) 12%,transparent)}
.jeu .intitule{justify-content:center;margin-bottom:.6rem}
.jeu__titre{font-size:clamp(2rem,6vw,3rem);margin:0 0 .6rem}
.jeu__texte{margin:0 auto 1.2rem;max-width:34ch;line-height:1.45}
.jeu__gain{display:grid;justify-items:center;gap:.2rem;margin:0 0 1rem;animation:gain .7s cubic-bezier(.2,1.6,.4,1)}
.jeu__gain-chiffre{font:900 clamp(4rem,14vw,6rem)/.9 var(--f-titre);letter-spacing:-.06em;background:linear-gradient(160deg,#e6c35c,#b8862b);-webkit-background-clip:text;background-clip:text;color:transparent}
.jeu__gain span:last-child{font:700 .72rem/1 var(--f-intitule);letter-spacing:.16em;text-transform:uppercase}
@keyframes gain{from{transform:scale(.4) rotate(-10deg);opacity:0}}
.jeu__form{padding:0;background:none;text-align:left}
.jeu__code{margin:.6rem 0 .8rem;display:flex;justify-content:center;align-items:center;gap:.8rem}
.jeu__code strong{font-size:1.7rem;letter-spacing:.08em;padding:.3rem .8rem;border:2px dashed var(--olive);border-radius:10px}
.jeu__petit{font-size:.88rem;opacity:.75;margin:0 auto 1.4rem;max-width:36ch}

/* ---------- Bandeau de Noël (vraie date limite) ---------- */
.bandeau-noel{position:fixed;inset:0 0 auto;z-index:60;height:2.2rem;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:0 2.6rem;background:var(--citron);color:var(--olive-profond);font-size:.82rem;font-weight:700;transition:translate .35s}
.bandeau-noel a{color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bandeau-noel a:hover{text-decoration:underline}
.bandeau-noel__temps{font-variant-numeric:tabular-nums;opacity:.75}
.bandeau-noel button{position:absolute;right:.6rem;width:1.8rem;height:1.8rem;border:0;border-radius:50%;background:transparent;color:inherit;font-size:1.2rem;cursor:pointer}
body.avec-bandeau{padding-top:2.2rem}
body.avec-bandeau .entete{top:2.2rem;transition:top .35s,background-color .35s,color .35s,box-shadow .35s}
body.avec-bandeau.bandeau-cache .bandeau-noel{translate:0 -100%}
body.avec-bandeau.bandeau-cache .entete{top:0}
@media (max-width:520px){.bandeau-noel{font-size:.74rem;padding:0 2.2rem 0 .8rem;justify-content:flex-start}.bandeau-noel__temps{display:none}}

/* ---------- Le saviez-vous (carte discrète) ---------- */
.curiosite{position:fixed;left:1rem;bottom:max(1rem,env(safe-area-inset-bottom));z-index:55;width:min(330px,calc(100% - 2rem));padding:1rem 2.4rem 1rem 1.1rem;border-radius:18px;background:var(--olive);color:var(--creme);box-shadow:0 18px 40px rgba(0,0,0,.3);animation:curiosite .5s cubic-bezier(.2,1.3,.4,1)}
.curiosite p{margin:0;font-size:.92rem;line-height:1.4}
.curiosite__titre{font:700 .66rem/1 var(--f-intitule)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--citron);margin-bottom:.45rem!important}
.curiosite__fermer{position:absolute;top:.4rem;right:.5rem;width:1.8rem;height:1.8rem;border:0;border-radius:50%;background:transparent;color:inherit;font-size:1.2rem;cursor:pointer}
@keyframes curiosite{from{opacity:0;transform:translateY(20px)}}
@media (max-width:860px){.curiosite{bottom:calc(5.2rem + env(safe-area-inset-bottom))}}

/* ---------- Boutons qui donnent envie : reflet doré qui passe, flèche qui avance ---------- */
.bouton--brille{overflow:hidden;isolation:isolate}
.bouton--brille:not(.cta-mobile){position:relative}
.bouton--brille::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,244,200,.55) 48%,transparent 66%) -160% 0/60% 100% no-repeat;animation:reflet-bouton 4.5s ease-in-out 1.5s infinite}
@keyframes reflet-bouton{0%,62%{background-position:-160% 0}100%{background-position:260% 0}}
.bouton__fleche{display:inline-block;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.bouton:hover .bouton__fleche{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){.bouton--brille::after{animation:none}}
.confiance{margin:.9rem 0 0;font-size:.82rem;opacity:.75;line-height:1.5}
.confiance a{color:inherit}
.preuve{margin:0 0 .8rem;font-weight:700;font-size:.95rem}
.accords__cta{margin-left:auto}
.accords__pied{flex-wrap:wrap}

@media (max-width:860px){.curiosite{bottom:calc(8.6rem + env(safe-area-inset-bottom))}}
.curiosite-visible .pastille-offre{opacity:0;pointer-events:none}.pastille-offre{transition:opacity .3s,transform .25s cubic-bezier(.3,1.4,.5,1)}
/* ---------- Téléphone (02/11) : même accueil que sur ordinateur — vidéos des olives en fond, story LADORÉ sous le titre ;
   bouton « Ton olive » rangé à droite de la barre « Précommander » au lieu de flotter au-dessus du texte ---------- */
@media (max-width:860px){
  .hero--histoire .hero__scene--film{display:none}
  .hero--histoire .hero__visuel{order:3;margin:1.2rem 0 .4rem}
  .hero--histoire .escalier{font-size:clamp(2.8rem,14vw,4.6rem)}
  .hero--histoire .hero__story{display:block;position:relative;width:min(54vw,300px);aspect-ratio:9/16;margin:0 auto;border-radius:20px;overflow:hidden;background:var(--olive-profond);box-shadow:0 24px 50px rgba(0,0,0,.45)}
  .hero--histoire .hero__actions{margin:1.2rem 0 1.2rem}
  .hero--histoire .hero__actions .bouton{flex:1 1 auto;justify-content:center}
  .cta-mobile{right:4.9rem}
  .pastille-offre{bottom:max(1rem,env(safe-area-inset-bottom));right:1rem;width:3.3rem;height:3.3rem;padding:0;justify-content:center;font-size:0;letter-spacing:0;gap:0}
  .pastille-offre__olive{width:1.15rem;height:1.5rem}
  .curiosite{bottom:calc(5.2rem + env(safe-area-inset-bottom))}
  .pied{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}
}
@media (max-width:860px){
  /* le petit bouton olive attend la sortie du haut de page (il recouvrait « Précommander ») */
  .dans-hero .pastille-offre{opacity:0;pointer-events:none}
  /* la vidéo de fond occupe le premier écran puis se fond dans le vert : les textes du bas restent lisibles */
  .hero--histoire .hero__videos{bottom:auto;height:100svh;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
}
@media (max-width:860px){
  /* la photo de repli de La Classique prenait sa hauteur naturelle (près de 800 px) et recouvrait le texte */
  .scene3d{grid-template-rows:100%}
  .scene3d__photo{height:90%;min-height:0}
}
/* ---------- Prendre contact : la carte des clients (04/11) ---------- */
.ville{overflow:hidden}
.ville__tete{text-align:center;display:flex;flex-direction:column;align-items:center}
.ville__tete .chapeau{max-width:44ch}
.ville__zone{position:relative;max-width:1100px;margin:1rem auto 0;padding:0 1rem}
.ville__scene{position:relative}
.ville__svg{display:block;width:100%;height:auto;overflow:visible}
.ville__svg polygon,.ville__svg ellipse{stroke:rgba(246,241,220,.42);stroke-width:.8;stroke-linejoin:round;transition:fill .45s,stroke .45s}
.ville__svg line{stroke:rgba(246,241,220,.42);stroke-width:.8;stroke-linecap:round;transition:stroke .45s}
.ville__svg .perso-tete{fill:rgba(246,241,220,.42);transition:fill .45s}
.ville__rues line{stroke:rgba(246,241,220,.16);stroke-dasharray:5 7}
/* éteint : vert profond, trait clair, comme un plan */
.ville__svg .t{fill:#3a4729}.ville__svg .g{fill:#323e24}.ville__svg .d{fill:#2a341e}
.ville__svg .sol.t{fill:#34402a}.ville__svg .eau.t{fill:#2f4038}
.ville__svg .enseigne{font:800 7px/1 var(--f-titre);letter-spacing:.06em;fill:rgba(246,241,220,.55);transition:fill .45s}
.bloc{cursor:pointer;outline:none}
.bloc--deco{cursor:default}
.bloc__corps{transition:transform .55s cubic-bezier(.25,1.6,.45,1)}
.bloc.est-actif .bloc__corps{transform:translateY(-10px)}
.bloc.est-actif{filter:drop-shadow(0 18px 18px rgba(0,0,0,.45))}
/* allumé : les couleurs de LADORÉ */
.bloc.est-actif polygon,.bloc.est-actif ellipse,.bloc.est-actif line{stroke:rgba(47,59,36,.75)}
.bloc.est-actif .perso-tete{fill:#2f3b24}
.bloc.est-actif .sol.t{fill:#f1e7b8}.bloc.est-actif .sol.g{fill:#d4bf6a}.bloc.est-actif .sol.d{fill:#b8a24c}
.bloc.est-actif .mur.t,.bloc.est-actif .pierre.t{fill:#fbfaf2}.bloc.est-actif .mur.g,.bloc.est-actif .pierre.g{fill:#eceadb}.bloc.est-actif .mur.d,.bloc.est-actif .pierre.d{fill:#d6d5bf}
.bloc.est-actif .toit.t{fill:#8d9e40}.bloc.est-actif .toit.g{fill:#76862f}.bloc.est-actif .toit.d{fill:#5f6d24}
.bloc.est-actif .vert.t{fill:#9cb04c}.bloc.est-actif .olivier.t{fill:#a9b585}
.bloc.est-actif .acc.t{fill:#ecc94f}.bloc.est-actif .acc.g{fill:#d8b136}.bloc.est-actif .acc.d{fill:#b9921f}
.bloc.est-actif .vitre.g,.bloc.est-actif .vitre.d,.bloc.est-actif .vitre.t{fill:#b7cdbf}
.bloc.est-actif .bois.t{fill:#c99a63}.bloc.est-actif .bois.g{fill:#ad7f4b}.bloc.est-actif .bois.d{fill:#916838}
.bloc.est-actif .enseigne{fill:#2f3b24}
.bloc:focus-visible .sol.t{stroke:var(--citron);stroke-width:2}
/* médaillon au centre */
.ville__medaillon{position:absolute;left:var(--cx);top:var(--cy);translate:-50% -50%;width:clamp(5.2rem,13vw,10rem);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;background:radial-gradient(circle at 32% 28%,#fbe9a0,#e2bd4d 45%,#b8862b 100%);color:var(--olive-profond);box-shadow:0 30px 50px rgba(0,0,0,.45),inset 0 -8px 18px rgba(120,80,10,.35),inset 0 6px 14px rgba(255,255,255,.45);pointer-events:none;animation:medaillon 6s ease-in-out infinite}
.ville__mot{font:italic 900 clamp(1rem,2.6vw,1.9rem)/1 var(--f-titre);letter-spacing:-.03em}
.ville__sous{font:700 clamp(.5rem,1vw,.72rem)/1 var(--f-intitule);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
@keyframes medaillon{50%{translate:-50% -57%}}
/* bulle */
.ville__bulle{position:absolute;z-index:3;margin:0;translate:-50% -100%;padding:.75rem 1.2rem;border-radius:999px;background:#fbfaf2;color:var(--olive);font:700 clamp(.85rem,1.4vw,1.05rem)/1.2 var(--f-titre);white-space:nowrap;box-shadow:0 14px 30px rgba(0,0,0,.35);opacity:0;scale:.85;pointer-events:none;transition:opacity .25s,scale .35s cubic-bezier(.3,1.6,.5,1)}
.ville__bulle::after{content:" →";color:#b8862b}
.ville__bulle.visible{opacity:1;scale:1;pointer-events:auto;cursor:pointer}
/* les mêmes choix en boutons, sous la carte */
.ville__choix{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.6rem auto 0;padding:0}
.ville__choix a{display:inline-block;padding:.6rem 1.1rem;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--creme) 40%,transparent);color:var(--creme);text-decoration:none;font:700 .72rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
.ville__choix a.est-actif,.ville__choix a:hover{background:var(--citron);border-color:var(--citron);color:var(--olive)}
.ville__pied{text-align:center;margin-top:2rem}
@media (max-width:860px){
  .ville__zone{padding:0;margin:1rem 0 0}
  .ville__scene{width:136%;margin-left:-18%}
  .ville__bulle{font-size:.8rem;padding:.6rem .9rem}
}
@media (prefers-reduced-motion:reduce){.ville__medaillon{animation:none}.bloc__corps{transition:none}}
/* carte des clients, détails (04/11) */
.ville__svg circle{fill:rgba(246,241,220,.32);transition:fill .45s}
.ville__svg .tronc-olivier{fill:none;stroke:rgba(246,241,220,.42);stroke-width:1.6;stroke-linecap:round;transition:stroke .45s}
.ville__svg .trait.fin,.ville__svg .trait.marquage{stroke-width:.5;opacity:.7}
.ville__svg .filet.t{fill:#2e3a22}
.bloc.est-actif .tuile.t{fill:#dc8d60}.bloc.est-actif .tuile.g{fill:#c4744b}.bloc.est-actif .tuile.d{fill:#a95f3a}
.bloc.est-actif .filet.t{fill:#5d6e43}
.bloc.est-actif .roue.t{fill:#2b2c22}
.bloc.est-actif .carton.t{fill:#d4ad7c}.bloc.est-actif .carton.g{fill:#bb9363}.bloc.est-actif .carton.d{fill:#9f7a4d}
.bloc.est-actif .ardoise.t,.bloc.est-actif .ardoise.g,.bloc.est-actif .ardoise.d{fill:#2d2d28}
.bloc.est-actif .bouteille.t,.bloc.est-actif .bouteille.g,.bloc.est-actif .bouteille.d{fill:#3a4a1c}
.bloc.est-actif .eau.t{fill:#8fb7b3}
.bloc.est-actif .tronc-olivier{stroke:#7a6342}
.bloc.est-actif .fruit-v{fill:#6f8a22}.bloc.est-actif .fruit-n{fill:#3d2b3a}.bloc.est-actif .fruit-r{fill:#cf4b3a}.bloc.est-actif .fruit-o{fill:#eaa03a}
.bloc.est-actif .feuille{fill:#6c9136}.bloc.est-actif circle.bouteille{fill:#3a4a1c}.bloc.est-actif .lampe{fill:#f6df8a}.bloc.est-actif .bitte{fill:#4a4a40}
.bloc.est-actif .perso.trait{stroke:#2f3b24;stroke-width:1.4}

/* ---------- Logo officiel (fichiers du designer, Instruction/LOGO-LADORÉ) ---------- */
.logo__svg{display:block;height:2.3rem;width:auto;overflow:visible;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.logo:hover .logo__svg{transform:rotate(-3deg) scale(1.04)}
.logo--grand .logo__svg{height:clamp(4.5rem,11vw,8rem)}
.pied__geant{font-size:0;line-height:0;padding:0 4vw;margin:2.5rem 0 1rem}
.pied__geant .logo__svg{width:100%;height:auto}
.ville__mot .logo__svg{width:82%;height:auto;margin:auto}
.ville__mot{display:block;width:100%;font-size:0}
@media (max-width:860px){.logo__svg{height:1.9rem}}

/* ---------- Fenêtre « Fais tourner l'olive » (moitié d'écran : olive en points à gauche, offre à droite) ---------- */
.jeu{width:min(940px,calc(100% - 2rem));height:min(600px,calc(100dvh - 2rem));max-height:none;padding:0;display:none;grid-template-columns:1fr 1fr;overflow:hidden;text-align:center;border-radius:26px}
.jeu[open]{display:grid}
.jeu__fermer{z-index:3;background:color-mix(in srgb,var(--creme) 85%,transparent)}
.jeu__scene{position:relative;overflow:hidden;container-type:size;background:radial-gradient(circle at 50% 50%,#3b4a24 0,var(--olive-profond) 55%,#151b0e 100%);cursor:grab;touch-action:pan-y}
.jeu__scene.attrape{cursor:grabbing}
.jeu__toile{position:absolute;inset:0;width:100%;height:100%}
.jeu__anneau{position:absolute;left:50%;top:50%;width:min(92cqw,92cqh);aspect-ratio:1;margin:0;translate:-50% -50%;pointer-events:none;transition:opacity .6s}
.jeu__anneau text{font:800 21px/1 var(--f-intitule);letter-spacing:.12em;fill:var(--citron);opacity:.7}
.jeu__indice{position:absolute;left:0;right:0;bottom:1.1rem;margin:0;font:700 .68rem/1 var(--f-intitule);letter-spacing:.18em;text-transform:uppercase;color:var(--citron);opacity:.6;transition:opacity .4s}
.jeu__scene.tourne .jeu__indice,.jeu__scene.bouteille .jeu__indice,.jeu__scene.bouteille .jeu__anneau{opacity:0}
.jeu__scene.tourne{cursor:default}
.jeu__panneau{display:grid;align-content:center;padding:2.6rem 2.4rem 2rem;overflow:auto;background:var(--creme)}
.jeu__etape[data-etape=tourner] .jeu__titre{font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:.95;letter-spacing:-.05em}
.jeu__lancer{justify-self:center;margin:.4rem auto 0}
.jeu__lancer:disabled{opacity:.55;cursor:default}
.jeu__gain-chiffre{font-size:clamp(4.2rem,9vw,7rem)}
.jeu__petit{margin-bottom:0}
.jeu__form{margin-bottom:.6rem}
@media (max-width:700px){
  .jeu{grid-template-columns:1fr;grid-template-rows:minmax(38%,1fr) minmax(0,max-content);height:calc(100dvh - 1.5rem);width:calc(100% - 1.5rem);border-radius:22px}
  .jeu__panneau{align-content:start;padding:1.4rem 1.3rem 1.4rem}
  .jeu__etape[data-etape=tourner] .jeu__titre{font-size:2.4rem}
  .jeu__gain{margin-bottom:.4rem}
  .jeu__gain-chiffre{font-size:4rem}
  .jeu__titre{font-size:1.9rem}
  .jeu__texte{margin-bottom:.8rem}
}
.jeu__photo{position:absolute;left:50%;top:50%;width:auto;height:80%;translate:-50% -50%;opacity:0;scale:.96;filter:drop-shadow(0 0 28px rgba(243,221,138,.45)) drop-shadow(0 24px 30px rgba(0,0,0,.5));transition:opacity 1.1s ease,scale 1.4s cubic-bezier(.2,1.3,.4,1);pointer-events:none}
.jeu__scene.photo .jeu__photo{opacity:1;scale:1}
.jeu__toile{transition:opacity 1.1s ease}
.jeu__scene.photo .jeu__toile{opacity:0}
.jeu{border:3px solid #cfddba;box-shadow:0 0 0 6px rgba(207,221,186,.18),0 30px 80px rgba(0,0,0,.45)} /* liseré vert clair du logo */

/* ---------- Vitesse (04/11) : le navigateur ne dessine pas les sections du bas tant qu'on n'y est pas ---------- */
#origine,#questions,#liste,#pro{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* Pages rétractation / résiliation, fiche produit */
.demande{margin-top:2rem;display:grid;gap:1.2rem}
.demande [data-demande-saisie],.demande [data-demande-recap]{display:grid;gap:1.2rem;justify-items:start}
.demande [data-demande-saisie][hidden],.demande [data-demande-recap][hidden]{display:none}
.demande .champ{width:100%}
.demande__recap{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;margin:0}
.demande__recap dt{font-weight:700}.demande__recap dd{margin:0;overflow-wrap:anywhere}
.infos-produit p{margin:0 0 .8rem}
.infos-produit__table{width:100%;max-width:440px;border-collapse:collapse;font-size:.95rem}
.infos-produit__table caption{text-align:left;font-weight:700;padding-bottom:.4rem}
.infos-produit__table th{text-align:left;font-weight:500}.infos-produit__table td{text-align:right;white-space:nowrap}
.infos-produit__table th,.infos-produit__table td{padding:.35rem 0;border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.page-texte .formulaire-type p{margin:0 0 .7rem}.page-texte .formulaire-type p:last-child{margin:0}
.page-texte ul{padding-left:1.2rem}
/* Page Qui sommes-nous (src/qui-sommes-nous.html) */
.apropos-hero .hero__filigrane{rotate:0deg;bottom:4%}
.apropos-constat .manifeste2__fond{opacity:.2;object-position:center 40%}
.apropos-constat .manifeste2__titre{max-width:14ch}
.apropos-mission__titre,.apropos-passion__titre{color:var(--olive-profond);max-width:14ch}
.apropos-passion__titre{font-size:clamp(2.8rem,7.6vw,7rem)}
.mission{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1rem}
.mission__carte{position:relative;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:var(--olive);color:var(--creme);min-height:520px;transition:translate .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.mission__carte:hover{translate:0 -8px;box-shadow:0 30px 60px rgba(47,59,36,.28)}
.mission__image{position:relative;flex:1;min-height:280px;overflow:hidden}
.mission__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.mission__carte:hover .mission__image img{transform:scale(1.12)}
.mission__image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--olive))}
.mission__carte--or{background:linear-gradient(160deg,#e9c868,#b8862b);color:var(--olive-profond)}
.mission__carte--or .mission__image::after{background:linear-gradient(180deg,transparent 45%,#c99a35)}
.mission__carte--bouteille .mission__image{background:radial-gradient(circle at 50% 60%,rgba(232,196,92,.45),transparent 62%),var(--olive-profond)}
.mission__carte--bouteille .mission__image::after{display:none}
.mission__carte--bouteille .mission__image img{object-fit:contain;padding:1.6rem 0 0;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
.mission__texte{position:relative;padding:0 clamp(1.4rem,2.6vw,2rem) clamp(1.6rem,2.6vw,2.2rem)}
.mission__mot{font:900 clamp(3rem,5.4vw,5rem)/.9 var(--f-titre);letter-spacing:-.06em;margin:-.5em 0 .8rem;color:var(--citron)}
.mission__carte--or .mission__mot{color:var(--olive-profond)}
.mission__texte p:last-child{margin:0;line-height:1.5}
.glisse{position:relative;padding:2rem 0 4rem}
.js .glisse{height:420vh;padding:0}
.js .glisse__collant{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.glisse__collant{display:flex;flex-direction:column;justify-content:center;gap:clamp(1rem,3vh,2rem)}
.glisse__horloge{margin:0;padding:0 clamp(1rem,5vw,4.5rem);font:900 clamp(2.6rem,7vw,6.5rem)/.9 var(--f-titre);letter-spacing:-.06em;color:var(--olive-profond)}
.glisse__horloge span{display:inline-block}
.glisse__piste{list-style:none;margin:0;padding:0 clamp(1rem,5vw,4.5rem);display:flex;gap:clamp(1rem,2vw,1.6rem);overflow-x:auto}
.js .glisse__piste{width:max-content;overflow:visible;will-change:transform}
.journee__moment{position:relative;width:clamp(260px,26vw,380px);aspect-ratio:3/4.2;border-radius:28px;overflow:hidden;background:var(--olive-profond);color:var(--creme);flex:none;box-shadow:0 30px 50px rgba(47,59,36,.22)}
.journee__moment img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.journee__moment:hover img{transform:scale(1.06)}
.journee__moment::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,36,20,.1) 30%,rgba(28,36,20,.92))}
.journee__texte{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:clamp(1.2rem,2.4vw,1.8rem)}
.journee__heure{font:600 .72rem/1 var(--f-intitule);letter-spacing:.14em;text-transform:uppercase;color:var(--citron)}
.journee__moment h3{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1;letter-spacing:-.04em;font-weight:800;margin:.6rem 0 .5rem}
.journee__moment p{margin:0;font-size:.98rem;line-height:1.45;opacity:.9}
.glisse__barre{margin:0 clamp(1rem,5vw,4.5rem);height:2px;background:color-mix(in srgb,var(--olive) 18%,transparent);border-radius:2px;overflow:hidden}
.glisse__barre i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--avance,0));background:linear-gradient(90deg,#f3dd8a,#c9a227)}
.apropos-nom{padding-top:0}
.apropos-nom__texte{font-size:clamp(1.3rem,2.6vw,2.2rem);line-height:1.25;letter-spacing:-.03em;font-weight:700;max-width:36ch;margin:0;color:var(--olive-profond)}
.apropos-nom__texte b{color:#b8862b}
.apropos-lettre__grille{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.apropos-lettre__visuel{position:relative;height:clamp(420px,50vw,640px)}
.apropos-lettre__bouteille{position:absolute;left:50%;bottom:0;height:94%;width:auto;translate:-50% 0;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));animation:flotte 6s ease-in-out infinite}
@keyframes flotte{50%{transform:translateY(-14px) rotate(2deg)}}
.apropos-lettre__texte{position:relative;margin:0;font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.55;color:var(--creme)}
.apropos-lettre__texte p{margin:0 0 1.1rem}
.apropos-lettre__signature{font:italic 800 clamp(2rem,3.4vw,2.8rem)/1 var(--f-titre);letter-spacing:-.04em;color:var(--citron);margin:1.6rem 0 2rem}
.apropos-lettre__signature small{display:block;font:600 .72rem/1 var(--f-intitule);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--creme);opacity:.7;margin-top:.6rem}
.apropos__lien{color:var(--creme);margin-left:1.4rem;white-space:nowrap}
@media (max-width:960px){
  .mission{grid-template-columns:1fr}.mission__carte{min-height:440px}
  .apropos-lettre__grille{grid-template-columns:1fr}.apropos-lettre__visuel{height:360px;order:2}
}
@media (max-width:860px){.journee__moment{width:74vw}}
@media (prefers-reduced-motion:reduce){
  .js .glisse{height:auto;padding:2rem 0 4rem}.js .glisse__collant{position:relative;height:auto;overflow:visible}
  .js .glisse__piste{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}.journee__moment{scroll-snap-align:start}
  .apropos-lettre__bouteille{animation:none}
}