/* ============================================================
   LURE TRIATHLON — Espace réservé Entraînements
   Complète style.css (variables --bleu, --vert, --rouge, --jaune,
   --gris, --marine, --dark, --light déjà définies là-bas).
   ============================================================ */

.page-connexion main.reserve-auth,
.page-reserve main.reserve-content {
  max-width: 900px;
  margin: 0 auto;
  padding: calc(var(--nav-height, 64px) + 3rem) 1.5rem 4rem;
}

/* --- Page de connexion --- */
.reserve-auth-box {
  background: var(--light);
  border: 1px solid #e3e5e8;
  border-radius: 12px;
  padding: 2.5rem;
  text-align: center;
}

.reserve-auth-box h1 {
  color: var(--marine);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.reserve-auth-box h1 .accent {
  color: var(--bleu);
}

.reserve-auth-intro {
  color: #444;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.reserve-auth-erreur {
  background: #fdecea;
  color: #b3261e;
  border-radius: 6px;
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
}

.reserve-auth-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: left;
}

.reserve-auth-form label {
  font-weight: 600;
  color: var(--marine);
  font-size: .9rem;
}

.reserve-auth-form input[type="text"],
.reserve-auth-form input[type="date"],
.reserve-auth-form input[type="file"],
.reserve-auth-form select {
  padding: .65rem .8rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}

.reserve-auth-form .btn-download {
  margin-top: 1rem;
  align-self: flex-start;
}

.reserve-auth-aide {
  margin-top: 1.5rem;
  font-size: .85rem;
  color: var(--gris);
}

.reserve-auth-aide a {
  color: var(--bleu);
}

/* --- Zone réservée --- */
.reserve-header {
  background: linear-gradient(135deg, var(--marine) 0%, #2f6fa8 50%, var(--marine) 100%);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 24px rgba(38,59,141,.18);
}

.reserve-header .badge {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.4);
  color: var(--jaune);
  padding: .2rem .8rem;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: .6rem;
}

.reserve-header h1 {
  color: #fff;
  font-size: 1.9rem;
  font-weight: 900;
}

.reserve-user-bar {
  margin-top: .75rem;
  font-size: .9rem;
  color: rgba(255,255,255,.75);
}

.reserve-user-bar a {
  color: var(--jaune);
  text-decoration: none;
  font-weight: 600;
}

/* "nav" porte des règles génériques (position fixe, hauteur, z-index) pour
   la vraie barre de nav du site (voir style.css) : on les neutralise ici
   explicitement, sinon elles fuitent sur ce <nav> et tronquent son contenu
   à var(--nav-height) au lieu de s'adapter au nombre de lignes d'onglets. */
.reserve-tabs-categories,
.reserve-tabs-niveaux {
  display: flex;
  gap: .6rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
  height: auto;
  z-index: auto;
  backdrop-filter: none;
}

.reserve-tabs-categories a,
.reserve-tabs-niveaux a {
  padding: .5rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: .85rem;
  border: 2px solid transparent;
  transition: transform .15s, box-shadow .15s;
}

/* Onglets "pastille fantôme" (inactif) : fond clair, bordure et texte de la
   couleur de la catégorie (voir lexiqueCouleurCategorie() côté PHP). */
.reserve-tabs-categories a.c-bleu,   .reserve-tabs-niveaux a.c-bleu   { background: #eaf7fd; border-color: var(--bleu);   color: #1a7ea8; }
.reserve-tabs-categories a.c-marine, .reserve-tabs-niveaux a.c-marine { background: #eceffb; border-color: var(--marine); color: var(--marine); }
.reserve-tabs-categories a.c-rouge,  .reserve-tabs-niveaux a.c-rouge  { background: #fdeeea; border-color: var(--rouge);  color: var(--rouge); }
.reserve-tabs-categories a.c-jaune,  .reserve-tabs-niveaux a.c-jaune  { background: #fffaea; border-color: var(--jaune);  color: #8a7000; }
.reserve-tabs-categories a.c-gris,   .reserve-tabs-niveaux a.c-gris   { background: #f2f2f2; border-color: var(--gris);   color: #6b6e6e; }
.reserve-tabs-categories a.c-vert,   .reserve-tabs-niveaux a.c-vert   { background: #f1f8e9; border-color: var(--vert);   color: #5b8a1f; }

/* Onglet actif : rempli de sa couleur, ombre portée assortie. */
.reserve-tabs-categories a.c-bleu.is-active,   .reserve-tabs-niveaux a.c-bleu.is-active   { background: var(--bleu);   color: #fff; box-shadow: 0 4px 12px rgba(76,191,238,.4); }
.reserve-tabs-categories a.c-marine.is-active, .reserve-tabs-niveaux a.c-marine.is-active { background: var(--marine); color: #fff; box-shadow: 0 4px 12px rgba(38,59,141,.4); }
.reserve-tabs-categories a.c-rouge.is-active,  .reserve-tabs-niveaux a.c-rouge.is-active  { background: var(--rouge);  color: #fff; box-shadow: 0 4px 12px rgba(236,77,37,.4); }
.reserve-tabs-categories a.c-jaune.is-active,  .reserve-tabs-niveaux a.c-jaune.is-active  { background: var(--jaune);  color: #5b4b00; box-shadow: 0 4px 12px rgba(254,221,25,.4); }
.reserve-tabs-categories a.c-gris.is-active,   .reserve-tabs-niveaux a.c-gris.is-active   { background: var(--gris);   color: #fff; box-shadow: 0 4px 12px rgba(146,149,149,.4); }
.reserve-tabs-categories a.c-vert.is-active,   .reserve-tabs-niveaux a.c-vert.is-active   { background: var(--vert);   color: #fff; box-shadow: 0 4px 12px rgba(141,198,65,.4); }

/* Sous-onglets "type de séance" : style neutre (contrairement aux
   onglets niveau/catégorie, ils n'encodent pas une couleur de sens). */
.reserve-tabs-types {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  position: relative;
  height: auto;
  z-index: auto;
  backdrop-filter: none;
}

.reserve-tabs-types a {
  padding: .4rem .9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .8rem;
  border: 1px solid #e3e5e8;
  background: var(--light);
  color: var(--marine);
  text-decoration: none;
}

.reserve-tabs-types a.is-active {
  background: var(--marine);
  color: #fff;
  border-color: var(--marine);
}

.reserve-pdf-bouton {
  margin: 0 0 1.5rem;
}

/* Bouton "Éducatifs ▾" (regroupe les catégories educatifs-* dans un sous-menu, voir scripts/lexique.js) */
.reserve-educatifs-dropdown {
  position: relative;
}

.reserve-educatifs-dropdown > button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  font-family: inherit;
  border: 2px solid var(--vert);
  background: #f1f8e9;
  color: #5b8a1f;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.reserve-educatifs-dropdown > button.is-active {
  background: var(--vert);
  color: #fff;
  box-shadow: 0 4px 12px rgba(141,198,65,.4);
}

.reserve-educatifs-dropdown .caret {
  display: inline-block;
  font-size: .7rem;
  transition: transform .2s;
}

.reserve-educatifs-dropdown > button.is-ouvert .caret {
  transform: rotate(180deg);
}

.reserve-educatifs-submenu {
  display: none;
  flex-direction: column;
  gap: .3rem;
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: .6rem;
  min-width: 220px;
  z-index: 15;
}

.reserve-educatifs-dropdown > button.is-ouvert + .reserve-educatifs-submenu {
  display: flex;
}

.reserve-educatifs-submenu a {
  display: block;
  padding: .5rem .8rem;
  border-radius: 8px;
  color: #333;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}

.reserve-educatifs-submenu a:hover {
  background: #f1f8e9;
  color: #5b8a1f;
}

.reserve-educatifs-submenu a.is-active {
  background: var(--vert);
  color: #fff;
}

.reserve-semaine-select {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 2rem;
}

.reserve-semaine-select label {
  font-weight: 600;
  color: var(--marine);
}

.reserve-semaine-select select {
  padding: .5rem .8rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: .95rem;
}

.reserve-niveaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.reserve-niveau-card {
  background: var(--light);
  border: 1px solid #e3e5e8;
  border-top: 4px solid var(--bleu);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s;
}

.reserve-niveau-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.reserve-niveau-card h2 {
  color: var(--bleu);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--jaune);
  padding-bottom: .5rem;
}

.reserve-markdown h1,
.reserve-markdown h2,
.reserve-markdown h3 {
  color: var(--marine);
  margin: 1rem 0 .5rem;
}

/* Les fichiers .md de séance commencent toujours par "## <Type>"
   (ex. "## Endurance"), qui fait doublon avec le titre déjà affiché
   juste au-dessus (voir .reserve-niveau-card h2) : on le masque. */
.reserve-markdown > h2:first-child {
  display: none;
}

.reserve-markdown p {
  margin-bottom: .75rem;
  line-height: 1.5;
}

.reserve-markdown ul,
.reserve-markdown ol {
  margin: 0 0 .75rem 1.25rem;
}

.reserve-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: .9rem;
}

.reserve-markdown th,
.reserve-markdown td {
  border: 1px solid #ddd;
  padding: .5rem .6rem;
  text-align: left;
}

.reserve-markdown th {
  background: var(--marine);
  color: #fff;
}

.reserve-vide {
  color: var(--gris);
  font-style: italic;
  padding: 2rem 0;
}

/* --- Admin --- */
.reserve-admin-form {
  background: var(--light);
  border: 1px solid #e3e5e8;
  border-radius: 12px;
  padding: 2rem;
}

.reserve-admin-suppression {
  margin-top: 2.5rem;
}

.reserve-admin-suppression h2 {
  color: var(--marine);
  font-size: 1.2rem;
  margin-bottom: .3rem;
}

.reserve-admin-suppression-categorie {
  margin-bottom: 1rem;
}

.reserve-admin-suppression-categorie select {
  padding: .5rem .8rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: .95rem;
}

.reserve-admin-form label.reserve-admin-confirmation {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-weight: 400;
  margin: .75rem 0 0;
}

.btn-supprimer {
  background: #b3261e;
  border-color: #b3261e;
  margin-top: 1rem;
}

.btn-supprimer:hover {
  background: transparent;
  color: #b3261e;
}

.reserve-admin-note {
  font-size: .85rem;
  color: var(--gris);
  margin: .5rem 0 1rem;
}

.reserve-admin-niveau-titre {
  font-weight: 700;
  color: var(--marine);
  margin-top: 1.2rem;
  margin-bottom: .3rem;
}

.reserve-message {
  padding: .75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-weight: 600;
}

.reserve-message-ok {
  background: #eaf7e6;
  color: #2e7d32;
}

.reserve-message-erreur {
  background: #fdecea;
  color: #b3261e;
}

/* --- Lexique & éducatifs --- */
.reserve-lexique-recherche {
  margin-bottom: 1.5rem;
}

.reserve-lexique-recherche input[type="search"] {
  width: 100%;
  max-width: 420px;
  padding: .65rem .9rem;
  border: 2px solid var(--jaune);
  border-radius: 999px;
  font-size: 1rem;
  font-family: inherit;
  transition: box-shadow .2s;
}

.reserve-lexique-recherche input[type="search"]:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(254,221,25,.25);
}

.reserve-lexique-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.lexique-carte {
  background: var(--light);
  border: 1px solid #e3e5e8;
  border-top: 4px solid var(--bleu);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s;
}

.lexique-carte:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.lexique-carte.is-hidden {
  display: none;
}

.lexique-carte h3 {
  color: var(--bleu);
  font-size: 1.05rem;
  margin-bottom: .5rem;
}

.lexique-carte p {
  line-height: 1.5;
  color: #333;
  white-space: pre-line;
}

/* Lien vers la vidéo de démonstration d'un éducatif (clé 'video' dans inc/lexique-data.php) */
.lexique-video {
  margin-top: .75rem;
}

.lexique-video a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  color: #5b8a1f;
  text-decoration: none;
}

.lexique-video a:hover {
  text-decoration: underline;
}

.lexique-video-credit {
  display: block;
  margin-top: .15rem;
  font-size: .8rem;
  color: #777;
  font-style: italic;
}

/* Info-bulle auto-liée dans le texte des séances (voir inc/lexique-liens.php) */
.lexique-terme {
  border-bottom: 1px dotted var(--bleu);
  cursor: help;
  position: relative;
}

.lexique-terme::after {
  content: attr(data-def);
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: .6rem;
  background: linear-gradient(135deg, var(--marine), #2f6fa8);
  color: #fff;
  padding: .5rem .75rem;
  border-radius: 8px;
  font-size: .85rem;
  line-height: 1.4;
  width: max-content;
  max-width: 260px;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 20;
}

/* Petite flèche pointant vers le terme */
.lexique-terme::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 100%;
  margin-bottom: .1rem;
  border: 6px solid transparent;
  border-top-color: var(--marine);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 20;
}

.lexique-terme:hover::after,
.lexique-terme:hover::before,
.lexique-terme.is-ouvert::after,
.lexique-terme.is-ouvert::before {
  opacity: 1;
  visibility: visible;
}