/**
 * BALART INVITATION — Style Florale v3
 * /wp-content/themes/kadence-child/invitation-styles/style-florale.css
 *
 * ⚠️  AUCUNE couleur hardcodée ici — tout passe par les variables CSS.
 * Les valeurs sont injectées dans wp_head par invitation-moteur.php
 * depuis $config['palette'] de chaque template.
 *
 * Pour créer un nouveau modèle Florale :
 *   1. Dupliquer single-invitation-florale-carmen.php
 *   2. Changer assets_dir + palette + wpforms_id
 *   3. Uploader les images dans /invitation-assets/{nouveau_modele}/
 *   → Ce fichier CSS ne touche pas.
 *
 * Variables attendues (définies par chaque template) :
 *   --f-bg      : couleur de fond globale
 *   --f-bg-alt  : fond alternatif (sections légèrement différentes)
 *   --f-accent  : couleur principale (titres forts, dots, bordures actives)
 *   --f-accent2 : couleur secondaire (rose, pêche selon modèle)
 *   --f-deep    : couleur profonde (footer, RSVP bg, hover)
 *   --f-text    : texte courant
 *   --f-muted   : texte secondaire / sous-titres
 *   --f-border  : bordures légères
 *   --f-light   : texte clair (sur fond sombre)
 *   --f-light2  : texte très atténué (sur fond sombre)
 *
 * Héritage enveloppe Classique (sceau) :
 *   --seal-gold-light  : highlight du sceau
 *   --seal-gold-dark   : base du sceau
 *   --cream            : fond de l'enveloppe (alias de --f-bg)
 */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400;1,500&family=Raleway:wght@300;400&display=swap');

/* ═══════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════ */
html, body { overflow-x: hidden; }
body {
    background: var(--f-bg);
    font-family: var(--font-sans);
    color: var(--f-text);
}

/* ═══════════════════════════════════════════════════════
   PÉTALES CSS PURS — animation décorative
   Les couleurs des pétales suivent --f-accent / --f-accent2
═══════════════════════════════════════════════════════ */
#florale-petals {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    overflow: hidden;
}
.f-petal {
    position: absolute;
    top: -60px;
    border-radius: 150% 0 150% 0 / 120% 0 120% 0;
    pointer-events: none;
    opacity: 0;
    background: var(--f-accent);
}
/* Variantes taille / position / délai — même structure pour tous les Florale */
.f-petal:nth-child(even) { background: var(--f-accent2); }
.f-petal-0  { left:4%;  width:13px; height:17px; animation: petalFall 11s 0s   linear infinite; }
.f-petal-1  { left:11%; width:9px;  height:13px; animation: petalFall 14s 2s   linear infinite; }
.f-petal-2  { left:21%; width:15px; height:19px; animation: petalFall  9s 4s   linear infinite; }
.f-petal-3  { left:30%; width:10px; height:14px; animation: petalFall 13s 1s   linear infinite; }
.f-petal-4  { left:39%; width:17px; height:21px; animation: petalFall 10s 6s   linear infinite; }
.f-petal-5  { left:49%; width:8px;  height:12px; animation: petalFall 15s 3s   linear infinite; }
.f-petal-6  { left:57%; width:12px; height:16px; animation: petalFall 11s 8s   linear infinite; }
.f-petal-7  { left:66%; width:14px; height:18px; animation: petalFall 12s 5s   linear infinite; }
.f-petal-8  { left:74%; width:9px;  height:13px; animation: petalFall  9s 10s  linear infinite; }
.f-petal-9  { left:82%; width:16px; height:20px; animation: petalFall 14s 7s   linear infinite; }
.f-petal-10 { left:89%; width:11px; height:15px; animation: petalFall 10s 9s   linear infinite; }
.f-petal-11 { left:7%;  width:7px;  height:11px; animation: petalFall 16s 12s  linear infinite; }
.f-petal-12 { left:34%; width:13px; height:17px; animation: petalFall 11s 11s  linear infinite; }
.f-petal-13 { left:54%; width:10px; height:14px; animation: petalFall 13s 14s  linear infinite; }
.f-petal-14 { left:69%; width:15px; height:19px; animation: petalFall  9s 2s   linear infinite; }
.f-petal-15 { left:94%; width:9px;  height:13px; animation: petalFall 12s 16s  linear infinite; }

@keyframes petalFall {
    0%   { transform: translateY(0)     rotate(0deg)   translateX(0);    opacity: 0; }
    5%   { opacity: .70; }
    25%  { transform: translateY(25vh)  rotate(90deg)  translateX(12px); }
    50%  { transform: translateY(50vh)  rotate(200deg) translateX(-8px);  opacity: .50; }
    75%  { transform: translateY(75vh)  rotate(320deg) translateX(15px); }
    95%  { opacity: .25; }
    100% { transform: translateY(108vh) rotate(480deg) translateX(-5px);  opacity: 0; }
}

/* ═══════════════════════════════════════════════════════
   HERO FLORALE — image plein écran + overlay
═══════════════════════════════════════════════════════ */
.florale-header {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 32px 80px;
    position: relative;
    overflow: hidden;
    /* background-image injecté en style inline par hero-florale.php */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.florale-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        160deg,
        rgba(0,0,0,.58) 0%,
        rgba(0,0,0,.48) 50%,
        rgba(0,0,0,.62) 100%
    );
}
.florale-header-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.florale-eyebrow {
    font-family: var(--font-serif);
    font-size: clamp(9px, 2vw, 11px);
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--f-light2);
    margin-bottom: 32px;
}
.florale-names {
    font-family: var(--font-serif);
    font-size: clamp(54px, 13vw, 92px);
    font-weight: 300;
    font-style: italic;
    color: var(--f-light);
    line-height: .92;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-shadow: 0 3px 24px rgba(0,0,0,.40);
}
.florale-amp {
    font-size: clamp(22px, 5vw, 34px);
    color: var(--f-accent2);
    font-style: normal;
    display: block;
    margin: 10px 0;
    line-height: 1;
}
.florale-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 30px 0;
}
.florale-divider-line {
    width: 44px;
    height: 1px;
    background: rgba(255,255,255,.25);
}
.florale-divider-icon {
    color: var(--f-accent2);
    font-size: 13px;
    opacity: .85;
}
.florale-date {
    font-family: var(--font-serif);
    font-size: clamp(10px, 2vw, 12px);
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--f-light2);
    margin-bottom: 6px;
}
.florale-lieu {
    font-family: var(--font-serif);
    font-size: clamp(17px, 3.5vw, 22px);
    font-style: italic;
    color: var(--f-accent2);
    margin-bottom: 28px;
}
.florale-message {
    font-family: var(--font-serif);
    font-size: clamp(15px, 3vw, 19px);
    font-style: italic;
    font-weight: 300;
    color: var(--f-light2);
    line-height: 1.80;
    max-width: 460px;
    margin: 0 auto;
}
.florale-scroll-hint {
    margin-top: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.florale-scroll-line {
    width: 1px;
    height: 52px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--f-accent2));
    animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: .4; transform: scaleY(.8); }
    50%       { opacity: 1;  transform: scaleY(1); }
}

/* ═══════════════════════════════════════════════════════
   SÉPARATEUR DÉCORATIF
═══════════════════════════════════════════════════════ */
.sep-florale {
    text-align: center;
    padding: 28px 0;
    color: var(--f-accent);
    font-family: var(--font-serif);
    font-size: 18px;
    letter-spacing: 14px;
    opacity: .40;
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHIE COMMUNE — labels et titres de sections
═══════════════════════════════════════════════════════ */
.s-label {
    display: block;
    font-family: var(--font-serif);
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--f-accent);
    margin-bottom: 12px;
}
.s-title {
    font-family: var(--font-serif);
    font-size: clamp(32px, 7vw, 50px);
    font-weight: 300;
    font-style: italic;
    color: var(--f-deep);
    line-height: 1.05;
    margin-bottom: 40px;
}
.s-subtitle {
    font-family: var(--font-serif);
    font-size: clamp(15px, 3vw, 18px);
    font-style: italic;
    font-weight: 300;
    color: var(--f-muted);
    line-height: 1.75;
    max-width: 520px;
    margin: -24px auto 40px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════
   SECTIONS — wrapper commun
═══════════════════════════════════════════════════════ */
.balart-section {
    padding: 88px 32px;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.balart-sep {
    text-align: center;
    padding: 16px 0;
    color: var(--f-accent);
    font-family: var(--font-serif);
    font-size: 18px;
    letter-spacing: 10px;
    opacity: .35;
}

/* ═══════════════════════════════════════════════════════
   BLOC CITATION — image ou couleur en fond
   Image injectée en style inline par bloc-citation.php
═══════════════════════════════════════════════════════ */
.florale-citation-section {
    position: relative;
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 40px;
    background-color: var(--f-deep); /* fallback si pas d'image */
    background-size: cover !important;
    background-position: center !important;
    overflow: hidden;
}
.florale-citation-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(0,0,0,.60) 0%,
        rgba(0,0,0,.50) 50%,
        rgba(0,0,0,.65) 100%
    );
    z-index: 1;
}
.florale-citation-inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}
.florale-citation-guillemets {
    font-family: var(--font-serif);
    font-size: 72px;
    color: var(--f-accent2);
    line-height: .5;
    margin-bottom: 28px;
    opacity: .70;
    display: block;
}
.florale-citation-texte {
    font-family: var(--font-serif);
    font-size: clamp(22px, 5vw, 34px);
    font-style: italic;
    font-weight: 300;
    color: var(--f-light);
    line-height: 1.55;
    text-shadow: 0 2px 16px rgba(0,0,0,.30);
    margin-bottom: 32px;
}
.florale-citation-line {
    width: 40px;
    height: 1px;
    background: var(--f-accent2);
    opacity: .40;
    margin: 0 auto 16px;
}
.florale-citation-auteur {
    font-family: var(--font-serif);
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--f-light2);
}

/* ═══════════════════════════════════════════════════════
   COMPTE À REBOURS
═══════════════════════════════════════════════════════ */
.bloc-countdown {
    background: var(--f-bg-alt);
    padding: 88px 32px;
    text-align: center;
}
.bloc-countdown .s-label { color: var(--f-accent); }
.bloc-countdown .s-title { color: var(--f-deep); }
.countdown-grid {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(10px, 3vw, 32px);
}
.countdown-unit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.countdown-number {
    font-family: var(--font-serif);
    font-size: clamp(44px, 11vw, 68px);
    font-weight: 300;
    font-style: italic;
    color: var(--f-deep);
    line-height: 1;
    min-width: 2ch;
    text-align: center;
    display: block;
}
.countdown-label {
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--f-muted);
    display: block;
}
.countdown-sep {
    font-family: var(--font-serif);
    font-size: 44px;
    color: var(--f-accent);
    opacity: .40;
    line-height: 1;
    padding-bottom: 22px;
}

/* ═══════════════════════════════════════════════════════
   LIEU
═══════════════════════════════════════════════════════ */
.location-card {
    border: 1px solid var(--f-border);
    padding: 44px 36px;
    background: var(--f-bg-alt);
    max-width: 460px;
    margin: 0 auto;
}
.location-icon { font-size: 24px; margin-bottom: 14px; display: block; }
.location-name {
    font-family: var(--font-serif);
    font-size: clamp(22px, 4vw, 30px);
    font-style: italic;
    color: var(--f-deep);
    margin-bottom: 8px;
}
.location-address {
    font-size: 13px;
    color: var(--f-muted);
    line-height: 1.75;
    margin-bottom: 28px;
}
.location-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    background: var(--f-accent);
    color: var(--f-light) !important;
    font-family: var(--font-serif);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s;
}
.location-btn:hover { background: var(--f-deep); }

/* ═══════════════════════════════════════════════════════
   PROGRAMME — timeline verticale
═══════════════════════════════════════════════════════ */
.balart-timeline {
    display: flex;
    flex-direction: column;
    text-align: left;
    max-width: 520px;
    margin: 0 auto;
}
.timeline-item {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--f-border);
    position: relative;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
    position: absolute;
    left: 64px; top: 30px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--f-accent2);
    transform: translateX(-50%);
}
.timeline-time {
    font-family: var(--font-serif);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--f-accent);
    padding-top: 2px;
}
.timeline-title {
    font-family: var(--font-serif);
    font-size: 19px;
    font-style: italic;
    color: var(--f-deep);
    margin-bottom: 3px;
}
.timeline-desc {
    font-size: 13px;
    color: var(--f-muted);
    line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════
   NOTRE HISTOIRE
═══════════════════════════════════════════════════════ */
.bloc-histoire-wrap {
    background: var(--f-bg-alt);
    padding: 88px 32px;
    text-align: center;
}
.histoire-text {
    font-family: var(--font-serif);
    font-size: clamp(17px, 3vw, 21px);
    font-style: italic;
    font-weight: 300;
    line-height: 1.90;
    color: var(--f-text);
    max-width: 600px;
    margin: 0 auto;
}
/* Option carrousel — structure, couleurs via variables */
.histoire-carousel {
    display: flex;
    gap: 12px;
    margin-top: 48px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.histoire-carousel img {
    width: clamp(180px, 60vw, 260px);
    aspect-ratio: 3/4;
    object-fit: cover;
    flex-shrink: 0;
    scroll-snap-align: center;
}

/* ═══════════════════════════════════════════════════════
   DRESS CODE
═══════════════════════════════════════════════════════ */
.dresscode-content {
    border-left: 2px solid var(--f-accent);
    padding: 20px 28px;
    text-align: left;
    max-width: 460px;
    margin: 0 auto;
    font-family: var(--font-serif);
    font-size: 19px;
    font-style: italic;
    color: var(--f-text);
    line-height: 1.80;
}
/* Option image au-dessus du texte */
.dresscode-image {
    max-width: 280px;
    margin: 0 auto 32px;
    display: block;
    opacity: .85;
}

/* ═══════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════ */
.balart-faq { max-width: 540px; margin: 0 auto; text-align: left; }
.faq-item { border-bottom: 1px solid var(--f-border); }
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 19px;
    font-style: italic;
    color: var(--f-deep);
    text-align: left;
    gap: 16px;
}
.faq-icon {
    font-size: 20px;
    color: var(--f-accent);
    font-style: normal;
    font-family: var(--font-sans);
    font-weight: 300;
    flex-shrink: 0;
    transition: transform .3s;
    display: inline-block;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .3s;
    font-size: 14px;
    color: var(--f-muted);
    line-height: 1.75;
}
.faq-item.open .faq-answer { max-height: 300px; padding-bottom: 20px; }

/* ═══════════════════════════════════════════════════════
   RSVP
═══════════════════════════════════════════════════════ */
.bloc-rsvp { background: var(--f-deep); padding: 88px 32px; text-align: center; }
.bloc-rsvp .s-label { color: var(--f-accent2); }
.bloc-rsvp .s-title { color: var(--f-light) !important; }
.rsvp-inner { max-width: 540px; margin: 0 auto; }
.rsvp-inner .wpforms-form input[type=text],
.rsvp-inner .wpforms-form input[type=email],
.rsvp-inner .wpforms-form input[type=number],
.rsvp-inner .wpforms-form select,
.rsvp-inner .wpforms-form textarea {
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-family: var(--font-serif) !important;
    font-size: 16px !important;
    color: var(--f-light) !important;
    padding: 10px 0 !important;
    box-shadow: none !important;
}
.rsvp-inner .wpforms-form label {
    font-family: var(--font-serif) !important;
    font-size: 9px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--f-accent2) !important;
}
.rsvp-inner .wpforms-form .wpforms-submit {
    background: var(--f-accent) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-serif) !important;
    font-size: 10px !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    padding: 16px 40px !important;
    color: var(--f-light) !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-top: 24px !important;
    transition: background .3s !important;
}
.rsvp-inner .wpforms-form .wpforms-submit:hover { background: var(--f-accent2) !important; }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.balart-footer {
    background: var(--f-deep);
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 36px;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--f-light2);
}

/* ═══════════════════════════════════════════════════════
   MUSIQUE — bouton flottant
═══════════════════════════════════════════════════════ */
.f-music-bar {
    position: fixed; bottom: 24px; right: 24px; z-index: 200;
    background: var(--f-deep);
    opacity: .92;
    backdrop-filter: blur(8px);
    padding: 10px 18px;
}
.f-music-btn {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none; cursor: pointer;
    color: var(--f-light);
    font-family: var(--font-serif);
    font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .florale-header { padding: 100px 24px 60px; }
    .balart-section { padding: 64px 24px; }
    .bloc-countdown, .bloc-histoire-wrap, .bloc-rsvp { padding: 64px 24px; }
    .timeline-item { grid-template-columns: 56px 1fr; gap: 14px; }
    .florale-citation-section { min-height: 50vh; padding: 80px 28px; }
}

/* ═══════════════════════════════════════════════════════
   ENVELOPPE FLORALE — enveloppe-florale.php
   Même structure que l'enveloppe Classique,
   couleurs via --f-* et --seal-gold-* du template.
═══════════════════════════════════════════════════════ */
.env-florale-screen {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--f-bg);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: opacity .8s ease;
}
.env-florale-screen.hiding { opacity: 0; pointer-events: none; }

/* Wrapper, body, folds — identiques à Classique */
.env-florale-screen .env-wrapper {
    position: relative;
    width: min(72vw, 290px);
    aspect-ratio: 3 / 4.8;
    perspective: 900px;
    transform-style: preserve-3d;
    filter: drop-shadow(0 12px 40px rgba(0,0,0,.20));
}
.env-florale-screen .env-body {
    position: absolute; inset: 0;
    background: var(--f-bg);
    border: 1px solid var(--f-border);
    border-radius: 3px; overflow: hidden;
}
.env-florale-screen .env-fold { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.env-florale-screen .env-fold-left  { clip-path: polygon(0 100%,50% 52%,0 8%);       background: linear-gradient(135deg, rgba(0,0,0,.04) 0%, transparent 65%); }
.env-florale-screen .env-fold-right { clip-path: polygon(100% 100%,50% 52%,100% 8%); background: linear-gradient(225deg, rgba(0,0,0,.04) 0%, transparent 65%); }
.env-florale-screen .env-fold-bottom{ clip-path: polygon(0 100%,50% 52%,100% 100%);  background: linear-gradient(0deg,   rgba(0,0,0,.03) 0%, transparent 60%); }
.env-florale-screen .env-flap-line  { position: absolute; top: 44%; left: 0; right: 0; height: 1px; background: var(--f-border); z-index: 2; pointer-events: none; }
.env-florale-screen .env-flap {
    position: absolute; top: 0; left: 0; right: 0; height: 45%;
    clip-path: polygon(0 0,100% 0,100% 4%,50% 88%,0 4%);
    background: var(--f-bg);
    border-bottom: 1px solid var(--f-border);
    transform-origin: top center; transform: rotateX(0deg);
    transition: transform 1s cubic-bezier(.4,0,.2,1);
    z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.env-florale-screen .env-flap.open { transform: rotateX(-185deg); }
.env-florale-screen .env-flap-shadow {
    position: absolute; top: 38%; left: 5%; right: 5%; height: 10%;
    background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, transparent 100%);
    z-index: 5; pointer-events: none; transition: opacity .5s ease;
}
.env-florale-screen .env-flap.open ~ .env-flap-shadow { opacity: 0; }

/* Sceau — couleurs du template */
.env-florale-screen .env-seal {
    position: absolute; top: 38%; left: 50%;
    transform: translate(-50%,-50%); z-index: 20;
    width: clamp(58px,20%,78px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 33% 33%, var(--seal-gold-light) 0%, var(--f-accent) 45%, var(--seal-gold-dark) 100%);
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0,0,0,.25), inset 0 1px 3px rgba(255,255,255,.15), inset 0 -2px 5px rgba(0,0,0,.18);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease; user-select: none;
}
.env-florale-screen .env-seal:hover  { transform: translate(-50%,-50%) scale(1.06); }
.env-florale-screen .env-seal:active { transform: translate(-50%,-50%) scale(.96); }
.env-florale-screen .env-seal-ring {
    width: 82%; height: 82%; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.env-florale-screen .env-seal-label    { font-family:var(--font-serif); font-size:clamp(5px,1.4vw,7px); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,252,248,.70); }
.env-florale-screen .env-seal-initials { font-family:var(--font-serif); font-style:italic; font-size:clamp(13px,4vw,19px); color:rgba(255,252,248,.95); text-shadow:0 1px 3px rgba(0,0,0,.30); }
.env-florale-screen .env-seal-bar      { width:55%; height:1px; background:rgba(255,252,248,.30); margin-top:1px; }

/* Caption + skip */
.env-florale-screen .env-caption { margin-top: 28px; text-align: center; }
.env-florale-screen .env-caption-main { font-family:var(--font-serif); font-style:italic; font-size:clamp(15px,3.5vw,18px); color:var(--f-text); margin-bottom:6px; }
.env-florale-screen .env-caption-hint { font-family:var(--font-sans); font-size:10px; font-weight:300; letter-spacing:.20em; text-transform:uppercase; color:var(--f-muted); animation:hintPulse 2.2s ease-in-out infinite; }
@keyframes hintPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.env-florale-screen .env-skip { position:fixed; bottom:28px; right:24px; background:none; border:none; font-family:var(--font-serif); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--f-muted); cursor:pointer; padding:8px 4px; z-index:10000; transition:color .2s; }
.env-florale-screen .env-skip:hover { color:var(--f-text); }

/* ── RSVP — classes communes (ajout v3) ── */
.rsvp-wrap { max-width: 680px; margin: 0 auto; text-align: center; }
.rsvp-intro { font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--f-light2); margin-bottom:40px; line-height:1.7; }
.rsvp-unavailable { font-family:var(--font-serif); font-style:italic; color:var(--f-muted); padding:20px 0; }

/* ═══════════════════════════════════════════════════════
   HERO FLORALE — hero-florale.php
   Image plein écran + cadre ovale sur le texte
═══════════════════════════════════════════════════════ */
.f-header {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center; position: relative; overflow: hidden;
    background: var(--f-deep);
    background-size: cover !important;
    background-position: center !important;
    padding: 60px 24px;
}
.f-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: rgba(0,0,0,.15);
}
.f-header-inner {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    width: 100%;
}
.f-eyebrow {
    font-family: var(--font-serif);
    font-size: 9px; letter-spacing: 5px; text-transform: uppercase;
    color: var(--f-deep);
    margin-bottom: 16px;
}
/* Cadre ovale — fond crème translucide autour des noms */
.f-oval {
    background: rgba(255,252,248,.88);
    border-radius: 50%;
    width: clamp(240px, 72vw, 340px);
    aspect-ratio: 3 / 4;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 32px 24px;
    margin: 0 auto 16px;
    box-shadow: 0 4px 40px rgba(0,0,0,.12);
}
.f-names {
    font-family: var(--font-serif);
    font-size: clamp(36px, 10vw, 58px);
    font-weight: 400; color: var(--f-deep);
    line-height: 1; display: flex;
    flex-direction: column; align-items: center; margin: 0;
}
.f-name { display: block; }
.f-amp {
    font-size: clamp(18px, 4vw, 26px);
    color: var(--f-accent); font-style: normal;
    display: block; margin: 6px 0; line-height: 1;
}
.f-oval-message {
    font-family: var(--font-serif);
    font-size: clamp(13px, 2.5vw, 16px); font-style: italic;
    color: var(--f-muted); margin-top: 12px; line-height: 1.6;
}
.f-date {
    font-family: var(--font-serif);
    font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
    color: var(--f-deep); margin-bottom: 4px;
}
.f-lieu {
    font-family: var(--font-serif);
    font-size: clamp(15px, 3vw, 18px); font-style: italic;
    color: var(--f-deep); margin-bottom: 24px;
}
.f-scroll {
    margin-top: 32px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.f-scroll-label {
    font-family: var(--font-serif);
    font-size: 8px; letter-spacing: 4px; text-transform: uppercase;
    color: var(--f-muted);
}
.f-scroll-line {
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, transparent, var(--f-accent));
    animation: fScrollPulse 2s ease-in-out infinite;
}
@keyframes fScrollPulse {
    0%,100% { opacity: .4; } 50% { opacity: 1; }
}