/* Identité ARCHIRIDE appliquée à AdminLTE.
   Les couleurs sont reprises du logo : marine, jaune, turquoise.
   Fichier volontairement court : tout ce qui peut être obtenu avec les classes
   Bootstrap fournies par AdminLTE n'a pas à être réécrit ici. */

:root {
  --archiride-marine: #16305c;
  --archiride-marine-clair: #24467d;
  --archiride-marine-fonce: #0f2445;
  --archiride-jaune: #f5c518;
  --archiride-turquoise: #2bb3c0;
}

/* Le bleu Bootstrap par défaut cède la place au marine du logo. */
.btn-primary {
  --bs-btn-bg: var(--archiride-marine);
  --bs-btn-border-color: var(--archiride-marine);
  --bs-btn-hover-bg: var(--archiride-marine-clair);
  --bs-btn-hover-border-color: var(--archiride-marine-clair);
  --bs-btn-active-bg: var(--archiride-marine-fonce);
  --bs-btn-active-border-color: var(--archiride-marine-fonce);
  --bs-btn-disabled-bg: var(--archiride-marine);
  --bs-btn-disabled-border-color: var(--archiride-marine);
}

.text-bg-primary {
  background-color: var(--archiride-marine) !important;
  color: #fff !important;
}

.text-primary {
  color: var(--archiride-marine) !important;
}

.app-sidebar {
  background-color: var(--archiride-marine) !important;
}

.sidebar-brand {
  background-color: var(--archiride-marine-fonce) !important;
}

.app-sidebar .brand-image {
  /* Le logo est détouré : pas de cadre ni d'ombre, qui feraient réapparaître
     un carré autour d'une image ronde. */
  box-shadow: none;
  border-radius: 0;
}

/* Le jaune du logo sert d'accent, jamais de fond de texte : son contraste sur
   blanc est insuffisant pour du corps de texte. */
.app-sidebar .nav-link.active {
  border-left: 3px solid var(--archiride-jaune);
}

.app-content-header h1 {
  color: var(--archiride-marine);
}

/* 16 px minimum sur les champs : en dessous, iOS zoome à la prise de focus. */
.login-card-body .form-control {
  font-size: 1rem;
}

/* Étiquettes permanentes des domiciles sur la carte d'ensemble : c'est le
   prénom qu'on vient lire, il doit rester net sur n'importe quel fond. */
.leaflet-tooltip.etiquette-domicile {
  background: rgb(255 255 255 / 92%);
  border: 0;
  border-radius: .25rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
  color: var(--archiride-marine);
  font-weight: 600;
  padding: .1rem .35rem;
}

.leaflet-tooltip.etiquette-domicile::before {
  display: none; /* pas de flèche : elle brouille la lecture à cette taille */
}

/* Galerie d'avatars : le label enveloppe le bouton radio, l'image entière est
   donc cliquable — viser un petit rond est pénible sur un écran tactile. */
.choix-avatar {
  cursor: pointer;
  display: block;
}

.choix-avatar input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.choix-avatar-cadre {
  aspect-ratio: 1;
  background: #fff;
  border: 2px solid var(--bs-border-color, #dee2e6);
  border-radius: 50%;
  display: block;
  overflow: hidden;
}

.choix-avatar-cadre img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.choix-avatar input:checked + .choix-avatar-cadre {
  border-color: var(--archiride-marine);
  box-shadow: 0 0 0 3px rgb(22 48 92 / 25%);
}

.choix-avatar input:focus-visible + .choix-avatar-cadre {
  outline: 3px solid var(--archiride-turquoise);
  outline-offset: 2px;
}

/* Vignette d'avatar en tête de ligne dans la liste des étudiants : la colonne
   est réduite à la largeur de l'image, pour ne pas voler de place au nom. */
.colonne-avatar {
  width: 1%;
  white-space: nowrap;
}

/* --- Bilan carbone -------------------------------------------------------
   Les couleurs des graphiques sont déclarées ici, pour les deux thèmes, et
   lues par le JS au moment du rendu : aucune couleur en dur dans le script,
   et le thème sombre fonctionne sans code supplémentaire. */
:root {
  --archiride-graphe-accent: #16305c;
  --archiride-graphe-estompe: #c3cad6;
  --archiride-graphe-perte: #b02a37;
  --archiride-graphe-grille: #e3e6ea;
  --archiride-graphe-texte: #495057;
}

[data-bs-theme="dark"] {
  --archiride-graphe-accent: #6ea8fe;
  --archiride-graphe-estompe: #495057;
  --archiride-graphe-perte: #ea868f;
  --archiride-graphe-grille: #343a40;
  --archiride-graphe-texte: #adb5bd;
}

/* Hauteur fixe : sans cela un canvas responsive grandit sans fin à chaque
   redimensionnement, Chart.js recalculant sur une hauteur déjà augmentée. */
.cadre-graphe {
  position: relative;
  height: 22rem;
}

.cadre-graphe-haut {
  height: 28rem;
}

@media (max-width: 576px) {
  .cadre-graphe,
  .cadre-graphe-haut {
    height: 20rem;
  }
}

/* --- Documentation -------------------------------------------------------
   Le corps d'un manuel est du HTML issu de Markdown : il n'a aucune classe
   Bootstrap, tout se règle donc par le contexte. */
.manuel {
  max-width: 60rem;
}

.manuel h1 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.manuel h2 {
  font-size: 1.35rem;
  margin-top: 2.5rem;
  margin-bottom: .75rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.manuel h3 {
  font-size: 1.1rem;
  margin-top: 1.75rem;
  margin-bottom: .5rem;
}

.manuel p,
.manuel li {
  line-height: 1.65;
}

.manuel table {
  width: 100%;
  margin: 1rem 0 1.5rem;
  border-collapse: collapse;
  font-size: .925rem;
}

.manuel th,
.manuel td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--bs-border-color);
  text-align: left;
  vertical-align: top;
}

.manuel thead th {
  border-bottom-width: 2px;
  white-space: nowrap;
}

.manuel blockquote {
  margin: 1.25rem 0;
  padding: .75rem 1rem;
  border-left: 3px solid var(--bs-warning);
  background: var(--bs-tertiary-bg);
}

.manuel blockquote > :last-child {
  margin-bottom: 0;
}

.manuel pre {
  padding: .75rem 1rem;
  overflow-x: auto;
  background: var(--bs-tertiary-bg);
  border-radius: .375rem;
}

.manuel code {
  font-size: .875em;
}

.manuel img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
}

.manuel hr {
  margin: 2.5rem 0;
}

/* Un diagramme peut être large : il défile dans son cadre plutôt que de
   pousser la page hors de l'écran. */
.manuel .diagramme {
  margin: 1.25rem 0;
  padding: 1rem;
  overflow-x: auto;
  background: var(--bs-tertiary-bg);
  border-radius: .375rem;
}

.manuel .diagramme pre.mermaid {
  margin: 0;
  padding: 0;
  background: none;
  text-align: center;
}

/* Emplacement d'une copie d'écran non encore fournie : le cadre dit quel
   fichier déposer, ce qu'une image cassée ne dirait pas. */
.copie-attendue {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin: 1rem 0;
  padding: 1.25rem;
  border: 2px dashed var(--bs-border-color);
  border-radius: .375rem;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
}

.copie-attendue i {
  font-size: 1.75rem;
  opacity: .5;
}

.copie-attendue figcaption {
  display: flex;
  flex-direction: column;
  font-size: .875rem;
}

.sommaire ul {
  padding-left: 1rem;
  margin-bottom: 0;
  list-style: none;
}

.sommaire > .card-body > .toc > ul {
  padding-left: 0;
}

.sommaire a {
  display: block;
  padding: .15rem 0;
  text-decoration: none;
}