/**
 * louerunearme.fr — sélecteur de formule de location.
 * Volontairement sobre : hérite des couleurs du thème Turbo plutôt que d'en
 * imposer de nouvelles.
 */

.lua-formules {
    margin-bottom: 1.5rem;
}

.lua-formules__choix {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lua-formules__option {
    flex: 1 1 8rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 1rem;
    border: 1px solid currentColor;
    border-radius: 0.35rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.lua-formules__option:hover,
.lua-formules__option:focus-within {
    opacity: 1;
}

/* L'état sélectionné doit rester lisible sans dépendre de la couleur seule. */
.lua-formules__option:has(input:checked) {
    opacity: 1;
    box-shadow: inset 0 0 0 2px currentColor;
}

.lua-formules__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Repli pour les navigateurs sans :has() — la puce radio reste visible. */
@supports not selector(:has(*)) {
    .lua-formules__option input {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
    }

    .lua-formules__option {
        opacity: 1;
    }
}

.lua-formules__label {
    font-weight: 600;
}

.lua-formules__detail {
    font-size: 0.85em;
    opacity: 0.75;
}

.lua-formules__message:empty {
    display: none;
}

.lua-formules__message {
    margin-top: 0.75rem;
    font-size: 0.9em;
}

/**
 * Largeur du bloc photo.
 *
 * Le modèle Elementor « Single Product Page » (post 16055) applique
 * `--align-self: center` au widget de l'image. Dans un conteneur en colonne,
 * l'élément cesse alors de s'étirer et sa largeur se calcule sur son contenu.
 * Or la galerie du thème est construite en `w-full` — 100 % du parent : la
 * largeur devient circulaire et le cadre s'effondre en un petit carré gris.
 *
 * On impose une largeur explicite plutôt que de disputer `--align-self` à
 * Elementor, dont la règle est plus spécifique. Le réglage propre reste de
 * remettre « Align Self » sur « Stretch » dans Elementor.
 */
/**
 * La largeur est posée sur le widget lui-même, pas sur son conteneur interne :
 * Elementor applique à ce dernier une marge en `-25px` avec une spécificité
 * plus forte que la nôtre, et toute tentative de le centrer y échouerait.
 * Sur le widget, `--align-self: center` fait le centrage tout seul.
 *
 * **`max-width` est le seul réglage à toucher si la photo paraît trop grande
 * ou trop petite.**
 */
.elementor-widget-tm_single_product_image {
    width: 100%;
    max-width: 30rem;
}

.elementor-widget-tm_single_product_image > .elementor-widget-container,
.elementor-widget-tm_single_product_image .product-carousel-container {
    width: 100%;
}

/**
 * Photo de la fiche produit.
 *
 * Le gabarit du thème place l'image dans un cadre `aspect-[4/3]` (paysage) avec
 * `object-cover`. La photo de l'ATA fait 771 × 1000 px, donc du portrait : le
 * recadrage n'en laissait qu'une mince bande centrale, quasi blanche sur le
 * fond gris clair du cadre — d'où l'impression qu'aucune image ne s'affichait.
 *
 * `contain` montre la photo entière quelle que soit son orientation. À garder
 * tant que les visuels d'armes ne sont pas cadrés à un format homogène.
 */
.elementor-widget-tm_single_product_image figure img,
.product-carousel-container figure img {
    object-fit: contain;
}

/**
 * La date de retour est calculée à partir de la formule : elle reste affichée,
 * mais ne s'ouvre plus au clic.
 */
.lua-retour-verrouille .drop-off-date-picker {
    pointer-events: none;
    opacity: 0.65;
}