/* ==========================================================================
   A'RIEKA — Né entre deux étoiles
   Feuille de style unique. Organisation :
   1. Variables & reset
   2. Typographie de base
   3. Éléments réutilisables (boutons, titres de section, badges)
   4. Navigation
   5. Hero
   6. Album
   7. Clips
   8. Live & booking
   9. Rapémathiques (teaser + page dédiée)
   10. Bio
   11. Presse (page dédiée)
   12. Footer
   13. Animations & responsive
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */

:root {
  /* Couleurs. Le site est pensé en "nuit" : un noir profond legerement bleute,
     un blanc os (jamais du blanc pur, trop agressif sur fond noir) et un seul
     accent dore qui rappelle les etoiles du titre de l'album. */
  --noir: #06070b;
  --noir-2: #0b0d13;
  --nuit: #0d1424;
  --nuit-2: #131c30;
  --os: #f4f1ea;
  --gris: #8f939e;
  --gris-fonce: #5a5e69;
  --or: #d9a94e;
  --or-clair: #f0cd8a;
  --ligne: rgba(244, 241, 234, 0.12);
  --ligne-forte: rgba(244, 241, 234, 0.28);

  /* Typographie */
  --display: "Syne", "Trebuchet MS", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rythme vertical. clamp() = taille mini, taille fluide, taille maxi.
     Ca evite d'ecrire trois media queries pour chaque espacement. */
  --section-y: clamp(5rem, 12vh, 9rem);
  --gouttiere: clamp(1.25rem, 5vw, 3rem);
  --max: 1240px;

  /* Divers */
  --radius: 4px;
  --transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Compense la navigation fixe quand on arrive sur une ancre */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--noir);
  color: var(--os);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Accessibilite : contour visible uniquement au clavier */
:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

/* Lien d'evitement pour les lecteurs d'ecran et la navigation clavier */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gouttiere);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--or);
  color: var(--noir);
  font-weight: 600;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   2. TYPOGRAPHIE DE BASE
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* Filet de securite. Les titres sont dimensionnes en vw, donc leur taille
     suit la fenetre, pas la colonne qui les contient. Un mot long et
     insecable comme "Rapemathiques" reclamait 784px dans une colonne de
     426px et debordait sur le contenu voisin. Un mot ne peut plus sortir de
     sa boite : il se coupe. Le point de coupure propre est indique au cas
     par cas dans le HTML avec un trait d'union conditionnel (­). */
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

/* Le "sur-titre" : petite ligne en majuscules tres espacees, au-dessus
   des grands titres. C'est ce qui donne le cote editorial / pochette. */
.surtitre {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.surtitre::before {
  content: "";
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: currentColor;
  flex: none;
}

.surtitre--centre {
  justify-content: center;
}

/* ==========================================================================
   3. ÉLÉMENTS RÉUTILISABLES
   ========================================================================== */

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

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--nuit {
  /*
    Le dégradé part du noir du fond, monte vers le bleu nuit, puis y revient.
    Avant, il commençait et finissait en bleu : contre le fond noir, ça faisait
    une couture nette et visible en haut et en bas de chaque section.

    Le fondu fait 180px de haut et de bas, pas un pourcentage, pour que sa
    douceur soit la même quelle que soit la hauteur de la section. Le min()
    le réduit sur les sections courtes, où 180px mangeraient tout le bleu.
  */
  --fondu: min(180px, 15%);
  background: linear-gradient(
    180deg,
    var(--noir) 0%,
    var(--nuit) var(--fondu),
    var(--nuit-2) calc(100% - var(--fondu)),
    var(--noir) 100%
  );
}

.section--noir2 {
  background: var(--noir-2);
}

.section__entete {
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.section__titre {
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
  margin-top: 1.25rem;
}

.section__intro {
  max-width: 58ch;
  margin-top: 1.5rem;
  color: var(--gris);
  font-size: 1.0625rem;
}

/* Boutons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.9375rem 1.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform 0.2s;
  will-change: transform;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--or {
  background: var(--or);
  color: var(--noir);
}

.btn--or:hover {
  background: var(--or-clair);
}

.btn--fantome {
  border-color: var(--ligne-forte);
  color: var(--os);
}

.btn--fantome:hover {
  border-color: var(--os);
  background: rgba(244, 241, 234, 0.06);
}

.btn svg {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Badges des plateformes de streaming ---------------------------------- */

/* Ce sont les badges officiels des marques : ils portent deja leur propre
   forme (pilule blanche), leurs couleurs et leurs proportions. On ne leur
   ajoute donc ni cadre ni fond, ce qui ferait un bouton dans un bouton.
   Le CSS ne gere plus que la grille et le survol. */
.plateformes {
  display: grid;
  /* Deux colonnes fixes plutot qu'un auto-fit : avec quatre badges, un
     auto-fit bascule a trois colonnes des que la place le permet et laisse
     un badge seul sur la deuxieme ligne. Le 2x2 reste equilibre partout. */
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.plateforme {
  display: block;
  /* Arrondi cale sur celui du badge, pour que le contour de focus clavier
     epouse sa forme au lieu de dessiner un rectangle autour. */
  border-radius: 999px;
  transition: transform 0.2s, filter var(--transition);
}

.plateforme img {
  width: 100%;
  height: auto;
  display: block;
}

.plateforme:hover {
  transform: translateY(-3px);
  filter: brightness(1.07);
}

.plateforme:active {
  transform: translateY(0);
}

/* Image manquante : tant que le vrai fichier n'est pas dans /images,
   on affiche un bloc sobre avec le nom du fichier attendu.
   La classe est ajoutee par script.js quand le chargement echoue. */
.img-absente {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--nuit) 0%,
    var(--noir-2) 50%,
    var(--nuit) 100%
  );
  border: 1px dashed var(--ligne-forte);
  min-height: 180px;
}

/* Les images de galerie remplissent leur conteneur : le bloc de
   remplacement doit faire pareil. */
.galerie__item .img-absente {
  width: 100%;
  height: 100%;
}

/* Sur une facade video, on n'annonce pas une image mais un lien manquant */
.video.img-absente {
  cursor: default;
}

.video.img-absente::after {
  content: attr(data-fichier);
  padding-bottom: 3.5rem;
}

.img-absente::after {
  content: "IMAGE À FOURNIR — " attr(data-fichier);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gris-fonce);
  line-height: 1.6;
}

/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background var(--transition), border-color var(--transition),
    backdrop-filter var(--transition);
  border-bottom: 1px solid transparent;
}

/* Etat ajoute par script.js apres 60px de scroll */
.nav.est-defile {
  background: rgba(6, 7, 11, 0.85);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--ligne);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 4.5rem;
}

.nav__marque {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  flex: none;
}

.nav__marque em {
  color: var(--or);
  font-style: normal;
}

.nav__liens {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.nav__lien {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  position: relative;
  padding-block: 0.5rem;
  transition: color var(--transition);
  white-space: nowrap;
}

.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  width: 100%;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav__lien:hover,
.nav__lien.est-actif {
  color: var(--os);
}

.nav__lien:hover::after,
.nav__lien.est-actif::after {
  transform: scaleX(1);
}

.nav__cta {
  padding: 0.625rem 1.125rem;
  font-size: 0.6875rem;
}

/* Bouton hamburger, visible seulement en mobile */
.nav__burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-right: -0.5rem;
}

.nav__burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--os);
  transition: transform var(--transition), opacity 0.2s;
}

.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ==========================================================================
   5. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  padding-top: 7rem;
}

/* Le ciel etoile est dessine dans un <canvas> par script.js.
   Il reste en fond, purement decoratif. */
/* Note : un <canvas> est un element remplace. En position absolue avec
   inset:0 mais width:auto, le navigateur retient sa taille intrinseque
   (celle de ses attributs width/height) et non celle du parent. D'ou le
   width/height 100% explicite, sinon le canvas se retrouve a 0 pixel. */
.hero__ciel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Le portrait occupe la moitie droite en desktop, et le haut en mobile.

   Le fondu est volontairement court (14% a gauche, 30% en bas). La photo
   fournie est en noir et blanc sur fond noir pur : elle se marie deja avec
   le fond du site, un long degrade viendrait manger le visage sans rien
   apporter. On garde juste assez de fondu pour effacer la limite du cadre. */
.hero__portrait {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 auto;
  width: min(62%, 900px);
  height: 100%;
  object-fit: cover;
  object-position: center center;
  -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 14%,
      #000 100%
    ),
    linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%),
    linear-gradient(180deg, #000 70%, transparent 100%);
  mask-composite: intersect;
}

.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
      120% 90% at 15% 60%,
      rgba(6, 7, 11, 0.92) 0%,
      rgba(6, 7, 11, 0.55) 45%,
      transparent 75%
    ),
    linear-gradient(180deg, rgba(6, 7, 11, 0.7) 0%, transparent 30%),
    linear-gradient(0deg, var(--noir) 0%, transparent 35%);
  pointer-events: none;
}

.hero__contenu {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero__texte {
  max-width: 50rem;
  /* Conteneur de requete : le nom de l'artiste se dimensionne d'apres cette
     colonne, pas d'apres la fenetre. Voir .hero__nom juste en dessous. */
  container-type: inline-size;
}

.hero__titre {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Le nom de l'artiste : tres grand, tres serre. C'est le logotype.

   Dimensionne en cqi, donc en pourcentage de la largeur de sa colonne.
   Avec une taille en vw, le nom reclamait 1002px dans une colonne qui n'en
   offrait que 736 a 1440px de large : il se cassait en plein milieu, en
   "A'RIE" puis "KA". Un nom d'artiste coupe en deux, c'est le genre de
   detail qui decredibilise tout le reste.

   "A'RIEKA" en Syne 800 occupe 6,26 fois sa taille de police, tracking
   compris. Pour tenir sur une ligne il faut donc au plus 100/6,26 = 16% de
   la largeur de la colonne. On prend 15,5% pour garder une marge. */
.hero__nom {
  /* Repli pour les navigateurs sans container queries */
  font-size: clamp(3rem, 0.5rem + 5.5vw, 7rem);
  font-size: clamp(3rem, 15.5cqi, 10rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.hero__nom span {
  color: var(--or);
}

/* Le titre de l'album, en contrepoint : plus petit, plus aere, en capitales
   espacees. Le contraste entre les deux echelles fait tout le travail. */
.hero__album {
  font-family: var(--sans);
  font-size: clamp(0.875rem, 0.7rem + 0.9vw, 1.375rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--os);
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
  padding-top: clamp(1rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--ligne);
  display: block;
}

.hero__accroche {
  margin-top: 1.75rem;
  max-width: 34rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  color: var(--gris);
}

.hero__accroche strong {
  color: var(--os);
  font-weight: 500;
}

.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

/* Indicateur de scroll, discret, en bas a droite */
.hero__scroll {
  position: absolute;
  right: var(--gouttiere);
  bottom: clamp(3rem, 8vh, 6rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-fonce);
  writing-mode: vertical-rl;
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(180deg, var(--gris-fonce), transparent);
}

/* ==========================================================================
   6. ALBUM
   ========================================================================== */

.album {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.album__colonne-gauche {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* La pochette avec une lueur doree derriere, comme un vinyle eclaire */
.album__pochette-cadre {
  position: relative;
}

.album__pochette-cadre::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(217, 169, 78, 0.22) 0%,
    transparent 65%
  );
  z-index: -1;
}

.album__pochette {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--ligne);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9);
}

.album__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}

.album__meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.album__meta span::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--or);
}

/* Le lecteur Spotify. On force une hauteur et on laisse l'iframe remplir. */
.album__lecteur {
  border-radius: 12px;
  overflow: hidden;
  background: var(--noir-2);
  border: 1px solid var(--ligne);
}

.album__lecteur iframe {
  width: 100%;
  height: 152px;
  border: 0;
  display: block;
}

/* Tracklist ------------------------------------------------------------ */

.tracklist {
  counter-reset: piste;
  border-top: 1px solid var(--ligne);
}

.tracklist__item {
  counter-increment: piste;
  border-bottom: 1px solid var(--ligne);
  transition: background var(--transition);
}

.tracklist__item:hover {
  background: rgba(244, 241, 234, 0.03);
}

.tracklist__ligne {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9375rem 0.75rem;
  width: 100%;
  text-align: left;
}

.tracklist__num {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gris-fonce);
  min-width: 1.75rem;
  font-variant-numeric: tabular-nums;
}

.tracklist__num::before {
  content: counter(piste, decimal-leading-zero);
}

.tracklist__titre {
  flex: 1;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.tracklist__feat {
  color: var(--gris);
  font-weight: 400;
  font-size: 0.875rem;
}

/* Badge "clip" sur les titres qui ont une video */
.tracklist__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(217, 169, 78, 0.4);
  border-radius: 2px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  flex: none;
  transition: background var(--transition);
}

.tracklist__item:hover .tracklist__badge {
  background: rgba(217, 169, 78, 0.14);
}

/* ==========================================================================
   7. CLIPS
   ========================================================================== */

.clips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* "Facade" video : on n'insere PAS l'iframe YouTube au chargement.
   On affiche la miniature, et script.js remplace par l'iframe au clic.
   Deux benefices : la page charge beaucoup plus vite, et aucun cookie
   YouTube n'est depose avant que l'internaute ait choisi de lire. */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--ligne);
  background: var(--noir-2);
  width: 100%;
  cursor: pointer;
  display: block;
}

.video__miniature {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--transition);
  opacity: 0.75;
}

.video:hover .video__miniature {
  transform: scale(1.04);
  opacity: 1;
}

.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}

.video__play span {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(6, 7, 11, 0.6);
  border: 1px solid var(--ligne-forte);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  transition: background var(--transition), border-color var(--transition),
    transform var(--transition);
}

.video:hover .video__play span {
  background: var(--or);
  border-color: var(--or);
  transform: scale(1.08);
}

.video__play svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--os);
  margin-left: 3px;
  transition: fill var(--transition);
}

.video:hover .video__play svg {
  fill: var(--noir);
}

/* Bandeau titre en bas de la vignette */
.video__legende {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 2.5rem 1.25rem 1.125rem;
  background: linear-gradient(0deg, rgba(6, 7, 11, 0.95), transparent);
  text-align: left;
}

.video__titre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.video__sous-titre {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin-top: 0.375rem;
}

/* Quand script.js a injecte l'iframe */
.video.est-active .video__miniature,
.video.est-active .video__play,
.video.est-active .video__legende {
  display: none;
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   8. LIVE & BOOKING
   ========================================================================== */

.live__haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

/* La formation scenique, presentee comme un generique */
.formation {
  display: grid;
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  overflow: hidden;
}

.formation__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.0625rem 1.375rem;
  background: var(--noir);
}

.formation__role {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-fonce);
}

.formation__nom {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  text-align: right;
}

/* Galerie photos live.

   La grille fait 6 colonnes, ce qui permet de melanger un paysage et un
   portrait sur la meme ligne SANS recadrage brutal. Le calcul :
   un paysage 3/2 sur 4 colonnes (donc 4/6 de la largeur) a pour hauteur
   (4/6)/1,5 = 0,444 de la largeur. Un portrait 3/4 sur 2 colonnes a pour
   hauteur (2/6)/0,75 = 0,444 aussi. Les deux hauteurs tombent juste, la
   ligne est alignee sans rien forcer. */
.galerie {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

.galerie__item {
  overflow: hidden;
  border-radius: var(--radius);
  /* Les aspect-ratio ci-dessous donnent des hauteurs proches mais pas
     identiques, parce qu'un element qui couvre 4 colonnes couvre aussi
     3 gouttieres alors qu'un element sur 2 colonnes n'en couvre qu'une.
     Ce height:100% force chaque case a remplir la hauteur de sa ligne :
     les bords bas sont alors parfaitement alignes, et object-fit absorbe
     la difference. */
  height: 100%;
}

/* Le plan large du groupe : c'est l'image qui prouve le format cinq
   musiciens, elle mene la galerie. */
.galerie__item--bande {
  grid-column: span 4;
  aspect-ratio: 3 / 2;
}

.galerie__item--portrait {
  grid-column: span 2;
  aspect-ratio: 3 / 4;
}

.galerie__item--demi {
  grid-column: span 3;
  aspect-ratio: 3 / 2;
}

/* Les photos live fournies sont un melange de noir et blanc et de couleur
   (lumieres de scene violettes et orangees). Melanger les deux dans une
   meme galerie donne l'impression d'un choix subi. On uniformise en noir et
   blanc, et la couleur se revele au survol. */
.galerie__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter var(--transition);
}

.galerie__item:hover img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1);
}

/* Credit photo. Obligatoire des lors qu'on utilise le travail d'un
   photographe, et de toute facon c'est la moindre des choses. */
.credit {
  margin-top: 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-fonce);
}

.credit a {
  color: var(--gris);
  border-bottom: 1px solid var(--ligne);
  transition: color var(--transition), border-color var(--transition);
}

.credit a:hover {
  color: var(--or);
  border-color: var(--or);
}

/* Bloc booking : le point de conversion de la page.
   Encadre, contraste, avec une seule action evidente. */
.booking {
  margin-top: clamp(3rem, 7vw, 5rem);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(
    135deg,
    rgba(217, 169, 78, 0.07) 0%,
    rgba(244, 241, 234, 0.02) 100%
  );
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.booking__titre {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}

.booking__texte {
  margin-top: 1rem;
  color: var(--gris);
  max-width: 46ch;
}

.booking__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

.booking__mail {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  color: var(--or);
  white-space: nowrap;
  transition: color var(--transition);
}

.booking__mail:hover {
  color: var(--or-clair);
}

/* ==========================================================================
   9. RAPÉMATHIQUES
   ========================================================================== */

/* Le teaser sur la page d'accueil. Cette section doit se sentir comme un
   univers un peu a part, sans casser la charte : on garde le noir mais on
   passe l'accent en craie blanche facon tableau noir. */
.rapemath {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.rapemath .surtitre {
  color: var(--os);
}

/* Les deux colonnes servent de reference de mesure a leur contenu. */
.rapemath > * {
  container-type: inline-size;
}

/* Titre en escalier, repris de la couverture du livre Larousse.

       Rap
          &
             Mathiques

   Les trois morceaux sont des <span> passes en blocs par le flex en colonne.
   Le decalage est exprime en em, donc relatif a la taille du titre : il
   grandit et retrecit avec lui, la marche d'escalier garde toujours la meme
   proportion quel que soit l'ecran. En pixels, elle serait enorme sur mobile
   et ridicule sur grand ecran. */
.titre-escalier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.92;

  /* Encore le meme piege que pour le nom de l'artiste et les compteurs :
     .section__titre est dimensionne en vw, donc d'apres la fenetre. Ce titre
     vit dans la colonne gauche d'une grille a deux colonnes. A 992px de
     large, "Mathiques" reclamait 517px plus 105px de decalage dans une
     colonne de 426px, soit 196px de debordement.

     On repasse donc en cqi : la taille suit la colonne. "Mathiques" plus sa
     marche d'escalier occupe environ 10,1 fois la taille de police, il faut
     donc au plus 100/10,1 = 9,9% de la largeur de colonne. On prend 9,5%. */

  /* Le plancher du clamp est bas (1,375rem) exprès. Il n'entre en jeu que
     sous 245px de colonne, c'est-à-dire sur les écrans les plus étroits du
     marché. A 1,75rem, le titre y débordait au lieu de rétrécir. Sur un
     téléphone courant, c'est la valeur en cqi qui s'applique, jamais le
     plancher. */

  /* Repli pour les navigateurs sans container queries */
  font-size: clamp(1.375rem, 0.9rem + 2.2vw, 2.75rem);
  font-size: clamp(1.375rem, 9cqi, 4.5rem);
}

/* Regle absolue : aucun de ces trois mots ne doit jamais se couper.
   Le h2 porte un "overflow-wrap: break-word" general, utile pour eviter
   qu'un titre deborde de sa colonne, mais ici il autorisait "Mathiques" a
   se casser en "Mathique" + "s". Le nowrap le neutralise mot par mot :
   plutot que de casser, le texte reste entier. C'est la taille de police,
   calculee sur la largeur de la colonne juste au-dessus, qui garantit qu'il
   tient. */
.titre-escalier span {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.titre-escalier span:nth-child(2) {
  margin-left: 0.85em;
}

.titre-escalier span:nth-child(3) {
  margin-left: 1.7em;
}

/* Compteurs d'audience : la preuve sociale du projet */
.chiffres {
  display: grid;
  /* 150px et non 120 : a 120, une valeur de quatre caracteres comme "215k"
     depassait de sa case a la taille de police maximale. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  margin-top: 2.5rem;
}

.chiffre {
  background: var(--noir-2);
  padding: 1.5rem 1rem;
  /* Declare la case comme "conteneur de requete". Ca permet a son contenu
     de se dimensionner en fonction de la largeur de la case elle-meme,
     avec l'unite cqi, plutot qu'en fonction de la fenetre. */
  container-type: inline-size;
}

/* Le probleme que ca resout :

   Avec une taille en vw, la police suivait la largeur de la FENETRE, alors
   que la case suit la largeur de sa COLONNE. Les deux ne varient pas
   ensemble : sur l'accueil, la grille est coincee dans la colonne gauche
   d'une mise en page en deux colonnes, donc la case reste etroite pendant
   que la fenetre, elle, s'elargit. La police grossissait dans une case qui
   ne bougeait pas, et "2024" finissait par depasser.

   Avec cqi, la police est un pourcentage de la largeur de la case. Le
   rapport entre le texte et son cadre devient constant, quelle que soit la
   mise en page autour. Le debordement devient impossible par construction.

   24cqi : une valeur de quatre caracteres en Syne 800 occupe environ
   4,05 fois sa taille de police. 4,05 x 24% = 97% de la case. */
.chiffre__valeur {
  font-family: var(--display);
  font-weight: 800;
  /* Repli pour les navigateurs sans container queries (avant 2022-2023) :
     une taille volontairement prudente, qui tient dans tous les cas. */
  font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.625rem);
  /* Puis la vraie regle, qui ecrase la precedente la ou elle est comprise. */
  font-size: clamp(1.25rem, 24cqi, 2.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.chiffre__label {
  margin-top: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-fonce);
}

/* Liste des fiches de revision (page rapemathiques.html) */
.fiches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.fiche {
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  background: var(--noir-2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color var(--transition), transform 0.2s,
    background var(--transition);
}

.fiche:hover {
  border-color: var(--ligne-forte);
  background: #10131b;
  transform: translateY(-3px);
}

.fiche__num {
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--or);
  text-transform: uppercase;
}

.fiche__titre {
  font-size: 1.1875rem;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.2;
}

.fiche__niveau {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-fonce);
}

/* Le livre paru chez Larousse.

   C'est la piece de credibilite la plus forte de tout le site : un editeur
   national, une validation par une inspectrice pedagogique. Il merite un
   bloc a lui, pas une ligne perdue dans un paragraphe. */
.livre {
  display: grid;
  /* Plafonne a 920px : au-dela, la colonne de texte depasserait la longueur
     de ligne confortable (environ 75 caracteres) et deviendrait penible. */
  max-width: 920px;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: linear-gradient(
    135deg,
    rgba(217, 169, 78, 0.06) 0%,
    rgba(244, 241, 234, 0.02) 100%
  );
}

.livre__couverture {
  display: block;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.85);
  transition: transform var(--transition);
}

.livre__couverture:hover {
  transform: translateY(-4px);
}

.livre__couverture img {
  width: 100%;
  display: block;
}

.livre__titre {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  margin-top: 1rem;
}

.livre__sous-titre {
  margin-top: 0.625rem;
  color: var(--os);
  font-size: 1.0625rem;
}

.livre__texte {
  margin-top: 1.125rem;
  color: var(--gris);
  font-size: 0.9375rem;
}

/* Fiche technique du livre. Un <dl> plutot qu'un tableau : c'est
   semantiquement une liste de paires terme/definition, et ca se lit
   correctement dans un lecteur d'ecran. */
.livre__fiche {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  border-top: 1px solid var(--ligne);
  padding-top: 1.25rem;
}

.livre__fiche dt {
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: var(--gris-fonce);
  align-self: center;
}

.livre__fiche dd {
  color: var(--gris);
}

/* La mention de validation officielle, mise en evidence */
.livre__validation {
  margin-top: 1.5rem;
  padding: 0.875rem 1.125rem;
  border-left: 2px solid var(--or);
  background: rgba(217, 169, 78, 0.06);
  font-size: 0.875rem;
  color: var(--or-clair);
}

@media (max-width: 620px) {
  .livre {
    grid-template-columns: 1fr;
  }

  .livre__couverture {
    max-width: 200px;
  }
}

/* Catalogue des lecons, groupe par niveau ------------------------------ */

/* Quarante lecons a afficher : des cartes seraient interminables. Une liste
   dense, une colonne par niveau, se parcourt d'un coup d'oeil. Un eleve de
   5e trouve sa colonne et lit dix lignes, il n'a pas a filtrer. */
.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

.niveau__titre {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1.75rem;
  padding-bottom: 0.875rem;
  border-bottom: 2px solid var(--or);
}

/* Le chiffre et son exposant forment un seul élément de flex, sinon le
   "gap" du conteneur s'insère entre le 6 et le e. */
.niveau__label {
  display: inline-block;
}

.niveau__titre sup {
  font-size: 0.45em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.05em;
}

.niveau__compte {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-fonce);
  margin-left: auto;
}

.lecon {
  border-bottom: 1px solid var(--ligne);
}

.lecon a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.25rem;
  transition: color var(--transition), padding-left var(--transition);
}

.lecon a:hover {
  color: var(--or);
  padding-left: 0.625rem;
}

.lecon__nom {
  font-size: 0.9375rem;
  line-height: 1.35;
}

/* font-variant-numeric: tabular-nums aligne les chiffres sur une largeur
   fixe : la colonne des durees reste droite au lieu de danser. */
.lecon__duree {
  font-size: 0.75rem;
  color: var(--gris-fonce);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* Bandeau "en construction" pour signaler a Guillaume ce qui manque.
   A retirer avant mise en ligne. */
.a-completer {
  border: 1px dashed var(--or);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  background: rgba(217, 169, 78, 0.06);
  font-size: 0.875rem;
  color: var(--or-clair);
}

.a-completer strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  margin-bottom: 0.375rem;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   10. BIO
   ========================================================================== */

.bio {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.bio__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  filter: grayscale(0.2);
}

.bio__texte p + p {
  margin-top: 1.375rem;
}

.bio__texte p {
  color: var(--gris);
}

.bio__texte p:first-of-type {
  color: var(--os);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Citation / punchline mise en exergue */
.punchline {
  margin-top: 2.5rem;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--or);
}

.punchline blockquote {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.punchline cite {
  display: block;
  margin-top: 0.875rem;
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-fonce);
}

/* ==========================================================================
   11. PRESSE (page dédiée)
   ========================================================================== */

/* En-tete des pages secondaires : plus compact que le hero de l'accueil */
.entete-page {
  padding-top: clamp(8rem, 18vh, 12rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--ligne);
}

.entete-page__ciel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.entete-page .contenant {
  position: relative;
  z-index: 1;
}

/* La colonne sert de reference de mesure au titre juste en dessous. */
.entete-page .contenant {
  container-type: inline-size;
}

/* Le titre est coupe en deux morceaux poses l'un sur l'autre :

       RAPÉ-
       MATHIQUES

   "Rapé-" garde la taille normale du titre. "Mathiques" prend la plus
   petite des deux valeurs : cette meme taille, ou celle qui lui permet de
   tenir dans la colonne. Sur grand ecran les deux lignes sont donc de la
   meme taille, sur telephone la seconde retrecit juste ce qu'il faut.

   Sans ca, "mathiques" reclamait 385px dans une colonne de 335 et se
   coupait en "mathiq" + "ues", soit un titre sur trois lignes.

   Le ratio, mesure sur le texte reellement rendu : le titre est en
   majuscules, et "MATHIQUES" occupe 9,79 fois sa taille de police, tracking
   compris. Il faut donc au plus 100/9,79 = 10,2% de la largeur de colonne.
   On prend 9,8% pour garder une marge.

   Piege a retenir : la premiere mesure avait ete faite sur "mathiques" en
   minuscules, alors que text-transform affiche des capitales, plus larges.
   Toujours mesurer le texte tel qu'il s'affiche, pas tel qu'il est ecrit
   dans le HTML. */
.entete-page__titre {
  font-size: clamp(2.75rem, 1.5rem + 6vw, 6rem);
  margin-top: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.95;
}

/* Aucun des deux morceaux ne doit se couper : c'est la taille de police
   qui garantit qu'ils tiennent, pas une cesure de secours. */
.entete-page__titre span {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* "RAPÉ-" garde la taille normale du titre, c'est voulu. Le plafond en cqi
   ne mord que sous 300px d'ecran, ou il depasserait sinon de sa colonne.
   Aucun telephone actuel n'est aussi etroit, c'est une simple securite.
   Ratio mesure : "RAPÉ-" occupe 5,08 fois sa taille de police. */
.entete-page__titre span:first-child {
  font-size: min(clamp(2.75rem, 1.5rem + 6vw, 6rem), 18.9cqi);
}

.entete-page__titre .titre__fin {
  /* Repli pour les navigateurs sans container queries */
  font-size: clamp(1.75rem, 0.8rem + 3.9vw, 6rem);
  font-size: min(clamp(2.75rem, 1.5rem + 6vw, 6rem), 9.8cqi);
}

.entete-page__intro {
  margin-top: 1.75rem;
  max-width: 52ch;
  color: var(--gris);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
}

.retour {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color var(--transition), gap var(--transition);
}

.retour:hover {
  color: var(--or);
  gap: 1rem;
}

/* Liste des articles de presse */
.articles {
  border-top: 1px solid var(--ligne);
}

.article {
  border-bottom: 1px solid var(--ligne);
}

.article__lien {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0.5rem;
  transition: background var(--transition), padding-left var(--transition);
}

.article__lien:hover {
  background: rgba(244, 241, 234, 0.03);
  padding-left: 1.25rem;
}

.article__media {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
}

.article__titre {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.article__date {
  font-size: 0.75rem;
  color: var(--gris-fonce);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.article__fleche {
  color: var(--gris-fonce);
  transition: color var(--transition), transform var(--transition);
}

.article__lien:hover .article__fleche {
  color: var(--or);
  transform: translateX(4px);
}

/* Kit presse telechargeable */
.kit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.kit__item {
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color var(--transition);
}

.kit__item:hover {
  border-color: var(--or);
}

.kit__titre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
}

.kit__detail {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gris);
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.footer {
  border-top: 1px solid var(--ligne);
  padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem;
  background: var(--noir);
}

.footer__haut {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--ligne);
}

.footer__nom {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.footer__nom span {
  color: var(--or);
}

.footer__baseline {
  margin-top: 1.25rem;
  color: var(--gris);
  max-width: 34ch;
}

.footer__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2.5rem;
}

.footer__titre {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-fonce);
  margin-bottom: 1.125rem;
}

.footer__liste li + li {
  margin-top: 0.625rem;
}

.footer__liste a {
  font-size: 0.9375rem;
  color: var(--gris);
  transition: color var(--transition);
}

.footer__liste a:hover {
  color: var(--or);
}

.footer__bas {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--gris-fonce);
}

.footer__bas a:hover {
  color: var(--or);
}

/* ==========================================================================
   13. ANIMATIONS & RESPONSIVE
   ========================================================================== */

/* Apparition au scroll. L'element part legerement en bas et transparent,
   script.js ajoute .est-visible quand il entre dans l'ecran.

   Important : la regle est prefixee par .js, une classe posee sur <html>
   par un mini script dans le <head>. Sans JavaScript, la classe n'existe
   pas, donc l'opacity:0 ne s'applique jamais et tout le contenu reste
   visible. C'est la difference entre une animation et une page blanche. */
.js .reveler {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js .reveler.est-visible {
  opacity: 1;
  transform: none;
}

/* Petits delais en cascade pour les grilles */
.reveler[data-delai="1"] { transition-delay: 0.08s; }
.reveler[data-delai="2"] { transition-delay: 0.16s; }
.reveler[data-delai="3"] { transition-delay: 0.24s; }

/* --- Ecrans intermediaires : elargir le portrait ---

   Le portrait est cadre en "cover". Plus son cadre est etroit et haut, plus
   le recadrage horizontal est severe. Sur un ecran de 990px de large et
   910px de haut, le cadre a 62% ne laissait voir que 44% de la largeur de
   la photo, soit le visage avec les oreilles coupees au ras du bord.
   En elargissant le cadre, le recadrage se detend et la tete respire.
   Aucun risque pour la lisibilite du texte : les bords de la photo sont
   en noir pur, et le voile radial assombrit deja la zone de gauche. */
@media (max-width: 1100px) {
  .hero__portrait {
    width: min(88%, 900px);
  }
}

/* --- Tablette --- */
@media (max-width: 960px) {
  .album,
  .live__haut,
  .rapemath,
  .bio,
  .footer__haut {
    grid-template-columns: 1fr;
  }

  .album__colonne-gauche {
    position: static;
    max-width: 26rem;
  }

  .booking {
    grid-template-columns: 1fr;
  }

  .booking__actions {
    align-items: flex-start;
  }

  .bio__portrait {
    max-width: 24rem;
  }

  .article__lien {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.625rem;
  }

  /* En mobile, le média et le titre passent sur toute la largeur,
     la date et la flèche se partagent la dernière ligne. */
  .article__media,
  .article__titre {
    grid-column: 1 / -1;
  }
}

/* --- Mobile : la navigation devient un panneau plein ecran --- */
@media (max-width: 800px) {
  .nav__burger {
    display: flex;
  }

  .nav__liens {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    height: calc(100svh - 4.5rem);
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    background: rgba(6, 7, 11, 0.98);
    backdrop-filter: blur(20px);
    /* Ferme par defaut : on translate hors ecran plutot que display:none
       pour garder une transition fluide. */
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 2rem var(--gouttiere);
  }

  .nav__liens.est-ouvert {
    transform: none;
  }

  .nav__lien {
    font-size: 1.125rem;
    letter-spacing: 0.14em;
  }

  .nav__cta {
    margin-top: 1rem;
    padding: 1rem 2rem;
    font-size: 0.8125rem;
  }

  /* On bloque le scroll du fond quand le menu est ouvert */
  body.menu-ouvert {
    overflow: hidden;
  }
}

@media (max-width: 700px) {
  /* En mobile, on abandonne le hero en calque (photo en fond, texte
     par-dessus) pour un hero empile : la photo d'abord, le texte dessous.

     Pourquoi ce changement plutot qu'un simple reglage de degrade : sur un
     ecran de 375x812, la photo demandait 503px de haut et le bloc de texte
     442px, soit 945px a placer dans 812. Les deux se chevauchaient sur
     199px, pile au niveau du visage. Aucun degrade ne rattrape ca
     proprement, il fallait changer de structure.

     La photo passe donc dans le flux, en carre. Un cadre carre ne recadre
     que 33% de la largeur de l'image (contre 70% dans un cadre plein
     ecran), donc la tete tient largement. Le texte suit, remonte de 2rem
     pour s'installer dans le fondu du bas. */
  .hero {
    display: block;
    min-height: 0;
    padding-top: 4.5rem;
    padding-bottom: clamp(2.5rem, 8vw, 4rem);
  }

  .hero__portrait {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-position: center center;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  }

  .hero__contenu {
    margin-top: -2rem;
  }

  /* Le voile radial ne servait qu'a assombrir le fond derriere le texte.
     Le texte n'est plus sur la photo, il ne sert plus a rien. */
  .hero__voile {
    display: none;
  }

  .hero__scroll {
    display: none;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  /* En mobile : le plan large et le portrait prennent toute la largeur,
     les deux paysages restants se partagent une ligne. */
  .galerie {
    grid-template-columns: repeat(2, 1fr);
  }

  .galerie__item--bande {
    grid-column: span 2;
  }

  .galerie__item--portrait {
    grid-column: span 2;
    aspect-ratio: 4 / 5;
  }

  .galerie__item--demi {
    grid-column: span 1;
  }

  .formation__ligne {
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-start;
  }

  .formation__nom {
    text-align: left;
  }
}

/* --- Respect des preferences d'accessibilite --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveler {
    opacity: 1;
    transform: none;
  }
}

/* --- Impression : utile pour un programmateur qui imprime la fiche --- */
@media print {
  .nav,
  .hero__ciel,
  .hero__scroll,
  .video__play {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}