/* Palette « Corail et nuit » de Jobaiko (DESIGN.md), recopiée de src/index.css
   (--color-jb-*, --color-corail-*, --color-slate-*) parce que cette page statique
   ne charge pas l'application. scripts/check-couleurs-heritage.js vérifie que les
   valeurs restent identiques à la source. */
:root {
  --jb-fond: #FFF6F2;
  --jb-surface: #FFFFFF;
  --jb-encre: #16131F;
  --jb-texte2: #55505F;
  --jb-action: #D33447;
  --jb-action-appui: #B02A3B;
  --jb-accent: #FFC93C;
  --jb-accent-doux: #FFF0C2;
  --jb-accent-texte: #6B4A00;
  --jb-bord: #E6DDE3;
  --jb-bord-fort: #9C8F9A;
  --jb-nuit-texte2: #E6E1EE;
  --jb-nuit-discret: #B9B3C6;
  --jb-corail-50: #FFF7F8;
  --jb-corail-100: #FFE3E6;
  --jb-corail-200: #FFD3D8;
  --jb-corail-300: #F7A3AD;
  --jb-corail-700: #8F2231;
  --jb-corail-800: #6E1A26;
  --jb-gris-50: #FCF8F7;
  --jb-gris-100: #F4EEF0;
  --jb-gris-300: #CFC5CD;
  --jb-gris-400: #9C8F9A;
  --jb-gris-500: #6B6474;
  --jb-gris-700: #3F3A4A;
  --jb-gris-800: #2A2536;
  --jb-titres: 'Zilla Slab', Georgia, serif;
  --jb-texte-police: 'Work Sans', system-ui, sans-serif;
}

/* Pages d'information et pages héritées du blog de CV Boost, aux couleurs de
   Jobaiko (variables --jb-* ci-dessus). Polices : Zilla Slab (titres) et Work
   Sans (texte). Les règles .cv-* et .cv-tpl-* dessinent les modèles de CV de
   la personne : leurs couleurs et polices propres ne changent pas. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --accent: var(--jb-action);
  --accent-hover: var(--jb-action-appui);
  --text: var(--jb-encre);
  --text-muted: var(--jb-texte2);
  --text-secondary: var(--jb-gris-500);
  --bg: var(--jb-fond);
  --white: #ffffff;
  --border: var(--jb-bord);
  --font-heading: var(--jb-titres);
  --font-body: var(--jb-texte-police);
  --radius-card: 1.25rem;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.06), 0 12px 28px rgba(0,0,0,0.08);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* en-tête fixe compensé par .cbh-cale (entete.css) */
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ─── Navbar ─── */
.blog-nav {
  position: fixed;
  top: 36px;
  z-index: 40;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.blog-nav-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

.blog-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.blog-nav-brand img {
  height: 2.5rem;
  width: auto;
}

.blog-nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.blog-nav-brand-name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}

.blog-nav-brand-name span {
  color: var(--accent);
}

.blog-nav-brand-sub {
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.blog-nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.blog-nav-links a {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.blog-nav-links a:hover {
  color: var(--accent);
  text-decoration: none;
}

.blog-nav-cta {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  color: var(--white) !important;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.625rem;
  text-decoration: none !important;
  transition: all 0.2s;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--jb-action) 20%, transparent);
}

.blog-nav-cta:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--jb-action) 35%, transparent);
  transform: translateY(-1px);
}

/* Hamburger button — mobile only */
.blog-nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--text-muted);
}

.blog-nav-hamburger svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 640px) {
  .blog-nav-hamburger {
    display: block;
  }
  .blog-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
    gap: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .blog-nav-links.open {
    display: flex;
  }
  .blog-nav-links a {
    font-size: 1rem;
    padding: 0.5rem 0;
  }
}

/* ─── Hero (index page) ─── */
.blog-hero {
  padding: 5rem 1.5rem 2.5rem;
  text-align: center;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .blog-hero {
    padding: 8rem 1.5rem 4rem;
  }
}

.blog-hero h1 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.75rem;
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .blog-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
}

.blog-hero p {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 40rem;
  margin: 0 auto;
  line-height: 1.65;
}

@media (min-width: 768px) {
  .blog-hero p {
    font-size: 1.125rem;
    line-height: 1.7;
  }
}

/* ─── Category Tabs ─── */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
}

.category-tab {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.2s ease;
}

.category-tab:hover {
  color: var(--text);
  background: var(--border);
  border-color: transparent;
  text-decoration: none;
}

.category-tab.active {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

/* ─── Article Grid ─── */
.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .article-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── Article Card ─── */
.article-card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
  color: inherit;
}

.article-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.article-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-card-category {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.article-card-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.article-card-excerpt {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 0.75rem;
}

.article-card-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ─── Pagination ─── */
.pagination {
  display: flex;
  flex-wrap: wrap; /* 17 pages ne tiennent pas sur une ligne de téléphone */
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem 3rem;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.pagination a {
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--white);
}

.pagination a:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

.pagination .active {
  color: var(--white);
  background: var(--accent);
  border: 1px solid var(--accent);
}

/* ─── Breadcrumbs ─── */
.breadcrumbs {
  max-width: 48rem;
  margin: 0 auto;
  padding: 5.5rem 1.5rem 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.breadcrumbs span.sep {
  margin: 0 0.5rem;
  color: var(--text-secondary);
}

/* ─── Article Page ─── */
.article-header {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
}

.article-header .category-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: color-mix(in srgb, var(--jb-action) 8%, transparent);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
}

.article-header h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}

@media (min-width: 640px) {
  .article-header h1 {
    font-size: 2.5rem;
  }
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.article-author {
  font-weight: 600;
  color: var(--text);
}

.article-hero-image {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.article-hero-image img {
  width: 100%;
  border-radius: 1rem;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

/* ─── Article Content ─── */
.article-content {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.8;
}

.article-content h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0;
  border-bottom: none;
  letter-spacing: -0.02em;
}

.article-content h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
  margin: 2rem 0 0.75rem;
}

.article-content p {
  margin-bottom: 1.25rem;
  color: var(--text-muted);
}

.article-content ul,
.article-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.article-content li {
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}

.article-content strong {
  color: var(--text);
  font-weight: 600;
}

.article-content blockquote {
  border-left: 4px solid var(--accent);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: color-mix(in srgb, var(--jb-action) 4%, transparent);
  border-radius: 0 0.5rem 0.5rem 0;
  font-style: italic;
  color: var(--text-muted);
}

.article-content code {
  background: var(--jb-gris-100);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

.article-content a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-content a:hover {
  color: var(--accent-hover);
}

/* ─── CTA Box ─── */
.cta-box {
  max-width: 48rem;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
}

.cta-box-inner {
  background: linear-gradient(135deg, var(--jb-corail-800), var(--jb-corail-700), var(--jb-corail-700));
  border-radius: var(--radius-card);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--white);
}

.cta-box-inner h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.cta-box-inner p {
  font-size: 1rem;
  opacity: 0.85;
  margin-bottom: 1.5rem;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.cta-box-inner a {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--white);
  color: var(--jb-corail-700) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  border-radius: 0.625rem;
  text-decoration: none !important;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cta-box-inner a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Encart « simulation d'entretien », placé DANS le texte des articles
   d'entretien (build-blog.js, avecEncartEntretien) : il doit résister aux
   styles des paragraphes et des liens de .article-content. */
.article-content .encart-simulation {
  max-width: none;
  margin: 2rem 0;
  padding: 0;
}
.article-content .encart-simulation .cta-box-inner {
  padding: 2rem 1.5rem;
}
.article-content .encart-simulation .cta-box-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
  opacity: 1;
  margin-bottom: 0.75rem;
}
.article-content .encart-simulation p {
  color: var(--white);
}

/* ─── External Links ─── */
.external-links-section {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2rem;
}

.external-links-section h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}

.external-links-section ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.external-links-section li a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--bg-card, #f8f9fa);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--primary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.2s;
}

.external-links-section li a:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ─── Related Articles ─── */
.related-section {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--border);
}

.related-section h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.5rem;
  text-align: center;
  letter-spacing: -0.02em;
}

.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── Footer ─── */
.blog-footer {
  border-top: 1px solid var(--border);
  background: var(--white);
  padding: 3rem 0;
}

.blog-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .blog-footer-inner {
    flex-direction: row;
  }
}

.blog-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.blog-footer-brand img {
  height: 2rem;
  width: auto;
}

.blog-footer-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.blog-footer-brand-name {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}

.blog-footer-brand-name span {
  color: var(--accent);
}

.blog-footer-brand-sub {
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.blog-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  font-size: 0.75rem;
}

.blog-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.blog-footer-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

.blog-footer-copy {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─── Table of Contents ─── */
.article-intro {
  max-width: 45rem; /* la largeur utile du sommaire : 48rem moins ses marges */
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  background: var(--white);
  border-left: 4px solid var(--accent);
  border-radius: 0.625rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
}

@media (max-width: 48rem) {
  .article-intro { margin-left: 1.5rem; margin-right: 1.5rem; }
}

.toc {
  max-width: 48rem;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
}

.toc h2 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.toc ol {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1rem 1rem 1rem 2rem;
}

.toc li {
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
}

.toc a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.toc a:hover {
  text-decoration: underline;
}

/* ─── FAQ Section ─── */
.faq-section {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}

.faq-section h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: none;
  letter-spacing: -0.02em;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}

.faq-item h3 {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.faq-item p {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

/* ─── Example Subtitle ─── */
.example-subtitle {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* ─── Fiche exemple : aperçu du CV tel que l'éditeur le rend + les deux portes
   vers l'outil (ouvrir dans l'éditeur, télécharger en PDF). Mobile d'abord :
   l'image prend la largeur, les boutons passent dessous ; à partir de 56rem
   l'image à gauche, les actions collées à droite. ─── */
.example-hero {
  max-width: 48rem;
  margin: 2rem auto 2.5rem;
  padding: 0 1.5rem;
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
.example-figure {
  margin: 0;
}
.example-figure a {
  display: block;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
  border: 1px solid var(--border);
  background: var(--white);
  transition: transform 0.2s, box-shadow 0.2s;
}
.example-figure a:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}
.example-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.example-figure figcaption {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.example-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.example-btn {
  display: block;
  padding: 0.875rem 1.5rem;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 0.625rem;
  text-decoration: none !important;
  border: 2px solid var(--accent);
  color: var(--accent-hover) !important;
  background: var(--white);
  transition: all 0.2s;
}
.example-btn:hover {
  background: var(--jb-corail-50);
  transform: translateY(-1px);
}
.example-btn-primary {
  background: var(--accent);
  color: var(--white) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--jb-action) 30%, transparent);
}
.example-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.example-actions-note {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
@media (min-width: 56rem) {
  .example-hero {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 2rem;
  }
  .example-actions {
    position: sticky;
    top: 5rem;
  }
}
.cv-render-title {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ═══════════════════════════════════════════════
   CV TEMPLATE RENDERS — A4-style professional CVs
   ═══════════════════════════════════════════════ */

.cv-render-wrapper {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.cv-page {
  /* Modèles de CV : polices et couleurs de CV Boost figées ici (le reste de la
     page est passé aux couleurs de Jobaiko le 28/10/2026, pas le CV). */
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  --text: #111827;
  --text-muted: #6b7280;
  --white: #ffffff;
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Shared section title pattern */
.cv-section-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.625rem;
  padding-bottom: 0.375rem;
}

/* Shared separator bar */
.cv-sep {
  width: 2.5rem;
  height: 3px;
  margin-bottom: 0.75rem;
}

/* Shared experience entry */
.cv-exp-entry { margin-bottom: 1rem; }
.cv-exp-entry:last-child { margin-bottom: 0; }
.cv-exp-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.125rem; }
.cv-exp-title { font-family: var(--font-heading); font-weight: 700; font-size: 0.8125rem; }
.cv-exp-date { font-size: 0.75rem; font-weight: 500; }
.cv-exp-company { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.25rem; }
.cv-exp-bullets { list-style: none; padding: 0; margin: 0; }
.cv-exp-bullets li { position: relative; padding-left: 1rem; font-size: 0.8125rem; line-height: 1.5; margin-bottom: 0.125rem; }
.cv-exp-bullets li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 4px; height: 4px; border-radius: 50%; }

/* Shared formation entry */
.cv-form-entry { margin-bottom: 0.625rem; }
.cv-form-entry:last-child { margin-bottom: 0; }
.cv-form-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.cv-form-degree { font-weight: 600; font-size: 0.8125rem; }
.cv-form-year { font-size: 0.75rem; }
.cv-form-school { font-size: 0.8125rem; color: var(--text-muted); }

/* Shared skill tags */
.cv-skill-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.cv-skill-tag { display: inline-block; padding: 0.1875rem 0.625rem; font-size: 0.6875rem; font-weight: 600; border-radius: 9999px; }

/* Language entries */
.cv-lang-item { font-size: 0.8125rem; margin-bottom: 0.25rem; }
.cv-lang-item strong { font-weight: 600; }

/* Interest entries */
.cv-interest-item { font-size: 0.8125rem; margin-bottom: 0.25rem; }

/* Section spacer (replaces <br> tags) */
.cv-section-title { margin-top: 1.25rem; }
.cv-section-title:first-child { margin-top: 0; }

/* Main content area sections flow */
.cv-tpl-classique .cv-main,
.cv-tpl-creatif .cv-main,
.cv-tpl-executive .cv-body-left,
.cv-tpl-executive .cv-body-right,
.cv-tpl-tech .cv-main,
.cv-tpl-tech .cv-aside {
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ─── TEMPLATE: CLASSIQUE (dark sidebar) ─── */
.cv-tpl-classique {
  display: flex;
  min-height: 700px;
}

.cv-tpl-classique .cv-sidebar {
  width: 35%;
  background: #2c3e50;
  color: #fff;
  padding: 2rem 1.5rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cv-tpl-classique .cv-sidebar .cv-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  border-bottom: none;
  padding-bottom: 0.25rem;
}

.cv-tpl-classique .cv-sidebar .cv-sep {
  background: #3498db;
  margin: 0 auto 0.75rem;
}

.cv-tpl-classique .cv-sidebar .cv-profile-text {
  font-size: 0.75rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
}

.cv-tpl-classique .cv-sidebar .cv-contact-list {
  list-style: none; padding: 0;
}

.cv-tpl-classique .cv-sidebar .cv-contact-list li {
  font-size: 0.75rem;
  margin-bottom: 0.375rem;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cv-tpl-classique .cv-sidebar .cv-contact-list li .ci {
  width: 1rem;
  text-align: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.cv-tpl-classique .cv-sidebar .cv-lang-item {
  color: rgba(255,255,255,0.85);
}
.cv-tpl-classique .cv-sidebar .cv-lang-item strong {
  color: #fff;
}

.cv-tpl-classique .cv-sidebar .cv-interest-item {
  color: rgba(255,255,255,0.85);
}

.cv-tpl-classique .cv-sidebar .cv-skill-tag {
  background: rgba(52,152,219,0.25);
  color: #fff;
}

.cv-tpl-classique .cv-main {
  flex: 1;
  padding: 2rem 2rem;
}

.cv-tpl-classique .cv-main .cv-name {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: #2c3e50;
  margin-bottom: 0.25rem;
}

.cv-tpl-classique .cv-main .cv-jobtitle {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #7f8c8d;
  margin-bottom: 1.5rem;
}

.cv-tpl-classique .cv-main .cv-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #2c3e50;
  border-bottom: none;
}

.cv-tpl-classique .cv-main .cv-sep {
  background: #3498db;
}

.cv-tpl-classique .cv-exp-title { color: #2c3e50; }
.cv-tpl-classique .cv-exp-date { color: #7f8c8d; }
.cv-tpl-classique .cv-exp-company { color: #7f8c8d; }
.cv-tpl-classique .cv-exp-bullets li::before { background: #3498db; }
.cv-tpl-classique .cv-form-year { color: #7f8c8d; }


/* ─── TEMPLATE: MINIMALISTE (single column, green accent) ─── */
.cv-tpl-minimaliste {
  padding: 2.5rem;
}

.cv-tpl-minimaliste .cv-header {
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #10b981;
}

.cv-tpl-minimaliste .cv-name {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.cv-tpl-minimaliste .cv-jobtitle {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #10b981;
  margin-bottom: 0.75rem;
}

.cv-tpl-minimaliste .cv-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cv-tpl-minimaliste .cv-contact-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cv-tpl-minimaliste .cv-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #10b981;
  letter-spacing: 0.15em;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #e2e8f0;
}

.cv-tpl-minimaliste .cv-exp-title { color: #1e293b; }
.cv-tpl-minimaliste .cv-exp-date { color: #10b981; }
.cv-tpl-minimaliste .cv-exp-company { color: var(--text-muted); }
.cv-tpl-minimaliste .cv-exp-bullets li { padding-left: 1.25rem; }
.cv-tpl-minimaliste .cv-exp-bullets li::before {
  content: '\2192';
  background: none;
  color: #10b981;
  width: auto;
  height: auto;
  border-radius: 0;
  font-size: 0.75rem;
  top: 0;
}

.cv-tpl-minimaliste .cv-skill-tag {
  background: rgba(16,185,129,0.08);
  color: #10b981;
}

.cv-tpl-minimaliste .cv-skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2rem;
}


/* ─── TEMPLATE: EXECUTIVE (dark header + gold accent) ─── */
.cv-tpl-executive .cv-header {
  background: #1e293b;
  color: #fff;
  padding: 2rem 2.5rem 1.5rem;
}

.cv-tpl-executive .cv-header::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(to right, #f59e0b, #10b981);
  margin-top: 1.25rem;
}

.cv-tpl-executive .cv-name {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: #fff;
  margin-bottom: 0.375rem;
}

.cv-tpl-executive .cv-jobtitle {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #f59e0b;
  margin-bottom: 0.75rem;
}

.cv-tpl-executive .cv-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.6875rem;
  color: #94a3b8;
}

.cv-tpl-executive .cv-contact-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.cv-tpl-executive .cv-body {
  display: flex;
  padding: 1.5rem 2.5rem 2rem;
  gap: 2rem;
}

.cv-tpl-executive .cv-body-left {
  width: 38%;
  flex-shrink: 0;
}

.cv-tpl-executive .cv-body-right {
  flex: 1;
  border-left: 1px solid #e2e8f0;
  padding-left: 2rem;
}

.cv-tpl-executive .cv-section-title {
  font-size: 0.625rem;
  font-weight: 700;
  color: #f59e0b;
  letter-spacing: 0.15em;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #e2e8f0;
}

.cv-tpl-executive .cv-profile-text {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.cv-tpl-executive .cv-exp-title { color: #1e293b; }
.cv-tpl-executive .cv-exp-date { color: #f59e0b; font-weight: 600; }
.cv-tpl-executive .cv-exp-company { color: var(--text-muted); }
.cv-tpl-executive .cv-exp-bullets li::before { background: #f59e0b; }

.cv-tpl-executive .cv-skill-tag {
  background: rgba(245,158,11,0.08);
  color: #d97706;
}

.cv-tpl-executive .cv-form-year { color: #f59e0b; }


/* ─── TEMPLATE: CREATIF (purple sidebar) ─── */
.cv-tpl-creatif {
  display: flex;
  min-height: 700px;
}

.cv-tpl-creatif .cv-sidebar {
  width: 30%;
  background: #7c3aed;
  color: #fff;
  padding: 2rem 1.25rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cv-tpl-creatif .cv-sidebar .cv-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.125rem;
}

.cv-tpl-creatif .cv-sidebar .cv-jobtitle {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(255,255,255,0.2);
}

.cv-tpl-creatif .cv-sidebar .cv-section-title {
  font-size: 0.625rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.1em;
  border-bottom: none;
  margin-bottom: 0.5rem;
}

.cv-tpl-creatif .cv-sidebar .cv-contact-list {
  list-style: none;
  padding: 0;
}

.cv-tpl-creatif .cv-sidebar .cv-contact-list li {
  font-size: 0.6875rem;
  margin-bottom: 0.375rem;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cv-tpl-creatif .cv-sidebar .cv-contact-list li .ci {
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
}

.cv-tpl-creatif .cv-sidebar .cv-lang-item { color: rgba(255,255,255,0.8); font-size: 0.75rem; }
.cv-tpl-creatif .cv-sidebar .cv-lang-item strong { color: #fff; }

.cv-tpl-creatif .cv-sidebar .cv-skill-tag {
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.625rem;
}

.cv-tpl-creatif .cv-main {
  flex: 1;
  padding: 2rem 2rem;
}

.cv-tpl-creatif .cv-main .cv-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #7c3aed;
  letter-spacing: 0.1em;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid #ede9fe;
}

.cv-tpl-creatif .cv-exp-title { color: #1e293b; }
.cv-tpl-creatif .cv-exp-date { color: #7c3aed; font-weight: 600; }
.cv-tpl-creatif .cv-exp-company { color: var(--text-muted); font-style: italic; }
.cv-tpl-creatif .cv-exp-bullets li { padding-left: 1rem; }
.cv-tpl-creatif .cv-exp-bullets li::before {
  content: '\25AA';
  background: none;
  color: #7c3aed;
  width: auto;
  height: auto;
  border-radius: 0;
  top: 0;
  font-size: 0.625rem;
}

.cv-tpl-creatif .cv-profile-text {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-muted);
}


/* ─── TEMPLATE: TECH (green header + right sidebar) ─── */
.cv-tpl-tech .cv-header {
  background: #f8fafc;
  border-bottom: 3px solid #059669;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cv-tpl-tech .cv-header-initials {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  border: 3px solid #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #059669;
  background: #fff;
  flex-shrink: 0;
}

.cv-tpl-tech .cv-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.125rem;
}

.cv-tpl-tech .cv-jobtitle {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #059669;
  margin-bottom: 0.5rem;
}

.cv-tpl-tech .cv-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.cv-tpl-tech .cv-contact-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cv-tpl-tech .cv-body {
  display: flex;
}

.cv-tpl-tech .cv-main {
  flex: 1;
  padding: 1.5rem 2rem;
}

.cv-tpl-tech .cv-aside {
  width: 32%;
  background: #f0fdf4;
  border-left: 2px solid #d1fae5;
  padding: 1.5rem 1.25rem;
  flex-shrink: 0;
}

.cv-tpl-tech .cv-section-title {
  font-size: 0.625rem;
  font-weight: 700;
  color: #059669;
  letter-spacing: 0.1em;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #d1fae5;
}

.cv-tpl-tech .cv-profile-text {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.cv-tpl-tech .cv-exp-entry {
  border-left: 3px solid #d1fae5;
  padding-left: 0.875rem;
}

.cv-tpl-tech .cv-exp-title { color: #0f172a; }
.cv-tpl-tech .cv-exp-date { color: #059669; }
.cv-tpl-tech .cv-exp-company { color: #059669; font-size: 0.75rem; }
.cv-tpl-tech .cv-exp-bullets li { padding-left: 1.25rem; }
.cv-tpl-tech .cv-exp-bullets li::before {
  content: '>';
  background: none;
  color: #059669;
  width: auto;
  height: auto;
  border-radius: 0;
  top: 0;
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 700;
}

.cv-tpl-tech .cv-aside .cv-skill-tag {
  background: rgba(5,150,105,0.1);
  color: #059669;
}

.cv-tpl-tech .cv-form-entry {
  border-left: 2px solid #059669;
  padding-left: 0.5rem;
}

.cv-tpl-tech .cv-form-year { color: #059669; }


/* ═══════════════════════════════════════
   LETTER RENDER — Beautiful cover letter
   ═══════════════════════════════════════ */

.letter-render-wrapper {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.letter-render {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
  position: relative;
}

.letter-render::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--jb-action), var(--jb-action-appui));
}

.letter-header {
  padding: 2.5rem 3rem 1.5rem;
  border-bottom: 1px solid var(--jb-gris-100);
}

.letter-header-name {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--jb-gris-800);
  margin-bottom: 0.125rem;
}

.letter-header-title {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--jb-action);
  margin-bottom: 1rem;
}

.letter-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.letter-subject-line {
  padding: 1rem 3rem;
  background: var(--jb-gris-50);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--jb-gris-800);
}

.letter-body {
  padding: 2rem 3rem 2.5rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.9375rem;
  color: var(--jb-gris-700);
  line-height: 1.85;
}

.letter-body p {
  margin-bottom: 1.125rem;
  text-align: justify;
}

.letter-body p:last-child {
  margin-bottom: 0;
}


/* ═══════════════════════════
   TIPS SECTION
   ═══════════════════════════ */

.tips-section {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}

.tips-section h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

/* Guide d'un exemple de CV (champ `guide`, facultatif) */
.example-guide {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 1.5rem 1rem;
}

.example-guide section { margin-bottom: 1.75rem; }

.example-guide h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.example-guide p,
.example-guide li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}

.example-guide p { margin-bottom: 0.75rem; }
.example-guide ul { padding-left: 1.25rem; margin-bottom: 0.75rem; }
.example-guide li { margin-bottom: 0.35rem; }

.tips-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .tips-list { grid-template-columns: repeat(2,1fr); }
}

.tip-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: all 0.2s ease;
}

.tip-item:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.tip-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.tip-text {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}


/* ═══════════════════════════════════
   EXAMPLE CARDS — index page cards
   ═══════════════════════════════════ */

.example-card-preview {
  height: 180px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--border);
}

/* Mini CV preview inside card */
.example-card-preview .mini-cv {
  transform: scale(0.35);
  transform-origin: top left;
  width: 285%;
  pointer-events: none;
}

/* Gradient fade at bottom of preview */
.example-card-preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, var(--white));
}

.example-card-icon {
  font-size: 2.5rem;
  text-align: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, var(--jb-corail-50), var(--jb-corail-50));
  border-bottom: 1px solid var(--border);
}

.example-card-img {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.example-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.article-card:hover .example-card-img img {
  transform: scale(1.05);
}

.example-card-body {
  padding: 1.25rem;
}

.example-card-industry {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: color-mix(in srgb, var(--jb-action) 8%, transparent);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}

.example-card-jobtitle {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 0.375rem;
  letter-spacing: -0.01em;
}

.example-card-excerpt {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.example-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  transition: gap 0.2s;
}

.article-card:hover .example-card-cta {
  gap: 0.625rem;
}

/* Letter card variant */
.example-card-letter-preview {
  height: 160px;
  overflow: hidden;
  position: relative;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #fafbfc, var(--jb-gris-50));
  border-bottom: 1px solid var(--border);
  font-family: Georgia, serif;
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.example-card-letter-preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, var(--jb-gris-50));
}

.example-card-letter-preview .letter-mini-subject {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}


/* ─── Active nav link ─── */
.blog-nav-links .active-link {
  color: var(--accent) !important;
}


/* ═══════════════════
   RESPONSIVE
   ═══════════════════ */

@media (max-width: 768px) {
  .cv-tpl-classique,
  .cv-tpl-creatif {
    flex-direction: column;
  }
  .cv-tpl-classique .cv-sidebar,
  .cv-tpl-creatif .cv-sidebar {
    width: 100%;
  }
  .cv-tpl-executive .cv-body {
    flex-direction: column;
  }
  .cv-tpl-executive .cv-body-left {
    width: 100%;
  }
  .cv-tpl-executive .cv-body-right {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
  }
  .cv-tpl-tech .cv-body {
    flex-direction: column;
  }
  .cv-tpl-tech .cv-aside {
    width: 100%;
    border-left: none;
    border-top: 2px solid #d1fae5;
  }
  .cv-tpl-tech .cv-header {
    flex-direction: column;
    text-align: center;
  }
  .letter-header,
  .letter-subject-line,
  .letter-body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .cv-tpl-minimaliste {
    padding: 1.5rem;
  }
}

/* ─── Pages /modeles/ ─── */

.model-intro {
  max-width: 52rem;
  margin: 16px auto 0;
  padding: 0 16px;
  color: var(--jb-texte2);
  font-size: 1.05rem;
  line-height: 1.6;
}
.model-intro p { margin: 0 0 12px; }
.model-intro strong { color: var(--jb-encre); }

.model-cta-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 24px auto 0;
  padding: 0 16px;
}
.model-cta-primary,
.model-cta-secondary {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.model-cta-primary {
  background: linear-gradient(135deg, var(--jb-action), var(--jb-action));
  color: white;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--jb-action) 25%, transparent);
}
.model-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--jb-action) 35%, transparent);
  text-decoration: none;
}
.model-cta-secondary {
  background: white;
  color: var(--jb-action);
  border: 1.5px solid var(--jb-corail-100);
}
.model-cta-secondary:hover { border-color: var(--jb-action); text-decoration: none; }

.model-preview-section {
  max-width: 60rem;
  margin: 48px auto;
  padding: 0 16px;
}
.model-preview-section h2 {
  text-align: center;
  margin-bottom: 8px;
}
.model-preview-subtitle {
  text-align: center;
  color: var(--jb-gris-500);
  margin: 0 0 24px;
  font-size: 0.95rem;
}

.model-features-section {
  max-width: 52rem;
  margin: 48px auto;
  padding: 0 16px;
}
.model-features-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.model-features-list li {
  background: var(--jb-gris-50);
  border-left: 3px solid var(--jb-action);
  padding: 14px 16px;
  border-radius: 6px;
  color: var(--jb-gris-700);
  font-size: 0.95rem;
  line-height: 1.5;
}

.models-grid-section {
  max-width: 80rem;
  margin: 32px auto;
  padding: 0 16px;
}
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.model-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--jb-bord);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.model-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--jb-encre) 8%, transparent);
  border-color: #c7d2fe;
  text-decoration: none;
  color: inherit;
}
.model-card-preview {
  background: linear-gradient(135deg, var(--jb-corail-50), #ddd6fe);
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.model-card-template-badge {
  background: rgba(255, 255, 255, 0.9);
  color: var(--jb-action);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.model-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.model-card-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--jb-encre);
  line-height: 1.3;
}
.model-card-desc {
  color: var(--jb-gris-500);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0 0 16px;
  flex: 1;
}
.model-card-cta {
  color: var(--jb-action);
  font-weight: 600;
  font-size: 0.9rem;
}

.related-articles-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.related-articles-list li {
  border-bottom: 1px solid var(--jb-bord);
  padding: 12px 0;
}
.related-articles-list li:last-child { border-bottom: none; }
.related-articles-list a {
  color: var(--jb-action);
  text-decoration: none;
  font-weight: 500;
}
.related-articles-list a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .model-cta-inline { flex-direction: column; align-items: stretch; }
  .model-cta-primary, .model-cta-secondary { text-align: center; }
  .model-features-list { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────── */
/*  PREMIUM SHELL — Hero, filtres sticky, cards, placeholders   */
/* ─────────────────────────────────────────────────────────── */

/* Couleurs par industrie (variable utilisée dans les cards data-industry et tabs) */
:root {
  --c-tech: var(--jb-action);
  --c-sante: var(--jb-action);
  --c-commercial: #f59e0b;
  --c-marketing: #ec4899;
  --c-finance: #0ea5e9;
  --c-rh: #eab308;
  --c-logistique: var(--jb-gris-500);
  --c-design: #a855f7;
  --c-juridique: var(--jb-texte2);
  --c-education: #06b6d4;
}

/* ─── Hero Premium ─── */
.blog-hero-premium {
  position: relative;
  text-align: center;
  padding: 7rem 1.5rem 4rem;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, color-mix(in srgb, var(--jb-action) 7%, transparent), transparent 60%),
    radial-gradient(ellipse 700px 500px at 80% 60%, color-mix(in srgb, var(--jb-action) 6%, transparent), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--jb-corail-50) 100%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.blog-hero-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--jb-action) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--jb-action) 4%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  pointer-events: none;
}

.blog-hero-premium > * { position: relative; }

.blog-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  margin-bottom: 1.25rem;
  background: color-mix(in srgb, var(--jb-action) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--jb-action) 18%, transparent);
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-hover);
  letter-spacing: 0.02em;
}

.blog-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jb-action) 18%, transparent);
  animation: hero-dot-pulse 2.5s ease-in-out infinite;
}

@keyframes hero-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--jb-action) 18%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--jb-action) 6%, transparent); }
}

.blog-hero-premium h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 1rem;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.blog-hero-premium p {
  font-size: 1.0625rem;
  color: var(--text-muted);
  max-width: 42rem;
  margin: 0 auto;
  line-height: 1.65;
}

.blog-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 44rem;
  margin: 2.5rem auto 0;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--jb-encre) 4%, transparent);
}

.blog-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.blog-hero-stat-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.blog-hero-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

.blog-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2.25rem;
}

.blog-hero-cta-primary,
.blog-hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 0.625rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

.blog-hero-cta-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--jb-action) 30%, transparent);
}

.blog-hero-cta-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--jb-action) 40%, transparent);
  color: #fff;
}

.blog-hero-cta-primary svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.blog-hero-cta-primary:hover svg { transform: translateX(3px); }

.blog-hero-cta-secondary {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
}

.blog-hero-cta-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 640px) {
  .blog-hero-premium { padding: 5.5rem 1rem 2.5rem; }
  .blog-hero-stats { grid-template-columns: repeat(2, 1fr); padding: 1rem; gap: 0.875rem; }
  .blog-hero-cta { flex-direction: column; align-items: stretch; }
  .blog-hero-cta-primary, .blog-hero-cta-secondary { justify-content: center; }
}

/* ─── Filter tabs sticky avec compteurs ─── */
.category-tabs-sticky {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0;
  margin: 0;
  max-width: none;
}

.category-tabs-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.category-tabs-inner::-webkit-scrollbar { height: 4px; }
.category-tabs-inner::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--jb-encre) 10%, transparent); border-radius: 999px; }

.category-tabs-sticky .category-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.875rem;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
}

.category-tabs-sticky .category-tab svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.category-tabs-sticky .category-tab:hover {
  background: color-mix(in srgb, var(--jb-action) 8%, transparent);
  color: var(--accent-hover);
  border-color: color-mix(in srgb, var(--jb-action) 20%, transparent);
  text-decoration: none;
}

.category-tabs-sticky .category-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--jb-action) 30%, transparent);
}

.category-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  height: 1.125rem;
  background: color-mix(in srgb, var(--jb-encre) 8%, transparent);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.category-tabs-sticky .category-tab.active .category-tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

@media (max-width: 640px) {
  .category-tabs-sticky { top: 56px; }
  .category-tabs-inner { padding: 0.625rem 1rem; }
}

/* ─── Example cards premium (industry top-stripe + lift) ─── */
.example-grid {
  max-width: 80rem;
  padding: 2rem 1.5rem 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .example-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .example-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .example-grid { grid-template-columns: repeat(4, 1fr); }
}

.example-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  text-decoration: none;
  color: inherit;
}

.example-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-color, var(--accent));
  z-index: 2;
}

.example-card[data-industry="tech"] { --card-color: var(--c-tech); }
.example-card[data-industry="sante"] { --card-color: var(--c-sante); }
.example-card[data-industry="commercial"] { --card-color: var(--c-commercial); }
.example-card[data-industry="marketing"] { --card-color: var(--c-marketing); }
.example-card[data-industry="finance"] { --card-color: var(--c-finance); }
.example-card[data-industry="rh"] { --card-color: var(--c-rh); }
.example-card[data-industry="logistique"] { --card-color: var(--c-logistique); }
.example-card[data-industry="design"] { --card-color: var(--c-design); }
.example-card[data-industry="juridique"] { --card-color: var(--c-juridique); }
.example-card[data-industry="education"] { --card-color: var(--c-education); }

.example-card:hover {
  transform: translateY(-4px);
  border-color: var(--card-color, var(--accent));
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--jb-encre) 12%, transparent), 0 4px 8px color-mix(in srgb, var(--jb-encre) 4%, transparent);
  text-decoration: none;
}

.example-card .article-card-body {
  padding: 1.125rem 1.25rem 1.25rem;
}

.example-card .example-card-industry {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: color-mix(in srgb, var(--jb-encre) 5%, transparent);
  color: var(--card-color, var(--accent));
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  margin-bottom: 0.625rem;
}

.example-card .example-card-jobtitle {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 0.5rem;
  letter-spacing: -0.015em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.example-card .example-card-excerpt {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.875rem;
}

.example-card .example-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--card-color, var(--accent));
  transition: gap 0.2s;
}

.example-card-cta-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.22s ease;
}

.example-card:hover .example-card-cta-arrow { transform: translateX(4px); }

/* ─── Placeholders premium (SVG icon + pattern) ─── */
.example-card-img-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  height: 180px;
  overflow: hidden;
  color: var(--card-color, var(--jb-texte2));
}

.example-card-placeholder-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
  background-size: 18px 18px;
  opacity: 0.18;
  pointer-events: none;
}

.example-card-placeholder-icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--jb-encre) 8%, transparent);
  z-index: 1;
}

.example-card-placeholder-icon svg {
  width: 28px;
  height: 28px;
  color: var(--card-color, var(--accent));
}

.example-card-placeholder-label {
  position: relative;
  z-index: 1;
  padding: 0.25rem 0.875rem;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  max-width: 88%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Coloration de fond par industrie — gradients plus subtils, plus haut de gamme */
.example-card-img-tech { background: linear-gradient(135deg, var(--jb-corail-50), var(--jb-corail-100)); }
.example-card-img-sante { background: linear-gradient(135deg, var(--jb-corail-50), var(--jb-corail-100)); }
.example-card-img-commercial { background: linear-gradient(135deg, #fffbeb, #fef3c7); }
.example-card-img-marketing { background: linear-gradient(135deg, #fdf2f8, #fce7f3); }
.example-card-img-finance { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); }
.example-card-img-rh { background: linear-gradient(135deg, #fefce8, #fef3c7); }
.example-card-img-logistique { background: linear-gradient(135deg, var(--jb-gris-50), var(--jb-gris-100)); }
.example-card-img-design { background: linear-gradient(135deg, #faf5ff, #f3e8ff); }
.example-card-img-juridique { background: linear-gradient(135deg, var(--jb-gris-50), var(--jb-bord)); }
.example-card-img-education { background: linear-gradient(135deg, #ecfeff, #cffafe); }

/* ─── Models grid premium ─── */
.models-grid {
  max-width: 80rem;
  margin: 2rem auto 3rem;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .models-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .models-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .models-grid { grid-template-columns: repeat(4, 1fr); } }

.model-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.model-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--jb-encre) 12%, transparent), 0 4px 8px color-mix(in srgb, var(--jb-encre) 4%, transparent);
  text-decoration: none;
  color: inherit;
}

.model-card-preview {
  position: relative;
  height: 200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding-top: 1.25rem;
  background: linear-gradient(180deg, var(--jb-gris-100), var(--jb-bord));
}

/* Vraie vignette du modèle : le haut du CV, comme une feuille posée. */
.model-card-preview img {
  width: 62%;
  height: auto;
  align-self: flex-start;
  border-radius: 4px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--jb-encre) 16%, transparent);
  transition: transform 0.35s ease;
}

.model-card:hover .model-card-preview img { transform: translateY(-4px); }

.model-card-template-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent-hover);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.3125rem 0.625rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.model-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.125rem 1.25rem 1.25rem;
}

.model-card-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4375rem;
}

.model-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.4375rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.model-card-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 0.875rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.model-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: gap 0.2s;
}

.model-card-cta svg { width: 14px; height: 14px; transition: transform 0.22s ease; }
.model-card:hover .model-card-cta svg { transform: translateX(4px); }

/* ─── Galerie des 15 modèles de l'éditeur (/modeles) ─── */
.models-gallery-section,
.models-grid-section > h2 {
  max-width: 80rem;
  margin: 2.5rem auto 0;
  padding: 0 1rem;
}
.models-gallery-section h2,
.models-grid-section > h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.models-gallery-section > p {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0 0 1.5rem;
}
.models-grid-section > h2 { padding: 0; margin-bottom: 1.25rem; }

.models-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
}
@media (min-width: 640px) { .models-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .models-gallery { grid-template-columns: repeat(5, 1fr); } }

.model-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.model-tile img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.model-tile:hover img,
.model-tile:focus-visible img {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
}
.model-tile-name {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.model-tile-tagline {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.model-tile-cta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-hover);
}
.model-tile:hover .model-tile-cta { text-decoration: underline; }

/* ─── Outils Jobaiko (maillage interne) ─── */
.tools-links {
  max-width: 48rem;
  margin: 0 auto 2rem;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.tools-links h2 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.875rem;
  letter-spacing: -0.01em;
}

.tools-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 560px) {
  .tools-links ul { grid-template-columns: repeat(2, 1fr); }
}

.tools-links li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.tools-links li a::before {
  content: "→";
  color: var(--accent);
  font-weight: 700;
}

.tools-links li a:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
  background: var(--jb-corail-50);
}

/* ─── Author Box (bio en bas d'article) ─── */
.author-box {
  max-width: 48rem;
  margin: 0 auto 2rem;
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.author-box-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
}

.author-box-info { display: flex; flex-direction: column; gap: 0.25rem; }

.author-box-name {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.author-box-name:hover { color: var(--accent); }

.author-box-role {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 600;
}

.author-box-bio {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0.375rem 0 0.5rem;
}

.author-box-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}

@media (max-width: 480px) {
  .author-box { flex-direction: column; align-items: center; text-align: center; }
}

/* ─── Author Profile Page (/auteur/:slug) ─── */
.author-profile {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.author-profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
}

.author-profile-info h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.author-profile-role {
  font-size: 1rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.875rem;
}

.author-profile-bio {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 0.875rem;
}

.author-profile-link {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
}

@media (max-width: 560px) {
  .author-profile { flex-direction: column; align-items: center; text-align: center; }
}

.author-expertise {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 1.5rem;
}

.author-expertise h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}

.author-expertise-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.author-expertise-list li {
  padding: 0.4375rem 0.875rem;
  background: var(--jb-corail-50);
  color: var(--accent-hover);
  border: 1px solid var(--jb-corail-100);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}

.author-articles {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
}

.author-articles h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

/* ─── Sélecteur de langue ─────────────────────────────────────────────────────
   Menu natif <details>/<summary> : aucun JavaScript, fonctionne au clavier et
   quand les scripts sont désactivés. Le blog est statique, il n'a pas de bundle.
   Le drapeau est un repère, le nom de la langue porte l'information. */

.lang-switcher {
  position: relative;
  display: inline-block;
}

.lang-switcher > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  font-family: var(--font-heading, inherit);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--jb-gris-500);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s, color 0.15s;
}

.lang-switcher > summary::-webkit-details-marker { display: none; }
.lang-switcher > summary::marker { content: ''; }

.lang-switcher > summary::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s;
}

.lang-switcher[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.lang-switcher > summary:hover { background: var(--jb-gris-100); color: var(--jb-encre); }
.lang-switcher > summary:focus-visible { outline: 2px solid var(--jb-action); outline-offset: 2px; }

.lang-switcher > ul {
  position: absolute;
  right: 0;
  z-index: 60;
  min-width: 11rem;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0;
  list-style: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--jb-encre) 15%, transparent);
  outline: 1px solid color-mix(in srgb, var(--jb-encre) 8%, transparent);
}

.lang-switcher > ul a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-heading, inherit);
  font-size: 0.875rem;
  color: var(--jb-gris-700);
  text-decoration: none;
  transition: background-color 0.15s;
}

.lang-switcher > ul a:hover { background: var(--jb-gris-50); }
.lang-switcher > ul a:focus-visible { outline: 2px solid var(--jb-action); outline-offset: -2px; }

.lang-switcher > ul a[aria-current='true'] {
  background: var(--jb-corail-50);
  font-weight: 600;
  color: var(--jb-action-appui);
}

@media (max-width: 640px) {
  .lang-switcher > summary { padding: 0.35rem 0.4rem; }
}

/* ─── /exemples-lettres : réponse courte, modèles par situation ─── */
/* Deux classes : doit l'emporter sur « .blog-hero-premium p ». */
.blog-hero-premium .letter-hero-answer {
  max-width: 42rem;
  margin: 1.25rem auto 0;
  padding: 1rem 1.25rem;
  background: var(--white);
  border-left: 4px solid var(--accent);
  border-radius: 0.625rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  text-align: left;
}

.letter-hero-cta { margin-top: 1.5rem; }

.letter-section {
  max-width: 80rem; /* la largeur de la grille des exemples, pour aligner les titres */
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0;
  scroll-margin-top: 7rem;
}

.letter-section h2 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.letter-section-intro {
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 44rem;
  margin-bottom: 1.25rem;
}

.letter-section-head { padding-bottom: 0.5rem; }
.letter-section-head .letter-section-intro { margin-bottom: 0; }

.letter-situations-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.letter-situation {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: 1rem 1.125rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.letter-situation:hover,
.letter-situation:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}

.letter-situation:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.letter-situation-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.letter-situation-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (min-width: 640px) {
  .letter-section h2 { font-size: 1.625rem; }
  .letter-situations-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .letter-situations-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Hero sombre commun (.cbh-hero, entete.css) sur les gabarits statiques ───
   L'en-tête fixe a sa cale (.cbh-cale) : les marges hautes qui le
   compensaient disparaissent. Deux classes pour l'emporter sur les règles
   claires d'origine plus haut dans ce fichier. */
.cbh-hero.blog-hero, .cbh-hero.blog-hero-premium {
  border-bottom: 0;
  background: radial-gradient(ellipse 60% 90% at 88% 0%, color-mix(in srgb, var(--jb-action) 16%, transparent), transparent 70%), var(--jb-encre);
}
.cbh-hero.blog-hero { padding: 3.5rem 1.5rem 3rem; }
.cbh-hero.blog-hero-premium { padding: 4rem 1.5rem 4rem; }
@media (min-width: 768px) { .cbh-hero.blog-hero { padding: 4.5rem 1.5rem 4rem; } }
@media (max-width: 640px) { .cbh-hero.blog-hero-premium { padding: 2.75rem 1rem 2.75rem; } }
.cbh-hero.blog-hero-premium::before {
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
}
.cbh-hero .blog-hero-eyebrow, .cbh-hero .category-badge {
  background: color-mix(in srgb, var(--jb-action) 12%, transparent); border: 1px solid color-mix(in srgb, var(--jb-corail-300) 35%, transparent); color: var(--jb-corail-300);
}
.cbh-hero .blog-hero-stats { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); box-shadow: none; }
.cbh-hero .blog-hero-stat-value { color: #fff; }
.cbh-hero .blog-hero-stat-label { color: var(--jb-gris-400); }
.cbh-hero .blog-hero-cta-primary { background: var(--jb-action); color: var(--jb-encre); box-shadow: none; }
.cbh-hero .blog-hero-cta-primary:hover { background: var(--jb-corail-300); color: var(--jb-encre); }
.cbh-hero .blog-hero-cta-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.cbh-hero .blog-hero-cta-secondary:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
/* Réponse courte : un panneau discret, sans le trait vert à gauche. */
.cbh-hero.blog-hero-premium .letter-hero-answer, .cbh-hero .article-intro {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--jb-bord);
}
.cbh-hero .article-intro * { color: var(--jb-bord); }
.cbh-hero .vitrine-links a, .cbh-hero .vitrine-links li { color: var(--jb-corail-200); }

/* Pages à fil d'Ariane (article, fiche, modèle, auteur) */
.cbh-hero-page { padding: 0 0 3rem; }
.cbh-hero-page .breadcrumbs { padding-top: 2rem; color: var(--jb-gris-400); }
.cbh-hero-page .breadcrumbs a { color: var(--jb-gris-300); }
.cbh-hero-page .breadcrumbs a:hover { color: #fff; }
.cbh-hero-page .breadcrumbs span.sep { color: var(--jb-gris-500); }
.cbh-hero-page .article-meta, .cbh-hero-page .article-meta a, .cbh-hero-page .example-subtitle { color: var(--jb-gris-300); }
.cbh-hero-page .model-intro, .cbh-hero-page .model-intro strong { color: var(--jb-gris-300); }
.cbh-hero-page .model-intro strong { color: #fff; }
.cbh-hero-page .model-cta-primary { background: var(--jb-action); color: var(--jb-encre); border-color: var(--jb-action); }
.cbh-hero-page .model-cta-primary:hover { background: var(--jb-corail-300); color: var(--jb-encre); }
.cbh-hero-page .model-cta-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.cbh-hero-page .author-profile-role, .cbh-hero-page .author-profile-link { color: var(--jb-corail-300); }
.cbh-hero-page .author-profile-bio { color: var(--jb-gris-300); }
.cbh-hero-page .author-profile-photo { border-color: rgba(255,255,255,.2); }
.article-hero-image { margin-top: 2rem; }

.category-tabs-sticky { top: var(--cbh-hauteur, 65px); }

/* Fiche d'exemple (CV) : texte et boutons à gauche, le vrai CV à droite,
   posé sur le bas du hero. Sur téléphone, le CV passe sous les boutons. */
.cbh-hero-fiche { padding-bottom: 0; }
.fiche-hero { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; display: grid; gap: 2rem; }
.cbh-hero-fiche .breadcrumbs, .cbh-hero-fiche .article-header { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.cbh-hero-fiche .article-header h1 { font-size: clamp(1.875rem, 4vw, 2.875rem); line-height: 1.12; }
.fiche-hero-texte { padding-bottom: 0.5rem; }
.cbh-hero .example-actions { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; position: static; }
.cbh-hero .example-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.5rem;
  border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: transparent; color: #fff !important; box-shadow: none;
}
.cbh-hero .example-btn:hover { background: rgba(255,255,255,.06); transform: none; }
.cbh-hero .example-btn-primary { background: var(--jb-action); border-color: var(--jb-action); color: var(--jb-encre) !important; font-weight: 700; }
.cbh-hero .example-btn-primary:hover { background: var(--jb-corail-300); border-color: var(--jb-corail-300); }
.cbh-hero .example-actions-note { width: 100%; color: var(--jb-gris-400); }
.fiche-hero-visuel .example-figure { display: flex; flex-direction: column-reverse; gap: 0.75rem; max-width: 27rem; margin: 0 auto; }
.fiche-hero-visuel .example-figure a { border: 0; border-radius: 10px 10px 0 0; max-height: 34rem; box-shadow: 0 -10px 60px rgba(0,0,0,.45); }
.fiche-hero-visuel .example-figure a:hover { transform: none; }
.fiche-hero-visuel .example-figure figcaption { margin: 0; color: var(--jb-gris-400); text-align: center; }
@media (min-width: 60rem) {
  .fiche-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3.5rem; align-items: end; }
  .fiche-hero-texte { padding-bottom: 3.5rem; }
}
@media (max-width: 59.99rem) { .fiche-hero-visuel .example-figure a { max-height: 26rem; } }

/* Page de lettre : la feuille, mise en page comme une vraie lettre, posée
   sur le bas du hero ; conseils et appel à écrire la sienne à côté. */
.cbh-hero-lettre { padding-bottom: 8.5rem; }
.cbh-hero-lettre .breadcrumbs, .cbh-hero-lettre .article-header { max-width: 80rem; padding-left: 1.5rem; padding-right: 1.5rem; }
.cbh-hero-lettre .article-header h1 { font-size: clamp(1.875rem, 4vw, 2.875rem); line-height: 1.12; max-width: 52rem; }
.cbh-hero-lettre .example-subtitle { max-width: 46rem; }
.lettre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.75rem; }
.cbh-hero .lettre-action-cv { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.4); min-height: 44px; display: inline-flex; align-items: center; }
.cbh-hero .lettre-action-cv:hover { text-decoration-color: #fff; }
.lettre-page {
  max-width: 80rem; margin: -6.5rem auto 0; padding: 0 1.5rem 3rem; position: relative;
  display: grid; gap: 2rem; align-items: start;
}
.lettre-page .letter-render {
  border-radius: 6px; box-shadow: 0 24px 60px color-mix(in srgb, var(--jb-encre) 18%, transparent); padding: 3.5rem 4rem 3rem;
  font: 400 1rem/1.75 var(--font-body); color: var(--jb-gris-800);
}
.lettre-page .letter-render::before { display: none; }
.lettre-page .letter-header { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0 0 1.75rem; border: 0; }
.lettre-page .letter-header-name { font-size: 1.125rem; color: var(--jb-encre); }
.lettre-page .letter-header-title { margin: 0; color: var(--jb-texte2); text-transform: none; letter-spacing: 0; font-size: 0.9375rem; font-family: var(--font-body); font-weight: 400; }
.lettre-page .letter-header-meta { display: block; font-size: 0.9375rem; color: var(--jb-texte2); text-align: right; white-space: nowrap; }
.lettre-page .letter-subject-line { padding: 0; margin-bottom: 1.5rem; background: none; font-size: 1rem; font-weight: 700; color: var(--jb-encre); }
.lettre-page .letter-body { padding: 0; font: inherit; color: inherit; }
.lettre-page .letter-body p { text-align: left; margin-bottom: 1.1rem; }
.lettre-fictive { margin: 2rem 0 0; font-size: 0.8125rem; color: var(--jb-gris-500); }
.lettre-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.lettre-conseils { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; }
.lettre-conseils h2, .lettre-cta h2 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; margin: 0 0 1rem; color: var(--jb-encre); }
.lettre-conseils .tips-list { grid-template-columns: 1fr; gap: 0.75rem; }
.lettre-conseils .tip-item { padding: 0; border: 0; background: none; box-shadow: none; }
.lettre-cta { background: var(--jb-encre); border-radius: 14px; padding: 1.5rem; color: var(--jb-gris-300); }
.lettre-cta h2 { color: #fff; }
.lettre-cta p { margin: 0 0 1.25rem; font-size: 0.9375rem; line-height: 1.6; color: var(--jb-gris-300); }
.lettre-cta .cbh-btn { width: 100%; }
.tip-icon { color: var(--accent-hover); display: inline-flex; }
@media (min-width: 60rem) {
  .lettre-page { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; }
  .lettre-aside { position: sticky; top: calc(var(--cbh-hauteur, 65px) + 1.5rem); margin-top: 8rem; }
}
@media (max-width: 640px) {
  .cbh-hero-lettre { padding-bottom: 6rem; }
  .lettre-page { margin-top: -4.5rem; padding: 0 0.75rem 2rem; }
  .lettre-page .letter-render { padding: 1.75rem 1.375rem 2rem; }
  .lettre-page .letter-header { flex-direction: column; gap: 0.75rem; }
  .lettre-page .letter-header-meta { text-align: left; }
  .lettre-actions .cbh-btn { width: 100%; }
  .lettre-actions { justify-content: center; }
}
.cbh-hero-fiche + .cv-render-title, .cbh-hero-fiche ~ .cv-render-title { margin-top: 3.5rem; }

/* Vignettes des grilles (scripts/lib/vignettes.js) : le CV lui-même, cadré
   sur le haut de la page, ou le début réel de la lettre. Même hauteur pour
   toutes, quelle que soit la langue. */
.vignette { height: 15rem; overflow: hidden; background: var(--jb-gris-100); padding: 1.125rem 1.125rem 0; border-bottom: 1px solid var(--border); }
.vignette-cv img { display: block; width: 100%; height: auto; border-radius: 6px 6px 0 0; box-shadow: 0 6px 20px color-mix(in srgb, var(--jb-encre) 12%, transparent); transition: transform .25s ease; }
.example-card:hover .vignette-cv img, .catalogue-card:hover .vignette-cv img { transform: translateY(-4px); }
.mini-lettre {
  height: 100%; background: #fff; border-radius: 6px 6px 0 0; box-shadow: 0 6px 20px color-mix(in srgb, var(--jb-encre) 12%, transparent);
  padding: 1rem 0.875rem; display: flex; flex-direction: column; gap: 0.4rem; overflow: hidden;
  font: 400 7.5px/1.55 var(--font-body); color: var(--jb-texte2);
}
.mini-lettre-nom { font: 700 9.5px/1.3 var(--font-heading); color: var(--jb-encre); }
.mini-lettre-objet { font-weight: 700; color: var(--jb-encre); }
.vignette-vide { display: flex; align-items: center; justify-content: center; padding: 1rem; font-family: var(--font-heading); font-weight: 600; color: var(--jb-texte2); text-align: center; }
@media (max-width: 640px) { .vignette { height: 11rem; padding: 0.75rem 0.75rem 0; } }
/* La couleur du secteur reste sur le filet du haut de la carte ; le texte
   passe en vert foncé (5,9:1) : l'ambre et le jaune sur blanc tombaient
   sous 2,5:1. */
.example-card .example-card-industry, .example-card .example-card-cta { color: var(--jb-corail-700); }