/* ==========================================================================
   COURS ADULTES — styles propres à cours-adultes.html
   --------------------------------------------------------------------------
   Chargé après style.css et page-interieure.css.

   Le bandeau de titre, lui, n'a rien de particulier : c'est le gabarit
   commun `.hero-page`, texte à gauche et illustration à droite, comme sur la
   page Yogathérapie et comme sur le site de l'association. C'est une
   variation par rapport au site d'origine, qui posait le texte dans une
   bulle sur une illustration pleine largeur — beaucoup plus haute.

   Ce fichier ne contient donc que deux blocs :
     1. l'encart gris « Entreprise, association ? » et ses trois pictos ;
     2. les trois colonnes « Comment ça marche ? ».
   ========================================================================== */


/* ==========================================================================
   0. LE CADRAGE DE L'ILLUSTRATION DU BANDEAU
   --------------------------------------------------------------------------
   Le fichier est panoramique — 1800 × 770 — parce qu'il servait de bandeau
   pleine largeur. Placé tel quel dans une demi-colonne, le dessin se
   retrouve minuscule au milieu d'un grand aplat crème vide.

   On la recadre donc un peu — « aspect-ratio » fixe la proportion de la
   boîte, « cover » recadre l'image dedans — mais légèrement : le fond crème
   de la section prend le relais de celui de l'image, si bien que les marges
   du dessin ne se voient plus. Rogner davantage amputerait l'arbre sans rien
   gagner.
   ========================================================================== */

.hero-page__illustration img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* L'illustration prend un peu plus de place que le texte. Elle en a besoin :
   le dessin est large, alors que la bulle, elle, se contente de la place que
   son texte occupe.

   La règle est enfermée dans « min-width », et non écrite telle quelle : ce
   fichier est chargé APRÈS page-interieure.css, si bien qu'une déclaration
   nue passerait par-dessus celle qui remet le bandeau sur une seule colonne
   sur les écrans étroits — et la page resterait en deux colonnes sur mobile. */
@media (min-width: 1001px) {

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


/* ==========================================================================
   0 bis. LA BULLE BLANCHE DU BANDEAU
   --------------------------------------------------------------------------
   Comme sur le site d'origine, le texte du bandeau est posé dans une bulle
   blanche. La forme est obtenue en donnant à chaque coin un rayon horizontal
   et un rayon vertical différents : le coin devient un quart d'ellipse, et le
   rectangle une bulle.
   ========================================================================== */

.bulle {
  /* Les marges intérieures sont larges parce que les bords sont courbes :
     dans une bulle, le texte doit rentrer davantage que dans un rectangle,
     sinon les premières et dernières lignes touchent la paroi. */
  padding: var(--espace-l) var(--espace-m);
  background-color: var(--fond);
  border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
}

/* Plus petit que le titre des autres bandeaux : il est ici enfermé dans une
   bulle, pas posé en pleine page. */
.bulle__titre {
  margin-bottom: var(--espace-s);
  font-size: clamp(1.5rem, 2.6vw, 32px);
}

/* Aucune règle de taille : le texte reste à la taille courante du site. */
.bulle__texte {
  margin: 0;
}


/* ==========================================================================
   1. L'ENCART « ENTREPRISE, ASSOCIATION ? »
   --------------------------------------------------------------------------
   Un panneau gris dans le fil de la section « Pour qui ? ».
   ========================================================================== */

.encart {
  margin-top: var(--espace-m);
  padding: var(--espace-m);
  background-color: var(--gris-bloc);
}

/* « Entreprise, association ? » sert de titre à l'encart : c'est un vrai
   titre dans le HTML, mis en gras plutôt qu'agrandi — l'encart reste ainsi
   au même niveau visuel que le texte qui l'entoure. */
.encart__titre {
  margin-bottom: var(--espace-s);
  font-size: 15px;
  font-weight: var(--gras);
  line-height: 1.88;
}

.encart__liste {
  margin: 0 0 var(--espace-m);
  padding: 0;
  list-style: none;
}

.encart__liste li {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
}

.encart__liste li + li {
  margin-top: var(--espace-s);
}

.encart__picto {
  flex-shrink: 0;   /* sans quoi le picto s'écrase quand le texte est long */
  width: 46px;
}

.encart__note {
  margin: 0;
  font-style: italic;
}


/* ==========================================================================
   2. LES BOUTONS SOUS CHAQUE COURS
   --------------------------------------------------------------------------
   Chaque cours renvoie vers sa page sur le site de l'association. Le bouton
   a donc besoin d'air en dessous : sans cela, il se collerait à l'intitulé
   du cours suivant.
   ========================================================================== */

.zone-bouton--cours {
  margin-top: var(--espace-s);
  margin-bottom: var(--espace-m);
}


/* ==========================================================================
   3. « COMMENT ÇA MARCHE ? »
   --------------------------------------------------------------------------
   Trois colonnes, chacune avec son picto et une phrase en gras, puis le
   texte courant. Le tout tient dans le même trait jaune.
   ========================================================================== */

/* Trois colonnes fixes, et non « autant que ça rentre » : avec trois
   éléments, une grille qui s'adapte toute seule finit tôt ou tard par en
   poser deux sur une ligne et un sur la suivante — bancal. Ici c'est trois
   de front, ou un par ligne, jamais entre les deux.

   Les colonnes occupent toute la largeur de la page : le bloc n'est plus
   décalé par le trait jaune, il est posé au milieu, dans l'axe du titre. */
.trois-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-m);
  margin-bottom: var(--espace-l);
  text-align: center;
}

.trois-plans__picto {
  height: 38px;
  width: auto;
  margin: 0 auto var(--espace-m);
}

.trois-plans__texte {
  margin: 0;
  font-weight: var(--gras);
}

/* Le paragraphe qui suit reste bridé à 62 caractères par ligne — au-delà,
   l'œil perd le début de la ligne suivante. Mais il n'est plus collé à la
   marge de gauche : c'est le bloc entier qui est posé au milieu de la page,
   sous les trois colonnes. Le texte, lui, reste aligné à gauche : un
   paragraphe de plusieurs lignes centré n'a plus de bord commun où l'œil
   revient, et devient pénible à lire. */
.comment-marche .bloc-texte {
  margin-inline: auto;
}


/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */

/* Le bandeau à bulle bascule en une seule colonne dès 1000 px, alors que le
   reste du site attend 900. Raison : entre les deux, la colonne de gauche
   n'est plus assez large pour la bulle — une quinzaine de caractères par
   ligne, et la forme se tord en œuf. Les règles d'empilement du gabarit
   commun sont ici simplement étendues, ce fichier étant chargé après lui. */
@media (max-width: 1000px) {

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

  .hero-page__illustration {
    order: -1;
  }

  /* Empilée sous l'illustration, la bulle devient large et basse : les mêmes
     rayons en pourcentage y produiraient une ellipse écrasée. On les aplatit
     donc dans le sens vertical pour retrouver une forme de galet. */
  .bulle {
    padding: var(--espace-m);
    border-radius: 40% 60% 46% 54% / 12% 14% 12% 14%;
  }
}

@media (max-width: 780px) {

  .trois-plans {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {

  /* Sur un bloc étroit et haut, un rayon en pourcentage donne une forme
     démesurée. La bulle redevient un simple rectangle arrondi. */
  .bulle {
    border-radius: var(--rayon);
  }

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