/* === Reset léger === */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: #f4f6f8;
  color: #1f2933;
  /* Flex shell so app-main can claim the exact remaining height between
     the sticky header and the footer — no more hard-coded `100vh - 110px`
     approximation that left ~24px of stray vertical scroll. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: #217dbb; text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Header / nav === */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #e3e8ee;
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.2em;
  color: #2c3e50;
  text-decoration: none;
}
.app-logo-icon { height: 30px; width: 30px; }
/* Nav en flex : garde tous les items (liens, formulaire de déconnexion ET le
   menu de langue <details>) sur une seule ligne, alignés verticalement. Sans
   ça, le <details> (block par défaut) passait à la ligne sous la nav et créait
   une grande bande vide. flex-wrap = repli propre si la fenêtre est étroite. */
.app-header nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
}
.app-header nav a {
  margin-left: 16px;
  color: #52606d;
  font-weight: 500;
}
.app-header nav .link-button {
  background: none;
  border: none;
  padding: 0;
  margin-left: 12px;
  color: #c0392b;
  cursor: pointer;
  font-size: 0.95em;
}
.app-header nav .link-button:hover { text-decoration: underline; }
/* Burger mobile : invisible en desktop, activé par la media query ≤767px. */
.nav-burger { display: none; }

/* Sélecteur de langue d'interface (i18n) : menu déroulant natif <details>.
   Le résumé (drapeau courant + chevron) ; le panneau liste les langues
   (drapeau + endonyme). Zéro JS, accessible au clavier. */
/* Reset des styles globaux `details {…}` (pensés pour les blocs repliables de
   l'éditeur) qui sinon donnent au menu un encadré gris, du padding et une
   margin-bottom — ce qui le décentrait verticalement dans la nav. */
.lang-menu,
.lang-menu[open] {
  position: relative;
  margin: 0 0 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
}
.lang-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
/* Masque le triangle natif du <summary> (WebKit + autres). */
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::marker { content: ""; }
.lang-menu > summary:hover { background: #f0f3f6; }
.lang-flag {
  width: 20px;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(31, 41, 51, 0.12);
}
.lang-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #52606d;
  transition: transform .15s ease;
}
.lang-menu[open] > summary .lang-caret { transform: rotate(180deg); }
.lang-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(31, 41, 51, 0.14);
  min-width: 170px;
  z-index: 50;
}
.lang-menu-list li { margin: 0; }
.lang-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
  padding: 8px 10px;
  border-radius: 6px;
  color: #2c3e50;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.lang-menu-item:hover { background: #f0f3f6; text-decoration: none; }
.lang-menu-item.is-active { font-weight: 700; }
.lang-menu-item.is-active::after { content: "✓"; margin-left: auto; color: #2c3e50; }

/* Menu compte (avatar à droite) — regroupe profil, admin, langues, statut
   premium et déconnexion. Même pattern <details> que le sélecteur de langue
   (natif, zéro JS, CSP-safe). */
.user-menu, .user-menu[open] { position: relative; margin-left: 16px; }
.user-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px; padding: 2px;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary::marker { content: ""; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #2c3e50; color: #fff; display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
}
.user-menu > summary:hover .user-avatar { filter: brightness(1.12); }
.user-menu[open] > summary .lang-caret { transform: rotate(180deg); }
.user-menu-name { display: none; }
.user-menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  background: #fff; border: 1px solid #e3e8ee; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,30,45,0.12); padding: 6px; z-index: 50;
}
/* En-tête du menu : l'email du compte connecté (non cliquable, tronqué si long). */
.user-menu-email {
  padding: 6px 10px 8px; font-size: 13px; color: #5f6b76;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-header nav .user-menu-item {
  display: flex; align-items: center; gap: 9px; margin-left: 0;
  padding: 8px 10px; border-radius: 7px; font-size: 14px;
  color: #2c3e50; white-space: nowrap;
}
.app-header nav .user-menu-item:hover { background: #f0f3f6; text-decoration: none; }
.user-menu-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: #8a949e; padding: 6px 10px 2px;
}
.user-menu-sep { height: 1px; background: #eef1f5; margin: 6px 4px; }
.app-header nav .user-menu-premium { color: #9a6b00; font-weight: 600; }
.user-menu-lang.is-active { font-weight: 700; }
.user-menu-lang.is-active::after { content: "✓"; margin-left: auto; color: #2c3e50; }
.user-menu-logout { margin: 0; }
.app-header nav .user-menu-danger {
  background: none; border: none; width: 100%; text-align: left;
  cursor: pointer; font: inherit; color: #c0392b;
}
.app-header nav .user-menu-danger:hover { background: #fdecec; text-decoration: none; }

/* Sous-menu « Langue » (liste dans la liste) : <details> imbriqué, replié par
   défaut. Le déclencheur montre la langue courante ; la liste s'ouvre à la
   demande — reste léger même avec beaucoup de langues. */
.user-submenu > summary { list-style: none; cursor: pointer; }
.user-submenu > summary::-webkit-details-marker { display: none; }
.user-submenu > summary::marker { content: ""; }
.app-header nav .user-submenu-trigger { width: 100%; }
.user-submenu-current { margin-left: auto; display: inline-flex; align-items: center; }
.user-submenu[open] > summary .lang-caret { transform: rotate(180deg); }
/* Repli explicite : on ne dépend pas du style UA du <details> imbriqué (qui
   ne masque pas toujours son contenu selon l'implémentation du navigateur). */
.user-submenu:not([open]) > .user-submenu-list { display: none; }
/* Hauteur bornée + défilement : la sous-liste reste compacte quel que soit le
   nombre de langues (≈ 7 visibles, puis on scrolle). Scale sans limite. */
.user-submenu-list { margin-top: 2px; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.app-header nav .user-submenu-list .user-menu-item { padding-left: 26px; }
/* Rangée de langue mobile : masquée en desktop (le <details> ci-dessus prend
   le relais). Affichée et stylée dans la media query ≤767px. */
.lang-row { display: none; }

.auth-card {
  max-width: 480px;
  margin: 40px auto;
  padding: 32px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.06);
}
.auth-brand { display: block; width: 150px; max-width: 60%; height: auto; margin: 0 auto 8px; }
.auth-slogan { margin: 0 0 20px; text-align: center; color: #2b8fc9; font-weight: 600; font-size: 1.05em; letter-spacing: 0.3px; }
.auth-card h1 { margin-top: 0; color: #2c3e50; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; color: #52606d; }
.auth-form input { padding: 10px; border: 1px solid #cbd5dc; border-radius: 4px; font-size: 1em; }
.auth-success {
  background: #e6f5ec;
  border-left: 4px solid #27ae60;
  padding: 12px 16px;
  border-radius: 4px;
}
.auth-error {
  background: #fde6e6;
  border-left: 4px solid #c0392b;
  padding: 8px 14px;
  border-radius: 4px;
}
.auth-success-inline {
  background: #e6f5ec;
  border-left: 4px solid #27ae60;
  padding: 8px 14px;
  border-radius: 4px;
}
.dashboard { max-width: 1100px; margin: 32px auto; padding: 0 20px; }
.dashboard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.dashboard-head h1 { margin-bottom: 4px; }
.dashboard-import { white-space: nowrap; }
.dashboard h2 { margin-top: 32px; color: #2c3e50; }
.app-main {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Editor pages cap app-main at the viewport (between header and footer)
   so the form column and preview column can scroll INTERNALLY. That
   requires min-height:0 on the flex item to let it shrink below its
   content's intrinsic size. We scope it to .editor-layout so other pages
   (public CV, dashboard) keep the default min-height:auto and grow with
   content — without that, a multi-page public CV overflowed past main
   and the footer painted right over its lower half. */
.app-main:has(> .editor-layout) {
  min-height: 0;
}
.app-footer {
  text-align: center;
  padding: 16px;
  color: #7b8794;
  font-size: 0.85em;
  border-top: 1px solid #e3e8ee;
  margin-top: 32px;
  background: #fff;
  flex: none;
}

/* === Boutons === */
.btn-primary {
  display: inline-block;
  background: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover { background: #34495e; text-decoration: none; color: #fff; }
.btn-export {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
}
.btn-export:hover { background: #219955; }
.btn-delete {
  background: transparent;
  border: none;
  color: #c0392b;
  font-size: 1.3em;
  cursor: pointer;
  line-height: 1;
}

/* === Home === */
.hero {
  text-align: center;
  padding: 60px 20px 30px;
  background: linear-gradient(180deg, #fff 0%, #f4f6f8 100%);
}
.hero h1 { margin: 0 0 12px; color: #2c3e50; font-size: 2em; }
.hero .lead { color: #52606d; font-size: 1.1em; margin-bottom: 24px; }
/* The two hero CTAs as a flex row: both keep their box and the SAME height
   (btn-secondary is otherwise smaller), wrapping to centered lines instead of
   the import label breaking mid-word on a narrow phone — and stacking full
   width on small screens for a comfortable tap target. */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 4px;
}
.hero-cta .btn-primary,
.hero-cta .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 11px 18px;
  border-radius: 6px;
  font-size: 1em;
}
@media (max-width: 480px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
}

/* --- Home : blocs de bénéfices sous le hero --- */
.features { max-width: 1100px; margin: 32px auto 0; padding: 0 20px; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.feature-card {
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
  padding: 20px;
}
.feature-icon { font-size: 1.6em; margin-bottom: 8px; }
.feature-card h2 { margin: 0 0 8px; color: #2c3e50; font-size: 1.05em; }
.feature-card p { margin: 0; color: #52606d; font-size: 0.95em; line-height: 1.5; }

/* --- Suivi des candidatures : badges de statut + contrôle de la page de
   détail. Une couleur par étape du parcours réel. --- */
.applications-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.applications-head h1 { margin: 0; }
.new-application-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* List ⇄ Kanban view toggle. */
.applications-views { display: flex; gap: 6px; margin: 0 0 10px; }
.view-tab {
  padding: 5px 14px; border: 1px solid #cbd5dc; border-radius: 6px;
  color: #52606d; text-decoration: none; font-size: 0.9em;
}
.view-tab:hover { background: #f0f4f7; }
.view-tab-active, .view-tab-active:hover { background: #2c3e50; color: #fff; border-color: #2c3e50; }
/* Kanban board: horizontally-scrolling columns of status. */
/* width:100% pins this page to its container (app-main is a flex column, so the
   board's wide min-content can't stretch it past the viewport); the board itself
   then scrolls horizontally (overflow-x:auto) within the page. min-width:0 +
   border-box keep padding from re-introducing overflow. */
.applications-kanban-page { padding: 16px; width: 100%; max-width: 1200px; margin: 0 auto; min-width: 0; box-sizing: border-box; }
.kanban-hint { margin: 0 0 12px; }
.kanban-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.kanban-col { flex: 0 0 240px; background: #f1f4f7; border-radius: 10px; padding: 8px; }
.kanban-col-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 10px; border-radius: 6px; font-weight: 600; font-size: 0.9em; margin-bottom: 8px;
}
.kanban-col-count { background: rgba(255, 255, 255, 0.55); border-radius: 10px; padding: 0 8px; font-size: 0.85em; }
.kanban-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 44px; }
.kanban-col-over { outline: 2px dashed #1f4d8b; outline-offset: -3px; }
.kanban-card { background: #fff; border: 1px solid #e0e6ec; border-radius: 8px; padding: 8px; cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-card-dragging { opacity: 0.45; }
.kanban-card-link { display: flex; gap: 8px; align-items: center; text-decoration: none; color: #1f2d3d; }
.kanban-card-title { font-size: 0.9em; line-height: 1.25; }
@media (max-width: 600px) { .kanban-col { flex: 0 0 80vw; } }
.new-application-form select { max-width: 220px; }
.app-status-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 0.85em; font-weight: 600; white-space: nowrap;
}
/* Rappels de relance : badge « À relancer » (module followup_reminders). */
.app-followup-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 0.85em; font-weight: 600; white-space: nowrap;
  background: #fff3d6; color: #7a4a00;
}
/* One-click "write the follow-up" link on a to-follow-up application card. */
.app-followup-action {
  display: inline-block; margin: 2px 0 4px 14px;
  font-size: 0.85em; font-weight: 600; color: #b45309; text-decoration: none;
}
.app-followup-action:hover { text-decoration: underline; }
.app-message-loading { color: #52606d; font-style: italic; }
.app-status-a_envoyer { background: #eef2f6; color: #52606d; }
.app-status-envoyee   { background: #e3f0fb; color: #1f4d8b; }
.app-status-entretien { background: #fff3d6; color: #7a4a00; }
.app-status-refusee   { background: #fdecea; color: #8a1a1a; }
.app-status-acceptee  { background: #e7f6ec; color: #1e6b3a; }
.application-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 4px 0 18px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
}
.application-meta .application-delete { margin-left: auto; }
.app-status-control { display: inline-flex; align-items: center; gap: 8px; }
.app-status-label {
  display: inline-flex; align-items: center; gap: 8px;
  color: #7b8794; font-size: 0.78em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.app-status-select {
  font-family: inherit; font-size: 0.92rem;
  padding: 6px 10px;
  border: 1px solid #cbd5dc; border-radius: 6px;
  background: #fff; color: #2c3e50;
  cursor: pointer;
  text-transform: none; letter-spacing: normal; font-weight: 500;
}
.app-status-select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}
.app-status-saved { color: #1e6b3a; font-size: 0.85em; }
select.app-status-select.app-status-entretien { border-color: #e3b35c; }
select.app-status-select.app-status-acceptee  { border-color: #58b87c; }
select.app-status-select.app-status-refusee   { border-color: #e08a85; }

/* État de chargement des formulaires longs (form-loading.js) : libellé
   d'attente + spinner sur le bouton submit pendant l'appel LLM. */
.btn-loading { opacity: 0.75; pointer-events: none; }
.btn-loading::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 8px;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Avertissement brouillon anonyme (home + éditeur) : informatif, pas
   alarmiste — fond ambré doux, lien de conversion vers /login. */
.anon-notice {
  background: #fff8e6;
  border: 1px solid #f0d48a;
  color: #7a5a00;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 12px;
  font-size: 0.92em;
  line-height: 1.45;
}
.anon-notice a { color: #7a4a00; font-weight: 600; text-decoration: underline; }

.my-cvs { max-width: 900px; margin: 32px auto; padding: 0 16px; }
.cv-list { list-style: none; padding: 0; }
.cv-list li { background: #fff; border: 1px solid #e3e8ee; border-radius: 6px; margin-bottom: 8px; padding: 12px 16px; }
.cv-list a { color: #1f2933; }
.cv-meta { color: #7b8794; font-size: 0.9em; margin-left: 8px; }
.cv-row { display: flex; align-items: center; gap: 12px; }
.cv-row-title { flex: 1; }
.cv-row-actions { display: flex; gap: 4px; }
.btn-row {
  background: transparent;
  border: 1px solid #cbd5dc;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 1em;
  line-height: 1;
}
.btn-row:hover { background: #f0f4f7; }
/* Action destructrice : rouge discret au repos, affirmé au survol. */
.btn-row-danger { color: #c0392b; border-color: #e4bcb7; }
.btn-row-danger:hover { background: #fde6e6; border-color: #c0392b; }
.cv-row-empty { color: #7b8794; font-style: italic; }

/* --- Dashboard : cartes CV avec aperçu réel ---
   L'aperçu est le rendu HTML complet du CV (largeur 210mm posée par chaque
   template), réduit à ~30% par transform — même approche que l'aperçu de
   l'éditeur, sans screenshot à générer. Cartes à largeur fixe pour que le
   facteur d'échelle reste un simple nombre CSS. */
.cv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, 244px);
  gap: 16px;
  margin-bottom: 12px;
}
.cv-card {
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease;
}
.cv-card:hover { box-shadow: 0 3px 10px rgba(31, 41, 51, 0.10); }
.cv-card-thumb {
  display: block;
  height: 200px;
  overflow: hidden;
  background: #f4f6f8;
  border-bottom: 1px solid #e3e8ee;
  position: relative;
}
.cv-card-scale {
  /* Absolutely positioned so the (large, unscaled) preview box is OUT of flow
     and cannot inflate the card's intrinsic height: transform: scale() does not
     shrink the layout box, and the grid's auto-row sizing would otherwise size
     the row to the thumb's full unscaled content — making cards of long /
     multi-page CVs grow to thousands of px. Anchored to the relative
     .cv-card-thumb (height:200px, overflow:hidden), which clips the preview. */
  position: absolute;
  top: 0;
  left: 0;
  width: 210mm;
  transform: scale(0.305);
  transform-origin: top left;
  pointer-events: none;
}
.cv-card-nothumb {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 2.4em; color: #cbd2d9;
}
.cv-card-thumb-cta {
  position: absolute; inset: 0;
  z-index: 1; /* sits above the pointer-events:none preview = the click target */
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 41, 51, 0.45);
  color: #fff; font-weight: 600; text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cv-card-thumb:hover .cv-card-thumb-cta,
.cv-card-thumb-cta:focus-visible { opacity: 1; }
.cv-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.cv-card-title { color: #1f2933; line-height: 1.3; }
.cv-card-meta { color: #7b8794; font-size: 0.82em; }
/* Ligne d'état du lien public : une seule rangée — le slug s'ellipse
   plutôt que de pousser les boutons (Copier, ⛔) à la ligne. */
.cv-card-public { display: flex; align-items: center; gap: 6px; font-size: 0.85em; }
.cv-card-public .cv-public-link {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-card-public .btn-row { flex: none; }
/* Boutons compacts dans les cartes : 244px de large, il faut tenir à
   plusieurs par ligne sans empiler une colonne de gros boutons. */
.cv-card .btn-row { font-size: 0.8em; padding: 3px 8px; }
/* Grille d'actions : 2 colonnes égales, les actions « larges » (Rendre
   public, Supprimer) prennent la ligne entière via .btn-card-wide. Fini
   le flex-wrap qui laissait un bouton orphelin selon la langue/longueur.
   (Après la règle compacte ci-dessus : même spécificité, l'ordre décide.) */
.cv-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 2px;
}
.cv-card-actions .btn-card-wide { grid-column: 1 / -1; }
.cv-card-actions .btn-row {
  text-align: center;
  padding: 5px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Publication refusée : encart ambre listant les prérequis manquants. */
.cv-publish-issues {
  background: #fff8e1;
  border: 1px solid #f4d77e;
  color: #5b4500;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.8em;
  line-height: 1.45;
}
.cv-publish-issues ul { margin: 4px 0 0; padding-left: 18px; }
.cv-card .cv-public-link { font-size: 0.95em; }

/* === Galerie === */
/* Scoped to the gallery section: the broad `section` selector previously
   here also matched <section class="editor-preview"> in the editor, which
   capped the preview pane at 1100px and centered it with 32px auto margins
   — leaving a half-width preview floating in the middle of a 960px grid
   track on desktop. */
.quick-templates, section.gallery { max-width: 1100px; margin: 32px auto; padding: 0 20px; }
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.template-card {
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.template-card h3 { margin: 0 0 6px; color: #2c3e50; }
.template-card p { color: #52606d; flex: 1; }
/* Template thumbnail: a downscaled screenshot of the template rendered
   against a fictional CV. Generated by `go run ./cmd/gen-thumbs/` and
   checked in under static/img/templates/<id>.png. Aspect ratio is A4
   portrait (210×297mm), so the box clamps the width and lets the height
   follow naturally. */
.template-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 794 / 1123;
  object-fit: cover;
  object-position: top;
  background: #f4f7fa;
  border: 1px solid #e3e8ee;
  border-radius: 4px;
  margin-bottom: 12px;
}
.template-themes { list-style: none; padding: 0; margin: 8px 0; font-size: 0.9em; }
.template-themes li { display: flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }

/* Carte modèle entièrement cliquable (home « Modèles disponibles »).
   `.card-submit` est un vrai <button type=submit> rendu transparent et étiré
   sur toute la carte : un clic n'importe où soumet le formulaire (création du
   CV), sans bouton dédié. Toute la carte prend le curseur main + un retour
   visuel au survol ; le focus clavier reste visible via :focus-within. */
.template-card.is-clickable {
  position: relative;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.template-card.is-clickable:hover {
  border-color: #2c3e50;
  box-shadow: 0 8px 20px rgba(31, 41, 51, 0.12);
  transform: translateY(-2px);
}
.template-card.is-clickable:focus-within {
  outline: 2px solid #2c3e50;
  outline-offset: 2px;
}
.template-card.is-clickable .card-submit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* === Éditeur === */
.editor-layout {
  display: grid;
  /* Form column floor bumped 340→400px so the layout-panel (Main/Sidebar
     sub-grid at 160px each) and the design-bar's 5 fields can stay 2-up
     without becoming illegible. Combined with the 1280px tab-mode
     breakpoint below, the 2-col mode now only ever activates when the
     viewport guarantees the form ≥ 400px and the preview ≥ 800px. */
  grid-template-columns: minmax(400px, 1fr) 2fr;
  gap: 0;
  /* Defensive clip: a future grid-misuse or oversized child must not
     spill the editor outside its column track and create a horizontal
     page scroll. Both columns also carry their own overflow rules. */
  overflow-x: clip;
  /* Body is a flex column shell; app-main has flex:1 so we just claim its
     full height. No more approximations of the header/footer heights. */
  flex: 1;
  min-height: 0;
  /* Cap the editor width on large screens so the preview column doesn't
     balloon way beyond the CV's natural 210mm, leaving the rendered CV
     stranded in a sea of white. 1600px = 380 form + 1220 preview, plenty
     of room around an 793px A4 sheet. Centered inside the flex column. */
  width: 100%;
  max-width: 1600px;
  align-self: center;
}
.editor-form {
  background: #fff;
  border-right: 1px solid #e3e8ee;
  /* Colonne flex : .form-head (titre + actions + onglets) reste fixe en
     haut, .form-scroll porte le scroll interne. L'en-tête et les onglets
     Contenu/Design/Mise en page restent ainsi toujours visibles. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* min-width:0 lets the column actually shrink below its natural content
     width in the parent grid (the grid track is 1fr but inputs default to
     ~180px content width, pushing the column wider). */
  min-width: 0;
}
.form-head {
  flex: none;
  padding: 16px 16px 0;
  border-bottom: 1px solid #e3e8ee;
}
/* Le séparateur du form-header est redondant avec celui du .form-head. */
.form-head .form-header { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
.form-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
}

/* Onglets du panneau (Contenu / Design / Mise en page) : barre segmentée
   compacte, distincte des .editor-tabs mobiles (soulignés, pleine largeur).
   Les volets inactifs restent dans le DOM (cibles HTMX + swaps OOB). */
.panel-tabs {
  display: flex;
  gap: 4px;
  background: #eef1f5;
  border-radius: 8px;
  padding: 4px;
  margin: 0 0 12px;
}
.panel-tab {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 0.9em;
  color: #52606d;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.panel-tab:hover { color: #2c3e50; }
.panel-tab[aria-selected="true"] {
  background: #fff;
  color: #2c3e50;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.panel-pane { display: none; }
.editor-form[data-panel="content"] .panel-pane[data-panel="content"],
.editor-form[data-panel="design"] .panel-pane[data-panel="design"],
.editor-form[data-panel="layout"] .panel-pane[data-panel="layout"] { display: block; }
.editor-preview {
  padding: 20px;
  overflow: auto;
  background: #e8edf2;
  /* Same reason as .editor-form: grid items default to min-content width,
     which for this column is the unscaled A4 sheet (~794px). Without this,
     a narrow viewport (mobile, stacked layout) would let the preview blow
     past the grid track and force horizontal page scroll. */
  min-width: 0;
}
/* Scale the CV template wrapper to fit the preview pane.
   Using `zoom` instead of `transform: scale()` because zoom DOES affect
   layout — the wrapper's offsetHeight/width reflect the scaled size, so
   the preview pane scrolls only over the visible content (no stray blank
   band below the visible CV, regardless of how many A4 pages it spans).
   transform doesn't have this property: it's purely visual and leaves the
   original 1752px layout box behind.
   `zoom` is supported in all modern browsers (Chromium, Safari since 16,
   Firefox 126+, 2024). For older browsers the wrapper just renders at
   100% — acceptable degradation.
   `width: fit-content` makes the wrapper hug its 210mm-wide .cv-container
   instead of stretching to fill the preview pane — without this, on wide
   monitors (e.g. 2560px) the wrapper would be ~1000px but the cv-container
   (margin:0 in each template) would stay left-aligned with 200+px of dead
   space on the right. Hugging + margin:0 auto centres the sheet. */
#cv-preview > div {
  width: fit-content;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  zoom: var(--cv-scale, 1);
}
.form-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e3e8ee;
}
/* The title input is the elastic primary item; min-width prevents it
   from collapsing to a sliver when the export + delete buttons grow
   wide enough to force a wrap, while flex-basis 100% on the buttons
   below ~480px makes them claim a full row instead of nibbling at
   the title. */
.title-input { flex: 1 1 220px; min-width: 0; }
.title-input input {
  width: 100%;
  font-size: 1.2em;
  font-weight: 600;
  border: none;
  border-bottom: 2px dashed transparent;
  padding: 4px 0;
  background: transparent;
}
.title-input input:focus { outline: none; border-bottom-color: #3498db; }

.design-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  background: #f0f4f7;
  border-radius: 6px;
  margin-bottom: 12px;
  align-items: flex-end;
}
.design-field {
  display: flex;
  flex-direction: column;
  font-size: 0.78em;
  color: #52606d;
}
.design-field span { margin-bottom: 2px; }
.design-field select, .design-field input[type="color"] {
  padding: 4px 6px;
  border: 1px solid #cbd5dc;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: inherit;
  background: #fff;
  min-width: 110px;
}
.design-field input[type="color"] { padding: 2px; height: 32px; min-width: 50px; }

details {
  border: 1px solid #e3e8ee;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: #fafbfc;
}
details[open] { background: #fff; }
details > summary {
  cursor: pointer;
  font-weight: 600;
  color: #2c3e50;
  padding: 4px 0;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Layout panel: 2-column drag-drop UI for moving sections between the
   main column and the sidebar. Each column is a Sortable<ul> sharing a
   group, so chips travel freely between them. */
.layout-panel { margin: 4px 0 8px 0; }
/* auto-fit + minmax: as soon as the editor form (the container) is
   too narrow for two ≥160px columns, the grid collapses to 1 col
   automatically. Container-query-style, no media query needed — the
   layout reacts to its parent's width, which matters because the
   form keeps its own width even in tab mode (full viewport) vs.
   2-col mode (340-480px). */
.layout-panel-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.layout-col {
  background: #f4f7fa;
  border: 1px solid #d8e0e7;
  border-radius: 6px;
  padding: 8px;
  min-height: 60px;
}
.layout-col-title {
  font-size: 0.8em;
  font-weight: 600;
  color: #52606d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.layout-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 32px;
}
.layout-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #cbd5dc;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 0.88em;
  color: #2c3e50;
}
.layout-chip-grip {
  cursor: grab;
  color: #b6c0c9;
  font-weight: 700;
  letter-spacing: -1px;
  user-select: none;
  font-size: 0.85em;
}
.layout-chip-grip:hover { color: #3498db; }
.layout-chip-grip:active { cursor: grabbing; }
.layout-chip-label { flex: 1; }
.layout-chip-eye {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.7;
  flex-shrink: 0;
}
.layout-chip-eye:hover { opacity: 1; }
.layout-chip-hidden {
  opacity: 0.55;
  background: #f4f7fa;
  border-style: dashed;
}
.layout-chip-hidden .layout-chip-label {
  text-decoration: line-through;
  color: #7a8a96;
}
.layout-chip-ghost {
  opacity: 0.4;
  background: #d6e9f7 !important;
}
.layout-panel-hint {
  margin: 8px 2px 0 2px;
  font-size: 0.78em;
  color: #7a8a96;
  line-height: 1.35;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 10px 0;
}
.form-grid label { display: flex; flex-direction: column; font-size: 0.85em; color: #52606d; min-width: 0; }
/* .full spans both grid columns. Matches <label class="full"> AND the
   photo wrapper <div class="full"> — otherwise the div sat in one column,
   wasting the right half (visible once the per-country photo hint got
   long). min-width:0 lets long hint text wrap inside instead of overflowing. */
.form-grid .full { grid-column: 1 / -1; min-width: 0; }
.form-grid input, .form-grid textarea, .form-grid select {
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid #cbd5dc;
  border-radius: 4px;
  font-size: 0.95em;
  font-family: inherit;
  /* Without these, <input>'s intrinsic min-width (~size=20 = ~180px) forces
     the grid track wider than 1fr and the form overflows its column. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}

/* Collapsible block (<details>) for experiences/education/custom/etc.
   When closed, only the summary row is visible. */
.repeat-block {
  border-left: 3px solid #3498db;
  background: #f8fafc;
  margin: 6px 0;
  border-radius: 0 4px 4px 0;
  overflow: hidden;
}
.repeat-block[open] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.repeat-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;            /* hide default disclosure triangle in WebKit */
}
.repeat-summary::-webkit-details-marker { display: none; }
.repeat-summary::marker { content: ""; }
.repeat-summary::before {
  content: "▸";
  color: #b6c0c9;
  font-size: 0.85em;
  width: 12px;
  transition: transform 0.15s;
}
.repeat-block[open] > .repeat-summary::before { transform: rotate(90deg); }
.repeat-summary .drag-handle {
  cursor: grab;
  color: #b6c0c9;
  font-weight: 700;
  letter-spacing: -1px;
  user-select: none;
  font-size: 0.85em;
  padding: 0 4px;
}
.repeat-summary .drag-handle:hover { color: #3498db; }
.repeat-summary .drag-handle:active { cursor: grabbing; }
.repeat-title {
  flex: 1;
  font-weight: 500;
  color: #2c3e50;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.repeat-block:not([open]) .repeat-title { color: #52606d; font-weight: 600; }
.repeat-summary .btn-delete {
  margin-left: auto;
  flex-shrink: 0;
}
.repeat-block .form-grid { padding: 0 12px 10px 32px; }

.drag-ghost {
  opacity: 0.4;
  background: #d6e9f7 !important;
}

/* Reference editor row: optional logo thumbnail + file upload form, sharing
   the same row so each reference shows its current logo state inline. */
.ref-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ref-logo-thumb {
  width: 48px;
  height: 32px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #cbd5dc;
  border-radius: 4px;
  padding: 2px;
}
.ref-logo-empty {
  font-size: 0.85em;
  color: #7a8a96;
  font-style: italic;
}
.ref-logo-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
/* Mirror photo-upload's behaviour: the native input file's internal
   "Choose File / No file chosen" label was truncated on narrow forms
   because the input had no width floor. flex-basis 160px lets the
   input claim a sensible chunk before the button drops below it. */
.ref-logo-form input[type="file"] {
  flex: 1 1 160px;
  min-width: 0;
  font-size: 0.8em;
}
.ref-logo-form button { flex: 0 0 auto; }
.btn-delete-logo {
  background: none;
  border: 1px solid #cbd5dc;
  color: #52606d;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.8em;
  cursor: pointer;
}
.btn-delete-logo:hover { background: #f4f7fa; }

.preview-status {
  text-align: right;
  font-size: 0.85em;
  color: #52606d;
  margin-bottom: 6px;
}
.page-indicator {
  background: #fff;
  border: 1px solid #cbd5dc;
  border-radius: 12px;
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}
.repeat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.repeat-head input {
  flex: 1;
  margin-right: 8px;
  padding: 4px 8px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 600;
  font-size: 0.95em;
}
.repeat-head input:focus { outline: none; border-color: #3498db; background: #fff; }

.skills-items { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.skill-item-row { display: flex; gap: 6px; align-items: center; }
.skill-item-row input[type="text"] { flex: 1; padding: 4px 8px; border: 1px solid #cbd5dc; border-radius: 4px; }
.skill-item-row input[type="range"] { width: 80px; }
.btn-add-item { background: transparent; border: 1px dashed #b6c0c9; padding: 4px 8px; border-radius: 4px; cursor: pointer; color: #2c3e50; font-size: 0.85em; }
.btn-add-item:hover { background: #f0f4f7; }

/* Photo upload row: native <input type="file"> + submit button.
   flex-wrap lets the button drop below when the input would otherwise
   be truncated under ~280px of container width — flex:1 on the input
   without a min-width was clipping its built-in "Choose File / No
   file chosen" label on the narrow form column. flex-basis 200px on
   the input nudges it to claim a full row first, then the button
   wraps naturally underneath. */
.photo-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.photo-upload input[type="file"] {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 0.85em;
}
.photo-upload button {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 0.85em;
}
.photo-current { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.photo-preview { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid #cbd5dc; }
.btn-photo-delete {
  background: transparent;
  border: 1px solid #c0392b;
  color: #c0392b;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.85em;
}
.btn-photo-delete:hover { background: #fde6e6; }

.hint { color: #7b8794; font-size: 0.8em; display: block; margin-top: 4px; }

details > button {
  background: transparent;
  border: 1px dashed #b6c0c9;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  color: #2c3e50;
  margin-top: 4px;
  width: 100%;
}
details > button:hover { background: #f0f4f7; }
/* Top-level textareas inside a <details> section (e.g. "Profil / Résumé")
   default to ~168px (cols=20). Force them to fill the column instead. */
details > textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #cbd5dc;
  border-radius: 4px;
  font-size: 0.95em;
  font-family: inherit;
  resize: vertical;
}
details > textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}

/* --- Dashboard: public toggle column ----------------------------------- */
.cv-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; }
.cv-row-public { display: flex; gap: 6px; align-items: center; font-size: 0.85em; }
.cv-public-link {
  color: #1666a3; text-decoration: none;
  background: #eef6fc; padding: 4px 8px; border-radius: 4px;
  border: 1px solid #c9def0;
}
.cv-public-link:hover { background: #dceefc; }

/* --- Public CV page ---------------------------------------------------- */
/* Width math: rendered CV is 210mm (~793px), sticky form 340px, gap 24px,
   padding 2*16px. So the snug max-width is 793 + 24 + 340 + 32 = 1189px.
   max-width 1200px gives just enough breathing room without leaving
   awkward whitespace between the CV's right edge and the form. Below
   1200px we stack the form under the CV so nothing crops. */
.public-cv { max-width: 1200px; margin: 0 auto; padding: 16px; }
.public-cv-banner {
  background: #fff8e1; border: 1px solid #f4d77e; color: #5b4500;
  padding: 12px 16px; border-radius: 6px; margin-bottom: 16px;
  font-size: 0.92em; line-height: 1.4;
}
.public-cv-banner strong { display: block; margin-bottom: 4px; }
.public-cv-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 1200px) { .public-cv-layout { grid-template-columns: 1fr; } }

.public-cv-paper {
  background: white; box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  border-radius: 4px; overflow: hidden;
}
/* Les templates CV embarquent `min-height: 296mm` sur .cv-container : la
   page publique garde cette vraie hauteur A4 (décision Julien 2026-06-12,
   revient sur l'ancien « hauteur du contenu » qui donnait une bande de
   quelques pixels pour un CV peu rempli — effet feuille de papier voulu,
   quitte à scroller un peu sur les CV courts). */

.public-cv-contact {
  background: #f7f9fb; border: 1px solid #d8e0e7; border-radius: 6px;
  padding: 16px; position: sticky; top: 16px;
}
.public-cv-contact h2 { margin: 0 0 12px 0; font-size: 1.15em; color: #1f2d3d; }
.contact-form { display: flex; flex-direction: column; gap: 10px; }
.contact-form label { display: flex; flex-direction: column; font-size: 0.88em; color: #4a5a6a; gap: 4px; }
.contact-form input, .contact-form textarea {
  padding: 8px 10px; border: 1px solid #c9d3dc; border-radius: 4px; font-size: 1em;
  font-family: inherit;
}
.contact-form textarea { resize: vertical; min-height: 100px; }
.contact-form .btn-primary { margin-top: 4px; }
.contact-captcha { background: #fff; padding: 8px 10px; border: 1px dashed #c9d3dc; border-radius: 4px; }
.contact-note { color: #7b8794; font-size: 0.78em; margin: 0; line-height: 1.35; }

.public-cv-flash {
  background: #fdecec; border: 1px solid #f4b6b6; color: #7a1414;
  padding: 10px 12px; border-radius: 4px; font-size: 0.9em;
}
.public-cv-success {
  background: #e6f6ea; border: 1px solid #9cd2ab; color: #155724;
  padding: 16px; border-radius: 4px; font-size: 0.95em; line-height: 1.4;
}

/* --- Puzzle captcha modal --------------------------------------------- */
.public-cv-channel-note {
  font-size: 0.85em; color: #4a5a6a; margin: 0 0 12px 0;
  background: #eef6fc; border-left: 3px solid #1666a3; padding: 8px 10px;
  border-radius: 0 4px 4px 0;
}

.puzzle-modal {
  position: fixed; inset: 0; background: rgba(20,30,40,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; padding: 16px;
}
.puzzle-modal[hidden] { display: none; }

.puzzle-card {
  background: white; border-radius: 8px; padding: 20px 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3); position: relative;
  max-width: 380px; width: 100%;
}
.puzzle-close {
  position: absolute; top: 8px; right: 12px; background: transparent;
  border: 0; font-size: 1.6em; line-height: 1; cursor: pointer; color: #7b8794;
}
.puzzle-close:hover { color: #1f2d3d; }
.puzzle-card h3 { margin: 0 0 6px; font-size: 1.05em; color: #1f2d3d; }
.puzzle-instructions { margin: 0 0 12px; font-size: 0.88em; color: #4a5a6a; }

.puzzle-board {
  position: relative; margin: 0 auto 12px;
  background:
    repeating-linear-gradient(45deg, #4a8fc7 0 20px, #5599cf 20px 40px),
    linear-gradient(135deg, #2c3e50, #3498db);
  background-blend-mode: overlay;
  border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25);
  user-select: none; -webkit-user-select: none;
}
.puzzle-slot {
  position: absolute;
  background: rgba(0,0,0,0.55);
  border: 1px dashed rgba(255,255,255,0.5);
  border-radius: 6px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
}
.puzzle-piece {
  position: absolute; left: 0;
  background:
    repeating-linear-gradient(45deg, #4a8fc7 0 20px, #5599cf 20px 40px),
    linear-gradient(135deg, #2c3e50, #3498db);
  background-blend-mode: overlay;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  pointer-events: none;
  transition: left 0s linear;
}
.puzzle-piece-ok { box-shadow: 0 0 0 3px #5cb85c, 0 2px 6px rgba(0,0,0,0.4) !important; }
.puzzle-piece-err {
  box-shadow: 0 0 0 3px #d9534f, 0 2px 6px rgba(0,0,0,0.4) !important;
  animation: puzzle-shake 0.35s ease-in-out;
}
@keyframes puzzle-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.puzzle-slider { margin-top: 10px; }
.puzzle-slider-track {
  position: relative; height: 34px;
  background: #eef2f6; border-radius: 17px;
  border: 1px solid #c9d3dc;
  overflow: hidden;
}
.puzzle-slider-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, #d1ecf1, #b6e2f7);
  transition: width 0s linear;
}
.puzzle-slider-handle {
  position: absolute; left: 0; top: 1px;
  width: 42px; height: 30px;
  background: #1f6fb5; color: white;
  border-radius: 15px; cursor: grab;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1em; font-weight: bold;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  touch-action: none;
}
.puzzle-slider-handle:active { cursor: grabbing; background: #185a96; }
.puzzle-slider-handle:focus { outline: 2px solid #5599cf; outline-offset: 2px; }
.puzzle-slider-hint { font-size: 0.78em; color: #7b8794; margin: 6px 0 0; }
.puzzle-status { font-size: 0.85em; min-height: 1.2em; margin-top: 8px; color: #4a5a6a; }

/* ============================================================
   RESPONSIVE DESIGN
   Breakpoints (mobile-first cascade):
     - default      : phone portrait (≤ 640px)
     - ≥ 641px      : large phone / small tablet portrait
     - ≥ 768px      : tablet portrait — 2-col forms come back
     - ≥ 1024px     : tablet landscape / small laptop — editor side-by-side
     - ≥ 1600px     : capped via .editor-layout max-width
   ============================================================ */

/* --- Fluid typography (scales smoothly, capped on huge displays) --- */
.hero h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.hero .lead { font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem); }
.dashboard h1 { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.dashboard h2 { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); }

/* --- Tab switcher (only shown below the editor stacking breakpoint) --- */
.editor-tabs { display: none; }

/* ============================================================
   ≤ 1279px : editor stacks (form ↔ preview as tabs)
   The 2-col side-by-side layout needs ~460px form + ~820px preview
   for the layout-panel (Main / Sidebar sub-grid) and the design-bar's
   5 fields to stay readable, plus an unscaled A4 sheet (794px) with
   breathing room. Below 1280px the form is cramé, the layout-panel
   sub-cols flip to 1, and the preview only just barely fits the scaled
   sheet — at which point the single-pane tab layout reads far better.
   The cutoff covers every landscape orientation that has issues:
   iPad mini 1024×768, iPad Air 1180×820, iPad Pro 12.9 portrait 1024,
   laptop 13" 1280×800. Above 1280 → side-by-side stays stable.
   ============================================================ */
@media (max-width: 1279px) {
  /* Drop grid here. CSS Grid's track sizing is fragile when a fixed-pixel
     descendant (the 794px A4 sheet) lives in a flexible grid item — even
     with min-width:0, some browsers still expand the track to min-content.
     A simple flex column gives us a viewport-bound parent that does NOT
     try to fit child content, which is what we want for the tabbed layout. */
  .editor-layout {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
  }
  /* The tab bar sits at the top of the editor area. */
  .editor-tabs {
    display: flex;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid #e3e8ee;
    position: sticky;
    top: 0;
    z-index: 5;
    flex: none;
  }
  .editor-form, .editor-preview {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .editor-tab {
    flex: 1;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    color: #52606d;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .editor-tab:hover { background: #f4f6f8; }
  .editor-tab[aria-selected="true"] {
    color: #2c3e50;
    border-bottom-color: #3498db;
    background: #fff;
  }
  /* Show only the active pane. Default = form open. */
  .editor-layout[data-pane="preview"] .editor-form { display: none; }
  .editor-layout[data-pane="form"] .editor-preview { display: none; }
  .editor-form, .editor-preview {
    border-right: 0;
    min-height: 0;
  }
}

/* ============================================================
   ≤ 767px : phone — denser forms, single-col grids
   ============================================================ */
@media (max-width: 767px) {
  /* Header : logo à gauche, burger à droite. Le menu (replié par défaut)
     s'ouvre en panneau pleine largeur ancré sous le header sticky quand
     nav.js pose .nav-open. Avant : la nav s'empilait sur 3 lignes. */
  .app-header { padding: 10px 14px; }
  .nav-burger {
    display: block;
    background: none;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
    font-size: 1.25em;
    line-height: 1;
    padding: 4px 10px;
    color: #2c3e50;
    cursor: pointer;
  }
  .app-header nav { display: none; }
  .app-header.nav-open nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #e3e8ee;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 22px rgba(31, 41, 51, 0.12);
    padding: 8px;
  }
  /* Burger → croix quand le menu est ouvert (affordance de fermeture). */
  .app-header.nav-open .nav-burger { font-size: 0; }
  .app-header.nav-open .nav-burger::before {
    content: "\2715";
    font-size: 1.2rem;
    line-height: 1;
    color: #2c3e50;
  }
  /* Lignes du menu : grandes cibles tactiles, arrondi, fond au survol/appui. */
  .app-header nav a,
  .app-header nav .link-button {
    margin-left: 0;
    padding: 11px 12px;
    text-align: left;
    border-radius: 8px;
  }
  .app-header nav a:hover,
  .app-header nav a:active,
  .app-header nav .link-button:hover { background: #f4f7fa; }

  .app-header nav form.inline-form { order: 2; display: block; }
  .app-header nav form.inline-form .link-button { width: 100%; }

  /* Sélecteur de langue mobile : on masque le dropdown <details> et on
     affiche une rangée de chips « drapeau + nom » (tout visible d'un coup,
     sans recouvrir le contenu comme le faisait le dropdown). */
  .lang-menu { display: none; }

  /* Menu compte sur mobile : pleine largeur, liste à plat (pas de dropdown
     flottant qui déborderait dans le menu burger). Avatar + libellé sur une
     rangée, chevron à droite. */
  .user-menu { margin-left: 0; width: 100%; order: 0; }
  .user-menu > summary { display: flex; padding: 12px 14px; gap: 10px; border-radius: 8px; }
  .user-menu > summary:hover { background: #f4f7fa; }
  .user-menu > summary .lang-caret { margin-left: auto; }
  .user-menu-name { display: inline; font-weight: 500; }
  .user-menu-list {
    position: static; min-width: 0; width: 100%;
    box-shadow: none; border: none; border-top: 1px solid #eef1f5;
    border-radius: 0; margin-top: 6px; padding: 0;
  }
  .app-header nav .user-menu-item { padding: 12px 14px; }

  .lang-row {
    display: block;
    order: 1;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid #eef1f5;
  }
  .lang-row-label {
    display: block;
    margin: 0 0 8px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9aa5b1;
  }
  .lang-row-flags { display: flex; flex-wrap: wrap; gap: 8px; }
  .lang-row .lang-row-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 13px;
    border: 1px solid #e3e8ee;
    border-radius: 999px;
    background: #fff;
    color: #2c3e50;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
  }
  .lang-row .lang-row-flag:hover { background: #f4f7fa; }
  .lang-row .lang-row-flag.is-active {
    border-color: #2c3e50;
    background: #2c3e50;
    color: #fff;
    font-weight: 600;
  }

  /* Form grid: most pairings (city/country, from/to) get too narrow under
     ~360px content width. Stack everything in one column on phones. */
  .form-grid { grid-template-columns: 1fr; }

  /* Editor form padding tighter to claw back screen real estate. */
  .form-head { padding: 12px 12px 0; }
  .form-scroll { padding: 12px; }
  .editor-preview { padding: 12px; }

  /* Title input + export button: stack so neither truncates. */
  .form-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .form-header .btn-export {
    flex: 1 1 100%;
    text-align: center;
  }

  /* Design bar: each control claims a full row so labels don't truncate
     and the color picker stays tappable. */
  .design-bar { gap: 8px; padding: 10px; }
  .design-field { flex: 1 1 calc(50% - 4px); }
  .design-field select { width: 100%; min-width: 0; }

  /* Dashboard: tighter side padding and a touch-friendly action stack. */
  .dashboard { margin: 16px auto; padding: 0 12px; }
  .cv-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 4px;
  }
  .cv-row-public { justify-content: flex-start; }
  .cv-row-actions { justify-content: flex-end; }

  /* Gallery cards: tighter so 1-col stacked cards aren't huge. */
  .template-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .quick-templates, section { padding: 0 12px; }

  /* Hero: tighter vertical padding so the page doesn't feel like a wall. */
  .hero { padding: 32px 16px 20px; }

  /* Auth card: edge-to-edge minus a small breathing margin. */
  .auth-card { margin: 16px; padding: 20px; }

  /* Public CV: the A4 paper (794px) overflows phone viewports horizontally.
     Allow horizontal scroll within the paper wrapper rather than letting
     the whole page scroll — keeps the contact form aligned to the viewport. */
  .public-cv { padding: 10px; }
  .public-cv-paper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .public-cv-contact { position: static; padding: 12px; }
}

/* ============================================================
   ≤ 420px : very small phones — last-mile tweaks
   ============================================================ */
@media (max-width: 420px) {
  .design-field { flex: 1 1 100%; }
  .hero h1 { font-size: 1.4rem; }
  .btn-primary { padding: 9px 14px; font-size: 0.95em; }
}

/* ============================================================
   Touch-pointer ergonomics (coarse pointer regardless of viewport)
   ============================================================ */
@media (pointer: coarse) {
  /* Bigger drag handle target area for touch users on reorderable lists. */
  .repeat-summary .drag-handle { padding: 4px 8px; font-size: 1em; }
  /* Tappable summary rows: stop the chevron from looking like a stray glyph. */
  .repeat-summary { padding: 10px 12px; }
}

/* ============================================================
   Theme switch modal + preset picker
   Used when the user picks a new template (modal asks what to do
   with the colours) and from the sidebar "Préréglages couleurs"
   section to apply a NamedTheme preset of the current template.
   ============================================================ */
.theme-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.theme-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.theme-modal-panel {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 24px 18px;
}
.theme-modal-panel h2 {
  margin: 0 0 4px;
  font-size: 1.25em;
  color: #1f2933;
}
.theme-modal-intro {
  margin: 0 0 16px;
  color: #52606d;
  font-size: 0.95em;
}
.theme-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 0;
  font-size: 1.6em;
  color: #7b8794;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.theme-modal-close:hover { color: #1f2933; }
.theme-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e3e8ee;
}
.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  background: #f7f9fb;
  border: 2px solid #e3e8ee;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 120ms, transform 120ms;
}
.theme-option:hover {
  border-color: #3498db;
  transform: translateY(-1px);
}
.theme-option-recommended { border-color: #3498db; background: #f0f8ff; }
.theme-option-swatches {
  display: flex;
  gap: 4px;
  height: 28px;
}
.theme-swatch {
  flex: 1;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.08);
}
.theme-option-label {
  font-weight: 600;
  font-size: 0.92em;
  color: #1f2933;
}
.theme-option-sub {
  font-size: 0.75em;
  color: #7b8794;
  font-family: 'Consolas', 'Menlo', monospace;
}

/* Permanent preset picker in the sidebar — the same swatches but laid
   out denser and side-by-side. */
.theme-presets-intro {
  margin: 0 0 8px;
  font-size: 0.85em;
  color: #52606d;
}
.theme-presets-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
}
.theme-preset {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: #f7f9fb;
  border: 1px solid #e3e8ee;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 120ms;
}
.theme-preset:hover { border-color: #3498db; }
.theme-preset-swatches {
  display: flex;
  gap: 3px;
  height: 18px;
}
.theme-preset-name {
  font-size: 0.78em;
  color: #1f2933;
  font-weight: 500;
}
.btn-secondary {
  background: transparent;
  border: 1px solid #cbd5dc;
  color: #52606d;
  padding: 6px 14px;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
}
.btn-secondary:hover { background: #f0f4f7; }

/* ============================================================
   GDPR cookie banner + preferences panel
   Banner sits fixed at the bottom, hidden as soon as the user
   acks the notice (localStorage flag in cookies.js).
   ============================================================ */
/* The HTML `hidden` attribute must win over our display:flex below — it
   only takes a more-specific rule to do so. Same trick for .cookie-prefs. */
.cookie-banner[hidden],
.cookie-prefs[hidden] { display: none !important; }

.cookie-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  background: #fff;
  border: 1px solid #cbd5dc;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(15,23,42,0.15);
  padding: 14px 18px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  min-width: 260px;
  font-size: 0.9em;
  color: #1f2933;
  line-height: 1.45;
}
.cookie-banner-text strong { display: block; margin-bottom: 2px; }
.cookie-banner-text code {
  background: #f0f4f7;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
}
.cookie-banner-text a {
  color: #1a3d6d;
  text-decoration: underline;
  margin-left: 4px;
}
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-prefs {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cookie-prefs-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.55);
  cursor: pointer;
}
.cookie-prefs-panel {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 26px 18px;
}
.cookie-prefs-panel h2 {
  margin: 0 0 8px;
  font-size: 1.25em;
  color: #1f2933;
}
.cookie-prefs-panel > p {
  margin: 0 0 16px;
  color: #52606d;
  font-size: 0.95em;
}
.cookie-prefs-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 0;
  font-size: 1.6em;
  color: #7b8794;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.cookie-prefs-close:hover { color: #1f2933; }

.cookie-cat {
  padding: 12px 0;
  border-top: 1px solid #e3e8ee;
}
.cookie-cat:first-of-type { border-top: 0; padding-top: 0; }
.cookie-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.cookie-cat-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.cookie-cat-row input[disabled] { cursor: not-allowed; }
.cookie-cat-name {
  font-weight: 600;
  color: #1f2933;
}
.cookie-cat-name em { font-weight: 400; color: #7b8794; font-size: 0.85em; }
.cookie-cat-desc {
  margin: 6px 0 0 28px;
  font-size: 0.86em;
  color: #52606d;
  line-height: 1.4;
}
.cookie-cat-desc em { font-style: italic; color: #94a3b8; }

.cookie-prefs-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e3e8ee;
}

/* Legal pages (Privacy policy) -------------------------------- */
.legal-page {
  max-width: 760px;
  margin: 20px auto;
  padding: 0 20px 40px;
  line-height: 1.55;
  color: #1f2933;
}
.legal-page h1 {
  font-size: 1.7em;
  margin-bottom: 4px;
  color: #1a3d6d;
}
.legal-page h2 {
  font-size: 1.15em;
  margin-top: 26px;
  margin-bottom: 8px;
  color: #1a3d6d;
}
.legal-date {
  color: #7b8794;
  font-size: 0.88em;
  margin-bottom: 18px;
}
.legal-page ul { padding-left: 22px; }
.legal-page ul li { margin-bottom: 6px; }
.legal-page code {
  background: #f0f4f7;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}
.legal-page a { color: #1a3d6d; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  margin: 8px 0 12px;
}
.legal-table th, .legal-table td {
  border: 1px solid #e3e8ee;
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.legal-table thead th { background: #f7f9fb; }
.legal-back { margin-top: 30px; }

/* Footer extras for legal/cookie links ----------------------- */
.app-footer .footer-sep { margin: 0 4px; color: #cbd5dc; }
.app-footer a { color: #52606d; text-decoration: none; }
.app-footer a:hover { color: #1a3d6d; text-decoration: underline; }
.app-footer .link-button {
  background: transparent; border: 0;
  color: #52606d; cursor: pointer; padding: 0;
  font: inherit; text-decoration: none;
}
.app-footer .link-button:hover { color: #1a3d6d; text-decoration: underline; }

/* ===== Admin pages ===================================================== */
.admin-page { max-width: 800px; margin: 2rem auto; padding: 0 1rem; width: 100%; min-width: 0; box-sizing: border-box; }
.admin-page h1 { margin-bottom: 1.5rem; }
.admin-back { display: inline-block; margin-bottom: 1rem; color: #52606d; text-decoration: none; }
.admin-back:hover { text-decoration: underline; }
.admin-card {
  background: #fff; border: 1px solid #e0e6ec; border-radius: 8px;
  padding: 1.5rem; margin-bottom: 1.5rem;
  /* Contain wide tables (model matrix, usage stats) so they scroll inside the
     card on a narrow screen instead of pushing the whole admin page wide. */
  overflow-x: auto;
}
.admin-card h2 { margin-top: 0; font-size: 1.2rem; }
.admin-state { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 6px; background: #eef5ff; }
.admin-state-on { background: #fff3d6; color: #7a4a00; }
.admin-inline-form { display: flex; gap: 0.5rem; align-items: center; }
.admin-inline-form input[type="email"] { flex: 1; padding: 0.5rem; border: 1px solid #cdd5dc; border-radius: 4px; }
/* On a narrow screen the 4-column user table would push the whole admin page
   wide; let it scroll horizontally inside its own container instead. */
.admin-table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.admin-table th, .admin-table td { padding: 0.6rem 0.5rem; text-align: left; border-bottom: 1px solid #e0e6ec; }
.admin-table th { background: #f6f8fa; font-weight: 600; }
/* Admin user list: search box + sortable column headers. */
.admin-users-search {
  width: 100%; box-sizing: border-box; padding: 9px 12px; margin-bottom: 14px;
  border: 1px solid #cbd5dc; border-radius: 8px; font-family: inherit; font-size: 0.95em;
}
.admin-users-search:focus { outline: none; border-color: #1f4d8b; box-shadow: 0 0 0 3px rgba(31, 77, 139, 0.14); }
.admin-users-count { color: #52606d; font-size: 0.9em; margin: 0 0 8px; }
.admin-sort { color: #1f2d3d; text-decoration: none; white-space: nowrap; }
.admin-sort:hover { color: #1f4d8b; text-decoration: underline; }
.admin-plan-premium { color: #1f4d8b; font-weight: 600; }
.admin-users-headline { font-size: 1.05em; color: #1f2d3d; margin: 0 0 6px; }
.admin-users-headline strong { font-size: 1.7em; color: #1f4d8b; }
.admin-role { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.85rem; }
.admin-role-super { background: #ffe1cc; color: #8a3a00; }
.admin-role-admin { background: #d6edff; color: #003e7a; }
.admin-locked { color: #8a8a8a; font-style: italic; }
.admin-flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.admin-flash-promoted, .admin-flash-demoted { background: #ddf4dd; color: #1a5a1a; }
.admin-flash-missing_email, .admin-flash-unknown_user, .admin-flash-already_super,
.admin-flash-cant_demote_super, .admin-flash-promote_failed, .admin-flash-demote_failed,
.admin-flash-save_failed {
  background: #ffe1e1; color: #8a1a1a;
}
.admin-flash-saved { background: #ddf4dd; color: #1a5a1a; }

/* ===== /admin/ai — quota form + stats =================================== */
.admin-help { color: #52606d; font-size: 0.9rem; margin-top: -0.25rem; }
.admin-quota-form { display: flex; flex-direction: column; gap: 0.75rem; }
.admin-quota-toggle { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
/* Sous-options d'un module (ex. les 4 communications) dans /admin/modules. */
.admin-module-options-row td { background: #fafbfc; padding-top: 6px; padding-bottom: 10px; }
.admin-module-options { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; }
.admin-module-options .admin-quota-toggle { font-weight: 500; }
.admin-quota-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem 1rem;
}
.admin-quota-grid label { display: flex; flex-direction: column; font-size: 0.9rem; gap: 0.25rem; }
.admin-quota-grid input {
  padding: 0.4rem 0.5rem; border: 1px solid #cdd5dc; border-radius: 4px;
}
.admin-stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.admin-stat {
  flex: 1; min-width: 120px; padding: 1rem; background: #f6f8fa;
  border-radius: 6px; text-align: center;
}
.admin-stat-num { font-size: 1.8rem; font-weight: 700; color: #1a3d6d; }
.admin-stat-label { font-size: 0.85rem; color: #52606d; margin-top: 0.25rem; }

/* Live indicator: the /admin/ai stats region polls itself (HTMX) — this dot
   pulses to signal the figures refresh on their own. Decorative (aria-hidden). */
.admin-live {
  display: inline-block; width: 0.55rem; height: 0.55rem;
  border-radius: 50%; background: #16a34a; vertical-align: middle;
  margin-left: 0.4rem; animation: admin-live-pulse 1.6s ease-in-out infinite;
}
@keyframes admin-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .admin-live { animation: none; } }

/* Model-routing matrix (action × plan → LLM). */
.admin-models-table select { width: 100%; max-width: 22rem; padding: 0.3rem; }
.admin-models-form > .btn-primary { margin-top: 0.85rem; }
/* "Rule them all" master row: governs every action of its column. */
.admin-models-master td { border-bottom: 2px solid #cbd5e1; padding-bottom: 0.6rem; }
.admin-models-master select { font-weight: 600; }

/* ===== Maintenance 503 page ============================================ */
.maintenance-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; margin: 0; background: #f6f8fa;
  font-family: 'Segoe UI', Inter, system-ui, sans-serif;
}
.maintenance-card {
  background: #fff; padding: 3rem 2rem; border-radius: 12px;
  max-width: 460px; text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.maintenance-card h1 { margin: 0 0 1rem; color: #1a3d6d; }
.maintenance-hint { color: #52606d; font-size: 0.9rem; margin-top: 1.5rem; }

/* "Annuler / supprimer ce CV" button in the editor header — danger
   style, but discreet to discourage accidental clicks (the hx-confirm
   modal is the real safety net). */
.btn-cv-discard {
  background: transparent; border: 1px solid #d97a7a; color: #a73030;
  padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer;
  font: inherit; transition: background 0.15s;
}
.btn-cv-discard:hover { background: #fde8e8; }
.btn-cv-discard:focus-visible { outline: 2px solid #d97a7a; outline-offset: 2px; }

/* "Vos CV" list on the home: align the danger delete button to the
   right edge of each row so it's visible but never overlaps the title. */
.home-cv-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.25rem 0;
}
.home-cv-link { flex: 1; text-decoration: none; color: inherit; }
.home-cv-link:hover strong { text-decoration: underline; }

/* Round red close-cross used to delete a CV row (home + dashboard). */
.btn-cv-x {
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  border: 1px solid transparent; background: transparent;
  color: #c0392b; font-size: 1.3rem; line-height: 1;
  font-weight: 600; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-cv-x:hover { background: #fde8e8; border-color: #d97a7a; color: #a73030; }
.btn-cv-x:focus-visible { outline: 2px solid #d97a7a; outline-offset: 2px; }

/* Inline cross used as a glyph next to the "Supprimer ce CV" label in the
   editor. Same red, but inline so it sits next to text without a circle. */
.btn-x-icon { color: #c0392b; font-weight: 700; margin-right: 0.15rem; }

/* ===== /compte page ==================================================== */
.account-page { max-width: 720px; margin: 2rem auto; padding: 0 1rem; }
.account-page h1 { margin-bottom: 1.5rem; }
.account-card {
  background: #fff; border: 1px solid #e0e6ec; border-radius: 8px;
  padding: 1.5rem; margin-bottom: 1.5rem;
}
.account-card h2 { margin-top: 0; font-size: 1.1rem; }
.account-card-danger { border-color: #f3c0c0; background: #fff8f8; }
.account-card-danger h2 { color: #a73030; }
.account-info { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 0; }
.account-info dt { font-weight: 600; color: #52606d; }
.account-info dd { margin: 0; }
.account-flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.account-flash-error { background: #ffe1e1; color: #8a1a1a; }
.account-flash-ok { background: #def7e6; color: #1a6b3a; }
.account-locked { color: #8a8a8a; font-style: italic; }
.account-unset { color: #99a3ad; font-style: italic; }
.account-card > .btn-secondary { margin-top: 1rem; display: inline-block; }
.account-hint { color: #6b7884; font-size: 0.88em; margin: 0.75rem 0 0; }
.account-inline-form { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.account-field { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 240px; min-width: 0; font-size: 0.9em; color: #52606d; }
.account-field input { padding: 0.5rem 0.6rem; border: 1px solid #cfd8e0; border-radius: 6px; font-size: 1rem; }
.account-inline-form .btn-secondary { flex: 0 0 auto; }

/* Account profile / welcome form (migration 0010). Reuses .auth-form's
   vertical label stacking; this just spaces the action row. */
.profile-form-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }

/* ===== Home flash after account-deleted ================================ */
.home-flash {
  background: #fff3d6; color: #7a4a00; padding: 1rem 1.5rem;
  border-radius: 6px; margin: 1rem auto 2rem;
  max-width: 800px; text-align: center;
}

/* ===== Utility classes that replaced inline style="..." (CSP A3) =====
   These cover legitimate inline attributes that used to live in the
   templates and would have stayed blocked once 'unsafe-inline' was lifted
   from style-src. Each class is a single declaration so the grep is
   obvious; expand only if a new case truly needs an inline value. */
.inline-form { display: inline; }
.form-photo-label {
  font-size: 0.85em; color: #52606d; margin-bottom: 4px;
}

/* HTMX indicator rules (normally injected by htmx into a <style> block
   without a nonce — blocked by our strict CSP). The meta htmx-config
   in base.gohtml disables that injection and we re-ship them here. */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }

/* ===== AI editor actions (Sprint 1 CVMove parity) ===================
   The "✨ Reformuler / Corriger / Traduire" bar below each text field
   plus the suggestion cards that drop in from the host slot. Goal:
   visible without being noisy — a thin row of compact pill buttons,
   the suggestion card sits inline with the form (no overlay) so the
   user can read source + suggestion side-by-side. */
.ai-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 4px;
  align-items: center;
}
.ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef4fb;
  color: #1f4d8b;
  border: 1px solid #cfdbeb;
  font-size: 0.82em;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.ai-btn:hover { background: #d8e7f7; border-color: #a8c0e0; }
/* « Reformuler ▾ » : un seul bouton qui déroule les modes (details, zéro JS). */
/* Reset des styles globaux details{…} (encadré gris / padding / margin des
   blocs pliables de l'éditeur) — sinon le bouton-menu hérite d'un rectangle et
   se décentre verticalement par rapport aux autres boutons de la barre. */
.ai-rephrase-menu, .ai-rephrase-menu[open] {
  position: relative; margin: 0; padding: 0; border: 0; background: transparent;
}
.ai-rephrase-menu > summary { list-style: none; cursor: pointer; }
.ai-rephrase-menu > summary::-webkit-details-marker { display: none; }
.ai-rephrase-menu > summary::marker { content: ""; }
/* Overlay (position absolue) : le menu se superpose au contenu en dessous sans
   le décaler. .form-scroll défile (overflow-y:auto) → rien n'est coupé en
   vertical ; left:0 + min-width tiennent dans la largeur du formulaire. */
.ai-rephrase-options {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0;
  display: flex; flex-direction: column; gap: 3px; padding: 5px;
  background: #fff; border: 1px solid #cfdbeb; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20, 30, 45, 0.14); width: max-content; min-width: 170px;
}
.ai-mode-btn { justify-content: flex-start; width: 100%; }
.ai-btn:disabled,
.ai-btn.ai-loading {
  opacity: 0.55;
  cursor: progress;
}
.ai-btn-suggest-skills { margin-top: 4px; }
.ai-btn-icon { font-size: 0.95em; line-height: 1; }
.ai-btn-translate-wrap {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  background: #eef4fb;
  border: 1px solid #cfdbeb;
  font-size: 0.82em;
}
.ai-btn-translate {
  border: 0; background: transparent; padding: 4px 4px 4px 0;
  font: inherit; color: inherit; cursor: pointer;
  appearance: auto;
}
/* Inside .form-grid (experiences / education / custom blocks) the pill is a
   <label>, so it inherits the grid field styling — `.form-grid label` makes it
   flex-column and `.form-grid select` makes the dropdown a full-width bordered
   box — which stacks the 🌍 globe on top of a boxed select. Re-assert the inline
   pill: horizontal, with a transparent auto-width select. */
.form-grid label.ai-btn-translate-wrap { flex-direction: row; align-items: center; }
.form-grid select.ai-btn-translate {
  width: auto; margin-top: 0; border: 0; border-radius: 0;
  padding: 4px 4px 4px 0; background: transparent;
}
.ai-host:empty { display: none; }
.ai-host { margin-top: 8px; }
/* Historique des versions (panneau éditeur). */
.cv-history-empty { margin: 6px 0 0; }
.cv-version-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cv-version { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border: 1px solid #e0e6ec; border-radius: 6px; background: #fafcff; }
.cv-version-date { font-size: 0.85em; color: #52606d; }
.cv-version-restore { padding: 3px 10px; font-size: 0.82em; white-space: nowrap; }
.ai-suggestion {
  border: 1px solid #b8d0e8;
  background: #f4f9fe;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 2px;
}
.ai-suggestion-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #1f4d8b;
}
.ai-suggestion-title { flex: 1; font-size: 0.88em; letter-spacing: 0.02em; }
.ai-suggestion-dismiss {
  background: transparent; border: 0; cursor: pointer;
  color: #6c7f95; font-size: 1.2em; line-height: 1; padding: 2px 6px;
}
.ai-suggestion-dismiss:hover { color: #1f2d3d; }
.ai-suggestion-body {
  background: #fff;
  border: 1px solid #d6e4f3;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.95em;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Suggestion éditable : le corps est un <textarea> (police héritée, pas le
   monospace par défaut) que l'utilisateur peut retoucher avant « Remplacer ». */
.ai-suggestion-edit {
  width: 100%; box-sizing: border-box; display: block;
  resize: vertical; min-height: 84px; font-family: inherit; color: #1f2d3d;
}
.ai-suggestion-hint { margin: 6px 0 0; font-size: 0.8em; color: #6c7f95; }
.ai-suggestion-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.ai-suggestion-accept { display: block; margin: 0; }
.ai-suggestion-accept-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.9em;
}
.ai-error {
  border-left: 3px solid #d9534f;
  background: #fff3f3;
  color: #8a1a1a;
  padding: 8px 12px;
  font-size: 0.9em;
  border-radius: 4px;
}
/* Upsell « compte requis » renvoyé aux anonymes par le gate IA (401) :
   informatif, pas une erreur — bleu doux + lien de conversion. */
.ai-upsell {
  border-left: 3px solid #3498db;
  background: #eef6fc;
  color: #1f4d8b;
  padding: 8px 12px;
  font-size: 0.9em;
  border-radius: 4px;
}
.ai-upsell a { color: #1f4d8b; font-weight: 600; text-decoration: underline; }
/* Import CV : bandeau de relecture sur l'éditeur (succès, à lire), zone
   « coller le texte » repliable, et CTA d'import sur la galerie/l'accueil. */
.editor-flash {
  margin: 0 0 12px;
  border-left: 3px solid #2e8b57;
  background: #eefaf1;
  color: #1c5e3a;
  padding: 10px 14px;
  font-size: 0.92em;
  border-radius: 4px;
}
.import-paste { margin: 4px 0 12px; }
.import-paste > summary { cursor: pointer; color: #1f4d8b; font-size: 0.92em; }
/* "Import from LinkedIn?" tip — collapsible steps on the import page. */
.import-linkedin { margin: 4px 0 12px; }
.import-linkedin > summary { cursor: pointer; color: #1f4d8b; font-size: 0.92em; }
.import-linkedin-body { margin-top: 6px; font-size: 0.92em; color: #52606d; }
.import-linkedin-body ol { margin: 6px 0 0; padding-left: 1.3em; }
.import-linkedin-body li { margin: 3px 0; }
.gallery-import-cta { margin: -4px 0 18px; color: #555; font-size: 0.95em; }
.gallery-import-cta a { color: #1f4d8b; font-weight: 600; text-decoration: underline; }
.hero-import { margin-left: 12px; }
.ai-skills-suggestion .ai-skills-category {
  font-weight: 600;
  color: #1f4d8b;
  margin-bottom: 6px;
}
.ai-skills-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ai-skills-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed #e0e8f2;
}
.ai-skills-list li:last-child { border-bottom: 0; }
.ai-skills-name { flex: 1; }
.ai-skills-level { color: #4a5a6a; letter-spacing: 2px; }

/* ── Sprint 2: country + profession ("Profil du CV" panel) ─────────── */
.profile-panel { display: flex; flex-direction: column; gap: 8px; }
.profile-panel .design-field { display: flex; flex-direction: column; }
.profile-note {
  margin: 0;
  font-size: 0.82em;
  line-height: 1.4;
  color: #52606d;
  background: #f4f7fb;
  border-left: 3px solid #b8d0e8;
  border-radius: 4px;
  padding: 6px 10px;
}
.profile-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.profile-actions > * { flex: 1 1 auto; }
.ai-btn-adapt { white-space: nowrap; }

/* Non-blocking field guidance badges (recommended / discouraged per
   target country). Never hides the field — just nudges. */
.field-badge {
  display: inline-block;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 4px;
}
.field-badge-recommended { background: #e3f5ea; color: #1f7a44; border: 1px solid #b6e2c8; }
.field-badge-discouraged { background: #fdecec; color: #9a2b2b; border: 1px solid #f3c6c6; }
.field-hint {
  display: block;
  margin-top: 3px;
  font-size: 0.78em;
  line-height: 1.35;
  color: #6c7f95;
}

/* Gallery create form: shared Pays cible + Domaine selects above the grid. */
.gallery-options {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.gallery-options .design-field { min-width: 200px; flex: 0 1 240px; }
.gallery-options-hint { flex: 1 1 220px; margin: 0; font-size: 0.82em; color: #6c7f95; }

/* AI country adaptation advice card (reuses .ai-suggestion shell). */
.ai-country-summary { margin: 0 0 8px; font-weight: 600; color: #1f4d8b; }
.ai-country-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.ai-country-list li { line-height: 1.4; }

/* ── Sprint 3: job posting workflow ("Mes candidatures") ──────────── */
.app-narrow { max-width: 820px; margin: 28px auto; padding: 0 20px; }
.back-link { margin: 0 0 12px; font-size: 0.9em; }
.muted { color: #6c7f95; }
.small { font-size: 0.82em; }
.btn-tailor {
  display: inline-block; padding: 7px 14px; border-radius: 6px;
  background: #1f7a44; color: #fff; text-decoration: none; font-size: 0.9em;
  white-space: nowrap;
}
.btn-tailor:hover { background: #186236; }

/* Paste-offer form */
.application-form textarea {
  width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 10px; border: 1px solid #cbd5dc; border-radius: 6px;
  font-family: inherit; font-size: 0.95em; line-height: 1.4; resize: vertical;
}
.application-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* Detail page */
.application-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.application-detail h2 { font-size: 1.05em; margin: 0 0 10px; color: #2c3e50; }
.ats-card, .rec-card, .cv-links-card, .artefact-card {
  background: #fff; border: 1px solid #e3e8ee; border-radius: 8px;
  padding: 16px; margin: 16px 0;
}
.ats-card { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ats-score {
  flex: 0 0 auto; min-width: 120px; text-align: center;
  border-radius: 8px; padding: 14px 18px; color: #fff;
}
.ats-score-high { background: #1f7a44; }
.ats-score-mid  { background: #c98a16; }
.ats-score-low  { background: #b3402f; }
.ats-score-num { font-size: 2.4em; font-weight: 700; line-height: 1; }
.ats-score-max { font-size: 1em; opacity: 0.85; }
.ats-score-label { display: block; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.ats-keywords { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; }
.kw-title { font-weight: 600; font-size: 0.85em; color: #52606d; display: block; margin-bottom: 6px; }
.kw-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kw { font-size: 0.8em; padding: 2px 9px; border-radius: 12px; }
.kw-match { background: #e3f5ea; color: #1f7a44; border: 1px solid #b6e2c8; }
.kw-missing { background: #fdecec; color: #9a2b2b; border: 1px solid #f3c6c6; }
.rec-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
/* « Analyser mon CV » : bouton + check-list. Réutilise .ats-card/.ats-score. */
.cv-analysis-launch { margin: 0 0 14px; }
.cv-analysis-host:empty { display: none; }
.cv-analysis-card { margin-top: 12px; }
.cv-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cv-check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.88em; line-height: 1.4; }
.cv-check-ok { color: #1f7a44; }
.cv-check-ko { color: #b3402f; }
.cv-check-icon { font-weight: 700; flex: 0 0 auto; }
.cv-links-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
/* Suite de communications : rangée de boutons + message généré. */
.app-msg-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.app-message-result { margin-top: 10px; }
.app-message-text {
  white-space: pre-wrap; word-break: break-word; line-height: 1.5;
  background: #f8fafc; border: 1px solid #e3e8ee; border-radius: 6px;
  padding: 12px; margin: 0;
}
.cover-letter-text, .job-posting-text {
  white-space: pre-wrap; word-break: break-word; line-height: 1.5;
  background: #f8fafc; border: 1px solid #e3e8ee; border-radius: 6px;
  padding: 12px; margin-bottom: 10px;
}
.cover-letter-notice, .ai-review-notice {
  margin: 0 0 10px; padding: 8px 12px; font-size: 0.85rem; line-height: 1.4;
  color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px;
}
.cover-letter-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cover-letter-textarea {
  width: 100%; box-sizing: border-box; margin-bottom: 10px;
  padding: 12px; border: 1px solid #cbd5dc; border-radius: 6px;
  font-family: inherit; font-size: 0.95em; line-height: 1.5; resize: vertical;
}
.interview-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.iv-q { font-weight: 600; color: #1f4d8b; margin: 0 0 3px; }
.iv-a { margin: 0; line-height: 1.45; color: #2c3e50; }
.job-posting-details { margin: 16px 0; }
.job-posting-details summary { cursor: pointer; color: #52606d; font-size: 0.9em; }

/* Applications list */
.application-cards { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.application-card a {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: #fff; border: 1px solid #e3e8ee; border-radius: 8px; padding: 12px 14px;
  color: inherit;
}
.application-card a:hover { border-color: #b8d0e8; background: #f7fbff; }
.app-score-badge {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
}
.app-score-badge.app-score-high { background: #1f7a44; }
.app-score-badge.app-score-mid  { background: #c98a16; }
.app-score-badge.app-score-low  { background: #b3402f; }
.app-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-card-title { font-weight: 600; color: #1f2d3d; }
/* When a title is shown, the raw offer excerpt becomes a muted second line. */
.app-card-title + .app-card-excerpt { font-size: 0.85em; color: #6c7f95; }
.app-card-excerpt { color: #2c3e50; }
.app-card-meta { font-size: 0.8em; color: #6c7f95; }

/* Optional company + job-title inputs on the "adapt to an offer" form. */
.application-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.application-form-row label { flex: 1 1 220px; min-width: 0; }
/* L'input passe SOUS le libellé (sa propre ligne, pleine largeur) au lieu de
   flotter en ligne avec le texte — sinon un libellé long (« Intitulé du poste »)
   poussait son champ à la ligne suivante et désalignait les deux colonnes. */
.application-form-row input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 8px 10px; border: 1px solid #cbd5dc; border-radius: 6px;
  font-family: inherit; font-size: 0.95em;
}

/* Two-step delete confirmation (keep vs. also delete the adapted CV). */
.delete-confirm {
  border: 1px solid #f0d4d4; background: #fff7f7; border-radius: 8px;
  padding: 12px 14px; max-width: 520px;
}
.delete-confirm-q { font-weight: 600; margin: 0 0 4px; color: #1f2d3d; }
.delete-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.btn-link {
  background: none; border: none; padding: 6px 4px; color: #5a6b7f;
  cursor: pointer; text-decoration: underline; font: inherit;
}
.btn-link:hover { color: #2c3e50; }

/* ---- Plan / premium (B2C premium) ---- */
.plan-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.8em; font-weight: 600; vertical-align: middle;
}
.plan-badge-premium { background: #fdf0d5; color: #8a6d1b; border: 1px solid #e8c97a; }
.plan-badge-free { background: #eef2f5; color: #5a6b78; border: 1px solid #d4dde4; }
.plan-until { color: #6b7a86; font-size: 0.85em; margin-left: 6px; }
.plan-upsell { color: #5a6b78; font-size: 0.9em; margin-top: 10px; }
.plan-limit-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.premium-buy { display: flex; flex-direction: column; gap: 10px; }
.premium-buy form { margin: 0; }
.premium-buy .btn-primary { width: 100%; }
.premium-buy .btn-year { background: #2c3e50; }
.admin-grant-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.admin-grant-form input[type="email"] { flex: 1 1 220px; min-width: 0; padding: 8px; border: 1px solid #cbd5dc; border-radius: 6px; }
.admin-grant-form input[type="number"] { flex: 0 0 200px; padding: 8px; border: 1px solid #cbd5dc; border-radius: 6px; }

/* ---- Premium offer page ---- */
.premium-page { max-width: 880px; margin: 0 auto; padding: 8px 0 40px; }
.premium-page h1 { margin-bottom: 6px; }
.premium-lede { color: #5a6b78; margin: 0 0 24px; font-size: 1.05em; }
.premium-flash { background: #eef2f5; border: 1px solid #d4dde4; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; }
.premium-flash-ok { background: #e8f6ee; border-color: #b6e2c6; color: #1f6b3a; }
.premium-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .premium-compare { grid-template-columns: 1fr; } }
.premium-col { background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 24px; }
.premium-col h2 { margin: 0 0 16px; font-size: 1.3em; color: #2c3e50; }
.premium-col-muted { background: #f7f9fb; border-color: #e9eef3; }
.premium-col-muted h2 { color: #6b7884; }
.premium-col-sub { margin: -10px 0 12px; font-size: 0.85em; color: #8a96a1; }
.premium-feat-no { color: #8a96a1; }
.premium-feat-no::before { content: "✕" !important; color: #c0392b !important; }
.premium-col-featured { border: 2px solid #e8c97a; box-shadow: 0 6px 24px rgba(138,109,27,0.10); position: relative; }
.premium-ribbon { position: absolute; top: 16px; right: -6px; background: #e8c97a; color: #6b510f; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 4px 0 0 4px; }
/* On a narrow screen the -6px hang pushes past the viewport (4px h-scroll); pin
   it flush to the card edge instead. */
@media (max-width: 480px) { .premium-ribbon { right: 0; } }
/* Marqueur du tier courant du visiteur : pill bleue au-dessus du titre de la
   colonne (le ruban doré du featured joue ce rôle pour un membre premium). */
.premium-current-badge {
  display: inline-block;
  background: #e3f0fb; color: #1f4d8b;
  font-size: 0.72em; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 10px;
  margin-bottom: 10px;
}
.premium-col-current { border-color: #9fc3e8; }
.premium-feats { list-style: none; padding: 0; margin: 0 0 20px; }
.premium-feats li { padding: 8px 0 8px 26px; position: relative; border-bottom: 1px solid #f0f3f6; color: #3a4a56; }
.premium-feats li:last-child { border-bottom: none; }
.premium-feats li::before { content: "✓"; position: absolute; left: 0; color: #2e9e5b; font-weight: 700; }
.premium-note { color: #5a6b78; font-size: 0.95em; margin: 8px 0 0; }
.premium-fineprint { color: #8a96a0; font-size: 0.82em; margin: 10px 0 0; }
.premium-shared-note { color: #6b7a86; font-size: 0.88em; margin-top: 24px; text-align: center; }

/* ============================================================
   Pages Conseils (Sprint 4) — hub + pages pays, contenu Markdown
   rendu + tableau de politique des champs généré depuis le registre.
   ============================================================ */
.conseils { max-width: 820px; margin: 32px auto; padding: 0 16px; }
/* Barre de drapeaux : sélecteur de marché. Liens (HTMX swap + push-url). */
.conseils-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.conseils-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #d8e0e7;
  border-radius: 999px;
  background: #fff;
  color: #2c3e50;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92em;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.conseils-flag:hover { background: #f4f6f8; border-color: #b7c2cd; }
.conseils-flag.is-active {
  border-color: #3498db;
  background: #eaf4fc;
  color: #1f4d8b;
}
.conseils-flag .flag {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  flex: none;
}
.conseils-article h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); color: #1f2933; margin: 0 0 16px; }
.conseils-article h2 { font-size: 1.3em; color: #1f4d8b; margin: 28px 0 10px; }
.conseils-article p { line-height: 1.65; color: #3a4a56; margin: 0 0 14px; }
.conseils-article ul, .conseils-article ol { line-height: 1.65; color: #3a4a56; padding-left: 22px; margin: 0 0 14px; }
.conseils-article li { margin-bottom: 6px; }
.conseils-article a { color: #2c6fb5; }
/* Tableau factuel des champs personnels par pays. */
.conseils-fields {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 6px;
  font-size: 0.95em;
}
.conseils-fields th, .conseils-fields td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #e8edf2;
  vertical-align: top;
}
.conseils-fields thead th {
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #7b8794;
  border-bottom: 2px solid #e3e8ee;
}
.conseils-fields tbody th { font-weight: 600; color: #2c3e50; white-space: nowrap; }
.conseils-fields td:last-child { color: #52606d; }
.conseils-neutral { color: #7b8794; font-style: italic; font-size: 0.9em; }
.conseils-fields-note { font-size: 0.88em; color: #7b8794; font-style: italic; }
.conseils-cta { margin-top: 28px; }

@media (max-width: 600px) {
  /* Le tableau passe en blocs empilés pour rester lisible sur mobile. */
  .conseils-fields, .conseils-fields tbody, .conseils-fields tr, .conseils-fields th, .conseils-fields td { display: block; width: 100%; }
  .conseils-fields thead { display: none; }
  .conseils-fields tr { border: 1px solid #e8edf2; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
  .conseils-fields th, .conseils-fields td { border-bottom: none; padding: 4px 0; white-space: normal; }
}

/* === Analyse de certificat de travail (module work_certificate) ============ */
/* Import optionnel d'un PDF/Word au-dessus de la zone de collage. */
.wc-upload {
  border: 1px dashed #c3ced9;
  background: #fbfdff;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 14px;
}
.wc-upload-label { display: block; font-weight: 600; margin-bottom: 6px; color: #1f2d3d; }
.wc-upload input[type="file"] { font-size: 0.9em; }
.wc-upload-status { margin-top: 6px; font-size: 0.85em; color: #6c7f95; min-height: 1.1em; }
.wc-upload-status.wc-upload-error { color: #8a1a1a; }
.wc-result {
  border: 1px solid #d6e4f3;
  background: #f8fbff;
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 18px;
}
.wc-result-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wc-level {
  font-weight: 700; font-size: 1.05em; color: #1f4d8b;
  background: #e7f0fb; border-radius: 999px; padding: 3px 12px;
}
.wc-confidence { font-size: 0.85em; color: #6c7f95; }
.wc-impression { margin: 10px 0 4px; line-height: 1.5; }
.wc-section-title { font-size: 0.95em; margin: 18px 0 8px; color: #1f2d3d; }
.wc-findings { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.wc-finding {
  border-left: 3px solid #c3ced9;
  background: #fff;
  border-radius: 6px;
  padding: 8px 12px;
}
/* Couleur du liseré selon la sévérité du signal détecté. */
.wc-sev-positive { border-left-color: #2e8b57; }
.wc-sev-neutral  { border-left-color: #8a97a5; }
.wc-sev-caution  { border-left-color: #d9a334; }
.wc-sev-negative { border-left-color: #d9534f; }
.wc-quote {
  margin: 0 0 4px; font-style: italic; color: #34465a;
  border: 0; padding: 0;
}
.wc-meaning { margin: 0; line-height: 1.45; }
.wc-finding-conf { display: inline-block; margin-top: 4px; font-size: 0.78em; color: #6c7f95; }
.wc-missing, .wc-suggestions { margin: 0; padding-left: 20px; line-height: 1.5; }
/* Note pédagogique « ce que dit la loi » : informatif, ton neutre. */
.wc-legal {
  margin-top: 22px;
  border-left: 3px solid #3498db;
  background: #eef6fc;
  border-radius: 6px;
  padding: 10px 14px;
}
.wc-legal h2 { font-size: 0.95em; margin: 0 0 6px; color: #1f4d8b; }
.wc-legal p { margin: 0; font-size: 0.9em; line-height: 1.5; color: #2a3b4d; }

/* Ajouter la période du certificat en case d'expérience du CV. */
.wc-addcv {
  margin-top: 22px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  padding: 14px 16px;
  background: #fafcff;
}
.wc-addcv h2 { font-size: 1em; margin: 0 0 4px; color: #1f2d3d; }
.wc-addcv-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 10px; }
.wc-addcv-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; font-weight: 600; color: #1f2d3d; }
.wc-addcv-form select { min-width: 220px; }
.wc-add-ok, .wc-add-note { margin-top: 12px; border-radius: 6px; padding: 10px 12px; font-size: 0.92em; line-height: 1.5; }
.wc-add-ok { background: #e8f6ec; border-left: 3px solid #2e9e5b; color: #1b5e34; }
.wc-add-ok p { margin: 0 0 8px; }
.wc-add-note { background: #fdf6e3; border-left: 3px solid #d9a400; color: #6b5400; }
@media (max-width: 480px) {
  .wc-addcv-form { flex-direction: column; align-items: stretch; }
  .wc-addcv-form select { min-width: 0; width: 100%; }
}

/* === Simulation d'entretien (module mock_interview) ======================== */
.mi-job { margin: 6px 0 4px; }
.mi-job > summary { cursor: pointer; color: #1f4d8b; font-size: 0.9em; }
.mi-panel { margin-top: 18px; }
.mi-log { display: grid; gap: 10px; margin-bottom: 14px; }
.mi-msg { border-radius: 10px; padding: 10px 14px; max-width: 85%; }
.mi-msg .mi-who { display: block; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; margin-bottom: 3px; }
.mi-msg p { margin: 0; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
/* Recruteur à gauche, candidat à droite, feedback pleine largeur (ambre). */
.mi-interviewer { background: #eef4fc; border: 1px solid #d6e4f3; justify-self: start; }
.mi-candidate { background: #f2f7f3; border: 1px solid #cfe3d6; justify-self: end; }
.mi-feedback { background: #fff8ec; border: 1px solid #f0deb8; max-width: 100%; }
.mi-feedback .mi-who { color: #9a6a12; }
.mi-answer-form { margin: 0; }
.mi-summary { border: 1px solid #d6e4f3; background: #f8fbff; border-radius: 10px; padding: 14px 16px; }
.mi-section-title { margin: 12px 0 6px; font-size: 0.95em; color: #1f2d3d; }
.mi-summary .mi-overall { margin: 4px 0 8px; line-height: 1.5; }
.mi-strengths, .mi-improvements { margin: 0; padding-left: 20px; line-height: 1.5; }
.mi-restart { margin: 14px 0 0; }
.mi-restart a { font-size: 0.85em; color: #6c7f95; text-decoration: none; }
.mi-restart a:hover { color: #1f4d8b; text-decoration: underline; }
/* « Mes entretiens » : historique des sessions sauvegardées. */
.mi-history-title { font-size: 1.05em; margin: 24px 0 8px; }
.mi-history { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mi-history-item { display: flex; align-items: center; gap: 10px; border: 1px solid #e8edf2; border-radius: 8px; padding: 8px 12px; }
.mi-history-link { flex: 1; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.mi-history-link:hover .mi-history-name { color: #1f4d8b; }
.mi-history-name { font-weight: 600; color: #1f2d3d; }
.mi-history-meta { font-size: 0.8em; color: #6c7f95; margin-top: 1px; }
.mi-history-del { background: transparent; border: 0; cursor: pointer; font-size: 1em; line-height: 1; padding: 4px; opacity: 0.55; }
.mi-history-del:hover { opacity: 1; }
.mi-history-compact { margin-top: 10px; }
.mi-for-app { margin: -4px 0 10px; }
/* Renommage inline d'une candidature (société + poste). <details> sans le
   chrome par défaut : le titre EST le résumé cliquable. */
.app-rename { border: 0; padding: 0; margin: 0; background: transparent; }
.app-rename-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.app-rename-summary::-webkit-details-marker { display: none; }
.app-rename-summary h1 { margin: 0; }
/* Bouton « ✎ Renommer » VISIBLE à côté du titre (le rendre découvrable). */
.app-rename-btn {
  font-size: 0.8em; color: #1f4d8b; white-space: nowrap;
  border: 1px solid #c3d4e8; border-radius: 6px; padding: 3px 10px; background: #f4f9fe;
}
.app-rename-summary:hover .app-rename-btn { background: #e7f0fb; border-color: #9cbce0; }
details[open] .app-rename-btn { background: #e7f0fb; }
/* Le formulaire de renommage n'apparaît QUE quand le <details> est ouvert.
   (Le repli natif ne s'applique pas ici — le <summary> contient un <h1>.) On
   force donc le masquage à l'état fermé. */
.app-rename:not([open]) .app-rename-form { display: none; }
/* Panneau d'édition : carte douce, distincte du titre, plutôt qu'un formulaire
   brut posé sur le fond blanc. Sa largeur (max-width) dimensionne le <details>
   ouvert → les deux champs tiennent côte à côte et restent alignés. */
.app-rename-form {
  margin-top: 14px; max-width: 560px;
  background: #f6f9fe; border: 1px solid #dbe6f3; border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(31, 77, 139, 0.04);
}
.app-rename-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.app-rename-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.app-rename-field > span {
  font-size: 0.76em; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: #5a6b7d;
}
.app-rename-field input {
  width: 100%; box-sizing: border-box; padding: 9px 11px; background: #fff;
  border: 1px solid #cbd5dc; border-radius: 7px; font-family: inherit; font-size: 0.95em;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.app-rename-field input:focus {
  outline: none; border-color: #1f4d8b; box-shadow: 0 0 0 3px rgba(31, 77, 139, 0.14);
}
.app-rename-actions { margin-top: 16px; }
@media (max-width: 520px) { .app-rename-fields { grid-template-columns: 1fr; } }
/* Sous-titres dans une carte « artefact » (carte Entretien fusionnée). */
.artefact-subtitle { font-size: 0.98em; margin: 8px 0 6px; color: #1f2d3d; }
.interview-sim-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef1f5; }

/* === Aide contextuelle : bouton flottant « ? » + modale =================== */
.help-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 48px; height: 48px; border-radius: 50%;
  background: #1f4d8b; color: #fff; border: 0; cursor: pointer;
  font-size: 1.5em; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(15, 30, 50, 0.3);
}
.help-fab:hover { background: #16396a; }
.help-fab:focus-visible { outline: 3px solid #9cbce0; outline-offset: 2px; }
.help-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; }
.help-modal[hidden] { display: none; }
.help-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 30, 50, 0.5); }
.help-modal-box {
  position: relative; background: #fff; border-radius: 12px;
  max-width: 560px; width: calc(100% - 40px); max-height: 80vh; overflow: auto;
  padding: 22px 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.help-modal-x {
  position: absolute; top: 8px; right: 12px; background: transparent; border: 0;
  font-size: 1.7em; line-height: 1; cursor: pointer; color: #6c7f95; padding: 2px 6px;
}
.help-modal-x:hover { color: #1f2d3d; }
.help-modal-box h2 { margin: 0 4px 12px 0; font-size: 1.1em; color: #1f4d8b; }
.help-modal-body { font-size: 0.95em; line-height: 1.6; color: #2a3b4d; }
.help-modal-body p { margin: 8px 0; }
.help-modal-body ul { margin: 8px 0; padding-left: 20px; }
.help-modal-body li { margin: 4px 0; }
/* Empêche le scroll de l'arrière-plan quand la modale est ouverte. */
body.help-open { overflow: hidden; }