/* ==========================================================================
   AU VENT DANS LES BRANCHES — Blocs propres aux sous-pages Santé & bien-être
   --------------------------------------------------------------------------
   Ces pages (Yogathérapie, Yoga sur chaise…) reprennent la structure des
   pages de cours : elles chargent donc page-cours.css AVANT ce fichier.
   On ne trouve ici que ce qui leur est spécifique.
   ========================================================================== */


/* ==========================================================================
   HERO — bloc « Pour aller plus loin »
   ========================================================================== */

/* La forme blanche de ces pages est plus haute que celle des pages de cours :
   le hero y contient davantage de contenu. */
.hero-cours__forme--haute {
  background-image: url("../images/forme-blanche-yogatherapie.png");
}

/* Feuille seule sous le titre, sans accroche : c'est ce que montre la
   maquette de la Yogathérapie. */
.hero-cours__feuille--seule {
  display: block;
  width: 42px;
  margin-block: var(--espace-s) var(--espace-m);
}

/* --- Variante « grande illustration » ---
   Réservée à la page Yoga sur chaise : elle n'est appliquée que là, les
   autres pages de pratique gardent le hero standard de page-cours.css.

   Trois réglages liés :
   1. l'illustration récupère de la place dans la grille ;
   2. elle déborde du conteneur pour se rapprocher du bord droit. La valeur
      annule exactement le retrait du conteneur : elle ne peut donc jamais
      créer de débordement, quelle que soit la largeur d'écran ;
   3. le titre est un peu réduit, « Yoga sur chaise » étant plus long que
      les autres titres — c'est ce qui lui permet de tenir sur une ligne. */

.hero-cours--large .hero-cours__grille {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
}

.hero-cours--large .hero-cours__illustration {
  margin-right: calc(-1 * var(--espace-m));
}

.hero-cours--large h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}

.liens-plus {
  margin-top: var(--espace-m);
}

.liens-plus__intro {
  margin-bottom: var(--espace-xs);
  font-weight: var(--semigras);
  font-size: 0.95rem;
}

.liens-plus__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.liens-plus__liste li + li {
  margin-top: var(--espace-xs);
}

.liens-plus__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  font-weight: var(--semigras);
  text-decoration: underline;
  text-decoration-color: var(--cta);
  text-underline-offset: 5px;
}

.liens-plus__lien:hover,
.liens-plus__lien:focus-visible {
  text-decoration-color: var(--texte);
}


/* ==========================================================================
   POUR QUOI, POUR QUI ?
   --------------------------------------------------------------------------
   Reprend .caracteristiques de page-cours.css, mais aligné à gauche et avec
   une liste à puces plutôt qu'un paragraphe.
   ========================================================================== */

.caracteristique--liste {
  text-align: left;
}

.caracteristique--liste .caracteristique__icone {
  margin-inline: 0;
}

.caracteristique__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.caracteristique__liste li {
  position: relative;
  padding-left: var(--espace-s);
}

.caracteristique__liste li + li {
  margin-top: var(--espace-xs);
}

/* Puce dessinée en CSS plutôt qu'avec une image : un simple point jaune. */
.caracteristique__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--cta);
}


/* ==========================================================================
   ACCOMPAGNEMENT — la pratique collective et l'accompagnement individuel
   ========================================================================== */

.accompagnement {
  display: grid;
  /* Le bloc collectif est le principal : il occupe donc plus de place. */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--espace-m);
  align-items: start;
  padding-bottom: var(--espace-l);
}

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

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

.bloc-pratique__icone {
  width: 48px;
  flex-shrink: 0;
}

.bloc-pratique__titre {
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.bloc-pratique p:last-of-type {
  margin-bottom: 0;
}

/* « auto » pousse le bouton en bas du bloc, quelle que soit la longueur
   du texte au-dessus. */
.bloc-pratique .bouton {
  margin-top: auto;
  align-self: flex-start;
}

.bloc-pratique__texte-final {
  margin-top: var(--espace-s);
}


/* ==========================================================================
   ENCART — variante sans la phrase d'accroche du haut
   ========================================================================== */

/* Phrase de fin, ajoutée après la précision pratique. */
.encart__question-finale {
  margin-top: var(--espace-s);
  margin-bottom: 0;
  font-size: 0.95rem;
  font-weight: var(--semigras);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {

  /* Sur une colonne, l'illustration reprend sa place normale. La bulle
     blanche, elle, est plus généreuse en haut et en bas : le titre et le
     dernier paragraphe respirent au lieu de toucher son bord. */
  /* La grille repasse sur une colonne : sans cette ligne, la règle desktop
     ci-dessus — plus spécifique que la règle responsive de page-cours.css —
     continuerait de s'appliquer et écraserait le texte. */
  .hero-cours--large .hero-cours__grille {
    grid-template-columns: 1fr;
  }

  .hero-cours--large .hero-cours__illustration {
    margin-right: 0;
  }

  .hero-cours--large .hero-cours__forme {
    inset: -58px -20% -46px -20%;
  }

  .accompagnement {
    grid-template-columns: 1fr;
  }

  .caracteristique--liste .caracteristique__icone {
    margin-inline: auto;
  }

  .caracteristique--liste {
    text-align: center;
  }

  /* Les listes restent alignées à gauche : centrées, les puces seraient
     illisibles. On centre seulement le bloc dans la colonne. */
  .caracteristique__liste {
    display: inline-block;
    text-align: left;
  }
}