/* Feuille du CV fancy (#/fr/cv/fancy). Une référence : la couverture des
   Typographische Monatsblätter de décembre 1955 par Emil Ruder. Un aplat,
   une encre, des carrés pleins reliés par des filets d'un pixel, beaucoup
   de vide.

   Les couleurs sont des paires fond/encre que le lecteur choisit
   (composant cv-palettes), indépendantes du thème clair/sombre du reste du
   site ; la barre du site les reprend sur cette page seulement. Tout ce qui
   est propre à cette feuille se porte sur .cv ou sur html.page-cv, pour que
   le blog, l'accueil et la vitrine n'en héritent rien. Le CV public
   (#/fr/cv) a sa propre feuille, css/vitrine.css. */

:root {
  --cv-fond:  #f5c543;
  --cv-encre: #141414;
}

:root[data-cv-palette="bleu"]   { --cv-fond: #2f55d4; --cv-encre: #f4f1ea; }
:root[data-cv-palette="orange"] { --cv-fond: #e8702a; --cv-encre: #141414; }
:root[data-cv-palette="noir"]   { --cv-fond: #141414; --cv-encre: #f5c543; }
:root[data-cv-palette="papier"] { --cv-fond: #f4f1ea; --cv-encre: #141414; }

/* --- La page entière prend la feuille, en-tête compris ------------------- */

html.page-cv {
  --barre-fond:  var(--cv-fond);
  --barre-encre: var(--cv-encre);
}

html.page-cv .entete {
  border-bottom: 0;
}

html.page-cv body {
  background: var(--cv-fond);
  color: var(--cv-encre);
}

/* Le nom est déjà en grand sur la feuille : la barre ne le répète pas. */
html.page-cv .titre-site {
  visibility: hidden;
}

html.page-cv .contenu {
  max-width: none;
  padding-top: 2.5rem;
}

/* --- La feuille --------------------------------------------------------- */

.cv {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 1.5rem;
  grid-template-areas:
    "identite  parcours marge"
    "formation parcours marge"
    "outils    outils   marge"
    "contact   contact  marge";
  grid-template-rows: auto 1fr auto auto;
  column-gap: 4rem;
  row-gap: 4.5rem;
  font-family: var(--sans);
  color: var(--cv-encre);
  min-height: 80vh;
}

/* :where() pour que la remise à zéro pèse moins que les classes qui posent
   les marges plus bas. */
.cv :where(h1, h2, p, ul, ol) {
  margin: 0;
  color: inherit;
}

.cv :where(ul, ol) {
  list-style: none;
  padding: 0;
}

.cv :where(li + li) {
  margin-top: 0;
}

/* Un titre de section : le carré, le numéro de feuille, le libellé. */
.cv h2 {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  line-height: 1;
  margin-bottom: 2.2rem;
}

/* --- 01, identité ------------------------------------------------------- */

.cv-identite {
  grid-area: identite;
}

.cv-identite .repere {
  margin-bottom: 2.4rem;
}

.cv h1 {
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin-bottom: 0.9rem;
}

.cv-role {
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  margin-bottom: 0.5rem;
}

.cv-lieu {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}

.cv-resume {
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Le choix de la paire fond/encre : un carré par palette, dans ses couleurs,
   en colonne fixée à gauche de la page. Sur téléphone, en rangée au-dessus. */
.cv-palettes {
  position: fixed;
  left: 1.5rem;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

html.page-cv .contenu {
  padding-left: 3rem;
}

.cv-palette {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 1px solid var(--cv-encre);
  border-radius: 0;
  cursor: pointer;
  background: var(--fond-palette);
  box-shadow: inset 0 0 0 2px var(--cv-fond);
}

.cv-palette[aria-checked="true"] {
  box-shadow: inset 0 0 0 2px var(--cv-fond), inset 0 0 0 5px var(--cv-encre);
}

.cv-palette-jaune  { --fond-palette: #f5c543; }
.cv-palette-bleu   { --fond-palette: #2f55d4; }
.cv-palette-orange { --fond-palette: #e8702a; }
.cv-palette-noir   { --fond-palette: #141414; }
.cv-palette-papier { --fond-palette: #f4f1ea; }

/* --- 02, parcours : un axe vertical, un carré par étape ------------------ */

.cv-parcours {
  grid-area: parcours;
}

/* Le filet passe par le centre des carrés : celui du titre, à carre/2 du
   bord, et ceux des étapes, décalés d'autant vers la gauche. */
.cv-axe {
  margin-left: calc(var(--carre) / 2 - 0.5px);
  border-left: 1px solid var(--cv-encre);
  padding-bottom: 1rem;
}

.cv-etape {
  position: relative;
  padding-left: 2rem;
}

.cv-etape + .cv-etape {
  margin-top: 3rem;
}

.cv-etape > .carre {
  position: absolute;
  left: calc(var(--carre) / -2 - 0.5px);
  top: 0.2em;
}

.cv-date {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
}

.cv a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.cv-org {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.15rem;
}

.cv-poste {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.cv-mission {
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 48ch;
}

/* La pile se détache du paragraphe : un filet court au-dessus, une encre atténuée. */
.cv-pile {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.cv-pile::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  margin-bottom: 0.5rem;
  background: var(--cv-encre);
}

/* --- 04, outils : une colonne par famille, séparée par un filet ---------- */

.cv-outils {
  grid-area: outils;
}

.cv-familles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 2.4rem 1.5rem;
}

.cv-famille {
  border-left: 1px solid var(--cv-encre);
  padding-left: 1.1rem;
}

.cv-famille-nom {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.9rem;
}

.cv-famille li {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  line-height: 1.75;
}

/* --- 05, contact : les liens, sans mail ni téléphone --------------------- */

.cv-contact {
  grid-area: contact;
}

.cv-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* --- 03, formation ------------------------------------------------------ */

.cv-formation {
  grid-area: formation;
}

.cv-formation .cv-axe {
  padding-bottom: 0;
}

.cv-formation .cv-etape + .cv-etape {
  margin-top: 1.6rem;
}

/* --- La marge : une ligne de texte tournée, comme sur la couverture ------ */

/* Collée à la fenêtre : la marge suit le défilement sur toute la feuille. */
.cv-marge {
  grid-area: marge;
  position: sticky;
  top: 1.5rem;
  align-self: start;
  height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1rem;
}

.cv-marge p {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Fenêtre trop basse pour la ligne entière : la marge reprend sa place dans
   le flux plutôt que d'être rognée en haut. */
@media (max-height: 640px) {
  .cv-marge {
    position: static;
    height: auto;
  }
}

@media (max-width: 800px) {
  .cv {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identite"
      "parcours"
      "formation"
      "outils"
      "contact";
    grid-template-rows: auto;
    row-gap: 3.5rem;
  }

  .cv-marge {
    display: none;
  }

  .cv-palettes {
    position: static;
    flex-direction: row;
    margin-bottom: 2rem;
  }

  html.page-cv .contenu {
    padding-left: 0;
  }

  html.page-cv .contenu {
    padding-top: 1rem;
  }
}