/* /Components/Layout/MainLayout.razor.rz.scp.css */
main[b-fwmzeyxoyd] {
    padding-bottom: 70px;
}

.bottom-nav[b-fwmzeyxoyd] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    background: var(--kendo-color-surface, #fff);
    border-top: 1px solid var(--kendo-color-border, #e2e2e2);
    z-index: 1000;
}

/* Le <a> est rendu par le composant NavLink, pas par ce layout : il ne porte pas l'attribut de portée,
   d'où ::deep. Les <span> d'icône et de libellé, écrits ici, le portent et n'en ont pas besoin. */
.bottom-nav[b-fwmzeyxoyd]  a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--kendo-color-subtle, #666);
    font-size: 11px;
}

.bottom-nav[b-fwmzeyxoyd]  a.active {
    color: var(--kendo-color-primary, #ff6358);
}

.bottom-nav .k-icon[b-fwmzeyxoyd] {
    font-size: 20px;
}
/* /Components/Pages/PokerTimer.razor.rz.scp.css */
.poker-timer-container[b-rsxh7dumjx] {
    /* Palette reprise de la maquette Poker Club (relevée dans son CSS, 2026-09-29).
       Variables limitées au composant : elles ne débordent pas sur le reste de l'application. */
    --pt-bg: #0c1211;
    --pt-surface: #131c19;
    --pt-line: #2a3731;
    --pt-text: #f0f1e9;
    --pt-muted: #a0ada5;
    --pt-green: #8be1b5;
    --pt-gold: #d5bf83;
    /* Bahnschrift (Windows) donne des chiffres étroits ; les autres plateformes retombent sur la police système. */
    --pt-font-num: 'Bahnschrift', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;

    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Horloge --- */

/* Horloge murale logée dans le coin supérieur gauche de la carte du minuteur,
   au lieu d'occuper une carte entière au-dessus. */
.current-clock[b-rsxh7dumjx] {
    position: absolute;
    top: 14px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: var(--pt-muted);
}

/* Code de la partie, en miroir de l'horloge dans le coin supérieur droit : discret, mais lisible
   de qui veut rejoindre la partie depuis un autre écran. */
.session-code[b-rsxh7dumjx] {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 0.95rem;
    color: var(--pt-muted);
}

.session-code strong[b-rsxh7dumjx] {
    margin-left: 0.3em;
    font-family: var(--pt-font-num);
    letter-spacing: 0.12em;
    color: var(--pt-text);
}

.session-missing[b-rsxh7dumjx],
.session-loading[b-rsxh7dumjx] {
    padding: 30px;
    text-align: center;
    color: var(--pt-muted);
}

.clock-icon[b-rsxh7dumjx] {
    font-size: 0.9em;
}

.clock-time[b-rsxh7dumjx] {
    font-weight: 600;
    font-family: var(--pt-font-num);
    font-variant-numeric: tabular-nums;
    color: var(--pt-green);
}

/* --- Affichage principal --- */

.timer-display[b-rsxh7dumjx] {
    position: relative;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: 15px;
    padding: 30px;
    color: var(--pt-text);
    margin: 20px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.main-timer[b-rsxh7dumjx] {
    text-align: center;
    margin-bottom: 30px;
}

.level-badge[b-rsxh7dumjx] {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pt-green);
}

/* Taille fluide : 8 caractères (« 01:00:00 ») doivent tenir dans ~260 px à 360 px de large. */
.time-value[b-rsxh7dumjx] {
    margin: 0.1em 0 0.15em;
    font-size: clamp(3.5rem, 14vw, 9rem);
    font-weight: 600;
    line-height: 1;
    font-family: var(--pt-font-num);
    font-variant-numeric: tabular-nums;
}

.time-value.urgent[b-rsxh7dumjx] {
    color: #ff4444;
    animation: blink-b-rsxh7dumjx 1s ease-in-out infinite;
}

.level-progress[b-rsxh7dumjx] {
    height: 6px;
    max-width: 480px;
    margin: 0 auto;
    background: var(--pt-line);
    border-radius: 3px;
    overflow: hidden;
}

.level-progress-fill[b-rsxh7dumjx] {
    height: 100%;
    background: var(--pt-green);
    transition: width 1s linear;
}

.elapsed-time[b-rsxh7dumjx] {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--pt-muted);
}

.elapsed-time span[b-rsxh7dumjx] {
    margin-left: 0.4em;
    font-variant-numeric: tabular-nums;
    color: var(--pt-text);
}

/* --- Niveaux --- */

.level-info[b-rsxh7dumjx] {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--pt-line);
    text-align: center;
}

/* La paire petite/grosse blind ne se coupe jamais : c'est l'ante qui passe à la ligne quand la place manque
   (mesuré à 375 px avec 10 000 / 20 000 / ante 2 000, dernier niveau de « Avec Antes »). */
.current-blinds[b-rsxh7dumjx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 16px clamp(12px, 3vw, 32px);
}

.blind-pair[b-rsxh7dumjx] {
    display: flex;
    align-items: flex-end;
    gap: clamp(8px, 3vw, 32px);
}

.blind[b-rsxh7dumjx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.blind-label[b-rsxh7dumjx] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pt-muted);
}

.blind-value[b-rsxh7dumjx] {
    font-size: clamp(1.5rem, 7vw, 4rem);
    font-weight: 600;
    line-height: 1;
    font-family: var(--pt-font-num);
    font-variant-numeric: tabular-nums;
}

.blind-separator[b-rsxh7dumjx] {
    font-size: clamp(1.25rem, 5vw, 3rem);
    line-height: 1;
    color: var(--pt-muted);
}

.blind-ante .blind-value[b-rsxh7dumjx] {
    color: var(--pt-gold);
}

@keyframes blink-b-rsxh7dumjx {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

.next-blinds[b-rsxh7dumjx] {
    margin-top: 20px;
    font-size: 0.95rem;
    color: var(--pt-muted);
}

.next-blinds strong[b-rsxh7dumjx] {
    margin-left: 0.4em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pt-text);
}

.next-ante[b-rsxh7dumjx] {
    margin-left: 0.6em;
    color: var(--pt-gold);
}

/* --- Contrôles --- */

/* Les boutons Telerik sont rendus par un composant enfant : le CSS isolé ne les atteint que via ::deep. */
.controls[b-rsxh7dumjx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
    padding: 20px;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: 15px;
    color: var(--pt-text);
}

.primary-actions[b-rsxh7dumjx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Bouton principal : vert de la palette, texte foncé (contraste mesuré 12,2:1). */
.main-action[b-rsxh7dumjx]  .k-button {
    min-width: 220px;
    border-color: var(--pt-green);
    background: var(--pt-green);
    color: var(--pt-bg);
    font-weight: 700;
}

.main-action[b-rsxh7dumjx]  .k-button:hover:not(.k-disabled) {
    filter: brightness(1.08);
}

.break-action[b-rsxh7dumjx]  .k-button {
    border-color: var(--pt-line);
    color: var(--pt-text);
}

.break-action.is-scheduled[b-rsxh7dumjx]  .k-button {
    border-color: var(--pt-gold);
    color: var(--pt-gold);
}

.secondary-actions[b-rsxh7dumjx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 20px;
    padding-top: 16px;
    border-top: 1px solid var(--pt-line);
}

.tool-actions[b-rsxh7dumjx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.tool-actions[b-rsxh7dumjx]  .k-button {
    color: var(--pt-muted);
}

.tool-actions[b-rsxh7dumjx]  .k-button:hover {
    color: var(--pt-text);
}

/* flex-wrap : à 375 px, libellé + liste (220 px) dépassent les ~239 px de la carte ; le libellé passe au-dessus. */
.structure-selector[b-rsxh7dumjx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 10px;
}

/* --- Inviter un écran --- */

.invite-panel[b-rsxh7dumjx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 28px;
    margin: 20px 0;
    padding: 20px;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: 15px;
    color: var(--pt-text);
}

.invite-panel h3[b-rsxh7dumjx] {
    flex-basis: 100%;
    margin: 0;
    font-size: 1.1rem;
    text-align: center;
}

/* Cadre blanc : le QR reste noir sur blanc dans le thème sombre, lisible par un téléphone. */
.invite-qr[b-rsxh7dumjx] {
    width: min(220px, 70vw);
    padding: 8px;
    background: #ffffff;
    border-radius: 8px;
}

.invite-qr[b-rsxh7dumjx]  svg {
    display: block;
    width: 100%;
    height: auto;
}

.invite-details[b-rsxh7dumjx] {
    text-align: center;
}

.invite-details p[b-rsxh7dumjx] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--pt-muted);
}

.invite-details .invite-code[b-rsxh7dumjx] {
    margin: 4px 0 10px;
    font-family: var(--pt-font-num);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--pt-text);
}

.invite-link[b-rsxh7dumjx] {
    font-size: 0.85rem;
    color: var(--pt-green);
    word-break: break-all;
}

.invite-share[b-rsxh7dumjx] {
    margin-top: 12px;
}

.invite-share[b-rsxh7dumjx]  .k-button {
    border-color: var(--pt-line);
    color: var(--pt-text);
}

.invite-details .invite-share-status[b-rsxh7dumjx] {
    margin-top: 8px;
    color: var(--pt-green);
}

/* Case « Sons sur cet écran », alignée sur les boutons plats voisins. */
.sound-toggle[b-rsxh7dumjx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 0.875rem;
    color: var(--pt-muted);
    cursor: pointer;
}

.sound-toggle input[b-rsxh7dumjx] {
    accent-color: var(--pt-green);
    cursor: pointer;
}

/* Rejoindre une partie : même disposition que le sélecteur de preset, repli sous 375 px. */
.session-join form[b-rsxh7dumjx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 10px;
}

.session-join label[b-rsxh7dumjx] {
    font-size: 0.85rem;
    color: var(--pt-muted);
    white-space: nowrap;
}

.session-join input[b-rsxh7dumjx] {
    width: 6.5ch;
    padding: 6px 8px;
    font-family: var(--pt-font-num);
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: var(--pt-text);
    background: var(--pt-bg);
    border: 1px solid var(--pt-line);
    border-radius: 6px;
}

.session-join input:focus-visible[b-rsxh7dumjx] {
    outline: 2px solid var(--pt-green);
    outline-offset: 1px;
}

.session-join[b-rsxh7dumjx]  .k-button {
    border-color: var(--pt-line);
    color: var(--pt-text);
}

.session-join-error[b-rsxh7dumjx] {
    margin: 6px 0 0;
    font-size: 0.85rem;
    text-align: center;
    color: var(--pt-gold);
}

.structure-selector[b-rsxh7dumjx]  .k-dropdownlist {
    max-width: 100%;
}

.structure-selector label[b-rsxh7dumjx] {
    font-size: 0.85rem;
    color: var(--pt-muted);
    white-space: nowrap;
}

/* --- Dropdown preset --- */

.dropdown-item-content[b-rsxh7dumjx] {
    padding: 4px 0;
}

.structure-name[b-rsxh7dumjx] {
    font-weight: 600;
    font-size: 0.95em;
    color: #333;
    margin-bottom: 4px;
}

.structure-details[b-rsxh7dumjx] {
    display: block;
    font-size: 0.85em;
    color: #666;
    font-weight: 500;
    margin-top: 2px;
}

.empty-structure[b-rsxh7dumjx] {
    color: var(--pt-muted);
}

/* --- Panneau de structure --- */

.structure-panel[b-rsxh7dumjx] {
    margin: 20px 0;
    padding: 24px 20px 12px;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: 15px;
    color: var(--pt-text);
}

.structure-header[b-rsxh7dumjx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.structure-eyebrow[b-rsxh7dumjx] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pt-green);
}

.structure-header h2[b-rsxh7dumjx] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.structure-meta[b-rsxh7dumjx] {
    font-size: 0.85rem;
    color: var(--pt-muted);
}

.structure-table[b-rsxh7dumjx] {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.structure-table th[b-rsxh7dumjx] {
    padding: 8px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: right;
    color: var(--pt-muted);
    border-bottom: 1px solid var(--pt-line);
}

.structure-table td[b-rsxh7dumjx] {
    padding: 9px 10px;
    text-align: right;
    border-bottom: 1px solid var(--pt-line);
}

.structure-table th:first-child[b-rsxh7dumjx],
.structure-table td:first-child[b-rsxh7dumjx] {
    text-align: left;
}

.structure-table tr.is-past td[b-rsxh7dumjx] {
    color: var(--pt-muted);
    opacity: 0.55;
}

/* Ligne courante : liseré vert en inset (une bordure sur <tr> ne se rend pas avec border-collapse). */
.structure-table tr.is-current td[b-rsxh7dumjx] {
    font-weight: 700;
    background: rgba(139, 225, 181, 0.12);
}

.structure-table tr.is-current td:first-child[b-rsxh7dumjx] {
    box-shadow: inset 3px 0 0 var(--pt-green);
}

.structure-source[b-rsxh7dumjx] {
    padding: 12px 10px 0;
    font-size: 0.85rem;
}

.structure-source a[b-rsxh7dumjx] {
    color: var(--pt-muted);
}

.structure-source a:hover[b-rsxh7dumjx],
.structure-source a:focus-visible[b-rsxh7dumjx] {
    color: var(--pt-green);
}

/* --- Configuration --- */

/* Thème sombre de la grille et des champs Telerik par redéfinition des variables Kendo,
   limitée à ce panneau : le thème default-ocean-blue (Telerik 15) colore .k-grid, son en-tête,
   ses lignes alternées, ses champs et ses boutons à partir de ces variables (vérifié dans le CSS livré). */
.config-panel[b-rsxh7dumjx] {
    --kendo-color-app-surface: var(--pt-surface);
    --kendo-color-on-app-surface: var(--pt-text);
    --kendo-color-surface: var(--pt-bg);
    --kendo-color-surface-alt: var(--pt-surface);
    --kendo-color-border: var(--pt-line);
    --kendo-color-border-alt: var(--pt-line);
    --kendo-color-subtle: var(--pt-muted);
    --kendo-color-base: #1d2925;
    --kendo-color-on-base: var(--pt-text);
    --kendo-color-base-subtle: #1a2521;
    --kendo-color-base-hover: #26342f;
    --kendo-color-base-active: #2e3e38;
    --kendo-color-primary: var(--pt-green);
    --kendo-color-on-primary: var(--pt-bg);

    margin: 20px 0;
    padding: 24px 20px;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: 15px;
    color: var(--pt-text);
}

/* Petite / grosse / ante n'ont pas de largeur fixe et se partagent la place (Niveau 70 px, commandes 250 px).
   Plancher à 650 px, soit ~110 px par colonne de valeur : en dessous, le champ d'édition (49 px mesurés
   à 540 px) ne laissait pas lire « 20000 ». Plus étroit que le plancher, la table défile horizontalement. */
.config-panel[b-rsxh7dumjx]  .k-grid table {
    min-width: 650px;
}

.config-panel h3[b-rsxh7dumjx] {
    margin: 0 0 16px;
    font-size: 1.25rem;
    font-weight: 600;
}

.config-locked[b-rsxh7dumjx] {
    margin: 0;
    color: var(--pt-muted);
}

.level-duration[b-rsxh7dumjx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.level-duration label[b-rsxh7dumjx] {
    font-size: 0.85rem;
    color: var(--pt-muted);
}

/* --- Pause --- */

/* La carte du minuteur passe elle-même en mode pause (plus de bannière plein écran par-dessus la page). */
.timer-display.is-break[b-rsxh7dumjx] {
    border-color: var(--pt-gold);
    box-shadow: 0 0 0 1px var(--pt-gold), 0 10px 30px rgba(0,0,0,0.3);
}

.timer-display.is-break .level-badge[b-rsxh7dumjx],
.break-title[b-rsxh7dumjx] {
    color: var(--pt-gold);
}

.break-title[b-rsxh7dumjx] {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blinds-caption[b-rsxh7dumjx] {
    margin-bottom: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pt-gold);
}

.break-resume[b-rsxh7dumjx] {
    font-size: 0.95rem;
    color: var(--pt-muted);
}

/* --- Responsive --- */

/* Libellés plus serrés : à 375 px, « GROSSE BLIND » espacé à 0.18em est plus large que le chiffre qu'il surmonte. */
@media (max-width: 480px) {
    /* L'horloge du coin chevauchait le badge « NIVEAU 01 / 17 » à 375 px (plus au-delà de 480 px, mesuré) :
       on la laisse au-dessus en descendant le contenu de la carte. */
    .timer-display[b-rsxh7dumjx] {
        padding-top: 46px;
    }

    .blind-label[b-rsxh7dumjx] {
        font-size: 0.68rem;
        letter-spacing: 0.08em;
    }
}

/* Deux colonnes à partir de 1000 px : timer et commandes à gauche, structure à droite.
   En dessous (dont l'écran intérieur d'un Fold, ~680-880 px), tout reste empilé. */
@media (min-width: 1000px) {
    .poker-timer-container[b-rsxh7dumjx] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        /* 1fr sur la 2e ligne : le panneau, plus haut que la colonne de gauche, y verse son excédent
           au lieu d'étirer la ligne du timer (écart mesuré : 140 px sans, 40 px avec). */
        grid-template-rows: auto 1fr;
        column-gap: 24px;
        align-items: start;
    }

    .timer-display[b-rsxh7dumjx] {
        grid-column: 1;
        grid-row: 1;
    }

    .controls[b-rsxh7dumjx] {
        grid-column: 1;
        grid-row: 2;
    }

    .structure-panel[b-rsxh7dumjx] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .config-panel[b-rsxh7dumjx] {
        grid-column: 1 / -1;
    }
}
/* /Components/Pages/Ranges.razor.rz.scp.css */
.page-ranges[b-eja8kuxq7e] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 10px 84px; /* la marge basse dégage la navigation fixe */
    max-width: 560px;
    margin: 0 auto;
}

/* app.css applique « main { padding: 0 2em 2em } » à toute l'application. Sur téléphone,
   ces 2em de chaque côté coûtent 56 px à la matrice : la grille tombe de 340 à 284 px,
   la cellule de 25 à 21 px, et la police avec elle. La page les reprend pour elle seule,
   là où la place manque — le layout des autres pages n'est pas touché.

   Le seuil vaut 600 px et non 560 : au-delà, max-width plafonne déjà la page et le
   centrage par « margin: 0 auto » doit reprendre la main. */
@media (max-width: 600px) {
    .page-ranges[b-eja8kuxq7e] {
        margin-inline: -2em;
    }
}

h1[b-eja8kuxq7e] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: .01em;
}

.indisponible[b-eja8kuxq7e] {
    border-left: 3px solid #9d3a35;
    padding: 10px 12px;
    background: rgba(157, 58, 53, .08);
    border-radius: 0 6px 6px 0;
    font-size: .85rem;
    line-height: 1.5;
}

.indisponible-titre[b-eja8kuxq7e] {
    margin: 0 0 6px;
    font-weight: 600;
}

.indisponible ul[b-eja8kuxq7e] {
    margin: 0;
    padding-left: 18px;
}

.indisponible li + li[b-eja8kuxq7e] {
    margin-top: 4px;
}
/* /Components/Pages/Weather.razor.rz.scp.css */
.weather-page[b-pzpf7siqta] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
    color: #f1f5f9;
}

.card-current[b-pzpf7siqta] {
    background: linear-gradient(135deg, #1e40af, #7c3aed);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.current-location[b-pzpf7siqta] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.current-temp[b-pzpf7siqta] {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.current-desc[b-pzpf7siqta] {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.current-stats[b-pzpf7siqta] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    opacity: 0.9;
}

.stat-item[b-pzpf7siqta] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.section-title[b-pzpf7siqta] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin-bottom: 0.75rem;
    color: #f1f5f9;
}

.hourly-band[b-pzpf7siqta] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

.hourly-item[b-pzpf7siqta] {
    background: #1e293b;
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
    min-width: 60px;
    flex-shrink: 0;
    color: #f1f5f9;
}

.hourly-time[b-pzpf7siqta] {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-bottom: 4px;
}

.hourly-emoji[b-pzpf7siqta] {
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.hourly-temp[b-pzpf7siqta] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #93c5fd;
}

.hourly-precip[b-pzpf7siqta] {
    font-size: 0.65rem;
    opacity: 0.7;
    color: #60a5fa;
    margin-top: 2px;
}

.daily-grid[b-pzpf7siqta] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 1.5rem;
}

.daily-item[b-pzpf7siqta] {
    background: #1e293b;
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    color: #f1f5f9;
}

.daily-day[b-pzpf7siqta] {
    font-size: 0.7rem;
    text-transform: capitalize;
    opacity: 0.7;
    margin-bottom: 4px;
}

.daily-emoji[b-pzpf7siqta] {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.daily-max[b-pzpf7siqta] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fbbf24;
}

.daily-min[b-pzpf7siqta] {
    font-size: 0.8rem;
    color: #93c5fd;
}

.daily-precip[b-pzpf7siqta] {
    font-size: 0.65rem;
    opacity: 0.6;
    margin-top: 4px;
}

.weather-error[b-pzpf7siqta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 1rem;
    color: #f87171;
    font-size: 1rem;
    text-align: center;
    padding: 2rem;
}

    .weather-error span[b-pzpf7siqta] {
        font-size: 3rem;
    }
/* /Components/Ranges/RangeControls.razor.rz.scp.css */
/* Deux colonnes dès 360 px : quatre réglages empilés repousseraient la matrice sous
   la ligne de flottaison, alors que le cadrage veut la range visible d'un coup d'œil. */
.commandes[b-ep25njknlp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.champ[b-ep25njknlp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.champ-large[b-ep25njknlp] {
    grid-column: 1 / -1;
}

.etiquette[b-ep25njknlp] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .65;
}
/* /Components/Ranges/RangeGrid.razor.rz.scp.css */
/* Isolation CSS Blazor : aucun popup Telerik ici, donc pas d'exception à faire —
   contrairement au PokerTimer, dont le popup est rendu hors de l'arbre du composant
   et exige un style global. */

.grille[b-40lq6y5v8j] {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 1px;
    width: 100%;

    /* La police des cases se règle en pourcentage de CETTE largeur, pas de la fenêtre :
       la grille reste lisible qu'elle occupe un téléphone ou une colonne d'écran large. */
    container-type: inline-size;

    --case-fold-fond: #dfe3ea;
    --case-fold-texte: #6b7280;
    --case-raise-fond: #1c6b48;
    --case-raise-texte: #f2f7f4;
    --case-shove-fond: #9d3a35;
    --case-shove-texte: #fdf3f2;
    --case-paire-liseré: rgba(154, 106, 18, .85);
}

.case[b-40lq6y5v8j] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;

    background: var(--case-fold-fond);
    color: var(--case-fold-texte);

    /* 3,7cqw sur treize colonnes : environ 12,5 px quand la grille fait 340 px, et la
       cellule 25,2 px. Le format long « AKs » y tient avec 4 px de marge, ce qui permet
       de garder le suffixe s/o plutôt que de s'en remettre à la seule position dans la
       grille.

       Le coefficient précédent — 2,1cqw — supposait une grille de 360 px et n'avait
       jamais été mesuré dans le layout réel. Relevé le 2026-08-18 sur un viewport de
       360 px : la grille n'en recevait que 284 (cf. Ranges.razor.css), et la police
       tombait à 5,96 px, moitié moins que ce que la cellule peut porter. La largeur
       maximale de la case a été mesurée à 11 px de police pour une cellule de 20,9 px,
       soit un texte de 1,67 fois la police — c'est cette relation qui fixe 3,7. */
    font-size: 3.7cqw;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    letter-spacing: -.03em;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

.raise[b-40lq6y5v8j] {
    background: var(--case-raise-fond);
    color: var(--case-raise-texte);
}

.shove[b-40lq6y5v8j] {
    background: var(--case-shove-fond);
    color: var(--case-shove-texte);
}

/* Les paires occupent la diagonale : leur position les identifie déjà, un simple
   liseré suffit à les souligner sans introduire une quatrième couleur qui entrerait
   en concurrence avec les trois actions. */
.paire[b-40lq6y5v8j] {
    box-shadow: inset 0 0 0 1px var(--case-paire-liseré);
}

@media (prefers-color-scheme: dark) {
    .grille[b-40lq6y5v8j] {
        --case-fold-fond: #262c37;
        --case-fold-texte: #8b93a2;
        --case-raise-texte: #eaf4ee;
        --case-shove-texte: #fbeeed;
        --case-paire-liseré: rgba(217, 164, 65, .9);
    }
}
/* /Components/Ranges/RangeSummary.razor.rz.scp.css */
.resume[b-6lnpxq8z5l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frequence[b-6lnpxq8z5l] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.valeur[b-6lnpxq8z5l] {
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.detail[b-6lnpxq8z5l] {
    font-size: .8rem;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

.avertissement[b-6lnpxq8z5l] {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
    opacity: .75;
    max-width: 62ch;
}