/* Une Soirée avec Rose — boudoir de velours sombre, colonne étroite façon carton d'invitation,
   accents or et rose poudré. Les effets ne s'appliquent qu'avec la classe .js (posée par site.js). */

@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/bodoni-moda.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(/fonts/bodoni-moda-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/jost.woff2) format("woff2")}
@font-face{font-family:"Pinyon Script";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pinyon-script.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --velvet:#160810;
  --velvet-2:#22101a;
  --wine:#5a1428;
  --blush:#e9b7b9;
  --gold:#c9a46a;
  --ink:#f4e7e3;
  --muted:#b89ca2;
  --line:rgba(201,164,106,.28);
  --veil:rgba(22,8,16,.72);
  --f-display:"Bodoni Moda","Didot","Times New Roman",serif;
  --f-body:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-script:"Pinyon Script","Snell Roundhand",cursive;
  --s-xs:.78rem; --s-sm:.9rem; --s-md:1.05rem; --s-lg:1.35rem; --s-xl:clamp(1.8rem,5vw,2.6rem); --s-2xl:clamp(2.4rem,8vw,4.6rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--velvet);color:var(--ink);font-family:var(--f-body);font-weight:300;font-size:var(--s-md);line-height:1.65;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(90,20,40,.55), transparent 60%),
    radial-gradient(900px 700px at -10% 40%, rgba(90,20,40,.35), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  /* Bodoni Moda « renforcée » : taille optique figée sur sa version petits textes, quelle que soit la taille
     affichée. Les traits fins restent lisibles dans les grands titres. Sans effet sur Jost et Pinyon Script. */
  font-optical-sizing:none;
  font-variation-settings:"opsz" 18;
}
img{max-width:100%}
a{color:inherit}
figure{margin:0}
::selection{background:rgba(201,164,106,.35);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.narrow{max-width:720px}
.skip{position:absolute;left:-9999px;top:12px;z-index:30;background:var(--gold);color:var(--velvet);padding:10px 16px;text-decoration:none}
.skip:focus{left:16px}

/* ——— En-tête ——— */
header.top{position:sticky;top:0;z-index:9;background:var(--veil);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:background .5s,box-shadow .5s}
header.top.is-scrolled{background:rgba(22,8,16,.88);box-shadow:0 18px 40px -30px #000}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;padding-top:max(12px,env(safe-area-inset-top,0px))}
.mono{font-family:var(--f-script);font-size:1.9rem;line-height:1;color:var(--blush);text-decoration:none}
.top nav{display:flex;gap:22px;align-items:center;font-size:var(--s-xs);letter-spacing:.18em;text-transform:uppercase}
.top nav a:not(.btn){position:relative;text-decoration:none;color:var(--muted);transition:color .3s}
.top nav a:not(.btn)::after{content:"";position:absolute;left:0;right:.18em;bottom:-6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.top nav a:not(.btn):hover,.top nav a.is-active{color:var(--ink)}
.top nav a.is-active::after{transform:none;transform-origin:left}
@media (max-width:640px){.top nav .hide-sm{display:none}}
header.top .mono{white-space:nowrap}
@media (max-width:380px){header.top .mono{font-size:1.55rem}}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--wine),var(--gold) 55%,var(--blush));transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px rgba(201,164,106,.6)}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-body);font-size:var(--s-xs);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:14px 26px;border:1px solid var(--gold);color:var(--velvet);background:var(--gold);cursor:pointer;transition:background .35s,color .35s}
.btn:hover{background:transparent;color:var(--gold)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:var(--velvet)}
.btn.sm{padding:9px 16px}
/* Reflet doré qui traverse les boutons pleins au survol */
.btn:not(.ghost)::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:not(.ghost):hover::before{animation:sheen .9s var(--ease)}
@keyframes sheen{to{left:130%}}

/* ——— Hero ——— */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .lace{position:absolute;inset:0;opacity:.08;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23e9b7b9' stroke-width='.8'%3E%3Ccircle cx='24' cy='24' r='10'/%3E%3Ccircle cx='0' cy='0' r='10'/%3E%3Ccircle cx='48' cy='0' r='10'/%3E%3Ccircle cx='0' cy='48' r='10'/%3E%3Ccircle cx='48' cy='48' r='10'/%3E%3Ccircle cx='24' cy='24' r='3'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%);mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.hero > .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-block:72px 88px}
@media (max-width:820px){.hero > .wrap{grid-template-columns:1fr;gap:36px;padding-block:48px 56px}}
.eyebrow{font-size:var(--s-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
h1{font-family:var(--f-display);font-weight:400;font-size:var(--s-2xl);line-height:1.04;letter-spacing:-.01em;margin:0 0 22px;text-wrap:balance}
h1 em{font-style:italic;color:var(--blush)}
h1 .w{display:inline-block}
.lede{font-size:var(--s-lg);font-weight:300;color:var(--muted);max-width:34ch;margin:0 0 32px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-photo{position:relative;max-width:100%}
.hero-photo .ph{aspect-ratio:3/4}
.hero-photo .tag{position:absolute;left:-14px;bottom:28px;z-index:2;background:var(--velvet);border:1px solid var(--line);padding:12px 16px;font-family:var(--f-display);font-weight:500;font-style:italic;font-size:var(--s-md)}
@media (max-width:820px){.hero-photo{max-width:420px}.hero-photo .tag{left:12px}}
.scroll-cue{position:absolute;left:50%;bottom:0;width:1px;height:60px;overflow:hidden;background:var(--line)}
.scroll-cue span{position:absolute;left:0;top:0;width:1px;height:45%;background:linear-gradient(transparent,var(--gold));animation:cue 2.6s var(--ease) infinite}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(240%)}}
@media (max-width:820px){.scroll-cue{display:none}}

/* ——— Cadres photo : vraie <img>, ou à défaut un placeholder qui imite une photo floutée ——— */
.ph{position:relative;width:100%;max-width:100%;overflow:hidden;background:var(--velvet-2);border:1px solid var(--line)}
.ph::before{content:"";position:absolute;inset:-20%;filter:blur(28px);scale:1.05;translate:0 var(--py,0px);
  background:
    radial-gradient(28% 22% at var(--x1,50%) var(--y1,28%), #e7b9a4 0%, transparent 70%),
    radial-gradient(34% 42% at var(--x2,48%) var(--y2,62%), #d9a08f 0%, transparent 72%),
    radial-gradient(40% 30% at var(--x3,30%) var(--y3,80%), #2a0c16 0%, transparent 70%),
    radial-gradient(50% 50% at var(--x4,80%) var(--y4,20%), #7a1f36 0%, transparent 70%),
    linear-gradient(160deg,#3a1222,#160810)}
.ph::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(22,8,16,.65),transparent 45%);pointer-events:none}
.ph span{position:absolute;z-index:2;left:14px;bottom:12px;right:14px;font-size:var(--s-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.8}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;scale:1.1;translate:0 var(--py,0px)}
/* Avec une vraie image, le flou de remplacement devient un fin cadre doré intérieur */
.ph:has(> img)::before{inset:9px;z-index:2;background:none;filter:none;scale:1;translate:none;border:1px solid rgba(201,164,106,.4);pointer-events:none}
.ph:has(> img) span{left:20px;bottom:18px;right:20px}
.ph img.keep-top{object-position:50% 25%}
.ph--portrait{aspect-ratio:4/5}

/* ——— Sections ——— */
.sec{padding-block:88px}
.sec--line{border-top:1px solid var(--line)}
@media (max-width:640px){.sec{padding-block:64px}}
.sec-head{display:grid;gap:10px;margin-bottom:44px}
h2{font-family:var(--f-display);font-weight:400;font-size:var(--s-xl);line-height:1.1;margin:0;text-wrap:balance}
h2 em{color:var(--blush)}
.sec-head p{color:var(--muted);margin:0;max-width:60ch}
.sec-head p.wide{max-width:none}
.rule{display:flex;align-items:center;gap:14px;color:var(--gold);font-size:var(--s-xs);letter-spacing:.28em;text-transform:uppercase}
.rule::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px;transform-origin:left}

/* ——— Ambiance : illustrations en grille 2 × 2 (non cliquables) ——— */
.ambiance{margin:0 0 72px}
.ambiance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ambiance .ph{aspect-ratio:3/2}
.ambiance .ph:nth-child(even){--d:.15s}
.ambiance .ph::after{background:radial-gradient(130% 120% at 50% 45%,transparent 55%,rgba(22,8,16,.6))}
/* Lente dérive, comme une caméra qui flâne dans la pièce */
.ambiance .ph img{scale:1.02;animation:drift 26s ease-in-out infinite alternate}
.ambiance .ph:nth-child(even) img{animation-duration:31s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:none}to{transform:scale(1.05) translate(-1%,-1%)}}
.ambiance-note{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:18px;font-family:var(--f-display);font-weight:500;font-style:italic;font-size:var(--s-sm);color:var(--muted)}
.ambiance-note::before{content:"";width:48px;height:1px;background:var(--line)}
@media (max-width:820px){
  .ambiance{margin-bottom:56px}
  .ambiance-grid{grid-template-columns:1fr;gap:10px}
  .ambiance .ph:nth-child(n){--d:0s}
}

/* ——— Carton d'invitation ——— */
.card{position:relative;border:1px solid var(--line);padding:clamp(24px,5vw,56px);background:linear-gradient(180deg,rgba(90,20,40,.18),rgba(22,8,16,.2))}
.card::before,.card::after{content:"";position:absolute;inset:8px;pointer-events:none}
.card::before{border-block:1px solid var(--line)}
.card::after{border-inline:1px solid var(--line)}
.card .script{font-family:var(--f-script);font-size:clamp(2.2rem,6vw,3rem);color:var(--blush);text-align:center;margin:0 0 6px;line-height:1.2}
.card .sub{text-align:center;color:var(--muted);font-size:var(--s-sm);letter-spacing:.2em;text-transform:uppercase;margin:0 0 36px}
dl.menu{margin:0;display:grid;gap:0}
dl.menu > div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding-block:18px;border-top:1px solid var(--line)}
dl.menu > div:first-child{border-top:0}
@media (max-width:560px){dl.menu > div{grid-template-columns:1fr;gap:4px}}
dl.menu dt{font-size:var(--s-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);padding-top:4px}
dl.menu dd{margin:0;font-family:var(--f-display);font-weight:500;font-size:var(--s-lg);line-height:1.4;min-width:0}
dl.menu dd em{color:var(--blush)}
dl.menu dd small{display:block;font-family:var(--f-body);font-size:var(--s-sm);color:var(--muted);margin-top:4px}

/* ——— Rose ——— */
.rose{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
@media (max-width:820px){.rose{grid-template-columns:1fr;gap:36px}}
.rose .name{font-family:var(--f-script);font-size:clamp(4rem,14vw,7rem);line-height:.9;color:var(--blush);margin:0;padding-block:.08em}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin:24px 0 28px;padding:18px 0;border-block:1px solid var(--line)}
.stat b{display:block;font-family:var(--f-display);font-weight:500;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.stat small{font-size:var(--s-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.likes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
@media (max-width:480px){.likes{grid-template-columns:1fr}}
.likes h3{font-size:var(--s-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500;margin:0 0 10px}
.likes ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;color:var(--muted)}
.likes li{display:flex;gap:10px}
.likes li::before{content:"·";color:var(--blush)}

/* ——— Galerie : six photos en portrait, toutes au même format ——— */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:56px}
.gallery .ph{aspect-ratio:3/4;transition:transform .6s var(--ease)}
.gallery .ph:hover,.js .gallery .ph.is-in:hover{transform:scale(1.015)}
.gallery .ph:nth-child(3n+2){--d:.12s}
.gallery .ph:nth-child(3n){--d:.24s}
@media (max-width:560px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gallery .ph:nth-child(n){--d:0s}
  .gallery .ph:nth-child(even){--d:.12s}
}

/* ——— Nous ——— */
.us{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:820px){.us{grid-template-columns:1fr;gap:32px}}
.us h2{margin:14px 0 22px}
.us p{margin:0 0 16px;max-width:58ch}
.us blockquote{position:relative;margin:0;font-family:var(--f-display);font-weight:500;font-style:italic;font-size:clamp(1.4rem,3.6vw,1.9rem);line-height:1.35;color:var(--blush);padding-left:24px;text-wrap:balance}
.us blockquote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gold);transform-origin:top}
.record{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
@media (max-width:480px){.record{grid-template-columns:1fr}}
.record div{border:1px solid var(--line);padding:18px 16px}
.record b{display:block;font-family:var(--f-display);font-weight:500;font-size:2.4rem;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.record small{display:block;margin-top:8px;color:var(--muted);font-size:var(--s-sm);line-height:1.4}

/* ——— Conditions ——— */
/* Le quadrillage est porté par les cases (et non par le fond de la grille) pour apparaître avec elles */
.conds{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (max-width:720px){.conds{grid-template-columns:1fr}}
.cond{position:relative;isolation:isolate;background:var(--velvet);padding:28px 26px;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Halo qui suit le pointeur (souris uniquement) */
.cond::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(201,164,106,.13),transparent 65%);opacity:0;transition:opacity .5s}
.cond:hover::before{opacity:1}
.cond h3{font-family:var(--f-display);font-weight:500;font-size:var(--s-lg);margin:0 0 8px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cond p{margin:0;color:var(--muted);font-size:var(--s-sm)}
.cond.key{grid-column:1/-1;background:linear-gradient(120deg,rgba(90,20,40,.45),var(--velvet))}
.pill{font-family:var(--f-body);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--gold);color:var(--gold);padding:3px 9px}
.pill.soft{border-color:var(--muted);color:var(--muted)}

/* ——— Étapes ——— */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:s}
.steps li{position:relative;counter-increment:s;padding-top:14px}
.steps li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold);transform-origin:left}
.steps li::before{content:counter(s,upper-roman);font-family:var(--f-display);font-weight:500;font-style:italic;color:var(--gold);font-size:1.4rem;display:block;margin-bottom:6px}
.steps b{display:block;font-weight:500;font-size:var(--s-sm);letter-spacing:.06em}
.steps small{color:var(--muted);font-size:var(--s-sm);line-height:1.45;display:block}
@media (max-width:820px){
  .steps{grid-template-columns:1fr;gap:0}
  .steps li{display:grid;grid-template-columns:48px 1fr;padding-block:14px}
  .steps li::after{background:var(--line)}
}

/* ——— Participation ——— */
.cond a{color:var(--gold);text-underline-offset:3px;white-space:nowrap}
.budget{display:grid;grid-template-columns:1fr 1fr;gap:36px 56px;align-items:start}
@media (max-width:820px){.budget{grid-template-columns:1fr}}
.budget h3,.hotels h3{font-size:var(--s-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500;margin:0 0 16px}
/* L'addition : lignes à points de conduite, comme sur une note d'hôtel */
.bill{position:relative;border:1px solid var(--line);padding:clamp(22px,4vw,36px);background:linear-gradient(180deg,rgba(90,20,40,.18),rgba(22,8,16,.2))}
.bill::before{content:"";position:absolute;inset:8px;border:1px solid var(--line);pointer-events:none}
.bill dl{margin:0}
.bill dl > div{display:flex;align-items:baseline;gap:12px;padding-block:9px}
.bill dt{flex:1;display:flex;align-items:baseline;gap:12px;color:var(--muted);min-width:0}
.bill dt::after{content:"";flex:1;min-width:24px;border-bottom:1px dotted rgba(201,164,106,.45)}
.bill dd{margin:0;font-family:var(--f-display);font-weight:500;font-size:var(--s-lg);white-space:nowrap;font-variant-numeric:tabular-nums}
.bill .total{border-top:1px solid var(--gold);margin-top:10px;padding-top:18px}
.bill .total dt{color:var(--ink)}
.bill .share dt{color:var(--gold)}
.bill .share dd{font-size:2rem;color:var(--gold)}
.payments ol{list-style:none;margin:0;padding:0}
.payments li{display:grid;grid-template-columns:8.5rem 1fr;gap:18px;padding-block:18px;border-top:1px solid var(--line)}
.payments li:first-child{border-top:0;padding-top:2px}
.payments li > b{font-family:var(--f-display);font-weight:500;font-size:1.8rem;line-height:1.1;color:var(--gold);white-space:nowrap}
.payments strong{display:block;font-weight:500;color:var(--ink);margin-bottom:2px}
.payments p{margin:0;color:var(--muted);font-size:var(--s-sm)}
@media (max-width:480px){.payments li{grid-template-columns:1fr;gap:6px}}
.principle{margin:48px 0 0;padding:26px clamp(20px,4vw,32px);border:1px solid var(--line);border-left:2px solid var(--gold);background:linear-gradient(120deg,rgba(90,20,40,.45),transparent);font-family:var(--f-display);font-weight:500;font-style:italic;font-size:var(--s-lg);line-height:1.5;text-wrap:pretty}
.hotels{margin-top:48px;text-align:center}
.hotels ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0}
.hotels li{font-family:var(--f-display);font-weight:500;font-style:italic;font-size:var(--s-lg);color:var(--blush)}
.hotels li + li::before{content:"·";display:inline-block;margin:0 18px;color:var(--gold);font-style:normal}

/* ——— Formulaire ——— */
form{display:grid;gap:28px}
.honesty{padding:22px clamp(20px,4vw,28px);border:1px solid var(--line);border-left:2px solid var(--gold);background:linear-gradient(120deg,rgba(90,20,40,.4),transparent);margin-bottom:8px}
.honesty p{margin:0;color:var(--muted);font-size:var(--s-sm)}
.honesty .honesty-title{font-family:var(--f-display);font-weight:500;font-style:italic;font-size:var(--s-lg);line-height:1.3;color:var(--blush);margin-bottom:8px}
fieldset{border:0;margin:0;padding:0;display:grid;gap:18px;min-width:0}
legend{font-family:var(--f-display);font-weight:500;font-style:italic;font-size:var(--s-lg);color:var(--blush);padding:0;margin-bottom:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.row.three{grid-template-columns:1fr 1fr 1fr}
@media (max-width:560px){.row,.row.three{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0;align-content:start}
label,.lbl{font-size:var(--s-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lbl.question{font-size:var(--s-md);letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:4px}
input[type=text],input[type=email],input[type=number],textarea,select{
  width:100%;min-width:0;font:inherit;font-size:16px;color:var(--ink);border:0;border-bottom:1px solid var(--line);padding:10px 2px;border-radius:0;
  background-color:rgba(244,231,227,.04);
  background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-position:50% 100%;background-size:0% 1px;
  transition:background-size .6s var(--ease-out),background-color .3s,border-color .3s}
input:focus,textarea:focus,select:focus{outline:none;background-color:rgba(244,231,227,.07);background-size:100% 1px}
input::placeholder,textarea::placeholder{color:rgba(184,156,162,.55)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a46a' stroke-width='1.2'/%3E%3C/svg%3E"),linear-gradient(var(--gold),var(--gold));
  background-position:right 6px center,50% 100%;background-size:12px 8px,0% 1px}
select:focus{background-size:12px 8px,100% 1px}
select option{background:var(--velvet-2);color:var(--ink)}
textarea{min-height:110px;resize:vertical;line-height:1.5}
[aria-invalid="true"]{border-bottom-color:var(--blush)!important;background-color:rgba(233,183,185,.08)!important}
.field-err{display:block;color:var(--blush);font-size:var(--s-sm);animation:rise .4s var(--ease-out) both}
.unit{display:flex;align-items:center;gap:8px}
.unit span{color:var(--muted);font-size:var(--s-sm);white-space:nowrap}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{position:relative;text-transform:none;letter-spacing:0}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice span{display:inline-block;border:1px solid var(--line);padding:10px 16px;font-size:var(--s-sm);color:var(--muted);transition:border-color .3s,color .3s,background .3s}
.choice:hover span{border-color:var(--gold);color:var(--ink)}
.choice input:checked + span{border-color:var(--gold);color:var(--velvet);background:var(--gold);animation:pop .35s var(--ease-out)}
.choice input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px}
@keyframes pop{40%{transform:scale(1.06)}}
.check{display:flex;gap:12px;align-items:flex-start;font-size:var(--s-sm);color:var(--muted);text-transform:none;letter-spacing:0;line-height:1.5;cursor:pointer}
.check input{margin-top:4px;accent-color:var(--gold);width:18px;height:18px;flex:none;cursor:pointer}
.drop{position:relative;display:grid;justify-items:center;gap:6px;border:1px dashed var(--gold);padding:28px 22px;text-align:center;color:var(--muted);font-size:var(--s-sm);transition:background .3s,border-color .3s}
.drop:hover,.drop.is-over{background:rgba(201,164,106,.07)}
.drop.is-over{border-style:solid}
.drop input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
.drop:focus-within{outline:2px solid var(--gold);outline-offset:3px}
.drop-icon{width:34px;height:26px;border:1px solid var(--gold);border-radius:3px;position:relative;margin-bottom:4px}
.drop-icon::before{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--gold);border-radius:50%;left:50%;top:50%;translate:-50% -50%}
.drop-icon::after{content:"";position:absolute;width:8px;height:3px;background:var(--gold);top:-4px;left:5px}
.drop-text{color:var(--ink)}
.drop-hint{font-size:var(--s-xs);letter-spacing:.06em}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.thumbs:empty{display:none}
.thumb{position:relative;aspect-ratio:1;border:1px solid var(--line);background:var(--velvet-2);overflow:hidden}
.thumb.is-new{animation:thumb .5s var(--ease-out) both}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.is-raw img{display:none}
.thumb.is-raw::before{content:attr(data-name);position:absolute;inset:8px;display:grid;place-items:center;font-size:var(--s-xs);color:var(--muted);word-break:break-all;text-align:center}
.thumb-rm{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:rgba(22,8,16,.8);color:var(--ink);font:inherit;font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
.thumb-rm:hover{background:var(--gold);color:var(--velvet)}
@keyframes thumb{from{opacity:0;transform:scale(.85)}}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.err{color:var(--blush);font-size:var(--s-sm);min-height:1.2em;margin:0}
.note{font-size:var(--s-sm);color:var(--muted);margin:0}
.btn.send{min-width:min(100%,300px)}
.btn-bar{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--velvet);opacity:0;transform:scaleX(var(--p,0));transform-origin:left;transition:transform .2s linear,opacity .3s}
form.is-sending .btn{cursor:progress;background:var(--gold);color:var(--velvet)}
form.is-sending .btn-bar{opacity:.55}
form.is-sending .btn-label{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55}}
.merci{border:1px solid var(--gold);padding:clamp(28px,6vw,56px);text-align:center;display:grid;gap:12px;outline:none}
.merci .script{font-family:var(--f-script);font-size:clamp(3rem,10vw,4.6rem);line-height:1.1;color:var(--blush);margin:0}
.merci p{margin:0;max-width:52ch;justify-self:center}
.merci.is-in{animation:rise 1s var(--ease-out) both}

footer{border-top:1px solid var(--line);padding-block:40px;text-align:center;color:var(--muted);font-size:var(--s-sm)}
footer .mono{display:block;margin-bottom:10px;font-size:2.4rem}

/* Page de repli (envoi sans JavaScript) */
.message-page{min-height:100vh;display:grid;align-items:center;padding-block:48px}
.message-text{text-align:center;color:var(--muted);margin:0 auto;max-width:48ch}
.message-list{color:var(--blush);margin:20px auto 0;max-width:48ch}
.message-actions{text-align:center;margin:32px 0 0}

/* ═══════════ Effets de lecture ═══════════ */

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Apparition au défilement : un élément [data-reveal], ou les enfants d'un [data-stagger] en cascade */
.js [data-reveal],
.js [data-stagger] > *{
  opacity:0;transform:translate3d(0,24px,0);
  transition:opacity .9s var(--ease) var(--d,0s),transform 1.2s var(--ease-out) var(--d,0s),filter 1.1s var(--ease) var(--d,0s)}
.js [data-stagger] > h2{filter:blur(6px)}
.js [data-reveal].is-in,
.js [data-stagger].is-in > *{opacity:1;transform:none;filter:none}

/* Compteurs : la valeur finale, invisible, réserve la place */
[data-count]{display:grid!important;justify-items:start}
[data-count] > *{grid-area:1/1}
.count-ghost{visibility:hidden}

/* Filets dorés qui se tracent */
.js .rule::after{transform:scaleX(0);transition:transform 1.4s var(--ease-out) calc(var(--d,0s) + .35s)}
.js .is-in > .rule::after{transform:none}
.js .us blockquote::before{transform:scaleY(0);transition:transform 1.6s var(--ease-out) .3s}
.js .us blockquote.is-in::before{transform:none}
.js .steps li::after{transform:scaleX(0);transition:transform 1.2s var(--ease-out) calc(var(--d,0s) + .15s)}
.js .steps.is-in li::after{transform:none}

/* Le carton se déplie : filets horizontaux puis verticaux depuis le centre */
.js .card[data-reveal]::before{transform:scaleX(0);transition:transform 1.4s var(--ease-out) .3s}
.js .card[data-reveal]::after{transform:scaleY(0);transition:transform 1.4s var(--ease-out) .55s}
.js .card.is-in::before,.js .card.is-in::after{transform:none}

/* Écriture à la plume pour les titres manuscrits */
.js [data-ink]{clip-path:inset(-40% 100% -40% -10%);transition:clip-path 2s cubic-bezier(.55,.1,.25,1) var(--ink-d,.35s)}
.js [data-ink].is-in{clip-path:inset(-40% -10% -40% -10%)}
.js .card .script[data-ink]{--ink-d:.7s}

/* Photos : le cadre se lève comme un rideau, puis l'image fait sa mise au point.
   Masque plutôt que clip-path : Chrome tient compte du clip-path dans IntersectionObserver. */
.js [data-reveal="photo"]{opacity:1;transform:none;
  -webkit-mask:linear-gradient(#000 0 0) 50% 100%/100% 0% no-repeat;mask:linear-gradient(#000 0 0) 50% 100%/100% 0% no-repeat;
  transition:-webkit-mask-size 1.4s var(--ease-out) var(--d,0s),mask-size 1.4s var(--ease-out) var(--d,0s),transform .6s var(--ease)}
.js [data-reveal="photo"].is-in{-webkit-mask-size:100% 100%;mask-size:100% 100%}
.js [data-reveal="photo"]::before{filter:blur(64px);scale:1.35;transition:filter 2.2s var(--ease) calc(var(--d,0s) + .2s),scale 2.4s var(--ease-out) calc(var(--d,0s) + .1s)}
.js [data-reveal="photo"].is-in::before{filter:blur(28px);scale:1.05}
.js [data-reveal="photo"] img{filter:blur(16px) saturate(.6);scale:1.3;transition:filter 1.8s var(--ease) calc(var(--d,0s) + .2s),scale 2.4s var(--ease-out) calc(var(--d,0s) + .1s)}
.js [data-reveal="photo"].is-in img{filter:none;scale:1.1}
.js [data-reveal="photo"]:has(> img)::before{filter:none;scale:1.04;opacity:0;transition:opacity 1.2s var(--ease) calc(var(--d,0s) + .9s),scale 1.6s var(--ease-out) calc(var(--d,0s) + .9s)}
.js [data-reveal="photo"].is-in:has(> img)::before{filter:none;scale:1;opacity:1}
.js .ambiance [data-reveal="photo"].is-in img{scale:1.02}
.js [data-reveal="photo"] span{opacity:0;translate:0 10px;transition:opacity .8s var(--ease) calc(var(--d,0s) + .8s),translate .8s var(--ease-out) calc(var(--d,0s) + .8s)}
.js [data-reveal="photo"].is-in span{opacity:.8;translate:none}

/* Ouverture du hero, une fois les polices prêtes */
@keyframes word{from{opacity:0;filter:blur(10px);transform:translateY(.35em)}to{opacity:1;filter:none;transform:none}}
@keyframes curtain{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes focus{from{filter:blur(16px) saturate(.6);scale:1.3}to{filter:none;scale:1.1}}
@keyframes frame{from{opacity:0;scale:1.04}to{opacity:1;scale:1}}
@keyframes slide{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.js .hero:not(.is-in) :is(.eyebrow,h1,.lede,.cta,.hero-photo,.tag){opacity:0}
.hero.is-in .eyebrow{animation:rise 1s var(--ease-out) .05s both}
.hero.is-in h1 .w{animation:word 1.2s var(--ease-out) var(--d,0s) both}
.hero.is-in .lede{animation:rise 1.1s var(--ease-out) .75s both}
.hero.is-in .cta{animation:rise 1.1s var(--ease-out) .9s both}
.hero.is-in .hero-photo .ph{animation:curtain 1.6s var(--ease-out) .3s both}
.hero.is-in .hero-photo .ph img{animation:focus 2.6s var(--ease) .4s both}
.hero.is-in .hero-photo .ph::before{animation:frame 1.2s var(--ease) 1.4s both}
.hero.is-in .tag{animation:slide 1s var(--ease-out) 1.3s both}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .scroll-cue{display:none}
}