/* ==========================================================================
   mod_vdb_verif_age — fenêtre de vérification de l'âge
   Charte Vins de Bourgueil (style 12 de YOOtheme) : indigo #383888 / #4848a8,
   doré #f0c870, Lato, boutons en pilule et en capitales, cartes arrondies à
   20 px. Le logo du site est blanc sur fond transparent : la fenêtre est donc
   indigo, jamais blanche.

   Tout est préfixé .vdb-age, et les couleurs passent par des variables : un
   autre site peut reprendre le module et repeindre la fenêtre depuis son
   custom.css sans toucher à ce fichier.
   ========================================================================== */

.vdb-age {
    --vdb-age-fond: #383888;
    --vdb-age-fond-clair: #4848a8;
    --vdb-age-dore: #f0c870;
    --vdb-age-dore-survol: #f6d898;
    --vdb-age-texte: #fff;
    --vdb-age-voile: rgba(27, 27, 66, .78);
    --vdb-age-rayon: 20px;
}

/* Voile : indigo profond et flou. Le site se devine, mais ne se lit pas. */
.vdb-age.uk-modal {
    background: var(--vdb-age-voile);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* min-width : vmuikit.css (VM UIKit X, chargée sur toutes les pages) impose
   « min-width: 700px !important » à toute .uk-modal-dialog dès 960 px de large.
   Seul un !important plus spécifique le lève. */
.vdb-age .vdb-age__dialog {
    width: 520px;
    min-width: 0 !important;
    padding: 48px 44px 28px;
    border-radius: var(--vdb-age-rayon);
    background: radial-gradient(120% 70% at 50% 0%, var(--vdb-age-fond-clair) 0%, var(--vdb-age-fond) 70%);
    color: var(--vdb-age-texte);
    text-align: center;
    box-shadow: 0 16px 40px rgba(8, 8, 32, .35);
}

/* Lignes équilibrées : pas de mot isolé (« résidence. ») en fin de paragraphe. */
.vdb-age .vdb-age__titre,
.vdb-age .vdb-age__texte,
.vdb-age .vdb-age__refus,
.vdb-age .vdb-age__mention {
    text-wrap: balance;
}

.vdb-age .vdb-age__logo {
    display: block;
    max-width: 70%;
    height: auto;
    margin: 0 auto;
}

.vdb-age .vdb-age__filet {
    display: block;
    width: 48px;
    height: 2px;
    margin: 26px auto 22px;
    border-radius: 2px;
    background: var(--vdb-age-dore);
}

.vdb-age .vdb-age__titre {
    margin: 0 0 12px;
    color: var(--vdb-age-texte);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.vdb-age .vdb-age__texte {
    margin: 0 0 32px;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
}

/* Boutons : base .uk-button du thème (Lato 600, capitales, pilule), agrandie.
   Oui = doré plein (le bouton primaire du site), Non = contour blanc. */
.vdb-age .vdb-age__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.vdb-age .vdb-age__btn {
    min-width: 150px;
    padding: 0 34px;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 48px;
    letter-spacing: 2px;
}

.vdb-age .vdb-age__btn--oui {
    background: var(--vdb-age-dore);
    border-color: var(--vdb-age-dore);
    color: var(--vdb-age-fond);
}

.vdb-age .vdb-age__btn--oui:hover,
.vdb-age .vdb-age__btn--oui:focus {
    background: var(--vdb-age-dore-survol);
    border-color: var(--vdb-age-dore-survol);
    color: var(--vdb-age-fond);
}

.vdb-age .vdb-age__btn--non {
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
    color: var(--vdb-age-texte);
}

.vdb-age .vdb-age__btn--non:hover,
.vdb-age .vdb-age__btn--non:focus {
    background: var(--vdb-age-texte);
    border-color: var(--vdb-age-texte);
    color: var(--vdb-age-fond);
}

.vdb-age .vdb-age__btn:focus-visible {
    outline: 2px solid var(--vdb-age-dore);
    outline-offset: 3px;
}

/* Réponse « Non » : la fenêtre reste ouverte, ce message s'ajoute sous les boutons. */
.vdb-age .vdb-age__refus {
    margin: 26px 0 0;
    padding: 14px 18px;
    border: 1px solid rgba(240, 200, 112, .55);
    border-radius: 12px;
    background: rgba(240, 200, 112, .12);
    color: var(--vdb-age-texte);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
}

.vdb-age .vdb-age__mention {
    margin: 32px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .62);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .4px;
}

@media (max-width: 559px) {
    .vdb-age .vdb-age__dialog {
        padding: 36px 22px 22px;
    }

    .vdb-age .vdb-age__filet {
        margin: 20px auto 18px;
    }

    .vdb-age .vdb-age__titre {
        font-size: 24px;
    }

    .vdb-age .vdb-age__texte {
        margin-bottom: 26px;
        font-size: 15px;
    }

    /* Deux boutons de même largeur, côte à côte même sur un petit écran. */
    .vdb-age .vdb-age__btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 16px;
    }
}