/* ═══════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ POLICES DE SECOURS CALIBRÉES ════════════════════════════════
   Le temps qu'Archivo et Inter arrivent, le texte s'affiche dans la
   police système — qui n'occupe pas la même place. Au moment du
   remplacement, tout se décalait : les grands titres « sautaient »,
   très visible sur téléphone où ils font 23vw.
   Les trois valeurs ci-dessous sont mesurées sur les vraies polices
   (largeur moyenne des minuscules, ascendante, descendante) : le
   secours occupe alors la même place au pixel près, et le passage à la
   vraie police ne déplace plus rien.
   ══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Archivo secours";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust: 106.26%;
  ascent-override: 82.63%;
  descent-override: 19.76%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter secours";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust: 109.56%;
  ascent-override: 88.42%;
  descent-override: 22.02%;
  line-gap-override: 0%;
}
/* .condense resserre Archivo via son axe de largeur variable (wdth 78),
   ce qu'aucune police statique ne sait faire : le secours normal était
   18 % trop large et la phrase d'accroche passait sur plus de lignes,
   puis se réorganisait à l'arrivée d'Archivo — 66 px de saut mesurés.
   Mesuré sur les CAPITALES, .condense étant en majuscules. */
@font-face {
  font-family: "Archivo secours condense";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust: 84.93%;
  ascent-override: 103.38%;
  descent-override: 24.73%;
  line-gap-override: 0%;
}
/* Georgia est 20 % plus large qu'Instrument Serif : l'accent italique
   « la création » changeait de largeur à l'arrivée de la vraie police et
   décalait les retours à la ligne de toute la phrase d'accroche — le
   saut le plus visible sur téléphone, où elle tient sur 4 ou 5 lignes. */
@font-face {
  font-family: "Instrument secours";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 82.82%;
  ascent-override: 119.54%;
  descent-override: 37.43%;
  line-gap-override: 0%;
}

: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", "Archivo secours", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:   "Instrument Serif", "Instrument secours", Georgia, "Times New Roman", serif;
  --texte:   "Inter", "Inter secours", -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: 850ms;   /* apparition au défilement */
  /* expo-out : départ vif, longue pose — c'est la pose qui fait « pro »,
     l'ancienne courbe quasi linéaire donnait un mouvement uniforme */
  --c-reveal: cubic-bezier(.16, 1, .3, 1);
  --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, ::-moz-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: "Archivo", "Archivo secours condense", Helvetica, Arial, sans-serif;
  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%);
}
/* « Lila Narinx » ramène à l'accueil. Trois corrections de lisibilité
   d'usage : la cible atteint 44 px de haut (elle en faisait 27), la
   flèche pointe VERS le nom, et le survol dessine une pilule — la même
   forme que le bouton Contact, au lieu d'un cercle qui jurait avec. */
.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;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .35rem .85rem .35rem .7rem;
  margin-left: -.7rem;          /* le nom reste aligné sur la marge */
  border-radius: 999px;
  transition: background var(--t-base) var(--c-doux), color var(--t-vif) var(--c-doux);
}
.nav__marque:hover, .nav__marque:focus-visible {
  background: rgb(238 236 131 / .14); color: var(--jaune);
}
/* indique que « Lila Narinx » ramène à l'accueil — sans ça, rien ne le
   distinguait d'un simple titre sur les pages de rubrique */
/* nu, sans cercle : un indice, pas un bouton concurrent du nom */
.nav__fleche {
  color: var(--jaune); font-size: .95em; line-height: 1;
  transition: transform var(--t-base) var(--c-sortie);
}
/* au survol elle avance vers le nom : le geste dit « va là » */
.nav__marque:hover .nav__fleche, .nav__marque:focus-visible .nav__fleche {
  transform: translateX(3px);
}
.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nav__liens { display: flex; gap: 1.4rem; }
.nav__liens a {
  position: relative;
  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;
  transition: color .2s;
}
.nav__liens a:hover { color: var(--blanc); }
.nav__liens a[aria-current="page"] { color: var(--jaune); }
/* Le trait de la rubrique courante. Il porte un nom de transition, donc
   au changement de page le navigateur interpole sa position et sa
   largeur entre l'ancienne et la nouvelle : il GLISSE jusqu'à la
   nouvelle rubrique au lieu de disparaître ici et réapparaître là.
   Un seul lien porte aria-current par page, le nom reste donc unique. */
.nav__trait {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--jaune);
  opacity: 0;
}
.nav__liens a[aria-current="page"] .nav__trait {
  opacity: 1;
  view-transition-name: nav-trait;
}
::view-transition-group(nav-trait) { animation-duration: 420ms; }
::view-transition-old(nav-trait), ::view-transition-new(nav-trait) {
  /* seul le déplacement du groupe compte : sans ça le trait se
     fond en plus de glisser, et le fondu se voit sur 1 px de haut */
  animation: none; mix-blend-mode: normal; height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(nav-trait) { animation: none; }
}
.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) / .5);
  }
  .nav__liens a:last-child { border-bottom: 0; }
  /* la règle desktop (:hover → blanc) s'appliquait aussi ici : sur fond
     jaune, du blanc à 60 % d'opacité devenait illisible au tap mobile
     (le survol reste « collé » tant qu'on ne touche pas ailleurs) */
  .nav__liens a:hover { color: var(--vert); opacity: .6; }
  /* le menu mobile a son propre repère (pastille + filet épais) :
     le trait glissant n'a rien à y faire, et du jaune sur le panneau
     jaune serait de toute façon invisible */
  .nav__trait { display: none; }
  .nav__liens a[aria-current="page"] {
    color: var(--vert);
    border-bottom: 3px solid var(--vert);
    padding-left: .9rem;
  }
  .nav__liens a[aria-current="page"]::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: .42rem; height: .42rem; margin-top: -.21rem;
    background: var(--vert); border-radius: 50%;
  }
  .nav__liens a { position: relative; transition: padding-left var(--t-vif) var(--c-doux); }
}
/* 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: none;
}
.presentation__texte {
  font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.6;
  color: var(--blanc-70); max-width: 80ch; 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 {
  display: block; text-decoration: none;
  background: var(--jaune);          /* le bandeau sous l'image */
}
.tuile__visuel {
  display: block; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--vert-jour);
}
.tuile img, .tuile__video {
  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,
.tuile:hover .tuile__video, .tuile:focus-visible .tuile__video { transform: scale(1.06); }

/* Le titre n'est plus posé SUR la photo : il descend sur un bandeau
   jaune, en vert. Lisible partout (6,08:1), quel que soit le visuel —
   un vert posé sur l'image serait invisible. */
.tuile__corps {
  display: flex; align-items: baseline; justify-content: space-between; gap: .4rem;
  padding: .7rem .85rem .8rem;
}
.tuile__fleche {
  font-size: 1rem; color: var(--vert); opacity: .55; flex-shrink: 0;
  transition: opacity var(--t-vif) var(--c-sortie), transform var(--t-vif) var(--c-sortie);
}
.tuile:hover .tuile__fleche, .tuile:focus-visible .tuile__fleche {
  opacity: 1; transform: translate(2px, -2px);
}
.tuile__titre {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 105;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  letter-spacing: -.035em; line-height: .98;
  color: var(--vert); text-wrap: balance;
  display: block;
}

/* ═══ 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); }
.contact__mise {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: center; gap: clamp(2.5rem, 6vw, 6rem);
}
@media (max-width: 860px) {
  .contact__mise { grid-template-columns: 1fr; }
  .contact__portrait { order: -1; max-width: 16rem; margin-inline: auto; }
}
/* Portrait avec une lueur qui dérive lentement derrière — toujours les
   trois couleurs du site (jaune sur vert), jamais une quatrième teinte.
   Le halo doit DÉBORDER du cadre : overflow-hidden ne peut donc pas être
   sur le même élément que la lueur, sinon elle se coupe pile à son bord
   et ne sert plus à rien (premier essai — invisible, piégée dessous). */
.contact__portrait { position: relative; aspect-ratio: 537 / 730; }
.contact__cadre {
  position: relative; z-index: 1; display: block;
  width: 100%; height: 100%; overflow: hidden;   /* coins droits */
}
.contact__cadre img { width: 100%; height: 100%; object-fit: cover; }
.contact__lueur {
  position: absolute; inset: -35%; z-index: 0;
  background:
    radial-gradient(closest-side, rgb(238 236 131 / .6), transparent 70%) 18% 22% / 65% 65% no-repeat,
    radial-gradient(closest-side, rgb(246 243 234 / .3), transparent 70%) 82% 72% / 55% 55% no-repeat;
  filter: blur(40px);
  /* « alternate » inversait la courbe au demi-tour : la dérive marquait
     un temps d'arrêt puis repartait en sens inverse, ça se voyait.
     Un cycle complet qui revient à son point de départ tourne en continu,
     sans rupture. */
  animation: lueur-derive 26s linear infinite;
  will-change: transform;
}
@keyframes lueur-derive {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(4%, -4%) rotate(3deg); }
  50%  { transform: translate(1%, -7%) rotate(6deg); }
  75%  { transform: translate(-3%, -3%) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .contact__lueur { animation: none; } }
/* Sur ordinateur, « Accueil » et « Contact » font doublon : la marque en
   haut à gauche ramène déjà à l'accueil, et le bouton Contact est à droite.
   Ces deux entrées ne servent que dans le menu burger. */
@media (min-width: 1181px) { .nav__lien-contact, .nav__lien-accueil { display: none; } }
/* Fiche contact : une seule colonne, tout sous le nom. Pas de filets —
   l'espacement et la taille suffisent à séparer. */
.fiche { padding: 0; }
.fiche__nom {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 110;
  font-size: clamp(2.4rem, 7vw, 5.5rem); letter-spacing: -.045em; line-height: .92;
  color: var(--jaune); margin: .6rem 0 .4rem;
}
.fiche__role {
  color: var(--blanc-70); margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}
.fiche__liens {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  display: flex; flex-direction: column;
  gap: clamp(.5rem, 1.2vw, .9rem);
  max-width: 44rem;
}
/* chaque contact est une grande cible cliquable : l'action est annoncée
   (« Appeler », « Écrire un mail ») au-dessus de la valeur */
.lien-contact {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "quoi fleche" "valeur fleche";
  align-items: center;
  gap: .15rem 1.5rem;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.5rem);
  text-decoration: none; color: var(--blanc);
  background: rgba(246, 243, 234, .05);
  border-radius: 6px;
  transition: background var(--t-base) var(--c-doux), color var(--t-vif) var(--c-doux);
}
.lien-contact:hover, .lien-contact:focus-visible {
  background: var(--jaune); color: var(--vert);
}
.lien-contact__quoi {
  grid-area: quoi;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blanc-70);
  transition: color var(--t-vif) var(--c-doux);
}
.lien-contact:hover .lien-contact__quoi,
.lien-contact:focus-visible .lien-contact__quoi { color: rgb(var(--vert-rvb) / .75); }
.lien-contact__valeur {
  grid-area: valeur;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem); letter-spacing: -.025em;
  word-break: break-word;
}
.lien-contact__fleche {
  grid-area: fleche;
  font-size: clamp(1.1rem, 2vw, 1.5rem); opacity: .5;
  transition: opacity var(--t-vif) var(--c-doux), transform var(--t-base) var(--c-sortie);
}
.lien-contact:hover .lien-contact__fleche,
.lien-contact:focus-visible .lien-contact__fleche {
  opacity: 1; transform: translate(3px, -3px);
}

.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);
}
/* icône seule : le nom et les coordonnées en toutes lettres sont déjà
   dans la nav (en haut) et sur la page Contact — inutile de les répéter */
.pied__retour {
  display: grid; place-items: center;
  width: 40px; aspect-ratio: 1; border-radius: 50%;
  color: var(--jaune); border: 1px solid rgb(238 236 131 / .4);
  transition: background var(--t-vif) var(--c-doux), color var(--t-vif) var(--c-doux),
              border-color var(--t-vif) var(--c-doux);
}
.pied__retour:hover {
  background: var(--jaune); color: var(--vert); border-color: var(--jaune);
}
/* même pilule que le bouton Contact de la nav : une seule forme pour
   la même action, qu'on la croise en haut ou en bas de page */
.pied__contact {
  font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vert); background: var(--jaune); text-decoration: none;
  padding: .6rem 1.1rem; border-radius: 999px; white-space: nowrap;
  transition: transform .2s, background .2s;
}
.pied__contact:hover { transform: translateY(-2px); }
.pied__contact[aria-current="page"] { background: var(--blanc); }

/* ═══ 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%. */
  /* plancher à 9vw : sur tablette, « Intelligence artificielle » tombait à
     45 px quand « Photo » faisait 207 px — un titre long passe sur 2 lignes
     plutôt que de rapetisser. */
  font-size: clamp(max(2.8rem, 9vw), 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__liens { margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.prod__liens a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--jaune); text-decoration: none;
  border-bottom: 1px solid rgb(238 236 131 / .45);
  padding-bottom: .12rem;
  transition: color var(--t-vif) var(--c-doux), border-color var(--t-vif) var(--c-doux);
}
.prod__liens a:hover { color: var(--blanc); border-bottom-color: var(--blanc); }
.prod__liens svg { transition: transform var(--t-base) var(--c-sortie); }
.prod__liens a:hover svg { transform: translate(2px, -2px); }
.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); }
/* Grille régulière : même format pour toutes, rangées alignées.
   « > .vignette » et pas « > * » : à spécificité égale, la règle
   .vignette (plus bas dans le fichier) l'emportait et gardait le
   format d'origine de chaque image. */
.collage--grille > .vignette { grid-column: span 2; aspect-ratio: 4 / 5; }
.collage--grille .vignette img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) {
  .collage--grille > .vignette { grid-column: span 1; }
}
@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); }
.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; }
/* En plein écran, le « cover » recadrait les reels verticaux au format de
   l'écran : on montre la vidéo entière, dans son format d'origine. */
.clip video:fullscreen, .clip video:-webkit-full-screen,
.clip:fullscreen video, .clip:-webkit-full-screen video {
  object-fit: contain; background: #000; cursor: default;
}

/* ─── 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);
}
/* flèches SVG dans le HTML (même tracé que partout) : les ← → en
   content: CSS rendaient avec la police, pas avec le trait commun */
.voisins strong svg { flex-shrink: 0; }
.voisins strong { display: inline-flex; align-items: center; gap: .45rem; }
.voisins a:hover strong { color: var(--jaune); }

/* ═══ LIGHTBOX ════════════════════════════════════════════════════
   Un seul calque : l'image est centrée dans tout l'écran, et les commandes
   (fermer, flèches, légende) flottent par-dessus, discrètes. Pas de barre,
   pas de rangées : rien ne vient rogner la place de l'image. */
.boite {
  position: fixed; inset: 0; z-index: 300;
  /* Voile vert + flou : la page derrière est devinée, jamais lisible.
     À .86 le flou ne se voyait pas (14 % du fond seulement) : .76 le
     laisse lire comme un flou, blur(30px) interdit toute lecture. */
  background: rgb(var(--vert-rvb) / .76);
  /* un seul enfant (.boite__scene) : on l'étire pour qu'il remplisse tout
     l'écran (comportement grid par défaut) — c'est LUI qui centre l'image
     avec son propre place-items. Un « place-items:center » posé ICI
     empêcherait .boite__scene de s'étirer (percent height de 100% non
     résoluble), et l'image débordait en bas de l'écran. */
  display: grid;
  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;
  /* posé seulement à l'ouverture : un backdrop-filter permanent fait
     recomposer le fond à chaque défilement, même visionneuse fermée */
  -webkit-backdrop-filter: blur(30px) saturate(.75);
  backdrop-filter: blur(30px) saturate(.75);
}
/* [hidden] doit l'emporter sur display:grid des commandes */
.boite__fermer[hidden], .boite__fleche[hidden] { display: none; }

/* la scène occupe tout l'écran ; l'image y est centrée */
.boite__scene {
  grid-area: 1 / 1; width: 100%; height: 100%;
  display: grid; place-items: center; overflow: hidden;
  padding: clamp(3.5rem, 8vh, 5rem) clamp(1rem, 7vw, 6rem);
  cursor: zoom-out;
}
/* ratio d'origine préservé (width/height auto), contenue dans l'écran.
   max-height EN VH PUR, pas en % : .boite__scene a place-items:center,
   donc son enfant ne « stretch » pas — la hauteur de la piste grid reste
   « auto » (dépend du contenu), ce qui rend tout % de hauteur indéterminé
   (boucle de résolution). Un vh ne dépend pas de la grille : pas de boucle. */
/* vidéo en grand (téléphone) : toute la hauteur utile, largeur selon le
   format d'origine ; un reel 9/16 remplit l'écran, un 16/9 est letterboxé */
.boite__scene video {
  max-width: 100%;
  max-height: calc(100vh - clamp(7rem, 16vh, 10rem));
  width: auto; height: auto;
  border-radius: 4px;
  /* pas de hauteur forcée ni de fond : la boîte épouse la vidéo, sinon un
     reel 9/16 flottait dans un rectangle noir plus haut que lui */
}
.boite__scene img {
  max-width: 100%;
  max-height: calc(100vh - clamp(7rem, 16vh, 10rem));
  width: auto; height: auto;
  border-radius: 4px;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .55);
  cursor: zoom-out;
  animation: entree var(--t-base) var(--c-sortie) both;
}
@keyframes entree { from { opacity: 0; transform: scale(.97); } }

/* commandes flottantes */
.boite__barre { position: absolute; top: clamp(.8rem, 2vw, 1.4rem); right: clamp(.8rem, 2vw, 1.4rem); }
.boite__fermer, .boite__fleche {
  border: 0; cursor: pointer; color: var(--blanc);
  background: rgb(246 243 234 / .1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; width: 44px; aspect-ratio: 1; border-radius: 50%;
  transition: background .2s, color .2s, transform .2s;
}
.boite__fermer:hover, .boite__fleche:hover,
.boite__fermer:focus-visible, .boite__fleche:focus-visible { background: var(--jaune); color: var(--vert); transform: scale(1.06); }
.boite__fleche { position: absolute; top: 50%; transform: translateY(-50%); }
.boite__fleche:hover, .boite__fleche:focus-visible { transform: translateY(-50%) scale(1.06); }
.boite__fleche--prec { left: clamp(.6rem, 2vw, 1.4rem); }
.boite__fleche--suiv { right: clamp(.6rem, 2vw, 1.4rem); }

/* légende : petite, centrée en bas, ne gêne pas l'image */
.boite__legende {
  position: absolute; left: 0; right: 0; bottom: clamp(.9rem, 2.5vh, 1.6rem);
  margin: 0; padding: 0 var(--marge); text-align: center;
  font-size: .78rem; letter-spacing: .02em; color: var(--blanc-70);
  pointer-events: none;
}
.boite__legende:empty { display: none; }

@media (max-width: 600px) {
  /* les flèches restent visibles au doigt : le glissement seul n'était
     pas découvrable, rien n'indiquait qu'on pouvait changer d'image.
     Posées en bas, à portée du pouce, plutôt qu'au milieu des bords. */
  .boite__scene { padding: 3.5rem .75rem 4.5rem; }
  .boite__fleche {
    top: auto; bottom: .9rem; transform: none;
    width: 52px;                       /* cible confortable au doigt */
    background: rgb(var(--vert-rvb) / .8);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .boite__fleche:hover, .boite__fleche:focus-visible { transform: none; }
  .boite__fleche--prec { left: 1rem; }
  .boite__fleche--suiv { right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .boite__scene img { animation: none; } }
body.bloque { overflow: hidden; }

/* ═══ APPARITION ══════════════════════════════════════════════════
   Trois registres, un par rôle :
   · .monte        — bloc de texte : fondu + légère montée
   · .monte--titre — titre géant : chaque mot se lève sous son masque
   · .cascade      — grille : les enfants entrent l'un après l'autre
   Les délais (--d) sont posés par build.py (mots) ou site.js (cascades).
   ══════════════════════════════════════════════════════════════════ */
.monte { opacity: 0; transform: translateY(24px); }
.monte.vu {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--c-reveal), transform var(--t-reveal) var(--c-reveal);
}
/* suit le dernier mot de « Lila Narinx » plutôt que d'entrer avec lui.
   Posé sur .monte (pas .monte.vu) : site.js lit ce délai AVANT d'ajouter
   .vu pour décider s'il doit poser le sien. Placé APRÈS .monte.vu : à
   spécificité égale le raccourci « transition » ci-dessus remet le
   délai à 0 et, en cascade, c'est la règle la plus tardive qui gagne. */
.hero__bas.monte { transition-delay: .25s; }

/* Titres : le conteneur reste en place, ce sont les mots qui montent.
   Chaque .mot est une fenêtre (overflow hidden) ; le texte part sous
   la ligne et remonte à sa place. */
.monte--titre .mot { display: inline-block; overflow: hidden; vertical-align: bottom; }
.monte--titre .mot__texte { display: inline-block; transform: translateY(112%); }
.monte--titre.vu .mot__texte {
  transform: none;
  transition: transform var(--t-reveal) var(--c-reveal);
  transition-delay: var(--d, 0s);
}
@media (max-width: 700px) { .hero__nom .mot { display: block; } }

/* Grilles : l'état caché vit sur les ENFANTS, le .vu sur le conteneur —
   l'ordre d'entrée est celui de la grille, pas celui de l'observateur */
.cascade > * { opacity: 0; transform: translateY(26px) scale(1.015); }
.cascade.vu > * {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--c-reveal), transform var(--t-reveal) var(--c-reveal);
  transition-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .monte, .cascade > *, .monte--titre .mot__texte { opacity: 1; transform: none; }
  .monte.vu, .cascade.vu > *, .monte--titre.vu .mot__texte { transition: none; }
}

/* ═══ FONDU ENTRE PAGES (View Transitions, amélioration progressive) ═ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 180ms; }
::view-transition-new(root) { animation-duration: 260ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: 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, .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;
  }
}