/* /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 : #c8d8e8 → 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 : #e0566a → var(--red)
Info / cyan : #45C4DC → var(--cyan)
============================================================ */
/* ── PAGE ─────────────────────────────────────────────────── */
.diag-page[b-qmyqc9ffv2] {
max-width: 1200px;
margin: 0 auto;
font-family: 'Space Mono', monospace;
color: #c8d8e8;
}
.diag-title[b-qmyqc9ffv2] {
font-size: 1.5rem;
font-weight: 700;
color: #FF9900;
}
.diag-subtitle[b-qmyqc9ffv2] {
font-size: 0.78rem;
color: #5a7a9a;
}
.diag-hint[b-qmyqc9ffv2] {
font-size: 0.78rem;
color: #5a7a9a;
}
.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: #e0566a;
border-radius: 8px;
font-size: .82rem;
}
/* ── BARRE DE CONTRÔLES ──────────────────────────────────── */
.diag-card[b-qmyqc9ffv2] {
background: #151b24;
border: 1px solid #1c2638;
border-radius: 10px;
padding: 14px 16px;
}
.diag-controls[b-qmyqc9ffv2] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.diag-select[b-qmyqc9ffv2] {
background: #1c2638;
border: 1px solid #2a3a50;
border-radius: 6px;
color: #c8d8e8;
font-family: 'Space Mono', monospace;
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: #8a9bb0;
font-family: 'Space Mono', monospace;
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: #1c2638;
border: 1px solid #2a3a50;
border-radius: 5px;
color: #c8d8e8;
font-family: 'Space Mono', monospace;
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: #5a7a9a;
font-size: .80rem;
}
.diag-btn-calculer[b-qmyqc9ffv2] {
background: #FF9900;
color: #000;
border: none;
border-radius: 6px;
font-family: 'Space Mono', monospace;
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;
}
/* ── 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: #e0566a;
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: #5a7a9a;
font-size: .82rem;
}
.diag-initial[b-qmyqc9ffv2] {
text-align: center;
padding: 48px;
color: #5a7a9a;
font-size: .82rem;
}
/* ── ONGLETS ─────────────────────────────────────────────── */
.diag-tabs[b-qmyqc9ffv2] {
display: flex;
gap: 2px;
border-bottom: 1px solid #1c2638;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.diag-tabs[b-qmyqc9ffv2]::-webkit-scrollbar {
display: none;
}
.diag-tab[b-qmyqc9ffv2] {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: #8a9bb0;
font-family: 'Space Mono', monospace;
font-size: .76rem;
padding: 8px 16px;
cursor: pointer;
white-space: nowrap;
transition: all .12s;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: -1px;
}
.diag-tab:hover[b-qmyqc9ffv2] {
color: #c8d8e8;
}
.diag-tab-actif[b-qmyqc9ffv2] {
color: #FF9900;
border-bottom-color: #FF9900;
font-weight: 700;
}
.diag-tab-badge[b-qmyqc9ffv2] {
background: #e0566a;
color: #fff;
font-size: .62rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 10px;
min-width: 16px;
text-align: center;
}
/* ── RÉSUMÉ RAPIDE ────────────────────────────────────────── */
.diag-resume-row[b-qmyqc9ffv2] {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.diag-resume-item[b-qmyqc9ffv2] {
background: #151b24;
border: 1px solid #1c2638;
border-radius: 8px;
padding: 14px 20px;
display: flex;
flex-direction: column;
gap: 5px;
min-width: 120px;
transition: border-color .15s;
}
.diag-resume-item:hover[b-qmyqc9ffv2] {
border-color: #2a3a50;
}
.diag-resume-label[b-qmyqc9ffv2] {
font-size: .62rem;
text-transform: uppercase;
letter-spacing: .06em;
color: #5a7a9a;
}
.diag-resume-val[b-qmyqc9ffv2] {
font-size: 1.15rem;
font-weight: 700;
font-family: 'Space Mono', monospace;
color: #c8d8e8;
}
/* ── CARDS PILIER ────────────────────────────────────────── */
.diag-pilier[b-qmyqc9ffv2] {
background: #151b24;
border: 1px solid #1c2638;
border-radius: 10px;
overflow: hidden;
}
/* Bordures gauche colorées par pilier */
.diag-badge-vert-border[b-qmyqc9ffv2],
.diag-badge-amber-border[b-qmyqc9ffv2],
.diag-badge-rouge-border[b-qmyqc9ffv2],
.diag-badge-gris-border[b-qmyqc9ffv2],
.diag-badge-suspendu-border[b-qmyqc9ffv2] {
border-left: 3px solid transparent;
}
.diag-pilier-1[b-qmyqc9ffv2] {
border-left-color: #45C4DC;
}
.diag-pilier-2[b-qmyqc9ffv2] {
border-left-color: #9278D4;
}
.diag-pilier-3[b-qmyqc9ffv2] {
border-left-color: #E0A040;
}
.diag-pilier-4[b-qmyqc9ffv2] {
border-left-color: #2EC98A;
}
.diag-pilier-5[b-qmyqc9ffv2] {
border-left-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;
}
.diag-pilier-icone[b-qmyqc9ffv2] {
font-size: 1.2rem;
}
.diag-pilier-nom[b-qmyqc9ffv2] {
font-size: 1rem;
font-weight: 700;
color: #c8d8e8;
display: block;
}
.diag-pilier-etat[b-qmyqc9ffv2] {
font-size: .72rem;
display: block;
margin-top: 2px;
}
.diag-pilier-right[b-qmyqc9ffv2] {
display: flex;
align-items: center;
gap: 8px;
}
.diag-pilier-chevron[b-qmyqc9ffv2] {
color: #5a7a9a;
font-size: .80rem;
}
.diag-pilier-body[b-qmyqc9ffv2] {
padding: 0 18px 16px;
border-top: 1px solid #1c2638;
}
.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: #5a7a9a;
display: block;
margin-bottom: 4px;
}
.diag-action-text[b-qmyqc9ffv2] {
font-size: .78rem;
color: #8a9bb0;
line-height: 1.5;
}
/* ── GRILLE DE MÉTRIQUES ─────────────────────────────────── */
.diag-metriques-grid[b-qmyqc9ffv2] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
gap: 8px;
margin-bottom: 12px;
}
.diag-m[b-qmyqc9ffv2] {
background: #1c2638;
border: 1px solid #22304a;
border-radius: 6px;
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 5px;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.diag-m:hover[b-qmyqc9ffv2] {
background: #22304a;
border-color: #2a3a50;
}
.diag-m-label[b-qmyqc9ffv2] {
font-size: .65rem;
text-transform: uppercase;
letter-spacing: .06em;
color: #5a7a9a;
}
.diag-m-val[b-qmyqc9ffv2] {
font-size: 1.02rem;
font-weight: 700;
font-family: 'Space Mono', monospace;
color: #c8d8e8;
}
.diag-m-val-accent[b-qmyqc9ffv2] {
color: #FF9900;
font-size: 1.18rem;
font-family: 'Space Mono', monospace;
}
.diag-m-val-vert[b-qmyqc9ffv2] {
color: #2EC98A;
}
.diag-m-val-rouge[b-qmyqc9ffv2] {
color: #e0566a;
}
.diag-m-val-param[b-qmyqc9ffv2] {
color: #E0A040;
font-family: 'Space Mono', monospace;
}
.diag-m-actif[b-qmyqc9ffv2] {
background: rgba(255,153,0,.07) !important;
border-color: rgba(255,153,0,.5) !important;
}
.diag-m-actif .diag-m-label[b-qmyqc9ffv2] {
color: #FF9900;
}
.diag-m-sur[b-qmyqc9ffv2] {
font-size: .72rem;
font-weight: 400;
color: #5a7a9a;
margin-left: 3px;
}
.diag-m-sublabel[b-qmyqc9ffv2] {
font-size: .62rem;
font-style: italic;
color: #5a7a9a;
margin-top: 3px;
display: block;
line-height: 1.3;
}
/* ── PANNEAU LATÉRAL MÉTRIQUE ────────────────────────────── */
.diag-metriques-layout[b-qmyqc9ffv2] {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 12px;
}
@media (min-width: 900px) {
.diag-metriques-layout.diag-metriques-layout-open[b-qmyqc9ffv2] {
flex-direction: row;
align-items: flex-start;
gap: 16px;
}
.diag-metriques-layout.diag-metriques-layout-open .diag-metriques-grid[b-qmyqc9ffv2] {
flex: 1;
}
}
.diag-m-panel[b-qmyqc9ffv2] {
width: 100%;
background: #151b24;
border: 1px solid #1c2638;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
animation: panel-slide-in-b-qmyqc9ffv2 .15s ease-out;
}
@media (min-width: 900px) {
.diag-m-panel[b-qmyqc9ffv2] {
width: 250px;
flex-shrink: 0;
position: sticky;
top: 80px;
}
}
@keyframes panel-slide-in-b-qmyqc9ffv2 {
from {
opacity: 0;
transform: translateX(8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.diag-m-panel-header[b-qmyqc9ffv2] {
background: #1c2638;
border-bottom: 1px solid #1c2638;
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.diag-m-panel-pilier[b-qmyqc9ffv2] {
font-size: .62rem;
text-transform: uppercase;
letter-spacing: .08em;
color: #5a7a9a;
margin-bottom: 3px;
}
.diag-m-panel-titre[b-qmyqc9ffv2] {
font-size: .88rem;
font-weight: 700;
color: #c8d8e8;
}
.diag-m-panel-valeur[b-qmyqc9ffv2] {
font-size: 1.5rem;
font-weight: 700;
font-family: 'Space Mono', monospace;
color: #FF9900;
margin-top: 4px;
line-height: 1;
}
.diag-m-panel-close[b-qmyqc9ffv2] {
background: none;
border: none;
color: #5a7a9a;
font-size: .80rem;
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: color .12s;
}
.diag-m-panel-close:hover[b-qmyqc9ffv2] {
color: #c8d8e8;
}
.diag-m-panel-body[b-qmyqc9ffv2] {
padding: 14px 16px;
flex: 1;
overflow-y: auto;
max-height: 280px;
}
.diag-m-panel-section[b-qmyqc9ffv2] {
margin-bottom: 12px;
}
.diag-m-panel-section-label[b-qmyqc9ffv2] {
font-size: .60rem;
text-transform: uppercase;
letter-spacing: .07em;
color: #5a7a9a;
margin-bottom: 6px;
}
.diag-m-panel-texte[b-qmyqc9ffv2] {
font-size: .78rem;
color: #8a9bb0;
line-height: 1.65;
margin: 0;
}
.diag-m-panel-conseil[b-qmyqc9ffv2] {
background: #1c2638;
border-left: 2px solid #FF9900;
border-radius: 0 6px 6px 0;
padding: 10px 12px;
margin-top: 10px;
}
.diag-m-panel-conseil-label[b-qmyqc9ffv2] {
font-size: .60rem;
text-transform: uppercase;
letter-spacing: .07em;
color: #FF9900;
font-weight: 700;
margin-bottom: 5px;
}
.diag-m-panel-conseil-texte[b-qmyqc9ffv2] {
font-size: .76rem;
color: #8a9bb0;
line-height: 1.6;
margin: 0;
}
/* ── PARAMÈTRES UTILISÉS ─────────────────────────────────── */
.diag-params-utilises[b-qmyqc9ffv2] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
.diag-params-label[b-qmyqc9ffv2] {
font-size: .62rem;
color: #5a7a9a;
}
.diag-param-chip[b-qmyqc9ffv2] {
font-size: .58rem;
background: transparent;
border: 1px solid #1c2638;
color: #5a7a9a;
padding: 2px 8px;
border-radius: 10px;
}
/* ── MÉTRIQUE CAPITAINE — bordure pilier ─────────────────── */
.diag-pilier-1 .diag-m:first-child[b-qmyqc9ffv2] {
border-left: 2px solid #45C4DC;
}
.diag-pilier-2 .diag-m:first-child[b-qmyqc9ffv2] {
border-left: 2px solid #9278D4;
}
.diag-pilier-3 .diag-m:first-child[b-qmyqc9ffv2] {
border-left: 2px solid #E0A040;
}
.diag-pilier-4 .diag-m:first-child[b-qmyqc9ffv2] {
border-left: 2px solid #2EC98A;
}
.diag-pilier-5 .diag-m:first-child[b-qmyqc9ffv2] {
border-left: 2px solid #6B8FBF;
}
/* ── COULEURS SÉMANTIQUES ÉTAT ────────────────────────────── */
.diag-badge-vert[b-qmyqc9ffv2] {
color: #2EC98A;
}
.diag-badge-amber[b-qmyqc9ffv2] {
color: #E0A040;
}
.diag-badge-rouge[b-qmyqc9ffv2] {
color: #e0566a;
}
.diag-badge-gris[b-qmyqc9ffv2] {
color: #5a7a9a;
}
.diag-badge-suspendu[b-qmyqc9ffv2] {
font-size: .65rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 10px;
background: rgba(69,196,220,.10);
border: 1px solid rgba(69,196,220,.3);
color: #45C4DC;
}
/* ── TABLEAU GÉNÉRIQUE ────────────────────────────────────── */
.diag-table-wrap[b-qmyqc9ffv2] {
overflow-x: auto;
border-radius: 8px;
border: 1px solid #1c2638;
}
.diag-table[b-qmyqc9ffv2] {
width: 100%;
border-collapse: collapse;
font-size: .78rem;
background: #151b24;
color: #c8d8e8;
}
.diag-th[b-qmyqc9ffv2] {
background: #1c2638;
color: #8a9bb0;
font-weight: 700;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .05em;
padding: 9px 10px;
text-align: left;
border-bottom: 1px solid #2a3a50;
white-space: nowrap;
}
.diag-th-tri[b-qmyqc9ffv2] {
cursor: pointer;
}
.diag-th-tri:hover[b-qmyqc9ffv2] {
color: #45C4DC;
}
.diag-th-num[b-qmyqc9ffv2] {
text-align: right;
}
.diag-th-pilier[b-qmyqc9ffv2] {
text-align: center;
width: 28px;
}
.diag-th-large[b-qmyqc9ffv2] {
min-width: 200px;
}
.diag-td[b-qmyqc9ffv2] {
padding: 7px 10px;
border-bottom: 1px solid #1c2638;
vertical-align: middle;
}
.diag-td-num[b-qmyqc9ffv2] {
text-align: right;
font-family: 'Space Mono', monospace;
font-variant-numeric: tabular-nums;
}
.diag-td-pilier[b-qmyqc9ffv2] {
text-align: center;
}
.diag-tr:hover[b-qmyqc9ffv2] {
background: #1c2638;
}
.diag-tr-inactif[b-qmyqc9ffv2] {
opacity: .45;
}
.diag-targeting-nom[b-qmyqc9ffv2] {
font-weight: 600;
color: #c8d8e8;
}
.diag-targeting-meta[b-qmyqc9ffv2] {
font-size: .65rem;
color: #5a7a9a;
margin-top: 2px;
}
.diag-meta-sep[b-qmyqc9ffv2] {
margin: 0 4px;
}
.diag-enchere[b-qmyqc9ffv2] {
color: #E0A040;
font-weight: 700;
font-family: 'Space Mono', monospace;
}
.diag-zero[b-qmyqc9ffv2] {
color: #5a7a9a;
}
.diag-kenp-val[b-qmyqc9ffv2] {
color: #2EC98A;
font-weight: 700;
font-family: 'Space Mono', monospace;
}
.diag-kenp-hint[b-qmyqc9ffv2] {
font-size: .62rem;
color: #2EC98A;
margin-left: 3px;
}
/* ── ACOS Amazon coloré vs Break-even ────────────────────── */
.diag-acos-ok[b-qmyqc9ffv2] {
color: #2EC98A;
font-weight: 700;
font-family: 'Space Mono', monospace;
}
.diag-acos-nok[b-qmyqc9ffv2] {
color: #e0566a;
font-weight: 700;
font-family: 'Space Mono', monospace;
}
.diag-acos-limit[b-qmyqc9ffv2] {
color: #E0A040;
font-weight: 700;
font-family: 'Space Mono', monospace;
}
/* ── TAUX CONSOMMATION BUDGET ─────────────────────────────── */
.diag-taux-val[b-qmyqc9ffv2] {
font-weight: 700;
font-family: 'Space Mono', monospace;
}
.diag-taux-rouge[b-qmyqc9ffv2] {
color: #e0566a;
}
.diag-taux-amber[b-qmyqc9ffv2] {
color: #E0A040;
}
.diag-taux-vert[b-qmyqc9ffv2] {
color: #2EC98A;
}
.diag-camp-nom[b-qmyqc9ffv2] {
font-weight: 600;
color: #c8d8e8;
}
.diag-camp-strat[b-qmyqc9ffv2] {
font-size: .65rem;
color: #5a7a9a;
}
.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;
}
/* ── FILTRES CIBLAGES ────────────────────────────────────── */
.diag-ciblage-bar[b-qmyqc9ffv2] {
display: flex;
flex-direction: column;
align-items: start;
gap: 10px;
flex-wrap: wrap;
}
.diag-filtres[b-qmyqc9ffv2] {
display: flex;
gap: 4px;
}
.diag-filtre[b-qmyqc9ffv2] {
background: transparent;
border: 1px solid #2a3a50;
border-radius: 5px;
color: #8a9bb0;
font-family: 'Space Mono', monospace;
font-size: .70rem;
padding: 4px 10px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: all .12s;
}
.diag-filtre:hover[b-qmyqc9ffv2] {
border-color: rgba(255,153,0,.4);
color: #FF9900;
}
.diag-filtre-actif[b-qmyqc9ffv2] {
border-color: rgba(255,153,0,.6);
color: #FF9900;
background: rgba(255,153,0,.07);
font-weight: 700;
}
.diag-filtre-count[b-qmyqc9ffv2] {
background: rgba(255,255,255,0.07);
color: #5a7a9a;
font-size: .60rem;
padding: 1px 5px;
border-radius: 8px;
}
.diag-filtres-type[b-qmyqc9ffv2] {
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid #1c2638;
}
.diag-filtre-type[b-qmyqc9ffv2] {
font-size: .65rem;
padding: 3px 8px;
border-color: rgba(69,196,220,0.15);
color: #5a7a9a;
}
.diag-filtre-type:hover[b-qmyqc9ffv2] {
border-color: rgba(69,196,220,0.4);
color: #45C4DC;
}
.diag-filtre-type-actif[b-qmyqc9ffv2] {
border-color: rgba(69,196,220,0.5);
color: #45C4DC;
background: rgba(69,196,220,0.07);
font-weight: 700;
}
.diag-recherche[b-qmyqc9ffv2] {
background: #1c2638;
border: 1px solid #2a3a50;
border-radius: 6px;
color: #c8d8e8;
font-family: 'Space Mono', monospace;
font-size: .76rem;
padding: 6px 10px;
flex: 1;
min-width: 180px;
max-width: 300px;
}
.diag-recherche:focus[b-qmyqc9ffv2] {
outline: none;
border-color: #FF9900;
box-shadow: 0 0 0 2px rgba(255,153,0,.10);
}
.diag-recherche[b-qmyqc9ffv2]::placeholder {
color: #5a7a9a;
}
.diag-vide[b-qmyqc9ffv2] {
text-align: center;
padding: 32px;
color: #5a7a9a;
font-size: .82rem;
}
/* ── PLACEMENTS ──────────────────────────────────────────── */
.diag-placements-grid[b-qmyqc9ffv2] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.diag-placement-card[b-qmyqc9ffv2] {
background: #151b24;
border: 1px solid #1c2638;
border-radius: 10px;
padding: 18px;
}
.diag-placement-header[b-qmyqc9ffv2] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid #1c2638;
}
.diag-placement-nom[b-qmyqc9ffv2] {
font-size: .92rem;
font-weight: 700;
color: #c8d8e8;
}
.diag-placement-badge[b-qmyqc9ffv2] {
font-size: .70rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
background: rgba(255,255,255,0.05);
}
.diag-placement-metrics[b-qmyqc9ffv2] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.diag-pm[b-qmyqc9ffv2] {
display: flex;
flex-direction: column;
gap: 2px;
}
.diag-pm-label[b-qmyqc9ffv2] {
font-size: .60rem;
text-transform: uppercase;
letter-spacing: .05em;
color: #5a7a9a;
}
.diag-pm-val[b-qmyqc9ffv2] {
font-size: .84rem;
font-weight: 700;
font-family: 'Space Mono', monospace;
color: #c8d8e8;
}
/* ── BUDGET INFO ─────────────────────────────────────────── */
.diag-budget-info[b-qmyqc9ffv2] {
font-size: .78rem;
color: #8a9bb0;
background: #151b24;
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: 'Space Mono', monospace;
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: #151b24;
border: 1px solid #1c2638;
border-radius: 10px;
overflow: hidden;
}
.diag-claude-reponse-header[b-qmyqc9ffv2] {
background: #1c2638;
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: #8a9bb0;
line-height: 1.7;
}
/* ── MARKDOWN CLAUDE ─────────────────────────────────────── */
.diag-md-h4[b-qmyqc9ffv2] {
font-size: .96rem;
font-weight: 700;
color: #c8d8e8;
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: #151b24;
border: 1px solid #1c2638;
border-radius: 8px;
padding: 12px 16px;
}
.diag-prompt-summary[b-qmyqc9ffv2] {
font-size: .74rem;
color: #5a7a9a;
cursor: pointer;
user-select: none;
}
.diag-prompt-summary:hover[b-qmyqc9ffv2] {
color: #8a9bb0;
}
.diag-prompt-pre[b-qmyqc9ffv2] {
font-size: .70rem;
color: #5a7a9a;
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);
}
}
/* ── ONGLET CAMPAGNES ─────────────────────────────────────────
Préfixe : camp-
Même palette que le reste : #151b24 / #1c2638 / #2a3a50
Monospace sur tous les chiffres.
─────────────────────────────────────────────────────────── */
.camp-grid[b-qmyqc9ffv2] {
display: flex;
flex-direction: column;
gap: 12px;
}
.camp-card[b-qmyqc9ffv2] {
background: #151b24;
border: 1px solid #1c2638;
border-radius: 8px;
overflow: hidden;
}
.camp-header[b-qmyqc9ffv2] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #1c2638;
gap: 12px;
flex-wrap: wrap;
}
.camp-name[b-qmyqc9ffv2] {
font-size: .82rem;
font-weight: 500;
color: #c8d8e8;
font-family: 'Space Mono', monospace;
}
.camp-badges[b-qmyqc9ffv2] {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.camp-badge[b-qmyqc9ffv2] {
font-size: .65rem;
padding: 2px 8px;
border-radius: 4px;
font-weight: 500;
}
.camp-badge-strat-up[b-qmyqc9ffv2] {
background: rgba(69,196,220,.12);
color: #45C4DC;
border: 1px solid rgba(69,196,220,.3);
}
.camp-badge-strat-down[b-qmyqc9ffv2] {
background: rgba(224,160,64,.12);
color: #E0A040;
border: 1px solid rgba(224,160,64,.3);
}
.camp-badge-ok[b-qmyqc9ffv2] {
background: rgba(46,201,138,.12);
color: #2EC98A;
border: 1px solid rgba(46,201,138,.3);
}
.camp-badge-warn[b-qmyqc9ffv2] {
background: rgba(224,86,106,.12);
color: #e0566a;
border: 1px solid rgba(224,86,106,.3);
}
.camp-badge-neutre[b-qmyqc9ffv2] {
background: #1c2638;
color: #5a7a9a;
border: 1px solid #2a3a50;
}
.camp-body[b-qmyqc9ffv2] {
display: grid;
grid-template-columns: 1fr 1fr;
}
.camp-section[b-qmyqc9ffv2] {
padding: 14px 16px;
}
.camp-section-right[b-qmyqc9ffv2] {
border-left: 1px solid #1c2638;
}
.camp-section-label[b-qmyqc9ffv2] {
font-size: .65rem;
color: #5a7a9a;
text-transform: uppercase;
letter-spacing: .07em;
margin-bottom: 10px;
}
.camp-metrics[b-qmyqc9ffv2] {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
margin-bottom: 4px;
}
.camp-m[b-qmyqc9ffv2] {
min-width: 65px;
}
.camp-m-lbl[b-qmyqc9ffv2] {
font-size: .65rem;
color: #5a7a9a;
display: block;
margin-bottom: 2px;
}
.camp-m-val[b-qmyqc9ffv2] {
font-size: .95rem;
font-weight: 500;
color: #c8d8e8;
font-family: 'Space Mono', monospace;
}
.camp-val-vert[b-qmyqc9ffv2] {
color: #2EC98A !important;
}
.camp-val-rouge[b-qmyqc9ffv2] {
color: #e0566a !important;
}
.camp-val-amber[b-qmyqc9ffv2] {
color: #E0A040 !important;
}
.camp-val-neutre[b-qmyqc9ffv2] {
color: #5a7a9a !important;
}
.camp-budget-row[b-qmyqc9ffv2] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.camp-budget-txt[b-qmyqc9ffv2] {
font-size: .7rem;
color: #5a7a9a;
}
.camp-barre-track[b-qmyqc9ffv2] {
height: 4px;
background: #1c2638;
border-radius: 2px;
overflow: hidden;
margin-top: 2px;
}
.camp-barre-fill[b-qmyqc9ffv2] {
height: 100%;
border-radius: 2px;
transition: width .3s;
}
.camp-barre-rouge[b-qmyqc9ffv2] {
background: #e0566a;
}
.camp-barre-amber[b-qmyqc9ffv2] {
background: #E0A040;
}
.camp-barre-vert[b-qmyqc9ffv2] {
background: #2EC98A;
}
.camp-barre-gris[b-qmyqc9ffv2] {
background: #3d5070;
}
.camp-placement-table[b-qmyqc9ffv2] {
width: 100%;
border-collapse: collapse;
margin-top: 4px;
}
.camp-placement-table th[b-qmyqc9ffv2] {
font-size: .65rem;
color: #5a7a9a;
font-weight: 400;
padding: 3px 0;
text-align: left;
}
.camp-placement-table th:not(:first-child)[b-qmyqc9ffv2] {
text-align: right;
}
.camp-placement-table td[b-qmyqc9ffv2] {
font-size: .75rem;
padding: 5px 0;
border-top: 1px solid #1c2638;
color: #8a9bb0;
}
.camp-placement-table td:not(:first-child)[b-qmyqc9ffv2] {
text-align: right;
}
.camp-mult-bar[b-qmyqc9ffv2] {
height: 12px;
border-radius: 2px;
}
.camp-mult-actif[b-qmyqc9ffv2] {
background: #2EC98A;
}
.camp-mult-zero[b-qmyqc9ffv2] {
background: #1c2638;
}
.camp-mult-lbl[b-qmyqc9ffv2] {
font-size: .65rem;
color: #5a7a9a;
font-family: 'Space Mono', monospace;
}
.camp-meta[b-qmyqc9ffv2] {
margin-top: 12px;
font-size: .65rem;
color: #3d5070;
}
.camp-footer[b-qmyqc9ffv2] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
border-top: 1px solid #1c2638;
background: #0f131a;
flex-wrap: wrap;
gap: 8px;
}
.camp-footer-modif[b-qmyqc9ffv2] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.camp-footer-modif-lbl[b-qmyqc9ffv2] {
font-size: .65rem;
color: #3d5070;
text-transform: uppercase;
letter-spacing: .05em;
}
.camp-footer-modif-val[b-qmyqc9ffv2] {
font-size: .72rem;
color: #8a9bb0;
font-family: 'Space Mono', monospace;
}
.camp-footer-modif-date[b-qmyqc9ffv2] {
color: #3d5070;
margin-left: 4px;
}
.camp-footer-stats[b-qmyqc9ffv2] {
display: flex;
gap: 16px;
}
.camp-footer-stat[b-qmyqc9ffv2] {
font-size: .72rem;
color: #5a7a9a;
}
.camp-footer-stat strong[b-qmyqc9ffv2] {
font-family: 'Space Mono', monospace;
color: #c8d8e8;
margin-left: 4px;
}
/* ════════════════════════════════════════════════════════════
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-resume-row[b-qmyqc9ffv2] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.diag-metriques-grid[b-qmyqc9ffv2] {
grid-template-columns: repeat(2, 1fr);
}
.diag-placements-grid[b-qmyqc9ffv2] {
grid-template-columns: 1fr;
}
.diag-pilier-header[b-qmyqc9ffv2] {
padding: 12px 14px;
}
.diag-pilier-body[b-qmyqc9ffv2] {
padding: 0 14px 14px;
}
.camp-body[b-qmyqc9ffv2] {
grid-template-columns: 1fr;
}
.camp-section-right[b-qmyqc9ffv2] {
border-left: none;
border-top: 1px solid #1c2638;
}
}
@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-resume-row[b-qmyqc9ffv2] {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.diag-resume-item[b-qmyqc9ffv2] {
padding: 10px 12px;
min-width: 0;
}
.diag-resume-val[b-qmyqc9ffv2] {
font-size: 1rem;
}
.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-ciblage-bar[b-qmyqc9ffv2] {
flex-direction: column;
align-items: stretch;
}
.diag-recherche[b-qmyqc9ffv2] {
max-width: none;
width: 100%;
}
.diag-table[b-qmyqc9ffv2] {
font-size: .70rem;
}
.diag-th[b-qmyqc9ffv2],
.diag-td[b-qmyqc9ffv2] {
padding: 6px 7px;
}
.diag-m-panel[b-qmyqc9ffv2] {
width: 100%;
position: static;
}
.diag-budget-info[b-qmyqc9ffv2] {
font-size: .72rem;
}
.diag-claude[b-qmyqc9ffv2] {
max-width: 100%;
}
}
/* /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: 'Space Mono', monospace;
font-size: clamp(1.1rem, 3vw, 1.4rem);
color: var(--cyan);
margin: 0;
}
.fp-subtitle[b-wvhmry8pjn] {
font-size: .8rem;
color: #6b7280;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: .82rem;
}
/* ── SPINNER ──────────────────────────────────────────────── */
.fp-spinner[b-wvhmry8pjn] {
color: var(--cyan);
width: 2rem;
height: 2rem;
}
/* ── ÉTAT VIDE ────────────────────────────────────────────── */
.fp-empty-title[b-wvhmry8pjn] {
font-family: 'Space Mono', monospace;
font-size: 1rem;
color: #9ca3af;
}
/* ── CARTES LIVRES ────────────────────────────────────────── */
.fp-card[b-wvhmry8pjn] {
background: var(--bg-card);
border: 1px solid #1a1a1a;
border-radius: 8px;
transition: border-color .2s;
min-width: 0;
min-height: 260px; /* hauteur minimale pour cohérence visuelle */
}
.fp-card:hover[b-wvhmry8pjn] {
border-color: #2a2a2a;
}
.fp-card-title[b-wvhmry8pjn] {
font-family: 'Space Mono', monospace;
font-size: .95rem;
color: #e5e7eb;
line-height: 1.4;
}
/* ASIN en cyan — clé technique de tout le système */
.fp-card-asin[b-wvhmry8pjn] {
font-family: 'Space Mono', monospace;
font-size: .78rem;
color: var(--cyan);
letter-spacing: .05em;
}
.fp-card-plume[b-wvhmry8pjn] {
font-size: .8rem;
color: #9ca3af;
font-style: italic;
}
.fp-card-date[b-wvhmry8pjn] {
font-size: .68rem;
color: #374151;
}
/* Date de publication — légèrement plus visible que la date d'intégration */
.fp-card-date-pub[b-wvhmry8pjn] {
font-size: .75rem;
color: #6b7280;
font-style: italic;
}
/* ── MÉTRIQUES FINANCIÈRES ────────────────────────────────── */
.fp-metrics-row[b-wvhmry8pjn] {
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
padding: .75rem 0;
margin: .5rem 0;
}
/* Séparateur vertical entre les 3 métriques */
.fp-metric-sep[b-wvhmry8pjn] {
border-left: 1px solid #1a1a1a;
border-right: 1px solid #1a1a1a;
}
.fp-metric-label[b-wvhmry8pjn] {
font-size: .65rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: .06em;
display: block;
}
.fp-metric-value[b-wvhmry8pjn] {
font-family: 'Space Mono', monospace;
font-size: .85rem;
color: #e5e7eb;
display: block;
}
/* 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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: #9ca3af;
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: #6b7280;
font-family: 'Space Mono', monospace;
font-size: .78rem;
}
.fp-btn-ghost:hover:not(:disabled)[b-wvhmry8pjn] {
background: transparent;
color: #9ca3af;
}
/* ── 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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: #9ca3af;
}
.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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: #6b7280;
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: #0d1117;
border: 1px solid #FEBD69; /* Doré Amazon — événement contextuel */
border-radius: 8px;
padding: 14px 16px;
font-size: 0.80rem;
color: #9ca3af;
}
.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: #6b7280;
margin-bottom: 10px;
}
/* ── SÉLECTEUR DE LIVRE ─────────────────────────────────────── */
.ge-select[b-ab67baxuha] {
background: #111827;
border: 1px solid #374151;
border-radius: 6px;
color: #e5e7eb;
font-family: 'Space Mono', monospace;
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: #9ca3af;
border: 1px solid #374151;
}
/* ── ÉTAT VIDE ──────────────────────────────────────────────── */
.ge-empty-title[b-ab67baxuha] {
font-size: 1rem;
color: #6b7280;
}
/* ── 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: #6b7280;
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: #6b7280;
font-size: 0.72rem;
}
.ge-periode-date[b-ab67baxuha] {
color: #e5e7eb;
font-weight: 700;
}
.ge-periode-duree[b-ab67baxuha] {
color: #6b7280;
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: #0d1117;
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: #6b7280;
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: #6b7280;
font-style: italic;
line-height: 1.4;
}
/* ── NOTES ──────────────────────────────────────────────────── */
.ge-notes-text[b-ab67baxuha] {
font-size: 0.80rem;
color: #9ca3af;
padding: 8px 12px;
background: #0d1117;
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: 'Space Mono', monospace;
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: #9ca3af;
border: 1px solid #374151;
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: #6b7280;
border: 1px solid #374151;
font-family: 'Space Mono', monospace;
font-size: 0.78rem;
padding: 7px 16px;
border-radius: 6px;
}
.ge-btn-ghost:hover[b-ab67baxuha] {
color: #9ca3af;
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: #0d1117;
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: #9ca3af;
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: 'Space Mono', monospace;
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: #6b7280;
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: #9ca3af;
}
/* /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: 'Space Mono', monospace;
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: #6b7280;
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: #0d1117;
border: 1px solid #FF9900;
border-radius: 8px;
padding: 14px 16px;
font-size: 0.80rem;
color: #9ca3af;
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: #6b7280;
}
/* ── 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: #0d1117;
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: #6b7280;
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: #0d1117;
}
.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: #6b7280;
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: #6b7280;
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: #9ca3af;
line-height: 1.6;
margin: 0;
}
/* Justification CDC */
.gp-panel-justification[b-jxz1kctgpu] {
font-size: 0.76rem;
color: #6b7280;
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: 'Space Mono', monospace;
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: #0d1117;
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: #9ca3af;
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: #0d1117;
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: #6b7280;
}
.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: 'Space Mono', monospace;
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: #6b7280;
border: 1px solid #374151;
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: #6b7280;
border: 1px solid #374151;
font-family: 'Space Mono', monospace;
font-size: 0.78rem;
padding: 7px 16px;
border-radius: 6px;
}
.gp-btn-ghost:hover[b-jxz1kctgpu] {
color: #9ca3af;
}
/* ── 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: #0d1117;
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: #9ca3af;
}
.gp-hint[b-jxz1kctgpu] {
font-size: 0.76rem;
color: #6b7280;
}
/* /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: 'Space Mono', monospace;
}
/* ── 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: #6b7280;
margin: 0;
}
/* ── BADGES STATUT SERVICE ────────────────────────────────── */
.hn-badge[b-smjl0c6zmw] {
font-size: .68rem;
padding: .2rem .55rem;
border-radius: 4px;
letter-spacing: .04em;
font-family: 'Space Mono', monospace;
}
/* 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: #6b7280;
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: 'Space Mono', monospace;
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: #6b7280;
}
/* ── 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: #151b24;
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: #6b7280;
letter-spacing: .04em;
text-transform: uppercase;
}
/* ── CHARGEMENT / VIDE ────────────────────────────────────── */
.hn-loading[b-smjl0c6zmw] {
display: flex;
align-items: center;
gap: .75rem;
color: #6b7280;
padding: 2rem;
font-size: .85rem;
}
.hn-empty[b-smjl0c6zmw] {
text-align: center;
padding: 3rem 1rem;
color: #6b7280;
}
.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: #151b24;
cursor: pointer;
transition: background .15s;
user-select: none;
}
.hn-exec-card:hover[b-smjl0c6zmw] {
background: #1c2638;
}
/* 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: #6b7280;
}
/* 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: #6b7280;
}
.hn-duree[b-smjl0c6zmw] {
font-size: .68rem;
color: #6b7280;
}
/* 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: #9ca3af;
}
/* 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: #1c2638;
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: #6b7280;
}
/* 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: #6b7280;
}
.hn-doublons-val[b-smjl0c6zmw] {
font-size: .65rem;
color: #4b5563;
}
/* Flèche accordion */
.hn-exec-col-fleche[b-smjl0c6zmw] {
text-align: center;
color: #6b7280;
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: #6b7280;
background: #0f131a;
border-top: 1px solid #1c2638;
}
.hn-detail-vide[b-smjl0c6zmw] {
padding: 1rem 1.25rem;
font-size: .8rem;
color: #6b7280;
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: #9ca3af;
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: #9ca3af;
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: #9ca3af;
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: #151b24;
border-top: 2px solid #1c2638;
font-weight: 700;
padding-top: .5rem;
padding-bottom: .5rem;
}
.hn-td-footer[b-smjl0c6zmw] {
text-align: center;
color: #6b7280;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: .72rem;
color: #6b7280;
}
/* 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: 'Space Mono', monospace;
}
.ir-subtitle[b-fy1tlc9xiw] {
font-size: .8rem;
color: #6b7280;
margin: 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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: .75rem;
color: #6b7280;
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;
}
.ir-param-row[b-fy1tlc9xiw] {
display: flex;
align-items: center;
gap: .75rem;
}
.ir-param-label[b-fy1tlc9xiw] {
font-size: .8rem;
color: #6b7280;
flex-shrink: 0;
}
.ir-input[b-fy1tlc9xiw] {
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: .75rem;
font-weight: 700;
color: var(--green);
}
/* ── TOGGLE SWITCH "JOUR PAR JOUR" ────────────────────────── */
/*
Architecture du toggle :
*/
.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: 'Space Mono', monospace;
font-size: .78rem;
color: #9ca3af;
}
/* Hint "N jours" — affiché quand le toggle est ON */
.ir-toggle-hint[b-fy1tlc9xiw] {
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: .75rem;
color: #6b7280;
}
.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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: .82rem;
color: #d1d5db;
font-weight: 700;
}
.ir-rapport-id[b-fy1tlc9xiw] {
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: #6b7280;
}
.ir-badge-idle[b-fy1tlc9xiw] {
background: #111;
color: #374151;
}
.ir-duree[b-fy1tlc9xiw] {
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: .65rem;
color: #374151;
}
.ir-saved-count[b-fy1tlc9xiw] {
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: .7rem;
color: #4b5563;
}
.ir-btn-toggle[b-fy1tlc9xiw] {
background: transparent;
border: 1px solid #2a2a2a;
color: #6b7280;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: #6b7280;
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: #6b7280;
text-transform: uppercase;
letter-spacing: .04em;
}
.ir-bdd-sep[b-fy1tlc9xiw] {
color: #374151;
font-size: .65rem;
}
.ir-bdd-count[b-fy1tlc9xiw] {
font-family: 'Space Mono', monospace;
font-size: .75rem;
font-weight: 700;
padding: .1rem .35rem;
border-radius: 3px;
}
.ir-bdd-total[b-fy1tlc9xiw] {
background: rgba(107, 114, 128, .12);
color: #9ca3af;
}
.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: 'Space Mono', monospace;
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: #6b7280;
}
.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: 'Space Mono', monospace;
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: #6b7280;
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: 'Space Mono', monospace;
font-size: .75rem;
color: #8a9bb0;
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: #5a7a9a;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 2px;
}
.ir-mat-card-val[b-fy1tlc9xiw] {
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
}
/* 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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
}
/* ── 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-j7[b-fy1tlc9xiw] {
background: rgba(224, 160, 64, .12);
color: var(--amber);
border: 1px solid rgba(224, 160, 64, .3);
}
.ir-mat-j14[b-fy1tlc9xiw] {
background: rgba(69, 196, 220, .12);
color: var(--cyan);
border: 1px solid rgba(69, 196, 220, .3);
}
.ir-mat-j30[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-pot-gain[b-fy1tlc9xiw] {
background: rgba(224, 160, 64, .18);
color: var(--amber);
border: 1px solid rgba(224, 160, 64, .45);
}
.ir-mat-pot-max[b-fy1tlc9xiw] {
background: rgba(46, 201, 138, .18);
color: var(--green);
border: 1px solid rgba(46, 201, 138, .45);
}
.ir-mat-pot-same[b-fy1tlc9xiw] {
background: rgba(28, 38, 56, .3);
color: #4a6070;
border: 1px solid rgba(28, 38, 56, .5);
}
.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: #5a7a9a;
}
.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: #666;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
}
/* ── 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: #888;
font-size: 0.8rem;
margin: 0;
}
.ira-btn-refresh[b-30b3ds63c7] {
background: none;
border: 1px solid #444;
color: #888;
padding: 0.3rem 0.7rem;
border-radius: 4px;
cursor: pointer;
font-family: 'Space Mono', monospace;
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: #888;
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: 'Space Mono', monospace;
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-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-groupe-count[b-30b3ds63c7] {
color: #666;
font-size: 0.7rem;
}
/* ── 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: #666;
}
.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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: #666;
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: #666;
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/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: 'Space Mono', monospace;
font-size: 1.4rem;
color: #FF9900;
margin: 0 0 .25rem;
}
.rv-subtitle[b-f4el1nj8wz] {
font-size: .8rem;
color: #6b7280;
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: #6b7280;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: .78rem;
color: #6b7280;
}
/* ── 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: #9ca3af;
line-height: 1.5;
}
/* Badge de granularité : DAILY en vert, SUMMARY en orange Amazon */
.rv-desc-badge[b-f4el1nj8wz] {
font-family: 'Space Mono', monospace;
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: #6b7280;
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: #6b7280;
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 | ).
══════════════════════════════════════════════════════════ */
.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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: .78rem;
}
/* Montants financiers : vert foncé, gras */
.rv-col-money[b-f4el1nj8wz] {
text-align: right;
color: #065f46;
font-family: 'Space Mono', monospace;
font-size: .78rem;
font-weight: 600;
}
/* Taux et ratios : bleu */
.rv-col-pct[b-f4el1nj8wz] {
text-align: right;
color: #1d4ed8;
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: .78rem;
color: #6b7280;
}
.rv-page-range[b-f4el1nj8wz] {
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
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: #888;
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: #666;
}
.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: 'Space Mono', monospace;
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: #666;
}
.rp-id[b-px3aldnv3o] {
color: #888;
font-size: 0.72rem;
}
.rp-nom[b-px3aldnv3o] {
color: #ccc;
}
.rp-type[b-px3aldnv3o] {
color: #666;
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: #888;
padding: 0.2rem 0.6rem;
border-radius: 3px;
cursor: pointer;
font-family: 'Space Mono', monospace;
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: 'Space Mono', monospace;
font-size: 0.72rem;
color: #c8e6c9;
white-space: pre;
line-height: 1.5;
}
/* /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/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;
}
|