/* =====================================================================
   evalio — liaison Bootstrap 5.3 ↔ charte evalio
   Ordre de chargement (layout.ejs) : fonts.css → bootstrap.min.css →
   CE FICHIER → evalio.css → (public.css). Bootstrap reprend ici les jetons
   evalio (evalio.css : --encre, --papier, --accent…), en clair comme en
   sombre : utiliser librement les classes Bootstrap dans les .ejs
   (container, row/col, card, btn btn-primary, alert, form-control, …).
   Mode sombre : layout.ejs pose data-bs-theme selon le système (ou data-theme).
   ===================================================================== */

:root, [data-bs-theme]{
  /* typographie */
  --bs-body-font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  /* surfaces et textes : ceux de la charte */
  --bs-body-color: var(--encre);
  --bs-body-bg: var(--papier);
  --bs-emphasis-color: var(--encre);
  --bs-heading-color: var(--encre);
  --bs-secondary-color: var(--encre-doux);
  --bs-tertiary-color: var(--encre-doux);
  --bs-secondary-bg: var(--carte);
  --bs-tertiary-bg: var(--accent-doux);
  --bs-border-color: var(--trait);
  --bs-border-color-translucent: var(--trait);
  /* couleur principale = accent evalio (les -rgb servent aux transparences Bootstrap) */
  --bs-primary: #2f6f5e;
  --bs-primary-rgb: 47,111,94;
  --bs-primary-bg-subtle: var(--accent-doux);
  --bs-primary-border-subtle: var(--trait-fort);
  --bs-primary-text-emphasis: var(--accent);
  --bs-success: var(--juste);
  --bs-danger: var(--faux);
  --bs-warning-text-emphasis: var(--attention);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 47,111,94;
  --bs-link-hover-color: var(--accent);
  --bs-link-hover-color-rgb: 47,111,94;
  --bs-focus-ring-color: rgba(47,111,94,.25);
  /* formes */
  --bs-border-radius: 9px;
  --bs-border-radius-lg: var(--rayon);
  --bs-border-radius-sm: 6px;
  --bs-box-shadow: var(--ombre);
}
/* accent clair en mode sombre (mêmes règles que les jetons d'evalio.css) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-bs-theme]{
    --bs-primary: #6bbfa6; --bs-primary-rgb: 107,191,166;
    --bs-link-color-rgb: 107,191,166; --bs-link-hover-color-rgb: 107,191,166;
    --bs-focus-ring-color: rgba(107,191,166,.3);
  }
}
:root[data-theme="dark"], :root[data-theme="dark"] [data-bs-theme]{
  --bs-primary: #6bbfa6; --bs-primary-rgb: 107,191,166;
  --bs-link-color-rgb: 107,191,166; --bs-link-hover-color-rgb: 107,191,166;
  --bs-focus-ring-color: rgba(107,191,166,.3);
}

/* ---- titres : une seule échelle pour tout le site ---------------------- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: Fraunces, Georgia, serif; font-weight: 600; line-height: 1.25; color: var(--bs-heading-color);
}
h1,.h1{font-size:1.75rem}       /* 28px : titre de page (catalogue, fiche, score…) */
h2,.h2{font-size:1.375rem}      /* 22px : titre de bloc */
h3,.h3{font-size:1.125rem}      /* 18px : sous-titre */
h4,.h4{font-size:1rem}
h5,.h5,h6,.h6{font-size:.9375rem}

/* ---- composants Bootstrap aux couleurs evalio ------------------------- */
.btn-primary{
  --bs-btn-color:#fff; --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:color-mix(in srgb,var(--accent) 86%,#000);
  --bs-btn-hover-border-color:color-mix(in srgb,var(--accent) 86%,#000);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:color-mix(in srgb,var(--accent) 78%,#000);
  --bs-btn-active-border-color:color-mix(in srgb,var(--accent) 78%,#000);
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--accent); --bs-btn-disabled-border-color:var(--accent);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary{
  --bs-btn-color:var(--accent); --bs-btn-border-color:var(--accent);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--accent); --bs-btn-hover-border-color:var(--accent);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--accent); --bs-btn-active-border-color:var(--accent);
  --bs-btn-disabled-color:var(--accent); --bs-btn-disabled-border-color:var(--accent);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.card{
  --bs-card-bg: var(--carte); --bs-card-border-color: var(--trait);
  --bs-card-border-radius: var(--rayon); --bs-card-inner-border-radius: calc(var(--rayon) - 1px);
  --bs-card-cap-bg: var(--accent-doux);
  box-shadow: var(--ombre);
}
.alert-warning{ --bs-alert-color:var(--attention); --bs-alert-bg:var(--alerte-doux,#f6edda); --bs-alert-border-color:#e4d2a4; }
.alert-info{ --bs-alert-color:var(--encre); --bs-alert-bg:var(--accent-doux); --bs-alert-border-color:var(--accent); }
.alert-success{ --bs-alert-color:var(--accent); --bs-alert-bg:var(--accent-doux); --bs-alert-border-color:var(--trait-fort); }
.form-control:focus,.form-select:focus{ border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-check-input:checked{ background-color: var(--accent); border-color: var(--accent); }
.badge.text-bg-primary{ background-color: var(--accent) !important; }