/* ============================================
   MAIN
   Layout home : nav, hero, manifest, projets, à propos, footer.
   Identité : wordmark fixé en arrière-plan, pastilles lavande, étoile Antoine.
   Pangaia toujours en MAJUSCULES + ultralight (200).
   ============================================ */

/* ============================================
   PASTILLES UI (composant signature, inspiré du Book)
   ============================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-lavender);
  color: var(--color-ink);
  border: var(--pill-border-width) solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.pill--ink { background: var(--color-ink); color: var(--color-bg); }
.pill--outline { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
/* Outline clair pour les sections sombres : trait + texte crème, pas de fond */
.pill--outline-light { background: transparent; color: var(--color-bg); border-color: var(--color-bg); }
.pill--cream { background: var(--color-bg); color: var(--color-ink); }
.pill--sm { padding: var(--space-1) var(--space-3); font-size: 0.66rem; font-weight: 400; border-width: 1px; }
.pill--lg { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); letter-spacing: 0.16em; font-weight: 400; }

a.pill { cursor: pointer; }
a.pill:hover {
  transform: rotate(-2deg) scale(1.04);
  background: var(--color-ink);
  color: var(--color-bg);
}

/* Étoile (signature ornement) */
.star {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  flex-shrink: 0;
  color: currentColor;
}
.star--lg { width: 1.2em; height: 1.2em; }
.star--xl { width: 1.5em; height: 1.5em; }
.star--rotate {
  animation: starRotate 12s linear infinite;
}
@keyframes starRotate { to { transform: rotate(360deg); } }

/* Plus de séparateurs ni de transitions : les sections se trancent
   directement par leur couleur de fond. */

/* Pastilles avec rotation légère + animation au scroll */
.pill--tilt-l { transform: rotate(-2.5deg); }
.pill--tilt-r { transform: rotate(2.5deg); }
.pill--tilt-l-sm { transform: rotate(-1deg); }
.pill--tilt-r-sm { transform: rotate(1deg); }

/* Pastille qui apparait au scroll avec un petit pop */
.pill-pop {
  opacity: 0;
  transform: translateY(8px) rotate(0deg) scale(0.92);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.pill-pop.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--pill-rot, 0deg)) scale(1);
}

/* Légère oscillation continue sur les badges/skills */
.pill--wobble {
  animation: pillWobble 6s ease-in-out infinite;
  animation-delay: var(--wobble-delay, 0s);
  transform-origin: center;
}
@keyframes pillWobble {
  0%, 100% { transform: rotate(var(--pill-rot, 0deg)); }
  50% { transform: rotate(calc(var(--pill-rot, 0deg) + var(--wobble-amp, 1.8deg))); }
}

/* ============================================
   PAGE BG : wordmark fixé en arrière-plan, visible sur toute la home
   ============================================ */
.page-bg {
  position: fixed;
  inset: 0;
  /* Par défaut derrière le contenu : pas d'interférence avec les sections
     qui suivent le hero (manifest, projets, timeline, footer). */
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
/* Tout en haut de la home (avant tout scroll), le wordmark passe au-dessus
   du main pour que les lettres lavandes captent le hover. Dès qu'on scrolle
   un poil, on retombe en z-index 0 pour ne plus chevaucher le manifest. */
body.is-at-top .page-bg {
  z-index: 2;
}
body:not(.is-at-top) .page-bg__wordmark .letter--has-thumb {
  pointer-events: none !important;
  cursor: default;
}
.page-bg__wordmark {
  width: min(95vw, 1200px);
  position: relative;
  filter: drop-shadow(0 24px 60px rgba(26, 26, 26, 0.08));
  transition: opacity 0.6s var(--ease-out);
}
.page-bg__wordmark svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
/* Bulles du wordmark forcées en lavande propre (le crème d'origine se confondait avec le fond) */
.page-bg__wordmark svg .cls-2 { fill: var(--color-lavender) !important; }
.page-bg__wordmark svg .cls-1 { fill: var(--color-ink) !important; }
/* Quand on a scrollé hors du hero, le wordmark passe en filigrane */
body.is-scrolled-past-hero .page-bg__wordmark {
  opacity: 0.55;
}

/* Lettres du wordmark : transform piloté en JS (lévitation + scroll + repel) */
.page-bg__wordmark .letter {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
/* Lettres lavandes interactives : hover révèle une vignette projet en remplissage. */
.page-bg__wordmark .letter--has-thumb {
  cursor: pointer;
}
.page-bg__wordmark .letter--has-thumb .cls-2 {
  pointer-events: auto;
  transition: opacity var(--duration-base) var(--ease-out);
}
.page-bg__wordmark .letter--has-thumb:hover .cls-2 {
  opacity: 1;
}

/* Page content au-dessus du wordmark fixé */
main { position: relative; z-index: 1; }
.nav { z-index: var(--z-nav); }

/* ============================================
   NAV : pas de fond, jamais. Le nav entier est en mix-blend-mode difference,
   ce qui fait que ses contenus blancs s'inversent contre TOUT fond
   (crème → quasi-noir, ink → blanc, lavande → tonalité chaude lisible).
   ============================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--gutter);
  background: transparent;
  mix-blend-mode: difference;
  color: #ffffff;
  transition: padding var(--duration-base) var(--ease-out);
  pointer-events: none;
}
.nav.is-scrolled {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* Logo AK : blanc → différence → s'inverse contre tout fond */
.nav__logo {
  display: block;
  width: clamp(40px, 4.5vw, 60px);
  height: auto;
  opacity: 1;
  color: inherit;
  pointer-events: auto;
  transition: transform var(--duration-base) var(--ease-out);
}
.nav__logo:hover { transform: rotate(-4deg) scale(1.05); }
.nav__logo svg { width: 100%; height: auto; display: block; }
.nav__logo svg path,
.nav__logo svg g { fill: currentColor !important; }

.nav__links {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  pointer-events: auto;
}
.nav__links a {
  position: relative;
  padding-block: var(--space-2);
  padding-bottom: calc(var(--space-2) + 6px); /* place pour la flèche dessous */
}
/* Survol : flèche signature (svg double-courbe) qui coulisse depuis la
   gauche pour venir se caler sous le mot. Utilisée en mask sur un fond
   currentColor pour s'adapter à la couleur de la nav (dark/light). */
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 8px;
  background: currentColor;
  -webkit-mask: url("../assets/svg/survol%20sous%20les%20liens%20du%20header.svg") left center / 100% 100% no-repeat;
  mask: url("../assets/svg/survol%20sous%20les%20liens%20du%20header.svg") left center / 100% 100% no-repeat;
  opacity: 0;
  transform: translateX(-110%);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
  pointer-events: none;
}
.nav__links a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) {
  .nav__links { gap: var(--space-3); }
}

/* ============================================
   HERO : transparent sur le wordmark fixé en bg
   La pastille + bloc d'infos sont placés EN BAS du viewport,
   sous le wordmark central animé (qui occupe le centre via .page-bg).
   ============================================ */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--space-9) + 32px) var(--gutter) var(--space-7);
  position: relative;
  color: var(--color-ink);
  overflow: hidden;
}

/* Bottom : pastille à gauche + paragraphe aligné à droite, sous le logo central.
   margin-top: auto pousse le bloc tout en bas du viewport. */
.hero__bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
  flex-wrap: wrap;
  z-index: 2;
}
.hero__sub-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-end;
  text-align: right;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-soft);
  letter-spacing: 0.04em;
}
.hero__sub-info > span:first-child {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-ink-muted);
}

@media (max-width: 720px) {
  .hero__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .hero__sub-info { align-items: flex-start; text-align: left; }
}

/* ============================================
   MANIFEST : dark mode (ink), texte crème, accent lavande
   ============================================ */
.manifest {
  padding: var(--space-10) var(--gutter) var(--space-9);
  position: relative;
  background: var(--color-ink);
  color: var(--color-bg);
}
/* Pill alignée sur container-max (même bord gauche que la pill Sélection). */
.manifest__head {
  max-width: var(--container-max);
  margin: 0 auto var(--space-6);
}
.manifest__label {
  align-self: flex-start;
}
.manifest__label .star { color: currentColor; }

/* Texte gardé dans container-content, calé dans la colonne droite (2/3),
   comme avant. Seule la pill est sortie pour s'aligner sur Sélection. */
.manifest__inner {
  max-width: var(--container-content);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-7);
  align-items: start;
}
.manifest__text {
  grid-column: 2;
  position: relative;
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 200;
  text-transform: uppercase;
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--color-bg);
}
.manifest__text em {
  font-style: normal;
  font-weight: 200;
  color: var(--color-lavender);
}

/* Étoile signature en bullet du manifest, utilisée comme bullet point.
   Positionnée en absolute sur la gauche du paragraphe (légèrement déportée)
   pour ne pas décaler l'alignement du texte. La forme vient du SVG fourni
   appliqué en mask sur un fond lavande, ce qui permet de garder le contrôle
   de la couleur en CSS. Rotation au scroll : sens horaire en descente,
   anti-horaire en montée. Fade-in à l'entrée de la section. */
.manifest__star {
  position: absolute;
  left: -1.25em;
  top: 0.18em;
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  background: var(--color-lavender);
  -webkit-mask: url("../assets/svg/étoile%20antoine.svg") center / contain no-repeat;
  mask: url("../assets/svg/étoile%20antoine.svg") center / contain no-repeat;
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 500ms ease-out;
}
.manifest__star.is-visible {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .manifest__star { opacity: 1; transition: none; }
}

/* Animation lettre-par-lettre pilotée au scroll : opacité 0 → 1 + léger flou.
   Chaque lettre reçoit is-revealed en JS au fur et à mesure du scroll.
   Le wrapper de mot rend l'ensemble insécable, sinon le navigateur peut
   couper entre deux lettres en fin de ligne.
   Mutualisé entre le manifest (home) et le titre du footer (toutes pages). */
.manifest__word-wrap,
.footer__word-wrap {
  display: inline-block;
  white-space: nowrap;
}
.manifest__char,
.footer__char {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transition:
    opacity 200ms ease-out,
    filter 200ms ease-out;
  will-change: opacity, filter;
}
.manifest__char.is-revealed,
.footer__char.is-revealed {
  opacity: 1;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .manifest__char,
  .footer__char {
    opacity: 1;
    filter: none;
    transition: none;
  }
}

@media (max-width: 720px) {
  .manifest__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .manifest__text { grid-column: 1; }
}

/* ============================================
   PROJETS GRILLE : fond crème opaque
   ============================================ */
.projects {
  padding: var(--space-9) 0 var(--space-10);
  /* divider externe utilisé à la place */
  position: relative;
  background: var(--color-bg);
}

.projects__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0 var(--gutter);
  max-width: var(--container-max);
  margin: 0 auto var(--space-7);
  gap: var(--space-5);
  flex-wrap: wrap;
}
.projects__title {
  /* Le composant .pill gère le style ; on contrôle juste la position */
  align-self: flex-start;
}

/* Bento : grille 12 colonnes, aspect-ratio max 16:9 (paysage) */
.projects__list {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row dense;
  gap: var(--space-4);
}

.project-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-lavender-soft);
  isolation: isolate;
  /* transform = piloté par le hover (rapide). translate = piloté par le reveal
     scroll (lent, floaty). Les deux propriétés sont distinctes en CSS moderne
     et se composent au rendu, donc pas de conflit entre les deux animations. */
  transition: transform var(--duration-base) var(--ease-out);
  border: 0;
  grid-column: span 4;
  aspect-ratio: 4 / 3;
}
.project-card:hover {
  transform: translateY(-6px);
}

/* Reveal au scroll : chaque card flotte vers le haut + fade-in
   indépendamment quand elle entre dans le viewport. Pas de stagger global :
   IO par card, donc la rangée N s'anime quand elle arrive en vue. */
.projects__list .project-card {
  opacity: 0;
  translate: 0 50px;
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    translate 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--duration-base) var(--ease-out);
}
.projects__list .project-card.is-revealed {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .projects__list .project-card {
    opacity: 1;
    translate: 0 0;
    transition: transform var(--duration-base) var(--ease-out);
  }
}

/* Variantes bento : aspect-ratio max 16/9 (paysage), jamais plus aplati */
.project-card--lg { grid-column: span 8; aspect-ratio: 16 / 9; }    /* hero panoramique */
.project-card--md { grid-column: span 6; aspect-ratio: 16 / 9; }    /* moitié paysage */
.project-card--sm { grid-column: span 4; aspect-ratio: 4 / 3; }     /* tiers paysage doux */
.project-card--xs { grid-column: span 3; aspect-ratio: 1 / 1; }     /* quart carré */
.project-card--wide { grid-column: span 12; aspect-ratio: 21 / 9; } /* pleine panoramique */
.project-card--full { grid-column: span 12; aspect-ratio: 16 / 9; }
.project-card--tall { aspect-ratio: 8 / 9; }                        /* portrait, hauteur calée sur --lg voisin */

@media (max-width: 1024px) {
  .project-card--lg { grid-column: span 12; aspect-ratio: 16 / 9; }
  .project-card--md, .project-card--wide { grid-column: span 12; aspect-ratio: 16 / 9; }
  .project-card--sm { grid-column: span 6; aspect-ratio: 4 / 3; }
  .project-card--xs { grid-column: span 6; aspect-ratio: 4 / 3; }
  .project-card--full { grid-column: span 12; }
}
@media (max-width: 640px) {
  .project-card,
  .project-card--lg, .project-card--md, .project-card--sm,
  .project-card--xs, .project-card--wide, .project-card--full {
    grid-column: span 12;
    aspect-ratio: 16 / 10;
  }
}

.project-card__visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: clamp(2.4rem, 7.5vw, 6rem);
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 0.95;
  text-align: center;
  color: var(--color-ink);
  mix-blend-mode: multiply;
  opacity: 0.9;
  transition: transform var(--duration-slow) var(--ease-out);
  user-select: none;
  padding: var(--space-4);
  text-wrap: balance;
}

/* Card avec image de fond */
.project-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform var(--duration-slow) var(--ease-out);
}
.project-card--has-image:hover .project-card__img {
  transform: scale(1.04);
}
.project-card--has-image .project-card__name {
  z-index: 4;
  background: var(--color-bg);
  color: var(--color-ink);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  opacity: 0.92;
  font-weight: 500;
}
.project-card:hover .project-card__visual {
  transform: scale(1.06);
}
.project-card__visual em { font-style: normal; font-weight: 200; }

.project-card--bg-lavender { background: var(--color-lavender); }
.project-card--bg-lavender-soft { background: var(--color-lavender-soft); }
.project-card--bg-cream { background: var(--color-bg-soft); }
.project-card--bg-ink { background: var(--color-ink); color: var(--color-bg); }
.project-card--bg-ink .project-card__visual {
  color: var(--color-bg);
  mix-blend-mode: normal;
}

.project-card__num {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  opacity: 0.7;
}
.project-card__num .star { color: currentColor; }

.project-card__tags {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-5);
  pointer-events: none;
}
.project-card__tags .pill {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: var(--color-ink);
  opacity: 0;
  transform: translateY(14px) rotate(-3deg);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.project-card:hover .project-card__tags .pill {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}
.project-card:hover .project-card__tags .pill:nth-child(1) { transition-delay: 30ms; transform: rotate(-1.5deg); }
.project-card:hover .project-card__tags .pill:nth-child(2) { transition-delay: 80ms; transform: rotate(2deg); }
.project-card:hover .project-card__tags .pill:nth-child(3) { transition-delay: 130ms; transform: rotate(-1deg); }

.project-card__name {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ============================================
   TIMELINE V2 : trait centré, titre sticky à gauche, items à droite
   Trait dessiné progressivement au scroll.
   ============================================ */
.timeline-v2 {
  padding: var(--space-10) var(--gutter) var(--space-9);
  background: var(--color-lavender);
  position: relative;
}

.timeline-v2__head {
  max-width: var(--container-max);
  margin: 0 auto var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}
.timeline-v2__label {
  align-self: flex-start;
}
.timeline-v2__label .star { color: currentColor; }
.timeline-v2__heading {
  align-self: center;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: var(--lh-snug);
  max-width: 22ch;
  margin: var(--space-3) auto 0;
}
.timeline-v2__heading em { font-style: normal; font-weight: 200; }

/* Conteneur de la timeline : position relative pour héberger le rail absolu */
.timeline-v2__inner {
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
}

/* Rail vertical au centre : invisible par défaut, seul le rail-fill (animé)
   est dessiné en encre pleine. */
.timeline-v2__rail {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: transparent;
  pointer-events: none;
  z-index: 0;
}
.timeline-v2__rail-fill {
  width: 100%;
  height: 0%;
  background: var(--color-ink);
  transform-origin: top;
}

/* Chaque groupe = un titre à gauche + items à droite */
.timeline-v2__group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: var(--space-6) 0;
  position: relative;
  z-index: 1;
}

.timeline-v2__group-title {
  grid-column: 1;
  align-self: start;
  position: sticky;
  top: var(--space-9);
  text-align: right;
  padding-right: var(--space-8);
  font-family: var(--font-serif);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

.timeline-v2__items {
  grid-column: 2;
  padding-left: var(--space-8);
  display: flex;
  flex-direction: column;
}

.timeline-v2__item {
  position: relative;
  padding: var(--space-4) 0;
  /* Fond lavande nécessite un trait un peu plus marqué pour rester lisible */
  border-bottom: 1px solid rgba(26, 26, 26, 0.22);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.timeline-v2__item:first-child { padding-top: 0; }
.timeline-v2__item:last-child { border-bottom: 0; }

/* Étoile bullet posée sur le rail. Pas de fond : le rail (encre) et l'étoile
   (encre) se confondent visuellement → l'étoile devient un nœud du tracé.
   Apparaît avec un zoom + rotation quand le tracé l'atteint (.is-lit en JS). */
.timeline-v2__star-wrap {
  position: absolute;
  left: calc(-1 * var(--space-8));
  top: calc(var(--space-4) + 0.4em);
  width: 26px;
  height: 26px;
  margin-left: -13px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: var(--color-ink);
  /* État initial : invisible, écrasée, retournée */
  opacity: 0;
  transform: scale(0.15) rotate(-180deg);
  transform-origin: center;
  transition: opacity 0.6s var(--ease-out), transform 0.85s var(--ease-out);
  will-change: transform, opacity;
}
.timeline-v2__star-wrap.is-lit {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.timeline-v2__item:first-child .timeline-v2__star-wrap { top: 0.4em; }
.timeline-v2__star-wrap .star {
  width: 26px;
  height: 26px;
  color: var(--color-ink);
}

.timeline-v2__date {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  /* ink-muted (#8A8580) sur lavande : ratio ~3:1, trop faible en texte fin.
     ink-soft (#4A4A4A) reste secondaire visuellement mais lisible. */
  color: var(--color-ink-soft);
  text-transform: uppercase;
}
.timeline-v2__role {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  line-height: var(--lh-snug);
}
.timeline-v2__place {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink);
  line-height: var(--lh-snug);
}
.timeline-v2__content > .pill {
  margin-top: var(--space-2);
  align-self: flex-start;
}

/* Sur le fond lavande de la section, on force le fond des pills en crème
   pour qu'elles ressortent (override de .pill default lavender et de
   .pill--outline transparent). Bord et texte restent en ink. */
.timeline-v2 .pill {
  background: var(--color-bg);
}

/* ============================================
   SECTION SKILLS GÉANTE : titre Pangaia plein écran + pastilles flottantes
   Pastilles confinées dans la zone du mot, pas de débordement.
   ============================================ */
.skills {
  position: relative;
  padding: var(--space-8) 0 var(--space-9);
  background: var(--color-bg);
  overflow: hidden;
}
/* Pas de max-width : on s'aligne strictement sur les dividers, donc gutter à gutter
   sur tous les viewports. */
.skills__inner {
  position: relative;
  width: 100%;
  padding: 0 var(--gutter);
}

.skills__title {
  font-family: var(--font-serif);
  font-weight: 200;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-align: center;
  white-space: nowrap;
  /* Le mot "Skills" remplit maintenant toute la largeur disponible
     (entre les deux gutters) pour matcher les dividers. */
  font-size: clamp(8rem, 33vw, 540px);
  color: var(--color-ink);
  margin: 0;
  display: block;
}

.skills__chips {
  position: absolute;
  /* Les pastilles flottent strictement dans la zone du conteneur (donc du mot SKILLS) */
  inset: 0 var(--gutter);
  pointer-events: none;
}
.skills__chip {
  position: absolute;
  top: var(--top, 50%);
  left: var(--left, auto);
  pointer-events: auto;
}
.skills__chip .pill {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.75rem, 0.95vw, 0.95rem);
  padding: var(--space-3) var(--space-5);
  letter-spacing: 0.14em;
  border-width: 1.5px;
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.06);
}

/* Animation lévitation des pastilles (combine rotation initiale et drift sin) */
@keyframes pillFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(var(--pill-rot, 0deg));
  }
  25% {
    transform: translate(var(--float-x, 6px), var(--float-y, -4px))
               rotate(calc(var(--pill-rot, 0deg) + 1.6deg));
  }
  50% {
    transform: translate(calc(var(--float-x, 6px) * -0.5), calc(var(--float-y, -4px) * 0.5))
               rotate(calc(var(--pill-rot, 0deg) - 1.4deg));
  }
  75% {
    transform: translate(calc(var(--float-x, 6px) * 0.7), calc(var(--float-y, -4px) * -0.4))
               rotate(calc(var(--pill-rot, 0deg) + 0.8deg));
  }
}
.pill--float {
  animation: pillFloat var(--float-dur, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  will-change: transform;
}

@media (max-width: 900px) {
  .skills { padding: var(--space-7) 0; }
  .skills__title { font-size: clamp(5rem, 33vw, 16rem); }
  .skills__chip .pill { font-size: 0.72rem; padding: var(--space-2) var(--space-3); }
}

@media (max-width: 900px) {
  .timeline-v2__head { grid-template-columns: 1fr; gap: var(--space-3); }
  /* Sur tablette/mobile : timeline en colonne unique, rail à gauche */
  .timeline-v2__rail { left: 18px; transform: none; }
  .timeline-v2__group { grid-template-columns: 1fr; gap: var(--space-3); }
  .timeline-v2__group-title {
    position: static;
    text-align: left;
    padding-right: 0;
    padding-left: var(--space-7);
    margin-bottom: var(--space-3);
  }
  .timeline-v2__items { padding-left: var(--space-7); grid-column: 1; }
  .timeline-v2__star-wrap { left: calc(-1 * var(--space-7)); }
  .timeline-v2__skills { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ============================================
   FOOTER : opaque noir (fin de page)
   ============================================ */
.footer {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-10) var(--gutter) var(--space-5);
  position: relative;
  overflow: hidden;
}
.footer__cta {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  position: relative;
  z-index: 1;
}
.footer__deco {
  position: absolute;
  color: var(--color-bg);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.footer__deco--1 { top: 12%; right: 4%; width: 120px; transform: rotate(15deg); }

.footer__label {
  align-self: flex-start;
}
.footer__label .star { color: currentColor; }

.footer__heading {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: var(--lh-tight);
}
.footer__heading em { font-style: normal; font-weight: 200; color: var(--color-lavender); }
.footer__heading a {
  display: inline-block;
  border-bottom: 2px solid var(--color-lavender);
  padding-bottom: 0.05em;
  transition: color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.footer__heading a:hover { color: var(--color-lavender); transform: rotate(-1deg); }

.footer__contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: var(--space-6);
  margin-top: var(--space-3);
}
.footer__contact-block dt {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-lavender);
  margin-bottom: var(--space-2);
}
.footer__contact-block dd {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0;
}
.footer__contact-block a {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 0.5em 1em;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.footer__contact-block a:hover {
  background: var(--color-lavender);
  color: var(--color-ink);
  border-color: var(--color-lavender);
}

.footer__bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-ink-muted);
}

/* ============================================
   REVEAL au scroll : variantes plus marquées
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 420ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 490ms; }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 560ms; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 630ms; }
.reveal-stagger.is-visible > *:nth-child(11) { transition-delay: 700ms; }