/* ============================================================
   CRIBLE — le rapport d'analyse
   Le CV est l'échantillon, chaque offre une mesure lue contre un
   seuil. Une seule rampe de couleur, réservée à la graduation de
   l'axe : la position d'une barre EST sa couleur. Aucune teinte
   intermédiaire arbitraire n'existe dans cette feuille.
   ============================================================ */

:root {
  /* Sol et matière */
  --ink:        #0D0F12;
  --panel:      #14171C;
  --panel-2:    #1A1E24;
  --panel-3:    #20252D;
  --line:       #262B33;
  --line-2:     #333A44;

  --line-3:     #414A57;   /* filet au survol */
  --scroll-2:   #46505E;   /* ascenseur au survol */

  /* Encre */
  --text:       #E9ECF0;
  --text-2:     #A6AEBA;
  /* #7C8593 tombait a 4,49:1 sur --panel-2, sous le plancher de 4,5 que la
     charte se fixe. Deux crans plus clair : 4,61:1, ecart invisible a l'oeil. */
  --text-3:     #7E8795;

  /* La rampe de mesure : violet (bas) → magenta → orange (haut).
     Le haut de l'échelle est l'extrémité lumineuse, pour que le
     regard trouve les meilleures offres sans lire un chiffre. */
  --ramp: linear-gradient(90deg, #7B3FE4 0%, #E8299B 52%, #FF8A4C 100%);
  --stop-low:  #7B3FE4;
  --stop-mid:  #E8299B;
  --stop-high: #FF8A4C;

  /* Teintes de texte dérivées des mêmes arrêts, remontées pour
     tenir le contraste sur fond graphite. */
  --tint-low:  #A47BEF;
  --tint-mid:  #F272BE;
  --tint-high: #FF8A4C;


  --measure: 62ch;
  --radius: 6px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --accent-soft: rgba(232, 41, 155, 0.3);
  --accent-wash: rgba(232, 41, 155, 0.32);
  --sel-text:    #fff;                     /* encre sur la surbrillance */
  --on-ramp:     #14060F;                  /* encre posee sur la rampe */
  --scrim:       rgba(6, 7, 9, 0.76);      /* voile de modale */
  --shadow-lift: 0 24px 60px -12px rgba(0, 0, 0, 0.7);

  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* ------------------------------------------------------------------ Jour
   Le même banc de mesure, sous une autre lumière. La rampe ne bouge pas d'un
   degré : elle EST la graduation de l'axe, un score de 91 % doit porter la même
   teinte le jour et la nuit, sinon la couleur cesse d'être une lecture.

   Ce qui se retourne, ce sont les niveaux de surface et les teintes de texte.
   La charte dit des --tint-* qu'ils sont « les trois arrêts éclaircis juste
   assez pour tenir le contraste sur le graphite » : sur le papier, c'est la
   même opération dans l'autre sens, les mêmes arrêts assombris juste assez.
   Toutes les paires sont recalculées, plancher 4,5:1 tenu sans exception. */
:root[data-theme="jour"] {
  color-scheme: light;

  --ink:        #EFEEF3;
  --panel:      #FFFFFF;
  --panel-2:    #F7F6FA;
  --panel-3:    #E8E6EF;
  --line:       #DEDBE6;
  --line-2:     #C5C1D1;
  --line-3:     #A9A3BA;
  --scroll-2:   #9C96AE;

  --text:       #14131A;
  --text-2:     #4A4756;
  --text-3:     #63606F;

  /* Les arrêts, assombris pour tenir sur le papier. */
  --tint-low:   #6A2BD0;
  --tint-mid:   #B81278;
  --tint-high:  #A8480C;

  --accent-soft: rgba(184, 18, 120, 0.28);
  --accent-wash: rgba(232, 41, 155, 0.22);
  --sel-text:    #14131A;
  --scrim:       rgba(24, 20, 32, 0.44);
  --shadow-lift: 0 24px 60px -18px rgba(24, 20, 32, 0.28);
}

* { box-sizing: border-box; }

/* Nuit par défaut ; le bloc [data-theme="jour"] repasse en clair. */
:root { color-scheme: dark; }

body {
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 24px 64px;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- Surfaces que le navigateur dessine à notre place ---- */
::selection { background: var(--accent-wash); color: var(--sel-text); }
input, textarea { caret-color: var(--stop-mid); }
* { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 99px;
  border: 3px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-2); }

:focus-visible {
  outline: 2px solid var(--tint-mid);
  outline-offset: 2px;
  border-radius: 3px;
}

a { color: var(--tint-mid); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tint-high); }

.hidden { display: none !important; }

/* ============================================================
   Bandeau de marque
   ============================================================ */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.brand { display: flex; align-items: center; gap: 13px; }
/* L'empreinte est détourée : plus de tuile arrondie ni de halo sous l'image.
   Un fond et une ombre dessineraient le carré du PNG au lieu du dessin. */
.mark {
  width: 34px; height: 34px;
  flex: none;
  object-fit: contain;
}
.brand-text h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 620;
  letter-spacing: 0.14em;
  line-height: 1.1;
}
.brand-text p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
}

.head-controls { display: flex; align-items: center; gap: 8px; }
/* Interrupteur jour/nuit. Même gabarit que .lang-btn : deux positions visibles
   côte à côte, l'état courant marqué par la surface, jamais par la seule
   couleur. On voit donc où l'on est ET où l'on peut aller, ce qu'un bouton à
   bascule unique ne dit pas. */
.theme-switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.theme-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  padding: 5px 9px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: color 120ms, background-color 120ms;
}
.theme-btn:hover { color: var(--text); }
.theme-btn[aria-pressed="true"] { background: var(--panel-3); color: var(--text); }
.theme-btn svg {
  width: 15px; height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lang-switch { display: flex; gap: 2px; padding: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 120ms, background-color 120ms;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.is-active { background: var(--panel-3); color: var(--text); }

/* ============================================================
   Le banc de mesure
   ============================================================ */
.rig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
}
.rig-block {
  background: var(--panel);
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rig-label {
  margin: 0 0 11px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}
.rig-body { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; }
.rig-links { display: flex; flex-wrap: wrap; gap: 4px 14px; width: 100%; }

/* Champ de fichier : le libellé porte l'icône, pas un emoji */
.cv-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 550;
  transition: border-color 120ms, background-color 120ms;
}
.cv-label:hover { background: var(--panel-3); border-color: var(--line-3); }
.cv-label:focus-within { outline: 2px solid var(--tint-mid); outline-offset: 2px; }
.cv-label input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cv-label::before {
  content: "";
  width: 15px; height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon-doc) center / contain no-repeat;
  mask: var(--icon-doc) center / contain no-repeat;
}
.cv-hint {
  width: 100%;
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
  max-width: var(--measure);
}

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 120px; }
.field-wide { flex: 2 1 200px; }
.field label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
input[type="text"], textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  padding: 8px 11px;
  transition: border-color 120ms;
}
input[type="text"]::placeholder, textarea::placeholder { color: var(--text-3); }
input[type="text"]:hover, textarea:hover { border-color: var(--line-3); }
textarea { resize: vertical; line-height: 1.6; }

/* Cases des sources : pastille colorée dessinée, pas la case système */
.chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  padding: 3px 0;
  width: 100%;
}
.chk input {
  appearance: none;
  width: 15px; height: 15px;
  flex: none;
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--ink);
  cursor: pointer;
  position: relative;
  transition: border-color 120ms, background-color 120ms;
}
.chk input:checked { background: var(--src, var(--text-2)); border-color: var(--src, var(--text-2)); }
.chk input:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  -webkit-mask: var(--icon-check) center / 11px 11px no-repeat;
  mask: var(--icon-check) center / 11px 11px no-repeat;
}
.chk input:focus-visible { outline: 2px solid var(--tint-mid); outline-offset: 2px; }
.chk:hover { color: var(--text); }
/* Les trois sources prennent chacune une position sur la rampe, dans l'ordre
   où elles sont interrogées : ce ne sont pas trois teintes inventées, ce sont
   les trois arrêts existants, et rien d'autre n'entre dans la feuille. La
   graduation reste lisible en cochant/décochant — l'ordre des teintes est
   celui de la liste, de bas en haut d'échelle.
   (Revient sur le retrait fait à la revue de finition de la v6 ; décision
   utilisateur du 26/08/2026, voir DESIGN.md.) */
.chk-ft  { --src: var(--tint-low); }
.chk-adz { --src: var(--tint-mid); }
.chk-mj  { --src: var(--tint-high); }

/* Indice posé sous le champ qu'il concerne, pas dans la ligne de résultats :
   on le lit là où on corrige. L'italique le distingue d'un libellé sans
   ajouter ni couleur d'alerte ni icône — ce n'est pas une erreur, c'est une
   suggestion. role="status" le fait annoncer par les lecteurs d'écran.

   Sorti du flux : .rig-body aligne ses champs sur leur bord bas
   (align-items: flex-end), donc un indice qui rallonge le champ ferait
   remonter tout le bloc « Intitulé du poste » au-dessus de « Ville ».
   La place qu'il occupe est reprise sous la rangée, et seulement s'il
   est affiché. */
.field-wide { position: relative; }
.field-hint {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  margin: 0;
  font-size: 12px;
  font-style: italic;
  color: var(--tint-mid);
  white-space: nowrap;
}
.rig-body:has(.field-hint:not(.hidden)) { padding-bottom: 24px; }

/* ---- Boutons ---- */
.solid-btn, .primary-btn {
  appearance: none;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, transform 120ms var(--ease-out);
}
.solid-btn:hover { background: var(--panel-3); border-color: var(--line-3); }
.solid-btn:active { transform: translateY(1px); }

/* L'action primaire est le seul élément à pleine intensité de la page */
.primary-btn {
  width: 100%;
  margin-top: 4px;
  position: relative;
  border-color: transparent;
  /* Moitié haute de la rampe seulement : sur l'arrêt violet, le texte
     sombre tombe à 3,5:1, sous le seuil de 4,5 exigé à cette taille.
     Magenta → orange tient 4,9:1 et 8,5:1. L'action qui produit le
     classement vit d'ailleurs au haut de l'échelle. */
  background: linear-gradient(90deg, var(--stop-mid) 0%, var(--stop-high) 100%);
  color: var(--on-ramp);
  font-weight: 680;
  letter-spacing: 0.01em;
  box-shadow: 0 3px 16px -4px rgba(232, 41, 155, 0.55);
}
.primary-btn:hover:not(:disabled) { filter: brightness(1.08); }
.primary-btn:active:not(:disabled) { transform: translateY(1px); }
/* Désactivé est l'état du premier chargement, donc il reste l'action
   focale : bordure tirée de la rampe, et un texte qui tient 7,4:1 —
   var(--text-3) tombait à 4,47:1 sur ce fond. */
.primary-btn:disabled {
  background: var(--panel-2);
  border-color: var(--accent-soft);
  color: var(--text-2);
  box-shadow: none;
  cursor: not-allowed;
}

.link-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
  transition: color 120ms, text-decoration-color 120ms;
}
.link-btn:hover { color: var(--tint-mid); text-decoration-color: currentColor; }

.status-line {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   L'axe de mesure — gradué une seule fois, pour toutes les lignes
   ============================================================ */
.axis {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0 0;
  background: linear-gradient(var(--ink) 72%, transparent);
}
.axis-ramp {
  height: 3px;
  border-radius: 2px;
  background: var(--ramp);
  opacity: 0.32;
}
.axis-ticks { position: relative; height: 16px; }
.axis-tick {
  position: absolute;
  left: calc(var(--at) * 1%);
  transform: translateX(-50%);
  top: 1px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--text-3);
}
.axis-tick:first-child { transform: none; }
.axis-tick:last-child { transform: translateX(-100%); }
.axis-tick.is-threshold { color: var(--text-2); }
.axis-tick em {
  font-style: normal;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.axis-tick.is-threshold::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 1px;
  height: 6px;
  background: var(--text-2);
}

/* ============================================================
   Les mesures — une offre par ligne, alignée sur l'axe
   ============================================================ */
.results { display: block; }
.results.is-busy { opacity: 0.45; pointer-events: none; transition: opacity 160ms; }

.card {
  position: relative;
  display: block;
  padding: 15px 18px 17px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background-color 130ms;
}
/* Une ligne mesurée n'a pas besoin de filet : sa barre de mesure sépare
   déjà, et deux traits valent double séparation. */
.card:has(.match) { border-bottom: 0; }
.card:hover { background-color: var(--panel); }
/* Le survol ne décore pas : il étale sur toute la ligne la portion de rampe
   que cette offre occupe réellement. Une offre à 91% se réchauffe jusqu'à
   l'orange, une à 12% reste dans le violet. Même échantillonnage que la barre. */
.card:has(.match):hover {
  background-image: linear-gradient(90deg,
    rgba(123, 63, 228, 0.16) 0%,
    rgba(232, 41, 155, 0.16) 52%,
    rgba(255, 138, 76, 0.16) 100%);
  background-size: calc(10000% / max(var(--score, 1), 1)) 100%;
  background-repeat: no-repeat;
}
.card:focus-visible { outline: 2px solid var(--tint-mid); outline-offset: -2px; }

/* Gouttière de valeur, ouverte seulement quand une mesure existe */
.card:has(.match) { padding-left: 92px; }

/* La barre de mesure : sa longueur ET sa couleur encodent la valeur,
   parce qu'elle échantillonne la rampe à sa propre position. Elle est
   posée en haut de la ligne, contre l'axe pour la première mesure et
   contre la mesure précédente ensuite — jamais confondue avec le filet
   de séparation, qui reste en bas. */
.card:has(.match)::before,
.card:has(.match)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  border-radius: 2px;
  pointer-events: none;
}
.card:has(.match)::after {
  right: 0;
  background: var(--ramp);
  opacity: 0.1;
}
.card:has(.match)::before {
  width: calc(var(--score, 0) * 1%);
  background: var(--ramp);
  background-size: calc(10000% / max(var(--score, 1), 1)) 100%;
  z-index: 1;
  /* L'animation porte sur une transformation, jamais sur la largeur :
     la barre est déjà à sa valeur juste sans elle. Une mesure ne doit
     pas dépendre d'une animation qui peut ne jamais démarrer (onglet
     ouvert en arrière-plan, moteur d'animation coupé). */
  transform-origin: left center;
  animation: sweep 720ms var(--ease-out) backwards;
}
@keyframes sweep { from { transform: scaleX(0); } }
.card:nth-child(1)::before  { animation-delay: 0ms; }
.card:nth-child(2)::before  { animation-delay: 40ms; }
.card:nth-child(3)::before  { animation-delay: 80ms; }
.card:nth-child(4)::before  { animation-delay: 120ms; }
.card:nth-child(5)::before  { animation-delay: 160ms; }
.card:nth-child(6)::before  { animation-delay: 200ms; }
.card:nth-child(7)::before  { animation-delay: 240ms; }
.card:nth-child(8)::before  { animation-delay: 280ms; }
.card:nth-child(n+9)::before { animation-delay: 320ms; }

/* La valeur mesurée */
.match {
  position: absolute;
  left: 18px;
  top: 14px;
  width: 58px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-size-adjust: none;
}
.match.low  { color: var(--tint-low); }
.match.mid  { color: var(--tint-mid); }
.match.high { color: var(--tint-high); }


.source-tag {
  display: inline-block;
  margin-right: 9px;
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.card:hover .source-tag { border-color: var(--line-3); color: var(--text); }

/* Le flanc droit de la ligne servait à rien sur toute sa hauteur. Les faits
   y sont maintenant empilés, alignés à droite, toujours à la même place. */
.card-facts {
  position: absolute;
  top: 15px;
  right: 18px;
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
  font-size: 12.5px;
  color: var(--text-3);
  pointer-events: none;
}
.fact-location {
  color: var(--text-2);
  font-weight: 600;
}
.card-facts .salary { font-size: 13.5px; }

.card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 3px;
  max-width: var(--measure);
}
.card:hover .card-title { color: var(--tint-high); }
.card-meta {
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 7px;
}
/* Un salaire est une donnée chiffrée au même titre qu'un score : il en prend
   le traitement typographique au lieu de se noyer dans la ligne grise. */
.salary {
  color: var(--text);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 600;
}
/* Recule volontairement : sans ça, promouvoir le salaire et la justification
   ne changerait rien, tout serait fort en même temps. */
.card-desc {
  font-size: 12.5px;
  color: var(--text-3);
  max-width: var(--measure);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La lecture, sur la même ligne que la mesure : valeur et tendance ensemble */
/* Le cœur de ce que vend l'app : pourquoi ce score. Filet gauche teinté de la
   bande où l'offre est tombée, pour la relier à sa propre mesure. */
.match-reason {
  margin-top: 10px;
  padding-left: 13px;
  border-left: 2px solid var(--line-2);
  font-size: 13.5px;
  font-style: italic;
  color: var(--text);
  max-width: var(--measure);
}
.card:has(.match.low)  .match-reason { border-left-color: var(--tint-low); }
.card:has(.match.mid)  .match-reason { border-left-color: var(--tint-mid); }
.card:has(.match.high) .match-reason { border-left-color: var(--tint-high); }

.card-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.letter-btn, .tailor-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.letter-btn:hover, .tailor-btn:hover { background: var(--panel-3); color: var(--text); border-color: var(--line-3); }
.letter-btn::before, .tailor-btn::before {
  content: "";
  width: 13px; height: 13px;
  flex: none;
  background: currentColor;
}
.letter-btn::before {
  -webkit-mask: var(--icon-mail) center / contain no-repeat;
  mask: var(--icon-mail) center / contain no-repeat;
}
.tailor-btn::before {
  -webkit-mask: var(--icon-target) center / contain no-repeat;
  mask: var(--icon-target) center / contain no-repeat;
}

.empty {
  padding: 40px 4px;
  color: var(--text-3);
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}
.empty p { margin: 0; max-width: var(--measure); }

/* ============================================================
   Fiche de l'échantillon
   ============================================================ */
.cv-card {
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.cv-card-inner {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  padding-top: 16px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
/* Le chevron natif est remplacé par une marque dessinée, du même trait
   que le reste du jeu d'icônes. */
.cv-card > summary { cursor: pointer; list-style: none; }
.cv-card > summary::-webkit-details-marker { display: none; }
.cv-card > summary::after {
  content: "";
  width: 13px; height: 13px;
  margin-left: auto;
  flex: none;
  background: var(--text-3);
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  transition: transform 160ms var(--ease-out);
}
.cv-card[open] > summary::after { transform: rotate(180deg); }
.cv-card > summary:hover { color: var(--text); }
.cv-card > summary:hover::after { background: var(--text-2); }
.cv-card > summary:focus-visible { outline: 2px solid var(--tint-mid); outline-offset: 3px; }
.cv-sheet-col { display: flex; flex-direction: column; gap: 9px; }
.edit-btn {
  appearance: none;
  width: 100%;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.edit-btn:hover { background: var(--panel-3); color: var(--text); border-color: var(--accent-soft); }

.cv-sheet {
  position: relative;
  height: 120px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 13px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.cv-sheet-corner {
  position: absolute;
  top: 0; right: 0;
  width: 15px; height: 15px;
  background: linear-gradient(225deg, var(--panel) 50%, var(--line-2) 50%);
}
.cv-sheet-line { height: 3px; border-radius: 2px; background: var(--line-2); }
/* Le trait d'accent que l'ancienne version avait en brique, repris dans la
   rampe : la vignette cesse d'être une pile de gris. */
.cv-sheet-line.w70 { background: var(--ramp); }
.cv-sheet-rule { height: 1px; background: var(--line); margin: 2px 0; }
.w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; }
.w70 { width: 70%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; }

.cv-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cv-card-title { font-size: 16px; font-weight: 620; }
.cv-card-file {
  font-family: var(--font-num);
  font-size: 11.5px;
  color: var(--text-3);
}
.cv-card-summary { margin: 0 0 11px; font-size: 13.5px; color: var(--text-2); max-width: var(--measure); }
.cv-card-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.chip {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--panel-3);
  border: 1px solid var(--accent-soft);
  color: var(--text);
}
.cv-card-xp h4 {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}
.xp-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 5px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.xp-row span { color: var(--text-3); font-family: var(--font-num); font-size: 11.5px; white-space: nowrap; }
.cv-card-warn {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--tint-low);
  max-width: var(--measure);
}

/* ============================================================
   Analyse en cours
   ============================================================ */
.progress {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.spinner {
  width: 16px; height: 16px;
  flex: none;
  margin-top: 2px;
  border-radius: 99px;
  background: conic-gradient(from 0deg, transparent 0deg, var(--stop-mid) 300deg, var(--stop-high) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);
  mask: radial-gradient(circle, transparent 5px, #000 6px);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.progress-title { font-size: 14px; font-weight: 600; }
.progress-steps { list-style: none; margin: 7px 0 0; padding: 0; }
.progress-steps li {
  font-size: 12.5px;
  color: var(--text-3);
  padding: 2px 0 2px 20px;
  position: relative;
}
.progress-steps li::before {
  content: "";
  position: absolute;
  left: 3px; top: 9px;
  width: 5px; height: 5px;
  border-radius: 99px;
  background: var(--line-2);
}
.progress-steps li.is-active { color: var(--text); }
.progress-steps li.is-active::before { background: var(--stop-mid); box-shadow: 0 0 0 3px rgba(232, 41, 155, 0.18); }
.progress-steps li.is-done { color: var(--text-3); }
.progress-steps li.is-done::before { background: var(--stop-high); }

/* ============================================================
   Profil éditable
   ============================================================ */
.profile-panel {
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.profile-intro { margin: 0 0 16px; font-size: 13px; color: var(--text-2); max-width: var(--measure); }
.profile-field { display: block; margin-bottom: 13px; }
.profile-field span {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.profile-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.save-status { font-size: 12.5px; color: var(--tint-high); }

/* ============================================================
   Méthode
   ============================================================ */
.howto {
  padding: 20px 22px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 28px;
}
.howto-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.howto-head h2 { margin: 0; font-size: 17px; font-weight: 620; }
.howto-lead { margin: 0 0 20px; font-size: 14px; color: var(--text-2); max-width: var(--measure); }
/* Quatre cartes, parce qu'un visiteur qui ne sait pas où il est tombé doit
   avoir envie d'y entrer. Les cellules à filet de 1px lisaient comme un
   tableau : on lit un tableau quand on cherche déjà quelque chose, pas quand
   on découvre. Les cartes sont numérotées parce que c'est une vraie séquence
   — charger, chercher, noter, repartir — et que l'ordre porte l'information.
   Le numéro reste neutre : une étape n'est pas une valeur mesurée, elle n'a
   donc pas droit à une position sur la rampe. */
.howto-steps {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 12px;
  counter-reset: etape;
}
.howto-steps li {
  counter-increment: etape;
  background: color-mix(in srgb, var(--etape-teinte) 7%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--etape-teinte) 22%, var(--line));
  border-radius: var(--radius);
  padding: 15px 17px 17px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color 140ms, transform 140ms var(--ease-out);
}
/* Les quatre cartes échantillonnent la rampe de gauche à droite, comme le
   survol d'une offre l'échantillonne à la position de son score. Ce n'est pas
   une teinte par carte : c'est l'axe, parcouru une fois, sur une séquence qui
   va effectivement du début à la fin. 7% suffisent — au-delà, la couleur
   cesse d'accompagner la lecture et se met à la commenter. */
.howto-steps li:nth-child(1) { --etape-teinte: var(--tint-low); }
.howto-steps li:nth-child(2) { --etape-teinte: color-mix(in srgb, var(--tint-low), var(--tint-mid)); }
.howto-steps li:nth-child(3) { --etape-teinte: var(--tint-mid); }
.howto-steps li:nth-child(4) { --etape-teinte: var(--tint-high); }
/* Repli si color-mix manque : la carte reste lisible, sans teinte. */
@supports not (background: color-mix(in srgb, red 7%, blue)) {
  .howto-steps li { background: var(--panel-2); border-color: var(--line); }
}
/* --text-2 et non --text-3 : la teinte de la carte coûte environ un demi-point
   de contraste, et --text-3 y tombait à 4,14:1. Même arbitrage que le bouton
   primaire désactivé, pour la même raison. */
.howto-steps li::before {
  content: counter(etape) " / 4";
  font-family: var(--font-num);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.howto-steps li:hover {
  border-color: color-mix(in srgb, var(--etape-teinte) 45%, var(--line));
  transform: translateY(-1px);
}
/* Le contenu est enveloppé dans un div : sans ça le gap de la carte ne
   s'applique qu'entre le numéro et le bloc, pas entre le titre et le texte. */
.howto-steps li > div { display: flex; flex-direction: column; gap: 6px; }
.howto-steps strong { display: block; font-size: 14px; font-weight: 620; line-height: 1.35; }
.howto-steps p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.58; }
@media (prefers-reduced-motion: reduce) {
  .howto-steps li { transition: border-color 140ms; }
  .howto-steps li:hover { transform: none; }
}
.howto-foot {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
  max-width: var(--measure);
}
.howto-foot strong { color: var(--text); }
code {
  font-family: var(--font-num);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  color: var(--tint-high);
}

/* ============================================================
   Modales
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 20px;
  overflow-y: auto;
  animation: fade 160ms var(--ease-out);
}
@keyframes fade { from { opacity: 0; } }
.modal-box {
  width: 100%;
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 20px 22px 22px;
  box-shadow: var(--shadow-lift);
  animation: rise 220ms var(--ease-out);
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.modal-wide { max-width: 960px; }
.modal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.modal-head strong { font-size: 16px; font-weight: 620; }
.modal-hint { margin: 0 0 12px; font-size: 12.5px; color: var(--text-3); max-width: var(--measure); }
.modal-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
#letterText { min-height: 300px; font-size: 13.5px; }

/* ---- Les trois passes de l'adaptation ---- */
.tailor-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 18px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tailor-steps li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.tailor-steps .dot {
  width: 7px; height: 7px;
  border-radius: 99px;
  background: var(--line-2);
  flex: none;
  transition: background-color 200ms, box-shadow 200ms;
}
.tailor-steps li.is-active { color: var(--text); }
.tailor-steps li.is-active .dot { background: var(--stop-mid); box-shadow: 0 0 0 4px rgba(232, 41, 155, 0.16); }
.tailor-steps li.is-done { color: var(--text-2); }
.tailor-steps li.is-done .dot { background: var(--stop-high); }

.tailor-error {
  margin: 0 0 14px;
  padding: 10px 13px;
  border: 1px solid rgba(232, 41, 155, 0.4);
  border-radius: var(--radius);
  background: rgba(232, 41, 155, 0.08);
  color: var(--tint-mid);
  font-size: 13px;
}
.tailor-block { margin-bottom: 24px; }
.tailor-block h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 620;
}
.tailor-block h4 {
  margin: 16px 0 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tailor-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.tailor-note { margin: 0 0 12px; font-size: 12.5px; color: var(--text-3); max-width: var(--measure); }
.tailor-list { list-style: none; margin: 0; padding: 0; }
.tailor-list li {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.tailor-list strong { display: block; font-weight: 620; margin-bottom: 2px; }
.tailor-list span { color: var(--text-3); font-size: 12.5px; }
.tailor-list.flags strong { color: var(--tint-mid); }

.tailor-diff { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.diff-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); }
.diff-col { background: var(--panel-2); padding: 12px 14px; }
.diff-col.after { background: var(--panel-3); }
.diff-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 7px;
}
.diff-col.after .diff-label { color: var(--tint-high); }
.diff-head { font-size: 12.5px; font-weight: 620; margin-bottom: 6px; }
.diff-col ul { margin: 0; padding-left: 17px; }
.diff-col li { font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; line-height: 1.5; }
.diff-col p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }

.ats-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.ats-score {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
}
.ats-score.low  { color: var(--tint-low); }
.ats-score.mid  { color: var(--tint-mid); }
.ats-score.high { color: var(--tint-high); }
.ats-verdict { font-size: 13px; color: var(--text-2); }

/* ============================================================
   Pied de page
   ============================================================ */
.privacy-note {
  margin: 36px 0 0;
  max-width: var(--measure);
  padding: 15px 18px 15px 44px;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-3);
}
.privacy-note::before {
  content: "";
  position: absolute;
  left: 18px; top: 17px;
  width: 14px; height: 14px;
  background: var(--text-3);
  -webkit-mask: var(--icon-lock) center / contain no-repeat;
  mask: var(--icon-lock) center / contain no-repeat;
}
.privacy-note strong { color: var(--text-2); }

.site-footer {
  margin-top: 22px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}

/* ============================================================
   Icônes — dessinées, un seul poids de trait (1.6 sur grille 24)
   ============================================================ */
:root {
  --icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
  --icon-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* ============================================================
   Adaptation
   ============================================================ */
@media (max-width: 880px) {
  .rig { grid-template-columns: minmax(0, 1fr); }
  .cv-card-inner { grid-template-columns: minmax(0, 1fr); }
  .cv-sheet { display: none; }
}

@media (max-width: 560px) {
  body { padding: 0 16px 48px; font-size: 14.5px; }
  .masthead { padding: 16px 0 14px; margin-bottom: 20px; }

  /* Sur un écran de poche, le banc doit tenir : on récupère chaque
     interligne inutile pour rapprocher l'axe de la ligne de flottaison. */
  .rig { margin-bottom: 18px; }
  .rig-block { padding: 12px 14px 13px; }
  .rig-label { margin-bottom: 8px; }
  .rig-body { gap: 8px; }
  .cv-card { margin-bottom: 16px; }
  /* L'indice redit ce que la fiche d'échantillon affiche déjà. */
  body:has(#cvCard:not(.hidden)) #cvHint { display: none; }
  .card { padding: 14px 0 16px; }
  .card:has(.match) { padding-left: 0; padding-top: 40px; }
  .match { left: 0; top: 12px; font-size: 19px; }
  .card-facts {
    position: static;
    width: auto;
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 8px;
  }
  .modal { padding: 0; }
  .modal-box { border-radius: 0; border-left: 0; border-right: 0; min-height: 100%; }
  .privacy-note { padding-left: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}