/* =====================================================================
   UP Pro - thème applicatif (Bootstrap 5)
   Charte sobre : couleurs du logo ESI (framboise/aubergine) + gris chauds.
   Ce fichier est écrit à la main (aucun build Tailwind requis).
   ===================================================================== */

:root {
  /* Couleur primaire - issue du logo ESI (framboise / bordeaux) */
  --bs-primary: #a81848;
  --bs-primary-rgb: 168, 24, 72;
  --up-primary: #a81848;         /* framboise (anneau du logo) */
  --up-primary-dark: #7c1236;    /* survol */
  --up-primary-soft: #fae7ee;    /* teinte pâle */
  --up-brand-deep: #601848;      /* aubergine (corps du logo) */

  /* Neutres (gris chauds, sans bleu) */
  --up-ink: #2b2530;
  --up-body: #5c545f;
  --up-muted: #948d97;
  --up-border: #ece7ec;
  --up-surface: #ffffff;
  --up-bg: #f8f5f7;

  /* Accents fonctionnels (usage minimal) */
  --up-success: #1f9d63;
  --up-success-soft: #e3f6ec;
  --up-warning: #b9821b;
  --up-warning-soft: #fbf1dc;
  --up-danger: #c0392b;
  --up-danger-soft: #fbe9e7;

  --up-radius: 14px;
  --up-radius-sm: 10px;
  --up-shadow: 0 1px 2px rgba(40, 20, 32, .04), 0 8px 24px rgba(40, 20, 32, .07);
  --up-shadow-sm: 0 1px 2px rgba(40, 20, 32, .06);

  --up-sidebar-w: 250px;

  --bs-body-color: var(--up-body);
  --bs-body-bg: var(--up-bg);
  --bs-border-color: var(--up-border);
  --bs-link-color: var(--up-primary);
  --bs-link-hover-color: var(--up-primary-dark);
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  background: var(--up-bg);
  color: var(--up-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .fw-bold { color: var(--up-ink); }

/* ---------- Boutons ---------- */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: .1px; }
.btn { border-radius: 999px; }
.btn-primary {
  --bs-btn-bg: var(--up-primary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: var(--up-primary);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  border: none;
  background-image: linear-gradient(135deg, var(--up-primary) 0%, var(--up-brand-deep) 100%);
  box-shadow: 0 8px 18px rgba(168, 24, 72, .22);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-image: linear-gradient(135deg, #b81f56 0%, #6b1a3f 100%);
  color: #fff;
}
.btn-primary:active { background-image: linear-gradient(135deg, var(--up-brand-deep) 0%, var(--up-primary) 100%); }
.btn-primary:disabled { background-image: linear-gradient(135deg, var(--up-primary) 0%, var(--up-brand-deep) 100%); opacity: .6; box-shadow: none; }
.btn-lg { box-shadow: 0 12px 26px rgba(168, 24, 72, .28); }
.btn-outline-primary {
  --bs-btn-color: var(--up-primary);
  --bs-btn-border-color: var(--up-primary);
  --bs-btn-hover-bg: var(--up-primary);
  --bs-btn-hover-border-color: var(--up-primary);
  --bs-btn-active-bg: var(--up-primary-dark);
}
.btn-soft {
  background: var(--up-primary-soft);
  color: var(--up-primary-dark);
  border: 1px solid transparent;
}
.btn-soft:hover { background: #f2d6e1; color: var(--up-primary-dark); }
.btn-light { --bs-btn-bg:#fff; --bs-btn-border-color:var(--up-border); --bs-btn-hover-bg:#f6f3f5; }

/* ---------- Liens & textes ---------- */
a { text-decoration: none; }
.text-primary { color: var(--up-primary) !important; }
.text-muted-2 { color: var(--up-muted); }

/* ---------- Cartes ---------- */
.card {
  border: 1px solid var(--up-border);
  border-radius: 18px;
  background: var(--up-surface);
  box-shadow: var(--up-shadow-sm);
}
.card-body { padding: 1.25rem 1.35rem; }
.card-title { color: var(--up-ink); font-weight: 700; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; border-radius: 999px; padding: .38em .7em; }
.badge-primary-soft { background: var(--up-primary-soft); color: var(--up-primary-dark); }
.badge-success-soft { background: var(--up-success-soft); color: var(--up-success); }
.badge-warning-soft { background: var(--up-warning-soft); color: var(--up-warning); }
.badge-danger-soft  { background: var(--up-danger-soft);  color: var(--up-danger); }
.badge-neutral-soft { background: #eef0f5; color: var(--up-body); }

/* ---------- Layout applicatif : sidebar + contenu ---------- */
.app-shell { min-height: 100vh; }

.app-sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--up-sidebar-w);
  background: var(--up-surface);
  border-right: 1px solid var(--up-border);
  display: flex; flex-direction: column;
  z-index: 1045;
  padding-top: env(safe-area-inset-top, 0px);
}
.app-sidebar .brand {
  display: flex; align-items: center; gap: .65rem;
  padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--up-border);
}
.app-sidebar .brand img { width: 38px; height: 38px; border-radius: 10px; background:#fff; }
.app-sidebar .brand b { color: var(--up-ink); font-size: 1.02rem; letter-spacing:.2px; }
.app-sidebar .brand span { display:block; font-size:.72rem; color: var(--up-muted); font-weight:500;}

.sidebar-scroll { overflow-y: auto; flex: 1; padding: .75rem .75rem 1.5rem; }
.nav-section-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--up-muted); font-weight: 700; padding: 1rem .85rem .35rem;
}
.app-nav a, .app-nav .nav-group-toggle {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .85rem; border-radius: 10px;
  color: var(--up-body); font-weight: 500; font-size: .93rem;
  transition: background .12s, color .12s; cursor: pointer;
}
.app-nav a .bi, .app-nav .nav-group-toggle .bi { font-size: 1.08rem; color: var(--up-muted); }
.app-nav a:hover, .app-nav .nav-group-toggle:hover { background: #f4f5f9; color: var(--up-ink); }
.app-nav a.active {
  background: var(--up-primary-soft); color: var(--up-primary-dark); font-weight: 600;
}
.app-nav a.active .bi { color: var(--up-primary); }
.app-nav .nav-group-toggle .chev { margin-left: auto; font-size: .8rem; transition: transform .15s; color: var(--up-muted);}
.app-nav .nav-group-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.app-nav .nav-sub { padding-left: .6rem; margin: .1rem 0 .3rem; }
.app-nav .nav-sub a { font-size: .88rem; padding-left: 2.1rem; }

.app-main {
  margin-left: var(--up-sidebar-w);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.app-topbar {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--up-border);
  padding: .7rem 1.25rem;
  padding-top: calc(.7rem + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: .85rem;
}
.app-topbar .page-title { font-weight: 700; color: var(--up-ink); font-size: 1.08rem; margin:0;}
.app-content { padding: 1.5rem 1.25rem; flex: 1; }
@media (min-width: 992px){ .app-content { padding: 1.75rem 2rem; } }

.avatar-chip {
  display:flex; align-items:center; gap:.6rem; padding:.25rem .3rem .25rem .75rem;
  border:1px solid var(--up-border); border-radius: 999px; background:#fff;
}
.avatar-chip .who { line-height:1.05; text-align:right; }
.avatar-chip .who b { font-size:.85rem; color: var(--up-ink); }
.avatar-chip .who small { font-size:.72rem; color: var(--up-muted); }
.avatar-circle {
  width:34px;height:34px;border-radius:50%;object-fit:cover;
  background: linear-gradient(135deg, var(--up-primary) 0%, var(--up-brand-deep) 100%); color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;
}

.btn-icon {
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;border:1px solid var(--up-border);background:#fff;color:var(--up-body);
}
.btn-icon:hover { background:#f6f3f5; }

/* Sidebar responsive : offcanvas sous 992px */
.sidebar-backdrop { display:none; }
@media (max-width: 991.98px){
  .app-sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--up-shadow); }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .app-main { margin-left: 0; }
  body.sidebar-open .sidebar-backdrop {
    display:block; position:fixed; inset:0; background:rgba(15,18,30,.4); z-index:1044;
  }
}
.sidebar-toggle { display:none; }
@media (max-width: 991.98px){ .sidebar-toggle { display:inline-flex; } }

/* ---------- Tables ---------- */
.table-card { padding: 0; overflow: hidden; }
.table { --bs-table-color: var(--up-body); margin:0; }
.table thead th {
  background: #fafbfc; color: var(--up-muted); font-weight: 600;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--up-border); white-space: nowrap; padding: .8rem 1rem;
}
.table tbody td { padding: .8rem 1rem; vertical-align: middle; border-color: #f0f1f5; color: var(--up-ink); }
.table tbody tr:hover { background: #fafbfe; }

/* ---------- Formulaires ---------- */
.form-label { font-weight: 600; color: var(--up-ink); font-size: .86rem; margin-bottom: .3rem; }
.form-control, .form-select {
  border-radius: 12px; border-color: var(--up-border); padding: .6rem .9rem; color: var(--up-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--up-primary); box-shadow: 0 0 0 .2rem rgba(168,24,72,.15);
}
textarea.form-control { border-radius: 14px; }
.form-text { color: var(--up-muted); }
.input-group-text { background:#f8f4f6; border-color: var(--up-border); color: var(--up-muted); }
.input-group > .form-control { border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group > .input-group-text:first-child { border-top-left-radius:12px; border-bottom-left-radius:12px; }

/* ---------- Alertes / messages ---------- */
.alert { border-radius: 14px; border: 1px solid transparent; font-weight: 500; }
.alert-success { background: var(--up-success-soft); color: var(--up-success); border-color:#c7ebd6; }
.alert-danger, .alert-error { background: var(--up-danger-soft); color: var(--up-danger); border-color:#f6cdd1; }
.alert-info { background: var(--up-primary-soft); color: var(--up-primary-dark); border-color:#f2d6e1; }
.alert-warning { background: var(--up-warning-soft); color: var(--up-warning); border-color:#f2e2be; }

/* ---------- Divers ---------- */
.stat-card .stat-value { font-size: 1.75rem; font-weight: 800; color: var(--up-ink); line-height:1; }
.stat-card .stat-label { color: var(--up-muted); font-size: .82rem; font-weight:600; }
.stat-card .stat-icon, .stat-icon {
  width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, var(--up-primary) 0%, var(--up-brand-deep) 100%);
  color: #fff; font-size:1.25rem; box-shadow: 0 6px 14px rgba(168,24,72,.22);
}
.section-title { font-size: .8rem; text-transform: uppercase; letter-spacing:.05em; color: var(--up-muted); font-weight:700; }
.hr-soft { border-color: var(--up-border); opacity:1; }
.progress { background:#efe8ec; border-radius:999px; height:8px; }
.progress-bar { background: linear-gradient(90deg, var(--up-primary), var(--up-brand-deep)); }

/* Print */
@media print {
  .app-sidebar, .app-topbar, .no-print, .sidebar-backdrop { display: none !important; }
  .app-main { margin-left: 0 !important; }
  .app-content { padding: 0 !important; }
  body { background:#fff; }
}

/* ============ Pages publiques (landing / présentation) ============ */
.public-body { background: var(--up-bg); }
.public-nav {
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--up-border); padding: .6rem 0;
}
.public-nav .nav-link { color: var(--up-body); font-weight: 500; }
.public-nav .nav-link:hover { color: var(--up-primary); }

.hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 500px at 80% -10%, #c23566 0%, transparent 60%),
              linear-gradient(135deg, var(--up-brand-deep) 0%, #a81848 60%, #b83a63 100%);
}
.hero .hero-illus {
  position: absolute; right: -60px; bottom: -40px; width: 460px; max-width: 46%;
  opacity: .9; pointer-events: none; filter: drop-shadow(0 20px 40px rgba(0,0,0,.15));
}
@media (max-width: 767.98px){ .hero .hero-illus { display: none; } }
.hero .badge-pill {
  background: rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.25);
  font-weight:600; padding:.45em .9em; border-radius:999px;
}
.hero h1 { color:#fff; font-weight: 800; letter-spacing:-.5px; }
.hero .lead { color: rgba(255,255,255,.9); }
.hero .btn-hero-light { background:#fff; color: var(--up-primary-dark); font-weight:700; border:none; }
.hero .btn-hero-light:hover { background:#f7e4ec; color: var(--up-primary-dark); }
.hero .btn-hero-ghost { background: transparent; color:#fff; border:1px solid rgba(255,255,255,.5); font-weight:600; }
.hero .btn-hero-ghost:hover { background: rgba(255,255,255,.12); color:#fff; }

.section { padding: 3.5rem 0; }
.section-eyebrow { color: var(--up-primary); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }
.section h2 { font-weight: 800; letter-spacing:-.4px; }

.level-card { height:100%; transition: transform .15s, box-shadow .15s; }
.level-card:hover { transform: translateY(-3px); box-shadow: var(--up-shadow); }
.level-card .lvl-index {
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, var(--up-primary) 0%, var(--up-brand-deep) 100%); color:#fff;
  font-weight:800; font-size:1.05rem; box-shadow: 0 6px 14px rgba(168,24,72,.22);
}
.level-card .chip {
  display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;
  background:#eef0f5;color:var(--up-body);padding:.25rem .6rem;border-radius:999px;
}

.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content:""; position:absolute; left:7px; top:4px; bottom:4px; width:2px; background: var(--up-border); }
.timeline-item { position: relative; padding: 0 0 1.35rem 1.35rem; }
.timeline-item::before {
  content:""; position:absolute; left:0; top:3px; width:16px;height:16px;border-radius:50%;
  background:#fff; border:3px solid var(--up-primary);
}
.timeline-item .t-date { font-weight:700; color: var(--up-ink); }
.timeline-item .t-text { color: var(--up-body); font-size:.92rem; }

.encad-item { display:flex; gap:.85rem; align-items:flex-start; }
.encad-item .ei-ic {
  width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, var(--up-primary) 0%, var(--up-brand-deep) 100%); color:#fff; font-size:1.15rem;
  box-shadow: 0 6px 14px rgba(168,24,72,.22);
}
.public-footer { background:#fff; border-top:1px solid var(--up-border); }

.contact-card a { color: var(--up-primary); font-weight:600; }
.dropdown-toggle-no-caret::after { display:none; }

/* ============ Authentification (inspiration « INFINITY », couleurs ESI) ============ */
.auth-page {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem; background: var(--up-bg);
}
/* cercles décoratifs dans les coins */
.auth-page::before, .auth-page::after {
  content: ""; position: absolute; border-radius: 50%; z-index: 0;
  background: linear-gradient(135deg, var(--up-brand-deep), var(--up-primary));
}
.auth-page::before { width: 360px; height: 360px; top: -140px; left: -120px; opacity: .95; }
.auth-page::after  { width: 420px; height: 420px; bottom: -170px; right: -150px; opacity: .9; }
.auth-page .corner-ring {
  position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
  border: 40px solid var(--up-primary); opacity: .12;
}
.auth-page .corner-ring.tl { width: 240px; height: 240px; top: -90px; left: 150px; }
.auth-page .corner-ring.br { width: 260px; height: 260px; bottom: -100px; right: 170px; }

.auth-card {
  position: relative; z-index: 1; width: 100%; max-width: 940px;
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(40, 20, 32, .20);
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 992px){ .auth-card { grid-template-columns: 1fr 1fr; } }
.auth-card.wide { max-width: 1080px; }
@media (min-width: 992px){ .auth-card.wide { grid-template-columns: 1.12fr .88fr; } }

.auth-form { padding: 2.5rem 1.75rem; }
@media (min-width: 576px){ .auth-form { padding: 3rem 3rem; } }

.auth-brandhead { text-align: center; margin-bottom: 1.6rem; }
.auth-brandhead .eyebrow {
  letter-spacing: .26em; font-size: .72rem; font-weight: 700;
  color: var(--up-muted); text-transform: uppercase;
}
.auth-brandhead .brandline { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .5rem 0 .7rem; }
.auth-brandhead .brandline img { width: 40px; height: 40px; border-radius: 9px; }
.auth-brandhead .brandline b { font-size: 1.7rem; font-weight: 800; color: var(--up-ink); }
.auth-brandhead .brandline b span { color: var(--up-primary); }
.auth-brandhead p { color: var(--up-muted); font-size: .9rem; max-width: 22rem; margin: 0 auto; }

/* champs en pilule avec icône */
.auth-field { position: relative; margin-bottom: 1rem; }
.auth-field .ic { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--up-muted); }
.auth-field .ic-r { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--up-muted); }
.auth-input {
  width: 100%; border: 1.5px solid var(--up-border); border-radius: 999px;
  padding: .8rem 1.1rem .8rem 2.7rem; color: var(--up-ink); background: #fff; font-size: .95rem;
}
.auth-input::placeholder { color: var(--up-muted); }
.auth-input:focus { outline: none; border-color: var(--up-primary); box-shadow: 0 0 0 .2rem rgba(168,24,72,.13); }
.auth-input.has-r { padding-right: 2.7rem; }
/* variantes pour selects / fichier (inscription) */
.auth-select, .auth-file {
  width: 100%; border: 1.5px solid var(--up-border); border-radius: 999px;
  padding: .7rem 1.1rem; color: var(--up-ink); background: #fff; font-size: .92rem;
}
.auth-select:focus, .auth-file:focus { outline: none; border-color: var(--up-primary); box-shadow: 0 0 0 .2rem rgba(168,24,72,.13); }
.auth-select:disabled { background: #faf8fa; color: var(--up-muted); }
.auth-file { padding: .55rem 1rem; }
.auth-field.with-icon .auth-input { padding-left: 2.7rem; }

/* bouton principal (dégradé arrondi) */
.btn-auth {
  width: 100%; border: none; border-radius: 999px; padding: .85rem 1rem;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--up-primary) 0%, var(--up-brand-deep) 100%);
  box-shadow: 0 12px 26px rgba(168, 24, 72, .30); transition: filter .15s, transform .05s;
}
.btn-auth:hover { filter: brightness(1.06); color: #fff; }
.btn-auth:active { transform: translateY(1px); }

.auth-link { color: var(--up-primary); font-weight: 700; }
.auth-sep { display: flex; align-items: center; gap: .8rem; color: var(--up-muted); font-size: .85rem; margin: 1.3rem 0; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--up-border); }

.auth-socials { display: flex; justify-content: center; gap: .7rem; }
.auth-socials a {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--up-border); color: var(--up-primary); background: #fff; font-size: 1.05rem;
  box-shadow: var(--up-shadow-sm); transition: background .12s, transform .12s;
}
.auth-socials a:hover { background: var(--up-primary-soft); transform: translateY(-2px); }

/* panneau visuel (droite) */
.auth-visual {
  display: none; position: relative; overflow: hidden; color: #fff; text-align: center;
  padding: 3rem 2.25rem; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(700px 320px at 70% 15%, #c23566 0, transparent 60%),
              linear-gradient(150deg, var(--up-brand-deep) 0%, var(--up-primary) 100%);
}
@media (min-width: 992px){ .auth-visual { display: flex; } }
.auth-visual::before, .auth-visual::after {
  content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.18);
}
.auth-visual::before { width: 320px; height: 320px; top: -110px; right: -110px; }
.auth-visual::after  { width: 220px; height: 220px; bottom: -80px; left: -80px; background: rgba(255,255,255,.05); border: none; }
.auth-visual .logo-chip {
  width: 68px; height: 68px; border-radius: 18px; background: #fff; padding: 8px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.18); position: relative; z-index: 1;
}
.auth-visual .logo-chip img { width: 100%; height: 100%; object-fit: contain; }
.auth-visual h2 { color: #fff; font-size: 2.3rem; font-weight: 800; letter-spacing: .06em; margin: 0; position: relative; z-index: 1; }
.auth-visual .v-sub { color: rgba(255,255,255,.88); max-width: 22rem; margin-top: .85rem; font-size: .92rem; position: relative; z-index: 1; }
.auth-mobile-brand { display: flex; }
@media (min-width: 992px){ .auth-mobile-brand { display: none; } }