/**
 * Page À propos — Styles dédiés
 *
 * Esthétique : cinéma éditorial, longues plages de lecture, photos imposantes,
 * rythme alterné gauche/droite pour les actes.
 */

/* ============================================
   CONTAINER GÉNÉRAL
   ============================================ */
/* ============================================
   CONTAINER GÉNÉRAL
   ============================================
   On évite le padding-top global qui créait une bande visible
   au-dessus du hero. Le hero gère lui-même son décalage interne
   (padding-top pour ne pas être sous le header fixe). */
.about-page {
  overflow-x: hidden;
}


/* ============================================
   MODE CLAIR — Sections immersives "cinéma sombre"
   ============================================
   Les sections avec photo de fond (.about-hero--background et
   .about-act--banner) gardent VOLONTAIREMENT leur voile sombre même
   en mode clair, pour préserver la force dramatique des photos.
   On redéfinit donc localement les variables de texte en valeurs
   claires, pour que tous les textes enfants restent lisibles sur
   le voile sombre. Les sections en mode "side" (2 colonnes) ne sont
   pas concernées : elles suivent le thème clair normalement. */
[data-theme="light"] .about-hero--background,
[data-theme="light"] .about-act--banner {
  --fg: #fafafa;
  --fg-2: #c4bcae;
  --fg-3: #8a8278;
  --line: #2a2a2a;
  --line-2: #3a3a3a;
}


/* ============================================
   1. HERO — Nom + portrait
   Deux modes :
   - .about-hero--background : photo en fond plein écran avec dégradé sombre
   - .about-hero--side       : layout 2 colonnes (texte gauche, photo droite)
   ============================================ */
.about-hero {
  position: relative;
  overflow: hidden;
  /* Le hero démarre tout en haut de la page (sous le header transparent fixe).
     On compense en interne avec un padding-top qui inclut la hauteur du header. */
}


/* ===== MODE 1 : BACKGROUND CINÉMA ===== */

.about-hero--background {
  min-height: 80vh;
  /* padding-top inclut la hauteur du header fixe (~100px) + un peu d'air.
     Comme ça la photo de fond couvre TOUTE la zone (sous le header inclus),
     sans bande grise visible. */
  padding: calc(100px + var(--space-2xl)) 0 var(--space-2xl);
  display: flex;
  align-items: center;
}

/* Photo de fond plein écran */
.about-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position est défini en inline-style depuis le PHP (selon hero_photo_focus) */
  z-index: 0;
}

/* Dégradé sombre : la photo se révèle progressivement vers la droite */
.about-hero-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--about-veil, 7, 7, 7), .98) 0%,
    rgba(var(--about-veil, 7, 7, 7), .92) 25%,
    rgba(var(--about-veil, 7, 7, 7), .75) 50%,
    rgba(var(--about-veil, 7, 7, 7), .45) 75%,
    rgba(var(--about-veil, 7, 7, 7), .25) 100%
  );
  z-index: 1;
}

/* Le contenu passe au-dessus de l'image et du dégradé */
.about-hero--background .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* En mode background : une seule colonne, texte aligné à gauche */
.about-hero--background .about-hero-grid {
  display: block;
  max-width: 720px;
}

/* On masque la colonne photo (elle est gérée par le fond) */
.about-hero--background .about-hero-photo {
  display: none;
}


/* ===== MODE 2 : SIDE (2 colonnes) ===== */

.about-hero--side {
  /* Compense la hauteur du header fixe + espace habituel */
  padding: calc(100px + var(--space-2xl)) 0 var(--space-3xl, 120px);
}

.about-hero--side .about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}


/* ===== ÉLÉMENTS COMMUNS AUX 2 MODES ===== */

.about-hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about-hero-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.92;
  letter-spacing: -1px;
  margin: 0;
  text-transform: uppercase;
  color: var(--fg);
}

.about-hero-name-first {
  display: block;
}

.about-hero-name-last {
  display: block;
  color: var(--accent);
}

.about-hero-signature {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 19px);
  font-style: italic;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 520px;
  margin: var(--space-md) 0 0 0;
  border-left: 2px solid var(--accent);
  padding-left: var(--space-md);
}

/* Photo (mode side uniquement) */
.about-hero-photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-2);
}

.about-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Léger effet vignette en mode side */
.about-hero--side .about-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}


/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {
  /* Mode background : on garde un fond mais le dégradé devient plus fort */
  .about-hero--background {
    min-height: 60vh;
    height: auto;
    padding: calc(80px + var(--space-xl)) 0 var(--space-xl);
  }

  .about-hero--background .about-hero-bg-gradient {
    background: linear-gradient(
      180deg,
      rgba(var(--about-veil, 7, 7, 7), .80) 0%,
      rgba(var(--about-veil, 7, 7, 7), .92) 100%
    );
  }

  /* Mode side : on passe en colonne unique */
  .about-hero--side {
    padding: calc(80px + var(--space-xl)) 0 var(--space-2xl);
  }

  .about-hero--side .about-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .about-hero--side .about-hero-text {
    order: 2;
  }

  .about-hero--side .about-hero-photo {
    order: 1;
    aspect-ratio: 3/4;
    max-width: 420px;
    margin: 0 auto;
  }

  .about-hero-signature {
    font-size: 16px;
  }
}

/* Encore plus compact sur smartphones */
@media (max-width: 640px) {
  .about-hero--background {
    min-height: 55vh;
  }
}


/* ============================================
   2-4. ACTES — Sections narratives
   ============================================
   Deux modes disponibles :
   - .about-act--side    : layout 2 colonnes (texte + photo côte à côte)
   - .about-act--banner  : bandeau immersif 80vh avec média en fond
*/
.about-act {
  position: relative;
  overflow: hidden;
}

/* === MODE SIDE (2 colonnes) === */
.about-act--side {
  padding: var(--space-3xl, 120px) 0;
}

.about-act--side:nth-child(even) {
  background: var(--bg-2);
}

/* === MODE BANNER (bandeau 80vh) === */
.about-act--banner {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: var(--space-2xl) 0;
}

/* Image / vidéo / iframe en fond plein largeur */
.about-act-bg,
.about-act-bg-video,
.about-act-bg-video-wrap,
.about-act-bg-iframe-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.about-act-bg {
  background-size: cover;
  background-repeat: no-repeat;
}

.about-act-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pour iframes vidéo/splat en fond : on les agrandit pour couvrir l'écran
   (les iframes ne supportent pas object-fit, donc on les sur-dimensionne). */
.about-act-bg-video-wrap iframe,
.about-act-bg-iframe-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* 16:9 ratio basé sur la hauteur */
  height: 100%;
  min-width: 100%;
  min-height: 56.25vw; /* 16:9 ratio basé sur la largeur */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: auto; /* iframe interactive (cas du splat) */
}

/* Pour le splat (iframe sans ratio fixe), on prend la pleine largeur */
.about-act-bg-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

/* Dégradé sombre par-dessus le média */
.about-act-bg-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Variantes d'intensité du dégradé (selon contraste du média) */
.about-act--overlay-light .about-act-bg-gradient {
  background: linear-gradient(90deg,
    rgba(var(--about-veil, 7, 7, 7), .80) 0%,
    rgba(var(--about-veil, 7, 7, 7), .55) 50%,
    rgba(var(--about-veil, 7, 7, 7), .20) 100%
  );
}

.about-act--overlay-medium .about-act-bg-gradient {
  background: linear-gradient(90deg,
    rgba(var(--about-veil, 7, 7, 7), .92) 0%,
    rgba(var(--about-veil, 7, 7, 7), .75) 50%,
    rgba(var(--about-veil, 7, 7, 7), .35) 100%
  );
}

.about-act--overlay-strong .about-act-bg-gradient {
  background: linear-gradient(90deg,
    rgba(var(--about-veil, 7, 7, 7), .98) 0%,
    rgba(var(--about-veil, 7, 7, 7), .88) 50%,
    rgba(var(--about-veil, 7, 7, 7), .60) 100%
  );
}

/* Container du contenu au-dessus du fond */
.about-act--banner .container {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Important : le container laisse passer les clics par défaut,
     pour que les iframes interactives (splat) en dessous restent manipulables
     même là où le container est visuellement vide. */
  pointer-events: none;
}

/* Position du texte selon align */
.about-act-banner-content {
  max-width: 720px;
  /* Le contenu textuel lui-même reste sélectionnable et cliquable */
  pointer-events: auto;
  /* Limite la zone cliquable à la largeur réelle du texte (pas la colonne entière)
     pour que l'iframe reste interactive partout autour. */
  width: fit-content;
  width: -moz-fit-content;
}

/* Tous les éléments interactifs dedans (liens, boutons) restent cliquables */
.about-act-banner-content a,
.about-act-banner-content button {
  pointer-events: auto;
}

.about-act--align-left .about-act-banner-content {
  margin-right: auto;
}

.about-act--align-center .about-act-banner-content {
  margin: 0 auto;
  text-align: center;
}

.about-act--align-center .about-act-banner-content .act-content {
  margin-left: auto;
  margin-right: auto;
}

.about-act--align-center .about-act-banner-content .act-content .emphasis {
  border-left: none;
  border-top: 1px solid var(--accent);
  padding-left: 0;
  padding-top: var(--space-md);
  text-align: center;
}

.about-act--align-right .about-act-banner-content {
  margin-left: auto;
  text-align: right;
}

.about-act--align-right .about-act-banner-content .act-content {
  margin-left: auto;
}

.about-act--align-right .about-act-banner-content .act-content .emphasis {
  border-left: none;
  border-right: 2px solid var(--accent);
  padding-left: 0;
  padding-right: var(--space-md);
}

/* En mode banner, le dégradé inverse selon l'align */
.about-act--banner.about-act--align-right .about-act-bg-gradient {
  background: linear-gradient(-90deg,
    rgba(var(--about-veil, 7, 7, 7), .92) 0%,
    rgba(var(--about-veil, 7, 7, 7), .75) 50%,
    rgba(var(--about-veil, 7, 7, 7), .35) 100%
  );
}

.about-act--banner.about-act--align-center .about-act-bg-gradient {
  background: linear-gradient(180deg,
    rgba(var(--about-veil, 7, 7, 7), .55) 0%,
    rgba(var(--about-veil, 7, 7, 7), .85) 100%
  );
}

/* Hint flottant pour le bandeau iframe (Acte III) */
.iframe-hint--banner {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 3;
  opacity: 0.7;
}

.about-act--banner:hover .iframe-hint--banner {
  opacity: 1;
}

/* Petit séparateur fin avant chaque acte (mode side uniquement) */
.about-act + .about-act--side::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
}

/* === GRID 2 COLONNES (mode side) === */
.about-act-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.about-act--reverse .about-act-grid {
  grid-template-columns: 1fr 1.1fr;
}

.about-act-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* Animation au scroll */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1),
              transform .8s cubic-bezier(.4, 0, .2, 1);
}

.about-act.is-visible .about-act-text {
  opacity: 1;
  transform: translateY(0);
}

/* "— Acte I —" */
.act-number {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}

.act-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: 1px;
  margin: 0 0 var(--space-md) 0;
  text-transform: uppercase;
  color: var(--fg);
}

.act-content {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--fg-2);
  max-width: 580px;
}

/* Premier paragraphe (lead) plus marqué */
.act-content .lead,
.act-content > p:first-child {
  font-size: 19px;
  font-style: italic;
  color: var(--fg);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.act-content p {
  margin: 0 0 var(--space-md) 0;
}

.act-content p:last-child {
  margin-bottom: 0;
}

/* Conclusion emphatique (Acte III) */
.act-content .emphasis {
  font-family: var(--font-body);
  font-size: 18px;
  font-style: italic;
  color: var(--fg);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-md);
  margin-top: var(--space-lg);
}

.act-content .emphasis em {
  color: var(--accent);
  font-style: normal;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

.act-content strong {
  color: var(--fg);
  font-weight: 600;
}

/* Photo de l'acte */
.about-act-photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-2);
  /* Animation au scroll */
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 1s cubic-bezier(.4, 0, .2, 1),
              transform 1s cubic-bezier(.4, 0, .2, 1);
}

/* Aspect-ratio personnalisable via classes utilitaires.
   Appliqué uniquement au mode SIDE (2 colonnes) et au fallback mobile
   d'un mode bandeau qui aurait basculé en side. */
.about-act-photo.aspect-3-4  { aspect-ratio: 3/4; }
.about-act-photo.aspect-4-5  { aspect-ratio: 4/5; }
.about-act-photo.aspect-2-3  { aspect-ratio: 2/3; }
.about-act-photo.aspect-3-2  { aspect-ratio: 3/2; }
.about-act-photo.aspect-16-9 { aspect-ratio: 16/9; }
.about-act-photo.aspect-1-1  { aspect-ratio: 1/1; }

/* Idem pour le hero photo (mode side) */
.about-hero-photo.aspect-3-4  { aspect-ratio: 3/4; }
.about-hero-photo.aspect-4-5  { aspect-ratio: 4/5; }
.about-hero-photo.aspect-2-3  { aspect-ratio: 2/3; }
.about-hero-photo.aspect-3-2  { aspect-ratio: 3/2; }
.about-hero-photo.aspect-16-9 { aspect-ratio: 16/9; }
.about-hero-photo.aspect-1-1  { aspect-ratio: 1/1; }

.about-act.is-visible .about-act-photo {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.about-act-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.5s cubic-bezier(.4, 0, .2, 1);
}

.about-act-photo:hover img {
  transform: scale(1.04);
}

/* Vignette douce */
.about-act-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}

/* Mode SIDE avec vidéo (Acte II) */
.about-act-photo--video {
  background: #000;
}

.about-act-photo--video video,
.about-act-photo--video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.about-act-photo--video::after {
  display: none;
}

/* Placeholder si pas de photo */
.about-act-photo--placeholder {
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line-2);
}

.about-act-photo--placeholder span {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--fg-3);
}

.about-act-photo--placeholder::after {
  display: none;
}

/* ===== Mode IFRAME (Gaussian Splatting interactif) ===== */
.about-act-photo--iframe {
  /* Pas de vignette ni de transition image, on laisse l'iframe respirer */
  aspect-ratio: 4/5;
  background: #000;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.about-act-photo--iframe::after {
  /* Pas de gradient noir en bas en mode iframe */
  display: none;
}

.about-act-photo--iframe iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* Hover : un léger glow ambre pour signaler que c'est interactif */
.about-act-photo--iframe:hover {
  box-shadow: 0 0 0 1px var(--accent), 0 12px 40px rgba(212, 165, 116, 0.15);
  transition: box-shadow .4s ease;
}

/* Hint flottant en bas à gauche : "Cliquez et glissez pour explorer" */
.iframe-hint {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(var(--about-veil, 7, 7, 7), 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-2);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  z-index: 3;
}

.about-act-photo--iframe:hover .iframe-hint,
.about-act-photo--iframe:focus-within .iframe-hint {
  opacity: 1;
  transform: translateY(0);
}

.iframe-hint-icon {
  display: inline-block;
  color: var(--accent);
  font-size: 14px;
  animation: iframe-hint-spin 3s linear infinite;
}

@keyframes iframe-hint-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  /* Mode bandeau : sur mobile, on réduit la hauteur pour ne pas étouffer le contenu
     suivant. On utilise auto + min-height pour laisser le texte respirer si besoin. */
  .about-act--banner {
    min-height: 55vh;
    height: auto;
    padding: var(--space-xl) 0;
  }

  /* Dégradé vertical sur mobile pour garder le texte lisible */
  .about-act--banner .about-act-bg-gradient,
  .about-act--banner.about-act--align-left .about-act-bg-gradient,
  .about-act--banner.about-act--align-right .about-act-bg-gradient,
  .about-act--banner.about-act--align-center .about-act-bg-gradient {
    background: linear-gradient(180deg,
      rgba(var(--about-veil, 7, 7, 7), .55) 0%,
      rgba(var(--about-veil, 7, 7, 7), .85) 70%,
      rgba(var(--about-veil, 7, 7, 7), .95) 100%
    );
  }

  /* En mobile, le texte reste aligné à gauche peu importe le réglage desktop */
  .about-act--banner.about-act--align-right .about-act-banner-content,
  .about-act-banner-content {
    text-align: left;
    margin: 0;
    max-width: 100%;
  }

  /* Sécurité : si l'iframe a été chargée malgré tout (cas où wp_is_mobile retourne false
     à tort, ex. tablette en mode desktop), on la masque en CSS et on affiche un fallback
     "image sombre" pour éviter le lag. */
  .about-act-bg-iframe-wrap iframe {
    display: none;
  }

  .about-act-bg-iframe-wrap {
    background: var(--bg-2);
  }

  /* Mode side : tout en colonne unique */
  .about-act--side {
    padding: var(--space-2xl) 0;
  }

  .about-act-grid,
  .about-act--reverse .about-act-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* En mobile, la photo passe au-dessus du texte
     L'aspect-ratio est défini par les classes utilitaires (.aspect-X-Y)
     appliquées par PHP selon le choix ACF. */
  .about-act-photo {
    order: 1;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }

  /* Fallback si aucune classe d'aspect-ratio n'est appliquée */
  .about-act-photo:not([class*="aspect-"]) {
    aspect-ratio: 3/4;
  }

  .about-act-text {
    order: 2;
  }

  .act-title {
    font-size: 40px;
  }

  .act-content {
    font-size: 15px;
  }

  .act-content .lead,
  .act-content > p:first-child {
    font-size: 17px;
  }

  /* Hint repositionné */
  .iframe-hint--banner {
    bottom: 20px;
    right: 20px;
    font-size: 10px;
  }
}

/* Sur très petit écran (smartphones), on réduit encore plus la hauteur du bandeau */
@media (max-width: 640px) {
  .about-act--banner {
    min-height: 50vh;
  }
}


/* ============================================
   5. TIMELINE
   ============================================ */
.about-timeline {
  padding: var(--space-3xl, 120px) 0;
  position: relative;
}

.about-timeline + * {
  margin-top: 0;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: var(--space-2xl) auto 0;
  max-width: 720px;
  position: relative;
}

/* Ligne verticale ambre */
.timeline::before {
  content: "";
  position: absolute;
  left: 110px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--accent) 15%,
    var(--accent) 85%,
    transparent 100%
  );
  opacity: 0.5;
}

.timeline-item {
  display: grid;
  grid-template-columns: 90px 30px 1fr;
  align-items: start;
  padding: var(--space-md) 0;
  position: relative;
  /* Animation au scroll */
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .6s ease, transform .6s ease;
}

.timeline-item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline-year {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--accent);
  text-align: right;
  padding-right: var(--space-sm);
  line-height: 1.5;
}

.timeline-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  margin-top: 8px;
  justify-self: center;
  z-index: 2;
  transition: background 0.3s ease, transform 0.3s ease;
}

.timeline-item:hover .timeline-marker {
  background: var(--accent);
  transform: scale(1.2);
}

.timeline-event {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
  padding-left: var(--space-sm);
}

@media (max-width: 640px) {
  .timeline::before {
    left: 70px;
  }

  .timeline-item {
    grid-template-columns: 55px 25px 1fr;
    padding: var(--space-sm) 0;
  }

  .timeline-year {
    font-size: 18px;
  }

  .timeline-event {
    font-size: 14px;
  }
}


/* ============================================
   6. GEAR & STACK
   ============================================ */
.about-gear {
  padding: var(--space-3xl, 120px) 0;
  background: var(--bg-2);
}

.gear-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  max-width: 1100px;
  margin: var(--space-2xl) auto 0;
}

.gear-column {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--space-xl);
  transition: border-color .35s ease;
}

.gear-column:hover {
  border-color: var(--line-2);
}

.gear-column-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--space-lg) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.gear-column-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--accent);
  flex-shrink: 0;
}

.gear-column-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.gear-subcategory {
  margin-bottom: var(--space-lg);
}

.gear-subcategory:last-child {
  margin-bottom: 0;
}

.gear-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.gear-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gear-list li {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-2);
  padding-left: var(--space-md);
  position: relative;
  line-height: 1.5;
}

.gear-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Liste 3D : nom + catégorie */
.gear-list--full li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: 6px 0 6px var(--space-md);
  border-bottom: 1px solid var(--line);
}

.gear-list--full li:last-child {
  border-bottom: none;
}

.gear-list--full .gear-name {
  font-family: var(--font-body);
  color: var(--fg);
  font-weight: 500;
}

.gear-list--full .gear-cat {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-3);
}

@media (max-width: 768px) {
  .gear-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .gear-column {
    padding: var(--space-lg);
  }

  .gear-column-title {
    font-size: 20px;
  }
}


/* ============================================
   7. CTA FINAL
   ============================================ */
.about-cta {
  padding: var(--space-3xl, 120px) 0;
  position: relative;
  overflow: hidden;
}

.cta-halo {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-2xl);
}

/* Halo ambre */
.cta-halo::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at center,
    rgba(212, 165, 116, 0.12) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.cta-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg);
  margin: var(--space-md) 0 var(--space-md);
}

.cta-deck {
  font-family: var(--font-body);
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 var(--space-xl) 0;
}

.cta-buttons {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .cta-halo {
    padding: var(--space-lg);
  }

  .cta-title {
    font-size: 30px;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
}