/* ============================================================================
   Portail SSI v3 — customisations académiques + composants Incident
   ============================================================================ */

/* ─── Vigilance ───────────────────────────────────────────────────────── */
:root {
    --ssi-vigilance-w-bg: var(--background-flat-info, #f2f2f9);
    --ssi-vigilance-y-bg: var(--background-flat-warning, #fff4d3);
    --ssi-vigilance-o-bg: var(--background-flat-warning, #ffe4cf);
    --ssi-vigilance-r-bg: var(--background-flat-error, #ffe9e9);
}

.fr-ssi-cellule-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: var(--background-action-low-blue-cumulus, #dde5fb);
    color: var(--text-action-high-blue-cumulus, #3558a2);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ─── Vigilance — couleurs avec bon contraste ──────────────────────── */
.fr-ssi-vigilance {
    padding: 1.5rem;
    border-radius: 0.25rem;
    border-left: 4px solid;
}
.fr-ssi-vigilance h4 {
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}

/* Vigilance standard (bleu/gris) */
.fr-ssi-vigilance--w {
    background: #eef0f9;
    color: #1c1c4f;
    border-left-color: #000091;
}
.fr-ssi-vigilance--w h4 { color: #000091; }

/* Vigilance renforcée (jaune) */
.fr-ssi-vigilance--y {
    background: #fff4d3;
    color: #5e4900;
    border-left-color: #c8a138;
}
.fr-ssi-vigilance--y h4 { color: #8c6a16; }

/* Alerte élevée (orange — bon contraste) */
.fr-ssi-vigilance--o {
    background: #ffe4cf;
    color: #6e3500;
    border-left-color: #d97706;
}
.fr-ssi-vigilance--o h4 { color: #b24414; }

/* Alerte critique (rouge) */
.fr-ssi-vigilance--r {
    background: #ffd5d5;
    color: #6e0000;
    border-left-color: #ce0500;
}
.fr-ssi-vigilance--r h4 { color: #b34000; }

.fr-ssi-featured {
    cursor: pointer;
    transition: transform 0.15s ease;
}
.fr-ssi-featured:hover {
    transform: translateY(-2px);
}

/* ─── Organigramme ────────────────────────────────────────────────────── */
.fr-ssi-org-canvas {
    overflow-x: auto;
    text-align: center;
    padding: 2rem 1rem;
}
.fr-ssi-org-canvas svg {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* ─── Signalement mis en avant (nav + accueil) ───────────────────────── */
.fr-nav__link--signal {
    color: var(--text-default-error, #b34000) !important;
    font-weight: 600;
    position: relative;
}
.fr-nav__link--signal::before {
    content: '⚠';
    margin-right: 0.4rem;
}

.fr-ssi-signal-cta {
    background: linear-gradient(135deg, #ffe9e9 0%, #ffd0d0 100%);
    border-left: 6px solid var(--border-default-error, #b34000);
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.fr-ssi-signal-cta__icon {
    font-size: 3rem;
    line-height: 1;
}
.fr-ssi-signal-cta__content {
    flex: 1;
    min-width: 200px;
}
.fr-ssi-signal-cta__content h3 {
    margin: 0 0 0.4rem 0;
    color: var(--text-default-error, #b34000);
}
.fr-ssi-signal-cta__content p {
    margin: 0;
    color: var(--text-mention-grey, #666);
    font-size: 0.95rem;
}
.fr-ssi-signal-cta .fr-btn--error {
    background: var(--background-action-high-error, #ce0500) !important;
    color: #fff !important;
    border: none;
}

/* ─── Incident dashboard (façon captures utilisateur) ────────────────── */
.fr-incident {
    background: var(--background-default-grey, #fff);
    border-radius: 0.5rem;
    border-top: 6px solid var(--border-default-grey, #ddd);
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.fr-incident--error   { border-top-color: var(--border-default-error, #b34000); }
.fr-incident--warning { border-top-color: var(--border-default-warning, #c8a138); }
.fr-incident--info    { border-top-color: var(--border-default-info, #2f7eb8); }
.fr-incident--success { border-top-color: var(--border-default-success, #297254); }

.fr-incident-example-badge {
    display: inline-block;
    background: #fff4d3;
    color: #6e4f00;
    padding: 0.35rem 0.85rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
    border: 1px solid #f1d27d;
}

/* Header de l'incident */
.fr-incident-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.fr-incident-header-main {
    flex: 1;
    min-width: 250px;
}
.fr-incident-header-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.fr-incident-date {
    color: var(--text-mention-grey, #666);
    font-size: 0.9rem;
}
.fr-incident-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--text-title-grey, #161616);
}
.fr-incident-subtitle {
    color: var(--text-mention-grey, #666);
    margin: 0;
    font-size: 0.95rem;
}

.fr-incident-attacker {
    background: var(--background-alt-pink-tuile, #fef2f2);
    border: 1px solid var(--border-default-pink-tuile, #f4d6d6);
    padding: 0.75rem 1.25rem;
    border-radius: 0.4rem;
    text-align: center;
    min-width: 180px;
}
.fr-incident-attacker-heading {
    margin: 0 0 0.3rem 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-mention-grey, #b34000);
    text-transform: uppercase;
}
.fr-incident-attacker-label {
    margin: 0 0 0.2rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-default-error, #ce0500);
}
.fr-incident-attacker-kind {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-mention-grey, #666);
}

/* KPI grid */
.fr-incident-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
}
.fr-incident-kpi {
    background: var(--background-alt-blue-france, #f5f5fe);
    border: 1px solid var(--border-default-blue-france, #cacafb);
    padding: 1.25rem 0.75rem;
    border-radius: 0.4rem;
    text-align: center;
}
.fr-incident-kpi--error {
    background: var(--background-alt-pink-tuile, #fef2f2);
    border-color: var(--border-default-pink-tuile, #f4d6d6);
}
.fr-incident-kpi--error .fr-incident-kpi-value { color: var(--text-default-error, #ce0500); }
.fr-incident-kpi--warning {
    background: #fff4d3;
    border-color: #f1d27d;
}
.fr-incident-kpi--warning .fr-incident-kpi-value { color: #8c6a16; }
.fr-incident-kpi--success {
    background: var(--background-alt-green-emeraude, #e3fdeb);
    border-color: var(--border-default-green-emeraude, #b8e6cb);
}
.fr-incident-kpi--success .fr-incident-kpi-value { color: var(--text-default-success, #297254); }

.fr-incident-kpi-value {
    margin: 0 0 0.3rem 0;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-action-high-blue-france, #000091);
    line-height: 1;
}
.fr-incident-kpi-label {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-mention-grey, #666);
}

/* Deux colonnes (chronologie / vecteurs+enseignements) */
.fr-incident-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 1.5rem 0;
}
@media (max-width: 768px) {
    .fr-incident-twocol { grid-template-columns: 1fr; }
}

.fr-incident-block-title {
    margin: 0 0 1rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-title-grey, #161616);
}

.fr-incident-chrono {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fr-incident-chrono-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.5rem;
    padding: 0.4rem 0;
    align-items: baseline;
    font-size: 0.9rem;
}
.fr-incident-chrono-when {
    font-weight: 600;
    color: var(--text-default-error, #b34000);
}
.fr-incident-chrono-what { color: var(--text-default-grey, #161616); }

.fr-incident-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.fr-incident-listitem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-radius: 0.4rem;
    font-size: 0.9rem;
}
.fr-incident-listitem--vectors    { background: var(--background-alt-pink-tuile, #fef2f2); }
.fr-incident-listitem--compromised { background: #fff4d3; }
.fr-incident-listitem--teachings  { background: var(--background-alt-green-emeraude, #e3fdeb); }
.fr-incident-listitem-icon {
    font-size: 1.1rem;
    line-height: 1;
}

/* Graphique en barres */
.fr-incident-chart {
    background: var(--background-alt-grey, #f6f6f6);
    padding: 1.25rem 1.5rem;
    border-radius: 0.4rem;
    margin-top: 1.5rem;
}
.fr-incident-chart-subtitle {
    margin: 0 0 1rem 0;
    color: var(--text-mention-grey, #666);
    font-size: 0.85rem;
}
.fr-incident-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.fr-incident-bar-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.75rem;
    align-items: center;
}
.fr-incident-bar-label {
    text-align: right;
    font-size: 0.85rem;
    color: var(--text-mention-grey, #666);
}
.fr-incident-bar-track {
    background: var(--background-default-grey, #fff);
    height: 24px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.fr-incident-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    transition: width 0.5s ease;
    min-width: 3rem;
}
.fr-incident-bar-fill--error   { background: var(--background-action-high-error, #ce0500); }
.fr-incident-bar-fill--warning { background: #c8a138; }
.fr-incident-bar-fill--info    { background: var(--background-action-high-blue-france, #000091); }
.fr-incident-bar-fill--success { background: var(--background-action-high-success, #18753c); }
.fr-incident-bar-fill--purple  { background: #6a3ec6; }
.fr-incident-bar-fill--teal    { background: #009099; }
.fr-incident-bar-fill--grey    { background: #929292; }
/* ═══ Quizz SSI — options interactives ═══════════════════════════════ */

.fr-quizz-option {
    display: flex;
    align-items: stretch;
    border: 2px solid var(--border-default-grey, #ddd);
    border-radius: 0.5rem;
    background: var(--background-default-grey, #fff);
    overflow: hidden;
    transition: all 0.15s ease;
}
.fr-quizz-option:hover {
    border-color: var(--border-action-high-blue-france, #000091);
    transform: translateX(2px);
}

.fr-quizz-option-marker {
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-alt-grey, #f6f6f6);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-mention-grey, #666);
    border-right: 2px solid var(--border-default-grey, #ddd);
}

.fr-quizz-option-label {
    flex: 1;
    padding: 0.85rem 1.25rem;
    line-height: 1.45;
}

.fr-quizz-option--selected {
    border-color: var(--border-action-high-blue-france, #000091);
    background: var(--background-action-low-blue-france, #e3e3fd);
}
.fr-quizz-option--selected .fr-quizz-option-marker {
    background: var(--background-action-high-blue-france, #000091);
    color: #fff;
    border-right-color: var(--background-action-high-blue-france, #000091);
}

.fr-quizz-option--correct {
    border-color: #297254;
    background: #f0fdf4;
}
.fr-quizz-option--correct .fr-quizz-option-marker {
    background: #297254;
    color: #fff;
    border-right-color: #297254;
}

.fr-quizz-option--incorrect {
    border-color: #ce0500;
    background: #fef2f2;
}
.fr-quizz-option--incorrect .fr-quizz-option-marker {
    background: #ce0500;
    color: #fff;
    border-right-color: #ce0500;
}

/* Récap de fin */
.fr-quizz-recap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.fr-quizz-recap-line {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background: var(--background-alt-grey, #f6f6f6);
}
.fr-quizz-recap-line.is-correct { background: #f0fdf4; }
.fr-quizz-recap-line.is-incorrect { background: #fef2f2; }
.fr-quizz-recap-num {
    font-weight: 700;
    color: var(--text-mention-grey, #666);
}
.fr-quizz-recap-theme { color: var(--text-default-grey, #161616); }
.fr-quizz-recap-status {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: right;
}
.is-correct .fr-quizz-recap-status { color: #297254; }
.is-incorrect .fr-quizz-recap-status { color: #ce0500; }
/* ═══ Toggle thème ═══════════════════════════════════════════════════ */
.ssi-theme-toggle {
    position: relative;
}
.ssi-theme-toggle-label {
    display: inline-block;
}

/* ═══ Ajustements composants custom pour le mode sombre ════════════════
   Le DSFR gère automatiquement ses propres composants. On corrige
   uniquement nos composants custom (fr-ssi-*, fr-incident-*, fr-quizz-*)
   qui utilisent des couleurs hardcodées.
   ═══════════════════════════════════════════════════════════════════════ */

[data-fr-theme="dark"] {

    /* Encart vigilance — versions sombres lisibles */
    .fr-ssi-vigilance--w {
        background: #2a2a4a;
        color: #e8e8ff;
        border-left-color: #6a6af9;
    }
    .fr-ssi-vigilance--w h4 { color: #b1b1ff; }

    .fr-ssi-vigilance--y {
        background: #3d3520;
        color: #fff4d3;
        border-left-color: #e0b94f;
    }
    .fr-ssi-vigilance--y h4 { color: #f1d27d; }

    .fr-ssi-vigilance--o {
        background: #3d2a14;
        color: #ffd9b8;
        border-left-color: #e8893b;
    }
    .fr-ssi-vigilance--o h4 { color: #ffae7a; }

    .fr-ssi-vigilance--r {
        background: #3d1818;
        color: #ffc8c8;
        border-left-color: #e84a4a;
    }
    .fr-ssi-vigilance--r h4 { color: #ff9494; }

    /* Encart signalement (CTA rouge) */
    .fr-ssi-signal-cta {
        background: linear-gradient(135deg, #3d1818 0%, #4a2020 100%);
    }
    .fr-ssi-signal-cta__content h3 { color: #ff9494; }
    .fr-ssi-signal-cta__content p { color: #d8d8d8; }

    /* Incidents : cartouches */
    .fr-incident {
        background: #1f1f2c;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .fr-incident-title { color: #f5f5fe; }
    .fr-incident-subtitle { color: #b8b8d4; }
    .fr-incident-date { color: #b8b8d4; }
    .fr-incident-example-badge {
        background: #3d3520;
        color: #f1d27d;
        border-color: #5d4d27;
    }

    /* KPI */
    .fr-incident-kpi {
        background: #2a2a4a;
        border-color: #4747a3;
    }
    .fr-incident-kpi-value { color: #b1b1ff; }
    .fr-incident-kpi-label { color: #b8b8d4; }
    .fr-incident-kpi--error {
        background: #3d1818;
        border-color: #5d2c2c;
    }
    .fr-incident-kpi--error .fr-incident-kpi-value { color: #ff9494; }
    .fr-incident-kpi--warning {
        background: #3d3520;
        border-color: #5d4d27;
    }
    .fr-incident-kpi--warning .fr-incident-kpi-value { color: #f1d27d; }
    .fr-incident-kpi--success {
        background: #163d2a;
        border-color: #2c5d44;
    }
    .fr-incident-kpi--success .fr-incident-kpi-value { color: #88e5b0; }

    /* Encadré attaquant */
    .fr-incident-attacker {
        background: #3d1818;
        border-color: #5d2c2c;
    }
    .fr-incident-attacker-heading { color: #ff9494; }
    .fr-incident-attacker-label { color: #ff6464; }
    .fr-incident-attacker-kind { color: #b8b8d4; }

    /* Listes (vecteurs, compromised, teachings) */
    .fr-incident-block-title { color: #f5f5fe; }
    .fr-incident-listitem--vectors    { background: #3d1818; color: #ffc8c8; }
    .fr-incident-listitem--compromised { background: #3d3520; color: #fff4d3; }
    .fr-incident-listitem--teachings  { background: #163d2a; color: #c0f0d4; }

    /* Chrono */
    .fr-incident-chrono-when { color: #ff9494; }
    .fr-incident-chrono-what { color: #e8e8ff; }

    /* Graphique en barres */
    .fr-incident-chart {
        background: #2a2a3a;
    }
    .fr-incident-chart-subtitle { color: #b8b8d4; }
    .fr-incident-bar-label { color: #b8b8d4; }
    .fr-incident-bar-track {
        background: #1f1f2c;
    }

    /* Organigramme SVG — fond identique au layout sombre */
    .ssi-org-svg .org-node-rect.lvl-0 { fill: #2a2a4a; stroke: #b1b1ff; }
    .ssi-org-svg .org-node-rect.lvl-1 { fill: #1f1f3a; stroke: #6a6af9; }
    .ssi-org-svg .org-node-rect.lvl-2 { fill: #1f1f2c; stroke: #4a4a64; }
    .ssi-org-svg .org-node-rect.accent { fill: #163d2a; stroke: #88e5b0; }
    .ssi-org-svg .org-node-title { fill: #f5f5fe; }
    .ssi-org-svg .org-node-title.accent { fill: #88e5b0; }
    .ssi-org-svg .org-node-sub { fill: #b8b8d4; }
    .ssi-org-svg .org-link { stroke: #4a4a64; }
    .ssi-org-svg .org-link-transverse { stroke: #f1d27d; }

    /* Quizz : options */
    .fr-quizz-option {
        background: #1f1f2c;
        border-color: #4a4a64;
    }
    .fr-quizz-option:hover { border-color: #6a6af9; }
    .fr-quizz-option-marker {
        background: #2a2a3a;
        color: #b8b8d4;
        border-right-color: #4a4a64;
    }
    .fr-quizz-option--selected {
        background: #2a2a4a;
        border-color: #6a6af9;
    }
    .fr-quizz-option--correct {
        background: #163d2a;
        border-color: #88e5b0;
    }
    .fr-quizz-option--incorrect {
        background: #3d1818;
        border-color: #ff6464;
    }
    .fr-quizz-recap-line { background: #2a2a3a; }
    .fr-quizz-recap-line.is-correct { background: #163d2a; }
    .fr-quizz-recap-line.is-incorrect { background: #3d1818; }
    .fr-quizz-recap-num { color: #b8b8d4; }
    .fr-quizz-recap-theme { color: #e8e8ff; }
}
/* ═══ Fix L4 : espacement vertical entre options du quizz ═══════════ */

/* Le stack utilise flex-direction:column avec un gap généreux entre cases */
.fr-quizz-options-stack {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;  /* saut de ligne entre chaque case réponse */
}

/* On retire les marges utilitaires DSFR sur les options pour ne garder que le gap du parent */
.fr-quizz-options-stack .fr-quizz-option {
    margin: 0 !important;
}

/* Padding interne un peu plus généreux pour la respiration */
.fr-quizz-option-label {
    padding: 1rem 1.25rem !important;
}
.fr-quizz-option-marker {
    flex: 0 0 56px !important;
}
/* ═══ Fix L4 final : alignement gauche + espacement options ════════ */

/* Stack vertical des options avec gap généreux */
.fr-quizz-options-stack {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Les options elles-mêmes : padding propre, pas de margin */
.fr-quizz-options-stack .fr-quizz-option {
    margin: 0 !important;
}
.fr-quizz-option-label {
    padding: 1rem 1.25rem !important;
}
.fr-quizz-option-marker {
    flex: 0 0 56px !important;
}

/* Boutons d'action du quizz : ALIGNÉS À GAUCHE (pas à droite) */
.fr-quizz-actions {
    display: flex;
    justify-content: flex-start !important;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.fr-quizz-actions .fr-btn {
    margin: 0 !important;
}