/* ============================================================
   OGP PRESENCE — Thème OGP v4 (alignement charte ogp.smirpub.com)
   Déployé via Dockerfile FROM qui copie ce fichier dans
   /usr/share/nginx/html/ et injecte un <link> dans index.html.
   Auteur : Ben Diabate — OGP — avril 2026
   ============================================================ */

/* ---------- 0. Fonts OGP (Google Fonts) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Raleway:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');

/* ---------- 1. Variables OGP (palette officielle extraite de ogp.smirpub.com) ---------- */
:root {
  --ogp-ink:        #0A1628;   /* bleu nuit principal */
  --ogp-mahog:      #1A2B4A;   /* bleu secondaire */
  --ogp-navy-3:     #243660;   /* bleu clair gradient */
  --ogp-gold:       #C9A84C;   /* or principal (gn-gold) */
  --ogp-gold-lt:    #E8CC7A;   /* or clair */
  --ogp-gold-dk:    #9B7B2E;   /* or foncé */
  --ogp-cream:      #F5F7FA;   /* fond primaire (body-bg) */
  --ogp-card:       #FFFEF9;   /* fond cartes (crème) */
  --ogp-border:     #D0D8EC;   /* gn-border (bords clairs) */
  --ogp-muted:      #6B7A99;
  --ogp-header-grad: linear-gradient(135deg, #0A1628 0%, #1A2B4A 50%, #243660 100%);
  --ogp-shadow:     0 2px 12px rgba(10,22,40,.06);
  --ogp-shadow-hv:  0 8px 32px rgba(10,22,40,.12);
  --ogp-shadow-gold: 0 4px 18px rgba(201,168,76,.25);
  --ogp-font-body:  'Raleway', ui-sans-serif, system-ui, sans-serif;
  --ogp-font-head:  'Cinzel', Georgia, 'Times New Roman', serif;
  --ogp-font-accent: 'DM Sans', 'Source Sans 3', 'Raleway', sans-serif;
}

/* ---------- 2. Base (body, fond, typo) ---------- */
html, body, #root {
  font-family: var(--ogp-font-body) !important;
  background: var(--ogp-cream) !important;
  color: var(--ogp-ink) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Texture "parchment" discrète sur le fond principal (comme ogp.smirpub.com) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(at 15% 30%, rgba(201,168,76,.05) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(at 85% 70%, rgba(10,22,40,.04) 0%, rgba(0,0,0,0) 55%);
}

h1, h2, h3, .title, [class*="title" i], [class*="heading" i] {
  font-family: var(--ogp-font-head) !important;
  color: var(--ogp-ink) !important;
  letter-spacing: .01em;
}

/* ---------- 3. Bande tricolore Guinée (top) ---------- */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
      #CE1126 0%,   #CE1126 33.33%,
      #FCD116 33.33%, #FCD116 66.66%,
      #009460 66.66%, #009460 100%);
  z-index: 9999;
  pointer-events: none;
}

/* ---------- 4. Sidebar (aside 256px) ---------- */
aside,
aside.hidden.lg\:flex,
#root aside {
  background: var(--ogp-header-grad) !important;
  color: #FFFFFF !important;
  border-right: 1px solid rgba(201,168,76,.18) !important;
  box-shadow: 4px 0 24px rgba(10,22,40,.25);
}

aside * {
  border-color: rgba(201,168,76,.15) !important;
}

/* En-tête sidebar (logo + titre) */
aside > div:first-child,
aside header,
aside .sidebar-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(201,168,76,.25) !important;
}

aside h1, aside h2, aside .app-name, aside [class*="brand" i] {
  font-family: var(--ogp-font-head) !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  letter-spacing: .04em;
}

aside p, aside small, aside [class*="subtitle" i] {
  color: var(--ogp-gold-lt) !important;
  font-family: var(--ogp-font-accent) !important;
}

/* Liens du menu */
aside a,
aside nav a,
aside button {
  color: rgba(255,255,255,.78) !important;
  font-family: var(--ogp-font-body) !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  transition: all .2s ease;
}

aside a:hover,
aside nav a:hover,
aside button:hover {
  background: rgba(201,168,76,.12) !important;
  color: #FFFFFF !important;
  transform: translateX(2px);
}

/* Item actif (jaune OGP) */
aside a[class*="active" i],
aside a[aria-current="page"],
aside a.active,
aside nav a[class*="bg-yellow" i],
aside nav a[class*="bg-amber" i],
aside nav a[class*="bg-primary" i] {
  background: linear-gradient(135deg, var(--ogp-gold) 0%, var(--ogp-gold-lt) 100%) !important;
  color: var(--ogp-ink) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(201,168,76,.35);
}

aside a[class*="active" i] svg,
aside a[aria-current="page"] svg,
aside a.active svg {
  color: var(--ogp-ink) !important;
  stroke: var(--ogp-ink) !important;
}

/* Profil bas de sidebar */
aside [class*="profile" i],
aside > div:last-child,
aside footer {
  border-top: 1px solid rgba(201,168,76,.25) !important;
  background: rgba(0,0,0,.15) !important;
}

aside [class*="avatar" i],
aside [class*="rounded-full" i] {
  background: linear-gradient(135deg, var(--ogp-gold), var(--ogp-gold-dk)) !important;
  color: var(--ogp-ink) !important;
  font-weight: 700;
  font-family: var(--ogp-font-head) !important;
}

/* ---------- 5. Header mobile ---------- */
header.lg\:hidden,
header {
  background: var(--ogp-header-grad) !important;
  color: #FFFFFF !important;
  border-bottom: 2px solid var(--ogp-gold) !important;
}

header * {
  color: #FFFFFF !important;
}

header img[alt*="OGP" i],
header img[alt*="logo" i] {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

/* ---------- 6. Cartes (cards) ---------- */
main [class*="rounded" i][class*="shadow" i],
main [class*="bg-white" i],
.card,
[class*="card" i] {
  background: var(--ogp-card) !important;
  border: 1px solid var(--ogp-border) !important;
  box-shadow: var(--ogp-shadow) !important;
  border-radius: 14px !important;
  transition: box-shadow .25s ease, transform .25s ease;
}

main [class*="rounded" i][class*="shadow" i]:hover {
  box-shadow: var(--ogp-shadow-hv) !important;
  transform: translateY(-2px);
}

/* ---------- 7. Carte "Statut aujourd'hui" (override du bleu vif) ---------- */
/* Spécificité bumpée via compound attribute selectors pour battre la règle card */
main div[class*="bg-gradient"][class*="from-blue"],
main div[class*="bg-gradient"][class*="to-blue"],
main div[class*="from-blue-"][class*="to-blue-"],
main div[class*="bg-blue-"][class*="rounded"],
main div[class*="bg-indigo-"][class*="rounded"] {
  background: #0A1628 !important;
  background-image: var(--ogp-header-grad) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(201,168,76,.35) !important;
  box-shadow: 0 8px 28px rgba(10,22,40,.25) !important;
}

/* Texte enfants : blanc forcé */
main div[class*="bg-gradient"][class*="from-blue"] *,
main div[class*="from-blue-"][class*="to-blue-"] *,
main div[class*="bg-blue-"][class*="rounded"] * {
  color: #FFFFFF !important;
  border-color: rgba(201,168,76,.3) !important;
}

/* Titres de la carte status en or clair */
main div[class*="bg-gradient"][class*="from-blue"] h1,
main div[class*="bg-gradient"][class*="from-blue"] h2,
main div[class*="bg-gradient"][class*="from-blue"] h3,
main div[class*="from-blue-"][class*="to-blue-"] h1,
main div[class*="from-blue-"][class*="to-blue-"] h2,
main div[class*="from-blue-"][class*="to-blue-"] h3 {
  font-family: var(--ogp-font-head) !important;
  color: var(--ogp-gold-lt) !important;
}

/* Bouton "Pointer" : fond or, texte bleu nuit (button OU <a>) */
main div[class*="bg-gradient"][class*="from-blue"] button,
main div[class*="bg-gradient"][class*="from-blue"] a[class*="rounded"],
main div[class*="from-blue-"][class*="to-blue-"] button,
main div[class*="from-blue-"][class*="to-blue-"] a[class*="rounded"],
main div[class*="bg-blue-"][class*="rounded"] button,
main div[class*="bg-blue-"][class*="rounded"] a[class*="rounded"] {
  background: var(--ogp-gold) !important;
  background-image: linear-gradient(135deg, var(--ogp-gold-lt), var(--ogp-gold)) !important;
  color: var(--ogp-ink) !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(201,168,76,.45) !important;
}

/* Texte/SVG à l'intérieur du bouton Pointer : bleu nuit */
main div[class*="bg-gradient"][class*="from-blue"] a[class*="rounded"],
main div[class*="bg-gradient"][class*="from-blue"] a[class*="rounded"] *,
main div[class*="from-blue-"][class*="to-blue-"] a[class*="rounded"],
main div[class*="from-blue-"][class*="to-blue-"] a[class*="rounded"] * {
  color: var(--ogp-ink) !important;
}

main div[class*="bg-gradient"][class*="from-blue"] a[class*="rounded"] svg,
main div[class*="from-blue-"][class*="to-blue-"] a[class*="rounded"] svg {
  stroke: var(--ogp-ink) !important;
}

main div[class*="bg-gradient"][class*="from-blue"] button:hover,
main div[class*="bg-gradient"][class*="from-blue"] a[class*="rounded"]:hover {
  background: var(--ogp-gold-lt) !important;
  transform: translateY(-1px);
}

/* ---------- 8. Boutons primaires généraux ---------- */
button[class*="primary" i],
button[class*="bg-blue" i],
button[class*="bg-indigo" i],
.btn-primary,
a.btn-primary {
  background: linear-gradient(135deg, var(--ogp-gold), var(--ogp-gold-dk)) !important;
  color: var(--ogp-ink) !important;
  font-weight: 600 !important;
  font-family: var(--ogp-font-body) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: var(--ogp-shadow-gold) !important;
  transition: all .2s ease;
}

button[class*="primary" i]:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, var(--ogp-gold-lt), var(--ogp-gold)) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201,168,76,.45) !important;
}

/* Boutons secondaires */
button[class*="secondary" i],
button[class*="outline" i] {
  background: transparent !important;
  border: 1.5px solid var(--ogp-ink) !important;
  color: var(--ogp-ink) !important;
}

/* ---------- 9. Stat cards (Total / Présents / En retard / Absents) ---------- */
main [class*="grid" i] > div[class*="rounded" i] {
  border-left: 4px solid var(--ogp-gold) !important;
}

main [class*="grid" i] > div[class*="rounded" i] [class*="text-3xl" i],
main [class*="grid" i] > div[class*="rounded" i] [class*="text-4xl" i],
main [class*="grid" i] > div[class*="rounded" i] [class*="text-2xl" i] {
  font-family: var(--ogp-font-head) !important;
  color: var(--ogp-ink) !important;
  font-weight: 700 !important;
}

/* ---------- 10. Tables ---------- */
table {
  background: var(--ogp-card) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

table thead,
table thead tr,
table th {
  background: var(--ogp-header-grad) !important;
  color: #FFFFFF !important;
  font-family: var(--ogp-font-body) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .82rem;
}

table tbody tr:nth-child(even) {
  background: rgba(237,240,247,.5) !important;
}

table tbody tr:hover {
  background: rgba(201,168,76,.08) !important;
}

/* ---------- 11. Inputs & formulaires ---------- */
input, select, textarea {
  font-family: var(--ogp-font-body) !important;
  border: 1.5px solid var(--ogp-border) !important;
  border-radius: 10px !important;
  background: var(--ogp-card) !important;
  color: var(--ogp-ink) !important;
  transition: border-color .2s, box-shadow .2s;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--ogp-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.2) !important;
  outline: none !important;
}

label {
  font-family: var(--ogp-font-body) !important;
  color: var(--ogp-ink) !important;
  font-weight: 600 !important;
}

/* ---------- 12. Liens ---------- */
a {
  color: var(--ogp-gold-dk);
  transition: color .2s;
}

a:hover {
  color: var(--ogp-gold);
}

/* ---------- 13. Scrollbar OGP ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #EDF0F7; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ogp-gold-dk), var(--ogp-gold));
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ogp-gold); }

/* ---------- 14. Badges / pills ---------- */
[class*="badge" i],
span[class*="rounded-full" i][class*="px-" i] {
  font-family: var(--ogp-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}

/* ---------- 15. Titres principaux (Cinzel taille ogp.smirpub.com) ---------- */
/* Hiérarchie alignée sur ogp.smirpub.com : H1 44-48px, H2 32-36px, H3 24px */
main h1 {
  font-family: var(--ogp-font-head) !important;
  color: var(--ogp-ink) !important;
  font-size: clamp(1.75rem, 2.4vw + 1rem, 2.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  line-height: 1.15 !important;
  margin-bottom: .5rem !important;
}

main h2 {
  font-family: var(--ogp-font-head) !important;
  color: var(--ogp-ink) !important;
  font-size: clamp(1.375rem, 1.2vw + 1rem, 1.875rem) !important;
  font-weight: 600 !important;
  letter-spacing: .015em;
  line-height: 1.2 !important;
}

main h3 {
  font-family: var(--ogp-font-head) !important;
  color: var(--ogp-ink) !important;
  font-size: clamp(1.125rem, .6vw + .9rem, 1.375rem) !important;
  font-weight: 600 !important;
}

/* Uppercase labels (comme text-gn-gold/60 uppercase sur ogp.smirpub.com) */
main p[class*="uppercase" i],
main span[class*="uppercase" i] {
  font-family: var(--ogp-font-accent) !important;
  color: rgba(201,168,76,.7) !important;
  letter-spacing: .1em;
  font-size: .8rem;
}

/* ---------- 16. Avatars utilisateurs hors sidebar ---------- */
main [class*="rounded-full" i][class*="w-" i][class*="h-" i] {
  background: linear-gradient(135deg, var(--ogp-gold), var(--ogp-gold-dk)) !important;
  color: var(--ogp-ink) !important;
  font-family: var(--ogp-font-head) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(201,168,76,.25);
}

/* ---------- 17. Modals / dialogs (face enrollment, etc.) ---------- */
[role="dialog"],
[class*="modal" i],
[class*="Dialog" i] {
  background: var(--ogp-card) !important;
  border: 1px solid var(--ogp-border) !important;
  border-top: 4px solid var(--ogp-gold) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(10,22,40,.35) !important;
}

[role="dialog"] h1,
[role="dialog"] h2,
[role="dialog"] h3 {
  font-family: var(--ogp-font-head) !important;
  color: var(--ogp-ink) !important;
}

/* ---------- 18. Alertes et warnings ---------- */
[class*="alert" i],
[class*="warning" i],
div:has(> span:is([class*="⚠"])) {
  border-left: 4px solid var(--ogp-gold) !important;
  background: rgba(201,168,76,.08) !important;
  border-radius: 10px !important;
  padding: 1rem !important;
}

/* ---------- 19. Accent focus accessibilité (WCAG AA) ---------- */
*:focus-visible {
  outline: 2px solid var(--ogp-gold) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 20. Sélection de texte ---------- */
::selection {
  background: rgba(201,168,76,.35);
  color: var(--ogp-ink);
}

/* ---------- FIN — OGP PRESENCE Thème OGP v4 ---------- */