/* ============================================================
   SITE MARIAGE BENJAMIN & MARIANNE - 14 JUILLET 2027
   CSS ADDITIONNEL COMPLET - VERSION v12 (bouton centré + anti-débordement)

   ⚠️ INSTRUCTIONS :
   1. Apparence → Personnaliser → CSS additionnel
   2. SUPPRIME TOUT le CSS existant (Ctrl+A puis Suppr)
   3. COLLE l'intégralité de ce fichier
   4. Publier

   CORRECTIONS APPORTÉES DANS CETTE VERSION (par rapport à v3) :
   - DÉFAUT 1 : le bouton "MENU" affiche désormais "MENÜ" sur la
     version allemande du site (orthographe correcte), tout en
     gardant "MENU" sur la version française.
   - MENU MOBILE : police Cinzel conservée (capitales romaines), donc
     affichage en MAJUSCULES, ex. "DER GROSSE TAG". C'est un choix
     assumé ; en capitales, "SS" est la forme allemande correcte du ß,
     donc "GROSSE" n'est pas une faute.
   - DÉFAUT 4 (formulaire RSVP) : le texte des options longues
     débordait de son cadre, et chaque option avait un double encadré
     (boîte blanche dans la boîte ivoire). On aplatit le cadre interne
     hérité du thème → le texte revient à la ligne et s'affiche
     directement sur l'ivoire.
   - DÉFAUT 3 : le drapeau du menu mobile est maintenant cliquable
     sur TOUTE sa surface. Le drapeau est porté par le lien <a>
     lui-même (et non plus par le conteneur <li>).

   Aucune classe externe requise, aucun JavaScript.
   ============================================================ */


/* ============================================================
   1. STYLES GLOBAUX
   ============================================================ */

/* Masquer le titre de la page d'accueil */
.home .wp-block-post-title {
    display: none !important;
}


/* ============================================================
   2. DRAPEAUX DANS LE MENU - PC + MOBILE
   ============================================================ */

/* === DRAPEAU ALLEMAND : lien vers /de/willkommen === */
/* S'applique partout (PC et mobile) */
.wp-block-navigation a.drapeau-de,
nav a.drapeau-de,
.wp-block-navigation-link.drapeau-de a {

    background-image: url('https://benjy-maya-mariage.fr/wp-content/uploads/2026/05/Gemini_Generated_Image_4znrig4znrig4znr.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;

    /* Cacher le texte WILLKOMMEN */
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    white-space: nowrap !important;

    /* Dimensions du drapeau */
    width: 90px !important;
    height: 75px !important;
    display: inline-block !important;
    padding: 0 !important;

    /* Style décoratif */
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;

    /* Effet au survol */
    transition: transform 0.3s ease !important;
}

.wp-block-navigation a[href*="/de/willkommen"]:hover,
nav a[href*="/de/willkommen"]:hover {
    transform: scale(1.08) !important;
}


/* === DRAPEAU FRANÇAIS === */
.wp-block-navigation a.drapeau-fr,
nav a.drapeau-fr,
.wp-block-navigation-link.drapeau-fr a {
    background-image: url('https://benjy-maya-mariage.fr/wp-content/uploads/2026/05/Gemini_Generated_Image_juffbmjuffbmjuff.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;

    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    width: 90px !important;
    height: 75px !important;
    display: inline-block !important;
    padding: 0 !important;

    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;

    transition: transform 0.3s ease !important;
}

.wp-block-navigation a.drapeau-fr:hover,
nav a.drapeau-fr:hover {
    transform: scale(1.08) !important;
}


/* ============================================================
   3. RESPONSIVE MOBILE (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    /* --- 3.1 LOGO AGRANDI --- */
    .wp-block-site-logo img,
    .wp-block-site-logo a img,
    .site-logo img {
        max-width: 90px !important;
        width: 90px !important;
        height: auto !important;
    }

    .wp-block-site-logo {
        max-width: 90px !important;
    }


    /* --- 3.2 BOUTON HAMBURGER → "MENU" --- */

    .wp-block-navigation__responsive-container-open svg {
        display: none !important;
    }

    .wp-block-navigation__responsive-container-open {
        background: transparent !important;
        background-image: none !important;
        background-color: transparent !important;
        width: auto !important;
        height: auto !important;
        padding: 10px 22px !important;
        border: 2px solid #3D4A33 !important;
        border-radius: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        position: relative !important;
        transition: all 0.3s ease !important;
        margin-left: auto !important;
        margin-right: 15px !important;
    }

    .wp-block-navigation__responsive-container-open::after {
        display: none !important;
    }

    .wp-block-navigation__responsive-container-open::before {
        content: "MENU" !important;
        position: static !important;
        transform: none !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        color: #3D4A33 !important;
        font-family: 'Cinzel', serif, Georgia !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        letter-spacing: 3px !important;
    }

    /* ✦ DÉFAUT 1 : sur les pages allemandes, afficher "MENÜ" ✦ */
    /* WordPress/Polylang pose lang="de-DE" sur les pages DE.       */
    html[lang^="de"] .wp-block-navigation__responsive-container-open::before {
        content: "MENÜ" !important;
    }

    .wp-block-navigation__responsive-container-open:hover,
    .wp-block-navigation__responsive-container-open:active {
        background-color: #3D4A33 !important;
        border-color: #3D4A33 !important;
    }

    .wp-block-navigation__responsive-container-open:hover::before,
    .wp-block-navigation__responsive-container-open:active::before {
        color: #FFF8E7 !important;
    }

    .wp-block-navigation,
    .wp-block-navigation__container,
    nav.wp-block-navigation {
        justify-content: flex-end !important;
        margin-left: auto !important;
    }

    .wp-block-template-part header .wp-block-group,
    header .wp-block-group__inner-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }


    /* --- 3.3 RÉINITIALISATION DU MENU OUVERT (sauf drapeaux) --- */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
    .wp-block-navigation__responsive-container.is-menu-open ul,
    .wp-block-navigation__responsive-container.is-menu-open li:not(.drapeau-de):not(.drapeau-fr),
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.drapeau-de):not(.drapeau-fr),
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.drapeau-de):not(.drapeau-fr) .wp-block-navigation-item__content {
        background: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open a:not(.drapeau-de):not(.drapeau-fr) {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border: none !important;
    }


    /* --- 3.4 FOND VERT SAUGE SUR LE MENU OUVERT --- */
    .wp-block-navigation__responsive-container.is-menu-open,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        background-color: #9CAF88 !important;
        background-image: linear-gradient(135deg, #9CAF88 0%, #7A8F6B 100%) !important;
    }


    /* --- 3.5 TEXTE DES LIENS DU MENU EN IVOIRE --- */
    /* Police Cinzel = capitales romaines (choix assumé). Le menu        */
    /* s'affiche donc en MAJUSCULES, ex. "DER GROSSE TAG". En capitales,  */
    /* la forme allemande correcte du ß est "SS" → "GROSSE" n'est pas une */
    /* faute. text-transform: uppercase sert de filet de sécurité si la   */
    /* police de secours (serif) se chargeait à la place de Cinzel.       */
    .wp-block-navigation__responsive-container.is-menu-open a:not(.drapeau-de):not(.drapeau-fr),
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.drapeau-de):not(.drapeau-fr) .wp-block-navigation-item__content {
        color: #FFF8E7 !important;
        font-family: 'Cinzel', serif !important;
        font-weight: 500 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        font-size: 1.1rem !important;
        padding: 14px 20px !important;
        transition: all 0.3s ease !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open a:not(.drapeau-de):not(.drapeau-fr):hover {
        color: #F4D5DA !important;
    }

    .wp-block-navigation__responsive-container-close,
    .wp-block-navigation__responsive-container-close svg {
        color: #FFF8E7 !important;
        fill: #FFF8E7 !important;
    }


    /* --- 3.6 CENTRAGE DES LIENS --- */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
    .wp-block-navigation__responsive-container.is-menu-open ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        gap: 0 !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open li {
        width: 100% !important;
        max-width: 70% !important;
        text-align: center !important;
        list-style: none !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255, 248, 231, 0.2) !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open li:last-child {
        border-bottom: none !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open li a {
        text-align: center !important;
        margin: 0 auto !important;
        display: inline-block !important;
    }


    /* --- 3.7 DRAPEAUX MOBILE (✦ DÉFAUT 3 : 100% cliquables ✦) --- */
    /* Principe : le drapeau (image + dimensions) est porté UNIQUEMENT */
    /* par le lien <a>, en display:block pleine surface. Le conteneur  */
    /* <li> redevient un simple bloc transparent qui centre.           */

    /* --- 3.7.a Conteneur <li> du drapeau : centrage seul, AUCUN drapeau --- */
    .wp-block-navigation__responsive-container.is-menu-open li.drapeau-de,
    .wp-block-navigation__responsive-container.is-menu-open li.drapeau-fr,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.drapeau-de,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.drapeau-fr {
        background: none !important;
        background-image: none !important;
        box-shadow: none !important;
        border-bottom: none !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        margin: 30px auto 15px auto !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* --- 3.7.b Le LIEN <a> = le drapeau allemand, toute la surface cliquable --- */
    .wp-block-navigation__responsive-container.is-menu-open a.drapeau-de,
    .wp-block-navigation__responsive-container.is-menu-open li.drapeau-de a,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.drapeau-de a,
    .wp-block-navigation__responsive-container.is-menu-open .drapeau-de a {
        background-image: url('https://benjy-maya-mariage.fr/wp-content/uploads/2026/05/Gemini_Generated_Image_4znrig4znrig4znr.png') !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-color: transparent !important;

        color: transparent !important;
        font-size: 0 !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
        white-space: nowrap !important;

        width: 110px !important;
        height: 75px !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;

        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        text-decoration: none !important;
    }

    /* --- 3.7.c Le LIEN <a> = le drapeau français, toute la surface cliquable --- */
    .wp-block-navigation__responsive-container.is-menu-open a.drapeau-fr,
    .wp-block-navigation__responsive-container.is-menu-open li.drapeau-fr a,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.drapeau-fr a,
    .wp-block-navigation__responsive-container.is-menu-open .drapeau-fr a {
        background-image: url('https://benjy-maya-mariage.fr/wp-content/uploads/2026/05/Gemini_Generated_Image_juffbmjuffbmjuff.png') !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-color: transparent !important;

        color: transparent !important;
        font-size: 0 !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
        white-space: nowrap !important;

        width: 110px !important;
        height: 75px !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;

        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        text-decoration: none !important;
    }

}
/* FIN DU @media (max-width: 768px) */


/* ============================================================
   4. FORMULAIRE RSVP - FLUENT FORMS
   ============================================================ */

/* --- 4.1 Conteneur de chaque option --- */
.ff-el-form-check {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
}

/* --- 4.2 La "carte" cliquable = le label (boîte ivoire) --- */
.ff-el-form-check label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 18px !important;
    text-align: center !important;
    border: 2px solid #9CAF88 !important;
    border-radius: 10px !important;
    background-color: #FFF8E7 !important;
    color: #3D4A33 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    /* retour à la ligne propre */
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* --- 4.3 APLATIR le cadre interne (fond + TOUTE bordure / contour) --- */
/* Le texte de l'option est enfermé dans un sous-élément interne qui    */
/* conserve un fond, une bordure (le cadre sombre) et un blocage de     */
/* retour à la ligne hérités du thème. Le thème déclare cette bordure   */
/* avec une priorité élevée : on la bat avec une priorité MAXIMALE via  */
/* l'astuce :not(#…) (ne change pas la cible, gonfle juste la priorité).*/
/* On exclut le <label> qui, lui, garde sa carte ivoire + bordure verte.*/
.ff-el-form-check *:not(label):not(#zz1):not(#zz2):not(#zz3),
.ff-el-form-check *:not(label):not(#zz1):not(#zz2):not(#zz3)::before,
.ff-el-form-check *:not(label):not(#zz1):not(#zz2):not(#zz3)::after {
    border: 0 !important;
    border-style: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Le texte de l'option : inline, retour à la ligne propre, sans cadre */
.ff-el-form-check label > *:not(input),
.ff-el-form-check label span {
    display: inline !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* --- 4.4 Survol --- */
.ff-el-form-check label:hover {
    background-color: #F4D5DA !important;
    border-color: #B76E79 !important;
}

/* --- 4.5 Option sélectionnée : reste IVOIRE (plus de grand aplat vert) --- */
/* On marque la sélection par une bordure rose gold épaisse, un texte    */
/* vert émeraude et un léger halo, pour rester doux tout en restant clair.*/
.ff-el-form-check input[type="radio"]:checked + label,
.ff-el-form-check label:has(input[type="radio"]:checked) {
    background-color: #FFF8E7 !important;
    color: #2D5447 !important;
    border-color: #B76E79 !important;
    border-width: 3px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 10px rgba(183, 110, 121, 0.30) !important;
}

/* --- 4.6 Cacher le rond radio natif --- */
.ff-el-form-check input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ============================================================
   5. BOUTON D'ENVOI + LISTES DÉROULANTES (palette féerique)
   ============================================================ */

/* --- 5.1 Bouton "Confirmation de votre Présence" : rouge -> rose gold --- */
/* Priorité gonflée via :not(#…) pour battre le style du thème/plugin.   */
.fluentform .ff-btn-submit:not(#zz1):not(#zz2):not(#zz3),
.fluentform button[type="submit"]:not(#zz1):not(#zz2):not(#zz3),
.fluentform input[type="submit"]:not(#zz1):not(#zz2):not(#zz3) {
    background: #B76E79 !important;
    background-color: #B76E79 !important;
    background-image: none !important;
    color: #FFF8E7 !important;
    border: 2px solid #B76E79 !important;
    border-radius: 30px !important;
    padding: 14px 28px !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 14px rgba(183, 110, 121, 0.35) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    /* --- centrage + anti-débordement (mobile) --- */
    display: block !important;
    width: -webkit-fit-content !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 18px auto 0 auto !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover,
.fluentform input[type="submit"]:hover {
    background-color: #9C5965 !important;
    border-color: #9C5965 !important;
    box-shadow: 0 6px 18px rgba(183, 110, 121, 0.45) !important;
}

/* --- 5.2 Liste déroulante "Transport" accordée aux cartes ivoire --- */
.fluentform select:not(#zz1):not(#zz2):not(#zz3),
.fluentform select.ff-el-form-control:not(#zz1):not(#zz2):not(#zz3) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #FFF8E7 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233D4A33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    border: 2px solid #9CAF88 !important;
    border-radius: 10px !important;
    color: #3D4A33 !important;
    padding: 14px 44px 14px 18px !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.05rem !important;
    box-shadow: none !important;
}

.fluentform select:focus {
    border-color: #B76E79 !important;
    outline: none !important;
}


/* ============================================================
   FIN DU CSS - MARIAGE BENJAMIN & MARIANNE (v12)
   ============================================================ */