/* Le template « Équilibre » du Site du studio.
 *
 * Mise en page reprise de `demo-site/`, dont la structure avait été relevée au
 * getComputedStyle sur un vrai site de studio. Ce qui change ici : plus une
 * seule couleur n'est écrite en dur.
 *
 * La maquette d'origine n'utilisait PAS que ses neuf variables : une quinzaine
 * de couleurs y étaient littérales — `#fff`, `#e9e0d8`, `#cbbdb2`, `#6b5347`,
 * `#f3ece6`, `#3a3a3a`, `#6b3f47`, `#cbb8ab`, `#e0d4ca`, `#b9a89d`, `#f0e4da`
 * et les `rgba(38,24,24,…)` des dégradés. Ce sont exactement les six rôles que
 * le serveur calcule et que la base ne range pas ; les transposer une à une est
 * ce qui les a fait apparaître.
 *
 * Deux littéraux subsistent, et une seule fois chacun : le texte posé SUR une
 * photo est blanc, et le voile qui le porte est toujours sombre. Une photo n'a
 * pas de clarté dérivable.
 *
 * Deux polices sont tenues pour siennes par le template, au même titre que ses
 * rayons et ses marges : Outfit pour les titres, Archivo Black pour le bandeau
 * défilant. Elles ne se dérivent de rien et ne changent pas d'un studio à
 * l'autre. La police CHOISIE par le studio porte le texte courant.
 *
 * Un seul écart assumé avec la maquette : les plans s'inversent — la surface
 * descend d'un cran vers le pôle d'encre, là où la maquette posait des blocs
 * plus clairs que le fond. C'est ce qui garde la dérivation monotone et à une
 * seule branche, et c'est le prix de n'écrire aucune couleur en dur.
 */

/* La navigation pointe vers des ancres, et c'est l'élément de défilement de la
   page qui porte la règle — pas le conteneur du template. */
html:has(.st) { scroll-behavior: smooth; }

.st {
  --st-marge: 28px;
  /* Constantes de dessin, PAS des valeurs de thème : elles ne passent donc pas
     par `themeVars`. Un studio qui choisit Outfit comme police obtient Outfit
     partout, sans cas particulier — la retombée fait le travail. */
  --st-font-titre: 'Outfit', var(--st-font);
  --st-font-marquee: 'Archivo Black', 'Outfit', var(--st-font);
  background: var(--st-bg);
  color: var(--st-text);
  font-family: var(--st-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.st h1, .st h2, .st h3 {
  font-family: var(--st-font-titre);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

.st a { color: inherit; text-decoration: none; }

.st img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Navigation ─────────────────────────────────────────────────────────── */

.st-nav {
  background: var(--st-secondary);
  color: var(--st-secondary-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
  height: 88px;
  position: relative;
  z-index: 20;
}

.st-nav-liens { display: flex; align-items: center; gap: 34px; }

.st-nav a {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--st-secondary-ink-muted);
  transition: color .2s;
}
.st-nav a:hover { color: var(--st-secondary-ink); }

/* La porte de retour vers Pilatly : plus petite et plus pâle que la navigation
   du studio, qu'elle ne doit pas concurrencer. */
.st-nav a.st-compte {
  font-size: 11px;
  opacity: .68;
  border-left: 1px solid var(--st-border);
  padding-left: 16px;
}
.st-nav a.st-compte:hover { opacity: 1; }

.st-nav a.st-actif {
  border: 1px solid var(--st-secondary-ink-muted);
  border-radius: 999px;
  padding: 9px 20px;
  color: var(--st-secondary-ink);
}

.st-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.st-logo-image { width: 34px; height: 34px; border-radius: 999px; overflow: hidden; flex: none; }
/* Le nom au-dessus, le sur-titre espacé dessous : c'est la marque du studio,
   pas une ligne de navigation de plus. */
.st-logo-texte { text-align: center; }
.st-logo-nom {
  font-weight: 800;
  font-size: 30px;
  color: var(--st-secondary-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.st-logo-sur {
  display: block;
  font-size: 8px;
  letter-spacing: 0.42em;
  color: var(--st-secondary-ink-muted);
  padding-left: 4px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.st-hero {
  position: relative;
  height: 690px;
  border-radius: 0 0 var(--st-radius-bloc) var(--st-radius-bloc);
  overflow: hidden;
  margin: 0 8px;
  background: var(--st-veil);
}
.st-hero > img { position: absolute; inset: 0; }
.st-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--st-veil-rgb), 0) 22%,
    rgba(var(--st-veil-rgb), .52) 52%,
    rgba(var(--st-veil-rgb), .78) 82%
  );
}

/* Le texte du hero est blanc, et c'est le seul littéral de la feuille avec le
   voile : il est posé sur une PHOTO, dont aucune clarté ne se dérive. Le voile
   est toujours sombre, donc le blanc s'y lit toujours. */
.st-hero-texte {
  position: relative;
  z-index: 2;
  max-width: 470px;
  margin-left: auto;
  margin-right: 96px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}
.st-hero-texte h1 {
  font-size: 37px;
  line-height: 1.06;
  margin-bottom: 14px;
  /* Un gérant qui coupe son titre en deux lignes obtient deux lignes. La
     maquette le fait avec un <br> ; ici c'est une donnée. */
  white-space: pre-line;
}
.st-hero-texte p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 26px;
  color: rgba(255, 255, 255, .88);
  max-width: 415px;
}

/* ── Boutons ────────────────────────────────────────────────────────────── */

/* ⚠ `.st .st-btn` et non `.st-btn` : `.st a { color: inherit }` plus haut vaut
   (0,1,1) en spécificité et bat un simple `.st-btn` à (0,1,0). Sans ce
   redoublement, AUCUN bouton ne portait `color_button_text` — ils héritaient de
   la couleur du bloc qui les entoure, et le bouton clair de la carte d'offre
   se retrouvait écrit dans la couleur de son propre fond, donc invisible.
   Le garde-fou mesure « le texte du bouton plein » : le template doit
   l'appliquer, sinon la mesure ne porte sur rien. */
.st .st-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--st-accent);
  color: var(--st-button-text);
  border-radius: 999px;
  padding: 15px 26px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: background .2s;
}
.st .st-btn:hover, .st .st-btn:active { background: var(--st-accent-press); }
.st .st-btn .st-rond {
  width: 22px; height: 22px;
  border: 1px solid currentColor;
  opacity: .85;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
}
/* Le bouton clair ne se pose que SUR le bloc secondaire : il porte l'encre de
   ce bloc, et non celle des boutons pleins. */
.st .st-btn-clair { background: var(--st-secondary-ink); color: var(--st-secondary); }
.st .st-btn-clair:hover, .st .st-btn-clair:active {
  background: var(--st-secondary-ink-muted);
  color: var(--st-secondary);
}

/* ── Blocs de section ───────────────────────────────────────────────────── */

.st-enveloppe { padding: 0 var(--st-marge); }

.st-bandeau {
  background: var(--st-secondary);
  color: var(--st-secondary-ink);
  border-radius: var(--st-radius-bloc);
  padding: 34px 44px;
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.st-bandeau h2 { font-size: 33px; }
.st-fleche { font-size: 30px; opacity: .9; }

.st-bloc {
  background: var(--st-surface);
  border-radius: var(--st-radius-bloc);
  margin-top: 22px;
  padding: 34px;
}

/* ── Grille de cartes ───────────────────────────────────────────────────── */

.st-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.st-cartes[data-n='1'] { grid-template-columns: minmax(0, 420px); }
.st-cartes[data-n='2'] { grid-template-columns: repeat(2, 1fr); }
.st-cartes[data-n='3'] { grid-template-columns: repeat(3, 1fr); }

.st-carte {
  position: relative;
  border-radius: var(--st-radius-carte);
  overflow: hidden;
  aspect-ratio: 10 / 13;
  background: var(--st-veil);
}
.st-carte > img { position: absolute; inset: 0; transition: transform .5s; }
.st-carte:hover > img { transform: scale(1.04); }
.st-carte::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--st-veil-rgb), .28) 0 30%,
    rgba(var(--st-veil-rgb), .05) 55%,
    rgba(var(--st-veil-rgb), .5) 100%
  );
}
/* Le titre et le prix sont posés ENSEMBLE, dans un seul bloc.
 *
 * La maquette les plaçait à deux hauteurs fixes, 22 px et 58 px, parce que ses
 * quatre cours s'appelaient REFORMER, MAT, PARTICULIER et LAGREE. Un vrai
 * catalogue dit « Pilates Reformer — tous niveaux » : le titre passe à trois
 * lignes et recouvre le prix, qui ne bouge pas. */
.st-carte-entete {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 2;
  text-align: center;
  padding: 22px 16px 0;
}
/* Le voile de la carte s'arrête à 30 % de sa hauteur. La maquette pouvait s'en
   contenter : ses titres tenaient sur une ligne, et le prix restait dans la
   bande sombre. « Pilates Reformer — tous niveaux » en prend trois et pousse le
   prix DANS la zone transparente, où il devient illisible sur une salle claire.
   L'entête porte donc son propre voile, qui grandit avec elle et s'efface en
   bas — sans bord franc, quelle que soit la longueur du titre.
   Les vignettes éditoriales en sont exclues : leur titre est centré au milieu
   de la carte, où un voile posé en haut ferait une barre en travers. */
.st-cartes .st-carte-entete {
  /* Le dégradé ne s'efface QUE dans les 34 px de retrait du bas, sous le
     dernier mot. Une décroissance étalée sur toute la hauteur laissait le prix
     — toujours la dernière ligne — dans la partie déjà claire du voile. */
  padding-bottom: 34px;
  background: linear-gradient(
    180deg,
    rgba(var(--st-veil-rgb), .50) 0%,
    rgba(var(--st-veil-rgb), .46) calc(100% - 34px),
    rgba(var(--st-veil-rgb), 0) 100%
  );
}
.st-carte-titre {
  color: #fff;
  text-shadow: 0 1px 14px rgba(var(--st-veil-rgb), .55);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  /* Trois lignes suffisent à dire un nom de cours ; au-delà, la carte se
     remplit de texte et la photo ne se voit plus. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.st-carte-prix {
  margin-top: 6px;
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
  letter-spacing: .08em;
  /* Même ombre que le titre : le voile ne suffit pas sur une photo de salle
     très claire, et une durée illisible vaut une durée absente. */
  text-shadow: 0 1px 10px rgba(var(--st-veil-rgb), .7);
}
.st-carte-btn {
  position: absolute; bottom: 20px; left: 26px; right: 26px;
  z-index: 2;
  justify-content: center;
  padding: 13px 10px;
  font-size: 11px;
  /* « Découvrir le cours » tient tout juste dans la largeur d'une carte de
     grille à quatre colonnes. Au repli il donne une pastille sur deux lignes,
     deux fois plus haute que les autres — la seule chose qu'on remarque encore
     sur la carte. */
  white-space: nowrap;
}

/* ── Communauté ─────────────────────────────────────────────────────────── */

.st-duo { display: grid; grid-template-columns: 1fr 1.05fr; gap: 46px; align-items: center; }
.st-duo h2 { font-size: 42px; line-height: 1.04; color: var(--st-secondary); margin-bottom: 20px; }
.st-duo p { margin: 0 0 14px; max-width: 460px; color: var(--st-muted); }
.st-pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.st-pastille {
  background: var(--st-surface-alt);
  color: var(--st-accent-ink);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
}
.st-duo-media { border-radius: var(--st-radius-carte); overflow: hidden; aspect-ratio: 4 / 3; }

/* ── Bandeau défilant ───────────────────────────────────────────────────── */
/* ⚠ PAS d'aplat de couleur derrière. Le nom du studio est posé à même le fond
   de page, en très grand, et c'est tout l'effet : un aplat le transformerait en
   bandeau publicitaire. La taille tient par Archivo Black, chargée exprès. */

.st-marquee {
  overflow: hidden;
  margin: 52px 0 44px;
}
.st-marquee-piste {
  display: flex;
  gap: 42px;
  width: max-content;
  animation: st-defile 26s linear infinite;
}
.st-marquee span {
  font-family: var(--st-font-marquee);
  font-size: 74px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.02em;
  color: var(--st-text);
}
@keyframes st-defile { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .st-marquee-piste { animation: none; }
}

/* ── Bloc des Offres ────────────────────────────────────────────────────── */

/* La carte d'offre unique de la maquette a disparu avec la section Tarifs : elle
   montrait l'offre la moins chère et ne vendait rien. À sa place, l'iframe du
   widget de tarifs, qui montre toutes les Offres et sait encaisser (ADR 0004).
   L'ancre `#tarifs` de la navigation, elle, n'a pas bougé. */
.st-offres { margin-top: 34px; }
.st-offres > h2 {
  font-size: 33px;
  color: var(--st-secondary);
  margin-bottom: 22px;
}
/* La hauteur est posée en attribut par le composant, d'après le message de
   redimensionnement du widget : la feuille ne doit surtout pas la figer. */
.st-offres iframe { width: 100%; border: 0; display: block; }

/* ── Vignettes éditoriales ──────────────────────────────────────────────── */

/* Mêmes cartes que les cours, en plus large et le titre au milieu. C'est la
   maquette qui procède ainsi — elle réutilise `.carte` telle quelle — et une
   seconde famille de cartes n'apporterait qu'une seconde chose à tenir. */
.st-edito { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.st-edito[data-n='1'] { grid-template-columns: minmax(0, 460px); }
.st-edito[data-n='2'] { grid-template-columns: repeat(2, 1fr); }
.st-edito .st-carte { aspect-ratio: 16 / 11; }
.st-edito .st-carte::after {
  background: linear-gradient(
    180deg,
    rgba(var(--st-veil-rgb), .5) 0%,
    rgba(var(--st-veil-rgb), .28) 55%,
    rgba(var(--st-veil-rgb), .55) 100%
  );
}
/* ⚠ Le nom est posé EN BAS, et non au milieu comme dans la maquette.
   La maquette centre le sien parce que ses vignettes montrent une salle et des
   machines. Ici la vignette montre un enseignant : un nom en travers du visage
   est la seule chose qu'on remarque, et c'est le visage qu'on venait voir. */
.st-edito .st-carte-entete {
  top: auto;
  bottom: 0;
  padding: 0 22px 22px;
  text-align: left;
}
.st-edito .st-carte-titre { font-size: 21px; line-height: 1.25; }

/* Le sous-titre et la présentation, sous le nom.
 *
 * Le template refusait la présentation : « un paragraphe posé sur une photo se
 * lit mal ». Le refus est levé, et ce qui le rendait vrai est traité ici — le
 * voile de la vignette porte le texte, l'ombre le décolle d'une photo claire, et
 * la coupe à DEUX lignes empêche un enseignant qui a écrit trois paragraphes de
 * remplir sa propre vignette. La coupe est un fait de rendu, jamais de donnée :
 * l'API sert la présentation entière, et l'app cliente en montre trois lignes. */
.st-edito .st-carte-sur {
  margin-top: 5px;
  color: rgba(255, 255, 255, .92);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(var(--st-veil-rgb), .7);
}
.st-edito .st-carte-bio {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  line-height: 1.45;
  text-shadow: 0 1px 10px rgba(var(--st-veil-rgb), .7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Le voile de la vignette s'arrêtait où le nom s'arrêtait. Deux lignes de plus
   dessous les posaient sur la photo nue, où elles ne se lisent pas. */
.st-edito .st-carte-entete {
  background: linear-gradient(
    180deg,
    rgba(var(--st-veil-rgb), 0) 0%,
    rgba(var(--st-veil-rgb), .58) 42%,
    rgba(var(--st-veil-rgb), .74) 100%
  );
  padding-top: 44px;
}

/* ── Page introuvable ───────────────────────────────────────────────────── */

/* Deux boutons côte à côte et rien d'autre : l'accueil et le planning. Le
   visiteur s'est trompé d'adresse, il n'a pas changé d'avis sur le studio. */
.st-introuvable {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 54px 34px;
}

/* ── Pied de page ───────────────────────────────────────────────────────── */

.st-pied {
  background: var(--st-secondary);
  color: var(--st-secondary-ink-muted);
  border-radius: var(--st-radius-bloc) var(--st-radius-bloc) 0 0;
  margin: 24px 8px 0;
  padding: 46px 52px 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.st-pied h3 {
  color: var(--st-secondary-ink);
  font-size: 15px;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.st-pied p { margin: 0 0 6px; font-size: 14px; }
.st-pied a { text-decoration: underline; }
.st-pied-bas {
  grid-column: 1 / -1;
  border-top: 1px solid var(--st-secondary-rule);
  padding-top: 18px;
  font-size: 12px;
}
/* Les liens légaux passent AVANT l'attribution, sur leur propre ligne quand la
   largeur ne suffit plus. Ils ne la remplacent pas : « Propulsé par Pilatly »
   reste en pied de page, c'est l'ADR backend 0022. */
.st-pied-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 12px;
}

/* ── Pages légales ──────────────────────────────────────────────────────── */

/* Un document se lit en colonne étroite. Les trois pages sont du texte long, et
   c'est la seule chose qu'on leur demande : être lisibles. */
.st-legal { max-width: 780px; margin-inline: auto; margin-top: 34px; }
.st-legal h2 { font-size: 24px; margin: 34px 0 12px; color: var(--st-secondary); }
.st-legal h2:first-child { margin-top: 0; }
.st-legal h3 { font-size: 17px; margin: 26px 0 8px; }
.st-legal p { margin: 0 0 12px; color: var(--st-muted); }
.st-legal ul { margin: 0 0 12px; padding-left: 20px; color: var(--st-muted); }
.st-legal li { margin-bottom: 8px; }
.st-legal a { color: var(--st-accent-ink); text-decoration: underline; }

/* ── Page planning ──────────────────────────────────────────────────────── */

.st-entete-page {
  background: var(--st-secondary);
  color: var(--st-secondary-ink);
  text-align: center;
  padding: 56px 24px;
}
.st-entete-page h1 { font-size: 40px; }
.st-entete-page p { margin: 10px 0 0; color: var(--st-secondary-ink-muted); }

.st-zone-widget { padding: 40px var(--st-marge) 60px; min-height: 620px; }
.st-zone-widget iframe { width: 100%; border: 0; display: block; }

/* ── Adaptatif ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .st-cartes { grid-template-columns: repeat(2, 1fr); }
  /* Une seule colonne, comme la maquette : à 16/11 deux vignettes côte à côte
     sur une tablette donnent des bandes trop basses pour porter un titre. */
  .st-edito, .st-edito[data-n='2'] { grid-template-columns: 1fr; }
  .st-duo { grid-template-columns: 1fr; gap: 28px; }
  .st-pied { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Le logo est en `position: absolute` pour être centré sur grand écran ; à
     cette largeur il chevauchait les liens. On le remet dans le flux et on ne
     garde qu'un seul lien à droite — la réservation, celui qui compte. */
  .st-nav { padding: 0 18px; height: 66px; }
  .st-logo { position: static; transform: none; text-align: left; }
  .st-logo-nom { font-size: 21px; }
  .st-logo-sur { letter-spacing: .3em; }
  .st-nav-liens:first-child { display: none; }
  .st-nav-droite { gap: 14px; }
  .st-nav-droite a:not(.st-actif):not(.st-compte) { display: none; }
  .st-nav a.st-compte { border-left: 0; padding-left: 0; }
  .st-nav .st-actif { padding: 7px 15px; }
  .st-bandeau { flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px; }
  .st-fleche { font-size: 22px; }
  .st-hero { height: 560px; }
  /* Le dégradé horizontal assombrit la droite : sans objet quand le texte
     passe en bas. On le bascule à la verticale. */
  .st-hero::after {
    background: linear-gradient(
      180deg,
      rgba(var(--st-veil-rgb), .15) 0%,
      rgba(var(--st-veil-rgb), .35) 45%,
      rgba(var(--st-veil-rgb), .82) 100%
    );
  }
  .st-hero-texte {
    margin: 0 22px;
    top: auto;
    transform: none;
    position: absolute;
    bottom: 34px;
    max-width: none;
  }
  .st-hero-texte h1 { font-size: 28px; }
  .st-hero-texte p { max-width: none; }
  .st-cartes, .st-cartes[data-n='2'], .st-cartes[data-n='3'] { grid-template-columns: 1fr; }
  .st-bandeau h2 { font-size: 24px; }
  .st-duo h2 { font-size: 30px; }
  .st-offres > h2 { font-size: 24px; }
  .st-legal h2 { font-size: 20px; }
  .st-marquee span { font-size: 42px; }
  .st-entete-page h1 { font-size: 26px; }
}