/* =========================================================================
   SlawTech : feuille de style de la page CV (cv/index.html), chargée après style.css.
   CV hybride (proposition C validée par Walid, branche cv-timeline, commit e339c0f) habillé
   au look de 2023 : photo de la page CV de 2023 en fond avec un léger voile noir (15 %),
   cartes blanches à coins de 8 px et en-tête ombré, fiches crème à titres bruns, étoiles bleues,
   boutons LinkedIn / Malt / PDF bleu, violet, rouge.
   Mobile d'abord. Tout est préfixé cv- ou cvc- : rien ici ne modifie le reste du site.

   Couleurs : variables de style.css (palette de 2023) et, en tête de .cv-page, celles du CV.
   Contrastes calculés (WCAG 2.2 AA : 4,5:1 pour le texte, 3:1 pour les repères graphiques) :
   - Expérience = --cv-bleu #1266f1 (carrés) : 5,0:1 sur blanc, 4,56:1 sur crème ; blanc dessus 5,0:1.
   - Formation  = --cv-brun #6d4c41 (ronds) : 7,6:1 sur blanc, 6,9:1 sur crème ; blanc dessus 7,6:1.
     Bleu et brun se distinguent par la teinte et par la forme (carré / rond, barre droite / arrondie).
   - Commandes (filtres, année lue, technologie choisie) = --primaire #00559d : 7,5:1 ; blanc dessus 7,5:1.
   - Technologie repérée = cadre noir de 3 px (21:1), comme les cadres noirs du look de 2023 :
     ni le bleu ni le brun des catégories, donc aucune confusion avec elles.
   - Texte des fiches #707070 : 4,52:1 sur crème (#fff3e0, haut des fiches), 4,95:1 sur blanc.
   - Boutons LinkedIn #1266f1, Malt #8e44ec, PDF #d6293e : texte blanc à 5,0 / 5,0 / 4,95:1.

   Collage sous la barre noire (fixe, 80 px, 70 px sur téléphone, 49 px une fois resserrée) :
   --entete-visible (style.css, suit la classe entete-resserree posée sur <html> par js/site.js)
   + --cvc-decalage (hauteur de la frise collée, posée par js/cv.js). La frise se colle à
   top: --entete-visible ; les années, la colonne de côté et les ancres se calent sous les deux.
   ========================================================================= */

.cv-page {
  /* Catégories du parcours */
  --cv-experience: var(--cv-bleu);
  --cv-formation: var(--cv-brun);
  /* Commandes et repérage */
  --cv-actif: var(--primaire);
  --cv-repere: #000000;
  --cv-estompe: #c4c4c4;           /* barres et nœuds des éléments non repérés (décor) */
  --cv-marque-fond: var(--cv-creme);
  /* Frise mince */
  --cvc-bande-fond: #ffffff;
  --cvc-ligne: #dddddd;
  --cvc-fenetre-fond: rgb(0 85 157 / 0.1);
  --cvc-bulle-fond: #000000;
  --cvc-col: 6.25rem;     /* colonne des noms de catégorie */
  --cvc-an: 1.5rem;       /* hauteur de la ligne des années (cible de 24 px) */
  --cvc-barre: 9px;       /* épaisseur d'une barre */
  --cvc-ecart: 3px;       /* entre deux rangées de barres */
  --cvc-decalage: 0px;    /* hauteur de la bande collée, posée par js/cv.js */
  /* Étoiles des compétences (comme en 2023) */
  --cv-etoile-pleine: var(--cv-bleu);
  --cv-etoile-vide: #c9d3e0;
}

/* Un élément marqué hidden reste caché, même s'il a une classe qui fixe display */
.cv-page [hidden] {
  display: none !important;
}

/* ---------- Scène : photo de 2023 qui reste en fond pendant la lecture ----------
   La photo est collée en haut de l'écran (position sticky, hauteur d'un écran) au lieu d'être
   étirée sur toute la page ; la scène ne doit donc pas couper ce qui dépasse (overflow visible),
   sinon ni la photo ni la frise ne pourraient se coller. */
.scene--cv {
  display: block;
  padding: 0 0 3rem;
  overflow: visible;
}

.scene--cv .scene__image {
  position: sticky;
  inset: 0 auto auto; /* top: 0 seulement */
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
  filter: brightness(0.85); /* voile noir de 15 % */
}

.cv-page__contenu {
  width: min(100% - 2rem, 84.5rem);
  margin-inline: auto;
  padding-top: 1.875rem;
}

/* Titre de page : blanc en capitales cerné de noir sur la photo, comme les titres sur photo du site */
.cv-tete {
  margin-bottom: 1.5rem;
  text-align: center;
  color: #ffffff;
  text-shadow: var(--contour-noir);
}

.cv-tete__surtitre {
  margin: 0 0 0.25rem;
  font-family: var(--police-titres);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cv-tete__titre {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Cartes blanches de 2023 : coins de 8 px, en-tête centré et ombré ---------- */
.cv-carte {
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}

.cv-carte__titre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 5px 6px -5px rgb(0 0 0 / 0.25);
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
}

.cv-carte__titre .icone {
  width: 1.6rem;
  height: 1.6rem;
}

.cv-carte__corps {
  margin: 0;
  padding: 1.25rem 1rem 1.5rem;
}

@media (min-width: 30em) {
  .cv-carte__corps {
    padding-inline: 1.5rem;
  }
}

/* ---------- Mise en page : colonne de côté (profil, langues), colonne principale ---------- */
.cv-mise,
.cv-cote,
.cv-principal {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.cv-principal {
  min-width: 0;
}

@media (min-width: 64em) {
  .cv-mise {
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    gap: 1.25rem;
  }
}

/* La colonne de côté suit la lecture si l'écran est assez haut pour la montrer entière */
@media (min-width: 64em) and (min-height: 50em) {
  .cv-cote {
    position: sticky;
    top: calc(var(--entete-visible) + var(--cvc-decalage) + 1rem);
  }
}

/* ---------- Profil ---------- */
.cv-profil__corps {
  display: grid;
  gap: 1rem;
}

@media (min-width: 30em) {
  .cv-profil__corps {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

.cv-profil__infos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cv-profil__infos li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.25rem;
  white-space: nowrap; /* le numéro de téléphone ne se coupe pas */
}

.cv-profil__liens {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

/* Dans la colonne de côté (grand écran) : coordonnées puis les trois boutons sur une ligne */
@media (min-width: 64em) {
  .cv-cote .cv-profil__corps {
    grid-template-columns: 1fr;
  }

  .cv-cote .cv-profil__liens {
    grid-template-columns: repeat(3, 1fr);
  }

  .cv-cote .cv-bouton {
    min-width: 0;
    padding-inline: 0.5rem;
  }
}

/* LinkedIn, Malt, PDF : pleins, petites capitales, comme en 2023 */
.cv-bouton {
  min-width: 8rem;
  min-height: 2.75rem;
  border: 0;
  color: #ffffff;
  font-size: 0.8rem;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.25);
}

.cv-bouton--linkedin {
  background: var(--cv-bleu);
}

.cv-bouton--malt {
  background: #8e44ec;
}

.cv-bouton--pdf {
  background: #d6293e;
}

.cv-bouton:hover {
  background: #333333; /* blanc dessus : 12,6:1 */
  color: #ffffff;
}

/* ---------- Langues ---------- */
.cv-langues__liste {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  text-align: center;
}

/* ---------- Badge de catégorie (forme + texte : la couleur n'est jamais seule) ---------- */
.cv-type {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.05rem 0.55rem;
  border-radius: 3px;
  background: var(--cv-experience);
  color: #ffffff;
  font-family: var(--police-texte);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cv-type::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: #ffffff; /* carré : expérience */
}

.cv-type--formation {
  background: var(--cv-formation);
}

.cv-type--formation::before {
  border-radius: 50%; /* rond : formation */
}

/* ---------- Filtres (créés par js/cv.js) : toute la largeur, éléments répartis, passage à la ligne ---------- */
.cvc-filtres__titre {
  margin: 0 0 0.4rem;
  color: var(--titres);
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 0.95rem;
}

.cv-filtres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
}

/* Technologies : largeur naturelle, chaque ligne étirée jusqu'au bord */
.cv-filtres--techs {
  display: flex;
  flex-wrap: wrap;
}

.cv-filtres--techs .cv-filtre {
  flex: 1 1 auto;
  padding-inline: 0.65rem;
}

.cv-filtre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem; /* 44 px */
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--bordure-champ); /* 3:1 */
  border-radius: 3px;
  background: #ffffff;
  color: var(--titres);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.cv-filtre:hover {
  border-color: var(--cv-actif);
  color: var(--cv-actif);
}

.cv-filtre[aria-pressed="true"] {
  background: var(--cv-actif);
  border-color: var(--cv-actif);
  color: #ffffff;
}

/* Coche devant le choix actif : l'état ne repose pas sur la seule couleur */
.cv-filtre[aria-pressed="true"]::before,
.cv-tech[aria-pressed="true"]::before {
  content: "";
  flex: none;
  width: 0.35rem;
  height: 0.7rem;
  margin-top: -0.2rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cv-filtre__nb {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 3px;
  background: var(--fond-doux);
  color: var(--titres);
  font-size: 0.8rem;
}

.cv-filtre[aria-pressed="true"] .cv-filtre__nb {
  background: #ffffff;
  color: var(--cv-actif);
}

.cvc-etat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0.25rem 0 1.5rem;
  padding: 0.6rem 0;
  border-block: 1px solid var(--filet);
}

.cvc-etat p {
  margin: 0;
  color: var(--fonce);
}

/* ---------- Technologies d'une fiche ---------- */
.cv-techs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.75rem;
  padding: 0;
  list-style: none;
}

/* Sans JavaScript : de simples étiquettes */
.cv-techs li {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--filet);
  border-radius: 3px;
  background: #ffffff;
  color: var(--titres);
  font-size: 0.85rem;
}

.cv-techs li.a-bouton {
  padding: 0;
  border: 0;
  background: none;
}

/* Avec JavaScript : boutons qui mettent une technologie en avant */
.cv-tech {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem; /* 36 px, au-dessus du minimum de 24 px */
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--cv-actif);
  border-radius: 3px;
  background: #ffffff;
  color: var(--cv-actif);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.cv-tech:hover {
  background: #f0f6fc; /* #00559d dessus : 6,9:1 */
}

.cv-tech[aria-pressed="true"] {
  background: var(--cv-actif);
  color: #ffffff;
}

/* Mot repéré dans le texte d'une fiche : gras, souligné, sur fond crème */
.cv-marque {
  padding: 0 0.15em;
  background: var(--cv-marque-fond);
  color: #000000;
  font-weight: 700;
  text-decoration: underline 2px;
  text-underline-offset: 0.15em;
}

/* ---------- Compétences (notes sur 5 étoiles de 2023) ---------- */
.cv-competences__aide {
  color: var(--texte);
}

.cv-competences__groupes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem 2rem;
}

.cv-competences__groupes h3 {
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #ececec;
  font-size: 1.1rem;
  text-align: center;
}

.cv-notes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.6rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fonce);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

.cv-notes .cv-tech {
  padding-block: 0.15rem;
}

.cv-note {
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-size: 1.15rem;
  line-height: 1.2;
}

/* 5 caractères ★ remplis en bleu jusqu'à la note (la note exacte est dans aria-label) */
.cv-note::before {
  content: "★★★★★";
  background: linear-gradient(90deg, var(--cv-etoile-pleine) var(--remplissage), var(--cv-etoile-vide) var(--remplissage));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cv-note--50 { --remplissage: 100%; }
.cv-note--45 { --remplissage: 90%; }
.cv-note--40 { --remplissage: 80%; }
.cv-note--30 { --remplissage: 60%; }
.cv-note--25 { --remplissage: 50%; }
.cv-note--20 { --remplissage: 40%; }

/* =========================================================================
   Frise
   ========================================================================= */
.cvc-frise {
  position: relative;
  margin-bottom: 1.25rem;
  border-radius: 8px;
  background: var(--cvc-bande-fond);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}

/* ---------- Sans JavaScript : une ligne de liens par catégorie, qui passe à la ligne ---------- */
.cvc-frise:not(.cvc-frise--placee) {
  padding: 0 0 1rem;
}

.cvc-frise__titre {
  margin: 0 0 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 5px 6px -5px rgb(0 0 0 / 0.25);
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
}

.cvc-aide {
  margin: 0 1rem 0.75rem;
}

.cvc-liens-voie {
  padding: 0.5rem 1rem 0;
}

.cvc-liens-voie__nom {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  line-height: 1;
}

.cvc-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cvc-lien {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--filet);
  border-left: 4px solid var(--cv-experience);
  border-radius: 3px;
  background: linear-gradient(var(--cv-creme), #ffffff);
  color: var(--cv-brun);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.cvc-lien--formation {
  border-left-color: var(--cv-formation);
}

.cvc-lien:hover {
  text-decoration: underline;
}

/* ---------- Avec JavaScript : la bande mince, collée juste sous la barre noire ---------- */
.cv-js .cvc-frise--placee {
  position: sticky;
  top: var(--entete-visible);
  z-index: 6; /* sous la barre noire (20) et le panneau du menu */
  overflow-x: clip; /* une info-bulle ne crée jamais de défilement horizontal (elle reste visible dessous) */
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.75rem 0.45rem;
}

/* Ligne des années (téléphone d'abord : des pastilles qui se suivent et défilent seules) */
.cvc-axe {
  display: flex;
  gap: 0.35rem;
  margin: 0;
  padding: 0.1rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.cvc-axe::-webkit-scrollbar {
  display: none;
}

.cvc-axe > li {
  flex: none;
}

.cvc-axe__vide {
  display: none;
}

.cvc-an {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  min-height: 2rem; /* 32 px */
  padding: 0 0.6rem;
  border: 1px solid var(--filet);
  border-radius: 3px;
  color: var(--cv-actif);
  font-family: var(--police-titres);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

a.cvc-an:hover {
  border-color: var(--cv-actif);
}

a.cvc-an[aria-current="true"] {
  background: var(--cv-actif);
  border-color: var(--cv-actif);
  color: #ffffff;
}

a.cvc-an.est-repere {
  box-shadow: inset 0 -3px 0 var(--cv-repere);
}

a.cvc-an[aria-current="true"].est-repere {
  box-shadow: inset 0 -3px 0 #ffffff, inset 0 -5px 0 var(--cv-repere);
}

.cvc-corps {
  display: none;
}

@media (min-width: 56em) {
  /* Années placées à leur date, au-dessus des barres */
  .cvc-axe {
    position: relative;
    display: block;
    height: var(--cvc-an);
    margin: 0 0 0.25rem var(--cvc-col);
    padding: 0;
    overflow: visible;
  }

  .cvc-axe > li,
  .cvc-axe__vide {
    display: block;
    position: absolute;
    top: 0;
    left: calc(100% * var(--x));
    width: calc(100% * var(--l));
  }

  .cvc-an {
    justify-content: flex-start;
    min-width: 0;
    min-height: var(--cvc-an);
    width: fit-content;
    padding: 0 0.35rem;
    border: 0;
    font-size: 0.8rem;
  }

  .cvc-an--vide {
    color: var(--texte);
    font-weight: 400;
  }

  .cvc-an--repli {
    width: 100%;
    justify-content: center;
  }

  .cvc-corps {
    display: block;
    position: relative;
  }

  /* Lignes verticales des années et fenêtre de l'année lue (décor, sous les barres) */
  .cvc-lignes {
    position: absolute;
    inset: calc(-0.25rem - var(--cvc-an)) 0 0 var(--cvc-col);
    pointer-events: none;
  }

  .cvc-ligne {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% * var(--x));
    width: calc(100% * var(--l));
    border-left: 1px dashed var(--cvc-ligne);
  }

  .cvc-ligne--repli {
    background: repeating-linear-gradient(135deg, transparent 0 4px, rgb(0 0 0 / 0.05) 4px 8px);
  }

  .cvc-fenetre {
    position: absolute;
    top: calc(-0.25rem - var(--cvc-an));
    bottom: -0.15rem;
    left: calc(var(--cvc-col) + (100% - var(--cvc-col)) * var(--x, 0));
    width: calc((100% - var(--cvc-col)) * var(--l, 0));
    border-inline: 2px solid var(--cv-actif);
    background: var(--cvc-fenetre-fond);
    opacity: 0;
    pointer-events: none;
  }

  .cvc-fenetre.est-visible {
    opacity: 1;
  }

  /* Une ligne par catégorie : nom à gauche, barres à leur date */
  .cvc-voie {
    position: relative;
    padding-left: var(--cvc-col);
  }

  .cvc-voie + .cvc-voie {
    margin-top: 0.3rem;
  }

  .cvc-voie__nom {
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--cvc-col);
    margin: 0;
    transform: translateY(-50%);
    color: var(--titres);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .cvc-piste {
    position: relative;
    height: calc(var(--rangees, 1) * (var(--cvc-barre) + var(--cvc-ecart)) - var(--cvc-ecart));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cvc-piste > li {
    position: absolute;
    top: calc(var(--rang, 0) * (var(--cvc-barre) + var(--cvc-ecart)));
    left: calc(100% * var(--x));
    width: max(calc(100% * var(--l)), 10px);
    height: var(--cvc-barre);
  }

  .cvc-piste > li:hover,
  .cvc-piste > li:focus-within {
    z-index: 2;
  }

  /* Barre : forme + couleur (angles droits pour les expériences, arrondie pour les formations) */
  .cvc-barre {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--cv-experience);
  }

  .cvc-barre--formation {
    border-radius: 999px;
    background: var(--cv-formation);
  }

  .cvc-barre.est-lue {
    box-shadow: 0 0 0 1px var(--cvc-bande-fond), 0 0 0 2px var(--cv-actif);
  }

  .cvc-barre.est-repere {
    box-shadow: 0 0 0 1px var(--cvc-bande-fond), 0 0 0 3px var(--cv-repere);
  }

  .cvc-barre.est-estompe {
    background: var(--cv-estompe);
  }

  /* Info-bulle : au survol et au focus, survolable, fermée par Échap (script) */
  .cvc-bulle {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 3;
    width: max-content;
    max-width: 22rem;
    padding: 0.35rem 0.6rem;
    border-radius: 3px;
    background: var(--cvc-bulle-fond);
    color: #ffffff;
    font-size: 0.8rem;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
  }

  .cvc-bulle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
  }

  .cvc-barre--a-droite .cvc-bulle {
    left: auto;
    right: 0;
  }

  .cvc-barre:hover .cvc-bulle,
  .cvc-barre:focus-visible .cvc-bulle {
    opacity: 1;
    pointer-events: auto;
  }

  .cvc-frise--sans-bulle .cvc-barre .cvc-bulle {
    opacity: 0;
    pointer-events: none;
  }

  .cvc-bulle__date {
    white-space: nowrap;
  }
}

/* =========================================================================
   Parcours année par année
   ========================================================================= */
.cvc-annees {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cvc-annee {
  display: grid;
}

/* Année : reste collée sous la barre noire et la frise tant qu'on lit ses éléments */
.cvc-annee__nom {
  position: sticky;
  top: calc(var(--entete-visible) + var(--cvc-decalage));
  z-index: 2;
  align-self: start;
  margin: 0;
  padding: 0.2rem 0;
  background: #ffffff;
  color: var(--titres);
  font-family: var(--police-titres);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.2;
}

@media (min-width: 40em) {
  .cvc-annee {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    column-gap: 1.25rem;
  }

  .cvc-annee__nom {
    top: calc(var(--entete-visible) + var(--cvc-decalage) + 0.75rem);
    padding-top: 0.5rem;
    background: none;
    text-align: right;
  }
}

/* Fil gris de 2023, nœuds de couleur : carré (expérience), rond (formation) */
.cvc-entrees {
  list-style: none;
  margin: 0 0 0 0.6rem;
  padding: 0.5rem 0 1.25rem;
  border-left: 3px solid #e5e5e5;
}

@media (min-width: 40em) {
  .cvc-entrees {
    margin-left: 0;
  }
}

.cvc-entree {
  position: relative;
  padding: 0 0 1rem 1.25rem;
}

.cvc-noeud {
  position: absolute;
  left: -0.7rem;
  top: 0.95rem;
  width: 1.15rem;
  height: 1.15rem;
  border: 3px solid #ffffff;
  background: var(--cv-experience);
}

.cvc-entree--formation .cvc-noeud {
  border-radius: 50%;
  background: var(--cv-formation);
}

/* Fiche : carte crème de 2023 (dégradé crème vers blanc), titre et date en brun */
.cvc-carte {
  padding: 0.25rem 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: linear-gradient(var(--cv-creme), #ffffff);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
}

.cvc-entree__titre {
  margin: 0;
  padding: 0.5rem 0.75rem 0.25rem;
  color: var(--cv-brun);
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 700;
}

/* Avec JavaScript, le titre devient un bouton qui déplie la fiche */
.cv-js .cvc-entree__titre {
  padding: 0;
}

.cvc-entree__titre button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.cvc-entree__titre button:hover {
  text-decoration: underline;
}

/* Chevron, comme les volets du site */
.cvc-entree__titre button::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -0.25rem;
}

.cvc-entree__titre button[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: 0.25rem;
}

.cvc-entree__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin: 0;
  padding: 0 0.75rem;
}

.cvc-entree__quand {
  color: var(--cv-brun);
  font-size: 0.92rem;
  font-weight: 700;
}

.cvc-entree__corps {
  padding: 0.75rem 0.75rem 0;
}

.cvc-entree__corps p {
  margin-bottom: 0.6rem;
}

/* Technologie repérée : cadre noir ; les autres fiches passent en gris (texte toujours lisible) */
.cvc-entree.est-repere .cvc-carte {
  border: 3px solid var(--cv-repere);
}

.cvc-entree.est-estompe .cvc-carte {
  background: var(--fond-doux);
  box-shadow: none;
}

.cvc-entree.est-estompe .cvc-entree__titre,
.cvc-entree.est-estompe .cvc-entree__quand {
  color: var(--texte); /* 4,66:1 sur #f8f8f8 */
}

.cvc-entree.est-estompe .cvc-noeud {
  background: var(--cv-estompe);
}

/* Fiche atteinte depuis la frise : cadre bleu, puis il s'efface (classe retirée par le script).
   Sans JavaScript, même cadre sur la fiche visée par l'adresse (:target). */
.cvc-entree.est-cible .cvc-carte,
html:not(.cv-js) .cvc-entree:target .cvc-carte {
  border-color: var(--cv-actif);
  box-shadow: 0 0 0 3px var(--cv-actif);
}

/* ---------- Ancres : une fiche, une année ou le parcours atteints ne passent jamais sous
   la barre noire + la frise. html porte déjà scroll-padding-top: --marge-ancres (style.css) ;
   la marge ajoute ce qui manque pour la frise collée, jamais moins de 0. ---------- */
.cvc-entree,
.cvc-annee,
.cvc-parcours,
.cv-competences {
  scroll-margin-top: max(0px, calc(var(--entete-visible) + var(--cvc-decalage) + 1rem - var(--marge-ancres)));
}

/* ---------- Animations douces, seulement si l'utilisateur ne les a pas réduites ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cvc-carte,
  .cv-filtre,
  .cv-tech {
    transition: background-color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }

  /* La frise et les années suivent la barre noire quand elle se resserre (même durée que style.css) */
  .cv-js .cvc-frise--placee,
  .cvc-annee__nom {
    transition: top 0.25s ease;
  }

  /* Frise mince : la fenêtre de lecture glisse d'une année à l'autre */
  .cvc-fenetre {
    transition: left 0.35s ease, width 0.35s ease, opacity 0.2s ease;
  }

  /* Fiche atteinte depuis la frise : un fond qui pâlit (aucun mouvement) */
  .cvc-entree.est-cible .cvc-carte {
    animation: cvc-signal 2.4s ease-out;
  }
}

@keyframes cvc-signal {
  0%,
  35% {
    background: #f0f6fc; /* texte #707070 dessus : 4,58:1 */
  }

  100% {
    background: var(--cv-creme);
  }
}

/* ---------- Impression : les listes, sans les commandes ---------- */
@media print {
  .cvc-entree__corps[hidden] {
    display: block !important;
  }

  .cvc-frise,
  .cvc-filtres,
  .cvc-etat,
  .scene--cv .scene__image {
    display: none !important;
  }
}