/* =========================================================
   Mariage Laura & Alexandre — style Provence / vert olivier
   Compatible CSP : aucun style en ligne, tout est ici.
   ========================================================= */

:root{
  /* Palette */
  --ivory:#FAF6EA;
  --linen:#F1EAD6;
  --sage-100:#E3E7D0;
  --sage-300:#BFC7A0;
  --sage-500:#97A06E;
  --olive:#7C8748;
  --olive-deep:#4B5527;
  --olive-dark:#2F3719;
  --ink:#2C3219;
  --ink-soft:#5A603F;
  --ochre:#B98B3E;
  --terra:#B2623A;
  --lavender:#8A7AA6;

  /* Typographies */
  --font-display:'Cormorant Garamond','Times New Roman',serif;
  --font-ui:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-script:'La Belle Aurore','Segoe Script','Bradley Hand',cursive;

  --ease:cubic-bezier(.22,.8,.24,1);

}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.is-locked,
html.is-locked body{overflow:hidden}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:1.15rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

[hidden]{display:none!important}
img,svg{max-width:100%}
h1,h2,h3,p,ul,ol,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

/* Grain de papier, très léger, sur toute la page */
body::after{
  content:"";
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Motifs SVG ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}


/* Séparateur : une route en pointillés avec un petit avion au milieu */
.sep{display:block;width:min(52vw,210px);height:auto;margin:1.2rem auto 1.6rem}
.route-line{fill:none;stroke:var(--sep-line,var(--ochre));stroke-width:1.6;stroke-dasharray:6 5}
.route-dot{fill:var(--sep-line,var(--ochre))}
.route-plane{fill:var(--sep-plane,var(--terra));stroke:var(--sep-plane-stroke,var(--ivory));stroke-width:2.6;stroke-linejoin:round;paint-order:stroke}

/* ---------- Barre de progression ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--olive),var(--ochre));
  transform-origin:0 50%;
  transform:scaleX(var(--scroll,0));
}

/* =========================================================
   INTRO : l'enveloppe
   ========================================================= */
.intro{
  position:fixed;inset:0;z-index:100;
  display:none;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 30%,#F3F5E6 0%,#E0E6C8 55%,#CBD4AB 100%);
  touch-action:none;overscroll-behavior:contain;
  transition:opacity 1s var(--ease),visibility 0s linear 1s;
}
.js .intro{display:grid}
.intro.is-gone{opacity:0;visibility:hidden;pointer-events:none}


/* Rappel du voyage : un bout de trajet avec l'avion en haut à gauche, le repère en bas à droite */
.intro__routes{position:absolute;inset:0;pointer-events:none;transition:opacity .6s ease}
.intro.is-opening .intro__routes{opacity:0}
.intro__route{
  position:absolute;width:min(56vw,340px);height:auto;
  opacity:0;animation:route-in 1.4s var(--ease) .6s forwards;
}
.intro__route--tl{top:max(2vh,14px);left:max(2vw,10px)}
.intro__route--br{bottom:max(2vh,14px);right:max(2vw,10px)}
@keyframes route-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.iroute-line{fill:none;stroke:var(--olive-deep);stroke-width:1.8;stroke-dasharray:7 6;opacity:.5}
.iroute-pin{fill:var(--ochre)}

.intro__stage{
  position:relative;display:grid;justify-items:center;gap:2.4rem;
  padding:2rem 1rem;
}
.intro__kicker,
.intro__hint{
  font-family:var(--font-script);font-size:1.45rem;letter-spacing:.02em;
  color:var(--olive-deep);text-align:center;transition:opacity .5s ease;
}
.intro__hint{animation:hint 2.6s ease-in-out infinite}
@keyframes hint{0%,100%{opacity:.55}50%{opacity:1}}
.intro.is-opening .intro__kicker,
.intro.is-opening .intro__hint{opacity:0;animation:none}

.envelope{
  --w:min(86vw,520px);
  --h:calc(var(--w)*.7);
  position:relative;width:var(--w);height:var(--h);
  margin-top:calc(var(--h)*.3);
  perspective:1200px;cursor:pointer;
  animation:env-in 1s var(--ease) .15s both;
}
@keyframes env-in{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}

/* ombre portée sous l'enveloppe */
.envelope::after{
  content:"";position:absolute;left:6%;right:6%;bottom:-7%;height:12%;z-index:0;
  background:rgba(58,68,28,.38);filter:blur(20px);border-radius:50%;
  transition:opacity .6s ease;
}
.intro.is-zoom .envelope::after{opacity:0}

.env-back{
  position:absolute;inset:0;z-index:1;border-radius:4px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.12) 0 2px,transparent 2px 9px),
    var(--sage-300);
}

.pocket{position:absolute;inset:0;z-index:4;border-radius:4px;overflow:hidden}
.pocket__svg{display:block;width:100%;height:100%}
.p-side{fill:#E7DBBA}
.p-side--r{fill:#DFD2AE}
.p-bottom{fill:#EFE4C4}
.pocket__svg polygon{stroke:rgba(90,76,36,.3);stroke-width:1;vector-effect:non-scaling-stroke}
.pocket__to{
  position:absolute;left:0;right:0;top:64%;text-align:center;
  display:grid;gap:.1rem;color:var(--olive-deep);
}
.pocket__to small{
  font-family:var(--font-ui);font-size:calc(var(--w)*.022);letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-soft);
}
.pocket__to span{font-family:var(--font-script);font-size:calc(var(--w)*.085);line-height:1.15}

.card{
  position:absolute;left:7%;right:7%;top:9%;height:82%;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--ivory);border-radius:3px;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
  transition:transform 1.1s var(--ease),box-shadow 1s ease;
}
.card::before{
  content:"";position:absolute;inset:7px;border:1px solid rgba(124,135,72,.5);pointer-events:none;
}
.card__sep{width:42%;height:auto;margin-bottom:.4rem}
.card__kicker{
  font-family:var(--font-ui);font-size:calc(var(--w)*.021);letter-spacing:.34em;text-transform:uppercase;
  color:var(--olive);
}
.card__names{
  font-family:var(--font-script);font-weight:400;
  font-size:calc(var(--w)*.095);line-height:1.25;margin:.35em 0 .25em;color:var(--olive-deep);
}
.card__names span{color:var(--ochre);font-family:var(--font-display);font-style:italic}
.card__date{
  font-family:var(--font-ui);font-size:calc(var(--w)*.027);letter-spacing:.3em;color:var(--ink-soft);
}

.flap{
  position:absolute;left:0;top:0;width:100%;height:51.43%;z-index:5;
  transform-origin:50% 0;transform-style:preserve-3d;
  transition:transform .95s var(--ease),z-index 0s linear .45s;
}
.flap__face{
  position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.flap__face--out{background:linear-gradient(180deg,#F2E8CC,#E6D9B6)}
/* Face intérieure : retournée de 180°, donc son triangle est dessiné à l'envers (pointe en haut).
   Une fois le rabat ouvert, la base reste collée au bord de l'enveloppe et la pointe regarde vers le haut. */
.flap__face--in{
  transform:rotateX(180deg);
  clip-path:polygon(0 100%,100% 100%,50% 0);
  background:linear-gradient(0deg,#A3AE78,#BCC595);
}

.seal{
  position:absolute;left:50%;top:51.43%;z-index:6;
  width:calc(var(--w)*.2);aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.35));
  -webkit-tap-highlight-color:transparent;
  transition:scale .3s var(--ease);
}
.seal:hover{scale:1.06}
.seal svg{display:block;width:100%;height:100%}
.seal__text{font-family:var(--font-display);font-style:italic;font-size:26px;fill:#F4EFD8}
.seal::before{
  content:"";position:absolute;inset:-8%;border-radius:50%;
  border:1.5px solid rgba(250,246,234,.75);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* Séquence d'ouverture */
.intro.is-opening .seal{animation:seal-pop .6s var(--ease) forwards;pointer-events:none}
.intro.is-opening .seal::before{display:none}
@keyframes seal-pop{
  0%{transform:translate(-50%,-50%) scale(1)}
  35%{transform:translate(-50%,-50%) scale(1.22) rotate(-6deg)}
  100%{transform:translate(-50%,-50%) scale(.5) rotate(8deg);opacity:0}
}
.intro.is-open .flap{transform:rotateX(180deg);z-index:2}
.intro.is-rise .card{transform:translateY(-62%)}
.intro.is-zoom .card{
  transform:translate(var(--zx,0),var(--zy,0)) scale(var(--zs,3));
  transition-duration:1.25s;
  box-shadow:none;
}
.intro.is-zoom .pocket,
.intro.is-zoom .env-back,
.intro.is-zoom .flap{opacity:0;transition:opacity .55s ease .1s}
/* pendant le zoom, le texte de la carte s'efface : on obtient une feuille ivoire unie
   qui se fond ensuite dans la page, sans texte coupé sur les bords */
.card > *,
.card::before{transition:opacity .6s ease}
.intro.is-zoom .card > *,
.intro.is-zoom .card::before{opacity:0;transition-delay:.2s}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:grid;place-items:center;text-align:center;overflow:hidden;
  padding:6rem 1.5rem 7rem;
  background:radial-gradient(90% 70% at 50% 40%,#FFFDF5 0%,var(--ivory) 70%);
}
.hero__inner{position:relative;z-index:2}
.eyebrow{
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--olive);margin-bottom:1.2rem;
}
.hero .eyebrow{font-family:var(--font-script);font-size:1.7rem;letter-spacing:.02em;text-transform:none}
.eyebrow--light{color:rgba(250,246,234,.8)}
.names{
  display:grid;justify-items:center;margin:.3em 0 .45em;
  font-family:var(--font-script);font-weight:400;
  font-size:clamp(3.6rem,17vw,8rem);line-height:1.08;color:var(--olive-deep);
}
.names__amp{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:.5em;line-height:1.1;color:var(--ochre)}
.hero__date{
  display:grid;gap:.2rem;justify-items:center;
  font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.3em;color:var(--ink-soft);
}
.hero__date span{font-size:.72rem}
.hero__date strong{font-weight:400;font-size:clamp(1rem,4vw,1.3rem);color:var(--olive-deep)}
.hero__date::before,
.hero__date::after{content:"";width:1px;height:34px;background:var(--olive);opacity:.5;margin:.8rem auto}


.scroll-cue{
  position:absolute;bottom:1.8rem;left:50%;translate:-50% 0;z-index:2;
  display:grid;justify-items:center;gap:.7rem;text-decoration:none;
  font-family:var(--font-ui);font-size:.65rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);
}
.scroll-cue i{
  width:1px;height:46px;background:linear-gradient(var(--olive),transparent);
  transform-origin:top;animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* Entrée du hero, déclenchée après l'ouverture de l'enveloppe */
.js [data-hero]{opacity:0;transform:translateY(22px);filter:blur(6px)}
.is-ready [data-hero]{animation:hero-in 1.4s var(--ease) both;animation-delay:calc(var(--i,0)*170ms + .1s)}
@keyframes hero-in{to{opacity:1;transform:none;filter:none}}

/* =========================================================
   SECTIONS
   ========================================================= */
/* overflow-x:clip : les rameaux qui dépassent sur les côtés ne créent pas de défilement horizontal,
   et les bords ondulés peuvent toujours déborder vers le haut */
.section{position:relative;padding:clamp(5rem,16vw,9rem) 2.2rem;overflow-x:clip}
.container{position:relative;z-index:1;width:100%;max-width:640px;margin-inline:auto;text-align:center}
.container--wide{max-width:980px}
.container--form{max-width:560px}

.title{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.3rem,9vw,3.8rem);line-height:1.05;color:var(--olive-deep);margin-bottom:1.2rem;
}
.title em{font-style:italic;color:var(--ochre)}
.title--xl{font-size:clamp(2.8rem,12vw,5.2rem);font-style:italic}
.lead{
  font-size:clamp(1.2rem,4.4vw,1.45rem);line-height:1.6;color:var(--ink-soft);
  max-width:34em;margin-inline:auto;
}

.section--linen{background:var(--linen);--wave:var(--linen)}
.section--sage{background:var(--sage-100);--wave:var(--sage-100)}
.section--ivory{background:var(--ivory);--wave:var(--ivory)}
.section--deep{
  --wave:#5A6630;
  background:radial-gradient(100% 120% at 50% 0%,#5A6630 0%,var(--olive-deep) 60%,var(--olive-dark) 100%);
  color:var(--ivory);
}
.section--deep .title{color:var(--ivory)}

/* Bords ondulés entre les sections */
.wave{
  position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(36px,7vw,80px);
  pointer-events:none;color:var(--wave);
}
.wave svg{display:block;width:100%;height:100%}
.wave path{fill:currentColor}
.wave--flip svg{transform:scaleX(-1)}


/* ---------- Apparition au scroll ---------- */
.js [data-reveal]{
  opacity:0;
  transition:
    opacity 1s var(--ease),
    transform 1.1s var(--ease),
    filter 1s var(--ease),
    clip-path 1.3s var(--ease);
  transition-delay:calc(var(--i,0)*120ms);
}
.js [data-reveal=""],
.js [data-reveal="up"]{transform:translateY(34px)}
.js [data-reveal="left"]{transform:translateX(-40px)}
.js [data-reveal="right"]{transform:translateX(40px)}
.js [data-reveal="scale"]{transform:scale(.78)}
.js [data-reveal="grow"]{transform:scaleX(.2)}
.js [data-reveal="rise"]{transform:translateY(60px) scale(.96)}
.js [data-reveal="blur"]{transform:translateY(14px);filter:blur(8px)}
.js [data-reveal="mask"]{transition:none}
.js [data-reveal].is-visible{opacity:1;transform:none;filter:none}
/* Titres : balayage de gauche à droite. Le masque est dans une animation (et pas dans l'état de départ)
   pour que le navigateur détecte bien l'élément quand il entre à l'écran. */
.js [data-reveal="mask"].is-visible{animation:wipe 1.3s var(--ease) calc(var(--i,0)*120ms) both}
@keyframes wipe{
  from{opacity:1;clip-path:inset(-10% 100% -10% 0)}
  to{opacity:1;clip-path:inset(-10% -2% -10% -2%)}
}
/* une fois l'animation finie, on retire les délais pour que les survols restent réactifs */
.js [data-reveal].is-done{transition:translate .4s var(--ease),box-shadow .4s ease,background .4s ease;transition-delay:0s}

/* ---------- Bienvenue + jours ---------- */
.days{display:grid;gap:1.6rem;margin-top:3.4rem}
@media (min-width:720px){.days{grid-template-columns:repeat(3,1fr)}}
.day{
  position:relative;display:grid;justify-items:center;gap:.25rem;
  padding:3.4rem 1rem 2.2rem;
  border:1px solid rgba(75,85,39,.35);border-radius:999px 999px 12px 12px;
  background:rgba(255,255,255,.4);
}
.day::before{
  content:"";position:absolute;inset:6px;border:1px solid rgba(185,139,62,.5);
  border-radius:inherit;pointer-events:none;
}
.day:hover{translate:0 -6px;box-shadow:0 22px 40px -26px rgba(47,55,25,.55)}
.day__name{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--olive)}
.day__num{font-size:4.4rem;font-weight:300;line-height:1;color:var(--olive-deep)}
.day__month{font-style:italic;color:var(--ink-soft)}
.day__label{
  margin-top:.9rem;padding-top:.9rem;border-top:1px solid rgba(75,85,39,.25);
  font-size:1.1rem;color:var(--ink);
}

/* ---------- Décompte ---------- */
.count{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;
  max-width:560px;margin:2.2rem auto 1.6rem;
}
.count__item{
  aspect-ratio:1;display:grid;align-content:center;justify-items:center;gap:.25rem;
  border:1px solid rgba(250,246,234,.42);border-radius:50%;
}
.count__num{
  font-size:clamp(1.7rem,8.5vw,2.9rem);font-weight:300;line-height:1;
  font-variant-numeric:tabular-nums;
}
.count__label{
  font-family:var(--font-ui);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;opacity:.75;
}
.count__note{font-family:var(--font-script);font-size:1.7rem;color:rgba(250,246,234,.85)}

/* ---------- Programme ---------- */
.timeline{position:relative;text-align:left;margin-top:3.2rem;padding-left:2.2rem}
.timeline__line{position:absolute;left:.45rem;top:.4rem;bottom:.4rem;width:1px;background:rgba(75,85,39,.2)}
.timeline__line::after{
  content:"";position:absolute;inset:0;background:var(--olive);
  transform-origin:top;transform:scaleY(var(--p,0));
}
.tl-day{margin-bottom:2.8rem}
.tl-day:last-child{margin-bottom:0}
.tl-day h3{
  position:relative;font-size:2rem;font-weight:400;font-style:italic;line-height:1.2;
  color:var(--olive-deep);margin-bottom:.8rem;
}
.tl-day h3::before{
  content:"";position:absolute;left:calc(-2.2rem + .45rem - 7px);top:.55em;
  width:15px;height:15px;border-radius:50%;background:var(--linen);border:1px solid var(--olive);
}
.tl-item{display:grid;grid-template-columns:4.4rem 1fr;gap:.6rem;padding:.65rem 0;position:relative}
.tl-item::before{
  content:"";position:absolute;left:calc(-2.2rem + .45rem - 3.5px);top:1.2rem;
  width:7px;height:7px;border-radius:50%;background:var(--olive);
}
.tl-item time{
  font-family:var(--font-ui);font-size:.82rem;letter-spacing:.14em;color:var(--olive);padding-top:.35rem;
}
.tl-item strong{display:block;font-weight:500;font-size:1.3rem;line-height:1.25;color:var(--ink)}
.tl-item span{display:block;color:var(--ink-soft);font-size:1.05rem}

/* ---------- Lieu ---------- */
.address{display:grid;gap:.15rem;margin-top:1.6rem;font-size:1.4rem;color:var(--ink-soft)}
.address strong{font-weight:500;font-size:1.9rem;color:var(--olive-deep)}
.plan{width:min(100%,380px);margin:3rem auto 0}
.plan__frame{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border:1px solid rgba(75,85,39,.35);border-radius:999px 999px 12px 12px;
}
.plan__frame img{display:block;width:100%;height:100%;object-fit:cover}
.plan__placeholder{
  position:absolute;inset:0;display:grid;place-items:center;padding:2rem;text-align:center;
  background:repeating-linear-gradient(135deg,var(--sage-100) 0 10px,#DCE1C4 10px 20px);
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--olive-deep);
}
.plan figcaption{margin-top:.9rem;font-style:italic;color:var(--ink-soft)}

/* ---------- Dress code ---------- */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;max-width:460px;margin:2.8rem auto 0}
.swatch{
  --c:var(--olive);
  display:grid;justify-items:center;gap:.6rem;
  font-family:var(--font-ui);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.swatch::before{
  content:"";width:min(64px,16vw);aspect-ratio:1;border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 10px 18px -12px rgba(0,0,0,.4);
}
.swatch--lin{--c:#E6DCC3}
.swatch--olive{--c:var(--olive)}
.swatch--terra{--c:var(--terra)}
.swatch--lavande{--c:var(--lavender)}

/* ---------- Infos pratiques ---------- */
.infos{display:grid;gap:1.2rem;margin-top:3rem}
@media (min-width:760px){.infos{grid-template-columns:repeat(3,1fr)}}
.info{
  text-align:left;padding:1.8rem 1.5rem;
  background:rgba(255,255,255,.55);border-top:2px solid var(--olive);
}
.info h3{font-size:1.6rem;font-weight:500;color:var(--olive-deep);margin-bottom:.5rem;display:flex;align-items:center}
.info h3::before{
  content:"";flex:none;width:1.25em;height:1.1em;margin-right:.5em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-22 -19 44 38'%3E%3Cpath fill='%23B2623A' d='M20 0C19 -1.6 15 -2.3 12 -2.3L4 -2.3L-6 -17L-10.5 -17L-6 -2.6L-12.5 -2.2L-16 -7.5L-19.5 -7.5L-17.5 -1.6L-20 0L-17.5 1.6L-19.5 7.5L-16 7.5L-12.5 2.2L-6 2.6L-10.5 17L-6 17L4 2.3L12 2.3C15 2.3 19 1.6 20 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.info p{color:var(--ink-soft);font-size:1.1rem}

/* ---------- RSVP ---------- */
.rsvp{margin-top:2.6rem;text-align:left}
.choice{border:0;padding:0;margin:0 0 1.8rem;display:grid;gap:.7rem}
.choice__opt input{position:absolute;opacity:0;pointer-events:none}
.choice__opt span{
  display:block;padding:1rem 1.2rem;text-align:center;cursor:pointer;
  border:1px solid rgba(75,85,39,.4);border-radius:999px;
  transition:background .3s,color .3s,border-color .3s;
}
.choice__opt input:checked + span{background:var(--olive-deep);border-color:var(--olive-deep);color:var(--ivory)}
.choice__opt input:focus-visible + span{outline:2px solid var(--ochre);outline-offset:3px}

.field-group{border:0;padding:0;margin:0 0 1.8rem}
.field-group legend{
  padding:0;margin-bottom:.6rem;
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--olive);
}
.check{display:flex;align-items:center;gap:.8rem;padding:.5rem 0;cursor:pointer}
.check input{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:1.4rem;height:1.4rem;display:grid;place-content:center;
  border:1px solid var(--olive);border-radius:50%;background:transparent;
}
.check input::after{
  content:"";width:.72rem;height:.72rem;background:var(--olive-deep);border-radius:50%;
  transform:scale(0);transition:transform .25s var(--ease);
}
.check input:checked::after{transform:scale(1)}
.check small{font-family:var(--font-ui);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

.field{display:block;margin-bottom:1.6rem}
.field > span{
  display:block;margin-bottom:.3rem;
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--olive);
}
.field input,
.field textarea{
  width:100%;padding:.6rem 0;font:inherit;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid rgba(75,85,39,.45);border-radius:0;
  outline:none;resize:vertical;transition:border-color .3s;
}
.field input:focus,
.field textarea:focus{border-bottom-color:var(--ochre)}

.form-error{
  margin-bottom:1rem;padding:.8rem 1rem;font-size:1.05rem;color:#7C2D12;
  background:rgba(178,98,58,.12);border-left:3px solid var(--terra);
}
.form-note{margin-top:1rem;text-align:center;font-style:italic;color:var(--ink-soft);font-size:1.05rem}
.rsvp .btn{display:flex;width:100%}

.rsvp-done{
  margin-top:2.6rem;padding:2.4rem 1.4rem;text-align:center;
  background:rgba(255,255,255,.5);border:1px solid rgba(75,85,39,.3);border-radius:999px 999px 12px 12px;
  animation:pop-in .9s var(--ease) both;
}
.rsvp-done h3{font-size:2.2rem;font-weight:300;font-style:italic;color:var(--olive-deep);margin-bottom:.6rem}
.rsvp-done p{color:var(--ink-soft)}
.rsvp-done__recap{margin-top:1.2rem;display:grid;gap:.3rem;color:var(--ink)}
@keyframes pop-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 2.2rem;border:1px solid var(--olive-deep);border-radius:999px;
  background:var(--olive-deep);color:var(--ivory);cursor:pointer;text-decoration:none;
  font-family:var(--font-ui);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
  transition:translate .3s var(--ease),background .3s,color .3s,box-shadow .3s;
}
.btn:hover{background:var(--olive);border-color:var(--olive);translate:0 -2px;box-shadow:0 12px 24px -12px rgba(47,55,25,.65)}
.btn--ghost{background:transparent;color:var(--olive-deep)}
.btn--ghost:hover{background:rgba(75,85,39,.1);color:var(--olive-deep)}
.btn--light{background:transparent;border-color:rgba(250,246,234,.65);color:var(--ivory)}
.btn--light:hover{background:var(--ivory);border-color:var(--ivory);color:var(--olive-deep)}

/* ---------- Boîte de confirmation ---------- */
.confirm{
  border:0;border-radius:18px;padding:2rem 1.6rem;width:min(92vw,420px);
  background:var(--ivory);color:var(--ink);text-align:center;
  box-shadow:0 30px 80px rgba(20,25,10,.45);
}
.confirm::backdrop{background:rgba(35,42,18,.62);backdrop-filter:blur(3px)}
.confirm[open]{animation:pop-in .45s var(--ease) both}
.confirm__title{font-size:2rem;font-weight:400;font-style:italic;color:var(--olive-deep);margin-bottom:.4rem}
.confirm__text{color:var(--ink-soft)}
.confirm__recap{margin:1.1rem 0 0;display:grid;gap:.25rem;font-size:1.1rem}
.confirm__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:1.6rem}

/* ---------- Pied de page ---------- */
.footer{padding-bottom:4rem}
.footer .sep{--sep-line:#D9B976;--sep-plane:#E58E62;--sep-plane-stroke:var(--olive-deep)}
.footer__names{font-family:var(--font-script);font-size:clamp(2.6rem,11vw,4.2rem);font-weight:400;line-height:1.25}
.footer__date{
  margin:.4rem 0 2.2rem;
  font-family:var(--font-ui);font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;opacity:.8;
}
.footer__small{margin-top:2.4rem;font-family:var(--font-script);font-size:1.6rem;opacity:.9}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;
  }
}

.plane-shape{fill:var(--terra);stroke:var(--ivory);stroke-width:2;stroke-linejoin:round;paint-order:stroke}


/* =========================================================
   DÉTAILS CACHÉS
   Petits motifs discrets : on les devine, on les touche, une surprise apparaît.
   ========================================================= */
.hero__rings{
  position:absolute;left:50%;top:46%;width:min(120vw,820px);translate:-50% -50%;
  color:var(--olive);opacity:.045;pointer-events:none;z-index:1;
}
.day__icon{display:block;width:44px;height:30px;margin:0 auto .7rem;color:var(--ochre);opacity:.8}

.secret{
  position:absolute;z-index:4;display:grid;place-items:center;
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--olive);opacity:.3;transition:opacity .4s ease,transform .4s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.secret svg{width:100%;height:auto;max-height:100%;fill:currentColor}
.secret:hover,.secret:focus-visible{opacity:1;transform:scale(1.15) rotate(-6deg)}
.secret:focus-visible{outline:1px dashed currentColor;outline-offset:4px}
.secret--cicada{right:8%;bottom:26%;width:50px}
.secret--cicada svg{fill:none}
.secret--cicada use{fill:currentColor}
.secret--heart{position:relative;margin:1.6rem auto 0;color:var(--ivory);opacity:.28;width:30px;height:30px}
.secret--coupes{right:7%;bottom:2.2rem;width:54px;color:var(--ochre)}
.secret--coupes svg,.secret--cicada svg{fill:none;stroke:none}
.secret--inline{position:relative;display:inline-grid;vertical-align:middle;width:22px;height:22px;margin-left:.2rem;color:#E58E62;opacity:.55}

.toast{
  position:fixed;left:50%;bottom:max(1.4rem,env(safe-area-inset-bottom));z-index:60;
  width:max-content;max-width:min(88vw,380px);padding:.8rem 1.5rem;border-radius:28px;
  background:var(--olive-deep);color:var(--ivory);text-align:center;
  font-family:var(--font-script);font-size:1.3rem;line-height:1.3;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0;translate:-50% 16px;pointer-events:none;transition:opacity .4s ease,translate .5s var(--ease);
}
.toast.is-on{opacity:1;translate:-50% 0}

.burst{
  position:fixed;z-index:70;width:18px;height:17px;pointer-events:none;
  fill:var(--terra);animation:burst 1.3s cubic-bezier(.2,.7,.3,1) forwards;
}
.burst:nth-child(3n){fill:var(--ochre)}
.burst:nth-child(3n+1){fill:var(--olive)}
@keyframes burst{
  0%{opacity:1;transform:translate(0,0) scale(.4) rotate(0)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--rot))}
}
@media (prefers-reduced-motion:reduce){.burst{display:none}}
.footer__amp{font-family:var(--font-display);font-style:italic;font-size:.7em;color:#D9B976}
.pocket__to em,.pocket__to span em{font-style:normal}
.amp{font-family:var(--font-display);font-style:italic;font-size:.85em}