/* ==========================================================================
   NA AUTO SERVICE — style.css
   Charte graphique "Drive" — anthracite, rouge corail & jaune soleil
   Concessionnaire automobile neuf & occasion — Saint-Étienne
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES — DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Palette principale */
  --nc-ink:          #1C1D24;  /* Anthracite — fonds sombres, titres */
  --nc-ink-2:        #23252E;
  --nc-ink-3:        #2D303B;
  --nc-coral:        #F0483E;  /* Rouge corail — actions, accents */
  --nc-coral-dark:   #D4372E;
  --nc-coral-light:  #FEEDEB;
  --nc-sun:          #F7C331;  /* Jaune soleil — mise en avant, soulignés */
  --nc-sun-dark:     #C99A0E;
  --nc-sun-light:    #FFF6DA;
  --nc-success:      #1FA463;
  --nc-success-light:#E5F6EC;

  /* Alias historiques (utilisés par les feuilles de style de pages) */
  --nc-blue:         var(--nc-coral);
  --nc-blue-dark:    var(--nc-coral-dark);
  --nc-blue-light:   var(--nc-coral-light);
  --nc-red:          var(--nc-coral);
  --nc-red-dark:     var(--nc-coral-dark);
  --nc-red-light:    var(--nc-coral-light);
  --nc-green:        var(--nc-sun);
  --nc-green-dark:   var(--nc-sun-dark);
  --nc-green-light:  var(--nc-sun-light);

  /* Neutres */
  --nc-dark:         var(--nc-ink);
  --nc-dark-2:       var(--nc-ink-2);
  --nc-dark-3:       var(--nc-ink-3);
  --nc-gray-900:     #1F2028;
  --nc-gray-700:     #5B5F6B;
  --nc-gray-500:     #9095A1;
  --nc-gray-300:     #E4E6EB;
  --nc-gray-200:     #EEEFF2;
  --nc-gray-100:     #F7F7F9;
  --nc-white:        #FFFFFF;
  --nc-placeholder:  #ECEDF1;

  /* Typographie */
  --nc-font: 'Space Grotesk', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --nc-fs-xs:   0.78rem;
  --nc-fs-sm:   0.9rem;
  --nc-fs-base: 1rem;
  --nc-fs-md:   1.125rem;
  --nc-fs-lg:   1.35rem;
  --nc-fs-xl:   1.7rem;
  --nc-fs-2xl:  2.2rem;
  --nc-fs-3xl:  2.75rem;
  --nc-fs-4xl:  3.6rem;

  /* Rayons, ombres, transitions */
  --nc-radius-sm: 6px;
  --nc-radius:    12px;
  --nc-radius-lg: 20px;
  --nc-shadow-sm: 0 2px 10px rgba(28,29,36,.06);
  --nc-shadow:    0 10px 30px rgba(28,29,36,.09);
  --nc-shadow-lg: 0 24px 60px rgba(28,29,36,.16);
  --nc-transition: .3s cubic-bezier(.4,0,.2,1);

  --nc-container: 1240px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 100px; }
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-coral); color:#fff; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--nc-gray-100); }
::-webkit-scrollbar-thumb{ background: #C9CBD2; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--nc-coral); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--nc-sun);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6{
  font-family: var(--nc-font);
  font-weight: 600;
  line-height: 1.15;
  color: var(--nc-ink);
  margin: 0 0 .6em;
  letter-spacing: -.02em;
}
h1{ font-size: var(--nc-fs-4xl); font-weight:600; }
h2{ font-size: var(--nc-fs-3xl); }
h3{ font-size: var(--nc-fs-xl); }
h4{ font-size: var(--nc-fs-md); }
h5{ font-size: var(--nc-fs-base); }
p{ line-height:1.75; color: var(--nc-gray-700); margin:0 0 1em; }
strong{ font-weight:600; }

.nc-eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size: var(--nc-fs-xs); font-weight:600;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--nc-coral);
  margin-bottom: .9rem;
}
.nc-eyebrow::before{
  content:""; width:26px; height:3px; border-radius:3px;
  background: var(--nc-sun); display:inline-block;
}
.nc-eyebrow.is-light{ color: var(--nc-sun); }
.nc-eyebrow.is-light::before{ background: var(--nc-coral); }

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

/* Tête de section : titre centré + sous-titre gris (comme la maquette) */
.nc-section-head{ text-align:center; max-width:720px; margin:0 auto 3.2rem; }
.nc-section-head h2{ margin-bottom:.5rem; }
.nc-section-head p{ margin:0; color: var(--nc-gray-500); }
.nc-section-head.is-split{
  max-width:none; text-align:left; display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.nc-section-head.is-split > div{ max-width:640px; }

/* Mots surlignés */
.nc-hl{ color: var(--nc-sun); }
.nc-hl-red{ color: var(--nc-coral); }
.nc-underline{
  background: linear-gradient(transparent 62%, var(--nc-sun-light) 62%, var(--nc-sun-light) 92%, transparent 92%);
}
/* Mot entouré d'un trait "feutre" rouge (signature de la maquette) */
.nc-circled{ position:relative; display:inline-block; white-space:nowrap; z-index:0; }
.nc-circled svg{
  position:absolute; left:-8%; top:-14%; width:116%; height:128%;
  z-index:-1; pointer-events:none; overflow:visible;
}
.nc-circled svg path{
  fill:none; stroke: var(--nc-coral); stroke-width:3; stroke-linecap:round;
  stroke-dasharray: 700; stroke-dashoffset: 700;
  animation: nc-draw 1.6s .6s cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes nc-draw{ to{ stroke-dashoffset:0; } }

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

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

.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); }
.nc-grid.cols-5{ grid-template-columns: repeat(5,1fr); }
.nc-grid.cols-6{ grid-template-columns: repeat(6,1fr); }
@media(max-width:1100px){ .nc-grid.cols-5, .nc-grid.cols-6{ grid-template-columns: repeat(3,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; }
  .nc-grid.cols-5, .nc-grid.cols-6{ grid-template-columns: repeat(2,1fr); }
}

/* Bloc image (avec repli gris si l'image n'a pas encore chargé) */
.nc-placeholder{
  background: var(--nc-placeholder);
  display:flex; align-items:center; justify-content:center;
  color: var(--nc-gray-500);
  font-size: var(--nc-fs-sm); font-weight:600;
  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; transition: transform .8s cubic-bezier(.2,.7,.2,1); }

/* Image arrondie générique */
.nc-photo{ border-radius: var(--nc-radius-lg); overflow:hidden; position:relative; background: var(--nc-placeholder); }
.nc-photo img{ width:100%; height:100%; object-fit:cover; }

/* --------------------------------------------------------------------------
   5. SIGNATURES GRAPHIQUES
   -------------------------------------------------------------------------- */
/* Bandes jaune / rouge (bas du hero de la maquette) */
.nc-speedlines{ display:flex; height: 6px; width:100%; gap:0; }
.nc-speedlines span{ flex:1; }
.nc-speedlines span:nth-child(1){ background: var(--nc-sun); flex:1.4; }
.nc-speedlines span:nth-child(2){ background: transparent; flex:1; }
.nc-speedlines span:nth-child(3){ background: var(--nc-coral); flex:.9; }

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

/* Coins "viseur" au survol */
.nc-hud{ position:relative; overflow:hidden; }
.nc-hud:hover .nc-placeholder > img, .nc-hud:hover > img{ transform: scale(1.06); }
.nc-hud > img{ transition: transform .8s cubic-bezier(.2,.7,.2,1); }

/* Disque jaune derrière un visuel (voiture "Expert Services") */
.nc-blob{ position:relative; isolation:isolate; }
.nc-blob::before{
  content:""; position:absolute; z-index:-1;
  left:6%; right:-4%; bottom:-6%; height:46%;
  background: var(--nc-sun); border-radius: 50%;
  transform: rotate(-4deg);
}
.nc-blob.is-red::before{ background: var(--nc-coral); }
.nc-blob.is-top::before{ top:-6%; bottom:auto; }

/* Doodles décoratifs (bande CTA sombre) */
.nc-doodle{ position:absolute; color: var(--nc-sun); opacity:.9; pointer-events:none; }
.nc-doodle.is-red{ color: var(--nc-coral); }
.nc-doodle.is-white{ color: rgba(255,255,255,.25); }

/* Points en grille */
.nc-dots{
  position:absolute; width:140px; height:140px; pointer-events:none;
  background-image: radial-gradient(rgba(28,29,36,.18) 2px, transparent 2px);
  background-size: 16px 16px;
}
.bg-dark .nc-dots, .nc-hero .nc-dots{ background-image: radial-gradient(rgba(255,255,255,.12) 2px, transparent 2px); }

/* --------------------------------------------------------------------------
   6. BOUTONS
   -------------------------------------------------------------------------- */
.nc-btn{
  --btn-bg: var(--nc-coral);
  --btn-fg: #fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding: .85rem 1.6rem;
  font-weight:600; font-size: var(--nc-fs-sm);
  letter-spacing:.1px;
  border:1.5px solid var(--btn-bg);
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--nc-radius-sm);
  transition: transform var(--nc-transition), background var(--nc-transition), box-shadow var(--nc-transition), color var(--nc-transition), border-color var(--nc-transition);
  white-space: nowrap; line-height:1.2;
  position:relative; overflow:hidden;
}
.nc-btn i{ font-size: .95em; transition: transform var(--nc-transition); }
.nc-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(240,72,62,.28); color: var(--btn-fg); }
.nc-btn:hover i.fa-arrow-right{ transform: translateX(3px); }
.nc-btn:active{ transform: translateY(0); }

.nc-btn.btn-red{ --btn-bg: var(--nc-coral); }
.nc-btn.btn-green, .nc-btn.btn-sun{ --btn-bg: var(--nc-sun); --btn-fg: var(--nc-ink); }
.nc-btn.btn-green:hover, .nc-btn.btn-sun:hover{ box-shadow: 0 10px 24px rgba(247,195,49,.35); }
.nc-btn.btn-dark{ --btn-bg: var(--nc-ink); }
.nc-btn.btn-dark:hover{ box-shadow: var(--nc-shadow); }

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

.nc-btn.btn-white{ --btn-bg:#fff; border-color:#fff; color: var(--nc-ink); }
.nc-btn.btn-white:hover{ background: var(--nc-coral); border-color: var(--nc-coral); color:#fff; box-shadow:none; }
.nc-btn.btn-outline.btn-white{ background:transparent; color:#fff; border-color: rgba(255,255,255,.55); }
.nc-btn.btn-outline.btn-white:hover{ background:#fff; color: var(--nc-ink); border-color:#fff; }
.nc-btn.btn-outline.btn-dark{ color: var(--nc-ink); border-color: var(--nc-gray-300); }
.nc-btn.btn-outline.btn-dark:hover{ background: var(--nc-ink); color:#fff; border-color: var(--nc-ink); }

.nc-btn.btn-sm{ padding:.55rem 1.05rem; font-size: var(--nc-fs-xs); }
.nc-btn.btn-lg{ padding:1.05rem 2rem; font-size: var(--nc-fs-base); }
.nc-btn.btn-block{ width:100%; }
.nc-btn.btn-icon{ padding:.7rem; border-radius:50%; }

.nc-link{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color: var(--nc-coral); }
.nc-link i{ transition: transform var(--nc-transition); }
.nc-link:hover{ color: var(--nc-coral-dark); }
.nc-link:hover i{ transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. BADGES
   -------------------------------------------------------------------------- */
.nc-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding: .32rem .7rem;
  font-size: .72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.6px;
  color:#fff; border-radius: 30px;
}
.nc-badge.badge-neuf{ background: var(--nc-sun); color: var(--nc-ink); }
.nc-badge.badge-occasion{ background: var(--nc-ink); }
.nc-badge.badge-vendu{ background: var(--nc-gray-500); }
.nc-badge.badge-promo{ background: var(--nc-coral); }
.nc-badge.badge-outline{ background:transparent; border:1.5px solid currentColor; color: var(--nc-gray-700); }
.nc-badge.badge-soft{ background: var(--nc-coral-light); color: var(--nc-coral); }
.nc-badge.badge-soft-sun{ background: var(--nc-sun-light); color: var(--nc-sun-dark); }

.nc-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .9rem; border-radius:30px;
  background: var(--nc-gray-100); color: var(--nc-gray-700);
  font-size: var(--nc-fs-xs); font-weight:600;
  border:1px solid var(--nc-gray-300);
  transition: all var(--nc-transition);
}
.nc-chip:hover, .nc-chip.is-active{ background: var(--nc-ink); border-color: var(--nc-ink); color:#fff; }
.nc-chip i{ color: var(--nc-coral); }
.nc-chip:hover i, .nc-chip.is-active i{ color: var(--nc-sun); }

/* --------------------------------------------------------------------------
   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-color var(--nc-transition);
  border: 1px solid var(--nc-gray-200);
}
.nc-card:hover{ transform: translateY(-6px); box-shadow: var(--nc-shadow-lg); border-color: transparent; }

/* Carte véhicule (style maquette : photo, nom, lieu, prix) */
.nc-vehicle-card{ display:flex; flex-direction:column; }
.nc-vehicle-card .nc-vehicle-media{ position:relative; height:210px; margin:10px 10px 0; border-radius: 10px; overflow:hidden; background: var(--nc-placeholder); }
.nc-vehicle-card .nc-vehicle-media > img{ width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.nc-vehicle-card:hover .nc-vehicle-media > img{ transform: scale(1.06); }
.nc-vehicle-card .nc-vehicle-media .nc-badge{ position:absolute; top:12px; left:12px; z-index:2; }
.nc-vehicle-card .nc-fav-btn{
  position:absolute; top:10px; right:10px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.92); color: var(--nc-ink);
  display:flex; align-items:center; justify-content:center;
  border:none; box-shadow: var(--nc-shadow-sm);
  transition: background var(--nc-transition), color var(--nc-transition), transform var(--nc-transition);
}
.nc-fav-btn:hover{ transform: scale(1.08); }
.nc-fav-btn:hover, .nc-fav-btn.is-active{ background: var(--nc-coral); color:#fff; }
.nc-vehicle-card .nc-vehicle-body{ padding: 1.1rem 1.25rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.nc-vehicle-card .nc-vehicle-title{ font-size: var(--nc-fs-md); font-weight:600; margin-bottom:.25rem; }
.nc-vehicle-card .nc-vehicle-title a:hover{ color: var(--nc-coral); }
.nc-vehicle-card .nc-vehicle-sub{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); margin-bottom:.4rem; display:flex; align-items:center; gap:.35rem; }
.nc-vehicle-card .nc-vehicle-sub i{ color: var(--nc-coral); }
.nc-vehicle-card .nc-vehicle-price{ font-size: var(--nc-fs-lg); font-weight:700; color: var(--nc-ink); letter-spacing:-.02em; }
.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: .5rem; margin: .8rem 0 1rem; }
.nc-vehicle-specs span{
  display:flex; align-items:center; gap:.4rem;
  font-size: .76rem; color: var(--nc-gray-700);
  background: var(--nc-gray-100); padding:.32rem .6rem; border-radius:6px;
}
.nc-vehicle-specs i{ color: var(--nc-coral); }
.nc-vehicle-card .nc-vehicle-body > div:last-child{ margin-top:auto; }

/* Carte service / avantage */
.nc-feature-card{ padding: 2rem 1.7rem; text-align:left; }
.nc-feature-card h4{ margin-bottom:.5rem; }
.nc-feature-card p{ font-size: var(--nc-fs-sm); margin-bottom:0; }
.nc-feature-card .nc-icon, .nc-icon{
  width:56px; height:56px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--nc-coral-light);
  color: var(--nc-coral);
  font-size:1.35rem;
  margin-bottom:1.1rem;
  transition: transform var(--nc-transition), background var(--nc-transition), color var(--nc-transition);
}
.nc-icon.is-sun{ background: var(--nc-sun-light); color: var(--nc-sun-dark); }
.nc-icon.is-dark{ background: var(--nc-ink); color: var(--nc-sun); }
.nc-feature-card:hover .nc-icon{ background: var(--nc-coral); color:#fff; transform: rotate(-6deg) scale(1.05); }
.nc-grid > .nc-feature-card:nth-child(3n+2) .nc-icon{ background: var(--nc-sun-light); color: var(--nc-sun-dark); }
.nc-grid > .nc-feature-card:nth-child(3n+2):hover .nc-icon{ background: var(--nc-sun); color: var(--nc-ink); }
.nc-grid > .nc-feature-card:nth-child(3n) .nc-icon{ background: #EDEEF2; color: var(--nc-ink); }
.nc-grid > .nc-feature-card:nth-child(3n):hover .nc-icon{ background: var(--nc-ink); color: var(--nc-sun); }

/* Mini-cartes "Top Buy & Sell / Easy Payment / Easy To Use" */
.nc-mini-card{
  background:#fff; border:1px solid var(--nc-gray-200); border-radius: var(--nc-radius);
  padding:1.4rem 1.4rem 1.3rem; box-shadow: var(--nc-shadow-sm);
  transition: transform var(--nc-transition), box-shadow var(--nc-transition);
}
.nc-mini-card:hover{ transform: translateY(-4px); box-shadow: var(--nc-shadow); }
.nc-mini-card h5{ font-size: var(--nc-fs-sm); font-weight:600; margin-bottom:.4rem; display:flex; align-items:center; gap:.55rem; }
.nc-mini-card h5 i{ color: var(--nc-coral); }
.nc-mini-card p{ font-size: var(--nc-fs-xs); line-height:1.65; margin:0; color: var(--nc-gray-500); }

/* Statistiques */
.nc-stat{ text-align:center; }
.nc-stat .nc-stat-num{ font-size: var(--nc-fs-3xl); font-weight:700; color: var(--nc-ink); line-height:1; letter-spacing:-.03em; }
.nc-stat .nc-stat-num span{ color: inherit; }
.nc-stat .nc-stat-label{ font-size: var(--nc-fs-xs); text-transform:uppercase; letter-spacing:1.4px; color: var(--nc-gray-500); margin-top:.55rem; }
.bg-dark .nc-stat .nc-stat-num{ color: var(--nc-sun); }
.bg-dark .nc-stat .nc-stat-label{ color: rgba(255,255,255,.55); }

/* Carte catégorie (silhouettes / carrosseries) */
.nc-cat-card{
  position:relative; display:block; border-radius: var(--nc-radius); overflow:hidden;
  height:240px; background: var(--nc-ink); color:#fff; isolation:isolate;
}
.nc-cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.nc-cat-card::after{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(28,29,36,0) 30%, rgba(28,29,36,.88) 100%); }
.nc-cat-card:hover img{ transform: scale(1.08); }
.nc-cat-card .nc-cat-body{ position:absolute; left:1.3rem; right:1.3rem; bottom:1.2rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.nc-cat-card h4{ color:#fff; margin:0 0 .2rem; }
.nc-cat-card span{ font-size: var(--nc-fs-xs); color: rgba(255,255,255,.7); }
.nc-cat-card .nc-cat-arrow{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background: var(--nc-sun); color: var(--nc-ink);
  display:flex; align-items:center; justify-content:center;
  transition: transform var(--nc-transition), background var(--nc-transition);
}
.nc-cat-card:hover .nc-cat-arrow{ transform: rotate(-45deg); background: var(--nc-coral); color:#fff; }

/* --------------------------------------------------------------------------
   9. BARRE SUPÉRIEURE (topbar)
   -------------------------------------------------------------------------- */
.nc-topbar{ background: #15161B; color: rgba(255,255,255,.7); 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,.7); transition: color var(--nc-transition); }
.nc-topbar a:hover{ color: var(--nc-sun); }
.nc-topbar i{ color: var(--nc-sun); margin-right:.4rem; }
.nc-topbar-social a{ margin-left:.8rem; color:rgba(255,255,255,.55); }
.nc-topbar-social a i{ color:inherit; margin:0; }
.nc-topbar-social a:hover{ color: var(--nc-coral); }

/* --------------------------------------------------------------------------
   10. NAVIGATION PRINCIPALE (sombre, comme la maquette)
   -------------------------------------------------------------------------- */
.nc-navbar{
  position: sticky; top:0; z-index: 1000;
  background: var(--nc-ink);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: box-shadow var(--nc-transition), background var(--nc-transition);
}
.nc-navbar.is-scrolled{ box-shadow: 0 10px 30px rgba(0,0,0,.25); background: rgba(28,29,36,.97); backdrop-filter: blur(8px); }
.nc-navbar .nc-container{ display:flex; align-items:center; justify-content:space-between; height: 78px; gap:1.5rem; }

.nc-logo{ display:flex; align-items:center; gap:.6rem; font-weight:700; font-size: var(--nc-fs-lg); color: #fff; flex-shrink:0; min-width:0; white-space:nowrap; letter-spacing:-.03em; }
.nc-logo .nc-logo-mark{
  width:40px; height:40px; border-radius:10px;
  background: var(--nc-coral);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; position:relative;
}
.nc-logo .nc-logo-mark::after{
  content:""; position:absolute; right:-4px; bottom:-4px; width:12px; height:12px; border-radius:50%;
  background: var(--nc-sun); border:2px solid var(--nc-ink);
}
.nc-logo span{ color: var(--nc-sun); }

.nc-nav-links{ display:flex; align-items:center; gap:1.5rem; }
.nc-nav-links > li > a{ white-space:nowrap; }
.nc-nav-links > li{ position:relative; }
.nc-nav-links > li > a{
  display:flex; align-items:center; gap:.35rem;
  font-weight:500; font-size: var(--nc-fs-sm);
  padding: 1.7rem 0;
  color: rgba(255,255,255,.78);
  position:relative;
}
.nc-nav-links > li > a::after{
  content:""; position:absolute; left:50%; bottom:20px; height:3px; width:0; border-radius:3px;
  background: var(--nc-sun); transition: width var(--nc-transition), left var(--nc-transition);
}
.nc-nav-links > li > a:hover::after, .nc-nav-links > li.active > a::after{ width:100%; left:0; }
.nc-nav-links > li > a:hover, .nc-nav-links > li.active > a{ color: #fff; }
.nc-nav-links > li > a i{ font-size:.6rem; opacity:.7; }

.nc-dropdown{
  position:absolute; top:100%; left:50%; transform:translate(-50%,12px);
  background:#fff; min-width:250px;
  border-radius: var(--nc-radius); box-shadow: var(--nc-shadow-lg);
  padding:.6rem; opacity:0; visibility:hidden; pointer-events:none;
  transition: all var(--nc-transition);
}
.nc-dropdown::before{
  content:""; position:absolute; top:-6px; left:50%; width:12px; height:12px; background:#fff; transform: translateX(-50%) rotate(45deg); border-radius:2px;
}
.nc-nav-links > li:hover .nc-dropdown, .nc-nav-links > li:focus-within .nc-dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.nc-dropdown a{ display:flex; align-items:center; gap:.7rem; padding:.65rem .8rem; border-radius:8px; font-size: var(--nc-fs-sm); color: var(--nc-gray-700); position:relative; }
.nc-dropdown a:hover{ background: var(--nc-gray-100); color: var(--nc-ink); }
.nc-dropdown a i{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; background: var(--nc-coral-light); color: var(--nc-coral); font-size:.8rem; }
.nc-dropdown a:hover i{ background: var(--nc-coral); color:#fff; }

.nc-nav-actions{ display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.nc-nav-icon-btn{
  position:relative; font-size:1rem; color: rgba(255,255,255,.8);
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition: background var(--nc-transition), color var(--nc-transition);
}
.nc-nav-icon-btn:hover{ color: var(--nc-ink); background: var(--nc-sun); }
.nc-count, .nc-nav-icon-btn .nc-count{
  position:absolute; top:-3px; right:-3px;
  background: var(--nc-coral); color:#fff;
  font-size:10px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
}
.nc-nav-login{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1.05rem; border-radius: var(--nc-radius-sm);
  border:1.5px solid rgba(255,255,255,.45); color:#fff; font-size: var(--nc-fs-xs); font-weight:600;
  transition: all var(--nc-transition);
}
.nc-nav-login:hover{ background:#fff; color: var(--nc-ink); border-color:#fff; }

/* --------------------------------------------------------------------------
   11. MENU HAMBURGER + OFF-CANVAS MOBILE
   -------------------------------------------------------------------------- */
.nc-burger{
  display:none;
  width:46px; height:46px; flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.18); border-radius:12px; background:transparent;
  position:relative; z-index:1201;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition: background var(--nc-transition), border-color var(--nc-transition);
}
.nc-burger:hover, .nc-burger:focus-visible{ background: rgba(255,255,255,.08); }
.nc-burger span{
  display:block; width:22px; height:2.5px; border-radius:3px;
  background: #fff;
  transition: transform var(--nc-transition), opacity var(--nc-transition), background var(--nc-transition), width var(--nc-transition);
}
.nc-burger span:nth-child(2){ width:15px; margin-left:7px; background: var(--nc-sun); }
.nc-burger.is-active{ background: var(--nc-coral); border-color: var(--nc-coral); }
.nc-burger.is-active span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nc-burger.is-active span:nth-child(2){ opacity:0; transform:scale(0); }
.nc-burger.is-active span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

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

.nc-offcanvas{
  position:fixed; top:0; right:0; height:100%; width:min(360px,88vw);
  background: var(--nc-ink); color:#fff;
  z-index:1200; transform:translateX(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding: 5.4rem 1.6rem 2rem;
  box-shadow: -8px 0 30px rgba(0,0,0,.3);
}
.nc-offcanvas::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background: linear-gradient(90deg, var(--nc-sun) 0 58%, transparent 58% 72%, var(--nc-coral) 72%); }
.nc-offcanvas.is-active{ transform:translateX(0); }
.nc-offcanvas .nc-off-brand{ position:absolute; top:1.5rem; left:1.6rem; }
.nc-offcanvas .nc-off-brand .nc-logo{ font-size: var(--nc-fs-md); }
.nc-offcanvas .nc-off-brand .nc-logo-mark{ width:34px; height:34px; font-size:.9rem; }

.nc-off-search{
  display:flex; align-items:center; gap:.7rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  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-sun); 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.3rem; }
.nc-off-quick-btn{
  flex:1; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  padding: .9rem .5rem; color:#fff; font-size: var(--nc-fs-xs); font-weight:600; text-align:center;
  transition: background var(--nc-transition), border-color var(--nc-transition);
}
.nc-off-quick-btn i{ font-size:1.1rem; color: var(--nc-sun); }
.nc-off-quick-btn:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color:#fff; }
.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: .95rem 0; border-bottom:1px solid rgba(255,255,255,.07);
  font-weight:500; font-size: var(--nc-fs-base); color:#fff;
  transition: color var(--nc-transition), padding var(--nc-transition);
}
.nc-offcanvas .nc-off-links > li > a:hover{ color: var(--nc-sun); padding-left:.3rem; }
.nc-offcanvas .nc-off-links > li > a i{ font-size:.7rem; transition: transform var(--nc-transition); }
.nc-offcanvas .nc-off-toggle.is-open i{ transform: rotate(180deg); }
.nc-offcanvas .nc-off-sub{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.nc-offcanvas .nc-off-sub.is-open{ max-height:400px; }
.nc-offcanvas .nc-off-sub a{ display:block; padding:.55rem 0 .55rem 1rem; color: rgba(255,255,255,.65); font-size:var(--nc-fs-sm); border-left:2px solid rgba(255,255,255,.1); margin-left:.2rem; }
.nc-offcanvas .nc-off-sub a:hover{ color:#fff; border-left-color: var(--nc-coral); }
.nc-offcanvas .nc-off-cta{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.7rem; }
.nc-offcanvas .nc-off-contact{ margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.08); font-size: var(--nc-fs-sm); }
.nc-offcanvas .nc-off-contact p{ display:flex; gap:.6rem; align-items:center; color: rgba(255,255,255,.7); margin-bottom:.6rem; }
.nc-offcanvas .nc-off-contact i{ color: var(--nc-sun); width:16px; }
.nc-offcanvas .nc-off-close{
  position:absolute; top:1.3rem; right:1.3rem;
  width:40px; height:40px; 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: var(--nc-coral); transform: rotate(90deg); }

@media (max-width: 1480px){
  .nc-nav-links{ gap:1.1rem; }
  .nc-nav-links > li > a{ font-size:.85rem; }
  .nc-nav-actions{ gap:.4rem; }
  .nc-nav-actions .nc-nav-login{ display:none !important; }
}
@media (max-width: 1100px){
  .nc-nav-actions a[href*="comparateur"]{ display:none; }
}
@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:70px; }
}
@media (max-width: 400px){
  .nc-logo{ font-size: var(--nc-fs-md); }
  .nc-logo .nc-logo-mark{ width:34px; height:34px; font-size:.9rem; }
}

/* --------------------------------------------------------------------------
   12. FORMULAIRES
   -------------------------------------------------------------------------- */
.nc-field{ margin-bottom:1.15rem; }
.nc-field label{ display:block; font-size: var(--nc-fs-xs); font-weight:600; color: var(--nc-ink); margin-bottom:.45rem; }
.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-select{
  appearance:none; -webkit-appearance:none; padding-right:2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F0483E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 1rem center;
}
.nc-input:focus, .nc-select:focus, .nc-textarea:focus{
  outline:none; border-color: var(--nc-coral); box-shadow: 0 0 0 4px var(--nc-coral-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; border:1px solid var(--nc-gray-200); }
.nc-range{ width:100%; accent-color: var(--nc-coral); }

.nc-alert{ padding:1rem 1.2rem; border-radius: var(--nc-radius-sm); font-size: var(--nc-fs-sm); display:flex; gap:.7rem; align-items:flex-start; margin-bottom:1.2rem; }
.nc-alert.is-success{ background: var(--nc-success-light); color:#13703F; }
.nc-alert.is-error{ background: var(--nc-coral-light); color: var(--nc-coral-dark); }
.nc-alert.is-info{ background: var(--nc-sun-light); color:#7A5C00; }

/* --------------------------------------------------------------------------
   13. BANDE CTA SOMBRE "Prêt à démarrer ?" (avant le footer)
   -------------------------------------------------------------------------- */
.nc-cta-band{
  position:relative; overflow:hidden;
  background: var(--nc-ink); color:#fff; text-align:center;
  padding: 90px 0;
}
.nc-cta-band h2{ color:#fff; margin-bottom:.6rem; }
.nc-cta-band p{ color: rgba(255,255,255,.6); max-width:540px; margin:0 auto 2rem; }
.nc-cta-band .nc-cta-actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.nc-cta-band .nc-cta-note{ display:block; margin-top:1.4rem; font-size: var(--nc-fs-xs); color: rgba(255,255,255,.4); }
.nc-cta-band .nc-doodle.d1{ left:8%; top:34%; width:70px; }
.nc-cta-band .nc-doodle.d2{ right:10%; top:46%; width:64px; }
.nc-cta-band .nc-doodle.d3{ left:47%; top:14%; width:26px; }
.nc-cta-band .nc-doodle.d4{ right:24%; bottom:18%; width:36px; }
@media(max-width:767px){ .nc-cta-band .nc-doodle{ display:none; } }

/* --------------------------------------------------------------------------
   14. FOOTER (clair, comme la maquette)
   -------------------------------------------------------------------------- */
.nc-footer{ background: #fff; color: var(--nc-gray-700); padding-top: 80px; border-top:1px solid var(--nc-gray-200); }
.nc-footer-grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap:40px; }
@media(max-width:1100px){ .nc-footer-grid{ grid-template-columns: repeat(3,1fr); } }
@media(max-width:767px){ .nc-footer-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ .nc-footer-grid{ grid-template-columns: 1fr; } }
.nc-footer h5{ color: var(--nc-ink); font-size: var(--nc-fs-xs); text-transform:uppercase; letter-spacing:1.6px; font-weight:700; margin-bottom:1.3rem; }
.nc-footer .nc-logo{ color: var(--nc-ink); }
.nc-footer .nc-logo span{ color: var(--nc-coral); }
.nc-footer .nc-logo .nc-logo-mark::after{ border-color:#fff; }
.nc-footer p{ color: var(--nc-gray-500); font-size: var(--nc-fs-sm); }
.nc-footer-links a{ display:inline-block; padding: .38rem 0; font-size: var(--nc-fs-sm); color: var(--nc-gray-700); transition: color var(--nc-transition), transform var(--nc-transition); }
.nc-footer-links a:hover{ color: var(--nc-coral); transform: translateX(4px); }
.nc-footer-contact li{ display:flex; gap:.8rem; margin-bottom:.9rem; color: var(--nc-gray-700); align-items:flex-start; font-size: var(--nc-fs-sm); }
.nc-footer-contact i{ color: var(--nc-coral); margin-top:.25rem; width:16px; }
.nc-footer-contact a:hover{ color: var(--nc-coral); }
.nc-footer-social{ display:flex; gap:.55rem; margin-top:1.3rem; }
.nc-footer-social a{
  width:34px; height:34px; border-radius:50%;
  background: var(--nc-coral); color:#fff; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  transition: all var(--nc-transition);
}
.nc-footer-social a:hover{ background: var(--nc-ink); color: var(--nc-sun); transform: translateY(-3px); }

.nc-footer-newsletter{ display:flex; margin-top:.8rem; background: var(--nc-gray-100); border-radius: var(--nc-radius-sm); padding:4px; border:1px solid var(--nc-gray-300); }
.nc-footer-newsletter input{ flex:1; min-width:0; padding: .7rem .8rem; border:none; background: transparent; color: var(--nc-ink); font-size: var(--nc-fs-sm); outline:none; }
.nc-footer-newsletter button{ border:none; background: var(--nc-coral); color:#fff; padding: 0 1rem; border-radius: 5px; transition: background var(--nc-transition); }
.nc-footer-newsletter button:hover{ background: var(--nc-ink); }

.nc-footer-apps{ display:flex; flex-direction:column; gap:.55rem; margin-top:1rem; }
.nc-footer-badge{ display:flex; align-items:center; gap:.6rem; font-size: var(--nc-fs-xs); color: var(--nc-gray-700); }
.nc-footer-badge i{ width:30px; height:30px; border-radius:8px; background: var(--nc-sun-light); color: var(--nc-sun-dark); display:flex; align-items:center; justify-content:center; }

.nc-footer-bottom{
  margin-top: 60px; padding: 1.5rem 0;
  border-top: 1px solid var(--nc-gray-200);
  font-size: var(--nc-fs-xs);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  color: var(--nc-gray-500);
}
.nc-footer-bottom a{ color: var(--nc-gray-500); }
.nc-footer-bottom a:hover{ color: var(--nc-coral); }
.nc-footer-legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.nc-footer-badges{ display:flex; gap:1rem; align-items:center; color: var(--nc-gray-500); font-size:1.4rem; }

/* --------------------------------------------------------------------------
   15. BANDEAU COOKIES (RGPD)
   -------------------------------------------------------------------------- */
.nc-cookies{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:1300;
  max-width:520px;
  background: #fff; color: var(--nc-ink);
  border-radius: var(--nc-radius-lg);
  box-shadow: 0 30px 80px rgba(28,29,36,.28);
  padding: 1.6rem 1.7rem;
  transform: translateY(140%);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  border:1px solid var(--nc-gray-200);
}
.nc-cookies.is-visible{ transform: translateY(0); }
.nc-cookies-icon{ width:46px; height:46px; border-radius:12px; background: var(--nc-sun-light); color: var(--nc-sun-dark); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1rem; }
.nc-cookies h6{ color: var(--nc-ink); font-weight:600; margin-bottom:.5rem; font-size: var(--nc-fs-md); }
.nc-cookies p{ font-size: var(--nc-fs-sm); color: var(--nc-gray-700); margin-bottom:1.2rem; line-height:1.6; }
.nc-cookies-actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.nc-cookies-actions .nc-btn{ padding:.65rem 1.1rem; font-size: var(--nc-fs-xs); }
.nc-cookies-link{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); text-decoration:underline; align-self:center; }
@media(max-width:575px){ .nc-cookies{ left:12px; right:12px; bottom:12px; padding:1.3rem; } }

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

/* --------------------------------------------------------------------------
   17. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes nc-pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }
@keyframes nc-blink{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} }
@keyframes nc-float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
@keyframes nc-spin{ to{ transform: rotate(360deg);} }
@keyframes nc-marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@keyframes nc-drive-in{ from{ transform: translateX(60px); opacity:0;} to{ transform: translateX(0); opacity:1;} }
.nc-live-dot{ width:9px; height:9px; border-radius:50%; background: var(--nc-success); display:inline-block; animation: nc-blink 1.4s infinite; }
.nc-float-anim{ animation: nc-float 5s ease-in-out infinite; }

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

/* --------------------------------------------------------------------------
   19. HERO — ACCUEIL (sombre, découpe diagonale, bandes jaune / rouge)
   -------------------------------------------------------------------------- */
.nc-hero{
  position:relative;
  background: var(--nc-ink);
  color:#fff; padding: 70px 0 0; overflow:hidden;
}
.nc-hero::before{
  content:""; position:absolute; top:-200px; right:-160px;
  width:620px; height:620px; border-radius:50%;
  background: radial-gradient(circle, rgba(247,195,49,.12), transparent 65%);
}
.nc-hero .nc-dots{ left:3%; top:12%; }
.nc-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1fr 1.05fr; gap:40px; align-items:center;
  padding-bottom: 120px;
}
.nc-hero h1{ color:#fff; margin-bottom:1.2rem; font-weight:500; line-height:1.12; }
.nc-hero h1 .accent{ color: var(--nc-sun); }
.nc-hero h1 .accent.red{ color: var(--nc-coral); }
.nc-hero p.nc-lead{ color: rgba(255,255,255,.62); max-width:500px; font-size: var(--nc-fs-base); }
.nc-hero-badges{ display:flex; gap:1.4rem; margin-top:2rem; flex-wrap:wrap; }
.nc-hero-badges div{ display:flex; align-items:center; gap:.55rem; font-size: var(--nc-fs-sm); color: rgba(255,255,255,.7); }
.nc-hero-badges i{ color: var(--nc-sun); font-size:1rem; }
.nc-hero-cta{ display:flex; gap:.9rem; margin-top:2.2rem; flex-wrap:wrap; }
.nc-hero-compat{ display:flex; align-items:center; gap:1rem; margin-top:2.2rem; font-size: var(--nc-fs-xs); color: rgba(255,255,255,.5); }
.nc-hero-compat .avatars{ display:flex; }
.nc-hero-compat .avatars img{ width:34px; height:34px; border-radius:50%; border:2px solid var(--nc-ink); object-fit:cover; margin-left:-10px; }
.nc-hero-compat .avatars img:first-child{ margin-left:0; }
.nc-hero-compat strong{ color:#fff; display:block; font-size: var(--nc-fs-sm); }
.nc-hero-compat .fa-star{ color: var(--nc-sun); }

.nc-hero-visual{ position:relative; }
.nc-hero-visual .nc-hero-car{
  position:relative; border-radius: 26px; overflow:hidden; aspect-ratio: 4/3;
  box-shadow: 0 40px 80px rgba(0,0,0,.45);
  animation: nc-drive-in 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.nc-hero-visual .nc-hero-car img{ width:100%; height:100%; object-fit:cover; }
.nc-hero-visual::before{
  content:""; position:absolute; left:8%; right:-6%; bottom:-8%; height:40%;
  background: var(--nc-sun); border-radius:50%; transform: rotate(-5deg); z-index:-0;
}
.nc-hero-visual .nc-hero-car{ z-index:1; }
.nc-hero-visual .nc-placeholder{ min-height:400px; border-radius: var(--nc-radius-lg); }
.nc-hero-stat-float{
  position:absolute; bottom:-26px; left:-26px; z-index:3;
  background:#fff; color: var(--nc-ink);
  padding:.9rem 1.2rem; border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow-lg);
  display:flex; gap:.85rem; align-items:center;
  animation: nc-float 5s ease-in-out infinite;
}
.nc-hero-stat-float.is-top{ top:24px; right:-22px; left:auto; bottom:auto; animation-delay: -2.5s; }
.nc-hero-stat-float .ico{ width:42px; height:42px; border-radius:10px; background: var(--nc-sun-light); color: var(--nc-sun-dark); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.nc-hero-stat-float.is-top .ico{ background: var(--nc-coral-light); color: var(--nc-coral); }
.nc-hero-stat-float strong{ display:block; font-size:1.05rem; }
.nc-hero-stat-float span{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }

/* Découpe diagonale blanche + bandes de couleur */
.nc-hero-cut{ position:absolute; left:0; right:0; bottom:-1px; height:90px; z-index:3; pointer-events:none; }
.nc-hero-cut svg{ width:100%; height:100%; display:block; }

/* 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.6rem 1.7rem;
  margin-top:-70px; border:1px solid var(--nc-gray-200);
}
.nc-quicksearch-tabs{ display:flex; gap:.4rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.nc-quicksearch-tabs button{
  border:none; background: var(--nc-gray-100); color: var(--nc-gray-700); font-weight:600; font-size: var(--nc-fs-xs);
  padding:.55rem 1rem; border-radius:30px; transition: all var(--nc-transition);
}
.nc-quicksearch-tabs button.is-active{ background: var(--nc-ink); color:#fff; }
.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:110px; gap:60px; }
  .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:8px; bottom:-20px; }
  .nc-hero-stat-float.is-top{ right:8px; top:-18px; }
  .nc-hero-grid{ padding-bottom:90px; }
}

/* --------------------------------------------------------------------------
   20. BANDEAU DE MARQUES (logos en niveaux de gris)
   -------------------------------------------------------------------------- */
.nc-brands{ padding: 70px 0 40px; }
.nc-brands h3{ text-align:center; font-weight:500; font-size: var(--nc-fs-lg); margin-bottom:2.2rem; }
.nc-brands h3 strong{ color: var(--nc-coral); }
.nc-marquee{ overflow:hidden; position:relative; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.nc-marquee-track{ display:flex; gap:64px; width:max-content; animation: nc-marquee 40s linear infinite; align-items:center; }
.nc-marquee:hover .nc-marquee-track{ animation-play-state: paused; }
.nc-brand-logo{ height:46px; width:90px; display:flex; align-items:center; justify-content:center; }
.nc-brand-logo img{ max-height:46px; max-width:90px; object-fit:contain; filter: grayscale(1) contrast(1.1); opacity:.6; transition: filter var(--nc-transition), opacity var(--nc-transition), transform var(--nc-transition); mix-blend-mode: multiply; }
.nc-brand-logo:hover img{ filter:none; opacity:1; transform: scale(1.08); }

/* --------------------------------------------------------------------------
   21. BLOCS ÉDITORIAUX — split image / texte, checklist
   -------------------------------------------------------------------------- */
.nc-split{ display:grid; grid-template-columns: 1fr 1fr; gap:70px; align-items:center; }
.nc-split.is-reverse > :first-child{ order:2; }
@media(max-width:991px){ .nc-split{ grid-template-columns:1fr; gap:44px; } .nc-split.is-reverse > :first-child{ order:0; } }
.nc-split-media{ position:relative; }
.nc-split-media .nc-photo{ aspect-ratio: 5/4; }
.nc-split-media .nc-photo.is-tall{ aspect-ratio: 4/5; }
.nc-split-media .nc-badge-float{
  position:absolute; right:-18px; bottom:28px; z-index:3;
  background:#fff; border-radius: var(--nc-radius); box-shadow: var(--nc-shadow-lg);
  padding:1rem 1.2rem; display:flex; gap:.8rem; align-items:center;
}
.nc-split-media .nc-badge-float.is-left{ left:-18px; right:auto; top:28px; bottom:auto; }
.nc-badge-float .num{ font-size:1.6rem; font-weight:700; color: var(--nc-coral); line-height:1; }
.nc-badge-float small{ display:block; font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }
@media(max-width:575px){ .nc-split-media .nc-badge-float{ right:8px; } .nc-split-media .nc-badge-float.is-left{ left:8px; } }

.nc-photo-stack{ position:relative; padding: 0 0 60px 60px; }
.nc-photo-stack .nc-photo:first-child{ aspect-ratio: 4/3; }
.nc-photo-stack .nc-photo.is-small{ position:absolute; left:0; bottom:0; width:48%; aspect-ratio:1/1; border:6px solid #fff; box-shadow: var(--nc-shadow-lg); }

.nc-checklist{ display:flex; flex-direction:column; gap:1.3rem; margin:1.6rem 0; }
.nc-checklist li{ display:flex; gap:1rem; align-items:flex-start; }
.nc-checklist li > i{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background: var(--nc-coral); color:#fff; font-size:.75rem;
  display:flex; align-items:center; justify-content:center; margin-top:.1rem;
}
.nc-checklist li strong{ display:block; color: var(--nc-ink); margin-bottom:.15rem; font-size: var(--nc-fs-base); }
.nc-checklist li span{ font-size: var(--nc-fs-sm); color: var(--nc-gray-500); line-height:1.6; display:block; }
.bg-dark .nc-checklist li strong{ color:#fff; }
.bg-dark .nc-checklist li span{ color: rgba(255,255,255,.55); }
.nc-checklist.is-compact{ gap:.7rem; margin:1rem 0; }
.nc-checklist.is-compact li > i{ width:22px; height:22px; font-size:.6rem; background: var(--nc-sun); color: var(--nc-ink); }
.nc-checklist.is-compact li{ font-size: var(--nc-fs-sm); color: var(--nc-gray-700); align-items:center; }

/* --------------------------------------------------------------------------
   22. ÉTAPES DU PROCESSUS
   -------------------------------------------------------------------------- */
.nc-process-list{ display:grid; grid-template-columns:repeat(4,1fr); gap: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:18px;
  background: var(--nc-coral); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.3rem; margin:0 auto 1.3rem; position:relative; z-index:2;
  box-shadow: 0 0 0 8px #fff; transform: rotate(-4deg);
  transition: transform var(--nc-transition);
}
.nc-process-item:hover .nc-process-num{ transform: rotate(0) scale(1.06); }
.bg-light .nc-process-num{ box-shadow: 0 0 0 8px var(--nc-gray-100); }
.bg-dark .nc-process-num{ box-shadow: 0 0 0 8px var(--nc-ink); }
.nc-process-item:nth-child(2) .nc-process-num{ background: var(--nc-sun); color: var(--nc-ink); transform: rotate(4deg); }
.nc-process-item:nth-child(3) .nc-process-num{ background: var(--nc-ink); color: var(--nc-sun); }
.bg-dark .nc-process-item:nth-child(3) .nc-process-num{ background:#fff; color: var(--nc-ink); }
.nc-process-item:nth-child(4) .nc-process-num{ background: var(--nc-coral); transform: rotate(4deg); }
.nc-process-item p{ font-size: var(--nc-fs-sm); }
@media(max-width:767px){
  .nc-process-list{ grid-template-columns:1fr; gap:2.4rem; }
  .nc-process-item:not(:first-child)::before{ display:none; }
}

/* --------------------------------------------------------------------------
   23. TÉMOIGNAGES (avatar en médaillon, étoiles jaunes)
   -------------------------------------------------------------------------- */
.nc-testimonial{ padding: 2rem 1.8rem; position:relative; overflow:visible; }
.nc-testimonial .nc-stars{ color: var(--nc-sun); margin-bottom:1rem; font-size:.9rem; letter-spacing:2px; }
.nc-testimonial .nc-quote{ color: var(--nc-gray-700); margin-bottom:1.4rem; font-style:normal; font-size: var(--nc-fs-sm); }
.nc-testimonial::before{
  content:"\201C"; position:absolute; top:.6rem; right:1.4rem; font-size:5rem; line-height:1; color: var(--nc-coral-light); font-family: Georgia, serif;
}
.nc-testimonial-author{ display:flex; align-items:center; gap:.9rem; padding-top:1.2rem; border-top:1px solid var(--nc-gray-200); }
.nc-testimonial-avatar{
  width:50px; height:50px; border-radius:50%; overflow:hidden;
  background: var(--nc-sun-light); color: var(--nc-sun-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
  border:2px solid #fff; box-shadow: 0 0 0 2px var(--nc-sun);
}
.nc-testimonial-avatar img{ width:100%; height:100%; object-fit:cover; }
.nc-testimonial-author strong{ display:block; font-size: var(--nc-fs-sm); color: var(--nc-ink); }
.nc-testimonial-author span{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }

/* Variante "maquette" : témoignages décalés à droite + titre à gauche */
.nc-reviews-split{ display:grid; grid-template-columns: .8fr 1.2fr; gap:60px; align-items:center; }
.nc-reviews-stack{ display:flex; flex-direction:column; gap:28px; }
.nc-reviews-stack > :nth-child(2){ margin-left:60px; }
.nc-reviews-stack > :nth-child(3){ margin-left:20px; }
.nc-review-mini{ display:flex; gap:1rem; padding:1.4rem 1.5rem; }
.nc-review-mini .nc-testimonial-avatar{ width:56px; height:56px; }
.nc-review-mini .head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.4rem; flex-wrap:wrap; }
.nc-review-mini .head strong{ color: var(--nc-ink); }
.nc-review-mini .nc-stars{ margin:0; }
.nc-review-mini p{ font-size: var(--nc-fs-sm); margin:0; }
@media(max-width:991px){ .nc-reviews-split{ grid-template-columns:1fr; gap:40px; } .nc-reviews-stack > :nth-child(n){ margin-left:0; } }

/* --------------------------------------------------------------------------
   24. CARTES BLOG / ACTUALITÉS
   -------------------------------------------------------------------------- */
.nc-blog-card .nc-blog-media{ position:relative; height:210px; border-radius:0; }
.nc-blog-card .nc-blog-media img{ transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.nc-blog-card:hover .nc-blog-media img{ transform: scale(1.06); }
.nc-blog-card .nc-blog-date{
  position:absolute; top:14px; left:14px; z-index:2;
  background: var(--nc-sun); padding:.4rem .75rem; border-radius:6px;
  font-size: var(--nc-fs-xs); font-weight:600; color: var(--nc-ink);
}
.nc-blog-card .nc-blog-body{ padding: 1.5rem; }
.nc-blog-card .nc-blog-body h4 a:hover, .nc-blog-card h4:hover{ color: var(--nc-coral); }
.nc-blog-card .nc-blog-cat{ color: var(--nc-coral); font-size: var(--nc-fs-xs); text-transform:uppercase; font-weight:600; letter-spacing:.8px; display:block; margin-bottom:.5rem; }
.nc-blog-card .nc-blog-meta{ display:flex; gap:1.2rem; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--nc-gray-200); 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; }
.nc-blog-card .nc-blog-meta i{ color: var(--nc-coral); }

/* --------------------------------------------------------------------------
   25. BANNIÈRE DE PAGE INTÉRIEURE
   -------------------------------------------------------------------------- */
.nc-page-hero{
  background: var(--nc-ink); color:#fff;
  padding: 80px 0 110px; position:relative; overflow:hidden; isolation:isolate;
}
.nc-page-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image: var(--nc-hero-img, none); background-size:cover; background-position:center;
  opacity:.28;
}
.nc-page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, var(--nc-ink) 25%, rgba(28,29,36,.6) 100%);
}
.nc-page-hero .nc-container{ position:relative; z-index:2; }
.nc-page-hero .nc-hero-cut{ height:70px; }
.nc-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; row-gap:.3rem; gap:.55rem; font-size: var(--nc-fs-sm); color: rgba(255,255,255,.55); margin-bottom:1.1rem; position:relative; z-index:2; }
.nc-breadcrumb a{ color: rgba(255,255,255,.7); }
.nc-breadcrumb a:hover{ color: var(--nc-sun); }
.nc-breadcrumb .sep{ opacity:.4; }
.nc-breadcrumb i{ color: var(--nc-sun); }
.nc-page-hero h1{ color:#fff; margin-bottom:.6rem; position:relative; z-index:2; font-size: var(--nc-fs-3xl); font-weight:500; max-width:820px; }
.nc-page-hero h1 .accent, .nc-page-hero h1 span{ color: var(--nc-sun); }
.nc-page-hero p{ color: rgba(255,255,255,.62); position:relative; z-index:2; margin-bottom:0; max-width:640px; }
@media(max-width:575px){ .nc-page-hero{ padding: 56px 0 90px; } .nc-page-hero h1{ font-size: 1.9rem; } }

/* --------------------------------------------------------------------------
   26. 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-200); border-radius: var(--nc-radius-lg);
  padding: 1.7rem; position:sticky; top:100px; box-shadow: var(--nc-shadow-sm);
}
.nc-filters-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.nc-filters-header h5{ margin-bottom:0; display:flex; align-items:center; gap:.5rem; }
.nc-filters-header h5 i{ color: var(--nc-coral); }
.nc-filters-reset{ font-size: var(--nc-fs-xs); color: var(--nc-coral); font-weight:600; }
.nc-filters h6{ font-weight:600; text-transform:uppercase; font-size: .72rem; letter-spacing:1.2px; color: var(--nc-gray-500); margin: 1.5rem 0 .8rem; }
.nc-filters h6:first-of-type{ margin-top:1.2rem; }
.nc-filter-check{ display:flex; align-items:center; gap:.65rem; padding:.38rem 0; font-size: var(--nc-fs-sm); color: var(--nc-gray-700); cursor:pointer; }
.nc-filter-check input{ accent-color: var(--nc-coral); width:16px; height:16px; flex-shrink:0; }
.nc-filter-check .count{ margin-left:auto; color: var(--nc-gray-500); font-size: .72rem; background: var(--nc-gray-100); padding:.1rem .5rem; border-radius:20px; }
.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-sun-light); color: var(--nc-ink);
  padding:.4rem .8rem; border-radius:20px; font-size: var(--nc-fs-xs); font-weight:600;
}
.nc-filter-chip a{ color: var(--nc-coral); display:flex; }

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

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

.nc-empty-state{ text-align:center; padding: 4.5rem 2rem; background: var(--nc-gray-100); border-radius: var(--nc-radius-lg); }
.nc-empty-state i{ font-size:3rem; color: var(--nc-sun); 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(330px,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; }
}

/* --------------------------------------------------------------------------
   27. COMPOSANTS ADDITIONNELS — onglets, accordéon, timeline, tarifs,
       équipe, galerie, chiffres, encadrés
   -------------------------------------------------------------------------- */
/* Onglets */
.nc-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.nc-tabs.center{ justify-content:center; }
.nc-tab-btn{
  border:1.5px solid var(--nc-gray-300); background:#fff; color: var(--nc-gray-700);
  padding:.65rem 1.2rem; border-radius:30px; font-weight:600; font-size: var(--nc-fs-sm);
  display:inline-flex; align-items:center; gap:.5rem; transition: all var(--nc-transition);
}
.nc-tab-btn:hover{ border-color: var(--nc-ink); color: var(--nc-ink); }
.nc-tab-btn.is-active{ background: var(--nc-ink); border-color: var(--nc-ink); color:#fff; }
.nc-tab-btn.is-active i{ color: var(--nc-sun); }
.nc-tab-panel{ display:none; animation: nc-fade .4s ease; }
.nc-tab-panel.is-active{ display:block; }
@keyframes nc-fade{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} }

/* Accordéon */
.nc-accordion{ display:flex; flex-direction:column; gap:.8rem; }
.nc-acc-item{ background:#fff; border:1px solid var(--nc-gray-200); border-radius: var(--nc-radius); overflow:hidden; transition: box-shadow var(--nc-transition), border-color var(--nc-transition); }
.nc-acc-item.is-open{ box-shadow: var(--nc-shadow); border-color: transparent; }
.nc-acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.4rem; background:none; border:none; text-align:left;
  font-weight:600; font-size: var(--nc-fs-base); color: var(--nc-ink);
}
.nc-acc-head .ico{ width:32px; height:32px; border-radius:50%; flex-shrink:0; background: var(--nc-gray-100); color: var(--nc-ink); display:flex; align-items:center; justify-content:center; font-size:.8rem; transition: all var(--nc-transition); }
.nc-acc-item.is-open .nc-acc-head .ico{ background: var(--nc-coral); color:#fff; transform: rotate(45deg); }
.nc-acc-body{ max-height:0; overflow:hidden; transition: max-height .4s ease; }
.nc-acc-body > div{ padding:0 1.4rem 1.3rem; color: var(--nc-gray-700); line-height:1.75; font-size: var(--nc-fs-sm); }

/* Timeline */
.nc-timeline{ position:relative; padding-left:34px; }
.nc-timeline::before{ content:""; position:absolute; left:10px; top:6px; bottom:6px; width:2px; background: var(--nc-gray-300); }
.nc-timeline-item{ position:relative; padding-bottom:2rem; }
.nc-timeline-item:last-child{ padding-bottom:0; }
.nc-timeline-item::before{
  content:""; position:absolute; left:-30px; top:4px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:4px solid var(--nc-coral);
}
.nc-timeline-item:nth-child(even)::before{ border-color: var(--nc-sun); }
.nc-timeline-item .year{ display:inline-block; font-size: var(--nc-fs-xs); font-weight:700; color: var(--nc-coral); background: var(--nc-coral-light); padding:.2rem .6rem; border-radius:20px; margin-bottom:.4rem; }
.nc-timeline-item h4{ margin-bottom:.3rem; }
.nc-timeline-item p{ font-size: var(--nc-fs-sm); margin:0; }
.bg-dark .nc-timeline::before{ background: rgba(255,255,255,.15); }
.bg-dark .nc-timeline-item::before{ background: var(--nc-ink); }

/* Tarifs / formules */
.nc-plan{ padding:2.2rem 2rem; position:relative; display:flex; flex-direction:column; }
.nc-plan.is-featured{ background: var(--nc-ink); color:#fff; border-color: var(--nc-ink); transform: translateY(-10px); }
.nc-plan.is-featured:hover{ transform: translateY(-16px); }
.nc-plan.is-featured h3, .nc-plan.is-featured h4{ color:#fff; }
.nc-plan.is-featured p, .nc-plan.is-featured li{ color: rgba(255,255,255,.7); }
.nc-plan .nc-plan-tag{ position:absolute; top:1.2rem; right:1.2rem; }
.nc-plan .nc-plan-price{ font-size: 2.4rem; font-weight:700; color: var(--nc-ink); line-height:1; margin: .6rem 0 .3rem; letter-spacing:-.03em; }
.nc-plan.is-featured .nc-plan-price{ color: var(--nc-sun); }
.nc-plan .nc-plan-price small{ font-size: var(--nc-fs-sm); font-weight:400; color: var(--nc-gray-500); }
.nc-plan ul{ margin:1.4rem 0 1.8rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.nc-plan li{ display:flex; gap:.6rem; font-size: var(--nc-fs-sm); color: var(--nc-gray-700); align-items:flex-start; }
.nc-plan li i{ color: var(--nc-coral); margin-top:.3rem; }
.nc-plan.is-featured li i{ color: var(--nc-sun); }
.nc-plan li.is-off{ opacity:.45; }
.nc-plan li.is-off i{ color: var(--nc-gray-500); }

/* Équipe */
.nc-team-card{ text-align:center; padding-bottom:1.5rem; }
.nc-team-card .nc-team-photo{ height:290px; margin:10px 10px 1.2rem; border-radius:10px; overflow:hidden; position:relative; background: var(--nc-placeholder); }
.nc-team-card .nc-team-photo img{ width:100%; height:100%; object-fit:cover; object-position: top; transition: transform .8s ease; }
.nc-team-card:hover .nc-team-photo img{ transform: scale(1.05); }
.nc-team-card .nc-team-social{ position:absolute; left:50%; bottom:14px; transform: translate(-50%, 70px); display:flex; gap:.4rem; transition: transform var(--nc-transition); }
.nc-team-card:hover .nc-team-social{ transform: translate(-50%, 0); }
.nc-team-card .nc-team-social a{ width:34px; height:34px; border-radius:50%; background:#fff; color: var(--nc-ink); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.nc-team-card .nc-team-social a:hover{ background: var(--nc-coral); color:#fff; }
.nc-team-card h4{ margin-bottom:.2rem; }
.nc-team-card span{ font-size: var(--nc-fs-xs); color: var(--nc-coral); font-weight:600; text-transform:uppercase; letter-spacing:.8px; }
.nc-team-card p{ font-size: var(--nc-fs-sm); padding:0 1.2rem; margin:.6rem 0 0; }

/* Galerie */
.nc-gallery{ display:grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; gap:16px; }
.nc-gallery figure{ margin:0; border-radius: var(--nc-radius); overflow:hidden; position:relative; background: var(--nc-placeholder); }
.nc-gallery figure img{ width:100%; height:100%; object-fit:cover; transition: transform .8s ease; }
.nc-gallery figure:hover img{ transform: scale(1.07); }
.nc-gallery figure figcaption{ position:absolute; left:12px; bottom:12px; background:#fff; color: var(--nc-ink); font-size: var(--nc-fs-xs); font-weight:600; padding:.35rem .7rem; border-radius:6px; }
.nc-gallery .is-wide{ grid-column: span 2; }
.nc-gallery .is-tall{ grid-row: span 2; }
@media(max-width:767px){ .nc-gallery{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 160px; } }

/* Bande de chiffres clés */
.nc-stats-band{ background:#fff; border-radius: var(--nc-radius-lg); box-shadow: var(--nc-shadow-lg); padding: 2.4rem 2rem; display:grid; grid-template-columns: repeat(4,1fr); gap:1.5rem; position:relative; z-index:3; border:1px solid var(--nc-gray-200); }
.nc-stats-band .nc-stat + .nc-stat{ border-left:1px solid var(--nc-gray-200); }
@media(max-width:767px){ .nc-stats-band{ grid-template-columns: repeat(2,1fr); } .nc-stats-band .nc-stat:nth-child(3){ border-left:none; } }

/* Encadré d'information */
.nc-callout{ display:flex; gap:1.2rem; align-items:flex-start; padding:1.5rem 1.6rem; border-radius: var(--nc-radius); background: var(--nc-sun-light); border-left:4px solid var(--nc-sun); }
.nc-callout i{ font-size:1.4rem; color: var(--nc-sun-dark); margin-top:.2rem; }
.nc-callout h5{ margin-bottom:.3rem; }
.nc-callout p{ margin:0; font-size: var(--nc-fs-sm); }
.nc-callout.is-red{ background: var(--nc-coral-light); border-left-color: var(--nc-coral); }
.nc-callout.is-red i{ color: var(--nc-coral); }

/* Bandeau promo horizontal (image + texte) */
.nc-promo{
  position:relative; border-radius: var(--nc-radius-lg); overflow:hidden; background: var(--nc-ink); color:#fff;
  display:grid; grid-template-columns: 1.1fr 1fr; align-items:stretch; isolation:isolate;
}
.nc-promo .nc-promo-body{ padding: 3.2rem 3rem; }
.nc-promo h2, .nc-promo h3{ color:#fff; }
.nc-promo p{ color: rgba(255,255,255,.62); }
.nc-promo .nc-promo-media{ position:relative; min-height:320px; }
.nc-promo .nc-promo-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nc-promo .nc-promo-media::before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, var(--nc-ink) 0%, rgba(28,29,36,0) 45%); }
.nc-promo.is-sun{ background: var(--nc-sun); color: var(--nc-ink); }
.nc-promo.is-sun h2, .nc-promo.is-sun h3{ color: var(--nc-ink); }
.nc-promo.is-sun p{ color: rgba(28,29,36,.72); }
.nc-promo.is-sun .nc-promo-media::before{ background: linear-gradient(90deg, var(--nc-sun) 0%, rgba(247,195,49,0) 45%); }
@media(max-width:991px){ .nc-promo{ grid-template-columns:1fr; } .nc-promo .nc-promo-body{ padding:2.4rem 1.8rem; } .nc-promo .nc-promo-media::before{ background: linear-gradient(180deg, var(--nc-ink) 0%, rgba(28,29,36,0) 40%); } .nc-promo.is-sun .nc-promo-media::before{ background: linear-gradient(180deg, var(--nc-sun) 0%, rgba(247,195,49,0) 40%); } }

/* Icône + texte en ligne */
.nc-icon-row{ display:flex; gap:1rem; align-items:flex-start; }
.nc-icon-row .nc-icon{ flex-shrink:0; margin:0; width:50px; height:50px; font-size:1.15rem; }
.nc-icon-row h4, .nc-icon-row h5{ margin-bottom:.3rem; }
.nc-icon-row p{ font-size: var(--nc-fs-sm); margin:0; }
.bg-dark .nc-icon-row .nc-icon{ background: rgba(255,255,255,.07); color: var(--nc-sun); }

/* Comparaison avant/après — tableau stylé */
.nc-table{ width:100%; border-collapse: separate; border-spacing:0; background:#fff; border-radius: var(--nc-radius); overflow:hidden; border:1px solid var(--nc-gray-200); font-size: var(--nc-fs-sm); }
.nc-table th, .nc-table td{ padding: 1rem 1.2rem; text-align:left; border-bottom:1px solid var(--nc-gray-200); }
.nc-table thead th{ background: var(--nc-ink); color:#fff; font-weight:600; }
.nc-table tbody tr:last-child td{ border-bottom:none; }
.nc-table tbody tr:hover td{ background: var(--nc-gray-100); }
.nc-table .fa-check{ color: var(--nc-success); }
.nc-table .fa-xmark{ color: var(--nc-coral); }
.nc-table-wrap{ overflow-x:auto; border-radius: var(--nc-radius); }

/* Bandeau newsletter */
.nc-newsletter-box{ background: var(--nc-sun); border-radius: var(--nc-radius-lg); padding: 2.6rem 2.8rem; display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:center; position:relative; overflow:hidden; }
.nc-newsletter-box h3{ margin-bottom:.4rem; }
.nc-newsletter-box p{ margin:0; color: rgba(28,29,36,.7); }
.nc-newsletter-box form{ display:flex; gap:.6rem; background:#fff; padding:6px; border-radius: var(--nc-radius-sm); }
.nc-newsletter-box input{ flex:1; min-width:0; border:none; outline:none; padding:.7rem .9rem; font-size: var(--nc-fs-sm); background:transparent; }
@media(max-width:767px){ .nc-newsletter-box{ grid-template-columns:1fr; padding:2rem 1.5rem; } }

/* Logo partenaires financiers (pastilles texte) */
.nc-partner{ height:84px; border-radius: var(--nc-radius); background:#fff; border:1px solid var(--nc-gray-200); display:flex; align-items:center; justify-content:center; gap:.55rem; font-weight:700; color: var(--nc-gray-500); font-size: var(--nc-fs-md); letter-spacing:-.02em; transition: all var(--nc-transition); }
.nc-partner i{ color: var(--nc-gray-300); transition: color var(--nc-transition); }
.nc-partner:hover{ color: var(--nc-ink); box-shadow: var(--nc-shadow); transform: translateY(-3px); }
.nc-partner:hover i{ color: var(--nc-coral); }

/* Vidéo / image avec bouton lecture */
.nc-play{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:78px; height:78px; border-radius:50%; background: var(--nc-coral); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; z-index:3; box-shadow: 0 0 0 12px rgba(240,72,62,.25); animation: nc-pulse 2.2s infinite; }

/* Utilitaires */
.nc-mt-0{ margin-top:0 !important; } .nc-mb-0{ margin-bottom:0 !important; }
.nc-mt-2{ margin-top:2rem; } .nc-mt-3{ margin-top:3rem; }
.nc-center{ text-align:center; }
.nc-flex-center{ display:flex; justify-content:center; gap:.9rem; flex-wrap:wrap; }
.nc-overlap-top{ margin-top:-70px; position:relative; z-index:4; }
.nc-promo.is-sun .nc-checklist.is-compact li > i{ background: var(--nc-ink); color: var(--nc-sun); }
.nc-promo.is-sun .nc-checklist.is-compact li{ color: var(--nc-ink); }
.nc-promo.is-sun .nc-eyebrow::before{ background: var(--nc-coral); }

/* --------------------------------------------------------------------------
   28. RESPONSIVE — garde-fous mobiles
   -------------------------------------------------------------------------- */
/* Empêche tout débordement horizontal (animations d'entrée AOS, etc.)
   sans créer de conteneur de défilement (préserve la navbar "sticky") */
@supports (overflow: clip){
  html, body{ overflow-x: clip; }
}
/* Grilles définies en ligne (style="grid-template-columns:…") : une colonne sur tablette/mobile */
@media(max-width:991px){
  .nc-grid[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  .nc-process-list[style*="grid-template-columns"]{ grid-template-columns: repeat(2,1fr) !important; }
  .nc-photo-stack{ padding: 0 0 40px 30px; }
  .nc-promo .nc-promo-media{ min-height:240px; }
}
@media(max-width:575px){
  .nc-process-list[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  .nc-hero-compat{ flex-wrap:wrap; }
  .nc-quicksearch{ padding:1.2rem; }
  .nc-quicksearch-tabs .nc-chip{ margin-left:0 !important; }
  .nc-stats-band{ padding:1.6rem 1rem; }
  .nc-newsletter-box form{ flex-direction:column; }
  .nc-plan.is-featured{ transform:none; }
  .nc-form-card{ padding:1.5rem; }
  .nc-cta-band{ padding:70px 0; }
}

/* ==========================================================================
   FORMULAIRES — retours utilisateur (includes/forms.php, assets/js/forms.js)
   ========================================================================== */

/* Champ piège anti-robot : invisible pour les visiteurs */
.nc-hp{ position:absolute !important; left:-10000px !important; top:auto; width:1px; height:1px; overflow:hidden; }

/* Alerte affichée en tête de formulaire après un envoi refusé */
.nc-form-alert{
  display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.2rem; margin:0 0 1.6rem;
  border-radius: var(--nc-radius); font-size: var(--nc-fs-sm); line-height:1.5; text-align:left;
}
.nc-form-alert > i{ font-size:1.15rem; margin-top:.1rem; flex-shrink:0; }
.nc-form-alert strong{ display:block; margin-bottom:.15rem; }
.nc-form-alert ul{ margin:.35rem 0 0; padding-left:1.1rem; }
.nc-form-alert li{ margin-bottom:.15rem; }
.nc-form-alert.is-error{ background: var(--nc-coral-light); color: var(--nc-coral-dark); border:1px solid rgba(240,72,62,.25); }
.nc-form-alert.is-success{ background: var(--nc-success-light); color: var(--nc-success); border:1px solid rgba(31,164,99,.25); }

/* Champ signalé en erreur */
.nc-input.is-invalid, .nc-select.is-invalid, .nc-textarea.is-invalid{
  border-color: var(--nc-coral) !important; box-shadow: 0 0 0 3px rgba(240,72,62,.12);
}
.is-invalid-group{ outline:2px solid rgba(240,72,62,.35); outline-offset:4px; border-radius: var(--nc-radius-sm); }

/* Bouton pendant l'envoi */
.nc-btn.is-loading{ pointer-events:none; opacity:.85; }
.nc-btn.is-loading i{ animation: nc-spin .8s linear infinite; }
@keyframes nc-spin{ to{ transform: rotate(360deg); } }

/* Notifications (toasts) */
.nc-toast-stack{
  position:fixed; z-index: 2000; top: 96px; right: 20px; display:flex; flex-direction:column; gap:.8rem;
  width: min(420px, calc(100vw - 32px));
}
.nc-toast{
  display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.1rem; background:#fff; border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow-lg); border-left:5px solid var(--nc-ink); font-size: var(--nc-fs-sm);
  animation: nc-toast-in .4s cubic-bezier(.2,1,.3,1) both;
}
.nc-toast.is-hiding{ animation: nc-toast-out .3s ease forwards; }
.nc-toast strong{ display:block; color: var(--nc-ink); }
.nc-toast p{ margin:.2rem 0 0; color: var(--nc-gray-700); }
.nc-toast > div{ flex:1; min-width:0; }
.nc-toast-ico{ font-size:1.25rem; margin-top:.05rem; }
.nc-toast.is-success{ border-left-color: var(--nc-success); }
.nc-toast.is-success .nc-toast-ico{ color: var(--nc-success); }
.nc-toast.is-error{ border-left-color: var(--nc-coral); }
.nc-toast.is-error .nc-toast-ico{ color: var(--nc-coral); }
.nc-toast.is-info{ border-left-color: var(--nc-sun-dark); }
.nc-toast.is-info .nc-toast-ico{ color: var(--nc-sun-dark); }
.nc-toast-close{ background:none; border:0; padding:.1rem .2rem; color: var(--nc-gray-500); cursor:pointer; line-height:1; }
.nc-toast-close:hover{ color: var(--nc-ink); }
.nc-toast a{ color: var(--nc-coral); font-weight:600; }
@keyframes nc-toast-in{ from{ opacity:0; transform: translateX(30px); } to{ opacity:1; transform:none; } }
@keyframes nc-toast-out{ to{ opacity:0; transform: translateX(30px); } }
@media (max-width: 600px){
  .nc-toast-stack{ top:auto; bottom: 16px; right:16px; left:16px; width:auto; }
}

/* Bouton comparateur actif (fiche véhicule) */
#vdCompareBtn.is-active{ background: var(--nc-ink); border-color: var(--nc-ink); color: var(--nc-sun); }