/* phebe.smltech.ch — direction A « Nuit » (Luna, 25.09.2026). Chaque nombre vient de SPEC-SITE-A.md (§1, §2, §3) :
   tailles linéaires entre 390 et 1440 px de large. Rayon 0, aucune ombre, pas de bibliothèque.
   Seules polices livrées : Archivo 600 et 700 (sous-ensemble latin) et Geist Mono 400 — la page n'utilise ni 400 ni
   800, et aucun de ses caractères n'est dans latin-ext. La flèche du bouton est dessinée : « → » n'existe ni dans
   Archivo ni dans Geist Mono (elle tombait dans la police du système sur la planche). */

@font-face { font-family: "Archivo"; font-weight: 700; font-display: block; src: url(fonts/Archivo-700-normal-latin.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url(fonts/Archivo-600-normal-latin.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url(fonts/GeistMono-400.ttf) format("truetype"); }

:root {
  --encre: #101820;
  --papier: #f4f5f1;
  --filet: #97999b;
  --signal: #fe5000;
  --granit: #63666a;   /* la planète seulement : 3,1:1, jamais du texte */
  --trait: #2a323b;
  --t-ui: .12s; --t-recit: .3s; --t-scene: .8s;

  --mot: clamp(84px, 29.03px + 14.095vw, 232px);
  --sous: clamp(26px, 20.8px + 1.333vw, 40px);
  --phrase: clamp(34px, 22.86px + 2.857vw, 64px);
  --liste: clamp(30px, 20.34px + 2.476vw, 56px);
  --etiquette: clamp(12px, 11.26px + .19vw, 14px);
  --mono-pied: clamp(11px, 10.26px + .19vw, 13px);
  --bouton: clamp(15px, 13.89px + .286vw, 18px);
  --marge: clamp(20px, 6.63px + 3.429vw, 56px);

  /* l'orbite : rx 47 % / ry 16 % de la largeur à 390, 36 % / 12 % à 1440 ; au-delà, 36 % / 12 % */
  --rx: max(58.83px + 31.914vw, 36vw);
  --ry: max(21.39px + 10.514vw, 12vw);
}

@property --t { syntax: "<angle>"; inherits: false; initial-value: 25.714deg; }  /* 1/14 de tour = 2π/14 */

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; }
html { background: var(--encre); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { background: var(--encre); color: var(--papier); font-family: "Archivo", sans-serif; font-weight: 700; }

/* Le nom : toujours « PHÉB » + « é » minuscule, accent orange coupé à 26,6 % (mesuré pour Archivo 700).
   ⚠ JAMAIS de text-transform ici : uppercase écrit « PHÉBE ». */
.mot { font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap; text-transform: none; }
.o { display: inline-block; line-height: 1; color: transparent; -webkit-background-clip: text; background-clip: text;
     background-image: linear-gradient(to bottom, var(--signal) 0 26.6%, var(--papier) 26.6%); }

.mono { font-family: "Geist Mono", monospace; font-weight: 400; text-transform: uppercase; letter-spacing: .14em; color: var(--filet); }

/* Barre fixe : enfant direct de body, hors de tout ancêtre transform / filter / isolate. */
.barre { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between;
         align-items: center; padding: clamp(18px, 14.29px + .952vw, 28px) var(--marge); background: var(--encre); }
.mot-barre { font-size: clamp(22px, 19.77px + .571vw, 28px); }
.barre-par { font-size: var(--mono-pied); }

.ecran { position: relative; min-height: 100svh; }
.centre { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center;
          padding: 0 var(--marge); text-align: center; }

/* 1 · Accueil */
.orbite { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.incline { transform: rotate(-27deg); transform-box: view-box; transform-origin: 50% 47%; }
.geo { cx: 50%; cy: 47%; rx: var(--rx); ry: var(--ry); }
.pointilles { stroke: var(--filet); stroke-opacity: .7; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 9; }
.planete { r: max(5px, var(--rx) / 48); cx: calc(50% + var(--rx) * cos(var(--t))); cy: calc(47% + var(--ry) * sin(var(--t)));
           fill: var(--granit); stroke: var(--papier); stroke-opacity: .75; stroke-width: 2; }
.mot-grand { position: absolute; z-index: 1; left: 0; right: 0; top: calc(47% - var(--mot) / 2); text-align: center;
             font-size: var(--mot); }
.e1-bas { position: absolute; left: var(--marge); right: var(--marge); top: calc(47% + clamp(150px, 119.54px + 7.81vw, 232px));
          text-align: center; }
.sous { font-size: var(--sous); letter-spacing: -.01em; }
/* « un point plus grand » que le mono du PIED (11/13), comme sur la planche : 12/14 = la taille d'étiquette */
.bientot { margin-top: clamp(18px, 14.29px + .952vw, 28px); font-size: var(--etiquette); }

/* 2 · Les deux travaux ; 5 · Le nom */
.phrase { font-size: var(--phrase); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.invisible { margin-top: clamp(12px, 9.77px + .571vw, 18px); color: var(--filet); }

/* 3 · Le soir */
.etiquette { font-size: var(--etiquette); margin-bottom: clamp(26px, 20.8px + 1.333vw, 40px); }
.ligne { font-size: var(--liste); line-height: 1.15; letter-spacing: -.015em; text-wrap: balance;
         margin-top: clamp(6px, 11.49px - .381vw, 10px); }
.etiquette + .ligne { margin-top: 0; }
.pret { margin-top: clamp(34px, 25.83px + 2.095vw, 56px); color: var(--signal); }   /* LA seule phrase orange */

/* 6 · Contact et pied */
.e6-haut { position: absolute; left: var(--marge); right: var(--marge); top: 42%; transform: translateY(-50%); text-align: center; }
.mot-moitie { font-size: calc(var(--mot) / 2); }
.e6-bouton { margin-top: clamp(24px, 19.54px + 1.143vw, 36px); }
.btn { display: inline-flex; align-items: center; gap: .5em; padding: 16px 26px; border: 1.5px solid var(--papier);
       background: transparent; color: var(--papier); font-weight: 600; font-size: var(--bouton); text-decoration: none;
       transition: background-color var(--t-ui), color var(--t-ui); }
.btn[href]:hover, .btn[href]:focus-visible { background: var(--papier); color: var(--encre); outline: none; }
.fleche { width: .9em; height: .6em; flex: none; }
.pied { position: absolute; left: var(--marge); right: var(--marge); bottom: clamp(20px, 17.03px + .762vw, 28px);
        border-top: 1px solid var(--trait); padding-top: clamp(12px, 10.51px + .381vw, 16px);
        display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.pied .mono { font-size: var(--mono-pied); }
.pied-g { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.mot-pied { font-size: calc(var(--mono-pied) + 5px); }
.pied a { text-decoration: none; }
.pied a:hover, .pied a:focus-visible { color: var(--papier); text-decoration: underline; text-underline-offset: 3px; outline: none; }

/* ─── Le mouvement : un geste par écran (SPEC §4). L'état du HTML est l'état final. ─── */
@media (prefers-reduced-motion: no-preference) {
  /* 1 · la planète trace l'orbite, une fois : classe posée par orbite.js, retirée à la fin. Le masque et la planète
     suivent LE MÊME chemin (tracé par orbite.js, départ à 1/14 de tour), à la même longueur d'arc au même instant :
     1er essai, la planète suivait l'angle et le masque l'arc — elle devançait le pointillé de ~50 px à 1440. */
  .orbite-joue .pointilles { mask: url(#trace); }
  .orbite-joue .traceur { animation: trace 2.4s ease-in-out .4s both; }
  .orbite-joue .planete { cx: 0; cy: 0; offset-rotate: 0deg; animation: glisse 2.4s ease-in-out .4s both; }
  @keyframes trace { from { stroke-dasharray: 0 1000; } to { stroke-dasharray: 1000 0; } }
  @keyframes glisse { from { offset-distance: 0%; } to { offset-distance: 100%; } }

  @supports (animation-timeline: view()) {
    .e2 { view-timeline: --e2 block; }
    .e3 { view-timeline: --e3 block; }
    /* 2 · « Et celui que personne ne voit. » s'allume */
    .invisible { animation: allume linear both; animation-timeline: --e2; animation-range: entry 20% cover 45%; }
    @keyframes allume { from { color: var(--trait); } to { color: var(--filet); } }
    /* 3 · les trois lignes puis « Déjà préparé. », une à une. Sur une timeline de défilement le décalage se dit en
       portion de défilement, pas en millisecondes : 5 % d'écart entre deux lignes. */
    .e3 .ligne { animation: monte linear both; animation-timeline: --e3; }
    .e3 .l1 { animation-range: entry 35% entry 60%; }
    .e3 .l2 { animation-range: entry 40% entry 65%; }
    .e3 .l3 { animation-range: entry 45% entry 70%; }
    .e3 .pret { animation-range: entry 50% entry 75%; }
    @keyframes monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  }
}