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

   Elle a deux affichages nettement différents :
     • ordinateur : les 5 jours côte à côte, les ateliers en 3 colonnes ;
     • mobile     : un jour à la fois par onglets, les ateliers l'un sous l'autre.
   Les ateliers sont des accordéons sur les deux tailles d'écran.
   ========================================================================== */


/* ==========================================================================
   COULEURS DES COURS
   --------------------------------------------------------------------------
   Ces pastels ne font pas partie de la charte : ils servent uniquement à
   distinguer les pratiques dans le planning, où la lecture rapide prime.
   Volontairement très désaturés pour ne pas concurrencer le jaune du site.
   ========================================================================== */

:root {
  --cours-natha:        #E9EFE6;  /* vert pâle    */
  --cours-hatha:        #ECE7F2;  /* violet pâle  */
  --cours-chaise:       #FBF1DC;  /* crème doré   */
  --cours-integral:     #F6E3E8;  /* rosé         */
  --cours-therapeutique:#E4EDF2;  /* bleuté       */
  --cours-cocktail:     #FAE7D2;  /* pêche        */
}


/* La plante du bloc titre a été déplacée dans page-generaliste.css : elle
   sert désormais sur toutes les pages qui ont un bloc titre. */

.cours--natha         { background-color: var(--cours-natha); }
.cours--hatha         { background-color: var(--cours-hatha); }
.cours--chaise        { background-color: var(--cours-chaise); }
.cours--integral      { background-color: var(--cours-integral); }
.cours--therapeutique { background-color: var(--cours-therapeutique); }
.cours--cocktail      { background-color: var(--cours-cocktail); }


/* ==========================================================================
   TITRES DE SECTION
   ========================================================================== */

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

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


/* ==========================================================================
   1. PLANNING HEBDOMADAIRE
   ========================================================================== */

/* --- Sélecteur de semaine (visible sur mobile uniquement) --- */

.semaine {
  display: none;
  align-items: center;
  gap: var(--espace-s);
  margin-bottom: var(--espace-m);
}

.semaine__fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--jaune-deco);
  border-radius: var(--rayon);
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
}

.semaine__libelle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-xs);
  flex: 1;
  min-height: 44px;
  padding: var(--espace-xs) var(--espace-s);
  border: 1px solid var(--jaune-deco);
  border-radius: var(--rayon);
  font-size: 0.9rem;
  text-align: center;
}

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

/* --- Onglets des jours (mobile uniquement) --- */

.jours-onglets {
  display: none;
  list-style: none;
  margin: 0 0 var(--espace-m);
  padding: 0;
  border-bottom: 1px solid rgba(43, 43, 43, 0.15);
}

.jours-onglets li {
  flex: 1;
}

.jour-onglet {
  width: 100%;
  padding: var(--espace-s) 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--corps);
  font-weight: var(--semigras);
  font-size: 0.9rem;
  color: var(--texte);
  cursor: pointer;
}

.jour-onglet[aria-selected="true"] {
  border-bottom-color: var(--cta);
}

/* --- La semaine : 5 colonnes sur ordinateur --- */

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

.jour__nom {
  margin-bottom: var(--espace-s);
  padding-bottom: var(--espace-xs);
  border-bottom: 1px solid var(--jaune-deco);
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.jour__cours {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Une case de cours --- */

.cours-case {
  padding: var(--espace-s);
  border-radius: var(--rayon);
  text-align: center;
}

.cours-case__heure {
  display: block;
  font-weight: var(--semigras);
  font-size: 0.85rem;
}

.cours-case__nom {
  display: block;
  margin-top: 2px;
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: 1rem;
}

.cours-case__detail {
  display: block;
  font-size: 0.8rem;
}

.cours-case__prof {
  display: block;
  font-size: 0.85rem;
}

/* --- Mention et bouton sous le planning --- */

.planning-mention {
  margin-top: var(--espace-m);
  font-size: 0.85rem;
  text-align: center;
}

.planning-telechargement {
  display: flex;
  justify-content: center;
  margin-top: var(--espace-s);
}

.planning-telechargement .bouton__icone {
  width: 26px;
}


/* ==========================================================================
   2. LES ATELIERS MENSUELS
   ========================================================================== */

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

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

/* L'en-tête est le bouton qui ouvre et ferme l'atelier. C'est un <button>,
   dont on neutralise tout l'habillage par défaut du navigateur. */
.atelier__entete {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  width: 100%;
  margin: 0;
  padding: var(--espace-s);
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.atelier__resume {
  flex: 1;
}


/* Phrase d'accroche : c'est ce que l'on lit quand l'atelier est replié. */
.atelier__resume .atelier__texte {
  display: block;
  margin: 4px 0 0;
  font-size: 0.9rem;
}

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

.atelier__titre {
  display: block;
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
}

.atelier__texte {
  font-size: 0.95rem;
}

.atelier__chevron {
  flex-shrink: 0;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.atelier__entete[aria-expanded="true"] .atelier__chevron {
  transform: rotate(180deg);
}

/* Partie dépliable : description complète et dates. */
.atelier__contenu {
  padding: 0 var(--espace-s) var(--espace-s);
}

.atelier__entete[aria-expanded="false"] + .atelier__contenu {
  display: none;
}

/* Même mouvement que les deux autres accordéons du site. */
.atelier__entete[aria-expanded="true"] + .atelier__contenu {
  animation: deplier 0.28s ease both;
}

.atelier__dates {
  list-style: none;
  margin: var(--espace-s) 0 0;
  padding: 0;
  font-size: 0.85rem;
}

.atelier__dates li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-xs);
  padding: var(--espace-xs);
  border-radius: var(--rayon);
  background-color: var(--fond);
}

.atelier__dates li + li {
  margin-top: 4px;
}

/* La date ne se coupe jamais : c'est l'information qui suit qui passe à la
   ligne si la place manque. */
.atelier__dates .date {
  font-weight: var(--semigras);
  white-space: nowrap;
}

/* Sépare la date des informations qui suivent. */
.atelier__dates .info::before {
  content: "—";
  margin-right: var(--espace-xs);
}

/* Variante sans tiret : l'horaire suit la date après une simple espace.
   « text-align: center » fait que si le prénom de l'intervenante ne tient
   pas sur la ligne, il passe dessous en restant centré sous l'horaire. */
.atelier__dates--sans-tiret .info::before {
  content: none;
}

.atelier__dates--sans-tiret .info {
  text-align: center;
}

/* Précision placée sous une liste de dates. */
.atelier__note {
  margin: var(--espace-s) 0 0;
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
}

.atelier__puce {
  width: 16px;
  flex-shrink: 0;
}


/* --- Encart réservation --- */

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

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

.reservation__texte {
  flex: 1;
  margin: 0;
  font-size: 0.95rem;
}


/* ==========================================================================
   3. YOGA NIDRA DU DIMANCHE
   ========================================================================== */

.nidra {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: var(--espace-m);
  align-items: center;
  padding: var(--espace-m);
  border: 1px solid var(--jaune-deco);
  border-radius: var(--rayon);
}

.nidra__illustration img {
  width: 100%;
}

.nidra__dates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--espace-xs);
  list-style: none;
  margin: var(--espace-s) 0;
  padding: 0;
}

.nidra__dates li {
  padding: var(--espace-xs);
  border-radius: var(--rayon);
  background-color: var(--fond);
  font-size: 0.85rem;
  text-align: center;
}

.nidra__dates .heure {
  display: block;
  font-size: 0.8rem;
}

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


/* ==========================================================================
   4. UNE QUESTION ?
   ========================================================================== */

/* Bloc d'appel final : tout est centré en colonne, avec de larges marges
   intérieures pour qu'il se lise comme un seul ensemble et non comme une
   barre étirée. Même disposition sur ordinateur et sur mobile. */
/* Bloc d'appel final : tout est centré en colonne. Il ne prend pas toute la
   largeur de la page — il est resserré et centré, ce qui le détache mieux
   qu'un bandeau étiré. */
.question-finale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-s);
  max-width: 620px;
  margin-inline: auto;
  /* Retrait haut réduit (32 → 20 px) pour resserrer l'espace au-dessus de la
     plante. Les côtés et le bas gardent leur valeur. */
  padding: 1.25rem var(--espace-l) var(--espace-m);
  border-radius: var(--rayon-image);
  background-color: var(--fond);
  text-align: center;
}

.question-finale__icone {
  width: 92px;
}

.question-finale__titre {
  margin: 0;
}

.question-finale__texte {
  max-width: 46ch;
  margin: 0;
}

/* La seconde phrase passe à la ligne plutôt que de suivre la première. */
.question-finale__ligne2 {
  display: block;
}

.question-finale .bouton {
  margin-top: var(--espace-s);
}


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

@media (max-width: 900px) {

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

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

  .nidra__illustration img {
    max-width: 280px;
    margin-inline: auto;
  }
}


/* ==========================================================================
   RESPONSIVE — MOBILE
   --------------------------------------------------------------------------
   C'est ici que l'affichage change vraiment :
     • le planning passe à un jour à la fois, choisi par onglets ;
     • les ateliers deviennent des accordéons.
   ========================================================================== */

@media (max-width: 700px) {

  /* --- Planning : un jour à la fois --- */

  .semaine,
  .jours-onglets {
    display: flex;
  }

  .semaine-grille {
    display: block;
  }

  /* Seul le jour actif est visible. C'est une classe et non l'attribut
     hidden : ainsi l'affichage ne dépend que du CSS mobile, et les cinq
     jours restent visibles sur ordinateur quoi que fasse le script. */
  .jour {
    display: none;
  }

  .jour.est-actif {
    display: block;
  }

  /* Le nom du jour est déjà donné par l'onglet actif. */
  .jour__nom {
    display: none;
  }

  .cours-case {
    text-align: left;
  }

  .atelier__icone {
    width: 52px;
  }

  /* --- Blocs de bas de page --- */

  /* L'encart « Une question ? » est déjà centré en colonne : seul le bloc
     réservation a besoin de s'empiler ici. */
  .reservation {
    flex-direction: column;
    text-align: center;
  }

  .question-finale {
    padding-inline: var(--espace-m);
  }

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

/* 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. */
.planning-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. */
.planning-section__titre .sous-titre__fleur {
  width: 0.85em;
  margin-top: 0.15em;
}