/* ══════════════════════════════════════════════════════════════════════════
   COUCHE DE MARQUE ANCRAGE
   ──────────────────────────────────────────────────────────────────────────
   Ce fichier était deux blocs <style> dans index.html jusqu'au 29/07/2026.
   Il en est sorti pour une seule raison : tant qu'un style en ligne existait
   dans une page servie, la politique de sécurité de contenu devait porter
   `style-src 'unsafe-inline'`, c'est-à-dire autoriser N'IMPORTE quel style
   injecté dans la page. Le contenu n'a pas changé d'une ligne ; il est
   simplement servi comme fichier, donc couvert par `style-src 'self'`.

   Il se charge APRÈS le système de base (_ds/…/styles.css) : c'est cet ordre
   qui lui permet de recouvrir ce qu'il doit recouvrir. Inverser les deux
   `<link>` d'index.html casserait la marque sans rien signaler.
   ══════════════════════════════════════════════════════════════════════ */


  /* ══ IDENTITÉ ANCRAGE ═══════════════════════════════════════════════════
     La couche de marque, posée APRÈS le système de base pour le recouvrir.
     Cinq couleurs seulement — vert 315C4A, sauge 8FAF9D, crème F1F6F2,
     or D9A441, brun 4B362B — toutes les nuances par intensité ou opacité.
     Une seule famille : Instrument Sans, du Regular au Bold, l'aération se
     joue sur l'espacement des lettres. Les jetons de couleur vivent dans
     themes.js ; ici, ce que les jetons ne peuvent pas dire : la typographie
     et la physionomie des composants. */
  :root {
    --font-heading: 'Instrument Sans', system-ui, sans-serif;
    --font-body: 'Instrument Sans', system-ui, sans-serif;
    --font-heading-weight: 600;
  }
  body { font-size: 15px; letter-spacing: 0.005em; }

  /* Les titres portent le vert de la marque ; le texte courant reste brun. */
  h1, h2, h3, h4, h5 { color: var(--color-titre, #315C4A); letter-spacing: -0.015em; }
  h1 { font-size: 38px; } h2 { font-size: 29px; } h3 { font-size: 23px; }
  h6 { letter-spacing: 0.12em; font-weight: 500; }

  /* L'action est OR, texte brun — le vert reste aux liens et à la structure.
     Le système de base peint .btn-primary en accent : on le recouvre. */
  .btn { border-radius: var(--radius-md, 10px); font-weight: 600; letter-spacing: 0.01em; }
  .btn-primary { background: var(--color-accent-2, #D9A441); color: var(--color-brun, #4B362B); }
  .btn-primary:hover { background: color-mix(in srgb, var(--color-accent-2, #D9A441) 86%, var(--color-brun, #4B362B)); }
  .btn-primary:active { background: color-mix(in srgb, var(--color-accent-2, #D9A441) 74%, var(--color-brun, #4B362B)); }
  .btn-ghost { font-weight: 500; }

  /* Champs : plus clairs que la carte qui les porte, cernés de sauge. */
  .input {
    background: color-mix(in srgb, var(--color-surface, #F1F6F2) 45%, white);
    border-color: color-mix(in srgb, #8FAF9D 55%, transparent);
    border-radius: var(--radius-sm, 6px);
  }
  .input:hover { border-color: #8FAF9D; }
  .input:focus-visible { border-color: var(--color-accent, #315C4A); }

  /* Tableaux : en-tête en petites capitales sauge-vert, filets légers. */
  .table th {
    font-weight: 500; letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--color-accent, #315C4A) 55%, #8FAF9D);
    border-bottom: 1px solid color-mix(in srgb, #8FAF9D 60%, transparent);
  }
  .table td { border-bottom: 1px solid color-mix(in srgb, #8FAF9D 35%, transparent); }
  .table tbody tr:hover { background: color-mix(in srgb, #8FAF9D 14%, transparent); }

  .tag { border-radius: 999px; font-weight: 500; }
  .card { box-shadow: var(--shadow-sm); }
  ::selection { background: color-mix(in srgb, #D9A441 35%, transparent); }

  /* ══ HARMONISATION DES ÉCRANS ═══════════════════════════════════════════
     Les écrans posent leurs styles en ligne — trente fichiers, des dizaines
     de panneaux. Plutôt que de les réécrire un à un, cette couche normalise
     par sélecteur d'attribut, avec !important quand il faut battre le style
     en ligne. Trois règles de la maquette :
       · plus aucun filet de 2px — tout trait est un souffle de 1px ;
       · tout panneau porteur (fond crème ou cadre) est arrondi ;
       · les titres de section sont amples et verts.
     Le jour où les écrans seront réécrits proprement, cette couche meurt. */
  main [style*="border: 2px solid"]        { border-width: 1px !important; }
  main [style*="border-top: 2px solid"]    { border-top-width: 1px !important; }
  main [style*="border-bottom: 2px solid"] { border-bottom-width: 1px !important; }
  main [style*="border-left: 2px solid"]   { border-left-width: 1px !important; }
  main [style*="border-right: 2px solid"]  { border-right-width: 1px !important; }

  /* Panneaux : un fond crème ou un cadre sans rayon propre s'arrondit. Les
     éléments qui fixent déjà leur rayon en ligne gardent le leur (le style
     en ligne gagne sur une règle sans !important — c'est voulu). */
  main [style*="background: var(--color-surface)"],
  main [style*="border: 2px solid"],
  main [style*="border: 1px solid var(--color-divider)"],
  main [style*="border: 1px solid var(--color-accent)"] { border-radius: var(--radius-md); }

  /* Pas d'overflow:hidden sur ces panneaux, même pour la beauté des coins :
     les bulles d'aide « ? » se positionnent en absolu depuis l'intérieur et
     seraient découpées. Les barres internes sont déjà en pilule. */

  /* ══ ALIGNEMENT DES RANGÉES DE CHAMPS ═════════════════════════════════
     Le défaut : les formulaires en grille étaient alignés par le BAS
     (align-items: end). Or la hauteur d'une boîte de champ dépend de son
     texte d'aide — présent ou absent, sur une ligne ou deux. Aligner par le
     bas revenait donc à décaler les champs vers le haut de la hauteur de
     leur propre aide : jusqu'à 38 px d'écart entre deux colonnes voisines.

     La règle juste : ce sont l'ÉTIQUETTE et le CHAMP qui doivent se répondre
     d'une colonne à l'autre. On aligne donc par le haut, et l'aide pend
     librement en dessous, de longueur variable — c'est sans conséquence.

     Pour que cela suffise, le bloc d'étiquette doit avoir la même hauteur
     partout : ligne pincée à 18 px, plus 5 px d'écart, soit 23 px. */
  :root { --hauteur-etiquette: 23px; }

  .field { display: flex; flex-direction: column; }
  .field > label {
    line-height: 18px; min-height: 18px; margin-bottom: 5px;
    /* Une étiquette qui passe à la ligne décalerait son propre champ : on
       lui interdit de se couper là où la colonne est assez large, et on la
       laisse déborder proprement plutôt que casser la rangée. */
    text-wrap: nowrap; overflow: visible;
  }

  main [style*="align-items: end"]:has(> .field) { align-items: start !important; }

  /* Un bouton dans une telle rangée n'a pas d'étiquette : il descend d'une
     hauteur d'étiquette pour se poser au niveau des champs, pas au-dessus. */
  main [style*="align-items: end"]:has(> .field) > .btn,
  main [style*="align-items: end"]:has(> .field) > div:not(.field):not(:has(label)) {
    align-self: start; margin-top: var(--hauteur-etiquette);
  }

  /* Titres de section : la maquette les veut amples, verts, aérés. */
  main h4 { font-size: 21px; }
  main h5 { font-size: 19px; }

  /* Les grands boutons d'action respirent comme sur la maquette. */
  .btn-primary { padding: 10px 20px; }



  /* Le site imposait 1 180 px de large, donc restait inutilisable sur
     téléphone — alors que photographier un ticket est précisément un geste
     de téléphone. On lève la contrainte et on réorganise sous 900 px : la
     barre latérale passe au-dessus en bandeau déroulant, les grilles à deux
     ou trois colonnes retombent sur une, et les tableaux larges défilent
     dans leur propre cadre plutôt que d'élargir la page. */
  body { margin: 0; min-width: 320px; }
  input[type="date"], select.input { font-family: var(--font-body); }
  input[type="number"] { font-variant-numeric: tabular-nums; }
  code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  button { font-family: inherit; }
  aside::-webkit-scrollbar { width: 8px; }
  aside::-webkit-scrollbar-thumb { background: var(--color-neutral-400); }
  table { max-width: 100%; }

  /* Le bouton de bascule du menu n'existe que sur petit écran : sur grand
     écran la barre est toujours là, un bouton pour la montrer n'aurait aucun
     sens. Il est rendu par la coquille dans tous les cas et masqué ici — le
     rendu ne connaît pas la largeur de la fenêtre, la feuille de style si. */
  .nav-bascule { display: none; }

  @media (max-width: 900px) {
    /* La coquille : deux colonnes deviennent deux rangées. */
    #app > div { display: block !important; }
    aside {
      position: static !important; width: auto !important; height: auto !important;
      max-height: 42vh; overflow-y: auto;
      border-right: none !important; border-bottom: 1px solid var(--color-divider);
    }
    main { min-width: 0; }

    /* ══ LE MENU SE REPLIE DERRIÈRE UN BOUTON ═══════════════════════════
       Même ramenée à cinq entrées, la barre mangeait le haut de chaque écran
       sur téléphone : on arrivait sur une page et on voyait un sommaire.
       Elle se replie donc derrière un bouton, et l'écran commence à l'écran.
       Choisir une destination referme le menu — sur téléphone, un menu qui
       reste ouvert après le choix cache ce qu'on vient d'aller chercher. */
    .nav-bascule {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 10px 0 2px; border: 0; background: transparent; cursor: pointer;
      font: inherit; font-size: 13px; font-weight: 600; color: var(--color-accent);
      min-height: 40px;
    }
    aside:not(.menu-ouvert) nav,
    aside:not(.menu-ouvert) .pied-barre { display: none !important; }
    aside:not(.menu-ouvert) { max-height: none; }

    /* Toute grille multi-colonnes retombe sur une seule. Les grilles sont
       déclarées en style en ligne par le moteur de rendu, d'où le !important. */
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* ══ SAUF LES CHIFFRES-CLÉS, QUI SE RANGENT EN 2×2 ═══════════════════
       La règle du dessus vaut pour des grilles de CONTENU — des cartes, des
       formulaires, des tuiles — qu'une colonne unique sert bien. Elle servait
       mal la rangée de chiffres : quatre nombres de six caractères occupaient
       quatre pleines rangées, et il fallait faire défiler pour lire un tableau
       de bord censé tenir d'un coup d'œil.

       Cette règle vient APRÈS et la corrige. Les deux sélecteurs pèsent le
       même poids (une classe contre un attribut) : c'est l'ordre qui tranche,
       pas la spécificité — ne pas remonter ce bloc.

       Les filets suivent la nouvelle découpe : verticale entre les deux
       colonnes, horizontale entre les deux rangées. Le style en ligne pose
       `border-right` cellule par cellule pour une grille à quatre colonnes ;
       il faut donc l'annuler avant de le reposer au bon endroit.

       `minmax(0, …)` plutôt que `1fr` : une piste de grille a une largeur
       minimale automatique, et un montant à sept chiffres — que `nowrap`
       empêche de se replier — élargissait sa colonne aux dépens de l'autre,
       jusqu'à pousser la page. Le chiffre rétrécit d'un cran par la même
       occasion : 24 px tient un million sur une demi-largeur de téléphone. */
    .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .kpi-row > * { border-right: none !important; }
    /* `:not(:last-child)` pour la rangée à trois chiffres : le troisième est
       seul sur sa ligne, un filet à sa droite longerait le vide. */
    .kpi-row > :nth-child(odd):not(:last-child) { border-right: 1px solid var(--color-divider) !important; }
    .kpi-row > :nth-child(n+3) { border-top: 1px solid var(--color-divider); }
    .kpi-row .kpi-valeur { font-size: 24px !important; }

    /* L'en-tête, la page d'entrée et les blocs en ligne s'empilent. */
    header { flex-wrap: wrap !important; gap: 12px !important; padding: 14px 16px 12px !important; }
    .entree-gauche { padding: 36px 24px 20px !important; }
    .entree-gauche + div { padding: 0 16px 40px !important; }
    section { padding-left: 16px !important; padding-right: 16px !important; }
    h1 { font-size: 30px !important; }
    h2 { font-size: 21px !important; }

    /* Un tableau large défile chez lui, jamais en poussant la page. */
    table { display: block; overflow-x: auto; white-space: nowrap; }
    table td, table th { white-space: normal; }

    /* Cibles tactiles : rien sous 40 px de haut. */
    .btn, button.btn { min-height: 40px; }
    input.input, select.input, textarea.input { font-size: 16px; }   /* évite le zoom iOS */
  }

  @media print {
    body { min-width: 0; }
    aside, header button, .btn { display: none !important; }
    #app > div { display: block !important; }
  }


/* ══ ACCUEIL SUR DEUX COLONNES ═══════════════════════════════════════════
   Ajouté le 29/07/2026. L'accueil tenait dans une colonne de 860 px et
   laissait un tiers de l'écran vide sur un poste de bureau.

   Le flux principal garde sa largeur de LECTURE — au-delà de quelque 75
   caractères, l'œil perd son retour à la ligne, et étirer le texte sur
   1 900 px aurait dégradé la page en croyant la remplir. Ce qui occupe le
   vide est donc ce qui gagne à être étroit : des indicateurs courts empilés.

   Sous 1 260 px, la colonne passe SOUS le flux. Elle ne disparaît pas : un
   contenu qu'on masque à l'étroit est un contenu qu'il ne fallait pas
   écrire. */
.accueil-colonnes {
  display: grid;
  /* Le flux est plafonné à sa largeur de lecture ; le surplus va au rail,
     lui-même borné — au-delà de 380 px il cesserait d'être une marge
     d'indicateurs pour devenir une seconde colonne de contenu, et la page
     n'aurait plus de centre de gravité. */
  grid-template-columns: minmax(0, 840px) minmax(260px, 360px);
  gap: 28px;
  align-items: start;
}
.accueil-rail {
  display: grid;
  gap: 16px;
  /* Aligné sur « Où vous en êtes » plutôt que sur la salutation : le rail
     répond aux chiffres, il n'a pas à concurrencer le titre de la page. */
  margin-top: 22px;
  /* Le collage ne vaut que si la colonne tient dans l'écran. Avec quatre
     cartes elle atteint 906 px, mesurés dans une fenêtre de 900 : collée,
     son dernier bloc devenait INATTEIGNABLE — on ne peut pas faire défiler
     un élément fixé. `align-self: start` remplace donc `position: sticky` :
     la colonne suit la page, et rien ne se cache.

     Le collage reviendra sans risque le jour où l'on saura que la colonne
     tient — c'est ce que fait la règle ci-dessous, à partir d'une hauteur
     d'écran où quatre cartes passent confortablement. */
  align-self: start;
}

@media (min-height: 1100px) {
  .accueil-rail { position: sticky; top: 22px; }
}

/* Le point de bascule vient d'un calcul, pas d'un chiffre rond : barre
   latérale 236 + marges de section 56 + écart 30 + rail minimal 260 = 582 px
   pris avant le flux. Sous 1 440 px, il ne reste donc plus les 860 px que la
   rangée de chiffres réclame, et ses quatre libellés passaient sur trois
   lignes — mesuré à 1 280 px. On repasse sur une colonne AVANT que le flux
   ne se comprime, pas après. */
/* Les deux colonnes n'apparaissent qu'une fois le plafond atteint : barre
   latérale 236 + plafond 1 300 = 1 536 px, ce qui est exactement la largeur
   d'un moniteur de 1 920 à l'échelle 125 % de Windows. En dessous, la
   colonne passe dessous plutôt que de se comprimer. */
@media (max-width: 1535px) {
  .accueil-colonnes { grid-template-columns: minmax(0, 1fr); }
  .accueil-rail {
    position: static;
    margin-top: 34px;
    /* Replié, le rail occupe la MÊME largeur que le flux au-dessus : le
       plafonner à 860 px le laissait plus étroit que le reste de la page,
       et ses cartes flottaient au lieu de s'aligner sur la colonne. */
    max-width: none;
    /* Empilé sous le flux, il a la place de s'étaler en deux ou trois
       cartes plutôt que de faire une longue file. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    /* Des cartes de hauteurs différentes s'accrochent par le HAUT : étirées,
       la plus courte se serait délavée sur toute la hauteur de la plus
       longue. */
    align-items: start;
  }

  /* La ligne des barèmes n'est pas une carte : c'est une note de pied de
     colonne. En grille, elle prenait une cellule et se posait À CÔTÉ d'une
     carte, seule au milieu du vide — c'est ce qu'on voyait sur l'écran de
     Mac. Elle occupe donc toute la largeur, sur sa propre ligne. */
  .accueil-rail > .rail-note {
    grid-column: 1 / -1;
    margin-top: 2px;
  }
}

/* ══ UNE SEULE MISE EN PAGE, QUELLE QUE SOIT LA TAILLE DE L'ÉCRAN ═════════
   Ajouté le 29/07/2026, sur un constat mesuré : rien n'était plafonné. La
   zone de contenu prenait toute la largeur disponible — 1 684 px sur un
   écran de 1 920, 1 044 px sur un écran de 1 280. Deux personnes devant le
   même écran voyaient donc deux mises en page différentes, et une capture
   d'écran ne ressemblait jamais à ce qu'on avait sous les yeux.

   Le contenu est donc plafonné et CENTRÉ. Au-delà de la largeur de plafond,
   plus rien ne bouge : la page est strictement identique d'un poste à
   l'autre, et le surplus devient de la marge.

   1 300 px n'est pas un chiffre rond, c'est une contrainte à deux bouts.
   Par le bas : l'accueil doit y tenir ses deux colonnes — flux 840 + écart
   28 + colonne 360, plus les 56 px de marges de section, soit 1 284.
   Par le haut : le plafond doit être atteint par les écrans réels, or
   Windows applique couramment une échelle de 125 % — un moniteur de 1 920
   n'offre alors que 1 536 px de large, et 236 px partent dans la barre
   latérale. Un plafond plus généreux aurait été raté par cette
   configuration, qui est l'une des plus répandues.

   Le bandeau d'alerte, lui, reste pleine largeur : c'est une bande d'alerte,
   elle doit barrer l'écran. */
main > header,
main > div,
main > section {
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
}

/* Le conteneur de contenu porte le plafond ; ses enfants doivent alors
   pouvoir occuper toute sa largeur, sans hériter d'un second plafond. */
main > div > section { max-width: none; margin-inline: 0; }

/* La barre de défilement ne doit pas décaler la mise en page. Sans cette
   règle, un écran qui défile perd 15 px de largeur utile et un écran qui ne
   défile pas les garde : deux pages du même site ne s'alignaient donc pas
   entre elles, et une capture ne correspondait jamais tout à fait à ce qu'on
   avait sous les yeux. La gouttière est réservée en permanence. */
html { scrollbar-gutter: stable; }