/* =========================================================================
   Seaholder — feuille de style unique
   ========================================================================= */

:root {
  --fond: #0a0c0d;
  --texte: #f3ece4;
  --texte-att: #bfaea3;
  --accent: #d7a869;
  --accent-vif: #f2cf9c;
  --trait: rgba(255,235,215,.14);
  --aplat-bordeaux: #4a1216;
  --aplat-nuit: #170c0d;
  --marge: clamp(1.25rem, 4vw, 3rem);
  /* Space Mono : tous les titres du site, y compris le grand titre de
     la page archives (avant : une serif italique Fraunces à part, gardée
     volontairement différente ; harmonisé depuis pour plus de cohérence). */
  --police-mono: "Space Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --hauteur-entete: 4.5rem;

  /* Un seul vocabulaire de mouvement pour tout le site. Avant, les
     micro-interactions utilisaient au hasard .18s, .2s ou .3s : trois
     vitesses pour des gestes équivalents, ça se sent sans se voir. */
  --duree: .18s;
  --duree-lente: .32s;
  --courbe: cubic-bezier(.2, .6, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Helvetica Neue", Arial, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Le pied de page reste collé en bas sur les pages courtes (404) au lieu
     de laisser une bande de fond en dessous. Sans effet sur les pages longues. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Anneau de focus visible sur tout ce qui se navigue au clavier.
   Sans ça, la tabulation était pratiquement impossible à suivre : les
   composants ne changeaient que de couleur de fond. */
/* Double anneau : le clair pour le voir sur fond sombre, le halo sombre
   autour pour le voir aussi quand l'élément est posé sur une photo claire
   (boutons du hero). Un seul anneau clair y devenait invisible. */
:focus-visible {
  outline: 2px solid var(--accent-vif);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(10, 12, 13, .82);
  border-radius: 2px;
}
.btn:focus-visible, .plateforme:focus-visible, .poster:focus-visible,
.visionneuse button:focus-visible { border-radius: inherit; }
/* Les cibles d'ancre ne doivent pas se retrouver cachées sous l'en-tête
   collant quand on clique dans le menu. */
section[id], main[id] { scroll-margin-top: var(--hauteur-entete); }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: #2a1608; padding: .75rem 1.25rem;
  z-index: 100; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: var(--marge); top: var(--marge); }

/* ---------------------------------------------------------- fond animé */
.fond {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: var(--fond);
}
.fond-couche {
  position: absolute; inset: -2%;
  background-size: cover; background-position: center;
  opacity: 0; filter: saturate(.9) brightness(1.35);
  transition: opacity 2.8s ease;
  transform: scale(1.02);
}
.fond-couche.est-visible { opacity: 1; }
.fond-voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,13,.18) 0%, rgba(10,12,13,.4) 60%, rgba(10,12,13,.75) 100%),
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(10,12,13,.55), rgba(10,12,13,0) 72%);
}
.fond-voile::after {
  content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------- en-tête */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  /* 0.65rem au lieu de 1.1rem : les liens du menu reçoivent maintenant
     leur propre padding vertical (cible tactile), la hauteur totale de
     l'en-tête reste donc identique. */
  padding: .65rem var(--marge);
  backdrop-filter: blur(10px);
  /* Le dégradé s'arrêtait à 75% d'opacité : quand une photo de fond claire
     passait derrière, les liens du menu tombaient à 1,57:1 de contraste,
     donc quasi illisibles. Le voile est renforcé là où se trouve le texte,
     puis fond toujours vers le transparent en bas. */
  background: linear-gradient(180deg,
    rgba(10,12,13,.96) 0%, rgba(10,12,13,.93) 55%,
    rgba(10,12,13,.6) 82%, rgba(10,12,13,0) 100%);
}
/* Retour à l'accueil : il n'y en avait aucun, on ne pouvait revenir
   depuis la page archives qu'en passant par "Listen". */
.entete-logo { display: flex; align-items: center; flex: none; padding: .4rem 0; }
.entete-logo img { height: 1.05rem; width: auto; opacity: .8; transition: opacity var(--duree) var(--courbe); }
.entete-logo:hover img, .entete-logo:focus-visible img { opacity: 1; }
/* Sous 640px, le mot-repère plus les quatre liens ne tiennent plus sur une
   ligne et le menu passait sur deux lignes. On garde le menu seul : le
   grand logo est de toute façon juste en dessous sur l'accueil. */
@media (max-width: 640px) {
  .entete { justify-content: flex-end; }
  .entete-logo { display: none; }
}
.entete nav { display: flex; gap: clamp(.9rem, 2vw, 1.75rem); flex-wrap: wrap; justify-content: flex-end; }
.entete nav a {
  text-decoration: none; color: var(--texte-att); font-size: .92rem;
  letter-spacing: .02em; transition: color var(--duree) var(--courbe);
  /* Les liens ne faisaient que 23px de haut, sous le minimum de 24px
     recommandé pour une cible tactile (WCAG 2.2, « Target Size »). */
  padding: .45rem .15rem;
}
.entete nav a:hover, .entete nav a:focus-visible { color: var(--texte); }
.entete nav a[aria-current="page"] { color: var(--accent); }

/* Sélecteur de langue "FR / EN" : mêmes styles de lien que le reste du
   menu (dont l'accent sur la langue active via aria-current), juste
   resserré pour lire "FR / EN" comme un seul petit bloc. */
.selecteur-langue { display: inline-flex; align-items: center; gap: .3rem; }
.selecteur-langue .separateur { color: var(--texte-att); opacity: .5; font-size: .85rem; }

/* ---------------------------------------------------------- hero */
.hero {
  min-height: 72vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 4rem var(--marge) 2.5rem;
}
.hero-inner { max-width: 70rem; min-width: 0; }
.hero h1.logo-hero { position: relative; margin: 0 0 2.5rem; line-height: 0; }
.logo-hero img {
  position: relative; z-index: 2;
  width: 100%; max-width: 1100px; height: auto; margin: 0 auto;
  filter: drop-shadow(0 0 70px rgba(232,190,140,.28));
  animation: logo-secousse 6.4s ease-in-out infinite;
}
/* Deux fantômes du logo (mêmes dimensions, décalés en couleur) qui
   n'apparaissent qu'une fraction de seconde à chaque cycle, pour un
   effet "électricité / dédoublement" bref et répété. */
.logo-hero::before, .logo-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  width: 100%; max-width: 1100px; height: auto; margin: 0 auto;
  background-image: url("../img/logo-seaholder.png");
  background-repeat: no-repeat; background-position: center; background-size: contain;
  mix-blend-mode: screen; opacity: 0; pointer-events: none;
}
.logo-hero::before { filter: hue-rotate(170deg) saturate(4); animation: logo-fantome-a 6.4s ease-in-out infinite; }
.logo-hero::after { filter: hue-rotate(-30deg) saturate(4); animation: logo-fantome-b 6.4s ease-in-out infinite; }

@keyframes logo-secousse {
  0%, 91.5%, 100% { transform: translate(0, 0); }
  92%   { transform: translate(-4px, 1px); }
  92.6% { transform: translate(3px, -2px); }
  93.2% { transform: translate(-3px, 2px); }
  93.8% { transform: translate(4px, -1px); }
  94.4% { transform: translate(-2px, -2px); }
  95%   { transform: translate(3px, 1px); }
  95.6% { transform: translate(-3px, 0); }
  96.2% { transform: translate(2px, -1px); }
  96.8% { transform: translate(-2px, 1px); }
  97.4% { transform: translate(1px, -1px); }
  98%   { transform: translate(-1px, 1px); }
  98.6% { transform: translate(1px, 0); }
  99.2% { transform: translate(0, 0); }
}
@keyframes logo-fantome-a {
  0%, 91.5%, 100% { opacity: 0; transform: translate(0, 0); }
  92%   { opacity: .55; transform: translate(-8px, 0); }
  92.6% { opacity: .3;  transform: translate(6px, -2px); }
  93.2% { opacity: .5;  transform: translate(-6px, 2px); }
  93.8% { opacity: .3;  transform: translate(5px, -1px); }
  94.4% { opacity: .45; transform: translate(-5px, -1px); }
  95%   { opacity: .3;  transform: translate(4px, 1px); }
  95.6% { opacity: .4;  transform: translate(-4px, 0); }
  96.2% { opacity: .25; transform: translate(3px, -1px); }
  96.8% { opacity: .35; transform: translate(-3px, 1px); }
  97.4% { opacity: .2;  transform: translate(2px, 0); }
  98%   { opacity: .25; transform: translate(-2px, 0); }
  98.6% { opacity: .15; transform: translate(1px, 0); }
  99.2% { opacity: 0;   transform: translate(0, 0); }
}
@keyframes logo-fantome-b {
  0%, 91.5%, 100% { opacity: 0; transform: translate(0, 0); }
  92.3% { opacity: .45; transform: translate(7px, -1px); }
  92.9% { opacity: .3;  transform: translate(-6px, 2px); }
  93.5% { opacity: .4;  transform: translate(6px, -2px); }
  94.1% { opacity: .25; transform: translate(-5px, 1px); }
  94.7% { opacity: .4;  transform: translate(4px, 1px); }
  95.3% { opacity: .25; transform: translate(-4px, -1px); }
  95.9% { opacity: .35; transform: translate(3px, 0); }
  96.5% { opacity: .2;  transform: translate(-3px, 1px); }
  97.1% { opacity: .3;  transform: translate(2px, -1px); }
  97.7% { opacity: .18; transform: translate(-2px, 0); }
  98.3% { opacity: .2;  transform: translate(1px, 0); }
  98.9% { opacity: .1;  transform: translate(-1px, 0); }
  99.4% { opacity: 0;   transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-hero img, .logo-hero::before, .logo-hero::after { animation: none; }
}
/* Accroche du hero : discrète visuellement, mais bien réelle et lisible.
   C'est le seul vrai texte indexable en haut de l'accueil (le H1 est une
   image). Google détecte et sanctionne le texte masqué, donc pas question
   de le cacher : on le rend petit et sobre, pas invisible. */
.accroche {
  margin: -1.2rem 0 2rem;
  font-size: clamp(.85rem, 2.2vw, 1rem); letter-spacing: .04em;
  /* 46rem et non 38 : le padding horizontal du halo est compris dans la
     largeur (box-sizing: border-box), sans ça la phrase passait sur deux
     lignes sur grand écran. */
  max-width: 46rem; margin-inline: auto;
  /* Ce texte est posé sur les photos de fond, qui défilent : sur deux
     d'entre elles le contraste tombait à 2:1. Deux corrections liées :
     la couleur passe du beige mi-ton au texte clair (un mi-ton ne peut
     pas atteindre 4,5:1 sur une photo claire sans un voile quasi opaque
     qui écraserait la photo), plus un halo sombre progressif derrière le
     texte seul, sans cadre visible. */
  color: var(--texte);
  width: fit-content; padding: 1.15rem 2.8rem;
  /* farthest-side : le dégradé atteint zéro pile sur les quatre bords du
     bloc, donc aucun rectangle visible, juste un assombrissement diffus. */
  background: radial-gradient(farthest-side ellipse at center,
    rgba(10,12,13,.94) 0%, rgba(10,12,13,.9) 52%, rgba(10,12,13,0) 100%);
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
.cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.btn {
  display: inline-block; text-decoration: none; padding: .95rem 2.15rem;
  background: var(--accent); color: #2a1608; border-radius: 999px;
  font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .12em;
  transition: transform var(--duree) var(--courbe), background var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.7);
}
.btn:hover, .btn:focus-visible { background: var(--accent-vif); transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(0,0,0,.75); }
/* Retour d'appui : sans ça, un clic maintenu ne renvoyait aucun signal,
   ce qui donne l'impression d'un bouton mou. */
.btn:active { transform: translateY(0); box-shadow: 0 8px 18px -12px rgba(0,0,0,.7); transition-duration: .06s; }
.btn-ghost {
  background: transparent; color: var(--accent-vif); border: 1px solid var(--accent);
  box-shadow: none;
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(215,168,105,.14); }

/* ---------------------------------------------------------- trait décoratif (ligne dessinée à la main) */
.trait-mer { line-height: 0; color: var(--accent); opacity: .65; }
.trait-mer svg { display: block; width: 100%; height: 32px; }
@media (min-width: 700px) { .trait-mer svg { height: 48px; } }

.descendre {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  width: 1.6rem; height: 2.6rem; border: 1px solid var(--trait); border-radius: 999px;
  display: none;
}
.hero { position: relative; }
@media (min-width: 700px) { .descendre { display: block; } }
.descendre span {
  position: absolute; top: .4rem; left: 50%; width: 4px; height: 4px;
  margin-left: -2px; background: var(--accent); border-radius: 50%;
  animation: descendre-puce 1.8s ease-in-out infinite;
}
@keyframes descendre-puce { 0% { top: .4rem; opacity: 1; } 80% { opacity: 0; } 100% { top: 1.5rem; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .descendre span { animation: none; } }
/* Mouvement réduit : on garde les changements d'état (couleur, opacité)
   mais on supprime les déplacements et les fondus. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn:hover, .btn:focus-visible, .plateforme:hover, .plateforme:focus-visible { transform: none; }
  .poster:hover img, .poster:focus-visible img { transform: none; }
  .fondu { opacity: 1; }
}

/* ---------------------------------------------------------- sections */
/* La respiration verticale était figée à 5.5rem (88px) aussi bien sur un
   téléphone de 360px que sur un écran de 1440 : trop de vide sur mobile,
   et pas de progression entre les formats. */
.section { padding: clamp(3.25rem, 6vw + 1rem, 5.5rem) var(--marge); position: relative; }
.section-alt { background: var(--aplat-bordeaux); }
.section-nuit { background: var(--aplat-nuit); }
.wrap { max-width: 68rem; margin: 0 auto; }
.wrap-etroit { max-width: 42rem; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: .78rem;
  color: var(--accent); margin: 0 0 .6rem;
}
/* Tous les titres de section du site sont en Space Mono (traitement
   "technique", sobre), y compris désormais le grand titre de la page
   archives (.entete-page h1 ci-dessous). La classe .titre-album est
   conservée telle quelle dans le HTML : elle décrit le même rendu, elle
   ne change plus rien. */
.section h2, .section h2.titre-album {
  font-family: var(--police-mono);
  font-style: normal; font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 3.2rem); letter-spacing: .02em; line-height: 1.05;
  color: var(--accent-vif); margin: 0 0 1.1rem;
}
.lead { color: var(--texte-att); max-width: 40rem; font-size: 1.05rem; margin: 0 0 2.5rem; }
.wrap-centre { text-align: center; }
.wrap-centre .lead, .wrap-centre .plateformes-plus { margin-left: auto; margin-right: auto; }
.wrap-centre .demo-mention { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------- écouter */
.ecoute {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.4rem; margin: 0 auto 2.75rem; max-width: 30rem;
}
.pochette { width: 260px; height: 260px; border-radius: 3px; box-shadow: 0 20px 45px -18px rgba(0,0,0,.6); }
.lecteur { width: 100%; display: flex; justify-content: center; }
.lecteur iframe { width: 100%; max-width: 400px; height: 120px; border: 0; border-radius: 6px; }

.plateformes-grille {
  display: grid; gap: .7rem; justify-content: center;
  grid-template-columns: repeat(auto-fit, 172px);
}
/* Sous 414px, deux colonnes de 172px ne tiennent plus et les sept boutons
   se retrouvaient empilés un par un. On force deux colonnes qui se
   partagent la largeur disponible. Écrit en media query et non en
   minmax() : avec auto-fit, le navigateur compte les colonnes d'après la
   borne MAX du minmax, donc minmax(150px, 172px) se comporte exactement
   comme un 172px fixe et ne règle rien. Au-dessus de 414px, rien ne
   change par rapport au rendu d'origine. */
@media (max-width: 413px) {
  .plateformes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plateforme { padding-inline: .75rem; gap: .55rem; }
}
.plateforme {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem; border: 1px solid var(--trait); border-radius: 3px;
  text-decoration: none; color: var(--texte);
  background: rgba(255,255,255,.02);
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.plateforme:hover, .plateforme:focus-visible {
  background: rgba(215,168,105,.1); border-color: rgba(215,168,105,.45); transform: translateY(-2px);
}
.plateforme:active { transform: translateY(0); background: rgba(215,168,105,.18); transition-duration: .06s; }
.plateforme svg { width: 22px; height: 22px; flex: none; fill: var(--accent); }
.plateforme span { font-size: .88rem; font-weight: 600; }
.plateformes-plus { margin: 1.3rem 0 0; color: var(--texte-att); font-size: .88rem; }
.plateformes-plus a { color: var(--accent); }

.demo-mention {
  display: flex; align-items: center; gap: 1rem; margin-top: 2.2rem;
  padding: .6rem; border-radius: 3px; color: var(--texte-att);
  font-size: .88rem; max-width: max-content;
}
.demo-mention img { width: 88px; height: 88px; border-radius: 3px; flex: none; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }

.clip { margin: 2.75rem auto 0; max-width: 40rem; text-align: center; }
.clip .eyebrow { margin: 0 0 .8rem; }
.clip-video {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 20px 45px -18px rgba(0,0,0,.6);
}
.clip-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------- live */
.prochaine {
  border: 1px solid var(--trait); border-radius: 10px; padding: 1.1rem 1.4rem;
  margin: 0 0 2.5rem; color: var(--texte-att); font-size: .98rem;
}
.prochaine a { color: var(--accent); }
.gigs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.gig-year {
  padding: 1.6rem 0 .5rem; font-size: 1.5rem; font-weight: 700; color: var(--accent);
}
.gig {
  display: grid; gap: .1rem .9rem;
  grid-template-columns: 9rem 1fr;
  padding: .85rem 0; border-bottom: 1px solid var(--trait);
}
.gig-date { color: var(--texte-att); font-size: .88rem; padding-top: .1rem; }
.gig-venue { font-weight: 600; }
.gig-city { grid-column: 2; color: var(--texte-att); font-size: .88rem; }
.gig-with { grid-column: 2; color: var(--texte-att); font-size: .88rem; font-style: italic; }
@media (max-width: 560px) {
  .gig { grid-template-columns: 1fr; }
  .gig-city, .gig-with { grid-column: 1; }
}
.incomplet { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); color: var(--texte-att); font-size: .88rem; }
.incomplet a { color: var(--accent); }
.voir-tout { margin-top: 2.2rem; }

/* ---------------------------------------------------------- page archives + page 404 */
.entete-page { padding-top: clamp(6rem, 12vw, 8.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.page-erreur { min-height: 70vh; display: flex; align-items: center; }
.page-erreur .lead { margin-bottom: 2rem; }
.page-erreur .cta { justify-content: flex-start; }
.entete-page h1 {
  font-family: var(--police-mono); font-style: normal; font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: .98; letter-spacing: .01em;
  color: var(--accent-vif); margin: 0 0 1.2rem;
}
.entete-page .lead { margin-bottom: 0; }

/* Images en chargement différé : elles apparaissaient d'un coup, ce qui
   donne un effet de sautillement sur le mur de 48 affiches. Elles partent
   transparentes et le script leur ajoute .est-chargee une fois décodées.
   C'est le script qui pose .fondu, et seulement sur les images pas encore
   arrivées : une image déjà affichée ne clignote donc jamais, et sans
   JavaScript aucune image n'est masquée. */
.fondu { opacity: 0; transition: opacity var(--duree-lente) var(--courbe); }
.fondu.est-chargee { opacity: 1; }

/* ---------------------------------------------------------- archives */
.mur {
  list-style: none; margin: 0; padding: 0 var(--marge);
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
/* Sous 390px, minmax(140px) ne laissait tenir qu'une seule colonne : on se
   retrouvait avec 48 affiches de 280px empilées les unes sous les autres. */
@media (max-width: 389px) {
  .mur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
}
.poster {
  display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 6px; overflow: hidden; aspect-ratio: 3/4;
}
.poster img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duree-lente) var(--courbe), filter var(--duree-lente) var(--courbe); filter: saturate(.92); }
.poster:hover img, .poster:focus-visible img { transform: scale(1.05); filter: saturate(1); }
.poster:active img { transform: scale(1.01); transition-duration: .06s; }
.mur-suite {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3/4; border-radius: 6px; border: 1px dashed var(--trait);
  color: var(--texte-att); font-size: 2rem; letter-spacing: .1em;
}

/* ---------------------------------------------------------- contact */
/* Les liens isolés (adresse mail, réseaux) faisaient 16 à 21px de haut :
   sous les 24px minimum d'une cible tactile. Le padding agrandit la zone
   cliquable sans déplacer le texte. */
.mail a, .mail .mail-lien {
  font-size: 1.2rem; color: var(--accent); text-decoration: none;
  display: inline-block; padding: .2rem 0;
}
.mail a:hover { text-decoration: underline; }
.reseaux { display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; margin-top: 1.3rem; }
.reseaux a { text-decoration: none; color: var(--texte-att); padding: .3rem 0; }
.reseaux a:hover, .reseaux a:focus-visible { color: var(--texte); }

/* ---------------------------------------------------------- pied */
.pied {
  padding: 2.5rem var(--marge) 3rem; text-align: center; color: var(--texte-att); font-size: .88rem;
  background: #0a0405; border-top: 1px solid var(--trait);
}
.pied img { height: 1.1rem; width: auto; margin: 0 auto .9rem; opacity: .85; }

/* ---------------------------------------------------------- visionneuse */
.visionneuse {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(5,6,7,.94);
  display: flex; align-items: center; justify-content: center;
  /* Apparition en fondu plutôt qu'un surgissement brut. */
  opacity: 0; transition: opacity var(--duree-lente) var(--courbe);
}
.visionneuse.est-ouverte { opacity: 1; }
/* Pendant le fondu de fermeture la fenêtre est encore là : sans ça elle
   bloquerait les clics sur la page pendant un tiers de seconde. */
.visionneuse:not(.est-ouverte) { pointer-events: none; }
.visionneuse img { max-width: 90vw; max-height: 86vh; border-radius: 4px; }
.visionneuse button {
  position: absolute; background: rgba(255,255,255,.08); border: 1px solid var(--trait);
  color: var(--texte); border-radius: 999px; cursor: pointer; line-height: 1;
}
.visionneuse .fermer { top: 1.2rem; right: 1.2rem; width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
.visionneuse .nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 1.6rem; }
.visionneuse .prec { left: 1.2rem; }
.visionneuse .suiv { right: 1.2rem; }
.visionneuse button:hover, .visionneuse button:focus-visible { background: rgba(255,255,255,.18); }
.visionneuse button:active { background: rgba(255,255,255,.3); transition-duration: .06s; }
.visionneuse button { transition: background var(--duree) var(--courbe); }