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

/* Montserrat SemiBold, choisie par le client pour remplacer Navill.
   Sous licence SIL Open Font 1.1 : usage commercial et incorporation comme
   police web autorisés, contrairement à Navill qui était en « all rights
   reserved ». La licence accompagne les fichiers, comme l'OFL l'exige.
   Hébergée ici plutôt qu'appelée chez Google : une requête de moins vers un
   tiers, et rien qui parte sur la visite des internautes. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-600-latin-ext.woff2') format('woff2');
  font-weight: 600; font-style: normal; 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: '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;

  /* Arrondis. Le client veut l'aspect des applications récentes : plus rien
     d'anguleux. Un seul jeu de valeurs pour que tout reste cohérent. */
  --r-s: 12px;    /* champs, petites surfaces */
  --r-m: 18px;    /* vignettes, cartes */
  --r-l: 26px;    /* grands médias */
  --r-rond: 999px;

  /* L'inclinaison du carré du logo. Mesurée sur le fichier du client
     (amn-logo-dark.png) : ses quatre coins donnent un côté de 167,3 px et une
     inclinaison de 19,19°. Tous les petits carrés du site et l'icône du site
     reprennent cette valeur, pour que rien ne penche différemment du logo. */
  --penche: -19.2deg;

  --display: 'Montserrat', 'Helvetica Neue', Arial, 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;
}

/* La place de la barre de défilement est réservée sur toutes les pages.
   Sur Windows elle prend 17 px : sans cela, passer d'une page qui défile à
   une page qui ne défile pas décale tout ce qui est dimensionné en vw, et le
   logo de fond saute de quelques pixels. */
html { scrollbar-gutter: stable; }

* { 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(var(--penche)); /* 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; }
/* Masquer une section depuis l'administration la retire de la page, mais pas
   les traits qui l'encadraient : deux séparateurs se retrouvaient collés l'un
   à l'autre, et un trait restait seul en haut ou en bas de la page. */
.regle + .regle,
main > .regle:first-child,
main > .regle:last-child { display: none; }

/* ---------------------------------------------------------------
   La marque : le fichier fourni par andrei, jamais redessiné.
   La version sans la mention « media network » sert de signature ;
   le verrouillage complet reste au pied de page.
   --------------------------------------------------------------- */
.marque { display: block; width: auto; }
.filigrane {
  position: absolute; pointer-events: none;
  height: auto;
}

/* ---------------------------------------------------------------
   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;
  /* verre : on laisse passer le fond, une teinte sombre garde le texte lisible */
  background:
    linear-gradient(180deg, rgba(244, 244, 246, .09), rgba(244, 244, 246, .02) 45%, rgba(0, 0, 0, .10)),
    rgba(10, 10, 12, .38);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
/* le reflet du haut, ce qui fait lire « verre » plutôt que « voile gris » */
.nav::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 244, 246, .32) 25%, rgba(244, 244, 246, .32) 75%, transparent);
  pointer-events: none;
}
.nav--pose::before {
  border-bottom-color: rgba(244, 244, 246, .10);
  background:
    linear-gradient(180deg, rgba(244, 244, 246, .07), rgba(244, 244, 246, .015) 45%, rgba(0, 0, 0, .14)),
    rgba(8, 8, 10, .62);
}
.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; }
/* l'image fait 895x216 : le carré incliné dépasse de 16 px les autres
   formes, il faut donc un peu plus de hauteur pour garder des cercles
   de 20 px à l'écran */
.nav__logo .marque { height: 22px; }

.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; }
/* le fichier fourni écrit déjà « STUDIO » : le mot n'est pas répété à côté */
.nav__lien--studio img { height: 13px; 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 22px; border-radius: var(--r-rond);
  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)));
    /* fermé, le panneau n'est pas seulement hors champ : il sort aussi du
       parcours au clavier, sinon la tabulation entre dans un menu invisible */
    visibility: hidden;
    transition: transform .6s var(--ease), visibility .6s var(--ease);
    border-top: 1px solid var(--trait);
  }
  body.menu-ouvert .nav__liens { transform: translateY(0); visibility: visible; }
  .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 {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1180px, 92%);
  opacity: .05;
}
.hero__corps { position: relative; z-index: 2; }
.hero h1 { margin: 22px 0 0; }
/* Les accents des capitales (È, À, É) de Navill sont dessinés 0,15 em
   AU-DESSUS de la boîte du texte : mesuré 23,4 px pour un corps de 155,5 px.
   La marge de respiration doit donc être portée par le <span> animé, pas par
   .ligne. Sinon l'accent est peint hors de l'élément transformé : il se
   détache de sa lettre pendant la révélation, et reste en arrière sur Safari.
   Le retrait équivalent sur .ligne rend l'espace repris, l'interligne est
   inchangé. */
.hero h1 .ligne { display: block; overflow: hidden; margin-top: -.22em; }
.hero h1 .ligne > span { display: block; padding-top: .22em; }
.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);
}
/* Pas de « gap » ici. Avec un écart entre TOUS les enfants, la moitié de la
   piste ne vaut pas exactement une copie : il manque un demi-écart, et le
   bandeau sautait de 14 px à chaque boucle. L'écart est porté par le
   séparateur, la séquence devient périodique et -50% tombe juste. */
.bandeau__piste { display: inline-flex; align-items: center; 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; margin: 0 28px; background: var(--gris-6); transform: rotate(var(--penche)); 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-radius: 50%;
  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;
  /* overflow-x: auto rend overflow-y « auto » par défaut : le rail gagnait
     quelques pixels de débattement vertical et accrochait pendant le glissé */
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  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; }
/* Doublure de la règle posée dans main.js : sans script, une vignette reste
   au moins insensible au glisser-déposer de son image. */
.video img, .pile__media img, .phare__media img { -webkit-user-drag: none; user-select: none; }
.rail.tire { cursor: grabbing; scroll-snap-type: none; }
/* pendant le défilement, le survol ne joue pas : le pointeur balaye les
   vignettes sans qu'aucune animation ne démarre */
.rail.defile .video__cadre img, .rail.defile .video__cadre::after,
.rail.defile .video__lire, .rail.defile .video__titre { transition: none; }
.rail.defile .video:hover .video__cadre img { transform: scale(1.02); }
.rail.defile .video:hover .video__cadre::after { opacity: 1; }
.rail.defile .video:hover .video__lire { opacity: 0; }
/* pendant un pilotage à la molette ou à la barre, l'aimantation est coupée,
   sinon chaque petit déplacement est repris aussitôt */
.rail.sans-aimant { scroll-snap-type: none; }
.rail.tire * { pointer-events: none; }

/* Barre de progression du rail, saisissable à la souris et pilotable à la
   molette. Assez haute pour être attrapée sans viser. */
.piste {
  width: 100%; height: 6px; background: var(--trait);
  margin-top: 14px; position: relative; border-radius: var(--r-rond);
  cursor: pointer; touch-action: none;
}
.piste__curseur {
  position: absolute; top: 0; left: 0; height: 100%; width: 20%;
  background: var(--gris-f); border-radius: var(--r-rond);
  transition: background .3s var(--ease);
}
.piste:hover .piste__curseur, .piste.tire .piste__curseur { background: #fff; }
.piste.tire { cursor: grabbing; }

/* ---------------------------------------------------------------
   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;
  border-radius: var(--r-m);
  background: var(--surface-2);
  border: 1px solid var(--trait);
}
.video__cadre img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform .8s var(--ease);
}
/* Les vignettes sont le produit : elles restent en couleur. Le retrait de
   luminosité passe par un voile, pas par un filtre. Un filter: brightness()
   repeint toute l'image à chaque image d'animation : en faisant glisser le
   rail, le pointeur balayait les vignettes et déclenchait autant de repeints,
   ce qui saccadait. Un voile dont l'opacité change est composité par la carte
   graphique et ne coûte rien. */
.video__cadre::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, .16);
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.video:hover .video__cadre::after,
.video:focus-visible .video__cadre::after { opacity: 0; }
.video:hover .video__cadre img,
.video:focus-visible .video__cadre img { transform: scale(1.06); }

.video__lire {
  position: absolute; inset: 0; border-radius: inherit; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  background: rgba(0, 0, 0, .34);
  opacity: 0; transition: opacity .4s var(--ease);
}
/* le survol annonce où le clic emmène : ici, ou sur la chaîne */
.video__ou {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris-f);
}
.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: 14px; }
.pilier {
  background: var(--surface); padding: clamp(28px, 3vw, 44px); position: relative;
  border: 1px solid var(--trait); border-radius: var(--r-m);
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
.pilier:hover { background: var(--surface-2); border-color: var(--trait-clair); }
.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(var(--penche)); }
.pilier:nth-child(3):hover .pilier__forme { transform: rotate(calc(var(--penche) - 180deg)); }
.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); }

/* ---------------------------------------------------------------
   Mise en avant (aftermovie / travail phare)
   --------------------------------------------------------------- */
.phare { position: relative; border: 1px solid var(--trait); background: var(--surface); overflow: hidden; border-radius: var(--r-l); }
.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); }

/* ---------------------------------------------------------------
   Partenaires
   --------------------------------------------------------------- */
.partenaires { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

/* Chaque partenaire porte sa couleur dans --halo, posée par l'administration.
   Sans couleur, la carte se comporte comme avant, en gris. */
.partenaire {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--surface); padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--trait); border-radius: var(--r-m);
  transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.partenaire::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(130% 100% at 50% 0%, var(--halo, transparent), transparent 68%);
  opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
}
.partenaire:hover { background: var(--surface-2); border-color: var(--trait-clair); }
.partenaire:hover::before { opacity: .38; }
/* la couleur déborde légèrement de la carte, c'est ce qui fait « halo » */
.partenaire[style*="--halo"]:hover {
  border-color: color-mix(in srgb, var(--halo) 45%, var(--trait));
  box-shadow: 0 18px 60px -22px var(--halo);
}
@media (prefers-reduced-motion: reduce) {
  .partenaire, .partenaire::before { transition: none; }
}
.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(var(--penche)); transition: transform .5s var(--ease); }
.partenaire__lien:hover i { transform: rotate(calc(var(--penche) - 180deg)); }

/* ---------------------------------------------------------------
   Boutons
   --------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 34px; border-radius: var(--r-rond);
  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(var(--penche)); transition: transform .5s var(--ease); }
.bouton:hover i { transform: rotate(calc(var(--penche) - 180deg)); }
.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); }

/* ---------------------------------------------------------------
   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; }
/* Dans le rail, l'apparition ne déplace pas verticalement : le rail masque
   son débordement vertical, et les 26 px de translation faisaient rogner le
   bas des cartes tant qu'elles n'étaient pas révélées. */
.rail [data-apparait] { 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 { right: calc(var(--marge) * -1); top: 30%; width: clamp(300px, 52%, 700px); opacity: .045; }

.hors-ecran {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

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

/* Sur écran tactile, les liens de listes faisaient moins de 24 px de haut :
   le doigt tombait entre deux. On les épaissit sans toucher à la mise en page
   des écrans pilotés à la souris. */
@media (max-width: 760px), (pointer: coarse) {
  .nav__logo { padding: 7px 0; }
  .pied li a { display: inline-block; padding: 4px 0; }
  .pied li + li { margin-top: 4px; }
  .partenaire__lien { padding: 5px 0; }
  .pied__bas a, .carte-contact__note a { display: inline-block; padding: 3px 0; }
}

/* ---------------------------------------------------------------
   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; }

/* ---------------------------------------------------------------
   Pile de réalisations
   Les cartes sont empilées les unes derrière les autres ; la carte de
   devant se regarde, les suivantes se devinent. Un clic ou une flèche
   fait passer celle de devant derrière.
   --------------------------------------------------------------- */
.pile {
  position: relative;
  max-width: 1000px;
  /* la hauteur laisse la place à deux lignes de titre sous la vignette */
  aspect-ratio: 16 / 11.8;
  margin: 0 auto;
  perspective: 1400px;
}
.pile__carte {
  position: absolute; inset: 0;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-l); overflow: hidden;
  display: flex; flex-direction: column;
  transform-origin: 50% 100%;
  transition: transform .65s var(--ease), opacity .65s var(--ease), box-shadow .65s var(--ease);
  will-change: transform;
  cursor: pointer;
}
/* rang 0 = devant. Chaque carte derrière recule, rétrécit et s'efface. */
.pile__carte { --rang: 0; }
.pile__carte {
  transform: translateY(calc(var(--rang) * -18px)) scale(calc(1 - var(--rang) * .05));
  opacity: calc(1 - var(--rang) * .28);
  z-index: calc(10 - var(--rang));
  box-shadow: 0 26px 70px -40px rgba(0, 0, 0, .9);
}
.pile__carte[data-rang="0"] { cursor: pointer; }
.pile__carte:not([data-rang="0"]) { pointer-events: none; }
.pile__carte[data-sortante] { opacity: 0; transform: translateY(40px) scale(.94); }

.pile__media { position: relative; aspect-ratio: 16 / 9; background: var(--noir); flex: none; }
.pile__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.84) saturate(1.04); transition: filter .6s var(--ease); }
.pile__carte[data-rang="0"]:hover .pile__media img { filter: none; }
.pile__lire { position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.05)); transition: background .5s var(--ease); }
.pile__carte[data-rang="0"]:hover .pile__lire { background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0)); }
.pile__lire span {
  width: clamp(58px, 6vw, 82px); height: clamp(58px, 6vw, 82px); border-radius: 50%;
  background: var(--gris-f); color: var(--noir); display: grid; place-items: center;
  transition: transform .5s var(--ease);
}
.pile__carte[data-rang="0"]:hover .pile__lire span { transform: scale(1.08); }
.pile__lire svg { width: 22px; height: 22px; margin-left: 4px; }

.pile__pied { padding: clamp(18px, 2.4vw, 30px) clamp(20px, 3vw, 38px); border-top: 1px solid var(--trait); }
.pile__pied h3 {
  font-family: var(--display); font-size: clamp(17px, 2.1vw, 26px);
  text-transform: uppercase; line-height: 1.06; margin-top: 10px; overflow-wrap: break-word;
  /* un titre de vidéo peut être très long : deux lignes, puis on coupe */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pile__pied .etiquette { color: var(--gris-6); }

.pile-barre { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 26px; }
.pile-compte { font-size: 12.5px; letter-spacing: .12em; color: var(--gris-6); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .pile__carte { transition: none; } }
@media (max-width: 620px) { .pile { aspect-ratio: 16 / 14.5; } }

/* ---------------------------------------------------------------
   Carte de contact
   Le formulaire a été retiré à la demande du client : les messages
   arrivent désormais directement dans sa boîte, sans système
   intermédiaire à entretenir.
   --------------------------------------------------------------- */
.carte-contact {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-m); padding: clamp(28px, 3.4vw, 46px);
}
.carte-contact__adresse {
  display: block; margin: 14px 0 18px;
  font-family: var(--display); font-size: clamp(20px, 3.2cqi, 34px);
  line-height: 1.15; color: var(--gris-f); text-decoration: none;
  overflow-wrap: anywhere;
}
.carte-contact__adresse:hover { text-decoration: underline; text-underline-offset: 5px; }
.carte-contact p { font-size: 15px; line-height: 1.7; color: var(--gris-9); max-width: 46ch; }
.carte-contact__actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 22px; }
.carte-contact__note { font-size: 13px; line-height: 1.65; color: var(--gris-6); }
.carte-contact__note a { color: var(--gris-e); text-decoration: underline; text-underline-offset: 3px; }
.carte-contact__note a:hover { color: var(--gris-f); }