/* ═══════════════ SYSTÈME ═══════════════ */
:root{
  --coral:#FD676E;  --coral-deep:#E04A55;  --coral-soft:#FFD8DA;
  --mango:#FB9A4C;  --sun:#FFC24B;         --sun-soft:#FFE9BE;
  --lagoon:#17A79C; --lagoon-soft:#CFEFEC;
  --cream:#FFF7EE;  --sand:#FDE9D8;
  --ink:#2C1A19;    --ink-2:#6B5250;
  --deep:#0A1F2E;
  --shadow:0 18px 44px -18px rgba(78,38,30,.30);
  --shadow-lg:0 30px 70px -26px rgba(78,38,30,.42);
  --r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--cream); color:var(--ink);
  font-family:'Outfit',system-ui,-apple-system,sans-serif; font-weight:300;
  overflow-x:hidden; -webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{max-width:100%; height:auto; display:block}   /* height:auto — sinon l'attribut height="500" du logo l'étire */
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:500; font-variation-settings:'SOFT' 60,'WONK' 1; margin:0; line-height:1.08}
.wrap{width:min(1180px,90vw); margin-inline:auto}

.rv{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ═══════════════ LOADER ═══════════════ */
#loader{position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:linear-gradient(160deg,#FFB463 0%,#FD8A6A 42%,#FD676E 100%);
  transition:opacity .8s ease, visibility .8s}
#loader.done{opacity:0; visibility:hidden}
.ld{position:relative; display:grid; place-items:center; width:min(74vw,320px); aspect-ratio:1}
.ld__sun{position:absolute; width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#FFF3D2 0%,#FFD37A 55%,#FFB454 100%);
  box-shadow:0 0 70px 22px rgba(255,214,130,.5);
  transform:translateY(65%) scale(.7); opacity:0;
  animation:sunrise 1.6s .1s cubic-bezier(.22,1,.36,1) forwards}
.ld__ray{position:absolute; inset:0; animation:spin 26s linear infinite}
.ld__ray i{position:absolute; left:50%; top:50%; width:2px; height:50%; transform-origin:50% 0;
  background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0)); opacity:0;
  animation:rayIn .6s cubic-bezier(.22,1,.36,1) forwards}
.ld__logo{position:relative; width:84%; z-index:2; opacity:0; transform:scale(.94);
  animation:logoIn 1s .55s cubic-bezier(.22,1,.36,1) forwards;
  filter:drop-shadow(0 6px 24px rgba(140,50,40,.3))}
.ld__bar{position:absolute; bottom:-14%; left:50%; transform:translateX(-50%);
  width:120px; height:3px; border-radius:99px; background:rgba(255,255,255,.3); overflow:hidden}
.ld__bar i{display:block; height:100%; width:0; border-radius:99px; background:#fff;
  transition:width .4s cubic-bezier(.4,0,.2,1)}
.ld__word{position:absolute; bottom:-28%; left:50%; transform:translateX(-50%);
  font-size:.6rem; letter-spacing:.42em; text-transform:uppercase; color:rgba(255,255,255,.9);
  white-space:nowrap; opacity:0; animation:fadeIn .9s 1.1s forwards}
@keyframes sunrise{to{transform:translateY(0) scale(1); opacity:1}}
@keyframes rayIn{to{opacity:.85}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes logoIn{to{opacity:1; transform:none}}
@keyframes fadeIn{to{opacity:1}}

/* ═══════════════ NAV ═══════════════ */
.nav{position:fixed; top:0; left:0; right:0; z-index:900; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.85rem clamp(16px,4vw,44px);
  transition:background .45s, box-shadow .45s, padding .45s}
.nav.solid{background:rgba(255,247,238,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 26px -18px rgba(78,38,30,.5); padding-block:.6rem}
.nav__logo{width:78px; transition:width .45s}
.nav.solid .nav__logo{width:62px}
.nav__links{display:flex; gap:2rem; align-items:center}
.nav__links a{position:relative; font-size:.86rem; font-weight:400; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.5); transition:color .35s}
.nav.solid .nav__links a{color:var(--ink); text-shadow:none}
.nav__links a::after{content:''; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:var(--coral); border-radius:2px; transition:right .35s cubic-bezier(.22,1,.36,1)}
.nav__links a:hover::after{right:0}
.nav__cta{display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.15rem; border-radius:99px;
  background:var(--coral); color:#fff!important; font-size:.84rem; font-weight:500;
  box-shadow:0 10px 24px -10px rgba(253,103,110,.85); text-shadow:none!important;
  transition:transform .3s, box-shadow .3s, background .3s}
.nav__cta:hover{transform:translateY(-2px); background:var(--coral-deep)}
.nav__cta::after{display:none}
.burger{display:none; width:42px; height:42px; border:0; background:none; padding:0; cursor:pointer; position:relative; z-index:1001}
.burger i{display:block; height:2px; width:22px; margin:5px auto; background:#fff; border-radius:2px;
  transition:transform .4s, opacity .3s, background .4s}
.nav.solid .burger i,.nav.open .burger i{background:var(--ink)}
.nav.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:880px){
  .burger{display:block}
  .nav__links{position:fixed; inset:0; background:var(--cream); flex-direction:column;
    justify-content:center; gap:1.6rem; clip-path:circle(0% at calc(100% - 40px) 40px);
    transition:clip-path .6s cubic-bezier(.76,0,.24,1)}
  .nav.open .nav__links{clip-path:circle(150% at calc(100% - 40px) 40px)}
  .nav__links a{color:var(--ink)!important; text-shadow:none!important; font-size:1.5rem; font-family:'Fraunces',serif}
  .nav__cta{font-size:1rem; padding:.8rem 1.6rem}
}

/* ═══════════════ HERO ═══════════════ */
.hero{position:relative; width:100%; height:100svh; min-height:600px; overflow:hidden;
  isolation:isolate; background:#0A1F2E; touch-action:pan-y; user-select:none;
  -webkit-user-select:none; cursor:grab}
.hero.dragging{cursor:grabbing}
.layer{position:absolute; display:block; max-width:none; max-height:none; transform:scale(var(--lsc,1.05));   /* le décor est dimensionné en JS, il ne doit pas être bridé */
  will-change:transform; -webkit-user-drag:none}
#skyFill,#seaFill{position:absolute; left:0; right:0; z-index:0; pointer-events:none}
#skyFill{top:0; background:linear-gradient(to bottom,#06254A,#0C3B69)}
#seaFill{bottom:0; background:linear-gradient(to bottom,#085D4F,#04302C)}
#bgImg{z-index:1}
#mtnImg{z-index:50}
.veil{position:absolute; inset:0; z-index:150; pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,31,46,.5) 0%,rgba(10,31,46,.08) 18%,rgba(10,31,46,0) 40%,rgba(10,31,46,0) 58%,rgba(10,31,46,.26) 78%,rgba(10,31,46,.7) 93%,rgba(10,31,46,.92) 100%)}
.orbit{position:absolute; inset:0; pointer-events:none}
.item{position:absolute; left:0; top:0; will-change:transform,opacity; transform-origin:50% 50%; backface-visibility:hidden}
.item img{position:absolute; inset:0; max-width:none; width:100%; height:100%; object-fit:contain; object-position:50% 100%;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.42)) drop-shadow(0 3px 6px rgba(0,0,0,.28)); -webkit-user-drag:none}
.ground{position:absolute; z-index:52; pointer-events:none; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(2,14,22,.5) 0%,rgba(2,14,22,.24) 45%,rgba(2,14,22,0) 72%)}
.ring{position:absolute; inset:0; z-index:51; pointer-events:none}
.ring svg{width:100%; height:100%; overflow:visible}
.ui{position:absolute; inset:0; z-index:200; pointer-events:none}
/* Le logo vit SOUS le calque montagne (z-index 50) : son bas se fond
   naturellement derrière le sommet, comme demandé. */
.brand{position:absolute; z-index:40; left:50%; transform:translateX(-50%);
  width:min(44vw,168px); filter:drop-shadow(0 4px 20px rgba(0,0,0,.45))}
@media (min-width:900px){.brand{width:min(16vw,190px)}}

.heroCta{position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(96px,13svh,132px); display:flex; flex-direction:column; align-items:center;
  gap:.55rem; pointer-events:auto; text-align:center}
.heroCta .place{font-size:clamp(.56rem,2.3vw,.68rem); letter-spacing:.34em; text-transform:uppercase;
  color:rgba(255,255,255,.82); text-shadow:0 2px 12px rgba(0,0,0,.75)}
.heroCta a{display:inline-flex; align-items:center; gap:.5rem; padding:.72rem 1.5rem; border-radius:99px;
  background:var(--coral); color:#fff; font-size:.9rem; font-weight:500; white-space:nowrap;
  box-shadow:0 14px 30px -12px rgba(253,103,110,.95); transition:transform .32s, background .32s}
.heroCta a:hover{transform:translateY(-2px); background:var(--coral-deep)}
.caption{position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(180px,23.5svh,228px);
  width:min(92vw,560px); text-align:center; color:#fff}
.caption h2{font-size:clamp(1.35rem,5.6vw,2.05rem); text-shadow:0 3px 26px rgba(0,0,0,.75)}
.caption p{margin:.4rem auto 0; max-width:34ch; font-size:clamp(.72rem,2.9vw,.85rem);
  line-height:1.45; color:rgba(255,255,255,.88); text-shadow:0 2px 16px rgba(0,0,0,.8)}
.caption .sw{display:block; transition:opacity .2s ease, transform .34s cubic-bezier(.22,1,.36,1)}
.caption.out .sw{opacity:0; transform:translateY(10px)}
.dots{position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(62px,8.4svh,84px);
  display:flex; gap:7px; pointer-events:auto}
.dots button{width:6px; height:6px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.36);
  cursor:pointer; transition:width .4s cubic-bezier(.22,1,.36,1), background .4s}
.dots button[aria-current="true"]{width:22px; background:var(--coral)}
.hint{position:absolute; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom));
  text-align:center; transition:opacity .5s}
.hint svg{display:block; margin:0 auto 5px}
@media (max-width:760px){.hint svg{display:none}}
.hint span{display:block; font-size:clamp(.53rem,2.4vw,.66rem); letter-spacing:.32em; text-transform:uppercase;
  color:rgba(255,255,255,.72); text-shadow:0 2px 10px rgba(0,0,0,.7)}
.hint b{display:block; color:var(--sun); font-weight:500; margin-top:3px; letter-spacing:.24em}
.hero.touched .hint{opacity:0}
.arrow{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border:0;
  border-radius:99px; background:rgba(255,255,255,.08); backdrop-filter:blur(8px); color:#fff;
  display:grid; place-items:center; cursor:pointer; pointer-events:auto; opacity:.5; transition:opacity .3s, background .3s}
.arrow:hover{opacity:1; background:rgba(255,255,255,.18)}
.arrow.prev{left:clamp(4px,2vw,28px)} .arrow.next{right:clamp(4px,2vw,28px)}
@media (hover:none){.arrow{display:none}}

/* ═══════════════ BANDEAU ═══════════════ */
.marquee{background:var(--coral); color:#fff; overflow:hidden; padding:.85rem 0; position:relative; z-index:2}
.marquee__t{display:flex; width:max-content; animation:slide 34s linear infinite}
.marquee span{display:inline-block; padding-right:2.5rem; font-size:.86rem; letter-spacing:.16em;
  text-transform:uppercase; white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__t{animation:none}}

/* ═══════════════ SECTIONS ═══════════════ */
.sec{padding:clamp(72px,11vw,140px) 0; position:relative; scroll-margin-top:76px}
.sec--sand{background:linear-gradient(180deg,var(--cream),var(--sand))}
.head{text-align:center; margin-bottom:clamp(38px,6vw,70px)}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-size:.7rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--coral); font-weight:500; margin-bottom:.9rem}
.eyebrow svg{animation:spin 16s linear infinite}
.head h2{font-size:clamp(2rem,6vw,3.4rem)}
.head p{max-width:56ch; margin:1rem auto 0; color:var(--ink-2); line-height:1.75; font-size:clamp(.94rem,2.4vw,1.02rem)}

.grid{display:grid; grid-template-columns:1fr; gap:clamp(18px,2.4vw,30px)}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{position:relative; background:#fff; border-radius:var(--r); padding:1.6rem 1.5rem 1.7rem;
  box-shadow:var(--shadow); overflow:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s, opacity .8s cubic-bezier(.22,1,.36,1)}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg)}
.card::before{content:''; position:absolute; inset:0 0 auto; height:5px; background:var(--c,var(--coral))}
.card__img{position:relative; height:190px; margin-bottom:1.1rem;
  background:radial-gradient(60% 70% at 50% 62%, var(--bg,var(--coral-soft)) 0%, transparent 72%)}
.card__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:transform .55s cubic-bezier(.22,1,.36,1); filter:drop-shadow(0 12px 18px rgba(78,38,30,.22))}
.card:hover .card__img img{transform:scale(1.07) rotate(-2deg)}
.tag{display:inline-flex; align-items:center; gap:.4rem; font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; font-weight:500; padding:.32rem .7rem; border-radius:99px;
  background:var(--bg,var(--coral-soft)); color:var(--c,var(--coral-deep)); margin-bottom:.7rem}
.card h3{font-size:1.32rem; margin-bottom:.5rem}
.card p{margin:0; color:var(--ink-2); font-size:.93rem; line-height:1.65}

.story{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
@media (max-width:860px){.story{grid-template-columns:1fr; gap:56px}}
.story__media{position:relative}
.story__media>img{border-radius:var(--r); box-shadow:var(--shadow-lg); width:100%; aspect-ratio:4/5; max-height:600px; object-fit:cover}
.story__media .float{position:absolute; right:-4%; bottom:-9%; width:46%; aspect-ratio:1/1;
  object-fit:cover; border-radius:18px; box-shadow:var(--shadow-lg); border:6px solid #fff}
.story p{color:var(--ink-2); line-height:1.85; margin:0 0 1.05rem}
.story h2{font-size:clamp(1.9rem,5vw,3rem); margin-bottom:1.3rem}
.quote{margin:1.8rem 0 0; padding:1.2rem 1.5rem; border-radius:18px;
  background:linear-gradient(120deg,var(--sun-soft),#FFF3E0); font-family:'Fraunces',serif;
  font-size:1.22rem; color:var(--ink)}
.quote small{display:block; margin-top:.4rem; font-family:'Outfit'; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mango)}

.vows{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,26px); margin-top:clamp(52px,7vw,86px)}
@media (min-width:900px){.vows{grid-template-columns:repeat(4,1fr)}}
.vow{background:rgba(255,255,255,.72); backdrop-filter:blur(6px); border-radius:18px; padding:1.35rem 1.25rem;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .8s cubic-bezier(.22,1,.36,1)}
.vow:hover{transform:translateY(-5px)}
.vow__ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:.85rem; background:var(--bg)}
.vow h3{font-size:1.02rem; margin-bottom:.35rem}
.vow p{margin:0; font-size:.87rem; line-height:1.6; color:var(--ink-2)}


/* ── galerie ── */
.gal{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media (min-width:700px){.gal{grid-template-columns:repeat(3,1fr); gap:14px}}
@media (min-width:1040px){.gal{grid-template-columns:repeat(4,1fr); gap:16px}}
.gal button{padding:0; border:0; background:none; cursor:zoom-in; border-radius:16px; overflow:hidden;
  position:relative; aspect-ratio:4/5; box-shadow:var(--shadow); display:block}
.gal button:nth-child(1),.gal button:nth-child(6){grid-row:span 2; aspect-ratio:4/10.4}
@media (max-width:699px){.gal button:nth-child(1),.gal button:nth-child(6){grid-row:span 1; aspect-ratio:4/5}}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,1,.36,1)}
.gal button:hover img{transform:scale(1.06)}
.gal button::after{content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(44,26,25,.28),transparent 45%);
  opacity:0; transition:opacity .4s}
.gal button:hover::after{opacity:1}

.lb{position:fixed; inset:0; z-index:2000; background:rgba(12,20,26,.94); display:none;
  align-items:center; justify-content:center; touch-action:none}
.lb.on{display:flex}
.lb img{max-width:94vw; max-height:82svh; border-radius:12px; object-fit:contain;
  animation:pop .35s cubic-bezier(.22,1,.36,1)}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.lb__x,.lb__p,.lb__n{position:absolute; border:0; background:rgba(255,255,255,.12); color:#fff;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  backdrop-filter:blur(8px); transition:background .3s}
.lb__x:hover,.lb__p:hover,.lb__n:hover{background:rgba(255,255,255,.26)}
.lb__x{top:max(16px,env(safe-area-inset-top)); right:16px}
.lb__p{left:12px; top:50%; transform:translateY(-50%)}
.lb__n{right:12px; top:50%; transform:translateY(-50%)}
.lb__c{position:absolute; bottom:max(20px,env(safe-area-inset-bottom)); left:0; right:0; text-align:center;
  color:rgba(255,255,255,.8); font-size:.82rem; padding:0 1rem}

/* ── avis Google ── */
.sec--dark{background:linear-gradient(165deg,#0E2A3B,#0A1F2E); color:#fff}
.sec--dark .head h2{color:#fff}
.sec--dark .head p{color:rgba(255,255,255,.72)}
.gscore{display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-bottom:2.6rem}
.gscore__n{font-family:'Fraunces',serif; font-size:clamp(3rem,11vw,4.4rem); line-height:1; color:var(--sun)}
.gstars{display:flex; gap:3px}
.gscore__s{font-size:.86rem; color:rgba(255,255,255,.68); letter-spacing:.04em}
.gscore__s b{color:#fff; font-weight:500}
.gwords{display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; margin-top:1rem}
.gwords span{font-size:.72rem; letter-spacing:.06em; padding:.34rem .75rem; border-radius:99px;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.8)}
.gwords span b{color:var(--sun); font-weight:500}
.revs{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:860px){.revs{grid-template-columns:repeat(3,1fr); gap:20px}}
.rev{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09); border-radius:20px;
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.85rem;
  transition:transform .45s cubic-bezier(.22,1,.36,1), background .45s, opacity .8s}
.rev:hover{transform:translateY(-5px); background:rgba(255,255,255,.09)}
.rev__h{display:flex; align-items:center; gap:.7rem}
.rev__a{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:500;
  font-size:.95rem; color:#0A1F2E; background:var(--sun); flex:none}
.rev__n{font-weight:500; font-size:.94rem}
.rev__d{font-size:.74rem; color:rgba(255,255,255,.5)}
.rev p{margin:0; font-size:.92rem; line-height:1.72; color:rgba(255,255,255,.84)}
.rev__g{display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:rgba(255,255,255,.5); margin-top:auto; padding-top:.4rem}
.gcta{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem}
.gcta .btn{background:var(--sun); color:#3A2408}
.gcta .btn--ghost{background:transparent; color:#fff}

/* ── carte Google ── */
.map{margin-top:clamp(24px,3vw,34px); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:4/3; background:var(--sand)}
@media (min-width:860px){.map{aspect-ratio:21/9}}
.map iframe{width:100%; height:100%; border:0; display:block}
.badges{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; justify-content:center}
.badge{display:inline-flex; align-items:center; gap:.42rem; font-size:.78rem; padding:.42rem .85rem;
  border-radius:99px; background:#fff; color:var(--ink-2); box-shadow:0 6px 16px -12px rgba(78,38,30,.6)}
.badge svg{flex:none}

/* ── mention presse ── */
.press{background:var(--sand); padding:0 0 clamp(56px,8vw,90px)}
.press a{display:block; max-width:760px; margin-inline:auto; background:#fff; border-radius:var(--r);
  padding:clamp(1.5rem,4vw,2.2rem) clamp(1.4rem,4vw,2.6rem); box-shadow:var(--shadow); text-align:center;
  position:relative; overflow:hidden; transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s}
.press a:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.press a::before{content:'“'; position:absolute; top:-26px; left:18px; font-family:'Fraunces',serif;
  font-size:9rem; color:var(--sun-soft); line-height:1; pointer-events:none}
.press__k{display:inline-flex; align-items:center; gap:.5rem; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--coral); font-weight:500}
.press p{position:relative; font-family:'Fraunces',serif; font-size:clamp(1.05rem,3.2vw,1.42rem);
  line-height:1.4; margin:.9rem 0 1rem; color:var(--ink)}
.press__s{display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--ink-2)}
.press__s b{color:var(--ink); font-weight:500}
.press__s span{color:var(--coral)}

.tabs{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-bottom:2.6rem}
.tab{border:0; cursor:pointer; font-family:inherit; font-size:.84rem; font-weight:400;
  padding:.62rem 1.15rem; border-radius:99px; background:#fff; color:var(--ink-2);
  box-shadow:0 6px 16px -10px rgba(78,38,30,.4); transition:all .35s cubic-bezier(.22,1,.36,1);
  display:inline-flex; align-items:center; gap:.45rem}
.tab:hover{transform:translateY(-2px)}
.tab[aria-selected="true"]{background:var(--coral); color:#fff; box-shadow:0 12px 24px -10px rgba(253,103,110,.8)}
.tab svg{width:16px; height:16px; flex:none}
.menu{max-width:820px; margin-inline:auto}
.menu__panel{display:none; animation:fadeUp .5s cubic-bezier(.22,1,.36,1)}
.menu__panel.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.menu__note{text-align:center; color:var(--ink-2); font-size:.9rem; margin:0 0 1.8rem}
.row{display:flex; align-items:baseline; gap:.9rem; padding:.95rem 0; border-bottom:1px dashed rgba(107,82,80,.24)}
.row:last-child{border-bottom:0}
.row__n{font-weight:500; font-size:1.02rem; display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.row__d{display:block; font-size:.84rem; color:var(--ink-2); font-weight:300; margin-top:.15rem}
.row__dots{flex:1; border-bottom:1px dotted rgba(107,82,80,.32); transform:translateY(-4px)}
.row__p{font-weight:500; white-space:nowrap; color:var(--coral-deep); font-size:1rem}
.row__p em{font-style:normal; font-size:.68rem; color:var(--ink-2); font-weight:300}
.new{font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; background:var(--coral);
  color:#fff; padding:.18rem .45rem; border-radius:99px; font-weight:500}
.combo{display:grid; grid-template-columns:1fr auto; gap:1.2rem; align-items:center;
  background:linear-gradient(120deg,#fff,#FFF3E3); border-radius:var(--r); padding:1.5rem 1.6rem;
  margin-bottom:1rem; box-shadow:var(--shadow); border:1px solid rgba(251,154,76,.22)}
@media (max-width:520px){.combo{grid-template-columns:1fr}.combo__p{text-align:left!important}}
.combo h3{font-size:1.3rem; margin-bottom:.4rem}
.combo ul{margin:.2rem 0 0; padding-left:1.1rem; color:var(--ink-2); font-size:.9rem; line-height:1.7}
.combo__p{text-align:right}
.combo__p s{display:block; color:var(--ink-2); font-size:.85rem; opacity:.65}
.combo__p b{font-family:'Fraunces',serif; font-size:1.7rem; color:var(--coral-deep); font-weight:600}

.info{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(16px,2.4vw,26px)}
.info__c{background:#fff; border-radius:var(--r); padding:1.7rem 1.5rem; box-shadow:var(--shadow);
  transition:transform .45s, opacity .8s cubic-bezier(.22,1,.36,1)}
.info__c:hover{transform:translateY(-6px)}
.info__ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  margin-bottom:1.1rem; background:var(--bg,var(--coral-soft))}
.info__c h3{font-size:1.14rem; margin-bottom:.55rem}
.info__c p{margin:0; color:var(--ink-2); line-height:1.75; font-size:.94rem}
.info__c a{color:var(--coral-deep); border-bottom:1px solid transparent; transition:border-color .3s}
.info__c a:hover{border-color:currentColor}
.hours{list-style:none; margin:0; padding:0; font-size:.94rem}
.hours li{display:flex; justify-content:space-between; gap:1rem; padding:.34rem 0; color:var(--ink-2)}
.hours li.today{color:var(--ink); font-weight:500}
.hours li.today .h{color:var(--lagoon)}
.hours .closed{color:var(--coral); opacity:.75}
.socials{display:flex; gap:.6rem; margin-top:1rem}
.socials a{width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background:var(--sand); transition:transform .35s, background .35s, color .35s}
.socials a:hover{transform:translateY(-3px) rotate(-4deg); background:var(--coral); color:#fff}

.posts{display:grid; grid-template-columns:1fr; gap:clamp(18px,2.4vw,28px)}
@media (min-width:640px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s, opacity .8s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column}
.post:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg)}
.post__top{height:8px; background:var(--c,var(--coral))}
.post__b{padding:1.5rem}
.post__k{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c,var(--coral)); font-weight:500}
.post h3{font-size:1.16rem; margin:.6rem 0 .5rem; line-height:1.3}
.post p{margin:0; color:var(--ink-2); font-size:.92rem; line-height:1.7}
.soon{display:inline-block; margin-top:1rem; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2); opacity:.7}

.final{background:linear-gradient(150deg,var(--coral) 0%,#FD8A6A 55%,var(--mango) 100%);
  color:#fff; text-align:center; padding:clamp(70px,10vw,120px) 0}
.final h2{font-size:clamp(2rem,6vw,3.2rem); margin-bottom:1rem}
.final p{max-width:46ch; margin:0 auto 2rem; opacity:.94; line-height:1.75}
.btns{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.9rem; border-radius:99px;
  background:#fff; color:var(--coral-deep); font-weight:500; font-size:.98rem;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.5); transition:transform .35s, box-shadow .35s}
.btn:hover{transform:translateY(-3px)}
.btn--ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.12)}

footer{background:var(--deep); color:rgba(255,255,255,.72); padding:clamp(46px,6vw,70px) 0 2.4rem; font-size:.9rem}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; margin-bottom:2.6rem}
@media (max-width:760px){footer .cols{grid-template-columns:1fr; gap:1.8rem}}
footer img{width:120px; margin:0 auto 1rem}
footer .cols>div:first-child{text-align:center}
footer .cols>div:first-child p{margin-inline:auto}
footer h4{font-family:'Outfit'; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sun); margin:0 0 .9rem; font-weight:500}
footer ul{list-style:none; margin:0; padding:0; line-height:2}
footer a:hover{color:#fff}
footer .btm{border-top:1px solid rgba(255,255,255,.12); padding-top:1.6rem; display:flex;
  justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; opacity:.6}

.top{position:fixed; right:18px; bottom:18px; z-index:800; width:46px; height:46px; border-radius:50%;
  border:0; cursor:pointer; background:var(--coral); color:#fff; display:grid; place-items:center;
  opacity:0; pointer-events:none; transform:translateY(14px);
  transition:all .45s cubic-bezier(.22,1,.36,1); box-shadow:0 14px 28px -12px rgba(253,103,110,.9)}
.top.on{opacity:1; pointer-events:auto; transform:none}
/* ═══════════════ SOUS-PAGES ═══════════════ */
body.sub{background:var(--cream)}
body.sub .nav{background:rgba(255,247,238,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 26px -18px rgba(78,38,30,.5)}
body.sub .nav .nav__links a{color:var(--ink); text-shadow:none}
body.sub .nav .burger i{background:var(--ink)}
body.sub .nav__cta{color:#fff!important}

.phero{position:relative; isolation:isolate; overflow:hidden; text-align:center;
  padding:calc(96px + 4svh) 6vw clamp(46px,8svh,86px)}
.phero::before{content:''; position:absolute; inset:-4%; z-index:-2;
  background:url('/assets/hero-blur-v6.webp') center 46%/cover no-repeat; transform:scale(1.04)}
.phero::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(255,247,238,.50) 0%, rgba(255,247,238,.40) 30%, rgba(255,247,238,.26) 58%, rgba(255,247,238,.80) 86%, var(--cream) 100%)}
.phero h1{color:var(--ink); font-family:'Fraunces',Georgia,serif; font-weight:500; line-height:1.06;
  font-size:clamp(2.05rem,7vw,3.9rem)}
.phero__lead{color:var(--ink-2); max-width:54ch; margin:1.1rem auto 0; line-height:1.75;
  font-size:clamp(.98rem,2.6vw,1.1rem)}
.phero .eyebrow{color:var(--coral)}
.bc{font-size:.76rem; color:var(--ink-2); margin-bottom:1rem}
.bc a{border-bottom:1px solid rgba(107,82,80,.32)}
.bc a:hover{border-color:var(--coral); color:var(--coral-deep)}
.bc i{font-style:normal; opacity:.55; margin:0 .45rem}
.sub main>.sec:first-of-type{padding-top:clamp(48px,7vw,80px)}

/* ═══════════════ ACCUEIL · BANDE COMPACTE ═══════════════ */
.hub{background:linear-gradient(180deg,var(--cream) 0%,var(--sand) 100%);
  padding:clamp(44px,7vw,80px) 0 clamp(40px,6vw,70px)}
.hub__g{display:grid; gap:clamp(16px,2.2vw,24px); grid-template-columns:1fr}
@media (min-width:900px){.hub__g{grid-template-columns:1.02fr .98fr}}
.hub__c{background:#fff; border-radius:var(--r); padding:clamp(1.35rem,3.2vw,2rem); box-shadow:var(--shadow)}
.hub__c h2{font-size:clamp(1.25rem,3.4vw,1.6rem); margin-bottom:.85rem}
.hub__note{color:var(--ink-2); font-size:.92rem; line-height:1.7; margin:0 0 1.1rem}
.hub__score{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.hub__n{font-family:'Fraunces',serif; font-size:3rem; line-height:1; color:var(--coral-deep)}
.hub__score .gstars{display:flex; gap:2px}
.hub__score small{display:block; color:var(--ink-2); font-size:.84rem; margin-top:.25rem}
.hub__q{border-left:3px solid var(--sun); padding:.15rem 0 .15rem 1rem; margin:0 0 1.1rem;
  color:var(--ink-2); font-size:.92rem; line-height:1.7; font-style:italic}
.hub__q b{display:block; font-style:normal; font-weight:500; color:var(--ink); font-size:.8rem; margin-top:.4rem}
.hub__lk{display:inline-flex; align-items:center; gap:.45rem; color:var(--coral-deep); font-size:.9rem; font-weight:500;
  border-bottom:1.5px solid transparent; transition:border-color .3s}
.hub__lk:hover{border-color:currentColor}
.hub__addr{margin:0 0 .9rem; color:var(--ink-2); line-height:1.8; font-size:.94rem}
.hub__addr strong{color:var(--ink); font-weight:500}
.hub__btns{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.15rem}
.hub__btns .btn{padding:.78rem 1.35rem; font-size:.88rem; background:var(--coral); color:#fff;
  box-shadow:0 12px 26px -12px rgba(253,103,110,.9)}
.hub__btns .btn--ghost{background:transparent; color:var(--coral-deep); box-shadow:inset 0 0 0 1.5px rgba(224,74,85,.4)}
.hub__btns .btn--ghost:hover{background:rgba(253,103,110,.08)}

.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.6vw,16px); margin-top:clamp(18px,2.4vw,24px)}
@media (min-width:760px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{display:flex; flex-direction:column; gap:.5rem; background:#fff; border-radius:18px;
  padding:1.15rem 1.1rem 1.2rem; box-shadow:var(--shadow); transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s}
.tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.tile__ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--bg,var(--coral-soft))}
.tile b{font-family:'Fraunces',serif; font-weight:500; font-size:1.02rem}
.tile span{color:var(--ink-2); font-size:.82rem; line-height:1.55}

/* ═══════════════ PAGE PRODUIT ═══════════════ */
.prod{display:grid; gap:clamp(26px,4vw,54px); grid-template-columns:1fr; align-items:start}
@media (min-width:900px){.prod{grid-template-columns:.86fr 1.14fr}}
.prod__media{position:relative; border-radius:var(--r); aspect-ratio:1/1; display:grid; place-items:center;
  background:radial-gradient(62% 64% at 50% 56%, var(--bg) 0%, transparent 76%)}
.prod__media img{width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 24px 32px rgba(78,38,30,.26))}
@media (min-width:900px){.prod__media{position:sticky; top:96px}}
.prod__body>p{color:var(--ink-2); line-height:1.85; margin:0 0 1.1rem; font-size:clamp(.96rem,2.4vw,1.02rem)}
.prod__body h2{font-size:clamp(1.3rem,3.6vw,1.75rem); margin:2.4rem 0 1rem}
.prod__plus{margin:1.2rem 0 0; padding:1rem 1.2rem; border-radius:16px; background:var(--bg);
  color:var(--ink-2); font-size:.88rem; line-height:1.7}
.prod__plus strong{color:var(--ink); font-weight:500}
.prod .row__p{color:var(--c,var(--coral-deep))}
.prod__btns{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2rem}
.prod__btns .btn{background:var(--coral); color:#fff; box-shadow:0 14px 30px -14px rgba(253,103,110,.9); padding:.85rem 1.6rem; font-size:.9rem}
.prod__btns .btn--ghost{background:transparent; color:var(--coral-deep); box-shadow:inset 0 0 0 1.5px rgba(224,74,85,.4)}
.prod__btns .btn--ghost:hover{background:rgba(253,103,110,.08)}

.also{background:linear-gradient(180deg,var(--cream),var(--sand)); padding:clamp(52px,7vw,88px) 0}
.also h2{text-align:center; font-size:clamp(1.4rem,4vw,2rem); margin-bottom:clamp(24px,3.5vw,38px)}
.also__g{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.6vw,18px)}
@media (min-width:900px){.also__g{grid-template-columns:repeat(5,1fr)}}
.also__i{background:#fff; border-radius:18px; padding:1rem .9rem 1.1rem; text-align:center; box-shadow:var(--shadow);
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.also__i:hover{transform:translateY(-6px)}
.also__i img{width:100%; aspect-ratio:1/1; object-fit:contain; margin-bottom:.5rem}
.also__i b{font-family:'Fraunces',serif; font-weight:500; font-size:.95rem}

/* ═══════════════ ILS PARLENT DE NOUS ═══════════════ */
.presses{display:grid; gap:clamp(14px,2vw,22px); grid-template-columns:1fr}
@media (min-width:820px){.presses{grid-template-columns:repeat(3,1fr)}}
.pr{position:relative; display:block; background:#fff; border-radius:var(--r); padding:1.6rem 1.5rem 1.5rem;
  box-shadow:var(--shadow); transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s}
a.pr:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.pr__k{display:inline-flex; align-items:center; gap:.45rem; font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--coral); font-weight:500; margin-bottom:.85rem}
.pr p{margin:0 0 .9rem; font-family:'Fraunces',serif; font-size:1.02rem; line-height:1.5}
.pr__s{font-size:.8rem; color:var(--ink-2)}
.pr__s b{color:var(--ink); font-weight:500}
.pr__s span{color:var(--coral)}

/* ═══════════════ HERO · LIEN PRODUIT ═══════════════ */
.capLink{display:inline-flex; align-items:center; gap:.4rem; margin-top:.7rem; font-size:.82rem; font-weight:500;
  color:#fff; padding:.4rem .95rem; border-radius:99px; background:rgba(255,255,255,.15);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); backdrop-filter:blur(6px);
  transition:background .3s, transform .3s}
.capLink:hover{background:rgba(255,255,255,.26); transform:translateY(-2px)}
.item{cursor:grab}
/* .orbit est en pointer-events:none ; seul le produit centré redevient cliquable */
.orbit .item.tapable{pointer-events:auto; cursor:pointer}
.hero.dragging .item{cursor:grabbing}

/* ═══ accueil : un seul logo à l'écran tant que le Hero est visible ═══ */
/* sur l'accueil, le grand logo suffit : celui de la barre s'efface ET libère
   sa place, sinon la barre reste haute de 105 px et vole du ciel au sommet */
body:not(.sub):not(.no-brand) .nav:not(.solid) .nav__logo{opacity:0; width:0; pointer-events:none}
.nav__logo{transition:width .45s, opacity .45s}

/* ═══ ajustements mobile ═══ */
@media (max-width:480px){
  .heroCta .place{font-size:.6rem; letter-spacing:.16em}
  .phero{padding-top:calc(88px + 3svh)}
  .prod__media{aspect-ratio:auto; min-height:0; max-height:46svh; padding:1rem 0}
  .prod__media img{width:auto; max-width:88%; height:46svh; max-height:46svh}
  .hub__q:nth-of-type(2){display:none}
  .hub__n{font-size:2.5rem}
}

/* pendant les 0,8 s de fondu, le loader restait cliquable et avalait
   le premier appui de l'utilisateur */
#loader.done{pointer-events:none}

/* la bande de Hero fait déjà respirer : on resserre la première section */
.sub main>.sec:first-of-type,
.sub main>section:first-of-type{padding-top:clamp(28px,5vw,58px)}

/* sur mobile, les catégories de la carte défilent au lieu d'occuper 4 lignes */
@media (max-width:700px){
  .tabs{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    padding:.25rem 5vw 1rem; margin-inline:-5vw; margin-bottom:1.6rem;
    scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto; scroll-snap-align:center}
}

/* ═══════════════ HERO ÉPURÉ ═══════════════ */
/* le nom du produit EST le lien vers sa page : un élément au lieu de deux */
.caption a{display:block; color:inherit}
.caption h2{display:inline-flex; align-items:baseline; gap:.4rem}
.caption .go{font-size:.62em; opacity:.72; transform:translateY(-.06em);
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .32s}
.caption a:hover .go{transform:translate(4px,-.06em); opacity:1}
.caption{pointer-events:auto}
.heroCta{gap:0}
/* le logo se pose au-dessus de la pointe, sans fondu derrière la montagne */
.brand{z-index:120}

/* ═══════════════ TYPOGRAPHIE — au plus près du logo ═══════════════ */
/* Yellowtail est le script Google le plus proche du lettrage « Hello Sunshine » :
   même pinceau, même bounce. Réservé aux grands titres — un script en petit
   corps ou sur un paragraphe devient illisible, surtout sur mobile. */
h1, h2,
.phero h1,
.head h2,
.caption h2,
.final h2,
.hub__c h2,
.story h2,
.also h2,
.quote{
  font-family:'Yellowtail', 'Brush Script MT', cursive;
  font-weight:400;
  font-variation-settings:normal;
  letter-spacing:.005em;
  line-height:1.18;
}
/* le script est plus petit à taille égale : on compense */
.phero h1{font-size:clamp(2.5rem,8.6vw,4.6rem); line-height:1.12}
.head h2{font-size:clamp(2.4rem,7.4vw,4rem)}
.caption h2{font-size:clamp(1.7rem,6.8vw,2.5rem)}
.final h2{font-size:clamp(2.4rem,7vw,3.7rem)}
.story h2{font-size:clamp(2.3rem,6vw,3.4rem)}
.hub__c h2{font-size:clamp(1.6rem,4.4vw,2.05rem)}
.quote{font-size:1.35rem}
.caption .go{font-size:.48em}

/* tout le reste repasse en Outfit : titres de cartes, noms d'articles,
   chiffres et prix — c'est là qu'on a besoin de lisibilité, pas d'effet */
h3, h4,
.card h3, .post h3, .vow h3, .info__c h3, .combo h3,
.tile b, .also__i b, .press p, .pr p, .rev__n,
.hub__n, .gscore__n, .combo__p b, .row__n, .row__p,
footer img + p{
  font-family:'Outfit', system-ui, -apple-system, sans-serif;
  font-variation-settings:normal;
}
.hub__n, .gscore__n, .combo__p b{font-weight:600; letter-spacing:-.02em}
.press p, .pr p{font-weight:300; line-height:1.65}
.card h3, .post h3, .combo h3, .also__i b, .tile b{font-weight:500; letter-spacing:-.01em}
.row__n{font-weight:500}
.ld__word{font-family:'Yellowtail', cursive; letter-spacing:.02em; text-transform:none; font-size:1.15rem}
@media (max-width:880px){
  .nav__links a{font-family:'Yellowtail', cursive; font-size:1.75rem; letter-spacing:.01em}
  .nav__cta{font-family:'Outfit', sans-serif}
}
.press a::before{font-family:'Yellowtail', cursive; color:var(--sun)}

/* ═══════════════ CORRECTIF · MENU MOBILE COUPÉ ═══════════════ */
/* backdrop-filter sur .nav crée un bloc conteneur pour ses descendants
   position:fixed — le menu plein écran se retrouvait donc découpé à la
   hauteur de la barre (81 px au lieu de 844). Tant qu'il est ouvert,
   on retire le filtre : le menu redevient relatif à la fenêtre. */
@media (max-width:880px){
  .nav.open,
  body.sub .nav.open,
  .nav.solid.open{
    background:transparent!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:none!important;
  }
  .nav__links{z-index:1000}
  .burger{z-index:1002}
  /* le panneau doit couvrir la barre d'état / l'encoche */
  .nav__links{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
}

/* ═══════════════ PROFONDEUR DE CHAMP DU HERO ═══════════════ */
/* le décor passe en léger flou : les produits, nets, se détachent enfin
   du relief très détaillé de la montagne */
/* le Hero reste net : la photo est le sujet, pas un décor */

/* un halo crème très doux sous le texte : le titre reste lisible sans
   noyer la montagne, qui continue d'apparaître sur les côtés */
.phero .wrap{position:relative; z-index:1}
.phero .wrap::before{content:''; position:absolute; inset:-14% -10%; z-index:-1; pointer-events:none;
  background:radial-gradient(62% 58% at 50% 50%, rgba(255,247,238,.80) 0%, rgba(255,247,238,.55) 46%, rgba(255,247,238,0) 78%)}

/* ============================================================
   RÉVISION CLIENT — sept. 2026 (overrides, priorité en fin de feuille)
   ============================================================ */
:root, html, body{ color-scheme: only light; }

/* Fond dégradé pêche → rose pâle (charte Instagram) sur les pages de contenu */
body{ background:linear-gradient(168deg,#FDE7D2 0%,#FBDDD6 46%,#F8D2D0 100%) fixed; }
.sec--sand{ background:linear-gradient(180deg,rgba(255,247,238,.28),rgba(248,208,206,.55)); }
.press{ background:transparent; }

/* Titres & sous-titres plus grands / plus lisibles */
.phero h1{ font-size:clamp(2.2rem,6.4vw,3.7rem); }
.phero__lead{ font-size:clamp(1.02rem,2.7vw,1.2rem); line-height:1.7; }
.head h2{ font-size:clamp(2.2rem,6.2vw,3.6rem); }
.head p{ font-size:clamp(1rem,2.5vw,1.12rem); }
.prod__body h2{ font-size:clamp(1.55rem,4vw,2.05rem); margin:1.7rem 0 .7rem; }
.menu__note{ font-size:1rem; }

/* Bloc "prix" du produit : légèrement encadré pour distinguer photo / description / prix */
.prod__body .menu{ background:rgba(255,255,255,.55); border:1px solid rgba(224,140,110,.18);
  border-radius:16px; padding:1rem 1.1rem; }

/* Devise (Qui sommes-nous) — grande et mise en évidence */
.quote--devise{ text-align:center; margin:2.4rem auto 0; max-width:660px; padding:2.1rem 1.8rem;
  border-radius:24px; background:linear-gradient(135deg,#FFE7CE,#FBD9D6);
  box-shadow:0 20px 44px -28px rgba(200,90,80,.65);
  font-family:'Yellowtail',cursive; font-size:clamp(2.1rem,6vw,3.2rem); line-height:1.15; color:#E8677D; }
.quote--devise small{ display:block; margin:0 0 .5rem; font-family:'Outfit',sans-serif; font-size:.74rem;
  letter-spacing:.24em; text-transform:uppercase; color:#CE7A72; font-weight:500; }

/* Spécialités : nom du produit nettement plus grand que la catégorie */
.card .tag{ font-size:.64rem!important; letter-spacing:.14em; }
.grid .card h2{ font-size:clamp(1.55rem,3.4vw,1.95rem)!important; line-height:1.15; }

/* Toppings — encadré coloré, tiers 1/2/3, glaces à la ligne */
.prod__plus--box, .tp-box{ background:linear-gradient(135deg,#FFF1DE,#FDE1DC);
  border:1px solid rgba(224,120,90,.22); border-radius:16px; padding:1.1rem 1.3rem; margin-top:1.3rem; text-align:left; }
.prod__plus--box>strong:first-child, .tp-box>strong:first-child{ display:block; color:#B5543F; margin-bottom:.5rem; }
.tp-tiers{ display:flex; flex-wrap:wrap; gap:.5rem .7rem; margin:.2rem 0 .7rem; }
.tp-tiers span{ display:inline-flex; align-items:baseline; gap:.4rem; background:#fff; border-radius:99px;
  padding:.32rem .85rem; font-size:.82rem; box-shadow:0 4px 12px -9px rgba(120,60,40,.5); }
.tp-tiers b{ color:#B5543F; font-weight:600; }
.tp-list{ margin:.2rem 0 .4rem; font-size:.9rem; color:var(--ink-2); line-height:1.6; }
.tp-glaces{ margin:.4rem 0 0; font-size:.92rem; }
.tp-box strong{ color:#B5543F; }

/* Logo du hero remonté (ne touche plus la montagne) */
.brand{ top:clamp(58px,7.5vh,100px)!important; }

/* Loader : logo centré */
#loader .ld{ place-items:center; }
#loader .ld__logo{ margin:0 auto; }