@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Caveat:wght@400;600;700&family=Iceberg&family=Limelight&family=Poiret+One&display=swap');
:root{
  --cream:#ECE4CF; --cream2:#D6C9AA; --paper:#F4EEDC;
  /* palette TEAL (vert des pupitres du Serpentine Orchestra) : fonds vert profond + accents or/ambre — noms de variables conservés */
  --teal:#C0913F; --teal-bg:#12564C; --teal-deep:#0B3A33; --teal-soft:#E4C486; --ink:#071810; --gold-dark:#573a0b; --line:rgba(236,228,207,.32);
  --stand:#33B49A; --terra:#C06A3C; --gold:#D3A53E; --sage:#B07A3A;
  /* Marvin 2026-09-07 : UNE seule police sur tout le site (Poiret One, alternative Art-Déco gratuite à Peignot) */
  --disp:'Poiret One',sans-serif; --serif:'Poiret One',sans-serif; --hand:'Poiret One',sans-serif;
  --logo:'Poiret One',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--teal-bg);color:var(--cream);font-family:var(--serif);font-size:19px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-synthesis:none;}
a{color:inherit;text-decoration:none;} img{display:block;max-width:100%;}
::selection{background:var(--teal-soft);color:var(--teal-deep);}
.wrap{max-width:1180px;margin:0 auto;padding:0 30px;}
.disp{font-family:var(--disp);font-weight:600;}

.curtain{position:fixed;inset:0;z-index:999;background:var(--teal-deep);display:flex;align-items:center;justify-content:center;transform:translateY(0);transition:transform .7s cubic-bezier(.76,0,.24,1);}
.curtain img{width:120px;animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:1;transform:scale(1)}}
body.loaded .curtain{transform:translateY(-100%);} body.leaving .curtain{transform:translateY(0);transition:transform .55s cubic-bezier(.76,0,.24,1);}

.deco-svg{color:var(--cream);opacity:.5;}
.floatdeco{position:absolute;pointer-events:none;z-index:1;opacity:0;animation:dfin 1.2s ease forwards, dfloat 8s ease-in-out infinite;}
@keyframes dfin{to{opacity:.5;}}
@keyframes dfloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-22px) rotate(calc(var(--r,0deg) + 4deg))}}
.dots{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.dots span{position:absolute;border-radius:50%;background:var(--cream);opacity:.13;animation:drift linear infinite;}
@keyframes drift{0%{transform:translateY(16px)}50%{transform:translateY(-16px)}100%{transform:translateY(16px)}}

/* NAV — same on all pages: logo left, lang + burger right */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:16px 26px;transition:.35s;pointer-events:none;}
.nav.solid{background:linear-gradient(180deg,rgba(11,58,51,.85),rgba(11,58,51,0));}
/* accueil : nav SANS voile (transparente), ombres pour lisibilité sur la vidéo */
.nav-home{background:none!important;}
.nav-home .lang a{text-shadow:0 1px 8px rgba(0,0,0,.6);}
.nav-home .brand-emblem{filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));}
.nav.scrolled{background:rgba(11,58,51,.94);backdrop-filter:blur(8px);padding:10px 26px;box-shadow:0 1px 0 var(--line);}
.nav .brand{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;}
.nav .brand .brand-emblem,.nav .brand>img{width:48px;transition:transform .5s;display:block;}
.nav .brand:hover .brand-emblem,.nav .brand:hover>img{transform:rotate(-8deg) scale(1.08);}
/* en-tête : « SERPENTINE ORCHESTRA » qui s'écrit à côté de l'emblème (fin de l'intro) */
.brand-word{position:relative;display:inline-block;line-height:0;opacity:0;-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);}
.brand-word img{height:38px;width:auto;display:block;filter:drop-shadow(0 1px 5px rgba(0,0,0,.45));}
.brand-plume{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:22px;color:var(--cream);opacity:0;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.brand-plume svg{width:100%;height:auto;}
@keyframes brandWrite{from{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);}to{-webkit-clip-path:inset(0 -4% 0 0);clip-path:inset(0 -4% 0 0);}}
@keyframes brandPlume{0%{opacity:0;left:0;}10%{opacity:1;}90%{opacity:1;}100%{opacity:0;left:100%;}}
.brand.write-go .brand-word{opacity:1;animation:brandWrite 2.6s cubic-bezier(.62,.03,.4,.98) forwards;}
.brand.write-go .brand-plume{animation:brandPlume 2.6s cubic-bezier(.62,.03,.4,.98) forwards;}
/* retour sur l'accueil : logo déjà écrit, pas de ré-animation */
.brand.written .brand-word{opacity:1!important;-webkit-clip-path:inset(0 -4% 0 0)!important;clip-path:inset(0 -4% 0 0)!important;animation:none!important;}
.brand.written .brand-plume{display:none!important;}
@media(max-width:860px){.nav .brand .brand-emblem,.nav .brand>img{width:42px;}.brand-word img{height:32px;}}
.nav .right{display:flex;align-items:center;gap:18px;pointer-events:auto;}
.nav .lang{font-family:var(--disp);font-weight:600;letter-spacing:.06em;font-size:.86rem;color:var(--cream2);}
.nav .lang a{color:var(--cream2);padding:2px 3px;} .nav .lang a.on{color:var(--cream);} .nav .lang a:hover{color:var(--cream);}
.burger{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:rgba(236,228,207,.08);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:.3s;}
.burger:hover{background:var(--cream);} .burger span{width:22px;height:2px;background:var(--cream);border-radius:2px;transition:.3s;} .burger:hover span{background:var(--teal-deep);}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg);} .burger.x span:nth-child(2){opacity:0;} .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* fun vintage full-screen menu */
.overlay{position:fixed;inset:0;z-index:80;background:var(--teal-bg);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.45s;overflow:hidden;}
.overlay.open{opacity:1;visibility:visible;}
.overlay .sunb{position:absolute;top:-12%;left:50%;transform:translateX(-50%);width:min(140vh,1200px);color:var(--cream);opacity:.14;}
.overlay ul{list-style:none;text-align:center;position:relative;z-index:2;}
.overlay li{margin:6px 0;overflow:hidden;}
.overlay a{font-family:'Poiret One',var(--disp);font-weight:400;-webkit-text-stroke:1px currentColor;text-stroke:1px currentColor;paint-order:stroke fill;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1.7rem,5.2vw,3.1rem);color:var(--cream);display:inline-block;transition:.3s;padding:4px 16px;}
.overlay a:hover{color:var(--teal-deep);background:var(--cream);transform:rotate(-1.5deg) scale(1.04);border-radius:8px;}
.overlay .num{font-family:var(--hand);font-size:1.2rem;color:var(--teal-soft);margin-right:12px;}
.overlay .close{position:absolute;top:22px;right:28px;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:none;color:var(--cream);font-size:1.6rem;cursor:pointer;z-index:3;}
.overlay .close:hover{background:var(--cream);color:var(--teal-deep);}
.overlay.open li{animation:mslide .5s cubic-bezier(.2,.8,.2,1) backwards;}
.overlay.open li:nth-child(1){animation-delay:.06s}.overlay.open li:nth-child(2){animation-delay:.12s}.overlay.open li:nth-child(3){animation-delay:.18s}.overlay.open li:nth-child(4){animation-delay:.24s}.overlay.open li:nth-child(5){animation-delay:.3s}.overlay.open li:nth-child(6){animation-delay:.36s}
@keyframes mslide{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}

/* ---------- HOME ---------- */
.home{position:fixed;inset:0;overflow:hidden;}
.home video,.home .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.home-photo,.home-bg{display:none;}
.vig{position:absolute;inset:0;z-index:1;background:radial-gradient(125% 100% at 50% 42%,transparent 34%,rgba(20,14,8,.20) 66%,rgba(16,11,6,.50));}
.grain{position:absolute;inset:0;z-index:1;opacity:.06;background-image:radial-gradient(rgba(255,255,255,.6) .5px,transparent .5px);background-size:3px 3px;}
@keyframes rise{to{opacity:1;transform:none;}}
/* ---- écran d'intro : fond TEAL (vert des pupitres, var(--stand)) ; le logo ENTIER s'écrit au STYLO PLUME + tagline + MENU ; puis le fond devient transparent (la vidéo apparaît dessous), le logo file en haut à gauche, LE MENU RESTE (pas de burger sur l'accueil) ---- */
.intro{position:fixed;inset:0;z-index:1000;background:transparent;display:flex;align-items:center;justify-content:center;text-align:center;padding:26px;}
.intro-bg{position:absolute;inset:0;background:var(--teal-bg);transition:opacity 1s ease;z-index:0;}
.intro.done{pointer-events:none;} .intro.done .intro-bg{opacity:0;}
.intro-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:100%;transition:opacity .7s ease;}
/* quand on quitte l'accueil (clic menu) : l'overlay + le menu se retirent (sinon le menu « reste figé » pendant la transition) */
body.leaving .intro{opacity:0;pointer-events:none;transition:opacity .4s ease;}
.logo-anim{position:relative;display:inline-block;line-height:0;transition:opacity .7s ease;}
.intro.done .intro-inner{opacity:0;}
.emblem-box{position:relative;display:block;width:clamp(92px,15vh,164px);margin:0 auto;}
.emblem-draw{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.emblem-draw path{fill:none;stroke:var(--cream);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 1px 5px rgba(0,28,25,.22));}
.intro .emblem{display:block;width:100%;opacity:0;filter:drop-shadow(0 2px 10px rgba(0,28,25,.28));}
.intro .wordmark{width:clamp(220px,33vw,410px);display:block;margin:min(2.4vh,20px) auto 0;opacity:1;-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);filter:drop-shadow(0 2px 10px rgba(0,28,25,.25));}
.plume-cursor{position:absolute;top:0;left:50%;transform:translate(-24%,-86%);width:34px;color:var(--cream);opacity:0;pointer-events:none;z-index:3;filter:drop-shadow(0 3px 6px rgba(0,28,25,.45));}
.plume-cursor svg{width:100%;height:auto;opacity:1;}
/* tagline + menu : dans un pied SÉPARÉ (absolu), cachés pendant l'écran vert (seul le logo se dessine), apparaissent QUAND la vidéo est révélée */
.intro-foot{position:absolute;left:0;right:0;bottom:clamp(48px,12vh,120px);z-index:2;display:flex;flex-direction:column;align-items:center;padding:0 22px;pointer-events:none;}
.intro .tagline{margin-top:clamp(14px,2.6vh,26px);font-family:var(--disp);font-weight:600;letter-spacing:.32em;text-transform:uppercase;font-size:clamp(.6rem,1.5vw,.82rem);color:var(--cream);opacity:0;text-shadow:0 1px 12px rgba(0,0,0,.55);}
.intro-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(16px,2.8vw,34px);max-width:min(680px,92vw);margin-top:clamp(14px,2.6vh,26px);opacity:0;}
.intro.done .intro-menu{opacity:1;pointer-events:auto;animation:riseFade .8s ease .45s both;}
.intro-menu a{display:inline-block;font-family:'Poiret One',var(--disp);font-weight:400;-webkit-text-stroke:.7px currentColor;text-stroke:.7px currentColor;paint-order:stroke fill;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.98rem,1.9vw,1.24rem);color:var(--cream);opacity:1;transition:color .25s,transform .25s,text-shadow .25s;text-shadow:0 1px 4px rgba(0,0,0,.7),0 2px 18px rgba(0,0,0,.7);}
.intro-menu a:hover{color:var(--teal-soft);transform:scale(1.16);text-shadow:0 1px 5px rgba(0,0,0,.75),0 0 22px rgba(228,196,134,.7);}
@keyframes penDraw{to{stroke-dashoffset:0;}}
@keyframes fadeIn{to{opacity:1;}}
@keyframes fadeOut{to{opacity:0;}}
@keyframes writeLR{to{-webkit-clip-path:inset(0 -4% 0 0);clip-path:inset(0 -4% 0 0);}}
@keyframes penJourney{0%{opacity:0;left:50%;top:2%;}5%{opacity:1;}12%{left:43%;top:13%;}24%{left:61%;top:31%;}36%{left:39%;top:43%;}48%{left:57%;top:54%;}52%{opacity:1;left:5%;top:66%;}60%{left:23%;top:66%;}72%{left:47%;top:66%;}84%{left:71%;top:66%;}95%{left:93%;top:66%;opacity:1;}100%{left:98%;top:66%;opacity:0;}}
@keyframes riseFade{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.intro.draw-go .emblem-draw path{animation:penDraw 1.8s ease forwards;}
.intro.draw-go .emblem-draw{animation:fadeOut .6s ease 1.85s forwards;}
.intro.draw-go .emblem{animation:fadeIn .6s ease 1.8s forwards;}
.intro.draw-go .wordmark{animation:writeLR 1.55s cubic-bezier(.5,.05,.35,1) 1.9s forwards;}
.intro.draw-go .plume-cursor{animation:penJourney 3.5s ease forwards;}
/* écran vert : le logo se dessine PUIS la tagline « Grand Orchestre... » apparaît SOUS le logo ; le MENU lui n'apparaît qu'avec la vidéo */
.intro.draw-go .tagline{animation:riseFade .9s ease 3.6s forwards;}
/* retour sur l'accueil (intro déjà vue) : tout est instantané SAUF le menu qui réapparaît en fondu doux (évite l'effet « figé ») */
.intro.skip .intro-bg{opacity:0!important;transition:none!important;}
.intro.skip .intro-inner{opacity:0!important;transition:none!important;animation:none!important;}
.intro.skip .emblem-draw path,.intro.skip .emblem,.intro.skip .wordmark{animation:none!important;transition:none!important;}
.intro.skip .intro-menu{opacity:1;pointer-events:auto;animation:riseFade .7s ease both;}
@media(prefers-reduced-motion:reduce){.emblem-draw{display:none!important;}.intro .emblem{opacity:1!important;}.intro .wordmark{clip-path:none!important;-webkit-clip-path:none!important;}.intro .tagline,.intro-menu{opacity:1!important;animation:none!important;}.plume-cursor{display:none;}}

/* menu = bulles blanches, typo du logo */
.bubbles{position:absolute;inset:0;z-index:6;}
.bubble{position:absolute;width:var(--w,158px);height:var(--w,158px);border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;
  background:var(--paper);color:var(--teal-deep);box-shadow:0 14px 34px rgba(0,0,0,.36),inset 0 0 0 1px rgba(11,58,51,.10);
  opacity:0;transform:scale(.6);animation:pop .8s cubic-bezier(.2,.9,.3,1.3) forwards,floatb 7s ease-in-out infinite;
  transition:background .4s,color .4s,box-shadow .4s,scale .4s;}
.bubble::after{content:"";position:absolute;inset:10px;border-radius:50%;border:1px solid rgba(11,58,51,.16);transition:border-color .4s;}
.bubble b{position:relative;z-index:2;font-family:var(--logo);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1.08;padding:0 12px;font-size:clamp(.84rem,1.08vw,1.04rem);}
.bubble:hover{scale:1.07;background:var(--teal-deep);color:var(--cream);box-shadow:0 24px 54px rgba(0,0,0,.5);}
.bubble:hover::after{border-color:rgba(236,228,207,.42);}
@keyframes pop{to{opacity:1;transform:scale(1);}} @keyframes floatb{0%,100%{translate:0 0}50%{translate:0 -14px}}
.b1{left:12%;top:23%;--w:160px;animation-delay:1.0s,1.0s;}.b2{right:12%;top:19%;--w:150px;animation-delay:1.15s,1.7s;}
.b3{left:5%;top:49%;--w:148px;animation-delay:1.3s,2.2s;}.b4{right:5%;top:47%;--w:160px;animation-delay:1.45s,1.35s;}
.b5{left:18%;bottom:8%;--w:152px;animation-delay:1.6s,2.5s;}.b6{right:18%;bottom:7%;--w:146px;animation-delay:1.75s,1.9s;}
.sound{position:absolute;bottom:24px;right:26px;z-index:7;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(11,58,51,.4);backdrop-filter:blur(6px);color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;animation:rise 1s ease 2s forwards;transition:.3s;}
.sound:hover{background:var(--cream);color:var(--teal-deep);}

/* ---------- inner pages ---------- */
.phero{position:relative;overflow:hidden;padding:140px 0 80px;background:var(--teal-bg);}
.phero.creamh{background:var(--cream);color:var(--ink);}
.phero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center;position:relative;z-index:5;}
.klabel{font-family:var(--disp);font-weight:600;letter-spacing:.28em;text-transform:uppercase;font-size:.78rem;color:var(--teal-soft);}
.phero.creamh .klabel,section.cream .klabel{color:var(--gold-dark);}
.phero h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.03;margin:14px 0 0;}
.phero .sub{font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--cream2);margin-top:16px;max-width:560px;}
.phero.creamh .sub{color:var(--teal-deep);opacity:.9;}

/* animated full-orchestra photo */
.orchphoto{position:relative;}
.orchphoto .frame{background:var(--cream);padding:12px;border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.34);transform:rotate(-2.2deg);animation:sway 7s ease-in-out infinite;}
.orchphoto .frame img{width:100%;display:block;border-radius:2px;}
.orchphoto .cap{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%) rotate(-2deg);font-family:var(--hand);font-size:1.5rem;color:var(--teal-deep);background:var(--cream);padding:2px 16px;border-radius:20px;box-shadow:0 6px 18px rgba(0,0,0,.2);}
@keyframes sway{0%,100%{transform:rotate(-2.2deg) translateY(0)}50%{transform:rotate(1.4deg) translateY(-12px)}}
.orchphoto:hover .frame{animation-play-state:paused;transform:rotate(0) scale(1.02);transition:transform .5s;}

section{padding:92px 0;position:relative;overflow:hidden;}
section.cream{background:var(--cream);color:var(--ink);} section.teal{background:var(--teal-bg);} section.deep{background:var(--teal-deep);}
.shead{text-align:center;margin-bottom:44px;} .shead h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.05;margin-top:8px;}
/* Poiret One est FINE → on épaissit le tracé des titres (comme les menus) pour qu'ils soient plus présents/foncés */
.phero h1,.phero.creamh h1,.shead h2,.rrow h3,.card h3,.lead-name,.callout .big,.mrow .mn{-webkit-text-stroke:.6px currentColor;text-stroke:.6px currentColor;paint-order:stroke fill;}
.lead{max-width:760px;margin:0 auto;text-align:center;font-size:1.18rem;} section.cream .shead .klabel{color:var(--teal);}
.divider{width:64px;height:1px;background:currentColor;opacity:.4;margin:18px auto 0;}
.figure{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 44px rgba(0,0,0,.22);} section.cream .figure{border-color:rgba(18,70,60,.16);} .figure img{width:100%;display:block;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:52px;}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;}
.card{border:1px solid var(--line);border-radius:16px;padding:30px 26px;transition:.3s;background:rgba(236,228,207,.03);} section.cream .card{border-color:rgba(18,70,60,.16);background:rgba(18,70,60,.02);}
.card:hover{transform:translateY(-5px);border-color:var(--teal);box-shadow:0 16px 40px rgba(0,0,0,.2);} .card h3{font-family:var(--disp);font-weight:600;font-size:1.28rem;margin-bottom:10px;} .card p{opacity:.9;font-size:1.02rem;}
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 44px;margin-top:30px;}
.mrow{display:flex;align-items:flex-start;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line);} section.cream .mrow{border-color:rgba(18,70,60,.14);}
.mrow > .ico{flex:0 0 auto;display:flex;gap:7px;margin-top:5px;}
.mrow .ico{color:var(--teal);transition:transform .4s,color .4s;}.mrow .ico svg{width:26px;height:26px;display:block;} .mrow:hover > .ico{transform:scale(1.15) rotate(-6deg);}
.mrow .mn{font-family:var(--disp);font-weight:600;font-size:1.08rem;} .mrow .mi{font-style:italic;opacity:1;font-size:.98rem;-webkit-text-stroke:.5px currentColor;text-stroke:.5px currentColor;paint-order:stroke fill;}
.mrow .mb{font-size:1.02rem;opacity:1;line-height:1.55;margin-top:5px;-webkit-text-stroke:.6px currentColor;text-stroke:.6px currentColor;paint-order:stroke fill;}
.lead-name{font-family:var(--disp);font-weight:700;font-size:1.9rem;color:var(--gold-dark);display:flex;align-items:center;gap:12px;} .lead-name .ico svg{width:30px;height:30px;color:var(--gold-dark);}
.rrow{display:flex;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);} section.cream .rrow{border-color:rgba(18,70,60,.14);}
.rrow .rn{font-family:var(--disp);font-weight:700;font-size:2.1rem;color:var(--teal);flex:0 0 54px;line-height:1;} .rrow h3{font-family:var(--disp);font-weight:600;font-size:1.44rem;} .rrow .loc{font-style:italic;opacity:.7;margin-bottom:8px;}
.rep{max-width:820px;margin:34px auto 0;list-style:none;}
.rep li{padding:16px 0 16px 30px;border-bottom:1px solid var(--line);position:relative;font-size:1.1rem;} section.cream .rep li{border-color:rgba(18,70,60,.14);}
.rep li::before{content:"";position:absolute;left:2px;top:24px;width:9px;height:9px;border-radius:50%;background:var(--teal);} .rep b{font-family:var(--disp);font-weight:600;}
.callout{max-width:820px;margin:44px auto 0;border:1px solid var(--teal);border-radius:18px;padding:36px;text-align:center;background:rgba(190,138,60,.12);} .callout .big{font-family:var(--disp);font-weight:600;font-size:1.7rem;color:var(--teal-soft);} section.cream .callout .big{color:var(--gold-dark);} .callout p{margin-top:12px;max-width:620px;margin-inline:auto;}
.cta{text-align:center;margin-top:48px;}
.btn{display:inline-block;font-family:var(--disp);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.86rem;padding:15px 36px;border-radius:40px;background:var(--teal);color:var(--teal-deep);border:0;cursor:pointer;transition:.3s;}
.btn:hover{background:var(--cream);} .btn.ghost{background:transparent;border:1px solid var(--teal);color:var(--teal);} .btn.ghost:hover{background:var(--teal);color:var(--cream);}

/* videos full-screen — lecture en place (iframe injectée au clic) */
.vfull{position:relative;aspect-ratio:16/9;background:var(--teal-deep);display:flex;align-items:flex-end;overflow:hidden;cursor:pointer;}
.vfull .thumb{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
.vfull .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.58));}
.vfull .info{position:relative;z-index:3;padding:0 0 9vh;width:100%;text-align:center;}
.vfull .play{width:92px;height:92px;margin:0 auto 18px;transition:transform .4s;} .vfull:hover .play{transform:scale(1.08);}
.vfull h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,4vw,2.6rem);} .vfull .s{font-style:italic;color:var(--cream2);margin-top:6px;font-size:1.1rem;}
.vfull.playing{cursor:default;} .vfull iframe,.vfull video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:6;background:#000;object-fit:cover;}
.vfull.playing .thumb,.vfull.playing .info{opacity:0;pointer-events:none;}

/* gallery — mosaïque, photos JAMAIS rognées, non cliquables */
.gal{column-count:3;column-gap:12px;margin-top:40px;}
.gal figure{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 12px;border-radius:12px;overflow:hidden;border:1px solid var(--line);}
.gal figure.reveal{transform:none;} /* pas de translate dans un multi-colonnes */
.gal img{width:100%;height:auto;display:block;transition:transform .6s;}
.gal figure:hover img{transform:scale(1.04);}

/* boutique coming soon */
.soon{text-align:center;max-width:620px;margin:0 auto;}
.soon .badge{display:inline-block;font-family:var(--disp);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;border:1px solid var(--line);border-radius:40px;padding:10px 24px;color:var(--cream);}

/* contact — letter + ephemera */
.deskwrap{position:relative;background:var(--teal-bg);padding:130px 0 90px;min-height:100vh;overflow:hidden;}
.letter{position:relative;z-index:5;max-width:640px;margin:0 auto;background:var(--paper);color:#2a2a24;border-radius:6px;box-shadow:0 30px 70px rgba(0,0,0,.34);transform:rotate(-.6deg);}
.letter .sheet{padding:40px 46px 34px;background-image:repeating-linear-gradient(transparent,transparent 37px,rgba(120,90,60,.16) 37px,rgba(120,90,60,.16) 38px);background-position:0 8px;}
.letter::before{content:"";position:absolute;top:0;bottom:0;left:52px;width:1px;background:rgba(180,60,60,.35);}
.letter .lh{display:flex;justify-content:space-between;align-items:flex-start;}
.letter .lh .to{font-family:var(--hand);font-size:1.7rem;color:#2a2a24;}
.letter .lh .from{text-align:right;font-family:var(--disp);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;color:#3a3a30;line-height:1.9;}
.letter .field{margin-top:14px;} .letter label{font-family:var(--hand);font-size:1.25rem;color:#555046;display:block;margin-bottom:0;}
.letter input,.letter select,.letter textarea{width:100%;background:transparent;border:0;border-bottom:1px dashed rgba(42,42,36,.35);font-family:var(--serif);font-size:1.14rem;color:#2a2a24;padding:4px 2px;line-height:38px;}
.letter textarea{min-height:114px;resize:vertical;line-height:38px;} .letter input:focus,.letter select:focus,.letter textarea:focus{outline:none;border-color:var(--teal);}
.letter .sign{display:flex;justify-content:space-between;align-items:flex-end;margin-top:20px;}
.letter .sendbtn{font-family:var(--disp);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;background:var(--teal-deep);color:var(--cream);border:0;border-radius:6px;padding:12px 26px;cursor:pointer;transition:.3s;} .letter .sendbtn:hover{background:var(--teal);}
.ephemera{position:absolute;inset:0;z-index:2;pointer-events:none;}
.eph{position:absolute;color:var(--cream);opacity:0;animation:dfin 1s ease .3s forwards, dfloat 8s ease-in-out infinite;}
.cinfo{position:relative;z-index:5;max-width:640px;margin:34px auto 0;text-align:center;color:var(--cream);}
.cinfo a{color:var(--cream);} .cinfo .row{margin:6px 0;} .social{display:inline-flex;gap:20px;margin-top:10px;} .social a{display:inline-flex;gap:8px;align-items:center;}
.hp{position:absolute;left:-9999px;}

.footer{background:var(--teal-deep);padding:48px 0 40px;text-align:center;border-top:1px solid var(--line);}
.footer img{width:52px;margin:0 auto 14px;} .footer .fb{font-family:var(--disp);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:1rem;}
.footer .fn{opacity:.65;font-style:italic;font-size:.92rem;margin-top:8px;} .footer a{color:var(--teal-soft);}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease;} .reveal.in{opacity:1;transform:none;}
.reveal.left{transform:translateX(-30px);}.reveal.right{transform:translateX(30px);} .reveal.left.in,.reveal.right.in{transform:none;}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition:none!important;}.reveal{opacity:1;transform:none;}.floatdeco,.eph{opacity:.5;}.orchphoto .frame{transform:rotate(-2deg);}}

@media(max-width:860px){
  body{font-size:18px;}
  /* HOME mobile = IDENTIQUE au desktop (même intro verte + même vidéo hero) — demande Marvin « la même version » */
  .phero .grid,.grid2,.cards2,.mgrid{grid-template-columns:1fr;} .orchphoto{margin-top:30px;order:-1;}
  .gal{column-count:2;}
  .letter{transform:none;margin:0 18px;} .letter .sheet{padding:30px 24px;} .floatdeco{transform:scale(.7);}
}