/* ==========================================================================
   Accueil : les chapitres, dans l'ordre de la page.
   ========================================================================== */

.btn--small { min-height: 2.75rem; padding: 0 1.15rem; font-size: var(--step-small); }

/* --- 1. Ouverture : AMO STUDIO en acier devant les hauts-fourneaux de Cockerill --- */
/* Température du titre en CSS (repli sans WebGL) : enregistrée pour pouvoir s'animer. */
@property --heat { syntax: "<number>"; inherits: true; initial-value: 0; }

.hero {
  --photo-opacity: 0.36;
  /* « AMO STUDIO » mesure 6,45 em sur une ligne ; « STUDIO » 3,9 em quand le titre passe sur deux lignes. */
  --title-size: min(calc((100vw - 2 * var(--gutter)) / 6.55), 34svh);
  position: relative;
  min-height: 100svh;
  background: var(--acier);
  overflow: clip;
  isolation: isolate;
}

/* Photo en noir et blanc, très atténuée. Elle descend moins vite que la page : la profondeur vient de là. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translate3d(0, calc(var(--p, 0) * 16svh), 0);
}
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  opacity: var(--photo-opacity);
  transform: scale(1.04);
  transform-origin: 50% 62%;
}
/* Voile : l'en-tête reste lisible en haut, les informations en bas, et la photo se fond dans la section suivante. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(14 16 19 / 0.85) 0%, rgb(14 16 19 / 0.2) 17%, rgb(14 16 19 / 0) 38%, rgb(14 16 19 / 0.3) 66%, rgb(14 16 19 / 0.9) 90%, var(--acier) 100%), /* taste-skill-ignore : voile neutre sur la photo */
    radial-gradient(135% 105% at 50% 42%, rgb(14 16 19 / 0) 52%, rgb(14 16 19 / 0.55) 100%); /* taste-skill-ignore : voile neutre sur la photo */
}

.hero__stage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Titre au centre de la photo : deux rangées égales au-dessus et en dessous. */
  grid-template-rows: 1fr auto 1fr;
  padding-block: var(--header-h);
  /* --p : progression de sortie du hero (0 → 1), écrite par js/modules/scenes.js */
  transform: translate3d(0, calc(var(--p, 0) * -7svh), 0);
  opacity: calc(1 - var(--p, 0) * 0.85);
}
.hero__stage.is-measuring { transform: none !important; }
/* La bande du titre. Le canevas WebGL la déborde en haut et en bas pour le halo d'air chaud et l'ombre :
   il ne couvre que cette bande, pas tout l'écran (bien moins de pixels à calculer). */
.hero__forge {
  position: relative;
  grid-row: 2;
  font-size: var(--title-size);
}
.hero__canvas {
  position: absolute;
  left: 0;
  top: -0.45em;
  z-index: 0;
  width: 100%;
  height: calc(100% + 0.72em);
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
}
.heat-on .hero__canvas { opacity: 1; }

/* Le titre. Le WebGL le redessine en acier ; ce texte reste là pour l'accessibilité, le référencement et la sélection. */
.hero__title {
  position: relative;
  z-index: 1;
  padding-inline: calc(var(--gutter) - 0.03em);
  font-size: 1em;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-wrap: nowrap;
  color: #9aa0a8;
  transition: --heat 2.6s ease;
}
.hero__line {
  display: inline;
  /* Acier en CSS, ligne par ligne : visible avant le WebGL et sans lui. Il rougit au survol (repli). */
  background-image: linear-gradient(180deg, /* taste-skill-ignore : titre en acier demandé (voir DESIGN_RATIONALE, partie 8) */
    color-mix(in srgb, #d3d7dc, #fff1d6 calc(var(--heat) * 100%)) 10%,
    color-mix(in srgb, #9197a0, #ffb347 calc(var(--heat) * 100%)) 47%,
    color-mix(in srgb, #5b6169, #ff6a1f calc(var(--heat) * 100%)) 55%,
    color-mix(in srgb, #a4aab2, #a3200c calc(var(--heat) * 100%)) 92%);
  -webkit-background-clip: text; /* taste-skill-ignore : titre en acier demandé */
  background-clip: text; /* taste-skill-ignore : titre en acier demandé */
  -webkit-text-fill-color: transparent;
}
.hero__baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.heat-on .hero__line { background-image: none; }
.heat-on .hero__title ::selection { -webkit-text-fill-color: var(--acier); }
.heat-fallback .hero__title { filter: drop-shadow(0 0 calc(var(--heat) * 1.4rem) rgb(255 106 31 / calc(var(--heat) * 0.5))); } /* taste-skill-ignore : lueur du métal chaud, pas une ombre */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .heat-fallback .hero__title:hover { --heat: 1; transition-duration: 1.6s; }
}

/* Les informations, en haut à droite, sous l'en-tête. */
.hero__info {
  position: relative;
  z-index: 1;
  grid-row: 1;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 0.9rem;
  align-items: start;
  padding-top: clamp(1rem, 0.4rem + 2.5vh, 2.5rem);
}
.hero__lead {
  grid-column: 8 / -1;
  justify-self: end;
  text-align: right;
  max-width: 30ch;
  font-size: var(--step-lead);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.025em;
}
.hint-touch { display: none; }
@media (hover: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }

/* Entrée (une seule fois, après le préchargement) : la photo se pose, puis les textes montent. */
@media (prefers-reduced-motion: no-preference) {
  .hero__photo { transition: opacity 1.8s ease, transform 2.8s var(--ease-out); }
  .js:not(.is-ready) .hero__photo { opacity: 0; transform: scale(1.12); }
  .js [data-rise] { opacity: 0; transform: translate3d(0, 18px, 0); }
  .js.is-ready [data-rise] {
    opacity: 1;
    transform: none;
    transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 110ms + 350ms);
  }
}

/* --- 2. L'atelier --- */
.about__grid { align-items: start; row-gap: var(--space-4); }
.about__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: var(--space-3); }
.about__photo { display: block; width: 100%; max-width: 20rem; }
.about__photo img { display: block; width: 100%; height: auto; aspect-ratio: 765 / 1024; object-fit: cover; }
.about__body { grid-column: 6 / span 7; display: grid; gap: var(--space-3); max-width: 46rem; }
.about__body > p:not(.text-lead) { max-width: var(--measure); }
.about__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--gutter);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
}
.about__facts dt { font-size: var(--step-small); color: var(--muted); margin-bottom: 0.35rem; }
.about__facts dd { font-weight: 600; line-height: 1.4; }

/* --- 3. Sites web --- */
.work__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-4);
  align-items: start;
}
.work__head { grid-column: 1 / span 5; }
.work__head p { max-width: 34ch; margin-top: var(--space-3); color: var(--muted); }
.work__index { grid-column: 1 / span 5; list-style: none; padding: 0; display: grid; gap: 0.25rem; }
.work__row {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding-block: 0.85rem;
}
.work__thumb { display: none; }
.work__name {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  font-size: var(--step-head);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: var(--track-display);
  color: var(--muted);
  transition: color var(--t-ui) ease;
}
.work__name::before {
  content: "";
  flex: none;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: var(--incandescent);
  opacity: 0;
  transform: scale(0.4);
  margin-right: 0;
  transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) ease, margin var(--t-ui) var(--ease-out);
}
.work__meta { font-size: var(--step-small); color: var(--muted); }
.work__row.is-active .work__name,
.work__row:focus-visible .work__name { color: var(--ink); }
.work__row.is-active .work__name::before { opacity: 1; transform: scale(1); margin-right: 0.12em; }
@media (hover: hover) and (pointer: fine) {
  .work__row:hover .work__name { color: var(--ink); }
}
.work__preview { grid-column: 6 / -1; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h) + 4vh); padding-top: 1rem; }
.work__preview .macbook__screen .lazy-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 450ms ease;
}
.work__preview .macbook__screen .lazy-video.is-active { opacity: 1; z-index: 1; }

/* --- 4. Applications --- */
.apps__intro { padding-bottom: 0; }
.apps__intro .title-head { max-width: 14ch; }
.apps__intro p { max-width: 46ch; margin-top: var(--space-3); color: var(--muted); }
.apps__name { font-size: var(--step-head); line-height: 0.98; letter-spacing: var(--track-head); }
.apps__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--gutter);
  font-size: var(--step-small);
}
.apps__facts dt { color: var(--muted); font-size: var(--step-small); margin-bottom: 0.25rem; }
.apps__facts dd { font-weight: 600; line-height: 1.35; }
.apps__more { justify-self: start; font-weight: 700; }

/* Tous à table : scène 3D épinglée. --p (0 → 1) ouvre l'éventail, --rx/--ry suivent la souris. */
.tat { position: relative; height: 185svh; }
.tat__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding-inline: var(--gutter);
  overflow: hidden;
}
.tat__phones {
  --w: clamp(190px, 17vw, 290px);
  grid-column: 1 / span 7;
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: 1700px;
}
.tat__phones-inner,
.tat__phone { grid-area: 1 / 1; }
.tat__phone {
  transform-style: preserve-3d;
  transition: transform 200ms linear;
  will-change: transform;
}
.tat__phone--left {
  transform:
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translate3d(calc(var(--p, 0) * -88%), calc(var(--p, 0) * 3%), calc(var(--p, 0) * -140px))
    rotateY(calc(var(--p, 0) * 26deg)) rotateZ(calc(var(--p, 0) * -5deg));
}
.tat__phone--right {
  transform:
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translate3d(calc(var(--p, 0) * 88%), calc(var(--p, 0) * 3%), calc(var(--p, 0) * -140px))
    rotateY(calc(var(--p, 0) * -26deg)) rotateZ(calc(var(--p, 0) * 5deg));
}
.tat__phone--center {
  z-index: 2;
  transform:
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translate3d(0, calc((1 - var(--p, 0)) * 5%), calc(var(--p, 0) * 70px));
}
.tat__phone--center .iphone__frame,
.tat__phone--left .iphone__frame,
.tat__phone--right .iphone__frame {
  box-shadow: /* taste-skill-ignore : ombres et reflets des maquettes d’appareils, demandés dans le brief */
    inset 0 0 0 0.55cqw #4a4e56, inset 0 0 0 0.95cqw #16181c, inset 0 0 0 1.25cqw #2a2d33,
    0 3cqw 6cqw -1cqw rgb(0 0 0 / 0.45), 0 14cqw 28cqw -8cqw rgb(0 0 0 / 0.65);
}
.tat__text {
  grid-column: 8 / -1;
  display: grid;
  gap: var(--space-3);
  align-content: center;
  max-width: 30rem;
}
.tat__text p { color: var(--muted); }

/* Bulldogs : téléphone épinglé, étapes qui défilent */
.bull {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-block: var(--section);
}
.bull__phone-col { grid-column: 1 / span 5; }
.bull__sticky {
  --w: clamp(220px, 21vw, 320px);
  position: sticky;
  top: max(calc(var(--header-h) + 1rem), calc(50svh - var(--w) * 1.0465));
  display: grid;
  justify-items: center;
}
.bull__screens picture {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate3d(0, 4%, 0) scale(0.985);
  transition: opacity 450ms ease, transform 600ms var(--ease-out);
}
.bull__screens picture.is-active { opacity: 1; transform: none; }
.bull__screens picture img { width: 100%; height: 100%; object-fit: cover; }
.bull__text { grid-column: 7 / -1; }
.bull__head { display: grid; gap: var(--space-3); max-width: 34rem; margin-bottom: 8svh; }
.bull__head p { color: var(--muted); }
.bull__steps { list-style: none; padding: 0; }
.bull__step {
  min-height: 52svh;
  display: grid;
  align-content: center;
  gap: 0.6rem;
  max-width: 30rem;
  color: var(--muted);
  transition: color var(--t-ui) ease;
}
.bull__step:last-child { min-height: 70svh; }
.bull__step h4 { font-size: var(--step-head); letter-spacing: var(--track-head); line-height: 1; }
.bull__step p { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.015em; }
.bull__step.is-active { color: var(--ink); }

/* --- 5. Motion design : rail horizontal --- */
.motion { position: relative; height: var(--motion-h, auto); background: #08090b; }
.motion__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.motion__track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 0.5rem + 3vw, 4rem);
  padding-inline: var(--gutter) calc(var(--gutter) * 3);
  transform: translate3d(calc(var(--x, 0) * -1px), 0, 0);
  will-change: transform;
}
.motion__intro { flex: none; width: min(30rem, 80vw); display: grid; gap: var(--space-3); align-self: center; }
.motion__intro p { color: var(--muted); }
.film { flex: none; width: calc(min(66svh, 140vw) * 9 / 16); display: grid; gap: 1rem; }
.film__media { aspect-ratio: 9 / 16; width: 100%; background: #000; }
.film__info { display: grid; gap: 0.35rem; }
.film__title { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.15; }
.film__meta { font-size: var(--step-small); }
.film__desc { font-size: var(--step-small); line-height: 1.45; color: var(--muted); }

/* --- 6. Services : la liste « affiche » sur champ clair --- */
.services__head { display: grid; gap: var(--space-3); margin-bottom: clamp(2.5rem, 1rem + 5vw, 5rem); }
.services__head .title-head { max-width: 15ch; }
.services__head p { max-width: 40ch; color: var(--muted); }
.poster { list-style: none; padding: 0; }
.poster__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.poster__word {
  font-size: var(--step-poster);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: var(--track-display);
  transition: color var(--t-ui) ease;
}
.poster__detail { max-width: 25ch; font-size: var(--step-small); line-height: 1.4; color: var(--muted); text-align: right; }
@media (hover: hover) and (pointer: fine) {
  .poster__item:hover .poster__word { color: var(--accent-text); }
}
.process {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-4);
  margin-top: clamp(4rem, 2rem + 6vw, 8rem);
  align-items: start;
}
.process__title { grid-column: 1 / span 4; font-size: var(--step-lead); letter-spacing: var(--track-head); }
.process__list {
  grid-column: 5 / -1;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--gutter);
}
.process__list li { max-width: 32ch; color: var(--muted); }
.process__list strong { display: block; color: var(--ink); font-size: var(--step-lead); margin-bottom: 0.35rem; letter-spacing: -0.015em; }

/* --- 7. Contact --- */
.contact .marquee { padding-top: clamp(2rem, 1rem + 3vw, 4rem); padding-bottom: 0; }
.contact__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-4);
  align-items: start;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
}
.contact__head { grid-column: 1 / span 5; display: grid; gap: var(--space-3); }
.contact__head > p:first-of-type { max-width: 36ch; }
.contact__mail { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; }
.contact__form { grid-column: 7 / -1; }
.contact__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* ==========================================================================
   Tablette et téléphone : chaque section a sa propre composition.
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__lead { grid-column: 6 / -1; }
  .tat__phones { --w: clamp(170px, 20vw, 240px); }
}

@media (max-width: 900px) {
  .hero__lead { grid-column: 1 / -1; }

  .about__aside { position: static; grid-column: 1 / -1; }
  .about__photo { max-width: min(20rem, 70vw); }
  .about__body { grid-column: 1 / -1; }

  .work__head, .work__index { grid-column: 1 / -1; }
  .work__preview { display: none; }
  .work__index { gap: var(--space-4); }
  .work__thumb { display: block; margin-bottom: 0.9rem; }
  .work__name { color: var(--ink); }
  .work__name::before { display: none; }

  .tat { height: auto; }
  .tat__sticky { position: relative; height: auto; display: block; overflow: visible; padding-block: 2rem 0; }
  .tat__phones { --w: clamp(120px, 30vw, 210px); --p: 1; height: auto; padding-block: 2rem 3rem; }
  .tat__phone--left, .tat__phone--right { --p: 0.82; }
  .tat__text { max-width: none; }

  /* Téléphone : le titre Bulldogs passe en pleine largeur au-dessus du duo téléphone / étapes. */
  .bull { padding-block: calc(var(--section) * 1.3) clamp(4rem, 2rem + 8vw, 6rem); }
  .bull__text { display: contents; }
  .bull__head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 2.5rem; max-width: none; }
  .bull__phone-col { grid-column: 1 / span 5; grid-row: 2; }
  .bull__steps { grid-column: 6 / -1; grid-row: 2; }
  .bull__sticky { --w: clamp(130px, 36vw, 230px); }
  .bull__step { min-height: 52svh; }
  .apps__facts { grid-template-columns: 1fr; }

  .motion { height: auto !important; }
  .motion__pin { position: static; height: auto; display: block; overflow: visible; padding-block: var(--section); }
  .motion__track {
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    scrollbar-width: thin;
  }
  .motion__intro { width: min(22rem, 78vw); }
  .film { width: min(72vw, 21rem); scroll-snap-align: center; }

  .process__title, .process__list { grid-column: 1 / -1; }
  .contact__head, .contact__form { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .about__facts { grid-template-columns: 1fr; }
  .process__list { grid-template-columns: 1fr; }
  .poster__item { display: grid; gap: 0.35rem; padding-bottom: 1.1rem; }
  .poster__word { font-size: clamp(2.6rem, 0.6rem + 12.5vw, 4.5rem); }
  .poster__detail { text-align: left; max-width: 34ch; }
  .bull { column-gap: 1rem; }
  .bull__step h4 { font-size: var(--step-lead); }
  .bull__step p { font-size: var(--step-small); }
}

/* Téléphone, et tablette tenue en portrait : le titre passe sur deux lignes (AMO / STUDIO), plus grand. */
@media (max-width: 699px), (orientation: portrait) and (max-width: 1100px) {
  .hero { --title-size: min(calc((100vw - 2 * var(--gutter)) / 3.95), 25svh); }
  .hero__line { display: block; }
  .hero__title { line-height: 0.84; }
}

/* Mouvement réduit : pas de scènes épinglées, tout est posé. */
@media (prefers-reduced-motion: reduce) {
  .hero__stage { transform: none !important; opacity: 1 !important; }
  .hero__media { transform: none !important; }
  .tat { height: auto; }
  .tat__sticky { position: relative; height: auto; padding-block: 3rem; }
  .tat__phones { --p: 1; height: auto; padding-block: 2rem; }
  .motion { height: auto !important; }
  .motion__pin { position: static; height: auto; display: block; padding-block: var(--section); }
  .motion__track { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; }
  .film { scroll-snap-align: center; }
}