/* Madame Packaging — « le coffret »
   aubergine noire, ivoire du tweed, violet → magenta du logo traité en dorure */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
:root{
  --encre:#130C17;
  --encre-2:#1D1323;
  --encre-3:#2A1D31;
  --ivoire:#F6F1EA;
  --craie:#FBF8F3;
  --lin:#ECE4D9;
  --texte:#241C29;
  --gris:#6F6574;
  --gris-c:#A79DAB;
  --violet:#6B2E92;
  --magenta:#BC3A9C;
  --rose:#E7B8E0;
  --filet:rgba(36,28,41,.14);
  --filet-c:rgba(246,241,234,.16);
  --dore:linear-gradient(100deg,#5E2A8E 0%,#8A36A8 28%,#C24AA6 44%,#F3DDF0 50%,#C24AA6 56%,#8A36A8 72%,#5E2A8E 100%);
  --dore-plat:linear-gradient(100deg,#6B2E92,#A23BA3 55%,#C2459F);
  --serif:"Hedvig Letters Serif",Georgia,serif;
  --sans:"Host Grotesk",system-ui,-apple-system,sans-serif;
  --gout:clamp(16px,4.4vw,56px);
  --entete:64px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--entete) + 8px)}
html,body{overflow-x:clip}
body{margin:0;background:var(--ivoire);color:var(--texte);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
svg{width:1em;height:1em;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:1px solid var(--magenta);outline-offset:3px}
::selection{background:var(--violet);color:#fff}
body.fige{position:fixed;left:0;right:0;overflow:hidden}

/* grain « toucher doux » des fonds sombres */
.sombre{position:relative;background:var(--encre);color:var(--ivoire);isolation:isolate}
.sombre::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.clair{background:var(--ivoire)}
.lin{background:var(--lin)}

/* dorure : reflet qui passe sur le violet du logo */
.dorure{background:var(--dore);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-style:inherit}
.dorure.brille,.sombre .dorure.vu{animation:reflet 2.6s var(--ease-2) .2s both}
@keyframes reflet{from{background-position:100% 0}to{background-position:0 0}}
.sombre .dorure{background-image:linear-gradient(100deg,#A65BD0 0%,#C25BC0 28%,#E77CC8 44%,#FFF1FB 50%,#E77CC8 56%,#C25BC0 72%,#A65BD0 100%)}

.cadre{width:100%;max-width:1360px;margin:0 auto;padding:0 var(--gout)}

/* ---------- bandeau maquette ---------- */
.bandeau-maquette{position:relative;z-index:60;background:#0B070D;color:#B9AEBD;font-size:11px;line-height:1.45;letter-spacing:.02em;text-align:center;padding:7px var(--gout)}

/* ---------- boutons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:52px;padding:0 26px;font:500 14px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;isolation:isolate;transition:color .4s var(--ease),border-color .4s,background-color .4s}
.btn svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-dore{color:#fff;background:var(--dore-plat)}
.btn-dore::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,240,252,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn-dore:hover::after{transform:translateX(120%)}
.btn-ligne{color:var(--ivoire);border:1px solid rgba(246,241,234,.38)}
.btn-ligne:hover{border-color:var(--ivoire);background:rgba(246,241,234,.06)}
.btn-sombre{color:var(--ivoire);background:var(--encre)}
.btn-sombre::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--dore-plat);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.btn-sombre:hover::before{transform:scaleX(1);transform-origin:left}
.btn-ligne-sombre{color:var(--texte);border:1px solid var(--texte)}
.btn-ligne-sombre:hover{background:var(--encre);color:var(--ivoire)}
.btn-petit{min-height:40px;padding:0 16px;font-size:12px}
.btn-large{width:100%}
.lien{display:inline-flex;align-items:center;gap:.5em;font:500 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.lien:hover{background-size:0 1px;background-position:100% 100%}
.lien svg{width:16px;height:16px}
.rond{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--filet);transition:background .3s,color .3s,border-color .3s}
.rond svg{width:20px;height:20px}
.rond:hover{background:var(--encre);color:var(--ivoire);border-color:var(--encre)}
.rond:disabled{opacity:.3;pointer-events:none}

/* ---------- en-tête ---------- */
.entete{position:fixed;left:0;right:0;top:0;z-index:50;height:var(--entete);color:var(--ivoire);transition:background-color .5s var(--ease),color .5s,box-shadow .5s,transform .5s var(--ease)}
.entete-in{height:100%;max-width:1360px;margin:0 auto;padding:0 var(--gout);display:flex;align-items:center;gap:12px}
.marque{position:relative;display:block;width:104px;flex:none;margin-right:auto}
.marque img{width:100%;transition:opacity .5s}
.marque-couleur{position:absolute;inset:0;opacity:0}
.entete.plein{background:rgba(246,241,234,.94);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:var(--texte);box-shadow:0 1px 0 var(--filet)}
.entete.plein .marque-blanc{opacity:0}
.entete.plein .marque-couleur{opacity:1}
.entete.cache{transform:translateY(-100%)}
.nav{display:none}
.burger{width:44px;height:44px;display:grid;place-content:center;gap:7px;margin-right:-10px}
.burger span{display:block;width:24px;height:1.4px;background:currentColor;transition:transform .4s var(--ease)}
.burger span:last-child{width:16px;justify-self:end}
.burger:hover span:last-child{width:24px}

/* menu plein écran */
.menu{position:fixed;inset:0;z-index:70;background:var(--encre);color:var(--ivoire);display:flex;flex-direction:column;overflow-y:auto;opacity:0;transition:opacity .45s var(--ease)}
.menu.ouvert{opacity:1}
.menu-barre{height:var(--entete);flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gout)}
.menu-barre img{width:104px}
.menu-fermer{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px}
.menu-fermer svg{width:26px;height:26px}
.menu-liens{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px var(--gout)}
.menu-liens a{display:flex;align-items:baseline;gap:16px;font:400 clamp(28px,8vw,44px)/1.15 var(--serif);padding:8px 0;border-bottom:1px solid var(--filet-c);transform:translateY(24px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease),color .3s}
.menu-liens a i{font:500 11px/1 var(--sans);letter-spacing:.1em;font-style:normal;color:var(--gris-c);width:22px}
.menu.ouvert .menu-liens a{transform:none;opacity:1}
.menu-liens a:hover{color:var(--rose)}
.menu-pied{padding:20px var(--gout) calc(24px + env(safe-area-inset-bottom));font-size:13px;color:var(--gris-c);display:grid;gap:6px}

/* ---------- hero : le coffret ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;padding-top:calc(var(--entete) + 16px);overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -20% -40% 30%;height:80%;z-index:-1;background:radial-gradient(closest-side,rgba(188,58,156,.22),transparent);pointer-events:none}
.hero-in{flex:1;width:100%;max-width:1360px;margin:0 auto;padding:0 var(--gout);display:grid;gap:36px;align-content:center}
.hero-texte{order:2}
.surtitre{font:500 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gris-c);display:flex;align-items:center;gap:14px}
.surtitre::before{content:"";width:32px;height:1px;background:currentColor}
.surtitre sup{font-size:.7em;letter-spacing:0}
.hero-titre{font:400 clamp(58px,17.5vw,200px)/.86 var(--serif);letter-spacing:-.035em;margin:18px 0 0 -.04em}
.hero-titre .ligne{display:block;overflow:hidden;padding-bottom:.08em}
.hero-titre .ligne>span{display:inline-block}
.hero-titre .ligne+.ligne{margin-top:-.06em;padding-left:.9em}
.hero-chapo{max-width:30em;margin-top:22px;font-size:16px;line-height:1.65;color:#CFC5D2}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-actions .btn{flex:1 1 auto}

.coffret{order:1;position:relative;width:min(78vw,380px);margin:0 auto;perspective:1600px}
.coffret-boite{position:relative;aspect-ratio:4/5;transform-style:preserve-3d}
.coffret-fond{position:absolute;inset:0;overflow:hidden;background:#0d0a0c;box-shadow:inset 0 0 0 1px rgba(231,184,224,.22)}
.coffret-fond img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.12);transition:transform 2.4s var(--ease) .5s}
.couvercle{position:absolute;inset:-6px;transform-origin:50% 0;transform-style:preserve-3d;transition:transform 1.6s var(--ease-2) .35s,opacity .6s 1.5s}
.couvercle-face{position:absolute;inset:0;display:grid;place-items:center;background:
  radial-gradient(120% 80% at 50% 30%,#2b1c33 0%,#170f1b 70%),#170f1b;box-shadow:inset 0 0 0 1px rgba(231,184,224,.28),inset 0 0 0 10px #170f1b,inset 0 0 0 11px rgba(231,184,224,.2);backface-visibility:hidden}
.couvercle-face img{width:58%;opacity:.95}
.couvercle-chant{position:absolute;left:0;right:0;bottom:0;height:14px;transform-origin:50% 100%;transform:rotateX(-90deg);background:linear-gradient(#3a2443,#1a111e)}
.coffret.ouvert .couvercle{transform:rotateX(-104deg) translateZ(2px);opacity:0}
.coffret.ouvert .coffret-fond img{transform:scale(1)}
.coin{position:absolute;width:22px;height:22px;border-color:rgba(231,184,224,.55);border-style:solid;border-width:0;pointer-events:none;transition:inset .9s var(--ease) 1.2s}
.c1{top:-12px;left:-12px;border-top-width:1px;border-left-width:1px}
.c2{top:-12px;right:-12px;border-top-width:1px;border-right-width:1px}
.c3{bottom:-12px;left:-12px;border-bottom-width:1px;border-left-width:1px}
.c4{bottom:-12px;right:-12px;border-bottom-width:1px;border-right-width:1px}
.coffret:not(.ouvert) .c1{top:0;left:0}.coffret:not(.ouvert) .c2{top:0;right:0}.coffret:not(.ouvert) .c3{bottom:0;left:0}.coffret:not(.ouvert) .c4{bottom:0;right:0}

.hero-pied{width:100%;max-width:1360px;margin:0 auto;padding:28px var(--gout) 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-devise{font:italic 400 15px/1.3 var(--sans);color:var(--gris-c)}
.defiler{width:28px;height:44px;border:1px solid var(--filet-c);border-radius:14px;position:relative;flex:none}
.defiler span{position:absolute;left:50%;top:9px;width:2px;height:8px;margin-left:-1px;background:var(--rose);animation:roulette 2s var(--ease) infinite}
@keyframes roulette{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* entrée du hero */
[data-intro]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.hero-titre [data-intro]{transform:translateY(105%);opacity:1}
.pret [data-intro]{opacity:1;transform:none}
.pret [data-intro="1"]{transition-delay:.9s}.pret [data-intro="2"]{transition-delay:1s}.pret [data-intro="3"]{transition-delay:1.12s}.pret [data-intro="4"]{transition-delay:1.35s}.pret [data-intro="5"]{transition-delay:1.5s}

/* ---------- titres de section ---------- */
section{position:relative}
.ouverture,.exclusivites,.accompagnement,.packaging,.evenements,.categories{padding:clamp(80px,12vw,160px) 0}
.tete{margin-bottom:clamp(40px,6vw,72px)}
.tete-ligne{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px}
.tete-centre{text-align:center;display:flex;flex-direction:column;align-items:center}
.index{display:flex;align-items:center;gap:12px;font:500 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin-bottom:22px}
.sombre .index{color:var(--gris-c)}
.index span{font:400 15px/1 var(--serif);letter-spacing:0;color:var(--violet);padding-right:12px;border-right:1px solid currentColor}
.sombre .index span{color:var(--rose)}
.titre-xl{font:400 clamp(44px,10vw,124px)/.95 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.titre-xl em,.titre-l em{font-style:normal;color:var(--violet)}
.sombre .titre-xl em:not(.dorure){color:var(--rose)}
.titre-l{font:400 clamp(34px,6.4vw,76px)/1 var(--serif);letter-spacing:-.025em;max-width:16ch;text-wrap:balance}
.tete-note{max-width:26em;color:var(--gris);font-size:15px}
.sombre .tete-note{color:var(--gris-c)}
.sous-titre{font:400 clamp(18px,2.4vw,24px)/1.4 var(--serif);color:var(--gris-c);margin:22px 0 32px;max-width:30em}

/* révélations */
[data-rv]{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
[data-rv].vu{opacity:1;transform:none}
[data-img]{clip-path:inset(12% 0 12% 0);transition:clip-path 1.6s var(--ease-2)}
[data-img] img{transform:scale(1.18);transition:transform 2.2s var(--ease)}
[data-img].vu{clip-path:inset(0)}
[data-img].vu img{transform:none}

/* coins d'écrin sur les photos */
.coins{position:relative}
.coins::after{content:"";position:absolute;inset:10px;pointer-events:none;opacity:.9;transition:inset .6s var(--ease);
  background:
   linear-gradient(var(--c,#fff),var(--c,#fff)) 0 0/18px 1px no-repeat,
   linear-gradient(var(--c,#fff),var(--c,#fff)) 0 0/1px 18px no-repeat,
   linear-gradient(var(--c,#fff),var(--c,#fff)) 100% 0/18px 1px no-repeat,
   linear-gradient(var(--c,#fff),var(--c,#fff)) 100% 0/1px 18px no-repeat,
   linear-gradient(var(--c,#fff),var(--c,#fff)) 0 100%/18px 1px no-repeat,
   linear-gradient(var(--c,#fff),var(--c,#fff)) 0 100%/1px 18px no-repeat,
   linear-gradient(var(--c,#fff),var(--c,#fff)) 100% 100%/18px 1px no-repeat,
   linear-gradient(var(--c,#fff),var(--c,#fff)) 100% 100%/1px 18px no-repeat}

/* ---------- 01 ouverture ---------- */
.ouverture-grille{display:grid;gap:48px}
.grand-texte{font:400 clamp(22px,3.2vw,36px)/1.25 var(--serif);letter-spacing:-.01em;max-width:24em;margin-bottom:18px}
.ouverture-texte>p:not(.grand-texte){color:var(--gris);font-size:17px;margin-bottom:32px}
.chiffres{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--filet)}
.chiffre{padding:24px 0 0;display:grid;gap:6px}
.chiffre+.chiffre{padding-left:24px;border-left:1px solid var(--filet)}
.chiffre b{font:400 clamp(64px,13vw,150px)/.9 var(--serif);letter-spacing:-.04em;background:var(--dore-plat);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:lining-nums tabular-nums}
.chiffre b sup{font-size:.4em;vertical-align:top;position:relative;top:.2em}
.chiffre>span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

.route{margin-top:clamp(64px,9vw,112px)}
.route-titre{font:500 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin-bottom:28px}
.route-liste{position:relative;display:grid;gap:0;padding-left:28px}
.route-liste::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:repeating-linear-gradient(to bottom,var(--violet) 0 4px,transparent 4px 9px);opacity:.5}
.route-liste::after{content:"";position:absolute;left:3px;top:6px;width:5px;height:22px;background:var(--dore-plat);border-radius:3px;animation:convoi 7s var(--ease-2) infinite}
@keyframes convoi{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:calc(100% - 22px);opacity:0}}
.route-liste li{position:relative;display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--filet)}
.route-liste .pt{position:absolute;left:-28px;top:50%;width:11px;height:11px;margin-top:-5.5px;border:1px solid var(--violet);background:var(--ivoire);transform:rotate(45deg)}
.route-liste b{font:400 clamp(24px,4vw,40px)/1 var(--serif);letter-spacing:-.02em}
.route-liste small{font-size:13px;color:var(--gris);letter-spacing:.08em;text-transform:uppercase}

/* ---------- rendez-vous ---------- */
.rdv{padding:clamp(80px,12vw,160px) 0}
.rdv-grille{display:grid;gap:48px}
.rdv-photo{aspect-ratio:4/3;overflow:hidden;--c:rgba(246,241,234,.7)}
.rdv-photo img{width:100%;height:100%;object-fit:cover;object-position:7% 50%}
.rdv .tete-note{margin-top:20px}
.sujets{display:grid;grid-template-columns:1fr;border-top:1px solid var(--filet-c);counter-reset:s}
.sujets li{counter-increment:s;border-bottom:1px solid var(--filet-c)}
.sujets a{position:relative;display:flex;align-items:center;gap:16px;padding:17px 34px 17px 0;font:400 clamp(19px,2.2vw,24px)/1.2 var(--serif);transition:color .35s,padding .5s var(--ease)}
.sujets a::before{content:counter(s,decimal-leading-zero);font:500 11px/1 var(--sans);letter-spacing:.08em;color:var(--gris-c);width:22px;flex:none}
.sujets a::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:14px;margin-top:-7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg) scale(.8);opacity:.5;transition:transform .5s var(--ease),opacity .3s}
.sujets a:hover{color:var(--rose);padding-left:8px}
.sujets a:hover::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}

/* ---------- 02 exclusivités ---------- */
.rail-boutons{display:flex;gap:8px}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gout);padding:0 var(--gout) 8px;scrollbar-width:none;cursor:grab;outline:0}
.rail::-webkit-scrollbar{display:none}
.rail.tire{cursor:grabbing;scroll-snap-type:none}
.rail.tire *{pointer-events:none}
.exclu{flex:0 0 min(82vw,420px);scroll-snap-align:start;display:flex;flex-direction:column}
.exclu-photo{aspect-ratio:4/5;overflow:hidden;background:var(--craie);--c:var(--violet)}
.exclu-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.exclu:hover .exclu-photo img{transform:scale(1.05)}
.exclu:hover .coins::after{inset:16px}
.exclu-corps{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:20px 0 0;align-items:baseline}
.exclu-n{font:400 15px/1 var(--serif);color:var(--violet)}
.exclu h3{font:400 clamp(22px,2.4vw,28px)/1.15 var(--serif);letter-spacing:-.01em}
.exclu .lien{grid-column:2;justify-self:start;margin-top:10px}
.rail-jauge{height:1px;background:var(--filet);margin-top:36px;position:relative}
.rail-jauge span{position:absolute;left:0;top:-1px;height:3px;width:25%;background:var(--dore-plat);transition:transform .3s linear}

/* ---------- 03 opportunités ---------- */
.opportunites{padding:clamp(80px,12vw,160px) 0;overflow:hidden}
.opportunites .titre-xl{max-width:14ch}
.defile{margin:clamp(56px,8vw,96px) 0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.defile-piste{display:flex;gap:14px;width:max-content;animation:defile 70s linear infinite}
.defile:hover .defile-piste{animation-play-state:paused}
.defile figure{flex:none;height:clamp(200px,30vw,380px);overflow:hidden}
.defile figure:nth-child(even){margin-top:clamp(24px,4vw,56px)}
.defile img{height:100%;width:auto;filter:saturate(.9);transition:filter .6s,transform 1.2s var(--ease)}
.defile figure:hover img{filter:none;transform:scale(1.04)}
@keyframes defile{to{transform:translateX(calc(-50% - 7px))}}
.citation{font:400 clamp(26px,4.4vw,56px)/1.12 var(--serif);letter-spacing:-.02em;max-width:22ch;margin:0 auto;text-align:center;text-wrap:balance}

/* ---------- 04 accompagnement ---------- */
.etapes{display:grid;gap:40px}
.etapes-visuel{display:none}
.etapes-liste{display:grid;gap:56px}
.etape{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start}
.etape-photo{grid-column:1/-1;aspect-ratio:4/3;overflow:hidden;margin-bottom:18px}
.etape-photo img{width:100%;height:100%;object-fit:cover}
.etape-n{font:400 clamp(44px,8vw,64px)/.9 var(--serif);background:var(--dore-plat);-webkit-background-clip:text;background-clip:text;color:transparent;grid-row:span 2}
.etape h3{font:400 clamp(28px,4.2vw,46px)/1.05 var(--serif);letter-spacing:-.02em}
.etape h3 em{display:block;font-style:normal;color:var(--gris)}
.etape ul{grid-column:2;margin-top:16px;border-top:1px solid var(--filet)}
.etape li{padding:12px 0;border-bottom:1px solid var(--filet);font-size:15.5px;display:flex;align-items:center;gap:12px}
.etape li::before{content:"";width:6px;height:6px;flex:none;border:1px solid var(--violet);transform:rotate(45deg)}
.envoi{margin-top:clamp(72px,10vw,140px);font:400 clamp(30px,5.4vw,72px)/1.04 var(--serif);letter-spacing:-.025em;text-align:center;text-wrap:balance}

/* ---------- discutons ---------- */
.discutons{overflow:hidden}
.discutons-in{display:grid}
.discutons-photo{aspect-ratio:1;overflow:hidden}
.discutons-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.discutons-texte{padding:56px var(--gout) 80px;display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.pli{width:120px;height:16px;color:var(--rose);opacity:.7}

/* ---------- 05 packaging ---------- */
.galerie{columns:2;column-gap:10px}
.galerie button{display:block;width:100%;margin:0 0 10px;break-inside:avoid;overflow:hidden;position:relative;background:var(--craie)}
.galerie img{width:100%;transition:transform 1.2s var(--ease)}
.galerie button::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(19,12,23,.55),transparent 45%);opacity:0;transition:opacity .5s}
.galerie button:hover img{transform:scale(1.05)}
.galerie button:hover::after{opacity:1}
.galerie .apparait{animation:apparait .9s var(--ease) both}
@keyframes apparait{from{opacity:0;transform:translateY(24px)}}
.galerie-plus{display:flex;justify-content:center;margin-top:32px}

/* ---------- 06 formations ---------- */
.formations{min-height:min(88vh,820px);display:flex;align-items:flex-end;overflow:hidden}
.formations-fond{position:absolute;inset:-12% 0;z-index:-1}
.formations-fond img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:grayscale(.4) contrast(1.05)}
.formations-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--encre) 8%,rgba(19,12,23,.4) 60%,rgba(19,12,23,.75))}
.formations-in{padding-top:120px;padding-bottom:clamp(64px,9vw,120px)}
.formations-titre{font:400 clamp(52px,15.5vw,236px)/.82 var(--serif);letter-spacing:-.05em;margin:0 0 36px -.05em;background:linear-gradient(180deg,#F6F1EA 30%,rgba(246,241,234,.35));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 07 événements ---------- */
.ev-grille{display:grid;gap:20px}
.ev{position:relative;display:flex;flex-direction:column;background:var(--craie);border:1px solid var(--filet);transition:border-color .4s,transform .6s var(--ease)}
.ev:hover{border-color:var(--violet);transform:translateY(-4px)}
.ev-photo{position:relative;aspect-ratio:1;overflow:hidden}
.ev-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.ev:hover .ev-photo img{transform:scale(1.05)}
.ev-badge{position:absolute;left:14px;top:14px;background:var(--ivoire);color:var(--violet);font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px}
.ev-corps{display:grid;grid-template-columns:72px 1fr;gap:18px;padding:22px 20px 18px;flex:1}
.ev-date{display:grid;align-content:start;border-right:1px solid var(--filet);padding-right:12px}
.ev-date b{font:400 44px/1 var(--serif);color:var(--violet)}
.ev-date span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);line-height:1.35;margin-top:4px}
.ev-date-vide b{color:var(--gris-c)}
.ev h3{font:400 24px/1.12 var(--serif);letter-spacing:-.01em;margin-bottom:8px}
.ev-corps p{font-size:14.5px;color:var(--gris)}
.ev-lien{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--filet);font:500 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;transition:background .4s,color .4s}
.ev-lien::after{content:"";position:absolute;inset:0}
.ev-lien svg{width:18px;height:18px}
.ev:hover .ev-lien{background:var(--encre);color:var(--ivoire)}

.chaine{margin-top:clamp(64px,9vw,112px);display:grid;gap:28px;border-top:1px solid var(--filet);padding-top:clamp(40px,6vw,64px)}
.chaine-visuel{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--encre)}
.chaine-visuel img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:grayscale(.3);transition:opacity .6s,transform 1.4s var(--ease)}
.chaine-visuel:hover img{opacity:.8;transform:scale(1.03)}
.chaine-lecture{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;background:var(--dore-plat);color:#fff;transition:transform .6s var(--ease)}
.chaine-lecture::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(231,184,224,.6);animation:onde 2.4s var(--ease) infinite}
@keyframes onde{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}
.chaine-lecture svg{width:40px;height:40px}
.chaine-visuel:hover .chaine-lecture{transform:scale(1.08)}
.chaine-texte h3{font:400 clamp(34px,5vw,60px)/1 var(--serif);letter-spacing:-.025em}
.chaine-bientot{margin:12px 0 28px;font:italic 400 17px/1.4 var(--sans);color:var(--gris)}
.chaine-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}

/* ---------- 08 catégories ---------- */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cat a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--encre);color:var(--ivoire)}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .6s}
.cat a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(19,12,23,.86) 4%,rgba(19,12,23,.1) 52%,transparent);transition:opacity .5s}
.cat-nom{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;font:400 clamp(17px,2vw,21px)/1.1 var(--serif);letter-spacing:-.005em;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.cat-nom i{font:500 10.5px/1 var(--sans);font-style:normal;letter-spacing:.12em;color:var(--rose);flex:none;padding-bottom:3px}
.cat a:hover img{transform:scale(1.07)}
.cat-plaque{position:absolute;inset:0;display:grid;place-items:center;padding:22%}
.cat-plaque.dore{background:var(--dore-plat)}
.cat-plaque.dore svg{width:56%;height:auto;color:rgba(255,255,255,.9)}
.cat-plaque.noire{background:#000;padding:16%}
.cat-plaque.noire img{height:auto;object-fit:contain}
.cat-plaque.blanche{background:#fff;padding:14%}
.cat-plaque.blanche img{height:auto;object-fit:contain}

/* ---------- 09 contact ---------- */
.contact{padding:clamp(80px,12vw,160px) 0}
.contact-grille{display:grid;gap:56px}
.contact-note{color:var(--gris-c);font-size:14px;margin-top:20px}
.contact-infos{margin:36px 0 0;display:grid;border-top:1px solid var(--filet-c)}
.contact-infos div{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--filet-c)}
.contact-infos dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-c)}
.contact-infos dd{margin:0;font:400 20px/1.3 var(--serif)}
.contact-infos a:hover{color:var(--rose)}
.formulaire{display:grid;gap:28px}
.sujet-choisi{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 16px;border:1px solid rgba(231,184,224,.45);background:rgba(188,58,156,.1);font-size:14.5px;animation:apparait .6s var(--ease)}
.sujet-choisi b{font-weight:500;color:var(--rose)}
.sujet-choisi button{width:32px;height:32px;display:grid;place-items:center;flex:none}
.champs{display:grid;gap:8px 24px}
.champ{position:relative;display:block}
.champ input{width:100%;height:60px;padding:22px 0 6px;background:none;border:0;border-bottom:1px solid var(--filet-c);color:var(--ivoire);font:400 17px/1 var(--sans);border-radius:0;transition:border-color .3s}
.champ input:focus{outline:0;border-color:var(--rose)}
.champ span{position:absolute;left:0;top:22px;font-size:15px;color:var(--gris-c);pointer-events:none;transform-origin:0 0;transition:transform .35s var(--ease),color .3s}
.champ input:focus+span,.champ input:not(:placeholder-shown)+span{transform:translateY(-18px) scale(.78);color:var(--rose)}
.champ::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--dore-plat);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.champ:focus-within::after{transform:scaleX(1)}
.champ.erreur input{border-color:#E06A8E}
.champ.erreur span{color:#F09AB6}
.motifs{border:0;padding:0;margin:0;min-width:0}
.motifs legend{padding:0;margin-bottom:14px;font-size:15px;color:var(--gris-c)}
.motifs-liste{display:grid;gap:8px}
.motif{position:relative;display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--filet-c);cursor:pointer;font-size:14.5px;line-height:1.45;color:#D9D0DC;transition:border-color .3s,background .3s,color .3s}
.motif input{position:absolute;opacity:0;pointer-events:none}
.motif .case{width:16px;height:16px;flex:none;margin-top:2px;border:1px solid var(--gris-c);display:grid;place-items:center;transition:border-color .3s,background .3s}
.motif .case::after{content:"";width:8px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .3s var(--ease)}
.motif:hover{border-color:rgba(246,241,234,.4)}
.motif:has(input:checked){border-color:var(--magenta);background:rgba(188,58,156,.12);color:var(--ivoire)}
.motif input:checked+.case{background:var(--dore-plat);border-color:transparent}
.motif input:checked+.case::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.motif input:focus-visible+.case{outline:1px solid var(--rose);outline-offset:3px}
.form-erreur{color:#F09AB6;font-size:14px}

.envoi-pret{position:fixed;inset:0;z-index:80;display:grid;place-items:end center;background:rgba(10,6,12,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fondu .4s var(--ease)}
@keyframes fondu{from{opacity:0}}
.envoi-boite{position:relative;width:100%;max-width:560px;max-height:92svh;overflow:auto;background:var(--ivoire);color:var(--texte);padding:32px var(--gout) calc(28px + env(safe-area-inset-bottom));animation:monte .6s var(--ease)}
@keyframes monte{from{transform:translateY(40px);opacity:0}}
.envoi-boite .index span{color:var(--violet)}
.envoi-boite h3{font:400 30px/1.1 var(--serif);letter-spacing:-.015em;padding-right:40px}
.envoi-recap{margin:20px 0 24px;padding:16px;background:var(--lin);font:400 13px/1.55 var(--sans);white-space:pre-wrap;max-height:34svh;overflow:auto}
.envoi-actions{display:grid;gap:10px}
.envoi-actions .btn-ligne{color:var(--texte);border-color:var(--texte)}
.envoi-fermer{position:absolute;right:12px;top:12px;width:44px;height:44px;display:grid;place-items:center}
.envoi-fermer svg{width:22px;height:22px}

/* ---------- pied ---------- */
.pied{padding:clamp(72px,10vw,120px) 0 28px}
.pied-haut{display:grid;gap:20px;padding-bottom:48px;border-bottom:1px solid var(--filet-c)}
.pied-logo{width:150px}
.pied-devise{font:400 clamp(30px,5.6vw,72px)/1 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.pied-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px 24px;padding:48px 0}
.pied-cols>*{display:flex;flex-direction:column;align-items:flex-start;gap:9px;font-size:14.5px;color:#D3C9D6}
.pied-cols h4{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gris-c);margin-bottom:8px}
.pied-cols a{transition:color .3s}
.pied-cols a:hover{color:var(--rose)}
.pied-cols>div:nth-child(2){grid-column:1/-1}
.pied-libelle{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-c);margin-top:8px}
.pied-bas{display:flex;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--filet-c);font-size:12.5px;color:var(--gris-c)}

/* ---------- visionneuse ---------- */
.visionneuse{position:fixed;inset:0;z-index:90;background:rgba(12,7,14,.96);display:grid;grid-template-columns:1fr;place-items:center;animation:fondu .35s var(--ease)}
.vis-cadre{max-width:min(92vw,1100px);display:grid;gap:14px;justify-items:center}
.vis-cadre img{max-height:78svh;width:auto;max-width:100%;animation:apparait .5s var(--ease)}
.vis-cadre figcaption{color:var(--gris-c);font-size:13px;letter-spacing:.1em}
.vis-fermer{position:absolute;right:10px;top:10px;width:48px;height:48px;display:grid;place-items:center;color:var(--ivoire);z-index:2}
.vis-fermer svg{width:26px;height:26px}
.vis-nav{position:absolute;bottom:18px;width:52px;height:52px;display:grid;place-items:center;color:var(--ivoire);border:1px solid var(--filet-c)}
.vis-nav svg{width:22px;height:22px}
.vis-prec{left:calc(50% - 60px)}.vis-suiv{right:calc(50% - 60px)}

/* =================== tablette =================== */
@media (min-width:700px){
  :root{--entete:76px}
  .marque,.menu-barre img{width:124px}
  .hero-actions .btn{flex:0 0 auto}
  .champs{grid-template-columns:1fr 1fr}
  .sujets{grid-template-columns:1fr 1fr;column-gap:48px}
  .cats{grid-template-columns:repeat(3,1fr);gap:14px}
  .ev-grille{grid-template-columns:repeat(2,1fr)}
  .galerie{columns:3;column-gap:14px}
  .galerie button{margin-bottom:14px}
  .pied-cols{grid-template-columns:repeat(4,1fr)}
  .pied-cols>div:nth-child(2){grid-column:auto}
  .envoi-pret{place-items:center}
  .envoi-boite{padding:40px}
  .chaine{grid-template-columns:1.3fr 1fr;align-items:center;gap:48px}
  .discutons-in{grid-template-columns:1fr 1fr;align-items:center}
  .discutons-photo{aspect-ratio:auto;height:100%;min-height:560px}
  .discutons-texte{padding:80px var(--gout)}
  .vis-nav{top:50%;bottom:auto;margin-top:-26px}.vis-prec{left:20px}.vis-suiv{right:20px}
}

/* =================== bureau =================== */
@media (min-width:1080px){
  .burger{display:none}
  .nav{display:flex;gap:30px;margin-right:28px;font:500 13px/1 var(--sans);letter-spacing:.04em}
  .nav a{position:relative;padding:8px 0}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
  .nav a:hover::after,.nav a.actif::after{transform:scaleX(1);transform-origin:left}
  .marque{width:134px}

  .hero-in{grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}
  .hero-texte{order:0}
  .coffret{width:100%;max-width:470px;margin:0 0 0 auto}
  .hero-titre .ligne+.ligne{padding-left:1.1em}

  .ouverture-grille{grid-template-columns:1.2fr 1fr;gap:96px;align-items:end}
  .route-liste{display:flex;padding:28px 0 0;border-top:0}
  .route-liste::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;background:repeating-linear-gradient(to right,var(--violet) 0 4px,transparent 4px 9px)}
  .route-liste::after{top:-2px;left:0;width:26px;height:5px;animation-name:convoi-h}
  @keyframes convoi-h{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 26px);opacity:0}}
  .route-liste li{flex:1;flex-direction:column;gap:8px;padding:28px 12px 0 0;border:0}
  .route-liste .pt{left:0;top:-5.5px;margin:0}
  .route-liste b{font-size:clamp(22px,2.3vw,32px)}

  .rdv-grille{grid-template-columns:5fr 7fr;gap:80px;align-items:start}
  .rdv-photo{aspect-ratio:4/5;position:sticky;top:calc(var(--entete) + 32px)}
  .rdv-photo img{object-position:6% 50%}
  .sujets{column-gap:40px}

  .exclu{flex-basis:calc((min(100vw,1360px) - 2*var(--gout) - 32px)/3)}
  .rail{padding-left:max(var(--gout),calc((100vw - 1360px)/2 + var(--gout)));scroll-padding-left:max(var(--gout),calc((100vw - 1360px)/2 + var(--gout)))}

  .etapes{grid-template-columns:1fr 1fr;gap:96px;align-items:start}
  .etapes-visuel{display:block;position:sticky;top:calc(var(--entete) + 32px)}
  .etapes-cadre{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--lin);--c:#fff}
  .etapes-cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);clip-path:inset(0 0 100% 0);transition:opacity .9s var(--ease),transform 1.6s var(--ease),clip-path 1.2s var(--ease-2)}
  .etapes-cadre img.actif{opacity:1;transform:none;clip-path:inset(0)}
  .etapes-cadre::after{z-index:2}
  .etapes-compteur{display:flex;align-items:baseline;gap:8px;margin-top:20px;font:400 18px/1 var(--serif);color:var(--gris)}
  .etapes-compteur b{font:400 56px/1 var(--serif);font-weight:400;background:var(--dore-plat);-webkit-background-clip:text;background-clip:text;color:transparent}
  .etapes-jauge{height:1px;background:var(--filet);margin-top:14px;position:relative}
  .etapes-jauge span{position:absolute;left:0;top:-1px;height:3px;width:25%;background:var(--dore-plat);transition:width .8s var(--ease)}
  .etapes-liste{gap:0;padding:8vh 0 10vh}
  .etape{min-height:62vh;align-content:center;opacity:.28;transition:opacity .8s var(--ease)}
  .etape.actif{opacity:1}
  .etape-photo{display:none}

  .galerie{columns:4;column-gap:16px}
  .galerie button{margin-bottom:16px}

  .ev-grille{grid-template-columns:repeat(3,1fr);gap:24px}
  .cats{grid-template-columns:repeat(6,1fr);gap:12px}
  .cat a{aspect-ratio:3/4}

  .contact-grille{grid-template-columns:.9fr 1.1fr;gap:96px;align-items:start}
  .contact-intro{position:sticky;top:calc(var(--entete) + 40px)}
  .motifs-liste{grid-template-columns:1fr 1fr}
  .pied-haut{grid-template-columns:auto 1fr;align-items:end;gap:64px}
  .pied-devise{text-align:right}
}

@media (min-width:1400px){
  .hero-titre{font-size:clamp(150px,13vw,220px)}
}

/* =================== mouvement réduit =================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  [data-rv],[data-intro],.hero-titre [data-intro]{opacity:1;transform:none}
  [data-img]{clip-path:none}[data-img] img{transform:none}
  .couvercle{display:none}
  .coffret-fond img{transform:none}
  .defile-piste{animation:none;flex-wrap:nowrap}
  .defile{overflow-x:auto}
  .dorure{background-position:50% 0}
}
