/*
 * Gigi — lin, lichen et rouge. Navigation en verre, contenus opaques.
 *
 * Les hooks Kapella existants restent compatibles avec les trois espaces.
 * Les couleurs des alertes et des états métier restent indépendantes du lichen.
 */

:root {
  --gigi-fond: #F2EFEC;
  --gigi-lichen: #9FA8A0;
  --gigi-lichen-texte: #515D54;
  --gigi-lichen-doux: #E8ECE8;
  --gigi-rouge: #8B3320;
  --gigi-rouge-survol: #742B1C;
  --gigi-rouge-doux: #F7EAE5;
  --gigi-encre: #202926;
  --gigi-muet: #626E68;
  --gigi-bord: #DDE2DD;
  --gigi-surface: #fff;
  --gigi-rayon: 18px;
  --gigi-rayon-controle: 10px;
  --gigi-ombre: 0 6px 24px rgb(32 41 38 / .055);
  --gigi-ombre-haute: 0 12px 32px rgb(32 41 38 / .10);
  --gigi-verre: rgb(255 255 255 / .82);
  --gigi-reflet: rgb(255 255 255 / .96);
  --gigi-police: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kapella-primaire: var(--gigi-rouge);
  --kapella-secondaire: var(--gigi-rouge-survol);
  --kapella-fond: var(--gigi-fond);
  --kapella-encre: var(--gigi-encre);
  --kapella-muet: var(--gigi-muet);
  --kapella-blanc: var(--gigi-surface);
  --kapella-bord: var(--gigi-bord);
  --kapella-surface-douce: var(--gigi-fond);
  --kapella-rayon: var(--gigi-rayon);
  --kapella-ombre: var(--gigi-ombre);
  --kapella-ombre-haute: var(--gigi-ombre-haute);
}

body.theme-kapella {
  /* Compatibilité avec les noms de variables des trois espaces existants. */
  --accent: var(--kapella-primaire);
  --accent-fonce: var(--kapella-primaire);
  --argile: var(--kapella-primaire);
  --terracotta-fonce: var(--kapella-primaire);
  --rose: var(--gigi-rouge-doux);
  --sable: var(--kapella-fond);
  --fond: var(--kapella-fond);
  --carte: var(--kapella-blanc);
  --encre: var(--kapella-encre);
  --encre-2: var(--kapella-muet);
  --muet: var(--kapella-muet);
  --bord: var(--kapella-bord);
  --rayon: var(--kapella-rayon);
  --ombre: var(--kapella-ombre);

  min-height: 100vh;
  background: var(--gigi-fond);
  background-image: radial-gradient(ellipse 900px 520px at 8% 0, #e2e6e2, transparent 75%);
  color: var(--kapella-encre);
  font-family: var(--gigi-police);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.theme-kapella a {
  color: var(--kapella-primaire);
  text-underline-offset: 3px;
}

body.theme-kapella h1,
body.theme-kapella h2,
body.theme-kapella h3,
body.theme-kapella h4 {
  color: var(--kapella-encre);
  line-height: 1.2;
}

body.theme-kapella h1 {
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 650;
  letter-spacing: -.04em;
}

body.theme-kapella h2 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: none;
}

body.theme-kapella h3 {
  font-size: 1rem;
  font-weight: 700;
}

body.theme-kapella :focus-visible {
  outline: 2px solid var(--gigi-rouge);
  outline-offset: 2px;
}

body.theme-kapella button,
body.theme-kapella .cta,
body.theme-kapella .bouton,
body.theme-kapella .bouton-lien,
body.theme-kapella a.bouton-reserver,
body.theme-kapella .bouton-mfa,
body.theme-kapella .choix-espace-bouton {
  border-radius: var(--gigi-rayon-controle);
}

body.theme-kapella .cta,
body.theme-kapella .bouton,
body.theme-kapella a.bouton-reserver,
body.theme-kapella .bouton-mfa,
body.theme-kapella .connexion-valider,
body.theme-kapella .valider-appel {
  background-color: var(--kapella-primaire);
  color: #fff;
  box-shadow: 0 3px 8px rgb(139 51 32 / .14), inset 0 1px 0 rgb(255 255 255 / .16);
}

body.theme-kapella .cta:hover,
body.theme-kapella .bouton:hover,
body.theme-kapella a.bouton-reserver:hover,
body.theme-kapella .bouton-mfa:hover,
body.theme-kapella .connexion-valider:hover,
body.theme-kapella .valider-appel:hover {
  background-color: var(--kapella-secondaire);
}

body.theme-kapella button.secondaire,
body.theme-kapella .secondaire,
body.theme-kapella .bouton-lien {
  border-color: var(--kapella-bord);
  background: var(--kapella-blanc);
  color: var(--kapella-primaire);
  box-shadow: none;
}

body.theme-kapella button.secondaire:hover,
body.theme-kapella .secondaire:hover,
body.theme-kapella .bouton-lien:hover {
  border-color: var(--kapella-secondaire);
  background: var(--kapella-fond);
  color: var(--kapella-primaire);
}

body.theme-kapella input:not([type="checkbox"]):not([type="radio"]),
body.theme-kapella select,
body.theme-kapella textarea {
  border-color: var(--kapella-bord);
  border-radius: var(--gigi-rayon-controle);
  background-color: var(--kapella-blanc);
  color: var(--kapella-encre);
}

body.theme-kapella input:not([type="checkbox"]):not([type="radio"]):focus,
body.theme-kapella select:focus,
body.theme-kapella textarea:focus {
  border-color: var(--gigi-lichen-texte);
  outline: 2px solid var(--gigi-lichen-texte);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(159 168 160 / .18);
}

body.theme-kapella input[type="checkbox"],
body.theme-kapella input[type="radio"] {
  accent-color: var(--kapella-primaire);
}

body.theme-kapella dialog {
  border: 0;
  border-radius: var(--kapella-rayon);
  box-shadow: 0 18px 55px rgba(56, 37, 31, .24);
}

body.theme-kapella dialog::backdrop {
  background: rgba(56, 37, 31, .46);
  backdrop-filter: blur(2px);
}

/* -------------------------------------------------------------------------
   Espace client
   ------------------------------------------------------------------------- */

body.theme-client .topbar {
  min-height: 78px;
  padding: max(.85rem, env(safe-area-inset-top, 0px))
    clamp(1rem, 4vw, 3rem) .85rem;
  background: var(--kapella-blanc);
  color: var(--kapella-encre);
  border-bottom: 1px solid var(--kapella-bord);
  box-shadow: 0 1px 0 rgba(139, 51, 32, .04);
}

body.theme-client .topbar .marque,
body.theme-client .topbar nav a,
body.theme-client .topbar button.lien {
  color: var(--kapella-encre);
}

body.theme-client .topbar nav {
  gap: .3rem;
}

body.theme-client .topbar nav a,
body.theme-client .topbar button.lien {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: .55rem .7rem;
  border-radius: var(--gigi-rayon-controle);
  font-size: .88rem;
  font-weight: 600;
  opacity: .72;
  text-decoration: none;
}

body.theme-client .topbar nav a:hover,
body.theme-client .topbar button.lien:hover {
  background: var(--kapella-fond);
  color: var(--kapella-primaire);
  opacity: 1;
}

body.theme-client .topbar nav a.lien-gestion {
  border: 1px solid var(--kapella-bord);
  border-radius: var(--gigi-rayon-controle);
  color: var(--kapella-primaire);
}

body.theme-client .topbar .cloche summary {
  color: var(--kapella-encre);
  border-radius: var(--gigi-rayon-controle);
}

body.theme-client .topbar .cloche summary:hover {
  background: var(--kapella-fond);
}

body.theme-client main {
  padding-top: 1.5rem;
}

body.theme-client :is(
  .seance,
  .produit,
  .carte-compte,
  .compteur-membre,
  .rappels,
  .recap-panier,
  .mfa-carte,
  .encart-club,
  .choix-parcours,
  .fiche,
  .tunnel > section,
  .detail-coach
) {
  border-color: var(--kapella-bord);
  border-radius: var(--kapella-rayon);
  background-color: var(--kapella-blanc);
  box-shadow: var(--kapella-ombre);
}

body.theme-client .produit {
  border-top: 3px solid var(--kapella-secondaire);
}

body.theme-client .produit::before {
  display: none;
}

body.theme-client .produit[data-offre]:hover,
body.theme-client .seance:hover {
  border-color: var(--gigi-lichen);
  box-shadow: var(--kapella-ombre-haute);
}

/* Planning client : les cartes restent blanches et seule la bordure gauche
   reprend la couleur de la famille du cours. */
body.theme-client .seance.famille-lagree {
  border-left-color: #c97860; background-color: var(--kapella-blanc);
}
body.theme-client .seance.famille-reformer {
  border-left-color: #c19a52; background-color: var(--kapella-blanc);
}
body.theme-client .seance.famille-hiit {
  border-left-color: #8d7351; background-color: var(--kapella-blanc);
}

body.theme-client :is(
  .icone-produit-boutique,
  .choix-parcours .picto,
  .acces-offre .picto,
  .detail-coach
) {
  border-radius: var(--gigi-rayon-controle);
  background: var(--kapella-fond);
  color: var(--kapella-primaire);
}

body.theme-client .barre-panier {
  border-radius: var(--gigi-rayon-controle);
  background: var(--kapella-primaire);
  color: #fff;
  box-shadow: 0 8px 24px rgba(139, 51, 32, .24);
}

body.theme-client .barre-panier :is(span, strong) {
  color: inherit;
}

body.theme-client .colonne h2,
body.theme-client .jour-pastille,
body.theme-client .moment-pastille,
body.theme-client .historique-repliable summary {
  border-radius: var(--gigi-rayon-controle);
  border-color: var(--kapella-bord);
}

body.theme-client .colonne.auj h2,
body.theme-client .jour-pastille.actif,
body.theme-client .moment-pastille.actif {
  border-color: var(--kapella-primaire);
  background: var(--kapella-primaire);
}

body.theme-client :is(.historique, .table-remu) {
  overflow: hidden;
  border: 1px solid var(--kapella-bord);
  border-radius: var(--kapella-rayon);
  background: var(--kapella-blanc);
  box-shadow: var(--kapella-ombre);
}

body.theme-client :is(.historique, .table-remu) th {
  background: var(--kapella-fond);
  color: var(--kapella-encre);
  font-weight: 700;
}

body.theme-client :is(.historique, .table-remu) th,
body.theme-client :is(.historique, .table-remu) td {
  border-color: var(--kapella-bord);
}

body.theme-client .pied-juridique {
  border-color: var(--kapella-bord);
}

body.theme-client .connexion-page {
  background:
    linear-gradient(135deg, rgb(159 168 160 / .13), rgb(255 255 255 / .65)),
    var(--kapella-fond);
}

body.theme-client .connexion-cadre {
  border-color: var(--kapella-bord);
  border-radius: var(--kapella-rayon);
  box-shadow: var(--kapella-ombre-haute);
}

body.theme-client .connexion-entete h1,
body.theme-client .connexion-marque {
  font-family: var(--gigi-police);
}

body.theme-client .connexion-sur-titre,
body.theme-client .connexion-ligne-label a {
  color: var(--kapella-primaire);
}

body.theme-client .connexion-champ input {
  border-color: var(--kapella-bord);
  border-radius: var(--gigi-rayon-controle);
  background: var(--kapella-blanc);
}

body.theme-client .connexion-inscription {
  border-color: var(--kapella-bord);
  border-radius: var(--gigi-rayon-controle);
}

body.theme-client .connexion-inscription:hover {
  border-color: var(--kapella-secondaire);
  background: var(--kapella-fond);
}

body.theme-client .tabbar {
  border-color: var(--kapella-bord);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -3px 14px rgba(82, 48, 38, .07);
}

body.theme-client .tabbar a.actif {
  color: var(--kapella-primaire);
}

/* -------------------------------------------------------------------------
   Espace gestion : menu Kapella horizontal sur grand écran
   ------------------------------------------------------------------------- */

body.theme-gestion {
  display: block;
  min-width: 0;
}

body.theme-gestion .laterale {
  position: relative;
  z-index: 50;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  flex-shrink: 0;
  height: auto;
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 4fr) minmax(7rem, 1fr);
  grid-template-rows: 82px 78px;
  grid-template-areas:
    "marque espace sortie"
    "navigation navigation navigation";
  gap: 0;
  padding: 0 clamp(1rem, 3vw, 2.5rem) 8px;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.theme-gestion .laterale .marque {
  grid-area: marque;
  align-self: center;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  color: var(--kapella-encre);
}

body.theme-gestion .laterale .marque .nom-studio {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.theme-gestion .laterale .marque-suffixe {
  color: var(--gigi-muet);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.theme-gestion .laterale nav {
  grid-area: navigation;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding: 6px;
  border: 1px solid var(--gigi-reflet);
  border-radius: 20px;
  background: var(--gigi-surface);
  box-shadow: var(--gigi-ombre), inset 0 1px 0 var(--gigi-reflet);
}

body.theme-gestion .laterale nav a {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .55rem .35rem .65rem;
  border-radius: 13px;
  color: var(--gigi-muet);
  font-size: .73rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  opacity: 1;
  white-space: nowrap;
}

body.theme-gestion .laterale nav a:hover {
  background: var(--gigi-lichen-doux);
  color: var(--gigi-lichen-texte);
  opacity: 1;
}

body.theme-gestion .laterale nav a.actif {
  background: var(--gigi-rouge);
  color: #fff;
  box-shadow: 0 4px 9px rgb(139 51 32 / .20), inset 0 1px 0 rgb(255 255 255 / .22);
  opacity: 1;
}

body.theme-gestion .laterale nav a.actif::after {
  content: none;
}

body.theme-gestion .laterale nav a svg {
  width: 20px;
  height: 20px;
}

body.theme-gestion .laterale .sortie {
  grid-area: sortie;
  align-self: center;
  justify-self: end;
}

body.theme-gestion .laterale .sortie button,
body.theme-gestion .laterale .sortie .app-client-raccourci {
  width: auto;
  min-height: 38px;
  padding: .5rem .75rem;
  border: 1px solid var(--kapella-bord);
  border-radius: var(--gigi-rayon-controle);
  background: var(--kapella-blanc);
  color: var(--kapella-muet);
  box-shadow: none;
  font-size: .78rem;
}

body.theme-gestion .laterale .sortie button:hover {
  border-color: var(--kapella-secondaire);
  background: var(--kapella-fond);
  color: var(--kapella-primaire);
}

body.theme-gestion .contenu {
  width: 100%;
  min-width: 0;
}

body.theme-gestion .barre {
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 51;
  width: min(460px, calc(100% - 570px));
  min-height: 44px;
  margin: 0;
  padding: 0;
  gap: 10px;
  background: transparent;
  border: 0;
}

body.theme-gestion .recherche {
  max-width: 420px;
}

body.theme-gestion .recherche input {
  min-height: 44px;
  padding: .55rem .85rem;
  border: 1px solid var(--gigi-reflet);
  border-radius: var(--gigi-rayon-controle);
  background: var(--kapella-blanc);
  box-shadow: var(--kapella-ombre);
  font-size: .86rem;
}

body.theme-gestion .cloche summary {
  border: 1px solid var(--gigi-reflet);
  border-radius: var(--gigi-rayon-controle);
  background: var(--kapella-blanc);
  box-shadow: var(--kapella-ombre);
}

body.theme-gestion .cloche summary:hover {
  background: var(--kapella-fond);
}

body.theme-gestion main {
  max-width: 1280px;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 2.5rem;
}

body.theme-gestion .entete-page {
  margin-bottom: 1.35rem;
  gap: 1rem;
  flex-wrap: wrap;
}

body.theme-gestion .entete-page h1 {
  margin: 0;
}

body.theme-gestion :is(
  #calendrier,
  .panneau,
  .carte-coach,
  .carte-parametres,
  .carte-recap,
  .section-form,
  .section-form-coach,
  .carte-abonnement-gestion,
  .carte-facture-membre,
  .bloc-categorie,
  .page-notifications .notif button,
  .ligne-promotion,
  .caisse-overlay-carte,
  .fiche
) {
  border-color: var(--kapella-bord);
  border-radius: var(--kapella-rayon);
  background-color: var(--kapella-blanc);
  box-shadow: var(--kapella-ombre);
}

/* Les catégories de la caisse sont des cartes dans ce thème : leur contenu
   garde une respiration régulière au lieu de toucher les bords de la surface. */
body.theme-gestion .caisse-produits .bloc-categorie {
  padding: 1rem;
}

body.theme-gestion .caisse-produits .bloc-categorie + .bloc-categorie {
  margin-top: 1rem;
}

body.theme-gestion .caisse-produits .titre-categorie {
  margin: 0 0 .75rem;
}

body.theme-gestion .caisse-produits .caisse-grille {
  margin-bottom: 0;
}

body.theme-gestion .carte-coach:hover,
body.theme-gestion .carte-indicateur:hover {
  border-color: var(--gigi-lichen);
  box-shadow: var(--kapella-ombre-haute);
}

body.theme-gestion :is(
  .sous-nav-parametres,
  .sous-nav-rapports,
  .sous-nav-facturation,
  .sous-nav-wellness,
  .caisse-entete-liens,
  .onglets
) {
  border-color: var(--kapella-bord);
}

body.theme-gestion :is(
  .sous-nav-parametres,
  .sous-nav-rapports,
  .sous-nav-facturation,
  .sous-nav-wellness
) a {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  min-height: 44px;
  padding: .65rem .1rem;
  color: var(--gigi-muet);
  background: transparent;
}

body.theme-gestion :is(.sous-nav-parametres, .sous-nav-rapports, .sous-nav-facturation, .sous-nav-wellness) {
  gap: .3rem 1.4rem;
  padding-bottom: 0;
  border-bottom: 1px solid var(--gigi-bord);
}

body.theme-gestion :is(
  .sous-nav-parametres,
  .sous-nav-rapports,
  .sous-nav-facturation,
  .sous-nav-wellness
) a.actif,
body.theme-gestion .onglets button.actif {
  color: var(--kapella-primaire);
  border-bottom-color: var(--gigi-rouge);
  background: transparent;
}

body.theme-gestion :is(
  .table-membres,
  .table-caisse,
  .echeancier,
  .historique-credits,
  .table-remu
) {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--kapella-bord);
  border-radius: var(--kapella-rayon);
  background: var(--kapella-blanc);
  box-shadow: var(--kapella-ombre);
}

body.theme-gestion :is(
  .table-membres,
  .table-caisse,
  .echeancier,
  .historique-credits,
  .table-remu
) th {
  background: var(--kapella-fond);
  color: var(--kapella-encre);
  font-weight: 700;
}

body.theme-gestion :is(
  .table-membres,
  .table-caisse,
  .echeancier,
  .historique-credits,
  .table-remu
) th,
body.theme-gestion :is(
  .table-membres,
  .table-caisse,
  .echeancier,
  .historique-credits,
  .table-remu
) td {
  border-color: var(--kapella-bord);
}

body.theme-gestion .messages-gestion li {
  border-radius: var(--gigi-rayon-controle);
  box-shadow: var(--kapella-ombre);
}

body.theme-gestion .resultats,
body.theme-gestion .cloche-panneau {
  border: 1px solid var(--kapella-bord);
  border-radius: var(--kapella-rayon);
  box-shadow: var(--kapella-ombre-haute);
}

body.theme-gestion .drawer {
  border-left-color: var(--kapella-bord);
  background: var(--kapella-surface-douce);
  box-shadow: -10px 0 35px rgba(56, 37, 31, .16);
}

/* Marketing : formulaire et aperçu de l'actualité du club. */
body.theme-gestion .editeur-actualite {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  max-width: 64rem;
  gap: 1.5rem;
}

body.theme-gestion .editeur-actualite > * {
  min-width: 0;
}

body.theme-gestion .editeur-actualite > .erreur {
  grid-column: 1 / -1;
  margin: 0;
}

body.theme-gestion .editeur-actualite > .form-coach {
  padding: 1.25rem;
  border: 1px solid var(--gigi-bord);
  border-radius: var(--gigi-rayon);
  background: var(--gigi-surface);
  box-shadow: var(--gigi-ombre);
}

/* Le titre sans type explicite et le champ URL doivent aussi être stylés. */
body.theme-gestion .editeur-actualite .champ > :is(input:not([type="hidden"]), textarea) {
  width: 100%;
  min-width: 0;
  padding: .7rem .85rem;
  border-width: 1px;
  border-style: solid;
  font: inherit;
}

body.theme-gestion .editeur-actualite .champ > input:not([type="hidden"]) {
  min-height: 48px;
}

body.theme-gestion .editeur-actualite .champ > textarea {
  min-height: 128px;
  resize: vertical;
}

body.theme-gestion .editeur-actualite > div > .muet:first-child {
  margin: 0 0 .75rem;
}

body.theme-gestion .editeur-actualite .apercu-actualite {
  padding: 1.25rem;
  gap: .6rem;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  body.theme-gestion .editeur-actualite {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------------------
   Espace coach
   ------------------------------------------------------------------------- */

/* Le formulaire de première connexion utilise le layout client minimal. */
body.theme-client .profil-coach-completion .formulaire-profil-coach {
  display: grid;
  gap: 1.25rem;
}

body.theme-client .profil-coach-completion .champ-profil-coach label {
  display: grid;
  gap: .5rem;
  margin: 0;
}

body.theme-client .profil-coach-completion .champ-profil-coach input {
  margin: 0;
  min-width: 0;
  min-height: 48px;
  font-size: 1rem;
}

body.theme-client .profil-coach-completion .champ-profil-coach .erreur {
  margin: .5rem 0 0;
  color: var(--gigi-rouge);
  font-size: .875rem;
}

body.theme-client .profil-coach-completion .formulaire-profil-coach + form {
  margin-top: 1rem;
}

body.theme-coach {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

body.theme-coach .tete-coach {
  min-height: 72px;
  padding: max(.8rem, env(safe-area-inset-top, 0px)) 1rem .8rem;
  border-color: var(--kapella-bord);
  background: var(--kapella-blanc);
  box-shadow: 0 1px 0 rgba(139, 51, 32, .04);
}

body.theme-coach .tete-coach .marque small {
  color: var(--kapella-secondaire);
}

body.theme-coach .tete-coach .sortir {
  min-height: 38px;
  border: 1px solid var(--kapella-bord);
  border-radius: var(--gigi-rayon-controle);
  color: var(--kapella-muet);
}

body.theme-coach main {
  padding-top: 1.5rem;
}

body.theme-coach :is(
  .kpi-coach,
  .remu-provisoire,
  .seance-coach,
  .inscrit-coach,
  .fiche-coach,
  .vide,
  .table-remu-conteneur
) {
  border: 1px solid var(--kapella-bord);
  border-radius: var(--kapella-rayon);
  background: var(--kapella-blanc);
  box-shadow: var(--kapella-ombre);
}

body.theme-coach .prochain-cours {
  border-radius: var(--kapella-rayon);
  background: var(--kapella-primaire);
  box-shadow: var(--kapella-ombre);
}

body.theme-coach .prochain-cours:hover {
  background: var(--kapella-secondaire);
}

body.theme-coach .nav-semaine a,
body.theme-coach .boutons-presence label,
body.theme-coach .valider-appel,
body.theme-coach .appeler {
  border-radius: var(--gigi-rayon-controle);
}

/* Espace coach : hiérarchie des liens et navigation persistante. */
body.theme-coach .onglets-coach {
  border-color: var(--kapella-bord);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -3px 14px rgba(82, 48, 38, .07);
  gap: .4rem;
  padding: .4rem max(.75rem, env(safe-area-inset-left, 0px))
    calc(.4rem + env(safe-area-inset-bottom, 0px));
}

body.theme-coach .onglets-coach a {
  min-width: 0;
  padding: .45rem .6rem;
  border-radius: 12px;
  color: var(--gigi-muet);
  text-decoration: none;
}

body.theme-coach .onglets-coach a:hover:not(.actif) {
  background: var(--gigi-lichen-doux);
  color: var(--gigi-encre);
}

body.theme-coach .onglets-coach a.actif {
  background: var(--gigi-rouge-doux);
  color: var(--gigi-rouge);
  box-shadow: inset 0 0 0 1px rgb(139 51 32 / .08);
}

body.theme-coach :is(
  .seance-coach:not(.annulee),
  .remu-provisoire,
  .inscrit-coach .nom
) {
  color: var(--gigi-encre);
}

body.theme-coach :is(.seance-coach:not(.annulee), .remu-provisoire):hover {
  border-color: var(--gigi-lichen);
  box-shadow: var(--gigi-ombre-haute);
}

body.theme-coach .seance-coach:not(.annulee) .remplissage {
  background: var(--gigi-lichen-doux);
  color: var(--gigi-lichen-texte);
}

body.theme-coach :is(
  .kpi-coach small,
  .agenda-sync-coach .muet,
  .agenda-dialogue .muet,
  .jour-titre:not(.aujourd-hui),
  .seance-coach:not(.annulee) .infos small,
  .fiche-coach dt,
  .journal-coach li
) {
  color: var(--gigi-muet);
}

/* Appeler reste une action secondaire ; les états de présence sont distincts. */
body.theme-coach a.appeler {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1rem;
  border: 1px solid var(--gigi-lichen);
  background: var(--gigi-lichen-doux);
  color: var(--gigi-encre);
  line-height: 1.4;
}

body.theme-coach a.appeler:hover {
  background: var(--gigi-lichen);
  color: var(--gigi-encre);
}

/* Les coordonnées longues se replient sans déplacer les autres actions. */
body.theme-coach .inscrit-coach .nom {
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

body.theme-coach .fiche-coach dd {
  overflow-wrap: anywhere;
}

body.theme-coach .table-remu-conteneur {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

body.theme-coach .table-remu {
  border-radius: 0;
  box-shadow: none;
}

body.theme-coach .table-remu th {
  background: var(--gigi-lichen-doux);
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

body.theme-kapella :is(button, input, select, textarea) {
  font-family: var(--gigi-police);
}

body.theme-kapella :is(.muet, .resultat small) {
  color: var(--gigi-muet);
}

body.theme-gestion .entete-page > .bouton-lien:not(.secondaire) {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  border: 1px solid transparent;
  background: var(--gigi-rouge);
  color: #fff;
  box-shadow: 0 3px 8px rgb(139 51 32 / .14);
}

body.theme-gestion .entete-page > .bouton-lien:not(.secondaire):hover {
  background: var(--gigi-rouge-survol);
}

body.theme-gestion .carte-coach:not(.carte-produit):not(.carte-coach--profil) {
  padding: 1.35rem;
  gap: .65rem;
}

body.theme-gestion .carte-coach:hover {
  transform: none;
}

body.theme-gestion .etiquette-activite,
body.theme-gestion .avatar.initiales {
  background: var(--gigi-lichen-doux);
  border-color: var(--gigi-bord);
  color: var(--gigi-lichen-texte);
}

body.theme-gestion .carte-coach .bouton-lien.secondaire {
  align-self: flex-start;
  min-height: 40px;
  padding: .5rem .9rem;
  color: var(--gigi-encre);
}

body.theme-gestion .drawer .fiche {
  border-radius: 0;
}

/* Le voile recouvre aussi la recherche du bandeau, sous la fiche (z-index:60). */
body.theme-gestion .voile {
  z-index: 55;
}

/* Le texte reste sur des surfaces opaques ; seuls les éléments de navigation
   prennent le reflet et la transparence du verre, si le navigateur le permet. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.theme-gestion .laterale nav,
  body.theme-gestion .recherche input,
  body.theme-gestion .cloche summary,
  body.theme-client .topbar,
  body.theme-client .tabbar,
  body.theme-coach .tete-coach,
  body.theme-coach .onglets-coach {
    background-color: var(--gigi-verre);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.theme-gestion .laterale nav,
  body.theme-gestion .recherche input,
  body.theme-gestion .cloche summary,
  body.theme-client .topbar,
  body.theme-client .tabbar,
  body.theme-coach .tete-coach,
  body.theme-coach .onglets-coach {
    background: var(--gigi-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 900px) {
  body.theme-gestion.navigation-ouverte {
    overflow: hidden;
  }

  body.theme-gestion .laterale {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    width: min(19rem, 88vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    padding: max(1rem, env(safe-area-inset-top, 0px)) .8rem
      max(1rem, env(safe-area-inset-bottom, 0px));
    margin: 0;
    background: var(--gigi-surface);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--kapella-bord);
    box-shadow: 12px 0 32px rgba(56, 37, 31, .22);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }

  body.theme-gestion .laterale.ouverte {
    transform: translateX(0);
    visibility: visible;
    transition: transform .2s ease;
  }

  body.theme-gestion .laterale .marque {
    align-self: stretch;
    min-height: 44px;
    padding: .15rem 3rem .8rem .65rem;
  }

  body.theme-gestion .laterale nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    overflow: visible;
    border: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.theme-gestion .laterale nav a {
    flex: none;
    width: 100%;
    min-height: 44px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: .7rem;
    padding: .65rem .7rem;
    border-radius: var(--gigi-rayon-controle);
    font-size: .92rem;
    text-align: left;
  }

  body.theme-gestion .laterale nav a.actif {
    background: var(--gigi-rouge);
  }

  body.theme-gestion .laterale nav a.actif::after {
    top: .45rem;
    right: auto;
    bottom: .45rem;
    left: 0;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
  }

  body.theme-gestion .laterale .sortie {
    align-self: stretch;
    margin-top: auto;
  }

  body.theme-gestion .laterale .sortie button {
    width: 100%;
  }

  body.theme-gestion .fermer-navigation {
    border-radius: 50%;
    border-color: var(--kapella-bord);
    background: var(--kapella-fond);
  }

  body.theme-gestion .ouvrir-navigation {
    border-color: var(--kapella-bord);
    border-radius: var(--gigi-rayon-controle);
    background: var(--kapella-blanc);
    color: var(--kapella-primaire);
    box-shadow: var(--kapella-ombre);
  }

  body.theme-gestion .barre {
    position: sticky;
    top: 0;
    left: auto;
    transform: none;
    z-index: 30;
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: max(.55rem, env(safe-area-inset-top, 0px)) .75rem .55rem;
    background: var(--kapella-blanc);
    border-bottom: 1px solid var(--kapella-bord);
  }

  body.theme-gestion .recherche {
    max-width: none;
  }

  body.theme-gestion :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px;
  }

  body.theme-gestion main {
    padding: 1rem .75rem 2rem;
  }
}

@media (max-width: 719px) {
  body.theme-client main {
    padding-top: 1rem;
  }

  body.theme-client .connexion-cadre {
    box-shadow: none;
  }

  body.theme-client .tabbar a,
  body.theme-coach .onglets-coach a {
    min-height: 58px;
  }
}

@media (max-width: 480px) {
  body.theme-kapella h1 {
    font-size: 1.45rem;
  }

  body.theme-gestion main {
    padding-right: .6rem;
    padding-left: .6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-kapella *,
  body.theme-kapella *::before,
  body.theme-kapella *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body.theme-kapella {
    background: #fff;
    color: #000;
  }
  body.theme-gestion .laterale,
  body.theme-gestion .barre {
    display: none;
  }
}

/* Adaptations des pages de gestion ; les couleurs métier restent distinctes. */
@media screen {
  body.theme-gestion .fc {
    --fc-border-color: var(--gigi-bord);
    --fc-page-bg-color: var(--gigi-surface);
    --fc-neutral-bg-color: var(--gigi-lichen-doux);
    --fc-neutral-text-color: var(--gigi-muet);
    --fc-today-bg-color: #f1f4f0;
    --fc-button-text-color: var(--gigi-encre);
    --fc-button-bg-color: var(--gigi-surface);
    --fc-button-border-color: var(--gigi-bord);
    --fc-button-hover-bg-color: var(--gigi-lichen-doux);
    --fc-button-hover-border-color: var(--gigi-lichen);
    --fc-button-active-bg-color: var(--gigi-rouge);
    --fc-button-active-border-color: var(--gigi-rouge);
  }
  body.theme-gestion .fc .fc-button {
    color: var(--gigi-encre); background: var(--gigi-surface);
    border-color: var(--gigi-bord); box-shadow: none;
    font-family: inherit; font-weight: 600;
  }
  body.theme-gestion .fc .fc-toolbar-title {
    font-size: clamp(1.05rem, 1.8vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -.03em;
  }
  body.theme-gestion .fc .fc-button-group > .fc-button:first-child {
    border-radius: var(--gigi-rayon-controle) 0 0 var(--gigi-rayon-controle);
  }
  body.theme-gestion .fc .fc-button-group > .fc-button:last-child {
    border-radius: 0 var(--gigi-rayon-controle) var(--gigi-rayon-controle) 0;
  }
  body.theme-gestion .fc .fc-button:hover:not(:disabled):not(.fc-button-active) {
    color: var(--gigi-lichen-texte); background: var(--gigi-lichen-doux);
    border-color: var(--gigi-lichen);
  }
  body.theme-gestion .fc .fc-button-primary:not(:disabled).fc-button-active,
  body.theme-gestion .fc .fc-button-primary:not(:disabled):active {
    color: #fff; background: var(--gigi-rouge); border-color: var(--gigi-rouge);
  }
  body.theme-gestion .fc .fc-button:disabled {
    color: var(--gigi-muet); background: var(--gigi-fond);
    border-color: var(--gigi-bord); opacity: .65;
  }
  body.theme-gestion .fc .fc-button:focus-visible {
    outline: 2px solid var(--gigi-rouge); outline-offset: 3px;
    box-shadow: none;
  }
  body.theme-gestion .fc :is(.fc-col-header-cell-cushion, .fc-daygrid-day-number) {
    color: var(--gigi-encre); text-decoration: none;
  }
  body.theme-gestion .fc .fc-timegrid-slot-label { color: var(--gigi-muet); }
  body.theme-gestion .fc .fc-timegrid-slot-minor { border-top-color: var(--gigi-bord); }
  body.theme-gestion :is(#calendrier, .agenda-calendrier, .panneau-contenu) {
    background: var(--gigi-surface); border-radius: var(--gigi-rayon);
    box-shadow: var(--gigi-ombre);
  }
  body.theme-gestion .carte-cours {
    background: var(--gigi-surface); color: var(--gigi-encre);
    border-top-color: var(--gigi-bord); border-right-color: var(--gigi-bord);
    border-bottom-color: var(--gigi-bord); border-radius: var(--gigi-rayon);
    box-shadow: var(--gigi-ombre);
  }
  body.theme-gestion .carte-cours-heure { border-right-color: var(--gigi-bord); }
  body.theme-gestion :is(.carte-rendez-vous, .ev-rendez-vous) {
    color: var(--gigi-lichen-texte); background: var(--gigi-lichen-doux);
    border-color: var(--gigi-bord); border-left-color: var(--gigi-lichen);
    border-radius: var(--gigi-rayon-controle);
  }
  body.theme-gestion .carte-rendez-vous-heure { border-right-color: var(--gigi-lichen); }
  body.theme-gestion :is(.carte-rendez-vous-heure small, .carte-rendez-vous-infos span,
    .ev-rendez-vous small, .etiquette-rendez-vous, .detail-rendez-vous dt) {
    color: var(--gigi-lichen-texte);
  }
  body.theme-gestion :is(.bloc-modifier, .bloc-historique) {
    background: var(--gigi-fond); border-color: var(--gigi-bord);
    border-radius: var(--gigi-rayon-controle);
  }
  body.theme-gestion :is(.coach-puce, .etiquette-activite) {
    background: var(--gigi-lichen-doux); color: var(--gigi-lichen-texte);
    border-color: transparent;
  }
  body.theme-gestion :is(.dashboard-prochain, .dashboard-decouvertes) {
    background: var(--gigi-surface); border-radius: var(--gigi-rayon);
    box-shadow: var(--gigi-ombre); border-color: var(--gigi-bord);
  }
  body.theme-gestion .dashboard-prochain { border-top-color: var(--couleur-prochain); }
  body.theme-gestion .dashboard-prochain-sauna { --couleur-prochain: var(--gigi-lichen-texte); }
  body.theme-gestion .dashboard-prochain-note {
    background: var(--gigi-lichen-doux); color: var(--gigi-lichen-texte);
    border-radius: var(--gigi-rayon-controle);
  }
  body.theme-gestion .dashboard-prochain-remplissage progress {
    background: var(--gigi-lichen-doux);
  }
  body.theme-gestion .dashboard-prochain-remplissage progress::-webkit-progress-bar {
    background: var(--gigi-lichen-doux);
  }
  body.theme-gestion :is(.table-membres, .table-caisse, .echeancier,
    .historique-credits, .table-remu) {
    background: var(--gigi-surface); border-color: var(--gigi-bord);
    border-radius: var(--gigi-rayon); box-shadow: var(--gigi-ombre);
  }
  body.theme-gestion :is(.table-membres, .table-caisse, .echeancier,
    .historique-credits, .table-remu) th {
    color: var(--gigi-muet); background: var(--gigi-surface);
    font-weight: 500; text-transform: none; letter-spacing: 0;
  }
  body.theme-gestion :is(.table-membres, .table-caisse, .echeancier,
    .historique-credits, .table-remu) :is(th, td) { border-color: var(--gigi-bord); }
  body.theme-gestion .table-membres tbody tr:hover { background: #f3f5f2; }
  body.theme-gestion .fiche dt { color: var(--gigi-muet); }
  body.theme-gestion .fiche-tete {
    background: var(--gigi-surface); border-bottom-color: var(--gigi-bord);
  }
  body.theme-gestion .fiche .onglets {
    background: var(--gigi-surface); border-color: var(--gigi-bord);
  }
  body.theme-gestion .fiche .onglets button {
    color: var(--gigi-muet); background: transparent; border-radius: 0;
  }
  body.theme-gestion .fiche .onglets button.actif {
    color: var(--gigi-rouge); border-bottom-color: var(--gigi-rouge);
    background: var(--gigi-rouge-doux);
  }
  body.theme-gestion .carte-coach { border-radius: var(--gigi-rayon); }
  body.theme-gestion a.carte-produit {
    --produit-ton: var(--gigi-lichen-texte);
    --produit-fond: var(--gigi-lichen-doux);
    color: var(--gigi-encre);
  }
  body.theme-gestion a.carte-produit::before { background: var(--gigi-lichen); }
  body.theme-gestion a.carte-produit:hover {
    border-color: var(--gigi-lichen); box-shadow: var(--gigi-ombre);
  }
  body.theme-gestion .grille-produits--hors-boutique a.carte-produit {
    background: var(--gigi-fond);
  }
  body.theme-gestion :is(.prix-produit-gestion small, .produits-archives summary,
    .activites-vides) { color: var(--gigi-muet); }
  body.theme-gestion .details-produit-gestion .etiquette-activite {
    color: var(--gigi-lichen-texte);
  }
}

/* Les cartes mobiles et le défilement des tableaux restent fonctionnels. */
@media screen and (max-width: 700px) {
  body.theme-gestion .table-membres {
    background: transparent; border: 0; box-shadow: none; overflow: visible;
  }
  body.theme-gestion .table-membres tbody tr {
    background: var(--gigi-surface); border-color: var(--gigi-bord);
    border-radius: var(--gigi-rayon); box-shadow: var(--gigi-ombre);
  }
  body.theme-gestion :is(.table-caisse, .echeancier, .historique-credits, .table-remu) {
    display: block; max-width: 100%; overflow-x: auto;
    overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch;
  }
  body.theme-gestion .panneau-contenu { box-shadow: none; }
  body.theme-gestion .calendrier-et-panneau.panneau-ouvert .panneau {
    background: var(--gigi-fond);
  }
}