/* ==========================================================================
   TARIFS À DOUBLE RÉGIME (Marino, 2026-09-10, complément du même jour pour
   le Mur de grimpe) : bascule à deux pilules sous le titre de la section
   teal Magic Kids, sur les fiches dont le tarif dépend de l'heure (compris
   dans le billet Magic Kids, ou activité seule en dehors de ces horaires).
   Mini-golf fluo et Mur de grimpe au 2026-09-10.

   MÉCANIQUE : le système d'onglets GÉNÉRIQUE du thème (.fp-tabs / .fp-tab /
   .fp-tab-panel), piloté par setupTabs (assets/js/main.js), INCHANGÉ. Le
   conteneur .fp-tarifs-regime est le PARENT direct de la barre et des deux
   panneaux (aucune division intermédiaire), comme l'exige setupTabs.

   SANS JAVASCRIPT : la règle de masquage ci-dessous est neutralisée par le
   <noscript><style> posé par le rendu PHP (inc/sections.php,
   fp_render_tarifs) : les deux panneaux restent alors visibles, l'un sous
   l'autre, pour ne jamais priver un visiteur sans script de l'information du
   second onglet.

   Fond SOMBRE (section .fp-s-primary, teal) : pilules en contour blanc au
   repos, blanc plein pour l'onglet actif, à l'inverse du module horaires
   (fond clair) qui sert de patron pour le reste de la mécanique.
   ========================================================================== */

.fp-tarifs-regime {
  margin-top: 8px;
}

/* INTERRUPTEUR À DEUX POSITIONS, CENTRÉ (Marino, 2026-09-10 : « centre le
   toggle et fais-en vraiment un toggle, les options sont liées, c'est un
   switch »).

   Les deux pilules étaient posées côte à côte, chacune avec sa propre bordure,
   séparées par une gouttière et alignées à gauche : elles se lisaient comme
   deux boutons indépendants, alors qu'elles sont les deux positions d'un même
   réglage. La barre devient donc un BOÎTIER unique, capsule en verre dépoli
   qui enferme les deux segments, jointifs à l'intérieur ; seul le segment
   actif prend le fond blanc plein, et il glisse de l'un à l'autre par une
   transition de couleur. C'est le motif habituel d'un sélecteur segmenté.

   Le boîtier fait la largeur de son contenu (width: fit-content) et se centre
   sous le titre de la section par margin-inline auto.

   Pas de curseur en pseudo-élément qui se déplacerait derrière les segments :
   il supposerait deux segments de largeur égale, alors que les libellés
   diffèrent nettement (« Avec le billet Magic Kids » contre « En dehors des
   horaires Magic Kids »). Les égaliser couperait le plus long en deux lignes
   sur les écrans étroits. Le fond porté par le segment lui-même donne le même
   résultat visuel, quelle que soit la longueur des libellés. */
.fp-tarifs-regime-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 26px;
  padding: 5px;
  border: 1.5px solid color-mix(in srgb, var(--fp-white) 45%, transparent);
  border-radius: var(--fp-pill);
  background: color-mix(in srgb, var(--fp-dark) 30%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fp-tarifs-regime-tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  margin: 0;
  /* Plus de bordure propre : c'est le boîtier qui porte le contour. */
  border: 0;
  border-radius: var(--fp-pill);
  background: transparent;
  color: var(--fp-white);
  font-family: var(--fp-font-body);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.fp-tarifs-regime-tab:hover {
  background: color-mix(in srgb, var(--fp-white) 14%, transparent);
}

.fp-tarifs-regime-tab.is-active {
  background: var(--fp-white);
  color: var(--fp-secondary);
}

.fp-tarifs-regime-tab:focus-visible {
  outline: 2px solid var(--fp-white);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fp-tarifs-regime-tab { transition: none; }
}

/* Un seul panneau visible à la fois avec JavaScript (contrat du système
   générique) : enfants DIRECTS du conteneur, comme le module horaires. */
.fp-tarifs-regime > .fp-tab-panel { display: none; }
.fp-tarifs-regime > .fp-tab-panel.is-active { display: block; }
.fp-tarifs-regime > .fp-tab-panel:focus-visible {
  outline: 2px solid var(--fp-white);
  outline-offset: 4px;
  border-radius: 20px;
}

/* NOTE DU RÉGIME. Largeur bornée (Marino, 2026-09-10 : « mets le texte en
   moins large ») : la phrase s'étalait sur toute la largeur du conteneur,
   plus de 1200 px d'un bord à l'autre sur un grand écran, soit une ligne
   unique bien trop longue à suivre. */
.fp-tarifs-regime-note {
  font-style: italic;
  color: color-mix(in srgb, var(--fp-white) 84%, transparent);
  max-width: 68ch;
  margin: 0 auto 18px;
}

/* NOTE SEULE DANS SON PANNEAU : elle prend le verre dépoli (Marino,
   2026-09-10, fiche Mur de grimpe : « quand même sur fond de glassmorphisme
   comme mini-golf, avec un peu de padding »).

   Sur Mini-golf fluo, le panneau « en dehors » porte la note PUIS une table de
   tarifs, qui est elle-même un bloc de verre : la note y sert d'introduction
   et n'a pas besoin de cadre. Sur Mur de grimpe il n'y a pas de table, le
   panneau ne contient que cette phrase, qui flottait donc nue sur la vidéo,
   sans rien pour la poser.

   La règle ne s'applique qu'au panneau SANS corps de tarifs, ce qui la rend
   juste pour toute fiche à venir, sans nommer aucune activité. Elle est SEULE
   dans sa liste de sélecteurs (piège 5f du CLAUDE.md : un :has() invalide
   emporterait toute la liste) ; un navigateur qui ignore :has() laisse la note
   telle qu'elle est aujourd'hui, sans cadre, ce qui reste lisible. */
.fp-tarifs-regime > .fp-tab-panel:not(:has(.fp-tarifs-body)) .fp-tarifs-regime-note {
  margin-bottom: 0;
  padding: 26px clamp(20px, 4vw, 38px);
  border-radius: var(--fp-radius-lg);
  background: color-mix(in srgb, var(--fp-dark) 50%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* VERRE DES TARIFS « EN DEHORS » UN PEU PLUS DENSE (Marino, 2026-09-10 :
   « augmente légèrement l'opacité du glass derrière les tarifs en dehors »).
   activite.css pose 35 % de --fp-dark sur toute fiche à média de fond ; sur
   ces deux pages, la vidéo est très claire et très contrastée, et les prix
   passaient au travers. Réglage volontairement limité à la section à deux
   régimes, pour ne pas alourdir le verre des fiches que Marino n'a pas
   regardées. */
.fp-detail .fp-tarifs.has-fond-media .fp-tarifs-regime .fp-tarifs-body-table {
  background: color-mix(in srgb, var(--fp-dark) 50%, transparent);
}

@media (max-width: 980px) {
  /* La gouttière reste celle du boîtier segmenté (4px) : l'élargir
     redonnerait deux boutons distincts, ce que le passage en interrupteur
     vient justement de corriger. Seules la marge basse et la taille des
     segments se resserrent. */
  .fp-tarifs-regime-tabs { margin-bottom: 20px; }
  .fp-tarifs-regime-tab { padding: 9px 16px; font-size: .9rem; }
}