/* ============================================================
   PROF-EBS — global.css
   Variables, reset, typographie, accessibilité
   Importé par : index.html, admin.html, connexion.html
   ============================================================ */

/* ---- VARIABLES ---- */
:root {
  /* Couleurs de base */
  --noir:          #0e0e0e;
  --blanc:         #f7f4ef;
  --creme:         #ede8df;
  --or:            #c8a95a;
  --or-clair:      #e8d090;
  --or-light:      #f5edda;
  --ardoise:       #2c3e50;

  /* Matières */
  --violet:        #5b3a8c;
  --violet-dark:   #3d2260;
  --violet-mid:    #9b72cf;
  --violet-light:  #ede5f7;

  --hg:            #1a4a6b;
  --hg-light:      #e0edf5;

  --vert:          #2d7a4f;
  --vert-light:    #e0f5ea;

  --rouge:         #c0392b;
  --rouge-light:   #fdecea;

  --geo:           #2d6b3a;
  --geo-light:     #e0f0e5;

  --emc:           #7a2d2d;
  --emc-light:     #f5e5e0;

  --orange:        #e67e22;
  --orange-light:  #fef3e2;

  /* UI */
  --gris:          #888;
  --gris-light:    #e8e2f4;
  --shadow:        0 4px 24px rgba(14,14,14,0.08);
  --shadow-med:    0 8px 40px rgba(14,14,14,0.14);
  --shadow-hover:  0 12px 40px rgba(91,58,140,0.18);
  --radius:        10px;
  --radius-lg:     14px;
  --tr:            0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- RESET ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ---- TYPOGRAPHIE DE BASE ---- */
body {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--noir);
  background: var(--blanc);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- ACCESSIBILITÉ — Focus visible ---- */
/*
  On supprime l'outline natif (laid) mais on le remplace
  par un focus-visible propre et contrasté.
  :focus-visible ne s'active qu'à la navigation clavier,
  pas au clic souris.
*/
:focus { outline: none; }

:focus-visible {
  outline: 2.5px solid var(--or);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Cas spécifiques — inputs et selects */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--or) !important;
  box-shadow: 0 0 0 3px rgba(200, 169, 90, 0.25);
}

/* Boutons et liens */
button:focus-visible,
a:focus-visible {
  outline: 2.5px solid var(--or);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- ACCESSIBILITÉ — Contrastes texte ---- */
/*
  Les textes gris clairs (#bbb, #aaa) sont réservés aux
  informations secondaires non critiques.
  Les textes interactifs (labels, liens) utilisent au moins #555.
*/

/* Classe utilitaire pour lecteurs d'écran uniquement */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- ACCESSIBILITÉ — Mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- UTILITAIRES PARTAGÉS ---- */

/* Polices */
.font-display { font-family: 'Playfair Display', serif; }
.font-serif   { font-family: 'Cormorant Garamond', serif; }
.font-sans    { font-family: 'Outfit', sans-serif; }

/* Couleurs matières */
.c-ses  { color: var(--violet); }
.c-hg   { color: var(--hg); }
.c-geo  { color: var(--geo); }
.c-emc  { color: var(--emc); }

.bg-ses { background: var(--violet); }
.bg-hg  { background: var(--hg); }
.bg-geo { background: var(--geo); }
.bg-emc { background: var(--emc); }

/* Badges matières */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.badge-ses  { background: var(--violet-light); color: var(--violet); }
.badge-hg   { background: var(--hg-light);     color: var(--hg); }
.badge-vert { background: var(--vert-light);    color: var(--vert); }
.badge-draft{ background: var(--creme);         color: var(--gris); }

/* Animations communes */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Spinner */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--creme);
  border-top-color: var(--violet);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ---- SCROLLBAR CUSTOM (Webkit) ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gris-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--violet-mid); }