/* Habillage du suivi sportif. Il reprend l'identité du portail pour que la connexion soit uniforme d'un outil à
   l'autre, et l'étend aux écrans de l'application, pensés pour le téléphone. Aucun style en ligne, la politique de
   sécurité du contenu les refuse : tout vit ici. */

:root {
  --sport-accent: #4f46e5;
  --sport-accent-clair: #6366f1;
  --sport-accent-second: #0ea5e9;
  --sport-accent-second-fonce: #2563eb;
  --sport-encre: #0f172a;
  --sport-fond-1: #eef2ff;
  --sport-fond-2: #f8fafc;
  --sport-fond-3: #ecfeff;
  --sport-carte: rgba(255, 255, 255, 0.86);
  --sport-carte-pleine: #ffffff;
  --sport-ombre: 0 24px 60px -24px rgba(15, 23, 42, 0.35), 0 2px 6px rgba(15, 23, 42, 0.06);
  --sport-ombre-douce: 0 12px 30px -18px rgba(15, 23, 42, 0.28), 0 1px 3px rgba(15, 23, 42, 0.05);
  --bs-primary: var(--sport-accent);
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: var(--sport-accent);
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #4338ca;
  --bs-link-hover-color-rgb: 67, 56, 202;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-focus-ring-color: rgba(79, 70, 229, 0.25);
}

:root[data-bs-theme="dark"] {
  --sport-encre: #e2e8f0;
  --sport-fond-1: #0f172a;
  --sport-fond-2: #111827;
  --sport-fond-3: #172554;
  --sport-carte: rgba(30, 41, 59, 0.82);
  --sport-carte-pleine: #1e293b;
  --sport-ombre: 0 24px 60px -24px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.3);
  --sport-ombre-douce: 0 12px 30px -18px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.3);
  --bs-link-color: #a5b4fc;
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: #c7d2fe;
  --bs-link-hover-color-rgb: 199, 210, 254;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(60rem 40rem at 8% -12%, var(--sport-fond-1), transparent 60%),
    radial-gradient(52rem 36rem at 112% 6%, var(--sport-fond-3), transparent 55%),
    var(--sport-fond-2);
  background-attachment: fixed;
  color: var(--sport-encre);
  -webkit-font-smoothing: antialiased;
}

/* La marque : un carré arrondi en dégradé qui porte l'emblème de l'outil, suivi de son nom. Identique au portail. */

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.marque-pictogramme {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, var(--sport-accent), var(--sport-accent-second));
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(79, 70, 229, 0.6);
  flex: none;
}

.marque-pictogramme svg {
  width: 1.4rem;
  height: 1.4rem;
}

.marque-nom {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Page d'entrée : la carte centrée dans la fenêtre, avec l'emblème, le titre et le pied de version. */

.page-entree {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.carte-entree {
  width: 100%;
  max-width: 25rem;
  border: 0;
  border-radius: 1.5rem;
  background: var(--sport-carte);
  backdrop-filter: blur(16px);
  box-shadow: var(--sport-ombre);
}

.carte-entree .card-body {
  padding: 2.25rem 1.9rem;
}

.entree-emblème {
  margin: 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.1rem;
}

.entree-emblème svg {
  width: 2rem;
  height: 2rem;
}

.entree-titre {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 1.25rem 0 0.25rem;
}

.entree-sous-titre {
  color: var(--bs-secondary-color);
  margin-bottom: 1.5rem;
}

.entree-pied {
  margin-top: 1.75rem;
}

/* Champs de formulaire : un peu plus d'air et un anneau de focus qui reprend l'accent. */

.form-control,
.form-select {
  padding: 0.7rem 0.9rem;
  border-color: var(--bs-border-color);
  background-color: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sport-accent-clair);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.form-check-input:checked {
  background-color: var(--sport-accent);
  border-color: var(--sport-accent);
}

.form-check-input:focus {
  border-color: var(--sport-accent-clair);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* Boutons : accent plein en dégradé pour l'action principale, contours lisibles dans les deux thèmes. */

.btn {
  font-weight: 600;
  --bs-btn-border-radius: 0.75rem;
}

.btn-primary {
  --bs-btn-bg: var(--sport-accent);
  --bs-btn-border-color: var(--sport-accent);
  --bs-btn-hover-bg: #4338ca;
  --bs-btn-hover-border-color: #4338ca;
  --bs-btn-active-bg: #3730a3;
  --bs-btn-active-border-color: #3730a3;
  --bs-btn-disabled-bg: var(--sport-accent-clair);
  --bs-btn-disabled-border-color: var(--sport-accent-clair);
  background-image: linear-gradient(135deg, var(--sport-accent), var(--sport-accent-second-fonce));
  border: 0;
  box-shadow: 0 10px 24px -12px rgba(79, 70, 229, 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px rgba(79, 70, 229, 0.8);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-border-color: color-mix(in srgb, var(--sport-accent) 45%, transparent);
  --bs-btn-hover-bg: var(--sport-accent);
  --bs-btn-hover-border-color: var(--sport-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sport-accent);
  --bs-btn-active-border-color: var(--sport-accent);
}

.btn-outline-danger {
  --bs-btn-color: #b02a37;
  --bs-btn-border-color: #b02a37;
}

:root[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary-text-emphasis);
  --bs-btn-border-color: var(--bs-secondary-text-emphasis);
}

:root[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: var(--bs-danger-text-emphasis);
  --bs-btn-border-color: var(--bs-danger-text-emphasis);
}

/* Bouton œil accolé au champ du mot de passe : il reprend la bordure du champ et prend l'accent au survol. */

.icone-oeil {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.bouton-oeil {
  --bs-btn-color: var(--bs-secondary-color);
  --bs-btn-bg: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-link-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--sport-accent) 10%, transparent);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--bs-link-color);
  --bs-btn-active-bg: color-mix(in srgb, var(--sport-accent) 16%, transparent);
  --bs-btn-active-border-color: var(--bs-border-color);
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
  padding-inline: 0.9rem;
}

.bouton-oeil[aria-pressed="true"] {
  --bs-btn-color: var(--bs-link-color);
}

/* Barre de navigation de l'application : verre dépoli qui laisse deviner le fond, collée en haut. */

.barre {
  position: sticky;
  top: 0;
  z-index: 1020;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.barre .container {
  gap: 0.5rem;
}

/* L'application est faite pour le téléphone : sur grand écran, elle garde une colonne étroite et centrée, sinon la
   barre s'étire, les libellés s'éloignent de leurs valeurs et les boutons deviennent démesurés. La barre et le
   contenu partagent la même largeur pour rester alignés. */
.barre .container,
#vue {
  max-width: 33rem;
}

.barre .btn {
  --bs-btn-border-radius: 0.65rem;
}

/* Écrans de l'application : titres, cartes et éléments communs. */

#vue {
  padding-bottom: 3rem;
}

.card {
  border-color: var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius-xl);
  background: var(--sport-carte);
  box-shadow: var(--sport-ombre-douce);
}

.modal-content {
  border: 0;
  border-radius: var(--bs-border-radius-xl);
  background: var(--sport-carte-pleine);
  box-shadow: var(--sport-ombre);
}

.list-group-item {
  background: transparent;
}

/* Accueil : chaque groupe s'ouvre sur un intitulé à l'accent, et sa liste tient dans une carte de verre. */

#vue section {
  margin-bottom: 1.25rem;
}

#vue section > h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--bs-link-color);
  margin-bottom: 0.45rem;
  padding-left: 0.2rem;
}

/* Intitulé d'un groupe de l'accueil : un bouton qui replie ou déplie sa liste, avec un chevron qui tourne. */
#vue .accueil-groupe {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0.2rem;
  margin-bottom: 0.45rem;
  color: var(--bs-link-color);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: start;
}

/* Intitulé d'un palier de la fiche : un bouton qui déplie ses tentatives, avec le même chevron que les groupes. */
#vue .palier-entete {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: start;
}

#vue button.palier-entete::after {
  color: var(--bs-secondary-color);
}

#vue button.accueil-groupe::after,
#vue button.palier-entete::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1rem);
  transition: transform 0.15s ease;
}

#vue button.accueil-groupe[aria-expanded="false"]::after,
#vue button.palier-entete[aria-expanded="false"]::after {
  transform: rotate(-45deg) translateX(-0.1rem);
}

#vue button.accueil-groupe:focus-visible,
#vue button.palier-entete:focus-visible {
  outline: none;
  border-radius: 0.4rem;
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* Bouton de retour vers l'exercice ou la liste : arrondi comme les autres, plus visible qu'un simple lien. */
.bouton-retour {
  --bs-btn-border-radius: 0.65rem;
}

.liste-dense {
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--bs-border-color-translucent);
  background: var(--sport-carte);
  box-shadow: var(--sport-ombre-douce);
}

.liste-dense .list-group-item {
  border-color: var(--bs-border-color-translucent);
  padding: 0.65rem 0.85rem;
  transition: background-color 0.12s ease;
}

.liste-dense .list-group-item:first-child {
  border-top: 0;
}

.liste-dense .list-group-item:last-child {
  border-bottom: 0;
}

.liste-dense .list-group-item:hover,
.liste-dense .list-group-item:focus-within {
  background: color-mix(in srgb, var(--sport-accent) 6%, transparent);
}

.ligne-exercice {
  min-width: 0;
}

/* La donnée cherchée en salle, le palier en cours, ressort en accent ; la meilleure tentative se lit en dessous. */

.liste-dense .text-end .fw-semibold {
  color: var(--bs-link-color);
  font-size: 1.02rem;
  line-height: 1.2;
}

/* Le bouton pour saisir : une tuile à l'accent, assez large pour le pouce, qui se remplit au contact. */

.bouton-saisir {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: color-mix(in srgb, var(--sport-accent) 12%, transparent);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sport-accent);
  --bs-btn-hover-border-color: var(--sport-accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4338ca;
  --bs-btn-active-border-color: #4338ca;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  min-width: 2.6rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
}

/* Saisie en salle : des boutons hauts, arrondis et espacés, faits pour être touchés sans regarder. */

.bouton-saisie {
  min-width: 3.5rem;
  min-height: 2.75rem;
  border-radius: 0.8rem;
}

.btn-lg.bouton-saisie {
  min-height: 3.25rem;
  font-size: 1.15rem;
}

.pastille-serie {
  min-width: 4.5rem;
  min-height: 2.5rem;
  border-radius: 0.7rem;
  font-weight: 600;
}

/* Un jeu de données réduit à un point ne trace rien : la hauteur reste réservée pour que la carte ne saute pas. */

.graphe {
  position: relative;
  height: 16rem;
}

.icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* Notification : elle flotte au-dessus du contenu, arrondie comme le reste. */

.toast {
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--sport-ombre);
}

/* Sur téléphone, le témoin des saisies à envoyer prend la place du nom de l'outil, qu'il tronquerait sinon : le nom reste
   lu par les lecteurs d'écran, et le pictogramme garde le lien vers l'accueil. */

@media (max-width: 575.98px) {
  .barre .container:has(#temoin-envoi:not(.d-none)) .marque-nom {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* Téléphone étroit : la barre garde son air sans déborder, et les propositions s'étalent sur toute la largeur. */

@media (max-width: 400px) {
  .marque-nom {
    font-size: 1.05rem;
  }

  .barre .btn {
    --bs-btn-padding-x: 0.6rem;
  }
}