/* =========================
   Casapack — Style 2025
   ========================= */
:root{
  --brand-primary:#2F7BFF;        /* bleu header/dashboard */
  --brand-primary-600:#1E5FDB;
  --brand-accent:#FF7A21;         /* orange logo */
  --brand-dark:#24323F;           /* gris ardoise (texte logo) */
  --brand-green:#22C55E;          /* succès */
  --brand-purple:#6D28D9;         /* gradient côté violet */
  --brand-muted:#6B7A90;
  --brand-bg:#F5F7FB;

  --radius-xl:1.25rem;
  --shadow-card:0 6px 24px rgba(15,27,45,.06);
  --shadow-img:0 10px 40px rgba(15,27,45,.20);
}

/* Base */
html,body{height:100%}
body{background:var(--brand-bg);color:var(--brand-dark);font-feature-settings:"liga" 1,"calt" 1}
a{color:var(--brand-primary);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--brand-muted)}
.section-title{max-width:760px;margin:0 auto 1rem}

/* NAVBAR (gradient comme le dashboard) */
.navbar{
  background: linear-gradient(90deg, var(--brand-purple) 0%, var(--brand-primary) 100%) !important;
  box-shadow:0 2px 16px rgba(15,27,45,.08);
}
.navbar .navbar-brand span,
.navbar .nav-link{ color:#fff; opacity:.95 }
.navbar .nav-link:hover{ opacity:1 }
.navbar .btn-outline-light{
  --bs-btn-color:#fff;--bs-btn-border-color:#fff;
  --bs-btn-hover-bg:#fff;--bs-btn-hover-color:var(--brand-primary);
  --bs-btn-hover-border-color:#fff;border-radius:.8rem
}

/* Hero (sobre, proche du header logiciel) */
.hero{
  background:
    radial-gradient(900px 400px at 80% -20%, rgba(47,123,255,.16), transparent),
    linear-gradient(180deg, #ffffff 0%, var(--brand-bg) 100%);
  padding:clamp(3rem,5vw,5rem) 0;
}

/* Cartes / images */
.card{
  border:1px solid rgba(15,27,45,.06);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  background:#fff;
}
.img-soft-shadow{box-shadow:var(--shadow-img);border-radius:18px}

/* Boutons */
.btn-primary{
  --bs-btn-bg:var(--brand-primary);
  --bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-bg:var(--brand-primary-600);
  --bs-btn-hover-border-color:var(--brand-primary-600);
  border-radius:.8rem
}
.btn-outline-primary{
  --bs-btn-color:var(--brand-primary);
  --bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-bg:var(--brand-primary);
  --bs-btn-hover-border-color:var(--brand-primary);
  --bs-btn-hover-color:#fff;border-radius:.8rem
}
.btn-accent{background:var(--brand-accent);color:#fff;border:none;border-radius:.8rem}
.btn-accent:hover{filter:brightness(.95)}
.btn-green{background:var(--brand-green);color:#0b1220;border:none;border-radius:.8rem}
.btn-green:hover{filter:brightness(.95)}

/* Icônes de feature */
.feature-icon{
  width:48px;height:48px;display:grid;place-items:center;border-radius:14px;
  background:rgba(47,123,255,.12);color:#fff
}

/* Barre gradient façon widgets du dashboard */
.gradient-bar{
  background: linear-gradient(90deg, var(--brand-purple) 0%, var(--brand-primary) 60%, var(--brand-green) 100%);
  color:#fff;border-radius:12px;padding:.6rem .9rem;font-weight:600
}

/* Footer */
footer{background:#fff}
footer .link-dark:hover{text-decoration:underline}

/* Utilitaires */
.shadow-soft{box-shadow:var(--shadow-card)}
.round-xl{border-radius:var(--radius-xl)}
.badge-accent{background:rgba(255,122,33,.14);color:var(--brand-accent)}

/* Responsive petits ajustements */
@media (max-width: 991.98px){
  .navbar .btn-accent{margin-top:.5rem}
}

/* Formulaires */
.form-control, .form-select{border-radius:.7rem}
.form-control:focus, .form-select:focus{
  border-color:var(--brand-primary);
  box-shadow:0 0 0 .2rem rgba(47,123,255,.15)
}

/* Sections contrastées optionnelles */
.bg-tint{
  background:linear-gradient(180deg, rgba(27,110,255,.08), rgba(0,0,0,0));
}

/* Ancre douce (si tu ajoutes scroll-behavior) */
html{scroll-behavior:smooth}

:root{ --nav-h: 64px; }      /* ajuste si ta navbar est plus grande */
body.has-fixed-nav { padding-top: var(--nav-h); }

/* Hauteur header + espace global */
:root { --nav-h: 68px; }              /* ajuste si ta navbar est plus haute */
body.has-fixed-nav { padding-top: var(--nav-h); }

/* Intro de page (titre + chapo) = plus d'air sous la navbar */
.page-intro{ padding: clamp(2.5rem, 6vw, 4rem) 0 1rem; }
.page-intro h1{ margin-bottom:.25rem; }

/* Corrige le chevauchement du header fixe */
:root {
  --nav-h: 80px; /* augmente à 80px ou 90px si besoin */
}

body.has-fixed-nav {
  padding-top: var(--nav-h) !important;
}


/* ===== Navbar 2025 ===== */
.nav-2025{
  background: linear-gradient(90deg, #6D28D9 0%, #2F7BFF 100%);
  box-shadow: 0 2px 16px rgba(15,27,45,.10);
  backdrop-filter: saturate(1.1);
}
.nav-2025 .navbar-brand .logo{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.15)); }

/* Menu avec soulignement animé, lisible sur fond gradient */
.nav-underline .nav-link{
  position: relative; color: #fff; opacity:.92; padding:.5rem .9rem;
}
.nav-underline .nav-link:hover,
.nav-underline .nav-link:focus{ opacity:1; }

.nav-underline .nav-link::after{
  content:""; position:absolute; left:12%; right:12%; bottom:0.35rem;
  height:2px; background:rgba(255,255,255,.85); transform:scaleX(0);
  transform-origin:center; transition:transform .25s ease;
}
.nav-underline .nav-link:hover::after,
.nav-underline .nav-link:focus::after{ transform:scaleX(1); }

/* Bouton Connexion mis en avant */
.btn-connexion{
  --btn-bg: #fff;
  --btn-fg: #1E5FDB;  /* bleu foncé pour contraste */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: none;
  border-radius: 999px;
  padding: .5rem 1rem;
  font-weight: 600;
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
}
.btn-connexion:hover{ filter: brightness(.96); color: var(--btn-fg); }

/* Bouton Admin en “ghost” */
.btn-admin{
  color:#fff;
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  padding:.5rem 1rem;
  background: transparent;
}
.btn-admin:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.9);
  color:#fff;
}

/* Meilleure lisibilité mobile : CTA sous le menu une fois ouvert */
@media (max-width: 991.98px){
  .cta-wrap{ margin-top:.75rem; }
  .nav-underline .nav-link{ padding:.5rem .4rem; }
  .nav-underline .nav-link::after{ bottom:.2rem; }
}

/* ===== Menu liens ===== */
.nav-underline .nav-link{
  position: relative; color: #fff; opacity:.92; padding:.5rem .9rem;
  transition: color .25s ease;
}
.nav-underline .nav-link:hover{ color:#fff; opacity:1; }
.nav-underline .nav-link::after{
  content:""; position:absolute; left:15%; right:15%; bottom:0.2rem;
  height:2px; background: #fff; transform:scaleX(0);
  transform-origin:center; transition:transform .3s ease;
}
.nav-underline .nav-link:hover::after{ transform:scaleX(1); }

/* ===== Boutons pilule ===== */
.btn-pill{
  border-radius: 999px;
  padding: .55rem 1.2rem;
  font-weight: 600;
  transition: all .3s ease;
  display:inline-flex; align-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}

/* Connexion = blanc -> bleu */
.btn-connexion{
  background:#fff; color:#1E5FDB; border:none;
}
.btn-connexion:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(47,123,255,.35);
  color:#1E5FDB;
}

/* Administration = gradient violet/orange */
.btn-admin{
  background: linear-gradient(135deg,#6D28D9,#FF7A21);
  color:#fff; border:none;
}
.btn-admin:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(109,40,217,.4);
  color:#fff;
}

/* Mobile spacing */
@media(max-width:991.98px){
  .cta-wrap{ margin-top:.75rem; flex-direction:column; gap:.5rem; }
}

/* ====== Header responsive + padding body (fixed-top) ====== */
:root {
  --nav-h: 64px;           /* mobile par défaut */
}
@media (min-width: 992px){
  :root { --nav-h: 76px; } /* desktop : navbar plus haute */
}
body.has-fixed-nav { padding-top: var(--nav-h) !important; }

/* ====== Navbar look ====== */
.nav-2025{
  background: linear-gradient(90deg, #6D28D9 0%, #2F7BFF 100%);
  box-shadow: 0 2px 16px rgba(15,27,45,.10);
}
.nav-2025 .navbar-brand .logo{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.15)); }

/* ====== Menu liens + état actif ====== */
.nav-underline .nav-link{
  position: relative; color: #fff; opacity:.92; padding:.55rem .85rem;
  transition: color .25s ease, opacity .25s ease;
}
.nav-underline .nav-link:hover{ color:#fff; opacity:1; }
.nav-underline .nav-link::after{
  content:""; position:absolute; left:16%; right:16%; bottom:0.15rem;
  height:2px; background:#fff; transform:scaleX(0);
  transform-origin:center; transition:transform .25s ease;
}
.nav-underline .nav-link:hover::after{ transform:scaleX(1); }

/* Actif (page courante) */
.nav-underline .nav-link.active{
  opacity:1;
}
.nav-underline .nav-link.active::after{
  transform:scaleX(1);
}

/* ====== CTA pilule ====== */
.btn-pill{
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-weight: 600;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  display:inline-flex; align-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* Connexion (blanc) */
.btn-connexion{
  background:#fff; color:#1E5FDB; border:none;
}
.btn-connexion:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(47,123,255,.32);
  color:#1E5FDB;
}

/* Administration (dégradé distinct) */
.btn-admin{
  background: linear-gradient(135deg,#6D28D9,#FF7A21);
  color:#fff; border:none;
}
.btn-admin:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(109,40,217,.4);
  color:#fff;
}

/* ====== Mobile comportement ====== */
@media (max-width: 991.98px){
  .nav-underline { margin-top:.25rem; }
  .nav-underline .nav-link{ padding:.5rem .6rem; }
  .nav-underline .nav-link::after{ bottom: .1rem; }

  .cta-wrap{
    margin-top:.75rem; width:100%;
    display:flex; flex-direction:column; gap:.5rem;
  }
  .cta-wrap .btn-pill{ width:100%; justify-content:center; }
}