/* =====================================================================
   Design system — École de Formation
   Direction : "atelier / précision technique" — bleu encre + or de
   certification, typographie technique (Space Grotesk / IBM Plex),
   motifs empruntés au plan technique et au tampon de diplôme.
   ===================================================================== */

:root {
  --ink:        #1B1E2D;   /* bleu encre — couleur du logo AIT, fond sombre, texte fort */
  --ink-soft:   #545B6B;   /* texte secondaire sur fond clair (dérivé du gris du logo) */
  --paper:      #F4F2EC;   /* fond clair */
  --paper-raised: #FFFFFF;
  --line:       #D9D4C4;   /* hairlines / grille */
  --gold:       #E9A81A;   /* accent — couleur or du logo AIT */
  --gold-soft:  #F6E3B8;
  --logo-gray:  #7A7A7A;   /* gris du globe/africa dans le logo */
  --couleur-principale: var(--ink); /* rétro-compat avec le contenu piloté par l'admin */

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .navbar-brand, .btn {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

h1, h2, h3 { font-weight: 600; }

.text-muted { color: var(--ink-soft) !important; }

/* ---------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------- */
.navbar {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
  padding-top: .9rem; padding-bottom: .9rem;
}
.navbar-brand {
  font-weight: 700; color: var(--ink) !important; font-size: 1.2rem;
  display: flex; align-items: center; gap: .6rem;
}
.navbar-brand img.brand-logo {
  height: 46px; width: 46px; max-width: 46px; max-height: 46px;
  object-fit: contain; display: block;
}
.navbar .nav-link {
  color: var(--ink-soft); font-weight: 500; font-size: 1.05rem;
  padding: .5rem 1rem !important; position: relative;
}
.navbar .nav-link.active, .navbar .nav-link:hover { color: var(--ink); }
.navbar .nav-link.active::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 2px;
  height: 2px; background: var(--gold);
}
.navbar .btn-primary { border-radius: 2px; }

/* ---------------------------------------------------------------------
   Boutons — angles nets, pas d'arrondi générique Bootstrap
   --------------------------------------------------------------------- */
.btn { border-radius: 3px; font-weight: 600; font-size: .9rem; letter-spacing: .01em; }
.btn-primary, .btn-light.btn-primary {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.btn-primary:hover, .btn-primary:focus { background: #0E1019; border-color: #0E1019; }
.btn-outline-primary { color: var(--ink); border-color: var(--ink); }
.btn-outline-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-light:hover { background: var(--gold-soft); }
.btn-outline-light { border-color: rgba(255,255,255,.5); }
.text-primary { color: var(--ink) !important; }
.bg-primary { background: var(--ink) !important; }
.bg-primary-subtle { background: var(--gold-soft); color: var(--ink) !important; }
.badge.bg-primary-subtle { border: 1px solid var(--gold); font-weight: 600; }
.page-item.active .page-link { background: var(--ink); border-color: var(--ink); }
.page-link { color: var(--ink); }

/* ---------------------------------------------------------------------
   Hero — motif de grille technique + coins de plan
   --------------------------------------------------------------------- */
.hero-section {
  position: relative;
  min-height: 640px;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  overflow: hidden;
}
.hero-section::before, .hero-section::after {
  content: ""; position: absolute; width: 28px; height: 28px;
  border: 2px solid var(--gold); opacity: .8;
}
.hero-section::before { top: 28px; left: 28px; border-right: none; border-bottom: none; }
.hero-section::after  { bottom: 28px; right: 28px; width: 44px; height: 44px; border-width: 3px; border-left: none; border-top: none; }
.hero-section .eyebrow {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: .78rem; color: var(--gold); display: block; margin-bottom: .75rem;
}
.hero-section h1 { color: #fff; }
.hero-section .lead { color: rgba(255,255,255,.78); }

/* Diaporama d'images en arrière-plan du hero */
.hero-bg-carousel,
.hero-bg-carousel .carousel-inner,
.hero-bg-carousel .carousel-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-bg-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: .5rem 1.25rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .03em;
  color: rgba(255,255,255,.85);
  background: linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  text-align: right;
  display: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10,15,28,.92) 0%, rgba(10,15,28,.75) 45%, rgba(10,15,28,.35) 70%, rgba(10,15,28,.15) 100%),
              linear-gradient(180deg, rgba(15,20,35,.6), rgba(15,20,35,.72)),
              linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
}
.hero-section .container { position: relative; z-index: 2; }
.hero-section::before, .hero-section::after { z-index: 2; }

/* ---------------------------------------------------------------------
   Chiffres clés — tampon de certification
   --------------------------------------------------------------------- */
.stat-stamp {
  width: 108px; height: 108px; border-radius: 50%;
  border: 2px solid var(--ink); display: flex; flex-direction: column;
  align-items: center; justify-content: center; margin: 0 auto 12px;
  position: relative; background: var(--paper-raised);
}
.stat-stamp::before {
  content: ""; position: absolute; inset: 6px; border: 1px dashed var(--gold);
  border-radius: 50%;
}
.stat-stamp .stat-value {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--ink);
}
.stat-stamp .stat-icon { color: var(--gold); font-size: 1.1rem; margin-bottom: 2px; }
.stat-label {
  font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft);
}

/* ---------------------------------------------------------------------
   Cartes formation — hairline + coin "phare" façon étiquette
   --------------------------------------------------------------------- */
.formation-card {
  border: 1px solid var(--line) !important; border-radius: 4px !important;
  transition: transform .18s ease, border-color .18s ease;
  background: var(--paper-raised);
}
.formation-card:hover {
  transform: translateY(-3px); border-color: var(--ink) !important;
  box-shadow: 0 10px 24px rgba(19,35,63,.08) !important;
}
.formation-card .card-title { font-family: var(--font-display); font-weight: 600; }
.formation-card strong.text-primary { font-family: var(--font-mono); font-weight: 600; }

/* ---------------------------------------------------------------------
   Étapes du parcours d'inscription
   --------------------------------------------------------------------- */
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 2px;
  background: var(--ink); color: var(--gold); font-weight: 700; font-family: var(--font-mono);
  margin-right: 12px; font-size: .9rem;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
footer.bg-dark { background: var(--ink) !important; }
footer a.text-light:hover { color: var(--gold) !important; }
footer h5, footer h6 { font-family: var(--font-display); }
footer .footer-logo { height: 56px; width: auto; max-width: 56px; object-fit: contain; margin-bottom: 14px; }

/* ---------------------------------------------------------------------
   Assistant IA — bulle et fenêtre de chat
   --------------------------------------------------------------------- */
.ia-chat-bubble {
  position: fixed; bottom: 24px; right: 24px; width: 58px; height: 58px;
  background: var(--ink); color: var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  box-shadow: 0 .5rem 1.5rem rgba(19,35,63,.35); cursor: pointer; z-index: 1050;
  border: 2px solid var(--gold); transition: transform .18s ease;
}
.ia-chat-bubble:hover { transform: scale(1.07); }

.whatsapp-float {
  position: fixed; bottom: 24px; right: 92px; width: 54px; height: 54px;
  background: #25D366; color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25); z-index: 1050;
  transition: transform .18s ease;
}
.whatsapp-float:hover { transform: scale(1.07); color: #fff; }

.partner-logo-box {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px;
  padding: 14px; height: 90px; display: flex; align-items: center; justify-content: center;
  transition: box-shadow .18s ease, transform .18s ease;
}
.partner-logo-box:hover { box-shadow: 0 .4rem 1rem rgba(27,30,45,.12); transform: translateY(-2px); }
.partner-logo-box img { max-height: 55px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(15%); }

.ia-chat-window {
  position: fixed; bottom: 96px; right: 24px; width: 350px; max-width: 90vw;
  height: 480px; max-height: 70vh; background: var(--paper-raised); border-radius: 8px;
  box-shadow: 0 1rem 3rem rgba(19,35,63,.35); display: flex; flex-direction: column;
  overflow: hidden; z-index: 1050; border: 1px solid var(--line);
}
.ia-chat-header {
  background: var(--ink); color: #fff; padding: 14px 16px; font-family: var(--font-display);
  display: flex; justify-content: space-between; align-items: center; font-weight: 600;
}
.ia-chat-messages { flex: 1; overflow-y: auto; padding: 14px; background: var(--paper); }
.ia-msg { padding: 10px 14px; border-radius: 10px; margin-bottom: 10px; max-width: 85%; font-size: .88rem; line-height: 1.45; }
.ia-msg-bot { background: #fff; border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 2px; }
.ia-msg-user { background: var(--ink); color: #fff; margin-left: auto; border-bottom-right-radius: 2px; }
.ia-msg-typing { background: #fff; border: 1px solid var(--line); color: var(--ink-soft); font-style: italic; }
.ia-chat-input-area { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: #fff; }
.ia-chat-input-area input {
  flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 8px 14px; font-size: .88rem;
  font-family: var(--font-body);
}
.ia-chat-input-area input:focus { outline: none; border-color: var(--gold); }
.ia-chat-input-area button {
  border-radius: 50%; width: 38px; height: 38px; background: var(--ink); border-color: var(--ink);
}

@media (max-width: 576px) {
  .ia-chat-window { right: 10px; bottom: 88px; width: calc(100vw - 20px); }
  .ia-chat-bubble { right: 16px; bottom: 16px; }
  .whatsapp-float { right: 76px; bottom: 16px; width: 48px; height: 48px; font-size: 1.4rem; }
  .hero-section { min-height: 480px; }
}