/* K.D. LUXURY CARS TANGER — ULTRA LUXURY RESPONSIVE DESIGN SYSTEM */


:root {
  --bg-main: #070709;
  --bg-subtle: #0d0d10;
  --bg-card: #131317;
  --bg-card-hover: #191920;
  --bg-glass: rgba(13, 13, 16, 0.92);

  --gold: #d4af37;
  --gold-light: #f5e4a8;
  --gold-dark: #a67c1e;
  --gold-gradient: linear-gradient(135deg, #bfa044 0%, #fae69e 50%, #9e7922 100%);
  --gold-glow: rgba(212, 175, 55, 0.2);
  --gold-line: rgba(212, 175, 55, 0.25);

  --promo-red: #e04b4b;
  --promo-bg: rgba(224, 75, 75, 0.12);

  --text-main: #f5f3ee;
  --text-muted: #a3a099;
  --text-dim: #817d75;
  --border-subtle: rgba(255, 255, 255, 0.08);

  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-sans);
  line-height: 1.6;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--ease-smooth);
}

button, input, textarea, select {
  font-family: inherit;
}

/* TOP ANNOUNCEMENT BAR */
.top-bar {
  background: #030304;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  font-size: 11px;
  letter-spacing: 0.16em;
  padding: 8px 5vw;
}

.top-bar-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  color: #c9ab57;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.live-dot {
  width: 7px;
  height: 7px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 8px #25d366;
  flex-shrink: 0;
}

.top-bar-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.top-bar-links a {
  color: var(--text-muted);
  transition: var(--ease-smooth);
}

.top-bar-links a:hover {
  color: var(--gold-light);
}

/* MAIN HEADER & NAVIGATION */
.main-header {
  height: 88px;
  background: rgba(7, 7, 9, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
}

/* Le fichier du logo est un carré de 1600 px dont le dessin n'occupe que la bande
   centrale : 27 % de la hauteur, avec 35 % de noir au-dessus et 37 % en dessous
   (mesuré sur le fichier). Affiché « contain » dans une boîte de 56 px, la marque
   ne faisait donc réellement que 16 px de haut — d'où l'impression qu'elle est
   minuscule.

   On recadre à l'affichage plutôt que de retoucher l'image : le propriétaire a
   demandé qu'on ne touche pas au logo, et le fichier part sur le serveur identique
   octet pour octet. `object-fit: cover` dans une boîte de proportion 2,9/1 ne laisse
   voir que la bande utile, et `object-position` la recentre — le dessin est calé à
   48,9 % de la hauteur, pas exactement au milieu. Le fond du fichier étant noir comme
   celui du site, la coupe ne se voit pas. */
.header-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 200px;
  height: 69px;
  overflow: hidden;
}

.header-brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48.9%;
  transition: var(--ease-smooth);
}

.header-brand:hover img {
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.4));
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfcbc3;
  font-weight: 500;
  /* Sans cela, « Notre collection » et « Showroom et VIP » se cassent en deux lignes
     à l'intérieur du lien dès que l'en-tête est un peu à l'étroit : la barre reste
     sur une ligne, mais les libellés s'empilent et l'en-tête a l'air cassé. */
  white-space: nowrap;
  position: relative;
  padding: 8px 0;
  transition: var(--ease-smooth);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--gold-gradient);
  transition: var(--ease-smooth);
}

.nav-link:hover, .nav-link.active {
  color: var(--gold-light);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-menu-toggle {
  display: none;
  background: #111116;
  border: 1px solid var(--border-subtle);
  color: var(--gold-light);
  font-size: 24px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  transition: var(--ease-smooth);
}

.mobile-menu-toggle:hover {
  border-color: var(--gold);
}

/* BUTTONS */
.gold-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  background: var(--gold-gradient);
  color: #070709;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: var(--ease-smooth);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.22);
  text-align: center;
}

.gold-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(212, 175, 55, 0.38);
  filter: brightness(1.08);
}

.gold-btn.small {
  min-height: 38px;
  padding: 0 18px;
  font-size: 11px;
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  border: 1px solid rgba(212, 175, 55, 0.35);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: var(--ease-smooth);
  text-align: center;
}

.ghost-btn:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.08);
  transform: translateY(-2px);
}

.ghost-btn.small {
  min-height: 38px;
  padding: 0 16px;
  font-size: 11px;
}

.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  background: #0f7a3c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: var(--ease-smooth);
  text-align: center;
}

.wa-btn:hover {
  background: #0d6b34;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(18, 140, 70, 0.4);
}

/* TYPOGRAPHY */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.1;
  word-break: break-word;
}

h1 {
  font-size: clamp(38px, 5.5vw, 84px);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(30px, 4vw, 58px);
}

h3 {
  font-size: clamp(22px, 3vw, 32px);
}

h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 400;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 12px;
  display: inline-block;
}

.section-sub {
  color: var(--text-muted);
  font-size: 16px;
  max-width: 620px;
  margin-top: 12px;
  line-height: 1.7;
}

.text-center {
  text-align: center;
}

.text-center .section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* PAGE WRAPPERS & SECTIONS */
.section {
  padding: 90px 6vw;
  position: relative;
}

.section-darker {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

/* SUBPAGE BANNER HERO */
.page-hero {
  padding: 80px 6vw 60px;
  background: 
    radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(13, 13, 16, 0.95) 0%, var(--bg-main) 100%);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--gold);
}

.breadcrumbs span {
  color: var(--border-subtle);
}

/* HOME HERO */
.home-hero {
  min-height: 85vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 100px 6vw;
  overflow: hidden;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  background: url("assets/showroom-panoramic-hall.webp") center 35% / cover no-repeat;
  filter: brightness(0.6) saturate(1.1);
  transform: scale(1.02);
  transition: transform 10s ease;
}

.home-hero:hover .home-hero-bg {
  transform: scale(1.05);
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 75% 35%, rgba(212, 175, 55, 0.16), transparent 45%),
    linear-gradient(90deg, rgba(7, 7, 9, 0.98) 0%, rgba(7, 7, 9, 0.85) 45%, rgba(7, 7, 9, 0.4) 100%),
    linear-gradient(0deg, rgba(7, 7, 9, 1) 0%, transparent 22%);
}

.home-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.prestige-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--gold-line);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold-light);
  font-weight: 600;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.home-hero-content > p {
  color: #cfcac0;
  font-size: 17px;
  line-height: 1.7;
  margin: 24px 0 35px;
  max-width: 640px;
}

.home-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.home-hero-stats {
  display: flex;
  gap: 45px;
  margin-top: 50px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 25px;
  flex-wrap: wrap;
}

.stat-box {
  border-left: 2px solid var(--gold);
  padding-left: 16px;
}

.stat-box strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 30px;
  color: var(--gold-light);
  line-height: 1;
}

.stat-box span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* CAR CARDS & GRIDS */
.car-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1440px;
  margin: 0 auto;
}

/* La carte est un lien depuis que chaque vehicule a sa page : il faut lui retirer la
   decoration de lien, sans quoi tous les textes de la carte seraient soulignes en bleu. */
a.car-card,
a.car-card:hover,
a.car-card:visited {
  text-decoration: none;
  color: inherit;
}

.car-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: var(--ease-smooth);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.car-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-line);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(212, 175, 55, 0.08);
}

.car-card.has-promo {
  border-color: rgba(212, 175, 55, 0.35);
}

/* Les photos des véhicules sont toutes en portrait : mesurées, elles vont de 0,66 à
   0,80 de rapport largeur/hauteur. Au format 4/5, la boîte les montrait presque en
   entier mais faisait 576 px de haut en trois colonnes sur un écran de 1440, et la
   carte dépassait 730 px — trop long, la page n'en finissait plus. Le 4/3 ramène la
   boîte à 346 px : il faut accepter que le cadrage coupe le haut et le bas de la
   photo, la fiche détaillée reste l'endroit où on la voit en entier. */
.car-image {
  aspect-ratio: 4 / 3;
  position: relative;
  background: #09090b;
  overflow: hidden;
}

.car-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.car-card:hover .car-image img {
  transform: scale(1.06);
}

/* Le nombre de photos, en bas à droite de la vignette : il dit qu'il y a autre chose
   à voir en ouvrant la fiche, ce que rien n'indiquait. */
.car-photo-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #efece6;
  background: rgba(8, 8, 10, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Une voiture vendue n'est plus à vendre : sa photo est désaturée, pour qu'on la
   distingue d'un coup d'œil sans avoir à lire le bandeau. */
.car-card.is-sold .car-image img {
  filter: grayscale(0.6) brightness(0.72);
}

.car-card.is-sold:hover .car-image img {
  filter: grayscale(0.25) brightness(0.9);
}

.car-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  padding: 6px 12px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 2px;
}

.badge-available {
  background: rgba(7, 7, 9, 0.88);
  color: var(--gold-light);
  border: 1px solid var(--gold-line);
  backdrop-filter: blur(8px);
}

.badge-promo {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--gold-light);
  font-weight: 700;
}

.badge-reserved {
  background: linear-gradient(135deg, rgba(140, 92, 10, 0.97), rgba(130, 85, 10, 0.95));
  color: #fff;
  border: 1px solid rgba(255, 215, 0, 0.6);
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.badge-sold {
  background: rgba(18, 18, 22, 0.95);
  color: #8c8980;
  border: 1px solid #333;
}

/* Ces quatre proprietes etaient posees sur .car-card:hover .car-body : le corps de
   la carte n'avait donc ni marge interne ni disposition en colonne tant qu'on ne
   survolait pas — c'est-a-dire jamais, sur un telephone. Le texte se decalait de
   24 px a l'arrivee de la souris, et .car-footer { margin-top: auto } ne pouvait
   pas plaquer le pied en bas, donc les cartes d'une meme rangee ne s'alignaient pas. */
.car-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.car-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

.car-year {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
}

.car-power-pill {
  color: var(--text-muted);
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.car-title {
  font-size: 24px;
  /* Les titres tiennent sur une ou deux lignes selon le modele : « Audi RS3 » sur une,
     « Ford Mustang Mach-E » sur deux. Tout ce qui suit dans la carte — caracteristiques,
     prix, bouton — se decalait donc de 26 px d'une carte a l'autre dans la meme rangee.
     On reserve la hauteur de deux lignes : les cartes d'une rangee s'alignent, quel que
     soit le titre. Inutile en une seule colonne, ou il n'y a rien a aligner a cote. */
  line-height: 1.25;
  margin-bottom: 12px;
  color: #fff;
  font-weight: 600;
}

@media (min-width: 641px) {
  .car-title {
    min-height: 2.5em;
  }
}

.car-specs-row {
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.spec-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 6px;
  vertical-align: middle;
}

.car-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.car-price-box {
  display: flex;
  flex-direction: column;
  /* L'ancien prix barre n'existe que sur les vehicules en promotion. Sans lui, le bloc
     perdait 15 px (13 px de ligne + 2 px de marge) et le prix du Tiguan tombait 15 px plus
     bas que celui de ses voisins dans la meme rangee. On reserve la place des deux lignes
     — 15 px pour l'ancien prix, 27,5 px pour le prix courant (25 px a 1,1) — et on cale le
     contenu en bas : les prix d'une rangee sont sur la meme ligne, promotion ou pas. */
  min-height: 43px;
  justify-content: flex-end;
}

.car-old-price {
  text-decoration: line-through;
  color: #807d76;
  font-size: 13px;
  font-family: var(--font-sans);
  line-height: 1;
  margin-bottom: 2px;
}

.car-current-price {
  font-family: var(--font-serif);
  font-size: 25px;
  color: var(--gold-light);
  font-weight: 700;
  line-height: 1.1;
}

.car-current-price.promo-highlight {
  color: #ffe89e;
}

.car-view-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  transition: var(--ease-smooth);
  white-space: nowrap;
}

.car-card:hover .car-view-btn {
  border-color: var(--gold);
  color: var(--gold-light);
}

/* CATALOGUE TOOLBAR & SEARCH */
.catalogue-toolbar {
  max-width: 1440px;
  margin: 0 auto 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.search-box-wrapper {
  position: relative;
  min-width: 280px;
  flex: 1;
  max-width: 480px;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--text-dim);
  pointer-events: none;
}

.catalogue-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: #fff;
  padding: 14px 16px 14px 44px;
  font-size: 14px;
  outline: none;
  transition: var(--ease-smooth);
}

.catalogue-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

.catalogue-filter-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.catalogue-filter-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ease-smooth);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.filter-badge-count {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 10px;
}

.catalogue-filter-btn:hover, .catalogue-filter-btn.active {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.08);
}

.catalogue-filter-btn.active .filter-badge-count {
  background: var(--gold);
  color: #070709;
}

.catalogue-meta-bar {
  max-width: 1440px;
  margin: 0 auto 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 10px;
}

.empty-results {
  grid-column: 1 / -1;
  padding: 70px 20px;
  text-align: center;
  background: var(--bg-card);
  border: 1px dashed var(--border-subtle);
}

.empty-results h3 {
  font-size: 26px;
  margin-bottom: 8px;
}

.empty-results p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* Sur l'accueil, les vignettes des véhicules en vedette adoptent un format cinématique (16/10)
   avec une hauteur maîtrisée (max 240px) pour éviter des photos démesurées,
   mettant la silhouette du véhicule en valeur tout en équilibrant la hauteur de la carte. */
#featuredGrid .car-image {
  aspect-ratio: 16 / 10;
  max-height: 240px;
}

#featuredGrid .car-image img {
  object-position: center 50%;
}

/* VÉHICULES DÉJÀ VENDUS — section à part, sous la grille du catalogue */
.sold-section {
  margin-top: 70px;
  padding-top: 50px;
  border-top: 1px solid var(--border-subtle);
}

.sold-section[hidden] {
  display: none;
}

.sold-section-head {
  margin-bottom: 34px;
}

.sold-section-title {
  font-size: 30px;
  margin-bottom: 10px;
}

.sold-section-sub {
  color: var(--text-muted);
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.7;
}

html[dir="rtl"] .sold-section-sub {
  margin-right: 0;
  margin-left: auto;
}

/* SHOWROOM & VIP PANELS */
.showroom-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1440px;
  margin: 0 auto 60px;
}

.feature-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--ease-smooth);
}

.feature-panel:hover {
  border-color: var(--gold-line);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

.feature-panel-img {
  height: 360px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.feature-panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.feature-panel:hover .feature-panel-img img {
  transform: scale(1.05);
}

.feature-panel-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(7, 7, 9, 0.88);
  color: var(--gold-light);
  border: 1px solid var(--gold-line);
  padding: 6px 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.feature-panel-zoom {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(7, 7, 9, 0.75);
  color: #fff;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  backdrop-filter: blur(8px);
}

.feature-panel-body {
  padding: 35px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.feature-panel .feature-panel-body h2,
.feature-panel-body h3 {
  font-size: 30px;
  margin-bottom: 12px;
}

.feature-panel-body p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.feature-bullets {
  list-style: none;
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.feature-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #cfcbc3;
}

.feature-bullets li::before {
  content: "—";
  color: var(--gold);
  flex-shrink: 0;
}









/* SERVICES DETAILED GRID */
.services-detailed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1440px;
  margin: 0 auto;
}

.service-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 40px 32px;
  position: relative;
  transition: var(--ease-smooth);
  display: flex;
  flex-direction: column;
}

.service-box:hover {
  transform: translateY(-8px);
  border-color: var(--gold-line);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

.services-detailed-grid .service-box h2,
.service-box h3 {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 14px;
  color: #fff;
}

.service-box p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}

.service-box-cta {
  margin-top: auto;
  padding-top: 25px;
  border-top: 1px solid var(--border-subtle);
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* PROCESS STEPS (SERVICES & ACQUISITION) */
.process-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
}

.step-card {
  background: var(--bg-card);
  padding: 32px 22px;
  border: 1px solid var(--border-subtle);
  text-align: center;
  transition: var(--ease-smooth);
}

.step-card:hover {
  border-color: var(--gold-line);
  transform: translateY(-4px);
}

.step-digit {
  font-size: 30px;
  font-family: var(--font-serif);
  color: var(--gold);
  margin-bottom: 12px;
  font-weight: 700;
  line-height: 1;
}

.step-card h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #fff;
}

.step-card p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* CONTACT PAGE SPECIFICS */
.contact-split-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  max-width: 1440px;
  margin: 0 auto;
}

.contact-card-list {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.contact-info-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  transition: var(--ease-smooth);
}

.contact-info-card:hover {
  border-color: var(--gold-line);
}

.contact-card-icon {
  font-size: 22px;
  color: var(--gold);
  line-height: 1.2;
  flex-shrink: 0;
}

.contact-info-card strong {
  display: block;
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
}

.contact-info-card p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.contact-form-container {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 45px 40px;
}

.form-title-group {
  margin-bottom: 25px;
}

.form-title-group h3 {
  font-size: 30px;
  margin-bottom: 8px;
}

.form-title-group p {
  color: var(--text-muted);
  font-size: 16px;
}

.luxury-form {
  display: grid;
  gap: 18px;
}

.form-columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.input-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-field-group label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cfcbc3;
  font-weight: 500;
}

.luxury-form input, .luxury-form textarea, .luxury-form select {
  background: #09090c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 14px 16px;
  font-size: 14px;
  outline: none;
  transition: var(--ease-smooth);
  width: 100%;
}

.luxury-form input:focus, .luxury-form textarea:focus, .luxury-form select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.18);
}

/* FOOTER — HAUTE VISIBILITÉ & DESIGN LUXE HORS PAIR */
.site-footer {
  background: linear-gradient(180deg, #0e0e13 0%, #060608 100%);
  border-top: 1.5px solid rgba(212, 175, 55, 0.35);
  padding: 70px 6vw 35px;
  position: relative;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 228, 168, 0.6) 50%, transparent 100%);
}

.footer-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto 50px;
}

.footer-brand img {
  width: 230px;
  max-width: 100%;
  height: 79px;
  object-fit: cover;
  object-position: center 48.9%;
  margin-bottom: 20px;
}

.footer-brand p {
  color: #e5e2db !important;
  font-size: 15px;
  line-height: 1.75;
  max-width: 360px;
  font-weight: 400;
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light) !important;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-col h4::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1.5px;
  background: var(--gold);
}

.footer-col-nav {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-col-nav a {
  color: #dedbd2 !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: var(--ease-smooth);
  display: inline-block;
  width: fit-content;
}

.footer-col-nav a:hover {
  color: #ffffff !important;
  transform: translateX(6px);
  text-shadow: 0 0 12px rgba(245, 228, 168, 0.6);
}

html[dir="rtl"] .footer-col-nav a:hover {
  transform: translateX(-6px);
}

.footer-col p {
  color: #cfcbc2 !important;
  font-size: 15px;
  line-height: 1.6;
}

.footer-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.28);
  color: #dedbd2;
  transition: var(--ease-smooth);
}

.footer-social-icon:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--gold-light);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3);
}

.footer-social-icon svg {
  display: block;
}


.footer-bottom-row {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #d1cfc7 !important;
  font-size: 13px;
  font-weight: 500;
  max-width: 1440px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 15px;
}

.footer-bottom-row div:first-child span,
.footer-bottom-row div:first-child {
  color: #dedbd2;
}

.footer-bottom-row div:last-child {
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: 0.04em;
}

@media (max-width: 992px) {
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding: 50px 5vw 30px;
  }
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer-brand p {
    max-width: 100%;
  }
  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* CAR MODAL WINDOW */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.modal-window {
  position: relative;
  z-index: 2;
  width: min(1180px, 94vw);
  max-height: 90vh;
  background: #111115;
  /* La fenetre etait cernee d'un lisere dore et baignee d'une lueur doree de 50 px : un
     encadrement qui faisait le tour de toute la fiche des qu'on ouvrait un vehicule. Il
     part. L'ombre portee noire reste, seule : elle suffit a detacher la fenetre du fond
     sans l'enfermer dans un cadre. */
  border: 0;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.9);
  display: grid;
  /* La fiche etait en deux colonnes, photo a gauche et informations a droite : la
     photo n'avait qu'un peu plus de la moitie de la largeur, et comme les photos du
     showroom sont en portrait, le recadrage en coupait pres de la moitie. En pile,
     elle prend toute la largeur de la fenetre et gagne 50 % de hauteur. */
  grid-template-columns: 1fr;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal-close-trigger {
  position: absolute;
  right: 14px;
  top: 14px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 44px;
  height: 44px;
  font-size: 26px;
  z-index: 10;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--ease-smooth);
}

.modal-close-trigger:hover {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

.modal-left-gallery {
  background: #09090b;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Sans cela, la rangee de vignettes impose sa largeur naturelle a la colonne de
     grille : mesuree a 1368 px dans une fenetre de 1180, donc rognee sur les bords.
     min-width: 0 autorise l'element a etre plus etroit que son contenu, et la rangee
     defile alors comme prevu. */
  min-width: 0;
}

.modal-right-info,
.modal-left-gallery > * {
  min-width: 0;
}

.modal-main-display {
  position: relative;
  /* 420 px auparavant, dans une colonne etroite. En pile, une boite pleine largeur
     laissait 640 px de noir de chaque cote d'une photo en portrait : la voiture
     paraissait plus petite qu'avant. La boite prend donc le format des photos (4/5)
     et se centre — la photo est vue en entier, et gagne 52 % de hauteur. Une photo
     d'interieur, en paysage, s'y inscrit avec des bandes en haut et en bas, sur un
     fond noir ou elles ne se voient pas. */
  height: min(70vh, 640px);
  width: auto;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  max-width: 100%;
  background: #030304;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.modal-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: rgba(7, 7, 9, 0.8);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: var(--ease-smooth);
  backdrop-filter: blur(10px);
  user-select: none;
}

.modal-nav-arrow:hover {
  background: var(--gold);
  color: #070709;
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.08);
}

.modal-nav-arrow.prev {
  left: 12px;
}

.modal-nav-arrow.next {
  right: 12px;
}

.modal-photo-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(7, 7, 9, 0.88);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  z-index: 5;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}

.modal-fullscreen-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(7, 7, 9, 0.85);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  z-index: 6;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: var(--ease-smooth);
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
}

.modal-fullscreen-btn:hover {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
  transform: scale(1.05);
}

.modal-main-display img {
  width: 100%;
  height: 100%;
  /* « contain » et non « cover » : la photo est desormais vue en entier, sans rien
     couper. Le fond de la boite est noir comme celui de la fiche, les bandes laterales
     d'une photo en portrait ne se voient donc pas. */
  object-fit: contain;
  transition: opacity 0.2s ease;
  cursor: zoom-in;
}

.modal-thumbs-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}

.modal-thumb {
  width: 85px;
  height: 60px;
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: var(--ease-smooth);
}

.modal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-thumb.active, .modal-thumb:hover {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.modal-right-info {
  padding: 40px 35px;
  /* Ce bloc defilait pour lui-meme a cote de la photo. En pile, c'est la fenetre
     entiere qui defile : deux ascenseurs imbriques seraient penibles. */
  overflow-y: visible;
  max-height: none;
}

.modal-status-badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  font-weight: 700;
  margin-bottom: 12px;
}

.modal-status-badge.available {
  background: rgba(212, 175, 55, 0.1);
  color: var(--gold-light);
  border: 1px solid var(--gold-line);
}

.modal-status-badge.promo {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--gold-light);
}

.modal-status-badge.reserved {
  background: linear-gradient(135deg, rgba(140, 92, 10, 0.97), rgba(130, 85, 10, 0.95));
  color: #fff;
  border: 1px solid rgba(255, 215, 0, 0.6);
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
}

.modal-status-badge.sold {
  background: #1c1c22;
  color: #8c8980;
  border: 1px solid #3a3a44;
}

.modal-subtitle {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

.modal-right-info h2 {
  font-size: 38px;
  margin: 6px 0 14px;
  color: #fff;
}

.modal-price-container {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.modal-old-price {
  text-decoration: line-through;
  color: #807d76;
  font-size: 18px;
}

.modal-main-price {
  font-family: var(--font-serif);
  font-size: 34px;
  color: var(--gold-light);
  font-weight: 700;
}

.modal-main-price.promo-glow {
  color: #ffe694;
}

.modal-promo-tag {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.modal-eur-tag {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e0e0e0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.modal-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.02);
  /* Ligne neutre et non doree : le bloc reste delimite sans remettre un cadre dore
     au milieu de la fiche. */
  border: 1px solid var(--border-subtle);
  padding: 12px;
  border-radius: 4px;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #141418;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s, transform 0.2s;
}

.highlight-item:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

.hi-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.hi-texts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8c8980;
  margin-bottom: 2px;
}

.hi-val {
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-desc-text {
  /* Le texte d'explication etait en gris sourd et en 15 px dans une colonne etroite.
     La fiche etant devenue une page, la place ne manque plus : on l'aere et on l'eclaircit
     pour qu'il se lise vraiment. */
  color: #c9c6bf;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 22px;
}

.modal-options-block {
  margin-bottom: 24px;
}

.modal-options-headline {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 10px;
}

.modal-options-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #16161c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e2e8;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 20px;
  transition: all 0.2s ease;
}

.option-chip:hover {
  border-color: var(--gold);
  color: #fff;
  background: rgba(212, 175, 55, 0.08);
}

.chip-check {
  color: var(--gold);
  font-style: normal;
  font-weight: 800;
}

.modal-specs-headline {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 12px;
}

.modal-specs-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
}

.spec-cell {
  background: #141418;
  padding: 12px 14px;
}

.spec-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8b877f;
  margin-bottom: 2px;
}

.spec-val {
  font-size: 15px;
  color: #fff;
  font-weight: 500;
}

.modal-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-dealer-badge {
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(212, 175, 55, 0.05);
  /* Ligne neutre, meme raison que le bloc des points forts juste au-dessus. */
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
}

.dealer-badge-header {
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.dealer-check {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  background: var(--gold);
  color: #000;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
}

.dealer-badge-sub {
  font-size: 11px;
  color: #8c8980;
  margin: 0;
  line-height: 1.4;
}

/* CAR FULLSCREEN CINEMA LIGHTBOX (AUTOSCOUT STYLE) */
.car-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4, 4, 6, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  overflow: hidden;
}

.car-lightbox-overlay.active {
  display: flex;
}

.car-lightbox-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.car-lightbox-container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 1600px;
}

.car-lightbox-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

.car-lightbox-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--gold-light);
}

.car-lightbox-counter {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #a0a0a8;
  font-weight: 600;
}

.car-lightbox-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--ease-smooth);
}

.car-lightbox-close:hover {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
  transform: scale(1.1);
}

.car-lightbox-body {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 14px 0;
}

.car-lightbox-img-wrap {
  max-width: 90vw;
  max-height: calc(85vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.car-lightbox-img-wrap img {
  max-width: 100%;
  max-height: calc(85vh - 160px);
  object-fit: contain;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.car-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(10, 10, 14, 0.85);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  font-size: 30px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  transition: var(--ease-smooth);
}

.car-lightbox-arrow:hover {
  background: var(--gold);
  color: #000;
  transform: translateY(-50%) scale(1.1);
}

.car-lightbox-arrow.prev {
  left: 10px;
}

.car-lightbox-arrow.next {
  right: 10px;
}

.car-lightbox-thumbs-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
  justify-content: flex-start;
}

.car-lb-thumb {
  width: 75px;
  height: 52px;
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
  transition: var(--ease-smooth);
}

.car-lb-thumb:hover, .car-lb-thumb.active {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
  transform: scale(1.05);
}

.car-lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .modal-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .car-lightbox-arrow {
    width: 42px;
    height: 42px;
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .modal-highlights-grid {
    grid-template-columns: 1fr;
  }
}

/* SHOWROOM LIGHTBOX MODAL */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 120;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lightbox-modal {
  position: relative;
  z-index: 2;
  max-width: 94vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-modal img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  /* Meme motif que la fiche : la photo en plein ecran etait cernee d'un lisere dore.
     L'ombre noire suffit a la detacher du fond. */
  border: 0;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
}

.lightbox-caption-text {
  margin-top: 14px;
  color: var(--gold-light);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-align: center;
}

.lightbox-close-btn {
  position: absolute;
  top: -48px;
  right: 0;
  background: rgba(7, 7, 9, 0.85);
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--ease-smooth);
}

.lightbox-close-btn:hover {
  background: var(--gold);
  color: #000;
}

/* FLOATING WHATSAPP BUTTON */
.floating-vip-wa {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #0f7a3c;
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(18, 140, 70, 0.45);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--ease-smooth);
}

.floating-vip-wa:hover {
  background: #0d6b34;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 15px 35px rgba(18, 140, 70, 0.6);
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS (COMPUTERS, TABLETS, SMARTPHONES)
   ========================================================================== */

/* LARGE TABLETS & SMALL LAPTOPS (max-width: 1140px) */
@media (max-width: 1140px) {
  .car-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .services-detailed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .showroom-feature-grid {
    grid-template-columns: 1fr;
  }
  .contact-split-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }
  .modal-window {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }
  .modal-main-display {
    /* Sur un ecran etroit, c'est la largeur qui commande : la photo prend toute la
       place disponible et garde le format 4/5. Une hauteur fixe l'aurait rendue plus
       petite qu'avant. */
    height: auto;
    width: 100%;
    max-height: 72vh;
  }
  .modal-right-info {
    overflow-y: visible;
    max-height: none;
    padding: 30px 25px;
  }
}

/* TABLETS & LARGE MOBILE (max-width: 860px) */
@media (max-width: 860px) {
  .main-header {
    height: 80px;
  }

  .header-nav {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    /* 2 % de transparence suffisaient a laisser passer le titre blanc de
       l'accueil : on lisait « Voitures de sport et de prestige a Tanger » au
       travers des liens du menu. Un panneau de navigation se pose sur la page,
       il ne la laisse pas transparaitre. Le flou d'arriere-plan n'a plus d'objet
       sous un fond opaque : il est retire, et avec lui son cout de rendu. */
    background: #0a0a0d;
    border-bottom: 2px solid var(--gold);
    flex-direction: column;
    padding: 30px 6vw 40px;
    gap: 22px;
    z-index: 100;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95);
  }

  .header-nav.open {
    display: flex;
    animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .nav-link {
    font-size: 15px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 12px;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .header-actions .gold-btn,
  .header-actions .ghost-btn {
    display: none;
  }



  .home-hero-stats {
    flex-direction: column;
    gap: 18px;
  }

  .catalogue-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    /* Sans cela la barre enveloppe en colonnes et sa ligne prend la largeur du
       plus large enfant — la bande de filtres faisait 942 px dans un parent de
       345 px, et debordait au lieu de defiler. */
    flex-wrap: nowrap;
  }

  .search-box-wrapper {
    max-width: 100%;
  }

  .catalogue-filter-group {
    overflow-x: auto;
    /* Un element flex refuse par defaut de devenir plus etroit que son contenu :
       il faut l'y autoriser pour que le defilement interne prenne le relais. */
    min-width: 0;
    width: 100%;
    flex-wrap: nowrap;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-line) transparent;
  }
}

/* SMARTPHONES & MOBILE PHONES (max-width: 640px) */
@media (max-width: 640px) {
  /* Prevent iOS zoom on inputs */
  input, select, textarea {
    font-size: 16px !important;
  }

  .top-bar {
    padding: 8px 4vw;
  }

  .top-bar-inner {
    font-size: 9.5px;
    justify-content: center;
    text-align: center;
    gap: 8px;
  }

  .top-bar-left, .top-bar-links {
    justify-content: center;
  }

  .main-header {
    padding: 0 4vw;
  }

  .section {
    padding: 60px 4vw;
  }

  .page-hero {
    padding: 60px 4vw 40px;
  }

  .home-hero {
    padding: 70px 4vw 60px;
    min-height: auto;
  }

  .home-hero-content > p {
    font-size: 15px;
    margin: 18px 0 28px;
  }

  .car-grid-3 {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #featuredGrid .car-image {
    aspect-ratio: 16 / 10;
    max-height: 220px;
  }

  .car-body {
    padding: 20px;
  }

  .car-title {
    font-size: 22px;
  }

  .services-detailed-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .process-steps-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-box {
    padding: 30px 22px;
  }


  .catalogue-filter-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .feature-panel-img {
    height: 230px;
  }

  .feature-panel-body {
    padding: 24px 20px;
  }

  .feature-panel .feature-panel-body h2,
.feature-panel-body h3 {
    font-size: 24px;
  }

  .form-columns-2 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-form-container {
    padding: 25px 18px;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-bottom-row {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  /* MODAL ON SMARTPHONE */
  .modal-window {
    width: 96vw;
    max-height: 94vh;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .modal-close-trigger {
    width: 44px;
    height: 44px;
    font-size: 24px;
    right: 10px;
    top: 10px;
    z-index: 10;
  }

  .modal-left-gallery {
    padding: 14px;
    gap: 10px;
    flex-shrink: 0;
  }

  .modal-main-display {
    /* Sur un ecran etroit, c'est la largeur qui commande : la photo prend toute la
       place disponible et garde le format 4/5. Une hauteur fixe l'aurait rendue plus
       petite qu'avant. */
    height: auto;
    width: 100%;
    max-height: 72vh;
  }

  /* Évite toute collision avec le bouton de fermeture .modal-close-trigger (top-right) */
  .modal-fullscreen-btn {
    top: 10px;
    left: 10px;
    right: auto;
    font-size: 10px;
    padding: 5px 9px;
  }

  .modal-nav-arrow {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .modal-nav-arrow.prev {
    left: 6px;
  }

  .modal-nav-arrow.next {
    right: 6px;
  }

  .modal-thumbs-row {
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .modal-thumb {
    width: 64px;
    height: 46px;
  }

  .modal-right-info {
    padding: 18px 14px 28px;
    overflow-y: visible;
  }

  .modal-right-info h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  .modal-main-price {
    font-size: 26px;
  }

  .modal-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 8px;
  }

  .highlight-item {
    padding: 8px 6px;
    gap: 6px;
  }

  .hi-icon {
    font-size: 16px;
  }

  .hi-label {
    font-size: 8.5px;
  }

  .hi-val {
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
  }

  .modal-specs-table {
    grid-template-columns: 1fr;
  }

  .modal-dismiss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
  }

  /* CINEMA LIGHTBOX (AUTOSCOUT) ON SMARTPHONE */
  .car-lightbox-overlay {
    padding: 10px 12px;
  }

  .car-lightbox-topbar {
    padding-bottom: 8px;
    gap: 8px;
  }

  .car-lightbox-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50vw;
  }

  .car-lightbox-counter {
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .car-lightbox-close {
    width: 36px;
    height: 36px;
    font-size: 20px;
    flex-shrink: 0;
  }

  .car-lightbox-arrow {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .car-lightbox-arrow.prev {
    left: 4px;
  }

  .car-lightbox-arrow.next {
    right: 4px;
  }

  .car-lightbox-thumbs-row {
    padding: 6px 0;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .car-lb-thumb {
    width: 52px;
    height: 38px;
  }

  /* LIGHTBOX ON SMARTPHONE */
  .lightbox-close-btn {
    top: 10px;
    right: 10px;
    z-index: 10;
  }

  .lightbox-modal img {
    max-height: 65vh;
  }

  .lightbox-caption-text {
    font-size: 12px;
  }

  /* FLOATING WHATSAPP COMPACT ON MOBILE */
  .floating-vip-wa {
    bottom: 18px;
    right: 18px;
    padding: 10px 18px;
    font-size: 11px;
  }
}

/* SMALL PHONES (max-width: 480px) */
@media (max-width: 480px) {
  .home-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .home-hero-actions .gold-btn,
  .home-hero-actions .ghost-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .home-hero h1 {
    font-size: clamp(28px, 8.5vw, 36px);
    line-height: 1.15;
  }

  .section h2 {
    font-size: clamp(24px, 6vw, 30px);
  }

  .car-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .car-view-btn {
    width: 100%;
    text-align: center;
    padding: 10px;
    display: block;
  }
}

/* ==========================================================================
   DIAGONAL SOLD RIBBON (VENDU / SOLD / مباع) — JAUNE ÉCLATANT ULTRA-VISIBLE
   ========================================================================== */
.car-image {
  position: relative;
  overflow: hidden;
}

.diagonal-sold-ribbon {
  position: absolute;
  top: 22px;
  left: -48px;
  width: 185px;
  background: linear-gradient(135deg, #ffe066 0%, #ffd700 45%, #e5a500 100%);
  color: #08080a;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 7px 0;
  transform: rotate(-45deg);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.75), 0 0 10px rgba(255, 215, 0, 0.35);
  z-index: 15;
  pointer-events: none;
  border-top: 1.5px solid rgba(255, 255, 255, 0.7);
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.modal-diagonal-sold-ribbon {
  position: absolute;
  top: 32px;
  left: -65px;
  width: 250px;
  background: linear-gradient(135deg, #ffe066 0%, #ffd700 45%, #e5a500 100%);
  color: #08080a;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 10px 0;
  transform: rotate(-45deg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 215, 0, 0.4);
  z-index: 30;
  pointer-events: none;
  border-top: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.diagonal-reserved-ribbon {
  position: absolute;
  top: 22px;
  left: -48px;
  width: 185px;
  background: linear-gradient(135deg, #a04e00 0%, #8a4400 100%);
  color: #ffffff;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 0;
  transform: rotate(-45deg);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.75), 0 0 10px rgba(230, 126, 34, 0.4);
  z-index: 15;
  pointer-events: none;
  border-top: 1.5px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.modal-diagonal-reserved-ribbon {
  position: absolute;
  top: 32px;
  left: -65px;
  width: 250px;
  background: linear-gradient(135deg, #a04e00 0%, #8a4400 100%);
  color: #ffffff;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 0;
  transform: rotate(-45deg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(230, 126, 34, 0.5);
  z-index: 30;
  pointer-events: none;
  border-top: 2px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   MULTILINGUAL SWITCHER (FR | EN | العربية)
   ========================================================================== */
.lang-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 4px 10px;
  transition: var(--ease-smooth);
}

.lang-selector:hover {
  border-color: var(--gold-line);
  background: rgba(212, 175, 55, 0.08);
}

.lang-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 12px;
  transition: var(--ease-smooth);
  /* Cible tactile : 17 px de haut environ sans cela, sous le minimum de 24 px. */
  min-height: 26px;
  display: inline-flex;
  align-items: center;
}

.lang-btn:hover {
  color: #fff;
}

.lang-btn.active {
  color: #0b0b0e;
  background: var(--gold-gradient);
  font-weight: 700;
  box-shadow: 0 2px 8px var(--gold-glow);
}

.lang-divider {
  color: rgba(255, 255, 255, 0.18);
  font-size: 10px;
  user-select: none;
}

/* In header-actions */
.header-actions .lang-selector {
  margin-right: 6px;
}

/* ==========================================================================
   ARABIC & RTL SYSTEM (html[dir="rtl"])
   ========================================================================== */
html[dir="rtl"] {
  --font-serif: "Amiri", "Cormorant Garamond", serif;
  --font-sans: "Cairo", "Outfit", sans-serif;
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] body {
  font-family: var(--font-sans);
  text-align: right;
}

html[dir="rtl"] h1, 
html[dir="rtl"] h2, 
html[dir="rtl"] h3, 
html[dir="rtl"] h4,
html[dir="rtl"] .home-hero h1,
html[dir="rtl"] .section-title {
  font-family: var(--font-serif);
  letter-spacing: 0 !important;
}

/* Diagonal Sold Ribbon in RTL */
html[dir="rtl"] .diagonal-sold-ribbon {
  left: auto;
  right: -48px;
  transform: rotate(45deg);
}

html[dir="rtl"] .modal-diagonal-sold-ribbon {
  left: auto;
  right: -65px;
  transform: rotate(45deg);
}

/* Top bar RTL */
html[dir="rtl"] .top-bar-inner {
  direction: rtl;
}

html[dir="rtl"] .top-bar-left {
  flex-direction: row-reverse;
}

/* Header & Navigation RTL */
html[dir="rtl"] .main-header {
  direction: rtl;
}

html[dir="rtl"] .header-actions {
  flex-direction: row-reverse;
}

html[dir="rtl"] .header-actions .lang-selector {
  margin-right: 0;
  margin-left: 6px;
}

html[dir="rtl"] .header-nav {
  direction: rtl;
}

@media (max-width: 860px) {
  html[dir="rtl"] .header-nav {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  html[dir="rtl"] .header-nav.open {
    transform: translateX(0);
  }
}

/* Breadcrumbs RTL */
html[dir="rtl"] .breadcrumbs {
  direction: rtl;
}

/* Numbers, Phone & Prices maintain clean LTR appearance */
html[dir="rtl"] .price,
html[dir="rtl"] .car-price,
html[dir="rtl"] .spec-val-num,
html[dir="rtl"] .kpi-value,
html[dir="rtl"] .tel-number,
html[dir="rtl"] .ltr-protect {
  direction: ltr;
  display: inline-block;
  unicode-bidi: embed;
}

/* Arrows flip in RTL */
html[dir="rtl"] .arrow-icon-flip {
  transform: scaleX(-1);
  display: inline-block;
}

/* Floating WhatsApp position in RTL */
html[dir="rtl"] .floating-vip-wa {
  right: auto;
  left: 28px;
}

/* Modal layout RTL */
html[dir="rtl"] .modal-window {
  direction: rtl;
}

html[dir="rtl"] .modal-close-trigger {
  right: auto;
  left: 14px;
}

html[dir="rtl"] .modal-right-info {
  text-align: right;
}

html[dir="rtl"] .modal-right-info h2 {
  text-align: right;
}

html[dir="rtl"] .spec-cell {
  text-align: right;
}

html[dir="rtl"] .modal-dealer-badge {
  text-align: right;
}

html[dir="rtl"] .car-lightbox-topbar {
  direction: rtl;
}

@media (max-width: 640px) {
  html[dir="rtl"] .modal-fullscreen-btn {
    left: auto;
    right: 10px;
  }
  html[dir="rtl"] .modal-close-trigger {
    right: auto;
    left: 10px;
  }
}

/* Form fields RTL */
html[dir="rtl"] .luxury-form input,
html[dir="rtl"] .luxury-form textarea,
html[dir="rtl"] .luxury-form select,
html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group textarea,
html[dir="rtl"] .form-group select {
  text-align: right;
}

/* Footer RTL */
html[dir="rtl"] .site-footer {
  text-align: right;
}

html[dir="rtl"] .footer-columns {
  direction: rtl;
}

html[dir="rtl"] .footer-bottom-row {
  flex-direction: row-reverse;
}

/* UNIQUE AU MAROC — EXCLUSIVITÉ NATIONALE STYLES */
/* Le sur-titre des cinq pages etait enferme dans une pastille doree : cadre, degrade,
   lueur portee et flou d'arriere-plan. Le proprietaire l'a jugee trop voyante — « si on
   enleve le cadre jaune et on laisse la page normale, c'est plus professionnel ». Le texte
   reste, en simple intitule aligne sur le titre qu'il annonce ; c'est l'habillage qui part.
   Cette regle est commune aux cinq pages, la changer ici les traite toutes. */
.unique-morocco-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  color: var(--gold-light);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.unique-morocco-strip {
  background: linear-gradient(90deg, rgba(7, 7, 9, 0.98) 0%, rgba(21, 20, 26, 0.98) 50%, rgba(7, 7, 9, 0.98) 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding: 22px 5vw;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.unique-morocco-strip-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.unique-morocco-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e2ded5;
  font-weight: 600;
}

.unique-morocco-strip-item strong {
  color: var(--gold-light);
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.08em;
}

.unique-morocco-strip-sep {
  color: rgba(212, 175, 55, 0.35);
  font-size: 11px;
}

/* Callout Box for Showroom Page */
.unique-morocco-box {
  background: linear-gradient(135deg, rgba(20, 19, 25, 0.85) 0%, rgba(10, 10, 12, 0.95) 100%);
  /* Grande boite encadree d'or au milieu de la page : la ligne devient neutre. */
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 40px 48px;
  margin: 0 auto 60px;
  max-width: 1200px;
  position: relative;
  overflow: hidden;
  /* La lueur doree interne partait avec le cadre : il ne reste que l'ombre portee noire. */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.unique-morocco-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-gradient);
}

.unique-morocco-box-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.unique-morocco-box-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.unique-morocco-box h3 {
  font-family: var(--font-serif);
  font-size: 26px;
  color: #fff;
  margin: 0;
}

.unique-morocco-box p {
  color: #d1cdc4;
  font-size: 16.5px;
  line-height: 1.8;
  margin-bottom: 24px;
}

.unique-morocco-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 25px;
}

.unique-morocco-box-pillar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.unique-morocco-box-pillar .pillar-title {
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.unique-morocco-box-pillar .pillar-desc {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .unique-morocco-strip-sep {
    display: none;
  }
  .unique-morocco-strip-inner {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
  .unique-morocco-box {
    padding: 28px 24px;
  }
}



/* ── Chiffres en arabe ─────────────────────────────────────────────────────
   Les données techniques des véhicules (prix, kilométrage, puissance, année)
   ne sont pas traduites : elles restent en chiffres latins avec des espaces
   comme séparateurs de milliers. Dans un paragraphe de droite à gauche,
   l'algorithme bidirectionnel traite ces espaces comme neutres et inverse les
   groupes : « 2 850 000 DH » s'affiche « DH 000 850 2 ». On isole donc ces
   éléments en lecture de gauche à droite, sans toucher au reste de la page. */
html[dir="rtl"] .car-year,
html[dir="rtl"] .car-power-pill,
html[dir="rtl"] .car-specs-row,
html[dir="rtl"] .car-specs-row span,
html[dir="rtl"] .car-price-box,
html[dir="rtl"] .car-old-price,
html[dir="rtl"] .car-current-price,
html[dir="rtl"] .modal-old-price,
html[dir="rtl"] .modal-main-price,
html[dir="rtl"] .modal-promo-tag,
html[dir="rtl"] .spec-val,
html[dir="rtl"] .kpi-value,
html[dir="rtl"] .fleet-item-meta,
html[dir="rtl"] .fleet-item-price-tag,
html[dir="rtl"] .fleet-item-old-price,
html[dir="rtl"] .badge-promo,
html[dir="rtl"] .badge-available,
html[dir="rtl"] .car-badges .badge,
html[dir="rtl"] #resultCount,
html[dir="rtl"] .catalogue-count,
html[dir="rtl"] .car-title,
html[dir="rtl"] .modal-right-info h2,
html[dir="rtl"] .fleet-item-name {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Ces blocs restent alignés du côté droit, comme le reste de la mise en page arabe. */
html[dir="rtl"] .car-price-box,
html[dir="rtl"] .spec-val,
html[dir="rtl"] .kpi-value,
html[dir="rtl"] .fleet-item-meta,
html[dir="rtl"] .fleet-item-price-tag {
  text-align: right;
}

/* ── Barre haute : hauteur maîtrisée à toutes les largeurs ────────────────
   Elle empilait ses trois blocs dès qu'ils ne tenaient plus sur une ligne :
   133 px sur un écran de 375 px (le logo n'apparaissait qu'à 144 px du haut et
   le titre de page à 360 px), et encore 67 px sur deux lignes jusqu'à 1400 px.

   On retire donc ce qui est redondant, selon la place disponible. Rien n'est
   perdu : le titre répète le logo et le titre de page situés juste dessous, les
   liens Avito et Moteur.ma figurent dans le pied de page de chaque page, et
   WhatsApp garde son bouton flottant. */

/* Jusqu'à 1550 px : le titre long s'efface pour maintenir les 5 liens officiels sur une seule ligne nette. */
@media (max-width: 1550px) {
  .top-bar-left > [data-i18n="topbar_title"] {
    display: none;
  }
}

/* Au-delà de 880 px, l'interlettrage de 0,16 em ajoutait à lui seul une
   centaine de pixels au titre ; 0,09 em suffit à l'élégance. */
@media (min-width: 880px) {
  .top-bar {
    letter-spacing: 0.09em;
  }

  .top-bar-links {
    gap: 16px;
  }
}

/* Jusqu'à 879 px — le menu est déjà passé en burger à 860 px — il ne reste que
   l'indicateur d'ouverture, sur une seule ligne. */
@media (max-width: 879px) {
  .top-bar {
    padding: 6px 4vw;
  }

  .top-bar-links {
    display: none;
  }

  .top-bar-inner {
    flex-wrap: nowrap;
    gap: 0;
  }

  .top-bar-left {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: center;
  }

  .status-indicator {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Sous 360 px, la phrase d'ouverture ne tient plus et se coupait en points de
   suspension. Un point de moins sur la taille du texte suffit à la garder entière. */
@media (max-width: 380px) {
  .top-bar-inner {
    font-size: 8.5px;
  }
}

/* ── Carte du showroom ────────────────────────────────────────────────────
   Le cadre Google arrive avec son propre fond blanc, qui trancherait sur une page
   noire. Le filtre l'assombrit et en adoucit les couleurs pour qu'il s'accorde au
   reste, sans rien masquer de ce qui est lisible. La proportion est fixée par
   aspect-ratio plutôt qu'en pixels : la carte garde sa forme à toutes les largeurs. */
.map-embed {
  margin-top: 35px;
  border: 1px solid var(--gold-line);
  overflow: hidden;
  line-height: 0;
}

.map-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  filter: grayscale(0.35) invert(0.92) hue-rotate(180deg) contrast(0.92) brightness(0.95);
}

@media (max-width: 640px) {
  .map-embed iframe {
    aspect-ratio: 4 / 3;
  }
}

/* Le lien d'itinéraire vient juste sous la carte : il perd sa marge haute. */
.map-embed + .map-link {
  margin-top: 0;
  border-top: 0;
}

/* ── Lien d'accès au showroom ─────────────────────────────────────────────
   Remplace l'ancien encadré qui imitait une carte sans en être une : le
   visiteur cliquait dessus et n'obtenait rien. Un lien d'itinéraire fait le
   travail sans incruster un cadre Google, qui déposerait des traceurs et
   demanderait d'ouvrir la politique de sécurité du contenu. */
.map-link {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 35px;
  padding: 22px 24px;
  background: #0c0c10;
  border: 1px solid var(--gold-line);
  text-align: left;
  transition: var(--ease-smooth);
}

.map-link:hover {
  background: #121216;
  border-color: rgba(212, 175, 55, 0.5);
}

.map-link-pin {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--gold-gradient);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #070709;
  font-weight: 700;
  font-size: 15px;
}

.map-link-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-link-text strong {
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.06em;
}

.map-link-text > span {
  color: var(--text-muted);
  font-size: 14px;
}

.map-link-cta {
  color: var(--gold-light) !important;
  font-size: 13px !important;
  margin-top: 2px;
}

@media (max-width: 480px) {
  .map-link {
    gap: 14px;
    padding: 18px;
  }
  .map-link-pin {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }
}

/* Sur un téléphone, l'en-tête ne laisse pas 200 px au logo à côté du sélecteur de
   langue et du bouton de menu. On réduit la boîte en gardant la même proportion,
   donc le même recadrage. */
@media (max-width: 480px) {
  .header-brand {
    width: 150px;
    height: 52px;
  }
}

@media (max-width: 380px) {
  .header-brand {
    width: 124px;
    height: 43px;
  }
}

/* Entre la disparition du menu burger (861 px) et 1200 px, l'en-tête doit faire
   tenir sur une ligne le logo, six liens, le sélecteur de langue et deux boutons.
   Il n'y tenait déjà pas avant l'agrandissement du logo : la navigation passait
   sur deux lignes dès 861 px, ce qui donne un en-tête cassé. On resserre la bande
   plutôt que de rapetisser la marque : marges latérales réduites, interlettrage
   et espacement des liens diminués, et boîte du logo ramenée à 148 px — même
   proportion 2,9/1, donc exactement le même recadrage. */
@media (min-width: 861px) and (max-width: 1279px) {
  .main-header {
    padding: 0 3vw;
  }

  .header-brand {
    width: 148px;
    height: 51px;
  }

  .header-nav {
    gap: 18px;
  }

  .nav-link {
    font-size: 12px;
    letter-spacing: 0.05em;
  }

  .header-actions {
    gap: 10px;
  }

}

/* Entre 861 px (disparition du menu burger) et 1023 px, le bouton d'appel n'a
   aucune place : mesuré à 861 px, il dépassait de 97 px et son libellé était coupé
   net par le bord de l'en-tête. On le masque, exactement comme on le fait déjà sous
   860 px — les six liens et le sélecteur de langue restent, et le même appel reste
   accessible dans la page. */
@media (min-width: 861px) and (max-width: 1023px) {
  .header-actions .ghost-btn,
  .header-actions .gold-btn {
    display: none;
  }
}

/* De 1024 à 1279 px il tient, mais en trois lignes. On rogne l'interlettrage et les
   marges internes — ce qui coûte le plus de largeur sur un libellé en capitales —
   sans lui interdire de passer à la ligne : le forcer sur une seule ligne le faisait
   déborder de l'en-tête. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-actions .ghost-btn,
  .header-actions .gold-btn {
    letter-spacing: 0.04em;
    padding: 0 12px;
    font-size: 10.5px;
  }
}


/* ==========================================================================
   FICHE VEHICULE EN PAGE
   La fiche vivait dans une fenetre superposee ; elle est desormais une page a part
   entiere, avec sa propre adresse. Le contenu interieur ne change pas — c'est la meme
   fonction d'app.js qui le produit — seule l'enveloppe differe : plus de voile, plus de
   position fixe, plus de hauteur limitee a l'ecran, c'est la page qui defile.
   ========================================================================== */
.fiche-page {
  padding: 18px 5vw 70px;
}

/* Il restait de la fenetre son enveloppe : un panneau #111115 pose sur une page #070709,
   avec une ombre portee de 90 px. Invisible au premier coup d'oeil, mais c'est ce qui
   faisait « boite flottante » au lieu de « page ». Trois gris empiles — page, panneau,
   galerie — deviennent un seul : le contenu vit directement dans la page. */
.fiche-page .modal-window {
  position: static;
  width: min(1180px, 100%);
  max-height: none;
  margin: 0 auto;
  overflow: visible;
  background: none;
  box-shadow: none;
}

.fiche-page .modal-left-gallery {
  background: none;
  padding: 0;
}

.fiche-page .modal-right-info {
  overflow-y: visible;
  max-height: none;
  /* Les marges laterales venaient du panneau ; c'est la page qui les porte maintenant,
     et le texte s'aligne sur le fil d'Ariane et sur la photo. */
  padding: 34px 0 0;
}

/* Le fil d'Ariane : ou l'on est, et comment remonter. Une page de vehicule atteinte
   depuis un moteur de recherche n'a sinon aucun contexte. */
.fiche-fil {
  /* Le fil demarrait au bord de la page tandis que la fiche, plafonnee a 1180 px, etait
     centree : 58 px d'ecart a 1440. Il prend la meme largeur et le meme centrage, les
     deux commencent donc sur la meme verticale. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 5vw 0;
  box-sizing: content-box;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fiche-fil a {
  color: var(--text-muted);
  text-decoration: none;
}

.fiche-fil a:hover {
  color: var(--gold-light);
}

.fiche-fil strong {
  color: var(--gold-light);
  font-weight: 600;
}

@media (max-width: 640px) {
  .fiche-page {
    padding: 16px 4vw 50px;
  }

  .fiche-fil {
    padding: 18px 4vw 0;
    font-size: 11px;
  }
}

/* ==========================================================================
   SHOWROOM & VEHICLE VIDEO EXPERIENCE — K.D. LUXURY CARS TANGER
   ========================================================================== */

/* Badge Vidéo sur les Cartes Véhicules */
.badge.badge-video {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(180, 140, 30, 0.4));
  color: #fff;
  border: 1px solid rgba(255, 215, 0, 0.6);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Vignette Vidéo dans la Fiche / Modale */
.modal-thumb-video {
  position: relative;
  border-color: rgba(212, 175, 55, 0.6) !important;
  background: #000;
}

.modal-thumb-video .thumb-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: rgba(212, 175, 55, 0.9);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.modal-thumb-video .thumb-video-tag {
  position: absolute;
  bottom: 3px;
  left: 3px;
  right: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.85);
  color: var(--gold-light);
  text-align: center;
  border-radius: 2px;
  padding: 1px 0;
  z-index: 2;
}

.modal-video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border-radius: 4px;
  display: none;
}

/* ==========================================================================
   SHOWROOM CINEMATIC VIDEO SECTION
   ========================================================================== */
.showroom-video-section {
  padding: 80px 6vw;
  background: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.08) 0%, rgba(11, 11, 12, 1) 70%);
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  position: relative;
}

.video-section-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 45px;
}

.video-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 18px;
}

.live-pulse-dot {
  width: 8px;
  height: 8px;
  background: #ff3344;
  border-radius: 50%;
  box-shadow: 0 0 10px #ff3344;
  animation: pulseLive 1.8s infinite;
}

@keyframes pulseLive {
  0% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
  100% { transform: scale(0.9); opacity: 1; }
}

.video-theater-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
  align-items: start;
  max-width: 1300px;
  margin: 0 auto;
}

.video-main-stage {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 40px rgba(212, 175, 55, 0.1);
  display: flex;
  flex-direction: column;
}

.video-player-container {
  position: relative;
  width: 100%;
  background: #050507;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(360px, 52vh, 480px);
}

.video-player-container video {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}

.video-stage-meta {
  padding: 20px 24px;
  background: #141418;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.video-title-area h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 19px;
  color: #fff;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.video-title-area p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Playlist / Caméras du Showroom */
.video-playlist-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.playlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.playlist-header h4 {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0;
}

.playlist-count {
  font-size: 11px;
  color: var(--text-muted);
}

.video-playlist-card {
  display: flex;
  gap: 14px;
  background: #141418;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: left;
  width: 100%;
}

.video-playlist-card:hover {
  background: #1a1a22;
  border-color: rgba(212, 175, 55, 0.35);
  transform: translateX(4px);
}

.video-playlist-card.active {
  background: #1e1e28;
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
}

.playlist-card-thumb {
  position: relative;
  width: 110px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.playlist-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-card-thumb .play-mini-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 10px;
  transition: all 0.2s ease;
}

.video-playlist-card:hover .play-mini-overlay,
.video-playlist-card.active .play-mini-overlay {
  background: var(--gold);
  color: #000;
  transform: translate(-50%, -50%) scale(1.1);
}

.playlist-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.playlist-card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 3px;
}

.playlist-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 4px;
}

.playlist-card-meta {
  font-size: 11px;
  color: var(--text-muted);
}

/* Facebook CTA Card */
.facebook-community-card {
  margin-top: 15px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(8, 102, 255, 0.12), rgba(20, 20, 30, 0.9));
  border: 1px solid rgba(8, 102, 255, 0.35);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.facebook-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.facebook-card-top svg {
  color: #1877f2;
}

.facebook-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.facebook-card-desc {
  font-size: 12px;
  color: #b0b3b8;
  line-height: 1.5;
  margin: 0;
}

.facebook-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1877f2;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.facebook-btn:hover {
  background: #0d65d9;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.4);
  transform: translateY(-1px);
}

@media (max-width: 992px) {
  .video-theater-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .showroom-video-section {
    padding: 50px 4vw;
  }
  .video-player-container {
    height: clamp(320px, 62vh, 460px);
  }
}


/* ==========================================================================
   CORRECTIONS RELEVEES SUR TELEPHONE — 25/09/2026
   Mesures prises a 390 px de large sur le site en ligne, pas sur le code.
   ========================================================================== */

/* Sous 16 px, Safari sur iPhone zoome tout seul des qu'on pose le doigt dans un
   champ : la page saute, et il faut la repincer pour revenir. Les champs du
   formulaire de contact et la recherche du catalogue etaient a 14 px. */
@media (max-width: 860px) {
  .luxury-form input,
  .luxury-form textarea,
  .luxury-form select,
  .catalogue-search-input,
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* 44 px, c'est la largeur d'un bout de doigt. En dessous on vise a cote. */
  .luxury-form input,
  .luxury-form select,
  .catalogue-search-input,
  .nav-link,
  .footer-nav a,
  .footer-links a,
  .lang-btn,
  .ghost-btn,
  .gold-btn,
  .wa-btn,
  .cat-filter-btn {
    min-height: 44px;
  }

  .ghost-btn,
  .gold-btn,
  .wa-btn,
  .cat-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .lang-btn {
    min-width: 50px;
  }

  /* Les liens du pied de page se touchaient : deux lignes de texte a 21 px de
     haut collees l'une a l'autre, on ouvrait la mauvaise. */
  .footer-nav a,
  .footer-links a {
    display: inline-flex;
    align-items: center;
  }
}

/* Entre 360 et 420 px, le logo, le choix de langue et le bouton de menu se
   disputaient la largeur. Le choix de langue descend dans le menu deroulant,
   ou il a la place d'etre touche. */
/* Le selecteur est deplace dans le menu deroulant par placerSelecteurLangue()
   (app.js) des que l'ecran passe sous 861 px. Il y prend toute la largeur. */
.header-nav .lang-selector {
  width: 100%;
  justify-content: center;
  padding: 8px 10px;
  margin-top: 6px;
}

.header-nav .lang-btn {
  font-size: 13px;
  min-height: 40px;
  padding: 2px 14px;
}

/* Bloc d'information a completer par la direction : il se voit, et il dit
   pourquoi il est la. Mieux qu'un numero invente. */
.bloc-a-completer {
  margin: 26px 0;
  padding: 16px 18px;
  background: rgba(212, 175, 55, 0.06);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
}

.bloc-a-completer strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.bloc-a-completer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #b6b2aa;
}

/* Sous les boutons d'envoi du formulaire : ce que deviennent les coordonnees. */
.form-donnees {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #8e8b84;
}

.form-donnees a {
  color: var(--gold-light);
}

/* Pages legales : du texte long, lisible. */
.section h2 + p,
.bloc-a-completer + h2 {
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   FICHE VEHICULE — boutons a portee de pouce
   Releve sur telephone : « Reserver une visite » et WhatsApp n'apparaissaient
   qu'apres la galerie, les equipements et la fiche technique, soit tout en bas.
   -------------------------------------------------------------------------- */

/* Sur la page dediee, les deux boutons remontent juste sous le prix. */
.fiche-page .modal-right-info {
  display: flex;
  flex-direction: column;
}

.fiche-page #modalStatusBadge { order: 1; }
.fiche-page #modalSubTitle    { order: 2; }
.fiche-page #modalTitle       { order: 3; }
.fiche-page #modalPriceBox    { order: 4; }
.fiche-page .modal-action-buttons { order: 5; margin: 6px 0 22px; }
.fiche-page #modalKeyHighlights { order: 6; }
.fiche-page #modalDescription { order: 7; }
.fiche-page #modalKeyOptions  { order: 8; }
.fiche-page .modal-specs-headline { order: 9; }
.fiche-page #modalSpecsGrid   { order: 10; }
.fiche-page .modal-dealer-badge { order: 11; }

/* Le bouton « Retour au catalogue » n'a plus sa place au milieu des actions
   commerciales : il passe en dernier. */
.fiche-page .modal-dismiss-btn {
  order: 12;
  align-self: flex-start;
  margin-top: 18px;
}

/* Barre fixe en bas d'ecran, sur telephone seulement. */
.fiche-barre-mobile {
  display: none;
}

@media (max-width: 860px) {
  .fiche-barre-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.6);
  }

  .fbm-lien {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 8px;
    background: #101014;
    color: #e6e2da;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
  }

  .fbm-wa {
    background: #12331f;
    color: #7ee6a8;
  }

  .fbm-visite {
    color: var(--gold-light);
  }

  /* Sans cela, la barre recouvre la fin de la page. */
  .fiche-page {
    padding-bottom: 86px;
  }

  /* Le bouton WhatsApp flottant du site tomberait derriere la barre. */
  .fiche-page ~ .wa-float,
  body:has(.fiche-page) .wa-float {
    bottom: 70px;
  }
}

/* ==========================================================================
   CIBLES TACTILES — derniere passe, mesuree sur un ecran de 375 px
   Ce bloc est volontairement en fin de fichier : a specificite egale, c'est la
   regle ecrite en dernier qui l'emporte, et les regles de base vivent plus haut.

   Trois causes distinctes, trouvees a la mesure et non a la lecture :
   — le bloc tactile existant visait « .footer-nav a » alors que la classe reelle
     du pied de page est « .footer-col-nav » : quatorze liens empiles a 24 px de
     haut, dont les deux pages legales ajoutees depuis ;
   — « .gold-btn.small » (specificite 0,2,0) l'emportait sur la liste tactile
     (0,1,0) et ramenait le bouton a 38 px ;
   — « .footer-social-icon » et « .floating-vip-wa » fixent leur hauteur en dur,
     a 40 et 38 px.
   ========================================================================== */
@media (max-width: 860px) {
  .footer-col-nav a,
  .footer-col a,
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .gold-btn.small,
  .ghost-btn.small,
  .wa-btn.small {
    min-height: 44px;
  }

  /* Meme erreur de nom que pour le pied de page : le bloc tactile plus haut
     vise « .cat-filter-btn », classe qui n'existe nulle part. Les vrais filtres
     s'appellent « .catalogue-filter-btn » et mesuraient 37 px. */
  .catalogue-filter-btn,
  .facebook-btn {
    min-height: 44px;
  }

  /* Commandes de la galerie de la fiche vehicule : fleches a 36 px et bouton
     plein ecran a 26 px. Ce sont les commandes dont on se sert le plus sur un
     telephone — feuilleter les photos d'une voiture — et les moins bien
     dimensionnees. Leur hauteur est posee en dur, il faut donc l'ecraser. */
  .modal-nav-arrow {
    width: 44px;
    height: 44px;
  }

  .modal-fullscreen-btn {
    height: 44px;
    padding: 0 14px;
  }

  .footer-social-icon {
    width: 44px;
    height: 44px;
  }

  .floating-vip-wa {
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
  }
}