/**
 * Pastille de disponibilité des pages produit
 * (partials/disponibilite.blade.php).
 *
 * Feuille de style autonome, chargée directement par wp_enqueue_style()
 * (voir app/setup.php) et NON compilée par Laravel Mix : le bloc ne doit pas
 * dépendre d'une reconstruction de dist/. Elle ne contient donc que du CSS
 * standard - pas de directive Tailwind (@apply, @screen...).
 *
 * Les deux couleurs reprennent celles de la marque, déjà définies dans
 * tailwind.config.js : vert #009a47, rouge #e51a29.
 */

.disponibilite {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Le point porte seul la couleur : le texte reste noir, pour ne pas ajouter
   une troisième couleur de texte à une page déjà chargée. */

.disponibilite__point {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.disponibilite--oui .disponibilite__point {
    background: #009a47;
}

.disponibilite--non .disponibilite__point {
    background: #e51a29;
}

/* Sur la fiche produit, le titre est centré en mobile et aligné à gauche
   à partir de « sm » : la pastille suit. */

.title .disponibilite {
    margin-top: -1rem;
}

@media (max-width: 639px) {
    .title .disponibilite {
        justify-content: center;
    }
}