/* ============================================================================
   Fée Moi Une Place — feuille de style publique
   Palette violet/or alignée sur le logo final (variante douceur) : ombres
   diffuses légères, aucune bordure encre/noire sur cartes ou boutons ; bordure
   fine réservée aux champs et tableaux. Couleurs/polices : design/tokens.css.
   ========================================================================== */

@import url('/design/tokens.css');

/* CACHE VEUT DIRE CACHE.
   Le navigateur applique « [hidden] { display: none } » au niveau le plus bas :
   la moindre regle de cette feuille le bat. Nos formulaires posent par exemple
   « .form-orga label { display: block } », et un <label hidden> restait donc
   affiche — champ fantome, et parfois blocage silencieux de l'envoi quand ce
   champ porte une contrainte. Onze rustines ponctuelles avaient ete ecrites au
   fil des rencontres ; cette regle-ci les rend inutiles et previent la suivante. */
[hidden] { display: none !important; }

:root {
  /* Couleurs des badges de disponibilité (charte, section 6). */
  --badge-dispo-bg: #E3F5EC;
  --badge-faible-bg: #FBEECF;
  --badge-faible-tx: #8A5A00;
  --badge-complet-bg: #FDEBE6;
  /* État désactivé (charte, section 5). */
  --desactive-bg: #EDE3E9;
  --desactive-tx: #948699;
  /* Survol : élévation des cartes et halo renforcé des boutons. */
  --ombre-carte-survol: 0 8px 24px rgba(36, 20, 54, 0.12);
  --ombre-bouton-survol: 0 6px 20px rgba(196, 24, 143, 0.45);
  /* Échelle typographique (mobile d'abord, cf. AUDIT-ESTHETIQUE.md).
     Les valeurs desktop sont reprises plus bas dans une requête média. */
  --t-affiche: 34px;   /* hero du site public */
  --t-titre:   27px;   /* titre de page */
  --t-section: 21px;   /* titre de section */
  --t-sous:    17px;   /* sous-titre, titre de carte */
  --t-texte:   16px;   /* texte courant */
  --t-second:  14.5px; /* texte secondaire */
  --t-meta:    13px;   /* dates, lieux, métadonnées */
  --t-mention: 12px;   /* mentions légales, plancher absolu */
  --t-prix:    22px;
  --t-chiffre: 26px;
  /* Espace organisateur : ligne de tableau alternée (charte admin §6). */
  --ligne-alternee: #FDF4FA;
}

@media (min-width: 760px) {
  :root {
    --t-affiche: 56px; --t-titre: 38px; --t-section: 24px; --t-sous: 18px;
    --t-texte: 17px; --t-second: 15px; --t-prix: 26px; --t-chiffre: 30px;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-texte);
  font-size: var(--t-texte);
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
}

.conteneur { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 24px; }

a { color: var(--violet); }
a:hover { color: var(--violet-fonce); }

h1, h2, h3 { font-family: var(--font-titres); }
h1 { font-weight: 800; font-size: var(--t-titre); line-height: 1.12; letter-spacing: -0.01em; margin: 24px 0 16px; }
h2 { font-weight: 800; font-size: var(--t-section); line-height: 1.25; letter-spacing: -0.005em; margin: 0 0 12px; }
h3 { font-weight: 700; font-size: var(--t-sous); line-height: 1.3; }

/* Site public : les deux plus grands niveaux passent en Young Serif. L'espace
   organisateur et l'admin restent en Figtree, plus sobres (charte §6). */
body:not(.espace-body):not(.admin-body) h1,
.carte__titre, .fiche__titre-haut h1 {
  font-family: var(--font-affiche); font-weight: 400; letter-spacing: 0;
}
body:not(.espace-body):not(.admin-body) .page-titre { font-size: var(--t-affiche); line-height: 1.06; }

/* Les chiffres ne dansent plus d'une ligne à l'autre. */
.stat-valeur, .dash-tuile__v, .compta-chiffre__val, .compta-recap__val,
.carte__prix, .tarif__prix, .prix, .montant, .cg-total__v, td.num, .num {
  font-variant-numeric: tabular-nums;
}
.page-titre { margin-top: 40px; }

/* Focus clavier visible (accessibilité). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--action-pale);
}

/* ---- En-tête ------------------------------------------------------------ */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--fond);
  border-bottom: 1px solid var(--violet-pale);
}
.entete__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
}
.logo { display: inline-flex; }
.logo img { height: 66px; width: auto; max-width: 70vw; display: block; }
/* Logo téléversé par l'organisateur (dimensions variables) : hauteur maîtrisée,
   largeur bornée pour qu'un logo large ne mange pas l'entête. */
.logo--orga img { height: 52px; max-width: 240px; object-fit: contain; }
/* Organisateur sans logo : médaillon d'initiales (dans SA couleur) + nom. */
.logo--orga-nom { align-items: center; gap: 12px; text-decoration: none; }
.logo-orga__mono {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
  background: var(--action); color: var(--action-contraste, #fff);
  display: grid; place-items: center;
  font-family: var(--font-affiche); font-weight: 400; font-size: 20px; line-height: 1;
  box-shadow: var(--ombre-bouton);
}
.logo-orga__nom {
  font-family: var(--font-texte); font-weight: 700; font-size: 18px;
  color: var(--encre); line-height: 1.15; max-width: 260px;
}
@media (max-width: 640px) {
  .logo-orga__mono { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
  .logo-orga__nom { font-size: 16px; max-width: 180px; }
}
.nav a {
  margin-left: 24px; text-decoration: none; color: var(--encre);
  font-weight: 600; font-size: 15px;
}
.nav a:hover { color: var(--violet); }
/* Abonnement de saison surfacé dans le header de la boutique de l'organisateur :
   pastille discrète à sa couleur d'accent, pour se distinguer sans crier. */
.nav a.nav__abo { border: 1.5px solid var(--action); border-radius: 999px; padding: 6px 14px; color: var(--action); }
.nav a.nav__abo:hover { background: var(--action); color: var(--action-contraste, #fff); }
/* Accès « pro » dans le header : bouton discret pour la connexion organisateur. */
.nav a.nav__connexion { border: 1.5px solid var(--violet-pale); border-radius: var(--rayon-petit); padding: 7px 14px; color: var(--violet); }
.nav a.nav__connexion:hover { background: var(--action); color: #fff; border-color: var(--action); }

/* Mobile : le logo à 66 px et la navigation sur la même ligne se chevauchaient.
   Le lien « Spectacles » fait doublon avec le logo, qui ramène à l'accueil.
   Ce masquage visait `href="/"`, mais le lien pointe vers `/spectacles` : la
   règle ne s'appliquait donc à rien. Sur la boutique d'un organisateur, où
   l'entête porte son NOM et plus un logo, les trois éléments ne tenaient pas
   sur 375 px : « Fée moirire productions » passait sur deux lignes ET
   « Mes billets » se coupait en « Mes » / « billets ». C'est le premier écran
   d'un acheteur venu d'Instagram. */
@media (max-width: 640px) {
  .entete__inner { padding: 10px 16px; gap: 12px; }
  .logo img { height: 44px; }
  .nav a { margin-left: 12px; font-size: 14px; }
  /* Un libellé de navigation ne se casse jamais en deux. */
  .nav a { white-space: nowrap; }
  .nav { flex: 0 0 auto; }
  .nav a.nav__connexion { padding: 6px 12px; white-space: nowrap; }
  /* CE QU'ON SACRIFIE QUAND ÇA NE TIENT PAS. Sur la boutique d'un organisateur,
     le médaillon + son nom + deux liens ne tiennent pas sur 375 px. J'avais
     d'abord masqué « Spectacles » — c'était le mauvais choix : sur une fiche
     spectacle, ce lien est le SEUL chemin de retour vers le catalogue pour un
     acheteur, et Val s'est retrouvée sans issue (2026-08-28).
     On masque donc le NOM de l'organisateur et on garde le médaillon : le nom
     est déjà écrit juste en dessous du titre (« par Fée moirire productions »),
     alors que le retour, lui, n'existe nulle part ailleurs. */
  .logo--orga-nom { min-width: 0; }
  .logo--orga-nom .logo-orga__nom { display: none; }
}

/* ---- Hero (accueil) ----------------------------------------------------- */
.hero {
  margin: 24px 0 32px; padding: 40px 32px;
  background: var(--carte); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce); position: relative; overflow: hidden;
}
.hero__label {
  display: inline-block; background: var(--or); color: var(--encre);
  font-weight: 700; font-size: 13px; padding: 5px 14px; border-radius: 999px;
  margin-bottom: 14px;
}
.hero h1 { margin: 0 0 8px; }
.hero h1 .accent { color: var(--violet); }
.hero p { margin: 0; font-size: 1.15rem; color: var(--encre-douce); max-width: 50ch; }

/* Variante : le logo en bandeau (à la place du titre texte) */
.hero--logo { text-align: center; padding: 40px 32px; }
.hero__logo { margin: 0; }
.hero__logo img { height: 180px; width: auto; max-width: 90%; display: inline-block; }
@media (max-width: 560px) { .hero__logo img { height: 120px; } }

/* ---- Filtres par genre du catalogue -------------------------------------
   Une rangée de liens, pas un menu déroulant : on voit d'un coup ce qui est
   proposé. Elle défile horizontalement sur téléphone plutôt que de passer à
   la ligne, pour ne pas repousser les affiches sous la ligne de flottaison. */
.filtres-genres {
  display: flex; gap: 8px; margin: 0 0 22px; padding-bottom: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.filtres-genres::-webkit-scrollbar { display: none; }
.filtre-genre {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 38px; padding: 0 16px; border-radius: 999px;
  background: var(--carte); color: var(--encre);
  font-size: var(--t-second); font-weight: 600; text-decoration: none;
  box-shadow: var(--ombre-douce); white-space: nowrap;
  transition: background .15s, color .15s, transform .14s;
}
.filtre-genre:hover { transform: translateY(-1px); color: var(--action); }
.filtre-genre--actif {
  background: var(--action); color: #fff; box-shadow: var(--ombre-bouton);
}
.filtre-genre--actif:hover { color: #fff; }
.filtre-genre__n {
  font-size: var(--t-mention); font-weight: 700; color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}
.filtre-genre--actif .filtre-genre__n { color: rgba(255, 255, 255, .8); }
@media (prefers-reduced-motion: reduce) { .filtre-genre { transition: none; } .filtre-genre:hover { transform: none; } }

/* ---- Grille de spectacles ----------------------------------------------- */
/* `auto-fill` fabriquait des colonnes VIDES : avec deux spectacles sur un écran
   large, les cartes se collaient à gauche et la moitié droite de la page restait
   blanche. `auto-fit` fait disparaître les colonnes vides, la borne haute empêche
   deux affiches de s'étirer en panneaux géants, et le centrage remet l'ensemble
   au milieu. Un catalogue qui démarre avec deux spectacles ne doit pas avoir
   l'air d'un catalogue à moitié chargé. */
/* LE CATALOGUE — refonte du 2026-08-31, à la demande de Val (« pas du tout
   esthétique »). Trois défauts corrigés ensemble :

   1. Aucun sombre nulle part. La charte définit le territoire comme « une nuit
      aubergine éclairée par un fuchsia, comme une salle avant le noir » ; la
      page baignait dans le crème du haut au pied et ne ressemblait plus à la
      marque. D'où le bandeau nuit, halo compris — le même que la page
      d'accueil, car le néon n'est autorisé que sur fond sombre.
   2. Colonnes plafonnées à 360 px ET centrées : sur un grand écran, deux cartes
      au milieu et deux vides sur les côtés. Un catalogue à moitié vide a l'air
      d'un catalogue à moitié chargé. Les colonnes se répartissent maintenant.
   3. Dans la carte, date, lieu et prix avaient la même densité de gris. Sur une
      billetterie, la date et le prix sont ce qu'on cherche : la date passe en
      talon sur l'affiche, le prix prend son niveau de charte (--t-prix,
      couleur d'action) et la perforation en pointillés les sépare. */

.cat-hero {
  position: relative; background: var(--nuit); color: #fff;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 56px 24px 60px; text-align: center; overflow: hidden;
  border-radius: 0 0 28px 28px; margin-bottom: 40px;
}
.cat-hero::before {
  content: ''; position: absolute; inset: auto -20% -60% -20%; height: 130%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 95, 208, .22), transparent 60%);
  pointer-events: none;
}
.cat-hero__inner { position: relative; max-width: 720px; margin: 0 auto; }
.cat-hero__titre {
  font-family: var(--font-affiche); font-weight: 400; font-size: var(--t-affiche);
  line-height: 1.06; margin: 0 0 14px; color: #fff;
}
.cat-hero__sous {
  margin: 0 auto; font-size: var(--t-texte); color: rgba(255, 255, 255, .82);
  font-variant-numeric: tabular-nums;
}
.cat-hero__sous strong { color: #fff; font-weight: 700; }
.filtres-genres--sombre { margin-top: 26px; margin-bottom: 0; }
.filtres-genres--sombre .filtre-genre {
  background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .92); box-shadow: none;
}
.filtres-genres--sombre .filtre-genre:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.filtres-genres--sombre .filtre-genre--actif { background: var(--action); color: #fff; }
.filtres-genres--sombre .filtre-genre__n { color: rgba(255, 255, 255, .65); }
.filtres-genres--sombre .filtre-genre--actif .filtre-genre__n { color: rgba(255, 255, 255, .8); }
@media (max-width: 640px) {
  .cat-hero { padding: 40px 20px 44px; margin-bottom: 28px; }
}

.grille-spectacles {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.carte {
  background: var(--carte); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce); overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-survol); }
/* Au survol, la règle générale des liens (`a:hover`) repeignait TOUTE la carte
   en fuchsia — titre, date, lieu compris. Une carte n'est pas un lien de texte :
   seul son titre réagit, le reste garde sa couleur. */
.carte__lien, .carte__lien:hover, .carte__lien:visited {
  text-decoration: none; color: var(--encre); display: block;
}
.carte__titre { transition: color .16s ease; }
.carte:hover .carte__titre { color: var(--action-fonce); }

/* L'affiche est l'objet le plus désirable de la page : on la traite comme une
   image encadrée, pas comme une vignette. Filet intérieur pour la détacher du
   fond clair, léger rapprochement au survol. */
.carte__affiche { aspect-ratio: 2 / 3; overflow: hidden; position: relative; background: var(--nuit); }
.carte__affiche img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.carte__affiche::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(36, 20, 54, .10),
              inset 0 -60px 70px -50px rgba(30, 16, 48, .55);
}
.carte:hover .carte__affiche img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .carte, .carte__affiche img { transition: none; }
  .carte:hover { transform: none; }
  .carte:hover .carte__affiche img { transform: none; }
}
.carte__affiche--vide {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, var(--nuit), var(--action));
}
.carte__affiche--vide span { font-size: 4.5rem; }

/* Le talon : la date détachée sur l'affiche, comme le coin d'un billet. */
.carte__talon {
  position: absolute; left: 14px; bottom: 14px; margin: 0; z-index: 1;
  background: var(--carte); border-radius: 12px; padding: 7px 11px 8px;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  box-shadow: 0 6px 18px rgba(30, 16, 48, .28);
}
.carte__talon-j {
  font-family: var(--font-titres); font-weight: 800; font-size: 22px;
  color: var(--encre); font-variant-numeric: tabular-nums;
}
.carte__talon-m {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--action-fonce); margin-top: 3px;
}

.carte__corps { padding: 18px 20px 20px; }
.carte__artiste {
  margin: 0 0 3px; font-family: var(--font-titres); font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--action-fonce);
}
.carte__titre { font-size: var(--t-sous); margin: 0 0 8px; line-height: 1.25; }
.carte__meta { margin: 0 0 4px; font-size: var(--t-meta); color: var(--encre-douce); }
.carte__orga { margin: 0 0 12px; font-size: var(--t-meta); color: var(--encre-douce); }
.carte__lieu { margin: 0 0 14px; font-size: var(--t-meta); color: var(--encre-douce); }
/* La perforation du billet (charte §5.5), en pointillés d'action pâle. */
.carte__prix {
  margin: 0; padding-top: 14px; border-top: 1px dashed var(--action-pale);
  display: flex; align-items: baseline; gap: 8px;
}
.carte__prix-lbl, .carte__prix--attente { font-size: var(--t-meta); color: var(--encre-douce); }
.carte__cta { margin-left: auto; color: var(--action); display: flex; align-self: center; }
.carte__cta .ico { width: 18px; height: 18px; }
.carte:hover .carte__cta { color: var(--action-fonce); }
.carte__prix strong {
  color: var(--action); font-family: var(--font-titres); font-weight: 800;
  font-size: var(--t-prix); line-height: 1.1;
}

.vide { color: var(--encre-douce); }

/* ---- Badges de disponibilité (charte section 6) ------------------------- */
.badge {
  display: inline-block; font-family: var(--font-texte);
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.badge--dispo { background: var(--badge-dispo-bg); color: var(--succes); }
.badge--faible { background: var(--badge-faible-bg); color: var(--badge-faible-tx); }
.badge--complet { background: var(--badge-complet-bg); color: var(--erreur); }
.badge--or { background: var(--or); color: var(--encre); }
/* « Mise en vente le … » : séance pas encore ouverte à la vente. */
.badge--avenir { background: var(--violet-pale); color: var(--violet); }
/* Étiquette marketing d'un tarif (pêche + encre, jamais de blanc dessus). */
.badge--etiquette { background: var(--peche); color: var(--encre); }
/* Liste d'attente (vue orga). */
.badge--attente { background: var(--badge-faible-bg); color: var(--badge-faible-tx); }
.badge--prevenu { background: var(--badge-dispo-bg); color: var(--succes); }
.compteur-attente {
  display: inline-block; min-width: 22px; text-align: center; background: var(--violet); color: #fff;
  font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
.ligne-attente--retire { opacity: 0.5; }

/* Icône en ligne (line-icon de la charte, cf. sidebar) accompagnant un libellé :
   se dimensionne sur la taille du texte et hérite de sa couleur (currentColor). */
.ico { width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin-right: 0.35em; flex: none; }
.attente-statut { margin: 0 0 12px; }
.attente-statut--off { color: var(--encre-douce); }
.attente-desactiver { display: inline; margin: 0 0 0 8px; }
.attente-relance { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--violet-pale); }
.attente-relance form { margin: 0; }
.carte__badge { margin-bottom: 12px; }

/* Tarif : prix barré (promo) + description sous le libellé */
.tarif-nom { font-weight: 600; }
.prix-barre { color: var(--encre-douce); font-weight: 400; margin-right: 6px; }
.prix-reduit { color: var(--succes); font-weight: 700; }
.tarif-desc { display: inline-block; margin-top: 3px; color: var(--encre-douce); line-height: 1.4; }
/* Pass : les dates incluses occupent une ligne à PART, sur toute la largeur du
   tableau (colspan 3), sous le tarif — de la place pour le nom du spectacle. */
/* ---- Pass : plusieurs soirées, un seul prix -----------------------------
   Le pass avait sa ligne dans le tableau des prix d'UNE date, comme s'il en
   était un tarif. Il a maintenant sa carte, en tête de page, sur chaque
   spectacle qu'il inclut : c'est une offre à part, elle se présente à part. */
/* ---- Pass : un tarif comme les autres, pour plusieurs soirées -------------
   Val : « je veux qu'ils soient présentés comme le tarif, avec les explications,
   peut-être en rajoutant une icône, selon notre DA. » Le bloc réemploie donc le
   tableau des tarifs tel quel — mêmes colonnes, même compteur, même typographie.
   Il ne se distingue que par son titre à l'icône ticket et par la ligne des
   soirées incluses. Aucune couleur nouvelle : la charte n'en demande pas. */
.passes { margin: 26px 0 28px; padding-top: 22px; border-top: var(--bordure-fine); }
.passes__titre {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-titres); font-weight: 800; font-size: var(--t-sous);
  color: var(--encre); margin: 0 0 10px;
}
.passes__titre svg { width: 20px; height: 20px; color: var(--action); flex: 0 0 auto; }
/* Le pass est une LIGNE du tableau des tarifs, au même rang que « Plein » : il
   n'a donc ni fond, ni encadré, ni couleur à lui. Seule l'icône ticket devant
   son nom le signale — la même que celle du titre de bloc. */
.tarif-nom--pass { display: inline-flex; align-items: center; gap: 6px; }
.tarif-nom--pass svg { width: 16px; height: 16px; color: var(--action); flex: 0 0 auto; }
/* Sa ligne d'explication se colle à la sienne : le trait du tableau passe sous
   les deux, pas entre elles. */
.tarif-pass-tr > td { border-bottom: 0; padding-bottom: 2px; }
/* Les soirées incluses : sur toute la largeur, sous la ligne du pass. C'est
   l'explication qui fait sa valeur, pas une note de bas de page. */
.tarif-pass-row > td { padding-top: 0; border-top: 0; }
.tarif-pass__intro { display: block; color: var(--encre-douce); font-size: 13px; }
.tarif-pass-dates { list-style: none; margin: 4px 0 2px; padding: 0; }
.tarif-pass-dates li { padding: 3px 0 3px 16px; position: relative; font-size: 14px; color: var(--encre); line-height: 1.4; }
.tarif-pass-dates li::before { content: "•"; position: absolute; left: 2px; color: var(--action); }
.tarif-pass-dates strong { font-weight: 700; }
/* Pass à dates fixes, en COMPACT (2026-09-10) : l'intro et les soirées sur une
   même ligne, en petit, séparées d'un point — plus une liste à puces par pass. */
.tarif-pass-row > td { padding-bottom: 12px; }
.tarif-pass-inclus { font-size: 13px; line-height: 1.5; color: var(--encre-douce); }
.tarif-pass-inclus .tarif-pass__intro { display: inline; font-size: inherit; margin-right: 4px; }
.tarif-pass-inclus .tarif-pass-dates { display: inline; margin: 0; }
.tarif-pass-inclus .tarif-pass-dates li { display: inline; padding: 0; font-size: inherit; color: var(--encre-douce); }
.tarif-pass-inclus .tarif-pass-dates li::before { content: none; }
.tarif-pass-inclus .tarif-pass-dates li + li::before { content: "·"; position: static; margin: 0 6px; color: var(--action); }
.tarif-pass-inclus .tarif-pass-dates strong { font-weight: 600; color: var(--encre); }
.tarif-pass-dates__quand { white-space: nowrap; }

/* ---- Fil d'Ariane ------------------------------------------------------- */
.fil { margin: 20px 0; }
.fil a { color: var(--encre-douce); text-decoration: none; font-weight: 600; }
.fil a:hover { color: var(--violet); }

/* ---- Fiche spectacle ---------------------------------------------------- */
.fiche__entete {
  display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 36px;
  align-items: start; margin: 8px 0 32px;
}
.fiche__affiche img, .fiche__affiche--vide {
  width: 100%; border-radius: var(--rayon);
  box-shadow: var(--ombre-douce); display: block;
}
.fiche__affiche--vide {
  aspect-ratio: 2 / 3; background: linear-gradient(120deg, var(--nuit), var(--action));
  display: flex; align-items: center; justify-content: center;
}
.fiche__affiche--vide span { font-size: 5rem; }
.fiche__infos h1 { margin-top: 0; }
.fiche__orga { color: var(--encre-douce); margin-top: -4px; font-weight: 600; }
/* Page « les spectacles de <structure> » : le même sous-titre que sur la fiche
   d'un spectacle, pour que passer de l'une à l'autre se lise comme une suite. */
.catalogue__orga { color: var(--encre-douce); margin: -6px 0 26px; font-weight: 600; }
/* Titre en tête, pleine largeur (le visiteur voit d'abord de quel spectacle il s'agit). */
.fiche__titre-haut { margin: 8px 0 20px; }
.fiche__titre-haut h1 { margin: 0 0 2px; }
.fiche__titre-haut .fiche__orga { margin-top: 0; }
/* Fiche : le HAUT de page (.fiche__hero) présente l'affiche à gauche et
   l'encadré de réservation à droite, côte à côte. TOUT le reste (présentation,
   lieu, infos, galerie, distribution…) coule ensuite sur TOUTE la largeur de
   la page, en un seul bloc — le texte n'est plus enfermé dans une colonne
   étroite (moins de défilement). */
.fiche-spectacle { display: block; }
.fiche__titre-haut { margin: 8px 0 20px; }
.fiche__titre-haut h1 { margin: 0 0 2px; }
.fiche__titre-haut .fiche__orga { margin-top: 0; }
/* Haut de page : petite affiche à gauche, bloc de réservation LARGE à droite
   (les tarifs occupent tout le reste de la largeur de la page). L'affiche est
   volontairement réduite pour laisser la place aux tarifs. */
.fiche__hero {
  display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 24px 40px; align-items: start; justify-content: stretch; margin: 0 0 22px;
}
/* Le bloc de réservation prend toute la largeur restante (plus de colonne étroite
   épinglée) : les tarifs sont visibles d'emblée, sans défiler. */
.fiche__col-side {
  align-self: start; margin: 0; min-width: 0;
}
.fiche__col-side .reservation { margin: 0; }
.fiche__intro { margin: 0; }
.fiche__intro .fiche__affiche { width: 100%; margin: 0; }
/* Présentation : le pitch, sur toute la largeur. */
.fiche__presentation { margin: 0 0 8px; }
.fiche__desc { margin: 4px 0 0; color: var(--encre); line-height: 1.7; }
/* « Lire la suite » d'un descriptif de plus de 1 000 caractères (2026-09-10). */
.fiche__desc-case { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fiche__desc-suite, .fiche__desc-fermer { display: none; }
.fiche__desc-case:checked ~ .fiche__desc .fiche__desc-suite { display: inline; }
.fiche__desc-case:checked ~ .fiche__desc .fiche__desc-points,
.fiche__desc-case:checked ~ .fiche__desc-plus .fiche__desc-ouvrir { display: none; }
.fiche__desc-case:checked ~ .fiche__desc-plus .fiche__desc-fermer { display: inline; }
.fiche__desc-plus {
  display: inline-block; margin-top: 6px; cursor: pointer; font-weight: 700;
  color: var(--action); text-decoration: underline; text-underline-offset: 3px;
}
.fiche__desc-case:focus-visible ~ .fiche__desc-plus { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 4px; }
.fiche__actions { padding-top: 12px; }

/* Réassurance : rassure juste sous le bouton, dans l'encadré épinglé. */
.reassurance {
  list-style: none; margin: 16px 0 0; padding: 16px 18px;
  background: var(--carte); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  display: grid; gap: 12px;
}
.reassurance li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.4; color: var(--encre-douce);
}
.reassurance__ico { flex: 0 0 auto; color: var(--action); display: inline-flex; margin-top: 1px; }
.reassurance__ico svg { width: 18px; height: 18px; }

/* Sous 900 px : le haut de page s'empile (affiche puis réservation), l'encadré
   redevient un bloc normal (plus de sticky), l'affiche est limitée en largeur. */
@media (max-width: 900px) {
  .fiche__hero { grid-template-columns: 1fr; gap: 16px; }
  .fiche__intro .fiche__affiche { width: min(320px, 70%); }
  .fiche__col-side { position: static; margin: 0; }
}
@media (max-width: 560px) {
  .fiche__intro .fiche__affiche { width: min(240px, 80%); }
}

/* ---- Réservation / séances ---------------------------------------------- */
.reservation { margin: 8px 0 32px; }
.seance {
  background: var(--carte); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce); padding: 22px 24px; margin-bottom: 20px;
}
.seance__date { font-family: var(--font-titres); font-weight: 600; font-size: 1.25rem; margin: 0; }
/* Le lieu de la date : épingle, puis le nom et l'adresse sur deux lignes.
   L'épingle reste en haut à gauche pour que l'adresse s'aligne sous le nom. */
.seance__lieu { margin: 4px 0 14px; color: var(--encre-douce); font-size: 14px;
  display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap; line-height: 1.45; }
.seance__lieu > svg, .seance__lieu > .ico { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.seance__lieu strong { color: var(--encre); font-weight: 700; }
.seance__plan { font-weight: 600; white-space: nowrap; color: var(--violet); }

/* ---- Liste d'attente (séance complète) --------------------------------- */
.attente { margin-top: 14px; border: 1.5px solid var(--violet-pale); border-radius: var(--rayon-petit); background: var(--fond); }
.attente__resume {
  cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--violet);
  list-style: none; user-select: none;
}
.attente__resume::-webkit-details-marker { display: none; }
.attente__resume::after { content: '＋'; float: right; font-weight: 700; }
.attente[open] .attente__resume::after { content: '－'; }
.attente__resume:hover { color: var(--violet-fonce); }
.attente__corps { padding: 0 16px 16px; }
.attente__intro { margin: 0 0 14px; font-size: 14px; color: var(--encre-douce); line-height: 1.5; }
.attente__form { display: flex; flex-direction: column; gap: 12px; }
.attente__form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--encre); }
.attente__form label small { font-weight: 400; color: var(--encre-douce); }
.attente__form input, .attente__form select {
  font-family: var(--font-texte); font-size: 15px; padding: 9px 12px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte);
}
.attente__form input:focus, .attente__form select:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale);
}
.attente__form button { align-self: flex-start; }

/* ---- Avant-première : être prévenu AVANT l'ouverture -------------------- */
/* Volontairement PLUS présent que la liste d'attente (qui se replie derrière un
   « + ») : quand rien n'est en vente, ce formulaire est la seule action possible
   de la page. Le replier reviendrait à n'offrir aucune action du tout. */
.avp {
  margin-top: 18px; padding: 18px 20px;
  border: 1.5px solid var(--action-pale); border-radius: var(--rayon-petit);
  background: var(--carte);
}
.avp__titre {
  margin: 0 0 10px; font: 700 17px/1.3 var(--font-titres); color: var(--action-fonce);
  display: flex; align-items: center; gap: 8px;
}
.avp__intro { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--encre-douce); }
.avp__intro strong { color: var(--encre); }
.avp__form { display: flex; flex-direction: column; gap: 6px; }
.avp__form label { font-size: 14px; font-weight: 600; color: var(--encre); margin-top: 6px; }
.avp__form label small { font-weight: 400; color: var(--encre-douce); }
.avp__form input {
  font-family: var(--font-texte); font-size: 15px; padding: 10px 12px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--fond);
}
.avp__form input:focus {
  outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-pale);
}
.avp__form select {
  font-family: var(--font-texte); font-size: 15px; padding: 10px 12px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--fond);
}
.avp__form select:focus {
  outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-pale);
}
/* Prénom et nom côte à côte : deux champs courts qui se lisent d'un coup. */
.avp__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.avp__duo > div { display: flex; flex-direction: column; gap: 6px; }
.avp__duo label { margin-top: 6px; }
@media (max-width: 480px) { .avp__duo { grid-template-columns: 1fr; } }
.avp__form button { align-self: flex-start; margin-top: 14px; }
.avp__mentions { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--encre-douce); }

/* Le bandeau de celui qui arrive avec son lien : il doit comprendre en une
   seconde pourquoi LUI peut acheter alors que la page annonce « bientôt ». */
/* Le mode « comme le public » : volontairement SOBRE, en gris, pour ne pas se
   confondre avec le bandeau d'avant-première qui, lui, annonce un privilège. */
/* L'adresse à copier : lisible et sélectionnable, elle se met en favori. */
.avp-verif__adresse {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 12px 0 0; padding-top: 12px; border-top: var(--bordure-fine);
}
.avp-verif__adresse code {
  font-size: 13px; padding: 6px 10px; border-radius: var(--rayon-petit);
  background: var(--fond); color: var(--encre); word-break: break-all;
}
.avp-bandeau--public {
  background: var(--fond); border-left-color: var(--encre-douce); color: var(--encre-douce);
}
.avp-bandeau--public strong { color: var(--encre); }
.avp-bandeau__sortie {
  display: inline-block; margin-left: 4px; font-weight: 700;
  color: var(--action-fonce); text-decoration: underline;
}
.avp-bandeau {
  margin: 0 0 16px; padding: 12px 16px;
  border-left: 4px solid var(--action); border-radius: var(--rayon-petit);
  background: var(--action-pale); color: var(--encre); font-size: 14px; line-height: 1.5;
}

/* Les coordonnées bancaires d'une production : deux colonnes, l'IBAN saisi et
   le document reçu. Les voir CÔTE À CÔTE est le tout : c'est leur écart qui
   explique pourquoi un virement n'est pas parti. */
.prod-banque__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
@media (max-width: 720px) { .prod-banque__grille { grid-template-columns: 1fr; } }
.prod-banque__grille > div { display: flex; flex-direction: column; gap: 4px; }
.prod-banque__l { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-douce); }
.prod-banque__v { font-weight: 700; font-size: 15px; word-break: break-all; }
.prod-banque .alerte { margin-top: 14px; }

/* Renommer un plan : replié, parce que c'est rare — mais présent, parce que
   quand on en a besoin on ne sait pas où chercher. */
.plan-renommer { margin: 0 0 20px; }
.plan-renommer summary {
  cursor: pointer; font-weight: 700; font-size: 14px; color: var(--action-fonce);
  list-style: none; user-select: none;
}
.plan-renommer summary::-webkit-details-marker { display: none; }
.plan-renommer summary::before { content: '＋ '; font-weight: 700; }
.plan-renommer[open] summary::before { content: '－ '; }
.plan-renommer__form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.plan-renommer__form label { font-size: 13px; font-weight: 600; }
.plan-renommer__form input {
  font-family: var(--font-texte); font-size: 15px; padding: 9px 12px; min-width: 320px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--fond);
}
.plan-renommer__form input:focus {
  outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-pale);
}
.plan-renommer .champ-aide { margin-top: 8px; }

/* ---- La recherche du back office ---------------------------------------- */
/* Dans le menu : discrète mais toujours là. C'est le premier geste quand
   quelqu'un appelle, elle ne doit pas se chercher. */
.nav-recherche { margin: 4px 12px 10px; }
.nav-recherche input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-texte); font-size: 13px; padding: 8px 10px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--fond);
}
.nav-recherche input:focus {
  outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-pale);
}
/* Sur la page dédiée : en grand, parce qu'on y arrive pour retaper. */
.recherche-grande { display: flex; gap: 10px; margin-bottom: 24px; }
.recherche-grande input {
  flex: 1; font-family: var(--font-texte); font-size: 16px; padding: 12px 14px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte);
}
.recherche-grande input:focus {
  outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-pale);
}
.rech-groupe { margin-bottom: 28px; }
.rech-groupe h2 { margin: 0 0 10px; font: 700 17px/1.3 var(--font-titres); }

/* La sortie en bas de page : un BOUTON, pas un lien de plus dans une liste —
   c'est ce qui le rend visible quand on relève les yeux. */
.retour-bas { margin: 32px 0 8px; padding-top: 20px; border-top: var(--bordure-fine); }

/* ---- Navigation admin en trois groupes ---------------------------------- */
/* Les intertitres portent la hiérarchie. Ils sont DISCRETS mais lisibles : en
   gris minuscule on ne les voit pas (Val avait raté un titre ainsi traité),
   trop appuyés ils concurrenceraient les liens eux-mêmes. */
.espace-nav__groupe {
  margin: 18px 0 6px; padding: 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-douce);
}
.espace-nav--groupes .espace-nav__groupe:first-child { margin-top: 4px; }

/* Le mot de passe, rangé avec ce qui parle de la personne et non du travail. */
.espace-sidebar__compte {
  display: block; margin: 6px 0 2px; font-size: 13px;
  color: var(--encre-douce); text-decoration: none;
}
.espace-sidebar__compte:hover { color: var(--action-fonce); text-decoration: underline; }
.espace-sidebar__compte.actif { color: var(--action-fonce); font-weight: 700; }

/* ---- Agenda : le back office rangé par le temps ------------------------- */
/* Le rythme des ventes, en tête : trois chiffres, rien d'autre. */
.agenda-rythme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
@media (max-width: 640px) { .agenda-rythme { grid-template-columns: 1fr; } }
.agenda-rythme__bloc {
  padding: 16px 18px; border: var(--bordure-fine); border-radius: var(--rayon-petit);
  background: var(--carte); display: flex; flex-direction: column; gap: 2px;
}
.agenda-rythme__n {
  font: 800 30px/1 var(--font-titres); color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.agenda-rythme__l { font-size: 13px; color: var(--encre-douce); }
.agenda-rythme__e {
  margin-top: 6px; font-weight: 700; font-size: 15px; color: var(--action-fonce);
  font-variant-numeric: tabular-nums;
}

.agenda-groupe { margin-bottom: 30px; }
.agenda-groupe__tete { margin-bottom: 12px; }
.agenda-groupe__tete h2 { margin: 0; font: 700 18px/1.3 var(--font-titres); }
.agenda-groupe__n {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--violet-pale); color: var(--violet); font-size: 12px; font-weight: 700;
}
.agenda-groupe__tete .espace-sous { margin: 2px 0 0; }

/* Une date = une ligne. La colonne du temps est FIXE et à gauche : c'est elle
   qu'on balaye du regard pour se repérer, tout le reste s'y accroche. */
.agenda-date {
  display: grid; grid-template-columns: 120px 1fr 180px 150px 90px;
  align-items: center; gap: 16px;
  padding: 14px 16px; margin-bottom: 8px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte);
}
@media (max-width: 1100px) {
  .agenda-date { grid-template-columns: 1fr; gap: 8px; }
}
.agenda-date--annulee { opacity: .65; }
.agenda-date__quand { display: flex; flex-direction: column; }
.agenda-date__jour { font-weight: 700; font-size: 14px; color: var(--encre); }
.agenda-date__heure {
  font-size: 20px; font-weight: 800; color: var(--action-fonce);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.agenda-date__titre { margin: 0; font-weight: 700; font-size: 15px; }
.agenda-date__titre a { color: var(--encre); text-decoration: none; }
.agenda-date__titre a:hover { text-decoration: underline; }
.agenda-date__lieu { margin: 2px 0 0; font-size: 13px; color: var(--encre-douce); }
.agenda-date__places { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.agenda-date__places .txt-doux { font-size: 12px; }
.agenda-date__pct { margin: 3px 0 0; font-size: 12px; color: var(--encre-douce); }
.agenda-date__recette {
  margin: 4px 0 0; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
}
/* La barre de remplissage : elle se lit avant les chiffres. Jamais seule —
   le pourcentage est écrit juste en dessous (cf. DESIGN.md). */
.agenda-jauge {
  height: 6px; margin-top: 6px; border-radius: 999px;
  background: var(--violet-pale); overflow: hidden;
}
.agenda-jauge__part { height: 100%; background: var(--action); border-radius: 999px; }
.agenda-date__etat { display: flex; flex-wrap: wrap; gap: 6px; }
.agenda-date__actions { text-align: right; }
@media (max-width: 1100px) { .agenda-date__actions { text-align: left; } }

/* Ce qui attend une action se distingue du reste, sans crier. */
.agenda-groupe--a_traiter .agenda-date { border-left: 4px solid var(--attention); }
.agenda-groupe--aujourdhui .agenda-date { border-left: 4px solid var(--action); }

/* ---- « À faire » : ce qui attend Féemoi --------------------------------- */
.admin-pastille {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 6px;
  border-radius: 999px; background: var(--action); color: #fff;
  font-size: 11px; font-weight: 700; text-align: center; line-height: 18px;
}
.afaire-prod { margin-bottom: 22px; }
.afaire-prod__tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.afaire-prod__nom { margin: 0; font: 700 17px/1.3 var(--font-titres); }
.afaire-prod__nom a { color: inherit; text-decoration: none; }
.afaire-prod__nom a:hover { text-decoration: underline; }

/* Une ligne = une action. Le filet de gauche porte l'urgence : la couleur ne
   dit jamais rien seule, le mot et l'icône la doublent (cf. DESIGN.md). */
.afaire-ligne {
  /* Colonnes FIXES pour les deux dernières : sans elles, chaque ligne calait ses
     montants à une abscisse différente et la colonne d'argent ne se lisait plus
     de haut en bas. */
  display: grid; grid-template-columns: 1fr 150px 260px; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 8px;
  border: var(--bordure-fine); border-left: 4px solid var(--violet-pale);
  border-radius: var(--rayon-petit); background: var(--carte);
}
.afaire-ligne--bloque { border-left-color: var(--erreur); background: var(--erreur-pale); }
.afaire-ligne--attente { border-left-color: var(--attention); }
.afaire-ligne__quoi { min-width: 0; }
.afaire-ligne__libelle { margin: 0; font-weight: 700; font-size: 15px; color: var(--encre); }
.afaire-ligne__ou { margin: 2px 0 0; font-size: 13px; color: var(--encre-douce); }
.afaire-ligne__detail { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--encre-douce); }
.afaire-ligne__montant {
  /* Chiffres à chasse fixe : c'est ce qui permet de comparer deux montants d'un
     coup d'œil, sans les lire (cf. DESIGN.md). */
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; white-space: nowrap;
  text-align: right;
}
.afaire-ligne__depuis { font-size: 12px; color: var(--encre-douce); white-space: nowrap; text-align: right; }
.afaire-ligne__depuis--traine { color: var(--attention-texte); font-weight: 700; }
.afaire-ligne__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.afaire-ranger { display: flex; align-items: center; gap: 6px; }
.afaire-ranger select {
  font-family: var(--font-texte); font-size: 13px; padding: 6px 8px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--fond);
}
@media (max-width: 1100px) {
  .afaire-ligne { grid-template-columns: 1fr; }
  .afaire-ligne__montant, .afaire-ligne__depuis { text-align: left; }
  .afaire-ligne__actions { justify-content: flex-start; }
}
.afaire-vide { padding: 28px; text-align: center; color: var(--encre-douce); }
.afaire-rangees { margin-top: 28px; padding-top: 18px; border-top: var(--bordure-fine); }

/* ---- Avant-première, côté organisateur ---------------------------------- */
.avp-dates { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avp-dates li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px dashed var(--violet-pale); font-size: 14px;
}
.avp-reglages { margin-top: 14px; }
.avp-annonce { display: flex; flex-direction: column; gap: 14px; }
.avp-annonce__quand { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.avp-annonce__quand input {
  align-self: flex-start; font-family: var(--font-texte); font-size: 15px; padding: 9px 12px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--fond);
}
.avp-annonce button { align-self: flex-start; }

/* Les deux ouvertures, côte à côte et NUMÉROTÉES : leur ordre est le sens même
   de la fonction, et deux boutons empilés sans numéro se confondraient. */
.avp-ouverture { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
@media (max-width: 720px) { .avp-ouverture { grid-template-columns: 1fr; } }
.avp-etape {
  padding: 16px; border: var(--bordure-fine); border-radius: var(--rayon-petit);
  background: var(--fond);
}
.avp-etape h3 { margin: 0 0 8px; font: 700 15px/1.3 var(--font-titres); color: var(--encre); }
.avp-etape p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--encre-douce); }

/* Barre de sélection au-dessus de la liste des inscrits. */
.avp-selection {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: 4px 0 14px; padding-bottom: 12px; border-bottom: var(--bordure-fine);
}
.case--enligne { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.avp-table__coche { width: 36px; text-align: center; }
.avp-note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--encre-douce); }

/* ---- Tableaux tarifs (séparations « ticket » en pointillés) ------------- */
.tarifs { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.tarifs th, .tarifs td {
  text-align: left; padding: 12px 8px; vertical-align: middle;
  border-bottom: 2px dashed var(--violet-pale);
}
.tarifs thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--encre-douce); border-bottom: var(--bordure-fine);
}
.tarifs tfoot th { border-bottom: none; font-size: var(--t-sous); }
.tarifs--recap tfoot tr:last-child th:last-child { color: var(--action); font-weight: 800; }
.tarifs--recap tfoot td:last-child { color: var(--encre-douce); font-weight: 600; }
.tarifs .droite { text-align: right; }
.tarifs td:nth-child(2) { color: var(--violet); font-weight: 700; }
.epuise { color: var(--encre-douce); font-style: italic; }
.tarifs select {
  font-family: var(--font-texte); font-size: 15px; padding: 8px 12px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte);
  cursor: pointer;
}
.tarifs select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale); }

/* ---- Boutons (pill, sans bordure, halo coloré) -------------------------- */
.btn {
  display: inline-block; font-family: var(--font-texte); font-weight: 700; font-size: 15px;
  padding: 13px 28px; border-radius: 999px; border: none; cursor: pointer; text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.15s ease;
}
/* Texte du bouton : blanc par défaut, mais --action-contraste (injecté avec un
   thème d'organisateur) prend le relais si l'accent choisi est clair, pour rester
   lisible. */
.btn--primaire { background: var(--violet); color: var(--action-contraste, #fff); box-shadow: var(--ombre-bouton); }
.btn--primaire:hover { background: var(--violet-fonce); color: var(--action-contraste, #fff); transform: translateY(-1px); box-shadow: var(--ombre-bouton-survol); }
.btn--secondaire { background: var(--carte); color: var(--encre); box-shadow: var(--ombre-douce); }
.btn--secondaire:hover { transform: translateY(-1px); box-shadow: var(--ombre-carte-survol); }
/* L'appui se sent : le bouton s'enfonce au clic, comme une vraie touche. */
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primaire:active, .btn--succes:active { box-shadow: var(--ombre-douce); }
/* Bouton « Mettre en vente » : vert succès, action la plus importante de la carte. */
.btn--succes { background: var(--succes); color: #fff; box-shadow: var(--ombre-bouton); }
.btn--succes:hover { background: #167a54; color: #fff; transform: translateY(-1px); box-shadow: var(--ombre-bouton-survol); }
/* Lien d'action discret (ex. « Dépublier ») + forme inline dans une barre d'actions. */
.btn-lien--discret { color: var(--encre-douce); font-weight: 600; }
.btn-lien--discret:hover { color: var(--encre); text-decoration: underline; }
.action-statut { margin: 0; display: inline-flex; }

/* ---- Pastille d'état d'une séance (en vente / à venir / complet…) ------- */
.pastille {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; margin-right: 7px; flex: none;
}
.pastille--en_vente   { background: var(--succes); }
.pastille--avenir     { background: var(--violet); }
.pastille--complet    { background: var(--attention); }
.pastille--terminee   { background: var(--encre-douce); }
.pastille--annulee    { background: var(--erreur); }
/* Hors ligne (brouillon) : anneau creux pour le distinguer du gris « terminée ». */
.pastille--hors_ligne { background: var(--carte); box-shadow: inset 0 0 0 2px #B7AEC6; }
/* Libellé texte coloré accompagnant la pastille (page séance, liste). */
.pastille-texte { margin-left: 2px; font-weight: 700; }
.pastille-texte--en_vente   { color: var(--succes); }
.pastille-texte--avenir     { color: var(--violet); }
.pastille-texte--complet    { color: var(--or-fonce); }
.pastille-texte--terminee   { color: var(--encre-douce); }
.pastille-texte--annulee    { color: var(--erreur); }
.pastille-texte--hors_ligne { color: var(--encre-douce); }
.seance-etat-ligne { display: flex; align-items: center; gap: 2px; }
.btn:disabled, .btn--desactive {
  background: var(--desactive-bg); color: var(--desactive-tx);
  cursor: not-allowed; box-shadow: none;
}

/* ---- Formulaire coordonnées --------------------------------------------- */
.form-coordonnees label { display: block; margin-bottom: 18px; font-weight: 600; }
.form-coordonnees input[type=text],
.form-coordonnees input[type=email],
.form-coordonnees input[type=tel] {
  display: block; width: 100%; max-width: 440px; margin-top: 6px;
  font-family: var(--font-texte); font-size: 15px; padding: 12px 16px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte);
}
.form-coordonnees input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale); }
.form-coordonnees .case { display: flex; gap: 12px; align-items: flex-start; max-width: 62ch; font-weight: 400; }
.form-coordonnees .case input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--violet); }

.recap, .coordonnees { margin-bottom: 32px; }

/* ---- Réseaux sociaux ---------------------------------------------------- */
/* LES RÉSEAUX DE L'ARTISTE.
   C'étaient trois pastilles rondes de 42 px portant un logo de 22 px : on ne
   savait ni à qui elles appartenaient, ni où elles menaient — Val ne les voyait
   même pas. Le nom du réseau est désormais écrit à côté du logo, ce qui donne
   des boutons qu'on lit au lieu de pictogrammes qu'on devine. L'intitulé passe
   sur sa propre ligne : il présente le groupe, pas un élément de la rangée. */
/* SUIVRE L'ARTISTE — DES LIENS, PAS DES BOUTONS.
   Val, capture à l'appui, le 2026-09-02 : « c'est pas esthétique, ça ».
   Quatre pastilles blanches en relief, posées à côté du bouton « Partager » et
   de la même forme que lui : la ligne pesait autant qu'une barre d'actions
   alors qu'elle ne porte que des renvois. Rien n'y disait ce qui compte — le
   seul geste utile ici, c'est de partager la page.
   Les noms des réseaux restent écrits, eux : Val les avait demandés parce que
   trois logos muets de vingt pixels ne disaient ni à qui ils appartenaient, ni
   où ils menaient. Ce qui part, c'est le fond blanc et l'ombre, pas le mot. */
.reseaux {
  display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; margin: 0;
}
.reseaux__label {
  margin: 0; font-weight: 600; color: var(--encre-douce); font-size: 14px;
}
.reseaux__lien {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; background: none; box-shadow: none;
  color: var(--encre); text-decoration: none; font-weight: 600; font-size: 14px;
  transition: color 0.15s ease;
}
.reseaux__lien svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .7; }
.reseaux__nom { white-space: nowrap; }
.reseaux__lien:hover {
  background: none; box-shadow: none; transform: none;
  color: var(--action); text-decoration: underline; text-underline-offset: 3px;
}
.reseaux__lien:hover svg { opacity: 1; }
/* Pas de couleur de marque au survol. On l'avait essayé — le bleu Facebook, le
   dégradé Instagram — et la charte « Néon de scène » n'a ni bleu ni cyan : le
   test de charte l'a refusé, à raison. C'est devenu inutile de toute façon,
   puisque le nom du réseau est écrit à côté du logo : la couleur servait à
   faire reconnaître une marque qu'on nomme désormais. */

/* ---- Le fil Instagram de l'artiste --------------------------------------- */
/* Tant qu'on n'a pas cliqué, une invitation sobre : elle ne doit ni ressembler
   à une erreur, ni promettre plus qu'un cadre à charger. */
.insta { margin-top: 8px; }
.insta__zone {
  padding: 24px; border: var(--bordure-fine); border-radius: var(--rayon);
  background: var(--carte); text-align: center;
}
.insta__intro { margin: 0 0 14px; font-size: 15px; color: var(--encre); }
.insta__mention { margin: 12px 0 0; font-size: 12px; color: var(--encre-douce); line-height: 1.5; }
/* Le cadre d'Instagram impose sa propre largeur : on la borne pour qu'il ne
   déborde pas sur téléphone. */
.insta-cadre {
  width: 100%; max-width: 540px; height: 560px; border: 0;
  border-radius: var(--rayon); background: var(--carte);
}
.insta--charge .insta__zone { padding: 0; border: 0; background: none; }

/* ---- Actions (Partager) ------------------------------------------------- */
/* Une seule action ici — partager — puis des liens. L'écart plus grand entre
   le bouton et les réseaux dit cette différence de nature mieux qu'une bordure. */
.fiche__actions { display: flex; align-items: center; gap: 14px 28px; margin-top: 24px; flex-wrap: wrap; }
.partage-message { font-weight: 600; color: var(--succes); opacity: 0; transition: opacity 0.2s ease; }
.partage-message.is-visible { opacity: 1; }

/* ---- Infos pratiques ---------------------------------------------------- */
.infos-pratiques { margin: 8px 0 32px; }
.infos-pratiques__liste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.infos-pratiques__liste li {
  background: var(--carte); border-radius: 999px; box-shadow: var(--ombre-douce);
  padding: 8px 16px; font-size: 0.95rem;
}
.ip-ico { margin-right: 4px; }

/* ---- Vidéo de présentation ---------------------------------------------- */
.video-spectacle { margin: 8px 0 32px; }
.video-spectacle__cadre {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--rayon); overflow: hidden;
  box-shadow: var(--ombre-douce); background: var(--encre);
}
.video-spectacle__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Galerie + lightbox ------------------------------------------------- */
.galerie { margin: 8px 0 32px; }
/* Mosaïque : colonnes qui se remplissent, chaque photo garde SON format
   (portrait, paysage, carré) — plus de recadrage forcé. */
.galerie__grille { columns: 3 200px; column-gap: 14px; }
.galerie__vignette {
  display: block; width: 100%; margin: 0 0 14px; break-inside: avoid;
  padding: 0; cursor: pointer; background: none; border: none;
  border-radius: var(--rayon-petit); overflow: hidden;
  box-shadow: var(--ombre-douce);
}
.galerie__vignette img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }
.galerie__vignette:hover img { transform: scale(1.06); }

/* Galerie en carrousel : défilement horizontal scroll-snap, flèches et pastilles.
   Les flèches et pastilles prennent la couleur d'accent de l'organisateur. */
.carrousel { position: relative; }
.carrousel__piste { list-style: none; margin: 0; padding: 4px 0; display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.carrousel__item { flex: 0 0 auto; width: min(80%, 520px); scroll-snap-align: center; }
.carrousel__item .galerie__vignette { width: 100%; }
.carrousel__legende { margin: 8px 2px 0; font-size: 13px; color: var(--encre-douce); text-align: center; }
.carrousel__fleche { position: absolute; top: calc(50% - 24px); transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--action);
  color: var(--action-contraste, #fff); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: var(--ombre-bouton); }
.carrousel__fleche:disabled { opacity: .35; cursor: default; box-shadow: none; }
.carrousel__fleche--prec { left: -8px; }
.carrousel__fleche--suiv { right: -8px; }
.carrousel__points { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.carrousel__point { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: var(--violet-pale); cursor: pointer; }
.carrousel__point.actif { background: var(--action); }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(42, 33, 56, 0.9);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.lightbox__figure img { max-width: 100%; max-height: 80vh; border-radius: var(--rayon); }
.lightbox__figure figcaption { color: #fff; margin-top: 12px; font-weight: 600; }
.lightbox__fermer {
  position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #fff; background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer;
}
.lightbox__fermer:hover { background: var(--violet); border-color: var(--violet); }

/* ---- Distribution ------------------------------------------------------- */
.distribution { margin: 8px 0 32px; }
.distribution__ligne {
  display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px;
  padding: 12px 0; border-bottom: 2px dashed var(--violet-pale);
}
.distribution__ligne dt { font-weight: 700; color: var(--violet); margin: 0; }
.distribution__ligne dd { margin: 0; }
@media (max-width: 540px) { .distribution__ligne { grid-template-columns: 1fr; gap: 2px; } }

/* ---- Alertes / encarts -------------------------------------------------- */
/* Bandeau « aperçu organisateur » sur une fiche spectacle non publiée. */
.bandeau-apercu {
  background: var(--violet); color: #fff; padding: 12px 18px; border-radius: var(--rayon-petit);
  margin: 0 0 16px; font-size: 14px; line-height: 1.5;
}
.bandeau-apercu a { color: #fff; font-weight: 700; text-decoration: underline; margin-left: 6px; white-space: nowrap; }
.alerte { padding: 14px 16px; border-radius: var(--rayon-petit); margin: 16px 0; font-weight: 600; }
.alerte--erreur { background: var(--badge-complet-bg); color: var(--erreur); }
.alerte--info { background: var(--violet-pale); color: var(--violet-fonce); }
.encart-simulation { background: var(--violet-pale); border-radius: var(--rayon); padding: 20px; box-shadow: var(--ombre-douce); }
.actions-paiement { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.minuteur { background: var(--badge-faible-bg); color: var(--badge-faible-tx); padding: 12px 16px; border-radius: var(--rayon-petit); font-weight: 600; }
/* Dernières minutes : le décompte passe au rouge des badges « complet » et la
   phrase d'urgence apparaît. Un chiffre qui descend sans changer d'aspect ne se
   remarque pas, or c'est le moment où l'on perd l'acheteur. */
.minuteur__urgence { display: none; }
.minuteur--urgent { background: var(--badge-complet-bg); color: var(--erreur); }
.minuteur--urgent .minuteur__urgence { display: block; margin-top: 4px; font-weight: 600; }

/* Délai écoulé : ce qui remplace le formulaire de coordonnées. */
.panier-perime {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 22px 24px; margin: 18px 0 24px; border-left: 5px solid var(--erreur);
}
.panier-perime__titre { margin: 0 0 6px; font-family: var(--font-titres); font-weight: 800; font-size: var(--t-sous); color: var(--encre); }
.panier-perime__txt { margin: 0 0 16px; color: var(--encre-douce); max-width: 56ch; }

/* Page d'erreur : le retour vers le spectacle prime, le catalogue reste dispo. */
.page-message__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.page-message__second { color: var(--encre-douce); }

/* Plafond de billets par commande, montré quand il est atteint. */
.form-tarifs__plafond { margin: 6px 0 0; font-size: var(--t-mention); color: var(--badge-faible-tx); font-weight: 600; }

.paiement-carte .btn--large { width: 100%; padding: 14px 22px; font-size: var(--t-sous); }
.paiement-carte .btn[disabled] { opacity: .6; cursor: progress; }

/* Réassurance avant de payer, et rappel du destinataire des billets. */
.paiement-securite {
  margin: 14px 0 0; font-size: var(--t-mention); color: var(--encre-douce);
  line-height: 1.6; max-width: 60ch;
}
.paiement-destinataire {
  margin: 0 0 20px; font-size: var(--t-meta); color: var(--encre-douce);
}
.paiement-destinataire a { margin-left: 8px; color: var(--action); }
.paiement-retour { margin: 18px 0 0; }
.paiement-retour a { color: var(--encre-douce); }

/* ---- Téléphone : le total et le bouton restent sous le pouce --------------
   Sur une séance à plusieurs tarifs, ajuster les quantités faisait sortir de
   l'écran le montant et le bouton, en fin de bloc. Dès qu'une place est
   choisie, le pied du formulaire se pose en bas de l'écran. */
@media (max-width: 640px) {
  .form-tarifs--engage .form-tarifs__pied {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    background: var(--carte); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(36, 20, 54, .16);
  }
  .form-tarifs--engage .form-tarifs__total { margin: 0; }
  .form-tarifs--engage .form-tarifs__pied .btn { margin: 0; }
  /* Les mentions passent sous la ligne, sans pousser le bouton hors du cadre. */
  .form-tarifs--engage .form-tarifs__aide,
  .form-tarifs--engage .form-tarifs__plafond { flex: 1 0 100%; margin: 0; }
  /* De quoi lire la dernière ligne du tableau sans que la barre la recouvre. */
  .form-tarifs--engage { padding-bottom: 84px; }
}

/* Séance complète sans liste d'attente : on propose toujours une suite. */
.complet-suite { margin: 12px 0 0; }
.complet-suite__txt { margin: 0; color: var(--encre-douce); line-height: 1.6; }
.complet-suite__txt a { color: var(--action); font-weight: 600; }

/* ---- Journal des envois : la preuve de ce qui est parti ------------------ */
.envoi-echec { color: var(--erreur); font-weight: 700; }
.envois-actions { margin: 0 0 22px; }
.form-envoi { display: grid; gap: 18px; max-width: 680px; }
.form-envoi > label { display: block; font-weight: 600; }
.form-envoi input, .form-envoi select, .form-envoi textarea {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400;
}
.form-envoi textarea { line-height: 1.6; resize: vertical; }
.form-envoi__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .form-envoi__actions { flex-direction: column; }
  .form-envoi__actions .btn { width: 100%; text-align: center; }
}
.envoi-apercu {
  width: 100%; height: 640px; border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit); background: #fff; margin-top: 10px;
}

/* ---- Report d'une séance (espace organisateur) --------------------------- */
.form-report { display: grid; gap: 12px; max-width: 560px; margin: 12px 0 0; }
.form-report label { display: block; font-weight: 600; }
.form-report input { display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400; }
.form-report .btn { justify-self: start; }
.reports-liste { margin: 16px 0 0; padding-left: 18px; color: var(--encre-douce); font-size: var(--t-mention); line-height: 1.7; }
.reports-liste__motif { display: block; font-style: italic; }

/* ---- Retour d'un paiement qui n'aboutit pas ------------------------------
   Un refus bancaire n'est pas une impasse : la page mène au second essai. */
.echec-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 18px; }
.echec-pistes { margin: 0 0 18px; padding-left: 20px; color: var(--encre-douce); line-height: 1.7; }
.echec-pistes li { margin-bottom: 4px; }
/* Le décompte s'intègre dans le bandeau au lieu de former son propre bloc. */
.minuteur--ligne { display: inline; background: none; padding: 0; color: inherit; }
@media (max-width: 560px) {
  .echec-actions { flex-direction: column; }
  .echec-actions .btn { width: 100%; text-align: center; }
}

/* ---- « Gérer ma commande » : qui utilise chaque billet -------------------- */
.billets-gestion { list-style: none; padding: 0; margin: 16px 0 24px; }
.billet-gestion {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 16px 18px; margin: 0 0 12px;
}
.billet-gestion--annule { opacity: .55; }
.billet-gestion__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.billet-gestion__num { font-weight: 800; color: var(--encre); font-variant-numeric: tabular-nums; }
.billet-gestion__tarif { color: var(--violet); font-weight: 700; }
.billet-gestion__place, .billet-gestion__seance { font-size: var(--t-mention); color: var(--encre-douce); }
.billet-gestion__seance { flex: 1 0 100%; }
.billet-gestion__etat { margin: 0; color: var(--encre-douce); }
.billet-gestion__form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.billet-gestion__label { flex: 1 1 220px; margin: 0; }
.billet-gestion__label input { width: 100%; }
@media (max-width: 560px) {
  .billet-gestion__form { flex-direction: column; align-items: stretch; }
  .billet-gestion__form .btn { width: 100%; }
}
.confirmation__gerer { margin: 4px 0 20px; }
.confirmation__gerer a { color: var(--action); font-weight: 600; }
/* Libellé réservé aux lecteurs d'écran. */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Module intégré : la réservation quitte le site hôte, on le dit. */
.form-tarifs__embed { margin: 8px 0 0; font-size: var(--t-mention); color: var(--encre-douce); }

/* ---- Panier multi dates --------------------------------------------------
   Les dates non regardées sont masquées : la pastille de l'onglet et le rappel
   au-dessus du bouton sont les deux seuls endroits où l'on voit qu'on a pris
   des places ailleurs. */
.seance-choix-label__note { font-weight: 400; color: var(--encre-douce); }
.seance-onglet__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; margin-left: 7px; padding: 0 5px;
  border-radius: 999px; background: var(--action); color: #fff;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* `display` l'emporterait sur l'attribut hidden : sans cette ligne, la pastille
   restait affichée à zéro sur les dates non choisies. */
.seance-onglet__n[hidden] { display: none; }
/* Sur l'onglet actif, déjà fuchsia, la pastille s'inverse pour rester lisible. */
.seance-onglet.is-actif .seance-onglet__n { background: #fff; color: var(--action); }
.form-tarifs__dates {
  margin: 0 0 8px; font-size: var(--t-mention); font-weight: 600; color: var(--encre-douce);
}

/* Suggestion de correction du domaine email : une proposition, pas un reproche. */
.email-suggestion {
  margin: 6px 0 0; font-size: var(--t-mention); color: var(--encre-douce); font-weight: 400;
}
.email-suggestion__oui {
  border: none; background: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--action); text-decoration: underline; cursor: pointer;
}

/* Confirmation sur téléphone : l'agenda vaut le téléchargement. Le PDF se
   consulte mal sur un écran de poche, la date en revanche s'y range tout de
   suite, et c'est ce qu'on veut que l'acheteur fasse avant de fermer la page. */
@media (max-width: 560px) {
  .confirmation__actions { display: flex; flex-direction: column; gap: 10px; }
  .confirmation__actions .btn { width: 100%; text-align: center; margin: 0; }
}
.montant-paiement { font-size: 1.4rem; }
.montant-paiement strong { color: var(--violet); }

/* ---- Confirmation ------------------------------------------------------- */
.confirmation h1 { color: var(--succes); }
.uuid { font-size: 12px; color: var(--encre-douce); }
.note { color: var(--encre-douce); }
.page-message { padding: 40px 0; }

/* ---- Pages légales ------------------------------------------------------- */
.page-legale { max-width: 760px; margin: 0 auto; padding: 24px 0 48px; line-height: 1.7; }
.page-legale h1 { margin-bottom: 8px; }
.page-legale h2 { font-family: var(--font-titres); font-weight: 600; font-size: 18px; margin: 28px 0 8px; color: var(--violet); }
.page-legale ul { padding-left: 20px; margin: 8px 0; }
.page-legale li { margin-bottom: 6px; }
.page-legale a { color: var(--violet); }
.legal-avis { background: #FBEECF; color: #8A5A00; padding: 12px 16px; border-radius: var(--rayon-petit); font-size: 14px; }
/* Le retour au site, au bout d'une page légale : voir partials/fin-legale.ejs. */
.legal-fin { margin-top: 36px; }
/* Tarif dont les frais dépassent le prix : l'écran affichait « vous percevez
   0,00 € », ce qui ressemble à une opération blanche alors que c'est une perte. */
.prix-decompte__alerte {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--rayon-petit);
  background: var(--attention-pale); color: var(--attention-texte);
  font-size: var(--t-second); line-height: 1.45;
}
.prix-decompte__alerte .ico { color: currentColor; }
.legal-liens { margin-top: 32px; padding-top: 16px; border-top: var(--bordure-fine); font-size: 14px; }

/* ---- Pied de page ------------------------------------------------------- */
.pied {
  margin-top: 56px; padding: 32px 0; border-top: 1px solid var(--violet-pale);
  background: var(--carte); font-size: 14px; color: var(--encre-douce);
}
.pied__liens a { margin-right: 18px; color: var(--encre); font-weight: 600; text-decoration: none; }
.pied__liens a:hover { color: var(--violet); }
/* Lien « pro » distinct des liens légaux : séparateur + couleur accent. */
.pied__liens a.pied__lien-orga { color: var(--violet); padding-left: 18px; border-left: 1px solid var(--violet-pale); }
.pied__copy { margin: 10px 0 0; }

/* ---- Animations d'apparition au défilement ------------------------------ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .carte, .btn, .reseaux__lien { transition: none; }
  .btn:active { transform: none; }
}

/* ============================================================================
   Espace organisateur (sobre — pas d'étincelles, densité plus forte)
   ========================================================================== */
/* ---- Espace organisateur : rail global + colonne contextuelle -----------
   Deux niveaux : le RAIL (bande sombre à gauche) dit OÙ ON EST (sections de
   la structure) et ne bouge jamais ; la COLONNE qui le suit dit CE QUE
   CONTIENT le contexte ouvert (un événement, la configuration). Hors
   contexte, il n'y a pas de colonne — mais le rail, lui, est toujours là. */
.espace-layout { display: flex; flex-direction: column; min-height: 100vh; }
.espace-corps { display: flex; align-items: stretch; flex: 1; min-height: 0; }

/* Rail des sections globales : bande verticale sombre toujours présente à
   gauche, y compris sur les pages sans menu contextuel (rien ne « manque »
   jamais sur le côté). DEUX ÉTATS : large (icône + libellé) quand le rail est
   la seule navigation, réduit dès qu'une colonne contextuelle s'ouvre à côté —
   la place revient alors à l'événement. */
.espace-rail {
  width: 208px; flex-shrink: 0; box-sizing: border-box;
  background: var(--nuit); color: #fff;
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 12px 16px; position: sticky; top: 0; height: 100vh;
}
/* LE LOGO DU RAIL, ET LA GUERRE DE PRIORITÉS QU'IL A PERDUE ---------------
   Le logo est un `<a>` dans le rail : la règle `.espace-rail a` plus bas
   (« une classe + une balise ») était donc PLUS FORTE que `.espace-rail__logo`
   (« une classe seule ») et lui imposait sa mise en page de lien de menu —
   boîte flex, marges internes. Même piège un cran plus bas : `.espace-rail__logo
   img { height: auto }` écrasait la hauteur voulue pour chaque logo. Comme nos
   SVG ne portent aucune dimension propre (seulement un viewBox), plus rien ne
   fixait la taille et le navigateur en inventait une : image écrasée à zéro
   sous Chrome, image géante sous Safari iPhone — où elle débordait de l'écran
   et passait sous le menu (constaté par Val le 2026-09-07).
   Les sélecteurs ci-dessous sont volontairement assez précis pour gagner. */
.espace-rail a.espace-rail__logo {
  display: block; width: auto; margin: 0 0 18px 4px; padding: 2px 0;
  background: none; border-radius: 0;
}
.espace-rail__logo img { display: block; max-width: 100%; }
/* L'icône est violette dans le fichier : on la force en blanc sur le rail. */
.espace-rail__logo img.espace-rail__logo-icone { width: 34px; height: auto; filter: brightness(0) invert(1); }
/* Logo complet : version claire déjà pensée pour fond sombre (crème, or, rose)
   — surtout PAS de filtre, qui écraserait ses accents. */
.espace-rail__logo img.espace-rail__logo-complet { height: 44px; width: auto; }
/* Nom sous l'icône dans la barre réduite : la marque reste présente là où on
   passe le plus de temps (menu d'un événement ouvert). */
.espace-rail__mot { display: none; }
.espace-rail a, .espace-rail__quitter {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 12px; border-radius: var(--rayon-petit);
  color: rgba(255,255,255,.78); text-decoration: none;
  font-family: var(--font-texte); font-size: 14px; font-weight: 600; line-height: 1.2;
  text-align: left; background: none; border: none; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.espace-rail a:hover, .espace-rail__quitter:hover { background: rgba(255,255,255,.13); color: #fff; }
.espace-rail a.actif { background: rgba(255,255,255,.18); color: #fff; }
.espace-rail__ico { display: inline-flex; flex-shrink: 0; }
.espace-rail__ico svg { width: 21px; height: 21px; display: block; }
.espace-rail__bas { margin-top: auto; width: 100%; }
.espace-rail__bas .admin-badge { margin-bottom: 10px; }

/* État réduit (une colonne contextuelle occupe la place) : bande étroite,
   icône au-dessus d'un libellé court. */
.espace-rail--reduit { width: 84px; align-items: center; padding: 14px 8px 16px; }
.espace-rail--reduit a.espace-rail__logo { margin: 0 0 16px; text-align: center; }
.espace-rail--reduit .espace-rail__logo img { width: 34px; margin: 0 auto; }
.espace-rail--reduit .espace-rail__mot {
  display: block; margin-top: 7px; text-align: center;
  font-family: var(--font-titres); font-size: 11px; line-height: 1.15;
  color: #fff; letter-spacing: .01em;
}
.espace-rail--reduit a, .espace-rail--reduit .espace-rail__quitter {
  flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 2px; font-size: 12px; line-height: 1.2; text-align: center;
}

/* Colonne de gauche contextuelle (menu de l'événement / de la configuration). */
/* La colonne s'étire sur toute la hauteur de la page (sinon le fond blanc
   s'arrête au milieu) ; c'est son CONTENU qui est collant au défilement. */
.espace-sidebar {
  width: 236px; flex-shrink: 0; box-sizing: border-box;
  background: var(--carte); border-right: 1px solid var(--violet-pale);
  display: block; padding: 20px 16px;
}
.espace-sidebar__contenu {
  position: sticky; top: 20px; display: flex; flex-direction: column; gap: 6px;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.espace-sidebar__contexte { padding: 0 4px 14px; border-bottom: 1px solid var(--violet-pale); margin-bottom: 8px; }
.espace-sidebar__retour { font-size: 13px; font-weight: 600; color: var(--encre-douce); text-decoration: none; }
.espace-sidebar__retour:hover { color: var(--violet); }
.espace-sidebar__titre {
  /* PLUS GROS QU'UN LIBELLÉ DE MENU. C'est le seul mot qui dit sur QUEL
     événement on travaille : à 1,05 rem il pesait moins que les entrées de
     navigation en dessous, et Val a édité le mauvais événement plus d'une
     fois. Le nom passe devant tout ce qui l'entoure dans cette colonne. */
  font-family: var(--font-titres); font-weight: 800; font-size: 1.4rem;
  margin: 8px 0 2px; line-height: 1.15; color: var(--encre);
  text-wrap: balance;
}
/* Et dans le fil d'Ariane, le nom de l'événement se détache des sections :
   les autres maillons sont les mêmes d'un événement à l'autre, celui-ci non. */
.fil-ariane__evenement { font-weight: 700; color: var(--encre); }

/* L'AFFICHE ET LA DATE DE L'ÉVÉNEMENT OUVERT (Val, le 2026-09-10 : « je fais des
   erreurs dans les spectacles »). L'affiche garde ses proportions, jamais
   recadrée ; sans affiche, une pastille d'initiales dont la couleur change d'un
   événement à l'autre, sur les jetons de la charte. */
.espace-sidebar__visuel { display: flex; align-items: flex-end; gap: 12px; margin-top: 12px; }
.espace-sidebar__affiche {
  width: 76px; height: auto; max-height: 112px; object-fit: contain; flex-shrink: 0;
  border-radius: 6px; box-shadow: var(--ombre-douce);
}
.espace-sidebar__pastille {
  width: 58px; height: 58px; flex-shrink: 0; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--font-titres); font-weight: 800; font-size: 21px; letter-spacing: .02em;
  color: var(--fond);
}
.espace-sidebar__pastille--0 { background: var(--action); }
.espace-sidebar__pastille--1 { background: var(--nuit); }
.espace-sidebar__pastille--2 { background: var(--succes); }
.espace-sidebar__pastille--3 { background: var(--corail); color: var(--encre); }
.espace-sidebar__pastille--4 { background: var(--ambre-texte); }
.espace-sidebar__date { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--encre); }
.espace-sidebar__date small { font-weight: 500; color: var(--encre-douce); }
/* Sur téléphone : la vignette et le nom de l'événement dans la barre du haut. */
.espace-barre-mobile__evenement {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1;
  color: var(--fond); text-decoration: none; font-family: var(--font-titres); font-weight: 800; font-size: 15px;
}
.espace-barre-mobile__evenement img { width: 26px; height: 38px; object-fit: contain; flex-shrink: 0; border-radius: 3px; }
.espace-barre-mobile__evenement span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* LA DESCRIPTION D'UN TARIF, DANS LA LISTE. Discrète quand elle sort telle
   quelle ; barrée et signalée quand le réglage la retient — pour qu'un texte
   écrit mais invisible ne passe pas pour un texte publié. */
.tarifs-desc {
  margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--encre-douce);
  max-width: 60ch;
}
.tarifs-desc__texte--muet { text-decoration: line-through; text-decoration-color: var(--encre-douce); opacity: .75; }
.tarifs-desc__alerte {
  text-decoration: none; margin-left: 6px; font-weight: 600;
  color: var(--attention-texte); white-space: nowrap;
}
.tarifs-desc__alerte:hover { text-decoration: underline; }
.espace-sidebar__titre--section { padding: 0 4px 12px; border-bottom: 1px solid var(--violet-pale); margin-bottom: 8px; }
.espace-nav { display: flex; flex-direction: column; gap: 4px; }
.espace-nav a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--rayon-petit);
  color: var(--encre); font-weight: 600; font-size: 14px; text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.espace-nav a:hover { background: var(--violet-pale); color: var(--violet); }
.espace-nav a.actif { background: var(--action-pale); color: var(--action-fonce); }
.nav-pastille {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--action); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.espace-nav__icone { display: inline-flex; flex-shrink: 0; }
.espace-nav__icone svg { width: 18px; height: 18px; display: block; }
/* Nav ADMIN : les icônes sont des <svg> posés directement dans le lien (sans le
   wrapper .espace-nav__icone) — on les bride à la même taille fine que l'orga. */
.espace-nav a > svg { width: 18px; height: 18px; flex-shrink: 0; }
.lien-deconnexion {
  background: none; border: none; cursor: pointer; padding: 0; text-align: left;
  color: var(--violet); font-weight: 600; font-size: 14px; font-family: var(--font-texte);
}
.lien-deconnexion:hover { color: var(--violet-fonce); text-decoration: underline; }

/* ---- Menu de l'événement : groupes qui se DÉPLIENT (colonne de gauche) ------
   Un seul menu vertical, chaque groupe s'ouvre sur ses pages. Remplace les
   onglets horizontaux empilés. Une chose par écran. */
.espace-nav--menu { gap: 2px; }
.espace-nav__grp {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: var(--rayon-petit); color: var(--encre); font-weight: 700;
  font-size: 14px; text-decoration: none; cursor: pointer; list-style: none;
}
.espace-nav__grp::-webkit-details-marker { display: none; }
.espace-nav__grp:hover { background: var(--violet-pale); color: var(--violet); }
.espace-nav__grp.actif { background: var(--action-pale); color: var(--action-fonce); }
.espace-nav__lib { flex: 1 1 auto; }
.espace-nav--menu .espace-nav__icone svg { width: 18px; height: 18px; }
.espace-grp { border: 0; }
.espace-grp__chev { display: inline-flex; color: var(--encre-douce); transition: transform .15s ease; flex-shrink: 0; margin-left: auto; }
.espace-grp__chev svg { display: block; }
.espace-grp.est-ouvert .espace-grp__chev { transform: rotate(90deg); }
.espace-nav__grp.actif-grp { color: var(--encre); font-weight: 800; }
.espace-grp__sous { padding: 3px 0 6px; margin: 0 0 2px 27px; border-left: 2px solid var(--violet-pale); }
.espace-nav__sous {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-left: 4px;
  border-radius: 8px; color: var(--encre-douce); font-weight: 600; font-size: 13.5px;
  text-decoration: none; transition: background .12s ease, color .12s ease;
}
.espace-nav__sous:hover { background: var(--violet-pale); color: var(--violet); }
.espace-nav__sous.actif { color: var(--action-fonce); background: var(--action-pale); font-weight: 800; }
.espace-nav__sous .nav-pastille { margin-left: auto; }

/* Contexte de l'événement en tête du menu (statut + voir en ligne). */
.espace-sidebar__statut {
  display: inline-block; margin-top: 9px; font-size: 11.5px; font-weight: 800;
  border-radius: 999px; padding: 3px 10px;
}
.espace-sidebar__statut--publie { background: var(--succes-pale); color: var(--succes); }
.espace-sidebar__statut--brouillon { background: var(--attention-pale); color: var(--attention-texte); }
.espace-sidebar__statut--archive { background: #ece5f0; color: var(--encre-douce); }
.espace-sidebar__voir { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--action); text-decoration: none; }
.espace-sidebar__voir:hover { text-decoration: underline; }

/* Titre de la page courante (une seule chose à l'écran). */
.espace-tete-page { margin: 0 0 18px; }
.espace-tete-page h1 { margin: 0; font-size: var(--t-titre); }

/* ---- Page Tarifs : matrice tarifs (lignes) × dates (colonnes) --------------
   Une seule table pour toutes les dates. Chaque case = vendus/quota du tarif
   pour cette date, cliquable vers sa fiche. Ligne de total en bas. */
.tarifs-matrice-cadre { overflow-x: auto; }
.tarifs-matrice { border-collapse: collapse; width: 100%; font-size: 14px; }
.tarifs-matrice th, .tarifs-matrice td { padding: 12px 14px; border-bottom: 1px solid #f2e9f0; text-align: center; vertical-align: middle; }
.tarifs-matrice thead th { border-bottom: 2px solid var(--violet-pale); }
.tm-coin { text-align: left; font-size: 12px; font-weight: 700; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .03em; }
.tm-date__lien { display: inline-flex; flex-direction: column; gap: 1px; text-decoration: none; color: var(--encre); }
.tm-date__lien:hover .tm-date__jour { color: var(--action); }
.tm-date__jour { font-weight: 800; font-size: 13.5px; text-transform: capitalize; }
.tm-date__heure { font-size: 12px; color: var(--encre-douce); font-weight: 600; }
.tm-nom { text-align: left; white-space: nowrap; }
.tm-nom__lib { font-weight: 800; font-size: 14.5px; }
.tm-nom .tarifs-vis { margin-left: 6px; vertical-align: middle; }
.tm-nom__prix { display: block; font-size: 12.5px; color: var(--encre-douce); font-weight: 600; margin-top: 2px; }
.tm-case a { display: inline-block; text-decoration: none; color: var(--encre); font-variant-numeric: tabular-nums; padding: 4px 9px; border-radius: 8px; }
.tm-case a:hover { background: var(--action-pale); color: var(--action-fonce); }
.tm-vendus { font-weight: 800; font-size: 16px; }
.tm-sur { color: var(--encre-douce); font-size: 13px; margin-left: 2px; }
.tm-case--epuise .tm-vendus { color: var(--action-fonce); }
.tm-vide { color: #cdbfd6; }
.tm-ajout-case { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; border: 1px dashed var(--violet-pale); color: var(--action); font-weight: 800; text-decoration: none; }
.tm-ajout-case:hover { background: var(--action-pale); border-style: solid; }
.tarifs-matrice tfoot .tm-total th, .tarifs-matrice tfoot .tm-total td { border-bottom: 0; border-top: 2px solid var(--violet-pale); font-weight: 700; }
.tm-total th { text-align: left; color: var(--encre-douce); text-transform: uppercase; font-size: 12px; letter-spacing: .03em; }
.tm-total .tm-vendus { font-size: 15px; }
.tm-pct { font-size: 12px; color: var(--encre-douce); margin-left: 3px; }
.tarifs-matrice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.tarifs-matrice-actions__lib { font-size: 13px; font-weight: 700; color: var(--encre-douce); }
/* Restant + détail par canal (optionnel, via case à cocher CSS). */
.tm-reste { display: block; font-size: 11px; color: var(--encre-douce); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tm-canaux { display: none; margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--violet-pale); font-size: 11px; color: var(--encre-douce); line-height: 1.5; text-align: left; }
.tm-canaux span { display: block; white-space: nowrap; }
.tm-canaux b { color: var(--encre); font-variant-numeric: tabular-nums; }
.tm-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.tm-toggle-lbl { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--action); border: 1px solid var(--violet-pale); border-radius: 8px; padding: 7px 12px; margin-bottom: 14px; user-select: none; }
.tm-toggle-lbl small { color: var(--encre-douce); font-weight: 600; }
.tm-toggle-lbl:hover { background: var(--action-pale); }
.tm-toggle-input:checked ~ .tm-toggle-lbl { background: var(--action); color: #fff; border-color: var(--action); }
.tm-toggle-input:checked ~ .tm-toggle-lbl small { color: #ffd9f2; }
.tm-toggle-input:focus-visible ~ .tm-toggle-lbl { outline: 2px solid var(--action); outline-offset: 2px; }
.tm-toggle-input:checked ~ .tarifs-matrice-cadre .tm-canaux { display: block; }
.tarifs-aide-date { margin-top: 16px; color: var(--encre-douce); line-height: 1.5; }
.tarifs-aide-date svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }

/* ---- Frise de tournée (Aperçu) : toutes les dates en un coup d'œil --------- */
.frise { display: flex; gap: 4px; overflow-x: auto; padding: 8px 2px 4px; }
.frise__etape { flex: 1 0 110px; min-width: 110px; text-align: center; text-decoration: none; color: var(--encre); border-radius: 12px; padding: 10px 6px; transition: background .12s ease; }
.frise__etape:hover { background: #faf3f8; }
.frise__pt { display: block; width: 12px; height: 12px; border-radius: 999px; margin: 0 auto 8px; background: #cdbfd6; color: #cdbfd6; box-shadow: 0 0 0 3px var(--carte), 0 0 0 4px currentColor; }
/* Clés de l'échelle unique (src/util/remplissage.js) : complet | bien | encours | inconnu. */
.frise__etape--complet .frise__pt { background: var(--action); color: var(--action); }
.frise__etape--bien .frise__pt { background: var(--succes); color: var(--succes); }
.frise__etape--encours .frise__pt { background: var(--encre-douce); color: var(--encre-douce); }
.frise__etape--inconnu .frise__pt { background: var(--desactive-bg); color: var(--desactive-bg); }
.frise__jour { font-family: var(--font-titres); font-weight: 800; font-size: 17px; line-height: 1; }
.frise__mois { display: block; font-size: 12px; color: var(--encre-douce); font-weight: 600; margin-bottom: 8px; text-transform: lowercase; }
.frise__jauge { display: block; margin: 0 auto 6px; max-width: 86px; }
.frise__jauge svg { display: block; width: 100%; }
.frise__pct { display: block; font-size: 13px; font-weight: 800; }
.frise__etape--complet .frise__pct { color: var(--action-fonce); }
.frise__etape--bien .frise__pct { color: var(--succes); }
.frise__etape--encours .frise__pct, .frise__etape--inconnu .frise__pct { color: var(--encre-douce); }
.frise__sous { display: block; font-size: 11.5px; color: var(--encre-douce); margin-top: 1px; font-variant-numeric: tabular-nums; }
.frise__add { flex: 0 0 92px; min-width: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1.5px dashed var(--violet-pale); border-radius: 12px; color: var(--action); font-weight: 700; font-size: 12.5px; text-decoration: none; text-align: center; line-height: 1.2; }
.frise__add:hover { background: var(--action-pale); border-style: solid; }
.frise__add-plus { font-size: 22px; line-height: 1; }

/* ---- Page d'une date : uniquement SES réglages. Les tarifs vivent dans la
   page Tarifs ; ici, un simple rappel + le bouton pour y aller. -------------- */
.seance-bloc-plat { margin-bottom: 10px; }
.seance-bloc-plat--reglages { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--violet-pale); }
.seance-rappel { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.seance-rappel__txt h2 { margin: 0; }
.seance-rappel__txt p { margin: 4px 0 0; }

/* Zone de contenu (à droite du rail et de la colonne). La colonne de texte est
   centrée dans l'espace restant : sur un grand écran, coller le contenu à
   gauche laissait un vide déséquilibré à droite. */
.espace-zone { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.espace-main { flex: 1; padding: 28px 32px 40px; max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; }

/* Page de connexion : pas de barre latérale, contenu centré. */
.espace-body--connexion .espace-zone { align-items: center; }

/* Titres harmonisés sur toute la zone organisateur (cohérence entre pages). */
.espace-main h1 { font-size: var(--t-titre); }
.espace-titre { margin: 4px 0 8px; }
.espace-titre h1 { margin: 0; display: flex; align-items: center; gap: 10px; }

/* ---- Sous-onglets horizontaux (Configuration, et plus tard le hub spectacle)
   Une seule logique d'onglets partout : rangée de liens, l'actif en fuchsia
   souligné. Remplace la colonne de gauche pour les sections à peu d'entrées. */
.espace-tete { margin: 2px 0 20px; }
.espace-tete__sur { margin: 0 0 2px; font-size: var(--t-mention); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--encre-douce); }
.espace-tete h1 { margin: 0; }
.espace-onglets {
  display: flex; gap: 2px; flex-wrap: wrap; margin-top: 16px;
  border-bottom: 1px solid #E7D4E1;
}
.espace-onglets a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: -1px;
  color: var(--encre-douce); text-decoration: none; font-weight: 600; font-size: 15px;
  border-bottom: 2px solid transparent; border-radius: var(--rayon-petit) var(--rayon-petit) 0 0;
  transition: color .15s ease, background .15s ease;
}
.espace-onglets a:hover { color: var(--encre); background: var(--action-pale); }
.espace-onglets a.actif { color: var(--action); border-bottom-color: var(--action); }
.espace-onglets__ico { display: inline-flex; }
.espace-onglets__ico svg { width: 18px; height: 18px; display: block; }
@media (max-width: 640px) {
  .espace-onglets { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .espace-onglets a { white-space: nowrap; }
}

/* ---- Champ « liste de noms » (tags) : distribution (comédiens), etc. ------
   Une zone qui ressemble à un champ de formulaire ; les noms ajoutés
   deviennent des puces fuchsia-pâle avec une croix pour retirer. */
.champ-tags { display: block; margin-top: 6px; }
.champ-tags__label { display: block; font-weight: 600; color: var(--encre); margin-bottom: 6px; }
.champ-tags__label small { font-weight: 400; color: var(--encre-douce); }
.champ-tags__zone {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; min-height: 46px;
  background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon-petit);
}
.champ-tags__zone:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-pale); }
.champ-tags__chips { display: contents; }
.champ-tags__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 12px; border-radius: 999px;
  background: var(--action-pale); color: var(--action-fonce); font-weight: 600; font-size: 14px;
}
.champ-tags__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(158, 18, 111, .12); color: var(--action-fonce);
  font-size: 12px; line-height: 1; padding: 0;
}
.champ-tags__x:hover { background: var(--action); color: #fff; }
.champ-tags__saisie {
  flex: 1 1 160px; min-width: 140px;
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  padding: 4px 2px !important; margin: 0 !important; font-size: 15px;
}
.champ-tags__saisie:focus { outline: none; }

/* ---- Hub du spectacle : en-tête + onglets à deux niveaux -----------------
   Même patron que Configuration pour les onglets (.espace-onglets) ; on ajoute
   ici l'en-tête (retour, titre, statut, voir en ligne) et le 2e niveau. */
/* Paragraphe d'introduction juste sous les onglets (remplace les anciens gros
   H1 de section, désormais redondants avec l'en-tête du hub + les onglets). */
.espace-sous--lead { margin: -6px 0 20px; max-width: 700px; }

/* Barre d'actions propres à une date (page détail de la séance). */
.seance-actions-date {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 6px 0 22px;
}
.seance-actions-date__lib { font-size: 13px; font-weight: 700; color: var(--encre-douce); margin-right: 2px; }

/* Bloc « Ajouter des séances » repliable : compact par défaut, déplié si aucune
   date encore (ou au clic). Évite qu'un gros formulaire domine la liste. */
.bloc-ajout > summary.bloc-ajout__sum {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-sous); font-weight: 800; color: var(--encre);
}
.bloc-ajout > summary.bloc-ajout__sum::-webkit-details-marker { display: none; }
.bloc-ajout__chevron { flex: none; color: var(--action); transition: transform .15s ease; }
.bloc-ajout[open] .bloc-ajout__chevron { transform: rotate(90deg); }
.bloc-ajout[open] > summary.bloc-ajout__sum { margin-bottom: 16px; }
/* Bandeau « gestion complète » sur la compta (rend le mode visible). */
.compta-gestion-badge {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  background: var(--action-pale); border-left: 4px solid var(--action);
  border-radius: var(--rayon-petit); padding: 13px 16px; margin: 4px 0 20px;
  font-size: 14px; color: var(--encre); line-height: 1.45;
}
.compta-gestion-badge__pastille {
  background: var(--action); color: #fff; font-weight: 800; font-size: 12px;
  padding: 3px 11px; border-radius: 999px; white-space: nowrap; align-self: center;
}
.compta-plateformes { margin: 0 0 22px; }
.compta-plateformes h2 { margin: 0 0 12px; font-size: var(--t-sous); }

/* Fil d'Ariane (pages profondes : détail d'une date, d'une commande…). */
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 13px; }
.fil-ariane a { color: var(--encre-douce); text-decoration: none; font-weight: 600; }
.fil-ariane a:hover { color: var(--action); text-decoration: underline; }
.fil-ariane__sep { color: var(--encre-douce); opacity: .5; }
.fil-ariane__ici { color: var(--encre); font-weight: 700; }
.espace-tete--spectacle { margin: 2px 0 22px; }
.espace-tete__retour {
  display: inline-block; margin-bottom: 8px;
  color: var(--encre-douce); text-decoration: none; font-weight: 600; font-size: 14px;
}
.espace-tete__retour:hover { color: var(--action); }
.espace-tete__ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.espace-tete__titre { margin: 0; }
.espace-tete__statut {
  padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.espace-tete__statut--publie { background: var(--succes-pale); color: var(--succes); }
.espace-tete__statut--brouillon { background: var(--action-pale); color: var(--action-fonce); }
.espace-tete__statut--archive { background: #ECE6F0; color: var(--encre-douce); }
.espace-tete__voir {
  margin-left: auto; color: var(--action); font-weight: 600; font-size: 14px; text-decoration: none;
}
.espace-tete__voir:hover { text-decoration: underline; }
/* Le 2e niveau reprend l'en-tête d'onglets juste sous les 6 groupes. */
.espace-tete--spectacle .espace-onglets { margin-top: 16px; }
.espace-sousonglets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.espace-sousonglets a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--encre-douce); text-decoration: none; background: transparent;
  transition: color .15s ease, background .15s ease;
}
.espace-sousonglets a:hover { background: var(--action-pale); color: var(--encre); }
.espace-sousonglets a.actif { background: var(--action); color: #fff; }
.espace-sousonglets .nav-pastille { background: var(--ambre, #FFC24B); color: var(--encre); }
.espace-sousonglets a.actif .nav-pastille { background: #fff; color: var(--action); }
@media (max-width: 640px) {
  .espace-tete__voir { margin-left: 0; flex-basis: 100%; }
  .espace-sousonglets { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .espace-sousonglets a { white-space: nowrap; }
}

/* ---- Mur d'affiches vivantes (accueil organisateur) ----------------------
   Grille de cartes-affiches ; chaque événement montre son affiche en grand,
   son statut et sa jauge de remplissage en direct. Réutilise .spec-ligne /
   .spec-menu (hooks JS de filtrage, clic, menu d'actions). */
.mur-affiches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 22px;
  margin-top: 18px;
}
.affiche-carte {
  position: relative; display: flex; flex-direction: column;
  background: var(--carte); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  /* overflow visible : le menu ⋮ doit pouvoir déborder de la carte. */
}
.affiche-carte.spec-ligne--clic { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.affiche-carte.spec-ligne--clic:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(36,20,54,.14), 0 22px 44px rgba(36,20,54,.10);
}
.affiche-carte__poster {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--rayon) var(--rayon) 0 0; background: var(--nuit);
}
.affiche-carte__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.affiche-carte__poster--vide {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--nuit), var(--action-fonce));
  color: rgba(255,255,255,.45);
}
.affiche-carte__poster--vide svg { width: 48px; height: 48px; }
.affiche-carte__statut {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  box-shadow: 0 1px 4px rgba(36,20,54,.18);
}
/* Menu ⋮ posé en haut à droite de l'affiche (positionné par rapport à la carte
   pour que la liste déroulante ne soit pas rognée par l'affiche). */
.affiche-carte__menu.spec-menu { position: absolute; top: 8px; right: 8px; z-index: 4; }
.affiche-carte__menu .spec-menu__btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 0; color: var(--encre);
  box-shadow: 0 1px 5px rgba(36,20,54,.22);
}
.affiche-carte__menu .spec-menu__btn:hover { background: #fff; color: var(--action); }
.affiche-carte__corps {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 15px 15px; flex: 1;
}
.affiche-carte__titre {
  font-family: var(--font-titres); font-weight: 700; font-size: 16px;
  line-height: 1.25; color: var(--encre); text-decoration: none;
}
a.affiche-carte__titre:hover { color: var(--action); }
.affiche-carte__lieu, .affiche-carte__dates { font-size: 13px; color: var(--encre-douce); }
.affiche-carte__jauge { margin-top: auto; padding-top: 12px; }
.affiche-jauge__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.affiche-jauge__pct { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--encre); }
.affiche-jauge__pct.niv-vert { color: #1E9E70; }
.affiche-jauge__pct.niv-orange { color: #C08A1E; }
.affiche-jauge__pct.niv-rouge { color: #B23A34; }
.affiche-jauge__sub { font-size: 12px; color: var(--encre-douce); }
.affiche-jauge__barre { height: 8px; border-radius: 999px; background: #ECE6F2; overflow: hidden; }
.affiche-jauge__barre svg { display: block; }
.affiche-carte__metrics { margin-top: 9px; font-size: 13px; color: var(--encre-douce); }
.affiche-carte__metrics .or { color: var(--action-fonce); }
@media (max-width: 480px) {
  .mur-affiches { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .affiche-carte__titre { font-size: 15px; }
}
/* Icône devant un titre de page (ex. boussole des productions autonomes). */
.titre-ico { display: inline-flex; flex-shrink: 0; color: var(--action); }
.titre-ico svg { width: 26px; height: 26px; display: block; }
.espace-sous { color: var(--encre-douce); margin: 4px 0 0; }

/* Bandeau « à reverser » (total carte web) en tête de la page Autonomes. */
.reverse-total {
  background: var(--action-pale); border: 1px solid var(--action);
  border-radius: var(--rayon); padding: 16px 18px; margin: 0 0 18px;
}
.reverse-total__titre { margin: 0 0 8px; font-weight: 700; color: var(--action-fonce); }
.reverse-total__chiffres { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.reverse-total__chiffres span { color: var(--encre-douce); font-size: 14px; }
.reverse-total__chiffres strong { color: var(--encre); font-size: 15px; font-variant-numeric: tabular-nums; }
.reverse-total__net strong { color: var(--action-fonce); font-size: 1.15rem; }
.reverse-total__note { margin: 10px 0 0; font-size: 12.5px; color: var(--encre-douce); }

/* Ligne compta carte web sur une carte de production autonome. */
.carte-web-compta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 10px 12px; margin: 4px 0 12px;
  background: var(--fond); border: 1px solid var(--violet-pale);
  border-radius: var(--rayon-petit); font-size: 13.5px; color: var(--encre-douce);
}
.carte-web-compta strong { color: var(--encre); font-variant-numeric: tabular-nums; }
.carte-web-compta__lib { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--encre); }
.carte-web-compta__lib svg { width: 15px; height: 15px; }
.carte-web-compta__net { margin-left: auto; }
.carte-web-compta__net strong { color: var(--action-fonce); }

/* ===== Reversements par spectacle (page production autonome) ===== */
/* Sous-titre séparant « À reverser » (en cours) et « Versés » (effectués). */
.reversement-sous-titre {
  font-family: var(--font-titres); font-weight: 800; font-size: 1.05rem; color: var(--encre);
  margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--violet-pale);
}
.reversement-sous-titre:first-of-type { margin-top: 4px; }
/* Comptabilité « Par événement » : sous-sections À reverser / Soldés. */
.compta-sous-section {
  font-family: var(--font-titres); font-weight: 800; font-size: 1.1rem; color: var(--encre);
  margin: 22px 0 12px; display: flex; align-items: center; gap: 8px;
}
.compta-sous-section--soldes { color: #1E7A3D; }
.compta-sous-section--soldes svg { width: 18px; height: 18px; }
.compta-chiffre__solde {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: 12.5px; font-weight: 700; color: #1E7A3D;
}
.compta-chiffre__solde svg { width: 14px; height: 14px; }
.reversement-spec {
  background: var(--carte); border: 1px solid var(--violet-pale); border-left: 4px solid var(--violet-pale);
  border-radius: var(--rayon); padding: 14px 16px; margin: 0 0 12px;
}
/* « À verser » : la dernière séance est passée et il reste à virer → on alerte. */
.reversement-spec--du { border-left-color: #E08600; background: #fff9f0; }
.reversement-spec__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reversement-spec__tete h3 { margin: 0; font-size: 1.05rem; }
.reversement-spec__dates { margin: 3px 0 0; font-size: 13px; color: var(--encre-douce); }
.badge-verser, .badge-verse, .badge-encours {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.badge-verser { background: #E08600; color: #fff; }
.badge-verse { background: #DFF3E4; color: #1E7A3D; }
.badge-encours { background: var(--violet-pale); color: var(--encre-douce); }
.reversement-spec__chiffres {
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; margin-top: 10px;
  font-size: 14px; color: var(--encre-douce);
}
.reversement-spec__chiffres strong { color: var(--encre); font-variant-numeric: tabular-nums; }
.reversement-spec__areverser strong { font-size: 1.1rem; color: var(--action-fonce); }
.reversement-spec__areverser.est-du strong { color: #C56A00; }
.reversement-spec__virements { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--violet-pale); display: flex; flex-direction: column; gap: 6px; }
.reversement-spec__virements li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.reversement-spec__virements li strong { font-variant-numeric: tabular-nums; }
.reversement-spec__virements svg { width: 15px; height: 15px; color: #1E7A3D; vertical-align: -2px; }
.reversement-spec__ref { color: var(--encre-douce); font-style: italic; }
.lien-suppr { background: none; border: none; cursor: pointer; padding: 0; color: var(--encre-douce); font-size: 13px; text-decoration: underline; }
.lien-suppr:hover { color: var(--erreur, #C0392B); }
.reversement-spec__reserve {
  margin: 12px 0 0; padding: 8px 12px; font-size: 13px; color: var(--encre-douce);
  background: var(--violet-pale); border-radius: var(--rayon-petit);
}
.reversement-spec__reserve strong { color: var(--encre); }
.reversement-spec__saisie { margin-top: 12px; }
.reversement-spec__saisie > summary {
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--action-fonce);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.reversement-spec__saisie > summary::before { content: '+ '; font-weight: 800; }
.reversement-spec__saisie[open] > summary::before { content: '− '; }
.form-versement {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px;
  padding: 14px; background: var(--action-pale); border-radius: var(--rayon-petit);
}
.form-versement label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--encre); }
.form-versement input { padding: 8px 10px; border: 1px solid var(--violet-pale); border-radius: var(--rayon-petit); font: inherit; }
.form-versement__libelle { flex: 1 1 260px; }
.reversement-total {
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline;
  padding: 12px 16px; margin: 4px 0 8px; border-top: 2px solid var(--violet);
  font-size: 14px; color: var(--encre-douce);
}
.reversement-total strong { color: var(--encre); font-variant-numeric: tabular-nums; }
.reversement-total__restant { margin-left: auto; }
.reversement-total__restant strong { color: var(--action-fonce); font-size: 1.1rem; }

/* ===== Avances de trésorerie ===== */
/* Côté organisateur : bouton vert « Obtenir une avance » (résumé d'un <details>). */
.avance-details > summary.btn-avance {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  background: #1E7A3D; color: #fff; border-radius: var(--rayon-petit);
  padding: 8px 14px; font-weight: 700; font-size: 13.5px; white-space: nowrap;
}
.avance-details > summary.btn-avance::-webkit-details-marker { display: none; }
.avance-details > summary.btn-avance:hover { background: #17662f; }
.avance-details[open] > summary.btn-avance { margin-bottom: 10px; }
/* Bouton grisé : objectif d'avance pas encore atteint (devient vert quand atteint). */
.btn-avance--grise {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--violet-pale); color: var(--encre-douce);
  border: 1px solid var(--violet-pale); border-radius: var(--rayon-petit);
  padding: 8px 14px; font-weight: 700; font-size: 13.5px;
  cursor: not-allowed;
}
.form-avance { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px; background: var(--fond); border: 1px solid #cfe8d6; border-radius: var(--rayon-petit); }
.form-avance label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.form-avance input { padding: 8px 10px; border: 1px solid var(--violet-pale); border-radius: var(--rayon-petit); font: inherit; }
.avance-statut { display: block; font-size: 13px; color: #1E7A3D; font-weight: 600; margin-bottom: 4px; }
.avance-hint { color: var(--encre-douce); }
/* Côté admin : demande d'avance à exécuter. */
.avance-demande {
  margin: 12px 0 0; padding: 12px 14px; background: #fff9f0; border: 1px solid #E08600; border-radius: var(--rayon-petit);
}
.avance-demande__lbl { margin: 0 0 8px; font-weight: 700; color: #C56A00; display: flex; align-items: center; gap: 6px; }
.avance-demande__lbl svg { width: 16px; height: 16px; }

/* Regroupement du menu par l'espacement seul : un filet très fin sépare les
   blocs (Vendre / Suivre / Jour J / Configuration) sans intitulé texte. */
.espace-nav__sep {
  display: block; height: 1px; background: var(--violet-pale);
  margin: 10px 12px;
}
/* Titre d'un groupe du menu de l'événement : repère « où trouver quoi ».
   Un petit marqueur coloré par groupe (décor, tiré de la charte) rend les
   sections distinguables d'un coup d'œil ; le texte reste en encre nette. */
.espace-nav__titre {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 12px 6px; font-family: var(--font-titres); font-size: 11px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre);
}
.espace-nav__titre::before {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px;
  background: var(--marqueur, var(--encre-douce));
}
.espace-nav__titre:first-child { margin-top: 4px; }
.espace-nav__titre--billets      { --marqueur: var(--action); }
.espace-nav__titre--boutique     { --marqueur: var(--corail); }
.espace-nav__titre--participants { --marqueur: var(--ambre); }
.espace-nav__titre--reglages     { --marqueur: var(--encre-douce); }

/* LA BARRE DE TÉLÉPHONE ET LE TIROIR ---------------------------------------
   Cachées sur grand écran : là, le rail est une colonne permanente. */
.espace-barre-mobile { display: none; }
.espace-voile { display: none; }
.espace-tiroir__fermer { display: none; }
/* L'enveloppe des deux menus. « display: contents » la fait disparaître de la
   mise en page : rail et colonne restent enfants directs de .espace-corps, donc
   côte à côte exactement comme avant. Elle ne devient une vraie boîte que sur
   téléphone, où elle est le tiroir. */
.espace-tiroir { display: contents; }

/* En dessous de 820 px : le rail devient un TIROIR qu'un bouton « Menu » ouvre
   par-dessus la page, et la colonne contextuelle un bandeau d'onglets défilant.
   Le rail a d'abord été mis à l'horizontale ici. Mesuré sur iPhone le
   2026-09-07 : 1 185 px de menu dans 375 px d'écran — deux sections visibles,
   sept hors de l'écran (dont Comptabilité et Configuration), et aucun signe
   qu'il fallait faire glisser la barre du doigt. */
@media (max-width: 820px) {
  .espace-corps { flex-direction: column; }
  .espace-barre-mobile {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 40;
    background: var(--nuit); padding: 8px 12px;
  }
  .espace-barre-mobile__menu {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border: none; border-radius: var(--rayon-petit);
    background: rgba(255,255,255,.13); color: #fff; cursor: pointer;
    font-family: var(--font-texte); font-size: 14px; font-weight: 700;
  }
  .espace-barre-mobile__menu:hover { background: rgba(255,255,255,.2); }
  .espace-barre-mobile__traits svg { width: 20px; height: 20px; display: block; }
  .espace-barre-mobile__logo { display: block; margin-left: auto; }
  .espace-barre-mobile__logo img { height: 30px; width: auto; display: block; }

  /* LE TIROIR : hors de l'écran par défaut, il glisse depuis la gauche. Il
     porte les deux menus l'un sous l'autre — les sections, puis l'événement. */
  .espace-tiroir {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
    width: min(300px, 88vw); z-index: 60;
    background: var(--nuit); overflow-y: auto;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .espace-tiroir--ouvert { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.5); }
  .espace-tiroir__fermer {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 40px; height: 40px; padding: 0;
    border: none; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.13); color: #fff;
  }
  .espace-tiroir__fermer:hover { background: rgba(255,255,255,.24); }
  .espace-tiroir__fermer svg { width: 20px; height: 20px; display: block; }
  /* L'administration n'a pas de rail sombre : son tiroir est clair, et une
     croix blanche y serait invisible. Elle prend donc l'encre. */
  .espace-tiroir--clair { background: var(--carte); }
  .espace-tiroir--clair .espace-tiroir__fermer {
    background: var(--violet-pale); color: var(--encre);
  }
  .espace-tiroir--clair .espace-tiroir__fermer:hover { background: var(--action-pale); }
  /* Dans le tiroir, le rail n'est plus ni collant ni pleine hauteur : il n'est
     que le premier des deux menus. */
  .espace-rail, .espace-rail--reduit {
    position: static; width: 100%; height: auto; flex: 0 0 auto;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 18px 12px 16px; overflow: visible;
  }
  /* Le tiroir est large : le logo y reprend une taille normale, aligné à
     gauche, avec le nom à côté — et non l'icône seule, centrée et minuscule,
     héritée de l'état réduit du rail sur ordinateur. */
  .espace-rail a.espace-rail__logo,
  .espace-rail--reduit a.espace-rail__logo {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 18px 4px; flex-shrink: 0; text-align: left;
  }
  .espace-rail--reduit .espace-rail__logo img { margin: 0; }
  .espace-rail__logo img.espace-rail__logo-icone { width: 30px; }
  .espace-rail__logo img.espace-rail__logo-complet { height: 34px; }
  .espace-rail--reduit .espace-rail__mot {
    display: block; margin: 0; text-align: left; font-size: 13px; line-height: 1.15;
  }
  .espace-rail a, .espace-rail__quitter,
  .espace-rail--reduit a, .espace-rail--reduit .espace-rail__quitter {
    width: 100%; flex-direction: row; align-items: center; gap: 12px;
    padding: 12px; font-size: 14px; text-align: left; flex-shrink: 0;
  }
  .espace-rail__bas { margin-top: auto; width: 100%; }
  .espace-rail__bas .admin-badge { display: none; }
  .espace-voile {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(20,8,32,.55);
  }
  .espace-voile[hidden] { display: none; }
  /* La page ne défile plus derrière le tiroir ouvert. */
  body.espace-tiroir-ouvert { overflow: hidden; }
  /* Le menu de l'événement, deuxième étage du tiroir. Il garde son fond clair,
     comme sur ordinateur où il est la colonne claire à côté du rail sombre :
     c'est ce qui distingue « les sections » de « cet événement-ci ». Il défilait
     naguère en onglets horizontaux — même piège que le rail, six rubriques sur
     huit hors de l'écran. Il redevient donc une liste verticale, comme ailleurs. */
  .espace-sidebar {
    width: 100%; height: auto; position: static; flex: 0 0 auto;
    padding: 14px 12px 20px; border-right: none;
  }
  .espace-sidebar__contenu { position: static; max-height: none; overflow: visible; }
  .espace-nav { flex-direction: column; }
  .espace-nav a { white-space: normal; }
  .espace-main { padding: 20px 16px 36px; }
  .espace-main h1 { font-size: var(--t-titre); }
}

/* Cartes de statistiques */
.stats-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 24px 0 36px; }
.stat-carte {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 4px;
}
.stat-valeur { font-family: var(--font-titres); font-weight: 800; font-size: var(--t-chiffre); color: var(--encre); line-height: 1.1; }
.stat-libelle { color: var(--encre-douce); font-size: 14px; font-weight: 600; }
/* Carte mise en avant (commission Féemoi) */
.stat-carte--accent { background: var(--violet); }
.stat-carte--accent .stat-valeur { color: #fff; }
.stat-carte--accent .stat-libelle { color: rgba(255,255,255,.82); }
.stat-detail { font-size: 12.5px; color: var(--encre-douce); margin-top: 4px; }
.stat-detail strong { font-variant-numeric: tabular-nums; }
.stat-carte--accent .stat-detail { color: rgba(255,255,255,.78); }
.stat-carte--accent .stat-detail strong { color: #fff; }
.stat-carte--lien { text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.stat-carte--lien:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(74,35,90,.22); }

/* ---- Tableau de bord focalisé d'un spectacle ---- */
.sp-dash-grille { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; margin: 6px 0 10px; }
.sp-dash-corps { flex: 1 1 360px; min-width: 0; }
.sp-dash-affiche { flex: 0 0 auto; width: 340px; max-width: 100%; border-radius: var(--rayon-petit, 10px); overflow: hidden; box-shadow: var(--ombre-douce); background: var(--violet-pale); }
.sp-dash-affiche img { width: 100%; height: auto; display: block; }
.sp-dash-affiche--vide { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 480px; color: var(--encre-douce); }
.sp-dash-affiche--vide svg { width: 72px; height: 72px; }
.sp-dash-infos { min-width: 0; flex: 1 1 260px; }
.sp-dash-infos h1 { margin: 0 0 6px; }
.sp-dash-statut { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.sp-dash-nbseances { font-size: 13px; color: var(--encre-douce); }
.sp-dash-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sp-dash-actions form { margin: 0; }
.sp-dash-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.sp-dash-actions .btn svg { width: 15px; height: 15px; }

/* --- Module d'intégration (iframe sur site tiers) : sans chrome du site --- */
body.embed { background: transparent; }
body.embed > main.conteneur { max-width: 760px; margin: 0 auto; padding: 12px 16px; }
body.embed .fiche-spectacle { margin-top: 0; }

/* --- Page « Intégrer la boutique » (espace organisateur) --- */
.muet { color: var(--encre-douce); font-size: 14px; }
.carte-simple { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 20px 22px; }
.integ-bloc { margin-top: 18px; }
.integ-bloc h2 { margin: 0 0 4px; font-size: var(--t-sous); }
.integ-code { margin-top: 12px; }
.integ-code pre { background: var(--encre); color: #F3EEF9; border-radius: var(--rayon-petit); padding: 14px 16px; overflow-x: auto; margin: 0 0 10px; }
.integ-code code { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; white-space: pre; }
.integ-apercu { border: 1px solid var(--violet-pale); border-radius: var(--rayon-petit); overflow: hidden; background: var(--fond); }

/* --- Catalogue des moyens de paiement (espace organisateur) --- */
/* Une case grisée parce qu'elle n'a plus d'objet : on la voit éteinte, et la
   phrase à côté dit pourquoi (écran de duplication, tarifs sans dates). */
/* La date de la copie, sous la case des dates dont elle dépend. */
.dupli-date { margin: -4px 0 14px 34px; max-width: 320px; }

/* LA RÉDUCTION DU PASS : trois choix exclusifs, avec leur champ à côté. Le
   champ ne vaut que pour le choix qu'il accompagne — les mettre sur la même
   ligne que leur bouton radio est ce qui le dit sans phrase. */
/* La période de vente d'un tarif : deux dates côte à côte. */
/* Qui compose le pass : deux choix exclusifs, en tête du bloc. */
.pass-mode { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--violet-pale); }
.pass-mode__titre { display: block; font-weight: 700; font-size: var(--t-meta); margin-bottom: 8px; }
.pass-mode .case { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }

/* Le compte des quotas d'une date : il se lit sous la capacité, là où on vient
   de la régler. Juste = discret ; faux = visible. */
.repartition { margin: -6px 0 14px; }
.repartition--ok { font-size: var(--t-meta); }

/* L'ÉCHÉANCE D'UN TARIF DE LANCEMENT. Elle doit se voir sans crier : c'est une
   information, pas une alarme. Les deux derniers jours, elle passe en accent. */
.tarif-echeance { display: inline-block; margin-top: 2px; color: var(--encre-douce); font-size: 12px; line-height: 1.35; }
.tarif-echeance__apres { white-space: nowrap; }
.tarif-echeance--urgent { color: var(--action); font-weight: 700; }

/* Chaque pass composé porte SON prix : avec plusieurs compositions, un « prix
   unitaire » n'existe pas. */
.tarif-pass__bloc { padding: 8px 0; }
.tarif-pass__bloc + .tarif-pass__bloc { border-top: 1px dashed var(--violet-pale); }
.tarif-pass__rang { display: block; font-weight: 700; font-size: var(--t-meta); }
.tarif-pass__prix-bloc { display: block; font-size: var(--t-meta); color: var(--encre-douce); margin-top: 2px; }

/* LE PASS QUE L'ACHETEUR COMPOSE : une ligne par soirée, sa liste à droite.
   La règle « un tarif par jour » est dans la forme même de l'écran. */
.tarif-pass-choix { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tarif-pass-choix li { margin: 0; }
.tarif-pass-choix label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tarif-pass-choix small { color: var(--encre-douce); }
.tarif-pass-choix select { margin-left: auto; max-width: 100%; }
@media (max-width: 620px) {
  .tarif-pass-choix select { margin-left: 0; width: 100%; }
}

.periode-vente { margin-top: 12px; }

.pass-remise { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--violet-pale); }
.pass-remise__titre { display: block; font-weight: 700; font-size: var(--t-meta); margin-bottom: 8px; }
.pass-remise__choix { display: flex; flex-direction: column; gap: 8px; }
.pass-remise__choix .case { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pass-remise__choix input[type="text"] { width: 6em; }

.dupli-choix--eteint { opacity: .55; }
.dupli-choix__lie { color: var(--encre-douce); font-style: italic; }

/* LA PORTE DE RETOUR quand on arrive ici depuis un formulaire en cours.
   Val, le 2026-09-08 : « je ne savais plus où repartir ». Elle se voit en haut
   en arrivant, et se redit en bas une fois le moyen ajouté. */
.mp-retour { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.mp-retour--bas { max-width: 640px; margin: 18px 0 0; }
.mp-retour .champ-aide { margin: 0; }

.mp-liste { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 8px 0 26px; }
.mp-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--carte); border-radius: var(--rayon-petit); box-shadow: var(--ombre-douce); padding: 12px 16px; }
.mp-item__nom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.mp-item__lib { font-weight: 700; }
.mp-item__actions { display: flex; align-items: center; gap: 6px; }
.mp-item__actions form { margin: 0; }
.mp-tag { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.mp-tag--en_ligne { background: var(--violet-pale); color: var(--violet); }
.mp-tag--guichet { background: #FBEECF; color: var(--or-fonce); }
.mp-tag--import { background: #ECEAEE; color: var(--encre-douce); }
.mp-tag--requis { background: #E3F3EC; color: var(--succes); }
.mp-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--violet-pale); background: var(--carte); color: var(--encre-douce); cursor: pointer; font-size: 15px; line-height: 1; }
.mp-btn:hover:not([disabled]) { border-color: var(--violet); color: var(--violet); }
.mp-btn[disabled] { opacity: .4; cursor: default; }
.mp-btn svg { width: 16px; height: 16px; }
.mp-btn--suppr:hover { border-color: var(--erreur); color: var(--erreur); }

/* SUPPRIMER UNE SALLE. Une action destructive se présente à part du formulaire
   d'édition — on ne se trompe pas de bouton — et reste discrète tant qu'on ne
   la survole pas : le rouge annonce, il ne crie pas. */
.salle-suppression { margin: 28px 0 0; padding: 18px 20px; border: var(--bordure-fine);
  border-radius: var(--rayon-petit); background: var(--carte); max-width: 620px; }
.salle-suppression h2 { margin: 0 0 6px; font-size: 1.05rem; }
.salle-suppression p { margin: 0 0 12px; font-size: 13px; color: var(--encre-douce); line-height: 1.45; }
.salle-suppression form { margin: 0; }
.salle-suppression__btn:hover { border-color: var(--erreur); color: var(--erreur); }
.salle-suppression__non { display: flex; align-items: flex-start; gap: 8px; margin-top: 24px;
  max-width: 620px; }
.salle-suppression__non svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.mp-btn--verrou { cursor: default; }
.mp-ajout { max-width: 640px; background: var(--carte); border: 1.5px dashed var(--violet-pale); border-radius: var(--rayon); padding: 18px 20px; }
.mp-ajout h2 { font-size: var(--t-sous); margin: 0 0 12px; }
.mp-ajout__ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mp-ajout__ligne input[type="text"] { flex: 1; min-width: 220px; }

/* --- Tableau de bord d'un spectacle : 2 colonnes (cartes + chiffres) --- */
.dash2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; margin-top: 6px; }
@media (max-width: 1000px) { .dash2 { grid-template-columns: 1fr; } }
.dash2__centre, .dash2__droite { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dash-carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 18px 20px; }
.dash-carte__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dash-carte__tete h2 { margin: 0; font-size: var(--t-sous); }
.dash-tete { display: flex; gap: 18px; align-items: flex-start; }
.dash-tete__affiche { flex: 0 0 130px; width: 130px; border-radius: var(--rayon-petit); overflow: hidden; background: var(--violet-pale); box-shadow: var(--ombre-douce); }
.dash-tete__affiche img { width: 100%; height: auto; display: block; }
/* Sans affiche : un bloc court et cliquable, pas un trou dans la page. */
.dash-tete__affiche--vide {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; min-height: 104px; padding: 14px 10px;
  background: transparent; border: 1px dashed var(--action-pale);
  box-shadow: none; color: var(--encre-douce);
  font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center;
  text-decoration: none; transition: border-color .15s, color .15s;
}
.dash-tete__affiche--vide:hover { border-color: var(--action); color: var(--action); }
.dash-tete__affiche--vide svg { width: 26px; height: 26px; }
.dash-tete__infos { min-width: 0; flex: 1; }
.dash-tete__infos h1 { margin: 0 0 8px; font-size: var(--t-titre); }
.dash-tete__statut { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.dash-tete__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-tete__actions form { margin: 0; }
.dash-signal { display: flex; gap: 11px; align-items: flex-start; border-radius: var(--rayon); padding: 13px 15px; }
.dash-signal__ico svg { width: 20px; height: 20px; }
.dash-signal__t { font-weight: 700; font-size: 14px; }
.dash-signal__s { font-size: 12.5px; margin-top: 2px; }
.dash-signal--info { background: var(--violet-pale); color: var(--violet-fonce); }
.dash-signal--ambre { background: #FBEECF; color: #7a5a12; }
.dash-signal--rouge { background: #F7E1E1; color: #9a2b2b; }
.dash-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-tuile { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 14px 15px; }
.dash-tuile--large { grid-column: 1 / -1; }
.dash-tuile__v { display: block; font-family: var(--font-titres); font-weight: 800; font-size: var(--t-chiffre); line-height: 1.05; letter-spacing: -0.02em; color: var(--encre); }
.dash-tuile__l { display: block; font-weight: 700; font-size: 13px; margin-top: 6px; }
.dash-tuile__s { display: block; color: var(--encre-douce); font-size: 12px; margin-top: 3px; }
.dash-tuile__a { display: inline-block; margin-top: 9px; font-size: 12px; font-weight: 600; }

/* --- Accueil : zone « Vendre au guichet » --- */
.guichet-accueil { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 20px 22px; margin: 22px 0; }
.guichet-accueil__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.guichet-accueil__tete h2 { margin: 0 0 2px; font-size: var(--t-sous); }
.guichet-accueil__tete .espace-sous { margin: 0; }
.guichet-accueil__tete .btn { display: inline-flex; align-items: center; gap: 7px; }
.guichet-accueil__tete .btn svg { width: 16px; height: 16px; }
.guichet-accueil__seances { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; border-top: 1px solid var(--violet-pale); padding-top: 8px; }
.ga-seance { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-top: 1px solid var(--fond); }
.ga-seance:first-child { border-top: 0; }
.ga-seance__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ga-seance__date { font-weight: 700; font-size: 14px; }
.ga-seance__spec { color: var(--encre-douce); font-size: 12.5px; }
.ga-seance__remp { font-weight: 800; font-size: 13px; font-family: var(--font-titres); min-width: 54px; text-align: right; }
/* Pastille « Aujourd'hui » : mise en avant, PAS une alerte (jamais ambre/rouge).
   Teinte de marque, sémantiquement libre pour un repère positif. */
.ga-seance__auj {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--framboise-pale); color: var(--framboise);
  font-size: 12px; font-weight: 800; letter-spacing: .01em;
}
/* Sortie de secours vers la caisse complète : lien texte discret, secondaire. */
.guichet-accueil__lien {
  display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600;
  color: var(--encre-douce); text-decoration: underline;
}
.guichet-accueil__lien:hover { color: var(--framboise); }

/* --- Page Réglages d'un spectacle (accordéons) --- */
.reg-liste { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin-top: 16px; }
/* Intertitres : neuf accordéons identiques se parcourent mal, quatre groupes
   nommés se parcourent à l'oeil. */
.reg-groupe {
  margin: 20px 0 -2px; font-family: var(--font-titres); font-size: 12px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--encre-douce);
}
.reg-groupe:first-child { margin-top: 4px; }
.reg-opt { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); overflow: hidden; }
.reg-opt__tete { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 13px; padding: 16px 18px; }
.reg-opt__tete::-webkit-details-marker { display: none; }
.reg-opt__ic { width: 32px; height: 32px; border-radius: 9px; background: var(--violet-pale); color: var(--violet); display: flex; align-items: center; justify-content: center; flex: 0 0 32px; }
.reg-opt__ic svg { width: 17px; height: 17px; }
.reg-opt__t { font-family: var(--font-titres); font-weight: 700; font-size: 15.5px; flex: 1; }
.reg-opt__n { color: var(--encre-douce); font-weight: 600; font-size: 12px; background: var(--fond); border: 1px solid var(--violet-pale); border-radius: 999px; padding: 1px 9px; }
.reg-opt__chev { width: 17px; height: 17px; color: var(--encre-douce); transition: transform .15s; }
.reg-opt[open] .reg-opt__chev { transform: rotate(180deg); }
.reg-opt__corps { padding: 6px 18px 18px; border-top: 1px solid var(--violet-pale); }
.reg-opt--avenir .reg-opt__t { color: var(--encre-douce); }
.reg-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--fond); }
.reg-ligne:first-child { border-top: 0; }
.reg-ligne__l { min-width: 0; display: flex; flex-direction: column; }
.reg-ligne__t { font-weight: 600; font-size: 14.5px; }
.reg-ligne__s { color: var(--encre-douce); font-size: 12.5px; }
.reg-ligne__ctl { display: flex; align-items: center; gap: 10px; }
.reg-ligne input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--violet); flex: 0 0 auto; cursor: pointer; }
.reg-select { border: 1.5px solid var(--violet-pale); border-radius: 8px; padding: 6px 10px; font-family: inherit; font-weight: 600; font-size: 13px; color: var(--encre); background: var(--carte); cursor: pointer; }
.reg-enr { display: flex; justify-content: flex-end; margin-top: 14px; }
.reg-puces { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.reg-puce { background: var(--violet-pale); color: var(--violet); font-size: 12.5px; font-weight: 600; padding: 3px 11px; border-radius: 999px; }
.reg-liens { font-size: 13px; margin: 6px 0 0; }
.reg-opt__corps .lock, .reg-ligne .lock { font-size: 12px; font-weight: 700; color: var(--succes); background: #E3F3EC; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.lien-fleche { font-size: 13px; font-weight: 600; white-space: nowrap; }
.lien-fleche::before { content: "→ "; }
.reg-champ { padding: 12px 0; display: flex; flex-direction: column; gap: 3px; }
.reg-textarea { margin-top: 8px; width: 100%; border: 1.5px solid var(--violet-pale); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--encre); background: var(--carte); resize: vertical; }
.reg-textarea:focus { outline: none; border-color: var(--violet); }
.confirmation__message { background: var(--violet-pale); border-radius: 12px; padding: 14px 18px; margin: 4px 0 18px; color: var(--encre); line-height: 1.6; }

/* Page publique « Retrouver mes billets » */
.page-etroite { max-width: 480px; margin: 24px auto 40px; }
.page-etroite__intro { color: var(--encre-douce); line-height: 1.6; margin: 0 0 20px; }
.form-carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.form-carte label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
/* Le sélecteur prend le style des champs : dans « Mon argent », il sortait minuscule et tronqué (2026-09-10). */
.form-carte input, .form-carte select { max-width: 100%; border: 1.5px solid var(--violet-pale); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 15px; color: var(--encre); }
.form-carte input:focus, .form-carte select:focus { outline: none; border-color: var(--violet); }
.form-carte .btn { margin-top: 4px; }

/* Boutique : mentions de disponibilité (réglages du spectacle). */
.seance-dispo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.seance-dispo__txt { font-size: 13px; font-weight: 600; color: var(--encre-douce); }

.sp-dash-bloc { margin: 0 0 32px; }
.sp-dash-bloc__titre { margin: 0 0 12px; }
.sp-graphe { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding: 12px 14px; background: var(--carte); border-radius: var(--rayon-petit, 12px); box-shadow: var(--ombre-douce); overflow-x: auto; }
.sp-graphe__col { flex: 1 1 0; min-width: 26px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.sp-graphe__barre { width: 60%; max-width: 34px; min-height: 4px; background: var(--violet); border-radius: 5px 5px 0 0; }
.sp-graphe__lbl { font-size: 10.5px; color: var(--encre-douce); white-space: nowrap; }

/* Dernières commandes : liste de lignes CLIQUABLES (ouvrent le détail de la
   commande). Le repère de tête est le temps écoulé, pas la référence. */
.dash-commandes { list-style: none; margin: 4px 0 8px; padding: 0; }
.dash-commande { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 10px 8px; border-bottom: var(--bordure-fine); border-radius: 8px;
  text-decoration: none; color: var(--encre); font-size: 14px; }
.dash-commande:hover, .dash-commande:focus-visible { background: var(--fond); }
.dash-commande:focus-visible { outline: 2px solid var(--framboise); outline-offset: -2px; }
.dash-commande__quand { flex: 0 0 auto; min-width: 72px; font-size: 12.5px; font-weight: 700; color: var(--encre-douce); }
.dash-commande__nom { flex: 1 1 110px; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-commande__canal { flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.dash-commande__canal.canal--ligne { background: var(--framboise-pale); color: var(--framboise); }
.dash-commande__canal.canal--guichet { background: transparent; color: var(--encre-douce); border: var(--bordure-fine); }
.dash-commande__chiffres { flex: 0 0 auto; margin-left: auto; display: flex; align-items: baseline; gap: 8px; }
.dash-commande__billets { font-size: 12.5px; color: var(--encre-douce); }
.dash-commande__montant { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Bandeau « mode support » (admin Féemoi agissant dans une production) */
.support-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--attention); color: var(--encre);
  padding: 10px 24px; font-size: 14px;
}
.support-banner strong { font-weight: 700; }
.support-banner form { margin: 0; }
.support-banner__sortie {
  background: var(--encre); color: #fff; border: none; border-radius: 999px;
  padding: 7px 15px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: var(--font-texte); white-space: nowrap;
}
.support-banner__sortie:hover { background: #000; }
/* Variante « gestion Féemoi » : violet plutôt que jaune (usage normal, pas dépannage) */
.support-banner--gestion { background: var(--nuit); color: #fff; }
.support-banner--gestion .support-banner__sortie { background: #fff; color: var(--violet); }
.support-banner--gestion .support-banner__sortie:hover { background: var(--violet-pale); }
/* Étiquette explicite du mode de gestion (anti-erreur) dans le bandeau support. */
.support-banner__mode {
  display: inline-block; padding: 2px 10px; margin-right: 9px; border-radius: 999px;
  font-weight: 800; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--encre); color: #fff; vertical-align: 1px;
}
.support-banner--gestion .support-banner__mode { background: #fff; color: var(--violet); }

/* Étiquettes de mode de gestion d'une production (liste + détail) */
.etiquette {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.etiquette--feemoi { background: var(--violet-pale); color: var(--violet); }
.etiquette--autonome { background: #FBF3F7; color: var(--or-fonce); }
/* Icônes dans les petits badges : taille réduite, l'espacement est géré par le gap/margin du conteneur. */
.etiquette .ico { width: 1em; height: 1em; margin: 0; }
.tag .ico, .admin-badge .ico { width: 1em; height: 1em; }

/* Carte de production dans l'onglet Productions */
.carte-production .carte-demande__tete h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Bascule discrète du mode de gestion (page détail production) */
.bloc-mode { display: flex; align-items: center; gap: 10px; margin: -6px 0 20px; font-size: 13px; color: var(--encre-douce); flex-wrap: wrap; }
.bloc-mode__form { margin: 0; display: flex; align-items: center; gap: 6px; }
/* Contre-signature : deux champs courts en ligne, pas un formulaire à part. */
.bloc-mode__form input[type="text"] {
  width: 150px; padding: 5px 8px; font-family: var(--font-texte); font-size: 13px;
  color: var(--encre); background: var(--fond); border: var(--bordure-fine);
  border-radius: var(--rayon-petit);
}
.bloc-mode__form .btn { padding: 5px 12px; font-size: 13px; }
/* Ce qui attend une action de notre part se voit, sans crier. */
.bloc-mode__valeur--attente { color: var(--or-fonce, var(--or)); font-weight: 600; }
.lien-discret {
  background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-texte);
  font-size: 13px; color: var(--violet); text-decoration: underline; font-weight: 600;
}
.lien-discret:hover { color: var(--violet-fonce); }
.lien-discret--sourdine { color: var(--encre-douce); }
.lien-discret--sourdine:hover { color: var(--erreur); }
.bloc-mode__sep { color: var(--encre-douce); }
/* Quand la valeur ouvre un document, elle se lit comme un lien. */
a.bloc-mode__valeur { color: var(--violet); text-decoration: underline; }
a.bloc-mode__valeur:hover { color: var(--violet-fonce); }

/* Décompte de reversement (gestion complète) : recette − frais = à reverser */
.decompte { max-width: 460px; margin: 0 0 22px; background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon-petit); overflow: hidden; }
.decompte__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 16px; font-size: 14px; }
.decompte__ligne span { color: var(--encre-douce); }
.decompte__ligne strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.decompte__ligne--frais strong { color: var(--or-fonce); }
.decompte__ligne--total { background: var(--violet-pale); }
.decompte__ligne--total span, .decompte__ligne--total strong { color: var(--violet); font-size: 15px; font-weight: 700; }
.decompte__ligne--restant { border-top: var(--bordure-fine); }
.decompte--large { max-width: 560px; }

/* Reversements à recevoir : ligne cochée + formulaire inline */
.form-inline-recu { display: inline-flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.form-inline-recu input[type="date"] { padding: 5px 8px; font-size: 13px; }
.btn--mini { padding: 6px 12px; font-size: 13px; }
.ligne-recue { background: rgba(30, 158, 106, 0.06); }
.txt-doux { color: var(--encre-douce); }

/* Sélecteur de catégorie (Gestion complète / Autonomes) en haut de Productions */
.segments { display: inline-flex; gap: 4px; background: var(--violet-pale); border-radius: 999px; padding: 4px; margin-bottom: 20px; }
.segment {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px;
  text-decoration: none; color: var(--encre-douce); font-weight: 600; font-size: 14px;
}
.segment:hover { color: var(--violet); }
.segment--actif { background: var(--carte); color: var(--violet); box-shadow: var(--ombre-douce); }
.segment__n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; background: var(--violet-pale); color: var(--violet);
  font-size: 12px; font-weight: 700;
}
.segment--actif .segment__n { background: var(--violet); color: #fff; }

/* Archivage : lien vers les archivées, bandeau « archivée », cartes/lignes grisées */
.lien-archives { margin: -8px 0 18px; font-size: 14px; }
.lien-archives a { color: var(--encre-douce); text-decoration: none; font-weight: 600; }
.lien-archives a:hover { color: var(--violet); text-decoration: underline; }
.bandeau-archive {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #FBF3F7; color: var(--encre); border-radius: var(--rayon-petit);
  padding: 12px 18px; margin-bottom: 20px; font-size: 14px;
}
.bandeau-archive form { margin: 0; }
.carte-production--archivee { opacity: 0.72; }
/* Production sans aucun spectacle : au repos, sans attirer l'œil comme une production active. */
.carte-production--vide { border-style: dashed; box-shadow: none; }
.carte-production--vide .carte-demande__tete h3 { color: var(--encre-douce); }
.ligne-archivee { opacity: 0.6; }

/* Choix du mode à la création (boutons radio décrits).
   Sélecteur à specificité renforcée pour battre « .form-orga label { display:block } ». */
.form-orga .radio-mode {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 10px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); cursor: pointer; font-weight: 400;
}
.form-orga .radio-mode:hover { border-color: var(--violet); }
.form-orga .radio-mode input { flex: 0 0 auto; width: auto; margin-top: 3px; }
.form-orga .radio-mode span { font-size: 14px; line-height: 1.5; }

/* Badge « Administration » du back-office Féemoi */
.admin-badge {
  display: inline-block; align-self: flex-start;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--violet); background: var(--violet-pale);
  padding: 3px 10px; border-radius: 999px; margin: 0 0 14px;
}
/* Badge « lecture seule » (accès visibilité) : ton un peu plus neutre. */
.admin-badge--lecture {
  color: #7a5a1e; background: #FBEED0; text-transform: none;
  letter-spacing: normal; font-size: 12px;
}
/* Note sous le titre du tableau de bord (contexte lecture seule). */
.espace-sous-note { color: var(--encre-douce); font-size: .92rem; }
/* Formulaire de création d'un accès visibilité (admin production). */
.form-acces-lecture {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.form-acces-lecture label {
  display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600;
  flex: 1 1 260px;
}
.form-acces-lecture input {
  padding: 9px 12px; border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit, 10px); font: inherit; font-weight: 400;
}
@media (max-width: 640px) {
  .form-acces-lecture { flex-direction: column; align-items: stretch; }
  .form-acces-lecture .btn { width: 100%; }
}
/* Formulaire de saisie d'un virement de reversement (admin production). */
.form-reversement {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.form-reversement label {
  display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600;
  flex: 1 1 160px;
}
.form-reversement input, .form-reversement select {
  padding: 9px 12px; border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit, 10px); font: inherit; font-weight: 400;
}
@media (max-width: 640px) {
  .form-reversement { flex-direction: column; align-items: stretch; }
  .form-reversement .btn { width: 100%; }
}

/* Tableau (lignes alternées) */
.table-orga {
  width: 100%; border-collapse: collapse; background: var(--carte);
  border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-douce);
}
.table-orga th, .table-orga td { text-align: left; padding: 14px 16px; font-size: 15px; }
.table-orga thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--encre-douce); border-bottom: var(--bordure-fine);
}
.table-orga tbody tr:nth-child(even) { background: var(--ligne-alternee); }
.table-orga tbody td { border-top: var(--bordure-fine); }

/* Pastilles de statut */
.statut { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: capitalize; }
.statut--publie { background: var(--badge-dispo-bg); color: var(--succes); }
.statut--brouillon { background: var(--badge-faible-bg); color: var(--badge-faible-tx); }
.statut--archive { background: #F6E3EF; color: var(--encre-douce); }
/* « Passé » = spectacle publié dont toutes les dates sont jouées. Même mauve
   neutre que l'archivé : c'est un état de repos, il ne doit pas attirer l'œil
   comme le vert « En vente » ou l'ambre « Brouillon ». */
.statut--passe { background: #F6E3EF; color: var(--encre-douce); }
.statut--payee, .statut--emis { background: var(--badge-dispo-bg); color: var(--succes); }
.statut--utilise { background: var(--violet-pale); color: var(--violet-fonce); }
.statut--remboursee { background: #F6E3EF; color: var(--encre-douce); }
.statut--annule { background: var(--badge-complet-bg); color: var(--erreur); }

/* Connexion */
.connexion { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0; }
.connexion-logo { margin-top: 32px; }
.connexion-logo img { height: 100px; width: auto; opacity: .92; }
.connexion-carte {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 32px; width: 100%; max-width: 400px;
}
.connexion-carte h1 { margin: 0 0 4px; font-size: var(--t-titre); }
.connexion-sous { color: var(--encre-douce); margin: 0 0 20px; }
.form-orga label { display: block; font-weight: 600; margin-bottom: 16px; }
.form-orga input {
  display: block; width: 100%; margin-top: 6px; font-family: var(--font-texte); font-size: 15px;
  padding: 12px 16px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte);
}
.form-orga input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale); }
/* Boutons pleine largeur UNIQUEMENT dans les cartes d'authentification étroites
   (connexion, demande d'accès, mot de passe). Les formulaires larges (structure,
   spectacle) gardent des boutons à taille naturelle, alignés via .form-actions. */
.connexion-carte .form-orga .btn { width: 100%; margin-top: 6px; }
/* Champs texte multilignes (demande d'accès) — mêmes styles que les inputs. */
.form-orga textarea {
  display: block; width: 100%; margin-top: 6px; font-family: var(--font-texte); font-size: 15px;
  padding: 12px 16px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte);
  resize: vertical;
}
.form-orga textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale); }
/* Carte connexion élargie pour le formulaire de demande d'accès. */
.connexion-carte--large { max-width: 480px; }
/* Astérisque « champ requis » + lien « pas encore de compte ». */
.champ-requis { color: var(--framboise); }
.connexion-inscription { margin: 18px 0 0; text-align: center; color: var(--encre-douce); font-size: 14px; }
.connexion-oubli { margin: 12px 0 0; text-align: center; font-size: 14px; }

/* Champ mot de passe avec bouton « œil » (afficher/masquer) */
.champ-mdp { position: relative; display: block; }
.champ-mdp input { padding-right: 46px; }
.mdp-toggle {
  position: absolute; right: 4px; top: 6px; bottom: 0; width: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: transparent; cursor: pointer;
  color: var(--encre-douce); border-radius: var(--rayon-petit);
}
.mdp-toggle:hover { color: var(--violet); }
.mdp-toggle:focus-visible { outline: none; color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale); }
.mdp-toggle svg { width: 20px; height: 20px; display: block; }
/* Mot de passe masqué (défaut) : œil simple ; visible : œil barré. */
.mdp-toggle .mdp-oeil-barre { display: none; }
.mdp-toggle.mdp-visible .mdp-oeil { display: none; }
.mdp-toggle.mdp-visible .mdp-oeil-barre { display: block; }

/* Le pied suit le même gabarit que le contenu : même largeur, même retrait,
   sinon son texte se colle au rail de navigation. */
.espace-pied {
  margin-top: 48px; padding: 24px 32px; border-top: 1px solid var(--violet-pale);
  color: var(--encre-douce); font-size: var(--t-meta);
  max-width: 1120px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box;
}
@media (max-width: 820px) { .espace-pied { padding: 20px 16px; } }

/* ---- Espace organisateur : blocs spectacle + détail par séance ---------- */
.orga-spectacles { display: flex; flex-direction: column; gap: 16px; }
.orga-spectacle {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 18px 20px;
}
.orga-spectacle__tete { display: flex; align-items: center; gap: 16px; }

/* Vignette d'affiche carrée (cliquable vers la gestion) */
.orga-vignette { display: block; width: 76px; height: 76px; border-radius: var(--rayon-petit); overflow: hidden; flex-shrink: 0; }
.orga-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .16s ease; }
.orga-vignette:hover img { transform: scale(1.05); }
.orga-vignette--vide {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, var(--nuit), var(--action)); font-size: 1.8rem;
}

.orga-spectacle__infos { flex: 1; min-width: 0; }
.orga-spectacle__infos h3 { font-family: var(--font-titres); font-weight: 700; font-size: var(--t-sous); margin: 0 0 6px; }
.orga-spectacle__titre { color: var(--encre); text-decoration: none; }
.orga-spectacle__titre:hover { color: var(--violet); }
.orga-spectacle__nbseances { margin-left: 10px; font-size: 13px; color: var(--encre-douce); }

/* Barre d'actions claire (boutons icônés) sous l'en-tête de la carte */
.orga-spectacle__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: var(--bordure-fine); }
.orga-spectacle__actions .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 14px; }
.orga-spectacle__actions .btn svg { width: 16px; height: 16px; }
.btn-lien { display: inline-flex; align-items: center; gap: 7px; padding: 9px 10px; font-weight: 600; font-size: 14px; color: var(--violet); text-decoration: none; }
.btn-lien:hover { color: var(--violet-fonce); text-decoration: underline; }
.btn-lien svg { width: 16px; height: 16px; }
.btn-lien--danger { color: var(--erreur); }
.btn-lien--danger:hover { color: var(--erreur); }
/* Champ avec suffixe d'unité (% / €) accolé. */
.champ-suffixe { display: flex; align-items: stretch; }
.champ-suffixe input { flex: 1 1 auto; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.champ-suffixe__unite {
  display: inline-flex; align-items: center; padding: 0 12px; font-weight: 700;
  color: var(--encre-douce); background: var(--violet-pale);
  border: 1px solid var(--bordure); border-left: none;
  border-top-right-radius: var(--rayon-petit, 10px); border-bottom-right-radius: var(--rayon-petit, 10px);
}
/* Colonne d'actions d'un code (Modifier · Désactiver · Supprimer). */
.code-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.code-actions form { display: inline; }
.orga-spectacle__totaux { display: flex; gap: 28px; text-align: right; }
.orga-spectacle__totaux .val { display: block; font-family: var(--font-titres); font-weight: 800; font-size: var(--t-sous); color: var(--encre); }
.orga-spectacle__totaux .lib { font-size: 12px; color: var(--encre-douce); }

/* Tableau des séances (pointillés « ticket ») */
.table-seances { width: 100%; border-collapse: collapse; margin-top: 16px; }
.table-seances th, .table-seances td { padding: 9px 10px; font-size: 14px; text-align: left; }
.table-seances .num { text-align: right; }
.table-seances thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--encre-douce); border-bottom: var(--bordure-fine);
}
.table-seances tbody td { border-top: 2px dashed var(--violet-pale); }
.badge-numerote { display: inline-block; font-size: 12px; font-weight: 700; color: var(--violet); background: var(--violet-pale); border-radius: 999px; padding: 2px 8px; vertical-align: middle; white-space: nowrap; }
.table-seances tbody td.num:last-child { color: var(--violet); font-weight: 700; }

@media (max-width: 560px) {
  .orga-spectacle__tete { flex-wrap: wrap; }
  .orga-spectacle__totaux { gap: 20px; }
}

/* Espace organisateur : invitations distinctes + remplissage */
.orga-spectacle__totaux .val--invit { color: var(--badge-faible-tx); }
.table-seances .num--invit { color: var(--badge-faible-tx); font-weight: 700; }
.table-seances .remplissage { font-weight: 700; color: var(--encre); }
.seance-lieu-petit { color: var(--encre-douce); font-size: 12px; font-weight: 400; }

/* ---- Espace organisateur : formulaire spectacle ------------------------- */
.alerte--succes { background: #DBF3E8; color: var(--succes); }
.espace-section-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 12px; flex-wrap: wrap; }
.espace-section-tete h2 { margin: 0; }

/* ---- Comptabilité : état de billetterie & exports ---------------------- */
.table-defilante { overflow-x: auto; }
/* Le menu déroulant « Action » ne doit pas être coupé par le conteneur défilant */
.table-defilante:has(.menu-action[open]) { overflow: visible; }

/* Participants — cadre « carte » (cohérence visuelle) + survol de ligne. */
.participants-carte {
  background: var(--carte, #fff); border: var(--bordure-fine);
  border-radius: var(--rayon, 16px); box-shadow: var(--ombre-douce);
}
.table-participants { margin: 0; }
.table-participants tbody .cmd-ligne:hover > td { background: rgba(69, 58, 94, .025); }

/* Participants — bascule en cartes empilées sur mobile (≤ 720 px, DOM inchangé). */
@media (max-width: 720px) {
  .participants-carte { background: none; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .table-participants, .table-participants tbody { display: block; }
  .table-participants thead { display: none; }
  .table-participants .cmd-ligne {
    display: block; position: relative;
    border: var(--bordure-fine); border-radius: 12px; margin: 0 0 12px; padding: 12px 14px 10px;
    background: var(--carte); box-shadow: var(--ombre-douce);
  }
  .table-participants .cmd-ligne > td {
    display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
    border: none; padding: 5px 0; text-align: right;
  }
  .table-participants .cmd-ligne > td[data-label]::before {
    content: attr(data-label); font-weight: 600; font-size: 12px; color: var(--encre-douce);
    text-align: left; text-transform: uppercase; letter-spacing: .02em; flex: 0 0 auto;
  }
  .table-participants .cmd-ligne > td.cmd-nom { display: block; text-align: left; font-size: 16px; padding: 0 68px 8px 0; }
  .table-participants .cmd-nom .participants-email { word-break: break-word; }
  .table-participants .cmd-select-cell { position: absolute; top: 12px; right: 42px; width: auto; padding: 0; }
  .table-participants .cmd-toggle-cell { position: absolute; top: 8px; right: 8px; width: auto; padding: 0; text-align: right; }
  .table-participants .participants-action { justify-content: flex-start; padding-top: 8px; }
  .table-participants .cmd-detail { display: block; }
  .table-participants .cmd-detail > td { display: block; padding: 0; }
  .table-participants .cmd-detail > td:empty { display: none; }
}

/* Menu d'actions par participant (déroulant natif <details>, sans JS) */
.participants-action { text-align: right; }
.menu-action { position: relative; display: inline-block; }
.menu-action > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 1px solid #E7D4E1; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--violet); white-space: nowrap; }
.menu-action > summary::-webkit-details-marker { display: none; }
.menu-action > summary::after { content: '▾'; font-size: 12px; }
.menu-action[open] > summary { background: var(--violet-pale); border-color: var(--violet); }
.menu-action__items { position: absolute; right: 0; top: calc(100% + 5px); z-index: 30; min-width: 220px; background: #fff; border: 1px solid #E7D4E1; border-radius: 12px; box-shadow: 0 12px 30px rgba(42,33,56,.20); padding: 6px; display: flex; flex-direction: column; }
.menu-action__items a, .menu-action__items button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; line-height: 1.2; color: var(--encre); background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: none; white-space: nowrap; }
.menu-action__items svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--encre-douce); }
.menu-action__items a:hover, .menu-action__items button:hover { background: var(--violet-pale); }
.menu-action__items form { margin: 0; }

/* Colonnes d'état (Payé / Imprimé / Scanné) — cases cochées */
.col-etat { text-align: center; }
.coche { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #CFC6DA; background: #fff; color: transparent; font-size: 13px; font-weight: 800; line-height: 1; }
/* Le cas normal (payé, imprimé) se coche sans crier : dans une liste de cent
   lignes, ce sont les exceptions qui doivent sauter aux yeux, pas la routine. */
.coche--ok { background: #fff; border-color: #BFDED1; color: var(--succes, #0C7A54); }
/* Non payé : la seule case de cette colonne qui appelle une action. */
.coche--du { background: var(--attention-pale, #FBEECF); border-color: #E4C98A; color: var(--attention-texte, #8A5A00); }
.coche--info { background: var(--violet-pale, #FCE4F6); border-color: #cdbfe0; color: var(--violet, #C4188F); font-size: 12px; }
/* Remboursé : l'aplat bleu plein ne venait d'aucune charte. Même registre
   que .presence--rembourse — l'état « désactivé » — et même grammaire que
   les autres cases : fond pâle, filet, signe. */
.coche--remb { background: var(--desactive-bg, #EDE3E9); border-color: #CFC6DA; color: var(--encre-douce, #675379); font-size: 12px; }

/* En-têtes triables (clic = trier la colonne, re-clic = inverser) */
.th-tri {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: inherit; display: inline-flex; align-items: center; gap: 4px;
}
.th-tri:hover { color: var(--violet, #C4188F); }
.th-tri:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 4px; }
.th-fleche::after { content: '↕'; opacity: .35; font-size: 1.1em; }
.th-tri.is-sorted { color: var(--action); }
.th-tri.is-sorted .th-fleche::after { opacity: 1; }
.th-tri.is-sorted[data-dir="asc"] .th-fleche::after { content: '▲'; font-size: .8em; }
.th-tri.is-sorted[data-dir="desc"] .th-fleche::after { content: '▼'; font-size: .8em; }

/* Colonne « Mode » de paiement */
.paiement-mode { font-size: 13px; color: var(--encre-douce); white-space: nowrap; }
#participants-table tr[data-statut="annule"] { opacity: .5; }
.table-defilante .table-seances td small { font-weight: 400; color: var(--encre-douce); }
.table-seances tfoot .ligne-total td { border-top: 2px solid var(--violet); }
/* Sous-total par groupe (mode de gestion) : plus léger que le total plateforme. */
.table-seances .ligne-soustotal td { background: var(--action-pale); border-top: 1px solid var(--action); }
.table-seances .ligne-soustotal td small { color: var(--encre-douce); font-weight: 400; }
/* Comptabilité : un bloc REPLIABLE par spectacle (résumé cliquable + détail). */
.compta-spectacle {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  margin-bottom: 12px; overflow: hidden;
}
.compta-spectacle__resume {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
}
.compta-spectacle__resume::-webkit-details-marker { display: none; }
.compta-spectacle__resume::before {
  content: '\203A'; font-size: 20px; line-height: 1; color: var(--encre-douce);
  transition: transform .15s ease; flex: none;
}
.compta-spectacle[open] .compta-spectacle__resume::before { transform: rotate(90deg); }
.compta-spectacle__resume:hover { background: var(--violet-pale); }
.compta-spectacle__titre { font-weight: 700; font-size: 1.05rem; flex: 1 1 auto; }
.compta-spectacle__chiffres {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 14px; color: var(--encre-douce);
}
.compta-spectacle__recette { color: var(--encre); font-size: 1rem; white-space: nowrap; }
.compta-spectacle__detail { padding: 2px 18px 14px; }
.compta-spectacle__barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.compta-spectacle__meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 14px; color: var(--encre-douce);
}
.compta-annules { color: var(--erreur); }
.compta-numeros { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.compta-papier { color: var(--encre-douce); }
.badge--tva { background: var(--violet-pale); color: var(--violet); }
.badge--remise { background: #DBF3E8; color: var(--succes); font-weight: 700; }
.badge--valide { background: #DBF3E8; color: var(--succes); font-weight: 700; }
.badge--provisoire { background: #FBEED0; color: #7a5a1e; font-weight: 700; }
.compta-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compta-actions form { display: inline; }
.badge--invit { background: var(--badge-faible-bg); color: var(--badge-faible-tx); }
.compta-tarifs td small { color: var(--encre-douce); }
.compta-canal__tag {
  display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600;
  color: var(--violet); background: var(--violet-pale); border-radius: 999px; padding: 1px 8px;
}
/* Filtre de période. */
.compta-filtre {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 12px 16px; margin-bottom: 18px;
}
.compta-filtre__form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.compta-filtre__lib { font-weight: 600; }
/* Raccourcis de période (mois / trimestre / année) sous les dates. */
.compta-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bordure); }
.compta-preset {
  font-size: 13px; font-weight: 600; color: var(--violet); text-decoration: none;
  background: var(--violet-pale); border-radius: 999px; padding: 5px 12px;
}
.compta-preset:hover { background: var(--violet); color: #fff; }
.compta-preset.is-actif { background: var(--violet); color: #fff; }

/* Comptabilité — sous-navigation (Par spectacle · Reversements · Totaux & exports). */
.compta-sousnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--bordure); margin-bottom: 20px;
}
.compta-sousnav__item {
  padding: 10px 16px; font-weight: 600; font-size: 15px; color: var(--encre-douce);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.compta-sousnav__item:hover { color: var(--violet); }
.compta-sousnav__item.is-actif { color: var(--violet); border-bottom-color: var(--violet); }

/* Comptabilité — encart d'explication des frais de service (avec exemple chiffré). */
.frais-info { color: var(--encre-douce); font-size: 14px; margin-top: 8px; }
.frais-info p { margin: 0 0 6px; }
.frais-exemple {
  background: var(--violet-pale, #FCE4F6); border-left: 3px solid var(--violet);
  border-radius: 8px; padding: 10px 14px; color: var(--encre);
}
.frais-exemple__note { color: var(--encre-douce); }

/* Comptabilité — vue liste « par événement » (façon Billetweb). */
.compta-liste-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.compta-liste-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Statistiques — graphique en barres (SVG, rendu serveur, sans JS). */
.graph-carte {
  background: var(--carte, #fff); border: var(--bordure-fine);
  border-radius: var(--rayon, 16px); box-shadow: var(--ombre-douce); padding: 16px 18px; margin-bottom: 8px;
}
.graph-barres { width: 100%; height: auto; display: block; }
.graph-grid { stroke: #EDE8F0; stroke-width: 1; }
.graph-axe { stroke: var(--bordure); stroke-width: 1; }
.graph-bar { fill: var(--violet); transition: fill .12s; }
.graph-hit { fill: transparent; }
.graph-col:hover .graph-bar { fill: var(--violet-fonce); }
.graph-col:hover .graph-hit { fill: rgba(69, 58, 94, .05); }
.graph-ylabel { fill: var(--encre-douce); font-size: 12px; text-anchor: end; font-family: var(--font-texte); }
.graph-xlabel { fill: var(--encre-douce); font-size: 12px; text-anchor: middle; font-family: var(--font-texte); }

/* Statistiques — barre de répartition par canal (SVG) + légende. */
.canal-barre {
  height: 26px; border-radius: 8px; overflow: hidden;
  margin: 4px 0 10px; background: var(--violet-pale);
}
.canal-barre__svg { width: 100%; height: 100%; display: block; }
.canal-legende { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; font-size: 13px; color: var(--encre-douce); }
.canal-legende__item { display: inline-flex; align-items: center; gap: 6px; }
.canal-legende__puce { flex: 0 0 auto; }

/* Comptabilité — récapitulatif de l'onglet (bandeau de métriques). */
.compta-recap { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 20px; }
.compta-recap__item {
  flex: 1 1 150px; background: var(--carte, #fff); border: var(--bordure-fine);
  border-radius: var(--rayon-petit, 12px); padding: 12px 16px;
}
.compta-recap__item--accent { background: var(--violet); border-color: var(--violet); }
.compta-recap__val { display: block; font-size: var(--t-chiffre); font-weight: 800; color: var(--encre); font-family: var(--font-titres); }
.compta-recap__item--accent .compta-recap__val { color: #fff; }
.compta-recap__lbl { display: block; font-size: 12.5px; color: var(--encre-douce); margin-top: 2px; }
.compta-recap__item--accent .compta-recap__lbl { color: rgba(255,255,255,.82); }

/* Comptabilité — cartes « par spectacle » (présentation fluide, sans tableau large). */
.compta-cartes { display: flex; flex-direction: column; gap: 14px; }
.compta-carte {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--carte, #fff); border: var(--bordure-fine);
  border-radius: var(--rayon, 16px); padding: 18px 22px; box-shadow: var(--ombre-douce);
}
.compta-carte__id { flex: 1 1 240px; min-width: 0; }
.compta-carte__titre { margin: 0 0 4px; font-size: var(--t-sous); }
.compta-carte__titre a { color: var(--encre); text-decoration: none; }
.compta-carte__titre a:hover { color: var(--violet); }
.compta-carte__date {
  display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
  font-size: 13px; color: var(--encre-douce);
}
.compta-carte__date .ico { width: 14px; height: 14px; margin: 0; }
.etat-pastille {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; background: var(--badge-faible-bg, #F3ECD9); color: var(--badge-faible-tx, #9a6b00);
}
.etat-pastille .ico { width: 13px; height: 13px; margin: 0; }
.etat-pastille--ok { background: var(--badge-dispo-bg, #E3F5EC); color: var(--succes); }
.etat-pastille--partiel { background: var(--violet-pale); color: var(--violet-fonce); }

.compta-carte__chiffres { flex: 2 1 320px; display: flex; align-items: center; gap: 16px; }
.compta-chiffre { flex: 1 1 0; min-width: 0; }
.compta-chiffre__lbl { display: block; font-size: 12px; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .02em; }
.compta-chiffre__val { display: block; font-size: var(--t-chiffre); font-weight: 800; color: var(--encre); font-family: var(--font-titres); line-height: 1.15; }
.compta-chiffre__val--accent { color: var(--violet); }
.compta-chiffre__detail { display: block; font-size: 12px; color: var(--encre-douce); margin-top: 2px; }
.compta-carte__fleche { width: 22px; height: 22px; color: var(--violet-pale); flex: 0 0 auto; }

.compta-carte__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; min-width: 156px; }
.compta-carte__actions form { margin: 0; }
.compta-carte__actions .btn { width: 100%; justify-content: center; }
/* Clôture pas encore permise : une note calme à la place du bouton, dans la
   carte concernée — le même message en haut de page se rate quand la carte
   est en bas de l'écran. */
.compta-carte__attente {
  margin: 0; display: flex; gap: 6px; align-items: flex-start;
  font-size: 13px; line-height: 1.35; color: var(--encre-douce);
}
.compta-carte__attente .ico { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--attention-texte); }
.compta-note { margin-top: 18px; }

@media (max-width: 720px) {
  .compta-carte__chiffres { flex-basis: 100%; }
  .compta-carte__actions { flex-basis: 100%; min-width: 0; }
  .compta-carte__actions .btn { width: 100%; }
}
.compta-onglets { display: flex; gap: 4px; }
.compta-onglet {
  padding: 8px 14px; font-weight: 600; font-size: 14px; color: var(--encre-douce);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.compta-onglet.is-actif { color: var(--violet); border-bottom-color: var(--violet); }
.compta-recherche { position: relative; display: flex; align-items: center; }
.compta-recherche .ico {
  position: absolute; left: 14px; width: 16px; height: 16px; margin: 0;
  color: var(--encre-douce); pointer-events: none;
}
.compta-recherche input {
  padding: 9px 14px 9px 38px; border: 1px solid var(--bordure); border-radius: 999px;
  font: inherit; min-width: 240px;
}
.compta-events {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); overflow: hidden;
}
.compta-event {
  display: flex; align-items: center; gap: 16px; padding: 15px 18px;
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--bordure);
}
.compta-event:last-child { border-bottom: none; }
.compta-event:hover { background: var(--violet-pale); }
.compta-event__info { flex: 1 1 auto; min-width: 0; }
.compta-event__titre { display: block; font-weight: 700; font-size: 1.02rem; color: var(--encre); }
.compta-event__date { display: block; font-size: 13px; color: var(--encre-douce); margin-top: 2px; }
.compta-event__chiffres { text-align: right; flex: none; }
.compta-event__recette { display: block; font-weight: 700; font-size: 1.05rem; color: var(--encre); }
.compta-event__split { display: block; font-size: 12px; color: var(--encre-douce); margin-top: 2px; }
.compta-event__fleche { flex: none; font-size: 22px; color: var(--encre-douce); }
.compta-total-general {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; margin-top: 4px; font-size: 1.05rem; border-top: 2px solid var(--violet-pale);
}
.compta-total-general strong { color: var(--violet); font-size: 1.15rem; }
.compta-seance-bloc { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 16px 18px; margin-bottom: 16px; }
.compta-seance-bloc .compta-seance__date { margin: 0; }
/* En-tête d'une séance : date (+ statut) à gauche, actions (PDF, clôture) à droite. */
.compta-seance__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.compta-seance__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compta-seance__actions form { display: inline; margin: 0; }
.compta-filtre label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--encre-douce); }
.compta-filtre input[type="date"] {
  padding: 7px 10px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit, 10px); font: inherit;
}
/* Choix d'événement du filtre comptable : même habillage que les dates, mais il
   peut porter un titre long — on le laisse rétrécir plutôt qu'il ne pousse le
   bouton « Filtrer » hors de la ligne. */
.compta-filtre select {
  padding: 7px 10px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit, 10px);
  font: inherit; background: var(--carte, #fff); color: var(--encre); max-width: 260px;
}
.compta-filtre__evt { min-width: 0; }
/* Sous-bloc par séance à l'intérieur d'un spectacle. */
.compta-seance { margin-top: 14px; }
.compta-seance:first-of-type { margin-top: 6px; }
.compta-seance__date { margin: 0 0 8px; font-size: 15px; color: var(--encre); }
.compta-exports-haut { display: flex; gap: 10px; flex-wrap: wrap; }
/* Reversement Féemoi (ventes en ligne) : encaissé − commission = net. */
.compta-reversement {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 8px 20px; max-width: 460px;
}
.compta-reversement__ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 11px 0; border-bottom: 1px solid var(--bordure);
}
.compta-reversement__ligne:last-child { border-bottom: none; }
/* Un montant ne se coupe jamais en deux lignes (« − » d'un côté, « 576,00 € » de l'autre). */
.compta-reversement__ligne strong { white-space: nowrap; }
.compta-reversement__moins { color: var(--erreur); }
.compta-reversement__total { font-size: 1.1rem; }
.compta-reversement__total strong { color: var(--violet); }

.note-fiscale {
  margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--encre-douce);
  background: var(--violet-pale); border-radius: var(--rayon-petit); padding: 14px 16px;
}
.cartes-export { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.carte-export {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.carte-export h3 { margin: 0; }
.carte-export p { margin: 0; font-size: 14px; color: var(--encre-douce); flex-grow: 1; }
.carte-export .btn { align-self: flex-start; }

/* ---- Participants : barre de filtres + badges de présence -------------- */
.participants-filtres {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 8px;
}
.participants-recherche, .participants-filtres select {
  font-family: var(--font-texte); font-size: 14px; padding: 9px 12px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); color: var(--encre);
}
.participants-recherche { flex: 1; min-width: 220px; }
.participants-filtres select { cursor: pointer; }
.participants-filtres input:focus, .participants-filtres select:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale);
}
/* Contrôle « Trier par » (menu + bouton de sens) — desktop et mobile. */
.participants-tri { display: inline-flex; align-items: center; gap: 6px; }
.participants-tri label { font-size: 13px; font-weight: 600; color: var(--encre-douce); }
.participants-tri__sens {
  width: 36px; height: 36px; flex: 0 0 auto; cursor: pointer;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte);
  color: var(--violet); font-size: 16px; font-weight: 700; line-height: 1;
}
.participants-tri__sens:hover { background: var(--violet-pale); }
/* L'export est devenu un formulaire (il POSTe le périmètre affiché) : c'est le
   formulaire qui se pousse à droite, et le bouton garde l'allure d'un lien. */
.participants-export-form { margin-left: auto; }
.participants-export {
  font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer;
  padding: 0; border: 0; background: none; color: var(--violet);
  font-family: inherit; text-decoration: underline;
}
.participants-export:hover { color: var(--violet-fonce); }
.participants-export:disabled { color: var(--encre-douce); text-decoration: none; cursor: default; }

/* Participants — barre visible (recherche + entonnoir + export) + panneau de filtres. */
.participants-barre { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 8px; }
.participants-entonnoir {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 14px; border: var(--bordure-fine); border-radius: var(--rayon-petit);
  background: var(--carte); color: var(--encre); font: inherit; font-size: 14px; font-weight: 600;
}
.participants-entonnoir .ico { width: 16px; height: 16px; margin: 0; color: var(--violet); }
.participants-entonnoir:hover { border-color: var(--violet); }
.participants-entonnoir.is-actif { background: var(--violet-pale); border-color: var(--violet); color: var(--violet-fonce); }
.participants-entonnoir__badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 12px; font-weight: 700;
}
.participants-entonnoir__badge[hidden] { display: none; }
.participants-panneau {
  background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce); padding: 16px 18px; margin: 0 0 12px;
}
.participants-panneau__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: end;
}
.participants-panneau label,
.participants-panneau__sens { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--encre-douce); }
.participants-panneau select {
  font-family: var(--font-texte); font-size: 14px; font-weight: 400; padding: 9px 12px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); color: var(--encre); cursor: pointer;
}
.participants-panneau select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale); }
.participants-panneau__pied { margin-top: 14px; }
.participants-compte { color: var(--encre-douce); font-size: 14px; margin: 0 0 4px; }
.participants-email { color: var(--encre-douce); }

.presence {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.presence--avenir { background: var(--violet-pale); color: var(--violet); }
.presence--present { background: var(--badge-dispo-bg); color: var(--succes); }
.presence--annule { background: var(--desactive-bg); color: var(--desactive-tx); }
/* État « partiel » : une partie seulement de la commande est entrée. */
.presence--partiel { background: #FBEFD3; color: #946200; }
/* Remboursement : « remboursé » (effectué) et « en attente » (validation Féemoi, étape 2). */
/* Ces deux pastilles existaient sans être posées nulle part. Le bleu de la
   première était en outre hors charte (aucun bleu ni cyan dans « Néon de
   scène ») : elles passent aux couleurs officielles.
   « Remb. demandé » prend l'ambre, celui des choses qui attendent une décision.
   « Remboursée » prend le gris des états clos, comme « Annulée » : l'argent est
   rendu, il n'y a plus rien à faire — c'est le libellé qui les distingue. */
.presence--rembourse { background: var(--desactive-bg); color: var(--desactive-tx); }
.presence--attente { background: var(--attention-pale); color: var(--attention-texte); }

/* Regroupement par commande : chevron de dépliage + ligne de détail. */
.cmd-toggle-col { width: 36px; }
.cmd-toggle-cell { width: 36px; text-align: center; padding-right: 0 !important; }
.cmd-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: none; background: transparent; cursor: pointer; border-radius: 6px; color: var(--encre-douce);
}
.cmd-toggle:hover { background: var(--violet-pale); color: var(--violet); }
.cmd-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--violet-pale); }
.cmd-toggle__chevron { font-size: 12px; line-height: 1; transition: transform 0.15s ease; }
.cmd-ligne.is-ouvert .cmd-toggle__chevron { transform: rotate(90deg); }
.cmd-ligne.is-ouvert > td { border-bottom-color: transparent; }
.cmd-detail > td { padding: 0 0 10px; }
.cmd-detail > td:first-child { padding: 0; }
.cmd-annule-note { color: var(--desactive-tx); }
/* Fiche dépliée d'une commande : deux cartes « Billet(s) » | « Commande ».
   Inspirée de Billetweb mais sobre et aux couleurs maison (cf. étude de marché). */
.fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 2px 2px 10px; align-items: start; }
.fiche__col { background: var(--violet-pale); border-radius: var(--rayon-petit); padding: 14px 16px; }
.fiche__titre { margin: 0 0 10px; font-family: var(--font-titres); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--encre-douce); font-weight: 700; }
/* En-tête de carte : titre + menu d'action de la commande alignés. */
.fiche__col-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fiche__col-tete .fiche__titre { margin: 0; }
.fiche-billet { background: var(--carte); border-radius: var(--rayon-petit); padding: 12px 14px; margin-bottom: 10px; }
.fiche-billet:last-child { margin-bottom: 0; }
.fiche-billet--annule { opacity: 0.6; }
.fiche-billet__tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fiche-billet__num { font-family: var(--font-titres); font-weight: 800; font-size: 15px; color: var(--encre); }
.fiche-billet__tete .menu-action { margin-left: auto; }
.menu-action--billet > summary { padding: 3px 10px; font-size: 13px; }
/* Listes clé/valeur des cartes. */
.fiche-defs { margin: 0; display: grid; gap: 6px; }
.fiche-defs > div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: baseline; }
.fiche-defs dt { color: var(--encre-douce); font-size: 13px; }
.fiche-defs dd { margin: 0; font-size: 14px; color: var(--encre); word-break: break-word; }
.fiche-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.fiche-defs__note dd { background: #FBEFD3; color: #946200; border-radius: 6px; padding: 3px 8px; font-weight: 600; }
@media (max-width: 720px) { .fiche { grid-template-columns: 1fr; } }

/* Fiche commande : sélection des billets à rembourser. */
.billet-coche { width: 18px; height: 18px; accent-color: var(--violet); cursor: pointer; }
.cmd-selection-aide { margin-top: 6px; }
.cmd-selection-compte { font-weight: 600; color: var(--encre); margin: 0 0 12px; }
.badge-partiel { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #FBEFD3; color: #946200; margin-left: 6px; }
/* Commande passée avec une carte d'abonné (détail commande, espace). */
.badge-abo { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #F6E6F3; color: #8A1C6B; }

/* Sélection multiple de commandes + barre d'actions groupées. */
.cmd-select-col, .cmd-select-cell { width: 34px; text-align: center; }
.cmd-select { width: 18px; height: 18px; accent-color: var(--violet); cursor: pointer; vertical-align: middle; }
.lot-barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px;
  background: var(--violet-pale); border: 1px solid var(--violet); border-radius: var(--rayon-petit); padding: 10px 16px;
}
.lot-barre[hidden] { display: none; }
.lot-barre__compte { font-weight: 700; color: var(--violet); }
.lot-barre__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.lot-barre .btn { padding: 7px 14px; font-size: 14px; }
.lot-barre__annuler { background: none; border: none; color: var(--encre-douce); text-decoration: underline; cursor: pointer; font-size: 14px; font-family: inherit; }
.lot-barre__annuler:hover { color: var(--violet); }
/* Suppression : bouton destructif, distinct (imports seulement). */
.lot-barre__supprimer {
  padding: 7px 14px; font-size: 14px; font-family: inherit; font-weight: 600; cursor: pointer;
  background: var(--carte); color: var(--erreur); border: 1px solid var(--erreur); border-radius: 999px;
}
.lot-barre__supprimer:hover { background: var(--erreur); color: #fff; }

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

/* Barre de stats : compteurs cliquables servant aussi de filtre par état. */
.participants-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.pstat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-family: var(--font-texte); cursor: pointer; text-align: left;
  background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon-petit);
  padding: 9px 16px; min-width: 92px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pstat:hover { border-color: var(--violet); }
.pstat:focus-visible { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale); }
.pstat__n { font-family: var(--font-titres); font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--encre); }
.pstat__l { font-size: 12.5px; color: var(--encre-douce); }
.pstat.is-actif { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); background: var(--violet-pale); }
/* Le chiffre reprend le code couleur des badges d'état. */
.pstat--avenir .pstat__n  { color: var(--violet); }
.pstat--present .pstat__n { color: var(--succes); }
.pstat--annule .pstat__n  { color: var(--desactive-tx); }
/* « Annulés » : mis à l'écart à droite, discret (masqués par défaut). */
.pstat--apart { margin-left: auto; }
.pstat--annule .pstat__l { color: var(--desactive-tx); }

/* Lignes annulées : présentes pour la traçabilité, mais visuellement en retrait. */
.participants-ligne--annule { opacity: 0.55; }
.participants-ligne--annule td strong { text-decoration: line-through; }

@media (max-width: 560px) {
  .participants-export-form { margin-left: 0; }
  .pstat { flex: 1; min-width: 0; }
}

.form-spectacle { max-width: 720px; }
.form-spectacle > label { display: block; font-weight: 600; margin-bottom: 18px; }
.form-spectacle input[type=text],
.form-spectacle input[type=number],
.form-spectacle input[type=file],
.form-spectacle textarea,
.form-spectacle select {
  display: block; width: 100%; margin-top: 6px; font-family: var(--font-texte); font-size: 15px;
  padding: 12px 14px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte);
}
.form-spectacle textarea { resize: vertical; }
.form-spectacle input:focus, .form-spectacle textarea:focus, .form-spectacle select:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale);
}
.form-bloc { border: none; padding: 0; margin: 0 0 18px; }
.form-bloc legend { font-weight: 700; font-size: 14px; color: var(--encre-douce); padding: 0; margin-bottom: 8px; }

/* Titres de groupe dans la fiche spectacle (hiérarchie : vitrine / réglages). */
.form-section-titre {
  font-family: var(--font-titres); font-size: 1.05rem; font-weight: 700;
  margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--violet-pale);
}
.form-section-titre small { font-weight: 400; font-size: 13px; color: var(--encre-douce); }
/* Formulaire code : le 1er titre de section ne pousse pas vers le bas. */
.code-form-sections .form-section-titre:first-child { margin-top: 0; }

/* Sections repliables (création de spectacle) : accordéon pour les champs
   facultatifs. Repliées à la création, ouvertes en édition. */
.form-pliable {
  border: 1px solid var(--violet-pale); border-radius: var(--rayon-petit);
  margin: 0 0 12px; padding: 0; background: var(--carte);
}
.form-pliable > summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font-weight: 700; font-size: 14px; color: var(--encre); user-select: none;
}
.form-pliable > summary::-webkit-details-marker { display: none; }
.form-pliable > summary::after { content: '＋'; float: right; color: var(--violet); font-weight: 700; }
.form-pliable[open] > summary::after { content: '－'; }
.form-pliable[open] > summary { border-bottom: 1px solid var(--violet-pale); margin-bottom: 14px; }
.form-pliable > summary:hover { color: var(--violet); }
.form-pliable > :not(summary) { padding-left: 16px; padding-right: 16px; }
.form-pliable > :last-child { padding-bottom: 6px; }
.form-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 18px; }
.form-grille label { font-weight: 600; font-size: 14px; }
/* Un champ qui prend toute la ligne : le choix du spectacle dans « Mon argent »,
   dont le nom et le montant versable étaient coupés (2026-09-10). */
.form-grille .form-grille__large { grid-column: 1 / -1; }

/* Abonnements : champ pleine largeur, bandeau d'état, liste de cases à cocher. */
.form-orga .champ-large { display: block; }
.form-ligne-etat { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cases-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 18px; margin-top: 12px; }
.case-ligne { display: flex; gap: 10px; align-items: center; font-weight: 400; margin: 0; }
.case-ligne input { width: 18px; height: 18px; accent-color: var(--violet); margin: 0; flex: 0 0 auto; }
.case-ligne .conditions { margin-left: 6px; }
/* UNE DATE DE PASS NE TIENT PAS SUR UNE LIGNE.
   Val, le 2026-09-08 : « ça déborde, c'est pas joli ». Elle avait le nom du
   spectacle réduit à un mot par ligne — « Gala / MMA / samedi / octobre » — et
   la liste déroulante qui sortait de la carte.
   La cause : ces lignes vivent dans une grille de colonnes de 240 px, et la
   liste des catégories contient « Carré VIP — Catégorie - 1 VIP · 150,00 € ».
   Une liste déroulante ne descend pas sous la largeur de sa plus longue option :
   elle ne rétrécissait donc pas, et écrasait le libellé jusqu'à un mot par
   ligne avant de déborder quand même.
   On empile : le nom de la date au-dessus, la catégorie en dessous, sur toute
   la largeur. Chaque date devient une petite carte, ce qui les sépare aussi à
   l'œil — elles se touchaient. */
.case-ligne--pass { display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 12px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); }
.case-ligne--pass .case-ligne__coche { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; margin: 0; min-width: 0; }
.case-ligne--pass .case-ligne__coche input { width: 18px; height: 18px; accent-color: var(--violet); flex: 0 0 auto; margin-top: 2px; }
/* Le libellé garde sa place et va à la ligne PAR MOTS, pas par lettres. */
.case-ligne--pass .case-ligne__coche > span { min-width: 0; overflow-wrap: break-word; }
.case-ligne--pass .pass-prix { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; color: var(--encre-douce); font-size: 13px; }
.case-ligne--pass .pass-prix select { width: 100%; max-width: 100%; min-width: 0; padding: 7px 9px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte);
  font-family: inherit; font-size: 14px; color: var(--encre); }
.case-ligne--pass .pass-prix input { width: 74px; text-align: right; padding: 7px 9px; border: var(--bordure-fine); border-radius: var(--rayon-petit); font-family: inherit; font-size: 14px; }
.form-spectacle .case { display: flex; gap: 10px; align-items: center; font-weight: 400; margin-top: 12px; }
.form-spectacle .case input { width: 18px; height: 18px; accent-color: var(--violet); margin-top: 0; }

/* ---- Justificatif bancaire (RIB) : étape distincte + champ fichier stylé - */
.structure-rib {
  max-width: 720px; margin-top: 10px; padding: 20px 22px;
  background: var(--carte); border: 1px solid var(--violet-pale); border-radius: var(--rayon);
}
.structure-rib h2 { margin: 0 0 6px; font-size: 1.15rem; }
.structure-rib__note { background: var(--violet-pale); border-radius: var(--rayon-petit); padding: 10px 12px; color: var(--encre); }
.structure-rib__actuel { font-weight: 600; }
.structure-rib__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.structure-rib__upload { margin-top: 12px; }
.structure-rib__upload input[type=file] {
  display: block; width: 100%; max-width: 480px; margin: 6px 0 14px; box-sizing: border-box;
  font-family: var(--font-texte); font-size: 14px; color: var(--encre-douce);
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--fond); padding: 8px;
}
.structure-rib__upload input[type=file]::file-selector-button {
  font-family: var(--font-texte); font-weight: 700; font-size: 14px; cursor: pointer;
  margin-right: 12px; padding: 8px 16px; border: none; border-radius: 999px;
  background: var(--violet-pale); color: var(--violet);
}
.structure-rib__upload input[type=file]::file-selector-button:hover { background: #ddd2ea; }

/* ---- Paiements acceptés -------------------------------------------------- */
.mode-en-ligne { background: var(--violet-pale); border-radius: var(--rayon-petit); padding: 12px 14px; margin-bottom: 16px; }
.mode-en-ligne__titre { display: block; font-size: 14px; font-weight: 700; color: var(--encre-douce); }
.mode-en-ligne__texte { margin: 4px 0 0; font-size: 13px; color: var(--encre-douce); }
.modes-guichet__titre { display: block; font-size: 14px; font-weight: 700; color: var(--encre-douce); margin-bottom: 4px; }
.modes-paiement { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 18px; margin-top: 8px; }
.modes-perso { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.modes-perso__titre { font-size: 13px; font-weight: 600; color: var(--encre-douce); }
.modes-perso__ligne { display: flex; gap: 8px; align-items: center; }
.modes-perso__ligne input { flex: 1; max-width: 38ch; }
.modes-perso__suppr { padding: 6px 12px; font-size: 13px; }
#ajouter-mode { margin-top: 10px; padding: 6px 14px; font-size: 14px; }

/* ---- Vente au guichet --------------------------------------------------- */
.seance-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 4px 0 18px; }
.seance-actions__aide { font-size: 13px; color: var(--encre-douce); }
.guichet-tarifs { width: 100%; border-collapse: collapse; margin-top: 6px; }
.guichet-tarifs th, .guichet-tarifs td { padding: 8px 10px; border-bottom: 1px solid var(--bordure); text-align: left; }
.guichet-tarifs th.num, .guichet-tarifs td.num { text-align: right; }
.guichet-qte { width: 72px; padding: 6px 8px; text-align: right; }
.guichet-badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--violet); background: var(--violet-pale); border-radius: var(--rayon-petit); padding: 1px 6px; margin-left: 4px; }
.guichet-cat { color: var(--encre-douce); font-size: 12px; }
/* Suite de caisse : bandeau « vente enregistrée » + gros bouton « nouvelle vente ». */
.guichet-suite {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 0 0 22px;
  background: #e6f7ef; border: 1px solid #b7e6cf; border-radius: var(--rayon, 16px); padding: 14px 18px;
}
.guichet-suite__msg { background: none; padding: 0; margin: 0; font-weight: 600; color: #0b6b46; flex: 1 1 auto; }
.guichet-suite__cta {
  flex: 0 0 auto; font-size: 16px; padding: 14px 26px; box-shadow: var(--ombre-bouton);
}
.guichet-suite__cta-sub { font-weight: 400; opacity: .85; }
.guichet-suite__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex: 0 0 auto; }
@media (max-width: 600px) {
  .guichet-suite__actions { width: 100%; }
  .guichet-suite__cta, .guichet-suite__actions .btn { width: 100%; text-align: center; }
}

/* Récap guichet — actions : navigation prioritaire puis groupe « duplicata » discret */
.cg-recap-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.cg-duplicata { flex: 1 1 100%; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--violet-pale, #e7ddf0); }
.cg-duplicata__titre { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700;
  color: var(--encre); margin-bottom: 10px; }
.cg-duplicata__titre svg { width: 16px; height: 16px; color: var(--encre-douce); flex: none; }
.cg-duplicata__btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cg-duplicata__statut { margin: 10px 0 0; font-size: 12.5px; color: var(--encre-douce); }

.guichet-recap__infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; margin: 0 0 16px; }
.guichet-recap__infos dt { font-size: 12px; font-weight: 600; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .03em; }
.guichet-recap__infos dd { margin: 2px 0 0; font-size: 15px; }
.alerte--succes { background: #e6f7ef; color: #0b6b46; border-radius: var(--rayon-petit); padding: 10px 14px; }

/* ---- Hub Guichet (liste des séances vendables) -------------------------- */
.guichet-hub { display: flex; flex-direction: column; gap: 12px; }
.guichet-hub__carte { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 16px 20px; }
.guichet-hub__carte--passee { opacity: .6; }
.guichet-hub__affiche {
  flex: 0 0 auto; width: 54px; height: 72px; border-radius: var(--rayon-petit);
  overflow: hidden; background: var(--violet-pale); display: flex; align-items: center; justify-content: center;
}
.guichet-hub__affiche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guichet-hub__affiche-vide { font-size: 26px; opacity: .5; }
/* Placeholder cliquable « ajouter une affiche » (séance sans visuel). */
.guichet-hub__affiche--ajout {
  flex-direction: column; gap: 3px; text-decoration: none; cursor: pointer;
  border: 1.5px dashed var(--violet); background: var(--carte);
}
.guichet-hub__affiche--ajout .guichet-hub__affiche-vide { font-size: 20px; }
.guichet-hub__affiche-ajout { font-size: 12px; font-weight: 700; color: var(--violet); line-height: 1; text-align: center; }
.guichet-hub__affiche--ajout:hover { background: var(--violet-pale); }
.guichet-hub__infos { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.guichet-hub__titre { font-family: var(--font-titres); font-weight: 800; font-size: 1.05rem; }
.guichet-hub__date { font-weight: 600; }
.guichet-hub__meta { font-size: 14px; color: var(--encre-douce); }
.guichet-hub__alerte { color: var(--attention); font-weight: 600; }
.guichet-hub__tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--encre-douce);
  background: var(--violet-pale); border-radius: var(--rayon-petit); padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
/* Événement pas en vente : la carte reste lisible (on doit pouvoir lire la date
   et le titre pour comprendre POURQUOI on ne peut pas vendre), mais l'étiquette
   se voit. Pas d'opacité ici : la carte n'est pas « passée », elle est fermée. */
.guichet-hub__tag--alerte { color: var(--attention-texte); background: var(--attention-pale); }
.guichet-hub__carte--fermee { box-shadow: none; border: 1px solid var(--attention-pale); }

/* ---- Guichets (points de vente nommés) : onglets de filtre + gestion ---- */
.guichet-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.guichet-onglet { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: var(--carte); box-shadow: var(--ombre-douce); color: var(--encre); font-weight: 600; font-size: 14px;
  text-decoration: none; }
.guichet-onglet:hover { color: var(--violet); }
.guichet-onglet.actif { background: var(--violet); color: #fff; box-shadow: var(--ombre-bouton); }
.guichet-onglet__compte { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--violet-pale); color: var(--violet); font-size: 12px; }
.guichet-onglet.actif .guichet-onglet__compte { background: rgba(255,255,255,.22); color: #fff; }
.guichet-onglet--gerer { background: transparent; box-shadow: none; color: var(--encre-douce); }
.guichet-creer-hint { margin: 0 0 18px; font-size: 14px; color: var(--encre-douce); }
.guichet-carte__actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Formulaire de configuration d'un guichet : groupes de séances par spectacle */
.guichet-config-groupe { border: var(--bordure-fine); border-radius: var(--rayon-petit); padding: 10px 14px 12px; margin: 0 0 12px; }
.guichet-config-groupe legend { font-weight: 700; font-size: 14px; padding: 0 6px; }
.guichet-config-groupe .case { display: flex; gap: 8px; align-items: center; margin: 6px 0 0; cursor: pointer; }
.case--seance { font-weight: 600; margin-top: 12px; }
/* Tarifs imbriqués sous une séance : décalés + plus discrets. */
.guichet-config-tarifs { margin: 2px 0 4px 26px; padding-left: 12px; border-left: var(--bordure-fine); }
.case--tarif { font-weight: 400; font-size: 14px; margin: 4px 0 0; }
.case--tarif small { color: var(--encre-douce); }
/* Moyens du paiement mixte : sous-bloc indenté ET teinté (fond violet doux + liseré)
   pour bien montrer que c'est un SOUS-CHOIX du réglage « paiement mixte », pas un
   réglage global au même niveau. */
.guichet-config-mixte { margin: 6px 0 10px 26px; padding: 8px 12px 10px;
  background: var(--violet-pale, #f1ecf7); border-left: 3px solid var(--violet, #C4188F);
  border-radius: 0 var(--rayon-petit, 8px) var(--rayon-petit, 8px) 0; }
.guichet-config-mixte .champ-aide { background: none; padding: 0; margin: 0 0 4px; }

/* ---- Caisse guichet (écran unique : places à gauche, encaissement à droite) ---- */
.caisse__titre { margin: 0 0 10px; font-size: 1.1rem; }
.caisse__tarifs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.caisse-tarif { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-petit); padding: 12px 14px; }
.caisse-tarif--actif { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); }
.caisse-tarif__info { display: flex; flex-direction: column; gap: 2px; }
.caisse-tarif__lib { font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
/* Prix du tarif : mis en avant par la TAILLE (gros + gras), pas par une couleur
   vive — un orange/rouge se confondrait avec --attention (stock faible) / --erreur.
   Encre foncé = lisible, sans ambiguïté d'alerte, cohérent avec le « Total ». */
.caisse-tarif__montant { font-size: 22px; font-weight: 800; color: var(--encre); white-space: nowrap; }
.caisse-tarif__prix { font-size: 13px; color: var(--encre-douce); }
.stepper { display: flex; align-items: center; gap: 6px; flex: none; }
.stepper__btn { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--violet); background: #fff;
  color: var(--violet); font-size: 20px; line-height: 1; font-weight: 700; cursor: pointer; }
.stepper__btn:disabled { opacity: .35; cursor: default; }
.stepper__val { width: 52px; height: 44px; text-align: center; padding: 0; -moz-appearance: textfield; }
.stepper__val::-webkit-outer-spin-button, .stepper__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.caisse__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0;
  padding: 10px 0; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.caisse__total strong { font-family: var(--font-titres); font-size: 1.6rem; color: var(--violet); }
/* Sous-total « cette séance » (affiché seulement en vente multi-spectacles) */
.caisse__sous { display: flex; justify-content: space-between; align-items: baseline; margin: 0;
  padding: 6px 0; font-size: 14px; color: var(--encre-douce); }
.caisse__sous strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.caisse__sous.is-cache { display: none; }
.caisse__champs { display: flex; flex-direction: column; gap: 12px; }

/* ---- Guichet : panier multi-spectacles (séances déjà ajoutées) ---- */
.cg-panier { border: var(--bordure-fine); border-radius: var(--rayon-petit); padding: 12px;
  margin-bottom: 12px; background: var(--violet-pale); }
.cg-panier__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--violet); margin-bottom: 8px; }
.cg-panier__vider { background: none; border: 0; padding: 0; color: var(--encre-douce);
  font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; cursor: pointer; text-decoration: underline; }
.cg-panier__vider:hover { color: var(--violet); }
.cg-panier__spectacle { padding: 6px 0; border-top: var(--bordure-fine); }
.cg-panier__spectacle:first-of-type { border-top: 0; }
.cg-panier__titre { display: block; font-weight: 700; font-size: 14px; }
.cg-panier__date { display: block; font-size: 12.5px; color: var(--encre-douce); margin-bottom: 4px; }
.cg-panier__lignes { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.cg-panier__lignes li { display: flex; justify-content: space-between; gap: 12px; }
.cg-panier__lignes span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Bannière « vente en cours » sur le hub guichet (panier multi-spectacles) */
.guichet-panier-banniere { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px; padding: 14px 16px; border-radius: var(--rayon-petit);
  background: var(--violet-pale); border: 1px solid var(--violet); }
.guichet-panier-banniere__txt { font-size: 14px; }
.guichet-panier-banniere__aide { display: block; color: var(--encre-douce); font-size: 13px; margin-top: 2px; }
.guichet-panier-banniere__actions { display: flex; align-items: center; gap: 12px; }
.guichet-panier-banniere__vider { background: none; border: 0; padding: 0; color: var(--encre-douce);
  font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.guichet-panier-banniere__vider:hover { color: var(--violet); }

/* Récap guichet : annuler la vente (erreur de caisse) — action discrète, danger */
.cg-annuler-vente { margin-top: 14px; text-align: center; }
.cg-annuler-vente__btn { background: none; border: 0; padding: 4px 8px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--erreur); text-decoration: underline; }
.cg-annuler-vente__btn:hover { color: #a02314; }

/* Bandeau guichet : capacité restante mise en avant */
.cg-seance-bandeau__capacite strong { color: var(--violet); }

/* Bouton « + Ajouter un autre spectacle » (discret, pleine largeur) */
.cg-ajouter-spectacle { width: 100%; background: none; border: 1px dashed var(--violet);
  color: var(--violet); box-shadow: none; font-weight: 600; }
.cg-ajouter-spectacle:hover { background: var(--violet-pale); transform: none; box-shadow: none; }
.caisse__champs label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; }
.caisse__champs input, .caisse__champs select, .caisse__champs textarea { width: 100%; font-family: var(--font-texte); font-size: 15px;
  padding: 10px 12px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); }
.caisse__champs input:focus, .caisse__champs select:focus, .caisse__champs textarea:focus { outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-pale); }
.caisse__valider { width: 100%; justify-content: center; font-size: 1.05rem; padding: 14px 16px; }
.caisse__note { margin: 0; font-size: 12px; color: var(--encre-douce); }

.caisse__client-aide { margin: 0; font-size: 12.5px; color: var(--encre-douce); line-height: 1.4; }
.champ-option { font-weight: 400; color: var(--encre-douce); }

/* ---- Guichet : en-tête de séance bien visible (sur quelle séance on vend ?) ---- */
.cg-eyebrow { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--encre-douce); }
.cg-spectacle { margin: 0 0 12px; }
.cg-seance-bandeau { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px;
  background: var(--violet-pale); border-radius: var(--rayon-petit); }
.cg-seance-bandeau__item { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--encre); }
.cg-seance-bandeau__date { font-size: 16px; }
.cg-ico { width: 17px; height: 17px; flex: none; color: var(--violet); }

/* Note interne affichée dans les récaps (récap guichet, détail commande) */
.recap-note { display: block; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--rayon-petit);
  border-left: 4px solid var(--attention); background: var(--violet-pale); font-weight: 600; color: var(--encre); }
.recap-note__label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--encre-douce); margin-bottom: 2px; }

/* ---- Hub « Intégrer des ventes » ---- */
.hub-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }
.hub-carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 12px; }
.hub-carte__titre { margin: 0; font-size: 1.15rem; }
.hub-carte__desc { margin: 0; font-size: 14px; color: var(--encre-douce); line-height: 1.45; }
.hub-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hub-lien { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); font-weight: 600; color: var(--encre);
  transition: border-color .12s, background .12s; }
.hub-lien:hover { border-color: var(--violet); background: var(--violet-pale); }
.hub-lien__fleche { color: var(--violet); font-weight: 700; }
.hub-liste__bientot { font-size: 13px; color: var(--encre-douce); padding: 4px 2px; }
.hub-liste__bientot span { opacity: .7; }
.hub-carte__lien-modele { font-size: 13px; color: var(--encre-douce); text-decoration: underline; }
.hub-carte__lien-modele:hover { color: var(--violet); }

/* ---- Import distributeur (TicketNet) ---- */
.espace-titre--action { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.import-upload, .import-apercu { max-width: 640px; }
.import-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 14px 18px; margin: 0 0 22px;
  background: var(--violet-pale); border-radius: var(--rayon-petit); }
.import-stats li { font-size: 14px; color: var(--encre-douce); }
.import-stats strong { font-size: 18px; color: var(--encre); margin-right: 4px; }
.import-stats__deja, .import-stats__deja strong { color: var(--attention); }
.import-map { margin: 0 0 14px; }
.import-map__creer { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  margin-top: 10px; padding: 12px 14px; border-radius: var(--rayon-petit); background: var(--violet-pale); }
.import-map__creer[hidden] { display: none; }
.import-etapes { max-width: 640px; padding-left: 22px; display: flex; flex-direction: column; gap: 18px; }
.import-etapes > li { padding-left: 6px; }
.import-etapes code { background: var(--violet-pale); padding: 1px 5px; border-radius: 5px; font-size: 13px; }

/* ---- Guichet : modes d'encaissement en boutons (1 tap) ---- */
.caisse__modes { border: 0; padding: 0; margin: 0; min-width: 0; }
.caisse__modes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.caisse-mode { position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; padding: 8px 10px; border: var(--bordure-fine); border-radius: var(--rayon-petit);
  background: var(--carte); cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1.2;
  transition: border-color .12s, background .12s, color .12s; }
.caisse-mode input { position: absolute; opacity: 0; width: 0; height: 0; }
.caisse-mode:hover { border-color: var(--violet); }
.caisse-mode:focus-within { box-shadow: 0 0 0 3px var(--violet-pale); }
.caisse-mode--actif { border-color: var(--violet); background: var(--violet-pale); color: var(--violet);
  box-shadow: inset 0 0 0 1px var(--violet); }

/* Paiement à distance (carte en ligne) : détaché des modes sur place par un
   séparateur, car la logique diffère (redirection + billet émis après). */
.caisse__modes-distance { margin-top: 14px; }
.caisse__modes-sep { display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--encre-douce); }
.caisse__modes-sep::after { content: ""; flex: 1; height: 1px; background: var(--bordure); opacity: .25; }
.caisse__modes-distance-aide { margin: 6px 0 0; font-size: 12.5px; color: var(--encre-douce); }

/* ---- Guichet : paiement mixte (plusieurs moyens sur une même vente) ---- */
.cg-mixte-toggle { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 14px; font-weight: 600; cursor: pointer; }
.cg-mixte-toggle input { width: 17px; height: 17px; accent-color: var(--violet); flex: none; }
.cg-mixte-toggle small { font-weight: 400; color: var(--encre-douce); }
.cg-mixte { margin-top: 12px; padding: 14px; border: var(--bordure-fine); border-radius: var(--rayon-petit);
  background: var(--carte); }
.cg-mixte[hidden] { display: none; }
.cg-mixte__lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cg-mixte__aide { margin: 0 0 10px; font-size: 13px; color: var(--encre-douce); }
.cg-mixte__ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.cg-mixte__choix { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.cg-mixte__actif { width: 17px; height: 17px; accent-color: var(--violet); flex: none; }
.cg-mixte__lib { font-weight: 600; font-size: 14px; }
.cg-mixte__champ { position: relative; display: inline-flex; align-items: center; }
.cg-mixte__champ[hidden] { display: none; }
.cg-mixte__montant { width: 110px; font: inherit; text-align: right; padding: 8px 26px 8px 10px;
  border: var(--bordure-fine); border-radius: 8px; font-variant-numeric: tabular-nums; }
.cg-mixte__euro { position: absolute; right: 10px; color: var(--encre-douce); pointer-events: none; }
.cg-mixte__bilan { margin: 12px 0 0; padding-top: 10px; border-top: var(--bordure-fine);
  font-size: 14px; color: var(--encre-douce); }
.cg-mixte__bilan strong { font-variant-numeric: tabular-nums; }
.cg-mixte__reste--ko { color: var(--erreur); }
.cg-mixte__reste--ok { color: var(--succes); }

/* Détail d'une répartition mixte dans les récaps / fiches commande */
.recap-paiements { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; color: var(--encre-douce); }
.recap-paiements li { display: flex; justify-content: space-between; gap: 12px; }
.recap-paiements span { font-variant-numeric: tabular-nums; }
.detail-paiements { color: var(--encre-douce); font-size: 13px; }

/* ---- Guichet : rendu de monnaie (espèces) ---- */
.caisse__rendu { display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border-radius: var(--rayon-petit); background: var(--violet-pale); }
.caisse__rendu[hidden] { display: none; }
.caisse__rendu-recu { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; }
.caisse__rendu-recu input { width: 100%; font-family: var(--font-texte); font-size: 15px; padding: 10px 12px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); }
.caisse__rendu-recu input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale); }
.caisse__rendu-out { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-weight: 600; }
.caisse__rendu-out strong { font-family: var(--font-titres); font-size: 1.3rem; color: var(--succes); }
.caisse__rendu-val--insuffisant { color: var(--erreur); }

/* ---- Guichet : 2 colonnes — GAUCHE client + résumé / DROITE tarifs→paiement→encaissement ---- */
.cg-grille { display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }

/* Colonne droite : flux de travail vertical (tarifs, moyens de paiement, finalisation) */
/* Jauge de remplissage de la séance (guichet) : billets restants + couleur selon
   l'avancée des ventes. Réutilise les teintes des badges de disponibilité (charte). */
.cg-jauge { margin: 14px 0 0; padding: 11px 16px 13px; border-radius: var(--rayon-petit, 12px); }
.cg-jauge__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 9px; }
.cg-jauge__reste { font-size: 18px; font-weight: 800; }
.cg-jauge__detail { font-size: 13px; font-weight: 600; opacity: .85; }
.cg-jauge__barre { height: 9px; border-radius: 999px; background: rgba(42, 33, 56, .1); overflow: hidden; }
.cg-jauge__fill { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.cg-jauge--vert   { background: var(--badge-dispo-bg, #E3F5EC); }
.cg-jauge--vert   .cg-jauge__reste, .cg-jauge--vert   .cg-jauge__detail { color: var(--succes, #0C7A54); }
.cg-jauge--vert   .cg-jauge__fill { background: var(--succes, #0C7A54); }
.cg-jauge--orange { background: var(--badge-faible-bg, #FBEECF); }
.cg-jauge--orange .cg-jauge__reste, .cg-jauge--orange .cg-jauge__detail { color: var(--badge-faible-tx, #8A5A00); }
.cg-jauge--orange .cg-jauge__fill { background: var(--attention, #E8A013); }
.cg-jauge--rouge  { background: var(--badge-complet-bg, #FDEBE6); }
.cg-jauge--rouge  .cg-jauge__reste, .cg-jauge--rouge  .cg-jauge__detail { color: var(--erreur, #C2361F); }
.cg-jauge--rouge  .cg-jauge__fill { background: var(--erreur, #C2361F); }
/* Le libellé « restants » suit la couleur du niveau (variante carré). */
.cg-jauge--vert   .cg-jauge__lbl { color: var(--succes, #0C7A54); }
.cg-jauge--orange .cg-jauge__lbl { color: var(--badge-faible-tx, #8A5A00); }
.cg-jauge--rouge  .cg-jauge__lbl { color: var(--erreur, #C2361F); }

/* Taux de remplissage sur le tableau de bord (carte spectacle) : réutilise les
   couleurs de la jauge guichet (cg-jauge--vert/orange/rouge). */
.orga-remplissage { flex: 0 0 auto; align-self: center; min-width: 104px; padding: 8px 12px 10px; border-radius: var(--rayon-petit, 12px); }
.orga-remplissage__tete { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.orga-remplissage .cg-jauge__reste { font-size: 17px; }
.orga-remplissage .cg-jauge__detail { font-size: 12px; font-weight: 600; }
.orga-remplissage .cg-jauge__barre { height: 7px; }
/* % de remplissage par séance (tableau détaillé) : même code couleur. */
.remplissage { font-weight: 700; }
/* Un taux de remplissage n'est JAMAIS une erreur : plus de rouge ici. */
.remplissage--complet { color: var(--action-fonce); }
.remplissage--bien    { color: var(--succes); }
.remplissage--encours { color: var(--encre-douce); }

/* En-tête guichet : bloc titre à gauche, jauge compacte (carré) à droite. */
/* Rectangle jauge aligné sur le BAS du bloc titre (ligne date/salle) → équilibré à
   droite et détaché du lien « Quitter la caisse » (en position absolue tout en haut). */
.cg-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cg-entete__txt { min-width: 0; flex: 1 1 320px; }

/* Variante RECTANGLE de la jauge : compacte, horizontale, sous « Quitter la caisse ». */
.cg-jauge--rect { flex: 0 0 auto; margin: 0; padding: 9px 15px 11px; min-width: 150px; }
.cg-jauge--rect .cg-jauge__ligne { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.cg-jauge--rect .cg-jauge__reste { font-size: 22px; line-height: 1; }
.cg-jauge--rect .cg-jauge__reste--complet { font-size: 18px; }
.cg-jauge--rect .cg-jauge__lbl { font-size: 13px; font-weight: 700; }
.cg-jauge--rect .cg-jauge__detail { font-size: 13px; }
.cg-jauge--rect .cg-jauge__barre { margin-top: 8px; height: 6px; }
/* Places retenues par un panier d'achat en cours : ce n'est pas une vente, donc
   ni la couleur des ventes ni le gras — un simple constat, en encre douce. */
.cg-jauge__retenues { margin: 8px 0 0; max-width: 280px; font-size: 12px; font-weight: 600;
  line-height: 1.35; white-space: normal; color: var(--encre-douce, #6B6180); }
@media (max-width: 600px) { .cg-jauge--rect { width: 100%; } }

.cg-travail { min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.cg-bloc { min-width: 0; }
.cg-tarifs .caisse__tarifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cg-tarifs .caisse-tarif__info { flex: 1 1 auto; min-width: 0; }
.cg-finalisation { display: flex; flex-direction: column; gap: 14px; }

/* Réserver sans encaisser (option « payer plus tard ») */
.cg-reserver { border: var(--bordure-fine); border-radius: var(--rayon); padding: 16px 18px;
  background: var(--carte); display: flex; flex-direction: column; gap: 12px; }
.cg-reserver .caisse__titre { margin: 0; }
/* Repli « réserver sans encaisser » : action secondaire fermée par défaut, pour
   ne pas pousser l'action principale (Encaisser) sous la ligne de flottaison. */
.cg-reserver__resume { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap;
  cursor: pointer; list-style: none; }
.cg-reserver__resume::-webkit-details-marker { display: none; }
.cg-reserver__resume::before { content: "+"; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; border: var(--bordure-fine); font-size: 14px; line-height: 1;
  color: var(--encre-douce); flex: none; }
.cg-reserver[open] .cg-reserver__resume::before { content: "–"; }
.cg-reserver__tag { color: var(--encre-douce); font-weight: 400; font-size: 13px; }
.cg-reserver__aide { font-size: 14px; color: var(--encre-douce); margin: 0; }
.cg-reserver__date { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; max-width: 240px; }
.cg-reserver__date input { font: inherit; padding: 8px 10px; border: var(--bordure-fine); border-radius: 8px; }
.cg-reserver__btn { align-self: flex-start; }
.btn--petit { padding: 6px 12px; font-size: 14px; }

/* Réservations en attente (fiche séance) */
.reservations-aide { font-weight: 400; font-size: 14px; color: var(--encre-douce); }
.reservations-table small { color: var(--encre-douce); }
.reservations-lignes { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; color: var(--encre-douce); }
.reservations-note { font-style: italic; }
.reservations-actions { white-space: nowrap; }
.reservations-encaisser { display: inline-flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.reservations-encaisser select { font: inherit; padding: 6px 8px; border: var(--bordure-fine); border-radius: 8px; }

/* Colonne gauche : carte collante — coordonnées acheteur puis résumé de la commande.
   Placée à gauche par l'ordre du DOM (1re dans .cg-grille), donc l'ordre de
   tabulation suit le visuel et le bouton « Encaisser » reste le dernier focusable. */
.cg-recap { position: sticky; top: 16px; background: var(--carte); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.cg-resume { padding: 0; }

/* Coordonnées acheteur repliables (facultatif) : un filet sépare du résumé,
   le summary est une ligne cliquable compacte. */
.cg-client { border-top: var(--bordure-fine); padding-top: 12px; }
.cg-client__resume { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  cursor: pointer; list-style: none; font-family: var(--font-titres); }
.cg-client__resume::-webkit-details-marker { display: none; }
.cg-client__resume::before { content: "+"; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 4px; border-radius: 50%; border: var(--bordure-fine);
  font-size: 14px; line-height: 1; color: var(--encre-douce); flex: none; }
.cg-client[open] .cg-client__resume::before { content: "–"; }
.cg-client__titre { font-weight: 700; }
.cg-client__option { color: var(--encre-douce); font-size: 13px; font-weight: 400; }
.cg-client .caisse__champs { margin-top: 12px; }

/* Résumé des lignes (placement libre) */
.cg-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cg-vide { color: var(--encre-douce); font-size: 14px; }
.cg-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.cg-ligne__lib { font-weight: 600; }
.cg-ligne__prix { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Remise du billet : choix exclusif imprimer / email / les deux */
.cg-remise { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cg-remise[hidden] { display: none; }
.cg-remise__titre { width: 100%; padding: 0; margin: 0 0 2px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--encre-douce); }
.cg-remise__opt { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; line-height: 1.2;
  font-size: 13.5px; padding: 8px 12px; border: 1.5px solid var(--bordure); border-radius: 10px;
  background: var(--carte); transition: border-color .12s, background .12s; }
.cg-remise__opt input { width: 16px; height: 16px; accent-color: var(--violet); flex: none; }
.cg-remise__opt:has(input:checked) { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 8%, transparent); }

/* Bouton « vider la sélection » (placement libre) */
.cg-vider { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 10px;
  background: none; border: 0; padding: 4px 0; color: var(--encre-douce); font-family: var(--font-texte);
  font-size: 13px; cursor: pointer; }
.cg-vider:hover { color: var(--violet); }
.cg-vider[hidden] { display: none; }
.cg-ico-vider { width: 14px; height: 14px; flex: none; }

/* Icône à gauche du libellé dans le bouton « Choisir les places sur le plan » */
.gp-ouvrir { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.cg-ico-btn { width: 19px; height: 19px; flex: none; }

/* Message d'aide quand le bouton « Encaisser » est désactivé */
.cg-aide-valider { margin: 0; font-size: 12.5px; color: var(--encre-douce); text-align: center; }
.cg-aide-valider[hidden] { display: none; }

@media (max-width: 900px) {
  .cg-grille { grid-template-columns: 1fr; }
  .cg-recap { position: static; }
  /* Sur mobile/tablette : l'action principale (choisir les places) passe en
     premier ; l'acheteur + le résumé viennent ensuite. */
  .cg-travail { order: -1; }
}

/* ---- Caisse numérotée : bouton d'ouverture + modale du plan ---- */
.gp-ouvrir { width: 100%; justify-content: center; font-size: 1.05rem; padding: 14px 16px; }
.caisse__plan-aide { margin: 12px 0 0; font-size: 13px; color: var(--encre-douce); }

.gp-modal { position: fixed; inset: 0; z-index: 1000; display: flex; padding: 18px;
  align-items: stretch; justify-content: center; background: rgba(42, 33, 56, .55); }
.gp-modal[hidden] { display: none; }
.gp-modal__dialog { background: var(--carte); border-radius: var(--rayon); width: 100%; max-width: 1320px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--ombre-douce); }
.gp-modal__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--violet-pale); }
.gp-modal__tete .pc-legende { margin: 0; }
.gp-modal__fermer { flex: none; background: none; border: none; cursor: pointer; padding: 4px 10px;
  border-radius: 8px; font-size: 20px; line-height: 1; color: var(--encre-douce); }
.gp-modal__fermer:hover { background: var(--violet-pale); color: var(--violet); }
.gp-modal__corps { flex: 1; min-height: 0; overflow: auto; padding: 18px; }
.gp-modal__pied { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-top: 1px solid var(--violet-pale); }
.gp-modal__compte { font-weight: 600; color: var(--encre-douce); }
body.gp-modal-ouverte { overflow: hidden; }

.champ-affiche { margin-bottom: 18px; }
.champ-affiche__label { font-weight: 600; display: block; }
.champ-affiche__apercus { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.champ-affiche__apercu { display: flex; flex-direction: column; gap: 6px; }
.champ-affiche__apercu[hidden] { display: none; }
.champ-affiche__apercu-label { font-size: 13px; color: var(--encre-douce); font-weight: 600; }
.champ-affiche__apercu img { width: 120px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--rayon-petit); box-shadow: var(--ombre-douce); display: block; }
.champ-aide { margin: 8px 0 0; font-size: 13px; color: var(--encre-douce); background: var(--violet-pale); border-radius: var(--rayon-petit); padding: 8px 12px; }

.form-note { background: var(--violet-pale); border-radius: var(--rayon-petit); padding: 12px 14px; font-size: 14px; }
.form-note--accueil { border-left: 4px solid var(--violet); margin: 0 0 22px; line-height: 1.5; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ---- Fiche : section « Le lieu » ---------------------------------------- */
.lieu-bloc { margin: 8px 0 32px; }
.lieu-bloc__corps {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 20px 22px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.lieu-bloc__nom { margin: 0 0 4px; font-weight: 700; font-size: 1.1rem; }
.lieu-bloc__adresse { margin: 0; color: var(--encre-douce); }

/* ---- Espace organisateur : gestion séances & tarifs --------------------- */
.bloc-orga { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 20px 22px; margin: 16px 0 28px; }
.bloc-orga h2 { margin: 0 0 12px; font-size: 1.2rem; }
.bloc-orga h3 { margin: 0 0 12px; font-size: 1.05rem; font-family: var(--font-titres); font-weight: 700; }

/* Onglet « Réglages de la séance » : titres de groupe (La séance / Vente en
   ligne / Zone de danger) au-dessus des cartes blanches. */
.reglages-groupe {
  font-family: var(--font-titres); font-size: 1.25rem; font-weight: 800;
  margin: 30px 2px 12px; padding-bottom: 6px; border-bottom: 2px solid var(--violet-pale);
}
.reglages-groupe--premier { margin-top: 6px; }
.reglages-groupe--danger { color: var(--erreur); border-bottom-color: #F0C9C9; }
.zone-danger { border: 1px solid #E7B7B7; box-shadow: none; }
/* Rappel du montant TTC sous un réglage saisi hors taxes. */
.bloc-mode__ttc { margin: 6px 0 0; font-size: var(--t-mention); color: var(--encre-douce); }
/* Provisions : choix de la voie de règlement, puis fiche de la provision. */
.prov-choix__voies { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 6px; }
.prov-montant { font-size: var(--t-chiffre, 26px); margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.prov-rib { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.prov-rib div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.prov-rib dt { min-width: 11rem; color: var(--encre-douce); font-size: 14px; margin: 0; }
.prov-rib dd { margin: 0; font-weight: 600; }
.prov-rib__iban { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.btn--ajout-tarif { margin-top: 8px; }
/* Une action destructrice était ici un aplat ROUGE PLEIN, ce que la règle
   d'erreur de DESIGN.md interdit : le rouge plein annonce une erreur, pas une
   action. Un bouton « Supprimer cette séance » se lisait donc comme un message
   d'alerte. La classe unique est .btn--destructeur (définie plus bas, avec la
   fenêtre de confirmation) : blanc, filet rouge, texte rouge. */
.form-inline { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.form-inline label { font-weight: 600; font-size: 14px; }
.form-inline input { display: block; margin-top: 6px; font-family: var(--font-texte); font-size: 15px; padding: 10px 12px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); }

/* Espace de travail d'un spectacle : le menu de l'événement est désormais
   la colonne de gauche (cf. .espace-sidebar) ; ces deux conteneurs ne servent
   plus qu'à délimiter le contenu. */
.spectacle-espace { display: block; }
.spectacle-contenu { min-width: 0; }
/* Rythme vertical du tableau de bord : un intervalle unique entre les grands
   blocs, au lieu d'une marge différente sur chacun. Les marges adjacentes
   fusionnent, donc les blocs qui portent déjà la leur ne doublent pas. */
.spectacle-contenu--dash > * + * { margin-top: 32px; }

/* Liste des séances (cartes cliquables → page de la séance) */
/* Ligne « Lieu de l'événement » en tête de l'écran des dates : le lieu était
   affiché sans qu'on puisse le changer, et la fonction vivait sur un autre
   écran, repliée. Elle se voit et s'atteint d'ici. */
.seances-lieu { margin: 16px 0 20px; padding: 4px 16px; }

/* Arrivée par ce lien : le bloc visé se signale. Sans ce repère, l'ancre dépose
   le regard au bon endroit sans rien y montrer. */
#lieu:target { outline: 2px solid var(--violet); outline-offset: 6px; border-radius: var(--rayon-petit); }

.seances-liste { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 28px; }
.seance-carte {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
}
.seance-carte__haut {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px 12px;
}
.seance-carte__principal { min-width: 0; }
.seance-carte__date { display: block; font-family: var(--font-titres); font-weight: 800; font-size: 1.1rem; }
.seance-carte__meta { display: block; margin-top: 4px; font-size: 14px; color: var(--encre-douce); }
.seance-carte__lieu { display: block; margin-top: 3px; font-size: 13px; color: var(--encre-douce); }
.seance-carte__alerte { color: var(--attention); font-weight: 600; }
/* Rangée d'actions par séance (Vendre au guichet / Contrôle d'accès / Tarifs). */
.seance-carte__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 20px 14px; }
.seance-carte__actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.seance-carte__actions .btn svg { width: 15px; height: 15px; }

/* Dupliquer une séance (volet sous la carte). */
.seance-dupli { border-top: 1px solid var(--violet-pale); padding: 0 22px; }
.seance-dupli__btn {
  cursor: pointer; list-style: none; padding: 11px 0; font-size: 13px; font-weight: 700; color: var(--violet); user-select: none;
}
.seance-dupli__btn::-webkit-details-marker { display: none; }
.seance-dupli__btn:hover { color: var(--violet-fonce); }
/* La duplication demande désormais ce qu'elle emporte : le formulaire passe
   d'une ligne (date + bouton) à un petit panneau (date, cases, bouton). */
.seance-dupli__form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 4px 0 16px; }
.seance-dupli__date { flex-direction: column; }
.seance-dupli__choix { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.seance-dupli__choix legend {
  padding: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--encre-douce);
}
/* La règle générique « .seance-dupli__form label » (plus bas dans ce fichier)
   empile ses enfants en colonne, ce qui mettait la case au-dessus de son texte.
   À spécificité égale, c'est la dernière écrite qui gagne : on qualifie donc
   celle-ci par le formulaire, plutôt que de déplacer des blocs entiers. */
.seance-dupli__form .seance-dupli__choix label {
  flex-direction: row; align-items: baseline; gap: 9px;
  font-size: 13.5px; font-weight: 400; color: var(--encre); cursor: pointer;
}
.seance-dupli__form .seance-dupli__choix input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--violet); flex: 0 0 auto;
  position: relative; top: 2px;
}
.seance-dupli__jamais { max-width: 52ch; margin: 0; }
.seance-dupli__form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.seance-dupli__form input { padding: 9px 11px; border: var(--bordure-fine); border-radius: var(--rayon-petit); font-family: var(--font-texte); font-size: 14px; }

/* Formulaire « ajouter une ou plusieurs séances ». */
.form-ajout-seances { display: flex; align-items: flex-end; gap: 14px 16px; flex-wrap: wrap; }
.dates-multiples { display: flex; flex-direction: column; gap: 8px; }
.dates-multiples__ligne { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.dates-multiples__ligne input { margin-top: 4px; padding: 10px 12px; border: var(--bordure-fine); border-radius: var(--rayon-petit); font-family: var(--font-texte); font-size: 15px; background: var(--carte); }
.dates-multiples__suppr { background: none; border: none; cursor: pointer; color: var(--encre-douce); font-size: 15px; line-height: 1; padding: 4px; }
.dates-multiples__suppr:hover { color: var(--erreur); }
.form-placement { font-weight: 600; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.form-placement select { padding: 10px 12px; border: var(--bordure-fine); border-radius: var(--rayon-petit); font-family: var(--font-texte); font-size: 15px; background: var(--carte); }
.champ-aide--attention { background: #FDF3DA; color: var(--encre); }

.seance-detail__suppr { margin-top: 20px; }
/* Annulation d'une date : le motif se saisit juste avant le bouton, pour qu'on
   ne puisse pas annuler sans se demander pourquoi. */
.seance-annuler { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 20px; }
.seance-annuler__motif { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; font-size: 14px; font-weight: 600; }
.seance-annuler__motif small { font-weight: 400; color: var(--encre-douce); }
.seance-annuler__motif input {
  padding: 10px 12px; border: var(--bordure-fine); border-radius: var(--rayon-petit);
  font: inherit; font-weight: 400; background: var(--carte); color: var(--encre);
}

.seance-gestion { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 20px 22px; margin-bottom: 18px; }
.seance-gestion__tete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.seance-gestion__tete h3 { margin: 0; font-family: var(--font-titres); font-weight: 600; font-size: 1.15rem; }
.seance-gestion__jauge { font-size: 13px; color: var(--encre-douce); }
.seance-gestion__verrou { font-size: 13px; color: var(--encre-douce); margin-left: auto; }
.seance-gestion__tete form { margin-left: auto; }
.lien-supprimer { background: none; border: none; cursor: pointer; color: var(--erreur); font-weight: 600; font-size: 14px; font-family: var(--font-texte); padding: 0; }
.lien-supprimer:hover { text-decoration: underline; }
.cmd-modif { background: var(--carte, #fff); border: 1px solid #F8D9EE; border-radius: 12px; padding: 8px 18px 18px; margin: 0 0 18px; }
.cmd-modif h2 { font-size: 1.1rem; }
.cmd-coord { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: end; }
.cmd-coord button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 600px) { .cmd-coord { grid-template-columns: 1fr; } }
.cmd-provision { background: #FDECEF; border: 1px solid #F3B9C7; border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; }
.cmd-provision p { margin: 0 0 8px; color: #9B1C3D; }
.remb-mode { border: 1px solid var(--framboise-pale); border-radius: 10px; padding: 8px 14px 12px; margin: 0 0 16px; }
.remb-mode legend { font-weight: 700; font-size: 13px; padding: 0 6px; color: var(--encre); }
/* Options de remboursement en cartes radio : titre + explication, état
   sélectionné visible (jamais une couleur d'alerte). */
/* Spécificité renforcée (label.remb-choix) pour battre les règles de formulaire
   qui mettent les <label> en display:block / flex-direction:column. */
.remb-mode label.remb-choix { display: flex; flex-direction: row; gap: 10px;
  align-items: flex-start; margin: 8px 0 0; padding: 10px 12px;
  border: var(--bordure-fine); border-radius: 10px; cursor: pointer; }
.remb-choix input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--violet); }
.remb-choix:has(input:checked) { background: var(--framboise-pale); border-color: var(--framboise); }
.remb-choix__corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.remb-choix__titre { font-weight: 700; color: var(--encre); }
.remb-choix__desc { font-size: 13.5px; line-height: 1.4; color: var(--encre-douce); }
/* Moyen du remboursement en argent au guichet (espèces / TPE / chèque) */
.remb-methode { border: 1px solid var(--framboise-pale); border-radius: 10px; padding: 10px 14px 12px; margin: 0 0 16px; }
.remb-methode__titre { display: block; font-weight: 700; font-size: 13px; color: var(--encre); margin-bottom: 8px; }
.remb-methode__choix { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.case--inline { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; margin: 0; }
.remb-methode__aide { margin: 8px 0 0; font-size: 12.5px; color: var(--encre-douce); }
.panier-abandon { margin: 4px 0 22px; }
.lien-abandon { background: none; border: none; cursor: pointer; color: var(--encre-douce); font-weight: 600; font-size: 13px; font-family: var(--font-texte); padding: 0; }
.lien-abandon:hover { color: var(--erreur); text-decoration: underline; }

.tarifs-gestion { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.tarifs-gestion th, .tarifs-gestion td { text-align: left; padding: 8px 10px; font-size: 14px; border-bottom: var(--bordure-fine); }
.tarifs-gestion .num { text-align: right; }
.tarifs-gestion thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--encre-douce); }
.tarifs-gestion .num form { display: inline; }

.form-tarif-ajout { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-tarif-ajout input { font-family: var(--font-texte); font-size: 14px; padding: 9px 11px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); }
.form-tarif-ajout input[name=libelle] { flex: 1 1 140px; }
.form-tarif-ajout input[name=categorie] { flex: 1 1 140px; }
.form-tarif-ajout input[name=prix] { width: 110px; }
.form-tarif-ajout input[name=quota] { width: 90px; }
.form-tarif-ajout .btn { padding: 9px 18px; }

/* ---- Espace : modification d'un tarif (icône action + structure dépliable) */
.tag-visibilite {
  display: inline-block; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--violet-pale); color: var(--violet); padding: 3px 10px; border-radius: 999px;
}
.btn-action {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-texte); font-size: 13px; font-weight: 600;
  color: var(--violet); background: var(--carte);
  border: var(--bordure-fine); border-radius: 999px; padding: 6px 12px;
}
.btn-action:hover { background: var(--violet-pale); }
.btn-action svg { width: 15px; height: 15px; }
.btn-action[aria-expanded="true"] { background: var(--violet); color: #fff; border-color: var(--violet); }

.tarif-edit > td { background: var(--violet-pale); padding: 0; }
.tarif-edit__panneau { padding: 18px; }
.form-tarif-edit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; align-items: end;
}
.form-tarif-edit label { display: block; font-weight: 600; font-size: 13px; }
.form-tarif-edit label small { font-weight: 400; color: var(--encre-douce); }
.form-tarif-edit input, .form-tarif-edit select {
  display: block; width: 100%; margin-top: 5px; font-family: var(--font-texte); font-size: 14px;
  padding: 9px 11px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte);
}
.form-tarif-edit input:focus, .form-tarif-edit select:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(69, 58, 94, 0.18);
}
.form-tarif-edit__actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.form-tarif-edit__actions .btn { padding: 9px 18px; }
.form-tarif-suppr { margin-top: 14px; padding-top: 12px; border-top: var(--bordure-fine); }
.tarif-edit__note { margin: 14px 0 0; font-size: 13px; color: var(--encre-douce); }

/* ---- Fiche tarif (page d'édition dédiée) -------------------------------- */
.fiche-tarif__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.fiche-tarif__entete h1 { margin: 0 0 2px; }
.fiche-tarif__ref { color: var(--encre-douce); font-size: 13px; font-weight: 600; white-space: nowrap; margin-top: 8px; }

.fiche-tarif__cols { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.fiche-tarif__principal { min-width: 0; }

.bloc-fiche { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 22px 24px; margin-bottom: 20px; }
.bloc-fiche h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 0 0 18px; }
.bloc-fiche h2 svg { width: 20px; height: 20px; color: var(--violet); flex-shrink: 0; }
/* Bloc « commun à l'événement » : distinct du reste de la fiche (portée plus
   large que ce seul tarif) — filet ambré et fond chaud, pas une carte comme les autres. */
.bloc-fiche--commun {
  background: var(--attention-pale); box-shadow: none;
  border: 1px solid var(--ambre);
}
.bloc-commun__note {
  margin: -6px 0 16px; padding: 8px 12px; border-radius: var(--rayon-petit, 8px);
  background: rgba(255,255,255,.6); color: var(--encre);
}

.champ { display: block; font-weight: 600; font-size: 14px; margin-bottom: 16px; }
.champ:last-child { margin-bottom: 0; }
.champ small { font-weight: 400; color: var(--encre-douce); }
.champ input, .champ textarea, .champ select {
  display: block; width: 100%; margin-top: 6px; font-family: var(--font-texte); font-size: 15px;
  padding: 11px 13px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); color: var(--encre);
}
.champ textarea { resize: vertical; }
.champ--court input { max-width: 220px; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale);
}

.fiche-tarif__percu { background: var(--violet-pale); border-radius: var(--rayon-petit); padding: 10px 14px; font-size: 14px; margin: 0 0 16px; }
.fiche-tarif__percu strong { color: var(--violet); font-size: 1.05rem; }
.fiche-tarif__percu small { color: var(--encre-douce); }
/* Les deux montants d'un tarif, côte à côte : ce que paie l'acheteur et ce que
   perçoit l'organisateur. Ils passent l'un sous l'autre sur un écran étroit. */
.prix-duo { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.prix-duo .champ { flex: 1 1 12rem; margin: 0; }
/* Le décompte, sous les deux champs : d'où vient l'écart entre eux. */
.prix-decompte { display: flex; flex-direction: column; gap: 4px; }
.prix-decompte__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; }
.prix-decompte__ligne span { color: var(--encre-douce); }
.prix-decompte__ligne strong { font-variant-numeric: tabular-nums; }
.prix-decompte__ligne--retrait strong { font-weight: 500; font-size: 1rem; }
.prix-decompte__ligne--total { border-top: var(--bordure-fine); margin-top: 4px; padding-top: 6px; }
.prix-decompte__ligne--total span { color: var(--encre); font-weight: 600; }

/* Options avancées du tarif : dépliant replié par défaut, à l'écart de l'essentiel */
.tarif-avance { background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon); overflow: hidden; margin-top: 4px; }
.tarif-avance__tete { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 13px; padding: 15px 18px; }
.tarif-avance__tete::-webkit-details-marker { display: none; }
.tarif-avance__lib { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tarif-avance__t { font-family: var(--font-titres); font-weight: 700; font-size: 15px; }
.tarif-avance__s { color: var(--encre-douce); font-size: 12.5px; }
.tarif-avance__chev { width: 17px; height: 17px; color: var(--encre-douce); transition: transform .15s; flex: 0 0 auto; }
.tarif-avance[open] .tarif-avance__chev { transform: rotate(180deg); }
.tarif-avance__corps { padding: 4px 18px 18px; border-top: var(--bordure-fine); }
.tarif-avance__corps .champ-option:first-child { border-top: 0; padding-top: 4px; margin-top: 8px; }
.tarif-avance__corps #avance-prix[hidden] { display: none; }

/* Bloc « option » : interrupteur + champ révélé */
.champ-option { border-top: var(--bordure-fine); padding-top: 14px; margin-top: 16px; }
.champ-option__corps { margin-top: 12px; }
.champ-option__corps[hidden] { display: none; }
.champ-option__corps input {
  display: block; width: 100%; font-family: var(--font-texte); font-size: 15px;
  padding: 11px 13px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); color: var(--encre);
}
.champ-option__corps input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale); }

/* Interrupteur maison (framboise) */
.bascule { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-weight: 600; font-size: 14px; }
.bascule input { position: absolute; opacity: 0; width: 0; height: 0; }
.bascule__piste { width: 42px; height: 24px; border-radius: 999px; background: var(--desactive-bg); position: relative; flex-shrink: 0; transition: background .15s ease; }
.bascule__piste::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(42,33,56,.25); transition: transform .15s ease; }
.bascule input:checked + .bascule__piste { background: var(--framboise); }
.bascule input:checked + .bascule__piste::after { transform: translateX(18px); }
.bascule input:focus-visible + .bascule__piste { outline: 3px solid var(--framboise-pale); outline-offset: 2px; }
.bascule__txt small { font-weight: 400; color: var(--encre-douce); }

.fiche-tarif__actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 4px; }
.fiche-tarif__aside { display: flex; flex-direction: column; gap: 16px; }
.encart-ticket { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 18px 20px; border-left: 3px dashed var(--framboise-pale); }
.encart-ticket h3 { margin: 0 0 8px; font-size: 1rem; }
.encart-ticket p { margin: 0; font-size: 14px; color: var(--encre-douce); }
.encart-ticket__liste { margin: 0; padding-left: 18px; font-size: 14px; color: var(--encre-douce); }
.encart-ticket__liste li { margin-bottom: 6px; }
.fiche-tarif__suppr { text-align: center; }

@media (max-width: 860px) {
  .fiche-tarif__cols { grid-template-columns: 1fr; }
}

/* ---- Espace : visibilité des tarifs ------------------------------------- */
.legende-visibilite { font-size: 13px; color: var(--encre-douce); background: var(--violet-pale); border-radius: var(--rayon-petit); padding: 10px 14px; }
.lien-secret { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 16px 18px; margin: 14px 0 24px; font-size: 14px; }
.lien-secret code { display: inline-block; margin-top: 6px; background: var(--violet-pale); color: var(--violet-fonce); padding: 6px 10px; border-radius: var(--rayon-petit); font-size: 13px; word-break: break-all; }
.form-visibilite { display: flex; gap: 6px; align-items: center; }
.form-visibilite select { font-family: var(--font-texte); font-size: 13px; padding: 5px 8px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); }
.btn-mini { font-family: var(--font-texte); font-size: 12px; font-weight: 700; padding: 6px 10px; border: none; border-radius: 999px; background: var(--violet); color: #fff; cursor: pointer; }
.btn-mini:hover { background: var(--violet-fonce); }
.form-tarif-ajout select { font-family: var(--font-texte); font-size: 14px; padding: 9px 11px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); }

/* ---- Code de réduction (tunnel) ----------------------------------------- */
.code-reduc {
  background: var(--violet-pale); border-radius: var(--rayon-petit); padding: 14px 16px; margin-bottom: 20px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
.code-reduc label { font-weight: 600; margin: 0; flex: 1 1 220px; }
.code-reduc input { display: block; width: 100%; margin-top: 6px; font-family: var(--font-texte); font-size: 15px; padding: 11px 14px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); text-transform: uppercase; }
.code-reduc .btn { padding: 11px 22px; }
.code-msg { flex-basis: 100%; margin: 0; font-weight: 600; font-size: 14px; }
.code-msg--ok { color: var(--succes); }
.code-msg--err { color: var(--erreur); }
.recap-remise td { color: var(--succes); font-weight: 600; }
.remise-confirmee { color: var(--succes); font-weight: 600; }

/* ---- Espace : divers ---------------------------------------------------- */
.conditions { font-size: 13px; color: var(--encre-douce); }

/* ---- Sélecteur de séance (fiche spectacle) ------------------------------ */
.seance-choix-label { font-weight: 700; margin: 0 0 10px; }
.seance-onglets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.seance-onglet {
  font-family: var(--font-texte); font-weight: 600; font-size: 15px;
  padding: 11px 20px; border-radius: 999px; border: var(--bordure-fine);
  background: var(--carte); color: var(--encre); cursor: pointer;
  box-shadow: var(--ombre-douce); transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
  text-transform: capitalize;
}
.seance-onglet:hover { transform: translateY(-1px); }
.seance-onglet.is-actif { background: var(--violet); color: #fff; border-color: transparent; }
.seance-bloc.is-cache { display: none; }

/* Onglets de la page d'une séance : « Tarifs » / « Réglages de la séance ». */
.seance-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--violet-pale); margin: 18px 0 22px; }
.seance-onglet-btn {
  background: none; border: none; cursor: pointer; font-family: var(--font-texte);
  font-size: 15px; font-weight: 700; color: var(--encre-douce); padding: 11px 18px;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.seance-onglet-btn:hover { color: var(--violet); }
.seance-onglet-btn.is-actif { color: var(--violet); border-bottom-color: var(--violet); }
.seance-panneau.is-cache { display: none; }

/* ---- Contrôle d'accès (scan des billets) -------------------------------- */
.controle { max-width: 520px; margin: 0 auto; }
/* Bandeau d'état réseau du contrôle d'accès (mode hors ligne). */
.net-statut { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--rayon-petit); font-weight: 600; font-size: 14px; background: #E3F3EC; color: #1B7A4B; }
.net-statut__point { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.net-statut__txt { flex: 1; min-width: 0; }
.net-statut__sync { flex: 0 0 auto; padding: 6px 12px; font-size: 13px; }
.net-statut--hors { background: #FBEFD3; color: #946200; }
.net-statut--attente { background: #FCE9D6; color: #9A4E13; }
.controle__seance { display: block; font-weight: 600; margin: 16px 0; }
.controle__seance select { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); font-family: var(--font-texte); font-size: 15px; }
.controle__cam { text-align: center; margin: 16px 0; }
.controle__cam video { width: 100%; max-width: 460px; aspect-ratio: 4 / 3; object-fit: cover; background: #1c1726; border-radius: var(--rayon); display: block; margin: 0 auto 12px; }
.controle__camerr { color: var(--erreur); font-size: 14px; margin-top: 8px; }
.controle__manuel { display: flex; gap: 10px; align-items: flex-end; margin-top: 16px; }
.controle__manuel label { flex: 1; font-weight: 600; }
.controle__manuel input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); font-family: var(--font-texte); font-size: 15px; }
.controle__compteur { margin-top: 20px; color: var(--encre-douce); }

/* Recherche par nom au contrôle (billets sans QR) */
.controle__recherche { margin-top: 16px; }
.controle__recherche label { font-weight: 600; display: block; }
.controle__recherche input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); font-family: var(--font-texte); font-size: 15px; }
.rech-resultats { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rech-vide { color: var(--encre-douce); font-size: 14px; padding: 4px 2px; }
.rech-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); }
.rech-item__info { min-width: 0; font-size: 14px; line-height: 1.35; }
.rech-item__info small { color: var(--encre-douce); }
.rech-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--violet-pale); color: var(--violet); vertical-align: middle; }
.rech-badge--utilise { background: var(--violet); color: #fff; }
.rech-presence { flex: none; font-family: var(--font-texte); font-weight: 700; font-size: 14px; cursor: pointer;
  padding: 9px 14px; border: none; border-radius: 999px; background: var(--violet); color: #fff; }
.rech-presence:hover { background: var(--violet-fonce); }

.resultat { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 24px; }
.resultat--cache { display: none; }
.resultat--valide { background: var(--succes); }
.resultat--erreur { background: var(--erreur); }
.resultat--attention { background: var(--attention); color: var(--encre); }
.resultat__icone { font-size: 88px; line-height: 1; font-weight: 800; }
.resultat__titre { font-family: var(--font-titres); font-weight: 800; font-size: 30px; margin: 12px 0 8px; }
.resultat__detail { font-size: 17px; line-height: 1.5; }
.resultat__actions { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.resultat__btn { font-family: var(--font-texte); font-weight: 700; font-size: 16px; padding: 14px 28px; border: none; border-radius: 999px; background: #fff; color: var(--encre); cursor: pointer; }
.resultat__btn--annuler { background: transparent; color: inherit; border: 2px solid currentColor; }
/* Note interne affichée au scan (équipe) : encadré bien visible sur le fond coloré. */
.res-note { margin: 18px auto 0; max-width: 440px; padding: 12px 16px 13px; border-radius: 12px;
  border-left: 5px solid var(--attention); background: #fff; color: var(--encre); text-align: left;
  font-weight: 700; font-size: 18px; line-height: 1.35; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.res-note::before { content: "Note"; display: block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--encre-douce); margin-bottom: 3px; }

/* ====== Contrôle d'accès : sélecteur de modes ====== */
.controle__modes { display: flex; gap: 4px; margin: 16px 0; padding: 4px;
  background: var(--fond); border: var(--bordure-fine); border-radius: 999px; }
.controle__mode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 8px; border: none; background: transparent; border-radius: 999px;
  font-family: var(--font-texte); font-weight: 700; font-size: 14px; color: var(--encre-douce); cursor: pointer; }
.controle__mode svg { width: 16px; height: 16px; }
.controle__mode.actif { background: var(--carte); color: var(--framboise); box-shadow: var(--ombre-douce); }
.controle__mode:focus-visible { outline: 2px solid var(--framboise); outline-offset: 2px; }

/* Filtres partagés (pointage + liste imprimable) */
.controle-filtres { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin: 16px 0; }
.controle-filtres label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.controle-filtres select,
.controle-filtres input[type="search"] { padding: 9px 11px; border: var(--bordure-fine);
  border-radius: var(--rayon-petit); background: var(--carte); font-family: var(--font-texte); font-size: 14px; }
.controle-filtres__rech { flex: 1; min-width: 140px; }
.controle-filtres__check { flex-direction: row; align-items: center; gap: 8px; }
.controle-hint { margin: 12px 0; padding: 12px 14px; background: var(--fond);
  border: var(--bordure-fine); border-radius: var(--rayon-petit); color: var(--encre-douce); font-size: 14px; }

/* Liste à cocher à l'écran */
.pointage-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pointage-vide { color: var(--encre-douce); font-size: 14px; padding: 8px 2px; }
.pointage-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); cursor: pointer; }
.pointage-item:hover { border-color: var(--framboise); }
.pointage-item:focus-visible { outline: 2px solid var(--framboise); outline-offset: 2px; }
.pointage-case { flex: 0 0 auto; width: 26px; height: 26px; border: 2px solid var(--violet-pale);
  border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: transparent; }
.pointage-item__info { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.pointage-item__info small { color: var(--encre-douce); }
.pointage-etat { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--encre-douce); }
/* État « entré » : teinte de marque + coche (jamais une couleur d'alerte). */
.pointage-item--entre { background: var(--framboise-pale); border-color: var(--framboise-pale); }
.pointage-item--entre .pointage-case { background: var(--framboise); border-color: var(--framboise); color: #fff; }
.pointage-item--entre .pointage-etat { color: var(--framboise); }

/* ====== Liste imprimable (page autonome) ====== */
.liste-imprimable { max-width: 900px; margin: 0 auto; padding: 24px;
  background: var(--fond); color: var(--encre); font-family: var(--font-texte); }
.li-barre { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 16px; }
.li-tete { margin-bottom: 16px; }
.li-tete h1 { font-family: var(--font-titres); margin: 0 0 4px; }
.li-tete__seance { margin: 0; color: var(--encre-douce); }
.li-tete__meta { margin: 6px 0 0; font-size: 14px; color: var(--encre-douce); }
.li-message { padding: 32px 16px; text-align: center; color: var(--encre-douce); }
.li-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--carte); }
.li-table th, .li-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--violet-pale); }
.li-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-douce); }
.li-nom { font-weight: 700; }
.li-check { width: 34px; }
.li-case { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--encre-douce); border-radius: 4px; }
/* Un billet DÉJÀ SCANNÉ, sur une liste qui part à l'imprimante.
   Trois signaux, jamais une couleur seule : la case est cochée, le mot est
   écrit, et le fond est grisé. Les deux premiers survivent à une photocopie en
   noir et blanc — c'est justement dans ce cas-là qu'on se sert du papier. */
.li-case--cochee {
  border-color: var(--encre); background: var(--encre); color: #fff;
  text-align: center; line-height: 15px; font-size: 13px; font-weight: 700;
}
.li-entre td { background: var(--fond); }
.li-deja {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border: 1px solid var(--encre-douce); border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--encre-douce); vertical-align: 1px;
}
.li-num { text-align: right; white-space: nowrap; color: var(--encre-douce); }
.li-grp td { background: var(--violet-pale); font-family: var(--font-titres); font-weight: 800; font-size: 13px; }
.li-grp__n { color: var(--encre-douce); font-weight: 600; }
@media print {
  .liste-imprimable { max-width: none; padding: 0; background: #fff; color: #000; }
  .li-barre { display: none; }
  .li-tete__seance, .li-tete__meta, .li-num { color: #000; }
  .li-table { background: #fff; }
  .li-table th, .li-table td { border-bottom: 1px solid #000; }
  .li-case { border-color: #000; }
  /* À l'impression, l'aplat noir de la case cochée peut disparaître si le
     navigateur refuse les fonds : on garde donc la coche en NOIR sur blanc,
     visible quels que soient les réglages. */
  .li-case--cochee { background: #fff; color: #000; border-color: #000; }
  .li-entre td { background: #f0f0f0; }
  .li-deja { color: #000; border-color: #000; }
  .li-grp td { background: #eee; }
  .li-grp--saut { break-before: page; }
}

/* ====== Icônes des pastilles de statut (générées, modifiables ici) ====== */
.statut { display: inline-flex; align-items: center; gap: 5px; }
.statut::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.statut--publie::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%230C7A54%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%2012s3.6-7%2010-7%2010%207%2010%207-3.6%207-10%207S2%2012%202%2012Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"); }
.statut--brouillon::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238A5A00%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4L18%2010l-4-4L4%2016v4Z%27%2F%3E%3Cpath%20d%3D%27M13%207l4%204%27%2F%3E%3C%2Fsvg%3E"); }
.statut--archive::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23675379%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%274%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M5%208v11a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1V8%27%2F%3E%3Cpath%20d%3D%27M10%2012h4%27%2F%3E%3C%2Fsvg%3E"); }
.statut--passe::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23675379%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207v5l3%202%27%2F%3E%3C%2Fsvg%3E"); }
.statut--payee::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%230C7A54%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M8%2012l3%203%205-6%27%2F%3E%3C%2Fsvg%3E"); }
.statut--emis::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%230C7A54%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%209a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v1.5a1.8%201.8%200%200%200%200%203.4V15a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-1.6a1.8%201.8%200%200%200%200-3.4V9Z%27%2F%3E%3Cpath%20d%3D%27M14%207v10%27%2F%3E%3C%2Fsvg%3E"); }
.statut--utilise::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239E126F%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%209a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v1.5a1.8%201.8%200%200%200%200%203.4V15a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-1.6a1.8%201.8%200%200%200%200-3.4V9Z%27%2F%3E%3Cpath%20d%3D%27M8.5%2012l2.5%202.5%204.5-5%27%2F%3E%3C%2Fsvg%3E"); }
.statut--remboursee::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23675379%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2014%204%209l5-5%27%2F%3E%3Cpath%20d%3D%27M4%209h10a6%206%200%200%201%206%206v1%27%2F%3E%3C%2Fsvg%3E"); }
.statut--annule::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23C2361F%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M9%209l6%206M15%209l-6%206%27%2F%3E%3C%2Fsvg%3E"); }

/* ===========================================================================
   MODE CAISSE (body.ecran-caisse) — habillage dédié de l'écran de vente au
   guichet : une vraie page de caisse, distincte du reste de l'admin, où le
   MONTANT à encaisser saute aux yeux. Plein écran (nav masquée), pensé tablette.
   Tout est scopé sous .ecran-caisse pour ne rien changer ailleurs.
   =========================================================================== */

/* Plein écran : nav de l'espace masquée (sortie par « Quitter la caisse »). */
.ecran-caisse .espace-sidebar,
.ecran-caisse .espace-rail { display: none !important; }
.ecran-caisse .espace-zone { background: #FBF1F7; }          /* surface violet clair ≠ crème admin */
.ecran-caisse .espace-main { max-width: none; padding: 0; }

/* Bandeau caisse en tête : violet plein, texte clair — repère immédiat. */
.ecran-caisse .espace-titre {
  background: linear-gradient(120deg, var(--nuit), var(--nuit-clair));
  color: #fff; margin: 0; position: relative;
  /* Bandeau pleine largeur, mais CONTENU centré sur une colonne ~1180 px
     (sinon tout s'étale à gauche sur grand écran). */
  padding: 18px max(32px, calc((100% - 1180px) / 2)) 22px;
}
.ecran-caisse .espace-titre .cg-eyebrow { color: #F8D9EE; }
.ecran-caisse .espace-titre .cg-spectacle,
.ecran-caisse .espace-main h1 { color: #fff; font-size: 2rem; }
.ecran-caisse .espace-titre .fil { position: absolute; top: 16px; right: 28px; margin: 0; }
.ecran-caisse .espace-titre .fil a {
  display: inline-block; background: rgba(255,255,255,.16); color: #fff;
  padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none;
}
.ecran-caisse .espace-titre .fil a:hover { background: rgba(255,255,255,.28); }
/* Bandeau infos sur fond violet : pastille SOMBRE (le fond clair par défaut
   rendait le texte blanc invisible) + texte blanc franc. */
.ecran-caisse .cg-seance-bandeau { margin-top: 12px; background: rgba(0,0,0,.18); }
.ecran-caisse .cg-seance-bandeau__item { background: transparent; color: #fff; border-color: transparent; }
/* Les icônes (calendrier/lieu/personnes) sont en violet par défaut → invisibles
   sur le bandeau violet. On les force en blanc (stroke = currentColor). */
.ecran-caisse .cg-seance-bandeau .cg-ico { color: #fff; }
.ecran-caisse .cg-seance-bandeau__capacite strong { color: var(--or); }

/* Zone de travail : centrée sur la même colonne ~1180 px (espace-main n'a plus
   de padding ni de max-width). Évite l'étalement à gauche sur grand écran. */
.ecran-caisse .caisse-guichet { max-width: 1180px; margin: 0 auto; padding: 24px 32px 40px; }

/* AFFICHEUR : le total = élément n°1, sur panneau violet, chiffre géant. */
.ecran-caisse .cg-resume { background: var(--carte); border-radius: var(--rayon); padding: 16px 18px; box-shadow: var(--ombre-douce); }
.ecran-caisse .caisse__total {
  background: linear-gradient(120deg, var(--nuit), var(--nuit-clair));
  color: #fff; border: 0; border-radius: 14px; padding: 14px 18px; margin-top: 10px;
}
.ecran-caisse .caisse__total span { color: #F8D9EE; font-weight: 600; }
.ecran-caisse .caisse__total strong { color: #fff; font-size: 2.6rem; line-height: 1.05; }

/* Pavés tarifs / steppers plus grands et tactiles. */
.ecran-caisse .caisse-tarif { padding: 14px 16px; border-radius: 14px; }
.ecran-caisse .caisse-tarif__lib { font-size: 16px; }
.ecran-caisse .stepper__btn { width: 42px; height: 42px; font-size: 22px; }
.ecran-caisse .stepper__val { width: 50px; height: 42px; font-size: 18px; }

/* Boutons de paiement plus grands. */
.ecran-caisse .caisse-mode { min-height: 56px; font-size: 15px; }

/* Titres de section discrets mais nets (repères de caisse). */
.ecran-caisse .caisse__titre { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-douce); }

/* Action reine : bouton Encaisser plus imposant. */
.ecran-caisse .caisse__valider { font-size: 1.15rem; padding: 16px; }

/* Caisse : on allège la hauteur — le pavé explicatif du bas (redondant avec
   l'aide « à distance ») est masqué pour garder l'action visible sans scroller. */
.ecran-caisse .caisse__note { display: none; }

/* Petit écran (portrait tablette / téléphone) : la colonne récap passe EN TÊTE
   et reste COLLANTE en haut → le total est toujours visible pendant qu'on
   choisit les places et le paiement plus bas. (En paysage, le récap est déjà
   visible en permanence dans la colonne de gauche.) */
@media (max-width: 900px) {
  .ecran-caisse .cg-travail { order: 0; }
  .ecran-caisse .cg-recap {
    order: -1; position: sticky; top: 0; z-index: 10;
    /* le fond blanc de la carte masque le contenu qui défile dessous */
  }
  /* On compacte la carte épinglée pour ne pas manger l'écran : titre du résumé
     masqué, total un peu plus petit, paddings resserrés. */
  .ecran-caisse .cg-resume .caisse__titre { display: none; }
  .ecran-caisse .cg-resume { padding: 12px 14px; }
  .ecran-caisse .caisse__total { padding: 10px 14px; margin-top: 6px; }
  .ecran-caisse .caisse__total strong { font-size: 2rem; }
}

/* --- Demandes d'accès (admin) --------------------------------------------- */
.carte-demande {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon, 14px);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.carte-demande__tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.carte-demande__tete h3 { margin: 0 0 2px; }
.carte-demande__meta { margin: 0; color: var(--encre-douce); font-size: .95rem; }
.carte-demande__date { color: var(--encre-douce); white-space: nowrap; }
.carte-demande__message {
  margin: 12px 0 0; padding: 10px 14px;
  background: var(--fond); border-radius: var(--rayon-petit, 10px);
  font-style: italic; color: var(--encre);
}
.carte-demande__actions {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  margin-top: 16px;
}
.carte-demande__form {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  flex: 1 1 auto;
}
.carte-demande__form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .9rem; font-weight: 600; flex: 1 1 220px;
}
.carte-demande__form input {
  padding: 9px 12px; border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit, 10px); font: inherit; font-weight: 400;
}
@media (max-width: 640px) {
  .carte-demande__actions, .carte-demande__form { flex-direction: column; align-items: stretch; }
  .carte-demande__form .btn, .carte-demande__actions > form .btn { width: 100%; }
}

/* ---- Salles vitrines (admin) : badges de statut, encart publication, aperçus - */
.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; line-height: 1.4;
  background: var(--violet-pale); color: var(--violet-fonce);
}
.tag--publie { background: #DBF3E8; color: var(--succes); }
.tag--brouillon { background: var(--framboise-pale); color: var(--framboise-fonce); }
.tag--archive { background: #eee; color: var(--encre-douce); }

/* Tableau de données — classe employée par onze vues (admin et espace) sans
   avoir jamais été définie : elles s'affichaient en rendu brut du navigateur,
   sans lignes alternées ni filet. DESIGN.md §7 : « tableaux lisibles, lignes
   alternées #FFF8F5 ». Le filet vient de --bordure-fine, comme prescrit. */
.tableau, .tableau-admin { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td,
.tableau-admin th, .tableau-admin td { padding: 9px 10px; font-size: 14px; text-align: left; }
.tableau .num, .tableau-admin .num { text-align: right; font-variant-numeric: tabular-nums; }
.tableau thead th, .tableau-admin thead th {
  font-size: var(--t-mention); text-transform: uppercase; letter-spacing: .06em;
  color: var(--encre-douce); border-bottom: var(--bordure-fine); font-weight: 600;
}
.tableau tbody tr:nth-child(even), .tableau-admin tbody tr:nth-child(even) { background: #FFF8F5; }
.tableau tbody td, .tableau-admin tbody td { border-top: var(--bordure-fine); }

/* États d'une demande traitée. La forme portait seule l'information (un ✓ ou un
   ✕) : ces trois classes étaient appelées sans exister, donc les trois statuts
   se ressemblaient. La couleur vient en RENFORT du signe, jamais à sa place. */
.tag--ok { background: var(--succes-pale); color: var(--succes); }
.tag--refus { background: var(--erreur-pale); color: var(--erreur-texte); }
.tag--attente { background: var(--attention-pale); color: var(--attention-texte); }
/* Le verrou n'est ni un succès ni une alerte : c'est un état de fait. D'où un
   gris parme neutre — le cadenas, lui, porte le sens. */
.tag--verrou { background: var(--violet-pale); color: var(--encre-douce); }
.note-fiscale--verrou { background: var(--violet-pale); color: var(--encre); }
.alerte--ok { background: #DBF3E8; color: var(--succes); }
.espace-encart {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; background: var(--violet-pale); border-radius: var(--rayon);
  padding: 16px 20px; margin: 16px 0 24px;
}
.champ-couleur { display: flex; align-items: center; gap: 12px; }
.champ-couleur input[type="color"] {
  width: 48px; height: 36px; padding: 0; border: 1px solid var(--bordure-fine);
  border-radius: var(--rayon-petit); background: none; cursor: pointer;
}
.apercu-visuel {
  display: block; margin: 8px 0; max-width: 260px;
  border-radius: var(--rayon-petit); overflow: hidden; border: 1px solid var(--bordure-fine);
}
.apercu-visuel img { display: block; width: 100%; height: auto; }
.apercu-visuel--logo { max-width: 140px; background: #f6f6f6; }

/* ============================================================================
   Fiches séance — page spectacle (admin). Une carte par séance regroupant
   billetterie + argent + à recevoir. (CSP : pas de style inline, tout ici.)
   ========================================================================== */
.fs-carte { background: var(--carte); border: 1px solid var(--violet-pale); border-radius: var(--rayon); padding: 18px 20px; margin: 0 0 16px; }
.fs-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--violet-pale); }
.fs-tete__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fs-col h4 { margin: 0 0 8px; font-family: var(--font-titres); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-douce); font-weight: 700; }
.fs-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .97rem; }
.fs-ligne > span { color: var(--encre-douce); }
.fs-ligne.fs-sous { font-size: .9rem; padding: 2px 0 2px 10px; }
.fs-ligne.fs-sous > span, .fs-ligne.fs-sous > strong { color: var(--encre-douce); font-weight: 400; }
.fs-ligne.fs-total { border-top: 1px solid var(--violet-pale); margin-top: 6px; padding-top: 8px; }
.fs-ligne.fs-total > span, .fs-ligne.fs-total > strong { font-weight: 700; color: var(--encre); }
.fs-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--violet-pale); }
.fs-pied .form-inline-recu { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-niveau { font-family: var(--font-texte); font-size: .62em; font-weight: 400; color: var(--encre-douce); letter-spacing: 0; }
.champ-court { width: 5.5em; }
.mt-16 { margin-top: 16px; }
@media (max-width: 720px) { .fs-grille { grid-template-columns: 1fr; gap: 8px; } }
.fs-pastille { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================================
   Liste compacte des spectacles (tableau de bord organisateur) — une ligne par
   spectacle, avec taux de remplissage. Jauge en SVG (pas de style inline : CSP).
   ========================================================================== */
.spec-liste{ background:var(--carte); border:1px solid var(--violet-pale); border-radius:var(--rayon); box-shadow:0 6px 22px rgba(42,33,56,.06); }
.spec-liste > .spec-ligne:first-child{ border-top-left-radius:var(--rayon); border-top-right-radius:var(--rayon); }
.spec-liste > .spec-ligne:last-child{ border-bottom-left-radius:var(--rayon); border-bottom-right-radius:var(--rayon); }
.spec-ligne{ display:flex; align-items:center; gap:18px; padding:12px 18px; border-bottom:1px solid var(--violet-pale); transition:background .12s; }
.spec-ligne:last-child{ border-bottom:0; }
.spec-ligne:hover{ background:#faf7fc; }
.spec-vig{ width:74px; height:104px; border-radius:12px; overflow:hidden; flex:0 0 auto; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(42,33,56,.14); }
.spec-vig img{ width:100%; height:100%; object-fit:cover; display:block; }
.spec-vig--vide{ background:linear-gradient(135deg, var(--nuit), var(--action-fonce)); color:#fff; }
.spec-vig--vide svg{ width:30px; height:30px; opacity:.9; }
.spec-corps{ flex:0 1 300px; min-width:180px; display:flex; flex-direction:column; gap:3px; }
.spec-corps__haut{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.spec-titre{ font-weight:700; font-size:1.05rem; color:var(--encre); text-decoration:none; }
.spec-titre:hover{ color:var(--violet); }
.spec-lieu{ font-weight:600; font-size:.9rem; color:var(--encre); }
.spec-dates{ color:var(--encre-douce); font-size:.84rem; }
.spec-metrics{ flex:1 1 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.spec-metrics .spec-gerer{ flex:0 0 auto; }
.spec-col{ text-align:left; white-space:nowrap; flex:0 0 auto; }
.spec-col .n{ font-weight:800; font-size:1.02rem; }
.spec-col .n.or{ color:var(--or-fonce); }
.spec-col .u{ font-size:.66rem; color:var(--encre-douce); text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-top:2px; }
.spec-remp{ flex:0 0 152px; }
.spec-remp__tete{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.spec-remp__pct{ font-weight:800; font-size:.95rem; }
.spec-remp__sub{ font-size:.68rem; color:var(--encre-douce); font-weight:700; }
.spec-remp.niv-vert .spec-remp__pct{ color:#0f6e56; }
.spec-remp.niv-orange .spec-remp__pct{ color:#8A5A00; }
.spec-remp.niv-rouge .spec-remp__pct{ color:#B23A34; }
@media (max-width:640px){
  .spec-ligne{ flex-wrap:wrap; }
  .spec-metrics{ flex-basis:100%; justify-content:flex-start; gap:16px; }
}

/* Onglets de filtrage de la liste des événements (tableau de bord orga). */
.evt-onglets{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.evt-onglet{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:.92rem; font-weight:600; color:var(--encre-douce); background:transparent; border:1px solid transparent; border-radius:999px; padding:8px 14px; cursor:pointer; transition:background .12s, color .12s; }
.evt-onglet:hover{ background:var(--violet-pale); color:var(--violet); }
.evt-onglet.actif{ background:var(--violet); color:#fff; }
.evt-onglet__n{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:.74rem; font-weight:800; background:var(--violet-pale); color:var(--violet); }
.evt-onglet.actif .evt-onglet__n{ background:rgba(255,255,255,.22); color:#fff; }
.evt-cache{ display:none !important; }

/* Menu d'actions ⋮ par événement + ligne cliquable (tableau de bord orga). */
.spec-ligne--clic{ cursor:pointer; }
.spec-menu{ position:relative; flex:0 0 auto; }
.spec-menu__btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; border:1px solid var(--violet-pale); background:var(--carte); color:var(--encre-douce); cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.spec-menu__btn:hover{ background:var(--violet-pale); color:var(--violet); }
.spec-menu.ouvert .spec-menu__btn{ background:var(--violet); color:#fff; border-color:var(--violet); }
.spec-menu__liste{ position:absolute; top:calc(100% + 6px); right:0; z-index:30; min-width:236px; background:var(--carte); border:1px solid var(--violet-pale); border-radius:12px; box-shadow:0 14px 34px rgba(42,33,56,.20); padding:6px; }
.spec-menu__liste[hidden]{ display:none; }
.spec-menu__liste form{ margin:0; }
.spec-menu__liste a, .spec-menu__liste button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; font-family:inherit; font-size:.9rem; font-weight:600; color:var(--encre); background:none; border:0; border-radius:8px; padding:9px 12px; cursor:pointer; text-decoration:none; }
.spec-menu__liste a:hover, .spec-menu__liste button:hover{ background:var(--violet-pale); color:var(--violet); }
.spec-menu__suppr{ color:#B23A34; }
.spec-menu__suppr:hover{ background:#f8e2e1; color:#8f2b26; }

/* ===== Page événement (dashboard) : hero pleine largeur ===== */
.dash-tete{ gap:24px; align-items:stretch; margin-bottom:22px; }
.dash-tete__affiche{ flex:0 0 150px; width:150px; align-self:flex-start; }
.dash-tete__affiche--vide{ flex:0 0 130px; width:130px; min-height:118px; }
.dash-tete__infos{ display:flex; flex-direction:column; flex:1; min-width:0; }
.dash-tete__haut{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.dash-tete__haut .statut{ margin-bottom:8px; }
.dash-tete__haut h1{ margin:0; font-size:24px; line-height:1.15; }
.dash-tete__meta{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; }
.dash-tete__meta li{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--encre-douce); font-weight:600; }
.dash-tete__meta li svg{ width:16px; height:16px; color:var(--violet); flex:0 0 auto; }
/* Chacun de ces trois faits mène désormais à la rubrique qui le règle. Le lien
   garde le ton discret de la ligne : c'est au survol qu'il s'annonce, pour ne
   pas transformer un bandeau d'identité en rangée de liens fuchsia. */
.dash-tete__meta li a{ color:inherit; text-decoration:none; border-bottom:1px dashed var(--bordure); }
.dash-tete__meta li a:hover, .dash-tete__meta li a:focus-visible{ color:var(--violet-fonce); border-bottom-color:currentColor; }
.dash-tete__actions{ margin-top:auto; padding-top:16px; }
@media (max-width:560px){ .dash-tete{ flex-direction:column; } .dash-tete__affiche{ width:140px; flex-basis:140px; } }

/* Jauge de remplissage (séance) — SVG, compatible CSP */
.cg-jauge__svg{ display:block; width:120px; max-width:100%; height:7px; }

/* Suivi des ventes — histogramme SVG, compatible CSP */
.sp-graphe2{ padding:12px 14px; background:var(--carte); border-radius:var(--rayon-petit, 12px); box-shadow:var(--ombre-douce); overflow-x:auto; }
.sp-graphe2__svg{ display:block; min-width:100%; height:128px; }
.sp-graphe2__barre{ fill:var(--violet); }
.sp-graphe2__lbl{ fill:var(--encre-douce); font-size: 12px; font-family:inherit; }

/* ===== Centre d'alertes (fiche événement) ===== */
.etat-alertes{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.etat-alerte{ display:flex; align-items:center; gap:13px; padding:13px 16px; border-radius:var(--rayon-petit, 12px); border:1px solid transparent; }
.etat-alerte__ico{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.6); }
.etat-alerte__ico svg{ width:19px; height:19px; }
.etat-alerte__txt{ flex:1 1 auto; min-width:0; }
.etat-alerte__t{ font-weight:800; font-size:14.5px; line-height:1.2; }
.etat-alerte__s{ font-size:13px; margin-top:2px; opacity:.9; }
.etat-alerte form{ margin:0; flex:0 0 auto; }
.etat-alerte .btn{ flex:0 0 auto; white-space:nowrap; }
.etat-alerte--rouge{ background:#FDEBE6; border-color:#f0c4c4; color:#8f2b26; }
.etat-alerte--rouge .etat-alerte__ico{ color:#B23A34; }
.etat-alerte--ambre{ background:#FBEECF; border-color:#f2ddb0; color:#7a5a12; }
.etat-alerte--ambre .etat-alerte__ico{ color:#8A5A00; }
.etat-alerte--info{ background:var(--violet-pale); border-color:#ddd3ea; color:var(--violet); }
.etat-alerte--info .etat-alerte__ico{ color:var(--violet); }
/* Rappel du placement numéroté sur l'écran Séances : posé juste au-dessus du
   formulaire d'ajout, où le choix se fait. */
.seances-plan-rappel { margin: 20px 0 12px; }
@media (max-width:560px){ .etat-alerte{ flex-wrap:wrap; } .etat-alerte .btn, .etat-alerte form{ margin-left:47px; } }

/* ===== Chiffres clés =====================================================
   Trois niveaux de lecture au lieu de quatre tuiles interchangeables :
   les deux chiffres qui décident (places vendues, recettes) sont mis en
   avant, la jauge de remplissage a sa propre forme, et les chiffres
   d'appoint s'effacent. */
.dash-chiffres{ margin-bottom:32px; }
.dash-tuiles--cles{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; }
.dash-tuiles--appoint{ grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; margin-top:14px; }

/* Chiffre majeur : carte pleine, filet coloré, valeur en grand. */
.dash-tuile--cle{ position:relative; padding:18px 18px 16px; overflow:hidden; }
.dash-tuile--cle::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg, var(--action) 0%, var(--corail) 100%);
}
.dash-tuile--cle .dash-tuile__v{ font-size:clamp(28px, 3.4vw, 38px); color:var(--encre); }
.dash-tuile--cle .dash-tuile__l{ font-size:14px; }

/* Chiffre d'appoint : pas de carte, juste une information posée. */
.dash-tuile--appoint{
  background:transparent; box-shadow:none; border:1px solid var(--action-pale);
  padding:12px 14px;
}
.dash-tuile--appoint .dash-tuile__v{ font-size:22px; font-weight:700; color:var(--encre-douce); }
.dash-tuile--appoint .dash-tuile__l{ font-size:12.5px; font-weight:600; color:var(--encre); }

/* Jauge de remplissage : la barre et le mot disent la même chose que la
   couleur, pour que le chiffre reste lisible sans elle. */
.dash-tuile--jauge{ padding:18px 18px 16px; }
.dash-jauge{
  display:block; height:8px; margin:10px 0 8px; border-radius:999px;
  background:var(--action-pale); overflow:hidden;
}
.dash-jauge__part{ display:block; height:100%; width:var(--part, 0%); border-radius:999px; }
.dash-jauge__part--depart  { background:var(--encre-douce); }
.dash-jauge__part--route   { background:var(--corail); }
.dash-jauge__part--bien    { background:var(--succes); }
.dash-jauge__part--presque { background:var(--action); }
.dash-jauge__part--complet { background:linear-gradient(90deg, var(--action) 0%, var(--action-neon) 100%); }
.dash-tuile__mot{ display:block; font-size:12.5px; font-weight:700; }
.dash-tuile__mot--depart  { color:var(--encre-douce); }
.dash-tuile__mot--route   { color:var(--encre); }
.dash-tuile__mot--bien    { color:var(--succes); }
.dash-tuile__mot--presque,
.dash-tuile__mot--complet { color:var(--action-fonce); }

/* Compteur dans un titre de carte */
.dash-carte__compte{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; margin-left:4px; border-radius:999px; background:var(--violet-pale); color:var(--violet); font-size:12px; font-weight:800; vertical-align:middle; }

/* ===== Cartes de séances (pleine largeur, horizontales) ===== */
.seances-rows{ display:flex; flex-direction:column; gap:10px; }
.seance-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:14px 16px; border:1px solid var(--violet-pale); border-radius:var(--rayon-petit, 12px); background:var(--carte); }
.seance-row__date{ display:flex; align-items:center; gap:10px; flex:0 0 auto; min-width:132px; }
.seance-row__jour{ display:block; font-family:var(--font-titres); font-weight:800; font-size:15px; line-height:1.15; text-transform:capitalize; }
.seance-row__heure{ display:block; font-size:13px; color:var(--encre-douce); font-weight:600; margin-top:1px; }
.seance-row__infos{ flex:1 1 170px; min-width:150px; display:flex; flex-direction:column; gap:3px; }
.seance-row__lieu{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--encre); }
.seance-row__lieu svg{ width:15px; height:15px; color:var(--violet); flex:0 0 auto; }
.seance-row__tarifs{ font-size:12.5px; color:var(--encre-douce); }
.seance-row__chiffres{ display:flex; gap:22px; flex:0 0 auto; }
.seance-row__stat{ display:flex; flex-direction:column; }
.seance-row__n{ font-family:var(--font-titres); font-weight:800; font-size:18px; line-height:1; color:var(--encre); }
.seance-row__n.or{ color:var(--or-fonce, #9a7b1f); }
.seance-row__sur{ font-size:12px; font-weight:600; color:var(--encre-douce); margin-left:3px; }
.seance-row__u{ font-size: 12px; text-transform:uppercase; letter-spacing:.03em; color:var(--encre-douce); margin-top:3px; }
.seance-row__jauge{ flex:0 0 140px; }
.seance-row__jauge-tete{ display:flex; align-items:baseline; gap:6px; margin-bottom:5px; }
.seance-row__jauge-tete strong{ font-size:15px; font-weight:800; }
.seance-row__jauge-tete span{ font-size:12px; color:var(--encre-douce); }
.seance-row__jauge svg{ display:block; width:140px; max-width:100%; height:7px; }
.seance-row__jauge-vide{ font-size:12px; color:var(--encre-douce); font-style:italic; }
.seance-row__actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.seance-row__actions .btn{ display:inline-flex; align-items:center; gap:6px; }
.seance-row__actions .btn svg{ width:14px; height:14px; }
@media (max-width:720px){ .seance-row__jauge{ flex-basis:120px; } .seance-row__actions{ margin-left:0; } }

/* ===== Page Tarifs (niveau spectacle) ===== */
.tarifs-tete{ align-items:flex-start; }
.tarifs-tete h1{ margin:0; }
.tarifs-synthese{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin:16px 0 22px; }
.tarifs-synth{ display:flex; align-items:center; gap:14px; background:var(--carte); border-radius:var(--rayon); box-shadow:var(--ombre-douce); padding:16px 18px; }
.tarifs-synth__ico{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px; background:var(--violet-pale); color:var(--violet); }
.tarifs-synth__ico svg{ width:21px; height:21px; }
.tarifs-synth__l{ font-size:12.5px; color:var(--encre-douce); font-weight:600; }
.tarifs-synth__v{ font-family:var(--font-titres); font-weight:800; font-size:22px; line-height:1.1; color:var(--encre); margin-top:1px; }
.tarifs-synth__s{ font-size:12px; color:var(--encre-douce); margin-top:2px; }

/* Carte « Période de vente » éditable (details/summary, sans JS) */
.tarifs-synth--edit{ display:block; padding:0; }
.tarifs-synth--edit > summary{ display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer; list-style:none; border-radius:var(--rayon); }
.tarifs-synth--edit > summary::-webkit-details-marker{ display:none; }
.tarifs-synth--edit > summary:hover{ background:var(--violet-pale); }
.tarifs-synth__corps{ flex:1 1 auto; min-width:0; }
.tarifs-synth__chev{ flex:0 0 auto; color:var(--encre-douce); transition:transform .18s ease; }
.tarifs-synth--edit[open] > summary .tarifs-synth__chev{ transform:rotate(180deg); }
.tarifs-fenetre-form{ padding:2px 18px 18px; border-top:1px solid var(--violet-pale); margin-top:2px; }
.tarifs-fenetre-form__aide{ font-size:12.5px; color:var(--encre-douce); margin:12px 0 12px; }
.tarifs-fenetre-form__champs{ display:flex; flex-wrap:wrap; gap:14px; }
.tarifs-fenetre-form__champs label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:700; color:var(--encre); }
.tarifs-fenetre-form__champs input{ font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--violet-pale); border-radius:9px; background:var(--carte); }
.tarifs-fenetre-form__actions{ margin-top:14px; }
/* Fenêtre de vente : Date et Heure séparées, pour que le choix de l'heure soit
   explicite (et fiable sur tous les navigateurs). */
.fenetre-champ{ border:none; padding:0; margin:0 0 14px; }
.fenetre-champ legend{ font-size:12.5px; font-weight:700; color:var(--encre); padding:0; margin-bottom:8px; }
.fenetre-champ legend small{ font-weight:500; color:var(--encre-douce); }
.date-heure{ display:flex; gap:12px; flex-wrap:wrap; }
.date-heure label{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; color:var(--encre-douce); }
.date-heure input{ font-family:inherit; font-size:14px; font-weight:600; padding:8px 10px; border:1px solid var(--violet-pale); border-radius:9px; background:var(--carte); }
.date-heure input[type="time"]{ width:118px; }
/* Réglages avancés de la liste d'attente (activer pour tarifs, champs collectés…). */
.attente-champ{ border:none; padding:0; margin:14px 0 4px; }
.attente-champ legend{ font-size:12.5px; font-weight:700; color:var(--encre); padding:0; margin-bottom:8px; }
.attente-champ legend small{ font-weight:500; color:var(--encre-douce); }
.attente-check{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--encre); margin-bottom:7px; cursor:pointer; }
.attente-check input{ width:16px; height:16px; accent-color:var(--violet); flex:0 0 auto; }
.attente-select{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:700; color:var(--encre); margin-top:14px; }
.attente-select select{ font:inherit; font-weight:600; padding:8px 10px; border:1px solid var(--violet-pale); border-radius:9px; background:var(--carte); max-width:220px; }
.tarifs-capacite__switch{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--encre); cursor:pointer; margin-bottom:12px; }
.tarifs-capacite__switch input{ width:17px; height:17px; accent-color:var(--violet); cursor:pointer; }
.tarifs-capacite__hint{ font-weight:500; color:var(--encre-douce); font-size:12px; }
.alerte--attention{ background:#FBEECF; color:#7a5a12; }

/* Récap lecture seule + réglages par date */
.tarifs-recap-note{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--encre-douce); margin:-8px 0 20px; }
.tarifs-recap-note svg{ width:16px; height:16px; color:var(--violet); flex:0 0 auto; }

/* Réglages de la date en cartes à icône, modifiables sur place (une carte =
   un réglage = un bouton). La carte reprend le look de .tarifs-synth. */
.date-reglages{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin:14px 0 4px; align-items:start; }
.tarifs-groupe__resume{ list-style:none; margin:2px 0 14px; padding:10px 12px; display:flex; flex-wrap:wrap; gap:8px 20px; background:var(--fond); border-radius:10px; }
.tarifs-groupe__resume li{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--encre-douce); }
.tarifs-groupe__resume li strong{ color:var(--encre); }
.tarifs-groupe__resume svg{ width:15px; height:15px; color:var(--violet); flex:0 0 auto; }

.seance-reglages{ margin-top:6px; border-top:1px solid #FDF4FA; }
.seance-reglages > summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 2px 4px; cursor:pointer; list-style:none; font-weight:700; font-size:13.5px; color:var(--violet); }
.seance-reglages > summary::-webkit-details-marker{ display:none; }
.seance-reglages__t{ display:inline-flex; align-items:center; gap:8px; }
.seance-reglages__t svg{ width:16px; height:16px; }
.seance-reglages__chev{ color:var(--encre-douce); transition:transform .18s ease; }
.seance-reglages[open] > summary .seance-reglages__chev{ transform:rotate(180deg); }
.seance-reglages__grille{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin:10px 0 4px; }
.seance-reglages__bloc{ border:1px solid var(--violet-pale); border-radius:12px; padding:12px 14px; margin:0; }
.seance-reglages__bloc legend{ display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:13px; color:var(--encre); padding:0 6px; }
.seance-reglages__bloc legend svg{ width:15px; height:15px; color:var(--violet); }
.seance-reglages__aide{ font-size:12px; color:var(--encre-douce); margin:6px 0 10px; }
.seance-reglages__champ{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:700; color:var(--encre); margin-top:10px; }
.seance-reglages__champ input{ font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--violet-pale); border-radius:9px; background:var(--carte); }
.seance-reglages .tarifs-capacite__switch{ margin-bottom:0; }

.tarifs-groupe{ margin-bottom:16px; }
.tarifs-groupe__tete{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--violet-pale); }
.tarifs-groupe__date{ display:flex; align-items:center; gap:9px; font-family:var(--font-titres); font-weight:800; font-size:15px; text-transform:capitalize; }
.tarifs-groupe__lieu{ font-family:var(--font-texte); font-weight:600; font-size:13px; color:var(--encre-douce); text-transform:none; }

.tarifs-table{ width:100%; border-collapse:collapse; }
.tarifs-table thead th{ text-align:left; font-size: 12px; text-transform:uppercase; letter-spacing:.04em; color:var(--encre-douce); font-weight:700; padding:6px 10px; border-bottom:1px solid var(--violet-pale); }
.tarifs-table th.num, .tarifs-table td.num{ text-align:right; }
.tarifs-table th.tarifs-table__act, .tarifs-table td.tarifs-table__act{ text-align:right; white-space:nowrap; }
.tarifs-table tbody td{ padding:12px 10px; border-bottom:1px solid #FDF4FA; vertical-align:middle; }
/* LES TARIFS RANGÉS PAR PLATEFORME (Val, le 2026-09-10). L'intertitre porte la
   pastille du canal et un trait de sa couleur ; ses tarifs gardent un filet de
   la même couleur à gauche, pour qu'on sache à quel canal on est en faisant
   défiler. Les couleurs sont celles du suivi des ventes (.teinte-*). */
.tarifs-table tbody tr.tarifs-canal th{ text-align:left; padding:22px 10px 8px; border-bottom:2px solid var(--teinte); background:var(--carte); text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; color:var(--encre-douce); }
.tarifs-table tbody tr.tarifs-canal:first-child th{ padding-top:10px; }
.tarifs-canal .suivi-canal{ background:var(--teinte); color:var(--teinte-texte); font-size:13px; padding:3px 11px; margin-right:10px; }
.tarifs-canal .tarifs-canal__n{ font-weight:700; color:var(--encre); margin-right:8px; }
.tarifs-table tbody tr.tarifs-ligne[class*="teinte-"] > td:first-child{ box-shadow: inset 4px 0 0 var(--teinte); padding-left:18px; }
.tarifs-table tbody tr:last-child td{ border-bottom:0; }
.tarifs-nom{ font-weight:700; font-size:14.5px; color:var(--encre); text-decoration:none; }
.tarifs-nom:hover{ color:var(--violet); text-decoration:underline; }
.tarifs-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.tarifs-badge{ display:inline-flex; align-items:center; font-size: 12px; font-weight:700; padding:2px 8px;
  border-radius:999px; background:var(--fond); color:var(--encre-douce); }
.tarifs-badge--cat{ background:var(--violet-pale); color:var(--violet); }
.tarifs-badge--pass{ background:var(--action-pale); color:var(--action-fonce); }
/* LA PÉRIODE DE VENTE D'UN TARIF, dans la liste. Val, le 2026-09-08 : elle
   voulait « être sûre qu'on l'a faite ». D'où l'état écrit en gras : une date
   bien saisie mais déjà passée ressemble, sinon, à une période active. */
.tarifs-periode{ display:flex; align-items:center; gap:6px; margin-top:6px;
  font-size:12.5px; color:var(--encre-douce); }
.tarifs-periode svg{ width:14px; height:14px; flex:none; }
.tarifs-periode strong{ font-weight:700; }
.tarifs-periode--encours strong{ color:var(--succes); }
.tarifs-periode--attente strong{ color:var(--attention-texte); }
.tarifs-periode--fini strong{ color:var(--encre-douce); }
/* Canal de vente : une icône colorée (au lieu d'un badge texte). La couleur
   reprend la charte — vert = en ligne, fuchsia (couleur d'action) = par lien,
   ambre = guichet. Le libellé reste en infobulle + aria-label. */
.tarifs-vis{ display:inline-flex; align-items:center; }
.tarifs-vis svg{ width:18px; height:18px; }
.tarifs-vis--en_ligne{ color:var(--succes); }
.tarifs-vis--par_lien{ color:var(--action); }
.tarifs-vis--guichet{ color:var(--attention-texte); }
.tarifs-prix{ font-family:var(--font-titres); font-weight:800; font-size:15px; color:var(--encre); }
.tarifs-qte{ font-weight:700; font-size:14px; color:var(--encre); }
.tarifs-qte--epuise{ color:#B23A34; }
/* D'où vient le chiffre. Sur une date numérotée, le quota d'un tarif n'est pas
   saisi : c'est le nombre de sièges qu'on lui a posés sur le plan. Le dire
   évite de chercher où le modifier — ça se modifie sur le plan. */
.tarifs-qte__source{ display:block; margin-top:2px; font-size:12px; color:var(--encre-douce);
  font-weight:400; }

/* LE VERROU DU PLAN DE SALLE.
   Le bouton d'ouverture et le cadenas sur la même ligne : ce sont deux gestes
   sur le même objet, et les séparer ferait chercher le second. */
.pe-barre{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pe-verrou-form{ margin:0; }
.pe-verrou{ display:inline-flex; align-items:center; gap:7px; }
.pe-verrou svg{ width:16px; height:16px; }
.pe-verrou-note{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; }
.pe-verrou-note svg{ width:18px; height:18px; flex:0 0 auto; margin-top:1px; }
.tarifs-table__act .btn-action{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; border:1px solid var(--violet-pale); background:var(--carte); color:var(--encre-douce); cursor:pointer; margin-left:6px; }
.tarifs-table__act form{ display:inline; margin:0; }
.tarifs-table__act .btn-action:hover{ background:var(--violet-pale); color:var(--violet); }
.tarifs-table__act .btn-action svg{ width:16px; height:16px; }
.tarifs-table__act .btn-action--suppr:hover{ background:#f8e2e1; color:#B23A34; border-color:#f0c4c4; }

/* LE MENU « ⋯ » D'UN TARIF (Val, le 2026-09-10). Le bouton du tableau de bord,
   à la taille du crayon voisin. Sa liste FLOTTE (position fixe, placée par
   tarifs-menu.js) : le cadre du tableau défile et l'aurait coupée. */
.tarifs-table__act .spec-menu { display: inline-block; vertical-align: middle; margin-left: 6px; }
.tarifs-table__act .spec-menu__btn { width: 32px; height: 32px; border-radius: 8px; }
.tarifs-table__act .spec-menu__liste { text-align: left; white-space: normal; }
.spec-menu__liste--flottant { position: fixed; right: auto; z-index: 60; }
.spec-menu__inactif {
  display: block; padding: 9px 12px; max-width: 260px;
  font-size: .85rem; line-height: 1.35; color: var(--encre-douce);
}
/* Un tarif masqué reste à l'écran, en retrait, pour pouvoir être remis en
   vente ; son étiquette, elle, reste pleinement lisible. */
.tarifs-ligne--masque .tarifs-nom,
.tarifs-ligne--masque td.num { opacity: .55; }
.tarifs-badge--masque { background: var(--violet-pale); color: var(--encre); font-weight: 700; }

/* ---- Tunnel d'achat : fil des étapes -------------------------------------
   L'acheteur doit savoir où il en est et combien il reste à faire. */
.tunnel-etapes {
  list-style: none; display: flex; align-items: center; gap: 10px;
  margin: 24px 0 8px; padding: 0; flex-wrap: wrap;
}
.tunnel-etape { display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); font-weight: 600; color: var(--encre-douce); }
.tunnel-etape + .tunnel-etape::before {
  content: ''; width: 22px; height: 2px; background: var(--action-pale); margin-right: 2px;
}
.tunnel-etape__n {
  width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; background: var(--action-pale); color: var(--action-fonce);
}
.tunnel-etape--active { color: var(--encre); }
.tunnel-etape--active .tunnel-etape__n { background: var(--action); color: #fff; }
.tunnel-etape--faite .tunnel-etape__n { background: var(--succes); color: #fff; }
@media (max-width: 560px) {
  .tunnel-etape--a-venir .tunnel-etape__nom { display: none; }
  .tunnel-etape + .tunnel-etape::before { width: 14px; }
}

/* ---- Récapitulatif de commande : lisible sur téléphone -------------------
   Sous 700 px, le tableau de quatre colonnes devient une liste de blocs,
   chaque valeur étant précédée de son intitulé (attribut data-intitule). */
@media (max-width: 700px) {
  .tarifs--recap, .tarifs--recap tbody, .tarifs--recap tfoot,
  .tarifs--recap tr, .tarifs--recap td, .tarifs--recap th { display: block; width: auto; }
  .tarifs--recap thead { position: absolute; left: -9999px; }
  .tarifs--recap tbody tr {
    background: var(--carte); border-radius: var(--rayon-petit);
    box-shadow: var(--ombre-douce); padding: 12px 14px; margin: 0 0 10px;
  }
  .tarifs--recap tbody td { border: none; padding: 3px 0; }
  .tarifs--recap tbody td[data-intitule]::before {
    content: attr(data-intitule) " : ";
    font-size: var(--t-mention); font-weight: 700; color: var(--encre-douce);
  }
  .tarifs--recap tbody td[data-intitule="Séance"]::before { content: none; }
  .tarifs--recap tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px; }
  .tarifs--recap tfoot td, .tarifs--recap tfoot th { text-align: left; padding: 0; }
  .tarifs--recap tfoot tr:last-child { font-size: var(--t-sous); border-top: 1px dashed var(--action-pale); padding-top: 10px; }
}

/* Prix tout compris sur la fiche : le montant payé domine, les frais sont
   rappelés en dessous, jamais découverts au moment de payer. */
.tarif-prix { font-weight: 700; }
.tarif-frais { display: block; color: var(--encre-douce); font-size: var(--t-mention); margin-top: 2px; }


/* ---- Catalogue vide : un écran à part entière, pas une phrase grise ------ */
.vide-scene {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  text-align: center; padding: 48px 28px 44px; max-width: 560px; margin: 28px auto 40px;
}
.vide-scene__ticket { width: 76px; height: auto; opacity: .5; margin: 0 auto 18px; display: block; }
.vide-scene__titre { font-family: var(--font-affiche); font-weight: 400; font-size: var(--t-section); margin: 0 0 10px; }
.vide-scene__texte { color: var(--encre-douce); max-width: 46ch; margin: 0 auto; }
.vide-scene__actions { margin: 22px 0 0; }

/* ---- Compteur de places (fiche spectacle) --------------------------------
   Deux boutons de 44 px, la cible tactile recommandée, à la place d'un menu
   déroulant qui demandait deux gestes et n'avait pas de libellé. */
.qte { display: inline-flex; align-items: center; gap: 4px; }
.qte__btn {
  width: 44px; height: 44px; flex-shrink: 0; border: none; cursor: pointer;
  border-radius: 999px; background: var(--action-pale); color: var(--action-fonce);
  font-size: 20px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.qte__btn:hover:not(:disabled) { background: var(--action); color: #fff; }
.qte__btn:disabled { opacity: .4; cursor: default; }
.qte__val {
  width: 54px; height: 44px; text-align: center; border: var(--bordure-fine);
  border-radius: var(--rayon-petit); font-family: var(--font-texte);
  font-size: var(--t-sous); font-weight: 700; color: var(--encre); background: var(--carte);
  -moz-appearance: textfield;
}
.qte__val::-webkit-outer-spin-button, .qte__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Pied du formulaire de tarifs : total en direct et bouton inactif tant qu'aucune
   place n'est choisie, plutôt qu'un aller-retour serveur pour le dire. */
.form-tarifs__pied { margin-top: 8px; }
.form-tarifs__total { margin: 0 0 10px; font-size: var(--t-sous); }
.form-tarifs__somme { font-family: var(--font-titres); font-weight: 800; font-size: var(--t-prix); color: var(--action); font-variant-numeric: tabular-nums; }
.form-tarifs__aide { margin: 8px 0 0; font-size: var(--t-meta); color: var(--encre-douce); }
.btn[disabled] { background: var(--desactive-bg); color: var(--desactive-tx); box-shadow: none; cursor: default; transform: none; }

/* Tarifs de la fiche sur petit écran : trois colonnes serrées cassaient les
   libellés en trois lignes.
   Première tentative : nom et prix à gauche, compteur à droite, sur une seule
   rangée. Ça ne suffit pas. Mesuré à 375 px : le compteur prend 150 px, le prix
   75, il reste 90 px pour le nom — et « Tarif plein » se casse encore en
   « Tarif » / « plein ». Un compteur à trois cibles de 44 px ne se comprime
   pas : c'est lui qui commande.
   Donc deux rangées : le nom sur TOUTE la largeur, puis le prix à gauche et le
   compteur à droite, à portée de pouce. C'est le geste principal de la page, et
   la plupart des acheteurs arrivent d'un lien Instagram. */
@media (max-width: 560px) {
  .form-tarifs .tarifs, .form-tarifs .tarifs tbody { display: block; width: auto; }
  /* En-têtes de colonnes retirés de l'affichage sans perte pour les lecteurs
     d'écran : le prix porte son symbole et chaque bouton du compteur a déjà un
     libellé complet (« Ajouter une place, Tarif plein »). */
  .form-tarifs .tarifs thead { position: absolute; left: -9999px; }
  .form-tarifs .tarifs tbody tr {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; column-gap: 14px; row-gap: 8px;
    padding: 14px 0; border-bottom: 1px dashed var(--action-pale);
  }
  .form-tarifs .tarifs tbody tr:last-child { border-bottom: none; }
  .form-tarifs .tarifs tbody td { display: block; border: none; padding: 0; min-width: 0; }
  .form-tarifs .tarifs tbody td:first-child { grid-column: 1 / -1; }
  .form-tarifs .tarifs tbody td:last-child { justify-self: end; }
  /* Les dates incluses d'un pass tiennent déjà toute la largeur : elles la
     gardent dans la grille. */
  .form-tarifs .tarifs .tarif-pass-row td { grid-column: 1 / -1; }
  .tarif-frais { white-space: nowrap; }
}

/* ---- Écran de paiement : rappel de l'achat ------------------------------- */
.paiement-recap {
  display: flex; gap: 20px; align-items: flex-start; background: var(--carte);
  border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 20px 22px; margin: 0 0 24px;
}
.paiement-recap__affiche { width: 92px; height: auto; border-radius: var(--rayon-petit); box-shadow: var(--ombre-douce); flex-shrink: 0; }
.paiement-recap__infos { flex: 1 1 auto; min-width: 0; }
.paiement-recap__titre { font-family: var(--font-titres); font-weight: 800; font-size: var(--t-sous); margin: 0 0 4px; }
.paiement-recap__meta { color: var(--encre-douce); font-size: var(--t-meta); margin: 0 0 2px; }
.paiement-recap__places { color: var(--encre-douce); font-size: var(--t-meta); margin: 0 0 14px; }
.paiement-recap__montant {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 0; padding-top: 12px; border-top: 1px dashed var(--action-pale);
}
.paiement-recap__montant strong { font-family: var(--font-titres); font-weight: 800; font-size: var(--t-prix); color: var(--action); font-variant-numeric: tabular-nums; }
.paiement-recap__ref { margin: 6px 0 0; font-size: var(--t-mention); color: var(--encre-douce); }
@media (max-width: 560px) { .paiement-recap { gap: 14px; padding: 16px; } .paiement-recap__affiche { width: 68px; } }

/* Cibles tactiles du pied public : 17 px de haut, très en dessous des 44 px
   recommandés, alors qu'il porte le lien de secours « Retrouver mes billets ». */
.pied__liens { display: flex; flex-wrap: wrap; gap: 0 6px; }
.pied__liens a { margin-right: 0; padding: 11px 10px; display: inline-block; border-radius: var(--rayon-petit); }
.pied__liens a:hover { background: var(--action-pale); }
.pied__liens a.pied__lien-orga { margin-left: 8px; }

/* ---- Fil de progression avant la mise en vente ---------------------------
   Un brouillon ne dit pas ce qui lui manque : on l'affiche, avec un lien direct
   vers l'écran qui règle chaque point. */
.progression {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 16px 20px; margin: 0 0 14px;
}
.progression__titre { margin: 0 0 10px; font-weight: 700; font-size: var(--t-sous); }
.progression__liste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; }
.progression__etape { display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); font-weight: 600; }
.progression__puce {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.progression__etape--faite { color: var(--encre-douce); }
/* Une étape franchie reste un lien, mais garde son air de chose réglée : elle
   ne doit pas réclamer l'attention comme celles qui restent à faire. */
/* UNE ÉTAPE FRANCHIE RESTE UNE PORTE. Sans rien qui le montre, on la prend pour
   du texte mort et on cherche l'écran ailleurs — Val, le 2026-09-08, cliquant
   sur « Tarifs ». Un soulignement discret suffit à dire « ça se clique », sans
   crier plus fort que l'étape qui reste à faire. */
.progression__etape--faite a{ color:inherit; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; text-decoration-color:var(--violet-pale); }
.progression__etape--faite a:hover, .progression__etape--faite a:focus-visible{ color:var(--violet-fonce); text-decoration:underline; text-decoration-color:currentColor; }
.progression__etape--faite .progression__puce { background: var(--succes); color: #fff; }
.progression__etape--a-faire .progression__puce { background: var(--action-pale); }
.progression__etape--a-faire a { color: var(--action); font-weight: 700; }

/* Net à reverser, sous la recette du tableau de bord. */
.dash-tuile__net { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--action-pale); font-size: var(--t-meta); color: var(--encre-douce); }
.dash-tuile__net strong { color: var(--encre); font-variant-numeric: tabular-nums; }
.dash-tuile__net small { display: block; font-size: var(--t-mention); }

/* Lieu demandé au moment de créer la séance. */
.seance-lieu { background: var(--action-pale); border-radius: var(--rayon-petit); padding: 14px 16px; margin: 14px 0; }
.seance-lieu__titre { margin: 0 0 2px; font-weight: 700; }
.seance-lieu__aide { margin: 0 0 10px; font-size: var(--t-meta); color: var(--action-fonce); }
.seance-lieu__champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.seance-lieu__champs label { display: flex; flex-direction: column; gap: 5px; font-size: var(--t-meta); font-weight: 600; }
.seance-lieu__champs input { padding: 10px 12px; border: var(--bordure-fine); border-radius: var(--rayon-petit); font-family: var(--font-texte); font-size: var(--t-second); }

/* ---- Haut de page du catalogue ------------------------------------------ */
.hero__titre { font-family: var(--font-affiche); font-weight: 400; font-size: var(--t-affiche); line-height: 1.06; margin: 0 0 6px; }
.hero__meta { color: var(--encre-douce); margin: 0 0 18px; }
.hero__actions { margin: 0; }

/* Longueur de ligne : au delà de 72 signes, la lecture décroche. */
.page-legale p, .page-etroite__intro { max-width: 68ch; }

/* Code de réduction, replié sous les coordonnées. */
.code-reduc-repli { margin: 8px 0 18px; }
.code-reduc-repli > summary { cursor: pointer; font-weight: 700; color: var(--action); padding: 10px 0; list-style: none; }
.code-reduc-repli > summary::-webkit-details-marker { display: none; }
.code-reduc-repli > summary::before { content: '+ '; font-weight: 800; }
.code-reduc-repli[open] > summary::before { content: '− '; }
/* Une note d'une ligne sous un champ est un chuchotement, pas un encadré :
   sans fond, elle n'attire plus l'oeil plus que le champ qu'elle explique. */
.champ-aide--inline {
  display: block; margin-top: 4px;
  background: none; padding: 0; font-size: var(--t-mention);
}
/* Idem pour les notes du formulaire de commande. */
.form-coordonnees > .champ-aide { background: none; padding: 0; margin: 2px 0 14px; }

/* Bloc de simulation de paiement : il ne doit jamais ressembler à l'interface
   réelle, pour qu'on le repère immédiatement s'il apparaissait en production. */
.encart-technique { background: #F1EFEC; border: 2px dashed #B9B2A8; border-radius: var(--rayon); }
.encart-technique__tag {
  display: inline-block; background: #4A443C; color: #fff; font-size: var(--t-mention);
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.btn--technique { background: #4A443C; color: #fff; box-shadow: none; }
.btn--technique:hover { background: #2F2A24; color: #fff; }
.btn--technique-sec { background: #fff; color: #4A443C; box-shadow: inset 0 0 0 1.5px #B9B2A8; }

/* Perforation entre les billets listés sur la confirmation. */
.confirmation .tarifs tbody tr + tr td { border-top: 1px dashed var(--action-pale); }

/* ===== Confirmation : la contremarque ====================================
   Le moment où l'on vient de payer mérite mieux qu'un accusé de réception.
   L'en-tête prend la forme d'un billet détachable, sur le fond nuit de la
   marque, avec le spectacle et la date en grand : c'est ce qu'on regarde. */
.confirm-billet {
  display: flex; align-items: stretch; margin: 6px 0 26px;
  border-radius: var(--rayon); overflow: hidden;
  background: var(--nuit); color: #fff;
  box-shadow: 0 14px 38px rgba(30, 16, 48, .28);
}
.confirm-billet__corps { flex: 1; padding: 26px 28px; position: relative; }
/* Lueur de scène, discrète, dans le coin haut. */
.confirm-billet__corps::after {
  content: ""; position: absolute; top: -70px; right: -40px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,95,208,.30) 0%, rgba(255,95,208,0) 70%);
  pointer-events: none;
}
.confirm-billet__oeil {
  display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
  font-size: var(--t-meta); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ambre);
}
.confirm-billet__oeil svg { width: 16px; height: 16px; }
.confirmation .confirm-billet__titre {
  margin: 0; font-family: var(--font-affiche); font-weight: 400;
  font-size: clamp(26px, 4.2vw, 40px); line-height: 1.08; color: #fff;
}
.confirm-billet__quand { margin: 9px 0 0; font-size: var(--t-texte); color: #EBDDF6; }
.confirm-billet__places { margin: 3px 0 0; font-size: var(--t-second); color: #B9A5C9; }
/* Achat passé avec une carte d'abonné : pastille discrète sur la souche claire. */
.confirm-abo { display: inline-block; margin: 10px 0 0; font-size: 12.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; }

/* La souche, séparée par une vraie perforation. */
.confirm-billet__souche {
  flex: 0 0 190px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 22px 18px; text-align: center;
  background: var(--nuit-clair);
  border-left: 2px dashed rgba(255, 255, 255, .28);
}
.confirm-billet__ref {
  font-family: var(--font-titres); font-weight: 800; font-size: 15px;
  letter-spacing: .06em; color: #fff;
}
.confirm-billet__montant { font-size: var(--t-second); color: var(--action-neon); font-weight: 700; }
.confirm-billet__remise { font-size: var(--t-mention); color: #B9A5C9; }
@media (max-width: 620px) {
  .confirm-billet { flex-direction: column; }
  .confirm-billet__corps { padding: 22px 20px; }
  .confirm-billet__souche {
    flex: none; flex-direction: row; gap: 10px; padding: 14px 20px;
    border-left: 0; border-top: 2px dashed rgba(255, 255, 255, .28);
  }
}

/* --- Éditeur de formulaire d'achat (réglages du spectacle) --- */
.reg-sous-titre { font-size: var(--t-sous); margin: 4px 0 6px; }
.champ-colonnes { display: grid; gap: 22px; margin-top: 14px; }
@media (min-width: 760px) { .champ-colonnes { grid-template-columns: 1fr 1fr; } }
.champ-colonne { min-width: 0; }
.champ-liste { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.champ-item { border: 1px solid var(--violet-pale); border-radius: var(--rayon-petit); background: var(--carte); }
.champ-item--inactif { opacity: 0.6; }
.champ-edit > summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.champ-edit > summary::-webkit-details-marker { display: none; }
.champ-titre { flex: 1 1 auto; min-width: 0; }
.champ-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.champ-tag { font-size: 11px; font-weight: 700; color: var(--violet); background: var(--violet-pale); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.champ-tag--off { color: var(--desactive-tx); background: var(--desactive-bg); }
.champ-type { font-size: 12px; }
.champ-form { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--violet-pale); }
.champ-form > label { font-size: var(--t-second); font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
.champ-form label.case { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.champ-form textarea { font-family: inherit; font-size: var(--t-second); padding: 8px; border: 1px solid var(--violet-pale); border-radius: var(--rayon-petit); }
.champ-options--cache { display: none; }
.champ-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.champ-actions { display: inline-flex; gap: 12px; align-items: center; margin-left: auto; }
.lien-mini { background: none; border: none; cursor: pointer; color: var(--violet); font-weight: 600; font-size: 13px; font-family: inherit; padding: 0; }
.lien-mini:hover { text-decoration: underline; }
.champ-verrou { margin: 0; font-size: 12px; }
.champ-ajout { margin-top: 4px; }
.champ-ajout > summary { cursor: pointer; color: var(--violet); font-weight: 600; font-size: var(--t-second); }
.champ-ajout .champ-form { border-top: none; padding: 10px 0 0; }
.champ-vide { font-size: var(--t-second); margin: 0 0 12px; }

/* ====== Espace organisateur : écran « Apparence » (thème de la boutique) ====== */
.apparence-form .form-bloc { max-width: 620px; }
.app-nuancier { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.app-swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--carte);
  box-shadow: 0 0 0 1px var(--violet-pale); cursor: pointer; padding: 0; }
.app-swatch:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.app-swatch.actif { outline: 2px solid var(--encre); outline-offset: 2px; }
.app-swatch--defaut { width: auto; height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--carte); font-family: var(--font-texte); font-weight: 700; font-size: 13px;
  color: var(--encre-douce); }
.app-hex-label { display: block; font-weight: 600; margin-top: 14px; }
.app-hex-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.app-hex-row input[type="color"] { width: 44px; height: 44px; padding: 0; border: var(--bordure-fine);
  border-radius: 10px; background: var(--carte); cursor: pointer; }
.app-hex-row input[type="text"] { width: 170px; padding: 11px 12px; border: var(--bordure-fine);
  border-radius: var(--rayon-petit); background: var(--carte); font-family: var(--font-texte);
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.app-logo-actuel { display: flex; align-items: center; gap: 16px; margin: 6px 0 14px; padding: 12px 14px;
  background: var(--fond); border: var(--bordure-fine); border-radius: 10px; }
.app-logo-actuel img { height: 48px; max-width: 180px; object-fit: contain; }
.app-apercu { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 22px;
  background: var(--fond); border: var(--bordure-fine); border-radius: var(--rayon); }
.app-apercu__prix { font-family: var(--font-titres); font-weight: 800; font-size: 24px;
  font-variant-numeric: tabular-nums; color: var(--action); }

/* ====== Réglages : gestionnaire de galerie photos ====== */
.galerie-ajout { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 6px 0 18px;
  padding-bottom: 16px; border-bottom: 1px dashed var(--violet-pale); }
.galerie-ajout__champ { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; }
.galerie-vide { color: var(--encre-douce); font-size: 14px; margin: 10px 0; }
.galerie-gere { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.galerie-gere__item { display: flex; align-items: center; gap: 12px; padding: 8px; border: var(--bordure-fine);
  border-radius: var(--rayon-petit); background: var(--carte); }
.galerie-gere__vig { flex: 0 0 auto; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--fond); }

/* Aperçu du visuel de couverture dans la Boutique.
   Sans ces deux lignes, l'image s'affiche à sa taille NATURELLE — 1920 px de
   large dans une carte de 720 — et pousse toute la page de réglages hors de
   l'écran. Constaté en mesurant l'aperçu, pas en le regardant : la page était
   simplement devenue deux fois trop large. */
.bq-couv__apercu { margin: 4px 0 14px; }
/* L'aperçu montre EXACTEMENT ce que la page montrera : mêmes proportions, rien
   de rogné. Un aperçu qui recadre est pire que pas d'aperçu — il fait croire
   que le résultat est bon. */
.bq-couv__apercu img {
  display: block; width: 100%; max-width: 520px; height: auto;
  border-radius: var(--rayon-petit); border: var(--bordure-fine); background: var(--fond);
}
.bq-couv__retrait { margin-top: 10px; }
.galerie-gere__leg { flex: 1; min-width: 0; padding: 9px 11px; border: var(--bordure-fine);
  border-radius: var(--rayon-petit); background: var(--carte); font-family: var(--font-texte); font-size: 14px; }
.galerie-gere__actions { flex: 0 0 auto; display: flex; gap: 4px; }
.galerie-gere__btn { width: 32px; height: 32px; border: var(--bordure-fine); border-radius: 8px;
  background: var(--carte); color: var(--encre); font-size: 15px; cursor: pointer; line-height: 1; }
.galerie-gere__btn:hover:not(:disabled) { border-color: var(--framboise); color: var(--framboise); }
.galerie-gere__btn:disabled { opacity: .4; cursor: default; }
.galerie-gere__btn--suppr:hover { border-color: var(--erreur); color: var(--erreur); }

/* ============================================================================
   Assistant IA de l'espace organisateur (widget flottant, aide à l'utilisation)
   ============================================================================ */
.assistant { position: fixed; right: 20px; bottom: 20px; z-index: 900; }
.assistant__bulle {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--action); color: #fff; border: none; cursor: pointer;
  padding: 12px 18px; border-radius: 999px; box-shadow: var(--ombre-bouton);
  font-family: inherit; font-size: var(--t-second); font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease;
}
.assistant__bulle:hover { transform: translateY(-1px); box-shadow: var(--ombre-bouton-survol); }
.assistant__bulle svg { width: 20px; height: 20px; }
.assistant--ouvert .assistant__bulle { display: none; }

.assistant__panneau {
  position: absolute; right: 0; bottom: 0;
  width: 360px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 40px);
  background: var(--carte); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce), 0 18px 50px rgba(36,20,54,.22);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--action-pale);
}
/* L'attribut `hidden` doit l'emporter sur le `display:flex` ci-dessus (sinon le
   panneau reste ouvert en permanence). Sélecteur classe+attribut = plus
   spécifique, donc gagnant : le widget démarre replié, ouvert au clic. */
.assistant__panneau[hidden] { display: none; }
.assistant__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: var(--action); color: #fff;
}
.assistant__tete-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.assistant__avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.18); display: grid; place-items: center;
}
.assistant__avatar svg { width: 22px; height: 22px; }
.assistant__titre { margin: 0; font-weight: 800; font-size: var(--t-sous); }
.assistant__sous  { margin: 2px 0 0; font-size: var(--t-mention); opacity: .85; }
.assistant__fermer {
  background: rgba(255,255,255,.15); border: none; color: #fff; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
}
.assistant__fermer:hover { background: rgba(255,255,255,.28); }
.assistant__fermer svg { width: 18px; height: 18px; }

.assistant__fil {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: var(--fond);
}
.assistant__msg {
  max-width: 85%; padding: 10px 13px; border-radius: 14px; line-height: 1.45;
  font-size: var(--t-second); white-space: pre-wrap; word-wrap: break-word;
}
.assistant__msg--ia  { align-self: flex-start; background: var(--carte); color: var(--encre); border: 1px solid var(--action-pale); border-bottom-left-radius: 4px; }
.assistant__msg--moi { align-self: flex-end;  background: var(--action); color: #fff; border-bottom-right-radius: 4px; }
.assistant__msg--note { color: var(--encre-douce); font-style: italic; }
.assistant__msg--attente { color: var(--encre-douce); }
@keyframes assistant-clignote { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.assistant__msg--attente { animation: assistant-clignote 1s ease-in-out infinite; }

.assistant__saisie {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--action-pale); background: var(--carte);
}
.assistant__saisie input {
  flex: 1; border: 1px solid var(--action-pale); border-radius: 999px;
  padding: 10px 14px; font-family: inherit; font-size: var(--t-second); color: var(--encre);
  background: var(--fond);
}
.assistant__saisie input:focus { outline: 2px solid var(--action); outline-offset: 1px; }
.assistant__saisie button {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--action); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.assistant__saisie button:hover:not(:disabled) { background: var(--action-fonce); }
.assistant__saisie button:disabled { opacity: .5; cursor: default; }
.assistant__saisie button svg { width: 18px; height: 18px; }
.assistant__note { margin: 0; padding: 6px 12px 10px; font-size: var(--t-mention); color: var(--encre-douce); text-align: center; background: var(--carte); }

@media (max-width: 520px) {
  .assistant { right: 12px; bottom: 12px; }
  .assistant__panneau { height: calc(100vh - 24px); }
  .assistant__bulle-txt { display: none; }
  .assistant__bulle { padding: 14px; }
}

/* ============================================================================
   VITRINE (page d'accueil organisateurs) — direction « Néon de scène ».
   Bandes pleine largeur posées dans le conteneur du main via le décalage 50vw.
   ========================================================================== */
body:has(.vitrine-hero), body:has(.cat-hero) { overflow-x: clip; }
/* Le catalogue se donne plus de largeur que les pages de lecture : ce sont des
   affiches, pas du texte, et 1040 px n'en laissaient tenir que deux de front. */
body:has(.cat-hero) > main.conteneur { max-width: 1240px; }
/* Sur la vitrine, le pied vient se coller sous le bandeau final sombre. */
body:has(.vitrine-hero) .pied { margin-top: 0; border-top: none; }
.vitrine-bande { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* --- Hero nuit --- */
.vitrine-hero {
  position: relative; background: var(--nuit); color: #fff;
  padding: 72px 24px 76px; text-align: center; overflow: hidden;
  border-radius: 0 0 28px 28px;
}
.vitrine-hero::before {
  /* halo néon discret, décor uniquement (autorisé sur fond sombre) */
  content: ''; position: absolute; inset: auto -20% -60% -20%; height: 130%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,95,208,.22), transparent 60%);
  pointer-events: none;
}
.vitrine-hero__inner { position: relative; max-width: 720px; margin: 0 auto; }
.vitrine-hero__titre {
  font-family: var(--font-affiche); font-weight: 400; font-size: var(--t-affiche);
  line-height: 1.06; margin: 0 0 18px;
}
.vitrine-hero__sous { font-size: var(--t-texte); line-height: 1.6; color: rgba(255,255,255,.86); margin: 0 auto 26px; max-width: 600px; }
.vitrine-hero__sous strong { color: #fff; }
.vitrine-hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 0; }

.btn--grand { padding: 15px 30px; font-size: 17px; }
/* « Fantôme » sur fond sombre : pill sans bordure (règle DA), voile translucide. */
.btn--fantome {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff; border: none;
  border-radius: 999px; padding: 13px 26px; font-weight: 700; text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.btn--fantome:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }

/* --- Sections claires --- */
.vitrine-section { padding: 52px 0 8px; }
.vitrine-titre { font-size: var(--t-titre); font-weight: 800; text-align: center; margin: 0 0 6px; }
.vitrine-sous { text-align: center; color: var(--encre-douce); margin: 0 0 34px; }

/* --- Trois arguments --- */
.vitrine-args { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vitrine-arg {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 26px 24px; text-align: center;
}
.vitrine-arg__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--action-pale);
  color: var(--action-fonce); margin-bottom: 12px;
}
.vitrine-arg__ico svg { width: 22px; height: 22px; }
.vitrine-arg h2 { font-size: var(--t-sous); font-weight: 700; margin: 0 0 8px; }
.vitrine-arg p { font-size: var(--t-second); color: var(--encre-douce); margin: 0; line-height: 1.55; }

/* --- Fonctionnalités --- */
.vitrine-fonctions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; }
.vitrine-fonction {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 18px 20px;
}
.vitrine-fonction__ico {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; background: var(--action-pale); color: var(--action-fonce);
}
.vitrine-fonction__ico svg { width: 19px; height: 19px; }
/* Carte mise en avant : le budget de production, seule fonction qu'aucun
   concurrent ne propose. Un filet à la couleur d'accent suffit, sans badge
   ni promesse écrite qu'il faudrait pouvoir prouver. */
.vitrine-fonction--phare {
  border: 1.5px solid var(--action);
  box-shadow: 0 6px 20px rgba(196, 24, 143, .12);
}
.vitrine-fonction h3 { font-size: 16px; font-weight: 700; margin: 0 0 3px; }
.vitrine-fonction p { font-size: var(--t-second); color: var(--encre-douce); margin: 0; line-height: 1.5; }

/* --- Tarifs --- */
.vitrine-bande--pale { background: var(--action-pale); padding: 52px 24px 60px; margin-top: 52px; }
.vitrine-bande--pale .vitrine-sous { color: var(--encre-douce); }
.vitrine-tarifs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 860px; margin: 0 auto; }
.vitrine-tarif {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 30px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.vitrine-tarif h3 { font-size: var(--t-section); font-weight: 800; margin: 0; }
.vitrine-tarif__prix { margin: 0; font-variant-numeric: tabular-nums; }
.vitrine-tarif__prix strong { font-size: var(--t-chiffre); font-weight: 800; color: var(--action-fonce); }
.vitrine-tarif__prix span { display: block; font-size: var(--t-second); color: var(--encre-douce); margin-top: 2px; }
/* La précision qui n'est vraie que de la formule autonome : elle était en
   sous-titre des deux, où elle démentait la seconde. */
.vitrine-tarif__note { margin: 0; font-size: var(--t-second); color: var(--encre-douce); }
/* L'exemple chiffré, sous les deux formules : il vaut pour la commission en
   ligne, qui est la même des deux côtés. */
.vitrine-exemple {
  max-width: 620px; margin: 32px auto 0; padding: 20px 24px;
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  text-align: center;
}
.vitrine-exemple__titre { margin: 0 0 8px; font-weight: 700; }
.vitrine-exemple__ligne { margin: 0; font-variant-numeric: tabular-nums; }
.vitrine-exemple__note {
  margin: 10px 0 0; font-size: var(--t-second); color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}
.vitrine-tarif__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vitrine-tarif__liste li { display: flex; align-items: center; gap: 9px; font-size: var(--t-second); }
.vitrine-tarif__liste svg { width: 16px; height: 16px; color: var(--succes); flex-shrink: 0; }
/* « Compris ici, souvent en supplément ailleurs » : la vraie réponse à la
   comparaison de prix, en retrait typographique pour ne pas voler la vedette
   au tarif lui-même. */
.vitrine-tarif__ailleurs { border-top: 1px dashed var(--action-pale); padding-top: 14px; width: 100%; }
.vitrine-tarif__ailleurs-titre {
  margin: 0 0 8px; font-size: var(--t-mention); font-weight: 700;
  color: var(--encre); text-transform: none;
}
.vitrine-tarif__ailleurs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vitrine-tarif__ailleurs li {
  position: relative; padding-left: 14px;
  font-size: var(--t-mention); color: var(--encre-douce); line-height: 1.45;
}
.vitrine-tarif__ailleurs li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--action);
}
.vitrine-tarif__texte { font-size: var(--t-second); color: var(--encre-douce); line-height: 1.55; margin: 0; }
.vitrine-tarif .btn { margin-top: auto; }
.vitrine-tarif--nuit { background: var(--nuit); color: #fff; }
.vitrine-tarif--nuit .vitrine-tarif__prix strong { color: var(--action-neon); }
.vitrine-tarif--nuit .vitrine-tarif__prix span,
.vitrine-tarif--nuit .vitrine-tarif__texte { color: rgba(255,255,255,.78); }

/* --- Confiance --- */
.vitrine-confiance {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 26px;
  max-width: 860px; margin: 0 auto; padding: 6px 0 14px;
}
.vitrine-confiance p {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  font-size: var(--t-second); color: var(--encre-douce); line-height: 1.5;
}
.vitrine-confiance svg { width: 17px; height: 17px; color: var(--action-fonce); flex-shrink: 0; margin-top: 2px; }
/* La phrase entière dans UN seul enfant. Sans ce span, chaque balise de la
   ligne devenait une colonne du flex : « Paiement sécurisé par le », « Crédit
   Agricole » et la fin de la phrase s'affichaient côte à côte, en trois blocs. */
.vitrine-confiance p > span { min-width: 0; }

/* --- CTA final --- */
.vitrine-final {
  background: var(--nuit); color: #fff; text-align: center;
  padding: 60px 24px 66px; margin-top: 52px;
  border-radius: 28px 28px 0 0; position: relative; overflow: hidden;
}
.vitrine-final::before {
  content: ''; position: absolute; inset: -60% -20% auto -20%; height: 120%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,95,208,.18), transparent 60%);
  pointer-events: none;
}
.vitrine-final__inner { position: relative; }
.vitrine-final__titre {
  font-family: var(--font-affiche); font-weight: 400; font-size: var(--t-titre);
  line-height: 1.15; margin: 0 0 10px;
}
.vitrine-final__sous { color: rgba(255,255,255,.78); margin: 0 0 24px; }

/* --- Responsive --- */
@media (max-width: 860px) {
  .vitrine-args, .vitrine-tarifs, .vitrine-fonctions, .vitrine-confiance { grid-template-columns: 1fr; }
  .vitrine-hero { padding: 52px 20px 56px; }
}

/* --- Éditeur « Visuel du billet » (par événement) --- */
.bv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 1100px) { .bv-cols { grid-template-columns: 1fr; } .bv-apercu { max-width: 460px; } }
.bv-actions { margin-top: 8px; }
.bv-apercu { position: sticky; top: 20px; background: var(--carte); border: var(--bordure-fine);
  border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 18px 20px; }
.bv-apercu__titre { font-family: var(--font-titres); font-size: 1.05rem; margin: 0 0 10px; color: var(--encre); }
.bv-apercu__cadre { width: 100%; height: 620px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: #fff; }
.bv-couleur { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bv-couleur input[type="color"] { width: 48px; height: 40px; padding: 0; border: var(--bordure-fine);
  border-radius: var(--rayon-petit); background: #fff; cursor: pointer; }
.bv-couleur input[type="text"] { width: 110px; padding: 9px 11px; border: var(--bordure-fine);
  border-radius: var(--rayon-petit); font-family: var(--font-texte); font-size: .95rem; color: var(--encre);
  text-transform: uppercase; }
/* Section « Visuel du billet » sur la page Impression (sous les réglages matériel). */
.imp-visuel { margin-top: 32px; padding-top: 8px; }
.imp-visuel__choix { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.imp-visuel__choix .imp-champ { min-width: 260px; }
.imp-visuel__choix select { padding: 9px 11px; border: var(--bordure-fine); border-radius: var(--rayon-petit);
  font-family: var(--font-texte); font-size: .95rem; color: var(--encre); background: #fff; }

/* ---- Budget prévisionnel de production (par spectacle) ------------------ */
.budget-intro { max-width: 62ch; }

/* Panneau de pilotage : croise le budget saisi avec les ventes réelles. */
.budget-pilotage {
  background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon);
  padding: 20px 22px; margin: 18px 0 28px; box-shadow: var(--ombre-douce);
}
.budget-vide { margin: 0; color: var(--encre-douce); line-height: 1.5; }

/* Verdict : le résultat à ce jour, en grand, coloré selon le signe. */
.budget-pilotage__resultat { display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: var(--bordure-fine); }
.budget-pilotage__lib { font-size: .82rem; color: var(--encre-douce);
  text-transform: uppercase; letter-spacing: .04em; }
.budget-pilotage__val { font-family: var(--font-titres); font-size: 2.1rem; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.budget-pilotage__resultat.est-positif .budget-pilotage__val { color: var(--succes); }
.budget-pilotage__resultat.est-negatif .budget-pilotage__val { color: var(--encre); }
.budget-pilotage__detail { font-size: .88rem; color: var(--encre-douce); }

/* Métriques clés : recette, subventions, point mort, reste à vendre. */
.budget-metriques { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.budget-metrique { display: flex; flex-direction: column; gap: 3px; }
.budget-metrique__val { font-family: var(--font-titres); font-size: 1.4rem; color: var(--encre);
  font-variant-numeric: tabular-nums; }
.budget-metrique__lib { font-size: .82rem; color: var(--encre); font-weight: 600; }
.budget-metrique__lib small { display: block; font-weight: 400; color: var(--encre-douce);
  font-size: .78rem; margin-top: 1px; }

/* Résumé du budget sur l'Aperçu : les mêmes blocs, en trois métriques au lieu
   de quatre (les subventions sont dites dans la ligne « Recettes »). La carte
   porte déjà son fond et son ombre : rien à redécorer ici. */
.budget-metriques--trois { grid-template-columns: repeat(3, 1fr); }
.dash-budget .budget-pilotage__resultat { padding-bottom: 14px; margin-bottom: 14px; }
.dash-budget .budget-jauge { margin-bottom: 6px; }

/* Barre d'avancement vers le point mort (largeur inline autorisée par la CSP). */
.budget-jauge { height: 12px; border-radius: 999px; background: var(--desactive-bg, #efe9f5);
  overflow: hidden; margin: 18px 0 8px; }
.budget-jauge__barre { height: 100%; border-radius: 999px; background: var(--violet);
  transition: width .3s ease; min-width: 3px; }
.budget-jauge__barre.est-atteint { background: var(--succes); }
.budget-jauge__leg { margin: 0; font-size: .86rem; color: var(--encre-douce); }
.budget-jauge__leg strong { color: var(--encre); font-variant-numeric: tabular-nums; }
.budget-jauge__ok { color: var(--succes); font-weight: 700; }
.budget-alerte-txt { color: var(--attention-texte, #a04a00); font-weight: 600; }

/* Zone de saisie « Le budget » : regroupe billetterie nette + dépenses +
   subventions dans une carte encadrée (bien délimitée, séparée du dashboard). */
.budget-saisie { background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce); padding: 4px 20px 10px; margin-top: 8px; }
.budget-saisie__tete { padding: 14px 0 0; }
.budget-saisie__titre { font-family: var(--font-titres); font-size: 1.4rem; color: var(--encre); margin: 0; }
.budget-saisie__note { font-size: .9rem; color: var(--encre-douce); margin: 3px 0 0; }
/* Les blocs internes deviennent de simples lignes séparées par un filet. */
.budget-saisie .budget-section, .budget-saisie .budget-prelevements { background: none; box-shadow: none;
  border-radius: 0; border: none; border-top: var(--bordure-fine); margin: 0; padding: 0; }

/* Bloc « billetterie nette » : taux CNM + droits d'auteur, repliable. */
.budget-prelevements { background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon);
  padding: 4px 18px; margin: 8px 0 16px; box-shadow: var(--ombre-douce); }
.budget-prelevements__tete { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; cursor: pointer; padding: 16px 0; font-weight: 700; color: var(--encre);
  list-style: none; }
.budget-prelevements__tete::-webkit-details-marker { display: none; }
.budget-prelevements__tete::before { content: '▸'; margin-right: 8px; color: var(--encre-douce);
  transition: transform .15s ease; display: inline-block; }
.budget-prelevements[open] .budget-prelevements__tete::before { transform: rotate(90deg); }
.budget-prelevements__resume { font-weight: 400; color: var(--encre-douce); font-size: .9rem;
  font-variant-numeric: tabular-nums; }
.budget-prelevements__resume strong { color: var(--encre); }
/* LES TAUX PRÉLEVÉS SUR LA BILLETTERIE.
   C'était une rangée de deux champs côte à côte. Il y en a quatre depuis que
   les droits sont détaillés (CNM, SACD, SACEM, mise en scène), et chacun porte
   son explication : une rangée les aurait écrasés. Chaque taux prend donc sa
   ligne — l'intitulé et son explication à gauche, le pourcentage à droite —
   ce qui rend la colonne des chiffres lisible d'un coup d'œil. */
.budget-taux { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 16px;
  max-width: 620px; }
.budget-taux__champ { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: 16px; row-gap: 2px; padding: 10px 2px; font-size: .88rem;
  font-weight: 600; color: var(--encre); border-top: var(--bordure-fine); }
.budget-taux__champ:first-of-type { border-top: 0; }
.budget-taux__nom { grid-column: 1; }
.budget-taux__aide { grid-column: 1; font-weight: 400; font-size: .82rem;
  color: var(--encre-douce); line-height: 1.45; }
.budget-pourcent-champ { grid-column: 2; grid-row: 1 / span 2; display: inline-flex;
  align-items: center; align-self: center; }
/* Sur un téléphone, la colonne de gauche n'a plus la place : le pourcentage
   passe sous son intitulé plutôt que de tasser l'explication. */
@media (max-width: 560px) {
  .budget-taux__champ { grid-template-columns: 1fr; }
  .budget-pourcent-champ { grid-column: 1; grid-row: auto; margin-top: 6px; }
}
.budget-in--pourcent { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }

.budget-detail-net { list-style: none; margin: 0 0 12px; padding: 14px 0 4px;
  border-top: var(--bordure-fine); max-width: 380px; }
.budget-detail-net li { display: flex; justify-content: space-between; gap: 20px;
  font-size: .92rem; color: var(--encre-douce); padding: 3px 0; font-variant-numeric: tabular-nums; }
.budget-detail-net__total { font-weight: 700; color: var(--encre) !important; margin-top: 4px;
  padding-top: 8px !important; border-top: 1px dashed var(--bordure-fine, #e5ddef); }

.budget-h2 { font-family: var(--font-titres); font-size: 1.3rem; color: var(--encre);
  margin: 30px 0 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.budget-h2__total { font-size: 1.05rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }

/* Section repliable (Dépenses, Subventions) : titre + total, corps masqué. */
.budget-section { border-top: var(--bordure-fine); margin-top: 6px; }
.budget-section__tete { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; cursor: pointer; padding: 16px 2px; list-style: none; }
.budget-section__tete::-webkit-details-marker { display: none; }
.budget-section__titre { font-family: var(--font-titres); font-size: 1.3rem; color: var(--encre); }
.budget-section__titre::before { content: '▸'; margin-right: 10px; color: var(--encre-douce);
  font-family: var(--font-texte); transition: transform .15s ease; display: inline-block; }
.budget-section[open] .budget-section__titre::before { transform: rotate(90deg); }
.budget-section__total { font-family: var(--font-titres); font-size: 1.1rem; color: var(--encre-douce);
  font-variant-numeric: tabular-nums; }
.budget-section__corps { padding: 4px 0 8px; }

/* Une catégorie = une carte avec son sous-total et ses lignes. */
.budget-cat {
  background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon);
  padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--ombre-douce);
}
.budget-cat__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: var(--bordure-fine); }
.budget-cat__titre { font-family: var(--font-titres); font-size: 1.08rem; color: var(--encre); margin: 0; }
.budget-cat__aide { font-size: .82rem; color: var(--encre-douce); margin: 3px 0 0; }
.budget-cat__total { font-family: var(--font-titres); font-size: 1.15rem; color: var(--encre);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

.budget-lignes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.budget-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Une ligne éditable = un mini-formulaire aligné (intitulé + montant + bouton). */
.budget-ligne__edit, .budget-ajout { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; }
.budget-ajout { padding-top: 10px; border-top: 1px dashed var(--bordure-fine, #e5ddef); }
.budget-in { font-family: var(--font-texte); font-size: .95rem; color: var(--encre);
  border: var(--bordure-fine); border-radius: var(--rayon-petit); padding: 9px 11px; background: #fff; }
.budget-in--libelle { flex: 1 1 240px; min-width: 160px; }
.budget-in--montant { width: 100px; text-align: right; font-variant-numeric: tabular-nums; }
.budget-montant-champ { position: relative; display: inline-flex; align-items: center; }
.budget-euro { margin-left: 6px; color: var(--encre-douce); font-weight: 700; }

/* Boutons compacts, adaptés à une ligne de tableau. */
.budget-btn { padding: 9px 18px; font-size: 14px; }
.budget-suppr { padding: 9px 14px; font-size: 13px; background: transparent; color: var(--encre-douce);
  box-shadow: none; font-weight: 600; }
.budget-suppr:hover { color: var(--erreur); background: var(--attention-pale, #fdecec); }

/* Projection : cartes de scénarios de remplissage. */
.budget-scenarios { margin: 24px 0 6px; }
.budget-scenarios .budget-h2 { margin-bottom: 2px; }
.budget-scenarios__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.budget-scenario { background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon);
  padding: 14px 16px; box-shadow: var(--ombre-douce); display: flex; flex-direction: column; gap: 4px;
  border-top: 4px solid var(--encre-douce); }
.budget-scenario.est-positif { border-top-color: var(--succes); }
.budget-scenario.est-negatif { border-top-color: var(--attention, #d98a00); }
.budget-scenario.est-pointmort { border-top-color: var(--violet); background: var(--violet-pale, #faf2f9); }
.budget-scenario__nom { font-family: var(--font-titres); font-size: 1.02rem; color: var(--encre); }
.budget-scenario__taux { font-size: .82rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.budget-scenario__res { font-family: var(--font-titres); font-size: 1.5rem; font-variant-numeric: tabular-nums;
  margin-top: 2px; }
.budget-scenario.est-positif .budget-scenario__res { color: var(--succes); }
.budget-scenario.est-negatif .budget-scenario__res { color: var(--encre); }
.budget-scenario.est-pointmort .budget-scenario__res { color: var(--violet); }
.budget-scenario__net { font-size: .78rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }

/* Tableau du détail des ventes par séance (mode global). */
.budget-seances { width: 100%; border-collapse: collapse; font-size: .92rem; }
.budget-seances th, .budget-seances td { padding: 8px 6px; text-align: left;
  border-bottom: var(--bordure-fine); }
.budget-seances th { font-size: .78rem; color: var(--encre-douce); text-transform: uppercase;
  letter-spacing: .03em; font-weight: 700; }
.budget-seances .num { text-align: right; font-variant-numeric: tabular-nums; }
.budget-seances tbody td { color: var(--encre); }
.budget-seances tfoot td { font-weight: 700; color: var(--encre); border-bottom: none; padding-top: 10px; }

/* Écran de choix du mode (spectacle à plusieurs séances). */
.budget-choix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 18px 0 8px; }
.budget-choix__carte { background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon);
  padding: 20px 22px; box-shadow: var(--ombre-douce); display: flex; flex-direction: column; }
.budget-choix__titre { font-family: var(--font-titres); font-size: 1.25rem; color: var(--encre); margin: 0 0 8px; }
.budget-choix__desc { color: var(--encre); margin: 0 0 10px; line-height: 1.5; }
.budget-choix__pour { color: var(--encre-douce); font-size: .9rem; margin: 0 0 18px; }
.budget-choix__carte .btn { margin-top: auto; align-self: flex-start; }

/* Bandeau cumul (mode par séance) : le résultat de toute la production. */
.budget-cumul { background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon);
  padding: 14px 18px; margin: 16px 0 12px; box-shadow: var(--ombre-douce);
  border-left: 4px solid var(--violet); }
.budget-cumul.est-positif { border-left-color: var(--succes); }
.budget-cumul__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.budget-cumul__lib { font-size: .8rem; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .04em; }
.budget-cumul__res { font-family: var(--font-titres); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.budget-cumul.est-positif .budget-cumul__res { color: var(--succes); }
.budget-cumul.est-negatif .budget-cumul__res { color: var(--encre); }
.budget-cumul__detail { font-size: .86rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }

/* Onglets de séance (mode par séance). */
.budget-onglets { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.budget-onglet { display: flex; flex-direction: column; gap: 1px; text-decoration: none;
  padding: 9px 16px; border-radius: 999px; background: var(--carte); border: var(--bordure-fine);
  color: var(--encre); font-weight: 700; font-size: .95rem; }
.budget-onglet small { font-weight: 400; color: var(--encre-douce); font-size: .76rem; }
.budget-onglet.actif { background: var(--violet); border-color: var(--violet); color: #fff; }
.budget-onglet.actif small { color: rgba(255,255,255,.85); }
.budget-scope { margin: 0 0 16px; color: var(--encre-douce); font-size: .92rem; }
.budget-changer { margin-top: 22px; padding-top: 14px; border-top: var(--bordure-fine); }

@media (max-width: 720px) {
  .budget-metriques,
  .budget-metriques--trois { grid-template-columns: repeat(2, 1fr); }
  .budget-scenarios__grille { grid-template-columns: repeat(2, 1fr); }
  .budget-in--libelle { flex-basis: 100%; }
  .budget-choix { grid-template-columns: 1fr; }
}

/* ---- Statistiques globales : filtres + répartition --------------------- */
.stats-filtres { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 4px 0 22px; }
.stats-filtre { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; font-weight: 600; color: var(--encre); }
.stats-filtre select { font-family: var(--font-texte); font-size: .95rem; color: var(--encre);
  border: var(--bordure-fine); border-radius: var(--rayon-petit); padding: 9px 11px; background: #fff; min-width: 200px; }
.stats-h2 { font-family: var(--font-titres); font-size: 1.25rem; color: var(--encre); margin: 28px 0 10px; }
.stats-repartition { width: 100%; border-collapse: collapse; font-size: .95rem; }
.stats-repartition th, .stats-repartition td { padding: 10px 8px; text-align: left; border-bottom: var(--bordure-fine); }
.stats-repartition th { font-size: .78rem; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .03em; }
.stats-repartition .num { text-align: right; font-variant-numeric: tabular-nums; }
.stats-repartition tbody a { color: var(--violet); font-weight: 600; text-decoration: none; }
.stats-repartition tbody a:hover { text-decoration: underline; }
.stats-repartition tfoot td { font-weight: 700; color: var(--encre); border-bottom: none; padding-top: 12px; }

/* ---- Onboarding : page Bienvenue (première configuration) -------------- */
.onboarding-hero { max-width: 62ch; margin-bottom: 22px; }
.onboarding-titre { font-family: var(--font-titres); font-size: 2rem; color: var(--encre); margin: 4px 0 10px; }
.onboarding-intro { color: var(--encre); line-height: 1.55; font-size: 1.02rem; margin: 0; }
.onboarding-form { max-width: 720px; }
.onboarding-form .form-actions { display: flex; align-items: center; gap: 18px; }

/* ---- Aide TVA (fiche spectacle) + rappel TVA (tarifs) ------------------ */
.aide-tva { margin: 4px 0 2px; font-size: .9rem; }
.aide-tva > summary { cursor: pointer; color: var(--violet); font-weight: 600; list-style: none; padding: 4px 0; }
.aide-tva > summary::-webkit-details-marker { display: none; }
.aide-tva > summary::before { content: '▸'; margin-right: 7px; display: inline-block; transition: transform .15s ease; }
.aide-tva[open] > summary::before { transform: rotate(90deg); }
.aide-tva__liste { margin: 6px 0 8px; padding-left: 18px; color: var(--encre); line-height: 1.5; }
.aide-tva__liste li { margin-bottom: 8px; }
.aide-tva__ref { display: inline-block; margin-left: 4px; font-size: .8rem; color: var(--encre-douce); font-style: italic; }
.aide-tva__note { color: var(--encre-douce); margin: 0; }
.tarifs-tva { background: var(--framboise-pale, #fdeef7); border-radius: var(--rayon-petit); padding: 10px 14px; }

/* ---- Validation de la boutique (« Ma page est prête ») ----------------- */
.boutique-valider { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; background: var(--attention-pale, #fdf3e0); border: var(--bordure-fine);
  border-left: 4px solid var(--attention, #d98a00); border-radius: var(--rayon);
  padding: 14px 18px; margin-bottom: 18px; }
.boutique-valider.est-ok { background: #e7f6ee; border-left-color: var(--succes); }
.boutique-valider__txt { display: flex; flex-direction: column; gap: 2px; max-width: 62ch; }
.boutique-valider__txt strong { color: var(--encre); }
.boutique-valider.est-ok .boutique-valider__txt strong { color: var(--succes); }
.boutique-valider__s { font-size: .88rem; color: var(--encre-douce); line-height: 1.45; }
.boutique-valider__date { color: var(--encre-douce); font-weight: 400; }

/* ---- Éditeur visuel de la boutique (aperçu vivant + couleur) ----------- */
.bq-editeur { background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce); padding: 14px 16px 16px; margin-bottom: 22px; }
.bq-editeur__barre { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.bq-editeur__groupe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bq-editeur__lib { font-weight: 700; color: var(--encre); font-size: .95rem; }
.bq-palette { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bq-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--bordure-fine, #e5ddef); cursor: pointer; padding: 0; }
.bq-swatch.actif { box-shadow: 0 0 0 2px var(--encre); transform: scale(1.08); }
.bq-swatch--defaut { width: auto; height: 30px; border-radius: 999px; padding: 0 12px;
  background: #fff; color: var(--encre-douce); font-size: .82rem; font-weight: 600; }
.bq-swatch--perso { position: relative; overflow: hidden; background:
  conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.bq-swatch--perso input[type=color] { position: absolute; inset: -4px; width: 200%; height: 200%;
  opacity: 0; cursor: pointer; border: none; padding: 0; }
.bq-editeur__scene { border: var(--bordure-fine); border-radius: var(--rayon-petit);
  overflow: hidden; background: var(--fond); }
.bq-editeur__iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
.bq-editeur__note { font-size: .85rem; color: var(--encre-douce); margin: 10px 2px 0; }
@media (max-width: 720px) { .bq-editeur__iframe { height: 480px; } }

/* ---- Éditeur de page plein écran (barre d'outils + accès) -------------- */
.ped-barre { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff; border-bottom: 1px solid #e5ddef; padding: 10px 18px;
  box-shadow: 0 2px 12px rgba(30,16,48,.07); }
.ped-barre__centre { display: flex; align-items: center; gap: 14px; }
.ped-couleur { position: relative; display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-weight: 600; color: var(--encre); font-size: .92rem;
  border: 1px solid #e5ddef; border-radius: 999px; padding: 6px 14px; }
.ped-couleur__pastille { width: 20px; height: 20px; border-radius: 50%;
  box-shadow: 0 0 0 1px #e5ddef; display: inline-block; }
.ped-couleur input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: none; padding: 0; }
.ped-etat { font-size: .82rem; color: var(--encre-douce); min-width: 96px; }
.ped-barre__voir { font-size: .88rem; color: var(--violet); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ped-barre__voir:hover { text-decoration: underline; }

/* Accès à l'éditeur depuis la page Boutique. */
.bq-editer-cta { display: flex; align-items: center; gap: 16px; text-decoration: none;
  background: var(--carte); border: var(--bordure-fine); border-left: 4px solid var(--violet);
  border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 18px 20px; margin-bottom: 22px; }
.bq-editer-cta:hover { box-shadow: var(--ombre-carte-survol); transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .12s ease; }
.bq-editer-cta__ico { flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--violet); color: #fff; display: grid; place-items: center; font-size: 1.3rem; }
.bq-editer-cta__txt { display: flex; flex-direction: column; gap: 3px; }
.bq-editer-cta__txt strong { color: var(--encre); font-size: 1.05rem; }
.bq-editer-cta__txt small { color: var(--encre-douce); font-size: .88rem; }

/* ---- Éditeur de page : zones de texte éditables en place --------------- */
.ped-editable { outline: 2px dashed transparent; outline-offset: 4px; border-radius: 5px;
  cursor: text; transition: outline-color .12s ease, background .12s ease; }
.ped-editable:hover { outline-color: var(--action, #C4188F); background: rgba(196,24,143,.05); }
.ped-editable.ped-edit-actif { outline: 2px solid var(--action, #C4188F); background: #fff; }
.ped-editable:empty::before { content: attr(data-vide); color: var(--encre-douce, #8a7d99);
  font-style: italic; font-weight: 400; opacity: .85; }
/* La description peut désormais contenir des retours à la ligne. */
.fiche__desc { white-space: pre-line; }

/* ---- Éditeur de page : affiche cliquable + vidéo ----------------------- */
.ped-affiche { position: relative; }
.ped-affiche__btn { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; background: rgba(30,16,48,.88); color: #fff;
  border-radius: 999px; padding: 8px 16px; font-size: .84rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; box-shadow: 0 3px 10px rgba(30,16,48,.3); transition: background .12s ease; }
.ped-affiche__btn:hover { background: var(--action, #C4188F); }
.ped-video__edit { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.ped-video__edit input { flex: 1 1 320px; min-width: 220px; padding: 9px 12px;
  border: 1px solid #d9cfe4; border-radius: 8px; font-size: .95rem; color: var(--encre); background: #fff; }

/* ---- Éditeur de page : galerie photos éditable ------------------------- */
.ped-galerie__grille { list-style: none; margin: 0 0 14px; padding: 0;
  columns: 4 120px; column-gap: 12px; }
.ped-galerie__item { position: relative; break-inside: avoid; margin: 0 0 12px;
  border-radius: var(--rayon-petit); overflow: hidden; box-shadow: var(--ombre-douce); }
.ped-galerie__item img { width: 100%; height: auto; display: block; }
.ped-galerie__suppr { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  border-radius: 50%; border: none; background: rgba(30,16,48,.82); color: #fff; cursor: pointer;
  font-size: .8rem; line-height: 1; display: grid; place-items: center; }
.ped-galerie__suppr:hover { background: var(--erreur, #C92A2A); }
.ped-galerie__ajout { display: inline-block; cursor: pointer; }

/* ---- Éditeur de page : blocs réordonnables (glisser-déposer) ----------- */
.fiche__blocs { display: flex; flex-direction: column; }
.fiche__bloc { min-width: 0; }
.ped-bloc { position: relative; border: 2px dashed transparent; border-radius: var(--rayon);
  padding: 2px 8px; transition: border-color .12s ease, background .12s ease; }
.ped-bloc:hover { border-color: rgba(196,24,143,.22); }
.ped-bloc__grip { display: inline-flex; align-items: center; gap: 6px; cursor: grab; user-select: none;
  font-size: .78rem; font-weight: 700; color: var(--encre-douce, #8a7d99); background: #f3eef8;
  border-radius: 999px; padding: 4px 12px; margin: 6px 0 8px; }
.ped-bloc__grip:active { cursor: grabbing; }
.ped-bloc--drag { opacity: .45; }
.ped-bloc--survol { border-color: var(--action, #C4188F); background: rgba(196,24,143,.06); }

/* ---- Contact acheteur (Boutique) : notre version, réglée par événement ---- */
.contact-ach__opt { cursor: pointer; }
/* Les champs du contact propre à l'événement n'apparaissent que si l'option
   « Un contact propre à cet événement » est cochée (révélation en CSS pur). */
.contact-ach__champs { display: none; gap: 12px; margin: 6px 0 4px;
  padding: 16px; background: var(--fond); border-radius: var(--rayon); }
.contact-ach:has(input[value="perso"]:checked) .contact-ach__champs { display: grid; }
.contact-ach__champ { display: grid; gap: 6px; }
.contact-ach__l { font-weight: 600; font-size: 14px; color: var(--encre); }
.contact-ach__fac { font-weight: 400; color: var(--encre-douce); }
.contact-ach__champ input { padding: 10px 12px; border: var(--bordure-fine);
  border-radius: var(--rayon-petit); font-family: var(--font-texte); font-size: var(--t-second); }
.contact-ach__apercu { margin: 8px 0 4px; }
.contact-ach__apercu-titre { display: block; font-size: 13px; color: var(--encre-douce); margin-bottom: 6px; }
.contact-ach__carte { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 0; padding: 14px 16px; background: var(--carte); border: var(--bordure-fine);
  border-left: 3px solid var(--action); border-radius: var(--rayon); }
.contact-ach__q { font-weight: 700; color: var(--action); }
.contact-ach__nom { font-weight: 700; color: var(--encre); }
.contact-ach__val { color: var(--encre); }
.contact-ach__carte--vide { color: var(--encre-douce); border-left-color: var(--bordure); }

/* ---- « Une question ? » : contact acheteur sur la page publique ---------- */
.fiche__contact {
  margin: 16px 0 0; padding: 16px 18px; background: var(--carte);
  border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  border-left: 3px solid var(--action);
  display: flex; flex-direction: column; gap: 3px;
}
.fiche__contact-titre { font-weight: 700; color: var(--action); }
.fiche__contact-nom { font-weight: 700; color: var(--encre); }
.fiche__contact-lien { color: var(--encre); text-decoration: none; word-break: break-word; }
.fiche__contact-lien:hover { text-decoration: underline; }

/* ---- Pied de fiche : réassurance + contact, en bas et pleine largeur ------ */
.fiche__pied { margin: 36px 0 8px; display: grid; gap: 16px; }
.fiche__pied .reassurance { margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; }
.fiche__pied .fiche__contact { margin: 0;
  flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }

/* ============================================================================
   Abonnement composé (pass saison) — page publique de composition
   ========================================================================== */
.abo { max-width: 760px; margin: 0 auto; padding: 8px 16px 140px; }
.abo__retour { display: inline-block; margin: 8px 0 16px; color: var(--encre-douce); font-size: var(--t-second); }
.abo__eyebrow { display: inline-block; font-size: var(--t-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--action); font-weight: 700; margin-bottom: 8px; }
.abo__tete h1 { margin: 0 0 10px; }
.abo__desc { color: var(--encre-douce); margin: 0 0 12px; }
.abo__regle { background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon-petit); padding: 12px 16px; margin: 0 0 20px; }
.abo__vide { background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon); padding: 24px; text-align: center; color: var(--encre-douce); }
.abo__liste { display: flex; flex-direction: column; gap: 14px; }
.abo-carte { display: flex; gap: 16px; background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon); padding: 14px; box-shadow: var(--ombre-douce); }
.abo-carte__affiche { width: 84px; height: 118px; object-fit: cover; border-radius: var(--rayon-petit); flex: 0 0 auto; }
.abo-carte__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.abo-carte__titre { margin: 0; font-size: var(--t-sous); }
.abo-carte__label { display: block; font-weight: 600; font-size: var(--t-second); }
.abo-select { display: block; width: 100%; margin-top: 6px; font-family: var(--font-texte); font-size: var(--t-texte); padding: 11px 14px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); }
.abo-select:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(196,24,143,.15); }
/* Pied collant : total + bouton, toujours sous le pouce sur téléphone. */
.abo-pied { position: sticky; bottom: 0; margin-top: 20px; background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon); padding: 14px 16px; box-shadow: var(--ombre-douce); }
.abo-pied__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.abo-pied__ligne strong { font-size: var(--t-prix); color: var(--action); font-variant-numeric: tabular-nums; }
.abo-pied .btn { width: 100%; }
.abo-pied__aide { margin: 10px 0 0; text-align: center; color: var(--encre-douce); font-size: var(--t-second); }

/* Encart « fait partie d'un abonnement » sur la fiche spectacle. */
.resa-abo { display: block; margin: 0 0 16px; padding: 14px 16px; border: 1.5px solid var(--action); border-radius: var(--rayon-petit); background: rgba(196,24,143,.06); text-decoration: none; color: var(--encre); transition: box-shadow .15s ease, transform .15s ease; }
.resa-abo:hover { box-shadow: var(--ombre-carte-survol); transform: translateY(-1px); }
.resa-abo__tag { display: inline-block; font-size: var(--t-mention); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--action); margin-bottom: 6px; }
.resa-abo__txt { display: block; font-size: var(--t-second); line-height: 1.45; }
.resa-abo__go { display: block; margin-top: 8px; font-weight: 700; color: var(--action); font-size: var(--t-second); }

/* Widget « J'ai une carte d'abonné » sur la fiche spectacle. */
.carte-abo { margin: 0 0 16px; }
.carte-abo > summary { cursor: pointer; font-weight: 600; font-size: var(--t-second); color: var(--action); list-style: none; padding: 6px 0; }
.carte-abo > summary::-webkit-details-marker { display: none; }
.carte-abo > summary::before { content: '＋'; margin-right: 6px; font-weight: 700; }
.carte-abo[open] > summary::before { content: '－'; }
.carte-abo__form { display: flex; gap: 8px; margin-top: 8px; }
.carte-abo__form input { flex: 1; min-width: 0; font-family: var(--font-texte); font-size: var(--t-texte); padding: 10px 14px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); text-transform: uppercase; }
.carte-abo__form input:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(196,24,143,.15); }
.carte-abo__err { margin: 8px 0 0; color: var(--framboise, #c0392b); font-size: var(--t-second); }

/* Adhésion en ligne : spectacles couverts, formulaire, numéro de carte. */
.abo-couvre { margin: 0 0 20px; }
.abo-couvre__titre { font-size: var(--t-sous); margin: 0 0 10px; }
.abo-couvre__liste { margin: 0; padding-left: 20px; color: var(--encre-douce); display: flex; flex-direction: column; gap: 4px; }
.abo-couvre__liste--liens { list-style: none; padding-left: 0; }
.abo-couvre__liste--liens a { color: var(--action); font-weight: 600; text-decoration: none; }
.abo-form { background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon); padding: 20px; box-shadow: var(--ombre-douce); }
.abo-form__titre { font-size: var(--t-sous); margin: 0 0 14px; }
.abo-form__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 520px){ .abo-form__grille { grid-template-columns: 1fr; } }
.abo-form label { display: block; font-weight: 600; font-size: var(--t-second); margin-bottom: 12px; }
.abo-form input { display: block; width: 100%; margin-top: 6px; font-family: var(--font-texte); font-size: var(--t-texte); padding: 11px 14px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); }
.abo-form input:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(196,24,143,.15); }
.abo-form__large { display: block; }
.abo-form__btn { width: 100%; margin-top: 6px; }
.abo-form__note { margin: 10px 0 0; text-align: center; color: var(--encre-douce); font-size: var(--t-second); }
.carte-num { text-align: center; background: var(--action); color: #fff; border-radius: var(--rayon); padding: 22px; margin: 0 0 20px; }
.carte-num__lib { display: block; font-size: var(--t-meta); letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 8px; }
.carte-num__code { font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* Coordonnées verrouillées d'un achat avec carte d'abonné (tunnel). */
.coord-carte { background: rgba(196,24,143,.06); border: 1.5px solid var(--action); border-radius: var(--rayon-petit); padding: 14px 16px; margin-bottom: 16px; }
.coord-carte__lib { margin: 0 0 6px; font-weight: 600; font-size: var(--t-second); color: var(--action); }
.coord-carte__val { margin: 0; line-height: 1.5; }

/* ============================================================================
   Carte d'abonné (modèle « épuré clair »), personnalisable — partial carte-abonne
   ========================================================================== */
.carteab { position: relative; width: min(360px, 100%); aspect-ratio: 1.585; border-radius: 16px;
  overflow: hidden; display: flex; background: var(--cab-fond, #fff); color: var(--cab-encre, #241436);
  border: 1px solid rgba(36,20,54,.10); box-shadow: 0 10px 28px -14px rgba(36,20,54,.40); }
.carteab__bande { width: 40px; flex: none; background: var(--cab-accent, #C4188F); }
.carteab__corps { flex: 1; min-width: 0; padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; }
.carteab__haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.carteab__ident { min-width: 0; }
.carteab__marque { font-family: var(--font-affiche); font-weight: 400; font-size: 1.15rem; line-height: 1.1; }
.carteab__label { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cab-douce, rgba(36,20,54,.62)); font-weight: 600; margin-top: 5px; }
.carteab__qr { width: 58px; height: 58px; border-radius: 10px; background: #fff; border: 1px solid rgba(36,20,54,.12); padding: 5px; flex: none; }
.carteab__qr img { display: block; width: 100%; height: 100%; }
.carteab__qrph { display: block; width: 100%; height: 100%; border-radius: 3px; background: repeating-conic-gradient(var(--cab-encre, #241436) 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.carteab__nom { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carteab__num { font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; font-size: 1.1rem; letter-spacing: .12em; margin-top: 7px; color: var(--cab-accent, #C4188F); }

.carteab-scene { display: flex; justify-content: center; margin: 0 0 22px; }

/* Configurateur d'apparence de la carte (éditeur de formule). */
.carteab-config { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; align-items: start; margin-top: 4px; }
@media (max-width: 700px){ .carteab-config { grid-template-columns: 1fr; } }
.carteab-config__reglages { display: flex; flex-direction: column; gap: 14px; }
.champ-couleur { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 14px; }
.champ-couleur input[type="color"] { width: 52px; height: 34px; padding: 2px; border: var(--bordure-fine); border-radius: var(--rayon-petit); background: var(--carte); cursor: pointer; }
.carteab-config__apercu { display: flex; flex-direction: column; gap: 8px; align-items: center; }

.carteab__logo { max-height: 30px; max-width: 150px; object-fit: contain; display: block; }

.carte-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.carte-actions .btn { flex: 0 1 auto; }

/* ===========================================================================
   MODE D'EMPLOI (espace organisateur)
   Une page d'aide se lit, elle ne se pilote pas : colonne étroite, interlignage
   généreux, et des encarts qui se distinguent d'un coup d'œil du corps du texte.
   =========================================================================== */
.aide-cartes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.aide-carte {
  display: flex; gap: 14px; align-items: flex-start; text-decoration: none;
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 18px 20px; color: var(--encre); border: 1.5px solid transparent;
  transition: border-color .12s ease, transform .12s ease;
}
.aide-carte:hover { border-color: var(--action); transform: translateY(-1px); }
.aide-carte--phare { border-color: var(--action-pale); background: linear-gradient(180deg, var(--action-pale) 0%, var(--carte) 46%); }
.aide-carte__ico {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--action-pale); color: var(--action-fonce);
}
.aide-carte__ico svg { width: 19px; height: 19px; }
.aide-carte__txt { display: flex; flex-direction: column; gap: 3px; }
.aide-carte__titre { font-weight: 700; font-size: 16px; }
.aide-carte__resume { font-size: var(--t-second); color: var(--encre-douce); line-height: 1.5; }
.aide-pied { margin: 24px 0 0; color: var(--encre-douce); font-size: var(--t-second); }

/* --- Un article --- */
.aide-article { max-width: 68ch; }
.aide-article p { line-height: 1.68; margin: 0 0 16px; }
.aide-article__titre {
  font-family: var(--font-titres); font-weight: 800; font-size: var(--t-sous);
  margin: 30px 0 12px; padding-top: 20px; border-top: 1px solid var(--action-pale);
}
.aide-article__titre:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.aide-etapes { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: etape; }
.aide-etapes li {
  position: relative; padding-left: 40px; margin-bottom: 14px; line-height: 1.6;
  counter-increment: etape;
}
.aide-etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--action); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.aide-liste { margin: 0 0 20px; padding: 0; list-style: none; }
.aide-liste li { position: relative; padding-left: 20px; margin-bottom: 10px; line-height: 1.6; }
.aide-liste li::before {
  content: ''; position: absolute; left: 4px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--action);
}
.aide-encart {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--rayon); padding: 14px 18px; margin: 0 0 20px;
}
.aide-encart p { margin: 0; font-size: var(--t-second); line-height: 1.6; }
.aide-encart__ico { flex-shrink: 0; display: inline-flex; margin-top: 1px; }
.aide-encart__ico svg { width: 18px; height: 18px; }
.aide-encart--note { background: var(--action-pale); color: var(--encre); }
.aide-encart--note .aide-encart__ico { color: var(--action-fonce); }
.aide-encart--attention { background: var(--erreur-pale); color: var(--erreur-texte); }
.aide-encart--attention .aide-encart__ico { color: var(--erreur); }

/* --- Article précédent / suivant --- */
.aide-suite {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--action-pale);
  max-width: 68ch;
}
.aide-suite__lien {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  color: var(--encre); max-width: 46%;
}
.aide-suite__lien--droite { text-align: right; margin-left: auto; }
.aide-suite__sens { font-size: var(--t-mention); color: var(--encre-douce); }
.aide-suite__titre { font-weight: 700; font-size: var(--t-second); color: var(--action-fonce); }

@media (max-width: 780px) {
  .aide-cartes { grid-template-columns: 1fr; }
}

/* Captures d'écran du mode d'emploi : cadrées comme une fenêtre, pour qu'on
   voie tout de suite qu'il s'agit d'une image de l'outil et pas de l'outil. */
.aide-figure { margin: 0 0 22px; max-width: 100%; }
.aide-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon); border: 1px solid var(--action-pale);
  box-shadow: var(--ombre-douce); background: var(--carte);
}
.aide-figure figcaption {
  margin-top: 8px; font-size: var(--t-mention); color: var(--encre-douce); line-height: 1.5;
}

/* ===========================================================================
   MESSAGERIE DE SUPPORT (organisateur ↔ Féemoi une Place)
   Un fil de discussion, pas un tableau : les messages de l'un sont alignés à
   gauche, ceux de l'autre à droite, et on lit du plus ancien au plus récent.
   =========================================================================== */
.fil { display: flex; flex-direction: column; gap: 12px; margin: 0 0 22px; max-width: 760px; }
.fil__vide { color: var(--encre-douce); font-style: italic; margin: 0; }
.fil__msg {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 13px 17px; max-width: 84%;
}
.fil__msg--moi { align-self: flex-end; background: var(--action-pale); }
.fil__msg--eux { align-self: flex-start; }
.fil__qui {
  margin: 0 0 4px; font-size: var(--t-mention); font-weight: 700; color: var(--encre);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.fil__quand { font-weight: 400; color: var(--encre-douce); }
.fil__txt { margin: 0; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

.fil-form { max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fil-form textarea { width: 100%; }

/* ---------------------------------------------------------------------------
   CONVERSATION — le fil et la zone d'écriture, dans un même bloc.
   Le fil flottait sur la page et la zone d'écriture était un champ de
   formulaire ordinaire, haut de quatre lignes : on écrivait dans un hublot,
   sans voir que ça faisait partie d'une conversation. Les deux sont désormais
   une seule pièce, posée sur un fond, avec une vraie surface pour écrire.
   =========================================================================== */
.convo { max-width: 760px; }
.convo__fil {
  background: var(--fond); border: var(--bordure-fine);
  border-radius: var(--rayon); padding: 18px; margin: 0 0 14px;
  max-height: 60vh; overflow-y: auto;
}
.fil__msg { display: flex; align-items: flex-start; gap: 10px; background: none; box-shadow: none; padding: 0; }
.fil__msg--moi { flex-direction: row-reverse; background: none; }
.fil__bulle {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 12px 16px; min-width: 0;
}
.fil__msg--moi .fil__bulle { background: var(--action-pale); }
/* La pastille d'initiales : savoir qui parle sans lire le nom. */
.fil__pastille {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--violet-pale); color: var(--violet);
}
.fil__msg--moi .fil__pastille { background: var(--action); color: #fff; }
/* Le trait de clôture : où finit une question réglée. */
.fil__cloture {
  display: flex; align-items: center; gap: 12px; margin: 4px 0;
  font-size: var(--t-mention); font-weight: 600; color: var(--encre-douce);
  text-transform: uppercase; letter-spacing: .04em;
}
.fil__cloture::before, .fil__cloture::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--violet-pale);
}
.fil__cloture span { font-weight: 400; text-transform: none; letter-spacing: 0; }

.convo__label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.convo__boite {
  border: var(--bordure-fine); border-radius: var(--rayon); background: var(--carte);
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.convo__boite:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-pale); }
.convo__boite textarea {
  display: block; width: 100%; border: 0; background: none; resize: none;
  padding: 14px 16px; font-family: var(--font-texte); font-size: 15px; line-height: 1.6;
  color: var(--encre); min-height: 120px;
}
.convo__boite textarea:focus { outline: none; }
.convo__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 12px 16px; border-top: 1px solid var(--violet-pale);
}
.convo__reste { font-size: var(--t-mention); color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.convo__reste--court { color: var(--action); font-weight: 600; }

.convo__clore { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.convo__clore-aide { font-size: var(--t-second); color: var(--encre-douce); }

@media (max-width: 640px) {
  .convo__fil { padding: 12px; max-height: none; }
  .fil__bulle { padding: 10px 13px; }
  .convo__barre { flex-wrap: wrap; }
}
.fil-note { margin: 18px 0 0; font-size: var(--t-second); color: var(--encre-douce); max-width: 70ch; }
.fil-retour { margin: 0 0 10px; }
.fil-retour a { color: var(--encre-douce); }

/* Chaque ligne porte son bouton de rangement à droite, hors du lien : un
   bouton DANS un lien n'est pas cliquable de façon fiable. */
.conv { position: relative; }
.conv__ranger { position: absolute; top: 10px; right: 10px; }
.conv a { padding-right: 52px; }
.convs-archives { margin: 18px 0 0; font-size: var(--t-second); }
.convs-archives a { color: var(--encre-douce); font-weight: 600; }
.convs--archivees { margin-top: 10px; }
.convs--archivees .conv a { opacity: .72; }

/* Un fil rangé, dans la boîte de réception : présent, mais en retrait. */
.conv--clos a { opacity: .62; }
.conv__clos {
  font-size: var(--t-mention); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--succes); background: var(--succes-pale); border-radius: 999px; padding: 2px 9px;
}

/* Liste des conversations, côté Féemoi. */
.convs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.conv a {
  display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: var(--encre);
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 15px 18px; border-left: 4px solid transparent;
}
.conv--attente a { border-left-color: var(--action); }
.conv__tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.conv__nom { font-size: 16px; }
.conv__quand { margin-left: auto; font-size: var(--t-mention); color: var(--encre-douce); }
.conv__extrait { color: var(--encre-douce); font-size: var(--t-second); line-height: 1.5; }

/* Pastilles de notification dans la navigation de l'espace. */
.espace-nav__badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--action); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.espace-rail__ico { position: relative; }
.espace-rail__pastille {
  position: absolute; top: -2px; right: -2px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--action-neon); border: 2px solid var(--nuit);
}
/* Une chose à FAIRE, pas seulement à lire : une provision demandée bloque un
   remboursement. Le rouge la distingue du fuchsia des messages non lus — c'est
   une couleur de sens, pas un second accent. */
.espace-rail__pastille--urgent { background: var(--erreur); }

/* Contrat de mandat : un document à lire, pas un écran à piloter. Colonne
   étroite, interlignage confortable, articles nettement séparés. */
.contrat {
  max-width: 74ch; background: var(--carte); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce); padding: 26px 30px; margin: 0 0 24px;
}
.contrat__entete {
  margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--action-pale);
  font-size: var(--t-mention); color: var(--encre-douce); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700;
}
.contrat__titre {
  font-family: var(--font-titres); font-weight: 800; font-size: var(--t-second);
  margin: 26px 0 8px;
}
.contrat__titre:first-of-type { margin-top: 0; }
.contrat p { margin: 0 0 10px; line-height: 1.65; font-size: var(--t-second); }
.contrat-signature {
  max-width: 74ch; background: var(--action-pale); border-radius: var(--rayon);
  padding: 24px 30px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.contrat-signature h2 { margin: 0; font-family: var(--font-titres); font-size: var(--t-sous); font-weight: 800; }
.contrat-signature .form-grille { width: 100%; }
.contrat-signature .btn--large { padding: 13px 26px; }

/* Qui vend, dit sur la page de paiement. Discret mais lisible : c'est une
   mention d'identification du vendeur, pas un argument commercial. */
.paiement-vendeur {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0; font-size: var(--t-second); color: var(--encre);
}
.paiement-vendeur .ico { width: 16px; height: 16px; color: var(--action-fonce); flex-shrink: 0; }

/* Conditions propres à l'organisateur : un texte libre, rendu paragraphe par
   paragraphe. On ne met pas en forme ce qu'on n'écrit pas soi-même. */
.conditions-orga { max-width: 70ch; }
.conditions-orga p { line-height: 1.7; margin: 0 0 14px; }
.legal-intro { color: var(--encre-douce); line-height: 1.6; max-width: 70ch; }
.form-conditions { max-width: 74ch; }
.form-conditions textarea { width: 100%; font-family: inherit; line-height: 1.6; }
.form-conditions .form-actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; }

/* Choix du mode de gestion sur la demande d'accès. Deux cartes cliquables :
   le choix engage toute la relation, il mérite mieux qu'une liste déroulante. */
.choix-mode { border: 0; padding: 0; margin: 0 0 22px; }
.choix-mode legend {
  padding: 0; margin-bottom: 12px; font-weight: 700; font-size: var(--t-second); color: var(--encre);
}
.choix-mode legend, .choix-mode__note { text-align: left; }
/* Spécificité renforcée : « .form-orga label { display:block } » est déclaré
   plus bas dans la feuille et l'emporterait sinon (même souci que .radio-mode). */
.form-orga .choix-mode__carte,
.choix-mode__carte {
  /* La carte de connexion centre son texte : on rétablit un alignement à gauche
     et on pose le bouton radio en tête de ligne, pas au-dessus du texte. */
  display: flex; gap: 11px; align-items: flex-start; text-align: left;
  cursor: pointer; margin-bottom: 10px;
  border: 1.5px solid var(--action-pale); border-radius: var(--rayon);
  padding: 15px 18px; background: var(--carte); transition: border-color .12s ease, background .12s ease;
}
.choix-mode__carte:hover { border-color: var(--action); }
.choix-mode__carte:has(input:checked) { border-color: var(--action); background: var(--action-pale); }
.form-orga .choix-mode__carte input,
.choix-mode__carte input { display: inline-block; width: auto; margin: 3px 0 0; flex-shrink: 0; }
.choix-mode__corps { display: block; }
.choix-mode__titre { display: block; font-weight: 700; font-size: 15px; }
.choix-mode__prix { display: inline-block; margin-top: 2px; font-weight: 800; color: var(--action-fonce); font-variant-numeric: tabular-nums; }
.choix-mode__sous { font-size: var(--t-mention); color: var(--encre-douce); margin-left: 5px; }
.choix-mode__txt { display: block; margin-top: 6px; font-size: var(--t-second); color: var(--encre-douce); line-height: 1.55; }
.choix-mode__note { margin: 10px 0 0; font-size: var(--t-mention); color: var(--encre-douce); }

/* Mode de gestion demandé, sur une demande d'accès. */
.carte-demande__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.badge-mode {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: var(--t-mention); font-weight: 700; white-space: nowrap;
}
.badge-mode--autonome { background: var(--action-pale); color: var(--action-fonce); }
.badge-mode--complete { background: var(--nuit); color: #fff; }

/* Exemple chiffré sous chaque mode : deux prix comparés valent mieux qu'une
   formule. Détaché du texte, en plus petit, sur fond légèrement contrasté. */
.choix-mode__exemple {
  display: block; margin-top: 9px; padding: 8px 11px; border-radius: var(--rayon-petit);
  background: var(--fond); font-size: var(--t-mention); color: var(--encre-douce); line-height: 1.5;
}
.choix-mode__carte:has(input:checked) .choix-mode__exemple { background: rgba(255,255,255,.6); }
.choix-mode__prix { line-height: 1.35; }

/* Exemple chiffré de la gestion complète, sur la vitrine (carte sombre). */
.vitrine-tarif__exemple {
  margin: 4px 0 0; font-size: var(--t-mention); line-height: 1.5; color: rgba(255,255,255,.72);
}
.vitrine-tarif__exemple strong { color: #fff; }

/* Les deux commissions de la gestion complète, l'une sous l'autre. */
.choix-mode__lignes { display: block; margin-top: 3px; }
.choix-mode__ligne { display: block; }
.choix-mode__ligne + .choix-mode__ligne { margin-top: 1px; }
.vitrine-tarif__prix--second { margin-top: 4px; }
.vitrine-tarif__prix--second strong { font-size: var(--t-sous); }

/* Troisième voie « je ne sais pas » : même carte, sans ligne de prix. */
.choix-mode__carte--simple .choix-mode__txt { margin-top: 4px; }
.badge-mode--adefinir { background: var(--badge-faible-bg, #FFF1DC); color: var(--badge-faible-tx, #8A5A00); }

/* Étendue d'un accès visibilité, et lien vers le budget depuis une carte. */
.badge-voit { display: inline-block; margin-right: 8px; font-size: var(--t-mention); font-weight: 700; color: var(--action-fonce); }
.affiche-carte__budget { display: inline-block; margin-top: 4px; font-size: var(--t-second); color: var(--action); }

/* Les deux signatures du mandat, côte à côte : un contrat n'existe qu'à deux.
   Le côté qui manque encore se voit, sans dramatiser — il ne bloque rien. */
.contrat-signatures { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 10px; }
.contrat-signatures__part {
  flex: 1 1 220px; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 16px; background: var(--carte); border: var(--bordure-fine);
  border-radius: var(--rayon-petit);
}
.contrat-signatures__part--attente { border-style: dashed; }
.contrat-signatures__qui { font-family: var(--font-titres); font-size: 15px; color: var(--encre); }
.contrat-signatures__quoi { font-size: 14px; color: var(--encre); }
.contrat-signatures__quand { font-size: 12px; color: var(--encre-douce); }
.contrat-signatures__part--attente .contrat-signatures__quoi { color: var(--encre-douce); font-style: italic; }

/* Le contrat signé, tel qu'il a été accepté : texte brut, largeur de lecture,
   et un fond de « pièce au dossier » plutôt qu'un bloc de code. */
.contrat-brut {
  max-width: 62em; margin: 18px 0 24px; padding: 20px 24px;
  background: var(--carte); border: var(--bordure-fine); border-radius: var(--rayon-petit);
  font-family: var(--font-texte); font-size: 13.5px; line-height: 1.6; color: var(--encre);
  white-space: pre-wrap; overflow-wrap: break-word;
}

/* Aperçu vu par un accès visibilité : sans la colonne « dernières commandes »,
   le suivi des ventes occupe toute la largeur plutôt que de flotter à droite. */
.dash2--lecture { grid-template-columns: 1fr; }

/* Une nouvelle version du mandat : l'étiquette dit ce qu'on est en train de
   lire, pour qu'on ne la confonde pas avec le contrat déjà signé. */
.contrat__neuf {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--action-pale); color: var(--action-fonce);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}

/* Invitation à signer la nouvelle version du mandat : visible, mais ce n'est
   pas une alerte — rien n'est cassé, et les ventes continuent. */
.bandeau-contrat {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 0 0 18px; padding: 12px 18px;
  background: var(--action-pale); border-radius: var(--rayon-petit);
  font-size: 14px; color: var(--encre);
}
.bandeau-contrat svg { vertical-align: -2px; margin-right: 6px; }

/* ===== Boutiques groupées (« agendas ») =====================================
   Une page publique qui rassemble plusieurs événements. Côté espace : une
   liste, un formulaire ; côté public : une couverture, un texte, la grille de
   cartes déjà employée par le catalogue. */

/* Le bloc d'actions en tête de la fiche (intégrer, publier). */
.espace-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.espace-actions form { margin: 0; }

/* L'adresse publique : préfixe figé + partie modifiable, sur une seule ligne. */
.form-orga .champ-prefixe {
  display: inline-block; margin-right: 2px; padding: 8px 0;
  color: var(--encre-douce); font-size: 14px;
}
.form-orga .champ-prefixe + input { display: inline-block; width: auto; min-width: 16em; }

.apercu-couverture {
  display: block; max-width: 420px; width: 100%; height: auto; margin: 6px 0 10px;
  border-radius: var(--rayon-petit); border: var(--bordure-fine);
}

/* La sélection d'événements : des cases, pas un tableau — on coche, c'est tout. */
.boutique-selection { margin-top: 14px; padding-top: 14px; border-top: var(--bordure-fine); }
.liste-cases { list-style: none; margin: 0 0 10px; padding: 0; }
.liste-cases li { padding: 7px 0; border-bottom: var(--bordure-fine); }
.liste-cases li:last-child { border-bottom: 0; }
.liste-cases .muet { margin-left: 8px; font-size: 13px; }

.form-suppr { margin: 26px 0 10px; }

/* --- Page publique --- */
/* Mise en vente refusée : la liste de ce qui manque, chaque ligne menant à
   l'écran qui la corrige. */
.bloque-vente { display: block; }
.bloque-vente__titre { margin: 0 0 6px; font-weight: 700; }
.bloque-vente__liste { margin: 0; padding-left: 20px; line-height: 1.7; }

/* ---- Contrat de commission : le texte, et ce qui le prouve ---------------- */
.contrat-preuve { margin-bottom: 18px; }
.contrat-preuve__liste { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 8px 18px; margin: 0; }
.contrat-preuve__liste dt { font-weight: 700; color: var(--encre-douce); font-size: var(--t-second); }
.contrat-preuve__liste dd { margin: 0; color: var(--encre); }
/* L'empreinte : 64 caractères qui doivent pouvoir être relus et comparés. */
.contrat-empreinte {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  word-break: break-all; background: var(--fond); padding: 2px 6px; border-radius: var(--rayon-petit);
}
.contrat-preuve__ua { font-size: var(--t-second); color: var(--encre-douce); word-break: break-word; }
.contrat-manques { margin-bottom: 18px; border-left: 3px solid var(--attention); }
.contrat-manques__liste { margin: 0; padding-left: 20px; line-height: 1.7; }
/* Le contrat lui-même : une colonne de lecture, pas la largeur de l'écran. */
.contrat-texte { max-height: 60vh; overflow-y: auto; padding: 26px 30px; }
.contrat-texte h1, .contrat-texte h2, .contrat-texte h3 { font-family: var(--font-titres); }
.contrat-signature { margin-top: 18px; }
.contrat-case { margin: 14px 0; font-weight: 600; }

/* ---- « Rien ne vient » : la sortie de secours du mot de passe oublié -------
   L'écran annonçait un envoi quoi qu'il arrive — nécessaire, dire « adresse
   inconnue » permettrait de deviner qui a un compte. Mais qui se trompe
   d'adresse attendait un email qui ne viendrait jamais, sans aucun indice. */
.mdp-aide {
  margin: 18px 0; padding: 16px 18px; text-align: left;
  background: var(--fond); border-radius: var(--rayon-petit);
}
.mdp-aide__titre { margin: 0 0 8px; font-weight: 700; color: var(--encre); }
.mdp-aide__liste { margin: 0; padding-left: 18px; color: var(--encre-douce); line-height: 1.6; font-size: var(--t-second); }
.mdp-aide__liste li { margin-bottom: 5px; }
.mdp-aide__pied { margin: 10px 0 0; font-size: var(--t-second); color: var(--encre-douce); }

/* ---- Boutique groupée : même principe que la page d'un événement ----------
   Val, le 2026-09-10 : plus de cadre de couleur. La couverture reprend le bloc
   .fiche__couverture de la page d'un événement (image entière, jamais rognée) ;
   le titre, la présentation et les événements se posent sur le fond de page. */
.bq-entete { margin: 8px 0 18px; }
.bq-reperes {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0 18px;
  margin: 10px 0 0; padding: 0;
  font-family: var(--font-titres); font-weight: 600; font-size: 14px; color: var(--encre-douce);
}
.bq-reperes li { position: relative; padding-right: 18px; }
.bq-reperes li:not(:last-child)::after { content: "·"; position: absolute; right: 4px; color: var(--action); }
.bq-presentation { max-width: 72ch; margin: 0 0 34px; }
.bq-presentation__texte { font-size: 16px; line-height: 1.7; color: var(--encre); }
.bq-presentation__texte p { margin: 0 0 14px; white-space: pre-line; }
.bq-presentation__intertitre {
  margin: 24px 0 6px; font-family: var(--font-titres); font-weight: 800;
  font-size: 1.1rem; line-height: 1.3; color: var(--encre);
}
.bq-presentation__texte > :first-child { margin-top: 0; }
/* Plus de 1 000 caractères : une douzaine de lignes, un fondu, « Lire la suite ». */
.bq-presentation__case { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bq-presentation--long .bq-presentation__texte {
  max-height: calc(1.7em * 12); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, #000 65%, transparent);
}
.bq-presentation__case:checked ~ .bq-presentation__texte { max-height: none; -webkit-mask-image: none; mask-image: none; }
.bq-presentation__plus {
  display: inline-block; margin-top: 4px; cursor: pointer; font-weight: 700;
  color: var(--action); text-decoration: underline; text-underline-offset: 3px;
}
.bq-presentation__fermer { display: none; }
.bq-presentation__case:checked ~ .bq-presentation__plus .bq-presentation__ouvrir { display: none; }
.bq-presentation__case:checked ~ .bq-presentation__plus .bq-presentation__fermer { display: inline; }
.bq-presentation__case:focus-visible ~ .bq-presentation__plus { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 4px; }
/* Intertitre de la grille : il ne rivalise plus avec le nom de la saison. */
.bq-affiche {
  font-family: var(--font-titres); font-weight: 800; font-size: var(--t-sous);
  margin: 0 0 16px; color: var(--encre);
}
/* La grille de la boutique remplit la largeur : la grille du catalogue plafonne
   chaque carte à 360 px, ce qui laissait un grand vide à droite dès qu'il y
   avait deux ou quatre spectacles. */
.grille-spectacles--boutique { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }

/* ---- Affichage « agenda » : une ligne par date ----------------------------
   Pour une saison, le spectateur ne cherche pas un spectacle, il cherche une
   SOIRÉE. La grille d'affiches l'obligeait à ouvrir chaque fiche pour trouver
   quand ça se joue. */
.bq-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bq-agenda__lien {
  display: flex; align-items: center; gap: 18px;
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 14px 18px; text-decoration: none; color: var(--encre);
  transition: transform .16s ease, box-shadow .16s ease;
}
/* Même ombre de survol que les cartes du catalogue : c'est le même geste. */
.bq-agenda__lien:hover { transform: translateY(-1px); box-shadow: var(--ombre-carte-survol); }
/* La date en pastille : le repère qu'on balaie de l'œil dans un calendrier.
   Chiffres en Figtree — la charte interdit Young Serif sur des nombres. */
.bq-agenda__date {
  flex: 0 0 auto; width: 58px; text-align: center; line-height: 1.05;
  font-family: var(--font-titres); color: var(--action);
}
.bq-agenda__jour { display: block; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bq-agenda__mois { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); }
.bq-agenda__corps { flex: 1 1 auto; min-width: 0; }
.bq-agenda__titre { display: block; font-family: var(--font-titres); font-weight: 800; font-size: 1.05rem; }
.bq-agenda__meta { display: block; color: var(--encre-douce); font-size: 14px; margin-top: 2px; }
/* Places retenues par un panier d'achat en cours (agenda de la boutique) : un
   constat, pas une alerte — ni rouge (ce n'est pas un refus) ni vert. */
.bq-agenda__retenues { display: block; color: var(--encre-douce); font-size: 13px; margin-top: 3px; font-style: italic; }
/* Même information sur la fiche spectacle, sous le badge « Complet ». */
.retenues { max-width: 46ch; margin: 8px 0 0; color: var(--encre-douce); font-size: 14px; line-height: 1.45; }
.bq-agenda__fin { flex: 0 0 auto; }
.bq-agenda__prix { font-family: var(--font-titres); font-weight: 800; color: var(--action); font-variant-numeric: tabular-nums; }
.bq-agenda__ligne.est-complet .bq-agenda__lien { opacity: .68; }

/* ---- Affichage « en vedette » : le premier en grand ----------------------- */
.bq-vedette {
  display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 26px;
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  overflow: hidden; margin: 0 0 22px; text-decoration: none; color: var(--encre);
}
.bq-vedette__affiche { aspect-ratio: 2 / 3; background: var(--nuit); overflow: hidden; }
.bq-vedette__affiche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bq-vedette__texte { padding: 26px 26px 26px 0; align-self: center; }
.bq-vedette__titre { font-family: var(--font-affiche); font-weight: 400; font-size: var(--t-section); margin: 4px 0 8px; line-height: 1.1; }
.bq-vedette__btn { margin-top: 14px; }

@media (max-width: 640px) {
  .bq-vedette { grid-template-columns: 1fr; }
  .bq-vedette__texte { padding: 0 20px 22px; }
  .bq-agenda__lien { gap: 12px; padding: 12px 14px; }
  .bq-agenda__date { width: 46px; }
}

/* Qui vend, sur la fiche. Discret mais lisible : c'est une information
   précontractuelle, pas une note de bas de page. */
.form-tarifs__vendeur {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--encre-douce);
}
.form-tarifs__vendeur a { color: inherit; text-decoration: underline; }

/* Prix guichet rappelé sous le prix de vente, dans la table des tarifs : un
   réglage qu'on ne voit nulle part est un réglage dont on doute. */
.tarifs-prix__guichet {
  display: block; font-weight: 400; font-size: 12px;
  color: var(--encre-douce); white-space: nowrap;
}

/* Ce que l'ACHETEUR paie, canal par canal. Le gros chiffre au-dessus est la
   part de l'organisateur ; sans cette ligne, on le lit comme le prix payé. */
.tarifs-prix__acheteur {
  display: block; margin-top: 3px; font-weight: 400; font-size: 12px;
  color: var(--encre-douce); white-space: nowrap;
}

/* Suggestions « code postal → commune ». Liste à nous plutôt que la datalist
   native : le navigateur dessinait son menu où il voulait, parfois très loin du
   champ dans une fenêtre intégrée. */
.cp-ville { position: relative; display: block; }
.cp-ville__liste {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none;
  background: var(--carte); border: 1px solid var(--action-pale);
  border-radius: var(--rayon-petit); box-shadow: 0 8px 24px rgba(36, 20, 54, .12);
  max-height: 240px; overflow-y: auto;
}
.cp-ville__liste[hidden] { display: none; }
.cp-ville__choix {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 10px; border: none; background: none; border-radius: 6px;
  font: 400 14px/1.3 var(--font-texte); color: var(--encre);
}
.cp-ville__choix:hover, .cp-ville__choix:focus { background: var(--action-pale); }
.cp-ville__note {
  padding: 8px 10px 4px; font-size: 12px; line-height: 1.35;
  color: var(--encre-douce); border-top: 1px solid var(--action-pale); margin-top: 4px;
}

/* Renvoi vers la Boutique depuis la fiche d'un événement : c'est là que vivent
   l'affiche et le contenu public, et on les cherche d'abord ici. */
.renvoi-boutique {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 0 0 24px;
  padding: 14px 18px; border-radius: var(--rayon-petit);
  background: var(--action-pale);
}
.renvoi-boutique__txt { margin: 0; font-size: 14px; line-height: 1.45; color: var(--encre); }
.renvoi-boutique .btn { flex: none; }

/* Chaîne de calcul de la billetterie nette : un « net » sans son détail ne se
   vérifie pas, et l'organisateur doit pouvoir refaire l'opération à la main. */
.budget-chaine { width: 100%; border-collapse: collapse; margin: 12px 0 4px; font-size: 14px; }
.budget-chaine th { text-align: left; font-weight: 400; padding: 7px 0; color: var(--encre); }
.budget-chaine th small { color: var(--encre-douce); font-weight: 400; }
.budget-chaine td.num { text-align: right; padding: 7px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.budget-chaine__retrait th, .budget-chaine__retrait td { color: var(--encre-douce); }
.budget-chaine__etape th, .budget-chaine__etape td { border-top: 1px dotted var(--action-pale); }
.budget-chaine__total th, .budget-chaine__total td {
  border-top: 1px solid var(--action-pale); padding-top: 10px; font-weight: 500;
}

/* ---- Le budget en entier : un document, pas un écran de saisie ------------
   Refonte du 2026-08-31. L'ancienne version alignait deux tableaux gris
   identiques : rien ne séparait l'argent qui entre de celui qui sort, une ligne
   à 9 000 € pesait autant qu'une ligne à 0 €, et le résultat arrivait tout en
   bas. Ici : le résultat en tête sur fond nuit, deux colonnes qui portent leur
   total, et des barres qui disent la part de chaque poste. */
.bdoc-actions { display: flex; gap: 10px; justify-content: flex-end; margin: 0 0 14px; flex-wrap: wrap; }
.bdoc { background: var(--carte); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-douce); }

/* La page de garde : elle répond d'emblée à la seule question qu'on se pose en
   ouvrant un budget — est-ce que ça tient ? */
.bdoc__tete {
  background: var(--nuit); color: #fff; padding: 26px 28px 24px;
  display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.bdoc__ident { min-width: 0; }
.bdoc__marque {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; opacity: .72;
}
.bdoc__pastille {
  width: 20px; height: 20px; border-radius: 6px; background: var(--action); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 9px; letter-spacing: 0; opacity: 1;
}
.bdoc__titre { margin: 0; font-family: var(--font-affiche); font-weight: 400; font-size: 30px; line-height: 1.15; }
.bdoc__meta { margin: 8px 0 0; font-size: 14px; opacity: .8; }
.bdoc__solde { text-align: right; flex: 0 0 auto; }
.bdoc__solde-lib { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .72; }
.bdoc__solde-val {
  margin: 4px 0 0; font-family: var(--font-affiche); font-size: 38px; line-height: 1.05;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Sur le fond nuit, ni le vert ni le rouge de la charte ne passent : on garde
   leur SENS avec deux teintes lisibles sur sombre. */
.bdoc__solde.est-negatif .bdoc__solde-val { color: #FF9E86; }
.bdoc__solde.est-positif .bdoc__solde-val { color: #6FE0AE; }
.bdoc__solde-note { margin: 5px 0 0; font-size: 12px; opacity: .7; }

.bdoc__corps { display: grid; grid-template-columns: 1fr 1fr; }
.bdoc-col { padding: 24px 28px 20px; min-width: 0; }
.bdoc-col + .bdoc-col { border-left: 1px solid var(--bordure); }
.bdoc-col__tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid currentColor;
}
.bdoc-col--in .bdoc-col__tete { color: var(--succes); }
.bdoc-col--out .bdoc-col__tete { color: var(--action-fonce); }
.bdoc-col__t { margin: 0; font-family: var(--font-titres); font-weight: 800; font-size: 15px; letter-spacing: .3px; text-transform: uppercase; }
.bdoc-col__total { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bdl { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 14px; margin: 0; }
.bdl__val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bdl--source { font-weight: 700; }
.bdl--retrait { color: var(--encre-douce); font-size: 13px; padding: 4px 0 4px 12px; }
.bdl--retrait small { display: block; font-size: 11.5px; opacity: .85; }
/* Une ligne à zéro ne doit pas peser autant qu'une ligne à 9 000 €. */
.bdl--zero { opacity: .45; }
.bdl--net { border-top: 1px solid var(--bordure); margin-top: 8px; padding-top: 10px; font-weight: 800; }
/* Étape intermédiaire de la chaîne (« ce qui arrive sur votre compte ») : elle
   n'est ni une source ni un total, mais c'est LE chiffre que l'organisateur
   reconnaît sur son relevé — elle doit se distinguer des retraits. */
.bdl--etape { border-top: 1px dashed var(--bordure); margin-top: 4px; padding-top: 8px; font-weight: 700; }
.bdl--vide { color: var(--encre-douce); font-size: 13px; font-style: italic; padding: 8px 0; }

.bdoc-cat { margin-top: 14px; }
.bdoc-cat:first-of-type { margin-top: 2px; }
.bdoc-cat__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 800; }
.bdoc-cat__barre { height: 5px; border-radius: 999px; background: var(--action-pale); margin: 6px 0 4px; overflow: hidden; }
.bdoc-cat__barre i { display: block; height: 100%; border-radius: 999px; background: var(--action); }
.bdoc-cat__part { margin: 0; font-size: 11.5px; color: var(--encre-douce); font-weight: 600; }
.bdoc-cat__lignes { margin-top: 4px; }
.bdoc-cat__lignes .bdl { padding: 4px 0 4px 12px; font-size: 13px; color: var(--encre-douce); }

/* Le point mort : un chiffre seul ne dit pas la distance qui reste. */
.bdoc-pm { border-top: 1px solid var(--bordure); padding: 20px 28px 24px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.bdoc-pm__txt { flex: 1 1 260px; min-width: 0; }
.bdoc-pm__t { margin: 0 0 4px; font-family: var(--font-titres); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .4px; }
.bdoc-pm__p { margin: 0; font-size: 14px; color: var(--encre-douce); }
.bdoc-pm__p strong { color: var(--encre); }
.bdoc-pm__jauge { flex: 1 1 240px; }
.bdoc-pm__barre { height: 10px; border-radius: 999px; background: var(--action-pale); overflow: hidden; }
.bdoc-pm__barre i { display: block; height: 100%; border-radius: 999px; background: var(--action); }
.bdoc-pm__reperes { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--encre-douce); font-weight: 600; margin-top: 5px; }

.bdoc__pied { margin: 0; padding: 14px 28px 20px; font-size: 12px; color: var(--encre-douce); border-top: 1px solid var(--bordure); }

@media (max-width: 760px) {
  .bdoc__corps { grid-template-columns: 1fr; }
  .bdoc-col + .bdoc-col { border-left: 0; border-top: 1px solid var(--bordure); }
  .bdoc__solde { text-align: left; }
}

/* À l'impression navigateur, le fond nuit ne sort pas chez tout le monde : on
   repasse le bandeau en clair. Le vrai document reste le PDF. */
@media print {
  .bdoc { box-shadow: none; }
  .bdoc-actions, .budget-intro { display: none !important; }
  .bdoc__tete { background: transparent; color: var(--encre); border-bottom: 2px solid var(--encre); }
  .bdoc__marque, .bdoc__meta, .bdoc__solde-lib, .bdoc__solde-note { opacity: 1; color: var(--encre-douce); }
  .bdoc__solde.est-negatif .bdoc__solde-val { color: var(--erreur-texte); }
  .bdoc__solde.est-positif .bdoc__solde-val { color: var(--succes); }
}

/* Retour au site depuis la page de connexion : sans lui, l'espace organisateur
   est une pièce sans porte pour qui n'a pas encore de compte. */
.connexion-retour { margin: 14px 0 0; text-align: center; font-size: 14px; }
.espace-pied a { color: inherit; text-decoration: underline; }

/* ---- Focus clavier : plancher d'accessibilité ---------------------------- */
/* La règle générale (haut de feuille) dessine un contour de 2 px sur
   :focus-visible. Vingt-deux règles plus spécifiques la remplaçaient ensuite par
   « outline: none » + un halo --violet-pale, dont le contraste sur blanc est de
   1,21 pour 1 : invisible. Il ne restait qu'un changement de bordure d'un pixel.
   Cela touchait notamment .form-coordonnees, c'est-à-dire le formulaire du
   TUNNEL D'ACHAT, et .champ-tags__saisie, qui n'avait plus aucun repère.

   Ce bloc est posé en FIN de feuille et marqué !important : un repère de saisie
   au clavier n'est pas une préférence esthétique qu'une règle de composant peut
   annuler. Le halo des règles ci-dessus reste, en complément — il ne devient
   simplement plus le seul signal.

   :focus-visible et non :focus : le navigateur ne le pose qu'à la navigation au
   clavier, jamais sur un clic de souris. Personne ne voit de contour en cliquant. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--action) !important;
  outline-offset: 2px;
}

/* Sous les boutons de la page de confirmation : dit ce que fait « Ajouter à mon
   agenda », qui télécharge un fichier au lieu d'ouvrir l'agenda. Le ton reste
   celui d'une note, pas d'une alerte : rien ne va mal. */
.confirmation__aide-agenda {
  margin: -6px 0 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--encre-douce);
  max-width: 62ch;
}

/* « Tout afficher », posé à côté du compteur de la liste des participants.
   Le filtre par défaut masque les billets annulés : sans ce bouton, une
   commande remboursée semblait avoir disparu. */
.participants-compte__tout {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--violet-fonce);
  text-decoration: underline;
  cursor: pointer;
}
.participants-compte__tout:hover { color: var(--violet); }

/* Colonne « Sur quelle recette » de l'écran de validation des remboursements :
   accorder un montant sans savoir s'il existe quelque part n'a pas de sens. */
.remb-recette { font-size: 12.5px; line-height: 1.5; max-width: 34ch; }
.remb-recette__seance + .remb-recette__seance { margin-top: 8px; }
.remb-recette__solde {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--bordure);
  color: var(--encre-douce);
}
/* Un compte qui passe sous zéro se signale, sans crier : c'est une information,
   pas une panne. */
.remb-negatif { color: var(--erreur-texte); font-weight: 600; }

/* Une date dont la recette est passée sous zéro : les frais restent dus. */
.prov-negatif { color: var(--erreur-texte); }
.prov-dates td.num, .prov-dates th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* L'opération à faire, dans la ligne de la date concernée. */
.prov-direct { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.prov-direct .lien-fleche { font-size: 12px; }

/* Une date dont les remboursements en attente dépassent la recette. */
.prov-ligne--manque { background: var(--attention-pale); }
.tableau-large { overflow-x: auto; }

/* Provisions : une fiche par date. Six colonnes de tableau ne tenaient pas dans
   la colonne étroite de cet écran, et une table qui défile se lit plus mal. */
.prov-liste { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.prov-carte {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
/* Une date à renflouer se signale par le fond, pas par une alarme. */
.prov-carte--manque { background: var(--attention-pale); border-color: var(--attention-texte); }
.prov-carte__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.prov-carte__dispo { text-align: right; white-space: nowrap; }
.prov-carte__dispo strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.prov-carte__dispo small, .prov-carte__detail { color: var(--encre-douce); font-size: 12.5px; }
.prov-carte__detail, .prov-carte__attente { margin: 0; font-size: 13px; line-height: 1.5; }
.prov-direct { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* La provision demandée : la seule chose à faire sur cet écran. Elle mène, et
   elle démontre son calcul — les frais de service sont ce qu'on oublie. */
.prov-demande { border-left: 3px solid var(--erreur); }
.prov-demande__quoi { margin: 0 0 12px; font-size: 15px; }
.prov-calcul { list-style: none; margin: 0 0 14px; padding: 0; max-width: 46ch; }
.prov-calcul li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 7px 0; border-bottom: 1px solid var(--bordure); font-size: 14px;
}
.prov-calcul li strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prov-calcul__total { border-bottom: 0; border-top: 2px solid var(--encre); font-size: 15.5px; }
.prov-calcul__total strong { color: var(--erreur-texte); font-size: 17px; }
.prov-demande__pourquoi {
  background: var(--fond); border-radius: var(--rayon-petit);
  padding: 12px 14px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; max-width: 62ch;
}
.prov-detail > summary { cursor: pointer; font-weight: 600; }

/* Le point rouge du rail dit qu'il y a quelque chose à faire dans la
   comptabilité ; celui-ci dit dans lequel des quatre onglets. */
.compta-sousnav__item { position: relative; }
.compta-sousnav__pastille {
  display: inline-block; width: 8px; height: 8px; margin-left: 6px;
  border-radius: 50%; background: var(--erreur); vertical-align: 2px;
}

/* Un remboursement que la recette de sa date ne couvre pas : il attend une
   provision de l'organisateur, pas notre accord. Le rouge dit que la balle est
   dans son camp. */
.presence--bloque { background: var(--erreur-pale); color: var(--erreur-texte); font-weight: 700; }

/* Avenant au mandat : ce qu'il change, ce qu'il ne change pas. Il passe avant
   le contrat lui-même, c'est la seule chose attendue sur cette page. */
.avenant { border-left: 3px solid var(--violet); }
.avenant__liste { margin: 4px 0 16px; padding-left: 20px; line-height: 1.7; }
.avenant__liste--calme { color: var(--encre-douce); }

/* Le régime du contrat, dit en clair plutôt que deviné au fil du texte. */
.contrat-regime { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; }
.contrat-regime__pastille {
  background: var(--violet-pale); color: var(--violet-fonce);
  font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.contrat-regime__quoi { color: var(--encre-douce); font-size: 13.5px; max-width: 62ch; }

/* Les actes signés : le mandat, ses versions, et les avenants. */
.contrat-docs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.contrat-docs li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--bordure);
}
.contrat-docs li:last-child { border-bottom: 0; padding-bottom: 0; }
.contrat-docs__quoi { font-size: 14px; }
.contrat-docs__quand { color: var(--encre-douce); font-size: 12.5px; flex: 1 1 auto; }

/* Un spectacle publié dont les tarifs ne sont pas encore posés : on ne promet
   ni un prix ni la gratuité. */
.carte__prix--attente { color: var(--encre-douce); font-weight: 400; }

/* --- Lieu d'une DATE (tournée) ---------------------------------------------
   Un spectacle joué dans plusieurs salles garde UNE fiche : le lieu se règle
   date par date. Le bloc emprunte la grammaire des autres réglages de séance ;
   seul l'encadré des champs d'une salle inconnue est marqué, pour qu'on voie
   qu'on est en train de créer quelque chose et pas de choisir. */
.seance-lieu-date__form { display: grid; gap: 12px; }
.seance-lieu-date__neuve {
  display: grid; gap: 12px;
  padding: 14px; border-radius: var(--rayon-petit);
  background: var(--violet-pale); border: 1px solid #E7D9F0;
}
.seance-lieu-date__rendre { margin-top: 4px; }
.seance-lieu-date__rendre .btn-lien { padding-left: 0; }
/* La date porte son propre lieu : une pastille discrète le signale dans la
   liste des dates, sinon rien ne distingue une tournée d'une série au même
   endroit. */
.seance-carte__tournee {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--violet-pale); color: var(--violet);
}

/* Spectacle en tournée : plusieurs salles pour un même spectacle. Le bloc « Le
   lieu » ne peut plus annoncer UNE adresse — il liste les dates et leurs
   salles. Sans ça, un spectateur lit l'adresse de la première date et se
   déplace au mauvais endroit pour la troisième. */
.lieu-bloc__intro { color: var(--encre-douce); margin: 0 0 12px; }
.lieu-tournee { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lieu-tournee li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 12px 14px; border-radius: var(--rayon-petit);
  background: var(--carte); border: 1px solid var(--violet-pale);
}
.lieu-tournee__date { font-family: var(--font-titres); font-weight: 800; color: var(--encre); }
.lieu-tournee__salle { color: var(--encre-douce); }
.lieu-tournee__plan { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--action); font-weight: 600; }
/* « Appliquer ce lieu aux dates déjà créées » : la case porte une explication
   sous son libellé, donc elle s'aligne en haut et non au centre. */
.lieu-appliquer { align-items: flex-start; margin-top: 6px; }
.lieu-appliquer > span { display: grid; gap: 3px; }
.lieu-appliquer .champ-aide { margin: 0; }

/* --- Écran « Dupliquer cette date » -----------------------------------------
   Les choix vivaient dans un panneau replié que personne n'ouvrait. Ils ont
   leur écran ; le rappel de la date d'origine ouvre la page pour qu'on sache
   toujours ce qu'on est en train de copier. */
.seance-dupli__lien { padding-left: 0; }
.dupli-source { display: grid; gap: 4px; margin-bottom: 18px; }
.dupli-source__label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--encre-douce); font-weight: 700; }
.dupli-source__date { font-family: var(--font-titres); font-weight: 800; font-size: var(--t-sous); color: var(--encre); }
.dupli-source__meta { color: var(--encre-douce); font-size: var(--t-second); }
.dupli-form .form-bloc { margin-bottom: 16px; }
/* Une case + son libellé + l'explication dessous : alignement en haut, sinon la
   case flotte au milieu d'un pavé de texte.
   Sélecteur « label.dupli-choix » et non « .dupli-choix » : « .form-orga label
   { display: block } » a la même spécificité et gagnait, la case se retrouvait
   AU-DESSUS de son libellé au lieu d'être à côté. */
label.dupli-choix { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; margin: 0 0 12px; }
.dupli-choix input { width: 18px; height: 18px; accent-color: var(--violet); margin: 2px 0 0; flex: 0 0 auto; }
.dupli-choix > span { display: grid; gap: 2px; }
.dupli-choix small { color: var(--encre-douce); font-size: var(--t-second); }
/* L'avertissement des dates recopiées à l'identique : c'est le piège de la
   duplication, il ne doit pas se lire comme une aide de plus. */
.dupli-choix__attention { color: var(--attention-texte); }
.dupli-choix__attention strong { color: var(--attention-texte); }
/* Ce qui suit toujours, sans case à cocher : dit une fois, en gris. */
.dupli-toujours { margin: 0 0 20px; max-width: 62ch; }
.dupli-jamais { margin-top: 22px; }
.dupli-jamais__liste { display: grid; gap: 12px; margin: 0; }
.dupli-jamais dt { font-weight: 700; color: var(--encre); }
.dupli-jamais dd { margin: 2px 0 0; color: var(--encre-douce); }
/* Le menu des salles se rangeait sur la même ligne que son libellé, alors que
   le champ de date juste au-dessus se pose en dessous du sien. Deux champs
   voisins, deux mises en page : on aligne. */
.dupli-form label > select,
.seance-lieu-date__form label > select { width: 100%; }

/* --- Fenêtre de confirmation -------------------------------------------------
   Elle remplace la boîte grise du navigateur, qui ne s'affichait pas partout :
   dans un navigateur intégré, elle répondait « non » toute seule et l'action
   n'était jamais envoyée, sans un mot (voir public/js/confirm.js). Celle-ci est
   dans la page, donc personne ne peut la faire taire. */
.confirm-fenetre {
  border: none; padding: 26px 28px; max-width: 460px; width: calc(100vw - 32px);
  border-radius: var(--rayon); background: var(--carte); color: var(--encre);
  box-shadow: 0 24px 60px rgba(36, 20, 54, .28);
}
.confirm-fenetre::backdrop { background: rgba(30, 16, 48, .55); }
.confirm-fenetre__titre {
  font-family: var(--font-titres); font-weight: 800; font-size: var(--t-section);
  margin: 0 0 10px; line-height: 1.25;
}
.confirm-fenetre__texte { margin: 0; color: var(--encre-douce); line-height: 1.5; }
.confirm-fenetre__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px;
}
/* Charte, règle d'erreur : une action destructrice est un bouton BLANC À TEXTE
   ROUGE, jamais un aplat rouge plein. Le rouge nomme le danger sans le crier. */
.btn--destructeur {
  background: var(--carte); color: var(--erreur-texte);
  box-shadow: inset 0 0 0 1.5px var(--erreur);
}
.btn--destructeur:hover { background: var(--erreur-pale); color: var(--erreur-texte); }
.btn--destructeur:focus-visible { outline: 3px solid var(--erreur-pale); outline-offset: 2px; }
/* Sur téléphone, deux boutons côte à côte deviennent étroits : on les empile,
   l'action en premier sous le pouce, « Annuler » juste en dessous. */
@media (max-width: 420px) {
  .confirm-fenetre__actions { flex-direction: column-reverse; }
  .confirm-fenetre__actions .btn { width: 100%; text-align: center; }
}

/* ============================================================================
   PAGE D'ACCUEIL — direction artistique « Néon de scène »
   ----------------------------------------------------------------------------
   La charte existait et ne servait que dans le bandeau du haut : après lui, la
   page redevenait crème plat et cartes blanches. Les visuels Instagram, eux,
   ont de la profondeur et de la lumière. On ramène ce traitement dans la page.

   LE HALO SIGNATURE est repris à l'identique de reseaux-sociaux/visuels/
   og-image.svg, où il est écrit en vecteur : radial posé à 78 % / 18 %, néon
   #FF5FD0 à 45 % d'opacité, fuchsia #C4188F à 15 % à mi-course, fondu dans la
   nuit. Reproduit en CSS et non collé en image : net partout, quelques lignes
   au lieu d'un mégaoctet, et il suit la taille de la fenêtre.
   ========================================================================== */
.vitrine-nuit,
.vitrine-hero,
.vitrine-scene {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(70% 70% at 78% 18%,
      rgba(255, 95, 208, .45), rgba(196, 24, 143, .15) 45%, rgba(30, 16, 48, 0) 100%),
    linear-gradient(180deg, #241436 0%, var(--nuit) 100%);
}
/* Sur-titre des visuels Instagram : fuchsia, capitales espacées, discret et
   reconnaissable. C'est la signature typographique de la marque. */
.vitrine-kicker {
  font-family: var(--font-titres); font-weight: 800;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--action-neon); margin: 0 0 14px;
}
.vitrine-titre--clair { color: #fff; }
/* La porte de l'ACHETEUR sur une page qui parle aux organisateurs : présente,
   nommée, et assez discrète pour ne pas concurrencer l'action principale. */
.vitrine-hero__public { margin: 18px 0 0; }
.vitrine-hero__public a {
  color: rgba(255, 255, 255, .72); font-size: var(--t-second);
  text-decoration: underline; text-underline-offset: 3px;
}
.vitrine-hero__public a:hover { color: #fff; }

/* --- Les affiches, la preuve --------------------------------------------- */
.vitrine-scene { padding: 58px 24px 64px; border-radius: 28px; margin-top: 34px; text-align: center; }
.vitrine-affiches {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 22px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 230px));
}
.vitrine-affiches a { text-decoration: none; color: inherit; display: block; }
.vitrine-affiche__image {
  display: block; aspect-ratio: 2 / 3; border-radius: var(--rayon-petit);
  overflow: hidden; background: rgba(255, 255, 255, .06);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}
.vitrine-affiche__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine-affiches a:hover .vitrine-affiche__image { transform: translateY(-3px); }
.vitrine-affiche__image, .vitrine-affiches a:hover .vitrine-affiche__image { transition: transform .18s ease; }
.vitrine-affiche__vide { display: grid; place-items: center; height: 100%; color: rgba(255, 255, 255, .35); }
.vitrine-affiche__vide .ico { width: 40px; height: 40px; }
.vitrine-affiche__titre { display: block; margin-top: 12px; font-weight: 700; font-size: var(--t-second); }
.vitrine-affiche__meta { display: block; color: rgba(255, 255, 255, .68); font-size: var(--t-meta); }
.vitrine-scene__lien { margin: 30px 0 0; }
.vitrine-scene__lien a { color: var(--action-neon); font-weight: 700; text-decoration: none; }
.vitrine-scene__lien a:hover { text-decoration: underline; }

/* --- En-tête qui parle aux organisateurs ---------------------------------- */
.nav__creer { margin-left: 16px; padding: 9px 18px; font-size: 14px; }
@media (max-width: 820px) {
  /* Uniquement sur l'en-tête de la PAGE D'ACCUEIL (.nav--orga) : trois éléments
     n'y tiennent pas. L'inscription reste (c'est l'action), la connexion reste
     (c'est le client qui revient), le catalogue part — le hero porte déjà
     « Vous cherchez un spectacle ? ».
     Cette règle a d'abord été écrite sans `--orga` : elle masquait alors le lien
     du catalogue sur TOUTES les pages, y compris les fiches spectacle où c'est
     le seul retour possible pour un acheteur. */
  .nav--orga a[href="/spectacles"] { display: none; }
  .nav--orga .nav__creer { margin-left: 10px; padding: 8px 14px; }
}
@media (max-width: 640px) {
  /* À 375 px, le logo et les DEUX boutons ne tiennent pas : « Créer ma
     billetterie » débordait de l'écran, coupé net.
     C'est lui qu'on retire, et non « Se connecter » — à l'inverse de ce que
     l'instinct souffle. Le nouveau venu a déjà un immense « Créer ma
     billetterie » trois cents pixels plus bas, dans le hero. Le client qui
     REVIENT, lui, n'a que cette porte-là : la lui enlever, c'est le renvoyer
     chercher au fond du pied de page. Entre une action offerte deux fois et
     une porte unique, on garde la porte. */
  .nav--orga .nav__creer { display: none; }
}
/* Identité légale condensée en pied de page (licences d'entrepreneur de
   spectacles comprises : leur affichage est obligatoire). Discrète, mais
   présente sur toutes les pages. */
.pied__legal {
  margin: 10px 0 0; font-size: var(--t-mention); line-height: 1.5;
  color: var(--encre-douce); max-width: 760px;
}
.pied__legal a { color: inherit; text-decoration: underline; }
.vitrine-final__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 0; }

/* --- Le hero montre le produit -------------------------------------------
   La page affirmait et ne montrait rien. On dessine le module de réservation
   EN HTML plutôt que de coller une capture : net sur tous les écrans, rien à
   télécharger, et il suit le produit si le produit change.
   Deux colonnes seulement quand il y a la place. En dessous, la démonstration
   passe sous le texte : sur un téléphone, c'est le titre et le bouton qui
   doivent arriver en premier. */
/* Hero en DEUX COLONNES : le texte à gauche, ce que voit le public à droite.
   Essai fait de mettre le logo en grand à la place et de déplacer la maquette
   plus bas — plus joli, mais Val a préféré celle-ci : le produit se montre dès
   le premier écran. */
.vitrine-hero--deux { text-align: left; }
.vitrine-hero--deux .vitrine-hero__inner { max-width: 1080px; }
@media (min-width: 940px) {
  .vitrine-hero--deux {
    display: flex; align-items: center; justify-content: center; gap: 56px;
    padding-left: 40px; padding-right: 40px;
  }
  /* « Remplissez la salle. » doit tenir sur UNE ligne : le titre est une
     affiche, et une affiche cassée au milieu d'une phrase perd sa force. D'où
     une colonne de texte large, et la maquette qui cède la place. */
  .vitrine-hero--deux .vitrine-hero__inner { flex: 1 1 620px; max-width: 640px; margin: 0; min-width: 0; }
  .vitrine-hero__marque { flex: 0 1 420px; min-width: 300px; }
}
@media (max-width: 939px) {
  /* Une seule colonne : on recentre, et la maquette passe sous le texte — sur
     un téléphone, c'est le titre et le bouton qui doivent arriver en premier. */
  .vitrine-hero--deux { text-align: center; }
  .vitrine-hero--deux .vitrine-hero__inner { margin: 0 auto; }
  /* Une seule colonne : le logo repasse AU-DESSUS du texte, comme avant —
     c'est lui qui doit accueillir, pas un bloc posé après le bouton. */
  .vitrine-hero--deux { display: flex; flex-direction: column-reverse; }
  .vitrine-hero__marque { max-width: 300px; margin: 0 auto 26px; }
}
.vitrine-hero__marque { position: relative; z-index: 1; text-align: center; }
.vitrine-hero__marque img { width: 100%; height: auto; display: block; }

/* L'en-tête est collant : sans cette marge, une ancre amène le titre visé
   DERRIÈRE lui. La règle ne couvrait que les deux raccourcis de la page
   d'accueil — et « Choisir mes places » (#seances, sur la fiche spectacle)
   tombait dans le même trou : sur téléphone, la date visée arrivait à moitié
   cachée sous la barre. Elle vaut maintenant pour toute cible d'ancre. */
:target { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 1100px) {
  /* Cinq éléments ne tiennent plus : les raccourcis partent en premier — on
     peut toujours faire défiler la page — et on garde les deux portes. */
  .nav--orga .nav__ancre { display: none; }
}
/* Administration de la plateforme : le lien le plus discret du pied de page.
   Il ne sert qu'à Val, et il n'a pas à retenir l'œil d'un acheteur. */
.pied__liens a.pied__lien-admin { color: var(--encre-douce); opacity: .65; }
.pied__liens a.pied__lien-admin:hover { color: var(--violet); opacity: 1; }
/* Actions d'un plan de salle (admin) : le bouton et l'explication sur une
   ligne, l'aide en retrait pour ne pas peser autant que l'action. */
.plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; }
.plan-actions .champ-aide { margin: 0; flex: 1 1 260px; }

/* --- À faire ---------------------------------------------------------------
   La liste des tâches en attente, en tête du tableau de bord. Elle n'existe
   que lorsqu'il y a quelque chose : une liste vide qui s'affiche quand même
   apprend à ne plus la regarder.

   L'urgent (une provision qui bloque le remboursement de quelqu'un) porte un
   liseré ambre et un bouton plein. Pas de rouge : rien ici n'est une erreur —
   ce sont des choses à faire, pas des choses ratées. */
.afaire {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-douce);
  padding: 20px 22px; margin: 0 0 24px;
}
.afaire__tete { margin-bottom: 14px; }
.afaire__tete h2 { margin: 0 0 2px; }
.afaire__tete .espace-sous { margin: 0; }
.afaire__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.afaire__item {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--violet-pale); border-radius: var(--rayon-petit);
  border-left: 4px solid transparent; padding: 14px 16px;
}
.afaire__item--urgent { background: var(--attention-pale); border-left-color: var(--attention); }
.afaire__ico { display: flex; color: var(--encre-douce); flex: 0 0 auto; }
.afaire__item--urgent .afaire__ico { color: var(--attention-texte); }
.afaire__texte { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.afaire__titre { color: var(--encre); }
.afaire__detail { font-size: 14px; color: var(--encre-douce); line-height: 1.45; }
.afaire__item--urgent .afaire__detail { color: var(--attention-texte); }

@media (max-width: 640px) {
  /* Le bouton passe sous le texte et prend toute la largeur : sur un téléphone,
     c'est la cible qu'on cherche. */
  .afaire__item .btn { flex: 1 0 100%; text-align: center; }
}

/* Les remboursements dans la comptabilité : la recette affichée en est déjà
   nette, donc sans cette mention le total des frais paraît disproportionné. Un
   ton discret mais distinct — c'est une explication, pas une alerte. */
.compta-chiffre__detail--rendu { color: var(--attention-texte); }
/* La note qui explique une commission gonflée par des billets remboursés. */
.compta-reversement__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--attention-texte); line-height: 1.4; }

/* ==========================================================================
   AUDIT D'ERGONOMIE DU 2026-09-01 — les corrections du parcours d'achat.
   Mesures prises sur un écran de 360 x 780, le format d'arrivée depuis un
   lien de réseau social.
   ========================================================================== */

/* --- UX-01 : le prix AVANT l'affiche --------------------------------------
   Le premier prix apparaissait à 1 022 px, soit 242 px sous le premier écran,
   parce que l'affiche occupait 360 px (46 % de la hauteur). Le public arrive
   d'Instagram avec une seule question — combien, et reste-t-il de la place —
   et la décision de rester se prend en deux secondes. */
.fiche__resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 10px 0 0; font-size: 17px; font-weight: 600; color: var(--encre);
}
.fiche__resume-prix { color: var(--action); font-weight: 800; }
.fiche__resume-date { color: var(--encre-douce); font-weight: 600; }
.fiche__resume-autres { color: var(--encre-douce); font-weight: 400; }
.fiche__resume .badge { font-size: var(--t-meta); }

/* L'affiche reste le cœur émotionnel de la page, mais elle ne doit plus
   repousser le prix hors de l'écran. 240 px suffisent à la reconnaître. */
@media (max-width: 480px) {
  .fiche__affiche img { max-height: 240px; width: auto; margin-inline: auto; display: block; }
}

/* --- UX-03 : un bouton désactivé doit rester LISIBLE ----------------------
   « Réserver mes places » attend qu'une place soit choisie. Son libellé était
   en #948699 sur #EDE3E9, soit 2,74:1 — le seul défaut de contraste des 260
   textes de la page. Un bouton gris pâle ne se lit pas « il manque une étape »
   mais « cette page ne marche pas ». #6B5A78 porte le rapport à 5,0:1.
   La règle vaut pour TOUS les boutons désactivés du site. */
:root { --desactive-tx: #6B5A78; }

/* --- UX-04 : les cibles tactiles de l'en-tête -----------------------------
   « Spectacles » faisait 70 x 17 px et « Mes billets » 68 x 17. Or « Mes
   billets » se presse d'une main, dans le noir, à l'entrée de la salle. Le
   rembourrage est transparent : rien ne change à l'œil. */
.nav a { display: inline-block; padding-block: 14px; }
.logo { min-width: 44px; min-height: 44px; }

/* --- UX-05 : le fil des étapes tient sur une ligne ------------------------
   Sous 420 px, « 1 Vos coordonnées — 2 Paiement — 3 Vos billets » débordait :
   le « 3 » basculait seul sur une seconde ligne, précédé d'un tiret orphelin,
   sur les quatre écrans du tunnel — dont celui où l'on sort sa carte.
   Les libellés sont MASQUÉS À L'ŒIL, jamais retirés : la règle existante les
   supprimait avec `display: none`, ce qui les ôtait aussi aux lecteurs
   d'écran. Ici ils restent annoncés. */
@media (max-width: 560px) {
  .tunnel-etape--a-venir .tunnel-etape__nom {
    display: inline-block;
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 420px) {
  .tunnel-etapes { flex-wrap: nowrap; gap: 6px; }
  .tunnel-etape__nom {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .tunnel-etape + .tunnel-etape::before { width: 18px; margin-right: 0; }
}

/* --- UX-06 : les <small> non stylés ---------------------------------------
   Ils tombaient à 13,3333 px, la valeur par défaut du navigateur, seule taille
   du site à ne venir d'aucun jeton. (14,5 px, lui, EST un jeton déclaré —
   --t-second — utilisé partout : il reste.) */
small { font-size: var(--t-meta, 13px); }

/* --- O-02 : les trois chiffres en tête du tableau de bord ------------------
   Le sous-titre promettait « Vue d'ensemble de vos ventes » au-dessus d'une
   simple liste d'événements. Les chiffres étaient dans les cartes : avec un
   spectacle on additionne de tête, avec dix on ouvre Statistiques. */
/* Ce que compte la ligne de chiffres : tous les événements (2026-09-10). */
.bilan-tete__portee {
  margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--encre-douce);
}
.bilan-tete__portee strong { font-weight: 700; color: var(--encre); }
/* Le descriptif de l'événement, en tête de la Boutique (2026-09-10). */
.bq-descriptif { margin: 0 0 16px; }
.bq-descriptif__titre { font-family: var(--font-titres); font-weight: 800; font-size: 1.05rem; color: var(--encre); }
.bq-descriptif textarea { width: 100%; box-sizing: border-box; min-height: 160px; font: inherit; line-height: 1.5; }
.bilan-tete {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 0 0 22px;
}
.bilan-tete__chiffre {
  flex: 1 1 180px; min-width: 160px;
  background: #FFFFFF; border-radius: 16px; padding: 16px 18px;
  box-shadow: rgba(36, 20, 54, 0.07) 0 2px 10px 0;
}
.bilan-tete__n {
  display: block; font: 800 26px 'Figtree', Arial, sans-serif;
  color: var(--action); line-height: 1.15;
}
.bilan-tete__n--date { font-size: 21px; color: var(--encre); }
.bilan-tete__lib {
  display: block; margin-top: 4px;
  font-size: var(--t-meta); color: var(--encre-douce); line-height: 1.4;
}
.bilan-tete__lib small { color: var(--encre-douce); }

/* --- O-01 : la barre de signature du contrat ------------------------------
   Le bouton « Signer le contrat » était à 3 329 px, après 4,5 écrans de texte
   juridique — sur le tout premier écran d'un nouvel organisateur. */
.contrat-barre {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 -18px; padding: 14px 18px;
  background: #FFFFFF; border-top: 1px solid var(--bordure);
  box-shadow: rgba(30, 16, 48, 0.14) 0 -4px 18px 0;
}
.contrat-barre__txt { font-weight: 700; color: var(--encre); }
@media (max-width: 560px) {
  .contrat-barre { flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
}

/* --- Le tableau des tarifs défile sur lui-même sur petit écran -------------
   Mesuré à 390 px : la table occupait 557 px et emportait TOUTE la page de côté
   (207 px de débordement) — le seul écran de l'espace dans ce cas. On garde la
   largeur du tableau, mais c'est lui qui glisse, pas la page.
   (Ce bloc était écrit deux fois à l'identique — le doublon est retiré.) */
.tarifs-table-cadre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- LE TABLEAU DES TARIFS SUR TÉLÉPHONE : UNE CARTE PAR TARIF ------------
   Le faire glisser de côté ne suffisait pas. Mesuré à 375 px le 2026-09-07 :
   549 px de tableau dans 303 px de cadre, « NOM DU TARIF » cassé sur trois
   lignes, le prix coupé en plein milieu, et les colonnes Quantités et Actions
   entièrement derrière le bord — donc « modifier un tarif » hors d'atteinte
   tant qu'on n'avait pas deviné qu'il fallait pousser le tableau du doigt.
   Quatre colonnes, c'est peu : chaque ligne devient une petite carte, où le nom
   du tarif fait le titre et où chaque valeur porte l'étiquette de sa colonne
   (l'en-tête, lui, n'a plus rien à tenir et disparaît). Aucune donnée n'est
   retirée — c'est la même ligne, dépliée. */
@media (max-width: 820px) {
  .tarifs-table-cadre { overflow-x: visible; }
  .tarifs-table, .tarifs-table tbody, .tarifs-table tr, .tarifs-table td { display: block; width: auto; }
  .tarifs-table thead { display: none; }
  .tarifs-table tr {
    padding: 14px 2px; border-bottom: 1px solid var(--violet-pale);
  }
  .tarifs-table tr:last-child { border-bottom: none; }
  .tarifs-table td { padding: 0; text-align: left; border: none; }
  .tarifs-table td.num { text-align: left; }
  /* Chaque valeur annonce de quelle colonne elle vient. */
  .tarifs-table td[data-col] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; }
  .tarifs-table td[data-col]::before {
    content: attr(data-col); flex: 0 0 auto;
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--encre-douce);
  }
  /* La mention « l'acheteur paie… » passe à la ligne, sous le prix. */
  .tarifs-table td[data-col] small { flex: 1 0 100%; }
  /* Modifier et supprimer, côte à côte au bas de la carte. */
  .tarifs-table td.tarifs-table__act { display: flex; gap: 8px; margin-top: 12px; }
}

/* --- LE TABLEAU GÉNÉRIQUE DE L'ESPACE NE POUSSE PLUS LA PAGE DE CÔTÉ -------
   `.table-orga` sert dans neuf écrans (abonnements, codes de réduction, liste
   d'attente, envois, liens de promotion, ventes par lien, impression de stock…)
   et aucun ne l'enveloppait dans un cadre défilant. Mesuré le 2026-09-07 sur les
   Abonnements : 447 px de tableau dans 375 px d'écran — c'est la PAGE ENTIÈRE
   qui partait de côté, titres et menu compris. Le tableau glisse maintenant sur
   lui-même ; la page, elle, ne bouge plus. */
@media (max-width: 820px) {
  .table-orga { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- DIRE QU'UN TABLEAU CONTINUE À DROITE ---------------------------------
   Un tableau qui ne tient pas glisse dans son cadre, ce qui est la bonne
   solution — mais rien ne le disait. Mesuré le 2026-09-07 à 375 px : sur les
   Tarifs, seule la colonne « Nom du tarif » était visible ; Prix, Quantités et
   Actions attendaient derrière le bord droit, sans le moindre signe. Même chose
   sur le détail comptable d'un événement.
   L'ombre ci-dessous n'apparaît qu'au bord vers lequel il RESTE du contenu, et
   s'efface quand on est au bout. Aucun script : les deux dégradés blancs sont
   attachés au contenu (« local ») et glissent avec lui pour masquer les ombres,
   qui, elles, restent collées au cadre (« scroll »). */
.tarifs-table-cadre, .table-defilante, .tableau-large, .table-orga {
  background:
    linear-gradient(to right, var(--carte), transparent) left center,
    linear-gradient(to left, var(--carte), transparent) right center,
    radial-gradient(farthest-side at 0 50%, rgba(74,35,90,.20), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(74,35,90,.20), transparent) right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* --- Aller au contenu -----------------------------------------------------
   Sur l'écran Tarifs, il fallait 23 tabulations pour atteindre le premier champ
   (mesuré) : le menu global puis celui de l'événement, en entier, à chaque
   chargement. Le lien ne se voit qu'une fois qu'il a le focus — il ne change
   rien pour qui utilise la souris. */
.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--action); color: #FFFFFF;
  padding: 12px 20px; border-radius: 0 0 12px 0;
  font-weight: 700; text-decoration: none;
}
.lien-evitement:focus {
  left: 0; outline: 3px solid var(--encre); outline-offset: 2px;
}

/* --- Un spectacle qui s'est joué -------------------------------------------
   Remplace le « Ce spectacle n'existe pas » que recevait quiconque ouvrait un
   lien partagé après la dernière date. La page lève le doute, puis propose la
   suite. */
.passe { max-width: 640px; margin: 0 auto; padding: 8px 0 48px; text-align: center; }
.passe__affiche img { max-height: 260px; width: auto; border-radius: 12px; margin: 0 auto 18px; display: block; }
.passe__orga { color: var(--encre-douce); font-weight: 600; margin-top: -6px; }
.passe__quand { font-size: 17px; margin-top: 18px; }
.passe__note { color: var(--encre-douce); margin-top: 2px; }
.passe__suite-titre { margin-top: 34px; font-size: 19px; }
.passe__suite { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.passe__suite a {
  display: block; background: #FFFFFF; border-radius: 12px; padding: 14px 16px;
  text-decoration: none; color: var(--encre);
  box-shadow: rgba(36, 20, 54, 0.07) 0 2px 10px 0;
}
.passe__suite a:hover { box-shadow: rgba(36, 20, 54, 0.14) 0 4px 16px 0; }
.passe__date { display: block; margin-top: 3px; color: var(--action); font-weight: 600; font-size: var(--t-meta); }
.passe__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* --- LE VISUEL DE COUVERTURE ET LA CARTE DES FAITS -----------------------
   Val, le 2026-09-02 : « il faut beaucoup trop scroller pour avoir toutes les
   informations », puis, en montrant une page de billetterie qu'elle admire,
   « j'aimerais bien pouvoir faire ça ».

   Ce que ce modèle fait, et qui marche : une image large qui pose l'ambiance,
   puis une carte compacte, à cheval dessus, qui porte tout ce qui fait décider
   — qui présente, quand, où, combien de temps, à partir de quel âge, à quel
   prix. On décide sans défiler.

   Ce qu'on n'en reprend PAS : ses couleurs. La mise en page est un savoir-faire
   partagé, l'identité ne se copie pas.

   Le bandeau tient dans la largeur de la page plutôt que d'aller d'un bord à
   l'autre de l'écran : le plein écran s'obtient avec `100vw`, qui compte la
   barre de défilement et fait déborder la page vers la droite. Le gain
   visuel ne valait pas ce défaut-là. */
/* LE BANDEAU DÉBORDE LA COLONNE DE TEXTE, UN PEU.
   Val : « je pense qu'on peut légèrement agrandir le visuel en largeur ». La
   page tient dans 1040 px parce que c'est la largeur où une ligne de texte se
   lit sans fatigue ; une image n'a pas cette contrainte. Elle va donc jusqu'à
   1280 px, centrée — « légèrement », pas d'un bord à l'autre de l'écran : le
   plein écran s'obtient avec 100vw, qui compte la barre de défilement et fait
   déborder la page vers la droite. Le `- 32px` garde cette marge de sécurité. */
.fiche__couverture {
  margin: 10px 0 0;
  display: flex; justify-content: center;
  width: min(1280px, calc(100vw - 32px));
  margin-left: 50%; transform: translateX(-50%);
}
.fiche__couverture img {
  display: block;
  max-width: 100%; width: auto;
  height: auto;
  /* ON RÉDUIT, ON NE ROGNE PAS — et la nuance est tout le sujet.
     Trois versions ont échoué à vouloir tenir l'image dans un cadre : plafond
     de hauteur, carte posée par-dessus, rapport 16:9 imposé. Chaque fois, ce
     qui dépassait était COUPÉ, et c'était toujours les coins — là où Val écrit
     le nom de la salle et l'heure.
     La quatrième laisse l'image entière et la fait simplement plus petite : la
     hauteur est plafonnée, mais la largeur suit (`width: auto`), donc l'image
     se réduit au lieu d'être cognée. Val, en voyant la version sans plafond :
     « c'est trop grand, ça prend trop de place ». Les deux exigences tiennent
     ensemble à cette condition-là, et à elle seule. */
  /* 440 px, et ce n'est pas un chiffre rond pour rien : c'est la hauteur d'une
     image au format conseillé (1920 × 640, soit 3:1) affichée sur 1280 px de
     large — 427 px. Le plafond la laisse donc remplir toute la largeur, et ne
     se referme que sur les autres formats, qu'il RÉDUIT au lieu de les couper.
     Plus plat (4:1) l'image deviendrait une bande où une affiche ne respire
     plus ; plus haut (2:1), on repousse le titre et la réservation hors du
     premier écran d'un portable — le reproche de départ. */
  max-height: 440px;
  border-radius: var(--rayon);
}


/* LA CARTE MORD SUR LE BANDEAU — 48 px, et le gabarit le dit.
   Trois temps. Elle remontait d'abord de 56 px, et masquait « 20H00 », écrit
   par Val dans le coin bas droit de son visuel : je l'ai posée dessous. Puis
   Val : « peut-être la décale un peu », d'où 20 px. Puis : « si on fait en
   sorte que ton bandeau mange un peu sur le visuel pour que ce soit plus
   esthétique, tu peux me donner un gabarit à respecter ».

   C'est la bonne façon de poser la question. Le chevauchement n'est pas
   dangereux en soi : il l'est quand personne ne sait ce qu'il couvre. 48 px à
   l'écran, sur une image de 1920 px affichée au plus large sur 1280, font
   72 px dans le fichier — et jusqu'à ~95 px sur un écran plus étroit, où
   l'image est réduite davantage. Le gabarit marque donc une bande de 120 px en
   bas : le pire cas, plus une marge. */
.fiche__titre-haut--couv {
  position: relative; z-index: 1;
  margin: -48px 0 24px;
  padding: 22px 24px 22px;
  background: var(--carte); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
}
@media (max-width: 700px) {
  /* Sur un téléphone, la carte occupe presque toute la largeur : 48 px de
     remontée mangeraient un coin entier de l'image. */
  .fiche__titre-haut--couv { margin: -14px 0 20px; padding: 18px 18px 20px; }
}


/* Durée et âge, sur la carte de la séance : une ligne discrète, sous le lieu. */
.seance__pratique {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 0; font-size: 15px; color: var(--encre-douce);
}
.seance__pratique svg { width: 16px; height: 16px; }
.seance__pratique-sep { color: var(--encre-douce); opacity: .6; }

@media (max-width: 700px) {
  .fiche__titre-haut--couv { margin: 12px 0 20px; padding: 18px 18px 20px; }
}

/* Les faits : deux colonnes tant qu'il y a la place, une seule ensuite.
   `auto-fit` évite d'avoir à compter les faits — un spectacle sans durée ni
   âge en a deux, un autre en a quatre. */
.fiche__faits {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 28px;
}
.fiche__fait {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--encre); line-height: 1.35;
}
.fiche__fait-ico { flex: 0 0 auto; color: var(--action); margin-top: 1px; }
.fiche__fait-ico svg { width: 18px; height: 18px; display: block; }
.fiche__fait strong { font-weight: 700; }
/* La précision (adresse, âge, « le lieu dépend de la date ») passe à la ligne
   et s'efface : elle complète le fait, elle ne le concurrence pas. */
.fiche__fait-plus { display: block; color: var(--encre-douce); font-weight: 400; }
.fiche__fait-lien {
  display: inline-block; margin-top: 2px; font-size: 14px; font-weight: 600;
}
.fiche__resume-cta { margin-left: auto; }
/* Au-delà de 900 px, l'encadré de réservation est déjà côte à côte avec
   l'affiche, donc visible sans rien faire : le bouton y ferait doublon. */
@media (min-width: 901px) { .fiche__resume-cta { display: none; } }
/* Sur un téléphone, le prix, l'indicateur et le bouton passent chacun à la
   ligne : un bouton d'action posé de travers en bout de ligne se rate. */
@media (max-width: 560px) {
  .fiche__resume-cta { margin-left: 0; width: 100%; justify-content: center; }
}

/* OUVRIR PAR VAGUES — « Ouvrir à une partie seulement ».
   Replié par défaut : le geste courant reste d'ouvrir à toute la liste, et un
   champ toujours visible inviterait à fractionner sans raison. */
.avp-vague { margin-top: 14px; }
.avp-vague > summary {
  cursor: pointer;
  font: 600 14px var(--font-titres);
  color: var(--action);
  padding: 6px 0;
}
.avp-vague > summary:hover { color: var(--action-fonce); }
.avp-vague__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.avp-vague__form label { font: 600 14px var(--font-titres); color: var(--encre); }
/* Chiffres tabulaires : un nombre se lit, il ne se devine pas. */
.avp-vague__form input[type="number"] {
  width: 90px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .avp-vague__form { flex-direction: column; align-items: stretch; }
  .avp-vague__form input[type="number"] { width: 100%; }
}

/* L'heure à laquelle une personne a été prévenue, sous son état : discrète,
   mais c'est elle qui distingue une vague d'ouverture de la suivante. */
.avp-quand { display: block; margin-top: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }

/* Un lien de campagne dans un tableau. Une adresse porteuse de quatre
   paramètres fait 130 caractères : sans coupure autorisée, elle pousse la
   colonne « Action » hors de l'écran et le tableau défile latéralement pour une
   seule cellule. `anywhere` coupe où il faut, y compris au milieu d'un mot —
   c'est acceptable pour une adresse, jamais pour du texte lu. */
.lien-trace{
  display:block; font-size:12.5px; line-height:1.5;
  overflow-wrap:anywhere; word-break:break-word;
  color:var(--encre-douce);
}

/* BANDEAU DE CONSENTEMENT PUBLICITAIRE.

   AUSSI PLAT QUE POSSIBLE. Il est posé en bas de l'écran, donc il recouvre
   toujours quelque chose : sur une fiche spectacle, c'était les tarifs et le
   sélecteur de quantité — on demandait la permission de mesurer en cachant ce
   que le visiteur était venu faire. Une seule rangée sur grand écran : le
   texte, puis les deux boutons. Environ 70 px au lieu de 250.

   Les deux boutons ont EXACTEMENT le même poids visuel : la CNIL demande que
   refuser soit présenté « au même niveau et dans un format similaire »
   qu'accepter, et ça se vérifie à l'œil. */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--carte); color:var(--encre);
  border-top:1px solid var(--action-pale);
  box-shadow:0 -6px 24px rgba(30,16,48,.14);
  padding:12px clamp(14px, 4vw, 28px);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.consent__txt{ margin:0; flex:1 1 320px; font-size:13.5px; line-height:1.45; color:var(--encre-douce); }
.consent__actions{ display:flex; gap:10px; flex-shrink:0; }
.consent__btn{ min-width:120px; justify-content:center; }
.consent__lien{ font-size:12.5px; color:var(--encre-douce); flex-shrink:0; }

@media (max-width:640px){
  .consent{ padding:14px 16px; }
  .consent__actions{ width:100%; }
  /* `flex:1 1 0` : les deux boutons occupent exactement la même largeur, quelle
     que soit la longueur du mot. « Accepter » ne doit pas paraître plus gros
     que « Refuser » par accident de typographie. */
  .consent__btn{ flex:1 1 0; min-width:0; }
}

/* Pendant que le bandeau est affiché, on réserve sa hauteur en bas de page pour
   que le dernier élément reste atteignable une fois arrivé en bas. */
/* LA PLACE RÉSERVÉE SOUS LE BANDEAU DE CONSENTEMENT.
   Elle valait 90 px, 150 px sur petit écran — des nombres écrits à la main.
   Mesuré le 2026-09-07 sur un écran de 375 px : le bandeau en faisait 180.
   Trente pixels de page passaient dessous, et l'écart grandit encore sur un
   écran plus étroit, où le texte tient sur plus de lignes.
   `--h-consent` est donc déclarée ici avec les anciennes valeurs comme point de
   départ — elles servent si le script ne tourne pas — et consentement.js la
   remplace par la hauteur RÉELLE du bandeau, mesurée une fois posé. */
:root { --h-consent: 90px; }
@media (max-width:640px){ :root { --h-consent: 150px; } }
body.a-consent{ padding-bottom: var(--h-consent); }

/* --- MON ARGENT : la saisie dans le tableau -------------------------------
   Trois relevés à noter par journée, sur une ligne déjà dense. Les champs sont
   donc étroits et alignés à droite comme les montants qu'ils portent : l'œil
   descend une colonne de chiffres sans buter sur des boîtes de largeurs
   différentes. */
.tableau--argent .saisie-argent,
.tableau--argent .saisie-date,
.tableau--argent .saisie-ref {
  width: 100%; max-width: 120px; padding: 5px 7px;
  border: 1px solid var(--violet-pale); border-radius: var(--rayon-petit);
  font-family: var(--font-texte); font-size: 13px; background: var(--carte);
}
.tableau--argent .saisie-argent { text-align: right; font-variant-numeric: tabular-nums; }
.tableau--argent .saisie-date { margin-top: 4px; font-size: 12px; }
.tableau--argent .saisie-ref { max-width: 140px; text-align: left; font-size: 12px; }
.tableau--argent td { vertical-align: top; }

/* LES TROIS ÉTATS D'UNE JOURNÉE, au liseré de gauche.
   Vert : tout est relevé, il n'y a plus rien à faire.
   Ambre : commencé, le reste est attendu — c'est normal, pas une alerte.
   Rien : journée vierge.
   Chaque état porte AUSSI son mot, en toutes lettres : une couleur seule ne se
   voit pas de la même façon pour tout le monde, et ne dit pas ce qui manque. */
.tableau--argent tr.ligne-complete > td:first-child { box-shadow: inset 3px 0 0 var(--succes); }
.tableau--argent tr.ligne-complete { background: var(--succes-pale); }
.tableau--argent tr.ligne-commencee > td:first-child { box-shadow: inset 3px 0 0 var(--attention); }
.etat-ligne { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; }
.etat-ligne--complete { color: var(--succes); }
.etat-ligne--commencee { color: var(--attention-texte); }

/* Une ligne dont les cases ont changé sans être enregistrées. Le rose est
   réservé à CE cas : c'est le seul qui appelle un geste. Il passe donc après les
   trois états ci-dessus, et les recouvre. */
.tableau--argent tr.ligne-modifiee > td:first-child { box-shadow: inset 3px 0 0 var(--action); }
.tableau--argent tr.ligne-modifiee { background: var(--action-pale); }
.tableau--argent tr.ligne-modifiee button[type="submit"] { animation: argent-attend 1.6s ease-in-out infinite; }
@keyframes argent-attend { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .tableau--argent tr.ligne-modifiee button[type="submit"] { animation: none; }
}

/* DEUX COMMISSIONS VOISINES, DEUX SENS OPPOSÉS.
   « Ma commission » est ce que Féemoi encaisse ; « Commission CAWL » est ce que
   la banque prélève. Nommées pareil et posées côte à côte, elles se
   confondaient. Trois marques les séparent : le sous-titre de l'en-tête, le
   signe, et un fond très léger — jamais la couleur seule. */
.tableau--argent .th-precision {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--encre-douce);
}
.tableau--argent .colonne-feemoi { background: rgba(214, 31, 145, .045); }
.tableau--argent .colonne-cawl { background: rgba(74, 35, 90, .05); }
.tableau--argent .montant-entrant { color: var(--action); }
.tableau--argent .signe-sortant {
  color: var(--encre-douce); font-weight: 700; margin-right: 3px;
  font-variant-numeric: tabular-nums;
}
/* Les états d'une ligne priment sur le fond des colonnes : une ligne modifiée ou
   enregistrée doit se lire d'un bout à l'autre, sans damier. */
.tableau--argent tr.ligne-complete .colonne-feemoi,
.tableau--argent tr.ligne-complete .colonne-cawl,
.tableau--argent tr.ligne-modifiee .colonne-feemoi,
.tableau--argent tr.ligne-modifiee .colonne-cawl { background: transparent; }

/* LE COMPTE EN CASCADE. Chaque marche se soustrait de la précédente : la lecture
   descend, les montants s'alignent à droite, et les deux moments qui comptent —
   le contrôle et le résultat — se détachent du reste. */
.cascade__ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--violet-pale);
}
.cascade__ligne:last-of-type { border-bottom: none; }
.cascade__libelle { font-size: 14.5px; }
.cascade__montant { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.cascade__signe { display: inline-block; width: 14px; color: var(--encre-douce); font-weight: 700; }
.cascade__ligne--retire .cascade__montant { color: var(--encre-douce); }
.cascade__ligne--sous-total { border-top: 1px solid var(--encre-douce); border-bottom: none; }
.cascade__ligne--sous-total .cascade__libelle { font-weight: 700; }
/* Le contrôle : c'est lui qui dit si l'on peut se fier au reste. */
.cascade__ligne--controle { border-top: 1px solid var(--encre-douce); margin-top: 2px; padding: 12px 0; }
.cascade__ligne--controle.est-juste { color: var(--succes); }
.cascade__ligne--controle.est-juste .cascade__montant { color: var(--succes); font-size: 17px; }
.cascade__ligne--controle.est-faux { color: var(--erreur-texte); }
.cascade__ligne--controle.est-faux .cascade__montant { color: var(--erreur-texte); font-size: 17px; }
.cascade__ligne--controle .txt-doux { display: block; font-weight: 400; }
/* Le résultat. */
.cascade__ligne--total {
  border-top: 2px solid var(--encre); margin-top: 4px; padding-top: 14px;
}
.cascade__ligne--total .cascade__libelle { font-family: var(--font-titres); font-size: 17px; font-weight: 800; }
.cascade__ligne--total .cascade__montant { font-family: var(--font-titres); font-size: 24px; color: var(--action); }
.cascade__note { margin-top: 12px; }
@media (max-width: 620px) {
  .cascade__ligne { flex-direction: column; gap: 2px; }
  .cascade__montant { align-self: flex-end; }
}

/* Le verdict ouvre la page : il doit se lire avant qu'on ait décidé de lire. */
.verdict { font-size: 15px; }
.verdict strong:first-child { font-family: var(--font-titres); }

/* LA LIGNE QU'ON VIENT D'ENREGISTRER. Le message en tête de page ne se voit pas
   quand on saisit en bas d'un tableau de trois mois : la confirmation doit se
   lire à l'endroit où l'on avait les yeux. Elle s'éteint d'elle-même, pour ne pas
   rester à crier une nouvelle qui n'en est plus une. */
.tableau--argent tr.ligne-vient-enregistree > td:first-child { box-shadow: inset 3px 0 0 var(--succes); }
.tableau--argent tr.ligne-vient-enregistree { animation: argent-enregistree 3.5s ease-out both; }
.etat-ligne--vient { color: var(--succes); }
@keyframes argent-enregistree {
  0%, 55% { background: var(--succes-pale); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .tableau--argent tr.ligne-vient-enregistree { animation: none; background: var(--succes-pale); }
}

/* LA CARTE D'ARGENT DU TABLEAU DE BORD (2026-09-09).
   Val : « j'aimerais l'avoir en dashboard également ». Trois montants en tête
   de la page la plus ouverte du back office : ce qui est entré, la commission,
   et ce que la maison garde. Le dernier est mis en avant — c'est celui qu'on
   vient chercher. */
.stats-cartes--argent { margin: 4px 0 6px; }
.stats-cartes--argent .stat-carte small { font-weight: 400; opacity: .85; }
.argent-lien { margin: 0 0 20px; }
/* LE RÉCAP DE L'ARGENT — tous les chiffres, tout le temps (2026-09-09).
   Val : « il faut que tu fasses ça pour une personne qui a besoin d'être cadrée,
   qui a besoin de voir tout le temps les chiffres, les récaps ». D'où un tableau
   déplié, jamais un accordéon : ce qui est à jour doit se voir autant que ce qui
   reste à faire — c'est ce qui permet de dire « j'ai tout viré ». */
.argent-titre { margin: 26px 0 10px; }
.tableau--argent th.groupe { text-align: center; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--encre-douce); border-bottom: var(--bordure-fine); }
.tableau--argent tfoot th, .tableau--argent tfoot td { border-top: 2px solid var(--action-pale); }
.argent-prod > td { background: var(--fond); }

/* L'ÉTAT SE LIT À LA COULEUR — ET IL EST ÉCRIT. Une couleur seule ne dit rien à
   qui ne la distingue pas, et Val l'a déjà relevé : « il faut changer la couleur
   quand c'est enregistré, car là on ne sait pas ». */
.argent-ligne--ajour > td:first-child { box-shadow: inset 3px 0 0 var(--succes); }
.argent-ligne--averser > td:first-child { box-shadow: inset 3px 0 0 var(--action); }
.argent-ligne--retenu > td:first-child { box-shadow: inset 3px 0 0 var(--attention); }
.etat-pastille { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; vertical-align: middle; }
.etat-pastille--ok { background: var(--succes-pale); color: var(--succes); }
.etat-pastille--afaire { background: var(--action-pale); color: var(--action-fonce); }
.etat-pastille--attente { background: var(--attention-pale); color: var(--attention-texte); }
/* LE BOUTON RESTE VISIBLE PENDANT QU'ON FAIT DÉFILER LES CHIFFRES.
   Dix colonnes ne tiennent pas sur un portable : le tableau défile, et le
   bouton « J'ai versé » sortait de l'écran par la droite. Val demandait « un
   tableau qui clique » — un bouton qu'il faut aller chercher ne clique pas.
   La colonne d'action se colle donc au bord droit, et son fond est opaque pour
   que les chiffres passent DERRIÈRE elle et non au travers. */
.argent-ligne__action {
  white-space: nowrap;
  position: sticky; right: 0;
  /* Le fond de la PAGE, pas le blanc des cartes : le tableau est posé à même
     la page, et un blanc pur y dessinait un rectangle visible par-dessus la
     colonne « Net ». Un fond opaque reste nécessaire — sans lui, les montants
     défileraient au travers du bouton. */
  background: var(--fond);
}
/* Les lignes paires portent leur propre teinte : la colonne collée doit la
   suivre, sinon elle laisse une bande claire au bout d'une ligne sur deux. */
.tableau--argent tbody tr:nth-child(even) .argent-ligne__action { background: #FFF8F5; }
/* Pas de teinte par état ici : les lignes n'en portent pas non plus, elles se
   distinguent par un trait à gauche. Ajouter une couleur de fond au seul bout
   de la ligne en inventerait une, et Val tient à ce que rien ne puisse être
   pris pour une alerte. */
/* La part retenue s'écrit sous le reste, en petit : c'est une explication,
   pas un chiffre de plus à additionner. */
.argent-ligne__retenu { font-size: .78rem; line-height: 1.3; margin-top: .15rem; }

/* LE BANDEAU DE L'ARGENT — l'identité là où la charte l'autorise.
   DESIGN.md réserve Young Serif au site public et l'interdit sur les chiffres :
   l'administration reste en Figtree. Mais le nuit aubergine y est prévu pour
   les bandeaux, et l'accent néon pour les fonds sombres. C'est donc ici, et
   nulle part ailleurs dans l'admin, que le produit peut se reconnaître. */
.bandeau-argent {
  background: var(--nuit);
  border-radius: var(--rayon);
  padding: 1.5rem 1.6rem 1.6rem;
  margin: 0 0 1.5rem;
}
.bandeau-argent h1 { color: #FFF7F3; margin: 0 0 1.1rem; }
.bandeau-argent .stats-cartes { margin: 0; }
/* Les cartes deviennent des blocs posés sur la nuit : plus de fond blanc, plus
   d'ombre — une ombre sur du sombre ne se voit pas, elle salit. */
.bandeau-argent .stat-carte {
  background: var(--nuit-clair); border-color: transparent; box-shadow: none;
}
.bandeau-argent .stat-valeur { color: #FFF7F3; }
.bandeau-argent .stat-libelle { color: #C9B6D6; }
.bandeau-argent .stat-libelle small { color: #A793B8; }
/* Le chiffre qui compte porte l'accent néon — sa seule place légitime, la
   charte le réserve aux fonds sombres. */
.bandeau-argent .stat-carte--accent { background: var(--action); }
.bandeau-argent .stat-carte--accent .stat-valeur { color: #FFFFFF; }
.bandeau-argent .stat-carte--accent .stat-libelle,
.bandeau-argent .stat-carte--accent .stat-libelle small { color: #FBE3F4; }

/* LES VUES DE « MON ARGENT ». Une barre de liens, pas des onglets qui empilent :
   chaque lien charge sa page, et l'écran ne porte qu'un sujet. Le trait sous la
   vue courante la désigne sans couleur seule — l'attribut aria-current le dit
   aussi aux lecteurs d'écran. */
.vues-argent {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 1px solid var(--bordure);
  margin: 0 0 1.6rem;
}
.vues-argent a {
  padding: .55rem .9rem; text-decoration: none; color: var(--encre-douce);
  font-weight: 600; font-size: .95rem; border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.vues-argent a:hover { color: var(--encre); }
.vues-argent a.actif { color: var(--action); border-bottom-color: var(--action); }

/* L'ASSURANCE DANS LE TUNNEL. Encadrée pour se distinguer des cases
   obligatoires qui l'entourent : c'est une PROPOSITION, pas une condition à
   accepter. Elle n'emprunte donc ni la couleur d'accent (qui appellerait au
   clic) ni celle d'une alerte. */
.assurance-offre {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1rem 1.1rem .9rem;
  margin: 1.2rem 0;
  background: var(--carte);
}
.assurance-offre > legend {
  font-weight: 600;
  padding: 0 .4rem;
  font-size: .95rem;
}
.assurance-offre__mentions { margin: .6rem 0 0; font-size: .8rem; }
/* Le montant couvert : plus lisible que les mentions, moins que la case.
   C'est le chiffre que l'acheteur doit emporter, pas une note de bas de page. */
.assurance-offre__couvert { margin: .5rem 0 0; font-size: .88rem; }
.recap-assurance td { font-style: italic; }
.argent-verser { margin: 0; }

/* LES VENTES DU JOUR, AFFICHE PAR AFFICHE (2026-09-09).
   Le virement CAWL du jour ne se vérifie pas contre un total nu : il se vérifie
   contre la liste des spectacles qui l'ont produit. Alignée à droite comme le
   montant qu'elle décompose, et discrète — c'est un appui de lecture, pas une
   seconde colonne. */
.jour-spectacles { list-style: none; margin: 4px 0 0; padding: 0;
  font-size: 12px; color: var(--encre-douce); font-weight: 400; }
.jour-spectacles li { display: flex; justify-content: flex-end; gap: 8px;
  align-items: baseline; }
.jour-spectacles a { color: inherit; text-decoration: none; }
.jour-spectacles a:hover { color: var(--action-fonce); text-decoration: underline; }
.jour-spectacles span { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   LE SUIVI DES VENTES — le document que lit le producteur.
   Val, le 2026-09-09 : « hyper classe, hyper propre, hyper claire ».
   Il n'administre rien : la page ne porte donc aucun bouton, aucun réglage,
   aucune couleur d'action. Ce qui reste doit tenir par la typographie et le
   blanc — et par un seul point d'accent, sur le montant qu'il vient chercher.
   --------------------------------------------------------------------------- */
.suivi { max-width: 1080px; margin: 0 auto; padding: 0 20px 80px; }

.suivi-tete { padding: 40px 0 28px; }
.suivi-tete__sur {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--action);
}
.suivi-tete h1 { margin: 0 0 6px; line-height: 1.1; }
.suivi-tete__date { margin: 0; color: var(--encre-douce); font-size: 14px; }

/* Trois chiffres, dont un seul compte vraiment. */
.suivi-chiffres {
  display: grid; gap: 14px; margin: 0 0 28px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.suivi-chiffre {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 20px 22px;
}
.suivi-chiffre__v {
  display: block; font-size: 30px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.suivi-chiffre__l { display: block; margin-top: 4px; font-size: 13px; color: var(--encre-douce); }
.suivi-chiffre--fort { background: var(--nuit); border-color: var(--nuit); }
.suivi-chiffre--fort .suivi-chiffre__v { color: #FFF7F3; }
.suivi-chiffre--fort .suivi-chiffre__l { color: #C9B6D6; }

.suivi-alerte {
  background: var(--attention-pale); color: var(--attention-texte);
  border-radius: var(--rayon-petit); padding: 12px 16px; margin: 0 0 28px; font-size: 14px;
}

.suivi-spectacle { margin: 0 0 36px; }
.suivi-spectacle h2 { margin: 0 0 2px; }
.suivi-spectacle__quand { margin: 0 0 12px; color: var(--encre-douce); font-size: 14px; }

.suivi-table { background: var(--carte); }
.suivi-table th, .suivi-table td { padding: 11px 12px; }
.suivi-table tfoot th { border-top: 2px solid var(--encre); font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--encre); }
.suivi-attente td { color: var(--encre-douce); font-style: italic; }
.suivi-canal {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--action-pale); color: var(--action-fonce);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.suivi-etiq {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--attention-pale); color: var(--ambre-texte);
  font-size: 11px; font-weight: 700;
}

/* Le total général : le seul bloc sombre de la page après l'entête. */
.suivi-total {
  background: var(--nuit); color: #F6EDF4; border-radius: var(--rayon);
  padding: 26px 28px; margin: 40px 0 24px;
}
.suivi-total h2 { margin: 0 0 16px; color: #FFF7F3; font-size: 20px; }
.suivi-total dl { margin: 0; }
.suivi-total dl > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 9px 0; border-bottom: 1px solid rgba(255, 247, 243, .12);
}
.suivi-total dt { color: #C9B6D6; }
.suivi-total dt small { color: #A793B8; }
.suivi-total dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.suivi-total__net { border-bottom: none !important; padding-top: 16px !important; }
.suivi-total__net dt { color: #FFF7F3; font-weight: 700; font-size: 18px; }
.suivi-total__net dd { color: var(--action-neon); font-size: 26px; font-weight: 800; }

.suivi-vide { color: var(--encre-douce); padding: 30px 0; }
.suivi-pied { margin-top: 30px; color: var(--encre-douce); font-size: 13px; }

/* La porte du suivi : un seul champ, rien autour. Le producteur n'a pas de
   compte à créer, pas de mot de passe à retrouver — il a une adresse et un
   mot de passe, et l'écran ne doit rien suggérer d'autre. */
.suivi-porte { max-width: 420px; margin: 0 auto; padding: 60px 20px 90px; }
.suivi-porte h1 { margin: 0 0 10px; }
.suivi-porte__form { margin: 22px 0 18px; display: flex; flex-direction: column; gap: 14px; }

/* La grille des tarifs : la règle du jeu, avant le score. Elle se distingue du
   détail des ventes par un fond légèrement posé — c'est une référence qu'on
   relit, pas un résultat qu'on parcourt. */
.suivi-grille { margin: 0 0 40px; }
.suivi-grille h2 { margin: 0 0 12px; font-size: 20px; }
.suivi-grille__note { margin: 8px 0 0; font-size: 13px; }

/* LA GRILLE DE SAISIE : UNE CARTE PAR ÉVÉNEMENT, UN GROUPE PAR TARIF.
   Val, le 2026-09-10 : « d'abord par événement, et à l'intérieur par tarif,
   qui lui se classe par plateforme », « afin que la différence de prix des
   commissions entre plateformes soit évidente ». L'événement garde le bandeau
   nuit (prévu pour les bandeaux, seul endroit sombre de l'écran) ; le tarif
   est nommé une fois, à gauche de ses plateformes. */
.grille-evenement {
  margin: 0 0 22px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--carte);
}
.grille-evenement__t {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0; padding: 12px 16px;
  background: var(--nuit); color: #FFF7F3;
  font-family: var(--font-titres); font-weight: 800; font-size: 16px;
  letter-spacing: .01em;
}
.grille-evenement__t .grille-evenement__n { color: #C9B6D6; font-weight: 500; font-size: 13px; }
.grille-evenement .table-defilante { margin: 0; }
.grille-evenement table { margin: 0; }
.grille-evenement thead th { background: var(--fond); }

/* Les plateformes déclarées d'une production, au-dessus de la grille : on les
   ajoute avant leur première vente, pour chiffrer leur commission à temps. */
.grille-plateformes {
  margin: 0 0 22px; padding: 14px 16px;
  border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--carte);
}
.grille-plateformes h3 { margin: 0 0 10px; font-size: 15px; }
.grille-plateformes__liste {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.grille-plateformes__liste li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 14px; border-radius: 999px;
  background: var(--nuit); color: #FFF7F3; font-weight: 700; font-size: 13px;
}
.grille-plateformes__liste li.grille-plateformes__maison { background: var(--action); padding-right: 14px; }
.grille-plateformes__liste form { margin: 0; }
.grille-plateformes__liste small { color: #C9B6D6; font-weight: 500; }
.grille-plateformes__retirer {
  border: 1px solid rgba(255, 247, 243, .35); background: transparent; color: #FFF7F3;
  border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.grille-plateformes__retirer:hover, .grille-plateformes__retirer:focus-visible { background: rgba(255, 247, 243, .12); }

/* Les deux vues du document client. Même dessin que « Mon argent » : des liens
   qui chargent leur page, pas des onglets qui empilent tout. */
.suivi-vues {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 1px solid var(--bordure);
  margin: 0 0 1.8rem;
}
.suivi-vues a {
  padding: .6rem 1rem; text-decoration: none; color: var(--encre-douce);
  font-weight: 600; font-size: .95rem; border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.suivi-vues a:hover { color: var(--encre); }
.suivi-vues a.actif { color: var(--action); border-bottom-color: var(--action); }

/* Le nom de l'événement au-dessus de son tableau de tarifs, dans le document
   du client : il était une colonne répétée, et deux galas se suivaient sans
   qu'on voie où l'un finissait. */
.suivi-grille__ev {
  margin: 22px 0 8px; font-size: 16px; font-weight: 800;
  color: var(--encre);
}
.suivi-grille__ev:first-of-type { margin-top: 6px; }

/* UNE COULEUR PAR PLATEFORME. Val, le 2026-09-10 : « j'aimerais une couleur
   différente par plateforme ». La pastille en plein, la ligne en pâle, tirées
   des jetons de la charte : fuchsia pour nous, ambre pour la FNAC, corail pour
   TicketNet, vert pour BilletRéduc, nuit pour le guichet. Une plateforme
   inconnue prend l'une des trois teintes « autre », toujours la même pour le
   même nom (suiviVentes.teintePlateforme). */
.teinte-maison      { --teinte: var(--action);      --teinte-texte: var(--fond);  --teinte-pale: var(--action-pale); }
.teinte-fnac        { --teinte: var(--ambre);       --teinte-texte: var(--encre); --teinte-pale: var(--attention-pale); }
.teinte-ticketnet   { --teinte: var(--corail);      --teinte-texte: var(--encre); --teinte-pale: var(--erreur-pale); }
.teinte-billetreduc { --teinte: var(--succes);      --teinte-texte: var(--fond);  --teinte-pale: var(--succes-pale); }
.teinte-guichet     { --teinte: var(--nuit);        --teinte-texte: var(--fond);  --teinte-pale: var(--fond); }
.teinte-autre-1     { --teinte: var(--nuit-clair);  --teinte-texte: var(--fond);  --teinte-pale: color-mix(in srgb, var(--nuit-clair) 8%, var(--carte)); }
.teinte-autre-2     { --teinte: var(--ambre-texte); --teinte-texte: var(--fond);  --teinte-pale: color-mix(in srgb, var(--ambre-texte) 10%, var(--carte)); }
.teinte-autre-3     { --teinte: var(--encre-douce); --teinte-texte: var(--fond);  --teinte-pale: color-mix(in srgb, var(--encre-douce) 10%, var(--carte)); }
.teinte-inconnue    { --teinte: var(--carte);       --teinte-texte: var(--encre-douce); --teinte-pale: var(--carte); }
.suivi-canal[class*="teinte-"],
[class*="teinte-"] > td > .suivi-canal { background: var(--teinte); color: var(--teinte-texte); }
.teinte-inconnue .suivi-canal { box-shadow: inset 0 0 0 1px var(--bordure); }
.suivi-tarif tr[class*="teinte-"] td,
.grille-tarif tr[class*="teinte-"] td { background: var(--teinte-pale); }

/* UN TARIF, UN GROUPE — dans la grille de saisie comme dans le document du
   client. Le nom est écrit une fois, à gauche de ses plateformes ; un trait
   plus marqué sépare deux tarifs, pour qu'on compare À L'INTÉRIEUR d'un
   groupe et pas d'un tarif à l'autre. */
.suivi-tarif__nom, .grille-tarif__nom {
  text-align: left; vertical-align: top;
  text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 700; color: var(--encre);
  background: var(--carte);
}
.suivi-tarif + .suivi-tarif > tr:first-child > *,
.grille-tarif + .grille-tarif > tr:first-child > * { border-top: 2px solid var(--bordure); }
/* PAS DE LIGNES ALTERNÉES DANS UN GROUPE DE TARIF. Vu au rendu le 2026-09-10 :
   l'alternance générale des tableaux teintait la 2e ligne de chaque tarif — la
   deuxième plateforme — et c'est elle qui ressortait, pas la nôtre. */
.tableau .suivi-tarif tr:nth-child(even),
.tableau .grille-tarif tr:nth-child(even) { background: transparent; }

/* ===== PROJECTION DES VENTES (budget de l'espace) ==========================
   Val, le 2026-09-10 : son tableur « vers le point de bascule », rangé dans le
   budget. L'état en toutes lettres en tête (la couleur le double), le
   calendrier et le rythme côte à côte, la courbe, puis le tableau jour par
   jour avec la ligne d'aujourd'hui surlignée. */
.projection-vide { margin: 0 0 18px; }
.projection-etat {
  margin: 0 0 18px; padding: 16px 18px;
  background: var(--carte); border: 1px solid var(--bordure); border-left: 4px solid var(--bordure);
  border-radius: var(--rayon);
}
.projection-etat--trajectoire { border-left-color: var(--succes); }
.projection-etat--equilibre { border-left-color: var(--succes); background: var(--succes-pale); }
.projection-etat--retard { border-left-color: var(--attention); background: var(--attention-pale); }
.projection-etat__titre { margin: 0 0 4px; font-weight: 800; font-size: 1.05rem; color: var(--encre); }
.projection-etat__phrase { margin: 0; color: var(--encre); line-height: 1.55; }
.projection-etat__suite { display: block; margin-top: 4px; color: var(--encre-douce); }

.projection-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 18px; align-items: start; }
@media (max-width: 760px) { .projection-grille { grid-template-columns: 1fr; } }
.projection-bloc { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 14px 16px; }
.projection-bloc .budget-h2, .projection-courbe .budget-h2, .projection-jours .budget-h2 { margin: 0 0 10px; font-size: 1.05rem; }
.projection-dl { margin: 0; }
.projection-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: var(--bordure-fine); }
.projection-dl > div:first-child { border-top: 0; }
.projection-dl dt { color: var(--encre); }
.projection-dl dt small { display: block; color: var(--encre-douce); font-size: .78rem; }
.projection-dl dd { margin: 0; font-weight: 700; color: var(--encre); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.projection-dl .projection-dl__fort { margin: 2px -10px; padding: 9px 10px; border-top: 0; border-radius: var(--rayon-petit); background: var(--action-pale); }

.projection-courbe { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 14px 16px 10px; margin: 0 0 18px; }
.projection-courbe svg { display: block; width: 100%; height: auto; }
.pc-axe { stroke: var(--violet-pale); stroke-width: 1.5; }
.pc-seuil { stroke: var(--succes); stroke-width: 1.5; stroke-dasharray: 2 4; }
.pc-objectif { fill: none; stroke: var(--encre-douce); stroke-width: 2; stroke-dasharray: 7 5; }
.pc-jour { stroke: var(--violet-pale); stroke-width: 1.5; }
.pc-reel { fill: none; stroke: var(--action); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pc-point { fill: var(--action); stroke: var(--carte); stroke-width: 2; }
.pc-texte { fill: var(--encre-douce); font-family: var(--font-texte); font-size: 12px; font-variant-numeric: tabular-nums; }
.pc-texte--seuil { fill: var(--succes); font-weight: 700; }
.pc-texte--jour { fill: var(--encre); font-weight: 700; }
.projection-courbe__legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--encre-douce); }
.projection-courbe__legende li::before { content: ''; display: inline-block; width: 18px; margin-right: 6px; vertical-align: middle; border-top: 3px solid currentColor; }
.projection-courbe__legende .lg-reel::before { border-top-color: var(--action); }
.projection-courbe__legende .lg-objectif::before { border-top: 2px dashed var(--encre-douce); }
.projection-courbe__legende .lg-seuil::before { border-top: 2px dotted var(--succes); }

.projection-jours { margin: 0 0 18px; }
.projection-jours__aide { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; font-size: .86rem; color: var(--encre-douce); }
.projection-table-cadre {
  max-height: 560px; overflow: auto;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
}
.projection-table-cadre:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.projection-table { margin: 0; }
.projection-table thead th { position: sticky; top: 0; z-index: 1; background: var(--carte); box-shadow: inset 0 -1px 0 var(--violet-pale); }
.projection-table th, .projection-table td { white-space: nowrap; }
.projection-table .projection-ligne--semaine td { border-top: 2px solid var(--violet-pale); }
.projection-ecart--moins { color: var(--attention-texte); font-weight: 700; }
.projection-ecart--plus { color: var(--succes); font-weight: 700; }
.projection-table td.num { font-variant-numeric: tabular-nums; }
.tableau .projection-ligne--aujourdhui td { background: var(--action-pale); font-weight: 700; }
.projection-ligne--futur td { color: var(--encre-douce); }
#aujourdhui { scroll-margin-top: 90px; }
.projection-pastille { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.projection-pastille--trajectoire { background: var(--succes-pale); color: var(--succes); }
.projection-pastille--equilibre { background: var(--succes); color: #fff; }
.projection-pastille--retard { background: var(--attention-pale); color: var(--attention-texte); }

/* ===== ACCÈS VISIBILITÉ (espace) ===========================================
   Val, le 2026-09-10 : « que je puisse cocher ce que je veux donner en lecture
   seule », « une belle interface ». Deux colonnes sur grand écran : à gauche on
   donne un accès, à droite les accès donnés, une carte par personne. Ce qu'une
   personne voit est une rangée d'interrupteurs — lisible d'un coup d'œil, et
   qu'on règle sans quitter la carte. */
.acces-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; align-items: start; margin: 0 0 22px; }
@media (max-width: 980px) { .acces-page { grid-template-columns: 1fr; } }
.acces-h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.12rem; color: var(--encre); }
.acces-h2__n { font-size: .78rem; font-weight: 800; color: var(--action-fonce); background: var(--action-pale); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }

.acces-creer { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 18px 20px; }
.acces-form { display: grid; gap: 14px; }
.acces-form .champ input { width: 100%; }
.acces-form .champ-aide { margin: 0; }
.acces-form__pied { display: flex; }

.acces-droits { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.acces-droits legend { padding: 0; margin: 0 0 8px; font-weight: 700; color: var(--encre); }

.acces-droit {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border: 1px solid var(--violet-pale); border-radius: var(--rayon-petit);
  background: var(--fond); cursor: pointer; transition: border-color .15s, background .15s;
}
.acces-droit:hover { border-color: var(--action-pale); }
.acces-droit:has(.acces-droit__case:checked) { background: var(--carte); border-color: var(--action-pale); }
.acces-droit--toujours { cursor: default; }
.acces-droit__case { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.acces-droit__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acces-droit__titre { font-weight: 700; color: var(--encre); }
.acces-droit__titre small { margin-left: 6px; font-size: .74rem; font-weight: 700; color: var(--succes); white-space: nowrap; }
.acces-droit__texte { font-size: .85rem; line-height: 1.4; color: var(--encre-douce); }
.acces-droit__texte em { display: block; font-style: normal; color: var(--attention-texte); }

.acces-droit__interrupteur {
  position: relative; flex: 0 0 44px; height: 24px; border-radius: 999px;
  background: var(--violet-pale); transition: background .15s;
}
.acces-droit__interrupteur::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--carte); box-shadow: 0 1px 3px rgba(42, 33, 56, .28); transition: transform .15s;
}
.acces-droit__case:checked ~ .acces-droit__interrupteur { background: var(--action); }
.acces-droit__case:checked ~ .acces-droit__interrupteur::after { transform: translateX(20px); }
.acces-droit__case:disabled ~ .acces-droit__interrupteur { background: var(--succes); opacity: .75; }
.acces-droit__case:focus-visible ~ .acces-droit__interrupteur { outline: 2px solid var(--action); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .acces-droit, .acces-droit__interrupteur, .acces-droit__interrupteur::after { transition: none; }
}

.acces-cartes { display: grid; gap: 14px; }
.acces-carte { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }
.acces-carte:target { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-pale); }
.acces-carte__tete { display: flex; align-items: center; gap: 12px; }
.acces-carte__avatar {
  flex: 0 0 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--nuit); color: #FFF7F3; font-weight: 800; font-size: 1rem;
}
.acces-carte__qui { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acces-carte__qui strong { color: var(--encre); overflow-wrap: anywhere; }
.acces-carte__qui small { color: var(--encre-douce); }
.acces-carte__tete form { margin: 0; flex: 0 0 auto; }
.acces-carte__droits { display: grid; gap: 8px; margin: 12px 0 0; }
/* Les réglages repliés (2026-09-10) : une ligne « Ce qu'il voit », et « Modifier ». */
.acces-carte__reglages { margin: 0; }
.acces-carte__resume {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; cursor: pointer; padding: 10px 12px; margin: 0 -4px;
  border-top: 1px dashed var(--action-pale); color: var(--encre-douce); font-size: 14px;
}
.acces-carte__resume::-webkit-details-marker { display: none; }
.acces-carte__resume strong { color: var(--encre); font-weight: 600; }
.acces-carte__resume:hover .acces-carte__resume-geste { text-decoration: underline; }
.acces-carte__resume:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 8px; }
.acces-carte__resume-geste { flex: 0 0 auto; font-weight: 700; color: var(--action); white-space: nowrap; }
.acces-carte__resume-geste::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .15s ease; }
.acces-carte__reglages[open] .acces-carte__resume-geste::after { transform: translateY(1px) rotate(-135deg); }
.acces-carte__fermer { display: none; }
.acces-carte__reglages[open] .acces-carte__ouvrir { display: none; }
.acces-carte__reglages[open] .acces-carte__fermer { display: inline; }
.acces-carte__pied { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
/* UNE CARTE MODIFIÉE ET PAS ENCORE ENREGISTRÉE (2026-09-10) : encadrée, avec
   l'avertissement écrit à côté du bouton — la couleur double le texte. */
.acces-carte--modifiee { border-color: var(--attention); box-shadow: 0 0 0 3px var(--attention-pale); }
.acces-carte__alerte {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--attention-pale); color: var(--attention-texte); font-size: .84rem; font-weight: 700;
}
.acces-carte__alerte[hidden] { display: none; }

/* Une case qui n'ouvrirait rien : grisée, et sa raison écrite (2026-09-10). */
.acces-droit--inactif { cursor: not-allowed; opacity: .7; }
.acces-droit--inactif .acces-droit__case:disabled ~ .acces-droit__interrupteur { background: var(--violet-pale); opacity: 1; }

/* Le suivi des ventes, à l'accueil d'un accès visibilité : la chose qu'il vient
   lire, en tête, sans avoir à la chercher. */
.suivi-encart {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 20px; padding: 14px 18px; text-decoration: none;
  background: var(--carte); border: 1px solid var(--bordure); border-left: 4px solid var(--action);
  border-radius: var(--rayon); color: var(--encre); transition: border-color .15s, box-shadow .15s;
}
.suivi-encart:hover, .suivi-encart:focus-visible { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-pale); }
.suivi-encart__corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suivi-encart__corps strong { font-size: 1.02rem; }
.suivi-encart__corps span { color: var(--encre-douce); font-size: .9rem; }
.suivi-encart__fleche { flex: 0 0 auto; font-weight: 700; color: var(--action-fonce); white-space: nowrap; }
.suivi-espace .suivi { margin-top: 0; }

/* SUR QUELS ÉVÉNEMENTS PORTE UN ACCÈS (2026-09-10). Deux choix francs, et la
   liste des événements sous le second ; tant que « Tous » est choisi, la liste
   reste lisible mais en retrait. */
.acces-portee { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.acces-portee legend { padding: 0; margin: 4px 0 8px; font-weight: 700; color: var(--encre); }
.acces-portee__choix {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--violet-pale); border-radius: var(--rayon-petit); background: var(--fond);
}
.acces-portee__choix:has(input:checked) { background: var(--carte); border-color: var(--action-pale); }
.acces-portee__choix input { margin: 3px 0 0; accent-color: var(--action); flex: 0 0 auto; }
.acces-portee__choix span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acces-portee__choix strong { color: var(--encre); }
.acces-portee__choix small { color: var(--encre-douce); font-size: .84rem; }
.acces-portee__liste { display: grid; gap: 6px; padding: 4px 4px 2px 34px; transition: opacity .15s; }
.acces-portee:has(input[value="tous"]:checked) .acces-portee__liste { opacity: .45; }
.acces-portee__evt { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--encre); cursor: pointer; }
.acces-portee__evt input { margin: 0; accent-color: var(--action); flex: 0 0 auto; }
.acces-portee__evt small { margin-left: 4px; font-weight: 400; color: var(--encre-douce); }
.acces-portee__vide { margin: 0; color: var(--encre-douce); font-size: .88rem; }
.acces-carte__portee {
  display: inline-block; align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px;
  background: var(--action-pale); color: var(--action-fonce); font-size: .78rem; font-weight: 700;
}
@media (prefers-reduced-motion: reduce) { .acces-portee__liste { transition: none; } }

/* Le décompte d'un tarif vendu hors du site : pourquoi la commission est à 0. */
.prix-decompte__note { margin: -2px 0 6px; font-size: .84rem; color: var(--encre-douce); }

/* « Voir comme ce client » sur la carte d'un accès (2026-09-10). */
.acces-carte__tete .acces-carte__voir { white-space: nowrap; }
@media (max-width: 560px) { .acces-carte__tete { flex-wrap: wrap; } }

/* Le bandeau de l'aperçu « voir comme ce client » : la couleur de l'action,
   pour qu'on ne le confonde ni avec le mode support ni avec une alerte. */
.support-banner--apercu { background: var(--action); color: #FFF7F3; }
.support-banner--apercu .support-banner__sortie { background: #FFF7F3; color: var(--action-fonce); }
.support-banner--apercu .support-banner__sortie:hover { background: var(--action-pale); }

/* COMBIEN DE PLACES POUR CE TARIF (2026-09-10) : trois réponses côte à côte,
   la catégorie nommée — « puiser dans sa catégorie » n'est plus caché derrière
   « Limiter ». */
.quota-mode { margin: 12px 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.quota-mode legend { padding: 0; margin: 0 0 8px; font-weight: 700; color: var(--encre); }
.quota-mode__choix {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--violet-pale); border-radius: var(--rayon-petit); background: var(--fond);
}
.quota-mode__choix:has(input:checked) { background: var(--carte); border-color: var(--action); box-shadow: 0 0 0 2px var(--action-pale); }
.quota-mode__choix input { margin: 3px 0 0; accent-color: var(--action); flex: 0 0 auto; }
.quota-mode__choix > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quota-mode__choix strong { color: var(--encre); }
.quota-mode__choix small { color: var(--encre-douce); font-size: .85rem; line-height: 1.4; }
.quota-mode__choix small[hidden] { display: none; }
.quota-mode__choix--inactif { cursor: not-allowed; opacity: .7; }

/* Les frais retenus sur un prix, sous son décompte (2026-09-10). */
.prix-frais-internes { margin-top: 16px; }

/* ---- Remboursements : ce qui reste à faire sur le portail CAWL (2026-09-10) ----
   « Accordée » ne rembourse pas la carte : l'étiquette ambre dit le geste qui
   reste, le bouton le coche. Deux formulaires pour Accorder et Refuser, chacun
   avec sa confirmation. */
.remb-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.remb-actions form { margin: 0; }
.tag--a-rembourser { background: var(--attention-pale); color: var(--attention-texte, var(--encre)); font-weight: 700; }
.remb-carte__form { margin: 6px 0 0; }

/* « Refuser… » d'un remboursement (audit du back office, 2026-09-10) : le motif et
   son bouton vivent dans un menu déroulant dont les boutons sont des lignes de
   menu. Celui-ci est un vrai geste : il garde l'allure d'un bouton secondaire. */
.menu-action__items form { display: flex; flex-direction: column; gap: 10px; padding: 8px; margin: 0; min-width: 260px; }
.menu-action__items form .btn {
  display: inline-block; width: auto; align-self: flex-end; justify-content: center;
  padding: 8px 18px; border-radius: 999px; font-weight: 700; white-space: nowrap;
  background: var(--carte); color: var(--encre); box-shadow: var(--ombre-douce);
}
.menu-action__items form .btn:hover { background: var(--carte); box-shadow: var(--ombre-carte-survol); }