/* ============================================================================
   Aptenda — l'espace de travail.

   Une seule question a guidé chaque écran : « qu'est-ce que la personne doit faire
   MAINTENANT ? » Une réponse par écran, et rien d'autre à l'image. Le parcours
   d'entrée tient en trois gestes, et chacun montre son résultat avant de demander
   le suivant : on dépose un CV, on VOIT ses preuves ; on dit sa ville, on VOIT son
   marché ; alors seulement on donne une adresse.

   Le vocabulaire visuel reste celui du dossier trié : filets, blocs, rature.
   ========================================================================== */

.appli { background: var(--encre); color: var(--texte); }

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

.onglet {
  font: inherit;
  font-size: 0.94rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.35rem 0.1rem;
  color: var(--texte-2);
  cursor: pointer;
}
.onglet:hover { color: var(--texte); }
.onglet.actif { color: var(--texte); border-bottom-color: var(--refus); font-weight: 700; }

.lien-bouton {
  font: inherit;
  font-size: 0.9rem;
  background: none;
  border: 0;
  padding: 0.3rem 0.2rem;
  color: var(--texte-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--trait);
}
.lien-bouton:hover { color: var(--texte); text-decoration-color: var(--refus); }

@media (max-width: 800px) {
  .barre .cadre { flex-wrap: wrap; padding-block: 0.5rem; }
  #nav-app { order: 3; width: 100%; overflow-x: auto; gap: 1rem; padding-bottom: 0.3rem; }
}

/* ------------------------------------------------------------ parcours d'entrée */

.etape-hote { padding-block: clamp(2.5rem, 6vw, 5rem); }
.etape { max-width: 760px; }
.etape h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); margin-bottom: 0.3em; }
.etape .sous-titre { margin-top: 0; }

/* La zone de dépôt : la première chose qu'on voit, et la seule chose à faire. */
.depot {
  margin-top: 2rem;
  border: 2px dashed var(--trait-vif);
  background: var(--surface);
  padding: clamp(2rem, 5vw, 3.4rem) 1.5rem;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-vif), background var(--t-vif);
}
.depot:hover, .depot:focus-visible { border-color: var(--trait-vif); }
.depot.survol { border-color: var(--refus); border-style: solid; background: var(--refus-sourd); }
.depot-texte { font-size: 1.06rem; }

/* Le signe : une feuille et une flèche, dessinés au trait, cohérents avec le sceau. */
.depot-signe {
  width: 34px;
  height: 42px;
  border: 2px solid var(--trait-vif);
  position: relative;
  margin-bottom: 0.4rem;
}
.depot-signe::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 2px;
  height: 18px;
  background: var(--refus);
  transform: translateX(-50%);
}
.depot-signe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 9px;
  height: 9px;
  border-left: 2px solid var(--refus);
  border-top: 2px solid var(--refus);
  transform: translateX(-50%) rotate(45deg);
}

.repli { margin-top: 1.2rem; }
.repli summary { cursor: pointer; color: var(--texte-2); font-size: 0.94rem; }
.repli summary:hover { color: var(--texte); }
.repli textarea {
  width: 100%;
  margin-top: 0.8rem;
  font: inherit;
  font-size: 0.94rem;
  padding: 0.8rem;
  border: 1.5px solid var(--trait);
  background: var(--surface);
  color: var(--texte);
  resize: vertical;
}
.repli textarea:focus { border-color: var(--trait-vif); outline: none; }
.repli .bouton { margin-top: 0.8rem; }

/* La lecture du CV : le premier moment où le produit prouve qu'il a compris. */
.lecture { margin-top: 2rem; border-top: 1px solid var(--trait); padding-top: 1.4rem; }
.lecture h2 { font-size: 1.35rem; }

.preuves { display: grid; gap: 0; border-top: 1px solid var(--trait); margin-top: 1rem; }
.preuve {
  border-bottom: 1px solid var(--trait);
  padding: 0.7rem 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: baseline;
  font-size: 0.96rem;
}
.preuve .type {
  font-family: "Aptenda Chiffre", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-3);
  border: 1px solid var(--trait);
  padding: 0.1rem 0.35rem;
  white-space: nowrap;
}
.preuve .chiffre-preuve { font-family: "Aptenda Chiffre", monospace; font-size: 0.82rem; color: var(--retenu); white-space: nowrap; }
.preuve .oter { background: none; border: 0; color: var(--texte-3); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 0.2rem; }
.preuve .oter:hover { color: var(--refus); }

.trous { border-left: 3px solid var(--or); padding-left: 1rem; margin-top: 1.4rem; }
.trous li { margin-bottom: 0.5rem; }

.apercu-marche { border: 1.5px solid var(--trait-vif); padding: 1rem 1.2rem; margin-top: 1.6rem; background: var(--surface); }
.apercu-marche .gros { font-family: "Aptenda Chiffre", monospace; font-size: 2rem; font-weight: 700; line-height: 1; }

/* ------------------------------------------------------------ formulaires */

.formulaire { display: grid; gap: 1.2rem; margin-top: 1.8rem; max-width: 560px; }
.champ { display: grid; gap: 0.35rem; border: 0; padding: 0; margin: 0; }
.champ label, .champ legend { font-weight: 700; font-size: 0.95rem; padding: 0; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="password"], .champ input[type="number"], .champ select, .champ textarea {
  font: inherit;
  padding: 0.68rem 0.75rem;
  border: 1.5px solid var(--trait);
  background: var(--surface);
  color: var(--texte);
  width: 100%;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--trait-vif); outline: 2px solid transparent; outline-offset: 2px; }
.champ .aide { font-size: 0.85rem; color: var(--texte-3); margin: 0; }

.curseur { display: flex; align-items: center; gap: 0.9rem; }
.curseur input[type="range"] { flex: 1; accent-color: var(--refus); }
.curseur output { min-width: 5.5rem; font-size: 0.95rem; }

.cases { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.cases label { font-weight: 400; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.cases input { accent-color: var(--refus); }

.erreur { color: var(--refus); font-size: 0.92rem; margin: 0; }

/* ------------------------------------------------------------ aujourd'hui */

.bandeau {
  border: 1.5px solid var(--trait-vif);
  padding: 1rem 1.2rem;
  margin: 1.6rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: baseline;
  background: var(--surface);
}
.bandeau .titre { font-family: "Aptenda Titre", sans-serif; font-size: 1.5rem; font-weight: 900; }
.bandeau .fait { font-size: 0.92rem; color: var(--texte-2); }
.bandeau .fait strong { font-family: "Aptenda Chiffre", monospace; }

.retenus { display: grid; gap: 0; border-top: 1px solid var(--trait); }

.offre {
  border-bottom: 1px solid var(--trait);
  padding: 1.25rem 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: start;
}
@media (max-width: 720px) { .offre { grid-template-columns: 48px minmax(0, 1fr); } .offre .cote { grid-column: 1 / -1; } }

.offre .note {
  font-family: "Aptenda Chiffre", monospace;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  padding-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.offre.oui .note { color: var(--retenu); }
.offre.peut .note { color: var(--or); }
.offre.non .note { color: var(--refus); }

.offre h3 { font-size: 1.18rem; margin: 0 0 0.15rem; font-family: "Aptenda Corps", sans-serif; font-weight: 700; line-height: 1.25; }
.offre .ou { font-size: 0.9rem; color: var(--texte-2); margin: 0 0 0.5rem; }
.offre .pourquoi { margin: 0; font-size: 0.95rem; }
.offre .pourquoi li { margin-bottom: 0.2rem; }
.offre ul { padding-left: 1.1rem; }
.offre .cote { display: grid; gap: 0.45rem; justify-items: stretch; min-width: 150px; }
.offre .cote .bouton { justify-content: center; padding: 0.6rem 1rem; font-size: 0.92rem; }

.offre.non h3 { text-decoration: line-through; text-decoration-color: var(--refus); text-decoration-thickness: 2px; color: var(--texte-2); }
.offre .motif-refus { color: var(--refus); font-size: 0.93rem; margin: 0.3rem 0 0; }

.jetons { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.jeton {
  font-family: "Aptenda Chiffre", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.13rem 0.42rem;
  border: 1px solid var(--trait);
  color: var(--texte-2);
}
.jeton.alerte { color: var(--refus); border-color: var(--refus); }
.jeton.frais { color: var(--retenu); border-color: var(--retenu); }

.ecartes { margin: 2rem 0 4rem; }
.bascule-ecartes {
  font: inherit;
  background: none;
  border: 0;
  border-top: 1px solid var(--trait);
  width: 100%;
  text-align: left;
  padding: 0.9rem 0;
  cursor: pointer;
  color: var(--texte-2);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.bascule-ecartes:hover { color: var(--texte); }

/* ------------------------------------------------------------ tiroir */

.tiroir { position: fixed; inset: 0; z-index: 60; }
.tiroir-fond { position: absolute; inset: 0; background: color-mix(in srgb, var(--texte) 42%, transparent); }
.tiroir-panneau {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(660px, 100%);
  background: var(--encre-2);
  border-left: 1.5px solid var(--trait-vif);
  overflow-y: auto;
  padding: 2rem clamp(1.2rem, 3vw, 2.4rem) 4rem;
}
@media (prefers-reduced-motion: no-preference) {
  .tiroir-panneau { animation: glisse 300ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes glisse { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.tiroir .fermer {
  position: sticky;
  top: 0;
  float: right;
  font-size: 1.7rem;
  line-height: 1;
  background: none;
  border: 0;
  color: var(--texte-2);
  cursor: pointer;
}
.tiroir .fermer:hover { color: var(--refus); }

/* ------------------------------------------------------------ pièces communes */

.carte-mesure { border: 1.5px solid var(--trait-vif); padding: 1.1rem 1.25rem; background: var(--surface); margin-bottom: 1.2rem; }
.carte-mesure h3 { margin: 0 0 0.55rem; font-family: "Aptenda Corps", sans-serif; font-size: 1.05rem; }

.jauge { height: 8px; background: var(--surface-2); border: 1px solid var(--trait); position: relative; }
.jauge span { position: absolute; inset: 0 auto 0 0; background: var(--retenu); }
.jauge.moyen span { background: var(--or); }
.jauge.faible span { background: var(--refus); }

.liste-controles { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.93rem; }
.liste-controles li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.4rem; align-items: baseline; }
.liste-controles .m { font-family: "Aptenda Chiffre", monospace; }
.liste-controles li.ok .m { color: var(--retenu); }
.liste-controles li.ko .m { color: var(--refus); }
.liste-controles li.ko { color: var(--texte); }
.liste-controles .remede { display: block; color: var(--texte-3); font-size: 0.86rem; }

/* La ligne de relance porte l'employeur, le poste, puis la phrase qui explique le délai.
   Sans `display:block`, la phrase se collait au poste — « Analyste financierRelance à
   envoyer : 12 jours de silence » — et rien ne le signalait, la page restant valide. */
.preuve .remede { display: block; color: var(--texte-3); font-size: 0.86rem; margin-top: 0.25rem; line-height: 1.4; }

.lettre-texte {
  white-space: pre-wrap;
  border: 1.5px solid var(--trait);
  background: var(--surface);
  padding: 1.1rem 1.2rem;
  font-size: 0.97rem;
  line-height: 1.66;
  min-height: 12rem;
  width: 100%;
  font-family: inherit;
  color: var(--texte);
  resize: vertical;
}

.rangee { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.9rem; }

.souffle {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  background: var(--trait-vif);
  color: var(--texte);
  padding: 0.7rem 1.2rem;
  z-index: 80;
  font-size: 0.94rem;
  border: 0;
  max-width: min(92vw, 520px);
}
.souffle.erreur { background: var(--refus); color: #fff; }

.vide { border: 1px dashed var(--trait); padding: 2rem 1.4rem; text-align: center; color: var(--texte-2); margin: 1.5rem 0; }

.travail { display: inline-block; width: 0.85em; height: 0.85em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .travail { animation: tourne 700ms linear infinite; }
  @keyframes tourne { to { transform: rotate(360deg); } }
}

.tableau-suivi td .etat { font-family: "Aptenda Chiffre", monospace; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.12rem 0.4rem; border: 1px solid var(--trait); }
.tableau-suivi td .etat.envoyee { border-color: var(--texte-2); }
.tableau-suivi td .etat.entretien, .tableau-suivi td .etat.offre { color: var(--retenu); border-color: var(--retenu); }
.tableau-suivi td .etat.refus { color: var(--refus); border-color: var(--refus); }

/* --- Correction d'audit — 28/08/2026 : le débordement horizontal de l'app.
   `#nav-app` portait bien `overflow-x: auto`, et pourtant la page débordait sur un écran de
   390 px : le texte des étapes sortait par la droite. La raison est un piège classique du
   flex — un élément flexible refuse par défaut de descendre sous sa largeur de contenu
   (`min-width: auto`). Sa barre de défilement ne servait donc jamais : c'est la PAGE qui
   s'élargissait à sa place. Trouvé en regardant la capture, pas en relisant la règle. */
#nav-app { min-width: 0; scrollbar-width: none; }
#nav-app::-webkit-scrollbar { display: none; }
.appli, .appli .cadre { max-width: 100%; }
.appli main { overflow-x: clip; }

@media (max-width: 800px) {
  /* Les onglets défilent au doigt et gardent une amorce visible à droite, pour qu'on
     comprenne qu'il y en a d'autres. */
  #nav-app { padding-right: 2.5rem; -webkit-overflow-scrolling: touch; }
  .onglet { white-space: nowrap; }
}

/* ============================================================================
   L'ATELIER DE CV
   Trois colonnes : le choix à gauche, la feuille au centre, la preuve à droite.
   Rien ne s'ouvre, rien ne se valide — c'est le point de toute la vue.
   ========================================================================== */

.atelier-tete { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.6rem; }
.atelier-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.atelier-corps {
  display: grid;
  grid-template-columns: 176px minmax(320px, 1fr) minmax(280px, 340px);
  gap: 1.6rem;
  align-items: start;
}

/* --- le choix */
.atelier-choix { position: sticky; top: 5rem; }
.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 0.55rem; }

/* Une vignette est le VRAI document en réduction. On lui interdit donc tout enjolivement :
   pas d'arrondi, pas d'ombre portée — le papier a des angles droits, et une carte molle
   ferait mentir l'aperçu autant qu'elle ferait « effet catalogue ». */
.vignette {
  appearance: none; background: none; border: 1px solid var(--trait); padding: 3px 3px 5px;
  cursor: pointer; display: grid; gap: 3px; justify-items: center; color: var(--texte-2);
  font: inherit; font-size: 0.68rem; text-align: center; transition: border-color 120ms, color 120ms;
}
.vignette:hover { border-color: var(--trait-vif); color: var(--texte); }
.vignette.choisie { border-color: var(--refus); color: var(--texte); }
.vignette.choisie .vignette-nom { font-weight: 700; }
.vignette-scene { display: block; position: relative; overflow: hidden; background: #fff; width: 100%; }
.vignette-scene .feuille { position: relative; }
.vignette-nom { line-height: 1.1; }
.vignette-info { color: var(--texte-3); font-size: 0.62rem; }

.nuancier { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pastille {
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--trait); cursor: pointer;
  background: var(--surface); transition: transform 110ms, border-color 110ms;
}
.pastille:hover { transform: translateY(-1px); border-color: var(--trait-vif); }
.pastille.choisie { border-color: var(--refus); box-shadow: inset 0 0 0 2px var(--encre); }
/* « Celle de la maquette » : un carreau, pour dire « pas de choix imposé ». */
.pastille-auto {
  background:
    linear-gradient(45deg, var(--trait) 25%, transparent 25%, transparent 75%, var(--trait) 75%) 0 0 / 10px 10px,
    linear-gradient(45deg, var(--trait) 25%, transparent 25%, transparent 75%, var(--trait) 75%) 5px 5px / 10px 10px,
    var(--surface);
}

.choix-pays {
  font: inherit; font-size: 0.9rem; width: 100%; padding: 0.45rem 0.5rem;
  background: var(--surface); color: var(--texte); border: 1px solid var(--trait);
}

/* --- la scène : du papier posé sur une table sombre */
.atelier-scene { display: grid; gap: 0.6rem; justify-items: center; }
.feuille-hote { width: 100%; display: grid; gap: 1rem; justify-items: center; }
.feuille-hote[aria-busy="true"] { opacity: 0.45; }
.atelier .feuille {
  position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.45);
}
.atelier .feuille .pr { pointer-events: none; }

/* --- la preuve */
.atelier-preuve { position: sticky; top: 5rem; display: grid; gap: 0; }
.flux-lecture { display: grid; gap: 2px; font-size: 0.78rem; }
.flux-ligne {
  font-family: "Aptenda Chiffre", ui-monospace, monospace; color: var(--texte-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flux-premiere { color: var(--retenu); font-weight: 700; }

@media (max-width: 1100px) {
  .atelier-corps { grid-template-columns: 150px minmax(0, 1fr); }
  .atelier-preuve { grid-column: 1 / -1; position: static; }
}
@media (max-width: 720px) {
  /* Sur un téléphone, la feuille passe en premier : c'est elle qu'on vient voir. Les
     vignettes défilent horizontalement sous elle, comme une pellicule. */
  .atelier-corps { grid-template-columns: minmax(0, 1fr); }
  .atelier-choix { position: static; order: 2; }
  .atelier-scene { order: 1; }
  .atelier-preuve { order: 3; }
  .vignettes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74px; overflow-x: auto; padding-bottom: 0.4rem; }
  .atelier-actions { width: 100%; }
  .atelier-actions .bouton { flex: 1 1 auto; text-align: center; }
}

/* --- La fiche que verra le recruteur.
   C'est un formulaire rempli par une machine, et il doit s'en voir : deux colonnes serrées,
   une police de données, et une case vide qui se signale comme un défaut — parce que c'en
   est un. Rien ici ne cherche à être joli ; ça cherche à être un écran de logiciel RH, pour
   que le candidat reconnaisse ce qu'il regarde. */
.fiche-cases { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: 0.34rem 0.7rem; margin: 0.8rem 0 0; }
.fiche-cases dt { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3); align-self: start; padding-top: 1px; }
.fiche-cases dd { margin: 0; font-family: "Aptenda Chiffre", ui-monospace, monospace; font-size: 0.82rem; color: var(--texte); word-break: break-word; }
.fiche-cases dt.case-absent, .fiche-cases dd.case-absent { color: var(--refus); }
.fiche-cases dt.case-douteux, .fiche-cases dd.case-douteux { color: #d9a441; }
.case-vide { font-style: italic; opacity: 0.85; }
.fiche-cases .remede { display: block; font-family: inherit; font-size: 0.74rem; color: var(--texte-3); margin-top: 2px; line-height: 1.35; }

/* --- Ce que le marché demande.
   Chaque ligne porte SON chiffre. Un conseil sans son compte n'est qu'un avis, et on en a
   déjà trop dans ce métier. */
.manques { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0; }
.manque {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 0.6rem;
  padding: 0.42rem 0 0.42rem 0.6rem; border-top: 1px solid var(--trait);
  border-left: 2px solid var(--trait);
}
.manque:last-child { border-bottom: 1px solid var(--trait); }
.manque b { font-size: 0.92rem; }
.manque-part { font-family: "Aptenda Chiffre", ui-monospace, monospace; font-size: 0.78rem; color: var(--texte-2); white-space: nowrap; }
.manque-n { grid-column: 1 / -1; font-size: 0.72rem; color: var(--texte-3); }
/* Trois rangs, trois épaisseurs de filet : « attendu » n'est pas « utile ». */
.manque-attendu { border-left-color: var(--refus); }
.manque-attendu .manque-part { color: var(--refus); }
.manque-frequent { border-left-color: var(--texte-2); }

/* --- Le même poste, publié plusieurs fois.
   La ligne recommandée porte un filet d'accent : c'est la porte de l'employeur, et c'est la
   seule information de ce bloc qui appelle un geste. */
.carte-alerte { border-left: 2px solid var(--refus); }
.voies { list-style: none; margin: 0.9rem 0 0.8rem; padding: 0; display: grid; gap: 0; }
.voie {
  display: grid; grid-template-columns: minmax(88px, auto) 1fr auto auto;
  align-items: baseline; gap: 0 0.8rem;
  padding: 0.45rem 0 0.45rem 0.6rem;
  border-top: 1px solid var(--trait); border-left: 2px solid transparent;
  font-size: 0.86rem;
}
.voie:last-child { border-bottom: 1px solid var(--trait); }
.voie-source { font-family: "Aptenda Chiffre", ui-monospace, monospace; }
.voie-quoi { color: var(--texte-3); font-size: 0.8rem; }
.voie-date { font-family: "Aptenda Chiffre", ui-monospace, monospace; font-size: 0.76rem; color: var(--texte-3); }
.voie-directe { border-left-color: var(--retenu); }
.voie-directe .voie-source { font-weight: 700; color: var(--retenu); }

/* Des questions à copier, pas des conseils à méditer. */
.a-demander { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.a-demander li {
  border-left: 2px solid var(--trait-vif); padding: 0.3rem 0 0.3rem 0.7rem;
  font-size: 0.88rem; color: var(--texte);
}
@media (max-width: 620px) {
  .voie { grid-template-columns: 1fr auto; }
  .voie-quoi { grid-column: 1 / -1; }
}

/* --- La couleur de l'employeur : un champ, un bouton, une phrase qui dit ce qu'on a mesuré. */
.reglage { display: grid; gap: 0.45rem; }
.reglage .bouton { width: 100%; text-align: center; font-size: 0.88rem; padding: 0.5rem; }
/* La pastille de marque se distingue des palettes maison : elle vise un destinataire précis,
   pas un goût. Un liseré double le dit sans écrire un mot. */
.pastille-marque { box-shadow: 0 0 0 1px var(--surface) inset, 0 0 0 2px var(--retenu); }
.pastille-marque.choisie { box-shadow: inset 0 0 0 2px var(--encre), 0 0 0 2px var(--retenu); }


/* Le cadre de la fiche du recruteur : un filet d'accent à gauche, pour qu'on comprenne d'un
   coup d'œil que ce bloc ne dit pas notre avis mais ce que la machine d'en face a compris. */
.fiche-ats { border-left: 2px solid var(--trait-vif); }

/* --- Le passeport : une liste qu'on descend en même temps que le formulaire d'en face.
   Chaque ligne tient sur une hauteur constante, avec son bouton de copie à droite : c'est
   fait pour être parcouru au doigt ou au clavier, pas pour être lu. */
.passeport .champs { display: grid; gap: 0; margin-top: 0.5rem; }
.champ-ligne {
  display: grid; grid-template-columns: minmax(110px, 26%) 1fr auto; gap: 0 0.8rem;
  align-items: baseline; padding: 0.42rem 0 0.42rem 0.6rem;
  border-top: 1px solid var(--trait); border-left: 2px solid transparent;
}
.champ-ligne:last-child { border-bottom: 1px solid var(--trait); }
.champ-nom { font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texte-3); }
.champ-valeur { font-family: "Aptenda Chiffre", ui-monospace, monospace; font-size: 0.84rem; word-break: break-word; }
.champ-valeur em { font-family: "Aptenda Corps", ui-sans-serif, system-ui, sans-serif; font-style: italic; color: var(--texte-3); }
.champ-ligne .remede { grid-column: 2 / -1; font-size: 0.73rem; color: var(--texte-3); margin-top: 2px; }
/* Un champ vide se signale, il ne se cache pas : c'est justement celui qui bloquera le
   formulaire d'en face, et le savoir AVANT vaut mieux que le découvrir au champ 27. */
.champ-a_completer { border-left-color: var(--refus); }
.champ-a_completer .champ-nom { color: var(--refus); }
.champ-a_decider { border-left-color: #d9a441; }
@media (max-width: 620px) {
  .champ-ligne { grid-template-columns: 1fr auto; }
  .champ-nom { grid-column: 1 / -1; }
}

/* --- La négociation : ce qu'on dit, mot pour mot.
   Le montant à demander occupe la place qu'il mérite — c'est la seule information de l'écran
   qui vaut plusieurs milliers d'euros. Les phrases sont présentées comme des citations à
   prononcer, pas comme des conseils à méditer. */
.demande {
  display: grid; gap: 0.1rem; margin: 1rem 0 0.4rem;
  padding: 0.7rem 0 0.7rem 0.8rem; border-left: 3px solid var(--retenu);
}
.demande-montant { font-family: "Aptenda Chiffre", ui-monospace, monospace; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.04em; color: var(--retenu); line-height: 1; }
.demande-quoi { font-size: 0.88rem; color: var(--texte-2); }
.demande .remede { font-size: 0.75rem; color: var(--texte-3); margin-top: 0.3rem; }

.a-dire {
  margin: 0.3rem 0 0.2rem; padding: 0.7rem 0 0.7rem 0.8rem;
  border-left: 2px solid var(--trait-vif); background: none;
  font-size: 0.95rem; line-height: 1.5; color: var(--texte);
}

.leviers { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0; }
.leviers li { padding: 0.7rem 0; border-top: 1px solid var(--trait); display: grid; gap: 0.25rem; }
.leviers li:last-child { border-bottom: 1px solid var(--trait); }
.levier-phrase { font-size: 0.9rem; color: var(--texte-2); font-style: italic; }

/* --- Ta semaine : ce que tu n'as PAS eu à faire. Un filet vert, pas un tableau de bord. */
.semaine { border-left: 2px solid var(--retenu); }
/* Le bloc de négociation : un filet d'accent, parce que c'est de l'argent qui se joue. */
.negociation { border-left: 2px solid var(--retenu); margin-top: 1rem; }
/* Le CV en aveugle : un filet ambre, parce que ce bloc parle d'un risque, pas d'un succès. */
.aveugle { border-left: 2px solid #d9a441; }
/* Les phrases explicatives des panneaux de réglage reviennent au corps de texte.
   Elles héritaient de `.marque` — le nom déjà pris par le LOGO du site, en police de titre
   noire à 1,3 rem. Deux choses qui portent le même nom finissent toujours par se voler leurs
   propriétés ; c'est la deuxième fois ce soir (cf. `ecrireRelance`). Le panneau s'appelle
   désormais `.reglage`, ce qu'il est. */
.reglage p { font-family: "Aptenda Corps", ui-sans-serif, system-ui, sans-serif; font-size: 0.76rem; line-height: 1.45; font-weight: 400; letter-spacing: 0; }

/* ────────────────────────────────────────────────────────────────────────────
   LA BOÎTE DE RÉCEPTION — ce qui demande une action aujourd'hui.

   Ce bloc est posé AVANT les offres du jour, et il doit se lire comme une
   interruption assumée : un filet vertical épais qui coupe la colonne, pas une
   carte de plus. Une convocation vaut cent annonces ; l'écran doit le dire.
   Le filet prend la couleur du type — c'est le seul endroit du produit où la
   couleur porte du sens, ailleurs elle serait décorative.
   ──────────────────────────────────────────────────────────────────────────── */

/* Un seul filet vertical, celui de la ligne. Deux barres parallèles — une pour le bloc,
   une pour la ligne — se lisaient comme un artefact, pas comme une intention. */
.boite-jour { margin: 0 0 1.6rem; }
.boite-titre { margin: 0 0 0.9rem; border-left: 4px solid var(--or); padding-left: 0.7rem; font-family: "Aptenda Corps", sans-serif; font-size: 1.02rem; letter-spacing: 0.01em; }
.boite-lignes { display: grid; gap: 0.9rem; }

.boite-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  border: 1px solid var(--trait);
  border-left: 3px solid var(--trait-vif);
  padding: 0.85rem 1rem;
  background: var(--surface);
}
.boite-ligne.convocation { border-left-color: var(--retenu); }
.boite-ligne.proposition { border-left-color: var(--or); }
.boite-ligne.complement { border-left-color: var(--or); }
.boite-ligne.refus { border-left-color: var(--refus); }

.boite-etiquette {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texte-2);
  align-self: start;
}
.boite-quoi { margin: 0; font-size: 0.98rem; }
.boite-objet { margin: 0.15rem 0 0; color: var(--texte-2); font-size: 0.92rem; overflow-wrap: anywhere; }
.boite-action { margin: 0.45rem 0 0; font-size: 0.93rem; }
.boite-pourquoi { margin: 0.4rem 0 0; font-size: 0.82rem; }
.boite-gestes { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.boite-gestes select { font-size: 0.85rem; padding: 0.25rem 0.4rem; }

@media (min-width: 720px) {
  .boite-ligne { grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: start; gap: 0.9rem; }
  .boite-gestes { flex-direction: column; align-items: flex-end; }
}

.grille-champs { display: grid; gap: 0.7rem; grid-template-columns: minmax(0, 1fr); }
.grille-champs label { display: grid; gap: 0.25rem; font-size: 0.88rem; color: var(--texte-2); }
@media (min-width: 620px) { .grille-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Le jour J : la date se saisit là où on la lit, sur la ligne de l'entretien. */
.jourj-ligne { align-items: center; }
.jourj-gestes { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.jourj-gestes input[type="datetime-local"] { font-size: 0.85rem; padding: 0.25rem 0.35rem; }


/* L'état d'un canal : une pastille qui se lit d'un coup d'œil, pas un rond de case à
   cocher — on n'est pas dans une liste de tâches, on décrit ce qui est branché. */
.canal { display: block; }
.etat-canal {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--trait-vif);
  color: var(--texte-2);
  vertical-align: 0.12em;
  margin-right: 0.45rem;
}
.etat-canal.oui { border-color: var(--retenu); color: var(--retenu); }

/* Le geste irréversible se distingue, sans crier : un filet rouge, pas un bouton rouge. */
.bouton.danger { border-color: var(--refus); color: var(--refus); }
.bouton.danger:hover { background: var(--refus-sourd); }

/* ────────────────────────────────────────────────────────────────────────────
   LE DIAGNOSTIC. Il répond à la question la plus douloureuse de la recherche,
   il doit donc se lire comme un verdict, pas comme un encart de conseils : un
   filet épais à gauche, une seule cause, et le reste en retrait.
   ──────────────────────────────────────────────────────────────────────────── */
.diagnostic { border-left: 4px solid var(--or); }
.diagnostic.attente { border-left-color: var(--trait-vif); }
.diagnostic.rien { border-left-color: var(--retenu); }
.diag-tete { font-size: 1.02rem; }
.diag-cause { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--trait); }
.diag-constat { margin: 0 0 0.6rem; font-size: 1rem; font-family: "Aptenda Corps", sans-serif; }
.diag-faire { margin-top: 0.8rem; }
.diag-ecartees { font-size: 0.82rem; margin-top: 0.9rem; }