/* ============================================================
   FACE AUTO — Feuille de style principale
   Thème : Rouge & Noir
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ---- Variables ---- */
:root {
  --noir:       #0a0a0a;
  --noir-2:     #111111;
  --noir-3:     #1a1a1a;
  --rouge:      #c0192a;
  --rouge-fonce:#8b0f1d;
  --rouge-clair:#f5d0d4;
  --blanc:      #fafaf8;
  --gris-clair: #f2f1ed;
  --gris-mid:   #e0ddd6;
  --texte:      #1a1a1a;
  --texte-sec:  #5a5a5a;
  --vert-ok:    #1a4a2a;
  --or-accent:  #9a7a3a;
  --radius:     2px;
  --transition: 0.22s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--blanc);
  color: var(--texte);
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }

/* ---- Utilitaires ---- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.serif { font-family: 'Cormorant Garamond', serif; }
.accent { color: var(--rouge); }
.text-sec { color: var(--texte-sec); }
.upper { text-transform: uppercase; letter-spacing: 0.1em; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  background: var(--noir);
  position: sticky; top: 0; z-index: 200;
  border-bottom: 2px solid var(--rouge);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 2.5rem;
}
.nav__logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.65rem; font-weight: 600;
  color: var(--blanc); letter-spacing: 0.14em;
}
.nav__logo span { color: var(--rouge); }
.nav__links { display: flex; gap: 2rem; list-style: none; }
.nav__links a {
  color: #bbb; font-size: 0.75rem; letter-spacing: 0.09em;
  text-transform: uppercase; transition: color var(--transition);
}
.nav__links a:hover,
.nav__links a.active { color: var(--rouge); }
.nav__cta {
  background: var(--rouge); color: var(--blanc);
  border: none; padding: 0.55rem 1.5rem;
  font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase;
  cursor: pointer; font-weight: 500; border-radius: var(--radius);
  transition: background var(--transition);
}
.nav__cta:hover { background: var(--rouge-fonce); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--noir);
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 520px; position: relative; overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg, rgba(192,25,42,0.03) 0px, rgba(192,25,42,0.03) 1px,
    transparent 1px, transparent 80px
  );
  pointer-events: none;
}
.hero__left {
  padding: 3.5rem 3rem 0 3.5rem;
  display: flex; flex-direction: column; justify-content: center;
  z-index: 2;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(192,25,42,0.12); border: 1px solid rgba(192,25,42,0.35);
  color: var(--rouge); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 0.35rem 1rem;
  margin-bottom: 1.8rem; width: fit-content; border-radius: var(--radius);
}
.hero__badge::before {
  content: ''; width: 6px; height: 6px;
  background: var(--rouge); border-radius: 50%;
}
.hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.8rem; font-weight: 300; color: var(--blanc);
  line-height: 1.1; margin-bottom: 1.4rem;
}
.hero__title em { font-style: italic; color: var(--rouge); }
.hero__sub {
  color: #999; font-size: 0.88rem; line-height: 1.85;
  max-width: 420px; margin-bottom: 2.5rem; font-weight: 300;
}
.hero__btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__right {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
/* Stats hero grand format */
.hero__stats-band {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 2.5rem;
}
.hero__stat {
  padding: 1.4rem 0; text-align: center; position: relative;
}
.hero__stat:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 20%; height: 60%;
  width: 1px; background: rgba(255,255,255,0.1);
}
.hero__stat-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.2rem; font-weight: 400; color: var(--rouge);
  line-height: 1; margin-bottom: 0.35rem;
}
.hero__stat-plus { font-size: 2rem; color: var(--rouge); }
.hero__stat-unit { font-size: 1.6rem; color: var(--blanc); font-weight: 300; }
.hero__stat-l {
  font-size: 0.72rem; color: #aaa;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: inline-block; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem;
  letter-spacing: 0.09em; text-transform: uppercase; font-weight: 500;
  padding: 0.85rem 2rem; border-radius: var(--radius);
  transition: all var(--transition);
}
.btn--rouge  { background: var(--rouge); color: var(--blanc); }
.btn--rouge:hover { background: var(--rouge-fonce); }
.btn--noir   { background: var(--noir); color: var(--blanc); }
.btn--noir:hover { background: #222; }
.btn--outline {
  background: transparent; color: var(--noir);
  border: 1px solid var(--gris-mid);
}
.btn--outline:hover { border-color: var(--rouge); color: var(--rouge); }
.btn--outline-blanc {
  background: transparent; color: var(--blanc);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn--outline-blanc:hover { border-color: var(--rouge); color: var(--rouge); }
.btn--sm { padding: 0.5rem 1.2rem; font-size: 0.72rem; }

/* ============================================================
   BARRE DE RECHERCHE RAPIDE
   ============================================================ */
.searchbar {
  background: var(--gris-clair); border-bottom: 1px solid var(--gris-mid);
  padding: 1.2rem 2.5rem; display: flex; gap: 0.75rem;
  align-items: center; flex-wrap: wrap;
}
.searchbar__label {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texte-sec); white-space: nowrap; margin-right: 0.4rem;
}
.searchbar select, .searchbar input {
  border: 1px solid var(--gris-mid); background: var(--blanc);
  padding: 0.55rem 0.9rem; font-size: 0.8rem; color: var(--texte);
  flex: 1; min-width: 130px; border-radius: var(--radius);
  transition: border-color var(--transition);
}
.searchbar select:focus, .searchbar input:focus {
  outline: none; border-color: var(--rouge);
}

/* ============================================================
   SECTION TITRE
   ============================================================ */
.section { padding: 4rem 2.5rem; }
.section--dark { background: var(--noir); color: var(--blanc); }
.section--grey { background: var(--gris-clair); }
.section__header {
  display: flex; justify-content: space-between;
  align-items: flex-end; margin-bottom: 2.2rem;
}
.section__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.1rem; font-weight: 400;
}
.section__title--blanc { color: var(--blanc); }
.section__title span { color: var(--rouge); }
.section__sub {
  font-size: 0.78rem; color: var(--texte-sec); margin-top: 0.25rem;
  letter-spacing: 0.04em;
}
.section__sub--blanc { color: #888; }

/* ============================================================
   FILTRES LATÉRAUX (CATALOGUE)
   ============================================================ */
.catalogue-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; }
.filters {
  background: var(--blanc); border: 1px solid var(--gris-mid);
  padding: 1.5rem; align-self: start;
  position: sticky; top: 80px; border-radius: var(--radius);
}
.filters__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.4rem;
}
.filters__title {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texte-sec); font-weight: 500;
}
.filters__reset {
  background: none; border: none; color: var(--rouge);
  font-size: 0.7rem; cursor: pointer; text-decoration: underline;
}
.filter-group { margin-bottom: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--gris-clair); }
.filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-group__title { font-size: 0.75rem; font-weight: 500; margin-bottom: 0.7rem; }
.filter-check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.filter-check input[type="checkbox"] { accent-color: var(--rouge); }
.filter-check label { font-size: 0.78rem; color: var(--texte-sec); cursor: pointer; }
.filter-range { width: 100%; accent-color: var(--rouge); margin: 0.4rem 0; }
.filter-range-vals { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--texte-sec); }

/* ============================================================
   GRILLE VÉHICULES
   ============================================================ */
.cars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.cars-grid--2 { grid-template-columns: repeat(2, 1fr); }

.car-card {
  background: var(--blanc); border: 1px solid var(--gris-mid);
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; transition: border-color var(--transition), transform var(--transition);
  position: relative;
}
.car-card:hover { border-color: var(--rouge); transform: translateY(-2px); }
.car-card--prestige { border-color: rgba(192,25,42,0.3); }

.car-card__img {
  width: 100%; height: 180px;
  background: var(--gris-clair); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.car-card__img img { width: 100%; height: 100%; object-fit: cover; }
.car-card__no-photo {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; color: var(--texte-sec); font-size: 0.75rem;
}
.car-card__no-photo svg { width: 36px; height: 36px; stroke: var(--gris-mid); }

.car-badge {
  position: absolute; top: 0.7rem; left: 0.7rem;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25rem 0.65rem; border-radius: var(--radius);
}
.badge--prestige { background: var(--rouge); color: var(--blanc); }
.badge--eco      { background: var(--noir); color: var(--blanc); }
.badge--new      { background: var(--vert-ok); color: var(--blanc); }
.badge--reserve  { background: #7a5a00; color: var(--blanc); }
.badge--vendu    { background: #555; color: var(--blanc); }

.car-card__fav {
  position: absolute; top: 0.7rem; right: 0.7rem;
  background: var(--blanc); border: 1px solid var(--gris-mid);
  width: 30px; height: 30px; display: flex;
  align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; border-radius: 50%;
  transition: all var(--transition);
}
.car-card__fav:hover { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }

.car-card__body { padding: 1rem 1.1rem 1.2rem; }
.car-card__brand { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-sec); }
.car-card__model { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 500; margin: 0.1rem 0 0.8rem; }

.car-card__specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-bottom: 1rem; }
.car-spec { background: var(--gris-clair); text-align: center; padding: 0.45rem 0.2rem; border-radius: var(--radius); }
.car-spec__val { font-size: 0.78rem; font-weight: 500; }
.car-spec__lbl { font-size: 0.58rem; color: var(--texte-sec); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.1rem; }

.car-card__bottom { display: flex; align-items: center; justify-content: space-between; }
.car-card__price { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 500; color: var(--rouge); }
.car-card__monthly { font-size: 0.7rem; color: var(--texte-sec); margin-top: 0.1rem; }
.car-card__btn {
  background: var(--noir); color: var(--blanc); border: none;
  padding: 0.5rem 1rem; font-size: 0.7rem; letter-spacing: 0.07em;
  text-transform: uppercase; cursor: pointer;
  border-radius: var(--radius); transition: background var(--transition);
}
.car-card:hover .car-card__btn { background: var(--rouge); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2.5rem; }
.page-btn {
  width: 36px; height: 36px; border: 1px solid var(--gris-mid);
  background: none; cursor: pointer; font-size: 0.8rem;
  border-radius: var(--radius); transition: all var(--transition);
}
.page-btn:hover { border-color: var(--rouge); color: var(--rouge); }
.page-btn--active { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }

/* ============================================================
   SERVICES (DARK)
   ============================================================ */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(255,255,255,0.08);
}
.service-card {
  background: var(--noir); padding: 2.5rem 2rem;
  transition: background var(--transition);
}
.service-card:hover { background: #111; }
.service-card--featured {
  background: #0e0e0e; border: 1px solid rgba(192,25,42,0.3);
}
.service-icon {
  width: 50px; height: 50px; border: 1px solid rgba(192,25,42,0.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem; border-radius: var(--radius);
}
.service-icon svg { width: 24px; height: 24px; stroke: var(--rouge); fill: none; stroke-width: 1.5; }
.service-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem; color: var(--blanc); margin-bottom: 0.7rem;
}
.service-desc { font-size: 0.8rem; color: #888; line-height: 1.85; margin-bottom: 1.5rem; }
.service-link {
  color: var(--rouge); font-size: 0.7rem; letter-spacing: 0.09em;
  text-transform: uppercase; display: flex; align-items: center; gap: 0.4rem;
}

/* ============================================================
   FORMULAIRES
   ============================================================ */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block; font-size: 0.68rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--texte-sec); margin-bottom: 0.4rem;
}
.form-input {
  width: 100%; border: 1px solid var(--gris-mid);
  padding: 0.7rem 0.95rem; font-size: 0.82rem; color: var(--texte);
  background: var(--blanc); border-radius: var(--radius);
  transition: border-color var(--transition);
}
.form-input:focus { outline: none; border-color: var(--rouge); }
textarea.form-input { resize: vertical; min-height: 90px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-submit {
  width: 100%; background: var(--rouge); color: var(--blanc);
  border: none; padding: 0.95rem; font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  font-weight: 500; border-radius: var(--radius);
  transition: background var(--transition); margin-top: 0.5rem;
}
.form-submit:hover { background: var(--rouge-fonce); }
.form-note { font-size: 0.7rem; color: var(--texte-sec); text-align: center; margin-top: 0.7rem; }

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.flash {
  padding: 0.9rem 1.5rem; margin: 1rem 2.5rem; border-radius: var(--radius);
  font-size: 0.82rem; display: flex; align-items: center; gap: 0.6rem;
}
.flash--success { background: #d4edda; color: var(--vert-ok); border: 1px solid #b8dac4; }
.flash--error   { background: var(--rouge-clair); color: var(--rouge-fonce); border: 1px solid #e8b0b6; }
.flash--info    { background: #dbeafe; color: #1e3a8a; border: 1px solid #bfdbfe; }

/* ============================================================
   TEMOIGNAGES
   ============================================================ */
.temo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.temo-card { border: 1px solid rgba(255,255,255,0.1); padding: 2rem; border-radius: var(--radius); }
.temo-stars { color: var(--rouge); font-size: 0.9rem; margin-bottom: 1rem; letter-spacing: 2px; }
.temo-text { font-size: 0.82rem; color: #ccc; line-height: 1.9; margin-bottom: 1.2rem; font-style: italic; }
.temo-author { font-size: 0.7rem; color: #888; text-transform: uppercase; letter-spacing: 0.08em; }
.temo-author strong { color: var(--rouge); font-weight: 400; display: block; font-size: 0.82rem; text-transform: none; letter-spacing: 0; margin-bottom: 0.1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #050505; padding: 3.5rem 2.5rem 1.5rem; color: #666; border-top: 2px solid var(--rouge); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; }
.footer__brand { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--blanc); letter-spacing: 0.12em; margin-bottom: 0.8rem; }
.footer__brand span { color: var(--rouge); }
.footer__tagline { font-size: 0.78rem; color: #555; line-height: 1.9; margin-bottom: 1.2rem; }
.footer__contact { font-size: 0.78rem; margin-bottom: 0.4rem; }
.footer__col-title { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rouge); margin-bottom: 1rem; }
.footer__links { list-style: none; }
.footer__links li { margin-bottom: 0.55rem; }
.footer__links a { font-size: 0.78rem; color: #555; transition: color var(--transition); }
.footer__links a:hover { color: var(--rouge); }
.footer__bottom { border-top: 1px solid #111; padding-top: 1.2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.footer__copy { font-size: 0.7rem; color: #333; }
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a { font-size: 0.7rem; color: #333; }
.footer__legal a:hover { color: var(--rouge); }

/* ============================================================
   ADMIN
   ============================================================ */
.admin-wrap { display: grid; grid-template-columns: 230px 1fr; min-height: calc(100vh - 68px); }
.admin-sidebar { background: var(--noir); border-right: 1px solid #1e1e1e; }
.admin-sidebar__logo { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: var(--rouge); padding: 1.5rem; border-bottom: 1px solid #1e1e1e; }
.admin-sidebar__logo span { display: block; font-size: 0.62rem; color: #555; font-family: 'DM Sans', sans-serif; letter-spacing: 0.09em; text-transform: uppercase; margin-top: 0.2rem; }
.admin-menu { list-style: none; margin-top: 0.5rem; }
.admin-menu__item a {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.5rem; font-size: 0.78rem; color: #888;
  transition: all var(--transition);
}
.admin-menu__item a:hover { color: var(--blanc); background: rgba(255,255,255,0.04); }
.admin-menu__item--active a { color: var(--rouge); background: rgba(192,25,42,0.08); border-left: 2px solid var(--rouge); }
.admin-menu__item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }
.admin-content { padding: 2rem; background: var(--gris-clair); }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem; }
.admin-page-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; }
.admin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.8rem; }
.admin-kpi { background: var(--blanc); border: 1px solid var(--gris-mid); padding: 1.1rem 1.2rem; border-radius: var(--radius); }
.admin-kpi__n { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 500; color: var(--rouge); }
.admin-kpi__l { font-size: 0.65rem; color: var(--texte-sec); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 0.1rem; }
.admin-kpi__delta { font-size: 0.68rem; margin-top: 0.3rem; }
.delta-up { color: var(--vert-ok); }
.delta-dn { color: var(--rouge); }
.admin-table-wrap { background: var(--blanc); border: 1px solid var(--gris-mid); border-radius: var(--radius); overflow: hidden; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.admin-table th { text-align: left; padding: 0.75rem 1rem; font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--texte-sec); border-bottom: 2px solid var(--gris-mid); background: var(--gris-clair); }
.admin-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gris-clair); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--gris-clair); }
.status-pill { display: inline-block; padding: 0.2rem 0.65rem; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius); }
.pill--ligne  { background: #d4edda; color: var(--vert-ok); }
.pill--reserve { background: #fff3cd; color: #7a5a00; }
.pill--vendu  { background: var(--rouge-clair); color: var(--rouge-fonce); }
.pill--archive { background: var(--gris-mid); color: var(--texte-sec); }
.pill--attente { background: #fff3cd; color: #7a5a00; }
.pill--confirme { background: #d4edda; color: var(--vert-ok); }
.pill--annule   { background: var(--rouge-clair); color: var(--rouge-fonce); }
.pill--recu     { background: #dbeafe; color: #1e3a8a; }
.admin-actions { display: flex; gap: 0.4rem; }
.admin-action-btn {
  background: none; border: 1px solid var(--gris-mid); padding: 0.28rem 0.7rem;
  font-size: 0.68rem; cursor: pointer; border-radius: var(--radius);
  transition: all var(--transition);
}
.admin-action-btn:hover { border-color: var(--rouge); color: var(--rouge); }
.admin-action-btn--danger:hover { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }

/* ============================================================
   LOGIN ADMIN
   ============================================================ */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; background: var(--noir);
}
.login-card {
  background: var(--noir-3); border: 1px solid rgba(192,25,42,0.2);
  padding: 3rem; width: 100%; max-width: 420px; border-radius: var(--radius);
}
.login-logo { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--blanc); letter-spacing: 0.14em; text-align: center; margin-bottom: 0.3rem; }
.login-logo span { color: var(--rouge); }
.login-sub { font-size: 0.72rem; text-align: center; color: #666; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2rem; }
.login-card .form-label { color: #888; }
.login-card .form-input { background: #111; border-color: #2a2a2a; color: var(--blanc); }
.login-card .form-input:focus { border-color: var(--rouge); }

/* ============================================================
   RESPONSIVE (tablette)
   ============================================================ */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .hero__right { display: none; }
  .hero__stats { position: static; margin-top: 2rem; }
  .cars-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .catalogue-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .admin-kpis { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .temo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav__links { display: none; }
  .hero__title { font-size: 2.6rem; }
  .cars-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .admin-wrap { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
}