/* ============================================================================
 * Heures des cartes SLOT — une seule ligne, à toute résolution (#15747)
 * ============================================================================
 * CAUSE RACINE (mesurée sur Chrome, pas déduite) :
 *   la carte est figée à `width: 350px !important` (dashboard-ui.php, scroller
 *   horizontal), mais son plus gros texte porte `fs-4x` — une classe Metronic
 *   FLUIDE AU VIEWPORT (RFS). Boîte figée + police qui grossit avec l'écran =
 *   débordement structurel. Mesures de la zone de texte / police `fs-4x` :
 *       360px→182px/30,18px · 900→300/48 · 1180→296/58,77 · ≥1280→283/52
 *   `22:00 - 00:00` demande 6,33 × la police ⟹ `fs-4x` ne tient sur AUCUN
 *   viewport, pas même 360px. À ≥1024px : 50/50 cartes sur 2 lignes.
 *
 * CORRECTIF : lier la police à la ZONE DE TEXTE (container query) et non plus
 * au viewport. La carte ne bouge pas ; c'est la police qui s'aligne sur elle.
 *
 * ⛔ `fs-4x` / `fs-2x` RESTENT sur le <span> : un navigateur sans container
 *    queries (avant Chrome 105 / Safari 16 / Firefox 110) retombe alors sur le
 *    rendu d'aujourd'hui — zéro régression, jamais un écran pire qu'avant.
 * ⛔ `white-space: nowrap` est DANS le @supports, volontairement : hors
 *    @supports il transformerait le retour à la ligne actuel en débordement,
 *    ce qui serait une régression pour ces mêmes vieux navigateurs.
 * ⛔ `!important` est OBLIGATOIRE ici, ce n'est pas de la paresse : Metronic
 *    déclare `.fs-4x { font-size: calc(1.525rem + 3.3vw) !important; }`.
 *    Sans `!important` de notre côté, la règle ci-dessous est morte quelle que
 *    soit sa spécificité — vérifié en direct, la police restait à 58,8px.
 * ==========================================================================*/

.dms-slot-hours-box {
    container-type: inline-size;
    /* ⛔ `width: 100%` est INDISPENSABLE, pas cosmetique : `container-type:
       inline-size` retire la contribution du CONTENU au calcul de la largeur.
       Ce div est un element flex dont la largeur venait justement de son
       contenu ⟹ il tombe a 0, donc `cqi` vaut 0 et la police s'ecrase sur le
       plancher du clamp. Mesure en direct avant correctif : boite 0px,
       police 18px. Avec une largeur definie, la boite reprend ses 283px. */
    width: 100%;
}

@supports (container-type: inline-size) {

    .dms-slot-hours-box .dms-slot-hours {
        display: block;
        white-space: nowrap;
    }

    /* 'HH - HH' fait 3,27 × la police ⟹ 30cqi ≈ 98 % de la zone.
       Plafond 52px = la taille actuelle : on change le format, pas la taille. */
    .dms-slot-hours-box .dms-slot-hours--compact {
        font-size: clamp(18px, 30cqi, 52px) !important;
    }

    /* 'HH:MM - HH:MM' fait 6,33 × la police ⟹ 15cqi ≈ 95 % de la zone.
       Vérifié : zone 182→27,3px (173 requis) · 283→42,4px (269) · 300→45px (285). */
    .dms-slot-hours-box .dms-slot-hours--full {
        font-size: clamp(18px, 15cqi, 52px) !important;
    }
}