/* 2-acces.css — qui vient et ce qui est branché : l'entonnoir de l'instance, les accès, le chemin vers
 * une clé, les listes de cartes.
 *
 * ── L'ORDRE COMPTE ─────────────────────────────────────────────────────────────────
 * Ce fichier est une TRANCHE de l'ancien app.css, découpé en neuf morceaux contigus. Le
 * chiffre en tête du nom est son rang de cascade, et ce n'est pas de la décoration : lus
 * dans l'ordre, les neuf fichiers valent exactement l'ancien, à l'octet près. Les intervertir
 * change ce qui l'emporte — et une cascade inversée ne se voit pas, elle se constate trois
 * jours plus tard sur un écran précis.
 *
 * Deux raisons de ne PAS regrouper par thème en réordonnant : les paires
 * `@media`/`@container` se redoublent (chacune doit rester APRÈS la @media qu'elle double),
 * et `container-type` définit l'unité de mesure de tout ce qu'il contient. Le découpage
 * contigu rend ces deux pièges impossibles au lieu de demander qu'on y pense.
 *
 * `tests/test_feuilles_css.py` vérifie que les quatre points de chargement listent bien ces
 * neuf fichiers, dans ce rang.
 */

/* — qui vient : l'entonnoir de l'instance —
 *
 * Une barre par palier, dont la largeur est la proportion de gens arrivés qui vont
 * jusque-là. Des nombres seuls demandent de faire la division de tête ; la barre la fait,
 * et c'est le décrochage qu'on veut voir, pas les totaux.
 */
.entonnoir { display: grid; gap: var(--s2); margin: var(--s3) 0; }

.pal {
  display: grid;
  grid-template-columns: 3.5rem 1fr 3rem;
  grid-template-areas: "n l p" "n b p";
  align-items: center;
  gap: 0 var(--s3);
}

.pal b { grid-area: n; font: var(--w-gras) var(--t6)/var(--lh-plat) var(--font-head); text-align: right; }
.pal span { grid-area: l; font-size: var(--t4); }
.pal small { grid-area: p; color: var(--mist); font-size: var(--t2); text-align: right; }

.pal i {
  grid-area: b;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
}

/* La largeur vient d'une donnée du serveur, donc d'une propriété posée en JavaScript —
 * la politique de sécurité interdit un `style=` en ligne. */
.pal i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--part, 0%);
  border-radius: 999px;
  background: var(--accent);
}

/* La seule ligne de l'écran qui dise quoi faire demain matin. Elle doit se voir. */
.decroche {
  background: var(--panel);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  padding: var(--s3);
  font-size: var(--t4);
}

.motifs { list-style: none; padding: 0; margin: var(--s2) 0; font-size: var(--t4); }
.motifs li { padding: .3em 0; border-bottom: 1px solid var(--line); }
.motifs b { color: var(--error); margin-right: .4em; }

/* Le motif d'un chantier refusé, sur sa propre ligne. En rouge et avant le statut : c'est
 * ce qu'on doit lire, « refusé » seul n'apprend rien et fait relancer pour rien. */
.ds .refus, li .refus { display: block; color: var(--error); }

/* Le refus du serveur, à l'endroit où l'on vient d'agir. Ailleurs, il n'est pas lu. */
.err-neuf {
  margin: 0;
  color: var(--error);
  font-size: var(--t4);
}

/* — les accès : ce qui est branché, et ce que lane en fait —
 *
 * Trois blocs par carte, et le deuxième est celui qu'on lit vraiment : « lane ne peut pas ».
 * Il est rendu en couleur d'erreur non pour alarmer mais parce que c'est la LISTE DES
 * REFUS — la lire d'un coup d'œil est tout ce qu'on lui demande. */
.paliers {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  display: grid;
  gap: var(--s2);
  counter-reset: palier;
}

.paliers li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  background: var(--panel2);
}

.paliers li::before {
  counter-increment: palier;
  content: counter(palier);
  font: var(--w-fort) var(--t2)/var(--lh-plat) var(--font-mono);
  color: var(--mist);
}

.paliers b { font: var(--w-fort) var(--t4)/var(--lh-ui) var(--font-body); }
.paliers small { color: var(--mist); font-size: var(--t3); }

/* Atteint : discret, c'est derrière soi. Maintenant : mis en avant, c'est la prochaine
 * chose utile. Plus tard : effacé — le proposer reviendrait à réclamer un branchement pour
 * une chose qu'on ne cherche pas encore à faire. */
.paliers .fait { background: var(--ok-bg); }
.paliers .fait b { color: var(--ok); }
.paliers .maintenant { background: var(--accent-bg); border: 1px solid var(--accent); }
.paliers .plus-tard { opacity: .55; }

/* Une carte par accès, et autant de colonnes que l'écran en tient. En colonne unique, une
 * carte faisait 1408 px de large pour une pastille, un nom et deux lignes — le même vide que
 * les onglets avaient avant d'être mis en colonnes. Le minimum est haut (340 px) parce
 * qu'une carte porte deux listes, « lane peut » et « lane ne peut pas », qui ne se lisent
 * pas en colonne étroite. */
.acces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* `min(340px, 100%)` et non `340px` tout court : le minimum d'un `minmax` l'emporte sur la
   * largeur disponible, donc une piste de 340 px dans une fenêtre de 320 déborde — et
   * `overflow-x: clip` la coupe sans le dire. Mesuré : dix-huit éléments hors cadre sur un
   * iPhone SE. C'est le piège de `minmax`, et il ne se voit qu'en descendant sous le
   * minimum qu'on vient d'écrire. */
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  align-items: start;
  gap: var(--s4);
}

/* Chaque carte est l'unité de mesure de son contenu, comme un bloc d'onglet : c'est ce qui
 * permet à son en-tête de se replier selon SA largeur et non selon la fenêtre. */
.carte-acces { container-type: inline-size; }

.carte-acces {
  padding: var(--s4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lv, var(--line));
  border-radius: var(--radius);
  display: grid;
  gap: var(--s3);
}

.carte-acces.utile { border-color: var(--accent); }

.acces-tete { display: flex; align-items: center; gap: var(--s3); }
.acces-tete > div { flex: 1; min-width: 0; }

/* Pas de repli sur cet en-tête, et c'est une décision : essayé, mesuré, retiré. Le badge
 * passait sous le texte, mais le nom se retrouvait sur deux lignes dans 92 px au lieu d'une
 * dans 132 — la carte devenait plus haute et moins lisible pour éviter un chevauchement qui
 * ne se produisait pas. Un badge de deux mots à droite d'un nom court tient dans 288 px. */
.acces-tete b { display: block; font: var(--w-fort) var(--t5)/var(--lh-ui) var(--font-body); }
.acces-tete small { color: var(--mist); font-size: var(--t3); }

/* La même largeur de lecture que dans le reste de l'application. Sans elle, le détail d'un
 * accès atteignait 172 caractères par ligne et sa liste 194 — mesuré à 1440 px, avant que
 * les cartes ne passent en colonnes. En `ch`, donc dans la taille de police de l'élément
 * BORNÉ : posée sur son parent, la limite se mesurerait en corps 16 pour du texte en 13. */
.carte-acces .muted,
.acces-bloc li { max-width: var(--mesure); }

.acces-bloc h4 {
  font: var(--w-fort) var(--t2)/var(--lh-plat) var(--font-head);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mist);
  margin: 0 0 var(--s2);
}

.acces-bloc ul { margin: 0; padding-left: 1.2em; font-size: var(--t4); }
.acces-bloc li { margin: .2em 0; }
.acces-bloc .jamais { color: var(--error); }
.acces-bloc .sortant { color: var(--mist); font-size: var(--t2); margin-left: .4em; }

.acces-revoquer { font-size: var(--t3); }

/* — le chemin pour aller chercher une clé —
 *
 * Une phrase d'aide se lit en diagonale et se perd ; une suite numérotée se suit. La
 * différence compte ici plus qu'ailleurs, parce que ce parcours passe par un autre site : on
 * le quitte, on revient, et il faut retrouver où l'on en était.
 *
 * Le bouton « Ouvrir » est aligné à droite de son étape et non en dessous : sur un téléphone,
 * un bouton pleine largeur sous chaque ligne repousse la dernière étape — celle qui dit de
 * revenir coller la clé — hors de l'écran. */
.parcours {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: var(--s3);
  text-align: left;
  font-size: var(--t4);
  color: var(--mist);
}

.parcours li {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.parcours li > a { flex: none; text-decoration: none; }

/* — listes de cartes — la vue d'ensemble et le sélecteur partagent la même carte —
 * Deux listes, un seul jeu de règles : la duplication commence toujours par « c'est
 * presque pareil mais pas tout à fait ». */

.overview, .products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

.overview a, .products a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "dot title" "dot sub";
  align-items: center;
  column-gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}

.overview b, .products b { grid-area: title; font-family: var(--font-head); }
.overview small, .products small { grid-area: sub; color: var(--mist); font-size: var(--t4); }

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lv, var(--mist));
}

/* `grid-area` ne vaut QUE dans les cartes, où cette zone existe. Le mettre sur `.dot` en
 * général plaçait la pastille de la tuile dans une zone IMPLICITE créée en fin de grille —
 * donc en bas à droite, sous le logo, au lieu du coin haut-droit. Une propriété de
 * placement n'appartient pas au composant : elle appartient à la mise en page qui l'accueille. */
.overview .dot, .products .dot { grid-area: dot; }