/* =========================================================
   SYSTEME AION IA - Feuille de style de l'usine

   LES JETONS SONT CEUX DE LA PLATEFORME, ET C'EST VOULU.
   L'usine et le produit sont la meme maison : marine, or, creme.
   Un operateur qui passe de l'un a l'autre ne doit pas avoir
   l'impression de changer d'entreprise.

   CE QUI DIFFERE, ET UNE SEULE CHOSE DIFFERE : l'usine n'a pas
   de couleur d'accent reglable. Un client choisit la sienne ;
   nous n'avons personne a qui plaire, et un accent reglable ici
   serait un reglage de plus a maintenir pour rien.

   DETTE DECLAREE. Ces jetons vivent maintenant a deux endroits,
   ici et dans le moule. Les deux programmes ne partagent aucun
   fichier ; le jour ou ils partageront du code, cette couche est
   l'un des premiers candidats.
   ========================================================= */

:root {
  /* Identite - marine, or, creme. */
  --marine:              #0E2A47;
  --marine-fonce:        #0A1E33;
  --marine-clair:        #1E5B99;
  --or:                  #B8945F;
  --or-clair:            #DFCFB7;
  --or-encre:            #8E7249;
  --creme:               #FBFAF6;

  /* Ardoise - teinte du marine. Les neutres en descendent. */
  --surface:             #FFFFFF;
  --surface-douce:       #F7F7F8;
  --survol:              #F1F2F4;
  --canevas:             #EBEDF0;
  --trait:               #E4E7EA;
  --trait-fort:          #D1D7DD;
  --texte-muet:          #98A6B5;
  --texte-faible:        #5F7489;
  --texte:               #2C3E50;
  --titre:               #131B24;

  /* Semantiques : fond (pale) - trait (1px) - plein - texte */
  --succes-fond:         #ECFDF3;
  --succes-trait:        #A9E5C3;
  --succes-texte:        #067647;
  --danger-fond:         #FEF3F2;
  --danger-trait:        #FDA29B;
  --danger-texte:        #B42318;
  --avert-fond:          #FEF9EB;
  --avert-trait:         #F9DB90;
  --avert-texte:         #92660E;
  --info-fond:           #EEF3F9;
  --info-trait:          #B5CCE3;
  --info-texte:          #1E5B99;

  --anneau-focus:        rgba(30, 91, 153, 0.15);
  --ombre-1:             rgba(0, 0, 0, 0.06);
  --ombre-2:             rgba(0, 0, 0, 0.08);
  --clair-20:            rgba(255, 255, 255, 0.20);
  --clair-60:            rgba(255, 255, 255, 0.60);

  /* Espacement - echelle a 10 barreaux. */
  --esp-1: 2px;  --esp-2: 4px;  --esp-3: 6px;  --esp-4: 8px;
  --esp-5: 10px; --esp-6: 12px; --esp-7: 16px; --esp-8: 20px;
  --esp-9: 24px; --esp-10: 32px;

  /* Texte - en rem : le reglage du navigateur redevient effectif. */
  --txt-1: 0.6875rem; --txt-2: 0.75rem;  --txt-3: 0.8125rem;
  --txt-4: 0.875rem;  --txt-5: 0.9375rem; --txt-6: 1rem;
  --txt-7: 1.125rem;  --txt-8: 1.25rem;  --txt-9: 1.5rem;
  --txt-10: 1.875rem;

  --rond-1: 3px; --rond-2: 6px; --rond-3: 10px;

  --colonne: 250px;

  --police: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
            Roboto, Helvetica, Arial, sans-serif;
  --police-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular,
                 Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--txt-5);
  line-height: 1.55;
  color: var(--texte);
  background: var(--canevas);
}

h1, h2, h3 { color: var(--titre); margin: 0; font-weight: 600; }
h1 { font-size: var(--txt-9); }
h2 { font-size: var(--txt-7); }
h3 { font-size: var(--txt-5); }

a { color: var(--marine-clair); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   LE CADRE : colonne + contenu
   --------------------------------------------------------- */

.usine-cadre { display: flex; min-height: 100vh; }

.usine-colonne {
  width: var(--colonne);
  flex: 0 0 var(--colonne);
  background: var(--marine);
  color: var(--creme);
  display: flex;
  flex-direction: column;
  padding: var(--esp-8) 0;
}

.usine-enseigne {
  padding: 0 var(--esp-8) var(--esp-9);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.usine-enseigne strong { font-size: var(--txt-6); letter-spacing: 0.01em; }

.usine-sous-enseigne {
  font-size: var(--txt-2);
  color: var(--or-clair);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.usine-sigle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: var(--esp-4);
  border-radius: var(--rond-2);
  background: var(--or);
  color: var(--marine-fonce);
  font-weight: 700;
  font-size: var(--txt-4);
  letter-spacing: 0.04em;
}

.usine-menu { flex: 1; }
.usine-rayon { padding: 0 var(--esp-6) var(--esp-8); }

.usine-rayon-titre {
  font-size: var(--txt-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--or-clair);
  padding: 0 var(--esp-4) var(--esp-4);
}

.usine-rayon ul { list-style: none; margin: 0; padding: 0; }

.usine-lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-4);
  border-radius: var(--rond-2);
  color: var(--creme);
  font-size: var(--txt-4);
}

a.usine-lien:hover { background: var(--clair-20); text-decoration: none; }

/* CE QUI N'EST PAS OUVERT SE MONTRE BARRE, JAMAIS CACHE.
   Une chose cachee ne se desire pas. */
.usine-lien-barre {
  color: var(--or-clair);
  opacity: 0.72;
  cursor: pointer;
  list-style: none;
}

.usine-lien-barre::-webkit-details-marker { display: none; }

.usine-cadenas {
  width: 14px; height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.usine-bulle {
  margin: var(--esp-2) var(--esp-4) 0;
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--rond-2);
  background: var(--marine-fonce);
  color: var(--or-clair);
  font-size: var(--txt-2);
  line-height: 1.45;
}

.usine-pied-colonne {
  padding: var(--esp-7) var(--esp-8) 0;
  border-top: 1px solid var(--clair-20);
}

.usine-personne {
  margin: 0 0 var(--esp-4);
  font-size: var(--txt-4);
  color: var(--creme);
}

.usine-sortie {
  width: 100%;
  padding: var(--esp-4);
  border: 1px solid var(--clair-20);
  border-radius: var(--rond-2);
  background: transparent;
  color: var(--or-clair);
  font-family: inherit;
  font-size: var(--txt-3);
  cursor: pointer;
}

.usine-sortie:hover { background: var(--clair-20); color: var(--creme); }

.usine-contenu {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.usine-principal {
  flex: 1;
  padding: var(--esp-10);
  max-width: 1100px;
  width: 100%;
}

.usine-principal-pleine { max-width: none; display: flex; }

/* ---------------------------------------------------------
   CE QUI PARLE : les avis
   --------------------------------------------------------- */

.usine-avis { padding: var(--esp-7) var(--esp-10) 0; }
.usine-avis:empty { padding: 0; }
.usine-avis-porte { padding: var(--esp-7) 0 0; }

.usine-avis-ligne {
  margin-bottom: var(--esp-5);
  padding: var(--esp-5) var(--esp-7);
  border-radius: var(--rond-2);
  border: 1px solid var(--trait);
  background: var(--surface);
  font-size: var(--txt-4);
}

.usine-avis-success { background: var(--succes-fond); border-color: var(--succes-trait); color: var(--succes-texte); }
.usine-avis-error   { background: var(--danger-fond); border-color: var(--danger-trait); color: var(--danger-texte); }
.usine-avis-info    { background: var(--info-fond);   border-color: var(--info-trait);   color: var(--info-texte); }

/* ---------------------------------------------------------
   LES BLOCS ET LES TETES D'ECRAN
   --------------------------------------------------------- */

.usine-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-8);
  margin-bottom: var(--esp-9);
}

.usine-tete-phrase {
  margin: var(--esp-3) 0 0;
  color: var(--texte-faible);
  font-size: var(--txt-4);
}

.usine-bloc {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rond-3);
  padding: var(--esp-9);
  margin-bottom: var(--esp-8);
  box-shadow: 0 1px 2px var(--ombre-1);
}

.usine-bloc h2 { margin-bottom: var(--esp-7); }

.usine-sous-titre {
  margin: var(--esp-9) 0 var(--esp-5);
  color: var(--texte-faible);
  font-size: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.usine-vide {
  background: var(--surface);
  border: 1px dashed var(--trait-fort);
  border-radius: var(--rond-3);
  padding: var(--esp-10);
  text-align: center;
  color: var(--texte-faible);
}

.usine-note {
  margin-top: var(--esp-8);
  color: var(--texte-muet);
  font-size: var(--txt-3);
}

/* ---------------------------------------------------------
   LES FAITS ET LES TABLES
   --------------------------------------------------------- */

.usine-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rond-3);
  overflow: hidden;
  font-size: var(--txt-4);
}

.usine-table th {
  text-align: left;
  padding: var(--esp-5) var(--esp-7);
  background: var(--surface-douce);
  border-bottom: 1px solid var(--trait);
  color: var(--texte-faible);
  font-size: var(--txt-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.usine-table td {
  padding: var(--esp-5) var(--esp-7);
  border-bottom: 1px solid var(--trait);
}

.usine-table tr:last-child td { border-bottom: none; }
.usine-table tbody tr:hover { background: var(--survol); }

.usine-faits { margin: 0; display: grid; grid-template-columns: 220px 1fr; gap: var(--esp-4) var(--esp-7); }
.usine-faits dt { color: var(--texte-faible); font-size: var(--txt-3); }
.usine-faits dd { margin: 0; }
.usine-faits-ligne { margin: var(--esp-5) 0 0; font-size: var(--txt-4); }

.usine-mono { font-family: var(--police-mono); font-size: var(--txt-3); }
.usine-muet { color: var(--texte-muet); font-style: italic; }

.usine-lien-entree {
  margin: var(--esp-5) 0;
  padding: var(--esp-5) var(--esp-7);
  background: var(--surface-douce);
  border: 1px solid var(--trait);
  border-radius: var(--rond-2);
  word-break: break-all;
}

.usine-etat {
  display: inline-block;
  padding: var(--esp-1) var(--esp-5);
  border-radius: 999px;
  font-size: var(--txt-2);
  border: 1px solid var(--trait);
  background: var(--surface-douce);
  color: var(--texte-faible);
}

.usine-etat-actif { background: var(--succes-fond); border-color: var(--succes-trait); color: var(--succes-texte); }
.usine-etat-lecture_seule { background: var(--avert-fond); border-color: var(--avert-trait); color: var(--avert-texte); }
.usine-etat-eteint { background: var(--danger-fond); border-color: var(--danger-trait); color: var(--danger-texte); }

/* LES ETATS D'UNE MACHINE AU PARC.
   LA COULEUR SUIT << A QUI DE JOUER >>, jamais la gravite ressentie : ce qui
   est de notre bord est chaud, ce qui renvoie au fournisseur est autre, et
   ce qui va bien est vert. Une salle ou tout ce qui n'est pas vert est
   rouge fait lire la couleur et non la ligne. */
.usine-etat-refusee      { background: var(--danger-fond); border-color: var(--danger-trait); color: var(--danger-texte); }
.usine-etat-sans_voix    { background: var(--avert-fond); border-color: var(--avert-trait); color: var(--avert-texte); }
.usine-etat-jamais_parle { background: var(--avert-fond); border-color: var(--avert-trait); color: var(--avert-texte); }
.usine-etat-muette       { background: var(--surface-douce); border-color: var(--trait); color: var(--texte); }
.usine-etat-en_vie       { background: var(--succes-fond); border-color: var(--succes-trait); color: var(--succes-texte); }

/* ---------------------------------------------------------
   LES FORMES
   --------------------------------------------------------- */

.usine-forme { display: flex; flex-direction: column; gap: var(--esp-7); }
.usine-forme-large { max-width: 640px; }
.usine-forme-ligne { margin-top: var(--esp-7); }

.usine-champ { display: flex; flex-direction: column; gap: var(--esp-3); }

.usine-champ label {
  font-size: var(--txt-4);
  font-weight: 600;
  color: var(--titre);
}

.usine-champ input,
.usine-champ select {
  padding: var(--esp-5) var(--esp-6);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rond-2);
  font-family: inherit;
  font-size: var(--txt-5);
  color: var(--texte);
  background: var(--surface);
}

.usine-champ input:focus,
.usine-champ select:focus {
  outline: none;
  border-color: var(--marine-clair);
  box-shadow: 0 0 0 3px var(--anneau-focus);
}

.usine-aide { color: var(--texte-faible); font-size: var(--txt-3); margin: 0; }

.usine-aide-fond {
  padding: var(--esp-5) var(--esp-7);
  background: var(--info-fond);
  border: 1px solid var(--info-trait);
  border-radius: var(--rond-2);
  color: var(--info-texte);
  margin-bottom: var(--esp-7);
}

/* CE QUI MANQUE SE DIT EN JAUNE, PAS EN ROUGE. Le rouge est un refus ;
   une absence declaree n'en est pas un. */
.usine-aide-avertissement {
  padding: var(--esp-5) var(--esp-7);
  background: var(--avert-fond);
  border: 1px solid var(--avert-trait);
  border-radius: var(--rond-2);
  color: var(--avert-texte);
}

.usine-bouton {
  display: inline-block;
  padding: var(--esp-5) var(--esp-8);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rond-2);
  background: var(--surface);
  color: var(--texte);
  font-family: inherit;
  font-size: var(--txt-4);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.usine-bouton:hover { background: var(--survol); text-decoration: none; }

/* ---------------------------------------------------------
   PLUSIEURS GESTES DANS LA TETE D'UNE PAGE

   La tete range son titre a gauche et ses gestes a droite.
   Des qu'il y en a deux, ils ont besoin d'un contenant : sans
   lui, le second se poserait sous le premier et la tete
   grandirait d'une ligne.
   --------------------------------------------------------- */
.usine-tete-gestes {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* LE GESTE SECONDAIRE D'UNE TETE. Il mene ailleurs sans rien
   changer -- il se lit donc plus bas que celui qui ramene. */
.usine-bouton-pale {
  color: var(--texte-faible);
  border-color: var(--trait);
}

.usine-bouton-pale:hover { color: var(--texte); }

.usine-bouton-premier {
  background: var(--marine);
  border-color: var(--marine);
  color: var(--creme);
  align-self: flex-start;
}

.usine-bouton-premier:hover { background: var(--marine-fonce); color: var(--creme); }

/* ---------------------------------------------------------
   LES GESTES POSES DANS UNE LIGNE DE TABLE

   Ils vivent chacun dans leur propre envoi : un geste qui
   modifie porte sa preuve d'intention, et deux gestes dans
   le meme formulaire ne sauraient pas laquelle des deux
   choses on a voulu faire.
   --------------------------------------------------------- */

.usine-forme-serree {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  margin: var(--esp-2) var(--esp-3) var(--esp-2) 0;
}

.usine-forme-serree input[type="text"],
.usine-forme-serree select {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rond-1);
  font-family: inherit;
  font-size: var(--txt-3);
  color: var(--texte);
  background: var(--surface);
  max-width: 190px;
}

.usine-bouton-mince {
  padding: var(--esp-3) var(--esp-5);
  font-size: var(--txt-3);
  font-weight: 500;
}

.usine-cles { list-style: none; margin: 0; padding: 0; }

.usine-cles li {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-2) 0;
  font-size: var(--txt-4);
}

/* ---------------------------------------------------------
   LA PORTE
   --------------------------------------------------------- */

.usine-porte {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-10);
  background: var(--marine);
  min-height: 100vh;
}

.usine-porte-carte {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--rond-3);
  padding: var(--esp-10);
  box-shadow: 0 10px 30px var(--ombre-2);
}

.usine-porte-tete { margin-bottom: var(--esp-9); }
.usine-porte-tete h1 { font-size: var(--txt-8); }

.usine-porte-soustitre {
  margin: var(--esp-2) 0 0;
  color: var(--texte-faible);
  font-size: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.usine-porte-carte .usine-aide { margin-top: var(--esp-7); }

/* ---------------------------------------------------------
   LE PIED
   --------------------------------------------------------- */

.usine-pied {
  padding: var(--esp-8) var(--esp-10);
  border-top: 1px solid var(--trait);
  color: var(--texte-muet);
  font-size: var(--txt-2);
}

.usine-pied p { margin: 0; }

.usine-pied-porte {
  border: none;
  text-align: center;
  background: var(--marine);
  color: var(--clair-60);
}

/* ---------------------------------------------------------
   L'ECRAN ETROIT. La colonne passe au-dessus plutot que de
   se vider : une colonne qui ne porte rien laisse un trou et
   ment sur ce qui existe.
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .usine-cadre { flex-direction: column; }
  .usine-colonne { width: 100%; flex: none; padding: var(--esp-7) 0; }
  .usine-principal { padding: var(--esp-8); }
  .usine-avis { padding: var(--esp-7) var(--esp-8) 0; }
  .usine-faits { grid-template-columns: 1fr; gap: var(--esp-2); }
  .usine-faits dd { margin-bottom: var(--esp-5); }
}

/* ---------------------------------------------------------
   LE PARC

   LES COMPTES SONT DES CHEMINS, PAS DES VOYANTS. Chacun mene
   au parc filtre sur son etat : un nombre qu'on ne peut pas
   ouvrir oblige a chercher ailleurs ce qu'il annonce.

   CELUI QUI EST CHOISI SE VOIT SANS COULEUR. La couleur d'un
   compte dit deja son etat ; s'en servir aussi pour dire
   << c'est celui-ci que vous regardez >> ferait porter deux
   sens au meme trait, et le jour ou les deux se contredisent,
   personne ne sait lequel lire.
   --------------------------------------------------------- */

.usine-parc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-6);
  margin-bottom: var(--esp-9);
}

.usine-compte {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 120px;
  padding: var(--esp-6) var(--esp-8);
  border: 1px solid var(--trait);
  border-radius: var(--rond-3);
  background: var(--surface);
  color: var(--texte);
}

.usine-compte:hover { background: var(--survol); text-decoration: none; }

.usine-compte strong {
  font-size: var(--txt-10);
  line-height: 1.1;
  color: var(--titre);
}

.usine-compte span {
  font-size: var(--txt-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texte-faible);
}

.usine-compte-choisi {
  border-color: var(--marine);
  box-shadow: inset 0 0 0 1px var(--marine);
}

.usine-compte-actif strong         { color: var(--succes-texte); }
.usine-compte-lecture_seule strong { color: var(--avert-texte); }
.usine-compte-eteint strong        { color: var(--danger-texte); }
.usine-compte-refusee strong       { color: var(--danger-texte); }
.usine-compte-sans_voix strong     { color: var(--avert-texte); }
.usine-compte-jamais_parle strong  { color: var(--avert-texte); }
.usine-compte-en_vie strong        { color: var(--succes-texte); }

/* LE TERME SE POSE A COTE DE L'ETAT, jamais a sa place : une
   lecture seule reste une lecture seule le jour ou son terme
   arrive. Ce qui change, c'est qu'elle attend quelqu'un. */

.usine-terme {
  display: inline-block;
  margin-left: var(--esp-3);
  font-size: var(--txt-2);
  color: var(--texte-faible);
  white-space: nowrap;
}

.usine-terme-arrive {
  color: var(--avert-texte);
  font-weight: 600;
}

/* ---------------------------------------------------------
   CE QUI FERME

   UN GESTE FINAL PORTE SA COULEUR, et il ne la porte QUE la
   ou il est vraiment final. Teindre en rouge tout ce qui
   ferme quelque chose use la couleur, et le jour ou elle
   parait sur le geste qui ne se defait pas, elle ne dit plus
   rien de particulier.
   --------------------------------------------------------- */

.usine-bouton-dernier {
  border-color: var(--danger-trait);
  background: var(--danger-fond);
  color: var(--danger-texte);
}

.usine-bouton-dernier:hover {
  background: var(--danger-texte);
  border-color: var(--danger-texte);
  color: var(--surface);
}

.usine-consequences {
  margin: var(--esp-7) 0 0;
  padding-left: var(--esp-8);
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  color: var(--texte);
}

/* ---------------------------------------------------------
   LA NATURE D'UNE PUBLICATION

   Meme forme que la pastille d'un etat de client, et ce n'est
   pas la meme chose : un etat dit ou un client est rendu, une
   nature dit comment une publication se comporte en descendant.
   Deux jeux de classes plutot qu'un, pour que le jour ou l'un
   des deux change, l'autre ne bouge pas avec lui.
   --------------------------------------------------------- */

.usine-nature {
  display: inline-block;
  padding: var(--esp-1) var(--esp-5);
  border-radius: 999px;
  font-size: var(--txt-2);
  border: 1px solid var(--trait);
  background: var(--surface-douce);
  color: var(--texte-faible);
  white-space: nowrap;
}

.usine-nature-correctif { background: var(--info-fond); border-color: var(--info-trait); color: var(--info-texte); }
.usine-nature-visage { background: var(--avert-fond); border-color: var(--avert-trait); color: var(--avert-texte); }
.usine-nature-achat { background: var(--surface-douce); border-color: var(--trait-fort); color: var(--texte-faible); }