/*
 * Fix : padding/marges mal adaptés en mode TABLETTE pour la section
 * "Disponibilité des modèles" (.rolex-availability-section).
 *
 * ── Cause n°1 (colonne interne) ──────────────────────────────────────────
 * La colonne texte utilise "col-12 col-lg-7". En dessous de 992px (donc
 * aussi sur TABLETTE, 768-991px), col-12 s'applique et la colonne prend
 * toute la largeur du .container-fluid, avec seulement le gutter Bootstrap
 * par défaut (12px) + px-2 (8px) = 20px de chaque côté. Sur DESKTOP
 * (>=992px), col-lg-7 rétrécit la colonne à ~58% et la centre. Il manquait
 * une largeur intermédiaire pour la plage 768-991px.
 *
 * ── Cause n°2 (marge de la section, la vraie cause du souci PORTRAIT) ────
 * Dans sass/_custom.scss, la règle source est :
 *   .rolex-availability-section {
 *     margin: 18vh;
 *     @media (max-width: 767.98px) { margin-left: 1vh; margin-right: 1vh; }
 *   }
 * "margin: 18vh" applique 18% de la HAUTEUR de viewport sur les 4 côtés,
 * y compris à gauche/droite. En orientation PORTRAIT (viewport haut et
 * étroit), 18vh devient énorme en pixels (ex. iPad 820x1180 => 212px de
 * marge de CHAQUE côté), ce qui écrase la section sur une bande centrale
 * minuscule. Un correctif existe déjà pour le MOBILE (<768px, marges
 * ramenées à 1vh) mais rien n'a été prévu pour la plage TABLETTE
 * (768-991px) ni pour le fait que la marge horizontale ne devrait de toute
 * façon jamais dépendre de la hauteur de l'écran. En LANDSCAPE tablette et
 * en DESKTOP, la hauteur de viewport est proportionnellement plus petite
 * par rapport à la largeur, donc le problème est moins visible — d'où le
 * "desktop et mobile sont parfaits, seul le portrait tablette ne l'est pas".
 *
 * On applique donc le même traitement que le correctif mobile existant,
 * étendu à la plage tablette, en le renforçant avec !important pour
 * garantir la priorité sur la règle de base compilée dans bundle.css
 * (même sélecteur, même spécificité) — convention déjà utilisée dans
 * rolex-mobile-gutter-unification.css pour ce type de correctif.
 */

@media (min-width: 768px) and (max-width: 991.98px) {
    .rolex-availability-section {
        margin-left: 1vh !important;
        margin-right: 1vh !important;
    }

    .rolex-availability-section .lc-block.col-12.col-lg-7 {
        flex: 0 0 auto;
        width: 75%;
        max-width: 75%;
    }
}