/* =========================================================================
 * TA'IARA — Page "Création de CV" (dashboard candidat)
 * Extrait de jobsearch-taiara.css pour alléger le fichier principal.
 * Regroupe : boutons télécharger/aperçu + sélecteur de couleur, masquage
 * pourcentages, masquage template par défaut, atouts suggérés 2 groupes,
 * restyle des entrées en cartes, mise en 2 colonnes. Graine du futur
 * add-on candidat.
 * ========================================================================= */
/* ===========================================================================
 * 76. PANNEAU "Modèle de CV Ta'iara" — page Création de CV (pleine largeur).
 * Carte en tête de l'éditeur : en-tête + grille de mini-CV + actions.
 * --------------------------------------------------------------------------- */
.taiara-cv-dl-form {
  margin: 0 0 26px 0 !important;
  display: block !important;
  background: #fff !important;
  border: 1px solid var(--tp-border, #e6e3da) !important;
  border-radius: 16px !important;
  padding: 22px 24px 24px !important;
  box-shadow: 0 1px 3px rgba(10, 31, 68, 0.04) !important;
}
.taiara-cv-panel-head {
  margin: 0 0 16px 0 !important;
}
.taiara-cv-panel-title {
  display: block !important;
  font-family: var(--tp-font-head, "Poppins", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--tp-navy, #16315c) !important;
  line-height: 1.25 !important;
}
.taiara-cv-panel-sub {
  display: block !important;
  font-size: 13px !important;
  color: var(--tp-text-muted, #7a8899) !important;
  margin-top: 3px !important;
}
/* Actions : boutons alignés à gauche, sur une ligne. */
.taiara-cv-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
}
.taiara-cv-dl-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 12px 22px !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--tp-navy, #16315c) !important;
  color: #fff !important;
  font-family: var(--tp-font-head, "Poppins", sans-serif) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}
.taiara-cv-dl-btn:hover {
  background: var(--tp-navy-deep, #0d2046) !important;
  transform: translateY(-1px) !important;
}
.taiara-cv-dl-ico { font-size: 16px !important; line-height: 1 !important; }
/* Bouton "Aperçu" : secondaire, contour navy. */
.taiara-cv-preview-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 20px !important;
  border: 1.5px solid var(--tp-navy, #16315c) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--tp-navy, #16315c) !important;
  font-family: var(--tp-font-head, "Poppins", sans-serif) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
.taiara-cv-preview-btn:hover {
  background: var(--tp-navy, #16315c) !important;
  color: #fff !important;
}

/* ===========================================================================
 * 79. MASQUE LE TEMPLATE PDF PAR DÉFAUT de l'add-on (carte "SMANTHA INGRAM" +
 * bouton rouge "Télécharger le PDF") sur "Création de CV". On a notre propre
 * générateur Ta'iara -> le slider de templates natif est superflu.
 * --------------------------------------------------------------------------- */
.page-template-user-dashboard-template .jobsearch-candidate-pdf-main-slider,
.page-template-user-dashboard-template .jobsearch-export-candidate-pdf {
  display: none !important;
}

/* ===========================================================================
 * 80. ATOUTS SUGGÉRÉS en 2 groupes ("Suggérés pour vos secteurs" / "Autres
 * atouts"), reconstruits côté serveur (inc/taiara-suggested-atouts.php).
 * Les .skills-cloud natifs sont flottants -> on passe chaque liste en flex
 * (contient les floats + wrap propre) et on force le clear entre groupes.
 * --------------------------------------------------------------------------- */
/* Label "Atouts suggérés" redondant (les 2 intitulés de groupe suffisent). */
.taiara-suggs > label {
  display: none !important;
}
.taiara-suggs .taiara-suggs-group {
  clear: both !important;
  margin-top: 18px !important;
}
.taiara-suggs .taiara-suggs-group:first-of-type {
  margin-top: 10px !important;
}
.taiara-suggs .taiara-suggs-title {
  clear: both !important;
  display: block !important;
  width: 100% !important;
  font-family: var(--tp-font-head, "Poppins", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--tp-text-muted, #7a8899) !important;
  margin: 0 0 10px 0 !important;
  padding-left: 10px !important;
  border-left: 3px solid var(--tp-accent, #2ea6a0) !important;
  line-height: 1.2 !important;
}
.taiara-suggs .taiara-suggs-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.taiara-suggs .taiara-suggs-list .skills-cloud {
  float: none !important;
  margin: 0 !important;
}

/* ===========================================================================
 * 78. MASQUE LES POURCENTAGES (« 100 ») des Competences / Langues sur "Mon CV"
 * Le reglage backend ne les retire pas du front. Dans le builder, chaque
 * competence/langue affiche <div class="jobsearch-add-skills-wrap"><span>100
 * </span><h2 class="jobsearch-pst-title">Nom</h2></div>. On masque le span de
 * pourcentage (le nom est un <h2>, il reste). On neutralise aussi la pastille.
 * --------------------------------------------------------------------------- */
.page-template-user-dashboard-template .jobsearch-add-skills-wrap > span,
.page-template-user-dashboard-template .resume-list-skill .jobsearch-add-skills-wrap > span,
.page-template-user-dashboard-template .resume-list-item .jobsearch-add-skills-wrap > span {
  display: none !important;
}
/* La pastille ronde etait dessinee sur ce span : on retire aussi son cadre au
 * cas ou un pseudo-element le stylait, et on recolle le titre a gauche. */
.page-template-user-dashboard-template .jobsearch-add-skills-wrap {
  padding-left: 0 !important;
}
.page-template-user-dashboard-template .jobsearch-add-skills-wrap .jobsearch-pst-title {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ===========================================================================
 * 81. RESTYLE PAGE "CRÉATION DE CV" — passe 1 (cosmétique, saves natifs intacts)
 * Entrées répétables (exp/formation/compétences/langues/prix) en cartes propres,
 * typo soignée, timeline native masquée, lettre de motivation compacte.
 * Structure native : li.resume-list-item > small(date) + h2.jobsearch-pst-title
 * + span(organisme) + .jobsearch-resume-education-btn (icônes édit/suppr).
 * --------------------------------------------------------------------------- */

/* -- Lettre de motivation : textarea plus basse (elle prenait tout le haut) -- */
.page-template-user-dashboard-template .jobsearch-candidate-dashboard-editor textarea,
.page-template-user-dashboard-template .cv_cover_letter_skillid ~ .jobsearch-candidate-dashboard-editor textarea {
  min-height: 150px !important;
}

/* -- Chaque entrée = une carte -- */
.page-template-user-dashboard-template .resume-list-item {
  list-style: none !important;
  background: #fff !important;
  border: 1px solid var(--tp-border, #e6e3da) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin: 0 0 10px 0 !important;
  position: relative !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.page-template-user-dashboard-template .resume-list-item:hover {
  border-color: var(--tp-accent, #2ea6a0) !important;
  box-shadow: 0 6px 22px -14px rgba(20, 39, 74, 0.35) !important;
}
/* Masque la timeline native (ligne + pastilles ○) : les cartes suffisent. */
.page-template-user-dashboard-template .resume-list-item::before,
.page-template-user-dashboard-template .resume-list-item::after {
  display: none !important;
  content: none !important;
}
/* La timeline native trace AUSSI une LIGNE VERTICALE grise (2px) le long de
 * chaque section via .jobsearch-candidate-resume-wrap::before, + des pastilles
 * sur les titres via .jobsearch-candidate-title::before/::after. On supprime
 * tout (design en cartes, pas de timeline). */
.page-template-user-dashboard-template .jobsearch-candidate-resume-wrap::before,
.page-template-user-dashboard-template .jobsearch-candidate-resume-wrap::after,
.page-template-user-dashboard-template .jobsearch-candidate-title::before,
.page-template-user-dashboard-template .jobsearch-candidate-title::after,
.page-template-user-dashboard-template .jobsearch-resume-education > ul > li::before,
.page-template-user-dashboard-template .jobsearch-resume-education > ul > li::after {
  display: none !important;
  content: none !important;
}
.page-template-user-dashboard-template .resume-list-item .jobsearch-resume-education-wrap,
.page-template-user-dashboard-template .resume-list-item [class*="jobsearch-resume-"][class*="-wrap"] {
  padding-left: 0 !important;
  margin-left: 0 !important;
  border: none !important;
}

/* Date (mono, gris, majuscules) */
.page-template-user-dashboard-template .resume-list-item small {
  display: block !important;
  font-family: var(--tp-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--tp-text-muted, #7a8899) !important;
  margin-bottom: 3px !important;
}
/* Titre (navy, semibold, taille CV — pas l'énorme titre léger natif) */
.page-template-user-dashboard-template .resume-list-item .jobsearch-pst-title,
.page-template-user-dashboard-template .resume-list-item .jobsearch-pst-title a {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--tp-navy, #16315c) !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}
/* Organisme (le span après le titre) */
.page-template-user-dashboard-template .resume-list-item .jobsearch-pst-title + span {
  display: block !important;
  font-size: 13px !important;
  color: var(--tp-accent-deep, #0a6e63) !important;
  font-weight: 500 !important;
}

/* Actions (édit / suppr / réordonner) : en haut à droite, discrètes au repos */
.page-template-user-dashboard-template .resume-list-item .jobsearch-resume-education-btn,
.page-template-user-dashboard-template .resume-list-item .resume-list-btn {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  display: flex !important;
  gap: 10px !important;
  opacity: 0.45 !important;
  transition: opacity 0.15s ease !important;
}
.page-template-user-dashboard-template .resume-list-item:hover .jobsearch-resume-education-btn,
.page-template-user-dashboard-template .resume-list-item:hover .resume-list-btn {
  opacity: 1 !important;
}

/* Compétences / langues : entrées sans date -> le titre porte tout */
.page-template-user-dashboard-template .resume-list-skill .jobsearch-pst-title,
.page-template-user-dashboard-template .resume-list-lang .jobsearch-pst-title {
  margin: 0 !important;
}

/* Un peu d'air entre les sections */
.page-template-user-dashboard-template .jobsearch-candidate-resume-wrap {
  margin-top: 26px !important;
}

/* -- Éditeur CV en PLEINE LARGEUR : le panneau "Modèle de CV" (carte) est en
      tête, l'éditeur dessous, tout sur toute la largeur de la colonne. -- */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .jobsearch-candidate-dasboard {
  max-width: none !important;
  margin: 0 !important;
}
/* Le bouton "Mettre à jour votre CV" (dernier élément du form) collait au bas
 * de la page -> on lui ajoute de l'air en dessous. */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .jobsearch-employer-profile-submit {
  margin-bottom: 48px !important;
}
/* Grande carte APLATIE : ce sont les SECTIONS qui deviennent des cartes (§84)
 * -> un seul niveau de boîte. "Création de CV" reste comme titre de page. */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .jobsearch-employer-box-section {
  max-width: none !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ===========================================================================
 * 84. GROUPES THÉMATIQUES + SECTIONS EN CARTES CLAIRES.
 * - Libellé de catégorie (eyebrow) au-dessus de chaque groupe.
 * - Chaque SECTION (Formation, etc.) = une CARTE (en-tête teinté + entrées en
 *   lignes) -> un seul niveau de boîte (la grande carte est aplatie ci-dessus).
 * - Boutons "+ Ajouter" en style GHOST (contour).
 * --------------------------------------------------------------------------- */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup {
  margin: 0 !important;
}
/* Libellé de catégorie : petit, en capitales, couleur d'accent. */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup__title {
  font-family: "Poppins", "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: var(--tp-accent-deep, #0a6e63) !important;
  margin: 30px 0 14px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--tp-border, #e6e3da) !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup--1 .tp-cvgroup__title {
  margin-top: 6px !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup--solo .tp-cvgroup__title {
  display: none !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup--solo {
  margin-top: 12px !important;
}

/* --- SECTION = carte claire --- */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup .jobsearch-candidate-resume-wrap {
  background: #fff !important;
  border: 1px solid var(--tp-border, #e6e3da) !important;
  border-radius: 16px !important;
  padding: 10px 18px 14px !important;
  margin: 0 0 16px !important;
  box-shadow: 0 1px 3px rgba(10, 31, 68, 0.04) !important;
}
/* En-tête de section = bandeau légèrement teinté, titre + bouton. */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup .jobsearch-candidate-title {
  background: var(--tp-bg-soft, #f6f7f9) !important;
  border-radius: 10px !important;
  padding: 11px 15px !important;
  margin: 0 0 8px !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup .jobsearch-candidate-title h2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  font-family: "Poppins", "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--tp-navy, #16315c) !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup .jobsearch-candidate-title h2 i {
  display: none !important;
}

/* --- Entrées = lignes (la section est déjà une carte -> pas de carte imbriquée) --- */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup .resume-list-item {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--tp-border, #e6e3da) !important;
  padding: 13px 6px !important;
  margin: 0 !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup .resume-list-item:hover {
  box-shadow: none !important;
  border-color: transparent !important;
  border-bottom-color: var(--tp-border, #e6e3da) !important;
  background: rgba(10, 31, 68, 0.02) !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup ul li.resume-list-item:last-child {
  border-bottom: none !important;
}

/* --- Boutons "+ Ajouter" = GHOST (contour navy, fond transparent) --- */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .jobsearch-resume-addbtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  color: var(--tp-navy, #16315c) !important;
  border: 1.5px solid var(--tp-navy, #16315c) !important;
  border-radius: 9px !important;
  padding: 7px 15px !important;
  font-family: "Poppins", "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
/* Le "+" (span.fa-plus) était blanc (ancien bouton plein) -> il devient
 * invisible sur le ghost. On le force à HÉRITER de la couleur du bouton. */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .jobsearch-resume-addbtn .fa,
body.page-template-user-dashboard-template #dashboard-tab-my-resume .jobsearch-resume-addbtn .fa-plus,
body.page-template-user-dashboard-template #dashboard-tab-my-resume .jobsearch-resume-addbtn span {
  color: inherit !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .jobsearch-resume-addbtn:hover {
  background: var(--tp-navy, #16315c) !important;
  color: #fff !important;
}

/* ===========================================================================
 * SÉLECTEUR DE COULEUR EN MINI-CV (remplace le menu déroulant).
 * Chaque option = une petite maquette de CV aux couleurs de l'ambiance.
 * --------------------------------------------------------------------------- */
.taiara-cv-dl-form .tpcv-themes { width: 100% !important; }
.taiara-cv-dl-form .tpcv-themes-label {
  font-family: var(--tp-font-head, "Poppins", sans-serif) !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--tp-text-muted, #7a8899) !important; margin: 0 0 12px 0 !important;
}
.taiara-cv-dl-form .tpcv-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 16px !important;
}
.taiara-cv-dl-form .tpcv-theme {
  cursor: pointer !important; text-align: center !important; margin: 0 !important;
}
.taiara-cv-dl-form .tpcv-theme input {
  position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important;
}
.taiara-cv-dl-form .tpcv-thumb {
  position: relative !important;
  display: flex !important; flex-direction: column !important;
  width: 100% !important; aspect-ratio: 1 / 1.34 !important;
  border-radius: 5px !important; overflow: hidden !important; background: #fff !important;
  border: 2px solid transparent !important; box-shadow: 0 1px 4px rgba(10, 31, 68, 0.14) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.taiara-cv-dl-form .tpcv-theme:hover .tpcv-thumb { box-shadow: 0 3px 10px rgba(10, 31, 68, 0.22) !important; }
.taiara-cv-dl-form .tpcv-theme input:checked + .tpcv-thumb {
  border-color: var(--tp-navy, #16315c) !important;
  box-shadow: 0 4px 12px rgba(10, 31, 68, 0.28) !important;
}
/* Bandeau */
.taiara-cv-dl-form .tpcv-head { position: relative !important; height: 46px !important; flex: 0 0 auto !important; }
.taiara-cv-dl-form .tpcv-photo {
  position: absolute !important; left: 10px !important; top: 11px !important;
  width: 18px !important; height: 22px !important; border-radius: 3px !important;
  background: rgba(255,255,255,0.85) !important;
}
.taiara-cv-dl-form .tpcv-hl { position: absolute !important; left: 34px !important; height: 4px !important; border-radius: 2px !important; }
.taiara-cv-dl-form .tpcv-hl.n1 { top: 15px !important; width: 56px !important; background: rgba(255,255,255,0.85) !important; }
.taiara-cv-dl-form .tpcv-hl.n2 { top: 25px !important; width: 38px !important; background: rgba(255,255,255,0.5) !important; }
/* Bandeau CLAIR (modèle éco) : repères en foncé translucide pour rester visibles. */
.taiara-cv-dl-form .tpcv-head--light .tpcv-photo { background: rgba(20,39,74,0.16) !important; }
.taiara-cv-dl-form .tpcv-head--light .tpcv-hl.n1 { background: rgba(20,39,74,0.20) !important; }
.taiara-cv-dl-form .tpcv-head--light .tpcv-hl.n2 { background: rgba(20,39,74,0.12) !important; }
/* Horizon */
.taiara-cv-dl-form .tpcv-horizon { height: 4px !important; flex: 0 0 auto !important; }
/* Corps 2 colonnes */
.taiara-cv-dl-form .tpcv-body { display: flex !important; flex: 1 1 auto !important; }
.taiara-cv-dl-form .tpcv-main { flex: 0 0 62% !important; background: #fff !important; padding: 9px 9px !important; }
.taiara-cv-dl-form .tpcv-rail { flex: 1 1 auto !important; padding: 9px 7px !important; }
.taiara-cv-dl-form .tpcv-title { display: block !important; height: 4px !important; width: 62% !important; border-radius: 2px !important; margin: 0 0 6px 0 !important; }
.taiara-cv-dl-form .tpcv-line { display: block !important; height: 3px !important; background: #dfe3e8 !important; border-radius: 2px !important; margin: 4px 0 !important; }
.taiara-cv-dl-form .tpcv-line.short { width: 70% !important; }
.taiara-cv-dl-form .tpcv-dot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; margin: 0 4px 6px 0 !important; }
.taiara-cv-dl-form .tpcv-rl { display: block !important; height: 3px !important; background: rgba(10,31,68,0.1) !important; border-radius: 2px !important; margin: 4px 0 !important; }
.taiara-cv-dl-form .tpcv-theme-name {
  display: block !important; font-family: var(--tp-font-head, "Poppins", sans-serif) !important;
  font-size: 12px !important; font-weight: 600 !important; color: var(--tp-navy, #16315c) !important; margin-top: 8px !important;
}
.taiara-cv-dl-form .tpcv-theme input:checked ~ .tpcv-theme-name { color: var(--tp-navy, #16315c) !important; }

/* ===========================================================================
 * 83. ONGLET DÉDIÉ "Ma Lettre de motivation" (candidat).
 * Contenu injecté par inc/taiara-cover-letter.php dans
 * #dashboard-tab-my-cover-letter. Form autonome (sauvegarde ciblée LM).
 * --------------------------------------------------------------------------- */
body.page-template-user-dashboard-template #dashboard-tab-my-cover-letter .jobsearch-candidate-dasboard,
body.page-template-user-dashboard-template #dashboard-tab-my-cover-letter .jobsearch-employer-box-section {
  max-width: none !important;
  margin: 0 !important;
}
.taiara-lm-intro {
  font-size: 14px !important;
  color: var(--tp-text-muted, #7a8899) !important;
  margin: 0 0 18px 0 !important;
  line-height: 1.5 !important;
}
.page-template-user-dashboard-template .taiara-lm-form .jobsearch-candidate-dashboard-editor textarea {
  min-height: 260px !important;
  width: 100% !important;
  border: 1px solid var(--tp-border, #d9dce3) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  resize: vertical !important;
}
.taiara-lm-actions {
  margin-top: 22px !important;
}
.taiara-lm-save-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 30px !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--tp-navy, #16315c) !important;
  color: #fff !important;
  font-family: var(--tp-font-head, "Poppins", sans-serif) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}
.taiara-lm-save-btn:hover {
  background: var(--tp-navy-deep, #0d2046) !important;
  transform: translateY(-1px) !important;
}

/* Un peu d'air au-dessus du titre "Création de CV". */
body.page-template-user-dashboard-template #dashboard-tab-my-resume {
  padding-top: 30px !important;
}
/* Placeholder "+ Ajouter un atout" du champ tag-it (Atouts) : bien visible,
 * façon action, pour qu'on comprenne qu'on peut saisir. */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .jobseach-skills-con .tagit-new input::placeholder,
body.page-template-user-dashboard-template #dashboard-tab-my-resume .jobseach-skills-con ul.tagit input::placeholder {
  color: var(--tp-navy, #16315c) !important;
  opacity: 0.75 !important;
  font-weight: 600 !important;
}

/* ===========================================================================
 * 85. TEINTE DOUCE PAR CATÉGORIE (cartes de section) + PANNEAU MODÈLES À DROITE.
 * --------------------------------------------------------------------------- */
/* Groupe 1 = MON PARCOURS -> bleu très pâle. */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup--1 .tp-cvgroup__title { color: #2f5d8a !important; }
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup--1 .jobsearch-candidate-resume-wrap {
  background: #f4f8fd !important;
  border-color: #dbe7f4 !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup--1 .jobsearch-candidate-title {
  background: #e7eff9 !important;
}
/* Groupe 2 = COMPÉTENCES & ATOUTS -> teal très pâle. */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup--2 .tp-cvgroup__title { color: #0a6e63 !important; }
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup--2 .jobsearch-candidate-resume-wrap {
  background: #f1f8f6 !important;
  border-color: #d5eae4 !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup--2 .jobsearch-candidate-title {
  background: #e0f1ec !important;
}
/* Groupe 3 = DISTINCTIONS -> ambre très pâle. */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup--3 .jobsearch-candidate-resume-wrap {
  background: #faf6ee !important;
  border-color: #ecdfc9 !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup--3 .jobsearch-candidate-title {
  background: #f3ebda !important;
}
/* Filet des entrées + survol adaptés aux fonds teintés (restent lisibles). */
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup .resume-list-item {
  border-bottom-color: rgba(10, 31, 68, 0.10) !important;
}
body.page-template-user-dashboard-template #dashboard-tab-my-resume .tp-cvgroup .resume-list-item:hover {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* --- PANNEAU MODÈLES COLLANT À DROITE (desktop large) --- */
@media (min-width: 1180px) {
  body.page-template-user-dashboard-template #dashboard-tab-my-resume {
    display: flex !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
  /* Colonne d'édition (le form) à gauche. */
  body.page-template-user-dashboard-template #dashboard-tab-my-resume .jobsearch-candidate-dasboard {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  /* Panneau modèles collant à droite. max-height + overflow -> il tient dans
   * l'écran et devient scrollable en interne (les boutons restent atteignables). */
  body.page-template-user-dashboard-template #dashboard-tab-my-resume .taiara-cv-dl-form {
    flex: 0 0 320px !important;
    position: sticky !important;
    top: 90px !important;
    margin: 0 !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
  }
  /* Vignettes en 2 colonnes dans le panneau étroit. */
  body.page-template-user-dashboard-template #dashboard-tab-my-resume .taiara-cv-dl-form .tpcv-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  /* Boutons Télécharger / Aperçu empilés dans le panneau étroit. */
  body.page-template-user-dashboard-template #dashboard-tab-my-resume .taiara-cv-dl-form .taiara-cv-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.page-template-user-dashboard-template #dashboard-tab-my-resume .taiara-cv-dl-form .taiara-cv-dl-btn,
  body.page-template-user-dashboard-template #dashboard-tab-my-resume .taiara-cv-dl-form .taiara-cv-preview-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ===========================================================================
 * 86. SQUELETTE DE CHARGEMENT (silhouette) le temps que le JS réorganise
 * l'onglet ACTIF du dashboard (CV, Mon profil, etc.). Le contenu réel est
 * masqué (opacité 0) et remplacé par des bandes grises "façon cartes" qui
 * pulsent, puis révélé en fondu quand le JS ajoute .tp-dash-ready. Garde-fou :
 * révélation forcée à 3s même si le JS est lent/désactivé.
 * Portée : .main-tab-section:not(:empty) = uniquement l'onglet affiché (les
 * autres .main-tab-section sont vides -> pas masquées, pas de squelette).
 * --------------------------------------------------------------------------- */
body.page-template-user-dashboard-template .main-tab-section:not(:empty) {
  position: relative !important;
}
body.page-template-user-dashboard-template .main-tab-section:not(:empty) > * {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  animation: tpCvReveal 0s linear 3s forwards !important;
}
body.page-template-user-dashboard-template .main-tab-section.tp-dash-ready > * {
  opacity: 1 !important;
  animation: none !important;
}
/* La silhouette : bandes "cartes" grises qui pulsent. */
body.page-template-user-dashboard-template .main-tab-section:not(:empty)::before {
  content: "" !important;
  position: absolute !important;
  top: 40px !important;
  left: 0 !important;
  right: 0 !important;
  height: 640px !important;
  z-index: 5 !important;
  border-radius: 14px !important;
  background: repeating-linear-gradient(
    to bottom,
    rgba(10, 31, 68, 0.06) 0,
    rgba(10, 31, 68, 0.06) 92px,
    transparent 92px,
    transparent 120px
  ) !important;
  animation: tpSkelPulse 1.2s ease-in-out infinite, tpSkelHide 0s linear 3s forwards !important;
}
body.page-template-user-dashboard-template .main-tab-section.tp-dash-ready::before {
  display: none !important;
}
@keyframes tpCvReveal { to { opacity: 1; } }
@keyframes tpSkelPulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.45; } }
@keyframes tpSkelHide { to { opacity: 0; visibility: hidden; } }