/* =============================================================================
   site — en-tête, ouverture, chapitres, mots-symboles, point, pied de page
   =============================================================================
   Trois états de lecture, du plus simple au plus riche :

     1. sans JavaScript      chapitres empilés, mots-symboles complets ;
     2. .js sans .pin        mêmes chapitres, apparitions au défilement ;
     3. .js.pin (≥ 900 px)   chapitres épinglés, point unique qui descend
                             la page et se pose à la fin de chaque marque.

   L'état 1 est le seul écrit en dur : les deux autres s'ajoutent par-dessus.
   ========================================================================== */

/* ---------------------------------------------------------------- en-tête */
.top {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  padding: 20px 0;
}
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px }

/* Le nom du site suit le dessin des quatre marques — mot en camelCase,
   seconde moitié en gris, point de l'application lue. Il est la cinquième
   marque de la famille, et la première qu'on voit. */
.brand {
  font-weight: 900; font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -.04em; line-height: 1;
}
.brand .w2 { color: var(--mark-2); transition: color var(--fondu) }
.brand .dot {
  display: inline-block; vertical-align: baseline;
  width: calc(.54em * var(--cap-em)); height: calc(.54em * var(--cap-em));
  margin-left: calc(.31em * var(--cap-em) + .04em);
}

.nav { display: flex; align-items: center; gap: 22px; font-family: var(--ui); font-weight: 600; font-size: 12.5px }
.nav a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); transition: color .25s }
.nav a:hover { color: var(--ink) }

/* Pastille de rappel : seule celle de l'application lue est allumée. */
.tick {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  opacity: .3; transform: scale(.8);
  transition: opacity .45s, transform .45s;
}
.t-archi { background: #E5391C }
.t-archidocs { background: #155DFC }
.t-chantier { background: #B8D93E }
.t-autolog { background: #E8834A }
body[data-theme="archi"] .t-archi,
body[data-theme="archidocs"] .t-archidocs,
body[data-theme="chantier"] .t-chantier,
body[data-theme="autolog"] .t-autolog { opacity: 1; transform: none }

/* ------------------------------------------------------------- ouverture */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(140px, 20vh, 200px) 0 clamp(110px, 15vh, 160px);
}

/* Invite à défiler : la page ne se lit qu'au défilement, et rien ne le dit.
   La flèche descend en boucle, le point du rail la suivra. */
/* En flux, l'invite suit le contenu ; épinglée ou dans l'ouverture, elle se
   cale au bas de l'écran, là où le regard la cherche. */
.sprite { display: none }
.scroll-wrap { margin-top: clamp(30px, 5vh, 56px) }
.hero .scroll-wrap,
.js.pin .stage .scroll-wrap {
  position: absolute; left: 0; right: 0;
  bottom: clamp(26px, 5vh, 54px); margin-top: 0;
}
.scroll-hint {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink-3);
  transition: color .25s;
}
.scroll-hint:hover { color: var(--ink) }
.scroll-hint .mono { color: inherit }
.scroll-arrow { display: block; animation: descendre 2s cubic-bezier(.5, 0, .5, 1) infinite }
@keyframes descendre {
  0%, 100% { transform: translateY(-3px); opacity: .45 }
  50%      { transform: translateY(4px);  opacity: 1 }
}
.hero-h { font-size: clamp(36px, 6.2vw, 82px); letter-spacing: -.045em; margin-top: 18px }
.hero-h .line { display: block; overflow: hidden; padding-bottom: .08em }
.hero-p {
  margin-top: 26px; max-width: 48ch;
  color: var(--ink-2); font-size: clamp(15px, 1.35vw, 18px);
  transition: color var(--fondu);
}

/* ------------------------------------------------------------- chapitres */
.chapter { position: relative; padding: clamp(76px, 11vh, 130px) 0 }
.stage { position: relative; width: 100% }

/* Hors mode épinglé, chaque chapitre peint son propre fond : il porte alors
   ses couleurs lui-même (voir base.css) au lieu de les attendre du corps. */
html:not(.pin) .chapter {
  background: var(--page); color: var(--ink);
  transition: background-color var(--fondu), color var(--fondu);
}

.grid { display: grid; gap: clamp(34px, 4.5vw, 72px); align-items: center; width: 100% }
.grid-text-first { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) }
.grid-shot-first { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) }
.grid-center { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3.5vw, 48px) }

.col-center { display: flex; flex-direction: column; align-items: center; text-align: center }
.col-center .desc, .col-center .statement { margin-inline: auto }

/* Colonne centrée : les caractéristiques passent en ligne, faute de quoi la
   pile dépasse la hauteur d'écran une fois le chapitre épinglé. */
.col-center .specs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 3vw, 44px); width: 100%; max-width: 52rem;
}
.col-center .spec { flex-direction: column; align-items: center; text-align: center; gap: 5px; border-bottom: 0 }
.col-center .spec dd { text-align: center }
/* Même raison : la vue se cale sur la hauteur libre, pas sur la largeur. */
.js.pin .grid-center .col-shot { width: min(100%, calc(30vh * 21 / 9)) }

/* ---------- mots-symboles et point ----------
   Les quatre marques suivent le même dessin, relevé sur les logos fournis :
   un mot en camelCase dont la première moitié est en encre et la seconde en
   gris, suivi du point de l'application. Les couleurs ne sont pas écrites en
   dur — ce sont les jetons du thème, ce qui est exactement ce que montrent
   les références (#17171A / #8A8A93 / #B8D93E pour ChantierFlow).

   Composés plutôt que posés en image, les mots-symboles restent nets à toute
   taille, se détachent sur n'importe quel fond et suivent le fondu du thème.
   Le point est un vrai élément : c'est lui que le point voyageur vient
   occuper au défilement. */
/* Le corps se mesure sur la largeur de la colonne, pas sur celle de l'écran :
   « ChantierFlow » compte douze lettres contre sept à « AutoLog », et rien
   ne doit jamais séparer un mot de son point. D'où --k, propre à chaque
   marque, et le repli en vw pour les navigateurs sans unités de conteneur. */
.col-text, .col-center { container-type: inline-size }

.mark {
  font-weight: 900; letter-spacing: -.045em; line-height: 1;
  white-space: nowrap;
  font-size: clamp(34px, 5.4vw, 68px);
  font-size: clamp(34px, var(--k), var(--mx));
}
#archiflow    .mark { --k: 17cqi;   --mx: 84px }
#archidocs    .mark { --k: 17cqi;   --mx: 84px }
#chantierflow .mark { --k: 14.5cqi; --mx: 70px }
#autolog      .mark { --k: 19cqi;   --mx: 96px }
.mark .w2 { color: var(--mark-2); transition: color var(--fondu) }
.mark .dot {
  display: inline-block;      /* sa ligne de base est son bord inférieur :
                                 le point se pose donc sur la ligne du mot. */
  vertical-align: baseline;
  width: calc(.54em * var(--cap-em));    /* 0,54 × hauteur de capitale */
  height: calc(.54em * var(--cap-em));
  /* 0,31 × capitale, plus le rattrapage de l'approche négative du titre. */
  margin-left: calc(.31em * var(--cap-em) + .045em);
}

.dot { border-radius: 50%; background: var(--accent); transition: background-color var(--fondu), opacity .35s }

/* ---------- textes d'une application ---------- */
.tagline {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); margin-top: clamp(18px, 2.6vh, 28px);
  transition: color var(--fondu);
}
/* Le mot-symbole porte désormais l'échelle : la phrase passe en second. */
.statement {
  margin-top: 14px; max-width: 26ch;
  font-weight: 600; font-size: clamp(18px, 1.9vw, 25px);
  letter-spacing: -.02em; line-height: 1.25;
}
.desc {
  margin-top: 16px; max-width: 46ch;
  color: var(--ink-2); font-size: clamp(14.5px, 1.15vw, 16.5px);
  transition: color var(--fondu);
}

.specs { margin-top: clamp(24px, 3.2vh, 36px); max-width: 34rem }
.specs-wide { max-width: 40rem; width: 100% }
.spec {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 12px 0; text-align: left;
  border-top: 1px solid var(--line);
  transition: border-color var(--fondu);
}
.spec:last-child { border-bottom: 1px solid var(--line) }
.spec dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); transition: color var(--fondu);
}
.spec dd { font-size: 13.5px; font-weight: 500; text-align: right }
.state { color: var(--accent-ink); transition: color var(--fondu) }

/* ---------- bouton ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: clamp(26px, 3.4vh, 36px);
  font-family: var(--ui); font-weight: 600; font-size: 13px;
  padding: 13px 26px; border-radius: var(--pill);
  border: 1px solid var(--line); color: var(--ink);
  transition: background-color .3s, border-color .3s, color .3s;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--page) }
.btn .arrow { transition: transform .3s cubic-bezier(.25,.46,.45,.94) }
.btn:hover .arrow { transform: translateX(4px) }
.btn-solid { background: var(--ink); border-color: var(--ink); color: var(--page) }
.btn-solid:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #FFF }

/* ---------------------------------------------------- rail et point voyageur
   Décor du seul mode épinglé : hors de là, chaque marque porte son point. */
.rail-holder { display: none; position: fixed; inset: 0; z-index: 0; pointer-events: none }
.rail-wrap { position: relative; height: 100% }
.rail {
  position: absolute; top: 0; bottom: 0; left: var(--rail-x); width: 1px;
  background: var(--line); transition: background-color var(--fondu);
}
.pilot {
  display: none; position: fixed; top: 0; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); z-index: 60; pointer-events: none;
  will-change: transform;                       /* jamais de transition ici :
                                                   le défilement le pilote. */
  transition: background-color var(--fondu), opacity .7s ease .3s;
}

/* --------------------------------------------------------------- contact */
.contact {
  padding: clamp(90px, 14vh, 150px) 0 clamp(64px, 9vh, 96px);
  text-align: center;
  border-top: 1px solid var(--line);
  transition: border-color var(--fondu);
}
.contact .wrap { max-width: 980px; padding-left: var(--marge-d) }
.contact-h { font-size: clamp(27px, 4.2vw, 50px); letter-spacing: -.035em; margin-top: 16px; max-width: 20ch; margin-inline: auto }
.contact-p { color: var(--ink-2); margin: 16px auto 0; max-width: 44ch; transition: color var(--fondu) }

footer { padding: 26px 0 34px; border-top: 1px solid var(--line); transition: border-color var(--fondu) }
.foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding-left: var(--marge-d) }
.foot a:hover { color: var(--ink) }

/* =============================================================== état .js */
/* Rien n'apparaît tant que le script n'a pas donné le départ — et le script
   n'existant pas, ces règles ne s'appliquent jamais. */
.js .anim { opacity: 0 }
.js .lift { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1) }
.js .hero-h .lift { display: block; opacity: 1; transform: translateY(105%) }
.js body.loaded .lift, .js .loaded .lift { opacity: 1; transform: none }
.lift-2 { transition-delay: .08s }
.lift-3 { transition-delay: .16s }
.lift-4 { transition-delay: .3s }
.lift-5 { transition-delay: .42s }
.lift-6 { transition-delay: .6s }

/* Mode flux : apparition simple à l'entrée dans l'écran. */
.js:not(.pin) .anim { transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1) }
.js:not(.pin) .anim.in { opacity: 1; transform: none }

/* ============================================================== état .pin */
.js.pin .chapter { height: 250vh; padding: 0 }
.js.pin .stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; overflow: hidden;
  /* L'en-tête en haut, l'invite en bas : la scène se centre entre les deux. */
  padding: 72px 0;
}
.js.pin .rail-holder, .js.pin .pilot { display: block }
.js.pin body:not(.loaded) .pilot, .js.pin .pilot.away { opacity: 0 }
/* Le point de la marque devient une cible invisible : c'est le point
   voyageur qui vient l'occuper, puis repart. */
.js.pin .chapter .dot { opacity: 0 }

/* ------------------------------------------------------------- réductions */
@media (max-width: 900px) {
  .grid, .grid-text-first, .grid-shot-first { grid-template-columns: minmax(0, 1fr) }
  .grid-shot-first .col-shot { order: 2 }
  .statement { max-width: none }
  /* Sans épinglage le texte défile sous l'en-tête : il lui faut un fond.
     Sur grand écran la scène est centrée, la question ne se pose pas. */
  .top {
    background: color-mix(in srgb, var(--page) 86%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    transition: background-color var(--fondu), border-color var(--fondu);
  }
}
@media (max-width: 780px) {
  .nav a:not(.nav-contact) { display: none }
  .hero { min-height: 76vh }
  /* Trop étroit pour trois colonnes : les caractéristiques reprennent la
     mise en ligne des autres chapitres. */
  .col-center .specs { grid-template-columns: minmax(0, 1fr) }
  .col-center .spec { flex-direction: row; justify-content: space-between; align-items: baseline; text-align: left }
  .col-center .spec:last-child { border-bottom: 1px solid var(--line) }
  .col-center .spec dd { text-align: right }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important }
  .anim, .lift { opacity: 1 !important; transform: none !important }
  .rail-holder, .pilot { display: none !important }
  .scroll-arrow { animation: none !important; transform: none !important; opacity: 1 !important }
  .chapter { height: auto !important; padding: clamp(76px, 11vh, 130px) 0 !important }
  .stage { position: static !important; height: auto !important; overflow: visible !important }
  .chapter .dot { opacity: 1 !important }
}