/* Feuille de style unique du site. Thème sombre, sans JavaScript.
   Plan : 1. couleurs  2. base  3. en-tête et menu  4. texte courant
          5. accueil  6. panneaux et titres de section  7. cartes et étiquettes
          8. frises  9. listes de pages  10. pied de page
          11. impression, petits écrans, animations  12. CV */

/* 1. Couleurs — modifier ici pour changer l'apparence du site. */
:root {
  --fond: #0a0f14;
  --fond-bloc: #0f161e;
  --fond-creux: #070b0f;
  --texte: #dbe4ee;
  --texte-discret: #8696a8;
  --trait: #1d2935;
  --accent: #2ab7b2;        /* teal clair : textes, liens, traits */
  --accent-fort: #008080;   /* teal : boutons et aplats */
  --accent-sombre: #0b2626;
  --en-cours: #e0a84a;      /* ambre : ce qui est en cours de mise en place */
  --largeur: 72rem;
  --mono: "Cascadia Code", "Cascadia Mono", ui-monospace, Consolas, "DejaVu Sans Mono", monospace;
}

/* 2. Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background: var(--fond);
}

/* Fond : un quadrillage discret et une lueur en haut de page. */
body {
  margin: 0 auto;
  padding: 0 1.25rem;
  max-width: var(--largeur);
  background-image:
    radial-gradient(60rem 28rem at 70% -6rem, rgb(42 183 178 / 0.09), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.025) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
  background-repeat: no-repeat, repeat, repeat;
  color: var(--texte);
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

/* Lien "Aller au contenu" : invisible sauf au clavier. */
.evitement {
  position: absolute;
  left: -100rem;
}

.evitement:focus {
  left: 1rem;
  top: 1rem;
  z-index: 1;
  padding: 0.5rem 0.75rem;
  background: var(--fond-bloc);
}

/* 3. En-tête et menu */
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  background: var(--fond-bloc);
  border: 1px solid var(--trait);
  border-radius: 12px;
  font-family: var(--mono);
}

.nom {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--texte);
  font-weight: 700;
  text-decoration: none;
}

.entete nav {
  flex: 1;
}

/* Le menu est numéroté automatiquement : 01. 02. 03. */
.entete ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: menu;
  font-size: 0.85rem;
}

.entete nav a {
  display: block;
  padding: 0.3rem 0.6rem;
  border-bottom: 2px solid transparent;
  color: var(--texte-discret);
  text-decoration: none;
}

.entete nav a::before {
  counter-increment: menu;
  content: counter(menu, decimal-leading-zero) ". ";
  color: var(--accent);
}

.entete nav a:hover,
.entete nav a[aria-current] {
  color: var(--texte);
}

.entete nav a[aria-current] {
  border-bottom-color: var(--accent);
}

/* 4. Texte courant */
main {
  padding: 2.5rem 0 3rem;
}

h1,
h2,
h3 {
  font-family: var(--mono);
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  margin: 0 0 0.75rem;
  font-size: 2.1rem;
}

h1::before {
  content: "> ";
  color: var(--accent);
}

h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.3rem;
}

h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.05rem;
}

.titre-page {
  margin-bottom: 1rem;
}

/* Les paragraphes restent étroits pour rester lisibles, même sur un grand écran. */
.texte {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

code,
pre {
  font-family: var(--mono);
  font-size: 0.9em;
}

code {
  padding: 0.1em 0.3em;
  background: var(--accent-sombre);
  border-radius: 3px;
}

pre {
  padding: 1rem;
  overflow-x: auto;
  background: var(--fond-creux);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}

pre code {
  padding: 0;
  background: none;
}

blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--trait);
  color: var(--texte-discret);
}

table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th,
td {
  padding: 0.45rem 0.9rem 0.45rem 0;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* 5. Accueil */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 2.5rem;
  padding: 1.5rem 0 2.5rem;
}

.surtitre {
  margin: 0 0 1rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.surtitre span {
  color: var(--texte-discret);
}

.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.5rem);
  letter-spacing: -0.02em;
}

.hero-texte > p {
  max-width: 32rem;
  font-size: 1.15rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}

.bouton {
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--accent-fort);
  border-radius: 6px;
  background: var(--accent-fort);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.bouton.secondaire {
  border-color: var(--accent);
  background: none;
  color: var(--accent);
}

.bouton.petit {
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
}

.bouton:hover {
  box-shadow: 0 0 0 3px rgb(42 183 178 / 0.25);
}

/* Ligne "En ce moment", précédée d'un voyant. */
.hero-texte > .statut {
  margin: 1.5rem 0 0;
  color: var(--texte-discret);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.statut::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(42 183 178 / 0.2);
}

/* Fenêtre de terminal. Son contenu vient de la liste "terminal" de content/_index.md. */
.terminal {
  background: var(--fond-creux);
  border: 1px solid var(--trait);
  border-radius: 12px;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.5), 0 0 0 1px rgb(42 183 178 / 0.08);
  font-family: var(--mono);
  font-size: 0.9rem;
}

.terminal-barre {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--trait);
  color: var(--texte-discret);
  font-size: 0.8rem;
}

.terminal-barre span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--trait);
}

.terminal-barre span:last-of-type {
  margin-right: 0.6rem;
}

.terminal-corps {
  padding: 1rem 1.1rem 1.25rem;
}

.terminal-corps p {
  margin: 0;
  white-space: pre-wrap;
}

.t-commande {
  color: var(--accent);
}

.t-commande:not(:first-child) {
  margin-top: 0.7rem;
}

.t-commande::before {
  content: "$ ";
  color: var(--texte-discret);
}

.t-sortie {
  padding-left: 1.2rem;
}

/* Curseur clignotant sur la dernière ligne. */
.t-curseur::after {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 1.1rem;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: clignote 1.1s steps(1) infinite;
}

@keyframes clignote {
  50% {
    opacity: 0;
  }
}

/* Bandeau des domaines, numéroté automatiquement. */
.domaines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem 1rem;
  margin: 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--trait);
  list-style: none;
  counter-reset: domaine;
}

.domaines li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.domaines p {
  margin: 0;
  color: var(--texte-discret);
  font-size: 0.85rem;
  line-height: 1.45;
}

.domaines p::before {
  counter-increment: domaine;
  content: counter(domaine, decimal-leading-zero);
  display: block;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.domaines strong {
  display: block;
  color: var(--texte);
  font-family: var(--mono);
  font-size: 0.9rem;
}

/* 6. Panneaux et titres de section. Les sections sont numérotées automatiquement. */
main {
  counter-reset: section;
}

.panneau {
  margin-top: 1.25rem;
  padding: 1.5rem;
  background: var(--fond-bloc);
  border: 1px solid var(--trait);
  border-radius: 12px;
}

.section-tete {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.section-tete h2 {
  margin: 0;
}

.section-tete h2::before {
  counter-increment: section;
  content: counter(section, decimal-leading-zero) ". ";
  color: var(--accent);
  font-size: 0.85em;
}

/* Trait qui prolonge le titre jusqu'au lien de droite. */
.section-tete::after {
  content: "";
  flex: 1;
  order: 1;
  border-top: 1px solid var(--trait);
  transform: translateY(-0.3em);
}

.section-tete a {
  order: 2;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-decoration: none;
}

.section-tete a::after {
  content: " →";
}

.section-tete a:hover {
  text-decoration: underline;
}

/* 7. Cartes et étiquettes */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
}

/* Cartes empilées par colonnes, chacune à sa hauteur : pas de vide sous les plus courtes. */
.empilees {
  columns: 4 14rem;
  column-gap: 0.9rem;
}

.empilees > .carte {
  margin-bottom: 0.9rem;
  break-inside: avoid;
}

.sans-puce {
  list-style: none;
}

.carte {
  padding: 1rem 1.1rem;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 10px;
}

/* Hors d'un panneau, les cartes prennent la couleur des panneaux. */
main > .grille > .carte,
main > .grille > li > .carte {
  background: var(--fond-bloc);
}

.carte-tete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.carte-titre {
  display: block;
  margin: 0;
  color: var(--texte);
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

h3.carte-titre {
  margin-bottom: 0.8rem;
}

.carte-tete .carte-titre {
  margin: 0;
}

.carte-detail {
  display: block;
  margin: 0.3rem 0 0;
  color: var(--texte-discret);
  font-size: 0.9rem;
}

/* Carte entièrement cliquable (contact). */
.carte-lien {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}

.carte-lien:hover {
  border-color: var(--accent);
}

.icone {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.45rem;
  border: 1px solid rgb(42 183 178 / 0.25);
  border-radius: 8px;
  background: var(--accent-sombre);
  color: var(--accent);
}

.nom .icone {
  width: 2rem;
  height: 2rem;
  padding: 0.3rem;
}

/* Bloc "Ce qui m'intéresse" de l'accueil : un libellé teal, une phrase. */
.panneau > .brouillon {
  margin: 0 0 1.25rem;
}

.interets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem 2rem;
  margin: 0;
}

.interets dt {
  margin-bottom: 0.2rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.interets dd {
  margin: 0;
}

/* Tuiles : une icône et un nom, pour le résumé du homelab sur l'accueil. */
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tuiles li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.85rem;
}

.tuiles .icone {
  width: 2rem;
  height: 2rem;
  padding: 0.35rem;
}

/* Variante où chaque tuile est un lien (sommaire de la page Compétences). */
.tuiles.liens {
  margin-bottom: 0.25rem;
}

.tuiles.liens li {
  padding: 0;
}

.tuiles.liens a {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  color: var(--texte);
  text-decoration: none;
}

.tuiles.liens li:hover {
  border-color: var(--accent);
}

/* Page Compétences : les domaines sur deux colonnes quand l'écran le permet. */
.domaines-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 0 1.25rem;
}

/* Le menu reste visible en haut : un domaine atteint par son lien ne se cache pas dessous. */
.domaines-grille .panneau {
  scroll-margin-top: 1rem;
}

.domaine-texte {
  margin: -0.5rem 0 1rem;
  color: var(--texte-discret);
}

/* Étiquettes : noms d'outils et de technologies. */
.puces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.puces li {
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 0.8rem;
  background: var(--fond-bloc);
  color: var(--texte);
  font-family: var(--mono);
  font-size: 0.78rem;
}

/* Pastille de contexte devant une étiquette ou une ligne de légende :
   pleine = en entreprise, creuse = au homelab, cerclée = les deux,
   ambre en pointillés = en cours de mise en place. */
.c-entreprise::before,
.c-homelab::before,
.c-deux::before,
.c-cours::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}

.c-entreprise::before {
  background: var(--accent);
}

.c-deux::before {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--fond-bloc), 0 0 0 3.5px var(--accent);
  margin-right: 0.6rem;
  margin-left: 0.15rem;
}

.c-cours::before {
  border: 1.5px dashed var(--en-cours);
}

.puces .c-cours {
  border-style: dashed;
  border-color: var(--en-cours);
}

/* Point fort : étiquette pleine, mise en avant. */
.puces .fort {
  border-color: var(--accent);
  background: var(--accent-sombre);
  font-weight: 700;
}

.c-fort::before {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: 0.6rem;
  margin-right: 0.45rem;
  border: 1.5px solid var(--accent);
  border-radius: 0.3rem;
  background: var(--accent-sombre);
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: -0.5rem 0 1.25rem;
  padding: 0;
  list-style: none;
  color: var(--texte-discret);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.date {
  margin: 0 0 0.3rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
}

/* 8. Frises */

/* Frise horizontale de l'accueil : une année par colonne, reliées par un trait. */
.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.reperes li {
  position: relative;
  padding: 1.25rem 1rem 0.75rem 0;
  border-top: 2px solid var(--trait);
  color: var(--texte-discret);
  font-size: 0.9rem;
  line-height: 1.4;
}

.reperes li::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--fond-bloc);
}

.reperes li:last-child::before {
  background: var(--accent);
}

.reperes-annee {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--texte);
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
}

/* Frise verticale du parcours : un point par poste, relié par un trait. */
.frise {
  margin: 0 0 0 0.4rem;
  padding: 0 0 0 1.75rem;
  border-left: 2px solid var(--trait);
  list-style: none;
}

.frise > li {
  position: relative;
  padding-bottom: 1.5rem;
}

.frise > li:last-child {
  padding-bottom: 0;
}

.frise > li::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: calc(-1.75rem - 8px);
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--fond-bloc);
}

/* Le poste actuel a un point plein. */
.frise > li:first-child::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(42 183 178 / 0.2);
}

/* Intitulé du poste à gauche, période à droite. */
.frise-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1.5rem;
}

.frise h3 {
  margin: 0;
  font-size: 1.05rem;
}

.frise p {
  margin: 0;
}

/* Les faits d'un poste : des puces carrées, sur deux colonnes. */
.faits {
  margin: 0.4rem 0 0;
  padding: 0;
  columns: 2 20rem;
  column-gap: 2.5rem;
  list-style: none;
  color: var(--texte-discret);
}

.faits li {
  position: relative;
  padding-left: 1rem;
  break-inside: avoid;
}

.faits li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 0.35em;
  height: 0.35em;
  background: var(--accent);
}

/* 9. Listes de pages, dates et états */
.liste {
  margin: 0;
  padding: 0;
  max-width: 46rem;
  list-style: none;
}

.liste li {
  padding: 1rem 0;
  border-top: 1px solid var(--trait);
}

.liste li:first-child {
  padding-top: 0;
  border-top: 0;
}

.liste p {
  margin: 0.25rem 0 0;
}

.titre-lien {
  font-family: var(--mono);
  font-weight: 700;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0.25rem 0 0;
  color: var(--texte-discret);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.etat {
  padding: 0 0.4rem;
  border: 1px solid var(--trait);
  border-radius: 3px;
}

.brouillon {
  margin: 1rem 0 0;
  padding: 0.5rem 0.75rem;
  max-width: 44rem;
  background: var(--accent-sombre);
  border-left: 3px solid var(--accent);
  font-size: 0.95rem;
}

/* 10. Pied de page */
.pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 1.25rem 0 2.5rem;
  border-top: 1px solid var(--trait);
  color: var(--texte-discret);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.pied p {
  margin: 0;
}

.pied ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 11. Impression : noir sur blanc, sans menu, sans fond ni terminal. */
@media print {
  :root {
    --fond: #ffffff;
    --fond-bloc: #ffffff;
    --fond-creux: #ffffff;
    --texte: #000000;
    --texte-discret: #333333;
    --trait: #999999;
    --accent: #000000;
    --accent-sombre: #ffffff;
  }

  html {
    color-scheme: light;
  }

  body {
    max-width: none;
    background-image: none;
    font-size: 11pt;
  }

  .entete nav,
  .entete .bouton,
  .pied,
  .evitement,
  .terminal,
  .actions {
    display: none;
  }

  .entete,
  .panneau {
    padding: 0;
    border: 0;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  .carte,
  .frise li {
    break-inside: avoid;
  }
}

/* Petits écrans : l'accueil passe sur une colonne. */
@media (max-width: 52rem) {
  /* Le nom et le bouton restent sur la première ligne, le menu passe dessous. */
  .entete {
    justify-content: space-between;
  }

  .entete nav {
    flex-basis: 100%;
    order: 1;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 0.5rem;
  }

  .panneau {
    padding: 1.1rem;
  }
}

/* Pas d'animation pour les lecteurs qui l'ont désactivée dans leur système. */
@media (prefers-reduced-motion: reduce) {
  .t-curseur::after {
    animation: none;
  }
}

/* 12. CV (layouts/cv.html).
   À l'écran : la charte sombre du site. À l'impression et dans le PDF : un bandeau
   sombre en tête, puis un corps clair qui reste lisible une fois imprimé. */
.cv-actions {
  margin: 0 0 1.25rem;
}

.cv {
  --cv-texte: var(--texte);
  --cv-discret: var(--texte-discret);
  --cv-trait: var(--trait);
  --cv-accent: var(--accent);
  --cv-bloc: var(--fond);
  padding: 1.75rem;
  background: var(--fond-bloc);
  border: 1px solid var(--cv-trait);
  border-radius: 12px;
  color: var(--cv-texte);
  font-size: 0.95rem;
  line-height: 1.45;
}

.cv p {
  margin: 0;
}

.cv ul,
.cv ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv a {
  color: inherit;
  text-decoration: none;
}

.cv h1 {
  margin: 0;
  font-size: 2.3em;
}

/* Titres de rubrique : une marque teal, puis un trait jusqu'au bord. */
.cv h2 {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 1.5em 0 0.8em;
  color: var(--cv-texte);
  font-size: 1em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cv h2::before {
  content: "//";
  color: var(--cv-accent);
}

.cv h2::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--cv-trait);
}

.cv h3 {
  margin: 0;
  font-size: 1.05em;
}

.cv-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-bottom: 0.9em;
  border-bottom: 2px solid var(--cv-accent);
}

.cv-metier {
  color: var(--cv-accent);
  font-family: var(--mono);
  font-size: 1.15em;
}

/* Le lieu, à la suite du métier sur la même ligne. */
.cv-lieu {
  color: var(--cv-discret);
  font-size: 0.85em;
  white-space: nowrap;
}

.cv-contact {
  color: var(--cv-discret);
  font-family: var(--mono);
  font-size: 0.85em;
  text-align: right;
}

/* L'objectif, mis en avant par un filet teal. */
.cv-objectif {
  margin-top: 1.1em;
  padding: 0.6em 0.9em;
  border-left: 3px solid var(--cv-accent);
  background: var(--cv-bloc);
}

/* Expérience : une frise, un point par poste. */
.cv-frise {
  margin-left: 0.35em;
  padding-left: 1.3em;
  border-left: 2px solid var(--cv-trait);
}

.cv-frise > li {
  position: relative;
  padding-bottom: 0.9em;
  break-inside: avoid;
}

.cv-frise > li:last-child {
  padding-bottom: 0;
}

.cv-frise > li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: calc(-1.3em - 6px);
  width: 10px;
  height: 10px;
  border: 2px solid var(--cv-accent);
  border-radius: 50%;
  background: var(--cv-bloc);
}

.cv-frise > li:first-child::before {
  background: var(--cv-accent);
}

/* Intitulé du poste à gauche, période à droite. */
.cv-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1em;
}

.cv-date {
  color: var(--cv-accent);
  font-family: var(--mono);
  font-size: 0.82em;
  white-space: nowrap;
}

/* Les puces d'un poste se répartissent sur deux colonnes. */
.cv-faits {
  margin-top: 0.25em;
  columns: 2;
  column-gap: 2.5em;
  color: var(--cv-discret);
}

.cv-faits li {
  position: relative;
  padding-left: 0.95em;
  break-inside: avoid;
}

.cv-faits li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 0.35em;
  height: 0.35em;
  background: var(--cv-accent);
}

/* Formations : une rangée de cartes. */
.cv .cv-formations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.7em;
}

.cv-formations li {
  padding: 0.5em 0.7em;
  border: 1px solid var(--cv-trait);
  border-left: 3px solid var(--cv-accent);
  border-radius: 4px;
  background: var(--cv-bloc);
  break-inside: avoid;
}

.cv-formations strong,
.cv-formations span {
  display: block;
}

.cv-formations span:last-child {
  color: var(--cv-discret);
}

/* Compétences : une carte par domaine. Les cartes s'empilent par colonnes,
   chacune à sa hauteur, sans laisser de vide sous les plus courtes. */
.cv-domaines {
  columns: 4 13rem;
  column-gap: 0.7em;
}

.cv-domaine {
  margin-bottom: 0.7em;
  padding: 0.65em 0.75em;
  border: 1px solid var(--cv-trait);
  border-radius: 6px;
  background: var(--cv-bloc);
  break-inside: avoid;
}

.cv-domaine-tete {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-bottom: 0.45em;
}

.cv-domaine .icone {
  width: 1.9em;
  height: 1.9em;
  padding: 0.3em;
}

.cv-domaine h3 {
  font-size: 0.95em;
}

.cv-outils {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

.cv-outils li {
  padding: 0.05em 0.5em;
  border: 1px solid var(--cv-trait);
  border-radius: 0.7em;
  color: var(--cv-discret);
  font-size: 0.86em;
}

@page {
  size: A4;
  margin: 7mm 8mm;
}

@media print {
  .page-cv .entete,
  .cv-actions {
    display: none;
  }

  .page-cv main {
    padding: 0;
  }

  .cv {
    --cv-texte: #17202a;
    --cv-discret: #46525f;
    --cv-trait: #cdd5dd;
    --cv-accent: #007373;
    --cv-bloc: #f3f6f8;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    font-size: 9.1pt;
    line-height: 1.35;
  }

  /* Les fonds (bandeau, cartes, icônes) doivent être imprimés tels quels. */
  .cv,
  .cv * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .cv-tete {
    padding: 3.5mm 6mm;
    border-bottom: 0;
    border-radius: 2mm;
    background: #0a0f14;
    color: #dbe4ee;
  }

  .cv-tete h1::before,
  .cv-tete .cv-metier {
    color: #2ab7b2;
  }

  .cv-tete .cv-contact,
  .cv-tete .cv-lieu {
    color: #b8c4d0;
  }

  .cv-domaines {
    columns: 4;
    column-gap: 2mm;
  }

  .cv .cv-formations {
    grid-template-columns: repeat(5, 1fr);
    gap: 2mm;
  }

  /* Pas d'icônes sur la feuille : les titres de domaine tiennent alors sur une ligne. */
  .cv-domaine .icone {
    display: none;
  }

  .cv-domaine {
    border-top: 2px solid #007373;
  }

  .cv-domaine-tete {
    margin-bottom: 1mm;
  }

  .cv-objectif {
    margin-top: 3mm;
    padding: 1.5mm 3mm;
  }

  /* Sur la feuille, les outils d'un domaine se suivent sur une ligne, séparés par un point. */
  .cv-outils {
    display: block;
  }

  .cv-outils li {
    display: inline;
    padding: 0;
    border: 0;
    font-size: 1em;
  }

  /* Espace insécable avant le point : il reste collé à l'outil qui le précède. */
  .cv-outils li:not(:last-child)::after {
    content: " · ";
    color: #007373;
  }

  .cv-frise > li {
    padding-bottom: 1.6mm;
  }

  .cv h2 {
    margin: 3mm 0 1.8mm;
  }

  .cv-formations li {
    padding: 1.2mm 2mm;
  }

  .cv-domaine {
    margin-bottom: 2mm;
    padding: 1.4mm 2mm;
  }
}

/* "screen" : à l'impression, la feuille A4 est étroite mais garde ses colonnes. */
@media screen and (max-width: 52rem) {
  .cv {
    padding: 1.1rem;
  }

  .cv-faits {
    columns: 1;
  }

  .cv-contact {
    text-align: left;
  }
}