/* ------------------------------------------------------------------ *
 * Charte Heduxy — d'après le logo officiel (toque BORDEAUX, lauriers
 * ANTHRACITE, « HEDUXY · Human Education Systems »). Surcouche sur
 * espace.css : variables reteintées, en-tête clair avec le logo,
 * page de connexion « gestion » (hero bordeaux + logo + formulaire).
 * ------------------------------------------------------------------ */
:root {
  --oxide: #781820;        /* bordeaux (toque) — couleur primaire */
  --oxide-sombre: #5E141B;
  --ink: #2A2E31;          /* anthracite (lauriers) — textes */
  --ink-doux: #4C5157;
  --gris: #8A8E95;
  --trait: #E6E3E4;
  --fond: #F7F6F5;
  --carte: #FFFFFF;
  --ok: #1B7F4B;  --ok-fond: #E8F4ED;
  --attente: #B4700A;  --attente-fond: #FBF1E0;
  --alerte: #C0261E;  --alerte-fond: #FBE9E8;
  --neutre: #5C5659;  --neutre-fond: #EFECED;
}

/* ---- En-tête clair, avec le logo ---- */
.barre { background: #fff; color: var(--ink); border-bottom: 1px solid var(--trait); }
.barre .marque-logo { height: 42px; width: auto; display: block; }
.barre .onglets a { color: var(--ink-doux); }
.barre .onglets a:hover, .barre .onglets a[aria-current="page"] { color: var(--ink); }
.barre .qui, .barre a.qui { color: var(--gris); }
.barre a.qui:hover, .barre a.qui[aria-current="page"] { color: var(--ink); border-bottom-color: var(--oxide); }
.barre .quitter { color: var(--gris); }
.barre .quitter:hover { color: var(--ink); }
.barre .bouton.discret { color: var(--ink); border-color: var(--trait); }
.barre .bouton.discret:hover { background: var(--fond); color: var(--ink); border-color: var(--ink); }
.barre nav a { color: var(--ink-doux); }
.barre nav a:hover { color: var(--ink); }
.barre nav a.ici { color: var(--ink); box-shadow: 0 2px 0 var(--oxide); }

/* ---- Page de connexion « gestion » : hero BORDEAUX + logo clair ---- */
.connexion-encre { background: linear-gradient(165deg, #5E141B 0%, #781820 100%); border-right-color: rgba(255,255,255,.16); }
.connexion-encre::before { content: "HEDUXY · HUMAN EDUCATION SYSTEMS"; }
.connexion-encre::after { background: rgba(255,255,255,.18); }
.connexion-encre .hx-tete-marque { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.connexion-encre .hx-tete-marque .nom { display: inline-flex; align-items: baseline; gap: 11px; font-family: var(--titre); font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; color: #F2ECE3; }
.connexion-encre .hx-tete-marque .nom small { font-family: var(--mono); font-weight: 400; font-size: .6rem; letter-spacing: .24em; color: rgba(255,255,255,.55); text-transform: uppercase; }
.connexion-encre .logo-hero { height: clamp(160px, 26vh, 248px); width: auto; max-width: min(430px, 100%); object-fit: contain; display: block; }

/* Mot en emphase des grands titres (hero bordeaux / bandeau anthracite) : sable, pour le contraste */
.db-titre-jour h1 em,
.connexion-encre h1 em { color: #E9C49A; }

/* Login Heduxy : logo centre VERTICALEMENT entre le titre (HEDUXY GESTION) et la ligne EFFECTIFS, aligne a gauche.
   On dissout le bloc titre+logo : titre, logo, bloc texte et pied deviennent 4 enfants de la colonne
   (justify-content: space-between) -> 3 espaces egaux, le logo tombe pile au milieu. */
.connexion-encre .hx-tete-marque { display: contents; }
.connexion-encre .hx-tete-marque .nom, .connexion-encre .logo-hero { align-self: flex-start; }
@media (max-width: 860px) { .connexion-encre .logo-hero { height: 120px; margin: 18px 0 20px; } }