/* =========================================================
   Nathan Dunckel, portfolio
   Noir, blanc, gris. Aucun dégradé, aucune autre couleur.
   Typographie : SF Pro Display en natif sur les appareils Apple,
   police système équivalente ailleurs. Aucune police téléchargée.
   Rayons : tuiles 24px, médias 18px, petits blocs 14px,
   boutons et filtres en pilule. Aucune exception.
   Deux thèmes, clair et sombre, au choix depuis la barre.
   ========================================================= */

:root {
  --bg: #FFFFFF;
  --surface: #F2F2F4;
  --surface-deep: #E9E9EC;
  --fg: #101012;
  --muted: #6E6E73;
  --line: rgba(16, 16, 18, 0.10);
  --nav-bg: rgba(255, 255, 255, 0.8);
  --thumb: #FFFFFF;
  --thumb-shadow: 0 1px 3px rgba(16, 16, 18, 0.12);

  color-scheme: light;

  --r-card: 24px;
  --r-media: 18px;
  --r-small: 14px;
  --r-pill: 999px;

  --gutter: clamp(20px, 4vw, 60px);
  --maxw: 1320px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Thème sombre. Le thème est choisi par le bouton de la barre, mémorisé
   dans le navigateur, et calé sur le réglage du système à la première visite. */
[data-theme="dark"] {
  --bg: #0A0A0B;
  --surface: #191A1C;
  --surface-deep: #232427;
  --fg: #F5F5F7;
  --muted: #9A9AA0;
  --line: rgba(245, 245, 247, 0.14);
  --nav-bg: rgba(10, 10, 11, 0.72);
  --thumb: #3A3B3F;
  --thumb-shadow: none;

  color-scheme: dark;
}

/* Le changement de thème se fait en fondu, jamais d'un bloc à l'autre. */
body,
.nav,
.tile,
.about__inner,
.p-specs__inner,
.p-next__link,
.p-figure,
.p-stage__media,
.segmented {
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  body, .nav, .tile, .about__inner, .p-specs__inner, .p-next__link,
  .p-figure, .p-stage__media, .segmented {
    transition: none;
  }
}

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

/* Le défilement vers les ancres est piloté en JavaScript, pour maîtriser la
   courbe de lissage. Ces deux règles servent de secours si le script ne
   se charge pas, ou si l'utilisateur limite les animations. */
html { scroll-padding-top: 68px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fg);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: var(--r-small);
}

/* ---------- Navigation : barre pleine largeur, fine et discrète ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* Le logo de la barre suit le thème, en fondu comme celui du hero. */
.nav__logo {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  flex: none;
}
.nav__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.45s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .nav__logo img { transition: none; }
}

/* Interrupteur jour et nuit. La pastille glisse, rien ne saute. */
.switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-deep);
  cursor: pointer;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease);
}

.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fg);
  transition: transform 0.45s var(--ease), background-color 0.45s var(--ease);
}

[data-theme="dark"] .switch__knob { transform: translateX(18px); }

.switch:active .switch__knob { transform: scale(0.92); }
[data-theme="dark"] .switch:active .switch__knob { transform: translateX(18px) scale(0.92); }

@media (prefers-reduced-motion: reduce) {
  .switch, .switch__knob { transition: none; }
}

.nav__bar {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--gutter);
}

.nav__mark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  gap: clamp(14px, 2vw, 30px);
  font-size: 14px;
  color: var(--muted);
}
.nav__links a {
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav__links a:hover { color: var(--fg); }

/* Sur téléphone, les cinq liens ne tiennent plus côte à côte. Ils défilent
   alors horizontalement, sans barre de défilement visible, plutôt que de
   passer à la ligne ou de disparaître derrière un menu. */
@media (max-width: 680px) {
  .nav__bar { gap: 14px; padding-left: 16px; padding-right: 16px; }
  .nav__links {
    font-size: 13px;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
  }
  .nav__links::-webkit-scrollbar { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(72px, 15vh, 148px) var(--gutter) clamp(64px, 11vh, 120px);
  text-align: center;
}

/* Logo : les deux versions sont superposées et se croisent en fondu
   au changement de thème, pour éviter une coupure. */
.hero__logo {
  position: relative;
  width: clamp(56px, 6vw, 76px);
  aspect-ratio: 1 / 1;
  margin: 0 auto clamp(18px, 2.5vw, 28px);
}

.hero__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.45s var(--ease);
}

.logo--dark { opacity: 0; }
[data-theme="dark"] .logo--light { opacity: 0; }
[data-theme="dark"] .logo--dark { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__logo img { transition: none; }
}

.hero__title {
  margin: 0;
  font-size: clamp(46px, 8.5vw, 104px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.hero__lede {
  margin: clamp(18px, 2.5vw, 26px) auto 0;
  max-width: 30ch;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.38;
  letter-spacing: -0.015em;
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(28px, 3.5vw, 40px);
  padding: 15px 30px;
  border-radius: var(--r-pill);
  background: var(--fg);
  color: var(--bg);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease),
              background-color 0.45s var(--ease), color 0.45s var(--ease);
}
.btn:hover { opacity: 0.86; }
.btn:active { transform: scale(0.975); }

/* ---------- Showreel ---------- */

.reel {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 10vh, 112px);
}

.reel__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
}

.reel__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}

/* Un voile très léger, pour que le bouton reste lisible sur toutes les images. */
.reel__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.reel__frame:hover .reel__poster { transform: scale(1.02); filter: grayscale(0); }

.reel__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  appearance: none;
  border: 0;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  background: #FFFFFF;
  color: #101012;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.reel__play:hover { opacity: 0.9; }
.reel__play:active { transform: translate(-50%, -50%) scale(0.975); }

/* Sur une page projet, l'affiche reste en couleur : on est à l'intérieur
   du travail, plus dans l'index. */
.reel__frame--couleur .reel__poster { filter: none; }
.reel__frame--couleur::after { background: rgba(0, 0, 0, 0.22); }

/* Une fois lancée, la vidéo occupe tout le cadre. */
.reel__frame.is-playing::after { opacity: 0; }
.reel__frame iframe,
.reel__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

@media (hover: none) {
  .reel__poster { filter: grayscale(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reel__poster { transition: none; }
}

/* ---------- Travaux ---------- */

.work {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(72px, 11vh, 128px);
}

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.h2 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.028em;
}

/* Filtres : contrôle segmenté, avec une pastille qui glisse d'un choix à l'autre */
.segmented {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface);
}

.segmented__thumb {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: 0;
  border-radius: var(--r-pill);
  background: var(--thumb);
  box-shadow: var(--thumb-shadow);
  transform: translateX(0);
  pointer-events: none;
}

/* La transition n'est activée qu'une fois la pastille placée,
   pour qu'elle ne parte pas du bord gauche au chargement. */
.segmented.is-ready .segmented__thumb {
  transition: transform 0.5s var(--ease), width 0.5s var(--ease),
              background-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .segmented.is-ready .segmented__thumb { transition: none; }
}

.segment {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.4s var(--ease);
}
.segment:hover { color: var(--fg); }
.segment.is-active { color: var(--fg); }

/* Sur petit écran, les trois intitulés complets touchent le bord :
   on resserre le rembourrage plutôt que de raccourcir les mots. */
@media (max-width: 430px) {
  .segment { padding: 8px 12px; font-size: 13px; }
}

/* Sous-filtres : la rangée se déplie sous la première, sans à-coup.
   La grille à une rangée passe de 0fr à 1fr, ce qui anime la hauteur
   sans avoir à la figer en pixels. */
.subfilters {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 0.5s var(--ease),
              opacity 0.4s var(--ease),
              margin-top 0.5s var(--ease);
}

.subfilters__inner { overflow: hidden; }

.subfilters.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}

.segmented--sub { font-size: 13px; }
.segmented--sub .segment { font-size: 13px; padding: 7px 15px; }

@media (prefers-reduced-motion: reduce) {
  .subfilters { transition: none; }
}

/* Sur petit écran, les quatre sous-filtres défilent du doigt
   plutôt que de passer à la ligne. */
@media (max-width: 560px) {
  .subfilters__inner {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .subfilters__inner::-webkit-scrollbar { display: none; }
  .segmented--sub { width: max-content; }
}

/* Grille bento : tuiles de tailles variables, empilage dense */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 172px;
  grid-auto-flow: dense;
  gap: clamp(12px, 1.4vw, 20px);
}

.tile {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
}
.tile--wide { grid-column: span 4; grid-row: span 2; }
.tile--half { grid-column: span 3; grid-row: span 2; }
.tile--tall { grid-column: span 2; grid-row: span 3; }
.tile--square { grid-column: span 2; grid-row: span 2; }

.tile[hidden] { display: none; }

.tile__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.tile__media {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Les projets restent en noir et blanc, la couleur revient au survol.
   Une tuile peut porter une image fixe ou une vidéo en boucle : même règle. */
.tile__media img,
.tile__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}
.tile__link:hover .tile__media img,
.tile__link:focus-visible .tile__media img,
.tile__link:hover .tile__media video,
.tile__link:focus-visible .tile__media video {
  transform: scale(1.04);
  filter: grayscale(0);
}

/* Sur un écran tactile, il n'y a pas de survol : la couleur est affichée. */
@media (hover: none) {
  .tile__media img,
  .tile__media video { filter: grayscale(0); }
}

.tile__meta {
  padding: 14px 18px 16px;
}

.tile__title {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.tile__sub {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* Marqueur du projet le plus récent, posé dans la légende de la tuile
   et jamais par-dessus l'image. */
.tile__flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--fg);
  vertical-align: 1px;
}

.bento__empty {
  margin: 36px 0 0;
  color: var(--muted);
}

/* Tablette */
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; }
  .tile--wide { grid-column: span 4; }
  .tile--half { grid-column: span 2; }
  .tile--tall { grid-column: span 2; grid-row: span 3; }
  .tile--square { grid-column: span 2; }
}

/* Téléphone : une colonne, hauteur libre, formats portés par l'image */
@media (max-width: 700px) {
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .tile,
  .tile--wide,
  .tile--half,
  .tile--tall,
  .tile--square {
    grid-column: span 1;
    grid-row: span 1;
  }
  .tile--wide .tile__media { aspect-ratio: 16 / 10; }
  .tile--half .tile__media { aspect-ratio: 16 / 10; }
  .tile--tall .tile__media { aspect-ratio: 4 / 5; }
  .tile--square .tile__media { aspect-ratio: 1 / 1; }
}

/* ---------- À propos ---------- */

.about {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(72px, 11vh, 128px);
}

.about__inner {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 900px) {
  .about__inner { grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr); }
  /* Sans portrait, le texte occupe une seule colonne de lecture. */
  .about__inner--seul { grid-template-columns: minmax(0, 1fr); }
}

.about__inner--seul { max-width: 760px; }
.about__inner--seul p {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.58;
  color: var(--muted);
}
.about__inner--seul .btn { margin-top: clamp(28px, 3.5vw, 40px); align-self: start; }

.about__portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-media);
  background: var(--surface-deep);
}

/* Cadre en attente de la photo : il garde sa place et ses proportions. */
.about__portrait--vide {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-media);
  background: var(--surface-deep);
}

.about__text { max-width: 58ch; }
.about__text p {
  margin: 18px 0 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.58;
  color: var(--muted);
}

.about__list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 15px;
}
.about__list li {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.about__list span { color: var(--muted); }

/* ---------- Contact ---------- */

.contact {
  padding: clamp(72px, 12vh, 140px) var(--gutter);
  border-top: 1px solid var(--line);
  text-align: center;
}

.contact__title {
  margin: 0;
  font-size: clamp(34px, 6vw, 76px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.contact__links {
  list-style: none;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 15px;
  color: var(--muted);
}
.contact__links a {
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.contact__links a:hover { color: var(--fg); }

/* ---------- Page projet ---------- */

.p-hero {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(56px, 11vh, 112px) var(--gutter) clamp(28px, 4vw, 48px);
  text-align: center;
}

.p-hero__title {
  margin: 0;
  font-size: clamp(38px, 6.5vw, 82px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.p-hero__meta {
  margin: clamp(14px, 2vw, 20px) auto 0;
  max-width: 44ch;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--muted);
}

/* En-tête de page projet : le titre, puis le contexte en clair.
   Le visiteur doit savoir en quelques secondes ce qu'il regarde,
   pour qui, dans quel cadre, et pourquoi. */
.p-intro {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 80px) var(--gutter) clamp(16px, 2.5vh, 32px);
}

.p-intro__titre {
  margin: 0 0 clamp(26px, 4vw, 44px);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.p-intro__sous {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.p-fiche {
  margin: 0;
  display: grid;
  gap: 11px;
  font-size: clamp(15px, 1.2vw, 17px);
}

.p-fiche > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

@media (min-width: 620px) {
  .p-fiche > div { grid-template-columns: 150px 1fr; gap: 20px; }
}

.p-fiche dt { color: var(--muted); }
.p-fiche dd { margin: 0; }

/* Le média suit de près : pas besoin de deux respirations. */
.p-intro + .p-stage { padding-top: clamp(24px, 4vh, 44px); }

/* Média principal : format 16/9, coins arrondis, image ou vidéo intégrée */
.p-stage {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(32px, 6vh, 64px) var(--gutter) 0;
}

.p-stage__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
}
/* Une vidéo carrée ne doit pas occuper toute la largeur, sinon elle
   devient aussi haute que l'écran. */
.p-stage__media--carre {
  aspect-ratio: 1 / 1;
  max-width: 720px;
  margin: 0 auto;
}

.p-stage__media img,
.p-stage__media iframe,
.p-stage__media video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}


/* Les plans du film, en grille bento. Mêmes règles que la grille d'accueil :
   trois tailles de case, empilage dense, aucune case vide. */
.p-shots {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 7vh, 88px) var(--gutter) clamp(72px, 11vh, 128px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 172px;
  grid-auto-flow: dense;
  gap: clamp(12px, 1.4vw, 20px);
}

.shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
  grid-column: span 2;
  grid-row: span 2;
}
.shot--wide { grid-column: span 4; grid-row: span 2; }
.shot--tall { grid-column: span 2; grid-row: span 3; }
.shot--square { grid-column: span 2; grid-row: span 2; }
.shot--half { grid-column: span 3; grid-row: span 2; }


.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Une page de document se montre entière : on ne rogne pas une mise en
   page. L'image flotte sur le fond de la case. */
.shot--doc img {
  object-fit: contain;
  padding: clamp(10px, 1.4vw, 20px);
}

@media (max-width: 1000px) {
  .p-shots { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; }
  .shot--wide { grid-column: span 4; }
  .shot--half { grid-column: span 2; }
}

/* Téléphone : une colonne, chaque plan garde son format d'origine. */
@media (max-width: 700px) {
  .p-shots { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .shot,
  .shot--wide,
  .shot--half,
  .shot--tall,
  .shot--square { grid-column: span 1; grid-row: span 1; }
  .shot--half img { aspect-ratio: 16 / 10; }
  .shot--wide img { aspect-ratio: 16 / 9; }
  .shot--tall img { aspect-ratio: 2 / 3; }
  .shot--square img { aspect-ratio: 1 / 1; }
}

/* Colonne de lecture */
.p-prose {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 104px) var(--gutter);
}

.p-prose__lead {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.022em;
  color: var(--fg);
}

.p-prose p + p {
  margin: 22px 0 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--muted);
}

/* Galerie */
.p-gallery {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
}

.p-gallery__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.4vw, 20px);
}

@media (min-width: 760px) {
  .p-gallery__pair { grid-template-columns: 1fr 1fr; }
}

.p-figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
}
.p-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-figure--full img { aspect-ratio: 16 / 9; }

/* Fiche */
.p-specs {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 9vh, 104px) var(--gutter) 0;
}

.p-specs__inner {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 56px);
}
.p-specs__inner .about__list { max-width: 720px; }

/* Projet suivant */
.p-next {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 9vh, 104px) var(--gutter) clamp(72px, 11vh, 128px);
}

.p-next__link {
  display: block;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
  text-decoration: none;
}

.p-next__media {
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.p-next__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}
.p-next__link:hover .p-next__media img,
.p-next__link:focus-visible .p-next__media img {
  transform: scale(1.03);
  filter: grayscale(0);
}

@media (hover: none) {
  .p-next__media img { filter: grayscale(0); }
}

.p-next__meta { padding: 18px clamp(18px, 2.4vw, 30px) 24px; }

.p-next__label {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--muted);
}

.p-next__title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* ---------- Pied de page ---------- */

.foot {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: clamp(48px, 7vh, 88px) var(--gutter) 28px;
  min-height: clamp(520px, 46vw, 680px);
  display: flex;
  flex-direction: column;
}

/* L'Acropole tramée, en fond de pied de page.
   L'image est en niveaux de gris, sans transparence : c'est le mode de
   fusion qui fait disparaître le blanc en thème clair, et le noir en
   thème sombre une fois l'image inversée. Le fichier reste deux fois
   plus léger qu'avec un canal alpha, incompressible sur du tramage. */
.foot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/temple.webp") center bottom / cover no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

[data-theme="dark"] .foot::after {
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* Voile de lisibilité : le haut du pied de page revient vers la couleur
   de fond pour que les liens restent lisibles par-dessus l'image. */
.foot::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Fondu bas : le pseudonyme doit rester lisible sur la ville. */
    linear-gradient(to top,
      var(--bg) 0,
      color-mix(in srgb, var(--bg) 55%, transparent) 72px,
      transparent 150px),
    /* Fondu haut : les liens passent par-dessus le ciel. */
    linear-gradient(to bottom,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 78%, transparent) 46%,
      transparent 76%);
  pointer-events: none;
  z-index: 1;
}

.foot__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
}

@media (min-width: 760px) {
  .foot__inner { grid-template-columns: 1.3fr 1fr 1fr; }
}

.foot__logo {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
}
.foot__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.45s var(--ease);
}

.foot__name {
  margin: 14px 0 20px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.foot__title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.foot__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 15px;
  color: var(--muted);
}
.foot__list a {
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.foot__list a:hover { color: var(--fg); }

.foot__sign {
  position: relative;
  z-index: 2;
  margin: auto 0 0;
  padding-top: clamp(40px, 6vh, 72px);
  font-size: 14px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .foot__logo img { transition: none; }
}

/* ---------- Apparitions ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  .hero__title,
  .hero__lede,
  .hero .btn {
    animation: rise 0.9s var(--ease) both;
  }
  .hero__lede { animation-delay: 0.07s; }
  .hero .btn { animation-delay: 0.14s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}