@charset "UTF-8";
/*
  mes-concerts : feuille de style commune (décisions 55, 56 et 66).
  Encodage déclaré ci-dessus (et dans l'en-tête de la réponse) : sans lui, un navigateur peut lire « · » et « ê »
  des contenus générés (« · tête d'affiche ») dans un autre encodage et afficher « · tête ».
  Les couleurs sont des variables : le thème clair est la base, le thème sombre la remplace
  quand l'appareil le demande (sauf choix contraire du visiteur) ou quand le visiteur le choisit.
  Contrastes vérifiés : tout texte atteint au moins 4,5:1 sur son fond, dans les deux thèmes.
*/

/* Police Inter, servie par le site. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

/* ---------- Couleurs ---------- */

:root {
  color-scheme: light;
  --fond: #F4F5F1;
  --surface: #FFFFFF;
  --texte: #1A1C1E;
  --texte-doux: #54585E;
  --filet: #D3D6D0;
  --bordure: #767B82;
  --accent: #4A6500;
  --barre: #5E8000;
  --puce: #E4E7DF;
  --terre: #E8EAE3;
  --erreur: #A4231B;
  /* Bouton principal : identique dans les deux thèmes. */
  --bouton-fond: #B8E62E;
  --bouton-texte: #111214;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --fond: #26282B;
    --surface: #1C1E20;
    --texte: #FFFFFF;
    --texte-doux: #C9CCD1;
    --filet: #4A4E54;
    --bordure: #858A92;
    --accent: #B8E62E;
    --barre: #B8E62E;
    --puce: #3A3D42;
    --terre: #33363A;
    --erreur: #FF9C94;
  }
}

:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #26282B;
  --surface: #1C1E20;
  --texte: #FFFFFF;
  --texte-doux: #C9CCD1;
  --filet: #4A4E54;
  --bordure: #858A92;
  --accent: #B8E62E;
  --barre: #B8E62E;
  --puce: #3A3D42;
  --terre: #33363A;
  --erreur: #FF9C94;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Un élément caché par l'attribut hidden le reste, quel que soit son style d'affichage. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

h1 {
  margin: 0;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

h2 {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

img,
svg {
  max-width: 100%;
}

/* Lien d'évitement : visible seulement au clavier. */
.evitement {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-weight: 700;
}

.evitement:focus {
  top: 16px;
}

/* ---------- Mise en page ---------- */

.conteneur {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}

.conteneur--etroit {
  max-width: 860px;
}

main {
  flex: 1 0 auto;
  padding-block: 16px 48px;
}

/* Cible du lien d'évitement : la page défile jusqu'au contenu, sans cadre autour. */
main:focus {
  outline: none;
}

.texte-doux {
  color: var(--texte-doux);
}

/* ---------- En-tête ---------- */

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  padding-block: 20px;
}

.logo {
  padding-block: 8px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--texte);
}

.logo strong {
  font-weight: 800;
  color: var(--accent);
}

.entete__actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.entete__lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--texte);
  text-decoration: none;
}

.entete__lien:hover {
  text-decoration: underline;
}

/* Mes pages dans la barre : en vert, pour ressortir du reste ; soulignées sur la page en cours. */
.entete__lien--espace {
  color: var(--accent);
  font-weight: 700;
}

.entete__espace {
  display: flex;
  gap: 24px;
}

.entete__espace .entete__lien[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.bouton--discret {
  padding: 0 12px;
  border-color: var(--bordure);
  background: transparent;
  color: var(--texte);
  font-weight: 400;
}

.bouton svg {
  flex: none;
}

/* Le bouton de thème n'a de sens qu'avec JavaScript : le script le révèle. */
.bouton-theme[hidden] {
  display: none;
}

/* Bouton fait d'une icône seule, carré de 44 px pour le doigt. */
.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--texte);
  font: inherit;
  cursor: pointer;
}

.bouton-icone:hover {
  border-color: var(--bordure);
}

/* L'icône montre le thème vers lequel le bouton fait passer. */
.bouton-theme[data-vers="clair"] .bouton-theme__lune,
.bouton-theme:not([data-vers="clair"]) .bouton-theme__soleil {
  display: none;
}

/* Infobulle : le nom du bouton, au survol et au clavier (pas seulement l'attribut title, absent au clavier).
   Alignée sur le bord droit du bouton : placé à droite de l'en-tête, il ne fait pas déborder la page. */
.infobulle {
  position: relative;
}

.infobulle::after {
  content: attr(data-infobulle);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--texte);
  color: var(--fond);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s 0.3s;
}

.infobulle:hover::after,
.infobulle:focus-visible::after {
  opacity: 1;
}

/* ---------- Menu du compte ---------- */

.profil {
  position: relative;
}

.profil__bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border-radius: 22px;
  color: var(--texte);
  cursor: pointer;
  list-style: none;
}

.profil__bouton::-webkit-details-marker {
  display: none;
}

.profil__bouton:hover .profil__nom {
  text-decoration: underline;
}

.profil__initiales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.profil__nom {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.profil__chevron {
  transition: transform 0.15s;
}

.profil[open] .profil__chevron {
  transform: rotate(180deg);
}

.profil__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(260px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--filet);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}

.profil__menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profil__menu a,
.profil__menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--texte);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.profil__menu a:hover,
.profil__menu button:hover {
  background: var(--puce);
}

.profil__menu form {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--filet);
}

/* Sur téléphone : la loupe et les initiales seules, les mots restent lus par les lecteurs d'écran. */
@media (max-width: 640px) {
  .entete {
    gap: 12px;
  }

  .entete__actions {
    gap: 4px;
  }

  /* Pas la place dans la barre : ces liens restent dans le menu du compte. */
  .entete__espace {
    display: none;
  }

  .entete__icone {
    justify-content: center;
    min-width: 44px;
  }

  .entete__texte,
  .profil__nom {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Fiches : concert, lieu, groupe ---------- */

.ariane {
  margin-bottom: 24px;
  font-size: 15px;
  color: var(--texte-doux);
}

.ariane ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.ariane li:not(:last-child)::after {
  /* Séparateur visuel seulement : rien n'est lu par les lecteurs d'écran. */
  content: "›";
  content: "›" / "";
  margin-left: 8px;
}

.ariane a {
  display: inline-block;
  padding-block: 8px;
  color: var(--texte-doux);
}

.ariane [aria-current] {
  padding-block: 8px;
}

.surtitre {
  margin: 0 0 6px;
  font-weight: 500;
  color: var(--accent);
}

.sous-titre {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 20px;
}

.bloc {
  margin-top: 40px;
}

.vide {
  margin: 0;
  color: var(--texte-doux);
}

/* Liste en lignes séparées par un filet. */
.lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--filet);
}

.lignes > li {
  border-top: 1px solid var(--filet);
}

.ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding-block: 12px;
  color: var(--texte);
  text-decoration: none;
}

.ligne:hover .ligne__titre {
  text-decoration: underline;
}

.ligne--etalee {
  justify-content: space-between;
  gap: 4px 16px;
}

.ligne__date {
  flex: 0 0 140px;
  color: var(--texte-doux);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Sur téléphone, la date passe au-dessus du titre : toute la largeur, pour ne pas se couper. */
@media (max-width: 640px) {
  .ligne__date {
    flex-basis: 100%;
  }
}

.ligne__corps {
  flex: 1 1 300px;
}

.ligne__titre {
  font-size: 20px;
  font-weight: 700;
}

.ligne__detail {
  color: var(--texte-doux);
}

.ligne__detail--bloc {
  display: block;
}

/* Étiquette (type de lieu) et puces (groupes). */
.etiquette {
  padding: 2px 10px;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}

.puces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.puces a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--filet);
  border-radius: 20px;
  color: var(--texte);
  text-decoration: none;
}

.puces a:hover {
  border-color: var(--bordure);
}

/* ---------- Recherche ---------- */

.recherche {
  margin-top: 24px;
}

.recherche label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

.recherche__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.recherche input {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
}

.recherche__aide {
  margin: 6px 0 0;
  font-size: 14px;
}

.recherche__bilan {
  margin: 32px 0 0;
  font-weight: 500;
}

/* ---------- Formulaires et connexion ---------- */

.page-etroite {
  max-width: 480px;
  padding-top: 32px;
}

.page-etroite h1 {
  margin-bottom: 8px;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.chapo {
  margin: 0 0 24px;
  color: var(--texte-doux);
}

.chapo strong {
  color: var(--texte);
}

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.formulaire label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

.champ {
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
}

.champ--code {
  min-height: 52px;
  font-size: 24px;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}

.champ[aria-invalid="true"] {
  border-color: var(--erreur);
  border-width: 2px;
}

.aide {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--texte-doux);
}

.erreur {
  display: block;
  margin: 6px 0 0;
  font-weight: 500;
  color: var(--erreur);
}

.erreur:empty {
  display: none;
}

.bouton--large {
  justify-content: center;
  min-height: 48px;
}

.lien-bouton {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.actions-secondaires {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 16px;
}

.actions-secondaires a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-weight: 700;
}

.note {
  margin: 24px 0 0;
  color: var(--texte-doux);
}

.entete__actions form {
  margin: 0;
}

/* ---------- Affiche d'un concert (section 4.19) ---------- */

/* Les informations, puis l'affiche : à droite sur ordinateur, au-dessus quand la place manque. */
.fiche-affiche {
  display: flex;
  flex-wrap: wrap-reverse;
  /* Avec wrap-reverse, « flex-end » aligne en haut. */
  align-items: flex-end;
  gap: 32px 56px;
}

.fiche-affiche__infos {
  flex: 999 1 480px;
  min-width: 0;
}

.fiche-affiche__image {
  flex: 1 1 260px;
  max-width: 360px;
  margin: 0;
}

.fiche-affiche__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--surface);
}

/* Sur un petit écran, l'affiche reste assez petite pour laisser voir le titre du concert. */
@media (max-width: 640px) {
  .fiche-affiche__image {
    flex-basis: 100%;
    max-width: 220px;
  }
}

.champ--fichier {
  padding: 8px;
  border-style: dashed;
  cursor: pointer;
}

/* ---------- Saisie d'un concert ---------- */

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

.message {
  margin: 24px 0 0;
  padding: 16px 20px;
  border-radius: 8px;
  border-left: 4px solid var(--accent);
  background: var(--surface);
}

.message p {
  margin: 0;
}

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

.message--erreur {
  border-left-color: var(--erreur);
}

.combo {
  position: relative;
}

/* Les étiquettes des groupes choisis ; la première est la tête d'affiche. */
.choisis {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choisis:empty {
  display: none;
}

.choisis li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 4px 0 14px;
  border-radius: 20px;
  background: var(--puce);
}

/* Le nom et ses mentions forment une seule ligne de texte : « tête d'affiche » et « nouveau » restent alignés. */
.choisis li:first-child .choisis__nom > span:first-child::after,
.choisis__note {
  font-size: 13px;
  color: var(--texte-doux);
}

.choisis li:first-child .choisis__nom > span:first-child::after {
  content: " · tête d'affiche";
}

.choisis__note::before {
  content: " · ";
}

.choisis__retirer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.choisis__retirer:hover {
  background: var(--surface);
}

.suggestions {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  max-height: 320px;
  margin: 4px 0 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

.suggestions__option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline; /* Le nom, plus grand, et la ville sur la même ligne de base. */
  gap: 2px 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.suggestions__option[aria-selected="true"],
.suggestions__option:hover {
  background: var(--puce);
}

.suggestions__option[aria-selected="true"] {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.suggestions__libelle {
  font-weight: 700;
}

.suggestions__detail {
  font-size: 14px;
  color: var(--texte-doux);
}

.suggestions__etiquettes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.suggestions__etiquettes .etiquette {
  font-size: 13px;
  font-weight: 400;
}

.suggestions__option--nouveau {
  border-top: 1px solid var(--filet);
  font-weight: 700;
  color: var(--accent);
}

.lieu-choisi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-height: 44px;
  padding: 4px 14px;
  border: 1px solid var(--filet);
  border-radius: 6px;
  font-weight: 500;
}

.nouveau-lieu {
  margin: 8px 0 0;
  padding: 16px 20px 8px;
  border: 1px solid var(--filet);
  border-radius: 8px;
}

.nouveau-lieu legend {
  padding: 0 6px;
  font-weight: 700;
}

/* Champs côte à côte, alignés sur leur zone de saisie même si un libellé passe sur deux lignes (section 4.16). */
.champs-cote-a-cote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  column-gap: 16px;
  /* Pas d'écart entre les lignes partagées (libellé, champ, aide, erreur) ; chaque champ garde sa marge. */
  row-gap: 0;
  align-items: start;
}

.champs-cote-a-cote > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  align-content: start;
  padding-bottom: 12px;
}

.champs-cote-a-cote label {
  align-self: end;
}

/* Dans cette grille, une liste en position absolue partirait du haut du bloc et recouvrirait le libellé et le champ :
   placée sur la ligne de l'aide, elle s'ouvre juste sous le champ (styles d'un nouveau groupe). */
.champs-cote-a-cote .suggestions {
  grid-row: 3;
  top: 0;
}

select.champ {
  appearance: auto;
}

textarea.champ {
  resize: vertical;
}

/* ---------- Accueil ---------- */

.accroche {
  max-width: 760px;
  padding-top: 40px;
}

.accroche h1 {
  font-size: clamp(40px, 7vw, 80px);
}

.accroche p {
  margin: 24px 0 0;
  max-width: 620px;
  font-size: 20px;
  color: var(--texte-doux);
}

.accroche .accroche__collectif {
  margin-top: 12px;
  font-size: 18px;
}

.accroche__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 32px;
}

.bouton--grand {
  min-height: 52px;
  padding: 0 24px;
  font-size: 18px;
}

.atouts {
  list-style: none;
  margin: 72px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.atouts > li {
  padding: 24px;
  border-radius: 8px;
  background: var(--surface);
}

.atouts h2 {
  margin: 16px 0 4px;
  font-size: 22px;
}

.atouts p {
  margin: 0;
  color: var(--texte-doux);
}

.atout__dessin {
  display: flex;
  height: 96px;
}

.atout__dessin--liste {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.atout__annee {
  display: flex;
  gap: 12px;
}

.atout__annee strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.atout__annee span {
  height: 10px;
  border-radius: 5px;
  background: var(--filet);
}

.atout__annee:nth-child(1) span { width: 55%; }
.atout__annee:nth-child(2) span { width: 40%; }

.atout__dessin--barres {
  align-items: flex-end;
  gap: 6px;
}

.atout__dessin--barres span {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--barre);
}

.atout__dessin--barres span:nth-child(1) { height: 30%; }
.atout__dessin--barres span:nth-child(2) { height: 55%; }
.atout__dessin--barres span:nth-child(3) { height: 90%; }
.atout__dessin--barres span:nth-child(4) { height: 75%; }
.atout__dessin--barres span:nth-child(5) { height: 45%; }
.atout__dessin--barres span:nth-child(6) { height: 100%; }

.atout__dessin--carte {
  display: block;
  width: 100%;
  fill: var(--barre);
}

/* ---------- Pied de page ---------- */

.pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding-block: 12px 24px;
  color: var(--texte-doux);
  font-size: 14px;
}

.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

/* Zone de 24 px au moins pour le doigt et le pointeur. */
.pied__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: inherit;
}

.pied__liens a:hover {
  color: var(--texte);
}

/* Mentions légales et confidentialité : un texte suivi, aéré entre les parties. */
.texte-legal h2 {
  margin-top: 32px;
}

.texte-legal li + li {
  margin-top: 6px;
}

/* Une information légale pas encore fournie : bien visible, pour ne pas mettre le site en ligne sans elle. */
.a-completer {
  padding: 0 4px;
  border: 1px dashed var(--erreur);
  border-radius: 4px;
  background: transparent;
  color: var(--erreur);
  font-weight: 700;
}

/* ---------- Préférences de l'appareil ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Correction des fiches par l'admin (bloc 5d). */
.groupe-champs {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--filet);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.groupe-champs legend {
  padding: 0 6px;
  font-weight: 700;
}

.vignette-affiche {
  width: 120px;
  height: auto;
  border-radius: 6px;
}

.formulaire label.case {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
}

.case input {
  flex: none;
  width: 24px;
  height: 24px;
  accent-color: var(--accent);
}

.lien-admin {
  margin: 40px 0 0;
  font-weight: 500;
}

/* Supprimer un lieu ou un groupe créé par erreur : à l'écart du formulaire, sous un filet. */
.suppression {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--filet);
}

.suppression h2 {
  font-size: 20px;
}

.suppression__confirmation > summary {
  list-style: none;
}

.suppression__confirmation > summary::-webkit-details-marker {
  display: none;
}

.suppression__confirmation form {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: 16px;
}

.suppression__confirmation form p {
  margin: 0;
}

/* Journal des modifications. */
.journal {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.journal__ligne {
  padding: 16px 0;
  border-top: 1px solid var(--filet);
}

.journal__entete {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-weight: 600;
}

.journal__action {
  font-size: 14px;
  color: var(--texte-doux);
}

.journal__quand {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--texte-doux);
}

.journal__changements {
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}

.journal__changements div {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
  gap: 0 12px;
}

.journal__changements dt {
  color: var(--texte-doux);
}

.journal__changements dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.journal del {
  color: var(--texte-doux);
}

.journal ins {
  text-decoration: none;
  font-weight: 500;
}

@media (max-width: 480px) {
  .journal__changements div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.formulaire.bloc {
  margin-top: 32px;
}

/* ---------- Mes concerts (section 4.17) ---------- */

.annees {
  margin-top: 24px;
}

/* Le titre de l'année reste sous l'en-tête quand on y saute depuis la liste des années. */
.annee {
  scroll-margin-top: 16px;
}

.annee__nombre {
  margin-left: 8px;
  color: var(--texte-doux);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

/* Vue par année : l'année est dans le titre de la section, la date n'en garde que le jour et le mois. */
.ligne__annee {
  display: none;
}

/* Bouton de la vue, au-dessus de la liste, à droite : « Vue compacte » en vue par année, « Vue par année » en vue
   compacte. */
.liste__outils {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.bouton-vue[hidden] {
  display: none;
}

.bouton-vue__compacte,
.bouton-vue__annees {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bouton-vue__annees,
:root[data-vue-liste="compacte"] .bouton-vue__compacte {
  display: none;
}

:root[data-vue-liste="compacte"] .bouton-vue__annees {
  display: inline-flex;
}

/* Filtres d'années de la vue compacte, à la place des liens vers les années : mêmes puces, la choisie pleine. */
.annees-filtre {
  display: none;
}

:root[data-vue-liste="compacte"] .annees-filtre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.annees-filtre__choix {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--filet);
  border-radius: 20px;
  background: transparent;
  color: var(--texte);
  font: inherit;
  cursor: pointer;
}

.annees-filtre__choix:hover {
  border-color: var(--bordure);
}

.annees-filtre__choix[aria-pressed="true"] {
  border-color: var(--bouton-fond);
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-weight: 700;
}

.annee[hidden] {
  display: none;
}

/* Vue compacte (vue-liste.js) : une seule liste, sans titres ni puces d'années ; chaque date en entier, sur une ligne ;
   lignes resserrées, le lieu à la suite des groupes. */
:root[data-vue-liste="compacte"] .annees,
:root[data-vue-liste="compacte"] .annee > h2 {
  display: none;
}

:root[data-vue-liste="compacte"] .annee {
  margin-top: 0;
}

:root[data-vue-liste="compacte"] .annee:first-of-type {
  margin-top: 24px;
}

:root[data-vue-liste="compacte"] .annee .lignes {
  border-bottom: 0;
}

:root[data-vue-liste="compacte"] .annee:last-of-type .lignes {
  border-bottom: 1px solid var(--filet);
}

/* Une année choisie dans les filtres : seule à l'écran, elle prend l'espace et le filet de fin d'une liste entière. */
:root[data-vue-liste="compacte"] [data-annee-choisie] .annee {
  margin-top: 24px;
}

:root[data-vue-liste="compacte"] [data-annee-choisie] .annee .lignes {
  border-bottom: 1px solid var(--filet);
}

:root[data-vue-liste="compacte"] .ligne__annee {
  display: inline;
}

:root[data-vue-liste="compacte"] .ma-ligne .ligne__date {
  white-space: nowrap;
}

:root[data-vue-liste="compacte"] .ma-ligne > .ligne {
  padding-block: 8px;
}

:root[data-vue-liste="compacte"] .ma-ligne .ligne__titre {
  font-size: 18px;
}

:root[data-vue-liste="compacte"] .ma-ligne .ligne__detail--bloc {
  display: inline;
}

/* Séparateur décoratif, tu par les lecteurs d'écran (texte de remplacement vide). */
:root[data-vue-liste="compacte"] .ma-ligne .ligne__detail--bloc::before {
  content: "· ";
  content: "· " / "";
}

/* Sur ordinateur, une colonne de dates assez large pour la plus longue (« 30 septembre 2026 ») ; sur téléphone, la
   date reste seule sur sa ligne, à côté des icônes. */
@media (min-width: 641px) {
  :root[data-vue-liste="compacte"] .ma-ligne .ligne__date {
    flex-basis: 160px;
  }

  :root[data-vue-liste="compacte"] .ligne__commentaire,
  :root[data-vue-liste="compacte"] .ligne__action[open],
  :root[data-vue-liste="compacte"] .ligne__message {
    margin-left: 184px;
  }
}

/* Mon commentaire, sous le concert, aligné sur le nom du groupe ; les retours à la ligne sont gardés. */
.ligne__commentaire {
  margin: -4px 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--barre);
  color: var(--texte-doux);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media (min-width: 641px) {
  .ligne__commentaire {
    margin-left: 164px;
  }
}

/* En bout de chaque concert de ma liste : un crayon (mon commentaire) et une poubelle (le retrait). Les deux icônes
   restent en haut à droite de la ligne ; le formulaire de celle qu'on ouvre se déplie sous le concert. */
.ma-ligne {
  position: relative;
  scroll-margin-top: 16px;
}

.ligne__action > summary {
  position: absolute;
  top: 4px;
  right: 0;
  color: var(--texte-doux);
  list-style: none;
}

.ligne__action--crayon > summary {
  right: 48px;
}

.ligne__action > summary::-webkit-details-marker {
  display: none;
}

.ligne__action > summary:hover,
.ligne__action[open] > summary {
  color: var(--texte);
}

.ligne__action[open] > summary {
  border-color: var(--bordure);
  background: var(--surface);
}

.ligne__action[open] {
  margin-bottom: 16px;
}

.ligne__action form {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin: 0;
}

.ligne__action textarea {
  width: 100%;
}

.ligne__retrait .aide {
  margin: 0;
}

.ligne__question {
  display: block;
  color: var(--texte);
}

.ligne__message {
  margin: 0 0 12px;
  padding: 10px 16px;
}

/* Sur téléphone, la date est seule sur sa ligne : les icônes se placent à côté, le groupe passe dessous. */
@media (max-width: 640px) {
  .ma-ligne .ligne__date {
    min-height: 36px;
  }
}

@media (min-width: 641px) {
  .ligne__action[open],
  .ligne__message {
    margin-left: 164px;
  }

  /* Les icônes se placent à droite de la ligne, qui leur laisse la place. */
  .ma-ligne > .ligne {
    padding-right: 104px;
  }
}

/* En haut de Mes concerts : la recherche et, à droite, l'encart de création ; l'un sous l'autre quand la place manque. */
.ajout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 48px;
  align-items: start;
  margin-top: 32px;
}

/* Sur ordinateur : recherche puis ma liste à gauche, encart de création à droite sur toute la hauteur. Sur téléphone,
   dans l'ordre de la page : recherche, encart, liste. */
@media (min-width: 960px) {
  .ajout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    /* La place en trop va à la liste, jamais entre la recherche et la liste. */
    grid-template-rows: auto 1fr;
  }

  .ajout__recherche,
  .ajout__liste {
    grid-column: 1;
  }

  .encart {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.ajout__recherche h2,
.encart h2 {
  font-size: 22px;
}

/* L'écart de la grille sépare déjà la liste de la recherche. */
.ajout__liste > :first-child {
  margin-top: 0;
}

/* Le défilement vers la recherche, l'encart ou ma liste garde un peu d'air au-dessus. */
.ajout__recherche,
.ajout__liste,
.encart {
  scroll-margin-top: 16px;
}

/* Filtre de ma liste, au-dessus des années ; son résultat (« 3 concerts sur 17 ») vient juste dessous. */
.filtre .aide {
  margin-bottom: 0;
}

/* Champ et bouton sur une ligne ; le bouton passe dessous sur un écran étroit. */
.champ-bouton {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.champ-bouton .champ {
  flex: 1 1 220px;
  min-width: 0;
}

.resultats__nombre {
  margin: 16px 0 8px;
  color: var(--texte-doux);
}

.resultats-vide {
  margin-top: 16px;
}

.resultats-vide p {
  margin: 0 0 4px;
}

.resultat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-block: 12px;
}

.resultat__corps {
  flex: 1 1 260px;
  min-width: 0;
}

/* Le concert trouvé mène à sa fiche : même allure qu'une ligne de ma liste, titre souligné au survol. */
.resultat__lien {
  color: var(--texte);
  text-decoration: none;
}

.resultat__lien:hover .ligne__titre {
  text-decoration: underline;
}

.resultat__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resultat__corriger {
  color: var(--texte-doux);
}

.resultat__corriger:hover {
  color: var(--texte);
}

.resultat__etat {
  white-space: nowrap;
}

.resultat form {
  margin: 0;
}

.bouton--petit {
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
  white-space: nowrap;
}

/* Encart « Créer un concert » : fond de carte ; ses messages reprennent le fond de la page pour s'en détacher. */
.encart {
  padding: 24px;
  border-radius: 8px;
  background: var(--surface);
}

.encart h2 {
  margin-bottom: 4px;
}

.encart__aide {
  margin: 0 0 16px;
  color: var(--texte-doux);
}

.encart .message {
  margin: 0 0 16px;
  background: var(--fond);
}

.encart .champ {
  background: var(--fond);
}

.encart__formulaire > summary {
  list-style: none;
}

.encart__formulaire > summary::-webkit-details-marker {
  display: none;
}

/* Déplié, le formulaire prend la place du bouton qui l'ouvre. */
.encart__formulaire[open] > summary {
  display: none;
}

.encart .lien-admin {
  margin-top: 16px;
}

.ajout + .annees,
.ajout ~ .note {
  margin-top: 40px;
}

/* ---------- Mes stats (section 4.17) ---------- */

/* Barres horizontales : le nom (lien vers ma liste filtrée), la barre, la valeur écrite. Une seule couleur, celle des
   dessins de l'accueil ; les textes gardent les couleurs du texte. */
.barres {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.barres__ligne {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 1fr) 6.5em;
  align-items: center;
  gap: 0 12px;
  border-top: 1px solid var(--filet);
}

.barres__ligne:last-child {
  border-bottom: 1px solid var(--filet);
}

.barres--noms .barres__ligne {
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 4em;
}

.barres__nom {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.barres__detail {
  color: var(--texte-doux);
  font-weight: 400;
}

.barres__barre {
  display: block;
  width: 100%;
  height: 12px;
  fill: var(--barre);
}

.barres__valeur {
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sur téléphone, le nom d'un groupe ou d'un lieu prend sa ligne ; la barre et la valeur viennent dessous. */
@media (max-width: 640px) {
  .barres--noms .barres__ligne {
    grid-template-columns: minmax(0, 1fr) 4em;
    padding-bottom: 10px;
  }

  .barres--noms .barres__nom {
    grid-column: 1 / -1;
  }
}

.stats + .note {
  margin-top: 32px;
}

/* ---------- Ma carte (section 4.17, décision 97) ---------- */

/* Le titre et le choix du groupe sur une ligne ; le choix passe dessous sur un écran étroit. */
.carte-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
}

.carte-entete .chapo {
  margin-bottom: 0;
}

.carte-choix {
  flex: 0 1 380px;
  min-width: 0;
}

.carte-choix label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

/* La carte et la liste côte à côte ; la liste passe sous la carte quand la place manque. */
.carte {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 40px;
  margin-top: 24px;
}

.carte__dessin {
  position: relative;
  flex: 999 1 560px;
  min-width: 0;
  margin: 0;
}

.carte__dessin svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.carte__dessin .note {
  margin-top: 8px;
  font-size: 14px;
}

.carte__mer {
  fill: var(--surface);
}

.carte__pays {
  fill: var(--terre);
  stroke: var(--filet);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.carte__point {
  fill: var(--barre);
  stroke: var(--surface);
  stroke-width: 2;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.15s, fill 0.15s;
}

.carte__point--estompe,
.carte__ville--estompe {
  opacity: 0.2;
}

/* Le point du lieu survolé (sur la carte ou dans la liste) : plus gros, de la couleur du texte cerclée de vert, et
   pleinement visible même s'il était estompé. */
.carte__point--actif {
  fill: var(--texte);
  stroke: var(--barre);
  stroke-width: 3;
  opacity: 1;
  transform: scale(1.5);
}

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

/* Fiche du lieu survolé, au-dessus de son point (placée par carte.js). */
.carte__fiche {
  position: absolute;
  z-index: 2;
  width: max-content;
  max-width: min(280px, 100%);
  padding: 10px 14px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: var(--surface);
  color: var(--texte);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  line-height: 1.4;
}

.carte__fiche p {
  margin: 0;
}

.carte__fiche-nom {
  font-weight: 700;
}

.carte__fiche-ville,
.carte__fiche-precision {
  color: var(--texte-doux);
  font-size: 14px;
}

.carte__fiche-nombre {
  margin-top: 4px;
  font-weight: 500;
}

.carte__fiche-lien {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
}

/* Les noms de villes gardent un liseré de la couleur de la mer, pour rester lisibles sur une frontière. */
.carte__ville {
  fill: var(--texte);
  font-size: 26px; /* MapDrawing.LabelSize : le placement des noms en dépend. */
  font-weight: 500;
  stroke: var(--surface);
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;
}

.carte__lieux {
  flex: 1 1 300px;
  min-width: 0;
}

.carte__lieux h2 {
  margin-top: 0;
}

/* Les lignes débordent de 8 px de chaque côté : leur fond vert a de l'air, et le texte reste aligné sur le titre. */
.carte__liste {
  list-style: none;
  margin: 0 -8px;
  padding: 0;
}

.carte__liste li {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding-inline: 8px;
  border-top: 1px solid var(--filet);
}

.carte__liste li:last-child {
  border-bottom: 1px solid var(--filet);
}

/* Sans soulignement : une liste de liens, pas des liens dans un texte. Toute la ligne est cliquable. */
.carte__liste a {
  overflow-wrap: anywhere;
  text-decoration: none;
}

.carte__liste a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Le lieu survolé (dans la liste ou sur la carte) : la ligne passe au vert, mêmes couleurs dans les deux thèmes. */
.carte__liste li:hover,
.carte__ligne--active {
  background: var(--bouton-fond);
  color: var(--bouton-texte);
}

.carte__liste li:hover .carte__nombre,
.carte__ligne--active .carte__nombre {
  color: var(--bouton-texte);
}

.carte__ligne--active a:focus-visible {
  outline-color: var(--bouton-texte);
}

.carte__nombre {
  flex: none;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.carte + .note {
  margin-top: 32px;
}

/* ---------- Bandeau de la base locale (développement seulement) ---------- */

/* Rappelle sur ce poste quelle base reçoit la saisie : données fictives, ou mes vraies données. */
.bandeau-base {
  margin: 0;
  padding: 4px 16px;
  background: var(--puce);
  color: var(--texte);
  font-size: 14px;
  text-align: center;
}

.bandeau-base--perso {
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-weight: 700;
}

/* Pays et styles d'un nouveau groupe, sous les groupes choisis (décision 83). */
.nouveau-groupe {
  margin: 0 0 16px;
  padding: 16px 20px 4px;
  border: 1px solid var(--filet);
  border-radius: 8px;
}

.nouveau-groupe legend {
  padding: 0 6px;
  font-weight: 700;
}