/* =====================================================================
 * jobfinderia-ui.css — Système de design « JobFinder ia »
 * Style : Liquid Glass (verre dépoli) sur fond aurora bleu→violet→cyan.
 * Marque : navy #002b64. Évolution glassmorphique du système Mindtheos.
 *
 * Vues Blade : copier les blocs utiles en <style> inline en échappant
 * @media -> @@media et @keyframes -> @@keyframes (échappement Blade).
 * Police recommandée : Poppins (titres) + Inter (texte). Charger via
 * <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 * ===================================================================== */

:root {
  /* —— Marque & encre —— */
  --jf-brand:        #002b64;
  --jf-brand-2:      #003d8f;
  --jf-brand-3:      #0052bf;
  --jf-cyan:         #22d3ee;
  --jf-cyan-2:       #67e8f9;
  --jf-violet:       #7c3aed;
  --jf-ink:          #0f1f3d;
  --jf-ink-2:        #334a73;
  --jf-muted:        #5b6b8c;
  --jf-line:         rgba(15, 31, 61, .10);

  /* —— Verre dépoli (liquid glass) —— */
  --jf-glass:        rgba(255, 255, 255, .60);
  --jf-glass-strong: rgba(255, 255, 255, .74);
  --jf-glass-soft:   rgba(255, 255, 255, .42);
  --jf-glass-border: rgba(255, 255, 255, .70);
  --jf-glass-edge:   rgba(15, 31, 61, .08);
  /* Fond des <dialog> (modales) — jamais défini jusqu'ici alors qu'utilisé
     dans 6 vues (payments, promo-codes, salary-estimation, matching,
     cv-manager) : une variable CSS non définie retombe sur "transparent"
     pour `background`, donc TOUTES les modales de l'app affichaient le
     contenu de la page en transparence derrière elles, illisible dès que ce
     contenu était dense (ex. un tableau) — repéré le 2026-09-04 sur la
     nouvelle modale de détails de paiement, mais préexistant partout
     ailleurs. Bien plus opaque que --jf-glass-strong (.74) : une modale a
     besoin d'un contraste net avec CE QUI EST DERRIÈRE, pas d'un effet de
     verre subtil comme une carte de contenu normale.
     */
  --jf-glass-bg:     rgba(255, 255, 255, .97);
  --jf-blur:         22px;
  --jf-shadow-sm:    0 2px 10px rgba(2, 12, 40, .08);
  --jf-shadow:       0 10px 34px rgba(2, 12, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .65);
  --jf-shadow-lg:    0 24px 60px rgba(2, 12, 40, .20), inset 0 1px 0 rgba(255, 255, 255, .65);
  --jf-glow-cyan:    0 0 0 1px rgba(34, 211, 238, .35), 0 8px 26px rgba(34, 211, 238, .28);

  /* —— Rayons & typo —— */
  --jf-r-sm: 10px;
  --jf-r:    16px;
  --jf-r-lg: 22px;
  --jf-r-xl: 28px;
  --jf-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jf-display: "Poppins", var(--jf-font);
}

/* =====================================================================
 * 0-bis. RESET ANTI-DÉBORDEMENT (audit mobile 2026-09-06)
 * ===================================================================== */
/* Filet de sécurité : aucune page ne doit jamais scroller horizontalement,
   quel que soit l'élément fautif (largeur fixe, contenu non wrappé...).
   N'affecte pas les conteneurs à défilement horizontal volontaire
   (.jf-table-wrap, kanban...), qui gèrent leur propre overflow-x:auto en
   interne — seul le débordement du DOCUMENT est bloqué ici. */
html, body { overflow-x: hidden; max-width: 100%; }

/* Focus clavier visible, partout dans l'app (audit a11y refonte vitrine
   2026-10) : aucune règle :focus-visible n'existait jusqu'ici dans ce
   fichier — chaque composant ne définissait un anneau de focus qu'au cas
   par cas (.jf-control:focus...), donc un lien/bouton sans style dédié
   perdait l'indicateur par défaut du navigateur dès qu'une règle
   `outline:none` générique s'appliquait plus haut dans la cascade. Filet
   de sécurité générique, additif : ne change rien au rendu souris/tactile
   (:focus-visible ne se déclenche qu'à la navigation clavier), et les
   composants qui ont déjà leur propre style de focus (ex. .jf-control)
   le gardent, celui-ci ne fait que compléter ce qui n'était couvert nulle
   part ailleurs. Couleur : --jf-cyan (token existant), pas une couleur
   nouvelle. */
:focus-visible {
  outline: 2px solid var(--jf-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Centrage fiable des <dialog> (showModal()) : le centrage par défaut du
   navigateur (margin:auto sur position:fixed) est peu fiable sur mobile
   (Safari/Chrome iOS notamment) combiné à width:100% — repéré sur capture
   réelle : dialog collé au bord gauche de l'écran, rétréci et illisible,
   alors qu'il s'affiche correctement sur desktop/Chrome. Centrage explicite
   par transform, indépendant du support navigateur de dialog:modal. Les
   dialog de l'app définissent déjà leur propre max-width/padding en style
   inline (prioritaire) : cette règle ne touche que le positionnement. */
dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}

/* =====================================================================
 * 0. AURORA — fond global
 * ===================================================================== */
.jf-aurora,
body.jf-aurora {
  min-height: 100vh;
  margin: 0;
  font-family: var(--jf-font);
  color: var(--jf-ink);
  background:
    radial-gradient(58% 48% at 10% 12%,  rgba(37, 99, 235, .55), transparent 62%),
    radial-gradient(52% 46% at 90% 8%,   rgba(124, 58, 237, .42), transparent 60%),
    radial-gradient(48% 52% at 84% 92%,  rgba(8, 145, 178, .48), transparent 62%),
    radial-gradient(46% 42% at 18% 96%,  rgba(34, 211, 238, .34), transparent 60%),
    linear-gradient(160deg, #e9f0fb 0%, #eef1fc 42%, #f2edfd 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
/* nappe animée optionnelle : <div class="jf-aurora-veil"></div> en position fixed */
.jf-aurora-veil {
  position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(34, 211, 238, .20), transparent 60%),
    radial-gradient(40% 40% at 70% 70%, rgba(124, 58, 237, .18), transparent 60%);
  filter: blur(40px);
  animation: jf-drift 26s ease-in-out infinite alternate;
}
@keyframes jf-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(4%, -3%, 0) rotate(8deg); }
}

/* =====================================================================
 * 1. VERRE — surfaces réutilisables
 * ===================================================================== */
.jf-glass,
.jf-glass-strong,
.jf-glass-soft {
  -webkit-backdrop-filter: blur(var(--jf-blur)) saturate(165%);
  backdrop-filter: blur(var(--jf-blur)) saturate(165%);
  border: 1px solid var(--jf-glass-border);
  border-radius: var(--jf-r);
  box-shadow: var(--jf-shadow);
  position: relative;
}
.jf-glass        { background: var(--jf-glass); }
.jf-glass-strong { background: var(--jf-glass-strong); }
.jf-glass-soft   { background: var(--jf-glass-soft); box-shadow: var(--jf-shadow-sm); }
/* liseré lumineux supérieur */
.jf-glass::after,
.jf-glass-strong::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 38%);
  mix-blend-mode: overlay; opacity: .7;
}

/* =====================================================================
 * 2. APP SHELL — sidebar + topbar + contenu
 * ===================================================================== */
.jf-app { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; position: relative; z-index: 1; }

.jf-sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  margin: 14px 0 14px 14px; padding: 18px 14px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--jf-glass-strong);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--jf-glass-border);
  border-radius: var(--jf-r-lg);
  box-shadow: var(--jf-shadow);
  overflow-y: auto;
}
.jf-brandbar { display: flex; align-items: center; gap: 11px; padding: 6px 8px 16px; }
.jf-brandbar img, .jf-brandbar svg { width: 38px; height: 38px; flex: none; }
.jf-brandbar .jf-brandtext { font-family: var(--jf-display); font-weight: 700; font-size: 18px; color: var(--jf-brand); line-height: 1; }
.jf-brandbar .jf-brandtext b { color: var(--jf-cyan); }
.jf-brandbar .jf-brandtext small { display: block; font-family: var(--jf-font); font-weight: 600; font-size: 9.5px; letter-spacing: .14em; color: var(--jf-muted); margin-top: 3px; }

.jf-nav-group { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jf-muted); padding: 14px 12px 6px; }
.jf-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--jf-r-sm);
  color: var(--jf-ink-2); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.jf-nav-item svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.jf-nav-item:hover { background: rgba(255, 255, 255, .55); color: var(--jf-brand); }
.jf-nav-item.is-active {
  background: linear-gradient(135deg, var(--jf-brand), var(--jf-brand-2));
  color: #fff; box-shadow: 0 8px 20px rgba(0, 43, 100, .30);
}
.jf-nav-item.is-active svg { opacity: 1; }
.jf-nav-item .jf-count {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: var(--jf-cyan); color: #06283d;
}
.jf-nav-item.is-active .jf-count { background: rgba(255, 255, 255, .22); color: #fff; }

.jf-sidebar-foot { margin-top: auto; padding-top: 12px; }
.jf-userchip {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: var(--jf-r-sm); background: rgba(255, 255, 255, .5); border: 1px solid var(--jf-glass-edge);
}
.jf-userchip .jf-avatar { width: 34px; height: 34px; }
.jf-userchip .jf-uname { font-size: 13px; font-weight: 700; color: var(--jf-ink); line-height: 1.1; }
.jf-userchip .jf-umail { font-size: 11px; color: var(--jf-muted); }

/* ── Sidebar réductible (icônes seules), demande 2026-09-05 ────────────
 * État persisté via localStorage + classe posée sur <html> (pas sur
 * .jf-app) : le petit script qui la lit tourne juste après <body>,
 * AVANT que .jf-app soit parsé/peint, pour éviter un flash grande
 * sidebar -> réduite (le style ne peut cibler .jf-app.is-collapsed que
 * si la classe existe dès le premier paint, or ce div n'existe pas
 * encore quand un <script> placé avant lui s'exécute — <html>, lui,
 * existe déjà dès l'ouverture de <body>).
 * Réservé au desktop (>980px) : en dessous, la sidebar est déjà un
 * tiroir plein texte piloté par .is-open (comportement totalement
 * différent, cf. media query juste après celle-ci) — la classe peut
 * rester posée sur <html> sans jamais s'y appliquer.
 * Le texte des libellés de nav (.jf-nav-item) n'est PAS dans un <span>
 * dédié dans les 4 partials sidebar — plutôt que d'éditer chaque item
 * (~30 dans admin seul), on profite du fait qu'un texte flottant dans
 * un flex container est un "anonymous flex item" : réduire la largeur
 * de .jf-nav-item + overflow:hidden le rogne exactement comme un vrai
 * enfant, sans toucher au markup existant. Même trick pour .jf-userchip
 * (le <div> texte suit toujours .jf-avatar — ciblé via +).
 */
.jf-sidebar-collapse-row { display: flex; justify-content: flex-end; padding: 0 2px 8px; }
.jf-sidebar-collapse-btn {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .6); border: 1px solid var(--jf-glass-edge);
  color: var(--jf-ink-2); cursor: pointer; transition: background .15s, color .15s;
}
.jf-sidebar-collapse-btn:hover { background: #fff; color: var(--jf-brand); }
.jf-sidebar-collapse-btn svg { width: 13px; height: 13px; transition: transform .2s ease; transform: rotate(180deg); }

@media (min-width: 981px) {
  html.jf-sidebar-collapsed .jf-app { grid-template-columns: 76px 1fr; }
  html.jf-sidebar-collapsed .jf-sidebar { padding: 18px 10px; }
  html.jf-sidebar-collapsed .jf-brandbar { padding: 6px 4px 16px; justify-content: center; }
  html.jf-sidebar-collapsed .jf-brandtext,
  html.jf-sidebar-collapsed .jf-nav-group,
  html.jf-sidebar-collapsed .jf-userchip .jf-avatar + div,
  html.jf-sidebar-collapsed .jf-sidebar-extra {
    display: none;
  }
  html.jf-sidebar-collapsed .jf-sidebar-collapse-row { justify-content: center; }
  html.jf-sidebar-collapsed .jf-sidebar-collapse-btn svg { transform: rotate(0deg); }
  /* !important : le bouton de déconnexion (.jf-sidebar-foot) porte un
     style="width:100%" en dur (app.blade.php) — une spécificité de
     classe ne suffit jamais à battre un style inline.
     font-size:0 plutôt que overflow:hidden+white-space:nowrap : vérifié
     à l'écran (Chrome headless piloté en CDP) que malgré une boîte
     .jf-nav-item correctement clampée à sa largeur réduite (confirmé
     par getBoundingClientRect), le glyphe du texte continuait à être
     peint au-delà — un enfant flex anonyme (le texte brut, jamais dans
     un <span> dédié dans les 4 partials sidebar) semble échapper au
     rognage overflow:hidden de son parent dans ce rendu. font-size:0
     ramène la largeur du texte à ~0 sans dépendre du tout du rognage —
     les icônes SVG (width/height en px, jamais en em) restent
     intactes, insensibles à font-size. */
  html.jf-sidebar-collapsed .jf-nav-item {
    box-sizing: border-box !important; width: 46px !important; margin: 0 auto;
    padding: 12px !important; font-size: 0 !important; overflow: hidden; justify-content: center !important;
  }
  html.jf-sidebar-collapsed .jf-nav-item .jf-count { display: none; }
  html.jf-sidebar-collapsed .jf-userchip { justify-content: center; padding: 9px; }
}

.jf-main { padding: 22px 26px 40px; position: relative; z-index: 1; min-width: 0; }

.jf-topbar {
  display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
  padding: 12px 16px; border-radius: var(--jf-r);
  background: var(--jf-glass); -webkit-backdrop-filter: blur(var(--jf-blur)) saturate(165%);
  backdrop-filter: blur(var(--jf-blur)) saturate(165%);
  border: 1px solid var(--jf-glass-border); box-shadow: var(--jf-shadow-sm);
}
.jf-search { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .55); border: 1px solid var(--jf-glass-edge); }
.jf-search svg { width: 18px; height: 18px; color: var(--jf-muted); flex: none; }
.jf-search input { border: none; outline: none; background: transparent; width: 100%; font-size: 14px; color: var(--jf-ink); font-family: var(--jf-font); }
.jf-search input::placeholder { color: var(--jf-muted); }
.jf-iconbtn { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .55); border: 1px solid var(--jf-glass-edge); color: var(--jf-ink-2); cursor: pointer; position: relative; }
.jf-iconbtn:hover { background: #fff; color: var(--jf-brand); }
.jf-iconbtn svg { width: 19px; height: 19px; }
.jf-iconbtn .jf-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #e11d48; border: 2px solid #fff; }

/* =====================================================================
 * 3. AVATARS / initiales expéditeur (façon Proton)
 * ===================================================================== */
.jf-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--jf-brand-2), var(--jf-brand));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.jf-avatar--cyan   { background: linear-gradient(135deg, #22d3ee, #0891b2); color: #06283d; }
.jf-avatar--violet { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.jf-avatar--green  { background: linear-gradient(135deg, #34d399, #059669); }
.jf-avatar--amber  { background: linear-gradient(135deg, #fbbf24, #d97706); }
.jf-avatar--rose   { background: linear-gradient(135deg, #fb7185, #e11d48); }
.jf-avatar--slate  { background: linear-gradient(135deg, #94a3b8, #475569); }

/* =====================================================================
 * 4. HERO en verre teinté marine
 * ===================================================================== */
.jf-hero {
  position: relative; overflow: hidden; border-radius: var(--jf-r-lg);
  padding: 26px 30px; margin-bottom: 24px; color: #fff;
  background: linear-gradient(135deg, rgba(0, 43, 100, .92), rgba(0, 61, 143, .88) 55%, rgba(8, 145, 178, .82));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: var(--jf-shadow);
}
.jf-hero::before { content: ""; position: absolute; right: -50px; top: -70px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .45), transparent 65%); }
.jf-hero::after { content: ""; position: absolute; right: 120px; bottom: -110px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .40), transparent 65%); }
.jf-hero-inner { position: relative; z-index: 1; }
.jf-breadcrumb { font-size: 12px; color: rgba(255, 255, 255, .78); margin-bottom: 12px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.jf-breadcrumb a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.jf-breadcrumb a:hover { text-decoration: underline; }
.jf-breadcrumb svg { width: 14px; height: 14px; opacity: .6; }
.jf-hero h1 { font-family: var(--jf-display); font-size: 26px; font-weight: 700; margin: 0; line-height: 1.12; letter-spacing: -.01em; }
.jf-hero-sub { font-size: 13.5px; opacity: .9; margin-top: 7px; max-width: 60ch; }
.jf-hero-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

/* =====================================================================
 * 5. BOUTONS
 * ===================================================================== */
.jf-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--jf-font); font-size: 13.5px; font-weight: 600;
  padding: 10px 17px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease; white-space: nowrap; }
.jf-btn svg { width: 17px; height: 17px; }
.jf-btn:hover { transform: translateY(-1px); }
.jf-btn--navy { background: linear-gradient(135deg, var(--jf-brand-2), var(--jf-brand)); color: #fff; box-shadow: 0 8px 22px rgba(0, 43, 100, .28); }
.jf-btn--navy:hover { box-shadow: 0 12px 28px rgba(0, 43, 100, .38); }
.jf-btn--cyan { background: linear-gradient(135deg, var(--jf-cyan-2), var(--jf-cyan)); color: #06283d; box-shadow: var(--jf-glow-cyan); }
.jf-btn--glass { background: rgba(255, 255, 255, .6); color: var(--jf-brand); border-color: var(--jf-glass-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.jf-btn--glass:hover { background: #fff; }
.jf-btn--ghost { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .35); }
.jf-btn--ghost:hover { background: rgba(255, 255, 255, .26); }
.jf-btn--sm { padding: 7px 12px; font-size: 12.5px; }

/* =====================================================================
 * 6. METRIC / STAT cards (verre, cliquables)
 * ===================================================================== */
.jf-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-bottom: 24px; }
.jf-metric {
  display: block; text-decoration: none; color: inherit; padding: 18px;
  background: var(--jf-glass); -webkit-backdrop-filter: blur(var(--jf-blur)) saturate(165%);
  backdrop-filter: blur(var(--jf-blur)) saturate(165%);
  border: 1px solid var(--jf-glass-border); border-radius: var(--jf-r); box-shadow: var(--jf-shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease; position: relative; overflow: hidden;
}
.jf-metric:hover { transform: translateY(-3px); box-shadow: var(--jf-shadow); }
.jf-metric.is-active { box-shadow: 0 0 0 2px var(--jf-brand), var(--jf-shadow); }
.jf-metric .m-top { display: flex; align-items: flex-start; justify-content: space-between; }
.jf-metric .m-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.jf-metric .m-ico svg { width: 21px; height: 21px; }
.jf-metric .m-trend { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.jf-metric .m-trend.up { color: #059669; } .jf-metric .m-trend.down { color: #e11d48; }
.jf-metric .m-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--jf-muted); margin-top: 16px; }
.jf-metric .m-value { font-family: var(--jf-display); font-size: 28px; font-weight: 700; color: var(--jf-ink); line-height: 1.05; margin-top: 4px; }
.jf-metric .m-sub { font-size: 12.5px; color: var(--jf-muted); margin-top: 3px; }

/* puces d'icône colorées (réutilisées partout) */
.jf-chip-ico { display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; }
.ico-navy   { background: rgba(0, 43, 100, .12);  color: var(--jf-brand); }
.ico-cyan   { background: rgba(8, 145, 178, .14); color: #0891b2; }
.ico-violet { background: rgba(124, 58, 237, .14);color: var(--jf-violet); }
.ico-green  { background: rgba(5, 150, 105, .14); color: #059669; }
.ico-amber  { background: rgba(217, 119, 6, .15); color: #d97706; }
.ico-rose   { background: rgba(225, 29, 72, .13); color: #e11d48; }
.ico-blue   { background: rgba(37, 99, 235, .14); color: #2563eb; }
.ico-slate  { background: rgba(71, 85, 105, .13); color: #475569; }

/* =====================================================================
 * 7. SEC-CARD — sections create / edit / show (verre + accent)
 * ===================================================================== */
.jf-sec {
  position: relative; overflow: hidden; margin-bottom: 20px;
  background: var(--jf-glass); -webkit-backdrop-filter: blur(var(--jf-blur)) saturate(165%);
  backdrop-filter: blur(var(--jf-blur)) saturate(165%);
  border: 1px solid var(--jf-glass-border); border-radius: var(--jf-r); box-shadow: var(--jf-shadow-sm);
  --accent: #002b64; --accent-soft: rgba(0, 43, 100, .10); --accent-shadow: rgba(0, 43, 100, .28);
}
.jf-sec::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.jf-sec-head { display: flex; align-items: center; gap: 13px; padding: 16px 20px;
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%); border-bottom: 1px solid var(--jf-glass-edge); }
.jf-sec-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000 0%)); color: #fff; box-shadow: 0 8px 18px var(--accent-shadow); }
.jf-sec-ico svg { width: 21px; height: 21px; }
.jf-sec-title { font-family: var(--jf-display); font-size: 15.5px; font-weight: 700; color: var(--jf-ink); margin: 0; line-height: 1.2; }
.jf-sec-sub { font-size: 12px; color: var(--jf-muted); margin-top: 2px; }
.jf-sec-body { padding: 20px; }
.jf-sec--tinted .jf-sec-body { background: var(--accent-soft); }

.jf-sec[data-accent="navy"]   { --accent: #002b64; --accent-soft: rgba(0, 43, 100, .10);  --accent-shadow: rgba(0, 43, 100, .28); }
.jf-sec[data-accent="indigo"] { --accent: #4f46e5; --accent-soft: rgba(79, 70, 229, .10);  --accent-shadow: rgba(79, 70, 229, .28); }
.jf-sec[data-accent="violet"] { --accent: #7c3aed; --accent-soft: rgba(124, 58, 237, .10); --accent-shadow: rgba(124, 58, 237, .28); }
.jf-sec[data-accent="green"]  { --accent: #059669; --accent-soft: rgba(5, 150, 105, .10);  --accent-shadow: rgba(5, 150, 105, .28); }
.jf-sec[data-accent="rose"]   { --accent: #e11d48; --accent-soft: rgba(225, 29, 72, .10);  --accent-shadow: rgba(225, 29, 72, .28); }
.jf-sec[data-accent="blue"]   { --accent: #2563eb; --accent-soft: rgba(37, 99, 235, .10);  --accent-shadow: rgba(37, 99, 235, .28); }
.jf-sec[data-accent="amber"]  { --accent: #d97706; --accent-soft: rgba(217, 119, 6, .10);  --accent-shadow: rgba(217, 119, 6, .28); }
.jf-sec[data-accent="cyan"]   { --accent: #0891b2; --accent-soft: rgba(8, 145, 178, .10);  --accent-shadow: rgba(8, 145, 178, .28); }
.jf-sec[data-accent="slate"]  { --accent: #475569; --accent-soft: rgba(71, 85, 105, .10);  --accent-shadow: rgba(71, 85, 105, .28); }

/* bandeau dégradé marine pleine largeur */
.jf-highlight { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--jf-r);
  color: #fff; background: linear-gradient(135deg, var(--jf-brand), var(--jf-brand-2), #0891b2); box-shadow: 0 12px 30px rgba(0, 43, 100, .26); }
.jf-highlight .nh-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); }
.jf-highlight strong { font-weight: 700; } .jf-highlight p { margin: 2px 0 0; font-size: 13px; opacity: .9; }

/* =====================================================================
 * 8. BADGES de statut
 * ===================================================================== */
.jf-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; line-height: 1.4; }
.jf-badge svg { width: 13px; height: 13px; }
.jf-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.jf-badge--draft    { background: rgba(71, 85, 105, .12);  color: #475569; }
.jf-badge--queued   { background: rgba(37, 99, 235, .12);  color: #2563eb; }
.jf-badge--optimizing { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.jf-badge--review   { background: rgba(217, 119, 6, .14);  color: #b45309; }
.jf-badge--sent     { background: rgba(5, 150, 105, .14);  color: #047857; }
.jf-badge--rejected { background: rgba(225, 29, 72, .12);  color: #be123c; }
.jf-badge--info     { background: rgba(255, 255, 255, .18); color: #fff; }
.jf-badge--info::before { background: var(--jf-cyan); }

/* =====================================================================
 * 9. TABLEAU en verre
 * ===================================================================== */
.jf-table-wrap { overflow: hidden; border-radius: var(--jf-r-lg);
  background: var(--jf-glass); -webkit-backdrop-filter: blur(var(--jf-blur)) saturate(165%);
  backdrop-filter: blur(var(--jf-blur)) saturate(165%);
  border: 1px solid var(--jf-glass-border); box-shadow: var(--jf-shadow); }
.jf-table-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--jf-glass-edge); flex-wrap: wrap; }
.jf-table-toolbar .jf-title { font-family: var(--jf-display); font-weight: 700; font-size: 15px; color: var(--jf-ink); }
.jf-table-toolbar .spacer { flex: 1; }
.jf-table { width: 100%; border-collapse: collapse; }
.jf-table thead th { position: sticky; top: 0; background: rgba(248, 250, 255, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--jf-muted); font-weight: 700; text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--jf-glass-edge); }
.jf-table tbody td { padding: 14px 18px; font-size: 13.5px; color: var(--jf-ink); border-bottom: 1px solid rgba(15, 31, 61, .06); vertical-align: middle; }
.jf-table tbody tr { transition: background .12s ease; cursor: pointer; }
.jf-table tbody tr:hover { background: rgba(255, 255, 255, .55); }
.jf-table tbody tr:last-child td { border-bottom: none; }
.jf-cell-main { display: flex; align-items: center; gap: 12px; }
.jf-cell-main .jf-cm-title { font-weight: 700; color: var(--jf-ink); }
.jf-cell-main .jf-cm-sub { font-size: 12px; color: var(--jf-muted); margin-top: 2px; }
.jf-unread td { background: rgba(34, 211, 238, .06); }
.jf-unread .jf-cm-title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--jf-brand-3); margin-right: 7px; vertical-align: middle; }

/* boutons d'action 34×34 en verre */
.jf-actions { display: flex; gap: 7px; }
.jf-act { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--jf-glass-edge); cursor: pointer; transition: transform .12s ease; background: rgba(255, 255, 255, .55); }
.jf-act svg { width: 16px; height: 16px; }
.jf-act:hover { transform: translateY(-1px); }
.jf-act--view   { color: var(--jf-brand); } .jf-act--view:hover   { background: rgba(0, 43, 100, .12); }
.jf-act--edit   { color: #d97706; }        .jf-act--edit:hover   { background: rgba(217, 119, 6, .14); }
.jf-act--send   { color: #059669; }        .jf-act--send:hover   { background: rgba(5, 150, 105, .14); }
.jf-act--delete { color: #e11d48; }        .jf-act--delete:hover { background: rgba(225, 29, 72, .13); }

/* =====================================================================
 * 10. FILTRES / segments
 * ===================================================================== */
.jf-segment { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: rgba(255, 255, 255, .5); border: 1px solid var(--jf-glass-edge); }
.jf-segment a { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--jf-ink-2); text-decoration: none; transition: all .14s ease; }
.jf-segment a:hover { color: var(--jf-brand); }
.jf-segment a.is-active { background: linear-gradient(135deg, var(--jf-brand), var(--jf-brand-2)); color: #fff; box-shadow: 0 6px 16px rgba(0, 43, 100, .26); }

/* =====================================================================
 * 11. BARRE DE TOTAUX
 * ===================================================================== */
.jf-totals { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px 20px; margin-bottom: 18px;
  background: var(--jf-glass); -webkit-backdrop-filter: blur(var(--jf-blur)); backdrop-filter: blur(var(--jf-blur));
  border: 1px solid var(--jf-glass-border); border-radius: var(--jf-r); box-shadow: var(--jf-shadow-sm); }
.jf-totals .tb-group { display: flex; gap: 30px; flex-wrap: wrap; }
.jf-totals .tb-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--jf-muted); }
.jf-totals .tb-value { font-family: var(--jf-display); font-size: 20px; font-weight: 700; color: var(--jf-ink); }

/* =====================================================================
 * 12. FORMULAIRES — layout 2 colonnes + champs verre
 * ===================================================================== */
.jf-form-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.jf-field { margin-bottom: 16px; }
.jf-field:last-child { margin-bottom: 0; }
.jf-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--jf-ink-2); margin-bottom: 7px; }
.jf-field label .req { color: #e11d48; }
.jf-control { width: 100%; box-sizing: border-box; border: 1px solid rgba(15, 31, 61, .14); border-radius: 12px; padding: 11px 13px; font-size: 14px; font-family: var(--jf-font);
  color: var(--jf-ink); background: rgba(255, 255, 255, .65); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .15s ease, box-shadow .15s ease; }
.jf-control::placeholder { color: var(--jf-muted); }
.jf-control:focus { outline: none; border-color: var(--jf-brand-3); background: #fff; box-shadow: 0 0 0 4px rgba(0, 82, 191, .14); }
textarea.jf-control { min-height: 110px; resize: vertical; }

/* Bug Chromium connu : un backdrop-filter sur un <select> OU un de ses
 * ancêtres fait scintiller/trembler le menu déroulant natif à
 * l'ouverture (le navigateur recompose le flou à chaque frame pendant
 * que le popup natif — hors DOM, hors contrôle CSS — reste affiché
 * par-dessus), rendant le choix d'une option quasiment impossible
 * (signalé 2026-09-05, champ "Genre" des préférences de recherche —
 * mais touche potentiellement N'IMPORTE QUEL <select> de l'app, 17 vues
 * en utilisent). Corrigé en désactivant le flou UNIQUEMENT pendant
 * qu'un <select> a le focus (donc ouvert/en cours d'interaction) —
 * jamais pour les autres champs (:has() ciblé sur select, jamais
 * :focus-within qui couperait aussi le flou à chaque saisie texte dans
 * le même panneau).
 */
select.jf-control:focus,
.jf-glass:has(select:focus),
.jf-glass-strong:has(select:focus),
.jf-glass-soft:has(select:focus),
.jf-sec:has(select:focus),
.jf-card:has(select:focus),
.jf-how:has(select:focus),
.jf-auth-card:has(select:focus) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.jf-hint { font-size: 11.5px; color: var(--jf-muted); margin-top: 6px; }
.jf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* zone d'import IA pleine largeur */
.jf-ai-import { position: relative; overflow: hidden; border-radius: var(--jf-r-lg); padding: 22px 24px; margin-bottom: 20px; color: #fff;
  background: linear-gradient(135deg, var(--jf-brand), var(--jf-brand-2) 55%, #0891b2); box-shadow: 0 14px 34px rgba(0, 43, 100, .26); border: 1px solid rgba(255, 255, 255, .22); }
.jf-ai-import::before { content: ""; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, .4), transparent 65%); }
.jf-ai-import .ai-inner { position: relative; z-index: 1; }
.jf-ai-import h3 { font-family: var(--jf-display); margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.jf-ai-import p { margin: 5px 0 15px; font-size: 13px; opacity: .9; }
.jf-dropzone { border: 2px dashed rgba(255, 255, 255, .45); border-radius: var(--jf-r); padding: 24px; text-align: center; background: rgba(255, 255, 255, .08); transition: background .15s ease; }
.jf-dropzone:hover { background: rgba(255, 255, 255, .16); }
.jf-dropzone svg { width: 30px; height: 30px; opacity: .9; }
.jf-dropzone .dz-main { font-weight: 600; font-size: 14px; margin-top: 8px; }
.jf-dropzone .dz-sub { font-size: 12px; opacity: .8; margin-top: 3px; }

/* sidebar formulaire : « Comment ça marche » */
.jf-side { display: flex; flex-direction: column; gap: 16px; }
.jf-how { padding: 18px; background: var(--jf-glass); -webkit-backdrop-filter: blur(var(--jf-blur)); backdrop-filter: blur(var(--jf-blur));
  border: 1px solid var(--jf-glass-border); border-radius: var(--jf-r); box-shadow: var(--jf-shadow-sm); }
.jf-how h4 { font-family: var(--jf-display); margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--jf-ink); display: flex; align-items: center; gap: 9px; }
.jf-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.jf-steps li { position: relative; padding: 0 0 16px 38px; font-size: 13px; color: var(--jf-ink-2); line-height: 1.5; }
.jf-steps li:last-child { padding-bottom: 0; }
.jf-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--jf-brand), var(--jf-brand-2)); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 43, 100, .25); }
.jf-cta { padding: 18px; border-radius: var(--jf-r); text-align: center; color: #fff; background: linear-gradient(135deg, #0891b2, var(--jf-brand)); }
.jf-cta p { margin: 0 0 12px; font-size: 13px; opacity: .92; }

/* =====================================================================
 * 13. TIMELINE / activité (page show + dashboard)
 * ===================================================================== */
.jf-timeline { list-style: none; margin: 0; padding: 0; }
.jf-timeline li { position: relative; padding: 0 0 20px 30px; }
.jf-timeline li:last-child { padding-bottom: 0; }
.jf-timeline li::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: 0; width: 2px; background: var(--jf-line); }
.jf-timeline li:last-child::before { display: none; }
.jf-timeline .tl-dot { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--jf-line); background: var(--jf-brand); }
.jf-timeline .tl-dot.green { background: #059669; } .jf-timeline .tl-dot.amber { background: #d97706; } .jf-timeline .tl-dot.violet { background: #7c3aed; } .jf-timeline .tl-dot.cyan { background: #0891b2; }
.jf-timeline .tl-title { font-size: 13.5px; font-weight: 600; color: var(--jf-ink); }
.jf-timeline .tl-time { font-size: 12px; color: var(--jf-muted); margin-top: 2px; }

/* barre de progression */
.jf-progress { height: 8px; border-radius: 999px; background: rgba(15, 31, 61, .10); overflow: hidden; }
.jf-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--jf-brand-2), var(--jf-cyan)); }

/* =====================================================================
 * 14. AUTH — carte de connexion / onboarding
 * ===================================================================== */
.jf-auth { min-height: 100vh; display: grid; place-items: center; padding: 30px; position: relative; z-index: 1; }
.jf-auth-card { width: 100%; max-width: 420px; padding: 34px 32px;
  background: var(--jf-glass-strong); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--jf-glass-border); border-radius: var(--jf-r-xl); box-shadow: var(--jf-shadow-lg); text-align: center; }
.jf-auth-card .jf-auth-logo { width: 84px; height: 84px; margin: 0 auto 14px; }
.jf-auth-card h1 { font-family: var(--jf-display); font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--jf-ink); }
.jf-auth-card .jf-auth-sub { font-size: 13.5px; color: var(--jf-muted); margin-bottom: 24px; }
.jf-auth-card .jf-field { text-align: left; }
.jf-oauth { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.jf-oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px; border-radius: 12px; font-size: 14px; font-weight: 600;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--jf-glass-edge); color: var(--jf-ink); cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.jf-oauth-btn:hover { transform: translateY(-1px); box-shadow: var(--jf-shadow-sm); }
.jf-oauth-btn img, .jf-oauth-btn svg { width: 20px; height: 20px; }
.jf-divider { display: flex; align-items: center; gap: 12px; color: var(--jf-muted); font-size: 12px; margin: 18px 0; }
.jf-divider::before, .jf-divider::after { content: ""; flex: 1; height: 1px; background: var(--jf-line); }

/* =====================================================================
 * 15. UTILITAIRES
 * ===================================================================== */
.jf-ico { display: inline-flex; align-items: center; justify-content: center; }
.jf-ico-16 svg { width: 16px; height: 16px; } .jf-ico-20 svg { width: 20px; height: 20px; } .jf-ico-24 svg { width: 24px; height: 24px; }
.jf-stack { display: flex; flex-direction: column; gap: 20px; }
.jf-grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.jf-muted { color: var(--jf-muted); } .jf-strong { font-weight: 700; color: var(--jf-ink); }
.jf-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--jf-glass-edge); }
.jf-pagehead h2 { font-family: var(--jf-display); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--jf-ink); }
.jf-card { padding: 20px; background: var(--jf-glass); -webkit-backdrop-filter: blur(var(--jf-blur)) saturate(165%); backdrop-filter: blur(var(--jf-blur)) saturate(165%);
  border: 1px solid var(--jf-glass-border); border-radius: var(--jf-r); box-shadow: var(--jf-shadow-sm); }
.jf-card-title { font-family: var(--jf-display); font-size: 15px; font-weight: 700; color: var(--jf-ink); margin: 0 0 14px; display: flex; align-items: center; gap: 9px; }

/* Tableaux dans un conteneur .jf-glass : défiler horizontalement plutôt que
   déborder/rogner sur petit écran. Mettre ce conteneur autour de <table>,
   pas overflow:hidden directement dessus. */
.jf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jf-table-wrap table { min-width: 560px; }

/* Pagination — mobile-first : empilé/centré par défaut, ligne unique dès 640px */
.jf-pagination { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 18px; font-size: 12.5px; color: var(--jf-muted); }
.jf-pagination-nav { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.jf-pagination-btn, .jf-pagination-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 12px; border-radius: var(--jf-r-sm);
  background: rgba(255, 255, 255, .6); border: 1px solid var(--jf-glass-edge);
  color: var(--jf-ink-2); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.jf-pagination-btn:hover, .jf-pagination-page:hover { background: #fff; color: var(--jf-brand); }
.jf-pagination-btn.is-disabled { opacity: .4; pointer-events: none; }
.jf-pagination-page.is-current { background: linear-gradient(135deg, var(--jf-brand), var(--jf-brand-2)); color: #fff; border-color: transparent; }
.jf-pagination-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.jf-pagination-dots { padding: 0 4px; color: var(--jf-muted); }
@media (min-width: 640px) {
  .jf-pagination { flex-direction: row; justify-content: space-between; }
}

/* =====================================================================
 * 16. RESPONSIVE — mobile-first : les règles de base (hors media query)
 * ci-dessus doivent déjà fonctionner sur petit écran ; ces blocs n'ajoutent
 * que les mises en page multi-colonnes à partir d'un certain espace.
 * ===================================================================== */
@media (min-width: 1024px) {
  .jf-form-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .jf-form-side { position: sticky; top: 22px; }
  .jf-grid-2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
@media (min-width: 641px) {
  .jf-row, .jf-field .jf-row { grid-template-columns: 1fr 1fr; }
}
.jf-menu-toggle { display: none; }
@media (max-width: 980px) {
  .jf-app { grid-template-columns: 1fr; }
  .jf-menu-toggle { display: inline-flex; }
  .jf-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 999; height: 100vh; width: 84vw; max-width: 320px;
    margin: 0; border-radius: 0; flex-direction: column; align-items: stretch;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .jf-sidebar.is-open { transform: translateX(0); box-shadow: var(--jf-shadow-lg); }
  .jf-nav-group, .jf-sidebar-foot { display: block; }
  .jf-main { padding: 16px; }
  .jf-topbar { flex-wrap: wrap; }
  .jf-search { order: 3; flex-basis: 100%; }
  /* Réduction réservée au desktop — en mobile la sidebar est déjà un
     tiroir plein texte piloté par .is-open (comportement différent). */
  .jf-sidebar-collapse-row { display: none; }
}
@media (max-width: 640px) {
  .jf-row, .jf-field .jf-row { grid-template-columns: 1fr; }
  .jf-main { padding: 16px; }
  .jf-pagehead { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
 * 17. FILET DE SÉCURITÉ MOBILE — nombreuses vues Blade fixent des grilles
 * multi-colonnes en style inline (ex: style="grid-template-columns:1fr 320px"),
 * ce qui est impossible à rendre responsive sans media query au niveau de la
 * page. Plutôt que réécrire chaque vue une par une, on neutralise ces grilles
 * en dessous des seuils où elles cassent, en ciblant le contenu de l'attribut
 * style — [style*="..."] passe outre la spécificité de l'inline via !important.
 * Sans effet sur les grilles déjà responsive (repeat(auto-fit/auto-fill,...)).
 * ===================================================================== */
@media (max-width: 900px) {
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns:1fr 120px"],
  [style*="grid-template-columns: 1fr 120px"],
  [style*="grid-template-columns:1fr 460px"],
  [style*="grid-template-columns: 1fr 460px"],
  [style*="grid-template-columns:300px 1fr"],
  [style*="grid-template-columns: 300px 1fr"],
  [style*="grid-template-columns:280px 1fr"],
  [style*="grid-template-columns: 280px 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns: repeat(6,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2,1fr)"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
  }
}

/* Formulaire de plage de dates personnalisée (filtre "Période" — dashboards
   admin/souscripteur + page Tokens & Coûts, 3 vues, markup identique) : sur
   mobile, ce <form> ne wrappait pas ses propres enfants (label+date+label+
   date+bouton, ~450px incompressibles avec des <input type="date">), et il
   n'est PAS dans un conteneur scrollable → débordement horizontal de toute
   la page (vérifié en direct via screenshot mobile 375px, ~118px de
   débordement). Cible le style inline exact partagé par les 3 vues plutôt
   que dupliquer le correctif dans chaque fichier. */
@media (max-width: 560px) {
  [style*="padding-left:12px;border-left:1px solid var(--jf-line)"] {
    flex-wrap: wrap !important;
  }
}

/* repeat(auto-fit/auto-fill, minmax(Npx,1fr)) est en général déjà responsive
   (colonnes qui s'empilent seules), mais quand N dépasse la largeur dispo sur
   les tout petits écrans (320px de large - padding), même une seule colonne ne
   rentre plus — vérifié en direct sur /admin/prompts et /admin/subscription-plans. */
@media (max-width: 420px) {
  [style*="minmax(340px"],
  [style*="minmax(320px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Voile derrière le menu mobile ouvert, pour fermer au clic à côté */
.jf-sidebar-backdrop { display: none; }
@media (max-width: 980px) {
  .jf-sidebar-backdrop.is-open {
    display: block; position: fixed; inset: 0; z-index: 998;
    background: rgba(15, 23, 42, .35); backdrop-filter: blur(2px);
  }
}

/* respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce) { .jf-aurora-veil { animation: none; } .jf-btn:hover, .jf-metric:hover, .jf-act:hover { transform: none; } }

/* =====================================================================
 * 18. MODAL DE CONFIRMATION GLOBAL — remplace window.confirm() natif
 * partout (suppression, vidage de logs, etc). Un seul markup dans le
 * layout, piloté par jfConfirmSubmit()/jfConfirmOk()/jfConfirmCancel().
 * ===================================================================== */
.jf-confirm-backdrop {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 20px;
}
.jf-confirm-backdrop.is-open { display: flex; }
.jf-confirm-box {
  background: rgba(255,255,255,.97); backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.95); border-radius: 20px;
  max-width: 380px; width: 100%; padding: 28px 26px 22px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.jf-confirm-icon {
  width: 44px; height: 44px; border-radius: 14px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(190,18,60,.08); color: #be123c;
}
.jf-confirm-message { font-size: 13.5px; font-weight: 600; color: var(--jf-ink); line-height: 1.6; margin-bottom: 22px; }
.jf-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.jf-confirm-cancel, .jf-confirm-ok {
  flex: 1; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.jf-confirm-cancel { border: 1px solid var(--jf-glass-edge); background: transparent; color: var(--jf-ink-2); }
.jf-confirm-ok { border: none; background: #be123c; color: #fff; }

/* =====================================================================
 * 19. CV BUILDER — galerie de modèles + éditeur live (Alpine.js + SortableJS)
 * ===================================================================== */
[x-cloak] { display: none !important; }

/* ── Galerie de modèles ── */
.jf-cvb-tmpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.jf-cvb-tmpl-card {
  border: 1.5px solid var(--jf-glass-edge); border-radius: var(--jf-r); background: var(--jf-glass-soft);
  padding: 14px; cursor: pointer; text-align: left; font-family: var(--jf-font); transition: border-color .15s, box-shadow .15s;
}
.jf-cvb-tmpl-card:hover { border-color: var(--jf-brand-3); }
.jf-cvb-tmpl-card--active { border-color: var(--jf-brand-3); box-shadow: 0 0 0 3px rgba(0,82,191,.12); }
/* Miniature réelle (galerie de templates, Phase 3 "s'inspirer de Canva") —
   iframe intrinsèque au format A4 (794x1123, même référence que l'aperçu
   live du builder) réduite par transform:scale() plutôt que redimensionnée :
   dompdf/le navigateur rendent tous deux à taille réelle, seule la vue
   change d'échelle, jamais le contenu réellement recalculé en petit. */
.jf-cvb-tmpl-preview-real {
  height: 210px; border-radius: 10px; background: #fff; border: 1px solid var(--jf-glass-edge);
  margin-bottom: 10px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center;
}
.jf-cvb-tmpl-preview-real iframe {
  width: 794px; height: 1123px; border: none; pointer-events: none;
  transform: scale(.187); transform-origin: top center; flex: none;
}
.jf-cvb-tmpl-label { font-size: 12.5px; font-weight: 700; color: var(--jf-ink); }

/* ── Éditeur ── */
/* L'aperçu est la surface d'édition principale (Phase 4 "s'inspirer de
   Canva", 2026-09-02) : la colonne panneau (outils + structure + éditeur
   contextuel) passe en premier et reste étroite (400px fixes), l'aperçu
   prend tout l'espace restant (1fr) plutôt que l'inverse d'avant (grand
   formulaire à gauche, petit aperçu à droite). */
{{-- minmax(0, ...) plutôt que 400px/1fr nus (2026-09-07) : une piste de
     grille CSS respecte par défaut min-width:auto, c'est-à-dire la largeur
     min-content de son contenu le plus large — hors écran, l'iframe
     d'aperçu du CV fait 794px de large (format A4 réel, avant mise à
     l'échelle JS). Sans minmax(0,...), cette largeur intrinsèque forçait
     TOUTE la colonne (donc .jf-cvb-form-col ET .jf-cvb-preview-col, qui
     partagent la même piste en mobile) à ~820px de large sur un écran de
     390px — masqué par overflow-x:hidden (aucun scroll de page), mais le
     contenu au-delà de 390px restait invisible/inatteignable (checkbox de
     visibilité des sections notamment, capture réelle). Pire : scalePreview()
     (edit.blade.php) calcule l'échelle depuis viewport.clientWidth, qui
     reflétait alors cette largeur artificiellement gonflée -> l'aperçu ne
     rétrécissait quasiment pas non plus. --}}
.jf-cvb-layout { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .jf-cvb-layout { grid-template-columns: minmax(0, 1fr); } }
.jf-cvb-form-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.jf-cvb-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jf-cvb-save-status { font-size: 11.5px; font-weight: 700; color: var(--jf-muted); }
.jf-cvb-save-status--saving { color: #d97706; }
.jf-cvb-save-status--error { color: #be123c; }
.jf-cvb-ai-loading { font-size: 11.5px; font-weight: 700; color: var(--jf-violet); }

.jf-cvb-btn-outline, .jf-cvb-btn-brand {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.jf-cvb-btn-outline { border: 1px solid var(--jf-glass-edge); background: rgba(255,255,255,.6); color: var(--jf-ink-2); }
.jf-cvb-btn-brand { border: none; background: linear-gradient(135deg,var(--jf-brand),var(--jf-brand-3)); color: #fff; }

.jf-cvb-tmpl-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 180px;
  background: var(--jf-glass-strong); backdrop-filter: blur(var(--jf-blur)); border: 1px solid var(--jf-glass-border);
  border-radius: 12px; box-shadow: var(--jf-shadow-lg); padding: 6px;
}
.jf-cvb-tmpl-dropdown-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: none;
  background: transparent; font-size: 12.5px; font-weight: 600; color: var(--jf-ink-2); cursor: pointer;
}
.jf-cvb-tmpl-dropdown-item:hover { background: rgba(0,82,191,.07); }
.jf-cvb-tmpl-dropdown-item--active { color: var(--jf-brand-3); background: rgba(0,82,191,.08); }

/* Pastille de couleur — sélecteur de palette du CV builder (bouton toolbar + items du dropdown). */
.jf-cvb-swatch-dot {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 1px solid rgba(0,0,0,.12);
}

.jf-cvb-card {
  border: 1px solid var(--jf-glass-edge); border-radius: var(--jf-r); background: var(--jf-glass-soft); padding: 16px;
}
.jf-cvb-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.jf-cvb-card-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--jf-ink); text-transform: uppercase; letter-spacing: .04em; }
.jf-cvb-card-actions { display: flex; align-items: center; gap: 8px; }
.jf-cvb-card-body { display: flex; flex-direction: column; gap: 10px; }

.jf-cvb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jf-cvb-input, .jf-cvb-textarea {
  width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 9px; border: 1.5px solid var(--jf-glass-edge);
  background: rgba(255,255,255,.75); color: var(--jf-ink); font-size: 12.5px; font-family: var(--jf-font); outline: none;
}
.jf-cvb-input:focus, .jf-cvb-textarea:focus { border-color: var(--jf-brand-3); }
.jf-cvb-textarea { resize: vertical; }
.jf-cvb-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--jf-ink-2); font-weight: 600; }
.jf-cvb-photo-row { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--jf-ink-2); margin-bottom: 4px; }

.jf-cvb-add-btn {
  align-self: flex-start; border: none; background: rgba(0,82,191,.08); color: var(--jf-brand-3);
  font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer; margin-top: 4px;
}
.jf-cvb-ai-btn {
  display: inline-flex; align-items: center; gap: 5px; border: none; background: rgba(124,58,237,.08); color: var(--jf-violet);
  font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer; margin-top: 4px;
}
.jf-cvb-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--jf-glass-edge); background: rgba(255,255,255,.5); color: var(--jf-ink-2); cursor: pointer; flex: none;
}
.jf-cvb-icon-btn--danger { border-color: rgba(190,18,60,.15); background: rgba(190,18,60,.07); color: #be123c; }

.jf-cvb-entry { border: 1px solid var(--jf-glass-edge); border-radius: 12px; padding: 12px; background: rgba(255,255,255,.5); }
.jf-cvb-bullet-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }

.jf-cvb-drag-item { display: flex; align-items: flex-start; gap: 8px; }
.jf-cvb-drag-handle { cursor: grab; color: var(--jf-muted); flex: none; padding-top: 6px; touch-action: none; }
.jf-cvb-drag-handle:active { cursor: grabbing; }
.jf-cvb-drag-body { flex: 1; min-width: 0; }
.jf-cvb-drag-actions { flex: none; }

/* Panneau d'édition contextuel (Phase 4 "s'inspirer de Canva", 2026-09-02) —
   un seul groupe de champs affiché à la fois, celui cliqué dans l'aperçu. */
.jf-cvb-editor-body { display: flex; flex-direction: column; gap: 8px; }
.jf-cvb-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }

/* Mini-listes réordonnables (expérience/formation) : juste le titre + une
   poignée de glisser, cliquer ouvre le même panneau qu'un clic sur l'aperçu. */
.jf-cvb-mini-row {
  padding: 8px 10px; border: 1px solid var(--jf-glass-edge); border-radius: 9px; background: rgba(255,255,255,.5);
  font-size: 12.5px; font-weight: 600; color: var(--jf-ink-2); cursor: pointer; transition: border-color .12s, background .12s;
}
.jf-cvb-mini-row:hover { border-color: var(--jf-brand-3); }
.jf-cvb-mini-row--active { border-color: var(--jf-brand-3); background: rgba(0,82,191,.06); color: var(--jf-brand-3); }

.jf-cvb-section-order-list { display: flex; flex-direction: column; gap: 6px; }
.jf-cvb-section-order-item {
  padding: 8px 10px; border: 1px solid var(--jf-glass-edge); border-radius: 9px; background: rgba(255,255,255,.5);
  font-size: 12.5px; font-weight: 600; color: var(--jf-ink-2); display: flex; align-items: center; justify-content: space-between;
}
.jf-cvb-visible-toggle input { cursor: pointer; }

.jf-cvb-tag-block { margin-bottom: 4px; }
.jf-cvb-tag-label { font-size: 10.5px; font-weight: 700; color: var(--jf-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.jf-cvb-tag-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jf-cvb-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 10px; border-radius: 8px;
  background: rgba(0,82,191,.08); color: var(--jf-brand-3); font-size: 12px; font-weight: 600;
}
.jf-cvb-tag button { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.jf-cvb-tag-input {
  border: 1.5px dashed var(--jf-glass-edge); border-radius: 8px; padding: 4px 10px; font-size: 12px;
  background: transparent; outline: none; min-width: 120px; font-family: var(--jf-font);
}

.jf-cvb-suggestion { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.15); }
.jf-cvb-suggestion-title { font-size: 10.5px; font-weight: 800; color: var(--jf-violet); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.jf-cvb-suggestion-text { font-size: 12px; color: var(--jf-ink-2); line-height: 1.55; white-space: pre-wrap; margin-bottom: 8px; }
.jf-cvb-suggestion-actions { display: flex; gap: 8px; }

.jf-cvb-preview-col { position: sticky; top: 16px; min-width: 0; }
.jf-cvb-preview-head { font-size: 11px; font-weight: 700; color: var(--jf-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.jf-cvb-preview-viewport {
  border-radius: var(--jf-r); border: 1px solid var(--jf-glass-edge); background: #eef1f7; padding: 12px;
  overflow: hidden; height: var(--jf-cvb-scaled-h, 620px); display: flex; justify-content: center;
}
.jf-cvb-preview-frame {
  width: 794px; height: 1123px; border: none; background: #fff; box-shadow: 0 8px 28px rgba(2,12,40,.18);
  transform-origin: top center; flex: none;
}
@media (max-width: 1100px) { .jf-cvb-preview-col { position: static; } }