/* ==========================================================================
   Concerts — système de design
   --------------------------------------------------------------------------
   Application de la charte demoisell.es. Le Café est la salle du bas ; ici
   c'est la pièce où l'on écoute. Les jetons sont volontairement identiques à
   ceux du Café — seul l'accent change, du jaune du store au rose.

   Deux règles gouvernent tout le reste :

   1. **Les pastels sont des surfaces, jamais du texte.** Rose sur crème donne
      1,4:1 là où AA en exige 4,5. C'est l'anthracite qui porte le texte.
   2. **Le blanc pur est proscrit.** Le fond est un papier légèrement ivoire.

   Nommage : .c-bloc__element--variante, état en .is-*
   ========================================================================== */

@import url("../fonts/polices.css");

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
  /* -- Palette officielle ------------------------------------------------ */
  --rose:      #F6B6C8;
  --bleu:      #8FD3FF;
  --jaune:     #FFD95A;
  --creme:     #FFF9F2;
  --anthracite:#303030;

  --sauge:     #BFD8B8;
  --bleu-gris: #D9E7F5;
  --lavande:   #DCCEF7;
  --peche:     #FFD7B5;

  /* -- Rôles -------------------------------------------------------------- */
  --papier:    var(--creme);
  --surface:   #FFFCF7;
  --surface-2: #FBF2E8;
  --ligne:     #EDE0D2;
  --ligne-douce: #F4EADE;

  --texte:       var(--anthracite);
  --texte-doux:  #6B6560;  /* 4,9:1 sur crème */
  --texte-tenu:  #8C8580;  /* jamais porteur d'information seule */

  /* -- Accent de la pièce -------------------------------------------------
     Le rose de la charte. Il remplit des formes ; pour les rares textes
     colorés, une déclinaison assombrie tient 5:1 sur le crème. */
  --accent:        var(--rose);
  --accent-doux:   #FCE7ED;
  --accent-texte:  #A33C5C;

  /* -- Verdicts -----------------------------------------------------------
     Les deux seules couleurs sémantiques de l'application. Elles teintent des
     voiles et des contours, jamais du texte fin. */
  --oui:        var(--sauge);
  --oui-fort:   #4E7A43;
  --non:        var(--peche);
  --non-fort:   #A8553B;

  /* -- Élévation ---------------------------------------------------------
     Teintées de la couleur du papier plutôt que de noir : une ombre grise sur
     de l'ivoire fait sale. */
  --ombre-1: 0 1px 2px rgba(72, 58, 42, .05);
  --ombre-2: 0 2px 8px rgba(72, 58, 42, .06), 0 1px 2px rgba(72, 58, 42, .04);
  --ombre-3: 0 8px 24px rgba(72, 58, 42, .09), 0 2px 6px rgba(72, 58, 42, .05);
  --ombre-carte: 0 12px 32px rgba(72, 58, 42, .12), 0 2px 8px rgba(72, 58, 42, .06);

  /* -- Formes ------------------------------------------------------------- */
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --r-galet: 999px;

  /* -- Rythme, grille de 8 ------------------------------------------------ */
  --e-1: 8px;   --e-2: 16px;  --e-3: 24px;  --e-4: 32px;
  --e-5: 48px;  --e-6: 64px;  --e-7: 96px;

  /* -- Typographie -------------------------------------------------------- */
  --titre: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --texte-police: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* -- Mouvement ---------------------------------------------------------- */
  --duree: 240ms;
  --duree-longue: 320ms;
  --courbe: cubic-bezier(.4, 0, .2, 1);

  /* -- Gabarit ------------------------------------------------------------ */
  --hauteur-entete: 64px;
  --largeur: 1180px;
}

/* --------------------------------------------------------------------------
   2. Mode sombre — une salle de concert avant le lever de rideau
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  --papier:    #201D1B;
  --surface:   #2A2624;
  --surface-2: #34302C;
  --ligne:     #433D38;
  --ligne-douce: #38332F;

  --texte:      var(--creme);
  --texte-doux: #BCB2A8;
  --texte-tenu: #94897F;

  --accent-doux:  #3A2429;
  --accent-texte: #F6B6C8;

  --oui-fort: #A6D39A;
  --non-fort: #F0B49A;

  --ombre-1: 0 1px 2px rgba(0, 0, 0, .35);
  --ombre-2: 0 2px 8px rgba(0, 0, 0, .40);
  --ombre-3: 0 8px 24px rgba(0, 0, 0, .50);
  --ombre-carte: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   3. Réinitialisation
   -------------------------------------------------------------------------- */

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

/* `hidden` doit l'emporter sur tout `display` déclaré ensuite. Sans cette
   règle, un bouton en `display: flex` reste visible malgré l'attribut, et un
   `<svg hidden>` de symboles occupe ses 300 × 150 px par défaut — c'est
   exactement ce qui rognait la hauteur de la pile. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* Le fond est posé sur <html> : en surdéfilement (rebond iOS, plein écran
     PWA), la zone hors page prend le fond du canvas. */
  background: var(--papier);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papier);
  color: var(--texte);
  font-family: var(--texte-police);
  font-size: 16px;          /* jamais moins : charte § 5 */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, li, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* Sur iPhone, un appui maintenu sur un bouton ouvre le menu « Copier /
   Partager » et interrompt le geste. Hésiter au-dessus de la croix est
   pourtant naturel : les commandes ne doivent donc se comporter ni comme du
   texte, ni comme une image.
   `touch-action: manipulation` supprime en prime le délai de 300 ms hérité
   du double-tap. */
button, .c-galet, .c-rond, .c-bouton {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* L'icône ne doit pas intercepter l'appui à la place de son bouton. */
.c-galet svg, .c-rond svg, .c-bouton svg { pointer-events: none; }

/* --------------------------------------------------------------------------
   4. Typographie
   -------------------------------------------------------------------------- */

.c-titre {
  font-family: var(--titre);
  font-weight: 700;
  letter-spacing: .01em;   /* interlettrage léger, charte § 5 */
  line-height: 1.15;
  /* Jamais tout en majuscules. */
}

.c-titre--h1 { font-size: clamp(2.25rem, 8vw, 3.5rem); }
.c-titre--h2 { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 600; }
.c-titre--h3 { font-size: 1.25rem; font-weight: 600; }

.c-chapo {
  color: var(--texte-doux);
  font-size: 1.0625rem;
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   5. Gabarit
   -------------------------------------------------------------------------- */

.c-corps {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.c-principal {
  flex: 1;
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: var(--e-4) var(--e-3) var(--e-6);
}

.c-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--e-2) var(--e-3);
  background: var(--surface);
  border-radius: 0 0 var(--r-m) 0;
  box-shadow: var(--ombre-2);
  z-index: 100;
}
.c-evitement:focus { left: 0; }

/* -- En-tête ---------------------------------------------------------------
   Les menus doivent disparaître derrière le contenu : l'en-tête ne porte que
   la marque. */

.c-entete {
  display: flex;
  align-items: center;
  min-height: var(--hauteur-entete);
  padding: var(--e-2) var(--e-3);
  padding-top: max(var(--e-2), env(safe-area-inset-top));
}

.c-marque {
  display: flex;
  align-items: baseline;
  gap: var(--e-1);
  flex-wrap: wrap;
}

.c-marque__maison {
  font-family: var(--titre);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.c-marque__piece {
  font-size: .875rem;
  color: var(--texte-doux);
  padding: 2px var(--e-1);
  background: var(--accent-doux);
  border-radius: var(--r-galet);
}

.c-pied {
  padding: var(--e-4) var(--e-3);
  padding-bottom: max(var(--e-4), env(safe-area-inset-bottom));
  text-align: center;
  color: var(--texte-tenu);
  font-size: .8125rem;
}

/* --------------------------------------------------------------------------
   6. Cartes — des fiches rangées dans un meuble d'archives
   -------------------------------------------------------------------------- */

.c-carte {
  background: var(--surface);
  border: 1px solid var(--ligne-douce);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-2);
  padding: var(--e-3);
}

/* --------------------------------------------------------------------------
   7. Boutons — davantage des galets que des boutons système
   -------------------------------------------------------------------------- */

.c-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: 48px;          /* charte § 8 */
  padding: 0 var(--e-3);
  border: 1px solid transparent;
  border-radius: var(--r-galet);
  background: var(--accent);
  color: var(--anthracite);   /* l'anthracite tient au-delà de 7:1 sur pastel */
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe),
              background-color var(--duree) var(--courbe);
}

.c-bouton:hover { box-shadow: var(--ombre-2); }
.c-bouton:active { transform: scale(.98); }

.c-bouton--discret {
  background: var(--surface);
  border-color: var(--ligne);
  color: var(--texte);
}

/* Un anneau de focus visible partout, y compris sur les pastels. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-texte);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

/* --------------------------------------------------------------------------
   8. Listes d'information
   -------------------------------------------------------------------------- */

.c-salles {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: var(--e-4);
}

.c-salle {
  background: var(--surface);
  border: 1px solid var(--ligne-douce);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-1);
  padding: var(--e-2) var(--e-3);
}

.c-salle__nom {
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 600;
}

.c-salle__adresse {
  color: var(--texte-doux);
  font-size: .875rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. Accueil provisoire
   -------------------------------------------------------------------------- */

.c-ouverture {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: var(--e-3);
}

.c-note {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  align-self: flex-start;
  margin-top: var(--e-2);
  padding: var(--e-1) var(--e-2);
  background: var(--accent-doux);
  border-radius: var(--r-galet);
  color: var(--accent-texte);
  font-size: .875rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   10. Le seuil — page de connexion
   -------------------------------------------------------------------------- */

.c-corps--seul .c-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-4) var(--e-3);
}

.c-seuil {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.c-seuil__maison {
  font-family: var(--titre);
  font-size: 1.125rem;
  color: var(--texte-doux);
  letter-spacing: .02em;
}

.c-formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.c-champ { display: flex; flex-direction: column; gap: 6px; }

.c-champ__intitule {
  font-size: .875rem;
  color: var(--texte-doux);
  font-weight: 500;
}

.c-champ__saisie {
  min-height: 48px;
  padding: 0 var(--e-2);
  font: inherit;
  font-size: 1rem;              /* 16 px : en dessous, iOS zoome à la saisie */
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-m);
  transition: border-color var(--duree) var(--courbe);
}
.c-champ__saisie:focus { border-color: var(--accent-texte); }

.c-bascule {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  font-size: .9375rem;
  color: var(--texte-doux);
  padding: var(--e-1) 0;
}
.c-bascule input { width: 20px; height: 20px; accent-color: var(--accent-texte); }

.c-bouton--large { width: 100%; margin-top: var(--e-1); }

.c-alerte {
  padding: var(--e-2);
  background: var(--non);
  border-radius: var(--r-m);
  color: var(--anthracite);     /* jamais du texte pastel : AA d'abord */
  font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   11. Balayage — la pile de cartes
   -------------------------------------------------------------------------- */

.c-corps--balayage {
  height: 100dvh;
  overflow: hidden;             /* l'écran ne défile pas : c'est une pile */
  overscroll-behavior: none;
}

.c-corps--balayage .c-principal {
  display: flex;
  flex-direction: column;
  min-height: 0;                /* sans quoi la pile déborde du conteneur flex */
  padding: 0 var(--e-2) var(--e-2);
  max-width: 520px;
}

.c-entete--balayage {
  justify-content: space-between;
  gap: var(--e-2);
}

.c-entete__actions { display: flex; align-items: center; gap: var(--e-1); }

.c-rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                  /* cible tactile confortable */
  height: 44px;
  border: 1px solid var(--ligne-douce);
  border-radius: var(--r-galet);
  background: var(--surface);
  color: var(--texte-doux);
  cursor: pointer;
  transition: color var(--duree) var(--courbe),
              background-color var(--duree) var(--courbe);
}
.c-rond:hover { color: var(--texte); background: var(--surface-2); }
.c-rond svg { width: 20px; height: 20px; }

.c-pile {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: var(--e-1) 0 var(--e-2);
}

.c-carte-concert {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--ligne-douce);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;          /* le geste horizontal nous revient */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* Seules `transform` et `opacity` sont animées : ce sont les deux
     propriétés que le navigateur compose sans refaire la mise en page. */
  transition: transform var(--duree-longue) var(--courbe);
  will-change: transform;
}

.c-carte-concert.is-saisie {
  cursor: grabbing;
  transition: none;             /* pendant le geste, la carte suit le doigt */
}

.c-carte-concert.is-partie { opacity: 1; }

.c-carte-concert__visuel {
  position: relative;
  flex: 1;
  min-height: 0;
  background: linear-gradient(160deg, var(--accent-doux), var(--bleu-gris));
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-carte-concert__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;         /* le geste appartient à la carte */
}

/* Repli quand l'affiche manque ou refuse d'être chargée : une initiale
   dessinée plutôt qu'un rectangle vide. */
.c-carte-concert__initiale {
  position: absolute;
  font-family: var(--titre);
  font-size: 8rem;
  font-weight: 700;
  color: rgba(48, 48, 42, .18);
  display: none;
}
.c-carte-concert.is-sans-image .c-carte-concert__image { display: none; }
.c-carte-concert.is-sans-image .c-carte-concert__initiale { display: block; }

.c-carte-concert__pied {
  padding: var(--e-2) var(--e-3) var(--e-3);
  background: var(--surface);
  border-top: 1px solid var(--ligne-douce);
}

.c-carte-concert__artiste {
  font-family: var(--titre);
  font-size: clamp(1.75rem, 7vw, 2.375rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
}

.c-carte-concert__titre {
  color: var(--texte-doux);
  font-size: .9375rem;
  margin-top: 2px;
}

.c-carte-concert__quand {
  margin-top: var(--e-1);
  font-weight: 600;
  font-size: 1rem;
}

.c-carte-concert__salle {
  color: var(--texte-doux);
  font-size: .9375rem;
}

/* -- Les verdicts, révélés par le geste ---------------------------------- */

.c-verdict {
  position: absolute;
  top: var(--e-3);
  padding: var(--e-1) var(--e-2);
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--anthracite);     /* anthracite sur pastel : au-delà de 7:1 */
  border-radius: var(--r-galet);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms linear;
}

.c-verdict--oui { left: var(--e-3); background: var(--oui); transform: rotate(-8deg); }
.c-verdict--non { right: var(--e-3); background: var(--non); transform: rotate(8deg); }

/* Le coup de cœur monte : son voile s'affiche au centre, droit, sans
   inclinaison — le geste est vertical, l'étiquette aussi. */
.c-verdict--coeur {
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  white-space: nowrap;
}

/* -- Le son -------------------------------------------------------------- */

.c-son__joue, .c-son__muet { display: none; }
.c-son[data-etat="joue"] .c-son__joue { display: block; }
.c-son[data-etat="muet"] .c-son__muet { display: block; }
/* Bloqué par Safari : on montre le haut-parleur barré, et l'étiquette dit
   quoi faire — l'application ne doit jamais avoir l'air en panne. */
.c-son[data-etat="bloque"] .c-son__muet { display: block; }

.c-son[data-etat="joue"] {
  background: var(--accent-doux);
  color: var(--accent-texte);
  border-color: var(--accent);
}

.c-son__etiquette {
  min-height: 1.25rem;
  margin-top: -4px;
  text-align: center;
  font-size: .8125rem;
  color: var(--texte-tenu);
}
.c-son__etiquette:empty { min-height: 0; }

/* -- Les galets ---------------------------------------------------------- */

.c-commandes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding-bottom: max(var(--e-2), env(safe-area-inset-bottom));
}

.c-galet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: none;
  border-radius: var(--r-galet);
  background: var(--surface);
  box-shadow: var(--ombre-2);
  color: var(--anthracite);
  cursor: pointer;
  transition: transform var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe);
}
.c-galet:hover { box-shadow: var(--ombre-3); }
.c-galet:active { transform: scale(.94); }
.c-galet svg { width: 28px; height: 28px; }

.c-galet--non { background: var(--non); }
.c-galet--oui { background: var(--oui); }

/* Le coup de cœur porte l'accent de la maison, et se tient un peu plus petit
   que les deux galets principaux : c'est un geste en plus, pas un troisième
   choix de même rang. */
.c-galet--coeur {
  width: 52px;
  height: 52px;
  background: var(--accent);
}
.c-galet--coeur svg { width: 24px; height: 24px; }
.c-galet--annuler {
  width: 48px;
  height: 48px;
  background: var(--surface);
  border: 1px solid var(--ligne);
  color: var(--texte-doux);
}
.c-galet--annuler svg { width: 20px; height: 20px; }

/* -- Fin du catalogue ---------------------------------------------------- */

.c-fin {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  text-align: center;
  padding: var(--e-3);
}
.c-fin[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. L'accord — quand deux personnes veulent le même concert
   -------------------------------------------------------------------------- */

.c-accord {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-3);
}
.c-accord[hidden] { display: none; }

.c-accord__voile {
  position: absolute;
  inset: 0;
  background: var(--papier);
  opacity: 0;
  transition: opacity var(--duree-longue) var(--courbe);
}
.c-accord.is-visible .c-accord__voile { opacity: .97; }

.c-accord__contenu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  text-align: center;
  max-width: 360px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duree-longue) var(--courbe),
              transform var(--duree-longue) var(--courbe);
}
.c-accord.is-visible .c-accord__contenu { opacity: 1; transform: none; }

/* Un léger flottement, autorisé par la charte — ni rebond ni rotation. */
.c-accord__oeil {
  font-size: 2.5rem;
  color: var(--accent-texte);
  animation: flottement 3.2s ease-in-out infinite;
}

@keyframes flottement {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.c-accord__texte { color: var(--texte-doux); font-size: 1.0625rem; }

.c-accord__carte {
  width: 100%;
  padding: var(--e-2) var(--e-3);
  background: var(--accent-doux);
  border-radius: var(--r-l);
}

.c-accord__artiste {
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 700;
}
.c-accord__quand { font-weight: 600; }
.c-accord__salle { color: var(--texte-doux); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   13. Les concerts retenus
   -------------------------------------------------------------------------- */

.c-retenus {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.c-retenu {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2);
  background: var(--surface);
  border: 1px solid var(--ligne-douce);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-1);
}

.c-retenu.is-commun { border-color: var(--accent); background: var(--accent-doux); }

/* Un coup de cœur se voit d'un coup d'œil dans la liste : un trait d'accent
   sur le bord, sans repeindre toute la fiche. */
.c-retenu.is-coup-de-coeur { border-left: 4px solid var(--accent); }

.c-etoile { color: var(--accent-texte); }

.c-retenu__vignette {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--r-m);
  flex-shrink: 0;
}

.c-retenu__texte { flex: 1; min-width: 0; }

.c-retenu__artiste {
  font-family: var(--titre);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}

.c-retenu__quand { font-weight: 600; font-size: .9375rem; }
.c-retenu__salle { color: var(--texte-doux); font-size: .875rem; }

.c-retenu__accord {
  margin-top: 4px;
  color: var(--accent-texte);
  font-size: .8125rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   14. L'arrière-boutique
   --------------------------------------------------------------------------
   Ce n'est pas un tableau de bord technique : mêmes jetons, mêmes formes que
   le reste. On y entre par une autre porte, pas dans une autre maison.
   -------------------------------------------------------------------------- */

.c-onglets {
  display: flex;
  gap: var(--e-1);
  margin-bottom: var(--e-4);
  flex-wrap: wrap;
}

.c-onglet {
  padding: var(--e-1) var(--e-2);
  border-radius: var(--r-galet);
  color: var(--texte-doux);
  font-size: .9375rem;
  font-weight: 500;
  transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.c-onglet:hover { background: var(--surface-2); color: var(--texte); }
.c-onglet.is-actif { background: var(--accent-doux); color: var(--accent-texte); font-weight: 600; }

.c-section { margin-top: var(--e-6); margin-bottom: var(--e-2); }

.c-avis {
  padding: var(--e-2);
  margin: var(--e-2) 0;
  background: var(--surface-2);
  border-radius: var(--r-m);
  font-size: .9375rem;
}
.c-avis--bon { background: var(--oui); color: var(--anthracite); }
.c-avis--alerte { background: var(--non); color: var(--anthracite); }

/* -- Les chiffres -------------------------------------------------------- */

.c-chiffres {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: var(--e-3);
}

.c-chiffre {
  padding: var(--e-3);
  background: var(--surface);
  border: 1px solid var(--ligne-douce);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-1);
}

.c-chiffre__valeur {
  font-family: var(--titre);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.c-chiffre__intitule { color: var(--texte-doux); font-size: .875rem; margin-top: 4px; }

/* -- L'action de synchronisation ----------------------------------------- */

.c-action {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  margin: var(--e-2) 0 var(--e-4);
}
.c-action__note { color: var(--texte-tenu); font-size: .875rem; }
.c-bouton[disabled] { opacity: .5; cursor: not-allowed; }

/* -- Les tableaux --------------------------------------------------------
   Un tableau large doit défiler dans sa propre boîte : la page, jamais. */

.c-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.c-table__legende {
  text-align: left;
  color: var(--texte-doux);
  font-size: .875rem;
  padding-bottom: var(--e-1);
}

.c-table th, .c-table td {
  padding: var(--e-1) var(--e-2);
  border-bottom: 1px solid var(--ligne-douce);
  text-align: left;
}

.c-table th { color: var(--texte-doux); font-weight: 600; font-size: .8125rem; }
.c-table__nombre { text-align: right; font-variant-numeric: tabular-nums; }
.c-table__detail { color: var(--texte-doux); font-size: .8125rem; white-space: normal; }

.c-etat {
  display: inline-block;
  padding: 2px var(--e-1);
  border-radius: var(--r-galet);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--anthracite);
}
.c-etat--succes { background: var(--oui); }
.c-etat--echec { background: var(--non); }
.c-etat--en_cours { background: var(--bleu-gris); }

/* -- Les filtres --------------------------------------------------------- */

.c-filtres {
  display: flex;
  gap: var(--e-2);
  align-items: flex-end;
  flex-wrap: wrap;
  margin: var(--e-3) 0;
  padding: var(--e-2);
  background: var(--surface-2);
  border-radius: var(--r-l);
}
.c-filtres .c-champ { flex: 1 1 160px; }

/* -- Les fiches de concert ----------------------------------------------- */

.c-fiches { display: flex; flex-direction: column; gap: var(--e-1); }

.c-fiche {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-2);
  background: var(--surface);
  border: 1px solid var(--ligne-douce);
  border-radius: var(--r-m);
}
.c-fiche.is-eteinte { opacity: .55; }

.c-fiche__vignette {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-s);
  flex-shrink: 0;
}

.c-fiche__vignette--vide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--texte-tenu);
  font-family: var(--titre);
  font-size: 1.5rem;
}

.c-fiche__texte { flex: 1; min-width: 0; }
.c-fiche__artiste { font-weight: 600; }
.c-fiche__titre { color: var(--texte-doux); font-size: .8125rem; }
.c-fiche__ligne { color: var(--texte-doux); font-size: .875rem; }
.c-fiche__etiquettes { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.c-fiche__actions { display: flex; align-items: center; gap: var(--e-1); flex-shrink: 0; }

.c-etiquette {
  padding: 1px 8px;
  border-radius: var(--r-galet);
  background: var(--surface-2);
  color: var(--texte-doux);
  font-size: .75rem;
}
.c-etiquette--son { background: var(--accent-doux); color: var(--accent-texte); }
.c-etiquette--muet { background: transparent; border: 1px solid var(--ligne); }
.c-etiquette--eteinte { background: var(--non); color: var(--anthracite); }
.c-etiquette--oui { background: var(--oui); color: var(--anthracite); }
.c-etiquette--coeur { background: var(--accent); color: var(--anthracite); }
.c-etiquette--commun { background: var(--lavande); color: var(--anthracite); }

.c-fiche.is-coup-de-coeur { border-left: 4px solid var(--accent); }

.c-chiffre--phare {
  background: var(--accent-doux);
  border-color: var(--accent);
}

.c-bouton--petit { min-height: 36px; padding: 0 var(--e-2); font-size: .875rem; }

.c-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
}
.c-pagination__position { color: var(--texte-doux); font-size: .875rem; }

/* -- Le journal des gestes ----------------------------------------------- */

.c-journal { display: flex; flex-direction: column; gap: 2px; }

.c-journal__ligne {
  display: flex;
  align-items: baseline;
  gap: var(--e-1);
  padding: var(--e-1) var(--e-2);
  border-bottom: 1px solid var(--ligne-douce);
  font-size: .9375rem;
  flex-wrap: wrap;
}

.c-verdict-petit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-galet);
  font-size: .75rem;
  color: var(--anthracite);
  flex-shrink: 0;
}
.c-verdict-petit--retenu { background: var(--oui); }
.c-verdict-petit--ecarte { background: var(--non); }

.c-journal__qui { font-weight: 600; min-width: 4.5rem; }
.c-journal__quoi { flex: 1; min-width: 0; }
.c-journal__quand { color: var(--texte-tenu); font-size: .8125rem; }

/* --------------------------------------------------------------------------
   15. Mouvement — désactivable
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}