/* ═══════════════════════════════════════════════════════════════
   SÉCURITÉ — schémas d'architecture et blocs de périmètre
   Les schémas sont en SVG inline : nets à toute résolution, quelques
   kilo-octets, texte réellement sélectionnable et lisible par un
   lecteur d'écran via <title>/<desc>. Aucune image générée.
   ═══════════════════════════════════════════════════════════════ */

.schema-figure {
    margin: var(--space-2xl) auto 0;
    max-width: 940px;
}

.schema-svg {
    display: block;
    width: 100%;
    height: auto;
    /* Le viewBox fait 860 de large : au-delà, on cesse d'agrandir pour
       éviter des libellés démesurés sur grand écran. */
    max-width: 860px;
    margin: 0 auto;
}

.schema-figure figcaption {
    margin-top: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-left: 3px solid var(--blue-electric);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

/* ── Nœuds du schéma 1 ──────────────────────────────────────── */
.schema-node rect {
    fill: #1A1A2E;
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 1.5;
}

.schema-node--accent rect {
    fill: rgba(58, 78, 225, 0.14);
    stroke: var(--blue-electric);
    stroke-width: 2;
}

.schema-label {
    fill: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
    text-anchor: middle;
    font-family: inherit;
}

.schema-label--fort {
    font-size: 19px;
    font-weight: 700;
}

.schema-sub {
    fill: #A0A0B8;
    font-size: 14px;
    text-anchor: middle;
    font-family: inherit;
}

.schema-caption {
    fill: #9090A8;
    font-size: 14px;
    font-style: italic;
    text-anchor: middle;
    font-family: inherit;
}

/* ── Flux ───────────────────────────────────────────────────── */
.schema-flux-haut {
    fill: none;
    stroke: #5A6EF5;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.schema-flux-bas {
    fill: none;
    stroke: #2ECC8F;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 7 5;
}

.schema-flow-label {
    /* Couleur par défaut indispensable : sans elle, un <text> SVG retombe sur
       fill:black, invisible sur le fond sombre du site. */
    fill: #C8CCE8;
    font-size: 15px;
    font-weight: 600;
    text-anchor: middle;
    font-family: inherit;
}

.schema-flow-label--haut { fill: #5A6EF5; }
.schema-flow-label--bas  { fill: #2ECC8F; }

/* ── Couches du schéma 2 ────────────────────────────────────── */
.schema-couche rect {
    stroke-width: 1.5;
}

.schema-couche--1 rect { fill: rgba(58, 78, 225, 0.30); stroke: rgba(58, 78, 225, 0.75); }
.schema-couche--2 rect { fill: rgba(58, 78, 225, 0.24); stroke: rgba(58, 78, 225, 0.65); }
.schema-couche--3 rect { fill: rgba(58, 78, 225, 0.18); stroke: rgba(58, 78, 225, 0.55); }
.schema-couche--4 rect { fill: rgba(58, 78, 225, 0.12); stroke: rgba(58, 78, 225, 0.45); }

.schema-couche--client rect {
    fill: rgba(46, 204, 143, 0.16);
    stroke: #2ECC8F;
    stroke-width: 2;
    stroke-dasharray: 6 4;
}

.schema-couche-titre {
    fill: #FFFFFF;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
}

.schema-couche-titre--centre { text-anchor: middle; }

.schema-couche-desc {
    fill: #A0A0B8;
    font-size: 14px;
    font-family: inherit;
}

.schema-couche-num {
    fill: rgba(255, 255, 255, 0.28);
    font-size: 30px;
    font-weight: 700;
    text-anchor: middle;
    font-family: inherit;
}

/* ── Répartition des rôles ──────────────────────────────────── */
.securite-roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.securite-role {
    padding: var(--space-xl);
}

.securite-role h3 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fs-xl);
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
}

.securite-role h3 i { color: var(--blue-electric); }

.securite-role--client h3 i { color: #2ECC8F; }

.securite-role ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.securite-role li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
}

.securite-role li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-electric);
}

.securite-role--client li::before { background: #2ECC8F; }

/* ── Encart de périmètre ────────────────────────────────────── */
/* Composant propre à cette page : bandeau pleine largeur à filet bleu. À ne pas
   confondre avec le `.scope-notice` de `services.css` — carte encadrée de
   magenta, avec sa famille `-header`/`-intro`/`-outro`/`-list`. Les deux ont
   longtemps porté le même nom sans jamais se croiser, `services.css` n'étant
   pas chargée ici ; depuis que ce composant partagé y est remonté, cette page
   la charge et le nom devait donc être levé. */
.perimetre-notice {
    padding: var(--space-2xl);
    border-left: 4px solid var(--blue-electric);
}

.perimetre-notice h2 {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
}

.perimetre-notice h2 i { color: var(--blue-electric); }

.perimetre-notice p {
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-md);
}

.perimetre-notice a {
    color: var(--blue-electric);
    text-decoration: underline;
}

.perimetre-list {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0 0;
}

.perimetre-list li {
    position: relative;
    padding-left: var(--space-xl);
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
}

.perimetre-list li::before {
    content: "\f105"; /* chevron-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: var(--space-xs);
    color: var(--blue-electric);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   Les SVG se réduisent proportionnellement, mais en dessous d'environ
   700 px les libellés deviennent trop petits. On autorise alors le
   défilement horizontal du schéma dans son conteneur plutôt que de
   laisser le texte devenir illisible.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .schema-figure {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .schema-svg {
        min-width: 680px;
    }

    /* Sans indication, rien ne signale que le schéma défile : le visiteur
       voit un schéma coupé et croit à un défaut d'affichage.
       `position: sticky` ne décale une boîte que dans les limites de son bloc
       conteneur : en `display: block`, le repère faisait exactement la largeur
       du scrollport et ne pouvait donc pas bouger du tout. `max-content` lui
       laisse la marge nécessaire pour suivre le début du défilement. */
    .schema-figure::before {
        content: "Faites glisser le schéma horizontalement →";
        display: block;
        position: sticky;
        left: 0;
        width: max-content;
        max-width: 100%;
        margin-bottom: var(--space-sm);
        font-size: var(--fs-xs);
        font-style: italic;
        color: var(--text-muted);
    }

    .schema-figure figcaption {
        min-width: 0;
        padding: var(--space-md);
    }

    .securite-roles {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .securite-role,
    .perimetre-notice {
        padding: var(--space-lg);
    }

    .perimetre-notice h2 {
        font-size: var(--fs-xl);
        align-items: flex-start;
    }
}

/* Le défilement horizontal doit rester perceptible au clavier */
.schema-figure:focus-visible {
    outline: 2px solid var(--blue-electric);
    outline-offset: 4px;
}

/* ── Tableau de périmètre ───────────────────────────────────── */
/* .comparatif-table est dessiné pour 3 colonnes (critère / Tomco /
   concurrent). Ici il y en a 4, la colonne des intitulés devient large
   et le centrage hérité fait flotter les libellés loin de leurs valeurs.
   On aligne à gauche et on resserre la colonne. */
#perimetre .comparatif-table th[scope="row"] {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
}

#perimetre .comparatif-table thead th:first-child {
    width: 34%;
}

@media (max-width: 768px) {
    /* En pile mobile, l'intitulé de ligne redevient un titre de bloc */
    #perimetre .comparatif-table th[scope="row"] {
        text-align: left;
    }
}