/* sica-ui.css : la direction artistique de SICA, en un seul endroit.

   Toute page autonome de prog/ charge cette feuille EN PREMIER, puis la sienne
   pour ce qui lui est propre. Le CSS de page ne redéfinit ni jeton, ni thème
   sombre, ni primitive : il consomme.

   Les valeurs viennent de prog/generation_ouvrage.php, prise comme référence de
   la DA. Voir documents/ADR/0058-da-sica-socle-partage.md.

   Trois règles tiennent tout le reste :
     1. aucune couleur en dur, tout passe par un jeton ;
     2. le thème sombre ne redéfinit QUE des jetons, jamais une règle ;
     3. arrondis, ombres et police sortent des jetons de géométrie.

   Trois couches, et une seule demande quelque chose à la page :

     1. LES JETONS. Universels. Une page les reçoit du seul fait de charger cette
        feuille, et le thème sombre suit. C'est le minimum vital d'une page qui
        rejoint la DA.
     2. LA COQUILLE (reset, fond, typographie des titres). Elle ne s'applique
        qu'aux pages qui la réclament, en posant `class="sica"` sur leur <body> :
        elle change la mise en page, on ne l'impose pas dans le dos d'un écran
        qu'on n'a pas rouvert.
     3. LES PRIMITIVES (.panel, .btn, .badge, .pill, .kpi...). Elles ne coûtent
        rien à qui n'écrit pas ces classes, donc pas d'opt-in.

   Une page migre donc en deux temps : ses jetons d'abord (sans risque), sa
   coquille et ses primitives quand on la rouvre. */

/* ------------------------------------------ couche 1 : les jetons */

:root {
    /* Police : une seule pour tout SICA. */
    --font: "Segoe UI", Tahoma, Arial, sans-serif;
    --font-mono: "SF Mono", Consolas, "Courier New", monospace;

    /* Géométrie : quatre arrondis, pas un de plus.
       lg = panneau, md = bloc et carte, sm = bouton et bandeau, pill = badge. */
    --radius-lg: 16px;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;

    /* Ombres : panel pour ce qui flotte au-dessus de la page, soft pour ce qui
       se détache à peine. --shadow ne porte que la couleur, pour que le thème
       sombre l'assombrisse sans réécrire les géométries. */
    --shadow: rgba(15, 23, 42, .07);
    --shadow-panel: 0 8px 24px var(--shadow);
    --shadow-soft: 0 4px 12px var(--shadow);

    /* Fonds et texte. */
    --paper: #e2e8f0;
    --panel: #fff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;
    --surface-accent: #edf3fc;
    --ink: #0f172a;
    --muted: #52606d;
    --on-navy: #fff;

    /* Traits et pistes. */
    --line: #d7dde5;
    --line-soft: #edf0f4;
    --input-line: #cbd5e1;
    --btn-line: #c7d0dc;
    --btn-bg: #fff;
    --nav-line: #cbd5e1;
    --empty-line: #bdc8d6;
    --track: #e3e9f2;

    /* Marque et accents. --navy n'est pas un bleu de thème choisi à l'œil : c'est
       LE bleu d'Adonis Education, celui de la charte. Il ne se réajuste pas pour
       faire joli sur un écran, et une page qui a besoin d'un autre bleu prend
       --blue, qui est un accent fonctionnel. */
    --navy: #172C48;
    --navy-hover: #243f7a;
    --blue: #1f4bd8;
    --green: #16845b;
    --amber: #f59e0b;
    --red: #b91c1c;
    /* L'or Adonis : la seule couleur de marque du groupe, tenue a l'ecart des
       accents fonctionnels (bleu, vert, ambre, rouge) qui, eux, disent un etat. */
    --gold: #DBAC21;
    /* Rampe CATÉGORIELLE des graphiques : une teinte par série, dans cet ordre, et
       jamais recyclée. Au-delà de quatre séries, la queue se replie sur --serie-autre
       plutôt que d'inventer une cinquième teinte, qui serait indistinguable des
       précédentes pour un daltonien.

       Elle vit ici et non dans la feuille d'une page parce qu'une couleur de série
       est une décision de DA, et parce que le contrôle CI refuse justement une
       couleur écrite ailleurs.

       Les quatre pas clairs SONT --blue, --gold, --green et --red : la palette des
       graphiques est celle de SICA, pas une deuxième à tenir. Les pas sombres, eux,
       sont choisis et non déduits, la bande de luminosité lisible sur fond sombre
       n'étant pas celle du fond clair.

       Mesurée, pas estimée (OKLab, paires adjacentes) : bande de luminosité, plancher
       de chroma, séparation sous daltonisme et contraste sur la surface. Deux
       avertissements subsistent et sont couverts par un encodage secondaire OBLIGATOIRE
       partout où ces teintes servent : légende, étiquettes directes et tableau de
       valeurs. Le vert et le rouge sont à 7,8 de séparation en deutéranopie, dans la
       bande basse tolérée ; l'or est sous 3:1 de contraste en thème clair. Sans
       légende ni tableau, cette rampe n'est pas conforme. */
    --serie-1: #1f4bd8;
    --serie-2: #DBAC21;
    --serie-3: #16845b;
    --serie-4: #b91c1c;
    --serie-autre: #52606d;

    --badge-bg: #e8eef7;
    /* Le halo de focus et le voile des modales, les deux seuls endroits ou une
       couleur du socle est semi-transparente. */
    --focus: rgba(23, 44, 72, .14);
    --voile: rgba(23, 45, 74, .35);
    /* La hachure d'un jour qui ne concerne pas la personne. DEUX teintes : avec
       une seule ce n'est plus une hachure mais un aplat, qu'on confond avec le
       gris du week-end. Leur moyenne est plus sombre que les surfaces, pour que
       « cela ne le concerne pas » se distingue de « jour non ouvré ». */
    --hachure-a: #e9eef5;
    --hachure-b: #d8e0ea;

    /* Neutre : ce qui n'est ni bon, ni mauvais, ni en attente d'un jugement. */
    --neutral-bg: #eef2f7;
    --neutral-ink: #475569;
    --neutral-line: #cbd5e1;
    --neutral-strong: #94a3b8;

    /* États. Pour chacun : deux encres, un trait, un fond franc (badge), un fond
       doux (bandeau) et une teinte (fond de carte). */
    --ok-ink: #087348;
    --ok-ink-strong: #166534;
    --ok-line: #86efac;
    --ok-bg: #dcfce7;
    --ok-bg-soft: #e9f6ef;
    --ok-tint: #f0faf5;

    --warn-ink: #92400e;
    --warn-ink-soft: #b45309;
    --warn-accent: #d97706;
    --warn-line: #fcd34d;
    --warn-bg: #fef3c7;
    --warn-tint: #fffbeb;

    --bad-ink: #b91c1c;
    --bad-ink-strong: #991b1b;
    --bad-line: #fecaca;
    --bad-bg: #fee2e2;
    --bad-bg-soft: #feecec;
    --bad-tint: #fff5f5;
    --bad-btn-line: #efb4b4;
    --bad-btn-bg: #fffafa;
}

/* Thème sombre : que des jetons. Si une règle a besoin d'un `html.dark-mode`
   pour tomber juste, c'est qu'il lui manque un jeton, pas une exception. */
html.dark-mode {
    --shadow: rgba(0, 0, 0, .35);

    /* Rampe catégorielle : des pas CHOISIS pour le fond sombre, pas un éclaircissement
       automatique des pas clairs. La bande de luminosité lisible sur --panel sombre est
       plus étroite et plus basse que sur fond blanc, et les pas clairs y tombent tous en
       dehors. Même ordre, mêmes familles de teinte : un service garde sa couleur en
       changeant de thème. Validée sur --panel : bande, chroma, daltonisme et contraste. */
    --serie-1: #4f8df5;
    --serie-2: #ad8a22;
    --serie-3: #15a074;
    --serie-4: #e05a52;
    --serie-autre: #94a3b8;

    --paper: #0f172a;
    --panel: #1e293b;
    --surface-2: #172033;
    --surface-3: #1b2740;
    --surface-accent: #1d2a44;
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --on-navy: #0b1220;

    --line: #334155;
    --line-soft: #2a3a52;
    --input-line: #3f4d63;
    --btn-line: #3f4d63;
    --btn-bg: #1e293b;
    --nav-line: #334155;
    --empty-line: #3f4d63;
    --track: #334155;

    /* Accents désaturés : à luminosité égale, une saturation de 55 à 70 %
       tient le contraste (>= 5.6 sur le panneau) sans crier à côté des
       neutres, qui sont eux à 20-32 %. */
    --navy: #7ca8de;
    --navy-hover: #a7c6e9;
    --blue: #7ca8de;
    --green: #40c796;
    --amber: #deb241;
    --red: #e38686;
    --gold: #deb241;
    --badge-bg: #243352;
    --focus: rgba(124, 168, 222, .25);
    --voile: rgba(0, 0, 0, .45);
    --hachure-a: #111a28;
    --hachure-b: #1d2839;

    --neutral-bg: #243044;
    --neutral-ink: #cbd5e1;
    --neutral-line: #3f4d63;
    --neutral-strong: #64748b;

    --ok-ink: #59cf84;
    --ok-ink-strong: #95e0b0;
    --ok-line: #166534;
    --ok-bg: #14321f;
    --ok-bg-soft: #132b1e;
    --ok-tint: #132218;

    --warn-ink: #e4c665;
    --warn-ink-soft: #deb241;
    --warn-accent: #d99727;
    --warn-line: #92400e;
    --warn-bg: #3b2c0c;
    --warn-tint: #2c220e;

    --bad-ink: #edb4b4;
    --bad-ink-strong: #edb4b4;
    --bad-line: #7f1d1d;
    --bad-bg: #3f1717;
    --bad-bg-soft: #391414;
    --bad-tint: #2a1414;
    --bad-btn-line: #7f1d1d;
    --bad-btn-bg: #2a1414;

    color-scheme: dark;
}

/* ------------------------------------------- couche 2 : la coquille (opt-in)

   Réservée aux pages qui posent `class="sica"` sur leur <body>. Sans ce
   marqueur, une page ne récupère que les jetons et les primitives : son fond,
   ses marges et ses titres restent ceux qu'elle s'est donnés. */

body.sica {
    margin: 0;
    min-height: 100vh;
    padding: 28px;
    font-family: var(--font);
    color: var(--ink);
    background: var(--paper);
}

body.sica * { box-sizing: border-box; }
/* Trois niveaux, et un seul gros : le titre de page. Un h2 est un titre de
   section DANS un panneau, il n'a pas à rivaliser avec lui. */
body.sica h1 { margin: 5px 0 7px; font-size: 34px; }
body.sica h2 { margin: 0 0 5px; font-size: 20px; }
body.sica h3 { margin: 0; font-size: 16px; }
body.sica input[type="checkbox"] { accent-color: var(--navy); }

@media (max-width: 760px) {
    body.sica { padding: 14px; }
}

/* Ces quatre-là ne changent aucune mise en page : un contrôle de formulaire qui
   hérite de la police du document, du monospace sur du code, [hidden] qui
   redevient effectif face à un display: flex, et des barres de défilement fines,
   qui ne mangent pas la largeur d'une colonne. Ils valent partout. */
button, input, select, textarea { font: inherit; }
code, pre { font-family: var(--font-mono); }
[hidden] { display: none !important; }
* { scrollbar-width: thin; }

/* --------------------------------------------- couche 3 : les primitives

   Uniquement des classes : une page qui n'écrit pas `.panel` n'en subit rien.
   Le seul point d'attention est le nom : si une page porte déjà `.btn` avec un
   autre sens (Bootstrap, par exemple), elle doit charger sa feuille APRÈS
   celle-ci, ce que teteDePage fait par défaut. */

/* .shell borne la largeur utile et centre. La page n'a pas à refaire ce calcul. */
.shell { width: min(1260px, 100%); margin: auto; }

.hero p, .section-head p, .meta { margin: 0; color: var(--muted); line-height: 1.5; }

/* .eyebrow : le fil d'ariane textuel au-dessus du titre (« Ouvrage - Génération »). */
.eyebrow {
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.panel {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: var(--shadow-panel);
}

/* ---------------------------------------------------------------- navigation */

.page-nav, .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--nav-line);
    margin-bottom: 20px;
}

.page-nav a, .tab {
    padding: 11px 15px;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    background: transparent;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.page-nav a.active, .page-nav a:hover, .tab.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.page-filters {
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    align-items: center;
    gap: 14px;
    margin: 0 0 8px auto;
}

.page-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.page-filter select {
    border: 1px solid var(--btn-line);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    color: var(--ink);
    background: var(--btn-bg);
    font-weight: 700;
    cursor: pointer;
}

/* ------------------------------------------------------------------ boutons */

.btn {
    display: inline-block;
    border: 1px solid var(--btn-line);
    border-radius: var(--radius-sm);
    padding: 9px 13px;
    background: var(--btn-bg);
    color: var(--navy);
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.btn.primary { border-color: var(--navy); background: var(--navy); color: var(--on-navy); }
.btn.danger { border-color: var(--bad-btn-line); color: var(--red); background: var(--bad-btn-bg); }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.small.active { border-color: var(--navy); background: var(--surface-accent); }
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; }

.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

/* --------------------------------------------------------- pastilles, états */

.badge {
    padding: 5px 9px;
    border-radius: var(--radius-pill);
    background: var(--badge-bg);
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.badge.done { background: var(--ok-bg-soft); color: var(--ok-ink); }
.badge.error { background: var(--bad-bg-soft); color: var(--red); }

/* .pill : le même objet que .badge, en plus affirmé, quand il porte un état. */
.pill {
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.pill.complete { background: var(--ok-bg); color: var(--ok-ink-strong); border: 1px solid var(--ok-line); }
.pill.partial { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); }
.pill.todo { background: var(--neutral-bg); color: var(--neutral-ink); border: 1px solid var(--neutral-line); }
.pill.failed { background: var(--bad-bg); color: var(--bad-ink-strong); border: 1px solid var(--bad-line); }

/* .status : le bandeau de retour d'une action (« 12 ouvrages générés »). */
.status {
    margin-top: 10px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: var(--ok-bg-soft);
    color: var(--ok-ink);
}

.status.error { background: var(--bad-bg-soft); color: var(--red); }

/* .empty : ce qu'on montre quand il n'y a rien à montrer. */
.empty {
    padding: 22px;
    border: 1px dashed var(--empty-line);
    border-radius: var(--radius);
    color: var(--muted);
    text-align: center;
}

/* ------------------------------------------------------------- progression */

.progress {
    height: 9px;
    margin-top: 9px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--track);
}

.progress span { display: block; height: 100%; background: var(--navy); transition: width .25s; }

/* ------------------------------------------------------------ chiffres clés */

.kpi-grid {
    display: grid;
    /* 200px : la largeur qu'il faut à un ratio de deux nombres à quatre chiffres pour
       tenir sur une ligne à la taille de police maximale. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.kpi {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--navy);
    border-radius: var(--radius);
    background: var(--surface-2);
    /* Sans cela, un enfant de grille garde une largeur minimale égale à son contenu :
       une valeur longue (« 1204/5210 ») débordait de la case au lieu de la contraindre. */
    min-width: 0;
}

.kpi-label {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* La taille cède avant la case : un ratio à quatre chiffres de chaque côté tient dans la
   colonne la plus étroite de la grille, et ce qui dépasse encore passe à la ligne au lieu
   de sortir du cadre. */
.kpi-value {
    display: block;
    margin-top: 6px;
    font-size: clamp(21px, 2.4vw, 30px);
    font-weight: 800;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.kpi-sub { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }

.kpi.ok { border-left-color: var(--green); background: var(--ok-tint); }
.kpi.ok .kpi-value { color: var(--ok-ink); }
.kpi.warn { border-left-color: var(--warn-accent); background: var(--warn-tint); }
.kpi.warn .kpi-value { color: var(--warn-ink); }
.kpi.bad { border-left-color: var(--red); background: var(--bad-tint); }
.kpi.bad .kpi-value { color: var(--red); }

/* ------------------------------------------------- le voile de chargement

   Un filtre qui se change recharge la page entière, et pendant ce temps
   l'ancienne reste à l'écran : rien ne bouge, et on croit à un gel. Le voile
   dit que ça travaille. Il est posé par assets/scripts/chargement_filtres.js
   sur les formulaires marqués `data-voile`, et disparaît de lui-même puisque
   la page qui arrive est neuve.

   Il ne s'affiche qu'après un court délai : en dessous, la réponse est déjà là
   et un voile qui clignote se remarque plus que l'attente qu'il annonce. */

.voile-chargement {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--voile);
    color: var(--on-navy);
    font-weight: 700;
    animation: voile-apparait .2s ease-out .25s both;
}

.voile-chargement span {
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    background: var(--navy);
    box-shadow: var(--shadow-panel);
}

/* La rotation dit que l'attente avance, là où un texte seul reste figé. */
.voile-chargement span::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 9px;
    border: 2px solid var(--on-navy);
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: voile-tourne .7s linear infinite;
}

@keyframes voile-apparait {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes voile-tourne {
    to { transform: rotate(360deg); }
}

/* Qui a demandé à ne pas être animé garde le voile, mais immobile : c'est le
   message qui compte, pas le mouvement. */
@media (prefers-reduced-motion: reduce) {
    .voile-chargement,
    .voile-chargement span::before { animation-duration: .01ms; animation-iteration-count: 1; }
    .voile-chargement { opacity: 1; }
}

/* ================================================= couche 4 : le mobile

   SICA se consulte aussi sur un téléphone, et une page qui déborde en largeur
   n'est pas consultable : on pousse le doigt à droite pour lire une colonne, on
   perd le début de la ligne, on abandonne. La règle du socle est donc simple, et
   le contrôle CI la fait respecter sur les lignes ajoutées :

     LE CORPS DE LA PAGE NE DÉFILE JAMAIS HORIZONTALEMENT.

   Ce qui est trop large défile DANS SON PROPRE CADRE (`.defile`), ou se replie
   (`.champs`, `.tableau-fiche`). Trois conséquences pratiques :

   - Pas de largeur fixe en pixels sur un bloc de contenu. `width: 1000px` tient
     sur un écran de bureau et déborde partout ailleurs ; `width: min(1000px,
     100%)` ou `max-width` tient dans les deux cas. C'est ce que le contrôle CI
     refuse : une largeur en dur à partir de 480 px sur une ligne ajoutée.
   - Un tableau large va dans un `.defile`. Un tableau de SAISIE, lui, se replie
     en blocs (`.tableau-fiche`) : faire défiler un formulaire est intenable.
   - Les cadres (iframe) prennent `width: 100%`, jamais un nombre de pixels.

   Voir documents/ADR/0058-da-sica-socle-partage.md. */

/* Une image, une vidéo ou un cadre ne dépasse pas de son conteneur. C'est la
   seule règle globale de cette couche : elle ne change aucune mise en page qui
   tenait déjà, et rattrape toutes celles qui débordaient. */
img, svg, video, canvas, iframe, table { max-width: 100%; }

/* .defile : le cadre qui défile à la place de la page. Un tableau de données
   large, un diagramme, une frise. */
.defile { overflow-x: auto; }

/* .champs : une grille de champs de formulaire. Autant de colonnes que la
   largeur en permet, une seule sur un téléphone, sans media query à écrire. */
.champs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

/* Un champ et son étiquette, l'une au-dessus de l'autre : c'est ce qui tient le
   mieux quand la colonne se resserre, et ce qui rend l'étiquette cliquable. */
.champ {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.champ > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.champ input,
.champ select,
.champ textarea { width: 100%; }

/* Le dessin du contrôle lui-même. L'ADR 0058 annonçait qu'il monterait ici « quand
   un cinquième écran le redemanderait » : c'est fait. Il vivait recopié dans
   gestion_frise.css, gestion_administrateur.css, adm_droits.css et
   stat_decrochage.css, à une valeur de marge intérieure près, et suivi_stages.php
   en avait besoin à son tour. Les feuilles qui gardent leurs valeurs les posent
   après celle-ci : leur rendu ne bouge pas.

   Les types sont énumérés plutôt que pris en bloc : un bouton, une case, un bouton
   radio ou un sélecteur de fichier dans un .champ ne sont pas des zones de saisie,
   et un cadre de 1 px autour d'une case à cocher se voit. */
.champ input[type="text"],
.champ input[type="search"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="url"],
.champ input[type="number"],
.champ input[type="date"],
.champ input[type="time"],
.champ input[type="password"],
.champ input:not([type]),
.champ select,
.champ textarea {
    padding: 9px 12px;
    border: 1px solid var(--input-line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--ink);
}

/* Le halo remplace le contour du navigateur : il suit l'arrondi du champ, là où le
   contour dessine un rectangle. Une case ou un bouton radio gardent le leur, sans
   quoi on ne saurait plus où l'on est au clavier. */
.champ input:not([type="checkbox"]):not([type="radio"]):focus,
.champ select:focus,
.champ textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px var(--focus);
}

/* Un champ que la page verrouille se lit encore, mais ne se prend plus pour une
   zone de saisie. */
.champ input:not([type="checkbox"]):not([type="radio"])[readonly],
.champ input:not([type="checkbox"]):not([type="radio"]):disabled,
.champ select:disabled,
.champ textarea:disabled {
    background: var(--surface-3);
    color: var(--muted);
}

/* Une zone de texte s'agrandit en hauteur, jamais en largeur : l'étirer casserait
   la grille de champs. */
.champ textarea { resize: vertical; }

/* Un champ qui prend toute la largeur de la grille : une adresse, un commentaire. */
.champ.large { grid-column: 1 / -1; }

/* .tableau-fiche : un tableau de saisie hérité, en « étiquette à gauche, champ à
   droite ». Sur un téléphone, ses deux colonnes ne tiennent pas : chaque rangée
   devient un bloc, l'étiquette au-dessus de son champ. Rien ne change au-delà,
   et le HTML du tableau reste tel quel, ce qui permet de convertir un écran sans
   le réécrire. */
@media (max-width: 760px) {
    .tableau-fiche,
    .tableau-fiche > tbody,
    .tableau-fiche > tbody > tr,
    .tableau-fiche > tbody > tr > td,
    .tableau-fiche > tr,
    .tableau-fiche > tr > td {
        display: block;
        width: auto;
        max-width: 100%;
    }

    .tableau-fiche > tbody > tr,
    .tableau-fiche > tr {
        padding: 8px 0;
        border-bottom: 1px solid var(--line-soft);
    }

    /* Une rangée alterne étiquette et champ : les cellules de rang impair sont
       donc les étiquettes, et se détachent pour qu'on sache à quoi répond le
       champ qui les suit. Impair plutôt que « la première » : les fiches
       héritées posent souvent QUATRE colonnes par rangée (étiquette, champ,
       étiquette, champ) pour tenir sur deux colonnes à l'écran, et la troisième
       cellule est une étiquette elle aussi. */
    .tableau-fiche > tbody > tr > td:nth-child(odd),
    .tableau-fiche > tr > td:nth-child(odd) {
        padding-bottom: 2px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }

    .tableau-fiche input[type="text"],
    .tableau-fiche input[type="email"],
    .tableau-fiche input[type="tel"],
    .tableau-fiche input[type="number"],
    .tableau-fiche input[type="date"],
    .tableau-fiche select,
    .tableau-fiche textarea { width: 100%; }

    /* Les champs qui se lisent en groupe (un RIB, une date en trois morceaux)
       gardent leur largeur propre : les mettre à 100 % les empilerait un par
       ligne, ce qui est pire. */
    .tableau-fiche input[size="1"],
    .tableau-fiche input[size="2"],
    .tableau-fiche input[size="3"],
    .tableau-fiche input[size="4"],
    .tableau-fiche input[size="5"],
    .tableau-fiche input[size="6"],
    .tableau-fiche input[maxlength="2"],
    .tableau-fiche input[maxlength="4"],
    .tableau-fiche input[maxlength="5"] { width: auto; }
}

/* Un panneau respire moins quand l'écran est étroit : ces 22 px de marge
   intérieure prennent un dixième de la largeur d'un téléphone. */
@media (max-width: 760px) {
    .panel { padding: 16px 14px; }
    .shell { width: 100%; }
    .page-filters { margin-left: 0; }
    .page-filter { width: 100%; }
    .page-filter select { width: 100%; }

    /* Une barre d'actions devient une colonne : trois boutons côte à côte sur
       360 px se réduisent à des cibles qu'on rate. */
    .actions { flex-direction: column; align-items: stretch; }
    .actions .btn,
    .actions button,
    .actions input[type="button"],
    .actions input[type="submit"] { width: 100%; margin: 0; text-align: center; }

    /* Les onglets défilent plutôt que de s'empiler sur cinq lignes. */
    .tabs, .page-nav { flex-wrap: nowrap; overflow-x: auto; }
    .tabs .tab, .page-nav a { flex: 0 0 auto; }

    h1, body.sica h1 { font-size: 26px; }
}

/* ================================================= couche 5 : l'impression

   Une page de SICA vit dans le cadre « bas » de frame.php. Le Ctrl+P du
   navigateur imprime donc la coquille, menu compris, et la page coupée à la
   hauteur de l'écran. Une page qu'on imprime porte son propre bouton, qui
   appelle window.print() et n'imprime que son document.

   Ce qui ne sert qu'à l'écran (choisir un autre enregistrement, les raccourcis,
   les barres d'actions, le bouton d'impression lui-même) porte `.unprint`. Le
   thème sombre, lui, s'efface le temps de l'impression : le papier est blanc,
   et une encre claire y sortirait pâle (preambuleThemeSombre, utils/ui_page.php). */
@media print {
    .unprint { display: none !important; }
}