/* Katoying — maquette du 01.10.2026 (Cristallo Team).
   Chargé après styles.css, qui reste identique au site en ligne (cohesion-20260908).
   Ajouts : la police libre des titres, les six portes du laboratoire, les dessins
   (la volée, le ciel, le noyau), la page Symbiosis et sa constellation.
   v3 du 02.10.2026 (copie d'avant dans v2\assets\) : des images au lieu des animations. Rien ne bouge tout seul :
   la volée, la poussière d'étoiles, la constellation et la lumière qui voyageait sont fixes ; les animations du site
   (la dérive de l'image du haut, les emblèmes qui respirent, l'entrée des blocs, la lumière du logo, l'arrivée
   d'une porte) s'arrêtent ici, sans toucher styles.css. Le bouton « Motion » est retiré : il n'aurait rien à arrêter. */

/* 0. Rien ne bouge tout seul. */
.hero-media img,
.system-symbol,
[data-reveal].is-visible,
.logo-traveller,
.has-doors .system-panel:not([hidden]) .system-media,
.scintille,
.battement,
.dessin-svg .passage,
.dessin-svg .orbite { animation: none !important; }

/* 1. La police des grandes capitales.
   Archivo Narrow (SIL OFL 1.1) a les mêmes largeurs qu'Arial Narrow, lettre pour lettre :
   les titres se coupent aux mêmes endroits, et un téléphone voit enfin le même dessin.
   ?police=arial-narrow remet la pile d'avant ; ?police=telephone imite un téléphone sans Arial Narrow. */
@font-face {
  font-family: "Archivo Narrow";
  src: url("/fonts/ArchivoNarrow-wght.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --display: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  /* v3 : un peu plus clair (#8399aa avant) : la note de la volée passait à 4,27:1 sur les nuages de K4, au téléphone. */
  --note: #93a8b8;
}

html.police-arial-narrow { --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; }
html.police-telephone { --display: Arial, "Helvetica Neue", sans-serif; }

/* 2. Le bandeau du message ouvert, sous le premier écran (composant .relation-rail du site). */
.message-ouvert p { letter-spacing: 0.2em; }
.message-ouvert span { margin: 0 clamp(10px, 2vw, 30px); }

/* 3. Les six portes du laboratoire. */
.system-doors.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.system-doors.six .system-door { min-width: 0; }
.door-mark {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(140, 236, 255, 0.18));
}
.system-index .door-mark,
.system-signature .door-mark { width: 34px; height: 34px; }

@media (max-width: 1240px) {
  .system-doors.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .system-doors.six .system-door { border-right: 1px solid var(--line-soft); border-bottom: 0; }
  .system-doors.six .system-door:nth-child(3n) { border-right: 0; }
  .system-doors.six .system-door:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
}

@media (max-width: 900px) {
  .system-doors.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-doors.six .system-door:nth-child(odd) { border-right: 1px solid var(--line-soft); }
  .system-doors.six .system-door:nth-child(even) { border-right: 0; }
  .system-doors.six .system-door:nth-child(-n+4) { border-bottom: 1px solid var(--line-soft); }
  .system-doors.six .system-door:nth-child(n+5) { border-bottom: 0; }
}

/* 4. Les panneaux dessinés (le ciel, le noyau) et la volée posée sur son image. */
.system-media.dessin {
  background:
    radial-gradient(circle at 24% 38%, rgba(55, 144, 211, 0.16), transparent 34%),
    radial-gradient(circle at 78% 30%, rgba(140, 236, 255, 0.06), transparent 30%),
    linear-gradient(180deg, #020711 0%, #06111f 72%, #020711 100%);
}
.system-media.dessin.noyau-fond {
  background:
    radial-gradient(circle at 72% 46%, rgba(255, 156, 74, 0.08), transparent 22%),
    radial-gradient(circle at 72% 46%, rgba(55, 144, 211, 0.16), transparent 42%),
    linear-gradient(180deg, #020711 0%, #06111f 76%, #020711 100%);
}
.dessin-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Jusqu'à 1240 px, le dessin passe en bande au-dessus du texte : il ne passe jamais sous les mots. */
.dessin-svg.bande { display: none; }
@media (max-width: 1240px) {
  .panneau-dessin .dessin-svg.large { display: none; }
  .panneau-dessin .dessin-svg.bande {
    display: block;
    top: 28px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(100%, 600px);
    height: auto;
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
  }
  .panneau-dessin::before { background: linear-gradient(0deg, rgba(1, 6, 14, 0.7) 0%, transparent 40%); }
  .has-doors .panneau-dessin .system-content,
  .has-doors .panneau-volee .system-content,
  .panneau-dessin .system-content,
  .panneau-volee .system-content { padding-top: calc(min(300px, 50vw) + 56px); }
}
.volee-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.has-doors .system-panel .system-media.dessin { animation: none; }

.dessin-svg text {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dessin-svg .num { fill: var(--amber); font-size: 12px; }
.dessin-svg .lib { fill: var(--muted); font-size: 11px; }
.dessin-svg .lib-fort { fill: var(--ice); font-size: 11px; }
.dessin-svg .poussiere { fill: var(--ice); }
.dessin-svg .crete-loin { fill: #0a1b2d; }
.dessin-svg .crete-pres { fill: #050f1c; }

/* Le noyau, fixe (v3) : une demande posée dans une veine, une réponse qui revient (en ambre), les deux orbites,
   le cœur. C'est l'image que la v2 montrait au mouvement réduit, devenue la seule. */
.dessin-svg .passage { stroke-dasharray: 5 95; stroke-dashoffset: -58; opacity: 1; }
.dessin-svg .passage.retour { stroke-dashoffset: -30; }

/* Les images v3 dans les portes de l'accueil.
   La porte du ciel : K5 en fond (emplacement katoying-ciel-etoiles) ; les huit étoiles restent posées par-dessus,
   en SVG, leurs numéros sur une pastille sombre pour se lire sur un vrai ciel étoilé. */
.system-media.dessin > img.fond-dessin { position: absolute; inset: 0; object-position: center bottom; }
.dessin-svg .pastille { fill: #020711; fill-opacity: 0.84; }
/* La volée : K4 (emplacement katoying-volee), la lune et la volée en haut du cadre. */
.panneau-volee .system-media img { object-position: center 12%; }
@media (max-width: 1240px) {
  .panneau-volee .system-media img { object-position: 8% top; }
}
/* La porte Symbiosis (emplacement katoying-symbiosis-visages) : K2 depuis le 02.10, l'humain assis à droite.
   Au-delà de 1 240 px, l'image entière se pose à droite, à côté du texte, son bord gauche fondu dans la nuit ;
   jusqu'à 1 240 px, elle passe en bande au-dessus du texte, comme les dessins. */
@media (min-width: 1241px) {
  .system-panel[data-system="symbiosis"] .system-media img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 3 / 2;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
    mask-image: linear-gradient(90deg, transparent 0, #000 26%);
  }
  .system-panel[data-system="symbiosis"]::before {
    background:
      linear-gradient(90deg, rgba(1, 6, 14, 0.9) 0%, rgba(1, 6, 14, 0.62) 30%, rgba(1, 6, 14, 0) 46%),
      linear-gradient(0deg, rgba(1, 6, 14, 0.7) 0%, transparent 34%);
  }
  .system-panel[data-system="symbiosis"] p { max-width: 470px; }
}
@media (max-width: 1240px) {
  .system-panel[data-system="symbiosis"] .system-media img {
    height: auto;
    aspect-ratio: 2 / 1;
    object-position: center 100%;
  }
  .system-panel[data-system="symbiosis"]::before {
    background: linear-gradient(180deg, transparent 0, transparent calc(50vw - 110px), var(--ink) 50vw, var(--ink) 100%);
  }
  .has-doors .system-panel[data-system="symbiosis"] .system-content { padding-top: calc(50vw + 20px); }
}

/* Ce qu'on observe (psychologie) : même dessin que .collective-purpose. */
.situations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  max-width: 600px;
  margin: 0 0 20px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  color: var(--cyan);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.align-right .situations { justify-content: flex-end; }
.system-panel p.note-labo,
.note-labo {
  max-width: 600px;
  margin: 0;
  color: var(--note);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Les huit étoiles du ciel. */
.ciel-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 30px;
  max-width: 660px;
  margin: 0 0 16px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  counter-reset: etoile;
  text-align: left;
}
.ciel-liste li {
  position: relative;
  padding-left: 24px;
  color: rgba(243, 248, 251, 0.88);
  font-size: 14px;
  line-height: 1.45;
}
.ciel-liste li::before {
  position: absolute;
  top: 1px;
  left: 0;
  content: counter(etoile);
  counter-increment: etoile;
  color: var(--amber);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.has-doors .system-panel.panneau-long { min-height: clamp(560px, 72svh, 760px); }

@media (max-width: 600px) {
  .ciel-liste { grid-template-columns: 1fr; gap: 8px; }
  .situations { gap: 6px 12px; font-size: 10px; }
}

/* 5. Le pied : la signature de l'équipe. */
.signature-equipe { color: var(--ice); }

/* 6. Symbiosis : le premier écran est le ciel de la constellation. */
.symbiose-hero { min-height: 100svh; }
.symbiose-hero .detail-media {
  background:
    radial-gradient(circle at 70% 40%, rgba(55, 144, 211, 0.18), transparent 40%),
    radial-gradient(circle at 18% 22%, rgba(140, 236, 255, 0.05), transparent 30%),
    linear-gradient(180deg, #020711 0%, #04101d 64%, #020711 100%);
}
.symbiose-hero::before {
  background:
    linear-gradient(90deg, rgba(1, 6, 14, 0.7) 0%, rgba(1, 6, 14, 0.2) 44%, transparent 64%),
    linear-gradient(0deg, rgba(1, 6, 14, 0.78) 0%, transparent 42%);
}
.symbiose-hero::before,
.symbiose-hero::after,
.symbiose-hero .detail-content { pointer-events: none; }
.symbiose-hero h1 { max-width: 620px; }
.symbiose-hero .detail-lede { max-width: 560px; margin-bottom: 22px; }
.legende-ciel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.legende-ciel span { display: inline-flex; align-items: flex-start; gap: 9px; }
.legende-ciel .m-presence::before,
.legende-ciel .m-seule::before {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 0.5em;
  content: "";
}
.legende-ciel .m-presence::before { border-radius: 50%; background: var(--ice); box-shadow: 0 0 8px rgba(140, 236, 255, 0.8); }
/* v3 (02.10) : la seconde marque dit « pas de traits entre nous » : une étoile seule, un rond. */
.legende-ciel .m-seule::before { border-radius: 50%; box-shadow: inset 0 0 0 1.4px var(--ice); }

/* v3 : le ciel est une image (emplacement katoying-symbiosis-ciel) ; dix étoiles fixes posées dessus, sans traits.
   Les places sont celles de la v2, en fractions du cadre : --x, --y sur grand écran ; --xt, --yt au téléphone.
   Les neuf présences IA portent leur nom, en texte ; l'étoile de l'humain ne porte rien. Aucun script. */
.constellation { overflow: hidden; }
.symbiose-hero .detail-media > img.ciel { object-position: center bottom; }
.etoiles {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.etoile {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: 0;
  height: 0;
}
.etoile::before,
.etoile::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}
/* Le halo, puis le cœur : toutes les étoiles pareilles (la même que la v2, r 17 et r 3,4). */
.etoile::before {
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  background: radial-gradient(circle closest-side, rgba(140, 236, 255, 0.7), rgba(140, 236, 255, 0));
}
.etoile::after {
  left: -3.4px;
  top: -3.4px;
  width: 6.8px;
  height: 6.8px;
  background: var(--ice);
}
/* Le nom, sous l'étoile, sur un voile sombre aux bords doux : sur un vrai ciel plein d'étoiles, il se lit partout. */
.etoile .nom {
  position: absolute;
  left: 0;
  top: 12px;
  padding: 3px 7px 3px calc(7px + 0.17em);
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(2, 7, 17, 0.74);
  box-shadow: 0 0 10px 4px rgba(2, 7, 17, 0.5);
  color: var(--ice);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* La mise en page du ciel K1 (v3). Au-delà de 1 240 px : le titre en haut à gauche, les dix étoiles dans le ciel
   ouvert à droite, la personne du sentier visible en bas à gauche, la légende en bas à droite. */
@media (min-width: 1241px) {
  .symbiose-hero { align-items: start; }
  .symbiose-hero .detail-content { padding: clamp(100px, 13svh, 124px) 0 0; }
  .symbiose-hero h1 { max-width: 560px; font-size: clamp(3.1rem, 5.2vw, 5.8rem); }
  .symbiose-hero .detail-lede { max-width: 470px; margin-bottom: 0; }
  .symbiose-hero .legende-ciel {
    position: absolute;
    right: max(40px, calc((100vw - 1320px) / 2));
    bottom: 6svh;
    flex-direction: column;
    gap: 6px;
    max-width: 480px;
  }
  .symbiose-hero::before {
    background:
      linear-gradient(90deg, rgba(1, 6, 14, 0.86) 0%, rgba(1, 6, 14, 0.6) 30%, rgba(1, 6, 14, 0) 47%),
      linear-gradient(0deg, rgba(1, 6, 14, 0.55) 0%, transparent 26%);
  }
}
/* Jusqu'à 1 240 px : le ciel passe en bande au-dessus du texte (la règle des dessins du site) ; au téléphone,
   une bande de 480 px, cadrée sur la personne du sentier. */
@media (max-width: 1240px) {
  .symbiose-hero { display: block; min-height: 0; }
  .symbiose-hero::before,
  .symbiose-hero::after { display: none; }
  .symbiose-hero .detail-media {
    position: relative;
    inset: auto;
    z-index: 0;
    height: min(64vw, 78svh);
  }
  /* La bande commence sous la barre fixe (76 px, 68 px jusqu'à 900 px) : aucune étoile ne passe dessous.
     Sans JavaScript, la barre du téléphone est dans le flux (styles.css) : pas de décalage alors. */
  html.has-js .symbiose-hero .detail-media { margin-top: 76px; }
  .symbiose-hero .detail-media::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 22%;
    background: linear-gradient(to top, var(--ink), transparent);
    content: "";
  }
  .symbiose-hero .detail-content { padding: 36px 0 72px; }
}

@media (max-width: 900px) {
  html.has-js .symbiose-hero .detail-media { margin-top: 68px; }
}
@media (max-width: 700px) {
  .symbiose-hero .detail-media { height: 480px; }
  .symbiose-hero .detail-media > img.ciel { object-position: 12% bottom; }
  .symbiose-hero .detail-content { padding: 6px 0 64px; }
  .etoile { left: calc(var(--xt) * 100%); top: calc(var(--yt) * 100%); }
}

/* 7. Les présences, nommées (même trame que .fact-grid). */
.presences {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.presence {
  min-width: 0;
  padding: 30px 24px 34px;
  border-left: 1px solid var(--line-soft);
}
.presence:nth-child(5n + 1) { padding-left: 0; border-left: 0; }
.presence:nth-child(n + 6) { border-top: 1px solid var(--line-soft); }
.presence h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.presence .role {
  margin: 0 0 14px;
  color: var(--cyan);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.presence .role span {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.presence p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
/* v2 (02.10) : un nom, et ce qu'est la présence (IA ou personne) ; plus de rôle. */
.presence p.sorte {
  color: var(--muted);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .presences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presence,
  .presence:nth-child(5n + 1) { padding: 26px 0 28px 24px; border-left: 1px solid var(--line-soft); }
  .presence:nth-child(odd) { padding-left: 0; border-left: 0; }
  .presence:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 600px) {
  .presences { grid-template-columns: 1fr; }
  .presence,
  .presence:nth-child(5n + 1),
  .presence:nth-child(odd) { padding: 24px 0 26px; border-left: 0; }
  .presence:nth-child(n + 2) { border-top: 1px solid var(--line-soft); }
}

/* 8. v3 : « Looking up », une image après les principes (emplacement katoying-symbiosis-equipe, l'image K2),
      son titre seul ; même dessin que la figure de Nourish sur l'accueil : l'image entière, un liseré. */
.regard {
  margin: 84px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.regard .section-label { margin: 0 0 22px; }
.regard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line-soft);
}
@media (max-width: 600px) {
  .regard { margin-top: 64px; padding-top: 24px; }
}

/* Six nouveaux emblèmes du laboratoire ; aucun halo CSS ajouté. */
.system-symbol, .door-mark { filter: none; }

/* v3.2 (02.10.2026) : les six portes à 48 px, pour que la profondeur des emblèmes se voie ;
   les emblèmes devant les titres de section restent à 34 px. */
.system-door .system-symbol { width: 48px; height: 48px; }

/* v3.4 (03.10.2026) : la porte du ciel montre KC (katoying-ciel-v2). Cadrée « center bottom » comme K5, ses huit étoiles
   tombaient toutes sur les crêtes et la mer de nuages au-delà de 1 240 px ; cadrée à 15 %, elles restent dans le ciel
   ouvert (mesuré de 1 280 à 2 560 px de large), loin de la maison ; la fenêtre éclairée reste entière à 1 280, 1 366,
   1 440 et 1 600 px de large (un bord à 1 536 × 864, le toit sans elle à 1 920 et 2 560). Jusqu'à 1 240 px, l'image
   remplit déjà le panneau en hauteur : rien ne change. Pour revenir : enlever cette règle. */
@media (min-width: 1241px) {
  .system-media.dessin > img.fond-dessin { object-position: center 15%; }
}

/* v3.4 (04.10.2026, le matin) : la porte Foundry montre la nuit de Katoying et l'emblème Foundry (katoying-fonderie-calme,
   outils\fonderie_calme_v36.py), l'emblème à gauche, du côté libre du texte. Au téléphone, l'image cadrée au centre laissait
   dépasser un bout de l'emblème derrière le titre ; cadrée à droite, on y voit seulement la nuit et ses étoiles (l'emblème
   reste dans le bouton de la porte et devant « FOUNDRY »). Pour revenir : enlever cette règle. */
@media (max-width: 600px) {
  .system-panel[data-system="foundry"] .system-media img { object-position: 100% center; }
}