/* ==========================================================================
   Base : typographie, mise en page, raccordement a Bootstrap 5
   --------------------------------------------------------------------------
   A charger apres bootstrap.min.css et tokens.css.
   ========================================================================== */

/* --- Raccordement des variables Bootstrap aux tokens Vitalite -------------
   En surchargeant les variables de Bootstrap plutot que ses classes, les
   composants natifs (boutons, liens, focus, alertes) prennent d'emblee les
   couleurs de la marque, sans avoir a redefinir chaque classe. */

:root {
  --bs-primary: #239bd7;
  --bs-primary-rgb: 35, 155, 215;
  --bs-success: #1a9f5f;
  --bs-success-rgb: 26, 159, 95;
  --bs-warning: #e08e0b;
  --bs-warning-rgb: 224, 142, 11;
  --bs-danger: #d0342c;
  --bs-danger-rgb: 208, 52, 44;

  --bs-link-color: #239bd7;
  --bs-link-color-rgb: 35, 155, 215;
  --bs-link-hover-color: #1a8ac7;
  --bs-link-hover-color-rgb: 26, 138, 199;

  --bs-body-font-family: var(--vit-police);
  --bs-body-color: var(--vit-texte);
  --bs-body-bg: var(--vit-fond);
  --bs-border-color: var(--vit-bordure);
  --bs-border-radius: var(--vit-rayon-sm);
  --bs-secondary-color: var(--vit-texte-doux);
}

/* --- Page ---------------------------------------------------------------- */

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--vit-police);
  color: var(--vit-texte);
  background-color: var(--vit-fond);
}

/* Squelette commun aux deux applications : en-tete fixe en haut, contenu qui
   occupe la place restante, pied de page colle en bas meme sur page courte. */

.app-main {
  flex: 1 0 auto;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

.app-footer {
  flex-shrink: 0;
  padding: .75rem 0;
  font-size: .8125rem;
  color: var(--vit-texte-doux);
  background-color: #e9ecef;
}

/* --- Titres -------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--vit-graisse-titre);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

/* Intitule d'une section de contenu, avec filet turquoise. */
.titre-section {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  font-size: 1.125rem;
  font-weight: var(--vit-graisse-titre);
  border-bottom: 2px solid var(--vit-primary);
}

/* --- Liens --------------------------------------------------------------- */

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Element cliquable qui n'est pas un lien (le legacy multipliait les
   <span onclick> sans indication visuelle). */
.cliquable {
  cursor: pointer;
  color: var(--vit-secondary);
}

.cliquable:hover {
  text-decoration: underline;
}

/* --- Formulaires --------------------------------------------------------- */

/* Bootstrap code en dur son bleu (#86b7fe et rgba(13,110,253,.25)) sur le focus
   des champs, sans passer par une variable : surcharger --bs-primary ne suffit
   donc pas. C'est le seul endroit ou le reecrire, sinon les champs jurent avec
   les boutons de la marque. La carte de connexion garde son focus blanc, defini
   dans composants.css. */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--vit-secondary);
  box-shadow: var(--vit-anneau-focus);
}

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

/* --- Accessibilite ------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--vit-secondary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- Impression ---------------------------------------------------------- */

@media print {
  .app-header,
  .app-footer,
  .d-print-none {
    display: none !important;
  }

  body {
    background: #fff;
  }
}