/* ============================================================
   css/cv.css · le CV en ligne, relié aux preuves (5.4)
   Un CV dit « j'ai fait ça ». Un portfolio le montre. Les deux vivent
   d'habitude dans deux fichiers séparés, et c'est au lecteur de faire
   le rapprochement. Ici chaque ligne vérifiable porte le nom de
   l'étude de cas qui la montre, dans la couleur de ce projet.

   Le PDF reste, en haut de page : un recruteur qui doit joindre un CV
   à un dossier n'a pas envie d'imprimer une page web.
   ============================================================ */
.cv-main{flex:1;max-width:1180px;width:100%;margin:0 auto;
  padding:clamp(104px,15vh,150px) clamp(20px,5vw,64px) clamp(50px,8vh,90px);
  position:relative;z-index:2}
.cv-inner{max-width:min(100%,860px)}

.cv-kicker{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--ink-faint);margin-bottom:16px}
.cv-title{font-family:var(--title-font),serif;font-weight:400;
  font-size:clamp(34px,5.5vw,58px);line-height:1.02;letter-spacing:-.03em;
  color:var(--ink);margin:0}
.cv-title em{font-style:italic;color:var(--cg-accent)}
.cv-lead{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--ink-soft);
  margin:22px 0 0;max-width:60ch;text-wrap:pretty}

/* ---- la barre d'actions ---- */
.cv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  margin-top:clamp(26px,4vh,38px)}
.cv-pdf{display:inline-flex;align-items:center;gap:10px;
  padding:13px 24px;border-radius:999px;
  background:var(--ink);color:var(--cream);text-decoration:none;
  font-size:14.5px;font-weight:500;transition:filter .2s}
.cv-pdf:hover{filter:brightness(1.5)}
.cv-pdf:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.cv-lien{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;
  color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid rgba(28,28,38,.22);padding-bottom:2px;
  transition:color .25s,border-color .25s}
.cv-lien:hover{color:var(--ink);border-color:var(--ink)}
.cv-lien .ar{color:var(--c-accent);transition:transform .25s}
.cv-lien:hover .ar{transform:translate(3px,-3px)}

/* ---- le résumé ---- */
.cv-resume{margin:clamp(34px,5vh,50px) 0 0;padding:22px 24px;
  border-radius:14px;border:1px solid rgba(28,28,38,.12);
  background:rgba(255,255,255,.45);
  font-size:clamp(15px,1.4vw,17px);line-height:1.65;color:var(--ink-soft);
  text-wrap:pretty}

/* ---- les sections ---- */
.cv-sec{margin-top:clamp(40px,6vh,64px)}
.cv-sec > h2{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--ink-faint);margin:0 0 22px;
  padding-bottom:12px;border-bottom:1px solid rgba(28,28,38,.12)}

.cv-poste{margin-bottom:clamp(28px,4vh,40px)}
.cv-poste:last-child{margin-bottom:0}
.cv-tete{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:6px 18px}
.cv-role{font-family:var(--title-font),serif;font-weight:500;
  font-size:clamp(19px,2vw,24px);line-height:1.15;letter-spacing:-.015em;
  color:var(--ink);margin:0}
.cv-org{font-weight:400;color:var(--ink-soft)}
.cv-dates{font-size:13px;color:var(--ink-faint);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cv-scope{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-faint)}

/* ⚠️ Les renvois se posaient au bout de chaque phrase, donc à une
   abscisse différente à chaque ligne : ça faisait désordre là où l'œil
   cherche une colonne. Chaque fait devient une rangée en deux parties,
   le texte à gauche et le renvoi calé à droite, aligné sur les autres. */
.cv-faits{list-style:none;margin:16px 0 0;padding:0}
.cv-faits li{position:relative;padding-left:18px;margin-bottom:12px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;column-gap:18px;
  font-size:clamp(15px,1.35vw,16.5px);line-height:1.6;color:var(--ink-soft);
  text-wrap:pretty}
.cv-faits li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:1px;background:rgba(28,28,38,.34)}

/* ---- la preuve : le nom de l'étude de cas, dans sa couleur ---- */
.cv-preuve{display:inline-flex;align-items:center;gap:6px;
  justify-self:end;margin-top:1px;
  padding:2px 10px;border-radius:999px;white-space:nowrap;
  font-size:12px;line-height:1.5;text-decoration:none;
  color:var(--pci,var(--ink-soft));
  border:1px solid color-mix(in srgb,var(--pc,currentColor) 30%,transparent);
  background:color-mix(in srgb,var(--pc,currentColor) 7%,transparent);
  transition:background .2s,border-color .2s}
.cv-preuve:hover{border-color:color-mix(in srgb,var(--pc,currentColor) 60%,transparent);
  background:color-mix(in srgb,var(--pc,currentColor) 14%,transparent)}
.cv-preuve:focus-visible{outline:2px solid var(--pc,var(--c-accent));outline-offset:2px}
.cv-preuve .ar{transition:transform .25s}
.cv-preuve:hover .ar{transform:translate(2px,-2px)}

/* ---- compétences et formation, en deux colonnes ---- */
.cv-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px 36px}
.cv-bloc h3{font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--ink);margin:0 0 7px}
.cv-bloc p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.cv-form{display:flex;flex-direction:column;gap:16px}
.cv-form div{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:4px 18px}
.cv-form b{font-weight:500;color:var(--ink);font-size:15px}
.cv-form span{font-size:13px;color:var(--ink-faint);white-space:nowrap}
.cv-form em{display:block;width:100%;font-style:normal;
  font-size:13.5px;color:var(--ink-soft)}

@media (max-width:720px){
  .cv-tete{flex-direction:column;align-items:flex-start;gap:3px}
  /* trop étroit pour deux colonnes : le renvoi passe sous sa phrase */
  .cv-faits li{grid-template-columns:minmax(0,1fr);row-gap:7px}
  .cv-preuve{justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .cv-preuve .ar,.cv-lien .ar{transition:none}
}

/* À l'impression, la page redevient un CV : les preuves gardent leur
   nom mais perdent leur pastille, qui ne veut plus rien dire sur du
   papier où l'on ne clique pas. */
@media print{
  .cv-main{padding:0}
  .cv-actions,.cv-pdf,.cv-lien{display:none!important}
  .cv-preuve{border:0!important;background:none!important;padding:0!important;
    margin-left:6px;color:var(--ink-faint)!important}
  .cv-preuve .ar{display:none}
  .cv-poste,.cv-bloc{break-inside:avoid}
}