/* =========================================================
   BASE & RÉGLAGES GÉNÉRAUX
   - Reset léger
   - Variables de couleur (palette mariage)
   - Style du body (centrage de la carte + fond)
   ========================================================= */
   @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Domine&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700;800&display=swap');

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   /* ---------- Palette mariage (festive & élégante) ---------- */
   :root {
     /* Fond & surfaces */
     --bg:           #fdfaf6;  /* ivoire doux, plus chaleureux que blanc pur */
     --surface:      #ffffff;  /* cartes / container */
   
     /* Texte */
     --text:         #3e3e3b;  /* texte principal (plus chic que #4a4a4a) */
     --text-muted:   #6f6f6b;  /* texte secondaire (dates, explications) */
   
     /* Identité & accents */
     --green-line:   #4caf50;  /* ligne de timeline, bordures marqueurs */
     --green-line: #3e3e3b !important;
     --green-title:  #c89d29;  /* titres (H2, H3 timeline) */
     --gold:         #c89d29;  /* doré champagne – “On se dit OUI.” */
     --rose:         #b22234;  /* touche romantique (icônes cœur, accents doux) */
   
     /* UI neutres */
     --border:       rgba(0,0,0,0.10);  /* bordures douces */
     --rule:         rgba(0,0,0,0.20);  /* petite ligne décorative */
     --shadow-1:     rgba(17,17,26,0.1);
   }
   
   /* ---------- Body ---------- */
   body {
     min-height: 100vh;
     /* font-family: 'Lato', sans-serif; */
     font-family: 'Raleway', sans-serif;
     background-color: var(--bg);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: auto;
     padding-block: 48px;
     position: relative;
     font-size: 16px;
     line-height: 1.6;
   }
   
   /* =========================================================
      SLIDESHOW (optionnel)
      - Plein écran, centré, non cliquable
      - Images en N&B doux (pas 100% gris)
      ========================================================= */
   #slideshow {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 0;
     pointer-events: none;
     overflow: hidden;
   }
   .slide {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     max-width: 90vw;
     max-height: 90vh;
     object-fit: contain;
     display: block;
     opacity: 0;
     background-color: #fff;
     will-change: transform, opacity;
   }
   /* Photos du slideshow : noir & blanc doux, un peu de contraste */
   #slideshow .slide {
     filter: grayscale(75%) saturate(0.9) contrast(1.05);
     -webkit-filter: grayscale(75%) saturate(0.9) contrast(1.05);
   }
   
   /* =========================================================
      CONTAINER (carte principale)
      ========================================================= */
   .container {
     position: relative;
     z-index: 1;
     background: var(--surface-a);
     width: min(90vw, 900px);
     padding: 24px 28px;
     border-radius: 12px;
     text-align: center;
     opacity: 0; /* rendu visible via GSAP */
     box-shadow:
       var(--shadow-1) 0 1px 0,
       var(--shadow-1) 0 8px 24px,
       var(--shadow-1) 0 16px 48px;
     margin-block: 24px;
     overflow: visible;
   }
   
   /* =========================================================
      TITRES & TEXTES
      ========================================================= */
   .container h1,
   .timeline .title,
   .practical-info h2 {
     /* font-family: 'Playfair Display', serif; */
     font-family: 'Domine', serif;
     font-weight: 700;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     margin-bottom: 24px !important;
   }

   #bigtitle {
     color: var(--gold);
   }
   
   .container h1 {
     font-size: 3.5rem;
     margin-bottom: 0.5rem;
   }
   
   .container > p:first-of-type {
     margin-top: 2px;
     margin-bottom: 20px;
   }
   
   .container p {
     font-size: 1.1rem;
     color: var(--text);
     margin: 10px 0;
   }
   
   /* Sous-titres (ex: “Pauline & Kévin”, “Programme de la journée”) */
   .container p.subtitle {
     margin: 20px 0 20px;
     /* color: var(--green-title); */
     /* font-weight: 700; */
   }
   
   .subtitle.subtitle--with-line {
    font-size: 1.3rem;
    margin-top: 2.5rem !important;
    font-weight: 600;
  }

  #first-date{
    font-weight: 600;
  }

   /* Ligne décorative sous “Programme de la journée” */
   .subtitle--with-line::after {
     content: "";
     display: block;
     width: 40%;
     height: 1px;
     background: var(--rule);
     margin: 6px auto 0;
   }
   
   /* =========================================================
      TIMELINE — STRUCTURE GLOBALE
      ========================================================= */
   .timeline {
     position: relative;
     margin-top: 72px;
     padding: 24px 0;
   }
   .timeline::before {
     content: "";
     position: absolute;
     left: 50%;
     top: 0;
     transform: translateX(-50%);
     width: 6px;
     height: var(--lineGrow, 100%);
     background: var(--green-line);
     border-radius: 3px;
     z-index: 0;
   }
   
   /* =========================================================
      TIMELINE — ÉLÉMENTS
      - Grille à 3 colonnes : gauche | cœur | droite (desktop)
      ========================================================= */
   .timeline-item {
     display: grid;
     grid-template-columns: 1fr 56px 1fr;
     align-items: center;
     margin-bottom: 28px;
   }
   .timeline-item:last-child {
     margin-bottom: 0;
   }
   
   /* Zone texte selon le côté (gauche/droite) */
   .timeline-item.left .timeline-content {
     grid-column: 1 / 2;
     text-align: right;
     padding: 10px 18px 10px 0;
   }
   .timeline-item.right .timeline-content {
     grid-column: 3 / 4;
     text-align: left;
     padding: 10px 0 10px 18px;
   }
   
   /* Marqueur (cœur) centré dans la colonne du milieu */
   .timeline-item .marker {
     display: flex;
     align-items: center;
     justify-content: center;
     height: auto;
     padding: 6px 0;
     position: relative;
     z-index: 1;
     grid-column: 2;
     grid-row: 1;
   }
   .heart-dot {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 42px;
     height: 42px;
     background: var(--surface);
     border: 2px solid var(--green-line);
     border-radius: 50%;
     box-shadow: 0 2px 6px rgba(0,0,0,.08);
   }
   .heart-dot .fi {
     display: block;
     font-size: 20px;
     color: var(--rose); /* cœur dans un rose poudré chic */
     line-height: 1;
     position: relative;
     top: 2px;
   }
   
   /* Icônes spécifiques */
   .timeline-item .marker .heart-dot .icon-beer {
     color: #f5a623; /* ambre bière */
     margin-top: -4px;
   }
   .timeline-item .marker .heart-dot .icon-meal {
     color: #8c6d3c; /* brun doré repas */
     margin-top: -2px;
   }
   
   /* Typographies de la timeline */
   .timeline .title {
     /* font-family: 'Playfair Display', serif; */
     font-family: 'Domine', serif;
     font-size: 1.6rem;
     color: var(--green-title);
     margin: 0 0 4px 0;
   }
   .timeline .date {
     color: var(--text-muted);
     font-style: italic;
     margin: 0 0 6px 0;
   }
   .timeline .desc {
     color: var(--text);
     margin: 0;
     line-height: 1.45;
     font-size: 1rem;
   }
   
   /* =========================================================
      CALL TO ACTION
      ========================================================= */
   .container p.cta-line {
     /* margin: 58px 0 24px; */
     margin: 70px 0;
     font-size: 1.6rem;
     font-weight: 600;
     color: var(--text);
     text-align: center;
     letter-spacing: 0.2px;
   }
   
   /* =========================================================
      INFOS PRATIQUES
      ========================================================= */
   .practical-info {
     margin-top: 60px;
     padding: 16px 18px;
     text-align: left;
     background: rgba(255,255,255,0.92);
     border: 1px solid var(--border);
     border-radius: 10px;
   }
   .practical-info h2 {
     font-family: 'Playfair Display', serif;
     font-size: 2rem;
     color: var(--green-title);
     margin: 0 0 8px 0;
   }
   .practical-info p {
     margin: 0 0 10px 0;
     color: var(--text);
   }
   .practical-list {
     margin: 0;
     padding-left: 1.1rem;
     color: var(--text);
     line-height: 1.45;
   }
   .practical-list li {
     margin: 6px 0;
   }
   
   /* =========================================================
      iOS (affinage rendu)
      ========================================================= */
   .ios .container h1,
   .ios .timeline .title,
   .ios .practical-info h2 {
     font-family: 'DM Serif Display', serif;
     /* font-weight: 400; */
     letter-spacing: 0.2px;
   }
   
   /* =========================================================
      RESPONSIVE
      ========================================================= */
   @media (max-width: 700px) {
     .container {
       width: min(94vw, 900px);
       padding: 20px;
     }
   
     .timeline-item {
       grid-template-columns: 32px 1fr; /* cœur | texte */
     }
   
     .timeline::before {
       left: 14px; /* centré dans la colonne des cœurs */
       transform: none;
     }
   
     .timeline-item .marker {
       grid-column: 1 / 2;
       justify-content: center;
       align-items: center;
     }
   
     .heart-dot {
       width: 32px;
       height: 32px;
       border-width: 2px;
     }
     .heart-dot .fi {
       font-size: 16px;
       line-height: 1;
       display: block;
     }
   
     .timeline-item.left .timeline-content,
     .timeline-item.right .timeline-content {
       grid-column: 2 / 3 !important;
       text-align: left !important;
       padding: 8px 12px;
       padding-left: 14px;
     }
   
     .timeline .title { font-size: 1.5rem; }
     .timeline .desc  { line-height: 1.4;  }
   
     .container p.cta-line {
       margin: 60px 0;
       font-size: 1.4rem;
     }
   }
   
   /* Mobile : garder le h1 sur une seule ligne sans déborder */
   @media (max-width: 480px) {
     .container {
       padding: 20px;
     }
     .container h1 {
       font-size: clamp(2.5rem, 6.5vw, 2.2rem);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 100%;
     }
   }