/* ==========================================================================
   Latinea — page Tarifs
   Même grammaire que les autres feuilles de page : les jetons viennent de
   site.css, aucune valeur déjà en variable n'est réécrite en dur ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. En-tête de page
   Dispositif identique à Cours / Équipe / Événements / Contact : photo de
   fond, voile horizontal pour la lisibilité, voile vertical pour asseoir
   l'en-tête fixe. Chaque page porte sa feuille, aucune n'en charge une autre.
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding:
    calc(var(--hauteur-entete) + clamp(56px, 8vw, 120px))
    var(--espace-horizontal)
    clamp(48px, 6vw, 90px);
  border-bottom: 1px solid rgba(242, 235, 221, .08);
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Voile horizontal : sombre à gauche, transparent à droite. */
.page-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(18, 18, 18, .88) 0%,
      rgba(18, 18, 18, .7) 34%,
      rgba(18, 18, 18, .3) 56%,
      rgba(18, 18, 18, .06) 74%,
      rgba(18, 18, 18, 0) 100%);
}

/* Voile vertical : assombrit le haut et le bas de l'image. */
.page-hero__veil--vertical {
  background: linear-gradient(180deg,
      rgba(18, 18, 18, .4) 0%,
      rgba(18, 18, 18, 0) 34%,
      rgba(18, 18, 18, .38) 100%);
}

.page-hero__copy {
  position: relative;
  z-index: 2;
}

.page-hero__eyebrow {
  margin-bottom: 26px;
}

.page-hero__title {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(34px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.page-hero__lead {
  margin: 28px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(242, 235, 221, .7);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.page-hero__actions .btn {
  padding: 10px 22px;
  font-size: 11px;
}

.page-hero__actions .btn--outline {
  border-color: rgba(242, 235, 221, .4);
}

.page-hero__actions .btn--cream {
  box-shadow:
    0 14px 38px rgba(242, 235, 221, .14),
    0 6px 18px rgba(201, 168, 76, .12);
}

/* Sur écran étroit, le voile horizontal devient vertical. */
@media (max-width: 860px) {
  .page-hero__veil {
    background: linear-gradient(180deg,
        rgba(18, 18, 18, .34) 0%,
        rgba(18, 18, 18, .54) 42%,
        rgba(18, 18, 18, .74) 100%);
  }
}

/* --------------------------------------------------------------------------
   2. Simulateur
   -------------------------------------------------------------------------- */
.sim {
  --position-halo: 24% 20%;
  background: var(--degrade-section);
  padding: clamp(60px, 8vw, 128px) var(--espace-horizontal);
}

.sim__head {
  margin-bottom: var(--espace-sous-titre);
}

.sim__lead {
  margin: 20px 0 0;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(242, 235, 221, .6);
}

/* Ordinateur : les cases à cocher à gauche, le résultat à droite. */
.sim-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.sim-choices {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 30px);
}

/* Groupe de cases. Un <fieldset> arrive avec bordure, marges et padding
   propres au navigateur : on repart de zéro avant de dessiner la carte. */
.sim-group {
  margin: 0;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid rgba(242, 235, 221, .1);
  border-radius: var(--arrondi-carte);
  background: var(--fond-carte);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .38);
}

/* Une <legend> est rendue à cheval sur la bordure du <fieldset> : elle
   sortait du cadre et l'interrompait. Mise en flottant, elle redevient un
   bloc ordinaire posé dans le padding du groupe, et la bordure reste
   continue. Le surtitre est aussi d'un cran plus discret que le .eyebrow
   du socle : il annonce un groupe de cases, pas une section.
   Il est centré, et c'est sa marge basse qui ouvre l'espace avant la
   première case : la marge haute d'un bloc `clear:both` serait absorbée
   par la clearance du flottant. */
.sim-group__legend {
  float: left;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  font-size: 10px;
  letter-spacing: .16em;
  text-align: center;
}

/* Nécessaire tant que la légende flotte. */
.sim-options,
.sim-group__note {
  clear: both;
}

.sim-group__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(242, 235, 221, .5);
}

.sim-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Une ligne cochable : toute la surface est cliquable. */
.sim-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(242, 235, 221, .16);
  border-radius: var(--arrondi-media);
  cursor: pointer;
  transition:
    background-color var(--t-court) var(--ease-doux),
    border-color var(--t-court) var(--ease-doux);
}

.sim-option:hover {
  border-color: rgba(242, 235, 221, .34);
  background: rgba(242, 235, 221, .04);
}

.sim-option:has(input:checked) {
  border-color: var(--dore);
  background: rgba(201, 168, 76, .08);
}

.sim-option:has(input:focus-visible) {
  outline: 2px solid var(--dore);
  outline-offset: 3px;
}

.sim-option:has(input:disabled) {
  opacity: .38;
  cursor: not-allowed;
}

.sim-option__box {
  flex: none;
  width: 17px;
  height: 17px;
  accent-color: var(--dore);
  cursor: inherit;
}

.sim-option__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sim-option__name {
  font-size: 14.5px;
}

.sim-option__meta {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(242, 235, 221, .5);
}

/* --------------------------------------------------------------------------
   3. Résultat du simulateur
   -------------------------------------------------------------------------- */
.sim-result {
  position: sticky;
  top: calc(var(--hauteur-entete) + 24px);
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(242, 235, 221, .12);
  border-radius: var(--arrondi-carte);
  background: var(--fond-feature);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(242, 235, 221, .06);
}

.sim-result__empty {
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(242, 235, 221, .6);
  margin: 0;
}

.sim-result__eyebrow {
  margin-bottom: 16px;
}

.sim-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(52px, 7vw, 86px);
  line-height: 1;
  letter-spacing: -.02em;
}

.sim-price__unit {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(242, 235, 221, .62);
}

.sim-year {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(242, 235, 221, .6);
}

.sim-year strong {
  color: var(--creme);
  font-weight: 600;
}

.sim-detail {
  list-style: none;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(242, 235, 221, .12);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.sim-detail li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
  color: rgba(242, 235, 221, .72);
}

.sim-detail li span:last-child {
  flex: none;
  font-weight: 600;
  color: var(--creme);
}

.sim-detail li.sim-detail__adhesion span:last-child {
  color: var(--dore);
}

.sim-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 26px;
}

.sim-actions .btn {
  justify-content: center;
  text-align: center;
}

.sim-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(242, 235, 221, .55);
}

/* --------------------------------------------------------------------------
   4. Grilles de tarifs
   -------------------------------------------------------------------------- */
/* Le dégradé est porté une seule fois par l'enveloppe des grilles et des
   conditions, et court de haut en bas sans repartir à chaque section : plus
   de rupture de fond entre les deux. Même dispositif que .courses sur la
   page Cours. */
.grilles-flow {
  background: var(--degrade-sombre);
}

.grilles {
  background: transparent;
  padding: clamp(68px, 9vw, 144px) var(--espace-horizontal);
}

.grilles__head {
  margin-bottom: var(--espace-sous-titre);
}

.grilles__lead {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(242, 235, 221, .6);
}

.grille + .grille {
  margin-top: clamp(28px, 4vw, 48px);
}

/* Surtitre doré d'une grille : même cran que celui des groupes du
   simulateur. Il peut tenir sur deux lignes sans sortir du cadre. */
.grille__title {
  margin: 0 0 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dore);
}

.grille__frame {
  overflow: hidden;
  overflow-x: auto;
  border: 1px solid rgba(242, 235, 221, .09);
  border-radius: var(--arrondi-carte);
  background: linear-gradient(180deg, #171614 0%, #0F0F0E 100%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(242, 235, 221, .06);
}

.grille__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.grille__table th {
  padding: 16px 18px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 235, 221, .5);
}

.grille__table thead tr {
  border-bottom: 1px solid rgba(242, 235, 221, .16);
}

.grille__table tbody tr {
  border-bottom: 1px solid rgba(242, 235, 221, .12);
}

.grille__table tbody tr:last-child {
  border-bottom: 0;
}

.grille__table td {
  padding: 16px 18px;
  vertical-align: top;
  font-size: 14px;
}

.grille__table th:not(:first-child),
.grille__table td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.grille__table tbody th {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--creme);
  padding: 16px 18px;
}

.grille__price {
  font-weight: 600;
  color: var(--dore);
}

.grille__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(242, 235, 221, .5);
}

/* --------------------------------------------------------------------------
   5. Planning hebdomadaire — repris de la page Cours
   -------------------------------------------------------------------------- */
.planning {
  padding: clamp(68px, 9vw, 144px) var(--espace-horizontal);
}

.planning__head {
  margin-bottom: clamp(28px, 4vw, 52px);
}

.planning__eyebrow {
  margin-bottom: 22px;
}

.planning__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.planning__lead {
  margin: 20px 0 0;
  max-width: 50ch;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(242, 235, 221, .6);
}

.planning__group + .planning__group {
  margin-top: clamp(28px, 4vw, 48px);
}

.planning__group--petite .planning__shell {
  max-width: 420px;
}

.planning__frame {
  position: relative;
}

.planning__scroller {
  overflow: hidden;
  overflow-x: auto;
  border: 1px solid rgba(242, 235, 221, .09);
  border-radius: var(--arrondi-carte);
  background: linear-gradient(180deg, #171614 0%, #0F0F0E 100%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(242, 235, 221, .06);
}

.planning__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.planning__table--grande {
  min-width: 760px;
}

.planning__table th {
  padding: 16px 18px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 235, 221, .5);
}

.planning__table thead tr {
  border-bottom: 1px solid rgba(242, 235, 221, .16);
}

.planning__table tbody tr {
  border-bottom: 1px solid rgba(242, 235, 221, .12);
}

.planning__table tbody tr:last-child {
  border-bottom: 0;
}

.planning__table td {
  padding: 18px;
  vertical-align: top;
}

.planning__hour {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--dore);
}

.planning__course {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}

.planning__level {
  display: block;
  font-size: 11.5px;
  color: rgba(242, 235, 221, .5);
}

.planning__fade {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: clamp(44px, 12%, 78px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--t-court) var(--ease-doux);
}

.planning__fade--l {
  left: 1px;
  border-radius: calc(var(--arrondi-carte) - 1px) 0 0 calc(var(--arrondi-carte) - 1px);
  background: linear-gradient(270deg, rgba(17, 16, 15, 0) 0%, rgba(17, 16, 15, .55) 42%, rgba(15, 15, 14, .94) 100%);
}

.planning__fade--r {
  right: 1px;
  border-radius: 0 calc(var(--arrondi-carte) - 1px) calc(var(--arrondi-carte) - 1px) 0;
  background: linear-gradient(90deg, rgba(17, 16, 15, 0) 0%, rgba(17, 16, 15, .55) 42%, rgba(15, 15, 14, .94) 100%);
}

[data-sc-shell][data-overflow="true"][data-at-start="false"] .planning__fade--l,
[data-sc-shell][data-overflow="true"][data-at-end="false"] .planning__fade--r {
  opacity: 1;
}

.planning__hint {
  display: none;
}

[data-sc-shell][data-overflow="true"] .planning__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  opacity: 1;
  transition: opacity var(--t-court) var(--ease-doux);
}

[data-sc-shell][data-scrolled="true"] .planning__hint {
  opacity: 0;
  pointer-events: none;
}

.planning__hint span {
  font-size: 11.5px;
  letter-spacing: .1em;
  color: rgba(242, 235, 221, .42);
}

@keyframes latSwipe {
  0%   { transform: translateX(9px);   opacity: 0; }
  16%  {                               opacity: .95; }
  68%  { transform: translateX(-13px); opacity: .95; }
  100% { transform: translateX(-17px); opacity: 0; }
}

.planning__hint svg {
  animation: latSwipe 1.9s cubic-bezier(.42, 0, .3, 1) infinite;
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   6. Conditions d'inscription
   -------------------------------------------------------------------------- */
/* Transparente : le fond vient de .grilles-flow. Seul un filet sépare les
   deux, comme entre deux danses sur la page Cours. */
.conditions {
  background: transparent;
  padding: clamp(60px, 8vw, 128px) var(--espace-horizontal);
  border-top: 1px solid rgba(242, 235, 221, .07);
}

.conditions__card {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(26px, 3.4vw, 44px);
  border: 1px solid rgba(242, 235, 221, .1);
  border-radius: var(--arrondi-carte);
  background: var(--fond-carte);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .38);
}

.conditions__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.conditions__text {
  margin: 22px 0 0;
  max-width: 60ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(242, 235, 221, .72);
}

.conditions__list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.conditions__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(242, 235, 221, .68);
}

.conditions__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: var(--arrondi-pilule);
  background: var(--dore);
}

/* --------------------------------------------------------------------------
   7. Bandeau final
   -------------------------------------------------------------------------- */
.cta {
  background: linear-gradient(180deg, #F6F0E4 0%, #E9E0CE 100%);
  color: #101010;
  padding: 29px var(--espace-horizontal);
  box-shadow: 0 -40px 90px rgba(242, 235, 221, .08);
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
  width: 100%;
}

.cta__title {
  margin: 0;
  max-width: 23ch;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: 32px;
  line-height: 1.06;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Cadrage des photos
   -------------------------------------------------------------------------- */
/* En-tête : la source (1289 × 1306) est presque carrée, la bande visible ne
   fait qu'un peu plus d'un tiers de sa hauteur. 40 % retient le groupe et
   l'enseigne du studio, au-dessus du titre posé en bas à gauche. */
.slot--cadre-hero { object-position: center 40%; }

/* --------------------------------------------------------------------------
   9. Responsive — les trois paliers existants
   -------------------------------------------------------------------------- */

/* Ordinateur : les grilles se lisent sur une largeur tenue et centrée plutôt
   qu'étalées d'un bord à l'autre. Le bloc d'intitulé suit la même largeur,
   sinon son texte ne serait plus aligné sur le bord des tableaux.
   `table-layout: fixed` + des largeurs de colonnes identiques d'un tableau à
   l'autre : les montants mensuels et annuels tombent tous à la même position
   horizontale, quelle que soit la longueur des libellés. */
@media (min-width: 1025px) {
  .grilles {
    --largeur-grilles: 880px;
    --colonne-montant: 150px;
  }

  .grilles__head,
  .grille {
    max-width: var(--largeur-grilles);
    margin-left: auto;
    margin-right: auto;
  }

  .grille__table {
    table-layout: fixed;
  }

  .grille__table th:nth-child(2),
  .grille__table th:nth-child(3) {
    width: var(--colonne-montant);
  }

  /* La dernière colonne de la grille d'adhésion est une phrase : dans une
     colonne de largeur fixe, elle se replie au lieu de forcer le tableau. */
  .grille__table td:not(:first-child) {
    white-space: normal;
  }
}

/* Tablette : le simulateur passe sur une colonne, le résultat se décolle du
   haut (collant sous un contenu long, il resterait à mi-hauteur). */
@media (min-width: 768px) and (max-width: 1024px) {
  .sim-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
    margin: 0 auto;
  }

  .sim-result {
    position: static;
  }

  /* Le planning doit rester entier : la largeur utile passe sous les 760px
     du palier bureau, on lève le plancher et on resserre les cellules. */
  .planning__table--grande {
    min-width: 0;
  }

  .planning__table th {
    padding: 14px 10px;
    letter-spacing: .14em;
  }

  .planning__table td {
    padding: 14px 10px;
  }

  .planning__course {
    font-size: 13px;
  }
}

@media (max-width: 767.98px) {
  .sim-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sim-result {
    position: static;
  }

  /* Le palier mobile du socle impose h2 et h3 en !important — il faut la
     même arme pour repasser devant. Sans cela, le surtitre doré d'une grille
     repassait à 20px et mangeait la moitié de l'écran. */
  .conditions__title.conditions__title {
    font-size: clamp(20px, 5.8vw, 26px) !important;
  }

  .grille__title.grille__title {
    font-size: 10px !important;
    line-height: 1.6;
  }

  /* Les grilles de tarifs se lisent en blocs empilés : une ligne du tableau
     devient un bloc « libellé + montants », et rien ne déborde en largeur.
     Les en-têtes de colonnes sont repris par les data-label des cellules,
     la <thead> n'a donc plus rien à afficher.
     Le planning garde son défilement horizontal : il n'est pas touché ici. */
  .grille__frame {
    overflow-x: hidden;
  }

  .grille__table,
  .grille__table tbody,
  .grille__table tbody tr,
  .grille__table tbody th,
  .grille__table td {
    display: block;
    width: 100%;
  }

  .grille__table thead {
    display: none;
  }

  .grille__table tbody tr {
    padding: 16px 18px;
  }

  .grille__table tbody th {
    padding: 0 0 10px;
    font-size: 14.5px;
    font-weight: 600;
  }

  /* Libellé de colonne à gauche, valeur à droite, sur une seule ligne. */
  .grille__table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0;
    font-size: 13.5px;
    color: rgba(242, 235, 221, .72);
  }

  .grille__table td::before {
    content: attr(data-label);
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 235, 221, .5);
  }

  /* La dernière colonne du tableau adhésion est une phrase : elle peut se
     replier sous son libellé plutôt que de forcer la largeur. */
  .grille__table td:not(.grille__price) {
    white-space: normal;
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planning__hint svg {
    animation: none !important;
    opacity: .8;
  }
}