/* ============================================================================
   CV — feuille dédiée.

   La feuille du CV est BLANCHE : ce même document sert l'écran ET
   l'impression A4. Posée sur le fond blanc cassé du site, elle se détache par
   un filet et une ombre très douce, comme un document sur un bureau.

   Cette feuille définit donc sa PROPRE palette claire, indépendante des
   jetons du site : elle doit rester juste même si l'identité du site change
   de nouveau.
   ========================================================================= */

.feuille {
  /* Palette locale — papier et encre. Contrastes vérifiés sur fond blanc. */
  --p-encre:   #14181D;   /* 15,9:1 */
  --p-encre-2: #3C444E;   /* 9,2:1  — texte courant */
  --p-mut:     #656D78;   /* 5,3:1  — intitulés, mentions */
  --p-filet:   rgba(20, 24, 29, 0.14);
  --p-filet-2: rgba(20, 24, 29, 0.3);
  --p-creux:   #EEF0F2;
  --p-signal:  #1B3A6B;   /* l'accent bleu nuit du site — 11:1 sur blanc */
}

.cv-page {
  max-width: 1060px;
  margin: clamp(22px, 4vw, 48px) auto clamp(40px, 6vw, 80px);
  padding-inline: clamp(16px, 3vw, 32px);
}

/* La barre d'actions ne s'imprime pas — et n'existe pas sans JavaScript :
   le bouton appelle window.print(), donc sans script il ne ferait rien.
   Un bouton mort est pire qu'un bouton absent (Ctrl+P marche de toute façon). */
html:not(.js) .cv-actions { display: none; }

.cv-actions {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.cv-actions p {
  margin: 0;
  font-size: var(--t-petit);
  color: var(--mut);
  max-width: 46ch;
}

.feuille {
  background: #fff;
  color: var(--p-encre);
  border: 1px solid #E4E2DB;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 23, 28, 0.04), 0 12px 40px rgba(20, 23, 28, 0.08);
  padding: clamp(24px, 3.6vw, 48px);
}
.feuille a { color: var(--p-encre-2); text-decoration-color: var(--p-filet-2); }
.feuille a:hover { color: var(--p-signal); text-decoration-color: currentColor; }
.feuille ::selection { background: var(--p-signal); color: #fff; }

/* ------------------------------------------------------------------ EN-TÊTE */

/* L'en-tête passe en grille pour loger la photo : la photo à droite, le nom
   et les coordonnées à gauche. En grille plutôt qu'en flottant, sinon la
   photo déborde du filet inférieur à l'impression. */
.cv-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px;
  align-items: start;
  border-bottom: 2px solid var(--p-encre);
  padding-bottom: 17px; margin-bottom: 24px;
}
.cv-tete > :not(.cv-photo) { grid-column: 1; }
.cv-photo {
  grid-column: 2; grid-row: 1 / span 3;
  width: 84px; height: 84px;
  object-fit: cover; border-radius: 10px;
  align-self: center;
}
@media (max-width: 480px) { .cv-photo { width: 62px; height: 62px; } }
@media print { .cv-photo { width: 21mm; height: 21mm; } }
.cv-tete h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.8vw, 3.1rem);
  font-weight: 400; letter-spacing: -0.015em; line-height: 1;
  margin-bottom: 7px;
  color: var(--p-encre);
}
.cv-role {
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--p-signal);
  margin-bottom: 13px;
}
.cv-lignes {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 0.875rem; color: var(--p-encre-2); margin: 0; max-width: none;
}
.cv-lignes span { display: inline-flex; align-items: center; gap: 7px; }
.cv-lignes span + span::before {
  content: ""; width: 3px; height: 3px;
  background: var(--p-filet-2); border-radius: 50%; margin-right: 4px;
}

.cv-resume {
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--p-encre-2); max-width: none; margin-bottom: 26px;
}
.cv-resume b { color: var(--p-encre); font-weight: 600; }

/* ------------------------------------------------------------------ CORPS   */

.cv-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 216px;
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 820px) { .cv-corps { grid-template-columns: 1fr; gap: 26px; } }

.cv-h2 {
  font-family: var(--texte);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--p-encre);
  padding-bottom: 7px; margin: 0 0 16px;
  border-bottom: 1px solid var(--p-filet-2);
}
.cv-h2:not(:first-child) { margin-top: 26px; }

/* ⚠️ padding-block: 0 est OBLIGATOIRE. site.css pose
   « section { padding-block: clamp(64px, 10vw, 140px) } » pour les sections
   de la page d'accueil, et .cv-bloc est justement un <section> : sans cette
   remise à zéro, chaque bloc du CV hérite de 140 px de marge haute et basse,
   le document s'étire sur quatre pages A4 et se lit comme une mise en page
   ratée. Le défaut ne remonte ni en erreur ni en débordement. */
.cv-bloc { padding-block: 0; margin-bottom: 18px; break-inside: avoid; }
.cv-bloc:last-child { margin-bottom: 0; }

/* Grille et non flex-wrap : en flex, un intitulé long fait passer la date à
   la ligne suivante où margin-left:auto la colle à droite, toute seule. En
   grille la date garde sa colonne et l'intitulé s'enroule dans la sienne. */
.cv-bloc-tete {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px; align-items: baseline; margin-bottom: 4px;
}
.cv-bloc h3 {
  font-family: var(--texte);
  font-size: 1rem; font-weight: 700; letter-spacing: -0.004em;
  line-height: 1.3; margin: 0; color: var(--p-encre);
}
.cv-bloc time { font-size: var(--t-petit); color: var(--p-signal); font-weight: 600; white-space: nowrap; }
@media (max-width: 520px) {
  .cv-bloc-tete { grid-template-columns: 1fr; }
}

.cv-ou { font-size: 0.875rem; color: var(--p-encre-2); font-weight: 500; margin: 0 0 8px; max-width: none; }
.cv-ou em { font-style: normal; font-weight: 400; color: var(--p-mut); }

.cv-bloc ul { margin: 0; padding: 0; list-style: none; }
.cv-bloc li {
  position: relative; padding-left: 15px; margin-bottom: 5px;
  font-size: 0.875rem; line-height: 1.5; color: var(--p-encre-2);
}
.cv-bloc li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 1px; background: var(--p-signal);
}

/* ------------------------------------------------------------- COLONNE      */

.cv-cote { font-size: 0.875rem; }
.cv-groupe { margin-bottom: 15px; break-inside: avoid; }
.cv-groupe b { display: block; font-size: 0.8125rem; font-weight: 700; margin-bottom: 6px; color: var(--p-encre); }
.cv-groupe ul { margin: 0; padding: 0; list-style: none; }
.cv-groupe li { font-size: 0.8125rem; line-height: 1.5; color: var(--p-encre-2); padding-left: 0; }

/* Langues : le niveau est dit EN TOUTES LETTRES, la jauge n'est qu'un appui.
   Une jauge seule ne se lit pas à l'impression en noir et blanc. */
.cv-langue {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2px 10px; align-items: baseline; margin-bottom: 9px;
}
.cv-langue b { margin: 0; font-size: 0.875rem; color: var(--p-encre); }
.cv-langue i { font-style: normal; font-size: var(--t-micro); color: var(--p-mut); }
.cv-jauge { grid-column: 1 / -1; height: 3px; background: var(--p-creux); border-radius: 2px; }
.cv-jauge span { display: block; height: 100%; background: var(--p-signal); border-radius: 2px; }

/* ------------------------------------------------------------- IMPRESSION   */

@page { size: A4; margin: 13mm 14mm; }

@media print {
  html { scroll-behavior: auto; }
  body {
    background: #fff !important; color: #000;
    font-size: 9.6pt; line-height: 1.42;
  }
  body::after { display: none !important; }
  .barre, .pied, .cv-actions, .evite { display: none !important; }

  .cv-page { margin: 0; padding: 0; max-width: none; }
  .feuille { border: 0; border-radius: 0; box-shadow: none; padding: 0; }

  .cv-tete h1 { font-size: 21pt; }
  .cv-role { font-size: 8pt; color: #000; }
  .cv-lignes { font-size: 8.2pt; }
  .cv-resume { font-size: 8.8pt; line-height: 1.45; margin-bottom: 12pt; }

  .cv-corps { grid-template-columns: 1fr 52mm; gap: 9mm; }
  .cv-h2 { font-size: 7.6pt; margin-bottom: 7pt; }
  .cv-h2:not(:first-child) { margin-top: 12pt; }
  .cv-bloc { margin-bottom: 8pt; }
  .cv-bloc h3 { font-size: 9.6pt; }
  .cv-bloc time { font-size: 8pt; color: #000; }
  .cv-ou { font-size: 8.6pt; }
  .cv-bloc li { font-size: 8.5pt; margin-bottom: 2pt; line-height: 1.38; }
  .cv-groupe li, .cv-langue b { font-size: 8.2pt; }

  /* En noir et blanc, une couleur devient un gris : on garde un repère
     visible plutôt qu'un trait qui disparaît. */
  .cv-bloc li::before, .cv-jauge span { background: #555; }
  .cv-jauge { background: #ddd; }

  a { color: #000; text-decoration: none; }
}