/* Composant : stages et onglets Formation. Utilise les variables de style.css (couleurs, polices, espacements). */

/* ===== Onglets de la rubrique Formation : « Formation des jeunes » et « Stages » =====
   Sous-navigation entre deux pages : de simples liens, l'onglet courant porte aria-current="page". */
.onglets { background: var(--surface); border-bottom: 1px solid var(--line); }
/* La marge intérieure laisse la place à l'anneau de focus, qu'un conteneur défilant rognerait sinon.
   Sur 375 px les deux onglets tiennent ; si l'écran est plus étroit, la barre défile en interne (jamais la page). */
.onglets__liste { list-style: none; margin: 0 -8px; padding: 6px 8px; display: flex; gap: 0 28px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.onglets__liste li { flex: none; }
.onglets a { position: relative; display: flex; align-items: center; min-height: 44px; border-radius: 0; color: var(--muted); font: 700 .9375rem/1.1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.onglets a:hover, .onglets a[aria-current="page"] { color: var(--text); }
/* Filet épais sous l'onglet : jaune pour la page courante, gris discret au survol des autres */
.onglets a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 5px; background: var(--yellow); transform: scaleX(0); transform-origin: left center; transition: transform .25s var(--ease); }
.onglets a[aria-current="page"]::after { transform: none; }
.onglets a:hover:not([aria-current])::after { background: var(--line); transform: none; }
.onglets a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .onglets a::after { transition: none; } }
@media (forced-colors: active) {
  .onglets a::after { display: none; }
  .onglets a[aria-current="page"] { border-bottom: 5px solid currentColor; }
}

/* ===== Stages : frise verticale de l'année scolaire =====
   À gauche le nom de la période et la saison, à droite les informations pratiques. Petit écran : tout s'empile le long de la ligne. */
.periodes { list-style: none; margin: 0; padding: 0; }
.periode { position: relative; padding: 0 0 52px 28px; border-left: 2px solid var(--line); }
.periode:last-child { padding-bottom: 0; }
/* Repère posé sur la ligne : une bande inclinée à 17°, comme celles du logo, à la hauteur de la première ligne du nom */
.periode::before { content: ""; position: absolute; left: -8px; top: 0; width: 14px; height: calc(clamp(2.5rem, 8vw, 3.5rem) * .95); background: var(--yellow); transform: skewX(-17deg); }
.periode__tete { margin-bottom: 22px; }
.periode__nom { margin: 0; font-size: clamp(2.5rem, 8vw, 3.5rem); line-height: .95; }
.periode__saison { margin: 12px 0 0; font: 600 1.5rem/1 var(--font-title); letter-spacing: .04em; color: var(--link); font-variant-numeric: tabular-nums; }

/* Informations : liste de définitions, une ligne par donnée, filets fins */
.periode__faits { margin: 0; }
.periode__faits > div { display: grid; gap: 2px 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.periode__faits > div:last-child { border-bottom: 1px solid var(--line); }
.periode__faits dt { color: var(--muted); font-weight: 700; }
.periode__faits dd { margin: 0; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
@media (min-width: 640px) { .periode__faits > div { grid-template-columns: minmax(130px, 190px) minmax(0, 1fr); } }

/* Bas de période : bouton d'inscription, ou texte avec le repère « à compléter » */
.periode__inscription { margin: 24px 0 0; max-width: none; }
.periode__inscription strong { color: var(--muted); }
.periodes .todo { border-radius: var(--radius); }
.periodes a:focus-visible, .stages__fin a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* Le biseau du bouton principal (clip-path) rognerait l'anneau de focus : il passe en rectangle tant que le bouton a le focus */
.periode__inscription .btn--primary:focus-visible { clip-path: none; }

/* Grand écran : la ligne passe entre les deux colonnes, le repère la suit (4/11 de la largeur = la colonne du nom) */
@media (min-width: 900px) {
  .periode { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); padding: 0; border-left: 0; }
  .periode::before { left: calc(36.3636% - 6px); }
  .periode__tete { margin: 0; padding-right: clamp(24px, 4vw, 56px); }
  .periode__corps { padding: 0 0 56px clamp(24px, 4vw, 56px); border-left: 2px solid var(--line); }
  .periode:last-child .periode__corps { padding-bottom: 0; }
}

/* Fin de page et cas sans période */
.stages__fin { margin: clamp(48px, 7vw, 72px) 0 0; padding-top: 24px; border-top: 1px solid var(--line); max-width: none; }
.stages__vide { margin: 0; padding: 40px 24px; border: 2px dashed var(--line); color: var(--muted); text-align: center; max-width: none; }