/* ==========================================================================
   NOSTAL CARS PUB — style.css
   Charte graphique "Tech Innovation"
   Concessionnaire automobile neuf & occasion — Vandœuvre-lès-Nancy
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES — DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Couleurs de marque — vives, univers automobile / tableau de bord */
  --nc-blue:        #0052FF;   /* Bleu électrique — primaire, technologie, neuf */
  --nc-blue-dark:    #0038B8;
  --nc-blue-light:   #E8F0FF;
  --nc-red:          #E4032E;  /* Rouge course — call-to-action, urgence, promo */
  --nc-red-dark:     #B8021F;
  --nc-red-light:    #FDEAEC;
  --nc-green:        #00C853;  /* Vert — validation, éco-mobilité, occasion certifiée */
  --nc-green-dark:   #00A344;
  --nc-green-light:  #E4FAEC;

  /* Neutres */
  --nc-dark:         #0B1120;  /* Fond sombre "cockpit" */
  --nc-dark-2:       #131B2E;
  --nc-dark-3:       #1D2740;
  --nc-gray-900:     #1A1F2B;
  --nc-gray-700:     #4A5568;
  --nc-gray-500:     #8A94A6;
  --nc-gray-300:     #D6DAE1;
  --nc-gray-100:     #F4F6F9;
  --nc-white:        #FFFFFF;
  --nc-placeholder:  #D9DDE3;  /* Fond gris — réservé aux images en attente */

  /* Typographie — imposée : Arial Narrow */
  --nc-font: 'Arial Narrow', Arial, Helvetica, sans-serif;

  /* Échelle typographique */
  --nc-fs-xs:   0.75rem;
  --nc-fs-sm:   0.875rem;
  --nc-fs-base: 1rem;
  --nc-fs-md:   1.125rem;
  --nc-fs-lg:   1.375rem;
  --nc-fs-xl:   1.75rem;
  --nc-fs-2xl:  2.25rem;
  --nc-fs-3xl:  3rem;
  --nc-fs-4xl:  4rem;

  /* Rayons, ombres, transitions */
  --nc-radius-sm: 4px;
  --nc-radius:    10px;
  --nc-radius-lg: 18px;
  --nc-shadow-sm: 0 2px 8px rgba(11,17,32,.08);
  --nc-shadow:    0 8px 30px rgba(11,17,32,.12);
  --nc-shadow-lg: 0 20px 60px rgba(11,17,32,.20);
  --nc-transition: .25s cubic-bezier(.4,0,.2,1);

  /* Grille */
  --nc-container: 1280px;
  --nc-header-h: 56px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 130px; }
body{
  margin:0;
  font-family: var(--nc-font);
  font-size: var(--nc-fs-base);
  color: var(--nc-gray-900);
  background: var(--nc-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: var(--nc-font); cursor:pointer; }
input, select, textarea{ font-family: var(--nc-font); }
::selection{ background: var(--nc-blue); color:#fff; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--nc-gray-100); }
::-webkit-scrollbar-thumb{ background: var(--nc-gray-500); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--nc-blue); }

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Focus clavier visible */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--nc-blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6{
  font-family: var(--nc-font);
  font-weight: 700;
  line-height: 1.15;
  color: var(--nc-dark);
  margin: 0 0 .6em;
}
h1{ font-size: var(--nc-fs-4xl); font-weight:900; letter-spacing:-.5px; }
h2{ font-size: var(--nc-fs-3xl); font-weight:900; letter-spacing:-.3px; }
h3{ font-size: var(--nc-fs-xl); font-weight:700; }
h4{ font-size: var(--nc-fs-md); font-weight:700; }
p{ line-height:1.7; color: var(--nc-gray-700); margin:0 0 1em; }

.nc-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size: var(--nc-fs-xs);
  font-weight:700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--nc-blue);
  margin-bottom: 1rem;
}
.nc-eyebrow::before{
  content:"";
  width:22px; height:3px;
  background: var(--nc-red);
  display:inline-block;
}
.nc-eyebrow.is-light{ color: var(--nc-white); }

.nc-section-title{ max-width:640px; }
.nc-section-title.center{ margin-inline:auto; text-align:center; }
.nc-lead{ font-size: var(--nc-fs-md); color: var(--nc-gray-700); }

.text-blue{ color: var(--nc-blue) !important; }
.text-red{ color: var(--nc-red) !important; }
.text-green{ color: var(--nc-green) !important; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.nc-container{
  width:100%;
  max-width: var(--nc-container);
  margin-inline:auto;
  padding-inline: 24px;
}
.nc-section{ padding: 90px 0; position:relative; }
.nc-section.is-tight{ padding: 60px 0; }
.nc-section.bg-light{ background: var(--nc-gray-100); }
.nc-section.bg-dark{ background: var(--nc-dark); color:#fff; }
.nc-section.bg-dark h2, .nc-section.bg-dark h3, .nc-section.bg-dark h4{ color:#fff; }
.nc-section.bg-dark p{ color: rgba(255,255,255,.65); }

.nc-grid{ display:grid; gap:28px; }
.nc-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
.nc-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.nc-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
@media(max-width:991px){
  .nc-grid.cols-3, .nc-grid.cols-4{ grid-template-columns: repeat(2,1fr); }
}
@media(max-width:575px){
  .nc-grid.cols-2, .nc-grid.cols-3, .nc-grid.cols-4{ grid-template-columns: 1fr; }
}

/* Image / visuel en attente — fond gris imposé */
.nc-placeholder{
  background: repeating-linear-gradient(135deg, var(--nc-placeholder), var(--nc-placeholder) 10px, #cfd4dc 10px, #cfd4dc 20px);
  display:flex; align-items:center; justify-content:center;
  color: var(--nc-gray-500);
  font-size: var(--nc-fs-sm);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  min-height: 220px;
  border-radius: var(--nc-radius);
  position:relative;
  overflow:hidden;
}
.nc-placeholder i{ font-size:1.6rem; margin-right:.5rem; }
.nc-placeholder > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* --------------------------------------------------------------------------
   5. SIGNATURE — LIGNES DE VITESSE / HUD TELEMETRIE
   Élément graphique récurrent inspiré des compteurs et radars de bord
   -------------------------------------------------------------------------- */
.nc-speedlines{
  display:flex;
  height: 6px;
  width:100%;
}
.nc-speedlines span{ flex:1; }
.nc-speedlines span:nth-child(1){ background: var(--nc-blue); }
.nc-speedlines span:nth-child(2){ background: var(--nc-red); }
.nc-speedlines span:nth-child(3){ background: var(--nc-green); }

.nc-divider{
  position:relative;
  height:64px;
  overflow:hidden;
}
.nc-divider svg{ position:absolute; inset:0; width:100%; height:100%; }

/* Cadre "viseur HUD" sur les visuels au survol */
.nc-hud{ position:relative; overflow:hidden; border-radius: var(--nc-radius); }
.nc-hud::before, .nc-hud::after{
  content:"";
  position:absolute;
  width:26px; height:26px;
  border-color: var(--nc-white);
  border-style:solid;
  opacity:0;
  transition: opacity var(--nc-transition), transform var(--nc-transition);
  z-index:2;
  pointer-events:none;
}
.nc-hud::before{ top:10px; left:10px; border-width:2px 0 0 2px; transform:translate(-6px,-6px); }
.nc-hud::after{ bottom:10px; right:10px; border-width:0 2px 2px 0; transform:translate(6px,6px); }
.nc-hud:hover::before, .nc-hud:hover::after{ opacity:1; transform:translate(0,0); }

/* --------------------------------------------------------------------------
   6. BOUTONS — style "angulaire" motorsport
   -------------------------------------------------------------------------- */
.nc-btn{
  --btn-bg: var(--nc-blue);
  --btn-fg: #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding: .95rem 1.9rem;
  font-weight:700;
  font-size: var(--nc-fs-sm);
  text-transform:uppercase;
  letter-spacing:1px;
  border:2px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: transform var(--nc-transition), background var(--nc-transition), box-shadow var(--nc-transition), color var(--nc-transition);
  white-space: nowrap;
}
.nc-btn i{ font-size: .95em; }
.nc-btn:hover{ transform: translateY(-3px); box-shadow: var(--nc-shadow); }
.nc-btn:active{ transform: translateY(0); }

.nc-btn.btn-red{ --btn-bg: var(--nc-red); }
.nc-btn.btn-green{ --btn-bg: var(--nc-green); }
.nc-btn.btn-dark{ --btn-bg: var(--nc-dark); }

.nc-btn.btn-outline{
  background: transparent;
  color: var(--btn-bg);
}
.nc-btn.btn-outline:hover{ background: var(--btn-bg); color:#fff; }

.nc-btn.btn-white{
  --btn-bg:#fff; border-color:#fff; color: var(--nc-dark);
}
.nc-btn.btn-white:hover{ background: var(--nc-red); border-color: var(--nc-red); color:#fff; }

.nc-btn.btn-sm{ padding:.6rem 1.2rem; font-size: var(--nc-fs-xs); }
.nc-btn.btn-block{ width:100%; }
.nc-btn.btn-icon{ padding:.7rem; clip-path:none; border-radius:50%; }

/* --------------------------------------------------------------------------
   7. BADGES — état du véhicule
   -------------------------------------------------------------------------- */
.nc-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .3rem .75rem .3rem .55rem;
  font-size: var(--nc-fs-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0% 100%);
}
.nc-badge.badge-neuf{ background: var(--nc-green); }
.nc-badge.badge-occasion{ background: var(--nc-blue); }
.nc-badge.badge-vendu{ background: var(--nc-gray-700); }
.nc-badge.badge-promo{ background: var(--nc-red); }
.nc-badge.badge-outline{ background:transparent; border:1.5px solid currentColor; color: var(--nc-gray-700); clip-path:none; border-radius: var(--nc-radius-sm); }

/* --------------------------------------------------------------------------
   8. CARTES
   -------------------------------------------------------------------------- */
.nc-card{
  background:#fff;
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow-sm);
  overflow:hidden;
  transition: transform var(--nc-transition), box-shadow var(--nc-transition);
  border: 1px solid var(--nc-gray-300);
}
.nc-card:hover{ transform: translateY(-6px); box-shadow: var(--nc-shadow-lg); border-color: transparent; }

/* Carte véhicule */
.nc-vehicle-card .nc-vehicle-media{ position:relative; height:210px; }
.nc-vehicle-card .nc-vehicle-media .nc-badge{ position:absolute; top:14px; left:0; z-index:2; }
.nc-vehicle-card .nc-fav-btn{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background: rgba(11,17,32,.55);
  color:#fff; display:flex; align-items:center; justify-content:center;
  border:none; transition: background var(--nc-transition), color var(--nc-transition);
}
.nc-fav-btn:hover, .nc-fav-btn.is-active{ background: var(--nc-red); }
.nc-vehicle-card .nc-vehicle-body{ padding: 1.3rem 1.4rem 1.5rem; }
.nc-vehicle-card .nc-vehicle-title{ font-size: var(--nc-fs-md); font-weight:700; margin-bottom:.2rem; }
.nc-vehicle-card .nc-vehicle-sub{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.8rem; }
.nc-vehicle-card .nc-vehicle-price{ font-size: var(--nc-fs-xl); font-weight:900; color: var(--nc-blue); }
.nc-vehicle-card .nc-vehicle-price small{ font-size: var(--nc-fs-xs); font-weight:400; color: var(--nc-gray-500); }
.nc-vehicle-specs{ display:flex; flex-wrap:wrap; gap: .6rem 1rem; margin: 1rem 0; padding-top:1rem; border-top:1px dashed var(--nc-gray-300); }
.nc-vehicle-specs span{ display:flex; align-items:center; gap:.4rem; font-size: var(--nc-fs-xs); color: var(--nc-gray-700); }
.nc-vehicle-specs i{ color: var(--nc-blue); }

/* Carte service / avantage */
.nc-feature-card{ padding: 2rem 1.6rem; text-align:left; }
.nc-feature-card .nc-icon{
  width:60px; height:60px;
  border-radius: var(--nc-radius);
  display:flex; align-items:center; justify-content:center;
  background: var(--nc-blue-light);
  color: var(--nc-blue);
  font-size:1.5rem;
  margin-bottom:1.1rem;
}

/* Statistiques animées (compteurs) */
.nc-stat{ text-align:center; }
.nc-stat .nc-stat-num{ font-size: var(--nc-fs-3xl); font-weight:900; color: var(--nc-blue); line-height:1; }
.nc-stat .nc-stat-label{ font-size: var(--nc-fs-xs); text-transform:uppercase; letter-spacing:1.5px; color: var(--nc-gray-500); margin-top:.4rem; }
.bg-dark .nc-stat .nc-stat-label{ color: rgba(255,255,255,.55); }

/* --------------------------------------------------------------------------
   9. BARRE SUPÉRIEURE (topbar)
   -------------------------------------------------------------------------- */
.nc-topbar{
  background: var(--nc-dark);
  color: rgba(255,255,255,.8);
  font-size: var(--nc-fs-xs);
}
.nc-topbar .nc-container{ display:flex; align-items:center; justify-content:space-between; height:38px; }
.nc-topbar-left, .nc-topbar-right{ display:flex; align-items:center; gap:1.4rem; }
.nc-topbar a{ color: rgba(255,255,255,.8); transition: color var(--nc-transition); }
.nc-topbar a:hover{ color: var(--nc-green); }
.nc-topbar i{ color: var(--nc-blue); margin-right:.4rem; }
.nc-topbar-social a{ margin-left:.8rem; color:rgba(255,255,255,.6); }
.nc-topbar-social a:hover{ color:#fff; }

/* --------------------------------------------------------------------------
   10. NAVIGATION PRINCIPALE
   -------------------------------------------------------------------------- */
.nc-navbar{
  position: sticky; top:0; z-index: 1000;
  background:#fff;
  border-bottom: 1px solid var(--nc-gray-300);
}
.nc-navbar .nc-container{ display:flex; align-items:center; justify-content:space-between; height: 84px; }

.nc-logo{ display:flex; align-items:center; gap:.6rem; font-weight:900; font-size: var(--nc-fs-lg); color: var(--nc-dark); flex-shrink:1; min-width:0; white-space:nowrap; }
.nc-logo .nc-logo-mark{
  width:40px; height:40px; border-radius:8px;
  background: linear-gradient(135deg, var(--nc-blue), var(--nc-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.nc-logo span{ color: var(--nc-red); }

.nc-nav-links{ display:flex; align-items:center; gap:2rem; }
.nc-nav-links > li{ position:relative; }
.nc-nav-links > li > a{
  display:flex; align-items:center; gap:.35rem;
  font-weight:700; font-size: var(--nc-fs-sm);
  text-transform:uppercase; letter-spacing:.4px;
  padding: 1.6rem 0;
  color: var(--nc-gray-900);
  position:relative;
}
.nc-nav-links > li > a::after{
  content:""; position:absolute; left:0; bottom:14px; height:3px; width:0;
  background: var(--nc-red); transition: width var(--nc-transition);
}
.nc-nav-links > li > a:hover::after, .nc-nav-links > li.active > a::after{ width:100%; }
.nc-nav-links > li > a:hover, .nc-nav-links > li.active > a{ color: var(--nc-blue); }

/* Méga-menu déroulant */
.nc-dropdown{
  position:absolute; top:100%; left:50%; transform:translate(-50%,10px);
  background:#fff; min-width:240px;
  border-radius: var(--nc-radius); box-shadow: var(--nc-shadow-lg);
  padding:.7rem; opacity:0; visibility:hidden; pointer-events:none;
  transition: all var(--nc-transition);
  border-top:3px solid var(--nc-blue);
}
.nc-nav-links > li:hover .nc-dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.nc-dropdown a{ display:flex; align-items:center; gap:.6rem; padding:.65rem .8rem; border-radius:6px; font-size: var(--nc-fs-sm); font-weight:400; text-transform:none; color: var(--nc-gray-700); }
.nc-dropdown a:hover{ background: var(--nc-blue-light); color: var(--nc-blue); }
.nc-dropdown a i{ width:18px; color: var(--nc-blue); }

.nc-nav-actions{ display:flex; align-items:center; gap:1.1rem; flex-shrink:0; }
.nc-nav-icon-btn{ position:relative; font-size:1.15rem; color: var(--nc-gray-900); }
.nc-nav-icon-btn:hover{ color: var(--nc-blue); }
.nc-nav-icon-btn .nc-count{
  position:absolute; top:-9px; right:-11px;
  background: var(--nc-red); color:#fff;
  font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* --------------------------------------------------------------------------
   11. MENU HAMBURGER + OFF-CANVAS MOBILE
   -------------------------------------------------------------------------- */
.nc-burger{
  display:none;
  width:44px; height:44px; flex-shrink:0;
  border:none; border-radius:50%; background:transparent;
  position:relative; z-index:1201;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  transition: background var(--nc-transition);
}
.nc-burger:hover, .nc-burger:focus-visible{ background: var(--nc-gray-100); }
.nc-burger span{
  display:block; width:24px; height:3px; border-radius:3px;
  background: var(--nc-dark);
  transition: transform var(--nc-transition), opacity var(--nc-transition), background var(--nc-transition);
}
.nc-burger.is-active span:nth-child(1){ transform: translateY(9px) rotate(45deg); background: var(--nc-red); }
.nc-burger.is-active span:nth-child(2){ opacity:0; transform:scale(0); }
.nc-burger.is-active span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); background: var(--nc-red); }

.nc-offcanvas-overlay{
  position:fixed; inset:0; background: rgba(11,17,32,.6);
  backdrop-filter: blur(2px);
  z-index:1190; opacity:0; visibility:hidden; transition: opacity var(--nc-transition);
}
.nc-offcanvas-overlay.is-active{ opacity:1; visibility:visible; }

.nc-offcanvas{
  position:fixed; top:0; right:0; height:100%; width:min(340px,86vw);
  background: var(--nc-dark); color:#fff;
  z-index:1200; transform:translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding: 5.5rem 1.6rem 2rem;
  box-shadow: -8px 0 30px rgba(0,0,0,.3);
}
.nc-offcanvas.is-active{ transform:translateX(0); }

.nc-off-search{
  display:flex; align-items:center; gap:.7rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: .8rem 1rem;
  margin-bottom: 1.2rem;
  transition: border-color var(--nc-transition), background var(--nc-transition);
}
.nc-off-search:focus-within{ border-color: var(--nc-blue); background: rgba(255,255,255,.1); }
.nc-off-search i{ color: rgba(255,255,255,.45); font-size:.95rem; }
.nc-off-search input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:#fff; font-size: var(--nc-fs-sm); font-family: inherit;
}
.nc-off-search input::placeholder{ color: rgba(255,255,255,.4); }

.nc-off-quick{ display:flex; gap:.7rem; margin-bottom:1.5rem; }
.nc-off-quick-btn{
  flex:1; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: .9rem .6rem;
  color:#fff; font-size: var(--nc-fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; text-align:center;
  transition: background var(--nc-transition), border-color var(--nc-transition);
}
.nc-off-quick-btn i{ font-size:1.15rem; color: var(--nc-blue); }
.nc-off-quick-btn:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.nc-off-quick-btn .nc-count{ position:absolute; top:6px; right:6px; }

.nc-offcanvas .nc-off-links > li > a{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 0; border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size: var(--nc-fs-sm);
  color:#fff;
}
.nc-offcanvas .nc-off-links a:hover{ color: var(--nc-blue); }
.nc-offcanvas .nc-off-sub{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.nc-offcanvas .nc-off-sub.is-open{ max-height:400px; }
.nc-offcanvas .nc-off-sub a{ padding:.6rem 0 .6rem 1rem; font-weight:400; text-transform:none; color: rgba(255,255,255,.7); font-size:var(--nc-fs-sm); border-bottom:none; }
.nc-offcanvas .nc-off-cta{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.8rem; }
.nc-offcanvas .nc-off-contact{ margin-top:2rem; font-size: var(--nc-fs-sm); color: rgba(255,255,255,.65); }
.nc-offcanvas .nc-off-contact p{ display:flex; gap:.6rem; align-items:center; color: rgba(255,255,255,.75); }
.nc-offcanvas .nc-off-close{
  position:absolute; top:1.4rem; right:1.4rem;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); border:none; color:#fff; font-size:1.1rem;
  transition: background var(--nc-transition), transform var(--nc-transition);
}
.nc-offcanvas .nc-off-close:hover{ background: rgba(255,255,255,.18); transform: rotate(90deg); }

@media (max-width: 991px){
  .nc-nav-links, .nc-topbar{ display:none; }
  .nc-nav-actions .nc-nav-icon-btn{ display:none; }
  .nc-burger{ display:flex; }
  .nc-navbar .nc-container{ height:72px; }
}
@media (max-width: 400px){
  .nc-logo{ font-size: var(--nc-fs-md); }
  .nc-logo .nc-logo-mark{ width:34px; height:34px; font-size:1rem; }
}

/* --------------------------------------------------------------------------
   12. FORMULAIRES
   -------------------------------------------------------------------------- */
.nc-field{ margin-bottom:1.2rem; }
.nc-field label{ display:block; font-size: var(--nc-fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.6px; color: var(--nc-gray-700); margin-bottom:.5rem; }
.nc-input, .nc-select, .nc-textarea{
  width:100%; padding: .85rem 1rem;
  border: 1.5px solid var(--nc-gray-300); border-radius: var(--nc-radius-sm);
  font-size: var(--nc-fs-sm); background:#fff; color: var(--nc-gray-900);
  transition: border-color var(--nc-transition), box-shadow var(--nc-transition);
}
.nc-input:focus, .nc-select:focus, .nc-textarea:focus{
  outline:none; border-color: var(--nc-blue); box-shadow: 0 0 0 4px var(--nc-blue-light);
}
.nc-textarea{ min-height:140px; resize:vertical; }
.nc-form-card{ background:#fff; border-radius: var(--nc-radius-lg); box-shadow: var(--nc-shadow-lg); padding: 2.2rem; }

/* Simulateur / plage de valeurs */
.nc-range{ width:100%; accent-color: var(--nc-blue); }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.nc-footer{ background: var(--nc-dark); color: rgba(255,255,255,.65); padding-top: 80px; }
.nc-footer h5{ color:#fff; font-size: var(--nc-fs-md); font-weight:700; margin-bottom:1.3rem; }
.nc-footer .nc-logo span{ color: var(--nc-green); }
.nc-footer .nc-logo{ color:#fff; }
.nc-footer p{ color: rgba(255,255,255,.55); }
.nc-footer-links a{ display:block; padding: .45rem 0; color: rgba(255,255,255,.65); transition: color var(--nc-transition), transform var(--nc-transition); }
.nc-footer-links a:hover{ color: var(--nc-blue); transform: translateX(4px); }
.nc-footer-contact li{ display:flex; gap:.8rem; margin-bottom:1rem; color: rgba(255,255,255,.65); align-items:flex-start; }
.nc-footer-contact i{ color: var(--nc-red); margin-top:.2rem; }
.nc-footer-social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.nc-footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  transition: all var(--nc-transition);
}
.nc-footer-social a:hover{ background: var(--nc-blue); border-color: var(--nc-blue); transform: translateY(-3px); }

.nc-footer-newsletter{ display:flex; gap:0; margin-top:.5rem; }
.nc-footer-newsletter input{
  flex:1; padding: .8rem 1rem; border:1.5px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05); color:#fff; border-radius: var(--nc-radius-sm) 0 0 var(--nc-radius-sm);
}
.nc-footer-newsletter input::placeholder{ color: rgba(255,255,255,.4); }
.nc-footer-newsletter button{
  border:none; background: var(--nc-blue); color:#fff; padding: 0 1.2rem;
  border-radius: 0 var(--nc-radius-sm) var(--nc-radius-sm) 0;
}
.nc-footer-newsletter button:hover{ background: var(--nc-red); }

.nc-footer-bottom{
  margin-top: 60px; padding: 1.6rem 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--nc-fs-xs);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.nc-footer-bottom a{ color: rgba(255,255,255,.55); }
.nc-footer-bottom a:hover{ color:#fff; }
.nc-footer-legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.nc-footer-badges{ display:flex; gap:1rem; align-items:center; color: rgba(255,255,255,.45); font-size:1.4rem; }

/* --------------------------------------------------------------------------
   14. BANDEAU COOKIES (RGPD)
   -------------------------------------------------------------------------- */
.nc-cookies{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:1300;
  max-width:560px;
  background: var(--nc-dark); color:#fff;
  border-radius: var(--nc-radius-lg);
  box-shadow: var(--nc-shadow-lg);
  padding: 1.6rem 1.7rem;
  transform: translateY(140%);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  border-top: 4px solid var(--nc-blue);
}
.nc-cookies.is-visible{ transform: translateY(0); }
.nc-cookies-icon{ width:44px; height:44px; border-radius:10px; background: var(--nc-blue-light); color: var(--nc-blue); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1rem; }
.nc-cookies h6{ color:#fff; font-weight:700; margin-bottom:.5rem; font-size: var(--nc-fs-md); }
.nc-cookies p{ font-size: var(--nc-fs-sm); color: rgba(255,255,255,.65); margin-bottom:1.2rem; }
.nc-cookies-actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.nc-cookies-actions .nc-btn{ padding:.7rem 1.2rem; font-size: var(--nc-fs-xs); }
.nc-cookies-link{ font-size: var(--nc-fs-xs); color: rgba(255,255,255,.5); text-decoration:underline; align-self:center; }

@media(max-width:575px){
  .nc-cookies{ left:12px; right:12px; bottom:12px; padding:1.3rem; }
}

/* --------------------------------------------------------------------------
   15. BOUTONS FLOTTANTS (retour en haut / WhatsApp)
   -------------------------------------------------------------------------- */
.nc-float-stack{ position:fixed; right:22px; bottom:22px; z-index:900; display:flex; flex-direction:column; gap:.8rem; }
.nc-float-btn{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.3rem; box-shadow: var(--nc-shadow);
  transition: transform var(--nc-transition);
}
.nc-float-btn:hover{ transform: translateY(-4px) scale(1.05); }
.nc-float-btn.wa{ background:#25D366; }
.nc-float-btn.top{ background: var(--nc-blue); opacity:0; visibility:hidden; transform: translateY(10px); }
.nc-float-btn.top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* --------------------------------------------------------------------------
   16. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes nc-pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }
@keyframes nc-blink{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} }
.nc-live-dot{ width:9px; height:9px; border-radius:50%; background: var(--nc-green); display:inline-block; animation: nc-blink 1.4s infinite; }

/* --------------------------------------------------------------------------
   17. RESPONSIVE — AJUSTEMENTS GLOBAUX
   -------------------------------------------------------------------------- */
@media(max-width:991px){
  h1{ font-size: var(--nc-fs-3xl); }
  h2{ font-size: var(--nc-fs-2xl); }
  .nc-section{ padding: 60px 0; }
}
@media(max-width:575px){
  .nc-container{ padding-inline:16px; }
  h1{ font-size: var(--nc-fs-2xl); }
  h2{ font-size: var(--nc-fs-xl); }
  .nc-footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* --------------------------------------------------------------------------
   18. HERO — ACCUEIL
   -------------------------------------------------------------------------- */
.nc-hero{
  position:relative;
  background: linear-gradient(135deg, var(--nc-dark) 0%, var(--nc-dark-2) 55%, var(--nc-dark-3) 100%);
  color:#fff; padding: 70px 0 0; overflow:hidden;
}
.nc-hero::before{
  content:""; position:absolute; top:-120px; right:-120px;
  width:480px; height:480px; border-radius:50%;
  background: radial-gradient(circle, rgba(0,82,255,.35), transparent 70%);
}
.nc-hero::after{
  content:""; position:absolute; bottom:-160px; left:-100px;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(228,3,46,.25), transparent 70%);
}
.nc-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1.05fr .95fr; gap:50px; align-items:center;
  padding-bottom: 70px;
}
.nc-hero h1{ color:#fff; margin-bottom:1.1rem; }
.nc-hero h1 .accent{ color: var(--nc-blue); }
.nc-hero h1 .accent.red{ color: var(--nc-red); }
.nc-hero p.nc-lead{ color: rgba(255,255,255,.7); max-width:520px; }
.nc-hero-badges{ display:flex; gap:1.8rem; margin-top:2.2rem; flex-wrap:wrap; }
.nc-hero-badges div{ display:flex; align-items:center; gap:.6rem; font-size: var(--nc-fs-sm); color: rgba(255,255,255,.75); }
.nc-hero-badges i{ color: var(--nc-green); font-size:1.1rem; }
.nc-hero-cta{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }

.nc-hero-visual{ position:relative; }
.nc-hero-visual .nc-placeholder{ min-height:400px; border-radius: var(--nc-radius-lg); }
.nc-hero-stat-float{
  position:absolute; bottom:-22px; left:-22px;
  background:#fff; color: var(--nc-dark);
  padding:1rem 1.3rem; border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow-lg);
  display:flex; gap:.9rem; align-items:center;
}
.nc-hero-stat-float .ico{ width:44px; height:44px; border-radius:10px; background: var(--nc-green-light); color: var(--nc-green); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.nc-hero-stat-float strong{ display:block; font-size:1.1rem; }
.nc-hero-stat-float span{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }

/* Barre de recherche rapide (chevauche le hero) */
.nc-quicksearch{
  position:relative; z-index:5;
  background:#fff; border-radius: var(--nc-radius-lg);
  box-shadow: var(--nc-shadow-lg);
  padding: 1.7rem 1.8rem;
  margin-top:-56px;
}
.nc-quicksearch form{
  display:grid; grid-template-columns: repeat(4, 1fr) auto; gap:1rem; align-items:end;
}
.nc-quicksearch .nc-field{ margin-bottom:0; }
@media(max-width:991px){
  .nc-hero-grid{ grid-template-columns:1fr; padding-bottom:40px; }
  .nc-hero-visual{ order:-1; }
  .nc-quicksearch form{ grid-template-columns: repeat(2,1fr); }
}
@media(max-width:575px){
  .nc-quicksearch form{ grid-template-columns: 1fr; }
  .nc-hero-stat-float{ left:10px; bottom:-18px; }
}

/* --------------------------------------------------------------------------
   19. ÉTAPES DU PROCESSUS (ligne circuit)
   -------------------------------------------------------------------------- */
.nc-process-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.2rem; position:relative; }
.nc-process-item{ text-align:center; position:relative; padding:0 .5rem; }
.nc-process-item:not(:first-child)::before{
  content:""; position:absolute; top:32px; left:-50%; width:100%; height:0;
  border-top:2px dashed var(--nc-gray-300); z-index:1;
}
.bg-dark .nc-process-item:not(:first-child)::before{ border-top-color: rgba(255,255,255,.15); }
.nc-process-num{
  width:64px; height:64px; border-radius:50%;
  background: var(--nc-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.3rem; margin:0 auto 1.3rem; position:relative; z-index:2;
  box-shadow: 0 0 0 6px rgba(0,82,255,.15);
}
.nc-process-item:nth-child(2) .nc-process-num{ background: var(--nc-red); box-shadow: 0 0 0 6px rgba(228,3,46,.15); }
.nc-process-item:nth-child(3) .nc-process-num{ background: var(--nc-green); box-shadow: 0 0 0 6px rgba(0,200,83,.15); }
.nc-process-item:nth-child(4) .nc-process-num{ background: var(--nc-dark); box-shadow: 0 0 0 6px rgba(11,17,32,.15); }
@media(max-width:767px){
  .nc-process-list{ grid-template-columns:1fr; gap:2.4rem; }
  .nc-process-item:not(:first-child)::before{ display:none; }
}

/* --------------------------------------------------------------------------
   20. TÉMOIGNAGES
   -------------------------------------------------------------------------- */
.nc-testimonial{ padding: 2.2rem; }
.nc-testimonial .nc-stars{ color: var(--nc-green); margin-bottom:1.1rem; font-size:.9rem; }
.nc-testimonial .nc-quote{ color: var(--nc-gray-700); margin-bottom:1.5rem; font-style:normal; }
.nc-testimonial-author{ display:flex; align-items:center; gap:.9rem; padding-top:1.3rem; border-top:1px dashed var(--nc-gray-300); }
.nc-testimonial-avatar{
  width:48px; height:48px; border-radius:50%;
  background: var(--nc-blue-light); color: var(--nc-blue);
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.nc-testimonial-author strong{ display:block; font-size: var(--nc-fs-sm); }
.nc-testimonial-author span{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }

/* --------------------------------------------------------------------------
   21. CARTES BLOG / ACTUALITÉS
   -------------------------------------------------------------------------- */
.nc-blog-card .nc-blog-media{ position:relative; height:190px; }
.nc-blog-card .nc-blog-date{
  position:absolute; top:14px; left:14px;
  background:#fff; padding:.4rem .75rem; border-radius:6px;
  font-size: var(--nc-fs-xs); font-weight:700; color: var(--nc-dark);
}
.nc-blog-card .nc-blog-body{ padding: 1.5rem; }
.nc-blog-card .nc-blog-cat{ color: var(--nc-blue); font-size: var(--nc-fs-xs); text-transform:uppercase; font-weight:700; letter-spacing:.6px; display:block; margin-bottom:.5rem; }
.nc-blog-card .nc-blog-meta{ display:flex; gap:1.2rem; margin-top:1.2rem; font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }
.nc-blog-card .nc-blog-meta span{ display:flex; align-items:center; gap:.4rem; }

/* --------------------------------------------------------------------------
   22. BANNIÈRE DE PAGE INTÉRIEURE (fil d'ariane)
   -------------------------------------------------------------------------- */
.nc-page-hero{
  background: var(--nc-dark); color:#fff;
  padding: 56px 0 42px; position:relative; overflow:hidden;
}
.nc-page-hero::after{
  content:""; position:absolute; top:-100px; right:-80px; width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(0,82,255,.3), transparent 70%);
}
.nc-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; row-gap:.3rem; gap:.5rem; font-size: var(--nc-fs-sm); color: rgba(255,255,255,.55); margin-bottom:1rem; position:relative; z-index:2; }
.nc-breadcrumb a{ color: rgba(255,255,255,.55); }
.nc-breadcrumb a:hover{ color:#fff; }
.nc-breadcrumb .sep{ opacity:.4; }
.nc-page-hero h1{ color:#fff; margin-bottom:.4rem; position:relative; z-index:2; font-size: var(--nc-fs-2xl); }
.nc-page-hero p{ color: rgba(255,255,255,.6); position:relative; z-index:2; margin-bottom:0; }

/* --------------------------------------------------------------------------
   23. CATALOGUE — FILTRES, BARRE D'OUTILS, PAGINATION
   -------------------------------------------------------------------------- */
.nc-catalog-layout{ display:grid; grid-template-columns: 290px 1fr; gap:34px; align-items:start; }
@media(max-width:991px){ .nc-catalog-layout{ grid-template-columns:1fr; } }

.nc-filters{
  background:#fff; border:1px solid var(--nc-gray-300); border-radius: var(--nc-radius);
  padding: 1.7rem; position:sticky; top:100px;
}
.nc-filters-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.nc-filters-header h5{ margin-bottom:0; }
.nc-filters-reset{ font-size: var(--nc-fs-xs); color: var(--nc-red); font-weight:700; text-transform:uppercase; }
.nc-filters h6{ font-weight:700; text-transform:uppercase; font-size: var(--nc-fs-xs); letter-spacing:1px; color: var(--nc-gray-500); margin: 1.5rem 0 .9rem; }
.nc-filters h6:first-of-type{ margin-top:1.2rem; }
.nc-filter-check{ display:flex; align-items:center; gap:.65rem; padding:.4rem 0; font-size: var(--nc-fs-sm); color: var(--nc-gray-700); cursor:pointer; }
.nc-filter-check input{ accent-color: var(--nc-blue); width:16px; height:16px; flex-shrink:0; }
.nc-filter-check .count{ margin-left:auto; color: var(--nc-gray-500); font-size: var(--nc-fs-xs); }
.nc-filter-range{ display:flex; align-items:center; gap:.6rem; }
.nc-filter-range .nc-input{ padding:.6rem .7rem; font-size: var(--nc-fs-sm); }
.nc-filter-range span{ color: var(--nc-gray-500); }
.nc-filters-mobile-bar{ display:none; }
.nc-filters-close-btn{ display:none; background:transparent; border:none; color: var(--nc-gray-700); font-size:1.1rem; }

.nc-active-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.4rem; }
.nc-filter-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--nc-blue-light); color: var(--nc-blue);
  padding:.4rem .8rem; border-radius:20px; font-size: var(--nc-fs-xs); font-weight:700;
}
.nc-filter-chip a{ color: var(--nc-blue); display:flex; }

.nc-catalog-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-bottom: 1.7rem; padding-bottom:1.2rem; border-bottom:1px solid var(--nc-gray-300);
}
.nc-result-count strong{ color: var(--nc-blue); }
.nc-sort-select{ min-width:230px; }

.nc-pagination{ display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top: 3rem; }
.nc-pagination a, .nc-pagination span{
  min-width:42px; height:42px; padding:0 .5rem; display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1.5px solid var(--nc-gray-300);
  font-weight:700; font-size: var(--nc-fs-sm); color: var(--nc-gray-700);
}
.nc-pagination a:hover{ border-color: var(--nc-blue); color: var(--nc-blue); }
.nc-pagination .is-active{ background: var(--nc-blue); border-color: var(--nc-blue); color:#fff; }
.nc-pagination .is-disabled{ opacity:.4; pointer-events:none; }

.nc-empty-state{ text-align:center; padding: 4.5rem 2rem; }
.nc-empty-state i{ font-size:3rem; color: var(--nc-gray-300); margin-bottom:1.2rem; display:block; }

@media(max-width:991px){
  .nc-filters-mobile-bar{ display:flex; }
  .nc-filters{
    position:fixed; top:0; left:0; height:100%; width:min(320px,88vw);
    z-index:1200; border-radius:0; transform:translateX(-100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1); overflow-y:auto; padding-top:2rem;
  }
  .nc-filters.is-active{ transform:translateX(0); }
  .nc-filters-close-btn{ display:inline-flex; }
}