/* ---------- Polices ---------- */

/* Satoshi (Fontshare) est hébergée avec le site pour fonctionner aussi en local */
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */

:root {
  --fond: #fbfbfd;
  --surface: #ffffff;
  --texte: #1d1d1f;
  --discret: #6e6e73;
  --trait: rgba(0, 0, 0, 0.1);
  --entete: rgba(251, 251, 253, 0.72);
  --ombre: 0 20px 50px -20px rgba(0, 0, 0, 0.18);
  --accent: #0b8a4b;
  --bleu-clip: #2f6aa8;

  /* Dossiers et fenêtre façon macOS */
  --dossier-dos: #4fa5ec;
  --dossier-face-haut: #8fcdf9;
  --dossier-face-bas: #66b5f3;
  --dossier-reflet: rgba(255, 255, 255, 0.6);
  --selection: #0a68e0;
  --barre-fenetre: #f2f2f4;

  /* Pistes du parcours sur mobile (vue d'ensemble et étiquettes de la liste) */
  --piste-independant: #7459a3;
  --piste-salarie: #3a6fa3;
  --piste-formation: #357650;

  /* Marqueurs de la timeline du parcours, aux couleurs de ceux de Resolve */
  --marqueur-cyan: #1aa9b5;
  --marqueur-jaune: #dba514;
  --marqueur-rose: #e2659f;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  /* Petits libellés, timecodes et repères */
  --etiquette: "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --marge: clamp(20px, 5vw, 64px);
  --largeur: 1200px;
  --rayon: 18px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --fond: #000000;
  --surface: #111113;
  --texte: #f5f5f7;
  --discret: #a1a1a6;
  --trait: rgba(255, 255, 255, 0.14);
  --entete: rgba(0, 0, 0, 0.68);
  --ombre: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  --accent: #30d158;
  --bleu-clip: #5d9de0;
  --dossier-dos: #3d93dc;
  --dossier-face-haut: #74bdf2;
  --dossier-face-bas: #4fa2e6;
  --dossier-reflet: rgba(255, 255, 255, 0.35);
  --selection: #1a6fe0;
  --barre-fenetre: #1c1c1f;
  --piste-independant: #8a6cc0;
  --piste-salarie: #4a86c5;
  --piste-formation: #4a9a68;
  --marqueur-cyan: #2cc4cf;
  --marqueur-jaune: #ecc02c;
  --marqueur-rose: #ef86b8;
  color-scheme: dark;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Le halo du portrait déborde à droite : on le coupe au bord de l'écran
   pour éviter tout défilement horizontal, sur mobile surtout.
   container-type : la timeline du Parcours mesure sa largeur sur celle de main (unité cqw). */
main {
  overflow-x: clip;
  container-type: inline-size;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.timecode,
.meta,
.periode {
  font-family: var(--etiquette);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--discret);
  font-variant-numeric: tabular-nums;
}

.rec {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: clignote 1.6s ease-in-out infinite;
}

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

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

/* Trois colonnes : deux côtés de même largeur, pour que le menu soit centré sur toute la barre */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 56px;
  padding: 0 var(--marge);
  background: var(--entete);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--trait);
}

.marque {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  white-space: nowrap;
}

.marque-nom {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marque .timecode {
  padding-left: 10px;
  border-left: 1px solid var(--trait);
  font-size: 12px;
}

.nav {
  display: flex;
  gap: clamp(16px, 3vw, 36px);
  font-size: 14px;
  color: var(--discret);
}

.nav a {
  transition: color 0.2s ease;
}

.nav a:hover {
  color: var(--texte);
}

.bascule-theme {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.bascule-theme:hover,
.bouton-menu:hover {
  background: var(--trait);
}

/* Toujours dans la 3e colonne, même quand le menu est masqué (mobile) */
.entete-actions {
  display: flex;
  grid-column: 3;
  justify-self: end;
  align-items: center;
  gap: 4px;
}

/* Bouton du menu mobile, masqué sur grand écran (voir « Petits écrans ») */
.bouton-menu {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

/* Ses deux traits se croisent quand le menu est ouvert */
.bouton-menu path {
  transform-origin: 12px 12px;
  transition: transform 0.3s ease;
}

.menu-ouvert .bouton-menu .ligne-haut {
  transform: rotate(45deg) translateY(3px);
}

.menu-ouvert .bouton-menu .ligne-bas {
  transform: rotate(-45deg) translateY(-3px);
}

.bascule-theme svg,
.bouton-menu svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone-lune,
[data-theme="dark"] .icone-soleil {
  display: none;
}

[data-theme="dark"] .icone-lune {
  display: block;
}

.tete-de-lecture {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Accueil ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  align-items: center;
  align-content: center;
  gap: clamp(32px, 5vw, 64px);
  position: relative;
  /* Plein écran, sans dépasser 800 px : pas de grand vide sur les écrans très hauts */
  min-height: min(100svh, 800px);
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 96px var(--marge) 48px;
}

/* Halo derrière le portrait, dans la teinte d'accent. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8%;
  right: -6%;
  width: 62%;
  height: 78%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--texte) 16%, transparent), transparent);
  filter: blur(30px);
  pointer-events: none;
}

.reperes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--trait);
}

.reperes dt {
  font-family: var(--etiquette);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.reperes dd {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 500;
}

.portrait {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--texte) 22%, transparent);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--ombre);
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Photo sur fond blanc en thème clair, sur fond noir en thème sombre */
.portrait .portrait-sombre,
[data-theme="dark"] .portrait .portrait-clair {
  display: none;
}

[data-theme="dark"] .portrait .portrait-sombre {
  display: block;
}

.sur-titre {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 20px;
}

h1 {
  font-size: clamp(40px, 6.2vw, 76px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}

/* Le mot en italique des titres prend la couleur d'accent, de l'accueil jusqu'au contact */
h1 em,
h2 em {
  color: var(--accent);
}

/* Sous le titre, le poste actuel, dans la typographie du titre mais en retrait */
.titre-second {
  max-width: 620px;
  margin-top: 18px;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--discret);
}

.chapo {
  max-width: 620px;
  margin-top: 32px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--discret);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.bouton {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.bouton:hover {
  transform: translateY(-2px);
  border-color: var(--texte);
}

.bouton-plein {
  background: var(--texte);
  color: var(--fond);
  border-color: var(--texte);
}

.bouton-plein:hover {
  opacity: 0.85;
}

/* En thème clair, « Voir les projets » prend le vert d'accent */
:root:not([data-theme="dark"]) .actions .bouton-plein {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

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

.section {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(44px, 5.5vw, 72px) var(--marge);
  border-top: 1px solid var(--trait);
}

.section-tete {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}

h2 {
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Projets ---------- */

/* Dossiers façon macOS : chaque icône empile un dos (SVG avec onglet), des aperçus
   des vidéos, puis une face avant. Au survol les aperçus dépassent du dossier ;
   ouvert, la face bascule vers l'avant et les autres dossiers s'écartent. */

.dossiers {
  --taille: clamp(68px, 14vw, 168px);
  --ecart: clamp(8px, 3vw, 40px);
  --souple: cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px clamp(8px, 3vw, 48px);
  padding-top: calc(var(--taille) * 0.25);
}

.dossier {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--taille);
  text-align: center;
  transition: scale 0.45s var(--souple), translate 0.45s var(--souple), opacity 0.3s ease;
}

.dossier:focus-visible {
  outline-offset: 8px;
  border-radius: 8px;
}

.dossier-icone {
  position: relative;
  width: 100%;
  aspect-ratio: 120 / 96;
  perspective: calc(var(--taille) * 4);
  transition: scale 0.45s var(--souple);
}

.dossier-dos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--dossier-dos);
}

.dossier-face {
  position: absolute;
  inset: 21% 0 0;
  border-radius: calc(var(--taille) * 0.05);
  background: linear-gradient(var(--dossier-face-haut), var(--dossier-face-bas));
  box-shadow:
    inset 0 1px 0 var(--dossier-reflet),
    0 calc(var(--taille) * 0.06) calc(var(--taille) * 0.1) calc(var(--taille) * -0.06) rgba(0, 0, 0, 0.45);
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--souple);
}

/* Aperçus : --i place chaque vidéo dans l'éventail (-1, 0, 1), --n décale son départ */
.apercu {
  --monte: 0%;
  --eventail: 8%;
  --angle: 2deg;
  position: absolute;
  left: 50%;
  bottom: 42%;
  width: 58%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: calc(var(--taille) * 0.016) solid #fff;
  border-radius: calc(var(--taille) * 0.025);
  background: linear-gradient(135deg, #2c2c31, #4a4a52);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transform:
    translateX(calc(-50% + var(--i) * var(--eventail)))
    translateY(var(--monte))
    rotate(calc(var(--i) * var(--angle)));
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--souple) calc(var(--n) * 40ms);
}

.apercu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sans miniature, un petit triangle de lecture */
.apercu:empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 0.3em 0 0.3em 0.5em;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
  font-size: calc(var(--taille) * 0.09);
  transform: translate(-40%, -50%);
}

.dossier:hover .apercu,
.dossier:focus-visible .apercu,
.dossier[aria-expanded="true"] .apercu {
  --monte: -80%;
  --eventail: 34%;
  --angle: 9deg;
}

.dossier:hover .dossier-icone,
.dossier:focus-visible .dossier-icone {
  scale: 1.1;
}

.dossier[aria-expanded="true"] .dossier-icone {
  scale: 1.16;
}

.dossier[aria-expanded="true"] .dossier-face {
  transform: rotateX(-38deg);
}

.dossier-nom {
  margin-top: calc(var(--taille) * 0.1);
  padding: 1px 8px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Nom surligné comme une sélection dans le Finder */
.dossier[aria-expanded="true"] .dossier-nom {
  background: var(--selection);
  color: #fff;
}

.dossier-compte {
  margin-top: 2px;
  font-family: var(--etiquette);
  font-size: 12px;
  color: var(--discret);
}

/* Un dossier ouvert : les autres rapetissent, pâlissent et s'écartent de lui */
.dossiers.un-ouvert .dossier:not([aria-expanded="true"]) {
  scale: 0.86;
  opacity: 0.5;
}

.dossiers.un-ouvert .dossier:not([aria-expanded="true"]):hover {
  opacity: 1;
}

.dossier[aria-expanded="true"] ~ .dossier {
  translate: var(--ecart) 0;
}

.dossier:has(~ .dossier[aria-expanded="true"]) {
  translate: calc(var(--ecart) * -1) 0;
}

/* Fenêtre du Finder : elle se déplie de 0 à sa hauteur (grille 0fr → 1fr).
   .deplie laisse déborder l'ombre une fois l'animation terminée. */

.fenetre-zone {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fenetre-zone.ouverte {
  grid-template-rows: 1fr;
}

.fenetre-repli {
  min-height: 0;
  overflow: hidden;
}

.fenetre-zone.deplie .fenetre-repli {
  overflow: visible;
}

.fenetre {
  margin-top: clamp(28px, 4vw, 44px);
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--ombre);
  opacity: 0;
  translate: 0 -16px;
  transition: opacity 0.4s ease, translate 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fenetre-zone.ouverte .fenetre {
  opacity: 1;
  translate: 0 0;
}

.fenetre-barre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--trait);
  background: var(--barre-fenetre);
}

.feux {
  display: flex;
  gap: 8px;
}

.feu {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}

.feu-fermer {
  background: #ff5f57;
}

.feu-reduire {
  background: #febc2e;
}

.feu-agrandir {
  background: #28c840;
}

/* La croix apparaît au survol, comme sur macOS ; ::after agrandit la zone cliquable */
.feu-fermer::before {
  content: "";
  position: absolute;
  inset: 3px;
  background:
    linear-gradient(45deg, transparent 43%, rgba(0, 0, 0, 0.55) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, rgba(0, 0, 0, 0.55) 43% 57%, transparent 57%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.feu-fermer::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.feux:hover .feu-fermer::before,
.feu-fermer:focus-visible::before {
  opacity: 1;
}

.fenetre-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.mini-dossier {
  width: 20px;
  height: 16px;
}

.mini-dossier .dos {
  fill: var(--dossier-dos);
}

.mini-dossier .face {
  fill: var(--dossier-face-bas);
}

.fenetre-compte {
  justify-self: end;
  white-space: nowrap;
  font-family: var(--etiquette);
  font-size: 12px;
  color: var(--discret);
}

.fenetre-fichiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 36px);
  padding: clamp(20px, 3vw, 32px);
}

/* Fichiers vidéo : ils sortent du dossier l'un après l'autre */
.fichier {
  animation: sortie-du-dossier 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}

@keyframes sortie-du-dossier {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.94);
  }
}

/* Le cadre a toujours la hauteur d'un 16:9 pour aligner les fichiers ;
   l'écran y prend le format de la vidéo (--ratio : 9 / 16, 1 / 1…) et se centre. */
.fichier-cadre {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
}

.fichier-ecran {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 0 0 1px var(--trait), 0 12px 28px -16px rgba(0, 0, 0, 0.5);
}

.fichier-ecran.vide {
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, var(--trait) 14px 15px),
    var(--fond);
}

.fichier-ecran iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.fichier-lire {
  position: absolute;
  inset: 0;
  width: 100%;
}

.fichier-lire img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fichier-lire:hover img {
  transform: scale(1.04);
}

.fichier-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.fichier-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-50%, -50%);
}

.fichier-lire:hover .fichier-play,
.fichier-lire:focus-visible .fichier-play {
  transform: scale(1.1);
  background: var(--accent);
}

.fichier-format {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--etiquette);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.fichier-nom {
  margin-top: 16px;
  font-size: 18px;
  letter-spacing: -0.015em;
}

.fichier-nom span {
  font-weight: 400;
  color: var(--discret);
}

.fichier .meta {
  display: block;
  margin-top: 4px;
}

.fichier-description {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--discret);
}

/* Vidéo cachée : rappel de la vidéo principale qu'elle accompagne */
.fichier-suite {
  margin-top: 16px;
  font-family: var(--etiquette);
  font-size: 12px;
  font-weight: 500;
  color: var(--bleu-clip);
}

.fichier-suite + .fichier-nom {
  margin-top: 2px;
}

/* Bouton des vidéos cachées, avec le triangle d'ouverture du Finder */
.fichier-autres {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fichier-autres::before {
  content: "";
  border-style: solid;
  border-width: 4.5px 0 4.5px 7px;
  border-color: transparent transparent transparent currentColor;
  transition: transform 0.25s ease;
}

.fichier-autres:hover {
  border-color: var(--texte);
}

.fichier-autres[aria-expanded="true"] {
  background: var(--trait);
}

.fichier-autres[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

/* ---------- Coup d'œil ---------- */

/* La vidéo d'un projet en grand, comme l'aperçu de macOS : aussi large que possible pour son
   format (--rapport, réglé par main.js) sans dépasser l'écran, barre de titre comprise. */
.coup-doeil {
  --cote: 170px;
  container-type: inline-size;
  width: min(1200px, 94vw, calc((88vh - 48px) * var(--rapport, 1.7778)));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  color: var(--texte);
}

@supports (height: 1dvh) {
  .coup-doeil {
    width: min(1200px, 94vw, calc((88dvh - 48px) * var(--rapport, 1.7778)));
  }
}

/* La page derrière se floute et s'assombrit */
.coup-doeil::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}

/* Tant que l'aperçu est ouvert, la page ne défile plus ; la gouttière garde sa place */
.coup-doeil-ouvert {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.coup-doeil-fenetre {
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}

/* Barre : la croix à gauche, le nom du fichier au centre, YouTube à droite.
   Les côtés gardent la même largeur (--cote) pour que le nom reste centré. */
.coup-doeil-barre {
  display: grid;
  grid-template-columns: minmax(var(--cote), 1fr) minmax(0, auto) minmax(var(--cote), 1fr);
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 12px;
  border-bottom: 1px solid var(--trait);
  background: var(--barre-fenetre);
}

.coup-doeil-fermer {
  display: grid;
  place-items: center;
  justify-self: start;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--discret);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.coup-doeil-fermer:hover {
  background: var(--trait);
  color: var(--texte);
}

.coup-doeil-fermer svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.coup-doeil-titre {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.coup-doeil-titre span {
  font-weight: 400;
  color: var(--discret);
}

.coup-doeil-youtube {
  justify-self: end;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--discret);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.coup-doeil-youtube:hover {
  background: var(--trait);
  color: var(--texte);
}

.coup-doeil-ecran {
  aspect-ratio: var(--ratio, 16 / 9);
  background: #000;
}

.coup-doeil-ecran iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fenêtre étroite (une vidéo verticale sur ordinateur) : la barre se resserre comme sur mobile,
   pour que le nom du fichier garde de la place */
@container (max-width: 560px) {
  .coup-doeil-fenetre {
    --cote: 84px;
  }

  .coup-doeil-youtube span {
    display: none;
  }
}

/* ---------- Projets pilotés ---------- */

/* Le renvoi vers la timeline, souligné comme le téléphone du Contact */
.a-propos a {
  color: var(--texte);
  text-decoration: underline;
  text-decoration-color: var(--trait);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.a-propos a:hover {
  text-decoration-color: currentColor;
}

/* Les livrables validés, dans un outil façon Frame.io et une fenêtre macOS comme le Finder des
   projets : les vidéos en onglets, le lecteur et le titre, puis à droite les
   informations de la vidéo publiée, monteur compris. */
.livrables {
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--ombre);
}

/* En bloc et non en flex, pour que les points de suspension s'affichent si le titre est coupé */
.livrables .fenetre-titre {
  display: block;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.livrables-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.livrables-principal {
  --retrait: clamp(16px, 2.5vw, 28px);
  padding: var(--retrait);
  border-right: 1px solid var(--trait);
}

.livrables-onglets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.livrables-onglet {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.livrables-onglet:hover {
  background: color-mix(in srgb, var(--texte) 4%, transparent);
}

.livrables-onglet[aria-pressed="true"] {
  border-color: var(--trait);
  background: color-mix(in srgb, var(--texte) 6%, transparent);
}

.livrables-vignette {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: var(--trait);
}

.livrables-vignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.livrables-onglet-texte {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

/* Deux lignes au plus : un titre de vidéo YouTube est souvent long */
.livrables-onglet-titre {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 14px;
  font-weight: 600;
}

.livrables-credit {
  font-size: 13px;
  color: var(--discret);
}

/* Le lecteur garde la hauteur d'un 16:9 ; l'image y prend le format de la vidéo et se centre */
.livrables-ecran {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #000;
}

.livrables-image {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: hidden;
}

.livrables-image.vide {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: 10px;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, var(--trait) 14px 15px),
    var(--fond);
  box-shadow: inset 0 0 0 1px var(--trait);
}

.livrables-nom {
  margin-top: 18px;
  font-size: 20px;
  letter-spacing: -0.015em;
}

.livrables-nom span {
  font-weight: 400;
  color: var(--discret);
}

/* Le monteur sous le titre : sur téléphone seulement, quand les onglets n'ont plus la place de le dire */
.livrables-monteur {
  display: none;
  margin-top: 4px;
  font-size: 14px;
  color: var(--discret);
}

/* Pour une vidéo montée avec MAIA : une pastille verte qui amène la carte Outils IA, sous les
   informations sur ordinateur, sous le titre quand les informations passent sous le lecteur */
.livrables-maia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px 12px 7px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.livrables-infos .livrables-maia {
  margin-top: 20px;
}

.livrables-maia[hidden] {
  display: none;
}

.livrables-maia:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

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

.livrables-maia svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.livrables-maia:hover svg {
  transform: translateY(2px);
}

/* Le panneau d'informations : une ligne par champ, le libellé à gauche, la valeur à droite */
.livrables-infos {
  padding: clamp(16px, 2.5vw, 24px);
}

.livrables-infos-tete {
  font-family: var(--etiquette);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.livrables-details {
  margin: 6px 0 0;
}

.livrables-details div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--trait);
  font-size: 14px;
}

.livrables-details dt {
  color: var(--discret);
}

.livrables-details dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}


.livrables-etat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
}

.livrables-etat svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Savoir-faire ---------- */

/* Cinq compétences sur six colonnes : Montage, Motion design et Captation en trois tiers, puis
   Analyse d'audience et Outils IA en deux moitiés, où le long texte de l'IA prend moins de
   lignes. Plus étroit, voir les media queries (1180 et 720 px). */
.colonnes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.colonnes > .bloc {
  grid-column: span 2;
}

.colonnes > .bloc:nth-child(n + 4) {
  grid-column: span 3;
}

/* Cartes de compétences : le texte, puis les icônes d'application centrées en bas.
   Au survol, les icônes font un petit saut l'une après l'autre. La marge intérieure et les
   icônes sont un peu serrées pour que trois icônes tiennent sur une ligne dans un tiers. */
.bloc {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 24px 36px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  transition: border-color 0.3s ease;
}

.bloc:hover {
  border-color: color-mix(in srgb, var(--texte) 22%, transparent);
}

/* Carte amenée par un bouton (le workflow MAIA d'un projet piloté, voir montrerCarte dans
   main.js) : elle s'éclaire un instant, le temps du défilement, puis reprend son aspect */
.bloc.ciblee {
  animation: carte-ciblee 2.4s ease-out 0.4s both;
}

@keyframes carte-ciblee {
  from,
  30% {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  }
}

.bloc p {
  margin-top: 10px;
  font-size: 15px;
  color: var(--discret);
}

/* Note de bas de carte (l'astérisque de MAIA) : posée dans la marge du bas, sous les icônes,
   pour ne pas les déplacer ; les icônes restent alignées avec celles de la carte voisine */
.bloc .bloc-note {
  position: absolute;
  right: 24px;
  bottom: 12px;
  left: 24px;
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Exemple vidéo sous le texte (carte Outils IA) : une ligne de pastilles, une par format, qui
   ouvrent la vidéo dans le coup d'œil */
.bloc .exemple-video {
  margin-top: 14px;
}

.exemple-declinaisons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--etiquette);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--discret);
}

/* Le triangle de lecture, comme sur le bouton des vidéos cachées des projets */
.exemple-declinaison {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--texte);
  letter-spacing: 0;
  transition: border-color 0.2s ease;
}

.exemple-declinaison::before {
  content: "";
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
}

.exemple-declinaison:hover {
  border-color: var(--texte);
}

.exemple-declinaison:focus-visible {
  outline: 2px solid var(--texte);
  outline-offset: 2px;
}

.applis {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 6px;
  margin-top: auto;
  padding-top: 26px;
}

.appli {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 88px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 45ms);
}

/* L'ombre suit la forme de chaque icône (images aux coins déjà arrondis) */
.appli-icone {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
}

/* Même arrondi pour toutes les icônes, quelle que soit la forme du fichier d'origine */
.appli-icone {
  border-radius: 22.5%;
}

/* Tuiles dessinées en SVG : filet pour les fonds blancs */
svg.appli-icone {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.bloc:hover .appli {
  transform: translateY(-4px);
}

/* Planche de symboles SVG : présente dans la page mais invisible */
.planche-logos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Parcours ---------- */

/* Titre à gauche, centré en hauteur sur le texte de présentation à droite (empilés sur mobile) */
.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.section-intro .section-tete {
  margin-bottom: 0;
}

.a-propos {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--discret);
  text-wrap: pretty;
}

/* Un poste : dans la frise (sans JavaScript) ou dans l'inspecteur sous la timeline */
.frise > li,
.inspecteur {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--trait);
}

.frise .periode,
.inspecteur .periode {
  padding-top: 6px;
}

.frise .lieu,
.inspecteur .lieu {
  color: var(--discret);
}

.frise p:last-child,
.inspecteur p:last-child {
  max-width: 600px;
  margin-top: 8px;
  font-size: 15px;
  color: var(--discret);
}

/* Sur ordinateur, la timeline remplace la frise (main.js ajoute .avec-timeline) */
.avec-timeline .frise {
  display: none;
}

/* Mode d'emploi de la timeline, à égale distance de la timeline et du poste affiché */
.parcours-aide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
  font-family: var(--etiquette);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--texte);
}

.parcours-aide svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: var(--accent);
}

.inspecteur {
  margin-top: 32px;
}

.inspecteur > * {
  animation: inspecteur-change 0.4s ease both;
}

@keyframes inspecteur-change {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Timeline façon DaVinci Resolve (page Montage), construite par main.js à partir de la frise.
   Resolve n'existe qu'en sombre : en thème clair, le châssis (panneaux, pistes, traits)
   s'éclaircit et les clips gardent leurs couleurs, un ton plus lumineux. */

.resolve {
  --r-fond: #e4e4e8;
  --r-panneau: #f4f4f6;
  --r-separation: #cdcdd3;
  --r-bouton: #d9d9de;
  --r-graduation: #a3a3ab;
  --r-texte: #2c2c31;
  --r-discret: #77777f;
  --r-rouge: #e5483c;
  --r-bleu: #3a6fa3;
  --r-violet: #7459a3;
  --r-vert: #357650;
  --r-ombre-clip: rgba(0, 0, 0, 0.25);
  --tete: 200px;

  /* Plus large que la colonne de texte : jusqu'à 1400 px, sans toucher les bords de l'écran */
  margin-inline: calc((100% - min(1400px, 100cqw - 2 * var(--marge))) / 2);
  overflow: hidden;
  border: 1px solid var(--r-separation);
  border-radius: 14px;
  background: var(--r-fond);
  box-shadow: var(--ombre);
  color: var(--r-texte);
  font-size: 13px;
  line-height: 1.3;
}

/* Thème sombre : les couleurs d'origine de Resolve */
:root[data-theme="dark"] .resolve {
  --r-fond: #1c1c1f;
  --r-panneau: #262629;
  --r-separation: #0d0d0f;
  --r-bouton: #3a3a40;
  --r-graduation: #5c5c63;
  --r-texte: #d6d6da;
  --r-discret: #85858d;
  --r-bleu: #2e5c88;
  --r-violet: #66508f;
  --r-vert: #2c6343;
  --r-ombre-clip: rgba(0, 0, 0, 0.5);
  border-color: var(--trait);
}

/* Barre d'outils : le magnétisme et le zoom fonctionnent, les autres outils sont décoratifs */

.resolve-barre {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--r-separation);
  background: var(--r-panneau);
}

.resolve-barre svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.resolve-barre svg .plein {
  fill: currentColor;
  stroke: none;
}

.outil {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border-radius: 5px;
  color: var(--r-discret);
}

.outil.actif,
.outil[aria-pressed="true"] {
  color: var(--r-rouge);
}

button.outil:hover {
  background: var(--r-bouton);
  color: var(--r-texte);
}

button.outil[aria-pressed="true"]:hover {
  color: var(--r-rouge);
}

.resolve-barre .separateur {
  width: 1px;
  height: 18px;
  margin: 0 8px;
  background: var(--r-bouton);
}

.groupe-zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* Curseur de zoom, dessiné comme celui de Resolve : un trait fin et une pastille */
.reglage-zoom {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 20px;
  margin: 0 4px;
  background: transparent;
  cursor: pointer;
}

.reglage-zoom::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: var(--r-graduation);
}

.reglage-zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--r-texte);
}

.reglage-zoom::-moz-range-track {
  height: 2px;
  border-radius: 1px;
  background: var(--r-graduation);
}

.reglage-zoom::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: var(--r-texte);
}

/* Corps : en-têtes fixes à gauche ; à droite, le temps (en années, --sequence) défile
   horizontalement quand il est zoomé (--zoom, réglé par main.js) */

.resolve-corps {
  display: grid;
  grid-template-columns: var(--tete) minmax(0, 1fr);
}

.resolve-entetes {
  border-right: 1px solid var(--r-separation);
  background: var(--r-panneau);
}

.resolve-defilement {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--r-graduation) transparent;
}

.resolve-temps {
  position: relative;
  width: calc(100% * var(--zoom, 1));
}

/* Date sous la tête de lecture, à la place du timecode */
.resolve-timecode {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--r-separation);
  font-family: var(--etiquette);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Règle : un trait par mois (--graduations), un repère par année, et par mois une fois zoomé.
   On la clique-glisse pour déplacer la tête de lecture. */
.graduations {
  position: relative;
  height: 42px;
  border-bottom: 1px solid var(--r-separation);
  background:
    repeating-linear-gradient(90deg, var(--r-bouton) 0 1px, transparent 1px calc(100% / var(--graduations))) left bottom / 100% 8px no-repeat,
    var(--r-panneau);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.graduations span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--debut) / var(--sequence) * 100%);
  padding: 7px 0 0 6px;
  border-left: 1px solid var(--r-graduation);
  font-family: var(--etiquette);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--r-discret);
  pointer-events: none;
}

.graduations .mois {
  display: none;
  padding-top: 18px;
  border-left-color: var(--r-bouton);
  font-size: 11px;
}

.avec-mois .graduations .mois {
  display: block;
}

.piste-tete,
.voie {
  height: 80px;
  border-bottom: 1px solid var(--r-separation);
}

.piste-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 16px;
}

.piste-id {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 22px;
  border-radius: 4px;
  background: var(--r-bouton);
  font-size: 12px;
  font-weight: 600;
}

.piste-nom {
  min-width: 0;
  line-height: 1.25;
}

/* Clips : un bouton par poste (ou par morceau, quand le poste est coupé).
   Les autres restent en retrait du poste sélectionné. Couleur selon le type de poste. */

.voie {
  position: relative;
}

.clip {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: calc(var(--debut) / var(--sequence) * 100%);
  width: calc(var(--duree) / var(--sequence) * 100%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 4px;
  background: linear-gradient(rgba(255, 255, 255, 0.1) 0 30px, transparent 30px), var(--r-bleu);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  color: #eef2f7;
  text-align: left;
  opacity: 0.65;
  transition: opacity 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

.clip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Clip trop court pour son texte (poste de quelques mois) : couleur seule, le nom est
   dans l'infobulle et l'inspecteur. Le clip sert de conteneur (container-type). */
@container (max-width: 44px) {
  .clip span {
    visibility: hidden;
  }
}

.clip-titre {
  font-size: 14px;
  font-weight: 600;
}

.clip-detail {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}

.clip.independant {
  background-color: var(--r-violet);
}

/* Piste audio (formation) : séparée des pistes vidéo par un double filet,
   et ses clips portent une forme d'onde sous le texte */
.piste-tete.audio,
.voie.audio {
  border-top: 2px solid var(--r-separation);
  border-bottom: 0;
}

.clip.formation {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'><polygon fill='%237dcb92' points='0,8 3,5 6,7 9,3 12,6 15,4 18,2 21,5 24,7 27,4 30,1 33,3 36,6 39,5 42,2 45,4 48,7 51,3 54,5 57,8 60,6 63,3 66,1 69,4 72,6 75,5 78,2 81,7 84,4 87,3 90,6 93,2 96,5 99,7 102,4 105,1 108,5 111,6 114,3 117,5 120,8 120,12 117,15 114,17 111,14 108,15 105,19 102,16 99,13 96,15 93,18 90,14 87,17 84,16 81,13 78,18 75,15 72,14 69,16 66,19 63,17 60,14 57,12 54,15 51,17 48,13 45,16 42,18 39,15 36,14 33,17 30,19 27,16 24,13 21,15 18,18 15,16 12,14 9,17 6,13 3,15 0,12'/></svg>") left bottom 5px / 120px 18px repeat-x,
    linear-gradient(rgba(255, 255, 255, 0.1) 0 30px, transparent 30px),
    var(--r-vert);
}

.clip:hover {
  opacity: 1;
  filter: brightness(1.12);
}

.clip[aria-pressed="true"] {
  z-index: 1;
  opacity: 1;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 4px 14px var(--r-ombre-clip);
}

/* Tête de lecture : --position (de 0 à 1) est réglée par main.js. On la saisit pour la
   faire glisser ; elle file d'elle-même vers un clip cliqué, sauf pendant le glissement. */

.curseur {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--position, 0) * 100%);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: var(--r-rouge);
  cursor: ew-resize;
  touch-action: none;
  transition: left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Zone de prise plus large que le trait */
.curseur::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  right: -8px;
}

.curseur:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-rouge) 35%, transparent);
}

.glisse,
.glisse * {
  cursor: ew-resize;
  user-select: none;
}

.glisse .curseur {
  transition: none;
}

.curseur::before {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 16px;
  height: 20px;
  background: var(--r-rouge);
  clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 100%, 0 65%);
}

/* Marqueurs (expériences ponctuelles, liste #marqueurs) : data-couleur choisit leur couleur */
[data-couleur="cyan"] {
  --marqueur: var(--marqueur-cyan);
}

[data-couleur="jaune"] {
  --marqueur: var(--marqueur-jaune);
}

[data-couleur="rose"] {
  --marqueur: var(--marqueur-rose);
}

/* Un marqueur au bas de la règle : une pastille pointée vers les pistes, posée sur sa date.
   Ceux du poste affiché ressortent, les autres restent en retrait. */
.marqueur {
  position: absolute;
  bottom: 2px;
  left: calc(var(--debut) / var(--sequence) * 100%);
  z-index: 1;
  width: 10px;
  height: 14px;
  margin-left: -5px;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

.marqueur::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--marqueur);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  transform-origin: 50% 100%;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.marqueur.du-poste,
.marqueur:hover {
  opacity: 1;
}

.marqueur:hover::before {
  filter: brightness(1.15);
}

/* Le marqueur sous la tête de lecture grossit */
.marqueur[aria-pressed="true"]::before {
  transform: scale(1.3);
}

.marqueur:focus-visible {
  outline: 2px solid var(--r-texte);
  outline-offset: 3px;
  border-radius: 2px;
  opacity: 1;
}

/* Sous la description du poste, ses marqueurs repliés dans un menu déroulant (colonne de droite
   de l'inspecteur, ou poste de la liste sur mobile). Sur ordinateur, chaque ligne est un bouton
   qui amène la tête de lecture sur le marqueur. */
.index-marqueurs {
  grid-column: 2;
  margin-top: -10px;
}

.index-marqueurs ul {
  padding: 0;
  list-style: none;
}

/* Menu déroulant (marqueurs du parcours, exemple de la carte Outils IA) : un bouton discret,
   avec un nombre facultatif et une flèche qui se retourne à l'ouverture */
.deroulant-bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: -12px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--etiquette);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.deroulant-bouton:hover {
  background: color-mix(in srgb, var(--texte) 6%, transparent);
}

.deroulant-bouton:focus-visible {
  outline: 2px solid var(--texte);
  outline-offset: 2px;
}

.deroulant-nombre {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--trait);
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
}

.deroulant-bouton svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.deroulant.ouvert > .deroulant-bouton svg {
  transform: rotate(180deg);
}

/* Replié : hauteur nulle et contenu hors d'atteinte (visibility) ; déplié : toute sa hauteur */
.deroulant-contenu {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, visibility 0s 0.3s;
}

.deroulant.ouvert > .deroulant-contenu {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease, visibility 0s;
}

/* Les marges négatives du contenu (lignes de marqueurs) restent visibles malgré overflow: hidden */
.deroulant-contenu > div {
  min-height: 0;
  overflow: hidden;
  margin-inline: -12px;
  padding-inline: 12px;
}

.ligne-marqueur {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  width: calc(100% + 24px);
  max-width: 720px;
  margin-inline: -12px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  transition: background-color 0.2s ease;
}

button.ligne-marqueur:hover:not([aria-current="true"]) {
  background: color-mix(in srgb, var(--texte) 5%, transparent);
}

.ligne-marqueur[aria-current="true"] {
  background: color-mix(in srgb, var(--marqueur) 14%, transparent);
}

.ligne-marqueur:focus-visible {
  outline: 2px solid var(--texte);
  outline-offset: -2px;
}

/* La date, précédée de la pastille du marqueur */
.ligne-date {
  padding-top: 2px;
  font-family: var(--etiquette);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--discret);
  font-variant-numeric: tabular-nums;
}

.ligne-date::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 12px;
  margin-right: 10px;
  vertical-align: -1px;
  background: var(--marqueur);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}

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

.ligne-titre {
  font-weight: 600;
  color: var(--texte);
}

.ligne-description {
  display: block;
  font-size: 14px;
}

/* Sur mobile et tablette (sous 860 px), la frise reste une liste, précédée d'une vue d'ensemble du
   parcours : une ligne par piste, une barre par poste. Construite par main.js, elle reste collée
   sous l'en-tête pendant la lecture ; le poste lu y garde sa couleur et sa période est encadrée.
   Affichée par la media query (max-width: 860px). */

.parcours-liste .independant,
.parcours-liste [data-type="independant"] {
  --couleur: var(--piste-independant);
}

.parcours-liste .salarie,
.parcours-liste [data-type="salarie"] {
  --couleur: var(--piste-salarie);
}

.parcours-liste .formation,
.parcours-liste [data-type="formation"] {
  --couleur: var(--piste-formation);
}

/* La position des postes se mesure depuis la liste (offsetTop, voir construireParcoursListe) */
.parcours-liste .frise {
  position: relative;
}

/* Bande collée sous l'en-tête : même verre dépoli que lui, de bord à bord de l'écran.
   Dans le flux, ce fond se confond avec la page ; il n'apparaît qu'une fois collée. */
.vue-zone {
  display: none;
  position: sticky;
  top: 56px;
  z-index: 5;
  margin-inline: calc(-1 * var(--marge));
  padding: 10px var(--marge);
  border-bottom: 1px solid transparent;
  background: var(--entete);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: border-color 0.3s ease;
}

.vue-zone.collee {
  border-bottom-color: var(--trait);
}

.vue {
  padding: 10px 12px 6px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: var(--surface);
}

.vue-corps {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
}

.vue-noms,
.vue-pistes {
  display: grid;
  gap: 5px;
}

.vue-noms span {
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  color: var(--discret);
}

.vue-pistes {
  position: relative;
}

.vue-ligne {
  position: relative;
  height: 14px;
  border-radius: 4px;
  background: var(--trait);
}

/* Les postes qu'on ne lit pas s'effacent ; le poste lu garde sa couleur pleine */
.vue-barre {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: var(--couleur);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

/* Zone de toucher un peu plus haute que la barre */
.vue-barre::before {
  content: "";
  position: absolute;
  inset: -3px 0;
}

.vue-barre[aria-current="true"] {
  opacity: 1;
}

.vue-barre:focus-visible {
  outline: 2px solid var(--texte);
  outline-offset: 2px;
}

/* Le cadre de la période lue, comme le cadre de la vue d'ensemble de Resolve */
.vue-periode {
  position: absolute;
  top: -4px;
  bottom: -4px;
  min-width: 6px;
  border: 1.5px solid var(--texte);
  border-radius: 5px;
  background: color-mix(in srgb, var(--texte) 6%, transparent);
  pointer-events: none;
  transition: left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vue-annees {
  position: relative;
  height: 14px;
  margin: 6px 0 0 24px;
  font-family: var(--etiquette);
  font-size: 10px;
  line-height: 14px;
  color: var(--discret);
  font-variant-numeric: tabular-nums;
}

.vue-annees span {
  position: absolute;
  transform: translateX(-50%);
}

/* Pastilles des marqueurs, au-dessus des pistes ; celles du poste lu ressortent.
   Le nom de piste vide garde l'alignement des lignes V2, V1 et A1. */
.vue-marqueurs,
.vue-marqueurs-nom {
  position: relative;
  height: 11px;
}

.vue-marqueur {
  position: absolute;
  top: 0;
  width: 8px;
  height: 11px;
  margin-left: -4px;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.vue-marqueur::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--marqueur);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}

/* Zone de toucher plus large que la pastille */
.vue-marqueur::after {
  content: "";
  position: absolute;
  inset: -8px -6px -4px;
}

.vue-marqueur.du-poste {
  opacity: 1;
}

.vue-marqueur:focus-visible {
  outline: 2px solid var(--texte);
  outline-offset: 2px;
  opacity: 1;
}

/* Étiquette de piste au-dessus de l'intitulé du poste */
.puce-piste {
  display: inline-block;
  margin-bottom: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--couleur) 14%, transparent);
  font-family: var(--etiquette);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--couleur);
}

/* L'inspecteur de la timeline d'ordinateur recopie les postes : sans l'étiquette de piste */
.inspecteur .puce-piste {
  display: none;
}

/* ---------- Inspirations ---------- */

/* Media Pool façon DaVinci Resolve : même châssis que la timeline (.resolve), un lecteur à gauche
   et le chutier des clips à droite. La liste défile si elle dépasse la hauteur du lecteur. */

.barre-titre {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 600;
}

.barre-compte {
  margin: 0 12px 0 auto;
  font-family: var(--etiquette);
  font-size: 12px;
  color: var(--r-discret);
}

.pool-corps {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
}

.pool-lecteur {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--r-separation);
}

.pool-lecteur-barre,
.pool-chutier-tete {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--r-separation);
  background: var(--r-panneau);
  font-weight: 600;
}

/* Nom du clip au centre, comme dans le viewer de Resolve */
.pool-lecteur-barre {
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pool-ecran {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.pool-ecran.vide {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, 0.06) 14px 15px), #111113;
}

.pool-ecran.vide .timecode {
  color: #a1a1a6;
}

.pool-ecran iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.pool-lire {
  position: absolute;
  inset: 0;
  width: 100%;
}

.pool-lire img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pool-lire:hover .fichier-play,
.pool-lire:focus-visible .fichier-play {
  transform: scale(1.1);
  background: var(--accent);
}

/* Dans le lecteur, la vidéo garde de l'air jusqu'aux bords, comme dans le viewer de Resolve */
.pool-lecteur > .pool-ecran {
  margin: clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px) 0;
  overflow: hidden;
  border-radius: 6px;
}

.pool-infos {
  padding: 16px 20px 22px;
}

.pool-infos h3 {
  font-size: 18px;
}

.pool-infos .pool-createur {
  margin-top: 2px;
  font-size: 14px;
  color: var(--r-discret);
}

.pool-pourquoi {
  max-width: 640px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
}

.pool-chutier {
  position: relative;
}

.pool-chutier-tete {
  gap: 10px;
}

/* Les lignes se partagent toute la hauteur du chutier (pas de vide sous la liste) ;
   s'il y a beaucoup de clips, la liste défile. */
.pool-clips {
  position: absolute;
  top: 40px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--r-graduation) transparent;
}

.pool-clips li {
  display: flex;
  flex: 1 0 auto;
}

/* La miniature prend un peu plus de la moitié de la ligne, le texte se range à côté */
.pool-clip {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 16px;
  border-bottom: 1px solid var(--r-separation);
  text-align: left;
  transition: background-color 0.2s ease;
}

.pool-clip:hover {
  background: color-mix(in srgb, var(--r-bouton) 55%, transparent);
}

.pool-clip[aria-pressed="true"] {
  background: var(--r-bouton);
}

.pool-vignette {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 255, 255, 0.08) 8px 9px), #2a2a2e;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* Clip sélectionné : liseré rouge autour de la vignette, comme dans le Media Pool */
.pool-clip[aria-pressed="true"] .pool-vignette {
  box-shadow: 0 0 0 2px var(--r-rouge);
}

.pool-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sans miniature, un petit triangle de lecture */
.pool-vignette:empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
  transform: translate(-40%, -50%);
}

.pool-textes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Le titre passe sur trois lignes au plus, le créateur tient sur une */
.pool-titre {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.pool-textes .pool-createur {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--r-discret);
}

/* ---------- Hors champ ---------- */

/* Une carte par passion, du même style que les cartes de Savoir-faire : l'icône, l'intitulé,
   puis une phrase. Quatre de front, deux par ligne sur tablette et mobile. */
.passions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
  list-style: none;
}

.passion {
  padding: 24px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  transition: border-color 0.3s ease;
}

.passion:hover {
  border-color: color-mix(in srgb, var(--texte) 22%, transparent);
}

.passion svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.passion h3 {
  margin-top: 16px;
  font-size: 17px;
}

.passion p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--discret);
}

/* ---------- Contact ---------- */

/* Le texte à gauche, la fenêtre « Nouveau message » à droite (empilés sur mobile) */
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.contact-texte .section-tete {
  margin-bottom: 20px;
}

.dispo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 500;
}

/* Le point reste sur la première ligne si le texte passe à la ligne */
.dispo .rec {
  flex: none;
  margin-top: 8px;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Le téléphone reste discret : l'e-mail est le contact privilégié */
.contact-telephone {
  margin-top: 18px;
  font-size: 14px;
  color: var(--discret);
}

.contact-telephone a {
  color: var(--texte);
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: var(--trait);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.contact-telephone a:hover {
  text-decoration-color: currentColor;
}

/* Fenêtre Mail façon macOS : barre et pastilles reprises de la fenêtre du Finder */
.mail {
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--ombre);
}

.mail-envoyer-icone {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 32px;
  height: 28px;
  border-radius: 6px;
  color: var(--discret);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mail-envoyer-icone:hover {
  background: var(--trait);
  color: var(--texte);
}

.mail-envoyer-icone svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mail-champ {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid var(--trait);
  font-size: 15px;
}

.mail-etiquette {
  flex: none;
  color: var(--discret);
}

/* Destinataire en pastille, comme dans Mail */
.mail-destinataire {
  min-width: 0;
  overflow: hidden;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--selection) 14%, transparent);
  color: var(--selection);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mail input,
.mail textarea {
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.mail input {
  flex: 1;
  height: 46px;
}

.mail textarea {
  display: block;
  width: 100%;
  min-height: 200px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
}

.mail ::placeholder {
  color: var(--discret);
  opacity: 0.8;
}

/* Le champ en cours de saisie se teinte légèrement, à la place du contour */
.mail input:focus-visible,
.mail textarea:focus-visible {
  outline: none;
}

.mail-champ:focus-within,
.mail textarea:focus {
  background: color-mix(in srgb, var(--selection) 5%, transparent);
}

.mail-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--trait);
  background: var(--barre-fenetre);
}

.mail-etat {
  font-size: 13px;
  color: var(--discret);
}

.mail-pied .bouton {
  flex: none;
  height: 40px;
  padding: 0 22px;
}

/* Texte réservé aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Pied de page ---------- */

/* Discret mais lisible : le nom et le poste à gauche, la navigation à droite,
   puis le « © » et le « FIN » du générique sous un filet */
.pied {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 40px var(--marge) 28px;
  border-top: 1px solid var(--trait);
}

.pied-haut {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px 48px;
}

.pied-nom {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pied-poste {
  margin-top: 4px;
  font-size: 14px;
  color: var(--discret);
}

.pied-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 14px;
  color: var(--discret);
}

.pied-nav a {
  transition: color 0.2s ease;
}

.pied-nav a:hover {
  color: var(--texte);
}

.pied-bas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
  font-size: 13px;
  color: var(--discret);
}

/* ---------- Apparition au défilement ---------- */

.apparait {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.apparait.visible {
  opacity: 1;
  transform: none;
}

/* ---------- Petits écrans ---------- */

/* Écrans moyens : sans le timecode, le nom et les 5 liens du menu tiennent sur la barre */
/* Trop étroit pour trois cartes de Savoir-faire côte à côte : deux colonnes, Montage sur toute
   la largeur, puis les autres par deux, sans carte isolée */
@media (max-width: 1180px) {
  .colonnes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .colonnes > .bloc,
  .colonnes > .bloc:nth-child(n + 4) {
    grid-column: auto;
  }

  /* Deux par ligne (Montage et Motion design, puis Captation et Analyse d'audience) ; Outils IA,
     la carte la plus fournie, ferme la grille sur toute la largeur */
  .colonnes > .bloc:last-child {
    grid-column: 1 / -1;
  }

  /* Livrables : en trois colonnes, à côté des informations, le titre n'aurait plus la place
     d'un mot ; deux colonnes jusqu'à la pellicule du téléphone */
  .livrables-onglets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .marque .timecode {
    display: none;
  }

  .passions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  /* Accueil : le nom et le poste à gauche, la photo ronde à droite (le regard tourné vers le
     texte), le reste en pleine largeur. display: contents laisse les éléments de .hero-texte
     se placer dans la grille de .hero. */
  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nom photo"
      "titre photo"
      "poste poste"
      "chapo chapo"
      "actions actions"
      "reperes reperes";
    align-content: center;
    gap: 0 18px;
  }

  /* Le halo se place sur les deux premières rangées : derrière la photo, le nom et le poste */
  .hero::before {
    grid-area: 1 / 1 / 3 / -1;
    top: -40px;
    right: -12%;
    bottom: -40px;
    left: 20%;
    width: auto;
    height: auto;
  }

  .hero-texte {
    display: contents;
  }

  .hero .sur-titre {
    grid-area: nom;
    align-self: end;
    margin-bottom: 6px;
    font-size: clamp(18px, 5vw, 24px);
  }

  .hero h1 {
    grid-area: titre;
    align-self: start;
    font-size: clamp(26px, 8vw, 44px);
  }

  .hero .titre-second {
    grid-area: poste;
    margin-top: 16px;
    font-size: clamp(18px, 5vw, 24px);
  }

  .hero .chapo {
    grid-area: chapo;
    margin-top: 28px;
  }

  .hero .actions {
    grid-area: actions;
    margin-top: 28px;
  }

  .hero .reperes {
    grid-area: reperes;
    margin-top: 36px;
  }

  .reperes {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Media Pool : le lecteur au-dessus, la liste complète en dessous. minmax(0, …) empêche un
     long titre de clip (barre du lecteur, sur une ligne) d'élargir la colonne hors de l'écran. */
  .pool-corps {
    grid-template-columns: minmax(0, 1fr);
  }

  .pool-lecteur {
    border-right: 0;
    border-bottom: 1px solid var(--r-separation);
  }

  .pool-clips {
    position: static;
  }

  .contact-grille {
    grid-template-columns: 1fr;
  }

  /* Savoir-faire : trois icônes tiennent sur une ligne, dans une demi-carte de tablette comme
     dans une carte de téléphone */
  .appli {
    width: 80px;
    font-size: 11px;
  }

  .appli-icone {
    width: 50px;
    height: 50px;
  }

  /* Livrables des projets pilotés : les informations passent sous le lecteur */
  .livrables-corps {
    grid-template-columns: minmax(0, 1fr);
  }

  .livrables-principal {
    border-right: 0;
    border-bottom: 1px solid var(--trait);
  }

  /* Trop étroit pour la timeline d'ordinateur : la frise reprend sa place, en liste,
     sous la vue d'ensemble du parcours */
  .parcours-timeline {
    display: none;
  }

  .avec-timeline .frise {
    display: block;
  }

  .vue-zone {
    display: block;
  }

  /* Un trait de la couleur de la piste devant chaque poste, plein pour le poste lu */
  .parcours-liste .frise > li {
    position: relative;
    padding-left: 18px;
  }

  .parcours-liste .frise > li::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 0;
    width: 3px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--couleur) 30%, transparent);
    transition: background-color 0.3s ease;
  }

  .parcours-liste .frise > li.en-lecture::before {
    background: var(--couleur);
  }

  .portrait {
    grid-area: photo;
    align-self: center;
    width: clamp(88px, 26vw, 128px);
    aspect-ratio: 1;
    border-radius: 50%;
  }

}

@media (max-width: 720px) {
  /* Cartes empilées : aucune voisine à aligner, la note de bas de carte reprend sa place sous
     les icônes et peut passer sur deux lignes */
  .bloc {
    padding-bottom: 24px;
  }

  .bloc .bloc-note {
    position: static;
    margin-top: 16px;
    white-space: normal;
  }

  /* Menu replié : plus besoin de centrer, le nom à gauche et les boutons à droite */
  .entete {
    display: flex;
    justify-content: space-between;
  }

  .marque .timecode {
    display: inline;
  }

  .nav {
    display: none;
  }

  .frise > li,
  .inspecteur {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Le menu des marqueurs suit la description, et ses lignes passent la date au-dessus du texte */
  .frise .index-marqueurs {
    grid-column: auto;
    margin-top: 0;
  }

  .frise .ligne-marqueur {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  /* Cartes de passions plus serrées, deux par ligne */
  .passion {
    padding: 18px;
  }

  .colonnes {
    grid-template-columns: 1fr;
  }

  /* Coup d'œil : la barre se resserre, le lien devient « YouTube ↗ » */
  .coup-doeil {
    --cote: 84px;
  }

  .coup-doeil-youtube span {
    display: none;
  }

  /* Media Pool : un peu plus de place pour le titre, qui peut passer sur quatre lignes */
  .pool-clip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 12px;
  }

  .pool-titre {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .dossier-nom {
    padding: 1px 5px;
    font-size: 13px;
  }

  .dossier-compte {
    font-size: 11px;
  }

  .fenetre-barre {
    padding: 0 12px;
  }

  /* La barre des livrables donne au titre toute la place entre les feux et le compte de vidéos :
     il tient en entier dès 375 px */
  .livrables .fenetre-barre {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  /* Une seule colonne : chaque vidéo garde ses vraies proportions (un short reste lisible) */
  .fichier-cadre {
    aspect-ratio: var(--ratio, 16 / 9);
  }

  /* Les onglets des livrables deviennent une pellicule qui défile au doigt, d'un bord à l'autre de
     la fenêtre : la vignette coupée au bord montre qu'il y en a d'autres, et le lecteur reste
     juste en dessous, sur le même écran. */
  .livrables-onglets {
    display: flex;
    gap: 8px;
    margin: 0 calc(-1 * var(--retrait)) 14px;
    padding: 0 var(--retrait);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--retrait);
    scrollbar-width: none;
  }

  .livrables-onglets::-webkit-scrollbar {
    display: none;
  }

  .livrables-onglet {
    flex: 0 0 132px;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 6px;
    padding: 6px;
    scroll-snap-align: start;
  }

  .livrables-onglet-titre {
    font-size: 13px;
  }

  /* Le monteur passe des vignettes au pied du lecteur */
  .livrables-onglet .livrables-credit {
    display: none;
  }

  .livrables-monteur {
    display: block;
  }

  .livrables-nom {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.3;
  }

  /* Le menu se replie derrière le bouton et se déroule sous l'en-tête */
  .bouton-menu {
    display: grid;
  }

  .entete.menu-ouvert .nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 4px var(--marge) 12px;
    border-bottom: 1px solid var(--trait);
    background: var(--fond);
    box-shadow: var(--ombre);
    font-size: 18px;
    color: var(--texte);
    animation: menu-deroule 0.25s ease both;
  }

  .entete.menu-ouvert .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--trait);
  }

  .entete.menu-ouvert .nav a:last-child {
    border-bottom: 0;
  }
}

@keyframes menu-deroule {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Téléphones étroits (320 à 360 px) : sans le timecode, le bouton menu reste dans l'écran */
@media (max-width: 370px) {
  .marque .timecode {
    display: none;
  }

  /* Trop étroit pour deux cartes de passions côte à côte */
  .passions {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Savoir-faire : trois icônes tiennent encore sur une ligne */
  .appli {
    width: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .apparait {
    opacity: 1;
    transform: none;
  }
}