/* ── social-vitrine.css : les interactions visiteurs sur la vitrine ──────────
 *
 * Deux surfaces, deux vocabulaires, et il ne faut pas les mélanger :
 *
 *   · l'ÉCRAN ARTISTE (Face A) est une photo. Tout ce qui s'y pose est en verre
 *     blanc, comme `.t4-bk` juste à côté — un aplat plein y ferait une tache.
 *   · l'AGENDA est une carte claire (#FAFAFA sur #1A1A1A). Tout ce qui s'y pose
 *     est un aplat plein : du verre sur du papier n'a aucun sens et perdrait
 *     son affordance (même leçon que le bouton du bandeau « Enseigne »).
 *
 * ⚠ Ce fichier est versionné par `?v=AAAAMMJJ` dans index.html (règle de cache
 * unique, _headers). Le modifier sans bumper le jeton ne sert rien à personne.
 * ───────────────────────────────────────────────────────────────────────────*/

/* ═══ 1. LE CŒUR, SUR LA PHOTO ═══════════════════════════════════════════ */

.gcs-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;          /* cible tactile : jamais sous 44 px sur la photo */
  padding: 13px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1);
}
.gcs-heart:hover { background: rgba(255, 255, 255, 0.2); }
.gcs-heart[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.92);
  border-color: #fff;
  color: #11110F;
}
.gcs-heart__ic {
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  transition: transform 240ms cubic-bezier(.2, 1.7, .4, 1);
}
.gcs-heart.is-pop .gcs-heart__ic { transform: scale(1.35); }
.gcs-heart__n { font-variant-numeric: tabular-nums; }
/* Tant que le compteur n'est pas revenu du réseau, le bouton reste utilisable
   et ne réserve pas une largeur qui sauterait à l'arrivée du chiffre. */
.gcs-heart__n:empty { display: none; }

/* ═══ 2. L'AGENDA : « j'y serai », rappel, dédicaces ═════════════════════ */

/* ⚠ `[hidden]` est le display:none de la feuille NAVIGATEUR : n'importe quel
 * `display:` d'auteur le bat. `.gcs-mail { display:flex }` faisait donc
 * apparaitre le formulaire de rappel sur CHAQUE date, alors que `formRappel`
 * le pose masque tant qu'on n'a pas dit « j'y serai » — mesure au banc le
 * 27/08/2026 : +150 px de formulaire par carte, sur cinq cartes. Meme piege
 * que les rangees fantomes des gabarits de planning (gca-vitrine, inv. 14).
 * Le garde vaut pour tout le domaine : toute commande masquee en JS ici porte
 * un `display:` d'auteur. */
[class^="gcs-"][hidden], [class*=" gcs-"][hidden] { display: none !important; }

/* Le bloc social est SECOND : une date se lit d'abord (le jour, le lieu, le
 * line-up, les billets), on interagit ensuite. D'ou un pied de carte pose sur
 * un aplat legerement plus sombre que la carte, colle a ses bords — et non
 * une seconde zone blanche de meme poids que la premiere, qui doublait la
 * hauteur de chaque date et faisait de l'agenda une pile de formulaires. */
.gcs-block {
  border-top: 1px solid #E7E7E4;
  background: #F7F7F4;
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 600px) { .gcs-block { padding: 10px 14px; } }

.gcs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Le bouton du mur pousse a droite : les deux commandes ne se lisent pas comme
   une paire d'egales, « j'y serai » est la seule qui compte au premier coup
   d'oeil. Il repasse a la ligne quand la place manque (mobile). */
.gcs-row > .gcs-btn--ghost { margin-left: auto; }

.gcs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid #1A1A1A;
  background: transparent;
  color: #1A1A1A;
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 140ms ease;
}
.gcs-btn:hover { background: #1A1A1A; color: #FAFAFA; }
.gcs-btn:active { transform: scale(.985); }
.gcs-btn[aria-pressed="true"] {
  background: #2F4A3A;              /* le vert sapin de la marque, pas un vert générique */
  border-color: #2F4A3A;
  color: #F5F0E1;
}
.gcs-btn[aria-pressed="true"]:hover { background: #3A5B47; border-color: #3A5B47; }
.gcs-btn--ghost {
  border-color: #D5D5D0;
  color: #55554F;
  font-weight: 500;
  min-height: 38px;
  padding: 9px 14px;
}
.gcs-btn--ghost:hover { background: #F0F0EC; color: #1A1A1A; }
.gcs-btn[disabled] { opacity: .55; cursor: default; }
.gcs-btn[disabled]:hover { background: transparent; color: #1A1A1A; }

.gcs-count {
  font: 500 12.5px/1.35 'Inter', system-ui, sans-serif;
  color: #6B6B63;
}
.gcs-count b { color: #1A1A1A; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Le rappel de la veille, par EMAIL ──
 * ⚠ C'était une case à bascule pour une notification push. Remplacé le
 * 25/08/2026 : sur iOS le Web Push n'existe que dans une PWA installée, donc
 * la majorité d'une audience de sortie ne pouvait rien recevoir. Les styles
 * `.gcs-remind` / `.gcs-tog` ont été retirés avec le code qui les posait —
 * du CSS qui ne peint plus rien est du CSS qu'on n'ose plus supprimer. */

.gcs-mail {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 12px;
  /* Blanc, et non gris : le pied de carte qui l'accueille est desormais gris,
     un gris sur un gris ne se detacherait plus. */
  background: #fff;
  border: 1px solid #E7E7E4;
  width: 100%;
}
.gcs-mail__titre {
  margin: 0;
  font: 600 13px/1.4 'Inter', system-ui, sans-serif;
  color: #1A1A1A;
}
.gcs-mail__legal {
  margin: 0;
  font: 400 11px/1.5 'Inter', system-ui, sans-serif;
  color: #7A7A72;
}
.gcs-mail__legal a {
  color: #55554F;
  text-decoration: underline;
  /* Cible tactile : un lien de 11 px dans un paragraphe reste cliquable
     confortablement grâce au padding, sans casser le rythme du texte. */
  padding: 4px 0;
  display: inline-block;
}
.gcs-mail__legal a:hover { color: #1A1A1A; }

/* La case de la liste : un vrai label cliquable sur tout son texte. */
.gcs-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  font: 500 12.5px/1.45 'Inter', system-ui, sans-serif;
  color: #55554F;
  min-height: 24px;              /* cible tactile : le minimum WCAG 2.2 AA */
  padding: 2px 0;
}
.gcs-check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: none;
  accent-color: #2F4A3A;
  cursor: pointer;
}

/* Une fois inscrit : plus de formulaire, une confirmation et un moyen d'annuler. */
.gcs-mail__ok {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font: 500 13px/1.45 'Inter', system-ui, sans-serif;
  color: #2F4A3A;
}
.gcs-mail__tick {
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.gcs-mail__undo {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 6px 2px;
  min-height: 24px;
  font: 500 12px/1 'Inter', system-ui, sans-serif;
  color: #7A7A72;
  text-decoration: underline;
  cursor: pointer;
}
.gcs-mail__undo:hover { color: #BF2E1B; }
.gcs-mail__undo[disabled] { opacity: .5; cursor: default; }

/* ── Le mur de dédicaces ── */
.gcs-wall { display: none; flex-direction: column; gap: 9px; }
.gcs-wall.is-open { display: flex; }

.gcs-form { display: flex; gap: 8px; }
/* ⚠ 16 px, pas moins (24/09/2026, AUDIT-2026-09-23.md R14) : sous 16 px, Safari
   iOS ZOOME la page au focus du champ, et elle reste zoomée après. Les trois
   champs du domaine (rappel, dédicace, lieu) sont concernés, et aucun ne
   s'affiche tant que son interrupteur est éteint : c'est pour ça que rien ne
   l'aurait signalé le jour où Jules les allumera. */
.gcs-input {
  flex: 1;
  min-width: 0;
  font: 400 16px/1 'Inter', system-ui, sans-serif;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid #D5D5D0;
  background: #fff;
  color: #1A1A1A;
}
.gcs-input::placeholder { color: #8A8A82; }
.gcs-input:focus { border-color: #1A1A1A; outline: none; }

.gcs-track {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #F2F2EE;
  border: 1.5px solid transparent;
}
.gcs-track--mine { border-color: #2F4A3A; background: #EFF3EF; }
.gcs-track__t { flex: 1; min-width: 0; }
.gcs-track__t b {
  display: block;
  font: 600 13.5px/1.3 'Inter', system-ui, sans-serif;
  color: #1A1A1A;
  overflow-wrap: anywhere;
}
.gcs-track__t span {
  display: block;
  font: 500 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7A7A72;
  margin-top: 3px;
}
.gcs-up {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid #D5D5D0;
  background: #fff;
  color: #55554F;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.gcs-up:hover { border-color: #1A1A1A; color: #1A1A1A; }
.gcs-up[aria-pressed="true"] { background: #2F4A3A; border-color: #2F4A3A; color: #F5F0E1; }
.gcs-up em { font-style: normal; font-size: 9px; opacity: .8; }

/* ═══ 3. « ON VEUT GROOVE CLUB ICI » ═════════════════════════════════════ */

.gcs-venues {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #E7E7E4;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gcs-venues__title {
  font: 800 19px/1.2 'CY Grotesk Grand', 'Cooper Black', Impact, sans-serif;
  color: #1A1A1A;
  margin: 0;
}
.gcs-venues__sub {
  font: 400 13.5px/1.5 'Inter', system-ui, sans-serif;
  color: #55554F;
  margin: -4px 0 0;
  max-width: 52ch;
}
.gcs-pins { display: flex; flex-wrap: wrap; gap: 7px; }
.gcs-pin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  background: #F2F2EE;
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  color: #1A1A1A;
}
.gcs-pin b {
  font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace;
  color: #BF2E1B;
  font-variant-numeric: tabular-nums;
}
.gcs-pin span { color: #7A7A72; font-size: 11.5px; }

/* ═══ 4. MESSAGES ════════════════════════════════════════════════════════ */
/* ⚠ Un envoi qui ne dit rien est indiscernable d'un bouton mort — la même
 * leçon que les écrans de dépôt de médias. Chaque geste répond quelque chose. */
.gcs-msg {
  font: 500 12.5px/1.45 'Inter', system-ui, sans-serif;
  color: #55554F;
  margin: 0;
}
.gcs-msg--ok { color: #2F4A3A; }
.gcs-msg--ko { color: #BF2E1B; }
.gcs-msg:empty { display: none; }

/* ═══ 5. FOCUS ═══════════════════════════════════════════════════════════ */
.gcs-heart:focus-visible,
.gcs-btn:focus-visible,
.gcs-up:focus-visible,
.gcs-check input:focus-visible,
.gcs-mail__legal a:focus-visible,
.gcs-mail__undo:focus-visible,
.gcs-input:focus-visible {
  outline: 3px solid #BF2E1B;
  outline-offset: 2px;
}
.gcs-heart:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .gcs-heart, .gcs-heart__ic, .gcs-btn, .gcs-up {
    transition-duration: .01ms !important;
  }
}