:root {
  --primary-color: #2e3a59;
  --secondary-color: #4d5b8d;
  --tertiary-color: #6c7cba;
  --accent-color: #f2c94c;
  --bg-color: #f9f9f9;
  --text-color: #333;
  --hover-color: #f2c94c;
  --hover-bg: rgba(255, 255, 255, 0.1);
  --grisoff: #999999;
  --gris1: #dddddd;
  --gris2: #b3b3b3;
  --gris3: #808080;
  --gris4: #4d4d4d;
  --gris5: #262626;
  --bleu1: #b3cde8;
  --bleu2: #84acc8;
  --bleu3: #5d8fb2;
  --bleu4: #40688f;
  --bleu5: #2e4d73;
  --vert1: rgb(229, 255, 250);
  --vert2: rgb(197, 238, 230);
  --vert3: rgb(109, 183, 170);
  --vert4: rgb(77, 157, 146);
  --vert5: rgb(49, 107, 92);
  --rouge1: rgb(238, 197, 197);
  --rouge2: rgb(183, 109, 109);
  --rouge3: rgb(157, 77, 77);
  --rouge4: rgb(107, 49, 49);
  --rouge5: rgb(92, 49, 49);
  --orange1: rgb(255, 196, 68);
  --orange2: rgb(255, 158, 68);
  --orange3: rgb(255, 130, 68);
  --orange4: rgb(255, 118, 68);
  --orange5: rgb(255, 68, 68);
}

/* Thème sombre : <html data-theme="sombre"> (headers.php : choix du visiteur, sinon réglage de l'appareil).
   Les couleurs claires écrites en dur dans ce fichier sont notées var(--sombre-…, couleur claire) : sans thème sombre,
   la variable n'existe pas et la couleur claire s'applique ; ici, la variable prend le relais. */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --bg-color: #121722;
  --text-color: #d5dbe4;
  --hover-bg: rgba(255, 255, 255, 0.08);
  --grisoff: #7d8694;
  --gris1: #364050;
  --gris2: #566072;
  --gris3: #98a2b0;
  --gris4: #bcc4ce;
  --gris5: #e1e5eb;
  --bleu1: #2c405a;
  --vert1: #183630;
  --vert2: #21463d;
  --rouge1: #4a2b2e;
  /* Fonds et bordures */
  --sombre-carte: #1b2230;
  --sombre-doux: #202938;
  --sombre-bleute: #253449;
  --sombre-jaune: #362f1f;
  --sombre-rouge: #382327;
  --sombre-vert: #1b3328;
  --sombre-bord: #2f3a4b;
  --sombre-bord-vert: #2d5243;
  --sombre-bord-rouge: #5a3539;
  --sombre-bord-jaune: #5a4a27;
  /* Textes (couleurs de la palette trop foncées sur fond sombre) */
  --sombre-texte: #e1e5eb;
  --sombre-texte-bleu: #9cc0e6;
  --sombre-texte-jaune: #e6c36a;
  --sombre-texte-rouge: #ff8f85;
  --sombre-texte-vert: #6fcf97;
  --sombre-texte-bleu5: #9cc0e6;
  --sombre-texte-bleu4: #8fb6dc;
  --sombre-texte-primary-color: #b7c4e2;
  --sombre-texte-rouge3: #e89a9a;
  --sombre-texte-rouge4: #f0a9a9;
  --sombre-texte-vert4: #7fd1b9;
  --sombre-texte-vert5: #7fd1b9;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 16px;
  min-width: 320px;
  line-height: 1.6;
}

/* Espace au-dessus des paragraphes (venait de l'ancien style_odyssee.css, chargé sur toutes les pages) */
p {
  margin: 10px 0 0;
  padding: 0;
}

/* Titre principal de la page : le premier <h2> devient <h1> pour le référencement (seo.php), avec l'aspect d'un <h2> */
main h1 {
  font-size: 1.5em;
}

.platine {
  float: left;
  max-width: 300px;
  margin-right: 20px;
}

td {
  padding: 5px;
  vertical-align: top;
}

.bleu {
  color: var(--bleu3);
}

.orange {
  color: var(--orange3);
}

.jaune {
  color: #ffe2ad;
}

.rouge {
  color: var(--sombre-texte-rouge3, var(--rouge3));
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 1rem;
}

a:not(.nav-links a) {
  color: var(--sombre-texte-bleu4, var(--bleu4));
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  cursor: pointer;
}

a:not(.nav-links a)::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: var(--bleu3);
  transition: width 0.3s ease;
  border-radius: 2px;
}

a:not(.nav-links a):hover,
a:not(.nav-links a):focus {
  color: var(--bleu2);
}

a:not(.nav-links a):hover::after,
a:not(.nav-links a):focus::after {
  width: 100%;
}

/* Pas de soulignement sous un lien qui ne contient qu'une image (pochettes, vignettes) : il apparaissait décalé sous l'image */
a:not(.nav-links a):has(> img:only-child)::after {
  display: none;
}

/* En-tête : une seule barre (logo, menu, recherche), fixée en haut de page */
header.entete {
  height: var(--hauteur-entete);
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--primary-color);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

.entete-barre {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  color: white;
}

/* Logo : le disque tourne au survol */
.entete a.entete-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  color: white;
  text-decoration: none;
}

.entete a.entete-logo::after {
  display: none;
}

.entete-disque {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.entete a.entete-logo:hover .entete-disque,
.entete a.entete-logo:focus-visible .entete-disque {
  animation: disque-tourne 1.8s linear infinite;
}

/* Décor des fêtes (fetes.php) : petit dessin posé sur le bord du disque, qui ne tourne pas avec lui */
.entete-disque-cadre {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

.entete-fete {
  position: absolute;
  top: -11px;
  right: -14px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transform-origin: 50% 0;
  transform: rotate(12deg);
}

/* Bonnet et mitre coiffent le disque, un peu sur la gauche */
/* Bonnet de Noël : posé sur le haut du disque, penché vers la droite */
.entete-fete-noel {
  width: 36px;
  height: 36px;
  top: -17px;
  right: auto;
  left: 16px;
  transform: rotate(16deg);
}

/* Disque plus petit (34 px) sur les écrans étroits */
@media (max-width: 1100px) {
  .entete-fete-noel {
    width: 30px;
    height: 30px;
    top: -15px;
    left: 11px;
  }
}

/* Mitre de saint Nicolas : sur le haut du disque, penchée vers la droite */
.entete-fete-saint-nicolas {
  width: 29px;
  height: 29px;
  top: -12px;
  right: auto;
  left: 21px;
  transform: rotate(20deg);
}

/* Cloche de Pâques, saxophone, masque de carnaval et autres décors détaillés : plus grands, sinon ils se perdent */
.entete-fete-epiphanie,
.entete-fete-chandeleur,
.entete-fete-disquaire-day,
.entete-fete-jazz-day,
.entete-fete-premier-mai,
.entete-fete-anniversaire,
.entete-fete-carnaval,
.entete-fete-paques,
.entete-fete-fete-musique {
  width: 36px;
  height: 36px;
  top: -14px;
  right: -16px;
}

/* Masque de carnaval : ses plumes sortiraient en haut de la page */
.entete-fete-carnaval {
  top: -8px;
}

/* Bouteille de champagne : plus grande, sinon elle se perd */
.entete-fete-nouvel-an {
  width: 40px;
  height: 40px;
  top: -10px;
  right: -22px;
}

/* Motifs de la fête semés en transparence dans le fond de l'en-tête, derrière le logo, le menu et la recherche */
.entete-motifs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.35;
}

.entete-motifs svg {
  position: absolute;
}

/* Motif unique qui traverse l'en-tête (chauve-souris d'Halloween). Trois mouvements de durées différentes se combinent
   pour un vol irrégulier : la traversée (accélérations, petit retour en arrière), l'ondulation avec inclinaison, et le
   battement des ailes, qui pivotent chacune autour de l'épaule */
.entete-motifs-vol {
  opacity: 1;
}

.entete-vol {
  left: 0;
  top: 16px;
  overflow: visible;
  animation: vol-traverse 30s ease-in-out infinite;
}

.vol-corps {
  transform-box: view-box;
  transform-origin: 32px 14px;
  animation: vol-ondule 4.3s ease-in-out infinite;
}

.vol-aile-g,
.vol-aile-d {
  transform-box: view-box;
  animation: vol-aile-g 0.28s ease-in-out infinite alternate;
}

.vol-aile-g {
  transform-origin: 30.5px 13px;
}

.vol-aile-d {
  transform-origin: 33.5px 13px;
  animation-name: vol-aile-d;
}

@keyframes vol-traverse {
  0% {
    translate: -90px 0;
  }
  16% {
    translate: 20vw -6px;
  }
  27% {
    translate: 31vw 10px;
  }
  35% {
    translate: 27vw -4px;
  }
  52% {
    translate: 52vw 6px;
  }
  63% {
    translate: 58vw -8px;
  }
  80% {
    translate: 81vw 8px;
  }
  100% {
    translate: calc(100vw + 90px) -4px;
  }
}

@keyframes vol-ondule {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  30% {
    transform: translateY(-8px) rotate(-7deg);
  }
  65% {
    transform: translateY(7px) rotate(6deg);
  }
}

@keyframes vol-aile-g {
  from {
    transform: rotate(-22deg);
  }
  to {
    transform: rotate(18deg);
  }
}

@keyframes vol-aile-d {
  from {
    transform: rotate(22deg);
  }
  to {
    transform: rotate(-18deg);
  }
}

/* Halloween : toile dans le coin en haut à droite, araignée qui descend au bout de son fil, se balance, puis remonte
   (fetes.php, ToileAraignee). Le haut du fil dépasse au-dessus de l'en-tête : coupé par son bord, il semble s'allonger */
.toile-araignee {
  top: 0;
  right: 0;
}

.araignee {
  top: -78px;
  right: 34px;
  transform-origin: 50% 0;
  animation: araignee-fil 11s ease-in-out infinite;
}

@keyframes araignee-fil {
  0%,
  12% {
    transform: translateY(0) rotate(0deg);
  }
  30% {
    transform: translateY(30px) rotate(2deg);
  }
  36% {
    transform: translateY(26px) rotate(-2deg);
  }
  42% {
    transform: translateY(30px) rotate(1.5deg);
  }
  48%,
  58% {
    transform: translateY(28px) rotate(0deg);
  }
  80%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .entete-vol,
  .vol-corps,
  .vol-aile-g,
  .vol-aile-d,
  .araignee {
    animation: none;
  }

  .entete-vol {
    left: 62%;
  }
}

/* Neige (Noël) : flocons qui tombent du haut au bas de l'en-tête en oscillant (durées et décalages dans fetes.php) */
.entete-motifs-neige {
  opacity: 0.85;
}

/* Sapins enneigés plantés sur le bas de l'en-tête (fetes.php, Sapins) */
.entete-motifs .sapin {
  bottom: 0;
}

/* Traîneau du père Noël (fetes.php, Traineau) : traverse l'en-tête de gauche à droite en une dizaine de secondes, toutes
   les 30 s, un peu plus haut à l'arrivée qu'au départ ; il ondule doucement pendant le vol */
.entete-motifs .traineau {
  left: 0;
  top: 2px;
  overflow: visible;
  animation: traineau-traverse 30s linear infinite;
}

.traineau-corps {
  animation: traineau-ondule 1.6s ease-in-out infinite alternate;
}

@keyframes traineau-traverse {
  0% {
    translate: -220px 10px;
  }
  35%,
  100% {
    translate: calc(100vw + 20px) -2px;
  }
}

@keyframes traineau-ondule {
  from {
    transform: translateY(-2px) rotate(-1.5deg);
  }
  to {
    transform: translateY(2px) rotate(1.5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .entete-motifs .traineau {
    display: none;
  }
}

.flocon {
  top: -16px;
  animation: flocon-chute var(--duree) linear infinite;
  animation-delay: var(--retard);
}

@keyframes flocon-chute {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(var(--derive), 25px) rotate(45deg);
  }
  50% {
    transform: translate(0, 50px) rotate(90deg);
  }
  75% {
    transform: translate(calc(var(--derive) * -1), 75px) rotate(135deg);
  }
  100% {
    transform: translate(0, 100px) rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flocon {
    animation: none;
    top: 40%;
  }
}

/* Pâques : œufs qui tombent en se balançant (durées et décalages dans fetes.php), lapin qui avance par bonds le long
   du bas de l'en-tête, sous les boutons (16 à 56 px sur 72 px) */
.entete-motifs-paques,
.entete-motifs-musique,
.entete-motifs-chute {
  opacity: 1;
}

/* Les notes de la fête de la musique et le muguet du 1er mai tombent comme les œufs */
.oeuf,
.note-tombe,
.motif-chute {
  top: -18px;
  opacity: 0.9;
  animation: oeuf-chute var(--duree) linear infinite;
  animation-delay: var(--retard);
}

@keyframes oeuf-chute {
  0% {
    transform: translate(0, 0) rotate(-15deg);
  }
  25% {
    transform: translate(var(--derive), 25px) rotate(10deg);
  }
  50% {
    transform: translate(0, 50px) rotate(-12deg);
  }
  75% {
    transform: translate(calc(var(--derive) * -1), 75px) rotate(14deg);
  }
  100% {
    transform: translate(0, 110px) rotate(-10deg);
  }
}

.lapin {
  position: absolute;
  left: 0;
  top: 53px;
  animation: lapin-promenade 34s ease-in-out infinite;
}

.lapin svg {
  display: block;
  animation: lapin-bond 0.55s ease-in-out infinite;
}

@keyframes lapin-promenade {
  0% {
    translate: -40px 0;
  }
  18% {
    translate: 17vw 0;
  }
  28% {
    translate: 23vw 0;
  }
  46% {
    translate: 45vw 0;
  }
  55% {
    translate: 48vw 0;
  }
  74% {
    translate: 72vw 0;
  }
  84% {
    translate: 79vw 0;
  }
  100% {
    translate: calc(100vw + 40px) 0;
  }
}

@keyframes lapin-bond {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  45% {
    transform: translateY(-5px) rotate(-8deg);
  }
}

/* En-tête sur deux lignes (bas de la recherche à 89 px sur 100 px) : lapin réduit, dans la fine bande du bas */
@media (max-width: 1100px) {
  .lapin {
    top: 86px;
    scale: 0.6;
    transform-origin: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oeuf,
  .note-tombe,
  .motif-chute,
  .lapin,
  .lapin svg {
    animation: none;
  }

  .oeuf,
  .note-tombe,
  .motif-chute {
    top: 40%;
  }

  .lapin {
    left: 70%;
  }
}

/* Saint-Valentin : le cœur du disque bat (double battement) ; dans l'en-tête, des cœurs montent du bas en se
   balançant, puis s'effacent (durées et décalages dans fetes.php) */
.entete-fete-saint-valentin {
  animation: coeur-bat 1.3s ease-in-out infinite;
}

@keyframes coeur-bat {
  0%,
  40%,
  100% {
    scale: 1;
  }
  12% {
    scale: 1.18;
  }
  24% {
    scale: 1.04;
  }
  32% {
    scale: 1.14;
  }
}

.entete-motifs-monte {
  opacity: 1;
}

/* Motifs qui montent (cœurs, notes de jazz, ballons d'anniversaire) */
.motif-monte {
  top: 100%;
  opacity: 0;
  animation: motif-monte var(--duree) ease-out infinite;
  animation-delay: var(--retard);
}

@keyframes motif-monte {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-8deg);
  }
  10% {
    opacity: 0.9;
  }
  35% {
    transform: translate(var(--derive), -30px) rotate(8deg);
  }
  70% {
    opacity: 0.75;
    transform: translate(calc(var(--derive) * -1), -62px) rotate(-6deg);
  }
  100% {
    opacity: 0;
    transform: translate(0, -95px) rotate(5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .entete-fete-saint-valentin,
  .motif-monte {
    animation: none;
  }

  .motif-monte {
    top: 40%;
    opacity: 0.6;
  }
}

/* Couronne, poêle, gâteau : les décors hauts sortiraient en haut de la page */
.entete-fete-epiphanie,
.entete-fete-chandeleur,
.entete-fete-anniversaire,
.entete-fete-premier-mai {
  top: -10px;
}

/* Couronne de l'Épiphanie : un peu plus petite, plus haut et penchée vers la droite */
.entete-fete-epiphanie {
  width: 31px;
  height: 31px;
  top: -14px;
  right: -15px;
  transform: rotate(26deg);
}

/* Disquaire Day : le bras de platine est posé sur le disque, qui tourne toute la journée (sens des aiguilles d'une
   montre) : pivot en haut à droite, tête de lecture sur le bord droit, dans les sillons. Le dessin a la taille du
   disque (44 ou 34 px) et déborde pour le pivot ; il ne se balance pas au survol (voir fete-balance) */
.entete-fete-disquaire-day {
  width: 100%;
  height: 100%;
  top: 0;
  right: auto;
  left: 0;
  overflow: visible;
  transform: none;
}

header.entete-disquaire-day .entete-disque {
  animation: disque-tourne 1.8s linear infinite;
}

/* Chandeleur : la crêpe saute dans la poêle et retombe */
.crepe-saute {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: crepe-saute 1.8s ease-in-out infinite;
}

@keyframes crepe-saute {
  0%,
  20%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  45% {
    transform: translateY(-11px) scaleY(-1);
  }
  70% {
    transform: translateY(0) scaleY(1);
  }
}

/* Anniversaire : les flammes des bougies vacillent */
.flamme {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flamme 0.45s ease-in-out infinite alternate;
}

.flamme:nth-of-type(2) {
  animation-delay: -0.2s;
}

@keyframes flamme {
  from {
    transform: scale(0.85, 0.8) rotate(-6deg);
  }
  to {
    transform: scale(1.05, 1.15) rotate(5deg);
  }
}

/* Épiphanie : étoiles qui scintillent (décalages dans fetes.php) */
.entete-motifs-scintille {
  opacity: 1;
}

.etoile {
  animation: etoile-scintille 3s ease-in-out infinite;
  animation-delay: var(--retard);
}

@keyframes etoile-scintille {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.6) rotate(0deg);
  }
  50% {
    opacity: 0.9;
    transform: scale(1) rotate(20deg);
  }
}

/* Disquaire Day : vinyles qui roulent de gauche à droite dans le couloir du bas (sous les boutons, 56 à 72 px) */
.entete-motifs-roule {
  opacity: 1;
}

.vinyle-roule {
  position: absolute;
  left: 0;
  top: 55px;
  animation: vinyle-traverse var(--duree) ease-in-out infinite;
  animation-delay: var(--retard);
}

.vinyle-roule svg {
  display: block;
  animation: disque-tourne 0.8s linear infinite;
}

@keyframes vinyle-traverse {
  0% {
    translate: -30px 0;
  }
  30% {
    translate: 28vw 0;
  }
  45% {
    translate: 36vw 0;
  }
  75% {
    translate: 70vw 0;
  }
  100% {
    translate: calc(100vw + 30px) 0;
  }
}

/* En-tête sur deux lignes (bas de la recherche à 89 px sur 100 px) : vinyles réduits, dans la fine bande du bas */
@media (max-width: 1100px) {
  .vinyle-roule {
    top: 88px;
    scale: 0.65;
    transform-origin: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  header.entete-disquaire-day .entete-disque,
  .crepe-saute,
  .flamme,
  .etoile,
  .vinyle-roule,
  .vinyle-roule svg {
    animation: none;
  }

  .etoile {
    opacity: 0.5;
  }

  .vinyle-roule {
    left: 70%;
  }
}

/* Saint-Nicolas : le saint traverse l'en-tête sur son âne, le long du bas (il dépasse un peu sur le bas des boutons,
   derrière eux) ; l'âne avance au pas : le corps tangue, les pattes avant et arrière alternent */
.entete-motifs-ane {
  opacity: 1;
}

.ane {
  position: absolute;
  left: 0;
  top: 38px;
  animation: ane-traverse 46s linear infinite;
}

.ane svg {
  display: block;
  overflow: visible;
}

.ane-pas {
  animation: ane-tangue 0.45s ease-in-out infinite alternate;
}

.ane-pattes-a,
.ane-pattes-b {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: ane-patte 0.45s ease-in-out infinite alternate;
}

.ane-pattes-b {
  animation-direction: alternate-reverse;
}

@keyframes ane-traverse {
  from {
    translate: -50px 0;
  }
  to {
    translate: calc(100vw + 50px) 0;
  }
}

@keyframes ane-tangue {
  from {
    transform: translateY(0) rotate(-1.5deg);
  }
  to {
    transform: translateY(-1px) rotate(1.5deg);
  }
}

@keyframes ane-patte {
  from {
    transform: skewX(-14deg);
  }
  to {
    transform: skewX(14deg);
  }
}

/* En-tête sur deux lignes (bas de la recherche à 89 px sur 100 px) : plus petit, le long du bas */
@media (max-width: 1100px) {
  .ane {
    top: 75px;
    scale: 0.7;
    transform-origin: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ane,
  .ane-pas,
  .ane-pattes-a,
  .ane-pattes-b {
    animation: none;
  }

  .ane {
    left: 70%;
  }
}

/* Fêtes nationales : drapeau qui flotte au vent sur le disque (le tissu ondule autour de la hampe) ; confettis qui
   tombent en virevoltant (durées et décalages dans fetes.php) */
.entete-fete-fete-nationale-fr,
.entete-fete-fete-nationale-be {
  width: 36px;
  height: 36px;
  top: -11px;
  right: -14px;
  transform: rotate(6deg);
}

.drapeau-tissu {
  transform-box: view-box;
  transform-origin: 5.6px 11px;
  animation: drapeau-flotte 1.6s ease-in-out infinite alternate;
}

@keyframes drapeau-flotte {
  from {
    transform: skewY(-5deg) scaleX(0.95);
  }
  to {
    transform: skewY(4deg) scaleX(1);
  }
}

.entete-motifs-confettis {
  opacity: 1;
}

.confetti {
  top: -14px;
  animation: confetti-chute var(--duree) linear infinite;
  animation-delay: var(--retard);
}

@keyframes confetti-chute {
  0% {
    transform: translate(0, 0) rotate(0deg) scaleY(1);
  }
  25% {
    transform: translate(var(--derive), 25px) rotate(90deg) scaleY(0.2);
  }
  50% {
    transform: translate(0, 50px) rotate(180deg) scaleY(1);
  }
  75% {
    transform: translate(calc(var(--derive) * -1), 75px) rotate(270deg) scaleY(0.2);
  }
  100% {
    transform: translate(0, 105px) rotate(360deg) scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drapeau-tissu,
  .confetti {
    animation: none;
  }

  .confetti {
    top: 40%;
  }
}

/* Poissons (Poisson d'avril) : traversée irrégulière de gauche à droite (accélérations, pauses, montées et descentes),
   frétillement, et quelques bulles de temps en temps qui remontent en restant en arrière. Valeurs dans fetes.php */
.entete-motifs-nage {
  opacity: 0.9;
}

/* Grand écran : le poisson part d'une hauteur quelconque (marge, logo), rejoint son couloir avant le menu, le traverse
   et reprend de la hauteur dans la marge de droite. Le menu commence environ 216 px après la marge de gauche et finit
   16 px avant celle de droite (contenu de 1200 px au plus) */
.entete-motifs-nage {
  --marge: max(0px, (100vw - 1200px) / 2);
  --menu-debut: calc(var(--marge) + 216px);
  --menu-largeur: calc(100vw - 2 * var(--marge) - 232px);
}

.poisson {
  position: absolute;
  left: 0;
  animation: poisson-nage-libre var(--duree) ease-in-out infinite;
  animation-delay: var(--retard);
}

/* Couloirs : les boutons occupent 16 à 56 px d'un en-tête de 72 px ; le poisson (26 px) n'occupe que le milieu de
   son dessin (environ 7 à 19 px) */
.poisson-haut {
  top: -7px;
}

.poisson-bas {
  top: 51px;
}

/* En-tête sur deux lignes (logo et boutons 11 à 45 px, recherche 53 à 89 px, sur 100 px) : poissons réduits, dans
   les fines bandes du haut et du bas */
@media (max-width: 1100px) {
  .poisson {
    scale: 0.6;
    transform-origin: 0 0;
    animation-name: poisson-nage;
  }

  .poisson-haut {
    top: -3px;
  }

  .poisson-bas {
    top: 87px;
  }
}

.poisson svg {
  display: block;
  filter: hue-rotate(var(--teinte));
  animation: poisson-fretille 0.7s ease-in-out infinite alternate;
}

.bulle {
  position: absolute;
  left: 25px;
  top: 9px;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(180, 230, 255, 0.85);
  border-radius: 50%;
  opacity: 0;
  animation: bulle-monte var(--bulles) ease-out infinite;
  animation-delay: calc(var(--b) * 0.35s);
}

.bulle:nth-child(3) {
  width: 3px;
  height: 3px;
}

@keyframes poisson-nage {
  0% {
    translate: -60px 0;
  }
  14% {
    translate: 16vw 2px;
  }
  24% {
    translate: 22vw 1px;
  }
  38% {
    translate: 38vw -2px;
  }
  47% {
    translate: 41vw 0;
  }
  63% {
    translate: 62vw 2px;
  }
  78% {
    translate: 76vw -1px;
  }
  100% {
    translate: calc(100vw + 60px) 1px;
  }
}

@keyframes poisson-nage-libre {
  0% {
    translate: -60px var(--depart);
  }
  10% {
    translate: calc(var(--menu-debut) * 0.45) calc(var(--depart) * 0.7);
  }
  20% {
    translate: calc(var(--menu-debut) - 56px) 0;
  }
  34% {
    translate: calc(var(--menu-debut) + var(--menu-largeur) * 0.22) 2px;
  }
  43% {
    translate: calc(var(--menu-debut) + var(--menu-largeur) * 0.3) -1px;
  }
  58% {
    translate: calc(var(--menu-debut) + var(--menu-largeur) * 0.56) 1px;
  }
  70% {
    translate: calc(var(--menu-debut) + var(--menu-largeur) * 0.82) -1px;
  }
  80% {
    translate: calc(var(--menu-debut) + var(--menu-largeur) + 12px) 0;
  }
  90% {
    translate: calc(100vw - var(--marge) * 0.5) calc(var(--arrivee) * 0.6);
  }
  100% {
    translate: calc(100vw + 60px) var(--arrivee);
  }
}

@keyframes poisson-fretille {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(4deg);
  }
}

/* Visibles seulement à la fin de leur cycle : les bulles partent par petits groupes, de temps en temps */
@keyframes bulle-monte {
  0%,
  70% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  74% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-22px, -9px) scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .poisson,
  .poisson svg {
    animation: none;
  }

  .poisson {
    left: 60%;
  }

  .poisson:nth-child(2n) {
    left: 80%;
  }

  .bulle {
    display: none;
  }
}

/* Feux d'artifice (Nouvel an) : la fusée monte en traçant sa traînée, qui s'efface ; la gerbe s'ouvre, ses rayons
   s'allongent et s'éteignent en retombant ; des paillettes scintillent un instant. Décalages (--retard) dans fetes.php */
.entete-motifs-feux {
  opacity: 1;
}

.feu-montee,
.feu-gerbe,
.feu-paillettes {
  animation: 4.8s infinite;
  animation-delay: var(--retard, 0s);
}

.feu-montee {
  stroke-dasharray: 46;
  stroke-dashoffset: 46;
  animation-name: feu-montee;
  animation-timing-function: ease-out;
}

.feu-gerbe,
.feu-paillettes {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 16px 16px;
  animation-timing-function: cubic-bezier(0.15, 0.8, 0.35, 1);
}

.feu-gerbe {
  animation-name: feu-eclate;
}

.feu-paillettes {
  animation-name: feu-scintille;
}

@keyframes feu-montee {
  0% {
    stroke-dashoffset: 46;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  20% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  30%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes feu-eclate {
  0%,
  19% {
    opacity: 0;
    transform: scale(0.1);
  }
  22% {
    opacity: 1;
  }
  48% {
    opacity: 0.85;
    transform: scale(1);
  }
  75%,
  100% {
    opacity: 0;
    transform: translateY(5px) scale(1.08);
  }
}

@keyframes feu-scintille {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.6);
  }
  38%,
  52% {
    opacity: 1;
  }
  45% {
    opacity: 0.3;
  }
  80%,
  100% {
    opacity: 0;
    transform: translateY(7px) scale(1.1);
  }
}

/* Les gerbes de droite n'occupent que la marge, trop étroite en dessous de 1400 px (celles de gauche ont aussi le logo) */
@media (max-width: 1399px) {
  .feu-right {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feu-montee,
  .feu-gerbe,
  .feu-paillettes {
    animation: none;
  }

  .feu-gerbe {
    opacity: 0.45;
  }
}

/* Halloween : bandeau gris foncé (pas noir, pour que le disque reste visible) ; en thème sombre, un gris bleuté
   accordé aux fonds sombres du site */
header.entete.entete-halloween {
  background: #2a2a2e;
}

:root[data-theme="sombre"] header.entete.entete-halloween {
  background: #2b313d;
}

.entete-motifs + .entete-barre {
  z-index: 1;
}

.entete a.entete-logo:hover .entete-fete:not(.entete-fete-disquaire-day) {
  animation: fete-balance 2.4s ease-in-out infinite;
}

/* Le cœur de la Saint-Valentin continue de battre en se balançant */
.entete a.entete-logo:hover .entete-fete-saint-valentin {
  animation:
    coeur-bat 1.3s ease-in-out infinite,
    fete-balance 2.4s ease-in-out infinite;
}

/* Part de la position de repos (0°), sinon le décor saute au début du survol */
@keyframes fete-balance {
  0%,
  100% {
    rotate: 0deg;
  }
  25% {
    rotate: -8deg;
  }
  75% {
    rotate: 8deg;
  }
}

@keyframes disque-tourne {
  to {
    transform: rotate(360deg);
  }
}

.entete-nom {
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    Roboto,
    Arial,
    sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: white;
}

/* Au survol, chaque lettre se remplit de gris par le bas, comme la jauge d'un égaliseur */
.entete-nom span {
  position: relative;
  display: inline-block;
}

.entete-nom span::before {
  content: attr(data-l);
  position: absolute;
  /* Déborde du cadre de la lettre pour couvrir le haut des majuscules et les jambes du g et du y */
  top: -0.15em;
  right: 0;
  bottom: -0.3em;
  left: 0;
  padding-top: 0.15em;
  color: #9ca3af;
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
}

.entete a.entete-logo:hover .entete-nom span::before,
.entete a.entete-logo:focus-visible .entete-nom span::before {
  animation: var(--bande) 2s ease-out var(--decalage, 0s) infinite;
}

/* Pendant que la musique joue (script.js, egaliseurDirect) : chaque lettre suit le volume réel de sa bande de
   fréquences (--niveau, de 0 à 1) au lieu de l'animation */
.entete a.entete-logo.egaliseur-direct .entete-nom span::before {
  animation: none;
  clip-path: inset(calc((1 - var(--niveau, 0)) * 100%) 0 0 0);
}

/* Comme sur un vrai égaliseur : les basses à gauche (grosse caisse sur les temps 1 et 3),
   les médiums au centre (caisse claire sur les temps 2 et 4), les aigus à droite (charleston à chaque croche).
   Toutes les jauges suivent le même tempo ; --force règle la hauteur, --decalage un léger retard. */
.entete-nom span:nth-child(1)::before {
  --bande: egaliseur-basses;
  --force: 0.8;
}
.entete-nom span:nth-child(2)::before {
  --bande: egaliseur-basses;
  --force: 0.7;
  --decalage: -0.04s;
}
.entete-nom span:nth-child(3)::before {
  --bande: egaliseur-basses;
  --force: 0.6;
  --decalage: -0.08s;
}
.entete-nom span:nth-child(4)::before {
  --bande: egaliseur-mediums;
  --force: 0.75;
}
.entete-nom span:nth-child(5)::before {
  --bande: egaliseur-mediums;
  --force: 0.65;
  --decalage: -0.05s;
}
.entete-nom span:nth-child(6)::before {
  --bande: egaliseur-mediums;
  --force: 0.7;
  --decalage: -0.1s;
}
.entete-nom span:nth-child(7)::before {
  --bande: egaliseur-aigus;
  --force: 0.6;
}
.entete-nom span:nth-child(8)::before {
  --bande: egaliseur-aigus;
  --force: 0.55;
  --decalage: -0.03s;
}
.entete-nom span:nth-child(9)::before {
  --bande: egaliseur-aigus;
  --force: 0.5;
  --decalage: -0.06s;
}

@keyframes egaliseur-basses {
  0% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.15) 0 0 0);
  }
  3% {
    clip-path: inset(calc(100% - 100% * var(--force) * 1) 0 0 0);
  }
  22% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.3) 0 0 0);
  }
  50% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.25) 0 0 0);
  }
  53% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.9) 0 0 0);
  }
  68% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.35) 0 0 0);
  }
  75% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.3) 0 0 0);
  }
  78% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.6) 0 0 0);
  }
  97% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.15) 0 0 0);
  }
  100% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.15) 0 0 0);
  }
}

@keyframes egaliseur-mediums {
  0% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.3) 0 0 0);
  }
  4% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.55) 0 0 0);
  }
  25% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.3) 0 0 0);
  }
  28% {
    clip-path: inset(calc(100% - 100% * var(--force) * 1) 0 0 0);
  }
  45% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.4) 0 0 0);
  }
  50% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.45) 0 0 0);
  }
  54% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.6) 0 0 0);
  }
  75% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.35) 0 0 0);
  }
  78% {
    clip-path: inset(calc(100% - 100% * var(--force) * 1) 0 0 0);
  }
  97% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.3) 0 0 0);
  }
  100% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.3) 0 0 0);
  }
}

@keyframes egaliseur-aigus {
  0% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.2) 0 0 0);
  }
  2% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.8) 0 0 0);
  }
  12.5% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.2) 0 0 0);
  }
  14.5% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.55) 0 0 0);
  }
  25% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.2) 0 0 0);
  }
  27% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.8) 0 0 0);
  }
  37.5% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.2) 0 0 0);
  }
  39.5% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.55) 0 0 0);
  }
  50% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.2) 0 0 0);
  }
  52% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.8) 0 0 0);
  }
  62.5% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.2) 0 0 0);
  }
  64.5% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.55) 0 0 0);
  }
  75% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.2) 0 0 0);
  }
  77% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.8) 0 0 0);
  }
  87.5% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.2) 0 0 0);
  }
  89.5% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.55) 0 0 0);
  }
  100% {
    clip-path: inset(calc(100% - 100% * var(--force) * 0.2) 0 0 0);
  }
}

/* Menu : la rubrique en cours est soulignée en doré */
.nav-links {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.nav-links a {
  position: relative;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  font-size: 0.97rem;
  white-space: nowrap;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-color);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background-color: var(--hover-bg);
  color: white;
}

.nav-links a:hover::after,
.nav-links a.actif::after {
  transform: scaleX(1);
}

.nav-links a.actif {
  color: var(--accent-color);
}

/* Recherche : champ arrondi, prend la place restante */
.entete-recherche {
  flex: 1;
  min-width: 180px;
  max-width: 380px;
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.entete-recherche:focus-within {
  background: var(--sombre-carte, white);
  border-color: var(--accent-color);
}

.entete-recherche input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 0.5rem 0 1rem;
  border: none;
  background: transparent;
  color: white;
  font-size: 0.95rem;
  outline: none;
}

.entete-recherche input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.entete-recherche:focus-within input[type="search"] {
  color: var(--text-color);
}

.entete-recherche:focus-within input[type="search"]::placeholder {
  color: var(--grisoff);
}

.search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 3px;
  flex-shrink: 0;
  background-color: var(--accent-color);
  color: var(--primary-color);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.search-button:hover {
  background-color: #e6b800;
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .entete a.entete-logo:hover .entete-disque,
  .entete a.entete-logo:focus-visible .entete-disque,
  .entete a.entete-logo:hover .entete-fete,
  .entete a.entete-logo:hover .entete-nom span::before,
  .entete a.entete-logo:focus-visible .entete-nom span::before {
    animation: none;
  }
}

.main-layout {
  display: flex;
  gap: 1.5rem;
  /* margin-top: 2rem; */
  margin-bottom: 2.5rem;
  padding: 1rem;
}

.default-layout {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
}

.left {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.right {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.box-shadow {
  background: var(--sombre-carte, white);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: auto;
}

/* Autre langue (FR / EN) : petite pastille à droite de la recherche */
.entete a.entete-langue {
  flex-shrink: 0;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.entete a.entete-langue:hover,
.entete a.entete-langue:focus-visible {
  background-color: var(--hover-bg);
  color: white;
}

/* Bouton du thème : la lune en thème clair, le soleil en thème sombre */
.entete-theme {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.entete-theme:hover,
.entete-theme:focus-visible {
  background-color: var(--hover-bg);
  color: var(--accent-color);
}

.entete-theme-soleil,
:root[data-theme="sombre"] .entete-theme-lune {
  display: none;
}

:root[data-theme="sombre"] .entete-theme-soleil {
  display: block;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 25px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1100;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: 1px;
}

/* --hauteur-filtre : barre de filtre par support collée au-dessus du tableau (.filtre-bloc), 0 ailleurs */
.sticky {
  position: sticky;
  top: calc(var(--hauteur-entete) + var(--hauteur-filtre, 0px));
  z-index: 900;
}

.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--primary-color);
  color: white;
  text-align: center;
  padding: 0.2rem;
  font-size: 0.8rem;
  z-index: 1000;
}

.centrer {
  text-align: center;
}

.gauche {
  text-align: left;
}

.droite {
  text-align: right;
}

.justify {
  text-align: justify;
}

.couverture {
  max-height: 300px;
  max-width: 180px;
}

.cadre {
  border: 1px solid var(--bleu5);
}

/* Descriptions d'un support, à la suite de son nom (FormatSupport) : « Vinyl LP » */
.support-desc {
  color: var(--gris3);
  font-size: 0.85em;
}

.espace {
  margin-top: 15px;
}

fieldset {
  padding: 10px;
  border: 1px solid var(--bleu5);
  background: var(--gris1);
  margin-bottom: 25px;
}

legend {
  background: var(--bleu3);
  border: 1px solid var(--bleu5);
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
}

dialog::backdrop {
  backdrop-filter: contrast(40%) grayscale(100%) blur(1px);
}

.zoom {
  width: 100%;
  height: 350px;
}

.preview {
  width: 100%;
  overflow: auto;
}

.pochette-mini {
  max-height: 50px;
  max-width: 50px;
  border: 1px solid black;
}

.pochette {
  max-height: 350px;
  max-width: 350px;
  border: 1px solid black;
  cursor: pointer;
}

.photo {
  max-height: 150px;
  max-width: 150px;
  border: 1px solid black;
  cursor: pointer;
}

hr {
  margin: 10px 0 10px 0;
}

.bio {
  display: block;
}

.thumb {
  max-height: 75px;
  max-width: 75px;
  border: 1px solid black;
  margin: 5px;
  cursor: pointer;
}

.pointer {
  cursor: pointer;
}

.info {
  cursor: help;
}

.feat {
  font-size: var(--tailletxt0);
  color: var(--sombre-texte, black);
}

.icone {
  max-height: 20px;
  max-width: 20px;
  background: var(--sombre-carte, white);
  border-radius: 3px;
  padding: 2px;
  margin: 0px 3px;
  vertical-align: middle;
}

.icone-mini {
  max-height: 15px;
  max-width: 15px;
  background: var(--sombre-carte, white);
  padding: 2px;
  margin: 0px 3px;
  vertical-align: middle;
}

/* Sombre : cadenas noir (icones/cadenas.png) passé en blanc, sans cadre */
:root[data-theme="sombre"] .icone-mini {
  background: none;
  filter: invert(1);
}

/* ===== Boutons (input, button, span ou lien) =====
   Même forme pour tous, couleurs par variante via des variables :
   - btn-bleu : action principale
   - btn-vert : ajout
   - btn-rouge : annuler / fermer / retour, mais aussi supprimer : version claire, qui ne crie pas à côté d'un bouton bleu,
     et passe au rouge plein au survol
   Désactivé : sert à la fois pour « choix en cours » (années des news, vues…) et « indisponible » : bleu très clair, sans relief */
.btn-bleu,
.btn-vert,
.btn-rouge {
  --btn-fond: var(--bleu4);
  --btn-fond-survol: var(--bleu5);
  --btn-texte: #fff;
  --btn-texte-survol: #fff;
  --btn-bord: transparent;
  --btn-ombre: rgba(46, 77, 115, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 5px;
  padding: 7px 18px;
  border: 1px solid var(--btn-bord);
  border-radius: 999px;
  background: var(--btn-fond);
  color: var(--btn-texte);
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: 0 1px 3px var(--btn-ombre);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.btn-vert {
  --btn-fond: var(--vert4);
  --btn-fond-survol: var(--vert5);
  --btn-ombre: rgba(49, 107, 92, 0.3);
}

.btn-rouge {
  --btn-fond: #fbf1f1;
  --btn-fond-survol: var(--rouge3);
  --btn-texte: var(--rouge4);
  --btn-bord: var(--rouge1);
  --btn-ombre: transparent;
}

.btn-bleu:hover,
.btn-vert:hover,
.btn-rouge:hover,
.btn-bleu:focus-visible,
.btn-vert:focus-visible,
.btn-rouge:focus-visible {
  border-color: var(--btn-fond-survol);
  background: var(--btn-fond-survol);
  color: var(--btn-texte-survol);
  box-shadow: 0 4px 10px var(--btn-ombre);
  transform: translateY(-1px);
}

.btn-rouge:hover,
.btn-rouge:focus-visible {
  box-shadow: 0 4px 10px rgba(157, 77, 77, 0.3);
}

.btn-bleu:focus-visible,
.btn-vert:focus-visible,
.btn-rouge:focus-visible {
  outline: 2px solid var(--bleu2);
  outline-offset: 2px;
}

.btn-bleu:active,
.btn-vert:active,
.btn-rouge:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-bleu:disabled,
.btn-vert:disabled,
.btn-rouge:disabled {
  border-color: var(--bleu1);
  background: var(--sombre-bleute, #e3ecf5);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  box-shadow: none;
  transform: none;
  cursor: default;
}

/* Liens habillés en bouton : pas de soulignement animé des liens, et la couleur du bouton
   (sinon celle des liens, a:not(.nav-links a), plus précise, l'emporte : texte bleu sur fond bleu) */
a.btn-bleu:not(.nav-links a)::after,
a.btn-vert:not(.nav-links a)::after,
a.btn-rouge:not(.nav-links a)::after {
  display: none;
}

a.btn-bleu:not(.nav-links a),
a.btn-vert:not(.nav-links a),
a.btn-rouge:not(.nav-links a) {
  color: var(--btn-texte);
}

a.btn-bleu:not(.nav-links a):hover,
a.btn-vert:not(.nav-links a):hover,
a.btn-rouge:not(.nav-links a):hover,
a.btn-bleu:not(.nav-links a):focus-visible,
a.btn-vert:not(.nav-links a):focus-visible,
a.btn-rouge:not(.nav-links a):focus-visible {
  color: var(--btn-texte-survol);
}

/* Images dans un bouton (icônes) */
.btn-bleu img,
.btn-vert img,
.btn-rouge img {
  max-height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-bleu,
  .btn-vert,
  .btn-rouge {
    transition: none;
  }

  .btn-bleu:hover,
  .btn-vert:hover,
  .btn-rouge:hover {
    transform: none;
  }
}

textarea {
  width: 100%;
  height: 200px;
  font-size: 18px;
  margin-bottom: 10px;
  padding: 2px;
}

.w5 {
  width: 5%;
}
.w10 {
  width: 10%;
}
.w15 {
  width: 15%;
}
.w20 {
  width: 20%;
}
.w25 {
  width: 25%;
}
.w30 {
  width: 30%;
}
.w35 {
  width: 35%;
}
.w40 {
  width: 40%;
}
.w45 {
  width: 45%;
}
.w50 {
  width: 50%;
}
.w60 {
  width: 60%;
}
.w70 {
  width: 70%;
}
.w100 {
  width: 100%;
}

/* Action réussie (enregistré, supprimé, copié…) : même encadré que .message-erreur, en vert avec une coche */
.message-succes {
  position: relative;
  margin: 0 0 12px;
  padding: 12px 16px 12px 46px;
  border: 1px solid var(--sombre-bord-vert, #cfe6dc);
  border-left: 4px solid var(--vert4);
  border-radius: 8px;
  background: var(--sombre-vert, #f2faf6);
  color: var(--text-color);
  font-size: var(--tailletxt2);
  text-align: left;
  line-height: 1.5;
}

.message-succes::before {
  content: "✓";
  position: absolute;
  top: 12px;
  left: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--vert4);
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
}

.message-succes p {
  margin: 0;
}

.message-succes p + p {
  margin-top: 6px;
}

.message-succes a {
  color: var(--sombre-texte-vert5, var(--vert5));
  font-weight: bold;
}

/* Erreur (formulaire refusé, vote non enregistré, erreur technique) : encadré sobre avec un « ! » */
.message-erreur {
  position: relative;
  margin: 0 0 12px;
  padding: 12px 16px 12px 46px;
  border: 1px solid var(--sombre-bord-rouge, #f0d4cf);
  border-left: 4px solid #c0392b;
  border-radius: 8px;
  background: var(--sombre-rouge, #fdf5f3);
  color: var(--text-color);
  font-size: var(--tailletxt2);
  text-align: left;
  line-height: 1.5;
}

.message-erreur::before {
  content: "!";
  position: absolute;
  top: 12px;
  left: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
}

.message-erreur p {
  margin: 0;
}

.message-erreur p + p {
  margin-top: 6px;
}

.message-erreur a {
  color: var(--sombre-texte-rouge, #a03224);
  font-weight: bold;
}

/* Liste vide (« Aucun … ne correspond ») : simple constat, pas une erreur */
.message-vide {
  margin: 20px 0;
  padding: 22px 16px;
  border: 1px dashed var(--gris2);
  border-radius: 12px;
  color: var(--gris3);
  text-align: center;
}

/* Requête SQL affichée pour le débogage (ExecReq avec $aff = 1, en local) */
.requete-sql {
  margin: 10px 0;
  padding: 10px 14px;
  border: 1px solid var(--gris2);
  border-radius: 8px;
  background: var(--sombre-carte, #fff);
  color: var(--gris4);
  font-size: 0.8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

table {
  border-spacing: 0px;
  border-collapse: separate;
  margin: 10px 0px 30px 0px;
  width: 100%;
}

th {
  background: var(--sombre-carte, white);
  text-align: left;
  text-transform: uppercase;
  padding: 5px;
  border-bottom: 3px solid var(--bleu5);
}

td[data-cell],
th[data-cell] {
  border-bottom: 1px solid var(--gris1);
}

/* ========================= */
/* ===== Mobile styles ===== */
/* ========================= */
@media (max-width: 1100px) {
  body {
    font-size: 18px !important;
    min-width: 320px;
  }

  .platine {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }

  .photo {
    max-height: 110px;
    max-width: 110px;
  }

  th[data-cell] {
    display: none;
  }

  td[data-cell] {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-left: 8rem;
    text-align: left;
  }

  td[data-cell]::before {
    content: attr(data-cell);
    position: absolute;
    left: 0rem;
    font-weight: bold;
    color: var(--gris3);
    white-space: nowrap;
  }

  /* En-tête mobile : logo et bouton du menu sur une ligne, recherche pleine largeur dessous */
  .entete-barre {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas:
      "logo langue theme menu"
      "recherche recherche recherche recherche";
    align-content: center;
    row-gap: 0.45rem;
    column-gap: 1rem;
  }

  .entete a.entete-logo {
    grid-area: logo;
  }

  .entete-disque {
    width: 34px;
    height: 34px;
  }

  .entete-nom {
    font-size: 1.5rem;
  }

  .entete-recherche {
    grid-area: recherche;
    max-width: none;
    margin-left: 0;
    height: 36px;
  }

  .entete-barre .hamburger {
    grid-area: menu;
  }

  .entete a.entete-langue {
    grid-area: langue;
  }

  .entete-theme {
    grid-area: theme;
  }

  .justify {
    text-align: left;
  }
  .bio-pic {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2,
  main h1 {
    font-size: 1.4rem;
  }

  .nav-links a {
    font-size: 1.1rem;
  }

  header {
    width: 100%;
  }

  nav {
    width: 100%;
  }

  .container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  nav.container {
    width: 100%;
  }

  .nav-links {
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--primary-color);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
      max-height 0.4s ease,
      opacity 0.4s ease;
    z-index: 1000;
  }

  .nav-links.active {
    max-height: 500px;
    opacity: 1;
    padding: 1rem 0;
  }

  .nav-links a {
    width: 100%;
    padding: 0.55rem 1.5rem;
    text-align: left;
    display: block;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links a.actif {
    background-color: var(--hover-bg);
    box-shadow: inset 4px 0 0 var(--accent-color);
  }

  .hamburger {
    display: flex;
  }

  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg);
  }

  .main-layout {
    flex-direction: column;
  }

  .left,
  .right {
    flex: 1 1 100%;
  }

  .box-shadow {
    width: 100%;
    padding: 1rem;
  }
  .w10,
  .w20,
  .w30,
  .w40,
  .w50,
  .w60,
  .w70,
  .w100 {
    width: 100%;
  }

  .pochette {
    max-height: 300px;
    max-width: 300px;
    border: 1px solid black;
    cursor: pointer;
  }
}

/* Barre de progression (synchronisation Discogs) */
.progression {
  width: 100%;
  height: 22px;
  margin: 10px 0;
  background-color: var(--sombre-doux, #e4e6ee);
  border-radius: 11px;
  overflow: hidden;
}

.progression-barre {
  width: 0;
  height: 100%;
  background-color: var(--secondary-color);
  transition: width 0.4s ease;
}

.progression-barre.indeterminee {
  background: repeating-linear-gradient(
    45deg,
    var(--secondary-color) 0 12px,
    var(--tertiary-color) 12px 24px
  );
  background-size: 34px 34px;
  animation: progression-defile 1s linear infinite;
}

.progression-barre.terminee {
  background-color: #2e8b57;
}

.progression-barre.erreur {
  background-color: #c0392b;
}

@keyframes progression-defile {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 34px 0;
  }
}

/* Recherche : listes longues chargées par morceaux */
:root {
  --hauteur-entete: 72px;
}

/* Bandeau extérieur (fond de page, masque ce qui défile dessous une fois fixé) et carte intérieure */
.sommaire-resultats {
  padding: 15px 0 10px;
  margin-bottom: 10px;
  background: var(--bg-color);
}

body.sommaire-fixe .sommaire-resultats {
  position: sticky;
  top: var(--hauteur-entete);
  z-index: 950;
}

/* Les en-têtes de tableau se collent sous le bandeau */
body.sommaire-fixe tr.sticky {
  top: calc(
    var(--hauteur-entete) + var(--hauteur-sommaire, 0px) +
      var(--hauteur-filtre, 0px)
  );
}

.sommaire-carte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 18px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.sommaire-recherche {
  color: var(--gris3);
}

.sommaire-recherche b {
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

.sommaire-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

a.puce-resultat:not(.nav-links a) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 14px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-weight: bold;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

a.puce-resultat:not(.nav-links a)::after {
  display: none;
}

a.puce-resultat:not(.nav-links a):hover,
a.puce-resultat:not(.nav-links a):focus-visible {
  background: var(--bleu4);
  border-color: var(--bleu4);
  color: #fff;
  transform: translateY(-1px);
}

.puce-resultat-nb,
.titre-rubrique-nb {
  display: inline-block;
  min-width: 2.2em;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bleu4);
  color: #fff;
  font-size: 0.85em;
  text-align: center;
}

/* Rubrique active (suivie au défilement) : pastille pleine */
a.puce-resultat.active:not(.nav-links a) {
  background: var(--bleu5);
  border-color: var(--bleu5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(46, 77, 115, 0.35);
}

a.puce-resultat.active .puce-resultat-nb,
a.puce-resultat:hover .puce-resultat-nb,
a.puce-resultat:focus-visible .puce-resultat-nb {
  background: var(--sombre-carte, #fff);
  color: var(--sombre-texte-bleu4, var(--bleu4));
}

.titre-rubrique {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 35px 0 5px;
  padding: 0 0 8px 12px;
  border-left: 4px solid var(--bleu4);
  border-bottom: 1px solid var(--gris1);
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1.3rem;
}

/* Boutons liste / galerie à droite de la ligne de titre (rubriques disques et livres) */
.titre-rubrique .choix-vue {
  margin-left: auto;
}

/* Liens de l'administrateur à droite de la ligne de titre (Wikipédia, Discogs de la biographie, gestion des interprètes) */
.titre-avec-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.titre-rubrique-outils {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.titre-rubrique-outils a:not(.nav-links a),
.titre-rubrique-outils .bio-actualiser {
  padding: 4px 12px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.85rem;
  font-weight: bold;
}

.titre-rubrique-outils a:not(.nav-links a)::after {
  display: none;
}

/* Smartphone : liens de l'administrateur sur une seule ligne, sous le titre, qui défile si elle déborde (marge
   intérieure : contour du focus pas rogné) */
@media (max-width: 600px) {
  .titre-rubrique-outils {
    flex-basis: 100%;
    flex-wrap: nowrap;
    min-width: 0;
    margin: -2px 0;
    padding: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .titre-rubrique-outils::-webkit-scrollbar {
    display: none;
  }

  .titre-rubrique-outils > * {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Bouton « Actualiser » de la biographie (interprete.php) : comme les liens à côté */
.titre-rubrique-outils .bio-actualiser {
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* Date de la dernière actualisation de la biographie, à côté du titre (administrateur) */
.bio-date {
  margin-left: 10px;
  color: var(--gris3);
  font-size: 0.8rem;
  font-weight: normal;
}

.titre-rubrique-outils .bio-actualiser:disabled {
  cursor: wait;
  opacity: 0.7;
}

.titre-rubrique-outils a:not(.nav-links a):hover,
.titre-rubrique-outils .bio-actualiser:not(:disabled):hover,
.titre-rubrique-outils a:not(.nav-links a):focus {
  background: var(--sombre-bleute, #e3ecf5);
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

.titre-rubrique-outils a:not(.nav-links a):focus-visible {
  outline: 2px solid var(--bleu2);
  outline-offset: 2px;
}

html:has(.sommaire-resultats) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.sommaire-resultats) {
    scroll-behavior: auto;
  }
}

/* Événements (events.php) : pas de défilement doux, les pastilles (Aujourd'hui, Naissances, Décès) mènent directement à leur rubrique */
html:has(.events-mois-liste) {
  scroll-behavior: auto;
}

.titre-rubrique[id] {
  scroll-margin-top: calc(
    var(--hauteur-entete) + var(--hauteur-sommaire, 0px) + 15px
  );
}

tr.suite-resultats td {
  display: table-cell;
  padding: 15px;
  text-align: center;
}

tr.suite-resultats td::before {
  content: none;
}

tr.suite-resultats .info {
  margin-left: 10px;
}

tr.suite-resultats .btn-bleu {
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: bold;
}

.btn-bleu.en-chargement {
  border-color: var(--bleu4);
  background: var(--bleu4);
  color: #fff;
  cursor: progress;
}

.btn-bleu.en-chargement::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--sombre-carte, #fff);
  border-radius: 50%;
  animation: rotation-chargement 0.8s linear infinite;
}

tr.apparition {
  animation: apparition-ligne 0.4s ease-out;
}

@keyframes rotation-chargement {
  to {
    transform: rotate(360deg);
  }
}

@keyframes apparition-ligne {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 1100px) {
  tr.suite-resultats td {
    display: block;
    padding: 15px;
  }

  tr.suite-resultats .info {
    display: block;
    margin: 5px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  tr.apparition,
  .btn-bleu.en-chargement::before {
    animation: none;
  }
}

/* Recherche : version mobile (après les règles de base pour les surcharger) */
@media (max-width: 1100px) {
  :root {
    --hauteur-entete: 100px;
  }

  .sommaire-resultats {
    padding: 8px 0;
  }

  .sommaire-carte {
    gap: 8px 12px;
    padding: 8px 10px;
  }

  .sommaire-recherche {
    display: none;
  }

  .sommaire-liens {
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  a.puce-resultat:not(.nav-links a) {
    flex-shrink: 0;
    white-space: nowrap;
    gap: 5px;
    padding: 2px 2px 2px 10px;
    font-size: 0.85rem;
  }

  .puce-resultat-nb {
    min-width: 0;
    padding: 1px 7px;
  }
}

/* Recherche : tableaux de résultats en carte (limité à cette page) */
.resultats-recherche table {
  margin: 12px 0 30px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Titres de colonne : trait bleu franc, qui sépare nettement des données même quand la ligne est collée en haut */
.resultats-recherche th {
  padding: 12px 10px 9px;
  background: var(--sombre-carte, #fff);
  border-bottom: 2px solid var(--bleu4);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.resultats-recherche tr.sticky th:first-child {
  border-top-left-radius: 12px;
}

.resultats-recherche tr.sticky th:last-child {
  border-top-right-radius: 12px;
}

.resultats-recherche td {
  padding: 9px 10px;
  vertical-align: middle;
  border-bottom: 1px solid var(--sombre-bord, #eceff3);
}

.resultats-recherche tr:last-child td {
  border-bottom: none;
}

.resultats-recherche tr:not(.sticky):not(.suite-resultats):hover td {
  background: var(--sombre-doux, #f3f7fb);
}

.resultats-recherche td.centrer {
  font-variant-numeric: tabular-nums;
}

.resultats-recherche td.nb-zero {
  color: var(--gris2);
}

.resultats-recherche .pochette-mini {
  display: block;
  width: 50px;
  height: 50px;
  margin: auto;
  object-fit: cover;
  border: none;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Années d'un disque dans les listes (afficheDateDisque) : © sortie et ℗ édition sur une seule ligne */
.resultats-recherche td[data-cell="Année"] {
  white-space: nowrap;
}

.resultats-recherche td[data-cell="Année"] br {
  display: none;
}

/* (le <br/> masqué sépare les deux années) */
.resultats-recherche td[data-cell="Année"] > br + span {
  margin-left: 8px;
}

/* Logos des labels (labels.php) : image entière sur fond blanc, pas recadrée comme une pochette ; aussi en galerie */
.resultats-recherche .pochette-mini.label-logo,
table.tableau-galerie.vue-grid td.galerie-image img.label-logo {
  object-fit: contain;
  background: var(--sombre-carte, #fff);
}

/* Label sans logo : l'emoji de la tuile « Labels », dans une case comme celle d'un logo (fond blanc, même ombre) :
   liste, galerie, en-tête */
.label-sans-logo {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: var(--sombre-carte, #fff);
  font-size: 26px;
  line-height: 1;
}

.resultats-recherche .pochette-mini.label-sans-logo {
  display: inline-flex;
}

/* Pas de trait de survol des liens (a::after, en haut de ce fichier) : il traversait la case de l'emoji ; sous un logo,
   l'image le masque */
td a.label-lien-sans-logo::after {
  content: none;
}

table.tableau-galerie.vue-grid td.galerie-image .label-sans-logo {
  width: 150px;
  max-width: 100%;
  height: 150px;
  max-height: none;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-size: 64px;
}

.label-logo-titre.label-sans-logo {
  display: inline-flex;
  width: 48px;
  border-radius: 6px;
  font-size: 26px;
}

/* Logo à côté du nom, en tête de la page d'un label */
.label-logo-titre {
  height: 48px;
  max-width: 120px;
  margin-right: 12px;
  object-fit: contain;
  vertical-align: middle;
}

.resultats-recherche tr.suite-resultats td {
  background: var(--sombre-doux, #fafbfc);
  border-radius: 0 0 12px 12px;
}

/* Livres : couverture au format portrait, statut et ISBN discrets ; toute la ligne ouvre la fiche (script.js) */
.resultats-recherche td[data-cell="Couverture"] {
  vertical-align: top;
}

tr.ligne-livre {
  cursor: pointer;
}

/* Titre : lien vers la fiche du livre (livre.php), en gras */
.resultats-recherche .livre-ouvrir {
  font-weight: bold;
}

.resultats-recherche .livre-ouvrir:hover {
  color: var(--sombre-texte-bleu4, var(--bleu4));
}

.resultats-recherche .couverture-mini {
  display: block;
  width: 44px;
  height: 64px;
  margin: auto;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.resultats-recherche .livre-statut {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--gris1);
  color: var(--gris4);
  font-size: 0.75rem;
  vertical-align: 1px;
}

.resultats-recherche .livre-isbn {
  color: var(--gris3);
  font-size: 0.85rem;
  line-height: 1.3;
}

.livre-fiche-description {
  padding: 10px 14px;
  border-left: 3px solid var(--bleu1);
  background: var(--sombre-doux, #f6f8fb);
  color: var(--gris4);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.6;
}

/* Fiche d'un disque hors Discogs (même fenêtre) : liste des chansons, qui défile si elle est longue */
tr.ligne-disque {
  cursor: pointer;
}

.dialogue.livre-modale:has(.disque-fiche-pistes) {
  width: min(860px, 96vw);
}

.livre-fiche-carte:has(.disque-fiche-pistes) {
  gap: 22px;
}

.livre-fiche-carte:has(.disque-fiche-pistes) .livre-fiche-gauche {
  position: sticky;
  top: 0;
}

.livre-fiche-carte:has(.disque-fiche-pistes) .livre-fiche-droite {
  gap: 8px;
}

.disque-fiche-alerte {
  color: var(--sombre-texte-rouge3, var(--rouge3));
  font-size: 0.85em;
  cursor: help;
}

.disque-fiche-alerte svg {
  vertical-align: -0.1em;
}

.disque-fiche-remarque {
  font-style: normal;
}

.disque-fiche-pistes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  line-height: 1.3;
}

.disque-fiche-pistes li {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  gap: 6px;
  padding: 1px 2px;
  border-bottom: 1px solid var(--sombre-bord, #eceff3);
}

/* Longue liste : la colonne de droite est limitée à la hauteur de la carte (92vh moins son padding) et seule la liste
   des chansons défile ; titre et informations restent en place */
@media (min-width: 701px) {
  .livre-fiche-carte:has(.disque-fiche-pistes) .livre-fiche-droite {
    max-height: calc(92vh - 44px);
  }

  .disque-fiche-pistes {
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
  }

  /* Zone qui défile = focusable : elle reçoit le focus à l'ouverture de la fenêtre, sans cadre (flèches du clavier toujours actives) */
  .disque-fiche-pistes:focus {
    outline: none;
  }
}

.disque-fiche-num {
  color: var(--gris3);
  text-align: right;
  white-space: nowrap;
}

.disque-fiche-duree {
  color: var(--gris3);
  white-space: nowrap;
}

.disque-fiche-discret {
  color: var(--gris3);
}

.disque-fiche-artiste {
  color: var(--gris3);
}

/* Mobile : chaque résultat devient une fiche séparée */
@media (max-width: 1100px) {
  .resultats-recherche table,
  .resultats-recherche tbody {
    display: block;
    background: none;
    box-shadow: none;
  }

  .resultats-recherche tr.sticky {
    display: none;
  }

  .resultats-recherche tr:not(.sticky) {
    display: block;
    margin-bottom: 12px;
    padding: 4px 12px;
    background: var(--sombre-carte, #fff);
    border-radius: 10px;
    box-shadow:
      0 2px 10px rgba(44, 62, 80, 0.08),
      0 1px 3px rgba(0, 0, 0, 0.06);
  }

  /* En bloc plutôt qu'en flex : le détail du format et les listes d'artistes ne débordent plus à droite */
  .resultats-recherche td[data-cell] {
    display: block;
    padding: 7px 0 7px 7.5rem;
    border-bottom: 1px solid var(--sombre-bord, #eceff3);
    text-align: left;
    overflow-wrap: anywhere;
  }

  .resultats-recherche td[data-cell]::before {
    top: 7px;
    font-size: 0.85rem;
    line-height: 1.6rem;
  }

  .resultats-recherche tr td:last-child {
    border-bottom: none;
  }

  .resultats-recherche tr:not(.sticky):not(.suite-resultats):hover td {
    background: none;
  }

  .resultats-recherche .pochette-mini {
    width: 64px;
    height: 64px;
    margin: 0;
  }

  .resultats-recherche .couverture-mini {
    width: 64px;
    height: 92px;
    margin: 0;
  }

  .resultats-recherche .livre-statut {
    display: table;
    margin: 2px 0 0;
  }

  .resultats-recherche tr.suite-resultats {
    background: none;
    box-shadow: none;
  }

  .resultats-recherche tr.suite-resultats td {
    padding: 10px 0;
    background: none;
    text-align: center;
  }

  /* Disques en liste (tr.fiche-compacte : AfficheLignesDisques, disques du jour, disques hors Discogs) : pochette à gauche,
     puis sans libellés la date (disques du jour), l'artiste, le titre, l'année et le format sur une ligne, le classement
     et la date d'ajout en petit ; mentions en haut à droite. Zones nommées : une cellule absente laisse une ligne vide
     de hauteur nulle ; la dernière ligne (1fr) prend la hauteur de la pochette qui dépasse */
  table.vue-list tr.fiche-compacte {
    display: grid;
    grid-template-columns: 64px auto 1fr auto;
    grid-template-rows: repeat(10, auto) 1fr;
    grid-template-areas:
      "p j j j"
      "p a a m"
      "p t t t"
      "p y s s"
      "p c c c"
      "p d d d"
      "p h h h"
      "p r r r"
      "p g g g"
      "p e e e"
      "p . . .";
    column-gap: 12px;
    padding: 10px 12px;
  }

  table.vue-list tr.fiche-compacte > td[data-cell] {
    padding: 0;
    border: none;
    background: none;
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: left;
  }

  table.vue-list tr.fiche-compacte > td[data-cell]::before {
    content: none;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Pochette"] {
    grid-area: p;
    align-self: start;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Date"] {
    grid-area: j;
    margin-bottom: 2px;
    color: var(--sombre-texte-bleu5, var(--bleu5));
    font-size: 0.8rem;
    font-weight: bold;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Interprète"],
  table.vue-list tr.fiche-compacte > td[data-cell="Artiste"] {
    grid-area: a;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Mentions"] {
    grid-area: m;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Titre"] {
    grid-area: t;
    margin-bottom: 4px;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Année"],
  table.vue-list tr.fiche-compacte > td[data-cell="Support"],
  table.vue-list tr.fiche-compacte > td[data-cell="Format"] {
    font-size: 0.85rem;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Année"] {
    grid-area: y;
    white-space: nowrap;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Année"] br {
    display: none;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Année"] > span + span {
    margin-left: 8px;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Support"],
  table.vue-list tr.fiche-compacte > td[data-cell="Format"] {
    grid-area: s;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Support"] p,
  table.vue-list tr.fiche-compacte > td[data-cell="Format"] p {
    margin: 0;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Classement"] {
    grid-area: c;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Ajouté le"] {
    grid-area: d;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Coups de cœur"] {
    grid-area: h;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Remarque"],
  table.vue-list tr.fiche-compacte > td[data-cell="Crédit"] {
    grid-area: r;
    margin-top: 4px;
    font-size: 0.8rem;
  }

  /* Écouter (recherche) : YouTube et Spotify sous le reste */
  table.vue-list tr.fiche-compacte > td[data-cell="Écouter"] {
    grid-area: e;
    margin-top: 6px;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Discogs"] {
    grid-area: g;
    margin-top: 4px;
    font-size: 0.8rem;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Classement"],
  table.vue-list tr.fiche-compacte > td[data-cell="Ajouté le"] {
    color: var(--gris3);
    font-size: 0.8rem;
  }

  table.vue-list tr.fiche-compacte > td[data-cell="Ajouté le"]::before {
    content: "Ajouté le ";
    position: static;
    font-weight: normal;
  }
}
/* Petit écran : fiches compactes des livres (en liste), des événements, des listes d'interprètes et des chansons,
   sur le modèle des disques (tr.fiche-compacte) : pas de libellés, informations secondaires en petit ; « - » masqués (td.vide) */
@media (max-width: 1100px) {
  table.vue-list tr.ligne-livre > td[data-cell],
  .events tr:not(.sticky):not(.events-jour) > td[data-cell],
  table.liste-interpretes tr:not(.sticky):not(.suite-resultats) > td[data-cell],
  table.tableau-chansons tr:not(.sticky):not(.suite-resultats) > td[data-cell] {
    padding: 0;
    border: none;
    background: none;
    line-height: 1.35;
    text-align: left;
  }

  table.vue-list tr.ligne-livre > td[data-cell]::before,
  .events tr:not(.sticky):not(.events-jour) > td[data-cell]::before,
  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell]::before,
  table.tableau-chansons
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell]::before {
    content: none;
    position: static;
    color: var(--gris3);
    font-size: inherit;
    font-weight: normal;
  }

  table.vue-list tr.ligne-livre > td.vide,
  .events tr:not(.sticky):not(.events-jour) > td.vide,
  table.liste-interpretes tr:not(.sticky):not(.suite-resultats) > td.vide {
    display: none;
  }

  /* Livres : couverture à gauche ; titre, auteur, puis l'année et l'édition sur une ligne */
  table.vue-list tr.ligne-livre {
    display: grid;
    grid-template-columns: 64px auto 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "p t t"
      "p a a"
      "p y e"
      "p . .";
    column-gap: 12px;
    padding: 10px 12px;
  }

  table.vue-list tr.ligne-livre > td[data-cell="Couverture"] {
    grid-area: p;
    align-self: start;
  }

  table.vue-list tr.ligne-livre > td[data-cell="Titre"] {
    grid-area: t;
    margin-bottom: 2px;
    font-size: 0.95rem;
  }

  table.vue-list tr.ligne-livre > td[data-cell="Auteur(s)"] {
    grid-area: a;
    margin-bottom: 2px;
    font-size: 0.9rem;
  }

  table.vue-list tr.ligne-livre > td[data-cell="Année"] {
    grid-area: y;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  table.vue-list tr.ligne-livre > td[data-cell="Édition"] {
    grid-area: e;
    color: var(--gris3);
    font-size: 0.85rem;
  }

  table.vue-list
    tr.ligne-livre:has(> td[data-cell="Année"].vide)
    > td[data-cell="Édition"] {
    grid-column: 2 / 4;
  }

  table.vue-list tr.ligne-livre .livre-isbn {
    margin: 0;
    font-size: 0.75rem;
  }

  /* Événements : nom, puis date et nationalité en petit ; à droite l'âge (naissances), ou « il y a » et l'âge au décès */
  .events tr:not(.sticky):not(.events-jour) {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    column-gap: 8px;
    margin-bottom: 8px;
    padding: 10px 14px;
  }

  .events tr:not(.sticky):not(.events-jour) > td[data-cell="Interprète"] {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .events tr:not(.sticky):not(.events-jour) > td[data-cell="Date"],
  .events tr:not(.sticky):not(.events-jour) > td[data-cell="Nationalité"] {
    grid-row: 2;
    color: var(--gris3);
    font-size: 0.8rem;
  }

  .events
    tr:not(.sticky):not(.events-jour)
    > td[data-cell="Nationalité"]::before {
    content: "· ";
  }

  .events tr:not(.sticky):not(.events-jour) > td[data-cell^="Âge en"],
  .events tr:not(.sticky):not(.events-jour) > td[data-cell="Il y a"],
  .events tr:not(.sticky):not(.events-jour) > td[data-cell="Âge au décès"] {
    grid-column: 3;
    text-align: right;
    white-space: nowrap;
  }

  .events tr:not(.sticky):not(.events-jour) > td[data-cell^="Âge en"] {
    grid-row: 1 / span 2;
    align-self: center;
  }

  .events
    tr:not(.sticky):not(.events-jour)
    > td[data-cell^="Âge en"]
    .events-detail {
    display: block;
    margin: 0;
  }

  .events tr:not(.sticky):not(.events-jour) > td[data-cell="Il y a"] {
    grid-row: 1;
    font-weight: bold;
  }

  .events tr:not(.sticky):not(.events-jour) > td[data-cell="Il y a"]::before {
    content: "il y a ";
  }

  .events tr:not(.sticky):not(.events-jour) > td[data-cell="Âge au décès"] {
    grid-row: 2;
    color: var(--gris3);
    font-size: 0.8rem;
  }

  .events
    tr:not(.sticky):not(.events-jour)
    > td[data-cell="Âge au décès"]::before {
    content: "à ";
  }

  /* Interprètes (recherche, « Voir aussi » d'une fiche) : nom et âge, puis naissance, décès et nationalité, puis
     les nombres de disques et de chansons. En flex (les grilles alignaient ces lignes en colonnes, avec des trous) :
     les pseudo-éléments de largeur 100 % servent de retours à la ligne entre les groupes (order) */
  table.liste-interpretes tr:not(.sticky):not(.suite-resultats) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    margin-bottom: 8px;
    padding: 10px 14px;
  }

  table.liste-interpretes tr:not(.sticky):not(.suite-resultats)::before,
  table.liste-interpretes tr:not(.sticky):not(.suite-resultats)::after {
    content: "";
    flex-basis: 100%;
    order: 2;
  }

  table.liste-interpretes tr:not(.sticky):not(.suite-resultats)::after {
    order: 4;
  }

  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td.interp-coche {
    order: 0;
    width: auto;
  }

  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Interprète"] {
    flex: 1 1 0;
    order: 1;
    min-width: 0;
  }

  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Âge"] {
    order: 1;
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
  }

  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Naissance"],
  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Décès"],
  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Nationalité"] {
    order: 3;
    color: var(--gris3);
    font-size: 0.8rem;
  }

  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Décès"]::before {
    content: "† ";
  }

  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Nationalité"]::before {
    content: "· ";
  }

  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Disques"],
  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Chansons"] {
    order: 5;
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: bold;
  }

  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Disques"]::before {
    content: "Disques ";
  }

  table.liste-interpretes
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Chansons"]::before {
    content: "Chansons ";
  }

  /* Chansons : titre et année, puis l'interprète, puis les disques où elle figure */
  table.tableau-chansons tr:not(.sticky):not(.suite-resultats) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 10px;
    margin-bottom: 8px;
    padding: 10px 14px;
  }

  table.tableau-chansons
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Chanson"] {
    grid-column: 1;
    grid-row: 1;
  }

  table.tableau-chansons
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Année"] {
    grid-column: 2;
    grid-row: 1;
    color: var(--gris3);
    font-size: 0.85rem;
  }

  table.tableau-chansons
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Interprète"] {
    grid-column: 1 / 3;
    font-size: 0.9rem;
  }

  table.tableau-chansons
    tr:not(.sticky):not(.suite-resultats)
    > td[data-cell="Disques"] {
    grid-column: 1 / 3;
    margin-top: 4px;
    font-size: 0.85rem;
  }
}

/* ===== Liste / galerie (choix séparés pour les disques et pour les livres) =====
   Chaque liste porte vue-list ou vue-grid (AttributsVue() dans tools.php, cookies vue_disques / vue_livres), basculée par script.js.
   En galerie, les tableaux .tableau-galerie deviennent une grille de cartes ; mêmes lignes HTML qu'en liste. */

.choix-vue {
  display: inline-flex;
  flex-shrink: 0;
  padding: 3px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
}

.choix-vue button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.choix-vue button img {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.choix-vue button:hover {
  background: var(--sombre-bleute, #e3ecf5);
}

.choix-vue button[aria-pressed="true"] {
  background: var(--bleu5);
  color: #fff;
  cursor: default;
}

.choix-vue button[aria-pressed="true"] img {
  filter: invert(1);
  opacity: 1;
}

/* Galerie : tableaux */
table.tableau-galerie.vue-grid {
  display: block;
  margin: 12px 0 30px;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

table.tableau-galerie.vue-grid > tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

table.tableau-galerie.vue-grid tr:has(> th),
table.tableau-galerie.vue-grid tr.sticky {
  display: none;
}

table.tableau-galerie.vue-grid tr {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 12px 10px 14px;
  background: var(--sombre-carte, #fff);
  border-radius: 10px;
  box-shadow:
    0 2px 10px rgba(44, 62, 80, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.06);
  text-align: center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

table.tableau-galerie.vue-grid tr:not(.sticky):hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 18px rgba(44, 62, 80, 0.14),
    0 2px 5px rgba(0, 0, 0, 0.08);
}

table.tableau-galerie.vue-grid td,
table.tableau-galerie.vue-grid td[data-cell] {
  display: block;
  width: 100%;
  padding: 1px 0;
  border: none;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4;
}

table.tableau-galerie.vue-grid tr:not(.sticky):hover td {
  background: none;
}

table.tableau-galerie.vue-grid td[data-cell]::before {
  content: none;
}

table.tableau-galerie.vue-grid td.galerie-cache,
table.tableau-galerie.vue-grid .livre-isbn {
  display: none;
}

table.tableau-galerie.vue-grid td.galerie-image {
  margin-bottom: 8px;
}

table.tableau-galerie.vue-grid td.galerie-image img {
  display: block;
  width: 150px;
  max-width: 100%;
  height: 150px;
  max-height: none;
  margin: 0 auto;
  object-fit: cover;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

table.tableau-galerie.vue-grid td.galerie-image img.couverture-mini {
  width: 140px;
  height: 200px;
}

table.tableau-galerie.vue-grid td.galerie-titre {
  font-size: 0.95rem;
  font-weight: bold;
}

/* Disques : l'espace va entre le titre et les années, pas entre les années et le support (marge des <p> du support) */
table.tableau-galerie.vue-grid td[data-cell="Année"] {
  margin-top: 8px;
}

table.tableau-galerie.vue-grid td[data-cell="Support"] p {
  margin: 0;
}

table.tableau-galerie.vue-grid td.galerie-date {
  order: -1;
  margin-bottom: 6px;
  color: var(--gris3);
  font-size: 0.8rem;
}

table.tableau-galerie.vue-grid .livre-statut {
  display: table;
  margin: 4px auto 0;
}

/* Lignes qui ne sont pas des cartes : bouton « suite », total en pied de tableau */
table.tableau-galerie.vue-grid tr.suite-resultats {
  grid-column: 1 / -1;
  background: none;
  box-shadow: none;
  transform: none;
}

/* Galerie : livres affichés en fiches (afficheLivre, livres.php et discographie) */
.livres-galerie.vue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin: 12px 0 30px;
}

.livres-galerie.vue-grid hr,
.livres-galerie.vue-grid details,
.livres-galerie.vue-grid .description {
  display: none;
}

.livres-galerie.vue-grid .couverture {
  display: block;
  width: 140px;
  height: 200px;
  max-width: 100%;
  margin: 0 auto 8px;
  object-fit: cover;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.livres-galerie.vue-grid h3 {
  margin: 0 0 6px !important;
  font-size: 0.95rem;
  line-height: 1.3;
}

@media (max-width: 1100px) {
  table.tableau-galerie.vue-grid > tbody,
  .livres-galerie.vue-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }

  table.tableau-galerie.vue-grid td.galerie-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  table.tableau-galerie.vue-grid td.galerie-image img.couverture-mini,
  .livres-galerie.vue-grid .couverture {
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 10;
  }

  .choix-vue button {
    padding: 4px 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  table.tableau-galerie.vue-grid tr {
    transition: none;
  }
}

/* Mobile : bandeau de la recherche sur une seule ligne (pastilles défilantes) ; titres de rubrique sur deux lignes si besoin */
@media (max-width: 1100px) {
  .sommaire-carte {
    flex-wrap: nowrap;
  }

  .sommaire-liens {
    flex: 1;
    min-width: 0;
  }

  /* Bandeau à peu de pastilles (disques favoris, hors Discogs) : le choix liste / galerie passe dessous plutôt que de
     les couper ; si elles ne tiennent toujours pas, elles défilent au doigt comme le tri */
  .sommaire-carte.sommaire-replie {
    flex-wrap: wrap;
  }

  .sommaire-replie .sommaire-liens {
    flex: none;
    width: auto;
  }

  .sommaire-replie .choix-tri {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sommaire-replie .choix-tri a {
    flex-shrink: 0;
  }

  /* Gestion : les raccourcis gardent toute la ligne, la déconnexion passe dessous, à droite */
  .sommaire-carte.gestion-sommaire {
    flex-wrap: wrap;
  }

  .gestion-sommaire .sommaire-liens {
    flex-basis: 100%;
  }

  .gestion-sommaire .btn-rouge {
    margin-left: auto;
  }

  .titre-rubrique {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
}

/* Menu d'accès rapide : pastille sans nombre (ex. Biographie) */
a.puce-resultat.sans-nb:not(.nav-links a) {
  padding-right: 14px;
}

/* Fiche interprète : en-tête avec le nom, le type et les informations de base en tuiles */
.fiche-interprete {
  margin: 20px 0 5px;
  padding: 20px 24px;
  background: var(--sombre-carte, #fff);
  border-radius: 14px;
  border-top: 4px solid var(--bleu4);
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.fiche-interprete-titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.fiche-interprete-titre :is(h1, h2) {
  margin: 0;
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1.9rem;
  line-height: 1.2;
}

.fiche-interprete-type {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  border: 1px solid var(--bleu1);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.8rem;
  font-weight: bold;
}

.fiche-interprete-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.tuile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--sombre-doux, #f6f8fb);
  border: 1px solid var(--sombre-bord, #e6ebf2);
}

.tuile-libelle {
  color: var(--gris3);
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tuile-valeur {
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.3;
}

/* Rubrique « Liens » de la fiche interprète (tableau) : adresse discrète, coupée si elle est longue */
.liens-sites-adresse {
  color: var(--gris3);
  overflow-wrap: anywhere;
}

.tuile-detail {
  color: var(--gris3);
  font-size: 0.8rem;
}

/* Tuile « Nationalité » : silhouette du (premier) pays alignée à droite, en décor derrière le texte */
.tuile.tuile-silhouette {
  position: relative;
  overflow: hidden;
}

.tuile-silhouettes {
  position: absolute;
  top: 6px;
  right: 10px;
  bottom: 6px;
  display: flex;
  gap: 6px;
  pointer-events: none;
}

.tuile-silhouettes svg {
  height: 100%;
  width: auto;
  max-width: 110px;
  fill: #c9d9ea;
}

@media (max-width: 1100px) {
  .tuile-silhouettes svg {
    max-width: 70px;
  }
}

/* Smartphone : petite silhouette en haut à droite, la tuile étant souvent étirée par sa voisine (« aurait 255 ans… ») */
@media (max-width: 600px) {
  .tuile-silhouettes {
    bottom: auto;
    height: 42px;
  }

  .tuile-silhouettes svg {
    max-width: 54px;
  }
}

.tuile-silhouette .tuile-libelle,
.tuile-silhouette .tuile-valeur {
  position: relative;
}

/* Tuile entièrement cliquable (nationalité : premier pays) ; les textes, au-dessus du lien, laissent passer le clic */
.tuile.tuile-cliquable {
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tuile.tuile-cliquable:hover {
  border-color: var(--bleu3);
  background-color: var(--sombre-bleute, #eef3f9);
}

a.tuile-lien:not(.nav-links a) {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

a.tuile-lien:not(.nav-links a)::after {
  display: none;
}

a.tuile-lien:not(.nav-links a):focus-visible {
  outline: 2px solid var(--bleu3);
  outline-offset: 2px;
}

.tuile-cliquable .tuile-libelle,
.tuile-cliquable .tuile-valeur {
  position: relative;
}

.tuile-cliquable .tuile-libelle,
.tuile-cliquable .tuile-valeur {
  pointer-events: none;
}

.est-fixe .tuile-silhouettes {
  display: none;
}

/* Anniversaire de naissance, de décès, de formation… le jour même */
.tuile.tuile-anniversaire {
  background: var(--sombre-jaune, #fff8e1);
  border-color: var(--accent-color);
}

/* Sombre : un fond brun détonne parmi les bleus ; la tuile garde son fond, un liseré doré la distingue */
:root[data-theme="sombre"] .tuile.tuile-anniversaire {
  background: var(--sombre-doux);
  border-color: rgba(242, 201, 76, 0.35);
  box-shadow: inset 3px 0 0 var(--accent-color);
}

.tuile.tuile-anniversaire .tuile-detail {
  color: var(--sombre-texte-jaune, #a07800);
  font-weight: bold;
}

/* Biographies justifiées sur tous les écrans (smartphone compris depuis le 2026-11-02), avec césure pour éviter les grands blancs */
.biographie {
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
}

@media (max-width: 1100px) {
  .fiche-interprete {
    padding: 16px;
  }

  .fiche-interprete-titre :is(h1, h2) {
    font-size: 1.5rem;
  }

  .fiche-interprete-tuiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .tuile-valeur {
    font-size: 1rem;
  }
}

/* Fiche interprète avec menu : pavé complet dans la page, puis bandeau fixe compact sous l'en-tête (script.js) */
.fiche-ancre {
  margin: 20px 0 5px;
}

body.sommaire-fixe .sommaire-resultats.sommaire-flottant {
  position: relative;
  top: auto;
  margin: 0;
  padding: 0;
  background: none;
}

.sommaire-flottant .fiche-interprete {
  margin: 0;
}

.sommaire-flottant .sommaire-liens {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--sombre-bord, #e6ebf2);
}

body.sommaire-fixe .sommaire-resultats.sommaire-flottant.est-fixe {
  position: fixed;
  top: var(--hauteur-entete);
  z-index: 950;
  padding: 8px 0;
  background: var(--bg-color);
}

.est-fixe .fiche-interprete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  padding: 8px 18px 10px;
  border-top-width: 3px;
}

.est-fixe .fiche-interprete-titre :is(h1, h2) {
  font-size: 1.2rem;
}

.fiche-interprete-type.fiche-masquee {
  background: var(--sombre-rouge, #fbf3f3);
  border-color: var(--rouge2);
  color: var(--sombre-texte-rouge4, var(--rouge4));
}

.est-fixe .fiche-interprete-type {
  padding: 0 8px;
  font-size: 0.7rem;
}

.est-fixe .fiche-interprete-tuiles {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin: 0;
}

.est-fixe .tuile {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
}

.est-fixe .tuile-libelle {
  font-size: 0.65rem;
}

.est-fixe .tuile-valeur {
  font-size: 0.9rem;
}

.est-fixe .tuile-detail {
  display: none;
}

.est-fixe .tuile.tuile-anniversaire .tuile-valeur {
  color: var(--sombre-texte-jaune, #a07800);
}

.est-fixe .sommaire-liens {
  flex-basis: 100%;
  margin-top: 4px;
  padding-top: 8px;
}

@media (max-width: 1100px) {
  .est-fixe .fiche-interprete {
    gap: 2px 12px;
    padding: 6px 12px 8px;
  }

  .est-fixe .fiche-interprete-titre :is(h1, h2) {
    font-size: 1rem;
  }

  /* Infos sur une seule ligne, à faire glisser si elles dépassent */
  .est-fixe .fiche-interprete-tuiles {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 12px;
  }

  .est-fixe .tuile {
    flex-shrink: 0;
  }

  .est-fixe .tuile-valeur {
    font-size: 0.85rem;
    white-space: nowrap;
  }
}

/* ===== Classements : chiffres clés, tri en pastilles et tableau en carte (même esprit que la recherche) ===== */
.classements-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 15px 0 12px;
  padding: 16px 20px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.classements-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.classements-chiffres p {
  display: flex;
  flex-direction: column;
  color: var(--gris3);
  font-size: 0.85rem;
}

.classements-chiffre {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.classements-tri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choix-tri {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 3px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
}

.choix-tri a:not(.nav-links a) {
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.choix-tri a:not(.nav-links a)::after {
  display: none;
}

.choix-tri a:not(.nav-links a):hover,
.choix-tri a:not(.nav-links a):focus-visible {
  background: var(--sombre-bleute, #e3ecf5);
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

.choix-tri a[aria-current="true"]:not(.nav-links a) {
  background: var(--bleu5);
  color: #fff;
}

/* Filtre par support des tableaux de disques (FiltreSupports) : liens ou boutons (filtre sans rechargement, script.js) */
.choix-tri button {
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.choix-tri button:hover,
.choix-tri button:focus-visible {
  background: var(--sombre-bleute, #e3ecf5);
}

.choix-tri button[aria-pressed="true"],
.choix-tri button[aria-pressed="true"]:hover {
  background: var(--bleu5);
  color: #fff;
}

/* Barre collée sous l'en-tête et le bandeau tant que son tableau défile (le bloc .filtre-bloc l'arrête à la fin du tableau) ;
   les en-têtes de colonne se collent dessous (--hauteur-filtre, mesurée par script.js) */
.filtre-supports {
  position: sticky;
  top: calc(var(--hauteur-entete) + var(--hauteur-sommaire, 0px));
  z-index: 920;
  margin: 0 0 8px;
  padding: 6px 0;
  background: var(--bg-color);
}

.filtre-supports .filtre-nb {
  font-weight: normal;
  opacity: 0.75;
}

/* Petit écran : les sélecteurs en pastilles gardent la largeur de leur contenu (la règle générale « nav { width: 100% } »
   les étirait) ; filtre par support sur une seule ligne qui défile (comme le tri), sans le libellé « Support » */
@media (max-width: 1100px) {
  nav.choix-tri {
    width: auto;
  }

  .stat-tri.filtre-supports {
    justify-content: flex-start;
  }

  .filtre-supports > span {
    display: none;
  }

  .filtre-supports .choix-tri {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filtre-supports .choix-tri::-webkit-scrollbar {
    display: none;
  }

  .filtre-supports .choix-tri > * {
    flex-shrink: 0;
  }
}

tr.filtre-masque,
section.filtre-masque {
  display: none !important;
}

.table-classements {
  margin: 0 0 30px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.table-classements th {
  padding: 12px 14px 9px;
  border-bottom: 2px solid var(--bleu4);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.table-classements th:first-child {
  width: 3.5rem;
  border-top-left-radius: 12px;
}

.table-classements th:last-child {
  border-top-right-radius: 12px;
}

.table-classements th.droite {
  text-align: right;
}

.table-classements td {
  padding: 9px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--sombre-bord, #eceff3);
}

.table-classements tbody:first-of-type tr:hover td {
  background: var(--sombre-doux, #f3f7fb);
}

/* Barre proportionnelle, dans sa colonne (largeur posée en ligne via --largeur) */
.table-classements .classement-col-barre {
  width: 35%;
}
.classement-barre {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--sombre-doux, #eef1f5);
}

.classement-barre::before {
  content: "";
  display: block;
  width: var(--largeur, 0%);
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bleu2), var(--bleu4));
}

.classement-rang {
  display: inline-block;
  min-width: 2em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--sombre-bleute, #eef3f8);
  color: var(--sombre-texte-bleu4, var(--bleu4));
  font-size: 0.8rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.classement-nb {
  font-weight: bold;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-variant-numeric: tabular-nums;
}

.classements-part {
  width: 5rem;
  color: var(--gris3);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.classement-non-classes a:not(.nav-links a) {
  font-style: italic;
  color: var(--gris3);
}

.classement-non-classes .classement-barre::before {
  background: var(--gris2);
}

/* Totaux et disques hors Discogs, séparés de la liste */
.classements-totaux td {
  background: var(--sombre-doux, #fafbfc);
}

.classements-sous-total td {
  border-top: 2px solid var(--bleu1);
  font-weight: bold;
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

/* Titre de sous-rubrique (« Hors Discogs ») : bien détaché du sous-total qui précède */
.classements-groupe td {
  padding-top: 26px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bleu2);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.classements-total td {
  border-bottom: none;
  background: var(--bleu5);
  color: #fff;
  font-weight: bold;
}

.classements-total td.classement-nb {
  color: #fff;
  font-size: 1.1rem;
}

.classements-total td:first-child {
  border-bottom-left-radius: 12px;
}

.classements-total td:last-child {
  border-bottom-right-radius: 12px;
}

@media (max-width: 1100px) {
  .classements-entete {
    padding: 12px 14px;
  }

  .classements-chiffre {
    font-size: 1.3rem;
  }

  .table-classements th,
  .table-classements td {
    padding-left: 8px;
    padding-right: 8px;
  }

  .table-classements th:first-child {
    width: 2.5rem;
  }

  .table-classements .classements-part {
    display: none;
  }

  .table-classements .classement-col-barre {
    width: 18%;
  }

  .table-classements th:nth-child(4) {
    border-top-right-radius: 12px;
  }

  .classements-total td:nth-child(4) {
    border-bottom-right-radius: 12px;
  }
}

/* Genres par période (classements.php) : carte de chaleur classements × décennies, teinte = part de la décennie */
.genres-periodes {
  margin: 0 0 30px;
  padding: 18px 20px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}
.genres-periodes h3 {
  margin: 0 0 6px;
  color: var(--sombre-texte-bleu5, var(--bleu5));
}
.genres-periodes-intro {
  margin: 0 0 10px;
  color: var(--gris4);
  font-size: 0.9rem;
}
.genres-periodes-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 12px;
  color: var(--gris4);
  font-size: 0.8rem;
}
.genres-periodes-pastille {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.genres-periodes-pastille i {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
/* Ligne de titre fixée sous l'en-tête du site. Écran étroit : le cadre défile dans les deux sens
   (hauteur limitée à l'écran), la ligne de titre et la colonne des noms restent fixées dans le cadre */
.genres-periodes-cadre {
  overflow: auto;
  max-height: calc(100vh - var(--hauteur-entete) - 20px);
}
@media (min-width: 900px) {
  .genres-periodes-cadre {
    overflow: visible;
    max-height: none;
  }
}
.table-genres-periodes {
  margin: 0;
  border-spacing: 2px;
  font-variant-numeric: tabular-nums;
}
.table-genres-periodes th {
  padding: 6px 8px;
  border-bottom: 2px solid var(--bleu4);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.78rem;
  white-space: nowrap;
}
.table-genres-periodes thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sombre-carte, #fff);
}
.table-genres-periodes thead th:first-child {
  left: 0;
  z-index: 3;
}
@media (min-width: 900px) {
  .table-genres-periodes thead th {
    top: var(--hauteur-entete);
  }
}
.table-genres-periodes tbody th,
.table-genres-periodes tfoot th {
  position: sticky;
  left: 0;
  z-index: 1;
  border-bottom: 1px solid var(--sombre-bord, #eceff3);
  font-size: 0.85rem;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
}
.table-genres-periodes td {
  min-width: 3.2em;
  padding: 5px 6px;
  border-radius: 3px;
  text-align: center;
  vertical-align: middle;
  font-size: 0.82rem;
}
.table-genres-periodes tbody tr:hover th {
  background: var(--sombre-doux, #f3f7fb);
}
.table-genres-periodes tfoot th,
.table-genres-periodes tfoot td {
  border-top: 2px solid var(--bleu1);
  border-radius: 0;
  font-weight: bold;
  color: var(--sombre-texte-primary-color, var(--primary-color));
}
/* Petit écran : noms sur plusieurs lignes, pour laisser voir les décennies */
@media (max-width: 600px) {
  .genres-periodes {
    padding: 14px 10px;
  }
  .table-genres-periodes tbody th,
  .table-genres-periodes tfoot th {
    min-width: 7.5em;
    max-width: 7.5em;
    padding: 4px 6px;
    white-space: normal;
    font-size: 0.78rem;
  }
  .table-genres-periodes td {
    min-width: 2.6em;
    padding: 4px 3px;
    font-size: 0.75rem;
  }
}
/* Teintes : une seule couleur, du plus clair au plus foncé (texte blanc sur les deux plus foncées) */
.gp-t1 { background: var(--sombre-bleute, #eef3f8); color: var(--gris4); }
.gp-t2 { background: var(--sombre-bleute, #d6e4f1); color: var(--gris5); }
.gp-t3 { background: #b3cde8; color: var(--gris5); }
.gp-t4 { background: #84acc8; color: var(--sombre-texte, #10202f); }
.gp-t5 { background: #40688f; color: #fff; }
.gp-t6 { background: #2e4d73; color: #fff; }

/* ===== Livres : introduction, filtre instantané et tri (tableaux : .resultats-recherche) ===== */
.livres-intro {
  margin: 10px 0 5px;
  padding: 12px 18px;
  border-left: 4px solid var(--bleu2);
  border-radius: 0 10px 10px 0;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--gris4);
  line-height: 1.5;
}

.livres-intro p + p {
  margin-top: 6px;
  color: var(--gris3);
  font-size: 0.9rem;
}

/* Bouton à droite dans l'introduction (livres.php : commentaires des livres) */
.livres-intro p.livres-intro-bouton {
  margin-top: 10px;
  text-align: right;
}

.filtre-livres {
  flex: 1 1 260px;
  max-width: 420px;
}

/* Page livres : pastilles des rubriques, tri et choix liste / galerie regroupés à droite du filtre, qui se réduit
   (jusqu'à 180 px) pour que tout tienne sur une ligne */
.livres-bandeau {
  gap: 12px 14px;
}

.livres-bandeau .filtre-livres {
  flex: 1 1 180px;
  max-width: 340px;
}

.livres-bandeau .sommaire-liens {
  margin-left: auto;
}

.livres-bandeau .choix-tri,
.livres-bandeau .choix-vue {
  flex: none;
}

.filtre-livres input {
  width: 100%;
  padding: 8px 14px 8px 36px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2340688f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E")
    no-repeat 13px center;
  color: var(--text-color);
  font: inherit;
  font-size: 0.95rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.filtre-livres input:focus {
  outline: none;
  border-color: var(--bleu3);
  background-color: var(--sombre-carte, #fff);
  box-shadow: 0 0 0 3px rgba(93, 143, 178, 0.2);
}

mark.hl {
  padding: 0 1px;
  border-radius: 2px;
  background: var(--accent-color);
  color: #262626;
}

/* Éléments masqués par le filtre : l'attribut hidden doit l'emporter sur les display des tableaux et des pastilles */
.rubrique-livres[hidden],
.rubrique-livres tr[hidden],
.tableau-series tr[hidden],
.tableau-labels tr[hidden],
a.puce-resultat[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Infobulles : tout élément qui porte data-bulle='Texte' (script.js les affiche, au survol, au clavier et au toucher).
   La bulle est placée par-dessus la page (position fixe) : jamais coupée par un tableau qui défile ou un texte tronqué.
   .bulle : élément non cliquable (icône) rendu atteignable au clavier avec tabindex='0' */
.bulle {
  border-radius: 4px;
  cursor: help;
}

.bulle:focus {
  outline: none;
}

.bulle:focus-visible {
  outline: 2px solid var(--bleu2);
  outline-offset: 2px;
}

.bulle-boite {
  position: fixed;
  z-index: 2000;
  max-width: min(320px, calc(100vw - 16px));
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bleu5);
  box-shadow: 0 4px 12px rgba(44, 62, 80, 0.25);
  color: #fff;
  font-size: 0.8rem;
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.bulle-boite.dessous {
  transform: translateY(-4px);
}

.bulle-boite.visible {
  opacity: 1;
  transform: none;
}

/* La pointe, dirigée vers l'élément (--pointe : sa position horizontale dans la bulle) */
.bulle-boite::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--pointe, 50%);
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: var(--bleu5);
  transform: translateX(-50%);
}

.bulle-boite.dessous::after {
  top: auto;
  bottom: 100%;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: var(--bleu5);
}

@media (prefers-reduced-motion: reduce) {
  .bulle-boite {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .filtre-livres {
    flex-basis: 100%;
    max-width: none;
  }

  /* Page livres : le filtre sur toute la largeur, puis pastilles, tri et liste / galerie alignés à gauche (comme disques.php) */
  .sommaire-carte.livres-bandeau {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .livres-bandeau .filtre-livres {
    flex-basis: 100%;
    max-width: none;
  }

  .livres-bandeau .sommaire-liens {
    flex: none;
    width: auto;
    margin-left: 0;
  }
}

/* ===== Menus en tuiles (AfficheTuiles() : interpretes.php, divers.php) ===== */
.menu-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 15px 0 30px;
}

a.tuile:not(.nav-links a) {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: var(--sombre-carte, #fff);
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  color: var(--text-color);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

a.tuile:not(.nav-links a)::after {
  display: none;
}

a.tuile:not(.nav-links a):hover,
a.tuile:not(.nav-links a):focus-visible {
  color: var(--text-color);
  border-color: var(--bleu1);
  transform: translateY(-3px);
  box-shadow:
    0 10px 24px rgba(44, 62, 80, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.08);
}

.tuile-icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--sombre-bleute, #eef3f8);
  font-size: 1.5rem;
  transition: background-color 0.2s ease;
}

a.tuile:hover .tuile-icone,
a.tuile:focus-visible .tuile-icone {
  background: var(--bleu1);
}

.tuile-texte {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tuile-titre {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1.05rem;
  font-weight: bold;
}

.tuile-externe {
  color: var(--bleu3);
  font-size: 0.85em;
}

.tuile-description {
  color: var(--gris3);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ===== F.A.Q. : questions en accordéon, galerie de la collection et visionneuse ===== */
.faq-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 10px 0;
  color: var(--gris3);
  font-size: 0.85rem;
}

.faq-outils span {
  margin-right: auto;
}

.faq-tout {
  padding: 4px 12px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.faq-tout:hover {
  background: var(--sombre-bleute, #e3ecf5);
}

/* Toutes les questions dépliées */
.faq-tout.actif {
  border-color: var(--bleu5);
  background: var(--bleu5);
  color: #fff;
}

.faq-tout.actif:hover {
  background: var(--bleu4);
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  scroll-margin-top: calc(var(--hauteur-entete) + 15px);
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  list-style: none;
  cursor: pointer;
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-weight: bold;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Chevron qui pivote à l'ouverture */
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--bleu4);
  border-bottom: 2px solid var(--bleu4);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-item summary:hover .faq-question {
  color: var(--sombre-texte-bleu4, var(--bleu4));
}

.faq-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sombre-bleute, #eef3f8);
  color: var(--sombre-texte-bleu4, var(--bleu4));
  font-size: 0.85rem;
}

.faq-item[open] .faq-num {
  background: var(--bleu5);
  color: #fff;
}

.faq-reponse {
  padding: 0 18px 16px 62px;
  color: var(--gris4);
  line-height: 1.6;
}

.faq-reponse p + p {
  margin-top: 10px;
}

.faq-item[open] .faq-reponse {
  animation: apparition-ligne 0.3s ease-out;
}

.faq-materiel {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
}

.faq-materiel dt {
  color: var(--gris3);
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6rem;
}

.faq-materiel dd {
  margin: 0;
}

.faq-materiel dd span {
  display: block;
  color: var(--gris3);
  font-size: 0.85rem;
}

.faq-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.faq-galerie figure {
  margin: 0;
  text-align: center;
}

.faq-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.faq-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.faq-photo:hover img,
.faq-photo:focus-visible img {
  transform: scale(1.06);
}

.faq-galerie figcaption {
  margin-top: 6px;
  color: var(--gris3);
  font-size: 0.85rem;
}

.faq-galerie figcaption b {
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

.faq-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 25px 0 10px;
  padding: 16px 20px;
  border-left: 4px solid var(--bleu2);
  border-radius: 0 12px 12px 0;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--gris4);
  line-height: 1.5;
}

a.faq-contact-bouton:not(.nav-links a) {
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--bleu4);
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

a.faq-contact-bouton:not(.nav-links a)::after {
  display: none;
}

a.faq-contact-bouton:not(.nav-links a):hover,
a.faq-contact-bouton:not(.nav-links a):focus-visible {
  background: var(--bleu5);
  color: #fff;
}

/* Visionneuse plein écran : scène (photo centrée), légende, bande de miniatures ; boutons par-dessus */
html.visionneuse-ouverte {
  overflow: hidden;
}

.visionneuse {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

.visionneuse[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.visionneuse::backdrop {
  background: rgba(10, 15, 25, 0.9);
  backdrop-filter: blur(3px);
  animation: visionneuse-fondu 0.3s ease-out;
}

.visionneuse.se-ferme::backdrop,
.visionneuse.se-ferme .visionneuse-legende,
.visionneuse.se-ferme .visionneuse-bande,
.visionneuse.se-ferme button {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.visionneuse-scene {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1;
  width: calc(100% - 140px);
  min-height: 0;
  margin-top: 20px;
  touch-action: pan-y;
  user-select: none;
}

.visionneuse-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
  -webkit-user-drag: none;
}

/* Grande photo pas encore chargée : roue au centre, photo estompée */
.visionneuse-chargement {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--sombre-carte, #fff);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: rotation-chargement 0.8s linear infinite;
  transition: opacity 0.2s ease;
}

.visionneuse-scene.en-chargement .visionneuse-chargement {
  opacity: 1;
}

.visionneuse-scene.en-chargement .visionneuse-image {
  opacity: 0.4;
}

.visionneuse-legende {
  margin: 12px 0 0;
  color: #fff;
  text-align: center;
  animation: visionneuse-fondu 0.3s ease-out;
}

.visionneuse-legende b {
  font-size: 1.1rem;
}

.visionneuse-legende span {
  margin-left: 12px;
  color: var(--gris2);
  font-size: 0.85rem;
}

.visionneuse-bande {
  display: flex;
  gap: 8px;
  max-width: calc(100% - 32px);
  margin: 12px 0 16px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  animation: visionneuse-fondu 0.3s ease-out;
}

.visionneuse button {
  border: none;
  cursor: pointer;
}

.visionneuse-bande button {
  flex-shrink: 0;
  width: 64px;
  height: 48px;
  padding: 0;
  border-radius: 6px;
  background: none;
  overflow: hidden;
  opacity: 0.45;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition:
    opacity 0.2s ease,
    outline-color 0.2s ease;
}

.visionneuse-bande button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visionneuse-bande button:hover,
.visionneuse-bande button:focus-visible {
  opacity: 0.8;
}

.visionneuse-bande button[aria-current] {
  opacity: 1;
  outline-color: var(--sombre-carte, #fff);
}

.visionneuse-fermer,
.visionneuse-nav {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
  animation: visionneuse-fondu 0.3s ease-out;
}

.visionneuse-fermer:hover,
.visionneuse-fermer:focus-visible,
.visionneuse-nav:hover,
.visionneuse-nav:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

.visionneuse-nav:hover {
  transform: translateY(-50%) scale(1.08);
}

.visionneuse-fermer {
  top: 16px;
  right: 16px;
}

.visionneuse-nav {
  top: 50%;
  transform: translateY(-50%);
}

.visionneuse-nav[data-pas="-1"] {
  left: 16px;
}

.visionneuse-nav[data-pas="1"] {
  right: 16px;
}

@keyframes visionneuse-fondu {
  from {
    opacity: 0;
  }
}

@media (max-width: 1100px) {
  .menu-tuiles {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  a.tuile:not(.nav-links a) {
    padding: 14px;
  }

  .faq-item summary {
    padding: 12px 14px;
    gap: 10px;
  }

  .faq-reponse {
    padding: 0 14px 14px;
  }

  .faq-materiel {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .faq-materiel dd {
    margin-bottom: 8px;
  }

  .faq-galerie {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .visionneuse-scene {
    width: calc(100% - 24px);
    margin-top: 72px;
  }

  .visionneuse-fermer,
  .visionneuse-nav {
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
  }

  .visionneuse-fermer {
    top: 12px;
    right: 12px;
  }

  .visionneuse-nav[data-pas="-1"] {
    left: 8px;
  }

  .visionneuse-nav[data-pas="1"] {
    right: 8px;
  }

  .visionneuse-bande button {
    width: 52px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.tuile:not(.nav-links a),
  .faq-photo img,
  .faq-item summary::after {
    transition: none;
  }

  .faq-item[open] .faq-reponse {
    animation: none;
  }

  .visionneuse::backdrop,
  .visionneuse-legende,
  .visionneuse-bande,
  .visionneuse-fermer,
  .visionneuse-nav,
  .visionneuse-chargement {
    animation: none;
  }
}

/* ===== Contact : formulaire en carte, erreurs sous les champs, page de remerciement ===== */
.contact {
  max-width: 760px;
  margin: 10px auto 30px;
}

.contact-intro {
  margin-bottom: 14px;
  padding: 12px 18px;
  border-left: 4px solid var(--bleu2);
  border-radius: 0 10px 10px 0;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--gris4);
  line-height: 1.5;
}

.contact-alerte {
  margin-bottom: 14px;
  padding: 12px 18px;
  border-left: 4px solid var(--rouge3);
  border-radius: 0 10px 10px 0;
  background: var(--sombre-rouge, #fbf1f1);
  color: var(--sombre-texte-rouge4, var(--rouge4));
  line-height: 1.5;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.contact-ligne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.contact-champ > label,
.contact-champ > legend {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 0.9rem;
  font-weight: bold;
}

.contact-requis {
  color: var(--sombre-texte-rouge3, var(--rouge3));
}

.contact-facultatif {
  margin-left: 4px;
  color: var(--gris2);
  font-size: 0.8rem;
  font-weight: normal;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="url"],
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--sombre-bord, #d5dee8);
  border-radius: 8px;
  background: var(--sombre-doux, #fafcfe);
  color: var(--text-color);
  font: inherit;
  font-size: 1rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.5;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--bleu3);
  background: var(--sombre-carte, #fff);
  box-shadow: 0 0 0 3px rgba(93, 143, 178, 0.2);
}

.contact-form [aria-invalid="true"] {
  border-color: var(--rouge2);
  background: var(--sombre-rouge, #fffafa);
}

.contact-form [aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(183, 109, 109, 0.2);
}

.contact-erreur {
  color: var(--sombre-texte-rouge3, var(--rouge3));
  font-size: 0.85rem;
}

.contact-erreur::before {
  content: "⚠ ";
}

.contact-compteur {
  align-self: flex-end;
  color: var(--gris2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.contact-compteur.presque-plein {
  color: var(--sombre-texte-rouge3, var(--rouge3));
}

/* Sujets : pastilles à cocher */
.contact-sujets {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-sujets legend {
  width: 100%;
  margin-bottom: 6px;
}

.contact-sujets label {
  cursor: pointer;
}

.contact-sujets input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-sujets span {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.9rem;
  font-weight: bold;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.contact-sujets label:hover span {
  background: var(--sombre-bleute, #e3ecf5);
}

.contact-sujets input:checked + span {
  border-color: var(--bleu5);
  background: var(--bleu5);
  color: #fff;
}

.contact-sujets input:focus-visible + span {
  outline: 2px solid var(--bleu3);
  outline-offset: 2px;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding-top: 16px;
  border-top: 1px solid var(--sombre-bord, #eceff3);
}

.contact-mention {
  margin-right: auto;
  color: var(--gris3);
  font-size: 0.85rem;
}

a.contact-annuler:not(.nav-links a) {
  color: var(--gris3);
  font-weight: bold;
}

.contact-bouton,
a.contact-bouton:not(.nav-links a) {
  display: inline-flex;
  align-items: center;
  padding: 10px 26px;
  border: none;
  border-radius: 999px;
  background: var(--bleu4);
  color: #fff;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(46, 77, 115, 0.3);
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

a.contact-bouton:not(.nav-links a)::after {
  display: none;
}

.contact-bouton:hover,
.contact-bouton:focus-visible,
a.contact-bouton:not(.nav-links a):hover,
a.contact-bouton:not(.nav-links a):focus-visible {
  background: var(--bleu5);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 77, 115, 0.35);
}

.contact-bouton:disabled {
  cursor: progress;
  transform: none;
}

.contact-bouton.en-chargement::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--sombre-carte, #fff);
  border-radius: 50%;
  animation: rotation-chargement 0.8s linear infinite;
}

.contact-resultat {
  max-width: 560px;
  margin: 30px auto;
  padding: 32px 28px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  text-align: center;
  line-height: 1.6;
}

.contact-resultat-icone {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--vert2);
  color: var(--sombre-texte-vert5, var(--vert5));
  font-size: 2rem;
  font-weight: bold;
  animation: apparition-ligne 0.4s ease-out;
}

.contact-resultat h3 {
  margin: 0 0 8px;
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

.contact-resultat-liens {
  margin-top: 18px;
}

@media (max-width: 1100px) {
  .contact-form {
    padding: 16px;
    gap: 14px;
  }

  .contact-ligne {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-actions {
    justify-content: flex-end;
  }

  .contact-mention {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-bouton.en-chargement::before,
  .contact-resultat-icone {
    animation: none;
  }
}

/* ===== Diaporama (AfficheDiaporama() : interpretes_enfants.php, humour.php) ===== */
html:has(.diaporama) {
  scroll-behavior: smooth;
}

/* Barre collée sous l'en-tête du site pendant le défilement (sa hauteur, --hauteur-outils, est mesurée par le script
   pour que l'image et les vignettes vers lesquelles on défile ne passent pas dessous) */
.diapo-outils {
  position: sticky;
  top: var(--hauteur-entete);
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 -10px 16px;
  padding: 10px;
  border-radius: 0 0 12px 12px;
  background: var(--bg-color);
  transition: box-shadow 0.2s ease;
}

.diapo-outils.colle {
  box-shadow: 0 6px 14px rgba(44, 62, 80, 0.12);
}

.diapo-nb {
  margin-right: auto;
  color: var(--gris3);
  font-size: 0.85rem;
}

.diapo-outils .diapo-hasard {
  margin: 0;
}

/* Noms masqués (jeu « Qui est-ce ? ») : bouton bascule, noms cachés sous les vignettes, bouton « Révéler le nom » */
.diapo-masquer {
  padding: 7px 16px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.diapo-masquer:hover {
  background: var(--sombre-bleute, #e3ecf5);
}

.diapo-masquer:focus-visible,
.diapo-reveler:focus-visible {
  outline: 2px solid var(--bleu2);
  outline-offset: 2px;
}

.noms-masques .diapo-vignette span {
  visibility: hidden;
}

.diapo-reveler {
  margin-left: 8px;
  padding: 3px 12px;
  border: 1px dashed var(--bleu3);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu4, var(--bleu4));
  font: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.diapo-reveler:hover {
  background: var(--sombre-bleute, #e3ecf5);
}

.diapo-scene {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 24px;
  padding: 20px 16px 14px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  scroll-margin-top: calc(
    var(--hauteur-entete) + var(--hauteur-outils, 0px) + 15px
  );
}

.diapo-scene[hidden] {
  display: none;
}

.diapo-scene figure {
  margin: 0;
  min-width: 0;
  text-align: center;
}

/* Cadre de taille fixe, quelle que soit la photo (de 125 à 1440 px de large) : la photo y est ajustée,
   le vide autour est comblé par la même photo, floutée (--fond, posée par le script) */
.diapo-cadre {
  position: relative;
  display: grid;
  place-items: center;
  height: min(440px, 58vh);
  overflow: hidden;
  border-radius: 10px;
  background: #1d2533;
  touch-action: pan-y;
  user-select: none;
  isolation: isolate;
}

.diapo-cadre::before {
  content: "";
  position: absolute;
  inset: -30px;
  z-index: -1;
  background: var(--fond, none) center / cover no-repeat;
  filter: blur(24px) brightness(0.55) saturate(1.2);
}

/* En absolu : une hauteur de 100 % n'est pas prise en compte dans la grille (la photo débordait, agrandie et coupée) */
.diapo-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

.diapo-cadre.agrandissable {
  cursor: zoom-in;
}

.diapo-loupe {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.diapo-cadre.agrandissable .diapo-loupe {
  opacity: 0.85;
}

.diapo-cadre.agrandissable:hover .diapo-loupe {
  opacity: 1;
}

/* Modale pleine résolution : la visionneuse de la F.A.Q., sans bande de miniatures. La scène occupe tout l'écran
   (la photo n'en dépasse jamais la hauteur), la légende passe par-dessus, en bas ; tailles posées par le script ;
   un clic referme */
.diapo-zoom .visionneuse-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
}

.diapo-zoom .visionneuse-image {
  max-width: none;
  max-height: none;
  margin: auto;
  border-radius: 0;
  box-shadow: none;
  cursor: zoom-out;
}

.diapo-zoom .visionneuse-legende {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  pointer-events: none;
}

.diapo-cadre .visionneuse-chargement {
  border-color: rgba(64, 104, 143, 0.25);
  border-top-color: var(--bleu4);
}

.diapo-cadre.en-chargement .visionneuse-chargement {
  opacity: 1;
}

.diapo-cadre.en-chargement .diapo-image {
  opacity: 0.4;
}

.diapo-scene figcaption {
  max-width: 70ch;
  margin: 14px auto 0;
}

.diapo-titre {
  margin: 0;
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1.3rem;
}

.diapo-texte:not(:empty) {
  margin-top: 8px;
  color: var(--gris4);
  line-height: 1.6;
  text-align: left;
}

a.diapo-nav:not(.nav-links a) {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--bleu1);
  border-radius: 50%;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 2rem;
  line-height: 1;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

a.diapo-nav:not(.nav-links a)::after {
  display: none;
}

a.diapo-nav:not(.nav-links a):hover,
a.diapo-nav:not(.nav-links a):focus-visible {
  border-color: var(--bleu5);
  background: var(--bleu5);
  color: #fff;
  transform: scale(1.08);
}

.diapo-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid var(--sombre-bord, #eceff3);
  color: var(--gris3);
  font-size: 0.85rem;
}

.diapo-compteur {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

a.diapo-vers-galerie:not(.nav-links a) {
  font-weight: bold;
}

.diapo-invite {
  margin-bottom: 14px;
  color: var(--gris3);
  text-align: center;
}

.diapo-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

a.diapo-vignette:not(.nav-links a) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  background: var(--sombre-carte, #fff);
  box-shadow:
    0 2px 10px rgba(44, 62, 80, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.06);
  color: var(--gris4);
  scroll-margin: calc(var(--hauteur-entete) + var(--hauteur-outils, 0px) + 15px)
    0 15px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

a.diapo-vignette:not(.nav-links a)::after {
  display: none;
}

a.diapo-vignette:not(.nav-links a):hover,
a.diapo-vignette:not(.nav-links a):focus-visible {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  transform: translateY(-3px);
  box-shadow:
    0 8px 20px rgba(44, 62, 80, 0.15),
    0 2px 5px rgba(0, 0, 0, 0.08);
}

a.diapo-vignette[aria-current]:not(.nav-links a) {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  box-shadow:
    0 0 0 3px var(--bleu4),
    0 6px 16px rgba(46, 77, 115, 0.25);
}

a.diapo-vignette[hidden] {
  display: none !important;
}

.diapo-vignette img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 6px;
  background: var(--sombre-doux, #eef1f5);
}

.diapo-vignette span {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.diapo-aucun {
  margin-bottom: 30px;
  color: var(--gris3);
  text-align: center;
}

@media (max-width: 1100px) {
  .diapo-outils .diapo-recherche {
    flex-basis: 100%;
    max-width: none;
  }

  .diapo-scene {
    grid-template-columns: 1fr;
    padding: 12px 10px 10px;
  }

  .diapo-scene figure {
    grid-row: 1;
  }

  /* Boutons ‹ › sous l'image, de part et d'autre */
  a.diapo-nav:not(.nav-links a) {
    grid-row: 2;
    width: 44px;
    height: 44px;
  }

  .diapo-prec {
    justify-self: start;
    grid-column: 1;
  }

  .diapo-suiv {
    justify-self: end;
    grid-column: 1;
  }

  .diapo-cadre {
    height: min(340px, 50vh);
  }

  .diapo-loupe {
    display: none;
  }

  .diapo-aide {
    display: none;
  }

  .diapo-galerie {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.diaporama) {
    scroll-behavior: auto;
  }

  a.diapo-vignette:not(.nav-links a),
  a.diapo-nav:not(.nav-links a) {
    transition: none;
  }
}

/* ===== Événements (events.php) : choix du mois, tableaux regroupés par jour (sur la base de .resultats-recherche) ===== */
/* Pavé collant : mois à gauche, pastilles des rubriques à droite */
.events-carte {
  gap: 10px 16px;
}

.events-mois-liste {
  align-items: center;
}

/* Mois affiché : bleu foncé, même taille que les autres (la largeur du sélecteur ne bouge pas) */
.events-mois-liste a.events-mois-affiche:not(.nav-links a) {
  background: var(--bleu5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(46, 77, 115, 0.35);
}

/* Changement de mois en cours (sans rechargement) : tableaux estompés */
.events-contenu.en-chargement {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Mois en cours : contour et fond jaunes (en ombre intérieure : la largeur des pastilles ne change pas) ;
   s'il est aussi le mois affiché, il garde le fond bleu foncé, cerclé de jaune */
.events-mois-liste a.events-ce-mois:not(.nav-links a) {
  background: var(--sombre-jaune, #fff6d6);
  color: var(--gris5);
  box-shadow: inset 0 0 0 2px var(--accent-color);
}

.events-mois-liste a.events-ce-mois:not(.nav-links a):hover {
  background: var(--sombre-jaune, #ffefb8);
}

.events-mois-liste a.events-ce-mois.events-mois-affiche:not(.nav-links a) {
  background: var(--bleu5);
  color: #fff;
  box-shadow:
    inset 0 0 0 2px var(--accent-color),
    0 2px 8px rgba(46, 77, 115, 0.35);
}

/* Séparateurs de jour : intercalaires bien visibles entre les lignes (numéro du jour en pastille, comme les dates des news) */
.events tr.events-jour td {
  padding: 8px 10px;
  border-top: 2px solid var(--sombre-carte, #fff);
  border-bottom: none;
  border-left: 5px solid var(--bleu4);
  background: var(--sombre-bleute, #dfe8f2);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1rem;
  font-weight: bold;
}

.events tr.events-jour:hover td {
  background: var(--sombre-bleute, #dfe8f2) !important;
}

.events-jour-num {
  display: inline-grid;
  place-items: center;
  min-width: 2em;
  height: 2em;
  margin-right: 8px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--bleu5);
  color: #fff;
  font-size: 0.95rem;
  vertical-align: middle;
}

.events tr.events-jour {
  scroll-margin-top: calc(
    var(--hauteur-entete) + var(--hauteur-sommaire, 0px) + 50px
  );
}

.events-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--accent-color);
  color: #262626;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: 1px;
}

/* Événements du jour */
.events tr.events-ajd:not(.events-jour) td {
  background: var(--sombre-jaune, #fffbea);
}

.events tr.events-jour.events-ajd td {
  border-left-color: var(--accent-color);
  background: var(--sombre-jaune, #fff1c2);
}

.events tr.events-jour.events-ajd:hover td {
  background: var(--sombre-jaune, #fff1c2) !important;
}

.events tr.events-jour.events-ajd .events-jour-num {
  background: var(--accent-color);
  color: #262626;
}

/* Sombre : un fond brun détonne parmi les bleus ; l'intercalaire garde son fond bleuté (liseré et pastille dorés),
   les lignes du jour, celui de la carte, avec un filet doré à gauche */
:root[data-theme="sombre"] .events tr.events-ajd:not(.events-jour) td {
  background: transparent;
}

:root[data-theme="sombre"] .events tr.events-ajd:not(.events-jour) td:first-child {
  box-shadow: inset 3px 0 0 rgba(242, 201, 76, 0.6);
}

:root[data-theme="sombre"] .events tr.events-jour.events-ajd td,
:root[data-theme="sombre"] .events tr.events-jour.events-ajd:hover td {
  background: var(--sombre-bleute) !important;
}

.events-discret {
  color: var(--gris3);
}

.events-detail {
  display: block;
  color: var(--gris2);
  font-size: 0.8rem;
}

@media (max-width: 1100px) {
  /* Mois sur une ligne qui défile, comme les pastilles ; le mois affiché est ramené dans le champ par le script */
  .events-mois-liste {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .events-mois-liste a {
    flex-shrink: 0;
  }

  /* Le jour est un intertitre entre les fiches, pas une fiche */
  .resultats-recherche.events tr.events-jour {
    margin: 18px 0 8px;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .resultats-recherche.events tr.events-jour td {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
  }

  .resultats-recherche.events tr.events-ajd:not(.events-jour) {
    background: var(--sombre-jaune, #fffbea);
  }

  /* Sombre : fiche du jour avec le fond des autres, filet doré à gauche (la cellule n'en a plus) */
  :root[data-theme="sombre"] .resultats-recherche.events tr.events-ajd:not(.events-jour) {
    background: var(--sombre-carte);
    box-shadow: inset 3px 0 0 rgba(242, 201, 76, 0.6);
  }

  :root[data-theme="sombre"] .resultats-recherche.events tr.events-ajd:not(.events-jour) td:first-child {
    box-shadow: none;
  }

  .events-detail {
    display: inline;
    margin-left: 6px;
  }
}

/* ===== News (news.php) : un seul fil, regroupé par année ; chaque news en carte avec sa date en pavé ===== */
/* Titre de l'année collé sous le pavé des années tant qu'on lit ses news (chaque titre reste dans sa section) */
.news-annee .titre-rubrique {
  position: sticky;
  top: calc(var(--hauteur-entete) + var(--hauteur-sommaire, 0px));
  z-index: 800;
  margin-top: 25px;
  padding-top: 8px;
  background: var(--bg-color);
}

.news {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  margin: 12px 0;
  padding: 14px 18px 14px 14px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.news[hidden],
.news-annee[hidden] {
  display: none;
}

/* Pavé de date : jour en grand, mois en entier */
.news-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: start;
  padding: 10px 4px;
  border-radius: 10px;
  background: var(--bleu5);
  color: #fff;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 2px 8px rgba(46, 77, 115, 0.3);
}

.news-jour {
  font-size: 1.9rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.news-mois {
  font-size: 0.9rem;
  font-weight: bold;
}

.news-texte {
  min-width: 0;
  color: var(--gris4);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.news-nouveau {
  display: inline-block;
  margin: 0 8px 4px 0;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--accent-color);
  color: #262626;
  font-size: 0.75rem;
  font-weight: bold;
  vertical-align: 1px;
}

/* Pastille de l'année en cours : jaune, comme le mois en cours des événements (ombre intérieure : largeur inchangée) */
a.puce-resultat.puce-en-cours:not(.nav-links a) {
  border-color: var(--accent-color);
  background: var(--sombre-jaune, #fff6d6);
  color: var(--gris5);
  box-shadow: inset 0 0 0 1px var(--accent-color);
}

a.puce-resultat.puce-en-cours:not(.nav-links a):hover,
a.puce-resultat.puce-en-cours:not(.nav-links a):focus-visible {
  background: var(--sombre-jaune, #ffefb8);
  color: var(--gris5);
}

a.puce-resultat.puce-en-cours.active:not(.nav-links a) {
  border-color: var(--accent-color);
  background: var(--bleu5);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px var(--accent-color),
    0 2px 8px rgba(46, 77, 115, 0.35);
}

@media (max-width: 1100px) {
  .news {
    grid-template-columns: 78px 1fr;
    gap: 12px;
    padding: 12px;
  }

  .news-jour {
    font-size: 1.5rem;
  }

  .news-mois {
    font-size: 0.8rem;
  }

  .sommaire-carte .filtre-livres {
    flex-basis: 100%;
    max-width: none;
  }
}

/* ===== Liens (liens.php) : cartes en grille, aperçu en haut ===== */
.liens-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin: 14px 0 30px;
}

/* Sites enregistrés sur les fiches des interprètes : liste compacte en colonnes (interprète, puis son site) */
.liens-fiches {
  columns: 3 260px;
  column-gap: 24px;
  margin: 14px 0 30px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--sombre-carte, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  list-style: none;
}

.liens-fiches li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  break-inside: avoid;
  border-bottom: 1px solid var(--sombre-bord, #eef1f5);
}

.liens-fiches-nom {
  font-weight: bold;
}

.liens-fiches-site {
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

/* Administrateur : coche « site testé » et poubelle d'un site officiel, à droite de la ligne (place gardée pour elles) */
.liens-fiches li:has(.liens-fiches-outils) {
  padding-right: 94px;
}

.liens-fiches-outils {
  position: absolute;
  top: 50%;
  right: 2px;
  display: flex;
  gap: 2px;
  transform: translateY(-50%);
}

.liens-fiches-outils button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  cursor: pointer;
}

.liens-fiches-poubelle {
  opacity: 0.55;
}

.liens-fiches-poubelle:hover,
.liens-fiches-poubelle:focus-visible {
  background: var(--sombre-rouge, #fdecea);
  opacity: 1;
}

/* Bascule en site de fans */
.liens-fiches-fan {
  color: #8a94a3;
}

.liens-fiches-fan:hover,
.liens-fiches-fan:focus-visible {
  background: var(--sombre-bleute, #e8f0f8);
  color: var(--sombre-texte-bleu4, var(--bleu4));
}

/* Coche : grise tant que le site n'est pas testé, verte ensuite */
.liens-fiches-verifie {
  color: #b4bcc6;
  font-weight: bold;
}

.liens-fiches-verifie:hover,
.liens-fiches-verifie:focus-visible {
  border-color: var(--sombre-bord-vert, #cfe8d6);
  color: var(--sombre-texte-vert, #2e8b57);
}

.liens-fiches-verifie[aria-pressed="true"] {
  border-color: #2e8b57;
  background: var(--sombre-vert, #e6f4ea);
  color: var(--sombre-texte-vert, #2e8b57);
}

/* isolation + arrondi propre à l'aperçu : pendant le zoom au survol, l'image passe sur une couche à part
   que l'arrondi de la carte ne découpe plus (elle débordait dans les coins) */
.lien-carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.lien-carte:hover,
.lien-carte:focus-within {
  transform: translateY(-3px);
  box-shadow:
    0 10px 24px rgba(44, 62, 80, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.08);
}

a.lien-apercu:not(.nav-links a) {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--sombre-bord, #eceff3);
  background: var(--sombre-doux, #f6f8fb);
  transform: translateZ(0);
}

a.lien-apercu:not(.nav-links a)::after {
  display: none;
}

/* Aperçus de proportions très variées (de 0,85 à 2,6) : affichés en entier dans le cadre, sur fond neutre */
.lien-apercu img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.lien-carte:hover .lien-apercu img {
  transform: scale(1.04);
}

.lien-sans-apercu {
  display: grid;
  place-items: center;
  height: 100%;
  background: linear-gradient(135deg, var(--bleu2), var(--bleu5));
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
}

.lien-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
}

.lien-corps h4 {
  margin: 0;
  font-size: 1.05rem;
}

.lien-corps h4 a:not(.nav-links a) {
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

.lien-site {
  color: var(--gris3);
  font-size: 0.8rem;
}

/* Description limitée à 4 lignes, dépliée par « Lire la suite » */
.lien-description {
  display: -webkit-box;
  margin-bottom: 6px;
  overflow: hidden;
  color: var(--gris4);
  font-size: 0.92rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.lien-description.deplie {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
}

.lien-suite {
  align-self: flex-start;
  margin: -4px 0 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--sombre-texte-bleu4, var(--bleu4));
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

.lien-suite:hover,
.lien-suite:focus-visible {
  color: var(--bleu2);
  text-decoration: underline;
}

.lien-suite[hidden] {
  display: none;
}

a.lien-visiter:not(.nav-links a) {
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 16px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.85rem;
  font-weight: bold;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

a.lien-visiter:not(.nav-links a)::after {
  display: none;
}

a.lien-visiter:not(.nav-links a):hover,
a.lien-visiter:not(.nav-links a):focus-visible {
  border-color: var(--bleu5);
  background: var(--bleu5);
  color: #fff;
}

@media (max-width: 1100px) {
  .liens-grille {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lien-carte,
  .lien-apercu img {
    transition: none;
  }
}

/* ===== Accueil (index.php) : blocs en carte avec en-tête « titre + tout voir », chiffres clés, cartes de disques ===== */
.accueil-bloc {
  padding: 18px 20px 20px;
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  line-height: 1.55;
}

.accueil-bloc p + p {
  margin-top: 8px;
}

.accueil-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sombre-bord, #eceff3);
}

.accueil-entete :is(h1, h2) {
  margin: 0;
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1.3rem;
}

/* Retour sur #disque-du-jour après un nouveau tirage : le bloc s'arrête sous l'en-tête fixe, titre et icône visibles */
#disque-du-jour {
  scroll-margin-top: calc(var(--hauteur-entete) + 15px);
}

/* Disque du jour : icône de nouveau tirage (administrateur), à côté du titre */
a.accueil-du-jour-raz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 6px;
  border-radius: 50%;
  color: var(--gris3);
  vertical-align: middle;
}

a.accueil-du-jour-raz svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Survol dans les bleus du site, sans le soulignement animé des liens */
a.accueil-du-jour-raz:not(.nav-links a)::after {
  display: none;
}

a.accueil-du-jour-raz:not(.nav-links a):hover,
a.accueil-du-jour-raz:not(.nav-links a):focus-visible {
  background: var(--sombre-bleute, #e8f0f8);
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

a.accueil-du-jour-raz:not(.nav-links a):focus:not(:focus-visible) {
  color: var(--gris3);
}

a.accueil-tout:not(.nav-links a) {
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
}

/* Plusieurs liens dans l'en-tête d'un bloc (derniers commentaires : disques, livres) */
.accueil-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

/* Remarque en petit sous le titre, au-dessus du filet (légende du gris des événements) */
.accueil-entete-remarque {
  flex-basis: 100%;
  margin: 0;
  color: var(--gris3);
  font-size: 0.8rem;
  font-style: italic;
}

.accueil-discret {
  color: var(--gris3);
  font-size: 0.9rem;
}

/* Bienvenue : photo de la platine (zoom au clic) et chiffres clés */
.accueil-platine {
  float: left;
  width: 42%;
  max-width: 260px;
  margin: 4px 18px 8px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.accueil-platine img {
  display: block;
  width: 100%;
  border-radius: 0;
  transition: transform 0.3s ease;
}

.accueil-platine:hover img {
  transform: scale(1.04);
}

.accueil-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  clear: both;
  padding-top: 16px;
}

.accueil-chiffres a:not(.nav-links a) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  border-radius: 10px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--gris3);
  font-size: 0.85rem;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.accueil-chiffres a:not(.nav-links a)::after {
  display: none;
}

.accueil-chiffres a:not(.nav-links a):hover,
.accueil-chiffres a:not(.nav-links a):focus-visible {
  background: var(--sombre-bleute, #e3ecf5);
  color: var(--gris4);
  transform: translateY(-2px);
}

.accueil-chiffres b {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1.5rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* Événements du jour : naissances et décès côte à côte */
.accueil-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 24px;
}

.accueil-events h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1.05rem;
}

.accueil-events ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.accueil-events li {
  padding: 7px 0;
  border-bottom: 1px solid var(--sombre-bord, #eceff3);
}

.accueil-events li:last-child {
  border-bottom: none;
}

.accueil-events li a:not(.nav-links a) {
  font-weight: bold;
}

.accueil-events li span {
  display: block;
  color: var(--gris3);
  font-size: 0.85rem;
}

.accueil-events li span b {
  color: var(--gris4);
}

/* Interprète dont la collection n'a aucun disque : grisé (l'âge reste en gras, comme sur les autres lignes) */
.accueil-events li.accueil-event-sans-disque a:not(.nav-links a),
.accueil-events li.accueil-event-sans-disque span {
  color: var(--gris3);
  font-weight: normal;
}

.accueil-events li.accueil-event-sans-disque span b {
  color: var(--gris3);
}

/* Derniers disques : cartes pochette + artiste + titre */
/* 6 disques chargés : une ligne de 5 sur ordinateur (le 6e masqué), deux lignes de 3 sur smartphone */
.accueil-disques {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* (sélecteur aussi précis que celui des cartes, a.accueil-disque:not(.nav-links a), qui sinon l'emporte) */
.accueil-disques > a.accueil-disque:not(.nav-links a):nth-child(n + 6) {
  display: none;
}

a.accueil-disque:not(.nav-links a) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--gris4);
  font-size: 0.82rem;
  line-height: 1.3;
}

a.accueil-disque:not(.nav-links a)::after {
  display: none;
}

.accueil-disque img {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 6px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

a.accueil-disque:hover img,
a.accueil-disque:focus-visible img {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.accueil-disque b,
.accueil-disque i {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accueil-disque b {
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

/* Disque du jour */
.accueil-du-jour {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: start;
}

.accueil-du-jour img {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.accueil-du-jour > div p + p {
  margin-top: 6px;
}

.accueil-du-jour-date {
  color: var(--gris3);
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.accueil-du-jour-artiste {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.3;
}

/* Nom de l'interprète : lien vers sa fiche (ou sa recherche), dans la couleur du nom */
.accueil-du-jour-artiste a {
  color: inherit;
}

.accueil-du-jour-artiste a:hover,
.accueil-du-jour-artiste a:focus-visible {
  text-decoration: underline;
}

.accueil-du-jour-titre {
  font-size: 1.05rem;
  font-style: italic;
}

.accueil-du-jour-titre span {
  color: var(--gris3);
  font-style: normal;
}

a.accueil-pastille:not(.nav-links a) {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.85rem;
  font-weight: bold;
}

a.accueil-pastille:not(.nav-links a)::after {
  display: none;
}

a.accueil-pastille:not(.nav-links a):hover {
  background: var(--sombre-bleute, #e3ecf5);
}

/* News : cartes de la page des news, plus compactes, année dans le pavé */
.accueil-news {
  grid-template-columns: 84px 1fr;
  margin: 0 0 10px;
  padding: 10px 12px 10px 10px;
  background: var(--sombre-doux, #fafbfc);
  box-shadow: none;
}

.accueil-news .news-jour {
  font-size: 1.5rem;
}

.accueil-news .news-mois {
  font-size: 0.8rem;
}

.news-an {
  color: var(--bleu1);
  font-size: 0.75rem;
}

/* L'Odyssée du Rock Progressif */
.accueil-odyssee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px; /* minmax : le texte rétrécit, l'image ne sort pas de l'écran */
  gap: 16px;
  align-items: start;
}

.accueil-odyssee > a {
  grid-column: 2;
  grid-row: 1;
}

.accueil-odyssee img {
  display: block;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.accueil-odyssee .faq-contact-bouton {
  display: inline-block;
  margin-top: 4px;
}

/* Derniers commentaires */
.accueil-commentaire {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sombre-bord, #eceff3);
}

.accueil-commentaire:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.accueil-commentaire img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.accueil-commentaire img.vignette-livre {
  width: 44px;
  margin: 0 10px;
}

.accueil-commentaire > div {
  min-width: 0;
}

.accueil-commentaire-disque {
  margin-top: 2px;
  overflow: hidden;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Texte limité à 4 lignes sur l'accueil (présentation de .commentaire-texte, en plus compact) */
.accueil-commentaire .accueil-commentaire-texte {
  margin-top: 8px;
  padding: 8px 12px 8px 15px;
  font-size: 0.9rem;
}

/* Replié à 4 lignes (« Lire la suite » ajouté par script.js, voir .texte-repliable) */
.accueil-commentaire .texte-repliable {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.accueil-commentaire .commentaire-texte.texte-repliable:not(.deplie) {
  border-bottom-width: 8px;
}

@media (max-width: 1100px) {
  .accueil-bloc {
    padding: 14px;
  }

  /* Une seule colonne : les deux colonnes s'effacent et les pavés suivent leur propre ordre */
  .main-layout > .left,
  .main-layout > .right {
    display: contents;
  }

  .bloc-bienvenue {
    order: 1;
  }
  .bloc-du-jour {
    order: 2;
  }
  .bloc-evenements {
    order: 3;
  }
  .bloc-derniers {
    order: 4;
  }
  .bloc-news {
    order: 5;
  }
  .bloc-commentaires {
    order: 6;
  }
  .bloc-odyssee {
    order: 7;
  }

  .accueil-platine {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 12px;
  }

  .accueil-chiffres {
    grid-template-columns: repeat(2, 1fr);
  }

  .accueil-disques {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .accueil-disques > a.accueil-disque:not(.nav-links a):nth-child(n + 6) {
    display: flex;
  }

  .accueil-du-jour {
    grid-template-columns: 120px 1fr;
    gap: 12px;
  }

  /* Couverture flottante à gauche : le texte l'entoure et passe dessous (flow-root : le bloc contient la couverture) */
  .accueil-odyssee {
    display: flow-root;
  }

  .accueil-odyssee > a {
    float: left;
    width: 100px;
    margin: 4px 16px 8px 0;
  }
}

/* Tablette : couverture un peu plus grande */
@media (min-width: 701px) and (max-width: 1100px) {
  .accueil-odyssee > a {
    width: 130px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accueil-platine img,
  .accueil-disque img,
  .accueil-chiffres a {
    transition: none;
  }
}

/* ===== Identification (FormIdentification() : gestion.php et pages de gestion) : carte centrée,
   champs et bouton du formulaire de contact ===== */
.identification {
  display: flex;
  justify-content: center;
  padding: 30px 0 40px;
}

.identification-carte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  padding: 28px 28px 22px;
  background: var(--sombre-carte, #fff);
  border-radius: 14px;
  box-shadow:
    0 8px 30px rgba(44, 62, 80, 0.12),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.identification-icone {
  display: grid;
  place-items: center;
  align-self: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sombre-bleute, #eef3f8);
}

.identification-icone img {
  width: 24px;
  height: 24px;
  opacity: 0.7;
}

.identification-carte h3 {
  margin: 0;
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1.3rem;
  text-align: center;
}

.identification-intro {
  margin-top: -8px;
  color: var(--gris3);
  font-size: 0.9rem;
  text-align: center;
}

.identification-carte .contact-alerte {
  margin: 0;
  font-size: 0.9rem;
}

.identification-carte input[type="text"],
.identification-carte input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--sombre-bord, #d5dee8);
  border-radius: 8px;
  background: var(--sombre-doux, #fafcfe);
  color: var(--text-color);
  font: inherit;
  font-size: 1rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.identification-carte input:focus {
  outline: none;
  border-color: var(--bleu3);
  background: var(--sombre-carte, #fff);
  box-shadow: 0 0 0 3px rgba(93, 143, 178, 0.2);
}

/* Mot de passe : bouton Afficher / Masquer dans le champ */
.identification-mdp {
  position: relative;
}

.identification-mdp input {
  padding-right: 88px !important;
}

.identification-voir {
  position: absolute;
  top: 50%;
  right: 6px;
  padding: 4px 10px;
  border: none;
  border-radius: 999px;
  background: var(--sombre-bleute, #eef3f8);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  transform: translateY(-50%);
}

.identification-voir:hover,
.identification-voir:focus-visible {
  background: var(--sombre-bleute, #e3ecf5);
}

.identification-valider {
  justify-content: center;
  margin-top: 4px;
}

/* Second choix (aller à la gestion) : même bouton, en contour */
.identification-valider + .identification-valider {
  margin-top: -4px;
}

.contact-bouton.identification-gestion {
  background: var(--sombre-carte, #fff);
  color: var(--sombre-texte-bleu4, var(--bleu4));
  box-shadow: inset 0 0 0 2px var(--bleu4);
}

.contact-bouton.identification-gestion:hover,
.contact-bouton.identification-gestion:focus-visible {
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  box-shadow: inset 0 0 0 2px var(--bleu5);
}

.identification-retour {
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 1100px) {
  .identification {
    padding: 10px 0 30px;
  }

  .identification-carte {
    padding: 22px 18px 18px;
  }
}

/* ===== Statistiques des interprètes et des supports (interpretes_statistiques.php, disques_supports.php), sur la base de .resultats-recherche ===== */
.stat-chiffres {
  padding-top: 6px;
}

.stat-chiffres > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px;
  border-radius: 12px;
  background: var(--sombre-carte, #fff);
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  color: var(--gris3);
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
}

.stat-chiffres b {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1.6rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* Doyens et cadets côte à côte */
.stat-cote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.stat-rang {
  color: var(--gris3);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

/* Barre proportionnelle et valeur (une seule teinte : la colonne dit ce qu'on mesure, la valeur est écrite) */
.stat-barre {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-barre span {
  flex: 0 0 auto;
  width: calc(var(--largeur) * 0.85);
  min-width: 2px;
  height: 12px;
  border-radius: 0 4px 4px 0;
  background: var(--bleu3);
}

.stat-deces .stat-barre span,
.stat-secondaire .stat-barre span {
  background: var(--gris2);
}

/* Deux barres l'une sous l'autre (disques, puis exemplaires) */
.stat-double .stat-secondaire {
  margin-top: 3px;
}

.stat-double .stat-secondaire .stat-barre span {
  height: 8px;
}

.stat-legende {
  color: var(--gris3);
  font-weight: normal;
}

.stat-barre b {
  color: var(--gris4);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.stat-table tr:hover .stat-barre span {
  background: var(--bleu4);
}

.stat-table tr:hover .stat-deces .stat-barre span,
.stat-table tr:hover .stat-secondaire .stat-barre span {
  background: var(--gris3);
}

/* Remarque sous un tableau */
.stat-note {
  margin: 6px 0 0;
  color: var(--gris3);
  font-size: 0.85rem;
  font-style: italic;
}

/* Camemberts (AnneauSVG) : mois côte à côte, années et pays au choix (Liste / Camembert) */
.stat-camembert {
  margin: 12px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--sombre-carte, #fff);
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.stat-camembert figcaption {
  margin-bottom: 10px;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-weight: bold;
}

/* Carte du monde des nationalités (CarteMondeSVG) */
.stat-carte {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--sombre-carte, #fff);
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.carte-monde {
  display: block;
  width: 100%;
  height: auto;
}

.carte-pays {
  stroke: #fff;
  stroke-width: 0.5;
  stroke-linejoin: round;
}

.carte-vide {
  fill: #e9edf1;
}

.carte-pays[data-bulle] {
  cursor: help;
}

.carte-pays[data-bulle]:hover,
.carte-lien:hover .carte-pays,
.carte-lien:focus-visible .carte-pays {
  stroke: var(--bleu5);
  stroke-width: 1.2;
}

/* Sombre : frontières couleur du fond, pays vides à peine plus clairs que la carte ; les tranches vont du bleu
   sourd au bleu lumineux (plus il y a d'interprètes, plus le pays ressort) */
:root[data-theme="sombre"] .carte-pays {
  stroke: var(--sombre-carte);
}

:root[data-theme="sombre"] .carte-vide {
  fill: #2c3546;
}

:root[data-theme="sombre"] .carte-t0 { fill: #2a5283; }
:root[data-theme="sombre"] .carte-t1 { fill: #2b5f9b; }
:root[data-theme="sombre"] .carte-t2 { fill: #3d7fcb; }
:root[data-theme="sombre"] .carte-t3 { fill: #6aa5e6; }
:root[data-theme="sombre"] .carte-t4 { fill: #a8ccf3; }

/* (la légende reçoit sa couleur en style : !important pour la remplacer) */
:root[data-theme="sombre"] .carte-legende .carte-t0 { background: #2a5283 !important; }
:root[data-theme="sombre"] .carte-legende .carte-t1 { background: #2b5f9b !important; }
:root[data-theme="sombre"] .carte-legende .carte-t2 { background: #3d7fcb !important; }
:root[data-theme="sombre"] .carte-legende .carte-t3 { background: #6aa5e6 !important; }
:root[data-theme="sombre"] .carte-legende .carte-t4 { background: #a8ccf3 !important; }

:root[data-theme="sombre"] .carte-legende .carte-legende-vide {
  background: #2c3546;
}

:root[data-theme="sombre"] .carte-pays[data-bulle]:hover,
:root[data-theme="sombre"] .carte-lien:hover .carte-pays,
:root[data-theme="sombre"] .carte-lien:focus-visible .carte-pays {
  stroke: #fff;
}

/* Pays cliquable (CarteMondeSVG avec $lien) : ouvre la liste de ses interprètes */
.carte-lien {
  cursor: pointer;
  outline: none;
}

/* Pays choisi (interpretes_carte.php) : entouré sur la carte, et sa silhouette dans le bandeau de la liste */
.carte-lien.carte-choisi .carte-pays {
  stroke: var(--accent-color);
  stroke-width: 1.6;
}

.pays-bandeau {
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* Bouton : un clic remonte en haut de la page */
.pays-silhouette {
  flex: none;
  margin-left: auto; /* au bout du bandeau, à droite */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.pays-silhouette[hidden] {
  display: none;
}

.pays-silhouette svg {
  display: block;
  width: 64px;
  height: 40px;
}

.pays-silhouette path {
  fill: var(--bleu4);
  stroke: none;
}

.pays-silhouette:hover path,
.pays-silhouette:focus-visible path {
  fill: var(--bleu5);
}

/* Liste du pays : son haut s'arrête sous le bandeau fixé (en-tête du site + bandeau) */
#liste-pays {
  scroll-margin-top: calc(var(--hauteur-entete) + var(--hauteur-sommaire, 0px));
}

#liste-pays.en-chargement {
  opacity: 0.5;
}

/* Choix du pays : bouton en pastille, panneau (filtre, pays en colonnes) ouvert dessous */
.pays-choix {
  position: relative;
}

.pays-bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 38px 7px 16px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%232e4d73' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.pays-bouton:hover,
.pays-bouton[aria-expanded="true"] {
  border-color: var(--bleu3);
  background-color: var(--sombre-bleute, #e8f0f8);
}

.pays-nb,
.pays-panneau a span {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bleu4);
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
}

.pays-panneau {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 960;
  width: min(680px, calc(100vw - 32px));
  padding: 12px;
  border-radius: 12px;
  background: var(--sombre-carte, #fff);
  box-shadow:
    0 8px 28px rgba(44, 62, 80, 0.18),
    0 1px 4px rgba(0, 0, 0, 0.08);
}

.pays-panneau[hidden] {
  display: none;
}

.pays-filtre {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 7px 14px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  font: inherit;
}

.pays-filtre:focus {
  border-color: var(--bleu3);
  outline: none;
}

/* Hauteur fixe : le panneau ne rétrécit pas quand le filtre réduit la liste */
.pays-panneau > ul {
  height: min(55vh, 420px);
  align-content: start;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  columns: 3 180px;
  column-gap: 8px;
}

.pays-panneau li {
  break-inside: avoid;
}

/* Régions (Écosse…) : en retrait sous leur pays, rattachées par une arborescence (├ puis └ pour la dernière) */
.pays-regions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pays-panneau .pays-regions a {
  position: relative;
  padding-left: 32px;
  font-size: 0.92em;
}

.pays-panneau .pays-regions a::before,
.pays-panneau .pays-regions a::after {
  content: "";
  position: absolute;
  left: 16px;
  border-left: 1px solid currentColor;
  opacity: 0.45;
}

.pays-panneau .pays-regions a::before {
  top: 0;
  height: 50%;
  width: 9px;
  border-bottom: 1px solid currentColor;
}

/* (annule le soulignement des liens, a::after en haut de ce fichier : hauteur, couleur et élargissement au survol) */
.pays-panneau .pays-regions a::after {
  top: 50%;
  bottom: 0;
  width: 0;
  height: auto;
  background: none;
  border-radius: 0;
  transition: none;
}

/* Dernière région (ou dernière restante après le filtre, pays-region-fin) : └ */
.pays-panneau .pays-regions li:last-child a::after,
.pays-panneau .pays-regions .pays-region-fin a::after {
  display: none;
}

.pays-panneau a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  text-decoration: none;
}

.pays-panneau a:hover,
.pays-panneau a:focus-visible {
  background: var(--sombre-bleute, #e8f0f8);
  outline: none;
}

.pays-panneau a[aria-current] {
  background: var(--bleu4);
  color: #fff;
  font-weight: bold;
}

.pays-panneau a[aria-current] span {
  background: var(--sombre-carte, #fff);
  color: var(--sombre-texte-bleu4, var(--bleu4));
}

.carte-legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--gris4);
  font-size: 0.85rem;
}

.carte-legende li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.carte-legende i {
  width: 14px;
  height: 10px;
  border-radius: 3px;
}

.carte-legende .carte-legende-vide {
  background: var(--sombre-doux, #e9edf1);
}

/* Années et pays : deux sections côte à côte ; le camembert dans une carte, comme ceux des mois */
.stat-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  align-items: stretch;
}

/* Chaque section en colonne : sa carte de camembert s'étire jusqu'en bas, les deux cartes d'une ligne ont la même hauteur */
.stat-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-section > .st-camembert.stat-camembert-seul {
  flex: 1 1 auto;
}

.st-camembert.stat-camembert-seul {
  justify-content: center;
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--sombre-carte, #fff);
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Légende serrée près de l'anneau (libellé, nombre et pourcentage côte à côte) */
.st-camembert.stat-camembert-seul .st-legende {
  flex: 0 1 auto;
}

/* Phrase sous le camembert des naissances et des décès par année : l'année record */
.stat-camembert-seul .stat-record {
  flex-basis: 100%;
  margin: 0;
  color: var(--gris4);
  font-size: 0.9rem;
  text-align: center;
}

.stat-camembert-seul .st-legende li {
  grid-template-columns: 10px minmax(6em, 11em) 2.8em 3.2em;
  gap: 8px;
}

/* Supports (vinyles, CD, types) : trois camemberts côte à côte, la légende passe sous l'anneau */
.stat-sections.stat-sections-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Anneaux alignés en haut des cartes, quelle que soit la longueur des légendes */
.stat-sections-3 .st-camembert.stat-camembert-seul {
  align-content: flex-start;
}

@media (max-width: 1100px) {
  .stat-sections,
  .stat-sections.stat-sections-3 {
    grid-template-columns: 1fr;
  }
}

.st-anneau.stat-anneau {
  flex-basis: 220px;
  width: 220px;
  height: 220px;
}

/* Mois : mise en page des camemberts placés dessous (stat-camembert-seul : même anneau, même écart, mêmes colonnes de
   légende), pour que les disques soient alignés ; lignes de légende rapprochées (12 mois) */
.stat-camemberts .st-camembert {
  justify-content: center;
}

.stat-camemberts .st-camembert .st-legende {
  flex: 0 1 auto;
}

.stat-camemberts .st-legende li {
  grid-template-columns: 10px minmax(6em, 11em) 2.8em 3.2em;
  gap: 8px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.st-anneau-etiquette {
  fill: var(--gris4);
  font-size: 8px;
  font-weight: bold;
  text-anchor: middle;
}

.stat-table[hidden],
.st-anneau[hidden],
.st-camembert[hidden],
.stat-tri-choix[hidden] {
  display: none;
}

.stat-tri-choix {
  display: flex;
  align-items: center;
  gap: 10px;
}

.choix-affichage {
  margin-right: auto;
}

.stat-tri {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  color: var(--gris3);
  font-size: 0.85rem;
}

@media (max-width: 1100px) {
  .stat-chiffres {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-cote {
    grid-template-columns: 1fr;
  }

  .stat-barre span {
    width: calc(var(--largeur) * 0.6);
  }

  /* « Camembert / Liste » et « Trier par » : la ligne passe à la ligne plutôt que les pastilles */
  .stat-tri {
    flex-wrap: wrap;
    justify-content: center;
  }

  .stat-tri .choix-tri {
    flex-wrap: nowrap;
  }

  /* Tableaux en fiches (disques_supports.php) : le nom en titre (et la part à droite), les barres pleine largeur dessous ;
     libellé court à gauche seulement quand la fiche a plusieurs barres de natures différentes (décennies) */
  table.stat-fiches tr:not(.sticky) {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 10px 14px;
  }

  table.stat-fiches tr:not(.sticky) > td[data-cell] {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    align-items: center;
    grid-column: 1 / -1;
    padding: 0;
    border: none;
  }

  table.stat-fiches tr:not(.sticky) > td[data-cell]::before {
    position: static;
    font-size: 0.8rem;
    line-height: 1.3;
  }

  table.stat-fiches tr:not(.sticky) > td[data-cell]:first-child,
  table.stat-fiches tr:has(> td[data-cell="Part"]) > td[data-cell] {
    display: block;
  }

  table.stat-fiches tr:not(.sticky) > td[data-cell]:first-child::before,
  table.stat-fiches tr:has(> td[data-cell="Part"]) > td[data-cell]::before {
    content: none;
  }

  table.stat-fiches tr:has(> td[data-cell="Part"]) > td[data-cell]:first-child {
    grid-column: 1;
  }

  table.stat-fiches tr:not(.sticky) > td[data-cell="Part"] {
    grid-column: 2;
    grid-row: 1;
    color: var(--gris3);
    font-size: 0.9rem;
  }

  table.stat-fiches .stat-barre span {
    width: calc(var(--largeur) * 0.8);
  }

  /* Disques en plusieurs exemplaires : rang, pochette, puis le disque, ses supports et la barre */
  table.stat-fiches tr.ligne-disque {
    grid-template-columns: 1.6rem 64px 1fr;
    column-gap: 10px;
  }

  table.stat-fiches tr.ligne-disque > td[data-cell] {
    display: block;
    grid-column: 3;
    font-size: 0.95rem;
  }

  table.stat-fiches tr.ligne-disque > td[data-cell]::before {
    content: none;
  }

  table.stat-fiches tr.ligne-disque > td[data-cell="Rang"] {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
  }

  table.stat-fiches tr.ligne-disque > td[data-cell="Pochette"] {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
  }

  table.stat-fiches tr.ligne-disque > td[data-cell="Supports"] {
    font-size: 0.85rem;
  }

  table.stat-fiches tr.ligne-disque > td[data-cell="Supports"] p {
    margin: 0;
  }

  /* Deux cellules (année ou pays, puis la barre) : sur une seule ligne */
  table.stat-fiches tr:has(> td:nth-child(2):last-child) {
    grid-template-columns: 4.5rem 1fr;
    align-items: center;
    padding: 8px 14px;
    margin-bottom: 8px;
  }

  table.stat-fiches tr:has(> td:nth-child(2):last-child) > td[data-cell] {
    display: block;
    grid-column: auto;
  }

  table.stat-fiches
    tr:has(> td:nth-child(2):last-child)
    > td[data-cell]::before {
    content: none;
  }

  /* Classements (doyens et cadets, les plus présents) : titre du classement au-dessus, puis une ligne par interprète :
     rang, nom (et date de naissance ou barre dessous), âge à droite */
  table.stat-classement tr.sticky {
    display: block;
    position: static;
    margin: 0;
    padding: 0 0 8px;
    background: none;
    box-shadow: none;
  }

  table.stat-classement tr.sticky > th {
    display: none;
  }

  table.stat-classement tr.sticky > th:nth-child(2) {
    display: block;
    padding: 0;
    border: none;
    background: none;
    color: var(--sombre-texte-bleu5, var(--bleu5));
    font-size: 0.95rem;
  }

  table.stat-classement tr:not(.sticky) {
    display: grid;
    grid-template-columns: 1.8rem 1fr auto;
    align-items: center;
    gap: 2px 10px;
    margin-bottom: 8px;
    padding: 8px 14px;
  }

  table.stat-classement tr:not(.sticky) > td[data-cell] {
    display: block;
    padding: 0;
    border: none;
    text-align: left;
  }

  table.stat-classement tr:not(.sticky) > td[data-cell]::before {
    content: none;
  }

  table.stat-classement tr:not(.sticky) > td[data-cell="Rang"] {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  table.stat-classement tr:not(.sticky) > td[data-cell="Interprète"] {
    grid-column: 2;
    grid-row: 1;
  }

  table.stat-classement tr:not(.sticky) > td[data-cell="Naissance"] {
    grid-column: 2;
    grid-row: 2;
    color: var(--gris3);
    font-size: 0.8rem;
  }

  table.stat-classement tr:not(.sticky) > td[data-cell="Âge"] {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-weight: bold;
    white-space: nowrap;
  }

  table.stat-classement tr:not(.sticky) > td:has(> .stat-barre) {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  table.stat-classement .stat-barre span {
    width: calc(var(--largeur) * 0.8);
  }
}

/* ===== Liste d'un classement (disques.php) : bandeau collant (classement, tri, sens, vue, page), tableau de la recherche,
   pagination en pastilles ===== */
.disques-titre {
  display: flex;
  align-items: center;
  gap: 12px;
}

.disques-titre .titre-rubrique-nb {
  font-size: 0.9rem;
}

.disques-outils {
  justify-content: flex-start;
  gap: 10px 14px;
}

/* Liste / galerie en fin de bandeau (series.php, serie.php) : à droite, comme la pagination de disques.php */
.disques-outils .choix-vue:last-child {
  margin-left: auto;
}

/* Listes déroulantes en pastille (classement, disques par page) */
.disques-classement select,
.disques-nbpp select {
  max-width: 100%;
  padding: 6px 34px 6px 14px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%232e4d73' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  appearance: none;
}

/* Grand écran : la liste des classements prend la place qui reste sur la ligne (au plus 240 px), pour que les boutons
   et la pagination ne passent pas à la ligne */
@media (min-width: 1101px) {
  .disques-classement {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 240px;
  }

  .disques-classement select {
    width: 100%;
    text-overflow: ellipsis;
  }
}

.disques-classement select:focus-visible,
.disques-nbpp select:focus-visible {
  outline: 2px solid var(--bleu2);
  outline-offset: 2px;
}

/* Sens du tri (Disques) : la flèche seule, épaissie, dans une pastille ronde ; filtres pépites et coups de cœur à côté */
a.disques-sens:not(.nav-links a),
.disques-filtre {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  border: 1px solid var(--bleu1);
  border-radius: 50%;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1.15rem;
  line-height: 1;
}

/* Flèche dessinée (SVG, centrée exactement) : vers le haut en ordre croissant, retournée en décroissant ;
   au clic, demi-tour animé avant le changement de page (script.js) */
a.disques-sens:not(.nav-links a) svg {
  display: block;
  transition: transform 0.3s ease;
}

a.disques-sens.desc:not(.nav-links a) svg,
a.disques-sens.tourne:not(.nav-links a) svg {
  transform: rotate(180deg);
}

a.disques-sens.desc.tourne:not(.nav-links a) svg {
  transform: rotate(360deg);
}

@media (prefers-reduced-motion: reduce) {
  a.disques-sens:not(.nav-links a) svg {
    transition: none;
  }
}

.disques-filtres {
  display: inline-flex;
  gap: 6px;
}

.disques-filtre {
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

a.disques-filtre:not(.nav-links a)::after {
  display: none;
}

/* Filtre inactif : icône grisée ; actif : pastille foncée */
.disques-filtre:not(.actif) span {
  filter: grayscale(1);
  opacity: 0.55;
}

a.disques-filtre:not(.nav-links a):hover span {
  filter: none;
  opacity: 1;
}

a.disques-filtre:not(.nav-links a):hover {
  background: var(--sombre-bleute, #e3ecf5);
}

.disques-filtre.actif {
  border-color: var(--bleu5);
  background: var(--bleu5);
}

a.disques-filtre:not(.nav-links a).actif:hover {
  background: var(--bleu4);
}

.disques-filtre.inactif {
  cursor: default;
  opacity: 0.5;
}

/* Sens du tri (Classements) : même largeur pour « ↑ Croissant » et « ↓ Décroissant » */
.choix-sens a {
  display: inline-block;
  box-sizing: border-box;
  width: 10.8em; /* « ↓ Décroissant » et ses marges */
  text-align: center;
}

a.disques-sens:not(.nav-links a)::after {
  display: none;
}

a.disques-sens:not(.nav-links a):hover {
  background: var(--sombre-bleute, #e3ecf5);
}

/* Page courante dans le bandeau : ‹ 3 / 12 › */
.disques-page-courte {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--gris3);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.disques-page-courte b {
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

/* Largeur fixe (jusqu'à « 999 / 999 ») : changer de page ou de nombre de pages ne décale pas le reste de la ligne */
.disques-page-num {
  width: 4.6em;
  text-align: center;
}

/* Une seule page : l'ensemble grisé */
.disques-page-courte.page-unique {
  opacity: 0.45;
}

.disques-page-courte.page-unique b {
  color: inherit;
}

.disques-page-courte a:not(.nav-links a),
.disques-page-courte > .fleche-inactive {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--bleu1);
  border-radius: 50%;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1.1rem;
  font-weight: bold;
}

.disques-page-courte:not(.page-unique) > .fleche-inactive {
  opacity: 0.35;
}

.disques-page-courte a:not(.nav-links a)::after {
  display: none;
}

.disques-page-courte a:not(.nav-links a):hover {
  background: var(--sombre-bleute, #e3ecf5);
}

/* Pied : pagination complète, disques par page, compte */
.disques-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin: 0 0 30px;
}

.disques-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.disques-numeros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

a.disques-page:not(.nav-links a),
span.disques-page,
a.disques-page-voisine:not(.nav-links a),
span.disques-page-voisine {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.9rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

a.disques-page:not(.nav-links a)::after,
a.disques-page-voisine:not(.nav-links a)::after {
  display: none;
}

a.disques-page:not(.nav-links a):hover,
a.disques-page-voisine:not(.nav-links a):hover {
  background: var(--sombre-bleute, #e3ecf5);
}

span.disques-page[aria-current] {
  border-color: var(--bleu5);
  background: var(--bleu5);
  color: #fff;
}

span.disques-page-voisine.inactive {
  opacity: 0.35;
}

.disques-ellipse {
  color: var(--gris3);
}

.disques-compte {
  width: 100%;
  color: var(--gris3);
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 1100px) {
  /* Plusieurs lignes : le bandeau des résultats de recherche reste sur une seule (.sommaire-carte en nowrap) */
  .sommaire-carte.disques-outils {
    flex-wrap: wrap;
    gap: 8px;
  }

  .disques-classement {
    flex-basis: 100%;
  }

  .disques-classement select {
    width: 100%;
  }

  .disques-outils .choix-tri {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .disques-outils .choix-tri a {
    flex-shrink: 0;
  }

  .disques-page-voisine {
    font-size: 0 !important;
  }

  a.disques-page-voisine:not(.nav-links a)::before,
  span.disques-page-voisine::before {
    font-size: 1.1rem;
  }

  a.disques-page-voisine:first-child::before,
  span.disques-page-voisine:first-child::before {
    content: "‹";
  }

  a.disques-page-voisine:last-child::before,
  span.disques-page-voisine:last-child::before {
    content: "›";
  }
}

/* ===== Fiche disque (disque.php) : en-tête pochette + infos, deux colonnes de blocs, voir aussi, biographies ===== */
/* Défilement doux vers les ancres (« Ajouter un commentaire »), comme sur les autres pages */
html:has(.disque-entete) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.disque-entete) {
    scroll-behavior: auto;
  }
}

.disque-entete {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr auto; /* pochettes, informations, coup de cœur et pépite */
  gap: 28px;
  align-items: start;
  margin: 15px 0 24px;
  padding: 24px;
  background: var(--sombre-carte, #fff);
  border-radius: 14px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Pochettes : galerie commune (ci-dessous), pochette principale mise en avant */
.disque-pochette {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.disque-galerie .galerie-principale img {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* Informations principales */
.disque-infos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.disque-artistes {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.2;
}

.disque-artistes a:not(.nav-links a) {
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

/* Icône après le nom de l'artiste (LienArtiste) : (i) s'il a sa fiche, loupe sinon (recherche) */
.artiste-icone {
  display: inline-flex;
  vertical-align: 0.05em;
  margin-left: 0.25em;
  font-size: 0.7em;
  opacity: 0.8;
  transition:
    opacity 0.15s,
    transform 0.15s;
}

.lien-recherche .artiste-icone {
  color: var(--gris3);
}

a:hover .artiste-icone,
a:focus-visible .artiste-icone {
  opacity: 1;
  transform: scale(1.12);
}

/* Artistes des pistes et des listes de disques : soulignés au survol, en pointillés pour une simple recherche */
.piste-artistes a.lien-fiche:hover,
td[data-cell="Interprète"] a.lien-fiche:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.piste-artistes a.lien-recherche:hover,
td[data-cell="Interprète"] a.lien-recherche:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.disque-artistes .feat {
  color: var(--gris3);
  font-size: 0.75em;
  font-weight: normal;
}

.disque-titre {
  color: var(--sombre-texte-bleu4, var(--bleu4));
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.3;
}

.disque-annee {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  color: var(--gris4);
}

/* Séparateur entre les éléments de la ligne (pas devant le premier, ni devant le symbole © / ℗ imbriqué) */
.disque-annee > span:not(:first-child)::before {
  content: "· ";
  color: var(--gris2);
}

.disque-pastilles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.disque-format {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--sombre-doux, #eef1f5);
  color: var(--gris4);
  font-size: 0.85rem;
}

.disque-format b {
  color: var(--gris5);
}

/* Format en bulle, ses précisions (LP, Album…) à côté, hors de la bulle */
.disque-format-groupe {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--gris4);
  font-size: 0.85rem;
}

/* Bandeau fixe : bulle plus petite, sur la ligne de texte */
.disque-bandeau-infos .disque-format {
  padding: 1px 8px;
  font-size: 0.8rem;
}

.disque-format-texte {
  color: var(--gris3);
  font-size: 0.85rem;
}

.disque-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.disque-genres span {
  padding: 2px 10px;
  border: 1px solid var(--sombre-bord, #e3e8ee);
  border-radius: 999px;
  color: var(--gris3);
  font-size: 0.8rem;
}

.disque-genres .disque-genre {
  border-color: var(--bleu1);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-weight: bold;
}

.disque-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* « Disque du jour le … » sous les boutons Discogs / commentaire (disque.php) */
.disque-ddj {
  margin: 10px 0 0;
  color: var(--gris3);
  font-size: 0.9rem;
}

.disque-ddj a:not(.nav-links a) {
  font-weight: bold;
}

/* Boutons de la fiche (Discogs, commentaire, coup de cœur, pépite) : pastilles comme celles de l'écoute */
a.disque-bouton:not(.nav-links a),
button.disque-bouton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 12px 4px 9px;
  border: 1px solid var(--sombre-bord, #e3e8ee);
  border-radius: 999px;
  background: var(--sombre-carte, #fff);
  color: var(--gris5);
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1.5;
  cursor: pointer;
}

a.disque-bouton:not(.nav-links a)::after {
  display: none;
}

a.disque-bouton:not(.nav-links a):hover,
button.disque-bouton:hover {
  border-color: var(--bleu1);
  background: var(--sombre-doux, #f3f7fb);
}

.disque-bouton svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--bleu4);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* « J'adore ce disque » : seul bouton teinté, du rouge du cœur */
button.disque-bouton-coeur {
  border-color: var(--rouge1);
  background: var(--sombre-rouge, #fbf1f1);
  color: var(--sombre-texte-rouge4, var(--rouge4));
}

button.disque-bouton-coeur:hover {
  border-color: var(--rouge1);
  background: var(--sombre-rouge, #f7e3e3);
}

/* Coup de cœur et pépite : en haut à droite de l'en-tête, l'un sous l'autre, alignés à droite */
.disque-avis {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 220px;
}

.disque-avis .disque-favori {
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.disque-avis .disque-favori-nb {
  justify-content: flex-end;
  font-size: 0.8rem;
}

/* Bandeau compact fixé sous l'en-tête une fois l'en-tête du disque passé (script.js), comme celui de la fiche interprète :
   pochette réduite, artistes et titre, année · pays · formats, puis les boutons de .disque-avis, déplacés ici et mis en ligne */
.disque-bandeau {
  display: none;
}

.disque-bandeau.est-fixe {
  display: block;
  position: fixed;
  top: var(--hauteur-entete);
  z-index: 950;
  padding: 8px 0;
  background: var(--bg-color);
}

.disque-bandeau-carte {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 18px 8px 10px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  border-top: 3px solid var(--bleu4);
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.disque-bandeau-pochette {
  flex-shrink: 0;
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.disque-bandeau-texte {
  flex: 1;
  min-width: 0;
}

.disque-bandeau-titre,
.disque-bandeau-infos {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.disque-bandeau-titre b {
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1.1rem;
}

/* Artistes du bandeau : liens vers leur fiche, de la couleur du nom (comme dans l'en-tête du disque) */
.disque-bandeau-titre b a:not(.nav-links a) {
  color: inherit;
}

.disque-bandeau-titre b a:not(.nav-links a):hover,
.disque-bandeau-titre b a:not(.nav-links a):focus {
  color: var(--bleu2);
}

.disque-bandeau-titre i {
  margin-left: 6px;
  color: var(--sombre-texte-bleu4, var(--bleu4));
}

.disque-bandeau-infos {
  color: var(--gris4);
  font-size: 0.85rem;
}

.disque-bandeau-infos br {
  display: none;
}

.disque-bandeau-infos > span:not(:first-child)::before {
  content: " · ";
  color: var(--gris2);
}

.disque-bandeau-infos b {
  color: var(--gris5);
}

.disque-bandeau-droite {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.disque-bandeau-actions {
  flex-wrap: nowrap;
}

.disque-bandeau-avis .disque-avis,
.disque-bandeau-avis .disque-avis .disque-favori,
.disque-bandeau-avis .disque-journal {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  max-width: none;
  text-align: left;
}

.disque-bandeau-avis .disque-avis {
  gap: 8px;
}

.disque-bandeau-avis .disque-favori-nb {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Coup de cœur (« J'adore ce disque ») : bouton, puis le nombre de visiteurs qui l'adorent */
.disque-favori {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
}

.disque-favori-nb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--gris3);
  font-size: 0.85rem;
}

.disque-favori-admin {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-weight: bold;
}

/* Mentions 💎 / ❤️ / 📌 d'un disque dans les listes (MentionsDisque) : dans leur colonne en liste, sous le titre en galerie */
.disque-mentions {
  display: inline-flex;
  gap: 4px;
  white-space: nowrap;
  font-size: 0.9em;
}

.disque-mentions.galerie-seul {
  display: none;
}

table.tableau-galerie.vue-grid .disque-mentions.galerie-seul {
  display: inline-flex;
}

/* Petit écran (lignes en fiches) : pas de ligne « Mentions » vide */
@media (max-width: 1100px) {
  td.colonne-mentions.vide,
  td.colonne-remarque.vide {
    display: none !important;
  }
}

/* Pépite : mention visible de tous, bouton réservé à l'administrateur */
.disque-pepite-mention {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.85rem;
  font-weight: bold;
}

/* Administrateur : interrupteur « 💎 Pépite », éteint (gris) ou allumé (bleu) */
button.disque-pepite-bouton[aria-pressed="false"] {
  color: var(--gris3);
  font-weight: normal;
}

button.disque-pepite-bouton[aria-pressed="false"] span {
  filter: grayscale(1);
  opacity: 0.6;
}

button.disque-pepite-bouton[aria-pressed="true"] {
  border-color: var(--bleu4);
  background: var(--sombre-bleute, #e3ecf5);
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

p.disque-pepite {
  margin: 0;
}

.disque-favori .message-erreur {
  flex-basis: 100%;
  margin: 4px 0 0;
}

/* Administrateur : envie d'écoute (interrupteur « 📌 », comme la pépite), date et « Écouté », puis le bouton des écoutes */
.disque-journal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

button.disque-envie-bouton[aria-pressed="false"] {
  color: var(--gris3);
  font-weight: normal;
}

button.disque-envie-bouton[aria-pressed="false"] span {
  filter: grayscale(1);
  opacity: 0.6;
}

button.disque-envie-bouton[aria-pressed="true"] {
  border-color: var(--bleu4);
  background: var(--sombre-bleute, #e3ecf5);
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

.disque-avis .disque-ecoute-ajout {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
}

.disque-ecoute-ajout input[type="date"] {
  box-sizing: border-box;
  height: 29px;
  padding: 2px 6px;
  border: 1px solid var(--sombre-bord, #e3e8ee);
  border-radius: 999px;
  background: var(--sombre-carte, #fff);
  color: var(--gris5);
  font: inherit;
  font-size: 0.8rem;
}

.disque-ecoute-ajout input[type="date"]:focus-visible {
  outline: 2px solid var(--bleu2);
  outline-offset: 1px;
}

.disque-ecoutes {
  margin: 0;
  font-size: 0.8rem;
}

/* Bouton « Écoutes (3) » : petite pastille bleu clair qui ouvre la fenêtre du détail */
button.disque-ecoutes-lien {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button.disque-ecoutes-lien:hover {
  background: var(--sombre-bleute, #e3ecf5);
}

button.disque-ecoutes-lien svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--bleu4);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button.disque-ecoutes-lien .disque-ecoute-nb {
  background: var(--bleu5);
  color: #fff;
}

/* Écoute enregistrée (.ecoute-ok, script.js) : « Écouté » passe un instant au vert en redessinant sa coche, le nombre
   d'écoutes grossit et un « +1 » s'envole */
.ecoute-ok .disque-ecoute-ajout button.disque-bouton {
  animation: ecoute-ok-bouton 1.4s ease;
}

.ecoute-ok .disque-ecoute-ajout button.disque-bouton svg {
  animation: ecoute-ok-trait 1.4s ease;
}

.ecoute-ok .disque-ecoute-ajout button.disque-bouton svg path {
  stroke-dasharray: 22;
  animation: ecoute-ok-coche 0.45s ease-out;
}

.ecoute-ok button.disque-ecoutes-lien {
  position: relative;
}

.ecoute-ok button.disque-ecoutes-lien .disque-ecoute-nb {
  animation: ecoute-ok-nb 0.6s ease 0.1s;
}

.ecoute-ok button.disque-ecoutes-lien::after {
  content: "+1";
  position: absolute;
  top: -4px;
  right: 2px;
  color: var(--sombre-texte-vert5, var(--vert5));
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  animation: ecoute-ok-plus 1.1s ease-out 0.1s;
}

@keyframes ecoute-ok-bouton {
  0%,
  65% {
    border-color: var(--sombre-bord-vert, var(--vert3));
    background: var(--sombre-vert, #e6f6f1);
    color: var(--sombre-texte-vert5, var(--vert5));
  }
}

@keyframes ecoute-ok-trait {
  0%,
  65% {
    stroke: var(--sombre-texte-vert5, var(--vert4));
  }
}

@keyframes ecoute-ok-coche {
  from {
    stroke-dashoffset: 22;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ecoute-ok-nb {
  40% {
    transform: scale(1.45);
    background: var(--vert4);
  }
}

@keyframes ecoute-ok-plus {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Mouvement réduit : seul le passage au vert reste */
@media (prefers-reduced-motion: reduce) {
  .ecoute-ok .disque-ecoute-ajout button.disque-bouton svg path,
  .ecoute-ok button.disque-ecoutes-lien .disque-ecoute-nb {
    animation: none;
  }

  .ecoute-ok button.disque-ecoutes-lien::after {
    display: none;
  }
}

/* Fenêtre du détail : une ligne par jour, pastille si plusieurs écoutes, croix de suppression */
.disque-ecoutes-liste {
  max-height: 50vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.disque-ecoutes-liste li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--sombre-bord, #eceff3);
  font-variant-numeric: tabular-nums;
}

.disque-ecoutes-liste li:last-child {
  border-bottom: 0;
}

.disque-ecoutes-liste form {
  margin: 0;
}

button.disque-ecoute-suppr {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--sombre-bord, #e3e8ee);
  border-radius: 50%;
  background: var(--sombre-carte, #fff);
  color: var(--gris3);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

button.disque-ecoute-suppr svg {
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button.disque-ecoute-suppr:hover,
button.disque-ecoute-suppr:focus-visible {
  border-color: var(--rouge1);
  background: var(--sombre-rouge, #fbf1f1);
  color: var(--sombre-texte-rouge4, var(--rouge4));
}

/* Plusieurs écoutes le même jour : pastille du nombre */
.disque-ecoute-nb {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--sombre-bleute, #e3ecf5);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.85em;
  line-height: 1.5;
  text-align: center;
}

/* Deux colonnes de blocs */
.disque-colonnes {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  align-items: start;
}

/* Arrivée par une ancre (« Ajouter un commentaire ») : sous le bandeau du disque, qui s'affiche pendant le défilement
   (hauteur mesurée par script.js, estimée avant son premier affichage) */
.disque-colonnes .disque-bloc {
  scroll-margin-top: calc(
    var(--hauteur-entete) + var(--hauteur-bandeau-disque, 130px) + 15px
  );
}

.disque-colonne {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.disque-bloc {
  padding: 18px 20px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  scroll-margin-top: calc(var(--hauteur-entete) + 15px);
}

.disque-bloc h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sombre-bord, #eceff3);
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1.15rem;
}

/* Pistes */
.pistes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.piste {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-bottom: 1px solid var(--sombre-bord, #f0f2f5);
  border-radius: 6px;
}

.piste:hover {
  background: var(--sombre-doux, #f6f8fb);
}

.piste-pos {
  color: var(--gris3);
  font-size: 0.85rem;
  font-weight: bold;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.piste-titre {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--gris5);
}

.piste-artistes {
  color: var(--gris3);
  font-size: 0.85rem;
}

/* Crédits d'une piste (AfficheTrack) : rôle en petites capitales, rôles séparés par un point médian */
/* Glissement à l'affichage et au masquage : la ligne passe de 0 à sa hauteur (grille 0fr → 1fr) */
.piste-credits {
  display: grid;
  grid-template-rows: 1fr;
  color: var(--gris3);
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 1;
  transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}

.piste-credits-contenu {
  min-height: 0;
  overflow: hidden;
}

.pistes-sans-credits .piste-credits {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .piste-credits,
  .pistes-sans-credits .piste-credits {
    transition: none;
  }
}

/* Afficher / masquer les crédits des pistes : à droite du titre « Titres » */
.pistes-credits-bouton {
  margin-left: auto;
  padding: 4px 12px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
}

.pistes-credits-bouton:hover {
  background: var(--sombre-bleute, #e3ecf5);
}

.piste-credit + .piste-credit::before {
  content: " · ";
}

.piste-role {
  font-variant: small-caps;
  color: var(--gris4);
}

.piste-credits a.lien-fiche:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.piste-credits a.lien-recherche:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.piste-duree {
  color: var(--gris3);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.piste-ecoute {
  display: flex;
  gap: 6px;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.piste:hover .piste-ecoute,
.piste-ecoute:focus-within {
  opacity: 1;
}

.piste-ecoute img {
  display: block;
  height: 20px;
}

/* Rubrique « Dans les crédits » de la recherche : nom trouvé en gras, puis ses rôles ; un nom par ligne */
.credits-trouves {
  color: var(--gris3);
  font-size: 0.85rem;
}

.credit-trouve {
  display: block;
}

.credit-trouve b {
  color: var(--gris5);
}

.credit-detail {
  white-space: nowrap;
}

/* Colonne « Écouter » des résultats de recherche (LiensEcoute) : YouTube et Spotify côte à côte */
.liens-ecoute {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.liens-ecoute img {
  display: block;
  height: 20px;
}

.piste-section {
  margin-top: 12px;
  padding: 8px 6px 4px;
  border-bottom: 2px solid var(--bleu1);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.piste-section:first-child {
  margin-top: 0;
}

/* Longues listes : titres au-delà des 20 premiers masqués jusqu'au clic sur « Afficher les … autres titres » */
.pistes-repliees .piste-cachee {
  display: none;
}

.disque-plus-titres {
  margin-top: 12px;
  padding: 6px 16px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
}

.disque-plus-titres:hover {
  background: var(--sombre-bleute, #e3ecf5);
}

/* Écouter l'album complet */
.disque-ecouter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--gris3);
  font-size: 0.85rem;
}

/* YouTube, Spotify : icône seule, largeur fixe, nom de la plateforme en infobulle */
a.disque-ecoute:not(.nav-links a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 52px;
  padding: 5px 0;
  border: 1px solid var(--sombre-bord, #e3e8ee);
  border-radius: 999px;
  background: var(--sombre-carte, #fff);
  color: var(--gris5);
  font-weight: bold;
}

a.disque-ecoute:not(.nav-links a)::after {
  display: none;
}

a.disque-ecoute:not(.nav-links a):hover {
  border-color: var(--bleu1);
  background: var(--sombre-doux, #f3f7fb);
}

a.disque-ecoute img {
  height: 18px;
}

/* Crédits, détails */
.disque-credits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 20px;
  margin: 0;
}

.disque-credits dt {
  color: var(--gris5);
  font-weight: bold;
}

.disque-credits dd {
  margin: 0;
  color: var(--gris3);
  font-size: 0.85rem;
}

.disque-suite summary {
  width: fit-content;
  margin-top: 12px;
  color: var(--sombre-texte-bleu4, var(--bleu4));
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
}

.disque-suite[open] .disque-credits {
  margin-top: 12px;
}

.disque-notes summary {
  margin-top: 0;
}

.disque-notes p {
  margin-top: 10px;
  color: var(--gris4);
  font-size: 0.9rem;
  line-height: 1.6;
}

.disque-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
}

.disque-details dt {
  color: var(--gris3);
  font-size: 0.85rem;
  font-weight: bold;
}

.disque-details dd {
  margin: 0;
  color: var(--gris5);
  overflow-wrap: anywhere;
}

.disque-catno {
  color: var(--gris3);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.85rem;
}

/* Séries du disque (disque.php) : une ligne par série */
.disque-serie + .disque-serie {
  margin-top: 6px;
}
.disque-serie-retirer {
  display: inline;
  margin-left: 6px;
}
.disque-serie-retirer button {
  border: 0;
  background: none;
  padding: 0 4px;
  color: var(--gris3);
  cursor: pointer;
}
.disque-serie-retirer button:hover {
  color: var(--sombre-texte-rouge, #d23a2c);
}
/* Disques précédent et suivant de la série (NavigationSerie) */
.serie-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gris1);
}
.serie-nav-nom {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--gris3);
}
.serie-nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.serie-nav a:hover img,
.serie-nav a:focus-visible img {
  box-shadow: 0 0 0 2px var(--bleu3);
}
/* Lien à la taille de la pochette et de la flèche (sinon toute la colonne : zone de survol et infobulle décalées) */
.serie-nav-prec {
  justify-self: start;
}
.serie-nav-suiv {
  justify-self: end;
}
/* Pas de soulignement des liens (a:not(.nav-links a)::after, plus précis que .serie-nav a::after) */
.serie-nav a[href]::after {
  display: none;
}
.serie-nav img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
}
.serie-nav-fleche {
  font-size: 1.3rem;
  color: var(--gris3);
  flex: none;
}
.serie-nav-pos {
  font-size: 0.75rem;
  color: var(--gris3);
}
/* Ajout à une série (administrateur) */
.disque-serie-ajout {
  margin-top: 12px;
  font-size: 0.9rem;
}
.disque-serie-ajout summary {
  cursor: pointer;
  color: var(--gris3);
}
.disque-serie-ajout form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.disque-serie-ajout select {
  flex: 1 1 180px;
  min-width: 0;
}
.disque-serie-ajout input[type="text"] {
  flex: 0 1 110px;
  min-width: 0;
}

/* Mon exemplaire (disque.php) : un sous-bloc par exemplaire ; formulaire de modification (administrateur) sur deux colonnes */
.disque-exemplaire + .disque-exemplaire {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bleu1);
}

.disque-exemplaire h4 {
  margin: 0 0 8px;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.95rem;
}

.disque-prive {
  font-size: 0.75em;
}

.disque-exemplaire-modif form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.disque-exemplaire-modif label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: var(--gris3);
  font-size: 0.8rem;
}

/* Champs : même style que ceux des fenêtres (.dialogue-carte) ; flex: none annule la largeur des champs des séries (.disque-serie-ajout) */
.disque-exemplaire-modif input[type="text"],
.disque-exemplaire-modif input[type="date"],
.infos-rattacher input[type="text"] {
  flex: none;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--sombre-bord, #d5dee8);
  border-radius: 8px;
  background: var(--sombre-doux, #fafcfe);
  color: var(--gris5);
  font: inherit;
  font-size: 0.9rem;
}

.disque-exemplaire-modif .disque-exemplaire-case {
  flex-direction: row;
  align-items: center;
  align-self: end;
  gap: 6px;
}

.disque-exemplaire-modif p {
  grid-column: 1 / -1;
  margin: 0;
}

.disque-exemplaire-verifier {
  margin: 12px 0 0;
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .disque-exemplaire-modif form {
    grid-template-columns: 1fr;
  }
}

/* Exemplaires à vérifier (gestion_disques_infos.php) : onglets sur leur ligne, au-dessus de la recherche et de la pagination ;
   le bandeau reste collé sous l'en-tête (fond de page : masque les fiches qui défilent dessous) */
.infos-barre {
  position: sticky;
  top: var(--hauteur-entete);
  z-index: 900;
  padding: 10px 0 2px;
  margin-bottom: 8px;
  background: var(--bg-color);
}

.infos-onglets {
  margin-bottom: 10px;
}

/* Rattachement à un autre disque, sous le résumé */
.infos-rattacher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 8px;
  font-size: 0.9rem;
}

.infos-rattacher label {
  flex: 0 1 280px;
  min-width: 0;
}

.infos-actions form {
  display: contents;
}

/* Communauté Discogs : chiffres, note en étoiles, ventes */
.disque-communaute {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.disque-communaute div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--gris3);
  font-size: 0.85rem;
}

.disque-communaute b {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}

/* Bord bleu sur les deux pavés ; celui des demandes passe en orange ou en rouge (règles suivantes, plus précises) */
.disque-communaute div {
  box-shadow: inset 0 0 0 1px var(--bleu2);
}

/* Demandes proches du nombre de possesseurs (orange) ou supérieures (rouge) */
.disque-communaute .disque-demande-proche {
  background: var(--sombre-jaune, #fff1e6);
  color: var(--sombre-texte-jaune, #9a4a12);
  box-shadow: inset 0 0 0 1px #f5b98a;
}

.disque-communaute .disque-demande-proche b {
  color: var(--sombre-texte-jaune, #c2570c);
}

.disque-communaute .disque-demande-forte {
  background: var(--sombre-rouge, #fbecec);
  color: var(--sombre-texte-rouge4, var(--rouge4));
  box-shadow: inset 0 0 0 1px var(--rouge1);
}

.disque-communaute .disque-demande-forte b {
  color: var(--sombre-texte-rouge3, var(--rouge3));
}

.disque-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: var(--gris3);
  font-size: 0.9rem;
}

.disque-note b {
  color: var(--gris5);
  font-size: 1.1rem;
}

/* Cinq étoiles grises, remplies en or jusqu'à la note (--note en %) */
.disque-etoiles {
  position: relative;
  display: inline-block;
  color: #d9dee5;
  font-size: 1.4rem;
  letter-spacing: 2px;
  line-height: 1;
}

.disque-etoiles::before {
  content: "★★★★★";
}

.disque-etoiles::after {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--note);
  overflow: hidden;
  color: #e6a817;
  white-space: nowrap;
}

.disque-vente {
  margin: 12px 0 6px;
  color: var(--gris4);
  font-size: 0.9rem;
}

/* Commentaires */
.disque-commentaire {
  padding: 12px 0;
  border-bottom: 1px solid var(--sombre-bord, #eceff3);
}

.disque-commentaire .commentaire-texte {
  margin-top: 8px;
}

a.disque-supprimer:not(.nav-links a) {
  margin-left: 6px;
  color: var(--sombre-texte-rouge3, var(--rouge3));
  font-size: 0.8rem;
}

.disque-merci {
  margin-bottom: 10px;
  padding: 10px 14px;
  border-left: 4px solid var(--vert4);
  border-radius: 0 10px 10px 0;
  background: var(--vert1);
  color: var(--sombre-texte-vert5, var(--vert5));
}

.disque-commenter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.disque-commenter input,
.disque-commenter textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--sombre-bord, #d5dee8);
  border-radius: 8px;
  background: var(--sombre-doux, #fafcfe);
  font: inherit;
  font-size: 0.95rem;
}

.disque-commenter textarea {
  resize: vertical;
}

.disque-commenter input:focus,
.disque-commenter textarea:focus {
  outline: none;
  border-color: var(--bleu3);
  background: var(--sombre-carte, #fff);
  box-shadow: 0 0 0 3px rgba(93, 143, 178, 0.2);
}

/* Voir aussi, biographies */
.disque-voir-aussi {
  margin: 36px 0 0;
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

/* Fiche d'un livre (livre.php) : mise en page de la fiche d'un disque, sans 3e colonne, couverture un peu plus étroite
   sur grand écran (tablette et smartphone : réglages de .disque-entete) */
@media (min-width: 1101px) {
  .disque-entete.livre-entete {
    grid-template-columns: minmax(200px, 300px) 1fr;
  }
}

.livre-titre {
  margin: 0;
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1.7rem;
  font-style: italic;
  line-height: 1.2;
}

.livre-auteur {
  color: var(--sombre-texte-bleu4, var(--bleu4));
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.3;
}

.livre-fiche-isbn,
.livre-serie {
  color: var(--gris3);
  font-size: 0.9rem;
}

.livre-serie a:not(.nav-links a) {
  font-weight: bold;
}

/* Arrivée par le lien de la série : le titre de la liste juste sous l'en-tête du site */
#livre-serie {
  scroll-margin-top: calc(var(--hauteur-entete) + 15px);
}

/* Pas de bandeau compact sous l'en-tête du site : arrivée par une ancre juste sous l'en-tête */
.disque-colonnes.livre-colonnes .disque-bloc {
  scroll-margin-top: calc(var(--hauteur-entete) + 15px);
}

/* Commentaires seuls (ni 4e de couverture, ni interprète) : une colonne */
.disque-colonnes.livre-colonnes-seule {
  grid-template-columns: 1fr;
}

.livre-interpretes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.livre-interpretes a:not(.nav-links a) {
  font-weight: bold;
}

.livre-interprete-details {
  margin-left: 6px;
  color: var(--gris3);
  font-size: 0.85rem;
}

.disque-bios > div {
  margin: 14px 0;
  padding: 18px 20px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  line-height: 1.6;
}

/* Visionneuse : la légende ne sert qu'au compteur */
.disque-visionneuse .visionneuse-legende {
  color: var(--gris2);
  font-size: 0.85rem;
}

@media (max-width: 1100px) {
  .disque-entete {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px;
  }

  /* Coup de cœur et pépite sous les informations, alignés à gauche */
  .disque-avis,
  .disque-avis .disque-favori {
    align-items: flex-start;
    max-width: none;
    text-align: left;
  }

  .disque-avis .disque-favori {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .disque-journal {
    align-items: flex-start;
  }

  /* Bandeau : boutons sous la ligne du titre, à faire glisser s'ils dépassent ; sans le nombre de coups de cœur */
  .disque-bandeau-carte {
    flex-wrap: wrap;
    padding: 6px 12px 8px 8px;
  }

  .disque-bandeau-pochette {
    width: 63px;
    height: 63px;
  }

  .disque-bandeau-titre b {
    font-size: 1rem;
  }

  .disque-bandeau-droite {
    flex-basis: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  .disque-bandeau-avis,
  .disque-bandeau-actions {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .disque-bandeau-avis .disque-favori-nb {
    display: none;
  }

  .disque-pochettes {
    max-width: 420px;
  }

  .disque-artistes {
    font-size: 1.4rem;
  }

  .disque-colonnes {
    grid-template-columns: 1fr;
  }

  .disque-bloc {
    padding: 14px;
  }

  /* Pistes sur une ligne : position, titre, durée, puis les icônes d'écoute (toujours visibles : pas de survol au doigt) */
  .piste {
    grid-template-columns: 32px 1fr auto auto;
    gap: 8px;
  }

  .piste-ecoute {
    opacity: 1;
  }

  .piste-ecoute img {
    height: 18px;
  }

  .disque-bios .bio-pic {
    grid-template-columns: 1fr;
  }
}

/* Fiche d'un disque : vignettes et « +N » de la galerie (GaleriePhotos, $nb_mobile), libellés courts des boutons */
.galerie-vignettes .galerie-plus-petit-seul,
.galerie-plus-petit,
.libelle-court {
  display: none;
}

@media (max-width: 1100px) {
  /* 4 vignettes et le « +N » sur une ligne (le « +N » compte les vignettes masquées) */
  .disque-galerie .galerie-vignettes {
    grid-template-columns: repeat(5, 1fr);
  }

  .galerie-vignettes .vignette-grand-ecran,
  .galerie-plus-grand {
    display: none;
  }

  .galerie-plus-petit {
    display: inline;
  }

  .galerie-vignettes .galerie-plus-petit-seul {
    display: block;
  }
}

/* Smartphone : en-tête resserré, boutons « Discogs ↗ » et « Commenter » sur une ligne ; bandeau collé compact :
   artiste et titre sur deux lignes, année et pays (le format est dans l'en-tête), boutons sur une ligne (cœur seul) */
@media (max-width: 700px) {
  .disque-infos {
    gap: 8px;
  }

  .disque-actions .libelle-long {
    display: none;
  }

  .disque-actions .libelle-court {
    display: inline;
  }

  .disque-bandeau-titre b,
  .disque-bandeau-titre i {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .disque-bandeau-titre i {
    margin-left: 0;
  }

  .disque-bandeau-infos + .disque-bandeau-infos {
    display: none;
  }

  /* Boutons du bandeau sur une ligne ; s'ils ne tiennent pas (administrateur : pépite, envie, écoute), Discogs et
     commentaire passent sur la ligne suivante */
  .disque-bandeau-droite {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
  }

  .disque-bandeau .disque-bouton {
    white-space: nowrap;
  }

  /* Enregistrement d'une écoute (date et ✓) : seulement dans l'en-tête de la fiche */
  .disque-bandeau .disque-ecoute-ajout {
    display: none;
  }

  .disque-bandeau .disque-favori-aimer {
    gap: 0;
    padding: 4px 10px;
    font-size: 0;
  }

  .disque-bandeau .disque-favori-aimer span {
    font-size: 0.9rem;
  }

  /* Bandeau fixe : pépite, envie d'écoute et commentaire réduits à leur icône (nom gardé en aria-label) */
  .disque-bandeau .libelle-long,
  .disque-bandeau .disque-actions .libelle-court {
    display: none;
  }

  .disque-bandeau .disque-pepite-bouton,
  .disque-bandeau .disque-envie-bouton,
  .disque-bandeau
    .disque-actions
    a.disque-bouton:not(.nav-links a)[href="#disque-commentaires"] {
    gap: 0;
    padding: 4px 10px;
  }
}

/* ===== Galeries de photos (GaleriePhotos() : pochettes d'un disque, photos d'artistes) et visionneuse commune (script.js) ===== */
.galerie-principale {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.galerie-principale img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.galerie-vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.galerie-vignettes button {
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--sombre-bleute, #eef3f8);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.8;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.galerie-vignettes button:hover,
.galerie-vignettes button:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

.galerie-vignettes img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerie-vignettes .galerie-plus {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-weight: bold;
}

.visionneuse [hidden] {
  display: none !important;
}

.galerie-visionneuse .visionneuse-legende {
  color: var(--gris2);
  font-size: 0.85rem;
}

/* Biographies : photo de l'artiste (hauteur limitée) à gauche, texte et membres à droite */
.bio-pic {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 22px;
  align-items: start;
}


/* Photo de Wikimedia Commons (tools.php, PhotoWikimedia), mention en dessous. Jamais recadrée (un recadrage est une
   modification à signaler selon la licence) : seulement réduite, en gardant ses proportions */
.bio-photo-wiki {
  margin: 0;
  text-align: center;
}

.bio-photo-wiki img {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 300px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.bio-photo-wiki a::after {
  display: none;
}

.bio-photo-wiki figcaption {
  margin-top: 6px;
  color: var(--gris3);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bio-photo-wiki figcaption a,
.galerie-visionneuse .visionneuse-mention a {
  color: inherit;
  text-decoration: underline;
}

/* Administrateur : rejet d'une photo de Wikimedia Commons (script.js, photo_rejet.php). Photo rejetée : encadrée de rouge,
   barrée d'une croix, et sa vignette aussi */
.visionneuse .visionneuse-rejet {
  display: block;
  margin: 10px auto 0;
  padding: 4px 14px;
  border: 1px solid #e06666;
  border-radius: 999px;
  background: none;
  color: #ff9a9a;
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

.visionneuse-rejet:hover {
  background: rgba(224, 102, 102, 0.18);
}

.visionneuse-rejet:disabled {
  cursor: wait;
  opacity: 0.6;
}

/* (« Rétablir cette photo » : en vert) */
.visionneuse-scene.photo-rejetee + .visionneuse-legende .visionneuse-rejet {
  border-color: #6fcf97;
  color: #8fe0b0;
}

.visionneuse-scene.photo-rejetee .visionneuse-image {
  outline: 4px solid #e04848;
  outline-offset: -4px;
  opacity: 0.75;
}

.visionneuse-scene.photo-rejetee::after {
  content: "✕";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #e04848;
  font-size: min(30vw, 220px);
  line-height: 1;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.visionneuse-bande button.photo-rejetee {
  outline-color: #e04848;
}

.visionneuse-bande button.photo-rejetee img {
  filter: grayscale(1);
}

/* « Voir les N photos » : ouvre la visionneuse, où chaque photo a sa mention */
.bio-photos-voir {
  margin-top: 8px;
  padding: 3px 12px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

.bio-photos-voir:hover {
  background: var(--sombre-bleute, #e3ecf5);
}

.bio-texte {
  min-width: 0;
  color: var(--gris4);
  line-height: 1.65;
}

/* Biographie de Wikipédia : introduction puis « Décès » (tools.php, TexteBiographieWikipedia) */
.bio-wikipedia p {
  margin: 0 0 10px;
}

.bio-wikipedia .bio-deces {
  margin: 14px 0 6px;
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1rem;
}

/* Section « Biographie » de Wikipédia : intertitres des sous-sections, repliée après 150 mots (script.js) */
.bio-wikipedia .bio-intertitre {
  margin: 14px 0 6px;
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 0.95rem;
}

.bio-wikipedia h6.bio-intertitre {
  font-size: 0.9rem;
  font-style: italic;
}

.bio-replie:not(.deplie) .bio-suite {
  display: none;
}

.bio-replie.deplie .bio-points {
  display: none;
}

/* Pastille de nombre dans une carte de chiffres (disques_ecoutes.php) : chiffre centré, sans l'interligne de la carte */
.stat-chiffres .titre-rubrique-nb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 1.6em;
  /* (un chiffre n'a pas de jambage : centré tel quel, il paraît trop haut ; le haut de la marge le redescend) */
  padding: 0.14em 0.7em 0;
  line-height: 1;
  vertical-align: middle;
}

/* Cinq chiffres sur une ligne (concerts.php, disques_ecoutes.php) ; deux par ligne sur smartphone, comme .stat-chiffres */
@media (min-width: 1101px) {
  .chiffres-cinq {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Vu en concert (concerts.php) : espace entre les chiffres et la recherche */
.stat-chiffres + .gestion-news-barre {
  margin-top: 22px;
}

/* Tableaux triables (script.js) : titre de colonne cliquable, flèche sur la colonne triée */
.tableau-triable .tri-colonne {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.tableau-triable .tri-colonne:hover {
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

.tableau-triable .tri-colonne::after {
  /* (\FE0E : flèche en texte, pas en emoji de couleur) */
  content: " \2195\FE0E";
  color: var(--gris2);
  font-size: 0.8em;
}

.tableau-triable th[aria-sort="ascending"] .tri-colonne::after {
  content: " ▲";
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

.tableau-triable th[aria-sort="descending"] .tri-colonne::after {
  content: " ▼";
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

/* Copie de la base en ligne (gestion_copie_base.php) */
.gestion-copie {
  margin-bottom: 20px;
  padding: 16px 20px;
}

.gestion-copie h3 {
  margin-top: 0;
}

.gestion-copie form {
  margin: 0;
}

/* Barres de progression de la copie : l'ensemble, puis la table en cours (plus fine) */
.copie-progression {
  margin: 14px 0;
}

.copie-barre {
  width: 100%;
  height: 14px;
  accent-color: var(--bleu5);
}

.copie-barre-table {
  height: 6px;
}

.copie-etat {
  margin: 6px 0 10px;
  font-weight: bold;
}

.copie-table {
  margin: 4px 0 0;
}

/* Gestion des concerts (gestion_concerts.php) */
/* Fiche d'un disque hors Discogs (disque_hd.php), administrateur : bandeau « masqué », formulaire de modification */
.disque-hd-masque {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.disque-hd-edition-bloc + .disque-hd-edition-bloc {
  margin-top: 28px;
}
.disque-hd-chansons td[data-cell="N°"] input {
  min-width: 3.2em;
}
.disque-hd-champs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 16px;
}
.disque-hd-large {
  grid-column: 1 / -1;
}
.disque-hd-chansons input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}
.disque-hd-chansons td {
  vertical-align: middle;
}
/* Disques masqués (disques_hors_discogs.php, administrateur) */
.disques-hd-masques {
  margin-top: 24px;
  padding: 16px 20px;
}
.disques-hd-masques summary {
  cursor: pointer;
  font-weight: bold;
}

/* Gestion des séries (gestion_series.php) */
.gestion-series-editeur {
  margin-bottom: 24px;
}
.gestion-series-disques input[type="text"] {
  width: 100%;
  max-width: 160px;
}
.gestion-series-disques td {
  vertical-align: middle;
}
.gestion-series-ajout {
  padding: 20px;
  margin: 24px 0;
}
.gestion-series-apercu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.gestion-series-apercu img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 3px;
}
.gestion-series-apercu-plus {
  height: 36px;
  min-width: 36px;
  padding: 0 6px;
  border: 1px solid var(--gris3);
  border-radius: 3px;
  background: none;
  color: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.8;
}
.gestion-series-apercu-plus:hover,
.gestion-series-apercu-plus:focus-visible {
  opacity: 1;
}
.gestion-series-ignorees {
  margin-top: 20px;
}
.gestion-series-ignorees summary {
  cursor: pointer;
  font-weight: bold;
}
.gestion-series-recherche {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 16px 0;
}

.gestion-concerts-reprise {
  margin-bottom: 20px;
  padding: 16px 20px;
}

.gestion-concerts-reprise h3 {
  margin-top: 0;
}

.gestion-concerts-reprise summary {
  cursor: pointer;
  font-weight: bold;
}

.gestion-concerts-apercu {
  font-size: 0.85rem;
}

.gestion-concerts-apercu td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--gris1);
  vertical-align: top;
}

.gestion-concerts-vers {
  align-self: end;
}

.gestion-concerts-vers label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
}

.gestion-concerts-artistes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}

/* Espace entre le formulaire et le filtre de la liste */
.gestion-concerts-editeur {
  margin-bottom: 28px;
}

/* « Supprimer » à gauche de la rangée, loin d'« Enregistrer » */
.gestion-concerts-supprimer {
  margin-right: auto;
}

/* Gestion des interprètes : case « Garder ma biographie » sous le champ */
.gestion-interp-bio-locale {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  font-weight: normal;
}

/* Source d'une biographie de Wikipédia ou de Discogs, sous le texte */
.bio-source {
  margin-top: 6px;
  color: var(--gris3);
  font-size: 0.8rem;
  text-align: right;
}

.bio-membres {
  margin-top: 14px;
}

.bio-membres h4 {
  margin: 0 0 6px;
  color: var(--gris3);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bio-membres ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bio-membres a:not(.nav-links a) {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.85rem;
  font-weight: bold;
}

.bio-membres a:not(.nav-links a)::after {
  display: none;
}

.bio-membres a:not(.nav-links a):hover {
  background: var(--sombre-bleute, #e3ecf5);
}

/* Plus de 15 membres : « + N autres » / « Replier » à côté du titre (script.js) */
.bio-membres-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}

.bio-membres-titre h4 {
  margin: 0;
}

.bio-membres-plus {
  padding: 1px 10px;
  border: 1px dashed var(--bleu4);
  border-radius: 999px;
  background: transparent;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

.bio-membres-plus:hover {
  background: var(--sombre-bleute, #e3ecf5);
}

@media (max-width: 1100px) {
  .bio-pic {
    grid-template-columns: 1fr;
  }

  .bio-photo-wiki {
    max-width: 320px;
  }
}

/* Smartphone : petite photo à gauche, le texte commence à sa droite puis passe dessous (toujours réduite, jamais
   recadrée) */
@media (max-width: 600px) {
  .bio-pic {
    display: flow-root;
  }

  .bio-pic > .bio-photo-wiki {
    float: left;
    width: 120px;
    max-width: none;
    margin: 5px 14px 8px 0;
  }

  .bio-photo-wiki img {
    max-height: 170px;
  }

  .bio-pic .bio-photo-wiki figcaption {
    font-size: 0.65rem;
  }

  .bio-pic .bio-photos-voir {
    padding: 2px 8px;
    font-size: 0.75rem;
  }
}

/* ===== Photos rejetées (gestion_photos.php) : une carte par photo, vignette entière (jamais recadrée) ===== */
.gestion-photos-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin: 14px 0 30px;
}

.gestion-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--sombre-bord, #e3e8ee);
  border-radius: 10px;
  background: var(--sombre-carte, #fff);
  text-align: center;
}

a.gestion-photo-image:not(.nav-links a)::after {
  display: none;
}

/* Zone de hauteur fixe, vignette centrée dedans : les textes des cartes d'une même ligne restent alignés */
a.gestion-photo-image:not(.nav-links a) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
}

.gestion-photo-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
}

.gestion-photo p {
  margin: 0;
}

.gestion-photo-nom {
  font-weight: bold;
}

.gestion-photo form {
  margin-top: auto;
}

/* Galerie ou tableau (boutons .choix-vue) : les deux sont dans la page, la classe vue-grid / vue-list choisit */
.gestion-photos-haut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gestion-photos.vue-grid .gestion-photos-tableau,
.gestion-photos.vue-list .gestion-photos-grille {
  display: none;
}

.gestion-photos-tableau {
  margin: 14px 0 30px;
}

.gestion-photos-tableau td {
  vertical-align: middle;
}

.gestion-photos-tableau .gestion-photos-vignette {
  width: 110px;
}

.gestion-photos-tableau a.gestion-photo-image:not(.nav-links a) {
  width: 100px;
  height: 80px;
  margin: 0 auto;
}

.gestion-photos-tableau form {
  margin: 0;
}

/* Interprète décollé de la photo (ordinateur seulement : sur mobile, les cellules sont empilées) */
@media (min-width: 1101px) {
  .gestion-photos-tableau .gestion-photos-interprete {
    padding-left: 24px;
  }
}

/* ===== Commentaires des visiteurs (disques_commentaires.php) : cartes pochette + disque + avis ===== */
.commentaires-haut {
  margin: 10px 0 0;
}

.commentaires-liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0 24px;
}

.commentaire-carte {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  padding: 16px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.commentaire-pochette img {
  display: block;
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.commentaire-pochette:hover img {
  transform: translateY(-2px);
}

/* Couverture d'un livre : en portrait, centrée à la place d'une pochette carrée */
.commentaire-pochette img.vignette-livre {
  width: 62px;
  margin: 0 14px;
}

.commentaire-corps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Auteur : initiale en pastille, nom mis en avant, date discrète */
.commentaire-auteur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.commentaire-initiale {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bleu5);
  color: #fff;
  font-weight: bold;
}

.commentaire-nom {
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 1.15rem;
  font-weight: bold;
}

.commentaire-date {
  color: var(--gris3);
  font-size: 0.8rem;
}

.commentaire-disque {
  color: var(--gris3);
  font-size: 0.9rem;
  line-height: 1.35;
}

.commentaire-disque i {
  color: var(--sombre-texte-bleu4, var(--bleu4));
}

/* Trait de gauche dessiné en fond (et non en bordure) : il descend aussi sous la bordure du bas du texte replié */
.commentaire-texte {
  margin-top: 6px;
  padding: 10px 14px 10px 17px;
  border-radius: 0 8px 8px 0;
  background:
    linear-gradient(var(--bleu1), var(--bleu1)) left / 3px 100% no-repeat,
    var(--sombre-doux, #f6f8fb);
  color: var(--gris5);
  font-style: italic;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Émojis (span ajouté par EmojisDroits) : pas penchés par l'italique */
.commentaire-texte .emoji {
  font-style: normal;
}

/* Commentaire replié : la ligne suivant la coupure resterait visible dans la marge du bas (overflow coupe au bord
   de la marge) ; la marge du bas devient une bordure transparente, hors de la zone affichée */
.commentaire-texte.texte-repliable:not(.deplie) {
  padding-bottom: 0;
  border-bottom: 10px solid transparent;
}

@media (max-width: 1100px) {
  .commentaire-carte {
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 12px;
  }

  .commentaire-pochette img {
    width: 64px;
    height: 64px;
  }

  .commentaire-pochette img.vignette-livre {
    width: 44px;
    margin: 0 10px;
  }
}

/* Textes longs repliés (commentaires) : 6 lignes, « Lire la suite » ajouté par script.js si le texte est coupé */
.texte-repliable {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
}

/* Accueil : news limitées à 5 lignes (la colonne de droite reste équilibrée) */
.accueil-news .texte-repliable {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.texte-repliable.deplie {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
}

.lire-suite {
  display: block;
  margin: 6px 0 0 auto; /* aligné à droite, sous le texte */
  padding: 0;
  border: none;
  background: none;
  color: var(--sombre-texte-bleu4, var(--bleu4));
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

/* News (pavé de date à gauche) : le bouton reste dans la colonne du texte */
.news > .lire-suite {
  grid-column: 2;
}

.lire-suite:hover,
.lire-suite:focus-visible {
  color: var(--bleu2);
  text-decoration: underline;
}

.lire-suite[hidden] {
  display: none;
}

/* ===== Disques du jour (disques_du_jour.php) : une section par année, titre collé sous le bandeau des années ===== */
.ddj-annee .titre-rubrique {
  position: sticky;
  top: calc(
    var(--hauteur-entete) + var(--hauteur-sommaire, 0px) +
      var(--hauteur-filtre, 0px)
  );
  z-index: 800;
  margin-top: 25px;
  padding-top: 8px;
  background: var(--bg-color);
}

/* Sections d'année (disques du jour, news) : l'arrivée par une pastille s'arrête sous le bandeau */
.ddj-annee[id],
.news-annee[id] {
  scroll-margin-top: calc(
    var(--hauteur-entete) + var(--hauteur-sommaire, 0px) + 10px
  );
}

/* Les en-têtes de colonne se collent juste sous le titre de l'année (hauteur mesurée par le script de la page).
   Sélecteur plus précis que body.sommaire-fixe tr.sticky (en-têtes collés sous le bandeau), sinon ils recouvrent le titre */
body.sommaire-fixe .ddj-annee tr.sticky {
  top: calc(
    var(--hauteur-entete) + var(--hauteur-sommaire, 0px) +
      var(--hauteur-filtre, 0px) + var(--hauteur-titre-annee, 60px)
  );
}

.ddj-date {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-weight: bold;
  white-space: nowrap;
}

.ddj-date .events-badge {
  display: block;
  width: fit-content;
  margin: 4px auto 0;
}

.ddj tr.ddj-aujourdhui td {
  background: var(--sombre-jaune, #fffbea);
}

/* Galerie, et liste sur petit écran (fiches compactes) : la carte entière en jaune, avec un liseré */
table.tableau-galerie.vue-grid tr.ddj-aujourdhui {
  background: var(--sombre-jaune, #fffbea);
  box-shadow:
    0 0 0 2px var(--accent-color),
    0 2px 10px rgba(44, 62, 80, 0.08);
}

@media (max-width: 1100px) {
  .ddj table.vue-list tr.ddj-aujourdhui.fiche-compacte {
    background: var(--sombre-jaune, #fffbea);
    box-shadow:
      0 0 0 2px var(--accent-color),
      0 2px 10px rgba(44, 62, 80, 0.08);
  }
}

table.tableau-galerie.vue-grid .ddj-date .events-badge {
  display: inline-block;
  margin: 0 0 0 6px;
}

@media (max-width: 1100px) {
  .ddj-annee tr.sticky {
    top: auto;
  }

  .ddj-date .events-badge {
    display: inline-block;
    margin: 0 0 0 6px;
  }
}

/* ===== Disques hors Discogs (fiche interprète, disques_hors_discogs.php) : bouton Modifier (admin),
   recherche sur Discogs, fenêtre de modification de la pochette ===== */
/* « Changer l'image » : étiquette en bouton, le champ fichier lui-même est caché */
.hors-discogs-modifier input {
  display: none;
}

/* Fiche modifiable (administrateur) : remarque, URL Discogs et « Enregistrer » sous les informations */
.hors-discogs-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.hors-discogs-form p {
  margin: 0;
}

/* Champs resserrés : la remarque sur 3 lignes (agrandissable), pas les 200 px des textarea du site */
.hors-discogs-form textarea,
.hors-discogs-form input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--sombre-bord, #d5dee8);
  border-radius: 8px;
  background: var(--sombre-doux, #fafcfe);
  color: var(--text-color);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Colonne « Remarque » des tableaux (administrateur) : en petit, 3 lignes au plus (le texte entier est dans la fiche) */
.hors-discogs-remarque-cellule {
  color: var(--gris4);
  font-size: 0.8rem;
  line-height: 1.35;
}

@media (min-width: 1101px) {
  .hors-discogs-remarque-cellule {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* « Pas de remarque » : en discret */
.disque-fiche-remarque.vide {
  color: var(--gris3);
  font-style: italic;
}

.hors-discogs-form textarea {
  height: calc(3 * 1.4em + 14px);
  min-height: 0;
  resize: vertical;
}

/* Libellé d'un champ, avec l'état de l'enregistrement à la volée (« Enregistré ») */
.hors-discogs-libelle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.hors-discogs-remarque .disque-fiche-remarque {
  margin: 0;
  padding: 4px 8px;
  border: 1px dashed transparent;
  border-radius: 8px;
  cursor: text;
}

.hors-discogs-remarque .disque-fiche-remarque:hover,
.hors-discogs-remarque .disque-fiche-remarque:focus-visible {
  border-color: var(--bleu1);
  background: var(--sombre-doux, #f3f7fb);
}

.hors-discogs-etat {
  color: var(--gris3);
  font-size: 0.75rem;
}

.hors-discogs-etat.erreur {
  color: var(--sombre-texte-rouge4, var(--rouge4));
}

.hors-discogs-etat-image {
  text-align: center;
}

.hors-discogs-modifier {
  display: block;
  width: fit-content;
  margin: 6px auto 0;
  padding: 2px 10px;
  border: 1px solid var(--bleu1);
  border-radius: 999px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
}

.hors-discogs-modifier:hover {
  background: var(--sombre-bleute, #e3ecf5);
}

.hors-discogs-recherche a:not(.nav-links a) {
  display: block;
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
}

/* Fiche d'un disque hors Discogs (administrateur) : recherches sur Discogs sous « Modifier », centrées sur une ligne */
.hors-discogs-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
}

/* Fenêtre de dialogue en carte (formulaires du site) */
.dialogue {
  width: min(420px, 92vw);
  /* Centrée dans la fenêtre (la marge automatique des <dialog> est annulée par « * { margin: 0 } ») */
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
}

.dialogue::backdrop {
  background: rgba(10, 15, 25, 0.6);
  backdrop-filter: blur(2px);
}

.dialogue-carte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  background: var(--sombre-carte, #fff);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.dialogue-carte h3 {
  margin: 0;
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

/* Croix de fermeture, en haut à droite de la carte (le titre lui laisse la place) */
.dialogue-carte:has(> .dialogue-fermer) {
  position: relative;
}

.dialogue-carte:has(> .dialogue-fermer) h3 {
  padding-right: 30px;
}

.dialogue-fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--gris3);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.dialogue-fermer:hover,
.dialogue-fermer:focus-visible {
  background: var(--sombre-doux, #eef2f6);
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

.dialogue-carte input[type="text"],
.dialogue-carte input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--sombre-bord, #d5dee8);
  border-radius: 8px;
  background: var(--sombre-doux, #fafcfe);
  font: inherit;
  font-size: 0.9rem;
}

/* Titre qui reçoit le focus à l'ouverture (à la place du premier bouton) : sans cadre */
.dialogue h3[tabindex="-1"]:focus {
  outline: none;
}

.dialogue-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin: 4px -5px -5px;
}

/* ===== Pages d'erreur (error404.php, error500.php) ===== */
.erreur {
  max-width: 640px;
  margin: 30px auto 40px;
  padding: 32px 28px;
  background: var(--sombre-carte, #fff);
  border-radius: 14px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  text-align: center;
  line-height: 1.6;
}

/* Disque cassé de la page 404 */
.erreur-disque {
  display: block;
  width: min(240px, 70%);
  height: auto;
  margin: 0 auto 6px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
}

/* Carte « introuvable » (CarteIntrouvable dans tools.php) : petit disque à la place du disque cassé */
.erreur-icone {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.erreur-code {
  margin: 0;
  color: var(--bleu2);
  font-size: 5rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
}

.erreur :is(h1, h2, h3) {
  margin: 10px 0 12px;
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

.erreur p {
  color: var(--gris4);
}

.erreur p + p {
  margin-top: 8px;
}

.erreur-adresse {
  font-size: 0.85rem;
}

.erreur-adresse code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--sombre-doux, #f3f5f8);
  color: var(--gris4);
  overflow-wrap: anywhere;
}

/* Recherche sans résultat (recherche.php) : même carte, avec le terme cherché et des pistes */
.aucun-resultat-terme {
  color: var(--sombre-texte-primary-color, var(--primary-color));
  overflow-wrap: anywhere;
}

.aucun-resultat-pistes {
  display: inline-block;
  margin: 14px auto 0;
  padding: 12px 18px 12px 34px;
  border-radius: 10px;
  background: var(--sombre-doux, #f3f5f8);
  color: var(--gris4);
  font-size: 0.92rem;
  text-align: left;
}

.aucun-resultat-pistes li + li {
  margin-top: 4px;
}

/* Résultats approchants, sous la carte « aucun résultat » */
.resultats-approchants {
  margin-top: 10px;
}

.approchants-titre {
  margin: 0 0 6px;
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

.erreur-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

/* ===================================================================
   Statistiques de fréquentation (gestion_statistiques.php, reprises de MisterGames)
   =================================================================== */
.st-periodes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 18px;
}

/* Suppression des statistiques de la période : tout à droite */
.st-periodes .st-supprimer {
  margin-left: auto;
}

.st-carte {
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 18px 20px;
  margin: 0 0 18px;
  min-width: 0;
}

.st-carte h3 {
  margin: 0 0 12px;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1rem;
}

.st-vide {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gris3);
}

/* Ligne « Non comptées » sous le graphique des visites */
.st-non-comptees {
  margin-top: 10px;
}

.st-gris {
  color: var(--gris3);
}

.st-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.st-nowrap {
  white-space: nowrap;
}

/* --- Chiffres clés --- */
.st-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.st-carte.st-chiffre {
  margin: 0;
  padding: 16px 18px;
}

.st-chiffre span {
  display: block;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris3);
}

.st-chiffre b {
  display: block;
  margin: 6px 0 2px;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-variant-numeric: tabular-nums;
}

.st-chiffre small {
  font-size: 0.8rem;
  color: var(--gris3);
}

/* --- Diagramme en barres --- */
.st-graph {
  padding: 8px 0 26px 38px;
}

.st-graph-zone {
  position: relative;
  height: 180px;
}

.st-grille {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--sombre-bord, #edf0f3);
}

.st-grille span {
  position: absolute;
  right: 100%;
  top: -7px;
  padding-right: 8px;
  font-size: 11px;
  line-height: 14px;
  color: var(--gris3);
  font-variant-numeric: tabular-nums;
}

.st-barres {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.st-col {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px; /* entre les barres visites et visiteurs */
}

.st-col i {
  display: block;
  width: 100%;
  max-width: 36px;
  min-height: 2px;
  background: var(--bleu3);
  border-radius: 4px 4px 0 0;
}

.st-serre .st-col i {
  border-radius: 2px 2px 0 0;
}

.st-col:hover {
  background: rgba(93, 143, 178, 0.1);
}

.st-col:hover i {
  background: var(--bleu5);
}

/* Visites et visiteurs (st_graphique) : deux barres côte à côte, visites en clair, visiteurs en foncé */
.st-col i.st-double {
  flex: 1;
  width: auto;
  max-width: 18px;
  background: var(--bleu2);
}

.st-col i.st-visiteurs {
  background: var(--bleu4);
}

.st-col:hover i.st-double {
  background: var(--bleu3);
}

.st-col:hover i.st-visiteurs {
  background: var(--bleu5);
}

.st-graph-legende {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--gris3);
}

.st-graph-legende span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-graph-visites {
  background: var(--bleu2);
}

.st-graph-visiteurs {
  background: var(--bleu4);
}

.st-x {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--gris3);
  white-space: nowrap;
}

.st-infobulle {
  position: fixed;
  z-index: 1200;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--gris5);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.st-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--sombre-texte-bleu4, var(--bleu4));
}

.st-details table {
  margin-top: 10px;
}

/* --- Colonnes de cartes --- */
.st-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0 18px;
}

.st-colonnes-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* --- Listes avec jauges --- */
.st-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-liste li {
  display: grid;
  /* Colonne du nombre de largeur fixe : chaque ligne est sa propre grille, une largeur « auto » décalait les jauges */
  grid-template-columns: minmax(0, 1.3fr) minmax(40px, 1fr) 4.5em 44px;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.9rem;
}

.st-libelle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-liste b,
.st-liste small {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.st-liste small {
  color: var(--gris3);
  font-size: 0.8rem;
}

.st-jauge {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--sombre-doux, #edf0f3);
  overflow: hidden;
}

.st-jauge i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--bleu3);
}

/* --- Camemberts (st_camembert) : anneau, et à côté sa légende chiffrée --- */
.st-camembert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
}

.st-anneau {
  flex: 0 0 140px;
  width: 140px;
  height: 140px;
}

/* 2 px de fond blanc entre les parts */
path.st-part {
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
}

.st-part {
  cursor: help;
  transition: opacity 0.15s ease;
}

/* Guide de lecture (script.js) : au survol d'une part ou d'une ligne de la légende, les autres parts s'effacent
   et la ligne correspondante est surlignée */
.st-camembert.survol .st-part:not(.actif) {
  opacity: 0.3;
}

.st-legende li {
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.st-legende li.actif {
  background: var(--sombre-bleute, #e8f0f9);
}

.st-anneau-total {
  fill: var(--bleu5);
  font-size: 17px;
  font-weight: bold;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

.st-anneau-unite {
  fill: var(--gris3);
  font-size: 10px;
  text-anchor: middle;
}

/* Anneau en disque vinyle (AnneauSVG, $vinyle ; statistiques de fréquentation, des supports et des interprètes) : parts séparées par un trait noir,
   sillons marqués par-dessus, reflets en arcs blancs, bord et zone de fin de face noirs, étiquette jaune crème percée
   du trou central. Le décor ne capte pas la souris */
.st-vinyle path.st-part {
  stroke: #1d1d22;
  stroke-width: 0.8;
}

.st-vinyle-sillons circle {
  fill: none;
  stroke: rgba(0, 0, 0, 0.28);
  stroke-width: 0.6;
}

.st-vinyle-reflets path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* Disque une fois et demie plus grand que l'anneau (140 px) : sillons et texte de l'étiquette lisibles
   (pages de statistiques des disques et des interprètes : taille de .stat-anneau, déjà grande) */
.st-anneau.st-vinyle:not(.stat-anneau) {
  flex-basis: 210px;
  width: 210px;
  height: 210px;
}

/* Nombre centré entre le haut de l'étiquette et le trou (dominant-baseline) */
.st-vinyle .st-anneau-total {
  fill: var(--bleu5);
  font-size: 17px;
  dominant-baseline: central;
}

/* Unité en arc dans le bas de l'étiquette (textPath) */
.st-vinyle .st-anneau-unite {
  fill: #7a6a45;
  font-size: 8px;
  letter-spacing: 0.4px;
}

.st-vinyle-bord {
  fill: none;
  stroke: #1d1d22;
  stroke-width: 0.7;
}

.st-vinyle-fin {
  fill: #1d1d22;
}

/* Étiquette jaune crème */
.st-vinyle-etiquette {
  fill: #f5e6b3;
}

.st-vinyle-trou {
  fill: #fff;
}

.st-vinyle-sillons,
.st-vinyle-reflets,
.st-vinyle-bord,
.st-vinyle-fin,
.st-vinyle-etiquette,
.st-vinyle-trou,
.st-vinyle text {
  pointer-events: none;
}

.st-camembert .st-legende {
  flex: 1 1 200px;
  min-width: 0;
}

/* Légende : pastille, libellé, nombre, pourcentage (la part se lit sur l'anneau : pas de jauge) */
.st-legende li {
  grid-template-columns: 10px minmax(0, 1fr) auto 44px;
}

.st-legende .st-jauge {
  display: none;
}

.st-pastille {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* Bouton (i) de la ligne « Autres » : ouvre le détail de ce qu'elle regroupe (st_liste) */
.st-info {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  /* le « i » de Georgia est haut sur sa ligne : redescendu d'un pixel pour être centré dans le cercle */
  padding: 1px 0 0;
  border: 1px solid var(--gris3);
  border-radius: 50%;
  background: var(--sombre-carte, #fff);
  color: var(--gris3);
  font:
    italic bold 11px/1 Georgia,
    serif;
  vertical-align: 1px;
  cursor: pointer;
}

.st-info:hover,
.st-info:focus-visible {
  border-color: var(--bleu3);
  background: var(--bleu3);
  color: #fff;
}

.st-fenetre {
  width: min(520px, 92vw);
}

.st-fenetre-liste {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .st-part,
  .st-legende li {
    transition: none;
  }
}

/* --- Tableaux --- */
.st-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 0; /* sans la marge de 30 px des autres tableaux du site (trou en bas de carte) */
}

.st-tableau th {
  padding: 6px 8px;
  border-bottom: 2px solid var(--bleu4);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}

.st-tableau th.st-num {
  text-align: right;
}

.st-tableau td {
  padding: 6px 8px;
  border: none;
  border-bottom: 1px solid var(--sombre-bord, #edf0f3);
}

.st-tableau tbody tr:last-child td {
  border-bottom: none;
}

.st-tableau .st-coche {
  width: 1%;
}

.st-defilement {
  overflow-x: auto;
}

.st-fiche {
  width: 100%;
  max-width: 0; /* la colonne du nom prend la place restante et coupe les noms trop longs (…) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-cellule-jauge {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.st-cellule-jauge .st-jauge {
  width: 70px;
}

.st-cellule-jauge b {
  min-width: 28px;
}

/* Dernières visites : titre + bouton de suppression de la sélection */
.st-titre-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.st-titre-actions h3 {
  margin: 0;
}

/* Dernières visites : actions sur la sélection, passées sous le titre si la place manque */
.st-titre-actions:has(.st-actions-selection) {
  flex-wrap: wrap;
}

.st-actions-selection {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: -5px;
}

.st-badge.st-badge-bloque {
  background: var(--rouge1);
  color: var(--sombre-texte-rouge4, var(--rouge4));
}

.st-bloques {
  margin-top: 14px;
}

/* Sections atteintes par l'accès rapide : arrêt sous le bandeau et le sommaire */
.st-section {
  scroll-margin-top: calc(
    var(--hauteur-entete) + var(--hauteur-sommaire, 0px) + 15px
  );
}

/* Dernières visites : clic sur une ligne = parcours de la visite */
.st-tableau tr.st-visite {
  cursor: pointer;
}

/* Visites du jour : jaune pâle, comme le disque du jour (.ddj-aujourdhui) ; le survol et la ligne dépliée, plus bas, l'emportent */
.st-tableau tr.st-visite.st-aujourdhui td {
  background: var(--sombre-jaune, #fffbea);
}

/* Mode sombre : le brun du disque du jour jure avec le bleu de la carte ; voile jaune léger et liseré à gauche */
:root[data-theme="sombre"] .st-tableau tr.st-visite.st-aujourdhui:not(:hover, [aria-expanded="true"]) td {
  background: rgba(230, 195, 106, 0.07);
}

:root[data-theme="sombre"] .st-tableau tr.st-visite.st-aujourdhui td:first-child {
  box-shadow: inset 3px 0 var(--sombre-texte-jaune);
}

/* Gris très clair : la pastille « nouveau » (bleue) et le navigateur · système (gris) restent lisibles */
.st-tableau tr.st-visite:hover td,
.st-tableau tr.st-visite[aria-expanded="true"] td {
  background: var(--sombre-doux, #f0f2f5);
}

.st-tableau tr.st-visite[aria-expanded="true"] td {
  border-bottom-color: transparent;
}

.st-parcours ol {
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  counter-reset: etape;
}

.st-parcours li {
  display: flex;
  gap: 12px;
  padding: 3px 0;
  counter-increment: etape;
}

.st-parcours li::before {
  content: counter(etape) ".";
  min-width: 1.6em;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  text-align: right;
}

.st-parcours-heure {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.st-parcours-page {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Page lue en anglais (/en/) dans le parcours d'une visite */
.st-langue {
  padding: 0 6px;
  font-size: 0.65rem;
  vertical-align: 1px;
}

.st-parcours-duree {
  white-space: nowrap;
  text-align: right;
}

/* Écoutes de la musique du logo pendant la page (gestion_statistiques.php, st_parcours) : ligne à part, sous la page */
.st-parcours li:has(.st-parcours-sons) {
  flex-wrap: wrap;
}

.st-parcours-sons {
  flex-basis: 100%;
  padding-left: calc(1.6em + 12px);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.85rem;
}

.st-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bleu1);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 11px;
}

/* Visiteur déjà venu : rang de la visite (couleurs du fond et du texte calculées dans gestion_statistiques.php) */
.st-badge.st-badge-visite {
  background: var(--chaleur-fond);
  color: var(--chaleur-texte);
  font-weight: bold;
}

:root[data-theme="sombre"] .st-badge.st-badge-visite {
  background: var(--chaleur-fond-sombre);
  color: var(--chaleur-texte-sombre);
}

/* Visite reconnue sans cookie (même adresse, même navigateur) : pastille entourée de pointillés */
.st-badge.st-badge-rapprochee {
  outline: 1px dashed var(--sombre-texte-bleu4, var(--bleu5));
  outline-offset: 1px;
}

/* Fenêtre « historique » : détachement d'une visite reconnue sans cookie */
.st-detacher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 6px;
}

.st-detacher button {
  margin: 0;
  padding: 2px 10px;
  font-size: 12px;
}

/* Première visite d'un visiteur : étoile dans la pastille bleue */
.st-badge.st-etoile {
  padding: 1px 7px;
  font-size: 12px;
}

/* Pagination des dernières visites */
.st-pages {
  margin-top: 14px;
}

/* Visiteur : bouton de son historique (son nom s'il en a un, sinon une icône) */
.st-visiteur {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding: 2px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--sombre-texte-bleu4, var(--bleu4));
  font: inherit;
  cursor: pointer;
}

.st-visiteur svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.st-visiteur:hover {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  background: var(--bleu1);
}

.st-visiteur.st-visiteur-nomme {
  padding: 1px 8px;
  background: var(--vert2);
  color: var(--sombre-texte-vert5, var(--vert5));
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
}

.st-visiteur.st-visiteur-nomme:hover {
  background: var(--vert3);
  color: #fff;
}

.st-nommes {
  margin-top: 14px;
}

/* Fenêtre de l'historique d'un visiteur : plus large que les autres, liste des visites défilante */
.dialogue.st-visiteur-modale {
  width: min(820px, 94vw);
}

.st-visiteur-modale .dialogue-carte {
  max-height: 88vh;
  box-sizing: border-box;
}

.st-visiteur-modale .dialogue-carte > p {
  margin: -8px 0 0;
}

.st-nommer {
  display: flex;
  gap: 8px;
}

.st-nommer input[type="text"] {
  flex: 1;
  min-width: 0;
}

.st-histo {
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--sombre-bord, #e5e9f0);
  font-size: 0.85rem;
}

.st-histo-visite {
  border-bottom: 1px solid var(--sombre-bord, #e5e9f0);
}

.st-histo-visite summary {
  display: grid;
  grid-template-columns: 12em minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px 4px;
  text-align: left;
  cursor: pointer;
}

.st-histo-visite summary > :last-child {
  text-align: right;
}

.st-histo-visite summary:hover,
.st-histo-visite[open] summary {
  background: var(--sombre-doux, #f0f2f5);
}

.st-histo-visite .st-parcours {
  padding: 6px 4px 6px 1.5em;
}

@media (max-width: 700px) {
  .st-histo-visite summary {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
  }

  .st-histo-visite summary > :last-child {
    white-space: normal;
  }

  /* Date et durée sur la première ligne, pays et provenance dessous */
  .st-histo-visite summary > :nth-child(2),
  .st-histo-visite summary > :nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .st-histo-visite summary > :nth-child(3) {
    grid-row: 3;
  }

  .st-histo {
    overflow-x: hidden;
  }

  .st-nommer {
    flex-wrap: wrap;
  }
}

@media (max-width: 1100px) {
  .st-colonnes,
  .st-colonnes-3 {
    grid-template-columns: 1fr;
  }

  .st-chiffres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .st-chiffre b {
    font-size: 1.4rem;
  }

  /* Meilleure / moins bonne journée, moyenne : 3 pavés sur une ligne */
  .st-journees {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .st-journees .st-carte.st-chiffre {
    padding: 10px;
  }

  .st-journees .st-chiffre span {
    font-size: 0.65rem;
  }

  .st-periodes .st-supprimer {
    margin-left: 0;
  }

  .st-graph {
    padding-left: 30px;
  }

  .st-cellule-jauge .st-jauge {
    display: none;
  }

  /* Les tableaux des statistiques restent des tableaux (pas la présentation en fiches des autres tableaux du site) */
  .st-tableau th,
  .st-tableau td {
    font-size: 0.8rem;
  }
}

/* ===================================================================
   Page de gestion (gestion.php) : tableau de bord de l'administrateur
   =================================================================== */
.gestion-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.gestion-bonjour {
  color: var(--gris3);
}

/* État de la collection Discogs : pastille de couleur selon l'écart avec la base */
.gestion-synchro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  border-left: 5px solid var(--gris2);
}

.gestion-synchro-ok {
  border-left-color: var(--vert4);
}

.gestion-synchro-ecart {
  border-left-color: var(--orange3);
}

.gestion-synchro-etat {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gestion-synchro-etat h3 {
  margin: 0 0 2px;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1.05rem;
}

.gestion-synchro-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gris2);
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
}

.gestion-synchro-ok .gestion-synchro-icone {
  background: var(--vert4);
}

.gestion-synchro-ecart .gestion-synchro-icone {
  background: var(--orange3);
}

.gestion-discret {
  color: var(--gris3);
  font-size: 0.85rem;
}

/* Boutons à droite, les uns sous les autres, de même largeur */
.gestion-synchro {
  flex-wrap: nowrap;
}

.gestion-synchro-etat {
  flex: 1;
  min-width: 0;
}

.gestion-synchro-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  gap: 8px;
}

.gestion-synchro-actions > a {
  margin: 0;
  text-align: center;
}

/* Chiffres du moment : ceux de l'accueil, en cartes blanches */
.accueil-chiffres.gestion-chiffres {
  padding-top: 0;
  margin-bottom: 10px;
  /* Une colonne par case, quel que soit leur nombre (les visites manquent si les statistiques sont indisponibles) */
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.gestion-chiffres a:not(.nav-links a) {
  background: var(--sombre-carte, #fff);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.gestion-chiffres a:not(.nav-links a):hover,
.gestion-chiffres a:not(.nav-links a):focus-visible {
  background: var(--sombre-carte, #fff);
}

/* Sections atteintes par l'accès rapide : arrêt sous le bandeau et le sommaire */
.gestion-rubrique,
.gestion-synchro {
  scroll-margin-top: calc(
    var(--hauteur-entete) + var(--hauteur-sommaire, 0px) + 15px
  );
}

.gestion-rubrique {
  margin-top: 20px;
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1.05rem;
}

.gestion-rubrique + .menu-tuiles {
  margin-top: 8px;
  margin-bottom: 10px;
}

/* À faire (todo.md, site local seulement) */
.gestion-todo {
  margin-top: 25px;
  scroll-margin-top: calc(
    var(--hauteur-entete) + var(--hauteur-sommaire, 0px) + 15px
  );
}

.gestion-todo h4 {
  margin: 14px 0 6px;
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

.gestion-todo ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .accueil-chiffres.gestion-chiffres {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
  }

  /* Valeur de la collection : les 3 cases sur une ligne */
  .accueil-chiffres.gestion-valeur {
    grid-template-columns: repeat(3, 1fr);
  }

  .gestion-valeur b {
    font-size: 1.1rem;
  }

  .gestion-synchro {
    flex-wrap: wrap;
  }

  .gestion-synchro-actions {
    width: 100%;
  }
}

/* ===================================================================
   Gestion des news (gestion_news.php) : éditeur avec aperçu, liste des news avec leurs actions
   =================================================================== */
.gestion-news-editeur {
  margin-bottom: 24px;
  scroll-margin-top: calc(var(--hauteur-entete) + 15px);
}

.gestion-news-editeur textarea {
  min-height: 260px;
}

.gestion-news-editeur h3 {
  margin: 0;
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

.contact-form .gestion-news-date input {
  max-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--sombre-bord, #d5dee8);
  border-radius: 8px;
  background: var(--sombre-doux, #fafcfe);
  font: inherit;
}

.gestion-news-outils {
  display: flex;
  gap: 6px;
}

.gestion-news-outils button {
  min-width: 36px;
  padding: 4px 10px;
  border: 1px solid var(--sombre-bord, #d5dee8);
  border-radius: 6px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.gestion-news-outils button:hover,
.gestion-news-outils button:focus-visible {
  background: var(--sombre-bleute, #e3ecf5);
}

.gestion-news-libelle {
  color: var(--sombre-texte-primary-color, var(--primary-color));
  font-size: 0.9rem;
  font-weight: bold;
}

/* Aperçu : la news telle qu'elle apparaîtra, sur un fond gris comme celui du site */
.news.gestion-news-apercu {
  margin: 0;
  box-shadow: none;
  border: 1px dashed var(--bleu1);
  background: var(--sombre-carte, #fff);
}

.gestion-news-boutons {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.gestion-news-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* News de la liste : date, texte, puis boutons à droite */
.news.gestion-news {
  grid-template-columns: 96px 1fr auto;
}

.gestion-news-corps {
  min-width: 0;
}

.gestion-news-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: start;
}

.gestion-news-actions .btn-bleu,
.gestion-news-actions .btn-vert,
.gestion-news-actions .btn-rouge {
  margin: 0 0 6px;
  padding: 5px 14px;
  font-size: 13px;
}

/* News masquée : estompée, avec une étiquette */
.gestion-news-masquee {
  background: var(--sombre-doux, #f4f4f4);
}

.gestion-news-masquee .news-date,
.gestion-news-masquee .news-texte {
  opacity: 0.55;
}

.gestion-news-masquee .news-date {
  background: var(--gris3);
}

.gestion-news-badge {
  display: inline-block;
  margin: 0 0 6px;
  text-align: center;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--gris4);
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
}

@media (max-width: 1100px) {
  .news.gestion-news {
    grid-template-columns: 70px 1fr;
  }

  .gestion-news-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
    gap: 6px;
  }

  .gestion-entete {
    flex-wrap: wrap;
  }
}

/* ===================================================================
   Pages de gestion : étiquettes communes (état d'un élément)
   =================================================================== */
.gestion-badge {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--bleu1);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 0.72rem;
  font-weight: bold;
  white-space: nowrap;
}

.gestion-badge-vert {
  background: var(--vert2);
  color: var(--sombre-texte-vert5, var(--vert5));
}

.gestion-badge-orange {
  background: var(--sombre-jaune, #ffe6cc);
  color: var(--sombre-texte-jaune, #9a4a00);
}

.gestion-badge-gris {
  background: var(--gris4);
  color: #fff;
}

/* Fêtes (gestion_fetes.php) : décor sur un fond d'en-tête, pour le voir comme sur le site ; la fête du jour en évidence */
.gestion-fetes svg {
  display: block;
  padding: 4px;
  border-radius: 6px;
  background: var(--primary-color);
}

.gestion-fetes tr.gestion-fete-en-cours td {
  background: var(--sombre-bleute, #e3ecf5);
}

/* « Écouter » (largeur fixe : le libellé devient « Arrêter ») et « Tester » côte à côte */
.gestion-fetes-actions {
  white-space: nowrap;
}

.gestion-fetes-actions button {
  min-width: 7.5em;
  margin-right: 6px;
}

/* Pendant l'écoute (« ■ Arrêter ») : en rouge, pour le repérer parmi les autres */
.gestion-fetes-actions button[aria-pressed="true"] {
  --btn-fond: var(--rouge3);
  --btn-fond-survol: var(--rouge4);
  --btn-texte: #fff;
  --btn-texte-survol: #fff;
  --btn-ombre: rgba(157, 77, 77, 0.3);
}

/* Champ rempli d'un clic (« Utiliser ») : bref surlignage */
.gestion-rempli {
  animation: gestion-rempli 1.2s ease;
}

@keyframes gestion-rempli {
  from {
    background-color: var(--sombre-jaune, #fff3c4);
    box-shadow: 0 0 0 3px var(--accent-color);
  }
}

/* ===================================================================
   Gestion des livres (gestion_livres.php)
   =================================================================== */
.gestion-livres-editeur {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 24px;
  scroll-margin-top: calc(var(--hauteur-entete) + 15px);
}

/* Avec des informations trouvées par ISBN : formulaire à gauche, informations à droite */
.gestion-livres-editeur:has(.gestion-livres-sources) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
}

.gestion-livres-editeur h3 {
  margin: 0;
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

.contact-form.gestion-livres-isbn {
  gap: 10px;
  margin-bottom: 16px;
}

.gestion-livres-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gestion-livres-ligne input {
  flex: 1;
}

.gestion-livres-ligne .btn-bleu {
  margin: 0;
}

.gestion-livres-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.gestion-livres-choix label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.gestion-livres-couverture {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gestion-livres-couverture img {
  width: 90px;
  max-height: 130px;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gestion-livres-source {
  margin-bottom: 16px;
}

.gestion-livres-source h3 {
  font-size: 1rem;
}

.gestion-livres-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--sombre-bord, #edf0f3);
  font-size: 0.9rem;
}

.gestion-livres-info:last-child {
  border-bottom: none;
}

.gestion-livres-info b {
  display: block;
  color: var(--gris3);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Photos de Wikimedia Commons dans l'encadré Wikidata (gestion_interpretes.php) ; rejetées : pâlies */
.gestion-interp-photos {
  display: block;
}

.gestion-interp-photos div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.gestion-interp-photos a:not(.nav-links a)::after {
  display: none;
}

.gestion-interp-photos img {
  display: block;
  height: 70px;
  border-radius: 4px;
}

.gestion-interp-photo-rejetee img {
  opacity: 0.35;
}

.gestion-livres-info .btn-bleu,
.gestion-livres-source .btn-vert {
  margin: 0;
  padding: 4px 12px;
  font-size: 12px;
}

.gestion-livres-resume {
  display: block;
  max-height: 9em;
  overflow-y: auto;
}

.gestion-livres-source-couv {
  width: 80px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Liste : une carte par livre (couverture, informations, actions) */
.gestion-livres-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 12px;
}

.gestion-livre {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 12px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.gestion-livre[hidden] {
  display: none;
}

.gestion-livre img {
  width: 60px;
  height: 84px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.gestion-livre-infos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 0.9rem;
}

.gestion-livre-infos b {
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

/* Lien dans la colonne : limité à son texte (sinon le soulignement au survol va jusqu'au bout de la ligne) */
.gestion-livre-infos > a {
  align-self: flex-start;
}

.gestion-livre-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.gestion-livre-masque {
  background: var(--sombre-doux, #f4f4f4);
}

.gestion-livre-masque img,
.gestion-livre-masque .gestion-livre-infos > :not(.gestion-livre-badges) {
  opacity: 0.5;
}

@media (max-width: 1100px) {
  .gestion-livres-editeur:has(.gestion-livres-sources) {
    grid-template-columns: minmax(0, 1fr);
  }

  .gestion-livres-liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .gestion-livre {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .gestion-livre .gestion-news-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
    gap: 6px;
  }
}

/* ===================================================================
   Gestion des liens (gestion_liens.php)
   =================================================================== */
.contact-form select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--sombre-bord, #d5dee8);
  border-radius: 8px;
  background: var(--sombre-doux, #fafcfe);
  color: var(--text-color);
  font: inherit;
}

/* Formulaire à gauche, aperçu de la carte publique à droite */
.gestion-liens-editeur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 18px;
  align-items: start;
  margin-bottom: 24px;
  scroll-margin-top: calc(var(--hauteur-entete) + 15px);
}

.gestion-liens-editeur h3 {
  margin: 0;
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

.gestion-liens-editeur aside {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lien-carte.gestion-liens-apercu {
  pointer-events: none;
}

.gestion-liens-apercu [hidden] {
  display: none;
}

.gestion-liens-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 24px;
}

/* Une ligne par lien : flèches de classement, aperçu, informations, actions */
.gestion-lien {
  display: grid;
  grid-template-columns: 28px 120px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.gestion-lien > img,
.gestion-lien-sans {
  width: 120px;
  height: 75px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.gestion-lien-sans {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu4, var(--bleu4));
  font-size: 0.75rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.gestion-lien-ordre {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gestion-lien-ordre a:not(.nav-links a),
.gestion-lien-ordre .poignee {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: bold;
}

.gestion-lien-ordre a:not(.nav-links a) {
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu4, var(--bleu4));
  transition: background-color 0.2s ease;
}

.gestion-lien-ordre a:not(.nav-links a)::after {
  display: none;
}

.gestion-lien-ordre a:not(.nav-links a):hover,
.gestion-lien-ordre a:not(.nav-links a):focus-visible {
  background: var(--bleu4);
  color: #fff;
}

/* Flèche en tête ou en fin de liste */
.gestion-lien-ordre a.inactif:not(.nav-links a) {
  background: none;
  color: var(--gris1);
  pointer-events: none;
}

/* Poignée du glisser-déposer (js/glisser.js) */
.poignee {
  color: var(--gris2);
  font-size: 1.1rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.poignee:hover {
  color: var(--sombre-texte-bleu4, var(--bleu4));
}

.glissement-actif,
.glissement-actif * {
  cursor: grabbing !important;
  user-select: none;
}

.en-glissement {
  position: relative;
  z-index: 5;
  outline: 2px dashed var(--bleu3);
  box-shadow: 0 10px 28px rgba(44, 62, 80, 0.25) !important;
  transform: scale(1.01);
}

/* Message « Ordre enregistré » (js/glisser.js) */
.glisser-message {
  position: fixed;
  left: 50%;
  bottom: 50px;
  z-index: 1200;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--vert4);
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.glisser-message.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.glisser-message.glisser-erreur {
  background: var(--rouge3);
}

.gestion-lien-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--gris4);
  font-size: 0.85rem;
}

.gestion-lien-masque {
  background: var(--sombre-doux, #f4f4f4);
}

.gestion-lien-masque > img,
.gestion-lien-masque .gestion-livre-infos > :not(.gestion-livre-badges) {
  opacity: 0.5;
}

/* Vérification des liens : bouton et date de la dernière vérification, adresse d'un lien redirigé */
.gestion-liens-verifier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.gestion-livre-badges .gestion-discret {
  align-self: center;
  font-size: 0.75rem;
}

.gestion-lien-redirection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.gestion-lien-redirection .btn-vert {
  margin: 0;
  padding: 2px 10px;
  font-size: 0.75rem;
}

@media (max-width: 1100px) {
  .gestion-liens-editeur {
    grid-template-columns: minmax(0, 1fr);
  }

  .gestion-lien {
    grid-template-columns: 28px 90px minmax(0, 1fr);
  }

  .gestion-lien > img,
  .gestion-lien-sans {
    width: 90px;
    height: 56px;
  }

  .gestion-lien .gestion-news-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
    gap: 6px;
  }
}

/* ===================================================================
   Gestion des images humoristiques (gestion_humour.php)
   =================================================================== */
.gestion-humour-editeur {
  margin-bottom: 24px;
  scroll-margin-top: calc(var(--hauteur-entete) + 15px);
}

.gestion-humour-editeur h3 {
  margin: 0;
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

/* Image à gauche, titre et texte à droite */
.gestion-humour-editeur-grille {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 18px;
}

.gestion-humour-textes {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gestion-humour-apercu {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  align-self: flex-start;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gestion-humour-apercu[hidden] {
  display: none;
}

/* Grille des images (classable par glisser-déposer : js/glisser.js) */
.gestion-humour-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin: 10px 0 24px;
}

.gestion-humour {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.gestion-humour[hidden] {
  display: none;
}

a.gestion-humour-image:not(.nav-links a) {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden; /* une image en hauteur est recadrée au lieu d'étirer la carte */
  background: var(--sombre-doux, #f3f7fb);
}

a.gestion-humour-image:not(.nav-links a)::after {
  display: none;
}

.gestion-humour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.gestion-humour-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 4px;
  font-size: 0.85rem;
}

.gestion-humour-corps b {
  color: var(--sombre-texte-bleu5, var(--bleu5));
}

.gestion-humour-texte {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--gris3);
}

.gestion-humour-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px 10px 10px;
}

.gestion-humour-actions .gestion-lien-ordre {
  flex-direction: row;
  margin-right: auto;
}

.gestion-humour-actions .btn-bleu,
.gestion-humour-actions .btn-vert,
.gestion-humour-actions .btn-rouge {
  margin: 0;
  padding: 4px 12px;
  font-size: 12px;
}

.gestion-humour-masquee {
  background: var(--sombre-doux, #f4f4f4);
}

.gestion-humour-masquee .gestion-humour-image,
.gestion-humour-masquee .gestion-humour-corps {
  opacity: 0.5;
}

.gestion-humour-masquees-titre {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gestion-humour-masquees-titre .titre-rubrique {
  flex: 1;
}

/* Pendant un filtre, l'ordre affiché est incomplet : glisser-déposer et flèches suspendus */
.glisser-suspendu .poignee,
.glisser-suspendu [data-sens] {
  visibility: hidden;
}

@media (max-width: 1100px) {
  .gestion-humour-editeur-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .gestion-humour-grille {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
}

/* ===================================================================
   Gestion des commentaires (gestion_disques_commentaires.php)
   =================================================================== */
/* Barre de sélection, collée sous l'en-tête du site pendant le défilement */
.gestion-selection {
  position: sticky;
  top: var(--hauteur-entete);
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-bottom: 12px;
  padding: 6px 14px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(44, 62, 80, 0.12);
}

.gestion-selection label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.gestion-selection .btn-rouge {
  margin-left: auto;
}

/* Carte : case à cocher, pochette, commentaire, bouton */
.commentaire-carte.gestion-commentaire {
  grid-template-columns: auto 90px minmax(0, 1fr) auto;
  align-items: start;
}

.gestion-commentaire-coche {
  display: flex;
  padding-top: 4px;
  cursor: pointer;
}

.gestion-commentaire-coche input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.gestion-commentaire.selectionne {
  outline: 2px solid var(--rouge2);
  background: var(--sombre-rouge, #fffafa);
}

.gestion-commentaire-ip {
  margin-left: auto;
  font-size: 0.75rem;
}

@media (max-width: 1100px) {
  .commentaire-carte.gestion-commentaire {
    grid-template-columns: auto 64px minmax(0, 1fr);
  }

  .gestion-commentaire .gestion-news-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
  }

  /* Maj + clic : sans objet au doigt */
  .gestion-selection .gestion-discret {
    display: none;
  }
}

/* ===================================================================
   Messages de contact (gestion_contacts.php) : reprend les cartes des commentaires
   =================================================================== */
.contacts-filtre {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.commentaire-carte.contact-message {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

/* Message pas encore lu : liseré vert à gauche */
.contact-non-lu {
  box-shadow:
    inset 4px 0 0 var(--vert5),
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.contact-message-infos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.contact-message .commentaire-texte {
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .commentaire-carte.contact-message {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-message .gestion-news-actions {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* ===================================================================
   Recherches des visiteurs (gestion_recherches.php) : reprend les cartes des statistiques (.st-*)
   =================================================================== */
.gestion-recherches-filtre {
  flex: 0 1 360px;
}

.gestion-recherches-filtre .filtre-livres {
  max-width: none;
}

.gestion-recherches-terme {
  overflow-wrap: anywhere;
}

.gestion-recherches-top small a:not(.nav-links a)::after {
  display: none;
}

/* Suppression : ✕ d'un terme (les plus recherchés), cases à cocher et ligne sélectionnée (toutes les recherches) */
.gestion-recherches-top small {
  display: inline-flex;
  gap: 10px;
}

a.gestion-recherches-suppr:not(.nav-links a) {
  color: var(--rouge2);
  font-weight: bold;
}

a.gestion-recherches-suppr:not(.nav-links a):hover,
a.gestion-recherches-suppr:not(.nav-links a):focus-visible {
  color: var(--sombre-texte-rouge3, var(--rouge3));
}

.gestion-recherches-tableau .gestion-recherches-coche {
  width: 32px;
  text-align: center;
}

.gestion-recherches-coche input {
  width: 17px;
  height: 17px;
  vertical-align: middle;
  cursor: pointer;
}

.gestion-recherches-tableau tr.selectionne td {
  background: var(--sombre-rouge, #fff1f1);
}

.gestion-recherches-pages {
  margin-top: 14px;
}

@media (max-width: 1100px) {
  .gestion-recherches-filtre {
    flex: 1 1 100%;
  }

  .st-titre-actions:has(.gestion-recherches-filtre) {
    flex-wrap: wrap;
  }
}

/* Recherches : zones repliables (titre cliquable avec chevron) */
details.gestion-repliable > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0;
  list-style: none;
  cursor: pointer;
}

details.gestion-repliable > summary::-webkit-details-marker {
  display: none;
}

details.gestion-repliable > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--bleu4);
  border-bottom: 2px solid var(--bleu4);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

details.gestion-repliable:not([open]) > summary::after {
  transform: rotate(-45deg);
}

details.gestion-repliable > summary h3 {
  margin: 0;
}

details.gestion-repliable[open] > summary {
  margin-bottom: 14px;
}

.gestion-recherches-top li[hidden],
.gestion-recherches-plus button[hidden] {
  display: none;
}

.gestion-recherches-plus {
  margin-top: 10px;
  text-align: center;
}

/* Recherches, « Toutes les recherches » : titre et barre (nombre, pagination, filtre) collés sous l'en-tête du site */
.gestion-recherches-liste {
  --hauteur-titre-liste: 54px;
  scroll-margin-top: calc(var(--hauteur-entete) + 10px);
}

details.gestion-recherches-liste > summary {
  position: sticky;
  top: var(--hauteur-entete);
  z-index: 6;
  height: var(--hauteur-titre-liste);
  margin: -18px -20px 0;
  padding: 0 20px;
  border-radius: 12px 12px 0 0;
  background: var(--sombre-carte, #fff);
}

details.gestion-recherches-liste[open] > summary {
  margin-bottom: 0;
}

details.gestion-recherches-liste:not([open]) > summary {
  margin-bottom: -18px;
  border-radius: 12px;
}

.gestion-recherches-barre {
  position: sticky;
  top: calc(var(--hauteur-entete) + var(--hauteur-titre-liste));
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 -20px 6px;
  padding: 4px 20px 10px;
  border-bottom: 1px solid var(--sombre-bord, #edf0f3);
  background: var(--sombre-carte, #fff);
}

.gestion-recherches-barre > p {
  margin-right: auto;
}

.gestion-recherches-barre .gestion-recherches-pages {
  margin: 0;
}

@media (max-width: 1100px) {
  /* Recherches : titre moins haut, nombre et pagination sur une même ligne, filtre dessous */
  .gestion-recherches-liste {
    --hauteur-titre-liste: 46px;
  }

  .gestion-recherches-barre {
    gap: 6px 10px;
  }

  .gestion-recherches-barre > p,
  .gestion-recherches-barre .disques-numeros .gestion-discret {
    font-size: 0.8rem;
  }

  /* la règle générale « nav { width: 100% } » des mobiles mettait la pagination seule sur sa ligne */
  .gestion-recherches-barre .gestion-recherches-pages {
    width: auto;
  }
}

/* ===================================================================
   Calendrier familial (calendrier_familial.php) : écran et impression sur une page A4
   =================================================================== */
.calendrier-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}

.calendrier-outils > p {
  flex-basis: 100%;
}

.calendrier-mois {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendrier-mois select {
  padding: 6px 10px;
  border: 1px solid var(--sombre-bord, #d5dee8);
  border-radius: 8px;
  background: var(--sombre-doux, #fafcfe);
  font: inherit;
}

a.calendrier-fleche:not(.nav-links a) {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--bleu1);
  border-radius: 50%;
  background: var(--sombre-doux, #f3f7fb);
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-size: 1.2rem;
  font-weight: bold;
}

a.calendrier-fleche:not(.nav-links a)::after {
  display: none;
}

/* Réinitialisation à droite, sur la ligne du choix du mois */
.calendrier-outils #calendrier-raz {
  margin: 0 0 0 auto;
}

.calendrier-sans-feries {
  color: var(--sombre-texte-rouge3, var(--rouge3));
}

/* Le calendrier : un jour par ligne */
.calendrier {
  max-width: 900px;
  margin: 0 auto;
}

.calendrier-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--sombre-carte, #fff);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.calendrier-table th,
.calendrier-table td {
  padding: 3px 8px;
  border: 1px solid var(--gris2);
  vertical-align: middle;
}

.calendrier-table th {
  background: var(--bleu4);
  color: #fff;
  text-align: center;
  /* ligne de titres collée sous l'en-tête du site pendant le défilement */
  position: sticky;
  top: var(--hauteur-entete);
  z-index: 2;
}

.calendrier-table th.calendrier-titre {
  background: var(--sombre-carte, #fff);
  color: var(--sombre-texte, #000);
  line-height: 1.2;
  text-transform: capitalize;
}

/* Largeurs fixées par le colgroup (la première ligne du tableau n'a qu'une case pour le numéro et le nom) */
.calendrier-col-num {
  width: 2.5em;
}

.calendrier-col-nom {
  width: 6.5em;
}

.calendrier-num {
  font-weight: bold;
  text-align: center;
}

.calendrier-nom {
  text-transform: capitalize;
}

.calendrier-case {
  text-align: center;
  font-size: 0.8rem;
  white-space: nowrap;
}

.calendrier-case img {
  height: 18px;
  vertical-align: middle;
}

.calendrier-jour {
  cursor: pointer;
}

.calendrier-jour:hover td {
  outline: 1px solid var(--bleu3);
}

/* Week-end : seuls le numéro et le nom du jour sont colorés (:where garde la priorité aux jours exclus) */
.calendrier-samedi :where(.calendrier-num, .calendrier-nom) {
  background: var(--bleu1);
}

.calendrier-dimanche :where(.calendrier-num, .calendrier-nom) {
  background: var(--bleu2);
}

.calendrier-exclu td {
  background: var(--gris1);
  color: var(--gris3);
}

td.calendrier-annif {
  background: var(--vert2);
  color: var(--sombre-texte-vert5, var(--vert5));
  font-weight: bold;
}

/* Case exclue seule (un membre ce jour-là) */
.calendrier-table td.calendrier-case-exclue {
  background: var(--gris1);
}

/* Case rétablie dans un jour exclu ou férié (personne non concernée) */
.calendrier-table .calendrier-exclu td.calendrier-case-incluse {
  background: var(--sombre-carte, #fff);
}

.calendrier-case:hover {
  outline: 2px solid var(--bleu3);
}

/* Impression : seul le calendrier, sur toute la hauteur d'une page A4 (les lignes se partagent la hauteur) */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm;
  }

  body:has(.calendrier) {
    background: var(--sombre-carte, #fff);
    min-width: 0;
  }

  body:has(.calendrier) header.entete,
  body:has(.calendrier) footer,
  body:has(.calendrier) .calendrier-ecran,
  body:has(.calendrier) .dy-stats {
    display: none !important;
  }

  body:has(.calendrier) main.container {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .calendrier {
    max-width: none;
  }

  .calendrier-table {
    height: 272mm;
    font-size: 11pt;
  }

  .calendrier-jour:hover td {
    outline: none;
  }

  .calendrier-table th {
    position: static;
  }
}

/* ===================================================================
   Mise à jour des disques depuis Discogs (gestion_disques.php)
   =================================================================== */
.gestion-sync {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.gestion-sync .progression {
  height: 18px;
}

.gestion-sync-texte {
  color: var(--sombre-texte-bleu5, var(--bleu5));
  font-weight: bold;
  text-align: center;
}

.gestion-sync .gestion-discret {
  text-align: center;
}

#sync-resultat .message-succes,
#sync-resultat .message-erreur {
  margin-bottom: 16px;
}

/* Nouveaux disques : vignettes comme les « derniers disques ajoutés » de l'accueil, sans limite de nombre */
.gestion-sync-nouveaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

/* Pochettes changées sur Discogs : ancienne → nouvelle */
.gestion-sync-pochettes {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.gestion-sync-avant-apres {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  color: var(--gris4);
}

/* Modification d'un commentaire (gestion_disques_commentaires.php?modifier=id) */
/* Visée par #c-id : sous l'en-tête et sous la barre de sélection collante (hauteur mesurée par le script de la page) */
.gestion-commentaire {
  scroll-margin-top: calc(
    var(--hauteur-entete) + var(--hauteur-selection, 50px) + 40px
  );
}

.gestion-commentaire-edition {
  outline: 2px solid var(--primary-color);
}

.gestion-commentaire-champ-nom,
.gestion-commentaire-champ-texte {
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--sombre-bord, #ccd2da);
  border-radius: 6px;
  font: inherit;
}

.gestion-commentaire-champ-nom {
  flex: 0 1 260px;
  min-width: 0;
  font-weight: bold;
}

.gestion-commentaire-champ-texte {
  display: block;
  width: 100%;
  margin-top: 8px;
  resize: vertical;
}

.gestion-commentaire-champ-nom:focus,
.gestion-commentaire-champ-texte:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}

/* ===================================================================
   Gestion des interprètes (gestion_interpretes.php) : reprend l'éditeur des livres et la liste des recherches
   =================================================================== */
.gestion-interp-editeur:has(.gestion-livres-sources) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
}

.gestion-interp-editeur .gestion-livres-source h3 {
  margin-bottom: 8px;
}

.gestion-interp-editeur .gestion-livres-source > p {
  margin: 0 0 8px;
}

/* Petits formulaires d'action (lier, retirer, masquer) : un simple bouton */
.gestion-interp-action {
  display: inline-block;
  margin: 0;
}

.gestion-interp-action button {
  margin: 4px 0 0;
}

/* Doublon possible (même nom ou même artiste Discogs) : message à gauche, bouton « Fusionner… » à droite */
.gestion-interp-doublon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--sombre-bord-jaune, #f0d9a8);
  border-left: 4px solid #e0a030;
  border-radius: 0 10px 10px 0;
  background: var(--sombre-jaune, #fff8ea);
  color: var(--sombre-texte-jaune, #6b4a12);
  line-height: 1.45;
}

.gestion-interp-doublon-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sombre-jaune, #fbe7bf);
  color: var(--sombre-texte-jaune, #b07812);
  font-size: 1.1rem;
}

.gestion-interp-doublon p {
  flex: 1;
  margin: 0;
  font-size: 0.92rem;
}

.gestion-interp-doublon p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gestion-interp-doublon .btn-bleu {
  flex: none;
  margin: 0;
  padding: 7px 16px;
  font-size: 0.88rem;
}

@media (max-width: 560px) {
  .gestion-interp-doublon {
    flex-wrap: wrap;
  }
  .gestion-interp-doublon .btn-bleu {
    margin-left: 48px;
  }
}

/* Fusion de deux fiches : comparaison champ par champ, une colonne par fiche */
.gestion-interp-fusion {
  padding: 18px 22px;
  margin-bottom: 18px;
  border-left: 4px solid var(--bleu, #2f5d8a);
}

.gestion-interp-fusion h3 {
  margin: 0 0 6px;
}

.gestion-interp-fusion-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.9rem;
}

.gestion-interp-fusion-table th,
.gestion-interp-fusion-table td {
  text-align: left;
  vertical-align: top;
  padding: 7px 10px;
  border-bottom: 1px solid var(--sombre-bord, #edf0f3);
}

.gestion-interp-fusion-table th:first-child {
  width: 140px;
  color: var(--gris3);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gestion-interp-fusion-table td {
  width: calc(50% - 70px);
  overflow-wrap: anywhere;
}

.gestion-interp-fusion-table label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  cursor: pointer;
}

.gestion-interp-fusion-table input[type="radio"] {
  margin-top: 3px;
  flex: none;
}

@media (max-width: 700px) {
  .gestion-interp-fusion-table th:first-child {
    width: 80px;
  }
}

/* « Sur le site » : albums et chansons des anciennes données, repliés ; clic sur le nombre pour voir la liste */
.gestion-interp-editeur .gestion-livres-source > p.gestion-discret {
  margin: 14px 0 4px;
}

.gestion-interp-anciens summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bleu, var(--sombre-texte-bleu, #2f5d8a));
  padding: 2px 0;
}

.gestion-interp-anciens ul {
  max-height: 260px;
  overflow-y: auto;
  margin: 4px 0 8px;
  padding-left: 18px;
  font-size: 0.85rem;
}

.gestion-interp-anciens li {
  padding: 2px 0;
}

.contact-form.gestion-interp-lier {
  gap: 6px;
  margin: 12px 0 8px;
  padding: 0;
  box-shadow: none;
  background: none;
}

.gestion-interp-lier .gestion-discret {
  margin: 0;
}

/* Rapprochement des fiches non liées : texte à gauche, bouton à droite */
.gestion-interp-rapprochement {
  margin-bottom: 16px;
}

.gestion-interp-rapprochement-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.gestion-interp-rapprochement p {
  margin: 0;
}

.gestion-interp-rapprochement #rappr-resultat p {
  margin-top: 6px;
}

/* Plusieurs lignes dans la carte (gestion_wikidata.php : relecture, champs à compléter) */
.gestion-interp-rapprochement-ligne + .gestion-interp-rapprochement-ligne,
.gestion-interp-rapprochement #wd-progression + .gestion-interp-rapprochement-ligne {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sombre-bord, #eceff3);
}

/* Différences avec Wikidata (gestion_wikidata.php) */
.gestion-wikidata-tableau td:first-child,
.gestion-wikidata-tableau th:first-child {
  width: 30px;
  text-align: center;
}

/* Champ (« Site officiel », « Nationalité »…) : sur une ligne */
.gestion-wikidata-tableau td:nth-child(3) {
  white-space: nowrap;
}

/* Titres des colonnes collés sous la barre de sélection, elle-même collée sous l'en-tête du site
   (hauteur de la barre mesurée par le script de la page) */
.gestion-wikidata-tableau th {
  position: sticky;
  top: calc(var(--hauteur-entete) + var(--hauteur-selection, 50px));
  z-index: 800;
  background: var(--sombre-carte, #fff);
}

.gestion-wikidata-tableau tr.wd-a-la-main td {
  color: var(--gris3);
}

/* Liste : barre (nombre, pagination, recherche) collée sous l'en-tête du site */
.gestion-interp-liste {
  --hauteur-titre-liste: 0px;
  scroll-margin-top: calc(var(--hauteur-entete) + 10px);
}

/* Menu des filtres : titre du groupe à gauche, ses pastilles à droite (l'un sous l'autre sur petit écran) */
.gestion-interp-filtres {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 14px;
}

.gestion-interp-filtres-titre {
  color: var(--grisoff);
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gestion-interp-filtres .choix-tri {
  justify-self: start;
  gap: 2px;
}

/* Nombre de fiches d'un filtre : pastille discrète dans la pastille */
.choix-tri-nb {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(46, 77, 115, 0.1);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.choix-tri a[aria-current="true"] .choix-tri-nb {
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 700px) {
  .gestion-interp-filtres {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .gestion-interp-filtres-titre:not(:first-child) {
    margin-top: 6px;
  }
}

.gestion-interp-tableau td {
  vertical-align: top;
}

/* Titres des colonnes collés sous la barre (nombre, pagination, recherche), dont la hauteur est mesurée par la page
   (--hauteur-barre-liste) ; sur mobile, le tableau défile de côté et les titres ne restent pas collés */
@media (min-width: 701px) {
  .gestion-interp-liste .st-defilement {
    overflow: visible;
  }

  .gestion-interp-tableau thead th {
    position: sticky;
    top: calc(var(--hauteur-entete) + var(--hauteur-barre-liste, 0px));
    z-index: 4;
    background: var(--sombre-carte, #fff);
    box-shadow: inset 0 -2px var(--bleu4); /* la bordure d'une cellule collée ne suit pas */
  }
}

.gestion-interp-masque td {
  opacity: 0.55;
}

/* Ligne survolée : fond légèrement grisé */
.gestion-interp-tableau tbody tr:hover td {
  background: var(--sombre-doux, #f2f4f7);
}

/* Crayon après le nom : ouvre la fiche à modifier */
.gestion-interp-modifier {
  margin-left: 8px;
  text-decoration: none;
  opacity: 0.6;
}

.gestion-interp-modifier:hover,
.gestion-interp-modifier:focus-visible {
  opacity: 1;
}

/* Badge « Masqué » du tableau : caché (hidden) tant que la fiche est visible, montré quand elle est masquée */
.gestion-interp-badge-masque[hidden] {
  display: none;
}

/* Poubelle (fiches non liées) ou flèche (fiches masquées) après le crayon : masque ou rétablit la fiche */
.gestion-interp-poubelle {
  display: inline;
  margin: 0;
}

.gestion-interp-poubelle button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.gestion-recherches-barre .gestion-interp-action button {
  margin: 0;
}

.gestion-interp-sous {
  display: block;
  font-size: 0.75rem;
  font-weight: normal;
}

@media (max-width: 1100px) {
  .gestion-interp-editeur:has(.gestion-livres-sources) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Chansons d'un interprète (fiche) : disques où figure chaque chanson */
.chanson-disques {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chanson-disques li + li {
  margin-top: 2px;
}

.chanson-detail {
  color: var(--gris3);
}

.chanson-version {
  color: var(--gris3);
  font-size: 0.85rem;
  font-style: italic;
}

/* Fiche interprète, administrateur : cases à cocher du « Voir aussi » pour masquer des fiches */
.interp-selection .interp-coche {
  width: 32px;
  text-align: center;
}

.interp-selection tr.selectionne td {
  background: var(--sombre-rouge, #fdecea);
}

/* Bouton « Supprimer la sélection » dans la barre du titre : caché tant que rien n'est coché (les boutons sont en inline-flex) */
.titre-rubrique-outils [hidden] {
  display: none;
}

/* Petite, pour ne pas grandir la barre du titre (badge de nombre ~25 px) : ~22 px de haut */
.interp-poubelle {
  padding: 3px 7px;
  line-height: 1;
}

.interp-poubelle svg {
  display: block;
}

/* Lignes cliquables (disques, interprètes) : toute la ligne mène au disque ou à la fiche (script.js) */
tr[data-href] {
  cursor: pointer;
}

/* Tablette (entre l'affichage téléphone et l'écran d'ordinateur) : texte plus grand (tailles en rem : +12 %) et
   pochettes des fiches compactes plus grandes */
@media (min-width: 701px) and (max-width: 1100px) {
  html {
    font-size: 18px;
  }

  table.vue-list tr.fiche-compacte,
  table.vue-list tr.ligne-livre {
    grid-template-columns: 80px auto 1fr auto;
  }

  table.vue-list tr.ligne-livre {
    grid-template-columns: 80px auto 1fr;
  }

  .resultats-recherche table.vue-list .pochette-mini {
    width: 80px;
    height: 80px;
    max-width: none;
    max-height: none;
  }

  .resultats-recherche table.vue-list .couverture-mini {
    width: 80px;
    height: 115px;
  }

  /* Accueil : platine à gauche du texte, comme sur ordinateur (en pleine largeur, elle était énorme) */
  .accueil-platine {
    float: left;
    width: 42%;
    max-width: 260px;
    margin: 4px 18px 8px 0;
  }

  .accueil-chiffres {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Derniers disques ajoutés : les 6 sur une ligne (3 par ligne, les pochettes étaient énormes) */
  .accueil-disques {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Fiche d'un disque : pochettes à gauche et informations à droite, coup de cœur et pépite sous les informations ;
     pistes sur une ligne, comme sur ordinateur (icônes d'écoute toujours visibles : pas de survol au doigt) */
  .disque-entete {
    grid-template-columns: minmax(200px, 300px) 1fr;
    gap: 24px;
  }

  .disque-entete > .disque-avis {
    grid-column: 2;
  }

  .disque-pochettes {
    max-width: none;
  }

  .piste {
    grid-template-columns: 44px 1fr auto auto;
  }

  .piste-ecoute {
    grid-column: auto;
  }

  /* Livres et disques en liste : fiches sur deux colonnes (la ligne « afficher la suite » de la recherche prend toute
     la largeur ; les lignes masquées par un filtre ne laissent pas de trou) */
  .resultats-recherche
    table.vue-list:has(tr.ligne-livre, tr.fiche-compacte)
    > tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  .resultats-recherche
    table.vue-list:has(tr.ligne-livre, tr.fiche-compacte)
    > tbody
    > tr {
    margin-bottom: 0;
  }

  .resultats-recherche
    table.vue-list:has(tr.ligne-livre, tr.fiche-compacte)
    > tbody
    > tr.suite-resultats {
    grid-column: 1 / -1;
  }
}

/* Très petit écran : le cadenas d'accès réservé est masqué, le pied de page tient sur une ligne */
@media (max-width: 340px) {
  .sticky-footer .icone-mini {
    display: none;
  }
}

/* Lien des mentions légales dans le pied de page */
.sticky-footer a[href="mentions_legales.php"] {
  color: white;
}

.sticky-footer a[href="mentions_legales.php"]:hover {
  color: var(--hover-color);
}

/* Page des mentions légales */
.mentions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mentions-section {
  padding: 14px 18px 16px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  color: var(--gris4);
  line-height: 1.6;
}

.mentions-section {
  scroll-margin-top: calc(
    var(--hauteur-entete) + var(--hauteur-sommaire, 0px) + 15px
  );
}

.mentions-section h3 {
  margin: 0 0 8px;
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

.mentions-section p + p,
.mentions-section table + p {
  margin-top: 10px;
}

.mentions-choix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
}

.mentions-choix button {
  margin: 0;
}

.mentions-choix-etat {
  font-weight: bold;
}

.mentions-choix-etat[data-choix="1"] {
  color: var(--sombre-texte-vert4, var(--vert4));
}

.mentions-choix-etat[data-choix="0"] {
  color: var(--sombre-texte-rouge4, var(--rouge4));
}

.mentions-choix button[hidden] {
  display: none;
}

.mentions-cookies {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.mentions-cookies th,
.mentions-cookies td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--gris1);
  text-align: left;
  vertical-align: top;
}

.mentions-cookies td:first-child {
  font-family: monospace;
  white-space: nowrap;
}

.mentions-maj {
  text-align: right;
  color: var(--gris3);
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .mentions-section {
    padding: 12px 14px 14px;
  }

  .mentions-cookies td:first-child {
    white-space: normal;
    word-break: break-word;
  }
}

/* Page « Qui suis-je ? » */
.qui {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qui-section {
  padding: 14px 18px 16px;
  background: var(--sombre-carte, #fff);
  border-radius: 12px;
  box-shadow:
    0 4px 18px rgba(44, 62, 80, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  color: var(--gris4);
  line-height: 1.6;
}

.qui-section h3 {
  margin: 0 0 8px;
  color: var(--sombre-texte-primary-color, var(--primary-color));
}

.qui-section p + p {
  margin-top: 10px;
}

/* Photo à gauche, texte à droite */
.qui-presentation {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.qui-photo {
  flex: 0 0 240px;
  margin: 0;
  text-align: center;
}

.qui-photo button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.qui-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.qui-photo figcaption {
  margin-top: 6px;
  color: var(--gris3);
  font-size: 0.85rem;
}

.qui-texte {
  flex: 1;
  min-width: 0;
}

.qui-texte .accueil-chiffres {
  grid-template-columns: repeat(3, 1fr);
  margin: 14px 0 4px;
  padding-top: 0;
}

.qui-discret {
  color: var(--gris3);
  font-size: 0.9rem;
}

.qui-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}

@media (max-width: 600px) {
  .qui-presentation {
    flex-direction: column;
    align-items: stretch;
  }

  .qui-photo {
    flex: none;
    width: 70%;
    margin: 0 auto;
  }
}

/* ===== Traductions de l'interface (gestion_traductions.php) ===== */
.gestion-trad-deepl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

.gestion-trad-filtres form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.gestion-trad-tableau td {
  vertical-align: top;
}

.gestion-trad-fr {
  width: 40%;
}

.gestion-trad-texte {
  display: block;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.gestion-trad-infos {
  font-size: 0.75rem;
  color: var(--gris3);
}

.gestion-trad-en textarea {
  width: 100%;
  min-width: 220px;
  box-sizing: border-box;
  font: inherit;
  resize: vertical;
}

.gestion-trad-ancien {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--gris4);
}

.gestion-trad-actions {
  white-space: nowrap;
}

.gestion-trad-actions button {
  margin: 0 2px 4px 0;
}

.gestion-trad-contenus {
  margin-bottom: 14px;
}

/* Puces alignées sur le titre de la carte */
.gestion-trad-contenus ul {
  margin: 0 0 10px;
  padding-left: 1.1em;
}