:root{
    /* Palette noir, blanc, rouge */
    --cream:#faf8f6;
    --cream-2:#f2dee0;
    --paper:#ffffff;
    --brown-900:#100d0c;
    --brown-800:#171310;
    --brown-700:#b3182a;
    --brown-600:#241c1a;
    --gold:#b3182a;
    --gold-light:#d94a5c;
    --gold-pale:#f3c6cb;
    --ink:#1c1512;
    --shadow: 0 20px 60px rgba(16,13,12,.22);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Cormorant Garamond', Georgia, serif;
    background:var(--cream);
    color:var(--ink);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Playfair Display', Georgia, serif;
    color:var(--brown-800);
    margin:0;
  }
  .script{
    font-family:'Tangerine', 'Brush Script MT', cursive;
    line-height:1;
  }
  a{color:inherit;}
  button{font-family:inherit;}

  /* -------- Background texture -------- */
  .bg-texture{
    position:fixed; inset:0; z-index:-2;
    background:
      radial-gradient(circle at 15% 20%, rgba(179,24,42,.07), transparent 40%),
      radial-gradient(circle at 85% 80%, rgba(16,13,12,.06), transparent 45%),
      var(--cream);
  }

  /* -------- Floating petals -------- */
  .petals{position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
  .petal{
    position:absolute; top:-40px;
    width:10px; height:10px;
    border-radius:50% 0 50% 50%;
    opacity:.55;
    animation:fall linear infinite;
  }
  @keyframes fall{
    to{ transform: translateY(110vh) rotate(360deg); }
  }

  /* ================= ENVELOPE SCREEN ================= */
  #envelope-screen{
    position:fixed; inset:0; z-index:50;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:linear-gradient(180deg,#ffffff,#f3c6cb 55%, #b3182a);
    transition: transform 1s cubic-bezier(.65,0,.35,1), opacity 1s ease;
  }
  #envelope-screen.closed{
    transform:translateY(-105%);
    opacity:.4;
    pointer-events:none;
  }
  .env-wrap{ perspective:1400px; }
  .envelope{
    position:relative;
    width:min(78vw, 360px);
    height:min(52vw, 240px);
    cursor:pointer;
  }
  .env-body{
    position:absolute; inset:0;
    background:var(--paper);
    border:1px solid var(--gold);
    border-radius:4px;
    box-shadow:var(--shadow);
  }
  .env-body::before{ /* bottom triangle shading */
    content:"";
    position:absolute; left:0; right:0; bottom:0; top:38%;
    background:linear-gradient(180deg, transparent, rgba(179,24,42,.10));
  }
  .env-flap{
    position:absolute; left:0; right:0; top:0; height:60%;
    background:var(--brown-700);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top center;
    transition: transform .9s cubic-bezier(.65,0,.35,1);
    box-shadow: inset 0 -10px 25px rgba(0,0,0,.25);
    z-index:3;
  }
  .envelope.open .env-flap{ transform: rotateX(180deg); z-index:1; }
  .env-line{
    position:absolute; left:50%; top:0; bottom:0; width:1px;
    background:rgba(255,255,255,.35); transform:translateX(-50%);
  }
  .seal{
    position:absolute; left:50%; top:34%; transform:translate(-50%,-50%);
    width:64px; height:64px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 55%, var(--brown-700) 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 14px rgba(44,24,16,.4);
    z-index:4;
    font-family:'Playfair Display', serif;
    color:#fff8ea; font-size:1.05rem; letter-spacing:1px;
    transition: transform .5s ease, opacity .5s ease;
  }
  .envelope.open .seal{ transform:translate(-50%,-50%) scale(0); opacity:0; }
  .env-card{
    position:absolute; left:8%; right:8%; bottom:-6%;
    height:78%;
    background:var(--paper);
    border:1px solid var(--gold-pale);
    border-radius:3px;
    box-shadow:0 -4px 10px rgba(0,0,0,.08);
    display:flex; align-items:center; justify-content:center;
    text-align:center; padding:10px;
    transform: translateY(6%);
    transition: transform .9s cubic-bezier(.2,.8,.2,1) .15s;
    z-index:2;
  }
  .envelope.open .env-card{ transform: translateY(-58%); }
  .env-card .script{ font-size:2.6rem; color:var(--brown-700); }
  .env-card small{ display:block; letter-spacing:3px; text-transform:uppercase; font-size:.62rem; color:var(--gold); margin-top:6px;}

  .env-hint{
    margin-top:34px; text-align:center; color:var(--brown-700);
    letter-spacing:2px; font-size:.72rem; text-transform:uppercase;
    animation:pulse 2s ease-in-out infinite;
  }
  .env-hint svg{display:block; margin:6px auto 0; animation:bounce 1.6s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
  @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

  /* ================= SECTIONS ================= */
  main{position:relative; z-index:2;}
  section{
    min-height:100vh;
    padding:90px 22px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    position:relative;
  }
  .kicker{
    text-transform:uppercase; letter-spacing:4px; font-size:.7rem;
    color:var(--gold); font-weight:600; margin-bottom:14px;
  }
  .divider{
    width:70px; height:1px; background:var(--gold); margin:22px auto;
    position:relative;
  }
  .divider::before{
    content:"❧"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:var(--cream); padding:0 10px; color:var(--gold); font-size:1rem;
  }
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---- Hero ---- */
  #hero .monogram{
    font-family:'Tangerine', cursive; font-size:6.5rem; color:var(--brown-700); line-height:.8;
  }
  #hero h1{ font-size:clamp(2rem,6vw,3.4rem); margin-top:10px; }
  #hero .families{ margin-top:18px; font-size:1.05rem; letter-spacing:1px; color:var(--brown-600); }
  #hero .date-badge{
    margin-top:30px; display:inline-flex; gap:10px; align-items:center;
    border:1px solid var(--gold); padding:10px 22px; border-radius:40px;
    font-size:.95rem; letter-spacing:1px; color:var(--brown-700); background:rgba(255,250,241,.6);
  }
  #hero .scroll-cue{ margin-top:70px; font-size:.68rem; letter-spacing:3px; text-transform:uppercase; color:var(--brown-600); opacity:.75; }

  /* ---- Countdown ---- */
  .countdown{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:8px;}
  .cd-cell{
    background:var(--paper); border:1px solid var(--gold-pale); border-radius:10px;
    padding:18px 16px; min-width:78px; box-shadow:0 8px 20px rgba(90,56,32,.08);
  }
  .cd-cell b{ display:block; font-family:'Playfair Display'; font-size:2rem; color:var(--brown-800); }
  .cd-cell span{ font-size:.62rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); }

  /* ---- Verse ---- */
  #verse blockquote{
    max-width:640px; font-style:italic; font-size:clamp(1.1rem,2.4vw,1.5rem);
    line-height:1.7; color:var(--brown-700); position:relative;
  }
  #verse blockquote::before,
  #verse blockquote::after{ content:"“"; font-family:'Playfair Display'; font-size:2.4rem; color:var(--gold); }
  #verse blockquote::after{ content:"”"; }
  #verse cite{ display:block; margin-top:16px; font-style:normal; letter-spacing:2px; text-transform:uppercase; font-size:.7rem; color:var(--gold); }

  /* ---- Programme ---- */
  .prog-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:26px; max-width:980px; width:100%; margin-top:20px;
  }
  .prog-card{
    background:var(--paper); border:1px solid var(--gold-pale); border-radius:16px;
    padding:30px 24px; text-align:left; position:relative; overflow:hidden;
    box-shadow:0 12px 30px rgba(90,56,32,.08);
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .prog-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(90,56,32,.16); }
  .prog-card .icon{
    width:46px; height:46px; border-radius:50%; background:var(--cream-2);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
    color:var(--gold); font-size:1.3rem;
  }
  .prog-card h3{ font-size:1.2rem; margin-bottom:4px;}
  .prog-card .time{ color:var(--gold); font-weight:600; letter-spacing:1px; font-size:.95rem; }
  .prog-card p{ margin:10px 0 16px; line-height:1.5; color:var(--brown-600); font-size:1.02rem;}
  .prog-card a.map-link{
    display:inline-flex; align-items:center; gap:6px; font-size:.82rem; letter-spacing:1px;
    text-transform:uppercase; color:var(--brown-700); text-decoration:none; border-bottom:1px solid var(--gold);
    padding-bottom:2px; transition:color .2s ease;
  }
  .prog-card a.map-link:hover{ color:var(--gold); }

  .cal-btn{
    margin-top:34px; display:inline-flex; align-items:center; gap:10px;
    background:var(--brown-700); color:var(--paper); border:none; padding:14px 30px;
    border-radius:40px; font-size:.95rem; letter-spacing:1px; cursor:pointer;
    box-shadow:0 10px 24px rgba(59,36,23,.3); transition:transform .25s ease, background .25s ease;
    text-decoration:none;
  }
  .cal-btn:hover{ transform:translateY(-3px); background:var(--brown-800); }

  /* ---- Gallery ---- */
  .gallery{
    width:100%; max-width:1000px; margin-top:10px;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:20px;
  }
  .g-card{
    aspect-ratio:3/4; border-radius:14px; position:relative; overflow:hidden;
    box-shadow:0 14px 28px rgba(90,56,32,.15);
    display:flex; align-items:flex-end; justify-content:center;
    transition:transform .4s ease;
  }
  .g-card:hover{ transform:scale(1.04) rotate(-.4deg); }
  .g-card .art{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  }
  .g-card svg{ width:68%; height:68%; }
  .g-card .cap{
    position:relative; z-index:2; width:100%; padding:14px 10px;
    background:linear-gradient(0deg, rgba(44,24,16,.55), transparent);
    color:#fff8ea; font-size:.78rem; letter-spacing:1px; text-transform:uppercase;
  }
  .g-photo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;
  }
  .g-card.has-photo .g-photo{ display:block; }
  .g-card.has-photo .art{ display:none; }
  .g-card.empty{
    background:var(--paper); border:2px dashed var(--gold-pale); box-shadow:none;
  }
  .g-card.empty .art svg{ width:30%; height:30%; color:var(--gold-pale); }
  .g-card.empty .cap{
    background:none; color:var(--brown-600); font-style:italic; text-transform:none;
    letter-spacing:.5px; font-size:.85rem;
  }
  .g-note{
    margin-top:26px; font-size:.85rem; color:var(--brown-600); max-width:560px; line-height:1.6; font-style:italic;
  }

  /* ---- RSVP ---- */
  .rsvp-box{
    background:var(--paper); border:1px solid var(--gold-pale); border-radius:20px;
    padding:40px clamp(20px,5vw,50px); max-width:560px; width:100%;
    box-shadow:0 20px 50px rgba(90,56,32,.14);
  }
  .quick-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:26px 0 8px; }
  .qa-btn{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    text-decoration:none; color:var(--brown-700); font-size:.72rem; letter-spacing:1px; text-transform:uppercase;
    width:92px;
  }
  .qa-btn .circ{
    width:56px; height:56px; border-radius:50%; border:1px solid var(--gold);
    display:flex; align-items:center; justify-content:center; font-size:1.35rem; color:var(--gold);
    transition: all .25s ease; background:var(--cream-2);
  }
  .qa-btn:hover .circ{ background:var(--gold); color:#fff8ea; transform:translateY(-4px); }

  .rsvp-form{ margin-top:24px; text-align:left; display:grid; gap:16px; }
  .rsvp-form label{ font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:6px; }
  .rsvp-form input, .rsvp-form select, .rsvp-form textarea{
    width:100%; border:none; border-bottom:1px solid var(--gold-pale); background:transparent;
    padding:9px 2px; font-family:'Cormorant Garamond'; font-size:1.05rem; color:var(--ink); outline:none;
  }
  .rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus{ border-bottom-color:var(--gold); }
  .rsvp-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .send-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
  .send-btn{
    flex:1; min-width:150px; border:none; border-radius:40px; padding:13px 18px;
    font-size:.85rem; letter-spacing:1px; text-transform:uppercase; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .2s ease, opacity .2s ease;
  }
  .send-btn:hover{ transform:translateY(-2px); }
  .send-btn.whatsapp{ background:var(--brown-800); color:#fff; }
  .send-btn.email{ background:transparent; color:var(--brown-700); border:1px solid var(--gold); }
  .send-btn.qr{ width:100%; margin-top:4px; background:transparent; border:1px dashed var(--brown-700); color:var(--brown-700); }
  .form-note{ font-size:.75rem; color:var(--brown-600); margin-top:10px; opacity:.85; }

  /* ---- RSVP: civilité / boisson radios ---- */
  #panel-solo, #panel-couple{ display:grid; gap:16px; }
  #panel-solo[hidden], #panel-couple[hidden]{ display:none; }
  #companions{ display:grid; gap:16px; }
  .companion-block{ display:grid; gap:12px; }
  .rsvp-form .field-block label{ margin-bottom:8px; }
  .radio-group{ display:flex; gap:8px; flex-wrap:wrap; }
  .radio-pill{
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--gold-pale); border-radius:30px;
    padding:8px 16px; font-size:.9rem; cursor:pointer; line-height:1;
    color:var(--brown-600); background:var(--paper);
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .radio-pill input{ accent-color:var(--brown-700); margin:0; }
  .radio-pill:has(input:checked){
    background:var(--brown-700); border-color:var(--brown-700); color:#fff;
  }
  .radio-pill.sub{ font-size:.82rem; padding:6px 14px; }
  .sub-options{ margin-top:10px; }
  .sub-options[hidden]{ display:none; }
  .companion-title{ font-size:.74rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin:0; }
  #qr-result{ margin-top:20px; text-align:center; }
  #qr-canvas-wrap{ display:flex; justify-content:center; margin-bottom:14px; }
  #qr-canvas-wrap img, #qr-canvas-wrap canvas{ border-radius:8px; box-shadow:0 8px 20px rgba(16,13,12,.18); max-width:100%; }
  .qr-intro{ font-size:.8rem; color:var(--brown-600); margin-bottom:2px; }

  /* ---- Footer ---- */
  footer{
    padding:60px 22px 90px; text-align:center; color:var(--brown-600);
  }
  footer .script{ font-size:2.4rem; color:var(--brown-700); }
  footer .fam{ margin-top:10px; letter-spacing:1px; }
  footer .thanks{ margin-top:26px; font-size:.85rem; opacity:.8; }

  /* ---- Side dots nav (desktop) ---- */
  .dots{
    position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:40;
    display:flex; flex-direction:column; gap:14px;
  }
  .dots a{
    width:9px; height:9px; border-radius:50%; background:rgba(179,24,42,.25);
    border:1px solid var(--gold); transition:all .3s ease; display:block;
  }
  .dots a.active{ background:var(--gold); transform:scale(1.3); }
  @media (max-width: 760px){ .dots{ display:none; } }

  @media (max-width:640px){
    .rsvp-row{ grid-template-columns:1fr; }
    section{ padding:70px 16px; }
  }