/* ==========================================================================
   VUIDESIGN RESET (Basé sur Frost, optimisé pour GenerateBlocks)
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* -- Transitions globales -- */
a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
    transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
    text-decoration-thickness: 1px;
    text-underline-offset: 4px; /* Petite touche UI sympa */
}

b,
strong,
th {
    font-weight: 600; /* Standard gras */
}

/* -- Surlignage (Utilise ta couleur secondaire) -- */
mark {
    background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-secondary) 100%);
    background-position: 0 85%;
    background-repeat: repeat-x;
    background-size: 100% 30%; /* Effet marqueur plus visible */
    padding: 0 4px;
}

/* ==========================================================================
   FORMS (Adapté à ta grille 4pt et tes variables)
   ========================================================================== */

input,
select,
textarea {
    background-color: var(--color-white);
    border: 1px solid var(--color-dark);
    border-radius: 4px; /* Un léger arrondi moderne */
    color: var(--color-dark);
    font-family: inherit; /* Hérite de ton Inter */
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--vui-body-lh);
    padding: var(--sp12) var(--sp16); /* Utilisation de ta grille 4pt ! */
    width: 100%;
}

input:focus,
textarea:focus {
    background-color: var(--color-surface); /* Ta couleur de fond claire */
    border-color: var(--color-accent); /* Focus sur ton bleu d'accent */
    outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
    width: auto;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
    -webkit-appearance: none;
    appearance: none;
}

::placeholder {
    color: var(--color-dark);
    font-size: var(--text-sm);
    opacity: 0.6;
}

/* ==========================================================================
   BLOCS NATIVE WORDPRESS (Pour le blog par exemple)
   ========================================================================== */

/* -- Code Inline -- */
*:not(.wp-block-code) > code {
    background-color: var(--color-surface);
    color: var(--color-accent);
    font-size: var(--text-sm);
    padding: var(--sp4) var(--sp8);
    border-radius: 4px;
}

/* -- Menu de Navigation Mobile (Si tu n'utilises pas GenerateBlocks pour ça) -- */
.wp-block-navigation__responsive-container.is-menu-open {
    padding: var(--vui-global); /* Ta marge de sécurité */
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
    border: 1px solid currentColor;
    padding: 2px;
}

/* ==========================================================================
   MENU MOBILE : ÉCRASEMENT DE LA VARIABLE WORDPRESS
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: center !important;
}

/* ==========================================================================
   CLASSES UTILITAIRES DE VUIDESIGN
   ========================================================================== */

/* Très utile dans l'éditeur WordPress (Avancé > Classes CSS additionnelles) */

@media only screen and (max-width: 767px) {
    /* Masquer un bloc sur mobile */
    .vui-hide-mobile {
        display: none !important;
    }
}

@media only screen and (max-width: 1024px) {
    /* Inverser l'ordre des colonnes sur tablette/mobile (idéal pour image/texte) */
    .vui-reverse-tablet {
        flex-direction: column-reverse !important;
    }
}