/* ==========================================================================
   AU VENT DANS LES BRANCHES — Modèle commun aux pages de cours
   --------------------------------------------------------------------------
   Ce fichier est le GABARIT des pages de pratique : Natha Yoga, Hatha Yoga,
   Yoga intégral. Les trois pages ont la même structure, seuls le texte et
   les images changent.

   → Pour créer une nouvelle page de cours : copier natha-yoga.html, remplacer
     les textes et les images, et charger ce même fichier CSS.
     Ne rien dupliquer ici.
   ========================================================================== */


/* ==========================================================================
   HERO
   ========================================================================== */

/* --- Alternance des fonds ---
   Le hero est sur le crème de la charte (celui du body, rien à déclarer ici),
   avec la bulle blanche posée derrière le texte. Tout ce qui suit le hero
   passe en blanc, sauf l'encart qui revient au crème. */
.hero-cours {
  padding-block: var(--espace-l);
}

/* Enveloppe des sections qui suivent le hero. */
.fond-blanc {
  background-color: var(--blanc);
  padding-bottom: var(--espace-l);
}

.hero-cours__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--espace-m);
  align-items: center;
}

/* Yoga intégral uniquement : l'illustration y est un peu plus grande.
   Sa colonne passe de 1,2 à 1,45 part — les deux autres pages de cours
   (Natha, Hatha) ne sont pas concernées.
   1,45 est le maximum qui laisse « Yoga intégral » tenir sur une seule ligne
   à 1440 px : au-delà, la colonne de texte devient trop étroite et le titre
   se coupe en deux. */
.hero-cours--integral .hero-cours__grille {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
}

/* --- Ordre des plans ---
   Même principe que sur l'accueil : l'illustration a un fond opaque, elle
   passe donc EN DESSOUS (z-index 1). La forme blanche, enfermée dans le
   plan du texte (z-index 2), la recouvre proprement si elles se croisent. */

.hero-cours__illustration {
  position: relative;
  z-index: 1;
}

.hero-cours__illustration img {
  width: 100%;
}

.hero-cours__contenu {
  position: relative;
  z-index: 2;
}

/* Forme blanche calée sur le bloc de texte : elle suit sa hauteur quelle que
   soit la longueur du contenu. */
.hero-cours__forme {
  position: absolute;
  inset: -14% -12% -14% -30%;
  background: url("../images/forme-blanche.png") no-repeat center / 100% 100%;
  z-index: -1;
  pointer-events: none;
}

/* --- Accroche --- */
.hero-cours__accroche {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  margin-block: var(--espace-s) var(--espace-m);
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

.hero-cours__feuille {
  width: 42px;
  flex-shrink: 0;
}

.hero-cours__contenu p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   LES CARACTÉRISTIQUES DE LA PRATIQUE
   ========================================================================== */

.caracteristiques {
  padding-block: var(--espace-l);
}

.caracteristiques__titre {
  margin-bottom: var(--espace-l);
}

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

.caracteristique {
  padding-inline: var(--espace-m);
  text-align: center;
}

/* Traits de séparation entre les colonnes, comme sur la maquette. Porté par
   « li + li » : le premier élément n'a donc pas de trait à sa gauche. */
.caracteristique + .caracteristique {
  border-left: 1px solid var(--jaune-deco);
}

.caracteristique__icone {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--espace-s);
  object-fit: contain;
}

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

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



/* ==========================================================================
   QUAND PRATIQUER ?
   ========================================================================== */

.pratiquer {
  padding-block: var(--espace-l);
}

.pratiquer__grille {
  display: grid;
  /* La colonne de droite reste large : l'adresse e-mail est longue et ne
     doit pas se couper en plein milieu d'un mot. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--espace-l);
  align-items: start;
}

.pratiquer h2 {
  margin-bottom: var(--espace-m);
}

/* --- Les créneaux --- */

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

/* Variante pour les pages qui n'ont qu'un ou deux créneaux : les cartes sont
   plus larges, ce qui évite que l'horaire se coupe sur deux lignes.
   À ajouter au cas par cas dans le HTML, elle ne s'applique pas partout.
   Sous 900 px, les règles responsive plus bas reprennent la main. */
.creneaux--large {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* Variante resserrée, pour garder l'horaire sur une seule ligne.
   Sur ordinateur, une carte fait le tiers de la colonne : il ne reste que
   90 px pour l'heure, et « 18h30 – 19h45 » (le créneau le plus long du site,
   sur la page Natha) se coupait en deux, décalant la carte par rapport aux
   autres. On rogne la marge intérieure et l'écart avec l'icône : 116 px de
   disponible, la carte reste alignée sur ses voisines.
   Inutile en dessous de 900 px, où les cartes sont déjà larges. */
@media (min-width: 901px) {
  .creneaux--serre .creneau {
    padding-inline: var(--espace-xs);
    column-gap: var(--espace-xs);
  }

  .creneaux--serre .creneau__heure {
    white-space: nowrap;
  }
}

.creneau {
  display: grid;
  /* L'icône occupe une colonne, le texte l'autre : le jour et l'heure
     restent alignés l'un sous l'autre, à droite de l'icône. */
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--espace-xs) var(--espace-s);
  padding: var(--espace-s);
  border: 1px solid var(--jaune-deco);
  border-radius: var(--rayon);
  text-align: center;
}

.creneau__icone {
  grid-row: span 2;
  width: 28px;
}

.creneau__jour {
  font-weight: var(--semigras);
  font-size: 0.9rem;
}

.creneau__heure {
  font-size: 0.9rem;
}

/* --- Carte de l'intervenante --- */

.intervenante {
  display: flex;
  align-items: center;
  gap: var(--espace-m);
  padding: var(--espace-m);
  border: 1px solid var(--jaune-deco);
  border-radius: var(--rayon);
}

.intervenante__portrait {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Pastille dérivée du jaune de la charte, adoucie pour ne pas écraser le
     portrait. color-mix mélange la couleur avec du transparent. */
  background-color: color-mix(in srgb, var(--jaune-deco) 35%, transparent);
}

/* Marqueur temporaire quand le portrait n'est pas encore fourni : on le
   centre dans la pastille au lieu de le coller en bas comme une photo.
   Ce sélecteur ne s'applique qu'en l'absence d'image. */
.intervenante__portrait .a-completer {
  align-self: center;
}

/* Le portrait est agrandi au-delà de la pastille pour venir la remplir :
   le fichier comporte lui aussi une marge transparente autour du sujet.
   Le débordement est masqué par l'overflow du cercle. */
.intervenante__portrait img {
  width: 122%;
  max-width: none;
}

.intervenante__nom {
  margin-bottom: var(--espace-xs);
  padding-bottom: var(--espace-xs);
  border-bottom: 1px solid var(--jaune-deco);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}

.intervenante__roles {
  margin-bottom: var(--espace-s);
  font-size: 0.95rem;
}

/* --- Renvoi vers la page Équipe ---
   Le portrait et le nom mènent à la présentation complète de la personne,
   avec sa carte déjà dépliée (equipe-partenaires.html#prenom-nom).
   Le portrait est devenu un <a> dans le HTML : il reprend donc tel quel le
   style de .intervenante__portrait, il n'y a que le survol à ajouter. */
a.intervenante__portrait {
  transition: transform 0.2s ease;
}

a.intervenante__portrait:hover,
a.intervenante__portrait:focus-visible {
  transform: scale(1.04);
}

.intervenante__nom a {
  text-decoration: none;
}

.intervenante__nom a:hover,
.intervenante__nom a:focus-visible {
  text-decoration: underline;
}

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

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

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

.intervenante__contacts a {
  text-decoration: none;
  /* Les adresses longues peuvent couper plutôt que déborder de la carte. */
  overflow-wrap: anywhere;
}

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

.intervenante__icone {
  width: 26px;
  flex-shrink: 0;
}


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

/* --- Tablette --- */
@media (max-width: 900px) {

  .hero-cours__grille {
    grid-template-columns: 1fr;
    gap: var(--espace-s);
  }

  /* Yoga intégral : sa règle desktop est plus spécifique que la ligne
     ci-dessus, elle continuerait donc de s'appliquer et garderait les deux
     colonnes. Même précaution que pour .hero-cours--large (page-sante.css). */
  .hero-cours--integral .hero-cours__grille {
    grid-template-columns: 1fr;
  }

  /* L'illustration passe au-dessus du texte : elle reste l'accroche visuelle. */
  .hero-cours__illustration {
    order: -1;
  }

  .hero-cours__illustration img {
    max-width: 520px;
    margin-inline: auto;
  }

  .hero-cours__forme {
    inset: -8% -20% -8% -20%;
  }

  /* Sur une colonne, les traits verticaux n'ont plus de sens : ils
     deviennent des traits horizontaux entre les blocs. */
  .caracteristiques__grille {
    grid-template-columns: 1fr;
    gap: var(--espace-m);
  }

  .caracteristique {
    padding-inline: 0;
  }

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

  .pratiquer__grille {
    grid-template-columns: 1fr;
    gap: var(--espace-l);
  }

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

/* --- Mobile --- */
@media (max-width: 600px) {

  .hero-cours {
    padding-block: var(--espace-m);
  }

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

  /* Sur une seule colonne, le créneau se lit mieux aligné à gauche. */
  .creneau {
    text-align: left;
  }

  /* Le bouton reprend la pleine largeur des boutons mobiles, mais centré. */
  .pratiquer .bouton {
    justify-content: center;
  }

  /* La carte de l'intervenante s'empile. */
  .intervenante {
    flex-direction: column;
    text-align: center;
  }

  .intervenante__nom {
    text-align: center;
  }

  .intervenante__contacts li {
    justify-content: center;
  }

}