/* =============================================================================
   LA PAGE PARCOURS

   Même papier, mêmes polices, mêmes filets que le reste du site — mais en
   document et non en table de cartes. Une seule colonne de lecture, des
   séparateurs fins, rien qui bouge sans raison.

   Volontairement dans son propre fichier : rien ici ne touche aux styles de
   l'accueil ni de la page musique, et supprimer le dossier cv/ suffit à
   revenir à l'état d'avant.

   Vocabulaire repris de css/style.css : papier #f8f9fa à pois de 24 px, Lora
   pour les titres, micro-libellés Outfit 0.7rem en majuscules espacées, filets
   à 8 % de noir, rayon 12, or #d4af37 pour l'accent.
   ========================================================================== */

:root {
    --papier: #f8f9fa;
    --carte: #ffffff;
    --encre: #1a1a1a;
    --encre-douce: #55534d;
    --encre-faible: #8a8a8a;
    --filet: rgba(0, 0, 0, 0.08);
    --filet-fort: rgba(0, 0, 0, 0.16);
    --or: #b9962c;
    --bleu: #2f6f9f;
    --elan: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background-color: var(--papier);
    background-image: radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    color: var(--encre);
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* La colonne de lecture. 45rem tient environ 68 caractères en Outfit 17px :
   au-delà, l'œil perd sa ligne en revenant à la marge. */
.cv-large {
    max-width: 45rem;
    margin: 0 auto;
    padding: 0 clamp(1.15rem, 5vw, 2rem);
}

h1, h2, h3 {
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    text-wrap: balance;
    margin: 0;
}

p { margin: 0; }

a { color: var(--bleu); text-underline-offset: 2px; }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--carte);
    padding: 10px 16px;
    border: 1px solid var(--filet);
    border-radius: 0 0 8px 0;
    z-index: 100;
}

.skip-link:focus { left: 0; }

/* Visible des seuls lecteurs d'écran. Utilisée par les liens externes, pour
   annoncer l'ouverture dans un nouvel onglet — l'icône seule ne le dit pas. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Le micro-libellé du site : Outfit 0.7rem, gras, espacé, majuscules. */
.micro {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--encre-faible);
}

/* --- En-tête -------------------------------------------------------------- */

.cv-tete {
    padding: clamp(2.5rem, 7vw, 4.5rem) 0 0;
}

.cv-tete h1 {
    font-size: clamp(2.1rem, 7vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0.35rem 0 0;
}

.cv-role {
    margin-top: 0.7rem;
    font-size: 1.1rem;
    color: var(--encre-douce);
    max-width: 34rem;
}

.cv-ailleurs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    margin-top: 2rem;
    padding-bottom: 2.2rem;
    border-bottom: 1px solid var(--filet-fort);
}

/* L'invitation vers la table : la seule zone un peu appuyée de la page. */
.cv-invite {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 18px;
    background: var(--carte);
    border: 1px solid var(--filet);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    text-decoration: none;
    color: var(--encre);
    transition: box-shadow 0.25s, transform 0.25s var(--elan), border-color 0.25s;
}

.cv-invite:hover,
.cv-invite:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.cv-invite > i:first-child { font-size: 1.05rem; color: var(--or); flex-shrink: 0; }
.cv-invite span { display: flex; flex-direction: column; min-width: 0; }
.cv-invite b { font-weight: 600; font-size: 0.97rem; }
.cv-invite em { font-style: normal; font-size: 0.85rem; color: var(--encre-faible); }

.cv-fleche { margin-left: auto; font-size: 0.8rem; color: #c4c4c4; flex-shrink: 0; transition: transform 0.25s; }
.cv-invite:hover .cv-fleche { transform: translateX(3px); color: var(--encre); }

.cv-lien-sobre {
    font-size: 0.9rem;
    color: var(--encre-douce);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cv-lien-sobre i { color: var(--encre-faible); font-size: 0.85rem; }
.cv-lien-sobre:hover { color: var(--encre); text-decoration: underline; }

/* --- Sections ------------------------------------------------------------- */

.cv-corps { padding-bottom: 3rem; }
.cv-attente { padding: 3rem 0; color: var(--encre-faible); }

.cv-section { padding-top: 2.8rem; }

.cv-section > h2 {
    font-size: 0.72rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--encre-faible);
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--filet);
}

/* --- Une expérience ------------------------------------------------------- */

.cv-poste { padding: 1.8rem 0; border-bottom: 1px solid var(--filet); }
.cv-poste:last-child { border-bottom: none; }

/* Les dates au-dessus du titre sur mobile, en colonne à gauche au-delà :
   une grille suffit, sans dupliquer le balisage. */
.cv-poste-tete { display: grid; gap: 0.15rem 1.6rem; }

@media (min-width: 620px) {
    .cv-poste-tete { grid-template-columns: 7.5rem 1fr; }
    .cv-dates { grid-row: span 2; text-align: right; padding-top: 0.35rem; }
}

.cv-dates {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--encre-faible);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cv-org { font-size: 1.22rem; line-height: 1.3; }

.cv-org a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.cv-org a:hover { border-bottom-color: var(--filet-fort); }

/* Le picto « lien externe », partout où il apparaît. Il était collé au texte :
   il n'existait qu'une règle, limitée à .cv-org, et un margin sur le <i> seul
   se comportait mal selon le contexte. Le <span> porteur règle l'espacement
   une fois pour toutes, et son padding-left ne peut pas s'effondrer. */
.cv-ext {
    display: inline-block;
    padding-left: 6px;
    font-size: 0.62rem;
    color: #c4c4c4;
    vertical-align: 1px;
}

a:hover > .cv-ext { color: var(--encre-douce); }

/* La direction ou le service : « Direction du développement numérique ».
   En bloc pour passer sous le nom de l'employeur sans l'alourdir. */
.cv-equipe {
    display: block;
    margin-top: 2px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--encre-faible);
}

.cv-fonction { font-size: 0.98rem; color: var(--encre-douce); margin-top: 3px; }

.cv-detail { margin-top: 0.9rem; color: var(--encre-douce); max-width: 34rem; }

/* Les missions du poste. Puces discrètes : un tiret cadratin plutôt qu'un
   disque, pour rester dans le registre du document. */
.cv-puces {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cv-puces li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.94rem;
    color: var(--encre-douce);
    line-height: 1.55;
}

.cv-puces li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: #c9c9c9;
}

@media (min-width: 620px) {
    /* Tout ce qui appartient à une expérience s'aligne sur le nom de
       l'employeur, jamais sur le bord de la section : c'est ce retrait qui dit
       « ceci est dedans ». « Also at ARTE France » et sa liste y manquaient, et
       se lisaient donc comme une rubrique de la section Experience.
       Le sélecteur est volontairement « .cv-poste .cv-compact » : les listes
       compactes de Press et de Also, elles, restent au bord. */
    .cv-detail,
    .cv-puces,
    .cv-roles,
    .cv-apres-section,
    .cv-poste .cv-compact { margin-left: 9.1rem; }
}

/* --- Plusieurs postes chez le même employeur ------------------------------
   Un filet vertical à gauche : il dit « ces deux lignes appartiennent au même
   employeur » sans avoir à le répéter. */
.cv-titres {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0 0 0 14px;
    border-left: 1px solid var(--filet);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 34rem;
}

.cv-titres li { display: flex; flex-direction: column; gap: 1px; }

.cv-titre-role {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--encre);
    line-height: 1.35;
}

.cv-titre-dates {
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--encre-faible);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 620px) {
    .cv-titres { margin-left: 9.1rem; }
}

/* --- Les jeux, sous l'expérience qui les a produits ----------------------- */

.cv-roles { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 1.3rem; }

.cv-role-groupe > h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--encre);
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.cv-role-annees { font-weight: 400; letter-spacing: 0.4px; color: var(--encre-faible); font-variant-numeric: tabular-nums; }

.cv-jeux { list-style: none; margin: 0.6rem 0 0; padding: 0; }

.cv-jeu { border-top: 1px solid var(--filet); }
.cv-jeu:first-child { border-top: none; }

/* <details> et non un accordéon maison : le contenu replié reste dans le
   document, donc lisible par un moteur et par un lecteur d'écran, et le
   clavier le pilote tout seul. */
.cv-jeu summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    list-style: none;
}

.cv-jeu summary::-webkit-details-marker { display: none; }

.cv-jeu-annee {
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--encre-faible);
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
    flex-shrink: 0;
}

.cv-jeu-titre { font-size: 0.97rem; font-weight: 400; }
.cv-jeu summary:hover .cv-jeu-titre { color: #000; }

.cv-jeu-chevron {
    margin-left: auto;
    font-size: 0.62rem;
    color: #c9c9c9;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.cv-jeu[open] .cv-jeu-chevron { transform: rotate(90deg); }
.cv-jeu[data-sans-preuve] summary { cursor: default; }
.cv-jeu[data-sans-preuve] .cv-jeu-chevron { display: none; }

.cv-jeu-fond { padding: 0 0 14px 3.4rem; }

@media (max-width: 480px) {
    .cv-jeu-fond { padding-left: 0; }
}

/* La preuve : le même vocabulaire que le verso des cartes, en plus sobre. */
.cv-preuve {
    font-size: 0.9rem;
    color: var(--encre-douce);
    border-left: 2px solid rgba(212, 175, 55, 0.45);
    padding-left: 14px;
}

.cv-preuve-texte { font-family: 'Lora', serif; font-style: italic; }
.cv-preuve.est-prix .cv-preuve-texte,
.cv-preuve.est-score .cv-preuve-texte { font-style: normal; font-weight: 600; }

.cv-preuve-source {
    display: block;
    margin-top: 5px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--encre-faible);
}

.cv-jeu-lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 0.85rem; text-decoration: none; }
.cv-jeu-lien:hover { text-decoration: underline; }
.cv-jeu-lien i { font-size: 0.68rem; }

/* --- Un projet mené à côté -----------------------------------------------
   Entre la ligne de parcours et la ligne compacte : ces projets ont une
   période, parfois un détail, mais pas d'employeur ni de productions. */

.cv-cote { padding: 1.4rem 0; border-bottom: 1px solid var(--filet); }
.cv-cote:last-child { border-bottom: none; }

.cv-cote-tete {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.cv-cote-tete h3 { font-size: 1.08rem; line-height: 1.3; }
.cv-cote-tete h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.cv-cote-tete h3 a:hover { border-bottom-color: var(--filet-fort); }

.cv-cote-dates {
    margin-left: auto;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--encre-faible);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cv-cote-quoi { margin-top: 3px; font-size: 0.95rem; color: var(--encre-douce); max-width: 34rem; }

/* Le détail d'un projet à côté n'est pas décalé comme celui d'un poste :
   il n'y a pas de colonne de dates à gauche pour justifier le retrait. */
.cv-cote .cv-puces { margin-top: 0.7rem; }
@media (min-width: 620px) { .cv-cote .cv-puces { margin-left: 0; } }

/* Ferré à droite du bloc : le lien se détache de la colonne de gauche et
   devient une sortie plutôt qu'une ligne de plus. Le disque est celui qu'emploie
   déjà le compteur de l'accueil et le tiroir Collection pour dire « va
   écouter » — même idiome, pas un picto de plus dans le vocabulaire.
   L'écart qui s'ouvre au survol est la même mécanique que les liens
   d'invitation de collection.css. */
.cv-cote-lien { margin-top: 0.8rem; font-size: 0.9rem; text-align: right; }

.cv-cote-lien a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    transition: gap 0.25s var(--elan);
}

.cv-cote-lien a:hover { gap: 11px; text-decoration: underline; }

.cv-cote-lien i { font-size: 0.78rem; color: var(--encre-faible); transition: color 0.25s; }
.cv-cote-lien a:hover i { color: var(--bleu); }

/* La liste des alias musicaux, serrée sous son titre */
.cv-compact-serre { margin-top: 0.5rem; }
.cv-compact-serre li { padding: 0.45rem 0; }
.cv-compact-serre li:first-child { border-top: 1px solid var(--filet); padding-top: 0.6rem; }

/* --- Listes compactes : presse, divers ------------------------------------ */

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

.cv-compact li {
    display: flex;
    align-items: baseline;
    gap: 10px 14px;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--filet);
}

.cv-compact li:last-child { border-bottom: none; }

.cv-compact-nom { font-size: 0.98rem; }
.cv-compact-nom a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.cv-compact-nom a:hover { border-bottom-color: var(--filet-fort); }

.cv-compact-quoi { font-size: 0.88rem; color: var(--encre-faible); }
.cv-compact-annees { margin-left: auto; font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--encre-faible); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* le marqueur de langue, comme sur les cartes */
.cv-langue {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--encre-faible);
    border: 1px solid var(--filet-fort);
    border-radius: 4px;
    padding: 1px 4px;
}

.cv-apres-section {
    margin-top: 1.1rem;
    font-size: 0.9rem;
    color: var(--encre-faible);
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}