/*
Theme Name: N2M Electronics
Theme URI: https://n2melectronics.sn
Author: Matrix Digital
Description: Thème WordPress pour N2M Electronics - Sécurité Électronique & Incendie à Dakar.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: n2m-electronics
*/

/* === VARIABLES === */
:root {
  --background: #ffffff;
  --foreground: #000000;
  --card: #fafafa;
  --primary: #FFD700;
  --primary-foreground: #000000;
  --muted: #ebebeb;
  --muted-foreground: #666666;
  --border: #d9d9d9;
  --fire: #FF5722;
  --whatsapp: #25D366;
  --reviews: #FF9800;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --shadow-neo: 4px 4px 0px 0px rgba(0,0,0,1);
  --shadow-neo-lg: 6px 6px 0px 0px rgba(0,0,0,1);
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background-color: var(--background);
  color: var(--foreground);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#page-content { flex: 1; display: flex; flex-direction: column; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* === CONTAINER: container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1400px] === */
.container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem;} }
@media (min-width: 1024px) { .container { padding-left: 2rem; padding-right: 2rem; } }

/* === UTILITIES === */
.industrial-border { border: 1px solid var(--border); }
.industrial-border-thick { border: 2px solid var(--foreground); }

/* === FADE-UP === */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0; font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.75rem; height: 2.75rem; padding: 0 1.5rem;
  transition: all 150ms; cursor: pointer; white-space: nowrap; border: 2px solid transparent;
}
.btn-lg { height: 3.5rem; padding: 0 2rem; font-size: 0.875rem; }
.btn-xl { height: 4rem; padding: 0 2.5rem; font-size: 1.125rem; }
.btn-primary { background: var(--primary); color: #000; }
.btn-primary:hover { background: #fff; color: #000; }
.btn-primary-alt { background: var(--primary); color: #000; }
.btn-primary-alt:hover { background: #000; color: #fff; }
.btn-primary-border { background: var(--primary); color: #000; border: 2px solid var(--primary); }
.btn-primary-border:hover { background: #000; color: #fff; border-color: var(--primary); }
.btn-fire { background: var(--fire); color: #fff; }
.btn-fire:hover { background: #fff; color: #000; }
.btn-fire-alt { background: var(--fire); color: #fff; }
.btn-fire-alt:hover { background: #000; color: #fff; }
.btn-dark { background: #000; color: #fff; }
.btn-dark:hover { background: var(--primary); color: #000; }
.btn-dark-alt { background: #000; color: #fff; }
.btn-dark-alt:hover { background: #fff; color: #000; }
.btn-outline-white { background: transparent; color: #fff; border: 2px solid #fff; }
.btn-outline-white:hover { background: #fff; color: #000; }
.btn-outline-primary { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color: #000; }

/* === TOAST === */
#toast-container {
  position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 0.75rem; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem;
  background: #fff; border: 2px solid #000; font-weight: 700; font-size: 0.875rem;
  box-shadow: var(--shadow-neo); pointer-events: auto; white-space: nowrap;
  animation: toastIn 0.3s ease;
}
.toast.success { border-color: #22c55e; }
.toast.error   { border-color: var(--fire); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* === HEADER === */
/* sticky top-0 z-50 w-full bg-black border-b border-primary/20 */
#site-header { position: sticky; top: 0; z-index: 50; width: 100%; background: #000; border-bottom: 1px solid rgba(255,215,0,0.2); box-shadow: none;}
/* hidden md:flex bg-primary text-black text-xs font-bold uppercase tracking-widest py-1.5 px-4 justify-center items-center gap-4 */
.header-topbar {
  display: none; background: var(--primary); color: #000;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.375rem 1rem; justify-content: center; align-items: center; gap: 1rem;
  position: relative;
}
.header-topbar .dot { width: 0.25rem; height: 0.25rem; background: #000; border-radius: 50%; }
.header-admin-link {
  position: absolute;
  right: 1rem;

  display: flex;
  align-items: center;
  gap: 0.4rem;

  color: #000;
  text-decoration: none;

  transition: 0.2s ease;
}

.header-admin-link:hover {
  text-decoration: underline;
}


@media (min-width: 1024px) { .header-topbar { display: flex; } }
/* flex h-20 items-center justify-between */
.header-inner { display: flex; height: 5rem; align-items: center; justify-content: space-between; }
/* h-[40px] md:h-[50px] */
.site-logo img { height: 40px; width: auto; object-fit: contain; transition: transform 200ms; }
.site-logo:hover img { transform: scale(1.05); }
@media (min-width: 1024px) { .site-logo img { height: 50px; } }
/* hidden lg:flex items-center gap-4 xl:gap-6 */
.main-nav { display: none; align-items: center; gap: 1rem; }
.main-nav a {
  font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: #fff; padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: all 150ms;
}
.main-nav a:hover, .main-nav a.active { color: var(--primary); border-bottom-color: var(--primary); }
/* hidden lg:flex items-center gap-4 */
.header-cta { display: none; align-items: center; gap: 1rem; }
/* lg:hidden h-12 w-12 text-white */
/* Toggle (icone burger) — pas de border ni background */
.mobile-menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  color: #fff;
  background: transparent;
  border: none;            /* ← ajout */
  outline: none;           /* ← ajout */
  padding: 0;              /* ← ajout */
  cursor: pointer;
  transition: color 150ms;
}
.mobile-menu-toggle:hover { color: var(--primary); }
.mobile-menu-toggle:focus { outline: none; }
.mobile-menu-toggle svg { width: 1.5rem; height: 1.5rem; }
/* Mobile menu */
@media (min-width: 1024px) {
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }
}
.mobile-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 198; }
.mobile-menu-overlay.open { display: block; }
.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px;
  background: #000; border-left: 2px solid var(--primary); z-index: 199;
  padding: 1.5rem; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.3s ease;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.mobile-menu-title { color: #fff; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; }
.mobile-menu-close { color: #fff; cursor: pointer; background: transparent;  /* ← ajout */
  border: none;             /* ← ajout */
  padding: 0;               /* ← ajout */}
.mobile-menu-close svg { width: 1.5rem; height: 1.5rem; }
.mobile-nav { display: flex; flex-direction: column; }
.mobile-nav a {
  font-size: 1.125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: #fff; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); transition: color 150ms;
}
.mobile-nav a:hover, .mobile-nav a.active { color: var(--primary); }
.mobile-nav-ctas { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }

.mobile-menu-ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ============================================================
   CART — bouton + drawer
   ============================================================ */

/* Bouton dans le header */
.cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 150ms;
}
.cart-toggle:hover { color: var(--primary); }
.cart-toggle svg { width: 1.5rem; height: 1.5rem; }

/* Badge compteur */
.cart-badge {
  position: absolute;
  top: 0; right: 0;
  width: 1.25rem; height: 1.25rem;
  background: var(--primary);
  color: #000;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 2px solid #000;
}

/* Overlay */
.cart-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9000;
  animation: cart-fade 200ms;
}
.cart-overlay.open { display: block; }
@keyframes cart-fade { from { opacity: 0; } to { opacity: 1; } }

body.cart-open .fab-container { display: none; }

/* Drawer */
.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 28rem;
  background: var(--background);
  border-left: 2px solid #000;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms ease;
}
.cart-drawer.open { transform: translateX(0); }

/* Header noir */
.cart-drawer-header {
  background: #000;
  color: #fff;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-drawer-title {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  color: #fff;
}
.cart-drawer-title svg { width: 1.5rem; height: 1.5rem; color: var(--primary); }
.cart-drawer-close {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
}
.cart-drawer-close:hover { color: var(--primary); }
.cart-drawer-close svg { width: 1.25rem; height: 1.25rem; }

/* Body */
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* Empty state */
.cart-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  color: var(--muted-foreground);
}
.cart-empty svg { width: 4rem; height: 4rem; opacity: 0.2; }
.cart-empty p { font-size: 1.125rem; font-weight: 500; }
.cart-empty-cta {
  margin-top: 1rem;
  height: 2.75rem;
  padding: 0 1.5rem;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.cart-empty-cta:hover { background: var(--primary); color: #000; }

/* Items */
.cart-item {
  display: flex;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; margin-bottom: 0; }
.cart-item-img {
  width: 5rem; height: 5rem;
  background: var(--muted);
  border: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-body { flex: 1; display: flex; flex-direction: column; }
.cart-item-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.cart-item-name { font-size: 0.875rem; font-weight: 700; line-height: 1.25; color: #000; }
.cart-item-remove {
  background: transparent; border: none; padding: 0;
  color: var(--muted-foreground); cursor: pointer;
  display: inline-flex; align-items: center;
  transition: color 150ms;
}
.cart-item-remove:hover { color: #ef4444; }
.cart-item-remove svg { width: 1rem; height: 1rem; }
.cart-item-price { color: var(--primary); font-weight: 700; font-size: 0.875rem; margin-top: 0.25rem; }
.cart-item-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #000;
  margin-top: auto;
  width: fit-content;
}
.cart-item-qty button {
  width: 2rem; height: 2rem;
  background: transparent; border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms;
}
.cart-item-qty button:hover { background: var(--muted); }
.cart-item-qty button svg { width: 1rem; height: 1rem; }
.cart-item-qty-val {
  width: 2rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
}

/* Footer */
.cart-drawer-footer {
  padding: 1.5rem;
  background: rgba(235,235,235,0.3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-total-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cart-total-val {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
}
.cart-checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  background: var(--primary);
  color: #000;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.cart-checkout-btn:hover { background: #000; color: #fff; }
.cart-continue-btn {
  height: 3rem;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-align: center;
}
.cart-continue-btn:hover { text-decoration: underline; }
/* ---- Cart : boutons WhatsApp & Email ---- */
.cart-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 3rem;
  background: #25D366;
  color: #fff;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 150ms, transform 150ms;
}
.cart-wa-btn:hover { background: #20bd5a; transform: scale(1.02); }
.cart-wa-btn svg { width: 1.25rem; height: 1.25rem; }

.cart-email-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 3rem;
  background: transparent;
  color: #000;
  border: 2px solid #000;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.cart-email-btn:hover { background: #000; color: #fff; }
.cart-email-btn svg { width: 1.25rem; height: 1.25rem; }

/* ---- Modal email ---- */
.cart-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cart-modal-overlay.open { display: flex; }
.cart-modal {
  width: 100%;
  max-width: 32rem;
  background: #fff;
  border: 2px solid #000;
  max-height: 90vh;
  overflow-y: auto;
}
.cart-modal-header {
  background: #000;
  color: #fff;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-modal-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  color: #fff;
}
.cart-modal-close {
  background: transparent; border: none; color: #fff;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center;
}
.cart-modal-close:hover { color: var(--primary); }
.cart-modal-close svg { width: 1.25rem; height: 1.25rem; }

.cart-modal-form { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.cart-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .cart-modal-grid { grid-template-columns: 1fr; } }
.cart-modal-field { display: flex; flex-direction: column; gap: 0.5rem; }
.cart-modal-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000;
}
.cart-modal-input, .cart-modal-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #000;
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  outline: none;
  transition: box-shadow 150ms;
}
.cart-modal-input { height: 2.75rem; }
.cart-modal-textarea { resize: vertical; min-height: 6rem; }
.cart-modal-input:focus, .cart-modal-textarea:focus {
  box-shadow: 0 0 0 2px rgba(255,215,0,0.4);
}
.cart-modal-submit {
  margin-top: 0.5rem;
  height: 3rem;
  background: var(--primary);
  color: #000;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.cart-modal-submit:hover { background: #000; color: #fff; }
.cart-modal-submit:disabled { opacity: 0.6; cursor: wait; }

/* === FAB — exact from index.css === */
.fab-container { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.75rem; }
.fab-btn {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 0; border: 2px solid #000;
  box-shadow: var(--shadow-neo); transition: all 150ms; cursor: pointer; text-decoration: none;
}
@media (min-width: 1024px) { .fab-btn { width: 4rem; height: 4rem; } }
.fab-btn:hover { transform: scale(1.1) translateY(-4px); box-shadow: var(--shadow-neo-lg); }
.fab-btn svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 1024px) { .fab-btn svg { width: 1.75rem; height: 1.75rem; } }
.fab-whatsapp { background: var(--whatsapp); color: #fff; }
.fab-call     { background: var(--primary); color: #000; }
.fab-quote    { background: #000; color: #fff; border-color: #fff; box-shadow: 4px 4px 0px 0px rgba(255,255,255,0.2); }
.fab-quote:hover { box-shadow: 6px 6px 0px 0px rgba(255,255,255,0.3); }
.fab-reviews  { background: var(--reviews); color: #fff; }
@keyframes float { 0%{transform:translateY(0)} 50%{transform:translateY(-8px)} 100%{transform:translateY(0)} }
@keyframes pulse-whatsapp {
  0%  { box-shadow: 0 0 0 0 rgba(37,211,102,0.7), var(--shadow-neo); }
  70% { box-shadow: 0 0 0 15px rgba(37,211,102,0), var(--shadow-neo); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0), var(--shadow-neo); }
}
.animate-float-slow { animation: float 3s ease-in-out infinite; }
.float-delay-0 { animation-delay: 0s; }
.float-delay-1 { animation-delay: 0.2s; }
.float-delay-2 { animation-delay: 0.4s; }
.float-delay-3 { animation-delay: 0.6s; }
.fab-whatsapp:hover { animation: pulse-whatsapp 1.5s infinite; }

/* === FOOTER === */
/* bg-black text-white pt-16 pb-8 border-t-[4px] border-primary */
#site-footer { background: #000; color: #fff; padding-top: 4rem; padding-bottom: 2rem; border-top: 4px solid var(--primary); }
/* grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 mb-16 */
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 4rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 4fr 3fr 3fr 2fr; } }
/* border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 */
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
@media (min-width: 1024px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-grid p{ text-wrap: balance; line-height: 10;}

/* === BREADCRUMB === */
/* bg-black py-6 border-b border-primary/30 */
.page-breadcrumb { background: #000; padding: 1.5rem 0; border-bottom: 1px solid rgba(255,215,0,0.3); }
.breadcrumb-inner { display: flex; align-items: center; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #9CA3AF; }
.breadcrumb-inner a { color: #9CA3AF; transition: color 150ms; }
.breadcrumb-inner a:hover { color: var(--primary); }
.breadcrumb-inner .sep { margin: 0 0.75rem; color: var(--primary); display: flex; align-items: center; }
.breadcrumb-inner .current { color: #fff; }

/* === HOME PAGE === */
/* flex flex-col lg:flex-row min-h-[85vh] */
.dual-hero { display: flex; flex-direction: column; min-height: 85vh; width: 100%; }
@media (min-width: 1024px) { .dual-hero { flex-direction: row; } }
/* relative flex-1 flex items-center justify-center p-8 lg:p-16 overflow-hidden min-h-[50vh] group */
.hero-panel { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; overflow: hidden; min-height: 50vh; }
@media (min-width: 1024px) { .hero-panel { padding: 4rem; } }
.hero-panel-bg { position: absolute; inset: 0; z-index: 0; }
.hero-panel-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms; }
.hero-panel:hover .hero-panel-bg img { transform: scale(1.05); }
.hero-panel-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); transition: background 500ms; }
.hero-panel:hover .hero-panel-overlay { background: rgba(0,0,0,0.6); }
/* relative z-10 text-white max-w-xl text-center lg:text-left */
.hero-panel-content { position: relative; z-index: 10; color: #fff; max-width: 36rem; text-align: center;}
@media (min-width: 1024px) { .hero-panel-content { text-align: left; } }
/* w-16 h-16 mb-6 mx-auto lg:mx-0 */
.hero-panel-content .hero-icon { width: 4rem; height: 4rem; margin-bottom: 1.5rem; margin-left: auto; margin-right: auto; display: block; }
@media (min-width: 1024px) { .hero-panel-content .hero-icon { margin-left: 0; margin-right: 0; } }
/* text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 tracking-tighter uppercase */
.hero-panel-content h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -0.05em; text-transform: uppercase; line-height: 1; }
@media (min-width: 1024px) { .hero-panel-content h1 { font-size: 3.75rem; } }
/* text-lg md:text-xl text-gray-300 font-medium mb-8 leading-relaxed text-balance */
.hero-panel-content p { font-size: 1.25rem; color: #D1D5DB; font-weight: 500; margin-bottom: 2rem; line-height: 1.35; text-wrap: balance; }
/* w-full sm:w-auto */
.hero-panel-content .btn { width: 100%; }
@media (min-width: 640px) { .hero-panel-content .btn { width: auto; } }
.hero-panel-content svg {
  display: block;
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .hero-panel-content svg { margin-left: 0; margin-right: 0;}
}

/* py-20 md:py-32 bg-muted/30 */
.services-preview { padding: 5rem 0; background: rgba(235,235,235,0.3); }
@media (min-width: 1024px) { .services-preview { padding: 8rem 0; } }
/* text-center max-w-3xl mx-auto mb-16 */
.section-header { text-align: center; max-width: 48rem; margin: 0 auto 4rem; }
/* text-3xl md:text-5xl font-extrabold uppercase tracking-tight mb-6 */
.section-header h2 { font-size: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .section-header h2 { font-size: 3.1rem; } }
/* text-xl text-muted-foreground font-medium */
.section-header p { font-size: 1.25rem; color: var(--muted-foreground); font-weight: 500; line-height: 1.375; }
/* grid grid-cols-1 md:grid-cols-2 gap-12 */
.services-2col { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .services-2col { grid-template-columns: 1fr 1fr; } }
/* space-y-8 */
.services-2col > div { display: flex; flex-direction: column; gap: 2rem; }
/* flex items-center gap-4 mb-8 pb-4 border-b-4 inline-flex */
.services-col-header { display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 0; padding-bottom: 1rem; }
/* w-10 h-10 */
.services-col-header svg { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
/* text-2xl font-extrabold uppercase tracking-widest */
.services-col-header h3 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
/* grid grid-cols-1 sm:grid-cols-2 gap-4 */
.services-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* bg-card industrial-border hover:border-primary hover:-translate-y-1 transition-all group flex flex-col overflow-hidden */
.service-mini-card {
  background: var(--card); border: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  transition: all 200ms; text-decoration: none; color: var(--foreground);
}
.service-mini-card:hover { border-color: var(--primary); transform: translateY(-4px); }
.service-mini-card.fire:hover { border-color: var(--fire); }
/* h-24 w-full overflow-hidden */
.service-mini-card .mini-img { height: 6rem; width: 100%; overflow: hidden; }
.service-mini-card .mini-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: all 500ms; }
.service-mini-card:hover .mini-img img { opacity: 1; transform: scale(1.05); }
/* p-4 flex items-center justify-between flex-1 */
.service-mini-card .mini-info { padding: 1rem; display: flex; align-items: center; justify-content: space-between; flex: 1; }
.service-mini-card .mini-info span { font-weight: 700; font-size: 0.875rem; }
/* w-4 h-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 */
.service-mini-card .mini-arrow { width: 1rem; height: 1rem; color: var(--muted-foreground); transition: all 150ms;}
.service-mini-card:hover .mini-arrow { color: var(--primary); transform: translateX(4px); }
.service-mini-card.fire:hover .mini-arrow { color: var(--fire); }
/* mt-16 text-center */
.services-preview-cta { margin-top: 4rem; text-align: center; }

/* py-20 md:py-32 bg-black text-white */
.why-us { padding: 5rem 0; background: #000; color: #fff; }
@media (min-width: 1024px) { .why-us { padding: 8rem 0; } }
/* grid grid-cols-1 lg:grid-cols-2 gap-16 items-center */
.why-us-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .why-us-grid { grid-template-columns: 1fr 1fr; } }
/* text-3xl md:text-5xl font-extrabold uppercase tracking-tight mb-8 text-balance */
.why-us-content h2 { font-size: 1.875rem; font-weight: 1000; text-transform: uppercase;  margin-bottom: 2rem;  line-height: 1;}
@media (min-width: 1024px) { .why-us-content h2 { font-size: 3rem; } }
/* text-lg text-gray-400 leading-relaxed font-medium mb-10 */
.why-us-content > p { font-size: 1.125rem; color: #9CA3AF; font-weight: 500; line-height: 1.625; margin-bottom: 2.5rem; text-wrap: balance; }
/* space-y-6 mb-10 */
.why-us-features { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; }
/* flex items-center gap-4 */
.why-feature { display: flex; align-items: center; gap: 1rem; }
/* w-12 h-12 bg-primary/20 flex items-center justify-center flex-shrink-0 border border-primary */
.why-feature-icon { width: 3rem; height: 3rem; background: rgba(255,215,0,0.2); border: 1px solid var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.why-feature-icon svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }
/* font-bold text-lg uppercase tracking-wider */
.why-feature p { font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.05em; }
/* flex flex-col sm:flex-row gap-4 */
.why-us-ctas { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .why-us-ctas { flex-direction: row; } }
/* relative: aspect-square bg-card industrial-border p-2 */
.why-us-image-wrap { position: relative; }
.why-us-image-wrap .img-box { aspect-ratio: 1; background: var(--card); border: 1px solid var(--border); padding: 0.5rem; }
.why-us-image-wrap .img-box img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 500ms; }
.why-us-image-wrap:hover .img-box img { filter: grayscale(0); }
/* absolute -bottom-6 -left-6 bg-primary text-black p-8 border-2 border-black max-w-xs shadow-xl hidden md:block */
.why-us-badge { position: absolute; bottom: -1.5rem; left: -1.5rem; background: var(--primary); color: #000; padding: 2rem; border: 2px solid #000; max-width: 20rem; box-shadow: 0 20px 40px rgba(0,0,0,0.25); display: none; }
@media (min-width: 1024px) { .why-us-badge { display: block; } }
/* text-4xl font-extrabold mb-2 */
.why-us-badge .num { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; }
/* font-bold uppercase tracking-widest text-sm */
.why-us-badge .label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; }

/* === SERVICES PAGE === */
/* py-20 md:py-32 container text-center max-w-4xl */
.services-page-hero { padding: 5rem 0; text-align: center;}
@media (min-width: 1024px) { .services-page-hero { padding: 8rem 0; } }
.services-page-hero-inner { max-width: 56rem; margin: 0 auto; text-align: center; }
/* text-4xl md:text-6xl font-extrabold mb-6 uppercase tracking-tighter */
.services-page-hero h1 { font-size: 2.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .services-page-hero h1 { font-size: 3.75rem; } }
/* text-xl text-muted-foreground font-medium leading-relaxed */
.services-page-hero p { font-size: 1.25rem; color: var(--muted-foreground); font-weight: 500; line-height: 1.625; text-wrap: balance;}
/* py-16 md:py-24 bg-white border-t border-border */
.services-section { padding: 4rem 0 6rem; border-top: 1px solid var(--border); background: #fff; }
/* bg-muted/20 */
.services-section.bg-muted { background: rgba(235,235,235,0.2); }
/* flex items-center gap-4 mb-12 */
.section-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; }
/* w-12 h-12 */
.section-heading svg { width: 3rem; height: 3rem; flex-shrink: 0; }
/* text-3xl md:text-4xl font-extrabold uppercase tracking-tight */
.section-heading h2 { font-size: 1.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; }
@media (min-width: 1024px) { .section-heading h2 { font-size: 2.25rem; } }
/* grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: 1fr 1fr 1fr; } }
/* flex flex-col bg-card industrial-border h-full group service-card-hover */
.service-card {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--border); height: 100%;
  transition: all 200ms cubic-bezier(0.4,0,0.2,1);
}
.service-card:hover { border-color: var(--primary); box-shadow: 4px 4px 0px 0px var(--primary); }
.service-card.fire:hover { border-color: var(--primary); box-shadow: 4px 4px 0px 0px var(--primary); }
/* aspect-video overflow-hidden border-b border-border */
.service-card-img { aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--border); }
.service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms; }
.service-card:hover .service-card-img img { transform: scale(1.05); }
/* p-6 md:p-8 flex flex-col flex-1 */
.service-card-body { padding: 1.5rem 2rem; display: flex; flex-direction: column; flex: 1; }
/* text-xl font-extrabold uppercase tracking-tight mb-3 */
.service-card-body h3 { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; margin-bottom: 0.75rem; }
/* text-muted-foreground font-medium mb-8 flex-1 leading-relaxed */
.service-card-body p { color: var(--muted-foreground); font-weight: 500; margin-bottom: 2rem; flex: 1; line-height: 1.625; }
/* flex flex-col gap-3 mt-auto */
.service-card-body .card-cta { display: flex; flex-direction: column; gap: 0.75rem; margin-top: auto; }
.service-card-body .btn { width: 100%; }

/* === SERVICE DETAIL === */
/* relative bg-black text-white py-20 lg:py-32 overflow-hidden border-b-4 */
.service-detail-hero { position: relative; background: #000; color: #fff; padding: 5rem 0; overflow: hidden; border-bottom: 4px solid var(--primary); }
@media (min-width: 1024px) { .service-detail-hero { padding: 8rem 0; } }
.service-detail-hero.fire { border-bottom-color: var(--fire); }
/* absolute inset-0 z-0 opacity-40 */
.service-detail-hero-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.4; }
.service-detail-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.service-detail-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.3)); }
/* container relative z-10 max-w-3xl */
.service-detail-hero-content { position: relative; z-index: 10; max-width: 48rem; }
/* inline-flex items-center gap-3 px-4 py-2 bg-white/10 border-l-4 mb-8 backdrop-blur-sm */
.service-badge { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; background: rgba(255,255,255,0.1); border-left: 4px solid var(--primary); margin-bottom: 2rem; backdrop-filter: blur(4px); }
.service-badge.fire { border-left-color: var(--fire); }
.service-badge svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }
.service-badge.fire svg { color: var(--fire); }
.service-badge span { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
/* text-4xl md:text-5xl lg:text-6xl font-extrabold mb-8 uppercase tracking-tighter */
.service-detail-hero h1 { font-size: 2.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 2rem; text-wrap: balance; line-height: 1;}
@media (min-width: 1024px) { .service-detail-hero h1 { font-size: 3.75rem; } }
/* text-lg md:text-xl text-gray-300 font-medium leading-relaxed mb-10 */
.service-detail-hero p.intro { font-size: 1.25rem; color: #D1D5DB; font-weight: 500; line-height: 1.375; margin-bottom: 2.5rem; }
/* flex flex-col sm:flex-row gap-4 */
.service-detail-ctas { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .service-detail-ctas { flex-direction: row; } }
/* py-20 lg:py-32 */
.service-detail-body { padding: 5rem 0; }
@media (min-width: 1024px) { .service-detail-body { padding: 8rem 0; } }
/* grid grid-cols-1 lg:grid-cols-12 gap-16 */
.service-detail-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; }
@media (min-width: 1024px) { .service-detail-grid { grid-template-columns: 8fr 4fr; } }
/* space-y-16 */
.service-main-content { display: flex; flex-direction: column; gap: 4rem; }
/* text-3xl font-extrabold uppercase mb-6 flex items-center gap-4 */
.detail-section h2 { font-size: 1.875rem; font-weight: 800; text-transform: uppercase; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; }
/* w-2 h-8 bg-primary block */
.detail-section h2 .accent-bar { width: 0.5rem; height: 2rem; background: var(--primary); display: block; flex-shrink: 0; }
.detail-section h2 .accent-bar.fire { background: var(--fire); }
/* text-lg text-muted-foreground font-medium leading-relaxed */
.detail-section p { font-size: 1.125rem; color: var(--muted-foreground); font-weight: 500; line-height: 1.625; text-wrap:balance;}
/* grid sm:grid-cols-2 gap-8 pt-8 border-t border-border */
.conformite-maintenance { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }
@media (min-width: 640px) { .conformite-maintenance { grid-template-columns: 1fr 1fr; } }
/* text-xl font-bold uppercase mb-4 */
.conformite-maintenance h3 { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem; }
.conformite-maintenance p { font-size: 0.875rem; color: var(--muted-foreground); font-weight: 500; line-height: 1.625; }
/* bg-card p-8 md:p-10 industrial-border-thick sticky top-32 */
.service-sidebar-card { background: var(--card); padding: 2rem 2.5rem; border: 2px solid var(--foreground); position: sticky; top: 8rem; }
/* text-xl font-extrabold uppercase mb-8 pb-4 border-b border-border */
.service-sidebar-card h3 { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
/* space-y-6 mb-10 */
.sidebar-benefits { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; }
/* flex items-start gap-4 */
.benefit-item { display: flex; align-items: flex-start; gap: 1rem; }
/* w-6 h-6 flex-shrink-0 */
.benefit-item svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--primary); }
.benefit-item.fire svg { color: var(--fire); }
/* font-bold text-sm tracking-wide */
.benefit-item span { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.025em; }
/* bg-black text-white p-6 text-center */
.sidebar-cta-box { background: #000; color: #fff; padding: 1.5rem; text-align: center; }
.sidebar-cta-box .small-label { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #9CA3AF; margin-bottom: 0.5rem; }
/* text-xl font-extrabold mb-6 */
.sidebar-cta-box .phone { font-size: 1.25rem; font-weight: 800; margin-bottom: 1.5rem; display: block; }
.sidebar-cta-box .btn { width: 100%; }

/* CTA desktop */
.header-cta-desktop {
  display: none;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 1024px) {
  .header-cta-desktop { display: flex; }
}

/* === RÉALISATIONS === */
/* py-20 md:py-32 */
.realisations-page { padding: 5rem 0; }
@media (min-width: 1024px) { .realisations-page { padding: 8rem 0; } }
/* max-w-4xl mx-auto text-center mb-16 */
.realisations-header { max-width: 56rem; margin: 0 auto 4rem; text-align: center; }
/* text-4xl md:text-6xl font-extrabold mb-6 uppercase tracking-tighter */
.realisations-header h1 { font-size: 2.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .realisations-header h1 { font-size: 3.75rem; } }
/* text-xl text-muted-foreground font-medium leading-relaxed mb-12 */
.realisations-header p { font-size: 1.25rem; color: var(--muted-foreground); font-weight: 500; line-height: 1.625; margin-bottom: 3rem; }
/* flex flex-wrap justify-center gap-4 */
.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
/* h-12 px-8 rounded-none font-bold uppercase tracking-widest border-2 */
.filter-btn { height: 3rem; padding: 0 2rem; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; border: 2px solid var(--border); border-radius: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: all 150ms; font-family: var(--font-body); }
.filter-btn.active-all { background: #000; color: #fff; border-color: #000; }
.filter-btn.active-elec { background: var(--primary); color: #000; border-color: var(--primary); }
.filter-btn.active-fire { background: var(--fire); color: #fff; border-color: var(--fire); }
/* grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 */
.projects-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-top: 4rem; }
@media (min-width: 1024px) { .projects-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .projects-grid { grid-template-columns: 1fr 1fr 1fr; } }
/* flex flex-col bg-card industrial-border group service-card-hover */
.project-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); transition: all 200ms cubic-bezier(0.4,0,0.2,1); }
.project-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--primary); }
.project-card:hover { border-color: var(--primary); box-shadow: 4px 4px 0px 0px var(--primary); }
/* aspect-video overflow-hidden border-b relative */
.project-card-img { aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--border); position: relative; }
/* absolute top-4 left-4 px-3 py-1 text-xs font-bold uppercase tracking-widest z-10 */
.project-category-badge { position: absolute; top: 1rem; left: 1rem; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; z-index: 10; }
.project-category-badge.elec { background: var(--primary); color: #000; }
.project-category-badge.fire { background: var(--fire); color: #fff; }
.project-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms; }
.project-card:hover .project-card-img img { transform: scale(1.05); }
/* p-6 md:p-8 flex flex-col flex-1 */
.project-card-body { padding: 1.5rem 2rem; display: flex; flex-direction: column; flex: 1; }
/* text-xl font-extrabold uppercase mb-3 tracking-tight */
.project-card-body h3 { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; margin-bottom: 0.75rem; letter-spacing: -0.025em; }
/* flex flex-wrap gap-2 mb-4 */
.project-services { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
/* text-xs font-bold uppercase text-muted-foreground bg-muted px-2 py-1 */
.project-service-tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--muted-foreground); background: var(--muted); padding: 0.25rem 0.5rem; }
/* text-muted-foreground font-medium mb-8 leading-relaxed flex-1 text-sm */
.project-card-body p { color: var(--muted-foreground); font-weight: 500; margin-bottom: 2rem; line-height: 1.625; flex: 1; font-size: 0.875rem; }
/* mt-auto flex items-center justify-between p-4 bg-black text-white hover:bg-primary hover:text-black */
.project-card-cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: #000; color: #fff; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid #000; transition: all 150ms; text-decoration: none; }
.project-card-cta:hover { background: var(--primary); color: #000; }
.project-card-cta svg { width: 1rem; height: 1rem; }

/* === CONTACT PAGE === */
/* py-20 md:py-32 */
.contact-page { padding: 5rem 0; }
@media (min-width: 1024px) { .contact-page { padding: 8rem 0; } }
/* max-w-3xl mb-16 */
.contact-header { max-width: 48rem; margin-bottom: 4rem; }
/* text-4xl md:text-6xl font-extrabold mb-6 uppercase tracking-tighter */
.contact-header h1 { font-size: 2.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .contact-header h1 { font-size: 3.75rem; } }
/* text-xl text-muted-foreground font-medium leading-relaxed */
.contact-header p { font-size: 1.25rem; color: var(--muted-foreground); font-weight: 500; line-height: 1.625; }
/* grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem 4rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; } }
/* space-y-6 */
.contact-cards { display: flex; flex-direction: column; gap: 1.5rem; }
/* bg-card p-8 industrial-border flex gap-6 hover:border-primary */
.contact-card { background: var(--card); padding: 2rem; border: 1px solid var(--border); display: flex; gap: 1.5rem; transition: border-color 150ms; }
.contact-card:hover { border-color: var(--primary); }
.contact-card.whatsapp:hover { border-color: var(--whatsapp); }
/* w-12 h-12 bg-black text-primary flex items-center justify-center flex-shrink-0 */
.contact-card-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-card-icon.dark { background: #000; color: #fff; }
.contact-card-icon.primary  { background: #000; color: var(--primary); }
.contact-card-icon.wa   { background: var(--whatsapp); color: #fff; }
.contact-card-icon svg  { width: 1.25rem; height: 1.25rem; }
/* text-lg font-extrabold uppercase mb-1 */
.contact-card-info h3 { font-size: 1.125rem; font-weight: 800; text-transform: uppercase; margin-bottom: 0.25rem; }
/* text-muted-foreground font-medium mb-2 text-sm */
.contact-card-info .sub { color: var(--muted-foreground); font-weight: 500; margin-bottom: 0.5rem; font-size: 0.875rem; }
/* text-xl font-bold hover:text-primary */
.contact-card-info a { font-weight: 700; font-size: 1.25rem; transition: color 150ms; color: var(--foreground); }
.contact-card-info a:hover { color: var(--primary); }
.contact-card-info a.wa-link { color: var(--whatsapp); font-size: 1.125rem; }
.contact-card-info a.wa-link:hover { text-decoration: underline; }
.contact-card-info .addr-text { font-size: 0.875rem; color: var(--muted-foreground); font-weight: 500; line-height: 1.625; }
/* bg-white p-8 md:p-12 industrial-border-thick shadow-lg */
.contact-form-wrap { background: #fff; padding: 2rem 3rem; border: 2px solid var(--foreground); position: relative; z-index: auto;}
/* text-2xl font-extrabold uppercase tracking-tight mb-8 */
.contact-form-wrap h2 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; margin-bottom: 2rem; }
/* space-y-6 */
.form-field-group { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 1.5rem; position: relative; z-index: auto; }
/* grid grid-cols-1 md:grid-cols-2 gap-6 */
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; position: relative; z-index: auto; }
@media (min-width: 1024px) { .form-row { grid-template-columns: 1fr 1fr; } }
/* space-y-2 */
.form-field { display: flex; flex-direction: column; gap: 0.5rem; position: relative; z-index: auto; }
/* text-xs font-bold uppercase text-black */
.form-field label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #000; }
/* h-14 rounded-none industrial-border focus-visible:ring-primary */
.form-field input, .form-field select, .form-field textarea {
  height: 3.5rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: 0;
  font-size: 1rem; font-family: var(--font-body); background: #fff; color: #000;
  outline: none; transition: border-color 150ms; width: 100%; appearance: none;
}
.form-field textarea { height: auto; min-height: 9.375rem; padding: 1rem; resize: none; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(255,215,0); outline: none; }
/* Success */
.form-success { text-align: center; padding: 4rem 2rem; display: none; }
.form-success.show { display: block; }
/* w-20 h-20 bg-primary text-black rounded-full flex items-center justify-center mx-auto mb-6 */
.form-success .check-icon { width: 5rem; height: 5rem; background: var(--primary); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.form-success .check-icon svg { width: 2.5rem; height: 2.5rem; }
/* text-3xl font-extrabold uppercase tracking-tight mb-4 */
.form-success h2 { font-size: 1.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; margin-bottom: 1rem; }
/* text-lg text-muted-foreground mb-8 */
.form-success p { font-size: 1.125rem; color: var(--muted-foreground); margin-bottom: 2rem; }

/* === CUSTOM SELECT === */
.custom-select-wrap { position: relative; width: 100%; }
.custom-select-trigger {
  width: 100%; height: 3.5rem; padding: 0 1rem;
  border: 1px solid var(--border); border-radius: 0;
  background: #fff; font-family: var(--font-body); font-size: 1rem;
  color: var(--muted-foreground); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  transition: border-color 150ms; text-align: left;
}
.custom-select-trigger:focus,
.custom-select-trigger.open { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(255,215,0); outline: none; }
.custom-select-trigger.selected { color: #000; }
.custom-select-dropdown {
  display: none; position: absolute; left: 0; right: 0;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  z-index: 9999; max-height: 24rem; overflow-y: auto;
}
.custom-select-dropdown.open { display: block; }
.custom-select-group-label {
  padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--primary); display: flex; align-items: center; gap: 0.5rem;
  background: #fff; top: 0;
}
.custom-select-option {
  padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500;
  cursor: pointer; color: var(--foreground); transition: background 100ms;
  margin: 0 0.25rem;
}
.custom-select-option:hover { background: #2d4373; color: #fff; }
.custom-select-option.selected { background: #2d4373; font-weight: 700; color: #fff; }

/* === À PROPOS === */
.about-hero { padding: 5rem 0; }
@media (min-width: 1024px) { .about-hero { padding: 8rem 0; } }
/* grid grid-cols-1 lg:grid-cols-2 gap-16 items-center */
.about-hero-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .about-hero-grid { grid-template-columns: 1fr 1fr; } }
/* text-4xl md:text-5xl lg:text-6xl font-extrabold mb-8 uppercase tracking-tighter */
.about-hero-text h1 { font-size: 2.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 2rem; }
@media (min-width: 1024px) { .about-hero-text h1 { font-size: 3.75rem; } }
/* space-y-6 text-lg text-muted-foreground font-medium leading-relaxed */
.about-prose { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
.about-prose p { font-size: 1.125rem; color: var(--muted-foreground); font-weight: 500; line-height: 1.625; }
/* grid grid-cols-2 gap-8 mt-12 pt-12 border-t border-border */
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--border); }
/* border-l-4 border-primary pl-6 */
.about-stat { padding-left: 1.5rem; }
.about-stat.primary { border-left: 4px solid var(--primary); }
.about-stat.fire    { border-left: 4px solid var(--fire); }
/* text-4xl font-extrabold mb-2 */
.about-stat .num { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.about-stat.primary .num { color: var(--primary); }
.about-stat.fire    .num { color: var(--fire); }
/* font-bold uppercase tracking-widest text-xs */
.about-stat .label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; }
/* aspect-square industrial-border-thick p-2 bg-card z-10 relative */
.about-hero-image { position: relative; }
.about-hero-image .img-box { aspect-ratio: 1; border: 2px solid var(--foreground); padding: 0.5rem; background: var(--card); position: relative; z-index: 10; }
.about-hero-image .img-box img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 500ms; }
.about-hero-image:hover .img-box img { filter: grayscale(0); }
/* absolute -bottom-8 -right-8 w-64 h-64 bg-primary z-0 border-2 border-black hidden md:block */
.about-hero-image .deco { position: absolute; bottom: -2rem; right: -2rem; width: 16rem; height: 16rem; background: var(--primary); z-index: 0; border: 2px solid #000; display: none; }
@media (min-width: 1024px) { .about-hero-image .deco { display: block; } }
/* py-20 md:py-32 bg-black text-white */
.about-values { padding: 5rem 0; background: #000; color: #fff; }
@media (min-width: 1024px) { .about-values { padding: 8rem 0; } }
.about-values .section-header h2 { color: #fff; }
.about-values .section-header p  { color: #9CA3AF; }
/* grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 */
.values-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
/* p-8 border border-white/20 bg-white/5 hover:border-primary */
.value-card { padding: 2rem; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); transition: border-color 150ms; }
.value-card:hover { border-color: var(--primary); }
/* w-12 h-12 mb-6 */
.value-card svg { width: 3rem; height: 3rem; margin-bottom: 1.5rem; }
/* text-xl font-bold uppercase tracking-wider mb-4 */
.value-card h3 { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
/* text-gray-400 text-sm font-medium leading-relaxed */
.value-card p { color: #9CA3AF; font-size: 0.875rem; font-weight: 500; line-height: 1.625; }
/* py-20 md:py-32 */
.about-team { padding: 5rem 0; text-align: center;}
@media (min-width: 1024px) { .about-team { padding: 8rem 0; } }
.about-team-inner { text-align: center; }
/* text-3xl md:text-5xl font-extrabold mb-16 uppercase tracking-tight */
.about-team h2 { font-size: 1.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 4rem; }
@media (min-width: 1024px) { .about-team h2 { font-size: 3rem; } }
/* text-xl text-muted-foreground font-medium leading-relaxed max-w-4xl mx-auto */
.about-team .team-intro { font-size: 1.25rem; color: var(--muted-foreground); font-weight: 500; line-height: 1.625; max-width: 56rem; margin: 0 auto 4rem; }
/* max-w-2xl mx-auto */
.team-photo-wrap { max-width: 42rem; margin: 0 auto; }
/* aspect-[21/9] industrial-border-thick p-2 bg-card */
.team-photo-box { aspect-ratio: 21/9; border: 2px solid var(--foreground); padding: 0.5rem; background: var(--card); }
.team-photo-box img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 500ms; }
.team-photo-box:hover img { filter: grayscale(0); }
/* mt-6 text-sm font-bold uppercase tracking-widest text-muted-foreground */
.team-caption { margin-top: 1.5rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
/* py-20 bg-primary */
.about-cta { padding: 5rem 0; background: var(--primary); text-align: center; color: #000; }
/* text-3xl md:text-4xl font-extrabold mb-8 uppercase tracking-tight */
.about-cta h2 { font-size: 1.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 2rem; }
@media (min-width: 1024px) { .about-cta h2 { font-size: 2.25rem; } }

/* === AUDIT === */
/* py-12 md:py-20 flex flex-col items-center relative overflow-hidden */
.audit-page { padding: 3rem 0 5rem; min-height: calc(100vh - 160px); display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; }
@media (min-width: 1024px) { .audit-page { padding: 5rem 0; } }
.audit-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.05; pointer-events: none; }
.audit-bg img { width: 100%; height: 100%; object-fit: cover; }
/* container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl w-full flex-1 flex flex-col relative z-10 */
.audit-container { position: relative; z-index: 10; width: 100%; max-width: 64rem; }
/* text-center flex flex-col items-center justify-center my-auto py-16 */
.audit-intro { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 4rem 0; }
/* w-24 h-24 bg-primary flex items-center justify-center mb-8 border-4 border-black */
.audit-intro-icon { width: 6rem; height: 6rem; background: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; border: 4px solid #000; }
.audit-intro-icon svg { width: 3rem; height: 3rem; color: #000; }
/* text-4xl md:text-6xl font-extrabold uppercase tracking-tighter mb-6 max-w-4xl */
.audit-intro h1 { font-size: 2.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 1.5rem; max-width: 52rem; }
@media (min-width: 1024px) { .audit-intro h1 { font-size: 3.75rem; } }
/* text-xl text-muted-foreground font-medium mb-12 max-w-2xl */
.audit-intro p { font-size: 1.25rem; color: var(--muted-foreground); font-weight: 500; margin-bottom: 3rem; max-width: 40rem; line-height: 1.625; }
/* mb-12 */
.audit-progress-wrap { margin-bottom: 3rem; }
/* flex justify-between text-sm font-bold uppercase tracking-widest mb-3 */
.audit-progress-meta { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; }
.audit-progress-meta .pct { color: var(--primary); }
/* h-2 rounded-none bg-muted */
.audit-progress-bar { height: 0.5rem; background: var(--muted); border-radius: 0; overflow: hidden; }
.audit-progress-fill { height: 100%; background: var(--primary); transition: width 500ms ease-out; }
.audit-step { display: none; }
.audit-step.active { display: block; }
.audit-step h2 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; margin-bottom: 1rem; }
.audit-step .subtitle { font-size: 1rem; color: var(--muted-foreground); font-weight: 500; margin-bottom: 2rem; }
/* grid grid-cols-1 sm:grid-cols-2 gap-4 */
.step-options { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .step-options { grid-template-columns: 1fr 1fr; } }
/* h-16 justify-start px-6 rounded-none border-2 font-bold text-base */
.step-option-btn { height: 4rem; text-align: left; padding: 0 1.5rem; border: 2px solid var(--border); border-radius: 0; font-weight: 700; font-size: 1rem; font-family: var(--font-body); background: var(--card); color: var(--muted-foreground); cursor: pointer; transition: all 150ms; }
.step-option-btn:hover { border-color: #000; color: #000; }
.step-option-btn.selected { border-color: var(--primary); background: rgba(255,215,0,0.1); color: #000; }
/* flex justify-between items-center mt-8 */
.audit-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.audit-nav-back { height: 3rem; padding: 0 1.5rem; background: transparent; border: 2px solid var(--border); border-radius: 0; font-weight: 700; font-size: 0.75rem; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); cursor: pointer; transition: all 150ms; }
.audit-nav-back:hover { border-color: #000; color: #000; }
.step-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.step-input-field label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.step-input-field input { width: 100%; height: 3rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: 0; font-size: 1rem; font-family: var(--font-body); outline: none; }
.step-input-field input:focus { border-color: var(--primary); }
.step-checkbox { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.step-checkbox input[type="checkbox"] { width: 1.5rem; height: 1.5rem; accent-color: var(--primary); }
.step-checkbox label { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; cursor: pointer; }
.audit-results { text-align: center; padding: 3rem 2rem; display: none; }
.audit-results.show { display: block; }
.score-circle { width: 10rem; height: 10rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 2rem; border: 4px solid; }
.score-circle.good   { border-color: #22c55e; color: #22c55e; }
.score-circle.medium { border-color: var(--reviews); color: var(--reviews); }
.score-circle.bad    { border-color: var(--fire); color: var(--fire); }
.score-circle .score-num { font-size: 3rem; font-weight: 800; line-height: 1; }
.score-circle .score-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.audit-results h2 { font-size: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; margin-bottom: 1rem; }
.audit-results > p { font-size: 1.125rem; color: var(--muted-foreground); font-weight: 500; margin-bottom: 2rem; }
.audit-result-reco { background: var(--card); border: 1px solid var(--border); padding: 2rem; text-align: left; margin-bottom: 2rem; }
.audit-result-reco h3 { font-size: 1rem; font-weight: 800; text-transform: uppercase; margin-bottom: 1rem; }
.audit-result-reco ul { display: flex; flex-direction: column; gap: 0.75rem; }
.audit-result-reco ul li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; font-weight: 600; }
.audit-result-reco ul li svg { width: 1.25rem; height: 1.25rem; color: var(--primary); flex-shrink: 0; }
.audit-results .result-ctas { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
@media (min-width: 640px) { .audit-results .result-ctas { flex-direction: row; } }

/* === MAINTENANCE PAGE === */
.maintenance-hero { padding: 5rem 0; background: var(--muted); }
@media (min-width: 1024px) { .maintenance-hero { padding: 8rem 0; } }
.maintenance-hero-inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.maintenance-hero-inner h1 { font-size: 2.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .maintenance-hero-inner h1 { font-size: 3.75rem; } }
.maintenance-hero-inner p { font-size: 1.25rem; color: var(--muted-foreground); font-weight: 500; line-height: 1.625; }

.maintenance-plans { padding: 5rem 0; }
@media (min-width: 1024px) { .maintenance-plans { padding: 8rem 0; } }
.plans-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 4rem; }
@media (min-width: 640px) { .plans-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .plans-grid { grid-template-columns: 1fr 1fr 1fr; } }

.plan-card { background: var(--card); border: 1px solid var(--border); display: flex; flex-direction: column; transition: all 200ms; }
.plan-card:hover { border-color: var(--primary); box-shadow: var(--shadow-neo); transform: translateY(-4px); }
.plan-card.plan-featured { border: 2px solid var(--foreground); background: #fff; }
.plan-card.plan-featured:hover { border-color: var(--primary); }
.plan-body { padding: 2rem; flex: 1; }
.plan-body h3 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; margin-bottom: 0.75rem; }
.plan-body > p { color: var(--muted-foreground); font-weight: 500; line-height: 1.625; margin-bottom: 2rem; }
.plan-features { display: flex; flex-direction: column; gap: 0.875rem; }
.plan-features li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; font-weight: 500; }
.plan-features li svg { color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.plan-footer { padding: 1.5rem 2rem; border-top: 1px solid var(--border); }
.plan-price { font-size: 1.5rem; font-weight: 800; color: var(--primary); margin-bottom: 1rem; }
.plan-featured .plan-footer { border-top-color: var(--border); }

.maintenance-benefits { padding: 5rem 0; background: var(--muted); }
@media (min-width: 1024px) { .maintenance-benefits { padding: 8rem 0; } }
.benefits-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-top: 4rem; }
@media (min-width: 640px) { .benefits-grid { grid-template-columns: 1fr 1fr 1fr; } }
.benefit-block { text-align: center; }
.benefit-icon { width: 4rem; height: 4rem; background: rgba(255,215,0,0.15); border: 1px solid var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: var(--primary); }
.benefit-block h3 { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 0.75rem; }
.benefit-block p { color: var(--muted-foreground); font-weight: 500; line-height: 1.625; }

.maintenance-sla { padding: 5rem 0; }
@media (min-width: 1024px) { .maintenance-sla { padding: 8rem 0; } }
.sla-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .sla-grid { grid-template-columns: 1fr 1fr; } }
.sla-left h2 { font-size: 1.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .sla-left h2 { font-size: 2.25rem; } }
.sla-left > p { color: var(--muted-foreground); font-weight: 500; line-height: 1.625; margin-bottom: 2rem; }
.sla-items { display: flex; flex-direction: column; gap: 1.5rem; }
.sla-item { display: flex; align-items: flex-start; gap: 1rem; }
.sla-icon { width: 3rem; height: 3rem; background: rgba(255,215,0,0.15); border: 1px solid var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); }
.sla-label { font-weight: 700; font-size: 1rem; display: block; margin-bottom: 0.25rem; }
.sla-desc { font-size: 0.875rem; color: var(--muted-foreground); font-weight: 500; }

.sla-contact-box { background: var(--primary); color: #000; padding: 2.5rem; }
.sla-contact-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.sla-contact-header h3 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; }
.sla-contact-box > p { font-weight: 500; line-height: 1.625; margin-bottom: 2rem; opacity: 0.85; }
.sla-contact-info { display: flex; flex-direction: column; gap: 1rem; }
.sla-contact-row { display: flex; flex-direction: column; gap: 0.25rem; }
.sla-contact-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }
.sla-contact-value { font-size: 1.125rem; font-weight: 800; color: #000; text-decoration: none; }
.sla-contact-value:hover { text-decoration: underline; }

.maintenance-cta { padding: 5rem 0; background: #000; color: #fff; text-align: center; }
.maintenance-cta h2 { font-size: 1.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .maintenance-cta h2 { font-size: 2.25rem; } }
.maintenance-cta p { font-size: 1.125rem; color: #9CA3AF; font-weight: 500; line-height: 1.625; max-width: 40rem; margin: 0 auto 2.5rem; }
.maintenance-cta .btn { display: inline-flex; }

/* === BLOG PAGE === */
.blog-hero { background: #000; color: #fff; padding: 5rem 0; border-bottom: 4px solid var(--primary); }
@media (min-width: 1024px) { .blog-hero { padding: 8rem 0; } }
.blog-hero-inner { text-align: center; max-width: 56rem; margin: 0 auto; }
.blog-hero-inner h1 { font-size: 2.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .blog-hero-inner h1 { font-size: 3.75rem; } }
.blog-hero-inner p { font-size: 1.25rem; color: #D1D5DB; font-weight: 500; line-height: 1.625; }

.blog-list { padding: 5rem 0; }
@media (min-width: 1024px) { .blog-list { padding: 8rem 0; } }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: 1fr 1fr 1fr; } }

.blog-card { background: var(--card); border: 1px solid var(--border); display: flex; flex-direction: column; transition: all 200ms; }
.blog-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: 4px 4px 0px 0px var(--primary); }
.blog-card-img { display: block; aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--border); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-img-placeholder { background: #ddd; display: flex; align-items: center; justify-content: center; }
.img-placeholder-inner { color: #999; font-family: var(--font-heading); font-weight: 800; font-size: 4rem; }
.blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.blog-cat { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); }
.blog-date { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.blog-card-title { font-size: 1.125rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; margin-bottom: 0.75rem; line-height: 1.3; }
.blog-card-title a { color: inherit; transition: color 150ms; }
.blog-card-title a:hover { color: var(--primary); }
.blog-card-excerpt { color: var(--muted-foreground); font-weight: 500; font-size: 0.875rem; line-height: 1.625; flex: 1; margin-bottom: 1.5rem; }
.blog-read-more { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #000; transition: color 150ms; margin-top: auto; }
.blog-read-more:hover { color: var(--primary); }
.blog-empty { text-align: center; padding: 5rem 0; }
.blog-empty h3 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 1rem; }
.blog-empty p { color: var(--muted-foreground); font-weight: 500; }
.blog-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 4rem; }
.blog-pagination .page-numbers { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--border); font-weight: 700; font-size: 0.875rem; color: var(--foreground); transition: all 150ms; }
.blog-pagination .page-numbers:hover { border-color: #000; background: #000; color: #fff; }
.blog-pagination .page-numbers.current { background: #000; color: #fff; border-color: #000; }

/* === SINGLE ARTICLE === */
.single-hero-img { width: 100%; height: 40vh; position: relative; background: #000; overflow: hidden; }
@media (min-width: 1024px) { .single-hero-img { height: 60vh; } }
.single-hero-bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.single-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,1), transparent); }

.single-article-wrap { max-width: 64rem; margin: -8rem auto 0; position: relative; z-index: 10; background: #fff; padding: 2.5rem; border: 2px solid var(--foreground); box-shadow: 0 20px 40px rgba(0,0,0,0.1); margin-bottom: 5rem; }
@media (min-width: 1024px) { .single-article-wrap { padding: 4rem; } }

.single-back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); margin-bottom: 2rem; transition: color 150ms; }
.single-back-link:hover { color: var(--primary); }
.single-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.single-cat { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; background: rgba(255,215,0,0.15); color: var(--primary); padding: 0.25rem 0.75rem; }
.single-date { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.single-title { font-size: 1.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 2.5rem; line-height: 1.1; }
@media (min-width: 1024px) { .single-title { font-size: 2.5rem; } }
.single-content { font-size: 1.0625rem; line-height: 1.75; color: #333; }
.single-content h2 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; margin: 2.5rem 0 1rem; }
.single-content h3 { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; margin: 2rem 0 0.75rem; }
.single-content p { margin-bottom: 1.5rem; }
.single-content ul, .single-content ol { margin: 0 0 1.5rem 1.5rem; }
.single-content li { margin-bottom: 0.5rem; }
.single-content blockquote { border-left: 4px solid var(--primary); padding-left: 1.5rem; font-style: italic; margin: 2rem 0; font-size: 1.125rem; color: var(--muted-foreground); }
.single-content img { max-width: 100%; height: auto; margin: 2rem 0; border: 1px solid var(--border); }
.single-content a { color: var(--primary); font-weight: 600; text-decoration: underline; }
.single-share { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.single-share-label { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.single-share-btns { display: flex; gap: 0.75rem; }
.btn-social { background: #fff; color: #000; border: 1px solid #000; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5rem 0.75rem; border-radius: 0; transition: all 150ms; }
.btn-social:hover { background: #496592; color: #fff; }

/* === HEADER: cart + admin link === */
.header-cart-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: #fff; background: transparent; border: none; cursor: pointer; transition: color 150ms; }
.header-cart-btn:hover { color: var(--primary); }
.header-cart-btn svg { width: 1.5rem; height: 1.5rem; }
.cart-badge { position: absolute; top: 0; right: 0; background: var(--primary); color: #000; font-size: 0.625rem; font-weight: 800; width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #000; }
.header-admin-link { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #000; display: flex; align-items: center; gap: 0.375rem; transition: opacity 150ms; }
.header-admin-link:hover { opacity: 0.8; }
.header-admin-link svg { width: 0.875rem; height: 0.875rem; }

/* === LOGIN PAGE === */
.login-page { min-height: 100vh; background: #000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-box { width: 100%; max-width: 28rem; background: #fff; padding: 2.5rem; border-top: 4px solid var(--primary); }
.login-icon { width: 4rem; height: 4rem; background: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.login-icon svg { width: 2rem; height: 2rem; color: #000; }
.login-box h1 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; text-align: center; margin-bottom: 0.5rem; }
.login-box .login-sub { text-align: center; color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; margin-bottom: 2rem; }
.login-error { background: #fef2f2; border: 1px solid #ef4444; color: #dc2626; padding: 0.875rem 1rem; margin-bottom: 1.5rem; font-size: 0.875rem; font-weight: 700; }
.login-form { display: flex; flex-direction: column; gap: 1.5rem; }
.login-field { display: flex; flex-direction: column; gap: 0.5rem; }
.login-field label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #000; }
.login-field input { height: 3rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: 0; font-size: 1rem; font-family: var(--font-body); outline: none; transition: border-color 150ms; width: 100%; }
.login-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(255,215,0,0.2); }
.login-submit { height: 3.5rem; background: var(--primary); color: #000; border: none; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; cursor: pointer; transition: all 150ms; }
.login-submit:hover { background: #000; color: #fff; }
.login-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.login-back { display: block; text-align: center; margin-top: 2rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); transition: color 150ms; }
.login-back:hover { color: #000; }

/* === ADMIN LAYOUT === */
.admin-wrap { min-height: 100vh; background: #f5f5f5; display: flex; }
.admin-sidebar { width: 250px; background: #000; color: #fff; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transition: transform 300ms; }
.admin-sidebar-logo { padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.admin-logo-badge { width: 2rem; height: 2rem; background: var(--primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 0.75rem; color: #000; }
.admin-sidebar-logo span { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; }
.admin-nav { flex: 1; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; }
.admin-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #9CA3AF; text-decoration: none; transition: all 150ms; }
.admin-nav-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.admin-nav-item.active { background: var(--primary); color: #000; }
.admin-nav-item svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.admin-sidebar-footer { padding: 1rem; border-top: 1px solid rgba(255,255,255,0.1); }
.admin-logout-btn { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; width: 100%; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #9CA3AF; background: transparent; border: none; cursor: pointer; text-align: left; transition: all 150ms; font-family: var(--font-body); }
.admin-logout-btn:hover { background: #ef4444; color: #fff; }
.admin-main { flex: 1; margin-left: 250px; display: flex; flex-direction: column; min-height: 100vh; }
.admin-topbar { background: #fff; border-bottom: 1px solid var(--border); height: 4rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; position: sticky; top: 0; z-index: 40; }
.admin-topbar-title { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; }
.admin-user-info { display: flex; align-items: center; gap: 0.75rem; }
.admin-user-text { text-align: right; }
.admin-user-name { font-size: 0.875rem; font-weight: 700; }
.admin-user-email { font-size: 0.75rem; color: var(--muted-foreground); }
.admin-user-avatar { width: 2.5rem; height: 2.5rem; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; font-family: var(--font-heading); }
.admin-content { flex: 1; padding: 2rem; }
@media (min-width: 1024px) { .admin-content { padding: 2.5rem; } }
@media (max-width: 767px) {
  .admin-sidebar { transform: translateX(-100%); }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0; }
}
.admin-mobile-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 0.5rem; }
@media (max-width: 767px) { .admin-mobile-toggle { display: flex; align-items: center; justify-content: center; } }
.admin-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; }
.admin-overlay.open { display: block; }

/* Admin dashboard cards */
.admin-stat-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .admin-stat-grid { grid-template-columns: 1fr 1fr 1fr; } }
.admin-stat-card { background: #fff; border: 1px solid var(--border); padding: 1.5rem; }
.admin-stat-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; }
.admin-stat-value { font-size: 2.5rem; font-weight: 800; font-family: var(--font-heading); }
.admin-section-title { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; margin-bottom: 1.5rem; }
.admin-table-wrap { background: #fff; border: 1px solid var(--border); overflow: hidden; margin-bottom: 2rem; }
.admin-table-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); background: rgba(235,235,235,0.3); display: flex; align-items: center; justify-content: space-between; }
.admin-table-header h3 { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); border-bottom: 1px solid var(--border); background: rgba(235,235,235,0.2); }
.admin-table td { padding: 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(235,235,235,0.2); }
.admin-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.admin-badge-published { background: #dcfce7; color: #15803d; }
.admin-badge-draft { background: var(--muted); color: var(--muted-foreground); }
.admin-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--border); background: transparent; cursor: pointer; font-family: var(--font-body); transition: all 150ms; text-decoration: none; color: var(--foreground); }
.admin-btn:hover { background: #000; color: #fff; border-color: #000; }
.admin-btn-primary { background: var(--primary); color: #000; border-color: var(--primary); }
.admin-btn-primary:hover { background: #000; color: #fff; border-color: #000; }
.admin-btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; }
.admin-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.admin-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.6875rem; }
.admin-search-bar { background: #fff; border: 1px solid var(--border); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.admin-search-bar input { flex: 1; height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border); font-size: 0.875rem; font-family: var(--font-body); outline: none; max-width: 24rem; }
.admin-search-bar input:focus { border-color: var(--primary); }
.admin-form-wrap { background: #fff; border: 1px solid var(--border); padding: 2rem; }
.admin-form-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.admin-form-field label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.admin-form-field input, .admin-form-field select, .admin-form-field textarea { padding: 0 1rem; border: 1px solid var(--border); font-size: 0.9375rem; font-family: var(--font-body); outline: none; transition: border-color 150ms; width: 100%; appearance: none; }
.admin-form-field input, .admin-form-field select { height: 3rem; }
.admin-form-field textarea { padding: 0.875rem 1rem; min-height: 12rem; resize: vertical; }
.admin-form-field input:focus, .admin-form-field select:focus, .admin-form-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(255,215,0,0.2); }
.admin-form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .admin-form-row { grid-template-columns: 1fr 1fr; } }
.admin-confirm-dialog { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.admin-confirm-box { background: #fff; border: 2px solid #000; padding: 2rem; max-width: 28rem; width: 100%; }
.admin-confirm-box h3 { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; color: #ef4444; margin-bottom: 1rem; }
.admin-confirm-box p { color: var(--muted-foreground); font-weight: 500; line-height: 1.625; margin-bottom: 2rem; }
.admin-confirm-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }

/* ============================================================
   PAGE PRODUITS — pixel-perfect ProductsPage.jsx
   ============================================================ */

/* ---- Hero: bg-black text-white py-20 md:py-32 border-b-4 border-primary relative overflow-hidden ---- */
.products-hero {
  position: relative;
  background: #000;
  color: #fff;
  padding: 5rem 0;
  border-bottom: 4px solid var(--primary);
  overflow: hidden;
}
@media (min-width: 768px) { .products-hero { padding: 8rem 0; } }

/* absolute inset-0 opacity-20 pointer-events-none */
.products-hero-bg { position: absolute; inset: 0; opacity: 0.2; pointer-events: none; }
.products-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* bg-gradient-to-t from-black to-transparent */
.products-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, #000 0%, transparent 100%);
}

/* container max-w-4xl text-center relative z-10 */
.products-hero-inner { position: relative; z-index: 10; max-width: 56rem; margin: 0 auto; text-align: center; }

/* Package icon w-16 h-16 text-primary mx-auto mb-6 */
.products-hero-icon { width: 4rem; height: 4rem; color: var(--primary); margin: 0 auto 1.5rem; display: block; }

/* text-4xl md:text-6xl font-extrabold uppercase tracking-tighter mb-6 text-balance */
.products-hero-title {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
@media (min-width: 768px) { .products-hero-title { font-size: 3.75rem; } }

/* text-xl text-gray-300 font-medium mb-10 leading-relaxed text-balance */
.products-hero-desc {
  font-size: 1.25rem;
  color: #d1d5db;
  font-weight: 500;
  line-height: 1.625;
  margin-bottom: 2.5rem;
  text-wrap: balance;
}

/* h-14 px-8 rounded-none bg-primary text-black hover:bg-white font-bold uppercase tracking-widest */
.products-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  padding: 0 2rem;
  background: var(--primary);
  color: #000;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.products-hero-cta:hover { background: #fff; color: #000; }

/* ---- Filter bar: py-12 bg-muted/30 border-b border-border sticky top-20 z-40 backdrop-blur-md ---- */
.products-filter {
  padding: 3rem 0;
  background: rgba(235,235,235,0.3);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 5rem;                         /* sous le header (5rem = 80px) — ajuste si ton header a une autre hauteur */
  z-index: 40;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* flex flex-col md:flex-row justify-between items-center gap-6 */
.products-filter-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 768px) { .products-filter-row { flex-direction: row; } }

/* Tabs: flex flex-wrap gap-2 */
.products-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; }
@media (min-width: 768px) { .products-tabs { width: auto; } }

/* h-10 rounded-none font-bold uppercase tracking-widest text-xs border, inactive: bg-transparent border-border text-muted-foreground */
.products-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 150ms;
}
.products-tab svg { width: 1rem; height: 1rem; }
.products-tab:hover { border-color: #000; color: #000; }
/* active: bg-black text-white border-black */
.products-tab.active { background: #000; color: #fff; border-color: #000; }

/* Search wrap: relative w-full md:w-96 */
.products-search-wrap { position: relative; width: 100%; }
@media (min-width: 768px) { .products-search-wrap { width: 24rem; } }

/* Search icon absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground */
.products-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted-foreground);
  pointer-events: none;
}
/* pl-10 h-10 rounded-none border-black focus-visible:ring-primary */
.products-search-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem 0 2.5rem;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  outline: none;
  transition: box-shadow 150ms;
}
.products-search-input:focus { box-shadow: 0 0 0 2px rgba(255,215,0,0.5); }

/* ---- Grid: py-16 md:py-24 ---- */
.products-grid-section { padding: 4rem 0; }
@media (min-width: 768px) { .products-grid-section { padding: 6rem 0; } }

/* grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 */
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px)  { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card: group flex flex-col bg-card industrial-border hover:border-primary hover:shadow-[8px_8px_0px_0px_hsl(var(--primary))] hover:-translate-y-1 transition-all duration-200 */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover {
  border-color: var(--primary);
  box-shadow: 4px 4px 0px 0px var(--primary);
  transform: translateY(-4px);
}

/* Image wrap: aspect-square w-full overflow-hidden border-b border-border relative bg-white p-4 */
.product-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 1rem;
  overflow: hidden;
}
/* group-hover:scale-105 transition-transform duration-500 + object-contain */
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 500ms;
}
.product-card:hover .product-card-img img { transform: scale(1.05); }

/* Badge absolute top-4 left-4 rounded-none bg-black text-white font-bold uppercase tracking-widest text-[10px] z-10 + px-2.5 py-0.5 par défaut shadcn Badge */
.product-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.125rem 0.625rem;
  line-height: 1.5;
}

/* Body: p-6 flex flex-col flex-1 */
.product-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* h3 font-extrabold text-lg uppercase tracking-tight mb-2 line-clamp-2 */
.product-card-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* p text-sm text-muted-foreground font-medium mb-4 line-clamp-2 flex-1 */
.product-card-desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* font-bold text-primary text-lg mb-6 */
.product-card-price {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

/* flex flex-col gap-3 mt-auto */
.product-card-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: auto; }

/* w-full rounded-none bg-primary text-black hover:bg-black hover:text-white font-bold uppercase tracking-widest h-12 */
.product-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 3rem;
  background: var(--primary);
  color: #000;
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.product-card-cta:hover { background: #000; color: #fff; }
.product-card-cta svg { width: 1rem; height: 1rem; }

/* Empty state: text-center py-20 */
.products-empty { text-align: center; padding: 5rem 0; }
.products-empty svg {
  width: 4rem; height: 4rem;
  color: var(--muted-foreground);
  margin: 0 auto 1rem;
  opacity: 0.5;
  display: block;
}
.products-empty h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}
.products-empty p { color: var(--muted-foreground); }

/* ============================================================
   PAGE LOGIN — pixel-perfect LoginPage.jsx
   ============================================================ */
.login-page { background: #000; min-height: 100vh; display: flex; }
.login-wrap { display: flex; align-items: center; justify-content: center; padding: 1rem; width: 100%; min-height: 100vh; }

/* w-full max-w-md bg-white p-8 rounded-none border-t-4 border-primary */
.login-card {
  width: 100%;
  max-width: 28rem;
  background: #fff;
  padding: 2rem;
  border-top: 4px solid var(--primary);
}

/* flex flex-col items-center mb-8 */
.login-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; }
/* w-16 h-16 bg-primary flex items-center justify-center mb-4 */
.login-icon {
  width: 4rem; height: 4rem;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #000;
}
.login-icon svg { width: 2rem; height: 2rem; }
/* text-2xl font-extrabold uppercase tracking-tight text-center */
.login-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  text-align: center;
}
/* text-muted-foreground text-sm font-medium mt-2 */
.login-subtitle { color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; margin-top: 0.5rem; text-align: center; }

/* bg-destructive/10 border border-destructive text-destructive px-4 py-3 mb-6 text-sm font-bold */
.login-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  color: #ef4444;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
}

/* space-y-6 → gap entre les champs */
.login-form { display: flex; flex-direction: column; gap: 1.5rem; }
/* space-y-2 */
.login-field { display: flex; flex-direction: column; gap: 0.5rem; }
/* font-bold uppercase text-xs tracking-widest */
.login-label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #000; }
/* h-12 rounded-none border-black */
.login-input {
  height: 3rem;
  padding: 0 0.75rem;
  border: 1px solid #000;
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  outline: none;
  transition: box-shadow 150ms;
  width: 100%;
}
.login-input:focus { box-shadow: 0 0 0 2px rgba(255,215,0,0.5); }

/* relative wrapper for password input */
.login-pass-wrap { position: relative; }
.login-pass-wrap .login-input { padding-right: 2.75rem; }
/* absolute right-3 top-1/2 -translate-y-1/2 */
.login-pass-toggle {
  position: absolute; right: 0.75rem; top: 50%;
  transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer;
  color: var(--muted-foreground);
  display: flex; align-items: center; padding: 0;
}
.login-pass-toggle:hover { color: #000; }
.login-pass-toggle svg { width: 1.25rem; height: 1.25rem; }

/* w-full h-14 bg-primary text-black hover:bg-black hover:text-white */
.login-submit {
  width: 100%;
  height: 3.5rem;
  background: var(--primary);
  color: #000;
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  display: inline-flex; align-items: center; justify-content: center;
}
.login-submit:hover { background: #000; color: #fff; }
.login-submit:disabled { opacity: 0.7; cursor: wait; }
.login-spinner { width: 1.25rem; height: 1.25rem; animation: login-spin 0.8s linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }

/* mt-8 text-center */
.login-footer { margin-top: 2rem; text-align: center; }
.login-back {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color 150ms;
}
.login-back:hover { color: #000; }

/* ============================================================
   PAGE MAINTENANCE
   ============================================================ */
.maint-page { background: #fff; }

/* Hero */
.maint-hero {
  padding: 5rem 0;
  background: linear-gradient(180deg, var(--muted) 0%, #fff 100%);
}
@media (min-width: 1024px) { .maint-hero { padding: 7rem 0 6rem; } }
.maint-hero-inner { max-width: 64rem; margin: 0 auto; text-align: center; }
.maint-hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  background: rgba(255,215,0,0.1);
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--primary);
}
.maint-hero-inner h1 {
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
@media (min-width: 768px)  { .maint-hero-inner h1 { font-size: 2.75rem; } }
@media (min-width: 1024px) { .maint-hero-inner h1 { font-size: 3.5rem; } }
.maint-hero-inner > p {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  font-weight: 500;
  line-height: 1.7;
  max-width: 56rem;
  margin: 0 auto 2.5rem;
  text-wrap: balance;
}
.maint-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}
@media (min-width: 640px) { .maint-hero-ctas { flex-direction: row; } }

/* Pillars sticky nav */
.maint-pillars-nav {
  background: #000;
  border-top: 1px solid rgba(255,215,0,0.2);
  border-bottom: 1px solid rgba(255,215,0,0.2);
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 0.75rem 0;
}
.maint-pillars-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
}
.maint-pillars-nav a {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: all 150ms;
}
.maint-pillars-nav a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* Pillar section */
.maint-pillar {
  padding: 5rem 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 5rem;
}
@media (min-width: 1024px) { .maint-pillar { padding: 7rem 0; } }
.maint-pillar.alt { background: var(--muted); }

.maint-pillar-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) { .maint-pillar-inner { grid-template-columns: 5rem 1fr; gap: 4rem; } }

.maint-pillar-icon {
  width: 5rem;
  height: 5rem;
  background: var(--primary);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000;
  flex-shrink: 0;
}
.maint-pillar-icon svg { width: 2.5rem; height: 2.5rem; }

.maint-pillar-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.maint-pillar-content h2 {
  font-size: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  line-height: 1.1;
}
@media (min-width: 1024px) { .maint-pillar-content h2 { font-size: 2.25rem; } }
.maint-pillar-lead {
  font-size: 1.125rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 1.25rem;
}
.maint-pillar-desc {
  font-size: 1rem;
  color: var(--muted-foreground);
  font-weight: 500;
  line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 60rem;
}
.maint-pillar-bullets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}
@media (min-width: 768px) { .maint-pillar-bullets { grid-template-columns: 1fr 1fr; } }
.maint-pillar-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
}
.maint-pillar-bullets li svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 3px;
}

/* Formules */
.maint-formulas { padding: 5rem 0; background: #000; color: #fff; }
@media (min-width: 1024px) { .maint-formulas { padding: 8rem 0; } }
.maint-formulas .section-header h2 { color: #fff; }
.maint-formulas .section-header p { color: #9CA3AF; }
.maint-formulas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (min-width: 768px)  { .maint-formulas-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .maint-formulas-grid { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; } }

.maint-formula {
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 200ms, transform 200ms;
}
.maint-formula:hover { border-color: var(--primary); transform: translateY(-4px); }
.maint-formula.featured {
  border: 2px solid var(--primary);
  background: linear-gradient(180deg, #1a1a0a 0%, #111 100%);
}
.maint-formula-badge {
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  background: var(--primary);
  color: #000;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.375rem 0.75rem;
}
.maint-formula header { padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 1.5rem; }
.maint-formula header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
  color: #fff;
}
.maint-formula-target { font-size: 0.875rem; color: #9CA3AF; font-weight: 500; }
.maint-formula ul { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; margin-bottom: 2rem; }
.maint-formula ul li {
  font-size: 0.9375rem;
  color: #D1D5DB;
  font-weight: 500;
  padding-left: 1.25rem;
  position: relative;
}
.maint-formula ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 0.5rem; height: 0.5rem;
  background: var(--primary);
}
.maint-formula-foot { display: flex; flex-direction: column; gap: 1rem; }
.maint-formula-price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--primary);
}
.maint-formula-foot .btn { width: 100%; }

/* FAQ */
.maint-faq { padding: 5rem 0; }
@media (min-width: 1024px) { .maint-faq { padding: 7rem 0; } }
.maint-faq-list { max-width: 56rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.maint-faq-list details {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
  transition: border-color 150ms;
}
.maint-faq-list details[open] { border-color: var(--primary); }
.maint-faq-list summary {
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
.maint-faq-list summary::-webkit-details-marker { display: none; }
.maint-faq-list summary::after {
  content: '+';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--primary);
  transition: transform 200ms;
}
.maint-faq-list details[open] summary::after { content: '−'; }
.maint-faq-list details p {
  margin-top: 1rem;
  color: var(--muted-foreground);
  font-weight: 500;
  line-height: 1.7;
  font-size: 0.9375rem;
}

/* CTA finale */
.maint-cta { padding: 5rem 0; background: var(--primary); color: #000; text-align: center; }
.maint-cta h2 {
  font-size: 1.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
  text-wrap: balance;
}
@media (min-width: 1024px) { .maint-cta h2 { font-size: 2.5rem; } }
.maint-cta p { font-size: 1.125rem; font-weight: 500; margin-bottom: 2rem; }
.maint-cta-actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
@media (min-width: 640px) { .maint-cta-actions { flex-direction: row; } }
.maint-cta-actions .btn { background: #000; color: #fff; }
.maint-cta-actions .btn:hover { background: #fff; color: #000; }

.mobile-admin-link {
  display: block;
  padding-top: 1.5rem;
  color: #959ca8;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  border-top: 1px solid rgba(255,255,255,0.1);
}
/* === 404 === */
.page-404 { display: flex; flex: 1; align-items: center; justify-content: center; flex-direction: column; padding: 8rem 1rem; text-align: center; }
.page-404 h1 { font-size: 7rem; font-weight: 800; margin-bottom: 1.5rem; }
.page-404 p { font-size: 1.25rem; color: var(--muted-foreground); margin-bottom: 2rem; font-weight: 500; }

[hidden] { display: none !important; }