*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --beige:       #F5EFE0;
      --beige-dark:  #E8DCC8;
      --beige-light: #FAF6EE;
      --rouge:       #8B1A1A;
      --rouge-light: #C0392B;
      --blanc:       #FFFFFF;
      --noir:        #1A1208;
      --gris:        #6B6355;
      --or:          #C9A84C;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Jost', sans-serif;
      background: var(--beige-light);
      color: var(--noir);
      overflow-x: hidden;
    }

    /* ─── NAVIGATION ─── */
    nav {
      position: fixed; top: 0; width: 100%; z-index: 100;
      width: 100%;
      background: rgba(245,239,224,0.92);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--beige-dark);
      padding: 0.8rem 2rem;
      display: flex; justify-content: center; gap: 2.5rem;
    }
    nav a {
      font-family: 'Jost', sans-serif;
      font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--gris); text-decoration: none;
      transition: color 0.3s;
    }
    nav a:hover { color: var(--rouge); }

    /* ─── HERO ─── */
    .hero {
      min-height: -100vh;
      background:
        linear-gradient(to bottom, rgba(26,18,8,0.35) 0%, rgba(26,18,8,0.1) 60%, rgba(245,239,224,0) 100%),
        url('img/img3.jpg')
        center/cover no-repeat;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center; padding: 7rem 1.5rem 4rem;
      position: relative;
    }
    .hero::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
      background: linear-gradient(to bottom, transparent, var(--beige-light));
    }

    .hero-tag {
      font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--or); margin-bottom: 1.5rem;
      animation: fadeDown 1s ease both;
    }
    .hero h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(3rem, 8vw, 6.5rem);
      font-weight: 300; color: var(--blanc);
      line-height: 1.05; letter-spacing: 0.02em;
      animation: fadeDown 1s 0.2s ease both;
    }
    .hero h1 em { font-style: italic; color: var(--beige); }
    .hero-sep {
      width: 60px; height: 1px; background: var(--or);
      margin: 1.8rem auto; animation: fadeDown 1s 0.4s ease both;
    }
    .hero-date {
      font-size: 1rem; letter-spacing: 0.12em; color: var(--beige);
      animation: fadeDown 1s 0.6s ease both;
    }
    .hero-lieu {
      font-size: 0.85rem; color: rgba(255,255,255,0.7);
      margin-top: 0.4rem; animation: fadeDown 1s 0.8s ease both;
    }
    .btn-hero {
      margin-top: 2.5rem;
      display: inline-block; padding: 0.9rem 2.5rem;
      border: 1px solid var(--or); color: var(--blanc);
      font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
      text-decoration: none; background: transparent;
      transition: all 0.3s; animation: fadeDown 1s 1s ease both;
      cursor: pointer;
    }
    .btn-hero:hover { background: var(--or); color: var(--noir); border-color: var(--or); }

    /* ─── COUNTDOWN ─── */
    #countdown-section {
      background: var(--rouge);
      padding: 4rem 1.5rem; text-align: center;
    }
    #countdown-section h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem; letter-spacing: 0.25em; text-transform: uppercase;
      color: rgba(255,255,255,0.6); margin-bottom: 2rem;
    }
    .countdown-grid {
      display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
    }
    .countdown-unit {
      min-width: 90px;
    }
    .countdown-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.8rem, 7vw, 5rem);
      font-weight: 300; color: var(--blanc);
      line-height: 1;
    }
    .countdown-label {
      font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(255,255,255,0.5); margin-top: 0.4rem;
    }
    .countdown-sep {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3rem; color: rgba(255,255,255,0.3);
      align-self: flex-start; padding-top: 0.5rem;
    } radio-group


    .local-time {
        color: #ffffff;
        font-family: 'Jost', sans-serif;
        font-size: 0.95rem;
        margin-top: 0.6rem;
        text-align: center;
        opacity: 0.95;
    }

    /* ─── SECTIONS COMMUNES ─── */
    section { padding: 5rem 1.5rem; width: 100%}
    .section-inner { max-width: 960px; margin: 0 auto; }
    .section-label {
      font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--or); text-align: center; margin-bottom: 0.8rem;
    }
    .section-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 300; text-align: center; color: var(--noir);
      margin-bottom: 1rem;
    }
    .section-title em { font-style: italic; color: var(--rouge); }
    .ornement {
      width: 40px; height: 1px; background: var(--or);
      margin: 1.5rem auto 3rem;
    }

    /* ─── PHOTOS (carrousel) ─── */
    #photos { background: var(--beige); }
    .carousel-wrap { position: relative; overflow: hidden; border-radius: 2px; }
    .carousel-track {
      display: flex; transition: transform 0.6s cubic-bezier(0.77,0,0.175,1);
    }
    .carousel-track img {
      min-width: 100%; height: 520px; object-fit: cover;
      flex-shrink: 0;
    }radio-group
    .carousel-btn {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(26,18,8,0.5); border: none; color: #fff;
      font-size: 1.5rem; width: 44px; height: 44px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background 0.3s;
    }
    .carousel-btn:hover { background: var(--rouge); }
    .carousel-btn.prev { left: 1rem; }
    .carousel-btn.next { right: 1rem; }
    .carousel-dots {
      display: flex; justify-content: center; gap: 8px; margin-top: 1.2rem;
    }
    .dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--beige-dark); border: none; cursor: pointer; padding: 0;
      transition: background 0.3s;
    }
    .dot.active { background: var(--rouge); }

    /* Photo caption */
    .photo-caption {
      text-align: center; margin-top: 1.2rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic; font-size: 1.1rem; color: var(--gris);
    }

    /* ─── PROGRAMME ─── */
    #programme { background: var(--beige-light); }
    .programme-list {
      list-style: none; max-width: 500px; margin: 0 auto;
    }
    .programme-list li {
      display: flex; align-items: flex-start; gap: 1.5rem;
      padding: 1rem 0; border-bottom: 1px solid var(--beige-dark);
    }
    .programme-list li:last-child { border-bottom: none; }
    .prog-heure {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem; font-weight: 300; color: var(--rouge);
      min-width: 70px;
    }
    .prog-event {
      font-size: 0.95rem; color: var(--noir); padding-top: 0.3rem;
    }

    /* ─── LIEU ─── */
    #lieu { background: var(--beige); }
    .lieu-card {
      background: var(--blanc);
      border: 1px solid var(--beige-dark);
      padding: 2.5rem; text-align: center; max-width: 500px; margin: 0 auto;
    }
    .lieu-icon { font-size: 1.8rem; margin-bottom: 1rem; color: var(--or); }
    .lieu-nom {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.9rem; font-weight: 300; color: var(--rouge); margin-bottom: 0.5rem;
    }
    .lieu-adresse { font-size: 0.9rem; color: var(--gris); line-height: 1.7; }
    .btn-maps {
      display: inline-block; margin-top: 1.5rem; padding: 0.7rem 2rem;
      border: 1px solid var(--rouge); color: var(--rouge);
      font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
      text-decoration: none; transition: all 0.3s;
    }
    .btn-maps:hover { background: var(--rouge); color: #fff; }

    .dress-tag {
      margin-top: 2rem; text-align: center;
      font-size: 0.8rem; letter-spacing: 0.1em; color: var(--gris);
    }
    .dress-tag strong { color: var(--rouge); }

    /* ─── RSVP ─── */
    #rsvp { background: var(--noir); }
    #rsvp .section-title { color: var(--beige); }
    #rsvp .section-label { color: var(--or); }
    #rsvp .ornement { background: var(--rouge); }

    .rsvp-note {
      text-align: center; color: rgba(245,239,224,0.6);
      font-size: 0.9rem; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto;
    }
    .rsvp-form-wrap {
      max-width: 600px; margin: 0 auto;
    }
    .form-group { margin-bottom: 1.2rem; }
    .form-group label {
      display: block; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--or); margin-bottom: 0.5rem;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%; padding: 0.85rem 1rem;
      background: rgba(245,239,224,0.07);
      border: 1px solid rgba(245,239,224,0.2);
      color: var(--beige); font-family: 'Jost', sans-serif; font-size: 0.95rem;
      outline: none; transition: border-color 0.3s;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: rgba(245,239,224,0.3); }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus { border-color: var(--or); }
    .form-group select option { background: var(--noir); }
    .form-group textarea { height: 90px; resize: vertical; }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

    
    .radio-group { display: flex; gap: 1.5rem; margin-top: 0.3rem; margin-right: 30%;}
    .radio-group label {
      display: flex; align-items: center; gap: 0.5rem;
      font-size: 0.9rem; letter-spacing: 0; text-transform: none;
      color: var(--beige); cursor: pointer;
    }
    .radio-group input[type=radio] { accent-color: var(--rouge); }

    .btn-rsvp {
      width: 100%; padding: 1rem;
      background: var(--rouge); color: var(--blanc);
      border: none; font-family: 'Jost', sans-serif;
      font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
      cursor: pointer; transition: background 0.3s; margin-top: 0.5rem;
    }
    .btn-rsvp:hover { background: var(--rouge-light); }

    #form-success {
      display: none; text-align: center; padding: 2rem;
      color: var(--beige);
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem; font-style: italic;
    }

    /* ─── FOOTER ─── */
    footer {
      background: var(--beige-dark);
      padding: 3rem 1.5rem; text-align: center;
      width: 100%;
    }
    .footer-names {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem; font-weight: 300; color: var(--rouge);
      margin-bottom: 0.5rem;
    }
    footer p { font-size: 0.78rem; color: var(--gris); letter-spacing: 0.1em; }

    /* ─── ANIMATIONS ─── */
    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-in {
      opacity: 0; transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .fade-in.visible { opacity: 1; transform: translateY(0); }

    @media (max-width: 600px) {
      .form-row { grid-template-columns: 1fr; }
      nav { gap: 1.2rem; padding: 0.8rem 1rem; flex-wrap: wrap; }
      .countdown-sep { display: none; }
     }