/* Sentinelle — couche responsive (lot mobile, 08/10/2026).

   Chargée en DERNIER par base.html.twig (asset_v). Elle ne contient que des blocs @media en
   max-width : au-delà de 900 px, elle ne change rien (ResponsiveSheetTest). Seuils, rappelés dans
   tokens.css et docs/sentinelle-design-system.md § Mobile :
   - 900 px : le cadre — tiroir de navigation, en-tête compact, marges de 16 px ;
   - 640 px : listes en cartes, blocs en une colonne, modale et palette en plein écran ;
   - 400 px : indicateurs du tableau de bord sur une colonne.

   Règles : jetons var(--scc-…) seulement, aucune couleur nouvelle ; jamais overflow-x:hidden sur
   .scc-app-main (chaque débordement se traite à la source) ; les éléments propres au mobile ont
   leur style de base dans components.css (display:none) et sont montrés ici. Chaque section
   s'ajoute à la fin du fichier : 900 px d'abord, puis 640 px, puis 400 px. */

/* ── Cadre : tiroir de navigation (sous 900 px) ──
   La barre latérale sort de la grille et devient un panneau fixe à gauche, hors écran et hors de
   la tabulation (visibility:hidden) tant que ☰ ne l'a pas ouvert (header.js : .is-open, fond,
   contenu inerte). Une seule ligne de grille à la hauteur de la fenêtre : 100vh dépasse la zone
   visible des navigateurs mobiles (barre d'outils), le bas de la page devenait inatteignable. */
@media (max-width: 900px) {
  .scc-app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .scc-app-main{height:auto}
  .scc-sidebar{position:fixed;top:0;bottom:0;left:0;z-index:60;width:min(280px,85vw);height:auto;overscroll-behavior:contain;box-shadow:var(--scc-sh-pop);transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
  .scc-sidebar.is-open{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s linear 0s}
  .scc-nav-backdrop{position:fixed;inset:0;z-index:55;background:rgba(15,22,34,.45)}
  .scc-nav-toggle{display:inline-flex;flex:none}
  .scc-nav-close{display:inline-flex;flex:none;margin-left:auto}
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .scc-sidebar,.scc-sidebar.is-open{transition:none}
}

/* ── Cadre : en-tête compact (sous 900 px) ──
   Hauteur gardée (62 px). Le fil d'Ariane ne montre que son dernier élément, le titre de la page,
   coupé par « … » ; ⌘K devient la loupe seule, « Demander une intervention » une icône. Le libellé
   de ce bouton et le nom/rôle du profil sont masqués VISUELLEMENT (jamais display:none) : ils
   restent les noms accessibles. Le sélecteur d'organisation passe dans le tiroir. */
@media (max-width: 900px) {
  .scc-header{padding:0 12px;gap:8px}
  .scc-header-right{flex:none;gap:8px}
  .scc-crumbs{flex:1 1 auto;min-width:0}
  .scc-crumbs>:not(:last-child){display:none}
  .scc-crumbs>:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .scc-header .scc-org-menu{display:none}
  .scc-nav-org{display:block}
  .scc-cmd-btn{width:38px;padding:0;justify-content:center}
  .scc-cmd-key{display:none}
  .scc-header .scc-btn-accent[data-intervention-open]{width:38px;padding:0;justify-content:center}
  .scc-iv-label,.scc-profile-info{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .scc-profile-trigger{gap:6px;padding:4px 6px}
}

/* ── Cadre : marges de la zone principale (sous 900 px) ──
   Pages de connexion (g5-09) : même gouttière de 16 px autour de la carte (40 px par côté
   laissaient une carte de 293 px à 375). */
@media (max-width: 900px) {
  .scc-main{padding:20px 16px 48px}
  .scc-login-panel{padding:24px 16px}
}

/* ── Modale d'intervention et palette ⌘K en plein écran (sous 640 px) ──
   Bouton de fermeture visible : × de la modale agrandi, « Fermer la recherche » de la palette. */
@media (max-width: 640px) {
  .scc-modal-overlay{padding:0;align-items:stretch}
  .scc-modal{max-width:none;border:0;border-radius:0;padding:18px 16px 24px;overflow-y:auto}
  .scc-modal-x{width:38px;height:38px;font-size:20px;flex:none}
  .scc-cmd-overlay{padding:0}
  .scc-cmd-panel{position:relative;max-width:none;max-height:none;height:100%;border:0;border-radius:0}
  .scc-cmd-search{padding-right:58px}
  .scc-cmd-close{display:inline-flex;position:absolute;top:8px;right:8px}
}

/* ── Tableau de bord (sous 640 px) ──
   KPI en 2 colonnes (règle existante dès 1100 px), cartes de site en pleine largeur, filtres sur
   une ligne qui défile horizontalement (aussi les filtres de modules de la fiche site). */
@media (max-width: 640px) {
  .scc-dash-head{flex-wrap:wrap}
  .scc-dash-actions{flex-wrap:wrap}
  .scc-site-grid,.scc-portfolio-grid{grid-template-columns:minmax(0,1fr)}
  .scc-site-url{overflow-wrap:anywhere}
  .scc-dash-bar{flex-direction:column;align-items:stretch}
  .scc-dash-bar-right{justify-content:space-between;flex-wrap:wrap}
  .scc-filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:thin}
  .scc-filters>*{flex:none}
  .scc-filters .scc-btn:focus-visible{outline-offset:-2px}
  .scc-kpi-core{white-space:normal;flex-wrap:wrap}
}

/* ── Indicateurs sur une colonne (sous 400 px) ── */
@media (max-width: 400px) {
  .scc-kpi-grid{grid-template-columns:minmax(0,1fr)}
}

/* ── Cartes : libellé d'une cellule qui a perdu son en-tête de colonne (sous 640 px) ──
   data-label est réservé à cet usage. Contenu généré : lu par les lecteurs d'écran (Chrome,
   Firefox, Safari), absent du DOM (textes vérifiés par les tests, CSV et PDF inchangés). */
@media (max-width: 640px) {
  [data-label]::before{content:attr(data-label) " : ";font-family:'IBM Plex Sans',-apple-system,system-ui,sans-serif;font-size:12px;font-weight:500;color:var(--scc-muted)}
}

/* ── Fiche site (sous 640 px) ──
   Onglets sur une barre qui défile (header.js garde l'onglet actif en vue ; anneau de focus à
   l'intérieur, la barre le rognerait ; filet en ombre intérieure, la bordure serait rognée sous
   l'onglet actif). En-tête, inventaire en une colonne. Modules et « autres alertes » en cartes :
   nom et gravité en tête, puis version installée → conseillée et nombre de failles ; « Exploitée :
   Oui » gardé quand c'est vrai, sur sa ligne. */
@media (max-width: 640px) {
  .scc-detail-head{flex-direction:column;align-items:stretch;gap:16px;padding:18px 16px}
  .scc-detail-url{overflow-wrap:anywhere}
  .scc-mini-stats{gap:14px 24px}
  .scc-chart-foot{flex-wrap:wrap;gap:6px 18px}
  .scc-chart-mark{white-space:normal;max-width:38%}
  .scc-tabs{overflow-x:auto;overflow-y:hidden;border-bottom:0;box-shadow:inset 0 -1px 0 var(--scc-border);scrollbar-width:thin;gap:20px}
  .scc-tab{flex:none;white-space:nowrap;margin-bottom:0}
  .scc-tabs .scc-tab:focus-visible{outline-offset:-2px}
  .scc-inv-grid{grid-template-columns:minmax(0,1fr)}
  .scc-mods-tools{width:100%}
  .scc-mods-search-wrap{flex:1 1 100%}
  .scc-mods-search{width:100%}
  .scc-module-row-header,.scc-other-row-header{display:none}
  .scc-module-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name sev" "ver cves";gap:6px 12px;padding:14px 16px}
  .scc-mr-name{grid-area:name}
  .scc-mr-sev{grid-area:sev;justify-self:end}
  .scc-mr-ver{grid-area:ver;min-width:0;overflow-wrap:anywhere}
  .scc-mr-cves{grid-area:cves;justify-self:end}
  .scc-mr-exp,.scc-mr-age,.scc-mr-chev{display:none}
  .scc-mr-exp.is-yes{display:block;grid-column:1 / -1}
  .scc-other-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"target sev" "count kind";gap:6px 12px;padding:14px 16px}
  .scc-other-target-cell{grid-area:target}
  .scc-or-sev{grid-area:sev;justify-self:end}
  .scc-or-count{grid-area:count}
  .scc-or-kind{grid-area:kind;justify-self:end}
  .scc-or-exp,.scc-or-age{display:none}
  .scc-or-exp.is-yes{display:block;grid-column:1 / -1}
  .scc-other-cves{padding:4px 16px 14px}
}

/* ── Fiche module (sous 640 px) ──
   Une colonne ; les commandes composer défilent dans leur cadre (.scc-mod-cmd, overflow-x:auto
   existant) au lieu d'élargir la page : la colonne et le cadre peuvent rétrécir sous leur contenu. */
@media (max-width: 640px) {
  .scc-mod-head-card,.scc-mod-quefaire-card{padding:18px 16px}
  .scc-mod-head-actions{width:100%}
  .scc-mod-quefaire-grid{grid-template-columns:minmax(0,1fr)}
  .scc-mod-cmds-col{min-width:0}
  .scc-mod-cmd{min-width:0}
  .scc-mod-cmd .scc-mono{white-space:nowrap}
  .scc-mod-status-bar{padding:14px 16px}
  .scc-mod-gov-grid{grid-template-columns:minmax(0,1fr)}
}

/* ── Veille CVE et fiche d'avis (sous 640 px) ──
   Une carte par avis : titre et identifiant SA- (ordre du DOM), gravité, sites touchés ; CVE,
   module, CVSS, EPSS et date restent dans la fiche d'avis. Fiche : indicateurs en une colonne,
   une carte par site touché (site, versions, suivi). */
@media (max-width: 640px) {
  .scc-cve-header-row,.scc-cve-detail-row-header{display:none}
  .scc-cve-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"adv sev" "sites sites";gap:6px 12px;padding:14px 16px}
  .scc-cve-advisory{grid-area:adv}
  .scc-cve-advisory>div:first-child{white-space:normal}
  .scc-cve-sev{grid-area:sev;justify-self:end}
  .scc-cve-sites{grid-area:sites}
  .scc-cve-sites-main,.scc-cve-sites-off{display:inline;margin-right:8px}
  .scc-cve-module,.scc-cve-cvss,.scc-cve-epss,.scc-cve-published{display:none}
  .scc-cve-detail-head-card{padding:18px 16px}
  .scc-cve-detail-chips>*{min-width:0;overflow-wrap:anywhere}
  .scc-cve-detail-official-link{margin-left:0}
  .scc-cve-detail-kpi-grid{grid-template-columns:minmax(0,1fr)}
  .scc-cve-detail-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"site site" "ver state";gap:6px 12px;padding:14px 16px}
  .scc-cve-detail-site-cell{grid-area:site}
  .scc-cve-detail-version{grid-area:ver;min-width:0;overflow-wrap:anywhere}
  .scc-cve-detail-state{grid-area:state;align-items:flex-end;text-align:right}
  .scc-cve-detail-row>.scc-chevron{display:none}
}

/* ── Priorités, alertes et cloche (sous 640 px) ──
   Une carte par cible : composant (et son bouton d'action) et gravité en tête, site et délai
   restant dessous ; rang, score, criticité et ancienneté restent dans la fiche du module. Le
   min-width:960px de la rangée ne s'applique plus. Alertes : une colonne dès 860 px (existant).
   Cloche : panneau en pleine largeur sous l'en-tête (bloc conteneur : .scc-header, collant), à la
   hauteur de la zone visible (100dvh ; 100vh d'abord, repli des navigateurs qui ne le connaissent pas). */
@media (max-width: 640px) {
  .scc-prio-header-row{display:none}
  .scc-prio-row{min-width:0;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mod sev" "site sla";gap:8px 12px;padding:14px 16px;align-items:start}
  .scc-prio-mod-cell{grid-area:mod}
  .scc-prio-mod-name{display:block}
  .scc-prio-sev-cell{grid-area:sev;align-items:flex-end}
  .scc-prio-site-cell{grid-area:site}
  .scc-prio-sla{grid-area:sla;justify-self:end;text-align:right}
  .scc-prio-rank,.scc-prio-score-cell,.scc-prio-crit-cell,.scc-prio-age,.scc-prio-row>.scc-chevron{display:none}
  .scc-event-row{padding:12px 14px}
  .scc-alert-channel{min-width:0;flex:1 1 100%}
  .scc-notif-wrap{position:static}
  .scc-notif-dropdown{top:100%;left:0;right:0;width:auto;max-height:calc(100vh - var(--scc-header-h));max-height:calc(100dvh - var(--scc-header-h));border-left:0;border-right:0;border-radius:0 0 13px 13px}
  .scc-notif-list{max-height:calc(100vh - var(--scc-header-h) - 100px);max-height:calc(100dvh - var(--scc-header-h) - 100px)}
}

/* ── Synthèse de direction (sous 640 px) ──
   Chiffres clés en 2 colonnes (la macro du PDF pose une largeur en ligne sur chaque cellule :
   !important, seul moyen de la lever) ; tableau des notes en cartes (site, puis note et
   variation). Les cellules n'ont pas de classe propre (partiel partagé avec le PDF, classes du
   thème seulement) : zones par position. */
@media (max-width: 640px) {
  .scc-exec-card{padding:18px 16px}
  .scc-report-head{align-items:stretch}
  .scc-exec .pdf-kpi,.scc-exec .pdf-kpi tbody{display:block;margin:4px 0 14px}
  .scc-exec .pdf-kpi tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .scc-exec .pdf-kpi td{display:block;width:auto!important}
  .scc-exec .pdf-exec-rows,.scc-exec .pdf-exec-rows tbody{display:block}
  .scc-exec .pdf-exec-rows thead{display:none}
  .scc-exec .pdf-exec-rows tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"site site" "note delta";gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--scc-border)}
  .scc-exec .pdf-exec-rows td{padding:0;border-bottom:0}
  .scc-exec .pdf-exec-rows td:nth-child(1){grid-area:site;font-weight:600;color:var(--scc-text);overflow-wrap:anywhere}
  .scc-exec .pdf-exec-rows td:nth-child(2){grid-area:note}
  .scc-exec .pdf-exec-rows td:nth-child(3){grid-area:delta;text-align:right}
}

/* ── Autres écrans (sous 640 px) ──
   Hors mise en page dédiée (spec, hors lot) : leurs tableaux défilent dans .scc-table-wrap. Les
   largeurs fixes qui dépassent l'écran sont plafonnées (champs de recherche de 200 à 360 px,
   éditeur de rapport) ; le kanban de Remédiation passe en colonnes empilées. */
@media (max-width: 640px) {
  .scc-main input,.scc-main select,.scc-main textarea{max-width:100%}
  .scc-list-filter{max-width:100%}
  .scc-page-head{flex-wrap:wrap}
  .scc-page-actions{flex-wrap:wrap}
  .scc-kanban{grid-template-columns:minmax(0,1fr)}
  .scc-help-grid{grid-template-columns:minmax(0,1fr)}
  /* /confiance, /methode-du-score, Aide (g5, R1) : la 1re colonne en Mono (clés des faits) prenait
     presque toute la largeur ; elle se coupe où il faut, et les cellules se resserrent. */
  .scc-help-section .scc-table th,.scc-help-section .scc-table td{padding:8px}
  .scc-help-section .scc-table td.scc-mono{overflow-wrap:anywhere}
  /* Indice de défilement : ombre au bord droit tant que le tableau dépasse ; un cache à la couleur
     de la carte, attaché au contenu (local), la recouvre une fois arrivé au bout. */
  .scc-help-section .scc-table-wrap{background:linear-gradient(to right,var(--scc-surface),var(--scc-surface)) 100% 0/14px 100% no-repeat local,linear-gradient(to left,color-mix(in srgb,var(--scc-text) 16%,transparent),transparent) 100% 0/14px 100% no-repeat scroll}
}

/* ── Vue en direct (sous 640 px) ──
   Cartes de site sur une colonne (spec du lot « vue en direct », § 2). Le fil passe déjà sous les
   cartes en deçà de 1100 px (live.css). */
@media (max-width: 640px) {
  .scc-live-cards{grid-template-columns:minmax(0,1fr)}
}

/* ── Tableaux en cartes (sous 640 px, C-11) ──
   Recette § 12 générique : <table class="scc-table scc-table--cards">. En-tête masqué ; chaque ligne
   devient une carte en grille minmax(0,1fr) auto : la cellule-titre (.scc-cell-title) en tête, une
   cellule à sa droite (.scc-cell-aside : note, état, gravité), puis chaque cellule sur sa ligne avec
   son data-label, et les actions (.scc-cell-actions) en bas, à la ligne. Plus d'action hors écran
   ni de colonne écrasée lettre par lettre. */
@media (max-width: 640px) {
  .scc-table--cards,.scc-table--cards tbody{display:block;width:100%}
  .scc-table--cards thead{display:none}
  .scc-table--cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--scc-border)}
  .scc-table--cards tr:last-child{border-bottom:0}
  .scc-table--cards td{grid-column:1 / -1;display:block;min-width:0;padding:0;border:0;overflow-wrap:anywhere}
  .scc-table--cards .scc-cell-title{grid-column:1;font-weight:600;color:var(--scc-text)}
  .scc-table--cards .scc-cell-aside{grid-column:2;grid-row:1;justify-self:end;text-align:right}
  .scc-table--cards .scc-cell-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;white-space:normal}
  .scc-table--cards .scc-cell-actions>*{margin:0}
  /* Cellule vide (« Motif » d'une demande en attente) : aucune ligne de carte, pas d'écart de plus. */
  .scc-table--cards td:empty{display:none}
}

/* ── Lignes de liste sur mobile (sous 640 px, C-12) ──
   Chronologie, historique d'intervention et Journal d'audit : la date passe sur sa propre ligne,
   alignée sur le texte (pastille + écart) ; elle n'écrase plus le texte ni ne le recouvre.
   Échéances : le bloc date passe sous le texte, aligné à gauche sur le titre. Cartes du tableau de
   bord : le pied passe à la ligne entre ses groupes, jamais au milieu d'un groupe. */
@media (max-width: 640px) {
  .scc-tl-row,.scc-audit-item{flex-wrap:wrap;column-gap:12px;row-gap:2px}
  .scc-tl-row-body,.scc-audit-text{flex:1 1 0}
  .scc-tl-row-when{flex-basis:100%;padding-left:23px;white-space:normal}
  .scc-audit-when{flex-basis:100%;padding-left:22px;white-space:normal}
  .scc-deadline-date{flex-basis:100%;padding-left:22px;text-align:left}
  .scc-site-foot{flex-wrap:wrap;row-gap:4px}
  .scc-site-foot>*{white-space:nowrap}
}

/* ── Fiche site et fiche module, compléments (sous 640 px) ──
   Filtres des modules : quatre boutons qui passent à la ligne plutôt qu'une barre qui rogne
   « Exploitées » de quelques pixels ; onglets : fondu en bout de barre pour signaler le défilement,
   seulement quand des onglets restent à droite (header.js pose .has-more ; revue V0a, M6), et une
   marge de fondu pour que le dernier onglet reste entier au bout du défilement (g2-24).
   Cartes Gouvernance et Priorisation de la fiche module à 16 px comme les autres (g2-23). */
@media (max-width: 640px) {
  .scc-mods-bar .scc-filters{flex-wrap:wrap;overflow-x:visible}
  .scc-tabs{padding-right:24px}
  .scc-tabs.has-more{-webkit-mask-image:linear-gradient(to right,black calc(100% - 24px),transparent);mask-image:linear-gradient(to right,black calc(100% - 24px),transparent)}
  .scc-mod-gov-card,.scc-mod-prio-card{padding:16px}
}

/* ── Confirmation en ligne (sous 640 px, g4-14) ──
   Le panneau revient dans le flux, à la largeur de son conteneur : en popover, il dépassait de
   l'écran hors tableau (Paramètres). Plus besoin de réserve sous le tableau.
   Dans une carte (.scc-cell-actions en flex), la confirmation ouverte prend toute la ligne : le
   panneau se pose sous son bouton, à la largeur de la carte, sans écraser le bouton (g4-14). */
@media (max-width: 640px) {
  .scc-confirm-panel{position:static;width:auto;max-width:100%;margin-top:8px}
  .scc-table-wrap:has(.scc-confirm[open])::after{display:none}
  .scc-cell-actions>.scc-confirm[open]{flex:1 0 100%;display:block}
  .scc-confirm summary{white-space:nowrap}
}

/* ── Hub « état du site » (sous 900 px) : tuiles en 2 × 2 ── */
@media (max-width: 900px) {
  .scc-hub{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Hub et onglet Performance (sous 640 px) : une colonne ── */
@media (max-width: 640px) {
  .scc-hub{grid-template-columns:minmax(0,1fr)}
  .scc-perf-grid{grid-template-columns:minmax(0,1fr)}
  .scc-perf-eco{align-items:flex-start}
}