@charset "utf-8";
/* Page Planning — ce qui lui est propre. Le commun est dans ../commun.css. */

/* ---- Haut : « Planning des cours » en grand, la fin du H1 en petit dessous (règle des sites TDB) ---- */
.haut-titre-fin { display: block; margin-top: 10px; font-size: .42em; letter-spacing: .02em; color: var(--violet-fonce); }

/* ---- 1. Le planning : filtres, puis les sept jours ---- */
.planning { display: flex; flex-direction: column; gap: 14px; }
.pl-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-lab { min-width: 130px; margin-right: 6px; font: 800 15px/1 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-fonce); }
.planning button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: #FFFFFF; color: var(--encre); font: 600 14.5px/1 'Barlow', sans-serif; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
/* Comme Éclair et le premier site TDB : rien d'allumé = tout est montré (« Tous les cours » allumé) ; un clic sur un cours ne
   garde que lui, un autre clic en ajoute un ; le bouton allumé passe en violet */
.planning button[aria-pressed="true"] { background: var(--violet); color: #FFFFFF; }
.planning button[aria-pressed="true"] .pl-point { box-shadow: 0 0 0 2px #FFFFFF; }
.planning button:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.pl-point { flex: none; width: 10px; height: 10px; border-radius: 999px; }
.pl-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 14px; }
.pl-jour { align-self: start; overflow: hidden; border-radius: 18px; background: #FFFFFF; transition: background .25s; }
.pl-nom { transition: opacity .25s; }
.pl-nom { margin: 0; padding: 12px 10px; background: var(--violet); color: #FFFFFF; text-align: center;
  font: 800 20px/1.1 'Barlow Condensed', sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.pl-liste { list-style: none; margin: 0; padding: 8px 10px 12px; }
.pl-cr { display: flex; flex-direction: column; gap: 4px; padding: 7px 0; border-bottom: 1px solid rgba(13,13,16,.07); }
.pl-cr:last-child { border-bottom: 0; }
.pl-cr[hidden], .pl-cours[hidden] { display: none; }
.pl-h { font-weight: 700; font-size: 14px; color: var(--violet-fonce); }
.pl-l { display: flex; flex-direction: column; gap: 5px; }  /* deux cours à la même heure : l'un sous l'autre, partout pareil */
.pl-cours { flex: 1 1 auto; min-width: 0; padding: 6px 9px; border-radius: 10px; font: 700 15px/1.15 'Barlow Condensed', sans-serif;
  letter-spacing: .03em; text-transform: uppercase; }
.pl-vide { display: none; margin: 10px 10px 14px; font-size: 13px; color: #5F5F67; text-align: center; }
/* Jour sans cours pour ces filtres : carte et en-tête estompés, mais le message reste lisible (relecture Codex, 28/10) */
.pl-jour[data-eteint] { background: rgba(255,255,255,.45); }
.pl-jour[data-eteint] .pl-nom { opacity: .45; }
.pl-jour[data-eteint] .pl-vide { display: block; }
.pl-jour[data-eteint] .pl-liste { display: none; }
/* La carte revient au planning après « Voir les créneaux » : un halo bref sur les cours retenus */
.pl-grille.repere .pl-cours:not([hidden]) { animation: repere 1.2s ease-out; }
@keyframes repere { 0% { box-shadow: 0 0 0 0 rgba(90,61,245,.55); } 100% { box-shadow: 0 0 0 10px rgba(90,61,245,0); } }
/* Les jours tombent un à un quand le planning arrive à l'écran, comme sur l'accueil (Virginie, 30/10). « anime » est posé
   par le script : sans lui (ou en mouvements réduits), les jours restent affichés. */
@keyframes pl-tombe { from { opacity: 0; translate: 0 -40px; rotate: -3deg; } to { opacity: 1; translate: none; rotate: 0deg; } }
.pl-grille.anime .pl-jour { opacity: 0; }
.pl-grille.anime.visible .pl-jour { opacity: 1; animation: pl-tombe .7s cubic-bezier(.3,1.3,.5,1) backwards; animation-delay: calc(var(--j) * .1s); }

/* ---- 2. Créneaux : texte à gauche, la semaine à droite ---- */
.creneaux { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4cqw, 64px); align-items: center; }
.creneaux > * { min-width: 0; }
.creneaux .titre-section { margin-bottom: 22px; }
.creneaux .texte a { color: inherit; text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.creneaux .texte a:hover { color: var(--violet); }
.semaine-cadre { padding: 30px 28px 22px; border-radius: 22px; background: var(--creme); }
.semaine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 300px; }
.semaine li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; height: 100%; }
/* une case par cours au planning, empilées ; la colonne la plus pleine prend toute la hauteur */
.sem-pile { display: flex; flex-direction: column-reverse; gap: 3px; width: 100%; height: calc(var(--n) / var(--max) * (100% - 30px));
  transform: scaleY(0); transform-origin: bottom; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.sem-pile i { flex: 1; border-radius: 5px; }
.semaine-cadre.visible .sem-pile { transform: none; }
.semaine li:nth-child(2) .sem-pile { transition-delay: .07s; } .semaine li:nth-child(3) .sem-pile { transition-delay: .14s; }
.semaine li:nth-child(4) .sem-pile { transition-delay: .21s; } .semaine li:nth-child(5) .sem-pile { transition-delay: .28s; }
.semaine li:nth-child(6) .sem-pile { transition-delay: .35s; } .semaine li:nth-child(7) .sem-pile { transition-delay: .42s; }
.sem-jour { font: 800 16px/1 'Barlow Condensed', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--violet-fonce); }
.encadre { display: flex; align-items: center; gap: 18px; max-width: 860px; margin: 48px auto 0; padding: 22px 28px; border-radius: 22px; background: var(--lilas); }
.encadre p { margin: 0; }
.encadre a { color: var(--violet-fonce); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.encadre-icone { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--violet); }
.encadre-icone svg { width: 30px; height: 30px; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 3. Détail des cours : cinq cartes, chacune de la couleur du planning ---- */
/* Cinq cours sur deux lignes, trois puis deux centrés (Virginie, 27/10) : six demi-colonnes, chaque carte en prend deux */
.cours-grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; max-width: 1000px; margin: 44px auto 0; }
.cours-grille > .cours { grid-column: span 2; }
.cours-grille > .cours:nth-child(4) { grid-column: 2 / span 2; }
/* Plus d'air dans la carte (Virginie, 27/10) ; contenu à gauche (Virginie, 28/10).
   Chaque carte reprend les trois rangées de sa ligne (titre, texte, bouton) : sur une même ligne, les textes
   commencent à la même hauteur et les boutons sont alignés en bas (Virginie, 28/10). */
.cours { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; justify-items: start; text-align: left; overflow: hidden; padding: 42px 32px 32px; border-radius: 22px; background: #FFFFFF; }
.cours-bande { position: absolute; left: 0; right: 0; top: 0; height: 10px; }
/* 20 px pour les cinq titres : « WOD — Functional Fitness » tient sur une ligne, à la même taille que les autres (Virginie, 28/10) */
.cours .titre-h3 { font-size: 20px; margin-bottom: 12px; }
.cours .titre-loup { padding-left: 0; }  /* le loup précède le titre, dans le fil du texte */
.cours .titre-loup .picto-loup { position: static; margin: 0 10px 0 0; vertical-align: -3px; }
.cours p { margin: 0 0 18px; }
.cours-voir { align-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0;
  border-radius: 999px; background: var(--lilas); color: var(--violet-fonce); font: 700 14.5px/1 'Barlow', sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.cours-voir:hover { background: var(--violet); color: #FFFFFF; }
.cours-voir:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

/* ---- Fin : seulement le titre et le bouton ---- */
section[data-section="fin"] .fin-texte .bouton { margin-top: 34px; }

@media (prefers-reduced-motion: reduce) {
  .sem-pile { transform: none; transition: none; }
  .pl-grille.repere .pl-cours { animation: none; }
  .planning button, .pl-jour { transition: none; }
  .pl-grille.anime .pl-jour { opacity: 1; animation: none; }
}

/* ---- Tablette, 700 à 1 023 px : trois cartes de cours par ligne ---- */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .cours-grille { gap: 16px; }
  .cours { padding: 36px 18px 26px; }
}

/* ---- Téléphone et tablette (1 023 px et moins) ---- */
@media (max-width: 1023.98px) {
  .creneaux { grid-template-columns: 1fr; gap: 28px; }
  .creneaux .titre-section { margin-left: auto; margin-right: auto; text-align: center; }
  .semaine { height: 220px; gap: 7px; }
  .semaine-cadre { padding: 22px 16px 18px; }
  .encadre { margin-top: 34px; padding: 20px 18px; align-items: flex-start; }
  .cours-grille { margin-top: 34px; }
  .pl-lab { min-width: 0; width: 100%; text-align: center; margin: 4px 0 0; }
  .pl-filtres { justify-content: center; }
}

/* ---- Téléphone et tablette (1 023 px et moins) : règle 14 des sites TDB, modèle Éclair — les jours les
   uns sous les autres, les créneaux en tuiles regroupés par moment, l'heure au-dessus du cours ---- */
@media (max-width: 1023.98px) {
  .pl-grille { grid-template-columns: 1fr; }
  .pl-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px 14px; }
  .pl-cr, .pl-l { display: contents; }
  .pl-cr[hidden] { display: none; }
  .pl-h { display: none; }
  .pl-cours { display: block; text-align: center; padding: 8px 6px; border-radius: 11px; line-height: 1.2; }
  .pl-cours::before { content: attr(data-h); display: block; margin-bottom: 2px; font: 700 12px/1.2 'Barlow', sans-serif; letter-spacing: 0; text-transform: none; opacity: .85; }
  .pl-cr::before { grid-column: 1 / -1; margin: 6px 2px -1px; font: 800 11.5px/1.2 'Barlow', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-fonce); }
  .pl-cr:not([hidden])[data-m="matin"]:not([data-m="matin"]:not([hidden]) ~ *)::before { content: "Matin"; }
  .pl-cr:not([hidden])[data-m="midi"]:not([data-m="midi"]:not([hidden]) ~ *)::before { content: "Midi"; }
  .pl-cr:not([hidden])[data-m="soir"]:not([data-m="soir"]:not([hidden]) ~ *)::before { content: "Soir"; }
  .pl-cr:first-child::before { margin-top: 0; }
  /* Un filtre actif fait disparaître les jours sans cours ; s'il n'en reste aucun, tous restent, avec le message */
  .planning:has(.pl-jour:not([data-eteint])) .pl-jour[data-eteint] { display: none; }
}
/* Tablette : quatre tuiles par ligne — écart voulu à la règle des sites (deux colonnes), gardé par Virginie le 28/10 */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .pl-liste { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 699.98px) {
  .cours-grille { grid-template-columns: 1fr; }
  .cours-grille > .cours, .cours-grille > .cours:nth-child(4) { grid-column: auto; }
  .encadre { flex-direction: column; align-items: center; text-align: center; }
}