/* ===========================================================================
   FEUILLE D'ÉCRAN — Conservation des données (SEC-05)
   Écran : Components/Pages/Admin/Conservation.razor — /admin/conservation

   POURQUOI CE FICHIER EXISTE, ET PAS UN BLOC DE PLUS DANS modele-erp.css
   Les styles d'écran s'y empilaient tous en fin de fichier, et deux branches
   ouvertes le même jour s'y télescopaient — non sur le fond, qui ne se
   recouvre jamais, mais sur la dernière ligne du fichier et sur la clé de
   cache. Une feuille par écran donne à chacun sa fin de fichier et sa clé.

   CE QUI RESTE DANS LE GABARIT : tout ce qui sert à deux écrans ou plus. Les
   cartes, la grille dense, le pied de méthode et les en-têtes de section
   (.ets-section-*, empruntés à l'écran d'état) viennent de là et ne sont pas
   redéfinis ici.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-*, y compris les
   variantes sombres qu'ils portent déjà (easytech-theme.css).
   =========================================================================== */

/* ===========================================================================
   1. L'INTERRUPTEUR

   SEUL DANS SA CARTE, ET EN TÊTE DE PAGE. C'est le seul réglage du produit
   dont l'effet ne se rattrape pas : le noyer au milieu de quatre champs
   numériques le ferait basculer par inadvertance. Sa carte change de bord
   quand il est armé — un liseré, pas un fond rouge : l'état armé est un choix
   légitime, pas une alerte, et un écran qui crie perd son crédit pour le jour
   où il aura quelque chose à dire.
   =========================================================================== */

.cns-interrupteur {
    padding: 12px 14px;
    border-left: 3px solid transparent;
}

.cns-armee {
    border-left-color: var(--et-avertissement-mark);
}

.cns-bascule {
    display: block;
}

.cns-case {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

/* La case ne rétrécit pas quand le texte s'allonge, et reste alignée sur la
   PREMIÈRE ligne du libellé plutôt que centrée sur un pavé de trois lignes. */
.cns-case > input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 2px;
}

.cns-case-txt {
    display: block;
    font-size: 13px;
    color: var(--et-ink);
    min-width: 0;
}

.cns-case-note {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--et-muted);
    line-height: 1.45;
}

/* ===========================================================================
   2. LE TABLEAU DE L'APERÇU

   Écrit à la main plutôt que servi par Tableau<T> : quatre lignes fixes, pas
   de tri, pas d'export, pas de sélection de colonnes. Le gabarit de liste
   apporterait sa barre d'outils au-dessus de quatre nombres — un cadre plus
   grand que ce qu'il encadre.

   LA COLONNE « SUPPRIMÉ » EST LA SEULE MISE EN AVANT. Les nombres sont
   alignés à droite et en chasse fixe : on les compare verticalement, et deux
   nombres de longueurs différentes ne se comparent pas en chasse variable.
   =========================================================================== */

.cns-postes {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 0;
}

.cns-postes th,
.cns-postes td {
    padding: 6px 14px;
    text-align: left;
    border-bottom: 1px solid var(--et-hairline);
}

.cns-postes thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--et-muted);
    background: var(--et-surface-2);
}

.cns-num {
    text-align: right;
    font-family: var(--et-font-mono);
    white-space: nowrap;
}

/* Ce qui part. La couleur d'avertissement, pas celle du danger : la purge
   fait ce qu'on lui a demandé — elle n'est pas en panne. */
.cns-part {
    color: var(--et-avertissement-ink);
    font-weight: 600;
}

/* Ce que la table contient : présent pour donner l'échelle, en retrait pour
   ne pas se disputer la lecture avec la colonne qui compte. */
.cns-total {
    color: var(--et-muted);
}

.cns-postes tfoot td {
    border-bottom: 0;
    border-top: 1px solid var(--et-hairline);
    font-weight: 600;
    background: var(--et-surface-2);
}

/* ===========================================================================
   3. LE BLOC « CALCUL NON LANCÉ » ET LE PIED DE L'APERÇU
   =========================================================================== */

.cns-apercu-vide {
    padding: 14px;
    font-size: 13px;
    color: var(--et-muted);
}

.cns-apercu-vide p {
    margin: 0 0 10px 0;
    max-width: 62ch;
}

.cns-apercu-pied {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
}

.cns-apercu-heure {
    font-size: 12px;
    color: var(--et-muted);
}

/* ===========================================================================
   4. CE QUI N'EST JAMAIS PURGÉ

   Une liste, pas un tableau : ce sont des raisons, pas des valeurs. Elle se
   lit d'un bout à l'autre, et une largeur de lecture bornée y sert plus qu'un
   alignement en colonnes.
   =========================================================================== */

.cns-protege {
    margin: 0;
    padding: 12px 14px 14px 32px;
    font-size: 13px;
    color: var(--et-ink);
    line-height: 1.5;
}

.cns-protege li {
    margin-bottom: 8px;
    max-width: 82ch;
}

.cns-protege li:last-child {
    margin-bottom: 0;
}

/* ===========================================================================
   5. PALIERS

   Recette à 390 / 768 / 1280 / 1600 px (docs/conventions-responsive.md), et
   paliers pris dans l'échelle retenue. Pas de palier à 980 px : rien à y
   porter.
   =========================================================================== */

/* Règle tactile (docs/cibles-tactiles.md) : sous 1024 px, aucune cible ne
   descend sous 44 px — et une cible ne rétrécit jamais. Cet écran a trois
   boutons et une case à cocher, qui est la cible la plus importante de la
   page : c'est elle qui arme une suppression définitive. */
@media (max-width: 1024px) {
    .ecran-tete .mx-outils .mx-btn,
    .cns-apercu-vide .mx-btn,
    .cns-apercu-pied .mx-btn { min-height: 44px; }

    /* Marche tactile retiree le 2026-09-10 : lot02 la pose une fois pour toutes
       les cases natives du back-office, a 24 px. Voir docs/cibles-tactiles.md. */
    .cns-case > input[type="checkbox"] { margin-top: 0; }

    /* La zone cliquable du libellé porte la hauteur tactile, plutôt que
       d'agrandir la case au-delà de ce qu'une case doit mesurer. */
    .cns-case { min-height: 44px; align-items: center; }
}

/* Le tableau d'aperçu tient à quatre colonnes jusque très bas — trois nombres
   courts et un libellé. C'est le LIBELLÉ qui casse : on lui rend la place en
   réduisant les gouttières plutôt qu'en masquant une colonne, dont aucune
   n'est secondaire ici. */
@media (max-width: 720px) {
    .cns-postes th,
    .cns-postes td { padding: 6px 8px; }

    .cns-protege { padding-left: 26px; }
}

@media (max-width: 560px) {
    .cns-interrupteur { padding: 10px 12px; }
    .cns-apercu-vide,
    .cns-apercu-pied { padding-left: 12px; padding-right: 12px; }

    /* En dessous, « Contenu » est la seule colonne qui ne serve qu'à donner
       l'échelle : elle passe à la ligne du dessous plutôt que de comprimer
       les trois autres. */
    .cns-postes { font-size: 12px; }
}