/* Design v2 (15/09/2026, validé par Yannick sur la préproduction jobsearch-staging)
   Couche visuelle chargée APRÈS main.min.css : couleurs porteuses de sens, dégradés, icônes en tuiles et
   liserés, dans l'esprit du Marketing dashboard. Aucun changement de structure.
   Pour revenir en arrière : retirer la ligne <link> de index.html.
   Liserés de couleur sur les offres : réintroduits ici à la demande de Yannick, qui les avait fait retirer
   le 04/09/2026 (main.css, .orc) ; cette décision du 15/09 est la plus récente.
   Les couleurs d'étape reprennent celles de KANBAN_COLS (js/suivi.js). DESIGN-SYSTEM.md reste la référence :
   cyan = marque et actions, DM Sans + Cormorant Garamond (20px et plus). */

:root {
  --v2-accent: #00CCF7;
  --v2-violet: #A78BFA;
  --v2-prep: #8B8CFF;
  --v2-post: #22C3E6;
  --v2-entr: #F5A524;
  --v2-offre: #34D399;
  --v2-clos: #8C97A8;
  --v2-late: #EF4444;
  --v2-today: #F5A524;
  --v2-high: #34D399;
  --v2-wash: 20%;
  --v2-card-shadow: 0 4px 24px rgba(0, 204, 247, 0.07);
  --v2-halo-1: rgba(0, 204, 247, 0.10);
  --v2-halo-2: rgba(167, 139, 250, 0.10);
  --v2-halo-3: rgba(249, 115, 22, 0.07);
}
[data-theme="light"] {
  --v2-violet: #6D5BD0;
  --v2-prep: #6366F1;
  --v2-post: #0891B2;
  --v2-entr: #B45309;
  --v2-offre: #047857;
  --v2-clos: #64748B;
  --v2-late: #B91C1C;
  --v2-today: #B45309;
  --v2-high: #047857;
  --v2-wash: 12%;
  --v2-card-shadow: 0 1px 3px rgba(13, 21, 32, 0.05), 0 6px 22px rgba(13, 21, 32, 0.08);
  --v2-halo-1: rgba(0, 204, 247, 0.14);
  --v2-halo-2: rgba(124, 108, 240, 0.12);
  --v2-halo-3: rgba(249, 115, 22, 0.09);
}

/* ── Fond : halos colorés discrets ─────────────────────────── */
body,
[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 110% 55% at 50% -12%, var(--v2-halo-1), transparent 72%),
    radial-gradient(ellipse 55% 45% at 0% 92%, var(--v2-halo-2), transparent 68%),
    radial-gradient(ellipse 50% 40% at 100% 72%, var(--v2-halo-3), transparent 68%);
  background-attachment: fixed;
}

/* ── Barre du haut : liseré dégradé ────────────────────────── */
.navbar,
[data-theme="light"] .navbar {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--v2-prep), var(--v2-accent), var(--v2-offre), #F97316) 1;
}

/* ── Navigation latérale : une tuile colorée par rubrique ─────────────
   Chaque icône porte déjà sa teinte de rubrique en style inline sur le <svg> (index.html) : la tuile
   reprend cette même teinte (--nav) pour que chaque rubrique se reconnaisse d'un coup d'œil.
   15/09/2026 : première version jugée pas assez visuelle par Yannick (tuiles toutes cyan pâle, trait fin). */
.sidebar .tab, .sidebar-link { --nav: var(--v2-accent); }
/* 27/09/2026 (retour Yannick) : couleur par PAIRE fonctionnelle plutôt que par item isolé --
   Offres+Suivi (turquoise, funnel de candidature), Cibles+Réseau (rose, prospection entreprises).
   Coach garde sa propre identité (violet). Paramètres reste hors de la paire Tour/Wizard (orange). */
.sidebar .tab[data-tab="offres"] { --nav: var(--teal, #14B8A6); }
.sidebar .tab[data-tab="suivi"] { --nav: var(--teal, #14B8A6); }
.sidebar .tab[data-tab="coach"] { --nav: var(--purple-ico, #9333EA); }
.sidebar .tab[data-tab="cibles"] { --nav: var(--pink, #EC4899); }
.sidebar .tab[data-tab="reseau"] { --nav: var(--pink, #EC4899); }
#mobile-more-btn { --nav: var(--v2-clos); }
/* Une couleur par GROUPE hors navigation principale (15/09/2026, demande Yannick) :
   « Mon profil » (Mon profil, Critères) en vert, « Réglages » (Paramètres, Abonnement) en orange.
   27/09/2026 (retour Yannick) : #10B981 (~160° de teinte) et le turquoise Offres/Suivi (--teal
   #0D9488, ~175°) ne sont separes que de 14,5 -- quasi indiscernables une fois eclaircis pour la
   tuile. #22C55E (~142°) porte le meme "vert" voulu pour Mon profil/Criteres, en l'ecartant du
   turquoise (32,5 d'ecart). */
.sidebar-link[onclick^="openProfilFocus"], .sidebar-link[onclick="parcoursAccueil()"] { --nav: #22C55E; }
#navbar-user-email, .sidebar-link[onclick="openBillingPortal()"] { --nav: #F97316; }
/* 27/09/2026 : "Revoir la visite guidée" + "Reprendre le parcours d'accueil" n'avaient aucune
   règle --nav ici et retombaient sur --v2-accent (cyan) via le sélecteur générique .sidebar-link
   ci-dessus -- l'inline style="color:var(--amber)" posé sur le <svg> (index.html) ne peut pas
   gagner contre le !important de .tab-icon svg plus bas dans ce fichier. */
.sidebar-link[onclick="renderTourStep(0)"], .sidebar-link[onclick="replayWizardDoors()"] { --nav: var(--amber, #F59E0B); }

.sidebar .tab-icon svg, .sidebar-link .tab-icon svg { stroke-width: 2.2; }

@media (min-width: 769px) {
  /* 15/09/2026 (2e retour Yannick) : icônes trop serrées verticalement, écart 3px → 10px */
  .sidebar .tabs { gap: 10px; }
  /* .tabs > .tab : spécificité égale à [data-theme="light"] .sidebar .tab (main.css, height 36px), gagne par l'ordre */
  .sidebar .tabs > .tab, .sidebar .tabs > #mobile-more-btn { height: 44px; }
  .sidebar-link { height: 48px; }
  .sidebar .tab-icon,
  .sidebar-link .tab-icon {
    width: 36px; height: 36px; border-radius: 11px;
    display: inline-grid; place-items: center; font-size: 20px;
    color: var(--nav);
    background: linear-gradient(140deg, color-mix(in srgb, var(--nav) 38%, transparent), color-mix(in srgb, var(--nav) 12%, transparent));
    border: 1px solid color-mix(in srgb, var(--nav) 55%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--nav) 22%, transparent);
  }
  /* Trait éclairci (teinte mêlée de blanc) : un trait indigo/violet sur une tuile indigo/violette
     ne se voyait pas ; le !important bat la couleur inline posée sur le <svg> dans index.html */
  .sidebar .tab-icon svg, .sidebar-link .tab-icon svg {
    width: 20px; height: 20px;
    color: color-mix(in srgb, var(--nav) 45%, #ffffff) !important;
  }
  .sidebar .tab:hover .tab-icon, .sidebar-link:hover .tab-icon {
    background: linear-gradient(140deg, color-mix(in srgb, var(--nav) 50%, transparent), color-mix(in srgb, var(--nav) 18%, transparent));
  }
  /* Onglet actif : tuile pleine dans la couleur de la rubrique, icône blanche */
  .sidebar .tab.active .tab-icon,
  .sidebar-link.active .tab-icon {
    background: linear-gradient(140deg, color-mix(in srgb, var(--nav) 88%, #ffffff), var(--nav));
    border-color: transparent;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--nav) 45%, transparent);
  }
  .sidebar .tab.active .tab-icon svg,
  .sidebar-link.active .tab-icon svg { color: #ffffff !important; }

  /* Barre latérale uniquement : sur mobile, la sidebar devient la barre du bas et garde son style d'origine */
  .sidebar .tab.active,
  .sidebar-link.active,
  [data-theme="light"] .sidebar .tab.active,
  [data-theme="light"] .sidebar-link.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--nav) 22%, transparent), color-mix(in srgb, var(--nav) 6%, transparent));
    /* La barre latérale reste sombre dans les deux thèmes (#1B1F27 en clair) : libellé actif en blanc */
    color: #ffffff;
    box-shadow: inset 3px 0 0 var(--nav);
  }
  .sidebar .tab.active span:not(.tab-icon):not(.tab-count),
  .sidebar-link.active span:not(.tab-icon) { color: #ffffff; }
  /* « Plus » est un <button> : il héritait du texte sombre du thème clair, illisible sur la barre sombre */
  .sidebar .tabs > #mobile-more-btn:not(.active):not(.has-active) { color: #9CA3AF; }
}
.sidebar .tab.active .tab-count,
[data-theme="light"] .sidebar .tab.active .tab-count { background: var(--v2-accent); color: #04121c; }

/* ── Titres de page ────────────────────────────────────────── */
.section-title { display: flex; align-items: center; gap: 10px; }
.section-title::before {
  content: ''; flex: none; width: 6px; height: 22px; border-radius: 3px;
  background: linear-gradient(180deg, var(--v2-accent), var(--v2-violet));
}

/* ── Tableau de bord ───────────────────────────────────────── */
.dash-glance {
  border: 1px solid color-mix(in srgb, var(--v2-accent) 40%, transparent);
  border-radius: 14px; padding: 12px 16px; font-size: 13px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--v2-accent) var(--v2-wash), transparent), color-mix(in srgb, var(--v2-violet) 8%, transparent) 70%), var(--bg-card);
  box-shadow: var(--v2-card-shadow);
}
.dash-glance strong { color: var(--accent-text); font-size: 15px; }
.dash-glance-bar-wrap { width: 72px; height: 8px; background: color-mix(in srgb, var(--v2-accent) 16%, transparent); }
.dash-progress-bar { background: linear-gradient(90deg, var(--v2-accent), var(--v2-violet)); }

.dash-plan-title {
  font-family: var(--font-display); font-size: 27px; font-weight: 600; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px; margin: 10px 0 14px;
}
.dash-plan-title::before {
  content: ''; flex: none; width: 6px; height: 24px; border-radius: 3px;
  background: linear-gradient(180deg, var(--v2-accent), var(--v2-violet));
}

/* Chaque bloc prend la couleur de ce qu'il contient */
.dash-section { --t: var(--v2-accent); }
.dash-section:has(#dash-priorites) { --t: var(--v2-high); }
.dash-section:has(#dash-funnel-list) { --t: var(--v2-prep); }

.dash-section {
  padding: 16px; border-radius: 14px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--t) 9%, transparent), transparent 55%), var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--t) 34%, var(--border));
  border-top: 3px solid var(--t);
  box-shadow: var(--v2-card-shadow);
}
.dash-section-title { color: var(--text); }
.dash-section-title > svg,
.dash-section-title > .dash-card-icon,
.dash-section-title > span:first-child:not([data-i18n]) {
  width: 30px; height: 30px; padding: 6px; border-radius: 9px; flex: none;
  display: inline-grid; place-items: center; font-size: 16px;
  color: var(--t);
  background: linear-gradient(135deg, color-mix(in srgb, var(--t) 28%, transparent), color-mix(in srgb, var(--t) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--t) 40%, transparent);
}
.dash-item {
  border: 1px solid color-mix(in srgb, var(--t, var(--v2-accent)) 22%, var(--border-light));
  border-left: 3px solid var(--t, var(--v2-accent));
  background: linear-gradient(90deg, color-mix(in srgb, var(--t, var(--v2-accent)) 10%, transparent), transparent 70%), var(--bg-card);
}
.dash-item:hover { border-color: color-mix(in srgb, var(--t, var(--v2-accent)) 55%, transparent); border-left-color: var(--t, var(--v2-accent)); }
.dash-item-action {
  background: linear-gradient(135deg, #00CCF7, #7C8CF8); color: #04121c;
  box-shadow: 0 4px 14px rgba(0, 204, 247, 0.25);
}
.dash-item-action:hover { opacity: 1; filter: brightness(1.08); }
/* « Cibler une offre precise » devenu un vrai bouton (audit UX lot 4) : meme apparence de lien. */
button.sim-adv-toggle { background: none; border: none; padding: 6px 0; font: inherit; font-size:var(--fs-base); color: var(--accent-text); cursor: pointer; text-align: left; }
/* Lignes « date d'entretien » des cartes du Kanban devenues de vrais boutons (audit UX lot 4) : meme apparence qu'avant. */
.kanban-entretien, .kanban-entretien-add { display: block; width: 100%; background: none; border: none; padding: 2px 0; text-align: left; font-family: inherit; }
.kanban-entretien:focus-visible, .kanban-entretien-add:focus-visible { outline: 2px solid var(--accent, #00CCF7); outline-offset: 2px; }
.dash-item-lien {
  background: none; border: none; box-shadow: none; padding: 6px 4px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px;
}
.dash-item-lien:hover { color: var(--text); }
.stat-card.stat-card-action { width: 100%; font: inherit; color: inherit; cursor: pointer; }
.stat-card.stat-card-action:focus-visible { outline: 2px solid var(--accent, #00CCF7); outline-offset: 2px; }
/* Telephone : les boutons de l'en-tete de Suivi (vues, Chomage, Importer, actualiser) passent a la ligne au lieu de sortir
   de l'ecran (mesure a 375 px : 484 px de large, ↻ hors champ avant meme l'ajout d'« Importer »). */
@media (max-width: 768px) { #sec-suivi .header-row > .u-flex-center { flex-wrap: wrap; } }
/* Telephone : les sous-onglets de « Mes documents » (CV, Mon dossier, Mon projet, LinkedIn) passent a la ligne au lieu de
   defiler hors champ (audit UX lot 3, mesure a 375 px : 639 px de contenu pour 343 px, « Mon projet » a 357 px). */
@media (max-width: 768px) {
  #profil-cv-zone > .coach-subtabs { flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #profil-cv-zone > .coach-subtabs .coach-subtab { justify-content: center; text-align: center; white-space: nowrap; min-width: 0; }
}
.wz-cvdraft-texte { display: block; width: 100%; max-height: none; min-height: 240px; resize: vertical; font-family: var(--font); font-size: 13px; line-height: 1.6; color: var(--text); box-sizing: border-box; }
[data-theme="dark"] #carte-map .leaflet-tile-pane { filter: brightness(.7) invert(1) hue-rotate(180deg); }
.suivi-filtre-actif {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; color: var(--text);
}
.dash-badge-days { background: color-mix(in srgb, var(--v2-late) 16%, transparent); color: var(--v2-late); border: 1px solid color-mix(in srgb, var(--v2-late) 40%, transparent); }
.dash-badge-rappel { background: color-mix(in srgb, var(--v2-today) 16%, transparent); color: var(--v2-today); border: 1px solid color-mix(in srgb, var(--v2-today) 40%, transparent); }
.dash-funnel-count { color: var(--v2-prep); }

.dash-card {
  border: 1px solid color-mix(in srgb, var(--v2-accent) 34%, var(--border));
  border-top: 3px solid var(--v2-accent); border-radius: 14px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--v2-accent) 9%, transparent), transparent 55%), var(--bg-card);
  box-shadow: var(--v2-card-shadow);
}
.dash-awards { border-top-color: var(--v2-violet); }
.dash-coach-nudge {
  border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--v2-accent) 16%, transparent), color-mix(in srgb, var(--v2-violet) 10%, transparent));
}

/* ── Offres ────────────────────────────────────────────────── */
.orc { --t: transparent; border-left: 4px solid var(--t); transition: background .12s ease, box-shadow .12s ease; }
.orc-even,
[data-theme="light"] .orc-even { background: color-mix(in srgb, var(--text) 3%, transparent); }
.orc:has(.orc-stage-badge-cv),
.orc:has(.orc-stage-badge-lettre),
.orc:has(.orc-stage-badge-dossier) { --t: var(--v2-prep); }
.orc:has(.orc-stage-badge-postule) { --t: var(--v2-post); }
.orc:has(.orc-stage-badge-entretien) { --t: #8B5CF6; }
.orc:has(.orc-stage-badge) { background: linear-gradient(90deg, color-mix(in srgb, var(--t) 9%, transparent), transparent 55%); }
.orc:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--v2-accent) 10%, transparent), transparent 70%); }
.orc-score { box-shadow: 0 0 16px color-mix(in srgb, var(--sc-color, var(--v2-accent)) 38%, transparent); }
.orc-act-apply {
  background: linear-gradient(135deg, #00CCF7, #7C8CF8); border-color: transparent; color: #04121c;
  box-shadow: 0 4px 14px rgba(0, 204, 247, 0.25);
}
.orc-act-apply:hover { color: #04121c; }
.orc-stage-badge { border: 1px solid color-mix(in srgb, currentColor 40%, transparent); }

.card-cc { border-top: 3px solid var(--cc, var(--v2-accent)); box-shadow: var(--v2-card-shadow); }
.action-btn.primary {
  background: linear-gradient(135deg, #00CCF7, #7C8CF8); border-color: transparent; color: #04121c;
}

/* ── Suivi : chaque colonne prend la couleur de son étape ──── */
.kanban-drop-col { --t: var(--v2-accent); }
.kanban-drop-col[data-col="preparation"] { --t: var(--v2-prep); }
.kanban-drop-col[data-col="postulee"] { --t: var(--v2-post); }
.kanban-drop-col[data-col="entretiens"] { --t: var(--v2-entr); }
.kanban-drop-col[data-col="offre"] { --t: var(--v2-offre); }
.kanban-drop-col[data-col="cloturee"] { --t: var(--v2-clos); }
.kanban-drop-col {
  background: linear-gradient(180deg, color-mix(in srgb, var(--t) 16%, transparent), color-mix(in srgb, var(--t) 3%, transparent) 55%) !important;
  border: 1px solid color-mix(in srgb, var(--t) 30%, transparent);
  border-top: 3px solid var(--t);
  border-radius: 14px !important;
}
.kanban-drop-col > div:first-child > span:last-child { color: var(--t) !important; }
.kanban-card {
  border-left: 3px solid var(--t) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}
.kanban-drop-col[data-col="cloturee"] .kanban-card { opacity: .8; }
/* BUG-4214 : groupe « Postulees » de la liste d'ouverture des Offres (pastille du titre, et ligne « Postulee » de la vue telephone). */
.inbox-dot.post { background: var(--v2-post); }
.orm-post { display: flex; align-items: center; gap: 4px; font-size: 13px !important; font-weight: 600; color: var(--accent-text); margin-top: 3px; }
.orm-post > svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* BUG-4195 : croix de suppression d'une candidature (carte du Kanban et ligne du tableau Suivi). */
.kanban-card { position: relative; }
.suivi-suppr { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-muted); font-size: var(--fs-read); line-height: 1; cursor: pointer; }
.suivi-suppr:hover, .suivi-suppr:focus-visible { color: var(--danger, #DC2626); background: var(--accent-soft); }
.kanban-card > .suivi-suppr { position: absolute; top: 4px; right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .orc, .dash-item { transition: none; }
}
/* Question « Ou en etes-vous ? » (accueil et profil, 01/10/2026, maquette validee par Yannick). */
.wz-eyebrow { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.wz-situation-portes .wz-door { min-height: 72px; padding: 14px 16px; }
.wz-door.wz-door-on { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-card)); }
.wz-situation-bloc { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.wz-situation-q { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.wz-situation-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.wz-chip.wz-chip-on { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.wz-situation-reco, .profil-situation-reco { display: flex; align-items: center; gap: 10px; margin-top: 14px; min-height: 44px; font-size:var(--fs-base); cursor: pointer; }
.wz-situation-reco input, .profil-situation-reco input { width: 18px; height: 18px; accent-color: var(--accent); }
.wz-situation-effets { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }
.wz-situation-effets-titre { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.wz-situation-effet { font-size: 13px; line-height: 1.5; color: var(--text); }
.wz-situation-effet + .wz-situation-effet { margin-top: 4px; }
.profil-situation-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 768px) { .profil-situation-grille { grid-template-columns: 1fr; } .wz-chip { width: 100%; text-align: left; } }


/* ── Boutons pleins : cyan de marque et texte sombre, dans les deux themes (BUG-4095, decision de Yannick du 15/10/2026) ──
   Une dizaine de boutons portent leur couleur en style inline (background:var(--accent) ;
   color:#fff) : blanc sur cyan #00CCF7, contraste 1,9 pour 1, illisible dans les deux themes.
   Le lot 1 de l'audit du 01/10/2026 les avait passes au bleu #0891B2 avec du blanc (3,7 pour 1, encore sous
   les 4,5 d'un petit texte). Depuis le 15/10 : cyan de marque et texte --on-accent (#010409), 10,7 pour 1,
   comme le bouton principal (.btn-primary) et les pastilles (BUG-4058). !important :
   seul moyen de passer devant un style inline. */
[style*="background:var(--accent);color:#fff"],
[style*="background:var(--accent,#00CCF7);color:#fff"],
[style*="background:#00CCF7;color:#fff"],
.coach-hist-new,
.sim-icon-btn.send,
.pwa-install-action,
.pwa-update-banner {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}

/* ── Barre laterale sur un ecran peu haut (lot 1, remarque 31) ──
   Sur un portable de 720 a 860 px de haut (Mac, Chrome), les liens du bas (Parametres, Revoir la
   visite, Reprendre le parcours d'accueil) passaient sous le bouton du robot d'aide (#guide-fab,
   52 px a 24 px du bas) ou hors de l'ecran. Lignes compactees et marge basse reservee au bouton :
   mesure a 1280 x 720, dernier lien a y 633, bouton a y 641. */
@media (min-width: 769px) and (max-height: 860px) {
  .sidebar { padding-bottom: 88px !important; gap: 2px !important; }
  .sidebar .sidebar-link { min-height: 34px !important; height: auto !important; padding-top: 6px !important; padding-bottom: 6px !important; }
  .sidebar .sidebar-label { padding-top: 8px !important; padding-bottom: 4px !important; margin-top: 0 !important; }
}
/* Retour de Yannick du 21/10/2026 (« les icones sont trop rapprochees ») : depuis BUG-4206, seul « Parametres » reste en bas, la
   barre a donc de la place ; les onglets de navigation gardent leur hauteur (44 px) et leur ecart (10 px) jusqu'a 760 px de haut.
   Avant : 36 px et 2 px des 860 px (pas de 46 px au lieu de 54). Mesure avec la ligne « Ameliorer l'outil » affichee : a 1280 x 760,
   Parametres finit 14 px au-dessus du robot, sans debordement ; a 700 px de haut, il passait dessous, d'ou le seuil. */
@media (min-width: 769px) and (max-height: 759px) {
  .sidebar .tabs { gap: 2px !important; }
  .sidebar .tab { min-height: 36px !important; height: 36px !important; }
}

/* ── Bandeau d'installation (lot 1, remarques 2 a 4) : plus visible ──
   Fond sombre du bandeau confondu avec la page : liseret et fond teintes du bleu des boutons,
   texte en couleur neutre (jamais de texte bleu sur fond bleu). */
.pwa-install-banner {
  right: auto !important;
  max-width: 520px;
  border: 2px solid #0891B2 !important;
  background: color-mix(in srgb, #0891B2 14%, var(--bg-card)) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
}
.pwa-install-text strong { font-size: 15px !important; line-height: 1.35; }
.pwa-install-never {
  background: none; border: none; padding: 4px 0 0; cursor: pointer;
  color: var(--text-muted); font-size: 12px; text-decoration: underline; text-align: left;
}
.pwa-install-never:hover { color: var(--text); }
@media (max-width: 480px) {
  .pwa-install-banner { right: 0 !important; max-width: none; }
}

/* ── Échelle typographique (charte : DESIGN-SYSTEM.md, « Échelle typographique ») ───────────────────
   Les jetons --fs-* sont définis UNE fois, dans le :root de main.css. Six tailles par rôle : --fs-sm 12px (détails), --fs-base 14px (interface),
   --fs-read 17px (lecture), --fs-3xl 20px (intertitres), --fs-4xl 24px (titres), --fs-num 32px (grands chiffres). Les autres jetons (xs, md, lg, xl, 2xl)
   sont hérités et hors échelle : à migrer. Pilote : onglet Offres (liste, barre d'outils, volet de détail), 12/10/2026, demande de Yannick.
   Retour en arrière : annuler le commit « échelle typographique ». */
/* Menu « ... » d'une ligne d'offre (reparente sous <body> par buildActionDropdown) : meme taille que les autres boutons. */
.orc-more-menu button, .orc-more-menu a { font-size: var(--fs-base); }
/* Controles de l'onglet Offres qui n'avaient AUCUNE taille (13,33 px par defaut du navigateur) ou une taille propre : menu de selection en masse, bouton « Sélectionner », bouton d'icones de la barre, lien et croix de l'encart Job-Room. Scopes a #sec-offres : classes partagees avec d'autres onglets. */
#sec-offres .offres-dd-menu button, #sec-offres .offres-dd-date .action-btn, #sec-offres .offres-toolbar-icon-btn, #sec-offres .regles-lien { font-size: var(--fs-base); }
/* Aujourd'hui (echelle du 12/10/2026) : liens « Revoir mes criteres » / « Comprendre les regles » ; .regles-lien est partagee (Offres, fenetre Chomage), sa taille d'origine reste dans main.css. */
#sec-aujourdhui .regles-lien { font-size: var(--fs-base); }
/* Etiquettes (.otag) du volet de detail et croix de la recherche : classes PARTAGEES avec d'autres onglets (Entreprises, Suivi) dont la taille d'origine reste inchangee ; l'echelle ne s'applique ici que dans l'onglet Offres. */
#offre-detail-panel .otag, #offre-detail-panel .otag-company { font-size: var(--fs-sm); }
#sec-offres .offres-search-clear { font-size: var(--fs-base); }

/* ── Vue en deux volets de l'onglet Offres (ordinateur) ─────────────────────────────────────────
   Demande de Yannick, 12/10/2026, sur le modele d'Indeed : la liste reste a gauche, le detail de l'offre s'affiche a droite sans rien recouvrir.
   body.offres-split est pose par offresSplitLayout() (offres.js) seulement si l'onglet Offres est affiche ET la fenetre fait 1280 px ou plus ;
   body.offres-detail-open par openOffreDetail() (suivi.js). Hors de ce cas, le panneau garde son comportement d'avant (par-dessus la liste).
   Typographie du detail (valable dans les deux cas, panneau par-dessus ou volet) : description en --fs-base (14 px, 2 px de moins que la lecture, demande de Yannick 13/10/2026), intitules de section en gras.
   Retour a l'ancien affichage : retirer ce bloc. */
#offre-detail-panel .odp-desc-title { display: none; }
#offre-detail-panel .odp-desc-title.is-visible {
  display: block; margin: 8px 0 12px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: var(--fs-3xl); font-weight: 700; line-height: 1.25; color: var(--text);
}
#offre-detail-panel .odp-header h3 { white-space: normal; font-size: var(--fs-4xl); line-height: 1.2; letter-spacing: -0.01em; }
#offre-detail-panel .odp-desc { font-size: var(--fs-base); line-height: 1.6; color: var(--text); }
#offre-detail-panel .odp-desc p { margin: 0 0 12px; }
/* Ligne « etiquette : valeur » (Lieu : Geneve, Taux d'activite : 80 %) : serree, plusieurs de suite forment un bloc de faits (13/10/2026). */
#offre-detail-panel .odp-desc p.odp-kv { margin-bottom: 6px; }
/* Structure visible (retour de Yannick, 12/10/2026) : les intitules de la description sont en gras, a la taille du texte, avec de l'air au-dessus ;
   les titres HTML h1 et h2 (annonces fournies en HTML) restent a --fs-3xl. */
#offre-detail-panel .odp-desc .odp-sh,
#offre-detail-panel .odp-desc h3,
#offre-detail-panel .odp-desc h4 {
  font-size: var(--fs-base); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text);
  margin: 24px 0 8px; padding-bottom: 0; border-bottom: 0;
}
#offre-detail-panel .odp-desc h1,
#offre-detail-panel .odp-desc h2 {
  font-size: var(--fs-3xl); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text);
  margin: 26px 0 10px; padding-bottom: 0; border-bottom: 0;
}
#offre-detail-panel .odp-desc strong, #offre-detail-panel .odp-desc b { font-weight: 700; color: var(--text); }
#offre-detail-panel .odp-desc .odp-sh:first-child,
#offre-detail-panel .odp-desc h1:first-child,
#offre-detail-panel .odp-desc h2:first-child,
#offre-detail-panel .odp-desc h3:first-child,
#offre-detail-panel .odp-desc h4:first-child { margin-top: 0; }
#offre-detail-panel .odp-desc .odp-list,
#offre-detail-panel .odp-desc ul,
#offre-detail-panel .odp-desc ol { margin: 0 0 14px 22px; }
#offre-detail-panel .odp-desc .odp-list li,
#offre-detail-panel .odp-desc ul li,
#offre-detail-panel .odp-desc ol li { margin-bottom: 6px; }
@media (min-width: 1280px) {
  body.offres-split { --odp-w: clamp(540px, 46vw, 760px); }
  body.offres-split.offres-detail-open #sec-offres { margin-right: calc(var(--odp-w) + 16px); }
  body.offres-split #offre-detail-overlay { display: none !important; }
  body.offres-split #offre-detail-panel {
    top: 64px; right: var(--odp-right, 24px); bottom: 12px; width: var(--odp-w);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: none; transition: none; z-index: 20;
  }
  body.offres-split #offre-detail-panel .odp-close { display: none; }
  body.offres-split #offre-detail-panel .odp-header { border-radius: 12px 12px 0 0; padding: 18px 24px; }
  body.offres-split #offre-detail-panel .odp-body { padding: 20px 24px 32px; }
  /* Ligne d'etiquettes (entreprise, lieu, dates, statut, source) : redondante ici, la ligne selectionnee a gauche les montre deja (retour de Yannick, 12/10/2026). Elle reste dans le panneau par-dessus la liste (< 1280 px), ou la liste est cachee. */
  body.offres-split #offre-detail-panel .odp-meta { display: none; }
  /* Liste etroite : texte aligne a gauche, titre sur deux lignes si besoin (Indeed). */
  body.offres-split .orc-main { align-items: flex-start; text-align: left; }
  body.offres-split .orc-meta, body.offres-split .orc-badges { justify-content: flex-start; }
  body.offres-split .orc-actions { justify-content: flex-start; }
  body.offres-split .orc-title { white-space: normal; }
  body.offres-split .orc.card-selected { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
  /* Carte d'offre (BUG-4098, retour de Yannick : « ca decale les trois petits points et ca met la ligne sur deux lignes ») : les trois points ne suivent plus le bouton
     « J'ai postule », ils ont leur colonne a droite du score, toujours au meme endroit ; le bouton, quand il existe, passe seul sous le titre ; sans bouton, plus de 2e ligne. */
  body.offres-split #offres-list .orc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 0; }
  body.offres-split #offres-list .orc > .offre-select-chk { grid-column: 1; grid-row: 1; margin-right: 14px; }
  body.offres-split #offres-list .orc-main { grid-column: 2; grid-row: 1; }
  body.offres-split #offres-list .orc-score,
  body.offres-split #offres-list .orc > .med { grid-column: 3; grid-row: 1; margin-left: 14px; }
  body.offres-split #offres-list .orc-actions { display: contents; }
  body.offres-split #offres-list .orc-actions .action-dropdown { grid-column: 4; grid-row: 1; margin-left: 10px; }
  body.offres-split #offres-list .orc-actions .orc-act-apply { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-top: 8px; }
}

/* Onglet Entreprises en deux volets (BUG-3983, 13/10/2026) : memes regles que body.offres-split ci-dessus, appliquees a #boite-detail-panel (variables propres :
   --bdp-right pour ne pas etre effacee par offresSplitLayout). Sous 1280 px et sur telephone : tableau, panneau par-dessus et tiroir plein ecran, comme avant. */
/* Fiche d'une entreprise : « Mon reseau chez cette entreprise » (13/10/2026). Lignes cliquables sans bouton, meme gabarit que la liste des offres de la fiche. */
.bdp-net { padding-top: 14px; border-top: 1px solid var(--border); margin-bottom: 18px; }
.bdp-net-title { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.bdp-net-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); cursor: help; }
.bdp-net-vide { font-size: var(--fs-base); color: var(--text-muted); }
.bdp-net-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 44px; padding: 8px 6px; border-bottom: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.bdp-net-row:hover, .bdp-net-row:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); outline: none; }
/* Le nom prend au moins 160 px : sur un ecran etroit l'etat (dernier contact, a relancer) passe SOUS le nom au lieu de l'ecraser (mesure a 375 px : colonne du nom a 34 px sans cela). */
.bdp-net-who { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.bdp-net-dc, .bdp-net-relance { margin-left: auto; }
.bdp-net-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdp-net-who span { font-size: var(--fs-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdp-net-dc { font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; }
.bdp-net-relance { font-size: var(--fs-sm); color: #ef4444; white-space: nowrap; }
.bdp-net-chevron { color: var(--text-muted); font-size: var(--fs-3xl); line-height: 1; }
@media (max-width: 520px) {
  .bdp-net-chevron { order: 1; }
  .bdp-net-dc, .bdp-net-relance { order: 2; flex-basis: 100%; margin-left: 0; }
}
.bdp-net-more summary { cursor: pointer; color: var(--accent-text); padding: 10px 6px; font-size: var(--fs-base); }
.orc.orc-inactive { opacity: .6; }
.orc-inactive-tag { font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
@media (min-width: 1280px) {
  body.boites-split { --bdp-w: clamp(540px, 46vw, 760px); }
  body.boites-split.boites-detail-open #sec-boites { margin-right: calc(var(--bdp-w) + 16px); }
  body.boites-split #boite-detail-overlay { display: none !important; }
  body.boites-split #boite-detail-panel {
    top: 64px; right: var(--bdp-right, 24px); bottom: 12px; width: var(--bdp-w);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: none; transition: none; z-index: 20;
  }
  body.boites-split #boite-detail-panel .odp-close { display: none; }
  body.boites-split #boite-detail-panel .odp-header { border-radius: 12px 12px 0 0; padding: 18px 24px; }
  body.boites-split #boite-detail-panel .odp-header h3 { display: flex; align-items: center; gap: 8px; }
  body.boites-split #boite-detail-panel .odp-body { padding: 20px 24px 32px; }
  /* Liste etroite : texte aligne a gauche, nom sur deux lignes si besoin (comme Offres). */
  body.boites-split #boites-list .orc-main { align-items: flex-start; text-align: left; }
  body.boites-split #boites-list .orc-meta { justify-content: flex-start; }
  body.boites-split #boites-list .orc-actions { justify-content: flex-start; }
  body.boites-split #boites-list .orc-title { white-space: normal; }
  body.boites-split #boites-list .orc.card-selected { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
}

/* Recruteurs > Cabinets en deux volets (13/10/2026, demande de Yannick : meme mise en page que Entreprises) : memes regles que body.boites-split ci-dessus,
   appliquees a #recruteur-detail-panel (variables propres : --rdp-right pour ne pas etre effacee par les autres vues en deux volets). Sous 1280 px et sur
   telephone : lignes, panneau par-dessus et tiroir plein ecran, comme avant. */
@media (min-width: 1280px) {
  body.recr-split { --rdp-w: clamp(540px, 46vw, 760px); }
  body.recr-split.recr-detail-open #sec-recruteurs { margin-right: calc(var(--rdp-w) + 16px); }
  body.recr-split #recruteur-detail-overlay { display: none !important; }
  body.recr-split #recruteur-detail-panel {
    top: 64px; right: var(--rdp-right, 24px); bottom: 12px; width: var(--rdp-w);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: none; transition: none; z-index: 20;
  }
  body.recr-split #recruteur-detail-panel .odp-close { display: none; }
  body.recr-split #recruteur-detail-panel .odp-header { border-radius: 12px 12px 0 0; padding: 18px 24px; }
  body.recr-split #recruteur-detail-panel .odp-header h3 { display: flex; align-items: center; gap: 8px; }
  body.recr-split #recruteur-detail-panel .odp-body { padding: 20px 24px 32px; }
  /* Liste etroite : texte aligne a gauche, nom sur deux lignes si besoin (comme Offres et Entreprises). */
  body.recr-split #recruteurs-list .orc-main { align-items: flex-start; text-align: left; }
  body.recr-split #recruteurs-list .orc-meta { justify-content: flex-start; }
  body.recr-split #recruteurs-list .orc-actions { justify-content: flex-start; }
  body.recr-split #recruteurs-list .orc-title { white-space: normal; }
  body.recr-split #recruteurs-list .orc.card-selected { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
}

/* ── Échelle typographique : onglet Suivi (extension du pilote, 12/10/2026) ─────────────────────────────
   Classes utilitaires PARTAGÉES avec toute l'app : leur taille d'origine reste inchangée dans main.css (xs 11, md 13, lg 15, 2xs 10 px) ; l'échelle ne s'applique ici que dans
   l'onglet Suivi (vues Kanban, Liste et Statistiques, panneau de détail d'une candidature, qui est déplacé sous <body> à l'exécution : d'où #suivi-detail-panel en plus de #sec-suivi). Mobile et modales : hors périmètre. */
#sec-suivi .u-text-2xs, #suivi-detail-panel .u-text-2xs,
#sec-suivi .u-text-xs, #suivi-detail-panel .u-text-xs,
#sec-suivi .u-text-muted, #suivi-detail-panel .u-text-muted,
#sec-suivi .u-label-sm, #suivi-detail-panel .u-label-sm,
#sec-suivi .u-th, #suivi-detail-panel .u-th { font-size: var(--fs-sm); }
#sec-suivi .u-text-md, #suivi-detail-panel .u-text-md,
#sec-suivi .u-text-lg, #suivi-detail-panel .u-text-lg,
#sec-suivi .u-text-secondary-md, #suivi-detail-panel .u-text-secondary-md,
#sec-suivi .suivi-view-btn, #suivi-detail-panel .action-btn { font-size: var(--fs-base); }

/* ── Échelle typographique : Mes documents et Critères (lot 1, BUG-4168, 16/10/2026) ─────────────────────────────
   Même principe que l'onglet Suivi : les classes utilitaires PARTAGÉES gardent leur taille d'origine dans main.css (xs 11, md 13, lg 15, 2xs 10 px) et suivent l'échelle seulement
   dans #sec-profil. Les sous-onglets .coach-subtab sont partagés avec le Coach (13 px d'origine, lot suivant). Panneaux d'audit, d'adaptation et galerie du CV : hors lot 1. Mobile : hors périmètre. */
#sec-profil .u-text-2xs, #sec-profil .u-text-xs, #sec-profil .u-text-muted, #sec-profil .u-label-sm, #sec-profil .u-th { font-size: var(--fs-sm); }
#sec-profil .u-text-md, #sec-profil .u-text-lg, #sec-profil .u-text-secondary-md { font-size: var(--fs-base); }
#profil-cv-zone .coach-subtab { font-size: var(--fs-base); }

/* ── Échelle typographique : Réseau, Recruteurs et Entreprises (lot 2, BUG-4168, 16/10/2026) ─────────────────────────────
   Classes PARTAGÉES avec le reste de l'app (.u-text-*, .action-btn, .badge, .otag, .regles-lien, .coach-subtab) : leur taille d'origine reste dans main.css ; l'échelle ne s'applique ici que dans ces
   trois écrans et dans leurs fiches de détail (#boite-detail-panel et #recruteur-detail-panel, déplacés sous <body>). Coach, panneaux du CV, mobile et modales : hors lot 2. */
#sec-cibles .u-text-2xs, #sec-boites .u-text-2xs, #sec-recruteurs .u-text-2xs, #sec-reseau .u-text-2xs, #boite-detail-panel .u-text-2xs, #recruteur-detail-panel .u-text-2xs,
#sec-cibles .u-text-xs, #sec-boites .u-text-xs, #sec-recruteurs .u-text-xs, #sec-reseau .u-text-xs, #boite-detail-panel .u-text-xs, #recruteur-detail-panel .u-text-xs,
#sec-cibles .u-text-muted, #sec-boites .u-text-muted, #sec-recruteurs .u-text-muted, #sec-reseau .u-text-muted, #boite-detail-panel .u-text-muted, #recruteur-detail-panel .u-text-muted,
#sec-cibles .u-label-sm, #sec-boites .u-label-sm, #sec-recruteurs .u-label-sm, #sec-reseau .u-label-sm, #boite-detail-panel .u-label-sm, #recruteur-detail-panel .u-label-sm,
#sec-cibles .u-th, #sec-boites .u-th, #sec-recruteurs .u-th, #sec-reseau .u-th, #boite-detail-panel .u-th, #recruteur-detail-panel .u-th,
#sec-cibles .badge, #sec-boites .badge, #sec-recruteurs .badge, #sec-reseau .badge, #boite-detail-panel .badge, #recruteur-detail-panel .badge,
#sec-cibles .otag, #sec-boites .otag, #sec-recruteurs .otag, #sec-reseau .otag, #boite-detail-panel .otag, #recruteur-detail-panel .otag { font-size: var(--fs-sm); }
#sec-cibles .u-text-md, #sec-boites .u-text-md, #sec-recruteurs .u-text-md, #sec-reseau .u-text-md, #boite-detail-panel .u-text-md, #recruteur-detail-panel .u-text-md,
#sec-cibles .u-text-lg, #sec-boites .u-text-lg, #sec-recruteurs .u-text-lg, #sec-reseau .u-text-lg, #boite-detail-panel .u-text-lg, #recruteur-detail-panel .u-text-lg,
#sec-cibles .u-text-secondary-md, #sec-boites .u-text-secondary-md, #sec-recruteurs .u-text-secondary-md, #sec-reseau .u-text-secondary-md, #boite-detail-panel .u-text-secondary-md, #recruteur-detail-panel .u-text-secondary-md,
#sec-cibles .action-btn, #sec-boites .action-btn, #sec-recruteurs .action-btn, #sec-reseau .action-btn, #boite-detail-panel .action-btn, #recruteur-detail-panel .action-btn,
#sec-cibles .regles-lien, #sec-boites .regles-lien, #sec-recruteurs .regles-lien, #sec-reseau .regles-lien, #boite-detail-panel .regles-lien, #recruteur-detail-panel .regles-lien,
#sec-cibles .coach-subtab, #sec-boites .coach-subtab, #sec-recruteurs .coach-subtab, #sec-reseau .coach-subtab, #boite-detail-panel .coach-subtab, #recruteur-detail-panel .coach-subtab,
#sec-cibles summary, #sec-boites summary, #sec-recruteurs summary, #sec-reseau summary, #boite-detail-panel summary, #recruteur-detail-panel summary,
#sec-cibles label, #sec-boites label, #sec-recruteurs label, #sec-reseau label, #boite-detail-panel label, #recruteur-detail-panel label { font-size: var(--fs-base); }

/* ── Échelle typographique : Coach et panneaux du CV (lot 3, BUG-4168, 16/10/2026) ─────────────────────────────
   Classes PARTAGÉES (.u-text-*, .action-btn, .badge, .otag) : leur taille d'origine reste dans main.css ; l'échelle ne s'applique qu'au Coach, aux fenêtres d'adaptation, de lecture, ATS et d'amélioration du CV, et au
   panneau d'audit. Hors lot 3 : modèles de CV (.cvg-*, ce sont des documents), documents imprimés (CV, lettre, guide d'entretien), grands chiffres de plus de 22 px, mobile. */
#sec-coach .u-text-2xs, #cv-modal .u-text-2xs, #cv-view-modal .u-text-2xs, #ats-modal .u-text-2xs, #cv-improve-modal .u-text-2xs, #cv-original-panel .u-text-2xs, #cv-check-result .u-text-2xs,
#sec-coach .u-text-xs, #cv-modal .u-text-xs, #cv-view-modal .u-text-xs, #ats-modal .u-text-xs, #cv-improve-modal .u-text-xs, #cv-original-panel .u-text-xs, #cv-check-result .u-text-xs,
#sec-coach .u-text-muted, #cv-modal .u-text-muted, #cv-view-modal .u-text-muted, #ats-modal .u-text-muted, #cv-improve-modal .u-text-muted, #cv-original-panel .u-text-muted, #cv-check-result .u-text-muted,
#sec-coach .u-label-sm, #cv-modal .u-label-sm, #cv-view-modal .u-label-sm, #ats-modal .u-label-sm, #cv-improve-modal .u-label-sm, #cv-original-panel .u-label-sm, #cv-check-result .u-label-sm,
#sec-coach .u-th, #cv-modal .u-th, #cv-view-modal .u-th, #ats-modal .u-th, #cv-improve-modal .u-th, #cv-original-panel .u-th, #cv-check-result .u-th,
#sec-coach .badge, #cv-modal .badge, #cv-view-modal .badge, #ats-modal .badge, #cv-improve-modal .badge, #cv-original-panel .badge, #cv-check-result .badge,
#sec-coach .otag, #cv-modal .otag, #cv-view-modal .otag, #ats-modal .otag, #cv-improve-modal .otag, #cv-original-panel .otag, #cv-check-result .otag { font-size: var(--fs-sm); }
#sec-coach .u-text-md, #cv-modal .u-text-md, #cv-view-modal .u-text-md, #ats-modal .u-text-md, #cv-improve-modal .u-text-md, #cv-original-panel .u-text-md, #cv-check-result .u-text-md,
#sec-coach .u-text-lg, #cv-modal .u-text-lg, #cv-view-modal .u-text-lg, #ats-modal .u-text-lg, #cv-improve-modal .u-text-lg, #cv-original-panel .u-text-lg, #cv-check-result .u-text-lg,
#sec-coach .u-text-secondary-md, #cv-modal .u-text-secondary-md, #cv-view-modal .u-text-secondary-md, #ats-modal .u-text-secondary-md, #cv-improve-modal .u-text-secondary-md, #cv-original-panel .u-text-secondary-md, #cv-check-result .u-text-secondary-md,
#sec-coach .action-btn, #cv-modal .action-btn, #cv-view-modal .action-btn, #ats-modal .action-btn, #cv-improve-modal .action-btn, #cv-original-panel .action-btn, #cv-check-result .action-btn { font-size: var(--fs-base); }

/* ── Reseau en deux volets (ordinateur, 1280 px et plus), maquette validee le 13/10/2026 ──
   Le haut de page reste sur toute la largeur ; seul #reseau-split est coupe en deux. Affiche par coaching.js (renderReseauSplit),
   masque ailleurs : sous 1280 px le tableau et la liste mobile ne changent pas. */
.reseau-split { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 46%, 560px); gap: 16px; align-items: start; }
.reseau-split-list { min-width: 0; }
.reseau-chip-cible { display: inline-flex; align-items: center; gap: 4px; background: rgba(34,197,94,.12); color: #22c55e; border: none; cursor: pointer; font-family: inherit; }
/* Thème clair : le vert et le rouge d'origine tombent a 2,1 et 3,8 pour 1 sur fond blanc (mesure) ; teintes foncees, au moins 4,5 pour 1. */
[data-theme="light"] .reseau-chip-cible { color: #047857; }
[data-theme="light"] .reseau-chip-cible { background: rgba(4,120,87,.10); }
[data-theme="light"] .reseau-fiche-relance { color: #b91c1c; }
.reseau-split-fiche { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.reseau-fiche h3 { margin: 0 0 2px; font-size: var(--fs-lg); }
.reseau-fiche-sub { color: var(--text-secondary); margin-bottom: 16px; }
.reseau-fiche-bloc { margin: 14px 0; }
.reseau-fiche-bloc h4 { margin: 0 0 6px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.reseau-fiche-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.reseau-fiche-vide { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 4px; }
.reseau-fiche-relance { display: inline-flex; align-items: center; gap: 4px; color: #ef4444; font-weight: 700; }
.reseau-fiche-lien { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); text-decoration: underline; cursor: pointer; }
.reseau-fiche-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
/* ── Socle commun des ecrans en deux volets : Offres, Entreprises, Reseau (BUG-4098, 14/10/2026) ──────────────────────────────────────────
   Demande de Yannick : les trois ecrans se ressemblent (liste a gauche, fiche pleine hauteur a droite, tuiles en haut de la liste, meme largeur de fiche,
   toute la largeur de l'ecran utilisee). Les tuiles sont des boutons : un clic applique le filtre correspondant. Une seule couleur d'accent, aucun rouge.
   Retour a l'ancien affichage : retirer ce bloc, les conteneurs #offres-kpis et #boites-kpis restent masques tant qu'ils sont vides. */
.split-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-bottom: 14px; }
.split-kpis:empty { display: none; }
.split-kpi { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; font: inherit; color: inherit; padding: 10px 14px; min-height: 44px; border: 1px solid var(--border-accent, var(--border)); border-radius: 10px; background: var(--surface, var(--bg-card)); }
.split-kpi.is-action { cursor: pointer; }
.split-kpi.is-action:hover { border-color: var(--accent); }
.split-kpi.is-action:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.split-kpi.is-active { border-color: var(--accent-text, var(--accent)); box-shadow: inset 0 0 0 1px var(--accent-text, var(--accent)); background: color-mix(in srgb, var(--accent) 10%, var(--surface, var(--bg-card))); }
.split-kpi-val { font-size: var(--fs-4xl); font-weight: 700; line-height: 1.1; color: var(--text); }
.split-kpi-label { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.3; }
@media (max-width: 520px) {
  .split-kpis { gap: 8px; }
  .split-kpi { padding: 8px 10px; }
  .split-kpi-val { font-size: var(--fs-3xl); }
}
.action-btn.is-accent { color: var(--accent-text); border-color: var(--accent); }
/* Badge « Cible » d'un contact : meme pastille que les autres (.orc-stage-badge), sans teinter la carte (les classes -cv, -postule... le font via :has) ; vert fonce en theme clair. */
.orc-stage-badge-cible { background: rgba(34,197,94,.12); color: #22c55e; }
/* Badge « A relancer » : ambre, comme le badge « CV adapte » d'Offres, mais sans la bande d'etape a gauche de la carte (cette bande dit l'etape d'une candidature). */
.orc-stage-badge-relance { background: rgba(245,158,11,.16); color: #fbbf24; }
[data-theme="light"] .orc-stage-badge-relance { color: #b45309; }
[data-theme="light"] .orc-stage-badge-cible { background: rgba(4,120,87,.10); color: #047857; }
/* Filtre de Reseau : meme mot cliquable que le statut d'Offres (accent, gras) ; fond transparent, la regle globale des select le peint en noir. */
#reseau-filter-select.offres-filtre-texte { color: var(--accent-text); font-weight: 600; max-width: none; background-color: transparent; }
/* Titre de page : lu par les lecteurs d'ecran, plus affiche (comme Offres) ; la barre laterale dit deja ou l'on est. */
#sec-boites > .header-row > .section-title, #sec-reseau > .header-row > .section-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1280px) {
  /* Toute la largeur : le contenu n'est plus plafonne a 1200 / 1400 px sur ces trois onglets (le volet de droite se cale sur le bord reel). */
  .main:has(#sec-offres.active), .main:has(#sec-cibles.active), .main:has(#sec-reseau.active) { max-width: none; }
  /* Reseau : meme volet que Offres et Entreprises (pleine hauteur a droite, meme largeur), a la place de la colonne collee sous les chiffres. */
  body.reseau-2volets { --rsp-w: clamp(540px, 46vw, 760px); }
  body.reseau-2volets #sec-reseau { margin-right: calc(var(--rsp-w) + 16px); }
  /* Barre de filtres : pas de cadre sombre propre a Reseau, meme rangee nue que dans Offres. */
  body.reseau-2volets #sec-reseau .filter-bar { background: transparent; border: 0; padding: 0; }
  body.reseau-2volets .reseau-split { grid-template-columns: minmax(0, 1fr); }
  body.reseau-2volets .reseau-split-fiche {
    position: fixed; top: 64px; right: 24px; bottom: 12px; width: var(--rsp-w); max-height: none; overflow-y: auto; z-index: 20;
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  }
  body.reseau-2volets .reseau-split-fiche:empty { display: none; }
  body.reseau-2volets .reseau-split-fiche .reseau-fiche { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
  body.reseau-2volets .reseau-fiche .odp-header { position: sticky; top: 0; z-index: 2; display: block; background: var(--bg); border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; padding: 18px 24px; }
  body.reseau-2volets .reseau-fiche .odp-header h3 { margin: 0; font-family: var(--font); font-weight: 600; font-size: var(--fs-4xl); line-height: 1.2; letter-spacing: -0.01em; }
  body.reseau-2volets .reseau-fiche .odp-body { padding: 20px 24px 32px; }
  body.reseau-2volets .reseau-fiche-sub { margin: 4px 0 0; }
  /* Liste : memes cartes .orc que Offres et Entreprises (texte a gauche, nom sur deux lignes si besoin, contact choisi en teinte d'accent avec liseret). */
  body.reseau-2volets #reseau-split-list .orc-main { align-items: flex-start; text-align: left; }
  body.reseau-2volets #reseau-split-list .orc-meta { justify-content: flex-start; }
  body.reseau-2volets #reseau-split-list .orc-actions { justify-content: flex-start; }
  body.reseau-2volets #reseau-split-list .orc-title { white-space: normal; }
  body.reseau-2volets #reseau-split-list .orc.card-selected { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
}
/* ── Barre de selection facon Gmail : Offres, Entreprises, Reseau (BUG-4098, 14/10/2026) ─────────────────────────────────────────────────
   Demande de Yannick : « le systeme de suppression avec des boutons qui s'affichent, c'est pas pratique : une petite barre en haut qui permet de supprimer en cochant
   toutes les cases ». Une case sur chaque ligne, une case « tout » au debut de la rangee de filtres (avec un menu de selections rapides), et des que
   quelque chose est coche la rangee devient « N selectionnees · actions · fermer ». Un seul composant, trois ecrans : la rangee porte .has-selection, ses elements
   habituels portent .sel-normal. Retour a l'ancien affichage : retirer ce bloc et les classes sel-*. */
.sel-master { display: inline-flex; align-items: center; gap: 2px; }
/* Reseau : la case « tout » n'a de sens que dans la vue en deux volets (c'est la seule qui a des cases par contact). */
body:not(.reseau-2volets) #sec-reseau .sel-master { display: none; }
.orc .reseau-select-chk { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.sel-chk { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; flex: none; }
.sel-master-dd { position: relative; }
.sel-master-dd summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; border-radius: 6px; color: var(--text-secondary); }
.sel-master-dd summary::-webkit-details-marker { display: none; }
.sel-master-dd summary:hover, .sel-master-dd[open] summary { color: var(--text); background: var(--accent-soft); }
.sel-master-dd .offres-dd-menu { min-width: 230px; }
.sel-menu-date { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 4px; border-top: 1px solid var(--border); margin-top: 4px; font-size: var(--fs-sm); color: var(--text-secondary); }
.sel-menu-date label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sel-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-height: 36px; margin: 2px 0 8px; }
.sel-count, .sel-actions, .sel-close { display: none; }
.sel-count { font-size: var(--fs-base); font-weight: 600; color: var(--text); white-space: nowrap; }
.sel-actions { align-items: center; gap: 6px; flex-wrap: wrap; }
.sel-act { min-height: 32px; padding: 0 6px; border: 1px solid var(--border-accent, var(--border)); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-base); cursor: pointer; white-space: nowrap; }
.sel-act:hover { border-color: var(--accent); }
.sel-act:focus-visible, .sel-close:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.sel-act.is-danger { color: #ef4444; border-color: color-mix(in srgb, #ef4444 45%, transparent); }
[data-theme="light"] .sel-act.is-danger { color: #b91c1c; }
.sel-close { align-items: center; justify-content: center; min-width: 26px; min-height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-muted); font: inherit; font-size: var(--fs-3xl); line-height: 1; cursor: pointer; }
.sel-close:hover { color: var(--text); background: var(--accent-soft); }
.has-selection { column-gap: 8px !important; }
.has-selection > .sel-normal { display: none !important; }
.has-selection > .sel-count { display: inline-block; }
.has-selection > .sel-actions { display: inline-flex; }
.has-selection > .sel-close { display: inline-flex; margin-left: auto; }
@media (max-width: 768px) {
  .sel-chk { width: 22px; height: 22px; }
  .sel-act, .sel-close, .sel-master-dd summary { min-height: 44px; }
  .sel-close { min-width: 44px; }
}

/* ── Raison d'ignorer une offre (BUG-4102) ──
   Barre qui apparait apres « Ignorer » : une question, des raisons a cliquer, une croix. Fond plein et texte du theme (pas de teinte sur teinte),
   au-dessus du toast « Statut mis a jour » (bottom 80 px) pour ne jamais le recouvrir. Retour a l'ancien comportement : retirer ce bloc et offrirMotifIgnore. */
#motif-ignore-bar {
  position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); z-index: 9000;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 10px 14px; background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md);
}
#motif-ignore-bar .mi-question { font-size: var(--fs-sm); font-weight: 600; margin-right: 4px; }
#motif-ignore-bar .mi-chip, #motif-ignore-bar .mi-close {
  font: inherit; font-size: var(--fs-sm); color: var(--text); background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px; min-height: 32px; cursor: pointer;
}
#motif-ignore-bar .mi-chip:hover, #motif-ignore-bar .mi-chip:focus-visible, #motif-ignore-bar .mi-close:hover, #motif-ignore-bar .mi-close:focus-visible { border-color: var(--accent); }
#motif-ignore-bar .mi-close { border-color: transparent; padding: 6px 10px; font-size: var(--fs-lg); line-height: 1; }
@media (max-width: 768px) {
  #motif-ignore-bar { bottom: 150px; }
  #motif-ignore-bar .mi-chip, #motif-ignore-bar .mi-close { min-height: 44px; }
}

/* Modifier une entreprise, page carrieres personnelle, notes (BUG-4123, BUG-4124, maquette validee le 15/10/2026). Classes, jamais de style en ligne sur le formulaire (KE-480). */
.bem-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bem-title { margin: 0; display: flex; align-items: center; gap: 8px; }
.bem-edit-btn { margin-left: auto; }
.bem-tag { display: inline-block; font-size: var(--fs-xs); padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--border-accent); }
.bem-mini { display: flex; gap: 16px; }
.bem-lnk { background: none; border: 0; padding: 4px 0; color: var(--accent-text); font: inherit; font-size: var(--fs-md); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-align: left; }
.bem-note, .bem-help { display: flex; gap: 6px; align-items: flex-start; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; margin-top: 6px; }
.bem-notes { margin-bottom: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: var(--fs-md); }
.bem-notes-h { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.bem-notes-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.bem-form { padding-top: 6px; }
.bem-fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bem-fg label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.bem-fg input, .bem-fg textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font: inherit; font-size: var(--fs-base); }
.bem-fg textarea { min-height: 80px; resize: vertical; }
.bem-fg input:focus, .bem-fg textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bem-site { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 12px; word-break: break-all; }
.bem-err { color: var(--red); font-size: var(--fs-sm); line-height: 1.45; margin-bottom: 10px; }
/* En sombre, --red (#DC2626) ne fait que 3,9:1 sur la carte (mesure du 15/10/2026) : rouge clair deja utilise par l'app pour les notes faibles. */
[data-theme="dark"] .bem-err { color: #F87171; }
.bem-btns { display: flex; gap: 10px; flex-wrap: wrap; }
/* Pastille « page peut-etre a corriger » : boussole discrete en couleur de texte attenuee, sans jaune ni rouge (BUG-3982 les avait retires), accent au survol. */
.bpc { display: inline-flex; align-items: center; margin-left: 4px; color: var(--text-muted); cursor: help; vertical-align: middle; }
.bpc:hover { color: var(--accent-text); }
.bpc .ico { width: 14px; height: 14px; }
.bpc-lnk { color: var(--text-secondary); }
@media (max-width: 768px) {
  .bem-lnk, .bem-edit-btn, .bem-btns .btn-primary, .bem-btns .btn-secondary { min-height: 44px; }
}

/* ── Critères de recherche : trois cartes-résumé colorées (15/10/2026, demande de Yannick, BUG-4146 puis BUG-4150) ──
   1re passe (BUG-4146) : plus de carte ni de blocs gris, pleine largeur. Retour de Yannick : « trop de boutons, ça paraît compliqué, il manque des couleurs ».
   2e passe : la page ne montre plus que trois cartes colorées qui disent en une ligne ce qui est choisi (cyan : ce que je cherche, vert d'eau : où, ambre :
   sélection) ; « Modifier » déplie les listes à cases à cocher de CETTE carte, une seule à la fois. Les champs et leurs identifiants ne changent pas.
   Tout est limité à #profil-criteres-zone : .form-card et .profil-section servent ailleurs. Pour revenir en arrière : retirer ce bloc et les trois .crit-carte de index.html. */
@media (min-width: 1280px) {
  /* Toute la largeur, comme Offres, Entreprises et Réseau (le plafond de 1400 px ne s'applique plus). Seulement quand la zone Critères est affichée : Mes documents garde son plafond. */
  .main:has(#sec-profil.active #profil-criteres-zone:not([style*="none"])) { max-width: none; }
}
#profil-crit-actions { display: flex; gap: 8px; }
#sec-profil:has(#profil-criteres-zone[style*="none"]) #profil-crit-actions { display: none; }
#sec-profil > .header-row:has(#profil-crit-actions) { margin-bottom: 12px; }
#profil-criteres-zone { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 8px; }

/* Ma situation : une seule ligne violette (une liste, une case), plus un bloc. */
#profil-criteres-zone #profil-situation {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 12px; padding: 10px 16px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--purple) 35%, var(--border)); border-left: 4px solid var(--purple);
  background: color-mix(in srgb, var(--purple) 10%, var(--bg-card));
}
#profil-criteres-zone #profil-situation .profil-section-title,
[data-theme="light"] #profil-criteres-zone #profil-situation .profil-section-title { margin: 0; color: var(--text); font-size: var(--fs-sm); font-weight: 700; }
#profil-criteres-zone #profil-situation .profil-situation-grille { display: flex; flex-wrap: wrap; gap: 8px 14px; }
#profil-criteres-zone #profil-situation .form-group { flex-direction: row; align-items: center; gap: 8px; }
#profil-criteres-zone #profil-situation .crit-lbl { margin: 0; }
#profil-criteres-zone #profil-situation select { min-width: 230px; padding: 6px 10px; }
#profil-criteres-zone .profil-situation-reco { margin: 0; min-height: 34px; }
#profil-criteres-zone #profil-situation .profil-pays-hint { flex: 1 0 100%; margin: 0; }

/* Les trois cartes. .crit-carte est transparent pour la grille (display: contents) : son bouton va sur la rangée du haut, son éditeur sur toute la largeur en dessous. */
.crit-cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 14px; }
.crit-carte { display: contents; }
@media (min-width: 1100px) {
  .crit-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crit-carte:nth-child(1) > .crit-carte-tete { grid-column: 1; grid-row: 1; }
  .crit-carte:nth-child(2) > .crit-carte-tete { grid-column: 2; grid-row: 1; }
  .crit-carte:nth-child(3) > .crit-carte-tete { grid-column: 3; grid-row: 1; }
  .crit-carte > .crit-editeur { grid-column: 1 / -1; grid-row: 2; }
}
.crit-carte-tete {
  display: flex; flex-direction: column; gap: 10px; width: 100%; min-height: 112px; padding: 14px 16px 16px; box-sizing: border-box;
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--carte) 45%, var(--border)); border-top: 4px solid var(--carte); border-radius: 12px;
  background: color-mix(in srgb, var(--carte) 10%, var(--bg-card));
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.crit-carte-tete:hover { background: color-mix(in srgb, var(--carte) 17%, var(--bg-card)); box-shadow: 0 4px 16px color-mix(in srgb, var(--carte) 20%, transparent); }
.crit-carte-tete:focus-visible { outline: 2px solid var(--carte); outline-offset: 2px; }
.crit-carte.ouverte > .crit-carte-tete { background: color-mix(in srgb, var(--carte) 20%, var(--bg-card)); border-color: var(--carte); }
.crit-carte-haut { display: flex; align-items: center; gap: 10px; }
.crit-carte-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: var(--carte); color: #0B1620; }
.crit-carte-ico .ico { width: 18px; height: 18px; }
.crit-carte-titre { flex: 1; min-width: 0; font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
.crit-carte-etat:not(:empty) { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: #1F1300; background: var(--amber); }
.crit-carte-action {
  flex: 0 0 auto; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--carte) 65%, transparent); background: color-mix(in srgb, var(--carte) 14%, transparent);
}
.crit-carte-action::after { content: ' \25BE'; }
.crit-carte.ouverte .crit-carte-action::after { content: ' \25B4'; }
.crit-carte-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crit-tag {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--carte) 22%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--carte) 50%, var(--border));
}
.crit-tag-k { font-size: var(--fs-xs); font-weight: 500; letter-spacing: .3px; text-transform: uppercase; color: var(--text-secondary); }
.crit-vide { font-size: var(--fs-md); color: var(--text-secondary); }
.crit-barre { flex: 1 0 100%; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--carte) 20%, var(--border)); }
.crit-barre > span { display: block; height: 100%; border-radius: 3px; background: var(--carte); }

/* L'éditeur d'une carte : le panneau qui s'ouvre sous la rangée, bordé de la couleur de sa carte. */
#profil-criteres-zone .crit-editeur {
  margin: 0; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--carte); background: var(--bg-card);
}
#profil-criteres-zone .crit-editeur[hidden] { display: none; }
#profil-criteres-zone .crit-editeur > .profil-section-title { display: none; }
#profil-criteres-zone .form-grid { gap: 12px 20px; }
/* Zones géographiques : toute la rangée en dessous de 1280 px, une colonne comme les autres listes au-dessus. */
#profil-criteres-zone .form-group:has(> #chips-zones) { grid-column: 1 / -1; }
@media (min-width: 1280px) {
  /* Les listes se rangent côte à côte (5 sur une ligne à 1700 px). */
  #profil-criteres-zone .form-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  #profil-criteres-zone .form-group:has(> #chips-zones) { grid-column: auto; }
  /* « Automatique (langue de mon CV) », les trois pays cochables et le libellé des cabinets ont besoin de deux colonnes. */
  #profil-criteres-zone .form-group:has(> #profil-langue-analyse), #profil-criteres-zone .form-group:has(.profil-pays-checks), #profil-criteres-zone .form-group:has(> #chips-consultantPays) { grid-column: span 2; }
}
/* Libellé + pastille d'aide sur une ligne (l'aide est une infobulle plutôt qu'un texte permanent). */
.crit-lbl { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.crit-lbl .u-label, .crit-lbl label { margin-bottom: 0; }
.crit-lbl .tooltip-wide { font-size: var(--fs-sm); color: var(--text-muted); cursor: help; line-height: 1; }
/* Position : une rangée, sans cadre. */
.crit-geo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 14px; }
.crit-geo-pos { min-width: 150px; }
.crit-geo-pos #profil-geo-display { display: block; font-size: var(--fs-md); color: var(--text); min-height: 32px; line-height: 32px; }
.crit-geo-rayon .u-label { margin-bottom: 4px; }
.crit-geo select, .crit-geo input[type="text"] {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input, var(--card-bg));
  color: var(--text); font-size: var(--fs-md); font-family: inherit; height: 34px; box-sizing: border-box;
}
.crit-geo input[type="text"] { flex: 1 1 220px; min-width: 180px; }
.crit-geo #profil-geo-manual-results { flex: 1 0 100%; }

/* Réglages secondaires (cabinets, mots-clés, valeurs, avancé) : une liste serrée, chaque ligne gardant sa couleur. */
#profil-criteres-zone details.profil-section {
  margin: 0 0 8px; padding: 0 16px; border: 1px solid var(--border-light, var(--border)); border-left: 4px solid var(--section-accent, var(--accent)); border-radius: 10px;
  background: var(--bg-card);
}
#profil-criteres-zone details.profil-section[open] { padding-bottom: 14px; }
#profil-criteres-zone details.profil-section > summary { min-height: 42px; color: var(--text) !important; }
#profil-criteres-zone details.profil-section > summary > span:first-child { color: var(--section-accent, var(--accent)); }
/* Entreprises : loupe à droite du nom (réunion du 16/10/2026), cible tactile de 44 px, le champ prend le reste. */
.boite-nom-ligne { display: flex; gap: 6px; align-items: center; }
.boite-nom-ligne input { flex: 1; min-width: 0; }
.btn-loupe { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
/* Offres : fenêtre d'aide de la première liste (offres.js, ouvrirAideOffres). Une ligne par bouton : l'icône réelle à gauche, libellé en gras, explication. */
.aide-offres { z-index: 2500; }
.aide-offres .modal-content { max-width: 520px; max-height: 85vh; display: flex; flex-direction: column; }
.aide-offres .modal-body { overflow-y: auto; min-height: 0; }
.aide-offres-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aide-offres-l { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-base); line-height: 1.45; color: var(--text-secondary); }
.aide-offres-l b { color: var(--text); }
.aide-offres-i { flex: 0 0 34px; display: flex; justify-content: center; padding-top: 2px; color: var(--accent-text); }
.aide-offres-i .odp-ico { width: 20px; height: 20px; }
.aide-offres-b { display: flex; justify-content: flex-end; margin-top: 16px; }
/* Vos valeurs : cinq petits champs sur une seule rangée (deux colonnes puis une sur petit écran), le lien d'inspiration à côté du libellé. */
.crit-valeurs-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; }
.crit-valeurs-tete label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.crit-valeurs-tete a { font-size: var(--fs-xs); color: var(--accent-text); }
.crit-valeurs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.crit-valeurs input { padding: 6px 10px; font-size: var(--fs-md); }
@media (max-width: 900px) { .crit-valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .crit-valeurs { grid-template-columns: minmax(0, 1fr); } }
/* « Sauvegarder » reste en haut de page (en-tête) et, dès qu'il y a une modification, dans la barre flottante : le doublon du bas disparaît. */
#profil-criteres-zone #btn-save-profil-inline { display: none; }
@media (max-width: 768px) {
  #profil-criteres-zone.form-card { padding: 0 !important; }
  #sec-profil:not(.psub-criteres) #profil-crit-actions { display: none; }
  #profil-criteres-zone #profil-situation select { min-width: 0; width: 100%; }
  #profil-criteres-zone #profil-situation .profil-situation-grille, #profil-criteres-zone #profil-situation .form-group { flex: 1 0 100%; flex-direction: column; align-items: stretch; }
}
/* ── Mes documents (15/10/2026, demande de Yannick, maquette « style du blog » validee) ──
   Pleine largeur comme Criteres, cartes en verre depoli (memes valeurs que le blog public, workers/landing/src/blog.js), audit sans carte « Avis Expert IA »,
   ni titre « Audit CV », ni ligne de resume. Tout est limite a #profil-cv-zone. Pour revenir en arriere : retirer ce bloc. Contrastes mesures :
   texte 5,8:1 a 15,5:1 en clair, 6,8:1 a 14,2:1 en sombre ; l'actif et le cliquable sont pleins (navy ou cyan), la bordure fine reste decorative. */
@media (min-width: 1280px) {
  .main:has(#sec-profil.active #profil-cv-zone:not([style*="none"])) { max-width: none; }
}
#profil-cv-zone .import-section, #profil-cv-zone .cv-audit-carte, #profil-cv-zone .projet-carte {
  max-width: none; background: rgba(255,255,255,.62); border: 1px solid rgba(19,36,64,.14); border-radius: 18px;
  box-shadow: 0 12px 40px rgba(19,36,64,.12); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
}
[data-theme="dark"] #profil-cv-zone .import-section, [data-theme="dark"] #profil-cv-zone .cv-audit-carte, [data-theme="dark"] #profil-cv-zone .projet-carte {
  background: rgba(19,36,64,.52); border-color: rgba(255,255,255,.16); box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
#profil-cv-zone .import-section h3, #profil-cv-zone .projet-carte h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-3xl); font-weight: 700; line-height: 1.12; }
.cv-audit-carte { margin-bottom: 20px; padding: 18px 20px; }
.cv-audit-corps { margin-top: 14px; }
.cv-audit-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cv-audit-verdict { font-weight: 600; font-size: var(--fs-base); line-height: 1.4; color: var(--text); }
.doc-pastille { width: fit-content; margin-top: 6px; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); background: rgba(8,145,178,.10); border: 1px solid var(--accent); padding: 3px 10px; border-radius: 999px; }
#cv-mep-barre .cvmep-onglets { gap: 8px; flex-wrap: wrap; border-bottom: 0; }
#cv-mep-barre .cvmep-onglets button { border: 1px solid #8499B0; border-radius: 999px; background: rgba(255,255,255,.62); color: var(--text); margin-bottom: 0; padding: 8px 18px; }
[data-theme="dark"] #cv-mep-barre .cvmep-onglets button { border-color: #5B7390; background: rgba(19,36,64,.52); }
#cv-mep-barre .cvmep-onglets button[aria-selected="true"] { background: linear-gradient(135deg,#132440,#0E4F86); border-color: transparent; color: #fff; box-shadow: 0 8px 24px rgba(0,204,247,.28); }
@media (min-width: 1100px) {
  /* La liste des CV passe sur deux colonnes : en pleine largeur, les boutons d'une ligne restent pres du nom (retour du 12/10/2026). */
  #cv-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 8px; }
}
/* ── Mon projet : un projet par CV (lot 2a, 15/10/2026, maquette validee par Yannick) ──
   Cartes de CV, compteur, avis de plafond (3 projets propres inclus). Tailles de l'echelle (--fs-*), memes couleurs que le bloc « Mes documents ».
   Pour revenir en arriere : retirer ce bloc. */
.projet-cvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 12px 0; }
.projet-cv { text-align: left; min-height: 44px; padding: 10px 12px; border-radius: 14px; border: 1px solid #8499B0; background: rgba(255,255,255,.62); color: var(--text); font: inherit; font-size: var(--fs-base); cursor: pointer; }
[data-theme="dark"] .projet-cv { border-color: #5B7390; background: rgba(19,36,64,.52); }
.projet-cv b { display: block; font-size: var(--fs-base); }
.projet-cv small { display: block; font-size: var(--fs-sm); color: var(--text-secondary); }
.projet-cv.commun { border-style: dashed; }
.projet-cv.on { background: linear-gradient(135deg,#132440,#0E4F86); border-color: transparent; border-style: solid; color: #fff; box-shadow: 0 8px 24px rgba(0,204,247,.28); }
.projet-cv.on small { color: #C7E9F5; }
.projet-cv .projet-pastille { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid; font-size: var(--fs-sm); font-weight: 600; }
.projet-cv .projet-pastille-ok { color: #0B6B3A; background: rgba(11,107,58,.12); border-color: #0B6B3A; }
.projet-cv .projet-pastille-vide { color: #8A5A00; background: rgba(138,90,0,.12); border-color: #8A5A00; }
[data-theme="dark"] .projet-cv .projet-pastille-ok { color: #6FE3A0; background: rgba(111,227,160,.14); border-color: #6FE3A0; }
[data-theme="dark"] .projet-cv .projet-pastille-vide { color: #F0C14B; background: rgba(240,193,75,.14); border-color: #F0C14B; }
.projet-cv.on .projet-pastille { background: #fff; color: #132440; border-color: #fff; }
.projet-compteur { margin: 0 0 6px; font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.projet-avis { margin: 8px 0 14px; padding: 10px 12px; border-radius: 14px; border: 1px solid #8A5A00; background: rgba(138,90,0,.12); font-size: var(--fs-base); line-height: 1.5; color: var(--text); }
[data-theme="dark"] .projet-avis { border-color: #F0C14B; background: rgba(240,193,75,.14); }
.projet-sous-titre { margin: 14px 0 6px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-3xl); font-weight: 700; line-height: 1.12; color: var(--text); }
.projet-entete .projet-sous-titre { margin: 0; }
/* ── Audit du CV : deux colonnes, lecture ATS et lecture recruteur (15/10/2026, Yannick) + marges de Mes documents ──
   Les deux scores se lisent cote a cote sous l'en-tete de l'audit (sur une colonne sous 480 px). Marge exterieure reduite et air interieur augmente :
   la page de Mes documents perd 12 px de marge de chaque cote, les cartes gagnent 4 px de remplissage (les boutons s'eloignent du bord).
   Pour revenir en arriere : retirer ce bloc. */
.cv-lectures { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin: 8px 0 0; }
.cv-lecture { min-width: 0; }
.cv-dual-col { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid #8499B0; background: rgba(255,255,255,.62); }
[data-theme="dark"] .cv-dual-col { border-color: #5B7390; background: rgba(19,36,64,.52); }
.cv-dual-note { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-3xl); font-weight: 700; }
.cv-dual-titre { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.cv-dual-sous { font-size: var(--fs-sm); color: var(--text-secondary); }
@media (max-width: 1000px) { .cv-lectures { grid-template-columns: 1fr; } }
@media (min-width: 769px) {
  .main:has(#sec-profil.active #profil-cv-zone:not([style*="none"])) { padding-left: 12px; padding-right: 12px; }
  #profil-cv-zone .cv-audit-carte, #profil-cv-zone .projet-carte { padding: 24px; }
  /* 16/10/2026 (Yannick) : « Importer votre profil » et « Mon style de lettre » prenaient trop de place -> remplissage reduit, titre plus petit.
     Pour revenir en arriere : remettre .cv-lettre-row > .import-section dans la regle ci-dessus. */
  #profil-cv-zone .cv-lettre-row > .import-section { padding: 14px 16px; }
  #profil-cv-zone .cv-lettre-row > .import-section h3, #profil-cv-zone .cv-lettre-row > .import-section > summary { font-size: var(--fs-2xl); }
}

/* Echelle typographique, lot 4 (BUG-4168, 16/10/2026) : classes PARTAGEES, scopees a la fenetre qui les utilise (la taille d'origine reste ailleurs).
   « Lettre » : sous-texte .u-text-muted a 11 px (jeton --fs-xs hors des six tailles) -> --fs-sm. */
#lettre-modal .u-text-muted { font-size: var(--fs-sm); }
/* « Chomage et preuves » : le lien .regles-lien (partage) suit l'echelle dans cette fenetre seulement. */
#chomage-modal .regles-lien { font-size: var(--fs-base); }

/* Recruteurs retire du lancement (BUG-4200, reunion du 16/10/2026) : ferme tant que le serveur ne l'ouvre pas (RECRUTEURS_ACTIFS=1, lib/fonctions.js ; utils.js pose « recruteurs-on » sur <html>).
   On cache l'ecran, on ne supprime rien : sous-onglet Recruteurs, sa section, et les blocs de Criteres qui ne servent qu'aux cabinets (pays d'interet, position et rayon). */
html:not(.recruteurs-on) #sec-recruteurs,
html:not(.recruteurs-on) #sec-cibles > .coach-subtabs,
html:not(.recruteurs-on) .js-recruteurs-only { display: none !important; }

/* « Filtrage strict » (BUG-4204, reunion du 16/10/2026) : la case est alignee sur son libelle et ce que fait le reglage se lit sous le libelle, plus seulement dans une infobulle. */
/* .form-group est une colonne (flex-direction: column) et met ses libelles en capitales : le prefixe .form-group.crit-case l'emporte, la case se met a gauche du libelle, l'explication reste en minuscules. */
.form-group.crit-case { flex-direction: row; align-items: flex-start; gap: 10px; margin-top: 6px; }
.form-group.crit-case input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; }
.form-group.crit-case label { display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; margin: 0; }
.form-group.crit-case small { font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); line-height: 1.45; text-transform: none; letter-spacing: 0; }
@media (max-width: 768px) {
  .form-group.crit-case input[type="checkbox"] { width: 24px; height: 24px; min-width: 24px; min-height: 24px !important; padding: 0 !important; margin: 0 !important; }
}