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

:root {
  --primary:        #4f46e5;
  --primary-dark:   #3730a3;
  --danger:         #dc2626;
  --success:        #16a34a;
  --bg:             #f9fafb;
  --surface:        #ffffff;
  --text:           #111827;
  --text-muted:     #6b7280;
  --border:         #e5e7eb;
  --radius:         8px;

  /* Typographie fluide : de 14px (320px) à 16px (1200px) */
  --fs-base:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --fs-sm:     clamp(0.75rem,  0.7rem + 0.25vw, 0.875rem);
  --fs-lg:     clamp(1rem,     0.95rem + 0.3vw,  1.125rem);
  --fs-xl:     clamp(1.25rem,  1.1rem + 0.65vw,  1.75rem);
  --fs-2xl:    clamp(1.5rem,   1.3rem + 1vw,     2.25rem);
}

html {
  /* Permet les transitions smooth sur rotation */
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  background-color: var(--bg);
  color: var(--text);
  /* flex-column min-vh-100 posé sur body via Bootstrap dans header */
}

/* =====================================================================
   TYPOGRAPHIE RESPONSIVE
   ===================================================================== */
h1, .h1 { font-size: var(--fs-2xl); }
h2, .h2 { font-size: var(--fs-xl); }
h3, .h3 { font-size: var(--fs-lg); }
h4, .h4 { font-size: var(--fs-base); font-weight: 600; }
p, li, label, input, button, a { font-size: var(--fs-base); }
small, .small, .form-text { font-size: var(--fs-sm) !important; }

/* =====================================================================
   NAVBAR
   ===================================================================== */
#mainNav {
  min-height: 52px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* Zone gauche : AppTitle + nom user */
.nav-brand-left {
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem);
  max-width: min(45vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none !important;
}

.app-title-text {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nav-sep {
  opacity: 0.5;
}

.nav-username {
  font-weight: 400;
  opacity: 0.85;
  font-size: clamp(0.7rem, 0.65rem + 0.35vw, 0.875rem);
}

/* Liens centraux (lg+) */
.nav-center-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-center-links .nav-link {
  font-size: var(--fs-sm);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  transition: background 0.15s;
}

.nav-center-links .nav-link:hover {
  background: rgba(255,255,255,0.15);
}

/* Bouton déconnexion */
#mainNav .btn-outline-light {
  font-size: var(--fs-sm);
  padding: 0.3rem 0.65rem;
}

/* =====================================================================
   OFFCANVAS (menu mobile)
   ===================================================================== */
#offcanvasNav .nav-link {
  font-size: var(--fs-base);
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius);
  transition: background 0.15s;
}

#offcanvasNav .nav-link:hover {
  background: rgba(255,255,255,0.15);
}

/* =====================================================================
   LAYOUT PRINCIPAL
   ===================================================================== */
main {
  flex: 1;
}

/* =====================================================================
   CARTES BOOTSTRAP : override léger
   ===================================================================== */
.card {
  border-radius: var(--radius);
}

.card-title {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.card-text {
  font-size: var(--fs-base);
  color: var(--text-muted);
}

/* =====================================================================
   FORMULAIRES
   ===================================================================== */
.form-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

.form-control,
.form-select {
  font-size: var(--fs-base);
  border-radius: var(--radius);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.invalid-feedback {
  font-size: var(--fs-sm);
}

/* Placeholders plus clairs */
::placeholder {
  color: #c0c8d4 !important;
  opacity: 1;
}
::-webkit-input-placeholder { color: #c0c8d4; opacity: 1; }
::-moz-placeholder           { color: #c0c8d4; opacity: 1; }
:-ms-input-placeholder       { color: #c0c8d4; opacity: 1; }

/* =====================================================================
   BOUTONS
   ===================================================================== */
.btn {
  font-size: var(--fs-sm);
  border-radius: var(--radius);
}

.btn-lg {
  font-size: var(--fs-base);
}

/* =====================================================================
   ALERTES
   ===================================================================== */
.alert {
  font-size: var(--fs-sm);
  border-radius: var(--radius);
}

/* =====================================================================
   PAGE D'ACCUEIL
   ===================================================================== */
.page-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
}

/* =====================================================================
   PAGE D'ERREUR
   ===================================================================== */
.error-code {
  font-size: clamp(4rem, 15vw, 8rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer {
  font-size: var(--fs-sm);
}

/* =====================================================================
   RESPONSIVE UTILITAIRES
   ===================================================================== */

/* Padding réduit sur très petit écran */
@media (max-width: 375px) {
  main {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Gestion de l'orientation paysage sur mobile */
@media (max-height: 450px) and (orientation: landscape) {
  #mainNav {
    min-height: 44px;
  }
  main {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* Grand écran : max-width confortable */
@media (min-width: 1400px) {
  .container-xxl {
    max-width: 1320px;
  }
}