@charset "UTF-8";
/* =========================================================================
   Ex-Æquo — feuille de style unique
   Organisation :
     01. Polices
     02. Tokens (:root) — AUCUNE couleur, AUCUN rayon, AUCUNE durée ailleurs
     03. Reset et base
     04. Typographie
     05. Vocabulaire de formes (îlot, capsule, blob, bandeau)
     06. En-tête et navigation
     07. Pied de page
     08. Structure des sections
     09. Hero (accueil)
     10. Titres et lecteur Spotify
     11. Vidéos
     12. Membres
     13. Dates
     14. Galerie et lightbox
     15. Booking et rebond
     16. Animations
     17. Transitions de page
     18. prefers-reduced-motion
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. POLICES
   ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Extra Chunk Please';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/extra-chunk-please.woff2') format('woff2'),
       url('fonts/extra-chunk-please.woff') format('woff');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/schibsted-grotesk-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;
}


/* Repli métrique de la police de titrage.
   Extra Chunk Please est bien plus large qu'Impact : quand elle arrive après le
   premier rendu, tous les titres se réorganisent d'un coup. Mesuré : un CLS qui
   passait de 0 à 0,41 d'un chargement à l'autre.
   On déclare donc des replis système redimensionnés pour occuper la même place
   que la vraie police. Les pourcentages viennent d'une mesure de chasse sur
   « À LA CANOPÉE DEHORS MUSIQUE 0123 », les ascendantes et descendantes des
   métriques du fichier (ascent 1.100 em, descent 0.320 em). */
@font-face {
  font-family: 'Extra Chunk Please repli';
  src: local('Impact');
  size-adjust: 138.3%;
  ascent-override: 110%;
  descent-override: 32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Extra Chunk Please repli';
  src: local('Haettenschweiler');
  size-adjust: 108.4%;
  ascent-override: 110%;
  descent-override: 32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Extra Chunk Please repli';
  src: local('Arial Black');
  size-adjust: 91.2%;
  ascent-override: 110%;
  descent-override: 32%;
  line-gap-override: 0%;
}

/* -------------------------------------------------------------------------
   02. TOKENS
   ---------------------------------------------------------------------- */
:root {
  /* — couleurs — */
  --eau: #3ee6d8;
  --jaune: #ffc800;
  --rose: #ffa6dc;
  --bleu: #3b9bff;
  --rouge: #e23b2e;
  /* Le rouge de la palette ne donne que 4,3:1 avec du blanc et 4,5:1 avec
     l'encre : insuffisant pour du texte de 11 px. --rouge reste l'accent pur
     (blobs, aplats sans texte) ; dès qu'un fond rouge porte du texte, on prend
     cette version foncée, qui monte à 6,4:1 avec du blanc. */
  --rouge-fonce: #b32a1f;
  --vert: #2ed573;
  --encre: #111111;
  --blanc: #ffffff;
  --bleu-logo: #0458cf;
  --voile: rgba(17, 17, 17, .78);
  --transparent: rgba(0, 0, 0, 0);

  /* — traits — */
  --trait: 3px;
  --trait-fin: 2px;
  --trait-epais: 5px;

  /* — rayons — */
  --r-ilot: 28px 24px 30px 26px / 26px 30px 24px 28px;
  --r-ilot-b: 24px 32px 22px 30px / 30px 22px 32px 24px;
  --r-ilot-c: 34px 22px 28px 24px / 22px 28px 26px 32px;
  --r-ilot-d: 22px 30px 34px 20px / 28px 24px 22px 30px;
  --r-cadre: 18px 22px 16px 20px / 20px 16px 22px 18px;
  --r-capsule: 999px;
  --r-rond: 50%;
  --r-focus: 6px;
  --r-blob-a: 56% 44% 48% 52% / 60% 52% 48% 40%;
  --r-blob-b: 42% 58% 63% 37% / 47% 39% 61% 53%;
  --r-blob-c: 63% 37% 41% 59% / 35% 58% 42% 65%;

  /* — reliefs — */
  --dur-relief: 6px 6px 0 var(--encre);
  --dur-relief-petit: 4px 4px 0 var(--encre);
  --dur-relief-grand: 10px 10px 0 var(--encre);

  /* — mouvement — */
  --dur: .4s;
  --dur-court: .22s;
  --dur-long: .9s;
  --dur-blob: 26s;
  --dur-derive: 14s;        /* dérive des formes du hero, plus vive que --dur-blob */
  --dur-flotte: 5s;
  --dur-flotte-photo: 8s;
  --dur-marquee: 38s;
  --dur-fleche: 2.4s;
  --dur-nulle: .001ms;
  --ease: cubic-bezier(.34, 1.56, .64, 1);
  --ease-doux: cubic-bezier(.22, .61, .36, 1);
  --decalage: 60ms;

  /* — typo — */
  --titrage: 'Extra Chunk Please', 'Extra Chunk Please repli', Impact, sans-serif;
  --police: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-geant: clamp(52px, 13vw, 150px);
  --t-section: clamp(38px, 9vw, 92px);
  --t-page: clamp(40px, 10vw, 104px);
  --t-ilot: clamp(26px, 4.4vw, 40px);
  --t-sous: clamp(20px, 3.4vw, 28px);
  --t-corps: clamp(16px, 1.1vw, 18px);
  --t-petit: 14px;
  --t-label: 11px;
  /* échelle des commandes : volontairement plus généreuse sur grand écran,
     11 px de nav et 14 px de bouton étaient chétifs à côté d'une display
     de 90 px. Les valeurs de bureau sont redéfinies plus bas, à 1024 px. */
  --t-nav: 11px;
  --t-bouton: 14px;
  --pad-bouton: var(--e-lg);
  --pad-nav: var(--e-md);
  --ls-titre: -.035em;
  --ls-titre-serre: -.05em;
  --ls-label: .04em;
  --lh-titre: .92;
  /* Débord de l'encre d'Extra Chunk Please hors de la boîte de ligne.
     Sa hauteur d'encre réelle va de -0.31 em (cédille du Ç) à +1.07 em
     (rond du Å), soit 1.38 em, pour une boîte de ligne de 0.92 em :
     il déborde donc d'environ 0.25 em de chaque côté. */
  --debord: .28em;
  --lh-corps: 1.5;

  /* — espacement — */
  --gouttiere: 16px;
  --e-xs: 6px;
  --e-sm: 10px;
  --e-md: 16px;
  --e-lg: 24px;
  --e-xl: 40px;
  --e-2xl: 64px;
  --e-section: clamp(56px, 9vw, 120px);
  --largeur: 1240px;
  --largeur-texte: 62ch;

  /* — hauteurs d'interface — */
  --h-controle: 48px;
  --h-nav: 38px;
  --h-barre-mobile: 64px;
  --h-fleche: 52px;
  /* hauteur de l'en-tête sticky = ses marges internes + le bouton le plus haut.
     Le hero s'en sert pour finir pile en bas de l'écran ; une erreur de
     quelques pixels ne casse rien, elle décale juste la flèche d'autant. */
  --h-entete: 74px;
}

/* L'en-tête grandit par paliers ; ces trois blocs doivent rester dans cet
   ordre, sinon le plus large écrase le plus étroit. */
@media (min-width: 768px) { :root { --h-entete: 86px; } }

/* À partir du bureau, les commandes montent d'un cran : la DA est massive,
   des contrôles minuscules y paraissent timides et se cliquent moins bien. */
@media (min-width: 1024px) {
  :root {
    --h-entete: 96px;
    --t-nav: 13px;
    --t-bouton: 16px;
    --t-label: 12px;
    --h-controle: 56px;
    --h-nav: 46px;
    --pad-bouton: var(--e-xl);
    --pad-nav: 20px;
  }
}

/* -------------------------------------------------------------------------
   03. RESET ET BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--police);
  font-weight: 500;
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  color: var(--encre);
  background: var(--eau);
  overflow-x: clip;
  /* la capsule de navigation flotte au-dessus du contenu : on lui réserve sa
     hauteur, plus le retrait du bas, plus la zone sûre de l'appareil */
  padding-bottom: calc(var(--h-barre-mobile) + var(--e-lg) + env(safe-area-inset-bottom));
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-thickness: var(--trait-fin); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: var(--trait); }

button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--jaune); color: var(--encre); }

:focus-visible {
  outline: var(--trait) solid var(--encre);
  outline-offset: 3px;
  border-radius: var(--r-focus);
}
/* sur fond encre, le contour noir serait invisible */
.fond-encre :focus-visible, .lightbox :focus-visible { outline-color: var(--jaune); }

.saut-contenu {
  position: absolute;
  left: var(--e-sm);
  top: calc(var(--e-sm) * -6);
  z-index: 100;
  padding: var(--e-sm) var(--e-md);
  background: var(--jaune);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-capsule);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--dur-court) var(--ease-doux);
}
.saut-contenu:focus { top: var(--e-sm); }

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

/* -------------------------------------------------------------------------
   04. TYPOGRAPHIE
   ---------------------------------------------------------------------- */
.titrage {
  font-family: var(--titrage);
  font-weight: 400;
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  /* la display est très grasse : jamais sous 22px */
  font-size: max(22px, 1em);
}

h1, h2, h3, p, ul, ol { margin: 0; }

/* la titrage est assez large pour déborder d'un îlot étroit : on casse le mot
   plutôt que de laisser le texte sortir du cadre */
.t-page, .t-section, .t-ilot, .titre-carte__nom,
.membre__prenom, .date__lieu, .booking__mail { overflow-wrap: break-word; }
.membre__prenom, .date__lieu { -webkit-hyphens: auto; hyphens: auto; }

.t-page {
  font-family: var(--titrage);
  font-weight: 400;
  font-size: var(--t-page);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre-serre);
  text-wrap: balance;
}

.t-section {
  font-family: var(--titrage);
  font-weight: 400;
  font-size: var(--t-section);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre-serre);
  text-wrap: balance;
  margin-bottom: var(--e-lg);
}

.t-ilot {
  font-family: var(--titrage);
  font-weight: 400;
  font-size: var(--t-ilot);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
}

.sous-titre {
  font-size: var(--t-sous);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.label {
  font-size: var(--t-label);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* un titre d'îlot collé à son texte : la titrage n'a presque pas de gouttière
   propre, il lui en faut une explicite */
.t-ilot + .texte, .t-ilot + p { margin-top: var(--e-sm); }

.texte { max-width: var(--largeur-texte); }
.texte p { margin: 0 0 var(--e-md); }
.texte p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   05. VOCABULAIRE DE FORMES
   ---------------------------------------------------------------------- */

/* — îlot — la carte de base, jamais un rayon régulier — */
.ilot {
  position: relative;
  background: var(--blanc);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-ilot);
  padding: var(--e-lg);
}
.ilot:nth-child(4n+2) { border-radius: var(--r-ilot-b); }
.ilot:nth-child(4n+3) { border-radius: var(--r-ilot-c); }
.ilot:nth-child(4n+4) { border-radius: var(--r-ilot-d); }
.ilot--relief { box-shadow: var(--dur-relief); }

/* îlot cliquable : rebond au survol, écrasement au toucher */
.ilot--actif {
  --rot: 0deg;
  transform: rotate(var(--rot));
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
  .ilot--actif:hover, .ilot--actif:focus-within {
    transform: rotate(calc(var(--rot) + .6deg)) translateY(-4px);
    box-shadow: var(--dur-relief);
  }
}
@media (hover: none) {
  .ilot--actif:active { transform: rotate(var(--rot)) scale(.98); }
}

/* lien qui couvre tout l'îlot sans imbriquer de balises interactives */
.lien-etendu::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* — logo typographique —
   Posé en masque CSS : la couleur suit currentColor, donc encre sur fond clair
   et blanc dans le pied de page.
   Le tracé est recopié ici en data-URI plutôt que référencé par son fichier,
   parce que Chrome refuse de charger un SVG de masque en file:// : le logo
   disparaissait quand on ouvrait index.html par un simple double-clic.
   Le fichier source reste dans outils/logo-text.svg ; pour régénérer ce bloc
   après l'avoir modifié, voir README, section « Notes techniques ». */
.logo-masque {
  display: block;
  background-color: currentColor;
  aspect-ratio: 2716 / 475;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='Calque_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 2716.1 475.2'%3E%3Cdefs%3E%3Cstyle%3E .st0 { fill: currentColor; } %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M15.4,9.9h242c8.4,0,15.4,7,15.4,15.4v98.4c0,8.4-7,15.4-15.4,15.4h-85.5c-8.4,0-15.4,4.5-15.4,10.9s7,11.4,15.4,11.4h60.6c8.4,0,15.4,7,15.4,15.4v38.8c0,8.4-7,15.4-15.4,15.4h-60.6c-8.4,0-15.4,4.5-15.4,10.9s7,11.4,15.4,11.4h85.5c8.4,0,15.4,7,15.4,15.4v98.4c0,8.4-7,15.4-15.4,15.4H15.4c-8.4,0-15.4-7-15.4-15.4V25.3c0-8.4,7-15.4,15.4-15.4Z'/%3E%3Cpath class='st0' d='M474,261.8c-4,0-7.5,5.5-8.4,12.9l-9.9,94.9c-1,7.5-7.5,12.9-14.9,12.9h-128.2c-10.9,0-17.9-9.4-15.9-19.9l35.3-166.4c.5-2,.5-3,0-5l-34.8-161.5c-2.5-10.4,5-19.9,15.9-19.9h127.7c7.5,0,13.9,5.5,14.9,12.9l9.9,94.4c1,7.5,4.5,12.9,8.4,12.9s7.5-5.5,8.4-12.9l9.9-94.4c1-7.5,7.5-12.9,14.9-12.9h127.7c10.9,0,18.4,9.4,15.9,19.9l-34.8,161.5c-.5,2-.5,3,0,5l35.3,166.4c2.5,10.4-5,19.9-15.9,19.9h-128.2c-7.5,0-13.9-5.5-14.9-12.9l-9.9-94.9c-1-7.5-4.5-12.9-8.4-12.9Z'/%3E%3Cpath class='st0' d='M814.8,183.8h129.2c8.4,0,15.4,5.5,15.4,12.4s-7,12.4-15.4,12.4h-129.2c-8.4,0-15.4-5.5-15.4-12.4s7-12.4,15.4-12.4Z'/%3E%3Cpath class='st0' d='M1105.9,364.7l45.7-341.8c1-7.9,7-12.9,14.4-12.9h409.9c8.4,0,15.4,7,15.4,15.4v98.4c0,8.4-7,15.4-15.4,15.4h-85.5c-8.4,0-15.4,4.5-15.4,10.9s7,11.4,15.4,11.4h60.6c8.4,0,15.4,7,15.4,15.4v38.8c0,8.4-7,15.4-15.4,15.4h-60.6c-8.4,0-15.4,4.5-15.4,10.9s7,11.4,15.4,11.4h85.5c8.4,0,15.4,7,15.4,15.4v98.4c0,8.4-7,15.4-15.4,15.4h-242.9c-7.9,0-13.9-5.5-14.4-13.4l-4.5-50.7c-1-8.9-6.5-14.4-15.9-14.4h-16.9c-9.4,0-14.9,5.5-15.9,14.4l-4.5,50.7c-.5,7.9-6.5,13.4-14.4,13.4h-124.7c-9.9,0-17.4-7.5-15.9-17.9ZM1289.3,229.5h1c9.9,0,14.9-5.5,13.9-15.4l-5.5-60.6c-.5-8.4-4.5-13.9-8.9-13.9s-8.4,5.5-8.9,13.9l-5.5,60.6c-1,9.9,4,15.4,13.9,15.4Z'/%3E%3Cpath class='st0' d='M1952,467c-84.5,18.9-161.5,8.9-196.2-69.1-2-4.5-6-7.5-10.4-7.9-93.4-12.9-144.1-77-144.1-191.8S1670.8,0,1782.1,0s180.8,50.7,180.8,163-34.3,126.7-96.9,148.1c-16.4,6-22.9,24.3-6.5,28.8,24.3,6.5,56.1,2,84-3,10.4-2,19.4,5,19.4,15.9v100.4c0,6.5-4.5,12.4-10.9,13.9ZM1782.1,256.4c12.4,0,19.4-20.4,19.4-59.1s-7.5-60.6-19.4-60.6-19.4,18.9-19.4,60.6,7,59.1,19.4,59.1Z'/%3E%3Cpath class='st0' d='M1982.8,198.2V25.3c0-8.4,7-15.4,15.4-15.4h125.7c8.4,0,15.4,7,15.4,15.4v99.4c0,38.8,7,59.1,19.4,59.1s19.4-20.4,19.4-59.1V25.3c0-8.4,7-15.4,15.4-15.4h125.7c8.4,0,15.4,7,15.4,15.4v172.9c0,130.2-65.6,194.8-175.9,194.8s-175.9-65.6-175.9-194.8Z'/%3E%3Cpath class='st0' d='M2354.4,198.2c0-136.1,69.6-198.2,180.8-198.2s180.8,62.1,180.8,198.2-65.6,194.8-180.8,194.8-180.8-65.6-180.8-194.8ZM2535.3,256.4c12.4,0,19.4-20.4,19.4-59.1s-7.5-60.6-19.4-60.6-19.4,18.9-19.4,60.6,7,59.1,19.4,59.1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg id='Calque_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 2716.1 475.2'%3E%3Cdefs%3E%3Cstyle%3E .st0 { fill: currentColor; } %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M15.4,9.9h242c8.4,0,15.4,7,15.4,15.4v98.4c0,8.4-7,15.4-15.4,15.4h-85.5c-8.4,0-15.4,4.5-15.4,10.9s7,11.4,15.4,11.4h60.6c8.4,0,15.4,7,15.4,15.4v38.8c0,8.4-7,15.4-15.4,15.4h-60.6c-8.4,0-15.4,4.5-15.4,10.9s7,11.4,15.4,11.4h85.5c8.4,0,15.4,7,15.4,15.4v98.4c0,8.4-7,15.4-15.4,15.4H15.4c-8.4,0-15.4-7-15.4-15.4V25.3c0-8.4,7-15.4,15.4-15.4Z'/%3E%3Cpath class='st0' d='M474,261.8c-4,0-7.5,5.5-8.4,12.9l-9.9,94.9c-1,7.5-7.5,12.9-14.9,12.9h-128.2c-10.9,0-17.9-9.4-15.9-19.9l35.3-166.4c.5-2,.5-3,0-5l-34.8-161.5c-2.5-10.4,5-19.9,15.9-19.9h127.7c7.5,0,13.9,5.5,14.9,12.9l9.9,94.4c1,7.5,4.5,12.9,8.4,12.9s7.5-5.5,8.4-12.9l9.9-94.4c1-7.5,7.5-12.9,14.9-12.9h127.7c10.9,0,18.4,9.4,15.9,19.9l-34.8,161.5c-.5,2-.5,3,0,5l35.3,166.4c2.5,10.4-5,19.9-15.9,19.9h-128.2c-7.5,0-13.9-5.5-14.9-12.9l-9.9-94.9c-1-7.5-4.5-12.9-8.4-12.9Z'/%3E%3Cpath class='st0' d='M814.8,183.8h129.2c8.4,0,15.4,5.5,15.4,12.4s-7,12.4-15.4,12.4h-129.2c-8.4,0-15.4-5.5-15.4-12.4s7-12.4,15.4-12.4Z'/%3E%3Cpath class='st0' d='M1105.9,364.7l45.7-341.8c1-7.9,7-12.9,14.4-12.9h409.9c8.4,0,15.4,7,15.4,15.4v98.4c0,8.4-7,15.4-15.4,15.4h-85.5c-8.4,0-15.4,4.5-15.4,10.9s7,11.4,15.4,11.4h60.6c8.4,0,15.4,7,15.4,15.4v38.8c0,8.4-7,15.4-15.4,15.4h-60.6c-8.4,0-15.4,4.5-15.4,10.9s7,11.4,15.4,11.4h85.5c8.4,0,15.4,7,15.4,15.4v98.4c0,8.4-7,15.4-15.4,15.4h-242.9c-7.9,0-13.9-5.5-14.4-13.4l-4.5-50.7c-1-8.9-6.5-14.4-15.9-14.4h-16.9c-9.4,0-14.9,5.5-15.9,14.4l-4.5,50.7c-.5,7.9-6.5,13.4-14.4,13.4h-124.7c-9.9,0-17.4-7.5-15.9-17.9ZM1289.3,229.5h1c9.9,0,14.9-5.5,13.9-15.4l-5.5-60.6c-.5-8.4-4.5-13.9-8.9-13.9s-8.4,5.5-8.9,13.9l-5.5,60.6c-1,9.9,4,15.4,13.9,15.4Z'/%3E%3Cpath class='st0' d='M1952,467c-84.5,18.9-161.5,8.9-196.2-69.1-2-4.5-6-7.5-10.4-7.9-93.4-12.9-144.1-77-144.1-191.8S1670.8,0,1782.1,0s180.8,50.7,180.8,163-34.3,126.7-96.9,148.1c-16.4,6-22.9,24.3-6.5,28.8,24.3,6.5,56.1,2,84-3,10.4-2,19.4,5,19.4,15.9v100.4c0,6.5-4.5,12.4-10.9,13.9ZM1782.1,256.4c12.4,0,19.4-20.4,19.4-59.1s-7.5-60.6-19.4-60.6-19.4,18.9-19.4,60.6,7,59.1,19.4,59.1Z'/%3E%3Cpath class='st0' d='M1982.8,198.2V25.3c0-8.4,7-15.4,15.4-15.4h125.7c8.4,0,15.4,7,15.4,15.4v99.4c0,38.8,7,59.1,19.4,59.1s19.4-20.4,19.4-59.1V25.3c0-8.4,7-15.4,15.4-15.4h125.7c8.4,0,15.4,7,15.4,15.4v172.9c0,130.2-65.6,194.8-175.9,194.8s-175.9-65.6-175.9-194.8Z'/%3E%3Cpath class='st0' d='M2354.4,198.2c0-136.1,69.6-198.2,180.8-198.2s180.8,62.1,180.8,198.2-65.6,194.8-180.8,194.8-180.8-65.6-180.8-194.8ZM2535.3,256.4c12.4,0,19.4-20.4,19.4-59.1s-7.5-60.6-19.4-60.6-19.4,18.9-19.4,60.6,7,59.1,19.4,59.1Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* — capsule — */
.capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--e-xs);
  color: var(--encre);
  min-height: 30px;
  padding: var(--e-xs) 14px;
  background: var(--blanc);
  border: var(--trait-fin) solid var(--encre);
  border-radius: var(--r-capsule);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.capsule--eau { background: var(--eau); }
.capsule--jaune { background: var(--jaune); }
.capsule--rose { background: var(--rose); }
.capsule--bleu { background: var(--bleu); }
.capsule--vert { background: var(--vert); }
.capsule--rouge { background: var(--rouge-fonce); color: var(--blanc); }
.capsule--encre { background: var(--encre); color: var(--blanc); }

/* — bouton — */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-sm);
  color: var(--encre);
  min-height: var(--h-controle);
  padding: 0 var(--pad-bouton);
  background: var(--blanc);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-capsule);
  font-weight: 700;
  font-size: var(--t-bouton);
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur-court) var(--ease-doux);
}
.bouton:hover { transform: translateY(-3px); box-shadow: var(--dur-relief-petit); }
/* un bouton désactivé, c'est le choix déjà en vigueur : il reste lisible,
   il ne fait juste plus rien */
.bouton[disabled] { opacity: .45; cursor: default; }
.bouton[disabled]:hover { transform: none; box-shadow: var(--dur-relief); }
.bouton:active { transform: translateY(0); box-shadow: none; }
.bouton--jaune { background: var(--jaune); }
.bouton--encre { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.bouton--encre:hover { box-shadow: 4px 4px 0 var(--blanc); }
.bouton--grand { min-height: 60px; padding: 0 var(--e-xl); font-size: var(--t-sous); }

/* — blobs de fond — */
/* z-index 0 et non -1 : la section porte elle-même son aplat de fond, et un
   z-index négatif ferait passer le blob DERRIÈRE cet aplat, donc invisible.
   À 0 il se pose sur le fond, sous le contenu qui suit dans le DOM. */
.blob {
  position: absolute;
  z-index: 0;
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-blob-a);
  pointer-events: none;
  will-change: transform;
  animation: morphe var(--dur-blob) ease-in-out infinite;
}
.blob--jaune { background: var(--jaune); }
.blob--rose { background: var(--rose); }
.blob--bleu { background: var(--bleu); }
.blob--vert { background: var(--vert); }
.blob--rouge { background: var(--rouge); }
.blob--eau { background: var(--eau); }
.blob--b { border-radius: var(--r-blob-b); animation-direction: reverse; animation-duration: calc(var(--dur-blob) * 1.3); }
.blob--c { border-radius: var(--r-blob-c); animation-duration: calc(var(--dur-blob) * .8); }

@keyframes morphe {
  0%   { border-radius: var(--r-blob-a); transform: translate3d(0, 0, 0) rotate(0deg); }
  33%  { border-radius: var(--r-blob-b); transform: translate3d(2%, -3%, 0) rotate(4deg); }
  66%  { border-radius: var(--r-blob-c); transform: translate3d(-2%, 2%, 0) rotate(-3deg); }
  100% { border-radius: var(--r-blob-a); transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* — bandeau défilant — */
.bandeau {
  --defile: var(--dur-marquee);
  overflow: hidden;
  border-top: var(--trait) solid var(--encre);
  border-bottom: var(--trait) solid var(--encre);
  background: var(--encre);
  color: var(--blanc);
  padding: var(--e-md) 0;
}
.bandeau:empty { display: none; }
.bandeau__piste {
  display: flex;
  width: max-content;
  align-items: center;
  gap: var(--e-lg);
  font-family: var(--titrage);
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1;
  letter-spacing: var(--ls-titre);
  white-space: nowrap;
  will-change: transform;
  animation: defile var(--defile) linear infinite;
}
.bandeau__piste img { width: 26px; height: auto; }
@keyframes defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* -------------------------------------------------------------------------
   06. EN-TÊTE ET NAVIGATION
   ---------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-md);
  padding: var(--e-sm) var(--gouttiere);
  background: inherit;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e-sm);
  text-decoration: none;
  flex: 0 0 auto;
}
.marque img {
  width: 44px;
  height: 58px;
  object-fit: contain;
  view-transition-name: marque-gaspi;
}
.marque:hover img { animation: flotte var(--dur-flotte) var(--ease-doux) infinite; }

/* capsule de navigation */
/* Barre d'onglets mobile.
   Elle était à ras des bords, blanche, sans relief : elle se lisait comme une
   bande de pied de page et on ne la voyait pas. Elle flotte maintenant en
   capsule détachée, avec le même contour et la même ombre dure que la nav du
   desktop, pour se lire immédiatement comme une commande. */
.nav {
  position: fixed;
  left: var(--e-sm);
  right: var(--e-sm);
  bottom: calc(var(--e-sm) + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  justify-content: space-between;
  gap: 2px;
  padding: var(--e-xs);
  background: var(--blanc);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-capsule);
  box-shadow: var(--dur-relief);
}
.nav__lien {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 2px;
  border-radius: var(--r-capsule);
  font-size: var(--t-nav);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: color var(--dur-court) var(--ease-doux);
}
/* repli sans JS : la page active est simplement jaune */
.nav__lien[aria-current='page'] { background: var(--jaune); }

/* avec JS : un indicateur unique qui glisse */
.nav.is-glisse .nav__lien[aria-current='page'] { background: var(--transparent); }
/* L'indicateur est une barre pleine largeur que l'on découpe : animer un
   clip-path ne coûte que du dessin, là où animer width ou left aurait forcé
   un recalcul de mise en page à chaque image. */
.nav.is-glisse::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: var(--e-xs);
  left: var(--e-xs);
  right: var(--e-xs);
  height: 46px;
  background: var(--jaune);
  clip-path: inset(0 var(--ind-droite, 100%) 0 var(--ind-gauche, 0) round var(--r-capsule));
  transition: clip-path var(--dur) var(--ease);
  will-change: clip-path;
}

.entete__actions { display: flex; align-items: center; gap: var(--e-sm); flex: 0 0 auto; }

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .nav {
    position: relative;
    /* en relatif, les décalages du mode mobile déplaceraient la capsule */
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 1 auto;
    justify-content: center;
    gap: 0;
    padding: var(--e-xs);
    border: var(--trait) solid var(--encre);
    border-radius: var(--r-capsule);
    box-shadow: var(--dur-relief-petit);
  }
  .nav__lien { flex: 0 0 auto; min-height: var(--h-nav); padding: 0 var(--pad-nav); }
  .nav.is-glisse::before { top: var(--e-xs); left: var(--e-xs); right: var(--e-xs); height: var(--h-nav); }
  .entete { padding: var(--e-md) var(--e-lg); }
}


/* — sélecteur de plateforme d'écoute —
   Bâti sur <details> : il s'ouvre, se ferme et se pilote au clavier sans une
   ligne de JavaScript. Le JS ne fait qu'une chose en plus : se souvenir du
   choix pour que tous les boutons « Écouter » du site s'y alignent. */
.choix { position: relative; }
.choix__declencheur { list-style: none; user-select: none; }
.choix__declencheur::-webkit-details-marker { display: none; }
.choix__declencheur::after {
  content: '';
  width: 0; height: 0;
  margin-left: var(--e-xs);
  border-top: 6px solid currentColor;
  border-left: 5px solid var(--transparent);
  border-right: 5px solid var(--transparent);
  transition: transform var(--dur-court) var(--ease-doux);
}
.choix[open] .choix__declencheur::after { transform: rotate(180deg); }
.choix__panneau {
  position: absolute;
  right: 0;
  top: calc(100% + var(--e-sm));
  z-index: 50;
  min-width: 210px;
  padding: var(--e-md);
  background: var(--blanc);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-ilot-b);
  box-shadow: var(--dur-relief);
}
.choix__intro {
  margin: 0 0 var(--e-sm);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.choix__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-xs); }
.choix__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-sm);
  min-height: 40px;
  padding: 0 var(--e-md);
  border: var(--trait-fin) solid var(--encre);
  border-radius: var(--r-capsule);
  font-weight: 700;
  font-size: var(--t-petit);
  text-decoration: none;
  transition: background-color var(--dur-court) var(--ease-doux);
}
.choix__lien:hover, .choix__lien:focus-visible { background: var(--jaune); }
/* la plateforme retenue par le visiteur */
.choix__lien[aria-current='true'] { background: var(--eau); }
.choix__lien[aria-current='true']::after { content: '✓'; font-size: 15px; }

/* sur mobile l'en-tête est étroit : le panneau se cale sur le bord de l'écran */
@media (max-width: 460px) {
  .choix__panneau { right: 0; min-width: min(240px, calc(100vw - var(--e-xl))); }
}

/* -------------------------------------------------------------------------
   07. PIED DE PAGE
   ---------------------------------------------------------------------- */
.pied {
  background: var(--encre);
  color: var(--blanc);
  padding: var(--e-2xl) var(--gouttiere) var(--e-xl);
  border-top: var(--trait) solid var(--encre);
}
.pied__interieur {
  max-width: var(--largeur);
  margin: 0 auto;
  display: grid;
  gap: var(--e-xl);
}
.pied__logo { width: min(280px, 72vw); color: var(--blanc); }
.pied__colonnes {
  display: grid;
  gap: var(--e-lg);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pied h2 { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; margin-bottom: var(--e-sm); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-xs); }
.pied a { text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-sm) var(--e-lg);
  padding-top: var(--e-lg);
  border-top: var(--trait-fin) solid var(--blanc);
  font-size: var(--t-petit);
}
@media (min-width: 768px) {
  .pied { padding-inline: var(--e-xl); }
  .pied__interieur { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
  .pied__bas { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   08. STRUCTURE DES SECTIONS
   ---------------------------------------------------------------------- */
.section {
  position: relative;
  padding: var(--e-section) var(--gouttiere);
  border-top: var(--trait) solid var(--encre);
  overflow: clip;
}
.section__interieur { position: relative; z-index: 1; max-width: var(--largeur); margin: 0 auto; }
@media (min-width: 768px) { .section { padding-inline: var(--e-xl); } }

.fond-eau { background: var(--eau); }
.fond-jaune { background: var(--jaune); }
.fond-rose { background: var(--rose); }
.fond-blanc { background: var(--blanc); }
.fond-encre { background: var(--encre); color: var(--blanc); }
.fond-encre .ilot { color: var(--encre); }

/* en-tête court des pages intérieures */
.chapeau {
  position: relative;
  padding: var(--e-xl) var(--gouttiere) var(--e-2xl);
  overflow: clip;
}
.chapeau__interieur { position: relative; z-index: 1; max-width: var(--largeur); margin: 0 auto; }
.chapeau h1 { view-transition-name: titre-page; }
.chapeau .sous-titre { margin-top: var(--e-md); max-width: var(--largeur-texte); }
@media (min-width: 768px) { .chapeau { padding-inline: var(--e-xl); } }

.grille {
  display: grid;
  gap: var(--gouttiere);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.grille--large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

/* -------------------------------------------------------------------------
   09. HERO (accueil)
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  /* on retranche l'en-tête, qui occupe le flux au-dessus, et la capsule de nav */
  min-height: calc(100svh - var(--h-entete) - var(--h-barre-mobile) - var(--e-lg));
  display: grid;
  place-items: center;
  padding: var(--e-2xl) var(--gouttiere) var(--e-xl);
  text-align: center;
  overflow: clip;
}
.hero__interieur { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--e-md); }
.hero__logo {
  width: min(880px, 76vw);
  color: var(--encre);
  view-transition-name: logo-texte;
}
.hero__baseline {
  font-family: var(--titrage);
  font-size: clamp(24px, 4.6vw, 54px);
  letter-spacing: var(--ls-titre);
  line-height: 1;
}
.hero__intro {
  max-width: 44ch;
  font-size: var(--t-sous);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
  margin-top: var(--e-xs);
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-sm); margin-top: var(--e-sm); }
/* la prochaine date, construite depuis data.js : disparaît s'il n'y en a pas */
.hero__date:empty { display: none; }
.hero__date a {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-sm);
  font-weight: 700;
  font-size: var(--t-petit);
  text-decoration: none;
}
.hero__date a:hover .hero__date__texte { text-decoration: underline; text-decoration-thickness: var(--trait-fin); }

/* Gaspi flotte dans l'angle du hero, sur le blob jaune. En étroit il n'y a
   plus de place libre — le hero est rempli par le texte et les boutons — et il
   retombait sur la date : on le réserve au grand écran, d'autant qu'il figure
   déjà dans l'en-tête de toutes les pages. */
.hero__gaspi { display: none; }
@media (min-width: 1100px) {
  .hero__gaspi {
    display: block;
    position: absolute;
    z-index: 3;
    top: 7%;
    left: 3%;
    width: clamp(110px, 11vw, 155px);
    animation: flotte var(--dur-flotte) ease-in-out infinite;
  }
}

/* collage : deux photos posées dans les angles vides, en grand écran seulement */
.hero__photo {
  --angle: 0deg;
  position: absolute;
  z-index: 1;
  display: none;
  rotate: var(--angle);
  animation: flotte-photo var(--dur-flotte-photo) ease-in-out infinite;
  will-change: translate, rotate;
  width: clamp(170px, 15vw, 240px);
  height: auto;
  object-fit: cover;
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-cadre);
  box-shadow: var(--dur-relief);
}
/* L'inclinaison passe par la propriété `rotate` et non par `transform` : les
   deux sont indépendantes, ce qui permet d'animer la dérive verticale sans
   écraser l'angle de base, et de faire osciller l'angle par-dessus. */
.hero__photo--g { left: 3%; bottom: 14%; --angle: -5deg; }
.hero__photo--d { right: 3%; top: 26%; --angle: 4deg; animation-duration: calc(var(--dur-flotte-photo) * 1.4); animation-delay: calc(var(--dur-flotte-photo) * -.5); }
@media (min-width: 1100px) { .hero__photo { display: block; } }

@keyframes flotte-photo {
  0%, 100% { translate: 0 0; rotate: var(--angle); }
  50%      { translate: 0 -18px; rotate: calc(var(--angle) + 1.4deg); }
}

/* La flèche ne doit jamais passer sur le texte. Par défaut elle suit donc le
   contenu dans le flux : posée en dernière rangée de la grille du hero, elle ne
   peut pas le recouvrir, même sur un écran court où le contenu déborde. Elle ne
   se détache en bas de section que s'il y a franchement la place. */
.hero__fleche {
  position: static;
  z-index: 2;
  margin-top: var(--e-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-fleche); height: var(--h-fleche);
  background: var(--blanc);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-rond);
  text-decoration: none;
  font-size: 22px;
  animation: rebondis var(--dur-fleche) var(--ease-doux) infinite;
}
/* Ailleurs les formes sont une texture de fond qui respire à peine ; dans le
   hero elles font partie du décor, donc elles dérivent franchement. Chacune a
   sa durée et son décalage, sinon les quatre battent ensemble et ça se voit.
   L'animation n'occupe que `transform` : la propriété `translate` reste au
   parallaxe de main.js, les deux se composent sans se marcher dessus. */
.hero .blob { animation-name: derive; animation-duration: var(--dur-derive); animation-direction: normal; }
.hero .blob--1 { width: 46vw; height: 46vw; max-width: 460px; max-height: 460px; top: -10%; left: -14%;
                 animation-duration: calc(var(--dur-derive) * 1.6); }
.hero .blob--2 { width: 38vw; height: 38vw; max-width: 380px; max-height: 380px; bottom: -12%; right: -10%;
                 animation-duration: calc(var(--dur-derive) * 1.25); animation-direction: reverse; }
.hero .blob--3 { width: 22vw; height: 22vw; max-width: 210px; max-height: 210px; top: 12%; right: 8%;
                 animation-duration: calc(var(--dur-derive) * .8); animation-delay: calc(var(--dur-derive) * -.35); }
.hero .blob--4 { width: 22vw; height: 22vw; max-width: 150px; max-height: 150px; bottom: 8%; left: 8%;
                 animation-duration: var(--dur-derive); animation-delay: calc(var(--dur-derive) * -.6);
                 animation-direction: reverse; }

@keyframes derive {
  0%   { border-radius: var(--r-blob-a); transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  25%  { border-radius: var(--r-blob-b); transform: translate3d(5%, -6%, 0) rotate(7deg) scale(1.06); }
  50%  { border-radius: var(--r-blob-c); transform: translate3d(-4%, 5%, 0) rotate(-6deg) scale(.95); }
  75%  { border-radius: var(--r-blob-b); transform: translate3d(6%, 4%, 0) rotate(4deg) scale(1.03); }
  100% { border-radius: var(--r-blob-a); transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

@media (min-width: 768px) { .hero { min-height: calc(100svh - var(--h-entete)); } }

/* Écran large ET fenêtre haute : la flèche redevient un repère posé en bas de
   section, et le hero réserve la hauteur correspondante pour que le contenu
   centré ne puisse pas descendre jusqu'à elle. */
@media (min-width: 768px) and (min-height: 700px) {
  .hero { padding-bottom: calc(var(--e-xl) + var(--h-fleche) + var(--e-lg)); }
  .hero__fleche {
    position: absolute;
    left: 50%;
    bottom: var(--e-xl);
    translate: -50% 0;
    margin-top: 0;
  }
}


@keyframes flotte {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50%      { transform: translate3d(0, -14px, 0) rotate(2deg); }
}
@keyframes rebondis {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, 8px, 0); }
}


/* — chiffres clés — */
.chiffres {
  display: grid;
  gap: var(--gouttiere);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  margin: 0; padding: 0;
  list-style: none;
}
.chiffre { display: grid; gap: var(--e-xs); align-content: center; text-align: center; min-height: 190px; }
.chiffre--jaune { background: var(--jaune); }
.chiffre--rose { background: var(--rose); }
.chiffre--bleu { background: var(--bleu); }
.chiffre--vert { background: var(--vert); }
.chiffre--eau { background: var(--eau); }
.chiffre__valeur {
  font-family: var(--titrage);
  font-size: clamp(42px, 6.4vw, 76px);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre-serre);
  overflow-wrap: break-word;
}
/* une valeur en toutes lettres ne tient pas au corps d'un nombre */
.chiffre--mot .chiffre__valeur { font-size: clamp(30px, 4.2vw, 50px); }
.chiffre__unite { font-size: .6em; vertical-align: .18em; margin-right: .04em; }
.chiffre__libelle { font-size: var(--t-petit); font-weight: 700; line-height: 1.2; text-wrap: balance; overflow-wrap: break-word; }

/* -------------------------------------------------------------------------
   10. TITRES ET LECTEUR SPOTIFY
   ---------------------------------------------------------------------- */
.titre-carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  min-height: 160px;
  justify-content: space-between;
  text-decoration: none;
}
.titre-carte--eau { background: var(--eau); }
.titre-carte--jaune { background: var(--jaune); }
.titre-carte--rose { background: var(--rose); }
.titre-carte--bleu { background: var(--bleu); }
.titre-carte--vert { background: var(--vert); }
.titre-carte--rouge { background: var(--rouge-fonce); color: var(--blanc); }
.titre-carte__numero { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); }
/* « Topinambour » ne rentre pas dans une carte de 290 px : on demande une
   césure française (la page est en lang="fr") plutôt qu'une coupe sèche
   en plein milieu du mot. */
.titre-carte__nom {
  font-family: var(--titrage);
  font-size: clamp(22px, 2.9vw, 30px);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  -webkit-hyphens: auto;
  hyphens: auto;
}
.titre-carte__feat { display: block; font-family: var(--police); font-size: var(--t-petit); font-weight: 700; letter-spacing: 0; margin-top: var(--e-xs); }
.titre-carte__pochette { border: var(--trait-fin) solid var(--encre); border-radius: var(--r-cadre); margin-bottom: var(--e-sm); }

.lecteur { display: grid; gap: var(--e-md); }
.lecteur__cadre {
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-cadre);
  overflow: hidden;
  background: var(--encre);
}
.lecteur__cadre iframe { width: 100%; height: 420px; border: 0; }
.lecteur__note { font-size: var(--t-petit); max-width: var(--largeur-texte); }

/* -------------------------------------------------------------------------
   11. VIDÉOS
   ---------------------------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: var(--e-sm); margin-bottom: var(--e-lg); padding: 0; list-style: none; }
.filtres button { background: var(--blanc); }
.filtres button[aria-pressed='true'] { background: var(--jaune); }

.video { padding: 0; overflow: hidden; }
.video__bouton {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--encre);
  position: relative;
  aspect-ratio: 16 / 9;
}
.video__bouton img { width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 66px; height: 66px;
  display: grid;
  place-items: center;
  background: var(--jaune);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-rond);
  transition: transform var(--dur) var(--ease);
}
.video__bouton:hover .video__play { transform: scale(1.12); }
.video__play::after {
  content: '';
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 18px solid var(--encre);
  border-top: 11px solid var(--transparent);
  border-bottom: 11px solid var(--transparent);
}
.video__corps { padding: var(--e-md) var(--e-lg) var(--e-lg); display: grid; gap: var(--e-sm); }
.video__meta { display: flex; flex-wrap: wrap; gap: var(--e-xs); align-items: center; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }
.video__lien { font-size: var(--t-petit); }

/* -------------------------------------------------------------------------
   12. MEMBRES
   ---------------------------------------------------------------------- */
/* cinq membres : la grille par défaut en retenait quatre et laissait le
   cinquième tout seul sur sa ligne. On resserre pour qu'ils tiennent en un rang. */
[data-rendu="membres"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 178px), 1fr)); }
.membre { display: grid; gap: var(--e-md); text-align: center; justify-items: center; }
.membre--eau { background: var(--eau); }
.membre--jaune { background: var(--jaune); }
.membre--rose { background: var(--rose); }
.membre--bleu { background: var(--bleu); }
.membre--vert { background: var(--vert); }
.membre--rouge { background: var(--rouge-fonce); color: var(--blanc); }
.membre--rouge .capsule { color: var(--encre); }
.membre img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-cadre);
}
.membre__prenom { font-family: var(--titrage); font-size: var(--t-ilot); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); }

.recit { display: grid; gap: var(--e-xl); align-items: start; }
.recit__portrait {
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-ilot-c);
  box-shadow: var(--dur-relief);
  width: 100%;
}
@media (min-width: 900px) {
  /* le texte est plus court que la photo : on le centre plutôt que de le
     coller en haut, sinon tout le blanc s'accumule sous lui */
  .recit {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: var(--e-2xl);
    align-items: center;
  }
}

/* -------------------------------------------------------------------------
   13. DATES
   ---------------------------------------------------------------------- */
.dates { display: grid; gap: var(--gouttiere); list-style: none; margin: 0; padding: 0; }
.date {
  display: grid;
  gap: var(--e-md);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
.date__jour {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 84px;
  padding: var(--e-sm);
  background: var(--jaune);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-cadre);
  font-family: var(--titrage);
  line-height: 1;
  letter-spacing: var(--ls-titre-serre);
}
.date__nombre { font-size: clamp(32px, 5vw, 46px); }
.date__mois { font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.date__annee { font-family: var(--police); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); }
.date__corps { display: grid; gap: var(--e-xs); }
.date__lieu { font-family: var(--titrage); font-size: clamp(22px, 3vw, 30px); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); }
.date__infos { display: flex; flex-wrap: wrap; gap: var(--e-xs); align-items: center; }
/* l'affiche ne doit pas manger la carte : elle reste un complément,
   le jour et le lieu gardent la priorité de lecture */
.date__visuel { max-width: 420px; }
/* Placement explicite : l'ordre du DOM est jour, visuel, corps, et l'auto-
   placement collait le visuel dans la colonne du corps. En étroit le visuel
   passe sous la ligne ; à partir de 880 px il prend une troisième colonne,
   sinon tout s'entassait à gauche et la moitié droite restait blanche. */
.date:has(.date__visuel) .date__jour   { grid-column: 1; grid-row: 1; }
.date:has(.date__visuel) .date__corps  { grid-column: 2; grid-row: 1; }
.date:has(.date__visuel) .date__visuel { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 880px) {
  .date:has(.date__visuel) {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 360px);
    align-items: center;
    column-gap: var(--e-xl);
  }
  .date:has(.date__visuel) .date__visuel {
    grid-column: 3;
    grid-row: 1;
    max-width: none;
    margin: 0;
  }
}

/* — prochaine date, sur l'accueil —
   Une seule colonne laissait la moitié droite vide sous une date géante.
   Dès qu'il y a la place, l'affiche part à droite et l'information à gauche. */
.prochaine { display: grid; gap: var(--e-lg); align-items: center; }
.prochaine__infos { display: grid; gap: var(--e-sm); align-content: start; justify-items: start; }
.prochaine__date {
  font-family: var(--titrage);
  font-size: clamp(38px, 6.4vw, 78px);
  line-height: .86;
  letter-spacing: var(--ls-titre-serre);
  /* la titrage réserve une ligne bien plus haute que ses capitales :
     on reprend ce vide en haut, sans toucher au bas où descend le Q */
  margin-top: -.06em;
}
.prochaine__lieu { margin-top: var(--e-xs); }
.prochaine .date__infos, .prochaine .booking__liens { margin-top: var(--e-xs); }
.prochaine .date__visuel { max-width: none; }
@media (min-width: 880px) {
  .prochaine {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    gap: var(--e-xl);
  }
}
.date__visuel img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--trait-fin) solid var(--encre);
  border-radius: var(--r-cadre);
}
/* badge d'une date dont on ne connaît que le mois : l'année prend la place
   du quantième, donc elle doit tenir dans la même largeur */
.date__jour--mois .date__nombre { font-size: clamp(22px, 3.2vw, 30px); }
.date--passee { opacity: .62; }
.date--passee .date__jour { background: var(--blanc); }

.passees[hidden] { display: none; }
.vide { display: grid; gap: var(--e-md); justify-items: start; background: var(--jaune); }

/* -------------------------------------------------------------------------
   14. GALERIE ET LIGHTBOX
   ---------------------------------------------------------------------- */
/* une série = un titre, un chapô, et sa propre mosaïque */
.series { display: grid; gap: var(--e-2xl); }
.serie__titre { margin-bottom: var(--e-xs); }
.serie__texte { max-width: var(--largeur-texte); margin-bottom: var(--e-lg); font-size: var(--t-sous); font-weight: 700; line-height: 1.25; text-wrap: balance; }

.mosaique {
  display: grid;
  gap: var(--gouttiere);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .mosaique { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mosaique { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mosaique li { display: flex; }
.photo {
  --rot: 0deg;
  display: block;
  width: 100%;
  padding: 0;
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-cadre);
  overflow: hidden;
  background: var(--blanc);
  transform: rotate(var(--rot));
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.photo--paysage img { aspect-ratio: 3 / 2; }
.mosaique li.est-large { grid-column: span 2; }
.photo--large img { aspect-ratio: 3 / 2; }
.photo--haut img { aspect-ratio: 3 / 4; }
@media (min-width: 768px) {
  .mosaique li.est-haut { grid-row: span 2; }
  .est-haut .photo, .est-haut .photo img { height: 100%; }
  .est-haut .photo img { aspect-ratio: auto; }
}
/* rotations pseudo-aléatoires, déterministes : pas de JS, pas de saut de mise en page */
.mosaique li:nth-child(6n+1) .photo { --rot: -1.6deg; }
.mosaique li:nth-child(6n+2) .photo { --rot: 1.1deg; }
.mosaique li:nth-child(6n+3) .photo { --rot: -.7deg; }
.mosaique li:nth-child(6n+4) .photo { --rot: 1.9deg; }
.mosaique li:nth-child(6n+5) .photo { --rot: -1.2deg; }
.mosaique li:nth-child(6n+6) .photo { --rot: .6deg; }
@media (hover: hover) {
  .photo:hover { transform: rotate(calc(var(--rot) + .6deg)) translateY(-4px); box-shadow: var(--dur-relief); }
}
@media (hover: none) { .photo:active { transform: rotate(var(--rot)) scale(.98); } }

/* Aperçu 4 photos sur l'accueil.
   Toutes au même format, sinon une photo paysage glissée au milieu de portraits
   creuse un trou dans la rangée. Le recadrage est fait par object-fit. */
.teaser { display: grid; gap: var(--gouttiere); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.teaser .photo img { aspect-ratio: 3 / 4; }
@media (min-width: 768px) { .teaser { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* lightbox maison */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--e-md);
  padding: var(--e-md);
  background: var(--voile);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox__barre { display: flex; justify-content: space-between; align-items: center; gap: var(--e-md); }
.lightbox__compteur { color: var(--blanc); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); }
.lightbox__scene { position: relative; min-height: 0; }
/* Le <picture> s'efface, et l'image est posée en absolu dans la scène : c'est
   le seul montage où max-height:100% se résout de façon fiable, une image
   centrée par la grille étant dimensionnée sur son contenu. */
.lightbox__scene picture { display: contents; }
.lightbox__scene img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-cadre);
  background: var(--blanc);
}
.lightbox__legende { color: var(--blanc); text-align: center; font-size: var(--t-petit); max-width: var(--largeur-texte); margin: 0 auto; }
.lightbox__nav { display: flex; justify-content: center; gap: var(--e-md); }
.lightbox__rond {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--blanc);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-rond);
  font-size: 20px;
}
.lightbox__rond:hover { background: var(--jaune); }
body.est-bloque { overflow: hidden; }

/* -------------------------------------------------------------------------
   15. BOOKING ET REBOND
   ---------------------------------------------------------------------- */
.booking {
  display: grid;
  gap: var(--e-lg);
  background: var(--encre);
  color: var(--blanc);
  border-color: var(--encre);
  box-shadow: var(--dur-relief-grand);
  padding: var(--e-xl) var(--e-lg);
}
.booking .t-section { margin-bottom: 0; }
/* le même défaut que la prochaine date : tout empilé à gauche, la moitié
   droite vide. Au-delà de 900 px, les boutons partent à droite. */
@media (min-width: 900px) {
  .booking {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--e-2xl);
  }
  .booking > :not(.booking__liens) { grid-column: 1; }
  /* > direct et préfixé .booking : sans ça la règle attrapait tous les
     groupes de boutons du site et les empilait en colonne étirée */
  .booking > .booking__liens {
    grid-column: 2;
    grid-row: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    align-self: center;
  }
}
.booking__mail { font-family: var(--titrage); font-size: clamp(22px, 4vw, 40px); letter-spacing: var(--ls-titre); word-break: break-word; }
.booking__liens { display: flex; flex-wrap: wrap; gap: var(--e-sm); }
@media (min-width: 768px) { .booking { padding: var(--e-2xl) var(--e-xl); } }

.rebond {
  display: grid;
  gap: var(--e-sm);
  justify-items: start;
  text-decoration: none;
  background: var(--blanc);
}
.rebond__fleche { font-family: var(--titrage); font-size: var(--t-section); line-height: 1; }
/* la flèche passe à droite du titre au lieu de s'empiler dessous, ce qui
   divisait par deux la hauteur du bloc et remplissait le vide de droite */
@media (min-width: 700px) {
  .rebond {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--e-xl);
  }
  .rebond > .label, .rebond > .t-section { grid-column: 1; }
  .rebond__fleche { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}
.rebond:hover .rebond__fleche { transform: translateX(6px); }
.rebond__fleche { transition: transform var(--dur) var(--ease); }

/* -------------------------------------------------------------------------
   16. ANIMATIONS D'APPARITION
   ---------------------------------------------------------------------- */
.apparait {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity var(--dur-long) var(--ease-doux) var(--retard, 0ms),
              transform var(--dur-long) var(--ease) var(--retard, 0ms);
  will-change: opacity, transform;
}
.apparait.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
/* sans JS l'observer ne tourne jamais : on montre tout d'emblée */
html:not(.js) .apparait { opacity: 1; transform: none; }

/* Titres découpés mot par mot.
   Le masque doit couper autour du mot pour qu'il puisse remonter — mais
   l'encre de la police déborde de la boîte du mot sur trois axes :
     - en bas  : jambage du Q (-0.19 em), cédille du Ç (-0.31 em)
     - en haut : accents de capitale, le rond du Å monte à +1.07 em
     - à droite: letter-spacing négatif, qui réduit la chasse de la DERNIÈRE
                 lettre et fait sortir son encre de la boîte
   « CINQ » se lisait « CINP », « À VENIR » perdait son accent, et les fins de
   mots étaient rabotées. On élargit donc le masque de --debord sur les quatre
   côtés, compensé par des marges négatives de même valeur pour que la mise en
   page ne bouge pas, et on pousse le mot plus loin hors champ à l'état caché. */
.mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: var(--debord);
  margin: calc(var(--debord) * -1);
}
.mot > span {
  display: inline-block;
  transform: translate3d(0, 175%, 0);
  transition: transform var(--dur-long) var(--ease) var(--retard, 0ms);
}
.is-in .mot > span, html:not(.js) .mot > span { transform: translate3d(0, 0, 0); }

/* -------------------------------------------------------------------------
   17. TRANSITIONS DE PAGE
   ---------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur); }
::view-transition-group(marque-gaspi),
::view-transition-group(logo-texte),
::view-transition-group(titre-page) { animation-timing-function: var(--ease); }

/* -------------------------------------------------------------------------
   18. MOUVEMENT RÉDUIT — tout est neutralisé, rien ne disparaît
   ---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   19. BANDEAU DE CONSENTEMENT (mesure d'audience)
   Il ne s'affiche que si data.js déclare un identifiant Analytics et que le
   visiteur n'a pas encore répondu. z-index 80 : au-dessus de l'en-tête (40) et
   de la barre de navigation (45), sous la lightbox (90) et le lien d'évitement.
   ---------------------------------------------------------------------- */
.consent {
  position: fixed;
  z-index: 80;
  left: var(--gouttiere);
  right: var(--gouttiere);
  bottom: var(--gouttiere);
  max-width: 660px;
  margin-inline: auto;
  display: grid;
  gap: var(--e-md);
  padding: var(--e-lg);
  background: var(--blanc);
  color: var(--encre);
  border: var(--trait-epais) solid var(--encre);
  border-radius: var(--r-ilot);
  box-shadow: var(--dur-relief-grand);
  animation: monte-consent var(--dur-long) var(--ease) both;
}
.consent__titre {
  font-family: var(--titrage);
  font-size: var(--t-sous);
  letter-spacing: var(--ls-titre);
  line-height: var(--lh-titre);
}
.consent__texte { margin-top: var(--e-xs); font-size: var(--t-petit); line-height: var(--lh-corps); }
/* les deux réponses ont exactement le même poids visuel : refuser doit être
   aussi simple qu'accepter, c'est une exigence de la CNIL, pas une préférence */
.consent__choix { display: flex; flex-wrap: wrap; gap: var(--e-sm); }
.consent__choix .bouton { flex: 1 1 auto; justify-content: center; }
/* le même choix, rejouable depuis la page confidentialité */
[data-mesure-reglages] { margin-top: var(--e-lg); }
[data-mesure-reglages] .booking__liens { margin-top: var(--e-sm); }

@keyframes monte-consent {
  from { opacity: 0; translate: 0 120%; }
  to   { opacity: 1; translate: 0 0; }
}

@media (min-width: 600px) {
  .consent { grid-template-columns: 1fr auto; align-items: center; gap: var(--e-lg); }
  .consent__choix { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: var(--dur-nulle) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-nulle) !important;
    scroll-behavior: auto !important;
  }
  .apparait { opacity: 1 !important; transform: none !important; }
  .mot > span { transform: none !important; }
  .blob { animation: none !important; }
  .consent { animation: none !important; }
  .hero__photo { animation: none !important; translate: none !important; }
  .bandeau__piste { animation: none !important; transform: none !important; }
  @view-transition { navigation: none; }
}