/* =========================================================
   À PROPOS — L'HORIZON

   Le design « J2 — L'horizon, affiné », retenu sur la planche de
   maquettes : le parcours en décor, un globe éclairé dont la route
   s'anime, la photo sous verre devant lui, et le récit à gauche. Le
   contenu est celui de l'ancienne page, mot pour mot. Chargée APRÈS
   style.css, et seulement sur about.html.

   SUR ORDINATEUR, TOUT TIENT DANS L'ÉCRAN, comme avant : la colonne de
   texte est en `em` d'un seul corps, et apropos.js cherche le plus grand
   corps pour lequel elle tient dans la hauteur de la fenêtre. Le globe et
   la photo, eux, suivent la largeur ET la hauteur, pour ne jamais
   déborder d'un écran bas.

   Les anciennes règles `.apropos-*` de style.css ne servent plus à cette
   page ; elles restent le temps de vérifier qu'aucune autre ne s'en sert.
   ========================================================= */

:root {
  --font-sans: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --ap-courbe: cubic-bezier(0.16, 1, 0.3, 1);
  /* Le diamètre du globe : les deux tiers de la largeur, sans jamais
     dépasser 1,07 fois la hauteur — relevé sur la maquette, 960 px pour
     1440 × 900. */
  --ap-globe: min(66.7vw, 107vh);
}

.ap {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
}

/* ---------- Le globe ---------- */
.ap-halo {
  position: absolute;
  left: 72.2vw;
  top: 55.5%;
  width: calc(var(--ap-globe) * 1.15);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.05), transparent 70%);
}
.ap-globe {
  position: absolute;
  left: 72.2vw;
  top: 55.5%;
  width: var(--ap-globe);
  height: auto;
  max-width: none;
  translate: -50% -50%;
  pointer-events: none;
  user-select: none;
}

/* LE FONDU ENTRE LE TEXTE ET LE GLOBE. Noir franc sous la colonne, puis
   une descente en trois paliers : un seul dégradé linéaire laissait les
   points du globe passer sous la fin des lignes. */
.ap-fondu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 20%),
    linear-gradient(to right, #000 0%, #000 44%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.12) 56%, transparent 61%);
}

/* ---------- La photo ----------
   Droite, sans inclinaison ni reflet : un essai penché faisait bon marché.
   Posée devant le globe, elle tient par son cadre de verre et son ombre. */
.ap-photo {
  position: absolute;
  z-index: 2;
  left: 50.3vw;
  top: 59.6%;
  width: clamp(170px, min(16.1vw, 25.8vh), 280px);
  margin: 0;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 50px 90px -30px #000,
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ap-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 867 / 1000;
  object-fit: cover;
  border-radius: 13px;
}

/* ---------- Le texte ---------- */
.ap-texte {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  /* La colonne grandit avec le corps : sur un grand écran le texte monte à
     1,18 et « Ludo · Réalisateur » passait sur deux lignes dans 596 px. */
  width: calc(var(--pad-x) + min(596px * var(--k, 1), 41.4vw));
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(84px, 10vh, 100px) 0 clamp(28px, 4vh, 40px) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* UN SEUL CORPS, ET TOUT EN `em`. `--k` est posé par apropos.js ; à
   1440 × 900 il vaut 1 et les tailles sont celles de la maquette. */
.ap-contenu { font-size: calc(16px * var(--k, 1)); }

.ap-surtitre {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ap-filet {
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}
/* La marge est en `em` DU TITRE : 0,28 × 58 px, les 16 px de la maquette. */
.ap-titre {
  margin-top: 0.28em;
  font-size: 3.625em;
}
.ap-chapeau {
  margin-top: 1.16em;
  font-size: 1.1875em;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: #fff;
}
.ap-recit { margin-top: 1.25em; }
.ap-recit p {
  font-size: 0.906em;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.62);
}
.ap-recit p + p { margin-top: 0.69em; }
.ap-recit .ap-accent { color: #fff; }

/* ---------- Le bloc Polar ---------- */
.ap-polar {
  margin-top: 1.625em;
  padding-top: 1.375em;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* LE LOGOTYPE DU HERO DE L'ACCUEIL, aux rapports de .hero-verrou
   (v30.css) : le signe à 1,167 fois le corps, 0,46 em entre le mot et le
   descripteur, et le descripteur à la largeur du mot, 8,807 em. Les trois
   pièces passent par un masque, comme le nom de l'en-tête : les fichiers
   d'assets/brand en cache, et la couleur du texte. */
.ap-logo {
  display: flex;
  align-items: center;
  gap: 0.78em;
  font-size: 1.125em;
  color: #fff;
}
.ap-logo-signe {
  flex: none;
  display: block;
  width: 1.167em;
  height: 1.167em;
  background: currentColor;
  -webkit-mask: url(../brand/polar-signe.svg) no-repeat center / contain;
          mask: url(../brand/polar-signe.svg) no-repeat center / contain;
}
.ap-logo-mots {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.46em;
}
.ap-logo-mot,
.ap-logo-sous {
  display: block;
  width: 8.807em;
  background: currentColor;
}
.ap-logo-mot {
  height: 1em;
  -webkit-mask: url(../brand/polar-mot.svg) no-repeat center / contain;
          mask: url(../brand/polar-mot.svg) no-repeat center / contain;
}
.ap-logo-sous {
  height: calc(8.807em * 39 / 1189);
  opacity: 0.85;
  -webkit-mask: url(../brand/polar-sous.svg) no-repeat center / contain;
          mask: url(../brand/polar-sous.svg) no-repeat center / contain;
}

.ap-polar blockquote {
  margin: 1.1em 0 0;
  font-size: 0.906em;
  font-style: italic;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  text-wrap: balance;
}
.ap-cta {
  margin-top: 1.375rem;
  box-shadow: 0 10px 40px -10px rgba(255, 255, 255, 0.35);
}

/* ---------- L'entrée ----------
   Le globe apparaît en premier, puis la colonne se lève, puis la photo se
   pose. Une seule séquence, au chargement, et rien sous « moins de
   mouvement ». */
@media (prefers-reduced-motion: no-preference) {
  .ap-globe,
  .ap-halo { opacity: 0; scale: 0.97; transition: opacity 1.6s var(--ap-courbe), scale 2.2s var(--ap-courbe); }
  .ap-contenu > * { opacity: 0; translate: 0 18px; transition: opacity 1s var(--ap-courbe), translate 1.2s var(--ap-courbe); }
  .ap-photo { opacity: 0; translate: 0 24px; transition: opacity 1.1s var(--ap-courbe) 0.7s, translate 1.4s var(--ap-courbe) 0.7s; }

  .is-loaded .ap-globe,
  .is-loaded .ap-halo { opacity: 1; scale: 1; }
  .is-loaded .ap-contenu > * { opacity: 1; translate: none; }
  .is-loaded .ap-contenu > :nth-child(2) { transition-delay: 0.08s; }
  .is-loaded .ap-contenu > :nth-child(3) { transition-delay: 0.16s; }
  .is-loaded .ap-contenu > :nth-child(4) { transition-delay: 0.24s; }
  .is-loaded .ap-contenu > :nth-child(5) { transition-delay: 0.36s; }
  .is-loaded .ap-photo { opacity: 1; translate: none; }
}

/* =========================================================
   TABLETTE ET TÉLÉPHONE — le globe en tête, puis le texte
   ========================================================= */
@media (max-width: 960px) {
  /* 125 % de la largeur : au-delà, la France et l'Indonésie ne tiennent plus
     ensemble dans l'écran d'un téléphone. */
  :root { --ap-globe: min(125vw, 700px); }

  .ap { min-height: 0; padding-top: clamp(60px, 12vw, 90px); }
  /* Le globe devient un bandeau : on en montre le haut, comme un horizon. */
  .ap-halo,
  .ap-globe { left: 47%; top: calc(clamp(60px, 12vw, 90px) + var(--ap-globe) * 0.42); }
  .ap-fondu {
    background: linear-gradient(to bottom, transparent 0, transparent calc(var(--ap-globe) * 0.55), #000 calc(var(--ap-globe) * 0.78));
  }
  .ap-photo {
    position: relative;
    left: auto;
    top: auto;
    width: min(46vw, 240px);
    margin: calc(var(--ap-globe) * 0.2) 0 0 var(--pad-x);
  }
  .ap-texte {
    width: auto;
    min-height: 0;
    padding: 36px var(--pad-x) 72px;
    display: block;
  }
  .ap-contenu { font-size: 16px; }
  .ap-titre { font-size: clamp(30px, 8.4vw, 56px); }
  .ap-chapeau { font-size: 17px; }
  .ap-recit p { font-size: 15px; }
  .ap-polar blockquote { font-size: 15px; }
}