/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* hauteur du menu fixe : ajustee au reel par main.js */
  --nav-h: 64px;
  --bg:     #0c0b09;
  --accent: rgba(255,255,255,0.92);
  --white:  rgba(255,255,255,0.92);
  --dim:    rgba(255,255,255,0.62);
  --faint:  rgba(255,255,255,0.12);
  --gap: max(1.25rem, 5vw);
  --espace: clamp(1.25rem, 4vw, 3rem);   /* pas vertical entre les blocs, ne suit pas la largeur de l'ecran comme la marge */   /* la meme marge que le menu (5vw) : le nom du menu, le titre et les textes sur une seule verticale, a toutes les largeurs */
  --bebas:  'Bebas Neue', sans-serif;
  --serif:  'Cormorant Garamond', serif;
  --sans:   'DM Sans', sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--white);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.no-image {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.2); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Entrance animations ──────────────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  /* tout s'aligne sur la ligne du haut, comme les coins de l'accueil ;
     les zones tactiles de 44px s'etendent vers le bas */
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.4rem 5vw;
  background: var(--bg);
  transition: transform .35s ease;
}
nav.nav-hidden { transform: translateY(-100%); }

.nav-logo {
  /* la meme typo et la meme taille que "Matthieu Darrasse" sur l'accueil */
  font-family: 'special-gothic-condensed', var(--bebas), sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  letter-spacing: 0.96px;
  color: var(--accent);
  text-transform: uppercase;
  transition: opacity .3s;
}
.nav-logo:hover { opacity: .5; }

.nav-logos-cycler {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 1.1rem;
  display: flex;
  align-items: center;
}
.nav-logo-item {
  position: absolute;
  height: 1.1rem;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0;
  cursor: pointer;
  transition: opacity .5s ease;
}
.nav-logo-item.active { opacity: .55; }
.nav-logo-item:hover { opacity: 1 !important; }

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}
.nav-links a { transition: color .3s; }
.nav-links a:hover { color: var(--pa, var(--white)); }
.nav-links a { border-bottom: 1px solid transparent; padding-bottom: 2px; }
.nav-links a.active { border-color: currentColor; }
.nav-links a.facet { font-weight: 500; color: var(--white); }
.nav-links { align-items: center; }
.nav-links .nav-sep {
  width: 1px;
  height: 1.1em;
  background: var(--dim);
  opacity: .5;
  align-self: flex-start;
  margin-top: .1em;
}

.nav-lang {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  /* FR · EN : le meme dessin que sur l'accueil */
  font-family: 'special-gothic-condensed', var(--bebas), sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.6rem);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-lang button {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  color: var(--dim);
  transition: color .3s;
  padding: 0;
}
.nav-lang button.active { color: var(--white); }
.nav-lang button:not(.active) { opacity: .4; }
.nav-lang span { color: var(--dim); font-size: 0; }
.nav-lang span::before { content: "·"; font-size: clamp(0.8rem, 1.2vw, 1.3rem); opacity: .6; line-height: 1.5; }

/* chapeau sous les metiers de la page DA, comme l'introduction de la page artiste */
.hero-chapeau {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);   /* la meme taille que l'introduction de la page artiste */
  line-height: 1.75;
  color: var(--dim);
  max-width: 680px;
  margin: 1.5rem 0 2rem;   /* le meme espace sous la ligne des metiers que sur la page artiste */
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
#hero {
  /* comme la page artiste : le bloc vient sous le menu, a hauteur de contenu,
     pour que le trait et le debut des projets soient visibles sans defiler */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) var(--gap) clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--faint);
  position: relative;
}
.hero-bottom {
  display: grid;
  /* le nom a exactement la largeur de la signature cote artiste (780px au plus) */
  grid-template-columns: minmax(0, 780px) 1fr;
  align-items: start;
  gap: var(--espace);
}
.hero-left {
  display: flex;
  flex-direction: column;
}
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 0;                      /* les trois liens rapproches : seules les zones tactiles de 44px les separent */
  padding-top: 0;
  /* le haut du picto s'aligne sur le haut du titre : on compense la zone
     tactile de 44px dans laquelle l'icone de 25px est centree */
  margin-top: calc((25px - 44px) / 2 - 3px);   /* le trait de l'enveloppe commence sous le bord de l'icone */
}
.hero-contact-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--white);
  text-decoration: none;
  transition: color .25s;
  font-family: var(--sans);
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* exception voulue : les trois liens de contact sont en couleur au repos,
   et passent en encre au survol (l'inverse du reste du site) */
.hero-contact-link { color: var(--pa, var(--white)); }
.hero-contact-link:hover { color: var(--white); }
.hero-contact-link svg {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}
.hero-logo-item {
  position: absolute;
  width: 36%;
  height: auto;
  top: calc(var(--nav-h) + 8rem);
  left: 70%;
  transform: translateX(-50%);
  filter: brightness(0) invert(1);
  opacity: 0;
  cursor: pointer;
  transition: opacity .8s ease;
}
.hero-logo-item.active { opacity: 1; }
.hero-logo-item[data-id="nandayo"] { width: 27%; }
.hero-logo-item[data-id="chefs-prestige"] { width: 43%; }
.hero-logo-item:hover { opacity: 1 !important; }

.hero-title-block {
  /* le titre mene a la section A propos */
  display: block;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.hero-title {
  color: var(--accent);
  display: block;
  width: 100%;
}
.hero-title svg {
  width: 100%;
  height: auto;
  display: block;
}
.hero-title-word {
  display: block;
  transform-origin: left center;
  white-space: nowrap;
}


.hero-sub {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--dim);
  line-height: 1.4;
}

.metier-filter {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: inherit;
  color: var(--dim);
  transition: color .25s ease;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
#metier-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  margin-top: .75rem;
}
#metier-filter-bar .metier-filter {
  font-family: var(--sans);
  font-style: normal;
  font-size: clamp(.8rem, 1.1vw, 1rem);
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
#metier-filter-bar .metier-filter.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-decoration: none;
}
#type-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  margin-top: 1rem;
}
.type-filter {
  cursor: pointer;
  font-family: var(--sans);
  font-size: clamp(.7rem, 1vw, .85rem);
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .2s ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.type-filter:hover { color: var(--pa, var(--accent)); }
.type-filter.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.metier-clear {
  background: none;
  border: none;
  padding: 0 0 0 .4em;
  cursor: pointer;
  color: inherit;
  font-size: .7em;
  vertical-align: middle;
  opacity: .6;
  transition: opacity .2s;
  line-height: 1;
}
.metier-clear:hover { opacity: 1; }

.metier-filter:hover {
  color: var(--pa, var(--accent));
}
.metier-filter.active {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-metiers {
  font-family: var(--sans);
  /* memes valeurs que sur la page artiste : taille, air au-dessus, interligne */
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.hero-scroll {
  margin-top: 3rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: 1rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .3s, gap .3s;
}
.hero-scroll:hover { color: var(--white); gap: 1rem; }
.hero-scroll::before {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: currentColor;
  transition: width .3s;
}
.hero-scroll:hover::before { width: 44px; }

/* ── Featured project ─────────────────────────────────────────────────────── */
#featured {
  padding: calc(var(--espace) * 4) var(--gap);
  border-bottom: 1px solid var(--faint);
}

.featured-label {
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 2.5rem;
}

.featured-inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--espace);
  align-items: start;
}

.featured-image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 1px solid rgba(255,255,255,0.12);
}
.featured-image img { object-fit: contain; width: 70%; height: 70%; transition: transform .8s cubic-bezier(.25,.46,.45,.94); }
.featured-image:hover img { transform: scale(1.03); }

.featured-info {
  padding: 1rem 0 1rem clamp(1rem, 4vw, 4rem);
}
.featured-year {
  font-size: .8rem;
  color: var(--dim);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.featured-title {
  font-family: var(--bebas);
  font-size: clamp(2.5rem, 5vw, 5rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  line-height: .95;
  margin-bottom: 1rem;
}
.featured-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: var(--dim);
  margin-bottom: 2rem;
  line-height: 1.5;
}
.featured-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 2.5rem;
}
.tag {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.2);
  padding: .3rem .75rem;
  color: var(--dim);
}
.btn-project {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.35);
  padding: .5rem 1.4rem;
  background: none;
  cursor: pointer;
  transition: border-color .3s;
}
.btn-project:hover { border-color: var(--white); }

/* ── Work grid ────────────────────────────────────────────────────────────── */
#work {
  /* l'air visible entre le trait et "Projets" (environ 170px sur ordinateur) sert de reference :
     le meme air sous la derniere carte, et au-dessus des titres A propos et Contact */
  padding: calc(var(--espace) * 1.5) var(--gap) calc(var(--espace) * 3);
  border-top: 1px solid var(--faint);
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2.5rem;
  padding-top: var(--gap);
}
.section-header-top {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.breadcrumb-current {
  font-family: var(--bebas);
  font-size: clamp(1.7rem, 3.2vw, 3.2rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
}
.breadcrumb-link {
  font-family: var(--bebas);
  font-size: clamp(1.7rem, 3.2vw, 3.2rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color .2s;
}
.breadcrumb-link:hover { color: var(--white); }
.breadcrumb-sep {
  font-family: var(--bebas);
  font-size: clamp(2rem, 3.2vw, 3.5rem);
  color: var(--dim);
  margin: 0 .3rem;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: calc(var(--espace) * 1.5);
}

/* ── Gallery mode ─────────────────────────────────────────────────────────── */
.projects-grid.gallery-mode {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--espace);
}
.gallery-item {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.gallery-item-inner {
  position: relative;
  overflow: hidden;
  background: #000;   /* noir pur : le meme que les bandes noires deja presentes dans certaines images de couverture */
  aspect-ratio: 3/2;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 1px solid rgba(255,255,255,0.12);
}
.gallery-item-portrait {
  /* largeur fixe : sinon la carte se cale sur la longueur de la legende
     et deux vignettes du meme format n'ont pas la meme taille */
  width: min(22vw, 100%);
  max-width: 22vw;
  justify-self: center;
}
/* la vignette portrait occupe toute la largeur de sa colonne :
   sa hauteur decoule du ratio, jamais du contenu ni du chargement */
.gallery-item-portrait .gallery-item-inner {
  width: 100%;
  flex: none;
}
.gallery-item-inner img,
.gallery-item-inner video {
  /* positionnement absolu : la vignette garde sa taille meme avant
     le chargement de l'image (evite le rétrécissement transitoire) */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .4s ease;
}
/* vignette recadree plein cadre : pas de bandes vides autour */
.gallery-item-inner.img-cover img,
.gallery-item-inner.img-cover video { object-fit: cover; }

.gallery-item:hover .gallery-item-inner img,
.gallery-item:hover .gallery-item-inner video { transform: scale(1.03); }
.gallery-item-inner[style*="aspect-ratio:auto"] { height: auto; }
/* ratio libre : l'image redonne sa hauteur au conteneur, donc elle
   doit rester dans le flux (contrairement aux vignettes a ratio fixe) */
.gallery-item-inner[style*="aspect-ratio:auto"] img,
.gallery-item-inner[style*="aspect-ratio:auto"] video {
  position: static;
  height: auto;
}
.gallery-item-inner[style*="aspect-ratio:auto"] img { height: auto; object-fit: unset; }
.gallery-guerilla-cover img { object-fit: cover; }
.guerilla-carousel:hover .carousel-slide img { transform: scale(1.03); }
.gallery-cover-inner img {
  transform: scale(var(--cover-scale, 1)) translateX(calc(var(--cover-tx, 0px) * var(--cover-shift, 1))) translateY(calc(var(--cover-ty, 0px) * var(--cover-shift, 1)));
  object-fit: contain;
}
.gallery-logo-cover:hover .gallery-cover-inner img {
  transform: scale(calc(var(--cover-scale, 1) * 1.05)) translateX(calc(var(--cover-tx, 0px) * var(--cover-shift, 1))) translateY(calc(var(--cover-ty, 0px) * var(--cover-shift, 1)));
}
.gallery-video { cursor: pointer; }
.gallery-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--white);
  background: rgba(0,0,0,.25);
  opacity: 0;
  transition: opacity .3s;
}
.gallery-video:hover .gallery-play { opacity: 1; }
.gallery-caption {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--dim);
  text-transform: uppercase;
}
/* ── Carousel ─────────────────────────────────────────────────────────────── */
.carousel-track {
  position: absolute;
  inset: 0;
}
.carousel-slide {
  display: none;
  position: absolute;
  inset: 0;
  cursor: default;
}
.carousel-slide.active { display: block; }
.carousel-slide[data-youtube] { cursor: pointer; }
.carousel-slide img,
.carousel-slide video {
  width: 100%; height: 100%; object-fit: cover;
}
.gallery-item-inner.portrait-item img,
.gallery-item-inner.portrait-item video {
  object-fit: cover;
}
.portrait-item .carousel-slide img,
.portrait-item .carousel-slide video,
.carousel-slide.has-bg img,
.carousel-slide.has-bg video {
  object-fit: contain;
}
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background .2s;
  z-index: 2;
}
.carousel-prev { left: .5rem; }
.carousel-next { right: .5rem; }
.carousel-prev:hover,
.carousel-next:hover { background: rgba(0,0,0,.75); }
.carousel-counter {
  position: absolute;
  bottom: .5rem;
  right: .6rem;
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 300;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);
  background: rgba(0,0,0,.4);
  padding: .15rem .4rem;
  border-radius: 2rem;
  z-index: 2;
}

.gallery-project-link {
  display: inline-block;
  margin-top: .5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.gallery-project-link:hover { color: var(--pa, var(--accent)); }

.modal-youtube-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}
.modal-youtube-wrap {
  position: relative;
  padding-top: 56.25%;
}
.modal-youtube-wrap.portrait {
  padding-top: 0;
  width: min(360px, 75vw);
  margin: 0 auto;
}
.modal-youtube-wrap.portrait iframe {
  position: static;
  display: block;
  width: 100%;
  aspect-ratio: 9/16;
}
.modal-youtube-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.project-card { cursor: pointer; }
.project-card-image {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #000;   /* idem : les cartes ont toutes le meme noir autour de l'image */
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 1px solid rgba(255,255,255,0.12);
}
.project-card-image img { object-fit: contain; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.25,.46,.45,.94); transform: scale(var(--cover-scale, 1)) translateX(calc(var(--cover-tx, 0px) * var(--cover-shift, 1))) translateY(calc(var(--cover-ty, 0px) * var(--cover-shift, 1))); }
.project-card:hover .project-card-image img { transform: scale(calc(var(--cover-scale, 1) * 1.05)) translateX(calc(var(--cover-tx, 0px) * var(--cover-shift, 1))) translateY(calc(var(--cover-ty, 0px) * var(--cover-shift, 1))); }

.project-card-name {
  font-family: var(--bebas);
  font-size: 1.5rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: .3rem;
}
.project-card-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--dim);
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
#modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
#modal.open { opacity: 1; pointer-events: all; }

.modal-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--espace)) var(--gap) calc(var(--espace) * 4);
}

.modal-close {
  position: fixed;
  top: 1.4rem;
  left: var(--gap);
  background: none; border: none; cursor: pointer;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  padding: .4rem 0;
  transition: color .3s;
}
.modal-close:hover { color: var(--pa, var(--white)); }

.modal-header { margin-bottom: 3.5rem; }
.modal-header-with-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace);
  align-items: start;
}
.modal-header-image {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.modal-header-image img {
  width: 100%; height: 100%; object-fit: cover;
}
/* un logo vectoriel s'affiche en entier, jamais recadre */
.modal-header-image img[src$=".svg"] { object-fit: contain; }
@media (max-width: 768px) {
  .modal-header-with-image { grid-template-columns: 1fr; }
  .modal-header-image { order: -1; }
}
.modal-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--faint);
  padding-bottom: 3px;
  transition: color .25s ease, border-color .25s ease;
}
.modal-link:hover {
  color: var(--pa, var(--accent));
  border-bottom-color: var(--pa, var(--accent));
}

.modal-year {
  font-size: .8rem;
  color: var(--dim);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.modal-title {
  font-family: var(--bebas);
  font-size: clamp(3rem, 7vw, 6rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  line-height: .9;
  margin-bottom: 1rem;
}
.modal-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--dim);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.modal-desc {
  max-width: 60ch;
  line-height: 1.5;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  font-weight: 300;
}

.modal-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace);
  margin-top: 3rem;
}
.modal-gallery .full { grid-column: 1 / -1; }
.modal-gallery-item { background: var(--bg); min-width: 0; }
.modal-gallery-item video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}
.modal-gallery-item img {
  width: 100%; height: auto;
  object-fit: contain; display: block;
}
.modal-gallery-item.full { aspect-ratio: 16/9; }
.modal-gallery-item.full img { height: 100%; object-fit: contain; }
.modal-video { background: #000; aspect-ratio: 16/9; }
.modal-video iframe { width: 100%; height: 100%; display: block; }

.gallery-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
  transition: background .2s;
}
.gallery-play-btn::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 22px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.modal-video-thumb:hover .gallery-play-btn { background: rgba(0,0,0,.5); }

/* ── Modal sections ───────────────────────────────────────────────────────── */
.modal-section { margin-top: 4rem; }
.modal-video-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.modal-video-img {
  align-self: end;
}
.modal-video-img img {
  width: 67%; height: auto; object-fit: contain;
}
.modal-section:first-child { margin-top: 3rem; }

.modal-section-title {
  font-family: var(--bebas);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--faint);
  margin-bottom: 1.25rem;
}
.modal-section-desc {
  max-width: 38ch;
  font-size: .9rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
  margin-bottom: 2rem;
}
.modal-img-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(255,255,255,0.6);
  margin-top: .75rem;
  padding: 0 .25rem;
}

/* ── Slideshow section ────────────────────────────────────────────────────── */
.modal-slideshow {
  position: relative;
  margin-top: 1.25rem;
  min-height: 360px;
}
.modal-slideshow-bg {
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.modal-slideshow-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.modal-slideshow-frames {
  position: relative;
  aspect-ratio: 3/2;
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
}
.modal-slideshow-frames img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .6s ease;
}
.modal-slideshow-frames img.active { opacity: 1; }
/* section video : lecteur principal + vignettes */
.video-principal {
  margin-top: 1.25rem;
  background: #000;
  overflow: hidden;
}
.video-principal video {
  width: 100%;
  height: auto;      /* le rapport reel de la capture, jamais rogne */
  display: block;
}
.video-vignettes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .9rem;
}
.video-vignette {
  width: 132px;
  padding: 0;
  border: 1px solid var(--faint);
  background: #000;
  cursor: pointer;
  overflow: hidden;
  opacity: .5;
  transition: opacity .25s ease, border-color .25s ease;
}
.video-vignette video {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}
.video-vignette:hover { opacity: .85; }
.video-vignette.active {
  opacity: 1;
  border-color: var(--pa, var(--accent));
}
@media (max-width: 768px) {
  .video-vignette { width: 96px; }
}

.video-legende {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--dim);
  margin-top: .9rem;
  max-width: 720px;
}

/* bande de vignettes sous le carrousel */
.slideshow-vignettes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .9rem;
}
.slideshow-vignette {
  width: 84px;
  aspect-ratio: 4/3;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  overflow: hidden;
  opacity: .5;
  transition: opacity .25s ease, border-color .25s ease;
}
.slideshow-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slideshow-vignette:hover { opacity: .85; }
.slideshow-vignette.active {
  opacity: 1;
  border-color: var(--pa, var(--accent));
}
@media (max-width: 768px) {
  .slideshow-vignette { width: 62px; }
}

.slideshow-prev, .slideshow-next, .slideshow-pause {
  position: absolute;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  z-index: 10;
  transition: background .2s;
}
.slideshow-prev:hover, .slideshow-next:hover, .slideshow-pause:hover { background: rgba(0,0,0,0.7); }
.slideshow-prev { bottom: 1rem; left: 1rem; }
.slideshow-next { bottom: 1rem; right: 1rem; }
.slideshow-pause { bottom: 1rem; left: 50%; transform: translateX(-50%); }
@media (max-width: 768px) {
  .modal-slideshow { grid-template-columns: 1fr; }
}

/* ── About ────────────────────────────────────────────────────────────────── */
#about {
  padding: calc(var(--espace) * 3.75) var(--gap) calc(var(--espace) * 3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--espace) * 3);
  align-items: start;   /* le titre part en haut, a la meme distance du trait que 'Projets' */
  border-top: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
}

.about-text h2 {
  font-family: var(--bebas);
  font-size: clamp(2.5rem, 6vw, 6rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.75rem;
  line-height: .95;
}
.about-text p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.85;
  color: var(--dim);
}
.about-text p + p { margin-top: 1rem; }
.about-link {
  color: var(--about-link-color, var(--accent));
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s;
}
/* couleur au repos, encre au survol : meme regle que le lien L'Admoniteur sur la page artiste */
.about-link:hover { opacity: 1; color: var(--white); }

#about-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem 1rem calc(1rem + 30px);
}
.about-preview-card {
  background: var(--bg, #111);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  position: relative;
}
.about-preview-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.about-preview-info {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.about-preview-title {
  font-family: var(--bebas);
  font-size: 1.4rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white, #fff);
}
.about-preview-btn {
  background: var(--white, #fff);
  color: var(--bg, #111);
  border: none;
  padding: .5rem 1rem;
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.about-preview-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-photo {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
/* un logo en apercu : entier, jamais coupe, sur fond clair (certains sont noirs) */
.about-photo.logo img,
.about-preview-card img.logo {
  object-fit: contain;
  padding: 18%;
  box-sizing: border-box;
  background: #f7f4ee;
}

/* ── Contact ──────────────────────────────────────────────────────────────── */
#contact {
  padding: calc(var(--espace) * 4) var(--gap) calc(var(--espace) * 3);
  text-align: center;
}
#contact h2 {
  font-family: var(--bebas);
  font-size: clamp(3rem, 9vw, 9rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  line-height: .9;
  margin-bottom: 1.5rem;
}
#contact p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--dim);
  margin-bottom: 2.5rem;
  line-height: 1.5;
}
#contact a.email {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.8rem, 1.5vw, 1rem);
  letter-spacing: .1em;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: .25rem;
  transition: border-color .3s;
}
#contact a.email:hover { color: var(--pa, var(--white)); border-color: var(--pa, var(--white)); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--faint);
  padding: 1.5rem var(--gap);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  /* un seul element depuis le retrait du nom de domaine : centre plutot
     qu'orphelin contre le bord gauche */
  justify-content: center;
  font-size: .8rem;
  color: var(--dim);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .5;
}

/* ── Hero contact ─────────────────────────────────────────────────────────── */
.hero-contact-icons {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.hero-contact-icon {
  display: flex;
  align-items: center;
  color: var(--dim);
  text-decoration: none;
  transition: color .25s ease;
}
.hero-contact-icon:hover { color: var(--accent); }
.hero-contact-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
}

/* ── Hero featured (right side) ──────────────────────────────────────────── */
#hero-featured {
  width: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 2px;
  background: var(--faint);
}
#hero-featured img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
#hero-featured:hover img { transform: scale(1.03); }
.hero-featured-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.hero-featured-label {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .4rem;
}
.hero-featured-title {
  font-family: "special-gothic-condensed", sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--accent);
}
.hero-featured-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(.8rem, 1.2vw, 1rem);
  color: var(--dim);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .featured-inner { grid-template-columns: 1fr; }
  .featured-info { padding: 0; }
  #about { grid-template-columns: 1fr; gap: var(--espace); }
  .about-photo { order: -1; aspect-ratio: 4/3; }
  .modal-gallery { grid-template-columns: 1fr; }
  .modal-gallery .full { grid-column: 1; }
  /* le menu complet ne tient pas, mais le passage vers l'autre facette
     doit rester accessible : on ne garde que ce lien, toujours en dernier */
  /* Meme disposition que l'accueil : le nom a gauche, FR · EN au centre,
     l'autre facette a droite, dans la typo du nom */
  .nav-links {
    display: flex;
    gap: 0;
    order: 3;
    flex: none;
  }
  .nav-lang {
    order: 2;
    flex: 1;
    justify-content: center;
    gap: 0;
  }
  /* le trait devient un point, comme sur l'accueil */
  .nav-lang span { margin: 0 -6px; }
  /* cible tactile : 44px de haut, 36px de large suffisent pour deux lettres */
  nav .nav-lang button { min-width: 36px; }
  .nav-links li { display: none; }
  .nav-links li:last-child { display: block; }
  /* le lien affiche sa version courte (data-court), dans la typo du nom */
  .nav-links a[data-court] { font-size: 0; padding: 0 0 1.4rem; }   /* zone tactile vers le bas */
  .nav-links a[data-court]::before {
    content: attr(data-court);
    /* meme typo, meme taille, meme ligne que le nom */
    font-family: 'special-gothic-condensed', var(--bebas), sans-serif;
    font-size: clamp(1.1rem, 1.4vw, 1.6rem);
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--pa, var(--accent));   /* la meme couleur que le nom */
  }
  .project-card-sub { display: none; }
  .project-card-name { font-size: 1.2rem; }
  .project-card-name[data-short]:not([data-short=""])::before {
    content: attr(data-short);
  }
  .project-card-name[data-short]:not([data-short=""]) {
    font-size: 0;
  }
  .project-card-name[data-short]:not([data-short=""])::before {
    font-size: 1.2rem;
  }

  /* Hero */
  .hero-bottom {
    grid-template-columns: 1fr;
    gap: calc(var(--espace) * 1.5);
  }
  /* en ligne, les trois liens se repartissaient sur deux rangees avec des
     ecarts inegaux : en colonne l'espacement est le meme entre chacun */
  .hero-right {
    flex-direction: column;
    /* chaque lien fait deja 44px de haut (cible tactile) pour 16px de texte :
       l'ecart supplementaire portait le blanc visible a 44px */
    gap: 0;
  }
  .hero-contact-link {
    font-size: 12px;
  }
  .hero-contact-link svg {
    width: 20px;
    height: 20px;
  }

  /* Filtres */
  #metier-filter-bar {
    flex-wrap: wrap;
    gap: .4rem .75rem;
  }
  #type-filter-bar {
    flex-wrap: wrap;
    gap: .4rem .75rem;
  }

  /* la marge autour des logos est fixe en rem : sur une vignette de ~158 px
     elle mangeait la moitie de la largeur, d'ou des logos minuscules */
  :root { --cover-pad: .85rem; }
  /* les decalages de cadrage sont en pixels, cales sur la largeur desktop de la
     vignette : a 158 px de large ils sortaient l'image du cadre (Transilien
     apparaissait vide). On les met a l'echelle de la vignette mobile. */
  .project-card-image { --cover-shift: .35; }
  .gallery-cover-inner { --cover-shift: .6; }

  /* Grille projets */
  .projects-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--espace);
  }
  .projects-grid.gallery-mode {
    grid-template-columns: 1fr 1fr;
  }

  /* Portrait items : les deux classes sont portees par le MEME element,
     donc il faut un selecteur compose. Avec un espace (descendant) la regle
     ne s'appliquait jamais, et la hauteur maximale calee sur du 16/9 reduisait
     les vignettes portrait a une fente de moins de 100 px sur mobile. */
  .gallery-item-inner.portrait-item {
    max-height: 75vw !important;
  }
  /* la largeur en 22vw (pensee pour une grille desktop a plusieurs colonnes)
     rendait les vignettes minuscules sur une grille mobile a 2 colonnes fixes :
     ici la largeur de colonne est deja fixe, donc la vignette peut la remplir
     sans reproduire le bug d'origine (largeur dictee par la legende) */
  .gallery-item-portrait {
    width: 100%;
    max-width: 100%;
  }

  /* Modale */
  #modal {
    padding: calc(var(--nav-h) + var(--gap)) var(--gap) var(--gap);
  }
  .modal-title {
    font-size: clamp(2rem, 8vw, 4rem);
  }
}

/* ── Accessibilite : focus visible au clavier ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--pa, var(--accent));
  outline-offset: 3px;
  border-radius: 2px;
}
/* la souris ne declenche pas le contour */
:focus:not(:focus-visible) { outline: none; }

/* cibles tactiles : 44px minimum sur les petits elements interactifs */
.nav-lang button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
}
.hero-contact-link { min-height: 44px; }
.nav-links a { display: inline-block; padding: 0 0 1.2rem; }

/* texte reserve aux lecteurs d'ecran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* la fiche recoit le focus a l'ouverture : pas de bague sur le conteneur lui-meme */
#modal:focus, #modal:focus-visible,
#soleil-modal:focus, #soleil-modal:focus-visible { outline: none; }

/* credits des films : une entree par ligne */
.modal-credits, .fiche-credits { line-height: 1.9; }
.modal-credits strong, .fiche-credits strong { font-weight: 500; color: var(--white); }

/* Sur petit ecran l'accueil reduit son nom a .95rem : les autres pages suivent,
   pour que "Matthieu Darrasse" garde la meme taille d'une page a l'autre */
@media (max-width: 700px) {
  .nav-logo, .nav-links a[data-court]::before { font-size: .95rem; }
}

/* pied de page : liens vers les pages galeriste et restaurateur */
.footer-liens a { color: inherit; text-decoration: none; transition: color .2s; }
.footer-liens a:hover { color: var(--pa, var(--accent)); }

/* titres ecrits a la main par Matthieu (SVG dans images/titres), dessines en masque :
   ils prennent la couleur du texte courant. --m : fichier, --r : largeur/hauteur, --l : largeur max */
.titre-ecrit {
  display: block;
  width: min(100%, var(--l, 560px));
  aspect-ratio: var(--r);
  background: currentColor;
  -webkit-mask: var(--m) no-repeat left center / contain;
  mask: var(--m) no-repeat left center / contain;
}

/* titres du catalogue et de la carte : une ligne sur grand ecran, deux lignes
   (le mot, puis « 1, 2, 3, Coucher de soleil ») sur petit ecran pour garder l'ecriture lisible */
.titre-deux-lignes { display: none; }
.titre-deux-lignes .titre-ecrit + .titre-ecrit { margin-top: 0.4rem; }
@media (max-width: 700px) {
  .titre-une-ligne { display: none; }
  .titre-deux-lignes { display: block; }
}