/* Festival de la rue d'Aubagne : couleurs, police et formes de la charte graphique. */

:root {
  /* Couleurs de la charte */
  --noir: #0C0C0C;
  --rouge: #FB3640;
  --bleu: #3962E6;
  --blanc: #FDFFFC;
  --rose: #FEB9BC;
  --bleu-clair: #BFCCF7;
  /* Fond cadastre : traits et papier, bleus partout, roses aux chiffres (relevés sur les fonds originels de la charte) */
  --bleu-traits: #3962E6;
  --bleu-papier: #FAFAF7;
  --rose-traits: #F76B66;
  --rose-papier: #FFF8F7;
  /* Fond de survol : bleu clair éclairci, pour garder 4,5:1 avec le texte bleu */
  --voile: #EEF2FC;
  /* Contour blanc arrondi derrière les grands textes posés sur le cadastre (comme les noms des focus artistes),
     environ 0,12 em : la lettre recopiée sur trois cercles (0,12 em, 0,08 em, 0,04 em), pour un bord rond et plein.
     Sur les titres, il est porté par une copie blanche glissée sous le texte (voir « Contour des grands titres »). */
  --contour:
    .12em 0 0 var(--blanc), .118em .023em 0 var(--blanc), .111em .046em 0 var(--blanc), .1em .067em 0 var(--blanc),
    .085em .085em 0 var(--blanc), .067em .1em 0 var(--blanc), .046em .111em 0 var(--blanc), .023em .118em 0 var(--blanc),
    0 .12em 0 var(--blanc), -.023em .118em 0 var(--blanc), -.046em .111em 0 var(--blanc), -.067em .1em 0 var(--blanc),
    -.085em .085em 0 var(--blanc), -.1em .067em 0 var(--blanc), -.111em .046em 0 var(--blanc), -.118em .023em 0 var(--blanc),
    -.12em 0 0 var(--blanc), -.118em -.023em 0 var(--blanc), -.111em -.046em 0 var(--blanc), -.1em -.067em 0 var(--blanc),
    -.085em -.085em 0 var(--blanc), -.067em -.1em 0 var(--blanc), -.046em -.111em 0 var(--blanc), -.023em -.118em 0 var(--blanc),
    0 -.12em 0 var(--blanc), .023em -.118em 0 var(--blanc), .046em -.111em 0 var(--blanc), .067em -.1em 0 var(--blanc),
    .085em -.085em 0 var(--blanc), .1em -.067em 0 var(--blanc), .111em -.046em 0 var(--blanc), .118em -.023em 0 var(--blanc),
    .08em 0 0 var(--blanc), .074em .031em 0 var(--blanc), .057em .057em 0 var(--blanc), .031em .074em 0 var(--blanc),
    0 .08em 0 var(--blanc), -.031em .074em 0 var(--blanc), -.057em .057em 0 var(--blanc), -.074em .031em 0 var(--blanc),
    -.08em 0 0 var(--blanc), -.074em -.031em 0 var(--blanc), -.057em -.057em 0 var(--blanc), -.031em -.074em 0 var(--blanc),
    0 -.08em 0 var(--blanc), .031em -.074em 0 var(--blanc), .057em -.057em 0 var(--blanc), .074em -.031em 0 var(--blanc),
    .04em 0 0 var(--blanc), .028em .028em 0 var(--blanc), 0 .04em 0 var(--blanc), -.028em .028em 0 var(--blanc),
    -.04em 0 0 var(--blanc), -.028em -.028em 0 var(--blanc), 0 -.04em 0 var(--blanc), .028em -.028em 0 var(--blanc);

  --police: "snaga-unicase-display", "Snaga Uni Display", system-ui, sans-serif;

  --gouttiere: clamp(16px, 3.4vw, 48px);
  --section: clamp(72px, 9.4vw, 144px);
  --largeur: 1120px;
  --entete: 72px;

  --courbe: cubic-bezier(.16, 1, .3, 1);
  --z-masse: 0; --z-contenu: 1; --z-entete: 10; --z-menu: 9;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete) + 16px);
  caret-color: var(--rouge);
  accent-color: var(--rouge);
  scrollbar-color: var(--bleu) var(--bleu-papier);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--police);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.42;
  color: var(--bleu);
  background: var(--bleu-papier);
  transition: background-color 1.6s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 2px; }
/* Rouge sur blanc = 3,7:1 : réservé aux textes gras d'au moins 18,7 px */
em { font-style: normal; font-weight: 800; color: var(--rouge); font-size: max(1em, 1.17rem); }
strong { font-weight: 800; }
::selection { background: var(--rouge); color: var(--blanc); }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; border-radius: 4px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

.evitement {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 999px; background: var(--noir); color: var(--blanc);
  font-weight: 800; text-decoration: none;
}
.evitement:focus { top: 16px; }

/* Le cadastre de Marseille : un seul fond pour toute la page, qui défile avec elle.
   Export Note Paper de Robin (3840 × 13000, niveaux de gris) en dix bandes chargées à l'approche (js/main.js).
   Couleur réglée en CSS : le gris éclaircit la couleur des traits (« screen »), puis le tout est teinté
   par la couleur du papier (« multiply ») ; blanc = papier, noir = traits.
   Deux calques identiques, bleu et rose : le passage au rose est un fondu enchaîné du calque rose (opacité seule),
   chaque calque n'est dessiné qu'une fois (changer la couleur d'un calque obligeait à tout redessiner à chaque image). */
.page { position: relative; overflow: clip; }
.fond-cadre { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fond {
  --sombre: var(--bleu-traits); --clair: var(--bleu-papier);
  position: absolute; top: 0; left: 50%; width: 100%; height: 100%; translate: -50% 0;
}
.fond--rose {
  --sombre: var(--rose-traits); --clair: var(--rose-papier);
  opacity: 0; visibility: hidden; will-change: opacity; transition: opacity 1.6s ease, visibility 0s 1.6s;
}
.bande {
  position: absolute; left: 0; width: 100%; opacity: 0; will-change: opacity; transition: opacity .6s ease;
  background-color: var(--sombre);
  background-image: linear-gradient(var(--clair), var(--clair)), var(--img);
  background-size: 100% 100%; background-repeat: no-repeat;
  background-blend-mode: multiply, screen;
}
.bande.prete { opacity: 1; }
/* Passage au rose, une seule fois, sur « Le mal-logement en chiffres » */
.fond-rose body { background-color: var(--rose-papier); }
.fond-rose .fond--rose { opacity: 1; visibility: visible; transition: opacity 1.6s ease; }

/* Masses blanches : formes d'arrondissement de la charte, en très gros, derrière un groupe de texte.
   --mx et --my : débord autour du groupe ; --dx, --dy : décalage ; --r : rotation. */
main { overflow-x: clip; }
.groupe { position: relative; }
/* Tout le contenu passe au-dessus des masses, qu'elles viennent de sa section ou d'une voisine */
main > section > :where(:not(.groupe, :has(.groupe))) { position: relative; z-index: var(--z-contenu); }
.groupe > * { position: relative; z-index: var(--z-contenu); }
.groupe > .masse {
  position: absolute; z-index: var(--z-masse);
  left: calc(var(--mx, 30%) * -1); top: calc(var(--my, 30%) * -1);
  width: calc(100% + 2 * var(--mx, 30%)); height: calc(100% + 2 * var(--my, 30%));
  max-width: none; overflow: visible; color: var(--blanc); pointer-events: none;
  translate: var(--dx, 0) var(--dy, 0);
  rotate: var(--r, 0deg);
}

/* Titres */
h2 {
  font-weight: 900; color: var(--rouge);
  font-size: clamp(2.375rem, 5.4vw, 5.125rem); line-height: .92; letter-spacing: -.01em;
}

/* Contour des grands titres : js/main.js recopie le texte dans data-texte (sur chaque ligne de l'accueil),
   la copie blanche cernée d'ombres passe sous tout le titre. Ainsi le contour d'une ligne ne mord jamais
   sur les lettres de la ligne voisine, et le titre n'est dessiné qu'une fois (pas de filtre). */
.contour { isolation: isolate; }
.contour .ligne { position: relative; }
.contour[data-texte]::before, .contour .ligne[data-texte]::before {
  content: attr(data-texte); content: attr(data-texte) / "";
  position: absolute; inset: 0; z-index: -1; padding: inherit;
  color: var(--blanc); text-shadow: var(--contour); pointer-events: none;
}
html:not(.js) :is(.accueil h1, h2) { text-shadow: var(--contour); }

/* Boutons et liens */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .66em 1.3em; border: 0; border-radius: 999px;
  background: var(--rouge); color: var(--blanc);
  font: 800 1.0625rem/1 var(--police); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, transform .15s;
}
.bouton:hover { background: var(--bleu); }
.bouton:active { transform: scale(.97); }
.bouton--grand { min-height: 50px; font-size: 1.1875rem; padding: .7em 1.5em; }
.bouton--bleu { background: var(--bleu); }
.bouton--bleu:hover { background: var(--rouge); }
.lien { font-weight: 800; color: var(--bleu); }
.lien:hover { color: var(--rouge); }

/* En-tête */
.entete {
  position: fixed; inset: 0 0 auto; z-index: var(--z-entete);
  height: var(--entete); padding: 0 var(--gouttiere);
  display: flex; align-items: center; gap: 10px;
  transition: background-color .3s, box-shadow .3s;
}
.entete.est-defile { background: var(--blanc); box-shadow: 0 1px 0 rgb(57 98 230 / .16); }
/* Logo en longueur (Robin, 14/10) : dessin tel quel, texte rouge ; silhouette blanche sur le cadastre,
   bleu clair sur fond blanc (déclinaisons de la charte) */
.entete__logo { margin-right: auto; width: 228px; flex: none; border-radius: 6px; color: var(--blanc); }
.entete__logo, .entete__billet, .entete__menu { position: relative; z-index: 10; }
.entete__logo-svg { width: 100%; height: auto; }
.entete.est-defile .entete__logo, .menu-ouvert .entete__logo, .entete--sur-blanc .entete__logo { color: var(--bleu-clair); }
/* Sur téléphone, le logo empilé de la charte (le logo en longueur y serait illisible, Robin 14/10) :
   variante silhouette blanche sur le cadastre, silhouette bleu clair sur fond blanc */
.logo-court { display: none; }
.entete__nav ul {
  display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--blanc); box-shadow: 0 0 0 1px rgb(57 98 230 / .16);
}
.entete__nav a {
  display: block; padding: .6em 1em; border-radius: 999px;
  font-weight: 700; font-size: .9375rem; line-height: 1; text-decoration: none; color: var(--bleu);
  transition: background-color .2s, color .2s;
}
.entete__nav a:hover { background: var(--voile); }
.entete__nav a[aria-current="true"] { background: var(--bleu); color: var(--blanc); }
.entete__billet { min-height: 42px; font-size: 1.0625rem; }
.entete__menu {
  display: none; min-height: 42px; padding: 0 1em; border: 0; border-radius: 999px;
  background: var(--blanc); color: var(--bleu); box-shadow: 0 0 0 1px rgb(57 98 230 / .16);
  font: 800 1rem/1 var(--police); cursor: pointer;
}
.entete__menu-fermer { display: none; }

@media (max-width: 1099px) {
  :root { --entete: 64px; }
  .entete__logo { width: auto; flex: 0 1 200px; min-width: 0; }
  .entete__menu { display: inline-flex; align-items: center; }
  .entete__billet { min-height: 42px; font-size: 1.0625rem; padding: 0 .9em; }
  .entete__nav {
    position: fixed; inset: 0; z-index: var(--z-menu);
    padding: calc(var(--entete) + 36px) var(--gouttiere) 36px;
    background: var(--blanc); overflow-y: auto;
    visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s;
  }
  .menu-ouvert .entete__nav { visibility: visible; opacity: 1; transition: opacity .3s; }
  .menu-ouvert .entete { background: var(--blanc); box-shadow: none; }
  .menu-ouvert .entete__menu-ouvrir { display: none; }
  .menu-ouvert .entete__menu-fermer { display: inline; }
  .menu-ouvert body { overflow: hidden; }
  .entete__nav ul { display: grid; gap: 6px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .entete__nav a {
    padding: .2em 0; border-radius: 0; background: none;
    font-weight: 900; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; color: var(--rouge);
  }
  .entete__nav a:hover, .entete__nav a[aria-current="true"] { background: none; color: var(--bleu); }
  .entete__nav { z-index: var(--z-menu); }
  .entete { z-index: var(--z-entete); }
}
@media (max-width: 767px) {
  .entete__logo { flex: none; width: 66px; }
  .logo-long { display: none; }
  .logo-sur-cadastre { display: block; }
  :is(.entete.est-defile, .menu-ouvert .entete, .entete--sur-blanc) .logo-sur-cadastre { display: none; }
  :is(.entete.est-defile, .menu-ouvert .entete, .entete--sur-blanc) .logo-sur-blanc { display: block; }
}
@media (max-width: 420px) {
  .entete { gap: 8px; }
  .entete__logo { width: 58px; }
  .entete__billet { padding: 0 .8em; }
  .entete__menu { padding: 0 .85em; }
}

/* Accueil */
.accueil {
  min-height: 100svh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap: 20px;
  padding: calc(var(--entete) + clamp(24px, 5vh, 60px)) var(--gouttiere) clamp(32px, 7vh, 76px);
}
.accueil__titre { grid-column: 1 / span 7; grid-row: 1; align-self: start; padding-left: clamp(0px, 2vw, 28px); }
.etiquette {
  display: inline-block; margin-bottom: clamp(14px, 2vw, 24px);
  padding: .5em .85em; border-radius: 999px; background: var(--noir); color: var(--blanc);
  font-weight: 800; font-size: .9375rem; line-height: 1; text-decoration: none;
}
.etiquette:hover { background: var(--bleu); }
.accueil h1 {
  font-weight: 900; color: var(--rouge);
  font-size: clamp(2.75rem, 6.5vw, 6.75rem); line-height: .86; letter-spacing: -.012em;
}
.accueil h1 .ligne { display: block; }
.accueil h1 .ligne:nth-child(1) { padding-left: .92em; }
.accueil h1 .ligne:nth-child(2) { padding-left: .44em; }

.accueil__infos {
  grid-column: 8 / -1; grid-row: 1; justify-self: end; align-self: end;
  display: grid; justify-items: end; gap: 12px; text-align: right;
  padding-right: clamp(0px, 2vw, 28px);
}
.accueil__date { position: relative; font-weight: 900; color: var(--rouge); font-size: clamp(2rem, 3.6vw, 3.375rem); line-height: .95; text-shadow: var(--contour); }
.accueil__date span { display: block; }
.accueil__jour { position: relative; width: fit-content; margin-left: auto; }
.traits {
  position: absolute; right: -.62em; top: -.52em; width: .7em; height: .7em; overflow: visible;
  fill: none; stroke: var(--rouge); stroke-width: 3.6; stroke-linecap: round;
}
.traits path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.accueil__lieu { font-weight: 700; font-size: .9375rem; line-height: 1.25; }
.accueil__lieu strong { display: block; font-weight: 900; font-size: clamp(1.625rem, 2.7vw, 2.5rem); line-height: 1; }
.accueil__programme { font-weight: 900; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.1; }
.accueil__infos .bouton { margin-top: 8px; }

/* Line-up */
.line-up { padding: var(--section) var(--gouttiere) calc(var(--section) * .7); }
.line-up__tete {
  max-width: var(--largeur); margin: 0 auto clamp(30px, 4.2vw, 54px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px;
}
.filtres { position: relative; z-index: var(--z-contenu); display: flex; flex-wrap: wrap; gap: 8px; }
.filtre {
  min-height: 42px; padding: 0 1.1em; border: 2px solid var(--bleu); border-radius: 999px;
  background: var(--blanc); color: var(--bleu); font: 800 1rem/1 var(--police); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.filtre:hover { background: var(--voile); }
.filtre[aria-pressed="true"] { background: var(--bleu); color: var(--blanc); }
.artistes {
  --colonnes: 4; --ecart: clamp(12px, 1.7vw, 24px);
  max-width: var(--largeur); margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ecart);
}
.artiste { flex: 0 0 calc((100% - (var(--colonnes) - 1) * var(--ecart)) / var(--colonnes)); }
.artiste img { width: 100%; height: auto; }
.artiste[hidden] { display: none; }
.artiste__bouton {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 2px; transition: transform .35s var(--courbe);
}
.artiste__bouton:hover { transform: translateY(-4px); }
.artiste__bouton:active { transform: translateY(-1px); }
.artiste__plus {
  position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blanc); color: var(--bleu);
  transition: background-color .2s, color .2s;
}
.artiste__plus svg { width: 14px; height: 14px; }
.artiste__bouton:hover .artiste__plus { background: var(--rouge); color: var(--blanc); }
.line-up__suite {
  width: fit-content; margin: clamp(28px, 3.4vw, 44px) auto 0;
  padding: .55em 1.1em; border-radius: 999px; background: var(--blanc);
  font-weight: 900; font-size: clamp(1rem, 1.35vw, 1.1875rem); line-height: 1.1;
}

/* Fiche d'un artiste (js/main.js) : fenêtre par-dessus la page floutée, texte sur une forme blanche de la charte */
.fiche-artiste {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: none; color: var(--bleu);
  overflow: hidden auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .5s ease, overlay .5s allow-discrete, display .5s allow-discrete;
}
.fiche-artiste[open] { opacity: 1; }
.fiche-artiste::backdrop {
  background: rgb(250 250 247 / .3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .5s ease, overlay .5s allow-discrete, display .5s allow-discrete;
}
.fiche-artiste[open]::backdrop { opacity: 1; }
@starting-style {
  .fiche-artiste[open], .fiche-artiste[open]::backdrop { opacity: 0; }
}
/* Page bloquée pendant la fiche ; la place de la barre de défilement reste réservée, sinon la page glisse de sa largeur */
html:has(.fiche-artiste[open]) { overflow: hidden; scrollbar-gutter: stable; }
/* Le cadre prend toute la largeur et coupe la forme blanche aux bords de l'écran (sans allonger le défilement) */
.fiche-artiste__cadre {
  min-height: 100%; overflow: clip;
  padding: calc(var(--entete) + 16px) max(var(--gouttiere), (100% - 1000px) / 2) 56px;
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: clamp(36px, 5.6vw, 80px); align-items: center;
}
.fiche-artiste__visuel { position: relative; z-index: 1; width: 100%; height: auto; }
.fiche-artiste__texte { display: grid; gap: 12px; justify-items: start; max-width: 540px; }
.fiche-artiste__nom { font-size: clamp(2.125rem, 3.7vw, 3.375rem); }
.fiche-artiste__genre { margin-top: -4px; font-weight: 900; font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1; }
.fiche-artiste__comptes { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .9375rem; }
.fiche-artiste__bio { display: grid; gap: .75em; margin-top: 6px; font-size: .9375rem; line-height: 1.45; }
.fiche-artiste__photo { font-size: .8125rem; }
.fiche-artiste__fermer {
  position: fixed; z-index: 2; top: calc((var(--entete) - 42px) / 2); right: var(--gouttiere);
  display: inline-flex; align-items: center; gap: .55em; min-height: 42px; padding: 0 1em; border: 0; border-radius: 999px;
  background: var(--blanc); color: var(--bleu); box-shadow: 0 0 0 1px rgb(57 98 230 / .16);
  font: 800 1rem/1 var(--police); cursor: pointer; transition: background-color .2s, color .2s;
}
.fiche-artiste__fermer:hover { background: var(--bleu); color: var(--blanc); }
.fiche-artiste__fermer svg, .artiste__plus svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fiche-artiste__fermer svg { width: 12px; height: 12px; }

/* Talks */
.talks {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: var(--section) var(--gouttiere);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: center;
}
.talks__titre {
  grid-column: 1 / span 6; color: var(--bleu);
  font-size: clamp(3.75rem, 10.2vw, 9.375rem); line-height: .8;
}
.talks__texte { grid-column: 7 / -1; display: grid; gap: 16px; }
.grand-texte { font-weight: 800; font-size: clamp(1.25rem, 1.95vw, 1.8125rem); line-height: 1.16; }

/* Pourquoi ce festival */
.memoire { position: relative; padding: calc(var(--section) * .45) 0 var(--section); }
.memoire__texte {
  width: min(100% - 2 * var(--gouttiere), 540px); display: grid; gap: 16px;
  margin-left: calc(var(--gouttiere) + clamp(0px, 3.4vw, 60px));
}
.memoire__texte h2 { font-size: clamp(2.125rem, 3.9vw, 3.75rem); margin-bottom: 4px; }
.noms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; font-weight: 800; color: var(--noir); font-size: .9375rem; line-height: 1.25; }

/* Associations */
.associations {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: var(--section) var(--gouttiere);
  display: grid; gap: clamp(64px, 8.5vw, 128px);
}
.associations__tete { max-width: 660px; display: grid; gap: 18px; }
.associations__tete h2 { font-size: clamp(2rem, 3.9vw, 3.625rem); }
.associations__tete h2 span { color: var(--bleu); }
.associations__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 7.6vw, 128px); align-items: start; }
.asso { display: grid; gap: 12px; justify-items: start; }
.asso:nth-child(2) { margin-top: clamp(0px, 8.5vw, 120px); }
.asso h3 { font-weight: 900; color: var(--rouge); font-size: clamp(1.4375rem, 1.9vw, 1.75rem); line-height: 1; }
.asso__logo { height: auto; margin-bottom: 4px; }
.asso__logo--just { width: 160px; }
.asso__logo--assemblee { width: 112px; }
.don { justify-self: center; display: grid; justify-items: center; gap: 18px; max-width: 560px; text-align: center; }
.don__texte { font-weight: 800; font-size: clamp(1.1875rem, 1.8vw, 1.625rem); line-height: 1.18; }

/* Infos pratiques */
.infos { padding: var(--section) var(--gouttiere); display: grid; justify-items: center; }
.infos__fiche { width: min(100%, 560px); display: grid; gap: 26px; justify-items: start; }
.fiche { display: grid; gap: 18px; width: 100%; }
.fiche > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 14px; }
.fiche dt { font-weight: 900; color: var(--rouge); font-size: 1.1875rem; line-height: 1.1; }
.fiche dd { font-weight: 700; line-height: 1.35; }
.prix { font-weight: 900; color: var(--rouge); font-size: max(1em, 1.17rem); }

/* Chiffres du mal-logement : tout en bas, serrés en zigzag (1 à gauche, 2 à droite entre les deux, 3 à gauche) ;
   chaque chiffre à la largeur de son texte, pour des formes au plus juste */
.chiffres {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: var(--section) var(--gouttiere) calc(var(--section) * .75);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: clamp(28px, 3.6vw, 52px);
}
.chiffres > * { max-width: 100%; }
.chiffres__titre { grid-column: 1 / -1; justify-self: center; text-align: center; font-size: clamp(2.125rem, 4.4vw, 4.125rem); max-width: 12em; margin-bottom: clamp(4px, 1.2vw, 16px); }
.chiffre { display: grid; gap: 10px; align-content: start; width: fit-content; max-width: 100%; }
.chiffre--1 { grid-column: 1 / span 6; grid-row: 2; }
.chiffre--2 { grid-column: 7 / -1; grid-row: 2 / span 2; align-self: center; justify-self: end; justify-items: end; text-align: right; }
.chiffre--3 { grid-column: 2 / span 6; grid-row: 3; }
.chiffre__nombre { font-weight: 900; color: var(--rouge); font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: .88; white-space: nowrap; }
.chiffre__nombre span { font-size: .46em; }
.chiffre--3 .chiffre__nombre span { display: block; margin-bottom: .12em; }
.chiffre__phrase { font-weight: 800; font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.14; max-width: 21ch; }
.chiffre__source { font-size: .875rem; line-height: 1.35; max-width: 42ch; }

/* Pied de page : le logo posé directement sur le cadastre, sans forme dessous (logo jamais modifié) */
.pied { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; padding: 32px var(--gouttiere) 44px; }
.pied__logo { width: 150px; height: auto; }
.pied__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--blanc); box-shadow: 0 0 0 1px rgb(57 98 230 / .16); }
.pied__liens a { display: block; padding: .6em 1em; border-radius: 999px; font-weight: 700; font-size: .9375rem; line-height: 1; text-decoration: none; }
.pied__liens a:hover { background: var(--voile); }

/* Page de texte (mentions légales) */
.page-texte { padding: calc(var(--entete) + var(--section) * .6) var(--gouttiere) var(--section); display: grid; justify-items: center; }
.page-texte__corps { width: min(100%, 640px); display: grid; gap: 16px; }
.page-texte__corps h1 { font-weight: 900; color: var(--rouge); font-size: clamp(2.125rem, 4.6vw, 3.75rem); line-height: .95; margin-bottom: 10px; }
.page-texte__corps h2 { font-size: clamp(1.3125rem, 2vw, 1.75rem); margin-top: 16px; }
.page-texte__corps p, .page-texte__corps li { font-weight: 600; font-size: .9375rem; line-height: 1.5; }
.todo { background: var(--rose); color: var(--noir); padding: 0 .2em; }

/* Apparitions (le contenu reste visible sans JavaScript) */
.js .apparait { opacity: 0; translate: 0 16px; }
.js .apparait.est-visible { opacity: 1; translate: 0 0; transition: opacity .7s var(--courbe), translate .7s var(--courbe); }
.js main > section:not(.accueil) .masse { opacity: 0; }
.js main > section:not(.accueil) .masse.est-visible { opacity: 1; transition: opacity 1.4s ease-out; }
.capture body, .capture .bande, .capture .fond--rose { transition: none; }
.capture .apparait, .capture .masse { opacity: 1 !important; translate: none; transition: none !important; }
.capture .groupe > .masse { translate: var(--dx, 0) var(--dy, 0); }
@media (prefers-reduced-motion: reduce) {
  .js .apparait, .js main > section .masse { opacity: 1; translate: none; transition: none; }
  .js .groupe > .masse { translate: var(--dx, 0) var(--dy, 0); }
  .bouton, .filtre, .entete, .entete__nav, .artiste__bouton, .fiche-artiste, .fiche-artiste::backdrop { transition: none; }
}

/* Tablette et téléphone */
@media (max-width: 1023px) {
  .accueil { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 48px; }
  .accueil__titre { grid-column: 1; grid-row: 1; }
  .accueil__infos { grid-column: 1; grid-row: 2; }
  .talks { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .talks__titre, .talks__texte { grid-column: 1; }
  .talks__texte { max-width: 560px; justify-self: end; }
  .chiffres { grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 7vw, 64px); }
  .chiffre--1, .chiffre--2, .chiffre--3 { grid-column: 1; grid-row: auto; align-self: start; }
  .chiffre--2 { justify-self: end; }
  .artistes { --colonnes: 3; }
}
@media (max-width: 767px) {
  :root { --section: 72px; }
  body { font-size: 1rem; }
  .accueil { padding-bottom: 36px; }
  .accueil__titre { padding-left: 0; }
  .accueil__infos { justify-self: start; justify-items: start; text-align: left; padding-right: 0; }
  .accueil__jour { margin-left: 0; }

  .line-up { padding-inline: 0; }
  .line-up__tete { padding-inline: var(--gouttiere); }
  .artistes {
    display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding: 0 var(--gouttiere) 8px; scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  .artistes::-webkit-scrollbar { display: none; }
  .artistes { justify-content: flex-start; }
  .artiste { flex: 0 0 66vw; scroll-snap-align: start; }
  .line-up__suite { margin-inline: var(--gouttiere) auto; }

  .memoire__texte { margin: 0 var(--gouttiere); width: auto; }
  .noms { grid-template-columns: minmax(0, 1fr); }

  .chiffre--2 { justify-self: start; justify-items: start; text-align: left; }
  .chiffre__nombre { font-size: clamp(2.625rem, 13vw, 3.75rem); }

  .associations__liste { grid-template-columns: minmax(0, 1fr); }
  .asso:nth-child(2) { margin-top: 0; }

  .fiche > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  .fiche-artiste__cadre { grid-template-columns: minmax(0, 1fr); row-gap: 32px; align-content: start; padding-bottom: 40px; }
  .fiche-artiste__visuel { width: min(68vw, 300px); }

  /* Sur téléphone, les masses suivent la largeur de l'écran : plus de débord, pas de décalage */
  main > section:not(.accueil) .groupe { --mx: 22% !important; --my: 26% !important; --dx: 0% !important; --dy: 0% !important; }
  .memoire .groupe { --mx: 28% !important; --my: 40% !important; }
  .pied__liens a { padding: .6em .8em; font-size: .875rem; }
}

@media print {
  .fond-cadre, .entete, .masse { display: none; }
}