/* =====================================================================
   Simulation avancée — module, phase 8.

   Aucune couleur nouvelle : les jetons de `01-variables-reset.css` sont
   réutilisés tels quels, y compris ceux corrigés au Cycle 25 pour le
   contraste. Un module qui invente sa palette rouvre le sujet du
   contraste dans deux thèmes, et le rouvre mal.
   ===================================================================== */

/* La barre défile à toute largeur plutôt que de s'empiler.
   Sur un écran large tout tient, et rien ne défile : la règle ne coûte
   donc rien là où elle ne sert pas. Sur une tablette à 820 px, elle
   ramène sept onglets de deux lignes à une — 109 px de haut ramenés
   à 57. Le dégradé de droite dit qu'il reste quelque chose hors cadre,
   parce qu'on ne cherche pas ce dont on ignore l'existence. */
.onglets{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    gap:var(--space-2);
    margin-bottom:var(--space-5);
    border-bottom:1px solid var(--border);
    padding-bottom:var(--space-3);
    mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

/* Rien ne dépasse : pas de dégradé, il ferait croire à tort qu'il reste
   un onglet caché. */
@supports (animation-timeline: scroll()) {
    .onglets{ mask-image:none; }
}

.onglet{
    flex:0 0 auto;
    scroll-snap-align:start;
    background:transparent;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4);
    /* 44 px : le minimum retenu par WCAG 2.5.5 comme par les
       recommandations d'Apple et de Google. Ils mesuraient 42 px —
       deux pixels, mais du côté qui fait rater le clic, et le manque
       se paie au doigt, pas à la souris. */
    min-height:44px;
    font-size:14px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
    white-space:nowrap;
}

/* Encre d'aplat, comme `.primary-button`.

   Cette règle portait `#ffffff` en dur et se réparait la nuit par une
   seconde règle, parce que `--encre-bouton-plein` n'était défini QUE dans
   le thème sombre : employé de jour, un `var()` qui ne résout rien rend la
   propriété invalide et fait retomber la couleur sur `--text` héritée —
   l'onglet actif tombait alors à 3,43:1, sans erreur et sans trace.

   Le token existe désormais dans les deux thèmes (Cycle 133) : une seule
   règle suffit, et la contrepartie `body.dark` a disparu avec sa cause. */
.onglet[aria-selected="true"]{
    background:var(--primary);
    border-color:var(--primary);
    color:var(--encre-bouton-plein);
}

.panneau[hidden]{ display:none; }

/* Le verdict global, en tête : le §9.3 demande qu'il soit visible avant
   tout chiffre. Trois états, distingués par la bordure ET par le texte —
   jamais par la seule couleur. */
.sa-verdict{
    border-left:4px solid var(--border);
    padding:var(--space-4);
    border-radius:var(--radius-md);
    background:var(--surface-muted);
    margin-bottom:var(--space-5);
}

.sa-verdict--exploitable{ border-left-color:#15803d; }
.sa-verdict--hypotheses{ border-left-color:#b45309; }
.sa-verdict--bloque{ border-left-color:var(--danger-texte); }

.sa-verdict h3{ margin:0 0 var(--space-2); font-size:16px; }
.sa-verdict p{ margin:0; color:var(--text); }

/* Un tableau large ne déborde pas : il défile. Le débordement horizontal
   du tableau d'historique, trouvé au Cycle 25, ne se reproduit pas ici. */
.sa-tableau-defilant{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.sa-tableau{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    min-width:760px;
}

.sa-tableau th,
.sa-tableau td{
    padding:var(--space-3);
    text-align:right;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

.sa-tableau th:first-child,
.sa-tableau td:first-child{ text-align:left; }

.sa-tableau thead th{
    font-weight:700;
    color:var(--text);
    background:var(--surface-muted);
    position:sticky;
    top:0;
}

/* Une ligne non conforme se distingue par un fond ET par une mention
   écrite dans la première colonne : la couleur seule ne se lit pas. */
.sa-ligne--non-conforme{ background:var(--badge-danger-fond); }

.sa-badge{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    padding:2px var(--space-2);
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    color:var(--text);
    background:var(--surface-muted);
    white-space:nowrap;
}

.sa-badge--official{ border-color:#15803d; }
.sa-badge--convention{ border-color:#1d4ed8; }
.sa-badge--company{ border-color:var(--text-light); }
.sa-badge--assumption,
.sa-badge--to_confirm{ border-color:#b45309; font-weight:800; }

.sa-kpis{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:var(--space-4);
    margin-bottom:var(--space-5);
}

.sa-kpi{
    background:var(--surface-muted);
    border-radius:var(--radius-md);
    padding:var(--space-4);
}

.sa-kpi dt{ font-size:13px; color:var(--text-light); margin-bottom:var(--space-1); }
.sa-kpi dd{ margin:0; font-size:22px; font-weight:700; color:var(--text); }

.sa-controle{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:var(--space-3);
    padding:var(--space-3) 0;
    border-bottom:1px solid var(--border);
}

.sa-controle p{ margin:0 0 var(--space-1); }
.sa-controle .sa-action{ color:var(--text-light); font-size:14px; }

.sa-matrice td.sa-atteint{ font-weight:700; }
.sa-matrice td.sa-insuffisant{ color:var(--danger-texte); }

@media (max-width: 600px){

    /* Sept onglets qui passent à la ligne occupaient QUATRE lignes et
       205 px de haut sur un écran de 390 px — plus d'un cinquième de
       l'écran dépensé en navigation avant le moindre contenu.
       Ils défilent maintenant sur une seule ligne. */
    .sa-kpis{ grid-template-columns:1fr 1fr; }

}