/* ===== CSS VARIABLES ===== */
:root {
    --ivoire: #F8F6F1;
    --or: #C9A84C;
    --or-light: #E8D48A;
    --or-pale: #F4EDD0;
    --navy: #0E2146;
    --navy-mid: #1A3A6B;
    --navy-light: #2B5499;
    --violet: #5B3A8A;
    --violet-light: #8B5CF6;
    --bleu-light: #4A90D9;
    --blanc: #FFFFFF;
    --gris: #6B6B6B;
    --dark: #0C1B38;
    --font-title: 'Cormorant Garamond', serif;
    --font-body: 'Lato', sans-serif;
    --shadow-deep: 0 20px 60px rgba(14,33,70,0.15);
  }
  
  /* ===== RESET ===== */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--ivoire);
    color:var(--dark);
    font-family:var(--font-body);
    font-weight:300;
    overflow-x:hidden;
    cursor:none;
  }
  img{max-width:100%}
  a{text-decoration:none;color:inherit}
  
  /* ===== CUSTOM CURSOR ===== */
  #cursor{
    position:fixed;width:28px;height:28px;
    border:2px solid var(--or);
    border-radius:50%;pointer-events:none;z-index:99999;
    transform:translate(-50%,-50%);
    transition:width .3s,height .3s,background .3s;
    box-shadow:0 0 10px rgba(201,168,76,0.6);
  }
  #cursor-dot{
    position:fixed;width:6px;height:6px;
    background:var(--or);border-radius:50%;
    pointer-events:none;z-index:99999;
    transform:translate(-50%,-50%);
  }
  
  /* ===== SILK OVERLAY ===== */
  #silk-overlay{
    position:fixed;inset:0;
    background:linear-gradient(135deg,var(--ivoire) 0%,var(--or-pale) 40%,#E8EEF8 80%,var(--ivoire) 100%);
    z-index:99998;display:flex;align-items:center;justify-content:center;
    transition:opacity 1.2s ease,visibility 1.2s ease;
  }
  #silk-overlay.hidden{opacity:0;visibility:hidden}
  .silk-loader{display:flex;flex-direction:column;align-items:center;gap:18px}
  .silk-loader svg{animation:pulse-glow 1.5s ease-in-out infinite}
  .silk-loader p{
    font-family:var(--font-title);font-size:1.2rem;
    color:var(--or);letter-spacing:0.3em;
    animation:fade-text 1.5s ease-in-out infinite;
  }
  @keyframes pulse-glow{0%,100%{opacity:.6;filter:drop-shadow(0 0 8px var(--or))}50%{opacity:1;filter:drop-shadow(0 0 25px var(--or))}}
  @keyframes fade-text{0%,100%{opacity:.4}50%{opacity:1}}
  
  /* ===== PETAL CANVAS ===== */
  #petal-canvas{position:absolute;inset:0;pointer-events:none;z-index:10;width:100%;height:100%}
  
  /* ===== HEARTS ===== */
  .heart-burst{
    position:fixed;pointer-events:none;z-index:8500;
    font-size:1.4rem;color:var(--violet);
    animation:heart-rise 1.5s ease-out forwards;
    user-select:none;
  }
  @keyframes heart-rise{
    0%{transform:translateY(0) scale(1);opacity:1}
    100%{transform:translateY(-120px) scale(.3);opacity:0}
  }
  
  /* ===== HERO ===== */
  #hero{
    position:relative;min-height:100vh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    overflow:hidden;text-align:center;padding:4rem 2vw;
    background:linear-gradient(180deg,#F8F6F1 0%,#EEF2FA 60%,#F8F6F1 100%);
  }
 
  #hero::before{
    content:'';position:absolute;inset:0;z-index:2;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(37,99,171,0.04) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(91,58,138,0.04) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(201,168,76,0.03) 0%, transparent 60%);
    pointer-events:none;
  }
  
  .bismillah{
    font-family:var(--font-title);
    font-size:clamp(1rem,2vw,1.3rem);
    color:var(--or);letter-spacing:0.15em;
    font-style:italic;opacity:0;
    animation:fade-in-up 1s ease 0.5s forwards;
  }
  
  .hero-ornament{display:flex;align-items:center;gap:20px;margin-bottom:.5rem}
  .ornament-line{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--or));animation:expand 2s ease forwards}
  .ornament-line.right{background:linear-gradient(90deg,var(--or),transparent)}
  @keyframes expand{from{width:0}to{width:80px}}
  .ornament-diamond{width:8px;height:8px;background:var(--or);transform:rotate(45deg);animation:spin-slow 8s linear infinite}
  @keyframes spin-slow{to{transform:rotate(405deg)}}
  
  .hero-layout-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(200px, 360px) auto minmax(200px, 360px);
    column-gap: clamp(20px, 4vw, 80px);
    row-gap: 1.2rem;
    align-items: center;
    justify-items: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
  }
  
  .item-text, .hero-ornament, .crescent-container { 
    grid-column: 2; 
    justify-content: center;
  }
  
  .hero-photo {
    width: 100%;
    aspect-ratio: 3/4.2; 
    opacity: 0; 
    /* On a retiré l'ancien 'animation: fade-in-up' ici */
  }

  .photo-left {
    grid-column: 1;
    grid-row: 1 / 10;
    /* Animation depuis la gauche avec un délai de 1.5s */
    animation: fade-in-left 3.5s cubic-bezier(0.22, 1, 0.36, 1) 3.5s forwards;
  }

  .photo-right {
    grid-column: 3;
    grid-row: 1 / 10;
    /* Animation depuis la droite avec un délai de 1.5s */
    animation: fade-in-right 3.5s cubic-bezier(0.22, 1, 0.36, 1) 3.5s forwards;
  }

  /* --- PROTECTION DES IMAGES --- */
img {
    /* Empêche la sélection de l'image */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
  
    /* Empêche l'appui long sur iOS/iPhone pour sauvegarder l'image */
    -webkit-touch-callout: none;
  
    /* Rend l'image "intouchable" (les clics passent au travers) */
    pointer-events: none;
  }

  /* --- Création des animations personnalisées --- */
  
  @keyframes fade-in-left {
    0% { 
      opacity: 0; 
      transform: translateX(-100px); /* Pars de la gauche */
    }
    100% { 
      opacity: 1; 
      transform: translateX(0); /* Revient à sa place normale */
    }
  }

  @keyframes fade-in-right {
    0% { 
      opacity: 0; 
      transform: translateX(100px); /* Pars de la droite */
    }
    100% { 
      opacity: 1; 
      transform: translateX(0); /* Revient à sa place normale */
    }
  }
  .photo-frame {
    width: 100%; height: 100%;
    border-radius: 16px; overflow: hidden;
    box-shadow: var(--shadow-deep);
    background-color: var(--or-pale);
    border: 2px solid rgba(201,168,76,0.25);
  }
  .photo-frame img {
    width: 100%; height: 100%; object-fit: cover;
  }
  
  .crescent-container{position:relative;margin-bottom:1rem}
  .crescent-halo{
    position:absolute;inset:-30px;border-radius:50%;
    background:radial-gradient(circle,rgba(201,168,76,0.25) 0%,rgba(91,58,138,0.1) 50%,transparent 70%);
    animation:halo-pulse 3s ease-in-out infinite;
  }
  @keyframes halo-pulse{0%,100%{transform:scale(.9);opacity:.5}50%{transform:scale(1.2);opacity:1}}
  .crescent-svg{
    filter:drop-shadow(0 0 15px rgba(201,168,76,0.8));
    animation:crescent-glow 4s ease-in-out infinite;
  }
  @keyframes crescent-glow{
    0%,100%{filter:drop-shadow(0 0 10px rgba(201,168,76,.5))}
    50%{filter:drop-shadow(0 0 30px rgba(201,168,76,1)) drop-shadow(0 0 50px rgba(91,58,138,.4))}
  }
  
  .hero-names-stacked {
    display: flex; 
    justify-content: center;
    align-items: center; 
    /* On le fait apparaître plus tôt pour voir le début de la frappe */
    opacity: 0; 
    animation: fade-in-up 0.5s ease 1s forwards; 
    text-align: center; /* Essentiel pour centrer avec les <br> */
  }
  
  .hero-names-stacked .name {
    font-family: var(--font-title);
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 300; 
    color: var(--dark);
    line-height: 1.1; 
    letter-spacing: .05em;
  }

  
  /* --- NOUVEAU : Effet Typewriter --- */
  
  /* Le curseur qui clignote */
  #tw-cursor {
    font-family: var(--font-title);
    font-size: clamp(3.5rem, 6vw, 6rem);
    color: var(--or);
    font-weight: 300;
    animation: blink 0.8s infinite;
  }
  
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
  
  /* Le coeur stylisé qui remplace votre ancien SVG */
  .ampersand {
    display: inline-block;
    color: var(--or); /* Couleur dorée */
    font-size: 0.7em; /* Un peu plus petit que les noms */
    margin: 10px 0;
    filter: drop-shadow(0 0 10px rgba(201,168,76,0.4));
    animation: heart-beat 3s ease-in-out infinite; /* Garde le battement de coeur */
  }
  
  .heart-drawn {
    width: 65px; height: 65px;
    filter: drop-shadow(0 0 15px rgba(201,168,76,0.3));
    animation: heart-beat 3s ease-in-out infinite;
  }
  @keyframes heart-beat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
  
  .hero-subtitle{
    font-family:var(--font-title);font-style:italic;
    font-size:clamp(1rem,2.5vw,1.4rem);color:var(--gris);
    letter-spacing:.2em;opacity:0;animation:fade-in-up 1s ease 2s forwards;
  }
  .hero-date{
    font-family:var(--font-title);font-size:clamp(1.1rem,2.5vw,1.5rem);
    color:var(--or);letter-spacing:.3em;opacity:0;
    animation:fade-in-up 1s ease 2.5s forwards;
  }
  .hero-date {
    font-family: var(--font-title);
    font-size: clamp(1rem, 2.5vw, 1.5rem); /* Légèrement réduit au minimum (1rem au lieu de 1.1rem) */
    color: var(--or);
    letter-spacing: 0.25em; /* Légèrement réduit pour aider sur mobile (0.25 au lieu de 0.3) */
    opacity: 0;
    animation: fade-in-up 1s ease 2.5s forwards;
    
    /* NOUVEAU : Gestion flexible pour mobile */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    line-height: 2; /* Ajoute de l'espace si ça passe sur 2 lignes */
    padding: 0 10px;
  }
  
  .hero-date .date-sep {
    margin: 0 10px; /* Réduit un peu la marge */
    opacity: 0.5;
  }
  @keyframes fade-in-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  
  .arabesque-band{
    position:absolute;bottom:0;left:0;right:0;height:60px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.4' opacity='0.3'%3E%3Cpolygon points='30,2 58,16 58,44 30,58 2,44 2,16'/%3E%3Cpolygon points='30,10 50,20 50,40 30,50 10,40 10,20'/%3E%3Cline x1='30' y1='2' x2='30' y2='58'/%3E%3Cline x1='2' y1='30' x2='58' y2='30'/%3E%3C/g%3E%3C/svg%3E") repeat-x center/60px;
    opacity:.4;z-index:2;pointer-events:none;
  }

  /* Suppression de l'ancienne classe .hero-date si vous l'utilisez plus */
.hero-date-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    animation: fade-in-up 1s ease 2.5s forwards;
    margin-top: 1rem;
  }
  
  /* Container qui regroupe la barre et le texte */
.hero-date-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Espace entre la barre dorée et le texte */
    opacity: 0;
    animation: fade-in-up 1s ease 2.5s forwards;
    margin-top: 15px;
    grid-column: 2; /* Garde l'élément centré dans votre grille */
  }
  
  /* Le style du texte (comme sur la photo) */
  .hero-date-chic {
    font-family: var(--font-title);
    font-style: italic; /* Applique l'italique */
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: #7a766c; /* Un gris-brun doux similaire à votre photo */
    letter-spacing: 0.25em; /* L'espacement large caractéristique */
    text-align: center;
  }
  
  /* Le point de séparation */
  .hero-date-chic .sep {
    margin: 0 15px;
    font-size: 0.8em;
    opacity: 0.5;
    font-style: normal; /* Empêche le point d'être penché */
  }

  .date-main {
    display: flex;
    align-items: center;
    gap: 15px; /* Espace autour du losange */
    font-family: var(--font-title);
    font-size: clamp(1rem, 3vw, 1.3rem);
    color: var(--or);
    text-transform: uppercase; /* Essentiel pour le grand espacement */
    letter-spacing: 0.25em; /* L'espacement rend bien grâce aux majuscules */
  }
  
  /* Le petit point de séparation transformé en losange élégant */
  .date-diamond {
    width: 5px;
    height: 5px;
    background-color: var(--or);
    transform: rotate(45deg);
    opacity: 0.6;
  }
  
  .date-location {
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    color: var(--gris);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  /* ===== SCROLL INDICATOR (MOUSE) ===== */
.scroll-indicator {
    position: absolute;
    bottom: 40px; /* Légèrement remonté pour respirer */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    animation: fade-in 1s ease 3.5s forwards;
  }
  
  .scroll-indicator span {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    color: #8b8273; /* Couleur douce basée sur ton image */
    text-transform: uppercase;
    margin-left: 0.35em; /* Compense le letter-spacing pour un centrage parfait */
  }
  
  .mouse-icon {
    width: 24px;
    height: 38px;
    border: 1.5px solid #a39783; /* Couleur de bordure élégante */
    border-radius: 20px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
  }
  
  .wheel {
    width: 4px;
    height: 8px;
    background-color: #d18f68; /* Couleur terracotta de l'image */
    border-radius: 2px;
    animation: scroll-wheel 1.8s ease-in-out infinite;
  }
  
  @keyframes scroll-wheel {
    0% { transform: translateY(0); opacity: 1; }
    30% { opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
  }
  
  @keyframes fade-in { to { opacity: 1; } }
  @keyframes fade-in{to{opacity:1}}
  
  /* ===== SHARED SECTION ===== */
  section{position:relative;z-index:2}
  .section-inner{max-width:1100px;margin:0 auto;padding:0 2rem}
  .section-title{
    font-family:var(--font-title);font-size:clamp(2.2rem,5vw,3.5rem);
    font-weight:300;color:var(--navy-mid);text-align:center;margin-bottom:.5rem;
  }
  .section-divider{
    display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:3rem;
  }
  .section-divider span{font-size:1.2rem;color:var(--or)}
  .section-divider::before,.section-divider::after{
    content:'';flex:1;max-width:120px;height:1px;
    background:linear-gradient(90deg,transparent,var(--or-light));
  }
  .section-divider::after{background:linear-gradient(90deg,var(--or-light),transparent)}
  
  /* Reveal */
  .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
  .reveal.revealed{opacity:1;transform:translateY(0)}
  .reveal-left{opacity:0;transform:translateX(-50px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
  .reveal-right{opacity:0;transform:translateX(50px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
  .reveal-left.revealed,.reveal-right.revealed{opacity:1;transform:translateX(0)}
  
  /* ===== COUNTDOWN ===== */
  #countdown{
    padding:100px 0;
    background:linear-gradient(135deg,var(--navy) 0%,#071230 50%,var(--navy) 100%);
    position:relative;overflow:hidden;
  }
  #countdown::before{
    content:'';position:absolute;inset:0;
    background:
      repeating-linear-gradient(30deg,rgba(201,168,76,.02) 0,rgba(201,168,76,.02) 1px,transparent 1px,transparent 30px),
      repeating-linear-gradient(-30deg,rgba(91,58,138,.02) 0,rgba(91,58,138,.02) 1px,transparent 1px,transparent 30px);
  }
  #countdown::after{
    content:'';position:absolute;inset:0;
    background-image:
      radial-gradient(circle at 0% 0%,rgba(201,168,76,.08) 0%,transparent 30%),
      radial-gradient(circle at 100% 0%,rgba(91,58,138,.08) 0%,transparent 30%),
      radial-gradient(circle at 100% 100%,rgba(201,168,76,.08) 0%,transparent 30%),
      radial-gradient(circle at 0% 100%,rgba(91,58,138,.08) 0%,transparent 30%);
    pointer-events:none;
  }
  .countdown-inner{text-align:center;position:relative;z-index:2}
  .countdown-title{
    font-family:var(--font-title);font-size:clamp(1.5rem,4vw,2.5rem);
    color:var(--or-light);font-style:italic;margin-bottom:.5rem;letter-spacing:.1em;
  }
  .countdown-subtitle{
    font-family:var(--font-body);font-size:.8rem;letter-spacing:.25em;
    color:rgba(201,168,76,.4);text-transform:uppercase;margin-bottom:3rem;
  }
  .countdown-blocks{display:flex;justify-content:center;align-items:center;gap:clamp(10px,3vw,40px);flex-wrap:wrap}
  .countdown-block{display:flex;flex-direction:column;align-items:center;gap:12px}
  .flip-clock{position:relative;width:clamp(70px,15vw,110px);height:clamp(80px,18vw,130px);perspective:400px}
  .flip-card{
    width:100%;height:100%;
    background:linear-gradient(180deg,#071230 0%,#0E1F45 100%);
    border-radius:8px;border:1px solid rgba(201,168,76,.3);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-title);font-size:clamp(2.5rem,8vw,4.5rem);
    font-weight:600;color:var(--or-light);
    box-shadow:0 8px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(201,168,76,.2);
    position:relative;overflow:hidden;
  }
  .flip-card::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(201,168,76,.2)}
  .flip-card.flipping{animation:flip-anim .4s ease-in-out}
  @keyframes flip-anim{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
  .flip-label{font-family:var(--font-body);font-size:.7rem;letter-spacing:.25em;color:rgba(201,168,76,.6);text-transform:uppercase}
  .countdown-sep{font-family:var(--font-title);font-size:3rem;color:var(--or);opacity:.4;margin-bottom:30px;animation:sep-pulse 2s ease-in-out infinite}
  @keyframes sep-pulse{0%,100%{opacity:.2}50%{opacity:.8}}
  .countdown-done{font-family:var(--font-title);font-size:2rem;color:var(--or-light);font-style:italic;text-align:center;padding:2rem}
  
  /* ===== CÉRÉMONIE ===== */
  #ceremonie{
    padding:100px 0;
    background:linear-gradient(180deg,var(--or-pale) 0%,#EDF1FB 50%,var(--ivoire) 100%);
  }
  .ceremonie-card{
    background:var(--blanc);border-radius:20px;overflow:hidden;
    box-shadow:var(--shadow-deep);display:grid;
    grid-template-columns:1fr 1fr;min-height:420px;
  }
  .mosque-visual{
    background:linear-gradient(135deg,var(--navy) 0%,#071230 100%);
    display:flex;align-items:center;justify-content:center;
    padding:40px;position:relative;overflow:hidden;
  }
  .mosque-visual::before{
    content:'';position:absolute;inset:0;
    background:
      radial-gradient(circle at 50% 30%,rgba(201,168,76,.12) 0%,transparent 60%),
      radial-gradient(circle at 30% 70%,rgba(91,58,138,.1) 0%,transparent 50%);
  }
  .mosque-visual::after{
    content:'';position:absolute;inset:8px;
    border:1px solid rgba(201,168,76,.15);
    border-radius:4px;pointer-events:none;
  }
  .mosque-svg-wrap{position:relative;z-index:2}
  .mosque-info{padding:50px 40px;display:flex;flex-direction:column;justify-content:center;gap:24px}
  .mosque-info h3{font-family:var(--font-title);font-size:2rem;color:var(--navy-mid);font-weight:400}
  .info-row{display:flex;gap:14px;align-items:flex-start}
  .info-icon{
    width:38px;height:38px;background:linear-gradient(135deg,var(--or-pale),#EDF1FB);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;font-size:1rem;
    box-shadow:0 2px 8px rgba(37,99,171,.1);
  }
  .info-text strong{display:block;font-family:var(--font-title);font-size:1.1rem;color:var(--dark);margin-bottom:2px}
  .info-text span{font-size:.85rem;color:var(--gris)}
  .btn-maps{
    display:inline-flex;align-items:center;gap:10px;
    padding:13px 28px;background:var(--navy-mid);color:var(--blanc);
    border-radius:40px;font-family:var(--font-body);font-size:.85rem;
    letter-spacing:.1em;cursor:none;transition:background .3s,transform .2s;
    align-self:flex-start;
  }
  .btn-maps:hover{background:var(--navy-light);transform:translateY(-2px)}
  
  .dome-light{animation:dome-glow 3s ease-in-out infinite}
  @keyframes dome-glow{0%,100%{opacity:.3}50%{opacity:1}}
  .dome-light2{animation:dome-glow 4s ease-in-out 1s infinite}
  .dome-light3{animation:dome-glow 2.5s ease-in-out .5s infinite}
  .minaret-light{animation:minaret-pulse 2s ease-in-out infinite}
  @keyframes minaret-pulse{0%,100%{opacity:.4;filter:drop-shadow(0 0 3px rgba(201,168,76,.5))}50%{opacity:1;filter:drop-shadow(0 0 10px rgba(201,168,76,.9))}}
  
/* ===== FEUX D'ARTIFICES & CŒURS (Limité à la section) ===== */
.firework-particle {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    user-select: none;
    /* On centre la particule sur son point d'origine */
    transform: translate(-50%, -50%) scale(0); 
    /* L'animation utilise une courbe fluide (cubic-bezier) pour l'effet d'explosion */
    animation: firework-burst 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
  
  @keyframes firework-burst {
    0% { 
      transform: translate(-50%, -50%) scale(0); 
      opacity: 1; 
    }
    50% { 
      opacity: 1; 
    }
    100% { 
      /* var(--tx) et var(--ty) sont calculés en JS pour la direction de l'explosion */
      transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.6); 
      opacity: 0; 
    }
  }

  /* Lightbox */
  #lightbox{
    position:fixed;inset:0;z-index:9999;
    background:rgba(7,18,48,.96);display:none;
    align-items:center;justify-content:center;
    opacity:0;transition:opacity .4s;
  }
  #lightbox.active{display:flex}
  #lightbox.visible{opacity:1}
  .lightbox-close{
    position:absolute;top:30px;right:30px;
    width:44px;height:44px;border:1px solid rgba(201,168,76,.4);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    cursor:none;color:var(--or);font-size:1.4rem;transition:background .3s;
  }
  .lightbox-close:hover{background:rgba(201,168,76,.2)}
  .lightbox-content{max-width:80vw;max-height:80vh;border-radius:12px;overflow:hidden;box-shadow:0 0 80px rgba(91,58,138,.3)}
  
  /* ===== FOOTER ===== */
  footer{
    padding:100px 0 60px;
    background:linear-gradient(180deg,var(--navy) 0%,#040D20 100%);
    position:relative;overflow:hidden;text-align:center;
  }
  #rose-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
  footer::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,transparent,var(--or),var(--violet-light),var(--or),transparent);
  }
  .verse-wrap{max-width:780px;margin:0 auto 3rem;padding:0 2rem;position:relative;z-index:2}
  .verse-ref{
    font-family:var(--font-title);font-size:.85rem;color:var(--or);
    letter-spacing:.3em;text-transform:uppercase;margin-bottom:20px;opacity:.7;
  }
  .arabic-verse{
    font-size:clamp(1.4rem,3vw,2rem);
    color:rgba(201,168,76,.85);
    line-height:2;margin-bottom:20px;
    direction:rtl;
    font-family:'Cormorant Garamond',serif;
    letter-spacing:.05em;
  }
  .verse-text{
    font-family:var(--font-title);font-style:italic;
    font-size:clamp(1rem,2.2vw,1.4rem);
    color:rgba(255,255,255,.8);line-height:1.9;letter-spacing:.03em;
  }
  .verse-word{display:inline-block;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
  .verse-word.visible{opacity:1;transform:translateY(0)}
  
  .footer-geo{
    display:flex;justify-content:center;gap:12px;margin-bottom:2rem;
    position:relative;z-index:2;
  }
  .geo-diamond{
    width:10px;height:10px;
    background:var(--or);
    transform:rotate(45deg);
    opacity:.3;
    animation:geo-pulse 2s ease-in-out infinite;
  }
  .geo-diamond:nth-child(2){width:14px;height:14px;opacity:.6;animation-delay:.3s}
  .geo-diamond:nth-child(3){opacity:.3;animation-delay:.6s}
  @keyframes geo-pulse{0%,100%{opacity:.2}50%{opacity:.8}}
  
  .footer-bottom{
    border-top:1px solid rgba(201,168,76,.12);
    padding-top:30px;margin-top:30px;
    position:relative;z-index:2;
  }
  .footer-names{font-family:var(--font-title);font-size:1.4rem;color:var(--or-light);font-style:italic;margin-bottom:8px}
  .footer-sub{font-size:.75rem;color:rgba(255,255,255,.3);letter-spacing:.2em}
  
  /* ===== RESPONSIVE ===== */
  @media(max-width:900px){
    .hero-layout-grid {
      grid-template-columns: 1fr 1fr; 
      column-gap: 15px;
      row-gap: 1.5rem;
      padding-bottom: 100px; /* Ajoute de l'espace en bas pour ne pas écraser la souris */
      box-sizing: border-box;
    }
    .item-text, .hero-ornament, .crescent-container {
        grid-column: 1 / -1; 
        justify-content: center;
    }
    .photo-left {
      grid-column: 1; 
      grid-row: auto; 
    }
    .photo-right {
      grid-column: 2; 
      grid-row: auto;
    }
    .ceremonie-card{grid-template-columns:1fr}
    .mosque-visual{min-height:250px}
    .gallery-grid{columns:2}
  }
  @media(max-width:600px){
    .gallery-grid{columns:1}
    .countdown-blocks{gap:8px}
  }
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}

  @media (max-width: 600px) {
    .hero-date {
        flex-direction: column; /* Empile les éléments à la verticale sur mobile */
        gap: 5px; /* Espace entre les lignes */
        letter-spacing: 0.2em;
    }
    
    .hero-date .date-sep {
        display: none; /* Cache les points "•" sur mobile car le retour à la ligne suffit comme séparation */
    }
    }

    @media (max-width: 600px) {
        /* Aligne la date et le lieu proprement l'un en dessous de l'autre */
        .hero-date-chic {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px; /* Espace entre les deux lignes */
          line-height: 1.4;
        }
        
        /* On cache le point "•" car on est passé à la ligne */
        .hero-date-chic .sep {
          display: none; 
        }
      }
  }