/* =============================================================
   andrei Media Network
   Système visuel : les cinq formes du logo (cercle, carré, cercle,
   carré incliné, barre) servent de grammaire à tout le site.
   Palette « Metallic Elegance » fournie par le client, strictement
   monochrome : la couleur ne vient que des vignettes vidéo.
   ============================================================= */

@font-face {
  font-family: 'Navill';
  src: url('../fonts/navill-semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Adventor';
  src: url('../fonts/tga-regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Adventor';
  src: url('../fonts/tga-bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* palette du client */
  --noir: #000000;
  --gris-6: #66666E;
  --gris-9: #9999A1;
  --gris-e: #E6E6E9;
  --gris-f: #F4F4F6;
  /* surfaces dérivées du noir, pour créer de la profondeur sans sortir de la charte */
  --fond: #000000;
  --surface: #0B0B0C;
  --surface-2: #141416;
  --trait: #222226;
  --trait-clair: #34343A;

  --display: 'Navill', 'Arial Narrow', Impact, sans-serif;
  --texte: 'Adventor', 'Century Gothic', 'Futura', system-ui, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --marge: clamp(20px, 5vw, 72px);
  --nav-h: 76px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--gris-f);
  font-family: var(--texte);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--gris-f); color: var(--noir); }

/* grain : donne la texture « diffusion » sans ajouter de couleur */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   Typographie
   --------------------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 600;
  /* Navill place ses accents très haut : dépassement mesuré de 0.238em
     au-dessus des capitales, soit un interligne minimum de 0.962em avant
     collision. On garde 1 pour que tout texte français saisi depuis
     l'administration reste lisible. */
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
/* Les titres se calent sur la largeur de LEUR conteneur (cqi), pas sur celle de
   l'écran : dans une colonne de .duo, un dimensionnement en vw donnait un corps
   calculé sur tout l'écran et coupait les mots en deux dès 960 px.
   Le script main.js réduit encore le corps si un mot dépasse malgré tout. */
.enveloppe, .duo > *, .pilier, .partenaire, .lecteur__boite { container-type: inline-size; }
.d-xl { font-size: clamp(44px, 12cqi, 190px); }
.d-l  { font-size: clamp(29px, 12cqi, 104px); }
.d-m  { font-size: clamp(24px, 9cqi, 60px); }

.etiquette {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gris-9);
}
.etiquette::before {
  content: ''; width: 7px; height: 7px;
  background: var(--gris-f);
  transform: rotate(14deg); /* le carré incliné du logo, en miniature */
}

.chapo {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--gris-9);
  max-width: 62ch;
}
.texte { color: var(--gris-9); }
strong, b { font-weight: 700; color: var(--gris-f); }

/* ---------------------------------------------------------------
   Mise en page
   --------------------------------------------------------------- */
.enveloppe { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 var(--marge); }
.section { padding: clamp(76px, 11vw, 168px) 0; position: relative; }
.section--fin { padding-bottom: clamp(40px, 6vw, 80px); }
.regle { height: 1px; background: var(--trait); border: 0; margin: 0; }

/* ---------------------------------------------------------------
   Les cinq formes — la signature de la marque
   --------------------------------------------------------------- */
.formes { display: flex; align-items: center; gap: clamp(6px, .8vw, 12px); }
.formes i {
  display: block; background: var(--gris-f);
  width: var(--t, 22px); height: var(--t, 22px);
}
.formes i:nth-child(1) { border-radius: 50%; }
.formes i:nth-child(2) { }
.formes i:nth-child(3) { border-radius: 50%; }
.formes i:nth-child(4) { transform: rotate(16deg); }
.formes i:nth-child(5) { width: calc(var(--t, 22px) * .34); }

.formes--anime i { animation: respire 4.8s var(--ease) infinite; }
.formes--anime i:nth-child(2) { animation-delay: .16s; }
.formes--anime i:nth-child(3) { animation-delay: .32s; }
.formes--anime i:nth-child(4) { animation-delay: .48s; }
.formes--anime i:nth-child(5) { animation-delay: .64s; }
@keyframes respire {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-22%) rotate(var(--r, 0deg)); }
}
.formes--anime i:nth-child(4) { --r: 16deg; }
@media (prefers-reduced-motion: reduce) { .formes--anime i { animation: none; } }

/* ---------------------------------------------------------------
   Navigation
   --------------------------------------------------------------- */
/* Le flou est porté par un pseudo-élément, jamais par .nav : un backdrop-filter
   transforme son élément en bloc conteneur pour les descendants position:fixed,
   ce qui écrasait le menu mobile à 1px de haut et faisait déborder ses liens
   par-dessus la page. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
}
.nav::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.nav--pose::before { border-bottom-color: var(--trait); background: rgba(0, 0, 0, .9); }
.nav__int { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }

.nav__logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav__logo img { height: 21px; width: auto; }
.nav__logo .formes { --t: 15px; }

.nav__liens { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 42px); }
.nav__lien {
  position: relative;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris-9);
  padding: 6px 0;
  transition: color .3s var(--ease);
}
.nav__lien::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gris-f);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__lien:hover, .nav__lien[aria-current="page"] { color: var(--gris-f); }
.nav__lien:hover::after, .nav__lien[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__lien--studio { display: inline-flex; align-items: center; gap: 8px; }
.nav__lien--studio img { height: 11px; width: auto; opacity: .75; transition: opacity .3s var(--ease); }
.nav__lien--studio:hover img { opacity: 1; }

.nav__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border: 1px solid var(--trait-clair);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-f);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.nav__cta:hover { background: var(--gris-f); color: var(--noir); border-color: var(--gris-f); }

.nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--gris-f); position: relative; transition: background .3s; }
.nav__burger span::before, .nav__burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--gris-f);
  transition: transform .4s var(--ease);
}
.nav__burger span::before { top: -7px; }
.nav__burger span::after { top: 7px; }
body.menu-ouvert .nav__burger span { background: transparent; }
body.menu-ouvert .nav__burger span::before { transform: translateY(7px) rotate(45deg); }
body.menu-ouvert .nav__burger span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav__burger { display: flex; }
  .nav__liens {
    position: fixed; inset: var(--nav-h) 0 0 0;
    flex-direction: column; justify-content: center; gap: 8px;
    background: var(--noir);
    /* le panneau part sous la barre : il doit remonter de sa propre hauteur
       ET de la hauteur de la barre pour disparaître complètement */
    transform: translateY(calc(-100% - var(--nav-h)));
    transition: transform .6s var(--ease);
    border-top: 1px solid var(--trait);
  }
  body.menu-ouvert .nav__liens { transform: translateY(0); }
  .nav__lien { font-size: 26px; letter-spacing: .06em; padding: 14px 0; }
  .nav__lien--studio img { height: 18px; }
  .nav__cta { margin-top: 20px; font-size: 14px; }
}

/* ---------------------------------------------------------------
   Héro
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(32px, 5vw, 64px);
  overflow: hidden;
}
.hero__formes {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  --t: clamp(100px, 22vw, 260px);
  opacity: .05;
  pointer-events: none;
}
.hero__corps { position: relative; z-index: 2; }
.hero h1 { margin: 22px 0 0; }
/* le masque de révélation doit laisser passer les accents des capitales
   (È, À, É) : sans cette marge, overflow:hidden les rogne net */
.hero h1 .ligne { display: block; overflow: hidden; padding-top: .3em; margin-top: -.3em; }
.hero h1 .ligne > span { display: block; }
.hero__bas {
  position: relative; z-index: 2;
  margin-top: clamp(28px, 4vw, 52px);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.hero__defile {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gris-6);
}
.hero__defile i {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(var(--gris-f), transparent);
  animation: file 2.4s var(--ease) infinite;
}
@keyframes file { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------------------------------------------------------------
   Bandeau défilant
   --------------------------------------------------------------- */
.bandeau {
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--surface);
}
.bandeau__piste { display: inline-flex; align-items: center; gap: 28px; animation: glisse 42s linear infinite; }
.bandeau span {
  font-family: var(--display); font-size: clamp(20px, 2.4vw, 34px);
  text-transform: uppercase; letter-spacing: .02em; color: var(--gris-f);
}
.bandeau i { display: block; width: 11px; height: 11px; background: var(--gris-6); transform: rotate(16deg); flex-shrink: 0; }
@keyframes glisse { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau__piste { animation: none; } }

/* ---------------------------------------------------------------
   Rail de vidéos
   --------------------------------------------------------------- */
.rail-tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px);
}
.rail-fleches { display: flex; gap: 10px; }
.rail-fleche {
  width: 52px; height: 52px;
  border: 1px solid var(--trait-clair);
  display: grid; place-items: center;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.rail-fleche svg { width: 17px; height: 17px; }
.rail-fleche:hover:not(:disabled) { background: var(--gris-f); color: var(--noir); border-color: var(--gris-f); }
.rail-fleche:disabled { opacity: .3; cursor: default; }

.rail {
  display: flex; gap: clamp(14px, 1.5vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  margin: 0 calc(var(--marge) * -1);
  padding-left: var(--marge); padding-right: var(--marge);
  /* sans ce retrait, l'aimantation cale la première carte à 72 px au lieu de 0 :
     la flèche « précédent » ne se désactivait jamais en butée */
  scroll-padding-left: var(--marge);
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.tire { cursor: grabbing; scroll-snap-type: none; }
.rail.tire * { pointer-events: none; }

.piste {
  width: 100%; height: 2px; background: var(--trait);
  margin-top: 10px; position: relative; overflow: hidden;
}
.piste__curseur { position: absolute; top: 0; left: 0; height: 100%; background: var(--gris-f); width: 20%; }

/* ---------------------------------------------------------------
   Carte vidéo
   --------------------------------------------------------------- */
.video {
  flex: 0 0 clamp(280px, 30vw, 460px);
  scroll-snap-align: start;
  display: block;
  position: relative;
}
.video__cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--trait);
}
.video__cadre img {
  width: 100%; height: 100%; object-fit: cover;
  /* les vignettes sont le produit : elles restent en couleur. Un léger retrait
     de luminosité les fait tenir ensemble sur le fond noir, levé au survol. */
  filter: brightness(.86) saturate(1.04);
  transform: scale(1.02);
  transition: filter .5s var(--ease), transform .8s var(--ease);
}
.video:hover .video__cadre img,
.video:focus-visible .video__cadre img { filter: none; transform: scale(1.06); }

.video__lire {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .4s var(--ease);
}
.video:hover .video__lire, .video:focus-visible .video__lire { opacity: 1; }
.video__lire span {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--gris-f); color: var(--noir);
  display: grid; place-items: center;
  transform: scale(.8); transition: transform .5s var(--ease);
}
.video:hover .video__lire span { transform: scale(1); }
.video__lire svg { width: 17px; height: 17px; margin-left: 3px; }

.video__corps { padding-top: 16px; display: flex; gap: 14px; align-items: flex-start; }
.video__num {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--gris-6); padding-top: 3px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.video__titre {
  font-size: clamp(14px, 1.15vw, 16.5px); font-weight: 700; line-height: 1.32;
  color: var(--gris-e);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .3s var(--ease);
}
.video:hover .video__titre { color: var(--gris-f); }
.video__date { margin-top: 6px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-6); }

/* grille de vidéos (page Sorties) */
.grille-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(22px, 2.6vw, 40px);
}
.grille-videos .video { flex: initial; width: auto; }

/* ---------------------------------------------------------------
   Blocs de contenu
   --------------------------------------------------------------- */
.duo {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

.piliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1px; }
.pilier { background: var(--fond); padding: clamp(28px, 3vw, 44px); position: relative; box-shadow: 0 0 0 1px var(--trait); transition: background .45s var(--ease); }
.pilier:hover { background: var(--surface); }
.pilier__forme { width: 30px; height: 30px; background: var(--gris-f); margin-bottom: 26px; transition: transform .6s var(--ease); }
.pilier:nth-child(1) .pilier__forme { border-radius: 50%; }
.pilier:nth-child(3) .pilier__forme { transform: rotate(16deg); }
.pilier:nth-child(3):hover .pilier__forme { transform: rotate(196deg); }
.pilier:nth-child(1):hover .pilier__forme,
.pilier:nth-child(2):hover .pilier__forme { transform: rotate(180deg); }
.pilier h3 { font-family: var(--display); font-size: clamp(19px, 9cqi, 30px); text-transform: uppercase; line-height: .96; margin-bottom: 14px; }
.pilier p { font-size: 14.5px; line-height: 1.65; color: var(--gris-9); }

.stat { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 76px); }
.stat div strong { display: block; font-family: var(--display); font-size: clamp(34px, 4.6vw, 62px); line-height: 1; }
.stat div span { display: block; margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-6); }

/* ---------------------------------------------------------------
   Mise en avant (aftermovie / travail phare)
   --------------------------------------------------------------- */
.phare { position: relative; border: 1px solid var(--trait); background: var(--surface); overflow: hidden; }
.phare__media { position: relative; aspect-ratio: 16 / 9; background: var(--noir); }
.phare__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.84) saturate(1.04); transition: filter .6s var(--ease); }
.phare:hover .phare__media img { filter: none; }
.phare__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.phare__lire {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 18px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.1));
  transition: background .5s var(--ease);
}
.phare:hover .phare__lire { background: linear-gradient(to top, rgba(0,0,0,.4), rgba(0,0,0,0)); }
.phare__lire span {
  width: clamp(66px, 7vw, 92px); height: clamp(66px, 7vw, 92px); border-radius: 50%;
  background: var(--gris-f); color: var(--noir); display: grid; place-items: center;
  transition: transform .5s var(--ease);
}
.phare:hover .phare__lire span { transform: scale(1.08); }
.phare__lire svg { width: 24px; height: 24px; margin-left: 4px; }
.phare__pied { padding: clamp(24px, 3vw, 40px); display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-end; border-top: 1px solid var(--trait); }

.credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; }
.credits div { background: var(--fond); padding: 22px 24px; box-shadow: 0 0 0 1px var(--trait); }
.credits dt { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-6); margin-bottom: 8px; }
.credits dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--gris-e); }

/* ---------------------------------------------------------------
   Partenaires
   --------------------------------------------------------------- */
.partenaires { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; }
.partenaire { background: var(--fond); padding: clamp(28px, 3.4vw, 48px); box-shadow: 0 0 0 1px var(--trait); transition: background .45s var(--ease); }
.partenaire:hover { background: var(--surface); }
.partenaire__role { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gris-6); }
.partenaire h3 { font-family: var(--display); font-size: clamp(22px, 11cqi, 40px); text-transform: uppercase; line-height: .95; margin: 14px 0 12px; }
.partenaire p { font-size: 14.5px; line-height: 1.68; color: var(--gris-9); }
.partenaire__lien { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-f); }
.partenaire__lien i { width: 7px; height: 7px; background: var(--gris-f); transform: rotate(16deg); transition: transform .5s var(--ease); }
.partenaire__lien:hover i { transform: rotate(196deg); }

/* ---------------------------------------------------------------
   Formulaire
   --------------------------------------------------------------- */
.formulaire { display: grid; gap: 26px; }
.champ { position: relative; }
.champ label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-6); margin-bottom: 10px; }
.champ input, .champ textarea, .champ select {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--trait-clair);
  padding: 12px 0;
  color: var(--gris-f);
  font-family: var(--texte); font-size: 16px;
  transition: border-color .35s var(--ease);
  border-radius: 0;
}
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239999A1' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 12px; padding-right: 26px; }
.champ select option { background: var(--surface-2); color: var(--gris-f); }
.champ textarea { resize: vertical; min-height: 128px; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-bottom-color: var(--gris-f); }
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris-6); }
.duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 700px) { .duo-champs { grid-template-columns: 1fr; } }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 34px;
  background: var(--gris-f); color: var(--noir);
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--gris-f);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.bouton:hover { background: transparent; color: var(--gris-f); }
.bouton i { width: 8px; height: 8px; background: currentColor; transform: rotate(16deg); transition: transform .5s var(--ease); }
.bouton:hover i { transform: rotate(196deg); }
.bouton--vide { background: transparent; color: var(--gris-f); border-color: var(--trait-clair); }
.bouton--vide:hover { background: var(--gris-f); color: var(--noir); border-color: var(--gris-f); }

.leurre { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.message {
  padding: 18px 22px; border: 1px solid var(--trait-clair);
  background: var(--surface); font-size: 14.5px; margin-bottom: 30px;
}
.message strong { display: block; margin-bottom: 4px; }

/* ---------------------------------------------------------------
   Pied de page
   --------------------------------------------------------------- */
.pied { border-top: 1px solid var(--trait); padding: clamp(56px, 7vw, 96px) 0 34px; }
.pied__haut { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .8fr)); gap: clamp(32px, 5vw, 72px); }
@media (max-width: 860px) { .pied__haut { grid-template-columns: 1fr 1fr; } .pied__marque { grid-column: 1 / -1; } }
.pied__marque img { height: 44px; width: auto; margin-bottom: 22px; }
.pied__marque p { font-size: 14px; color: var(--gris-6); max-width: 34ch; line-height: 1.65; }
.pied h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gris-6); margin-bottom: 18px; }
.pied li + li { margin-top: 11px; }
.pied li a { font-size: 14px; color: var(--gris-9); transition: color .3s var(--ease); }
.pied li a:hover { color: var(--gris-f); }
.pied__bas {
  margin-top: clamp(44px, 6vw, 76px); padding-top: 26px; border-top: 1px solid var(--trait);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 11.5px; letter-spacing: .06em; color: var(--gris-6);
}
.pied__bas a:hover { color: var(--gris-f); }

/* ---------------------------------------------------------------
   Apparitions au défilement
   --------------------------------------------------------------- */
[data-apparait] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-apparait].vu { opacity: 1; transform: none; }
[data-apparait][data-delai="1"] { transition-delay: .09s; }
[data-apparait][data-delai="2"] { transition-delay: .18s; }
[data-apparait][data-delai="3"] { transition-delay: .27s; }
[data-apparait][data-delai="4"] { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  [data-apparait] { opacity: 1; transform: none; transition: none; }
}

/* lignes du héros : révélées par translation verticale */
.reveler > span { transform: translateY(102%); transition: transform 1.05s var(--ease); display: block; }
.reveler.vu > span { transform: none; }
.reveler[data-delai="1"] > span { transition-delay: .1s; }
.reveler[data-delai="2"] > span { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .reveler > span { transform: none; } }

/* ---------------------------------------------------------------
   En-tête de page intérieure
   --------------------------------------------------------------- */
.tete-page {
  padding-top: calc(var(--nav-h) + clamp(64px, 9vw, 130px));
  padding-bottom: clamp(44px, 6vw, 76px);
  position: relative; overflow: hidden;
}
.tete-page h1 { margin-top: 20px; }
.tete-page .chapo { margin-top: 26px; }
.tete-page__formes { position: absolute; right: calc(var(--marge) * -1); top: 30%; --t: clamp(70px, 12vw, 150px); opacity: .045; }

:focus-visible { outline: 2px solid var(--gris-f); outline-offset: 3px; }

/* ---------------------------------------------------------------
   Lecteur en surimpression
   Une vidéo se regarde sur le site ; le lien vers YouTube reste
   offert sous le lecteur, pour ramener du public sur la chaîne.
   --------------------------------------------------------------- */
.lecteur {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(0, 0, 0, .94);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.lecteur.ouvert { opacity: 1; visibility: visible; }
.lecteur__boite { width: min(1180px, 100%); }
.lecteur__cadre {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--noir); border: 1px solid var(--trait);
  transform: scale(.97); transition: transform .4s var(--ease);
}
.lecteur.ouvert .lecteur__cadre { transform: none; }
.lecteur__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lecteur__bas {
  margin-top: 16px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.lecteur__titre { font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; line-height: 1.3; max-width: 58ch; }
.lecteur__fermer {
  position: absolute; top: clamp(12px, 2.4vw, 26px); right: clamp(12px, 2.4vw, 26px);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--trait-clair); color: var(--gris-f);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lecteur__fermer:hover { background: var(--gris-f); color: var(--noir); }
.lecteur__fermer svg { width: 17px; height: 17px; }
body.lecteur-ouvert { overflow: hidden; }