/* /Components/KdpAdsPilotPro/Components/Layout/KdpLayout.razor.rz.scp.css */
.kdp-shell[b-l1llzqfsi9] {
    min-height: 100vh;
    background: var(--sol-bg, #09121f);
}

.kdp-main[b-l1llzqfsi9] {
    padding: 0;
}
/* /Components/KdpAdsPilotPro/Components/Layout/KdpLoginLayout.razor.rz.scp.css */
.kdp-login-shell[b-rumibxft38] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sol-bg, #09121f);
    padding: 16px;
}
/* /Components/KdpAdsPilotPro/Components/Layout/KdpNavMenu.razor.rz.scp.css */
/* Mobile-first : par défaut (petit écran), la marque + le bouton hamburger
   sont sur une ligne, et le menu est un panneau repliable en dessous.
   La règle @media plus bas bascule vers un menu en ligne pour desktop. */

.kdp-nav[b-c6bsuqbjo0] {
    background: #101620;
    border-bottom: 1px solid #1c2638;
}

.kdp-nav-bar[b-c6bsuqbjo0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
}

.kdp-nav-brand[b-c6bsuqbjo0] {
    font-weight: 700;
    font-size: 1rem;
    color: #c8d8e8;
    text-decoration: none;
    white-space: nowrap;
}

.kdp-nav-toggle[b-c6bsuqbjo0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 10px 8px;
    cursor: pointer;
}

.kdp-nav-toggle-bar[b-c6bsuqbjo0] {
    width: 22px;
    height: 2px;
    background: #c8d8e8;
    border-radius: 1px;
}

.kdp-nav-links[b-c6bsuqbjo0] {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px 12px;
}

    .kdp-nav-links.open[b-c6bsuqbjo0] {
        display: flex;
    }

.kdp-nav-link[b-c6bsuqbjo0] {
    padding: 12px 12px;
    border-radius: 6px;
    font-size: .85rem;
    color: var(--sol-muted, #a7b6ca);
    text-decoration: none;
}

    .kdp-nav-link:hover[b-c6bsuqbjo0],
    .kdp-nav-link.active[b-c6bsuqbjo0] {
        color: #45C4DC;
        background: var(--sol-panel, #0e1b2d);
    }

.kdp-nav-logout[b-c6bsuqbjo0] {
    margin-top: 6px;
    background: transparent;
    border: 1px solid #1c2638;
    border-radius: 6px;
    color: var(--sol-muted, #a7b6ca);
    font-size: .85rem;
    padding: 12px;
    cursor: pointer;
    text-align: left;
}

    .kdp-nav-logout:hover[b-c6bsuqbjo0] {
        color: #e0566a;
        border-color: #e0566a;
    }

/* ── Desktop : menu toujours visible, en ligne avec la marque ── */
@media (min-width: 768px) {
    .kdp-nav[b-c6bsuqbjo0] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 6px 24px;
    }

    .kdp-nav-bar[b-c6bsuqbjo0] {
        padding: 6px 0;
        width: auto;
    }

    .kdp-nav-toggle[b-c6bsuqbjo0] {
        display: none;
    }

    .kdp-nav-links[b-c6bsuqbjo0] {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        flex: 1;
        flex-wrap: wrap;
        padding: 0;
        gap: 4px;
    }

    .kdp-nav-link[b-c6bsuqbjo0] {
        padding: 6px 10px;
    }

    .kdp-nav-logout[b-c6bsuqbjo0] {
        margin-top: 0;
        margin-left: auto;
    }
}
/* /Components/KdpAdsPilotPro/Components/Pages/Diagnostic.razor.rz.scp.css */
/* ============================================================
   Fichier  : Diagnostic.razor.css
   Rôle     : Styles de la page Diagnostic.
              Thème dark professionnel — inspiré Grafana / TradingView.
              Préfixe : diag-

   ── PALETTE ────────────────────────────────────────────────
   Fond page       : hérite du layout global (bg-base #0f131a)
   Surfaces L1     : #151b24  → cartes, piliers, placements
   Surfaces L2     : #1c2638  → internes (action-box, th, inputs)
   Surfaces L3     : #22304a  → hover, métriques sélectionnées

   Bordures        : #1c2638  → solide et net
   Bordures hover  : #2a3a50  → légèrement plus claire au survol

   Texte principal : #e6ecf3  → blanc cassé bleuté
   Texte secondaire: #8a9bb0  → gris bleuté moyen
   Labels uppercase: #5a7a9a  → gris bleuté discret

   ── COULEURS SÉMANTIQUES ───────────────────────────────────
   CTA / onglet actif : #FF9900  → orange — réservé aux actions
   Warning / amber    : #E0A040  → ambre — prudence uniquement
   Positif / vert     : #2EC98A  → var(--green)
   Erreur / rouge     : #ef5a5a  → var(--red)
   Info / cyan        : #45C4DC  → var(--cyan)
   ============================================================ */

/* ── PAGE ─────────────────────────────────────────────────── */
/* 1200px → 1440px (2026-09-20) : le redesign solyvr-theme.css a élargi la police et
   le padding des tableaux (lisibilité/cible tactile, voulu) mais ça poussait plus de
   colonnes hors de la largeur fixe qu'avant, donc plus de scroll horizontal sur
   l'Explorer. Cartes résumé, barre d'onglets et tableau vivent tous dans cette même
   boîte : l'élargir les élargit tous ensemble, sans jamais rendre le tableau plus
   large que le reste de la page. Même valeur que .vp-page (VuePortefeuille.razor.css)
   pour rester cohérent entre les deux pages. */
.diag-page[b-qmyqc9ffv2] {
    max-width: 1440px;
    margin: 0 auto;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    color: #e6ecf3;
}

.diag-title[b-qmyqc9ffv2] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FF9900;
}

.diag-subtitle[b-qmyqc9ffv2] {
    font-size: 0.78rem;
    color: var(--sol-muted, #a7b6ca);
}

.diag-hint[b-qmyqc9ffv2] {
    font-size: 0.78rem;
    color: var(--sol-muted, #a7b6ca);
}

.diag-header-border[b-qmyqc9ffv2] {
    border-bottom: 1px solid #1c2638;
}

.diag-link[b-qmyqc9ffv2] {
    color: #FF9900;
    text-decoration: none;
}

    .diag-link:hover[b-qmyqc9ffv2] {
        text-decoration: underline;
    }

/* ── ALERTES ─────────────────────────────────────────────── */
.diag-alert-error[b-qmyqc9ffv2] {
    background: rgba(224,86,106,.10);
    border: 1px solid rgba(224,86,106,.35);
    color: #ef5a5a;
    border-radius: 8px;
    font-size: .82rem;
}

/* ── BARRE DE CONTRÔLES ──────────────────────────────────── */
.diag-card[b-qmyqc9ffv2] {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-radius: 10px;
    padding: 14px 16px;
}

/* ── CARTES ONGLET ÉVOLUTION (graphiques Ventes/Dépense pub + BSR) ─── */
.diag-evolution-titre[b-qmyqc9ffv2] {
    font-size: .82rem;
    font-weight: 700;
    color: #e6ecf3;
    margin-bottom: 2px;
}

.diag-evolution-sous-titre[b-qmyqc9ffv2] {
    font-size: .72rem;
    color: var(--sol-muted, #a7b6ca);
    margin-bottom: 12px;
}

/* ── CARTE BSR / CLASSEMENTS / NOTE AMAZON ───────────────── */
.diag-bsr-header[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.diag-bsr-title[b-qmyqc9ffv2] {
    font-size: .82rem;
    font-weight: 700;
    color: #e6ecf3;
}

.diag-bsr-actions[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.diag-bsr-date[b-qmyqc9ffv2] {
    font-size: .68rem;
    color: var(--sol-muted, #a7b6ca);
    display: flex;
    align-items: center;
    gap: 6px;
}

.diag-bsr-refresh[b-qmyqc9ffv2] {
    background: transparent;
    border: 1px solid #1c2638;
    border-radius: 6px;
    color: var(--sol-muted, #a7b6ca);
    font-size: .78rem;
    line-height: 1;
    padding: 4px 7px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s, opacity .15s, transform .25s;
}

    .diag-bsr-refresh:hover:not(:disabled)[b-qmyqc9ffv2] {
        background: var(--sol-panel-raised, #16263b);
        border-color: #2a3a50;
        color: #e6ecf3;
        transform: rotate(90deg);
    }

    .diag-bsr-refresh:disabled[b-qmyqc9ffv2] {
        opacity: .35;
        cursor: not-allowed;
    }

/* Avertissement discret : dernière tentative de rafraîchissement
   échouée, affiché AU-DESSUS des données encore valides — jamais à
   leur place (voir diag-alert-error pour l'état "aucune donnée du tout"). */
.diag-bsr-echec-recent[b-qmyqc9ffv2] {
    background: rgba(224,86,106,.08);
    border: 1px solid rgba(224,86,106,.25);
    color: #ef5a5a;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: .68rem;
    line-height: 1.4;
}

.diag-bsr-content[b-qmyqc9ffv2] {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
}

.diag-bsr-table-wrap[b-qmyqc9ffv2] {
    flex: 1 1 260px;
}

.diag-bsr-rating[b-qmyqc9ffv2] {
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    min-width: 160px;
}

/* ── Étoiles Amazon (dorées, remplissage partiel) ────────── */
.diag-stars[b-qmyqc9ffv2] {
    position: relative;
    display: inline-block;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: 2px;
}

.diag-stars-vides[b-qmyqc9ffv2] {
    color: #2a3a50;
}

.diag-stars-pleines[b-qmyqc9ffv2] {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: var(--diag-stars-pct, 0%);
    white-space: nowrap;
    color: #FFA41C;
}

.diag-bsr-note-val[b-qmyqc9ffv2] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #FFA41C;
    font-size: 1.15rem;
}

.diag-bsr-nbavis[b-qmyqc9ffv2] {
    color: var(--sol-muted, #a7b6ca);
    font-size: .68rem;
    font-weight: 400;
}

/* ── Badge "N°1 des ventes" ───────────────────────────────── */
.diag-bsr-badge-1[b-qmyqc9ffv2] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #FF9900;
    color: #14202e;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    vertical-align: middle;
}

.diag-bsr-rang-1[b-qmyqc9ffv2] {
    color: #FFA41C !important;
    font-weight: 800;
}

.diag-controls[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.diag-select[b-qmyqc9ffv2] {
    background: var(--sol-panel-raised, #16263b);
    border: 1px solid #2a3a50;
    border-radius: 6px;
    color: #e6ecf3;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .80rem;
    padding: 6px 10px;
    flex: 1;
    min-width: 180px;
    max-width: 340px;
}

    .diag-select:focus[b-qmyqc9ffv2] {
        outline: none;
        border-color: #FF9900;
        box-shadow: 0 0 0 2px rgba(255,153,0,.12);
    }

.diag-raccourcis[b-qmyqc9ffv2] {
    display: flex;
    gap: 4px;
}

.diag-raccourci[b-qmyqc9ffv2] {
    background: transparent;
    border: 1px solid #2a3a50;
    border-radius: 5px;
    color: var(--sol-muted, #a7b6ca);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .72rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: all .12s;
}

    .diag-raccourci:hover[b-qmyqc9ffv2] {
        border-color: rgba(255,153,0,.5);
        color: #FF9900;
    }

.diag-raccourci-actif[b-qmyqc9ffv2] {
    background: rgba(255,153,0,.10);
    border-color: #FF9900;
    color: #FF9900;
    font-weight: 700;
}

.diag-dates[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.diag-input-date[b-qmyqc9ffv2] {
    background: var(--sol-panel-raised, #16263b);
    border: 1px solid #2a3a50;
    border-radius: 5px;
    color: #e6ecf3;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .75rem;
    padding: 5px 8px;
    width: 120px;
    color-scheme: dark;
}

    .diag-input-date:focus[b-qmyqc9ffv2] {
        outline: none;
        border-color: #FF9900;
        box-shadow: 0 0 0 2px rgba(255,153,0,.12);
    }

.diag-dates-sep[b-qmyqc9ffv2] {
    color: var(--sol-muted, #a7b6ca);
    font-size: .80rem;
}

/* ── COMPARAISON DE PÉRIODES (Phase 5, mode N=2) ─────────── */
/* background: transparent explicite (2026-09-13) — sans lui, ce <button>
   prenait le fond `buttonface` par défaut du navigateur, c'est-à-dire une
   pastille BLANCHE au milieu de la barre sombre dès que la comparaison
   était désactivée. */
.diag-cmp-toggle[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #2a3a50;
    background: transparent;
    color: var(--sol-muted, #a7b6ca);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    transition: .15s;
    cursor: pointer;
}

    .diag-cmp-toggle:hover[b-qmyqc9ffv2] {
        border-color: rgba(155, 124, 224, .4);
        color: #e6ecf3;
    }

.diag-cmp-toggle-actif[b-qmyqc9ffv2] {
    border-color: rgba(155, 124, 224, .4);
    background: rgba(155, 124, 224, .08);
    color: #9b7ce0;
}

.diag-cmp-switch[b-qmyqc9ffv2] {
    position: relative;
    width: 30px;
    height: 17px;
    border-radius: 9px;
    background: #22304a;
    border: 1px solid #2a3a50;
    flex: 0 0 auto;
    transition: .18s;
}

    .diag-cmp-switch[b-qmyqc9ffv2]::after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #5a7a9a;
        transition: .18s;
    }

.diag-cmp-toggle-actif .diag-cmp-switch[b-qmyqc9ffv2] {
    background: rgba(155, 124, 224, .35);
    border-color: #9b7ce0;
}

    .diag-cmp-toggle-actif .diag-cmp-switch[b-qmyqc9ffv2]::after {
        transform: translateX(13px);
        background: #9b7ce0;
    }

.diag-cmp-select[b-qmyqc9ffv2] {
    min-width: 0;
    width: auto;
    font-size: .74rem;
    padding: 3px 6px;
}

.diag-btn-calculer[b-qmyqc9ffv2] {
    background: #FF9900;
    color: #000;
    border: none;
    border-radius: 6px;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    font-weight: 700;
    padding: 7px 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity .15s;
    white-space: nowrap;
    cursor: pointer;
}

    .diag-btn-calculer:hover:not(:disabled)[b-qmyqc9ffv2] {
        opacity: .85;
    }

    .diag-btn-calculer:disabled[b-qmyqc9ffv2] {
        opacity: .35;
        cursor: not-allowed;
    }

/* ── EXPORT (JSON / ZIP de CSV) ───────────────────────────── */
.diag-export[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.diag-export-label[b-qmyqc9ffv2] {
    font-size: .72rem;
    color: var(--sol-muted, #a7b6ca);
}

.diag-btn-export[b-qmyqc9ffv2] {
    background: transparent;
    color: var(--sol-accent, #FF9900);
    border: 1px solid var(--sol-accent, #FF9900);
    border-radius: 6px;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 12px;
    min-height: 34px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .diag-btn-export:hover:not(:disabled)[b-qmyqc9ffv2] {
        background: var(--sol-accent, #FF9900);
        color: #211400;
    }

    .diag-btn-export:disabled[b-qmyqc9ffv2] {
        opacity: .35;
        cursor: not-allowed;
    }

/* ── BANNIÈRE ÉVÉNEMENT ───────────────────────────────────── */
.diag-event-banner[b-qmyqc9ffv2] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.diag-event-badge[b-qmyqc9ffv2] {
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.diag-event-actif[b-qmyqc9ffv2] {
    background: rgba(69,196,220,.12);
    border: 1px solid rgba(69,196,220,.4);
    color: #45C4DC;
}

.diag-event-postevent[b-qmyqc9ffv2] {
    background: rgba(224,160,64,.10);
    border: 1px solid rgba(224,160,64,.35);
    color: #E0A040;
}

.diag-event-critique[b-qmyqc9ffv2] {
    font-size: .76rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(224,86,106,.15);
    border: 1px solid rgba(224,86,106,.4);
    color: #ef5a5a;
    animation: pulse-rouge-b-qmyqc9ffv2 2s infinite;
}

@keyframes pulse-rouge-b-qmyqc9ffv2 {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

/* ── LOADING ─────────────────────────────────────────────── */
.diag-loading[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px;
    color: var(--sol-muted, #a7b6ca);
    font-size: .82rem;
}

.diag-initial[b-qmyqc9ffv2] {
    text-align: center;
    padding: 48px;
    color: var(--sol-muted, #a7b6ca);
    font-size: .82rem;
}

/* .diag-tabs/.diag-tab/.diag-tab-actif/.diag-tab-badge déplacés
   dans wwwroot/css/kdp-diag.css (Phase 2) — la barre d'onglets
   principale (ici) et le sélecteur de grain de ExplorerVue.razor
   (extrait) partagent maintenant ce même style. */

/* ── CARDS PILIER ────────────────────────────────────────── */
/* Trafic/Conversion/Rentabilité côte à côte plutôt qu'empilées en
   pleine largeur (retour utilisateur 2026-09-13, comme la maquette
   .piliers) — chaque carte garde mb-3 pour l'espacement vertical
   quand elle retombe seule sur une ligne (mobile/écran étroit). */
.diag-piliers-grid[b-qmyqc9ffv2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 10px;
    /* align-items: start (2026-09-13) — sans lui, les 3 cartes s'étirent à la
       hauteur de Trafic (11 métriques contre 5 pour Rentabilité), ce qui
       creusait un vide de plusieurs centaines de pixels dans les deux autres. */
    align-items: start;
}

.diag-pilier[b-qmyqc9ffv2] {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    /* Le liseré d'état est en haut : il neutralise ici le border-left de 3px
       posé par les classes .diag-badge-*-border (globales, partagées avec les
       cartes placement/budget qui le gardent, elles). */
    border-left-width: 1px !important;
    border-top-width: 2px;
    border-radius: 10px;
    overflow: hidden;
}

/* .diag-badge-*-border (base transparente) déplacé dans
   wwwroot/css/kdp-diag.css — partagé avec PlacementsTableau.razor */

/* Le liseré coloré passe du bord GAUCHE au bord HAUT (2026-09-13) et change
   de signification. Il encodait jusqu'ici l'IDENTITÉ du pilier (cyan =
   Visibilité, amber = Conversion, vert = Rentabilité…) — d'où une carte
   Conversion bordée d'ambre alors que son état est bon, et une carte
   Rentabilité bordée de vert alors qu'elle est dans le rouge : la couleur
   la plus visible de la carte disait l'inverse de son état.
   Elle encode désormais l'ÉTAT, comme partout ailleurs dans la page.
   Les couleurs d'identité restent utilisées pour la « métrique capitaine »
   de chaque pilier, plus bas dans cette feuille. */
.diag-pilier.diag-badge-vert-border[b-qmyqc9ffv2] {
    border-top-color: #2EC98A;
}

.diag-pilier.diag-badge-amber-border[b-qmyqc9ffv2] {
    border-top-color: #E0A040;
}

.diag-pilier.diag-badge-rouge-border[b-qmyqc9ffv2] {
    border-top-color: #ef5a5a;
}

.diag-pilier.diag-badge-gris-border[b-qmyqc9ffv2] {
    border-top-color: #5a7a9a;
}

.diag-pilier.diag-badge-suspendu-border[b-qmyqc9ffv2] {
    border-top-color: #6B8FBF;
}

.diag-pilier-header[b-qmyqc9ffv2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    transition: background .12s;
}

    .diag-pilier-header:hover[b-qmyqc9ffv2] {
        background: rgba(255,255,255,0.02);
    }

.diag-pilier-left[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* L'emoji d'état est remplacé par une pastille (2026-09-13) : à 1.2rem il
   pesait plus lourd que le nom du pilier. La couleur vient de la classe
   .diag-badge-* posée à côté, qui ne définit qu'un `color` — d'où currentColor. */
.diag-pilier-icone[b-qmyqc9ffv2] {
    font-size: .95rem;
    line-height: 1;
}

.diag-pilier-pastille[b-qmyqc9ffv2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255,255,255,.05);
}

/* Libellé de sous-pilier (VISIBILITÉ / ATTRACTIVITÉ) dans la carte Trafic :
   la fusion de 2026-08 avait fait disparaître toute trace de l'origine des
   métriques. Le filet à droite sépare sans ajouter de bordure de bloc. */
.diag-souspilier-titre[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 600;
    color: var(--sol-muted, #a7b6ca);
    margin: 14px 0 9px;
}

    .diag-souspilier-titre:first-child[b-qmyqc9ffv2] {
        margin-top: 4px;
    }

    .diag-souspilier-titre[b-qmyqc9ffv2]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--sol-panel-raised, #16263b);
    }

.diag-pilier-nom[b-qmyqc9ffv2] {
    font-size: 1rem;
    font-weight: 700;
    color: #e6ecf3;
    display: block;
}

/* L'état passe à droite de l'en-tête, en pastille cerclée (2026-09-13).
   Sur une 2e ligne sous le nom, il doublait la hauteur de l'en-tête. */
/* Police sans-serif sur les éléments de chrome (2026-09-13). Toute la page
   est en 'Space Mono' : élégant sur des chiffres alignés, lourd et large
   sur des libellés en capitales. La maquette réservait le mono aux valeurs
   et passait l'habillage en sans — c'est ce qui manquait ici. Les valeurs
   chiffrées (.diag-m-val et consorts) restent en mono. */
.diag-pilier-etat[b-qmyqc9ffv2],
.diag-m-label[b-qmyqc9ffv2],
.diag-souspilier-titre[b-qmyqc9ffv2],
.diag-detail-toggle[b-qmyqc9ffv2],
.diag-resume-label[b-qmyqc9ffv2] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.diag-pilier-etat[b-qmyqc9ffv2] {
    font-size: .68rem;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid currentColor;
    border-radius: 4px;
    white-space: nowrap;
}

.diag-pilier-right[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.diag-pilier-chevron[b-qmyqc9ffv2] {
    color: var(--sol-muted, #a7b6ca);
    font-size: .80rem;
}

.diag-pilier-body[b-qmyqc9ffv2] {
    padding: 0 18px 16px;
    border-top: 1px solid #1c2638;
}

/* ── CARTE "TRAFIC" (fusion Visibilité + Attractivité) ─────────
   Plus de couleur d'identité sur la bordure : le liseré haut porte
   l'état, voir le bloc .diag-pilier.diag-badge-*-border plus haut. */
.diag-pilier-trafic[b-qmyqc9ffv2] {
    border-left-color: #1c2638;
}

/* .diag-souspilier* retirées (2026-09-13) — Trafic fusionne maintenant
   Visibilité+Attractivité jusque dans les métriques, plus de sous-carte
   séparée par pilier source à styler. */

/* ── BADGE MATURITÉ (pas une carte pleine taille — niveau de
   confiance sur les autres cartes, toujours visible) ─────────── */
.diag-maturite-badge[b-qmyqc9ffv2] {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-radius: 10px;
    overflow: hidden;
}

.diag-maturite-header[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    cursor: pointer;
    user-select: none;
}

    .diag-maturite-header:hover[b-qmyqc9ffv2] {
        background: rgba(255,255,255,0.02);
    }

.diag-maturite-texte[b-qmyqc9ffv2] {
    font-size: .78rem;
    color: var(--sol-muted, #a7b6ca);
    flex: 1;
}

.diag-suspended-info[b-qmyqc9ffv2] {
    font-size: .78rem;
    color: #45C4DC;
    background: rgba(69,196,220,.07);
    border: 1px solid rgba(69,196,220,.18);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 12px 0;
}

.diag-action-box[b-qmyqc9ffv2] {
    background: transparent;
    border-left: 2px solid #2a3a50;
    border-radius: 0;
    padding: 6px 14px;
    margin: 12px 0;
}

.diag-action-label[b-qmyqc9ffv2] {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sol-muted, #a7b6ca);
    display: block;
    margin-bottom: 4px;
}

.diag-action-text[b-qmyqc9ffv2] {
    font-size: .78rem;
    color: var(--sol-muted, #a7b6ca);
    line-height: 1.5;
}

/* ── GRILLE DE MÉTRIQUES ─────────────────────────────────────
   Passée en vraie grille (2026-09-13, 2e passe). L'ancienne version
   était un flex-wrap à gap 18px : la largeur de chaque tuile suivait
   la longueur de son libellé, si bien que les métriques se répartissaient
   2, puis 1, puis 1, puis 3, puis 3, puis 1 par ligne — aucune colonne
   sur laquelle l'œil puisse s'aligner. Une grille auto-fit donne des
   tuiles de largeur identique qui se replacent seules selon la place.
   Le clic vers le panneau d'explication
   (.diag-metriques-layout/.diag-m-panel) est inchangé. */
.diag-metriques-grid[b-qmyqc9ffv2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 7px;
    margin-bottom: 12px;
}

/* Tuile cliquable. L'ancien style (fond transparent + soulignement au
   survol) ne signalait pas assez qu'on peut cliquer pour obtenir
   l'explication de la métrique — la fonctionnalité existait sans être
   découvrable. Elle devient une vraie carte avec relief au survol. */
.diag-m[b-qmyqc9ffv2] {
    position: relative;
    background: var(--sol-panel-raised, #16263b);
    border: 1px solid #1e2733;
    border-radius: 6px;
    padding: 9px 11px;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .12s;
}

    .diag-m:hover[b-qmyqc9ffv2] {
        background: #232e3d;
        border-color: #2a3a50;
        transform: translateY(-1px);
    }

    .diag-m:hover .diag-m-label[b-qmyqc9ffv2] {
        color: var(--sol-muted, #a7b6ca);
    }

/* Pastille « i » — la seule chose qui signale que la tuile ouvre une
   explication. Générée en CSS plutôt qu'ajoutée dans chacune des ~20
   tuiles du markup : une seule règle à maintenir, aucune chance d'en
   oublier une. */
    .diag-m[b-qmyqc9ffv2]::after {
        content: "i";
        position: absolute;
        top: 8px;
        right: 9px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        border: 1px solid #27323f;
        color: var(--sol-muted, #a7b6ca);
        font-size: .5rem;
        font-weight: 700;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color .12s, color .12s, background .12s;
    }

    .diag-m:hover[b-qmyqc9ffv2]::after,
    .diag-m-actif[b-qmyqc9ffv2]::after {
        border-color: #FF9900;
        color: #FF9900;
        background: rgba(255,153,0,.12);
    }

/* Grille des métriques révélées par un « Détail ». Séparée de la grille
   principale : le bouton se glisse entre les deux, sinon les tuiles
   secondaires se rangeaient dans la même grille — donc au-dessus du bouton
   censé les commander. Léger décalage à gauche pour marquer la subordination. */
.diag-metriques-grid-detail[b-qmyqc9ffv2] {
    margin-top: 8px;
    margin-left: 10px;
    border-left: 1px solid #1c2638;
    padding-left: 10px;
}

/* Tuile secondaire (contenu d'un « Détail ») : contour en pointillés, pour
   qu'on voie d'un coup d'œil ce qui vient d'être déplié. */
.diag-m-secondaire[b-qmyqc9ffv2] {
    background: transparent;
    border-style: dashed;
}

    .diag-m-secondaire:hover[b-qmyqc9ffv2] {
        background: var(--sol-panel-raised, #16263b);
    }

/* Libellé en capitales espacées : distingue nettement l'étiquette de la
   valeur, et rend la grille lisible en diagonale. Le padding droit réserve
   la place de la pastille « i ». */
.diag-m-label[b-qmyqc9ffv2] {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--sol-muted, #a7b6ca);
    padding-right: 18px;
    transition: color .12s;
}

.diag-m-val[b-qmyqc9ffv2] {
    font-size: .92rem;
    font-weight: 600;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    color: #e6ecf3;
}

/* .diag-m-val-accent déplacé dans wwwroot/css/kdp-diag.css —
   partagé avec PlacementsTableau.razor (carte "Break-even ACOS") */

.diag-m-val-vert[b-qmyqc9ffv2] {
    color: #2EC98A;
}

.diag-m-val-rouge[b-qmyqc9ffv2] {
    color: #ef5a5a;
}

.diag-m-val-param[b-qmyqc9ffv2] {
    color: #E0A040;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

/* Tuile dont le panneau d'explication est ouvert. Le soulignement seul
   ne suffisait plus une fois la tuile devenue une carte : c'est tout le
   contour qui prend l'accent. */
.diag-m-actif[b-qmyqc9ffv2] {
    background: #232e3d !important;
    border-color: #FF9900 !important;
    box-shadow: 0 0 0 1px rgba(255,153,0,.30);
}

    .diag-m-actif .diag-m-label[b-qmyqc9ffv2] {
        color: #FF9900;
    }

.diag-m-sur[b-qmyqc9ffv2] {
    font-size: .72rem;
    font-weight: 400;
    color: var(--sol-muted, #a7b6ca);
    margin-left: 3px;
}

/* Légende sous la valeur. L'italique (2026-08) empilait un 3e style de
   texte dans une tuile qui en a déjà deux ; retiré au profit d'une
   simple nuance de gris. */
.diag-m-sublabel[b-qmyqc9ffv2] {
    font-size: .63rem;
    color: var(--sol-muted, #a7b6ca);
    margin-top: 2px;
    display: block;
    line-height: 1.35;
}

/* ── PANNEAU LATÉRAL MÉTRIQUE ────────────────────────────── */
.diag-metriques-layout[b-qmyqc9ffv2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

/* Le panneau reste SOUS les tuiles, pleine largeur (2026-09-13).
   Il passait en colonne latérale de 250 px au-dessus de 900 px : le texte
   se brisait tous les trois mots et le panneau faisait trois fois la
   hauteur de la carte. C'était ça, la vraie cause — pas les couleurs. */

/* ── PANNEAU D'EXPLICATION D'UNE MÉTRIQUE ─────────────────────
   Repris à l'identique de la maquette (2026-09-13) : un encadré
   discret sous les tuiles, teinté bleu, en-tête sur une seule ligne,
   formule de calcul, et « À retenir » séparé par un filet.
   L'ancienne version empilait un eyebrow, un titre, une valeur en
   1,5 rem orange, un label « CE QUE MESURE CETTE MÉTRIQUE » et un
   bloc « CONSEIL » à bordure — cinq niveaux de texte pour expliquer
   un seul chiffre, dans une colonne de 250 px. */
.diag-m-panel[b-qmyqc9ffv2] {
    width: 100%;
    margin-top: 9px;
    background: rgba(57, 135, 229, .055);
    border: 1px solid rgba(57, 135, 229, .28);
    border-left: 2px solid #5a9ef0;
    border-radius: 5px;
    padding: 12px 14px;
    animation: panel-slide-in-b-qmyqc9ffv2 .15s ease-out;
}

@keyframes panel-slide-in-b-qmyqc9ffv2 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.diag-m-panel-header[b-qmyqc9ffv2] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 7px;
    background: transparent;
    border: none;
    padding: 0;
}

.diag-m-panel-titre[b-qmyqc9ffv2] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .84rem;
    font-weight: 600;
    color: #e6ecf3;
}

/* Bleu et non orange : l'orange reste réservé aux actions, et la valeur
   est déjà lisible sur sa tuile — ici elle ne fait que rappeler
   de quel chiffre on parle. */
.diag-m-panel-valeur[b-qmyqc9ffv2] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .95rem;
    font-weight: 700;
    color: #5a9ef0;
    line-height: 1.2;
}

.diag-m-panel-close[b-qmyqc9ffv2] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--sol-muted, #a7b6ca);
    font-size: .78rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

    .diag-m-panel-close:hover[b-qmyqc9ffv2] {
        color: #e6ecf3;
    }

.diag-m-panel-body[b-qmyqc9ffv2] {
    padding: 0;
}

.diag-m-panel-texte[b-qmyqc9ffv2] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    color: var(--sol-muted, #a7b6ca);
    line-height: 1.6;
    margin: 0;
}

/* La formule de calcul : sur une app dont toute la logique métier vit en
   SQL, savoir d'où sort le chiffre vaut autant que le chiffre. */
.diag-m-panel-formule[b-qmyqc9ffv2] {
    display: inline-block;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .70rem;
    color: var(--sol-muted, #a7b6ca);
    background: rgba(0, 0, 0, .22);
    border-radius: 4px;
    padding: 5px 9px;
    margin-top: 8px;
}

.diag-m-panel-conseil[b-qmyqc9ffv2] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    color: var(--sol-muted, #a7b6ca);
    line-height: 1.6;
    margin: 9px 0 0;
    padding-top: 9px;
    border-top: 1px solid rgba(57, 135, 229, .2);
}

    .diag-m-panel-conseil b[b-qmyqc9ffv2] {
        color: #FF9900;
        font-weight: 600;
    }

/* ── PARAMÈTRES UTILISÉS ─────────────────────────────────── */
/* Bouton de repli des métriques secondaires (carte Trafic).
   Volontairement discret : c'est une trappe, pas une action de pilotage. */
.diag-detail-toggle[b-qmyqc9ffv2] {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 2px;
    font-size: .68rem;
    color: var(--sol-muted, #a7b6ca);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .12s;
}

    .diag-detail-toggle:hover[b-qmyqc9ffv2] {
        color: var(--sol-muted, #a7b6ca);
    }

.diag-detail-chevron[b-qmyqc9ffv2] {
    font-size: .55rem;
    display: inline-block;
    transition: transform .18s;
}

.diag-detail-toggle-open .diag-detail-chevron[b-qmyqc9ffv2] {
    transform: rotate(90deg);
}

/* Seuils : information de débogage, pas de pilotage. Repoussés en pied
   de carte, en retrait (2026-09-13) — ils occupaient auparavant près d'un
   quart de la hauteur de la carte Trafic à pleine opacité. Ils réapparaissent
   au survol de la carte pour rester consultables sans chercher. */
.diag-params-utilises[b-qmyqc9ffv2] {
    margin-top: 14px;
    padding-top: 9px;
    border-top: 1px solid #1c2638;
}

.diag-params-chips[b-qmyqc9ffv2] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.diag-params-label[b-qmyqc9ffv2] {
    font-size: .62rem;
    color: var(--sol-muted, #a7b6ca);
}

.diag-param-chip[b-qmyqc9ffv2] {
    font-size: .58rem;
    background: transparent;
    border: 1px solid #1c2638;
    color: var(--sol-muted, #a7b6ca);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ── MÉTRIQUE CAPITAINE — bordure pilier ───────────────────
   La première métrique de chaque pilier porte la couleur du pilier.
   Le liseré était posé sur une tuile sans contour : il ressemblait à
   un artefact de rendu (un trait flottant devant le libellé). Depuis
   que la tuile est une carte, il devient sa bordure gauche épaissie,
   et se lit comme un marquage volontaire. */
.diag-pilier-1 .diag-m:first-child[b-qmyqc9ffv2] {
    border-left: 2px solid #45C4DC;
    padding-left: 10px;
}

.diag-pilier-2 .diag-m:first-child[b-qmyqc9ffv2] {
    border-left: 2px solid #9278D4;
    padding-left: 10px;
}

.diag-pilier-3 .diag-m:first-child[b-qmyqc9ffv2] {
    border-left: 2px solid #E0A040;
    padding-left: 10px;
}

.diag-pilier-4 .diag-m:first-child[b-qmyqc9ffv2] {
    border-left: 2px solid #2EC98A;
    padding-left: 10px;
}

.diag-pilier-5 .diag-m:first-child[b-qmyqc9ffv2] {
    border-left: 2px solid #6B8FBF;
    padding-left: 10px;
}

/* .diag-badge-vert/amber/rouge/gris/suspendu (couleurs sémantiques
   d'état) déplacées dans wwwroot/css/kdp-diag.css — partagées avec
   PlacementsTableau.razor (mêmes classes ClasseNiveau utilisées
   par les piliers ici, le Budget, et les cartes placement). */

/* ── TABLEAU GÉNÉRIQUE ────────────────────────────────────── */
/* diag-table/diag-th/diag-td/diag-tr/diag-vide et les classes de
   filtres/recherche/targeting/acos ont été déplacées vers la feuille
   globale wwwroot/css/kdp-diag-tableaux.css (voir App.razor) — cette
   page (onglet Budget) et les composants partagés
   CiblagesTableauView/SearchTermsTableauView les utilisent tous les
   deux, une feuille de style globale évite 3 copies à resynchroniser. */

.diag-th-pilier[b-qmyqc9ffv2] {
    text-align: center;
    width: 28px;
}

.diag-td-pilier[b-qmyqc9ffv2] {
    text-align: center;
}

/* ── TAUX CONSOMMATION BUDGET ─────────────────────────────── */
.diag-taux-val[b-qmyqc9ffv2] {
    font-weight: 700;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.diag-taux-rouge[b-qmyqc9ffv2] {
    color: #ef5a5a;
}

.diag-taux-amber[b-qmyqc9ffv2] {
    color: #E0A040;
}

.diag-taux-vert[b-qmyqc9ffv2] {
    color: #2EC98A;
}

.diag-camp-nom[b-qmyqc9ffv2] {
    font-weight: 600;
    color: #e6ecf3;
}

.diag-camp-strat[b-qmyqc9ffv2] {
    font-size: .65rem;
    color: var(--sol-muted, #a7b6ca);
}

.diag-budget-badge[b-qmyqc9ffv2] {
    font-size: .70rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    white-space: nowrap;
}

/* ── BUDGET INFO ─────────────────────────────────────────── */
.diag-budget-info[b-qmyqc9ffv2] {
    font-size: .78rem;
    color: var(--sol-muted, #a7b6ca);
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-left: 3px solid #FF9900;
    border-radius: 6px;
    padding: 10px 14px;
}

/* ── ONGLET CLAUDE ───────────────────────────────────────── */
.diag-claude[b-qmyqc9ffv2] {
    max-width: 800px;
}

.diag-btn-claude[b-qmyqc9ffv2] {
    background: #FF9900;
    color: #000;
    border: none;
    border-radius: 6px;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .80rem;
    font-weight: 700;
    padding: 10px 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity .15s;
}

    .diag-btn-claude:hover:not(:disabled)[b-qmyqc9ffv2] {
        opacity: .85;
    }

    .diag-btn-claude:disabled[b-qmyqc9ffv2] {
        opacity: .35;
        cursor: not-allowed;
    }

.diag-claude-reponse[b-qmyqc9ffv2] {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-radius: 10px;
    overflow: hidden;
}

.diag-claude-reponse-header[b-qmyqc9ffv2] {
    background: var(--sol-panel-raised, #16263b);
    padding: 10px 16px;
    font-size: .72rem;
    font-weight: 700;
    color: #FF9900;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid #1c2638;
}

.diag-claude-reponse-body[b-qmyqc9ffv2] {
    padding: 16px 20px;
    font-size: .82rem;
    color: var(--sol-muted, #a7b6ca);
    line-height: 1.7;
}

/* ── MARKDOWN CLAUDE ─────────────────────────────────────── */
.diag-md-h4[b-qmyqc9ffv2] {
    font-size: .96rem;
    font-weight: 700;
    color: #e6ecf3;
    margin: 14px 0 6px;
}

.diag-md-h5[b-qmyqc9ffv2] {
    font-size: .86rem;
    font-weight: 700;
    color: #FF9900;
    margin: 10px 0 4px;
}

.diag-md-p[b-qmyqc9ffv2] {
    margin: 0 0 8px;
}

.diag-md-ul[b-qmyqc9ffv2] {
    margin: 6px 0 10px 18px;
    padding: 0;
}

    .diag-md-ul li[b-qmyqc9ffv2] {
        margin-bottom: 4px;
    }

.diag-prompt-details[b-qmyqc9ffv2] {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-radius: 8px;
    padding: 12px 16px;
}

.diag-prompt-summary[b-qmyqc9ffv2] {
    font-size: .74rem;
    color: var(--sol-muted, #a7b6ca);
    cursor: pointer;
    user-select: none;
}

    .diag-prompt-summary:hover[b-qmyqc9ffv2] {
        color: var(--sol-muted, #a7b6ca);
    }

.diag-prompt-pre[b-qmyqc9ffv2] {
    font-size: .70rem;
    color: var(--sol-muted, #a7b6ca);
    white-space: pre-wrap;
    margin-top: 10px;
    line-height: 1.5;
    max-height: 400px;
    overflow-y: auto;
}

/* ── SPINNERS ─────────────────────────────────────────────── */
.diag-spinner[b-qmyqc9ffv2] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #1c2638;
    border-top-color: #FF9900;
    border-radius: 50%;
    animation: diag-spin-b-qmyqc9ffv2 .7s linear infinite;
}

.diag-spinner-sm[b-qmyqc9ffv2] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #1c2638;
    border-top-color: #FF9900;
    border-radius: 50%;
    animation: diag-spin-b-qmyqc9ffv2 .7s linear infinite;
}

@keyframes diag-spin-b-qmyqc9ffv2 {
    to {
        transform: rotate(360deg);
    }
}

/* camp-* déplacé dans wwwroot/css/kdp-diag.css (Phase 1 — voir
   Components/Shared/CampagnesVue.razor) */

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   Breakpoints : 768px tablette / 640px mobile
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .diag-controls[b-qmyqc9ffv2] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "select     select"
            "raccourcis dates"
            "btn        btn";
        gap: 8px;
    }

    .diag-select[b-qmyqc9ffv2] {
        grid-area: select;
        max-width: none;
        width: 100%;
    }

    .diag-raccourcis[b-qmyqc9ffv2] {
        grid-area: raccourcis;
        align-self: center;
    }

    .diag-dates[b-qmyqc9ffv2] {
        grid-area: dates;
        justify-self: end;
    }

    .diag-btn-calculer[b-qmyqc9ffv2] {
        grid-area: btn;
        width: 100%;
        justify-content: center;
    }

    .diag-export[b-qmyqc9ffv2] {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    .diag-metriques-grid[b-qmyqc9ffv2] {
        grid-template-columns: repeat(2, 1fr);
    }

    .diag-pilier-header[b-qmyqc9ffv2] {
        padding: 12px 14px;
    }

    .diag-pilier-body[b-qmyqc9ffv2] {
        padding: 0 14px 14px;
    }
}

@media (max-width: 640px) {

    .diag-page[b-qmyqc9ffv2] {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .diag-title[b-qmyqc9ffv2] {
        font-size: 1.2rem;
    }

    .diag-controls[b-qmyqc9ffv2] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "select"
            "raccourcis"
            "dates"
            "btn";
    }

    .diag-dates[b-qmyqc9ffv2] {
        justify-self: stretch;
        width: 100%;
    }

    .diag-input-date[b-qmyqc9ffv2] {
        flex: 1;
        width: auto;
    }

    .diag-metriques-grid[b-qmyqc9ffv2] {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .diag-m[b-qmyqc9ffv2] {
        padding: 7px 9px;
    }

    .diag-tab[b-qmyqc9ffv2] {
        font-size: .70rem;
        padding: 7px 12px;
    }

    .diag-m-panel[b-qmyqc9ffv2] {
        width: 100%;
        position: static;
    }

    .diag-budget-info[b-qmyqc9ffv2] {
        font-size: .72rem;
    }

    .diag-claude[b-qmyqc9ffv2] {
        max-width: 100%;
    }



}

/* Période de comparaison affichée en clair à côté du sélecteur (2026-09-13).
   Sans elle, « Mois dernier » comparait 31 jours à 10 sans le dire, et la
   chute lue dans les deltas venait de la durée, pas de la performance. */
.diag-cmp-plage[b-qmyqc9ffv2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .68rem;
    color: var(--sol-muted, #a7b6ca);
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid #1c2638;
    white-space: nowrap;
}

.diag-cmp-plage-jours[b-qmyqc9ffv2] {
    color: var(--sol-muted, #a7b6ca);
    font-variant-numeric: tabular-nums;
}

/* Durées trop différentes pour que la comparaison brute veuille dire
   quelque chose — signalé, jamais corrigé en silence. */
.diag-cmp-plage-alerte[b-qmyqc9ffv2] {
    border-color: rgba(224,160,64,.45);
    background: rgba(224,160,64,.08);
    color: #E0A040;
}

    .diag-cmp-plage-alerte .diag-cmp-plage-jours[b-qmyqc9ffv2] {
        color: #E0A040;
    }

/* Ambre sur une valeur de tuile — l'argent qui SORT. Même code que les
   cartes résumé : ambre = dépense, vert = revenu, rouge = perte. */
.diag-m-val-amber[b-qmyqc9ffv2] {
    color: #E0A040;
}
/* /Components/KdpAdsPilotPro/Components/Pages/FicheProduit.razor.rz.scp.css */
/* ============================================================
   Fichier  : FicheProduit.razor.css
   Rôle     : Styles scoped de la page FicheProduit.
              Thème sombre Amazon Ads — variables du projet :
              --bg-base, --bg-card, --cyan, --green, --amber, --red
              Bootstrap gère le layout (grid, flex, spacing).
              Ce fichier gère les couleurs et tokens visuels.
   ============================================================ */

/* ── PAGE ─────────────────────────────────────────────────── */
.fp-page[b-wvhmry8pjn] {
    max-width: 1400px; /* limite la largeur sur très grands écrans */
    margin: 0 auto; /* centre le contenu */
}

/* ── EN-TÊTE ──────────────────────────────────────────────── */
.fp-header-border[b-wvhmry8pjn] {
    border-left: 3px solid var(--cyan);
    padding-left: 1rem;
}

.fp-title[b-wvhmry8pjn] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: var(--cyan);
    margin: 0;
}

.fp-subtitle[b-wvhmry8pjn] {
    font-size: .8rem;
    color: var(--sol-muted, #a7b6ca);
    margin: 0;
}

/* ── ALERTES ──────────────────────────────────────────────── */
.fp-alert-error[b-wvhmry8pjn] {
    background: rgba(224, 86, 106, .12);
    border: 1px solid var(--red);
    color: var(--red);
    border-radius: 6px;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .82rem;
}

.fp-alert-success[b-wvhmry8pjn] {
    background: rgba(46, 201, 138, .10);
    border: 1px solid var(--green);
    color: var(--green);
    border-radius: 6px;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .82rem;
}

/* ── SPINNER ──────────────────────────────────────────────── */
.fp-spinner[b-wvhmry8pjn] {
    color: var(--cyan);
    width: 2rem;
    height: 2rem;
}

/* ── ÉTAT VIDE ────────────────────────────────────────────── */
.fp-empty-title[b-wvhmry8pjn] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 1rem;
    color: var(--sol-muted, #a7b6ca);
}

/* ── TABLEAU LIVRES ───────────────────────────────────────── */
.fp-table-wrap[b-wvhmry8pjn] {
    overflow-x: auto;
    border: 1px solid #1a1a1a;
    border-radius: 8px;
}

.fp-table[b-wvhmry8pjn] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .8rem;
    white-space: nowrap;
}

    .fp-table thead th[b-wvhmry8pjn] {
        background: var(--bg-card);
        color: var(--sol-muted, #a7b6ca);
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        text-align: left;
        padding: .6rem .75rem;
        border-bottom: 1px solid #1a1a1a;
        white-space: nowrap;
    }

    .fp-table tbody td[b-wvhmry8pjn] {
        padding: .55rem .75rem;
        border-bottom: 1px solid #1a1a1a;
        color: #e5e7eb;
        vertical-align: middle;
    }

    .fp-table tbody tr:hover[b-wvhmry8pjn] {
        background: rgba(69, 196, 220, .04);
    }

    .fp-table tbody tr:last-child td[b-wvhmry8pjn] {
        border-bottom: none;
    }

/* Titre + nom de plume — seule colonne autorisée à passer à la ligne */
.fp-td-titre[b-wvhmry8pjn] {
    font-size: .85rem;
    color: #e5e7eb;
    white-space: normal;
    min-width: 180px;
}

.fp-td-plume[b-wvhmry8pjn] {
    font-size: .72rem;
    color: var(--sol-muted, #a7b6ca);
    font-style: italic;
}

/* ASIN en cyan — clé technique de tout le système */
.fp-td-asin[b-wvhmry8pjn] {
    color: var(--cyan);
    letter-spacing: .05em;
}

.fp-td-num[b-wvhmry8pjn] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fp-td-date[b-wvhmry8pjn] {
    color: #6b7280;
    font-size: .72rem;
}

.fp-td-actions[b-wvhmry8pjn] {
    text-align: right;
}

/* Break-even ACOS = TauxRoyalties × 100 — seuil de rentabilité */
.fp-metric-breakeven[b-wvhmry8pjn] {
    color: var(--green);
}

/* ── BADGES ───────────────────────────────────────────────── */
.fp-badge[b-wvhmry8pjn] {
    display: inline-block;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .68rem;
    font-weight: 600;
    padding: .15rem .45rem;
    border-radius: 3px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fp-badge-format[b-wvhmry8pjn] {
    background: rgba(69, 196, 220, .12);
    color: var(--cyan);
    border: 1px solid rgba(69, 196, 220, .25);
}

/* KU = Kindle Unlimited */
.fp-badge-ku[b-wvhmry8pjn] {
    background: rgba(224, 160, 64, .15);
    color: var(--amber);
    border: 1px solid rgba(224, 160, 64, .3);
}

/* ── BOUTONS ──────────────────────────────────────────────── */
/* Bootstrap .btn gère padding/radius, fp-btn-* gère les couleurs */

.fp-btn-primary[b-wvhmry8pjn] {
    background: var(--cyan);
    border-color: var(--cyan);
    color: #000;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    font-weight: 600;
}

    .fp-btn-primary:hover:not(:disabled)[b-wvhmry8pjn] {
        background: var(--cyan);
        border-color: var(--cyan);
        color: #000;
        opacity: .85;
    }

.fp-btn-secondary[b-wvhmry8pjn] {
    background: transparent;
    border-color: #2a2a2a;
    color: var(--sol-muted, #a7b6ca);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    text-align: center;
}

    .fp-btn-secondary:hover:not(:disabled)[b-wvhmry8pjn] {
        background: transparent;
        border-color: #4b5563;
        color: #e5e7eb;
    }

.fp-btn-danger[b-wvhmry8pjn] {
    background: transparent;
    border-color: rgba(224, 86, 106, .35);
    color: var(--red);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
}

    .fp-btn-danger:hover:not(:disabled)[b-wvhmry8pjn] {
        background: rgba(224, 86, 106, .08);
        border-color: var(--red);
        color: var(--red);
    }

.fp-btn-ghost[b-wvhmry8pjn] {
    background: transparent;
    border-color: transparent;
    color: var(--sol-muted, #a7b6ca);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
}

    .fp-btn-ghost:hover:not(:disabled)[b-wvhmry8pjn] {
        background: transparent;
        color: var(--sol-muted, #a7b6ca);
    }

/* ── BACKDROP ─────────────────────────────────────────────── */
.fp-backdrop[b-wvhmry8pjn] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .70);
    z-index: 1040;
}

/* ── MODALE ───────────────────────────────────────────────── */
.fp-modal-wrap[b-wvhmry8pjn] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.fp-modal[b-wvhmry8pjn] {
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.fp-modal-sm[b-wvhmry8pjn] {
    max-width: 400px;
}

.fp-modal-header[b-wvhmry8pjn] {
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid #1a1a1a;
}

.fp-modal-title[b-wvhmry8pjn] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 1rem;
    color: var(--cyan);
}

/* Titre rouge pour la confirmation d'archivage */
.fp-title-danger[b-wvhmry8pjn] {
    color: var(--red);
}

.fp-modal-body[b-wvhmry8pjn] {
    padding: 1.25rem 1.4rem;
    flex: 1;
}

.fp-modal-footer[b-wvhmry8pjn] {
    padding: 1rem 1.4rem;
    border-top: 1px solid #1a1a1a;
}

/* ── FORMULAIRE ───────────────────────────────────────────── */
/* Surcharge Bootstrap form-control / form-select             */
.fp-input[b-wvhmry8pjn],
.form-control.fp-input[b-wvhmry8pjn],
.form-select.fp-input[b-wvhmry8pjn] {
    background: #0a0a0a;
    border-color: #2a2a2a;
    color: #d1d5db;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .82rem;
}

    .fp-input:focus[b-wvhmry8pjn],
    .form-control.fp-input:focus[b-wvhmry8pjn],
    .form-select.fp-input:focus[b-wvhmry8pjn] {
        background: #0a0a0a;
        border-color: var(--cyan);
        color: #d1d5db;
        box-shadow: 0 0 0 2px rgba(69, 196, 220, .15);
    }

    .fp-input:disabled[b-wvhmry8pjn] {
        opacity: .5;
        cursor: not-allowed;
        background: #0a0a0a;
    }

.fp-label[b-wvhmry8pjn] {
    font-size: .78rem;
    color: var(--sol-muted, #a7b6ca);
}

.fp-hint[b-wvhmry8pjn] {
    font-size: .68rem;
    color: #4b5563;
}

/* Astérisque rouge = champ obligatoire */
.fp-required[b-wvhmry8pjn] {
    color: var(--red);
}

/* Checkbox Bootstrap */
.fp-check[b-wvhmry8pjn] {
    accent-color: var(--cyan);
}

/* ── PREVIEW BREAK-EVEN ACOS ──────────────────────────────── */
.fp-breakeven-preview[b-wvhmry8pjn] {
    background: rgba(46, 201, 138, .06);
    border: 1px solid rgba(46, 201, 138, .2);
}

.fp-breakeven-val[b-wvhmry8pjn] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .95rem;
    color: var(--green);
    font-weight: 600;
}

/* ── TEXTE MODALE CONFIRMATION ────────────────────────────── */
.fp-text[b-wvhmry8pjn] {
    font-size: .88rem;
    color: #d1d5db;
    line-height: 1.6;
}
    
/* /Components/KdpAdsPilotPro/Components/Pages/GestionEvenements.razor.rz.scp.css */
/* ============================================================
   Fichier  : GestionEvenements.razor.css
   Rôle     : Styles spécifiques à la page GestionEvenements.
              Thème dark — cohérent avec le reste de l'application.
              Préfixe : ge- (GestionEvenements) — évite les conflits.

   Variables CSS utilisées (définies globalement dans app.css) :
     --bg-base   : #000000  (fond de page)
     --bg-card   : #080808  (fond des cartes)
     --cyan      : #FF9900  (information, neutre)
     --green     : #2ec98a  (positif, en cours)
     --amber     : #e0a040  (prudence, attention)
     --red       : #e0566a  (erreur, critique)

   Couleur supplémentaire V3 (événements contextuels) :
     #FEBD69  : bleu clair — badge ACTIF / POST_EVENT
   ============================================================ */

/* ── CONTENEUR DE PAGE ─────────────────────────────────────── */
.ge-page[b-ab67baxuha] {
    max-width: 900px;
    margin: 0 auto;
    /* Space Mono — cohérent avec le reste de l'application */
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    color: #e5e7eb;
}

/* ── EN-TÊTE ────────────────────────────────────────────────── */
.ge-header-border[b-ab67baxuha] {
    border-bottom: 1px solid #1f2937;
}

.ge-title[b-ab67baxuha] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FF9900; /* --cyan */
    margin: 0;
}

.ge-subtitle[b-ab67baxuha] {
    font-size: 0.78rem;
    color: var(--sol-muted, #a7b6ca);
    margin: 0;
}

/* ── BLOC D'INFORMATION PÉDAGOGIQUE ─────────────────────────── */
/* Explique à l'auteur POURQUOI saisir des événements */
.ge-info-box[b-ab67baxuha] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #FEBD69; /* Doré Amazon — événement contextuel */
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 0.80rem;
    color: var(--sol-muted, #a7b6ca);
}

.ge-info-icon[b-ab67baxuha] {
    color: #FEBD69;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.ge-info-text[b-ab67baxuha] {
    line-height: 1.5;
}

/* ── ALERTES ────────────────────────────────────────────────── */
.ge-alert-error[b-ab67baxuha] {
    background: rgba(224, 86, 106, 0.12);
    border: 1px solid #e0566a;
    color: #e0566a;
    border-radius: 8px;
    font-size: 0.82rem;
}

.ge-alert-success[b-ab67baxuha] {
    background: rgba(46, 201, 138, 0.12);
    border: 1px solid #2ec98a;
    color: #2ec98a;
    border-radius: 8px;
    font-size: 0.82rem;
}

/* ── CARTE GÉNÉRIQUE (sélecteur livre) ──────────────────────── */
.ge-card[b-ab67baxuha] {
    background: #080808;
    border: 1px solid #1f2937;
    border-radius: 10px;
    padding: 16px 20px;
}

.ge-card-title[b-ab67baxuha] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sol-muted, #a7b6ca);
    margin-bottom: 10px;
}

/* ── SÉLECTEUR DE LIVRE ─────────────────────────────────────── */
.ge-select[b-ab67baxuha] {
    background: #111827;
    border: 1px solid #374151;
    border-radius: 6px;
    color: #e5e7eb;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.82rem;
    padding: 8px 12px;
    width: 100%;
    max-width: 500px;
    cursor: pointer;
    transition: border-color 0.15s;
}

    .ge-select:focus[b-ab67baxuha] {
        outline: none;
        border-color: #FF9900;
        box-shadow: 0 0 0 2px rgba(69, 196, 220, 0.2);
    }

.ge-link[b-ab67baxuha] {
    color: #FF9900;
    text-decoration: none;
}

    .ge-link:hover[b-ab67baxuha] {
        text-decoration: underline;
    }

/* ── COMPTEURS ──────────────────────────────────────────────── */
.ge-compteurs[b-ab67baxuha] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ge-compteur-badge[b-ab67baxuha] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ge-badge-encours[b-ab67baxuha] {
    background: rgba(46, 201, 138, 0.15);
    color: #2ec98a;
    border: 1px solid #2ec98a;
}

.ge-badge-postevent[b-ab67baxuha] {
    background: rgba(56, 189, 248, 0.15);
    color: #FEBD69;
    border: 1px solid #FEBD69;
}

.ge-badge-total[b-ab67baxuha] {
    background: rgba(107, 114, 128, 0.15);
    color: var(--sol-muted, #a7b6ca);
    border: 1px solid #374151;
}

/* ── ÉTAT VIDE ──────────────────────────────────────────────── */
.ge-empty-title[b-ab67baxuha] {
    font-size: 1rem;
    color: var(--sol-muted, #a7b6ca);
}

/* ── TIMELINE DES ÉVÉNEMENTS ────────────────────────────────── */
.ge-timeline[b-ab67baxuha] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── CARTE D'ÉVÉNEMENT ──────────────────────────────────────── */
.ge-event-card[b-ab67baxuha] {
    background: #080808;
    border: 1px solid #1f2937;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s;
}

/* Bordure gauche colorée selon le statut — signal visuel rapide */
.ge-card-encours[b-ab67baxuha] {
    border-left: 3px solid #2ec98a; /* Vert — en cours */
}

.ge-card-postevent[b-ab67baxuha] {
    border-left: 3px solid #FEBD69; /* Doré Amazon — post-event prudence */
}

/* ── EN-TÊTE DE LA CARTE ─────────────────────────────────────── */
.ge-event-header[b-ab67baxuha] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.ge-event-left[b-ab67baxuha] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Badge du type d'événement — couleur dynamique via style= */
.ge-type-badge[b-ab67baxuha] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid;
    background: rgba(255, 255, 255, 0.04);
    color: #e5e7eb;
}

/* Badge de catégorie */
.ge-categorie-badge[b-ab67baxuha] {
    font-size: 0.68rem;
    color: var(--sol-muted, #a7b6ca);
    padding: 2px 7px;
    border: 1px solid #374151;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Badge alerte critique — RUPTURE_STOCK */
.ge-badge-critique[b-ab67baxuha] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(224, 86, 106, 0.2);
    border: 1px solid #e0566a;
    color: #e0566a;
    animation: pulse-rouge-b-ab67baxuha 2s infinite;
}

/* Animation pour attirer l'attention sur les alertes critiques */
@keyframes pulse-rouge-b-ab67baxuha {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ── STATUT DE L'ÉVÉNEMENT ──────────────────────────────────── */
.ge-statut[b-ab67baxuha] {
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.ge-statut-encours[b-ab67baxuha] {
    color: #2ec98a;
}

.ge-statut-postevent[b-ab67baxuha] {
    color: #FEBD69;
}

.ge-statut-termine[b-ab67baxuha] {
    color: #4b5563;
}

/* ── PÉRIODE ─────────────────────────────────────────────────── */
.ge-event-periode[b-ab67baxuha] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.ge-periode-label[b-ab67baxuha] {
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.72rem;
}

.ge-periode-date[b-ab67baxuha] {
    color: #e5e7eb;
    font-weight: 700;
}

.ge-periode-duree[b-ab67baxuha] {
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.72rem;
}

.ge-periode-encours[b-ab67baxuha] {
    color: #2ec98a;
    font-weight: 700;
}

/* ── DONNÉES FINANCIÈRES ─────────────────────────────────────── */
.ge-event-financier[b-ab67baxuha] {
    display: flex;
    gap: 16px;
    padding: 10px 12px;
    background: var(--sol-panel, #0e1b2d);
    border-radius: 6px;
    flex-wrap: wrap;
}

.ge-fin-item[b-ab67baxuha] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ge-fin-label[b-ab67baxuha] {
    font-size: 0.65rem;
    color: var(--sol-muted, #a7b6ca);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ge-fin-val[b-ab67baxuha] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #e5e7eb;
}

/* Break-even ACOS pendant l'événement — couleur distincte */
.ge-fin-breakeven[b-ab67baxuha] {
    color: #FF9900;
}

/* ── TEXTE D'IMPACT ─────────────────────────────────────────── */
.ge-impact-text[b-ab67baxuha] {
    font-size: 0.78rem;
    color: var(--sol-muted, #a7b6ca);
    font-style: italic;
    line-height: 1.4;
}

/* ── NOTES ──────────────────────────────────────────────────── */
.ge-notes-text[b-ab67baxuha] {
    font-size: 0.80rem;
    color: var(--sol-muted, #a7b6ca);
    padding: 8px 12px;
    background: var(--sol-panel, #0e1b2d);
    border-radius: 6px;
    border-left: 2px solid #374151;
}

/* ── ACTIONS DE LA CARTE ─────────────────────────────────────── */
.ge-event-actions[b-ab67baxuha] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* ── SPINNER ─────────────────────────────────────────────────── */
.ge-spinner[b-ab67baxuha] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #374151;
    border-top-color: #FF9900;
    border-radius: 50%;
    animation: spin-b-ab67baxuha 0.7s linear infinite;
}

@keyframes spin-b-ab67baxuha {
    to {
        transform: rotate(360deg);
    }
}

/* ── BOUTONS ─────────────────────────────────────────────────── */
.ge-btn-primary[b-ab67baxuha] {
    background: #FF9900;
    color: #000;
    border: none;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 6px;
    transition: opacity 0.15s;
}

    .ge-btn-primary:hover:not(:disabled)[b-ab67baxuha] {
        opacity: 0.85;
    }

    .ge-btn-primary:disabled[b-ab67baxuha] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.ge-btn-secondary[b-ab67baxuha] {
    background: transparent;
    color: var(--sol-muted, #a7b6ca);
    border: 1px solid #374151;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.75rem;
    padding: 5px 14px;
    border-radius: 6px;
    transition: border-color 0.15s, color 0.15s;
}

    .ge-btn-secondary:hover[b-ab67baxuha] {
        border-color: #9ca3af;
        color: #e5e7eb;
    }

.ge-btn-terminer[b-ab67baxuha] {
    background: rgba(46, 201, 138, 0.12);
    color: #2ec98a;
    border: 1px solid #2ec98a;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 6px;
    transition: background 0.15s;
}

    .ge-btn-terminer:hover[b-ab67baxuha] {
        background: rgba(46, 201, 138, 0.22);
    }

.ge-btn-danger[b-ab67baxuha] {
    background: transparent;
    color: #e0566a;
    border: 1px solid #e0566a;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.75rem;
    padding: 5px 14px;
    border-radius: 6px;
    transition: background 0.15s;
}

    .ge-btn-danger:hover[b-ab67baxuha] {
        background: rgba(224, 86, 106, 0.12);
    }

.ge-btn-ghost[b-ab67baxuha] {
    background: transparent;
    color: var(--sol-muted, #a7b6ca);
    border: 1px solid #374151;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.78rem;
    padding: 7px 16px;
    border-radius: 6px;
}

    .ge-btn-ghost:hover[b-ab67baxuha] {
        color: var(--sol-muted, #a7b6ca);
        border-color: #4b5563;
    }

/* ── MODALE ──────────────────────────────────────────────────── */
.ge-backdrop[b-ab67baxuha] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1040;
}

.ge-modal-wrap[b-ab67baxuha] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 16px;
}

.ge-modal[b-ab67baxuha] {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1f2937;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.ge-modal-sm[b-ab67baxuha] {
    max-width: 440px;
}

.ge-modal-header[b-ab67baxuha] {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #1f2937;
}

.ge-modal-title[b-ab67baxuha] {
    font-size: 1rem;
    font-weight: 700;
    color: #e5e7eb;
}

.ge-title-danger[b-ab67baxuha] {
    color: #e0566a;
}

.ge-modal-body[b-ab67baxuha] {
    padding: 20px 24px;
}

.ge-modal-footer[b-ab67baxuha] {
    padding: 16px 24px 20px;
    border-top: 1px solid #1f2937;
}

/* ── CHAMPS DE FORMULAIRE ───────────────────────────────────── */
.ge-label[b-ab67baxuha] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sol-muted, #a7b6ca);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ge-hint[b-ab67baxuha] {
    font-size: 0.68rem;
    color: #4b5563;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.ge-required[b-ab67baxuha] {
    color: #e0566a;
}

.ge-input[b-ab67baxuha] {
    background: #111827 !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !important;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.82rem;
    border-radius: 6px !important;
    transition: border-color 0.15s !important;
}

    .ge-input:focus[b-ab67baxuha] {
        border-color: #FF9900 !important;
        box-shadow: 0 0 0 2px rgba(69, 196, 220, 0.2) !important;
        outline: none;
    }

    .ge-input option[b-ab67baxuha],
    .ge-input optgroup[b-ab67baxuha] {
        background: #111827;
        color: #e5e7eb;
    }

.ge-textarea[b-ab67baxuha] {
    resize: vertical;
    min-height: 80px;
}

/* Impact du type sélectionné — affiché sous le sélecteur */
.ge-type-impact[b-ab67baxuha] {
    font-size: 0.76rem;
    color: var(--sol-muted, #a7b6ca);
    padding: 8px 12px;
    background: #111827;
    border-radius: 6px;
    border-left: 2px solid #374151;
    font-style: italic;
    line-height: 1.4;
}

/* Prévisualisation du Break-even ACOS pendant l'événement */
.ge-breakeven-preview[b-ab67baxuha] {
    background: rgba(69, 196, 220, 0.08);
    border: 1px solid rgba(69, 196, 220, 0.3);
}

.ge-breakeven-val[b-ab67baxuha] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #FF9900;
}

/* ── TEXTES ─────────────────────────────────────────────────── */
.ge-text[b-ab67baxuha] {
    font-size: 0.84rem;
    color: var(--sol-muted, #a7b6ca);
}
/* /Components/KdpAdsPilotPro/Components/Pages/GestionParametres.razor.rz.scp.css */
/* ============================================================
   Fichier  : GestionParametres.razor.css
   Rôle     : Styles de la page GestionParametres.
              Layout two-column avec panneau latéral contextuel.
              Thème dark — couleurs Amazon.
              Préfixe : gp- (GestionParametres)

   Variables du thème (définies dans app.css) :
     --bg-base   : #000000
     --bg-card   : #080808
     --green     : #2ec98a
     --amber     : #e0a040
     --red       : #e0566a

   Couleurs Amazon :
     #FF9900  → orange Amazon (accent principal)
     #FEBD69  → doré Amazon (secondaire, prudence)
   ============================================================ */

/* ── PAGE ────────────────────────────────────────────────────── */
.gp-page[b-jxz1kctgpu] {
    max-width: 1100px;
    margin: 0 auto;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    color: #e5e7eb;
}

/* ── EN-TÊTE ─────────────────────────────────────────────────── */
.gp-header-border[b-jxz1kctgpu] {
    border-bottom: 1px solid #1f2937;
}

.gp-title[b-jxz1kctgpu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FF9900;
    margin: 0;
}

.gp-subtitle[b-jxz1kctgpu] {
    font-size: 0.78rem;
    color: var(--sol-muted, #a7b6ca);
    margin: 0;
}

/* ── BADGES EN-TÊTE ──────────────────────────────────────────── */
.gp-badge-modifie[b-jxz1kctgpu] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(224, 160, 64, 0.15);
    color: #FEBD69;
    border: 1px solid #FEBD69;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gp-badge-defaut[b-jxz1kctgpu] {
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(46, 201, 138, 0.12);
    color: #2ec98a;
    border: 1px solid #2ec98a;
}

/* ── BLOC INFO PÉDAGOGIQUE ───────────────────────────────────── */
.gp-info-box[b-jxz1kctgpu] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #FF9900;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 0.80rem;
    color: var(--sol-muted, #a7b6ca);
    line-height: 1.5;
}

.gp-info-icon[b-jxz1kctgpu] {
    color: #FF9900;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── ALERTES ─────────────────────────────────────────────────── */
.gp-alert-error[b-jxz1kctgpu] {
    background: rgba(224, 86, 106, 0.12);
    border: 1px solid #e0566a;
    color: #e0566a;
    border-radius: 8px;
    font-size: 0.82rem;
}

.gp-alert-success[b-jxz1kctgpu] {
    background: rgba(255, 153, 0, 0.10);
    border: 1px solid #FF9900;
    color: #FF9900;
    border-radius: 8px;
    font-size: 0.82rem;
}

/* ── LAYOUT TWO-COLUMN ───────────────────────────────────────── */
/*
   Par défaut : colonne unique (mobile first)
   Quand panneau ouvert ET écran ≥ 900px : two-column
*/
.gp-layout[b-jxz1kctgpu] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 900px) {
    .gp-layout.gp-layout-panel-open[b-jxz1kctgpu] {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }

        .gp-layout.gp-layout-panel-open .gp-list-col[b-jxz1kctgpu] {
            flex: 0 0 340px;
            max-width: 340px;
        }

        .gp-layout.gp-layout-panel-open .gp-panel[b-jxz1kctgpu] {
            flex: 1;
            position: sticky;
            top: 80px; /* reste visible lors du scroll */
        }
}

/* ── COLONNE GAUCHE : LISTE ──────────────────────────────────── */
.gp-list-col[b-jxz1kctgpu] {
    width: 100%;
}

/* ── GROUPE DE PARAMÈTRES ────────────────────────────────────── */
.gp-groupe-header[b-jxz1kctgpu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #1f2937;
}

.gp-groupe-icone[b-jxz1kctgpu] {
    font-size: 1rem;
}

.gp-groupe-label[b-jxz1kctgpu] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sol-muted, #a7b6ca);
}

/* ── LISTE DES PARAMÈTRES ────────────────────────────────────── */
.gp-param-list[b-jxz1kctgpu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── LIGNE DE PARAMÈTRE ──────────────────────────────────────── */
.gp-param-row[b-jxz1kctgpu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 7px;
    background: #080808;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    user-select: none;
}

    .gp-param-row:hover[b-jxz1kctgpu] {
        background: var(--sol-panel, #0e1b2d);
        border-color: #374151;
    }

/* Ligne sélectionnée — mise en évidence orange Amazon */
.gp-param-row-selected[b-jxz1kctgpu] {
    background: rgba(255, 153, 0, 0.06) !important;
    border-color: #FF9900 !important;
}

.gp-param-nom[b-jxz1kctgpu] {
    flex: 1;
    font-size: 0.80rem;
    color: #d1d5db;
    line-height: 1.3;
}

/* Badge "✎" inline sur les lignes modifiées */
.gp-badge-modifie-inline[b-jxz1kctgpu] {
    font-size: 0.68rem;
    color: #FEBD69;
    font-weight: 700;
}

.gp-param-valeur[b-jxz1kctgpu] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #e5e7eb;
    white-space: nowrap;
    min-width: 50px;
    text-align: right;
}

/* Valeur modifiée → couleur doré Amazon */
.gp-valeur-modifiee[b-jxz1kctgpu] {
    color: #FEBD69;
}

.gp-param-unite[b-jxz1kctgpu] {
    font-size: 0.68rem;
    color: var(--sol-muted, #a7b6ca);
    font-weight: 400;
}

.gp-param-arrow[b-jxz1kctgpu] {
    font-size: 0.80rem;
    color: #4b5563;
    flex-shrink: 0;
    transition: color 0.12s;
}

.gp-param-row-selected .gp-param-arrow[b-jxz1kctgpu] {
    color: #FF9900;
}

/* ── PANNEAU LATÉRAL CONTEXTUEL ──────────────────────────────── */
.gp-panel[b-jxz1kctgpu] {
    background: #080808;
    border: 1px solid #1f2937;
    border-radius: 12px;
    overflow: hidden;
}

/* En-tête du panneau */
.gp-panel-header[b-jxz1kctgpu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #1f2937;
    background: var(--sol-panel, #0e1b2d);
}

.gp-panel-titre[b-jxz1kctgpu] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #e5e7eb;
    line-height: 1.3;
}

.gp-panel-code[b-jxz1kctgpu] {
    font-size: 0.68rem;
    color: #4b5563;
    margin-top: 3px;
    font-style: italic;
}

.gp-panel-close[b-jxz1kctgpu] {
    background: none;
    border: none;
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.12s;
}

    .gp-panel-close:hover[b-jxz1kctgpu] {
        color: #e5e7eb;
    }

/* Sections du panneau */
.gp-panel-section[b-jxz1kctgpu] {
    padding: 16px 20px;
    border-bottom: 1px solid #111827;
}

    .gp-panel-section:last-child[b-jxz1kctgpu] {
        border-bottom: none;
    }

.gp-panel-section-label[b-jxz1kctgpu] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4b5563;
    margin-bottom: 8px;
}

/* Valeur courante dans le panneau */
.gp-valeur-courante[b-jxz1kctgpu] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #FF9900;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.gp-unite-courante[b-jxz1kctgpu] {
    font-size: 0.80rem;
    color: var(--sol-muted, #a7b6ca);
    font-weight: 400;
}

.gp-valeur-defaut-hint[b-jxz1kctgpu] {
    font-size: 0.70rem;
    color: #4b5563;
    font-weight: 400;
}

/* Description en français */
.gp-panel-description[b-jxz1kctgpu] {
    font-size: 0.82rem;
    color: var(--sol-muted, #a7b6ca);
    line-height: 1.6;
    margin: 0;
}

/* Justification CDC */
.gp-panel-justification[b-jxz1kctgpu] {
    font-size: 0.76rem;
    color: var(--sol-muted, #a7b6ca);
    font-style: italic;
    line-height: 1.5;
    margin: 0;
    padding: 8px 12px;
    background: #111827;
    border-radius: 6px;
    border-left: 2px solid #374151;
}

/* ── ZONE D'ÉDITION ──────────────────────────────────────────── */
.gp-edit-zone[b-jxz1kctgpu] {
    /* Pas de style particulier — hérite du padding de .gp-panel-section */
}

.gp-input-valeur[b-jxz1kctgpu] {
    background: #111827;
    border: 1px solid #374151;
    border-radius: 6px;
    color: #e5e7eb;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 6px 12px;
    width: 110px;
    text-align: center;
    transition: border-color 0.15s;
}

    .gp-input-valeur:focus[b-jxz1kctgpu] {
        outline: none;
        border-color: #FF9900;
        box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.2);
    }

.gp-edit-erreur[b-jxz1kctgpu] {
    font-size: 0.76rem;
    color: #e0566a;
}

/* ── SIMULATION DYNAMIQUE ────────────────────────────────────── */
.gp-simulation[b-jxz1kctgpu] {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1f2937;
    border-left: 3px solid #FF9900;
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 10px;
}

.gp-simulation-label[b-jxz1kctgpu] {
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #FF9900;
    margin-bottom: 8px;
}

.gp-simulation-contenu[b-jxz1kctgpu] {
    font-size: 0.80rem;
    color: var(--sol-muted, #a7b6ca);
    line-height: 1.6;
}

    /* Styles pour le HTML généré dans la simulation */
    .gp-simulation-contenu p[b-jxz1kctgpu] {
        margin: 0 0 4px 0;
    }

    .gp-simulation-contenu ul[b-jxz1kctgpu] {
        margin: 4px 0;
    }

    .gp-simulation-contenu strong[b-jxz1kctgpu] {
        color: #e5e7eb;
    }

/* ── COMPARAISON VISUELLE ────────────────────────────────────── */
.gp-comparaison[b-jxz1kctgpu] {
    background: var(--sol-panel, #0e1b2d);
    border-radius: 6px;
    padding: 12px 14px;
}

.gp-comp-ligne[b-jxz1kctgpu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.80rem;
}

.gp-comp-label[b-jxz1kctgpu] {
    color: var(--sol-muted, #a7b6ca);
}

.gp-comp-val[b-jxz1kctgpu] {
    font-weight: 700;
}

.gp-comp-val-modif[b-jxz1kctgpu] {
    color: #FEBD69;
}

.gp-comp-val-defaut[b-jxz1kctgpu] {
    color: #4b5563;
}

.gp-comp-delta[b-jxz1kctgpu] {
    font-size: 0.74rem;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #1f2937;
    text-align: right;
}

.gp-delta-plus[b-jxz1kctgpu] {
    color: #FEBD69;
}

.gp-delta-moins[b-jxz1kctgpu] {
    color: #FEBD69;
}

/* ── PIED DU PANNEAU ─────────────────────────────────────────── */
.gp-panel-footer[b-jxz1kctgpu] {
    padding: 10px 20px;
    font-size: 0.68rem;
    color: #374151;
    border-top: 1px solid #111827;
    text-align: right;
}

/* ── PLACEHOLDER (aucun paramètre sélectionné) ───────────────── */
.gp-panel-placeholder[b-jxz1kctgpu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: #080808;
    border: 1px dashed #1f2937;
    border-radius: 12px;
    text-align: center;
    min-height: 200px;
}

.gp-placeholder-icone[b-jxz1kctgpu] {
    font-size: 2rem;
    color: #374151;
    margin-bottom: 16px;
}

.gp-placeholder-texte[b-jxz1kctgpu] {
    font-size: 0.80rem;
    color: #4b5563;
    line-height: 1.8;
    margin: 0;
}

/* ── BOUTONS ─────────────────────────────────────────────────── */
.gp-btn-sauvegarder[b-jxz1kctgpu] {
    background: #FF9900;
    color: #000;
    border: none;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 6px;
    transition: opacity 0.15s;
}

    .gp-btn-sauvegarder:hover:not(:disabled)[b-jxz1kctgpu] {
        opacity: 0.85;
    }

    .gp-btn-sauvegarder:disabled[b-jxz1kctgpu] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.gp-btn-reset[b-jxz1kctgpu] {
    background: transparent;
    color: var(--sol-muted, #a7b6ca);
    border: 1px solid #374151;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 6px;
    transition: color 0.15s, border-color 0.15s;
}

    .gp-btn-reset:hover[b-jxz1kctgpu] {
        color: #FEBD69;
        border-color: #FEBD69;
    }

.gp-btn-reset-all[b-jxz1kctgpu] {
    background: transparent;
    color: #FEBD69;
    border: 1px solid #FEBD69;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.76rem;
    padding: 7px 16px;
    border-radius: 6px;
    transition: background 0.15s;
}

    .gp-btn-reset-all:hover[b-jxz1kctgpu] {
        background: rgba(254, 189, 105, 0.12);
    }

.gp-btn-ghost[b-jxz1kctgpu] {
    background: transparent;
    color: var(--sol-muted, #a7b6ca);
    border: 1px solid #374151;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.78rem;
    padding: 7px 16px;
    border-radius: 6px;
}

    .gp-btn-ghost:hover[b-jxz1kctgpu] {
        color: var(--sol-muted, #a7b6ca);
    }

/* ── SPINNER ─────────────────────────────────────────────────── */
.gp-spinner[b-jxz1kctgpu] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #374151;
    border-top-color: #FF9900;
    border-radius: 50%;
    animation: gp-spin-b-jxz1kctgpu 0.7s linear infinite;
}

@keyframes gp-spin-b-jxz1kctgpu {
    to {
        transform: rotate(360deg);
    }
}

/* ── MODALE RESET GLOBAL ─────────────────────────────────────── */
.gp-backdrop[b-jxz1kctgpu] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1040;
}

.gp-modal-wrap[b-jxz1kctgpu] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 16px;
}

.gp-modal[b-jxz1kctgpu] {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1f2937;
    border-radius: 12px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.gp-modal-header[b-jxz1kctgpu] {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #1f2937;
}

.gp-modal-title[b-jxz1kctgpu] {
    font-size: 1rem;
    font-weight: 700;
    color: #e5e7eb;
}

.gp-modal-body[b-jxz1kctgpu] {
    padding: 20px 24px;
}

.gp-modal-footer[b-jxz1kctgpu] {
    padding: 16px 24px 20px;
    border-top: 1px solid #1f2937;
}

.gp-text[b-jxz1kctgpu] {
    font-size: 0.84rem;
    color: var(--sol-muted, #a7b6ca);
}

.gp-hint[b-jxz1kctgpu] {
    font-size: 0.76rem;
    color: var(--sol-muted, #a7b6ca);
}
/* /Components/KdpAdsPilotPro/Components/Pages/HistoriqueNocturne.razor.rz.scp.css */
/* ============================================================
   Fichier  : HistoriqueNocturne.razor.css
   Rôle     : Styles scoped de la page /historique-nocturne.
              Préfixe : hn-
              Thème sombre : variables CSS globales du projet
                --green  #2EC98A
                --cyan   #45C4DC
                --amber  #E0A040
                --red    #e0566a
              Base :  #0f131a / #151b24 / #1c2638
   ============================================================ */

/* ── PAGE ─────────────────────────────────────────────────── */
.hn-page[b-smjl0c6zmw] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

/* ── EN-TÊTE ──────────────────────────────────────────────── */
.hn-header[b-smjl0c6zmw] {
    border-left: 3px solid var(--cyan);
    padding-left: 1rem;
}

.hn-header-top[b-smjl0c6zmw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .3rem;
}

.hn-title[b-smjl0c6zmw] {
    font-size: 1.4rem;
    color: var(--cyan);
    margin: 0;
}

.hn-subtitle[b-smjl0c6zmw] {
    font-size: .75rem;
    color: var(--sol-muted, #a7b6ca);
    margin: 0;
}

/* ── BADGES STATUT SERVICE ────────────────────────────────── */
.hn-badge[b-smjl0c6zmw] {
    font-size: .68rem;
    padding: .2rem .55rem;
    border-radius: 4px;
    letter-spacing: .04em;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

/* En cours = cyan pulsant */
.hn-badge-encours[b-smjl0c6zmw] {
    background: rgba(69, 196, 220, .15);
    color: var(--cyan);
    border: 1px solid rgba(69, 196, 220, .4);
    animation: hn-pulse-b-smjl0c6zmw 2s ease-in-out infinite;
}

/* En attente = gris discret */
.hn-badge-attente[b-smjl0c6zmw] {
    background: rgba(107, 114, 128, .12);
    color: var(--sol-muted, #a7b6ca);
    border: 1px solid rgba(107, 114, 128, .25);
}

@keyframes hn-pulse-b-smjl0c6zmw {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

/* ── TOOLBAR ──────────────────────────────────────────────── */
.hn-toolbar[b-smjl0c6zmw] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hn-btn-refresh[b-smjl0c6zmw] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .75rem;
    background: rgba(69, 196, 220, .1);
    color: var(--cyan);
    border: 1px solid rgba(69, 196, 220, .3);
    border-radius: 5px;
    padding: .35rem .8rem;
    cursor: pointer;
    transition: background .15s;
}

    .hn-btn-refresh:hover:not(:disabled)[b-smjl0c6zmw] {
        background: rgba(69, 196, 220, .2);
    }

    .hn-btn-refresh:disabled[b-smjl0c6zmw] {
        opacity: .5;
        cursor: not-allowed;
    }

.hn-last-refresh[b-smjl0c6zmw] {
    font-size: .7rem;
    color: var(--sol-muted, #a7b6ca);
}

/* ── ALERTES ──────────────────────────────────────────────── */
.hn-alert-error[b-smjl0c6zmw] {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    background: rgba(224, 86, 106, .1);
    border: 1px solid rgba(224, 86, 106, .3);
    border-radius: 6px;
    padding: .75rem 1rem;
    color: var(--red);
    font-size: .8rem;
}

/* ── STATS ────────────────────────────────────────────────── */
.hn-stats-row[b-smjl0c6zmw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

@media (max-width: 700px) {
    .hn-stats-row[b-smjl0c6zmw] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hn-stat-card[b-smjl0c6zmw] {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-radius: 8px;
    padding: .9rem 1rem;
    text-align: center;
}

/* Variante alerte — si des erreurs existent */
.hn-stat-card-alert[b-smjl0c6zmw] {
    border-color: rgba(224, 86, 106, .35);
    background: rgba(224, 86, 106, .05);
}

.hn-stat-valeur[b-smjl0c6zmw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e5e7eb;
    margin-bottom: .2rem;
}

.hn-stat-green[b-smjl0c6zmw] {
    color: var(--green);
}

.hn-stat-cyan[b-smjl0c6zmw] {
    color: var(--cyan);
}

.hn-stat-red[b-smjl0c6zmw] {
    color: var(--red);
}

.hn-stat-label[b-smjl0c6zmw] {
    font-size: .68rem;
    color: var(--sol-muted, #a7b6ca);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── CHARGEMENT / VIDE ────────────────────────────────────── */
.hn-loading[b-smjl0c6zmw] {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--sol-muted, #a7b6ca);
    padding: 2rem;
    font-size: .85rem;
}

.hn-empty[b-smjl0c6zmw] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--sol-muted, #a7b6ca);
}

.hn-empty-icone[b-smjl0c6zmw] {
    font-size: 2.5rem;
    margin-bottom: .75rem;
    opacity: .4;
}

.hn-empty-texte[b-smjl0c6zmw] {
    font-size: .85rem;
    line-height: 1.7;
}

/* ── LISTE DES EXÉCUTIONS ─────────────────────────────────── */
.hn-executions[b-smjl0c6zmw] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Bloc = carte + détail (empilés) */
.hn-exec-bloc[b-smjl0c6zmw] {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #1c2638;
}

/* ── CARTE D'EXÉCUTION ────────────────────────────────────── */
.hn-exec-card[b-smjl0c6zmw] {
    display: grid;
    grid-template-columns: 140px 120px 180px 1fr 100px 30px;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    background: var(--sol-panel, #0e1b2d);
    cursor: pointer;
    transition: background .15s;
    user-select: none;
}

    .hn-exec-card:hover[b-smjl0c6zmw] {
        background: var(--sol-panel-raised, #16263b);
    }

/* Variantes de couleur selon le statut */
.hn-exec-termine[b-smjl0c6zmw] {
    border-left: 3px solid var(--green);
}

.hn-exec-erreur[b-smjl0c6zmw] {
    border-left: 3px solid var(--red);
}

.hn-exec-en_cours[b-smjl0c6zmw] {
    border-left: 3px solid var(--cyan);
}

.hn-exec-annule[b-smjl0c6zmw] {
    border-left: 3px solid #6b7280;
}

@media (max-width: 900px) {
    .hn-exec-card[b-smjl0c6zmw] {
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }
}

/* ── COLONNES DE LA CARTE ─────────────────────────────────── */

/* Colonne date */
.hn-exec-col-date[b-smjl0c6zmw] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.hn-exec-date[b-smjl0c6zmw] {
    font-size: .85rem;
    color: #e5e7eb;
    font-weight: 700;
}

.hn-exec-heure[b-smjl0c6zmw] {
    font-size: .7rem;
    color: var(--sol-muted, #a7b6ca);
}

/* Badge AUTO / MANUEL */
.hn-badge-type[b-smjl0c6zmw] {
    font-size: .6rem;
    padding: .1rem .35rem;
    border-radius: 3px;
    letter-spacing: .06em;
    display: inline-block;
    margin-top: .1rem;
    width: fit-content;
}

.hn-badge-type-automatique[b-smjl0c6zmw] {
    background: rgba(46, 201, 138, .1);
    color: var(--green);
    border: 1px solid rgba(46, 201, 138, .3);
}

.hn-badge-type-manuel[b-smjl0c6zmw] {
    background: rgba(224, 160, 64, .1);
    color: var(--amber);
    border: 1px solid rgba(224, 160, 64, .3);
}

/* Colonne statut */
.hn-exec-col-statut[b-smjl0c6zmw] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.hn-statut[b-smjl0c6zmw] {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.hn-statut-termine[b-smjl0c6zmw] {
    color: var(--green);
}

.hn-statut-erreur[b-smjl0c6zmw] {
    color: var(--red);
}

.hn-statut-en_cours[b-smjl0c6zmw] {
    color: var(--cyan);
}

.hn-statut-annule[b-smjl0c6zmw] {
    color: var(--sol-muted, #a7b6ca);
}

.hn-duree[b-smjl0c6zmw] {
    font-size: .68rem;
    color: var(--sol-muted, #a7b6ca);
}

/* Colonne fenêtre Amazon */
.hn-exec-col-fenetre[b-smjl0c6zmw] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.hn-fenetre-label[b-smjl0c6zmw] {
    font-size: .62rem;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.hn-fenetre-dates[b-smjl0c6zmw] {
    font-size: .75rem;
    color: var(--sol-muted, #a7b6ca);
}

/* Colonne progression jours */
.hn-exec-col-jours[b-smjl0c6zmw] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* Barre de progression */
.hn-progress-bar[b-smjl0c6zmw] {
    height: 4px;
    background: var(--sol-panel-raised, #16263b);
    border-radius: 2px;
    overflow: hidden;
}

.hn-progress-fill[b-smjl0c6zmw] {
    height: 100%;
    border-radius: 2px;
    transition: width .3s ease;
}

.hn-progress-ok[b-smjl0c6zmw] {
    background: var(--green);
}

.hn-progress-erreur[b-smjl0c6zmw] {
    background: var(--amber);
}

.hn-progress-texte[b-smjl0c6zmw] {
    display: flex;
    gap: .4rem;
    font-size: .68rem;
    align-items: center;
}

.hn-jours-ok[b-smjl0c6zmw] {
    color: var(--green);
}

.hn-jours-err[b-smjl0c6zmw] {
    color: var(--red);
}

.hn-jours-total[b-smjl0c6zmw] {
    color: var(--sol-muted, #a7b6ca);
}

/* Colonne lignes */
.hn-exec-col-lignes[b-smjl0c6zmw] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
}

.hn-lignes-val[b-smjl0c6zmw] {
    font-size: .9rem;
    color: var(--cyan);
    font-weight: 700;
}

.hn-lignes-label[b-smjl0c6zmw] {
    font-size: .65rem;
    color: var(--sol-muted, #a7b6ca);
}

.hn-doublons-val[b-smjl0c6zmw] {
    font-size: .65rem;
    color: #4b5563;
}

/* Flèche accordion */
.hn-exec-col-fleche[b-smjl0c6zmw] {
    text-align: center;
    color: var(--sol-muted, #a7b6ca);
    font-size: .8rem;
}

/* ── MESSAGE D'ERREUR GLOBAL ──────────────────────────────── */
.hn-exec-erreur[b-smjl0c6zmw] {
    background: rgba(224, 86, 106, .08);
    border-top: 1px solid rgba(224, 86, 106, .2);
    color: var(--red);
    font-size: .75rem;
    padding: .5rem 1rem;
}

/* ── DÉTAIL (GRILLE Jour × Type) ──────────────────────────── */
.hn-detail-loading[b-smjl0c6zmw] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.25rem;
    font-size: .8rem;
    color: var(--sol-muted, #a7b6ca);
    background: #0f131a;
    border-top: 1px solid #1c2638;
}

.hn-detail-vide[b-smjl0c6zmw] {
    padding: 1rem 1.25rem;
    font-size: .8rem;
    color: var(--sol-muted, #a7b6ca);
    background: #0f131a;
    border-top: 1px solid #1c2638;
}

.hn-detail-wrap[b-smjl0c6zmw] {
    background: #0f131a;
    border-top: 1px solid #1c2638;
    padding: 1rem 1rem 1.25rem;
}

/* ── LÉGENDE ──────────────────────────────────────────────── */
.hn-legende[b-smjl0c6zmw] {
    display: flex;
    gap: 1.25rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

.hn-leg-item[b-smjl0c6zmw] {
    font-size: .68rem;
    color: var(--sol-muted, #a7b6ca);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.hn-leg-insere[b-smjl0c6zmw] {
    color: var(--green);
}

.hn-leg-doublon[b-smjl0c6zmw] {
    color: var(--amber);
}

.hn-leg-vide[b-smjl0c6zmw] {
    color: #4b5563;
}

.hn-leg-erreur[b-smjl0c6zmw] {
    color: var(--red);
}

/* ── GRILLE SCROLLABLE ────────────────────────────────────── */
.hn-grille-scroll[b-smjl0c6zmw] {
    overflow-x: auto; /* Scroll horizontal sur mobile */
    -webkit-overflow-scrolling: touch;
}

/* ── TABLE ────────────────────────────────────────────────── */
.hn-grille[b-smjl0c6zmw] {
    border-collapse: collapse;
    width: 100%;
    min-width: 700px; /* Empêche l'écrasement des colonnes */
    font-size: .72rem;
}

/* En-têtes */
.hn-th-jour[b-smjl0c6zmw] {
    text-align: left;
    padding: .4rem .5rem;
    color: #4b5563;
    font-weight: 600;
    font-size: .65rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 70px;
    border-bottom: 1px solid #1c2638;
}

.hn-th-type[b-smjl0c6zmw] {
    text-align: center;
    padding: .4rem .3rem;
    color: var(--sol-muted, #a7b6ca);
    font-size: .65rem;
    letter-spacing: .04em;
    white-space: nowrap;
    border-bottom: 1px solid #1c2638;
    cursor: help; /* Indique que le titre complet est dans le tooltip */
}

.hn-th-total[b-smjl0c6zmw] {
    text-align: right;
    padding: .4rem .5rem;
    color: var(--cyan);
    font-size: .65rem;
    letter-spacing: .04em;
    border-bottom: 1px solid #1c2638;
    white-space: nowrap;
}

/* Lignes */
.hn-tr:hover[b-smjl0c6zmw] {
    background: rgba(255, 255, 255, .02);
}

/* Ligne avec au moins une erreur — fond légèrement rougeâtre */
.hn-tr-erreur[b-smjl0c6zmw] {
    background: rgba(224, 86, 106, .04);
}

/* Cellule date du jour */
.hn-td-jour[b-smjl0c6zmw] {
    padding: .35rem .5rem;
    color: var(--sol-muted, #a7b6ca);
    white-space: nowrap;
    border-bottom: 1px solid rgba(28, 38, 56, .6);
    font-size: .7rem;
}

/* Cellule de données — code couleur par statut */
.hn-td[b-smjl0c6zmw] {
    text-align: center;
    padding: .35rem .3rem;
    font-size: .72rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(28, 38, 56, .6);
    border-left: 1px solid rgba(28, 38, 56, .4);
    cursor: default;
    transition: opacity .1s;
}

    /* Survol → légère mise en évidence */
    .hn-td:hover[b-smjl0c6zmw] {
        opacity: .75;
    }

/* Statuts — couleurs */
.hn-td-insere[b-smjl0c6zmw] {
    color: var(--green);
    background: rgba(46, 201, 138, .06);
}

.hn-td-doublon[b-smjl0c6zmw] {
    color: var(--amber);
    background: rgba(224, 160, 64, .06);
}

.hn-td-vide[b-smjl0c6zmw] {
    color: #374151;
    background: transparent;
}

.hn-td-erreur[b-smjl0c6zmw] {
    color: var(--red);
    background: rgba(224, 86, 106, .1);
}

.hn-td-absent[b-smjl0c6zmw] {
    color: #1f2937;
    background: transparent;
}

/* Colonne total du jour */
.hn-td-total[b-smjl0c6zmw] {
    text-align: right;
    padding: .35rem .5rem;
    color: #4b5563;
    font-size: .7rem;
    border-bottom: 1px solid rgba(28, 38, 56, .6);
    border-left: 1px solid #1c2638;
    white-space: nowrap;
}

.hn-td-total-ok[b-smjl0c6zmw] {
    color: var(--cyan);
    font-weight: 700;
}

/* ── PIED DE TABLEAU (totaux) ─────────────────────────────── */
.hn-tr-total td[b-smjl0c6zmw] {
    background: var(--sol-panel, #0e1b2d);
    border-top: 2px solid #1c2638;
    font-weight: 700;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.hn-td-footer[b-smjl0c6zmw] {
    text-align: center;
    color: var(--sol-muted, #a7b6ca);
    font-size: .7rem;
    border-left: 1px solid rgba(28, 38, 56, .4);
}

/* ── SPINNERS ─────────────────────────────────────────────── */
.hn-spinner[b-smjl0c6zmw] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(69, 196, 220, .2);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: hn-spin-b-smjl0c6zmw .7s linear infinite;
}

.hn-spinner-sm[b-smjl0c6zmw] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(69, 196, 220, .2);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: hn-spin-b-smjl0c6zmw .7s linear infinite;
}

@keyframes hn-spin-b-smjl0c6zmw {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/KdpAdsPilotPro/Components/Pages/ImportRapport.razor.rz.scp.css */
/* ============================================================
   Fichier  : ImportRapport.razor.css
   Rôle     : Styles scoped de la page ImportRapport.
              Préfixe : ir-
              Thème sombre : --bg-card, --amazon-orange, --green, --amber, --red

   NOUVEAUX BLOCS PAR RAPPORT À LA VERSION PRÉCÉDENTE :
     - .ir-mode-badge          (badge "Jour par jour" dans le subtitle)
     - .ir-toggle-*            (toggle switch dans la toolbar)
     - .ir-timeline-card       (carte de la section progression)
     - .ir-timeline            (rangée de bulles)
     - .ir-tj-*                (bulle individuelle d'un jour)
     - .ir-timeline-recap      (récapitulatif final)
     - .ir-recap-*             (items du récapitulatif)
   ============================================================ */

/* ── PAGE ─────────────────────────────────────────────────── */
.ir-page[b-fy1tlc9xiw] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── EN-TÊTE ──────────────────────────────────────────────── */
.ir-header[b-fy1tlc9xiw] {
    border-left: 3px solid #FF9900;
    padding-left: 1rem;
}

/* Ligne du haut : titre + dernière extraction côte à côte */
.ir-header-top[b-fy1tlc9xiw] {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}

.ir-title[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 1.4rem;
    color: #FF9900;
    margin: 0;
    flex-shrink: 0;
}

/* Indicateur "Dernière extraction" dans l'en-tête */
.ir-last-extract[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .72rem;
    color: var(--sol-muted, #a7b6ca);
}

    /* La date en gras prend la couleur green pour signaler que c'est OK */
    .ir-last-extract strong[b-fy1tlc9xiw] {
        color: var(--green);
        font-weight: 700;
    }

/* Variante "Aucune extraction" — amber pour attirer l'attention */
.ir-last-extract-none[b-fy1tlc9xiw] {
    color: var(--amber);
    font-size: .72rem;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.ir-subtitle[b-fy1tlc9xiw] {
    font-size: .8rem;
    color: var(--sol-muted, #a7b6ca);
    margin: 0 0 .75rem 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Badge "Jour par jour" dans le subtitle — actif quand le mode est ON */
.ir-mode-badge[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .65rem;
    background: rgba(69, 196, 220, .12);
    color: #FF9900;
    border: 1px solid rgba(69, 196, 220, .3);
    padding: .1rem .4rem;
    border-radius: 3px;
    letter-spacing: .04em;
}

/* ── CARD GÉNÉRIQUE ───────────────────────────────────────── */
.ir-card[b-fy1tlc9xiw] {
    background: var(--bg-card);
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: 1.25rem;
}

.ir-card-title[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .75rem;
    color: var(--sol-muted, #a7b6ca);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── TOOLBAR ──────────────────────────────────────────────── */
.ir-toolbar[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Le composant Blazor InputFile rend un <input type="file"> natif —
   bouton système du navigateur, non stylable de façon fiable (le
   style scopé Blazor doit atteindre un élément à l'intérieur d'un
   composant enfant, ce qui n'est pas garanti). Masqué visuellement
   ici (accessible-hidden : présent et cliquable, juste invisible) ;
   le <label for="ir-file-ventes"> dans le markup fait office de
   bouton visible — cliquer dessus déclenche le vrai input caché. */
.ir-file-wrap[b-fy1tlc9xiw] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.ir-btn-disabled[b-fy1tlc9xiw] {
    opacity: .4;
    cursor: not-allowed;
}

.ir-param-row[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.ir-param-label[b-fy1tlc9xiw] {
    font-size: .8rem;
    color: var(--sol-muted, #a7b6ca);
    flex-shrink: 0;
}

.ir-input[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .8rem;
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    color: #d1d5db;
    padding: .3rem .6rem;
    border-radius: 4px;
    outline: none;
}

    .ir-input:focus[b-fy1tlc9xiw] {
        border-color: #FF9900;
    }

    .ir-input:disabled[b-fy1tlc9xiw] {
        opacity: .4;
    }

/* ── INDICATEUR DERNIÈRE EXTRACTION (toolbar) ─────────────── */
/* Rappel compact dans la toolbar : "Dernier au 10/03/2026"
   Aide l'utilisateur à choisir la date de départ du prochain fetch
   sans remonter en haut de page. */
.ir-last-extract-toolbar[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .6rem;
    background: rgba(46, 201, 138, .05);
    border: 1px solid rgba(46, 201, 138, .15);
    border-radius: 4px;
    flex-shrink: 0;
}

/* Date dans la toolbar — plus compacte que dans l'en-tête */
.ir-last-extract-date[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .75rem;
    font-weight: 700;
    color: var(--green);
}

/* ── TOGGLE SWITCH "JOUR PAR JOUR" ────────────────────────── */
/*
   Architecture du toggle :
   <label class="ir-toggle-wrap">
     <div class="ir-toggle [ir-toggle-on]">
       <input type="checkbox" class="ir-toggle-input" />   ← caché visuellement
       <span class="ir-toggle-thumb"></span>               ← curseur animé
     </div>
     <span class="ir-toggle-text">Jour par jour</span>
     <span class="ir-toggle-hint">N jours</span>          ← optionnel
   </label>
*/

.ir-toggle-wrap[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    user-select: none; /* Évite la sélection de texte au clic */
}

.ir-toggle-wrap-disabled[b-fy1tlc9xiw] {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Piste du toggle (background qui change de couleur) */
.ir-toggle[b-fy1tlc9xiw] {
    position: relative;
    width: 34px;
    height: 18px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 9px;
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
}

/* État ON : piste en orange Amazon */
.ir-toggle-on[b-fy1tlc9xiw] {
    background: rgba(69, 196, 220, .25);
    border-color: #FF9900;
}

/* L'input natif est caché — on le garde dans le DOM pour l'accessibilité */
.ir-toggle-input[b-fy1tlc9xiw] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Curseur circulaire qui glisse de gauche à droite */
.ir-toggle-thumb[b-fy1tlc9xiw] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #6b7280;
    border-radius: 50%;
    transition: left .2s, background .2s;
}

/* En état ON, le curseur glisse à droite et prend la couleur orange Amazon */
.ir-toggle-on .ir-toggle-thumb[b-fy1tlc9xiw] {
    left: 18px;
    background: #FF9900;
}

.ir-toggle-text[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    color: var(--sol-muted, #a7b6ca);
}

/* Hint "N jours" — affiché quand le toggle est ON */
.ir-toggle-hint[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .68rem;
    color: #FF9900;
    background: rgba(69, 196, 220, .08);
    border: 1px solid rgba(69, 196, 220, .2);
    padding: .1rem .35rem;
    border-radius: 3px;
}

/* ── BOUTONS D'ACTION ─────────────────────────────────────── */
.ir-actions[b-fy1tlc9xiw] {
    display: flex;
    gap: .75rem;
    margin-left: auto;
}

.ir-btn[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .8rem;
    padding: .4rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: background .15s;
    flex-shrink: 0;
}

.ir-btn-primary[b-fy1tlc9xiw] {
    background: transparent;
    border: 1px solid #FF9900;
    color: #FF9900;
}

    .ir-btn-primary:hover:not(:disabled)[b-fy1tlc9xiw] {
        background: rgba(69, 196, 220, .1);
    }

    .ir-btn-primary:disabled[b-fy1tlc9xiw] {
        opacity: .4;
        cursor: not-allowed;
    }

.ir-btn-danger[b-fy1tlc9xiw] {
    background: transparent;
    border: 1px solid var(--red);
    color: var(--red);
}

    .ir-btn-danger:hover[b-fy1tlc9xiw] {
        background: rgba(224, 86, 106, .1);
    }

.ir-btn-bdd[b-fy1tlc9xiw] {
    background: transparent;
    border: 1px solid var(--green);
    color: var(--green);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .8rem;
    padding: .4rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: background .15s;
}

    .ir-btn-bdd:hover:not(:disabled)[b-fy1tlc9xiw] {
        background: rgba(46, 201, 138, .1);
    }

    .ir-btn-bdd:disabled[b-fy1tlc9xiw] {
        opacity: .4;
        cursor: not-allowed;
    }

/* ── AVERTISSEMENT DATES INVALIDES ───────────────────────── */
/* Amber — pas bloquant, juste informatif */
.ir-date-warning[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .75rem;
    color: var(--amber);
    background: rgba(224, 160, 64, .08);
    border: 1px solid rgba(224, 160, 64, .2);
    border-radius: 4px;
    padding: .4rem .75rem;
    margin-top: .5rem;
}

/* ── CHECKBOXES ───────────────────────────────────────────── */
.ir-checkboxes[b-fy1tlc9xiw] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ir-check-actions[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ir-btn-link[b-fy1tlc9xiw] {
    background: none;
    border: none;
    color: #FF9900;
    font-size: .75rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.ir-sep[b-fy1tlc9xiw] {
    color: #4b5563;
}

.ir-checks-grid[b-fy1tlc9xiw] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.ir-check-label[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    color: #d1d5db;
    cursor: pointer;
}

.ir-check-disabled[b-fy1tlc9xiw] {
    opacity: .4;
    cursor: not-allowed;
}

.ir-check-saved[b-fy1tlc9xiw] {
    font-size: .7rem;
    opacity: .7;
}

/* ── TIMELINE "JOUR PAR JOUR" ─────────────────────────────── */

/* Carte conteneur de la timeline — même style que .ir-card */
.ir-timeline-card[b-fy1tlc9xiw] {
    background: var(--bg-card);
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Indication "Jour X / N" dans le titre de la section */
.ir-timeline-progress[b-fy1tlc9xiw] {
    font-size: .72rem;
    color: #FF9900;
    font-weight: normal;
    opacity: .8;
}

/* Rangée horizontale de bulles — une par jour.
   flex-wrap permet le retour à la ligne si beaucoup de jours */
.ir-timeline[b-fy1tlc9xiw] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── BULLE D'UN JOUR ────────────────────────── */
/*
   Chaque bulle affiche :
   - Une icône (spinner, ✓, ✕, ○)
   - La date dd/MM
   - Le nombre d'enregistrements insérés (si REUSSI)
   - Une icône ⚠ avec tooltip (si ERREUR)
*/
.ir-tj[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border-radius: 6px;
    border: 1px solid #2a2a2a;
    background: #0a0a0a;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .72rem;
    transition: border-color .2s, background .2s;
}

/* ATTENTE : gris neutre */
.ir-tj-attente[b-fy1tlc9xiw] {
    border-color: #2a2a2a;
    color: #4b5563;
}

/* EN_COURS : orange Amazon pulsant */
.ir-tj-en_cours[b-fy1tlc9xiw] {
    border-color: rgba(69, 196, 220, .4);
    background: rgba(69, 196, 220, .05);
    color: #FF9900;
}

/* REUSSI : vert */
.ir-tj-reussi[b-fy1tlc9xiw] {
    border-color: rgba(46, 201, 138, .4);
    background: rgba(46, 201, 138, .05);
    color: var(--green);
}

/* ERREUR : rouge */
.ir-tj-erreur[b-fy1tlc9xiw] {
    border-color: rgba(224, 86, 106, .4);
    background: rgba(224, 86, 106, .05);
    color: var(--red);
}

/* Icône du statut (spinner, ✓, ✕, ○) */
.ir-tj-icone[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
}

/* Date dd/MM dans la bulle */
.ir-tj-date[b-fy1tlc9xiw] {
    font-weight: 700;
    letter-spacing: .02em;
}

/* Nombre d'insérés — affiché uniquement si > 0 après REUSSI */
.ir-tj-count[b-fy1tlc9xiw] {
    font-size: .65rem;
    opacity: .8;
    background: rgba(46, 201, 138, .12);
    padding: .05rem .3rem;
    border-radius: 3px;
}

/* Icône ⚠ pour l'erreur — le détail est dans le title (tooltip natif) */
.ir-tj-erreur-icone[b-fy1tlc9xiw] {
    cursor: help;
    opacity: .8;
}

/* ── BARRE DE PROGRESSION GLOBALE ────────────────────────── */
/*
   Visible dans les deux modes pendant un fetch.
   Placée entre la carte paramètres et la timeline / la grille.
*/
.ir-fetch-progress[b-fy1tlc9xiw] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    background: var(--bg-card);
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: .75rem 1.25rem;
}

/* Ligne du haut : labels + estimation */
.ir-fetch-progress-label[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .75rem;
    color: var(--sol-muted, #a7b6ca);
}

.ir-fetch-progress-sep[b-fy1tlc9xiw] {
    color: #374151;
}

/* ── BARRE DE PROGRESSION (partagée entre globale et timeline) */
.ir-progress-bar-track[b-fy1tlc9xiw] {
    flex: 1;
    height: 6px;
    background: #1a1a1a;
    border-radius: 3px;
    overflow: hidden;
}

.ir-progress-bar-fill[b-fy1tlc9xiw] {
    height: 100%;
    background: var(--green);
    border-radius: 3px;
    transition: width .4s ease;
    min-width: 3px; /* Toujours visible même à 1% */
}

.ir-progress-bar-err[b-fy1tlc9xiw] {
    background: var(--red);
}

/* Estimation temps restant */
.ir-progress-eta[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .7rem;
    color: #FF9900;
    flex-shrink: 0;
    background: rgba(69, 196, 220, .08);
    border: 1px solid rgba(69, 196, 220, .15);
    padding: .1rem .4rem;
    border-radius: 3px;
}

/* ── AVERTISSEMENT ARCHIVAGE ──────────────────────────────── */
/*
   Amber (pas rouge) : les données sont bien en BDD,
   seul le déplacement du fichier vers Archives/ a échoué.
   L'utilisateur peut ré-essayer manuellement.
*/
.ir-bdd-row-archive-warn[b-fy1tlc9xiw] {
    font-size: .68rem;
    color: var(--amber);
    background: rgba(224, 160, 64, .08);
    border: 1px solid rgba(224, 160, 64, .2);
    padding: .1rem .35rem;
    border-radius: 3px;
    cursor: help;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── RÉCAPITULATIF FINAL ──────────────────────────────────── */
/* Affiché sous la timeline une fois le traitement terminé */
.ir-timeline-recap[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: .75rem;
    border-top: 1px solid #1a1a1a;
}

/* Item générique du récapitulatif */
.ir-recap-item[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .72rem;
    padding: .2rem .55rem;
    border-radius: 4px;
}

/* Jours réussis — vert */
.ir-recap-ok[b-fy1tlc9xiw] {
    background: rgba(46, 201, 138, .1);
    color: var(--green);
    border: 1px solid rgba(46, 201, 138, .2);
}

/* Jours en erreur — rouge */
.ir-recap-err[b-fy1tlc9xiw] {
    background: rgba(224, 86, 106, .1);
    color: var(--red);
    border: 1px solid rgba(224, 86, 106, .2);
}

/* Total enregistrements — amber */
.ir-recap-total[b-fy1tlc9xiw] {
    background: rgba(224, 160, 64, .1);
    color: var(--amber);
    border: 1px solid rgba(224, 160, 64, .2);
}

/* ── GRILLE DES RAPPORTS ──────────────────────────────────── */
.ir-grid[b-fy1tlc9xiw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

/* ── CARTE RAPPORT ────────────────────────────────────────── */
.ir-rapport-card[b-fy1tlc9xiw] {
    background: var(--bg-card);
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: border-color .2s;
}

/* Couleur de bordure selon le statut */
.ir-rapport-done[b-fy1tlc9xiw] {
    border-color: rgba(46, 201, 138, .3);
}

.ir-rapport-error[b-fy1tlc9xiw],
.ir-rapport-failed[b-fy1tlc9xiw] {
    border-color: rgba(224, 86, 106, .3);
}

.ir-rapport-pending[b-fy1tlc9xiw],
.ir-rapport-processing[b-fy1tlc9xiw],
.ir-rapport-creating[b-fy1tlc9xiw],
.ir-rapport-downloading[b-fy1tlc9xiw] {
    border-color: rgba(69, 196, 220, .2);
}

/* ── EN-TÊTE RAPPORT ──────────────────────────────────────── */
.ir-rapport-header[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.ir-rapport-info[b-fy1tlc9xiw] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.ir-rapport-type[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .82rem;
    color: #d1d5db;
    font-weight: 700;
}

.ir-rapport-id[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .7rem;
    color: #4b5563;
}

.ir-rapport-right[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* ── BADGES STATUT ────────────────────────────────────────── */
.ir-badge[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 3px;
}

.ir-badge-success[b-fy1tlc9xiw] {
    background: rgba(46, 201, 138, .15);
    color: var(--green);
}

.ir-badge-danger[b-fy1tlc9xiw] {
    background: rgba(224, 86, 106, .15);
    color: var(--red);
}

.ir-badge-warning[b-fy1tlc9xiw] {
    background: rgba(224, 160, 64, .15);
    color: var(--amber);
}

.ir-badge-secondary[b-fy1tlc9xiw] {
    background: #1a1a1a;
    color: var(--sol-muted, #a7b6ca);
}

.ir-badge-idle[b-fy1tlc9xiw] {
    background: #111;
    color: #374151;
}

.ir-duree[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .7rem;
    color: #4b5563;
}

/* ── ERREUR ───────────────────────────────────────────────── */
.ir-erreur[b-fy1tlc9xiw] {
    font-size: .75rem;
    color: var(--red);
    word-break: break-word;
}

/* ── SAUVEGARDE ───────────────────────────────────────────── */
.ir-saved-info[b-fy1tlc9xiw] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.ir-saved-badge[b-fy1tlc9xiw] {
    font-size: .72rem;
    padding: .15rem .4rem;
    border-radius: 3px;
    display: inline-block;
}

.ir-saved-ok[b-fy1tlc9xiw] {
    background: rgba(46, 201, 138, .1);
    color: var(--green);
}

.ir-saved-cache[b-fy1tlc9xiw] {
    background: rgba(69, 196, 220, .1);
    color: #FF9900;
}

.ir-saved-file[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .65rem;
    color: #374151;
}

.ir-saved-count[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .68rem;
    color: var(--amber);
    background: rgba(224, 160, 64, .10);
    border: 1px solid rgba(224, 160, 64, .2);
    padding: .1rem .4rem;
    border-radius: 3px;
    display: inline-block;
}

/* ── FOOTER JSON ──────────────────────────────────────────── */
.ir-rapport-footer[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.ir-json-size[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .7rem;
    color: #4b5563;
}

.ir-btn-toggle[b-fy1tlc9xiw] {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: var(--sol-muted, #a7b6ca);
    font-size: .72rem;
    padding: .2rem .55rem;
    border-radius: 4px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

    .ir-btn-toggle:hover[b-fy1tlc9xiw] {
        color: #FF9900;
        border-color: #FF9900;
    }

/* ── APERÇU JSON ──────────────────────────────────────────── */
.ir-json[b-fy1tlc9xiw] {
    background: #050505;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    padding: .75rem;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .7rem;
    color: #d1d5db;
    overflow: auto;
    max-height: 400px;
    white-space: pre;
    line-height: 1.6;
    margin: 0;
}

/* ── SPINNERS ─────────────────────────────────────────────── */
.ir-spinner[b-fy1tlc9xiw] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(69, 196, 220, .3);
    border-top-color: #FF9900;
    border-radius: 50%;
    animation: ir-spin .6s linear infinite;
}

.ir-spinner-sm[b-fy1tlc9xiw] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(69, 196, 220, .2);
    border-top-color: #FF9900;
    border-radius: 50%;
    animation: ir-spin .6s linear infinite;
}

@@keyframes ir-spin {
    to[b-fy1tlc9xiw] {
        transform: rotate(360deg);
    }
}

/* ── RÉSULTAT BDD DANS LES CARTES ─────────────────────────── */
.ir-bdd-result[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .72rem;
    padding: .3rem .5rem;
    border-radius: 4px;
}

.ir-bdd-en_cours[b-fy1tlc9xiw] {
    color: var(--amber);
    background: rgba(224, 160, 64, .08);
}

.ir-bdd-insere[b-fy1tlc9xiw] {
    color: var(--green);
    background: rgba(46, 201, 138, .08);
}

.ir-bdd-doublon[b-fy1tlc9xiw] {
    color: var(--sol-muted, #a7b6ca);
    background: rgba(107, 114, 128, .08);
}

.ir-bdd-erreur_bdd[b-fy1tlc9xiw] {
    color: var(--red);
    background: rgba(224, 86, 106, .08);
    word-break: break-word;
}

.ir-bdd-label[b-fy1tlc9xiw] {
    font-size: .65rem;
    color: var(--sol-muted, #a7b6ca);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ir-bdd-sep[b-fy1tlc9xiw] {
    color: #374151;
    font-size: .65rem;
}

.ir-bdd-count[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .75rem;
    font-weight: 700;
    padding: .1rem .35rem;
    border-radius: 3px;
}

.ir-bdd-total[b-fy1tlc9xiw] {
    background: rgba(107, 114, 128, .12);
    color: var(--sol-muted, #a7b6ca);
}

.ir-bdd-ins[b-fy1tlc9xiw] {
    background: rgba(46, 201, 138, .15);
    color: var(--green);
}

.ir-bdd-dup[b-fy1tlc9xiw] {
    background: rgba(224, 86, 106, .15);
    color: var(--red);
}

/* ── BOUTON BDD INDIVIDUEL (sur chaque carte) ─────────────── */
.ir-btn-bdd-sm[b-fy1tlc9xiw] {
    background: transparent;
    border: 1px solid rgba(46, 201, 138, .4);
    color: var(--green);
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .7rem;
    padding: .2rem .55rem;
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .35rem;
    transition: background .15s;
}

    .ir-btn-bdd-sm:hover:not(:disabled)[b-fy1tlc9xiw] {
        background: rgba(46, 201, 138, .1);
    }

    .ir-btn-bdd-sm:disabled[b-fy1tlc9xiw] {
        opacity: .35;
        cursor: not-allowed;
    }

/* ── SECTION INTÉGRATION BDD ──────────────────────────────── */
.ir-bdd-section[b-fy1tlc9xiw] {
    background: var(--bg-card);
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ir-bdd-section-hint[b-fy1tlc9xiw] {
    font-size: .7rem;
    color: #FF9900;
    font-weight: normal;
}

.ir-bdd-section-recap[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: normal;
}

.ir-bdd-recap-ok[b-fy1tlc9xiw] {
    font-size: .7rem;
    color: var(--green);
}

.ir-bdd-recap-dup[b-fy1tlc9xiw] {
    font-size: .7rem;
    color: var(--sol-muted, #a7b6ca);
}

.ir-bdd-recap-err[b-fy1tlc9xiw] {
    font-size: .7rem;
    color: var(--red);
}

/* ── LISTE DES FICHIERS ───────────────────────────────────── */
.ir-bdd-list[b-fy1tlc9xiw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ir-bdd-row[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .3rem .5rem;
    border-radius: 4px;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .72rem;
    border: 1px solid transparent;
    transition: background .1s;
}

.ir-bdd-row-attente[b-fy1tlc9xiw] {
    color: #4b5563;
}

.ir-bdd-row-en_cours[b-fy1tlc9xiw] {
    color: #FF9900;
    background: rgba(69, 196, 220, .04);
    border-color: rgba(69, 196, 220, .15);
}

.ir-bdd-row-insere[b-fy1tlc9xiw] {
    color: var(--green);
    background: rgba(46, 201, 138, .04);
    border-color: rgba(46, 201, 138, .12);
}

.ir-bdd-row-doublon[b-fy1tlc9xiw] {
    color: var(--sol-muted, #a7b6ca);
    background: rgba(107, 114, 128, .04);
}

/* Fichier vide — amber : Amazon n'a retourné aucune donnée ce jour */
.ir-bdd-row-vide[b-fy1tlc9xiw] {
    color: var(--amber);
    background: rgba(224, 160, 64, .04);
}

.ir-bdd-row-erreur[b-fy1tlc9xiw] {
    color: var(--red);
    background: rgba(224, 86, 106, .04);
    border-color: rgba(224, 86, 106, .15);
}

.ir-bdd-row-icone[b-fy1tlc9xiw] {
    width: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Nom du fichier — occupe tout l'espace dispo, tronqué si trop long */
.ir-bdd-row-nom[b-fy1tlc9xiw] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .01em;
}

.ir-bdd-row-stats[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}

/* Message d'erreur tronqué — title pour le texte complet */
.ir-bdd-row-erreur[b-fy1tlc9xiw] {
    font-size: .68rem;
    color: var(--red);
    opacity: .85;
    cursor: help;
    flex-shrink: 0;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── HEATMAP MATURITÉ ─────────────────────────────────────────
   Préfixe : ir-mat-
   Utilise les variables CSS du thème global du projet :
   --bg-card, --bg-l2, --green, --cyan, --amber, --red
   ─────────────────────────────────────────────────────────── */

.ir-mat-section[b-fy1tlc9xiw] {
    background: var(--bg-card);
    border: 1px solid #1c2638;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    overflow: hidden;
}

.ir-mat-header[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin-bottom: .75rem;
}

.ir-mat-title[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .75rem;
    color: var(--sol-muted, #a7b6ca);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ir-mat-chevron[b-fy1tlc9xiw] {
    font-size: .7rem;
    color: #4a6070;
    transition: transform .2s;
}

.ir-mat-chevron-open[b-fy1tlc9xiw] {
    transform: rotate(180deg);
}

.ir-mat-cards[b-fy1tlc9xiw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ir-mat-card[b-fy1tlc9xiw] {
    background: #0f131a;
    border: 1px solid #1c2638;
    border-radius: 5px;
    padding: 6px 12px;
    min-width: 95px;
}

.ir-mat-card-label[b-fy1tlc9xiw] {
    font-size: .65rem;
    color: var(--sol-muted, #a7b6ca);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
}

.ir-mat-card-val[b-fy1tlc9xiw] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 1.2rem;
    font-weight: 500;
}

/* Défilement horizontal si l'écran est trop étroit */
.ir-mat-scroll[b-fy1tlc9xiw] {
    overflow-x: auto;
}

/* Table pleine largeur */
.ir-mat-table[b-fy1tlc9xiw] {
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
    table-layout: fixed;
}

    .ir-mat-table th[b-fy1tlc9xiw] {
        font-size: .65rem;
        color: #a0b4c8;
        font-weight: 400;
        padding: 3px 2px;
        text-align: center;
        white-space: nowrap;
        font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
        overflow: hidden;
        text-overflow: ellipsis;
    }

        /* Colonne date — largeur fixe à gauche */
        .ir-mat-table th:first-child[b-fy1tlc9xiw],
        .ir-mat-table td.ir-mat-date[b-fy1tlc9xiw] {
            width: 44px;
            text-align: right;
            padding-right: 6px;
        }

        /* Séparateur visuel avant la colonne "Si auj." */
        .ir-mat-table th.ir-mat-th-sep[b-fy1tlc9xiw],
        .ir-mat-table td.ir-mat-td-sep[b-fy1tlc9xiw] {
            border-left: 2px solid rgba(69, 196, 220, .25);
        }

.ir-mat-date[b-fy1tlc9xiw] {
    font-size: .68rem;
    color: #a0b4c8;
    white-space: nowrap;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

/* Cellule rapport — prend toute la largeur disponible */
.ir-mat-cell[b-fy1tlc9xiw] {
    height: 22px;
    border-radius: 3px;
    text-align: center;
    vertical-align: middle;
    font-size: .62rem;
    font-weight: 500;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    cursor: default;
}

/* Cellule "Si aujourd'hui" — légèrement en gras */
.ir-mat-cell-pot[b-fy1tlc9xiw] {
    height: 22px;
    border-radius: 3px;
    text-align: center;
    vertical-align: middle;
    font-size: .62rem;
    font-weight: 700;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

/* ── Couleurs par cycle — utilise les variables du projet ── */

.ir-mat-j[b-fy1tlc9xiw] {
    background: rgba(224, 86, 106, .12);
    color: var(--red);
    border: 1px solid rgba(224, 86, 106, .3);
}

.ir-mat-j3[b-fy1tlc9xiw] {
    background: rgba(224, 123, 85, .12);
    color: #e07b55;
    border: 1px solid rgba(224, 123, 85, .3);
}

.ir-mat-j5[b-fy1tlc9xiw] {
    background: rgba(224, 152, 63, .12);
    color: #e0983f;
    border: 1px solid rgba(224, 152, 63, .3);
}

.ir-mat-j8[b-fy1tlc9xiw] {
    background: rgba(224, 160, 64, .12);
    color: var(--amber);
    border: 1px solid rgba(224, 160, 64, .3);
}

.ir-mat-j15[b-fy1tlc9xiw] {
    background: rgba(69, 196, 220, .12);
    color: var(--cyan);
    border: 1px solid rgba(69, 196, 220, .3);
}

.ir-mat-j32[b-fy1tlc9xiw] {
    background: rgba(46, 201, 138, .12);
    color: var(--green);
    border: 1px solid rgba(46, 201, 138, .3);
}

.ir-mat-vide[b-fy1tlc9xiw] {
    background: rgba(28, 38, 56, .4);
    color: #3d5070;
    border: 1px solid rgba(28, 38, 56, .6);
}

.ir-mat-row-recent td[b-fy1tlc9xiw] {
    background-color: rgba(69, 196, 220, .04);
}

.ir-mat-legende[b-fy1tlc9xiw] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid #1c2638;
}

.ir-mat-leg-item[b-fy1tlc9xiw] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .65rem;
    color: var(--sol-muted, #a7b6ca);
}

.ir-mat-leg-dot[b-fy1tlc9xiw] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
/* /Components/KdpAdsPilotPro/Components/Pages/ImportReferentielAds.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   ImportReferentielAds.razor.css
   Préfixe : ira-
   Thème sombre — variables CSS globales de l'application.
   ════════════════════════════════════════════════════════════════ */

/* ── Sélecteur de marketplace ───────────────────────────── */
.ira-marketplace[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.ira-marketplace-label[b-30b3ds63c7] {
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.78rem;
    flex-shrink: 0;
}

.ira-marketplace-select[b-30b3ds63c7] {
    background: #1a1a1a;
    border: 1px solid #333;
    color: var(--cyan);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.78rem;
    cursor: pointer;
    flex: 1;
    max-width: 400px;
}

    .ira-marketplace-select:disabled[b-30b3ds63c7] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .ira-marketplace-select:focus[b-30b3ds63c7] {
        outline: none;
        border-color: var(--cyan);
    }

/* ── Page ───────────────────────────────────────────────────── */
.ira-page[b-30b3ds63c7] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

/* ── En-tête ────────────────────────────────────────────────── */
.ira-header[b-30b3ds63c7] {
    border-left: 3px solid var(--cyan);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

.ira-header-top[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.3rem;
}

.ira-title[b-30b3ds63c7] {
    color: var(--cyan);
    font-size: 1.4rem;
    margin: 0;
}

.ira-subtitle[b-30b3ds63c7] {
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.8rem;
    margin: 0;
}

.ira-btn-refresh[b-30b3ds63c7] {
    background: none;
    border: 1px solid #444;
    color: var(--sol-muted, #a7b6ca);
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.75rem;
    transition: color 0.2s, border-color 0.2s;
}

    .ira-btn-refresh:hover:not(:disabled)[b-30b3ds63c7] {
        color: var(--cyan);
        border-color: var(--cyan);
    }

    .ira-btn-refresh:disabled[b-30b3ds63c7] {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* ── Chargement ─────────────────────────────────────────────── */
.ira-loading[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.5rem;
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.85rem;
    background: var(--bg-card);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* ── Bandeau erreur ─────────────────────────────────────────── */
.ira-error-banner[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: rgba(244,67,54,0.08);
    border: 1px solid rgba(244,67,54,0.3);
    border-radius: 6px;
    color: var(--red);
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.ira-btn-link[b-30b3ds63c7] {
    background: none;
    border: none;
    color: var(--cyan);
    cursor: pointer;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.8rem;
    text-decoration: underline;
    padding: 0;
}

/* ── Section ────────────────────────────────────────────────── */
.ira-section[b-30b3ds63c7] {
    background: var(--bg-card);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.ira-section-header[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #222;
}

.ira-section-title[b-30b3ds63c7] {
    color: var(--cyan);
    font-size: 0.85rem;
    font-weight: bold;
}

.ira-section-count[b-30b3ds63c7] {
    color: var(--amber);
    font-size: 0.75rem;
}

/* ── Groupe ASIN ────────────────────────────────────────────── */
.ira-groupe[b-30b3ds63c7] {
    margin-bottom: 0.8rem;
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;
}

.ira-groupe-header[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    background: rgba(0,188,212,0.06);
    border-bottom: 1px solid #222;
}

.ira-groupe-header-left[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.ira-checkbox-wrap[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

    .ira-checkbox-wrap input[type="checkbox"][b-30b3ds63c7] {
        width: 14px;
        height: 14px;
        cursor: pointer;
    }

.ira-groupe-asin[b-30b3ds63c7] {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--cyan);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ira-asin-code[b-30b3ds63c7] {
    color: var(--cyan);
    font-weight: bold;
}

.ira-asin-titre[b-30b3ds63c7] {
    color: #aaa;
    font-weight: normal;
    font-size: 0.75rem;
}

.ira-asin-inconnu-label[b-30b3ds63c7] {
    color: var(--amber);
    font-weight: normal;
    font-size: 0.75rem;
}

.ira-asin-inconnu[b-30b3ds63c7] {
    color: var(--amber);
}

.ira-asin-archive-badge[b-30b3ds63c7] {
    color: var(--sol-muted, #a7b6ca);
    background: rgba(167, 182, 202, 0.12);
    border: 1px solid rgba(167, 182, 202, 0.3);
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    font-size: 0.68rem;
    font-weight: normal;
}

.ira-groupe-count[b-30b3ds63c7] {
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* ── Chevron de repli ───────────────────────────────────────── */
.ira-chevron[b-30b3ds63c7] {
    background: none;
    border: none;
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0 0.4rem 0 0;
    line-height: 1;
    transition: transform 0.15s ease;
}

.ira-chevron-ouvert[b-30b3ds63c7] {
    transform: rotate(90deg);
}

/* ── Champ de recherche ─────────────────────────────────────── */
.ira-filtre-input[b-30b3ds63c7] {
    flex: 1;
    margin: 0 1rem;
    padding: 0.35rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: #e5e7eb;
    font-size: 0.78rem;
}

    .ira-filtre-input:focus[b-30b3ds63c7] {
        outline: none;
        border-color: var(--cyan);
    }

    .ira-filtre-input[b-30b3ds63c7]::placeholder {
        color: var(--sol-muted, #a7b6ca);
    }

/* ── Liste des campagnes ────────────────────────────────────── */
.ira-campagnes[b-30b3ds63c7] {
    display: flex;
    flex-direction: column;
}

.ira-campagne[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    border-bottom: 1px solid #1a1a1a;
    transition: background 0.15s;
}

    .ira-campagne:last-child[b-30b3ds63c7] {
        border-bottom: none;
    }

    .ira-campagne:hover[b-30b3ds63c7] {
        background: rgba(255,255,255,0.03);
    }

    .ira-campagne input[type="checkbox"][b-30b3ds63c7] {
        width: 13px;
        height: 13px;
        cursor: pointer;
        flex-shrink: 0;
    }

.ira-campagne-state[b-30b3ds63c7] {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    flex-shrink: 0;
    width: 60px;
    text-align: center;
}

.ira-state-enabled .ira-campagne-state[b-30b3ds63c7] {
    background: rgba(76,175,80,0.15);
    color: var(--green);
}

.ira-state-paused .ira-campagne-state[b-30b3ds63c7] {
    background: rgba(255,152,0,0.15);
    color: var(--amber);
}

.ira-state-archived .ira-campagne-state[b-30b3ds63c7] {
    background: rgba(100,100,100,0.15);
    color: var(--sol-muted, #a7b6ca);
}

.ira-state-archived .ira-campagne-nom[b-30b3ds63c7] {
    color: #555;
}

.ira-campagne-nom[b-30b3ds63c7] {
    font-size: 0.78rem;
    color: #ccc;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Boutons d'action ───────────────────────────────────────── */
.ira-actions[b-30b3ds63c7] {
    margin-top: 0.8rem;
    display: flex;
    gap: 0.8rem;
}

.ira-btn-primary[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0,188,212,0.1);
    border: 1px solid var(--cyan);
    color: var(--cyan);
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: bold;
    transition: background 0.2s;
}

    .ira-btn-primary:hover:not(:disabled)[b-30b3ds63c7] {
        background: rgba(0,188,212,0.2);
    }

    .ira-btn-primary:disabled[b-30b3ds63c7] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.ira-btn-integrate[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(76,175,80,0.1);
    border: 1px solid var(--green);
    color: var(--green);
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: bold;
    transition: background 0.2s;
}

    .ira-btn-integrate:hover:not(:disabled)[b-30b3ds63c7] {
        background: rgba(76,175,80,0.2);
    }

    .ira-btn-integrate:disabled[b-30b3ds63c7] {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* ── Spinner ────────────────────────────────────────────────── */
.ira-spinner[b-30b3ds63c7] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: ira-spin-b-30b3ds63c7 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes ira-spin-b-30b3ds63c7 {
    to {
        transform: rotate(360deg);
    }
}

/* ── Lignes de résultat ─────────────────────────────────────── */
.ira-resultat-ligne[b-30b3ds63c7] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0.6rem;
    border-radius: 4px;
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}

.ira-ok[b-30b3ds63c7] {
    background: rgba(76,175,80,0.06);
    border: 1px solid rgba(76,175,80,0.15);
}

.ira-ko[b-30b3ds63c7] {
    background: rgba(244,67,54,0.06);
    border: 1px solid rgba(244,67,54,0.15);
}

.ira-rl-icon[b-30b3ds63c7] {
    font-weight: bold;
}

.ira-ok .ira-rl-icon[b-30b3ds63c7] {
    color: var(--green);
}

.ira-ko .ira-rl-icon[b-30b3ds63c7] {
    color: var(--red);
}

.ira-rl-nom[b-30b3ds63c7] {
    font-weight: bold;
    color: #ccc;
    width: 80px;
}

.ira-rl-code[b-30b3ds63c7] {
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.7rem;
}

.ira-rl-entites[b-30b3ds63c7] {
    color: #aaa;
    font-size: 0.7rem;
}

.ira-rl-pages[b-30b3ds63c7] {
    color: var(--amber);
    font-size: 0.7rem;
}

.ira-rl-duree[b-30b3ds63c7] {
    color: #555;
    font-size: 0.7rem;
}

.ira-rl-fichier[b-30b3ds63c7] {
    color: var(--green);
    font-size: 0.7rem;
}

.ira-rl-erreur[b-30b3ds63c7] {
    color: var(--red);
    font-size: 0.7rem;
}

.ira-rl-ins[b-30b3ds63c7] {
    color: var(--green);
    font-size: 0.7rem;
}

.ira-rl-upd[b-30b3ds63c7] {
    color: var(--amber);
    font-size: 0.7rem;
}

.ira-rl-total[b-30b3ds63c7] {
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.7rem;
}

/* ── Info small ─────────────────────────────────────────────── */
.ira-info-sm[b-30b3ds63c7] {
    color: #555;
    font-size: 0.7rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #1a1a1a;
}
/* /Components/KdpAdsPilotPro/Components/Pages/KdpLogin.razor.rz.scp.css */
.kdp-login-card[b-7ytwn3wzry] {
    width: 100%;
    max-width: 340px;
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-radius: 10px;
    padding: 28px 24px;
}

.kdp-login-title[b-7ytwn3wzry] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #c8d8e8;
    margin: 0 0 2px;
}

.kdp-login-subtitle[b-7ytwn3wzry] {
    font-size: .8rem;
    color: var(--sol-muted, #a7b6ca);
    margin: 0 0 20px;
}

.kdp-login-label[b-7ytwn3wzry] {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sol-muted, #a7b6ca);
    margin-bottom: 4px;
}

.kdp-login-input[b-7ytwn3wzry] {
    width: 100%;
    background: var(--sol-bg, #09121f);
    border: 1px solid #1c2638;
    border-radius: 6px;
    color: #c8d8e8;
    padding: 8px 10px;
    font-size: .9rem;
}

    .kdp-login-input:focus[b-7ytwn3wzry] {
        outline: none;
        border-color: #45C4DC;
    }

.kdp-login-erreur[b-7ytwn3wzry] {
    background: rgba(224, 86, 106, .12);
    border: 1px solid #e0566a;
    border-radius: 6px;
    color: #e0566a;
    font-size: .8rem;
    padding: 8px 10px;
    margin-bottom: 14px;
}

.kdp-login-btn[b-7ytwn3wzry] {
    width: 100%;
    background: #45C4DC;
    border: none;
    border-radius: 6px;
    color: #0c1017;
    font-weight: 700;
    font-size: .9rem;
    padding: 10px;
    cursor: pointer;
}

    .kdp-login-btn:disabled[b-7ytwn3wzry] {
        opacity: .6;
        cursor: default;
    }
/* /Components/KdpAdsPilotPro/Components/Pages/ParametresNocturne.razor.rz.scp.css */
/* ============================================================
   Fichier  : ParametresNocturne.razor.css
   Rôle     : Styles scoped de la page /parametres-nocturne.
              Préfixe : pn-
              Jetons du thème du module (solyvr-theme.css) avec
              repli, comme le reste du module.
   ============================================================ */

.pn-page[b-yvuldkle28] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 6rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    color: var(--sol-text, #e8ecf2);
}

.pn-header[b-yvuldkle28] { border-left: 3px solid var(--sol-accent, #ff9900); padding-left: 1rem; }
.pn-title[b-yvuldkle28] { font-size: 1.5rem; margin: 0 0 .3rem; color: var(--sol-accent, #ff9900); }
.pn-lead[b-yvuldkle28] { margin: 0; color: var(--sol-muted, #a7b6ca); max-width: 70ch; line-height: 1.5; }

/* ── Cartes ── */
.pn-card[b-yvuldkle28] {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid var(--sol-line, #22304a);
    border-radius: 10px;
    padding: 1.1rem 1.25rem 1.25rem;
}
.pn-card-apercu[b-yvuldkle28] { border-color: var(--sol-accent, #ff9900); }
.pn-h2[b-yvuldkle28] {
    font-size: 1rem; font-weight: 700; margin: 0 0 .7rem;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.pn-badge[b-yvuldkle28] {
    font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px;
    background: transparent; color: var(--sol-accent, #ff9900); border: 1px solid var(--sol-accent, #ff9900);
}

/* ── Textes ── */
.pn-aide[b-yvuldkle28] { font-size: .82rem; color: var(--sol-muted, #a7b6ca); line-height: 1.45; margin: 0 0 .7rem; }
.pn-aide a[b-yvuldkle28] { color: var(--sol-accent, #ff9900); }
.pn-info[b-yvuldkle28] { color: var(--sol-muted, #a7b6ca); }
.pn-alerte[b-yvuldkle28] { color: #e0566a; margin: 0 0 .6rem; font-size: .88rem; }
.pn-ok[b-yvuldkle28] { color: #2ec98a; font-size: .88rem; }
.pn-mono[b-yvuldkle28] { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82rem; }
.pn-code[b-yvuldkle28] { font-family: ui-monospace, Consolas, monospace; font-size: .72rem; color: var(--sol-muted, #a7b6ca); }
.pn-c[b-yvuldkle28] { text-align: center; }

/* ── Ligne du service ── */
.pn-ligne[b-yvuldkle28] { display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.pn-ligne .pn-aide[b-yvuldkle28] { margin: 0; }
.pn-grow[b-yvuldkle28] { flex: 1 1 260px; }
.pn-check[b-yvuldkle28] { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; cursor: pointer; }
.pn-check input[b-yvuldkle28], .pn-table input[type="checkbox"][b-yvuldkle28] { width: 20px; height: 20px; accent-color: var(--sol-accent, #ff9900); cursor: pointer; }

/* ── Champs ── */
.pn-grille[b-yvuldkle28] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem 1.5rem; }
.pn-champ[b-yvuldkle28] { display: flex; flex-direction: column; gap: .3rem; }
.pn-champ-court[b-yvuldkle28] { width: 150px; }
.pn-label[b-yvuldkle28] { font-size: .85rem; font-weight: 600; }
.pn-input[b-yvuldkle28] {
    min-height: 44px; padding: .4rem .7rem; border-radius: 8px;
    background: var(--sol-panel-raised, #111c2d); color: var(--sol-text, #e8ecf2);
    border: 1px solid var(--sol-line, #22304a); font: inherit;
}
.pn-input:focus-visible[b-yvuldkle28] { outline: 2px solid var(--sol-accent, #ff9900); outline-offset: 1px; }
.pn-champ .pn-aide[b-yvuldkle28] { margin: 0; }

/* ── Tableaux ── */
.pn-table-wrap[b-yvuldkle28] { overflow-x: auto; }
.pn-table[b-yvuldkle28] { width: 100%; border-collapse: collapse; font-size: .88rem; }
.pn-table th[b-yvuldkle28] {
    text-align: left; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--sol-muted, #a7b6ca); padding: .55rem .7rem; border-bottom: 1px solid var(--sol-line, #22304a);
    white-space: nowrap;
}
.pn-table th.pn-c[b-yvuldkle28] { text-align: center; }
.pn-table td[b-yvuldkle28] { padding: .55rem .7rem; border-bottom: 1px solid var(--sol-line, #22304a); vertical-align: middle; }
.pn-table tbody tr:hover[b-yvuldkle28] { background: var(--sol-panel-raised, #111c2d); }
.pn-table tfoot td[b-yvuldkle28] { border-bottom: none; border-top: 1px solid var(--sol-line, #22304a); color: var(--sol-muted, #a7b6ca); font-size: .82rem; }
.pn-table-programme td[b-yvuldkle28] { white-space: nowrap; }
.pn-table-programme td:nth-child(3)[b-yvuldkle28] { white-space: normal; }

.pn-chip[b-yvuldkle28] {
    display: inline-block; margin: 0 .3rem .2rem 0; padding: .1rem .55rem; border-radius: 99px;
    font-size: .76rem; background: var(--sol-panel-raised, #111c2d); border: 1px solid var(--sol-line, #22304a);
}
.pn-chip-tous[b-yvuldkle28] { border-color: var(--sol-accent, #ff9900); color: var(--sol-accent, #ff9900); }

/* ── Barre d'actions (reste visible en bas) ── */
.pn-actions[b-yvuldkle28] {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: .75rem; justify-content: flex-end;
    padding: .8rem 1rem; border-radius: 10px;
    background: var(--sol-panel, #0e1b2d); border: 1px solid var(--sol-line, #22304a);
}
.pn-actions-msg[b-yvuldkle28] { margin-right: auto; }
.pn-btn[b-yvuldkle28] {
    min-height: 44px; padding: .45rem 1.3rem; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer;
    border: 1px solid var(--sol-line, #22304a);
}
.pn-btn:disabled[b-yvuldkle28] { opacity: .45; cursor: not-allowed; }
.pn-btn-ghost[b-yvuldkle28] { background: transparent; color: var(--sol-text, #e8ecf2); }
.pn-btn-primary[b-yvuldkle28] { background: var(--sol-accent, #ff9900); border-color: var(--sol-accent, #ff9900); color: #1a1000; }

@media (max-width: 640px) {
    .pn-ligne[b-yvuldkle28] { gap: 1rem; }
    .pn-champ-court[b-yvuldkle28] { width: 100%; }
}
.pn-confirm[b-yvuldkle28] { margin: 0; color: var(--sol-text, #e8ecf2); }
/* /Components/KdpAdsPilotPro/Components/Pages/RapportViewer.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   RapportViewer.razor.css
   ════════════════════════════════════════════════════════════════
   Styles isolés (CSS Isolation Blazor) pour la page RapportViewer.
   
   Thème sombre cohérent avec le reste de l'application :
   - Fond : --bg-base (#000000), --bg-card (#080808)
   - Accent : --amazon-orange (#FF9900), --green (#2ec98a)
   - Alerte : --amber (#e0a040), --red (#e0566a)
   - Police : Space Mono (monospace pour les données)
   
   Le tableau de données utilise un fond clair (blanc) pour la lisibilité
   des données numériques denses — convention choisie dans l'ancien code.
   ════════════════════════════════════════════════════════════════ */

/* ── CONTENEUR PRINCIPAL ──────────────────────────────────── */
.rv-page[b-f4el1nj8wz] {
    max-width: 100%;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── EN-TÊTE ──────────────────────────────────────────────── */
/* Bordure orange Amazon à gauche : signature visuelle KDP Ads Pilot Pro */
.rv-header[b-f4el1nj8wz] {
    border-left: 3px solid #FF9900;
    padding-left: 1rem;
}

.rv-title[b-f4el1nj8wz] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 1.4rem;
    color: #FF9900;
    margin: 0 0 .25rem;
}

.rv-subtitle[b-f4el1nj8wz] {
    font-size: .8rem;
    color: var(--sol-muted, #a7b6ca);
    margin: 0;
}

/* ── CARTE DE CONTRÔLES ───────────────────────────────────── */
/* Carte sombre contenant le sélecteur, les dates et la recherche */
.rv-card[b-f4el1nj8wz] {
    background: var(--bg-card);
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.rv-controls[b-f4el1nj8wz] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.rv-control-group[b-f4el1nj8wz] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* La recherche prend l'espace restant sur la ligne */
.rv-recherche-group[b-f4el1nj8wz] {
    margin-left: auto;
}

.rv-label[b-f4el1nj8wz] {
    font-size: .82rem;
    color: var(--sol-muted, #a7b6ca);
    flex-shrink: 0;
}

/* ── INPUTS : SELECT, DATE, TEXTE ─────────────────────────── */
/* Tous les inputs partagent le même style dark theme */
.rv-select[b-f4el1nj8wz],
.rv-input[b-f4el1nj8wz] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .82rem;
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    color: #d1d5db;
    padding: .35rem .7rem;
    border-radius: 4px;
    outline: none;
}

    .rv-select:focus[b-f4el1nj8wz],
    .rv-input:focus[b-f4el1nj8wz] {
        border-color: #FF9900;
    }

.rv-select[b-f4el1nj8wz] {
    max-width: 320px;
}

.rv-input[b-f4el1nj8wz] {
    width: 180px;
}

/* Les inputs date sont plus courts car le format yyyy-MM-dd est fixe */
.rv-input-date[b-f4el1nj8wz] {
    width: 150px;
}

/* ── BOUTON CHARGER ───────────────────────────────────────── */
.rv-btn-charger[b-f4el1nj8wz] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .82rem;
    background: rgba(69, 196, 220, .1);
    border: 1px solid rgba(69, 196, 220, .3);
    color: #FF9900;
    padding: .4rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: background .2s, border-color .2s;
}

    .rv-btn-charger:hover:not(:disabled)[b-f4el1nj8wz] {
        background: rgba(69, 196, 220, .2);
        border-color: #FF9900;
    }

    .rv-btn-charger:disabled[b-f4el1nj8wz] {
        opacity: .5;
        cursor: not-allowed;
    }

/* ── COMPTEURS (lignes / pages) ───────────────────────────── */
.rv-stats[b-f4el1nj8wz] {
    display: flex;
    gap: 1rem;
}

.rv-stat[b-f4el1nj8wz] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    color: var(--sol-muted, #a7b6ca);
}

/* ── DESCRIPTION DU RAPPORT ───────────────────────────────── */
/* Bandeau élégant avec badge DAILY/SUMMARY et texte descriptif */
.rv-description[b-f4el1nj8wz] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    background: rgba(69, 196, 220, .04);
    border: 1px solid rgba(69, 196, 220, .12);
    border-radius: 6px;
    font-size: .8rem;
    color: var(--sol-muted, #a7b6ca);
    line-height: 1.5;
}

/* Badge de granularité : DAILY en vert, SUMMARY en orange Amazon */
.rv-desc-badge[b-f4el1nj8wz] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .2rem .5rem;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: .1rem;
}

.rv-desc-badge-daily[b-f4el1nj8wz] {
    background: rgba(46, 201, 138, .12);
    color: var(--green);
    border: 1px solid rgba(46, 201, 138, .3);
}

.rv-desc-badge-summary[b-f4el1nj8wz] {
    background: rgba(69, 196, 220, .12);
    color: #FF9900;
    border: 1px solid rgba(69, 196, 220, .3);
}

.rv-desc-texte[b-f4el1nj8wz] {
    flex: 1;
}

/* ── MESSAGES D'ÉTAT ──────────────────────────────────────── */
.rv-loading[b-f4el1nj8wz] {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9rem;
    color: var(--sol-muted, #a7b6ca);
    padding: 2rem;
}

.rv-erreur[b-f4el1nj8wz] {
    font-size: .85rem;
    color: var(--red);
    padding: 1rem;
    background: rgba(224, 86, 106, .05);
    border: 1px solid rgba(224, 86, 106, .2);
    border-radius: 6px;
}

.rv-vide[b-f4el1nj8wz] {
    font-size: .9rem;
    color: var(--sol-muted, #a7b6ca);
    padding: 2rem;
    text-align: center;
}

    .rv-vide a[b-f4el1nj8wz] {
        color: #FF9900;
        text-decoration: underline;
    }

/* ══════════════════════════════════════════════════════════
   TABLEAU DE DONNÉES
   ══════════════════════════════════════════════════════════
   Fond blanc pour la lisibilité des données numériques denses.
   Les en-têtes sont sticky pour rester visibles au scroll.
   Les tooltips sont natifs HTML (attribut title sur les <th>).
   ══════════════════════════════════════════════════════════ */

.rv-table-wrap[b-f4el1nj8wz] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.rv-table[b-f4el1nj8wz] {
    width: 100%;
    border-collapse: collapse;
    font-size: .83rem;
    background: #ffffff;
    color: #111827;
}

/* ── En-têtes de colonnes ── */
/* Le cursor:help indique visuellement que le tooltip est disponible */
.rv-th[b-f4el1nj8wz] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .7rem;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .65rem .75rem;
    background: #f3f4f6;
    border-bottom: 2px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: help;
}

    .rv-th:last-child[b-f4el1nj8wz] {
        border-right: none;
    }

/* ── Lignes de données ── */
.rv-tr[b-f4el1nj8wz] {
    border-bottom: 1px solid #f0f0f0;
}

    .rv-tr:last-child[b-f4el1nj8wz] {
        border-bottom: none;
    }

    /* Alternance de couleur pour faciliter la lecture horizontale */
    .rv-tr:nth-child(even)[b-f4el1nj8wz] {
        background: #f9fafb;
    }

    /* Surbrillance au survol pour suivre la ligne */
    .rv-tr:hover[b-f4el1nj8wz] {
        background: #eff6ff;
    }

/* ── Cellules ── */
.rv-td[b-f4el1nj8wz] {
    padding: .45rem .75rem;
    white-space: nowrap;
    color: #1f2937;
    border-right: 1px solid #f0f0f0;
    font-size: .8rem;
}

    .rv-td:last-child[b-f4el1nj8wz] {
        border-right: none;
    }

/* ── Ligne de totaux ── */
/* Fond gris foncé pour se distinguer clairement des données */
.rv-tr-total[b-f4el1nj8wz] {
    background: #1f2937 !important;
    border-top: 2px solid #374151;
}

    .rv-tr-total:hover[b-f4el1nj8wz] {
        background: #1f2937 !important;
    }

.rv-td-total[b-f4el1nj8wz] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-weight: 700;
    color: #f9fafb !important;
    font-size: .8rem;
    padding: .55rem .75rem;
}

/* ── Classes par type de colonne ── */

/* Texte : aligné à gauche, tronqué si trop long */
.rv-col-text[b-f4el1nj8wz] {
    text-align: left;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #111827;
    font-weight: 500;
}

/* Nombres (impressions, clics, unités) : aligné à droite, monospace */
.rv-col-number[b-f4el1nj8wz] {
    text-align: right;
    color: #4b5563;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
}

/* Montants financiers : vert foncé, gras */
.rv-col-money[b-f4el1nj8wz] {
    text-align: right;
    color: #065f46;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    font-weight: 600;
}

/* Taux et ratios : bleu */
.rv-col-pct[b-f4el1nj8wz] {
    text-align: right;
    color: #1d4ed8;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
}

/* ── PAGINATION ───────────────────────────────────────────── */
.rv-pagination[b-f4el1nj8wz] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .5rem;
}

.rv-page-btn[b-f4el1nj8wz] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #d1d5db;
    padding: .3rem .75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s;
}

    .rv-page-btn:hover:not(:disabled)[b-f4el1nj8wz] {
        border-color: #FF9900;
        color: #FF9900;
    }

    .rv-page-btn:disabled[b-f4el1nj8wz] {
        opacity: .3;
        cursor: not-allowed;
    }

.rv-page-info[b-f4el1nj8wz] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .78rem;
    color: var(--sol-muted, #a7b6ca);
}

.rv-page-range[b-f4el1nj8wz] {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .75rem;
    color: #4b5563;
    margin-left: auto;
}

/* ── SPINNER ──────────────────────────────────────────────── */
.rv-spinner[b-f4el1nj8wz] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(69, 196, 220, .3);
    border-top-color: #FF9900;
    border-radius: 50%;
    animation: rv-spin .6s linear infinite;
}

/* @@keyframes nécessaire dans Blazor CSS Isolation 
   (le double @ empêche l'interprétation comme directive Razor) */
@@keyframes rv-spin {
    to[b-f4el1nj8wz] {
        transform: rotate(360deg);
    }
}
/* /Components/KdpAdsPilotPro/Components/Pages/RecupProfils.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   RecupProfils.razor.css
   Préfixe : rp-
   Styles scoped à la page RecupProfils uniquement.
   ════════════════════════════════════════════════════════════════ */

/* ── Page ───────────────────────────────────────────────────── */
.rp-page[b-px3aldnv3o] {
    padding: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── En-tête ────────────────────────────────────────────────── */
.rp-header[b-px3aldnv3o] {
    border-left: 3px solid var(--cyan);
    padding-left: 1rem;
}

.rp-title[b-px3aldnv3o] {
    color: var(--cyan);
    font-size: 1.4rem;
    margin: 0 0 0.3rem 0;
}

.rp-subtitle[b-px3aldnv3o] {
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.8rem;
    margin: 0;
}

/* ── Bandeau info ───────────────────────────────────────────── */
.rp-info[b-px3aldnv3o] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(0,188,212,0.06);
    border: 1px solid rgba(0,188,212,0.2);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    font-size: 0.8rem;
    color: #bbb;
    line-height: 1.6;
}

.rp-info-icon[b-px3aldnv3o] {
    color: var(--cyan);
    flex-shrink: 0;
}

.rp-info strong[b-px3aldnv3o] {
    color: #eee;
}

.rp-info code[b-px3aldnv3o] {
    color: var(--amber);
    background: rgba(255,255,255,0.05);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.75rem;
}

/* ── Profil actif ───────────────────────────────────────────── */
.rp-profil-actif-wrap[b-px3aldnv3o] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.8rem;
}

.rp-profil-actif-label[b-px3aldnv3o] {
    color: var(--sol-muted, #a7b6ca);
}

.rp-profil-actif-id[b-px3aldnv3o] {
    color: var(--cyan);
    background: rgba(0,188,212,0.08);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(0,188,212,0.2);
}

/* ── Bouton récupérer ───────────────────────────────────────── */
.rp-btn[b-px3aldnv3o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0,188,212,0.1);
    border: 1px solid var(--cyan);
    color: var(--cyan);
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: bold;
    width: fit-content;
    transition: background 0.2s;
}

    .rp-btn:hover:not(:disabled)[b-px3aldnv3o] {
        background: rgba(0,188,212,0.2);
    }

    .rp-btn:disabled[b-px3aldnv3o] {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* ── Spinner ────────────────────────────────────────────────── */
.rp-spinner[b-px3aldnv3o] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: rp-spin-b-px3aldnv3o 0.7s linear infinite;
}

@keyframes rp-spin-b-px3aldnv3o {
    to {
        transform: rotate(360deg);
    }
}

/* ── Erreur ─────────────────────────────────────────────────── */
.rp-error[b-px3aldnv3o] {
    padding: 0.7rem 1rem;
    color: var(--red);
    background: rgba(244,67,54,0.07);
    border: 1px solid rgba(244,67,54,0.2);
    border-radius: 6px;
    font-size: 0.8rem;
}

/* ── Section résultats ──────────────────────────────────────── */
.rp-section[b-px3aldnv3o] {
    background: var(--bg-card);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}

.rp-section-header[b-px3aldnv3o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #222;
    background: rgba(0,0,0,0.15);
}

.rp-section-title[b-px3aldnv3o] {
    color: var(--cyan);
    font-size: 0.8rem;
    font-weight: bold;
}

/* ── Tableau des profils ────────────────────────────────────── */
.rp-table[b-px3aldnv3o] {
    display: flex;
    flex-direction: column;
}

.rp-table-header[b-px3aldnv3o] {
    display: grid;
    grid-template-columns: 50px 55px 1fr 2fr 100px 100px;
    gap: 0.8rem;
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #1a1a1a;
}

.rp-table-row[b-px3aldnv3o] {
    display: grid;
    grid-template-columns: 50px 55px 1fr 2fr 100px 100px;
    gap: 0.8rem;
    padding: 0.6rem 1rem;
    font-size: 0.78rem;
    border-bottom: 1px solid #1a1a1a;
    align-items: center;
    transition: background 0.15s;
}

    .rp-table-row:last-child[b-px3aldnv3o] {
        border-bottom: none;
    }

    .rp-table-row:hover[b-px3aldnv3o] {
        background: rgba(255,255,255,0.02);
    }

.rp-row--actif[b-px3aldnv3o] {
    background: rgba(0,188,212,0.04);
    border-left: 2px solid var(--cyan);
}

.rp-pays[b-px3aldnv3o] {
    font-weight: bold;
    color: var(--amber);
}

.rp-devise[b-px3aldnv3o] {
    color: var(--sol-muted, #a7b6ca);
}

.rp-id[b-px3aldnv3o] {
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.72rem;
}

.rp-nom[b-px3aldnv3o] {
    color: #ccc;
}

.rp-type[b-px3aldnv3o] {
    color: var(--sol-muted, #a7b6ca);
    font-size: 0.72rem;
}

.rp-badge-actif[b-px3aldnv3o] {
    color: var(--cyan);
    font-size: 0.7rem;
    font-weight: bold;
}

.rp-badge-autre[b-px3aldnv3o] {
    color: #444;
    font-size: 0.7rem;
}

/* ── Conseil ────────────────────────────────────────────────── */
.rp-conseil[b-px3aldnv3o] {
    margin: 0.8rem 1rem;
    padding: 0.8rem 1rem;
    background: rgba(255,152,0,0.05);
    border: 1px solid rgba(255,152,0,0.15);
    border-radius: 6px;
    font-size: 0.78rem;
}

.rp-conseil-titre[b-px3aldnv3o] {
    color: var(--amber);
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
}

.rp-conseil-steps[b-px3aldnv3o] {
    margin: 0;
    padding-left: 1.2rem;
    color: #aaa;
    line-height: 2;
}

    .rp-conseil-steps code[b-px3aldnv3o] {
        color: var(--amber);
        background: rgba(255,255,255,0.05);
        padding: 0.1rem 0.3rem;
        border-radius: 3px;
        font-size: 0.72rem;
    }

    .rp-conseil-steps strong[b-px3aldnv3o] {
        color: #eee;
    }

/* ── JSON brut ──────────────────────────────────────────────── */
.rp-btn-toggle[b-px3aldnv3o] {
    background: none;
    border: 1px solid #333;
    color: var(--sol-muted, #a7b6ca);
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: 0.7rem;
    transition: color 0.2s, border-color 0.2s;
}

    .rp-btn-toggle:hover[b-px3aldnv3o] {
        color: #ccc;
        border-color: #555;
    }

.rp-json[b-px3aldnv3o] {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
    background: #0d0d0d;
}

    .rp-json code[b-px3aldnv3o] {
        font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
        font-size: 0.72rem;
        color: #c8e6c9;
        white-space: pre;
        line-height: 1.5;
    }
/* /Components/KdpAdsPilotPro/Components/Shared/SurveillanceDepensesVue.razor.rz.scp.css */
.surveillance[b-f246fvbly4]{background:#131416;color:#e4e6eb;padding:18px;border:1px solid #30343c;border-radius:10px;font-size:.85rem}
.surveillance h3[b-f246fvbly4]{font-size:1.2rem;margin:0 0 6px;font-weight:600}
.surveillance h4[b-f246fvbly4]{font-size:1rem;margin:20px 0 12px;font-weight:600}
.surveillance p[b-f246fvbly4]{margin:4px 0 12px;color:#aeb5c2}
.surveillance small[b-f246fvbly4]{display:block;color:#aeb5c2;font-size:.75rem;line-height:1.5}
.surveillance-fenetre[b-f246fvbly4]{display:grid;grid-template-columns:minmax(180px,1.1fr) minmax(0,2.2fr) minmax(160px,.9fr);align-items:center;gap:18px;padding:13px 14px;margin:8px 0;background:#1a1c20;border:1px solid #30343c;border-radius:7px}
.surveillance-fenetre b[b-f246fvbly4]{font-weight:600;color:#ffd08a}
.surveillance-fenetre small[b-f246fvbly4]{margin-top:3px}
.surveillance-metriques[b-f246fvbly4]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.surveillance-metriques strong[b-f246fvbly4]{display:block;font-size:1.18rem;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums;color:#f0f1f3}
.surveillance-collecte[b-f246fvbly4]{border-left:1px solid #343941;padding-left:14px}
.surveillance-collecte small:first-child[b-f246fvbly4]{color:#e4e6eb;font-weight:600;margin-bottom:2px}
.surveillance button[b-f246fvbly4]{background:#202b3c;color:#bcd6ff;border:1px solid #354966;border-radius:5px;padding:7px 10px;font-size:.75rem;cursor:pointer}
.surveillance button:focus-visible[b-f246fvbly4]{outline:2px solid #ffbf56;outline-offset:3px}
@media(max-width:1100px){.surveillance-fenetre[b-f246fvbly4]{grid-template-columns:1fr 2fr}.surveillance-collecte[b-f246fvbly4]{grid-column:1/-1;border-left:0;padding-left:0}}
@media(max-width:600px){.surveillance-fenetre[b-f246fvbly4]{grid-template-columns:1fr}.surveillance-metriques[b-f246fvbly4]{grid-template-columns:repeat(2,1fr)}}
.surveillance-camp-entete[b-f246fvbly4]{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:20px 0 10px}
.surveillance-camp-entete h4[b-f246fvbly4]{margin:0}
.surveillance-bascule[b-f246fvbly4]{display:inline-flex;border:1px solid #354966;border-radius:6px;overflow:hidden}
.surveillance-bascule button[b-f246fvbly4]{border:0;border-radius:0;background:transparent;padding:6px 12px}
.surveillance-bascule button.actif[b-f246fvbly4]{background:#2a3b57;color:#fff}
.surveillance-grille-wrap[b-f246fvbly4]{overflow-x:auto;border:1px solid #30343c;border-radius:7px;background:#1a1c20}
.surveillance-grille[b-f246fvbly4]{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.82rem}
.surveillance-grille th[b-f246fvbly4],.surveillance-grille td[b-f246fvbly4]{padding:7px 8px;text-align:right;white-space:nowrap}
.surveillance-grille thead th[b-f246fvbly4]{color:#aeb5c2;font-weight:600;font-size:.72rem;border-bottom:1px solid #30343c}
.surveillance-grille .sg-groupe[b-f246fvbly4]{text-align:center;color:#ffd08a;border-left:1px solid #30343c;font-size:.78rem}
.surveillance-grille .sg-fen[b-f246fvbly4]{font-weight:500}
.surveillance-grille .sg-debut[b-f246fvbly4]{border-left:1px solid #30343c}
.surveillance-grille tbody td[b-f246fvbly4]{border-bottom:1px solid #262a31;color:#e4e6eb}
.surveillance-grille tbody tr:hover td[b-f246fvbly4]{background:#20232a}
.surveillance-grille .sg-nom[b-f246fvbly4]{text-align:left;position:sticky;left:0;background:#1a1c20;z-index:1;font-weight:600;color:#f0f1f3;min-width:110px}
.surveillance-grille tbody tr:hover .sg-nom[b-f246fvbly4]{background:#20232a}
.surveillance-grille tfoot td[b-f246fvbly4]{border-top:1px solid #4a505b;color:#f0f1f3;font-weight:600;background:#1e2127}
.surveillance-grille tfoot .sg-nom[b-f246fvbly4]{background:#1e2127}
.surveillance-grille .sg-act[b-f246fvbly4]{text-align:center;width:44px}
.surveillance-grille .sg-act button[b-f246fvbly4]{padding:4px 9px;font-size:.85rem}
@media(max-width:600px){.surveillance-grille[b-f246fvbly4]{font-size:.76rem}}
.surveillance-explorer[b-f246fvbly4]{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;color:#aeb5c2;font-size:.78rem}
.sg2[b-f246fvbly4]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sg2-carte[b-f246fvbly4]{background:#1a1c20;border:1px solid #30343c;border-radius:7px;padding:10px 12px 6px;min-width:0}
.sg2-carte h5[b-f246fvbly4]{margin:0 0 6px;font-size:.9rem;font-weight:600;color:#ffd08a}
.sg2-wrap[b-f246fvbly4]{overflow-x:auto}
.sg2-table[b-f246fvbly4]{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.82rem}
.sg2-table th[b-f246fvbly4],.sg2-table td[b-f246fvbly4]{padding:6px 8px;text-align:right;white-space:nowrap}
.sg2-table thead th[b-f246fvbly4]{color:#aeb5c2;font-weight:600;font-size:.72rem;border-bottom:1px solid #30343c}
.sg2-table th:first-child[b-f246fvbly4],.sg2-table td:first-child[b-f246fvbly4]{text-align:left}
.sg2-table tbody td[b-f246fvbly4]{border-bottom:1px solid #262a31;color:#e4e6eb}
.sg2-table tbody tr:last-child td[b-f246fvbly4]{border-bottom:0}
.sg2-periode[b-f246fvbly4]{color:#aeb5c2!important}
.sg2-total[b-f246fvbly4]{border-left:1px solid #3a4150;font-weight:600;color:#f0f1f3!important;background:#1e2127}
@media(max-width:1100px){.sg2[b-f246fvbly4]{grid-template-columns:1fr}}
.sg-legende[b-f246fvbly4]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.sg-legende-carte[b-f246fvbly4]{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#1a1c20;border:1px solid #30343c;border-radius:8px}
.sg-legende-carte b[b-f246fvbly4]{display:block;font-weight:600;color:#f0f1f3}
.sg-legende-carte small[b-f246fvbly4]{margin-top:2px}
.sg-legende-jours[b-f246fvbly4]{margin-left:auto;color:#aeb5c2;font-size:.75rem;white-space:nowrap}
.sg-badge[b-f246fvbly4]{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;padding:0 8px;border-radius:7px;background:#2a3446;color:#e4e6eb;font-weight:700;font-size:.8rem}
@media(max-width:1100px){.sg-legende[b-f246fvbly4]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sg-legende[b-f246fvbly4]{grid-template-columns:1fr}}
/* /Components/Layout/HeaderNav.razor.rz.scp.css */
/* ============================================
   Variables
   ============================================ */

:root[b-hoiowo60n7] {
    --navbar-bg: #ffffff;
    --navbar-border: #e5e7eb;
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --hover-bg: #f3f4f6;
    --active-bg: #eef2ff;
}

/* ============================================
   Layout
   ============================================ */

.app-wrapper[b-hoiowo60n7] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f9fafb;
}

/* ============================================
   NavBar
   ============================================ */

.navbar[b-hoiowo60n7] {
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.navbar-container[b-hoiowo60n7] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* ============================================
   Logo
   ============================================ */

.logo[b-hoiowo60n7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: opacity 0.2s;
}

    .logo:hover[b-hoiowo60n7] {
        opacity: 0.8;
    }

.logo-icon[b-hoiowo60n7] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
}

.logo-text[b-hoiowo60n7] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* ============================================
   Navigation Menu
   ============================================ */

.nav-menu[b-hoiowo60n7] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link[b-hoiowo60n7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s;
}

    .nav-link i[b-hoiowo60n7] {
        font-size: 1.125rem;
    }

    .nav-link:hover[b-hoiowo60n7] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }

    .nav-link.active[b-hoiowo60n7] {
        background: var(--active-bg);
        color: var(--primary);
    }

/* ============================================
   Actions
   ============================================ */

.nav-actions[b-hoiowo60n7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

/* Search Box */
.search-box[b-hoiowo60n7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--hover-bg);
    border-radius: 8px;
    min-width: 240px;
    transition: all 0.2s;
}

    .search-box:focus-within[b-hoiowo60n7] {
        background: white;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .search-box i[b-hoiowo60n7] {
        color: var(--text-secondary);
        font-size: 1rem;
    }

    .search-box input[b-hoiowo60n7] {
        flex: 1;
        border: none;
        background: transparent;
        outline: none;
        font-size: 0.875rem;
        color: var(--text-primary);
    }

        .search-box input[b-hoiowo60n7]::placeholder {
            color: var(--text-secondary);
        }

/* User Button */
.user-btn[b-hoiowo60n7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
    background: white;
    border: 1px solid var(--navbar-border);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
}

    .user-btn:hover[b-hoiowo60n7] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.05);
    }

.user-avatar[b-hoiowo60n7] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.user-name[b-hoiowo60n7] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Dropdown Menu */
.dropdown-menu[b-hoiowo60n7] {
    border: 1px solid var(--navbar-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    min-width: 200px;
    margin-top: 0.5rem;
}

.dropdown-header[b-hoiowo60n7] {
    padding: 0.75rem;
    border-bottom: 1px solid var(--navbar-border);
    margin-bottom: 0.5rem;
}

.dropdown-item[b-hoiowo60n7] {
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: background 0.2s;
}

    .dropdown-item:hover[b-hoiowo60n7] {
        background: var(--hover-bg);
    }

.dropdown-divider[b-hoiowo60n7] {
    margin: 0.5rem 0;
    border-color: var(--navbar-border);
}

/* ============================================
   Main Content
   ============================================ */

.main-content[b-hoiowo60n7] {
    flex: 1;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .navbar-container[b-hoiowo60n7] {
        gap: 1rem;
        padding: 0 1rem;
    }

    .logo-text[b-hoiowo60n7] {
        font-size: 1rem;
    }

    .nav-menu[b-hoiowo60n7] {
        gap: 0;
    }

    .nav-link span[b-hoiowo60n7] {
        display: none;
    }

    .nav-link[b-hoiowo60n7] {
        padding: 0.5rem;
    }

    .search-box[b-hoiowo60n7] {
        display: none;
    }

    .user-name[b-hoiowo60n7] {
        display: none;
    }

    .user-btn[b-hoiowo60n7] {
        padding: 0.375rem;
    }
}

@media (max-width: 480px) {
    .navbar-container[b-hoiowo60n7] {
        height: 56px;
    }

    .logo-icon[b-hoiowo60n7] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .nav-menu[b-hoiowo60n7] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--navbar-border);
        padding: 0.5rem;
        gap: 0;
        justify-content: space-around;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    }

    .nav-link[b-hoiowo60n7] {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem 1rem;
    }

        .nav-link span[b-hoiowo60n7] {
            display: block;
            font-size: 0.75rem;
        }

        .nav-link i[b-hoiowo60n7] {
            font-size: 1.25rem;
        }

    .main-content[b-hoiowo60n7] {
        padding-bottom: 70px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-d87qhiy0gq] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-d87qhiy0gq] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-e6uvtgs4bd],
.components-reconnect-repeated-attempt-visible[b-e6uvtgs4bd],
.components-reconnect-failed-visible[b-e6uvtgs4bd],
.components-pause-visible[b-e6uvtgs4bd],
.components-resume-failed-visible[b-e6uvtgs4bd],
.components-rejoining-animation[b-e6uvtgs4bd] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-e6uvtgs4bd],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-e6uvtgs4bd],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-e6uvtgs4bd],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-e6uvtgs4bd],
#components-reconnect-modal.components-reconnect-retrying[b-e6uvtgs4bd],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-e6uvtgs4bd],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-e6uvtgs4bd],
#components-reconnect-modal.components-reconnect-failed[b-e6uvtgs4bd],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-e6uvtgs4bd] {
    display: block;
}


#components-reconnect-modal[b-e6uvtgs4bd] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-e6uvtgs4bd 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-e6uvtgs4bd 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-e6uvtgs4bd 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-e6uvtgs4bd]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-e6uvtgs4bd 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-e6uvtgs4bd {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-e6uvtgs4bd {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-e6uvtgs4bd {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-e6uvtgs4bd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-e6uvtgs4bd] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-e6uvtgs4bd] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-e6uvtgs4bd] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-e6uvtgs4bd] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-e6uvtgs4bd] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-e6uvtgs4bd] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-e6uvtgs4bd 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-e6uvtgs4bd] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-e6uvtgs4bd {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Meteo/Components/Layout/MeteoLayout.razor.rz.scp.css */
.meteo-shell[b-aj62ucx1zz] {
    --m-bg: #000000;
    --m-card: #1c1c1e;
    --m-card2: #2c2c2e;
    --m-sep: rgba(255, 255, 255, 0.12);
    --m-t1: #ffffff;
    --m-t2: rgba(255, 255, 255, 0.6);
    --m-t3: rgba(255, 255, 255, 0.35);
    --m-blue: #4fc3f7;
    --m-blue2: #007aff;
    --m-red: #ff6b6b;
    --m-orange: #ff9f0a;
    --m-st: env(safe-area-inset-top, 0px);
    --m-sb: env(safe-area-inset-bottom, 0px);

    min-height: 100vh;
    background: var(--m-bg);
    color: var(--m-t1);
    font-family: 'Inter', -apple-system, sans-serif;
    overflow-x: hidden;
    padding-top: var(--m-st);
    padding-bottom: var(--m-sb);
    display: flex;
    flex-direction: column;
}
/* /Components/Meteo/Components/Pages/Meteo.razor.rz.scp.css */
/* Portage du <style> de wwwroot/meteo.html — variables --m-* définies sur
   .meteo-shell (Components/Meteo/Components/Layout/MeteoLayout.razor.css),
   héritées ici par simple cascade CSS (indépendante de l'isolation Blazor). */

*[b-5tk8dry7ij] {
    box-sizing: border-box;
}

/* ── SPLASH / ERREUR ─────────────────────────────────────────── */
.meteo-splash[b-5tk8dry7ij] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 16px;
}

.meteo-sp-ico[b-5tk8dry7ij] {
    font-size: 64px;
}

.meteo-sp-ttl[b-5tk8dry7ij] {
    font-size: 30px;
    font-weight: 700;
}

.meteo-sp-sub[b-5tk8dry7ij] {
    font-size: 13px;
    color: var(--m-t3, rgba(255, 255, 255, .35));
}

/* ── TOP NAV ──────────────────────────────────────────────────── */
.meteo-topnav[b-5tk8dry7ij] {
    display: flex;
    align-items: center;
    padding: 10px 16px 8px;
    gap: 10px;
    background: var(--m-bg, #000);
    border-bottom: 1px solid var(--m-sep, rgba(255, 255, 255, .12));
    position: sticky;
    top: 0;
    z-index: 100;
}

.meteo-loc-btn[b-5tk8dry7ij] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--m-card, #1c1c1e);
    color: var(--m-t1, #fff);
    border: none;
    border-radius: 10px;
    padding: 7px 11px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
}

.meteo-loc-btn span[b-5tk8dry7ij] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.meteo-refresh-btn[b-5tk8dry7ij] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--m-t1, #fff);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    min-width: 44px;
    min-height: 44px;
}

/* ── MAIN / SECTIONS ──────────────────────────────────────────── */
.meteo-main[b-5tk8dry7ij] {
    flex: 1;
    padding: 12px;
    padding-bottom: calc(var(--m-sb, 0px) + 70px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meteo-section[b-5tk8dry7ij] {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.meteo-section.active[b-5tk8dry7ij] {
    display: flex;
}

.meteo-card[b-5tk8dry7ij] {
    background: var(--m-card, #1c1c1e);
    border-radius: 14px;
    overflow: hidden;
    padding-bottom: 4px;
}

.meteo-card-title[b-5tk8dry7ij] {
    font-size: 12px;
    font-weight: 600;
    color: var(--m-t3, rgba(255, 255, 255, .35));
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 14px 16px 8px;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.meteo-hero-card[b-5tk8dry7ij] {
    background: #1c3a5e;
    border-radius: 14px;
    padding: 16px;
}

.meteo-hero-time[b-5tk8dry7ij] {
    font-size: 22px;
    font-weight: 700;
}

.meteo-hero-day[b-5tk8dry7ij] {
    font-size: 16px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
    margin-bottom: 12px;
}

.meteo-hero-main[b-5tk8dry7ij] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.meteo-hero-ico[b-5tk8dry7ij] {
    font-size: 64px;
    line-height: 1;
}

.meteo-hero-temp[b-5tk8dry7ij] {
    font-size: 64px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -2px;
}

.meteo-hero-desc[b-5tk8dry7ij] {
    font-size: 16px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
    margin-top: 2px;
}

.meteo-hero-feels[b-5tk8dry7ij] {
    font-size: 14px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
}

.meteo-hero-moon[b-5tk8dry7ij] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
    margin-top: 4px;
}

/* ── FLASH INFO ───────────────────────────────────────────────── */
.meteo-flash-card[b-5tk8dry7ij] {
    background: var(--m-card, #1c1c1e);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.meteo-flash-thumb[b-5tk8dry7ij] {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--m-card2, #2c2c2e);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.meteo-flash-label[b-5tk8dry7ij] {
    font-size: 11px;
    font-weight: 700;
    color: #ff3b30;
    margin-bottom: 2px;
}

.meteo-flash-title[b-5tk8dry7ij] {
    font-size: 14px;
    font-weight: 600;
}

.meteo-flash-arr[b-5tk8dry7ij] {
    margin-left: auto;
    color: var(--m-t3, rgba(255, 255, 255, .35));
    font-size: 18px;
}

/* ── HOURLY ───────────────────────────────────────────────────── */
.meteo-hourly-card[b-5tk8dry7ij] {
    background: var(--m-card, #1c1c1e);
    border-radius: 14px;
}

.meteo-hourly-head[b-5tk8dry7ij] {
    padding: 12px 16px 4px;
}

.meteo-title[b-5tk8dry7ij] {
    font-size: 12px;
    font-weight: 600;
    color: var(--m-t3, rgba(255, 255, 255, .35));
    text-transform: uppercase;
    letter-spacing: .5px;
}

.meteo-hourly-desc[b-5tk8dry7ij] {
    font-size: 14px;
    padding: 0 16px 10px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
}

.meteo-hourly-scroll[b-5tk8dry7ij] {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 8px 12px;
}

.meteo-hourly-scroll[b-5tk8dry7ij]::-webkit-scrollbar {
    display: none;
}

.meteo-h-item[b-5tk8dry7ij] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 56px;
    padding: 8px 4px;
    border-radius: 12px;
}

.meteo-h-item.cur[b-5tk8dry7ij] {
    background: var(--m-card2, #3a3a3c);
}

.meteo-h-time[b-5tk8dry7ij] {
    font-size: 13px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
    font-weight: 500;
}

.meteo-h-ico[b-5tk8dry7ij] {
    font-size: 24px;
}

.meteo-h-temp[b-5tk8dry7ij] {
    font-size: 15px;
    font-weight: 600;
}

/* ── DAILY ────────────────────────────────────────────────────── */
.meteo-daily-row[b-5tk8dry7ij] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--m-sep, rgba(255, 255, 255, .12));
    gap: 10px;
}

.meteo-daily-row:last-child[b-5tk8dry7ij] {
    border-bottom: none;
}

.meteo-daily-date[b-5tk8dry7ij] {
    width: 90px;
    flex-shrink: 0;
}

.meteo-daily-dow[b-5tk8dry7ij] {
    font-size: 15px;
    font-weight: 600;
}

.meteo-daily-d[b-5tk8dry7ij] {
    font-size: 12px;
    color: var(--m-t3, rgba(255, 255, 255, .35));
    margin-top: 1px;
}

.meteo-daily-ico[b-5tk8dry7ij] {
    font-size: 26px;
    flex-shrink: 0;
}

.meteo-daily-range[b-5tk8dry7ij] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: flex-end;
}

.meteo-daily-hi[b-5tk8dry7ij] {
    font-size: 16px;
    font-weight: 700;
    color: var(--m-red, #ff6b6b);
    min-width: 70px;
    text-align: right;
}

.meteo-daily-wind[b-5tk8dry7ij] {
    font-size: 12px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
    text-align: right;
    min-width: 70px;
}

/* ── CHART TEMPÉRATURES ───────────────────────────────────────── */
.meteo-chart-card[b-5tk8dry7ij] {
    background: var(--m-card, #1c1c1e);
    border-radius: 14px;
    padding: 14px 16px;
}

.meteo-chart-head[b-5tk8dry7ij] {
    margin-bottom: 12px;
}

.meteo-chart-title[b-5tk8dry7ij] {
    font-size: 15px;
    font-weight: 700;
}

.meteo-chart-wrap[b-5tk8dry7ij] {
    position: relative;
}

.meteo-chart-wrap canvas[b-5tk8dry7ij] {
    width: 100% !important;
    height: 160px !important;
}

.meteo-chart-legend[b-5tk8dry7ij] {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.meteo-chart-leg-item[b-5tk8dry7ij] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
}

.meteo-chart-leg-dot[b-5tk8dry7ij] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ── AQI / POLLEN ─────────────────────────────────────────────── */
.meteo-aqi-card[b-5tk8dry7ij],
.meteo-pollen-card[b-5tk8dry7ij] {
    background: var(--m-card, #1c1c1e);
    border-radius: 14px;
    padding: 14px 16px;
}

.meteo-aqi-head[b-5tk8dry7ij],
.meteo-pollen-head[b-5tk8dry7ij] {
    margin-bottom: 10px;
}

.meteo-aqi-title[b-5tk8dry7ij],
.meteo-pollen-title[b-5tk8dry7ij] {
    font-size: 15px;
    font-weight: 700;
}

.meteo-aqi-row[b-5tk8dry7ij],
.meteo-pollen-row[b-5tk8dry7ij] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.meteo-aqi-badge[b-5tk8dry7ij] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
}

.meteo-pollen-badge[b-5tk8dry7ij] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--m-card2, #3a3a3c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.meteo-aqi-lvl[b-5tk8dry7ij],
.meteo-pollen-lvl[b-5tk8dry7ij] {
    font-size: 17px;
    font-weight: 700;
}

.meteo-aqi-sub[b-5tk8dry7ij],
.meteo-pollen-sub[b-5tk8dry7ij] {
    font-size: 13px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
    margin-top: 2px;
}

.meteo-aqi-bar-wrap[b-5tk8dry7ij] {
    margin-top: 10px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #30d158, #ffd60a, #ff9f0a, #ff3b30, #bf5af2);
    position: relative;
}

.meteo-pollen-bar-wrap[b-5tk8dry7ij] {
    margin-top: 10px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #30d158, #ffd60a, #ff9f0a, #ff3b30);
    position: relative;
}

.meteo-aqi-cursor[b-5tk8dry7ij],
.meteo-pollen-cursor[b-5tk8dry7ij] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #000;
    position: absolute;
    top: -2px;
    transform: translateX(-50%);
    transition: left 1s;
}

/* ── SUN ARC ──────────────────────────────────────────────────── */
.meteo-sun-card[b-5tk8dry7ij] {
    background: var(--m-card, #1c1c1e);
    border-radius: 14px;
    padding: 14px 16px 10px;
}

.meteo-sun-title[b-5tk8dry7ij] {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}

.meteo-sun-times[b-5tk8dry7ij] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.meteo-sun-lbl[b-5tk8dry7ij] {
    font-size: 13px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
}

.meteo-sun-val[b-5tk8dry7ij] {
    font-size: 20px;
    font-weight: 700;
    margin-top: 2px;
}

.meteo-sun-arc-wrap[b-5tk8dry7ij] {
    position: relative;
    height: 90px;
    margin: 0 -4px;
}

.meteo-sun-arc-wrap canvas[b-5tk8dry7ij] {
    width: 100% !important;
    height: 90px !important;
}

.meteo-sun-extra[b-5tk8dry7ij] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
}

.meteo-sun-extra-item[b-5tk8dry7ij] {
    text-align: center;
}

.meteo-sel[b-5tk8dry7ij] {
    font-size: 14px;
    font-weight: 600;
    color: var(--m-t1, #fff);
    margin-top: 2px;
}

.meteo-sun-duration[b-5tk8dry7ij] {
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
}

.meteo-sun-duration span[b-5tk8dry7ij] {
    color: var(--m-t2, rgba(255, 255, 255, .6));
    font-size: 13px;
    font-weight: 400;
}

/* ── MOON CALENDAR ────────────────────────────────────────────── */
.meteo-moon-card[b-5tk8dry7ij] {
    background: var(--m-card, #1c1c1e);
    border-radius: 14px;
    padding: 14px 16px;
}

.meteo-moon-title[b-5tk8dry7ij] {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}

.meteo-moon-grid[b-5tk8dry7ij] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.meteo-moon-dow[b-5tk8dry7ij] {
    font-size: 11px;
    font-weight: 600;
    color: var(--m-t3, rgba(255, 255, 255, .35));
    text-align: center;
    padding: 2px 0;
}

.meteo-moon-cell[b-5tk8dry7ij] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
}

.meteo-moon-num[b-5tk8dry7ij] {
    font-size: 12px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
}

.meteo-moon-ico[b-5tk8dry7ij] {
    font-size: 18px;
}

.meteo-moon-cell.today .meteo-moon-num[b-5tk8dry7ij] {
    color: var(--m-blue2, #007aff);
    font-weight: 700;
}

/* ── RADAR MAP ────────────────────────────────────────────────── */
.meteo-radar-card[b-5tk8dry7ij] {
    background: var(--m-card, #1c1c1e);
    border-radius: 14px;
    overflow: hidden;
}

.meteo-radar-head[b-5tk8dry7ij] {
    padding: 12px 16px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.meteo-radar-label[b-5tk8dry7ij] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.meteo-radar-ir[b-5tk8dry7ij] {
    background: var(--m-card2, #2c2c2e);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--m-t2, rgba(255, 255, 255, .6));
}

.meteo-radar-type[b-5tk8dry7ij] {
    font-size: 12px;
    color: var(--m-blue2, #007aff);
}

.meteo-map[b-5tk8dry7ij] {
    height: 340px;
    background: #1a1a2e;
}

.meteo-map-layers[b-5tk8dry7ij] {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.meteo-map-layers[b-5tk8dry7ij]::-webkit-scrollbar {
    display: none;
}

.meteo-mlbtn[b-5tk8dry7ij] {
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: var(--m-card2, #2c2c2e);
    border: none;
    color: var(--m-t2, rgba(255, 255, 255, .6));
    white-space: nowrap;
}

.meteo-mlbtn.active[b-5tk8dry7ij] {
    background: var(--m-blue2, #007aff);
    color: #fff;
}

/* ── BOTTOM NAV ───────────────────────────────────────────────── */
.meteo-bottom-nav[b-5tk8dry7ij] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(28, 28, 30, .98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--m-sep, rgba(255, 255, 255, .12));
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.meteo-nav-items[b-5tk8dry7ij] {
    display: flex;
    width: 100%;
    padding: 8px 0 4px;
}

.meteo-nav-bottom-fill[b-5tk8dry7ij] {
    height: var(--m-sb, 0px);
    background: rgba(28, 28, 30, .98);
}

.meteo-nitem[b-5tk8dry7ij] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    padding: 4px 2px;
    min-height: 44px;
}

.meteo-nico[b-5tk8dry7ij] {
    font-size: 24px;
    transition: transform .15s;
}

.meteo-nlbl[b-5tk8dry7ij] {
    font-size: 10px;
    color: var(--m-t3, rgba(255, 255, 255, .35));
    font-weight: 500;
}

.meteo-nitem.active .meteo-nlbl[b-5tk8dry7ij] {
    color: var(--m-blue2, #007aff);
}

.meteo-nitem.active .meteo-nico[b-5tk8dry7ij] {
    transform: scale(1.1);
}

/* ── STAT INLINE ──────────────────────────────────────────────── */
.meteo-stat-inline[b-5tk8dry7ij] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--m-sep, rgba(255, 255, 255, .12));
    border-radius: 14px;
    overflow: hidden;
}

.meteo-si-cell[b-5tk8dry7ij] {
    background: var(--m-card, #1c1c1e);
    padding: 12px 14px;
}

.meteo-si-lbl[b-5tk8dry7ij] {
    font-size: 12px;
    color: var(--m-t3, rgba(255, 255, 255, .35));
    margin-bottom: 3px;
}

.meteo-si-val[b-5tk8dry7ij] {
    font-size: 17px;
    font-weight: 600;
}

.meteo-si-sub[b-5tk8dry7ij] {
    font-size: 11px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
    margin-top: 2px;
}

/* ── ALERTES (vide) ───────────────────────────────────────────── */
.meteo-empty-state[b-5tk8dry7ij] {
    text-align: center;
    padding: 40px 16px;
    color: var(--m-t3, rgba(255, 255, 255, .35));
}

.meteo-empty-ico[b-5tk8dry7ij] {
    font-size: 48px;
    margin-bottom: 12px;
}

.meteo-empty-title[b-5tk8dry7ij] {
    font-size: 16px;
    font-weight: 600;
    color: var(--m-t1, #fff);
}

.meteo-empty-sub[b-5tk8dry7ij] {
    font-size: 13px;
    margin-top: 6px;
}

/* ── PLUS / À PROPOS ──────────────────────────────────────────── */
.meteo-about-card[b-5tk8dry7ij] {
    padding: 16px;
}

.meteo-about-title[b-5tk8dry7ij] {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
}

.meteo-about-body[b-5tk8dry7ij] {
    font-size: 13px;
    color: var(--m-t2, rgba(255, 255, 255, .6));
    line-height: 1.6;
}

.meteo-about-body p + p[b-5tk8dry7ij] {
    margin-top: 8px;
}

.meteo-about-body strong[b-5tk8dry7ij] {
    color: var(--m-t1, #fff);
}

.meteo-about-note[b-5tk8dry7ij] {
    color: var(--m-t3, rgba(255, 255, 255, .35));
}

/* ── RECHERCHE (modal Bootstrap "modal-fullscreen") ──────────────
   .modal/.modal-dialog/.modal-content/.modal-backdrop viennent de
   Bootstrap (déjà chargé globalement) ; seul le contenu interne est
   restylé ici pour retrouver l'overlay plein écran sombre d'origine. */
.meteo-search-content[b-5tk8dry7ij] {
    background: var(--m-bg, #000);
    border: none;
    border-radius: 0;
    padding: calc(var(--m-st, 0px) + 12px) 16px 16px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    color: var(--m-t1, #fff);
}

.meteo-search-topbar[b-5tk8dry7ij] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.meteo-sinput[b-5tk8dry7ij] {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--m-card, #1c1c1e);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 16px;
    font-family: inherit;
}

.meteo-sinput:focus[b-5tk8dry7ij] {
    border-color: var(--m-blue2, #007aff);
    box-shadow: none;
    background: var(--m-card, #1c1c1e);
    color: #fff;
}

.meteo-scancel[b-5tk8dry7ij] {
    color: var(--m-blue2, #007aff);
    font-size: 15px;
    padding: 8px;
    flex-shrink: 0;
}

.meteo-sresults[b-5tk8dry7ij] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meteo-sitem[b-5tk8dry7ij] {
    padding: 13px 16px;
    border-radius: 12px;
    background: var(--m-card, #1c1c1e);
    cursor: pointer;
    font-size: 14px;
}

.meteo-sitem:active[b-5tk8dry7ij] {
    background: var(--m-card2, #2c2c2e);
}

.meteo-sempty[b-5tk8dry7ij] {
    text-align: center;
    color: var(--m-t3, rgba(255, 255, 255, .35));
    padding: 16px;
    font-size: 13px;
}

.meteo-sou[b-5tk8dry7ij] {
    font-size: 12px;
    color: var(--m-t3, rgba(255, 255, 255, .35));
    text-align: center;
}

.meteo-sgps[b-5tk8dry7ij] {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    border-radius: 12px;
    background: var(--m-blue2, #007aff);
    border: none;
    color: #fff;
    font-weight: 600;
}

/* ── MOBILE-FIRST : au-delà du mobile, on borne la largeur ───────
   pour éviter que le design "app plein écran" s'étire sur desktop. */
@media (min-width: 640px) {
    .meteo-topnav[b-5tk8dry7ij],
    .meteo-main[b-5tk8dry7ij],
    .meteo-bottom-nav .meteo-nav-items[b-5tk8dry7ij] {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}
/* /Components/Pages/Confidentialite.razor.rz.scp.css */
/* Confidentialite.razor.css — mobile first */

.conf - page[b-u9pu4zogvl] {
    background: #f8f9fa;
    min - height: 100vh;
}

/* ─── Hero — mobile ──────────────────────────────────── */
.conf - hero[b-u9pu4zogvl] {
    background: #0a0a0a;
    padding: 40px 16px;
    text - align: center;
}

.conf - title[b-u9pu4zogvl] {
    color: #ffffff;
    font - size: 1.6rem;
    font - weight: 700;
    margin: 0 0 8px;
}

.conf - subtitle[b-u9pu4zogvl] {
    color: rgba(255, 255, 255, 0.45);
    font - size: 0.82rem;
    margin: 0;
    font - family: 'Courier New', monospace;
}

@media(min - width: 768px) {
    .conf - hero[b-u9pu4zogvl] {
        padding: 56px 24px;
    }

    .conf - title[b-u9pu4zogvl] {
        font - size: 2rem;
    }
}

/* ─── Corps — mobile ─────────────────────────────────── */
.conf - body[b-u9pu4zogvl] {
    padding - top: 40px;
    padding - bottom: 40px;
}

.conf - section[b-u9pu4zogvl] {
    background: #ffffff;
    border - radius: 10px;
    padding: 24px 20px;
    margin - bottom: 16px;
    box - shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.conf - h2[b-u9pu4zogvl] {
    font - size: 1rem;
    font - weight: 700;
    color: #111;
    margin: 0 0 14px;
    padding - bottom: 10px;
    border - bottom: 2px solid #f5a623;
    display: inline - block;
}

.conf - section p[b-u9pu4zogvl],
.conf-section li[b-u9pu4zogvl] {
    font-size: 0.92rem;
    line - height: 1.75;
    color: #444;
    margin - bottom: 8px;
}

.conf - section ul[b-u9pu4zogvl] {
    padding-left: 20px;
    margin - bottom: 8px;
}

.conf - section li[b-u9pu4zogvl] {
    margin-bottom: 6px;
}

.conf - link[b-u9pu4zogvl] {
    color: #f5a623;
    text - decoration: none;
}

    .conf - link:hover[b-u9pu4zogvl] {
        text-decoration: underline;
    }

@media(min - width: 768px) {
    .conf - body[b-u9pu4zogvl] {
        padding - top: 56px;
        padding - bottom: 56px;
    }

    .conf - section[b-u9pu4zogvl] {
        padding: 32px 36px;
        margin - bottom: 20px;
    }

    .conf - h2[b-u9pu4zogvl] {
        font - size: 1.05rem;
    }

    .conf - section p[b-u9pu4zogvl],
    .conf - section li[b-u9pu4zogvl] {
        font - size: 0.95rem;
    }
}

/* ─── Retour ─────────────────────────────────────────── */
.conf - back[b-u9pu4zogvl] {
    margin - top: 8px;
    margin - bottom: 32px;
    font - size: 0.88rem;
}

/* ─── Footer ─────────────────────────────────────────── */
.conf - footer[b-u9pu4zogvl] {
    font - size: 0.88rem;
    color: #aaa;
    border - top: 1px solid #eee;
    padding - top: 24px;
}
/* /Components/Pages/LaGirafeQuiDansait.razor.rz.scp.css */
/* LaGirafeQuiDansait.razor.css */

.lgd-page[b-cefbnjhd6v] {
    background: #f8f9fa;
    min-height: 100vh;
}

.lgd-hero[b-cefbnjhd6v] {
    background: #1a1a2e;
    padding: 60px 24px;
    text-align: center;
}

@media (max-width: 768px) {
    .lgd-hero[b-cefbnjhd6v] {
        padding: 40px 16px;
    }

        .lgd-hero h1[b-cefbnjhd6v] {
            font-size: 1.6rem;
        }
}

.lgd-hero p[b-cefbnjhd6v] {
    opacity: 0.85;
}

.lgd-accent[b-cefbnjhd6v] {
    color: #ff6b6b;
}

.lgd-tag[b-cefbnjhd6v] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
}

.lgd-card[b-cefbnjhd6v] {
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
}

.lgd-rgpd[b-cefbnjhd6v] {
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #555;
}

.lgd-note[b-cefbnjhd6v] {
    font-size: 0.8rem;
    color: #999;
}

.lgd-success-icon[b-cefbnjhd6v] {
    font-size: 3rem;
}

.lgd-small[b-cefbnjhd6v] {
    font-size: 0.82rem;
}

.lgd-btn-amazon[b-cefbnjhd6v] {
    background: #ff9900;
    color: #1a1a2e;
    font-weight: 700;
}

    .lgd-btn-amazon:hover[b-cefbnjhd6v] {
        background: #e68a00;
        color: #1a1a2e;
    }

.lgd-footer[b-cefbnjhd6v] {
    font-size: 0.88rem; /* était 0.8rem */
    color: #aaa;
}
/* /Components/Pages/PiloterClaudeCode.razor.rz.scp.css */
/* PiloterClaudeCode.razor.css — mobile first */

/* ─── Page ───────────────────────────────────────────── */
.pcc-page[b-ndragvw28c] {
    background: #f8f9fa;
    min-height: 100vh;
}

/* ─── Hero — mobile ──────────────────────────────────── */
.pcc-hero[b-ndragvw28c] {
    background: #0a0a0a;
    padding: 40px 16px;
    text-align: center;
}

    .pcc-hero p[b-ndragvw28c] {
        opacity: 0.85;
    }

.pcc-title[b-ndragvw28c] {
    font-size: 1.75rem;
    line-height: 1.15;
}

.pcc-accent[b-ndragvw28c] {
    color: #f5a623;
}

.pcc-tag[b-ndragvw28c] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
}

/* ─── Hero — desktop ─────────────────────────────────── */
@media (min-width: 768px) {
    .pcc-hero[b-ndragvw28c] {
        padding: 60px 24px;
    }

    .pcc-title[b-ndragvw28c] {
        font-size: 2.6rem;
    }
}

/* ─── Accroche — mobile ──────────────────────────────── */
.pcc-scene[b-ndragvw28c] {
    font-size: 0.97rem;
    line-height: 1.8;
    color: #444;
    border-left: 3px solid #f5a623;
    padding: 4px 0 4px 16px;
    margin-bottom: 20px;
    font-style: italic;
}

.pcc-body[b-ndragvw28c] {
    font-size: 0.93rem;
    line-height: 1.85;
    color: #555;
}

/* ─── Accroche — desktop ─────────────────────────────── */
@media (min-width: 768px) {
    .pcc-scene[b-ndragvw28c] {
        font-size: 1.05rem;
        padding-left: 20px;
        margin-bottom: 24px;
    }

    .pcc-body[b-ndragvw28c] {
        font-size: 0.97rem;
    }
}

/* ─── Skills — mobile ────────────────────────────────── */
.pcc-skills-section[b-ndragvw28c] {
    background: #ffffff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 40px 0;
}

.pcc-skills-title[b-ndragvw28c] {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #111;
    margin-bottom: 24px;
    border-left: 3px solid #f5a623;
    padding-left: 14px;
}

.pcc-skills-list[b-ndragvw28c] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .pcc-skills-list li[b-ndragvw28c] {
        font-size: 0.92rem;
        line-height: 1.65;
        color: #444;
        padding-left: 22px;
        position: relative;
    }

        .pcc-skills-list li[b-ndragvw28c]::before {
            content: '◎';
            position: absolute;
            left: 0;
            color: #f5a623;
            font-size: 0.72rem;
            top: 4px;
        }

.pcc-skills-note[b-ndragvw28c] {
    font-size: 0.82rem;
    color: #999;
    font-style: italic;
    border-top: 1px solid #eee;
    padding-top: 16px;
}

/* ─── Skills — desktop ───────────────────────────────── */
@media (min-width: 768px) {
    .pcc-skills-section[b-ndragvw28c] {
        padding: 56px 0;
    }

    .pcc-skills-title[b-ndragvw28c] {
        font-size: 1rem;
    }

    .pcc-skills-list li[b-ndragvw28c] {
        font-size: 0.95rem;
    }
}

/* ─── Carte formulaire ───────────────────────────────── */
.pcc-card[b-ndragvw28c] {
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
}

    /* inputs confortables au doigt */
    .pcc-card .form-control[b-ndragvw28c],
    .pcc-card .form-select[b-ndragvw28c] {
        min-height: 48px;
        font-size: 1rem;
    }

.pcc-rgpd[b-ndragvw28c] {
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #555;
}

    /* checkbox plus grande sur mobile */
    .pcc-rgpd .form-check-input[b-ndragvw28c] {
        width: 1.2em;
        height: 1.2em;
        margin-top: 2px;
        flex-shrink: 0;
    }

.pcc-note[b-ndragvw28c] {
    font-size: 0.8rem;
    color: #999;
}

.pcc-success-icon[b-ndragvw28c] {
    font-size: 3rem;
}

.pcc-small[b-ndragvw28c] {
    font-size: 0.82rem;
}

.pcc-btn-amazon[b-ndragvw28c] {
    background: #f5a623;
    color: #0a0a0a;
    font-weight: 700;
}

    .pcc-btn-amazon:hover[b-ndragvw28c] {
        background: #d98e10;
        color: #0a0a0a;
    }

/* ─── Footer ─────────────────────────────────────────── */
.pcc-footer[b-ndragvw28c] {
    font-size: 0.88rem;
    color: #aaa;
}