/* =========================================================================
   Félix, lutin du Père Noël
   Palette dérivée des photos de scène : velours rouge, crème, vermillon.
   Page verrouillée en thème sombre : le rideau de scène EST l'identité.
   Règle de rayons : boutons et pastilles = pilule ; images et cartes = 6px.
   ========================================================================= */

/* ---------- Fontes auto-hébergées ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons ---------- */
:root {
  --ink:        #140407;
  --velvet:     #2A0509;
  --velvet-2:   #3B080D;
  --velvet-3:   #5A1017;
  --pine:       #16382B;

  --cream:      #FBF2E8;
  --cream-dim:  #D9C5BD;
  --cream-mute: #A98D86;

  --accent:     #FF5247;
  --accent-2:   #FF7468;

  --line:       rgba(251, 242, 232, 0.14);
  --line-soft:  rgba(251, 242, 232, 0.08);

  --r-card:     6px;
  --r-pill:     999px;

  --wrap:       1280px;
  --pad:        clamp(1.25rem, 5vw, 3.5rem);

  --sect:       clamp(5rem, 11vw, 9.5rem);
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);

  --z-snow:     5;
  --z-nav:      50;

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--velvet);
  color: var(--cream);
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

::selection { background: var(--accent); color: var(--ink); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Moins d'air au-dessus des titres qu'en dessous : la section respire sans
   que le titre flotte à mi-hauteur. */
.section {
  padding-top: calc(var(--sect) * 0.62);
  padding-bottom: var(--sect);
  position: relative;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--cream); color: var(--velvet);
  padding: 0.75rem 1.25rem; border-radius: var(--r-pill);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Typographie ---------- */
.h2 {
  font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0 0 1.5rem;
  max-width: 18ch;
  text-wrap: balance;
}

.eyebrow {
  font-size: clamp(1.28rem, 2.03vw, 1.58rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
  color: var(--cream-dim);
  max-width: 58ch;
  margin: 0 0 3rem;
}

.note {
  color: var(--cream-mute);
  font-size: 0.95rem;
  max-width: 62ch;
  margin: 2.5rem 0 0;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.95rem 1.8rem;
  border-radius: var(--r-pill);
  font-family: "Archivo", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .12s ease;
}
.btn--sm { padding: 0.7rem 1.25rem; font-size: 0.9rem; }

/* Crème sur velours : contraste maximal, le rouge reste au nez et aux chiffres. */
.btn--primary { background: var(--cream); color: var(--velvet); }
.btn--primary:hover { background: #fff; }
.btn--primary:active { transform: scale(0.98); }

.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(251,242,232,0.32); }
.btn--ghost:hover { border-color: var(--cream); background: rgba(251,242,232,0.06); }
.btn--ghost:active { transform: scale(0.98); }

/* ---------- Navigation ---------- */
.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(20, 4, 7, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--pad);
  height: 72px;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.nav__brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; margin-right: auto;
}
.nav__nose {
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 82, 71, 0.16);
}
.nav__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em;
}

/* Le menu passe sur la grotesque d'affichage, comme le titre et la plaquette :
   plus de caractère que l'Archivo de labeur, et le même air de famille. */
.nav__links { display: flex; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav__links a {
  text-decoration: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--cream-dim);
  white-space: nowrap;
  padding-block: 0.4rem;
  border-bottom: 1.5px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav__links a:hover { color: var(--cream); border-bottom-color: var(--accent); }

.nav__burger { display: none; }

@media (max-width: 900px) {
  .nav__inner { height: 64px; }
  .nav__cta { display: none; }
  .nav__burger {
    display: grid; place-content: center; gap: 5px;
    width: 2.75rem; height: 2.75rem;
    background: transparent; border: 1px solid var(--line);
    border-radius: var(--r-pill); cursor: pointer;
  }
  .nav__burger span { display: block; width: 18px; height: 2px; background: var(--cream); transition: transform .25s var(--ease), opacity .25s var(--ease); }
  .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  .nav__links {
    position: fixed; inset: 64px 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line-soft);
    padding: 0.5rem var(--pad) 1.5rem;
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding-block: 0.9rem; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); }
}

/* ---------- Hero : média plein cadre, colonne de texte à gauche ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
/* Photo portrait dans un cadre large : on cadre haut pour garder le visage,
   et à droite pour laisser la colonne de texte sur du fond. */
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 12%;
  animation: heroIn 1.6s var(--ease) both;
}
@media (max-width: 900px) {
  .hero__media img { object-position: 62% 8%; }
}
@keyframes heroIn { from { transform: scale(1.07); opacity: 0; } to { transform: none; opacity: 1; } }

.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--velvet) 2%, rgba(42,5,9,0.72) 34%, rgba(42,5,9,0.12) 72%),
    linear-gradient(to right, rgba(20,4,7,0.88) 0%, rgba(20,4,7,0.42) 46%, rgba(20,4,7,0) 74%);
}

.hero__body {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(4rem, 9vh, 7rem);
  padding-top: 6rem;
}

/* Empilement repris de la plaquette : surtitre, titre, mini-comédie musicale,
   pastilles de discipline, puis la ligne des deux versions. */
.hero__title {
  font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.038em;
  margin: 0 0 1.1rem;
  max-width: 15ch;
  text-shadow: 0 2px 40px rgba(20, 4, 7, 0.55);
}

.hero__kicker {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 2.1vw, 1.55rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 1.4rem;
  text-shadow: 0 2px 24px rgba(20, 4, 7, 0.6);
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.6rem;
  padding: 0;
}
.chips li {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--cream);
  background: rgba(251, 242, 232, 0.13);
  border: 1px solid rgba(251, 242, 232, 0.18);
  border-radius: var(--r-card);
  padding: 0.62rem 1.15rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (prefers-reduced-transparency: reduce) {
  .chips li { background: var(--velvet-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.hero__versions {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  letter-spacing: -0.015em;
  color: var(--cream-dim);
  margin: 0 0 2rem;
  text-shadow: 0 2px 20px rgba(20, 4, 7, 0.6);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- Synopsis ---------- */
.synopsis { background: var(--velvet); }

.synopsis__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .synopsis__grid { grid-template-columns: 1.35fr 1fr; }
  .synopsis__figure { margin-top: 3.5rem; }
}

/* Le récit est le seul long texte de la page : il passe sur Bricolage en
   graisse 500, plus dense que l'Archivo, et gagne un cran de taille. */
.synopsis__text p {
  font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  font-weight: 500;
  font-size: clamp(1.075rem, 1.35vw, 1.2rem);
  line-height: 1.62;
  letter-spacing: -0.006em;
  color: var(--cream-dim);
  max-width: 58ch;
}

.synopsis__figure { margin: 0; }
.synopsis__figure img {
  width: 100%;
  border-radius: var(--r-card);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  box-shadow: 0 30px 70px -30px rgba(20, 4, 7, 0.9);
}

.pull {
  margin: 3rem 0 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--accent);
}
.pull p {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0 0 0.6rem;
  max-width: 24ch;
}
.pull cite {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--cream-mute);
}

/* ---------- Teaser : façade, l'iframe n'arrive qu'au clic ---------- */
/* Un ton au-dessus du synopsis qui précède : les fonds ne se répètent jamais
   d'une section à l'autre (velvet, velvet-2, ink, velvet, ink, velvet, ink). */
.teaser { background: var(--velvet-2); }

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85);
}

.player iframe,
.player__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player__poster {
  padding: 0;
  background: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.player__poster img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: opacity .4s var(--ease), transform .6s var(--ease);
}
.player__poster:hover img { opacity: 0.85; transform: scale(1.02); }

.player__play {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 8vw, 6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
  color: var(--velvet);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.player__play svg { width: 62%; height: 62%; fill: currentColor; }
.player__poster:hover .player__play { transform: scale(1.08); background: #fff; }
.player__poster:active .player__play { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .player__poster img,
  .player__play { transition: none; }
  .player__poster:hover img,
  .player__poster:hover .player__play { transform: none; }
}

/* ---------- Bento « dans votre salle » ---------- */
/* .salle et .technique sont désormais des blocs internes de .infos */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
}

.tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  grid-column: span 12;
  min-height: 190px;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--velvet-2);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
}

.tile--pine { background: var(--pine); border-color: rgba(251,242,232,0.1); }

.tile--tint {
  background:
    linear-gradient(135deg, rgba(255,82,71,0.10), rgba(255,82,71,0) 60%),
    var(--velvet-2);
  border-color: rgba(255, 82, 71, 0.22);
}

.tile--photo { border-color: transparent; }
/* Les chemins sont relatifs à CE fichier : les déclarer ici, jamais via une
   custom property posée dans le HTML (la base de résolution serait fausse). */
.tile--photo::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-size: cover;
  background-position: center 30%;
}
.tile--a::before { background-image: url("../photos/felix-ouvre-cadeau.jpg"); }
.tile--f::before { background-image: url("../photos/felix-balles-mousse.jpg"); background-position: center 45%; }
.tile--photo::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20,4,7,0.94) 12%, rgba(20,4,7,0.6) 55%, rgba(20,4,7,0.25) 100%);
}

/* Le titre (dt du Design.pdf) est gros et passe en premier ; la valeur suit,
   plus discrète. L'ordre visuel suit l'ordre du HTML, .tile empile en colonne
   et pousse le groupe vers le bas de la cellule. */
.tile__label {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0 0 0.4rem;
}

.tile__value {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.35;
  color: var(--accent);
  margin: 0;
  max-width: 46ch;
}
.tile__value span { color: var(--cream-mute); font-weight: 500; }

/* La tuile large porte une phrase entière : elle reste lisible en clair,
   l'accent resterait criard sur une si longue ligne. */
.tile--wide .tile__value { color: var(--cream-dim); }

/* Sur le fond sapin, le vermillon retombe sous 4,5:1 une fois la valeur
   réduite en taille : on repasse en crème, comme pour le titre. */
.tile--pine .tile__value { color: var(--cream); }

@media (min-width: 780px) {
  /* Deux rangées de trois : Durée / Jauge / Espace, puis Installation /
     Équipe / Technique. Les six tuiles pèsent pareil, aucune n'est mise en
     avant plus qu'une autre. */
  .tile--a, .tile--b, .tile--c, .tile--d, .tile--e, .tile--f { grid-column: span 4; min-height: 220px; }
}

/* ---------- Infos pratiques : tout le concret regroupé en fin de page ---------- */
.infos { background: var(--velvet); }

.infos__block + .infos__block { margin-top: clamp(2.5rem, 5vw, 4rem); }

.infos__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin: 0 0 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--accent);
}

/* Les blocs déplacés ici gardent leurs styles, on neutralise juste leurs
   anciens réglages de section. */
.infos .lede { margin-bottom: 2.25rem; }
.versions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 700px) { .versions__grid { grid-template-columns: 1fr 1fr; } }

.vcard {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--velvet-2);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--accent);
}
.vcard--alt { background: var(--pine); border-color: rgba(251,242,232,0.1); border-top-color: var(--accent); }

/* Aucun effet au survol : ces deux cartes ne sont pas cliquables. */
.vcard__body { padding: clamp(1.75rem, 3vw, 2.75rem); }

.vcard__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.025em;
  margin: 0 0 0.35rem;
}
/* Crème et non vermillon : sur le fond sapin, le rouge tomberait à 4:1. */
.vcard__age { margin: 0 0 1.25rem; color: var(--cream-dim); font-size: 0.95rem; font-weight: 600; }
.vcard p:last-child { margin: 0; color: var(--cream-dim); }

/* ---------- Photos : mosaïque en vrac ----------
   Grille 12 colonnes, formats et hauteurs volontairement inégaux, décalages
   verticaux par modificateur. Les rangées font 12 colonnes pile : 4+3+5,
   3+5+4, 5+4+3, puis une image pleine largeur en fermeture. */
/* Deux blocs photo distincts : les représentations d'abord (fond ink),
   le shooting studio ensuite (fond velvet). Jamais mélangés. */
.photos { background: var(--ink); }
.photos .wrap, .studio .wrap { margin-bottom: 2.5rem; }
.photos .lede { margin-bottom: 0; }

.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.6rem, 1.2vw, 1rem);
  align-items: start;
  padding-inline: clamp(0.6rem, 1.2vw, 1rem);
}

/* Les photos de représentation et celles de studio se suivent sans titre
   intermédiaire : un vrai blanc les sépare, c'est lui qui fait la césure. */
.mosaic--suite { margin-top: clamp(3rem, 7vw, 6rem); }

.mo {
  margin: 0;
  grid-column: span 12;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--velvet-2);
}
.mo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.96);
  transition: filter .6s var(--ease);
}
.mo:hover img { filter: saturate(1.1); }

/* Formats */
.mo--p img { aspect-ratio: 3 / 4; }
.mo--l img { aspect-ratio: 3 / 2; }
.mo--s img { aspect-ratio: 1 / 1; }
.mo--43 img { aspect-ratio: 4 / 3; }

/* Le désordre : quelques tirages posés de travers, comme sur la plaquette.
   Au survol, l'image se redresse.
   L'inclinaison passe par une variable, sinon la règle de révélation au
   défilement (qui pose elle aussi un transform) l'écraserait. */
.mo { transform: rotate(var(--tilt, 0deg)); transition: transform .5s var(--ease); }
.mo--tilt-a { --tilt: -1.4deg; }
.mo--tilt-b { --tilt: 1.1deg; }
.mo--tilt-a:hover, .mo--tilt-b:hover { --tilt: 0deg; }
@media (prefers-reduced-motion: reduce) {
  .mo { transition: none; }
}

@media (min-width: 760px) {
  .mo--3  { grid-column: span 3; }
  .mo--4  { grid-column: span 4; }
  .mo--5  { grid-column: span 5; }
  .mo--7  { grid-column: span 7; }
  .mo--12 { grid-column: span 12; }
  .mo--12 img { aspect-ratio: 12 / 5; }

  /* Le vrac : chaque image ne démarre pas à la même hauteur. */
  .mo--down    { margin-top: clamp(2rem, 5vw, 4.5rem); }
  .mo--down-sm { margin-top: clamp(1rem, 2.5vw, 2.25rem); }
  .mo--up      { margin-bottom: clamp(2rem, 5vw, 4.5rem); }
}

/* Sous 760px : deux colonnes, décalage réduit mais conservé. */
@media (max-width: 759px) {
  .mo { grid-column: span 6; }
  .mo--12 { grid-column: span 12; }
  .mo--12 img { aspect-ratio: 3 / 2; }
  .mo--down { margin-top: 1.5rem; }
  .mo--l img, .mo--s img { aspect-ratio: 3 / 4; }
}

@media (prefers-reduced-motion: reduce) {
  .mo img, .mo:hover img { transition: none; transform: none; }
}

/* ---------- Distribution ---------- */
/* Alternance des fonds : velvet, velvet-2, ink, velvet, ink. Jamais deux
   sections voisines du même ton. */
.equipe { background: var(--ink); }

.credits { margin: 0; display: grid; gap: 1.5rem; max-width: 780px; }
@media (min-width: 700px) {
  .credits > div { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: baseline; }
}
.credits dt { color: var(--cream-mute); font-size: 0.9rem; }
.credits dd {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  letter-spacing: -0.015em;
}

/* ---------- Contact ---------- */
.contact { position: relative; isolation: isolate; overflow: hidden; }

.contact__media { position: absolute; inset: 0; z-index: -2; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 18%; }
.contact::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(20,4,7,0.95) 0%, rgba(20,4,7,0.86) 48%, rgba(20,4,7,0.62) 100%);
}

.contact__body .h2 { max-width: 16ch; }

.contact__links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
  max-width: 760px;
}
@media (min-width: 700px) { .contact__links { grid-template-columns: 1fr 1fr; } }

.clink {
  display: grid;
  gap: 0.3rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--r-card);
  background: rgba(59, 8, 13, 0.72);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .12s ease;
}
.clink:hover { border-color: var(--accent); background: rgba(59, 8, 13, 0.92); }
.clink:active { transform: scale(0.99); }
.clink__label { font-size: 0.85rem; color: var(--cream-mute); }
.clink__value {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  letter-spacing: -0.02em;
  color: var(--cream);
  overflow-wrap: anywhere;
}

/* ---------- Pied de page ---------- */
.footer { background: var(--ink); border-top: 1px solid var(--line-soft); padding-block: clamp(3rem, 6vw, 4.5rem); }

.footer__text { margin: 0; color: var(--cream-mute); font-size: 0.9rem; line-height: 1.7; }

/* ---------- Neige : le spectacle en fait tomber, la page aussi ---------- */
/* Deux éléments par flocon : le `i` tombe, le `b` se balance de gauche à
   droite à son propre rythme. Un seul élément ne peut pas porter les deux,
   les deux animations se disputeraient le `transform`. Résultat : aucun
   flocon ne descend en ligne droite. */
/* Le vent : toute la couche est poussée de côté par à-coups irréguliers.
   Deux périodes premières entre elles (23 s et 37 s) pour que les rafales ne
   retombent jamais au même endroit. */
.snow {
  position: fixed; inset: 0; z-index: var(--z-snow);
  pointer-events: none; overflow: hidden;
  animation: rafale 23s ease-in-out infinite;
}
.snow__voile {
  position: absolute; inset: 0;
  animation: bourrasque 37s ease-in-out infinite;
}

@keyframes rafale {
  0%   { transform: translate3d(0, 0, 0); }
  18%  { transform: translate3d(6px, 0, 0); }
  26%  { transform: translate3d(46px, 0, 0); }
  34%  { transform: translate3d(18px, 0, 0); }
  52%  { transform: translate3d(-4px, 0, 0); }
  68%  { transform: translate3d(-34px, 0, 0); }
  80%  { transform: translate3d(-8px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes bourrasque {
  0%   { transform: translate3d(0, 0, 0); }
  30%  { transform: translate3d(-22px, 0, 0); }
  44%  { transform: translate3d(30px, 0, 0); }
  62%  { transform: translate3d(-12px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.snow i {
  position: absolute;
  top: 0;
  will-change: transform, opacity;
  animation: chute linear infinite;
}
.snow b {
  display: block;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 7px rgba(251, 242, 232, 0.5);
  will-change: transform;
  animation: balance ease-in-out infinite alternate;
}

@keyframes chute {
  0%   { transform: translate3d(0, -8vh, 0); opacity: 0; }
  7%   { opacity: var(--op, 0.5); }
  92%  { opacity: var(--op, 0.5); }
  100% { transform: translate3d(0, 112vh, 0); opacity: 0; }
}
@keyframes balance {
  from { transform: translate3d(calc(var(--sway, 20px) * -1), 0, 0) scale(0.88); }
  to   { transform: translate3d(var(--sway, 20px), 0, 0) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) { .snow { display: none; } }

/* ---------- Titres : chaque mot monte derrière un cache ---------- */
.js [data-split] .mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;   /* réserve pour les jambages des g, p, y */
  margin-bottom: -0.12em;
}
.js [data-split] .mot > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .85s var(--ease);
  transition-delay: var(--dm, 0ms);
}
.js [data-split].is-in .mot > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-split] .mot > span { transform: none; transition: none; }
}

/* ---------- Révélations au défilement ---------- */
/* L'état caché n'est posé que si JS tourne : sans lui, tout reste lisible.
   `--tilt` est repris ici pour que les tirages de travers gardent leur angle. */
.js .reveal { opacity: 0; transform: translateY(24px) rotate(var(--tilt, 0deg)); }
.js .reveal.is-in {
  opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg));
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
  .hero__media img { animation: none; }
}

/* =========================================================================
   Animations liées au défilement.

   Elles utilisent les timelines CSS natives (`animation-timeline: view()`),
   pas d'écouteur `scroll` ni de librairie : le navigateur les joue hors du
   fil principal, donc sans saccade. Les navigateurs qui ne les gèrent pas
   encore gardent simplement les révélations en fondu ci-dessus.

   Chaque animation a une raison : donner de la profondeur aux photos
   (les plans bougent à des vitesses différentes) et accompagner la lecture.
   ========================================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Le décor du hero glisse plus lentement que la page. */
    .hero__media {
      animation: derive linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes derive {
      from { transform: translate3d(0, -3.5%, 0) scale(1.08); }
      to   { transform: translate3d(0, 3.5%, 0)  scale(1.08); }
    }

    /* Chaque photo de la mosaïque respire dans son cadre pendant la
       traversée : c'est ce décalage entre les cellules qui fait le vrac. */
    .mo img,
    .contact__media img {
      animation: respire linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes respire {
      from { transform: translate3d(0, -4%, 0) scale(1.11); }
      to   { transform: translate3d(0, 4%, 0)  scale(1.11); }
    }

    /* Les cellules décalées vers le bas dérivent un peu plus : deux vitesses
       dans la même rangée, l'oeil lit de la profondeur. */
    .mo--down img { animation-name: respireLent; }
    @keyframes respireLent {
      from { transform: translate3d(0, -7%, 0) scale(1.16); }
      to   { transform: translate3d(0, 7%, 0)  scale(1.16); }
    }

    /* L'image de fermeture s'ouvre en grand à mesure qu'elle monte. */
    .mo--12 img {
      animation-name: ouverture;
      animation-range: entry 0% cover 60%;
    }
    @keyframes ouverture {
      from { transform: scale(1.18); }
      to   { transform: scale(1); }
    }

    /* Les titres de section se dévoilent par le bas, comme un rideau. */
    .section .h2 {
      animation: rideau linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 85%;
    }
    @keyframes rideau {
      from { clip-path: inset(0 0 100% 0); opacity: 0.2; }
      to   { clip-path: inset(0 0 0 0);    opacity: 1; }
    }

    /* Le lecteur du teaser se redresse quand il entre dans le cadre. */
    .player {
      animation: redresse linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    @keyframes redresse {
      from { transform: perspective(1400px) rotateX(7deg) scale(0.94); opacity: 0.55; }
      to   { transform: perspective(1400px) rotateX(0deg) scale(1);    opacity: 1; }
    }
  }
}