/* Espace compte - uniquement les règles fonctionnelles (visibilité selon la
   session). Tout le style visuel se gère dans Bricks via les classes .mtc-*. */

.mtc[hidden],
.mtc [hidden] {
  display: none !important;
}

/* Page compte (body.mtc-page, posée par le PHP) : ni pinch-zoom ni double-tap
   zoom sur iOS, qui ignore user-scalable=no ; la largeur reste celle de l'écran. */
body.mtc-page { touch-action: pan-x pan-y; }

/* Sections Bricks liées à l'état de connexion : ajouter la classe CSS
   « mtc-auth-section » (visible connectée) ou « mtc-anon-section » (visible
   déconnectée) sur n'importe quel élément Bricks. Le display Bricks (flex,
   grid…) est préservé, seule la classe body pilote l'affichage. */
body:not(.mtc-logged-in) .mtc-auth-section { display: none !important; }
body.mtc-logged-in .mtc-anon-section { display: none !important; }

/* Chargement (body.mtc-loading, posée par le PHP, retirée par compte.js une
   fois session + compte + séances connus) : aucune section n'apparaît avant
   l'état final ; un spinner .mtc-loader (injecté par le JS devant la première
   section, ou un élément Bricks portant cette classe) s'affiche à la place.
   Couleur / taille surchargeables dans WPCodeBox via .mtc-loader. */
body.mtc-loading .mtc-auth-section,
body.mtc-loading .mtc-anon-section { display: none !important; }
body:not(.mtc-loading) .mtc-loader { display: none !important; }
.mtc-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 6em;
}
.mtc-loader::before {
  content: '';
  width: 2em;
  height: 2em;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.6;
  animation: mtc-spin 0.8s linear infinite;
}
@keyframes mtc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mtc-loader::before { animation-duration: 1.6s; }
}

/* Conditions générales : tant que la cliente connectée ne les a pas acceptées
   (body.mtc-cg-ok absent), les éléments Bricks portant « mtc-cg-gated » (le
   tableau des onglets) restent masqués ; [mt_compte_cg] s'affiche à la place. */
body:not(.mtc-cg-ok) .mtc-cg-gated { display: none !important; }
/* … et « mtc-cg-pending » : visible seulement tant que l'acceptation manque (phrase d'intro) */
body:not(.mtc-cg-todo) .mtc-cg-pending { display: none !important; }
.mtc-check { display: flex; gap: 0.6em; align-items: flex-start; cursor: pointer; }
.mtc-checkbox { margin-top: 0.25em; }

/* Idem selon le solde de crédits (posé par le JS une fois le compte chargé) :
   « mtc-if-credits » visible avec au moins 1 crédit, « mtc-if-zero » visible
   à 0 crédit - pour deux variantes d'une même phrase dans Bricks. */
body:not(.mtc-credits-some) .mtc-if-credits { display: none !important; }
body:not(.mtc-credits-zero) .mtc-if-zero { display: none !important; }

/* Login via formulaires Bricks natifs : bascule d'étapes pilotée par compte.js.
   L'étape code est masquée par défaut (pas de flash avant l'init JS). */
.mtc-login-code:not(.mtc-step-active) { display: none !important; }
.mtc-login-email.mtc-step-done { display: none !important; }
.mtc-login-msg[hidden] { display: none !important; }

/* Libellé + étoile « obligatoire » sur une seule ligne, quel que soit le
   display de .mtc-label (flex column dans WPCodeBox). */
.mtc-label-text { white-space: nowrap; }
/* « Un code à 6 chiffres vous a été envoyé par e-mail. » sur une seule ligne
   (demande Harold 2026-09-08) ; retour à la ligne normal sur petit écran pour
   ne pas déborder du conteneur. */
.mtc-msg--nowrap { white-space: nowrap; }
@media (max-width: 600px) { .mtc-msg--nowrap { white-space: normal; } }

/* Rangée de champs côte à côte dans un .mtc-form (profil : e-mail +
   téléphone) : structure seulement, moitié/moitié - la déco se gère
   dans WPCodeBox via .mtc-form-row. */
.mtc-form-row {
  display: flex;
  gap: 1rem;
}
.mtc-form-row > .mtc-label {
  flex: 1 1 0;
  min-width: 0;
}

/* Calendrier mensuel [mt_compte_calendrier_mois] : structure de grille
   uniquement (7 colonnes, numéro du jour centré dans sa case) - bordures,
   couleurs (.mtc-cal-cours, .mtc-cal-inscrite, .mtc-cal-selected), typo,
   etc. se stylent dans Bricks/WPCodeBox via .mtc-cal-*. */
.mtc-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
/* Nom du mois à largeur fixe (« Septembre 2026 » = le plus long) : les flèches
   < > restent au même endroit d'un mois à l'autre. Surchargeable dans WPCodeBox. */
.mtc-cal-titre {
  min-width: 15ch;
  text-align: center;
}
.mtc-cal-titre[role="button"] { cursor: pointer; } /* clic = retour au mois en cours */
.mtc-cal-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.mtc-cal-case {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1; /* cases toujours carrées, quelle que soit la largeur */
  min-width: 0;
  padding: 0;
}
.mtc-cal-case[role="button"] { cursor: pointer; }
/* Mobile : au clic sur un jour, le calendrier remonte en haut de l'écran ;
   la marge sous le header sticky (8svh) se règle ici ou dans WPCodeBox. */
.mtc-cal-mois { scroll-margin-top: calc(8svh + 1rem); }

/* Carte d'une séance : bouton Réserver / Annuler espacé du texte (demande Harold). */
.mtc-item-actions .mtc-btn { margin: 0.75em 0; }

/* Bulles d'information (.mtc-confirm-text) : blocs de phrases séparés d'un
   petit écart (structure, pas de déco - demande Harold 2026-09-06) */
.mtc-confirm-text .mtc-bulle-p { display: block; }
.mtc-confirm-text .mtc-bulle-p + .mtc-bulle-p { margin-top: 0.5em; }