/* ============================================================
   AVAYS — Portfolio · Home (Desktop)
   Design tokens issus de Figma
   ============================================================ */

:root {
  --bleu-avays: #373aff;
  --text-dark: #000043;
  --texte-light: #fdedff;
  --rose-avays: #ffd8fd;
  --menu: #ffffbc;
  --blanc: #fff6ff;

  --font: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --page-max: 1440px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-dark);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

p { margin: 0; }

/* ---------- Page stage ---------- */
.page {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  overflow: clip;
}

/* ============================================================
   MENU
   ============================================================ */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: 1001; /* au-dessus du panneau mobile (1000) pour rester cliquable */
  width: 100%;
  max-width: var(--page-max); /* aligné sur le contenu centré (1440) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  mix-blend-mode: difference;
}

.menu__logo {
  flex-shrink: 0;
  width: 58.47px;
  height: 30.83px;
}
.menu__logo img { width: 100%; height: 100%; }

.menu__nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 554px;
  font-size: 12px;
  font-weight: 500;
  color: var(--menu);
  white-space: nowrap;
}
/* Lien nav : effet lettre-par-lettre au survol (réf. bruno.co)
   Deux couches : .current (visible) et .hover (une ligne au-dessus).
   Au survol, chaque lettre descend avec un skew, en stagger de 20ms. */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  height: -moz-fit-content;
  height: fit-content;
  line-height: 1.4;
  vertical-align: middle;
}
.nav-link__current { display: inline-flex; align-items: center; }
.nav-link__hover { position: absolute; top: -100%; left: 0; }
.nav-link__text { display: inline-flex; }
.nav-link__letter {
  display: inline-block;
  white-space: pre; /* préserve l'espace (ex. "À propos") */
  transition: transform 0.48s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
/* repos : la couche hover est pré-inclinée (au-dessus, masquée) */
.nav-link__hover .nav-link__letter { transform: skew(32deg); }
/* survol : current sort par le bas, hover descend en place */
.nav-link:hover .nav-link__current .nav-link__letter,
.nav-link:focus-visible .nav-link__current .nav-link__letter {
  transform: translateY(100%) skew(-32deg);
}
.nav-link:hover .nav-link__hover .nav-link__letter,
.nav-link:focus-visible .nav-link__hover .nav-link__letter {
  transform: translateY(100%) skew(0deg);
}
/* stagger par lettre (80ms puis +20ms) */
.nav-link__letter:nth-child(1)  { transition-delay: 80ms;  }
.nav-link__letter:nth-child(2)  { transition-delay: 100ms; }
.nav-link__letter:nth-child(3)  { transition-delay: 120ms; }
.nav-link__letter:nth-child(4)  { transition-delay: 140ms; }
.nav-link__letter:nth-child(5)  { transition-delay: 160ms; }
.nav-link__letter:nth-child(6)  { transition-delay: 180ms; }
.nav-link__letter:nth-child(7)  { transition-delay: 200ms; }
.nav-link__letter:nth-child(8)  { transition-delay: 220ms; }
.nav-link__letter:nth-child(9)  { transition-delay: 240ms; }
.nav-link__letter:nth-child(10) { transition-delay: 260ms; }
.nav-link__letter:nth-child(11) { transition-delay: 280ms; }
.nav-link__letter:nth-child(12) { transition-delay: 300ms; }

/* Bouton "Menu" / "Fermer" — visible uniquement en mobile */
.menu__toggle {
  display: none; /* passe en grid en mobile (voir @media) */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--menu);
  cursor: pointer;
}
.menu__toggle-label {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu__toggle .t-close { opacity: 0; transform: translateY(-45%); }
.is-menu-open .menu__toggle .t-open { opacity: 0; transform: translateY(45%); }
.is-menu-open .menu__toggle .t-close { opacity: 1; transform: translateY(0); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 70px 32px 100px;
}

.hero__content {
  display: flex;
  align-items: center;
  gap: clamp(32px, 6vw, 100px);
  width: 100%;
}

.hero__visual {
  position: relative;
  flex-shrink: 0;
  width: clamp(300px, 42vw, 599px);
  aspect-ratio: 599 / 563;
  overflow: hidden;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero__intro {
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex-shrink: 0;
  width: clamp(320px, 42vw, 582px);
}

.hero__mark {
  width: 266px;
  height: 140.33px;
}
/* Le SVG est exporté brut ; Figma l'affiche via rotate(180)+scaleX(-1) = scaleY(-1) */
.hero__mark img { width: 100%; height: 100%; transform: scaleY(-1); }

.hero__baseline {
  font-size: 40px;
  line-height: 45px;
  font-weight: 500;
  color: var(--text-dark);
  letter-spacing: -0.01em;
}

/* ============================================================
   MAIN
   ============================================================ */
.main {
  display: flex;
  align-items: center;
  padding: 0 30px 270px;
}

.main__inner {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.main__title {
  margin: 0;
  width: 685px;
  max-width: 100%;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--text-dark);
}

.main__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

/* ---- Founder ---- */
.founder {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 338px;
}
.founder__desc {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.founder__image {
  position: relative;
  width: 338px;
  height: 451px;
  overflow: hidden;
}
.founder__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- Philosophy / Dernier projet ---- */
.philosophy {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  padding-top: 150px;
}
.philosophy__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 685px;
  max-width: 100%; /* ne dépasse jamais la colonne -> pas de chevauchement */
  min-width: 0;
}
.philosophy__title {
  margin: 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--text-dark);
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.project-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 685 / 514;
  background: #0d7bff; /* fallback si l'image n'est pas encore exportée */
  overflow: hidden;
}
.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Carte avec vidéo au survol : cover + vidéo superposés */
.project-card--video .project-card__cover,
.project-card--video .project-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-card--video .project-card__video {
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Au survol : la vidéo apparaît (le JS la joue depuis le début, freeze sur la dernière frame).
   Piloté par la classe .is-playing (posée par le JS) + fallback :hover. */
.project-card--video.is-playing .project-card__video,
.project-card--video:hover .project-card__video { opacity: 1; }
.project-card__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-dark);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bleu-avays);
  padding: 60px 30px 30px 27px;
  color: var(--texte-light);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.footer__left {
  display: flex;
  flex-direction: column;
  gap: 55px;
  flex-shrink: 0;
  width: 514px;
}

.footer__cta-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer__headline {
  font-size: 40px;
  line-height: 1;
  font-weight: 500;
  color: var(--texte-light);
}

/* CTA pill */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 16.43px;
  background: var(--rose-avays);
  border-radius: 23px;
}
.cta__icon img { width: 13.03px; height: 12.32px; }
.cta__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 16.43px 0 14.79px;
  background: var(--rose-avays);
  border-radius: 23px;
  font-size: 24.64px;
  font-weight: 400;
  color: var(--text-dark);
}
/* Animation "swap" élastique au survol (réf. vidéo) :
   la flèche et le label échangent leur côté avec un rebond,
   + petit squish rebondissant du bouton entier. */
.cta {
  /* version adoucie : moins de dépassement (~+6,5%) et d'oscillations */
  --elastic: linear(
    0, .52 6.5%, .83 11.5%, 1.01 17%, 1.055 22%,
    1.065 26.5%, 1.045 32%, 1.008 44%, .997 56%, 1 76%, 1
  );
  --bouncy: cubic-bezier(.34, 1.2, .64, 1);
  transition: scale 0.15s 0.1s ease, transform 0.35s 0.25s var(--bouncy);
}
.cta__icon,
.cta__label {
  transition: transform 0.7s var(--elastic);
}
/* échange des positions */
.cta:hover .cta__icon,
.cta:focus-visible .cta__icon {
  transform: translateX(var(--cta-label-w, 133px));
}
.cta:hover .cta__label,
.cta:focus-visible .cta__label {
  transform: translateX(calc(-1 * var(--cta-icon-w, 46px))) rotate(-6deg);
}
/* squish : rétrécit vite (scale) puis rebondit à taille normale (transform) */
.cta:hover,
.cta:focus-visible {
  scale: 0.945 0.915;
  transform: scale(calc(1 / 0.945), calc(1 / 0.915));
}
@media (prefers-reduced-motion: reduce) {
  .cta,
  .cta__icon,
  .cta__label { transition: none; }
  .cta:hover, .cta:focus-visible { scale: none; transform: none; }
  .cta:hover .cta__icon, .cta:hover .cta__label,
  .cta:focus-visible .cta__icon, .cta:focus-visible .cta__label { transform: none; }
}

/* Footer columns */
.footer__col { display: flex; flex-direction: column; gap: 30px; }
.footer__col-title {
  font-size: 28px;
  font-weight: 400;
  color: var(--texte-light);
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 20px;
  font-weight: 400;
}
.footer__links a { transition: opacity 0.2s ease; }
.footer__links a:hover { opacity: 0.7; }
.footer__studio { font-size: 20px; font-weight: 400; }

.footer__logo {
  flex-shrink: 0;
  width: 765px;
  max-width: 55%;
  aspect-ratio: 764.834 / 403.373; /* ratio du logo : jamais écrasé */
}
.footer__logo img,
.footer__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* le SVG footer est exporté à l'envers -> on le retourne (la vidéo, elle, est déjà à l'endroit) */
.footer__logo img { transform: scaleY(-1); }

/* ============================================================
   MENU MOBILE — panneau overlay (réf. studiotyrsa.com)
   Panneau blanc qui se révèle du haut, overlay sombre en fondu,
   liens géants masqués qui montent en stagger.
   ============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  visibility: hidden;
}
.mobile-menu.is-open,
.mobile-menu.is-closing { visibility: visible; }

/* Voile sombre sur le reste de l'écran */
.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 20, 0.4);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.mobile-menu.is-open .mobile-menu__overlay { opacity: 1; }

/* Conteneur masque : sa hauteur est animée 0 -> contenu (via JS) */
.mobile-menu__outer {
  position: relative;
  overflow: hidden;
  height: 0;
  will-change: height;
  transition: height 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

/* Panneau blanc */
.mobile-menu__inner {
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5rem;
  min-height: 72vh;
  padding: max(96px, 8rem) 30px 40px;
}

/* Liste de liens */
.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: 3rem;
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.06em;
  color: var(--text-dark);
}
/* overflow caché = masque du texte qui monte ; padding pour ne pas rogner les jambages */
.mobile-menu__item { overflow: hidden; padding-bottom: 0.05em; }

/* Bas de panneau : réseaux sociaux */
.mobile-menu__socials {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--text-dark);
}

/* Texte masqué qui monte en fondu */
.mobile-menu__item-t {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu.is-open .mobile-menu__item-t { transform: translateY(0); opacity: 1; }

/* Stagger à l'ouverture — liste principale puis réseaux */
.mobile-menu.is-open .mobile-menu__list .mobile-menu__item:nth-child(1) .mobile-menu__item-t { transition-delay: 0.18s; }
.mobile-menu.is-open .mobile-menu__list .mobile-menu__item:nth-child(2) .mobile-menu__item-t { transition-delay: 0.24s; }
.mobile-menu.is-open .mobile-menu__list .mobile-menu__item:nth-child(3) .mobile-menu__item-t { transition-delay: 0.30s; }
.mobile-menu.is-open .mobile-menu__list .mobile-menu__item:nth-child(4) .mobile-menu__item-t { transition-delay: 0.36s; }
.mobile-menu.is-open .mobile-menu__socials .mobile-menu__item:nth-child(1) .mobile-menu__item-t { transition-delay: 0.44s; }
.mobile-menu.is-open .mobile-menu__socials .mobile-menu__item:nth-child(2) .mobile-menu__item-t { transition-delay: 0.49s; }
.mobile-menu.is-open .mobile-menu__socials .mobile-menu__item:nth-child(3) .mobile-menu__item-t { transition-delay: 0.54s; }
.mobile-menu.is-open .mobile-menu__socials .mobile-menu__item:nth-child(4) .mobile-menu__item-t { transition-delay: 0.59s; }

/* Fermeture : animation inverse de l'ouverture (stagger inversé : le bas d'abord) */
.mobile-menu.is-closing .mobile-menu__item-t { transition-duration: 0.55s; }
.mobile-menu.is-closing .mobile-menu__outer { transition-duration: 0.6s; }
.mobile-menu.is-closing .mobile-menu__socials .mobile-menu__item:nth-child(4) .mobile-menu__item-t { transition-delay: 0s; }
.mobile-menu.is-closing .mobile-menu__socials .mobile-menu__item:nth-child(3) .mobile-menu__item-t { transition-delay: 0.045s; }
.mobile-menu.is-closing .mobile-menu__socials .mobile-menu__item:nth-child(2) .mobile-menu__item-t { transition-delay: 0.09s; }
.mobile-menu.is-closing .mobile-menu__socials .mobile-menu__item:nth-child(1) .mobile-menu__item-t { transition-delay: 0.135s; }
.mobile-menu.is-closing .mobile-menu__list .mobile-menu__item:nth-child(4) .mobile-menu__item-t { transition-delay: 0.18s; }
.mobile-menu.is-closing .mobile-menu__list .mobile-menu__item:nth-child(3) .mobile-menu__item-t { transition-delay: 0.225s; }
.mobile-menu.is-closing .mobile-menu__list .mobile-menu__item:nth-child(2) .mobile-menu__item-t { transition-delay: 0.27s; }
.mobile-menu.is-closing .mobile-menu__list .mobile-menu__item:nth-child(1) .mobile-menu__item-t { transition-delay: 0.315s; }

body.no-scroll { overflow: hidden; }

/* ============================================================
   RESPONSIVE
   Desktop = design 1440 · Mobile = design 375
   Tablette = interpolation entre les deux
   ============================================================ */

/* ---- "Dernier Projet" passe sous la photo avant que ça ne se serre ---- */
@media (max-width: 1120px) {
  .main { padding: 0 30px 160px; }
  .main__inner { gap: 56px; }
  .main__grid { flex-direction: column; align-items: stretch; gap: 64px; }
  .founder { width: 100%; }
  .founder__image {
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 338 / 451;
  }
  .philosophy { width: 100%; padding-top: 0; justify-content: flex-start; }
  /* .philosophy__inner garde width:685/max-width:100% -> carte plafonnée à 685 */
  .project-card { width: 100%; }
}

/* ---- Laptop / petit desktop ---- */
@media (max-width: 1024px) {
  .main__title,
  .philosophy__title { font-size: 40px; }
  .hero__baseline { font-size: 34px; line-height: 40px; }
  .footer__headline { font-size: 34px; }
  .footer__logo { max-width: 48%; }
}

/* ---- Tablette : empilement des grands blocs ---- */
@media (max-width: 860px) {
  /* Menu → bascule en menu overlay dès la tablette */
  .menu { padding: 18px 24px; }
  .menu__nav { display: none; }
  .menu__toggle { display: grid; }

  /* Hero */
  .hero { padding: 96px 24px 64px; }
  .hero__content { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero__visual { width: 100%; max-width: 520px; }
  .hero__intro { width: 100%; gap: 20px; }
  .hero__baseline { font-size: 30px; line-height: 36px; }

  /* Main (empilement déjà géré au palier 1120) */
  .main { padding: 0 24px 96px; }
  .main__inner { gap: 32px; }
  .main__title { font-size: 34px; }
  .philosophy__title { font-size: 30px; }

  /* Footer — logo remonté en tête */
  .footer { padding: 48px 24px 24px; }
  .footer__inner { flex-direction: column; align-items: stretch; gap: 20px; }
  .footer__left { width: 100%; gap: 55px; }
  .footer__logo { order: -1; width: 100%; max-width: 100%; }
}

/* ---- Mobile (maquette 375) ---- */
@media (max-width: 600px) {
  /* Menu (bascule déjà gérée au breakpoint tablette) */
  .menu { padding: 20px 30px; }

  /* Hero */
  .hero { padding: 70px 30px 80px; }
  .hero__content { gap: 10px; align-items: stretch; }
  .hero__visual { width: 100%; max-width: none; }
  .hero__intro { gap: 16px; }
  .hero__mark { width: 145px; height: 76px; }
  .hero__baseline { font-size: 21.375px; line-height: 24px; }

  /* Main */
  .main { padding: 0 30px; }
  .main__inner { gap: 20px; padding-bottom: 100px; }
  .main__title { font-size: 22.5px; }
  .main__grid { gap: 80px; align-items: stretch; }
  .founder { width: 100%; gap: 30px; }
  .philosophy__inner { gap: 9px; }
  .philosophy__title { font-size: 22px; }
  .project-card { gap: 5px; }
  .project-card__label { font-size: 12px; } /* Figma = 7.4px (illisible) — remonté à 12px, à valider */

  /* Footer */
  .footer { padding: 60px 30px 30px; }
  .footer__headline { font-size: 32px; }
  .footer__col-title { font-size: 28px; }
  .footer__links,
  .footer__studio { font-size: 20px; }
  .cta__label { font-size: 24.64px; }
}

/* ============================================================
   ULTRAWIDE — au-delà de 1440px, la maquette est mise à l'échelle
   (zoom fluide) pour remplir les grands écrans (21:9, etc.).
   Plafond à 2.4x pour rester raisonnable sur écrans 5K+.
   ============================================================ */
@media (min-width: 1440px) {
  .page { zoom: min(calc(100vw / 1440px), 2.4); }
  /* Page Contact : toute la page se met à l'échelle "fit écran" (tient sans scroll)... */
  .page.page--contact { zoom: min(calc(100vw / 1440px), calc(100vh / 800px)); }
  .page--contact .contact { height: 800px; min-height: 0; }
  /* ...mais le MENU est contre-scalé pour retrouver le zoom "home" (largeur) -> cohérence */
  .page--contact .menu {
    zoom: calc(min(100vw / 1440px, 2.4) / min(100vw / 1440px, 100vh / 800px));
  }
}

/* ============================================================
   RÉVÉLATIONS AU SCROLL (réf. studiotyrsa.com)
   Éléments masqués (fade + légère montée) révélés à l'entrée
   dans le viewport. État masqué actif seulement si JS dispo.
   ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1.4s cubic-bezier(0.19, 1, 0.22, 1),
              transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
.js .reveal.is-inview {
  opacity: 1;
  transform: none;
}

/* Variante MÉDIA (photos) : petit carré central en masque qui s'agrandit
   jusqu'à prendre la forme de l'image (clip-path inset carré -> plein). */
.js .reveal.reveal--media {
  opacity: 1;
  transform: none;
  clip-path: inset(calc(50% - 22px) calc(50% - 22px) calc(50% - 22px) calc(50% - 22px));
  transition: clip-path 1.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--rd, 0s);
}
.js .reveal.reveal--media.is-inview { clip-path: inset(0 0 0 0); }

/* Variante FONDU seul (vidéo hero) : pas de montée, pas de masque */
.js .reveal.reveal--fade {
  opacity: 0;
  transform: none;
  transition: opacity 1.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--rd, 0s);
}
.js .reveal.reveal--fade.is-inview { opacity: 1; }

/* Variante HAUT (barre menu) : glisse depuis le haut, sans fondu (comme une navbar) */
.js .reveal.reveal--top {
  opacity: 1;
  transform: translateY(-110%);
  transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--rd, 0s);
}
.js .reveal.reveal--top.is-inview { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .reveal.reveal--media { clip-path: none !important; }
}

/* ============================================================
   PAGE CONTACT
   ============================================================ */
.contact {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 30px 10px;
}
.contact__inner {
  padding-top: 240px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 60px 190px;
  width: 100%;
  max-width: 1394px;
}
.contact__title {
  margin: 0;
  width: 599px;
  max-width: 100%;
  font-size: 48px;
  line-height: 55px;
  font-weight: 500;
  color: var(--text-dark);
}
.contact__side {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.contact__block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-dark);
}
.contact__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dark);
}
.contact__links a {
  text-decoration: underline;
  text-underline-position: from-font;
  transition: opacity 0.2s ease;
}
.contact__links a:hover { opacity: 0.55; }
.contact__muted {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-dark);
}
.contact__copyright {
  margin: 0;
  margin-top: auto;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-dark);
}

@media (max-width: 860px) {
  .contact { padding: 0 24px 10px; }
  .contact__inner { padding-top: 160px; gap: 48px 80px; }
  .contact__title { font-size: 34px; line-height: 1.15; }
}

@media (max-width: 600px) {
  .contact { padding: 0 30px 16px; }
  .contact__inner { padding-top: 130px; gap: 60px; }
  .contact__title { font-size: 24px; line-height: 1.2; width: 100%; }
  .contact__side { gap: 30px; }
  .contact__copyright { font-size: 14px; }
}

/* ============================================================
   PAGE À PROPOS
   ============================================================ */
.about {
  padding: 120px 30px 190px;
}
.about__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.about__title {
  margin: 0;
  width: 1173px;
  max-width: 100%;
  font-size: clamp(40px, 7.5vw, 108px);
  line-height: 0.95;
  font-weight: 500;
  color: var(--text-dark);
}
.about__row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}
.about__left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 223px;
  width: 581px;
  max-width: 100%;
}
.about__founder {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 384px;
  max-width: 100%;
}
.about__desc {
  width: 384px;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.about__desc p { margin: 0 0 1.1em; }
.about__desc p:last-child { margin-bottom: 0; }
.about__founder-img {
  width: 384px;
  max-width: 100%;
  aspect-ratio: 384 / 513;
  overflow: hidden;
}
.about__founder-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.about__services {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about__services-title {
  margin: 0;
  font-size: clamp(52px, 8.9vw, 128px);
  line-height: 1;
  font-weight: 500;
  color: var(--text-dark);
}
.about__services-cols {
  display: flex;
  gap: 10px;
}
.about__services-cols ul {
  width: 187px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text-dark);
}

.about__right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 779px;
  max-width: 100%;
}
.about__desc--right {
  min-height: 138px;
  display: flex;
  align-items: flex-end;
}
.about__studio-img {
  width: 779px;
  max-width: 100%;
  aspect-ratio: 779 / 1040;
  overflow: hidden;
}
.about__studio-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---- Responsive À propos ---- */
/* Empilement + réordonnancement (maquette : desc, photo, desc droite, studio, Services) */
@media (max-width: 1100px) {
  .about { padding: 100px 30px 100px; }
  .about__inner { gap: 50px; }
  .about__row { flex-direction: column; gap: 0; align-items: stretch; }
  .about__left,
  .about__right { display: contents; }
  .about__founder { order: 1; width: 100%; }
  .about__desc { width: 100%; }
  .about__desc--right { order: 2; margin-top: 90px; min-height: 0; width: 100%; }
  .about__studio-img { order: 3; margin-top: 30px; width: 100%; max-width: 480px; }
  .about__services { order: 4; margin-top: 80px; gap: 30px; }
  .about__founder-img { width: 100%; max-width: 480px; }
}
/* Mobile (maquette 375) */
@media (max-width: 600px) {
  .about__title { font-size: 29px; line-height: 1.07; }
  .about__services-title { font-size: 64px; }
  .about__services-cols { gap: 14px; }
  .about__services-cols ul { width: auto; font-size: 13px; line-height: 1.6; }
  .about__founder-img,
  .about__studio-img { max-width: none; }
}

/* ============================================================
   PAGE PROJETS (grille pilotée par data/projects.json)
   ============================================================ */
.projects {
  padding: 120px 30px 100px;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 13px;
  width: 100%;
  align-items: stretch; /* les 2 cartes d'une rangée ont la même hauteur */
}
.project-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.project-card--narrow { grid-column: span 5; }
.project-card--wide { grid-column: span 9; }
.project-card__image {
  width: 100%;
  overflow: hidden;
  background: #eee;
}
/* La carte étroite fixe la hauteur (via son ratio) ; la large s'y aligne */
.project-card--narrow .project-card__image { aspect-ratio: 488 / 649; }
.project-card--wide .project-card__image { flex: 1 0 0; min-height: 0; }
.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-card__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-dark);
}
.projects-error { font-size: 14px; color: var(--text-dark); }

/* ---- Responsive Projets (interim ; mobile dédié à venir) ---- */
@media (max-width: 900px) {
  .projects { padding: 100px 24px 80px; }
  .projects-grid { grid-template-columns: 1fr; gap: 40px; }
  .project-card--narrow,
  .project-card--wide { grid-column: span 1; }
  /* en 1 colonne, chaque carte a son propre ratio (le flex desktop est réinitialisé) */
  .project-card--narrow .project-card__image,
  .project-card--wide .project-card__image { aspect-ratio: 3 / 2; flex: none; }
}
@media (max-width: 600px) {
  .projects { padding: 90px 30px 70px; }
  .projects-grid { gap: 30px; }
}

/* ============================================================
   PAGE DÉTAIL PROJET (template piloté par data/projects.json, via le slug)
   Colonne gauche fixe (texte + crédits) + galerie d'images à droite
   ============================================================ */
.project-detail { padding-right: 15px; padding-bottom: 190px; }
.project-detail__row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.project-detail__aside {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex-shrink: 0;
  width: 310px;
  padding: 171px 30px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.project-detail__block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 250px;
  max-width: 100%;
}
.project-detail__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-dark);
}
.project-detail__desc {
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.project-detail__desc p { margin: 0 0 1em; }
.project-detail__desc p:last-child { margin: 0; }
.project-detail__credits {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.project-detail__credit { margin: 0 0 1em; }
.project-detail__credit:last-child { margin: 0; }
.project-detail__credit-role { margin: 0; font-weight: 400; }
.project-detail__credit-name { margin: 0; font-weight: 300; }

.project-detail__gallery {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 171px;
  display: flex;
  flex-direction: column;
  gap: 11.768px;
}
.project-gallery__img {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ececec;
}
.project-gallery__img--full { aspect-ratio: 917 / 687; }
.project-gallery__pair {
  display: flex;
  gap: 11.768px;
}
.project-gallery__img--portrait {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
}
.project-gallery__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Responsive détail projet (interim) ---- */
@media (max-width: 900px) {
  /* Maquette mobile : galerie EN HAUT, puis le texte, puis le footer */
  .project-detail { padding-right: 0; padding-bottom: 95px; }
  .project-detail__row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .project-detail__gallery {
    order: 1;
    flex: none; /* la galerie prend la hauteur de son contenu (pas flex-basis:0) */
    display: block; /* + aspect-ratio des images fiable (pas d'item flex-colonne) */
    padding: 70px 30px 0;
  }
  .project-detail__gallery > * { margin-bottom: 11.768px; }
  .project-detail__gallery > *:last-child { margin-bottom: 0; }
  .project-detail__aside {
    order: 2;
    position: static;
    width: 100%;
    padding: 50px 30px 0;
  }
  .project-detail__block { width: 250px; max-width: 100%; }
}

/* ============================================================
   PRELOADER
   Fond bleu plein -> lockup centré -> sortie en tuiles tissées.
   Réglages de timing/grille dans assets/js/preloader.js.
   ============================================================ */

/* Verrou du scroll tant que le preloader tourne */
html.is-loading { overflow: hidden; }
html.is-loading body { overflow: hidden; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bleu-avays);
  overflow: hidden;
  /* variables surchargées par le JS */
  --mark-slide: 950ms;
  --mark-travel: 420px;
  --name-dur: 620ms;
  --name-skew: 12deg;
  --lockup-out: 700ms;
  --lockup-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --lockup-out-ease: cubic-bezier(0.7, 0, 0.84, 0); /* expo.in : descente */
}
/* À la sortie, le fond du preloader devient transparent : les volets bleus
   (qui couvrent encore tout l'écran) se rétractent et révèlent la HOME derrière.
   Sans ça, les volets révéleraient le fond bleu du preloader (bleu sur bleu = invisible). */
.preloader.is-exit { background: transparent; }

/* Sans JS : on n'affiche jamais le preloader (fallback sûr) */
html:not(.js) .preloader { display: none; }

/* ---- Lockup centré (sigle + nom) ---- */
/* .preloader__lockup = masque : le contenu descend derrière lui à la sortie */
.preloader__lockup {
  position: absolute;
  inset: 0;
  margin: auto;                /* centre sans transform (libre pour la descente) */
  width: max-content;
  height: 79px;                /* hauteur du sigle */
  overflow: hidden;
  z-index: 2;
}
.preloader__lockup-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
  will-change: transform;
}
/* Sortie : le lockup DESCEND et disparaît derrière le bord bas du masque */
.preloader.is-lockup-out .preloader__lockup-inner {
  transform: translateY(120%);
  transition: transform var(--lockup-out) var(--lockup-out-ease);
}

/* Emplacement vide : réserve la place du sigle à gauche du texte */
.preloader__mark-slot {
  width: 150px;
  height: 79px; /* ratio du sigle 265.968 / 140.271 */
  flex: none;
}
/* Masque : couvre tout le lockup ; le sigle y glisse depuis la droite du texte */
.preloader__mark-mask {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 79px;
  overflow: hidden;      /* clippe le sigle tant qu'il est à droite */
  pointer-events: none;
}
/* Sigle : démarre caché à droite (translateX), glisse jusqu'à sa place (gauche) */
.preloader__mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 79px;
  transform: translateX(var(--mark-travel, 420px));
  transition: transform var(--mark-slide, 950ms) var(--lockup-ease);
  will-change: transform;
}
.preloader.is-lockup-in .preloader__mark { transform: translateX(0); }
/* même orientation que le sigle du hero (stocké retourné) */
.preloader__mark svg { width: 100%; height: 100%; display: block; transform: scaleY(-1); }
.preloader__mark svg path { fill: var(--blanc); }

/* Nom : révélation lettre par lettre (montée masquée + skew, comme le hover du menu) */
.preloader__name {
  color: var(--blanc);
  font-family: var(--font);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
}
.preloader__char {
  display: inline-block;
  overflow: hidden;         /* masque : cache la lettre tant qu'elle est en bas */
  vertical-align: bottom;
  padding: 0.08em 0;        /* marge pour ne pas rogner les jambages/accents */
  margin: -0.08em 0;
}
.preloader__char > span {
  display: inline-block;
  transform: translateY(110%) skewX(var(--name-skew, 12deg));
  transition: transform var(--name-dur, 620ms) var(--lockup-ease);
  transition-delay: var(--cd, 0s);  /* posé par le JS, stagger droite -> gauche */
  will-change: transform;
}
.preloader.is-lockup-in .preloader__char > span {
  transform: translateY(0) skewX(0);
}
/* espace entre les mots (non masqué) */
.preloader__space { display: inline-block; width: 0.28em; }

/* ---- Grille de tuiles (sortie) ---- */
.preloader__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--pre-cols, 14), 1fr);
  grid-template-rows: repeat(var(--pre-rows, 4), 1fr);
  z-index: 1;
  pointer-events: none;
}
.preloader__tile {
  background: var(--bleu-avays);
  transform: scaleX(1);
  /* transition (durée/easing/delay/origin) posée par le JS par tuile */
  transition-property: transform;
  /* léger chevauchement pour éviter les liserés entre tuiles */
  outline: 1px solid var(--bleu-avays);
}
.preloader.is-exit .preloader__tile { transform: scaleX(0); }

@media (max-width: 700px) {
  .preloader__lockup { height: 55px; }
  .preloader__lockup-inner { gap: 16px; }
  .preloader__mark-slot { width: 104px; height: 55px; }
  .preloader__mark-mask { height: 55px; }
  .preloader__mark { width: 104px; height: 55px; }
  .preloader__name { font-size: 26px; }
}