/* =============================================================================
   STYLE — Collectif TKND
   =============================================================================
   Ordre du fichier :
     1. @font-face          polices auto-hébergées
     2. Reset
     3. Accessibilité       skip-link, focus, reduced-motion
     4. Primitives          .container, .grid, .btn, .stack
     5. Typographie         titres de section, signature « NOS … . »
     6. Sections            alternance de fonds papier / noir / rouge
     7. Header
     8. Footer
     9. Animations          états d'entrée pilotés par IntersectionObserver
    10. Landing            hero, « Qui sommes-nous ? », activités, newsletter
    11. Pages légales
    12. 404
    13. Media queries

   Aucune couleur ni police en dur ici : tout passe par css/tokens.css.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. @font-face
   Polices auto-hébergées : aucune requête vers Google au chargement (RGPD).
   Elles vivent ici et non dans tokens.css, qui ne contient que le :root.
   Sous-ensembles latin et latin-ext — le français a besoin du second (œ, Ÿ,
   caractères composés). font-display: swap pour ne jamais bloquer le rendu.
-------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/anton-latin-ext.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-300-latin-ext.woff2') format('woff2');
  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;
}

/* -----------------------------------------------------------------------------
   2. RESET
-------------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-light);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  overflow-x: hidden;
}

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

/* Les <img> portent width/height en attributs (réservation de place, évite le
   décalage de mise en page). height:auto empêche la déformation quand le CSS
   contraint la largeur. */
img {
  height: auto;
}

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

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

address {
  font-style: normal;
}

/* -----------------------------------------------------------------------------
   3. ACCESSIBILITÉ
-------------------------------------------------------------------------------- */

/* Skip-link : premier élément focusable du document. Hors écran tant qu'il n'a
   pas le focus — jamais display:none, qui le retirerait de l'ordre de tabulation. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-skip-link);
  transform: translateY(-120%);
  padding: var(--space-xs) var(--space-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-body);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

/* :focus-visible plutôt que :focus — le contour n'apparaît qu'au clavier, pas au
   clic souris. Le contour est doublé d'un liseré clair pour rester visible aussi
   bien sur le fond papier que sur le noir et le rouge. */
:focus-visible {
  outline: var(--focus-width) solid var(--accent-text);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* prefers-reduced-motion — moitié CSS de l'exigence (l'autre moitié est en JS,
   dans main.js). Tout est posé à sa position finale, sans mouvement.
   Les durées sont neutralisées à la racine : un seul endroit à couper, plutôt
   qu'une chasse aux transitions dans tout le fichier. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --stagger: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .is-animatable {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* -----------------------------------------------------------------------------
   4. PRIMITIVES
   Réutilisables partout, sans contexte. Complètent les composants BEM.
-------------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Grilles extensibles.
   auto-fit + minmax plutôt qu'un gabarit figé : ajouter une 5e activité ou un
   4e chapitre ne doit toucher QUE le HTML (AGENTS.md §6). Une grille en
   « repeat(4, 1fr) » casserait à la première duplication de bloc. */
.grid {
  display: grid;
  gap: var(--gutter);
}

.grid.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.grid.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid.cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* Espacement vertical régulier sans marges qui s'effondrent. */
.stack > * + * {
  margin-top: var(--space-sm);
}

/* Utilitaires d'espacement. Existent pour éviter les `style="…"` inline, qui
   dispersent la mise en page hors de la feuille de style et échappent aux greps
   de discipline. */
.u-mt-md {
  margin-top: var(--space-md);
}

.u-mt-lg {
  margin-top: var(--space-lg);
}

.stack--lg > * + * {
  margin-top: var(--space-md);
}

/* Boutons. La DA est brute : pas de rayon marqué, capitales espacées. */
.btn {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border: 2px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-body);
  text-align: center;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.btn--primary:hover {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
}

/* Sur fond rouge : bouton blanc qui s'inverse au survol. */
.btn--inverse {
  background: var(--bg-light);
  border-color: var(--bg-light);
  color: var(--text-on-light);
}

.btn--inverse:hover {
  background: transparent;
  color: var(--text-on-accent);
}

.btn--ghost {
  background: transparent;
}

.btn--ghost:hover {
  background: currentColor;
}

/* -----------------------------------------------------------------------------
   5. TYPOGRAPHIE
-------------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400; /* Anton n'a qu'une graisse : jamais de faux-gras synthétique */
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-2xl);
}

h3 {
  font-size: var(--fs-xl);
}

h4 {
  font-size: var(--fs-lg);
}

p a:not(.btn),
.link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

/* Signature de marque, répétée sur les pages internes : le mot « NOS » en petites
   capitales très espacées, le mot principal en display, puis UN POINT ROUGE.
   Le point est un élément visuel autonome de la charte, pas une ponctuation :
   il est donc décoratif et masqué aux lecteurs d'écran. */
.section-title {
  margin-bottom: var(--space-md);
}

.section-title__kicker {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2xs);
}

.section-title__main {
  display: block;
}

.section-title__dot::after {
  content: '.';
  color: var(--accent-text);
}

/* Sur fond papier ou blanc, le point revient au rouge des aplats : --accent-text
   est calibré pour le texte sur NOIR, il n'a pas de raison d'être ici. */
.section--paper .section-title__dot::after,
.section--light .section-title__dot::after,
.hero .section-title__dot::after {
  color: var(--accent);
}

/* Sur fond ROUGE, le point ne peut être ni --accent (invisible sur lui-même) ni
   --accent-text : le rouge vif sur le rouge sombre des aplats tombe à 1,3:1,
   illisible. La charte n'autorise que rouge / noir / blanc — il passe donc en
   blanc, comme le texte qui l'entoure.
   (Aucune valeur hexadécimale ici, volontairement : le grep de discipline de la
   recette signalerait un hit, même dans un commentaire.) */
.section--accent .section-title__dot::after,
.newsletter .section-title__dot::after {
  color: currentColor;
}

.text-right {
  text-align: right;
}

.lead {
  font-size: var(--fs-md);
}

/* -----------------------------------------------------------------------------
   6. SECTIONS — alternance de fonds papier / noir / rouge
-------------------------------------------------------------------------------- */
.section {
  padding-block: var(--space-2xl);
}

.section--tight {
  padding-block: var(--space-xl);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.section--accent {
  background: var(--accent);
  color: var(--text-on-accent);
}

.section--light {
  background: var(--bg-light);
  color: var(--text-on-light);
}

.section--paper {
  background: var(--paper-bg);
  color: var(--text-on-light);
}

/* Le rouge de texte n'est légitime que sur fond noir. Ailleurs, l'accent de
   texte reprend le rouge des aplats. */
.section--dark .u-accent {
  color: var(--accent-text);
}

.section--paper .u-accent,
.section--light .u-accent {
  color: var(--accent);
}

/* -----------------------------------------------------------------------------
   7. HEADER
   Dupliqué physiquement dans les 10 pages : pas de templating, pas d'injection
   JS. Le markup doit survivre à l'ouverture du fichier en file://.
-------------------------------------------------------------------------------- */
.header {
  position: relative;
  z-index: var(--z-header);
  background: var(--paper-bg);
  color: var(--text-on-light);

  /* ===== TEXTURE PAPIER — POINT D'INSERTION =====
     La maquette demande un bandeau papier texturé. Aucun asset de texture n'a
     été livré, et on ne fabrique pas d'images : --paper-bg est donc un aplat
     clair, PLACEHOLDER ASSUMÉ et non un choix de DA (AGENTS.md §5).
     Le jour où l'asset arrive, c'est exactement une ligne à ajouter ici :
         background-image: url('../assets/images/texture-papier.webp');
     avec, si besoin, background-size / background-repeat. Rien d'autre à
     changer dans le fichier. */
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-h);
  padding-block: var(--space-xs);
}

/* Punaises rouges en butée gauche et droite du bandeau (motif de la maquette).
   Purement décoratives : aucun contenu, invisibles aux lecteurs d'écran. */
.header::before,
.header::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(0.75rem, 0.5rem + 0.6vw, 1.125rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: var(--radius-circle);
  background: var(--accent);
  box-shadow: var(--shadow-sm);
}

.header::before {
  left: var(--space-sm);
}

.header::after {
  right: var(--space-sm);
}

.header__nav {
  flex: 1;
}

.header__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-xs), 2vw, var(--space-lg));
  flex-wrap: wrap;
}

.header__item--logo {
  /* Le logo est au centre de la nav dans la maquette. En repli (écran étroit),
     flex-wrap le laisse simplement passer à la ligne plutôt que d'écraser
     les libellés. */
  order: 0;
}

.header__link {
  display: inline-block;
  padding: var(--space-2xs) var(--space-3xs);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.header__link:hover {
  border-bottom-color: var(--accent);
}

/* Page courante : signalée visuellement ET sémantiquement (aria-current="page"
   dans le HTML). Le style seul ne dit rien à un lecteur d'écran. */
.header__link[aria-current='page'] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.header__logo {
  display: block;
}

.header__logo img {
  width: clamp(7rem, 5rem + 8vw, 12rem);
  height: auto;
}

/* -----------------------------------------------------------------------------
   8. FOOTER
-------------------------------------------------------------------------------- */
.footer {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding-block: var(--space-xl) var(--space-md);
}

.footer__inner {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: start;
}

.footer__brand img {
  width: clamp(8rem, 6rem + 8vw, 13rem);
  height: auto;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-xs);
  color: var(--accent-text); /* rouge sur noir : --accent-text, jamais --accent */
}

.footer__list > * + * {
  margin-top: var(--space-2xs);
}

.footer__link {
  font-size: var(--fs-sm);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--accent-text);
}

.footer__bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid currentColor;
  font-size: var(--fs-xs);
  opacity: 0.7;
}

/* -----------------------------------------------------------------------------
   9. ANIMATIONS
   Principe (non-négociable n°8) : l'état par défaut du HTML est l'ÉTAT FINAL.
   Le JS ajoute .js-anim sur <html>, ce qui seul autorise l'état de départ.
   Sans JS, sans IntersectionObserver, ou si le script échoue : tout est visible
   et correctement positionné. On ne révèle jamais par ajout de classe.
-------------------------------------------------------------------------------- */
.is-animatable {
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.js-anim .is-animatable:not(.is-visible) {
  opacity: 0;
}

.js-anim .is-animatable--up:not(.is-visible) {
  transform: translateY(var(--space-md));
}

.js-anim .is-animatable--right:not(.is-visible) {
  transform: translateX(var(--space-2xl));
}

.js-anim .is-animatable--left:not(.is-visible) {
  transform: translateX(calc(-1 * var(--space-2xl)));
}

/* Décalage : le texte suit le visuel, il ne l'accompagne pas.
   L'animation doit être séquencée, pas simultanée (AGENTS.md §5). */
.is-animatable--delayed {
  transition-delay: var(--stagger);
}

/* -----------------------------------------------------------------------------
   10. LANDING
-------------------------------------------------------------------------------- */

/* ---- Hero ----
   PLACEHOLDER ASSUMÉ. La maquette demande un collage photo détouré ; les assets
   n'ont pas été livrés et on ne fabrique pas d'images. C'est donc un bloc aux
   bonnes proportions, fond papier, logo centré — de quoi caler la mise en page
   sans inventer de direction artistique.
   Le jour où le collage arrive : poser l'image dans .hero__media, retirer
   .hero__placeholder. Rien d'autre à changer. */
.hero {
  background: var(--paper-bg);
  color: var(--text-on-light);
  padding-block: var(--space-2xl);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.hero__media {
  width: 100%;
  /* Proportion large de la maquette. aspect-ratio réserve la place avant même
     que l'asset existe : la mise en page ne bougera pas quand il arrivera. */
  aspect-ratio: 16 / 7;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
}

.hero__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: var(--space-sm);
  border: 2px dashed currentColor;
  border-radius: var(--radius-md);
  opacity: 0.55;
}

.hero__placeholder img {
  width: min(60%, 28rem);
}

.hero__placeholder-note {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.hero__baseline {
  max-width: 46ch;
  font-size: var(--fs-md);
}

/* ---- « Qui sommes-nous ? » ----
   Vinyle à gauche, texte à droite. Le vinyle a son PROPRE conteneur, jamais
   fusionné au fond de section : c'est ce qui permettra de le rendre cliquable
   en V2 (façade + iframe au clic) sans refondre la section. */
.about__inner {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: center;
}

.about__media {
  display: grid;
  place-items: center;
}

/* Le vinyle est purement décoratif (AGENTS.md §5) : construit en CSS, il n'a
   aucune valeur informative et reste invisible aux lecteurs d'écran.
   Ce n'est pas une image fabriquée — c'est une forme géométrique, au même titre
   que les punaises du header. */
.vinyl {
  width: min(100%, 26rem);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--bg-light);
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  position: relative;
}

/* Sillon du disque. */
.vinyl::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: var(--radius-circle);
  border: 1px solid var(--shadow);
}

/* Pastille centrale — emplacement de la photo au centre du disque dans la
   maquette. Placeholder : aplat rouge tant que l'asset n'est pas livré. */
.vinyl__label {
  width: 34%;
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--accent);
  display: grid;
  place-items: center;
}

/* Trou central. */
.vinyl__label::after {
  content: '';
  width: 12%;
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--bg-light);
}

.about__body p + p,
.about__body ul {
  margin-top: var(--space-sm);
}

.about__list li {
  padding-left: 1.1em;
  position: relative;
}

/* Le point rouge de la charte, décliné en puce de liste. Décoratif. */
.about__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4em;
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--bg-light);
}

/* ---- Grille des animations ----
   Composant répétable : ajouter une 5e vignette = dupliquer un <li>, sans
   toucher au CSS (AGENTS.md §6). */
.activity {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  height: 100%;
  padding: var(--space-md);
  background: var(--bg-light);
  color: var(--text-on-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.activity:hover,
.activity:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.activity__media {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-2xs);
  background: var(--paper-bg);
  border-bottom: 3px solid var(--accent);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  opacity: 0.6;
  text-align: center;
  padding: var(--space-xs);
}

.activity__title {
  font-size: var(--fs-md);
}

.activity__text {
  font-size: var(--fs-sm);
}

/* ---- Newsletter ----
   index.html UNIQUEMENT. Ce n'est pas du chrome partagé : les maquettes montrent
   Animations, Événements et Contact sans ce bandeau. */
.newsletter {
  background: var(--accent);
  color: var(--text-on-accent);
  padding-block: var(--space-xl);
}

.newsletter__inner {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: center;
}

/* Emplacement de l'illustration mégaphone détouré de la maquette.
   Placeholder : asset non livré, aucune image fabriquée. */
.newsletter__media {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  border: 2px dashed currentColor;
  border-radius: var(--radius-md);
  opacity: 0.5;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  padding: var(--space-sm);
}

.newsletter__title {
  margin-bottom: var(--space-xs);
}

.form__row {
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-bottom: var(--space-xs);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.form__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-body);
}

.form__input {
  padding: var(--space-2xs) var(--space-xs);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--bg-light);
  color: var(--text-on-light);
  font-size: var(--fs-sm);
  width: 100%;
}

.form__input:focus-visible {
  outline-color: var(--bg-light);
}

/* Honeypot. Piège à robots : masqué visuellement, retiré de l'ordre de
   tabulation et des lecteurs d'écran. Surtout PAS `display:none` ni `hidden` —
   beaucoup de robots ignorent les champs ainsi masqués, ce qui viderait le
   piège de son intérêt. */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Zone de message. aria-live dans le HTML : le retour de soumission doit être
   annoncé, pas seulement affiché. min-height évite que la page saute quand le
   message apparaît. */
.form__note {
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  min-height: 1.5em;
}

.form__note--error {
  font-weight: 600;
  text-decoration: underline;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   11. PAGES LÉGALES
   Colonne de lecture étroite, hiérarchie sobre : ces pages se lisent, elles ne
   se parcourent pas.
-------------------------------------------------------------------------------- */
.legal {
  padding-block: var(--space-xl) var(--space-2xl);
}

.legal__title {
  margin-bottom: var(--space-2xs);
}

.legal__updated {
  font-size: var(--fs-sm);
  opacity: 0.7;
  margin-bottom: var(--space-lg);
}

.legal h2 {
  font-size: var(--fs-lg);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.legal h3 {
  font-size: var(--fs-md);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: var(--tracking-body);
  margin-top: var(--space-md);
  margin-bottom: var(--space-2xs);
}

.legal p,
.legal li {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.legal ul {
  list-style: disc;
  padding-left: 1.25em;
}

.legal li + li {
  margin-top: var(--space-3xs);
}

.legal dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-2xs) var(--space-sm);
  font-size: var(--fs-sm);
  margin-block: var(--space-xs);
}

.legal dt {
  font-weight: 600;
}

/* Marqueur des informations manquantes. Volontairement criard : ces trous
   doivent sauter aux yeux en relecture et bloquer la mise en ligne.
   Recherche : « À COMPLÉTER » ou la classe .todo. */
.todo {
  background: var(--accent);
  color: var(--text-on-accent);
  padding: 0 var(--space-3xs);
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

/* -----------------------------------------------------------------------------
   12. 404
-------------------------------------------------------------------------------- */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  text-align: center;
  padding-block: var(--space-3xl);
  min-height: 50vh;
}

.error-page__code {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--accent-text);
}

/* -----------------------------------------------------------------------------
   13. MEDIA QUERIES
   Aucune maquette mobile n'existe (tout est en 1920 fixe) : la mise en page
   repose d'abord sur clamp() et auto-fit, qui encaissent la réduction sans
   palier. Ces requêtes ne traitent que ce que le fluide ne peut pas résoudre.
-------------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .header__list {
    gap: var(--space-xs);
  }

  /* Le logo repasse en tête plutôt qu'au milieu d'une nav sur deux lignes,
     où il perdrait sa fonction de repère. */
  .header__item--logo {
    order: -1;
    flex-basis: 100%;
    display: flex;
    justify-content: center;
  }

  /* L'alignement à droite de la maquette (bios, listes d'artistes) n'a plus de
     sens en colonne unique étroite. */
  .text-right {
    text-align: left;
  }
}

@media (max-width: 40rem) {
  .header::before,
  .header::after {
    display: none; /* les punaises mangeraient la place des libellés */
  }

  .footer {
    padding-block: var(--space-lg) var(--space-md);
  }
}

/* Impression : les pages légales doivent rester lisibles sur papier. */
@media print {
  .header,
  .footer,
  .skip-link {
    display: none;
  }

  body {
    background: none;
    color: var(--text-on-light);
  }
}