/* ==========================================================================
   AU VENT DANS LES BRANCHES — Page Tarifs
   --------------------------------------------------------------------------
   Cette page charge page-generaliste.css avant ce fichier (bloc titre, vague).
   On ne trouve ici que ce qui lui est propre.
   ========================================================================== */


/* ==========================================================================
   BLOC TITRE
   --------------------------------------------------------------------------
   Identique aux autres pages : le titre, le trait et l'introduction. Seule
   la ligne « première séance offerte » est propre à cette page.
   ========================================================================== */

/* Ligne mise en avant sous le texte d'introduction. */
.premiere-seance {
  display: flex;
  align-items: center;
  /* La mention est centrée dans la largeur de la page, icône comprise : elle
     se détache ainsi de l'introduction, alignée à gauche juste au-dessus.
     « text-align » prend le relais quand la phrase passe sur deux lignes. */
  justify-content: center;
  text-align: center;
  gap: var(--espace-s);
  margin: var(--espace-m) 0 0;
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

.premiere-seance img {
  width: 44px;
  flex-shrink: 0;
}


/* ==========================================================================
   SECTIONS
   ========================================================================== */

.tarifs-section {
  padding-bottom: var(--espace-l);
}

.tarifs-section__titre {
  margin-bottom: var(--espace-s);
}

/* Pas de largeur bridée : le texte occupe la largeur du conteneur, sinon il
   laisse un grand vide à droite sur un écran large. */
.tarifs-section__intro {
  max-width: none;
}


/* ==========================================================================
   1. CARTES DE COURS
   ========================================================================== */

.cartes-cours {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espace-s);
  list-style: none;
  margin: var(--espace-m) 0 0;
  padding: 0;
}

.carte-cours {
  padding: var(--espace-m) var(--espace-s);
  border: 1px solid var(--jaune-deco);
  border-radius: var(--rayon);
  text-align: center;
}

.carte-cours__nombre {
  display: block;
  font-family: var(--titres);
  font-weight: var(--moyen);
  font-size: 1.15rem;
}

.carte-cours__prix {
  display: block;
  margin-block: var(--espace-xs);
  font-family: var(--titres);
  font-weight: var(--moyen);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.carte-cours__soleil {
  width: 34px;
  margin-inline: auto;
}


/* --- Encart des tarifs solidaires --- */

/* Encart resserré et centré : sur un grand écran, un bandeau pleine largeur
   s'étirerait et perdrait sa lisibilité. */
.solidaires {
  max-width: 860px;
  margin: var(--espace-m) auto 0;
  padding: var(--espace-m) var(--espace-l);
  border-radius: var(--rayon);
  background-color: var(--fond);
  text-align: center;
}

.solidaires__titre {
  margin-bottom: var(--espace-xs);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.solidaires__mention {
  margin-bottom: var(--espace-m);
  font-size: 0.9rem;
}

.solidaires__liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.solidaire {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  text-align: left;
}

/* Trait de séparation entre les deux tarifs. */
.solidaire + .solidaire {
  border-left: 1px solid var(--jaune-deco);
  padding-left: var(--espace-m);
}

.solidaire__icone {
  width: 78px;
  flex-shrink: 0;
}

.solidaire__prix {
  display: block;
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: 1.05rem;
}

.solidaire__public {
  margin: 0;
  font-size: 0.9rem;
}


/* --- Bandeaux d'information sous les tarifs --- */

.bandeau-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-m);
  max-width: 620px;
  margin: var(--espace-m) auto 0;
  padding: var(--espace-m) var(--espace-l);
  border-radius: var(--rayon);
  background-color: var(--fond);
}

.bandeau-info__icone {
  width: 92px;
  flex-shrink: 0;
}

.bandeau-info__texte {
  margin: 0;
  font-size: 0.95rem;
}

/* Variante alignée à gauche, pour la liste à puces de la carte. */
.bandeau-info--liste {
  justify-content: flex-start;
}

/* Liste des règles de la carte : une puce par élément plutôt qu'un pavé. */
.bandeau-info__liste {
  margin: 0;
  padding-left: var(--espace-s);
  font-size: 0.95rem;
}

.bandeau-info__liste li + li {
  margin-top: 2px;
}

/* Mention de l'adhésion annuelle, discrète et centrée. */
.mention-adhesion {
  margin: var(--espace-m) 0 0;
  font-style: italic;
  text-align: center;
}


/* ==========================================================================
   2. ATELIERS PONCTUELS
   ========================================================================== */

.tarifs-ateliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-m);
  list-style: none;
  margin: var(--espace-m) 0 0;
  padding: 0;
}

.tarif-atelier {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--espace-m);
  border: 1px solid var(--jaune-deco);
  border-radius: var(--rayon);
}

.tarif-atelier__entete {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  margin-bottom: var(--espace-s);
}

.tarif-atelier__icone {
  width: 62px;
  flex-shrink: 0;
}

.tarif-atelier__titre {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
}

/* Horaire de l'atelier, posé sous le titre. Même taille que la précision
   qui vit en bas de la carte, mais avec sa marge propre : il est suivi des
   prix, alors que la précision ferme la carte. */
.tarif-atelier__horaire {
  margin: calc(-1 * var(--espace-xs)) 0 var(--espace-s);
  font-size: 0.9rem;
}

.tarif-atelier__prix {
  list-style: none;
  margin: 0 0 var(--espace-s);
  padding: 0;
}

.tarif-atelier__prix li + li {
  margin-top: 2px;
}

.tarif-atelier__prix .montant {
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: 1.2rem;
}

.tarif-atelier__precision {
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* « auto » pousse le lien en bas de la carte : les trois restent alignés.
   Le lien reste en « block » et non en « flex » : en flex, la flèche devenait
   un élément à part et filait au bout du cadre quand le texte passait à la
   ligne. Ici elle suit le dernier mot, collée par une espace insécable. */
.tarif-atelier__lien {
  display: block;
  margin-top: auto;
  padding-top: var(--espace-s);
  font-size: 0.9rem;
  font-weight: var(--semigras);
  text-decoration: underline;
  text-decoration-color: var(--cta);
  text-underline-offset: 4px;
}


/* ==========================================================================
   3. AUTRES PRATIQUES
   ========================================================================== */

.autres-pratiques {
  display: flex;
  align-items: center;
  gap: var(--espace-m);
  padding: var(--espace-m);
  border-radius: var(--rayon);
  background-color: var(--fond);
}

.autres-pratiques__icone {
  width: 110px;
  flex-shrink: 0;
}

.autres-pratiques__contenu {
  flex: 1;
}

.autres-pratiques__contenu p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   4. COMMENT PARTICIPER
   ========================================================================== */

.participer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-m);
  list-style: none;
  margin: var(--espace-m) 0 0;
  padding: 0;
}

/* Icône centrée verticalement par rapport au bloc de texte. */
.participer li {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
}

.participer li + li {
  border-left: 1px solid var(--jaune-deco);
  padding-left: var(--espace-m);
}

.participer__icone {
  width: 56px;
  flex-shrink: 0;
}

.participer__titre {
  margin-bottom: var(--espace-xs);
  font-size: 1.1rem;
}

.participer p {
  margin-bottom: 0;
  font-size: 0.95rem;
}


/* ==========================================================================
   5. CONTACTS
   ========================================================================== */

.contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-m);
  list-style: none;
  margin: var(--espace-m) 0 0;
  padding: 0;
}

.contact-prof {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  height: 100%;
  padding: var(--espace-s);
  border: 1px solid var(--jaune-deco);
  border-radius: var(--rayon);
}

/* Même pastille ronde que sur les pages de pratique. */
.contact-prof__portrait {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: color-mix(in srgb, var(--jaune-deco) 35%, transparent);
}

.contact-prof__portrait img {
  width: 122%;
  max-width: none;
}

.contact-prof__nom {
  margin-bottom: 2px;
  font-size: 1.2rem;
}

.contact-prof__cours {
  margin-bottom: var(--espace-xs);
  font-size: 0.85rem;
}

.contact-prof__tel {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  font-size: 0.9rem;
  text-decoration: none;
}

.contact-prof__tel:hover,
.contact-prof__tel:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--cta);
  text-underline-offset: 4px;
}

.contact-prof__icone {
  width: 22px;
  flex-shrink: 0;
}


/* ==========================================================================
   RESPONSIVE — TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

  .tarifs-hero {
    grid-template-columns: 1fr;
  }

  .tarifs-hero__illustration img {
    max-width: 320px;
    margin-inline: auto;
  }

  .cartes-cours {
    grid-template-columns: repeat(2, 1fr);
  }

  .tarifs-ateliers,
  .contacts {
    grid-template-columns: 1fr;
  }

  .autres-pratiques {
    flex-direction: column;
    text-align: center;
  }
}


/* ==========================================================================
   RESPONSIVE — MOBILE
   --------------------------------------------------------------------------
   Les blocs à deux colonnes séparés par un trait vertical passent l'un sous
   l'autre : le trait devient horizontal, sinon les colonnes seraient trop
   étroites pour être lisibles.
   ========================================================================== */

@media (max-width: 600px) {

  .solidaires__liste,
  .participer {
    grid-template-columns: 1fr;
  }

  .solidaire + .solidaire,
  .participer li + li {
    border-left: none;
    border-top: 1px solid var(--jaune-deco);
    padding-left: 0;
    padding-top: var(--espace-m);
  }

  .solidaires {
    padding: var(--espace-m) var(--espace-s);
  }

  /* Sur une seule colonne, les quatre cartes de cours restent côte à côte
     deux par deux : elles ne contiennent qu'un nombre et un prix. */
  .bandeau-info {
    flex-direction: column;
    text-align: center;
    padding-inline: var(--espace-m);
  }

  /* Le bloc est centré, mais une liste à puces se lit alignée à gauche :
     sinon les puces flottent au hasard devant chaque ligne. */
  .bandeau-info__liste {
    text-align: left;
  }

  .contact-prof {
    flex-direction: column;
    text-align: center;
  }

  .contact-prof__tel {
    justify-content: center;
  }
}

/* Chaque titre de section est précédé de la petite fleur, comme les
   sous-titres de la page Santé & bien-être.
   « flex-start » et non « center » : sur un titre qui passe sur deux lignes,
   une fleur centrée flotterait entre les deux. */
.tarifs-section__titre {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-xs);
}

/* Taille en « em » : la fleur suit celle du titre, qui varie avec la
   largeur d'écran. Le retrait du haut la cale sur la première ligne. */
.tarifs-section__titre .sous-titre__fleur {
  width: 0.85em;
  margin-top: 0.15em;
}