/* Cours à l'année — liste des créneaux hebdomadaires en association */

.annee-sous-titre {
    color: var(--c-or-dark);
    font-family: var(--font-title);
    letter-spacing: 0.06em;
}

.annee-intro,
.annee-outro {
    max-width: var(--container-narrow);
    margin: 0 auto var(--sp-md);
    text-align: center;
}
.annee-outro { margin-top: var(--sp-lg); }

.annee-note {
    max-width: var(--container-narrow);
    margin: 0 auto var(--sp-lg);
    text-align: center;
    color: var(--c-text-muted-dark);
    font-size: 0.95rem;
}

.annee-vide {
    text-align: center;
    padding: var(--sp-lg) var(--sp-sm);
    color: var(--c-text-muted-dark);
}
.annee-vide .btn { margin-top: var(--sp-sm); }

/* ─── Semaine type ───
   Vue d'ensemble, pas un calendrier : rien ne change d'un mois à l'autre.
   Une colonne par jour travaillé, une ligne par tranche de 5 min (le pas et la
   hauteur d'heure sont calculés dans pageController.buildWeekGrid).
   Plus large que le reste de la page : avec 6 jours en colonnes, les noms de
   cours ont besoin de place pour ne pas être tronqués. */
.semaine {
    max-width: var(--container-max);
    margin: 0 auto var(--sp-xl);
}

.semaine__titre {
    font-family: var(--font-title);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-or-dark);
    text-align: center;
    margin: 0 0 var(--sp-sm);
}

.semaine__grille {
    display: grid;
    background: white;
    border: 1px solid var(--c-border-dark);
    padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) 0;
    column-gap: 6px;
}

.semaine__jour {
    font-family: var(--font-title);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-noir);
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--c-or);
    align-self: end;
}

.semaine__heure {
    grid-column: 1;
    font-size: 0.72rem;
    color: var(--c-text-muted-dark);
    text-align: right;
    padding-right: 0.6rem;
    /* Alignée sur le trait de l'heure, pas centrée sur la plage. */
    align-self: start;
    transform: translateY(-0.4em);
}

/* Trait horizontal léger à chaque heure pleine, pour situer les blocs. */
.semaine__ligne {
    border-top: 1px dashed var(--c-border-dark);
    height: 0;
    align-self: start;
}

/* Une teinte par famille de discipline. Les couleurs reprennent celles de la
   légende du calendrier de réservation, pour ne pas inventer une 2e palette. */
.semaine__cours {
    --teinte: 201, 169, 106;   /* or, par défaut */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.05rem;
    margin: 1px 2px;
    padding: 0.28rem 0.5rem;
    background: rgba(var(--teinte), 0.18);
    border-left: 2px solid rgb(var(--teinte));
    color: var(--c-text-dark);
    overflow: hidden;
    transition: background var(--tr-fast), filter var(--tr-fast);
}
.semaine__cours--cabaret { --teinte: 201, 169, 106; }   /* or champagne */
.semaine__cours--modernjazz { --teinte: 176, 106, 122; } /* rosé */
.semaine__cours--eveil { --teinte: 95, 134, 168; }       /* bleu */
.semaine__cours--initiation { --teinte: 125, 106, 143; } /* prune */
.semaine__cours--autre { --teinte: 122, 132, 106; }      /* olive */

.semaine__cours:hover {
    background: rgba(var(--teinte), 0.34);
    filter: saturate(1.1);
}

.semaine__legende {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.2rem;
    margin: var(--sp-sm) 0 0;
    font-size: 0.8rem;
    color: var(--c-text-muted-dark);
}
.semaine__legende-item { display: inline-flex; align-items: center; }
.semaine__puce {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.45rem;
    border-radius: 50%;
}
.semaine__puce--cabaret { background: #c9a96a; }
.semaine__puce--modernjazz { background: #b06a7a; }
.semaine__puce--eveil { background: #5f86a8; }
.semaine__puce--initiation { background: #7d6a8f; }
.semaine__puce--autre { background: #7a846a; }
.semaine__cours:focus-visible {
    outline: 2px solid var(--c-or);
    outline-offset: 1px;
}

.semaine__cours-heure {
    font-family: var(--font-title);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--c-or-dark);
    white-space: nowrap;
}
.semaine__cours-nom {
    font-size: 0.76rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--c-noir);
}

/* La cible d'une ancre ne doit pas se retrouver sous l'en-tête collant. */
.annee-cours { scroll-margin-top: 90px; }

/* Même largeur que la grille au-dessus : les bords des cartes tombent
   exactement sur ceux du tableau de la semaine. */
.annee-jours {
    max-width: var(--container-max);
    margin: 0 auto;
}

.annee-jour + .annee-jour { margin-top: var(--sp-lg); }

.annee-jour__titre {
    font-family: var(--font-title);
    font-size: 1.3rem;
    color: var(--c-or-dark);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-bottom: 0.5rem;
    margin-bottom: var(--sp-sm);
    border-bottom: 1px solid var(--c-border-dark);
}

/* Une carte = un bloc en pleine largeur : le bouton passe à la ligne sous le
   texte, ce qui laisse l'adresse tenir sur une seule ligne. */
.annee-cours {
    background: white;
    border: 1px solid var(--c-border-dark);
    border-left: 3px solid var(--c-or);
    padding: var(--sp-sm) var(--sp-md);
    margin-bottom: var(--sp-sm);
    transition: border-color var(--tr-fast), transform var(--tr-fast);
}
.annee-cours:hover {
    border-color: var(--c-or);
    transform: translateY(-2px);
}

.annee-cours__horaire {
    font-family: var(--font-title);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--c-or-dark);
    margin: 0 0 0.2rem;
}
.annee-cours__horaire i { margin-right: 0.35rem; }

.annee-cours__titre {
    font-family: var(--font-title);
    font-size: 1.25rem;
    color: var(--c-noir);
    margin: 0 0 0.35rem;
    font-weight: 600;
}

/* Niveau et association : leur propre ligne, au-dessus de l'adresse. */
.annee-cours__orga {
    margin: 0;
    font-size: 0.88rem;
    color: var(--c-text-muted-dark);
}
.annee-cours__orga span + span::before {
    content: '·';
    margin: 0 0.45rem;
    color: var(--c-or);
}

/* L'adresse occupe toute la largeur de la carte, donc elle tient sur une ligne. */
.annee-cours__lieu {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--c-text-muted-dark);
}
.annee-cours__lieu i { color: var(--c-or); margin-right: 0.3rem; }

.annee-cours__notes {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    color: var(--c-text-muted-dark);
    font-style: italic;
}

/* Le bouton passe à la ligne, sous le texte. */
.annee-cours__action {
    margin-top: var(--sp-sm);
    padding-top: var(--sp-sm);
    border-top: 1px solid var(--c-border-dark);
}
.annee-cours__action .btn i { margin-left: 0.4rem; font-size: 0.75em; }

.annee-cours__externe {
    display: inline-block;
    margin: 0 0 0 0.85rem;
    font-size: 0.75rem;
    color: var(--c-text-muted-dark);
}

.annee-ailleurs {
    text-align: center;
    margin-top: var(--sp-xl);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--c-border-dark);
}
.annee-ailleurs p {
    color: var(--c-text-muted-dark);
    margin-bottom: var(--sp-sm);
}
.annee-ailleurs .btn { margin: 0 0.35rem 0.5rem; }

/* Tablette : on resserre la grille pour garder les noms lisibles. */
@media (max-width: 900px) {
    .semaine__cours-nom { font-size: 0.7rem; }
    .semaine__cours { padding: 0.3rem 0.35rem; }
    .semaine__jour { font-size: 0.7rem; letter-spacing: 0.06em; }
}

/* Téléphone : la grille hebdomadaire devient illisible en 5 colonnes.
   On l'escamote et la liste détaillée ci-dessous prend le relais. */
@media (max-width: 700px) {
    .semaine { display: none; }
}

/* Mobile : le bouton prend toute la largeur, la mention passe dessous. */
@media (max-width: 640px) {
    .annee-cours { padding: var(--sp-sm); }
    .annee-cours__action .btn { display: block; width: 100%; text-align: center; }
    .annee-cours__externe {
        display: block;
        margin: 0.5rem 0 0;
        text-align: center;
    }
}