/* ==========================================================================
   RBEN AUTOS — système visuel public (fondation Phase 2/3)
   Identité : noir profond / or #DAA520 / rouge #970202 / blanc · Raleway + Saira Condensed
   Signature : "fiche technique" — spec-chips à micro-label or, repris sur cartes & fiche.
   Mobile-first. prefers-reduced-motion respecté.
   ========================================================================== */

/* ---- Tokens ---- */
:root{
  --noir:#0b0b0d;          /* fond de page */
  --noir-pur:#000;
  --panel:#141317;         /* panneau surélevé */
  --panel-2:#1c1a20;       /* panneau clair / hover */
  --panel-glass:rgba(0,0,0,.78);
  --or:#DAA520;
  --or-clair:#E9C46A;
  --rouge:#970202;
  --rouge-clair:#c62828;
  --vert:#2ecc71;          /* statut dispo */
  --blanc:#fff;
  --gris:#a8a6ad;          /* texte secondaire */
  --gris-fonce:#6c6a71;
  --ligne:rgba(218,165,32,.20);   /* filet or */
  --ligne-soft:rgba(255,255,255,.08);
  --footer:#343536;

  --r:10px; --r-sm:6px; --r-lg:16px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-or:0 8px 26px rgba(218,165,32,.18);
  --ease:cubic-bezier(.22,.61,.36,1);

  --ff-display:'Saira Condensed','Raleway',sans-serif;
  --ff-body:'Raleway',sans-serif;
  --wrap:1200px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;}

body.rben{
  font-family:var(--ff-body);
  color:var(--blanc);
  background:var(--noir);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Pages internes : base sombre ; le dégradé interactif RBEN est peint par .rben-bg (ci-dessous). */
body.rben--inner{ background:var(--bg-base); }

/* ---- Fond dégradé interactif RBEN (pages publiques hors home & hors admin) ----
   Halos radiaux OR + ROUGE profond sur base noire, position pilotée par --bgx/--bgy
   (mis à jour à la souris via bg-gradient.js ; statique sur mobile / mouvement réduit).
   COULEURS FACILES À CHANGER ci-dessous. */
:root{
  --bg-base:#0a0a0a;
  --bg-or:rgba(218,165,32,.12);      /* halo or */
  --bg-rouge:rgba(151,2,2,.13);      /* halo rouge profond */
  --bgx:50%;                          /* position X du halo (0–100%) */
  --bgy:28%;                          /* position Y du halo (0–100%) */
}
.rben-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(600px circle at var(--bgx) var(--bgy), var(--bg-or), transparent 60%),
    radial-gradient(680px circle at calc(100% - var(--bgx)) calc(var(--bgy) + 26%), var(--bg-rouge), transparent 62%),
    var(--bg-base);
}

a{color:var(--or);text-decoration:none;transition:color .2s var(--ease);}
a:hover{color:var(--or-clair);}
img{max-width:100%;height:auto;vertical-align:middle;}

h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;}
p{line-height:1.6;}

::selection{background:var(--or);color:#000;}

/* Focus visible (a11y) — anneau or sur fond sombre */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--or-clair);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

.rben-container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px;}
.rben-main{flex:1 0 auto;}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---- Titres de section (eyebrow + titre) ---- */
.rben-title{margin-bottom:24px;}
.rben-title .eyebrow{
  font-family:var(--ff-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:12px;color:var(--or);display:inline-block;margin-bottom:8px;
}
.rben-title h1,.rben-title h2{font-size:clamp(26px,4.4vw,44px);}
.rben-title .eyebrow::before{content:"";display:inline-block;width:26px;height:2px;background:var(--or);vertical-align:middle;margin-right:10px;}
.rben-title--center{text-align:center;}
.rben-title--center .eyebrow::after{content:"";display:inline-block;width:26px;height:2px;background:var(--or);vertical-align:middle;margin-left:10px;}
.txt-or{color:var(--or);}
.txt-rouge{color:var(--rouge-clair);}

/* ---- Panneaux ---- */
.black-bg,.rben-panel{background:var(--panel-glass);border:1px solid var(--ligne-soft);border-radius:var(--r);padding:22px;}
.rben-panel--or{border-color:var(--ligne);}

/* ---- Header / nav ---- */
.rben-header{position:sticky;top:0;z-index:1000;background:rgba(8,8,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne);}
.rben-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;}
.rben-logo{display:flex;align-items:center;}
.rben-logo img{height:40px;width:auto;max-width:min(320px,64vw);object-fit:contain;}
.rben-nav{display:flex;align-items:center;gap:6px;}
.rben-nav a{
  font-family:var(--ff-body);color:var(--blanc);text-transform:uppercase;font-weight:600;font-size:13px;
  letter-spacing:.06em;padding:10px 14px;border-radius:var(--r-sm);position:relative;transition:color .2s var(--ease),background .2s var(--ease);
}
.rben-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);}
.rben-nav a:hover,.rben-nav a.is-active{color:var(--or);}
.rben-nav a:hover::after,.rben-nav a.is-active::after{transform:scaleX(1);}
.rben-nav__cta{margin-left:8px;}
.rben-burger{display:none;background:none;border:1px solid var(--ligne);border-radius:var(--r-sm);color:var(--blanc);width:44px;height:40px;font-size:18px;cursor:pointer;}

/* Univers (menu déroulant simple, hoverable + focusable) */
.rben-univers{position:relative;}
.rben-univers__menu{position:absolute;top:100%;left:0;min-width:190px;background:var(--panel);border:1px solid var(--ligne);border-radius:var(--r);padding:6px;display:none;box-shadow:var(--shadow);z-index:1001;}
.rben-univers:hover .rben-univers__menu,.rben-univers:focus-within .rben-univers__menu{display:block;}
.rben-univers__menu a{display:block;width:100%;}

/* ---- Boutons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--ff-body);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:14px;cursor:pointer;transition:transform .15s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease);
  line-height:1;
}
.btn:active{transform:translateY(1px);}
.btn-rben{background:var(--or);color:#111;}
.btn-rben:hover{background:var(--or-clair);color:#111;box-shadow:var(--shadow-or);transform:translateY(-2px);}
.btn-rben-rouge{background:var(--rouge);color:#fff;}
.btn-rben-rouge:hover{background:var(--rouge-clair);color:#fff;transform:translateY(-2px);}
.btn-wa{background:#25D366;color:#062b16;}
.btn-wa:hover{background:#2be674;color:#062b16;transform:translateY(-2px);box-shadow:0 8px 26px rgba(37,211,102,.28);}
.btn-ghost{background:transparent;border-color:var(--ligne);color:var(--blanc);}
.btn-ghost:hover{border-color:var(--or);color:var(--or);transform:translateY(-2px);}
.btn-block{width:100%;}
.btn-sm{padding:9px 15px;font-size:12px;}

/* ---- Badges statut ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-family:var(--ff-body);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 1px 5px rgba(0,0,0,.4);}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
/* Fonds OPAQUES (lisibles même sur une image de véhicule blanche/claire). */
.badge-dispo{background:rgba(38,175,96,.95);color:#04150c;}
.badge-reserve{background:rgba(218,165,32,.96);color:#231800;}
.badge-vendu{background:rgba(178,20,20,.95);color:#fff;}
.badge-neuf{background:var(--or);color:#111;}
.badge-neuf::before{display:none;}
.badge-occasion{background:rgba(24,24,30,.9);color:#f2f0f6;}
.badge-occasion::before{display:none;}

/* ---- Spec-chips (signature "fiche technique") ---- */
.spec-list{list-style:none;display:grid;gap:10px;grid-template-columns:repeat(2,1fr);}
.spec-chip{background:rgba(255,255,255,.04);border:1px solid var(--ligne-soft);border-radius:var(--r-sm);padding:9px 12px;}
.spec-chip b,.spec-chip .label{display:block;font-family:var(--ff-body);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--or);margin-bottom:2px;}
.spec-chip .val{font-size:15px;color:#fff;}

/* ---- Bloc prix ---- */
.prix{font-family:var(--ff-display);font-weight:700;color:var(--or);line-height:1;}
.prix--card{font-size:22px;}
.prix--xl{font-size:clamp(28px,5vw,40px);}
.prix--demande{color:var(--or-clair);font-family:var(--ff-body);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:16px;}
/* prix-bloc : regroupe centimes + dinars en UN seul item flex (pied de carte),
   pour que la ligne dinars ne soit pas écrasée en colonne étroite. */
.prix-bloc{display:flex;flex-direction:column;align-items:flex-start;}
/* Mode « les_deux » : dinars en petit sous le prix centimes principal.
   nowrap : le montant (« 7 500 000 DA ») tient sur une seule ligne. */
.prix-secondaire{display:block;margin-top:2px;font-family:var(--ff-body);font-weight:500;color:var(--gris);font-size:13px;line-height:1.2;white-space:nowrap;}

/* ---- Carte véhicule (partial réutilisable) ---- */
.vehicule-grid{display:grid;gap:22px;grid-template-columns:1fr;}
.vehicule-card{
  position:relative;background:var(--panel);border:1px solid var(--ligne-soft);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.vehicule-card:hover{transform:translateY(-5px);border-color:var(--or);box-shadow:var(--shadow);}
.vehicule-card__media{position:relative;aspect-ratio:4/3;background:#000;overflow:hidden;}
.vehicule-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.vehicule-card:hover .vehicule-card__media img{transform:scale(1.06);}
.vehicule-card__badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;}
.vehicule-card__fav{position:absolute;top:10px;right:10px;}
.vehicule-card__body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1;}
.vehicule-card__title{font-family:var(--ff-display);font-size:19px;color:#fff;text-transform:uppercase;line-height:1.05;}
.vehicule-card__meta{font-size:12.5px;color:var(--gris);display:flex;flex-wrap:wrap;gap:6px 10px;}
.vehicule-card__meta .dot{color:var(--gris-fonce);}
.vehicule-card__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:6px;}
.vehicule-card__details{position:relative;z-index:2;white-space:nowrap;}

/* Véhicule vendu mais laissé en vitrine : image grisée, badge « Vendu » lisible. */
.vehicule-card--vendu .vehicule-card__media img{filter:grayscale(.75) brightness(.82);}
.vehicule-card--vendu:hover .vehicule-card__media img{filter:grayscale(.4) brightness(.9);}
.vehicule-card--vendu .vehicule-card__title{color:var(--gris);}

/* ---- Filtres catalogue ---- */
.filtres{background:var(--panel);border:1px solid var(--ligne-soft);border-radius:var(--r);padding:18px;}
.filtres__grid{display:grid;gap:14px;grid-template-columns:1fr;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label,.form-label{font-family:var(--ff-body);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--or);}
.input,.select,select.input,input.input,textarea.input,
.filtres select,.filtres input{
  background:#0e0d10;border:1px solid var(--ligne-soft);border-radius:var(--r-sm);color:#fff;
  padding:11px 12px;font-family:var(--ff-body);font-size:14px;width:100%;transition:border-color .2s var(--ease);
}
.input:focus,.select:focus,.filtres select:focus,.filtres input:focus{border-color:var(--or);outline:none;box-shadow:0 0 0 2px rgba(218,165,32,.18);}
select.input option{background:#0e0d10;}

/* Chips quick-filters */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--ligne);background:transparent;color:#eee;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .18s var(--ease);}
.chip:hover{border-color:var(--or);color:var(--or);}
.chip.is-active{background:var(--or);color:#111;border-color:var(--or);}

.result-count{color:var(--gris);font-size:14px;}
.empty-state{text-align:center;padding:60px 20px;border:1px dashed var(--ligne);border-radius:var(--r);}
.empty-state h3{font-size:22px;margin-bottom:8px;}
.empty-state p{color:var(--gris);margin-bottom:18px;}

/* ---- Pagination Laravel ---- */
.rben-pagination nav{display:flex;justify-content:center;}
.rben-pagination span[aria-current] span,.rben-pagination a{border-color:var(--ligne)!important;}

/* ---- Hero (home) ---- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#000;}
.hero__inner{position:relative;z-index:2;padding:70px 20px;text-align:center;width:100%;}
.hero__eyebrow{font-family:var(--ff-body);font-weight:700;letter-spacing:.28em;text-transform:uppercase;font-size:13px;color:var(--or);margin-bottom:18px;}
.hero__titles{position:relative;display:flex;flex-direction:column;align-items:center;}
.hero__word{font-family:var(--ff-display);font-weight:700;line-height:.86;letter-spacing:.02em;font-size:clamp(58px,15vw,190px);text-shadow:0 6px 40px rgba(0,0,0,.6);will-change:transform;}
.hero__word--top{color:#fff;}
.hero__word--bottom{color:var(--or);}
.hero__card{position:relative;width:min(560px,82vw);aspect-ratio:16/10;border-radius:14px;overflow:hidden;margin:clamp(-30px,-4vw,-10px) 0;box-shadow:0 30px 80px rgba(0,0,0,.65);z-index:1;will-change:transform;}
.hero__layer{position:absolute;inset:0;background-size:cover;background-position:center;will-change:opacity;}
/* Couche « image complète » : image entière visible (non rognée), transparence conservée. */
.hero__layer--contain{background-size:contain;background-repeat:no-repeat;background-position:center;}
/* Voile léger, uniquement en bas → le néon reste visible derrière une image transparente. */
.hero__card-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.18));}
.hero__sub{max-width:560px;margin:26px auto;color:#e7e5ea;font-size:clamp(15px,2.2vw,19px);}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.hero__scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;color:var(--gris);font-size:12px;letter-spacing:.2em;text-transform:uppercase;}
/* Mobile : carte pleine largeur (carré) ; les DEUX images affichées COMPLÈTES (contain),
   image 1 non rognée dès le départ. */
@media (max-width:768px){
  .hero__card{width:100vw;max-width:none;aspect-ratio:1/1;}
  .hero__layer{background-size:contain;background-repeat:no-repeat;}
}

/* ---- Marquee logos marques ---- */
/* direction:ltr FORCÉ sur le CONTENEUR (.marquee / .marquee-band) : le défilement
   infini repose sur une piste dupliquée (2× la liste) translatée de -50%
   (translateX physique, jamais retourné par la direction du document). En RTL, la
   piste (width:max-content) s'ancrait à DROITE dans son conteneur et se vidait au
   défilement (bug « quelques marques puis plus rien » ; 2e bandeau totalement vide).
   Forcer LTR sur le CONTENEUR ré-ancre la piste à GAUCHE → boucle correcte dans les
   deux sens. direction sur la seule piste ne suffisait pas : l'ancrage dépend du
   conteneur, pas de la piste. Items = logos sans sens de lecture → sûr. */
.marquee{overflow:hidden;border-block:1px solid var(--ligne-soft);padding:20px 0;background:#0e0d10;direction:ltr;}
.marquee__track{display:flex;gap:44px;width:max-content;animation:marquee 38s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__item{display:flex;align-items:center;justify-content:center;height:46px;opacity:.72;transition:opacity .2s var(--ease);}
.marquee__item:hover{opacity:1;}
.marquee__item img{max-height:42px;width:auto;filter:grayscale(1) brightness(1.6);transition:filter .2s var(--ease);}
.marquee__item:hover img{filter:none;}
.marque-pastille{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border:1px solid var(--ligne);border-radius:999px;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;color:#e6e4ea;white-space:nowrap;font-size:16px;}
/* Variante « fond de section » du néon (même technique/couleurs que .rben-bg fixe,
   mais scopée à un conteneur position:relative — hero, bande marques). */
.rben-bg.rben-bg--section{position:absolute;z-index:0;}

/* Bande marques : néon en fond, rangées au-dessus (fond transparent pour le laisser voir). */
.marquee-band{position:relative;overflow:hidden;direction:ltr;}
.marquee-band > .marquee{position:relative;z-index:1;background:transparent;}

.marquee--reverse{border-top:0;}
.marquee--reverse .marquee__track{animation-direction:reverse;animation-duration:46s;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ---- Bandeau stats ---- */
.stats{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);}
.stat{text-align:center;padding:22px 14px;border:1px solid var(--ligne-soft);border-radius:var(--r);background:var(--panel);}
.stat__num{font-family:var(--ff-display);font-weight:700;font-size:clamp(34px,6vw,54px);color:var(--or);line-height:1;}
.stat__label{font-family:var(--ff-body);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--gris);margin-top:6px;}

/* ---- Fiche véhicule ---- */
.fiche-wrap{padding:34px 0 96px;}
.fiche-breadcrumb{margin-bottom:18px;font-size:14px;}
.fiche{display:grid;gap:26px;grid-template-columns:1fr;}
.fiche__media{min-width:0;}
.fiche__info{display:flex;flex-direction:column;gap:14px;min-width:0;}
.fiche__info h1{font-size:clamp(26px,5vw,40px);}
.fiche__badges{display:flex;gap:8px;flex-wrap:wrap;}
.fiche__ref{color:var(--gris);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-top:-8px;}
.fiche__prix{margin:4px 0;}
.fiche__desc{border-top:1px solid var(--ligne-soft);padding-top:16px;}
.fiche__desc-title{font-size:16px;margin-bottom:8px;color:#fff;}
.fiche__desc p{color:var(--gris);line-height:1.7;}
.fiche__actions{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.fiche__compare{margin:0;}
.fiche-similaires{margin-top:64px;}
.fiche__vendu{background:rgba(151,2,2,.12);border:1px solid rgba(151,2,2,.4);border-radius:var(--r);padding:16px 18px;}
.fiche__vendu p{color:#f0a0a0;margin-bottom:12px;font-weight:600;}
.fiche__vendu .fa{color:var(--rouge-clair);}
.gallery__main{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:4/3;}
.gallery__main img{width:100%;height:100%;object-fit:cover;}
.gallery__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;}
.gallery__thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm);cursor:pointer;border:2px solid transparent;transition:border-color .2s var(--ease);}
.gallery__thumbs img:hover,.gallery__thumbs img.is-active{border-color:var(--or);}

/* CTA WhatsApp sticky (mobile) */
.cta-sticky{position:fixed;left:0;right:0;bottom:0;z-index:900;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(0,0,0,.9) 30%);display:none;}

/* ---- Comparateur ---- */
.compare-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(11,11,13,.72);color:#fff;
  cursor:pointer;transition:all .18s var(--ease);box-shadow:0 2px 7px rgba(0,0,0,.45);backdrop-filter:blur(2px);
}
.compare-toggle:hover{border-color:var(--or);color:var(--or);background:rgba(11,11,13,.85);}
.compare-toggle.is-active{background:var(--or);color:#111;border-color:var(--or);}
.vehicule-card__fav form{margin:0;}
/* Miroir RTL : coins échangés (favori/badges) sur la vitrine arabe. */
html[dir="rtl"] .vehicule-card__fav{right:auto;left:10px;}
html[dir="rtl"] .vehicule-card__badges{left:auto;right:10px;}

/* ---- Pagination vitrine (compacte, jolie, traduite) ---- */
.rben-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:6px;}
.rben-pager__btn,.rben-pager__num{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 14px;border-radius:14px;border:1.5px solid var(--ligne);background:var(--panel);color:#fff;font-family:var(--ff-display);font-weight:700;font-size:16px;line-height:1;text-decoration:none;transition:transform .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);}
.rben-pager__btn{font-size:20px;}
.rben-pager__btn:hover,.rben-pager__num:hover{border-color:var(--or);color:var(--or);transform:translateY(-2px);}
/* État actif = couleur d'accent CONFIGURABLE + texte auto-contrasté (lisible même
   si l'accent est foncé). Jamais de couleur en dur. */
.rben-pager__num.is-active{background:var(--or);border-color:var(--or);color:var(--or-contrast,#111);box-shadow:0 8px 20px -8px var(--or);}
.rben-pager__btn.is-disabled{opacity:.3;pointer-events:none;}
.rben-pager__dots{padding:0 4px;color:var(--gris);font-weight:700;}
html[dir="rtl"] .rben-pager__btn i{display:inline-block;transform:scaleX(-1);}

.compare-bar{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:920;
  display:flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;
  background:var(--panel-2);border:1px solid var(--or);border-radius:999px;box-shadow:var(--shadow);
}
.compare-bar strong{font-family:var(--ff-display);color:var(--or);}
@media (max-width:860px){ .compare-bar{bottom:74px;} } /* au-dessus du CTA sticky */

.compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.compare-table{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;}
.compare-table th,.compare-table td{padding:14px;border-bottom:1px solid var(--ligne-soft);vertical-align:top;text-align:left;}
.compare-table thead th{background:var(--panel);position:sticky;top:0;}
.compare-table .row-label{font-family:var(--ff-body);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--or);white-space:nowrap;background:#0e0d10;}
.compare-table__media{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm);}
.compare-col{min-width:220px;}

/* ---- Footer ---- */
.rben-footer{flex-shrink:0;background:var(--footer);border-top:1px solid var(--ligne);padding:22px 0;margin-top:60px;}
/* Sur la home, la 2ᵉ bande marques colle directement au footer (aucun espace). */
body.rben--home .rben-footer{margin-top:0;}
.rben-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.rben-footer__social{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.rben-footer__social-label{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.05em;font-size:13.5px;line-height:1.3;color:var(--or);max-width:340px;}
.rben-social-btns{display:flex;gap:12px;}
/* Pastilles rondes, grandes, aux COULEURS DE MARQUE de chaque réseau. */
.rben-social{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;color:#fff;font-size:22px;box-shadow:0 4px 12px -4px rgba(0,0,0,.5);transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);}
.rben-social img{width:20px;height:20px;filter:brightness(0) invert(1);}
.rben-social:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 9px 20px -6px rgba(0,0,0,.6);filter:brightness(1.08);}
.rben-social--fb{background:#1877f2;}
.rben-social--ig{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);}
.rben-social--tt{background:#010101;box-shadow:0 0 0 1.5px #25f4ee inset,0 4px 12px -4px rgba(0,0,0,.5);}
.rben-social--wa{background:#25d366;color:#05331d;}
/* Sur la FICHE mobile (body.has-cta), la barre WhatsApp fixe (.cta-sticky, ≤860px)
   ne doit JAMAIS masquer le pied : padding ≥ hauteur barre + marge + safe-area. */
@media (max-width:860px){ body.has-cta .rben-footer__inner{ padding-bottom:calc(124px + env(safe-area-inset-bottom)); } }

/* ==========================================================================
   Responsive (mobile-first → tablette → desktop)
   ========================================================================== */
@media (min-width:600px){
  .vehicule-grid{grid-template-columns:repeat(2,1fr);}
  .filtres__grid{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:900px){
  .vehicule-grid{grid-template-columns:repeat(3,1fr);}
  .filtres__grid{grid-template-columns:repeat(4,1fr);}
  .fiche{grid-template-columns:1.35fr 1fr;align-items:start;}
}
@media (max-width:860px){
  .rben-nav{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;background:var(--panel);border-bottom:1px solid var(--ligne);padding:10px;transform:translateY(-120%);transition:transform .28s var(--ease);z-index:999;}
  .rben-nav.is-open{transform:translateY(0);}
  .rben-nav a{padding:14px 16px;font-size:15px;}
  .rben-univers__menu{position:static;display:block;border:none;box-shadow:none;background:transparent;padding:0 0 0 14px;}
  .rben-burger{display:inline-flex;align-items:center;justify-content:center;}
  .cta-sticky{display:block;}
}

/* ---- Réduction de mouvement ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .marquee__track{animation:none;}
  .hero__layer{transform:none!important;}
}

/* Bascule de langue — langue de destination dans sa propre écriture.
   Hors de la nav repliable → toujours visible, à droite / à côté du hamburger. */
.rben-lang--switch{display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;border:1px solid var(--ligne);border-radius:var(--r-sm);
  color:var(--blanc);text-decoration:none;font-weight:600;font-size:14px;line-height:1;
  white-space:nowrap;margin-inline-start:auto;transition:border-color .2s,color .2s;}
.rben-lang--switch:hover,.rben-lang--switch:focus-visible{border-color:var(--or);color:var(--or);}
@media (max-width:900px){.rben-lang--switch{margin-inline-end:8px;}}

/* ===================== RTL (arabe) ===================== */
/* Le retournement RTL ne concerne QUE la mise en page directionnelle : JAMAIS
   les images. Garde défensif contre tout miroir (logo marque/showroom, photos). */
[dir="rtl"] img,
[dir="rtl"] .rben-logo img,
[dir="rtl"] .vehicule-card__media img,
[dir="rtl"] .marquee img { transform: none !important; }

/* Isolation bidi des contenus mixtes (nombres, prix, unités, latin) : évite que
   la ponctuation (« · », « . », « DA/km ») « saute » de côté dans le flux RTL. */
[dir="rtl"] .vehicule-card__meta > span,
[dir="rtl"] .prix,
[dir="rtl"] .prix--card,
[dir="rtl"] .prix--demande,
[dir="rtl"] .fiche__prix,
[dir="rtl"] .spec-val,
[dir="rtl"] .vehicule-card__meta,
[dir="rtl"] time { unicode-bidi: isolate; }

/* ===== Nav sticky hors accueil ===== */
/* .rben-header est sticky par défaut → vaut pour catalogue, fiche, contact
   (pages « inner »). Sur l'ACCUEIL, la barre garde son comportement d'origine
   (révélée avec le hero) : on annule le sticky pour qu'elle suive le flux. */
body.rben--home .rben-header{ position: relative; }
/* Sécurité : sur les pages inner, le sticky reste actif en RTL et sur mobile. */
body.rben--inner .rben-header{ position: sticky; top: 0; }

/* ===== Logo tenant : mark neutre (aucun logo fourni) ===== */
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:8px;background:var(--or);color:#0a0a0a;font-weight:800;font-size:16px;
  line-height:1;margin-inline-end:9px;flex:0 0 auto;}
.logo-text{font-family:'Saira Condensed',sans-serif;font-weight:700;letter-spacing:.02em;
  font-size:20px;color:var(--blanc,#fff);white-space:nowrap;}