@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&display=swap');
:root{
  --cream:#ECE4CF; --cream2:#D6C9AA; --paper:#F4EEDC;
  --teal:#1E9E8C; --teal-bg:#1B8173; --teal-deep:#123F39; --teal-soft:#8FD8C1; --ink:#123833; --line:rgba(236,228,207,.32);
  --terra:#C06A3C; --gold:#D3A53E; --sage:#8FA05A;
  --disp:'Josefin Sans',sans-serif; --serif:'Cormorant Garamond',Georgia,serif; --hand:'Caveat',cursive;
  --logo:'Iceberg',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:20px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
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(18,63,57,.85),rgba(18,63,57,0));}
.nav.scrolled{background:rgba(18,63,57,.94);backdrop-filter:blur(8px);padding:10px 26px;box-shadow:0 1px 0 var(--line);}
.nav .brand{pointer-events:auto;display:inline-flex;}
.nav .brand img{width:48px;transition:transform .5s;display:block;}
.nav .brand:hover img{transform:rotate(-8deg) scale(1.08);}
.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:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1.6rem,5vw,3rem);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,.center .logo-lockup{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;}
.center{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;pointer-events:none;}
.center .emblem{width:clamp(110px,13vw,166px);opacity:0;transform:translateY(14px) scale(.96);animation:rise 1.2s cubic-bezier(.2,.7,.2,1) .3s forwards;filter:drop-shadow(0 3px 14px rgba(0,0,0,.4));}
.center .wordmark{width:clamp(280px,42vw,560px);margin-top:16px;opacity:0;animation:rise 1.2s ease .6s forwards;filter:drop-shadow(0 3px 14px rgba(0,0,0,.35));}
.center .tagline{margin-top:14px;font-family:var(--disp);font-weight:600;letter-spacing:.4em;text-transform:uppercase;font-size:clamp(.6rem,1.5vw,.84rem);color:var(--cream);opacity:0;animation:rise 1.2s ease .95s forwards;text-shadow:0 1px 8px rgba(0,0,0,.5);}
@keyframes rise{to{opacity:1;transform: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(18,63,57,.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(18,63,57,.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(18,63,57,.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{color:var(--teal);}
.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;}
.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,56,51,.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,56,51,.16);background:rgba(18,56,51,.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,56,51,.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.06rem;} .mrow .mi{font-style:italic;opacity:.72;font-size:.96rem;}
.mrow .mb{font-size:.95rem;opacity:.78;line-height:1.4;margin-top:5px;}
.lead-name{font-family:var(--disp);font-weight:700;font-size:1.9rem;color:var(--teal);display:flex;align-items:center;gap:12px;} .lead-name .ico svg{width:30px;height:30px;color:var(--teal);}
.rrow{display:flex;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);} section.cream .rrow{border-color:rgba(18,56,51,.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,56,51,.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(30,158,140,.08);} .callout .big{font-family:var(--disp);font-weight:600;font-size:1.7rem;color:var(--teal-soft);} section.cream .callout .big{color:var(--teal);} .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;height:100vh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;cursor:pointer;}
.vfull .thumb{position:absolute;inset:0;background-size:cover;background-position:center;}
.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{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:6;background:#000;}
.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(30,120,110,.16) 37px,rgba(30,120,110,.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 = photo orchestre NON coupée, plein écran (fond = la même photo floutée) + menu */
  .home{position:relative;min-height:100svh;height:auto;display:flex;flex-direction:column;background:var(--teal-bg);overflow:hidden;}
  .home video,.home .vig,.home .grain,.home .dots,.bubbles,.sound{display:none!important;}
  .home-bg{display:block;position:absolute;inset:-8%;z-index:0;background-size:cover;background-position:center;filter:blur(26px) brightness(.5) saturate(.85);}
  .center{position:relative;z-index:2;inset:auto;padding:8vh 20px 1vh;flex:0 0 auto;order:1;}
  .center .emblem,.center .wordmark{display:none;}
  .center .logo-lockup{display:block;width:min(178px,52vw);height:auto;margin:0 auto;filter:drop-shadow(0 3px 14px rgba(0,0,0,.5));}
  .center .tagline{margin-top:12px;}
  .home-photo{display:block;position:relative;z-index:2;order:2;flex:1 1 auto;min-height:0;width:100%;object-fit:contain;object-position:center;padding:8px 0 5vh;}
  .phero .grid,.grid2,.cards2,.mgrid{grid-template-columns:1fr;} .orchphoto{margin-top:30px;order:-1;}
  .gal{column-count:2;} .vfull{height:70vh;}
  .letter{transform:none;margin:0 18px;} .letter .sheet{padding:30px 24px;} .floatdeco{transform:scale(.7);}
}