/* Les codes hexadécimaux de la palette :
Fond principal (Beige très clair / Blanc cassé) : #FDFBF7 (ou dégradé vers #F5EFE6)
Couleur de focus (Bordeaux principal) : #c92727
Texte sombre doux : #2D221E
Accents / Highlights (Doré) : #D4AF37 */
.corinthia {
    font-family: "Corinthia", cursive;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0px;
    font-size: 80px;
}
.diphylleia {
    font-family: "Diphylleia", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
}
.great-vibes {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
}
.emphase {
    font-family: "Corinthia", serif;
    font-size: 23px;
    color: #e94a4a;
}
.body { 
    font-family:"Hedvig Letters Serif", serif;
    font-weight:400;
    font-size:12px;
    color:black; 
    line-height: 18px;
}
* { outline:none !important; }
body { border:none; margin:0; padding:0; background:#FDFBF7; }
h1 { color:#c92727 }
h2 { color:#D4AF37 }
h3 { font-size: 16px; margin: 5px 0; margin-top: 20px; }

input, textarea, .hollow-btn { border:0; padding:5px 10px; margin: 5px 0; line-height:20px; border-radius:15px; background:white; box-shadow:0 0 0 1px #e7d5c0; transition:all 200ms ease; width: 100%; max-width: 100vw; box-sizing: border-box; resize:none; }
input:focus, textarea:focus { box-shadow:0 0 0 3px #ff9593; }
input.text {}
button {}

/* Zone d'upload automatique */
.upload-box {
    max-width: 400px;
    margin: 0 auto 0 auto;
    text-align: center;
    position: relative;
}
#fileUpload {
    position: absolute;
    margin-top: -35px;
    left: 0;
    opacity: 0;
}
.file-input-wrapper {
    position: relative;
    margin: 15px 0;
}

/* Barre de progression */
.progress-container {
    display: none;
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 20px;
    margin-top: 15px;
    overflow: hidden;
    position: relative;
}
.progress-bar {
    width: 0%;
    height: 30px;
    background-color: #2ecc71;
    text-align: center;
    line-height: 30px;
    color: white;
    font-size: 0.8em;
    font-weight: bold;
    transition: width 0.1s linear;
}
.progress-bar span {
    position: absolute;
    width: 100%;
    left: 0;
}
#uploadStatus {
    margin-top: 10px;
    font-size: 0.9em;
    font-weight: bold;
    color: #7f8c8d;
}
/* Style simple pour masquer le bouton submit devenu inutile */
.btn-submit {
    display: none;
}

/* Grille Responsive Moderne */
.gallery-wrapper {
    padding: 20px;
}
.gallery-grid {
    display: grid;
/* Changement de 200px à 140px pour le minmax */
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 15px; /* Légère réduction de l'espace entre les images */
max-width: 1200px;
margin: 0 auto 40px auto;
}
/* Style des cartes d'images */
.gallery-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}
.gallery-item a {
    display: block;
    text-decoration: none;
    position: relative;
}
.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Recadre proprement l'image dans le carré sans la déformer */
    display: block;
}
.gallery-info {
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.75em;
    color: white;
    position: absolute;
    bottom: 5px;
    right: 5px;
    text-shadow: 0px 1px 3px black;
}
.no-images {
    text-align: center;
    grid-column: 1 / -1;
    font-style: italic;
    color: #7f8c8d;
    padding: 40px;
}
.btn-delete {
    position: absolute;
    z-index: 1;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    line-height: 19px;
    display: inline-grid;
    vertical-align: bottom;
    padding: 0;
    border: 0;
    color: white;
    background: #c92727;
    right: 5px;
    top: 5px;
    font-family: sans-serif;
}
/* Style des boutons de Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}
.pagination a, .pagination span {
    padding: 10px 16px;
    border-radius: 5px;
    text-decoration: none;
    background-color: #fff;
    color: #2c3e50;
    border: none;
    box-shadow: 0 0 0 1px #e7d5c0;
    font-weight: bold;
    transition: all 0.2s ease;
}
.pagination a:first-child, .pagination span:first-child {
    border-radius: 15px 5px 5px 15px;
}
.pagination a:last-child, .pagination span:last-child {
    border-radius: 5px 15px 15px 5px;
}
.pagination a:hover {
    background-color: #ff9593;
    color: #fff;
    box-shadow: 0 0 0 3px #ff9593;
}
.pagination .active {
    background-color: #c92727;
    color: #fff;
    box-shadow: 0 0 0 3px #c92727;
    cursor: default;
}
.pagination .disabled {
    background-color: transparent;
    color: #e7d5c0;
    cursor: not-allowed;
}
@media (max-width: 600px) {
    .gallery-grid {
        gap: 10px; /* Espace encore plus compact sur smartphone */
        padding: 0 5px;
    }
    .gallery-item img {
        height: 140px; /* Hauteur réduite pour garder un aspect carré/harmonieux */
    }
    .pagination a:first-child, .pagination span:first-child, .pagination a:last-child, .pagination span:last-child { font-size:0; padding: 8px 14px; }
    .pagination a:first-child::before, .pagination span:first-child::before {
        content: "«"; font-size: 12px;
    }
    .pagination a:last-child::before, .pagination span:last-child::before {
        content: "»"; font-size: 12px;
    }
}


html{scroll-behavior:smooth;}
.hero{position:relative;width:100%;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:var(--mint)}
.hero-bg{position:absolute;inset:-6%;z-index:-3;background:url("/images/b_background.jpg") center bottom/cover no-repeat;transform:translate3d(0,0,0) scale(1.04);will-change:transform,filter}
.main-logo { width: 720px;
    max-width: 80vw;
    margin-top: 30px; }
    .hero-veil{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(231,238,233,.18),transparent 68%)}
    .hero-copy{position:relative;z-index:1;text-align:center;margin:clamp(55px,10vh,110px) auto 0;padding:0 16px;pointer-events:none;color:#b74b55}
    .eyebrow{/*font-family:Italiana,Georgia,serif;*/font-size:clamp(17px,2vw,23px);letter-spacing:.05em; color:#D4AF37; font-style:italic; }
    .hero h1{font:normal clamp(62px,8vw,116px)/1.08 Italiana,Georgia,serif;margin:23px 0}
    .subtitle{/*font-family:Italiana,Georgia,serif;*/font-size:clamp(21px,2.6vw,31px)}
    .rings-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
    .ring{position:absolute;top:0;left:50%;height:auto;max-width:none;user-select:none;will-change:transform,filter,opacity;filter:blur(7px);opacity:0}
    .ring-man{width:clamp(110px,20vw,265px)}
    .ring-woman{width:clamp(90px,16vw,205px)}
    .section{position:relative;z-index:1;padding:clamp(85px,12vw,150px) 24px;text-align:center;background:var(--cream)}
    @media(max-width:650px){
        .hero-copy{margin-top:14vh}
        .ring-man{width:34vw}
        .ring-woman{width:27vw}
        .hero-bg{background-position:52% bottom}
    }
    @media(prefers-reduced-motion:reduce){
        html{scroll-behavior:auto}
        .hero-bg,.ring{will-change:auto}
        .rings-layer{display:none}
    }
    .bubble{position:absolute;width:300px;height:140px;left:var(--x,50%);top:var(--y,50%);margin-left:-150px;margin-top:-70px;pointer-events:none;opacity:0;filter:blur(12px);transform:translate3d(0,95px,0) rotate(var(--tilt,0deg)) scale(var(--scale,1));will-change:transform,filter,opacity}.bubble.play{animation:thought 3s linear both}.shape{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 5px 7px #26050d11)}.content{position:absolute;inset:26px 30px 20px 35px;display:flex;flex-direction:column;gap:12px;padding:0 15px;justify-content:center;margin-top: -10px;}.name{font-size:18px/*Georgia,serif*/; font-weight:700;color:#c92727;display:flex;gap:10px;align-items:center}.message{font-size:16px;line-height:1.35}.controls{display:none;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}button{border:1px solid #d8b68d;background:#f5e9dc;color:#641b34;border-radius:99px;padding:11px 18px;cursor:pointer;font-size:14px}button.secondary{background:transparent;color:#f5e9dc}small{display:block;text-align:center;color:#ddc2c7;margin-top:12px}
    @keyframes thought{
        0%{transform:translate3d(0,95px,0) rotate(var(--tilt)) scale(var(--scale));opacity:0;filter:blur(12px);animation-timing-function:cubic-bezier(.12,.72,.32,1)}
        7.35%{transform:translate3d(0,28px,0) rotate(var(--tilt)) scale(var(--scale));opacity:1;filter:blur(0);animation-timing-function:linear}
        25%{transform:translate3d(0,18px,0) rotate(var(--tilt)) scale(var(--scale));opacity:1;filter:blur(0)}
        50%{transform:translate3d(0,5px,0) rotate(var(--tilt)) scale(var(--scale));opacity:1;filter:blur(0)}
        75%{transform:translate3d(0,-8px,0) rotate(var(--tilt)) scale(var(--scale));opacity:1;filter:blur(0)}
        92.65%{transform:translate3d(0,-18px,0) rotate(var(--tilt)) scale(var(--scale));opacity:1;filter:blur(0);animation-timing-function:cubic-bezier(.68,0,.88,.28)}
        100%{transform:translate3d(0,-95px,0) rotate(var(--tilt)) scale(var(--scale));opacity:0;filter:blur(12px)}}
        @media(max-width:669px){/*.stage{height:350px}*/.bubble{--scale:.88!important;--x:50%!important;--y:80%!important}}@media(prefers-reduced-motion:reduce){.bubble.play{animation:none;opacity:1;filter:none;transform:translate3d(0,0,0) rotate(var(--tilt)) scale(var(--scale))}}


/* RSVP */
.border-dentelle { background:url(/images/border.png) center; z-index: 1; background-size:contain; width:100%; height:60px; position:relative;margin-top:-43px; }
.container { padding:15px; box-sizing:border-box; z-index: 1; max-width: 1200px; margin:auto; position:relative; overflow:hidden; }
.invitation {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 30px;
    box-sizing: border-box;
}
.invitation__text {
    text-align: center;
}
.invitation__text h1 {
    margin-top: 0px;
    margin-bottom: 40px;
    line-height: 40px;
}
.invitation__image img {
    display: block;
    height: auto;
    width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%) rotate(5deg);
}
.invitation input {
    background: #c92727;
    color: white;
    width: 220px;
    max-width: 70vw;
}

/* Responsive */
@media (max-width: 768px) {
    .invitation {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 20px; }
        .invitation__image img {
            width: 80%;
            max-width: 300px;
            position: relative;
            transform: rotate(5deg);
            margin: auto;
        }
    }

/* form */
.enveloppe-wrapper {
    max-width: 505px;
    margin: auto;
    background: url(/images/enveloppe-back.png);
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
}
.enveloppe-front {
    width: 100%;
    background: url(/images/enveloppe-front.png);
    background-repeat: no-repeat;
    background-position: bottom;
    height: 346px;
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
/* CONTENEUR DES BOUTONS */
.allergens-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin:5px 0px;
    justify-content: center;
}

/* MASQUER LA CHECKBOX INVISIBLE */
.allergen-item input[type="checkbox"] {
    display: none;
}

/* LE BOUTON (LABEL) PAR DÉFAUT */
.allergen-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    background-color: transparent;
    border: 1px solid #e7d5c0;
    border-radius: 30px; /* Forme pilule très moderne */
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none; /* Évite de sélectionner le texte par erreur */
}

/* EFFET AU SURVOL */
.allergen-label:hover {
    background-color: white;
}

/* STYLE LORSQUE LE BOUTON EST SÉLECTIONNÉ (CHECKED) */
.allergen-item input[type="checkbox"]:checked + .allergen-label {
    background-color: #fed7d7; /* Fond rouge/rose très léger */
    border-color: #e53e3e;     /* Bordure rouge alerte */
    color: #9b2c2c;            /* Texte rouge foncé */
    box-shadow: 0 4px 6px rgba(229, 62, 62, 0.1);
}

/* Optionnel : ajouter une petite croix ou icône quand c'est coché
.allergen-item input[type="checkbox"]:checked + .allergen-label::before {
content: "✕ ";
font-weight: bold;
} */
/* Zone Participants */
.attendance-container {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
}
.attendance-container h3 {
    margin: 0 0 5px 0;
    color: #2c3e50;
    font-size: 1.2em;
}
.attendance-inputs {
    display: flex;
    gap: 20px;
    margin:auto;
    justify-content: center;
    margin-top: 15px;
    text-align: center;
}
.counter-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.counter-group label {
    font-size: 15px;
}

/* Style des champs numériques */
.input-stepper input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    text-align: center;
    text-indent: 15px;
}
#totalDisplay { font-size:24px; margin: 0 5px; vertical-align: bottom; }

/* Planning */

    .programme {
      position: relative;
      max-width: 1056px;
      min-height: 1400px;
      margin: auto;
      padding: 125px 30px 100px;
      overflow: hidden;
    }

    /* Frise chronologique */
    .timeline {
      position: relative;
      padding-top: 45px;
      background: url(/images/v_background.jpg);
      background-size: cover;
      color: white;
      overflow: hidden;
      isolation: isolate;
    }

    .time-line {
      position: relative;
      margin: 30px 0 60px;
    }
    .time-line::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      background: #D4AF37;
      transform: translateX(-50%);
    }

    .evenement {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 100px 1fr;
      align-items: center;
      min-height: 135px;
    }
    .evenement h3 {
      margin-top: 10px;
    }

    .details {
      padding: 10px 20px;
      max-width: 280px;
    }

    .gauche .details {
      grid-column: 1;
      text-align: right;
      justify-self: right;
    }

    .droite .details {
      grid-column: 3;
      text-align: left;
    }

    .heure {
      display: block;
      font-size: 43px;
      margin: 0;
    }

    .details p {
      font-size: 12px;
      line-height: 1.25;
      margin: 0;
    }

    .icone {
      position: relative;
      z-index: 2;
      grid-column: 2;
      grid-row: 1;
      justify-self: center;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 87px;
      height: 87px;
      border-radius: 50%;
      background: #fdeac7;
      color: #850d28;
      font-size: 37px;
      box-shadow: 0 2px 10px #27000a50;
    }
    .icone img {
        width: 120%;
    }

    .icone::before,
    .icone::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #D4AF37;
      transform: translateX(-50%);
    }

    .icone::before { top: -28px; }
    .icone::after { bottom: -28px; }

    /* Version mobile */
    @media (max-width: 650px) {
      .programme {
        padding: 110px 16px 65px;
        min-height: auto;
      }
      .timeline h1 { font-size:50px; }

      .time-line {
        width: 80vw;
        max-width: 380px;
        margin: 30px auto 70px;
      }
      .time-line::before {
        left: 40px;
      }

      .evenement {
        grid-template-columns: 80px 1fr;
        min-height: 113px;
      }

      .icone {
        grid-column: 1;
        width: 65px;
        height: 65px;
        font-size: 29px;
      }

      .gauche .details,
      .droite .details {
        grid-column: 2;
        text-align: left;
        padding: 10px;
        justify-self: left;
      }

      .heure { font-size: 38px; }
    }

    .f1, .f2, .f3 { 
        position:absolute; 
        will-change: transform;
        pointer-events: none;
        backface-visibility: hidden; 
    }
    .f1 {
        bottom: -70px;
        left: -50px;
        width: 400px;
    }
    .f2 {
        bottom: -20px;
        right: -120px;
        width: 500px;
        filter: blur(3px);
        opacity: 0.8;
    }
    .f3 {
        top: 10px;
        left: -210px;
        width: 400px;
        filter: blur(6px);
        opacity: 0.5;
    }
    @media (max-width: 1180px) {
        .f1 {
            left: -170px;
        }
        .f2 {
            right: -280px;
            opacity: 0.5;
        }
    }
    @media (max-width: 650px) {
        .f1 {
            bottom: -140px;
            opacity: 0.9;
        }
        .f2 {
            bottom: 0;
            right: -330px;
        }
        .f3 {
            left: -230px;
        }

    }
    .heart-sep {
        font-size: 0;
        position: relative;
        margin-top: -70px;
        overflow: hidden;
    }
    .heart-sep .min-sep {
        width: 100%;
        min-width: 820px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .heart-sep .s1, .heart-sep .s3 {
        height: 70px;
        width: calc(50% - 65px);
    }
    .heart-sep .s2 {
        height: 70px;
        width: 130px;
    }