/* =====================================================
   RAWLAND - Portfolio
   Style éditorial noir & blanc, gros titres condensés.
   ===================================================== */

:root {
  --black: #111111;
  --dark: #1c1c1c;
  --dark-2: #262626;
  --white: #ffffff;
  --grey-light: #f4f4f2;
  --grey-mid: #d9d9d6;
  --grey-text: #8a8a86;

  --font-display: "Anton", sans-serif;
  --font-body: "Inter", sans-serif;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --header-h: 84px;

  --container-w: 1240px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
}

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

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-item {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-item, .hero-float, .hero-title {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================
   HEADER / NAV
   ===================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.site-header.on-dark {
  background: rgba(17,17,17,0.7);
  color: var(--white);
}
/* au-dessus du hero : header transparent, posé directement sur la photo */
.site-header.on-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* header pleine largeur : logo et nav proches des bords */
.header-inner {
  max-width: none;
  padding: 0 clamp(20px, 3vw, 48px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
}

.main-nav {
  display: flex;
  gap: 32px;
}
.main-nav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  opacity: 0.75;
  transition: opacity 0.3s var(--ease);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--ease);
}
.main-nav a:hover,
.main-nav a.is-active {
  opacity: 1;
}
.main-nav a.is-active::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 110;
}
.nav-toggle span {
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--header-h) 32px 0;
  overflow: hidden;
  background: linear-gradient(135deg, #f3faf6 0%, #eef6f6 30%, #eef2fa 65%, #ffffff 100%);
}

.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* Ancre invisible : sa position (left/top, en px) est recalculée en JS
   pour coïncider avec le centre exact de Mathys dans la photo de fond ;
   sa taille (CSS) ne sert qu'à calibrer le rayon de l'anneau de vignettes. */
.hero-stage {
  position: absolute;
  top: 50%;
  left: 30%;
  width: clamp(240px, 26vw, 360px);
  height: clamp(240px, 26vw, 360px);
  transform: translate(-50%, -50%);
}

.hero-portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: clamp(220px, 22vw, 320px);
  aspect-ratio: 481 / 646;
  filter: drop-shadow(0 25px 45px rgba(0,0,0,0.35));
}
.hero-portrait img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero-portrait.img-missing {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.25);
}

/* ---------- orbite de vignettes-projets autour du portrait ----------
   Pas de z-index ici : chaque vignette porte le sien (voir main.js,
   2 = derrière / 5 = devant) pour alterner avec .hero-portrait (3). */
.hero-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none; /* réactivé item par item en JS */
  /* Pas de `perspective` ici : cette propriété crée un nouveau contexte
     d'empilement, ce qui figerait TOUTES les vignettes en un seul bloc
     devant ou derrière .hero-portrait, empêchant justement celles qui
     sont à l'arrière de l'anneau de passer derrière le portrait. Le
     point de fuite du rotateY est donc posé individuellement dans le
     transform de chaque vignette (voir renderOrbit dans main.js), pas
     ici sur le conteneur partagé. */
}

/* ---------- contenu texte à droite ---------- */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  text-align: left;
  margin-right: clamp(72px, 12vw, 200px);
  transform: translateY(-48px);
}
.hero-tag {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey-text);
  margin: 0 0 14px;
}
.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--black);
  margin: 0 0 18px;
}
.hero-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  max-width: 420px;
  margin: 0 0 32px;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.btn-cta:hover { background: var(--grey-mid); transform: translateY(-2px); }
.btn-cta:active { transform: translateY(0) scale(0.97); }

.hero-orbit-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 108px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: var(--grey-mid);
  box-shadow: 0 16px 40px -20px rgba(0,0,0,0.18);
  will-change: transform, opacity;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  backface-visibility: hidden;
  padding: 0;
  transform: translate3d(0,0,0);
  /* Le contour grunge vient d'un masque (voir index.html, .hero-orbit-item
     dans main.js) et non d'un filtre : les bords sont irréguliers mais la
     photo à l'intérieur reste nette. */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.hero-orbit-item img { width: 100%; height: 100%; object-fit: cover; }
.hero-orbit-item.is-placeholder { cursor: default; }

.hero-stage.is-dragging { cursor: grabbing; }
.hero-stage { cursor: grab; }

/* ---------- mentions discrètes en bas de la photo hero ---------- */
.hero-credit {
  position: absolute;
  bottom: 16px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}
.hero-credit:hover { opacity: 1; }
.hero-credit--left { left: 20px; }
.hero-credit--right { right: 20px; }

/* placeholder look while there's no real image yet */
.img-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, #e4e4e0, #e4e4e0 10px, #ececea 10px, #ececea 20px);
}
.img-missing img { display: none; }

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(17,17,17,0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.scroll-cue span {
  width: 8px; height: 8px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
  animation: bounce 1.8s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: 0.5; }
  50% { transform: rotate(45deg) translate(4px,4px); opacity: 1; }
}

/* =====================================================
   SECTIONS
   ===================================================== */
.section {
  padding: 120px 0;
}
.section--dark {
  background: var(--dark);
  color: var(--white);
}
.section--light {
  background: var(--white);
  color: var(--black);
}

.section-head { margin-bottom: 56px; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  margin: 0 0 12px;
  letter-spacing: 1px;
}

.section-sub {
  font-size: 15px;
  color: var(--grey-text);
  max-width: 480px;
}
.section--dark .section-sub { color: #a8a8a4; }

/* ---------- horizontal scroll rows (Vidéos / Graphisme) ---------- */
.scroll-row {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 32px 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-row::-webkit-scrollbar { display: none; }

.project-card {
  position: relative;
  flex: 0 0 clamp(260px, 34vw, 460px);
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
  background: var(--dark-2);
  border: none;
  padding: 0;
  text-align: left;
  color: inherit;
}
.project-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.project-card:hover img { transform: scale(1.06); }

.project-card .card-overlay {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
}
.project-card .card-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--white);
}
.project-card .card-client {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-top: 4px;
}
.project-card.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: default;
}
.section--light .project-card.is-empty { color: rgba(0,0,0,0.3); background: var(--grey-light); }

/* ---------- slider infini (Vidéos / Photos / Graphisme) ----------
   #videos-row / #photos-row / #graphisme-row (.scroll-row) est la
   "fenêtre" fixe : overflow-x caché, c'est elle qui masque ce qui
   dépasse. Un masque en dégradé (mask-image) estompe les deux
   extrémités, pour suggérer que la liste continue au-delà de ce qui est
   affiché. À l'intérieur, .scroll-track contient TROIS exemplaires
   consécutifs de la liste et glisse via transform (voir
   setupInfiniteSlider dans main.js) - c'est ce découplage fenêtre/rail
   qui permet à une carte de sortir par la gauche ou la droite sans
   jamais "sauter" : le rail avance en continu, et le rebouclage sur
   l'exemplaire du milieu se fait seulement une fois la carte hors champ,
   donc invisible.

   Chaque carte est directement l'item flexible du rail (--card-w /
   --card-w-featured / --slot-gap calculées en JS à partir de la largeur
   de la fenêtre visible, pour qu'un nombre fixe de cartes tienne toujours
   exactement dans la largeur disponible). Le vrai gap flex étant une
   valeur unique partagée, l'écart est rigoureusement identique entre
   toutes les paires de cartes, y compris autour de la carte vedette
   (.is-featured, toujours la 2e carte visible, un peu plus grande -
   elle n'est plus contrainte à un slot partagé avec les autres). */
.carousel--featured .scroll-row,
.carousel--photos .scroll-row {
  /* overflow-y explicite : sans ça, la valeur "visible" par défaut se
     recalcule en "auto" dès que overflow-x n'est pas "visible" (règle
     CSS), ce qui rendait la rangée scrollable verticalement au moindre
     dépassement d'1px (transition de carte, arrondi de sous-pixel). */
  overflow: hidden;
  scroll-snap-type: none;
  /* Navigation aux flèches uniquement : aucun scroll/swipe manuel. */
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.scroll-track {
  display: flex;
  align-items: center;
  gap: var(--slot-gap, 24px);
}
.scroll-track > .project-card {
  flex: 0 0 auto;
  flex-basis: var(--card-w, clamp(260px, 34vw, 460px));
  aspect-ratio: 16 / 10;
}
/* Le passage de --card-w (posé en JS dès la construction du rail) fait
   changer la valeur héritée de flex-basis dès le premier calcul de style
   - sans ce garde-fou, ce changement serait lui-même transitionné au
   chargement (les cartes "rétréciraient" visiblement à l'affichage). La
   transition n'est activée qu'une fois la mise en page initiale posée
   (voir setupInfiniteSlider, classe .is-ready ajoutée après le 1er place()). */
.scroll-track.is-ready > .project-card {
  transition: flex-basis 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.scroll-track > .project-card.is-featured {
  flex-basis: var(--card-w-featured, clamp(300px, 40vw, 540px));
  z-index: 2;
  box-shadow: 0 24px 44px -14px rgba(0,0,0,0.55);
}

/* ---------- galerie photos (même moteur de carrousel infini que Vidéos /
   Graphisme - voir setupInfiniteSlider dans main.js - mais sans carte
   "vedette" agrandie : plusieurs cartes carrées de même taille). */
.scroll-track--photos > .project-card {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: var(--grey-light);
}
.scroll-track--photos > .project-card.is-empty { color: rgba(0,0,0,0.28); }

/* ---------- carrousel : flèches ----------
   Enrobe .scroll-row (Vidéos / Photos / Graphisme) pour naviguer par
   flèches, qui pilotent le rail infini (voir setupInfiniteSlider). */
.carousel {
  position: relative;
}
/* Photos : pleine largeur, sans dégradé. Les cartes sont dimensionnées sur
   85% de la largeur (option `bleed` de setupInfiniteSlider) et centrées ;
   les cartes voisines dépassent jusqu'aux bords de la page. */
.carousel--photos .scroll-row {
  -webkit-mask-image: none;
  mask-image: none;
}
.carousel--photos .carousel-arrow--prev { left: max(16px, calc(7.5% - 28px)); }
.carousel--photos .carousel-arrow--next { right: max(16px, calc(7.5% - 28px)); }
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(17,17,17,0.55);
  color: rgba(255,255,255,0.95);
  opacity: 0.8;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), opacity 0.25s var(--ease), border-color 0.25s var(--ease);
}
.carousel-arrow:hover {
  background: rgba(17,17,17,0.6);
  border-color: rgba(255,255,255,0.55);
  opacity: 1;
}
.carousel-arrow:active { transform: translateY(-50%) scale(0.92); }
.carousel-arrow--prev { left: 24px; }
.carousel-arrow--next { right: 24px; }
.section--light .carousel-arrow {
  background: rgba(255,255,255,0.8);
  border-color: rgba(0,0,0,0.2);
  color: rgba(0,0,0,0.8);
}
.section--light .carousel-arrow:hover {
  background: var(--white);
  border-color: rgba(0,0,0,0.3);
}

/* Vidéos / Graphisme / Photos n'ont pas besoin de padding sur .scroll-row :
   overflow-hidden masque à la largeur totale de la boîte, et tout
   l'espacement (carte vedette, marge de chaque côté pour Photos)
   est calculé en JS via transform sur .scroll-track - un padding CSS ici
   se cumulerait avec ce calcul et couperait le haut de la carte la plus
   grande (sa hauteur, fixée en JS pour correspondre exactement, se
   retrouverait réduite par le padding via box-sizing: border-box). Les
   flèches restent positionnées en absolu par-dessus, sans réserver
   d'espace. */
.carousel--featured .scroll-row,
.carousel--photos .scroll-row {
  padding: 0;
}

/* Indicateur de progression sous le carrousel : petit point par
   diapositive, celui de la diapositive active s'étire en pastille.
   `top: 105%` (plutôt que `bottom`) le place à 5% de la hauteur de la
   carte SOUS elle, pour ne jamais empiéter sur son contenu. */
.carousel-dots {
  position: absolute;
  top: 105%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: width 0.25s var(--ease), background 0.25s var(--ease);
}
.carousel-dots button:hover { background: rgba(255,255,255,0.75); }
.carousel-dots button.is-active { width: 26px; background: var(--white); }
.section--light .carousel-dots {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.15);
}
.section--light .carousel-dots button { background: rgba(0,0,0,0.28); }
.section--light .carousel-dots button:hover { background: rgba(0,0,0,0.45); }
.section--light .carousel-dots button.is-active { background: var(--black); }

@media (max-width: 640px) {
  .carousel-arrow { width: 36px; height: 36px; font-size: 18px; }
}

/* =====================================================
   A PROPOS
   ===================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}
.about-content p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  max-width: 560px;
}

.btn-toggle {
  margin-top: 12px;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  background: var(--black);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-toggle:hover { background: var(--dark-2); }
.btn-toggle:active { transform: scale(0.96); }

.exp-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  max-width: 560px;
}
.exp-list li {
  padding: 18px 0;
  border-top: 1px solid var(--grey-mid);
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 4px 16px;
  align-items: start;
}
/* logo de l'entreprise, à gauche sur la hauteur de l'item */
.exp-logo {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  object-fit: contain;
}
/* monogramme pour RAWLAND (pas de fichier logo) */
.exp-list .exp-logo--mono {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 22px;
  border-radius: 8px;
}
.exp-list li p {
  grid-column: 2 / -1;
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--grey-text);
}
.exp-list li span {
  font-size: 13px;
  color: var(--grey-text);
}

/* =====================================================
   CONTACT
   ===================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
}
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 18px;
}
.contact-list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 14px;
}
.contact-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
  min-width: 110px;
}
.contact-list a { transition: opacity 0.25s var(--ease); }
.contact-list a:hover { opacity: 0.6; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* =====================================================
   MODALE PROJET
   ===================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.modal[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.75);
  backdrop-filter: blur(4px);
}
.modal-panel {
  position: relative;
  background: var(--white);
  color: var(--black);
  max-width: 920px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 24px;
  transform: translateY(24px) scale(0.98);
  transition: transform 0.4s var(--ease), max-width 0.3s var(--ease);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.25) transparent;
}
.modal-panel::-webkit-scrollbar { width: 8px; }
.modal-panel::-webkit-scrollbar-track { background: transparent; }
.modal-panel::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 999px;
  border: 2px solid var(--white);
  background-clip: padding-box;
}
.modal-panel::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.35); }
.modal[aria-hidden="false"] .modal-panel {
  transform: translateY(0) scale(1);
}
/* Vidéo : popup large pour un lecteur confortable. */
.modal-panel--video { max-width: 1280px; }
/* Photo : s'étend un peu plus sur les côtés, desktop uniquement. */
@media (min-width: 901px) {
  .modal-panel--photo { max-width: 1200px; }
}
/* ---------- topbar (titre + fermeture) ---------- */
.modal-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  background: var(--white);
  position: relative;
  z-index: 3;
  border-radius: 24px 24px 0 0;
}
.modal-kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey-text);
  margin-bottom: 6px;
}
.modal-topbar h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  margin: 0;
  line-height: 1.15;
}
.modal-close {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--grey-light);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.modal-close:hover { background: var(--grey-mid); }

/* variante : topbar posée en overlay sur la vidéo (fond sombre, texte clair) */
.modal-topbar--on-media {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
  border-radius: 24px 24px 0 0;
}
.modal-topbar--on-media .modal-kicker { color: rgba(255,255,255,0.7); }
.modal-topbar--on-media h3 { color: var(--white); }
.modal-topbar--on-media .modal-close {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  backdrop-filter: blur(4px);
}
.modal-topbar--on-media .modal-close:hover { background: rgba(255,255,255,0.3); }

.modal-content { position: relative; }

/* ---------- gabarit vidéo : poster + bouton lecture ---------- */
.modal-video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--dark-2);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}
.modal-video-stage img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(2px) brightness(0.75);
  transform: scale(1.04);
}
.modal-video-stage iframe,
.modal-video-stage video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.modal-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.modal-play-btn:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--white); }
.modal-play-btn::before {
  content: "";
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--black);
  margin-left: 5px;
}

/* ---------- gabarit photo : description courte + galerie en masonry ---------- */
.modal-photo-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin: 0;
  padding: 0 28px 18px;
}
.modal-masonry {
  columns: 2;
  column-gap: 22px;
  /* Marge extérieure = écart entre colonnes + une unité de plus, pour que
     le bord ne paraisse jamais plus serré que l'espace entre les photos. */
  padding: 10px 44px 20px;
}
.modal-masonry img {
  width: 100%;
  display: block;
  margin-bottom: 22px;
  border-radius: 12px;
  break-inside: avoid;
}
@media (max-width: 640px) {
  .modal-masonry { columns: 1; }
}

/* ---------- popups photo + graphisme : panneau sombre, angles droits ----------
   Panneau sombre à angles droits (taille contenue), écarts serrés ;
   le titre reste collé en haut pendant le défilement. */
.modal--gallery .modal-backdrop {
  background: rgba(10,10,10,0.8);
  backdrop-filter: blur(8px);
}
.modal-panel.modal-panel--gallery {
  max-width: 1400px;
  max-height: 92vh;
  background: var(--black);
  color: var(--white);
  border-radius: 0;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.modal-panel--gallery::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.25);
  border-color: transparent;
}
.modal-panel--gallery .modal-topbar {
  position: sticky;
  top: 0;
  align-items: flex-end;
  padding: 22px 28px 28px;
  background: linear-gradient(180deg, rgba(17,17,17,0.97) 60%, rgba(17,17,17,0));
  border-radius: 0;
}
.modal-panel--gallery .modal-kicker { color: rgba(255,255,255,0.5); }
.modal-panel--gallery .modal-topbar h3 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  color: var(--white);
}
.modal-panel--gallery .modal-close {
  width: 38px;
  height: 38px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.4);
  background: transparent;
  color: var(--white);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.modal-panel--gallery .modal-close:hover {
  background: var(--white);
  color: var(--black);
}
.modal-panel--photo .modal-photo-desc {
  max-width: 720px;
  padding: 0 28px 20px;
  color: rgba(255,255,255,0.65);
}
.modal-panel--photo .modal-masonry {
  columns: 3;
  column-gap: 8px;
  padding: 0 28px 28px;
}
.modal-panel--photo .modal-masonry img {
  margin-bottom: 8px;
  border-radius: 0;
}
@media (max-width: 900px) {
  .modal-panel--photo .modal-masonry { columns: 2; }
}
@media (max-width: 640px) {
  .modal-panel--photo .modal-masonry { columns: 1; }
}

/* graphisme en version sombre : textes clairs, visuels à angles droits */
.modal-panel--gallery .modal-graphisme-intro { padding: 0 28px 24px; }
.modal-panel--gallery .modal-graphisme-intro img,
.modal-panel--gallery .modal-graphisme-gallery img {
  border-radius: 0;
}
.modal-panel--gallery .modal-graphisme-text p { color: rgba(255,255,255,0.75); }
.modal-panel--gallery .modal-graphisme-text .modal-context { color: rgba(255,255,255,0.5); }
.modal-panel--gallery .modal-graphisme-tags li {
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
}
.modal-panel--gallery .modal-graphisme-gallery {
  column-gap: 8px;
  padding: 0 28px 28px;
}
.modal-panel--gallery .modal-graphisme-gallery img { margin-bottom: 8px; }

/* ---------- gabarit graphisme : image + texte, puis galerie ---------- */
.modal-graphisme-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 4px 28px 24px;
  align-items: start;
}
.modal-graphisme-intro img {
  width: 100%;
  border-radius: 16px;
  display: block;
}
.modal-graphisme-text p {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin: 0 0 14px;
}
.modal-graphisme-text .modal-context {
  display: block;
  font-style: italic;
  font-size: 13px;
  color: var(--grey-text);
  margin-top: 6px;
}
.modal-graphisme-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
.modal-graphisme-tags li {
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--grey-light);
  color: #555;
}
.modal-graphisme-gallery {
  columns: 2;
  column-gap: 10px;
  padding: 0 10px 24px;
}
.modal-graphisme-gallery img {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  border-radius: 12px;
  break-inside: avoid;
}
@media (max-width: 700px) {
  .modal-graphisme-intro { grid-template-columns: 1fr; }
  .modal-graphisme-gallery { columns: 1; }
}

/* =====================================================
   BANDEAU LOGOS (défilement infini)
   ===================================================== */
.logo-band {
  position: relative;
  background: var(--white);
  color: var(--black);
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  padding: 40px 0;
  overflow: hidden;
}
/* fondu à droite (overlay pour ne pas masquer les bordures) */
.logo-band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(-90deg, var(--white), transparent);
}
/* bloc noir fixe à gauche : les logos défilent et disparaissent dessous */
.logo-band-title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 clamp(28px, 4vw, 56px);
  background: var(--black);
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.logo-band-title::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 120px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--white), transparent);
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logo-scroll var(--logo-duration, 40s) linear infinite;
}
.logo-list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* chaque logo occupe un emplacement de même largeur : espacement régulier
   quel que soit le format (écusson étroit ou logo très large) */
.logo-list li {
  flex: 0 0 auto;
  width: 280px;
  display: flex;
  justify-content: center;
}
.logo-item {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
img.logo-item {
  height: 84px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}
@keyframes logo-scroll {
  to { transform: translateX(var(--logo-shift, -50%)); }
}

/* =====================================================
   AVIS
   ===================================================== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  margin: 0;
  padding: 32px;
  background: var(--grey-light);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.review-card blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}
.review-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 18px;
  border-top: 1px solid var(--grey-mid);
}
.review-card figcaption strong { font-size: 15px; }
.review-card figcaption span { font-size: 13px; color: var(--grey-text); }
.review-card .review-author { font-size: 15px; font-weight: 700; }
a.review-author:hover { text-decoration: underline; }
.review-stars {
  margin-bottom: 14px;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--black);
}

.reviews-link {
  display: table;
  margin: 40px auto 0;
  padding: 14px 26px;
  border: 1px solid var(--black);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.reviews-link span {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.25s var(--ease);
}
.reviews-link:hover { background: var(--black); color: var(--white); }
.reviews-link:hover span { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 900px) {
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .logo-band { padding: 0 0 26px; }
  .logo-band-title { position: static; justify-content: center; padding: 12px 16px; margin-bottom: 24px; font-size: 20px; }
  .logo-band-title br { display: none; }
  .logo-band-title::after { display: none; }
  .logo-list li { width: 190px; }
  .logo-item { font-size: 20px; }
  img.logo-item { height: 60px; max-width: 130px; }
}

@media (max-width: 880px) {
  .hero {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: calc(var(--header-h) + 24px) 24px 72px;
  }
  .hero-visual {
    position: relative;
    inset: auto;
    width: calc(100% + 48px);
    margin: 0 -24px;
    aspect-ratio: 4 / 5;
  }
  .hero-content {
    max-width: 100%;
    margin-top: 40px;
    margin-right: 0;
    transform: none;
  }
  .hero-orbit-item { width: 80px; }

  /* Barre de scroll verticale inutile en mobile : on la masque. */
  html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    inset: 0;
    top: var(--header-h);
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 32px;
    gap: 24px;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
  }
  .site-header.on-dark .main-nav { background: var(--dark); }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a { font-size: 16px; opacity: 1; }
  .nav-toggle { display: flex; }

  .hero-float { width: 78px; }
  .section { padding: 88px 0; }
}

/* =====================================================
   CURSEUR PERSONNALISÉ
   Point + anneau qui suit avec un léger retard élastique.
   mix-blend-mode: difference - reste blanc sur fond sombre,
   noir sur fond clair, sans avoir à traquer la section active.
   Activé en JS uniquement sur pointeur fin (souris), jamais
   au toucher : voir main.js, section 8.
   ===================================================== */
.has-custom-cursor,
.has-custom-cursor a,
.has-custom-cursor button {
  cursor: none;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--white);
  transition: opacity 0.2s var(--ease);
}

.cursor-ring {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 1px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s var(--ease), height 0.3s var(--ease),
    margin 0.3s var(--ease), background 0.3s var(--ease),
    border-color 0.3s var(--ease), opacity 0.2s var(--ease);
}

.cursor-ring span {
  opacity: 0;
  transform: scale(0.6);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--black);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.cursor-ring.is-hover {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
}

.cursor-ring.is-view {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  background: var(--white);
  border-color: transparent;
}
.cursor-ring.is-view span {
  opacity: 1;
  transform: scale(1);
}

.cursor-ring.is-active {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
}

.cursor-dot.is-hidden,
.cursor-ring.is-hidden {
  opacity: 0;
}

@media (pointer: coarse) {
  .has-custom-cursor,
  .has-custom-cursor a,
  .has-custom-cursor button {
    cursor: auto;
  }
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}