/* ============================================================
   PHSMW — Programme (section #programme)
   Motif liste + détail sur desktop (≥821px), accordéon sous
   821px. Fichier additif : ne modifie pas phsmw-accueil.css.
   Jetons de design réutilisés depuis phsmw-accueil.css (:root).
   ============================================================ */

/* ------------------------------------------------------------
   Disposition maître-détail (desktop)
   ------------------------------------------------------------ */

.programme__disposition {
  display: grid;
  grid-template-columns: minmax(260px, 34%) 1fr;
  gap: clamp(24px, 3vw, 40px);
  /* stretch : le panneau de droite prend la hauteur de la liste de
     gauche, sinon il « flotte » et la composition paraît déséquilibrée. */
  align-items: stretch;
}

/* Colonne gauche : la liste des soirées */

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

.programme__bouton {
  width: 100%;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 14px 16px 14px 12px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background-color .18s ease, border-color .18s ease;
}

/* rgba de --couleur-or (#BE8328) : les custom properties hexadécimales
   ne peuvent pas être injectées dans rgba(), d'où la valeur explicite. */
.programme__bouton:hover { background: rgba(190, 131, 40, .08); }

.programme__bouton:focus-visible { outline: 3px solid var(--couleur-or); outline-offset: -3px; }

.programme__bouton[aria-selected="true"] {
  background: #ffffff;
  border-left-color: var(--couleur-or);
  box-shadow: var(--ombre-douce);
}

.programme__numero {
  font-size: .82rem;
  font-weight: 700;
  color: var(--couleur-or);
  font-variant-numeric: tabular-nums;
}

.programme__nom {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--couleur-encre);
}

.programme__theme {
  display: block;
  font-size: .82rem;
  color: var(--couleur-texte-tenu);
  margin-top: 2px;
}

/* Le chevron ne sert que sur mobile */
.programme__chevron { display: none; }

/* Colonne droite : panneaux de détail (un par soirée, un seul visible) */

.programme__panneau {
  background: #ffffff;
  border-radius: var(--rayon-large);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--ombre-douce);
}

/* Le contenu reste en haut de la carte, même si celle-ci s'étire. */
.programme__panneau--desktop {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.programme__panneau[hidden] { display: none; }

.programme__contenu-jour {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--couleur-or-fonce);
  font-weight: 700;
  margin: 0 0 6px;
}

.programme__titre {
  margin: 0 0 14px;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--couleur-encre);
}

.programme__texte {
  margin: 0 0 20px;
  line-height: 1.65;
  max-width: 62ch;
  color: var(--couleur-texte);
}

.programme__pratique {
  margin: 0;
  padding: 16px 18px;
  background: var(--fond-creme);
  border-left: 3px solid var(--couleur-or);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  line-height: 1.55;
  max-width: 62ch;
}

.programme__pratique-label {
  display: block;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--couleur-or-fonce);
  margin-bottom: 5px;
}

/* Animation d'apparition du panneau qui vient d'être révélé */
.programme__panneau:not([hidden]) { animation: programme-apparait .3s cubic-bezier(.16, 1, .3, 1); }

@keyframes programme-apparait {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* IMPORTANT — correction clé de la maquette validée :
   sur desktop, seuls les panneaux --desktop existent visuellement.
   Les panneaux --mobile (glissés sous chaque onglet) ne servent
   qu'à l'accordéon mobile. Sans cette règle, le contenu s'affiche
   DEUX FOIS et la section déborde de l'écran. */
@media (min-width: 821px) {
  .programme__panneau--mobile { display: none !important; }
}

/* ------------------------------------------------------------
   Bascule mobile : accordéon
   ------------------------------------------------------------ */

@media (max-width: 820px) {

  .programme__disposition { display: block; }

  /* Correction clé (suite) : sur mobile, c'est l'inverse — le panneau
     de détail de droite disparaît, le contenu vit sous l'onglet ouvert. */
  .programme__panneau--desktop { display: none; }

  .programme__onglets { border-top: 1px solid var(--bordure-creme); }

  .programme__onglets li { border-bottom: 1px solid var(--bordure-creme); }

  .programme__bouton {
    grid-template-columns: 22px 1fr 26px;
    border-left: 0;
    border-radius: 0;
    padding: 15px 4px;
  }

  .programme__bouton[aria-selected="true"] {
    background: none;
    box-shadow: none;
  }

  .programme__chevron {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--bordure-creme);
    border-radius: 50%;
    font-size: .72rem;
    color: var(--couleur-texte-tenu);
    transition: transform .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  }

  .programme__bouton[aria-selected="true"] .programme__chevron {
    transform: rotate(180deg);
    background: var(--couleur-or);
    border-color: var(--couleur-or);
    color: #ffffff;
  }

  /* Le panneau mobile se glisse juste sous son onglet */
  .programme__panneau--mobile {
    border-radius: 0;
    box-shadow: none;
    background: var(--fond-creme);
    padding: 4px 4px 20px 26px;
  }

  /* Déjà visible dans l'onglet : jour, thème (via .programme__nom/theme) */
  .programme__panneau--mobile .programme__contenu-jour,
  .programme__panneau--mobile .programme__titre { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .programme__bouton,
  .programme__chevron { transition: none; }
  .programme__panneau:not([hidden]) { animation: none; }
}