/*
 * Charte graphique de l'étude Nedellec & Associés.
 *
 * Seul fichier du projet où une couleur, une police ou une taille de marque
 * est écrite en valeur. Partout ailleurs (gabarits, autres CSS, JS), on
 * utilise les variables --nedellec-* ou les classes Tabler qu'elles pilotent.
 * Règles d'usage : docs/charte.md.
 *
 * Source : site www.nedellec-associes.com, relevé le 06/11/2026. Le site ne
 * publie pas de charte formelle ; ces valeurs sont celles de sa feuille de
 * style.
 */

/* --- Polices ------------------------------------------------------------- */
/* Titres : Quicksand, celle du site. Texte : Source Sans 3, en remplacement de
 * Myriad Pro (Adobe, licence payante) qu'utilise le site. Les deux sont sous
 * licence SIL OFL, servies par l'application (aucun CDN, la CSP l'interdit). */
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/polices/quicksand-latin-500-normal.a227ded7064f.woff2") format("woff2");
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/polices/quicksand-latin-600-normal.8dc6514fff29.woff2") format("woff2");
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/polices/quicksand-latin-700-normal.f5f4fc785bfb.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/polices/source-sans-3-latin-400-normal.27ab01c4cb50.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/polices/source-sans-3-latin-400-italic.410bdda67c60.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/polices/source-sans-3-latin-600-normal.9a35cba76eda.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/polices/source-sans-3-latin-700-normal.9b13bd3653e3.woff2") format("woff2");
}

/* --- Jetons de la charte --------------------------------------------------- */
:root {
  /* Couleurs de marque, relevées sur le site. */
  --nedellec-marine: #041f60;
  --nedellec-marine-rgb: 4, 31, 96;
  --nedellec-or: #c8a47b;
  --nedellec-or-rgb: 200, 164, 123;
  --nedellec-gris: #7a7a7a;
  --nedellec-blanc: #ffffff;

  /* Déclinaisons, calculées pour l'application. L'or (2,3:1) et le gris
   * (4,3:1) de la marque sont trop clairs pour du texte sur blanc ; ces deux
   * teintes passent le seuil de lisibilité de 4,5:1. */
  --nedellec-or-texte: #956c3e; /* 4,7:1 sur blanc */
  --nedellec-gris-texte: #757575; /* 4,6:1 sur blanc */
  --nedellec-marine-fonce: #03174a; /* survol des boutons */
  --nedellec-marine-10: rgba(var(--nedellec-marine-rgb), 0.1);
  --nedellec-marine-25: rgba(var(--nedellec-marine-rgb), 0.25);
  --nedellec-fond-page: #f7f8fa; /* marine à 3 % sur blanc */
  --nedellec-bordure: #e6e8ee;

  /* Polices. */
  --nedellec-police-titres: "Quicksand", "Source Sans 3", Arial, sans-serif;
  --nedellec-police-texte: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  /* Palette des graphiques, attribuée aux séries dans cet ordre, jamais
   * recyclée. Dérivée de la marque : le marine et l'or tels quels sont l'un
   * trop sombre, l'autre trop terne pour distinguer des séries. Validée le
   * 06/11/2026 (luminosité, saturation, daltonismes, vision normale) sur fond
   * blanc : les 6 sur séries voisines, les 4 premières sur toutes les paires.
   * Au-delà de 4 séries qui se croisent (courbes, nuages), découper le
   * graphique. Détail : docs/charte.md. */
  --nedellec-graphique-1: #2e4fa2; /* bleu marque */
  --nedellec-graphique-2: #c68b39; /* or */
  --nedellec-graphique-3: #57afe0; /* bleu ciel */
  --nedellec-graphique-4: #9d2a3f; /* bordeaux */
  --nedellec-graphique-5: #479b57; /* vert */
  --nedellec-graphique-6: #a65b9c; /* prune */
  --nedellec-graphique-texte: #4a5163;
  --nedellec-graphique-axe: #c9cdd6;
  --nedellec-graphique-grille: #eceef2;
}

/* --- Tabler piloté par la charte ------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --tblr-primary: var(--nedellec-marine);
  --tblr-primary-rgb: var(--nedellec-marine-rgb);
  --tblr-primary-text: var(--nedellec-marine);
  --tblr-primary-darken: var(--nedellec-marine-fonce);
  --tblr-primary-fg: var(--nedellec-blanc);
  --tblr-primary-lt: var(--nedellec-marine-10);
  --tblr-link-color: var(--nedellec-marine);
  --tblr-link-color-rgb: var(--nedellec-marine-rgb);
  --tblr-link-hover-color: var(--nedellec-or-texte);
  --tblr-focus-ring-color: var(--nedellec-marine-25);
  --tblr-font-sans-serif: var(--nedellec-police-texte);
  --tblr-body-font-family: var(--nedellec-police-texte);
  --tblr-body-bg: var(--nedellec-fond-page);
  --tblr-border-color: var(--nedellec-bordure);
  --tblr-navbar-active-border-color: var(--nedellec-or);
}

body {
  font-family: var(--nedellec-police-texte);
  font-size: 0.9375rem;
}

/* --- Titres ------------------------------------------------------------------ */
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
.page-title,
.card-title,
.empty-title,
.navbar-brand {
  font-family: var(--nedellec-police-titres);
  font-weight: 700;
  color: var(--nedellec-marine);
}

/* Surtitre d'une page (« Rapports · Statistiques de gestion ») : l'or de la
 * marque, en teinte lisible. */
.page-pretitle,
.page-pretitle a {
  color: var(--nedellec-or-texte);
  font-weight: 600;
}

/* Libellé d'un indicateur au-dessus de sa valeur. */
.subheader {
  color: var(--nedellec-gris-texte);
}

/* Filet d'or sous l'en-tête d'une page, rappel du logo. */
.page-header {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--nedellec-or);
}

/* --- Barre de navigation ----------------------------------------------------- */
.navbar-nedellec {
  background: var(--nedellec-marine);
  border-bottom: 3px solid var(--nedellec-or);
}

.navbar-nedellec .navbar-brand,
.navbar-nedellec .nav-link,
.navbar-nedellec .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.navbar-nedellec .nav-link:hover,
.navbar-nedellec .nav-link:focus,
.navbar-nedellec .nav-link.active,
.navbar-nedellec .navbar-brand:hover {
  color: var(--nedellec-blanc);
}

.navbar-nedellec .nav-link.active {
  box-shadow: inset 0 -3px 0 var(--nedellec-or);
}

.navbar-nedellec .text-secondary {
  color: var(--nedellec-or) !important; /* or sur marine : 6,6:1 */
}

.navbar-nedellec .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}

.navbar-nedellec .navbar-toggler-icon {
  filter: invert(1);
}

.logo-navigation {
  height: 2.25rem;
  width: auto;
}

/* --- Pages sans session (connexion, second facteur, enrôlement) -------------- */
/* Panneau marine coupé en biais, souligné d'un filet d'or : la coupe blanc /
 * marine de la page d'accueil du site de l'étude. Formulaire sur fond blanc. */
body.page-isolee {
  background: var(--nedellec-blanc);
}

.ecran-isole {
  --coupe: 78%; /* bas de la coupe, en part de la largeur du panneau */
  --filet: 6px;
  display: grid;
  grid-template-columns: minmax(20rem, 44%) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.ecran-isole__marque {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 26% 4rem 12%;
  /* Le fond or ne reste visible que sur la bande laissée par la coupe du
   * marine, posé par-dessus : c'est le filet. */
  background: var(--nedellec-or);
  clip-path: polygon(0 0, 100% 0, var(--coupe) 100%, 0 100%);
}

.ecran-isole__marque::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nedellec-marine);
  clip-path: polygon(
    0 0,
    calc(100% - var(--filet)) 0,
    calc(var(--coupe) - var(--filet)) 100%,
    0 100%
  );
}

.ecran-isole__marque > * {
  position: relative;
}

/* L'image du logo porte une marge transparente d'un cinquième de sa largeur :
 * la marge négative aligne le cadre du logo sur le texte qui suit. */
.ecran-isole__logo {
  width: 16rem;
  height: auto;
  margin: -3.2rem 0 -2.4rem -3.2rem;
}

/* La phrase d'en-tête du site de l'étude, dans sa police. */
.ecran-isole__lieu {
  margin: 2.5rem 0 0;
  max-width: 15rem;
  font-family: var(--nedellec-police-titres);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--nedellec-blanc);
}

.ecran-isole__contenu {
  display: flex;
  align-items: center;
  padding: 3rem clamp(1.5rem, 7vw, 7rem);
}

.ecran-isole__formulaire {
  width: 100%;
  max-width: 24rem;
}

.ecran-isole h1 {
  margin-bottom: 0.5rem;
  font-size: 2rem;
  line-height: 1.2;
}

.ecran-isole__intro {
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--nedellec-gris-texte);
}

.ecran-isole .form-label {
  font-weight: 600;
  color: var(--nedellec-marine);
}

.ecran-isole .form-control,
.ecran-isole .btn {
  min-height: 2.75rem;
}

.ecran-isole .btn-primary {
  font-weight: 600;
}

.ecran-isole__aide:not(:empty) {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--nedellec-bordure);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--nedellec-gris-texte);
}

.ecran-isole__aide p {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.ecran-isole__aide .ti {
  flex: none;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--nedellec-or-texte);
}

/* Tablette et téléphone : le panneau devient un bandeau, coupé en biais par
 * le bas. */
@media (max-width: 61.98rem) {
  .ecran-isole {
    --coupe: 72%;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .ecran-isole__marque {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 1.5rem 3.5rem;
    clip-path: polygon(0 0, 100% 0, 100% var(--coupe), 0 100%);
  }

  .ecran-isole__marque::before {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(var(--coupe) - var(--filet)),
      0 calc(100% - var(--filet))
    );
  }

  .ecran-isole__logo {
    width: 6.5rem;
    margin: -1.3rem -0.8rem -1.3rem -1.3rem;
  }

  .ecran-isole__lieu {
    margin: 0;
    font-size: 1.125rem;
  }

  .ecran-isole__contenu {
    align-items: flex-start;
    padding: 2rem 1.5rem 3rem;
  }

  .ecran-isole__formulaire {
    margin: 0 auto;
  }
}

@media print {
  .ecran-isole {
    display: block;
  }

  .ecran-isole__marque {
    display: none;
  }
}

/* --- Composants ---------------------------------------------------------------- */
.card {
  border-color: var(--nedellec-bordure);
}

.table thead th {
  color: var(--nedellec-marine);
  font-weight: 600;
}

.btn-outline-primary {
  --tblr-btn-color: var(--nedellec-marine);
  --tblr-btn-border-color: var(--nedellec-marine);
  --tblr-btn-hover-bg: var(--nedellec-marine);
  --tblr-btn-hover-color: var(--nedellec-blanc);
}