/* ============================================
   FONTS — hébergées sur le site (Manrope et Space Grotesk, licence OFL).
   Polices variables ; mêmes plages de graisses qu'avant l'auto-hébergement.
   ============================================ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   CSS RESET & BASE
   ============================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --terra: #BB6E44;
  --green: #697A6C;
  --pink: #9E7589;
  --blue: #93AEBB;
  --black: #16120E;
  --beige: #F0EAE1;
  --grey: #6B6560;
  --ochre: #C6A95E;
  --white: #ffffff;

  --font-neue: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-platt: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-sine: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  /* Gabarit horizontal unique du site : le contenu est plafonné à --content-max
     et centré, avec --gutter de marge minimale. --edge est la distance réelle
     entre le bord de la fenêtre et le contenu : elle vaut --gutter tant que la
     fenêtre est étroite, puis grandit une fois le plafond atteint. Les éléments
     fixes (logo, burger) s'alignent dessus pour ne pas déborder du contenu.
     Grands écrans : la marge est plafonnée à 10vw, sinon elle devenait énorme
     (590px par côté sur un 27"). Les deux valeurs se rejoignent à 1725px :
     pas de saut, et 10% pur au-delà (192px à 1920px, 256px à 2560px). */
  --content-max: 138rem;
  --gutter: 3rem;
  --edge: max(var(--gutter), min(calc((100vw - var(--content-max)) / 2), 10vw));

  font-size: 10px;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-neue);
  font-weight: 400;
  color: var(--black);
  background-color: var(--beige);
  overflow-x: hidden;
  font-size: 1.6rem;
  line-height: 1.5;
}

/* Tactile : la page défile dans #scroll-root au lieu de la fenêtre. iOS ne
   masque la barre de Safari que quand c'est la fenêtre qui défile : elle reste
   donc toujours visible (pas de vide blanc sous les sections épinglées), avec le
   scroll natif fluide. Doit rester synchronisé avec SCROLL_ROOT dans main.js. */
@media (pointer: coarse) {
  .scroll-root {
    position: fixed;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: none;
    /* Le <body> fait 0px de haut ici : sans ce fond, c'est celui (sombre) du
       <html> qui apparaît dans toute zone transparente. */
    background-color: var(--beige);
  }
}

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

ul, ol {
  list-style: none;
}

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

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

/* ============================================
   UTILITY
   ============================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   PAGE LOADER
   ============================================ */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: var(--app-height, 100lvh);
  background: var(--black);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 0 0 0);
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loader-text {
  font-family: var(--font-neue);
  font-weight: 900;
  font-size: clamp(4rem, 8vw, 8rem);
  color: var(--white);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.loader-progress {
  width: clamp(160px, 30vw, 320px);
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  margin-top: 2rem;
}

.loader-progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--white);
  transition: width 0.25s ease;
}

.loader-pct {
  font-family: var(--font-neue);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.75rem;
  display: block;
  text-align: center;
}

/* ============================================
   CUSTOM CURSOR
   ============================================ */
.cursor {
  position: fixed;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: var(--terra);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

.cursor-follower {
  position: fixed;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  background: var(--terra);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.3;
  will-change: transform;
}

@media (pointer: coarse) {
  .cursor, .cursor-follower { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor, .cursor-follower { display: none; }
  .loader { display: none; }
}

/* ============================================
   HEADER
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}

.logo {
  position: fixed;
  top: 2.4rem;
  left: var(--edge);
  z-index: 5;
  pointer-events: auto;
  display: flex;
  align-items: center;
}

.logo-text {
  font-family: var(--font-neue);
  font-weight: 900;
  font-size: var(--logo-size);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--black);
  transition: color 0.4s ease;
  line-height: 1;
}

.logo--light .logo-text,
.logo--light .logo-sub {
  color: var(--white);
}

.logo-sub {
  font-family: var(--font-platt);
  font-weight: 600;
  /* « GALLERY & FRAMING » en filigrane, calé sur la largeur de « NASIRIAN » :
     0.382 = rapport mesuré des deux mots avec ces polices et ce tracking.
     La marge négative retire l'espacement après la dernière lettre. */
  font-size: calc(var(--logo-size) * 0.382);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: -0.1em;
  color: var(--black);
  opacity: 0.5;
  display: block;
  margin-top: 0.2rem;
  line-height: 1;
  transition: color 0.4s ease;
}

.logo-inner {
  --logo-size: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ============================================
   BURGER BUTTON
   ============================================ */
.burger {
  position: fixed;
  top: 2rem;
  right: var(--edge);
  z-index: 5;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  height: 6rem;
  border-radius: 10rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out-quart), background-color 0.3s ease, color 0.3s ease;
}

.burger:hover {
  transform: scale(1.05);
}

/* Fond sombre derrière le bouton (même détection que .logo--light) */
.burger--light,
.burger.is-open {
  background: var(--white);
  color: var(--black);
}

/* ============================================
   NAVIGATION OVERLAY
   ============================================ */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: var(--app-height, 100lvh);
  background: var(--black);
  color: var(--white);
  z-index: 3;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s var(--ease-out-quart);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: 12rem 3rem 3rem;
  overflow-y: auto;
}

.nav-overlay.is-open {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

.nav-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 0;
  gap: 6rem;
}

.nav-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

/* Grands écrans : la liste ne s'étire plus sur toute la hauteur (environ 21rem
   entre chaque lien sur un 27") ; elle plafonne à 72rem de haut. */
@media (min-width: 1536px) {
  .nav-list {
    max-height: 72rem;
  }
}

.nav-item {
  overflow: hidden;
  padding: 0.8rem 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-family: var(--font-neue);
  font-size: clamp(3.2rem, 4vw, 5.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.nav-link:hover {
  opacity: 0.6;
}

/* Sous-menu (Galerie → Expositions / Événements) : même style que le menu,
   en plus petit. Au survol il s'ouvre dans le flux et écarte légèrement les
   autres entrées. Aligné sur le texte du lien (pastille + gap). */
.nav-sub {
  display: grid;
  grid-template-rows: 1fr;
}

.nav-sub__list {
  min-height: 0;
  overflow: hidden;
  padding-left: 3.2rem;
}

.nav-sub__link {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.6rem 0;
  font-family: var(--font-neue);
  font-size: clamp(2rem, 2.4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.nav-sub__link:hover {
  opacity: 0.6;
}

.nav-sub .nav-dot {
  width: 0.8rem;
  height: 0.8rem;
  background-color: var(--pink);
}

/* Sans survol possible (tactile), le sous-menu reste ouvert */
@media (hover: hover) {
  .nav-sub {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.5s var(--ease-out-quart), opacity 0.4s ease;
  }

  .nav-item--has-sub:hover .nav-sub,
  .nav-item--has-sub:focus-within .nav-sub {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

.nav-sub__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.nav-dot {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  padding-top: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-info a {
  display: block;
  font-family: var(--font-neue);
  font-size: 1.4rem;
  line-height: 1.8;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.nav-info a:hover {
  opacity: 1;
}

.nav-info p {
  font-size: 1.4rem;
  line-height: 1.8;
  opacity: 0.7;
}

.nav-address,
.nav-contact,
.nav-phone,
.nav-social {
  display: flex;
  flex-direction: column;
}

/* ============================================
   NAV OVERLAY — bloc « feature » (desktop only)
   NASIRIAN rempli d'image + petits carrés
   ============================================ */
.nav-main {
  display: flex;
  flex: 1;
  /* hauteur figée : l'ouverture du sous-menu ne doit déplacer que les liens,
     pas le visuel NASIRIAN ni les infos du bas */
  min-height: 0;
  gap: 4rem;
  align-items: stretch;
  /* côté d'un carré — partagé par les photos de droite ET l'image haute */
  --nav-sq: clamp(8rem, 10vw, 15rem);
}

.nav-feature {
  flex: 0 0 auto;
  width: calc(var(--nav-sq) * 4 + 1.2rem * 3);
  min-width: 0; /* empêche le mot insécable d'élargir la colonne hors écran */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3.2rem;
  /* remonte le bloc pour aligner le bas des images sur le haut de « Contact » */
  padding-bottom: clamp(0.4rem, 0.8vw, 1.2rem);
}

/* Le mot sert de masque : une seule image transparaît à travers les lettres */
.nav-feature__word {
  font-family: var(--font-neue);
  font-weight: 700;
  /* taille calée sur la largeur du bloc (4 carrés + 3 gouttières) pour que le
     mot rentre toujours : « NASIRIAN » mesure 4.22em dans cette police. */
  font-size: calc((var(--nav-sq) * 4 + 3.6rem) / 4.25);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-align: right;
  white-space: nowrap;
  background-image: url("../images/encadrement/wooden-picture-frames-on-wall-in-a-store-backgrou-2026-03-24-23-03-35-utc.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* apparition à l'ouverture du menu */
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.9s ease 0.25s, transform 0.9s var(--ease-out-quart) 0.25s;
}
.nav-overlay.is-open .nav-feature__word {
  opacity: 1;
  transform: none;
}

.nav-feature__photos {
  display: grid;
  grid-template-columns: repeat(4, var(--nav-sq));
  gap: 1.2rem;
}
.nav-feature__photo-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.4rem;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.7s ease, transform 0.7s var(--ease-out-quart);
}
.nav-overlay.is-open .nav-feature__photo-wrap { opacity: 1; transform: none; }
.nav-overlay.is-open .nav-feature__photo-wrap:nth-child(1) { transition-delay: 0.45s; }
.nav-overlay.is-open .nav-feature__photo-wrap:nth-child(2) { transition-delay: 0.55s; }
.nav-overlay.is-open .nav-feature__photo-wrap:nth-child(3) { transition-delay: 0.65s; }
.nav-overlay.is-open .nav-feature__photo-wrap:nth-child(4) { transition-delay: 0.75s; }
.nav-feature__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-quart);
}
.nav-feature__photo-wrap:hover .nav-feature__photo { transform: scale(1.06); }

/* Grands écrans : menu aligné sur les marges du logo et du bouton (--edge) ;
   les carrés passent en colonne à droite, NASIRIAN en bas à gauche du dernier.
   Le carré (et donc le mot, calé dessus) suit la hauteur pour que la colonne
   remplisse la section, borné à 10vw pour laisser la place aux liens. */
@media (min-width: 1536px) {
  .nav-overlay {
    /* 100% = largeur hors barre de défilement, comme le bouton menu */
    width: 100%;
    padding-inline: var(--edge);
  }
  .nav-main {
    --nav-sq: min(10vw, calc((100vh - 40rem) / 4));
  }
  .nav-feature {
    width: auto;
    flex-direction: row;
    align-items: flex-end;
  }
  .nav-feature__photos {
    grid-template-columns: var(--nav-sq);
  }
  /* le mot est à côté de la colonne de carrés : il a la place d'être plus grand */
  .nav-feature__word { font-size: calc(var(--nav-sq) * 1.05); }
}

/* La colonne laterale ne tient pas a cote des liens sous 1080px : on la
   masque en tablette, et en mobile on la repasse SOUS les liens (voir la
   media query max-width: 767px, ou l'espace libre est suffisant). */
@media (max-width: 1079px) {
  .nav-feature { display: none; }
  .nav-main { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-feature__word,
  .nav-feature__photo-wrap {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   HERO SECTION — STICKY SCROLL PATTERN
   ============================================ */
.hero-outer {
  position: relative;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  /* lvh = the LARGE (toolbar-hidden) viewport height — a FIXED value, so the
     pinned hero never resizes mid-scroll (unlike dvh) AND never leaves a white
     gap when iOS Safari hides its toolbar (unlike svh). */
  height: var(--app-height, 100lvh);
  width: 100%;
}

.hero-overflow {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-step1 {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: max-content;
  will-change: transform;
}

/* ============================================
   HERO LEFT
   ============================================ */
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 9rem var(--edge) 3rem;
  background-color: var(--beige);
  position: relative;
  width: 50vw;
  flex-shrink: 0;
  height: 100%;
}

/* Fond vidéo du hero de l'accueil : actif quand le JS pose .hero-left--video
   (voir initHeroVideo) ; voile sombre + textes blancs pour la lisibilité. */
.hero-left__video,
.hero-left__scrim {
  display: none;
}
.hero-left--video {
  background-color: var(--black);
  color: var(--white);
  isolation: isolate;
}
.hero-left--video .hero-left__video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-left--video .hero-left__scrim {
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgba(22, 18, 14, 0.5);
  z-index: -1;
}
.hero-left--video .hero-title-visual,
.hero-left--video .hero-title-sub,
.hero-left--video .hero-desc {
  color: var(--white);
}

.hero-nav {
  position: relative;
  z-index: 2;
}

.hero-nav-list {
  display: flex;
  justify-content: space-between;
}

.hero-nav-item {
  flex: none;
}

.hero-nav-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  transition: opacity 0.3s ease;
}

.hero-nav-link:hover {
  opacity: 0.6;
}

.hero-nav-dot {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================
   HERO CONTENT / TITLE
   ============================================ */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2.4rem;
  padding: 0;
}

.hero-title {
  --hero-title-size: clamp(5rem, 13vw, 16rem);
  position: relative;
  /* largeur du mot : le sous-titre en filigrane se cale dessus */
  width: fit-content;
  max-width: 100%;
}

.hero-title-visual {
  display: block;
  font-family: var(--font-neue);
  font-weight: 900;
  font-size: var(--hero-title-size);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--black);
  text-transform: uppercase;
}

/* Même principe que le logo : « GALLERY & FRAMING » en filigrane, de la
   largeur exacte du grand mot (0.382 = rapport mesuré, voir .logo-sub). */
.hero-title-sub {
  display: block;
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: calc(var(--hero-title-size) * 0.382);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: -0.1em;
  margin-top: calc(var(--hero-title-size) * 0.08);
  white-space: nowrap;
  color: var(--black);
  opacity: 0.5;
}

.hero-desc {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2vw, 1.8rem);
  line-height: 1.6;
  max-width: 50rem;
  text-align: left;
  color: var(--black);
}

/* ============================================
   HERO BOTTOM / SOCIAL
   ============================================ */
.hero-bottom {
  border-top: 1px solid rgba(14, 14, 14, 0.15);
  padding-top: 2rem;
}

.hero-social {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hero-social-link {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0;
  transition: opacity 0.3s ease;
}

.hero-social-link:hover {
  opacity: 0.5;
}

/* Icônes des réseaux sociaux (Instagram, Facebook) : hero, menu et pied de page.
   Bouton rond de 44 px (taille de clic confortable) avec un léger cercle qui
   le signale comme cliquable ; le cercle s'aligne sur la marge du texte. */
.social-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
}
.social-icon-link::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1.5px currentColor;
  border-radius: 50%;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.social-icon-link:hover::before {
  opacity: 0.8;
}
.social-icon {
  width: 2.2rem;
  height: 2.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-social {
  gap: 0.8rem;
}
.footer-social {
  display: flex;
  gap: 0.8rem;
}
.nav-social {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.8rem;
}
.nav-info .social-icon-link {
  display: inline-flex;
}

/* ============================================
   PROJECT CARDS (HERO)
   ============================================ */
.project-card {
  width: 50vw;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--card-bg, var(--blue));
  overflow: hidden;
  will-change: transform;
  height: 100%;
}

/* Position de repos par défaut (avant que le JS n'applique gsap.set()) :
   seule Encadrement (card 2) est visible, Galerie est décalée derrière
   elle — évite le flash des 2 cartes côte à côte au premier paint, le
   temps que main.js s'exécute. */
#hero-card-2 { transform: translateX(-50vw); }

.project-image-link {
  display: block;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Encadrement (carte 02) — cover miroir : on decale la zone visible pour que
   le cadre ne soit pas colle au bord. */
#hero-card-2 .project-image {
  object-position: 30% center;
}

.project-info {
  padding: 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background-color: var(--card-bg, var(--blue));
}

.project-meta {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
}

.project-tags {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.project-desc-text {
  font-family: var(--font-neue);
  font-size: 1.2rem;
  color: var(--black);
}

.project-name-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Titre de tuile : lien a part entiere (voir index.html), mais il doit garder
   l'apparence du texte. Seuls le survol et le focus le signalent. */
.project-name {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(2.4rem, 2.5vw, 3.6rem);
  letter-spacing: -0.02em;
  display: inline-block;
  transition: opacity 0.25s var(--ease-out-quart);
}

a.project-name:hover {
  opacity: 0.72;
}

a.project-name:focus-visible,
a.project-image-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.project-arrow {
  font-size: 2.4rem;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translate(-0.5rem, 0.5rem);
}

.project-card:hover .project-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

/* ============================================
   PROJECTS GALLERY — VERTICAL STRIP
   ============================================ */
.gallery-outer {
  position: relative;
  height: var(--gallery-section-height, 500vh);
  background-color: var(--beige);
}

.gallery-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: var(--app-height, 100lvh);
  width: 100%;
  display: flex;
  overflow: hidden;
}

.gallery-left {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.gallery-strip {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  transform-origin: top left;
  will-change: transform;
}
.gallery-card {
  display: block;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
}

.gallery-image-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 92.65%;
  overflow: hidden;
}

.gallery-img {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
  transition: scale 0.8s var(--ease-out-quart);
}

.gallery-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.2rem;
  overflow-y: auto;
  will-change: transform;
}

.gallery-right-inner {
  width: 100%;
  max-width: 52rem;
}

.gallery-heading {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(3.6rem, 5vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 3.2rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.08em;
}

.gallery-char-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.gallery-char {
  display: inline-block;
  will-change: transform;
}

.gallery-list {
  display: flex;
  flex-direction: column;
}

.gallery-list-item {
  position: relative;
}

.gallery-list-link {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  padding: 1.6rem 0;
  transition: opacity 0.3s ease;
}


.gallery-list-num-wrap,
.gallery-list-label-wrap {
  display: inline-flex;
  overflow: hidden;
}

.gallery-list-num {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  opacity: 0.5;
  flex-shrink: 0;
  width: 2rem;
  will-change: transform;
}

.gallery-list-label {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.4vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  will-change: transform;
}

.gallery-list-line {
  height: 1px;
  background-color: rgba(14, 14, 14, 0.15);
  transform-origin: 100% 100%;
  will-change: transform;
}

.gallery-list::before {
  content: "";
  display: block;
  height: 1px;
  background-color: rgba(14, 14, 14, 0.15);
  transform-origin: 100% 100%;
}

.gallery-desc-wrap {
  overflow: hidden;
}

.gallery-desc {
  margin-top: 2.4rem;
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--black);
  opacity: 0.7;
  will-change: transform, opacity;
}

.gallery-btn-wrap {
  overflow: hidden;
}

.gallery-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 10rem;
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.2);
  padding: 0 0.8rem 0 2.4rem;
  height: 4rem;
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--black);
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
  cursor: pointer;
  margin-top: 2rem;
  will-change: transform, opacity;
}

.gallery-btn:hover {
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.5);
  background-color: rgba(14, 14, 14, 0.03);
}

.gallery-btn-label {
  white-space: nowrap;
  text-transform: uppercase;
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.gallery-btn-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-left: 1.6rem;
  border-radius: 50%;
  background-color: var(--black);
  transition: transform 0.3s var(--ease-out-quart);
}

.gallery-btn:hover .gallery-btn-dot {
  transform: scale(1.1);
}

.gallery-btn-dot-inner {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--white);
}

/* ============================================
   EXPERTISES SECTION
   ============================================ */
.expertises-section {
  position: relative;
  height: var(--expertises-height, 600vh);
}

.expertises-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: var(--app-height, 100lvh);
  width: 100%;
  overflow: hidden;
}

.expertises-heading {
  position: absolute;
  top: 12.6rem;
  left: var(--edge);
  z-index: 10;
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(6rem, 10vw, 16.4rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--black);
  pointer-events: none;
}

.expertises-cards-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.expertise-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--card-color);
  will-change: transform;
}

.expertise-card-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--edge);
  padding-top: 35vh;
  padding-bottom: 10rem;
}

.expertise-card-body {
  display: grid;
  grid-template-columns: 35vw 1fr;
  gap: 4rem;
  align-items: start;
  width: 100%;
}

.expertise-card-text-col {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.expertise-card-num {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.expertise-card-title {
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.expertise-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;
  min-height: 6em;
}

.expertise-card-tag {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  white-space: nowrap;
  margin-right: 0.8rem;
}

.expertise-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1rem 1rem 3rem;
  border-radius: 10rem;
  box-shadow: inset 0 0 0 1px currentColor;
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--black);
  background: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  align-self: flex-start;
  margin-top: 0.8rem;
}

.expertise-card-btn:hover {
  opacity: 0.6;
}

.expertise-card-btn-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-color: var(--black);
  flex-shrink: 0;
}

.expertise-card-image-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expertise-card-image-wrap {
  position: relative;
  width: 44rem;
  max-width: 100%;
  aspect-ratio: 480 / 348;
  border-radius: 0.4rem;
  overflow: hidden;
}

/* Grands écrans : le cadre grandit avec la hauteur de l'écran (50vh) au lieu
   de rester à 44rem au milieu d'une colonne très large. */
@media (min-width: 1536px) {
  .expertise-card-image-wrap {
    width: calc(50vh * 480 / 348);
  }
}

.expertise-card-image-bg {
  position: absolute;
  top: -1.6rem;
  left: -1.6rem;
  width: calc(100% + 3.2rem);
  height: calc(100% + 3.2rem);
  border-radius: 0.6rem;
  z-index: -1;
  opacity: 0.4;
  background-color: var(--card-color);
}

.expertise-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Expertises bottom nav */
.expertises-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: 0 var(--edge) 3rem;
}

.expertises-nav-list {
  display: flex;
  border-top: 1px solid rgba(14, 14, 14, 0.15);
  padding-top: 1.6rem;
}

.expertises-nav-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0;
  font-family: var(--font-neue);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.3;
  transition: opacity 0.4s ease;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--black);
}

.expertises-nav-item:hover {
  opacity: 0.6;
}

.expertises-nav-item.is-active {
  opacity: 1;
}

.expertises-nav-num {
  font-family: var(--font-platt);
  font-weight: 600;
}

.expertises-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expertises-progress-bar {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: rgba(14, 14, 14, 0.15);
  margin-top: 0.8rem;
}

.expertises-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--black);
  will-change: transform;
  transform-origin: left center;
  transform: scaleX(0);
}

/* ============================================
   HORIZONTAL SCROLLING GALLERY
   ============================================ */
.horiz-gallery {
  position: relative;
  height: var(--horiz-section-height, 400vh);
}

/* Dernière galerie de la page : respiration avant le footer */
main > .horiz-gallery:last-child {
  margin-bottom: 10rem;
}

.horiz-gallery-sticky {
  position: sticky;
  top: var(--horiz-sticky-top, 0);
  overflow: hidden;
}

/* Tactile : galerie collée en plein écran (hauteur posée par le JS), centrée
   sur le fond de la page — voir initHorizontalGallery(). */
@media (pointer: coarse) {
  /* Les sections voisines recouvrent le vide autour des cartes centrées. */
  .horiz-gallery {
    margin-top: calc(-1 * var(--horiz-gap, 0px));
    margin-bottom: calc(-1 * var(--horiz-gap, 0px));
  }
  main > .horiz-gallery:last-child {
    margin-bottom: calc(10rem - var(--horiz-gap, 0px));
  }
  .horiz-gallery-sticky {
    height: var(--horiz-sticky-height, auto);
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
  }
  .horiz-gallery-track {
    pointer-events: auto;
  }
}

.horiz-gallery-track {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem max(3rem, calc((100% - 138rem) / 2));
  will-change: transform;
  align-items: flex-start;
}

/* Grands écrans : la première carte démarre pile sur la marge du site (--edge) */
@media (min-width: 1536px) {
  .horiz-gallery-track {
    padding-inline: var(--edge);
  }
}

.horiz-gallery-card {
  flex-shrink: 0;
  width: 35vw;
  min-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  transition: opacity 0.3s ease;
  max-height: calc(100vh - 3rem);
}

/* Desktop : même largeur qu'une colonne de la masonry de la page Galerie
   (3 colonnes, gap 1.5rem). Le % se rapporte à la zone de contenu de la
   piste, qui a les mêmes marges que la masonry. */
@media (min-width: 1080px) {
  .horiz-gallery-card {
    width: calc((100% - 3rem) / 3);
  }
}

/* Mobile : les galeries latérales n'affichent que 3 cartes sur 4 (4 en
   desktop). Le JS mesure la dernière carte visible. */
@media (max-width: 767px) {
  .horiz-gallery-card:nth-child(n+4) {
    display: none;
  }
}

a.horiz-gallery-card:hover {
  opacity: 0.85;
}

.horiz-gallery-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.926;
  border-radius: 0.4rem;
  overflow: hidden;
}

.horiz-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-quart);
}

a.horiz-gallery-card:hover .horiz-gallery-img {
  transform: scale(1.04);
}

.horiz-gallery-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.horiz-gallery-meta {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.horiz-gallery-category {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.horiz-gallery-year {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  opacity: 0.5;
}

.horiz-gallery-name-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.horiz-gallery-name {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(2.4rem, 2.5vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.horiz-gallery-arrow {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translate(-0.5rem, 0.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

a.horiz-gallery-card:hover .horiz-gallery-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.horiz-gallery-cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20vw;
  min-width: 18rem;
  gap: 1.6rem;
  cursor: pointer;
}

.horiz-gallery-cta-text {
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 2rem;
  position: relative;
}

.horiz-gallery-cta-text::after {
  content: '';
  position: absolute;
  bottom: -0.2rem;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out-quart);
}

.horiz-gallery-cta:hover .horiz-gallery-cta-text::after {
  transform: scaleX(1);
}

.horiz-gallery-cta-arrow {
  font-size: 2.4rem;
}

/* ============================================
   AGENCY / ATELIER SECTION
   ============================================ */
.agency-section {
  background-color: var(--beige);
  padding: 16rem var(--edge) 18rem;
  overflow: hidden;
}

.masonry-grid__header {
  display: flex;
  gap: 3rem;
  grid-column: 1;
  grid-row: 1;
}

.masonry-grid__header-side {
  flex: 0 0 45%;
}

.masonry-grid__heading {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(6rem, 10vw, 9.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.masonry-grid__header-right {
  /* peut rétrécir : sinon déborde de l'écran entre 1080 et ~1260px */
  flex: 0 1 42rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 1rem;
}

.masonry-grid__label {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  opacity: 0.5;
}

.masonry-grid__intro-desc {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--black);
}

.masonry-grid__btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 10rem;
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.2);
  padding: 0 1rem 0 3rem;
  height: 4.8rem;
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--black);
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
  cursor: pointer;
  width: fit-content;
  margin-top: 0.8rem;
}

.masonry-grid__btn:hover {
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.5);
  background-color: rgba(14, 14, 14, 0.03);
}

.masonry-grid__btn-label {
  white-space: nowrap;
}

.masonry-grid__btn-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-left: 2rem;
  border-radius: 50%;
  background-color: var(--black);
  transition: transform 0.3s var(--ease-out-quart);
}

.masonry-grid__btn:hover .masonry-grid__btn-dot {
  transform: scale(1.1);
}

.masonry-grid__btn-dot-inner {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--white);
}

.masonry-grid {
  display: grid;
  grid-template-columns: 65% 1fr;
  grid-template-rows: repeat(3, 50vh);
  grid-auto-rows: 50vh;
  gap: 1.5rem;
  max-width: 138rem;
  margin: 0 auto 6rem;
}

/* Grands écrans : la grille suit les marges du site (--edge) au lieu de rester
   plafonnée à 138rem au centre. */
@media (min-width: 1536px) {
  .masonry-grid {
    max-width: none;
  }
}

.masonry-grid__header      { grid-column: 1; grid-row: 1; padding-top: 3.2rem; padding-left: 3.2rem; }
.masonry-grid__photo-large { grid-column: 1; grid-row: 2; }
.masonry-grid__values      { grid-column: 1; grid-row: 3 / 5; padding-top: 3.2rem; }
.masonry-grid__photo-side-1 { grid-column: 2; grid-row: 1; }
.masonry-grid__photo-side-2 { grid-column: 2; grid-row: 2; }
.masonry-grid__photo-side-3 { grid-column: 2; grid-row: 3 / 5; }

.masonry-grid__photo-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 0.6rem;
}

.masonry-grid__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-quart);
}

/* .masonry-grid__photo-wrap:hover .masonry-grid__photo {
  transform: scale(1.03);
} */

.masonry-grid__values-list {
  display: flex;
  flex-direction: column;
}

.masonry-grid__value-item {
  display: flex;
  align-items: flex-start;
}

.masonry-grid__value-item + .masonry-grid__value-item {
  border-top: 1px solid rgba(14, 14, 14, 0.15);
}

.masonry-grid--home .masonry-grid__value-item {
  flex-direction: column;
  gap: 2.4rem;
  padding: 8rem 0;
}

.about-fact {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.about-fact + .about-fact {
  margin-top: 5.6rem;
  border-top: 1px solid rgba(14, 14, 14, 0.15);
  padding-top: 5.6rem;
}

.about-fact__title {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(3.2rem, 4.5vw, 6rem); /* = .masonry-grid__value-title (accueil) */
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.char-reveal__word {
  display: inline-block;
  white-space: nowrap;
}

.char-reveal__wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Room for descenders (g, j…) — line-height:1 + overflow:hidden would clip them.
     0.16em < the 120% the letter slides from, so the reveal mask still works. */
  padding-bottom: 0.16em;
}

.char-reveal__char {
  display: inline-block;
  will-change: transform;
}

/* Date d'événement : sous-titre avec icône calendrier */
.about-fact__date {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: -0.8rem;
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.4;
  color: rgba(14, 14, 14, 0.7);
}

.about-fact__date-icon {
  flex-shrink: 0;
}

.about-fact__desc {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--black);
}

.masonry-grid__value-title {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(3.2rem, 4.5vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.masonry-grid__value-desc {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--black);
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  background-color: var(--black);
  color: var(--white);
  padding: 13rem var(--edge) 4.8rem;
}

.cta-container {
  max-width: 100rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  text-align: center;
}

.cta-title {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(3.6rem, 6.5vw, 9.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}

#about-cta-title {
  white-space: nowrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 10rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  padding: 0 1rem 0 3rem;
  height: 4.8rem;
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--white);
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
  cursor: pointer;
}

.cta-btn:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.05);
}

.cta-btn-label {
  white-space: nowrap;
}

.cta-btn-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-left: 2rem;
  border-radius: 50%;
  background-color: var(--white);
  transition: transform 0.3s var(--ease-out-quart);
}

.cta-btn:hover .cta-btn-dot {
  transform: scale(1.1);
}

.cta-btn-dot-inner {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--black);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background-color: var(--black);
  color: var(--white);
  padding: 6rem var(--edge) 3rem;
  position: relative;
  overflow: hidden;
}

.footer-top {
  padding-bottom: 6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-info-grid {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.footer-info-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-address-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: opacity 0.3s ease;
}

.footer-address-link p {
  font-family: var(--font-neue);
  font-size: 1.4rem;
  line-height: 1.7;
  opacity: 0.7;
}

.footer-address-link:hover {
  opacity: 0.5;
}

.footer-info-link {
  font-family: var(--font-neue);
  font-size: 1.4rem;
  line-height: 1.7;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.footer-info-link:hover {
  opacity: 1;
}

.footer-copyright {
  font-family: var(--font-neue);
  font-size: 1.2rem;
  opacity: 0.4;
  margin-top: 1rem;
}

.footer-bottom {
  padding-top: 4rem;
  overflow: hidden;
}

.footer-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  height: 32rem;
}

.footer-photo-wrap {
  overflow: hidden;
  border-radius: 0.4rem;
}

.footer-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grands écrans : avec une hauteur fixe de 32rem, les colonnes très larges
   donnaient des bandeaux recadrés en hauteur. Les photos restent carrées,
   comme à 1440px où 32rem ≈ largeur d'une colonne. */
@media (min-width: 1536px) {
  .footer-photos {
    height: auto;
  }
  .footer-photo-wrap {
    aspect-ratio: 1 / 1;
  }
}

/* ============================================
   RESPONSIVE — TABLET
   ============================================ */
@media (min-width: 768px) and (max-width: 1079px) {
  .hero-left {
    width: 100vw;
    min-height: var(--app-height, 100lvh);
    padding: 9rem 2.4rem 2.4rem;
  }
  .project-card { width: 80vw; }
  .hero-nav-list { flex-wrap: wrap; gap: 0; }
  .hero-nav-item { flex: 0 0 50%; margin-bottom: 1rem; }

  .gallery-left { width: 55%; }
  .gallery-right { padding: 3rem; }

  .expertises-heading { top: 8rem; left: 2rem; }
  .expertise-card-inner { padding: 0 2rem; padding-top: 18vh; padding-bottom: 8rem; }
  .expertise-card-body { grid-template-columns: 1fr; gap: 3rem; }
  .expertise-card-image-col { justify-content: center; }
  .expertise-card-image-wrap { width: 100%; max-width: 40rem; }
  .expertises-nav { padding: 0 2rem 2rem; }
  .expertises-nav-label { display: none; }
  .expertises-nav-item { justify-content: center; }

  .masonry-grid__header { flex-direction: column; gap: 3rem; grid-column: 1; grid-row: 1; }
  .masonry-grid__header-side { flex: none; }
  .masonry-grid__header-right { flex: none; max-width: 50rem; }
  .masonry-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; }
  .masonry-grid__photo-large { grid-column: 1 / 3; grid-row: 2; }
  .masonry-grid__photo-side-1 { grid-column: 1; grid-row: 3; aspect-ratio: 1 / 0.6; }
  .masonry-grid__photo-side-2 { grid-column: 2; grid-row: 3; aspect-ratio: 1 / 0.6; }
  .masonry-grid__photo-side-3 { grid-column: 1 / 3; grid-row: 4; aspect-ratio: 16 / 5; }
  .masonry-grid__values { grid-column: 1 / 3; grid-row: 5; }
  .masonry-grid__value-item { flex-direction: column; gap: 1.6rem; }
  .masonry-grid__value-title { flex: none; }

  .nav-overlay { padding: 8rem 2rem 2.4rem; }
  .nav-info { grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 3rem; }
}

/* ============================================
   RESPONSIVE — MOBILE (< 768px)
   ============================================ */
@media (max-width: 767px) {
  /* Le bloc « NASIRIAN » + les 4 carres repassent SOUS les liens du menu.
     Les infos de bas de page (nom, adresse, horaires, reseaux) sont
     masquees : elles se superposaient a ce visuel, et restent accessibles
     dans le pied de page et sur la page Contact. */
  .nav-info { display: none; }
  .nav-main { display: flex; flex-direction: column; gap: 3.2rem; }
  .nav-feature {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: auto;
    padding-bottom: 0;
    --nav-sq: calc((100vw - 4rem - 3.6rem) / 4);
  }
  .nav-feature__word { font-size: calc(var(--nav-sq) * 1.05); text-align: left; }
  .nav-feature__photos { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }

  .hero-left {
    width: 100vw;
    min-height: var(--app-height-safe, 100svh);
    padding: 8rem 1.6rem 2rem;
    justify-content: flex-start;
    gap: 0;
  }
  .hero-nav { display: none; }
  .hero-content { padding: 0; margin-top: auto; margin-bottom: 4rem; gap: 3.2rem; }
  .hero-title { --hero-title-size: clamp(5rem, 20vw, 7.5rem); }
  .hero-desc { font-size: 1.5rem; max-width: none; line-height: 1.55; }
  .hero-bottom { margin-top: 0; }
  .hero-social { gap: 0.8rem; }
  .hero-social-link { font-size: 1rem; }
  /* Full-screen cards on mobile so the horizontal scroll ends with the last
     slide flush against the left edge (no leftover sliver of the previous card). */
  /* Hero cale sur le viewport BARRE VISIBLE, comme Realisations et Services :
     les bandeaux de titre en bas de carte ne passent plus sous la barre du
     navigateur. Valeur figee au chargement, donc aucun saut au scroll. */
  .hero-sticky { height: var(--app-height-safe, 100svh); }
  .project-card { width: 100vw; }

  /* MOBILE — volets du header désactivés : les cartes du hero sont masquées
     et on passe directement à Réalisations. Pour les rétablir : supprimer
     cette règle ET la ligne « if (isMobile) return; » dans initHero (main.js). */
  .project-card { display: none; }
  .project-info { padding: 1.2rem 1.6rem; }
  .project-name { font-size: clamp(2rem, 6vw, 2.8rem); }

  /* Ces deux sections bloquent le scroll pour animer : leur hauteur est calee
     sur le viewport BARRE VISIBLE (--app-height-safe) et non barre masquee,
     pour que rien n'y soit jamais recouvert par la barre du navigateur.
     Valeur figee au chargement : aucun saut quand la barre se retracte. */
  .gallery-sticky { flex-direction: column; height: var(--app-height-safe, 100svh); }
  .expertises-sticky { height: var(--app-height-safe, 100svh); }
  /* Bande d'images : 40% de la hauteur en haut de l'ecran, le reste pour
     les textes (titre "Realisations", liste, description, bouton). */
  .gallery-left { width: 100%; height: calc(var(--app-height-safe, 100svh) * 0.4); flex-shrink: 0; }
  /* Une carte = exactement la fenetre visible, pour qu'on ne voie qu'une
     seule image a la fois (pas de demi-photo suivante deja visible). */
  .gallery-strip { gap: 0; }
  .gallery-card { height: calc(var(--app-height-safe, 100svh) * 0.4); }
  .gallery-card:nth-child(n+3) { display: none; }
  .gallery-image-wrap { height: 100%; padding-bottom: 0; }
  .gallery-right {
    flex: 1; height: auto; padding: 2rem 1.6rem 2rem;
    align-items: flex-start; justify-content: flex-start; overflow-y: auto;
    transform: none !important; will-change: auto !important;
  }
  .gallery-right-inner { max-width: none; width: 100%; }
  .gallery-heading { font-size: clamp(2.8rem, 8vw, 4rem); margin-bottom: 2rem; line-height: 1; }
  .gallery-list-link { padding: 1rem 0; gap: 1.2rem; }
  .gallery-list-label { font-size: clamp(1.3rem, 4vw, 1.6rem); }
  .gallery-desc { margin-top: 1.6rem; font-size: 1.3rem; }
  .gallery-btn { height: 4rem; padding: 0 0.6rem 0 2rem; margin-top: 1.6rem; font-size: 1.3rem; min-height: 44px; }
  .gallery-btn-dot { width: 2.8rem; height: 2.8rem; margin-left: 1.2rem; }

  .expertises-heading { top: 5.6rem; left: 1.6rem; font-size: clamp(3.6rem, 11vw, 5.6rem); line-height: 0.9; }
  .expertise-card-inner { padding: 14rem 1.6rem 7rem; justify-content: flex-start; }
  .expertise-card-body { grid-template-columns: 1fr; gap: 2rem; }
  /* Le numero passe DEVANT le titre au lieu d'occuper sa propre ligne :
     sur petit ecran, cette ligne isolee coutait une hauteur inutile. */
  .expertise-card-text-col { display: block; }
  .expertise-card-num {
    float: left;
    margin: 0.55em 0.8rem 0 0;
  }
  .expertise-card-title { font-size: clamp(2rem, 6vw, 2.8rem); }
  .expertise-card-tags { clear: both; padding-top: 1.6rem; }
  /* Exactement 2 lignes sur toutes les cartes : sinon le texte suivant se décale
     d'une carte à l'autre pendant la transition au scroll. */
  .expertise-card-tags { min-height: auto; gap: 0.2rem 0; height: calc(0.9rem * 1.8 * 2 + 0.2rem); overflow: hidden; }
  .expertise-card-tag { font-size: 0.9rem; white-space: nowrap; line-height: 1.8; }
  .expertise-card-btn { font-size: 1.3rem; padding: 0.8rem 0.8rem 0.8rem 2rem; min-height: 4.4rem; }
  .expertise-card-btn-dot { width: 2.8rem; height: 2.8rem; flex-shrink: 0; }
  .expertise-card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .expertise-card-text-col { flex-shrink: 0; }
  .expertise-card-image-col { flex: 1; min-height: 0; overflow: hidden; justify-content: flex-start; }
  .expertise-card-image-wrap {
    width: 100%; max-width: 100%;
    height: 100%; aspect-ratio: auto;
  }
  .expertises-nav { padding: 0 1.6rem 1.6rem; }
  .expertises-nav-label { display: none; }
  .expertises-nav-item { justify-content: center; }

  .horiz-gallery-track { padding: 2.4rem 1.6rem; gap: 1.6rem; }
  .horiz-gallery-card { width: 80vw; min-width: 0; gap: 1.2rem; }
  .horiz-gallery-name { font-size: clamp(2rem, 6vw, 2.8rem); }
  .horiz-gallery-meta { flex-wrap: wrap; gap: 0.8rem; }
  .horiz-gallery-cta { width: 28vw; min-width: 12rem; }
  .horiz-gallery-cta-text { font-size: 1.6rem; text-align: center; }

  .agency-section { padding: 9.6rem 1.6rem 8rem; }
  .masonry-grid__header { flex-direction: column; gap: 2.4rem; grid-column: 1; grid-row: 1; }
  .masonry-grid__header-side { flex: none; }
  .masonry-grid__heading { font-size: clamp(4.8rem, 14vw, 7.2rem); }
  .masonry-grid__header-right { flex: none; max-width: none; gap: 1.6rem; padding-top: 0; }
  .masonry-grid__intro-desc { font-size: 1.6rem; }
  .masonry-grid__btn { height: 4.4rem; padding: 0 0.8rem 0 2.4rem; font-size: 1.4rem; min-width: 44px; }
  .masonry-grid__btn-dot { width: 3.2rem; height: 3.2rem; margin-left: 1.6rem; }
  .masonry-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; margin-bottom: 4rem; }
  .masonry-grid__photo-large { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
  .masonry-grid__photo-side-1 { grid-column: 1; grid-row: 3; aspect-ratio: 4 / 3; }
  .masonry-grid__photo-side-2 { grid-column: 1; grid-row: 4; aspect-ratio: 4 / 3; }
  .masonry-grid__photo-side-3 { grid-column: 1; grid-row: 5; aspect-ratio: 4 / 3; }
  .masonry-grid__values { grid-column: 1; grid-row: 6; padding-top: 2.4rem; }
  .masonry-grid__value-item { flex-direction: column; gap: 1.2rem; padding: 2rem 0; }
  .masonry-grid__value-title { flex: none; font-size: clamp(2.6rem, 7.5vw, 3.2rem); }
  .masonry-grid__value-desc { font-size: 1.6rem; }

  .cta-section { padding: 7.2rem 1.6rem 4rem; }
  .cta-container { gap: 3.2rem; }
  .cta-title { font-size: clamp(3.2rem, 10vw, 5.6rem); }
  .cta-btn { height: 4.4rem; padding: 0 0.8rem 0 2.4rem; font-size: 1.4rem; min-height: 44px; }
  .cta-btn-dot { width: 3.2rem; height: 3.2rem; margin-left: 1.6rem; }

  .footer { padding: 4rem 1.6rem 2.4rem; }
  .footer-top { padding-bottom: 3.2rem; }
  .footer-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 1.6rem; }
  .footer-info-col { gap: 0.4rem; }
  .footer-address-link p, .footer-info-link { font-size: 1.3rem; }
  .footer-copyright { font-size: 1.1rem; }
  .footer-photos { height: 20rem; gap: 0.8rem; }
  .footer-photo-wrap:nth-child(3), .footer-photo-wrap:nth-child(4) { display: none; }
  .footer-photos { grid-template-columns: repeat(2, 1fr); }

  /* Menu cale sur le viewport BARRE VISIBLE, comme les heros et les sections
     epinglees : les 4 carres en bas ne passent plus sous la barre. */
  .nav-overlay { padding: 8rem 1.6rem 2.4rem; height: var(--app-height-safe, 100svh); }
  .nav-link { font-size: clamp(2rem, 8vw, 5.2rem); gap: 1.2rem; }
  .nav-sub__list { padding-left: 2.4rem; }
  .nav-info { grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 3rem; }
  .nav-info a, .nav-info p { font-size: 1.3rem; }

  .burger { width: 8rem; height: 4.4rem; font-size: 1.2rem; right: 1.6rem; top: 1.6rem; }
  .logo { left: 1.6rem; top: 1.8rem; }
  .logo-inner { --logo-size: 1.8rem; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-outer { height: auto !important; }
  .hero-sticky { position: relative; height: auto; }
  .hero-overflow { overflow: visible; }
  .hero-step1 { flex-wrap: wrap; width: 100%; will-change: auto; }
  .hero-left { width: 100%; min-height: 100vh; min-height: var(--app-height, 100lvh); }
  .project-card { width: 100%; min-height: 50vh; will-change: auto; }

  .gallery-outer { height: auto !important; }
  .gallery-sticky { position: relative; height: auto; flex-direction: column; }
  .gallery-left { width: 100%; height: auto; overflow: visible; }
  .gallery-strip { will-change: auto; transform: none !important; }
  .gallery-card { max-width: 60rem; }
  .gallery-right { padding: 4rem 2rem; align-items: flex-start; justify-content: flex-start; }
  .gallery-img { position: relative; top: 0; height: 100%; will-change: auto; transform: none !important; }
  .gallery-char, .gallery-list-num, .gallery-list-label, .gallery-desc, .gallery-btn {
    will-change: auto; transform: none !important; opacity: 1 !important; visibility: visible !important;
  }
  .gallery-list-line { will-change: auto; transform: none !important; }

  .expertises-section { height: auto !important; }
  .expertises-sticky { position: relative; height: auto; overflow: visible; }
  .expertises-cards-container { position: relative; display: flex; flex-direction: column; }
  .expertise-card { position: relative; height: auto; min-height: 80vh; }
  .expertise-card-inner { position: relative; height: auto; padding: 8rem 3rem; }
  .expertises-heading { position: relative; top: auto; left: auto; padding: 8rem 3rem 4rem; }
  .expertises-nav { display: none; }

  .horiz-gallery { height: auto !important; }
  .horiz-gallery-sticky { position: relative; height: auto; overflow-x: auto; }
  .horiz-gallery-track { will-change: auto; transform: none !important; }
}

/* ============================================
   EXPERTISE CARD FRAMES — SVG texture materials
   Uses feTurbulence-generated SVG patterns as the
   element background. Padding (instead of border)
   reveals the texture as the visible frame area.
   The image fills only the content box (inside
   the padding), leaving texture exposed around it.
   ============================================ */

/* All frame cards: no radius, no border — padding creates the frame depth */
#exp-card-0 .expertise-card-image-wrap,
#exp-card-1 .expertise-card-image-wrap,
#exp-card-2 .expertise-card-image-wrap,
#exp-card-3 .expertise-card-image-wrap {
  border-radius: 0;
  background-repeat: repeat;
  background-size: 300px 300px;
}

/* ---- Card 01 : Baguette noyer — dark walnut wood ----
   feTurbulence fractalNoise with low x-frequency (0.012)
   creates long horizontal grain lines. Color matrix maps
   desaturated noise → warm brown walnut range.
   Dark: rgb(45,18,5) · Mid: rgb(107,49,15) · Light: rgb(169,80,25)
   ---- */
#exp-card-0 .expertise-card-image-wrap {
  padding: 20px;
  /* Noyer — grain directionnel : fractalNoise très étiré horizontalement (longues
     veines) + tables de couleurs non-monotones qui cassent le bruit en bandes
     claires/foncées = veines de bois. Brun noyer profond. */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.5' numOctaves='5' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='table' tableValues='0.15 0.37 0.19 0.45 0.24 0.39 0.17'/><feFuncG type='table' tableValues='0.07 0.19 0.10 0.24 0.12 0.20 0.08'/><feFuncB type='table' tableValues='0.03 0.10 0.05 0.12 0.06 0.10 0.04'/></feComponentTransfer></filter><rect width='280' height='280' filter='url(%23w)'/></svg>");
  background-size: 280px 280px;
  background-repeat: repeat;
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, 0.38),
    0 14px 34px rgba(0, 0, 0, 0.5);
}

/* ---- Card 02 : Laiton brossé — brushed brass ----
   feTurbulence (not fractalNoise) with very low x-frequency
   (0.0015) creates long horizontal brush strokes. Color
   matrix maps to gold range. Inset box-shadow adds the
   characteristic light-catch shimmer of brushed metal.
   ---- */
#exp-card-1 .expertise-card-image-wrap {
  padding: 20px;
  /* Chêne clair — même technique de grain directionnel, mais veines plus ouvertes
     (échelle plus large), seed différent et gamme de brun miel plus claire :
     une essence visiblement distincte du noyer. */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='o'><feTurbulence type='fractalNoise' baseFrequency='0.016 0.34' numOctaves='5' seed='23' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='table' tableValues='0.40 0.62 0.46 0.69 0.50 0.63 0.44'/><feFuncG type='table' tableValues='0.26 0.44 0.31 0.50 0.34 0.45 0.29'/><feFuncB type='table' tableValues='0.12 0.24 0.15 0.28 0.17 0.25 0.13'/></feComponentTransfer></filter><rect width='340' height='340' filter='url(%23o)'/></svg>");
  background-size: 340px 340px;
  box-shadow:
    inset 0 0 16px rgba(28, 14, 0, 0.3),
    0 14px 34px rgba(0, 0, 0, 0.45);
}

/* ---- Card 03 : Caisse noire — matte black museum frame ----
   High-frequency fractalNoise (0.85) with gamma compression
   creates a subtle micro-texture like velvet or matte lacquer.
   All values mapped to near-black range (rgb 3–33 per channel).
   ---- */
#exp-card-2 .expertise-card-image-wrap {
  padding: 20px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='gamma' amplitude='0.12' exponent='2.5' offset='0.01'/><feFuncG type='gamma' amplitude='0.12' exponent='2.5' offset='0.01'/><feFuncB type='gamma' amplitude='0.12' exponent='2.5' offset='0.01'/></feComponentTransfer></filter><rect width='200' height='200' filter='url(%23m)'/></svg>");
  background-size: 200px 200px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 20px rgba(0, 0, 0, 0.9),
    0 14px 36px rgba(0, 0, 0, 0.6);
}

/* ---- Card 04 : Noir mat — grain + biseau directionnel + ombre portée. */
#exp-card-3 .expertise-card-image-wrap {
  padding: 20px;
  background-color: #0e0c0a;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='5' seed='11'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='0.2' intercept='0.02'/><feFuncG type='linear' slope='0.2' intercept='0.02'/><feFuncB type='linear' slope='0.2' intercept='0.02'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23p)'/></svg>");
  background-size: 160px 160px;
  box-shadow:
    inset 3px 3px 6px rgba(255, 255, 255, 0.10),
    inset -4px -4px 9px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(10, 8, 6, 0.9),
    0 12px 34px rgba(0, 0, 0, 0.55);
}

/* ── Nav dots — identity colors, mapped by destination (overlay + hero nav) ── */
/* Accueil — white (the overlay it sits in is dark) */
a[href$="/"]:not([href*="/a-propos/"]):not([href*="/encadrement/"]):not([href*="/galerie/"]):not([href*="/faq/"]):not([href*="/contact/"]) .nav-dot,
a[href$="/"]:not([href*="/a-propos/"]):not([href*="/encadrement/"]):not([href*="/galerie/"]):not([href*="/faq/"]):not([href*="/contact/"]) .hero-nav-dot { background-color: var(--white); }
/* À propos — green */
a[href*="/a-propos/"] .nav-dot,
a[href*="/a-propos/"] .hero-nav-dot   { background-color: var(--green); }
/* Encadrement — orange (terracotta) */
a[href*="/encadrement/"] .nav-dot,
a[href*="/encadrement/"] .hero-nav-dot { background-color: var(--terra); }
/* Galerie — mauve */
a[href*="/galerie/"] .nav-dot,
a[href*="/galerie/"] .hero-nav-dot    { background-color: var(--pink); }
/* FAQ — ochre */
a[href*="/faq/"] .nav-dot,
a[href*="/faq/"] .hero-nav-dot        { background-color: var(--ochre); }
/* Contact — blue */
a[href*="/contact/"] .nav-dot,
a[href*="/contact/"] .hero-nav-dot    { background-color: var(--blue); }

/* ── Project cards — background colors ──────── */
/* La couleur suit le THEME de la tuile, pas sa position : apres le
   reordonnancement (Galerie · Encadrement), Encadrement reste terracotta
   et Galerie verte. */
#hero-card-1 { --card-bg: var(--green); }  /* Galerie */
#hero-card-2 { --card-bg: var(--terra); }  /* Encadrement */

/* ── Expertise cards — color + stacking ─────── */
#exp-card-0 { --card-color: var(--blue);  z-index: 4; }
#exp-card-1 { --card-color: var(--pink);  z-index: 3; }
#exp-card-2 { --card-color: var(--green); z-index: 2; }
#exp-card-3 { --card-color: var(--beige); z-index: 1; }

/* Page Encadrement : dégradé propre du blanc au bleu (pas d'orange) */
#encadrement-types #exp-card-0 { --card-color: var(--white); }
#encadrement-types #exp-card-3 { --card-color: var(--blue); }

/* ── Footer static info ──────────────────────── */
.footer-info-static { opacity: 0.5; cursor: default; }

/* ============================================
   PAGE: À PROPOS
   ============================================ */

/* --- Skip link -------------------------------- */
.about-skip-link {
  position: absolute;
  top: -100%;
  left: 1.6rem;
  z-index: 99999;
  padding: 1.2rem 2rem;
  background: var(--terra);
  color: var(--white);
  font-family: var(--font-neue);
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 0.4rem;
  text-decoration: none;
  transition: top 0.2s ease;
}

.about-skip-link:focus {
  top: 1.6rem;
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* --- Section label (shared) ------------------- */
.about-section-label {
  display: block;
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grey);
  margin-bottom: 4rem;
}

.about-section-label--light {
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   ABOUT HERO
   ============================================ */
.about-hero {
  position: relative;
  min-height: 100vh;
  min-height: var(--app-height, 100lvh);
  background-color: var(--black);
  display: grid;
  grid-template-columns: 55% 45%;
  overflow: hidden;
}

.about-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12rem 6rem 6rem 6rem;
  position: relative;
  z-index: 2;
}

/* Grands écrans : texte aligné sur le logo (--edge) */
@media (min-width: 1536px) {
  .about-hero__left {
    padding-left: var(--edge);
  }
}

.about-hero__overline {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  font-variant: small-caps;
  letter-spacing: 0.2em;
  color: var(--terra);
  margin-bottom: 2.4rem;
}

.about-hero__title {
  font-family: var(--font-platt);
  font-weight: 700;
  font-size: clamp(7rem, 10vw, 14rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 3.2rem;
}

/* Smaller variant for long single-word titles (e.g. "Encadrement") so they
   don't overflow onto the hero image. */
.about-hero__title--compact {
  font-size: clamp(5.6rem, 8vw, 11rem);
}

.about-hero__desc {
  font-family: var(--font-neue);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.4vw, 2rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  max-width: 46rem;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.about-hero__scroll {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 6rem;
  color: rgba(255, 255, 255, 0.35);
}

.about-hero__scroll-arrow {
  display: flex;
  align-items: center;
}

.about-hero__scroll-label {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.about-hero__right {
  position: relative;
  display: flex;
  flex-direction: column;
}

.about-hero__img-wrap {
  position: relative;
  overflow: hidden;
  flex: 1;
}

.about-hero__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(187, 110, 68, 0.15);
  z-index: 1;
  pointer-events: none;
}

.about-hero__img {
  /* Absolutely positioned so top/height are % of the wrap HEIGHT (margin-%
     would be relative to WIDTH and over-shift on narrow viewports → black gap).
     Image is 130% tall, offset -15%, so it covers the wrap with 15% slack each
     side — enough for the parallax (yPercent -8 ≈ 10.4% of height) to slide
     without ever exposing the dark section bg above the green band. */
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

.about-hero__band {
  padding: 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background-color: var(--green);
  flex-shrink: 0;
}

/* Band colour follows the page's nav-dot identity colour */
.about-hero__band--terra { background-color: var(--terra); }
.about-hero__band--pink  { background-color: var(--pink); }
.about-hero__band--ochre { background-color: var(--ochre); }
.about-hero__band--blue  { background-color: var(--blue); }

/* Placeholder white section for the secondary pages (between header & footer) */
.page-blank {
  min-height: 100vh;
  background-color: var(--white);
}

/* ============================================
   FAQ — accordéon par catégories
   ============================================ */
.faq-section {
  background-color: var(--beige);
  padding: 12rem var(--edge) 14rem;
}

.faq-inner {
  max-width: 92rem;
  margin: 0 auto;
}

.faq-section__heading {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(4.8rem, 8vw, 8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 6rem;
}

/* Contenu libre d'une page standard (ex. mentions légales) */
.page-content {
  font-family: var(--font-neue);
  font-size: 1.6rem;
  line-height: 1.6;
  max-width: 72rem;
  margin: 0 auto;
}
.page-content h2 {
  font-weight: 400;
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 5.6rem 0 1.6rem;
}
.page-content p,
.page-content ul {
  margin-bottom: 1.6rem;
}
.page-content ul {
  list-style: disc;
  padding-left: 2rem;
}
.page-content a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.faq-category + .faq-category {
  margin-top: 5.6rem;
}

.faq-category__title {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
  padding-left: 0.2rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.faq-item {
  background-color: var(--white);
  border: 1px solid rgba(22, 18, 14, 0.1);
  border-radius: 1.2rem;
  overflow: hidden;
}

.faq-item__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.2rem 2.4rem;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--black);
  transition: background-color 0.3s ease;
}

.faq-item__button:hover {
  background-color: rgba(22, 18, 14, 0.03);
}

.faq-item__question {
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: clamp(1.6rem, 2vw, 1.9rem);
  line-height: 1.4;
}

.faq-item__icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--grey);
  transition: transform 0.35s var(--ease-out-quart);
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item__answer {
  height: 0;
  overflow: hidden;
}

.faq-item__answer-text {
  margin: 0;
  padding: 0 2.4rem 2.4rem;
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.8vw, 1.7rem);
  line-height: 1.65;
  color: var(--grey);
}

@media (max-width: 767px) {
  .faq-section { padding: 7.2rem 1.6rem 9rem; }
  .faq-section__heading { margin-bottom: 4rem; }
  .faq-category + .faq-category { margin-top: 4rem; }
  .faq-item__button { padding: 1.8rem 1.8rem; }
  .faq-item__answer-text { padding: 0 1.8rem 1.8rem; }
}

/* ============================================
   CONTACT — carte + formulaire
   ============================================ */
.contact-map {
  background-color: var(--beige);
}
.contact-map {
  position: relative;
}
.contact-map__frame {
  display: block;
  width: 100%;
  height: 60vh;
  min-height: 38rem;
  border: 0;
  /* La carte n'intercepte ni le scroll ni le clic tant qu'elle n'est pas activée */
  pointer-events: none;
}
.contact-map.is-active .contact-map__frame {
  pointer-events: auto;
}

.contact-reach-section {
  background-color: var(--beige);
  padding: 12rem var(--edge) 14rem;
}
.contact-reach-grid {
  max-width: 92rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10rem;
}
.contact-calendly__heading {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(3.6rem, 6vw, 6.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 1.6rem 0 1.6rem;
}
.contact-calendly__desc {
  font-family: var(--font-neue);
  font-size: 1.6rem;
  line-height: 1.5;
  max-width: 65ch;
  margin-bottom: 4rem;
}
.contact-calendly__btn {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  height: 5.2rem;
  padding: 0 1rem 0 3rem;
  border-radius: 10rem;
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.6rem;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out-quart), opacity 0.3s ease;
}
.contact-calendly__btn:hover { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .contact-calendly__btn { transition: none; }
  .contact-calendly__btn:hover { transform: none; }
}
.contact-calendly__btn-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background-color: var(--white);
}
.contact-calendly__btn-dot::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--black);
}

.contact-form__heading {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(3.6rem, 6vw, 6.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 1.6rem 0 4.8rem;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.contact-form__label {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  opacity: 0.6;
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--black);
  background-color: var(--white);
  border: 1px solid rgba(22, 18, 14, 0.15);
  border-radius: 0.8rem;
  padding: 1.4rem 1.6rem;
  transition: border-color 0.3s ease;
  width: 100%;
}
/* Champ piège anti-spam : invisible pour les visiteurs, rempli par les robots */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form__textarea {
  resize: vertical;
  min-height: 14rem;
  line-height: 1.5;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: rgba(22, 18, 14, 0.55);
}
/* Custom chevron for the select */
.contact-form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236B6560'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  padding-right: 4.4rem;
}
.contact-form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  height: 5.2rem;
  padding: 0 1rem 0 3rem;
  margin-top: 0.8rem;
  border-radius: 10rem;
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-neue);
  font-weight: 500;
  font-size: 1.6rem;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out-quart), opacity 0.3s ease;
}
.contact-form__submit:hover { transform: scale(1.03); }
.contact-form__submit-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background-color: var(--white);
}
.contact-form__submit-dot::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--black);
}
.contact-form__status {
  margin: 0;
  font-family: var(--font-neue);
  font-size: 1.5rem;
  color: var(--green);
  min-height: 1.5rem;
}

@media (max-width: 767px) {
  .contact-map__frame { height: 48vh; min-height: 30rem; }
  .contact-reach-section { padding: 7.2rem 1.6rem 9rem; }
  .contact-reach-grid { gap: 6.4rem; }
  .contact-calendly__heading { margin-bottom: 2.4rem; }
  .contact-form__heading { margin-bottom: 3.2rem; }
}

/* Coordonnées — 4 colonnes + icônes dessinées au scroll */
.contact-coords .about-values__grid { grid-template-columns: repeat(4, 1fr); }
.contact-coords__head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.contact-coords__head .about-values__title { margin: 0; }
/* La description s'aligne sur le titre (icône 3,2rem + gap 1,4rem), pas sur l'icône */
.contact-coords .about-values__desc { padding-left: 4.6rem; margin-top: 1.8rem; }
.contact-coords__icon {
  display: block;
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  color: var(--terra);
}
.contact-coords__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Icônes-liens (Adresse / Téléphone / E-mail) */
a.contact-coords__icon {
  cursor: pointer;
  transform-origin: center;
  transition: transform 0.3s var(--ease-out-quart);
}
a.contact-coords__icon:hover { transform: scale(1.15); }
a.contact-coords__icon:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 0.4rem;
  border-radius: 0.4rem;
}
@media (max-width: 1079px) {
  .contact-coords .about-values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .contact-coords .about-values__grid { grid-template-columns: 1fr; }
}

.about-hero__band-meta {
  display: flex;
  align-items: center;
}

.about-hero__band-category {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  opacity: 0.6;
}

.about-hero__band-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.about-hero__band-name {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: clamp(2.4rem, 2.5vw, 3.6rem);
  letter-spacing: -0.02em;
}

.about-hero__band-num {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1.1rem;
  opacity: 0.4;
}

/* ============================================
   ABOUT WELCOME — Image expand to fullscreen
   ============================================ */
/* Welcome scroll section.
   Mechanic: a STATIC "caisse noire" frame (identical to the green Services card,
   #exp-card-2) sits centred; the photo — a full-viewport object-fit:cover layer —
   is clipped to the frame's aperture at rest and reveals outward to fullscreen as
   you scroll (no scaling of the frame, no black letterbox bars).
   Everything is positioned with calc() from the viewport, so it is responsive
   natively; JS only drives --aw-reveal (0 → 1) on scroll. */
.about-welcome {
  position: relative;
  background-color: var(--white);
  /* Scroll distance (sticky spacer). Overridden by JS via --about-welcome-height. */
  height: var(--about-welcome-height, 250vh);

  /* Aperture geometry (the visible photo window at rest), derived from the
     viewport. The frame is drawn around this; the photo clip reveals from it. */
  --aw-reveal: 0;
  --aw-pad: 2rem;
  --aw-w: clamp(26rem, 32vw, 42rem);
  --aw-h: calc(var(--aw-w) / 1.5);
  --aw-x: calc((100vw - var(--aw-w)) / 2);
  --aw-y: calc((100vh - var(--aw-h)) / 2);
}

.about-welcome__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--white);
}

/* Static "caisse noire" frame — matte black museum moulding, identical to the
   Services card #exp-card-2: a textured padding band + inset depth + drop shadow.
   It never moves or scales; the growing photo simply covers it. */
.about-welcome__frame {
  position: absolute;
  top: calc(var(--aw-y) - var(--aw-pad));
  left: calc(var(--aw-x) - var(--aw-pad));
  width: calc(var(--aw-w) + 2 * var(--aw-pad));
  height: calc(var(--aw-h) + 2 * var(--aw-pad));
  padding: var(--aw-pad);
  z-index: 0;
  /* Matte moulding in the brand green (--green #697A6C, the À-propos theme),
     given a real frame's depth: a high-contrast matte grain (overlay), a
     directional bevel (light top-left / shade bottom-right), a deep inner
     vignette, and a soft drop shadow. The green base keeps the exact hue. */
  /* Darker green base for a richer matte moulding */
  background-color: #4f5d53;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='5' seed='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='0.95' intercept='0.04'/><feFuncG type='linear' slope='0.95' intercept='0.04'/><feFuncB type='linear' slope='0.95' intercept='0.04'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23m)'/></svg>");
  background-repeat: repeat;
  background-size: 160px 160px;
  background-blend-mode: overlay;
  box-shadow:
    /* lit bevel (top-left) */
    inset 3px 3px 5px rgba(255, 255, 255, 0.18),
    /* shaded bevel (bottom-right) */
    inset -3px -3px 8px rgba(12, 18, 14, 0.65),
    /* crisp inner lip + deep inner vignette toward the photo */
    inset 0 0 0 1px rgba(10, 16, 12, 0.7),
    inset 0 0 30px rgba(10, 16, 12, 0.8),
    /* drop shadow on the wall */
    0 18px 44px rgba(14, 22, 16, 0.55);
  pointer-events: none;
}


/* The photo: a full-viewport cover layer, clipped to the aperture at rest and
   revealed outward to fullscreen via --aw-reveal. object-fit:cover means it
   always fills the screen — never any black letterbox bars. */
.about-welcome__img {
  /* The image is sized to the FRAME aperture at rest and grows to fullscreen as
     --aw-reveal goes 0 → 1. Because the desktop aperture matches the photo ratio
     (3:2), object-fit: cover shows the WHOLE photo at rest — identical framing on
     every screen size (no viewport-aspect-dependent crop). It only re-crops as it
     grows to cover the viewport at full reveal (no black bars). */
  position: absolute;
  top: calc(var(--aw-y) * (1 - var(--aw-reveal)));
  left: calc(var(--aw-x) * (1 - var(--aw-reveal)));
  width: calc(var(--aw-w) + (100vw - var(--aw-w)) * var(--aw-reveal));
  height: calc(var(--aw-h) + (100vh - var(--aw-h)) * var(--aw-reveal));
  object-fit: cover;
  object-position: 50% 56%;
  display: block;
  z-index: 1;
  /* Rounded corners only DURING the zoom — 0 at rest (crisp frame) and 0 at full
     zoom. Parabola 4·r·(1−r) peaks at mid-reveal. */
  border-radius: calc(0.8rem * 4 * var(--aw-reveal) * (1 - var(--aw-reveal)));
}

/* Dark gradient scrim for text legibility once fullscreen (hidden at rest) */
.about-welcome__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: linear-gradient(
    to top,
    rgba(22, 18, 14, 0.72) 0%,
    rgba(22, 18, 14, 0.4) 28%,
    rgba(22, 18, 14, 0) 55%
  );
  pointer-events: none;
}

/* Welcome heading — centred horizontally, 20% from the bottom */
.about-welcome__title {
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  margin: 0;
  width: 100%;
  padding: 0 3rem;
  text-align: center;
  font-family: var(--font-platt);
  font-weight: 500;
  font-size: clamp(3.6rem, 7vw, 8.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  pointer-events: none;
  z-index: 3;
}

.about-welcome__word {
  display: inline-block;
  /* Per-word reveal mask */
  overflow: hidden;
  vertical-align: bottom;
}

.about-welcome__word > span {
  display: inline-block;
}

@media (max-width: 768px) {
  .about-welcome {
    --aw-pad: 1.4rem;
    /* Portrait starting frame on mobile (taller than wide), centred on the person */
    --aw-w: min(54vw, 24rem);
    --aw-h: calc(var(--aw-w) * 1.38);
  }

  .about-welcome__title {
    font-size: clamp(3.2rem, 10vw, 5.2rem);
    padding: 0 2rem;
  }

  /* Retour à la ligne après « Bienvenue chez » : desktop seulement, le
     titre s'enchaîne librement sur mobile faute de place. */
  .about-welcome__break { display: none; }
}

/* Reduced-motion / no-JS static fallback: photo already fullscreen (cover),
   frame hidden, title visible. */
.about-welcome.is-static {
  --aw-reveal: 1;
}

.about-welcome.is-static .about-welcome__frame {
  display: none;
}

.about-welcome.is-static .about-welcome__scrim {
  opacity: 1;
}

.about-welcome.is-static .about-welcome__word > span {
  transform: none;
}

/* ============================================
   ABOUT INTRO — Histoire
   ============================================ */
.about-intro {
  background-color: var(--beige);
  padding: 12rem var(--edge);
  position: relative;
  overflow: hidden;
}

.about-intro__inner {
  max-width: 80rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.about-intro__text-wrap {
  position: relative;
  z-index: 2;
}

.about-intro__entry {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 3rem;
  padding: 3.2rem 0;
  border-top: 1px solid rgba(14, 14, 14, 0.15);
  align-items: start;
}

.about-intro__num {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: var(--terra);
  padding-top: 0.6rem;
}

.about-intro__text {
  font-family: var(--font-neue);
  font-weight: 300;
  font-size: clamp(2rem, 2.5vw, 3rem);
  line-height: 1.55;
  color: var(--black);
}

.about-intro__year {
  position: absolute;
  bottom: -4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-platt);
  font-weight: 700;
  font-size: clamp(12rem, 20vw, 24rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--black);
  opacity: 0.06;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ============================================
   ABOUT VALUES — Savoir-faire
   ============================================ */
.about-values {
  background-color: var(--black);
  color: var(--white);
  padding: 10rem var(--edge) 12rem;
}

.about-values__rule {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 4rem;
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.about-values__col {
  padding: 4rem 4rem 4rem 0;
}

.about-values__col + .about-values__col {
  padding-left: 4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.about-values__num {
  display: block;
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terra);
  margin-bottom: 2rem;
}

.about-values__title {
  font-family: var(--font-platt);
  font-weight: 600;
  font-size: clamp(2.4rem, 2.5vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1.6rem;
}

.about-values__desc {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  max-width: 34rem;
}

/* ============================================
   ABOUT WORKSHOP — L'espace
   ============================================ */
.about-workshop {
  background-color: var(--beige);
  padding: 10rem var(--edge);
}

.masonry-grid--about {
  grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 50vh); 
}

.masonry-grid--about .masonry-grid__header         { grid-column: 1 / 3; grid-row: 1; padding: 3rem; }
.masonry-grid--about .masonry-grid__photo-large    { grid-column: 1 / 3; grid-row: 2; }
.masonry-grid--about .masonry-grid__photo-side-1   { grid-column: 3; grid-row: 1; }
.masonry-grid--about .masonry-grid__photo-side-2   { grid-column: 3; grid-row: 2; }
.masonry-grid--about .masonry-grid__photo-side-3   { grid-column: 1; grid-row: 3 / 5; }
.masonry-grid--about .masonry-grid__values         { grid-column: 2 / 4; grid-row: 3 / 5; padding: 3rem; }

/* Mirror variant (Encadrement) — desktop only : colonnes inversées gauche↔droite
   (image → texte au lieu de texte → image). Le responsable tablette/mobile reste
   géré par les règles --about (donc non miroité, ce qui n'a pas d'impact empilé). */
@media (min-width: 1080px) {
  .masonry-grid--mirror .masonry-grid__header      { grid-column: 2 / 4; }
  .masonry-grid--mirror .masonry-grid__photo-large { grid-column: 2 / 4; }
  .masonry-grid--mirror .masonry-grid__photo-side-1{ grid-column: 1; }
  .masonry-grid--mirror .masonry-grid__photo-side-2{ grid-column: 1; }
  .masonry-grid--mirror .masonry-grid__photo-side-3{ grid-column: 3; }
  .masonry-grid--mirror .masonry-grid__values      { grid-column: 1 / 3; }
}



/* Variante sans header ni photo large (galerie.html : bloc de texte seul,
   entre deux visuels déjà présents ailleurs sur la page). Les lignes de grille
   remontent d'un cran puisque header/photo-large sont absents du DOM. */
.masonry-grid--no-header .masonry-grid__photo-side-1 { grid-row: 1; }
.masonry-grid--no-header .masonry-grid__photo-side-2 { grid-row: 1; }
.masonry-grid--no-header .masonry-grid__photo-side-3 { grid-row: 2 / 4; }
.masonry-grid--no-header .masonry-grid__values       { grid-row: 2 / 4; }

/* Variante à une seule photo (photo-side-3 uniquement) : bloc entier réduit
   à 2 lignes (au lieu de 3), même hauteur que les autres photo-side. */
.masonry-grid--no-header.masonry-grid--single-photo { grid-template-rows: repeat(2, 50vh); }
.masonry-grid--no-header.masonry-grid--single-photo .masonry-grid__photo-side-3 { grid-row: 1 / 3; }
.masonry-grid--no-header.masonry-grid--single-photo .masonry-grid__values       { grid-row: 1 / 3; }

/* ── Galerie : enchaînement organique des deux masonry via un pont d'images ── */
.galerie-flush-b { padding-bottom: 1.5rem; }
.galerie-flush-b .masonry-grid { margin-bottom: 0; }
.galerie-flush-t { padding-top: 1.5rem; }

/* Bloc « Vernissages » (galerie, miroir) : texte sous le titre, centré verticalement */
.galerie-flush-t .masonry-grid__header { flex-direction: column; justify-content: center; gap: 1.6rem; }
.galerie-flush-t .masonry-grid__header-side { flex: none; }
.galerie-flush-t .masonry-grid__header-right { flex: none; padding-top: 0; }

/* Header empilé (titre au-dessus du texte) plutôt que côte à côte — évite au
   texte de déborder sous la photo quand le titre est court (ex. Événements). */
.masonry-grid--stack-header .masonry-grid__header { flex-direction: column; gap: 1.6rem; }
.masonry-grid--stack-header .masonry-grid__header-side { flex: none; }
.masonry-grid--stack-header .masonry-grid__header-right { flex: none; padding-top: 0; }

.galerie-bridge {
  background-color: var(--beige);
  padding: 1.5rem 3rem;
}
.galerie-bridge__inner {
  max-width: 138rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr; /* petite image puis large, même ligne */
  gap: 1.5rem;
}
.galerie-bridge__cell {
  overflow: hidden;
  border-radius: 0.6rem;
  height: 46vh;
}
.galerie-bridge__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .galerie-bridge { padding: 1.2rem 1.6rem; }
  .galerie-bridge__cell { height: 26vh; }
}

.about-workshop__address {
  font-family: var(--font-neue);
  font-style: normal;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--terra);
  letter-spacing: 0.01em;
  margin-top: 0.4rem;
}

.about-workshop__address .masonry-grid__btn {
  margin-top: 0.8rem;
}

/* ============================================
   ABOUT TEAM — L'équipe
   ============================================ */
.about-team {
  background-color: var(--black);
  color: var(--white);
  padding: 10rem var(--edge) 12rem;
}

.about-team__inner {
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.about-team__quote {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.about-team__quote p {
  font-family: var(--font-platt);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 3.5vw, 4.8rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--white);
  text-align: center;
  max-width: 75ch;
}

.about-team__attribution {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  font-style: normal;
}

/* ============================================
   ABOUT PAGE — Focus indicator
   ============================================ */
.about-hero__left a:focus-visible,
.about-workshop__text a:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================
   ABOUT — RESPONSIVE TABLET (max 1079px)
   ============================================ */
@media (max-width: 1079px) {
  .about-hero {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    min-height: var(--app-height, 100lvh);
  }

  .about-hero__left {
    padding: 12rem 4rem 4rem;
    order: 1;
  }

  .about-hero__right {
    order: 2;
    height: 50vw;
    min-height: 32rem;
  }

  .about-hero__title {
    font-size: clamp(6rem, 12vw, 10rem);
  }

  .about-hero__scroll {
    margin-top: 4rem;
  }

  .about-intro {
    padding: 8rem 4rem;
  }

  .about-intro__text {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  }

  .about-values {
    padding: 8rem 4rem 10rem;
  }

  .about-values__grid {
    grid-template-columns: 1fr;
  }

  .about-values__col {
    padding: 4rem 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .about-values__col + .about-values__col {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .about-values__col:first-child {
    border-top: none;
    padding-top: 0;
  }

  .about-workshop {
    padding: 8rem 4rem 10rem;
  }

  /* About masonry — tablet: 2 columns, stacked logically */
  .masonry-grid--about {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
  }
  .masonry-grid--about .masonry-grid__header        { grid-column: 1 / 3; grid-row: 1; padding: 0 0 1.6rem; }
  .masonry-grid--about .masonry-grid__photo-large   { grid-column: 1 / 3; grid-row: 2; aspect-ratio: 16 / 9; }
  .masonry-grid--about .masonry-grid__photo-side-1  { grid-column: 1; grid-row: 3; aspect-ratio: 4 / 3; }
  .masonry-grid--about .masonry-grid__photo-side-2  { grid-column: 2; grid-row: 3; aspect-ratio: 4 / 3; }
  .masonry-grid--about .masonry-grid__photo-side-3  { grid-column: 1 / 3; grid-row: 4; aspect-ratio: 16 / 7; }
  .masonry-grid--about .masonry-grid__values        { grid-column: 1 / 3; grid-row: 5; padding: 1.6rem 0 0; }

  /* Même remontée de lignes qu'en desktop, pour le bloc sans header/photo large. */
  .masonry-grid--no-header .masonry-grid__photo-side-1 { grid-row: 1; }
  .masonry-grid--no-header .masonry-grid__photo-side-2 { grid-row: 1; }
  .masonry-grid--no-header .masonry-grid__photo-side-3 { grid-row: 2; }
  .masonry-grid--no-header .masonry-grid__values       { grid-row: 3; }
  .masonry-grid--no-header.masonry-grid--single-photo .masonry-grid__photo-side-3 { grid-row: 1; }
  .masonry-grid--no-header.masonry-grid--single-photo .masonry-grid__values       { grid-row: 2; }

  .about-workshop__grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .about-workshop__img {
    aspect-ratio: 16 / 9;
  }

  .about-team {
    padding: 8rem 4rem 10rem;
  }
}

/* ============================================
   ABOUT — RESPONSIVE MOBILE (max 767px)
   ============================================ */
@media (max-width: 767px) {
  /* Hero cale sur le viewport BARRE VISIBLE, comme le hero d'accueil et les
     sections Realisations / Services : le bandeau colore en bas de hero ne
     passe plus sous la barre du navigateur. Valeur figee au chargement. */
  .about-hero {
    min-height: var(--app-height-safe, 100svh);
  }

  .about-hero__left {
    padding: 10rem 2.4rem 4rem;
    /* la colonne ne doit jamais depasser l'ecran, meme si un mot long
       (« Encadrement ») force sa largeur intrinseque */
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* Minimum abaisse : a 5.6rem « Encadrement » depassait la largeur
     disponible et poussait toute la colonne hors de l'ecran. */
  .about-hero__title {
    font-size: clamp(3.6rem, 11vw, 8rem);
  }

  .about-hero__desc {
    font-size: 1.5rem;
    max-width: none;
  }

  /* 50vw plutot que 60vw : le hero (texte + image + bandeau) depassait la
     hauteur d'ecran disponible, le bandeau se retrouvait coupe en bas.
     Le plancher passe de 24rem a 18rem, sinon il annulait le gain sur les
     ecrans etroits (50vw = 195px sur un 390px, contre 240px de min-height). */
  .about-hero__right {
    height: 50vw;
    min-height: 18rem;
  }

  .about-hero__scroll {
    margin-top: 3.2rem;
  }

  .about-intro {
    padding: 6.4rem 1.6rem 8rem;
  }

  .about-intro__text {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
  }

  /* Tighter number column on mobile — less wasted space before the text */
  .about-intro__entry {
    grid-template-columns: 2.8rem 1fr;
    gap: 1.6rem;
    padding: 2.4rem 0;
  }

  .about-intro__year {
    font-size: clamp(8rem, 28vw, 14rem);
    bottom: -2rem;
  }

  .about-values {
    padding: 6.4rem 1.6rem 8rem;
  }

  .about-values__desc {
    max-width: none;
  }

  .about-workshop {
    padding: 6.4rem 1.6rem 8rem;
  }

  /* BOTH masonries on mobile — interleave:
     header → grande photo → texte 1 → photo → texte 2 → photo → texte 3 → photo.
     display:contents promotes the 3 text blocks to direct grid children so they
     can be placed between the photos via grid-row. */
  .masonry-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
    gap: 2rem;
    margin-bottom: 4rem;
  }
  .masonry-grid .masonry-grid__values,
  .masonry-grid .masonry-grid__values-list {
    display: contents;
  }
  .masonry-grid .masonry-grid__header                       { grid-column: 1; grid-row: 1; padding: 0 0 1rem; }
  .masonry-grid .masonry-grid__photo-large                  { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
  .masonry-grid .masonry-grid__values-list > :nth-child(1)  { grid-column: 1; grid-row: 3; }
  .masonry-grid .masonry-grid__photo-side-1                 { grid-column: 1; grid-row: 4; aspect-ratio: 4 / 3; }
  .masonry-grid .masonry-grid__values-list > :nth-child(2)  { grid-column: 1; grid-row: 5; }
  .masonry-grid .masonry-grid__photo-side-2                 { grid-column: 1; grid-row: 6; aspect-ratio: 4 / 3; }
  .masonry-grid .masonry-grid__values-list > :nth-child(3)  { grid-column: 1; grid-row: 7; }
  .masonry-grid .masonry-grid__photo-side-3                 { grid-column: 1; grid-row: 8; aspect-ratio: 4 / 3; }

  /* Accueil : la derniere photo (apres « L'humain au coeur du metier »)
     alourdit la section sur petit ecran — masquee en mobile uniquement. */
  .masonry-grid--home .masonry-grid__photo-side-3 { display: none; }

  /* A propos, section « Adresse » : on ne garde que la premiere photo.
     :not(.galerie-flush-b) exclut les sections de la page Galerie, qui
     partagent la classe .about-workshop. */
  .about-workshop:not(.galerie-flush-b) .masonry-grid--about .masonry-grid__photo-side-1,
  .about-workshop:not(.galerie-flush-b) .masonry-grid--about .masonry-grid__photo-side-2 { display: none; }

  /* Galerie : une image au-dessus de chaque texte (photo-large, side-1,
     side-2) et plus rien apres le dernier — on retire la 4e photo. */
  .galerie-flush-b .masonry-grid__photo-side-3 { display: none; }

  /* Reset text-item spacing/borders for the interleaved layout */
  .masonry-grid .masonry-grid__value-item,
  .masonry-grid .about-fact {
    padding: 0;
    margin: 0;
    border: 0;
  }
  .masonry-grid .masonry-grid__value-item {
    flex-direction: column;
    gap: 2rem;
  }

  /* Fact titles must not overflow on small screens */
  .about-fact__title {
    font-size: clamp(2.6rem, 7.5vw, 3.2rem);
  }

  /* Let the À-propos CTA title wrap on mobile (no nowrap overflow) */
  #about-cta-title {
    white-space: normal;
  }

  .about-workshop__img {
    aspect-ratio: 4 / 3;
  }

  .about-workshop__desc {
    font-size: 1.6rem;
    max-width: none;
  }

  .about-team {
    padding: 6.4rem 1.6rem 8rem;
  }

  .about-team__quote p {
    font-size: clamp(2rem, 6vw, 2.8rem);
    text-align: left;
  }

  .about-team__attribution {
    text-align: left;
  }

  .about-section-label {
    margin-bottom: 2.4rem;
  }
}

/* ============================================
   ABOUT — REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .about-hero__img,
  .about-workshop__img {
    transition: none;
  }
}