/* =========================================================
   JobTrack — thème sombre, ambiance bleue.
   Tokens centralisés en haut du fichier.
   ========================================================= */

:root {
  /* Fond / surfaces */
  --bg-void: #080D18;
  --bg-page: #0B1220;
  --bg-surface: #10182C;
  --bg-surface-2: #172140;
  --bg-surface-hover: #1C2748;
  --border: #22304F;
  --border-soft: #1A2440;

  /* Texte */
  --text-primary: #E9EDFB;
  --text-secondary: #94A0C4;
  --text-muted: #8190B6;

  /* Accent principal (identité JobTrack) */
  --accent: #FFD42A;
  --accent-soft: rgba(255, 212, 42, 0.14);
  --accent-strong: #FFD42A;
  /* v6.16 — couleur des textes posés sur une zone d'accent (boutons, pastilles…) :
     gris très foncé par défaut, réglable dans Personnalisation > Couleur d'accent */
  --on-accent: #23262D;

  /* Statuts pipeline */
  --status-a_postuler: #A3B1D4;
  --status-envoyee: #7CABFF;
  --status-premier_entretien: #F5A524;
  --status-entretiens_suivants: #F68A8A;
  --status-offre: #2FD180;
  --status-refuse: #A5B0C6;

  /* Tags transversaux */
  --tag-alimentaire: #B48EF0;
  --tag-fake: #4FD1C5;

  /* Alerte relance */
  --relance: #FB7185;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px -12px rgba(0,0,0,0.55);
}

/* Thème clair — gris clair, pas de blanc pur */
body.theme-light {
  --bg-void: #E4E5E9;
  --bg-page: #EBEBEF;
  --bg-surface: #F4F4F6;
  --bg-surface-2: #E9E9ED;
  --bg-surface-hover: #DEDFE4;
  --border: #D2D3D9;
  --border-soft: #DCDDE2;

  --text-primary: #1E2030;
  --text-secondary: #4A4E62;
  --text-muted: #5C6074;

  --accent: #F2BE0A;
  --accent-soft: rgba(242, 190, 10, 0.18);
  --accent-strong: #7A5600;
  --on-accent: #23262D;

  --status-a_postuler: #46547A;
  --status-envoyee: #1A4EAD;
  --status-premier_entretien: #7A4700;
  --status-entretiens_suivants: #962222;
  --status-offre: #0D5E3E;
  --status-refuse: #4A5160;

  --tag-alimentaire: #6A3FB0;
  --tag-fake: #0F7A6E;

  --relance: #B4233F;

  --shadow-card: 0 1px 2px rgba(20,20,30,0.06), 0 8px 20px -12px rgba(20,20,30,0.12);
}

/* v8.56 — alias de jetons : des règles utilisaient des noms de variables jamais
   définis (--surface, --text, --danger…), d'où des modales blanches en thème
   sombre ou des boutons « danger » sans couleur. Déclarés sur :root ET body pour
   suivre le thème clair (dont les jetons sont posés sur body). */
:root, body {
  --surface: var(--bg-surface); --surface-2: var(--bg-surface-hover); --card-bg: var(--bg-surface);
  --bg-tertiary: var(--bg-surface-hover); --bg-surface-alt: var(--bg-surface-hover);
  --text: var(--text-primary); --text-faint: var(--text-muted);
  --border-strong: var(--border); --border-subtle: var(--border-soft);
  --primary: var(--accent); --accent-text: var(--accent-strong);
  --font-sans: var(--font-body); --radius: var(--radius-md);
  --danger: var(--status-entretiens_suivants); --status-entretien_2: var(--status-entretiens_suivants);
  --ok: var(--status-offre); --ok-bg: color-mix(in srgb, var(--status-offre) 16%, transparent);
  --warning: #E0A030; --status-entretien_1: #D9962B;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  min-height: 100vh;
}

body.no-scroll, body.no-scroll .app-shell {
  height: 100vh;
  overflow: hidden;
}

/* v7.83 : accueil plein écran — si le menu (bibliothèque ouverte…) dépasse la hauteur, il défile dans sa colonne au lieu d'être coupé */
body.no-scroll .sidebar, body.resume-fit .sidebar { overflow-y: auto; min-height: 0; max-height: 100vh; scrollbar-width: thin; }

body.no-scroll .content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.no-scroll .kanban-board {
  flex: 1;
  min-height: 0;
}

a { color: inherit; text-decoration: none; }

.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--bg-void);
  border-right: 1px solid var(--border-soft);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 0.2px;
  color: var(--text-primary);
  padding: 0 6px;
}
/* v6.17 — seconde partie du nom (« -Astre ») en couleur d'accent et en gras */
.brand-name span, .vt-brand span { color: var(--accent-strong); font-weight: 800; }

/* v5.170 — Logo Job-Astre : SVG inline (macro ja_logo, _ui_macros.html) qui
   référence le symbole #ja de static/img/logo-star.svg. Couleurs pilotées
   par deux variables héritées dans le <use> :
     --ja-logo-color : étoile, contour du globe, continents — suit la couleur
                       d'accent du thème (personnalisable) ; les pages
                       publiques (landing, vitrine) la fixent en jaune ;
     --ja-logo-ink   : fond, globe et contours (noir).
   La souris reste blanche. Taille 1.15em par défaut (suit le texte voisin).
   Jaune de la marque (pages publiques) : --ja-logo-page-color: #ffd42a. */
.ja-logo {
  /* résolu SUR le logo (et non sur :root) pour suivre une couleur d'accent
     personnalisée posée sur <body> ; une page peut imposer sa teinte via
     --ja-logo-page-color (landing/vitrine : jaune). */
  --ja-logo-color: var(--ja-logo-page-color, var(--accent-strong));
  --ja-logo-ink: #000;
  display: inline-block; flex-shrink: 0; overflow: visible;
  width: 1.15em; height: 1.15em; vertical-align: -0.22em;
}
/* Logo de la barre latérale */
.brand-mark {
  width: 55px;
  height: 55px;
  margin-top: -10px; /* v6.17/v6.18 — centrage optique avec le texte voisin (logo seul) */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.nav-group { display: flex; flex-direction: column; gap: 2px; }

.nav-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-item:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-strong); }
/* v6.17 — menu compact (Customisation) : padding vertical des liens 9 -> 4 px */
body.menu-compact .nav-item { padding-top: 4px; padding-bottom: 4px; }

.nav-icon { font-size: 15px; width: 18px; text-align: center; }

/* Illustration décorative sous le menu "Profil" — change selon la section
   active (voir nav_section dans base.html), pure décoration, pas cliquable. */
.sidebar-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
  opacity: 0.85;
}
/* Sur le Kanban, le résumé des colonnes (.sidebar-stats) s'affiche tout en
   bas de la sidebar : on resserre l'illustration contre le menu "Profil"
   (marge négative pour absorber le "gap" de .sidebar, padding réduit) pour
   lui laisser la place et garder le résumé lisible. */
.sidebar-illustration-tight {
  margin-top: -20px;
  padding: 2px 0;
}
/* SVG personnalisés uploadés dans static/img/nav-icons/ — le fichier peut
   contenir ses propres styles inline (ex: export Inkscape "fill:#000000"),
   d'où le !important pour rester lisible sur fond sombre comme clair et
   cohérent avec l'accent de l'appli plutôt qu'un noir figé.
   Taille x3 (demande explicite) : 64px -> 192px. */
.sidebar-illustration-custom svg {
  width: 192px;
  height: 192px;
  display: block;
}
.sidebar-illustration-custom svg path,
.sidebar-illustration-custom svg [style*="fill"] {
  fill: var(--accent) !important;
}

.sidebar-stats {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px;
  border-top: 1px solid var(--border-soft);
}

.stat-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}

.stat-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px;
}

/* ---------- Main ---------- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.topbar {
  display: flex;
  flex-wrap: wrap;          /* v7.31 : titres et boutons longs (es/en) passent à la ligne au lieu de déborder */
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-page) 85%, transparent);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.page-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin-right: auto;
  color: var(--on-bg-text-color, var(--text-primary));
}

/* Séparateur "|" entre les segments d'un page-title composite (v5.90,
   voir templates/profil.html : "Profil | Utilisateur : X | Type de
   compte : Y") — atténué et un peu resserré pour rester secondaire par
   rapport au texte qu'il sépare. */
.topbar-sep {
  color: var(--text-muted);
  font-weight: 400;
  margin: 0 6px;
}

/* Bouton hamburger (ouvre la sidebar en tiroir sous 900px, voir le
   @media plus bas) — masqué par défaut sur desktop, où la sidebar est
   toujours visible en colonne fixe. */
.topbar-menu-btn {
  display: flex;   /* v7.83 : visible aussi sur grand écran (replie / déplie le menu latéral) */
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex: none;
}
.topbar-menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--text-primary);
}
.sidebar-backdrop {
  display: none;
}
/* v7.83 — menu latéral replié (grand écran) : toute la largeur pour le contenu */
@media (min-width: 1101px) {
  body.sidebar-collapsed .app-shell { grid-template-columns: minmax(0, 1fr); }
  body.sidebar-collapsed .sidebar { display: none; }
}

/* Icône dessinée à la main, une par section, affichée à gauche du titre de
   chaque page (voir nav_section dans base.html) — anciennement sous
   "Profil" dans la sidebar (v5.32/5.33), déplacée ici sur demande. */
.topbar-icon {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent);
}

/* v5.166 — + url / email / tel / password / search : ces champs restaient
   en style navigateur par défaut (fond blanc), ex. l'URL de l'offre du
   wizard ou l'email d'un interlocuteur. */
.search-input, select, input[type=text], input[type=date], input[type=number], textarea,
input[type=url], input[type=email], input[type=tel], input[type=password], input[type=search] {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

textarea {
  width: 100%;
}

.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.form-field input[type="checkbox"], .form-field input[type="radio"] {
  width: auto;
}

.search-input:focus, select:focus, input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-input {
  min-width: 280px;
  flex: 1;
  max-width: 420px;
}
.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  /* Corrigé (v5.54) : "transition: all" animait AUSSI la largeur/la forme
     de la pastille (pas seulement sa couleur), pas juste au clic mais à
     chaque fois que le navigateur recalcule sa largeur — ce qui arrive en
     redimensionnant la fenêtre (ex: l'inspecteur en mode responsive). Le
     rendu capturé pendant cette (courte) animation de largeur montrait un
     rectangle "fantôme" (l'ancienne largeur, mi-transition) incrusté dans
     le nouveau contour arrondi (repéré par Yacine, capture à l'appui —
     zoomée, on voit clairement les deux formes superposées). En listant
     explicitement les seules propriétés qu'on veut réellement animer
     (couleurs), un changement de largeur/disposition redessine la pastille
     instantanément, sans transition ni fantôme. */
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  background: var(--bg-surface);
  /* Corrigé (v5.53) : sans ceci, à certaines largeurs intermédiaires le
     texte d'une pastille (ex: "Non renseigné" dans la section Salaire du
     wizard) passait sur 2 lignes alors que les pastilles voisines
     restaient sur 1 — avec border-radius:999px calé sur la hauteur d'une
     ligne, la pastille devenue 2x plus haute que large donnait une forme
     de capsule étirée/déformée (repéré par Yacine, capture à l'appui).
     nowrap force chaque pastille à rester sur une seule ligne quelle que
     soit la largeur ; si la ligne entière manque de place, c'est la
     PASTILLE ENTIÈRE qui passe à la ligne suivante (voir flex-wrap sur
     .wizard-radio-row), jamais son texte qui se coupe en interne. */
  white-space: nowrap;
}
.chip-filter.active {
  border-color: var(--tag-alimentaire);
  color: var(--tag-alimentaire);
  background: rgba(180, 142, 240, 0.12);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13px;
  font-family: inherit; /* v5.166 — un <button class="btn"> gardait la police système du navigateur, contrairement à un <a class="btn"> */
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.btn:disabled:active { transform: none; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); border-color: var(--accent); }

.btn-danger { background: rgba(239, 90, 90, 0.14); color: var(--status-entretien_2); border-color: rgba(239,90,90,0.3); }
.btn-danger:hover { background: rgba(239, 90, 90, 0.22); }

.btn-sm { padding: 6px 11px; font-size: 12px; }

.content { padding: 20px 24px 40px; flex: 1; min-width: 0; position: relative; }

/* v5.74 — enveloppe le contenu réel de .content (tout {% block content %}
   de base.html) pour rester systématiquement au-dessus du calque
   d'étoiles filantes ci-dessous (.app-stars-container), quel que soit son
   propre contenu (cartes, modales de type quick-view...).
   Un z-index explicite ici en fait un contexte d'empilement à part
   entière — TOUT son contenu (y compris une .modal-overlay à z-index:50,
   voir plus bas, et tout élément position:sticky comme .customisation-
   preview) se retrouve alors plafonné à CE z-index face au reste de la
   page, quelle que soit sa propre valeur. Posé à 10 le temps de la v5.77
   pour que les pop-up recouvrent la topbar (z-index:5), ça faisait aussi
   remonter au même niveau des éléments sticky bien plus anodins, qui se
   sont mis à chevaucher la topbar au défilement. Reposé ici à 1 — tout
   juste ce qu'il faut pour dépasser les étoiles (z-index:0) — puisque les
   pop-up sont maintenant déplacées hors de .content-inner en JS avant
   d'être affichées (voir templates/base.html) : leur propre z-index:50 se
   compare alors directement à celui de la topbar sans passer par ce
   plafond. */
.content-inner { position: relative; z-index: 1; min-width: 0; }

/* Correctif v5.74.1 — .content-inner s'intercale désormais entre .content
   et {% block content %} sur TOUTES les pages (voir templates/base.html).
   Sur les pages "no-scroll" (ex. kanban.html, voir body.no-scroll .content
   ci-dessus), .content est un conteneur flex qui transmet sa hauteur à
   .kanban-board via flex:1 + min-height:0 — sans ce même relais posé sur
   .content-inner, la chaîne flex était coupée par ce nouveau niveau
   intermédiaire, faisant déborder la page (cadrage horizontal ET vertical)
   au lieu de contenir le tableau Kanban dans la hauteur de l'écran. */
body.no-scroll .content-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Étoiles filantes (fond décoratif) ----------
   Règles partagées entre la landing page (templates/landing.html, toujours
   actives) et le fond de la zone de contenu de l'appli (templates/
   base.html, v5.74 — uniquement si settings.shooting_stars_enabled est
   actif, jamais sur .sidebar/.topbar). Position et cadence ne sont plus
   fixées ici (retiré : règles :nth-child() + animation infinite) : elles
   sont posées dynamiquement par static/js/shooting-stars.js, qui relance
   chaque étoile avec de nouvelles valeurs aléatoires à chaque fin de
   trajectoire. Couleur : blanche par défaut (thèmes sombres, et toujours
   sur la landing page qui ne porte jamais body.theme-light), noire en
   contraste sur les thèmes clairs (voir body.theme-light plus bas). */
.stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transform: rotate(-45deg);
}

/* Calque d'étoiles côté appli (v5.74, correctif v5.75) : même principe que
   .stars-container, mais confiné à l'intérieur de .content (position:
   relative ci-dessus) au lieu de la landing page entière — jamais superposé
   au menu latéral. Contrairement à .stars-container (dont l'ancêtre
   .landing-wrap porte déjà overflow:hidden sans transform), .app-stars-
   container EST cet ancêtre-là : il reste donc lui-même NON transformé,
   avec overflow:hidden, pour découper exactement dans le rectangle de
   .content — la rotation -45deg (nécessaire à la trajectoire diagonale)
   est reportée sur .app-stars-inner, son enfant. Un élément qui porte à la
   fois overflow:hidden ET sa propre transform se découpe seulement APRÈS
   rotation, ce qui laissait déborder les étoiles sur le menu latéral. */
.app-stars-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.app-stars-inner {
  position: absolute;
  inset: 0;
  transform: rotate(-45deg);
}

.shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.8), transparent);
  border-radius: 50%;
  opacity: 0;
  /* Pas de "infinite" (v5.74) : une seule trajectoire par lancement, JS
     relance à la fin (voir shooting-stars.js) — nécessaire pour que
     l'événement "animationend" se déclenche (il ne se déclenche jamais sur
     une animation infinite). */
  animation: shooting linear;
  animation-fill-mode: forwards;
}

.shooting-star::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px #ffffff;
}

/* Contraste automatique (v5.74) — uniquement pour le calque appli
   (.app-stars-container), jamais pour la landing page qui reste toujours
   sur son fond sombre "espace" quel que soit le thème choisi dans l'appli. */
body.theme-light .app-stars-container .shooting-star {
  background: linear-gradient(90deg, rgba(20,20,20,0.8), transparent);
}
body.theme-light .app-stars-container .shooting-star::before {
  background: #141414;
  box-shadow: 0 0 8px #141414;
}

@keyframes shooting {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 0; }
  100% { transform: translateX(-1500px); opacity: 0; }
}

/* ---------- Flash messages ---------- */
.flash {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--on-bg-text-color, var(--accent-strong));
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}

/* ---------- Kanban ---------- */
.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.kanban-column {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  min-width: 220px;
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

body.no-scroll .kanban-column { height: 100%; }
body:not(.no-scroll) .kanban-column { max-height: calc(100vh - 130px); }

.kanban-column.drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 10px;
}

.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.kanban-column-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  flex: 1;
}

.column-count {
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-surface-2);
  padding: 2px 8px;
  border-radius: 999px;
}

.column-sort {
  width: 100%;
  margin: 0 14px 10px;
  width: calc(100% - 28px);
  font-size: 11.5px;
  padding: 5px 8px;
}

.entretien-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.kanban-cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.column-resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
}
.column-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  width: 2px;
  height: 100%;
  background: transparent;
  transition: background 0.15s ease;
}
.column-resize-handle:hover::after,
.column-resize-handle.resizing::after {
  background: var(--accent);
}

.job-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: grab;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  position: relative;
}
.job-card:hover { border-color: var(--accent); box-shadow: var(--shadow-card), inset 0 0 8px 3px rgba(255,255,255,0.18); }
.job-card:active { cursor: grabbing; }
.job-card.dragging { opacity: 0.4; }

/* Colonne "Sans suite" : filtre grisé sur toute la tuile pour bien marquer
   le statut d'offre "raté" — combiné à la perte de la radiance colorée sur
   le tag de score (voir job-score-badge / kanban.html). */
.job-card-sans-suite { filter: grayscale(0.9); opacity: 0.8; }
.job-card-sans-suite:hover { filter: grayscale(0.7); opacity: 0.92; }

.job-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.job-entreprise {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
}

.job-poste {
  color: var(--text-secondary);
  font-size: 12.5px;
  margin-bottom: 8px;
  line-height: 1.35;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
}

.pill-alimentaire { color: var(--tag-alimentaire); border-color: rgba(180,142,240,0.4); }
.pill-fake { color: var(--tag-fake); border-color: rgba(79,209,197,0.4); }
.pill-refus { color: var(--status-entretiens_suivants); border-color: rgba(239,90,90,0.4); }
.pill-sans-reponse { color: var(--text-muted); border-color: var(--border); }
.pill-accepte { color: var(--status-offre); border-color: rgba(47,209,128,0.4); background: rgba(47,209,128,0.1); font-weight: 700; }
.pill-en-attente { color: var(--status-premier_entretien); border-color: rgba(245,165,36,0.4); background: rgba(245,165,36,0.1); font-weight: 700; }

/* ---------- Calendrier ---------- */
.calendar-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.calendar-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-cell {
  min-width: 0;   /* v7.61 — les cases ne forcent plus la largeur de la page sur mobile */
  overflow: hidden;
  min-height: 90px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-cell-outside { background: transparent; }
.calendar-cell-outside .calendar-day-num { color: var(--text-muted); font-weight: 500; }
.calendar-cell-outside .calendar-events { opacity: 0.7; }   /* v7.01 : un jour hors du mois reste lisible (contraste AA) */
.calendar-cell-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.calendar-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.calendar-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.calendar-event {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

@media (max-width: 760px) {
  .calendar-cell { min-height: 60px; }
}

.job-days {
  font-size: 11px;
  color: var(--text-muted);
}

.job-score-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  color: var(--text-faint);
  margin-left: auto;
  cursor: help;
}

.job-score-radiance-green { color: #4ade80; animation: pulse-score-green 3s infinite; }
.job-score-radiance-yellow { color: #facc15; animation: pulse-score-yellow 3s infinite; }
.job-score-radiance-orange { color: #fb923c; animation: pulse-score-orange 3s infinite; }
.job-score-radiance-red { color: #f87171; animation: pulse-score-red 3s infinite; }

/* v5.158 — bouton entier "vert radiant" (pas seulement le texte) : même
   glow pulsé que job-score-radiance-green (pulse-score-green ci-dessous)
   mais sur un bouton pleine taille — le fond remplace la couleur de
   contraste du thème (--accent) plutôt que de s'y ajouter, pour que le
   bouton se distingue clairement comme "bon score" quel que soit le thème
   actif. Utilisé à la place de "btn-primary" (pas en plus) sur les boutons
   "Suivant" du pipeline de génération de CV et de la nouvelle étape "Score
   de matching" du wizard candidature quand le score dépasse 70%. */
.btn-radiant-green { background: #15803d; border-color: #22c55e; color: #fff; animation: pulse-score-green 3s infinite; }
.btn-radiant-green:hover { filter: brightness(1.08); }

@keyframes pulse-score-green {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.35); }
  50% { box-shadow: 0 0 5px 1px rgba(74, 222, 128, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@keyframes pulse-score-yellow {
  0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.35); }
  50% { box-shadow: 0 0 5px 1px rgba(250, 204, 21, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}
@keyframes pulse-score-orange {
  0% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.35); }
  50% { box-shadow: 0 0 5px 1px rgba(251, 146, 60, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0); }
}
@keyframes pulse-score-red {
  0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.35); }
  50% { box-shadow: 0 0 5px 1px rgba(248, 113, 113, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .job-score-badge { animation: none; }
}

.job-dates {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
  font-size: 10px;
  color: var(--text-faint);
}

.relance-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--relance);
  position: absolute;
  top: 12px;
  right: 32px;
  box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.6);
  animation: pulse-relance 2.4s infinite;
  cursor: help;
}

.relance-dot::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: 8px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  z-index: 30;
}

.relance-dot:hover::after {
  opacity: 1;
}

@keyframes pulse-relance {
  0% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(251, 113, 133, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0); }
}

.job-card-relance {
  animation: pulse-relance-border 2.4s infinite;
}

@keyframes pulse-relance-border {
  0% { box-shadow: inset 0 0 0 0 rgba(251, 113, 133, 0.65); }
  50% { box-shadow: inset 0 0 14px 5px rgba(251, 113, 133, 0.55); }
  100% { box-shadow: inset 0 0 0 0 rgba(251, 113, 133, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .relance-dot, .job-card-relance { animation: none; }
}

.pin-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  opacity: 0.15;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.job-card:hover .pin-btn { opacity: 0.7; }
.pin-btn:hover { opacity: 1 !important; background: var(--bg-surface); }
.pin-btn-active { opacity: 1; background: var(--accent-soft); }
.job-card:hover .pin-btn-active { opacity: 1; background: var(--accent-soft); }

.job-card-pinned {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.job-card-link {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--accent);
}

/* ---------- Admin / gestion de masse ---------- */
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  /* "auto" plutôt que "hidden" : garde le rognage des coins arrondis quand
     rien ne déborde (comportement identique à avant sur desktop), mais
     laisse le tableau défiler horizontalement au lieu d'être tronqué sur
     un écran étroit (entreprises.html, job_boards.html, dashboard.html —
     gestion_donnees.html avait déjà .admin-table-wrap pour ça). */
  overflow: auto;
}

.admin-table-wrap { overflow-x: auto; }

/* Lignes alternées (normal/fort) — appliqué globalement à toutes les listes
   similaires (tableaux ET listes de type .email-row dans une .settings-card),
   désactivable dans Customiser son interface > Apparence. Le fond est posé
   sur les <td> (pas <tr>) car l'arrondi de bordure ne s'applique pas de
   façon fiable sur une ligne de tableau — seules les cellules de bord
   reçoivent l'arrondi, pour un effet "pilule" propre par ligne.
   v5.87 — CORRIGÉ : ces règles utilisaient une surcouche blanche fixe
   (rgba(255,255,255,...)), pensée uniquement pour un fond sombre — sur un
   thème "fond clair" (le thème clair par défaut ou un thème custom clair),
   du blanc à faible opacité sur un fond déjà blanc/clair est quasi invisible
   (contraste cassé, signalé par Yacine). Remplacé par var(--bg-surface-2)
   et var(--border), qui sont déjà redéfinies par thème (voir body.theme-light
   plus haut) et donnent un contraste réel quel que soit le thème actif. */
body:not(.no-zebra) table tbody td { border-bottom: none; }
body:not(.no-zebra) table tbody tr:nth-child(even) td { background: var(--bg-surface-2); }
body:not(.no-zebra) table tbody tr:nth-child(even) td:first-child { border-radius: 8px 0 0 8px; }
body:not(.no-zebra) table tbody tr:nth-child(even) td:last-child { border-radius: 0 8px 8px 0; }
body:not(.no-zebra) table tbody tr:nth-child(odd) td { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body:not(.no-zebra) table tbody tr:nth-child(odd) td:first-child { border-left: 1px solid var(--border); border-radius: 8px 0 0 8px; }
body:not(.no-zebra) table tbody tr:nth-child(odd) td:last-child { border-right: 1px solid var(--border); border-radius: 0 8px 8px 0; }
body:not(.no-zebra) table tbody tr:hover td { background: var(--bg-surface-hover); }
body:not(.no-zebra) .settings-card .email-row:nth-child(even) { background: var(--bg-surface-2); border-radius: 8px; }
body:not(.no-zebra) .settings-card .email-row:nth-child(odd) { border: 1px solid var(--border); border-radius: 8px; }
/* v5.87 — même liste zebra, appliquée aux lignes de la page "Bibliothèques
   suggérées" (voir .suggested-lib-row et templates/keyword_libraries.html). */
body:not(.no-zebra) .settings-card .suggested-lib-row:nth-child(even) { background: var(--bg-surface-2); border-radius: 8px; }
body:not(.no-zebra) .settings-card .suggested-lib-row:nth-child(odd) { border: 1px solid var(--border); border-radius: 8px; }

.admin-table { table-layout: fixed; width: 100%; min-width: 920px; }
.admin-table .col-check { width: 3%; }
.admin-table .col-compte { width: 11%; }
.admin-table .col-entreprise { width: 16%; }
.admin-table .col-poste { width: 16%; }
.admin-table .col-icons { width: 9%; }
.admin-table .col-statut { width: 12%; }
.admin-table .col-date { width: 10%; }
.admin-table .col-salaire { width: 8%; }
.admin-table .col-tags { width: 10%; }
.admin-table .col-action { width: 6%; }
.admin-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-table thead th { white-space: normal; line-height: 1.25; }
.admin-table .status-badge { font-size: 10px; padding: 3px 7px; }
.admin-table .btn { padding: 4px 8px; font-size: 11.5px; }

.vector-icons { display: inline-flex; align-items: center; gap: 4px; }
.vec-icon { font-size: 12px; opacity: 0.2; filter: grayscale(1); }
.vec-icon.vec-on { opacity: 1; filter: grayscale(0); }
.match-score-mini {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-strong);
  margin-left: 2px;
}

table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }

thead th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}

tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-primary);
  vertical-align: middle;
}

tbody tr:hover { background: var(--bg-surface-hover); }

.status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

.bulk-bar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 640px;
}

/* ---------- Layout détail candidature (formulaire + offre figée) ---------- */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(380px, 620px) 1fr;
  gap: 20px;
  align-items: start;
  min-width: 0;
}

.detail-layout > * { min-width: 0; }

@media (max-width: 980px) {
  .detail-layout { grid-template-columns: 1fr; }
}

.offer-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 420px;
}

.offer-panel.offer-tools-collapsed .offer-tools {
  display: none;
}

.offer-panel-controls {
  display: flex;
  gap: 6px;
}
.offer-panel-controls .btn {
  white-space: nowrap;
}

.cv-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 16px;
}

.cv-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.cv-tile:hover { border-color: var(--accent); }

.cv-tile-preview {
  height: 324px;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.cv-tile-preview embed {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cv-tile-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.cv-tile-preview-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
  font-size: 28px;
  color: var(--text-muted);
}

.cv-tile-title {
  font-size: 11.5px;
  font-weight: 600;
  padding: 8px 10px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-tile-sub {
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 10px 10px;
}

.cv-full-viewer {
  width: 100%;
  height: calc(100vh - 140px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.home-tile-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: stretch;
}

.home-tile {
  /* Largeurs en parts flexibles (plutôt qu'en max-width fixe en pixels) pour
     que la rangée de tuiles remplisse toujours 100% de la largeur — comme
     les sections en dessous (.settings-card, qui n'ont pas de max-width) —
     au lieu de s'arrêter à une somme de pixels fixes qui ne correspond à la
     largeur réelle de l'écran que par coïncidence. Ratios calqués sur les
     anciennes largeurs (260px de base) pour garder les proportions actuelles. */
  flex: 2 1 0;
  min-height: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
a.home-tile:hover { border-color: var(--accent); cursor: pointer; }

/* Tuile "Créer une candidature" : couleur d'accent du compte (v6.16 : jaune
   par défaut, texte en gris foncé réglable) — plus de bleu fixe. */
.home-tile-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, black));
  border-color: var(--accent);
  color: var(--on-accent);
  /* 520px de base → ratio 4 (contre 2 pour les tuiles de comptage) */
  flex: 4 1 0;
  min-height: 220px;
}
.home-tile-primary .home-tile-icon { font-size: 40px; }
.home-tile-primary .home-tile-title { font-size: 22px; }
.home-tile-primary .home-tile-sub { font-size: 14px; color: var(--on-accent); opacity: 0.85; }

.home-tile-icon { font-size: 24px; margin-bottom: 8px; }
.home-tile-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.home-tile-number { font-size: 40px; line-height: 1; font-family: var(--font-display); }
.home-tile-sub { font-size: 12px; color: var(--text-secondary); }

/* ---------- Thème "espace" (fond d'écran alternatif) ---------- */
body.theme-espace .content {
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--espace-overlay-color, #0a0a19) 78%, transparent),
      color-mix(in srgb, var(--espace-overlay-color, #0a0a19) 78%, transparent)
    ),
    var(--bg-global, url("/static/img/background_global_v1.jpg"));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* v5.199 — autres photos de fond (Customisation > Thème de fond) : même
   mécanisme, image et opacité de la superposition propres à chaque thème. */
body.theme-bg-galaxie .content,
body.theme-bg-galaxie_claire .content {
  --espace-alpha: 55%;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--espace-overlay-color, #0a0a19) var(--espace-alpha), transparent),
      color-mix(in srgb, var(--espace-overlay-color, #0a0a19) var(--espace-alpha), transparent)
    ),
    var(--bg-photo);
}
body.theme-bg-galaxie .content { --bg-photo: var(--bg-galaxie, url("/static/img/background_decouvrir.jpg")); }
body.theme-bg-galaxie_claire .content { --bg-photo: var(--bg-galaxie-claire, url("/static/img/background_decouvrir_clair.jpg")); --espace-alpha: 62%; }

.right-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.documents-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.doc-type-group {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.doc-type-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.doc-type-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.doc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.doc-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12.5px;
}
.doc-chip a {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-chip a:hover { color: var(--accent-strong); }

.doc-delete-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.doc-delete-btn:hover { color: var(--status-entretiens_suivants); }

.doc-upload-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.doc-upload-form input[type=file] {
  flex: 1;
  font-size: 11.5px;
  color: var(--text-secondary);
  min-width: 0;
}

/* ---------- Matching CV <-> offre ---------- */
.matching-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.match-result {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}

.match-score-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.match-score-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--accent-strong);
}

.match-score-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.match-commentary {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
}

.match-kw-block { margin-bottom: 12px; }

.match-kw-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.match-kw-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.match-kw-ok { color: var(--status-offre); border-color: rgba(47, 209, 128, 0.35); }
.match-kw-missing { color: var(--status-entretiens_suivants); border-color: rgba(239, 90, 90, 0.35); }

.match-history {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.match-history-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.match-history-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  margin-bottom: 12px;
  padding: 4px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
}
.match-history-bar-wrap {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-width: 4px;
}
.match-history-bar-pct {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.match-history-bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: opacity 0.15s ease;
}
.match-history-bar-wrap:hover .match-history-bar { opacity: 0.7; }
.match-history-list {
  max-height: 160px;
  overflow-y: auto;
  font-size: 11.5px;
}
.match-history-list .email-row { padding: 5px 0; font-size: 11.5px; }

.match-score-bar-track {
  background: var(--bg-surface-2);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.match-score-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.ats-finding {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border-soft);
}
.ats-finding-warning { background: rgba(239,90,90,0.08); border-color: rgba(239,90,90,0.3); }
.ats-finding-info { background: rgba(76,141,255,0.08); border-color: rgba(76,141,255,0.3); }
.ats-finding-ok { background: rgba(47,209,128,0.08); border-color: rgba(47,209,128,0.3); }
.ats-finding-title { font-weight: 700; font-size: 12.5px; margin-bottom: 4px; }
.ats-finding-detail { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 0; }

/* ---------- Capture manuelle image/texte ---------- */
.manual-capture-toggle {
  display: flex;
  gap: 6px;
}

#manual-texte-zone textarea { width: 100%; }

.markdown-improve-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.markdown-improve-row .markdown-form button { width: 100%; }

/* ---------- Page Matching CV autonome ---------- */
/* v5.84 — bannière "pas de bibliothèque de mots-clés", visible en haut de la
   page Matching quand le compte n'a aucune bibliothèque créée (voir aussi la
   pop-up équivalente sur le bouton "Extraire les mots-clés"). */
.no-library-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--text-primary);
}
.matching-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.matching-tab {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-soft);
  cursor: pointer;
}
.matching-tab.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.matching-tab.disabled { opacity: 0.4; cursor: default; }

#lettre-result-area {
  width: 100%;
  resize: vertical;
  font-family: var(--font-body);
  color: var(--text-primary);
}

.cv-source-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.cv-library-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.cv-library-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
}
.cv-library-item:hover { border-color: var(--accent); }
.cv-library-item input { flex-shrink: 0; }
.cv-library-name { font-weight: 600; color: var(--text-primary); }
.cv-library-context { color: var(--text-muted); font-size: 11.5px; margin-left: auto; white-space: nowrap; }

/* ---------- Dashboard ---------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 18px;
  text-align: center;
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
}

.kpi-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 860px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
}

.dash-grid-chart {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .dash-grid-chart { grid-template-columns: 1fr; }
}

.dash-side-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.chart-svg-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow-x: auto;
}

.chart-svg-wrap .line-chart {
  height: 100%;
  flex-shrink: 0;
}

.link-btn {
  background: transparent;
  border: none;
  color: var(--accent-strong);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.link-btn:hover { color: var(--accent-strong); text-decoration: underline; }

.dash-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.dash-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.hbar-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hbar-row {
  display: grid;
  grid-template-columns: 120px 1fr 70px;
  align-items: center;
  gap: 10px;
}

.hbar-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hbar-track {
  background: var(--bg-surface-2);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.hbar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.hbar-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}
.hbar-pct { color: var(--text-muted); font-weight: 400; }

.line-chart {
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 230;
  overflow: visible;
  display: block;
}

.line-chart-small {
  aspect-ratio: 700 / 210;
}

.line-chart-value {
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--text-primary);
  font-family: var(--font-body);
}

.line-chart-value-halo {
  fill: none;
  stroke: var(--bg-surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.line-chart-label {
  font-size: 10.5px;
  fill: var(--text-muted);
  font-family: var(--font-body);
}

.line-chart-axis-label {
  font-size: 10px;
  fill: var(--text-muted);
  font-family: var(--font-body);
}

.chart-gridline {
  stroke: var(--border-soft);
  stroke-width: 1;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 12px 0 4px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  user-select: none;
}
.legend-item:hover { background: var(--bg-surface-2); }
.legend-item.legend-isolated { border-color: var(--accent); color: var(--text-primary); font-weight: 600; background: var(--accent-soft); }
.legend-item.legend-dimmed { opacity: 0.4; }

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.capture-form {
  display: flex;
  gap: 8px;
}
.capture-form input { flex: 1; }

.capture-url-row {
  display: flex;
  gap: 8px;
}
.capture-url-row input { flex: 1; }

.capture-actions {
  display: flex;
  gap: 8px;
}
.capture-actions .capture-form { flex: 1; }
.capture-actions .capture-form button { width: 100%; justify-content: center; }

.paste-zone {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  cursor: text;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.paste-zone:hover, .paste-zone:focus {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--accent-soft);
  outline: none;
}

.empty-hint {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.snapshot-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.snapshot-tab {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.snapshot-tab.active { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }

.snapshot-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.view-toggle { display: flex; gap: 6px; }
.view-mode-btn.active { border-color: var(--accent); color: var(--accent-strong); }
.period-mode-btn.active { border-color: var(--accent); color: var(--accent-strong); }
.view-toggle-separator { width: 1px; align-self: stretch; background: var(--border-soft); margin: 0 2px; }
.view-toggle-group { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.view-toggle-group-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }

.snapshot-viewer {
  flex: 1;
  /* v5.115 — la zone était minuscule en mode "Texte brut" : seul #snapshot-
     iframe déclarait un min-height (420px), sur lui-même — invisible dès
     qu'il est caché (display:none) pour laisser place au textarea. Le
     conteneur n'avait donc plus aucune hauteur garantie dans ce mode et
     s'effondrait à la taille des éléments empilés au-dessus (onglets,
     boutons de capture...) dans le panneau. min-height posé ici, sur le
     conteneur lui-même, s'applique aux deux modes. */
  min-height: 480px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  position: relative;
}

.live-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: var(--bg-surface);
}

#snapshot-iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: none;
  display: block;
}

#snapshot-text {
  margin: 0;
  padding: 14px;
  white-space: pre-wrap;
  color: #111;
  font-family: var(--font-body);
  font-size: 12.5px;
  height: 100%;
  overflow-y: auto;
  background: #fff;
  /* v5.114 — #snapshot-text est passé de <pre> (lecture seule) à
     <textarea> (édition + enregistrement automatique) : neutralise le
     rendu par défaut d'un textarea pour qu'il reste visuellement identique
     à l'ancien <pre>. v5.115 — resize:vertical (au lieu de none) : main-
     tenant que le contenu est éditable, autant laisser Yacine agrandir
     encore la zone à la souris s'il le souhaite, en plus du min-height
     généreux posé sur .snapshot-viewer ci-dessus. */
  border: none;
  resize: vertical;
  width: 100%;
  min-height: 480px;
  box-sizing: border-box;
  outline: none;
}

#snapshot-text-save-status {
  font-size: 11.5px;
  font-style: italic;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
}

/* .form-grid est utilisée telle quelle par plusieurs pages (fiche
   candidature, section Claude des Paramètres, contexte du wizard) — aucune
   d'elles ne gérait le mobile jusqu'ici, les deux colonnes se tassaient
   illisiblement sur un téléphone. Un seul correctif ici profite à toutes. */
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }

.form-field label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Switch on/off générique (v5.66, réglage Quick View — réutilisable pour
   n'importe quel futur réglage booléen à bascule immédiate) */
.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  /* v5.166 — piste "off" plus contrastée (était --border-soft, presque
     invisible sur les fonds --bg-surface-2 des groupes de réglages). */
  background: color-mix(in srgb, var(--text-muted) 45%, var(--bg-surface-2));
  border-radius: 999px;
  transition: background 0.15s ease;
}

.switch-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.switch input:checked + .switch-slider {
  background: var(--accent);
}

.switch input:checked + .switch-slider::before {
  transform: translateX(18px);
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--on-bg-text-color, var(--text-primary));
}

.interlocuteur-row {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.interlocuteur-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.interlocuteur-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  min-width: 0;
}
@media (max-width: 560px) {
  .interlocuteur-row-top { grid-template-columns: 1fr 1fr; }
}

.interlocuteur-coord-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.interlocuteur-coord-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 10px;
  align-items: end;
  min-width: 0;
}
@media (max-width: 560px) {
  .interlocuteur-coord-row { grid-template-columns: 1fr; }
}

.note-input-wrap {
  position: relative;
  display: flex;
  min-width: 0;
}
.note-input-wrap input { padding-right: 30px; }
.note-expand-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
}
.note-expand-btn:hover { color: var(--accent-strong); background: var(--bg-surface-2); }

/* ---------- Popup générique (note longue) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 15, 0.72);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 100%;
  max-width: 660px;
  box-shadow: 0 20px 60px -12px rgba(0,0,0,0.6);
}

.modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.modal-header .modal-title { margin-bottom: 0; }
.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  margin-left: 12px;
}
.modal-close-btn:hover { color: var(--text-primary); }

.modal-box textarea {
  width: 100%;
  resize: vertical;
  min-height: 180px;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  row-gap: 10px;
  margin-top: 14px;
}

/* Modales avec beaucoup d'actions (ex: détail entretien) — une ligne par
   type de bouton plutôt qu'un seul flex-wrap qui les mélange tous, pour
   garder un regroupement logique lisible (candidature/préparation,
   export calendrier, formulaire). */
.modal-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.modal-actions-separator {
  height: 2px;
  background: var(--accent-strong);
  border-radius: 2px;
  margin: 16px 0;
  opacity: 0.7;
}
.modal-actions-large {
  display: flex;
  gap: 10px;
}
.btn-lg { padding: 13px 22px; font-size: 14.5px; }

/* v5.186 — gros bouton d'action « Générer … » (CV, dossier de compétences, lettre) :
   plus large et plus lisible que .btn-sm / .btn-lg, utilisé dans le bandeau
   du haut ET dans les formulaires complets. */
.btn-generate {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 30px; min-width: 260px; font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  border-radius: 10px; box-shadow: 0 2px 10px rgba(59, 130, 246, 0.35); white-space: nowrap;
}
.btn-generate .btn-generate-icon { font-size: 1.2em; line-height: 1; }
.topbar .btn-generate { padding: 10px 24px; min-width: 240px; }
@media (max-width: 700px) {
  .btn-generate, .topbar .btn-generate { width: 100%; min-width: 0; white-space: normal; }
}
.cv-mission-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 8px 0 3px; }

/* Pop-up "Quick view" du Kanban — v5.167 : 3 colonnes (offre / CV utilisé
   pleine hauteur / informations).
   v5.168 — géométrie entièrement dérivée de la largeur d'une colonne
   (--qv-col-w) : les 3 colonnes ont la même largeur que l'aperçu du CV, et
   la hauteur de la modale est calculée pour que le cadre du CV soit
   EXACTEMENT au format A4 (plus de bande blanche). --qv-col-w est le plus
   petit de : la largeur A4 correspondant à la hauteur max (88vh / 820px) et
   le tiers de la largeur disponible (96vw) — la modale rétrécit en gardant
   ses proportions. Hauteurs fixes : bandeau (--qv-banner-h), libellé de
   colonne (--qv-label-h), marges (--qv-pad, --qv-gap). */
.qv-box {
  --qv-pad: 26px; --qv-gap: 26px; --qv-banner-h: 64px; --qv-label-h: 26px;
  --qv-chrome-h: calc(2 * var(--qv-pad) + var(--qv-banner-h) + var(--qv-gap) + var(--qv-label-h));
  --qv-col-w: min(calc((min(88vh, 820px) - var(--qv-chrome-h)) * 0.7071), calc((96vw - 2 * var(--qv-pad) - 2 * var(--qv-gap)) / 3));
  --qv-cv-h: calc(var(--qv-col-w) / 0.7071);
  position: relative;
  /* + 2px : la bordure de .modal-box (border-box) */
  width: calc(3 * var(--qv-col-w) + 2 * var(--qv-gap) + 2 * var(--qv-pad) + 2px);
  max-width: none;
  height: calc(var(--qv-cv-h) + var(--qv-chrome-h) + 2px);
  padding: var(--qv-pad);
  display: flex;
  flex-direction: column;
  gap: var(--qv-gap);
}
.qv-close-btn { position: absolute; top: 10px; right: 12px; margin-left: 0; z-index: 2; }

/* Bandeau : statut à gauche, poste au centre, entreprise à droite */
.qv-banner {
  height: var(--qv-banner-h); flex-shrink: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 18px;
  padding: 0 34px 0 18px; border-radius: 14px;
  background: var(--bg-surface-2); border: 1px solid var(--border-soft);
}
.qv-banner-status { justify-self: start; min-width: 0; }
.qv-banner-poste {
  justify-self: center; text-align: center; min-width: 0; max-width: 100%;
  font: 800 20px/1.25 var(--font-display); color: var(--text-primary);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.qv-banner-poste.is-empty { color: var(--text-muted); font-weight: 600; font-size: 16px; }
.qv-banner-company { justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
.qv-title {
  font: 700 15px/1.3 var(--font-display); color: var(--text-secondary); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.qv-logos { display: flex; gap: 6px; flex-shrink: 0; }
.qv-logos img {
  width: 38px; height: 38px; object-fit: contain; border-radius: 9px;
  background: #fff; border: 1px solid var(--border-soft); padding: 3px;
}
.qv-status {
  --qv-status-color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  color: var(--qv-status-color);
  background: color-mix(in srgb, var(--qv-status-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--qv-status-color) 45%, transparent);
}
.qv-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--qv-status-color); flex-shrink: 0; }

.qv-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, var(--qv-col-w));
  gap: var(--qv-gap);
}
.qv-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.qv-col-label {
  height: var(--qv-label-h); flex-shrink: 0; box-sizing: border-box; padding-bottom: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; line-height: 18px;
  color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qv-cv-name { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-secondary); }

/* Colonne 1 — offre */
.qv-offer {
  flex: 1; min-height: 0; overflow-y: auto;
  background: var(--bg-surface-2); border: 1px solid var(--border-soft); border-radius: 10px;
}
.qv-offer-text { padding: 14px 16px; white-space: pre-wrap; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.qv-offer-img { display: block; width: 100%; height: auto; }
.qv-offer-link { margin-top: 10px; font-size: 12.5px; color: var(--accent-strong); flex-shrink: 0; }
.qv-offer-link:hover { text-decoration: underline; }

/* Colonne 2 — aperçu du CV : cadre au format A4 exact (hauteur = --qv-cv-h),
   l'image le remplit (cover, ancrée en haut) : pas de liseré blanc même si la
   miniature n'est pas pile au ratio A4 (arrondi de rendu). */
.qv-cv-frame {
  height: var(--qv-cv-h); width: 100%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.75);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qv-cv-frame[href]:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.8); }
.qv-cv-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.qv-cv-frame .qv-empty { color: #8b93a8; }
.qv-empty { font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.6; padding: 16px; display: block; margin: auto; }

/* Colonne 3 — scores (2 anneaux sur toute la largeur), informations, actions */
.qv-col-info { overflow: hidden; }
.qv-scores {
  /* toute la largeur de la colonne (2 anneaux), plafonnée à ~1/4 de la
     hauteur utile pour laisser la place aux informations sur petit écran */
  --qv-ring: min(calc((var(--qv-col-w) - 20px) / 2), calc(var(--qv-cv-h) * 0.26), 170px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; flex-shrink: 0;
}
.qv-scores:has(> :only-child) { --qv-ring: min(calc(var(--qv-col-w) * 0.55), 170px); grid-template-columns: minmax(0, 1fr); justify-items: center; }
.qv-score { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.qv-scores .score-ring { --size: var(--qv-ring); --thick: calc(var(--size) * 0.085); --ring-inner: var(--bg-surface); }
/* v5.169 — emplacement du score de matching quand il n'existe pas encore :
   bouton "Lancer le matching" (offre + CV prêts) ou état indisponible, au
   même gabarit qu'un anneau. */
.qv-match-slot {
  width: var(--qv-ring); height: var(--qv-ring); border-radius: 50%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 0 14%; text-align: center; text-decoration: none;
  border: 2px dashed var(--border); color: var(--text-muted);
}
.qv-match-slot-icon { font-size: calc(var(--qv-ring) * 0.16); line-height: 1; }
.qv-match-slot-text { font: 700 calc(max(11px, var(--qv-ring) * 0.085))/1.3 var(--font-body); }
.qv-match-slot.is-ready {
  border: none; color: var(--on-accent); cursor: pointer;
  background: radial-gradient(circle at 30% 25%, var(--accent-strong), var(--accent) 60%, color-mix(in srgb, var(--accent) 65%, black));
  box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: qv-match-ready-pulse 2.4s ease-in-out infinite;
}
.qv-match-slot.is-ready:hover, .qv-match-slot.is-ready:focus-visible {
  transform: scale(1.04); box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--accent) 90%, transparent);
}
@keyframes qv-match-ready-pulse {
  0%, 100% { box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 0 10px transparent; }
}
@media (prefers-reduced-motion: reduce) { .qv-match-slot.is-ready { animation: none; } }
.qv-score-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
/* seules les informations défilent : anneaux en haut et boutons en bas restent visibles */
.qv-fields { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; margin-right: -6px; }
.qv-fields.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
.qv-field { display: flex; flex-direction: column; gap: 3px; }
.qv-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--text-muted); }
.qv-field-value { font-size: 14.5px; font-weight: 600; color: var(--text-primary); line-height: 1.45; }
.qv-field-value .pill { font-size: 12.5px; font-weight: 600; vertical-align: middle; }
.qv-muted { color: var(--text-muted); font-weight: 500; }
/* Entretiens : encadré listant chaque entretien daté */
.qv-itw-list {
  list-style: none; margin: 8px 0 0; padding: 8px 12px;
  border-radius: 10px; background: var(--bg-surface-2); border: 1px solid var(--border-soft);
  display: flex; flex-direction: column;
}
.qv-itw {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 6px 0;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
}
.qv-itw + .qv-itw { border-top: 1px solid var(--border-soft); }
.qv-itw sup { font-size: 0.7em; }
.qv-itw.is-upcoming { color: var(--text-primary); font-weight: 600; }
.qv-itw-lieu { font-size: 11.5px; color: var(--text-muted); }
.qv-itw-lieu::before { content: "· "; }
.qv-itw-badge {
  margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  color: var(--accent-strong); background: var(--accent-soft);
}
.qv-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; flex-shrink: 0; }
.qv-actions .btn { justify-content: center; text-align: center; }

@media (max-width: 980px) {
  .qv-box {
    --qv-col-w: 100%; width: 96vw; height: auto; max-height: 92vh; overflow-y: auto; padding: 22px 18px;
  }
  .qv-banner { height: auto; grid-template-columns: 1fr; justify-items: start; gap: 8px; padding: 14px 40px 14px 16px; }
  .qv-banner-poste, .qv-banner-company { justify-self: start; text-align: left; }
  .qv-title { text-align: left; }
  .qv-grid { grid-template-columns: 1fr; flex: none; }
  .qv-offer { max-height: 260px; }
  .qv-cv-frame { height: auto; aspect-ratio: 210 / 297; width: min(100%, 420px); margin: 0 auto; }
  .qv-col-info, .qv-fields { overflow: visible; }
  .qv-scores, .qv-scores:has(> :only-child) { --qv-ring: 120px; }
}

/* ---------- Fenêtre de bienvenue au login (v5.69, re-design v5.70, durées v5.71) ---------- */
/* Overlay plein écran affiché juste après une connexion (voir app.py::
   inject_welcome_transition + templates/base.html) — 4 secondes en mode
   vidéo, 3 secondes en mode image (voir welcome_duration_ms côté
   template) — au-dessus des popups habituelles (z-index 50) pour bien
   s'afficher devant le contenu qui vient de charger derrière. Disparaît
   en fondu (classe .welcome-overlay-hide ajoutée en JS) puis est retiré
   du DOM.

   Structure en 3 couches (v5.70, pour supporter une vidéo/image de fond
   choisie dans Paramètres > Interface — transition_screens_mode) :
   1. .welcome-overlay-media (vidéo ou image, plein cadre, z-index 0)
   2. .welcome-overlay-scrim (voile sombre, dont l'opacité grimpe
      progressivement de 0% à 25% sur toute la durée d'affichage — pour
      laisser deviner le fond au lieu de l'assombrir instantanément ;
      animation-duration posée en inline par le template pour suivre
      welcome_duration_ms, la valeur ci-dessous n'est qu'un repli)
   3. .welcome-overlay-content (logo + texte, toujours au-dessus, z-index 2) */
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: #050810; /* filet de sécurité si la vidéo/l'image ne charge pas */
  color: #fff;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.welcome-overlay.welcome-overlay-hide { opacity: 0; pointer-events: none; }
.welcome-overlay-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.welcome-overlay-media-image {
  background-size: cover;
  background-position: center;
}
.welcome-overlay-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 40%, rgba(20, 24, 40, 0.97), rgba(6, 8, 16, 0.99));
  opacity: 0;
  animation: welcome-scrim-fade-in 3s ease forwards; /* repli — écrasé en inline par le template */
}
@keyframes welcome-scrim-fade-in {
  from { opacity: 0; }
  to { opacity: 0.25; }
}
.welcome-overlay-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 40px 20px;
}
/* Zoom du logo (v5.72) — .welcome-overlay-logo-zoom est le groupe qui
   grandit (transform: scale, 100% -> 450% sur la durée d'affichage) ; le
   halo blanc est un enfant absolument positionné à l'intérieur, donc il
   grandit avec le groupe tout en animant sa propre opacité (0% -> 80%)
   indépendamment — seul le logo zoome, le texte "Bienvenue..." en dessous
   (.welcome-overlay-title, hors de ce groupe) garde sa taille fixe. */
.welcome-overlay-logo-zoom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transform-origin: center center;
  animation-name: welcome-logo-zoom-in;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
/* v5.202 — zoom en 2 phases, calé sur la vidéo de connexion (4 s) :
   phase 1 : 0 % -> 20 % en 2 s (départ doux), phase 2 : 20 % -> 500 % en 2 s
   (accélération). Valeurs réglables ici : --wz-phase1 / --wz-phase2 (durées,
   la durée totale posée par le template doit en être la somme), --wz-mid
   (échelle atteinte à la fin de la phase 1) et --wz-end (échelle finale).
   Le point de bascule est à 50 % car les 2 phases durent autant ; si les
   durées changent, ajuster le pourcentage des keyframes en conséquence. */
.welcome-overlay-logo-zoom {
  --wz-mid: .2;
  --wz-end: 5;
  animation-timing-function: linear;
}
@keyframes welcome-logo-zoom-in {
  0%   { transform: scale(0); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  50%  { transform: scale(var(--wz-mid, .2)); animation-timing-function: cubic-bezier(.55,0,.9,.5); }
  100% { transform: scale(var(--wz-end, 5)); }
}
.welcome-overlay-logo-halo {
  position: absolute;
  inset: -10px -18px;
  border-radius: 999px;
  background: #ffffff;
  opacity: 0;
  z-index: 0;
  animation-name: welcome-logo-halo-fade-in;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
@keyframes welcome-logo-halo-fade-in {
  0%, 50% { opacity: 0; }
  100% { opacity: 0.8; }
}
.welcome-overlay-logo {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  opacity: 0.7;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
}
.welcome-overlay-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.35;
  max-width: 760px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
  /* Glisse vers le bas en même temps que le logo grossit (v5.73) : le zoom
     du logo se fait via transform (pas de redimensionnement réel de sa
     boîte), donc sans ce décalage le texte se ferait chevaucher. 92px =
     ~42px (moitié de la croissance du logo, qui grandit depuis son centre
     — .welcome-overlay-logo-zoom) + 50px de marge demandée en plus. */
  animation-name: welcome-title-slide-down;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
@keyframes welcome-title-slide-down {
  0%, 50% { transform: translateY(0); }
  100% { transform: translateY(var(--wz-shift, 105px)); } /* v5.204 : logo final à 500 % (~26 px par unité de zoom, comme avant à 450 % -> 92 px) */
}

/* ---------- Pop-up d'avertissement de fin de session (v5.69) ---------- */
/* Affichée SESSION_WARNING_LEAD_SECONDS avant l'expiration de la session
   (voir app.py::inject_session_watchdog_config) — plus grande qu'une
   popup habituelle (~50% de la largeur d'écran) pour bien capter
   l'attention, avec un unique bouton "Continuer" qui relance le compte à
   rebours via GET /auth/ping. */
.session-warning-box {
  max-width: 50vw;
  width: 50vw;
  min-width: 320px;
  padding: 40px 32px;
  text-align: center;
}
@media (max-width: 900px) {
  .session-warning-box { width: 92vw; max-width: 92vw; }
}
.session-warning-icon { font-size: 38px; margin-bottom: 6px; }
.session-warning-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 10px;
}
.session-warning-text {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 22px;
}
.session-warning-box .btn {
  width: 100%;
}

.settings-grid {
  columns: 2;
  column-gap: 20px;
}
.settings-grid .settings-section {
  break-inside: avoid;
  margin-bottom: 20px;
  display: inline-block;
  width: 100%;
}
.settings-grid .section-title { margin-top: 0; }
@media (max-width: 900px) {
  .settings-grid { columns: 1; }
}

.settings-section-wide { column-span: all; }

/* v5.201 — aperçus factices de l'onglet « Interface » des Paramètres
   (Quick View, étoiles filantes). Données fictives ; l'aperçu s'éteint
   (grisé + pastille « Désactivée ») quand le réglage est désactivé. */
.sq-demo, .ss-demo {
  position: relative; margin-top: 12px; border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--bg-page); overflow: hidden; transition: opacity .2s ease, filter .2s ease;
}
.sq-demo.is-off, .ss-demo.is-off { opacity: .45; filter: grayscale(1); }
.sq-off-tag {
  display: none; position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--border); color: var(--text-secondary);
}
.sq-demo.is-off .sq-off-tag, .ss-demo.is-off .sq-off-tag { display: inline-block; }
.sq-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
.sq-status { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--status-premier_entretien) 18%, transparent); color: var(--status-premier_entretien); }
.sq-poste { font-size: 13px; font-family: var(--font-display); }
.sq-company { font-size: 11.5px; color: var(--text-secondary); margin-right: 52px; }
.sq-grid { display: grid; grid-template-columns: 1fr 0.8fr 1fr; gap: 10px; padding: 12px 14px; }
.sq-col { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sq-label { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.sq-col > i, .sq-cv i { display: block; height: 6px; border-radius: 3px; background: var(--border); }
.sq-col > i.s, .sq-cv i.s { width: 62%; }
.sq-cv { aspect-ratio: 1 / 1.2; border-radius: 6px; background: #f4f6fb; padding: 8px; display: flex; flex-direction: column; gap: 5px; border-top: 8px solid var(--accent); }
.sq-cv i { background: #cfd5e4; }
.sq-score { font-size: 11px; color: var(--text-secondary); }
.sq-score b { color: var(--status-offre); }
.sq-bar { display: block; height: 5px; border-radius: 3px; background: var(--border); margin-top: 4px; overflow: hidden; }
.sq-bar u { display: block; width: 78%; height: 100%; background: var(--status-offre); }
.sq-field { font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; gap: 6px; }
.sq-field b { color: var(--text-primary); font-weight: 600; }
.sq-btns { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; }
.sq-btn { font-size: 9.5px; font-weight: 600; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); color: var(--text-secondary); }
.sq-btn.p { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ss-demo { height: 130px; display: flex; gap: 10px; align-items: center; padding: 0 16px; }
.ss-demo .app-stars-container { z-index: 0; }
.ss-demo-card { position: relative; z-index: 1; flex: 1; min-width: 0; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.ss-demo-card small { color: var(--text-secondary); font-size: 11px; }
.ss-demo.is-off .shooting-star { display: none; }

.settings-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.settings-hint {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 8px;
}

.settings-inline-form {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.keyword-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.keyword-pill-form { display: inline-block; }
.keyword-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.keyword-pill-remove {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.keyword-pill-remove:hover { opacity: 1; }

.email-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  flex-wrap: wrap;   /* v7.61 — les boutons passent à la ligne sur mobile au lieu de déborder */
  gap: 6px;
}
.email-row:last-child { border-bottom: none; }

/* v5.87 — lignes de la page "Bibliothèques suggérées" (même schéma que
   .email-row : liste de lignes dans une .settings-card, avec alternance de
   contraste — voir le bloc "Lignes alternées" plus haut dans ce fichier). */
.suggested-lib-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.suggested-lib-row:last-child { border-bottom: none; }
.suggested-lib-row .suggested-lib-name { font-weight: 600; }

/* ---------- Mode compact Kanban (bascule côté client, localStorage) ---------- */
#toggle-compact-btn.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }

.kanban-board.kanban-compact .job-card {
  padding: 7px 10px;
}
.kanban-board.kanban-compact .job-poste { display: none; }
.kanban-board.kanban-compact .job-meta { margin-top: 2px; }
.kanban-board.kanban-compact .job-entreprise { font-size: 12.5px; }
.kanban-board.kanban-compact .job-card { margin-bottom: 6px; }
.kanban-board.kanban-compact .pin-btn { top: 2px; right: 3px; width: 16px; height: 16px; font-size: 10px; }
.kanban-board.kanban-compact .relance-dot { top: 6px; right: 22px; }

/* ---------- Historique du parcours (mini timeline) ---------- */
.status-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-left: 4px;
}
.status-timeline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.status-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-timeline-label { font-weight: 600; flex: 1; }
.status-timeline-date { color: var(--text-muted); font-size: 11px; }

.page-title-big {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  margin-left: 16px;
  margin-right: auto;
  color: var(--on-bg-text-color, var(--text-primary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.page-title-created {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 12px;
}

/* ---------- Candidatures récentes (tuiles feuille) ---------- */
.recent-tile-grid {
  display: grid;
  gap: 12px;
}
.recent-tile-grid.zoom-compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.recent-tile-grid.zoom-etendu { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.recent-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px;
  transition: border-color 0.15s ease;
}
.recent-tile:hover { border-color: var(--accent); }

.recent-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 6px;
}
.recent-tile-header .status-badge { font-size: 9.5px; padding: 2px 6px; }
.recent-tile-date { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }

.recent-tile-entreprise {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-tile-poste {
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-tile-extra {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  font-size: 10.5px;
  color: var(--text-muted);
}

.zoom-compact .recent-tile-entreprise { font-size: 12px; }
.zoom-compact .recent-tile-poste { display: none; }
.zoom-compact .recent-tile-extra { display: none; }

.zoom-etendu .recent-tile { padding: 18px; }
.zoom-etendu .recent-tile-entreprise { font-size: 15px; }
.zoom-etendu .recent-tile-poste { white-space: normal; }

/* ---------- Recherches favorites : étoile + logos job board ---------- */
.favori-star-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  line-height: 1;
}
.favori-star-btn.active { color: #f5c518; }
.favori-star-btn:hover { opacity: 0.75; }

.jobboard-logo-mini {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 3px;
  vertical-align: middle;
}

.cv-usage-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}

/* ---------- Typage visuel PDF / ODT dans les bibliothèques de documents ---------- */
.cv-tile.doctype-pdf { border-color: rgba(239,90,90,0.55); }
.cv-tile.doctype-pdf:hover { border-color: rgba(239,90,90,0.85); }
.cv-tile.doctype-odt { border-color: rgba(76,141,255,0.55); }
.cv-tile.doctype-odt:hover { border-color: rgba(76,141,255,0.85); }
.cv-tile.doctype-txt { border-color: var(--border-soft); }

.doctype-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-size: 11px;
}
.doctype-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 2px;
}
.doctype-dot-pdf { background: rgba(239,90,90,0.85); }
.doctype-dot-odt { background: rgba(76,141,255,0.85); margin-left: 8px; }

.lm-texte-preview {
  white-space: pre-wrap;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  padding: 4px;
}

/* ---------- Sous-menu déroulant "Bibliothèques" dans la sidebar ---------- */
.nav-expand-btn {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.nav-expand-arrow { margin-left: auto; font-size: 20px; line-height: 1; transition: transform 0.15s ease; }
.nav-expand-btn.expanded .nav-expand-arrow { transform: rotate(180deg); }
.nav-submenu {
  padding-left: 30px;
  display: flex;
  flex-direction: column;
}
.nav-subitem {
  padding: 6px 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.nav-subitem:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.nav-subitem.active { color: var(--accent-strong); font-weight: 600; }

.sidebar-version {
  margin-top: auto;
  padding: 14px 12px 8px;
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
}

.calendar-event-libre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.calendar-event-delete {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}
.calendar-event-delete:hover { opacity: 1; }

.cv-tile-wrap { position: relative; }
.cv-tile-delete-form { position: absolute; top: 6px; right: 6px; }
.cv-tile-delete-btn {
  background: rgba(20,20,25,0.65);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cv-tile-wrap:hover .cv-tile-delete-btn { opacity: 1; }
.cv-tile-delete-btn:hover { background: rgba(239,90,90,0.85); }

/* v5.131 — suppression en masse (demande de Yacine, bibliothèques CV/LM/
   Autre) : case à cocher en haut à gauche de chaque tuile (symétrique du
   bouton de suppression individuelle en haut à droite), TOUJOURS visible
   (pas seulement au survol comme le bouton de suppression) pour que la
   sélection en cours reste lisible même la souris ailleurs.
   v5.134 — retour de Yacine : la case blanche/native se distinguait mal sur
   une tuile de fond clair (aperçu PDF blanc). Ajout d'un fond derrière la
   case, de la même couleur que le bas des tuiles (var(--bg-surface), celle
   de .cv-tile — .cv-tile-title/.cv-tile-sub n'ont pas de fond propre, ils
   héritent celui de la tuile). Ce fond est COLLÉ au coin haut-gauche réel
   de la tuile (top:0/left:0, plus le top:6px/left:6px flottant d'avant) et
   reprend le MÊME rayon d'arrondi que .cv-tile (var(--radius-md)) sur son
   coin haut-gauche uniquement — pour se fondre visuellement dans l'arrondi
   de la tuile plutôt que de flotter par-dessus avec son propre arrondi. Les
   3 autres coins (dont le bas-droite, demande explicite) restent à angle
   droit : border-radius: <haut-gauche> <haut-droite> <bas-droite>
   <bas-gauche>, donc seule la première valeur est non nulle. Taille 150% de
   la case (18px -> 27px), case centrée dedans (flex). */
.cv-tile-select-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 27px;
  height: 27px;
  background: var(--bg-surface);
  border-radius: var(--radius-md) 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-tile-select-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
.cv-bulk-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cv-bulk-actions-bar .cv-bulk-count {
  font-size: 13px;
  color: var(--text-muted);
}

.search-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.search-scope-row label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.badge-fait {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #2fd180;
  background: rgba(47,209,128,0.14);
  border: 1px solid rgba(47,209,128,0.4);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
}

/* Adresse email "Principale" (v5.62, voir blueprints/settings.py) — même
   gabarit que .badge-fait, coloré avec les tokens d'accent du thème */
.badge-principale {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  cursor: help;
}

/* Variante verte du badge "Principale" (v5.92) — même vert "succès" déjà
   utilisé ailleurs dans l'appli (statut Kanban "Offre", .pill-accepte),
   pour rester cohérent plutôt que d'inventer une nouvelle couleur. */
.badge-principale-verte {
  color: var(--status-offre);
  background: rgba(47,209,128,0.12);
  border-color: rgba(47,209,128,0.5);
}

/* Tuile de l'adresse principale (v5.92) — contour vert + séparation nette
   des autres adresses de la liste. Plus spécifique que les règles zebra
   ci-dessus (.settings-card .email-row:nth-child...) pour les prendre le
   pas dessus quel que soit son rang pair/impair dans la liste. */
.settings-card .email-row.email-row-principale {
  border: 1px solid rgba(47,209,128,0.5);
  background: rgba(47,209,128,0.07);
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 10px 12px;
}

.calendar-event-fait {
  background: rgba(47,209,128,0.16) !important;
  color: #2fd180 !important;
  border-color: rgba(47,209,128,0.5) !important;
}

.entretien-row {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.entretien-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.entretien-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  min-width: 0;
}
@media (max-width: 560px) {
  .entretien-row-top { grid-template-columns: 1fr 1fr; }
}
.entretien-lieu-detail { margin-top: 8px; }

.autocomplete-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.5);
}
.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.autocomplete-item:hover { background: var(--bg-surface-hover); }
.autocomplete-item img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; }
.autocomplete-item-noicon { font-size: 14px; }
.autocomplete-item-add { color: var(--accent); font-weight: 600; border-top: 1px solid var(--border-soft); }

.home-tile-split {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  /* 338px de base (130% des 260px des tuiles de comptage) → ratio 2.6 */
  flex: 2.6 1 0;
}
.home-tile-split-half {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.home-tile-split-half:hover { background: var(--bg-surface-hover); }
.home-tile-split-half:first-child { border-bottom: 1px solid var(--border-soft); }
.home-tile-split .home-tile-icon { font-size: 16px; margin-bottom: 2px; }

.match-kw-wide {
  cursor: pointer;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  transition: all 0.12s ease;
}
.match-kw-wide:hover { border-color: var(--accent); color: var(--text-primary); }
.match-kw-wide.match-kw-added {
  cursor: default;
  background: rgba(47,209,128,0.14);
  border-color: rgba(47,209,128,0.4);
  color: #2fd180;
}

/* v5.151 — pondération des mots-clés + historique des scores (page Matching) */
.match-kw-weight {
  cursor: pointer;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  transition: all 0.12s ease;
}
.match-kw-weight:hover { border-color: var(--accent); color: var(--text-primary); }
.match-history-list { font-size: 13px; color: var(--text-secondary); }
.match-history-list li { margin-bottom: 2px; }

.rapport-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.rapport-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: border-color 0.15s ease;
}
.rapport-tile:hover { border-color: var(--accent); }
.rapport-tile-label { font-weight: 700; font-size: 19px; margin-bottom: 16px; }
.rapport-tile-stats { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--text-secondary); }
.rapport-tile-stats strong { font-size: 17px; color: var(--text-primary); }

.prep-entretien-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-height: calc(100vh - 180px);
}
@media (max-width: 900px) {
  .prep-entretien-grid { grid-template-columns: 1fr; min-height: auto; }
}
.prep-entretien-offre label, .prep-entretien-keywords label, .prep-entretien-notes label {
  display: block;
  font-weight: 700;
  font-size: 12.5px;
  margin-bottom: 6px;
}
.prep-entretien-offre { display: flex; flex-direction: column; }
.prep-entretien-offre-content, #prep-offer-field {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px;
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  flex: 1;
  overflow-y: auto;
  font-family: inherit;
  resize: vertical;
}
.prep-entretien-right { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.prep-entretien-keywords { flex-shrink: 0; }
.prep-entretien-notes { flex: 1; display: flex; flex-direction: column; }
.prep-entretien-notes textarea {
  width: 100%;
  flex: 1;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  padding: 14px;
  resize: vertical;
}

.app-shell.has-custom-bg-image .content {
  background-image: var(--custom-bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.customisation-grid {
  display: grid;
  /* v5.199 — réglages en colonne étroite, prévisualisation agrandie à droite */
  /* v5.205 — prévisualisation réduite de ~20 % (≈48 % de la largeur), la colonne des réglages gagne d'autant */
  grid-template-columns: minmax(300px, 1fr) minmax(0, 48%);
  gap: 24px;
  align-items: start;
}
.cust-presets { margin-bottom: 24px; }
/* v5.200 — 12 thèmes par groupe : toujours des lignes COMPLÈTES (2 × 6 sur
   grand écran, 3 × 4 sur tablette, 2 × 6 puis 3 × 4 sur téléphone), les
   deux groupes restant côte à côte dès la tablette. */
.cust-presets .preset-theme-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cust-presets .preset-theme-tile { min-height: 96px; padding: 12px 10px; display: flex; flex-direction: column; justify-content: space-between; }
.cust-presets .preset-theme-swatches span { width: 20px; height: 20px; }
.cust-presets .preset-theme-name { font-size: 11.5px; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.cust-presets .preset-theme-tile { padding: 12px 8px; }
@media (max-width: 1250px) { .cust-presets .preset-theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  /* téléphone : groupes empilés (déjà le cas), 3 colonnes × 4 lignes */
  .cust-presets .preset-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .cust-presets .preset-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .customisation-grid { grid-template-columns: 1fr; }
  .customisation-preview { position: static; }
}
/* v5.76 — .settings-section n'a de marge basse que via la règle
   `.settings-grid .settings-section` (page Paramètres, colonnes en
   `columns:`) ; la page de customisation (templates/customisation.html)
   empile ses sections dans .customisation-controls, une simple colonne
   sans cette règle — d'où les sections "collées" les unes aux autres
   (Apparence/Luminosité/Couleur d'accent/Image de fond) faute de marge. */
.customisation-controls .settings-section { margin-bottom: 20px; }

.customisation-preview { position: sticky; top: 20px; min-width: 0; }
.preview-box {
  --p-bg: #0a0e17; --p-text: #e7ecf5; --p-accent: #FFD42A; --p-on-accent: #23262D; --p-overlay: transparent; --p-alpha: 0%;
  --p-tile: rgba(255,255,255,0.06); --p-sidebar: rgba(0,0,0,0.2);
  display: flex;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  /* v5.199 — prévisualisation agrandie : toute la hauteur utile de la fenêtre */
  height: clamp(460px, calc(100vh - 360px), 560px);
  background: var(--p-bg);
  color: var(--p-text);
  font-size: 13px;
}
/* Le fond d'écran n'occupe que la zone de contenu (comme .content dans
   l'appli réelle), jamais le menu latéral. */
.preview-main { flex: 1; min-width: 0; display: flex; background: var(--p-bg); }
.preview-box.preview-espace .preview-main {
  background-image:
    linear-gradient(color-mix(in srgb, var(--p-overlay) var(--p-alpha), transparent), color-mix(in srgb, var(--p-overlay) var(--p-alpha), transparent)),
    var(--p-photo);
  background-size: cover; background-position: center;
}
.preview-sidebar {
  width: 150px;
  background: var(--p-sidebar);
  padding: 14px 10px;
  flex-shrink: 0;
}
.preview-brand { font-weight: 700; font-size: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
.preview-brand .brand-mark { width: 22px; height: 22px; margin-top: 0; }
.preview-box.preview-compact .preview-nav-item { padding-top: 3px; padding-bottom: 3px; }
.preview-nav-item { font-size: 12.5px; padding: 8px 10px; border-radius: 8px; margin-bottom: 5px; opacity: 0.7; }
.preview-nav-active, .preview-nav-item.preview-nav-active { background: var(--p-accent); opacity: 1; color: var(--p-on-accent, #fff); }
.preview-content { flex: 1; min-width: 0; padding: 18px; overflow-y: auto; }
.preview-title { font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.preview-onbg { color: var(--p-onbg, var(--p-text)); }
.preview-onbg-text { font-size: 12.5px; margin: 0 0 14px; max-width: 520px; }
.preview-card { background: var(--p-tile); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.preview-list { background: var(--p-tile); border-radius: 10px; padding: 6px 10px; margin: 12px 0; max-height: 230px; overflow-y: auto; }
.preview-list-row { padding: 8px 6px; font-size: 12.5px; border-radius: 6px; }
/* v5.87 — surcouche mélangée avec --p-text (s'adapte aux thèmes clairs/sombres). */
.preview-list.zebra-on .preview-list-row:nth-child(even) { background: color-mix(in srgb, var(--p-text) 8%, var(--p-tile)); }
.preview-list.zebra-on .preview-list-row:nth-child(odd) { border: 1px solid color-mix(in srgb, var(--p-text) 18%, transparent); }
.preview-card-title { font-size: 13px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.preview-btn { background: var(--p-accent); color: var(--p-on-accent, #fff); border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; }
.preview-link { color: var(--p-accent); font-size: 12.5px; text-decoration: none; }
.preview-card.preview-card-bordure { border: 2px solid var(--p-accent); padding: 10px; }
.preview-card.preview-card-fond { background: color-mix(in srgb, var(--p-accent) 22%, var(--p-tile)); }
.preview-score-radiance { color: #4ade80; font-size: 11px; animation: pulse-score-green 3s infinite; }

/* v5.199 — mini Kanban de la prévisualisation : 3 colonnes de cartes avec
   la couleur de leur statut (--c) et un score de complétion (--sc), pour
   refléter « Style des cartes » (bordure / fond teinté) et « Radiance ». */
.pv-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pv-col { min-width: 0; }
.pv-col-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; margin-bottom: 6px; color: var(--p-onbg, var(--p-text)); }
.pv-col-head i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.pv-kcard { margin-bottom: 8px; }
.pv-kcard small { font-size: 11.5px; opacity: .75; }
.pv-score { font-size: 10px; color: var(--sc); visibility: hidden; }
.preview-box.pv-radiance .pv-score { visibility: visible; }
.preview-box.pv-radiance .pv-kcard { box-shadow: 0 0 14px -2px var(--sc); }
.preview-box.pv-style-bordure .pv-kcard { border: 2px solid var(--c); padding: 10px; }
.preview-box.pv-style-fond .pv-kcard { background: color-mix(in srgb, var(--c) 24%, var(--p-tile)); }
.pv-docs-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pv-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--p-text) 35%, transparent); display: inline-block; }
.cust-topbar-actions { display: flex; gap: 4px; flex-wrap: nowrap; margin-left: auto; margin-right: 4px; }
.cust-topbar-actions .btn { white-space: nowrap; padding: 6px 8px; font-size: 11.5px; }
@media (max-width: 1500px) { .topbar .cust-topbar-actions ~ .btn { white-space: nowrap; } .topbar .page-title { font-size: 17px; } }
@media (max-width: 1100px) { .cust-topbar-actions { flex-wrap: wrap; } }
.customisation-actions .form-actions { margin-top: 0; }

/* v5.199 — sélecteur visuel du « Thème de fond » (vignettes) */
.bg-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bg-picker-item {
  display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 10px; cursor: pointer;
  background: var(--bg-surface); border: 2px solid var(--border-soft); color: inherit; font: inherit; text-align: left;
  transition: border-color .15s ease, transform .1s ease;
}
.bg-picker-item:hover { transform: translateY(-1px); border-color: var(--accent); }
.bg-picker-item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.bg-picker-thumb { display: block; height: 62px; border-radius: 7px; background-size: cover; background-position: center; }
.bg-picker-thumb.is-plain { background: linear-gradient(135deg, #0a1020 0 50%, #eef3fb 50% 100%); border: 1px solid var(--border-soft); }
.bg-picker-label { font-size: 12px; font-weight: 600; padding: 0 2px 2px; }

/* v5.80 — les tuiles reprennent leur hauteur "au contenu" d'origine (celle
   d'avant la v5.79) : le correctif de hauteur fixe n'était plus nécessaire
   une fois les deux noms trop longs raccourcis ("Coucher de soleil",
   "Lagon" — voir PRESET_THEMES dans customisation.html), et cette hauteur
   fixe rendait les tuiles plus grandes que voulu. */
.preset-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.preset-theme-tile {
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  padding: 10px;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.preset-theme-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.preset-theme-swatches { display: flex; gap: 5px; margin-bottom: 8px; }
.preset-theme-swatches span { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,0.15); }
.preset-theme-name { font-size: 11px; font-weight: 600; }

/* v5.80 — sépare les thèmes en deux blocs côte à côte (sombres à gauche,
   clairs à droite) plutôt qu'une seule grille ordonnée sombre-puis-clair
   (v5.79, qui donnait une séparation HORIZONTALE — une ligne de tuiles
   sombres, puis une ligne de tuiles claires — alors que la séparation
   voulue est VERTICALE, un groupe entier à gauche et l'autre à droite). */
.preset-theme-columns {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.preset-theme-column { flex: 1; min-width: 0; }
.preset-theme-column-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
@media (max-width: 700px) {
  /* v5.81 — sans ce reset, chaque .preset-theme-column héritait de
     align-items:flex-start (posé ci-dessus pour l'affichage en ligne) une
     fois l'axe principal devenu vertical (flex-direction:column) : plutôt
     que de remplir toute la largeur disponible, chaque colonne se
     réduisait à la largeur de son contenu (une seule tuile de large),
     laissant le reste de l'espace vide à droite. */
  .preset-theme-columns { flex-direction: column; align-items: stretch; }
}

.pill-dedie { background: rgba(47,209,128,0.14); color: #2fd180; border: 1px solid rgba(47,209,128,0.4); }
.pill-standard { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--border-soft); }

/* ---------- Page "Voir la candidature" ---------- */
.cview-wrap { max-width: none; }
.cview-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(380px, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}
.cview-grid-3col { grid-template-columns: minmax(0, 2fr) minmax(340px, 1.1fr) minmax(260px, 1fr); }   /* v6.69.5 : colonnes fluides (une colonne fixe à 1140 px faisait déborder la page entre 1300 et ~2000 px) */
@media (max-width: 1700px) {
  .cview-grid-3col { grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); }
  .cview-grid-3col .cview-col-side { grid-column: 1 / -1; flex-direction: row; }
  .cview-grid-3col .cview-col-side .cview-section { flex: 1; }
}
@media (max-width: 1100px) {
  .cview-grid { grid-template-columns: 1fr; }
  .cview-grid-3col .cview-col-side { flex-direction: column; }
}
.cview-col-main { display: flex; flex-direction: column; }
.cview-col-main .cview-section { flex: 1; display: flex; flex-direction: column; }
.cview-col-main .cview-offer-box { flex: 1; }
.cview-col-doc { display: flex; flex-direction: column; min-width: 0; }
/* v8.108 : le badge de score recouvre en partie le bloc Document (plus de marge qui poussait le bloc à droite) */
.cview-col-doc .cview-section { flex: 1; margin-bottom: 0; }
.cview-col-side { display: flex; flex-direction: column; gap: 16px; }
.cview-col-side .cview-section { margin-bottom: 0; }
.cview-col-side .cview-section-score { flex: 1; display: flex; flex-direction: column; }
.cview-col-side .cview-section-score .cview-factors { flex: 1; }
.cview-section-wide { max-width: none; }
.cview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: color-mix(in srgb, var(--bg-surface) 92%, black);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
}
.cview-header-left { display: flex; gap: 16px; align-items: flex-start; }
.cview-logo {
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--bg-surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex-shrink: 0; overflow: hidden;
}
.cview-logo img { width: 100%; height: 100%; object-fit: contain; }
.cview-entreprise { font-size: 22px; font-weight: 800; margin: 0 0 2px; }
.cview-poste { font-size: 14px; color: var(--text-secondary); margin-bottom: 4px; }
.cview-url { font-size: 12px; color: var(--accent); text-decoration: none; word-break: break-all; }
.cview-url:hover { text-decoration: underline; }
.cview-score-badge { text-align: center; flex-shrink: 0; }
.cview-score-value { font-size: 32px; font-weight: 800; color: var(--accent); line-height: 1; }
.cview-score-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.cview-section {
  background: color-mix(in srgb, var(--bg-surface) 92%, black);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
}
.cview-section-title { font-weight: 700; font-size: 14px; margin-bottom: 12px; }
/* v7.83 : « Lecture de l'annonce » (dans Fiche de poste) et « Meilleur CV » (dans Document) sont des sous-blocs, plus des cartes à part */
.cview-subblock { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.cview-subtitle { font-weight: 700; font-size: 13px; margin-bottom: 8px; }

.cview-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.cview-tab {
  background: var(--bg-surface-2); border: 1px solid var(--border-soft); color: var(--text-secondary);
  border-radius: 999px; padding: 5px 14px; font-size: 12px; cursor: pointer;
}
.cview-tab.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }

/* ---------- Onglets de la page "À faire" (aujourd'hui / cette semaine) ---------- */
.a-faire-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.a-faire-tab {
  background: var(--bg-surface-2); border: 1px solid var(--border-soft); color: var(--text-secondary);
  border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.a-faire-tab-count {
  background: var(--bg-surface); border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700;
  color: var(--text-secondary);
}
.a-faire-tab.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.a-faire-tab.active .a-faire-tab-count { background: var(--accent); color: var(--on-accent); }
.cview-offer-box {
  background: var(--bg-surface-2); border-radius: 10px; padding: 16px;
  white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  overflow-y: auto;
    max-height:596px;
}

/* v7.39 — offre rendue depuis le markdown */
.cview-offer-box.cview-md { white-space: normal; overflow-wrap: anywhere; }
.cview-md h1, .cview-md h2, .cview-md h3 { font-size: 14px; margin: 14px 0 6px; color: var(--text-primary); }
.cview-md h1:first-child, .cview-md h2:first-child { margin-top: 0; }
.cview-md p { margin: 0 0 8px; }
.cview-md ul, .cview-md ol { margin: 0 0 8px; padding-left: 20px; }
.cview-md table { border-collapse: collapse; margin: 0 0 8px; width: 100%; table-layout: fixed; }
.cview-md th, .cview-md td { border: 1px solid var(--border-subtle, rgba(128,128,128,.3)); padding: 4px 8px; text-align: left; }
.cview-md a { color: inherit; text-decoration: underline; }

/* ---------- Panneau "Document" et boutons de bascule CV/LM/Autre ---------- */
.cview-doc-switch {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.cview-doc-switch-btn {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.cview-doc-switch-btn.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }

.cview-doc-panel { flex: 1; display: flex; flex-direction: column; }
.cview-doc-thumb-link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  width: 100%;
  max-width: 446px;
  aspect-ratio: 446 / 630;   /* v6.69.6 : s'adapte à la colonne (largeur fixe 446 px = débordement sur les autres blocs) */
  margin: 0 auto;
  position: relative;
}
.cview-doc-thumb { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.cview-doc-text-preview {
  height: 100%;
  overflow-y: auto;
  padding: 20px 22px;
  font-size: 13px;
  line-height: 1.6;
  color: #1a1a1a;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}
.cview-doc-thumb-fallback {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}
.cview-doc-name { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); text-align: center; }

/* badge de score de matching, ancré au bord réel de la colonne de gauche
   (pas un % calculé sur les fr-units, qui varie avec la largeur d'écran) */
.cview-col-main { position: relative; }
.cview-match-badge {
  /* v5.166 — agrandie (68px -> 144px) et centrée sur l'espace entre les
     deux colonnes (gap de 20px : centre à -10px, donc right = -10 - 72) ;
     contient désormais l'anneau de score partagé (.score-ring--sm). */
  position: absolute;
  top: 22%;
  right: -82px;
  width: 144px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,0.65), 0 0 0 4px color-mix(in srgb, var(--bg-page) 70%, transparent);
  z-index: 5;
}
.cview-match-badge.is-good { border-color: color-mix(in srgb, var(--status-offre) 55%, var(--border)); }
.cview-match-badge .score-ring { --ring-inner: var(--bg-surface); }
.cview-match-badge-label {
  font-size: 10.5px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary);
}
@media (max-width: 1100px) {
  .cview-match-badge { position: static; flex-direction: row; width: auto; margin-top: 14px; align-self: flex-start; padding: 12px 18px; }
  .cview-match-badge-label { text-align: left; }
}

.cview-people-row { display: flex; flex-wrap: wrap; gap: 20px; }
.cview-person { text-align: center; cursor: pointer; width: 90px; }
.cview-person-poste { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; height: 14px; overflow: hidden; }
.cview-person-icon { width: 44px; height: 44px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; background: var(--accent-soft); border-radius: 50%; padding: 6px; }
.cview-person:hover .cview-person-icon { background: var(--accent); color: var(--on-accent); }
.cview-person-nom { font-size: 11.5px; font-weight: 600; margin-top: 6px; }

.cview-pipeline-wrap { overflow-x: auto; padding: 4px 0; }
.cview-pipeline-svg { display: block; }
.cview-pipeline-label {
  background: var(--bg-surface-2);
  border: 1px solid var(--accent-strong);
  border-radius: 8px;
  padding: 6px 9px;
  text-align: center;
  font-family: var(--font-sans, inherit);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.cview-pipeline-date { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
.cview-pipeline-text {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  /* Plus de clamp ici : la case (foreignObject) est désormais dimensionnée
     côté JS pour accueillir le nombre de lignes réel du libellé — un clamp
     fixe faisait disparaître le texte au-delà de 2 lignes. */
}

.cview-factors { display: flex; flex-direction: column; gap: 6px; }
.cview-factor { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; }
.cview-factor-pos { background: rgba(47,209,128,0.1); color: #2fd180; }
.cview-factor-missing { background: rgba(255,255,255,0.03); color: var(--text-muted); }
.cview-factor-neg { background: rgba(240,84,84,0.1); color: #f05454; }
.cview-factor-bonus { width: 66%; align-self: flex-end; font-size: 11px; padding: 4px 10px; margin-top: -2px; }

.cview-pdf-btn-wrap { text-align: center; margin-top: 24px; }

.cview-btn-see {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  margin: 0 16px;
}
.cview-btn-see:hover { filter: brightness(1.1); }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; }
@media (max-width: 700px) { .choice-grid { grid-template-columns: 1fr; } }
.choice-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 28px; transition: border-color 0.15s ease, transform 0.1s ease;
}
.choice-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.choice-card-primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, black)); border-color: var(--accent); color: var(--on-accent); }
/* v7.33 — tuile « Importer mon CV » : fond de ciel étoilé (texte toujours clair, quel que soit le thème). */
.choice-grid.has-star { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: 1000px; }
.choice-card-star {
  position: relative; overflow: hidden; color: #f4f1ff; border-color: #6d5bd0;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 99%, transparent),
    radial-gradient(1px 1px at 28% 68%, #dcd6ff 99%, transparent),
    radial-gradient(2px 2px at 47% 18%, #fff 99%, transparent),
    radial-gradient(1px 1px at 63% 52%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 78% 28%, #ffe9a8 99%, transparent),
    radial-gradient(1px 1px at 88% 74%, #dcd6ff 99%, transparent),
    radial-gradient(1px 1px at 36% 90%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 94% 10%, #fff 99%, transparent),
    radial-gradient(120% 90% at 85% 0%, #5b3fb5 0%, transparent 60%),
    linear-gradient(160deg, #1b1446 0%, #2a1a63 55%, #3b2380 100%);
}
.choice-card-star:hover { border-color: #b7a8ff; box-shadow: 0 0 22px rgba(140, 118, 255, 0.45); }
.choice-card-star::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(2px 2px at 20% 40%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 70% 80%, #fff 99%, transparent),
    radial-gradient(2px 2px at 55% 8%, #ffe9a8 99%, transparent);
  animation: choice-star-twinkle 3.2s ease-in-out infinite alternate;
}
.choice-card-star .choice-card-desc { opacity: 0.92; }
@keyframes choice-star-twinkle { from { opacity: 0.15; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .choice-card-star::after { animation: none; opacity: 0.7; } }
.choice-card-icon { font-size: 32px; margin-bottom: 10px; }
.choice-card-title { font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.choice-card-desc { font-size: 13px; opacity: 0.85; line-height: 1.5; }

/* ---------- Wizard de création pipelinisée ---------- */
.wizard-progress { font-size: 13px; color: var(--text-secondary); margin-right: 16px; flex: 1; text-align: center; }
.wizard-wrap { max-width: 760px; margin: 0 auto; }
/* v5.166 — Frise d'étapes ("stepper") partagée par TOUS les wizards
   (candidature : templates/wizard.html, Dossier de compétences :
   dossier_wizard.html, génération de CV : dossier_generate_cv_wizard.html) —
   mêmes classes qu'avant (.wizard-steps-bar > .wizard-step-item >
   .wizard-step-label + .wizard-dot[-active|-done]), aucun HTML ni JS à
   modifier pour en profiter. Refonte demandée par Yacine : frise plus grande,
   libellés lisibles en entier (retour à la ligne autorisé, plus de "…"),
   points reliés par une ligne qui se remplit à chaque étape validée.
   - Numéro / coche dans le point : compteur CSS (counter-increment), "✓"
     une fois l'étape validée (.wizard-dot-done).
   - Ligne de liaison : ::after de chaque étape, du centre de son point au
     centre du point suivant ; remplie (dégradé accent, background-size
     animé) dès que l'étape porte un point .wizard-dot-done (:has()).
   - Le point est affiché AU-DESSUS du libellé (order:-1) sans toucher à
     l'ordre du HTML existant (libellé puis point).
   - Déborde légèrement de la carte (.wizard-wrap, 760px) sur grand écran
     pour laisser ~100px par libellé ; défilement horizontal sur mobile. */
.wizard-steps-bar {
  display: flex; align-items: flex-start; margin: 0 0 34px; padding: 6px 0 2px;
  counter-reset: wizard-step;
}
@media (min-width: 1200px) {
  .wizard-wrap > .wizard-steps-bar { margin-left: -80px; margin-right: -80px; }
}
/* v5.167 — plus d'air pour les parcours à 10 étapes (Dossier de compétences) */
@media (min-width: 1360px) {
  .wizard-wrap > .wizard-steps-bar { margin-left: -140px; margin-right: -140px; }
}
.wizard-step-item {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  counter-increment: wizard-step;
}
.wizard-step-item::after {
  content: ""; position: absolute; z-index: 0;
  top: 16px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong)) left center / 0% 100% no-repeat, var(--border);
  transition: background-size 0.45s ease;
}
.wizard-step-item:last-child::after { display: none; }
.wizard-step-item:has(.wizard-dot-done)::after { background-size: 100% 100%, auto; }
.wizard-dot {
  order: -1; position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--bg-surface-2); border: 2px solid var(--border);
  color: var(--text-muted); font: 700 13px/1 var(--font-display);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.wizard-dot::before { content: counter(wizard-step); }
.wizard-dot-done { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wizard-dot-done::before { content: "✓"; font-size: 15px; }
.wizard-dot-active {
  background: var(--bg-surface); border-color: var(--accent); color: var(--accent-strong);
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.wizard-step-label {
  display: block; max-width: 100%; box-sizing: border-box; padding: 0 2px;
  text-align: center; font-size: 12px; font-weight: 600; line-height: 1.3;
  /* v5.167 — 12px + césure française (lang="fr") : un mot long
     (« Compétences », « Technologies ») ne chevauche plus l'étiquette voisine */
  hyphens: auto;
  color: var(--text-muted); text-decoration: none; white-space: normal;
  background: none; border: none; transition: color 0.15s ease;
}
a.wizard-step-label { cursor: pointer; }
a.wizard-step-label:hover { color: var(--text-primary); }
.wizard-step-item:has(.wizard-dot-done) .wizard-step-label { color: var(--text-secondary); }
.wizard-step-label-current,
.wizard-step-item:has(.wizard-dot-active) .wizard-step-label { color: var(--accent-strong); font-weight: 700; }
@media (max-width: 760px) {
  .wizard-steps-bar { overflow-x: auto; padding: 8px 4px 8px; scrollbar-width: thin; }
  .wizard-step-item { flex: 0 0 84px; }
}
.wizard-card {
  background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4);
}
.wizard-card h2 { margin: 0 0 6px; font-size: 19px; }
.wizard-card-done { text-align: center; }
.wizard-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.wizard-checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wizard-radio-row { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.wizard-doc-block { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.wizard-doc-toggle { font-weight: 700; }
.wizard-doc-content { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
/* v5.155 — le sélecteur "Depuis la bibliothèque" (select + bouton) débordait
   de la tuile sur les écrans étroits/tuiles imbriquées du wizard : le select
   avait flex:1 mais aucune largeur minimale ne pouvait rétrécir, et le
   bouton ne passait jamais à la ligne. On autorise désormais le wrap, et le
   select peut rétrécir sous sa largeur de contenu (min-width:0, requis pour
   qu'un flex-item shrink en dessous de son contenu). */
.wizard-doc-library-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wizard-doc-library-form select { flex: 1 1 160px; min-width: 0; }

/* ---------- Réglette de salaire (double poignée) ---------- */
.salary-slider-wrap {
  position: relative;
  height: 44px;
  margin: 14px 0 6px;
  padding-top: 20px;
}
.salary-slider-labels {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.salary-slider-track {
  position: absolute;
  top: 34px; left: 0; right: 0;
  height: 4px;
  background: var(--border-soft);
  border-radius: 2px;
}
.salary-slider-range {
  position: absolute;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
}
.salary-slider-wrap input[type=range] {
  position: absolute;
  top: 26px; left: 0;
  width: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  height: 20px;
}
.salary-slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.salary-slider-wrap input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.salary-slider-disabled { opacity: 0.4; pointer-events: none; }
.salary-slider-disabled input[type=range]::-webkit-slider-thumb { cursor: not-allowed; }

.bottom-action-bar {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-page) 85%, transparent);
  backdrop-filter: blur(6px);
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 24px -24px -40px;
}
.bottom-action-bar > * { flex: 1; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.bottom-bar-highlight {
  flex: 1.6 !important;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}
.bottom-bar-highlight:hover { filter: brightness(1.08); }

.salary-subsection {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--bg-surface-2);
}

.suivi-collapsible { display: contents; }
.suivi-section-collapsed .suivi-collapsible { display: none; }

/* =========================================================
   Responsive — coquille de l'application (sidebar + topbar)
   Début du chantier responsive (v5.48) : sous 900px, la sidebar fixe en
   colonne devient un tiroir plein écran masqué par défaut, ouvert par le
   bouton hamburger du bandeau du haut. C'est le changement le plus
   structurant (sans lui, rien d'autre n'a de sens sur mobile) — le reste
   de l'appli (tableaux, formulaires, wizard...) sera ajusté au fur et à
   mesure dans les prochaines livraisons.
   ========================================================= */
@media (max-width: 1100px) {      /* v6.72.5 : le tiroir + hamburger dès 1100px (était 900px) */
  .app-shell {
    display: block;
  }

  .topbar-menu-btn {
    display: flex;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(80vw, 300px);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }
  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .main {
    min-height: 100vh;
  }

  .topbar {
    padding: 12px 16px;
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .page-title {
    font-size: 17px;
    min-width: 0;
    overflow-wrap: anywhere;   /* v7.60 — un nom de poste sans espace ne fait plus déborder la page */
  }

  .content {
    padding: 16px 14px 32px;
  }
  /* v5.167 — la barre d'actions collante compense le padding de .content :
     sur mobile celui-ci passe à 14px, la marge négative doit suivre
     (sinon débordement horizontal de 10px sur la fiche d'édition). */
  .bottom-action-bar { margin: 24px -14px -32px; padding: 12px 14px; }
}

/* Sous 480px (téléphones étroits), les groupes de boutons qui s'affichent
   normalement sur une ligne (topbar, actions de fiche, wizard) passent en
   colonne pleine largeur plutôt que de se tasser illisiblement. */
@media (max-width: 480px) {
  .topbar > a.btn, .topbar > button.btn {
    flex: 1 1 100%;
  }
  .wizard-actions {
    flex-wrap: wrap;
  }
  .wizard-actions > a, .wizard-actions > button {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ==========================================================================
   Tutoriel d'onboarding (voir static/js/tutorial.js)
   - .tuto-overlay : fond assombri plein écran, sous l'élément mis en avant.
   - .tuto-spotlight-active : posé dynamiquement en JS sur l'élément ciblé
     par l'étape courante — z-index au-dessus de l'overlay + halo d'accent
     pour le faire ressortir visuellement du reste de la page assombrie.
   - .tuto-tooltip : la bulle d'aide (titre + texte + navigation Suivant/
     Précédent/Terminer), positionnée dynamiquement en JS à côté de la
     cible ; .tuto-tooltip-center la recentre quand aucune cible n'existe
     sur la page (dégradation gracieuse plutôt que blocage).
   ========================================================================== */
.tuto-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 16, 0.6);
  z-index: 9990;
}

/* v6.80.3 — l'éclairage est un cadre fixe (#tuto-spot) dont l'ombre géante assombrit le reste : la cible n'est jamais recouverte. */
.tuto-overlay.tuto-overlay-clear { background: transparent; pointer-events: none; }
.tuto-spot {
  position: fixed;
  z-index: 9991;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--accent, #6c5ce7), 0 0 0 9999px rgba(4, 6, 16, 0.6);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}

.tuto-tooltip {
  position: fixed;
  z-index: 9992;
  width: 300px;
  max-width: calc(100vw - 28px);
  background: var(--bg-surface, #161a2e);
  color: var(--text-primary, #e8ecf5);
  border: 1px solid var(--accent, #6c5ce7);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

.tuto-tooltip.tuto-tooltip-center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.tuto-tooltip h4 {
  margin: 0 18px 8px 0;
  font-size: 14.5px;
  font-family: "Sora", sans-serif;
}

.tuto-tooltip p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #aab0c4);
}

.tuto-tooltip-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-secondary, #aab0c4);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.tuto-tooltip-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tuto-tooltip-progress {
  font-size: 11.5px;
  color: var(--text-secondary, #aab0c4);
  white-space: nowrap;
}

.tuto-tooltip-btns {
  display: flex;
  gap: 6px;
}

/* v6.80 — barre de progression + ancrage haut/bas sur petit écran (la bulle ne masque plus la cible). */
.tuto-tooltip-bar {
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent, #6c5ce7) 22%, transparent);
  margin: 0 0 12px;
  overflow: hidden;
}
.tuto-tooltip-bar > span {
  display: block;
  height: 100%;
  background: var(--accent, #6c5ce7);
  border-radius: 3px;
  transition: width .25s ease;
}
.tuto-tooltip { max-height: calc(100vh - 28px); overflow-y: auto; }

@media (max-width: 600px) {
  .tuto-tooltip {
    width: auto;
    left: 14px !important;
    right: 14px;
  }
  .tuto-tooltip.tuto-tooltip-top { top: 14px !important; bottom: auto; }
  .tuto-tooltip.tuto-tooltip-bottom { top: auto !important; bottom: 14px; }
  .tuto-tooltip { max-height: 46vh; }
  .tuto-tooltip.tuto-tooltip-center { left: 14px !important; right: 14px; transform: translateY(-50%); }
}

/* ==========================================================================
   Responsive — Kanban (suite du chantier v5.48/v5.49)
   Le tableau défilait déjà horizontalement (overflow-x: auto sur
   .kanban-board), mais les colonnes gardaient leur largeur desktop
   (220-280px) : sur téléphone, on voyait souvent 1.2 colonne à la fois
   sans repère net d'où une colonne commence/finit. scroll-snap-x fait
   s'aligner le défilement colonne par colonne, et une largeur en vw plutôt
   qu'en px laisse une colonne quasi pleine largeur sans jamais montrer un
   bout de la suivante à mi-chemin.
   ========================================================================== */
@media (max-width: 900px) {
  .kanban-board {
    scroll-snap-type: x mandatory;
  }
  .kanban-column {
    width: 82vw;
    max-width: 340px;
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {
  .kanban-column {
    width: 88vw;
  }
  .job-card {
    padding: 10px;
  }
}

/* ==========================================================================
   Responsive — Calendrier, très petits écrans
   La grille 7 colonnes égales reste la bonne approche à toutes les tailles
   (c'est un calendrier, les jours ne changent pas de nombre), mais sous
   400px elle devenait juste illisible : cellules très étroites avec le
   padding/police desktop. On resserre gap/padding/police sans changer la
   structure.
   ========================================================================== */
@media (max-width: 400px) {
  .calendar-wrap {
    padding: 8px;
  }
  .calendar-weekdays,
  .calendar-grid {
    gap: 3px;
  }
  .calendar-weekdays span {
    font-size: 9px;
  }
  .calendar-cell {
    min-height: 46px;
    padding: 3px;
    gap: 2px;
  }
  .calendar-day-num {
    font-size: 10px;
  }
  .calendar-event {
    font-size: 8.5px;
    padding: 1px 4px;
  }
}

/* ==========================================================================
   Responsive — page d'accueil (templates/resume.html)
   Structure (voir le template) : .resume-grid a 2 enfants directs,
   .resume-col-left (contenu principal) et .resume-col-right (Dernier CV
   ajouté). .resume-col-left elle-même est en flex-wrap avec `order` sur
   chacun de ses 5 blocs directs, pour pouvoir réorganiser librement sans
   toucher au HTML :
     - .home-tile-row-primary   : tuile "Ajouter une nouvelle offre" seule
     - .home-tile-row-secondary : tuiles de comptage jour/semaine + rapports
     - .resume-block-afaire-today / -afaire-week / -recentes
   Sur desktop, primary (38%) et secondary (62%) se partagent une même
   ligne — visuellement identique à l'ancienne rangée unique à 4 tuiles.
   Sur mobile (demande explicite, v5.51) : la tuile "Ajouter une offre"
   reste seule en haut, en pleine largeur et format rectangle (majoritaire,
   pas comprimée en carré) ; secondary est renvoyée après "Dernières
   candidatures" via `order`, et repasse en colonne pour empiler ses 3
   tuiles en pleine largeur au lieu de les comprimer côte à côte.
   ========================================================================== */
.resume-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);   /* v8.56 : minmax(0,…) — sinon la rangée d'onglets (nowrap) élargit la colonne et passe sous « Dernier CV ajouté » */
  gap: 20px;
  align-items: stretch;
}

.resume-col-left {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.home-tile-row-primary {
  width: calc(38% - 8px);
  margin-right: 16px;
  order: 1;
}

.home-tile-row-secondary {
  width: calc(62% - 8px);
  order: 2;
}

.resume-block { width: 100%; min-width: 0; }
.resume-block-afaire-today { order: 3; }
.resume-block-afaire-week { order: 4; }
.resume-block-recentes { order: 5; }

.resume-col-right {
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .resume-grid {
    grid-template-columns: 1fr;
  }
  .home-tile-row-primary {
    width: 100%;
    margin-right: 0;
  }
  .home-tile-row-secondary {
    width: 100%;
    order: 6;
    flex-direction: column;
  }
  .home-tile-primary {
    min-height: 150px;
  }
  .home-tile {
    min-height: 130px;
  }
  /* La tuile "rapport hebdo/mensuel" (.home-tile-split) hérite du
     min-height:130px ci-dessus, mais contient DEUX blocs empilés
     (.home-tile-split-half, flex:1 chacun) — 130px/2 = 65px par bloc, pas
     assez pour un titre + une ligne de stats sans que le texte soit
     tronqué (signalé par Yacine, v5.52). On la repasse en hauteur libre
     (dictée par son contenu) et chaque moitié en flex:none pour qu'elle
     ne soit plus forcée à occuper pile la moitié d'un total trop petit. */
  .home-tile.home-tile-split {
    min-height: 0;
  }
  .home-tile-split-half {
    flex: none;
  }

  /* Les 3 blocs "À faire aujourd'hui" / "À faire cette semaine" /
     "Dernières candidatures" gardaient leurs marges desktop une fois
     empilés en colonne (24px en haut du titre + 20px sous le lien "+X
     autres choses" du bloc précédent = ~44px de vide entre deux
     sections) — resserré sur mobile (signalé par Yacine, v5.52). Le tout
     premier titre ("🔥 À faire aujourd'hui") garde son style inline
     margin-top:0, donc il n'est pas concerné par cette règle. */
  .resume-block-title {
    margin-top: 10px;
  }
  .resume-afaire-more {
    margin-bottom: 8px !important;
  }
}

/* v5.148 — "Vos couleurs favorites" : pastilles cliquables à côté des
   champs de couleur des pages de génération de documents (CV, lettre de
   motivation), affichant les couleurs enregistrées depuis "Customiser son
   interface & ses documents" (templates/customisation.html). Encadré dans
   la couleur de contraste du thème (--accent), voir templates/base.html
   pour le clic (délégation globale, .doc-fav-swatch). Composant partagé
   entre dossier_generate_cv_form.html, dossier_generate_cv_wizard.html et
   lm_library.html — défini une seule fois ici plutôt que dupliqué. */
.doc-fav-colors {
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.doc-fav-colors-label {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.doc-fav-colors-swatches {
  display: flex;
  gap: 6px;
}
.doc-fav-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  padding: 0;
}
.doc-fav-swatch:hover {
  transform: scale(1.15);
}
/* v5.149 — bouton ☆ "Fixer cette couleur en favori", à côté de chaque champ
   de couleur des pages de génération de CV/lettre (voir templates/base.html
   pour le clic, en AJAX). */
.doc-fav-pin-btn {
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px 7px;
  color: inherit;
}
.doc-fav-pin-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* v8.52 — compteur de couleurs favorites sur le bouton ☆ */
.doc-fav-pin-btn { white-space: nowrap; }
.doc-fav-pin-btn .doc-fav-count { font-size: 11px; opacity: .85; margin-left: 2px; }
.doc-fav-pin-btn.is-full { opacity: .55; }

/* =========================================================================
   v5.166 — COMPOSANTS UI PARTAGÉS
   Construits pour le pipeline de candidature (templates/wizard.html) mais
   volontairement génériques (aucune dépendance à une page) : à réutiliser tels
   quels ailleurs dans l'appli plutôt que de recréer des styles locaux.
     .score-ring / .score-hero  — anneau de score (%), check vert si bon score
     .option-tiles / .option-tile — tuiles "action" (choisir une façon de faire)
     .pick-tiles / .pick-tile   — cases à cocher / boutons radio en tuiles
     .doc-section               — bloc d'un type de document (titre + état)
     .opt-group / .opt-row      — réglages regroupés par thème, avec .switch
     .autosave-status           — indicateur "Enregistré ✓" d'un champ auto-sauvé
     .inline-notice             — message d'information/avertissement en ligne
   ========================================================================= */

/* ---------- Anneau de score ----------
   <div class="score-ring is-good" style="--score:82">
     <span class="score-ring-value">82<small>%</small></span>
     <span class="score-ring-check">✓</span>   (optionnel)
   </div>
   États de couleur : .is-good (≥ 70), .is-mid (40–69), .is-low (< 40) —
   calculés côté template (voir le macro score_ring de _ui_macros.html).
   Tailles : défaut 156px, .score-ring--sm 96px, .score-ring--xs 78px. --ring-inner = couleur du
   disque central, à aligner sur le fond du conteneur. */
@property --score-anim { syntax: "<number>"; inherits: false; initial-value: 0; }
.score-ring {
  --score: 0; --size: 156px; --thick: 13px;
  --ring-color: var(--accent); --ring-inner: var(--bg-surface);
  --score-anim: var(--score);
  position: relative; width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: conic-gradient(var(--ring-color) calc(var(--score-anim) * 1%), var(--bg-surface-2) 0);
  animation: score-ring-fill 0.9s ease-out;
}
@keyframes score-ring-fill { from { --score-anim: 0; } }
.score-ring::before {
  content: ""; position: absolute; inset: var(--thick); border-radius: 50%;
  background: var(--ring-inner);
}
.score-ring.is-good { --ring-color: var(--status-offre); }
.score-ring.is-mid  { --ring-color: var(--status-premier_entretien); }
.score-ring.is-low  { --ring-color: var(--status-entretiens_suivants); }
.score-ring.is-empty { --ring-color: var(--border); }
.score-ring-value {
  position: relative; z-index: 1;
  font: 800 calc(var(--size) * 0.27)/1 var(--font-display); letter-spacing: -0.03em;
  color: var(--text-primary);
}
.score-ring-value small { font-size: 0.5em; font-weight: 700; color: var(--text-secondary); margin-left: 1px; }
.score-ring-check {
  position: absolute; z-index: 2; top: 2%; right: 2%;
  width: calc(var(--size) * 0.26); height: calc(var(--size) * 0.26); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--status-offre); color: #fff;
  font: 800 calc(var(--size) * 0.14)/1 var(--font-body);
  box-shadow: 0 0 0 4px var(--ring-inner), 0 6px 16px -4px rgba(47, 209, 128, 0.6);
}
.score-ring--sm { --size: 96px; --thick: 9px; }
.score-ring--xs { --size: 78px; --thick: 8px; }
@media (prefers-reduced-motion: reduce) { .score-ring { animation: none; } }

/* Score mis en avant (anneau centré + libellé dessous) */
.score-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: 8px 0 22px; }
.score-hero-label { font: 700 15px/1.3 var(--font-display); color: var(--text-primary); }
.score-hero-sub { font-size: 12.5px; color: var(--text-secondary); max-width: 460px; line-height: 1.5; }
.score-hero-verdict { font-size: 13px; font-weight: 600; }
.score-hero-verdict.is-good { color: var(--status-offre); }
.score-hero-verdict.is-mid { color: var(--status-premier_entretien); }
.score-hero-verdict.is-low { color: var(--status-entretiens_suivants); }

/* ---------- Tuiles "action" ----------
   Chaque tuile = une façon de faire (icône, titre, description, zone
   d'action en bas). S'adaptent seules au nombre de tuiles (auto-fit). */
.option-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.option-tile {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 16px; border-radius: var(--radius-md);
  background: var(--bg-surface-2); border: 1px solid var(--border-soft);
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.option-tile:hover { border-color: var(--accent); }
.option-tile.is-featured {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft));
  background: linear-gradient(160deg, var(--accent-soft), var(--bg-surface-2) 70%);
}
.option-tile.is-disabled { opacity: 0.6; }
.option-tile.is-disabled:hover { border-color: var(--border-soft); }
.option-tile-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 19px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.option-tile-title { font-weight: 700; font-size: 13.5px; color: var(--text-primary); line-height: 1.3; }
.option-tile-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; flex: 1; }
.option-tile-desc strong { color: var(--text-primary); font-weight: 600; word-break: break-word; }
.option-tile-action { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.option-tile-action form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.option-tile-action select, .option-tile-action input[type=file] { width: 100%; min-width: 0; font-size: 12px; }
/* v5.167 — même habillage du sélecteur de fichier dans toute .form-section */
.option-tile-action .btn { justify-content: center; width: 100%; }
.option-tile-action .checkbox-row { font-size: 11.5px; }
:is(.option-tile-action, .form-section, .wizard-card) input[type=file] { color: var(--text-secondary); font-size: 12.5px; max-width: 100%; }
:is(.option-tile-action, .form-section, .wizard-card) input[type=file]::file-selector-button {
  margin-right: 8px; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font: 600 12px/1 var(--font-body); color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border);
}
:is(.option-tile-action, .form-section, .wizard-card) input[type=file]::file-selector-button:hover { border-color: var(--accent); }
/* 2 colonnes fixes (grille 2×2 pour 4 tuiles, lisible dans une carte étroite) */
.option-tiles.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .option-tiles.cols-2 { grid-template-columns: 1fr; } }

/* ---------- Tuiles à cocher (checkbox / radio) ----------
   <label class="pick-tile" style="--pick-color:#4C8DFF">
     <input type="checkbox|radio" ...>
     <span class="pick-tile-mark"></span>
     <span class="pick-tile-body"><span class="pick-tile-title">…</span>
       <span class="pick-tile-desc">…</span></span>
   </label>
   L'input reste un vrai input du formulaire (soumis normalement), seulement
   masqué visuellement ; l'état coché est rendu via :has(input:checked). */
.pick-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pick-tiles.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .pick-tiles.cols-2 { grid-template-columns: 1fr; } }
.pick-tiles.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .pick-tiles.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick-tiles.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .pick-tiles.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* v5.167 — variantes de taille : --lg met un choix en avant (plus haut, titre
   plus grand), --sm pour les choix secondaires (plus compact). */
.pick-tile--lg { padding: 18px 18px; gap: 13px; }
.pick-tile--lg .pick-tile-title { font-size: 15.5px; }
.pick-tile--lg .pick-tile-desc { font-size: 12.5px; }
.pick-tile--lg .pick-tile-mark { width: 22px; height: 22px; }
.pick-tile--sm { padding: 9px 11px; gap: 8px; }
.pick-tile--sm .pick-tile-title { font-size: 12px; }
.pick-tile--sm .pick-tile-desc { font-size: 11px; }
.pick-tile--sm .pick-tile-mark { width: 16px; height: 16px; border-width: 2px; }
.pick-tile {
  --pick-color: var(--accent);
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px; border-radius: var(--radius-md); cursor: pointer;
  background: var(--bg-surface-2); border: 1px solid var(--border-soft);
  font-weight: 400; font-size: 13px; color: var(--text-primary); /* neutralise .form-field label */
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pick-tile:hover { border-color: color-mix(in srgb, var(--pick-color) 60%, var(--border-soft)); }
.pick-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pick-tile-mark {
  flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px; border-radius: 6px;
  border: 2px solid var(--border); display: grid; place-items: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pick-tile:has(input[type=radio]) .pick-tile-mark { border-radius: 50%; }
.pick-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick-tile-title { font-weight: 700; font-size: 13px; color: var(--text-primary); line-height: 1.3; }
.pick-tile-desc { font-size: 11.5px; font-weight: 400; color: var(--text-secondary); line-height: 1.4; }
.pick-tile:has(input:checked) {
  border-color: var(--pick-color);
  background: color-mix(in srgb, var(--pick-color) 12%, var(--bg-surface-2));
}
.pick-tile:has(input:checked) .pick-tile-mark { background: var(--pick-color); border-color: var(--pick-color); }
.pick-tile:has(input[type=checkbox]:checked) .pick-tile-mark::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.pick-tile:has(input[type=radio]:checked) .pick-tile-mark::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.pick-tile:has(input:focus-visible) { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.pick-tile:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* ---------- Bloc d'un type de document ---------- */
.doc-section { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; background: color-mix(in srgb, var(--bg-surface) 70%, var(--bg-surface-2)); }
.doc-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.doc-section-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; background: var(--bg-surface-2); border: 1px solid var(--border-soft); flex-shrink: 0; }
.doc-section-title { font: 700 15px/1.3 var(--font-display); color: var(--text-primary); }
.doc-section-sub { font-size: 12px; color: var(--text-secondary); }
.doc-section-state { margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--bg-surface-2); color: var(--text-muted); border: 1px solid var(--border-soft); white-space: nowrap; }
.doc-section-state.is-done { color: var(--status-offre); background: rgba(47, 209, 128, 0.12); border-color: rgba(47, 209, 128, 0.35); }
.doc-section-attached { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.doc-section-attached .doc-chip { background: var(--bg-surface); }
.doc-section-attached .doc-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.doc-section-attached form { margin: 0; display: inline-flex; }

/* ---------- Réglages regroupés par thème (avec interrupteurs) ----------
   <div class="opt-group"><div class="opt-group-title">Mise en page</div>
     <label class="opt-row"><span class="opt-row-text">Marges réduites</span>
       <span class="switch"><input type="checkbox"><span class="switch-slider"></span></span></label>
   </div>
   Réutilise l'interrupteur générique .switch (v5.66). */
.opt-group { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 14px 16px 6px; margin-bottom: 12px; background: var(--bg-surface-2); }
.opt-group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 700 11.5px/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.opt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--border-soft);
  font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.opt-group-title + .opt-row, .opt-group-title + * > .opt-row:first-child { border-top: none; }
.opt-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-row-text small { font-size: 11.5px; color: var(--text-secondary); font-weight: 400; }
.opt-row select { width: 52%; min-width: 150px; flex-shrink: 0; }
.opt-row input[type=color] { width: 44px; height: 28px; padding: 0; border: 1px solid var(--border-soft); border-radius: 6px; cursor: pointer; background: none; }
.opt-row.is-disabled { opacity: 0.5; cursor: not-allowed; }
.opt-row .switch { cursor: inherit; }
.opt-row .switch input:disabled + .switch-slider { cursor: not-allowed; }
.opt-note { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; margin: 4px 0 10px; }
.opt-color-controls { display: flex; align-items: center; gap: 6px; }
.opt-subrows { padding-left: 14px; border-left: 2px solid var(--border-soft); margin: 0 0 6px 2px; }

/* ---------- Indicateur d'enregistrement automatique ---------- */
.autosave-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); min-height: 18px; }
.autosave-status.is-saving { color: var(--text-secondary); }
.autosave-status.is-saved { color: var(--status-offre); }
.autosave-status.is-error { color: var(--status-entretiens_suivants); }

/* Liens dans les textes d'aide (.empty-hint) : repérables comme liens. */
.empty-hint a:not(.btn) { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Message en ligne ---------- */
.inline-notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-radius: var(--radius-md); margin: 8px 0 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.inline-notice.is-warning { background: rgba(245, 165, 36, 0.1); border-color: rgba(245, 165, 36, 0.38); }
.inline-notice.is-success { background: rgba(47, 209, 128, 0.1); border-color: rgba(47, 209, 128, 0.35); }
.inline-notice-icon { flex-shrink: 0; font-size: 15px; line-height: 1.3; }
.inline-notice a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.inline-notice p { margin: 0; }

/* v5.166 — étoile "document par défaut" sur les tuiles des bibliothèques CV /
   LM (voir cv_library.html, lm_library.html) : toujours visible une fois
   active, contrairement aux autres boutons de tuile (visibles au survol). */
.cv-tile-default-btn.is-active { opacity: 1; color: #F5A524; }
.cv-tile-default-btn:hover { background: rgba(245, 165, 36, 0.85); color: #fff; }
.pill-default { background: rgba(245, 165, 36, 0.14); color: #F5A524; border: 1px solid rgba(245, 165, 36, 0.4); }

/* ---------- v5.166 — Modale de personnalisation d'un modèle (.tpl-modal) ----------
   Voir templates/_cv_template_modal.html et _cv_template_options.html.
   Sélecteurs à 2 classes : l'emportent sur les règles locales (1 classe) que
   les pages de génération de CV déclarent encore dans leur propre <style>. */
.tpl-modal.modal-box { padding: 0; overflow: hidden; border-radius: 18px; border-color: var(--border); }
.tpl-modal .tpl-modal-header { align-items: flex-start; margin: 0; padding: 18px 22px 16px; border-bottom: 1px solid var(--border-soft); }
.tpl-modal-kicker { font: 700 11px/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 4px; }
.tpl-modal .modal-title { font-size: 20px; }
.tpl-modal.cv-modal-box-large .cv-modal-body { padding: 18px 22px; gap: 22px; }
.tpl-modal .cv-modal-form-col { padding-right: 10px; }
.tpl-modal .cv-modal-preview-col {
  background: var(--bg-surface-2); border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px;
}
.tpl-modal .cv-modal-preview-col .cv-template-snapshot-link { border-radius: 8px; box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.7); border: none; }
.tpl-modal .tpl-modal-footer {
  margin: 0; padding: 14px 22px; gap: 10px; align-items: center; justify-content: flex-end;
  border-top: 1px solid var(--border-soft); background: color-mix(in srgb, var(--bg-surface) 88%, black);
}
.tpl-modal-footnote { margin-right: auto; font-size: 12px; color: var(--text-muted); }
.opt-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.opt-intro .cv-full-preview-link { margin: 0; font-size: 12px; }
.opt-row.cv-photo-side-label { margin: 0; gap: 14px; font-size: 13px; justify-content: space-between; }
.opt-group .doc-fav-colors { margin: -2px 0 8px; }
@media (max-width: 760px) {
  .tpl-modal.cv-modal-box-large .cv-modal-body { padding: 14px 16px; gap: 0; }
  .tpl-modal-footnote { display: none; }
  .opt-row select { width: 50%; min-width: 0; }
}


/* ---------- v5.167 — Sections-cartes de formulaire (.form-section) ----------
   Découpe un long formulaire en blocs lisibles : en-tête (icône, titre,
   sous-titre, actions à droite) puis les champs, plus d'espace entre eux.
   Utilisé par la fiche d'édition de candidature (application_form.html),
   réutilisable tel quel pour tout autre long formulaire. */
.form-section {
  background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 22px 24px; min-width: 0;
}
.form-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.form-section-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 17px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.form-section-title { font: 700 15px/1.3 var(--font-display); color: var(--text-primary); }
.form-section-sub { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.form-section-actions { margin-left: auto; display: flex; gap: 6px; }
.form-section .form-grid { gap: 16px 18px; }
.form-section .form-field { gap: 6px; }
.form-section .form-field > label { font-size: 12.5px; }
.form-section textarea { width: 100%; }
.form-section-submit { width: 100%; justify-content: center; margin-top: 16px; }
@media (max-width: 600px) { .form-section { padding: 18px 16px; } .form-section-head { margin-bottom: 14px; } }
.field-optional { font-weight: 400; color: var(--text-muted); }
/* Section repliable : <details class="form-section form-section--collapsible">
   avec <summary class="form-section-head"> (chevron à droite). */
.form-section--collapsible > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
.form-section--collapsible > summary::-webkit-details-marker { display: none; }
.form-section--collapsible[open] > summary { margin-bottom: 18px; }
.form-section-chevron { margin-left: auto; color: var(--text-muted); font-size: 14px; transition: transform 0.15s ease; }
.form-section--collapsible[open] .form-section-chevron { transform: rotate(180deg); }
.form-section--collapsible > summary:hover .form-section-title { color: var(--accent-strong); }

/* Fiche d'édition de candidature (v5.167) */
.app-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.app-form :is(input[type=text], input[type=url], input[type=date], input[type=time], input[type=email], input[type=number], select, textarea) {
  padding: 10px 12px; font-size: 13.5px;
}
.app-edit-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px; }
@media (max-width: 980px) { .app-edit-layout { grid-template-columns: 1fr; } }
.app-edit-layout .right-column { gap: 18px; }
.app-edit-layout .interlocuteur-row, .app-edit-layout .entretien-row { margin-bottom: 18px; padding-bottom: 18px; }
.app-edit-layout .documents-panel .doc-section { margin-bottom: 14px; padding: 16px; }
.app-edit-layout .documents-panel .option-tiles.cols-2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.app-edit-layout .documents-panel .option-tile { padding: 14px; gap: 6px; }
.app-edit-layout .documents-panel .option-tile-icon { width: 30px; height: 30px; font-size: 15px; }

/* En-tête de panneau (titre à gauche, actions à droite) */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

/* Matching : score + aperçu du CV qui l'a obtenu, côte à côte */
.match-overview { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 4px 0 18px; flex-wrap: wrap; }
.match-overview-main { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1 1 260px; }
.match-overview-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.match-overview-text .score-hero-label { font-size: 13px; color: var(--text-secondary); }
.match-overview-text .score-hero-verdict { font-size: 14px; }
.match-cv-thumb { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; flex-shrink: 0; text-decoration: none; }
.match-cv-thumb-frame {
  width: 150px; aspect-ratio: 210 / 297; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-soft);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.7); transition: transform 0.15s ease;
}
.match-cv-thumb:hover .match-cv-thumb-frame { transform: translateY(-2px); }
.match-cv-thumb-frame img { width: 100%; height: 100%; object-fit: contain; object-position: top center; display: block; }
.match-cv-thumb-empty { font-size: 30px; color: #8b93a8; }
.match-cv-thumb-name { font-size: 11.5px; color: var(--text-secondary); text-align: center; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Texte direct de lettre (repli, fiche d'édition) */
.doc-text-details { margin-top: 4px; border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 10px 14px; }
.doc-text-details summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.doc-text-details[open] summary { margin-bottom: 10px; }


/* ---------- v5.167 — Listes éditables et blocs d'ajout ----------
   Composants génériques pour toute section qui liste des entrées
   modifiables en place + un formulaire d'ajout (Dossier de compétences :
   compétences, formations, langues, missions — réutilisables ailleurs).
     .list-item-stack        — pile d'entrées
     .list-item-card         — une entrée (formulaire en ligne), --block pour
                               une entrée à plusieurs lignes (mission)
     .li-grow-1/.li-grow-2/.li-narrow — largeurs relatives des champs
     .list-item-actions      — boutons de l'entrée, poussés à droite
     .btn-icon-danger        — petit bouton ✕ de suppression
     .list-empty             — état vide
     .add-block              — bloc d'ajout (bord pointillé, titre, champs
                               libellés en grille) ; --collapsible sur un
                               <details> dont le <summary> est le titre
     .section-rows / .section-cols / .section-col — rangées de sections :
                               2 colonnes (piles indépendantes) ou pleine
                               largeur (section posée directement dans
                               .section-rows) */
.section-rows { display: flex; flex-direction: column; gap: 22px; }
.section-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.section-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
@media (max-width: 1000px) { .section-cols { grid-template-columns: 1fr; } }
.opt-note a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.page-intro-notice { margin-bottom: 22px; }

.list-item-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.list-item-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--bg-surface-2); border: 1px solid var(--border-soft);
  transition: border-color 0.15s ease;
}
.list-item-card:hover, .list-item-card:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft)); }
.list-item-card > input { min-width: 0; }
.list-item-card .li-grow-1 { flex: 1 1 110px; }
.list-item-card .li-grow-2 { flex: 2 1 150px; }
.list-item-card .li-narrow { flex: 0 1 90px; }
.list-item-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.list-item-card--block { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 18px; }
.list-item-card--block .form-actions { margin: 0; gap: 8px; }
.btn-icon-danger {
  width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: var(--radius-sm); font-size: 13px; font-family: inherit;
  color: var(--status-refuse); background: transparent;
  border: 1px solid color-mix(in srgb, var(--status-refuse) 40%, transparent);
}
.btn-icon-danger:hover { background: color-mix(in srgb, var(--status-refuse) 14%, transparent); }
.list-empty { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }

.add-block {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-md);
  border: 1px dashed var(--border); background: color-mix(in srgb, var(--bg-surface-2) 45%, transparent);
}
.add-block-title { font-size: 13px; font-weight: 700; color: var(--accent-strong); }
.add-block-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 12px; width: 100%; }
.add-block-fields .li-span-2 { grid-column: span 2; }
@media (max-width: 480px) { .add-block-fields .li-span-2 { grid-column: auto; } }
.add-block .form-field { gap: 5px; }
.add-block .form-field > label { font-size: 12px; }
.add-block--collapsible { display: block; }
.add-block--collapsible > summary { list-style: none; cursor: pointer; }
.add-block--collapsible > summary::-webkit-details-marker { display: none; }
.add-block--collapsible[open] > summary { margin-bottom: 14px; }
.add-block--collapsible > form { display: flex; flex-direction: column; gap: 12px; }

/* Missions (Dossier de compétences) */
.mission-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.mission-card-title { font: 700 14.5px/1.3 var(--font-display); color: var(--text-primary); }
.mission-card-client { font-weight: 600; color: var(--text-secondary); }
.mission-card-dates { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.mission-grid { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr; gap: 10px 12px; }
@media (max-width: 760px) { .mission-grid { grid-template-columns: 1fr 1fr; } .mission-grid .mission-poste { grid-column: 1 / -1; } }
.list-item-card--block .form-field, .add-block--collapsible .form-field { gap: 5px; }

/* Identité (Dossier de compétences) */
.identity-card { padding: 14px 16px; border-radius: var(--radius-md); background: var(--bg-surface-2); border: 1px solid var(--border-soft); margin-bottom: 10px; }
.identity-name { font: 700 16px/1.3 var(--font-display); color: var(--text-primary); }
.identity-postes { font-size: 13px; color: var(--accent-strong); font-weight: 600; margin-top: 3px; }
.identity-contacts { font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; word-break: break-word; }

/* Téléversement de photo avec aperçu rond */
.photo-uploader { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.photo-uploader-preview { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border); }
.photo-uploader-preview.is-empty { display: grid; place-items: center; font-size: 28px; background: var(--bg-surface-2); }
.photo-uploader-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1 1 180px; min-width: 0; margin: 0; }
.photo-uploader-form input[type=file] { max-width: 100%; }
.photo-uploader-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.photo-uploader-label small { font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.photo-uploader-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }


/* v5.169 — Page Matching lancée depuis la quick view du kanban (?autorun=1) :
   bandeau "Analyse en cours…" avec un petit indicateur tournant. */
.matching-autorun-notice { margin-bottom: 16px; align-items: center; }
.matching-autorun-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent-strong);
  animation: matching-autorun-spin 0.8s linear infinite;
}
@keyframes matching-autorun-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .matching-autorun-spinner { animation: none; } }


/* v5.170 — Onglets de page intégrés au bandeau du haut (.topbar) :
   contrôle segmenté (pilule contenant les onglets .matching-tab), placé juste
   après le titre ; bibliothèques CV / lettres / job boards / mots-clés.
   .topbar-action : bouton secondaire du bandeau (ex. "Voir les dossiers
   générés" sur le Dossier de compétences). */
.topbar .topbar-tabs {
  margin: 0; padding: 4px; gap: 4px; flex-wrap: wrap;
  background: var(--bg-surface-2); border: 1px solid var(--border-soft); border-radius: 999px;
}
.topbar .topbar-tabs .matching-tab {
  border-color: transparent; background: transparent; padding: 7px 14px; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.topbar .topbar-tabs .matching-tab:hover { color: var(--text-primary); }
.topbar .topbar-tabs .matching-tab.active {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--accent) 80%, transparent);
}
.topbar .topbar-action { white-space: nowrap; }
@media (max-width: 760px) {
  .topbar .topbar-tabs { order: 5; flex-basis: 100%; border-radius: 14px; }
  .topbar .topbar-tabs .matching-tab { flex: 1 1 auto; }
}


/* ---------- v5.170 — Dossier de compétences : bibliothèque = point d'entrée ----------
   .dossier-intro-hero : bandeau d'accueil de l'onglet "Créer" quand la
   bibliothèque est vide ; .is-cv-source : tuile du dossier favori (★, alimente
   les CV) ; .first-dossier-hint : mention à côté de "Générer le CV" quand ce
   CV va créer le premier dossier. */
.dossier-intro-hero {
  margin-bottom: 22px; padding: 26px 28px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--bg-surface)), var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-soft));
}
.dossier-intro-hero-title { font: 800 clamp(20px, 2.6vw, 28px)/1.2 var(--font-display); color: var(--text-primary); margin-bottom: 8px; }
.dossier-intro-hero p { margin: 0; max-width: 760px; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.cv-tile-wrap.is-cv-source .cv-tile { border-color: var(--status-premier_entretien); box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-premier_entretien) 35%, transparent); }
.dossier-star-legend { color: var(--status-premier_entretien); }
.generate-bar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.first-dossier-hint {
  flex: 1 1 280px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
  padding: 8px 12px; border-radius: var(--radius-md); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.wizard-actions .first-dossier-hint { flex: 1 1 200px; margin: 0 8px; align-self: center; }


/* ---------- v5.172 — Page Mots-clés : catalogue métiers, lignes repliables ----------
   .kwlib-toolbar (création, filtre, import), .kwlib-bulk-bar (sélection +
   activer/désactiver en masse), .kwlib-group (bibliothèques perso / un grand
   domaine du catalogue, case de groupe), .kwlib-row (<details> : case, nom,
   nombre de termes, interrupteur actif, suppression ; termes chargés à
   l'ouverture). */
.kwlib-profile-notice { margin-bottom: 18px; align-items: flex-start; }
.kwlib-profile-notice p { margin: 0; }
.kwlib-langs-notice { margin-bottom: 18px; align-items: flex-start; }
.kwlib-langs-notice p { margin: 0 0 8px; }
.kwlib-langs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.kwlib-lang-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.kwlib-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.kwlib-toolbar form { margin: 0; }
.kwlib-new-form { display: flex; gap: 8px; flex: 2 1 360px; }
.kwlib-new-form input { flex: 1; min-width: 0; }
.kwlib-search { flex: 1 1 200px; min-width: 0; }
.kwlib-bulk-bar {
  position: sticky; top: 72px; z-index: 4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 10px 14px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent); border: 1px solid var(--border-soft);
  backdrop-filter: blur(6px);
}
.kwlib-bulk-count { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-right: auto; }
.kwlib-group { margin-bottom: 22px; }
.kwlib-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 0 4px; }
.kwlib-group-check { display: flex; align-items: center; gap: 8px; font: 700 12px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; }
.kwlib-group-meta { font-size: 12px; color: var(--text-muted); }
.kwlib-row {
  border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface);
  margin-bottom: 6px; transition: border-color 0.15s ease;
}
.kwlib-row.is-active { border-left: 3px solid var(--accent); }
.kwlib-row[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft)); }
.kwlib-summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.kwlib-summary::-webkit-details-marker { display: none; }
.kwlib-chevron { color: var(--text-muted); font-size: 11px; transition: transform 0.15s ease; }
.kwlib-row[open] .kwlib-chevron { transform: rotate(90deg); }
.kwlib-name { font-weight: 600; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kwlib-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.kwlib-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.kwlib-actions form { margin: 0; display: inline-flex; }
.kwlib-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  font: 700 11.5px/1 var(--font-body); color: var(--text-muted); background: var(--bg-surface-2); border: 1px solid var(--border-soft);
}
.kwlib-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.kwlib-toggle.is-on { color: var(--accent-strong); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.kwlib-toggle.is-on .kwlib-toggle-dot { background: var(--accent); }
.kwlib-body { padding: 4px 14px 14px 40px; }
.kwlib-body .keyword-pill-list { max-height: 320px; overflow-y: auto; }
@media (max-width: 640px) {
  .kwlib-summary { flex-wrap: wrap; }
  .kwlib-actions { width: 100%; justify-content: flex-end; }
  .kwlib-body { padding-left: 14px; }
  .kwlib-bulk-bar { top: 110px; }
}

/* v5.188 — Boîte mail intégrée (menu Outils) */
.nav-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.mail-tabs { flex-wrap: wrap; margin-bottom: 12px; }
.mail-tab-count { opacity: .7; font-size: 11px; margin-left: 2px; }
.mail-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mail-search .search-input { flex: 1 1 220px; min-width: 0; }
.mail-hint { margin: 0 0 12px; }
/* v5.196 — grille partagée (subgrid) : les colonnes (Expéditeur, Objet,
   Catégorie, Candidature, Date) restent alignées d'une ligne à l'autre et
   sous leur en-tête. */
.mail-list { display: grid; grid-template-columns: auto auto minmax(120px, 1.2fr) minmax(0, 3fr) auto auto auto; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.mail-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: 14px; align-items: center;
  padding: 10px 14px; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border-soft); }
.mail-row:last-child { border-bottom: 0; }
.mail-row:hover { background: var(--bg-surface-2); }
.mail-row.mail-unread { font-weight: 700; background: var(--accent-soft); }
.mail-from, .mail-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mail-date { color: var(--text-muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.mail-row-link { display: grid; grid-template-columns: subgrid; grid-column: 3 / -1; column-gap: 14px; align-items: center; color: inherit; text-decoration: none; min-width: 0; }
.mail-check-col, .mail-star-col { display: flex; align-items: center; justify-content: center; }
.mail-row-head > .mail-from { grid-column: 3; }
/* v5.218 — étoile, barre d'actions en masse */
.mail-star { background: none; border: 0; padding: 0 2px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.mail-star:hover { color: #e0a526; }
.mail-star.on { color: #e0a526; }
.mail-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 10px; margin-bottom: 8px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-surface-2); }
.mail-bulk-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.mail-bulk-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-bulk-btn:disabled { opacity: .45; cursor: default; }
.mail-bulk-bar:has(.mail-bulk-btn:not(:disabled)) .mail-bulk-all { color: var(--text-primary); font-weight: 700; }
.mail-compose-saved { font-size: 12px; color: var(--text-muted); align-self: center; }
.mail-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px; list-style: none; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); max-height: 260px; overflow-y: auto; }
.mail-suggest li { padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mail-suggest li:hover, .mail-suggest li.active { background: var(--bg-surface-2); }
.mail-suggest .sg-sub { color: var(--text-muted); font-size: 12px; }
.mail-compose-row .mail-field { position: relative; flex: 1 1 auto; display: flex; min-width: 0; }
.mail-compose-row .mail-field input { flex: 1 1 auto; min-width: 0; }
.mail-contacts-table { width: 100%; border-collapse: collapse; }
.mail-contacts-wrap { overflow-x: auto; }
.mail-contacts-table th, .mail-contacts-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.mail-contacts-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.mail-head-star { background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--text-muted); padding: 0 4px; }
.mail-head-star.on { color: #e0a526; }
.mail-row-head { background: var(--bg-surface-2); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding-top: 8px; padding-bottom: 8px; }
.mail-row-head:hover { background: var(--bg-surface-2); }
.mail-row-head .mail-date { font-size: 11.5px; font-weight: 700; color: inherit; }
.mail-cat-col { white-space: nowrap; }
.mail-chip { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--bg-surface-2); font-size: 11.5px; font-weight: 600; }
.mail-chip-warn { background: rgba(240, 170, 60, 0.18); color: var(--status-entretien_1, #d9962b); }
.mail-chip-offer { background: rgba(80, 170, 255, 0.18); color: var(--accent, #5aaaf0); }
.mail-view { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.mail-head-line { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; word-break: break-word; }
.mail-head-label { color: var(--text-muted); min-width: 84px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.mail-attach-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mail-attach-form select { flex: 1 1 220px; min-width: 0; }
.mail-body { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; margin: 0; font-family: inherit; font-size: 14px; line-height: 1.55; }
.mail-attachments { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mail-attachments li { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.mail-att-name { min-width: 0; overflow-wrap: anywhere; }
.mail-att-size { color: var(--text-muted); font-size: 12px; }
.mail-att-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-sim-form { max-width: 700px; display: flex; flex-direction: column; gap: 10px; }
.cview-mails { display: flex; flex-direction: column; gap: 6px; }
.cview-mail { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; color: var(--text-primary); text-decoration: none; font-size: 13px; }
.cview-mail.mail-unread { font-weight: 700; }
@media (max-width: 700px) {
  .mail-list { display: flex; flex-direction: column; }
  .mail-row-head { display: none; }
  .mail-row { display: flex; align-items: flex-start; gap: 8px; }
  .mail-row-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-column: auto; flex: 1 1 auto; min-width: 0; }
  .mail-from { grid-column: 1; font-size: 12px; color: var(--text-muted); }
  .mail-date { grid-column: 2; grid-row: 1; }
  .mail-subject { grid-column: 1 / -1; white-space: normal; }
  .mail-app, .mail-cat-col { grid-column: 1 / -1; }
  .mail-cat-col:empty { display: none; }
}

/* v5.189 — boîte mail : catégories et actions suggérées */
.mail-cat-refus { background: rgba(91, 100, 120, 0.3); }
.mail-cat-offre { background: rgba(47, 209, 128, 0.2); color: var(--status-offre, #2FD180); }
.mail-cat-entretien { background: rgba(245, 165, 36, 0.2); color: var(--status-premier_entretien, #F5A524); }
.mail-cat-accuse, .mail-cat-info, .mail-cat-absence { background: var(--bg-surface-2); }
.mail-action { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.mail-action:first-of-type { border-top: 0; }
.mail-action-label { min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.mail-action-btns { display: flex; gap: 6px; }
.mail-action-applied .mail-action-label, .mail-action-dismissed .mail-action-label { opacity: .65; }

/* v5.190 — interrupteur de langue (landing) et sélecteur de langue */
.lang-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(6px); }
.lang-switch-opt { padding: 4px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: #e8ecf5; text-decoration: none; transition: background .15s, color .15s; }
.lang-switch-opt:hover { color: #fff; }
.lang-switch-opt.active { background: var(--accent, #4C8DFF); color: var(--on-accent); }
.landing-lang { position: absolute; top: 18px; right: 18px; z-index: 20; }

/* ---------- v5.194 — Espace administrateur ---------- */
.topbar-admin-btn { white-space: nowrap; flex-shrink: 0; }
.admin-muted { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.admin-alert {
  background: rgba(240, 180, 60, 0.14); border: 1px solid rgba(240, 180, 60, 0.4);
  border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 18px; font-size: 13px;
}
.admin-alert a { margin-left: 8px; text-decoration: underline; }
.admin-chips, .admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-actions form { margin: 0; display: flex; gap: 8px; align-items: center; }
.admin-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px;
  background: var(--bg-surface-2); color: var(--text-secondary); border: 1px solid var(--border-soft);
  text-decoration: none;
}
.admin-chip b { color: var(--text-primary); margin-right: 3px; }
.admin-chip-ok { color: var(--text-primary); border-color: rgba(80, 190, 120, 0.5); }
.admin-chip-bad { background: rgba(239, 90, 90, 0.14); color: var(--status-entretien_2); border-color: rgba(239, 90, 90, 0.4); }
.admin-chip-free { background: rgba(80, 190, 120, 0.18); color: var(--text-primary); border-color: rgba(80, 190, 120, 0.6); }   /* v6.67.1 : modèle gratuit */
.admin-chip-paid { background: rgba(70, 140, 240, 0.18); color: var(--text-primary); border-color: rgba(70, 140, 240, 0.6); }    /* v6.67.1 : modèle payant */
.admin-chip-me { border-color: var(--accent); color: var(--accent-strong); }
.admin-filters { display: flex; gap: 8px; margin-right: auto; flex-wrap: wrap; max-width: 100%; }
.admin-filters select, .admin-filters input { max-width: 100%; min-width: 0; }
.admin-danger-zone { border-color: rgba(239, 90, 90, 0.4); }
.admin-more { float: right; font-size: 12px; font-weight: 400; text-decoration: underline; }
.admin-family-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; max-height: 220px; overflow: auto; margin-top: 8px; font-size: 12px; }
.admin-term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 10px; font-size: 12.5px; }
.admin-term { padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border-soft); background: var(--bg-surface); }


/* v5.205 — tuile « couleurs favorites des documents » (Paramètres > Interface) :
   emplacements à gauche, modèle de document simplifié à droite (couleur = --dc). */
.dc-layout { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.dc-left { flex: 1 1 240px; min-width: 0; }
.dc-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dc-mini { border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 10px; cursor: pointer; background: var(--bg-page); transition: border-color .15s, box-shadow .15s; }
.dc-mini:hover { border-color: var(--border); }
.dc-mini.is-selected { border-color: var(--accent, #4C8DFF); box-shadow: 0 0 0 1px var(--accent, #4C8DFF); }
.dc-color { height: 38px; width: 70px; padding: 2px; display: block; }
.dc-doc-wrap { flex: 0 1 230px; min-width: 190px; margin-left: auto; }
.dc-doc { --dc: #4C8DFF; background: #fff; color: #2b2f3a; border-radius: 6px; box-shadow: 0 6px 22px -8px rgba(0,0,0,.55); aspect-ratio: 210 / 297; overflow: hidden; font-size: 8px; display: flex; flex-direction: column; }
.dc-doc-head { background: var(--dc); color: #fff; display: flex; align-items: center; gap: 8px; padding: 10px; transition: background .2s; }
.dc-doc-head b { display: block; font-size: 11px; }
.dc-doc-head small { font-size: 8px; opacity: .9; }
.dc-doc-photo { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.85); flex: none; }
.dc-doc-body { display: flex; gap: 8px; padding: 8px 10px; flex: 1; min-height: 0; }
.dc-doc-side { width: 36%; display: flex; flex-direction: column; gap: 4px; }
.dc-doc-main { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.dc-doc-title { font-weight: 800; font-size: 8px; text-transform: uppercase; letter-spacing: .5px; color: var(--dc); border-bottom: 1px solid var(--dc); padding-bottom: 2px; margin-top: 4px; transition: color .2s, border-color .2s; }
.dc-doc i { display: block; height: 4px; border-radius: 2px; background: #d6d9e0; }
.dc-doc i.s { width: 60%; }
.dc-bar { display: block; height: 5px; border-radius: 3px; background: #e3e6ec; overflow: hidden; }
.dc-bar u { display: block; height: 100%; background: var(--dc); transition: background .2s; }
.dc-doc-job { display: flex; gap: 5px; align-items: flex-start; }
.dc-doc-job em { width: 6px; height: 6px; border-radius: 50%; background: var(--dc); flex: none; margin-top: 1px; transition: background .2s; }
.dc-doc-job > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.dc-doc-job b { display: block; height: 5px; width: 70%; border-radius: 2px; background: #5b6070; }

/* v5.211 — fiche compte admin : formulaires en grille */
/* v6.31 — grille des formules (Admin > Formules et quotas) */
.admin-plans-wrap { overflow-x: auto; }
.admin-plans-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-plans-table th, .admin-plans-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.admin-plans-table td:first-child { text-align: left; }
.admin-plans-table input[type=number] { width: 80px; text-align: center; }
.admin-plans-table .admin-plans-group th { text-align: left; background: var(--bg-tertiary, rgba(128,128,128,.12)); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.admin-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.admin-form-grid label.checkbox-row { flex-direction: row; align-items: center; }
.admin-form-grid input[type="text"], .admin-form-grid input[type="number"], .admin-form-grid select { width: 100%; }
.admin-form-grid > div { grid-column: 1 / -1; }
.dash-card .admin-actions input[type="email"], .dash-card .admin-actions input[type="password"], .dash-card .admin-actions input[type="text"] { flex: 1 1 160px; min-width: 0; }
.admin-users-row { cursor: pointer; }

/* v5.212 — classement des bibliothèques par domaine d'activité */
.admin-family-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; max-height: 52vh; overflow: auto; padding-right: 4px; }
.admin-family-domain { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 8px 10px; margin: 0; }
.admin-family-domain legend { font-size: 12px; font-weight: 600; padding: 0 6px; color: var(--text-secondary); }
.admin-family-domain label { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; padding: 2px 0; }
.admin-chip-domain { white-space: nowrap; }
.admin-domain-cell { display: flex; flex-wrap: wrap; gap: 4px; }

/* v5.213 — métiers ROME : sélecteur de familles déroulant (admin) + autocomplétion des postes ciblés (profil) */
.bulk-bar { position: relative; }
.admin-inline-details { display: inline-block; }
.admin-inline-details summary { list-style: none; cursor: pointer; }
.admin-inline-details summary::-webkit-details-marker { display: none; }
.admin-details-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; padding: 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.poste-autocomplete { position: relative; flex: 1; min-width: 0; }
.poste-autocomplete input { width: 100%; }
.poste-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); max-height: 280px; overflow: auto; }
.poste-suggest li { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.poste-suggest li small { display: block; color: var(--text-secondary); font-size: 11px; }
.poste-suggest li:hover, .poste-suggest li.is-active { background: var(--bg-surface-2); }
.poste-library-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.poste-library-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.poste-library-row small { display: block; color: var(--text-secondary); font-size: 11px; }

/* v5.212 — bandeau d'annonces de l'administrateur */
.announcement-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-primary); font-size: 13px; }
.announcement-bar .announcement-text { flex: 1; }
.announcement-warning { border-color: rgba(240, 180, 60, 0.6); background: rgba(240, 180, 60, 0.12); }
.announcement-success { border-color: rgba(80, 190, 120, 0.55); background: rgba(80, 190, 120, 0.12); }
.announcement-info { border-color: rgba(90, 150, 255, 0.5); background: rgba(90, 150, 255, 0.1); }
.announcement-close { background: none; border: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.announcement-close:hover { color: var(--text-primary); }

/* v5.217 — boîte mail avancée : bandeau (adresse au centre), dossiers, rédaction */
.mail-topbar-address { position: static; flex: 0 1 auto; min-width: 0; margin: 0 auto 0 4px; max-width: 100%; overflow: hidden;   /* v7.82 : plus de centrage absolu (chevauchait « Nouveau message » aux grandes largeurs) */
  text-overflow: ellipsis; white-space: nowrap;
  background: var(--bg-surface-2); border: 1px solid var(--border-soft); color: var(--text-primary); border-radius: 999px; padding: 5px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mail-topbar-address:hover { border-color: var(--accent); }
.mail-topbar-address.copied { color: var(--accent); }
@media (max-width: 1100px) { .mail-topbar-address { order: 5; margin: 0; } }
.mail-subtabs { margin-top: -4px; }
.mail-tab-badge { background: var(--accent); color: var(--on-accent); border-radius: 10px; padding: 0 6px; opacity: 1; }
.mail-trash-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.mail-trash-bar .empty-hint { margin: 0; }
.mail-send-warn { align-items: center; justify-content: space-between; background: rgba(240, 170, 60, 0.12); border-radius: 8px; padding: 8px 10px; }
.mail-compose { display: flex; flex-direction: column; gap: 10px; max-width: none; width: 100%; }
.mail-compose-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mail-compose-row label { min-width: 84px; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.mail-compose-row input[type="text"], .mail-compose-row select { flex: 1 1 260px; min-width: 0; }
.mail-compose-from { opacity: .75; }
.mail-compose-hint { margin: -4px 0 0; font-size: 12px; }
.mail-compose textarea { width: 100%; min-height: 280px; resize: vertical; font-family: inherit; font-size: 14px; line-height: 1.55; box-sizing: border-box; }
.mail-compose-atts { display: flex; flex-direction: column; gap: 4px; }
.mail-compose-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mail-compose-discard { margin-left: auto; }
.mail-compose-remove { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.cview-mail .mail-dir, .mail-dir { opacity: .7; margin-right: 4px; }
.cand-mails-section .email-row a { text-decoration: none; }
.mail-section-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }


/* v6.19 — Profil : photo de profil et photo de CV côte à côte */
.profil-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profil-photo-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.profil-photo-img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.profil-photo-img.is-empty { background: var(--bg-surface-2); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.profil-photo-card form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.profil-photo-card input[type=file] { width: 100%; min-width: 0; font-size: 12px; }
.pill-cta { background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pill-cta:hover { filter: brightness(1.08); }

/* v6.19 — admin > Gestion des données : colonne « Compte » (début de l'e-mail) sur fond d'accent */
.admin-table th.col-compte, .admin-table td.col-compte { background: var(--accent); color: var(--on-accent); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v6.19 — photo de profil entre les deux lignes de la fenêtre de bienvenue (login) */
.welcome-overlay-title .transition-photo { margin: 14px 0 6px; }
.welcome-overlay-title .transition-photo img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); box-shadow: 0 6px 24px rgba(0,0,0,.55); }

/* v6.19 — tuile et modale « Signature d'e-mail » (boîte mail) */
.mail-sig-tile { display:flex; align-items:center; gap:14px; padding:12px 16px; margin-bottom:14px; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg, 12px); }
.mail-sig-tile-icon { width:38px; height:38px; border-radius:50%; background:var(--accent-soft, rgba(255,212,42,.15)); display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.mail-sig-tile-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mail-sig-tile-text small { color:var(--text-muted, #94a3b8); }
.mail-sig-modal { max-width:760px; max-height:92vh; overflow-y:auto; }
.mail-sig-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:12px; }
@media (max-width:640px) { .mail-sig-grid { grid-template-columns:1fr; } }
.mail-sig-subtitle { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted, #94a3b8); margin:4px 0 8px; }
.mail-sig-field { display:flex; align-items:center; gap:8px; padding:5px 0; cursor:pointer; }
.mail-sig-field small { color:var(--text-muted, #94a3b8); }
.mail-sig-field.is-disabled { opacity:.5; cursor:not-allowed; }
.mail-sig-designs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mail-sig-design { cursor:pointer; }
.mail-sig-design input { position:absolute; opacity:0; pointer-events:none; }
.mail-sig-design span { display:block; text-align:center; padding:9px 6px; border:1px solid var(--border-soft); border-radius:8px; font-size:13px; }
.mail-sig-design input:checked + span { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
.mail-sig-design input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.mail-sig-preview { background:#fff; color:#111827; border-radius:10px; padding:4px 18px 18px; min-height:90px; overflow-x:auto; }
.mail-sig-actions { margin-top:14px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }


/* v6.25 : onglets de la boîte email admin (liens) */
a.matching-tab { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
#inbox-mail-body a { color: var(--accent); text-decoration: underline; }

/* v6.27 : choix de la photo de signature (profil / CV) */
.mail-sig-photo-source { display:flex; flex-direction:column; gap:4px; margin:-2px 0 6px 28px; font-size:12.5px; color:var(--text-secondary); }
.mail-sig-photo-source label { display:flex; align-items:center; gap:6px; cursor:pointer; }
.mail-sig-photo-source small { color:var(--text-muted); }

/* v6.32 — page « Mon abonnement » */
.abo-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13px; }
.abo-table td { padding: 8px 12px; vertical-align: middle; }
.abo-count { text-align: right; white-space: nowrap; }
.abo-group { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.abo-group:first-child { margin-top: 0; }
.abo-bar { height: 6px; border-radius: 3px; background: rgba(128,128,128,.2); overflow: hidden; margin-top: 6px; }
.abo-bar-fill { height: 100%; background: var(--accent, #6aa9ff); }
.abo-bar-fill.is-full { background: #d9534f; }

/* v6.33 — bandeau « mails bientôt supprimés » / « envoi non inclus » */
.mail-retention-banner { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(240,173,78,.55); background: rgba(240,173,78,.12); font-size: 13px; }
.mail-retention-banner a { margin-left: 6px; }

/* v6.34 — adresses supplémentaires dans la boîte mail */
.mail-alias-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.mail-alias-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.mail-alias-add input[type=text] { max-width: 190px; }

/* v6.44 — message de limite de formule avec bouton « Voir les formules » */
.flash-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.flash-upgrade .flash-cta { white-space: nowrap; }
.mail-retention-note { font-size: 12px; margin: 4px 0 12px; }

/* v6.47 — onglets de la section admin « Mots-clés et métiers » */
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; border-bottom: 1px solid var(--border); }
.admin-tab { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--text-secondary); text-decoration: none; font-size: 14px; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; }
.admin-tab:hover { color: var(--text-primary, inherit); background: var(--bg-surface-2); }
.admin-tab.is-active { color: var(--text-primary, inherit); background: var(--bg-surface-2); border-color: var(--border); font-weight: 600; }

/* v6.50 — liste déroulante « IA » à côté des boutons de génération */
.ai-picker { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ai-picker-select { padding: 4px 8px; border-radius: 8px; }

/* v6.52 — compteur de coût et de quota à côté des boutons IA */
.ai-cost { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.ai-cost-quota { display: inline-flex; align-items: center; gap: 6px; }
.ai-cost-bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: rgba(128,128,128,.25); overflow: hidden; vertical-align: middle; }
.ai-cost-fill { display: block; height: 100%; background: var(--accent, #6aa9ff); }
.ai-cost-fill.is-high { background: #d9534f; }

/* v6.58 — page « Générer un CV » : bloc supérieur compact, onglets de sections, éditeur de sections supplémentaires */
.cv-top-card { display: grid; gap: 10px; padding: 14px 16px; margin-bottom: 14px; }
.cv-top-card .form-field { margin: 0; }
.cv-top-card .form-field label { font-size: 12.5px; }
.cv-top-card .form-field .empty-hint { margin: 4px 0 0; }
.cv-length-block { border-top: 1px solid var(--border-soft); padding-top: 10px; }
.cv-length-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cv-length-label { font-weight: 600; font-size: 13px; }
.cv-seg { display: inline-flex; border: 1px solid var(--border-soft); border-radius: 999px; overflow: hidden; background: var(--bg-surface-2); }
.cv-seg label { cursor: pointer; margin: 0; }
.cv-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cv-seg span { display: block; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.cv-seg input:checked + span { background: var(--accent-soft); color: var(--accent-strong); }
.cv-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.cv-length-synth { margin: 0; font-size: 12.5px; }
.cv-length-note { margin: 6px 0 0; }
.cv-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cv-tabs .matching-tab { font-family: inherit; line-height: 1.2; }
.cv-tabs .cv-tab-dot { display: none; margin-left: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.cv-tabs .cv-tab-dot.on { display: inline-block; }
.settings-grid.cv-tabbed { columns: 1; }
.settings-grid.cv-tabbed .settings-section { break-inside: avoid; }
.cv-tab-hidden { display: none !important; }
.settings-section[data-solo] > .section-title { display: none; }
.cv-extra-block { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.cv-extra-block.is-off .cv-extra-row { opacity: 0.55; }
.cv-extra-switch { margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cv-extra-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }

/* v6.59 — grille à deux colonnes (identité), section « Modèle » repliable, onglets réutilisés (dossier, lettre) */
.cv-two-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; }
.cv-two-cols > .form-field { margin: 0 !important; min-width: 0; }
.cv-two-cols > .form-field input, .cv-two-cols > .form-field select { width: 100%; }
.cv-model-details { margin: 0; }
.cv-model-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cv-model-details > summary::-webkit-details-marker { display: none; }
.cv-model-details > summary .section-title { margin: 0; }
.cv-model-details > summary::after { content: "▾"; margin-left: auto; color: var(--text-secondary); transition: transform .15s ease; }
.cv-model-details[open] > summary::after { transform: rotate(180deg); }
.cv-model-current { font-size: 12px; font-weight: 600; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }
.cv-tabs-sub { margin-bottom: 14px; }

/* v6.61 — onglets de formulaire = même design que les onglets du bandeau (contrôle segmenté, onglet actif plein) */
.cv-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 18px; width: fit-content; max-width: 100%;
  background: var(--bg-surface-2); border: 1px solid var(--border-soft); border-radius: 999px;
}
.cv-tabs .matching-tab {
  border-color: transparent; background: transparent; padding: 8px 16px; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.cv-tabs .matching-tab:hover { color: var(--text-primary); }
.cv-tabs .matching-tab.active {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--accent) 80%, transparent);
}
.cv-tabs .cv-tab-dot { background: currentColor; }
@media (max-width: 760px) {
  .cv-tabs { border-radius: 14px; width: auto; }
  .cv-tabs .matching-tab { flex: 1 1 auto; }
}

/* section repliable bien visible (Modèle / Design) */
.cv-model-details > summary {
  padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md, 10px);
  background: var(--bg-surface-2); transition: border-color .15s ease;
}
.cv-model-details > summary:hover { border-color: var(--accent); }
.cv-model-details > summary::after {
  content: attr(data-closed-label) " ▾"; margin-left: auto; font-size: 12.5px; font-weight: 700;
  color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 6px 14px; transform: none;
}
.cv-model-details[open] > summary::after { content: attr(data-open-label) " ▴"; transform: none; }

/* bloc mission : bordure épaisse + bandeau (blocs affichés à gauche, retirer à droite) */
.mission-box { border: 3px solid var(--accent); border-radius: 12px; margin-bottom: 18px; overflow: hidden; background: var(--bg-surface); counter-increment: mission-n; }
.mission-box-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface-2)); border-bottom: 2px solid var(--accent);
}
.mission-box-bar .mission-box-title { font-weight: 800; font-size: 13px; }
.mission-box-bar .mission-box-title::before { content: counter(mission-n); display: inline-block; min-width: 22px; height: 22px; line-height: 22px; text-align: center; margin-right: 8px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 12px; }
.mission-box-bar .mission-box-spacer { flex: 1 1 auto; }
.mission-box-body { padding: 12px; }
.mission-blocks { position: relative; }
.mission-blocks > summary { list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg-surface); }
.mission-blocks > summary::-webkit-details-marker { display: none; }
.mission-blocks > summary::after { content: " ▾"; }
.mission-blocks[open] > summary::after { content: " ▴"; }
.mission-blocks-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 240px; padding: 10px 12px; border-radius: 10px; background: var(--bg-surface); border: 1px solid var(--border-soft); box-shadow: 0 12px 28px -10px rgba(0,0,0,.6); display: grid; gap: 6px; }
.mission-blocks-menu .opt-note { margin: 4px 0 0; }
.mission-rows-counter { counter-reset: mission-n; }

.mission-opts-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.mission-opts-row > * { display: inline-flex; align-items: center; gap: 6px; margin: 0; line-height: 1.2; }
.mission-opts-row .mission-opts-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.mission-opts-row input[type=checkbox] { margin: 0; }

.mission-box { overflow: visible !important; }
.mission-box-bar { border-radius: 9px 9px 0 0; }

details.form-section.cv-model-details > summary.form-section-head { margin-bottom: 14px; }
details.form-section.cv-model-details:not([open]) > summary.form-section-head { margin-bottom: 0; }

/* v6.62 — lien de vitrine sur les documents */
.vitrine-link-field { display:flex; flex-direction:column; gap:6px; }
.vitrine-link-line { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.9rem; }
.vitrine-link-hint { color: var(--text-muted, #8a93a8); font-size:.78rem; word-break:break-all; }
.cv-id-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.cover-fig-row { display:grid; grid-template-columns: 110px 1fr; gap: 8px; margin-bottom: 6px; }

/* v6.63 — tuiles de la bibliothèque des dossiers : barre du haut (sélection, Favori, Supprimer) et bandeau « Modifier » en bas */
.dos-tile-wrap { display:flex; flex-direction:column; background: var(--bg-surface); border:1px solid var(--border-soft); border-radius: var(--radius-md); overflow:hidden; }
.dos-tile-wrap .cv-tile { border:none; border-radius:0; flex:1; }
.dos-tile-wrap.is-cv-source { border-color: var(--status-premier_entretien); box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-premier_entretien) 35%, transparent); }
.dos-tile-wrap.is-cv-source .cv-tile { box-shadow:none; }
.dos-tile-top { display:flex; align-items:center; gap:6px; padding:6px 8px; border-bottom:1px solid var(--border-soft); }
.dos-tile-check { display:flex; align-items:center; cursor:pointer; padding:2px; }
.dos-tile-spacer { flex:1; }
.dos-tile-form { margin:0; }
.dos-tile-btn { background:transparent; border:1px solid var(--border-soft); color: var(--text-muted); border-radius: var(--radius-sm); font-size:12px; padding:4px 8px; cursor:pointer; white-space:nowrap; }
.dos-tile-btn:hover { border-color: var(--accent); color: var(--text); }
.dos-tile-btn.is-active { color:#F5A524; border-color:#F5A524; }
.dos-tile-btn-danger:hover { background: rgba(239,90,90,0.85); border-color: transparent; color:#fff; }
.dos-tile-bottom { margin:0; }
.dos-tile-edit { width:100%; border:none; border-top:1px solid var(--border-soft); background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface)); color: var(--text); font-weight:700; font-size:13px; padding:10px; cursor:pointer; }
.dos-tile-edit:hover { background: var(--accent); color:#1a1a1a; }

/* v6.69.5 — « Mon IA » : lignes de quota qui restent dans la tuile */
.ai-quota-list { display: flex; flex-direction: column; margin: 8px 0; }
.ai-quota-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.ai-quota-row:first-child { border-top: 0; }
.ai-quota-val { white-space: nowrap; }

/* v6.69.6 — admin « IA interne » : rapport d'usage en lignes alignées (colonnes identiques dans les 3 blocs) */
.ai-rep { margin-top: 14px; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.ai-rep-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 120px; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--border-soft); align-items: baseline; }
.ai-rep-4 .ai-rep-row { grid-template-columns: minmax(0, 1fr) 110px 90px 120px; }
.ai-rep-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-rep-row span:not(:first-child) { text-align: right; }
.ai-rep-head { border-top: 0; background: var(--bg-surface-2); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.ai-rep-empty { display: block; color: var(--text-muted); }

/* v6.69.6 — mention « l'IA peut faire des erreurs » à côté de chaque fonction IA */
.ai-disclaimer { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

/* v6.70 — packs de crédits IA */
.ai-packs { margin-top: 14px; }
.ai-pack-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.ai-pack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 150px; flex: 1 1 150px; padding: 10px 12px; border: 1px solid var(--border, #444); border-radius: 10px; }
.ai-pack-n { font-weight: 600; }
.ai-pack-price { font-size: 1.25em; }
.ai-pack-unit { font-size: .85em; opacity: .7; margin-bottom: 6px; }

/* ==============================================================================
   v6.71 — Onglets « classeur / navigateur » (.tabs-folder) : l'onglet actif est relié à son contenu (même fond,
   bordure continue, trait d'accent en haut), les autres sont en retrait. Le premier onglet a un coin haut-gauche
   moins arrondi. Sur petit écran la barre défile horizontalement (l'onglet actif est ramené dans la vue).
   Usage : <div class="tabs-folder"> <div class="cv-tabs" role="tablist">…boutons .matching-tab…</div> …volets… </div>
   ============================================================================== */
.tabs-folder {
  --tab-h: 44px; --tab-pad: 22px;
  --tab-line: color-mix(in srgb, var(--text-secondary) 28%, var(--border-soft));
  --tab-panel: var(--bg-surface);
  position: relative; isolation: isolate; min-width: 0; max-width: 100%; padding: 0 var(--tab-pad) var(--tab-pad); margin: 0 0 20px;
}
.tabs-folder::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: calc(var(--tab-h) - 1px);
  border: 1px solid var(--tab-line); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  background: var(--tab-panel);
}
.tabs-folder > .cv-tabs {
  display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 3px; height: var(--tab-h);
  margin: 0 calc(var(--tab-pad) * -1) var(--tab-pad); padding: 0; width: auto; max-width: none;
  background: none; border: 0; border-radius: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs-folder > .cv-tabs::-webkit-scrollbar { display: none; }
.tabs-folder > .cv-tabs .matching-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: calc(var(--tab-h) - 7px); padding: 0 18px; margin: 0;
  background: var(--bg-surface-2); color: var(--text-secondary); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--tab-line); border-radius: 12px 12px 0 0; box-shadow: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, height .12s ease;
}
.tabs-folder > .cv-tabs .matching-tab:first-child { border-radius: 4px 12px 0 0; }
.tabs-folder > .cv-tabs .matching-tab:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.tabs-folder > .cv-tabs .matching-tab.active {
  height: var(--tab-h); background: var(--tab-panel); color: var(--text-primary); font-weight: 650; cursor: default;
  border-bottom-color: var(--tab-panel); box-shadow: inset 0 3px 0 var(--accent);
}
.tabs-folder > .cv-tabs .matching-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.tabs-folder .settings-grid.cv-tabbed { margin: 0; }
.tabs-folder .settings-card { background: transparent; }
@media (max-width: 760px) {
  .tabs-folder { --tab-pad: 12px; --tab-h: 42px; }
  .tabs-folder > .cv-tabs .matching-tab { padding: 0 14px; font-size: 13px; flex: 0 0 auto; }
}

/* v6.71.5 — formulaire Profil sur deux colonnes (une seule sur petit écran) */
.profil-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
.profil-grid > .form-field { margin-top: 0 !important; min-width: 0; }
.profil-grid > .profil-span { grid-column: 1 / -1; }
.profil-grid input[type="text"], .profil-grid select, .profil-grid textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 760px) { .profil-grid { grid-template-columns: 1fr; } }
.profil-grid > .profil-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.profil-grid .empty-hint { margin: 4px 0 0 !important; }
@media (max-width: 760px) { .profil-grid > .profil-pair { grid-template-columns: 1fr; } }
/* v6.72 — fiche candidature : colonne de gauche étroite, onglets plus compacts */
.app-edit-layout .tabs-folder > .cv-tabs .matching-tab { padding: 0 13px; }

/* ==== v6.72.5 — fiche candidature : un seul bloc à onglets pleine largeur ==== */
.app-edit-layout { min-width: 0; }
.app-edit-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; min-width: 0; }
.app-edit-body > .right-column { display: contents; }
.app-edit-body > form { min-width: 0; }
.app-tabs[data-active-tab="offre"] .app-edit-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@media (max-width: 1100px) { .app-tabs[data-active-tab="offre"] .app-edit-body { grid-template-columns: minmax(0, 1fr); } }
.app-edit-body .offer-panel, .app-edit-body .documents-panel, .app-edit-body .matching-panel { margin: 0; }
.app-tabs > .cv-tabs .matching-tab.is-locked { color: var(--text-secondary); }
.app-tabs > .cv-tabs .matching-tab.is-locked .tab-lock { font-size: 11px; margin-left: 5px; opacity: .8; }
.app-tabs > .cv-tabs .matching-tab.tab-matching:not(.active):hover { color: var(--accent-strong); }
.match-prereq { margin: 12px 0 16px; padding: 12px 14px; border: 1px dashed var(--tab-line, var(--border-soft)); border-radius: 10px; background: var(--bg-surface-2); }
.match-prereq.is-ok { border-style: solid; border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft)); }
.match-prereq-title { font-weight: 650; margin-bottom: 8px; }
.match-prereq-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; color: var(--text-secondary); }
.match-prereq-item.ok { color: var(--text-primary); }
.match-prereq-item .mp-state { width: 20px; text-align: center; font-weight: 700; color: var(--accent); }
/* bandeau du haut : le libellé « Créé le » disparaît quand la place manque */
@media (max-width: 1300px) { .page-title-created .created-label { display: none; } }

/* ---------- v6.72.7 — interlocuteurs en tuiles 4:3 + modale ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.app-edit-layout .contact-grid .contact-card,
.contact-grid .contact-card {
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface-2, var(--bg-surface));
  overflow: hidden;
  min-width: 0;
  position: relative;
}
.contact-view {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  height: 100%;
  padding: 14px 16px;
  cursor: pointer;
  overflow: hidden;
}
.contact-card:hover, .contact-view:focus-visible { border-color: var(--accent); }
.contact-view:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: inherit; }
.contact-name { font-weight: 700; font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.contact-poste { color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-coord { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-note { margin-top: auto; color: var(--text-muted); font-size: 12px; font-style: italic; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.contact-grid .contact-card-add {
  all: unset;
  box-sizing: border-box;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--border-soft);
  border-radius: var(--radius-lg, 12px);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  padding: 10px;
}
.contact-grid .contact-card-add:hover, .contact-grid .contact-card-add:focus-visible { border-color: var(--accent); color: var(--accent-strong, var(--accent)); }
.contact-add-plus { font-size: 30px; line-height: 1; }
.contact-modal-box { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.contact-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-modal-wide { grid-column: 1 / -1; }
.contact-modal-coords { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.contact-modal-coord { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 10px; }
.contact-modal-box textarea { width: 100%; }
@media (max-width: 480px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .contact-modal-grid, .contact-modal-coord { grid-template-columns: 1fr; }
}
.contact-modal-box textarea { min-height: 0; height: 96px; resize: vertical; }

/* v6.74 — passe responsive finale : cartes de grille et filtres du dashboard ne forcent plus la largeur de la page */
.dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dash-grid > * { min-width: 0; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  #dash-filter-form { flex-wrap: wrap; margin-left: 0 !important; }
  .view-toggle-group { flex-wrap: wrap; }
}
.dash-card select, .dash-card textarea, .dash-card input[type="text"] { max-width: 100%; box-sizing: border-box; }
@media (max-width: 420px) {
  .vt-actions .vt-btn { white-space: normal; }
}
.form-actions { flex-wrap: wrap; }

/* ---------- v6.75 — Accueil : « À faire aujourd'hui / cette semaine / Dernières candidatures » en un bloc à onglets,
   « Top recherches » juste dessous ; sur grand écran la page tient dans la fenêtre sans défiler (seul le contenu des onglets défile) ---------- */
.resume-block-top { order: 3; width: 100%; }
.resume-block-tabs { order: 4; }
.resume-block-tabs .tabs-folder { margin-bottom: 16px; }
/* v8.56 : sur une colonne étroite, les onglets de l'accueil rétrécissent (texte coupé « … », intitulé complet au survol) au lieu de déborder */
.resume-block-tabs .tabs-folder > .cv-tabs .matching-tab { flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 0 12px; font-size: 13px; }
.home-top-list { max-height: 320px; overflow-y: auto; margin-bottom: 20px; padding-top: 4px; padding-bottom: 4px; }
.home-top-list .email-row { min-width: 0; padding-top: 9px; padding-bottom: 9px; }
.home-top-list .email-row span { min-width: 0; }

@media (min-width: 901px) and (min-height: 640px) {
  body.resume-fit, body.resume-fit .app-shell { height: 100vh; overflow: hidden; }
  body.resume-fit .app-shell { grid-template-rows: minmax(0, 1fr); }
  body.resume-fit .home-tile-row-secondary { flex-wrap: nowrap; }
  body.resume-fit .home-tile-row-secondary .home-tile { flex: 1 1 0; min-width: 0; }
  body.resume-fit .home-tile-row-secondary .home-tile:not(.home-tile-split) .home-tile-icon { display: none; }
  body.resume-fit .home-tile-split { flex-direction: column; }
  body.resume-fit .home-tile-split-half { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  body.resume-fit .home-tile-split .home-tile-icon { display: none; }
  body.resume-fit .home-tile-split .home-tile-title { font-size: 14px !important; margin-bottom: 2px; }
  body.resume-fit .home-tile-split .home-tile-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.resume-fit .content { overflow: hidden; display: flex; flex-direction: column; min-height: 0; padding-bottom: 16px; }
  body.resume-fit .content-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  body.resume-fit .resume-grid { flex: 1; min-height: 0; }
  body.resume-fit .resume-col-left {
    display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); grid-template-rows: auto auto minmax(120px, 26vh); align-content: start;
    gap: 14px 16px; min-height: 0;
  }
  body.resume-fit .home-tile-row { margin: 0; width: auto; gap: 14px; }
  body.resume-fit .home-tile-row-primary { grid-column: 1; grid-row: 1; }
  body.resume-fit .home-tile-row-secondary { grid-column: 2; grid-row: 1; }
  body.resume-fit .home-tile, body.resume-fit .home-tile-primary { min-height: 0; padding: 14px 16px; }
  body.resume-fit .home-tile-primary .home-tile-icon { font-size: 30px; margin-bottom: 4px; }
  body.resume-fit .home-tile-primary .home-tile-title { font-size: 19px; }
  body.resume-fit .home-tile-number { font-size: 32px; }
  body.resume-fit .home-tile-split-half { padding: 6px 10px; }
  body.resume-fit .resume-block-tabs { grid-column: 1 / -1; grid-row: 3; min-height: 0; display: flex; }
  body.resume-fit .resume-block-tabs .tabs-folder { flex: 1; min-width: 0; min-height: 0; margin: 0; display: flex; flex-direction: column; }
  body.resume-fit .home-tab-panes { flex: 1; min-height: 0; overflow-y: auto; }
  body.resume-fit .resume-block-top { grid-column: 1 / -1; grid-row: 2; }
  body.resume-fit .home-top-list { max-height: 52vh; margin-bottom: 0; }
  body.resume-fit .resume-block-tabs .matching-tab { padding-top: 6px; padding-bottom: 6px; }
  body.resume-fit .resume-block-tabs .email-row { padding-top: 5px; padding-bottom: 5px; }
  body.resume-fit .resume-col-right { min-height: 0; }
  body.resume-fit .resume-col-right .settings-card { min-height: 0; }
  body.resume-fit .resume-col-right iframe { min-height: 0 !important; }
}
@media (max-width: 900px) {
  .home-top-list { max-height: none; }
}
@media (max-width: 900px) {
  .resume-grid { grid-template-columns: minmax(0, 1fr); }
  .resume-col-left, .resume-col-right { min-width: 0; }
  .resume-block-tabs .email-row { flex-wrap: wrap; gap: 6px; }
}

/* ==============================================================================
   v6.77 — Lisibilité des textes posés sur une photo de fond.
   Principe : on ne touche JAMAIS à la photo ; les textes « libres » reçoivent un encart (fond de la couleur des tuiles,
   semi-opaque + léger flou), les boutons/filtres deviennent des pilules pleines. Le niveau (Paramètres > Interface >
   « Lisibilité du fond ») règle l'opacité et le flou : body.lisib-fort / lisib-moyen / lisib-leger.
   Les encarts n'existent que sur photo (body.has-photo-bg) et se fondent dans les tuiles quand ils sont posés dessus.
   ============================================================================== */
body.has-photo-bg { --enc-alpha: 86%; --enc-blur: 8px; }
body.has-photo-bg.lisib-fort { --enc-alpha: 95%; --enc-blur: 12px; }
body.has-photo-bg.lisib-leger { --enc-alpha: 78%; --enc-blur: 5px; }
body.has-photo-bg { --enc-bg: color-mix(in srgb, var(--bg-surface) var(--enc-alpha), transparent); --pill-bg: color-mix(in srgb, var(--bg-surface) 96%, transparent); }

/* 1. Textes d'intro / légendes / compteurs posés sur la photo */
body.has-photo-bg :is(.empty-hint, .doctype-legend, .bulk-bar-title, .view-toggle-group-label, .search-scope-row, .mail-hint,
  .list-empty, .created-label, .page-title-created, .page-title-big, .ai-disclaimer, .no-library-banner > span) {
  background: var(--enc-bg); -webkit-backdrop-filter: blur(var(--enc-blur)); backdrop-filter: blur(var(--enc-blur));
  border-radius: var(--radius-md); padding: 5px 12px; color: var(--text-secondary);
}
body.has-photo-bg :is(p.empty-hint, .bulk-bar-title, .search-scope-row, .page-title-big) { display: block; width: fit-content; max-width: 100%; }
body.has-photo-bg :is(span.empty-hint, .doctype-legend, .created-label, .page-title-created) { display: inline-block; }
body.has-photo-bg :is(.bulk-bar-title, .page-title-big, .page-title-created) { color: var(--text-primary); }
/* titres de section directement sur la photo : encart ; dans une tuile / un classeur / une modale : aucun encart */
body.has-photo-bg .section-title { background: var(--enc-bg); -webkit-backdrop-filter: blur(var(--enc-blur)); backdrop-filter: blur(var(--enc-blur));
  border-radius: var(--radius-md); padding: 5px 12px; width: fit-content; max-width: 100%; color: var(--text-primary); }
body.has-photo-bg :is(.settings-card, .tabs-folder, .modal-box, .documents-panel, .dash-card, details) .section-title,
body.has-photo-bg :is(.settings-card, .tabs-folder, .modal-box, .documents-panel, .dash-card, details) :is(.empty-hint, .search-scope-row, .list-empty, .no-library-banner > span) {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; padding-right: 0;
}
body.has-photo-bg :is(.settings-card, .tabs-folder) :is(span.empty-hint, .doctype-legend, .created-label) { padding-left: 0; padding-right: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.has-photo-bg .section-title { text-shadow: none; }

/* 2. Boutons / filtres : pilules pleines (jamais transparentes sur la photo) */
body.has-photo-bg .btn-ghost { background: var(--pill-bg); color: var(--text-primary); border-color: var(--tab-line, var(--border)); }
body.has-photo-bg .btn-ghost:hover { border-color: var(--accent); }
body.has-photo-bg .view-toggle .btn.active, body.has-photo-bg .view-toggle .btn.is-active {
  background: color-mix(in srgb, var(--accent) 26%, var(--bg-surface)); border-color: var(--accent); font-weight: 700; }
.view-toggle .btn.active, .view-toggle .btn.is-active { border-color: var(--accent); font-weight: 700; }
body.has-photo-bg :is(.a-faire-tab, .snapshot-tab, .cview-tab) { background: var(--pill-bg); }
/* v7.82 — libellés posés directement sur la photo (page Préparation d'entretien) : même fond « pastille » que les onglets, lisible en thème clair */
body.has-photo-bg :is(.prep-entretien-offre, .prep-entretien-keywords) > label { background: var(--pill-bg); color: var(--text-primary); padding: 3px 12px; border-radius: 999px; width: fit-content; max-width: 100%; display: inline-block; }
body.has-photo-bg .matching-tab:where(:not(.cv-tabs .matching-tab, .topbar-tabs .matching-tab)) { background: var(--pill-bg); }
body.has-photo-bg :is(.a-faire-tab, .cv-model-current, .cview-tab).active, body.has-photo-bg .matching-tab:where(:not(.cv-tabs .matching-tab, .topbar-tabs .matching-tab)).active { background: color-mix(in srgb, var(--accent) 26%, var(--bg-surface)); color: var(--text-primary); }
body.has-photo-bg .flash { background: color-mix(in srgb, var(--accent) 22%, var(--bg-surface)); color: var(--text-primary); }
body.has-photo-bg .admin-alert { background: var(--bg-surface); color: var(--text-primary); }
.mail-tab-count { opacity: 1; }
.mail-folder .mail-subtabs { margin-top: 2px; }

/* 3. Boîte mail en classeur : le panneau reste plein, les onglets-dossiers portent le compteur */
.mail-folder > .cv-tabs .matching-tab { text-decoration: none; gap: 6px; }
.mail-folder .mail-search { margin-top: 4px; }

/* 4. Pages d'administration : onglets et textes discrets lisibles sur photo */
body.has-photo-bg .admin-tab { background: var(--pill-bg); }
body.has-photo-bg .admin-tab.is-active { background: var(--bg-surface-2); }
body.has-photo-bg :is(.admin-tabs) { border-bottom-color: var(--tab-line, var(--border)); }
/* v6.77 — le titre de la barre du haut est posé sur la barre (fond uni), pas sur la photo : texte du thème en clair */
body.theme-light .topbar .page-title { color: var(--text-primary); }

/* v6.77 (suite) — thème clair : scores et statuts en teintes plus profondes ; tableaux pleins sur photo ; textes directs de page encartés */
body.theme-light .job-score-radiance-green { color: #0D6B3A; }
body.theme-light .job-score-radiance-yellow { color: #6E5400; }
body.theme-light .job-score-radiance-orange { color: #8F4300; }
body.theme-light .job-score-radiance-red { color: #A8200F; }
body.has-photo-bg tbody td:not(.col-compte) { background: var(--bg-surface); }
body.has-photo-bg .admin-plans-group th, body.has-photo-bg thead th { background: var(--bg-surface-2); }
body.has-photo-bg .content-inner > :is(p, small, label, h2, h3, .admin-muted, .dash-card-title, .list-empty, .settings-hint) {
  background: var(--enc-bg); -webkit-backdrop-filter: blur(var(--enc-blur)); backdrop-filter: blur(var(--enc-blur));
  border-radius: var(--radius-md); padding: 5px 12px; color: var(--text-secondary); width: fit-content; max-width: 100%;
}
.content-inner .lang-switch { background: var(--bg-surface-2); border-color: var(--border); }
.content-inner .lang-switch-opt { color: var(--text-secondary); }
.content-inner .lang-switch-opt:hover { color: var(--text-primary); }
.content-inner .lang-switch-opt.active { color: var(--on-accent); }
body.has-photo-bg .inline-notice { background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface)); color: var(--text-primary); }
body.has-photo-bg .inline-notice.is-warning { background: color-mix(in srgb, #f5a524 16%, var(--bg-surface)); }
body.has-photo-bg .inline-notice.is-success { background: color-mix(in srgb, #2fd180 16%, var(--bg-surface)); }
body.has-photo-bg .settings-section > :is(p, small, .admin-muted) { background: var(--enc-bg); -webkit-backdrop-filter: blur(var(--enc-blur)); backdrop-filter: blur(var(--enc-blur));
  border-radius: var(--radius-md); padding: 5px 12px; color: var(--text-secondary); width: fit-content; max-width: 100%; }
body.has-photo-bg .preset-theme-column-title { background: var(--enc-bg); border-radius: var(--radius-md); padding: 4px 12px; color: var(--text-primary); width: fit-content; }
body.has-photo-bg .content-inner > details, body.has-photo-bg .doc-text-details { background: var(--bg-surface); }
body:not(.no-zebra) .admin-table tbody tr td.col-compte, body.has-photo-bg .admin-table tbody tr td.col-compte { background: var(--accent); color: var(--on-accent); }

/* v6.78 — Boîte mail : « Réglages » (signature + adresses supplémentaires) = onglet dédié du classeur */
.mail-folder .mail-settings-pane { display: none; }
.mail-folder.is-settings > :not(.cv-tabs):not(.mail-settings-pane) { display: none; }
.mail-folder.is-settings .mail-settings-pane { display: block; }
.mail-folder.is-settings > .cv-tabs a.matching-tab.active { height: calc(var(--tab-h) - 7px); background: var(--bg-surface-2); color: var(--text-secondary); font-weight: 500; box-shadow: none; border-bottom-color: var(--tab-line); cursor: pointer; }
.mail-folder > .cv-tabs .mail-settings-tab { margin-left: 0; }

/* v6.78 — Page Recherche : carte pleine largeur, champ large, périmètres en pastilles sur une ligne */
.search-card { max-width: none; padding: 20px 24px; margin-bottom: 20px; }
.search-main-row { display: flex; gap: 12px; align-items: stretch; }
.search-main-row input[type="text"] { flex: 1; min-width: 0; font-size: 15px; padding: 12px 16px; }
.search-main-row .btn { padding-left: 28px; padding-right: 28px; font-size: 14px; }
.search-scopes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.search-scopes .search-scope-row { display: contents; }
.search-scopes label { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-surface-2); font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.search-scopes label:has(input:checked) { border-color: var(--accent); color: var(--text-primary); background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface-2)); }
.search-scopes .search-scope-all { font-weight: 700; margin-right: 6px; }
.search-card .search-note { margin: 12px 0 0; padding: 0; }
@media (max-width: 640px) { .search-main-row { flex-direction: column; } }
body.has-photo-bg .search-scopes .search-scope-row, body .search-scopes .search-scope-row { display: contents; background: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; width: auto; }

/* v6.78 — titre de section = « onglet unique » collé au bloc qu'il nomme (même fond, bordure continue, trait d'accent) */
body .section-title:has(+ :is(.settings-card, .table-wrap, .documents-panel, .form-card)):not(.tabs-folder *, .modal-box *, details *),
body .bulk-bar-title:has(+ .bulk-bar) {
  display: block; width: fit-content; max-width: 100%; position: relative; z-index: 1;
  margin-bottom: -1px; padding: 10px 18px 9px; color: var(--text-primary); font-size: 13.5px;
  background: var(--bg-surface); border: 1px solid var(--border-soft); border-bottom: 0; border-radius: 4px 12px 0 0;
  box-shadow: inset 0 3px 0 var(--accent); -webkit-backdrop-filter: none; backdrop-filter: none;
}
body .bulk-bar-title:has(+ .bulk-bar) { background: var(--bg-surface-2); margin-bottom: -1px; }
.section-title:has(+ :is(.settings-card, .table-wrap, .documents-panel, .form-card)) + :is(.settings-card, .table-wrap, .documents-panel, .form-card) { border-top-left-radius: 0; }
.bulk-bar-title:has(+ .bulk-bar) + .bulk-bar { border-top-left-radius: 0; border: 1px solid var(--border-soft); }
.lettre-tile-right > .cv-tabs .matching-tab { padding: 0 13px; font-size: 13px; }

/* v6.79 — Boîte email admin : même classeur que la boîte des utilisateurs */
.mail-folder-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }

/* v6.79 — Système et sauvegarde : une tuile par onglet + jauge circulaire de l'espace disque */
.admin-sys-tabs .dash-card { background: none; border: 0; box-shadow: none; padding: 0; }
.disk-gauge { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 6px 0 18px; }
.disk-gauge svg { flex: none; }
.disk-gauge-bg { fill: none; stroke: var(--bg-surface-2); stroke-width: 12; }
.disk-gauge-fg { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; }
.disk-gauge.is-warn .disk-gauge-fg { stroke: #f5a524; }
.disk-gauge.is-crit .disk-gauge-fg { stroke: #ef5a5a; }
.disk-gauge-pct { font: 800 24px var(--font-display); fill: var(--text-primary); }
.disk-gauge-sub { font: 500 10px var(--font-body); fill: var(--text-secondary); letter-spacing: .06em; text-transform: uppercase; }
.disk-gauge-legend { margin: 0; display: grid; gap: 8px; }
.disk-gauge-legend div { display: flex; gap: 14px; justify-content: space-between; min-width: 260px; }
.disk-gauge-legend dt { color: var(--text-secondary); }
.disk-gauge-legend dd { margin: 0; font-weight: 700; }

/* v7.83 — Prompt IA : sous-onglets des prompts = vrais onglets de second niveau (languettes sur un filet), plus la « pilule » segmentée */
.prompt-folder > .prompt-subtabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 4px; padding: 0 0 0; margin: 0 0 20px; width: 100%; max-width: 100%; height: auto;
  background: none; border: 0; border-bottom: 2px solid var(--border); border-radius: 0; overflow: visible; }
.prompt-folder > .prompt-subtabs .matching-tab { height: auto; padding: 7px 14px; margin-bottom: -2px; border: 1px solid var(--border-soft); border-bottom: 2px solid var(--border);
  border-radius: 8px 8px 0 0; background: var(--bg-surface-2); color: var(--text-secondary); box-shadow: none; font-size: 13px; text-decoration: none; white-space: normal; text-align: center; min-width: 0; }
.prompt-folder > .prompt-subtabs .matching-tab:hover { color: var(--text-primary); border-color: var(--accent); }
.prompt-folder > .prompt-subtabs .matching-tab.active { background: var(--bg-surface); color: var(--text-primary); font-weight: 700; border-color: var(--border); border-top: 3px solid var(--accent); border-bottom: 2px solid var(--bg-surface); }
.prompt-folder > .cv-tabs .matching-tab { text-decoration: none; }

/* v6.79.5 — « onglet unique » générique (.solo-tab) : collé au bloc qui suit, angle bas droit, spécificité > règles fond photo */
body .solo-tab.solo-tab, body .bulk-bar-title.bulk-bar-title:has(+ .bulk-bar) {
  display: block; width: fit-content; max-width: 100%; position: relative; z-index: 1;
  margin: 0 0 -1px; padding: 10px 18px 9px; color: var(--text-primary); font-size: 13.5px; line-height: 1.45;
  background: var(--bg-surface); border: 1px solid var(--border-soft); border-bottom: 0; border-radius: 4px 12px 0 0;
  box-shadow: inset 0 3px 0 var(--accent); -webkit-backdrop-filter: none; backdrop-filter: none;
}
body .bulk-bar-title.bulk-bar-title:has(+ .bulk-bar) { background: var(--bg-surface-2); }
.solo-tab + :is(.settings-card, .table-wrap, .calendar-wrap, .bulk-bar) { border-top-left-radius: 0; }
.solo-tab + .calendar-wrap { border-top: 1px solid var(--border-soft); }
.solo-tab + .settings-card { margin-top: 0; }
/* bibliothèques : actions rapides / libellé / documents dans un cadre */
.cv-bulk-actions-bar { margin-bottom: 10px; }
body.has-photo-bg .cv-bulk-actions-bar { width: fit-content; max-width: 100%; background: var(--enc-bg); padding: 6px 12px; border-radius: var(--radius-md); -webkit-backdrop-filter: blur(var(--enc-blur)); backdrop-filter: blur(var(--enc-blur)); }
body.has-photo-bg .cv-bulk-actions-bar .cv-bulk-count { color: var(--text-secondary); }
/* v6.79.7 — bibliothèques : UN bandeau [libellé … actions] sur toute la largeur, trait d'accent en haut, cadre autour des documents */
.lib-top { --lib-c: var(--bg-surface); --lib-b: 3px; display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--lib-c); border: var(--lib-b) solid var(--lib-c); border-top: 0; border-bottom: 0; border-radius: 4px 4px 0 0;
  box-shadow: inset 0 3px 0 var(--accent); position: relative; z-index: 1; }
body .lib-top > .solo-tab.solo-tab { flex: 1 1 320px; width: auto; max-width: none; margin: 0; padding: 4px 0 2px; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; }
.lib-top > .cv-bulk-actions-bar, body.has-photo-bg .lib-top > .cv-bulk-actions-bar { flex: 0 0 auto; width: auto; margin: 0; padding: 0; gap: 8px; background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lib-top .cv-bulk-count { font-size: 12px; color: var(--text-secondary); }
.lib-top .btn { padding: 3px 10px; font-size: 12px; line-height: 1.4; min-height: 0; }
.lib-top + .cv-tile-grid { border: var(--lib-b, 3px) solid var(--bg-surface); border-top: 0; border-radius: 0 0 12px 12px; padding: 14px; }
@media (max-width: 700px) { .lib-top { flex-direction: column; align-items: flex-start; } }

/* v6.79.8 — Customisation : note collée au bandeau, thèmes prédéfinis en zone à contour, prévisualisation encadrée */
body .cust-topnote.cust-topnote, body .cust-preview-note.cust-preview-note {
  display: block; width: fit-content; max-width: 100%; position: relative; z-index: 2; margin: -20px 0 18px; padding: 8px 18px 9px;
  font-size: 13px; line-height: 1.45; color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-soft); border-top: 0;
  border-radius: 0 0 12px 4px; box-shadow: inset 0 -3px 0 var(--accent); -webkit-backdrop-filter: none; backdrop-filter: none;
}
body .cust-preview-note.cust-preview-note { margin: -1px 0 0; }
.cust-presets > .solo-tab { font-weight: 700; margin-bottom: 0; }
.cust-presets-box { background: none; border: 1px solid var(--border-soft); border-radius: 0 12px 12px 12px; overflow: hidden; margin-top: -1px; position: relative; }
.cust-presets-head { background: var(--bg-surface); padding: 14px 16px; }
.cust-presets-head > :first-child { margin-top: 0; }
.cust-presets-head > :last-child { margin-bottom: 0; }
.cust-presets-hint { margin: 0; font-size: 13px; color: var(--text-secondary); }
.cust-presets-head .mail-retention-banner { margin: 12px 0 0; }
.cust-presets-box .preset-theme-columns { padding: 14px; gap: 28px; align-items: flex-start; }
.cust-presets-box .preset-theme-column { position: relative; box-shadow: 0 0 0 14px var(--bg-surface); }
body .cust-presets-box .preset-theme-column-title.cust-sub-tab { display: block; width: fit-content; max-width: 100%; margin: 0 0 -3px; padding: 5px 16px 4px; position: relative; z-index: 1;
  background: var(--bg-surface-2); color: var(--text-primary); border-radius: 4px 12px 0 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cust-presets-box .preset-theme-grid { border: 3px solid var(--bg-surface-2); border-radius: 0 12px 12px 12px; padding: 12px; background: none; }
@media (max-width: 700px) { .cust-presets-box .preset-theme-columns { gap: 32px; } }
.customisation-preview > .solo-tab { font-weight: 700; }
.customisation-preview .preview-box { border: 3px solid var(--bg-surface); border-radius: 0 12px 12px 12px; margin-top: -1px; }
.cust-presets-box .preset-theme-columns { gap: 20px; }
.cust-presets-box .preset-theme-grid { padding: 8px; gap: 8px; }
.cust-presets-box .preset-theme-tile { padding: 12px 5px; }
.cust-presets-box .preset-theme-name { font-size: 11px; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
.cust-presets-box .preset-theme-name { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }

/* v6.79.9 — Customisation : retouches */
/* note réellement collée sous le bandeau, centrée, toujours visible (le bandeau est sticky) */
body .topbar .cust-topnote.cust-topnote { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin: 0; width: max-content; max-width: min(90%, 900px); z-index: 6;
  border-radius: 0 0 12px 12px; border-top: 0; text-align: center; }
.cust-presets { margin-top: 44px; }
/* sous-parties transparentes : trou carré (aucun jour aux angles), reste de la zone en fond plein, ligne des onglets comprise */
.cust-presets-box .preset-theme-column { box-shadow: 0 0 0 14px var(--bg-surface); background: linear-gradient(var(--bg-surface), var(--bg-surface)) top left / 100% 25px no-repeat; }
body .cust-presets-box .preset-theme-column-title.cust-sub-tab { height: 28px; box-sizing: border-box; display: flex; align-items: center; padding: 0 16px; }
.cust-presets-box .preset-theme-grid { border-radius: 0; box-shadow: none; }
/* prévisualisation : coin bas gauche droit pour accueillir la note collée, et plus grande */
.customisation-preview .preview-box { border-radius: 0 12px 12px 0; height: clamp(520px, calc(100vh - 300px), 760px); }
.customisation-grid { grid-template-columns: minmax(300px, 1fr) minmax(0, 56%); }
@media (max-width: 1100px) { .customisation-grid { grid-template-columns: 1fr; } }

/* v6.79.9 — Customisation, passe 1 */
.cust-presets { margin-top: 36px; }
body .topbar .cust-topnote.cust-topnote { max-width: min(94%, 1150px); }
.cust-presets-box .preset-theme-grid { border-radius: 0 12px 12px 12px; box-shadow: 0 0 0 14px var(--bg-surface); }

/* v6.79.9 — Customisation, passe 2 : responsive (boutons « Retour » et « Mon abonnement » en bandeau du bas, note intégrée au bandeau) */
@media (max-width: 1650px) {
  .topbar .cust-back-btn { position: fixed; bottom: 12px; z-index: 40; margin: 0; background: var(--bg-surface); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
  .topbar .cust-back-btn { left: calc(248px + 16px); }
  .content:has(.customisation-grid) { padding-bottom: 76px; }
}
@media (max-width: 1100px) {
  .topbar .cust-back-btn { left: 16px; }
  .cust-topbar-actions { margin-left: 0; flex: 1 1 100%; }
  .cust-topbar-actions .btn { flex: 1 1 auto; width: auto; text-align: center; }
}
@media (max-width: 900px) {
  body .topbar .cust-topnote.cust-topnote { position: static; transform: none; width: auto; max-width: none; flex: 1 1 100%; order: 99; margin: 0; padding: 6px 4px 2px; border: 0; border-radius: 0; box-shadow: none; background: none; text-align: left; }
  .cust-presets { margin-top: 14px; }
  .customisation-controls .cv-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .customisation-controls .matching-tab { flex: 0 0 auto; }
}
.topbar:has(.cust-back-btn) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.customisation-controls .tabs-folder > .cv-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.customisation-controls .tabs-folder > .cv-tabs .matching-tab { flex: 0 0 auto; padding: 0 11px; font-size: 13px; }
body .topbar .cust-topnote.cust-topnote { max-width: min(98%, 1200px); font-size: 12.5px; }
@media (max-width: 1100px) {
  .customisation-grid { grid-template-columns: minmax(0, 1fr); }
  .customisation-controls, .customisation-preview, .customisation-controls .tabs-folder { min-width: 0; max-width: 100%; }
}
@media (max-width: 600px) {
  .topbar .cust-back-btn { width: calc(50% - 20px); justify-content: center; text-align: center; white-space: normal; font-size: 12px; padding: 8px 6px; }
  .topbar .cust-back-btn { left: 12px; }
}
@media (max-width: 600px) {
  .customisation-preview .preview-sidebar { display: none; }
  .customisation-preview .pv-kanban { grid-template-columns: 1fr; }
  .customisation-preview .preview-box { height: auto; min-height: 460px; }
}
/* v6.79.10 — fonds sombres : onglet et contour sombres, texte blanc ; prévisualisation à hauteur de son contenu */
body .cust-presets-box .preset-theme-column:first-child .preset-theme-column-title.cust-sub-tab { background: #0c1220; color: #fff; }
.cust-presets-box .preset-theme-column:first-child .preset-theme-grid { border-color: #0c1220; }
.customisation-preview .preview-box { height: auto; min-height: 0; }
@media (max-width: 700px) {
  .cust-presets-box .preset-theme-columns { flex-direction: column; align-items: stretch; gap: 32px; }
  .cust-presets-box .preset-theme-column { width: 100%; }
}
.customisation-preview .preview-content { padding-bottom: 8px; }
.customisation-preview .preview-card.pv-docs { margin-bottom: 0; }

/* v6.92 — indicateur « ça travaille » (static/js/busy.js) */
#busy-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .2s; }
#busy-bar.on { opacity: 1; }
#busy-bar span { display: block; height: 100%; width: 35%; background: linear-gradient(90deg, transparent, var(--accent, #FFD42A), transparent); animation: busy-slide 1.1s ease-in-out infinite; }
@keyframes busy-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.is-busy { animation: busy-pulse 1s ease-in-out infinite; cursor: progress; }
@keyframes busy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  #busy-bar span { animation: none; width: 100%; }
  .is-busy { animation: none; opacity: .7; }
}

/* v7.01 — lien d'évitement (clavier) : visible seulement au focus */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100001; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 8px; }
#main-content:focus { outline: none; }

/* v7.06 — objectif hebdomadaire (tuile « cette semaine » de l'accueil) */
.goal-bar { height: 8px; border-radius: 6px; background: rgba(128,128,160,.28); margin: 8px 12px 2px; overflow: hidden; }
.goal-bar > i { display: block; height: 100%; background: var(--accent, #7aa2ff); border-radius: 6px; transition: width .4s ease; }
.goal-done { font-weight: 600; }
.goal-form { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
.goal-form input { width: 56px; padding: 3px 6px; }
@media (prefers-reduced-motion: reduce) { .goal-bar > i { transition: none; } }

/* v7.10 — palette de commandes (Ctrl+K) */
#palette { position: fixed; inset: 0; z-index: 10050; background: rgba(5,8,20,.55); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
#palette[hidden] { display: none; }
#palette .pal-box { width: min(560px, 92vw); background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; }
#palette .pal-input { width: 100%; box-sizing: border-box; padding: 14px 16px; font-size: 16px; background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--border); outline: none; }
#palette .pal-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
#palette .pal-item { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
#palette .pal-item small { opacity: .75; font-size: 12px; white-space: nowrap; }
#palette .pal-item.is-active { background: var(--accent); color: var(--on-accent); }
#palette .pal-hint { padding: 8px 14px; font-size: 12px; opacity: .8; border-top: 1px solid var(--border); }

/* v7.13 — bouton « Déplacer » des cartes Kanban (alternative au glisser-déposer) */
.job-card { position: relative; }
.move-btn { position: absolute; top: 4px; right: 30px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 50%; font-size: 13px; color: inherit; opacity: .35; cursor: pointer; line-height: 1; z-index: 2; }
.job-card:hover .move-btn, .move-btn:focus-visible { opacity: .9; }
.move-btn:hover { background: var(--bg-surface); opacity: 1; }
@media (hover: none) { .move-btn { opacity: .8; } }
.move-menu { position: absolute; top: 28px; right: 6px; z-index: 30; min-width: 170px; display: grid; gap: 2px; padding: 6px; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.move-menu button { text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-primary); cursor: pointer; font-size: 13px; }
.move-menu button:hover, .move-menu button:focus-visible { background: var(--accent); color: var(--on-accent); outline: none; }

/* v7.31 — un champ ne dépasse jamais de son conteneur (listes déroulantes aux options très longues sur mobile) */
select, input:not([type=checkbox]):not([type=radio]), textarea { max-width: 100%; }
.choice-card, .choice-card form { min-width: 0; }


/* v7.34 — import de CV : champ prérempli par une donnée déjà présente (voile cliquable) et repère « rempli depuis l'analyse » */
.ex-wrap { display: block; position: relative; }
.ex-wrap.is-existing input, .ex-wrap.is-existing textarea { color: var(--text-muted, #8a8fa6); }
.ex-overlay {
  position: absolute; inset: 0; width: 100%; border: 1px dashed var(--accent); border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface, #151a2b) 86%); color: var(--text-primary, #e8eaf6);
  font: inherit; font-size: .85em; font-style: italic; cursor: text; text-align: left; padding: 0 12px; opacity: .92;
}
.ex-overlay:hover { opacity: 1; }
.import-banner {
  display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.import-banner p { margin: 0; flex: 1 1 280px; font-size: .92em; }
.form-section:has(> .import-mark) { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.import-mark { margin: 0 0 8px; font-size: .82em; color: var(--accent); font-weight: 600; }


/* ==========================================================================
   v7.40 — Grande passe responsive
   (1) Kanban : le conteneur grille n'avait qu'une rangée « auto » qui grandissait avec la hauteur des colonnes (le tableau dépassait
   l'écran, donc sa barre de défilement horizontale restait sous le bas de la page). La rangée est maintenant bornée à l'écran :
   les colonnes défilent verticalement DANS leur cadre et la barre horizontale reste toujours visible en bas de l'écran.
   (2) Cartes : longs mots sans espace coupés au lieu de déborder. (3) Très petits écrans (≤ 400 px, testés à 320 px) : boutons et
   formulaires qui passent à la ligne, bascules de période, tuiles, listes de définitions.
   ========================================================================== */
body.no-scroll .app-shell { grid-template-rows: minmax(0, 1fr); }
body.no-scroll .main { height: 100%; min-height: 0; overflow: hidden; }
.kanban-board { scrollbar-width: auto; scrollbar-color: var(--border-strong, rgba(150,150,170,.6)) transparent; }
.kanban-board::-webkit-scrollbar { height: 12px; }
.kanban-board::-webkit-scrollbar-thumb { background: var(--border-strong, rgba(150,150,170,.55)); border-radius: 8px; }
.job-card, .job-card * { overflow-wrap: anywhere; }
.job-card .job-poste, .job-card .job-entreprise { min-width: 0; }
@media (max-width: 400px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  form.sv-add-form, .kwlib-new-form, .gestion-export-form { flex-wrap: wrap; max-width: 100%; }
  .view-toggle, .view-toggle-group { flex-wrap: wrap; max-width: 100%; }
  .dash-card, .chart-card { min-width: 0; max-width: 100%; }
  .rapport-tile-grid { grid-template-columns: minmax(0, 1fr); }
  .rapport-tile { padding: 18px; min-width: 0; overflow-wrap: anywhere; }
  .cv-template-card { min-width: 0; max-width: 100%; }
  .empty-hint { white-space: normal; overflow-wrap: anywhere; }
  .content { padding-left: 14px; padding-right: 14px; }
}
.job-card .job-entreprise { padding-right: 40px; }   /* v7.40 : le titre ne passe plus sous les boutons ⇄ et épingle */
.kanban-board.kanban-compact .job-card .job-entreprise { padding-right: 36px; }
@media (max-width: 400px) {
  .content input, .content select, .content textarea { min-width: 0; max-width: 100%; }
  .content [style*="display:flex"], .content [style*="display: flex"] { flex-wrap: wrap; }
  .chart-legend { flex-wrap: wrap; }
  .chart-card { overflow-x: hidden; }
  .recent-tile-date { white-space: normal; }
}
@media (max-width: 980px) { .dash-grid-chart { grid-template-columns: minmax(0, 1fr); } .dash-grid-chart > * { min-width: 0; } }
@media (max-width: 400px) {
  .topbar input, .topbar select { min-width: 0; max-width: 100%; }
  .topbar [style*="display:flex"], .topbar [style*="display: flex"] { flex-wrap: wrap; }
}
.recent-tile-header { flex-wrap: wrap; gap: 4px 8px; }
.recent-tile-date { white-space: normal; }

/* v7.41 — bibliothèques de mots-clés : la ligne n'est plus un <summary> contenant des cases et boutons (147 « nested-interactive » avec le catalogue) :
   case + bouton déplier (aria-expanded) + actions côte à côte, corps masqué tant que la ligne est fermée. */
.kwlib-row.is-open { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft)); }
.kwlib-row.is-open .kwlib-chevron { transform: rotate(90deg); }
.kwlib-expander { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; cursor: pointer; padding: 2px 0; }
.kwlib-expander:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.kwlib-body[hidden] { display: none; }

/* v7.61 — robustesse mobile : les noms longs (fichiers, entreprises) passent à la ligne */
.inline-notice, .email-row > span { overflow-wrap: anywhere; min-width: 0; }

/* v7.62 — lignes entières cliquables */
[data-href] { cursor: pointer; }
[data-href]:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.wizard-step-clickable .wizard-dot { cursor: pointer; }
.wizard-step-clickable .wizard-dot:hover { transform: scale(1.15); }

/* v7.67 — page Mots-clés plus lisible : résumé, options repliées, barre de sélection à la demande */
.kw-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--border, rgba(128,128,128,.3)); border-radius: 12px; background: var(--card-bg, transparent); }
.kw-summary-n { display: flex; flex-direction: column; align-items: center; min-width: 90px; line-height: 1.1; }
.kw-summary-n strong { font-size: 2rem; }
.kw-summary-n span { font-size: .8rem; opacity: .85; text-align: center; }
.kw-summary-txt { margin: 0; flex: 1 1 260px; }
.kw-adv { margin: 0 0 12px; }
.kw-adv > summary { cursor: pointer; font-weight: 600; padding: 8px 2px; }
.kw-adv-val { font-weight: 400; opacity: .8; margin-left: 6px; }
.kw-new { position: relative; }
.kw-new > summary { list-style: none; cursor: pointer; display: inline-block; }
.kw-new > summary::-webkit-details-marker { display: none; }
.kw-new .kwlib-new-form { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.kw-h2 { font-size: 1.1rem; margin: 20px 0 6px; }
.kwlib-bulk-bar[hidden] { display: none; }
.kwob-reopen[hidden], .inline-notice[hidden] { display: none; }
/* v7.67 — Prompt IA : 5 onglets principaux défilent horizontalement sur petit écran */
@media (max-width: 560px) { .prompt-folder > .cv-tabs:not(.prompt-subtabs) { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; scrollbar-width: thin; } .prompt-folder > .cv-tabs:not(.prompt-subtabs) .matching-tab { white-space: nowrap; flex: 0 0 auto; } }
/* v7.68 — contraste du jaune sur fond clair */
body.theme-light :is(.cview-url, .cview-score-value) { color: #8a5300; }   /* v7.82 : lien d'offre jaune illisible en thème clair */
body.theme-light .pill-default { color: #8a5300; border-color: rgba(138, 83, 0, .55); }
body.theme-light .dos-tile-btn.is-active { color: #8a5300; border-color: #b87400; }

/* v7.74 — Centre d'aide */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.help-search { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0 18px; }
.help-search .search-input { flex: 1 1 280px; min-width: 0; }
.help-h2 { font-size: 15px; margin: 22px 0 8px; color: var(--text-primary); }
.help-item { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); margin-bottom: 8px; }
.help-item > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 13.5px; color: var(--text-primary); }
.help-item > summary:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
.help-body { padding: 0 14px 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.help-body p { margin: 0 0 10px; }
.help-links { display: flex; gap: 8px; flex-wrap: wrap; }
.help-center [hidden] { display: none !important; }

/* v7.76 — logo envoyé depuis Admin > Médias */
img.ja-logo-img{object-fit:contain;display:inline-block}

/* v7.76 — Admin > Médias */
.media-intro{max-width:70ch;margin:0 0 16px}
.media-h2{font-size:1.15rem;margin:22px 0 10px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.media-card{border:1px solid var(--border,rgba(128,128,160,.3));border-radius:14px;padding:14px;background:var(--surface,transparent);min-width:0;display:flex;flex-direction:column;gap:8px}
.media-title{font-size:1rem;margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;overflow-wrap:anywhere}
.media-preview{height:130px;border-radius:10px;border:1px dashed rgba(128,128,160,.4);display:flex;align-items:center;justify-content:center;overflow:hidden;background:repeating-conic-gradient(rgba(128,128,160,.12) 0 25%,transparent 0 50%) 0 0/16px 16px}
.media-preview img{max-width:100%;max-height:100%;object-fit:contain}
.media-preview.media-wide img{width:100%;height:100%;object-fit:cover}
.media-hint,.media-meta{margin:0;overflow-wrap:anywhere}
.media-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.media-form input[type=file]{max-width:100%;min-width:0;flex:1 1 180px}
.media-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.media-actions form{margin:0}
.media-lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px;margin-top:14px}
.media-lib-item{margin:0;border:1px solid rgba(128,128,160,.3);border-radius:12px;overflow:hidden;min-width:0}
.media-lib-item img{width:100%;height:120px;object-fit:cover;display:block}
.media-lib-item figcaption{padding:8px;display:flex;flex-direction:column;gap:6px}
.media-code{font-size:.75rem;overflow-wrap:anywhere}

/* v7.77 — Mes histoires (STAR) */
.story-intro{max-width:78ch;margin:0 0 14px}
.story-card{margin-bottom:12px;max-width:980px}
.story-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;cursor:pointer;min-width:0}
.story-title{font-weight:600;overflow-wrap:anywhere}
.story-meta{opacity:.7;font-size:.85rem}
.story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.story-grid .story-wide{grid-column:1/-1}
.story-grid input,.story-grid textarea{width:100%;max-width:100%;box-sizing:border-box}
.story-spoken{margin:12px 0;padding:10px 12px;border-left:3px solid var(--accent-strong,#ffd42a);background:rgba(128,128,160,.08);border-radius:8px}
.story-spoken p{margin:6px 0;overflow-wrap:anywhere}
.story-actions{display:flex;gap:8px;margin-bottom:8px}
.story-del{margin:0}
.story-search{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.story-search input{flex:1 1 220px;min-width:0;max-width:420px}
@media (max-width:640px){.story-grid{grid-template-columns:minmax(0,1fr)}}
.prep-stories-list{margin:6px 0;padding-left:18px;display:grid;gap:6px}
.prep-entretien-stories{margin:10px 0;display:grid;gap:6px}

/* v7.78 — Contacts */
.contact-card .contact-head{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.contact-id{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;min-width:0;overflow-wrap:anywhere}
.contact-line{margin:6px 0;overflow-wrap:anywhere}
.contact-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.contact-actions form{margin:0}
.contact-rem{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.contact-rem input[type=text]{flex:1 1 200px;min-width:0}
.contact-presets{display:flex;gap:6px;flex-wrap:wrap}
.contact-card details summary{cursor:pointer}

/* v7.83 — après un import : voile type tutoriel (cadre à ombre géante, comme .tuto-spot), seuls les deux choix de création restent éclairés */
.after-import-catcher { position: fixed; inset: 0; z-index: 9989; cursor: pointer; }
.after-import-spot { position: fixed; z-index: 9990; pointer-events: none; border-radius: 16px; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(4, 6, 16, 0.68); }
.after-import-msg { position: fixed; z-index: 9992; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 28px)); text-align: center;
  background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--accent); border-radius: 14px; padding: 16px 22px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
.after-import-msg .after-import-title { font: 700 18px var(--font-display); margin-bottom: 6px; }
.after-import-msg p { margin: 0 0 12px; color: var(--text-secondary); font-size: 14px; }
.choice-card.after-import-dim { opacity: .35; pointer-events: none; }

/* v7.83 — Logo complet (texte compris) : hauteur propre à chaque contexte, ratio conservé */
.ja-logo-full { display: inline-block; height: 40px; width: auto; max-width: 100%; vertical-align: middle; }
.brand .brand-full, .brand.has-full .ja-logo-full { height: 38px; }
.brand:has(.brand-full) { padding: 0 6px; }
.landing-logo .ja-logo-full { height: clamp(70px, 14vw, 130px); margin: 0; }
.vt-header .vt-brand .ja-logo-full { height: 42px; margin: 0; }
.vt-footer .vt-brand .ja-logo-full { height: 34px; }
.auth-logo .ja-logo-full, .ob-logo .ja-logo-full { height: 52px; }
.welcome-overlay-logo .ja-logo-full, .transition-logo .ja-logo-full { height: 56px; }
.preview-brand .ja-logo-full { height: 22px; }
@media (max-width: 480px) {
  .landing-logo .ja-logo-full { height: clamp(56px, 20vw, 90px); }
  .auth-logo .ja-logo-full, .ob-logo .ja-logo-full { height: 44px; }
}
.landing-logo .ja-logo-full { max-width: 86vw; }
.brand .brand-full, .brand.has-full .ja-logo-full { height: 52px; }
.vt-header .vt-brand .ja-logo-full { height: 58px; }
.vt-footer .vt-brand .ja-logo-full { height: 46px; }
@media (max-width: 480px) { .vt-header .vt-brand .ja-logo-full { height: 46px; } }
/* v7.83 — sous-onglets Prompt IA : un libellé trop long passe à la ligne au lieu de déborder (320 px) */
.prompt-folder > .prompt-subtabs .matching-tab { white-space: normal; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
/* v7.83 — thème clair : vert « Poste renseigné » assez contrasté */
body.theme-light .cview-factor-pos { color: #0b6b3a; }
body.theme-light .cview-factor-neg { color: #a61b1b; }
/* v7.83 — logo complet intégré : son jaune suit la couleur d'accent comme le symbole par défaut */
.ja-logo-full { --ja-logo-color: var(--ja-logo-page-color, var(--accent-strong)); }
svg.ja-logo-full { display: inline-block; overflow: visible; }
/* v7.83 (correctif) — Accueil plein écran : le menu latéral défile dans sa colonne ; si malgré tout le contenu dépasse
   (fenêtre basse, zoom du navigateur…), la zone centrale défile au lieu d'être coupée. */
@media (min-width: 901px) {
  body.resume-fit .sidebar { overflow-y: auto; min-height: 0; max-height: 100vh; scrollbar-width: thin; }
  body.resume-fit .content { overflow-y: auto; overflow-x: hidden; }
  body.resume-fit .content-inner { overflow: visible; }
}
/* v7.83 — logo du menu empilé (symbole au-dessus du nom) : plus haut, centré dans la colonne */
.brand .ja-logo-full.brand-stacked { height: 90px; max-width: 100%; }
.brand:has(.brand-stacked) { justify-content: center; }
/* v7.83 — logo avec texte compris dans le menu : pas de marge gauche/droite autour du logo, 5 px en haut du menu */
.brand:has(.brand-full) { padding: 0; }
.sidebar:has(.brand .brand-full) { padding-top: 5px; }

/* v7.83.2 — Préparation d'entretien en onglets internes (entretiens > Préparation/Débrief > tuiles) */
.prep-folder > .cv-tabs .matching-tab { text-decoration: none; }
.prep-folder .prep-inner, .prep-folder .prep-tile { --tab-panel: var(--bg-surface-2); margin-bottom: 16px; }
.prep-folder .prep-inner { --tab-panel: var(--bg-surface); }
.prep-folder .prep-tile:last-child { margin-bottom: 0; }
.prep-folder .prep-tile .matching-tab[role="tab"]:not(button) { cursor: default; }
.prep-folder .prep-sections > .cv-tabs { scrollbar-width: none; }
.prep-folder [data-prep-subpane][hidden] { display: none; }
.prep-q-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.prep-q-bar select { min-width: 0; max-width: 100%; flex: 1 1 260px; }
.prep-folder .prep-entretien-notes textarea, .prep-folder #prep-offer-field { width: 100%; min-height: 320px; box-sizing: border-box; }
.prep-classic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.prep-classic-list .btn { white-space: normal; text-align: left; height: auto; }
.prep-folder .prep-entretien-offre label { display: block; font-weight: 700; font-size: 12.5px; margin-bottom: 6px; }

/* v7.83.2 — modales du calendrier : « Voir la candidature » à côté du champ, ligne d'export libellée, import .ics */
.cal-linked-row { display: flex; gap: 8px; align-items: center; }
.cal-linked-row > select, .cal-linked-row > input { flex: 1 1 auto; min-width: 0; width: auto; }
.cal-linked-row > .btn { flex: 0 0 auto; white-space: nowrap; }
.btn.disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; cursor: not-allowed; }
.cal-export-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-right: auto; align-self: center; }
.cal-export-row { align-items: center; justify-content: flex-start; }
.modal-actions .cal-export-label { flex: 1 1 100%; margin-right: 0; }
.modal-actions-large > form, .modal-actions-large > a { flex: 1 1 0; }
.modal-actions-large .btn { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 560px) { .modal-actions-large { flex-direction: column; } .cal-linked-row { flex-wrap: wrap; } }

/* v7.83.2 — mobile : bandeau compact sur « Modifier la candidature » (boutons côte à côte, titres sur peu de lignes) */
@media (max-width: 760px) {
  .topbar:has(> .cview-btn-see) { row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .topbar:has(> .cview-btn-see) .page-title-big { font-size: 15px; flex: 1 1 100%; margin: 0; }
  .topbar:has(> .cview-btn-see) .page-title-created { font-size: 12.5px; flex: 0 0 auto; margin: 0; }
  .topbar:has(> .cview-btn-see) > .cview-btn-see, .topbar:has(> .cview-btn-see) > a.btn, .topbar:has(> .cview-btn-see) > button.btn {
    flex: 1 1 calc(50% - 6px); margin: 0; padding: 7px 8px; font-size: 12.5px; min-width: 0; white-space: normal; text-align: center; justify-content: center;
  }
}

/* v7.83.2 — mail ouvert : pleine largeur, une seule « feuille » au fond commun ; les boutons d'action en pied de feuille */
.mail-view { max-width: none; width: 100%; }
.mail-sheet { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.mail-sheet > .mail-sec { padding: 16px 22px; border: 0; border-top: 1px solid var(--border-soft); background: transparent; border-radius: 0; box-shadow: none; margin: 0; }
.mail-sheet > .mail-sec:first-child { border-top: 0; }
.mail-sheet > .mail-actions { padding: 14px 22px; border-top: 1px solid var(--border-soft); background: var(--bg-surface-2); align-items: center; }
.mail-sheet > .mail-actions form { margin: 0; }
.mail-sheet .mail-body { font-size: 14.5px; max-width: none; }
@media (max-width: 760px) { .mail-sheet > .mail-sec, .mail-sheet > .mail-actions { padding: 12px 14px; } }
.mail-sheet .mail-head-star { font-size: 13px; padding: 6px 12px; }
body.theme-light .mail-chip-warn { color: #8a5300; }

/* v7.83.2 — pied des tuiles CV : état (Standardisé | bouton, ou poste tronqué | Dédié ✔), compteur pleine largeur seulement si > 1 */
.cv-tile-foot { padding: 8px 10px 10px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cv-foot-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cv-foot-std { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-foot-poste { font-size: 12.5px; font-weight: 600; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-foot-form { flex: 0 0 auto; }
.cv-foot-state > .dos-tile-btn { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.cv-foot-usage { width: 100%; text-align: center; font-size: 12px; color: var(--text-secondary); background: var(--bg-surface-2); border-radius: var(--radius-sm); padding: 3px 6px; }
.dos-tile-top { min-width: 0; flex-wrap: wrap; }

/* v7.83.2 — choix « Mail non liée à une offre » : distinct des noms d'offres dans la liste de rattachement */
.mail-attach-form option.opt-non-lie { font-style: italic; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface-2)); }
body.theme-light .mail-attach-form option.opt-non-lie { color: #8a5300; }

/* v7.83.5 — « Préparer ma candidature » : alerte en tête, tuile (niveau 0 : offre + contrôle ; bouton ; onglets CV / lettre / mail) */
.prep-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 6px; font-size: 16px; min-width: 0; }
.prep-head-name { min-width: 0; overflow-wrap: anywhere; }
.prep-alert { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; border: 1px solid currentColor; }
.prep-alert-red { color: #f87171; background: rgba(185, 28, 28, .16); }
.prep-alert-orange { color: #fbbf24; background: rgba(180, 83, 9, .18); }
.prep-alert-green { color: #4ade80; background: rgba(21, 128, 61, .16); }
body.theme-light .prep-alert-red { color: #991b1b; background: rgba(185, 28, 28, .1); }
body.theme-light .prep-alert-orange { color: #8a4b08; background: rgba(180, 83, 9, .12); }
body.theme-light .prep-alert-green { color: #166534; background: rgba(21, 128, 61, .1); }
.prep-intro { margin: 0 0 14px; }
.prep-tile { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 18px 20px 20px; }
.prep-level0 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.prep-offer-text { max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); background: var(--bg-surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 12px 14px; }
.prep-check-box { min-width: 0; max-height: 270px; overflow: auto; }
.prep-auto-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 18px; padding: 12px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.prep-tile .tabs-folder { margin-bottom: 0; --tab-panel: var(--bg-surface-2); }
.prep-tile [data-tab-pane][hidden] { display: none; }
.prep-kw-head { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--border-soft); }
.prep-sent-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
@media (max-width: 860px) { .prep-level0 { grid-template-columns: minmax(0, 1fr); } .prep-tile { padding: 12px; } }

/* v7.84 — MOBILE (≤ 760 px) : moins d'éléments fixes. Le bandeau défile avec la page (sauf Kanban), « Mon abonnement » en bas de page,
   barres d'actions non collantes, « Modifier la candidature » compacte, calendrier : export/import en bas. */
.cal-foot-actions, .mobile-only-hint, .lbl-short { display: none; }
@media (max-width: 760px) {
  body:not(.no-scroll) .topbar { position: static; backdrop-filter: none; padding: 10px 14px; }
  body.m-scrolled:not(.no-scroll) .topbar-menu-btn { position: fixed; top: 8px; left: 8px; z-index: 45; width: 40px; height: 40px; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
  .mobile-only-hint { display: block; margin: 0 0 12px; }
  /* Modifier la candidature : poste tronqué + « Créé le » sur la même ligne */
  .topbar:has(> .cview-btn-see) { flex-wrap: wrap; }
  .topbar:has(> .cview-btn-see) .page-title-big { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar:has(> .cview-btn-see) .page-title-created { flex: 0 0 auto; white-space: nowrap; }
  .topbar:has(> .cview-btn-see) > .cview-btn-see, .topbar:has(> .cview-btn-see) > a.btn { flex: 1 1 calc(50% - 6px); }
  /* barre du bas des fiches : non collante, Enregistrer + Dupliquer sur une ligne, pas de « Retour au Kanban » */
  .bottom-action-bar { position: static; backdrop-filter: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 0; padding: 12px 0 0; }
  .bottom-action-bar > * { white-space: normal; font-size: 13px; padding: 9px 8px; text-align: center; }
  .bottom-action-bar > .btn-primary { order: 1; }
  .bottom-action-bar > .btn-ghost { order: 2; }
  .bottom-action-bar > .bottom-bar-highlight { order: 3; grid-column: 1 / -1; }
  .bottom-action-bar > .btn-danger { order: 4; grid-column: 1 / -1; }
  .bottom-action-bar > :only-child { grid-column: 1 / -1; }
  .bottom-action-bar .bar-kanban-back { display: none; }
  .bottom-action-bar .lbl-full { display: none; }
  .bottom-action-bar .lbl-short { display: inline; }
  /* filtres du dashboard / exports : sur toute la largeur, dans la page */
  #dash-filter-form, #tuto-donnees-export-form, #tuto-donnees-search-form { flex-wrap: wrap; width: 100%; margin-left: 0 !important; }
  #dash-filter-form > *, #tuto-donnees-export-form > * { flex: 1 1 130px; min-width: 0; }
  /* calendrier : export / import déplacés en bas, sur une ligne */
  #cal-export-all, #open-import-ics-btn { display: none; }
  .cal-foot-actions { display: flex; gap: 8px; margin-top: 20px; }
  .cal-foot-actions > * { flex: 1 1 0; min-width: 0; justify-content: center; white-space: normal; text-align: center; }
}
@media (max-width: 760px) { .bottom-action-bar.bar-solo > .btn-primary { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .topbar:has(> .cview-btn-see) .page-title { flex: 1 1 calc(100% - 90px); margin-right: 0; }
  .topbar:has(> .cview-btn-see) > .cview-btn-see { order: 5; }
  .topbar:has(> .cview-btn-see) > a.btn:not(.cview-btn-see) { order: 6; }
}
@media (max-width: 760px) {
  .topbar:has(> .cview-btn-see) .page-title-big { flex: 1 1 55%; }
  .topbar:has(> #cal-export-all) > a.btn { flex: 1 1 28%; min-width: 0; text-align: center; justify-content: center; white-space: normal; }
}


/* v7.85 — menu latéral réorganisé : « Mon abonnement » + rappel de la formule, filet avant « Déconnexion » */
.nav-item-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nav-plan { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.nav-item.active .nav-plan { color: inherit; opacity: .85; }
.nav-sep { border: 0; border-top: 3px solid var(--border-soft); border-radius: 2px; margin: 8px 10px; width: auto; }

/* v7.86 — titres de section repliables (Outils / Utilisateur / Configuration) */
.nav-label-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: inherit; text-transform: uppercase; letter-spacing: 0.08em; }
.nav-label-btn:hover { color: var(--text); }
.nav-label-btn .nav-expand-arrow { font-size: 20px; letter-spacing: 0; text-transform: none; }
.nav-label-btn:not(.expanded) .nav-expand-arrow { transform: rotate(-90deg); }
.nav-label-btn.expanded .nav-expand-arrow { transform: none; }
.nav-section-body { display: flex; flex-direction: column; gap: 2px; }
.nav-section-body[hidden] { display: none; }

/* v7.88 — icônes SVG du menu latéral (colorées par la couleur de texte du thème : masque + currentColor) */
.nav-icon-svg { display: inline-block; width: 1.25em; height: 1.25em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.media-preview-icon { height: 90px; gap: 10px; color: var(--text); }
.media-ico { display: inline-block; width: 44px; height: 44px; background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.media-glyph { font-size: 34px; line-height: 1; }

/* v7.89 — icônes du menu : option « couleur d'accent du thème » (les libellés gardent la couleur de texte) */
body.menu-icons-accent .nav-icon-svg { background-color: var(--accent); }
.media-switch { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-surface-2); flex-wrap: wrap; }
.media-switch label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.media-switch input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
body.menu-icons-accent .media-ico { background-color: var(--accent); }

/* v7.90 — Aide > Tutoriel : tuiles de lancement */
.tuto-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tuto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.tuto-tile { --tg: var(--accent); position: relative; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; min-width: 0; font: inherit; color: var(--text-primary);
  background: color-mix(in srgb, var(--tg) 8%, var(--bg-surface-2)); border: 1px solid color-mix(in srgb, var(--tg) 35%, var(--border-soft)); border-radius: 14px; cursor: pointer; flex-wrap: wrap;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.tuto-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); border-color: var(--tg); }
.tuto-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tuto-tile[hidden], .tuto-group[hidden] { display: none; }
.tuto-art { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--tg); background: color-mix(in srgb, var(--tg) 18%, transparent); }
.tuto-art svg, .tuto-gicon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tuto-txt { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.tuto-txt strong { font-size: 14px; }
.tuto-txt small { color: var(--text-secondary); font-size: 12.5px; line-height: 1.35; }
.tuto-cta { flex: 1 0 100%; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.tuto-play { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tg); color: #14161c; font-size: 10px; padding-left: 1px; }
.tuto-tile:hover .tuto-cta { color: var(--text-primary); }
.tuto-tile-hero { padding: 18px; gap: 14px; }
.tuto-tile-hero .tuto-art { width: 64px; height: 64px; border-radius: 16px; }
.tuto-tile-hero .tuto-art svg { width: 34px; height: 34px; }
.tuto-tile-hero .tuto-txt strong { font-size: 17px; }
.tuto-tile-hero .tuto-play { width: 28px; height: 28px; font-size: 12px; }
.tuto-gicon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; vertical-align: middle; margin-right: 6px; color: var(--tg, var(--accent)); background: color-mix(in srgb, var(--tg, var(--accent)) 18%, transparent); }
.tuto-gicon svg { width: 18px; height: 18px; }
.tuto-group { margin-top: 6px; }
.tuto-g0 { --tg: #5aa9ff; } .tuto-g1 { --tg: #ffb13b; } .tuto-g2 { --tg: #34d399; } .tuto-g3 { --tg: #c084fc; } .tuto-g4 { --tg: #f472b6; } .tuto-g5 { --tg: #FFD42A; } .tuto-g6 { --tg: #fb7185; }
body.theme-light .tuto-g0 { --tg: #1d6fd8; } body.theme-light .tuto-g1 { --tg: #b86a00; } body.theme-light .tuto-g2 { --tg: #0e8a5f; } body.theme-light .tuto-g3 { --tg: #8a3fd1; } body.theme-light .tuto-g4 { --tg: #c0267a; } body.theme-light .tuto-g5 { --tg: #9a7400; } body.theme-light .tuto-g6 { --tg: #c8243f; }
@media (max-width: 760px) { .tuto-hero { grid-template-columns: minmax(0, 1fr); } }

/* v7.90 — page Extension : onglets, texte à gauche, animation à droite */
.ext-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px; align-items: start; }
.ext-main { margin: 0; min-width: 0; }
.ext-anim { position: sticky; top: 84px; }
.ext-anim img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--border-soft); background: #0f1626; }
@media (max-width: 900px) { .ext-cols { grid-template-columns: minmax(0, 1fr); } .ext-anim { position: static; max-width: 460px; } }
body.theme-light .tuto-play { color: #fff; }

/* v7.91 — Extension : sur tablette et ordinateur, le texte des onglets courts (jeton, CV, téléphone) est plus grand, en gras et aéré */
@media (min-width: 761px) {
  .ext-big { padding: 28px 30px; }
  .ext-big .dash-card-title { font-size: 21px; margin-bottom: 18px; }
  .ext-big .admin-muted, .ext-big p { font-size: 17px; font-weight: 600; line-height: 1.75; margin: 0 0 20px; color: var(--text-secondary); }
  .ext-big .form-check { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; line-height: 1.5; margin: 6px 0 4px; }
  .ext-big .form-check input[type=checkbox] { width: 22px; height: 22px; }
  .ext-big .btn { font-size: 15px; padding: 10px 18px; }
  .ext-big .form-field label { font-size: 15px; font-weight: 700; }
  .ext-big .ext-token-row { gap: 12px; padding: 14px 16px; font-size: 15.5px; font-weight: 600; margin-bottom: 10px; }
  .ext-big .list-empty { font-size: 16px; font-weight: 600; }
}

/* v7.91 — page Accessibilité interne à l'application ; Extension : lignes de jetons lisibles en grand */
.a11y-intro { max-width: 78ch; margin: 0 0 16px; }
.a11y-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; align-items: start; }
.a11y-settings { display: grid; gap: 16px; min-width: 0; }
.a11y-card { margin: 0; min-width: 0; }
.a11y-legend { float: left; width: 100%; font-weight: 700; font-size: 17px; padding: 0; margin: 0 0 4px; }
.a11y-legend + .a11y-opts { clear: both; }
.a11y-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.a11y-opts-col { flex-direction: column; }
.a11y-opt { display: block; cursor: pointer; }
.a11y-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.a11y-opt-box { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-surface-2); line-height: 1.4; }
.a11y-opts-col .a11y-opt-box { flex-direction: row; align-items: center; gap: 12px; }
.a11y-opts-col .a11y-opt-box::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--text-secondary); border-radius: 50%; }
.a11y-opts-col input[type=checkbox] + .a11y-opt-box::before { border-radius: 5px; }
.a11y-opt input:checked + .a11y-opt-box { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.a11y-opts-col input:checked + .a11y-opt-box::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 45%, transparent 50%); }
.a11y-opts-col input[type=checkbox]:checked + .a11y-opt-box::before { background: var(--accent); box-shadow: inset 0 0 0 3px var(--bg-surface-2); }
.a11y-opt input:focus-visible + .a11y-opt-box { outline: 3px solid var(--accent); outline-offset: 2px; }
.a11y-opt small { font-size: 12px; color: var(--text-secondary); }
.a11y-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.a11y-preview { position: sticky; top: 84px; margin: 0; }
.a11y-sample { border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px; background: var(--bg-surface-2); }
.a11y-sample-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .a11y-cols { grid-template-columns: minmax(0, 1fr); } .a11y-preview { position: static; } }
@media (min-width: 761px) {
  .ext-big .ext-token-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 4px; }
  .ext-big .ext-token-row > code, .ext-big .ext-token-row > span:first-child { grid-column: 1; }
  .ext-big .ext-token-row > .admin-muted { grid-column: 1; font-size: 14.5px; margin: 0; }
  .ext-big .ext-token-row > .ext-revoke { grid-column: 2; grid-row: 1 / span 2; }
}


/* v7.92 — Mon abonnement : formules, ma formule en accent, crédits toujours visibles, onglets */
.abo-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 1200px; }
.abo-offer.is-current .admin-muted { color: var(--text); }
.abo-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.abo-offer.is-current { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg-surface); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.abo-hero { border: 1px solid var(--accent); border-left-width: 6px; border-radius: 16px; padding: 22px 26px;
  background: linear-gradient(135deg, var(--accent-soft), transparent 85%), var(--bg-surface); }
.abo-hero-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.abo-hero-name { font-size: 28px; font-weight: 800; line-height: 1.2; margin: 2px 0 10px; }
.abo-hero-tier { font-size: 14px; font-weight: 600; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--bg-surface-2); color: var(--text); border: 1px solid var(--accent); vertical-align: middle; }
.abo-credits { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 8px 28px; align-items: center;
  border: 2px solid var(--accent); border-radius: 16px; padding: 18px 24px; background: var(--bg-surface-2); }
.abo-credits-title { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.abo-credits-balance { font-size: 15px; }
.abo-credits-balance b { font-size: 30px; font-weight: 800; margin-right: 6px; color: var(--accent-strong, var(--accent)); }
.abo-credits-packs { display: flex; flex-wrap: wrap; gap: 10px; }
.abo-pack { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; flex: 1 1 190px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-surface); }
.abo-pack .ai-pack-n { font-weight: 800; font-size: 16px; }
.abo-pack .ai-pack-price { font-weight: 700; text-align: right; }
.abo-pack .ai-pack-unit { font-size: 12px; color: var(--text-secondary); }
.abo-pack .btn { grid-column: 2; grid-row: 2; }
.abo-credits-note { grid-column: 1 / -1; margin: 4px 0 0; }
.abo-early { margin-top: 16px; }
@media (max-width: 860px) { .abo-credits { grid-template-columns: minmax(0, 1fr); } .abo-hero { padding: 18px; } .abo-hero-name { font-size: 24px; } }

.nav-item.active .nav-plan { opacity: 1; }

/* v8.01 — Mon abonnement : bloc « Gratuit pour tout le monde ».
   Grand écran (>= 1900 px) : grand bloc dans l'espace vide à DROITE de toute la page, du haut de « Les formules »
   jusqu'en bas ; la largeur des blocs de gauche est inchangée. En dessous : sous le bloc à onglets. */
.abo-page { position: relative; align-content: start; }
.abo-free { margin: 0; min-width: 0; border-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), transparent 80%), var(--bg-surface); }
.abo-free .dash-card-title { font-size: 20px; }
.abo-free .settings-hint { font-size: 14px; }
.abo-free-list { margin: 12px 0 0; padding: 0; list-style: none; line-height: 1.5; font-size: 17.5px; }
.abo-free-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; overflow-wrap: anywhere; }
.abo-free-ico { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; border-radius: 9px; background: var(--bg-surface-2); border: 1px solid var(--border-soft); }
@media (min-width: 1900px) {
  .abo-free { position: absolute; top: 0; left: calc(100% + 24px); width: min(720px, calc(100vw - 1540px)); padding: 24px 28px; }
  /* v8.56 : liste sur deux colonnes, police plus petite — sinon le bloc dépassait le bas de la page (fond et menu coupés) */
  .abo-free-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 18px; font-size: 15px; line-height: 1.35; }
  .abo-free-list li { margin-bottom: 7px; gap: 10px; }
  .abo-free-ico { width: 26px; height: 26px; font-size: 15px; }
}
/* v8.52 — sous 1900 px, le bloc passe sous la page : liste en colonnes (au lieu d'une longue colonne en grosse police) */
@media (max-width: 1899px) {
  .abo-free-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 20px; font-size: 15px; line-height: 1.35; }
  .abo-free-list li { margin-bottom: 7px; gap: 10px; }
  .abo-free-ico { width: 26px; height: 26px; font-size: 15px; }
}

/* v8.02 — Mode assisté : candidature automatique sur un seul écran */
.aa-wrap{width:100%}
.aa-layout{display:block}
.aa-page{width:100%;max-width:1100px}
.aa-steps{margin-bottom:22px}
.aa-card{margin-bottom:18px;padding:22px}
.aa-h{margin:0 0 10px;font-size:1.25em}
.aa-card p,.aa-card label{font-size:1.02em}
.aa-done{opacity:.92}
.aa-input{width:100%;margin-bottom:14px;font-size:1.05em;padding:12px 14px}
.aa-btn{font-size:1.05em;padding:12px 22px}
.aa-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.aa-checks{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:.5rem}
.aa-check{border-left:4px solid #15803d;padding:.4rem .7rem}
.aa-check-red{border-left-color:#b91c1c}
.aa-check-orange{border-left-color:#b45309}
.aa-ok{color:#15803d;font-weight:600}
.aa-loader{display:none;position:relative;overflow:hidden;background:linear-gradient(180deg,#0b1026,#1b1146 70%,#2a1b5e);color:#a5b4fc;border-color:#2c2f66}
@media (min-width:700px){
  /* v8.11 : la roue est une colonne à part, calée en haut de la PREMIÈRE tuile (même haut que le premier bloc de gauche) ;
     sa hauteur est ajustée par le script de la page pour égaler celle de cette tuile (min-height de repli sinon). */
  .aa-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:28px;align-items:start}
  .aa-page{max-width:none;grid-column:1;grid-row:1;min-width:0}
  .aa-loader{grid-column:2;grid-row:1;align-self:start;margin:0;box-sizing:border-box;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px 12px;border:1px solid var(--border,#3a3a4a);border-radius:16px;text-align:center}
}
@media (min-width:1200px){
  .aa-layout{grid-template-columns:minmax(0,1fr) 280px}
  .aa-card{padding:30px 34px}
  .aa-h{font-size:1.4em}
}
.aa-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aa-stars{position:absolute;top:0;left:0;width:2px;height:2px;border-radius:50%;animation:aa-stars-fall linear infinite;animation-play-state:paused;opacity:.5}
.aa-stars::after{content:"";position:absolute;top:-600px;left:0;width:inherit;height:inherit;border-radius:50%;box-shadow:var(--s)}
.aa-stars-1{--s:19px 98px #fff,85px 68px #fff,176px 335px #fff,281px 424px #fff,237px 438px #fff,290px 448px #fff,265px 328px #fff,286px 561px #fff,225px 145px #fff,211px 401px #fff,32px 424px #fff,146px 150px #fff,100px 145px #fff,158px 216px #fff,257px 212px #fff,52px 101px #fff,198px 66px #fff,134px 381px #fff,20px 64px #fff,48px 223px #fff,15px 148px #fff,127px 250px #fff,140px 154px #fff,245px 82px #fff,168px 269px #fff,273px 530px #fff;box-shadow:var(--s);animation-duration:7s}
.aa-stars-2{--s:213px 34px #fff,130px 87px #fff,63px 314px #fff,202px 278px #fff,78px 500px #fff,240px 196px #fff,142px 545px #fff,95px 411px #fff,110px 279px #fff,211px 496px #fff,215px 264px #fff,288px 66px #fff,272px 361px #fff,259px 584px #fff,194px 57px #fff,40px 452px #fff;box-shadow:var(--s);animation-duration:12s;width:3px;height:3px}
.aa-stars-3{--s:222px 129px #ffe9a8,62px 372px #ffe9a8,252px 213px #ffe9a8,13px 400px #ffe9a8,194px 251px #ffe9a8,132px 455px #ffe9a8,77px 60px #ffe9a8,145px 117px #ffe9a8;box-shadow:var(--s);animation-duration:20s;width:3px;height:3px}
@keyframes aa-stars-fall{to{transform:translateY(600px)}}
.aa-orbit{position:relative;z-index:1;width:132px;height:132px;display:flex;align-items:center;justify-content:center}
.aa-orbit .aa-wheel{position:absolute;inset:0;opacity:.45;transition:opacity .2s}
.aa-rocket{position:relative}
.aa-flame{transform-origin:32px 46px}
.aa-loader-msg{position:relative;z-index:1;margin:0;font-size:.95em;opacity:.75;color:#e0e4ff}
.aa-busy .aa-stars{animation-play-state:running;opacity:1}
.aa-busy .aa-orbit .aa-wheel{opacity:1;color:var(--accent,#8b7bff);animation:aa-spin 1.6s linear infinite}
.aa-busy .aa-rocket{animation:aa-rocket-float 1.8s ease-in-out infinite}
.aa-busy .aa-flame{animation:aa-flame .18s ease-in-out infinite alternate}
.aa-busy .aa-loader-msg{opacity:1;font-weight:600}
@keyframes aa-spin{to{transform:rotate(360deg)}}
@keyframes aa-rocket-float{0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)}}
@keyframes aa-flame{from{transform:scaleY(.8)}to{transform:scaleY(1.25)}}
@media (prefers-reduced-motion:reduce){.aa-busy .aa-orbit .aa-wheel{animation-duration:4s}.aa-busy .aa-stars{animation-duration:40s}.aa-busy .aa-rocket,.aa-busy .aa-flame{animation:none}}
/* v8.69 — mobile : pendant la réflexion de l'IA, une fenêtre plein écran (on ne reste pas sur une page qui charge sans le savoir) */
@media (max-width:699px){
  .aa-busy .aa-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;position:fixed;inset:0;z-index:10000;border:0;border-radius:0;margin:0;padding:24px;min-height:100dvh;height:100dvh!important}
  .aa-busy .aa-orbit{width:180px;height:180px}
  .aa-busy .aa-orbit .aa-wheel{width:180px;height:180px}
  .aa-busy .aa-rocket{width:80px;height:80px}
  .aa-busy .aa-loader-msg{font-size:1.1em;text-align:center;max-width:80%}
}
html.aa-busy-lock{overflow:hidden}
@media (min-width:700px){html.aa-busy-lock{overflow:auto}}

/* v8.03 — bloc CV : score en grand, mots-clés, modèle, « Voir » */
.aa-cvhead{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.aa-cvmain{flex:1 1 320px;min-width:0}
.aa-file{margin:0 0 10px}
.aa-chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.82em;border:1px solid var(--border-soft,#3a3a4a);opacity:.9}
.aa-see{font-weight:600;white-space:nowrap}
.aa-kwtitle{margin:12px 0 4px;font-size:.88em;opacity:.75}
.aa-kw{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.aa-kw-ok,.aa-kw-miss{padding:2px 10px;border-radius:999px;font-size:.88em;border:1px solid}
.aa-kw-ok{border-color:#15803d;color:#15803d}
.aa-kw-miss{border-color:#b45309;color:#b45309}
.aa-others{margin-top:14px}
.aa-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.aa-list li{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.aa-list form{margin:0}
.aa-cvhead{margin-top:12px}

/* v8.04 — bloc CV agrandi */
.aa-cvhead{gap:36px}
.aa-cvmain{flex:1 1 420px}
.aa-file-big{font-size:1.15em;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.aa-see{white-space:nowrap}
.aa-meta{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px;font-size:1.05em}
.aa-design{font-weight:700}
.aa-date{opacity:.8}
.aa-kwtitle{font-size:1em;margin:16px 0 8px}
.aa-kw{gap:10px}
.aa-kw-ok,.aa-kw-miss{font-size:1.1em;padding:5px 16px;font-weight:600}
.aa-made{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft,#3a3a4a)}

/* v8.05 — réglage de départ, compteur de parcours, tuiles du bloc CV */
.aa-intro{max-width:900px;margin-bottom:16px;font-size:1.02em}
.aas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.aas-tile{position:relative;display:block;border:2px solid var(--border-soft,#3a3a4a);border-radius:10px;padding:8px;cursor:pointer;text-align:center}
.aas-tile input{position:absolute;opacity:0;pointer-events:none}
.aas-tile img{display:block;width:100%;height:auto;border-radius:4px;background:#fff}
.aas-tile.is-selected,.aas-tile:hover{border-color:var(--accent,#ffd23f);box-shadow:0 0 0 2px var(--accent-soft,rgba(255,210,63,.25))}
.aas-label{display:block;margin-top:6px;font-weight:600;font-size:.92em}
.aa-quota{margin:0 0 14px;font-size:.98em;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.aa-quota strong{font-size:1.05em}
.aa-setup-link{font-size:.9em;opacity:.85}
.aa-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:6px}
.aa-tilerow{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.aa-tilerow>.aa-tile{flex:1 1 0;min-width:0;padding:16px}
.aa-tilerow>#aa-tile-score{flex:0 0 200px}
.aa-tilerow>#aa-tile-doc{flex:0 0 150px;display:flex;flex-direction:column}
.aa-tilerow .aa-bigsee{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:130px;font-size:1.1em;padding:14px 8px}
.aa-tilerow .aa-bigdesign{margin-top:2px}
.aa-tile{border:1px solid var(--border-soft,#3a3a4a);border-radius:12px;padding:18px 20px;min-width:0}
.aa-tile-wide,.aa-tile-made{grid-column:1/-1}
.aa-tile-title{margin:0 0 12px;font-size:.95em;font-weight:700;opacity:.85}
.aa-tile-score{display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.aa-tile-score .aa-name{font-size:1.05em;font-weight:700;word-break:break-word;margin:0}
.aa-bigdate{font-size:1.2em;font-weight:700;margin:0 0 14px}
.aa-bigsee{display:block;text-align:center;font-size:1.25em;font-weight:700;padding:16px 20px;margin-bottom:14px}
.aa-bigdesign{margin:0;font-size:1.1em;font-weight:700}
.aa-tile .aa-kw{gap:10px}
@media (max-width:760px){.aa-tilerow{flex-wrap:wrap}.aa-tilerow>.aa-tile,.aa-tilerow>#aa-tile-score,.aa-tilerow>#aa-tile-doc{flex:1 1 100%}.aa-tilerow .aa-bigsee{flex:0 0 auto;min-height:0}}

/* v8.05.4 — blocs plus bas, étapes empilées du plus récent (en haut) au plus ancien */
.aa-line{display:flex;gap:6px 18px;align-items:center;flex-wrap:wrap}
.aa-line .aa-h{margin:0}
.aa-line p,.aa-line .aa-inline{margin:0}
.aa-card.aa-done{padding-top:16px;padding-bottom:16px}
.aa-kwcol{flex:2.8 1 380px;min-width:0;display:flex;flex-direction:column;gap:14px}
.aa-kwpair{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.aa-kwpair>.aa-tile{flex:1 1 180px;padding:14px 16px}
.aa-kwcol>.aa-tile-made{padding:12px 16px}
.aa-tile-made .aa-tile-title{margin-bottom:8px}
.aa-tilerow>.aa-kwcol{padding:0;border:0}
@media (max-width:760px){.aa-tilerow>.aa-kwcol{flex:1 1 100%}}
.aa-tile-made .aa-inline{flex-wrap:wrap;margin-top:0}
.aa-tile-made select{width:auto;max-width:100%}
.aa-tile-made .aa-tile-title{display:inline-block;margin:0 0 8px}

/* v8.05.5 — quota au-dessus de la grille (la roue s'aligne sur le premier bloc) ; téléchargement puis « J'ai candidaté » */
.aa-quotabar{margin:0 0 6px}
.aa-quotabar .aa-quota{margin:0 0 12px}
.aa-dl{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:6px 0 14px}
.aa-dl-hint{margin:0;opacity:.85}
.aa-dl-next{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.aa-dl-next[hidden]{display:none}

/* v8.06 — menu latéral : sur desktop il garde la hauteur de la fenêtre et défile seul (scrollbar fine) quand c'est lui qui dépasse,
   sur toutes les pages (avant : seul le Kanban/l'Accueil le faisaient, ailleurs c'était toute la page qui défilait). */
/* v8.23 : à partir de 1101px seulement — entre 901 et 1100px le menu est un tiroir (position fixe) ; la règle « sticky » le remettait
   dans le flux et poussait tout le contenu de la page sous un écran vide (accueil « écrasé », pages vides sur tablette / petit portable). */
@media (min-width: 1101px) {
  .app-shell > .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; max-height: 100vh; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; }
}

/* v8.06 — Nouvelle candidature : « Postuler en 1 clic » en grande tuile principale, les autres modes dessous */
.choice-hero{display:flex;align-items:center;gap:22px;max-width:1000px;padding:30px 34px}
.choice-hero .choice-card-icon{font-size:52px;margin:0}
.choice-hero .choice-card-title{font-size:24px}
.choice-hero .choice-card-desc{font-size:15.5px;margin:0}
.choice-grid.choice-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px}
@media (max-width:760px){.choice-grid.choice-grid-3{grid-template-columns:1fr}.choice-hero{padding:22px}}

/* v8.08 — fiche entreprise automatique */
.company-lookup{margin-top:6px;}
.company-lookup .cl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;border:1px dashed var(--border,#d1d5db);border-radius:8px;font-size:14px;}
.company-lookup .cl-logo{width:28px;height:28px;object-fit:contain;border-radius:4px;background:#fff;}
.company-lookup .cl-text{flex:1 1 160px;overflow-wrap:anywhere;}

/* v8.12 — CV sur mesure : alerte « plus de crédit IA » et note */
.aa-alert{margin:0 0 10px;padding:10px 12px;border:1px solid #d9a441;border-left-width:4px;border-radius:8px;background:rgba(217,164,65,.14);color:inherit;font-size:.92rem}
.aa-validate{margin:0 0 14px;padding:12px 14px;border:1px solid var(--accent,#5b8def);border-left-width:4px;border-radius:8px;background:rgba(91,141,239,.10)}
.aa-validate p{margin:0 0 10px}
.aa-sendmore{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media (max-width:760px){.aa-sendmore{grid-template-columns:1fr}}
.aa-sendmail,.aa-cover{padding:12px 14px;border:1px solid var(--border,rgba(255,255,255,.12));border-radius:10px}
.aa-cover summary{cursor:pointer;font-weight:600}
.aa-cover textarea{margin-top:8px;width:100%;box-sizing:border-box;font-size:.9rem}
.aa-ai-note{margin:8px 0 0;font-size:.85rem}

/* v8.13 — Envoi : « Télécharger » (gauche) → flèche aux couleurs du thème → « J'ai candidaté » (droite) */
.aa-flow{display:grid;grid-template-columns:auto minmax(60px,1fr) auto;align-items:center;column-gap:20px;margin:8px 0 4px}
.aa-flow-step{display:flex;flex-direction:column;gap:10px;max-width:340px}
.aa-flow-sent{align-items:flex-end;text-align:right;justify-self:end}
.aa-flow-sent form{margin:0}
.aa-flow-btn{width:100%;min-height:64px;font-size:1.15em;white-space:normal}
.aa-flow-step .aa-dl-hint{margin:0;font-size:.9rem}
.aa-flow-arrow{display:block;position:relative;width:100%;height:40px;color:var(--accent,var(--primary,#d4a017))}
.aa-flow-arrow::before{content:"";position:absolute;left:0;right:30px;top:50%;height:12px;margin-top:-6px;border-radius:6px;background:currentColor}
.aa-flow-arrow::after{content:"";position:absolute;right:0;top:0;border-left:32px solid currentColor;border-top:20px solid transparent;border-bottom:20px solid transparent}
.aa-flow-done{grid-column:2/4;margin:0;justify-self:end}
.aa-locked{opacity:.4;filter:grayscale(1);pointer-events:none}      /* v8.69 : visible mais grisé tant qu'aucun document n'est téléchargé */
.aa-flow-sent,.aa-flow-arrow{transition:opacity .35s,filter .35s}
/* v8.69 — aperçus des documents de l'étape Envoi */
.aa-docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:6px 0 18px}
.aa-docprev{margin:0;display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start;padding:14px;border:1px solid var(--border,#3a3a4a);border-radius:14px;background:var(--bg-surface,transparent)}
.aa-docprev-img{display:block;position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border,#3a3a4a);background:#fff;aspect-ratio:210/297;transition:transform .15s,box-shadow .15s}
.aa-docprev-img:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.aa-docprev-img img{display:block;width:100%;height:100%;object-fit:cover}
.aa-docprev-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-size:2.4rem;color:#555}
.aa-nothumb .aa-docprev-fallback{display:flex}
.aa-docprev figcaption{display:flex;flex-direction:column;gap:6px;min-width:0}
.aa-docprev-kind{font-size:.72em;letter-spacing:.1em;text-transform:uppercase;opacity:.6;font-weight:700}
.aa-docprev-name{overflow-wrap:anywhere}
.aa-docprev-btns{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.aa-docprev-btns .aa-dl{min-height:48px;white-space:normal}
.aa-pack-btn{min-height:48px;font-size:1em}
@media (max-width:480px){.aa-docprev{grid-template-columns:90px minmax(0,1fr)}}
@media (max-width:760px){
  .aa-flow{grid-template-columns:1fr;row-gap:12px}
  .aa-flow-step,.aa-flow-sent{max-width:none;align-items:stretch;text-align:left;justify-self:stretch}
  .aa-flow-arrow{width:90px;justify-self:center;transform:rotate(90deg);margin:25px 0}
  .aa-flow-done{grid-column:1}
}
/* v8.14 — score avant → après */
.aa-before-after{margin:6px 0 0;font-weight:600}
.aa-before-after .aa-up{color:var(--ok,#2e7d32)}
.aa-before-after .aa-down{color:var(--danger,#c62828)}
.aa-made-actions{margin-top:8px}
.aa-made-actions form{margin-top:0}
/* v8.15 — rapport IA dans le bloc CV, badge IA, mots cliquables, fenêtre d'aide, compteur */
.aa-report{border-left:4px solid var(--accent,#5b8def);background:var(--surface-2,rgba(91,141,239,.08));padding:10px 14px;border-radius:8px;margin:0 0 12px}
.aa-report p{margin:4px 0}
.aa-report-warn{border-left-color:var(--warning,#e0a100)}
.aa-ai-badge{display:inline-block;font-size:.62rem;font-weight:700;line-height:1;padding:2px 4px;margin-left:3px;border-radius:6px;background:var(--accent,#5b8def);color:#fff;text-decoration:none;vertical-align:middle;cursor:help}
.aa-pick{display:inline-flex;align-items:center;gap:2px;padding:0}
.aa-pick button{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:2px 6px}
.aa-pick.is-yes{background:var(--ok-bg,rgba(46,125,50,.18));outline:2px solid var(--ok,#2e7d32)}
.aa-pick.is-yes .aa-pick-main::before{content:"+ "}
.aa-pick.is-ignored .aa-pick-main{opacity:.55}
.aa-flash{animation:aaflash 1.2s ease 2}
@keyframes aaflash{50%{box-shadow:0 0 0 4px var(--accent,#5b8def)}}
.aa-modal{border:0;border-radius:12px;padding:20px;max-width:460px;width:calc(100% - 32px);background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border)}
.aa-modal::backdrop{background:rgba(0,0,0,.45)}
.aa-modal-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.aa-advice{background:rgba(224,161,0,.15);border-radius:8px;padding:8px 12px;font-weight:600}
.aa-gen-counter{margin-left:12px}
/* v8.17 — modifications d'une version, libellé du score */
.aa-score-label{margin:6px 0 0;font-weight:700;color:var(--ok,#2e7d32);text-align:center}
mark.aa-chg{background:rgba(255,213,79,.55);color:inherit;padding:0 2px;border-radius:3px}
.aa-moved{color:var(--accent,#5b8def);font-size:.9em}
.aa-field{font-weight:700;margin:10px 0 2px}
/* v8.69 — page « Voir les modifications » : encart d'explication séparé du document, lignes en 2 colonnes (texte | pourquoi) */
.aa-changes{display:grid;gap:22px;max-width:1100px}
.aa-chg-intro{background:color-mix(in srgb,var(--accent,#7c5cff) 10%,transparent);border:1px dashed color-mix(in srgb,var(--accent,#7c5cff) 55%,transparent);border-radius:14px;padding:16px 20px}
.aa-chg-intro-h{margin:0 0 4px;font-size:1.1em}
.aa-chg-intro-sub{margin:0 0 10px;opacity:.8}
.aa-chg-file{font-weight:600}
.aa-legend{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.aa-doc{position:relative;padding-top:34px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.aa-doc-tag{position:absolute;top:10px;left:20px;margin:0;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;opacity:.55;font-weight:700}
.aa-doc h3{margin:18px 0 6px}
.aa-lines{display:grid;gap:2px}
.aa-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 22px;align-items:start;padding:5px 8px;border-radius:8px;position:relative}
.aa-row-doc{display:flex;gap:8px;align-items:baseline;min-width:0}
.aa-row-doc>p{margin:0 0 4px}
.aa-line-txt{min-width:0;overflow-wrap:anywhere}
.aa-arrow{display:inline-block;width:1.2em;flex:0 0 1.2em;text-align:center;font-weight:800}
.aa-arrow-up{color:#15803d}
.aa-arrow-down{color:#b91c1c}
.aa-mv-up{background:rgba(21,128,61,.07)}
.aa-mv-down{background:rgba(185,28,28,.07)}
.aa-why{border-left:3px solid var(--accent,#7c5cff);background:var(--bg-surface,rgba(127,127,127,.08));border-radius:0 10px 10px 0;padding:8px 12px;font-size:.88em;line-height:1.4}
.aa-why p{margin:2px 0}
.aa-why-t{display:block;font-weight:700;font-size:.78em;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
@media (min-width:900px){
  .aa-row-chg{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .aa-row-chg .aa-why{position:relative}
  .aa-row-chg .aa-why::before{content:"";position:absolute;left:-23px;top:14px;width:20px;border-top:2px dotted var(--accent,#7c5cff);opacity:.7}
}

/* ===== v8.18 — pastilles de mots-clés communes (templates/_kw_pill.html, static/js/kw_marks.js) ===== */
.kwm { display: inline-flex; align-items: center; gap: 2px; }
.kwm .kwm-t { cursor: default; }
.kwm.is-miss .kwm-t, .kwm.is-implicit .kwm-t { cursor: pointer; }
.kwm .kwm-no, .kwm .kwm-imp { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0 3px; line-height: 1; }
.kwm .kwm-no { opacity: .4; font-size: .85em; }          /* discret mais visible (pas de survol sur mobile) */
.kwm:hover .kwm-no, .kwm .kwm-no:focus-visible, .kwm .kwm-imp:focus-visible { opacity: .95; }
.kwm .kwm-imp { opacity: .55; font-size: .9em; display: none; }
.kwm:hover .kwm-imp { opacity: 1; }
.kwm.is-implicit { color: var(--status-offre); border-color: rgba(47, 209, 128, .6); background: rgba(47, 209, 128, .14); }
.kwm.is-implicit .kwm-t::before { content: "✓ "; }
.kwm.is-ignored { opacity: .55; }
.kwm.is-ignored .kwm-t { text-decoration: line-through; }
.kwm.is-busy { opacity: .6; pointer-events: none; }
.kwm.is-fail { outline: 2px solid var(--danger, #e5484d); outline-offset: 1px; }          /* v8.103 : marque non enregistrée */
.kwm-help { margin: 6px 0 0; font-size: .82em; }
.kwm-note { display: inline-block; margin-left: 8px; font-size: .85em; color: var(--status-offre); }
.kwm-note[hidden] { display: none; }
/* variante du parcours « Postuler en 1 clic » : ✓ à gauche (visible sur les mots absents et implicites), ⊘ à droite */
.kwm--assist.is-miss .kwm-imp, .kwm--assist.is-implicit .kwm-imp { display: inline-block; }
.kwm--assist.is-ok .aa-pick-main, .kwm--assist.is-implicit .aa-pick-main { pointer-events: none; cursor: default; }
.kwm--assist.is-implicit { color: var(--status-offre); border-color: rgba(47, 209, 128, .7); background: rgba(47, 209, 128, .16); }
.kwm--assist.is-implicit .aa-pick-main::before { content: ""; }
.kwm--assist.is-ignored .aa-pick-main { text-decoration: line-through; pointer-events: none; }
.kwm--assist.is-implicit .kwm-t::before { content: ""; }
body.theme-light .kwm.is-implicit, body.theme-light .kwm--assist.is-implicit { color: #15803d; }

/* v8.18 — carte CV du parcours : UNE colonne (anneau + textes verts / bouton « Voir » large et plat / « Voir les modifications ») */
.aa-tilerow>#aa-tile-score.aa-tile-main{flex:0 0 220px;box-sizing:border-box;display:flex;flex-direction:column;gap:6px}
.aa-tilerow>.aa-kwcol{flex:2.8 1 330px}
.aa-tile-main .aa-tile-score{gap:8px}
.aa-tile-main .aa-doc-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.aa-tile-main .aa-widesee{display:block;width:100%;box-sizing:border-box;text-align:center;font-size:1em;font-weight:700;padding:9px 10px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
.aa-tile-main .aa-small{margin:0;font-size:.82em;opacity:.8;text-align:center}
.aa-tile-main .aa-score-label,.aa-tile-main .aa-before-after{text-align:center;color:var(--ok,#2e7d32)}
.aa-tile-main .aa-before-after{margin:2px 0 0}
.aa-tile-main .aa-score-label[hidden]{display:none}
@media (max-width:760px){.aa-tilerow>#aa-tile-score.aa-tile-main,.aa-tilerow>.aa-kwcol{flex:1 1 100%}}

/* v8.23 — Accueil : la tuile « Rapport hebdo / mensuel » n'est plus écrasée (texte coupé « 21 candi… ») : les deux tuiles de comptage
   côte à côte, les deux rapports dessous sur toute la largeur, côte à côte, texte complet. */
@media (min-width: 901px) and (min-height: 640px) {
  body.resume-fit .home-tile-row-secondary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; }
  body.resume-fit .home-tile-row-secondary .home-tile-split { grid-column: 1 / -1; flex-direction: row; padding: 0; }
  body.resume-fit .home-tile-split-half { flex: 1 1 0; min-width: 0; padding: 10px 14px; }
  body.resume-fit .home-tile-split-half:first-child { border-bottom: 0; border-right: 1px solid var(--border-soft); }
  body.resume-fit .home-tile-split .home-tile-sub { white-space: normal; overflow: visible; }
  body.resume-fit .home-tile-row-secondary .home-tile:not(.home-tile-split) { padding: 12px 14px; }
}

/* v8.23 — Dashboard « Évolution par statut » : sur petit écran le graphique garde sa taille lisible et défile horizontalement ; il
   s'ouvre calé sur la période la plus récente (avant : on ne voyait que les premiers mois, le reste paraissait coupé). */
.chart-scroll-hint { display: none; margin: 4px 0 0; font-size: 12px; }
.chart-svg-wrap.is-scrollable + .chart-scroll-hint, .chart-svg-wrap.is-scrollable ~ .chart-scroll-hint { display: block; }
@media (max-width: 400px) { .chart-card .chart-svg-wrap { overflow-x: auto; } }

/* v8.24 — score de priorité des offres « À faire » (Kanban, Accueil) */
.job-prio{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;border:1px solid transparent}
.job-prio-haute{color:#22c55e;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35)}
.job-prio-moyenne{color:#eab308;background:rgba(234,179,8,.12);border-color:rgba(234,179,8,.35)}
.job-prio-basse{color:var(--text-secondary);background:rgba(148,163,184,.10);border-color:rgba(148,163,184,.3)}
.prio-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border-soft)}
.prio-row:last-child{border-bottom:0}
.prio-main{flex:1;min-width:0}
.prio-main strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prio-why{font-size:12px;color:var(--text-secondary);margin-top:2px}
.prio-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:600px){.prio-row{flex-wrap:wrap}.prio-actions{width:100%;justify-content:flex-start}}

/* v8.25 — Mon IA : jauge de consommation par fonction (vert, orange au dernier dixième, rouge à 2 actions ou moins) */
.ai-gauge{flex:1 0 100%;height:6px;border-radius:99px;background:rgba(148,163,184,.18);overflow:hidden;margin-top:2px}
.ai-gauge i{display:block;height:100%;border-radius:99px;transition:width .3s}
.ai-gauge-green{background:#22c55e}.ai-gauge-orange{background:#f59e0b}.ai-gauge-red{background:#ef4444}

/* v8.25 — Postuler en 1 clic : parcours en cours à reprendre */
.aa-runs{list-style:none;margin:8px 0 0;padding:0}
.aa-runs li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border-soft)}
.aa-runs li:first-child{border-top:0}
.aa-run-main{min-width:0;overflow-wrap:anywhere}
.aa-run-step{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;background:rgba(148,163,184,.14);color:var(--text-secondary)}
.aa-run-step-4{background:rgba(34,197,94,.14);color:#22c55e}

/* v8.27 — Postuler en 1 clic : retouche du texte de la lettre */
.aa-letter-edit{margin:10px 0 12px;padding:10px 14px;border:1px solid var(--border-soft);border-radius:10px}
.aa-letter-edit summary{cursor:pointer;font-weight:600}
.aa-letter-edit textarea{width:100%;box-sizing:border-box;margin-top:10px;line-height:1.5}
.aa-letter-opts{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.aa-letter-opts label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--text-secondary)}
.aa-letter-wish{flex:1 1 260px}
.aa-letter-wish input{width:100%;box-sizing:border-box}

/* v8.30 — Ma vitrine : recommandations */
.sv-reco{padding:10px 0;border-top:1px solid var(--border-soft)}
.sv-reco-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.sv-reco-fields textarea{grid-column:1/-1}
.sv-reco-fields input,.sv-reco-fields textarea{width:100%;box-sizing:border-box}
@media (max-width:600px){.sv-reco-fields{grid-template-columns:1fr}}

/* v8.31 — Postuler en 1 clic : lettres de recommandation jointes */
.aa-extras{margin-top:16px;padding:12px 14px;border:1px solid var(--border-soft);border-radius:10px}
.aa-extra-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;margin:0}
.aa-extra-row span{min-width:0;overflow-wrap:anywhere}

/* v8.32 — simulateur d'entretien : mes séances */
.mi-sessions{list-style:none;margin:8px 0 0;padding:0}
.mi-sessions li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--border-soft)}
.mi-sessions li:first-child{border-top:0}
.mi-sessions li.is-current{background:rgba(234,179,8,.06)}
.mi-s-main{min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:2px}
.mi-s-actions{display:flex;gap:6px;align-items:center}
.mi-story-pick{margin-top:6px}
.mi-story-pick select{max-width:100%}

/* v8.53 — fenêtre de cadrage des images (static/js/photo-cropper.js) */
.jcrop-back { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.65); display: grid; place-items: center; padding: 16px; }
.jcrop-box { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 14px; padding: 18px; max-width: 420px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.jcrop-title { font-weight: 700; font-size: 1.1em; }
.jcrop-help { font-size: .88em; opacity: .75; text-align: center; }
.jcrop-stage { position: relative; overflow: hidden; background: #111; border-radius: 6px; cursor: grab; touch-action: none; user-select: none; }
.jcrop-stage:active { cursor: grabbing; }
.jcrop-stage.is-round { border-radius: 50%; }
.jcrop-img { position: absolute; max-width: none; pointer-events: none; }
.jcrop-zoom { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 340px; }
.jcrop-zoom input { flex: 1; }
.jcrop-actions { display: flex; gap: 8px; justify-content: flex-end; width: 100%; max-width: 340px; }

/* v8.54 — adresses bloquées (boîte mail) */
.mail-blocked-ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.mail-spam-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

/* v8.54 — page « Bibliothèques de mots-clés » : explication, onglets Mes bibliothèques / Catalogue, tuiles au lieu de lignes */
.kwtab-count { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 11.5px; font-weight: 700; text-align: center; }
.kwexplain { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.kwexplain-title { margin: 0 0 6px; font-size: 1.05em; }
.kwexplain-lead { margin: 0 0 12px; max-width: 70ch; color: var(--text-secondary); }
.kwexplain-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kwexplain-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: .92em; }
.kwexplain-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.kwexplain-tip { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); font-size: .9em; }
.kw-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kw-summary .kw-summary-txt { flex: 1 1 260px; margin: 0; }
.kwgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; align-items: start; }
.kwgrid > .kwlib-row, .kwlib-group.kwgrid > .kwlib-row { margin: 0; }
.kwtile { display: flex; flex-direction: column; border-radius: 14px; }
.kwtile .kwlib-summary { flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; cursor: default; }
.kwtile .kwlib-expander { flex: 1 1 0; }
.kwtile .kwlib-name { white-space: normal; font-size: 1.02em; }
.kwtile-meta { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kwtile .kwlib-actions { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }
.kwtile.is-open { grid-column: 1 / -1; }
.kwtile.is-open .kwlib-body { padding: 4px 14px 14px; }
.kwlib-filter { display: inline-flex; gap: 4px; }
.kwlib-chip { border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.kwlib-chip.is-on { background: var(--accent-soft); color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 40%, transparent); font-weight: 700; }
.kwcat-block { margin-bottom: 26px; }

/* v8.56 — Postuler, étape « Lettre de motivation » : la carte est une ligne flex (.aa-line) ; la liste des lettres et le formulaire
   prennent désormais toute la largeur (boutons « Choisir cette lettre » alignés à droite comme pour les CV, « Passer cette étape »
   sous le bouton principal au lieu de flotter à côté du formulaire). */
#aa-step-lm .aa-line > details, #aa-step-lm .aa-line > .aa-inline, #aa-step-lm .aa-line > .aa-meta { flex: 1 1 100%; min-width: 0; }
#aa-step-lm .aa-line > .aa-inline { margin-top: 12px; align-items: flex-end; }
#aa-step-lm .aa-letter-form { flex: 1 1 100%; }
#aa-step-lm .aa-list li > span { min-width: 0; overflow-wrap: anywhere; }

/* v8.56 — boutons d'action du détail d'entretien (calendrier) : grille 2 × 2, tous de la même taille même quand un libellé passe sur deux lignes */
.modal-actions-large { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.modal-actions-large > form { display: flex; margin: 0; }
.modal-actions-large .btn { width: 100%; min-height: 50px; height: 100%; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 560px) { .modal-actions-large { grid-template-columns: minmax(0, 1fr); } }
.jcrop-shapes { display: flex; gap: 8px; justify-content: center; margin: 10px 0 0; }
.jcrop-shape-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
textarea.ai-summary-placed { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color .4s ease; }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent-strong); text-decoration: underline; cursor: pointer; font: inherit; }
.aa-spont-data { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.aa-spont-data summary { cursor: pointer; font-weight: 600; }

/* v8.59 — « 🧭 Ce que cherche le recruteur » (analyse commune de l'offre) */
.offer-brief { margin: 14px 0 0; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-soft)); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-surface) 70%); }
.offer-brief-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.offer-brief-title { margin: 0; font-size: 15px; }
.offer-brief-tone { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); }
.offer-brief-ctx { margin: 8px 0 0; color: var(--text-secondary); }
.offer-brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px 18px; margin-top: 10px; }
.offer-brief-grid h4 { margin: 0 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.offer-brief-grid ol, .offer-brief-grid ul { margin: 0; padding-left: 18px; line-height: 1.45; }
.offer-brief-warn h4 { color: var(--warning); }
.offer-brief-note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted); }
.offer-brief-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }

/* v8.61 — compte de démo */
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--accent-soft); }
.landing-demo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; position: relative; z-index: 10; }
.landing-demo-btn { font-weight: 700; color: #fff !important; border: 1px solid rgba(255,255,255,.6) !important; background: rgba(255,255,255,.10) !important; backdrop-filter: blur(4px); }
.landing-demo-btn:hover { background: rgba(255,255,255,.2) !important; }
.landing-demo-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.85); }
.landing-demo-pick select { max-width: 260px; }
.landing-demo small { color: rgba(255,255,255,.75); font-size: 12px; text-align: center; max-width: 360px; }
.aa-brief-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13.5px; }
.aa-brief-chip { padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }

/* v8.61 — double authentification */
.twofa-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.twofa-row input { max-width: 180px; font-size: 16px; letter-spacing: 2px; }
.twofa-setup { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.twofa-qr svg { display: block; width: 240px; height: 240px; background: #fff; border-radius: 8px; shape-rendering: crispEdges; image-rendering: pixelated; }
.twofa-secret { font-size: 15px; letter-spacing: 1px; word-break: break-all; }
.twofa-codes { border: 2px solid var(--accent); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 12px; background: var(--accent-soft); }
.twofa-codes ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 8px 0 0; }

/* v8.64 : bouton « Postuler » de la vue rapide, grisé hors « À faire » */
#qv-assist-link.is-off { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); pointer-events: auto; }
/* v8.64 : champs manquants dans l'étape Annonce du parcours Postuler */
.aa-missing-offer { margin-top: 12px; padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius-md); }
.aa-missing-offer textarea { width: 100%; }
.aa-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.aa-inline-form input { flex: 1 1 220px; }

/* v8.64 : accès à la démo — « Tester » plus discret, lien « avec la visite guidée » en texte */
.landing-demo-guided { background: none; border: 0; color: rgba(255,255,255,.85); text-decoration: underline; cursor: pointer; font-size: 13px; padding: 2px; }
.vt-demo-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.vt-demo-pick { display: flex; flex-direction: column; gap: 4px; font-size: 13px; text-align: left; }
.vt-demo-pick select { width: 100%; }

/* v8.64 : option non incluse dans la formule — visible, surlignée en doré, avec l'étiquette « Compte Premium uniquement » par-dessus */
.plan-gold { position: relative; outline: 1px solid #d4a72c; outline-offset: 2px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(212,167,44,.16), rgba(255,226,140,.10)); }
.plan-gold::after { content: attr(data-plan-label); position: absolute; top: -9px; right: 6px; z-index: 2; pointer-events: none;
  background: #d4a72c; color: #231a00; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.plan-gold input[disabled] + .switch-slider, .plan-gold input[disabled] { opacity: .8; }
.plan-gold { cursor: pointer; }
.plan-gold input[disabled], .plan-gold select[disabled] { pointer-events: none; }
/* v8.85 : étiquette dorée « Premium / Ultimate uniquement », cliquable vers Mon abonnement */
.plan-lock { display: inline-block; background: #d4a72c; color: #231a00 !important; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 9px;
  border-radius: 999px; white-space: nowrap; text-decoration: none; vertical-align: middle; margin: 0 6px 0 0; }
.plan-lock:hover { background: #e6bb45; text-decoration: none; }
/* v8.65 : accueil — Se connecter / S'inscrire / Tester sur une seule ligne */
.landing-actions .btn { flex: 0 1 auto; white-space: nowrap; }
@media (max-width: 440px) { .landing-actions { gap: 8px !important; } .landing-actions .btn { padding-inline: 12px; font-size: 13px; } }

/* v8.66 — fenêtre « limité dans le cadre du compte de démo » */
.demo-limit-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 12, 24, .62); }
.demo-limit-overlay[hidden] { display: none; }
.demo-limit-box { width: min(480px, 100%); padding: 22px 22px 18px; border-radius: 16px; background: var(--bg-surface, #fff); color: var(--text, inherit); border: 1px solid var(--border-soft, rgba(128,128,128,.3)); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.demo-limit-box h2 { margin: 0 0 8px; font-size: 1.15rem; }
.demo-limit-box p { margin: 0 0 16px; line-height: 1.45; }
.demo-limit-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* v8.69 — changer le modèle du CV / de la lettre (modale) */
.aa-design-btn{background:none;border:0;padding:2px 6px;margin:0;color:var(--accent,#7c5cff);font:inherit;cursor:pointer;text-decoration:underline dotted;border-radius:6px}
.aa-design-btn:hover,.aa-design-btn:focus-visible{background:color-mix(in srgb,var(--accent,#7c5cff) 14%,transparent)}
.aa-sig-state{margin-left:10px}
.aa-model-modal{max-width:860px;max-height:90vh;overflow:auto}
.aa-model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:12px 0}
.aa-model-card{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:8px;border:2px solid var(--border,#3a3a4a);border-radius:12px;cursor:pointer;font-size:.85em;transition:border-color .15s,transform .15s}
.aa-model-card:hover{transform:translateY(-2px)}
.aa-model-card input{position:absolute;opacity:0;pointer-events:none}
.aa-model-card img{width:100%;aspect-ratio:210/297;object-fit:cover;background:#fff;border-radius:6px}
.aa-model-card:has(input:checked){border-color:var(--accent,#7c5cff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#7c5cff) 30%,transparent)}
.aa-model-card:has(input:focus-visible){outline:2px solid var(--accent,#7c5cff);outline-offset:2px}
.aa-model-card.is-current span::after{content:" ✓"}
.aa-model-sig{margin:8px 0}
.aa-model-actions{display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;padding-top:10px;background:var(--bg-surface,#1e1e2a)}
@media (max-width:560px){.aa-model-modal{width:100%;max-width:none;height:100%;max-height:none;border-radius:0}.aa-model-actions .btn{flex:1}}

/* v8.69 — composant d'envoi de fichiers (static/js/file-drop.js) */
.jf-zone{display:flex;align-items:center;gap:14px;position:relative;box-sizing:border-box;width:100%;min-height:84px;padding:14px 18px;border:2px dashed color-mix(in srgb,var(--accent,#7c5cff) 55%,var(--border,#3a3a4a));border-radius:14px;background:color-mix(in srgb,var(--accent,#7c5cff) 6%,transparent);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.jf-zone:hover,.jf-zone:focus-within{border-color:var(--accent,#7c5cff);background:color-mix(in srgb,var(--accent,#7c5cff) 12%,transparent)}
.jf-zone.is-over{border-style:solid;border-color:var(--accent,#7c5cff);background:color-mix(in srgb,var(--accent,#7c5cff) 20%,transparent);transform:scale(1.01)}
.jf-zone.is-ready{border-style:solid;border-color:#15803d;background:rgba(21,128,61,.09)}
.jf-zone.is-bad{border-color:#b91c1c;background:rgba(185,28,28,.09)}
.jf-zone.is-sending{cursor:progress;pointer-events:none;opacity:.9}
.jf-ico{font-size:1.9rem;line-height:1;flex:0 0 auto}
.jf-txt{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.jf-main{font-size:1em}
.jf-sub{opacity:.7;font-size:.82em}
.jf-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.jf-prog{display:block;width:min(260px,70vw);height:6px;border-radius:3px;background:rgba(127,127,127,.25);overflow:hidden}
.jf-prog i{display:block;width:40%;height:100%;border-radius:3px;background:var(--accent,#7c5cff);animation:jf-slide 1.1s ease-in-out infinite}
@keyframes jf-slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.jf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:10px}
.jf-file{flex:1 1 220px;min-width:0;overflow-wrap:anywhere;font-weight:600;color:#15803d}
.jf-file:empty{display:none}
.jf-send{min-height:52px;min-width:180px;font-size:1.05em;font-weight:700}
.jf-send:disabled{opacity:.45;cursor:not-allowed}
.jf-orig-submit{display:none!important}
@media (max-width:600px){.jf-bar{position:sticky;bottom:8px;z-index:5;padding:8px;border-radius:12px;background:var(--bg-surface,#1e1e2a);box-shadow:0 4px 18px rgba(0,0,0,.3)}.jf-send{width:100%}.jf-zone{min-height:96px}}
.jf-new{animation:jf-flash 1.4s ease-out 3;outline:3px solid color-mix(in srgb,var(--accent,#7c5cff) 70%,transparent);outline-offset:3px;border-radius:8px}
@keyframes jf-flash{0%{background:color-mix(in srgb,var(--accent,#7c5cff) 35%,transparent)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.jf-prog i,.jf-new{animation:none}}
.jf-zone.jf-compact{min-height:0;padding:6px 12px;gap:8px;border-radius:10px;width:auto;max-width:100%}
.jf-zone.jf-compact .jf-ico{font-size:1.1rem}
.jf-zone.jf-compact .jf-sub{display:none}
.jf-zone.jf-compact .jf-main{font-size:.85em}
.aa-row-doc:not(:has(.aa-arrow)){display:block}

/* ---------- v8.72 — Page Mots-clés : « Où j'en suis » et onglet « Explorer et ajouter » ---------- */
.kx-status { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 14px; border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: var(--radius-md); background: var(--bg-surface); }
.kx-status-body { flex: 1 1 320px; min-width: 0; }
.kx-h { margin: 0 0 6px; font-size: 1.35rem; color: var(--text-primary); }
.kx-h2 { margin: 0 0 10px; font-size: 1.05rem; color: var(--text-primary); }
.kx-lead { margin: 0 0 14px; color: var(--text-secondary); line-height: 1.5; max-width: 70ch; }
.kx-help { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }
.kx-cov { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kx-cov-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 10px; border-radius: 8px; background: var(--bg-surface-2); border: 1px solid var(--border-soft); }
.kx-cov-poste { font-weight: 700; color: var(--text-primary); }
.kx-cov-ok { color: var(--accent); font-size: 13px; }
.kx-cov-warn { color: var(--text-secondary); font-size: 13px; }
.kx-hero { padding: 18px 20px; margin-bottom: 22px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface); }
.kx-search-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kx-search { flex: 1 1 340px; min-width: 0; font-size: 15px; padding: 11px 14px; }
.kx-quota { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--border-soft); font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.kx-msg { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: var(--bg-surface-2); border: 1px dashed var(--border); color: var(--text-secondary); font-size: 13.5px; }
.kx-section { margin-bottom: 26px; }
.kx-tab-badge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px; border-radius: 999px; background: var(--accent); color: var(--bg-base, #000); font-size: 11px; font-weight: 800; text-align: center; }
.kx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.kx-grid:empty { display: none; }
.kx-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 15px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface); transition: border-color .15s ease; }
.kx-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft)); }
.kx-card.is-active { border-left: 3px solid var(--accent); }
.kx-card h3 { margin: 0; font-size: 15px; line-height: 1.3; color: var(--text-primary); }
.kx-meta { margin: 0; font-size: 12px; color: var(--text-muted); }
.kx-from { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.kx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.kx-chips span { padding: 2px 8px; border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--border-soft); font-size: 11.5px; color: var(--text-secondary); }
.kx-foot { margin-top: auto; padding-top: 4px; }
.kx-btn { width: 100%; justify-content: center; }
.kx-domains { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.kx-domain-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 13px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; font: inherit; transition: border-color .15s ease, transform .15s ease; }
.kx-domain-tile:hover, .kx-domain-tile:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.kx-domain-icon { font-size: 22px; line-height: 1; }
.kx-domain-name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.kx-domain-n { font-size: 12px; color: var(--text-muted); }
.kx-crumb { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .kx-grid { grid-template-columns: 1fr; }
  .kx-domains { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kx-domain-tile { padding: 10px 11px; }
  .kx-domain-name { font-size: 13px; }
  .kx-hero { padding: 14px; }
  .kx-status { padding: 12px 14px; }
}
.kx-quota[hidden], .kx-msg[hidden], .kx-quota a[hidden] { display: none; }
.kx-domains[hidden], #kx-domain-panel[hidden], .kx-section [hidden] { display: none; }
.kx-btn.is-on { border-color: var(--accent); color: var(--accent); }

/* ---------- v8.73 — mots-clés d'une bibliothèque personnelle (ajout multiple, retrait avec « Annuler », filtre) ---------- */
.kwt-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.kwt-input { flex: 1 1 260px; min-width: 0; }
.kwt-filter { width: 100%; max-width: 320px; margin: 4px 0 8px; }
.kwt-msg { margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: var(--bg-surface-2); border: 1px solid var(--border-soft); font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kwt-msg[hidden], .kwt-empty[hidden], .kwt-list .keyword-pill[hidden] { display: none; }
.kwt-list { max-height: 320px; overflow-y: auto; padding-right: 4px; }

/* v8.75 — Explorer : exemples cliquables, « Pour ton profil », exemples de familles sous chaque domaine */
.kx-examples { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kx-example { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg-surface-2); color: var(--text-secondary); font: inherit; font-size: 12.5px; cursor: pointer; }
.kx-example:hover, .kx-example:focus-visible { border-color: var(--accent); color: var(--text-primary); }
.kx-h3 { margin: 4px 0 8px; font-size: 14px; color: var(--text-primary); }
#kx-profile { margin-bottom: 14px; }
#kx-profile[hidden] { display: none; }
.kx-domain-sample { font-size: 12px; color: var(--text-secondary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* v8.76 — texte copiable au clic */
.copyable { cursor: copy; }
.copyable:hover { background: var(--bg-surface-2, rgba(128,128,128,.15)); }
.copyable.is-copied { outline: 2px solid var(--accent, #4f8cff); }

/* ===== v8.76 — lisibilité sur une image de fond personnalisée =====
   Tout texte posé DIRECTEMENT sur l'image (sans tuile derrière) reçoit un fond de carte semi-opaque : étapes de « Postuler », ligne de quota,
   encarts d'explication transparents, légendes, aides. Les tuiles et cartes existantes ne changent pas. */
body.has-photo-bg .aa-steps,
body.has-photo-bg .aa-quotabar,
body.has-photo-bg .aa-legend,
body.has-photo-bg .aa-chg-intro,
body.has-photo-bg .aa-dl-hint,
body.has-photo-bg .kx-hint,
body.has-photo-bg .kx-examples,
body.has-photo-bg .kwt-hint,
body.has-photo-bg .page-sub,
body.has-photo-bg .admin-muted-block {
  background: color-mix(in srgb, var(--bg-surface, #151a2e) 90%, transparent);
  color: var(--text-primary, inherit);
  border-radius: 14px;
  padding: 10px 16px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.has-photo-bg .aa-quotabar { margin-bottom: 14px; }
body.has-photo-bg .aa-quotabar .aa-quota { margin-bottom: 4px; }
body.has-photo-bg .aa-steps .wizard-step-label,
body.has-photo-bg .aa-steps li { color: var(--text-primary, inherit); }
body.has-photo-bg .aa-chg-intro { border-style: solid; }
body.has-photo-bg .aa-why,
body.has-photo-bg .aa-row { background: color-mix(in srgb, var(--bg-surface, #151a2e) 92%, transparent); }
/* v8.76 — titres et textes d'aide posés sans carte (Mots clés > Explorer, pages à sections libres) */
body.has-photo-bg .kx-section > .kx-h2,
body.has-photo-bg .kx-section > .empty-hint,
body.has-photo-bg .content > h2,
body.has-photo-bg .content > h3,
body.has-photo-bg .content > p,
body.has-photo-bg .content > .empty-hint {
  background: color-mix(in srgb, var(--bg-surface, #151a2e) 90%, transparent);
  color: var(--text-primary, inherit);
  border-radius: 12px;
  padding: 8px 14px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.has-photo-bg .kx-section > .kx-h2 { display: inline-block; }

/* v8.77 — « Enregistrer » aligné sur son champ (nom de l'entreprise de Postuler) : le champ n'a plus de marge basse dans cette ligne */
.aa-inline-form .aa-input { margin-bottom: 0; width: auto; }
.aa-inline-form .btn { align-self: center; }

/* v8.78 — lisibilité sur fond d'écran (image perso OU fond prédéfini) : pages Mots clés / Postuler.
   Les règles v8.76 visent désormais body.has-photo-bg ; ici les titres et en-têtes de la page des bibliothèques. */
body.has-photo-bg :is(.kw-h2, .kx-h2, .kwlib-group-head, .kwlib-langs-row, .kwlib-toolbar .kwlib-summary, .kx-help, .aa-quota, .aa-gen-counter, .aa-quota-link, .kwlib-bulk-bar, .mail-retention-banner) {
  background: color-mix(in srgb, var(--bg-surface, #151a2e) 90%, transparent);
  color: var(--text-primary, inherit);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.has-photo-bg :is(.kw-h2, .kx-h2) { display: block; width: fit-content; max-width: 100%; padding: 6px 14px; }
body.has-photo-bg .kwlib-group-head { padding: 6px 12px; }
body.has-photo-bg .aa-quotabar :is(.aa-quota, .aa-gen-counter) { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.has-photo-bg .kwlib-body { color: var(--text-primary, inherit); }
body.has-photo-bg .kw-adv > summary { background: color-mix(in srgb, var(--bg-surface, #151a2e) 90%, transparent); color: var(--text-primary, inherit); border-radius: 12px; padding: 6px 14px; width: fit-content; max-width: 100%; }

/* v8.78 — téléphone : noms de bibliothèques entiers (retour à la ligne), pastilles sans coupure, onglets de l'accueil qui se replient */
@media (max-width: 640px) {
  .kwlib-summary .kwlib-expander { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  .kwlib-name, .kwtile .kwlib-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .kwlib-summary .pill, .kwtile-meta .pill { white-space: nowrap; }
  .kwlib-group-head { flex-wrap: wrap; }
  .cv-tabs[role="tablist"]:not(.tabs-folder > .cv-tabs) { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
  .cv-tabs[role="tablist"]:not(.tabs-folder > .cv-tabs) .matching-tab { flex: 1 1 calc(50% - 6px); white-space: normal; text-align: center; padding: 8px 10px; font-size: 13px; line-height: 1.25; }
}

/* v8.78 — Postuler, attente : les étoiles défilent beaucoup plus vite (fuite en avant) et la flamme est plus grande */
.aa-busy .aa-stars-1{animation-duration:1.8s}
.aa-busy .aa-stars-2{animation-duration:3s}
.aa-busy .aa-stars-3{animation-duration:4.8s}
.aa-busy .aa-flame{animation-name:aa-flame-big;animation-duration:.14s}
@keyframes aa-flame-big{from{transform:scale(1.5,1.7)}to{transform:scale(2,2.8)}}
@media (prefers-reduced-motion:reduce){.aa-busy .aa-stars{animation-duration:40s!important}.aa-busy .aa-flame{animation:none}}

/* v8.79 — pastille « DÉMO » sur les boutons des actions qui fonctionnent dans la démo */
.demo-pill { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .06em; vertical-align: middle;
  background: var(--accent-soft, rgba(120,120,255,.2)); color: var(--accent-strong, inherit); border: 1px solid var(--accent, currentColor); }
.btn-primary .demo-pill { background: rgba(255,255,255,.9); color: #1c2030; border-color: transparent; }

/* v8.78.1 — téléphone : onglets « classeur » de l'accueil sur deux lignes SANS chevaucher le bloc du dessous (le classeur grandit avec ses onglets) */
@media (max-width: 640px) {
  .resume-block-tabs .tabs-folder { --tab-h: 36px; padding-top: 8px; }
  .resume-block-tabs .tabs-folder::before { top: 0; border-radius: var(--radius-lg); }
  .resume-block-tabs .tabs-folder > .cv-tabs { flex-wrap: wrap; height: auto; overflow: visible; gap: 4px; margin-bottom: 12px; align-items: stretch; }
  .resume-block-tabs .tabs-folder > .cv-tabs .matching-tab,
  .resume-block-tabs .tabs-folder > .cv-tabs .matching-tab.active,
  .resume-block-tabs .tabs-folder > .cv-tabs .matching-tab:first-child { flex: 1 1 calc(50% - 4px); height: var(--tab-h); justify-content: center; white-space: normal; text-align: center; line-height: 1.15; padding: 0 8px; border-radius: 10px; }
}

/* v8.78.1 — le lien « cette page » des messages d'activation est encadré */
.flash a:not(.btn) { display: inline-block; padding: 0 8px; border: 1px solid currentColor; border-radius: 8px; text-decoration: none; font-weight: 600; }
.flash a:not(.btn):hover { background: color-mix(in srgb, currentColor 14%, transparent); }

/* v8.78.1 — Postuler, attente : encore plus vite et plus grand */
.aa-busy .aa-stars-1{animation-duration:.7s}
.aa-busy .aa-stars-2{animation-duration:1.2s}
.aa-busy .aa-stars-3{animation-duration:1.9s}
.aa-busy .aa-stars{opacity:1;width:3px;height:3px}
.aa-busy .aa-flame{animation-duration:.1s}
@keyframes aa-flame-big{from{transform:scale(2.2,2.8)}to{transform:scale(3,4.2)}}

/* v8.79.2 — téléphone : les tuiles de comptage (dont l'objectif de la semaine) prennent la hauteur de leur contenu */
@media (max-width: 640px) {
  body.resume-fit .home-tile-row-secondary { height: auto; max-height: none; flex-wrap: nowrap; }
  body.resume-fit .home-tile-row-secondary .home-tile:not(.home-tile-split) { flex: 0 0 auto; height: auto; min-height: 130px; overflow: visible; }
  body.resume-fit .home-tile-row-secondary .home-tile .goal-form { margin-bottom: 0; }
}

/* v8.79.2 — Postuler, attente : GRANDE fusée ; le rond de chargement tourne autour de son hublot */
.aa-orbit{width:min(100%,250px);height:auto;aspect-ratio:1/1}
.aa-orbit .aa-rocket{position:relative;width:100%;height:100%;overflow:visible}
.aa-orbit .aa-wheel{position:static;inset:auto;opacity:1;transform-box:fill-box;transform-origin:center}
.aa-busy .aa-orbit .aa-wheel{opacity:1;color:inherit;animation:aa-spin .9s linear infinite}
.aa-orbit .aa-wheel{opacity:.5}
@media (max-width:699px){
  .aa-busy .aa-orbit{width:min(80vw,340px);height:auto}
  .aa-busy .aa-orbit .aa-rocket{width:100%;height:100%}
}
@media (min-width:700px){ .aa-loader{padding:16px 8px} }
@keyframes aa-flame-big{from{transform:scale(1,1.1)}to{transform:scale(1.3,1.7)}}
.aa-orbit{aspect-ratio:64/74}

/* v8.79.2 — carte « Mots à ne jamais détecter » : le texte, le champ puis les pastilles sont empilés */
.kw-excl > .inline-notice { display: block; }
.kw-excl .kwlib-new-form { margin-bottom: 2px; }
.kw-excl .keyword-pill-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.kw-excl .keyword-pill-list form { display: contents; }
.kw-excl-line { font-size: .88em; opacity: .85; margin: 6px 0; }
.kw-excl-line a { font-weight: 600; }

/* v8.80 — démo : menus de design verrouillés */
.demo-lock-note { margin: 0 0 6px; font-size: 12px; font-weight: 700; opacity: .85; }
[data-demo-locked] { opacity: .55; cursor: not-allowed; }

/* v8.80.1 — démo : voile semi-transparent « verrouillé en démo » sur les menus de design */
.demo-veil { position: relative; }
.demo-veil::after { content: attr(data-veil); position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; border-radius: 10px; background: rgba(20,24,38,.55); color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .02em; text-shadow: 0 1px 4px rgba(0,0,0,.6); cursor: not-allowed; pointer-events: auto; backdrop-filter: blur(1px); }
[data-demo-locked] { opacity: 1; }

/* v8.80.1 — Explorer : le nom du domaine ouvert reste lisible sur un fond personnalisé */
body.has-photo-bg .kx-crumb { padding: 8px 12px; border-radius: 10px; background: var(--bg-surface); border: 1px solid var(--border-soft); width: fit-content; max-width: 100%; }
body.has-photo-bg .kx-crumb strong, .kx-crumb #kx-domain-label { color: var(--text-primary); }

/* v8.82 — voile sur un menu isolé : seulement sur le menu, texte réduit */
.demo-veil-inline { display: inline-block; position: relative; vertical-align: middle; }
.demo-veil-inline.demo-veil::after { font-size: 11px; padding: 2px 4px; border-radius: 6px; white-space: nowrap; }

/* ============================================================================
   v8.82 — page Mots-clés : tuile « Où j'en suis » en 3 parties, pastilles Langues / Exclusions qui s'ouvrent en sous-section
   au style onglet, groupe d'onglets Catalogue / Ma bibliothèque (recherche + sélection dans chaque onglet), sous-sections d'Explorer
   ============================================================================ */
.kx-status3 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.kx-st-add .kx-add-job { font-size: 15px; padding: 14px 20px; font-weight: 700; white-space: nowrap; }
.kx-st-count { text-align: center; }
@media (max-width: 760px) {
  .kx-status3 { grid-template-columns: 1fr; }
  .kx-st-add .kx-add-job { width: 100%; }
  .kx-st-count { order: -1; text-align: left; }
}
.kw-subs { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 8px; row-gap: 0; margin: 0 0 14px; --sub-line: color-mix(in srgb, var(--text-secondary) 28%, var(--border-soft)); }
.kw-subtab { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: 13.5px; cursor: pointer; }
.kw-subtab:hover { border-color: var(--accent); }
.kw-subtab.is-open { margin-bottom: -1px; position: relative; z-index: 2; border-color: var(--sub-line); border-bottom-color: var(--bg-surface); border-radius: 12px 12px 0 0; padding: 9px 16px; font-weight: 650; box-shadow: inset 0 3px 0 var(--accent); }
.kw-subpanel { order: 5; flex: 0 0 100%; padding: 14px 16px; border: 1px solid var(--sub-line); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); background: var(--bg-surface); margin: 0 0 8px; }
.kw-subpanel[hidden] { display: none; }
.kw-subpanel > .inline-notice { margin: 0; background: transparent; border: 0; padding: 0; }
body.has-photo-bg .kw-subtab:not(.is-open) { background: var(--bg-surface); }
.kwlib-tabs { margin-top: 6px; }
.kwlib-panel[hidden] { display: none; }
.kwlib-label { margin: 0 0 12px; }
.kwlib-panel .kwlib-bulk-bar { position: static; margin: 0 0 14px; }
.kwlib-toolbar .kwlib-search { flex: 1 1 220px; }
.kwlib-panel > details.kw-new { margin: 0 0 12px; }
body.has-photo-bg .kwlib-tabs { --tab-panel: var(--bg-surface); }

/* Explorer : sous-sections au style onglet */
.kx-sub { margin-bottom: 26px; }
.kx-sub > .cv-tabs .matching-tab { cursor: default; }
.kx-sub .kx-sub-body > .empty-hint:first-child { margin-top: 0; }

/* v8.82.1 — onglets de Explorer : même rendu que la bibliothèque (panneau opaque, aucun fond sur la section) */
.kx-sub { --tab-panel: var(--bg-surface); background: none !important; }
body.has-photo-bg .kx-sub { --tab-panel: var(--bg-surface); background: none !important; }
body.has-photo-bg .kx-sub > .empty-hint { background: none; padding: 0; }

/* v8.82.4 — thème clair : l'accent (jaune par défaut…) sert de FOND ; pour le TEXTE et les ICÔNES on utilise une version
   juste assez assombrie pour être lisible : --accent-strong (texte, contraste 4,5) et --accent-ink (icônes, 3), calculées par
   le serveur selon la couleur choisie (base.html). Le logo garde la vraie couleur d'accent. */
body { --accent-ink: var(--accent); }
body.theme-light { --accent-ink: color-mix(in srgb, var(--accent) 62%, #000); }
body.theme-light .sidebar-illustration-custom svg path,
body.theme-light .sidebar-illustration-custom svg [style*="fill"] { fill: var(--accent-ink) !important; }
body.theme-light.menu-icons-accent .nav-icon-svg,
body.theme-light.menu-icons-accent .media-ico { background-color: var(--accent-ink); }
body.theme-light .topbar-icon { stroke: var(--accent-ink); color: var(--accent-ink); }
body.theme-light .autocomplete-item-add,
body.theme-light .cview-url,
body.theme-light .cview-score-value,
body.theme-light .cview-person-icon,
body.theme-light .mail-topbar-address.copied,
body.theme-light #inbox-mail-body a,
body.theme-light .match-prereq-item .mp-state,
body.theme-light .import-mark,
body.theme-light .mail-attach-form option.opt-non-lie,
body.theme-light .kx-cov-ok,
body.theme-light .kx-btn.is-on,
body.theme-light .job-card-link { color: var(--accent-strong); }
/* v8.82.5 — le LOGO ne subit aucune adaptation de contraste : il garde la couleur de base de la marque (#FFD42A) ou, si un accent est choisi,
   cette couleur telle quelle (--accent-brand, posée par base.html). Son contour noir assure déjà la lisibilité. */
.ja-logo, .ja-logo-full { --ja-logo-color: var(--ja-logo-page-color, var(--accent-brand, #FFD42A)); }

/* v8.95 — téléphone : les lignes d'options (photo du CV, etc.) passent sur deux lignes au lieu d'écraser leur texte en colonne verticale */
@media (max-width: 560px) {
  .opt-row { flex-wrap: wrap; }
  .opt-row-text, .opt-row > span:not(.switch), .opt-row > label { flex: 1 1 11em; min-width: 0; writing-mode: horizontal-tb; overflow-wrap: anywhere; }
  .opt-row select { width: 100%; min-width: 0; flex: 1 1 100%; }
  .opt-row.cv-photo-side-label { justify-content: flex-start; }
}
/* v8.97 — zone d'envoi étroite (photos du Profil sur téléphone) : le texte passe sous l'icône au lieu de s'écrire lettre par lettre */
.jf-zone{flex-wrap:wrap}
.jf-txt{flex:1 1 9em}
@media (max-width:600px){.profil-photos{grid-template-columns:1fr}}
/* v8.101 — « Déjà chez … » (page Voir la candidature) */
.cview-hist-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.cview-hist-list li{line-height:1.4;overflow-wrap:anywhere}
.cview-hist-sub{margin:10px 0 0;font-size:12.5px;color:var(--text-secondary)}
/* v8.101 — compétences confirmées à garder dans le dossier (Postuler) */
.aa-keep-skills{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.aa-keep-list{display:flex;flex-wrap:wrap;gap:6px}
.aa-keep-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid var(--border);border-radius:999px;font-size:12.5px;cursor:pointer}
.aa-keep-go{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.aa-keep-go select{max-width:220px}

/* v8.105 — Postuler : la fusée reste CENTRÉE et entière dans la colonne d'attente, même quand celle-ci est basse (1re page) : elle rétrécit
   au lieu de déborder sur le message du bas */
@media (min-width: 700px) {
  .aa-loader { overflow: hidden; }
  .aa-loader .aa-orbit { flex: 0 1 auto; min-height: 0; max-height: calc(100% - 56px); }
  .aa-loader .aa-orbit .aa-rocket { display: block; max-height: 100%; margin: 0 auto; }
}

/* v8.105 — Postuler (envoi) : « Postuler par e-mail » et « Message d'accompagnement » lisibles (textes pleins, boutons contrastés) */
.aa-sendmail .empty-hint,.aa-sendmail .aa-small,.aa-cover .aa-small{color:var(--text-primary,inherit);opacity:1}
.aa-sendmail .aa-tile-title{opacity:1;color:var(--text-primary,inherit)}
.aa-sendmail .btn-ghost,.aa-cover .btn-ghost{color:var(--text-primary,inherit);border-color:var(--accent,#d4a017);font-weight:600}
.aa-sendmail .btn-ghost:hover,.aa-cover .btn-ghost:hover{background:rgba(212,160,23,.14)}
.aa-cover summary{color:var(--text-primary,inherit);font-weight:700;line-height:1.35}
.aa-cover textarea{color:var(--text-primary,inherit)}
.aa-keep-skills[hidden]{display:none}
.aa-analyse-form{margin:8px 0 0;justify-content:center}
.aa-made-intro{margin:0 0 10px}
.aa-cv-upload .jf-zone,.aa-cv-upload input[type=file]{max-width:100%}

/* v8.106 — composant « relecture imposée » (static/js/ai-review.js) : texte écrit par l'IA grisé sous un voile à relire */
.ai-review{position:relative}
.ai-review>textarea.is-ai-pending{opacity:.5;filter:grayscale(1);cursor:default}
.ai-review-veil{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:12px;background:rgba(120,120,130,.18);border-radius:10px;z-index:2}
.ai-review-veil[hidden]{display:none}
.ai-review-btn{max-width:min(520px,100%);white-space:normal;text-align:center;line-height:1.35;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.ai-review-btn.is-nudge{animation:aiRevNudge .5s ease 2}
@keyframes aiRevNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ai-review-done{margin:4px 0 0;font-size:.88rem;color:var(--ok,#2e7d32)}
.ai-review-done[hidden]{display:none}

/* v8.107 — missions : flèches, « Emploi actuel », ordre choisi */
.mission-card-head .list-item-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.mission-default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; padding: 0; border: 0; }
.date-fin-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.date-fin-row input[type=text] { flex: 1 1 110px; min-width: 0; }
.date-fin-row input[type=text]:disabled { opacity: .5; }
.emploi-actuel-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-soft); border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; user-select: none; }
.emploi-actuel-toggle input { accent-color: var(--accent, #d4a843); margin: 0; }
.emploi-actuel-toggle.is-on { border-color: var(--accent, #d4a843); color: var(--text); background: rgba(212,168,67,.12); }
.missions-order-note { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border: 1px dashed var(--border-soft); border-radius: 10px; font-size: 12px; color: var(--text-muted); }

/* v8.107 — enregistrement automatique de la fiche de candidature */
.ja-save-pill { position: fixed; right: 18px; bottom: 18px; z-index: 900; padding: 6px 12px; border-radius: 999px; font-size: 12px; background: var(--bg-surface); border: 1px solid var(--border-soft); color: var(--text-muted); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.ja-save-pill.is-on { opacity: 1; }
.ja-save-pill.is-ok { color: #3ecf8e; border-color: #3ecf8e; }
.ja-save-pill.is-err { color: #ef5a5a; border-color: #ef5a5a; }
.ja-suggest-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 950; gap: 10px; align-items: center; flex-wrap: wrap; max-width: min(640px, calc(100vw - 24px)); }

/* v8.108 — fiche : « Sans suite », badge cliquable, lien « Voir », actions sans objet grisées */
.btn.is-off, .btn.is-off:hover { opacity: .45; cursor: not-allowed; filter: grayscale(.6); pointer-events: auto; }
.cview-header { position: relative; }
.cview-header.is-sans-suite { filter: grayscale(.85); opacity: .78; }
.cview-header.is-sans-suite .cview-entreprise, .cview-header.is-sans-suite .cview-poste { color: var(--text-secondary); }
.cview-sans-suite-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 6px 18px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); white-space: nowrap; }
@media (max-width: 900px) { .cview-sans-suite-label { position: static; transform: none; align-self: center; order: 3; margin: 10px auto 0; } .cview-header.is-sans-suite { flex-wrap: wrap; } }
a.cview-match-badge { text-decoration: none; color: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
a.cview-match-badge:hover, a.cview-match-badge:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 38px -10px rgba(0,0,0,.7), 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); }
.cview-pipeline-label.is-clickable { cursor: pointer; }
.cview-pipeline-label.is-clickable:hover, .cview-pipeline-label.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.doc-chip-view { font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; padding: 2px 8px; border: 1px solid var(--border-soft); border-radius: 999px; white-space: nowrap; }
.doc-chip-view:hover { background: var(--accent-soft); }

/* v8.109 — notifications : croix, halo à la couleur du type (succès vert, erreur rouge, avertissement ambre, information = accent) */
.flash { position: relative; display: flex; align-items: flex-start; gap: 10px; transition: opacity .25s ease, transform .25s ease, max-height .25s ease; max-height: 600px; }
.flash .flash-text { flex: 1 1 auto; min-width: 0; }
.flash.is-closing { opacity: 0; transform: translateY(-6px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.flash .flash-close { flex: 0 0 auto; margin: -4px -6px -4px 0; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .75; }
.flash .flash-close:hover, .flash .flash-close:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.flash.flash-info    { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 6px 22px -8px color-mix(in srgb, var(--accent) 55%, transparent); }
.flash.flash-success { border-color: #2fd180; background: color-mix(in srgb, #2fd180 14%, var(--bg-surface)); color: var(--text-primary);
                       box-shadow: 0 0 0 3px rgba(47,209,128,.16), 0 6px 22px -8px rgba(47,209,128,.6); }
.flash.flash-error   { border-color: #ef5a5a; background: color-mix(in srgb, #ef5a5a 14%, var(--bg-surface)); color: var(--text-primary);
                       box-shadow: 0 0 0 3px rgba(239,90,90,.18), 0 6px 22px -8px rgba(239,90,90,.6); }
.flash.flash-warning { border-color: #f5a524; background: color-mix(in srgb, #f5a524 14%, var(--bg-surface)); color: var(--text-primary);
                       box-shadow: 0 0 0 3px rgba(245,165,36,.18), 0 6px 22px -8px rgba(245,165,36,.6); }
.flash-upgrade { flex-wrap: nowrap; }
.flash-upgrade .flash-text { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .flash { transition: none; } }

/* v8.109 — Mon abonnement : les tuiles gardent un fond OPAQUE (thème clair ou sombre, avec ou sans photo de fond) → texte toujours lisible. */
.abo-offers .abo-offer, .abo-hero, .abo-credits, .abo-free { color: var(--text); }
.abo-offers .abo-offer .admin-muted, .abo-hero .admin-muted, .abo-credits .settings-hint, .abo-free .settings-hint { color: var(--text-secondary); }
.abo-offer.is-current .admin-muted { color: var(--text); }
.abo-free-quota { margin-left: auto; font-size: .85em; font-weight: 700; white-space: nowrap; color: var(--accent-strong, var(--accent)); }
.abo-free-quota.is-full { color: #c0392b; }
#tuto-abo-formules > .section-title, #tuto-abo-formules > p { background: var(--bg-surface); color: var(--text); padding: 6px 12px; border-radius: 10px; width: fit-content; max-width: 100%; box-sizing: border-box; }