/* ============================================
   Île Marine — Style global « Horizon »
   Arrondis généreux, ombres douces, dégradés navy,
   typo Sora, accents cyan/orange du logo.
   Chargé sur toutes les pages publiques (pas admin).
   ============================================ */

/* ===== Base ===== */
body {
  font-family: var(--im-font-body);
  background-color: var(--im-bg);
  color: var(--im-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--im-font-display);
}

a { color: var(--im-navy); }
a:hover { color: var(--im-cyan); text-decoration: none; }

::selection { background: var(--im-cyan); color: white; }

/* ===== Navbar ===== */
#mainNav {
  /* business-casual.min.css force position:relative — on restaure le sticky */
  position: -webkit-sticky;
  position: sticky !important;
  top: 0;
  z-index: 1020;
  background: linear-gradient(115deg, var(--im-navy-deep) 0%, var(--im-navy) 100%) !important;
  background-image: linear-gradient(115deg, var(--im-navy-deep) 0%, var(--im-navy) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--im-font-body);
  box-shadow: 0 10px 30px rgba(0, 29, 77, .18);
}
/* Menu centré au lg+ : la collapse est dissoute (display:contents) pour que
   ses <ul> deviennent des cellules d'une grille 3 zones (marque | menu | actions).
   Le menu reste centré sur la page grâce aux colonnes latérales égales (1fr).
   Les libellés de nom (compte client / admin) sont masqués dans la barre pour
   garder les actions compactes et le menu centré dans les deux états. */
@media (min-width: 992px) {
  #mainNav .container-fluid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  #mainNav .navbar-collapse { display: contents !important; }
  #mainNav .navbar-brand { justify-self: start; }
  #mainNav .navbar-nav.mx-auto { margin: 0 !important; }
  #mainNav .navbar-nav.ml-auto { margin: 0 !important; justify-self: end; }
}
/* Nom (compte client / admin) dans la barre : affiché uniquement quand la barre
   est assez large pour que le menu reste centré (sinon icône seule).
   Seuil ≈ largeur menu + 2× largeur actions avec nom. */
#mainNav .nav-username { display: none; }
@media (min-width: 1800px) {
  #mainNav .nav-username { display: inline; }
}
#mainNav .navbar-brand,
#mainNav .navbar-brand:hover {
  color: white !important;
  font-family: var(--im-font-display);
  font-weight: 700;
}
#mainNav .navbar-brand .nav-logo-img {
  height: 42px;
  background: white;
  border-radius: 10px;
  padding: 4px 8px;
}
#mainNav .navbar-nav .nav-item .nav-link {
  color: rgba(255, 255, 255, .85) !important;
  font-weight: 500;
  letter-spacing: .02em;
  transition: color .2s;
}
#mainNav .navbar-nav .nav-item .nav-link:hover {
  color: var(--im-cyan) !important;
}
#mainNav .navbar-nav .nav-item .nav-link .nav-icon {
  color: var(--im-cyan);
}
#mainNav .navbar-nav .nav-item .nav-link:hover .nav-icon {
  color: var(--im-cyan);
}
#mainNav .navbar-nav .nav-item.active .nav-link {
  color: white !important;
  background: rgba(0, 179, 240, .18);
  border-radius: 50px;
  box-shadow: none;
}
#mainNav .navbar-nav .nav-item.active .nav-link .nav-icon {
  color: var(--im-orange);
}

#mainNav .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--im-radius-sm);
  color: white;
}
#mainNav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
#mainNav .dropdown-menu {
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  box-shadow: var(--im-shadow-lg);
  overflow: hidden;
}
#mainNav .dropdown-item { font-weight: 500; }
#mainNav .dropdown-item:hover { background: var(--im-info-bg); color: var(--im-navy); }

/* CTA panier (pastille orange) */
#mainNav .nav-cart-cta {
  background: var(--im-orange);
  color: var(--im-navy-deep) !important;
  font-weight: 700;
  padding: .5rem 1.3rem !important;
  border-radius: 50px;
  transition: transform .2s, box-shadow .2s;
}
#mainNav .nav-cart-cta:hover {
  color: var(--im-navy-deep) !important;
  transform: translateY(-2px);
  box-shadow: var(--im-shadow-orange);
}
#mainNav .nav-cart-cta .nav-icon,
#mainNav .nav-cart-cta:hover .nav-icon { color: var(--im-navy-deep); }

/* Badge panier */
.cart-badge {
  background: var(--im-red) !important;
  border-radius: 50px !important;
  font-family: var(--im-font-display);
  font-weight: 700;
}

/* ===== Boutons globaux ===== */
.btn {
  border-radius: 50px !important;
  font-family: var(--im-font-display);
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .2s, box-shadow .2s, background-color .2s, border-color .2s;
}
.btn-primary {
  background-color: var(--im-navy) !important;
  border: 2px solid var(--im-navy) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--im-navy) !important;
  border-color: var(--im-navy) !important;
  transform: translateY(-2px);
  box-shadow: var(--im-shadow-navy);
}
.btn-secondary, .btn-outline-primary, .btn-outline-secondary {
  background: white !important;
  color: var(--im-navy) !important;
  border: 2px solid var(--im-border-strong) !important;
}
.btn-secondary:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover {
  border-color: var(--im-cyan) !important;
  background: var(--im-info-bg) !important;
  transform: translateY(-2px);
  box-shadow: var(--im-shadow);
}
.btn-danger {
  background: var(--im-red) !important;
  border: 2px solid var(--im-red) !important;
}
.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(170, 1, 3, .3);
}

/* ===== Formulaires ===== */
.form-control {
  border: 2px solid var(--im-border);
  border-radius: var(--im-radius-sm);
  background: white;
}
.form-control:focus {
  border-color: var(--im-cyan);
  box-shadow: 0 0 0 4px rgba(0, 179, 240, .15);
}

/* ===== Cartes / conteneurs ===== */
.card {
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius-lg);
  box-shadow: var(--im-shadow);
  background: white;
  overflow: hidden;
}
.card-header {
  background: linear-gradient(115deg, var(--im-navy-deep), var(--im-navy));
  color: white;
  border-radius: 0 !important;
  font-family: var(--im-font-display);
  font-weight: 700;
}

/* ===== Flash messages ===== */
.alert-modern {
  border: 1px solid var(--im-border) !important;
  border-left: 4px solid var(--im-cyan) !important;
  border-radius: var(--im-radius) !important;
  box-shadow: var(--im-shadow-lg) !important;
  background: white !important;
  color: var(--im-text) !important;
  font-weight: 500;
}
.alert-modern .alert-icon { color: var(--im-cyan); }

/* ===== Footer ===== */
.footer-modern {
  background: var(--im-navy-deep) !important;
  border-top: none;
  color: rgba(255, 255, 255, .75);
}
.footer-modern .footer-brand-text {
  font-family: var(--im-font-display);
  font-weight: 800;
  color: white;
}
.footer-modern .footer-logo-icon { color: var(--im-orange); }
.footer-modern .footer-title {
  font-family: var(--im-font-display);
  font-weight: 700;
  color: var(--im-cyan);
  letter-spacing: .04em;
}
.footer-modern .footer-links a { color: rgba(255,255,255,.7); }
.footer-modern .footer-links a:hover { color: var(--im-cyan); }
.footer-modern .footer-links i { color: var(--im-cyan); }
.footer-modern .footer-contact i { color: var(--im-orange); }
.footer-modern .footer-contact a { color: rgba(255,255,255,.8); }
.footer-modern .social-link {
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
}
.footer-modern .social-link:hover {
  border-color: var(--im-cyan);
  background: var(--im-cyan);
  color: white;
}
.footer-modern .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-modern .footer-lang-toggle {
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50px;
  padding: .3rem .9rem;
  color: white;
  font-weight: 600;
}
.footer-modern .footer-lang-toggle:hover {
  border-color: var(--im-cyan);
  color: var(--im-cyan);
}

/* ===== Titres de section génériques ===== */
.section-title {
  font-family: var(--im-font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--im-navy-deep);
}
.section-subtitle { color: var(--im-text-muted); }

/* ===== Floating cart (mobile) ===== */
.floating-cart {
  border-radius: 50% !important;
  background: var(--im-orange) !important;
  border: none !important;
  color: var(--im-navy-deep) !important;
  box-shadow: var(--im-shadow-orange) !important;
}
.floating-cart-badge {
  background: var(--im-red) !important;
  border-radius: 50px !important;
}

/* ===== Pagination ===== */
.page-link {
  border: 1px solid var(--im-border);
  border-radius: 50px !important;
  color: var(--im-navy);
  font-weight: 600;
  margin: 0 3px;
}
.page-item.active .page-link {
  background: var(--im-navy);
  border-color: var(--im-navy);
}
.page-link:hover { background: var(--im-info-bg); color: var(--im-navy); }

/* ===== Badges ===== */
.badge {
  border-radius: 50px;
  font-family: var(--im-font-display);
  font-weight: 700;
}