/* ======================================================
   OBSERVATOIRE CYBER — STYLE INSTITUTIONNEL
====================================================== */

:root {
    --oc-primary: #0a3d62;
    --oc-primary-dark: #072a45;
    --oc-accent: #0a3cff;
    --oc-danger: #c62828;
    --oc-light: #f4f7fb;
    --oc-border: #e2e2e2;
}

/* ======================================================
   KPI CARDS
====================================================== */

.oc-kpi-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(10,61,98,0.06);
    padding: 20px 24px 0;
    margin: 30px 0;
    position: relative;
}

.oc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 0;
}

.oc-kpi-footer {
    padding: 10px 4px;
    margin-top: 12px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.62rem;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.03em;
}

.oc-kpi-footer strong {
    color: #64748b;
    font-weight: 700;
}

.oc-kpi-card {
    background: #fff;
    border: 1px solid var(--oc-border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100px;
    transition: .2s ease;
}

.oc-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.oc-kpi-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    background: var(--oc-primary);
}

.oc-kpi-content {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.oc-kpi-value {
    font-size: 1.05em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-kpi-label {
    font-size: 0.72em;
    color: #666;
    line-height: 1.3;
}

/* ======================================================
   CODE COULEUR SOURCE — OBS (interne) / EXT (externe)
====================================================== */

/* Barre colorée en haut de la card */
.oc-kpi-card--obs {
    border-top: 3px solid #0a3d62;
}

/* Badge source */
.oc-kpi-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 4px;
    text-transform: uppercase;
}

.oc-kpi-badge--obs {
    background: #e8f0f8;
    color: #0a3d62;
    border: 1px solid #b3cde8;
}

.oc-kpi-badge--ext {
    background: #f1f3f5;
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Badge dans les stats contexte national */
.oc-ctx__stat .oc-kpi-badge {
    margin-top: 8px;
    display: block;
}

/* ======================================================
   TABLEAUX
====================================================== */

.oc-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

table.oc-incidents {
    border-collapse: collapse;
    width: 100%;
}

table.oc-incidents th {
    background: var(--oc-primary);
    color: #fff;
    text-align: left;
}

table.oc-incidents td,
table.oc-incidents th {
    padding: 8px 10px;
    border: 1px solid #ddd;
    vertical-align: middle;
    white-space: nowrap;
}

table.oc-incidents tr:hover {
    background: #f1f1f1;
}

/* Colonne types d'attaque — badges multiples */
table.oc-incidents td.oc-td-types {
    white-space: normal;
    min-width: 120px;
}

.oc-type-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #e0f0fb;
    color: #0a3d62;
    border: 1px solid #b3d6f0;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    margin: 2px 2px 2px 0;
    line-height: 1.5;
}

/* Colonne organisation — gras, peut revenir à la ligne */
table.oc-incidents td.oc-td-org {
    font-weight: 600;
    color: #0a3d62;
    min-width: 120px;
    max-width: 180px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

/* Colonne secteur — peut revenir à la ligne */
table.oc-incidents td:nth-child(3) {
    min-width: 140px;
    max-width: 200px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

/* Colonne impact — pastille et texte toujours sur une seule ligne */
table.oc-incidents td .oc-impact-dot {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ===============================
   IMPACT – Version plus visible
================================= */

.oc-impact-faible {
    background: #2e7d32;   /* vert plus soutenu */
}

.oc-impact-modere {
    background: #f9a825;   /* jaune/or plus visible */
}

.oc-impact-important {
    background: #ef6c00;   /* orange plus dense */
}

.oc-impact-critique {
    background: #c62828;   /* rouge institutionnel fort */
}
			  
/* Pastille impact (dot) */
.oc-impact-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* ======================================================
   BOUTONS
====================================================== */

.oc-btn-dashboard,
.oc-btn-incidents {
    height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    text-decoration: none;
    transition: .25s ease;
}

.oc-btn-dashboard {
    background: var(--oc-primary);
    color: #fff;
}

.oc-btn-dashboard:hover {
    background: var(--oc-primary-dark);
    transform: translateY(-2px);
}

.oc-btn-incidents {
    background: #fff;
    color: var(--oc-primary);
    border: 1.5px solid var(--oc-primary);
}

.oc-btn-incidents:hover {
    background: #f2f6fa;
    transform: translateY(-2px);
}

/* ======================================================
   MODAL INCIDENT
====================================================== */

#oc-incident-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.oc-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,25,47,.75);
}

.oc-modal-content {
    position: relative;
    background: #fff;
    max-width: 820px;
    width: 92%;
    max-height: 88vh;
    margin: 6vh auto;
    padding: 28px;
    overflow-y: auto;
    border-radius: 14px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
}

.oc-modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 26px;
    background: none;
    border: none;
    cursor: pointer;
}

/* ===============================
   FILTRES – version stable sans scroll
================================= */

.oc-filtres-scroll {
    overflow: visible;
    width: 100%;
}

.oc-filtres-inline {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;      /* autorise retour ligne */
    width: 100%;
}

.oc-filtres-inline select,
.oc-filtres-inline button {
    flex: 1 1 200px;      /* largeur flexible propre */
    min-width: 180px;
}
@media (min-width: 992px) {
    .oc-filtres-inline {
        flex-wrap: nowrap;
    }

    .oc-filtres-inline select,
    .oc-filtres-inline button {
        flex: 1;
    }
}
/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1024px) {
    .oc-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    .oc-btn-dashboard,
    .oc-btn-incidents {
        width: 100%;
        justify-content: center;
    }

    .oc-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .oc-kpi-grid {
        grid-template-columns: 1fr;
    }
}
							
/* ===============================
   CTA Observatoire
================================= */

.oc-observatoire-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 25px 0;
}

/* Base commune */
.oc-btn-main,
.oc-btn-signal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 22px;
    height: 44px;

    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95em;
    text-decoration: none;

    white-space: nowrap;
    transition: all 0.25s ease;
}

/* Icône */
.oc-btn-main svg,
.oc-btn-signal svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Bouton principal */
.oc-btn-main {
    background: #0a3d62;
    color: #ffffff;
}

.oc-btn-main:hover {
    background: #072a45;
    transform: translateY(-2px);
}

/* Bouton signalement */
.oc-btn-signal {
    background: #ffffff;
    color: #c62828;
    border: 2px solid #c62828;
}

.oc-btn-signal:hover {
    background: #c62828;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Animation flèche */
.oc-arrow {
    transition: transform 0.25s ease;
}

.oc-btn-main:hover .oc-arrow,
.oc-btn-signal:hover .oc-arrow {
    transform: translateX(4px);
}

/* Responsive mobile */
@media (max-width: 768px) {

    .oc-observatoire-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .oc-btn-main,
    .oc-btn-signal {
        width: 100%;
    }
}
/* ===== Variation indicateur ===== */

.oc-variation {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 15px;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
}

.oc-variation-up {
    color: #b00020;
    background: rgba(176,0,32,0.08);
}

.oc-variation-down {
    color: #0a7c2f;
    background: rgba(10,124,47,0.08);
}

.oc-variation-stable {
    color: #495057;
    background: rgba(0,0,0,0.05);
}
							
/* ===== Indice National SOC ===== */

.oc-threat-index {
    padding: 20px 25px;
    margin-bottom: 25px;
    border-radius: 6px;
    border-left: 6px solid;
    background: #f4f6f8;
}

.oc-threat-index-title {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.oc-threat-index-score {
    font-size: 2rem;
    font-weight: 800;
}

.oc-threat-index-level {
    font-size: 0.9rem;
    margin-top: 4px;
}

/* États */

.oc-index-critical {
    border-color: #b00020;
    color: #b00020;
}

.oc-index-high {
    border-color: #d97706;
    color: #d97706;
}

.oc-index-medium {
    border-color: #1f2937;
    color: #1f2937;
}

.oc-index-low {
    border-color: #0a7c2f;
    color: #0a7c2f;
}
/* ===============================
   FIABILITÉ
=================================*/

/* ===============================
   BADGE IMPACT – largeur auto
================================= */

.oc-badge {
    display: inline-block;   /* plus stable que inline-flex ici */
    padding: 6px 14px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    width: auto;
}
.oc-incident-meta span.oc-badge {
    width: auto !important;
    max-width: fit-content;
}
/* Faible */
.oc-fiab-faible {
    background: #f5f5f5;
    color: #555;
}

/* Média public */
.oc-fiab-media {
    background: #e3f2fd;
    color: #0a3d62;
}

/* Source interne */
.oc-fiab-interne {
    background: #ede7f6;
    color: #5e35b1;
}

/* Vérifié */
.oc-fiab-verifie {
    background: #e8f5e9;
    color: #2e7d32;
}
							
/**Organisation de lentete du tableau incident de laccueil**/
.oc-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 20px;
}
.oc-update-block {
    display: flex;
    flex-direction: column;
    gap: 2px;              /* réduit l’espace entre les lignes */
    line-height: 1.1;      /* réduit l’interligne global */
}

.oc-update-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;       /* légèrement plus petit */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7a7a7a;
    margin: 0;
}

.oc-update-date {
    font-size: 20px;
    font-weight: 700;
    color: #0a3d62;
}

.oc-update-subtitle {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #0a3d62;
}
.oc-header-links {
    display: flex;
    gap: 15px;
    align-items: center;
}
.oc-update-date,
.oc-update-subtitle {
    font-size: 13px;       /* même taille pour les deux */
    font-weight: 600;
    color: #0a3d62;
    margin: 0;
}
/* ======================================================
   POPUP – FICHE INCIDENT PROFESSIONNELLE
====================================================== */

.oc-incident-fiche {
    padding: 30px 35px;
}

/* Titre principal */
.oc-incident-fiche h2:first-child {
    font-size: 30px;
    font-weight: 800;
    color: var(--oc-primary);
    margin-bottom: 25px;
}

/* Bloc métadonnées */
.oc-incident-meta {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 10px 20px;
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.oc-incident-meta li {
    display: contents;
}

.oc-incident-meta strong {
    color: var(--oc-primary);
    font-weight: 600;
}

/* Séparateurs */
.oc-incident-fiche hr {
    border: none;
    border-top: 1px solid var(--oc-border);
    margin: 30px 0;
}

/* Titres secondaires */
.oc-incident-fiche h2:not(:first-child) {
    font-size: 26px;
    margin-top: 10px;
    color: var(--oc-primary);
}

/* Texte analyse */
.oc-incident-analyse {
    font-size: 16px;
    line-height: 1.7;
    color: #334155;
}

/* Sources */
.oc-incident-sources {
    font-size: 15px;
    color: #444;
}
											
/* ======================================================
   FICHE INCIDENT — DESIGN INSTITUTIONNEL
====================================================== */

.oc-fiche {
    font-family: inherit;
    color: #1e293b;
    background: #fff;
    overflow: hidden;
}

/* ── HEADER ─────────────────────────────────────────── */

.oc-fiche__header {
    padding: 28px 32px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.oc-fiche__header-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.oc-fiche__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.oc-fiche__impact-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.oc-fiche__impact-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.oc-fiche__title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0a3d62;
    line-height: 1.25;
    margin: 0 0 8px 0;
}

.oc-fiche__sector {
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
}

/* ── GRILLE MÉTADONNÉES ─────────────────────────────── */

.oc-fiche__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.oc-fiche__cell {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 24px;
    background: #fff;
    transition: background .15s;
}

.oc-fiche__cell:hover {
    background: #f8fafc;
}

.oc-fiche__cell-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a3d62;
    margin-top: 2px;
}

.oc-fiche__cell-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #94a3b8;
    margin-bottom: 4px;
}

.oc-fiche__cell-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}

/* ── SECTIONS ANALYSE & SOURCES ─────────────────────── */

.oc-fiche__section {
    padding: 24px 32px;
    border-bottom: 1px solid #f1f5f9;
}

.oc-fiche__section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 14px;
}

.oc-fiche__section-header svg {
    color: #0a3d62;
    flex-shrink: 0;
}

.oc-fiche__analyse {
    font-size: 0.92rem;
    line-height: 1.75;
    color: #334155;
}

.oc-fiche__analyse p {
    margin: 0 0 10px 0;
}

.oc-fiche__analyse p:last-child {
    margin-bottom: 0;
}

.oc-fiche__sources {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.6;
}

.oc-fiche__sources a {
    color: #0a3d62;
    text-decoration: underline;
}

/* ── FOOTER ─────────────────────────────────────────── */

.oc-fiche__footer {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 32px;
    font-size: 0.75rem;
    color: #94a3b8;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    letter-spacing: 0.03em;
}

.oc-fiche__footer svg {
    flex-shrink: 0;
    opacity: .5;
}

/* ── RESPONSIVE MOBILE ──────────────────────────────── */

@media (max-width: 540px) {
    .oc-fiche__header,
    .oc-fiche__section,
    .oc-fiche__footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .oc-fiche__grid {
        grid-template-columns: 1fr;
    }

    .oc-fiche__title {
        font-size: 1.25rem;
    }
}

/* ── DARK MODE ──────────────────────────────────────── */

.oc-dark .oc-fiche {
    background: #1e293b;
    color: #e2e8f0;
}

.oc-dark .oc-fiche__header {
    background: #162032;
    border-color: #334155;
}

.oc-dark .oc-fiche__title {
    color: #7fc8f8;
}

.oc-dark .oc-fiche__eyebrow,
.oc-dark .oc-fiche__sector {
    color: #94a3b8;
}

.oc-dark .oc-fiche__grid {
    background: #334155;
}

.oc-dark .oc-fiche__cell {
    background: #1e293b;
}

.oc-dark .oc-fiche__cell:hover {
    background: #162032;
}

.oc-dark .oc-fiche__cell-icon {
    background: #2d3f55;
    color: #7fc8f8;
}

.oc-dark .oc-fiche__cell-value {
    color: #e2e8f0;
}

.oc-dark .oc-fiche__section {
    border-color: #2d3f55;
}

.oc-dark .oc-fiche__analyse {
    color: #cbd5e1;
}

.oc-dark .oc-fiche__footer {
    background: #162032;
    border-color: #334155;
    color: #64748b;
}

/* ===============================
   FILTRES – Actions
================================= */

.oc-filtres-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.oc-btn-filtrer {
    height: 44px;
    padding: 0 18px;
    background: #0a3d62;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s ease;
}

.oc-btn-filtrer:hover {
    background: #072a45;
}

.oc-btn-reset {
    height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    border: 1.5px solid #0a3d62;
    color: #0a3d62;
    text-decoration: none;
    font-weight: 600;
    transition: .25s ease;
}

.oc-btn-reset:hover {
    background: #f2f6fa;
}
.oc-reset-icon {
    margin-right: 6px;
    font-weight: 700;
}
/* ===============================
   HEADER DASHBOARD – MOBILE FIX
================================= */

@media (max-width: 768px) {

    .oc-dashboard-header {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .oc-header-links {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .oc-btn-dashboard,
    .oc-btn-incidents {
        width: 100%;
        justify-content: center;
    }

}
/* ===============================
   KPI – Optimisation Mobile
================================= */

@media (max-width: 768px) {

    .oc-kpi-card {
        height: 95px;              /* réduit la hauteur */
        padding: 15px;
        border-radius: 8px;
    }

    .oc-kpi-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
        border-radius: 8px;
    }

    .oc-kpi-value {
        font-size: 1rem;           /* plus compact */
    }

    .oc-kpi-label {
        font-size: 0.8rem;
    }

}	
															
/* ===== FILTRE DASHBOARD — ALIGNEMENT PRO ===== */

.oc-filtres-dashboard{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:nowrap !important;
    width:100%;
}

/* champs */
.oc-filtres-dashboard select{
    height:54px;
    padding:0 16px;
    border:1px solid #cfd6df;
    border-radius:6px;
    background:#f3f5f9;
    font-size:16px;
    min-width:200px;
    appearance:none;
}

/* bouton filtrer */
.oc-btn-filtrer{
    height:54px;
    padding:0 40px;
    border-radius:8px;
    font-weight:600;
    font-size:16px;
}

/* bouton reset */
.oc-btn-reset{
    height:54px;
    padding:0 24px;
    border-radius:10px;
    font-size:16px;
}

/* empêche déformation */
.oc-filtres-dashboard select,
.oc-btn-filtrer,
.oc-btn-reset{
    flex:0 0 auto;
}		

/* =====================================================
   📈 SPARKLINE RÉPARTITION TEMPORELLE
===================================================== */
.oc-sparkline-wrap {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px 10px;
    margin-bottom: 16px;
}

.oc-sparkline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.oc-sparkline-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0a3d62;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.oc-sparkline-total {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
}

.oc-sparkline-canvas {
    width: 100% !important;
    height: 70px !important;
    display: block;
}

/* =====================================================
   ℹ️ MENTION SOURCES
===================================================== */
.oc-mention-sources {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.5;
}
.oc-mention-sources__icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    margin-top: 1px;
}
.oc-mention-sources strong {
    color: #0a3d62;
    font-weight: 700;
}

/* =====================================================
   🏷️ BADGES FILTRES ACTIFS
===================================================== */
.oc-filtres-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 4px;
}

.oc-filtre-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: #e0f0fb;
    color: #0a3d62;
    border: 1px solid #b3d6f0;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.oc-filtre-badge__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #0a3d62;
    color: #fff;
    border-radius: 50%;
    font-size: 0.6rem;
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
    transition: background .15s;
}

.oc-filtre-badge__close:hover {
    background: #c0392b;
}

.oc-filtre-badge--reset {
    background: #fff0f0;
    color: #c0392b;
    border-color: #f5c6c6;
    text-decoration: none;
    cursor: pointer;
}

.oc-filtre-badge--reset:hover {
    background: #fde8e8;
}

/* =====================================================
   📊 TOP 5 ENTREPRISES — bar chart horizontal
===================================================== */

.oc-top-entreprises-wrap {
    position: relative;
    width: 100%;
    z-index: 10;
    /* hauteur injectée par JS : labels.length × 56px + 60px */
}

/* Soustraire le canvas bar chart des règles globales oc-graph-block canvas */
.oc-graph-block .oc-chart-top-entreprises {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: relative;
    z-index: 10;
}

.oc-graph-subtitle {
    margin: -6px 0 14px;
    font-size: 13px;
    color: #6c757d;
}

body.oc-dark .oc-graph-subtitle {
    color: #8a9fb5;
}

#oc-threat-map {
    height: 350px;
}	

/* ===== CARD DASHBOARD ===== */

.oc-card{
    background:#fff;
    border-radius:12px;
    padding:22px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    margin-bottom:25px;
    border:1px solid #e6e6e6;
}

.oc-card-header{
    margin-bottom:15px;
}

.oc-card-header h3{
    margin:0;
    font-size:20px;
    color:#0a3d62;
}

.oc-card-subtitle{
    margin:4px 0 0;
    font-size:13px;
    color:#6c757d;
}

/* hauteur carte */
#oc-threat-map{
    height:350px;
    border-radius:8px;
}

.oc-card:hover{
    transform:translateY(-3px);
    transition:.2s ease;
    box-shadow:0 12px 28px rgba(0,0,0,.08);
}

/* ===============================
   MODE SOMBRE SOC CYBERDEFENSE
================================ */

body.oc-dark {

    background:#0b1622;
    color:#e6edf3;
}

/* cards */
body.oc-dark .oc-card{
    background:#111c2b;
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:0 0 0 transparent;
}

/* titres */
body.oc-dark h1,
body.oc-dark h2,
body.oc-dark h3{
    color:#8fd3ff;
}

/* sous titres */
body.oc-dark .oc-card-subtitle{
    color:#8a9fb5;
}

/* KPI */
body.oc-dark .oc-kpi-card{
    background:#111c2b;
}

/* filtres */
body.oc-dark select{
    background:#0f1b2a;
    color:#fff;
    border:1px solid #1f2d3d;
}

/* carte */
body.oc-dark #oc-threat-map{
    filter: brightness(0.85) contrast(1.05);
}

/* ── Légende carte nationale des menaces ── */
.oc-map-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 10px 16px;
    margin-top: 10px;
    background: #f8fafc;
    border: 1px solid #e8edf4;
    border-radius: 10px;
    font-size: .75rem;
    color: #64748b;
}
.oc-map-legend__title {
    font-weight: 700;
    color: #0a3d62;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    flex-shrink: 0;
}
.oc-map-legend__items {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.oc-map-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #334155;
}
.oc-map-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.oc-map-legend__note {
    font-size: .68rem;
    color: #94a3b8;
    font-style: italic;
    margin-left: auto;
}
body.oc-dark .oc-map-legend {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
body.oc-dark .oc-map-legend__title { color: #7fc8f8; }
body.oc-dark .oc-map-legend__item  { color: #cbd5e1; }

.oc-dark-btn{
    height:34px;          /* hauteur fixe */
    width:34px;           /* bouton carré */
    padding:0;            /* supprime l’espace interne */
    font-size:16px;       /* taille icône */
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
}

body.oc-dark .oc-dark-btn{
    background:#1e81b0;
}

.oc-dashboard-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

body.oc-dark .leaflet-tile {
    filter: brightness(0.6) contrast(1.2);
}

body.oc-dark .leaflet-control {
    filter: invert(1) hue-rotate(180deg);
}

/* header carte avec bouton */
.oc-card-header-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* bouton compact */
.oc-card-header-flex .oc-dark-btn{
    padding:6px 10px;
    font-size:16px;
    margin:0;
}

															/* =========================
   MODAL OVERLAY
========================= */

#oc-incident-modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(10,20,35,0.65);
    backdrop-filter: blur(4px);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
    z-index:9999;
}

/* visible */
#oc-incident-modal.oc-open{
    opacity:1;
    visibility:visible;
}

/* ======================================================
   PAGINATION
====================================================== */

.oc-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}

.oc-pagination .page-numbers,
.oc-pagination a.page-numbers,
.oc-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
    border: 1px solid transparent;
    color: #0a3d62;
    background: transparent;
}

.oc-pagination a.page-numbers:hover {
    background: rgba(10, 61, 98, 0.08);
    border-color: rgba(10, 61, 98, 0.2);
}

.oc-pagination .page-numbers.current {
    background: #0a3d62;
    color: #fff;
    border-color: #0a3d62;
    font-weight: 700;
    pointer-events: none;
}

.oc-pagination .page-numbers.dots {
    border: none;
    color: #94a3b8;
    pointer-events: none;
    min-width: 24px;
}

.oc-pagination .prev.page-numbers,
.oc-pagination .next.page-numbers {
    padding: 0 14px;
    font-weight: 600;
}

.oc-dark .oc-pagination a.page-numbers { color: #7fc8f8; }
.oc-dark .oc-pagination a.page-numbers:hover { background: rgba(127,200,248,0.1); border-color: rgba(127,200,248,0.25); }
.oc-dark .oc-pagination .page-numbers.current { background: #1e81b0; border-color: #1e81b0; color: #fff; }

/* ======================================================
   TRI COLONNES TABLEAU
====================================================== */

.oc-th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: background .15s, color .15s; }
.oc-th-sort:hover { background: rgba(10,61,98,0.07); }
.oc-th-active { background: rgba(10,61,98,0.1); font-weight: 700; }
.oc-sort-arrow { display: inline-block; margin-left: 4px; font-size: .8em; opacity: .5; transition: opacity .15s; }
.oc-th-sort:hover .oc-sort-arrow, .oc-th-active .oc-sort-arrow { opacity: 1; }

/* ======================================================
   SPINNER
====================================================== */

.oc-spinner-overlay {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.72); backdrop-filter: blur(2px); border-radius: 10px;
}
.oc-dark .oc-spinner-overlay { background: rgba(15,25,40,0.72); }
.oc-spinner { width: 36px; height: 36px; border: 3px solid rgba(10,61,98,0.15); border-top-color: #0a3d62; border-radius: 50%; animation: oc-spin 0.7s linear infinite; }
.oc-dark .oc-spinner { border-color: rgba(127,200,248,0.2); border-top-color: #7fc8f8; }
@keyframes oc-spin { to { transform: rotate(360deg); } }

/* ======================================================
   ÉTAT VIDE
====================================================== */

.oc-empty-state { padding: 48px 24px !important; text-align: center; border: none !important; }
.oc-empty-icon { font-size: 2.4rem; margin-bottom: 12px; opacity: .5; }
.oc-empty-title { font-size: 1.05rem; font-weight: 600; color: #334155; margin-bottom: 6px; }
.oc-empty-sub { font-size: .88rem; color: #64748b; }
.oc-dark .oc-empty-title { color: #cfe8ff; }
.oc-dark .oc-empty-sub { color: #94a3b8; }

/* ======================================================
   DONUTS MOBILE
====================================================== */

@media (max-width: 600px) {
    .oc-chart-types, .oc-chart-secteurs { max-height: 220px !important; }
    .oc-card { height: auto !important; min-height: unset !important; }
}

/* ======================================================
   TOP 5 ENTITÉS CIBLÉES
====================================================== */

.oc-top-entreprises-wrap {
    position: relative;
    height: 260px;
}

.oc-top-entreprises-wrap canvas {
    max-height: 260px;
}

@media (max-width: 600px) {
    .oc-top-entreprises-wrap {
        height: 220px;
    }
}
test write

/* ======================================================
   DERNIERS INCIDENTS EN CARTES
====================================================== */
.oc-incidents-cartes { width: 100%; }
.oc-incidents-cartes__header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.oc-incidents-cartes__titre { font-size:1.45rem; font-weight:800; color:#0a3d62; margin:0; }
.oc-incidents-cartes__voir-tout { font-size:0.85rem; font-weight:600; color:#1e81b0; text-decoration:none; }
.oc-incidents-cartes__voir-tout:hover { color:#0a3d62; }
.oc-incidents-cartes__grille { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
.oc-carte-incident { background:#fff; border:1px solid #e2e8f0; border-radius:12px; border-left:4px solid var(--impact-color,#0a3d62); padding:20px 22px; display:flex; flex-direction:column; gap:12px; transition:box-shadow .2s, transform .2s; }
.oc-carte-incident:hover { box-shadow:0 8px 24px rgba(10,61,98,0.1); transform:translateY(-2px); }
.oc-carte-incident__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.oc-carte-incident__type { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#64748b; }
.oc-carte-incident__badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; }
.oc-carte-incident__dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.oc-carte-incident__org { font-size:1.05rem; font-weight:700; color:#0a3d62; margin:0; line-height:1.3; }
.oc-carte-incident__meta { display:flex; flex-direction:column; gap:5px; }
.oc-carte-incident__secteur, .oc-carte-incident__date { font-size:0.8rem; color:#64748b; }
.oc-carte-incident__lien { margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-size:0.83rem; font-weight:600; color:#1e81b0; text-decoration:none; transition:gap .15s, color .15s; }
.oc-carte-incident__lien:hover { color:#0a3d62; gap:10px; }
.oc-dark .oc-carte-incident { background:#1e293b; border-color:#334155; }
.oc-dark .oc-carte-incident__org { color:#7fc8f8; }
.oc-dark .oc-carte-incident__type, .oc-dark .oc-carte-incident__secteur, .oc-dark .oc-carte-incident__date { color:#94a3b8; }
.oc-dark .oc-carte-incident__lien { color:#4fa3d1; }
@media (max-width:600px) { .oc-incidents-cartes__grille { grid-template-columns:1fr; } }


/* ======================================================
   GRAPHIQUES DASHBOARD UNIFIE
====================================================== */
.oc-graph-block {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e8edf4;
    box-shadow: 0 1px 12px rgba(10,61,98,0.05), 0 4px 20px rgba(10,61,98,0.04);
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    margin: 0;
    max-width: none;
    position: relative;
    transition: box-shadow .2s ease;
}
.oc-graph-block:hover {
    box-shadow: 0 2px 20px rgba(10,61,98,0.09), 0 6px 28px rgba(10,61,98,0.06);
}

/* Badge OBS-CC sur tous les graphiques */
.oc-graph-block::after {
    content: '📊 Niveau OBS-CC';
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #cbd5e1;
    pointer-events: none;
}

/* En-tête des blocs avec icône */
.oc-graph-block__head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    color: #64748b;
}
.oc-graph-block__head svg {
    flex-shrink: 0;
    opacity: .7;
}

.oc-graph-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: #0a3d62;
    margin: 0;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.oc-graph-subtitle {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0 0 16px 0;
    text-align: left;
}
.oc-graph-block canvas {
    width: 100% !important;
    flex: 1;
    min-height: 0;
}
.oc-chart-hidden {
    display: none !important;
}

/* ── DONUT SVG custom ── */
.oc-graph-block--donut {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 32px;
}
.oc-donut-wrap {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 0 0 auto;
    margin-top: 20px;
    min-height: 0;
}
.oc-donut-svg-wrap {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
}
.oc-donut-svg {
    display: block;
    width: 160px;
    height: 160px;
    filter: drop-shadow(0 2px 10px rgba(10,61,98,.12));
}
.oc-donut-center-val {
    font-size: 22px;
    font-weight: 800;
    fill: #0a3d62;
    font-family: inherit;
}
.oc-donut-center-lbl {
    font-size: 9px;
    fill: #94a3b8;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
.oc-donut-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.oc-donut-legend__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}
.oc-donut-legend__dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
}
.oc-donut-legend__label {
    color: #334155;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-donut-legend__pct {
    color: #64748b;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}
.oc-donut-empty {
    color: #94a3b8;
    font-size: 12px;
    margin: auto;
}

/* ── TOP 5 barres HTML ── */
.oc-graph-block--top5 {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: flex-start;
}
.oc-top5-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    margin-top: 10px;
    padding-bottom: 20px;
}
.oc-top5-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.oc-top5-rank {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}
.oc-top5-info {
    flex: 1;
    min-width: 0;
}
.oc-top5-name {
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oc-top5-bar-wrap {
    background: #f1f5f9;
    border-radius: 99px;
    height: 4px;
    overflow: hidden;
}
.oc-top5-bar {
    height: 100%;
    border-radius: 99px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
.oc-top5-count {
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 64px;
    text-align: right;
}
.oc-top5-unit {
    font-size: 9.5px;
    font-weight: 500;
    opacity: .7;
}

.oc-top-entreprises-wrap {
    flex: 1;
    position: relative;
    min-height: 240px;
}
.oc-top-entreprises-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}
.oc-chart-evolution { height: 280px !important; }
.oc-dark .oc-graph-block { background: #1e293b; border-color: #334155; }
.oc-dark .oc-graph-title { color: #7fc8f8; }
.oc-dark .oc-graph-subtitle { color: #64748b; }
.oc-dark .oc-donut-legend__label { color: #cbd5e1; }
.oc-dark .oc-top5-name { color: #e2e8f0; }
.oc-dark .oc-top5-bar-wrap { background: #334155; }
@media (max-width: 768px) {
    .oc-graph-block { padding: 18px 16px; min-height: 260px; }
    .oc-graph-title { font-size: 0.72rem; }
    .oc-top-entreprises-wrap { min-height: 200px; }
    .oc-donut-wrap { gap: 16px; }
    .oc-donut-svg-wrap { width: 110px; height: 110px; }
    .oc-donut-svg { width: 110px; height: 110px; }
    .oc-donut-legend__row { font-size: 11px; }
}


/* ======================================================
   COURBE INCIDENTS DU MOIS EN COURS
====================================================== */

.oc-graph-mois {
    max-width: 100%;
    overflow: hidden;
}

.oc-graph-mois.oc-graph-block {
    min-height: 0 !important;
    padding: 16px 20px 12px;
    background: linear-gradient(135deg, #f0f7ff 0%, #f8fafc 100%);
    border-color: #dbeafe;
}

.oc-graph-mois .oc-graph-mois__header {
    margin-bottom: 8px;
}

.oc-graph-mois .oc-graph-title {
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.oc-graph-mois .oc-graph-subtitle {
    font-size: 0.7rem;
    margin-bottom: 4px;
}

.oc-graph-mois__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.oc-graph-mois__kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.oc-graph-mois__count {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0a3d62;
    line-height: 1;
}

.oc-graph-mois__label {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.oc-dark .oc-graph-mois__count { color: #7fc8f8; }

@media (max-width: 600px) {
    .oc-graph-mois__count { font-size: 1.8rem; }
}


/* ======================================================
   LISTE INCIDENTS ENGAGEANTE — resume_tableau_bord
====================================================== */

.oc-resume-liste {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.oc-resume-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-left: 4px solid #e2e8f0;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    transition: background .15s;
}

.oc-resume-row:last-child { border-bottom: none; }

.oc-resume-row:hover { background: #f8fafc; }

.oc-resume-row__left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.oc-resume-row__org {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0a3d62;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-resume-row__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.oc-resume-row__type {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

.oc-resume-row__sep { color: #cbd5e1; font-size: 0.78rem; }

.oc-resume-row__secteur {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.oc-resume-row__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.oc-resume-row__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.oc-resume-row__date {
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
}

.oc-resume-row__lien {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1e81b0;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, gap .15s;
}

.oc-resume-row__lien:hover { color: #0a3d62; gap: 7px; }

/* Dark mode */
.oc-dark .oc-resume-liste { border-color: #334155; }
.oc-dark .oc-resume-row { background: #1e293b; border-bottom-color: #334155; }
.oc-dark .oc-resume-row:hover { background: #263548; }
.oc-dark .oc-resume-row__org { color: #7fc8f8; }
.oc-dark .oc-resume-row__type { color: #94a3b8; }
.oc-dark .oc-resume-row__date { color: #64748b; }
.oc-dark .oc-resume-row__lien { color: #4fa3d1; }

/* Responsive */
@media (max-width: 640px) {
    .oc-resume-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .oc-resume-row__right { width: 100%; justify-content: space-between; }
    .oc-resume-row__secteur { max-width: 140px; }
}

/* ======================================================
   INDICATEUR NIVEAU D'ALERTE NATIONAL
====================================================== */


/* =====================================================
   BANDEAU NIVEAU DE MENACE NATIONAL  [oc_menace_nationale]
   Variables CSS : --mn-accent  --mn-bg  --mn-border  --mn-pct
===================================================== */

.oc-menace-nationale {
    position: relative;
    overflow: hidden;
    background: var(--mn-bg);
    border: 1px solid var(--mn-border);
    border-left: 3px solid var(--mn-accent);
    border-radius: 14px;
    padding: 22px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

/* Halo d'ambiance */
.oc-menace-nationale::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 90% 10%, var(--mn-accent), transparent);
    opacity: 0.05;
    pointer-events: none;
}

/* ── EN-TÊTE ─────────────────────────────────────── */

.oc-mn__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.oc-mn__header-left {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.oc-mn__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    flex-wrap: wrap;
}

/* Puce animée */
.oc-mn__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mn-accent);
    flex-shrink: 0;
    animation: mn-pulse 2.2s ease-in-out infinite;
}

@keyframes mn-pulse {
    0%,100% { box-shadow: 0 0 0 0 var(--mn-accent); opacity:1; }
    60%      { box-shadow: 0 0 0 7px transparent;    opacity:.6; }
}

/* Pill "Évaluation éditoriale" */
.oc-mn__pill-editorial {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: #94a3b8;
    font-size: 0.58rem;
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Grand label du niveau */
.oc-mn__big-label {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--mn-accent);
    line-height: 1;
    letter-spacing: 0.04em;
}

.oc-mn__desc {
    font-size: 0.78rem;
    color: #64748b;
}

/* Badge numérique /4 */
.oc-mn__score-badge {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--mn-accent);
    line-height: 1;
    flex-shrink: 0;
    text-align: right;
}

.oc-mn__score-max {
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
    margin-left: 2px;
}

/* ── ÉTAPES ──────────────────────────────────────── */

.oc-mn__steps-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.oc-mn__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
}

/* Ligne de connexion */
.oc-mn__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 6px;
    left: calc(50% + 7px);
    right: calc(-50% + 7px);
    height: 2px;
    background: rgba(100,116,139,.2);
    border-radius: 1px;
}

.oc-mn__step--past::after,
.oc-mn__step--active::after {
    background: var(--mn-accent);
    opacity: 0.45;
}

.oc-mn__step-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(100,116,139,.3);
    background: transparent;
    position: relative;
    z-index: 1;
    transition: all .3s;
}

.oc-mn__step--past .oc-mn__step-dot {
    background: var(--mn-accent);
    border-color: var(--mn-accent);
    opacity: .5;
}

.oc-mn__step--active .oc-mn__step-dot {
    background: var(--mn-accent);
    border-color: var(--mn-accent);
    transform: scale(1.3);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mn-accent) 20%, transparent);
}

.oc-mn__step-lbl {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    white-space: nowrap;
}

.oc-mn__step--active .oc-mn__step-lbl {
    color: var(--mn-accent);
    font-weight: 800;
}

/* ── BARRE DE PROGRESSION ────────────────────────── */

.oc-mn__bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oc-mn__bar-track {
    width: 100%;
    height: 5px;
    background: rgba(100,116,139,.14);
    border-radius: 99px;
    overflow: visible;
    position: relative;
}

.oc-mn__bar-fill {
    height: 100%;
    width: var(--mn-pct);
    background: linear-gradient(90deg, rgba(100,116,139,.25), var(--mn-accent));
    border-radius: 99px;
    transition: width 1.5s cubic-bezier(.4,0,.2,1);
    position: relative;
}

/* Tip pulsant à l'extrémité */
.oc-mn__bar-fill::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mn-accent);
    box-shadow: 0 0 0 0 var(--mn-accent);
    animation: mn-gauge-pulse 1.8s ease-out infinite;
}

@keyframes mn-gauge-pulse {
    0%   { box-shadow: 0 0 0 0 var(--mn-accent); opacity: 1; }
    60%  { box-shadow: 0 0 0 7px transparent;    opacity: 0.7; }
    100% { box-shadow: 0 0 0 0 transparent;       opacity: 1; }
}

.oc-mn__bar-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    font-weight: 500;
    color: #334155;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── NOTE CONTEXTUELLE ───────────────────────────── */

.oc-mn__note {
    font-size: 0.79rem;
    color: #64748b;
    line-height: 1.65;
    padding: 11px 14px;
    background: rgba(100,116,139,.06);
    border-left: 3px solid var(--mn-accent);
    border-radius: 6px;
}

/* ── PIED DE BANDEAU ─────────────────────────────── */

.oc-mn__footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
    border-top: 1px solid rgba(100,116,139,.12);
    font-size: 0.73rem;
    color: #475569;
    font-weight: 500;
}

.oc-mn__footer-line1 {
    color: #475569;
}

.oc-mn__footer-line2 {
    color: #475569;
}

.oc-mn__footer-line3 {
    color: #64748b;
    font-weight: 700;
    font-size: 0.68rem;
}

.oc-mn__footer-left {
    color: #475569;
    line-height: 1.5;
}

.oc-mn__footer-left strong {
    color: #94a3b8;
}

.oc-mn__footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.oc-mn__source {
    font-style: italic;
    color: #475569;
    font-size: 0.67rem;
}

.oc-mn__date {
    font-weight: 700;
    color: #64748b;
    font-size: 0.68rem;
}

/* ── RESPONSIVE ──────────────────────────────────── */

@media (max-width: 580px) {
    .oc-menace-nationale { padding: 16px 14px 12px; gap: 13px; }
    .oc-mn__big-label    { font-size: 1.3rem; }
    .oc-mn__score-badge  { font-size: 1.5rem; }
    .oc-mn__step-lbl     { font-size: 0.5rem; }
    .oc-mn__pill-editorial { display: none; }
    .oc-mn__footer       { flex-direction: column; }
    .oc-mn__footer-right { align-items: flex-start; }
}

.oc-alerte-nationale {
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid var(--alerte-accent);
    border-radius: 14px;
    padding: 22px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

/* Lueur d'ambiance en arrière-plan */
.oc-alerte-nationale::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--alerte-accent);
    opacity: 0.04;
    pointer-events: none;
}

/* ── TOP ─────────────────────────────────────────── */

.oc-alerte__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.oc-alerte__left {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.oc-alerte__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
}

/* Point pulsant */
.oc-alerte__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--alerte-accent);
    flex-shrink: 0;
    animation: oc-pulse 2.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 var(--alerte-accent);
}

@keyframes oc-pulse {
    0%   { box-shadow: 0 0 0 0 var(--alerte-accent); opacity: 1; }
    60%  { box-shadow: 0 0 0 6px transparent; opacity: 0.7; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.oc-alerte__label {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--alerte-accent);
    line-height: 1;
    letter-spacing: -0.01em;
}

.oc-alerte__desc {
    font-size: 0.78rem;
    color: #475569;
    font-weight: 400;
}

/* Badge niveau */
.oc-alerte__badge {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--alerte-accent);
    line-height: 1;
    flex-shrink: 0;
}

.oc-alerte__badge-max {
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
    margin-left: 1px;
}

/* ── JAUGE ───────────────────────────────────────── */

.oc-alerte__gauge-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oc-alerte__gauge-track {
    width: 100%;
    height: 5px;
    background: rgba(255,255,255,0.07);
    border-radius: 99px;
    overflow: visible;
    position: relative;
}

.oc-alerte__gauge-fill {
    height: 100%;
    width: var(--alerte-pct);
    background: linear-gradient(90deg, #1e293b, var(--alerte-accent));
    border-radius: 99px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Tip pulsant à l'extrémité de la barre */
.oc-alerte__gauge-fill::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--alerte-accent);
    box-shadow: 0 0 0 0 var(--alerte-accent);
    animation: oc-gauge-pulse 1.8s ease-out infinite;
}

@keyframes oc-gauge-pulse {
    0%   { box-shadow: 0 0 0 0 var(--alerte-accent); opacity: 1; }
    60%  { box-shadow: 0 0 0 7px transparent; opacity: 0.7; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.oc-alerte__gauge-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    font-weight: 500;
    color: #334155;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── FOOTER ──────────────────────────────────────── */

.oc-alerte__footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.73rem;
    color: #475569;
    font-weight: 500;
}

.oc-alerte__footer-obscc {
    font-size: 0.68rem;
    color: #334155;
    letter-spacing: 0.01em;
}

.oc-alerte__footer-obscc strong {
    color: #64748b;
    font-weight: 700;
}

/* ── RESPONSIVE ──────────────────────────────────── */

@media (max-width: 480px) {
    
/* =====================================================
   BANDEAU NIVEAU DE MENACE NATIONAL  [oc_menace_nationale]
   Variables CSS : --mn-accent  --mn-bg  --mn-border  --mn-pct
===================================================== */

.oc-menace-nationale {
    position: relative;
    overflow: hidden;
    background: var(--mn-bg);
    border: 1px solid var(--mn-border);
    border-left: 3px solid var(--mn-accent);
    border-radius: 14px;
    padding: 22px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

/* Halo d'ambiance */
.oc-menace-nationale::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 90% 10%, var(--mn-accent), transparent);
    opacity: 0.05;
    pointer-events: none;
}

/* ── EN-TÊTE ─────────────────────────────────────── */

.oc-mn__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.oc-mn__header-left {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.oc-mn__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    flex-wrap: wrap;
}

/* Puce animée */
.oc-mn__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mn-accent);
    flex-shrink: 0;
    animation: mn-pulse 2.2s ease-in-out infinite;
}

@keyframes mn-pulse {
    0%,100% { box-shadow: 0 0 0 0 var(--mn-accent); opacity:1; }
    60%      { box-shadow: 0 0 0 7px transparent;    opacity:.6; }
}

/* Pill "Évaluation éditoriale" */
.oc-mn__pill-editorial {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: #94a3b8;
    font-size: 0.58rem;
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Grand label du niveau */
.oc-mn__big-label {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--mn-accent);
    line-height: 1;
    letter-spacing: 0.04em;
}

.oc-mn__desc {
    font-size: 0.78rem;
    color: #64748b;
}

/* Badge numérique /4 */
.oc-mn__score-badge {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--mn-accent);
    line-height: 1;
    flex-shrink: 0;
    text-align: right;
}

.oc-mn__score-max {
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
    margin-left: 2px;
}

/* ── ÉTAPES ──────────────────────────────────────── */

.oc-mn__steps-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.oc-mn__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
}

/* Ligne de connexion */
.oc-mn__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 6px;
    left: calc(50% + 7px);
    right: calc(-50% + 7px);
    height: 2px;
    background: rgba(100,116,139,.2);
    border-radius: 1px;
}

.oc-mn__step--past::after,
.oc-mn__step--active::after {
    background: var(--mn-accent);
    opacity: 0.45;
}

.oc-mn__step-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(100,116,139,.3);
    background: transparent;
    position: relative;
    z-index: 1;
    transition: all .3s;
}

.oc-mn__step--past .oc-mn__step-dot {
    background: var(--mn-accent);
    border-color: var(--mn-accent);
    opacity: .5;
}

.oc-mn__step--active .oc-mn__step-dot {
    background: var(--mn-accent);
    border-color: var(--mn-accent);
    transform: scale(1.3);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mn-accent) 20%, transparent);
}

.oc-mn__step-lbl {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    white-space: nowrap;
}

.oc-mn__step--active .oc-mn__step-lbl {
    color: var(--mn-accent);
    font-weight: 800;
}

/* ── BARRE DE PROGRESSION ────────────────────────── */

.oc-mn__bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oc-mn__bar-track {
    width: 100%;
    height: 5px;
    background: rgba(100,116,139,.14);
    border-radius: 99px;
    overflow: visible;
    position: relative;
}

.oc-mn__bar-fill {
    height: 100%;
    width: var(--mn-pct);
    background: linear-gradient(90deg, rgba(100,116,139,.25), var(--mn-accent));
    border-radius: 99px;
    transition: width 1.5s cubic-bezier(.4,0,.2,1);
    position: relative;
}

/* Tip pulsant à l'extrémité */
.oc-mn__bar-fill::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mn-accent);
    box-shadow: 0 0 0 0 var(--mn-accent);
    animation: mn-gauge-pulse 1.8s ease-out infinite;
}

@keyframes mn-gauge-pulse {
    0%   { box-shadow: 0 0 0 0 var(--mn-accent); opacity: 1; }
    60%  { box-shadow: 0 0 0 7px transparent;    opacity: 0.7; }
    100% { box-shadow: 0 0 0 0 transparent;       opacity: 1; }
}

.oc-mn__bar-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    font-weight: 500;
    color: #334155;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── NOTE CONTEXTUELLE ───────────────────────────── */

.oc-mn__note {
    font-size: 0.79rem;
    color: #64748b;
    line-height: 1.65;
    padding: 11px 14px;
    background: rgba(100,116,139,.06);
    border-left: 3px solid var(--mn-accent);
    border-radius: 6px;
}

/* ── PIED DE BANDEAU ─────────────────────────────── */

.oc-mn__footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
    border-top: 1px solid rgba(100,116,139,.12);
    font-size: 0.73rem;
    color: #475569;
    font-weight: 500;
}

.oc-mn__footer-line1 {
    color: #475569;
}

.oc-mn__footer-line2 {
    color: #475569;
}

.oc-mn__footer-line3 {
    color: #64748b;
    font-weight: 700;
    font-size: 0.68rem;
}

.oc-mn__footer-left {
    color: #475569;
    line-height: 1.5;
}

.oc-mn__footer-left strong {
    color: #94a3b8;
}

.oc-mn__footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.oc-mn__source {
    font-style: italic;
    color: #475569;
    font-size: 0.67rem;
}

.oc-mn__date {
    font-weight: 700;
    color: #64748b;
    font-size: 0.68rem;
}

/* ── RESPONSIVE ──────────────────────────────────── */

@media (max-width: 580px) {
    .oc-menace-nationale { padding: 16px 14px 12px; gap: 13px; }
    .oc-mn__big-label    { font-size: 1.3rem; }
    .oc-mn__score-badge  { font-size: 1.5rem; }
    .oc-mn__step-lbl     { font-size: 0.5rem; }
    .oc-mn__pill-editorial { display: none; }
    .oc-mn__footer       { flex-direction: column; }
    .oc-mn__footer-right { align-items: flex-start; }
}

.oc-alerte-nationale { padding: 18px 16px 14px; }
    .oc-alerte__label { font-size: 1.3rem; }
    .oc-alerte__badge { font-size: 1.5rem; }
}


/* ======================================================
   BLOC "À SURVEILLER" — Ticker salle des marchés
====================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Barlow+Condensed:wght@700;800&display=swap');

.oc-surveiller {
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
}

/* ── BANDE TICKER ── */

.oc-surveiller__header-bar {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #1e1e1e;
}

.oc-surveiller__source {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #0a0a0a;
    background: #e63030;
    padding: 7px 14px;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}

.oc-surveiller__ticker-wrap {
    flex: 1;
    overflow: hidden;
    padding: 7px 0;
    position: relative;
}
.oc-surveiller__ticker-wrap::before,
.oc-surveiller__ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 30px;
    z-index: 2;
    pointer-events: none;
}
.oc-surveiller__ticker-wrap::before { left: 0;  background: linear-gradient(to right, #0a0a0a, transparent); }
.oc-surveiller__ticker-wrap::after  { right: 0; background: linear-gradient(to left,  #0a0a0a, transparent); }

.oc-surveiller__ticker {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: oc-ticker-scroll 28s linear infinite;
}
.oc-surveiller__ticker:hover { animation-play-state: paused; }

@keyframes oc-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.oc-surveiller__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 28px 0 0;
    white-space: nowrap;
}

.oc-surveiller__dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.oc-surveiller__dot.red   { background: #e63030; }
.oc-surveiller__dot.amber { background: #ffb400; }
.oc-surveiller__dot.green { background: #2ec27e; }

.oc-surveiller__item-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #888;
    letter-spacing: 0.03em;
}
.oc-surveiller__item-text strong { color: #e0ddd8; font-weight: 600; }

.oc-surveiller__sep {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #2a2a2a;
    padding-right: 28px;
    flex-shrink: 0;
}

/* ── CORPS ── */

.oc-surveiller__body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.oc-surveiller__left {
    padding: 24px 28px;
    border-right: 1px solid #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.oc-surveiller__num {
    font-family: 'DM Serif Display', 'Georgia', serif;
    font-size: 48px;
    font-style: italic;
    line-height: 1;
}
.oc-surveiller__num-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: #3a3a3a;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
}

.oc-surveiller__center {
    padding: 24px 32px;
    min-width: 0;
}

.oc-surveiller__eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    color: #e63030;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.oc-surveiller__eyebrow::before {
    content: '';
    width: 18px; height: 1px;
    background: #e63030;
    flex-shrink: 0;
}

.oc-surveiller__title {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #f0ede8;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 8px;
}

.oc-surveiller__desc {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    max-width: 420px;
}

.oc-surveiller__right {
    padding: 24px 28px;
    border-left: 1px solid #1a1a1a;
    flex-shrink: 0;
    text-align: right;
}

.oc-surveiller__stat-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
}
.oc-surveiller__stat-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: #3a3a3a;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── RESPONSIVE ── */

@media (max-width: 640px) {
    .oc-surveiller__body {
        grid-template-columns: 1fr;
    }
    .oc-surveiller__left {
        border-right: none;
        border-bottom: 1px solid #1a1a1a;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 16px 20px;
    }
    .oc-surveiller__num { font-size: 32px; }
    .oc-surveiller__center { padding: 16px 20px; }
    .oc-surveiller__right {
        border-left: none;
        border-top: 1px solid #1a1a1a;
        padding: 16px 20px;
        text-align: left;
    }
}

/* ── SPARKLINE + NAV prev/next ── */

.oc-surveiller__spark {
    width: 80px;
    height: 30px;
    display: block;
    margin: 8px 0 4px auto;
}

.oc-surveiller__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 6px;
}

.oc-surveiller__nav-btn {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #888;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
    line-height: 1;
}
.oc-surveiller__nav-btn:hover {
    background: #2a2a2a;
    color: #e0ddd8;
    border-color: #3a3a3a;
}

.oc-surveiller__nav-counter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #3a3a3a;
    letter-spacing: 0.06em;
    min-width: 32px;
    text-align: center;
}

/* ======================================================
   CARTE — BULLES SIGNAL ANIMÉES
====================================================== */

.oc-signal-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Anneaux pulsants */
.oc-signal-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--c), 0.7);
    width: var(--s);
    height: var(--s);
    animation: oc-signal-pulse 2.4s ease-out infinite;
    animation-delay: var(--d);
    pointer-events: none;
}

.oc-signal-ring--1 { animation-delay: calc(var(--d) + 0s); }
.oc-signal-ring--2 { animation-delay: calc(var(--d) + 0.7s); }
.oc-signal-ring--3 { animation-delay: calc(var(--d) + 1.4s); }

@keyframes oc-signal-pulse {
    0%   { transform: scale(0.4); opacity: 0.9; }
    80%  { transform: scale(2.6); opacity: 0;   }
    100% { transform: scale(2.6); opacity: 0;   }
}

/* Point central */
.oc-signal-core {
    position: absolute;
    border-radius: 50%;
    background: rgba(var(--c), 1);
    box-shadow: 0 0 10px 3px rgba(var(--c), 0.5),
                0 0 20px 6px rgba(var(--c), 0.2);
    z-index: 10;
}

/* ======================================================
   BLOC EXPORT — CSV / PDF
====================================================== */

.oc-export-bloc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 18px;
    margin: 16px 0;
}

.oc-export-bloc__info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #64748b;
}

.oc-export-bloc__info svg { color: #94a3b8; flex-shrink: 0; }
.oc-export-bloc__info em  { font-style: normal; color: #334155; font-weight: 600; }

.oc-export-bloc__btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.oc-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
    letter-spacing: 0.01em;
}

.oc-export-btn--csv {
    background: #fff;
    color: #16a34a;
    border: 1.5px solid #bbf7d0;
}
.oc-export-btn--csv:hover {
    background: #f0fdf4;
    border-color: #4ade80;
    color: #15803d;
}

.oc-export-btn--pdf {
    background: #0a3d62;
    color: #fff;
    border: 1.5px solid #0a3d62;
}
.oc-export-btn--pdf:hover {
    background: #0c4a77;
    border-color: #0c4a77;
}
.oc-export-btn--annuel {
    background: #fff;
    color: #0a3d62;
    border: 1.5px solid #0a3d62;
}
.oc-export-btn--annuel:hover {
    background: #f0f6ff;
}

/* Dark mode */
.oc-dark .oc-export-bloc {
    background: #1e293b;
    border-color: #334155;
}
.oc-dark .oc-export-bloc__info { color: #94a3b8; }
.oc-dark .oc-export-bloc__info em { color: #e2e8f0; }
.oc-dark .oc-export-btn--csv {
    background: #0f2417;
    border-color: #166534;
    color: #4ade80;
}


/* ======================================================
   SECTION PARTENAIRES
====================================================== */

.oc-partenaires {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ── En-tête ── */
.oc-partenaires__header {
    text-align: center;
}
.oc-partenaires__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 8px;
}
.oc-partenaires__title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}
.oc-partenaires__sub {
    font-size: 0.87rem;
    color: #64748b;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

/* ── Groupe par catégorie ── */
.oc-partenaires__groupe {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.oc-partenaires__groupe-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* ── Grille de cards ── */
.oc-partenaires__grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

/* ── Card partenaire ── */
.oc-partenaire-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    position: relative;
}
a.oc-partenaire-card:hover {
    border-color: #94a3b8;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    transform: translateY(-2px);
}

.oc-partenaire-card__logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.oc-partenaire-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}
.oc-partenaire-card__initiales {
    font-size: 0.85rem;
    font-weight: 800;
    color: #334155;
    letter-spacing: -.01em;
}

.oc-partenaire-card__body {
    flex: 1;
    min-width: 0;
}
.oc-partenaire-card__name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oc-partenaire-card__desc {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-partenaire-card__arrow {
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color .2s, transform .2s;
}
a.oc-partenaire-card:hover .oc-partenaire-card__arrow {
    color: #475569;
    transform: translate(2px, -2px);
}

/* Responsive */
@media (max-width: 640px) {
    .oc-partenaires__grille {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   COMPARAISON ANNUELLE
====================================================== */

.oc-comp-annuelle {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--oc-card-bg, #fff);
    border: 1px solid var(--oc-border, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
}

/* ── En-tête ── */
.oc-comp-annuelle__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px 18px;
    border-bottom: 1px solid var(--oc-border, #e2e8f0);
    gap: 24px;
    flex-wrap: wrap;
}

.oc-comp-annuelle__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--oc-text, #0f172a);
    margin: 0 0 4px;
}
.oc-comp-annuelle__sub {
    font-size: 0.75rem;
    color: var(--oc-text-muted, #94a3b8);
    margin: 0;
}

/* ── KPIs ── */
.oc-comp-annuelle__kpis {
    display: flex;
    align-items: center;
    gap: 4px;
}

.oc-comp-kpi {
    text-align: center;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--oc-bg-light, #f8fafc);
    border: 1px solid var(--oc-border, #e2e8f0);
    min-width: 64px;
}
.oc-comp-kpi__val {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--oc-text, #0f172a);
    letter-spacing: -.02em;
    line-height: 1;
}
.oc-comp-kpi__lbl {
    font-size: 0.58rem;
    color: var(--oc-text-muted, #94a3b8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 3px;
}

/* KPI delta coloré */
.oc-comp-kpi--delta { border-width: 1.5px; }
.oc-comp-kpi--delta.hausse .oc-comp-kpi__val { color: #dc2626; }
.oc-comp-kpi--delta.baisse .oc-comp-kpi__val { color: #16a34a; }

/* KPI année en cours */
.oc-comp-kpi--current {
    background: rgba(30,129,176,0.06);
    border-color: rgba(30,129,176,0.3);
}
.oc-comp-kpi--current .oc-comp-kpi__val { color: #1e81b0; }

/* Séparateur entre KPIs */
.oc-comp-annuelle__kpis .oc-comp-kpi:not(:last-child)::after {
    display: none;
}

/* ── Graph ── */
.oc-comp-annuelle .oc-graph-block {
    padding: 20px 24px;
    margin: 0;
    border: none;
    border-radius: 0;
}

/* ── Footer ── */
.oc-comp-annuelle__footer {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 12px 28px;
    border-top: 1px solid var(--oc-border, #e2e8f0);
    font-size: 0.75rem;
    color: var(--oc-text-muted, #94a3b8);
    background: var(--oc-bg-light, #f8fafc);
}
.oc-comp-annuelle__footer strong {
    color: var(--oc-text, #475569);
}

/* Dark mode */
.dark-mode .oc-comp-annuelle {
    background: #0f172a;
    border-color: #1e2a3a;
}
.dark-mode .oc-comp-annuelle__header,
.dark-mode .oc-comp-annuelle__footer {
    border-color: #1e2a3a;
}
.dark-mode .oc-comp-kpi {
    background: #0a0e1a;
    border-color: #1e2a3a;
}
.dark-mode .oc-comp-kpi__val { color: #e2e8f0; }
.dark-mode .oc-comp-annuelle__footer { background: #0a0e1a; }

@media (max-width: 640px) {
    .oc-comp-annuelle__header { flex-direction: column; align-items: flex-start; }
    .oc-comp-annuelle__kpis   { width: 100%; justify-content: space-between; }
    .oc-comp-kpi              { flex: 1; }
    .oc-comp-annuelle__footer { flex-direction: column; gap: 6px; text-align: center; }
}

/* ======================================================
   STATS GLOBALES — [stats_globales]
====================================================== */

.oc-stats-globales {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ── En-tête ── */
.oc-sg__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.oc-sg__header-left {}
.oc-sg__eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 3px;
}
.oc-sg__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.02em;
    margin: 0;
}
.oc-sg__sub {
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
    text-align: right;
    max-width: 320px;
}

/* ── Onglets ── */
.oc-sg__tabs {
    display: flex;
    gap: 6px;
    border-bottom: 2px solid #f1f5f9;
    flex-wrap: wrap;
}
.oc-sg__tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    border-radius: 6px 6px 0 0;
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap;
}
.oc-sg__tab:hover { color: #475569; background: #f8fafc; }
.oc-sg__tab.is-active {
    color: var(--tab-c);
    border-bottom-color: var(--tab-c);
    background: #f8fafc;
}
.oc-sg__tab-icon { width: 16px; height: 16px; display: flex; }
.oc-sg__tab-icon svg { width: 16px; height: 16px; stroke: currentColor; }
.oc-sg__tab-count {
    font-size: 0.65rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 99px;
    padding: 1px 7px;
    transition: background .15s, color .15s;
}
.oc-sg__tab.is-active .oc-sg__tab-count {
    background: var(--tab-c);
    color: #fff;
}

/* ── Panneaux ── */
.oc-sg__panel { display: none; padding-top: 16px; }
.oc-sg__panel.is-active { display: block; }

/* ── Grille de cards ── */
.oc-sg__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* ── Card stat ── */
.oc-sg-card {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid var(--sg-c);
    border-radius: 10px;
    padding: 16px 18px 14px;
    transition: box-shadow .2s, transform .2s;
    cursor: default;
}
.oc-sg-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    transform: translateY(-2px);
}

.oc-sg-card__perimetre {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 10px;
}

.oc-sg-card__valeur {
    font-size: 2rem;
    font-weight: 800;
    color: var(--sg-c);
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.oc-sg-card__unite {
    font-size: 1rem;
    font-weight: 700;
    margin-left: 2px;
    opacity: .85;
}

.oc-sg-card__titre {
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.4;
    margin-bottom: 12px;
}

.oc-sg-card__source-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    color: #94a3b8;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oc-sg-card__source-btn svg { flex-shrink: 0; opacity: .6; }

/* ── Tooltip au survol ── */
.oc-sg-card__tooltip {
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 9999;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.15));
    transition: opacity .18s, transform .18s, visibility .18s;
}
.oc-sg-card:hover .oc-sg-card__tooltip {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.oc-sg-card__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #0f172a;
}
.oc-sg-card__tooltip-inner {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.75rem;
    line-height: 1.6;
    width: 240px;
    white-space: normal;
}
.oc-sg-card__tooltip-inner strong { color: #fff; display: block; margin-bottom: 4px; }
.oc-sg-card__tooltip-inner a {
    color: #60a5fa;
    text-decoration: none;
    display: block;
    margin-top: 8px;
    font-weight: 600;
}
.oc-sg-card__tooltip-inner a:hover { text-decoration: underline; }

/* ── Footer disclaimer ── */
.oc-sg__footer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.5;
}
.oc-sg__footer svg { flex-shrink: 0; margin-top: 2px; opacity: .6; }

/* ── Card Cameroun — mise en avant ── */
.oc-sg-card--cameroun {
    border-color: #d4af37;
    border-top-color: #d4af37;
    background: linear-gradient(135deg, #fffdf0 0%, #fff 60%);
}
.oc-sg-card--cameroun::before {
    content: '🇨🇲 Cameroun';
    position: absolute;
    top: -1px;
    right: 10px;
    background: #d4af37;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 0 0 6px 6px;
}
.oc-sg-card--cameroun .oc-sg-card__perimetre { color: #b8860b; }

/* Dark mode */
.dark-mode .oc-sg__title  { color: #f0f4f8; }
.dark-mode .oc-sg__section-head { border-color: #1e2a3a; }
.dark-mode .oc-sg-card {
    background: #0f172a;
    border-color: #1e2a3a;
}
.dark-mode .oc-sg-card__titre { color: #94a3b8; }
.dark-mode .oc-sg__footer {
    background: #0a0e1a;
    border-color: #1e2a3a;
}

@media (max-width: 640px) {
    .oc-sg__grid { grid-template-columns: 1fr 1fr; }
    .oc-sg-card__valeur { font-size: 1.6rem; }
    .oc-sg-card__tooltip { left: 0; transform: none; }
}

/* ======================================================
   SENSIBILISATION — [sensibilisation]
   Onglets ≥900px / Accordéon <900px
====================================================== */

.oc-sens {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── En-tête ── */
.oc-sens__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.oc-sens__eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 3px;
}
.oc-sens__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.02em;
    margin: 0;
}
.oc-sens__sub {
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
    max-width: 320px;
    text-align: right;
}

/* ======================================
   ONGLETS — desktop ≥900px
====================================== */
.oc-sens__accordion { display: none; }
.oc-sens__tabs-wrap  { display: block; }

.oc-sens__tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #f1f5f9;
    overflow-x: auto;
    scrollbar-width: none;
}
.oc-sens__tab-nav::-webkit-scrollbar { display: none; }

.oc-sens__tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
    font-family: inherit;
}
.oc-sens__tab-btn:hover { color: #334155; background: #f8fafc; }
.oc-sens__tab-btn.is-active {
    color: var(--sc);
    border-bottom-color: var(--sc);
    background: #f8fafc;
}
.oc-sens__tab-emoji { font-size: 1rem; }

/* Panneau */
.oc-sens__tab-panel { display: none; }
.oc-sens__tab-panel.is-active { display: block; }

.oc-sens__panel-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding: 28px 24px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 12px 12px;
}

.oc-sens__risque-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #475569;
    margin-bottom: 16px;
}
.oc-sens__risque-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: oc-sens-pulse 2s ease-out infinite;
}
@keyframes oc-sens-pulse {
    0%   { box-shadow: 0 0 0 0 currentColor; }
    60%  { box-shadow: 0 0 0 5px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.oc-sens__panel-icon {
    font-size: 2.2rem;
    margin-bottom: 10px;
    line-height: 1;
}
.oc-sens__panel-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
    letter-spacing: -.01em;
}
.oc-sens__panel-desc {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.7;
}

.oc-sens__tips-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #94a3b8;
    margin-bottom: 14px;
}
.oc-sens__tips {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.oc-sens__tips li {
    font-size: 0.8rem;
    color: #374151;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid var(--sc);
    line-height: 1.5;
}

/* ======================================
   ACCORDÉON — mobile <900px
====================================== */
@media (max-width: 899px) {
    .oc-sens__tabs-wrap  { display: none; }
    .oc-sens__accordion  { display: flex; flex-direction: column; gap: 8px; }
    .oc-sens__sub { text-align: left; max-width: 100%; }
}

.oc-sens__acc-item {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s;
}
.oc-sens__acc-item.is-open { border-color: var(--sc); }

.oc-sens__acc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.oc-sens__acc-emoji { font-size: 1.2rem; flex-shrink: 0; }
.oc-sens__acc-title {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}
.oc-sens__acc-risk {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.oc-sens__acc-chevron {
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform .25s, color .2s;
}
.oc-sens__acc-item.is-open .oc-sens__acc-chevron {
    transform: rotate(180deg);
    color: var(--sc);
}

.oc-sens__acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(0.4,0,0.2,1);
}
.oc-sens__acc-item.is-open .oc-sens__acc-body { max-height: 600px; }

.oc-sens__acc-content {
    padding: 0 18px 18px;
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
}
.oc-sens__acc-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 14px;
}
.oc-sens__tips--acc li { font-size: 0.78rem; }

/* ── Bandeau sensibilisation ── */
.oc-sens__banner {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    padding: 24px 28px;
    background: #0f172a;
    border-left: 4px solid #1e81b0;
}
.oc-sens__banner-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 50%, rgba(30,129,176,.18) 0%, transparent 60%),
        radial-gradient(ellipse at 10% 80%, rgba(124,58,237,.10) 0%, transparent 50%);
    pointer-events: none;
}
.oc-sens__banner-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.oc-sens__banner .oc-sens__eyebrow {
    color: #1e81b0;
    margin-bottom: 6px;
    font-size: 0.65rem;
    letter-spacing: .16em;
}
.oc-sens__banner .oc-sens__title {
    color: #f0f4f8;
    font-size: 1.4rem;
    margin-bottom: 8px;
}
.oc-sens__banner .oc-sens__sub {
    color: #94a3b8;
    font-size: 0.8rem;
    line-height: 1.6;
    text-align: left;
    max-width: 100%;
    margin: 0;
}
.oc-sens__banner-right { flex-shrink: 0; color: #fff; }

/* ======================================================
   FORMATIONS OBS-CC — [formations_obs]
====================================================== */
.oc-form { display: flex; flex-direction: column; gap: 24px; }

/* ── Bandeau ── */
.oc-form__banner {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    padding: 24px 28px;
    background: #0f172a;
    border-left: 4px solid #1e81b0;
}
.oc-form__banner-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 80% 50%, rgba(30,129,176,.22) 0%, transparent 60%),
        radial-gradient(ellipse at 10% 80%, rgba(30,129,176,.08) 0%, transparent 50%);
    pointer-events: none;
}
.oc-form__banner-content {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.oc-form__eyebrow {
    font-size: 0.65rem; font-weight: 700; color: #1e81b0;
    text-transform: uppercase; letter-spacing: .16em; margin-bottom: 6px;
}
.oc-form__title {
    font-size: 1.4rem; font-weight: 800; color: #f0f4f8;
    letter-spacing: -.02em; margin: 0 0 8px;
}
.oc-form__sub { font-size: 0.8rem; color: #94a3b8; line-height: 1.6; margin: 0; }
.oc-form__banner-icon { flex-shrink: 0; color: #fff; opacity: .2; }

/* ── Onglets ── */
.oc-form__tabs {
    display: flex; gap: 6px;
    border-bottom: 2px solid #f1f5f9;
}
.oc-form__tab {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: none; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    cursor: pointer; font-family: inherit;
    font-size: 0.82rem; font-weight: 600; color: #94a3b8;
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap;
}
.oc-form__tab:hover { color: #334155; background: #f8fafc; }
.oc-form__tab.is-active { color: var(--fc); border-bottom-color: var(--fc); background: #f8fafc; }
.oc-form__tab-count {
    font-size: 0.65rem; font-weight: 700;
    background: #f1f5f9; color: #64748b;
    border-radius: 99px; padding: 1px 7px;
    transition: background .15s, color .15s;
}
.oc-form__tab.is-active .oc-form__tab-count { background: var(--fc); color: #fff; }

/* ── Panneaux ── */
.oc-form__panel { display: none; }
.oc-form__panel.is-active { display: block; }

/* ── Notice webinaire ── */
.oc-form__notice {
    display: flex; align-items: flex-start; gap: 8px;
    background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 8px; padding: 12px 16px;
    font-size: 0.78rem; color: #1e40af; line-height: 1.5;
    margin-bottom: 16px;
}
.oc-form__notice svg { flex-shrink: 0; margin-top: 2px; }

/* ── Grille ── */
.oc-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    overflow: hidden;
    min-width: 0;
}

/* ── Card ── */
.oc-form-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 12px;
    transition: box-shadow .2s, transform .2s;
    overflow: hidden;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}
.oc-form-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
.oc-form-card--web { border-top: 3px solid #1e81b0; }
.oc-form-card--pay { border-top: 3px solid #7c3aed; }

.oc-form-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

.oc-form-card__niveau {
    font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    padding: 3px 9px; border-radius: 99px;
}
.oc-form-card__statut {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.65rem; font-weight: 700;
    padding: 3px 9px; border-radius: 99px;
}
.oc-form-card__dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    animation: oc-dot-pulse 2s ease-out infinite;
}
@keyframes oc-dot-pulse {
    0%   { box-shadow: 0 0 0 0 currentColor; }
    60%  { box-shadow: 0 0 0 4px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.oc-form-card__gratuit {
    display: inline-block;
    font-size: 0.62rem; font-weight: 800;
    letter-spacing: .1em; color: #16a34a;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    padding: 2px 10px; border-radius: 4px;
    align-self: flex-start;
}
.oc-form-card__prix {
    font-size: 1rem; font-weight: 800; color: #7c3aed;
    letter-spacing: -.01em;
}

.oc-form-card__titre {
    font-size: 0.95rem; font-weight: 700; color: #0f172a;
    line-height: 1.35; margin: 0;
}
.oc-form-card__desc {
    font-size: 0.78rem; color: #64748b; line-height: 1.6; margin: 0;
}

.oc-form-card__meta {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: 0.7rem; color: #64748b;
}

/* ── Barre de quota ── */
.oc-form-card__quota { display: flex; flex-direction: column; gap: 5px; }
.oc-form-card__quota-bar {
    height: 5px; background: #f1f5f9; border-radius: 99px; overflow: hidden;
}
.oc-form-card__quota-fill {
    height: 100%; border-radius: 99px;
    transition: width .4s ease;
}
.oc-form-card__quota-txt { font-size: 0.68rem; color: #64748b; }

/* Micro-bloc encourageant (affiché à la place du compteur quand inscrits < seuil
   et statut = ouvert). Transforme l'absence de chiffre en signal positif. */
.oc-form-card__early {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    background: #eff6ff;
    color: #0a3d62;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
}
.oc-form-card__early svg {
    color: #1e81b0;
    flex-shrink: 0;
}

/* ── Bouton inscription ── */
.oc-form-card__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 7px 13px; border-radius: 7px;
    font-size: 0.74rem; font-weight: 700;
    text-decoration: none; border: none; cursor: pointer;
    font-family: inherit;
    transition: opacity .2s, transform .15s;
    white-space: nowrap;
}
.oc-form-card__btn:hover { opacity: .88; transform: translateY(-1px); }
.oc-form-card__btn--web { background: #1e81b0; color: #fff; }
.oc-form-card__btn--pay { background: #1e81b0; color: #fff; }
.oc-form-card__btn--disabled {
    background: #f1f5f9; color: #94a3b8;
    cursor: not-allowed;
    padding: 7px 13px;
    font-size: 0.74rem; font-weight: 700;
    border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Dark mode */
.dark-mode .oc-form-card { background: #0f172a; border-color: #1e2a3a; }
.dark-mode .oc-form-card__titre { color: #f0f4f8; }

@media (max-width: 640px) {
    .oc-form__grid { grid-template-columns: 1fr; }
    .oc-form__tab { padding: 10px 12px; font-size: 0.75rem; }
}

/* ── Boutons actions formation payante ── */
.oc-form-card__actions {
    display: flex; gap: 8px; margin-top: auto;
    flex-wrap: nowrap; align-items: center;
}
.oc-form-card__btn--pay {
    flex: 1;
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
}
.oc-form-card__btn--prog {
    flex: 0 0 auto;
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    background: #f1f5f9;
    color: #334155;
    border: 1.5px solid #e2e8f0;
}
.oc-form-card__btn--prog:hover { background: #e2e8f0; }

/* ── Popup contact formation ── */
.oc-form-popup {
    position: fixed; inset: 0; z-index: 99999;
    display: none; align-items: center; justify-content: center;
    padding: 16px;
}
.oc-form-popup__overlay {
    position: absolute; inset: 0;
    background: rgba(15,23,42,.6);
    backdrop-filter: blur(4px);
}
.oc-form-popup__box {
    position: relative; z-index: 1;
    background: #fff; border-radius: 16px;
    padding: 28px 32px;
    width: 100%; max-width: 560px;
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
    max-height: 90vh; overflow-y: auto;
}
.oc-form-popup__close {
    position: absolute; top: 16px; right: 16px;
    background: #f1f5f9; border: none; border-radius: 50%;
    width: 32px; height: 32px;
    cursor: pointer; font-size: 0.85rem; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.oc-form-popup__close:hover { background: #e2e8f0; }
.oc-form-popup__header {
    display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px;
}
.oc-form-popup__icon { font-size: 1.8rem; line-height: 1; }
.oc-form-popup__eyebrow {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: #1e81b0; margin-bottom: 4px;
}
.oc-form-popup__title {
    font-size: 1rem; font-weight: 700; color: #0f172a;
    line-height: 1.3; margin: 0;
}
.oc-form-popup__form { display: flex; flex-direction: column; gap: 14px; }
.oc-form-popup__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.oc-form-popup__form label {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 0.75rem; font-weight: 600; color: #475569;
}
.oc-form-popup__form label span { color: #e63030; }
.oc-form-popup__form input,
.oc-form-popup__form textarea {
    padding: 9px 12px; border: 1.5px solid #e2e8f0;
    border-radius: 8px; font-size: 0.82rem; font-family: inherit;
    color: #0f172a; background: #f8fafc;
    transition: border-color .15s;
    outline: none;
}
.oc-form-popup__form input:focus,
.oc-form-popup__form textarea:focus { border-color: #1e81b0; background: #fff; }
.oc-form-popup__form textarea { resize: vertical; min-height: 80px; }
.oc-form-popup__submit {
    background: #1e81b0; color: #fff;
    border: none; border-radius: 8px;
    padding: 12px 20px; font-size: 0.85rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: opacity .2s; margin-top: 4px;
}
.oc-form-popup__submit:hover { opacity: .88; }
.oc-form-popup__feedback {
    padding: 10px 14px; border-radius: 8px;
    font-size: 0.8rem; font-weight: 600;
}
.oc-form-popup__feedback--ok { background: #f0fdf4; color: #16a34a; }
.oc-form-popup__feedback--err { background: #fff1f1; color: #e63030; }

@media (max-width: 540px) {
    .oc-form-popup__row { grid-template-columns: 1fr; }
    .oc-form-popup__box { padding: 20px 18px; }
}

/* ======================================================
   POPUPS FORMATIONS — .oc-fp
   Attachés au <body>, position:fixed garanti
====================================================== */
.oc-fp {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.oc-fp.is-open {
    display: flex !important;
}

.oc-fp__bg {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.65);
    backdrop-filter: blur(5px);
    cursor: pointer;
}
.oc-fp__box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    padding: 28px 32px;
    width: 100%;
    max-width: 540px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 28px 70px rgba(0,0,0,.22);
    animation: oc-fp-in .2s ease;
}
.oc-fp__box--lg { max-width: 640px; }

@keyframes oc-fp-in {
    from { opacity:0; transform: translateY(16px) scale(.97); }
    to   { opacity:1; transform: translateY(0)   scale(1);   }
}

.oc-fp__x {
    position: absolute; top: 14px; right: 14px;
    width: 30px; height: 30px;
    background: #f1f5f9; border: none; border-radius: 50%;
    cursor: pointer; font-size: .82rem; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.oc-fp__x:hover { background: #e2e8f0; color: #0f172a; }

.oc-fp__hd {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 22px;
}
.oc-fp__ico { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.oc-fp__ey {
    font-size: .62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: #1e81b0; margin-bottom: 3px;
}
.oc-fp__ttl {
    font-size: .95rem; font-weight: 700; color: #0f172a;
    line-height: 1.3; margin: 0;
}

/* ── Formulaire contact ── */
.oc-fp__box form {
    display: flex; flex-direction: column; gap: 12px;
}
.oc-fp__row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.oc-fp__box label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: .73rem; font-weight: 600; color: #475569;
}
.oc-fp__box label em { color: #e63030; font-style: normal; }
.oc-fp__box input,
.oc-fp__box textarea {
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    font-size: .82rem; font-family: inherit; color: #0f172a;
    background: #f8fafc; outline: none;
    transition: border-color .15s;
}
.oc-fp__box input:focus,
.oc-fp__box textarea:focus { border-color: #1e81b0; background: #fff; }
.oc-fp__box textarea { resize: vertical; min-height: 80px; }

.oc-fp__sub {
    background: #1e81b0; color: #fff;
    border: none; border-radius: 8px;
    padding: 11px 20px; font-size: .85rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: opacity .2s; margin-top: 4px;
}
.oc-fp__sub:hover { opacity: .88; }

.oc-fp__fb {
    padding: 10px 14px; border-radius: 8px;
    font-size: .8rem; font-weight: 600;
}
.oc-fp__fb--ok { background: #f0fdf4; color: #16a34a; }
.oc-fp__fb--err { background: #fff1f1; color: #e63030; }

/* ── Popup programme ── */
.oc-fp__prog { font-size: .85rem; color: #334155; line-height: 1.75; }
.oc-fp__prog-txt {
    background: #f8fafc;
    border-left: 3px solid #1e81b0;
    padding: 14px 16px;
    border-radius: 0 8px 8px 0;
    white-space: pre-wrap;
}
.oc-fp__prog-empty { color: #94a3b8; font-style: italic; }

.oc-fp__dlbtn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #1e81b0; color: #fff;
    padding: 10px 18px; border-radius: 8px;
    font-size: .82rem; font-weight: 700;
    text-decoration: none;
    transition: opacity .2s;
}
.oc-fp__dlbtn:hover { opacity: .88; color: #fff; }

/* ── Bouton Programme sur la card ── */
.oc-form-card__btn--prog {
    background: #f8fafc;
    color: #334155;
    border: 1.5px solid #e2e8f0;
    font-size: .78rem;
}
.oc-form-card__btn--prog:hover { background: #e2e8f0; }

@media (max-width: 540px) {
    .oc-fp__row { grid-template-columns: 1fr; }
    .oc-fp__box { padding: 20px 16px; }
}

/* ── Info session dans popup inscription webinaire ── */
.oc-fp__wi-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    font-size: .78rem; color: #64748b;
    background: #f8fafc; border-radius: 8px;
    padding: 8px 12px; margin-bottom: 4px;
}
.oc-fp__wi-notice {
    background: #eff6ff;
    border-left: 3px solid #1e81b0;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    font-size: .78rem; color: #1e40af;
    line-height: 1.5;
    margin-top: 4px;
}

/* =====================================================
   BLOC CTA SIGNALEMENT — [cta_signalement]
===================================================== */
.oc-cta-signal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(10,61,98,.08);
    border: 1.5px solid #e2e8f0;
    min-height: 340px;
}

/* ── Colonne gauche ── */
.oc-cta-signal__left {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    background: #fff;
}

.oc-cta-signal__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #1e81b0;
}
.oc-cta-signal__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239,68,68,.4);
    animation: oc-pulse-red 2s infinite;
}
@keyframes oc-pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
    70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

.oc-cta-signal__title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 0;
}

.oc-cta-signal__desc {
    font-size: .82rem;
    color: #64748b;
    line-height: 1.75;
    margin: 0;
}

.oc-cta-signal__features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.oc-cta-signal__feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 600;
    color: #334155;
}
.oc-cta-signal__feat-icon {
    font-size: .95rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.oc-cta-signal__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #e63030;
    color: #fff;
    padding: 13px 24px;
    border-radius: 9px;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
    transition: opacity .2s, transform .15s;
    margin-top: 4px;
}
.oc-cta-signal__btn:hover {
    opacity: .9;
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

/* ── Colonne droite ── */
.oc-cta-signal__right {
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-left: 1.5px solid #e2e8f0;
}
.oc-cta-signal__illus {
    width: 100%;
    max-width: 420px;
}
.oc-cta-signal__svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .oc-cta-signal {
        grid-template-columns: 1fr;
    }
    .oc-cta-signal__right {
        border-left: none;
        border-top: 1.5px solid #e2e8f0;
        padding: 24px 20px;
    }
    .oc-cta-signal__left {
        padding: 28px 24px;
    }
}

/* ── Recommandations fiche incident ── */
.oc-fiche__section--reco {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 10px;
    padding: 16px 20px;
}
.oc-fiche__section-header--reco { color: #15803d !important; }
.oc-fiche__reco-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.oc-fiche__reco-item {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .82rem; color: #166534; line-height: 1.6;
}
.oc-fiche__reco-bullet {
    flex-shrink: 0; width: 20px; height: 20px;
    background: #16a34a; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.oc-fiche__reco-bullet svg { stroke: #fff; }

/* ── Recherche textuelle incidents ── */
.oc-filtres-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 320px;
}
.oc-filtres-search__icon {
    position: absolute; left: 10px;
    color: #94a3b8; pointer-events: none;
}
.oc-filtres-search__input {
    width: 100%;
    padding: 8px 32px 8px 32px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .82rem; color: #0f172a;
    background: #fff; outline: none;
    transition: border-color .2s;
    font-family: inherit;
}
.oc-filtres-search__input:focus {
    border-color: #1e81b0;
    box-shadow: 0 0 0 3px rgba(30,129,176,.1);
}
.oc-filtres-search__input::placeholder { color: #94a3b8; }
.oc-filtres-search__clear {
    position: absolute; right: 9px;
    background: none; border: none;
    color: #94a3b8; cursor: pointer;
    font-size: .9rem; padding: 2px 4px;
    line-height: 1; border-radius: 4px;
    transition: color .15s;
}
.oc-filtres-search__clear:hover { color: #e63030; }

/* ── Colonnes triables ── */
.oc-th-sort a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    transition: color .15s;
}
.oc-th-sort a:hover { color: #1e81b0; text-decoration: none; }
.oc-th-sort--on a   { color: #1e81b0; }

.oc-th-arr {
    font-size: .65rem;
    opacity: 0.35;
    transition: opacity .15s;
}
.oc-th-arr--a,
.oc-th-arr--d  { opacity: 1; color: #1e81b0; }
.oc-th-sort a:hover .oc-th-arr--off { opacity: 0.7; }

/* ── Tooltip fiabilité ── */
.oc-fiab-ico {
    font-style: normal;
    font-size: .7em;
    opacity: .6;
    margin-left: 3px;
    cursor: help;
    vertical-align: middle;
}
.oc-fiab--tip {
    position: relative;
    cursor: help;
}
.oc-fiab--tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #f8fafc;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: normal;
    width: 220px;
    text-align: left;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s, transform .18s;
    transform: translateX(-50%) translateY(4px);
    z-index: 999;
}
/* Petite flèche en bas du tooltip */
.oc-fiab--tip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
    opacity: 0;
    transition: opacity .18s;
    pointer-events: none;
    z-index: 999;
}
.oc-fiab--tip:hover::after,
.oc-fiab--tip:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Adapter position si le badge est en bas de tableau */
.oc-fiche__cell .oc-fiab--tip::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
.oc-fiche__cell .oc-fiab--tip::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: #0f172a;
    transform: translateX(-50%);
}
.oc-fiche__cell .oc-fiab--tip:hover::after {
    transform: translateX(-50%) translateY(0);
}

/* =====================================================
   MINI-DASHBOARD PAGE INCIDENTS [incidents_mini_dashboard]
===================================================== */
.oc-inc-dash {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

/* ── Rang 1 : KPI ── */
.oc-inc-dash__row--kpi {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.oc-inc-dash__kpi {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 20px;
    min-width: 110px;
    flex: 1;
    text-align: center;
}
.oc-inc-dash__kpi-val {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
.oc-inc-dash__kpi-lbl {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    margin-top: 4px;
}
.oc-inc-dash__kpi--year .oc-inc-dash__kpi-val { color: #1e81b0; }

.oc-inc-dash__kpi--evol-up {
    background: #fef2f2;
    border-color: #fecaca;
}
.oc-inc-dash__kpi--evol-up .oc-inc-dash__kpi-val { color: #dc2626; font-size: 1.3rem; }
.oc-inc-dash__kpi--evol-up .oc-inc-dash__kpi-lbl { color: #b91c1c; }

.oc-inc-dash__kpi--evol-dn {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.oc-inc-dash__kpi--evol-dn .oc-inc-dash__kpi-val { color: #16a34a; font-size: 1.3rem; }
.oc-inc-dash__kpi--evol-dn .oc-inc-dash__kpi-lbl { color: #15803d; }

/* ── Rang 2 : Barres ── */
.oc-inc-dash__row--bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.oc-inc-dash__panel {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
}
.oc-inc-dash__panel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #64748b;
    margin-bottom: 14px;
}
.oc-inc-dash__bars {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.oc-inc-dash__bar-row {
    display: grid;
    grid-template-columns: 90px 1fr 28px 38px;
    align-items: center;
    gap: 8px;
}
.oc-inc-dash__bar-lbl {
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}
.oc-inc-dash__bar-track {
    background: #f1f5f9;
    border-radius: 99px;
    height: 7px;
    overflow: hidden;
}
.oc-inc-dash__bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .4s ease;
}
.oc-inc-dash__bar-nb {
    font-size: .72rem;
    font-weight: 700;
    color: #334155;
    text-align: right;
}
.oc-inc-dash__bar-pct {
    font-size: .68rem;
    color: #94a3b8;
    text-align: right;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .oc-inc-dash__row--bars { grid-template-columns: 1fr; }
    .oc-inc-dash__bar-row   { grid-template-columns: 80px 1fr 24px 32px; }
}

/* =====================================================
   SCORE DE RISQUE PAR SECTEUR [score_risque_secteurs]
===================================================== */
.oc-risque {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 2px 16px rgba(10,61,98,.05);
}
.oc-risque__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 22px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.oc-risque__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #334155;
}
.oc-risque__legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.oc-risque__leg-item {
    font-size: .68rem;
    font-weight: 600;
}

/* ── Lignes ── */
.oc-risque__list {
    display: flex;
    flex-direction: column;
}
.oc-risque__row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid #f8fafc;
    transition: background .15s;
}
.oc-risque__row:last-child { border-bottom: none; }
.oc-risque__row:hover { background: #f8fafc; }

.oc-risque__rang {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--risque-color, #94a3b8);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    margin-top: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.oc-risque__body { flex: 1; min-width: 0; }

.oc-risque__top-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.oc-risque__nom {
    font-size: .88rem;
    font-weight: 700;
    color: #0f172a;
    flex: 1;
    min-width: 140px;
}
.oc-risque__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.oc-risque__badge {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 3px 10px;
    border-radius: 99px;
}
.oc-risque__score-val {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}
.oc-risque__score-lbl {
    font-size: .65rem;
    font-weight: 600;
    color: #94a3b8;
}

.oc-risque__bar-track {
    height: 7px;
    background: #f1f5f9;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}
.oc-risque__bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .6s ease;
}

.oc-risque__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .68rem;
    color: #64748b;
    align-items: center;
}
.oc-risque__meta-total {
    color: #475569;
    font-weight: 600;
}
.oc-risque__meta-tag {
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
}

.oc-risque__footer {
    padding: 10px 22px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    font-size: .65rem;
    color: #94a3b8;
    font-style: italic;
}

@media (max-width: 600px) {
    .oc-risque__header { flex-direction: column; align-items: flex-start; }
    .oc-risque__legend { gap: 8px; }
}

/* ── Badges tendance mensuelle ── */
.oc-tend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    margin-top: 5px;
    white-space: nowrap;
    letter-spacing: .02em;
}
.oc-tend--up {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}
.oc-tend--dn {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
.oc-tend--stable {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.oc-tend--new {
    background: #eff6ff;
    color: #1e81b0;
    border: 1px solid #bfdbfe;
}
/* Adapter selon fond sombre de la KPI card */
.oc-kpi-content .oc-tend { display: block; width: fit-content; }
/* Mention OBS-CC dans les badges tendance */
.oc-tend em {
    font-style: normal;
    font-weight: 500;
    opacity: 0.65;
    font-size: 0.9em;
}

/* =====================================================
   WIDGET ABONNEMENT EMAIL [oc_abonnement_email]
===================================================== */
.oc-sub {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 560px;
}
.oc-sub__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.oc-sub__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #0a3d62, #1e81b0);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.oc-sub__title {
    font-size: .95rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}
.oc-sub__desc {
    font-size: .78rem;
    color: #64748b;
    line-height: 1.5;
}

/* Formulaire */
.oc-sub__form { display: flex; flex-direction: column; gap: 12px; }
.oc-sub__row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
}
.oc-sub__input {
    padding: 9px 13px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .82rem;
    color: #0f172a;
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
    background: #fff;
}
.oc-sub__input:focus { border-color: #1e81b0; box-shadow: 0 0 0 3px rgba(30,129,176,.1); }
.oc-sub__input::placeholder { color: #94a3b8; }

.oc-sub__filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.oc-sub__filters-lbl {
    font-size: .72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.oc-sub__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    color: #334155;
    cursor: pointer;
}
.oc-sub__check input { accent-color: #1e81b0; width: 14px; height: 14px; }

.oc-sub__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0a3d62;
    color: #fff;
    border: none;
    padding: 11px 22px;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    width: fit-content;
    transition: opacity .2s, transform .15s;
    font-family: inherit;
}
.oc-sub__btn:hover { opacity: .9; transform: translateY(-1px); }

/* Ligne RSS */
.oc-sub__rss-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    font-size: .75rem;
    color: #64748b;
}
.oc-sub__rss-link {
    color: #f26522;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.oc-sub__rss-link:hover { text-decoration: underline; }

/* Messages feedback */
.oc-sub__msg {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 14px;
    line-height: 1.5;
}
.oc-sub__msg--ok   { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.oc-sub__msg--err  { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.oc-sub__msg--info { background: #eff6ff; color: #1e81b0; border: 1px solid #bfdbfe; }

@media (max-width: 540px) {
    .oc-sub__row { grid-template-columns: 1fr; }
    .oc-sub { padding: 18px 16px; }
}

/* =====================================================
   THREAT ACTOR — fiche incident
===================================================== */
.oc-fiche__section--ta {
    background: #0f172a;
    border: none;
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 4px;
}
.oc-fiche__section-header--ta {
    color: #94a3b8;
    border-bottom-color: rgba(255,255,255,.07);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.oc-fiche__section-header--ta svg { opacity: .5; }

.oc-fiche__ta-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.oc-fiche__ta-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.oc-fiche__ta-label {
    font-size: 1.1rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -.01em;
}
.oc-fiche__ta-cat {
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    white-space: nowrap;
}

/* Récurrence */
.oc-fiche__ta-recurrence {
    background: rgba(255,255,255,.05);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.oc-fiche__ta-recurrence-lbl {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
}
.oc-fiche__ta-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.oc-fiche__ta-link-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.07);
    color: #cbd5e1;
    font-size: .73rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
.oc-fiche__ta-link-date {
    color: #475569;
    font-weight: 400;
}

/* =====================================================
   ENTITÉS SECONDAIRES IMPACTÉES (fiche incident)
===================================================== */
.oc-fiche__section--entites {
    /* hérite du style .oc-fiche__section (padding/border-bottom)
       ⇒ pas besoin de surcharge structurelle */
}
.oc-fiche__entites {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.oc-fiche__entite-chip {
    display: inline-block;
    padding: 4px 12px;
    background: #f1f5f9;
    color: #0a3d62;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.oc-dark .oc-fiche__entite-chip {
    background: rgba(255,255,255,.06);
    color: #cbd5e1;
    border-color: rgba(255,255,255,.08);
}

/* =====================================================
   CONTEXTE NATIONAL CYBER [contexte_national_cyber]
===================================================== */
.oc-ctx {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #0a3d62;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 28px;
}

/* En-tête */
.oc-ctx__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 22px;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}
.oc-ctx__eyebrow {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #475569;
    margin-bottom: 3px;
}
.oc-ctx__title {
    font-size: .9rem;
    font-weight: 800;
    color: #0a3d62;
    letter-spacing: -.01em;
}

/* Jauge alerte */
.oc-ctx__alerte {
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 14px;
    min-width: 160px;
    background: #fff;
}
.oc-ctx__alerte-lbl {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #94a3b8;
    margin-bottom: 2px;
}
.oc-ctx__alerte-val {
    font-size: .9rem;
    font-weight: 800;
    margin-bottom: 5px;
}
.oc-ctx__alerte-bar-track {
    height: 4px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}
.oc-ctx__alerte-bar-fill {
    height: 100%;
    border-radius: 99px;
}

/* Grille stats */
.oc-ctx__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #e2e8f0;
    border-top: 1px solid #e2e8f0;
}
.oc-ctx__stat {
    background: #fff;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    transition: background .15s ease;
}
.oc-ctx__stat:hover { background: #f8fafc; }
.oc-ctx__stat:nth-child(3n) { border-right: none; }
.oc-ctx__stat:nth-child(4),
.oc-ctx__stat:nth-child(5),
.oc-ctx__stat:nth-child(6) { border-bottom: none; }

.oc-ctx__stat--accent { background: #fff; }

.oc-ctx__stat-val {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -.02em;
    line-height: 1.1;
}
.oc-ctx__stat--accent .oc-ctx__stat-val { color: #0a3d62; }

.oc-ctx__stat-lbl {
    font-size: .72rem;
    color: #64748b;
    line-height: 1.4;
}
.oc-ctx__stat-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .68rem;
    font-weight: 700;
    color: #dc2626;
    margin-top: 2px;
}
.oc-ctx__stat-delta svg { stroke: #dc2626; }
.oc-ctx__stat-detail {
    font-size: .68rem;
    color: #94a3b8;
    margin-top: 1px;
}
.oc-ctx__stat-src {
    font-size: .6rem;
    font-weight: 600;
    color: #94a3b8;
    margin-top: 3px;
    font-style: normal;
    letter-spacing: .01em;
}

/* Pied */
.oc-ctx__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 9px 22px;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    font-size: .69rem;
    color: #64748b;
    line-height: 1.5;
}
.oc-ctx__footer svg { opacity: .5; flex-shrink: 0; }
.oc-ctx__footer strong { color: #475569; }

/* Responsive */
@media (max-width: 720px) {
    .oc-ctx__grid { grid-template-columns: 1fr 1fr; }
    .oc-ctx__stat:nth-child(3n) { border-right: 1px solid #e2e8f0; }
    .oc-ctx__stat:nth-child(2n) { border-right: none; }
    .oc-ctx__stat:nth-child(5),
    .oc-ctx__stat:nth-child(6) { border-bottom: none; }
    .oc-ctx__stat:nth-child(4) { border-bottom: 1px solid #e2e8f0; }
    .oc-ctx__header { flex-direction: column; align-items: flex-start; }
    .oc-ctx__alerte { align-self: stretch; }
}
@media (max-width: 480px) {
    .oc-ctx__grid { grid-template-columns: 1fr; }
    .oc-ctx__stat { border-right: none !important; }
    .oc-ctx__stat:last-child { border-bottom: none; }
}

/* ============================================================
   COMPARAISON RÉGIONALE — [oc_comparaison_regionale]
   ============================================================ */

.oc-comp-wrap {
    font-family: 'Inter', -apple-system, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

/* En-tête */
.oc-comp-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    color: #fff;
    padding: 28px 32px;
    border-radius: 12px;
    margin-bottom: 28px;
}
.oc-comp-header h2 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    color: #fff;
}
.oc-comp-header p {
    margin: 0;
    color: #94a3b8;
    font-size: .9rem;
}

/* Grille cartes */
.oc-comp-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}
@media (max-width: 1100px) { .oc-comp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .oc-comp-cards { grid-template-columns: 1fr; } }

/* Carte individuelle */
.oc-comp-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-top: 4px solid var(--card-border, #1e3a5f);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.oc-comp-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.oc-comp-card--focus {
    border: 2px solid var(--card-border, #006C34);
    border-top: 4px solid var(--card-border, #006C34);
    box-shadow: 0 4px 20px rgba(0,108,52,.15);
}
.oc-comp-card--focus::before {
    content: '📍 OBS-CC';
    display: block;
    background: var(--card-color, #006C34);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 4px 12px;
    letter-spacing: .05em;
}

/* Tête de carte */
.oc-comp-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    background: var(--card-light, #f8fafc);
    border-bottom: 1px solid #e2e8f0;
}
.oc-comp-flag {
    font-size: 2rem;
    line-height: 1;
}
.oc-comp-card__nom {
    font-size: .95rem;
    font-weight: 700;
    color: #1e293b;
}
.oc-comp-tier {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.oc-comp-tier--tier-1 { background: #dcfce7; color: #166534; }
.oc-comp-tier--tier-2 { background: #dbeafe; color: #1e40af; }
.oc-comp-tier--tier-3 { background: #fef9c3; color: #854d0e; }
.oc-comp-tier--tier-4 { background: #fee2e2; color: #991b1b; }
.oc-comp-tier--tier-5 { background: #f1f5f9; color: #475569; }

.oc-comp-gci {
    margin-left: auto;
    text-align: right;
}
.oc-comp-gci__score {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--card-color, #1e3a5f);
    line-height: 1;
}
.oc-comp-gci__label {
    font-size: .65rem;
    color: #94a3b8;
}

/* Corps de carte */
.oc-comp-card__body {
    padding: 14px 16px;
}
.oc-comp-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}
.oc-comp-row:last-of-type { border-bottom: none; }
.oc-comp-label {
    font-size: .7rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.oc-comp-val {
    font-size: .82rem;
    color: #334155;
    line-height: 1.4;
}
.oc-comp-val--num {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--card-color, #1e3a5f);
}

/* Badges menaces */
.oc-comp-menaces {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
.oc-comp-menace-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* Note source */
.oc-comp-note {
    font-size: .7rem;
    color: #94a3b8;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}

/* Graphiques */
.oc-comp-graphs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}
@media (max-width: 800px) { .oc-comp-graphs { grid-template-columns: 1fr; } }

.oc-comp-graph-block {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
}
.oc-comp-graph-block h3 {
    margin: 0 0 16px;
    font-size: .95rem;
    color: #1e293b;
    font-weight: 700;
}
.oc-comp-radar-note {
    font-size: .7rem;
    color: #94a3b8;
    margin-top: 8px;
    text-align: center;
}

/* Tableau comparatif */
.oc-comp-table-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    overflow-x: auto;
}
.oc-comp-table-wrap h3 {
    margin: 0 0 16px;
    font-size: .95rem;
    color: #1e293b;
    font-weight: 700;
}
.oc-comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}
.oc-comp-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}
.oc-comp-table th.oc-comp-th--focus {
    background: #e8f5ee;
    color: #006C34;
}
.oc-comp-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: top;
}
.oc-comp-table td.oc-comp-td--focus {
    background: #f0faf4;
    font-weight: 600;
}
.oc-comp-table tbody tr:hover td { background: #f8fafc; }
.oc-comp-table tbody tr:hover td.oc-comp-td--focus { background: #e8f5ee; }
.oc-comp-critere {
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

/* Sources */
.oc-comp-sources {
    font-size: .72rem;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 16px;
    margin-top: 4px;
}
.oc-comp-sources strong {
    color: #64748b;
}


/* ── Encadré explicatif GCI + Tiers ─────────────────────────────────────── */
.oc-comp-explainer {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #1e3a5f;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
}
@media (max-width: 800px) {
    .oc-comp-explainer { grid-template-columns: 1fr; }
    .oc-comp-explainer__sep { display: none; }
}
.oc-comp-explainer__sep {
    width: 1px;
    background: #e2e8f0;
    margin: 0 24px;
    align-self: stretch;
}
.oc-comp-explainer__block {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.oc-comp-explainer__icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.oc-comp-explainer__title {
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.oc-comp-explainer__text {
    font-size: .8rem;
    color: #475569;
    line-height: 1.6;
}
.oc-comp-explainer__text strong {
    color: #1e3a5f;
}

/* Tiers */
.oc-comp-explainer__tiers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.oc-comp-explainer__tier {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .78rem;
    line-height: 1.5;
    color: #475569;
}
.oc-comp-explainer__tier strong {
    display: block;
    margin-bottom: 2px;
    font-size: .8rem;
}
.oc-comp-explainer__tier.tier-1 { background: #f0fdf4; }
.oc-comp-explainer__tier.tier-2 { background: #fefce8; }
.oc-comp-explainer__tier.tier-3 { background: #fef2f2; }

.oc-comp-tier-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.oc-comp-explainer__tier.tier-1 .oc-comp-tier-dot { background: #16a34a; }
.oc-comp-explainer__tier.tier-2 .oc-comp-tier-dot { background: #ca8a04; }
.oc-comp-explainer__tier.tier-3 .oc-comp-tier-dot { background: #dc2626; }
.oc-comp-explainer__tier.tier-1 strong { color: #15803d; }
.oc-comp-explainer__tier.tier-2 strong { color: #a16207; }
.oc-comp-explainer__tier.tier-3 strong { color: #b91c1c; }


/* ── Encadré collapsible GCI/Tiers ───────────────────────────────────────── */
.oc-comp-info-box {
    border: 1px solid #e2e8f0;
    border-left: 4px solid #1e3a5f;
    border-radius: 10px;
    margin-bottom: 24px;
    overflow: hidden;
    background: #fff;
}
.oc-comp-info-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    background: #f8fafc;
    border: none;
    cursor: pointer;
    font-size: .84rem;
    font-weight: 600;
    color: #1e3a5f;
    text-align: left;
    gap: 10px;
    transition: background .15s;
}
.oc-comp-info-toggle:hover { background: #f1f5f9; }
.oc-comp-info-toggle em { font-style: normal; color: #64748b; font-weight: 400; }
.oc-comp-info-arrow {
    font-size: 1rem;
    color: #94a3b8;
    transition: transform .25s ease;
    flex-shrink: 0;
}
.oc-comp-info-body {
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
    border-top: 1px solid #e2e8f0;
}
@media (max-width: 800px) {
    .oc-comp-info-body { grid-template-columns: 1fr; }
    .oc-comp-explainer__sep { display: none; }
}

/* ── Synthèse éditoriale ─────────────────────────────────────────────────── */
.oc-comp-synthese {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.oc-comp-synthese__icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.oc-comp-synthese__title {
    font-size: .72rem;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.oc-comp-synthese__content p {
    font-size: .85rem;
    color: #78350f;
    line-height: 1.65;
    margin: 0;
}
.oc-comp-synthese__content strong {
    color: #b45309;
}

/* ── Graphiques full width ───────────────────────────────────────────────── */
.oc-comp-graphs--full {
    grid-template-columns: 1fr !important;
}

/* ── Heatmap menaces ─────────────────────────────────────────────────────── */
.oc-heatmap-wrap { overflow-x: auto; }

.oc-heatmap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    min-width: 520px;
}
.oc-hm-th-menace {
    text-align: left;
    padding: 8px 12px;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    border-bottom: 2px solid #e2e8f0;
    min-width: 200px;
    font-size: .75rem;
}
.oc-hm-th-pays {
    text-align: center;
    padding: 8px 10px;
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
    border-bottom: 2px solid #e2e8f0;
    font-size: .78rem;
    white-space: nowrap;
}
.oc-hm-menace-label {
    padding: 9px 12px;
    color: #334155;
    font-weight: 500;
    border-bottom: 1px solid #f1f5f9;
    font-size: .78rem;
}
.oc-hm-cell {
    text-align: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    border-right: 2px solid #fff;
    cursor: default;
    transition: filter .15s;
    min-width: 90px;
}
.oc-hm-cell:hover { filter: brightness(.93); }
.oc-hm-val {
    display: block;
    font-weight: 800;
    font-size: .85rem;
    line-height: 1.2;
}
.oc-hm-niveau {
    display: block;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
    margin-top: 1px;
}
.oc-hm-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: .72rem;
}
.oc-hm-legend-title {
    font-weight: 700;
    color: #64748b;
    margin-right: 4px;
}
.oc-hm-legend-item {
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    font-size: .68rem;
}

/* Wrapper externe top5 — bloque l'étirement Elementor */
.oc-top5-outer {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: flex-start !important;
}

.oc-graph-block--top5 {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 480px;
    overflow: hidden;
    align-self: flex-start;
}

/* =====================================================
   FIX ELEMENTOR — empêche les colonnes d'étirer les
   blocs top5 et donut à la hauteur de leur voisin
===================================================== */

/* Cibler le widget et tous ses wrappers internes */
.elementor-widget-shortcode:has(.oc-graph-block--top5),
.elementor-widget-shortcode:has(.oc-graph-block--donut),
.elementor-widget:has(.oc-graph-block--top5),
.elementor-widget:has(.oc-graph-block--donut),
.e-con-inner:has(.oc-graph-block--top5),
.e-con-inner:has(.oc-graph-block--donut) {
    align-self: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}
.elementor-widget-shortcode:has(.oc-graph-block--top5) .elementor-widget-container,
.elementor-widget-shortcode:has(.oc-graph-block--donut) .elementor-widget-container,
.elementor-widget:has(.oc-graph-block--top5) .elementor-widget-container,
.elementor-widget:has(.oc-graph-block--donut) .elementor-widget-container {
    height: auto !important;
    min-height: 0 !important;
}

/* Colonne Elementor contenant nos blocs : ne pas étirer ses enfants */
.elementor-column:has(.oc-graph-block--top5) > .elementor-column-wrap > .elementor-widget-wrap,
.elementor-column:has(.oc-graph-block--donut) > .elementor-column-wrap > .elementor-widget-wrap,
.e-con:has(.oc-graph-block--top5),
.e-con:has(.oc-graph-block--donut) {
    align-items: flex-start !important;
}

/* ── Cibles exactes vues dans le DOM (image F12) ── */
/* Le e-con-full e-child qui contient directement le shortcode */
.e-con.e-child:has(.oc-graph-block--top5),
.e-con.e-child:has(.oc-graph-block--donut),
.e-con.e-con-full:has(.oc-graph-block--top5),
.e-con.e-con-full:has(.oc-graph-block--donut) {
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
    flex-grow: 0 !important;
}
/* Le e-con-inner flex parent */
.e-con-inner:has(.oc-graph-block--top5),
.e-con-inner:has(.oc-graph-block--donut) {
    align-items: flex-start !important;
    height: auto !important;
}
/* Le widget shortcode lui-même */
.elementor-widget-shortcode:has(.oc-graph-block--top5) ,
.elementor-widget-shortcode:has(.oc-graph-block--donut) {
    flex-grow: 0 !important;
    height: auto !important;
    align-self: flex-start !important;
}

/* =====================================================
   [oc_dashboard_graphiques] — Layout unifié autonome
===================================================== */
.oc-dg-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    font-family: inherit;
}

/* ── Rangée haute 30/70 ── */
.oc-dg-row-top {
    display: grid;
    grid-template-columns: 28fr 72fr;
    gap: 20px;
    align-items: stretch;
}

/* ── Rangée basse 50/50 ── */
.oc-dg-row-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* ── Carte générique ── */
.oc-dg-card {
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    box-shadow: 0 1px 12px rgba(10,61,98,.05), 0 4px 20px rgba(10,61,98,.04);
    padding: 22px 24px 36px;
    position: relative;
    transition: box-shadow .2s;
}
.oc-dg-card:hover {
    box-shadow: 0 2px 20px rgba(10,61,98,.09);
}
.oc-dg-card__head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    color: #64748b;
}
.oc-dg-card__title {
    font-size: 0.72rem;
    font-weight: 800;
    color: #0a3d62;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.oc-dg-card__sub {
    font-size: 0.74rem;
    color: #94a3b8;
    margin: 0 0 14px 0;
    line-height: 1.4;
}
.oc-dg-badge {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #cbd5e1;
    pointer-events: none;
}

/* ── Top 5 ── */
.oc-dg-card--top5 {
    display: flex;
    flex-direction: column;
}
.oc-dg-top5-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.oc-dg-top5-row {
    display: flex;
    align-items: center;
    gap: 9px;
}
.oc-dg-top5-rank {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}
.oc-dg-top5-info {
    flex: 1;
    min-width: 0;
}
.oc-dg-top5-name {
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oc-dg-top5-bar-wrap {
    background: #f1f5f9;
    border-radius: 99px;
    height: 4px;
    overflow: hidden;
}
.oc-dg-top5-bar {
    height: 100%;
    border-radius: 99px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
.oc-dg-top5-count {
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}
.oc-dg-top5-unit {
    font-size: 9.5px;
    font-weight: 500;
    opacity: .7;
}

/* ── Évolution ── */
.oc-dg-card--evo {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
.oc-dg-evo-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
}
.oc-dg-chart-evo {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ── Comparatif n / n-1 ── */
.oc-dg-card--comp {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
.oc-dg-comp-wrap {
    flex: 1;
    min-height: 200px;
    position: relative;
}
.oc-dg-chart-comp {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}
.oc-dg-comp-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.oc-dg-comp-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    color: #64748b;
    font-weight: 500;
}
.oc-dg-comp-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.oc-dg-comp-legend__item--n .oc-dg-comp-legend__dot    { background: #1e81b0; }
.oc-dg-comp-legend__item--nm1 .oc-dg-comp-legend__dot  { background: #94a3b8; }
.oc-dg-comp-legend__total {
    font-size: .78rem;
    font-weight: 700;
    color: #334155;
    margin-left: 2px;
}
.oc-dg-comp-legend__delta {
    font-size: .72rem;
    font-weight: 700;
    margin-left: auto;
}

/* ── Donut ── */
.oc-dg-card--donut .oc-donut-wrap {
    margin-top: 16px;
}
.oc-dg-card--donut .oc-donut-svg-wrap {
    width: 140px;
    height: 140px;
}
.oc-dg-card--donut .oc-donut-svg {
    width: 140px;
    height: 140px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .oc-dg-row-top    { grid-template-columns: 1fr; }
    .oc-dg-row-bottom { grid-template-columns: 1fr; }
    .oc-dg-evo-wrap   { min-height: 180px; }
}

/* Dark mode */
.oc-dark .oc-dg-card { background: #1e293b; border-color: #334155; }
.oc-dark .oc-dg-card__title { color: #7fc8f8; }
.oc-dark .oc-dg-card__sub { color: #64748b; }
.oc-dark .oc-dg-top5-name { color: #e2e8f0; }
.oc-dark .oc-dg-top5-bar-wrap { background: #334155; }

/* ══════════════════════════════════════════════════════
   RAPPORTS OBS-CC — Page liste + Popup téléchargement
══════════════════════════════════════════════════════ */

/* Page */
.oc-rp-page { font-family: inherit; max-width: 860px; }

/* Header */
.oc-rp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 36px;
    background: linear-gradient(135deg, #0a3d62 0%, #1a5c8f 100%);
    border-radius: 16px;
    margin-bottom: 32px;
    color: #fff;
}
.oc-rp-header__pretitle {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,.55);
    margin-bottom: 6px;
}
.oc-rp-header__title {
    font-size: 1.5rem;
    font-weight: 900;
    margin: 0 0 8px;
    color: #fff;
    letter-spacing: -.01em;
}
.oc-rp-header__sub {
    font-size: 0.84rem;
    color: rgba(255,255,255,.7);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}
.oc-rp-header__count {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    padding: 16px 22px;
    flex-shrink: 0;
    text-align: center;
    gap: 4px;
}
.oc-rp-header__num {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.oc-rp-header__num-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,.6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

/* Liste */
.oc-rp-list { display: flex; flex-direction: column; gap: 16px; }
.oc-rp-empty { color: #94a3b8; font-size: 0.9rem; padding: 32px; text-align: center; background: #f8fafc; border-radius: 12px; }

/* Carte */
.oc-rp-card {
    display: flex;
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(10,61,98,.05);
    transition: box-shadow .2s ease, transform .15s ease;
}
.oc-rp-card:hover {
    box-shadow: 0 8px 28px rgba(10,61,98,.10);
    transform: translateY(-2px);
}

/* Vignette gauche */
.oc-rp-card__thumb {
    width: 120px;
    min-width: 120px;
    background: linear-gradient(160deg, #0a3d62 0%, #0a3cff 100%);
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}
.oc-rp-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-rp-card__thumb-default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
    padding: 20px 12px;
}
.oc-rp-card__thumb-default svg { width: 44px; opacity: .75; }
.oc-rp-card__thumb-default span {
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
}

/* Corps */
.oc-rp-card__body {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.oc-rp-card__top { display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* Badges */
.oc-rp-card__badges { display: flex; flex-wrap: wrap; gap: 5px; }
.oc-rp-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.oc-rp-badge--cat  { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.oc-rp-badge--year { background: #f1f5f9; color: #475569; }
.oc-rp-badge--lang { background: #0a3cff; color: #fff; }
.oc-rp-badge--pages { background: #f1f5f9; color: #64748b; }
.oc-rp-badge--ver  { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

/* Texte */
.oc-rp-card__title {
    font-size: 1rem;
    font-weight: 800;
    color: #0a3d62;
    margin: 0;
    line-height: 1.3;
}
.oc-rp-card__desc {
    font-size: 0.83rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer carte */
.oc-rp-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
}
.oc-rp-card__date { font-size: 0.72rem; color: #94a3b8; }
.oc-rp-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #0a3d62;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.80rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .1s;
    font-family: inherit;
    white-space: nowrap;
}
.oc-rp-dl-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.oc-rp-dl-btn:hover { background: #0a3cff; }
.oc-rp-dl-btn:active { transform: scale(.97); }
.oc-rp-soon { font-size: 0.75rem; color: #94a3b8; font-style: italic; }


/* ── POPUP / MODAL ── */
.oc-dl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 18, 38, 0.60);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}
.oc-dl-overlay.is-open { opacity: 1; visibility: visible; }

.oc-dl-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 430px;
    box-shadow: 0 32px 80px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
    overflow: hidden;
    transform: translateY(20px) scale(.96);
    transition: transform .32s cubic-bezier(.34,1.56,.64,1);
    position: relative;
}
.oc-dl-overlay.is-open .oc-dl-modal { transform: translateY(0) scale(1); }

.oc-dl-modal__x {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 2;
}
.oc-dl-modal__x:hover { background: #e2e8f0; }
.oc-dl-modal__x svg { width: 14px; height: 14px; stroke: #64748b; }

/* En-tête modal */
.oc-dl-modal__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 28px 20px;
    background: linear-gradient(135deg, #0a3d62 0%, #1050a0 100%);
    color: #fff;
}
.oc-dl-modal__ico {
    width: 44px; height: 44px;
    background: rgba(255,255,255,.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.oc-dl-modal__ico svg { width: 22px; height: 22px; stroke: #fff; }
.oc-dl-modal__pretitle {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,.55);
    margin-bottom: 3px;
}
.oc-dl-modal__rname {
    font-size: 0.88rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    max-width: 280px;
}

/* Corps modal */
.oc-dl-modal__body { padding: 24px 28px 20px; display: flex; flex-direction: column; gap: 16px; }
.oc-dl-modal__intro { font-size: 0.83rem; color: #64748b; line-height: 1.6; margin: 0; }
.oc-dl-modal__fields { display: flex; flex-direction: column; gap: 12px; }

.oc-dl-fld { display: flex; flex-direction: column; gap: 5px; }
.oc-dl-fld__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: 0.01em;
}
.oc-dl-fld__label em { font-style: normal; color: #dc2626; margin-left: 2px; }
.oc-dl-fld__input {
    padding: 10px 13px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: 0.87rem;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .15s;
    font-family: inherit;
}
.oc-dl-fld__input:focus {
    border-color: #0a3cff;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(10,60,255,.10);
}
.oc-dl-fld__select { cursor: pointer; }

.oc-dl-msg { font-size: 0.77rem; min-height: 16px; text-align: center; }

.oc-dl-modal__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    background: #0a3cff;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 20px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .1s;
    font-family: inherit;
}
.oc-dl-modal__btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.oc-dl-modal__btn:hover { background: #0a3d62; }
.oc-dl-modal__btn:active { transform: scale(.98); }
.oc-dl-modal__btn:disabled { background: #94a3b8; cursor: not-allowed; transform: none; }

.oc-spin {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: oc-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes oc-spin { to { transform: rotate(360deg); } }

.oc-dl-modal__rgpd {
    font-size: 0.69rem;
    color: #94a3b8;
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* Succès */
.oc-dl-modal__success {
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.oc-dl-modal__success-ico { font-size: 2.8rem; }
.oc-dl-modal__success h4 { font-size: 1rem; font-weight: 800; color: #0a3d62; margin: 0; }
.oc-dl-modal__success p { font-size: 0.83rem; color: #64748b; margin: 0; line-height: 1.6; }
.oc-dl-modal__close-btn {
    margin-top: 6px;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    padding: 9px 24px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #0a3d62;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}
.oc-dl-modal__close-btn:hover { background: #e2e8f0; }

/* Dark */
.oc-dark .oc-rp-card { background: #1e293b; border-color: #334155; }
.oc-dark .oc-rp-card__title { color: #7fc8f8; }
.oc-dark .oc-rp-card__foot { border-color: #334155; }
.oc-dark .oc-dl-modal { background: #1e293b; }
.oc-dark .oc-dl-fld__input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.oc-dark .oc-dl-fld__input:focus { border-color: #2563eb; }
.oc-dark .oc-dl-modal__x { background: #334155; }
.oc-dark .oc-dl-modal__x svg { stroke: #94a3b8; }

/* Responsive */
@media (max-width: 600px) {
    .oc-rp-header { flex-direction: column; gap: 16px; padding: 24px 20px; }
    .oc-rp-header__count { flex-direction: row; align-items: center; width: 100%; justify-content: center; gap: 10px; }
    .oc-rp-card__thumb { width: 90px; min-width: 90px; }
    .oc-rp-card__body { padding: 16px; }
    .oc-rp-card__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
    .oc-rp-dl-btn { width: 100%; justify-content: center; }
    .oc-dl-modal { border-radius: 16px; }
    .oc-dl-modal__head { padding: 20px; }
    .oc-dl-modal__body { padding: 20px; }
}