/* ══════════════════════════════════════════════════════════════════════
   Les jetons de Fronta — thème « Signature Precision ».

   Graphite froid et indigo doux : dense mais aéré, fait pour lire. Les
   annonces passent avant tout : un texte presque noir sur un fond presque
   blanc, une seule couleur d'accent, et Inter, dessinée pour l'écran.

   Comment on dessine ici :
     · des tuiles (surface) sur un fond gris très clair (bg), séparées par un
       trait fin (line) ; l'ombre, légère, ne sert qu'en mode clair ;
     · des rayons de 14 px pour les grandes surfaces, 8 et 6 px pour les
       petites, et la capsule pour les boutons ;
     · l'accent indigo est réservé à l'action principale et aux états actifs.

   Une couleur, une fonction, et une seule :
     · INDIGO       actions, liens, onglet actif (l'accent)
     · INDIGO PROFOND candidature directe — « Postuler » mène chez l'employeur
     · VERT         « Contacter l'entreprise », compatibilité, validation
     · AMBRE        point de vigilance, match tiède
     · ROUGE        match faible, actions négatives, accent suisse
     · GRAPHITE     titres, information principale, et l'aplat de
                    l'opportunité cachée (inversé)
     · GRIS         tout le reste

   Clair par défaut, pour tout le monde ; le sombre se choisit avec le bouton
   lune / soleil en haut de page (<html data-theme="dark">). Chaque
   aplat a sa couleur de texte (`--on-…`) : en sombre l'indigo est clair et
   le texte posé dessus est foncé — un blanc y plafonnerait à 2,9 : 1.
   Tous les contrastes de texte passent AA (4,5 : 1) dans les deux modes.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ── */
  --bg:            #F7F7F8;   /* le fond */
  --surface:       #FFFFFF;   /* les tuiles */
  --surface-2:     #F2F2F4;   /* zones en creux, champs */
  --surface-3:     #EEEEF1;   /* pastilles, surface relevée */

  /* ── Encres : quatre niveaux, un seul par rôle ── */
  --ink:           #16161A;   /* titres, information principale — 18 : 1 */
  --ink-2:         #3A3A42;   /* titres secondaires                — 11,3 : 1 */
  --ink-3:         #62626C;   /* texte secondaire                  —  6,0 : 1 */
  --ink-4:         #71717B;   /* métadonnées, sources              —  4,8 : 1 */

  /* ── Indigo : l'accent, les actions ── */
  --action:        #4F55C9;   /*  6,0 : 1 */
  --action-fort:   #3F44B0;
  --action-soft:   #EDEEFA;
  --on-action:     #FFFFFF;

  /* ── Indigo profond : la candidature directe ── */
  --direct:        #353A9E;   /*  9,3 : 1 */
  --direct-fort:   #292D82;
  --direct-soft:   #EDEEFA;
  --on-direct:     #FFFFFF;

  /* ── Vert : « Contacter l'entreprise » ── */
  --contact:       #1F7A50;   /*  5,3 : 1 */
  --contact-fort:  #186240;
  --contact-soft:  #E4F3EB;
  --on-contact:    #FFFFFF;

  /* ── Vert : la compatibilité, la validation ── */
  --green:         #26875A;   /* aplats */
  --green-fort:    #1F7049;   /*  6,1 : 1 — en texte */
  --green-soft:    #E4F3EB;
  --on-green:      #FFFFFF;
  /* Une coche verte posée sur l'aplat graphite de l'opportunité cachée. */
  --vert-sur-encre: #5BD39A;

  /* ── Alerte ── */
  --orange:        #D98A1A;   /* aplats seulement */
  --amber:         #A05F00;   /*  5,1 : 1 — en texte */
  --amber-soft:    #FBF1E3;

  --red:           #D9443C;   /* aplats seulement */
  --swiss:         #C4322B;   /*  5,5 : 1 — accent suisse, actions négatives */
  --swiss-soft:    #FBEAE9;
  --on-swiss:      #FFFFFF;

  /* Le texte posé sur un aplat graphite. */
  --on-ink:        #FFFFFF;

  /* ── L'ÉCHELLE DU MATCH ──
     Sept paliers, un basculement net à 65 % : rouge, orange, ambre, puis des
     verts de plus en plus soutenus. `--m` remplit, `--m-ink` écrit. */
  --m1: #D9443C;  --m1-ink: #B02A24;   /*  0 – 39 % */
  --m2: #E07234;  --m2-ink: #B5501C;   /* 40 – 54 % */
  --m3: #D98A1A;  --m3-ink: #A05F00;   /* 55 – 64 % */
  --m4: #4FA878;  --m4-ink: #26875A;   /* 65 – 74 % */
  --m5: #26875A;  --m5-ink: #1F7049;   /* 75 – 84 % */
  --m6: #1F7049;  --m6-ink: #1F7049;   /* 85 – 94 % */
  --m7: #175A3A;  --m7-ink: #175A3A;   /* 95 – 100 % */

  /* ── Traits : un pixel, presque transparent ── */
  --line:          rgba(22, 22, 26, .08);
  --line-strong:   rgba(22, 22, 26, .16);

  --r-lg: 14px;
  --r-md: 8px;
  --r-sm: 6px;

  /* ── Ombres : discrètes en clair, absentes en sombre (le trait suffit) ── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 16px -8px rgba(0, 0, 0, .08);
  --shadow-3: 0 14px 28px rgba(0, 0, 0, .14);
  --lueur-action: 0 1px 2px rgba(0, 0, 0, .08);
  --lueur-direct: 0 1px 2px rgba(0, 0, 0, .08);
  --lueur-contact: 0 1px 2px rgba(0, 0, 0, .08);

  /* L'anneau de focus : un espace couleur de fond, puis l'accent. */
  --anneau: 0 0 0 2px var(--bg), 0 0 0 4px var(--action);

  /* ── Typographie : Inter partout — demi-gras pour les titres, normal pour
     le texte. Les polices système prennent le relais au chargement. ── */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titre: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ── Mouvement : court, amorti ── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --ressort: cubic-bezier(.3, 1.25, .45, 1);

  --maxw: 760px;
}

:root[data-theme="dark"] {
  --bg:            #0E0E11;
  --surface:       #16161A;
  --surface-2:     #1B1B20;
  --surface-3:     #212127;

  --ink:           #EEEEF2;   /* 15,6 : 1 sur une tuile */
  --ink-2:         #C9C9D2;
  --ink-3:         #9696A2;   /*  6,2 : 1 */
  --ink-4:         #85858F;   /*  4,9 : 1 */

  --action:        #8B90F0;   /*  6,3 : 1 */
  --action-fort:   #A3A7F4;
  --action-soft:   rgba(139, 144, 240, .16);
  --on-action:     #0E0E11;   /*  6,7 : 1 sur l'indigo */

  --direct:        #B4B7F7;
  --direct-fort:   #C7C9F9;
  --direct-soft:   rgba(139, 144, 240, .14);
  --on-direct:     #0E0E11;

  --contact:       #5BD39A;
  --contact-fort:  #74DCAA;
  --contact-soft:  rgba(91, 211, 154, .14);
  --on-contact:    #0E0E11;

  --green:         #5BD39A;
  --green-fort:    #5BD39A;
  --green-soft:    rgba(91, 211, 154, .14);
  --on-green:      #0E0E11;
  --vert-sur-encre: #1F7049;

  --orange:        #F0B45A;
  --amber:         #F0B45A;
  --amber-soft:    rgba(240, 180, 90, .14);

  --red:           #F48A82;
  --swiss:         #F48A82;
  --swiss-soft:    rgba(244, 138, 130, .14);
  --on-swiss:      #0E0E11;

  --on-ink:        #0E0E11;

  --m1: #F48A82;  --m1-ink: #F48A82;
  --m2: #F29E6B;  --m2-ink: #F29E6B;
  --m3: #F0B45A;  --m3-ink: #F0B45A;
  --m4: #8FE3B9;  --m4-ink: #8FE3B9;
  --m5: #5BD39A;  --m5-ink: #5BD39A;
  --m6: #45C487;  --m6-ink: #45C487;
  --m7: #34B576;  --m7-ink: #34B576;

  --line:          rgba(238, 238, 242, .10);
  --line-strong:   rgba(238, 238, 242, .18);

  --shadow-1: 0 0 0 transparent;
  --shadow-2: 0 0 0 transparent;
  --shadow-3: 0 14px 28px rgba(0, 0, 0, .5);
  --lueur-action: 0 0 0 transparent;
  --lueur-direct: 0 0 0 transparent;
  --lueur-contact: 0 0 0 transparent;
}

/* Les champs natifs suivent le thème choisi. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI",
        system-ui, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ───────────────────────────── En-tête ───────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px max(20px, env(safe-area-inset-left)) 12px max(20px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.topbar.is-scrolled { border-bottom-color: var(--line); }

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
}
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--action);
  position: relative; flex: none;
}
.brand-mark::before, .brand-mark::after {
  content: ''; position: absolute; background: var(--surface); border-radius: 1px;
}
  .brand-mark::before, .brand-mark::after { background: var(--surface); }
.brand-mark::before { left: 9.5px; top: 5px; width: 3px; height: 12px; }
.brand-mark::after  { left: 5px; top: 9.5px; width: 12px; height: 3px; }
.brand-name { font-weight: 600; letter-spacing: -.02em; font-size: 16px; }

.tabs { display: flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: 980px; }
.tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 15px; border-radius: 980px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: all .25s var(--ease);
}
.tab.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ───────────────────────────── Structure ───────────────────────────── */

main { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 96px; }
.view { animation: rise .5s var(--ease) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ───────────────────────────── Hero ───────────────────────────── */

.hero { padding: 56px 0 40px; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--action);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, 8vw, 58px);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 650;
}
h1 .accent { color: var(--swiss); }

.lede {
  margin: 0; max-width: 34em;
  font-size: 19px; line-height: 1.5; color: var(--ink-2);
}
.lede em { font-style: normal; color: var(--ink); font-weight: 550; }

/* ───────────────────────────── Carte ───────────────────────────── */

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

.form { padding: 28px; display: grid; gap: 30px; }

.field { display: grid; gap: 7px; }
.field > label { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.hint { margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.45; }

input[type="text"], input[type="password"], input:not([type]), input[list] {
  width: 100%; padding: 13px 15px;
  background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--r-md);
  transition: all .2s var(--ease);
}
input:focus {
  outline: none; background: var(--surface);
  border-color: var(--action);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--action) 14%, transparent);
}

.field-note { margin: 0; font-size: 13.5px; min-height: 1.2em; }
.field-note.ok  { color: var(--green-fort); }
.field-note.warn { color: var(--amber); }
.field-note.bad { color: var(--swiss); }

/* Chips ------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips:empty { display: none; }
/* Un métier retenu : une puce pleine, avec sa coche. On doit VOIR qu'il
   est enregistré — la dernière arrivée « éclot » une fois, pour attirer
   l'œil là où la chose vient de se produire. */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 8px 7px 11px;
  background: var(--action); color: var(--on-action);
  border-radius: 980px; font-size: 14px; font-weight: 600;
  animation: pop .3s var(--spring) both;
}
.chip > svg { width: 14px; height: 14px; flex: none; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.chip--neuf { animation: pop .3s var(--spring) both, eclot 1.1s var(--ease) .15s; }
@keyframes eclot {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--action) 45%, transparent); }
  to   { box-shadow: 0 0 0 12px color-mix(in srgb, var(--action) 0%, transparent); }
}
.chip button {
  border: 0; background: color-mix(in srgb, var(--on-action) 22%, transparent); color: inherit;
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  padding: 0; transition: background .2s var(--ease);
}
.chip button:hover { background: color-mix(in srgb, var(--on-action) 40%, transparent); }

/* ── Les suggestions sous un champ ──
   Un panneau flottant — la seule surface de l'interface qui passe AU-DESSUS
   des autres. Il a donc droit à une ombre un peu plus marquée et à un filet :
   sans eux il se confondrait avec la carte du formulaire. */
.sug-champ { position: relative; }
.sug-liste {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  max-height: min(330px, 46vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(23, 8, 47, .12), 0 2px 6px rgba(23, 8, 47, .05);
  animation: sug-entree .14s var(--ease);
}
@keyframes sug-entree { from { opacity: 0; transform: translateY(-4px); } }
.sug-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 9px 12px; border-radius: 11px; cursor: pointer;
}
.sug-option[aria-selected="true"] { background: var(--action-soft); }
.sug-titre { min-width: 0; font-size: 14.5px; font-weight: 550; color: var(--ink); }
.sug-titre mark { background: none; color: var(--action); font-weight: 750; }
.sug-meta {
  flex: none; font-size: 12px; color: var(--ink-4); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sug-meta mark { background: none; color: var(--action); font-weight: 700; }
.sug-tag {
  flex: none; padding: 3px 9px; border-radius: 980px;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.sug-option[aria-selected="true"] .sug-tag { background: var(--surface); }
/* Une ligne « tout le domaine » : on voit d'un coup ce qu'elle contient. */
.sug-titre small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.sug-tag--domaine { background: var(--action-soft); color: var(--action); }

/* ── Domaines suggérés sous les métiers ──
   Des puces claires, qu'un appui transforme en métier du profil. On dit
   toujours POURQUOI : « d'après ton CV : officine, pharmacien ». */
.dom-sug { margin-top: 6px; }
.dom-sug-titre {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-4);
}
.dom-sug-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.dom-chip {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  padding: 7px 13px 7px 8px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px dashed color-mix(in srgb, var(--action) 45%, transparent);
  background: var(--surface); color: var(--ink);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.dom-chip:hover { background: var(--action-soft); border-style: solid; }
.dom-chip-plus {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--action-soft); color: var(--action); font-weight: 700; font-size: 15px; line-height: 1;
}
.dom-chip-txt { display: grid; min-width: 0; }
.dom-chip-txt b { font-size: 13.5px; font-weight: 650; }
.dom-chip-txt small { font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; }

/* Langues ----------------------------------------------------------- */

.langs { display: grid; gap: 8px; }
.lang-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--surface-2); border-radius: var(--r-md);
}
.lang-row span { font-size: 15px; font-weight: 500; }
.lang-row select {
  border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: var(--r-sm); padding: 7px 10px; font-size: 14px; cursor: pointer;
}

/* Réglages avancés --------------------------------------------------- */

.more { border-top: 1px solid var(--line); padding-top: 22px; }
.more summary {
  cursor: pointer; font-weight: 600; font-size: 15px;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.more summary::-webkit-details-marker { display: none; }
.chev {
  width: 7px; height: 7px; border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3); transform: rotate(45deg);
  transition: transform .3s var(--ease); margin-top: -3px;
}
.more[open] .chev { transform: rotate(-135deg); margin-top: 2px; }
.more-body { display: grid; gap: 24px; padding-top: 22px; }

.range-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.range-row output {
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px;
  min-width: 92px; text-align: right; color: var(--action);
}
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--surface-3);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: .5px solid var(--line-strong);
  box-shadow: var(--shadow-1); margin-top: -10px; cursor: grab;
  transition: transform .15s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }

.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle {
  border: 1px solid var(--line-strong); background: var(--surface);
  padding: 8px 14px; border-radius: 980px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: all .2s var(--ease);
}
.toggle:hover { border-color: var(--ink-3); }
.toggle.is-on {
  background: var(--action); border-color: var(--action); color: var(--on-action);
}

/* Boutons ------------------------------------------------------------ */

.btn-primary {
  width: 100%; border: 0; cursor: pointer;
  padding: 16px 24px; border-radius: 980px;
  background: var(--action); color: var(--on-action);
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .18s var(--spring), opacity .2s var(--ease);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.disclaimer { margin: -10px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }

/* ───────────────────────────── Résultats ───────────────────────────── */

.results-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 44px 0 24px;
}
h2 { margin: 0; font-size: 34px; letter-spacing: -.03em; font-weight: 650; }
.results-sub { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  width: 46px; height: 28px; border-radius: 980px; background: var(--surface-3);
  padding: 2px; transition: background .3s var(--ease); flex: none;
}
.switch-knob {
  display: block; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-1);
  transition: transform .3s var(--spring);
}
.switch input:checked + .switch-track { background: var(--green); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(18px); }
.switch-label { font-size: 14px; color: var(--ink-2); font-weight: 500; }

.list { display: grid; gap: 14px; }

/* ─────────────────────── Carte d'opportunité ─────────────────────── */

.job {
  position: relative;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 24px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
  animation: rise .45s var(--ease) both;
}
.job:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}
.job:active { transform: translateY(0) scale(.995); }

.job-top { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 16px; }

.score { flex: none; text-align: center; min-width: 62px; }
.score-value {
  font-size: 34px; font-weight: 650; letter-spacing: -.045em;
  line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--action);
}
.score--strong .score-value { color: var(--green-fort); }
.score-unit { font-size: 17px; font-weight: 550; }
.score-conf {
  margin-top: 5px; font-size: 11px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3);
}

.job-id { flex: 1; min-width: 0; }
.job-title {
  margin: 0 0 4px; font-size: 18px; font-weight: 600;
  letter-spacing: -.016em; line-height: 1.3;
}
.job-org { margin: 0; font-size: 14.5px; color: var(--ink-2); }

.facts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.fact {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 980px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 13px; font-weight: 500;
}
.fact.is-green { background: var(--green-soft); color: var(--green-fort); }
.fact.is-muted { color: var(--ink-3); }
.fact b { font-weight: 650; color: var(--ink); }

/* Barre de barème — l'élément signature.
   Chaque critère occupe une largeur proportionnelle à son poids ; la partie
   pleine correspond aux points obtenus ; un critère non évaluable est
   hachuré, jamais compté comme un échec. */
.gauge { display: flex; gap: 3px; height: 9px; margin-bottom: 14px; }
.gauge-seg {
  position: relative; border-radius: 980px; overflow: hidden;
  background: var(--surface-3);
}
.gauge-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 980px;
  background: var(--action);
  transform-origin: left;
  animation: grow .7s var(--ease) both;
}
.gauge-seg.is-full .gauge-fill { background: var(--green); }
.gauge-seg.is-unknown {
  background: repeating-linear-gradient(
    -45deg, var(--surface-3) 0 4px, transparent 4px 8px);
  box-shadow: inset 0 0 0 1px var(--line);
}
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }

.why { display: grid; gap: 6px; }
.why-line {
  display: grid; grid-template-columns: 17px 1fr; gap: 9px;
  align-items: start; font-size: 14.5px; line-height: 1.45;
}
.why-line .sym { font-weight: 700; text-align: center; line-height: 1.45; }
.why-line.ok  .sym { color: var(--green-fort); }
.why-line.bad .sym { color: var(--swiss); }
.why-line.unk .sym { color: var(--ink-3); }
.why-line.unk { color: var(--ink-3); }
.why-more {
  border: 0; background: none; cursor: pointer; padding: 2px 0;
  font-size: 13.5px; font-weight: 600; color: var(--action); text-align: left;
}

/* ───────────────────────────── Panneau ───────────────────────────── */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fade .3s var(--ease) both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed; z-index: 51; background: var(--surface);
  top: 0; right: 0; bottom: 0; width: min(520px, 100%);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: -20px 0 60px rgba(0,0,0,.14);
  animation: slide-in .38s var(--ease) both;
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }

@media (max-width: 640px) {
  .sheet {
    top: auto; width: 100%; max-height: 92vh;
    border-radius: 22px 22px 0 0;
    animation-name: slide-up;
  }
  @keyframes slide-up { from { transform: translateY(100%); } to { transform: none; } }
}

.sheet-close {
  position: sticky; top: 14px; left: 100%; z-index: 2;
  width: 32px; height: 32px; margin: 14px 14px 0 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  transition: background .2s var(--ease);
}
.sheet-close:hover { background: var(--surface-3); }
.sheet-body { padding: 4px 28px 44px; }
.sheet-body h3 { margin: 0 0 6px; font-size: 25px; letter-spacing: -.028em; line-height: 1.25; }
.sheet-body h4 {
  margin: 30px 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.sheet-org { margin: 0 0 18px; color: var(--ink-2); font-size: 15px; }
.sheet-desc {
  font-size: 15px; line-height: 1.62; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
}
.crit {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; align-items: baseline;
}
.crit:last-child { border-bottom: 0; }
.crit-pts { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-3); flex: none; }
.crit.ok  .crit-pts { color: var(--green-fort); }
.crit.bad .crit-pts { color: var(--swiss); }

.btn-apply {
  display: block; width: 100%; margin-top: 28px; padding: 15px;
  border-radius: 980px; background: var(--action); color: var(--on-action);
  text-align: center; text-decoration: none; font-weight: 600;
  transition: transform .18s var(--spring);
}
.btn-apply:hover { transform: translateY(-1px); }

.note {
  margin-top: 14px; padding: 13px 15px;
  background: var(--surface-2); border-radius: var(--r-md);
  font-size: 13px; color: var(--ink-3); line-height: 1.5;
}

/* ───────────────────────────── Divers ───────────────────────────── */

.empty { padding: 60px 20px; text-align: center; color: var(--ink-2); }
.empty h3 { margin: 0 0 8px; font-size: 20px; color: var(--ink); letter-spacing: -.02em; }

.loader {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fade .25s var(--ease) both;
}
.loader-inner { text-align: center; }
.loader-inner p { margin: 22px 0 0; font-size: 15.5px; color: var(--ink-2); font-weight: 500; }
.pulse {
  display: block; width: 46px; height: 46px; margin: 0 auto;
  border-radius: 14px; background: var(--action);
  animation: breathe 1.5s var(--ease) infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(.8) rotate(0deg); opacity: .55; border-radius: 14px; }
  50%      { transform: scale(1) rotate(45deg); opacity: 1; border-radius: 22px; }
}

/* ───────────────────────────── Badges ─────────────────────────────
   Quatre badges, identiques partout. Un point de couleur + un libellé en
   toutes lettres : la couleur seule ne suffit jamais à porter le sens. */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 980px;
  font-size: 12px; font-weight: 650; letter-spacing: -.005em; white-space: nowrap;
}
.badge i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.badge-direct    { background: var(--green-soft);  color: var(--green-fort); }
.badge-direct i  { background: var(--green); }
.badge-potentiel { background: var(--action-soft);   color: var(--action); }
.badge-potentiel i { background: var(--action); }
.badge-cible     { background: var(--direct-soft); color: var(--direct); }
.badge-cible i   { background: var(--direct); }
.badge-pro       { background: var(--action); color: var(--on-action); font-size: 11px; padding: 3px 9px; }

.offre-badge { margin-bottom: 6px; }
.muted { color: var(--ink-3); }
.why-line.warn .sym { color: var(--amber); }
.why-line.warn { color: var(--ink-2); }

/* ─────────────────────── Opportunités à cibler ─────────────────────── */

.cible-filtres {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  margin-bottom: 14px;
}
.cible-filtres select, .cible-filtres input {
  width: auto; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 980px; font-size: 14px;
}
.cible-filtres input { width: 130px; }

.cible { cursor: pointer; }
.cible-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cible-score { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.cible-score b { font-size: 20px; font-weight: 680; letter-spacing: -.03em; color: var(--direct); font-variant-numeric: tabular-nums; }

.cible-logo {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  object-fit: contain; background: var(--surface-2); border: 1px solid var(--line);
}
.cible-logo--vide {
  display: grid; place-items: center; font-size: 18px; font-weight: 700;
  color: var(--direct); background: var(--direct-soft); border-color: transparent;
}
.tag-agence {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 980px;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 11.5px; font-weight: 600; vertical-align: middle;
}
.cible-pq { margin: 2px 0 8px; font-size: 13px; font-weight: 650; color: var(--ink); }
.cible-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.cible-contact { display: inline-flex; align-items: center; gap: 8px; }
.cible-cta { font-weight: 650; color: var(--direct); }

/* ─────────────────────────── Page entreprise ─────────────────────────── */

.ent-retour {
  margin: 28px 0 18px; padding: 8px 14px; border-radius: 980px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 14px; font-weight: 550;
}
.ent-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ent-head h2 { font-size: 30px; }
.ent-logo {
  width: 64px; height: 64px; border-radius: 16px; flex: none;
  object-fit: contain; background: var(--surface); border: 1px solid var(--line);
}
.ent-logo--vide {
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
  color: var(--direct); background: var(--direct-soft); border-color: transparent;
}
.ent-lieu { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }

.ent-fiche {
  display: grid; gap: 0; margin: 0 0 18px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  overflow: hidden;
}
.ent-fiche > div {
  display: grid; grid-template-columns: 130px 1fr; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.ent-fiche > div:last-child { border-bottom: 0; }
.ent-fiche dt { color: var(--ink-3); font-weight: 550; }
.ent-fiche dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ent-fiche a { color: var(--action); font-weight: 550; }
.prov {
  display: inline-block; margin-left: 6px; font-size: 11.5px; color: var(--ink-3);
  font-style: italic;
}

.ent-contrib { margin-bottom: 18px; }
.ent-contrib summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--action); }
.ent-contrib-form { display: grid; gap: 8px; margin-top: 10px; }
.ent-contrib-form input { width: 100%; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.ent-contrib-form p { margin: 0; font-size: 12.5px; }

.ent-bloc {
  padding: 22px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.ent-bloc h3 { margin: 0 0 10px; font-size: 17px; letter-spacing: -.018em; }
.ent-bloc > p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.ent-bloc--cible { background: var(--direct-soft); border-color: transparent; }
.ent-score-ligne { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.ent-score {
  font-size: 44px; font-weight: 680; letter-spacing: -.05em; line-height: 1;
  color: var(--direct); font-variant-numeric: tabular-nums;
}
.ent-score small { font-size: 20px; font-weight: 600; }
.ent-score-ligne .muted { margin: 6px 0 0; font-size: 13px; }
.ent-pq { margin: 12px 0 6px; font-size: 13.5px; font-weight: 650; }
.pts { font-style: normal; font-size: 12px; color: var(--ink-3); margin-left: 4px; font-variant-numeric: tabular-nums; }
.ent-note { margin: 14px 0 0 !important; font-size: 12.5px !important; color: var(--ink-3) !important; }
.ent-compte {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px;
  margin-left: 6px; border-radius: 980px; background: var(--surface-2);
  font-size: 12.5px; font-weight: 700; vertical-align: middle;
}
.ent-offres { display: grid; gap: 8px; margin-top: 10px; }
.ent-offre {
  display: grid; gap: 4px; text-align: left; width: 100%; cursor: pointer;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
  transition: border-color .2s var(--ease);
}
.ent-offre:hover { border-color: var(--line-strong); }
.ent-offre-titre { font-size: 14.5px; font-weight: 600; }
.ent-offre-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }

@media (max-width: 560px) {
  .ent-fiche > div { grid-template-columns: 1fr; gap: 2px; }
  .ent-head h2 { font-size: 24px; }
}

/* ─────────────────────────── Contact recommandé ─────────────────────────── */

.contact-verrou {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  padding: 18px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--direct-soft), var(--surface-2));
}
.contact-verrou-icone {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--surface); font-size: 18px; box-shadow: var(--shadow-1);
}
.contact-verrou strong { font-size: 15.5px; }
.contact-verrou p { margin: 5px 0 12px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }

.contact-carte {
  padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 12px;
}
.contact-carte p { margin: 0 0 5px; font-size: 14.5px; }
.contact-libelle {
  font-size: 11.5px !important; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--direct);
}
.contact-nom { font-size: 16px !important; font-weight: 650; }
.contact-fonction { color: var(--ink-2); }
.contact-email a { color: var(--action); font-weight: 600; word-break: break-all; }
.contact-statut { font-size: 13px !important; color: var(--ink-3); margin-top: 8px !important; }
.contact-statut.is-ok { color: var(--green-fort); font-weight: 600; }
.contact-prov { margin: 10px 0 0; display: grid; gap: 3px; font-size: 12.5px; }
.contact-prov > div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.contact-prov dt { color: var(--ink-3); }
.contact-prov dd { margin: 0; color: var(--ink-2); }
.contact-mention { font-size: 12px !important; margin-top: 10px !important; }

/* ─────────────────────── Dossier de candidature spontanée ─────────────────────── */

.dossier-email { min-height: 170px; }
.dossier-cv { display: grid; gap: 8px; margin: 8px 0 4px; }
.dossier-cv-ligne {
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border-left: 3px solid var(--direct);
}
.dossier-cv-ligne p { margin: 0; font-size: 14px; line-height: 1.5; }
.dossier-appui { margin-top: 5px !important; font-size: 12.5px !important; color: var(--ink-3); font-style: italic; }
.dossier-appui.is-warn { color: var(--amber); }
.note-warn p { margin: 6px 0 0; font-size: 13.5px; }

/* ─────────────────────────────── Paywall ─────────────────────────────── */

.paywall-fond {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(10, 14, 28, .42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fade .25s var(--ease) both;
}
.paywall {
  position: fixed; z-index: 71; left: 50%; top: 50%;
  width: min(460px, calc(100% - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  transform: translate(-50%, -50%);
  padding: 30px 28px 24px; border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow-2);
  animation: paywall-in .35s var(--spring) both;
}
@keyframes paywall-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.paywall h2 { font-size: 23px; line-height: 1.2; margin-bottom: 8px; }
.paywall-sous { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.paywall-liste { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
.paywall-liste li {
  position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.45;
}
.paywall-liste li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  background: var(--direct-soft); color: var(--direct); font-size: 11px; font-weight: 800;
}
.paywall-mention { margin: 0 0 16px; font-size: 12.5px; color: var(--ink-3); }
.paywall .note code { font-size: 12px; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
.paywall-fermer { width: 100%; margin-top: 10px; }

/* ─────────────────────── Entreprises à démarcher ─────────────────────── */

.ent-cadrage {
  padding: 18px 22px; border-radius: var(--r-lg); margin-bottom: 18px;
  background: var(--surface-2); border-left: 3px solid var(--action);
}
.ent-cadrage strong { font-size: 15px; letter-spacing: -.015em; }
.ent-cadrage p { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ent-cadrage em { font-style: normal; font-weight: 600; color: var(--ink); }

.ent-filtres { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 18px; }

.ent { cursor: pointer; }
.ent-badge {
  flex: none; padding: 5px 12px; border-radius: 980px;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 12px; font-weight: 650; white-space: nowrap;
}
.ent-badge.is-dormant { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.ent-detail { font-style: normal; color: var(--ink-3); font-size: 13px; }

/* ─────────────────────────── Profil suisse ─────────────────────────── */

.ps-tete { display: flex; align-items: center; gap: 22px; padding: 26px; margin-bottom: 30px; flex-wrap: wrap; }
.ps-score {
  display: flex; align-items: baseline; gap: 2px; flex: none;
  padding: 16px 22px; border-radius: var(--r-lg); background: var(--surface-2);
}
.ps-score b { font-size: 44px; font-weight: 680; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.ps-score span { font-size: 16px; font-weight: 600; color: var(--ink-3); }
.ps-fort b   { color: var(--green-fort); }
.ps-moyen b  { color: var(--action); }
.ps-faible b { color: var(--amber); }

.ps-tete-txt { flex: 1; min-width: 200px; }
.ps-tete-txt h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.022em; }
.ps-tete-txt p { margin: 0; font-size: 14px; color: var(--ink-2); }
.ps-alerte { color: var(--swiss) !important; font-weight: 550; margin-top: 6px !important; }

.ps-h {
  margin: 34px 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.ps-h5 { margin: 24px 0 10px; font-size: 15px; letter-spacing: -.015em; }
.ps-intro { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 44em; }

/* D'où vient la note — répartition par bloc --------------------------- */

.ps-blocs { display: grid; gap: 16px; }
.ps-bloc-ligne {
  padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
}
.ps-bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.ps-bloc-tete strong { font-size: 15px; letter-spacing: -.015em; }
.ps-bloc-pts { font-size: 17px; font-weight: 680; color: var(--action); font-variant-numeric: tabular-nums; }
.ps-bloc-pts small { font-size: 12px; font-weight: 550; color: var(--ink-3); }
.ps-bloc-intro { margin: 9px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.ps-bloc-ligne .crit-bar i.is-full { background: var(--green); }

/* Cohérence métier — le critère le plus lourd ------------------------- */

.ps-coh { padding: 20px 22px; border-radius: var(--r-lg); }
.ps-coh.is-ok { background: var(--green-soft); }
.ps-coh.is-part { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.ps-coh.is-ko { background: color-mix(in srgb, var(--swiss) 11%, transparent); }
.ps-coh strong { font-size: 16.5px; letter-spacing: -.018em; }
.ps-coh p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ps-coh-mots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ps-coh-mots span {
  padding: 3px 11px; border-radius: 980px; font-size: 13px; font-weight: 550;
}
.ps-coh-mots span.ok { background: var(--green); color: var(--on-green); }
.ps-coh-mots span.ko { background: var(--swiss); color: var(--on-swiss); }

.ps-bloc-tag {
  display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 980px;
  background: var(--surface-2); font-size: 11.5px; font-weight: 600; color: var(--ink-3);
}

.ps-item.is-part { background: color-mix(in srgb, var(--amber) 9%, transparent); border-color: transparent; }
.ps-item.is-part .ps-puce { background: var(--amber); }
.ps-pts small { font-weight: 500; opacity: .7; }

/* Gains possibles ---------------------------------------------------- */

.ps-etapes { display: grid; gap: 10px; }
.ps-etape {
  display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start;
  padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface);
}
.ps-gain {
  display: grid; place-items: center; height: 34px; border-radius: 980px;
  background: var(--green-soft); color: var(--green-fort);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ps-etape strong { font-size: 15.5px; letter-spacing: -.012em; }
.ps-etape p { margin: 5px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ps-portee { display: inline-block; margin-top: 7px; font-size: 12.5px; color: var(--ink-3); font-style: italic; }

/* Codes du CV suisse -------------------------------------------------- */

.ps-liste { display: grid; gap: 8px; }
.ps-item {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: start;
  padding: 15px 18px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line);
}
.ps-item.is-ok { background: var(--green-soft); border-color: transparent; }
.ps-item.is-unknown { opacity: .75; }
.ps-puce {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-weight: 700; font-size: 13px; color: var(--on-ink); background: var(--ink-3);
}
.ps-item.is-ok .ps-puce { background: var(--green); }
.ps-item.is-ko .ps-puce { background: var(--swiss); }
.ps-item strong { font-size: 14.5px; }
.ps-item p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ps-preuve { color: var(--ink-3) !important; font-style: italic; }
.ps-pts { font-size: 12.5px; font-weight: 650; color: var(--ink-3); white-space: nowrap; }

/* Réglementation ------------------------------------------------------ */

.ps-regl { padding: 20px 22px; border-radius: var(--r-lg); }
.ps-regl.is-libre { background: var(--green-soft); }
.ps-regl.is-regl { background: color-mix(in srgb, var(--amber) 13%, transparent); }
.ps-regl strong { font-size: 16px; letter-spacing: -.015em; }
.ps-regl p { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ps-autorite { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ps-autorite b { font-size: 14px; }
.ps-autorite a { color: var(--action); }

/* Parcours ------------------------------------------------------------ */

.ps-exp { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.ps-exp-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ps-exp-chiffres > div { padding: 15px; border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.ps-exp-chiffres b {
  display: block; font-size: 30px; font-weight: 670; letter-spacing: -.04em;
  color: var(--action); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ps-exp-chiffres span { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }

.ps-bloc { display: grid; gap: 12px; }
.ps-xp { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); }
.ps-xp strong { display: block; font-size: 15px; }
.ps-xp > span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.ps-xp ul { margin: 9px 0 0; padding-left: 18px; }
.ps-xp li { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin-bottom: 3px; }

.ps-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ps-tags span {
  padding: 6px 13px; border-radius: 980px; background: var(--surface-2);
  font-size: 13.5px; color: var(--ink-2);
}
.ps-tags--action span {
  cursor: pointer; border: 1px dashed var(--line-strong); background: var(--surface);
  transition: all .2s var(--ease);
}
.ps-tags--action span:hover { border-color: var(--action); color: var(--ink); }
.ps-tags--action span.is-added {
  background: var(--green-soft); color: var(--green-fort);
  border-style: solid; border-color: transparent; cursor: default;
}

/* ─────────────────── Détail du score, critère par critère ───────────────────
   L'ancienne barre en cinq segments abstraits était illisible : rien ne disait
   ce que chaque bloc représentait. Chaque ligne porte désormais son nom. */

.crits { display: grid; gap: 7px; margin-bottom: 14px; }
.crit-row {
  display: grid; grid-template-columns: 74px 1fr auto;
  gap: 10px; align-items: center;
  font-size: 13px;
}
.crit-nom { color: var(--ink-2); font-weight: 500; }
.crit-bar {
  height: 7px; border-radius: 980px; background: var(--surface-3);
  overflow: hidden; position: relative;
}
.crit-bar i {
  display: block; height: 100%; border-radius: 980px; background: var(--action);
  animation: grow .7s var(--ease) both; transform-origin: left;
}
.crit-row.is-full .crit-bar i { background: var(--green); }
.crit-row.is-zero .crit-bar i { background: var(--swiss); width: 100% !important; opacity: .28; }
.crit-val {
  font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink);
  min-width: 46px; text-align: right;
}
.crit-val small { font-weight: 500; color: var(--ink-3); }
.crit-row.is-unknown .crit-nom,
.crit-row.is-unknown .crit-val { color: var(--ink-3); font-weight: 500; font-size: 12px; }
.crit-row.is-unknown .crit-bar {
  background: repeating-linear-gradient(-45deg, var(--surface-3) 0 4px, transparent 4px 8px);
}
.crit-reste { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }

.why-detail { margin-top: 14px; }

/* ─────────────────────────── Itinéraire ─────────────────────────── */

.trajet { margin-bottom: 6px; }
.trajet-chargement {
  display: flex; align-items: center; gap: 10px;
  padding: 18px; border-radius: var(--r-md); background: var(--surface-2);
  font-size: 14px; color: var(--ink-2);
}
.pulse-mini {
  width: 14px; height: 14px; border-radius: 4px; background: var(--action);
  animation: breathe 1.4s var(--ease) infinite; flex: none;
}
.trajet-vide {
  margin: 0; padding: 16px; border-radius: var(--r-md);
  background: var(--surface-2); font-size: 13.5px; color: var(--ink-3);
}

.trajet-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.tc { padding: 14px 12px; border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.tc b {
  display: block; font-size: 23px; font-weight: 660; letter-spacing: -.035em;
  color: var(--action); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tc b small { font-size: 12px; font-weight: 600; }
.tc span { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); line-height: 1.3; }

.passage {
  display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start;
  padding: 14px 16px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--amber) 11%, transparent);
  margin-bottom: 10px;
}
.passage--inconnu { grid-template-columns: 1fr; background: var(--surface-2); }
.passage strong { font-size: 14.5px; }
.passage p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.passage-pin {
  width: 22px; height: 22px; border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg); background: var(--amber); flex: none;
}

.carte {
  height: 260px; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
}
.carte .leaflet-container { font: inherit; background: var(--surface-2); }
.pin span {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--pin); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.trajet-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }

/* ─────────────────────── CV & coordonnées ─────────────────────── */

.tab-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  margin-left: 6px; padding: 0 5px; border-radius: 980px;
  background: var(--action); color: var(--on-action); font-size: 11px; font-weight: 700;
}

.cv-zone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cv-pick {
  border: 1px dashed var(--line-strong); background: var(--surface-2);
  padding: 12px 20px; border-radius: var(--r-md); cursor: pointer;
  font-size: 15px; font-weight: 550; transition: all .2s var(--ease);
}
.cv-pick:hover { border-color: var(--action); background: var(--surface); }
.cv-formats { font-size: 13px; color: var(--ink-3); }

.cv-state {
  display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: start;
  padding: 13px 15px; border-radius: var(--r-md); margin-top: 4px;
}
.cv-state.is-ok   { background: var(--green-soft); }
.cv-state.is-warn { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.cv-state p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.cv-icon {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: var(--on-green);
}
.cv-state.is-ok .cv-icon   { background: var(--green); }
.cv-state.is-warn .cv-icon { background: var(--amber); }

.cv-paste { margin-top: 10px; }
.cv-paste summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--action);
  list-style: none; display: flex; align-items: center; gap: 7px;
}
.cv-paste summary::-webkit-details-marker { display: none; }

textarea {
  width: 100%; margin-top: 10px; padding: 13px 15px;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: var(--r-md); resize: vertical; line-height: 1.55;
  font: inherit; font-size: 14.5px;
}
textarea:focus {
  outline: none; background: var(--surface); border-color: var(--action);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--action) 14%, transparent);
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }

.btn-ghost {
  border: 1px solid var(--line-strong); background: var(--surface);
  padding: 10px 16px; border-radius: 980px; cursor: pointer;
  font-size: 14px; font-weight: 550; color: var(--ink);
  text-decoration: none; display: inline-block;
  transition: all .2s var(--ease);
}
.btn-ghost:hover { border-color: var(--action); transform: translateY(-1px); }

/* ─────────────────────── Candidatures ─────────────────────── */

.pipeline {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 18px;
  scrollbar-width: none;
}
.pipeline::-webkit-scrollbar { display: none; }
.pipe {
  flex: none; min-width: 84px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); text-align: center;
}
.pipe.is-on { border-color: var(--action); }
.pipe-n {
  display: block; font-size: 22px; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.pipe.is-on .pipe-n { color: var(--action); }
.pipe-l { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }

.cand { cursor: pointer; }
.statut {
  flex: none; border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 980px; padding: 7px 12px; font-size: 13.5px; cursor: pointer;
  font-weight: 500;
}

/* ─────────────────────── Lettre ─────────────────────── */

.lettre-objet {
  margin: 0 0 10px; padding: 11px 14px; background: var(--surface-2);
  border-radius: var(--r-sm); font-size: 14.5px; font-weight: 600;
}
.lettre-corps { min-height: 280px; font-size: 14.5px; }
.lettre-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lettre-aide { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* Le PDF est l'action principale du bloc : il porte la couleur pleine. */
.btn-pdf {
  border: 0; cursor: pointer; padding: 11px 20px; border-radius: 980px;
  background: var(--action); color: var(--on-action);
  font-size: 14px; font-weight: 600;
  transition: transform .18s var(--spring), opacity .2s var(--ease);
}
.btn-pdf:hover { transform: translateY(-1px); }
.btn-pdf:disabled { opacity: .5; cursor: default; transform: none; }
.note-warn {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  color: var(--ink-2);
}
.note-warn strong { color: var(--ink); display: block; margin-bottom: 3px; }

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

/* ═══════════════════ Navigation à six onglets ═══════════════════ */

.tab { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.tab .ic { width: 17px; height: 17px; flex: none; }
/* Le bleu nuit est le code couleur des entreprises à cibler, partout dans l'app. */
.tab--cible.is-active { color: var(--direct); }

/* Une barre d'onglets iOS : du blanc translucide, un filet, rien d'autre.
   Pas de pastille sous l'onglet actif — la couleur suffit, et une pastille
   de plus alourdirait le seul élément qu'on voit en permanence. */
.bottombar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: none;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
}
.bottombar .tab {
  position: relative; flex: 1 1 0; min-width: 0;
  flex-direction: column; gap: 3px;
  padding: 7px 2px; border-radius: var(--r-sm);
  font-size: 10px; font-weight: 550; letter-spacing: -.01em;
  color: var(--ink-3);
  background: none; box-shadow: none;
}
.bottombar .tab > span:not(.tab-count) {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.bottombar .tab .ic { width: 22px; height: 22px; transition: transform .25s var(--spring); }
.bottombar .tab.is-active { color: var(--action); background: none; box-shadow: none; }
.bottombar .tab.is-active .ic { transform: translateY(-2px); }
.bottombar .tab--cible.is-active { color: var(--direct); }
.bottombar .tab-count { position: absolute; top: 3px; left: 54%; margin: 0; }

@media (max-width: 760px) {
  .tabs { display: none; }
  .bottombar:not([hidden]) { display: flex; }
  main { padding-bottom: 104px; }
}

/* ═══════════════════════ Tableau de bord ═══════════════════════ */

.dash-hero {
  --ton: var(--green);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 22px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.dash-hero.niveau-moyen  { --ton: var(--amber); }
.dash-hero.niveau-faible { --ton: var(--swiss); }

.dash-hero-main { flex: 1 1 210px; }
.dash-label { margin: 0; font-size: 13px; font-weight: 550; color: var(--ink-3); }
.dash-figure {
  margin: 2px 0 12px; font-size: 52px; line-height: 1;
  font-weight: 600; letter-spacing: -.03em; color: var(--ink);
}
.dash-unit { font-size: 20px; font-weight: 550; letter-spacing: -.01em; color: var(--ink-3); }

/* La piste reprend la teinte de la jauge : l'état se lit sur toute la barre. */
.meter {
  height: 8px; border-radius: 980px; overflow: hidden;
  background: color-mix(in srgb, var(--ton) 16%, var(--surface-2));
}
.meter-fill {
  display: block; height: 100%; border-radius: 980px;
  background: var(--ton); transition: width .8s var(--ease);
}

.dash-hero-side { display: grid; gap: 12px; justify-items: start; max-width: 320px; }
.dash-next { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.dash-next b { color: var(--ink); font-weight: 600; }
.gain {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: 980px; background: var(--green-soft); color: var(--green-fort);
  font-size: 12px; font-weight: 650;
}

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile {
  display: grid; gap: 3px; align-content: start; text-align: left;
  padding: 15px 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  animation: rise .45s var(--ease) both;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tile:nth-child(2) { animation-delay: .05s; }
.tile:nth-child(3) { animation-delay: .1s; }
.tile:nth-child(4) { animation-delay: .15s; }
.tile:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.tile-label { font-size: 12.5px; font-weight: 550; color: var(--ink-3); }
.tile-value { font-size: 30px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.tile-sub { font-size: 12px; line-height: 1.45; color: var(--ink-2); }

.dash-note { margin: 12px 2px 28px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

.dash-bloc { margin-bottom: 28px; }
.dash-bloc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.dash-bloc-head h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.lien {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--action);
}
.lien:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .dash-figure { font-size: 44px; }
  .dash-hero-side { max-width: none; }
}

/* ═════════════════════════ Carte générale ═════════════════════════ */

.carte-grande {
  height: min(62vh, 560px);
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
}
.carte-grande .leaflet-container { font: inherit; background: var(--surface-2); }

.legende { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-2); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.pt {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong);
}
.pt--home      { background: var(--swiss); }
.pt--direct    { background: var(--green); }
.pt--potentiel { background: var(--action); }
.pt--directe   { background: var(--direct); }

.carte-note { margin: 10px 2px 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════════
   REFONTE « FEED » — une offre, un écran.

   Ce bloc remplace la mise en page « liste d'annonces » par une scène :
   le rail à gauche sur grand écran, une barre en bas sur mobile, et au
   centre une carte unique qui occupe presque tout l'espace disponible.
   ══════════════════════════════════════════════════════════════════════ */

:root { --rail: 248px; }

/* ─────────────────────────── Rail (desktop) ─────────────────────────── */

.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--rail);
  display: flex; flex-direction: column; gap: 26px;
  padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.rail .brand { padding: 4px 10px 0; }

.rail .tabs {
  display: flex; flex-direction: column; gap: 3px;
  background: none; padding: 0; border-radius: 0;
}
.rail .tab {
  justify-content: flex-start; gap: 11px;
  width: 100%; padding: 11px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 550; color: var(--ink-2);
  white-space: normal; text-align: left;
}
.rail .tab .ic { width: 19px; height: 19px; }
.rail .tab:hover { background: var(--surface-2); color: var(--ink); }
.rail .tab.is-active {
  background: var(--action); color: var(--on-action); box-shadow: none;
}
.rail .tab--cible.is-active { background: var(--direct); color: var(--on-direct); }
.rail .tab.is-active .tab-count { background: color-mix(in srgb, var(--on-action) 22%, transparent); color: var(--on-action); }

.rail-pied { margin-top: auto; font-size: 12px; line-height: 1.5; color: var(--ink-3); padding: 0 10px; }

body { padding-left: var(--rail); }
main { max-width: 780px; margin: 0 auto; padding: 0 24px 64px; }

/* ──────────────────────────── Pour toi ──────────────────────────── */

.pt-tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 30px 0 16px;
}
.pt-tete h2 { margin: 0; font-size: 32px; font-weight: 720; letter-spacing: -.035em; color: var(--ink); }
.pt-sous { margin: 6px 0 0; color: var(--ink-3); font-size: 14.5px; }

.bande {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.bande-item {
  display: flex; align-items: baseline; gap: 6px;
  padding: 10px 14px; border-radius: 980px;
  background: var(--surface); border: 1px solid transparent;
  box-shadow: var(--shadow-1);
  font: inherit; color: var(--ink-2); cursor: default;
}
button.bande-item { cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease); }
button.bande-item:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.bande-val { font-size: 16px; font-weight: 650; color: var(--ink); letter-spacing: -.02em; }
.bande-val small { font-size: 11px; font-weight: 550; color: var(--ink-3); }
.bande-lib { font-size: 12.5px; }
.bande-item--directe .bande-val { color: var(--direct); }
.bande-item--neuf { background: var(--green-soft); border-color: transparent; }
.bande-item--neuf .bande-val { color: var(--green-fort); }

.sous-onglets { display: flex; gap: 4px; margin-bottom: 14px; }
.so {
  border: 1px solid var(--line); background: var(--surface);
  padding: 8px 15px; border-radius: 980px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--ink-2);
  transition: all .2s var(--ease);
}
.so:hover { border-color: var(--line-strong); color: var(--ink); }
.so.is-active { background: var(--action); border-color: var(--action); color: var(--on-action); }
.so--directe.is-active { background: var(--direct); border-color: var(--direct); }
.so-n { margin-left: 7px; opacity: .65; font-variant-numeric: tabular-nums; }

/* ───────────────────────────── La scène ───────────────────────────── */

.scene-enveloppe { position: relative; }
.scene {
  position: relative; overflow: hidden;
  height: clamp(440px, calc(100dvh - 310px), 700px);
}

.scene-nav {
  position: absolute; right: -58px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px;
}
.scene-fleche {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: all .2s var(--ease);
}
.scene-fleche svg { width: 19px; height: 19px; }
.scene-fleche:hover { border-color: var(--action); color: var(--ink); transform: scale(1.06); }
.scene-aide { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--ink-3); }
.scene-aide kbd {
  font: inherit; padding: 1px 5px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--line);
}

/* ═════════════════════════ La carte du feed ═════════════════════════

   Une carte = un écran. Sa couleur d'accent vient de sa NATURE (verte pour
   une offre publique, bleu nuit pour une opportunité à cibler) et irrigue
   tout : le liseré du haut, la barre de progression, le score, le CTA. Une
   seule couleur par carte, donc aucune confusion possible.

   La profondeur ne vient que d'une ombre très douce. Pas de cadre : sur un
   fond presque blanc, une bordure ET une ombre font deux fois le même
   travail, et c'est la bordure qui se voit.
   ═══════════════════════════════════════════════════════════════════════ */

.fc {
  --accent: var(--green);
  --accent-fort: var(--green-fort);

  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  will-change: transform, opacity;
}
.fc--directe { --accent: var(--direct); --accent-fort: var(--direct-fort); }

/* LA COULEUR DU MATCH.
   Elle n'appartient pas à la carte du fil : elle appartient au SCORE, où
   qu'il s'affiche — carte, aperçu de la suivante, écran de candidature. Le
   sélecteur est donc générique, et les trois endroits ne peuvent pas se
   contredire.

   `--m` remplit (la barre), `--m-ink` écrit (le chiffre) : même teinte,
   deux luminosités, parce qu'un orange à 2,1 : 1 fait une barre superbe et
   un chiffre illisible. */
[data-match="m1"] { --m: var(--m1); --m-ink: var(--m1-ink); }
[data-match="m2"] { --m: var(--m2); --m-ink: var(--m2-ink); }
[data-match="m3"] { --m: var(--m3); --m-ink: var(--m3-ink); }
[data-match="m4"] { --m: var(--m4); --m-ink: var(--m4-ink); }
[data-match="m5"] { --m: var(--m5); --m-ink: var(--m5-ink); }
[data-match="m6"] { --m: var(--m6); --m-ink: var(--m6-ink); }
[data-match="m7"] { --m: var(--m7); --m-ink: var(--m7-ink); }

.fc-corps {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 36px 24px 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.fc-corps::-webkit-scrollbar { width: 6px; }
.fc-corps::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* LA BARRE DE COMPATIBILITÉ.
   Cinq pixels collés au bord supérieur, arrondis à l'extrémité libre. Sa
   longueur EST le score, sa couleur celle du palier. Le rail derrière reste
   très pâle : ce qui doit se voir, c'est la portion remplie. */
.fc-match {
  position: absolute; inset: 0 0 auto; height: 5px;
  background: var(--surface-2); z-index: 2;
}
.fc-match span {
  display: block; height: 100%;
  background: var(--m, var(--accent));
  border-radius: 0 980px 980px 0;
  transition: width .5s var(--ease), background-color .3s var(--ease);
}

/* L'avancement dans le fil : c'est LUI, et il se fait discret. */
.fc-position {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 2; font-size: 11px; font-weight: 650; letter-spacing: .05em;
  color: var(--ink-4); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.fc-position i { font-style: normal; font-weight: 550; color: var(--ink-4); }

/* ── En-tête : le score, puis la nature de la carte ── */

.k-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

/* LE SCORE.
   Le chiffre est gros, le mot « match » minuscule : l'un est l'information,
   l'autre n'est qu'une étiquette. Le chiffre porte la couleur de son palier
   — c'est la seule couleur chiffrée de l'interface, et la signature de
   Fronta. */
.k-match { display: flex; align-items: baseline; gap: 9px; line-height: 1; }
.k-score {
  font-size: 42px; font-weight: 750; letter-spacing: -.045em;
  color: var(--m-ink, var(--accent));
  font-variant-numeric: tabular-nums;
}
.k-score i { font-style: normal; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.k-mot {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .13em; color: var(--m-ink, var(--accent));
}
/* Tous les critères n'ont pas pu être analysés. Le CHIFFRE garde sa couleur
   — elle dit la compatibilité, la masquer reviendrait à mentir dans l'autre
   sens — mais l'étiquette passe en gris, et la ligne dessous donne le
   compte exact. */
.k-match--partiel .k-mot { color: var(--ink-4); }

.k-criteres { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-4); }
.k-criteres.est-complet { color: var(--ink-3); }

.k-type {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 7px 12px; border-radius: 980px;
  background: var(--surface-2); border: 0;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap;
}
.k-point { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.k-point--verte { background: var(--green); }
.k-point--direct { background: var(--direct); }
/* La pastille bleu nuit ne dit qu'une chose : « Postuler » mène chez l'employeur. */
.k-type--directe { background: var(--direct-soft); border-color: transparent; color: var(--direct); font-weight: 600; }

/* ── Identité : l'avatar sert le métier, il ne le remplace pas ── */

.k-identite { display: flex; align-items: center; gap: 14px; margin-top: 20px; }

.k-avatar {
  width: 52px; height: 52px; flex: none;
  border-radius: 15px; display: grid; place-items: center; overflow: hidden;
  /* Aplat clair teinté par le nom, initiales en foncé : lisible, et il
     distingue les entreprises sans jamais imiter un vrai logo. */
  background: linear-gradient(145deg,
    hsl(var(--teinte, 220) 64% 94%) 0%,
    hsl(calc(var(--teinte, 220) + 26) 58% 89%) 100%);
  border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
}
.k-avatar span {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  color: hsl(var(--teinte, 220) 46% 32%);
}
.k-avatar--logo { background: #fff; }
.k-avatar--logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.k-avatar--vide { background: var(--surface-3); color: var(--ink-3); }
.k-avatar--vide svg { width: 24px; height: 24px; }

.k-identite-txt { min-width: 0; }
.k-titre {
  margin: 0; font-size: 22px; line-height: 1.22;
  font-weight: 680; letter-spacing: -.025em; color: var(--ink);
}
.k-org { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.k-org b { color: var(--ink-2); font-weight: 600; }
.k-anonyme { color: var(--ink-4); }
.k-via { color: var(--ink-4); }

/* Où mène « Postuler » : le nom que le candidat verra dans sa barre d'adresse. */
.k-direct {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--direct-soft); color: var(--ink-2);
  font-size: 13px; line-height: 1.45;
}
.k-direct svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--direct); }
.k-direct b { color: var(--direct); font-weight: 650; overflow-wrap: anywhere; }
.k-agence {
  font-size: 10.5px; font-weight: 650; padding: 2px 7px; border-radius: 980px;
  background: var(--surface-3); color: var(--ink-2); vertical-align: middle;
}

/* ── Les faits, en pastilles alignées ── */

.k-faits {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.k-faits li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 550; color: var(--ink);
}
.k-faits svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.k-faits em {
  font-style: normal; margin-left: 5px; font-size: 10.5px;
  font-weight: 600; color: var(--ink-3);
}

.k-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.k-tag {
  padding: 4px 10px; border-radius: 980px;
  background: var(--action-soft); color: var(--action);
  border: 1px solid color-mix(in srgb, var(--action) 18%, transparent);
  font-size: 11.5px; font-weight: 600;
}
.k-tag-note { font-size: 11px; color: var(--ink-3); }

.k-sep { border: 0; border-top: 1px solid var(--line); margin: 20px 0 0; }

/* ── Pourquoi ça correspond ── */

.k-pourquoi { margin-top: 22px; }
.k-pourquoi h3 {
  margin: 0 0 13px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-4);
}
.k-raisons { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.k-r {
  position: relative; padding-left: 27px;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}

/* Trois marques, trois sens, et aucun gros aplat vert : une pastille de
   17 px suffit à dire « ça colle ». La coche est dessinée en CSS — deux
   traits tournés — plutôt qu'en caractère ✓, dont le dessin change d'une
   police à l'autre et qui se retrouve sélectionné avec le texte. */
.k-r::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
}
.k-r.ok::before { background: var(--green-soft); }
.k-r.ok::after {
  content: ''; position: absolute; left: 5px; top: 7px;
  width: 7px; height: 3.5px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.k-r.warn::before { background: var(--amber-soft); }
.k-r.warn::after {
  content: '!'; position: absolute; left: 0; top: 2px; width: 18px;
  font-size: 11.5px; font-weight: 800; line-height: 18px; text-align: center;
  color: var(--amber);
}
/* Ce que l'annonce ne dit pas : un cercle vide, en gris. Ni un atout, ni un
   défaut — une absence, et elle se lit comme telle. */
.k-r.inconnu { color: var(--ink-3); }
.k-r.inconnu::before { background: none; border: 1.5px solid var(--line-strong); }
.k-mention { margin: 14px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-3); }
.k-mention b { color: var(--ink-2); }

/* ── Les actions, ancrées ── */

.k-actions {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  /* Même blanc que la carte : un pied grisé rajouterait un bloc là où un
     simple trait suffit à séparer. */
  background: var(--surface);
}
.k-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.k-act svg { width: 17px; height: 17px; flex: none; }
.k-act span { white-space: nowrap; }
.k-act:hover { transform: translateY(-1px); color: var(--ink); }
.k-act:active { transform: translateY(0) scale(.98); }

/* Passer : la plus discrète des trois. Pas de cadre, pas de couleur — on ne
   met pas en avant l'action qui fait disparaître une offre. */
.k-act--passer { flex: none; width: 48px; padding: 0; color: var(--ink-4); }
.k-act--passer span { display: none; }
.k-act--passer:hover { color: var(--swiss); background: var(--swiss-soft); }

.k-act--garder { flex: 1; background: var(--surface); border-color: var(--line); }
.k-act--garder:hover { border-color: var(--line-strong); }
.k-act--garder.est-sauve {
  background: var(--green-soft); border-color: transparent; color: var(--green-fort);
}
.k-act--garder.est-sauve svg { fill: currentColor; animation: battement .4s var(--spring); }
@keyframes battement { 0% { transform: scale(.5); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }

.k-act--voir {
  flex: 1.7; background: var(--action); border-color: var(--action);
  color: var(--on-action); font-weight: 650; box-shadow: var(--lueur-action);
}
.k-act--voir:hover { background: var(--action-fort); border-color: var(--action-fort); color: var(--on-action); }
.fc--directe .k-act--voir {
  background: var(--direct); border-color: var(--direct); box-shadow: var(--lueur-direct);
}
.fc--directe .k-act--voir:hover { background: var(--direct-fort); border-color: var(--direct-fort); }

/* ═════════════════════════ La liste du fil ═════════════════════════

   Des cartes blanches les unes sous les autres, comme sur Indeed : on
   compare en faisant défiler, et la barre de match, collée en haut de
   chaque carte, fait repérer les meilleures sans rien lire. La carte
   entière s'ouvre d'un appui ; ses trois boutons font ce qu'ils disent.
   ═══════════════════════════════════════════════════════════════════════ */

.fil-liste { padding-bottom: 8px; }
.lo-liste { display: grid; gap: 12px; }

/* Les filtres restent sous la main pendant qu'on fait défiler. */
.view--feed .sous-onglets {
  position: sticky; top: 0; z-index: 6;
  margin: 0 -4px; padding: 8px 4px 10px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

.lo {
  position: relative; overflow: hidden;
  display: grid; gap: 12px;
  padding: 22px 20px 14px;
  border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), height .26s var(--ease),
              opacity .22s var(--ease), padding .26s var(--ease), margin .26s var(--ease);
}
.lo:hover { box-shadow: var(--shadow-3); }
.lo:focus-visible { outline: 3px solid color-mix(in srgb, var(--action) 45%, transparent); outline-offset: 2px; }
.lo:active { transform: scale(.995); }
/* Masquée : elle se replie sur place, sans faire sauter la liste. */
.lo--sort { height: 0 !important; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -12px; }

.lo-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lo .k-score { font-size: 34px; }
.lo .k-score i { font-size: 17px; }

.lo-identite { display: flex; align-items: center; gap: 12px; }
.lo .k-avatar { width: 42px; height: 42px; border-radius: 12px; }
.lo .k-avatar span { font-size: 15px; }
.lo-identite-txt { min-width: 0; }
.lo-titre {
  margin: 0; font-size: 17px; font-weight: 700; line-height: 1.28;
  letter-spacing: -.015em; color: var(--ink);
}
.lo .k-org { margin-top: 3px; }
.lo-faits { margin-top: 0; }
.lo-raisons { gap: 7px; }
.lo-raisons .k-r { font-size: 13px; }

.lo-actions {
  display: flex; align-items: center; gap: 8px;
  margin: 2px -6px 0; padding-top: 12px; border-top: 1px solid var(--line);
}
.lo-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 14px; border-radius: 13px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.lo-act svg { width: 17px; height: 17px; flex: none; }
.lo-act span { white-space: nowrap; }
.lo-act--masquer { width: 42px; padding: 0; color: var(--ink-4); }
.lo-act--masquer:hover { color: var(--swiss); background: var(--swiss-soft); }
.lo-act--garder { border-color: var(--line); }
.lo-act--garder:hover { border-color: var(--line-strong); }
.lo-act--garder.est-sauve { background: var(--green-soft); border-color: transparent; color: var(--green-fort); }
.lo-act--garder.est-sauve svg { fill: currentColor; }
.lo-act--voir {
  margin-left: auto; background: var(--action); color: var(--on-action); font-weight: 650;
  box-shadow: var(--lueur-action);
}
.lo-act--voir:hover { background: var(--action-fort); }
.lo--directe .lo-act--voir { background: var(--direct); box-shadow: var(--lueur-direct); }

.lo-pied { display: grid; place-items: center; min-height: 56px; padding: 10px 0 4px; }
.lo-fin { margin: 0; font-size: 13px; color: var(--ink-3); text-align: center; }
.lo-fin-lien {
  margin-left: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 650; color: var(--action);
}
.lo-fin-lien:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .lo { padding: 20px 16px 12px; }
  .lo .k-score { font-size: 32px; }
  .lo-titre { font-size: 16px; }
  .lo-act--garder span { display: none; }
  .lo-act--garder { width: 42px; padding: 0; }
}

/* ── Aperçu de la carte suivante ── */

.apercu {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 10px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2); cursor: pointer;
  font: inherit; text-align: left;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.apercu:hover { border-color: var(--line-strong); background: var(--surface); }
.ap-lib {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3); flex: none;
}
.ap-titre {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-score { font-size: 12.5px; font-weight: 700; color: var(--m-ink, var(--green-fort)); flex: none; }

/* ── États vides ── */

.fc-vide {
  display: grid; place-items: center; height: 100%;
  text-align: center; padding: 30px; color: var(--ink-2);
}
.fc-vide h3 { margin: 0 0 8px; font-size: 19px; color: var(--ink); }

/* ── La piste ──
   Trois cartes empilees, deplacees ensemble. La scene rogne ce qui depasse,
   de sorte que la precedente et la suivante restent invisibles tant que le
   doigt ne les amene pas. */

.piste { position: absolute; inset: 0; will-change: transform; }
.fc-place { position: absolute; inset: 0; }
.fc-place--prec { transform: translateY(-100%); }
.fc-place--suiv { transform: translateY(100%); }
.fc-place:empty { display: none; }

/* La piste s'annonce d'un souffle a l'ouverture du fil.
   ATTENTION : cette animation ne doit JAMAIS toucher `transform`. Avec
   `fill-mode`, elle continuerait d'imposer sa valeur une fois terminee et
   ecraserait le transform inline que le doigt applique a la piste — le
   glissement serait mort, sans la moindre erreur pour le signaler.
   Opacite uniquement. */
.scene > .piste { animation: piste-arrive .26s var(--ease) both; }
@keyframes piste-arrive { from { opacity: 0; } }

/* ──────────────────────────── La fiche ──────────────────────────── */

.sheet-retour {
  position: sticky; top: 0; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px 0 0 14px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 980px;
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer;
}
.sheet-retour:hover { border-color: var(--action); color: var(--ink); }

.fi-tete { padding: 6px 0 18px; border-bottom: 1px solid var(--line); }
.fi-tete-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fi-score { font-size: 24px; font-weight: 650; letter-spacing: -.03em; color: var(--green-fort); }
.fi-score small { font-size: 12px; font-weight: 550; color: var(--ink-3); margin-left: 3px; }
.fi-titre { margin: 12px 0 0; font-size: 25px; line-height: 1.2; letter-spacing: -.03em; }
.fi-org { margin: 7px 0 0; font-size: 15px; color: var(--ink-2); }
.fi-org-vide { font-style: italic; color: var(--ink-3); }
.fi-org-via { font-size: 13px; color: var(--ink-3); }
.fi-faits { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.fi-fait {
  padding: 5px 11px; border-radius: 980px;
  background: var(--surface-2); font-size: 12.5px; color: var(--ink-2);
}
.fi-fait em { font-style: normal; color: var(--ink-3); font-size: 11px; }

.fi-bloc { padding: 24px 0; border-bottom: 1px solid var(--line); }
.fi-bloc h3 { margin: 0 0 13px; font-size: 17px; letter-spacing: -.02em; }
.fi-sous { margin: 18px 0 9px; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.fi-raisons { display: grid; gap: 7px; }
.fi-r { display: flex; gap: 9px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.fi-r span { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 700; margin-top: 2px; }
.fi-r.ok span { background: var(--green-soft); color: var(--green-fort); }
.fi-r.warn span { background: var(--amber-soft); color: var(--amber); }
.fi-inconnus { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

.fi-desc { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; }
.fi-note { margin: 10px 0 0; font-size: 12px; }
.fi-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fi-tag { padding: 5px 11px; border-radius: 980px; background: var(--action-soft); color: var(--action); font-size: 13px; font-weight: 550; }

.fi-bloc--postuler {
  background: linear-gradient(180deg, var(--action-soft), transparent 70%);
  border-radius: var(--r-lg);
  padding: 20px; margin: 24px 0; border-bottom: 0;
  border: 1px solid color-mix(in srgb, var(--action) 18%, var(--line));
}
.fi-postuler-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fi-postuler-tete h3 { margin: 0; }
.fi-postuler-tete h3::before { content: '✨ '; }
.fi-quota {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 980px; background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line);
}
.fi-postuler-intro { margin: 8px 0 12px; font-size: 14px; color: var(--ink-2); }
.fi-atouts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.fi-atouts li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.fi-atouts li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green-soft); color: var(--green-fort);
  font-size: 11px; font-weight: 700;
}

.fi-ent-nom { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.fi-dl { margin: 0; display: grid; gap: 7px; }
.fi-dl > div { display: flex; gap: 10px; font-size: 13.5px; }
.fi-dl dt { min-width: 118px; color: var(--ink-3); }
.fi-dl dd { margin: 0; color: var(--ink-2); }
.fi-autres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.fi-liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fi-apply { margin-top: 20px; }

/* Candidature directe : le bouton passe en tête de « Postuler », en bleu nuit —
   la couleur qui, partout dans l'app, veut dire « chez l'employeur ». */
.fi-direct { margin: 4px 0 18px; }
.fi-direct .fi-apply { margin-top: 0; }
.fi-apply--directe { background: var(--direct); box-shadow: var(--lueur-direct); }
.fi-apply--directe:hover { background: var(--direct-fort); }

/* Pastilles d'en-tête de la fiche. */
.fi-tete-haut { justify-content: flex-start; flex-wrap: wrap; }
.fi-tete-haut .fi-score { margin-left: auto; }
.fc-badge {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 980px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.fc-badge--direct { background: var(--green-soft); color: var(--green-fort); }
.fc-badge--potentiel { background: var(--action-soft); color: var(--action); }
.fc-badge--directe { background: var(--direct-soft); color: var(--direct); }

/* ──────────────────────────── Notification ──────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px); z-index: 90;
  padding: 11px 18px; border-radius: 980px;
  background: var(--action); color: var(--on-action);
  font-size: 13.5px; font-weight: 550;
  box-shadow: var(--shadow-2);
  opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--spring);
  pointer-events: none;
}
.toast.est-visible { opacity: 1; transform: translate(-50%, 0); }
.toast--erreur { background: var(--swiss); }

/* ──────────────────────────── La carte ──────────────────────────── */

.carte-panneau { margin-top: 4px; }

/* ──────────────────────────── Mobile ──────────────────────────── */

@media (max-width: 900px) {
  body { padding-left: 0; }
  .rail { display: none; }
  .bottombar:not([hidden]) { display: flex; }
  main { padding: 0 14px 96px; }

  .pt-tete { padding: 18px 0 12px; }
  .pt-tete h2 { font-size: 24px; }
  .pt-sous { font-size: 13.5px; }
  .scene-nav { display: none; }
  .scene-aide { display: none; }
  .scene { height: clamp(430px, calc(100dvh - 268px), 760px); }
  .bande { gap: 6px; }
  .bande-item { padding: 7px 11px; }
  .fc-corps { padding: 30px 18px 16px; }
  .k-titre { font-size: 19px; }
  .k-score { font-size: 38px; }
  .k-score i { font-size: 18px; }
  .k-avatar { width: 46px; height: 46px; border-radius: 13px; }
  .k-avatar span { font-size: 17px; }
  .k-identite { margin-top: 16px; gap: 12px; }
  .k-faits { margin-top: 14px; }
  .k-act { font-size: 12.5px; padding: 0 12px; }
  .k-actions { gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* Tres petits ecrans : seul le CTA garde son libelle. */
@media (max-width: 370px) {
  .k-act--garder span { display: none; }
  .k-act--garder { flex: none; width: 52px; padding: 0; }
  .k-faits li { padding: 6px 10px; font-size: 12px; }
}


/* ── Mobile : rendre l'ecran a la carte ──
   L'en-tete mangeait 268 px sur 812 (la carte tombait a 67 % de l'ecran).
   Le bandeau passe sur UNE ligne qui defile lateralement, le bouton carte
   rejoint le titre, et les marges se resserrent. */
@media (max-width: 900px) {
  .pt-tete { padding: 12px 0 8px; flex-wrap: nowrap; align-items: center; }
  .pt-tete h2 { font-size: 21px; }
  .pt-sous { font-size: 12.5px; margin-top: 2px; }
  .pt-tete .btn-ghost { flex: none; padding: 8px 13px; font-size: 12.5px; }

  .bande {
    flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 10px; padding: 0 14px 2px;
    scrollbar-width: none;
  }
  .bande::-webkit-scrollbar { display: none; }
  .bande-item { flex: none; padding: 6px 11px; }
  .bande-val { font-size: 15px; }

  .sous-onglets { margin-bottom: 10px; }
  .so { padding: 7px 13px; font-size: 13px; }

  .scene { height: clamp(430px, calc(100dvh - 206px), 780px); }
}

/* ── Mobile : le fil tient dans l'ecran, sans page qui defile ──
   J'avais fait passer le bandeau SOUS le fil pour gagner 44 px. Erreur : la
   page devenait plus haute que l'ecran (58 px de debordement mesures), donc
   elle defilait — et le navigateur prenait le geste tantot pour la page,
   tantot pour la carte. Une carte un peu plus petite mais un geste franc
   vaut mieux qu'une grande carte qu'on n'arrive pas a faire glisser.
   Le bandeau revient donc au-dessus, et rien ne depasse. */
@media (max-width: 900px) {
  .view--feed { display: flex; flex-direction: column; }
  .view--feed .pt-tete { order: 1; }
  .view--feed .bande { order: 2; }
  .view--feed .sous-onglets { order: 3; }
  /* La liste a remplacé la scène de swipe : sans ordre, elle passait
     au-dessus de l'en-tête sur téléphone. */
  .view--feed .scene-enveloppe,
  .view--feed .fil-liste { order: 4; }
  .view--feed .scene-aide { order: 5; }
  .view--feed .carte-panneau { order: 6; }

  /* Le geste appartient a l'application, pas au navigateur : sans cela il
     decide seul de faire defiler la page au milieu d'un swipe. */
  .scene { touch-action: none; }
  body { overscroll-behavior: none; }
  main { padding-bottom: 88px; }
}

/* ── Pied de sidebar : le plan ──
   Present sans etre insistant. Le bouton ouvre l'explication de l'offre : le
   paiement n'est pas branche, rien ici ne pretend vendre quoi que ce soit. */
.pro-bloc {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--direct) 26%, var(--line));
  background:
    radial-gradient(120% 90% at 0% 0%,
      color-mix(in srgb, var(--direct) 16%, transparent) 0%, transparent 70%),
    var(--surface);
}
.pro-titre {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13.5px; font-weight: 650; color: var(--ink);
}
.pro-titre svg { width: 16px; height: 16px; color: var(--direct); }
.pro-txt { margin: 7px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
.pro-btn {
  width: 100%; margin-top: 11px; min-height: 36px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--direct); color: var(--on-direct);
  font: inherit; font-size: 12.5px; font-weight: 650;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.pro-btn:hover { background: var(--direct-fort); transform: translateY(-1px); }
.pro-quota { margin: 9px 0 0; font-size: 10.5px; color: var(--ink-3); text-align: center; }
.pro-bloc.est-pro { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.pro-bloc.est-pro .pro-titre svg { color: var(--green-fort); }

/* ── Occuper la carte, sans la trouer ──
   Une carte courte laissait un grand vide entre les raisons et les boutons.
   Le separateur absorbe le mou (`margin-top: auto`) : les faits restent en
   haut, et les raisons viennent se placer juste au-dessus du CTA — la ou
   l'oeil passe avant d'agir. Une carte longue, elle, defile normalement. */
.k-flux { min-height: 100%; display: flex; flex-direction: column; }
.k-flux .k-sep { margin-top: auto; }
.k-flux .k-pourquoi { margin-top: 18px; }

/* Correction : concentrer le mou en un seul endroit creusait un trou de
   200 px au milieu de la carte. On le REPARTIT entre les sections — chacune
   respire un peu plus sur une carte courte, et rien ne se decolle. */
.k-flux .k-sep { margin-top: 0; }
.k-flux { justify-content: space-evenly; gap: 4px; }
.k-flux > * { flex: none; }

/* ── La jauge de bareme, en sourdine ──
   Quand tous les criteres sont satisfaits, cinq barres pleines faisaient un
   mur de vert qui concurrencait le score. Le vert reste (c'est le sens :
   « acquis »), mais desature et fin : la jauge informe, elle ne crie pas.
   Le rouge d'un critere manque, lui, garde toute sa force — c'est la seule
   chose qu'on veuille vraiment voir. */
.crit-bar { height: 5px; }
.crit-row.is-full .crit-bar i { background: color-mix(in srgb, var(--green) 58%, transparent); }
.crit-row.is-part .crit-bar i { background: var(--ink-3); }
.crit-row.is-zero .crit-bar i { background: var(--swiss); opacity: .55; }
.crit-val { font-weight: 600; color: var(--ink-2); font-size: 12.5px; }
.crit-nom { font-size: 12.5px; }

/* Mobile : quelques pixels repris a l'en-tete, rendus a la carte. */
@media (max-width: 900px) {
  .pt-tete { padding: 10px 0 6px; }
  .pt-sous { font-size: 12px; line-height: 1.4; }
  .sous-onglets { margin-bottom: 8px; }
  .apercu { padding: 8px 12px; margin-top: 8px; }
}

/* ── Profil suisse : le bleu reste aux actions ──
   Les barres partielles etaient bleues, or le bleu designe les CTA dans
   toute l'application. Elles passent en gris : le VERT devient alors le
   seul signal de la page — « ce bloc est acquis ». */
.ps-bloc-ligne .crit-bar i { background: var(--ink-3); }
.ps-bloc-ligne .crit-bar i.is-full { background: color-mix(in srgb, var(--green) 62%, transparent); }
.ps-bloc-pts { color: var(--ink); }

/* Position connue au seul niveau du canton : l'approximation doit se voir. */
.fi-approx {
  margin: 0 0 12px; padding: 10px 13px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
  background: var(--amber-soft); color: var(--ink-2);
  font-size: 12.5px; line-height: 1.5;
}
.k-faits em[title] { cursor: help; color: var(--amber); }

/* La methode de calcul, en toutes lettres et sans chiffres.
   Elle remplace la jauge de points : nommer les criteres aide a comprendre,
   afficher leur poids invite seulement a jouer avec le score. */
.fi-methode {
  margin: 16px 0 0; padding: 12px 14px;
  border-radius: 10px; background: var(--surface-2);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
.fi-methode b { color: var(--ink); font-weight: 600; }

/* ── CV adapte a l'offre ── */
.fi-cv {
  margin-top: 18px; padding: 16px;
  border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.fi-cv h4 { margin: 0 0 6px; font-size: 15px; }
.fi-cv h5 { margin: 14px 0 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.fi-cv-intro { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.fi-cv-titre { margin: 12px 0 4px; font-size: 15px; font-weight: 650; color: var(--ink); }
.fi-cv-accroche { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.fi-cv-liste { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.fi-cv-ok { margin: 0 0 10px; font-size: 12.5px; color: var(--green-fort); }
/* Les elements introuvables dans le CV d'origine passent AVANT tout le reste. */
.fi-cv-alertes {
  margin: 0 0 12px; padding: 11px 13px; border-radius: 10px;
  background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
}
.fi-cv-alertes strong { font-size: 13px; color: var(--amber); }
.fi-cv-alertes p { margin: 4px 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.fi-cv-alertes ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); }

/* ── Agences d'intérim ── */
.ag-villes {
  display: flex; gap: 6px; margin: 0 0 18px; padding-bottom: 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ag-villes::-webkit-scrollbar { display: none; }
.ag-villes .so { flex: none; white-space: nowrap; }

.ag-groupe + .ag-groupe { margin-top: 30px; }
.ag-ville { margin: 0 0 12px; font-size: 17px; font-weight: 680; letter-spacing: -.02em; color: var(--ink); }
.ag-ville small { margin-left: 6px; font-size: 12.5px; font-weight: 550; color: var(--ink-3); }

/* ── Ville → réseau → agence ──
   Une pile de cartes de même largeur, une par réseau. Plus de grille où une
   carte d'une ligne côtoyait un bloc de sept guichets : c'est ce mélange de
   gros et de petits blocs qui rendait la page illisible. */
.ag-pile { display: grid; gap: 12px; }

.ag {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-2);
}

/* L'en-tête de carte : le logo du réseau, et combien d'agences il compte ici. */
.ag-tete { display: flex; align-items: center; gap: 12px; padding: 16px 20px 14px; }
.ag-reseau { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.ag-compte { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-4); }

/* La marque du réseau : un monogramme sur un aplat dont la teinte vient du
   nom — même procédé que les avatars d'employeurs dans le fil. Remplacé par
   le vrai logo dès que le fichier de données en donne l'adresse. */
.ag-marque {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; border-radius: 14px;
  background: hsl(var(--teinte, 200) 44% 95%);
  color: hsl(var(--teinte, 200) 50% 30%);
  font-size: 13.5px; font-weight: 750; letter-spacing: .02em;
}
/* Un logotype (un mot) : une tuile blanche qui s'élargit à sa mesure.
   Un logo carré : il remplit la tuile, avec son propre fond. */
.ag-marque--logo {
  width: auto; min-width: 44px; padding: 0 11px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line);
}
.ag-marque--logo img { display: block; width: auto; height: 20px; max-width: 96px; object-fit: contain; }
.ag-marque--logo.is-carre { width: 44px; padding: 0; overflow: hidden; box-shadow: none; }
/* Un logo blanc : la tuile passe au bleu nuit plutôt que de le noyer. */
.ag-marque--logo.is-clair { background: var(--direct); box-shadow: none; }
.ag-marque--logo.is-carre img { width: 100%; height: 100%; max-width: none; object-fit: cover; }


/* Une agence = une ligne, et toutes les lignes ont la même construction :
   nom et adresse à gauche, numéro et liens à droite, le reste dessous. */
.ag-lignes { list-style: none; margin: 0; padding: 0; }
.ag-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px; row-gap: 12px; align-items: start;
  padding: 16px 20px; border-top: 1px solid var(--line);
}
.ag-ligne-tete { min-width: 0; }
.ag-nom {
  margin: 0; font-size: 15.5px; font-weight: 680; line-height: 1.3;
  letter-spacing: -.01em; color: var(--ink);
}
.ag-adresse { display: flex; gap: 7px; margin: 5px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.ag-adresse svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--ink-4); }
.ag-ligne-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ag-secteurs, .ag-domaines, .ag-dom-seul { grid-column: 1 / -1; }

/* Le numéro est l'action : sur téléphone, un appui lance l'appel. */
.ag-tel {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 980px;
  background: var(--action-soft); color: var(--action);
  font-size: 14.5px; font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ag-tel:hover { background: var(--action); color: var(--on-action); }
.ag-tel svg { width: 16px; height: 16px; }
.ag-sans-tel { margin: 0; font-size: 13px; color: var(--ink-3); }

.ag-liens { display: flex; gap: 14px; margin: 0; font-size: 12.5px; }
.ag-liens a { color: var(--action); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ag-liens a:hover { text-decoration: underline; }

.ag-secteurs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.ag-secteurs span { /* les spécialités relevées sur la page de l'agence */
  padding: 2px 8px; border-radius: 980px; background: var(--surface-2);
  font-size: 11.5px; color: var(--ink-2);
}

/* Pied de carte : d'où viennent les coordonnées, et quand. */
.ag-source {
  display: flex; align-items: center; gap: 6px; margin: 0;
  padding: 12px 20px 14px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-4);
}
.ag-source svg { width: 11px; height: 11px; flex: none; color: var(--green); }
.ag-source a { color: inherit; }

/* ── Guichets par domaine ──
   Repliés derrière un bouton : déplier est un geste volontaire, et la ligne
   garde la hauteur de ses voisines tant qu'on ne l'a pas fait. Dépliés, des
   tuiles grises et des pastilles blanches — ce qui se touche se voit, et
   aucune cible ne fait moins de 34 px de haut. */
.ag-domaines summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 7px 13px; border-radius: 980px; background: var(--surface-2);
  font-size: 12.5px; font-weight: 650; color: var(--action);
  transition: background .18s var(--ease);
}
.ag-domaines summary:hover { background: var(--action-soft); }
.ag-domaines summary::-webkit-details-marker { display: none; }
.ag-domaines summary::before {
  content: ''; width: 6px; height: 6px; flex: none;
  border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s var(--ease);
}
.ag-domaines[open] summary::before { transform: rotate(45deg); }
.ag-dom-grille {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px;
}
.ag-dom {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border-radius: 14px; background: var(--surface-2);
}
.ag-dom-nom { padding: 0 2px 2px; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.ag-dom-lien {
  display: flex; align-items: center; gap: 8px; min-height: 34px; min-width: 0;
  padding: 6px 11px; border-radius: 11px;
  background: var(--surface); box-shadow: var(--shadow-1);
  font-size: 13px; font-weight: 600; color: var(--action);
  text-decoration: none; font-variant-numeric: tabular-nums;
  transition: background .18s var(--ease);
}
.ag-dom-lien:hover { background: var(--action-soft); }
.ag-dom-lien svg { width: 15px; height: 15px; flex: none; }
.ag-dom-lien span { overflow-wrap: anywhere; }
.ag-dom-lien em {
  margin-left: auto; flex: none; padding: 1px 7px; border-radius: 980px;
  background: var(--surface-2); font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--ink-4);
}
.ag-dom-source {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3);
}
.ag-dom-source svg { width: 12px; height: 12px; flex: none; color: var(--green); }

/* Un guichet seul : directement dans la ligne, sans rien à déplier. */
.ag-dom-seul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ag-dom-seul-nom { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.ag-dom-seul .ag-dom-lien { background: var(--surface-2); box-shadow: none; }

.ag-pied { margin: 22px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); max-width: 70ch; }
.ag-pied a { color: var(--action); font-weight: 600; }


@media (max-width: 640px) {
  .ag-tete, .ag-ligne, .ag-source { padding-left: 16px; padding-right: 16px; }
  .ag-ligne { grid-template-columns: 1fr; }
  .ag-ligne-actions { align-items: stretch; }
  .ag-tel { justify-content: center; padding: 12px 14px; font-size: 15.5px; }
  .ag-liens { justify-content: center; }
}

/* ── Registre du commerce (Zefix) ── */
.k-rc { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--green-fort); }

.fi-rc {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
}
.fi-rc--ok { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 22%, transparent); }
.fi-rc--prudence { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.fi-rc-titre { margin: 0 0 8px; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.fi-rc--ok .fi-rc-titre { color: var(--green-fort); }
.fi-rc--prudence .fi-rc-titre { color: var(--amber); }
.fi-rc .fi-dl { margin: 0 0 8px; }
.fi-rc-note { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.fi-rc-liens { margin: 0 0 4px; font-size: 13px; }
.fi-rc-liens a { color: var(--action); font-weight: 600; }
.fi-rc-source { margin: 0; font-size: 11.5px; color: var(--ink-3); }

/* ══════════════════════ Écran de candidature ══════════════════════
   Ouvert au clic sur une offre. Fenêtre centrée sur grand écran, plein
   écran sur téléphone ; en-tête et barre d'actions restent visibles, seul
   le contenu défile. */

.sheet--candidature {
  inset: 0; margin: auto;
  width: min(700px, 94vw); height: min(90vh, 940px);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
  animation: ca-entree .28s var(--ease) both;
}
@keyframes ca-entree { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.sheet--candidature .sheet-retour { display: none; }
.sheet--candidature .sheet-body { padding: 0; min-height: 100%; display: flex; flex-direction: column; }

@media (max-width: 640px) {
  .sheet--candidature { width: 100%; height: 100%; max-height: none; border-radius: 0; animation-name: ca-monte; }
  @keyframes ca-monte { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

.ca-tete {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 18px 14px 24px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.ca-tete-txt { flex: 1; min-width: 0; }
.ca-sur { margin: 0 0 3px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-titre {
  margin: 0; font-size: 20px; font-weight: 680; line-height: 1.25; letter-spacing: -.02em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ca-fermer {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface-2); color: var(--ink-2); font-size: 22px; line-height: 1;
  display: grid; place-items: center; transition: background .2s var(--ease);
}
.ca-fermer:hover { background: var(--surface-3); color: var(--ink); }

.ca-corps { flex: 1; display: grid; gap: 14px; align-content: start; padding: 16px 24px 24px; }
@media (max-width: 640px) { .ca-corps { padding: 14px 16px 20px; } .ca-tete { padding: 14px 12px 12px 16px; } }

.ca-resume { display: grid; gap: 10px; padding-bottom: 2px; }
.ca-org { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.ca-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-badge--rc { background: var(--green-soft); color: var(--green-fort); }
.ca-resume .fi-faits { margin: 0; }

/* Un bloc = une carte blanche détachée par son ombre, comme partout dans l'app. */
.ca-bloc {
  scroll-margin-top: 96px;
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.ca-bloc-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ca-bloc-tete h3 { flex: 1; margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.ca-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2);
}
.ca-ico svg { width: 17px; height: 17px; }
.ca-score { font-weight: 650; color: var(--m-ink, var(--green-fort)); }
.ca-quota, .ca-etat {
  flex: none; padding: 3px 9px; border-radius: 980px;
  background: var(--surface-2); color: var(--ink-3); font-size: 11.5px; font-weight: 600;
}
.ca-etat.is-pret { background: var(--green-soft); color: var(--green-fort); }
.ca-intro { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ca-btn { margin-top: 4px; }

/* Analyse de match : teinte bleue, l'information d'abord. */
.ca-bloc--analyse { background: linear-gradient(180deg, var(--action-soft), var(--surface) 70%); border-color: color-mix(in srgb, var(--action) 18%, var(--line)); }
.ca-bloc--analyse .ca-ico { background: color-mix(in srgb, var(--action) 12%, transparent); color: var(--action); }
.ca-raisons { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.ca-raisons li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ca-raisons li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 8px; height: 8px; border-radius: 50%; }
.ca-raisons li.ok::before { background: var(--green); }
.ca-raisons li.warn::before { background: var(--amber); }

.ca-analyse { display: grid; gap: 10px; margin-top: 4px; }
.ca-analyse h4 { margin: 4px 0 6px; font-size: 13px; font-weight: 650; color: var(--ink); }
.ca-synthese { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; line-height: 1.55; color: var(--ink); }
.ca-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .ca-colonnes { grid-template-columns: 1fr; } }
.ca-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ca-points li { padding-left: 12px; border-left: 3px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.ca-points.ok li { border-color: var(--green-fort); }
.ca-points.warn li { border-color: var(--amber); }
.ca-points b { display: block; font-weight: 600; color: var(--ink); }
.ca-appui { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.ca-angle { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ca-avant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink-3); }
.ca-tag { padding: 3px 9px; border-radius: 980px; background: var(--action-soft); color: var(--action); font-weight: 600; }
.ca-retires { font-size: 12.5px; color: var(--amber); }
.ca-retires summary { cursor: pointer; font-weight: 600; }
.ca-retires ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); }
.ca-refaire { justify-self: start; }
.ca-mini { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.ca-mini summary { cursor: pointer; font-weight: 600; color: var(--ink-3); }
.ca-mini[open] summary { margin-bottom: 8px; }

/* Postuler en 1 clic : le bloc d'action, bordé de bleu. */
.ca-bloc--postuler { border: 1.5px solid color-mix(in srgb, var(--action) 45%, var(--line)); }
.ca-bloc--postuler .ca-ico { background: var(--action); color: var(--on-action); }
.ca-etapes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.ca-etapes li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ca-etapes li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); box-sizing: border-box;
}
.ca-etapes li.ok { color: var(--ink); }
.ca-etapes li.ok::before { content: "✓"; border: 0; background: var(--green); color: var(--on-green); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.ca-etapes a, .ca-etapes .lien { color: var(--action); font-weight: 600; }
.ca-envoyee { margin-top: 10px; }
.ca-bloc--postuler .fi-apply { margin-top: 0; }

.ca-bloc--contact .ca-ico { background: var(--amber-soft); color: var(--amber); }

/* Les blocs internes (CV, lettre) n'ont plus à se dessiner une boîte : la section la porte. */
.ca-bloc .fi-cv { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ca-bloc .btn-apply { margin-top: 8px; }

/* L'annonce, l'entreprise, le trajet : repliés, on les ouvre quand on hésite. */
.ca-detail {
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  padding: 0 18px;
}
.ca-detail > summary {
  cursor: pointer; list-style: none; padding: 14px 0;
  font-size: 15px; font-weight: 650; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.ca-detail > summary::-webkit-details-marker { display: none; }
.ca-detail > summary::after { content: "+"; margin-left: auto; font-size: 20px; font-weight: 400; color: var(--ink-3); }
.ca-detail[open] > summary::after { content: "−"; }
.ca-detail[open] { padding-bottom: 16px; }
.ca-detail-note { font-size: 13px; font-weight: 500; color: var(--ink-3); }

/* La barre d'actions : deux raccourcis vers les documents, un lien pour postuler. */
.ca-pied {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
}
.ca-pied-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--action);
}
.ca-pied-btn:hover { border-color: var(--action); }
.ca-pied-btn svg { width: 16px; height: 16px; }
.ca-principal {
  margin-left: auto; padding: 11px 18px; border-radius: 12px;
  background: var(--action); color: var(--on-action); text-decoration: none;
  font-size: 14px; font-weight: 650; white-space: nowrap;
  box-shadow: var(--lueur-action);
}
.ca-principal:hover { background: var(--action-fort); }
.ca-principal--directe { background: var(--direct); box-shadow: var(--lueur-direct); }
.ca-principal--directe:hover { background: var(--direct-fort); }
@media (max-width: 640px) {
  .ca-pied { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 6px; }
  .ca-pied-btn { padding: 10px; }
  .ca-pied-btn span { display: none; }
  .ca-principal { flex: 1; text-align: center; padding: 12px 10px; }
}

/* Dans une section de l'écran de candidature, un paragraphe se lit comme un paragraphe. */
.ca-bloc .sheet-desc { white-space: normal; font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; }

/* ══════════════════════ Profil suisse, en trois onglets ══════════════════════
   À faire / Mon CV en détail / Usages suisses : ce qui te concerne d'abord,
   le diagnostic ensuite, les règles générales à part. */

.ps2-tete {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 20px; margin-bottom: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.ps2-tete-txt h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.ps2-tete-txt p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* L'anneau : la note se lit d'un coup d'œil, sans barème. */
.ps2-anneau {
  --c: var(--green);
  position: relative; flex: none; width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center; align-content: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0);
}
.ps2-anneau::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.ps2-anneau b, .ps2-anneau span { position: relative; line-height: 1; }
.ps2-anneau b { font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.ps2-anneau span { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.ps2-anneau--moyen { --c: var(--amber); }
.ps2-anneau--faible { --c: var(--swiss); }

.ps2-onglets { display: flex; gap: 6px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; }
.ps2-onglets::-webkit-scrollbar { display: none; }
.ps2-onglets .so { flex: none; white-space: nowrap; }

.ps2-h { margin: 22px 0 4px; font-size: 16px; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.ps2-h:first-child { margin-top: 0; }
.ps2-sous { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-3); }

/* À faire : des actions numérotées, la plus utile d'abord. */
.ps2-prios { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ps2-prio {
  display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.ps2-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--action); color: var(--on-action);
  font-size: 13.5px; font-weight: 700;
}
.ps2-prio-txt { min-width: 0; }
.ps2-prio-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ps2-prio-tete strong { font-size: 15px; font-weight: 650; color: var(--ink); }
.ps2-prio-txt p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ps2-impact { padding: 2px 8px; border-radius: 980px; font-size: 11.5px; font-weight: 650; }
.ps2-impact--fort { background: var(--action); color: var(--on-action); }
.ps2-impact--moyen { background: var(--action-soft); color: var(--action); }
.ps2-impact--leger { background: var(--surface-2); color: var(--ink-3); }
.ps2-portee {
  display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 980px;
  background: var(--surface-2); font-size: 11.5px; color: var(--ink-3);
}
.ps2-mots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
.ps2-mots span { padding: 2px 8px; border-radius: 980px; font-weight: 600; }
.ps2-mots .ok { background: var(--green-soft); color: var(--green-fort); }
.ps2-mots .ko { background: var(--swiss-soft); color: var(--swiss); }

.ps2-carte {
  padding: 16px 18px; margin-bottom: 12px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
}
.ps2-carte strong { font-size: 15px; color: var(--ink); }
.ps2-carte p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ps2-carte .btn-apply { margin-top: 12px; }
.ps2-carte--cle { border-color: color-mix(in srgb, var(--action) 40%, var(--line)); background: var(--action-soft); }
.ps2-carte--alerte { border-color: color-mix(in srgb, var(--amber) 30%, transparent); background: var(--amber-soft); }
.ps2-carte--alerte strong { color: var(--amber); }
.ps2-carte--ok { background: var(--green-soft); border-color: transparent; }
.ps2-carte--ok strong { color: var(--green-fort); }

.ps2-ensuite { margin-top: 12px; }
.ps2-ensuite summary { cursor: pointer; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ps2-ensuite .ps2-num { background: var(--surface-3); color: var(--ink-2); }
.ps2-renvoi { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* Mon CV en détail : un thème par carte, une puce par critère, jamais de points. */
.ps2-bloc {
  padding: 16px 18px; margin-bottom: 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.ps2-bloc > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ps2-bloc h4 { margin: 0; font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.ps2-compte { flex: none; padding: 2px 9px; border-radius: 980px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ps2-compte.is-ok { background: var(--green-soft); color: var(--green-fort); }
.ps2-compte.is-part { background: var(--amber-soft); color: var(--amber); }
.ps2-compte.is-ko { background: var(--swiss-soft); color: var(--swiss); }
.ps2-barre { display: block; height: 5px; margin: 10px 0 8px; border-radius: 980px; background: var(--surface-3); overflow: hidden; }
.ps2-barre i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.ps2-bloc-intro { margin: 6px 0 10px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.ps2-criteres { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ps2-crit { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ps2-crit strong { color: var(--ink); font-weight: 600; }
.ps2-crit p { margin: 3px 0 0; }
.ps2-puce {
  flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.ps2-crit.is-ok .ps2-puce { background: var(--green); color: var(--on-green); }
.ps2-crit.is-part .ps2-puce { background: var(--amber-soft); color: var(--amber); }
.ps2-crit.is-ko .ps2-puce { background: var(--surface-3); color: var(--ink-3); }
.ps2-preuve { font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.ps2-note { margin: 4px 0 12px; font-size: 12.5px; color: var(--ink-3); }

/* Usages suisses : des repères généraux, signalés comme tels. */
.ps2-avertissement {
  margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--action-soft); font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
.ps2-avertissement b { color: var(--ink); }
.ps2-usages { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.ps2-usage { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.ps2-usage-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ps2-usage-tete strong { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.ps2-usage p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ps2-statut { padding: 2px 9px; border-radius: 980px; font-size: 11.5px; font-weight: 650; }
.ps2-statut.is-ok { background: var(--green-soft); color: var(--green-fort); }
.ps2-statut.is-ko { background: var(--amber-soft); color: var(--amber); }
.ps2-statut.is-indecidable { background: var(--surface-2); color: var(--ink-3); }

@media (max-width: 640px) {
  .ps2-tete { padding: 14px 16px; gap: 14px; }
  .ps2-anneau { width: 66px; height: 66px; }
  .ps2-anneau b { font-size: 21px; }
  .ps2-prio { padding: 14px; gap: 12px; }
}

/* ── Écran de candidature, v2 : boutons compacts, chargement visible, kit, documents ── */

/* Des boutons à la taille d'une action, pas d'une bannière. */
.sheet--candidature .ca-bloc .btn-apply,
.sheet--candidature .ca-bloc .btn-ghost,
.sheet--candidature .ca-doc .btn-apply,
.sheet--candidature .ca-doc .btn-ghost,
.sheet--candidature .ca-doc .btn-pdf,
.sheet--candidature .fi-apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: auto; margin-top: 6px; padding: 9px 16px;
  font-size: 14px; font-weight: 600; line-height: 1.3; border-radius: 10px; box-shadow: none;
}

/* Le chargement : il se voit, et il dit ce qui se passe. */
.ca-charge {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px;
  margin-top: 6px; padding: 12px 14px; border-radius: 12px;
  background: var(--action-soft); color: var(--action);
}
.ca-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--action) 22%, transparent); border-top-color: var(--action);
  animation: ca-tourne .8s linear infinite;
}
@keyframes ca-tourne { to { transform: rotate(360deg); } }
.ca-charge-txt { font-size: 14px; font-weight: 600; }
.ca-charge-barre {
  grid-column: 1 / -1; height: 4px; border-radius: 980px; overflow: hidden;
  background: color-mix(in srgb, var(--action) 14%, transparent);
}
.ca-charge-barre i {
  display: block; width: 35%; height: 100%; border-radius: inherit; background: var(--action);
  animation: ca-glisse 1.2s ease-in-out infinite;
}
@keyframes ca-glisse { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .ca-spin, .ca-charge-barre i { animation-duration: 2.4s; } }

/* Avant préparation : ce que contient le kit. */
.ca-contenu-kit { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.ca-contenu-kit li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ca-contenu-kit li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: var(--action); font-weight: 700; }
.ca-contenu-kit b { color: var(--ink); font-weight: 600; }
.ca-rassure { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* Après : quatre étapes numérotées jusqu'à l'envoi. */
.ca-pret { margin: 0 0 14px; font-size: 14px; font-weight: 650; color: var(--green-fort); }
.ca-kit { list-style: none; counter-reset: kit; margin: 0; padding: 0; display: grid; gap: 16px; }
.ca-kit > li { counter-increment: kit; position: relative; padding-left: 38px; }
.ca-kit > li::before {
  content: counter(kit); position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--action-soft); color: var(--action); font-size: 13px; font-weight: 700;
}
.ca-kit > li > strong { display: block; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.ca-kit-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ca-act {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-decoration: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--action);
}
.ca-act:hover { border-color: var(--action); }
.ca-act--plein { background: var(--action); border-color: var(--action); color: var(--on-action); }
.ca-act--plein:hover { background: var(--action-fort); border-color: var(--action-fort); }
.ca-act--directe { background: var(--direct); border-color: var(--direct); color: var(--on-direct); }
.ca-act--directe:hover { background: var(--direct-fort); border-color: var(--direct-fort); }
.ca-act--petit { padding: 5px 10px; font-size: 12.5px; flex: none; }
.ca-kit-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.ca-kit-detail { margin-top: 8px; }
.ca-kit-detail > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ca-kit-detail[open] > summary { margin-bottom: 8px; }
.ca-kit-objet { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ca-kit-texte {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); resize: vertical;
  font: inherit; font-size: 13px; line-height: 1.5; color: var(--ink);
}
.ca-reponse { padding: 10px 0; border-top: 1px solid var(--line); }
.ca-reponse:first-of-type { border-top: 0; padding-top: 0; }
.ca-reponse-q { margin: 0 0 6px; font-size: 13px; font-weight: 650; color: var(--ink); }
.ca-reponse-ligne { display: flex; gap: 8px; align-items: flex-start; }
.ca-reponse-ligne .ca-kit-texte { flex: 1; }
.ca-a-completer { margin: 0; padding: 8px 10px; border-radius: 9px; background: var(--amber-soft); font-size: 13px; color: var(--amber); }
.ca-reponse-note { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }

/* La vue d'un document : elle remplace le contenu, l'en-tête et la barre restent. */
.ca-doc { flex: 1; padding: 16px 24px 24px; }
@media (max-width: 640px) { .ca-doc { padding: 14px 16px 20px; } }
.ca-doc-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ca-retour { border: 0; background: none; padding: 6px 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--action); }
.ca-doc-titre { margin: 0 0 4px; font-size: 19px; font-weight: 680; letter-spacing: -.02em; color: var(--ink); }
.ca-doc-sous { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.ca-doc-corps { padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.ca-doc-corps .fi-cv { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ca-doc-corps .sheet-desc { white-space: normal; font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; }

/* Barre du bas : un document prêt se voit, le document ouvert aussi. */
.ca-pied-btn.is-pret { color: var(--green-fort); }
.ca-pied-btn.is-actif { background: var(--action-soft); border-color: var(--action); color: var(--action); }

/* ══════ Profil suisse, v3 : une page, ce qu'il faut changer d'abord ══════
   Vert à partir de 60, orange de 40 à 59, rouge en dessous — partout. */

.ps3-note {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 20px; margin-bottom: 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--c);
  box-shadow: var(--shadow-1);
}
.ps3-note--vert { --c: var(--green); }
.ps3-note--orange { --c: var(--amber); }
.ps3-note--rouge { --c: var(--swiss); }
.ps3-note h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.02em; color: var(--c); }
.ps3-note p { margin: 0; font-size: 14px; color: var(--ink-2); }
.ps3-anneau {
  position: relative; flex: none; width: 80px; height: 80px; border-radius: 50%;
  display: grid; place-items: center; align-content: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0);
}
.ps3-anneau::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.ps3-anneau b, .ps3-anneau span { position: relative; line-height: 1; }
.ps3-anneau b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--c); }
.ps3-anneau span { margin-top: 2px; font-size: 11px; color: var(--ink-3); }

.ps3-h { margin: 22px 0 10px; font-size: 17px; font-weight: 680; letter-spacing: -.02em; color: var(--ink); }

/* Chaque changement : sa couleur d'importance, l'action en gras, l'exemple à copier. */
.ps3-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ps3-change {
  padding: 14px 16px 14px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--c);
  box-shadow: var(--shadow-1);
}
.ps3-change--important { --c: var(--swiss); --c-soft: var(--swiss-soft); }
.ps3-change--conseille { --c: var(--amber); --c-soft: var(--amber-soft); }
.ps3-change--facultatif { --c: var(--line-strong); --c-soft: var(--surface-2); }
.ps3-change-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ps3-change-tete strong { font-size: 15.5px; font-weight: 680; letter-spacing: -.01em; color: var(--ink); }
.ps3-niveau {
  padding: 2px 8px; border-radius: 980px; background: var(--c-soft); color: var(--c);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.ps3-change--facultatif .ps3-niveau { color: var(--ink-3); }
.ps3-pourquoi { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ps3-mots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.ps3-mots span { padding: 2px 9px; border-radius: 980px; background: var(--swiss-soft); color: var(--swiss); font-weight: 650; }
.ps3-exemple {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px dashed var(--line-strong);
}
.ps3-exemple-lib { width: 100%; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.ps3-exemple code { flex: 1; min-width: 0; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ps3-copier {
  flex: none; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--action);
}
.ps3-copier:hover { border-color: var(--action); }
.ps3-remarque { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.ps3-bouton { display: inline-flex; width: auto; margin-top: 10px; padding: 9px 16px; font-size: 14px; border-radius: 10px; }

.ps3-alerte {
  margin-bottom: 14px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
}
.ps3-alerte strong { font-size: 14.5px; color: var(--amber); }
.ps3-alerte p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ps3-bravo { padding: 16px 18px; border-radius: var(--r-md); background: var(--green-soft); }
.ps3-bravo strong { font-size: 15px; color: var(--green-fort); }
.ps3-bravo p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }

.ps3-acquis { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ps3-acquis span { padding: 5px 10px; border-radius: 980px; background: var(--green-soft); color: var(--green-fort); font-size: 12.5px; font-weight: 600; }

/* Le détail, replié : on l'ouvre si on veut comprendre. */
.ps3-details { display: grid; gap: 8px; margin-top: 24px; }
.ps3-plus { padding: 0 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
ol.ps3-changes + .ps3-plus { margin-top: 10px; }
.ps3-plus > summary {
  cursor: pointer; list-style: none; padding: 13px 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 650; color: var(--ink);
}
.ps3-plus > summary::-webkit-details-marker { display: none; }
.ps3-plus > summary::after { content: "+"; margin-left: auto; font-size: 20px; font-weight: 400; color: var(--ink-3); }
.ps3-plus[open] > summary::after { content: "−"; }
.ps3-plus[open] { padding-bottom: 14px; }
.ps3-plus .ps3-changes { margin-bottom: 4px; }

.ps3-theme { padding: 10px 0; border-top: 1px solid var(--line); }
.ps3-theme:first-of-type { border-top: 0; }
.ps3-theme h5 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 650; color: var(--ink); }
.ps3-theme h5 span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ps3-theme ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ps3-theme li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ps3-theme li > span {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.ps3-theme li.ok > span { background: var(--green); color: var(--on-green); }
.ps3-theme li.part > span { background: var(--amber-soft); color: var(--amber); }
.ps3-theme li.ko > span { background: var(--surface-3); color: var(--ink-3); }
.ps3-theme em { display: block; font-size: 12px; color: var(--ink-3); }
.ps3-avertissement { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--action-soft); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ps3-sous-titre { margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.ps3-usages { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ps3-portee { display: inline-block; padding: 1px 7px; border-radius: 980px; background: var(--surface-2); font-size: 11.5px; color: var(--ink-3); }
.ps3-petit { font-size: 12.5px; color: var(--ink-3); }

/* Le score du Profil suisse dans le bandeau de « Pour toi » : même code couleur. */
.bande-item--profil.note-vert .bande-val { color: var(--green-fort); }
.bande-item--profil.note-orange .bande-val { color: var(--amber); }
.bande-item--profil.note-rouge .bande-val { color: var(--swiss); }

@media (max-width: 640px) {
  .ps3-note { gap: 14px; padding: 14px 16px; }
  .ps3-anneau { width: 68px; height: 68px; }
  .ps3-anneau b { font-size: 22px; }
}

/* Un CV source trop court : dit avant de générer, pas après. */
.ca-alerte-cv {
  margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
}
.ca-alerte-cv strong { display: block; font-size: 13.5px; color: var(--amber); }
.ca-alerte-cv p { margin: 5px 0 9px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* Ce qui reste au Pro sous l'adresse générale : dit sans le masquer. */
.contact-pro {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--direct-soft); border: 1px solid color-mix(in srgb, var(--direct) 22%, transparent);
}
.contact-pro strong { display: block; font-size: 13.5px; color: var(--direct); }
.contact-pro p { margin: 5px 0 9px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════
   OPPORTUNITÉS CACHÉES ET ENTREPRISES À CONTACTER

   Elles vivent dans le MÊME fil que les offres, avec la même barre et le
   même pourcentage : ce qui change, c'est le badge.
     · « Opportunité cachée » — aucune annonce en ce moment, mais une preuve
       qu'elle recrute. Contour pointillé couleur d'encre : ce qui existe
       sans être affiché ;
     · « Entreprise à contacter » — gris, pastille vide : on ne sait rien de
       son recrutement.
   « Postuler chez eux » est en BLEU NUIT, comme la candidature directe :
   dans les deux cas, on postule chez l'employeur lui-même. Jamais de violet.
   ══════════════════════════════════════════════════════════════════════ */

/* Quatre sous-onglets sur un téléphone : ils défilent au lieu de déborder. */
.sous-onglets { overflow-x: auto; scrollbar-width: none; }
.sous-onglets::-webkit-scrollbar { display: none; }
.so { white-space: nowrap; flex: none; }
.so--cachees.is-active { background: var(--ink); border-color: var(--ink); }

/* ── Les badges ── */

.k-type--cachee {
  /* Même taille que les autres pastilles : 1,5 px de bordure en moins sur
     le padding. */
  padding: 5.5px 10.5px; border: 1.5px dashed var(--ink-3);
  background: var(--surface); color: var(--ink); font-weight: 650;
}
.k-point--cachee { background: var(--ink); }
.k-type--contacter { background: var(--surface-2); color: var(--ink-3); }
.k-point--contacter { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-4); }

/* ── La carte d'une entreprise dans le fil ── */

.lo-signal {
  margin: 0; font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--ink-2);
}
.lo--contacter .lo-signal { font-weight: 500; color: var(--ink-3); }
.lo .k-faits em {
  margin-left: 5px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-4);
}

.lo-act--postuler {
  margin-left: auto; text-decoration: none;
  background: var(--direct); color: var(--on-direct); font-weight: 650; box-shadow: var(--lueur-direct);
}
.lo-act--postuler:hover { background: var(--direct-fort); }

/* Sur la carte d'une offre : postuler chez l'employeur, quand on le sait. */
.lo .lo-chez { margin: 0; }
.lo-chez a { color: var(--direct); font-weight: 650; text-decoration: none; }
.lo-chez a:hover { text-decoration: underline; }

/* ── En tête du fil ── */

.lo-travaux { display: grid; gap: 6px; margin-bottom: 12px; }
.lo-travail {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 11px 14px; border-radius: var(--r-md); background: var(--action-soft);
  font-size: 13.5px; color: var(--action-fort);
}
.lo-intro {
  margin-bottom: 12px; padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.lo-intro p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.lo-intro .lo-intro-titre { margin-bottom: 6px; font-size: 15.5px; font-weight: 650; color: var(--ink); }

.bande-item--cachee { border: 1px dashed var(--ink-4); box-shadow: none; }
.bande-item--cachee .bande-val { color: var(--ink); }

/* ── Les états, sur la page de l'entreprise ── */

.ec-etat, .ec-sp {
  display: flex; align-items: flex-start; gap: 9px; margin: 0;
  font-size: 13.5px; line-height: 1.4; font-weight: 600;
}
.ec-etat i, .ec-sp i {
  flex: none; width: 18px; height: 18px; margin-top: 0; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800;
}
.ec-etat--offre { color: var(--green-fort); }
.ec-etat--offre i { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); width: 10px; height: 10px; margin: 4px; }
.ec-etat--recente { color: var(--action-fort); }
.ec-etat--recente i { background: var(--action); width: 10px; height: 10px; margin: 4px; }
.ec-etat--rien { color: var(--ink-3); font-weight: 550; }
.ec-etat--rien i { border: 1.5px solid var(--ink-4); width: 10px; height: 10px; margin: 4px; }

.ec-sp--oui { color: var(--green-fort); }
.ec-sp--oui i { background: var(--green-soft); }
.ec-sp--oui i::before { content: '✓'; color: var(--green-fort); }
.ec-sp--page { color: var(--action-fort); }
.ec-sp--page i { background: var(--action-soft); }
.ec-sp--page i::before { content: '→'; color: var(--action-fort); }
.ec-sp--non { color: var(--swiss); }
.ec-sp--non i { background: var(--swiss-soft); }
.ec-sp--non i::before { content: '✕'; color: var(--swiss); }
.ec-sp--inconnu { color: var(--ink-3); font-weight: 550; }
.ec-sp--inconnu i { border: 1.5px dashed var(--ink-4); }

/* L'en-tête de compatibilité : la même barre que sur sa carte du fil. */
.ent-match { position: relative; overflow: hidden; padding-top: 24px; }
.ent-match-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ent-match .lo-signal { margin: 12px 0 2px; }
.ent-match .prov { display: block; margin-top: 8px; }
.btn-pdf.ec-postuler { background: var(--direct); box-shadow: var(--lueur-direct); }
.btn-pdf.ec-postuler:hover { background: var(--direct-fort); }

/* ── Sur la page de l'entreprise ── */

.ec-page-etat { margin: 0 0 8px; font-size: 14.5px; }
.ec-extrait {
  margin: 10px 0 6px; padding: 10px 14px; border-left: 3px solid var(--line-strong);
  background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.ent-bloc .prov { margin-left: 0; }
.ent-bloc .prov a { color: var(--action); }
.ec-preuve { margin: 12px 0 0 !important; font-size: 12.5px !important; color: var(--ink-3) !important; }
.ec-preuve a { color: var(--action); font-weight: 550; }
.ec-lien { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.ec-lien svg { width: 15px; height: 15px; flex: none; }

.ec-histo { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 2px; }
.ec-histo li { display: grid; gap: 1px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ec-histo li:last-child { border-bottom: 0; }
.ec-histo-titre {
  justify-self: start; padding: 0; border: 0; background: none; text-align: left;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
}
button.ec-histo-titre { cursor: pointer; color: var(--action-fort); }
button.ec-histo-titre:hover { text-decoration: underline; }
.ec-histo-meta { font-size: 12.5px; color: var(--ink-3); }
.ec-en-ligne { color: var(--green-fort); font-weight: 650; }

/* ══════════════════════════════════════════════════════════════════════
   L'OPPORTUNITÉ CACHÉE MISE EN ÉVIDENCE, ET LES ENTREPRISES À CONTACTER

   Dans « Pour toi », l'opportunité cachée est la seule carte du fil à porter
   un aplat ENCRE : le bandeau qui dit ce qui la rend précieuse — pas d'offre
   publiée, mais une preuve qu'elle recrute des profils comme le tien.
   Les entreprises à contacter vivent dans leur propre section, avec UN
   bouton plein et bien visible : « Contacter l'entreprise ». Déjà contactée :
   vert, et le bouton cède la place à « Voir ma candidature ». Jamais de violet.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Le bandeau de l'opportunité cachée, sur sa carte ── */
.lo-cachee {
  display: grid; gap: 4px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--ink); color: var(--on-ink);
}
.lo-cachee-titre {
  display: flex; align-items: flex-start; gap: 9px; margin: 0;
  font-size: 14px; font-weight: 650; line-height: 1.4;
}
.lo-cachee-titre svg { width: 18px; height: 18px; flex: none; margin-top: 1px; opacity: .92; }
.lo-cachee-preuve {
  margin: 0 0 0 27px; font-size: 12.5px; line-height: 1.45;
  color: color-mix(in srgb, var(--on-ink) 74%, transparent);
}

.lo-act--cachee, .lo-act--pro { background: var(--action); box-shadow: var(--lueur-action); }
.lo-act--cachee:hover, .lo-act--pro:hover { background: var(--action-fort); }
.lo--contactee .lo-act--cachee {
  background: var(--green-soft); color: var(--green-fort); box-shadow: none;
}

/* Réservée au Pro : ni nom ni logo, un cadenas à la place de l'avatar. */
.k-avatar--verrou { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }
.k-avatar--verrou svg { width: 20px; height: 20px; }
.lo--verrou .lo-titre { color: var(--ink-2); }

/* Contactée : en vert, partout où elle apparaît. */
.lo-fait-contactee { background: var(--green-soft) !important; color: var(--green-fort) !important; font-weight: 650; }
.k-type--contactee { background: var(--green-soft); color: var(--green-fort); font-weight: 650; }

/* « Contacter l'entreprise » : c'est la teinte cuivre qui le fait repérer,
   pas sa taille — il garde celle des autres boutons de carte. */
.lo-contacter {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 16px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--contact); color: var(--on-contact); box-shadow: var(--lueur-contact);
  font: inherit; font-size: 13.5px; font-weight: 650;
  transition: background .18s var(--ease);
}
.lo-contacter:hover { background: var(--contact-fort); }
.lo-contacter svg { width: 17px; height: 17px; flex: none; }
.lo-contacter--fait { background: var(--green-soft); color: var(--green-fort); box-shadow: none; }
.lo-contacter--fait:hover { background: color-mix(in srgb, var(--green) 16%, var(--surface)); }

/* ── L'écran de candidature d'une entreprise ── */
.ca-principal--contact { background: var(--contact); box-shadow: var(--lueur-contact); }
.ca-principal--contact:hover { background: var(--contact-fort); }
.fc-badge--pct { background: var(--surface-2); color: var(--m-ink, var(--ink-2)); font-weight: 700; }
.fc-badge--cachee { background: var(--ink); color: var(--on-ink); }
.fc-badge--contacter { background: var(--surface-2); color: var(--ink-3); }
.fc-badge--contactee { background: var(--green-soft); color: var(--green-fort); font-weight: 650; }
.ca-annuler {
  padding: 5px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-3); text-decoration: underline;
}
.ca-annuler:hover { color: var(--ink); }

.ca-signal { padding: 16px 18px; border-radius: var(--r-md); }
.ca-signal--cachee { background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-2); }
.ca-signal--contacter { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.ca-signal-titre {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  font-size: 16.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.015em;
}
.ca-signal-titre svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.ca-signal--contacter .ca-signal-titre { color: var(--ink); }
.ca-signal-preuve { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }
.ca-signal--cachee .ca-signal-preuve { margin-left: 30px; color: color-mix(in srgb, var(--on-ink) 78%, transparent); }
.ca-signal--contacter .ca-signal-preuve { color: var(--ink-2); }
.ca-signal-raisons {
  list-style: none; display: grid; gap: 6px;
  margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line);
}
.ca-signal-raisons li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ca-signal-raisons li::before { content: "✓"; position: absolute; left: 2px; top: 0; font-weight: 800; color: var(--green); }
.ca-signal--cachee .ca-signal-raisons { border-top-color: color-mix(in srgb, var(--on-ink) 14%, transparent); }
.ca-signal--cachee .ca-signal-raisons li { color: color-mix(in srgb, var(--on-ink) 86%, transparent); }
.ca-signal--cachee .ca-signal-raisons li::before { color: var(--vert-sur-encre); }
.ca-signal-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

.ca-lien-candidature { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; }
.ca-lien-candidature .ca-act { flex: none; text-decoration: none; }
.ca-site { display: grid; gap: 2px; margin: 10px 0; font-size: 13.5px; }
.ca-site a { color: var(--action); font-weight: 650; text-decoration: none; word-break: break-all; }
.ca-site a:hover { text-decoration: underline; }
.lo-intro .lo-intro-pro { margin-top: 8px; font-weight: 600; color: var(--ink-2); }

/* Au bout du fil : la section « Entreprises à contacter », en un appui. */
.lo-vers-contacter {
  margin-top: 10px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--contact);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.lo-vers-contacter:hover { border-color: var(--contact); background: var(--contact-soft); }

/* ══════════════════════════════════════════════════════════════════════
   LES SECTIONS DE « POUR TOI » : quatre tuiles, pas des filtres gris.

   Chaque section porte la couleur de ses cartes : bleu Fronta pour Tout,
   encre pour les opportunités cachées, cuivre pour les entreprises à
   contacter, bleu nuit pour la candidature directe. Au repos, l'icône et le
   compteur prennent la couleur ; la section ouverte en est remplie. Les
   quatre tiennent toujours sur une ligne, téléphone compris : rien à faire
   défiler pour les voir.
   ══════════════════════════════════════════════════════════════════════ */
.sous-onglets {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  overflow: visible;
}
.so {
  --so: var(--action); --so-soft: var(--action-soft);
  display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 6px 8px;
  min-width: 0; padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  font: inherit; white-space: normal;
  transition: background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.so--cachees { --so: var(--ink); --so-soft: var(--surface-2); }
.so--contacter { --so: var(--contact); --so-soft: var(--contact-soft); }
.so--directe { --so: var(--direct); --so-soft: var(--direct-soft); }
.so-ico {
  order: 0; flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; background: var(--so-soft); color: var(--so);
}
.so-ico svg { width: 16px; height: 16px; }
.so .so-n {
  order: 1; margin: 0 0 0 auto; opacity: 1;
  font-size: 19px; font-weight: 750; letter-spacing: -.02em; line-height: 1;
  color: var(--so); font-variant-numeric: tabular-nums;
}
.so-lib { order: 2; flex-basis: 100%; font-size: 13px; font-weight: 650; line-height: 1.25; color: var(--ink); }
.so:hover { border-color: var(--so); }
.so.is-active { background: var(--so); border-color: var(--so); box-shadow: 0 6px 16px -8px var(--so); }
.so.is-active .so-ico { background: color-mix(in srgb, var(--on-action) 16%, transparent); color: var(--on-action); }
.so.is-active .so-n, .so.is-active .so-lib { color: var(--on-action); }
/* En gratuit, les opportunités cachées se débloquent avec Pro : on le dit. */
.so--pro .so-lib::after { content: " · Pro"; font-weight: 600; opacity: .7; }

@media (max-width: 640px) {
  .sous-onglets { gap: 6px; }
  .so { justify-content: center; gap: 4px 5px; padding: 8px 4px 9px; text-align: center; }
  .so-ico { width: 22px; height: 22px; border-radius: 7px; }
  .so-ico svg { width: 13px; height: 13px; }
  .so .so-n { margin-left: 0; font-size: 15px; }
  .so-lib { font-size: 10.5px; line-height: 1.2; }
}

/* Au-dessus des sections : seulement ce qui n'en est pas une. */
.bande:empty { display: none; }

/* Le téléphone publié par l'entreprise, dans son bloc contact. */
.contact-tel { display: grid; gap: 6px; margin-bottom: 12px; }
.contact-tel-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.contact-tel-num {
  font-size: 16px; font-weight: 700; letter-spacing: .01em; color: var(--ink);
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.contact-tel-num:hover { color: var(--contact); text-decoration: underline; }
.contact-tel-type {
  padding: 2px 8px; border-radius: 980px; background: var(--surface-2);
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
}
.contact-tel .contact-mention { margin: 0; }
.contact-tel-pro { margin: 0; font-size: 13px; color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════
   LA COUCHE « BENTO » — essai inspiré d'un onboarding en grille, habillé
   du thème « Signature Precision » (graphite et indigo, Inter).

   Même application, mêmes écrans, mêmes gestes : seule la présentation
   change. Des tuiles posées sur un fond gris très clair, un trait d'un
   pixel, une seule couleur d'accent ; Inter demi-grasse pour les titres et
   les chiffres, normale pour le texte, qui reste la priorité : une annonce
   se LIT.

   Mouvement : les tuiles arrivent en cascade (0,92 → 1 et fondu, 450 ms,
   80 ms d'écart) ; celle qui a le focus prend un double anneau (un espace
   couleur de fond, puis l'accent) et grandit de 3,5 %. Mouvement réduit :
   tout apparaît sans échelle ni boucle.

   Pour revenir à l'interface d'avant : sauvegardes/interface-avant-bento.
   ══════════════════════════════════════════════════════════════════════ */

/* Un logo blanc (Adecco) garde une tuile sombre, dans les deux modes. */
:root { --tuile-logo-sombre: #16161A; }

@keyframes tuile-entree {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}

/* ───────────────────────────── Typographie ───────────────────────────── */

body { font-family: var(--font); font-size: 16px; line-height: 1.55; }

h1, h2, .brand-name, .eyebrow, .ca-titre, .k-score, .k-mot, .so-n, .bande-val, .pipe-n,
.fc-vide h3, .lo-intro-titre, .sheet-body h3, .ps2-tete-txt h3, .paywall h2, .bento-valeur {
  font-family: var(--font-titre);
}
h1 { font-size: clamp(30px, 6vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
h1 .accent { color: var(--action); }
h2 { font-weight: 600; letter-spacing: -.02em; }

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--action);
}
.lede { font-size: 17px; color: var(--ink-3); }
.lede em { color: var(--ink); font-weight: 500; }
.k-score, .so-n, .bande-val, .pipe-n, .ca-score { font-variant-numeric: tabular-nums; }

/* Les en-têtes de section : le sur-titre, puis un titre de deux lignes au plus. */
.pt-tete .eyebrow { margin-bottom: 6px; }
.pt-tete h2, .results-head h2 { font-size: 28px; line-height: 34px; letter-spacing: -.02em; }
@media (max-width: 900px) {
  .pt-tete h2, .results-head h2 { font-size: 22px; line-height: 27px; letter-spacing: -.02em; }
}

/* ───────────────────────────── Surfaces ───────────────────────────── */

.card, .job, .lo-intro {
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.ent-bloc, .ps2-carte, .ca-detail, .pipe { border-radius: var(--r-lg); }
.pro-bloc { border-radius: var(--r-lg); }
.paywall { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.note { border-radius: var(--r-sm); }

input[type="text"], input[type="password"], input:not([type]), input[list] {
  border-radius: var(--r-sm); border-color: var(--line);
}
input:focus { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-soft); }

/* ───────────────────────────── Boutons ───────────────────────────── */

/* L'action principale : une capsule pleine, 54 px, la seule chose violette de l'écran. */
.btn-primary {
  min-height: 54px; font-size: 16px; font-weight: 600;
  box-shadow: var(--lueur-action);
  transition: transform .45s var(--ressort), background .2s var(--ease), opacity .2s var(--ease);
}
.btn-primary:hover { background: var(--action-fort); transform: none; }
.btn-apply, .btn-pdf { box-shadow: var(--lueur-action); }
.btn-ghost { border-color: var(--line-strong); font-weight: 500; }
.btn-ghost:hover { border-color: var(--action); color: var(--action); transform: none; }

/* Un appui se sent : la capsule s'enfonce un peu, puis revient en ressort. */
.btn-primary:active, .btn-apply:active, .btn-pdf:active, .btn-ghost:active,
.lo-act:active, .lo-contacter:active, .ca-principal:active, .ca-act:active,
.so:active, .bento-tuile:active, .bande-item:active { transform: scale(.97); }

/* ───────────────────────────── Navigation ───────────────────────────── */

.brand-mark { border-radius: 7px; background: var(--action); }
.brand-mark::before, .brand-mark::after { background: var(--on-action); }
.brand-name { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }

/* L'onglet actif : l'accent, sans aplat plein — l'aplat est réservé à l'action. */
.rail .tab.is-active, .rail .tab--cible.is-active { background: var(--action-soft); color: var(--action); }
.rail .tab.is-active .tab-count { background: var(--action); color: var(--on-action); }

/* ───────────────────────────── Pour toi ───────────────────────────── */

.bande-item {
  border-radius: var(--r-sm); border: 1px solid var(--line); box-shadow: none;
  transition: transform .45s var(--ressort), border-color .2s var(--ease);
}
.bande-val { font-size: 17px; font-weight: 600; }

/* Les quatre sections : des tuiles bento. En-tête (icône + libellé), le
   compteur en bas ; la section ouverte est la seule tuile pleine. */
.so {
  --so: var(--action); --so-soft: var(--action-soft);
  min-height: 76px; padding: 12px;
  align-content: space-between;
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none;
  animation: tuile-entree .45s var(--ease) backwards;
  transition: transform .45s var(--ressort), box-shadow .2s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease);
}
.so:nth-child(2) { animation-delay: 80ms; }
.so:nth-child(3) { animation-delay: 160ms; }
.so:nth-child(4) { animation-delay: 240ms; }
.so--cachees, .so--contacter, .so--directe { --so: var(--action); --so-soft: var(--action-soft); }
.so-ico { order: 0; width: auto; height: auto; background: none; border-radius: 0; color: var(--action); }
.so-ico svg { width: 16px; height: 16px; }
.so-lib { order: 1; flex: 1 1 0; min-width: 0; font-size: 13px; font-weight: 650; }
.so .so-n { order: 2; flex: 0 0 100%; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.so:hover { border-color: color-mix(in srgb, var(--action) 45%, var(--line)); }
.so.is-active { background: var(--action); border-color: var(--action); box-shadow: var(--lueur-action); }
.so.is-active .so-ico, .so.is-active .so-n, .so.is-active .so-lib { background: none; color: var(--on-action); }
.so:focus-visible { outline: none; box-shadow: var(--anneau); transform: scale(1.035); }

@media (max-width: 640px) {
  .so { min-height: 70px; padding: 9px 4px; justify-content: center; align-content: center; }
  .so .so-n { order: 1; flex: 0 1 auto; font-size: 16px; }
  .so-lib { order: 2; flex: 0 0 100%; font-size: 10.5px; line-height: 1.2; text-align: center; }
}

/* ── Les cartes du fil : des tuiles qui arrivent en cascade ── */
.lo {
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  padding: 20px 18px 12px;
  animation: tuile-entree .45s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.lo:hover { box-shadow: var(--shadow-3); border-color: var(--line-strong); }
.lo:focus-visible { outline: none; box-shadow: var(--anneau); }
.lo-titre { font-size: 17px; font-weight: 600; letter-spacing: -.2px; line-height: 1.3; }
.k-org { color: var(--ink-3); }
.k-score { font-weight: 600; letter-spacing: -.03em; }
.k-mot { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.k-faits li { border-radius: 999px; }
.lo .k-avatar { border-radius: var(--r-sm); }
.lo-cachee { border-radius: var(--r-sm); }
.lo-act { transition: transform .45s var(--ressort), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.lo-act--garder { border-color: var(--line-strong); }
.lo-intro { background: var(--surface); }

/* ───────────────────────────── L'écran de candidature ───────────────────────────── */

/* Un fond groupé, des blocs-tuiles : la même grammaire que le fil. */
.sheet { background: var(--bg); }
.sheet--candidature { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-3); }
@media (max-width: 640px) { .sheet--candidature { border-radius: 0; border: 0; } }
.ca-tete, .ca-pied { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.ca-sur {
  font-family: var(--font-titre); font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--action);
}
.ca-titre { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.ca-bloc { border-radius: var(--r-lg); box-shadow: none; }
.ca-principal, .ca-pied-btn, .ca-act { border-radius: 999px; }

/* ───────────────────────────── Mode sombre ───────────────────────────── */

.ag-marque--logo.is-clair { background: var(--tuile-logo-sombre); }

/* L'avatar teinté par le nom : un aplat sombre, des initiales claires. */
:root[data-theme="dark"] .k-avatar:not(.k-avatar--logo):not(.k-avatar--vide) {
  background: linear-gradient(145deg,
    hsl(var(--teinte, 260) 36% 24%) 0%,
    hsl(calc(var(--teinte, 260) + 26) 32% 18%) 100%);
  border-color: var(--line);
}
:root[data-theme="dark"] .k-avatar:not(.k-avatar--logo) span { color: hsl(var(--teinte, 260) 75% 84%); }
:root[data-theme="dark"] .ag-marque:not(.ag-marque--logo) {
  background: hsl(var(--teinte, 260) 30% 20%);
  color: hsl(var(--teinte, 260) 70% 82%);
}
:root[data-theme="dark"] .sheet-backdrop { background: rgba(0, 0, 0, .55); }

/* ───────────────────────────── L'accueil en grille ─────────────────────────────
   Premier lancement (ou app.html?accueil) : six tuiles disent ce que fait
   Fronta. Elles s'assemblent en cascade, puis chacune prend le focus à son
   tour et joue sa petite animation. Deux colonnes : « Compatibilité » fait
   deux rangées, « Postuler en 1 clic » toute la largeur — c'est la seule
   tuile pleine. */

.bento-accueil { max-width: 560px; margin: 26px 0 4px; }
.bento {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(76px, auto); gap: 8px;
  grid-template-areas: "a b" "a c" "d d" "e f";
}
.bento-tuile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  min-width: 0; padding: 12px; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  font: inherit;
  animation: tuile-entree .45s var(--ease) backwards;
  animation-delay: calc(var(--n, 0) * 80ms);
  transition: transform .45s var(--ressort), box-shadow .2s var(--ease);
}
.bento-tuile--a { grid-area: a; }
.bento-tuile--b { grid-area: b; }
.bento-tuile--c { grid-area: c; }
.bento-tuile--d { grid-area: d; }
.bento-tuile--e { grid-area: e; }
.bento-tuile--f { grid-area: f; }
.bento-tuile.is-focus { position: relative; z-index: 1; box-shadow: var(--anneau); transform: scale(1.035); }
.bento-tuile:focus-visible { outline: none; box-shadow: var(--anneau); }

.bento-tete { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; line-height: 1.2; }
.bento-tete svg { width: 16px; height: 16px; flex: none; color: var(--action); }
.bento-sous { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.bento-ligne { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bento-valeur { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.bento-valeur small {
  margin-left: 6px; font-family: var(--font); font-size: 12px; font-weight: 400;
  letter-spacing: 0; color: var(--ink-3);
}

/* Compatibilité : des barres à l'échelle du match, qui poussent au focus. */
.bento-barres { display: grid; gap: 7px; }
.bento-barres i { display: block; height: 6px; width: var(--w); border-radius: 999px; background: var(--m, var(--surface-3)); }
.bento-tuile.is-focus .bento-barres i { animation: barre-pousse .7s var(--ease) backwards; animation-delay: calc(var(--k, 0) * 110ms); }
@keyframes barre-pousse { from { width: 0; } }

/* Trajet réel : l'itinéraire se trace. */
.bento-route { display: block; width: 100%; height: 24px; color: var(--action); }
.bento-route path { stroke-dasharray: 120; stroke-dashoffset: 0; }
.bento-tuile.is-focus .bento-route path { animation: route-trace .9s var(--ease) backwards; }
@keyframes route-trace { from { stroke-dashoffset: 120; } }

/* Contact : la coche se remplit. */
.bento-coche {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--line-strong); color: transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .45s var(--ressort);
}
.bento-coche svg { width: 12px; height: 12px; }
.bento-tuile.is-focus .bento-coche { background: var(--green); border-color: var(--green); color: var(--on-green); transform: scale(1.08); }

/* Postuler en 1 clic : la seule tuile pleine. */
.bento-tuile--accent { background: var(--action); border-color: var(--action); color: var(--on-action); }
.bento-tuile--accent .bento-tete, .bento-tuile--accent .bento-tete svg { color: var(--on-action); }
.bento-pilule {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  height: 32px; padding: 0 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--on-action) 20%, transparent);
  font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden;
}
.bento-pilule svg { width: 14px; height: 14px; flex: none; }
.bento-curseur {
  display: inline-block; flex: none; width: 2px; height: 16px; margin-left: -6px;
  background: var(--on-action); animation: curseur 1s steps(1) infinite;
}
@keyframes curseur { 50% { opacity: 0; } }

/* Opportunités cachées : l'œil cligne. */
.bento-oeil { transform-origin: center; }
.bento-tuile.is-focus .bento-oeil { animation: cligne .9s var(--ease); }
@keyframes cligne { 0%, 100% { transform: none; } 45% { transform: scaleY(.1); } }

/* Profil suisse : l'anneau se remplit. */
.bento-jauge { width: 22px; height: 22px; flex: none; transform: rotate(-90deg); }
.bento-jauge circle { fill: none; stroke-width: 3; }
.bento-jauge .fond { stroke: var(--surface-3); }
.bento-jauge .plein { stroke: var(--action); stroke-linecap: round; stroke-dasharray: 57; stroke-dashoffset: 14; }
.bento-tuile.is-focus .bento-jauge .plein { animation: jauge .9s var(--ease) backwards; }
@keyframes jauge { from { stroke-dashoffset: 57; } }

.bento-commencer { margin-top: 16px; }

/* Mouvement réduit : aucune échelle, aucune boucle — la grille, immobile. */
@media (prefers-reduced-motion: reduce) {
  .so:focus-visible, .bento-tuile.is-focus { transform: none; }
  .bento-curseur { animation: none; }
}

/* ───────────────────────────── Le bouton clair / sombre ─────────────────────────────
   En haut à droite de chaque écran, au-dessus du contenu et sous ce qui
   s'ouvre par-dessus (candidature, paywall). Le clair est le thème de tout
   le monde : la lune propose le sombre, le soleil ramène le clair. */
.theme-bascule {
  position: fixed; z-index: 45;
  top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right));
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-2);
  transition: transform .45s var(--ressort), border-color .2s var(--ease), color .2s var(--ease);
}
.theme-bascule:hover { border-color: var(--action); color: var(--action); }
.theme-bascule:active { transform: scale(.94); }
.theme-bascule:focus-visible { outline: none; box-shadow: var(--anneau); }
.theme-bascule svg { width: 20px; height: 20px; }
.theme-bascule .ic-soleil { display: none; }
:root[data-theme="dark"] .theme-bascule .ic-lune { display: none; }
:root[data-theme="dark"] .theme-bascule .ic-soleil { display: block; }

/* Là où le bouton pourrait toucher un en-tête, l'en-tête lui laisse sa place. */
@media (max-width: 1180px) {
  .pt-tete, .results-head { padding-right: 56px; }
}

/* ══════════════════════════════════════════════════════════════════════
   V2 — L'OFFRE, POINT FOCAL DE « POUR TOI »

   Une amélioration fine, pas une refonte : même thème, mêmes composants,
   mêmes actions. Ce qui change :
     · plus de barre en haut des cartes : le score se lit dans un petit
       anneau à la couleur du palier, à côté du pourcentage ;
     · des raisons courtes (« Maintenance industrielle », « Français
       requis ») plutôt qu'une explication de l'algorithme ;
     · les chiffres du tableau de bord passent au second plan ;
     · des cartes un peu plus compactes : 2,5 à 3 offres par écran ;
     · « Pas intéressé » explicite, jamais dominant ;
     · ni verre dépoli ni grandes ombres, des animations courtes.
   Pour revenir à la version précédente : sauvegardes/interface-precision.
   ══════════════════════════════════════════════════════════════════════ */

/* ── L'en-tête : le titre, puis les chiffres en retrait ── */
.pt-tete { padding-top: 18px; padding-bottom: 10px; }
.pt-tete h2, .results-head h2 { font-size: 24px; line-height: 30px; }

/* Le profil suisse et les candidatures : une ligne discrète, pas des tuiles. */
.bande { gap: 4px 18px; margin-bottom: 12px; }
.bande-item {
  gap: 5px; padding: 2px 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
button.bande-item:hover { border: 0; transform: none; }
button.bande-item:hover .bande-lib { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bande-val { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.bande-val small { font-size: 11px; }
.bande-lib { font-size: 13px; color: var(--ink-3); }

/* Les sections : une barre d'onglets compacte ; le compteur au second plan. */
.sous-onglets { gap: 6px; margin-bottom: 14px; }
.so {
  min-height: 44px; padding: 8px 12px; gap: 8px;
  flex-wrap: nowrap; align-items: center; align-content: center;
  border-radius: var(--r-md); box-shadow: none; animation: none;
}
.so-lib { flex: 1 1 auto; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.so .so-n {
  flex: none; margin-left: auto; min-width: 24px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-align: center;
}
.so.is-active { box-shadow: none; }
.so.is-active .so-n { background: color-mix(in srgb, var(--on-action) 18%, transparent); color: var(--on-action); }
.so:focus-visible { transform: none; }
/* La barre reste sous la main en défilant : un fond plein, pas de verre dépoli. */
.view--feed .sous-onglets { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.bottombar { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (max-width: 640px) {
  .so { min-height: 54px; padding: 7px 4px; flex-wrap: wrap; justify-content: center; gap: 3px 5px; }
  .so .so-n { order: 1; margin-left: 0; min-width: 0; padding: 0; background: none; font-size: 12.5px; }
  .so.is-active .so-n { background: none; }
  .so-lib { order: 2; flex: 0 0 100%; font-size: 10.5px; text-align: center; }
}

/* ── La carte : plus compacte, la même information ── */
.lo-liste { gap: 10px; }
.lo {
  gap: 9px; padding: 14px 18px 9px;
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  animation: carte-entree .28s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease),
              height .26s var(--ease), opacity .22s var(--ease), padding .26s var(--ease), margin .26s var(--ease);
}
.lo:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); }
@keyframes carte-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Une liste mise à jour sur place ne rejoue pas l'arrivée des cartes : seules
   celles qui arrivent vraiment (page suivante, autre filtre) l'animent. */
.lo.lo--calme { animation: none; }

/* Le score : un anneau à la couleur du palier, le pourcentage, « match ». */
.lo-tete { align-items: center; min-height: 30px; }
.lo-score { display: inline-flex; align-items: center; gap: 8px; }
.lo-anneau { width: 30px; height: 30px; flex: none; transform: rotate(-90deg); }
.lo-anneau circle { fill: none; stroke-width: 3.5; }
.lo-anneau .fond { stroke: var(--surface-3); }
.lo-anneau .plein { stroke: var(--m, var(--action)); stroke-linecap: round; }
.lo-pct {
  font-family: var(--font-titre); font-size: 26px; font-weight: 600; line-height: 1;
  letter-spacing: -.03em; color: var(--m-ink, var(--ink)); font-variant-numeric: tabular-nums;
}
.lo-pct i { margin-left: 1px; font-size: 15px; font-style: normal; font-weight: 600; }
.lo-mot { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
/* Tous les critères n'ont pas pu être analysés : seul le mot « match »
   s'éteint, comme avant — le score garde sa couleur et reste lisible. */
.lo-score--partiel .lo-mot { color: var(--ink-4); }

/* Le poste d'abord ; l'employeur et la source en retrait. */
.lo-identite { gap: 12px; }
.lo .k-avatar { width: 40px; height: 40px; border-radius: var(--r-md); }
.lo-titre { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.lo .k-org { margin-top: 2px; font-size: 13px; }

/* L'avatar : un aplat neutre, sans dégradé. */
.k-avatar:not(.k-avatar--logo) { background: var(--surface-2); border: 1px solid var(--line); }
.k-avatar:not(.k-avatar--logo) span { color: var(--ink-2); }
:root[data-theme="dark"] .k-avatar:not(.k-avatar--logo):not(.k-avatar--vide) { background: var(--surface-2); }
:root[data-theme="dark"] .k-avatar:not(.k-avatar--logo) span { color: var(--ink-2); }

/* Les faits : des pastilles discrètes. */
.lo-faits { gap: 6px; }
.lo .k-faits li {
  padding: 4px 10px; background: var(--surface-2); border-color: transparent;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
}
.lo .k-faits svg { width: 14px; height: 14px; color: var(--ink-4); }
.lo .lo-chez { font-size: 13px; color: var(--ink-3); }

/* Les raisons : courtes, sur une ligne quand elles tiennent. */
.lo-raisons { display: flex; flex-wrap: wrap; gap: 5px 18px; }
.lo-raisons .k-r { font-size: 13.5px; color: var(--ink-2); }

/* ── Les actions : « Voir l'offre » domine, le reste se tient en retrait ── */
.lo-actions { gap: 8px; margin-top: 0; padding-top: 10px; }
.lo-act { min-height: 38px; font-size: 13px; }
.lo-act--masquer { width: auto; padding: 0 12px 0 9px; gap: 6px; color: var(--ink-3); font-weight: 500; }
.lo-act--masquer svg { width: 16px; height: 16px; }
.lo-act--masquer:hover { color: var(--ink); background: var(--surface-2); }
.lo-act--garder:hover { color: var(--action); border-color: var(--action); }
.lo-act--voir { padding: 0 16px; }
.lo-act--voir svg { transition: transform .2s var(--ease); }
.lo-act--voir:hover svg { transform: translateX(2px); }
.lo-contacter { min-height: 38px; }
@media (max-width: 359px) {
  .lo-act--masquer span { display: none; }
  .lo-act--masquer { width: 38px; padding: 0; }
}

/* L'infobulle : un mot d'explication au survol ou au clavier, jamais au toucher. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5;
  padding: 5px 9px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--on-ink);
  font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { [data-tip]::after { display: none; } }

/* ══════════════════════════════════════════════════════════════════════
   LES ALERTES (Pro)
   Une entrée dans la ligne discrète sous le titre de « Pour toi » — la
   cloche, et le nombre de nouvelles en pastille indigo —, puis un panneau
   dans la feuille de côté. Rien qui clignote : la pastille suffit.
   ══════════════════════════════════════════════════════════════════════ */

.bande-item--alertes { align-items: center; gap: 6px; }
.bande-ico { display: inline-flex; width: 16px; height: 16px; color: var(--ink-3); }
.bande-ico svg { width: 16px; height: 16px; }
.bande-item--alertes:hover .bande-ico { color: var(--ink); }
.bande-item--alertes.a-du-neuf .bande-ico { color: var(--action); }
.bande-item--alertes.a-du-neuf .bande-lib { color: var(--action); font-weight: 600; }
.bande-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--action); color: var(--on-action);
  font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1;
}
/* La cloche remue une fois quand il y a du neuf — pas en boucle. */
@media (prefers-reduced-motion: no-preference) {
  .bande-item--alertes.a-du-neuf .bande-ico svg { animation: al-cloche .9s var(--ease) .3s 1; transform-origin: 50% 12%; }
}
@keyframes al-cloche {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-11deg); }
  60% { transform: rotate(6deg); }
  80% { transform: rotate(-3deg); }
}

/* ── Le panneau ── */
.al-tete { margin-bottom: 18px; }
.al-tete .eyebrow { margin-bottom: 8px; }
.al-sous { margin: 0; color: var(--ink-3); font-size: 14.5px; line-height: 1.5; }

.al-pro {
  padding: 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.al-pro p { margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

.al-reglage {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.al-notifs { padding: 8px 13px; font-size: 13px; }
.al-notifs-etat { font-size: 12.5px; color: var(--ink-4); }
.al-notifs-etat.is-ok { color: var(--green-fort); font-weight: 600; }
.al-verif { margin: 10px 2px 16px; color: var(--ink-4); font-size: 12.5px; }

.al-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.al-item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.al-item:hover { border-color: var(--line-strong); }
.al-item:focus-visible { outline: none; box-shadow: var(--anneau); }
/* Une alerte pas encore ouverte : un filet indigo à gauche. */
.al-item--neuve { box-shadow: inset 3px 0 0 var(--action); }
.al-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--action-soft); color: var(--action);
}
.al-ico svg { width: 18px; height: 18px; }
/* L'opportunité cachée garde son identité : l'aplat graphite. */
.al-ico--cachee { background: var(--ink); color: var(--on-ink); }
.al-txt { display: grid; gap: 2px; min-width: 0; }
.al-type { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-4); }
.al-titre { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.al-detail { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-score { font-size: 17px; font-weight: 650; color: var(--m-ink, var(--green-fort)); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.al-score i { font-style: normal; font-size: 12px; font-weight: 600; margin-left: 1px; }
.al-lues { margin-top: 14px; padding: 8px 13px; font-size: 13px; }
.al-vide {
  margin-top: 14px; padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--surface-2); color: var(--ink-3); font-size: 14px; line-height: 1.5;
}

/* ── « Jobs by Adzuna » ──
   La mention que leurs conditions imposent sur chaque annonce venue de leur
   API : 116 × 23 px au moins, « Jobs » et le logo officiel liés à leur site.
   Discrète : gris, sans cadre, rangée en haut à droite de la carte. */
.jba {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  flex: none; min-width: 116px; height: 23px; padding: 0 4px;
  font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--ink-4);
}
.jba a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.jba a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.jba a:focus-visible { outline: none; box-shadow: var(--anneau); border-radius: 4px; }
.jba img { display: block; width: 57px; height: 15px; }
.lo-tete .jba { margin-left: auto; }
.ca-pastilles .jba { margin-left: auto; }
.leaflet-control-attribution .jba { height: 23px; vertical-align: middle; color: #555; }

/* ══════════════════════════════════════════════════════════════════════
   LE COMPTE
   L'écran d'entrée (inscription / connexion) : une colonne étroite, le
   même champ et le même bouton que le reste de l'application. Puis, dans
   les réglages, l'adresse du compte, la déconnexion et la suppression.
   ══════════════════════════════════════════════════════════════════════ */

.view--compte { padding: 0; }
.view--compte[hidden] { display: none; }

/* ── Dans les réglages ── */
.compte-bloc {
  margin-top: 28px; padding: 20px 22px; display: grid; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.compte-titre { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.compte-ligne { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.compte-email { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.compte-plan { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-3); }
.compte-danger { border-top: 1px solid var(--line); padding-top: 12px; }
.compte-danger summary { cursor: pointer; font-size: 14px; font-weight: 550; color: var(--swiss); width: fit-content; }
.compte-danger-corps { display: grid; gap: 14px; margin-top: 12px; }
.compte-danger-corps p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.btn-danger {
  justify-self: start; min-height: 44px; padding: 0 18px; border: 0; border-radius: 980px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; background: var(--swiss); color: var(--on-swiss);
}
.btn-danger:hover { filter: brightness(.94); }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.btn-danger:focus-visible { outline: none; box-shadow: var(--anneau); }

/* L'abonnement Pro : passer au Pro, ou le gérer et le résilier. */
.compte-abonnement { display: grid; gap: 8px; padding: 14px 0 2px; border-top: 1px solid var(--line); }
.compte-abonnement .btn-ghost, .compte-abonnement .btn-primary { justify-self: start; }
.compte-abonnement .lien { font-size: 14px; }

/* Le paywall : l'achat, et ce qu'on accepte en l'achetant. */
.paywall-achat { display: grid; gap: 8px; }
.paywall-cgv { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.paywall-cgv a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Tes données (export JSON) et les pages légales, sous le compte. */
.compte-donnees { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-4); }
.compte-donnees a.lien { text-decoration: none; }
.compte-donnees a.lien:hover { text-decoration: underline; }
.reglages-legal { margin: 18px 0 0; text-align: center; font-size: 13px; line-height: 1.6; color: var(--ink-4); }
.reglages-legal a { color: var(--ink-3); text-underline-offset: 2px; }
.reglages-legal a:hover { color: var(--ink); }

/* Le mot de passe, facultatif quand la connexion se fait par e-mail. */
.compte-mdp { border-top: 1px solid var(--line); padding-top: 12px; }
.compte-mdp summary { cursor: pointer; font-size: 14px; font-weight: 550; color: var(--action); width: fit-content; }
.compte-bloc .btn-primary { width: auto; justify-self: start; padding: 12px 20px; font-size: 15px; }
.compte-ok { margin: 0; font-size: 14px; font-weight: 550; color: var(--green-fort); }
.compte-ok[hidden] { display: none; }
/* Confirmer par un code reçu par e-mail (définir un mot de passe, supprimer). */
.compte-confirmation { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); }
.compte-confirmation[hidden] { display: none; }
.compte-aide { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.compte-aide b { color: var(--ink); overflow-wrap: anywhere; }
.cc-ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cc-ligne[hidden] { display: none; }
.cc-ligne input { flex: 1 1 170px; width: auto; background: var(--surface); font-size: 18px; letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.cc-ligne input::placeholder { font-size: 15px; letter-spacing: 0; }


/* ══════════════════════════════════════════════════════════════════════
   UNE SEULE FORME DE BOUTON
   Tous les boutons du site sont des capsules ; ceux qui ne portent qu'une
   icône deviennent ronds. Les cartes gardent leurs coins. Cette règle vient
   en dernier et l'emporte sur les rayons posés au cas par cas plus haut.
   ══════════════════════════════════════════════════════════════════════ */
:is(.btn-primary, .btn-ghost, .btn-apply, .btn-pdf, .btn-danger, .fi-apply, .k-act, .lo-act,
  .lo-contacter, .lo-vers-contacter, .ca-principal, .ca-pied-btn, .ca-act, .ca-btn, .ec-postuler,
  .pro-btn, .ps3-bouton, .ps3-copier, .cv-pick, .dom-chip, .chip, .ag-tel, .ag-dom-lien, .so,
  .tab, .contact-tel-num, .ca-retour, .ca-refaire, .ca-annuler, .al-notifs, .al-lues) {
  border-radius: 999px !important;
}

/* Les réglages d'un compte qui a déjà ses critères : l'en-tête d'accueil
   laisse la place à « Tes critères de recherche ». */
.reglages-tete { display: none; }
.view--reglages .hero > :not(.reglages-tete) { display: none; }
.view--reglages .reglages-tete { display: block; }
.view--reglages .hero { padding-bottom: 8px; }
.reglages-tete h2 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
.reglages-tete .lede { margin: 8px 0 16px; }
.reglages-refaire { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; text-decoration: none; }