/* ============================================================
   Aplomb — le registre « atelier ».

   Même grammaire que l'écran terrain, transposée pour un écran qu'on lit assis :
   pas d'encadré, pas de carte, pas d'ombre. Des bandes qui occupent toute la
   largeur, séparées par un filet de deux pixels ; une étiquette monospace au-dessus
   de chaque bande ; le carré plein comme seul ornement ; la mesure en très grand.

   Ce qui change par rapport au terrain, et seulement cela : le fond suit le thème
   au lieu de rester sombre. Le terrain se lit à deux mètres dans un garage, en trois
   secondes ; un plan de travail se lit de près et longuement, et le fond sombre y
   fatigue plus qu'il n'aide.

   Aucun arrondi nulle part — la charte ne l'autorise que pour les objets
   physiquement ronds, et il n'y en a pas ici.
   ============================================================ */

/* ------------------------------------------------------------
   Pont de thème.
   tokens.css lit `data-theme`, comme la charte ; le site bascule sur
   `data-bs-theme`, posé par web/js/color-mode.js avant le premier rendu.
   L'attribut étant toujours présent sur <html>, ces deux règles tranchent seules,
   dans les deux sens.
   ------------------------------------------------------------ */
:root[data-bs-theme="light"] {
  --surface:#FBFCF7; --surface-2:#FFFFFF; --surface-sunk:#F2F4E9;
  --ink:#112318; --ink-2:#3D5546; --ink-3:#5C7063;
  --rule:#DDE3D0; --rule-strong:#BCC7AC;
  --accent:#305D42; --accent-ink:#EEFFCC; --accent-wash:#E7EFDA; --emphase:#6E8F2E;
  --st-bon:#2E7D4F; --st-attn:#8C5D0C; --st-grave:#B4482C; --st-crit:#93231C;
  --st-bon-bg:#E4EFE5; --st-attn-bg:#F7EEDA; --st-grave-bg:#F8E5DD; --st-crit-bg:#F6E0DC;
  /* Les quatre séries manquaient au pont. Elles restaient donc à la valeur que
     `tokens.css` donne sous `prefers-color-scheme`, c'est-à-dire au thème du système
     et non à celui du site : un joueur qui basculait en clair gardait des courbes
     calées sur le sombre. Le défaut ne se voyait pas parce qu'aucun écran atelier ne
     s'en servait — l'Historique s'était déclaré trois teintes à lui, ce qui
     contournait le trou au lieu de le montrer. */
  --serie-1:#1F7A4D; --serie-2:#CB7F06; --serie-3:#3B6FC4; --serie-4:#A63D82;
}

:root[data-bs-theme="dark"] {
  --surface:#0C1A11; --surface-2:#112318; --surface-sunk:#081209;
  --ink:#EEFFCC; --ink-2:#A9C08C; --ink-3:#879A7C;
  --rule:#24382A; --rule-strong:#3A5442;
  --accent:#BEDC7F; --accent-ink:#0C1A11; --accent-wash:#1A2E1F; --emphase:#BEDC7F;
  --st-bon:#63BC84; --st-attn:#D9A441; --st-grave:#E08163; --st-crit:#E4685A;
  --st-bon-bg:#14291C; --st-attn-bg:#2A2413; --st-grave-bg:#2E1E17; --st-crit-bg:#2E1815;
  --serie-1:#3E9B69; --serie-2:#C47C0E; --serie-3:#6191D8; --serie-4:#C25C9C;
}

/* ------------------------------------------------------------
   Page
   ------------------------------------------------------------ */
body.atelier {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0;
  /* L'application installée s'ouvre sur le terrain, qui demande à iOS la barre
     translucide ; ces écrans-là héritent du réglage et passeraient sous l'heure.
     Hors installation, les insets valent zéro et la règle ne coûte rien. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) var(--u16) env(safe-area-inset-left);
  -webkit-font-smoothing: antialiased;
}

/* Les bandes vont d'un bord à l'autre de cette colonne, comme celles du terrain
   vont d'un bord à l'autre de l'écran. La largeur est plus généreuse : on lit des
   phrases ici, pas un nombre. */
.atelier .wrap { max-width: 1000px; margin: 0 auto; }

/* La marge intérieure des bandes, en un seul endroit : elles doivent toutes
   s'aligner sur la même verticale, sinon les filets ne servent à rien. */
.atelier .bande { padding: var(--u6) var(--u4); border-top: 2px solid var(--rule-strong); }
.atelier .bande:first-of-type { border-top: 0; }

/* ------------------------------------------------------------
   Bandeau de navigation — le pendant de .t-head sur le terrain
   ------------------------------------------------------------ */
.atelier .app-bar {
  display: flex;
  align-items: center;
  gap: var(--u4);
  padding: var(--u4) var(--u4) var(--u3);
  border-bottom: 2px solid var(--rule-strong);
  flex-wrap: nowrap;
}

/* La marque ne se comprime pas et ne defile pas : c'est le point fixe. */
.atelier .app-bar .brand { flex: none; }

/* Seule la navigation absorbe le manque de place, en defilant. */
.atelier .app-bar .nav-boite { margin-left: auto; }
.atelier .app-bar .nav { width: 100%; }

.atelier .brand {
  display: flex;
  align-items: center;
  gap: var(--u3);
  text-decoration: none;
  color: inherit;
}

/* Le logo est du pixel art : l'interpolation le rendrait flou. La charte réserve
   le pixel au logo et à la visualisation de données. */
.atelier .brand img { width: 26px; height: 26px; image-rendering: pixelated; }

.atelier .brand span {
  font-family: var(--f-perf);
  font-stretch: condensed;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Les six destinations sur une ligne tant que la largeur le permet ; les deux
   paliers qui suivent sont en bas de fichier. Elles ne s'empilent jamais en
   plusieurs lignes de liens : 134 px de haut a 600 px de large et 169 px a
   375 px, soit un cinquieme de l'ecran mange avant le premier chiffre. */
.atelier .nav {
  display: flex;
  align-items: center;
  gap: var(--u4);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Les destinations d'un meme moment d'usage se serrent ; ce sont les groupes qui
   respirent, pas les liens. */
.atelier .nav-groupe {
  display: flex;
  align-items: center;
  gap: var(--u4);
  flex: none;
}

/* Le meme filet de 2 px que celui qui separe les bandes, tourne d'un quart de
   tour : la barre se lit alors comme deux blocs et non comme six liens. */
.atelier .nav-filet {
  flex: none;
  width: 2px;
  align-self: stretch;
  min-height: 16px;
  background: var(--rule-strong);
}

/* Le compte n'est pas une destination du meme ordre : il sort du flux et ne
   defile pas avec lui. */
.atelier .compte {
  display: flex;
  align-items: center;
  gap: var(--u3);
  flex: none;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-left: var(--u4);
  border-left: 2px solid var(--rule-strong);
}

.atelier .compte a { color: var(--ink-3); text-decoration: none; padding-bottom: 2px; }
.atelier .compte a:hover { color: var(--ink-2); }
.atelier .compte a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.atelier .compte a:focus-visible { outline: 2px solid var(--emphase); outline-offset: 3px; }

.atelier .nav a { color: var(--ink-3); text-decoration: none; padding-bottom: 2px; }
.atelier .nav a:hover { color: var(--ink-2); }

/* L'écran courant est souligné, non colorié : la couleur d'action reste réservée
   à ce sur quoi on peut agir. */
.atelier .nav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

.atelier .nav a:focus-visible,
.atelier .sortie:focus-visible,
.atelier .bascule:focus-visible { outline: 2px solid var(--emphase); outline-offset: 3px; }

.atelier .nav .sortie {
  background: none;
  border: 0;
  padding: 0 0 2px;
  font: inherit;
  color: var(--st-grave);
  cursor: pointer;
}

.atelier .bascule {
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--ink-2);
  width: 28px;
  height: 28px;
  line-height: 1;
  cursor: pointer;
  font-size: 12px;
  flex: none;
}

/* ------------------------------------------------------------
   Les trois emplacements d'une bande, repris du terrain :
   une étiquette, un titre ou un grand nombre, une ligne de commentaire.
   ------------------------------------------------------------ */
.atelier .a-lb {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--u2);
}

.atelier .a-titre {
  font-family: var(--f-perf);
  font-stretch: condensed;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  margin: 0;
}

/* Le très grand nombre du terrain, un cran plus bas : ici il cohabite avec du
   texte, là-bas il régnait seul. */
.atelier .a-hero {
  font-family: var(--f-perf);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 4.5rem;
  line-height: .85;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.atelier .a-hero small { font-size: .24em; color: var(--ink-3); letter-spacing: 0; font-weight: 400; }

/* Le carré de la charte, en pseudo-élément, exactement comme .t-ligne du terrain :
   la ligne reste un emplacement de texte pur. */
.atelier .a-ligne {
  font-size: 15px;
  color: var(--ink-2);
  margin: var(--u3) 0 0;
  max-width: 72ch;
}

.atelier .a-ligne::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--u2);
  background: var(--emphase);
  vertical-align: baseline;
}

.atelier .a-ligne.attn::before { background: var(--st-attn); }
.atelier .a-ligne.bon::before { background: var(--st-bon); }
.atelier .a-ligne.muet::before { background: var(--ink-3); }

.atelier code {
  font-family: var(--f-mono);
  font-size: .85em;
  background: var(--accent-wash);
  color: var(--ink);
  padding: 1px 5px;
}

/* ------------------------------------------------------------
   La ligne méta et le dépliant — les deux emplacements qui remplacent la prose.

   Nés sur la Dernière volée le 22 août 2026, remontés ici dans la foulée en
   reprenant les Statistiques : ce sont les primitives de la reprise du texte, pas
   des objets propres à un écran. Même trajet que `.bouton`, `.champ` et `.saisie`,
   descendues de `profil.css` le 8 août.

   Ce qu'elles corrigent : chaque bande empilait quatre couches de texte —
   étiquette, titre-phrase, ligne rédigée, paragraphe pédagogique permanent. Sur la
   Dernière volée cela faisait 307 mots pour 34 nombres, dont 85 % dans des phrases
   de douze mots ou plus. La ligne méta remplace la ligne rédigée, le dépliant
   remplace le paragraphe, et le titre-phrase disparaît.
   ------------------------------------------------------------ */

/* Ce qui accompagne un grand nombre sans être une phrase : une date, une étendue,
   un compte. Pas le carré de `.a-ligne` — ce carré signale une lecture, et il y en
   avait un par bande sur des contenus qui ne sont que du contexte. */
.atelier .a-meta {
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin: var(--u3) 0 0;
}

.atelier .a-sep { margin: 0 var(--u2); color: var(--rule-strong); }

.atelier .a-hero + .a-meta { margin-top: var(--u3); }

/* Le dépliant. Les explications de mesure ne sont pas supprimées, elles cessent
   d'être permanentes. Fermé par défaut, ouvert d'un clic, l'état n'est pas
   mémorisé — un écran qu'on lit une fois par séance n'a pas de préférence à
   retenir.

   `list-style: none` et le marqueur WebKit désarmés parce que le triangle par
   défaut est arrondi et colorié par le navigateur : la charte n'a ni l'un ni
   l'autre. Le signe est un « + » monospace, qui devient « − » à l'ouverture. */
.atelier .a-plus { margin-top: var(--u4); max-width: 72ch; }

.atelier .a-plus > summary {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
  display: inline-block;
  padding: 2px 0;
}

.atelier .a-plus > summary::-webkit-details-marker { display: none; }

.atelier .a-plus > summary::before {
  content: "+";
  display: inline-block;
  width: 1.1em;
  color: var(--emphase);
}

.atelier .a-plus[open] > summary::before { content: "−"; }

.atelier .a-plus > summary:hover { color: var(--ink-2); }

.atelier .a-plus > summary:focus-visible {
  outline: 2px solid var(--emphase);
  outline-offset: 3px;
}

.atelier .a-plus p {
  font-size: 14px;
  color: var(--ink-3);
  margin: var(--u3) 0 0;
}

/* ------------------------------------------------------------
   Boutons et champs — les primitives du registre.

   Elles vivaient dans `profil.css`, préfixées `.profil`, parce que le Profil était
   le premier écran repris à la charte et le seul à porter des formulaires. Elles
   n'ont rien de propre à cet écran : c'est la grammaire du registre, et la page de
   connexion comme l'Historique en ont besoin. Elles sont donc ici, sans préfixe.

   `.bouton` et non `.btn`, `.saisie` et non `form-control` : les noms de Bootstrap
   gagneraient la spécificité et réimposeraient leurs 6 px d'arrondi, que la charte
   écarte. C'est la seule raison de ne pas les reprendre.
   ------------------------------------------------------------ */
.atelier .bouton {
  /* `inline-flex` et non le rendu par défaut : un `<a>` est en ligne, donc
     `min-height` ne le grandit pas et son texte ne se centre ni verticalement ni
     horizontalement dans la boîte. Les `<button>` centraient déjà le leur, cette
     règle ne leur retire rien — elle rend simplement les deux interchangeables. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--f-ui);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 0 var(--u4);
  min-height: 48px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  white-space: nowrap;
}

.atelier .bouton.ghost { background: transparent; color: var(--accent); }

/* Les deux blocs d'installation — le client Windows, l'app sur le téléphone — servis
   à l'identique sur l'accueil et sur le Profil. Le bouton porte seul la marge : dans
   le second, bouton et dépliant ne s'affichent jamais ensemble.

   La règle vit ici et non dans `accueil.css` ou `profil.css` : c'est le même bloc aux
   deux endroits, et deux copies divergeraient. */
.atelier .installation > .bouton,
.atelier .telechargement > .bouton { margin-top: var(--u4); }

@media (max-width: 620px) {
  .atelier .installation > .bouton,
  .atelier .telechargement > .bouton { width: 100%; }
}

.atelier .bouton.neutre { background: transparent; color: var(--ink-2); border-color: var(--rule-strong); }
.atelier .bouton.danger { background: transparent; color: var(--st-grave); border-color: var(--st-grave); }

/* Indisponible : le contour et l'encre s'éteignent, et le curseur ne promet plus
   rien. Un bouton désactivé sort aussi de la tabulation et s'annonce comme tel,
   ce qu'un lien grisé ne ferait pas.

   Après les variantes, et non avant : à spécificité égale c'est la dernière règle
   qui tranche, et `.neutre` reprenait sinon la main sur la couleur et le contour. */
.atelier .bouton:disabled {
  border-color: var(--rule);
  background: transparent;
  color: var(--ink-3);
  cursor: default;
}

.atelier .bouton:focus-visible { outline: 3px solid var(--emphase); outline-offset: 2px; }

.atelier .champs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u4);
  margin-top: var(--u4);
  max-width: 720px;
}

.atelier .champ { flex: 1 1 240px; min-width: 0; }

.atelier .champ label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--u2);
}

.atelier .champ .saisie {
  width: 100%;
  font-family: var(--f-ui);
  font-size: 15.5px;
  padding: var(--u3);
  min-height: 48px;
  border: 1px solid var(--rule-strong);
  background: var(--surface-sunk);
  color: var(--ink);
}

.atelier .champ .saisie:focus-visible { outline: 3px solid var(--emphase); outline-offset: 1px; }
.atelier .champ.has-error .saisie { border-color: var(--st-grave); }

/* Une liste déroulante, primitive du registre au même titre que `.saisie`.

   `appearance: none` parce que le rendu natif de Windows arrondit le champ de 2 px
   et ignore la surface du thème quand le site est en sombre alors que le système est
   en clair — les deux bascules sont indépendantes. Le chevron est donc redessiné.

   Il est posé en gris moyen plutôt qu'en jeton : une image de fond ne peut pas lire
   une variable CSS, et cette valeur est la seule qui tienne le contraste sur
   `--surface-sunk` dans les deux thèmes. */
.atelier .champ select.saisie {
  appearance: none;
  padding-right: calc(var(--u3) + 22px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23808080'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--u3) center;
  background-size: 11px 7px;
}

.atelier .err {
  font-size: 13.5px;
  color: var(--st-grave);
  margin: var(--u2) 0 0;
}

/* Les issues d'une page d'erreur : deux boutons côte à côte, qui passent l'un sous
   l'autre quand la colonne se resserre. */
.atelier .e-issues { display: flex; flex-wrap: wrap; gap: var(--u3); }

@media (max-width: 480px) {
  .atelier .e-issues { flex-direction: column; }
  .atelier .e-issues .bouton { width: 100%; }
}

/* Un message de retour est une bande comme une autre, marquée par son carré. */
.atelier .flash {
  font-size: 15px;
  color: var(--ink-2);
  margin: 0;
  padding: var(--u4);
  border-top: 2px solid var(--accent);
  background: var(--accent-wash);
}

.atelier .flash.grave { border-top-color: var(--st-grave); background: var(--st-grave-bg); }

.atelier .nav-boite { min-width: 0; flex: 1 1 auto; }

/* Le bouton qui ouvre le panneau. Il n'existe que sur telephone, et le CSS lit
   son `aria-expanded` plutot qu'une classe : l'etat que lit le lecteur d'ecran et
   celui que voit l'oeil ne peuvent alors plus diverger. */
.atelier .nav-bouton { display: none; }

/* ------------------------------------------------------------
   La barre quand elle ne tient plus sur une ligne
   ------------------------------------------------------------ */

/* Premier palier. Marque, destinations et compte demandent ensemble un peu plus
   de 820 px ; en dessous les destinations prennent leur propre ligne, pleine
   largeur, et y tiennent toutes. Elles defilaient auparavant sur la ligne du
   dessus des 820 px, sans que rien ne le laisse voir. */
@media (max-width: 860px) {
  .atelier .app-bar { flex-wrap: wrap; gap: var(--u2) var(--u3); }
  .atelier .app-bar .brand { order: 1; }
  .atelier .compte { order: 2; margin-left: auto; }
  .atelier .nav-boite { order: 3; flex: 1 0 100%; }

  /* Les gouttieres se resserrent d'un cran : 565 px de libelles pour 589 px de
     ligne au point de rupture bas, la marge tenait a un mot pres. */
  .atelier .nav,
  .atelier .nav-groupe { gap: var(--u3); }
}

/* Second palier : la ligne pleine largeur ne suffit plus. Les six libelles
   demandent 541 px pour 351 px disponibles a 375 px — aucune disposition
   horizontale ne les montre tous. Ils passent derriere un bouton.

   Le panneau se pose par-dessus la page plutot que de la pousser : ouvrir un menu
   ne doit pas deplacer ce qu'on etait en train de lire. */
@media (max-width: 620px) {
  .atelier .bande { padding: var(--u4) var(--u3); }

  .atelier .app-bar {
    position: relative;
    flex-wrap: wrap;
    padding: var(--u3);
    gap: var(--u2) var(--u3);
  }

  .atelier .app-bar .brand { order: 1; }

  .atelier .nav-bouton {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--u2);
    min-height: 34px;
    padding: 0 var(--u3);
    background: none;
    /* Un filet de 1 px : c'est celui qui cerne un controle. */
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* Le chevron est dessine et non ecrit : un caractere de police varierait de
     taille et d'alignement d'un repli a l'autre. */
  .atelier .nav-bouton::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .atelier .nav-bouton[aria-expanded="true"]::after {
    margin-top: 3px;
    transform: rotate(-135deg);
  }

  .atelier .compte { order: 3; margin-left: auto; padding-left: var(--u3); gap: var(--u3); }

  .atelier .nav-boite {
    order: 4;
    display: none;
    position: absolute;
    /* Le bloc conteneur s'arrete a la boite de remplissage : sans les deux pixels
       le panneau recouvre le filet du bas de la barre, qui semble disparaitre. */
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--surface);
    border-bottom: 2px solid var(--rule-strong);
  }

  .atelier .nav-bouton[aria-expanded="true"] ~ .nav-boite { display: block; }

  /* Empilees, les destinations gardent leurs deux groupes : le filet de 2 px les
     separe comme il separe les bandes, et le 1 px separe les lignes d'un meme
     groupe. C'est la meme regle d'epaisseur, tournee d'un quart de tour.

     Toutes ces regles passent par `.nav-boite`, que seule la barre de l'atelier
     porte : l'accueil partage la classe `.nav` mais n'a que deux liens, et les
     empiler lui ferait un en-tete de trois lignes pour rien. */
  .atelier .nav-boite .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .atelier .nav-boite .nav-groupe {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .atelier .nav-boite .nav-filet {
    width: auto;
    height: 2px;
    min-height: 0;
    align-self: auto;
  }

  .atelier .nav-boite .nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--u4);
  }

  .atelier .nav-boite .nav-groupe a + a { border-top: 1px solid var(--rule); }

  /* Le souligne de l'ecran courant tourne lui aussi d'un quart de tour. En ombre
     portee interieure et non en bordure : une bordure decalerait le libelle des
     six autres lignes de deux pixels. */
  .atelier .nav-boite .nav a.on { box-shadow: inset 2px 0 0 var(--accent); background: var(--accent-wash); }

  .atelier .a-hero { font-size: 3.4rem; }
  .atelier .a-titre { font-size: 1.6rem; }
}