:root{
  --bg:#EEF0EC; --ink:#1B2420; --soft:#5E6A64; --line:#D3D8D2; --accent:#4A2B3A; --panel:#E3E7E1; --pop:#F2A33A;
  --serif:'Bricolage Grotesque',system-ui,sans-serif; --sans:'Figtree',system-ui,sans-serif;
  --pad:clamp(1.25rem,5vw,4rem);
}

:root{color-scheme:light only}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.65 var(--sans)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{padding-inline:var(--pad);max-width:1280px;margin-inline:auto}

/* Menu */
header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font:500 1.55rem var(--serif);letter-spacing:.01em}
.logo{font-weight:700}.logo i{font-style:normal;color:var(--accent)}
nav ul{display:flex;gap:2.2rem;list-style:none;font-size:.95rem}
nav a{padding:.4rem 0;border-bottom:1px solid transparent}
nav a:hover{border-color:var(--ink)}
.menu-btn{display:none;background:none;border:0;color:var(--ink);font:500 .95rem var(--sans);cursor:pointer}
@media (max-width:760px){
  .menu-btn{display:block}
  nav{position:absolute;left:0;right:0;top:68px;background:var(--bg);border-bottom:1px solid var(--line);display:none}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;padding:.5rem var(--pad) 1.2rem}
  nav li a{display:block;padding:.8rem 0;border-bottom:1px solid var(--line)}
}

/* Hero */
.hero{padding-block:clamp(4rem,12vw,9rem) clamp(3rem,8vw,6rem)}
.hero h1{font:600 clamp(2.6rem,6.2vw,5.4rem)/1.02 var(--serif);letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--ink);background:linear-gradient(transparent 60%,var(--pop) 60% 92%,transparent 92%)}
.hero p{max-width:34rem;margin-top:2rem;font-size:1.15rem;color:var(--soft)}
.cta{display:inline-block;margin-top:2.2rem;padding:.9rem 1.8rem;background:var(--pop);color:#1B2420;font-weight:500;border-radius:2px;transition:opacity .2s}
.cta:hover{opacity:.82}

/* Sections */
section{padding-block:clamp(3rem,8vw,6rem);border-top:1px solid var(--line)}
h2{font:500 clamp(2rem,4.5vw,3.2rem)/1.1 var(--serif);margin-bottom:1rem}
.lead{max-width:36rem;color:var(--soft)}

/* Séjour en 3 temps (pyramide olfactive = vraie séquence) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);margin-top:3rem}
.steps li{list-style:none;border-top:1px solid var(--ink);padding-top:1.1rem}
.steps b{font:500 1.6rem var(--serif);display:block;margin-bottom:.3rem}
.steps span{font-size:.85rem;color:var(--soft)}
.steps p{margin-top:.6rem;color:var(--soft)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* Familles */
.fam{margin-top:2.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.fam a{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:160px;padding:1.3rem 1.2rem;border-radius:18px;background:color-mix(in srgb,var(--c) 24%,var(--bg));font:600 1.4rem var(--serif);transition:transform .25s ease}
.fam a::before{content:'';position:absolute;right:-28px;top:-28px;width:110px;height:110px;border-radius:50%;background:var(--c);transition:transform .45s ease;animation:bob2 5s ease-in-out infinite alternate}
.fam a:nth-child(even)::before{animation-delay:-2.5s}
.fam a:hover{transform:translateY(-6px) rotate(-1deg)}
.fam a:hover::before{transform:scale(1.6)}
.fam small{position:relative;display:block;font:400 .85rem var(--sans);color:var(--soft);margin-top:.2rem}
@keyframes bob2{to{transform:translate(-8px,10px)}}
@media (max-width:900px){.fam{grid-template-columns:repeat(2,1fr)}}
/* Deux colonnes */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:760px){.duo{grid-template-columns:1fr}}
.panel{background:var(--panel);padding:clamp(1.5rem,4vw,3rem)}
.link{display:inline-block;margin-top:1.4rem;border-bottom:1px solid var(--ink);padding-bottom:2px;font-weight:500}

/* Journal */
.posts{margin-top:2rem}
.posts a{display:flex;justify-content:space-between;gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--line);font:500 1.35rem var(--serif)}
.posts a:first-child{border-top:1px solid var(--line)}
.posts a:hover{color:var(--accent)}
.posts small{font:400 .85rem var(--sans);color:var(--soft);white-space:nowrap;align-self:center}

/* Newsletter */
form{display:flex;gap:.6rem;margin-top:1.6rem;flex-wrap:wrap}
input[type=email]{flex:1 1 15rem;padding:.9rem 1rem;border:1px solid var(--ink);background:transparent;color:var(--ink);font:inherit;border-radius:2px}
button.cta{margin:0;border:0;cursor:pointer;font:500 1rem var(--sans)}

/* Quiz */
nav a.nav-quiz{background:var(--pop);color:#1B2420;border:1px solid var(--pop);border-radius:2px;padding:.4rem 1rem}
nav a.nav-quiz:hover{filter:brightness(.93)}
@media (max-width:760px){nav li a.nav-quiz{border:1px solid var(--pop);display:inline-block;margin-top:.8rem;padding:.7rem 1.4rem}}
.qbox{max-width:56rem;margin-top:2rem}
.qprog{height:4px;background:var(--line);margin-bottom:1.6rem}
.qprog i{display:block;height:100%;width:0;background:var(--pop);transition:width .3s}
.qcount{font-size:.9rem;color:var(--soft)}
.qbox h3{font:500 clamp(1.6rem,3.5vw,2.2rem)/1.2 var(--serif);margin:.4rem 0 1.4rem}
.qopts{display:grid;gap:.6rem}
.qopts button{text-align:left;padding:1rem 1.2rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;border-radius:2px;transition:border-color .2s,background .2s}
.qopts button:hover{border-color:var(--ink)}
.qback{margin-top:1.2rem;background:none;border:0;color:var(--soft);font:inherit;cursor:pointer;text-decoration:underline}
.qres h3{font-size:clamp(2.4rem,6vw,4rem);margin:.2rem 0 .8rem}
.qres p{color:var(--soft);max-width:34rem}
.qres .also{margin-top:1rem}
.qres .cta{margin-right:1rem}
.hlist{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0}
.hlist button{padding:.55rem 1rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;border-radius:2px}
.hlist button:hover,.hlist button.on{border-color:var(--ink)}
#hinfo h3{font:500 1.8rem var(--serif)}
#hinfo small{color:var(--soft)}
#hinfo p{margin-top:.5rem;color:var(--soft)}
#globe{width:100%;max-width:560px;margin-inline:auto;cursor:grab;touch-action:pan-y}
#globe:active{cursor:grabbing}
#globe .sea{fill:var(--panel)}
#globe .grat{fill:none;stroke:var(--line);stroke-width:.6}
#globe .land{fill:var(--ink);opacity:.8}
#globe .rim{fill:none;stroke:var(--ink);stroke-width:1}
#globe .pin circle{fill:var(--pop);stroke:var(--bg);stroke-width:2}
#globe .pin .halo{fill:none;stroke:var(--pop);stroke-width:1.5;opacity:.6}
#globe .pin{cursor:pointer}
#globe .pin:focus-visible .halo,#globe .pin.on .halo{stroke-width:3;opacity:1}
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.2rem}
.pcard{background:var(--bg);border:1px solid var(--line);border-top:5px solid var(--pop);padding:1.1rem 1.2rem}
.pcard h4{font:600 1.3rem var(--serif)}
.pcard small{color:var(--soft)}
.pcard p{margin:.6rem 0;font-size:.95rem}
.qres h5{font:600 1.1rem var(--serif);margin-top:2rem}
#about{scroll-margin-top:68px}
#about h2::after{content:'';display:block;width:6rem;height:.55rem;margin-top:.8rem;background:var(--pop);border-radius:4px}
.story mark{background:linear-gradient(transparent 55%,var(--pop) 55%);color:inherit}
#about h2{font:400 clamp(2.8rem,8vw,5.5rem)/1 'Caveat Brush','Bricolage Grotesque',cursive;transform:rotate(-1.5deg);margin-bottom:1.6rem}
.story{max-width:40rem;font-size:1.2rem}
.story p+p{margin-top:1rem}
.story p:first-child{font:600 1.6rem/1.3 var(--serif)}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1.5rem,5vw,4rem)}
#globe .pin .halo{transform-box:fill-box;transform-origin:center;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{from{transform:scale(.7);opacity:.9}to{transform:scale(2);opacity:0}}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#globe .pin .halo{animation:none}}
footer{border-top:1px solid var(--line);padding-block:2.5rem;font-size:.9rem;color:var(--soft)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Thème : à plat, bords nets */
:root{--mono:'Space Mono',ui-monospace,monospace;--edge:#1B2420}

header{border-bottom:2px solid var(--edge)}
nav a{font:400 .8rem var(--mono);text-transform:uppercase;letter-spacing:.04em}
nav a.nav-quiz{border:2px solid var(--edge);border-radius:0;box-shadow:3px 3px 0 var(--edge);padding:.45rem .9rem;font-weight:700;transition:transform .12s,box-shadow .12s}
nav a.nav-quiz:hover{filter:none;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.cta{border:2px solid var(--edge);border-radius:0;box-shadow:4px 4px 0 var(--edge);font:700 .85rem var(--mono);text-transform:uppercase;letter-spacing:.04em;transition:transform .12s,box-shadow .12s}
.cta:hover{opacity:1;transform:translate(3px,3px);box-shadow:1px 1px 0 var(--edge)}
section{border-top:2px solid var(--edge)}
footer{border-top:2px solid var(--edge);font:400 .78rem var(--mono)}
.hero{padding-block:clamp(2.5rem,6vw,4.5rem)}
.hero h1{font-size:clamp(2.6rem,6vw,5.2rem)}
.hero h1 em{color:#1B2420}
.tag{display:inline-block;margin-top:1.6rem;border:2px solid var(--edge);padding:.25rem .6rem;font:400 .8rem var(--mono);text-transform:uppercase}
.panel{background:var(--panel);border:2px solid var(--edge);box-shadow:5px 5px 0 var(--edge)}
.hlist button{border:2px solid var(--edge);border-radius:0;font:400 .8rem var(--mono);text-transform:uppercase;background:var(--bg);color:var(--ink)}
.hlist button.on,.hlist button:hover{background:var(--pop);color:#1B2420;border-color:var(--edge)}
.fam{gap:0;border-top:2px solid var(--edge);border-left:2px solid var(--edge);box-shadow:6px 6px 0 var(--edge)}
.fam a{border-radius:0;background:var(--c);color:#1B2420;border-right:2px solid var(--edge);border-bottom:2px solid var(--edge);min-height:150px;font:700 1.4rem var(--serif);transition:filter .15s}
.fam a::before{content:attr(data-n);inset:auto;left:1.2rem;top:1rem;width:auto;height:auto;background:none;border-radius:0;font:700 .8rem var(--mono);animation:none;transform:none}
.fam a:hover{transform:none;filter:brightness(1.07)}
.fam a:hover::before{transform:none}
.fam small{color:#1B2420;opacity:.8}
/* Quiz */
.qcard{--qc:#F6BD60;background:var(--qc);color:#1B2420;border:2px solid var(--edge);box-shadow:8px 8px 0 var(--edge);padding:1.5rem;transition:background .5s;scroll-margin-top:90px}
.qbox{max-width:none;margin:0}
.qprog{display:flex;gap:4px;height:auto;background:none;margin-bottom:1.3rem}
.qprog span{flex:1;height:6px;background:rgba(27,36,32,.18)}
.qprog .f,.qprog .c{background:#1B2420}
.qprog .c{transform-origin:left;animation:fillx .5s}
@keyframes fillx{from{transform:scaleX(0)}}
.qstep{animation:qin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes qin{from{opacity:0;transform:translateX(26px)}}
.qcount{font:700 .8rem var(--mono);color:#1B2420;opacity:.7}
.qbox h3{font:700 clamp(1.5rem,2.6vw,2rem)/1.15 var(--serif);margin:.5rem 0 1.2rem}
.qopts{display:grid;gap:.55rem}
.qopts button{display:flex;align-items:center;gap:.8rem;text-align:left;padding:.75rem 1rem;border:2px solid #1B2420;background:#fff;color:#1B2420;border-radius:0;font:500 1rem var(--sans);cursor:pointer;box-shadow:3px 3px 0 #1B2420;animation:qopt .4s both;animation-delay:calc(var(--i)*70ms + 120ms);transition:transform .12s,box-shadow .12s,opacity .25s}
@keyframes qopt{from{opacity:0;transform:translateY(12px)}}
.qopts button i{font:700 .75rem var(--mono);font-style:normal;border:2px solid #1B2420;width:1.6rem;height:1.6rem;display:grid;place-items:center;flex:none}
.qopts button:hover{background:#fff;border-color:#1B2420;transform:translate(2px,2px);box-shadow:1px 1px 0 #1B2420}
.qopts button.pk{background:#1B2420;color:#fff;transform:translate(3px,3px);box-shadow:none}
.qopts button.pk i{border-color:#fff}
.qopts.done button:not(.pk){opacity:.3;pointer-events:none}
.qback{color:#1B2420;font:400 .85rem var(--mono);text-decoration:none;margin-top:1.1rem}
.qres h3{display:inline-block;font:700 clamp(2.2rem,4.6vw,3.4rem)/1 var(--serif);margin:.4rem 0 .8rem;background:#fff;border:2px solid #1B2420;padding:.1em .3em;box-shadow:4px 4px 0 #1B2420;animation:stamp .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes stamp{from{transform:scale(1.6) rotate(-6deg);opacity:0}}
.qres p{color:#1B2420}
.qres h5{font:700 .8rem var(--mono);text-transform:uppercase;margin-top:1.6rem}
.pcards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.pcard{background:#fff;color:#1B2420;border:2px solid #1B2420;border-top:10px solid var(--c);box-shadow:3px 3px 0 #1B2420;animation:qopt .5s both;animation-delay:calc(var(--i)*140ms + 300ms)}
.pcard small,.pcard p{color:#1B2420;opacity:.75}
.qact{margin-top:1.4rem;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.qact .link{margin:0;color:#1B2420;border-color:#1B2420}

/* Intro : globe + avion */
html.pre{overflow:hidden}
#intro{display:none}
html.pre #intro,html.open:not(.done) #intro{display:block;position:fixed;inset:0;z-index:50;background:var(--pop);overflow:hidden}
.ibrand{position:absolute;top:1.3rem;left:var(--pad);font:700 1.5rem var(--serif);color:#1B2420}
.igw{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%)}
.igw>svg{display:block;overflow:visible}
.igw .g{fill:none;stroke:#fff;stroke-opacity:.22}
.igw .l{fill:#EAF2E3}
.igw .rim{fill:none;stroke:#1B2420;stroke-width:4}
.ipin{position:absolute;transform:translate(-8px,-100%);pointer-events:none;color:#1B2420}
.pi{display:flex;align-items:flex-end;gap:6px;transform-origin:8px 100%;animation:popin .5s cubic-bezier(.3,1.5,.5,1) both}
.pi span{background:#fff;border:2px solid #1B2420;box-shadow:2px 2px 0 #1B2420;padding:.1rem .45rem;line-height:1.15;text-align:left}
.pi b{display:block;font:700 .72rem var(--mono);text-transform:uppercase}
.pi small{display:block;font-size:.68rem}
@keyframes popin{from{transform:scale(0);opacity:0}}
.iscroll{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);text-align:center;background:#fff;color:#1B2420;border:2px solid #1B2420;box-shadow:6px 6px 0 #1B2420;padding:.5rem 1.4rem .9rem;transition:opacity .3s;white-space:nowrap}
.iscroll b{display:block;font:700 clamp(1.8rem,5vw,3.2rem)/1.05 var(--serif);letter-spacing:-.02em}
.iscroll i{display:block;width:16px;height:16px;margin:.4rem auto 0;border-right:3px solid #1B2420;border-bottom:3px solid #1B2420;transform:rotate(45deg);animation:bob 1.2s ease-in-out infinite}
html.open .iscroll{opacity:0}
@keyframes bob{50%{transform:translateY(6px) rotate(45deg)}}
@media (max-width:600px){.pi small{display:none}.pi b{font-size:.62rem}.pi span{padding:.05rem .3rem}.igw{top:44%}}
#plane{position:fixed;inset:0;z-index:70;pointer-events:none}

/* Familles cliquables */
.fam a{cursor:pointer}
.fam a.sel{box-shadow:inset 0 0 0 4px #1B2420}
.fam a::after{content:'→';position:absolute;right:1rem;bottom:1rem;font:700 1.1rem var(--mono);transition:transform .2s}
.fam a:hover::after{transform:translateX(4px)}
.fdetail{position:relative;margin-top:2.2rem;background:var(--c);color:#1B2420;border:2px solid var(--edge);box-shadow:8px 8px 0 var(--edge);padding:clamp(1.2rem,3vw,2rem);animation:qin .4s cubic-bezier(.2,.8,.2,1);scroll-margin-top:90px}
.fdetail[hidden]{display:none}
.fx{position:absolute;top:1rem;right:1rem;width:2.2rem;height:2.2rem;border:2px solid #1B2420;background:#fff;color:#1B2420;font:700 1rem var(--mono);cursor:pointer}
.fdetail h3{font:700 clamp(2rem,4.5vw,3.2rem)/1 var(--serif);margin-top:.3rem}
.ftag{font:700 .78rem var(--mono);text-transform:uppercase;padding-right:3rem}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:1.6rem;margin-top:1.2rem}
.fgrid p{margin-top:.9rem;max-width:36rem}
.fgrid p b{font:700 .78rem var(--mono);text-transform:uppercase;display:block}
.fbox{background:#fff;border:2px solid #1B2420;padding:1rem 1.2rem;box-shadow:3px 3px 0 #1B2420;align-self:start}
.fbox h4{font:700 .78rem var(--mono);text-transform:uppercase;margin-bottom:.4rem}
.fbox ul{list-style:none}
.fbox li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid rgba(27,36,32,.2)}
.fbox li:last-child{border:0}
.fbox li span{font-size:.85rem;opacity:.7;text-align:right}
.fdetail h5{font:700 .78rem var(--mono);text-transform:uppercase;margin-top:1.6rem}
.fp{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;margin-top:.8rem}
.fp .pcard{animation:none;border-top-color:#1B2420}
.fact{margin-top:1.4rem;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.fact .link{margin:0;color:#1B2420;border-color:#1B2420}
@media (max-width:800px){.fgrid{grid-template-columns:1fr}}

/* Contact */
#contact{scroll-margin-top:68px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.cmail{margin-top:1.2rem}
.cmail .link{font:700 1.05rem var(--mono)}
.cmaison{margin-top:2rem;border:2px solid var(--edge);background:var(--pop);color:#1B2420;padding:1.3rem;box-shadow:5px 5px 0 var(--edge)}
.cmaison h3{font:700 1.5rem/1.1 var(--serif)}
.cmaison p{margin:.6rem 0 1rem}
.cform{background:#fff;color:#1B2420;border:2px solid var(--edge);box-shadow:8px 8px 0 var(--edge);padding:1.4rem}
.cseg{display:grid;grid-template-columns:1fr 1fr;border:2px solid #1B2420;margin-bottom:1.2rem}
.cseg button{border:0;background:#fff;color:#1B2420;padding:.65rem .5rem;font:700 .78rem var(--mono);text-transform:uppercase;cursor:pointer}
.cseg button+button{border-left:2px solid #1B2420}
.cseg button.on{background:#1B2420;color:#fff}
.cform label{display:block;font:700 .75rem var(--mono);text-transform:uppercase;margin-bottom:.9rem}
.cform input,.cform textarea{display:block;width:100%;margin-top:.35rem;padding:.7rem .8rem;border:2px solid #1B2420;border-radius:0;background:#F6F7F4;color:#1B2420;font:400 1rem var(--sans);text-transform:none}
.cform input:focus,.cform textarea:focus{outline:none;background:#fff;box-shadow:3px 3px 0 #1B2420}
.cform textarea{resize:vertical}
.cextra[hidden]{display:none}
.hp{position:absolute;left:-9999px}
.cstate{margin-top:1rem;font:400 .9rem var(--mono)}
.cstate a{text-decoration:underline}
.cform .cta{cursor:pointer}
.cform .cta[disabled]{opacity:.6;cursor:wait}
.cform form{display:block;margin:0}
button.cta{margin:0;border:2px solid var(--edge);font:700 .85rem var(--mono);text-transform:uppercase}
@media (max-width:800px){.cgrid{grid-template-columns:1fr}}

/* Boutique, panier, fiche produit */
.cartbtn{order:3;border:2px solid var(--edge);background:var(--pop);color:#1B2420;font:700 .78rem var(--mono);text-transform:uppercase;padding:.45rem .8rem;cursor:pointer;box-shadow:3px 3px 0 var(--edge);transition:transform .12s,box-shadow .12s}
.cartbtn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.cartbtn b{display:inline-grid;place-items:center;min-width:1.3rem;height:1.3rem;margin-left:.45rem;background:#1B2420;color:#fff;font-size:.7rem}
.logo{order:1}nav{order:2}
@media (max-width:1000px){nav ul{gap:1.1rem}}
@media (max-width:760px){.cartbtn{margin-left:auto;margin-right:1rem}.menu-btn{order:4}}
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.2rem}
@media (max-width:900px){.shop{grid-template-columns:1fr}}
.pc{display:flex;flex-direction:column;background:#fff;color:#1B2420;border:2px solid var(--edge);box-shadow:6px 6px 0 var(--edge)}
.pc .im{position:relative;cursor:pointer;border-bottom:2px solid var(--edge)}
.im svg{display:block;width:100%;height:auto}
.badge{position:absolute;left:.7rem;top:.7rem;background:#1B2420;color:#fff;font:700 .7rem var(--mono);text-transform:uppercase;padding:.2rem .5rem}
.pc .bd{display:flex;flex-direction:column;gap:.3rem;flex:1;padding:1rem 1.1rem 1.2rem}
.pc h3{font:700 1.45rem/1.1 var(--serif)}
.mm{font:400 .76rem var(--mono);text-transform:uppercase;opacity:.7}
.pc .tn{font-size:.92rem;opacity:.85}
.pc .ft{margin-top:auto;padding-top:.9rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.px{font:700 1.35rem var(--serif)}
.bt{display:flex;gap:.5rem}
.mini{border:2px solid #1B2420;background:#fff;color:#1B2420;font:700 .72rem var(--mono);text-transform:uppercase;padding:.5rem .7rem;cursor:pointer;transition:background .15s,color .15s}
.mini:hover:not(:disabled){background:#1B2420;color:#fff}
.mini.add{background:var(--pop)}
.mini:disabled{opacity:.45;cursor:not-allowed}
.promo{margin-top:1.6rem;border:2px solid var(--edge);background:var(--pop);color:#1B2420;padding:1rem 1.2rem;box-shadow:5px 5px 0 var(--edge)}
.promo h4{font:700 1.2rem/1.2 var(--serif)}
.promo p{font-size:.92rem;margin-top:.25rem}
.pf{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.pf input{flex:1 1 200px;border:2px solid #1B2420;background:#fff;color:#1B2420;padding:.6rem .7rem;font:inherit;border-radius:0}
.pf .mini{background:#1B2420;color:#fff}
.pcode{display:inline-block;margin-top:.6rem;background:#fff;border:2px dashed #1B2420;padding:.35rem .8rem;font:700 1.15rem var(--mono);letter-spacing:.06em}
.pmsg{font:400 .82rem var(--mono);margin-top:.5rem}
#ovl{position:fixed;inset:0;z-index:80;background:rgba(27,36,32,.5);opacity:0;pointer-events:none;transition:opacity .25s}
#cart{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(440px,100vw);display:flex;flex-direction:column;background:var(--bg);color:#1B2420;border-left:2px solid var(--edge);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);visibility:hidden}
body.cartopen #cart{transform:none;visibility:visible}
body.cartopen #ovl{opacity:1;pointer-events:auto}
.ch{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:2px solid var(--edge)}
.ch h3{font:700 1.4rem var(--serif)}
.ch .fx{position:static}
.cb{flex:1;overflow:auto;padding:1rem 1.2rem}
.cb .promo{margin:1rem 0 0;box-shadow:3px 3px 0 var(--edge)}
.ci{display:grid;grid-template-columns:64px 1fr auto;gap:.8rem;padding:.8rem 0;border-bottom:1px solid rgba(27,36,32,.2)}
.ci .th{width:64px;height:80px;border:2px solid var(--edge);overflow:hidden}
.ci .th svg{width:100%;height:100%;object-fit:cover}
.ci b{font:700 1rem var(--serif)}
.qty{display:inline-flex;border:2px solid #1B2420;margin:.35rem .6rem 0 0;vertical-align:middle}
.qty button{width:1.8rem;height:1.8rem;border:0;background:#fff;color:#1B2420;font:700 1rem var(--mono);cursor:pointer}
.qty span{min-width:1.8rem;text-align:center;line-height:1.8rem;font:700 .85rem var(--mono)}
.rm{background:none;border:0;color:#1B2420;font:400 .75rem var(--mono);text-decoration:underline;cursor:pointer}
.cfoot{padding:1rem 1.2rem;border-top:2px solid var(--edge);background:#fff}
.ln{display:flex;justify-content:space-between;font-size:.92rem;padding:.15rem 0}
.ln.tot{font:700 1.15rem var(--serif);border-top:2px solid #1B2420;margin-top:.4rem;padding-top:.5rem}
.cfoot .cta{display:block;width:100%;margin-top:.9rem;text-align:center}
.cfoot .cta:disabled{opacity:.6;cursor:wait}
.cnote{font:400 .75rem var(--mono);margin-top:.7rem;opacity:.7}
.cerr{color:#B3261E;font:400 .82rem var(--mono);margin-top:.6rem}
dialog#pm{margin:auto;width:min(920px,94vw);max-height:92vh;overflow:auto;padding:0;background:var(--bg);color:#1B2420;border:2px solid var(--edge);box-shadow:8px 8px 0 var(--edge)}
dialog#pm::backdrop{background:rgba(27,36,32,.55)}
.pmg{display:grid;grid-template-columns:1fr 1.1fr}
.pmg .im{display:flex;border-right:2px solid var(--edge);border-bottom:0}.pmg .im svg{width:100%;height:100%}
.pmb{position:relative;padding:1.5rem}
.pmb h3{font:700 clamp(1.8rem,4vw,2.6rem)/1 var(--serif);margin:.3rem 0 .2rem}
.pmb p{margin-top:.8rem}
.pmb .amb{font-style:italic;opacity:.8}
.pyr{margin-top:1rem;border:2px solid #1B2420;background:#fff}
.pyr div{display:grid;grid-template-columns:7.5rem 1fr;gap:.8rem;padding:.6rem .8rem;border-bottom:1px solid rgba(27,36,32,.2)}
.pyr div:last-child{border:0}
.pyr b{font:700 .72rem var(--mono);text-transform:uppercase}
.buy{margin-top:1.2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.buy .cta{margin:0}
.buy .cta:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:800px){.pmg{grid-template-columns:1fr}.pmg .im{border-right:0;border-bottom:2px solid var(--edge);max-height:260px;overflow:hidden}}
#toast{position:fixed;left:50%;bottom:1.4rem;z-index:100;transform:translate(-50%,2rem);opacity:0;background:#1B2420;color:#fff;font:700 .8rem var(--mono);text-transform:uppercase;padding:.7rem 1.1rem;pointer-events:none;transition:opacity .25s,transform .25s}
body.cartopen #toast{bottom:auto;top:1rem}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* Sélection en premier + bandeau newsletter */
form[hidden]{display:none!important}
#boutique{border-top:0;border-bottom:2px solid var(--edge);padding-block:2rem 3.2rem}
.promo{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 2rem}
.promo .pt{flex:1 1 260px}
.promo .pa{flex:1 1 340px}
.promo .pf{margin-top:0}
.promo .pn{font:400 .72rem var(--mono);margin-top:.5rem;opacity:.8}
#boutique .promo{margin-top:1.2rem}
.shop{margin-top:1.8rem}
.shop .im{height:300px}
.shop .im svg{width:100%;height:100%}

/* ==========================================================================
   Multi-pages : tout ce qui suit réutilise les couleurs, polices, bordures
   2px et ombres décalées du thème existant (base.css, inchangé).
   ========================================================================== */

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--pop);color:#1B2420;border:2px solid var(--edge);padding:.5rem 1rem;font:700 .8rem var(--mono);text-transform:uppercase}
.skip:focus{left:1rem;top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main>section:first-child,main>.ph+section{border-top:0}

/* ---------- En-tête fixe, menus déroulants, icônes ---------- */
header{z-index:40} /* sous l'intro animée (50) et le panier (90) */
header .bar{gap:1.2rem}
header nav#nav{order:2;flex:1;display:flex;justify-content:center}
header nav#nav>ul{display:flex;align-items:center;gap:1.6rem;list-style:none}
header nav#nav li{position:relative;list-style:none}
header nav#nav .top{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem 0}
header nav#nav .dt{display:none}
header nav#nav .has>.top::after{content:'';width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
header nav#nav .has:hover>.top::after,header nav#nav .has.open>.top::after{transform:translateY(1px) rotate(225deg)}
.dd{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:.9rem;min-width:240px;background:var(--bg);color:#1B2420;border:2px solid var(--edge);box-shadow:6px 6px 0 var(--edge);padding:1rem 1.2rem;z-index:70;grid-auto-flow:column;gap:1.6rem}
.dd::before{content:'';position:absolute;left:0;right:0;top:-1.1rem;height:1.1rem}
header nav#nav .has:hover>.dd,header nav#nav .has:focus-within>.dd,header nav#nav .has.open>.dd{display:grid}
.ddc{display:flex;flex-direction:column;min-width:190px}
.ddh{font:700 .7rem var(--mono);text-transform:uppercase;opacity:.6;margin-bottom:.4rem}
header nav#nav .dd a{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border:0;font:400 .8rem var(--mono);text-transform:uppercase;white-space:nowrap}
header nav#nav .dd a:hover{text-decoration:underline;text-underline-offset:3px}
.dd a i{width:.75rem;height:.75rem;flex:none;background:var(--c,var(--pop));border:2px solid #1B2420}
.ico{order:3;display:flex;align-items:center;gap:.5rem}
.ib{position:relative;display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border:2px solid transparent;background:none;color:var(--ink);cursor:pointer}
.ib:hover{border-color:var(--edge)}
.ib svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.ib b{position:absolute;right:-4px;top:-4px;display:grid;place-items:center;min-width:1.15rem;height:1.15rem;background:#1B2420;color:#fff;font:700 .62rem var(--mono)}
.ib b:empty{display:none}
header .cartbtn{order:0}
header .menu-btn{order:5;display:none;border:2px solid var(--edge);padding:.4rem .7rem;font:700 .75rem var(--mono);text-transform:uppercase}
@media (max-width:1100px){
  header nav#nav>ul{gap:1rem}
}
@media (max-width:1020px){
  header .menu-btn{display:block}
  header nav#nav{position:absolute;left:0;right:0;top:100%;display:none;max-height:calc(100vh - 70px);overflow:auto;background:var(--bg);border-bottom:2px solid var(--edge);justify-content:flex-start}
  header nav#nav.open{display:block}
  header nav#nav>ul{flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--pad) 1.4rem}
  header nav#nav li{border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center}
  header nav#nav .top{flex:1;padding:.9rem 0;border:0}
  header nav#nav .has>.top::after{display:none}
  header nav#nav .dt{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:2px solid var(--edge);background:#fff;cursor:pointer}
  header nav#nav .dt::after{content:'';width:8px;height:8px;border-right:2px solid #1B2420;border-bottom:2px solid #1B2420;transform:translateY(-2px) rotate(45deg)}
  header nav#nav .has.open .dt::after{transform:translateY(2px) rotate(225deg)}
  .dd{position:static;transform:none;margin:0 0 1rem;box-shadow:3px 3px 0 var(--edge);width:100%}
  .dd::before{display:none}
  header nav#nav .has:hover>.dd,header nav#nav .has:focus-within>.dd{display:none}
  header nav#nav .has.open>.dd{display:grid;grid-auto-flow:row}
  header nav#nav li:last-child{border:0;padding-top:.8rem}
  header nav#nav a.nav-quiz{display:inline-block}
}
.logo{white-space:nowrap}
header .cartbtn{margin:0}
@media (max-width:520px){
  header .bar{gap:.4rem}
  .logo{font-size:1.25rem}
  .ico{gap:.2rem}
  .ib{width:2.1rem;height:2.1rem}
  .ib.hide-s{display:none}
  header .cartbtn{padding:.35rem .45rem;font-size:.68rem}
  header .menu-btn{padding:.35rem .5rem;font-size:.68rem}
}

/* ---------- Recherche ---------- */
.srch{position:fixed;inset:0 0 auto 0;z-index:95;background:var(--bg);border-bottom:2px solid var(--edge);box-shadow:0 8px 0 rgba(27,36,32,.15);padding-block:1.2rem 1.6rem;max-height:90vh;overflow:auto}
.srch[hidden]{display:none}
.srch form{margin:0;align-items:center}
.srch input{flex:1 1 14rem;border:2px solid #1B2420;background:#fff;color:#1B2420;padding:.8rem .9rem;font:400 1.05rem var(--sans);border-radius:0}
.srch .fx{position:static}
.sres{margin-top:1.2rem;display:grid;gap:1.4rem}
.sres h4{font:700 .72rem var(--mono);text-transform:uppercase;opacity:.7;margin-bottom:.4rem}
.sres a{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);font:600 1.05rem var(--serif)}
.sres a:hover{color:var(--accent)}
.sres small{font:400 .75rem var(--mono);text-transform:uppercase;opacity:.7;align-self:center;text-align:right}
.sres .none{font:400 .85rem var(--mono)}

/* ---------- En-tête de page, fil d'Ariane ---------- */
.ph{padding-block:clamp(2rem,5vw,3.4rem) clamp(1.2rem,3vw,2rem);border-top:0}
.ph h1{font:500 clamp(2.2rem,5vw,3.6rem)/1.05 var(--serif);margin-bottom:.8rem}
.ph .lead{font-size:1.05rem}
.h2like{font:500 clamp(2rem,4.5vw,3.2rem)/1.1 var(--serif);margin-bottom:1rem}
#about h1{font:400 clamp(2.8rem,8vw,5.5rem)/1 'Caveat Brush','Bricolage Grotesque',cursive;transform:rotate(-1.5deg);margin-bottom:1.6rem}
#about h1::after{content:'';display:block;width:6rem;height:.55rem;margin-top:.8rem;background:var(--pop);border-radius:4px}
.crumbs{font:400 .72rem var(--mono);text-transform:uppercase;margin-bottom:1rem;opacity:.75}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.crumbs span{margin-inline:.4rem}
.ph .tag{margin-top:1rem}
.more{margin-top:2rem}

/* ---------- Bandeau d'avantages ---------- */
.adv{border-top:2px solid var(--edge);background:var(--pop);color:#1B2420}
.adv ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.adv li{display:flex;gap:.8rem;align-items:center;padding:1.1rem 1rem;border-left:2px solid var(--edge)}
.adv li:first-child{border-left:0}
.adv svg{width:30px;height:30px;flex:none;fill:#fff;stroke:#1B2420;stroke-width:2}
.adv b{display:block;font:700 .78rem var(--mono);text-transform:uppercase}
.adv small{display:block;font-size:.85rem}
@media (max-width:900px){.adv ul{grid-template-columns:1fr 1fr}.adv li:nth-child(3){border-left:0}.adv li:nth-child(n+3){border-top:2px solid var(--edge)}}
@media (max-width:520px){.adv ul{grid-template-columns:1fr}.adv li{border-left:0}.adv li+li{border-top:2px solid var(--edge)}}

/* ---------- Pied de page complet ---------- */
footer .wrap.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;justify-content:normal}
footer h4{font:700 .78rem var(--mono);text-transform:uppercase;color:var(--ink);margin-bottom:.6rem}
footer ul{list-style:none}
footer li a{display:inline-block;padding:.2rem 0}
footer li a:hover{text-decoration:underline}
footer .fbrand .logo{display:inline-block;color:var(--ink);margin-bottom:.4rem}
footer .fbrand p{max-width:22rem}
footer .pf{margin-top:.8rem}
footer .pf input{border:2px solid #1B2420;background:#fff}
footer .pmsg{color:var(--ink)}
footer .fbot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.pay{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none}
.pay li{border:2px solid var(--edge);background:#fff;color:#1B2420;padding:.15rem .45rem;font:700 .65rem var(--mono);text-transform:uppercase}
@media (max-width:900px){footer .wrap.fcols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .wrap.fcols{grid-template-columns:1fr}}

/* ---------- Cartes produit (grille) ---------- */
.pc .im{display:block}
.pc h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.pc .rng{font:400 .74rem var(--mono);text-transform:uppercase;opacity:.75}
.pc .px small{font:400 .72rem var(--mono);text-transform:uppercase;margin-right:.3rem}
.wish{position:absolute;right:.7rem;top:.7rem;z-index:2;display:grid;place-items:center;width:2.2rem;height:2.2rem;border:2px solid #1B2420;background:#fff;color:#1B2420;cursor:pointer;transition:background .15s}
.wish svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.wish.on{background:var(--pop)}
.wish:hover{background:var(--pop)}
.badge.n2{top:auto;bottom:.7rem;background:var(--pop);color:#1B2420;border:2px solid #1B2420}
.cd{display:inline-block;margin-top:.4rem;font:700 .76rem var(--mono);text-transform:uppercase;background:#1B2420;color:#fff;padding:.2rem .5rem}
.shop.g4{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.shop.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.shop.g4{grid-template-columns:1fr}}
.shop .empty{grid-column:1/-1}

/* ---------- Catalogue filtrable ---------- */
.catw{padding-top:0;border-top:0}
.cat{display:grid;grid-template-columns:250px 1fr;gap:2rem;align-items:start}
.ctool{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;border-top:2px solid var(--edge);border-bottom:2px solid var(--edge);padding:.8rem 0}
.ctool .cnt{font:700 .8rem var(--mono);text-transform:uppercase}
.ctool label{font:700 .72rem var(--mono);text-transform:uppercase;display:flex;align-items:center;gap:.5rem}
.ctool select,.fl select{border:2px solid #1B2420;background:#fff;color:#1B2420;padding:.45rem .6rem;font:400 .85rem var(--sans);border-radius:0}
.ctool .ftg{display:none}
.fl{position:sticky;top:90px;display:flex;flex-direction:column;gap:.2rem}
.fl details{border-bottom:2px solid var(--edge);padding:.7rem 0}
.fl details:first-child{border-top:0}
.fl summary{cursor:pointer;font:700 .78rem var(--mono);text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
.fl summary::-webkit-details-marker{display:none}
.fl summary::after{content:'+';font:700 1rem var(--mono)}
.fl details[open] summary::after{content:'−'}
.fl .opts{display:flex;flex-direction:column;gap:.15rem;margin-top:.6rem;max-height:260px;overflow:auto}
.fl .opts label{display:flex;align-items:center;gap:.55rem;font-size:.92rem;cursor:pointer;padding:.15rem 0}
.fl input[type=checkbox],.fl input[type=radio]{appearance:none;-webkit-appearance:none;width:1.05rem;height:1.05rem;border:2px solid #1B2420;background:#fff;flex:none;display:grid;place-items:center;cursor:pointer;margin:0}
.fl input[type=radio]{border-radius:50%}
.fl input:checked{background:var(--pop)}
.fl input:checked::after{content:'';width:.4rem;height:.4rem;background:#1B2420}
.fl input[type=radio]:checked::after{border-radius:50%}
.fl .opts small{margin-left:auto;font:400 .7rem var(--mono);opacity:.6}
.fl .sw{width:.8rem;height:.8rem;border:2px solid #1B2420;background:var(--c);flex:none}
.fl .reset{margin-top:.8rem;align-self:flex-start}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:.4rem;border:2px solid #1B2420;background:#fff;color:#1B2420;padding:.25rem .55rem;font:700 .7rem var(--mono);text-transform:uppercase;cursor:pointer}
.chip:hover{background:var(--pop)}
.cres .shop{margin-top:0}
@media (max-width:900px){
  .cat{grid-template-columns:1fr}
  .ctool .ftg{display:inline-block}
  .fl{position:static;display:none;border:2px solid var(--edge);background:#fff;padding:0 1rem 1rem;box-shadow:4px 4px 0 var(--edge)}
  .cat.fopen .fl{display:flex}
}

/* ---------- Fiche parfum : carte d'embarquement ---------- */
.fiche{padding-top:0;border-top:0}
.pass{display:grid;grid-template-columns:minmax(260px,1fr) 1.5fr 220px;background:#fff;color:#1B2420;border:2px solid var(--edge);box-shadow:8px 8px 0 var(--edge)}
.pass>*,.fsub>*{min-width:0}
.pass .im{position:relative;display:flex;border-right:2px solid var(--edge);min-height:420px}
.pass .im svg{width:100%;height:100%}
.pmain{padding:clamp(1.2rem,3vw,2rem)}
.pmain h1{font:700 clamp(2.2rem,4.6vw,3.4rem)/1 var(--serif);margin:.3rem 0 .3rem}
.pmain .mm a{text-decoration:underline;text-underline-offset:3px}
.pmain>p{margin-top:.9rem;max-width:40rem}
.pmain .amb{font-style:italic;opacity:.8}
.route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;margin:1.2rem 0;padding:1rem 0;border-top:2px dashed #1B2420;border-bottom:2px dashed #1B2420}
.route .from,.route .to{font:700 1.35rem/1.1 var(--serif)}
.route .to{text-align:right}
.route small{display:block;font:400 .68rem var(--mono);text-transform:uppercase;opacity:.7}
.route svg{width:60px;height:24px}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid #1B2420}
.kv div{padding:.6rem .7rem;border-left:2px solid #1B2420}
.kv div:first-child{border-left:0}
.kv b{display:block;font:700 .64rem var(--mono);text-transform:uppercase;opacity:.7}
.kv span{font:700 .98rem var(--serif)}
.dots{display:inline-flex;gap:3px;vertical-align:middle;margin-left:.2rem}
.dots i{width:.6rem;height:.6rem;border:2px solid #1B2420}
.dots i.f{background:#1B2420}
.fmt{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;border:0;padding:0}
.fmt legend{font:700 .72rem var(--mono);text-transform:uppercase;margin-bottom:.4rem;width:100%}
.fmt label{position:relative;cursor:pointer}
.fmt input{position:absolute;opacity:0;pointer-events:none}
.fmt span{display:block;border:2px solid #1B2420;background:#fff;padding:.5rem .8rem;font:700 .76rem var(--mono);text-transform:uppercase;box-shadow:3px 3px 0 #1B2420;transition:transform .12s,box-shadow .12s}
.fmt span small{display:block;font-weight:400;text-transform:none;opacity:.75}
.fmt input:checked+span{background:var(--pop);transform:translate(2px,2px);box-shadow:1px 1px 0 #1B2420}
.fmt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.avail{margin-top:.9rem;font:700 .76rem var(--mono);text-transform:uppercase;display:flex;align-items:center;gap:.5rem}
.avail::before{content:'';width:.7rem;height:.7rem;border:2px solid #1B2420;background:#A7C957}
.avail.w::before{background:var(--pop)}
.avail.o::before{background:#F08A5D}
.pass .buy{margin-top:1rem}
.pass .buy .wish{position:static}
.ppm{font:400 .74rem var(--mono);opacity:.75}
.stub{border-left:2px dashed #1B2420;padding:1.2rem;display:flex;flex-direction:column;gap:.9rem;background:var(--c,var(--panel))}
.stub div b{display:block;font:700 .64rem var(--mono);text-transform:uppercase;opacity:.7}
.stub div span{font:700 1.05rem/1.2 var(--serif)}
.stub .bc{margin-top:auto;height:46px;background:repeating-linear-gradient(90deg,#1B2420 0 2px,transparent 2px 4px,#1B2420 4px 7px,transparent 7px 9px,#1B2420 9px 10px,transparent 10px 13px)}
.stub .gate{font:700 2.2rem/1 var(--mono)}
.fsub{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;margin-top:2.4rem}
.fsub .pyr{margin-top:0}
.fsub h2{font:700 .8rem var(--mono);text-transform:uppercase;margin-bottom:.6rem}
.legal-p{margin-top:1rem;background:#fff;color:#1B2420;border:2px solid var(--edge)}
.legal-p summary{cursor:pointer;padding:.7rem 1rem;font:700 .74rem var(--mono);text-transform:uppercase}
.legal-p div{padding:0 1rem 1rem;font-size:.9rem}
.legal-p p+p{margin-top:.5rem}
@media (max-width:1000px){.pass{grid-template-columns:1fr 1.4fr}.stub{grid-column:1/-1;border-left:0;border-top:2px dashed #1B2420;flex-direction:row;flex-wrap:wrap}.stub .bc{display:none}}
@media (max-width:700px){.route .from,.route .to{font-size:1.05rem}.route{gap:.5rem}.route svg{width:40px}.pass{grid-template-columns:1fr}.pass .im{border-right:0;border-bottom:2px solid var(--edge);min-height:0;max-height:300px;overflow:hidden}.kv{grid-template-columns:1fr 1fr}.kv div:nth-child(3){border-left:0}.kv div:nth-child(n+3){border-top:2px solid #1B2420}.fsub{grid-template-columns:1fr}}

/* ---------- Destinations ---------- */
.dhead{background:var(--c);color:#1B2420;border-bottom:2px solid var(--edge)}
.dhead .ftag{padding:0}
.dhead h1{font:700 clamp(2.4rem,6vw,4.4rem)/1 var(--serif);margin:.3rem 0 .4rem}
.dhead .fgrid{margin-top:1rem}
.fam.big a{min-height:190px}

/* ---------- Maisons ---------- */
.conts{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.conts a,.conts button{padding:.5rem .9rem;border:2px solid var(--edge);background:var(--bg);color:var(--ink);font:400 .78rem var(--mono);text-transform:uppercase;cursor:pointer}
.conts a.on,.conts a:hover,.conts button.on,.conts button:hover{background:var(--pop);color:#1B2420}
#globe .ctry{fill:transparent;stroke:none}
#globe .ctry.has{fill:var(--pop);opacity:.85;cursor:pointer}
#globe .ctry.has:hover,#globe .ctry.on{fill:#F6BD60;opacity:1}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.4rem;margin-top:2rem}
.hc{position:relative;display:flex;flex-direction:column;gap:.3rem;background:#fff;color:#1B2420;border:2px solid var(--edge);box-shadow:6px 6px 0 var(--edge);padding:1.2rem;transition:transform .12s,box-shadow .12s}
.hc:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--edge)}
.hc h3{font:700 1.5rem/1.1 var(--serif)}
.hc p{font-size:.92rem;opacity:.85}
.hc .cnt{margin-top:auto;padding-top:.6rem;font:700 .72rem var(--mono);text-transform:uppercase}
.hc .badge,.hhead .badge{position:static;align-self:flex-start;background:var(--pop);color:#1B2420;border:2px solid #1B2420}
.hhead .badge{display:inline-block;margin-bottom:.6rem}
.hfacts{display:flex;flex-wrap:wrap;gap:0;margin-top:1.2rem;border:2px solid var(--edge);background:#fff;color:#1B2420;width:fit-content;max-width:100%}
.hfacts div{padding:.6rem .9rem;border-left:2px solid var(--edge)}
.hfacts div:first-child{border-left:0}
.hfacts b{display:block;font:700 .64rem var(--mono);text-transform:uppercase;opacity:.7}
.hfacts span{font:700 1rem var(--serif)}
#hinfo .shop{grid-template-columns:1fr;gap:.8rem;margin-top:1rem}
.mini-list{list-style:none;margin-top:.8rem}
.mini-list li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid rgba(27,36,32,.2)}
.mini-list a{font:600 1rem var(--serif);text-decoration:underline;text-underline-offset:3px}
.mini-list small{font:400 .72rem var(--mono);text-transform:uppercase;opacity:.75;text-align:right}

/* ---------- Quiz : billet d'embarquement ---------- */
.quizp .hero{padding-block:clamp(1.5rem,4vw,3rem)}
.ticket{position:relative;display:grid;grid-template-columns:1fr 150px;background:#fff;color:#1B2420;border:2px solid #1B2420;box-shadow:5px 5px 0 #1B2420;margin-top:.6rem;animation:stamp .55s cubic-bezier(.3,1.6,.5,1)}
.ticket .tm{padding:1rem 1.1rem}
.ticket .tst{border-left:2px dashed #1B2420;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--qc)}
.ticket .th{display:flex;justify-content:space-between;gap:1rem;font:700 .66rem var(--mono);text-transform:uppercase;border-bottom:2px solid #1B2420;padding-bottom:.5rem}
.ticket h3{display:block;border:0;box-shadow:none;padding:0;margin:.6rem 0 .3rem;background:none;animation:none;font:700 clamp(2rem,4.2vw,3rem)/1 var(--serif)}
.ticket .tst b{display:block;font:700 .62rem var(--mono);text-transform:uppercase;opacity:.75}
.ticket .tst span{font:700 .95rem/1.15 var(--serif)}
.ticket .tsug{list-style:none;margin-top:.6rem;border-top:2px dashed #1B2420}
.ticket .tsug li{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.45rem 0;border-bottom:1px solid rgba(27,36,32,.2)}
.ticket .tsug a{font:700 1.05rem var(--serif);text-decoration:underline;text-underline-offset:3px}
.ticket .tsug small{font:400 .7rem var(--mono);text-transform:uppercase;opacity:.75;text-align:right}
.qact .cta{margin:0}
.qmail{margin-top:1.1rem;border-top:2px solid #1B2420;padding-top:1rem}
.qmail h5{margin-top:0}
.qmail .pf{margin-top:.5rem}
.qmail .pn{font:400 .7rem var(--mono);margin-top:.4rem}
@media (max-width:560px){.ticket{grid-template-columns:1fr}.ticket .tst{border-left:0;border-top:2px dashed #1B2420;flex-direction:row;flex-wrap:wrap;gap:1rem}}

/* ---------- Panier : jauge, échantillons offerts, formats ---------- */
.gauge{margin:0 0 1rem;border:2px solid #1B2420;background:#fff;padding:.7rem .8rem}
.gauge p{font:700 .74rem var(--mono);text-transform:uppercase}
.gauge .gb{height:10px;border:2px solid #1B2420;margin-top:.5rem;background:var(--bg)}
.gauge .gb i{display:block;height:100%;background:var(--pop);transition:width .4s}
.free{margin-top:1rem;border:2px dashed #1B2420;background:#fff;padding:.8rem}
.free h4{font:700 .78rem var(--mono);text-transform:uppercase}
.free p{font-size:.85rem;margin:.2rem 0 .5rem}
.free select{display:block;width:100%;margin-top:.4rem;border:2px solid #1B2420;background:#fff;color:#1B2420;padding:.45rem .5rem;font:400 .9rem var(--sans);border-radius:0}

/* ---------- Pages de contenu (aide, légal, histoire, journal) ---------- */
.prose{max-width:46rem}
.prose h2{font:600 clamp(1.4rem,2.6vw,1.9rem)/1.15 var(--serif);margin:2.2rem 0 .7rem}
.prose h3{font:700 .82rem var(--mono);text-transform:uppercase;margin:1.4rem 0 .4rem}
.prose p,.prose li{margin-top:.6rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;margin-top:1rem;background:#fff;color:#1B2420;border:2px solid var(--edge)}
.prose th,.prose td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid rgba(27,36,32,.2);font-size:.95rem}
.prose th{font:700 .72rem var(--mono);text-transform:uppercase}
.todo{background:var(--pop);color:#1B2420;padding:0 .25rem;font:700 .85em var(--mono)}
.warn{border:2px solid var(--edge);background:var(--pop);color:#1B2420;padding:1rem 1.2rem;box-shadow:5px 5px 0 var(--edge);margin-bottom:2rem;max-width:46rem}
.warn b{font:700 .78rem var(--mono);text-transform:uppercase;display:block;margin-bottom:.2rem}
.faq details{border-bottom:2px solid var(--edge);padding:1rem 0}
.faq details:first-of-type{border-top:2px solid var(--edge)}
.faq summary{cursor:pointer;font:600 1.15rem/1.3 var(--serif);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:700 1.2rem var(--mono)}
.faq details[open] summary::after{content:'−'}
.faq details p{margin-top:.6rem;max-width:42rem}
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem}
.hub a{display:block;background:#fff;color:#1B2420;border:2px solid var(--edge);box-shadow:6px 6px 0 var(--edge);padding:1.2rem;transition:transform .12s,box-shadow .12s}
.hub a:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--edge)}
.hub b{display:block;font:700 1.35rem/1.1 var(--serif)}
.hub small{display:block;margin-top:.4rem;font-size:.9rem;opacity:.8}
.soon{border:2px dashed var(--edge);padding:1.6rem;max-width:46rem;background:var(--panel)}
.soon h2{font:700 1.6rem var(--serif);margin-bottom:.4rem}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.steps3 div{background:#fff;color:#1B2420;border:2px solid var(--edge);box-shadow:5px 5px 0 var(--edge);padding:1.1rem}
.steps3 b{display:block;font:700 .72rem var(--mono);text-transform:uppercase}
.steps3 h3{font:700 1.3rem/1.15 var(--serif);margin:.3rem 0}
@media (max-width:760px){.steps3{grid-template-columns:1fr}}
.notify{margin-top:.6rem}
.notify .pf{margin-top:.4rem}

/* ---------- Bandeau cookies ---------- */
.ck{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:120;max-width:560px;background:#fff;color:#1B2420;border:2px solid var(--edge);box-shadow:6px 6px 0 var(--edge);padding:1rem 1.2rem}
.ck[hidden]{display:none}
.ck p{font-size:.9rem}
.ck a{text-decoration:underline}
.ck .bt{margin-top:.8rem;flex-wrap:wrap}