/* ═══════════════════════════════════════════════════════════════════
   Lila Narinx — portfolio · v2
   Règle de base : fond vert, textes blancs ou jaunes. Rien d'autre.
   Grandes typos qui chevauchent les photos, images pleine largeur,
   petites étiquettes [ entre crochets ] dans les coins.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --vert:        #5b5617;   /* RVB 91 86 23 */                 /* le fond, partout */
  --vert-nuit:   #403d10;                 /* nav, pied, voiles */
  --vert-jour:   #6e6a22;                 /* surfaces légèrement relevées */
  --jaune:       #eeec83;   /* RVB 238 236 131 */
  --blanc:       #f6f3ea;
  --blanc-70:    rgba(246, 243, 234, .72);
  --blanc-45:    rgba(246, 243, 234, .45);
  --trait:       rgba(246, 243, 234, .40);   /* .22 = 1,5:1, invisible */

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --texte:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Barème de mouvement — on s'y tient partout */
  --t-vif:    160ms;   /* retour immédiat : couleur, opacité d'un badge */
  --t-base:   260ms;   /* états d'interface : barre, boutons, visionneuse */
  --t-ample:  420ms;   /* déplacements : panneaux, zooms d'image */
  --t-reveal: 560ms;   /* apparition au défilement */
  --c-reveal: cubic-bezier(.25, .46, .45, .94);
  --c-sortie: cubic-bezier(.2, .7, .3, 1);
  --c-doux:   cubic-bezier(.4, 0, .2, 1);

  --marge:     clamp(1.1rem, 4vw, 4rem);
  --max:       1760px;
  --haut-page: calc(var(--marge) + 5.5rem);   /* dégagement sous la barre */
  --bloc:      clamp(4rem, 10vw, 9rem);
  --bloc-2:    max(3rem,   var(--bloc) * .6);
  --bloc-3:    max(2rem,   var(--bloc) * .45);
  --bloc-4:    max(1.4rem, var(--bloc) * .28);
}

/* ─── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--vert);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: clamp(.98rem, .4vw + .86rem, 1.08rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--jaune); color: var(--vert); }
:focus-visible { outline: 2px solid var(--jaune); outline-offset: 3px; }

.saut-contenu {
  position: absolute; left: -9999px; z-index: 200;
  background: var(--jaune); color: var(--vert);
  padding: .8rem 1.2rem; font-weight: 600;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* ─── Outils typo ────────────────────────────────────────────────── */
.titre-geant {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  letter-spacing: -.045em;
  line-height: .84;
  margin: 0;
  text-wrap: balance;
}
.condense {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 78;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.08;        /* .92 faisait toucher les É à la ligne du dessus */
  margin: 0;
  text-wrap: balance;
}
.condense em, .accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--jaune);
  letter-spacing: 0;
  font-size: 1.30em;        /* l'italique pesait ~55% de la ligne en capitales */
  line-height: .78;
}

/* étiquette en petites capitales */
.etq {
  font-family: var(--texte);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blanc-70);
  margin: 0;
  white-space: nowrap;
}
.etq--jaune { color: var(--jaune); }

.bloc { padding: var(--bloc) var(--marge); }
.dedans { width: 100%; max-width: var(--max); margin-inline: auto; }

/* ═══ NAVIGATION ═══════════════════════════════════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .9rem var(--marge);           /* hauteur fixe : plus de layout animé */
  transition: background var(--t-base) var(--c-doux),
              -webkit-backdrop-filter var(--t-base) var(--c-doux),
              backdrop-filter var(--t-base) var(--c-doux);
}
.nav--pose {
  background: rgb(var(--vert-rvb) / .86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.nav__marque {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 112;
  letter-spacing: -.035em; font-size: 1.05rem;
  color: var(--blanc); text-decoration: none; white-space: nowrap;
}
.nav__liens { display: flex; gap: 1.4rem; }
.nav__liens a {
  font-size: .7rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blanc-70);
  text-decoration: none; white-space: nowrap;
  padding: .3rem 0; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav__liens a:hover { color: var(--blanc); }
.nav__liens a[aria-current="page"] { color: var(--jaune); border-bottom-color: var(--jaune); }
.nav__contact {
  font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vert); background: var(--jaune); text-decoration: none;
  padding: .55rem .95rem; border-radius: 999px; white-space: nowrap;
  transition: transform .2s;
}
.nav__contact:hover { transform: translateY(-2px); }

.nav__bascule {
  display: none; width: 42px; height: 34px; padding: 0;
  border: 0; background: transparent; cursor: pointer; position: relative;
}
.nav__bascule span {
  position: absolute; left: 9px; right: 9px; height: 2px;
  background: var(--jaune); transition: transform .3s ease;
}
.nav__bascule span:nth-child(1) { top: 13px; }
.nav__bascule span:nth-child(2) { top: 20px; }
.nav__bascule[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__bascule[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1180px) {
  /* PAS de backdrop-filter ici : il crée un bloc conteneur, et le panneau
     en position:fixed se calerait sur la barre (144 px) au lieu de l'écran.
     Le menu étant opaque, le flou n'apporte plus rien en mobile. */
  .nav, .nav--pose {
    background: rgb(var(--vert-rvb) / .96);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* menu ouvert : la barre s'efface, le panneau jaune passe dessous */
  .nav--ouverte, .nav--ouverte.nav--pose { background: transparent; }
  .nav--ouverte .nav__marque { color: var(--vert); }
  .nav--ouverte .nav__bascule span { background: var(--vert); }
  .nav__bascule { display: block; order: 3; }
  .nav__contact { display: none; }

  /* marque et bouton restent au-dessus du panneau */
  .nav__marque, .nav__bascule { position: relative; z-index: 2; }

  /* Menu PLEIN ÉCRAN, fond opaque. Le backdrop-filter reste interdit sur
     .nav : il créerait un bloc conteneur et le panneau fixed se calerait
     sur la barre au lieu de l'écran. */
  .nav__liens {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: center;
    gap: 0;
    padding: 6rem var(--marge) 3rem;
    /* inversé : fond jaune, texte olive */
    background: var(--jaune);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity var(--t-base) var(--c-doux),
                transform var(--t-base) var(--c-sortie),
                visibility 0s var(--t-base);
  }
  .nav--ouverte .nav__liens {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--t-base) var(--c-doux),
                transform var(--t-base) var(--c-sortie),
                visibility 0s;
  }
  .nav__liens a {
    display: block;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(1.45rem, 6.4vw, 2.3rem);
    letter-spacing: -.03em; text-transform: none;
    color: var(--vert);
    padding: .75rem 0;
    border-bottom: 1px solid rgb(var(--vert-rvb) / .22);
  }
  .nav__liens a:last-child { border-bottom: 0; }
  .nav__liens a:hover { opacity: .6; }
  .nav__liens a[aria-current="page"] { color: var(--vert); border-bottom-width: 3px; border-bottom-color: var(--vert); }
}
/* en paysage, tout doit tenir */
@media (max-width: 1180px) and (max-height: 560px) {
  .nav__liens { padding-top: 4.5rem; justify-content: flex-start; }
  .nav__liens a { font-size: 1.15rem; padding: .4rem 0; }
}

/* ═══ HERO (accueil) : nom sur le vert, bande d'images dessous ═══ */
.hero {
  padding: var(--haut-page) var(--marge) clamp(1.5rem, 3vw, 3rem);
}
.hero__nom {
  font-size: clamp(2.8rem, 13.5vw, 270px);
  color: var(--jaune);
}
.hero__nom span { display: inline; }
@media (max-width: 700px) {
  .hero__nom { font-size: 23vw; }
  .hero__nom span { display: block; }
}
.hero__bas {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; flex-wrap: wrap;
  margin-top: clamp(.8rem, 1.6vw, 1.4rem);
}
.hero__role {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.95rem, 1.9vw, 1.7rem);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blanc); margin: 0; line-height: 1.3;
}

/* ═══ PRÉSENTATION ════════════════════════════════════════════════ */
.presentation__phrase {
  font-size: clamp(1.9rem, 3.9vw, 3.9rem);
  color: var(--blanc);
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
  max-width: 22ch;
}
.presentation__texte {
  font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.6;
  color: var(--blanc-70); max-width: 52ch; margin: 0;
}

/* ═══ INDEX DES RUBRIQUES (accueil) ═══════════════════════════════ */
.index__tete {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: clamp(1.2rem, 2vw, 1.8rem);
}
.index {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.5rem, 1vw, .9rem);
}
@media (max-width: 1100px) { .index { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .index { grid-template-columns: repeat(2, 1fr); } }

.tuile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; text-decoration: none;
  background: var(--vert-jour);
}
.tuile img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 25%;
  transition: transform var(--t-ample) var(--c-sortie);
}
.tuile:hover img, .tuile:focus-visible img { transform: scale(1.06); filter: saturate(1); }
.tuile::after {
  content: ""; position: absolute; inset: 0;
  /* ancré en rem, pas en % : le texte occupe au plus 4,47rem depuis le bas
     à TOUTES les largeurs — en %, il sortait du voile dès que la tuile
     rétrécissait (pire cas mesuré : 1,19:1 sur mobile). */
  background: linear-gradient(to top,
    rgb(var(--vert-rvb) / .97) 0,
    rgb(var(--vert-rvb) / .92) 4.8rem,
    rgb(var(--vert-rvb) / 0)   7rem);
}
.tuile__corps {
  position: absolute; left: .9rem; right: .9rem; bottom: .85rem; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
}
.tuile__titre {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 105;
  font-size: clamp(1.15rem, 1.8vw, 1.7rem);
  letter-spacing: -.035em; line-height: .96;
  color: var(--jaune); text-wrap: balance;
}
.tuile__compte {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blanc-70); white-space: nowrap; flex: none;
}

/* ═══ CONTACT : une fiche ═════════════════════════════════════════ */
.contact { border-top: 1px solid var(--trait); }
.contact--page { border-top: 0; min-height: 100svh; display: grid; align-content: center; padding-top: calc(var(--marge) + 5rem); }
@media (min-width: 1181px) { .nav__lien-contact { display: none; } }
.fiche {
  background: transparent;   /* les filets structurent déjà la fiche */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.6rem, 3.5vw, 3rem);
}
@media (max-width: 760px) { .fiche { grid-template-columns: 1fr; } }
.fiche__nom {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 110;
  font-size: clamp(2rem, 4.2vw, 3.6rem); letter-spacing: -.04em; line-height: .95;
  color: var(--jaune); margin: .7rem 0 .5rem;
}
.fiche__role { color: var(--blanc-70); margin: 0; }
.fiche__liste { margin: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; }
.fiche__liste div { padding: .9rem 0; border-top: 1px solid var(--trait); }
.fiche__liste dt { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blanc-70); margin-bottom: .2rem; }
.fiche__liste dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: -.015em; word-break: break-word; }
.fiche__liste a { text-decoration: none; color: var(--blanc); }
.fiche__liste a:hover { color: var(--jaune); }

.pied {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  width: min(100% - 2 * var(--marge), var(--max));
  margin-inline: auto;
  padding: var(--bloc-4) 0 var(--bloc-3);
  border-top: 1px solid var(--trait);
}
.pied__nom {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 110;
  font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: -.04em; line-height: 1;
  color: var(--jaune); margin: 0;
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none;
  transition: color var(--t-vif) var(--c-doux);
}
.pied__nom svg { transition: transform var(--t-base) var(--c-sortie); }
.pied__nom:hover { color: var(--blanc); }
.pied__nom:hover svg { transform: translateY(-3px); }
.pied__coord {
  margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 2.2rem;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: -.015em;
}
.pied__coord a { color: var(--blanc); text-decoration: none; transition: color .2s; }
.pied__coord a:hover { color: var(--jaune); }

/* ═══ PAGE DE RUBRIQUE : titre à gauche, photo en bloc à droite ═════ */
.rub__tete {
  padding-block: var(--haut-page) var(--bloc-2);
  padding-inline: max(var(--marge), (100% - var(--max)) / 2);
}
.rub__haut { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.rub__haut a { text-decoration: none; }
.rub__haut a:hover { color: var(--jaune); }
.rub__titre {
  color: var(--jaune);
  /* calé sur le nombre de signes (--n posé par build.py) : sinon « Vidéo »
     remplissait 27% de la ligne et « Réseaux sociaux » 82%. */
  font-size: clamp(2.8rem, calc(135vw / var(--n, 14)), 22rem);
}
.rub__sous { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* ─── Production : texte à gauche (collant), images à droite ───── */
.prod {
  display: grid;
  /* 5fr/12fr tombait à 28 caractères par ligne entre 960 et 1180 px */
  grid-template-columns: minmax(0, clamp(24rem, 30vw, 32rem)) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: var(--bloc-2);
  padding-inline: max(var(--marge), (100% - var(--max)) / 2);
  border-top: 1px solid var(--trait);
}
.prod:first-of-type { border-top: 0; }
@media (max-width: 1180px) { .prod { grid-template-columns: 1fr; } }
.prod__texte { position: sticky; top: 5.2rem; align-self: start; }
@media (max-width: 1180px) { .prod__texte { position: static; } }
.prod__titre {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  letter-spacing: -.03em; line-height: 1.08;
  color: var(--blanc); margin: .4rem 0 1rem; text-wrap: balance;
}
.prod__para { color: var(--blanc-70); margin: 0 0 .9rem; max-width: 46ch; }
.prod__note {
  margin: 1.1rem 0 0; padding: .85rem 1rem; max-width: 46ch;
  font-size: .86rem; line-height: 1.5; color: var(--blanc);
  border-left: 2px solid var(--jaune); background: rgba(246,243,234,.05);
}
.prod__note strong { color: var(--jaune); font-weight: 600; }
.prod__ress { margin-top: 1.3rem; }
.prod__suite { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.prod__suite .prod__para { color: var(--blanc); font-weight: 500; }

/* ─── Galerie éditoriale : collage sur 6 colonnes ───────────────── */
.collage {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: dense; align-items: start;
  gap: clamp(.6rem, 1.2vw, 1.2rem);
}
.collage > * { grid-column: span var(--s, 2); }
@media (max-width: 720px) {
  .collage { grid-template-columns: repeat(2, 1fr); }
  .collage > * { grid-column: span 1; }
  .collage > .large { grid-column: span 2; }
}

.vignette {
  display: block; width: 100%; padding: 0; margin: 0; border: 0;
  background: var(--vert-jour); color: inherit; font: inherit;
  overflow: hidden; cursor: zoom-in; position: relative;
  aspect-ratio: var(--r, 3/4);
}
.vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-ample) var(--c-sortie); }
.vignette:hover img, .vignette:focus-visible img { transform: scale(1.04); }
.prod__medias { counter-reset: v; }
.vignette { counter-increment: v; }
.vignette::after {
  content: counter(v, decimal-leading-zero);
  position: absolute; left: .6rem; bottom: .55rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .1em;
  color: var(--vert); background: var(--jaune); padding: .15rem .4rem;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-base) var(--c-sortie), transform var(--t-base) var(--c-sortie);
}
.vignette:hover::after, .vignette:focus-visible::after { opacity: 1; transform: none; }
.vignette--contenir img { object-fit: contain; }
.vignette--contenir { background: rgba(246,243,234,.04); }

/* ─── Vidéos : autoplay muet en boucle, aucun bouton de lecture ──── */
.clip { position: relative; overflow: hidden; background: var(--vert-nuit); aspect-ratio: var(--r, 9/16); }
.clip video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.clip__son {
  position: absolute; right: .6rem; top: .6rem; z-index: 3;
  width: 34px; aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: rgb(var(--vert-rvb) / .6); color: var(--blanc);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity var(--t-base) var(--c-sortie), background var(--t-vif) var(--c-doux), color var(--t-vif) var(--c-doux);
}
/* zone utile portée à 44 px sans agrandir le rond */
.clip__son::before { content: ""; position: absolute; inset: -5px; }
.clip:hover .clip__son, .clip__son:focus-visible, .clip__son[aria-pressed="true"] { opacity: 1; }
.clip__son:hover, .clip__son[aria-pressed="true"] { background: var(--jaune); color: var(--vert); }
.clip__duree {
  position: absolute; left: .6rem; bottom: .6rem; z-index: 3;
  font-size: .64rem; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  color: var(--blanc); background: rgb(var(--vert-rvb) / .82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: .14rem .4rem; opacity: 0;
  transition: opacity var(--t-base) var(--c-sortie);
}
.clip__duree:not(:empty) { opacity: 1; }
/* lecture auto refusée ou mouvement réduit → contrôles natifs, pas de doublon */
.clip--manuel .clip__son, .clip--manuel .clip__duree { display: none; }
@media (hover: none) { .clip__son { opacity: 1; } }

/* ─── Précédent / suivant : de simples liens, sans cadre ────────── */
.voisins {
  display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding-block: var(--bloc-3);
  padding-inline: max(var(--marge), (100% - var(--max)) / 2);
}
.voisins a { text-decoration: none; display: flex; flex-direction: column; gap: .4rem; }
.voisins a:last-child { text-align: right; align-items: flex-end; margin-left: auto; }
.voisins strong {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 108;
  font-size: clamp(1.1rem, 2vw, 1.75rem); letter-spacing: -.04em; line-height: 1;
  color: var(--blanc); transition: color var(--t-vif) var(--c-doux);
}
.voisins a:first-child strong::before { content: "← "; }
.voisins a:last-child strong::after { content: " →"; }
.voisins a:hover strong { color: var(--jaune); }

/* ═══ LIGHTBOX ════════════════════════════════════════════════════ */
.boite {
  position: fixed; inset: 0; z-index: 300; background: rgb(var(--vert-rvb) / .97);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--c-doux), visibility 0s var(--t-base);
}
.boite.ouverte {
  opacity: 1; visibility: visible;
  transition: opacity var(--t-base) var(--c-doux), visibility 0s;
}
/* [hidden] doit l'emporter sur display:grid des commandes */
.boite__fermer[hidden], .boite__fleche[hidden] { display: none; }
/* l'image entre au lieu d'apparaître en coupure */
.boite__scene img { animation: entree var(--t-base) var(--c-sortie) both; }
@keyframes entree { from { opacity: 0; transform: scale(.985); } }
.boite__barre { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--marge); }
.boite__compte { font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; color: var(--jaune); margin: 0; }
.boite__scene { display: grid; place-items: center; min-height: 0; padding: 0 clamp(1rem, 6vw, 5rem); }
.boite__scene, .boite__scene img { cursor: zoom-out; }
.boite__scene img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.boite__legende { padding: 1rem var(--marge) 1.4rem; text-align: center; font-size: .78rem; color: var(--blanc-70); margin: 0; min-height: 1rem; }
.boite__fermer, .boite__fleche {
  border: 0; cursor: pointer; background: transparent; color: var(--blanc);
  display: grid; place-items: center; width: 46px; aspect-ratio: 1; border-radius: 50%; transition: background .2s, color .2s;
}
.boite__fermer:hover, .boite__fleche:hover { background: var(--jaune); color: var(--vert); }
.boite__fleche { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(246,243,234,.08); }
.boite__fleche--prec { left: clamp(.4rem, 2vw, 1.4rem); }
.boite__fleche--suiv { right: clamp(.4rem, 2vw, 1.4rem); }
@media (max-width: 600px) { .boite__fleche { display: none; } }
body.bloque { overflow: hidden; }

/* ═══ APPARITION ══════════════════════════════════════════════════ */
.monte { opacity: 0; transform: translateY(28px); }
.monte.vu {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--c-reveal), transform var(--t-reveal) var(--c-reveal);
}
@media (prefers-reduced-motion: reduce) { .monte { opacity: 1; transform: none; } .monte.vu { transition: none; } }

/* ═══ MOUVEMENT RÉDUIT : on neutralise TOUT le mouvement ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;   /* annule le décalage posé par site.js */
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* les changements d'état restent, les déplacements disparaissent */
  .tuile:hover img, .tuile:focus-visible img,
  .vignette:hover img, .vignette:focus-visible img { transform: none; }
  .nav__contact:hover { transform: none; }
}

@media print {
  .nav, .boite, .clip__son, .clip__duree, .voisins { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ═══ CIBLES TACTILES ═════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  .fiche__liste a, .pied__coord a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}