/* ==========================================================================
   CV — page autonome imprimable (/cv/)
   --------------------------------------------------------------------------
   Portée du thème classique (templates/cv.php de Ben-classic-theme-blue), qui
   servait ce CV SANS le chrome du site : pas d'en-tête, pas de pied de page,
   une mise en page A4 et un bouton d'impression. Le gabarit FSE
   templates/page-cv.html reproduit ce parti pris (aucun template-part).

   Cette feuille est chargée UNIQUEMENT sur /cv/ (functions.php, is_page). Elle
   est donc libre de poser des règles globales — @page, fond de body — sans
   déborder sur le reste du site : c'est la raison d'être du fichier séparé.
   Les unités sont en points/millimètres, comme la source : c'est un document
   destiné au papier, pas une page web parmi les autres.

   Les couleurs viennent des tokens du thème (--accent-*, --neutral-*) et non
   plus des hex du classique (#739a9b…), pour que le CV suive la refonte cyan.
   ========================================================================== */

@page { size: A4; margin: 10mm; }

.cv-page {
  --cv-fg: var(--neutral-900, #0f172a);
  --cv-muted: var(--neutral-500, #6b7280);
  --cv-line: var(--neutral-200, #e5e7eb);
  --cv-accent: var(--accent-600, #0e7490);
  /* Pas de token --accent-50 dans le thème : la teinte douce se dérive du 500. */
  --cv-accent-soft: color-mix(in srgb, var(--accent-500, #00A8C4) 12%, #fff);

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--cv-fg);
  font-size: 9pt;
  line-height: 1.35;
}

/* Le fond gris encadre la « feuille » blanche : posé sur le body, pas sur le
   conteneur, sinon la couleur s'arrête à la hauteur du contenu. */
body.page-cv { background: var(--neutral-100, #f3f4f6); margin: 0; padding: 0; }

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

/* La feuille A4 elle-même */
.cv-page .page {
  width: 185mm;
  margin: 12mm auto;
  background: #fff;
  padding: 10mm;
  border-radius: 10px;
  box-shadow: 0 2px 18px rgba(15, 23, 42, 0.08);
}

.cv-page .page > header {
  margin-bottom: 6mm;
  border-bottom: 1px solid var(--cv-line);
  padding-bottom: 4mm;
}

.cv-page h1 {
  margin: 0;
  font-weight: 700;
  font-size: 18pt;
  letter-spacing: 0.2px;
  color: var(--cv-fg);
  line-height: 1.2;
}

.cv-page .cv-identite { display: flex; align-items: center; gap: 10px; }
.cv-page .cv-identite img { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; }

.cv-page .title-tag { font-size: 10pt; font-weight: 500; color: var(--cv-accent); margin-top: 2px; }
.cv-page .subtitle { margin: 4px 0 8px 0; color: var(--cv-muted); font-weight: 400; font-size: 9pt; }

.cv-page .meta { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--cv-muted); font-size: 8.5pt; }
.cv-page .meta span {
  background: var(--neutral-50, #f9fafb);
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--cv-line);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cv-page h2 {
  margin: 6px 0 4mm 0;
  font-size: 11pt;
  font-weight: 600;
  color: var(--cv-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--cv-line);
  padding-bottom: 3px;
}

.cv-page .wrap { display: flex; gap: 6mm; }

.cv-page .side {
  flex: 0 0 60mm;
  background: var(--cv-accent-soft);
  border-radius: 8px;
  padding: 4mm;
  display: flex;
  flex-direction: column;
  gap: 4mm;
}
.cv-page .side section h2 { border-bottom: none; margin-bottom: 2mm; font-size: 10pt; }
.cv-page .side .small { font-size: 8.5pt; color: var(--cv-fg); }

.cv-page .main { flex: 1 1 auto; padding-left: 2mm; }

.cv-page .badge {
  display: inline-block;
  background: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  margin: 2px 4px 0 0;
  color: var(--cv-accent);
  font-size: 8pt;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--cv-accent) 35%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cv-page ul, .cv-page ol { margin: 3px 0 0 15px; padding: 0; }
.cv-page li { margin: 2px 0; }

.cv-page .item { padding: 6px 0; border-bottom: 1px dashed var(--cv-line); }
.cv-page .item:last-child { border-bottom: 0; }

.cv-page .top { display: flex; gap: 8px; align-items: baseline; margin-bottom: 1px; }
.cv-page .role { font-weight: 600; font-size: 9.5pt; }
.cv-page .org { color: var(--cv-muted); font-size: 8.5pt; margin-bottom: 2px; }
.cv-page .period {
  margin-left: auto;
  color: var(--cv-muted);
  font-variant-numeric: tabular-nums;
  font-size: 8.5pt;
  white-space: nowrap;
}

.cv-page .small { color: var(--cv-muted); font-size: 8.5pt; }
.cv-page .no-bullet { list-style: none; padding-left: 0; margin-left: 0; }

.cv-page .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.cv-page .section-tagline {
  font-size: 8pt;
  color: var(--cv-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Boutons — hors feuille, retirés à l'impression */
.cv-page .cv-print {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--cv-line);
  border-radius: 999px;
  background: var(--cv-accent-soft);
  color: var(--cv-fg);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  margin: 20px;
  float: right;
}
.cv-page .cv-print:hover { background: color-mix(in srgb, var(--cv-accent) 18%, #fff); }

.cv-page .btn-center { text-align: center; margin: 20px 0; clear: both; }
.cv-page .btn-link {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--cv-line);
  border-radius: 999px;
  background: var(--neutral-50, #f8fafc);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--cv-fg);
}
.cv-page .btn-link:hover { background: var(--cv-line); }

/* Écrans étroits : la feuille A4 ne tient pas, on empile les deux colonnes.
   Sans ça le bloc latéral à 60mm fixes écrase la colonne des expériences.
   ⚠️ `screen and` est OBLIGATOIRE : une A4 à 10mm de marge fait ~718 px CSS,
   donc sous ce palier. Sans le préfixe, l'impression déclenche la règle mobile,
   les deux colonnes s'empilent et le CV tient sur 2 pages au lieu d'une seule
   (mesuré : 2 pages au PDF, la colonne latérale seule sur la première). */
@media screen and (max-width: 800px) {
  .cv-page .page { width: auto; margin: 1rem; padding: 1.25rem; }
  .cv-page .wrap { flex-direction: column; }
  .cv-page .side { flex: 1 1 auto; }
  .cv-page .main { padding-left: 0; }
  .cv-page .top { flex-wrap: wrap; }
  .cv-page .period { margin-left: 0; }
}

/* Impression / PDF */
@media print {
  .cv-page .cv-print,
  .cv-page .btn-link,
  .site-header,
  .site-footer,
  nav,
  .wp-block-navigation,
  .entry-title { display: none !important; }

  html, body.page-cv { background: #fff !important; }

  .cv-page .page {
    box-shadow: none !important;
    margin: 0 auto !important;
    width: 190mm !important;
    padding: 8mm !important;
  }

  /* Resserrage d'impression. Le CV tient sur 2 pages A4, la seconde ne portant
     que la fin des expériences et les centres d'intérêt — c'était déjà le cas
     dans le classique (mêmes corps de texte). Ces marges réduites regagnent de
     la place sans toucher à l'écran, qui garde l'aération d'origine. Descendre
     à une seule page demanderait de réduire les corps de texte, ce qui se
     heurte à la cascade du thème : à décider avec Benoit si c'est voulu. */
  .cv-page .page > header { margin-bottom: 4mm; padding-bottom: 2.5mm; }
  .cv-page h2 { margin: 4px 0 2.5mm 0; }
  .cv-page .side { gap: 3mm; padding: 3mm; }
  .cv-page .item { padding: 4px 0; }
  .cv-page .wrap { gap: 5mm; }

  .cv-page .page > header,
  .cv-page .item,
  .cv-page .side section,
  .cv-page .page { break-inside: avoid; page-break-inside: avoid; }
}