/* =============================================
   RDVCar – rdvcar_all.css
   Fichier CSS fusionné :
     1. style.css          (global / index)
     2. connexion_style.css (page connexion)
     3. style-rtl.css      (surcharges RTL arabe)
   ============================================= */


/* ============================================
   1. STYLE.CSS — GLOBAL / INDEX
   ============================================ */

/* ---- VARIABLES ---- */
:root {
    --rouge:       #E8202A;
    --rouge-dark:  #b5181f;
    --noir:        #0d0d0d;
    --gris-fonce:  #1a1a1a;
    --gris-moyen:  #2a2a2a;
    --gris-clair:  #f5f5f5;
    --blanc:       #ffffff;
    --texte-muted: #888888;
    --muted:       #777777;
    --gris-input:  #1f1f1f;
    --border:      rgba(255,255,255,0.08);
    --radius:      14px;
    --transition:  0.3s ease;
    --shadow:      0 20px 40px rgba(0,0,0,0.4);
    --container:   90vw;
    --pad-x:       60px;
}
/* ── Statut horaire ── */
.horaire-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 600;
    padding: 3px 9px; border-radius: 20px;
}
.horaire-badge.ouvert {
    background: rgba(34,197,94,0.15);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}
.horaire-badge.ferme {
    background: rgba(239,68,68,0.12);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
}
.horaire-detail { font-size: 0.72rem; color: #888; margin-top: 2px; }
.distance-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; color: #aaa;
}
/* Skeleton loader */
.garage-skeleton {
    background: var(--gris-moyen);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.garage-skeleton .sk-img  { height: 180px; background: rgba(255,255,255,0.05); }
.garage-skeleton .sk-line {
    height: 12px; border-radius: 6px;
    background: rgba(255,255,255,0.07); margin: 12px 18px 0;
}
.garage-skeleton .sk-line.short { width: 55%; }
.garage-skeleton .sk-line.xshort { width: 35%; margin-bottom: 18px; }
@keyframes skeleton-pulse {
    0%,100% { opacity: 1; } 50% { opacity: .5; }
}
/* Message géoloc refusée */
.geo-fallback {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 0.9rem;
}
.geo-fallback span { font-size: 2rem; display: block; margin-bottom: 12px; }

/* =============================================
   PAGE LAVAGE — styles spécifiques
   Couleur d'accent du service : #f97316 (bleu eau)
   ============================================= */
:root {
    --srv-color:      #f97316;
    --srv-color-dark: #ea6500;
    --srv-color-glow: rgba(249,115,22,0.12);
}

/* ── Hero ── */
.mec-hero {
    padding: 140px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.mec-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 40%, rgba(249,115,22,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 5%  70%, rgba(232,32,42,0.06) 0%, transparent 55%);
}
.mec-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.mec-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.lang-ar .breadcrumb { flex-direction: row-reverse; }
.breadcrumb a { color: #666; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--srv-color); }
.breadcrumb-sep { color: #333; }
.breadcrumb-current { color: var(--srv-color); font-weight: 600; }

/* Titre hero */
.mec-title-wrap { margin-bottom: 32px; }
.mec-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(249,115,22,0.1);
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--srv-color);
    margin-bottom: 16px;
}
.mec-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
body.lang-ar .mec-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.mec-hero-h1 .accent { color: var(--srv-color); }
.mec-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 36px;
}

/* Stat bar */
.mec-stat-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    padding-bottom: 48px;
}
body.lang-ar .mec-stat-bar { flex-direction: row-reverse; }
.mec-stat {
    padding: 0 40px 0 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 40px;
}
body.lang-ar .mec-stat {
    padding: 0 0 0 40px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    margin-right: 0; margin-left: 40px;
}
.mec-stat:last-child { border: none; margin: 0; padding: 0; }
.mec-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}
.mec-stat-num em { color: var(--srv-color); font-style: normal; font-size: 1.8rem; }
.mec-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    margin-top: 2px;
}
body.lang-ar .mec-stat-label { letter-spacing: 0; }

/* ── Panneau de recherche ── */
.search-panel {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}
.search-panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.lang-ar .search-panel-inner { flex-direction: row-reverse; }

/* Onglets Géo / Filtre */
.search-tabs {
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
body.lang-ar .search-tabs {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.search-tab {
    padding: 18px 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
}
body.lang-ar .search-tab { font-family: 'Cairo', sans-serif; }
.search-tab:hover { color: #aaa; }
.search-tab.active {
    color: var(--srv-color);
    border-bottom: 2px solid var(--srv-color);
}

/* Formulaires */
.search-forms { flex: 1; }
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 0 14px 24px;
    flex-wrap: wrap;
}
body.lang-ar .search-form { padding: 14px 24px 14px 0; }
.search-form.active { display: flex; }

.search-select, .search-input {
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.83rem;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
body.lang-ar .search-select, body.lang-ar .search-input { font-family: 'Cairo', sans-serif; }
.search-select:focus, .search-input:focus { border-color: var(--srv-color); }
.search-select { min-width: 200px; cursor: pointer; }
.search-select option { background: #1a1a1a; color: #fff; }

.btn-search {
    height: 42px;
    padding: 0 22px;
    background: var(--srv-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.lang-ar .btn-search { font-family: 'Cairo', sans-serif; }
.btn-search:hover { background: var(--srv-color-dark); transform: scale(1.02); }

.btn-geo {
    height: 42px;
    padding: 0 18px;
    background: rgba(249,115,22,0.1);
    color: var(--srv-color);
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
body.lang-ar .btn-geo { font-family: 'Cairo', sans-serif; }
.btn-geo:hover {
    background: rgba(249,115,22,0.18);
    border-color: rgba(249,115,22,0.5);
}
.btn-geo.loading { opacity: 0.6; pointer-events: none; }

/* ── Résultats ── */
.results-section {
    padding: 60px 0 100px;
    background: #111;
    min-height: 60vh;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}
body.lang-ar .results-header { flex-direction: row-reverse; }
.results-count {
    font-size: 0.8rem;
    color: #555;
}
.results-count strong { color: var(--srv-color); }

/* Mode badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.mode-badge.geo    { background: rgba(249,115,22,0.1);  color: var(--srv-color);  border: 1px solid rgba(249,115,22,0.2); }
.mode-badge.filter { background: rgba(232,32,42,0.1);   color: var(--rouge);       border: 1px solid rgba(232,32,42,0.2); }
.mode-badge.all    { background: rgba(255,255,255,0.05); color: #888;               border: 1px solid rgba(255,255,255,0.08); }

/* Grille garages */
.garages-grid-lav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Carte garage */
.garage-card-lav {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
}
.garage-card-lav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--srv-color);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}
.garage-card-lav:hover {
    border-color: rgba(249,115,22,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(249,115,22,0.05);
}
.garage-card-lav:hover::after { transform: scaleX(1); }

/* Photo / visuel */
.gcard-visual {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #0d2038);
    flex-shrink: 0;
}
.gcard-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.garage-card-lav:hover .gcard-visual img { transform: scale(1.05); }
.gcard-visual-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.15;
}
/* Badges sur la photo */
.gcard-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
body.lang-ar .gcard-badges { flex-direction: row-reverse; }
.gcard-vedette {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.gcard-vedette.gold { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.gcard-distance {
    background: rgba(249,115,22,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(249,115,22,0.3);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--srv-color);
}
/* Statut ouvert/fermé sur photo */
.gcard-statut {
    position: absolute;
    bottom: 10px;
    left: 12px;
}
body.lang-ar .gcard-statut { left: auto; right: 12px; }
.gcard-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.gcard-statut-pill.ouvert {
    background: rgba(34,197,94,0.2);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}
.gcard-statut-pill.ferme {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
}

/* Corps carte */
.gcard-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.gcard-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
body.lang-ar .gcard-name { font-family: 'Cairo', sans-serif; }

.gcard-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #666;
}
body.lang-ar .gcard-location { flex-direction: row-reverse; justify-content: flex-end; }

.gcard-horaire-detail {
    font-size: 0.72rem;
    color: #555;
    margin-top: 1px;
}

/* Services pills */
.gcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.lang-ar .gcard-pills { flex-direction: row-reverse; }
.gcard-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    transition: all 0.2s;
}
.gcard-pill.highlight {
    background: rgba(249,115,22,0.1);
    border-color: rgba(249,115,22,0.25);
    color: var(--srv-color);
}
.gcard-pill.domicile {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.2);
    color: #4ade80;
}

/* Lien bas */
.gcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}
body.lang-ar .gcard-footer { flex-direction: row-reverse; }
.gcard-rdv {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--srv-color);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.garage-card-lav:hover .gcard-rdv { gap: 10px; }
body.lang-ar .gcard-rdv { flex-direction: row-reverse; }
.gcard-vedette-stars { color: #fbbf24; font-size: 0.75rem; letter-spacing: 1px; }

/* ── État vide ── */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}
.no-results-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 10px; color: #888; font-weight: 500; }
.no-results p  { font-size: 0.85rem; color: #555; max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ── Squelette chargement ── */
.skeleton-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    animation: sk-pulse 1.6s ease-in-out infinite;
}
.skeleton-card .sk-img  { height: 170px; background: rgba(255,255,255,0.04); }
.skeleton-card .sk-line {
    height: 11px; background: rgba(255,255,255,0.05);
    border-radius: 6px; margin: 14px 18px 0;
}
.skeleton-card .sk-line.s { width: 50%; }
.skeleton-card .sk-line.xs { width: 30%; margin-bottom: 20px; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .garages-grid-lav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .mec-hero { padding: 110px 20px 0; }
    .search-panel { position: static; }
    .search-panel-inner { flex-direction: column; padding: 0 20px; }
    .search-tabs { border: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .search-form { padding: 14px 0; }
    .search-select { min-width: 0; flex: 1; }
    .results-section { padding: 40px 0 70px; }
    .garages-grid-lav { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .mec-stat-bar { gap: 0; flex-wrap: wrap; }
    .mec-stat { padding: 0 20px 0 0; margin-right: 20px; }
}
/* =====================================================
   VÉRIFICATION SMS — page entière sombre centrée
   ===================================================== */
.sms-page {
    min-height: 100vh;
    background: #0d0d0d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 1.25rem;
    font-family: 'Outfit', 'Cairo', sans-serif;
    position: relative;
    overflow: hidden;
}

/* Fond décoratif */
.sms-bg-grid {
    position: fixed; inset: 0;
    background-image:
        linear-gradient(rgba(232,32,42,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232,32,42,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
    z-index: 0;
}
.sms-bg-glow {
    position: fixed;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(232,32,42,.13) 0%, transparent 65%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    animation: smsGlow 7s ease-in-out infinite;
}
@keyframes smsGlow {
    0%,100% { opacity: .7; transform: translate(-50%,-50%) scale(1); }
    50%      { opacity: 1;  transform: translate(-50%,-50%) scale(1.08); }
}

/* ── Carte centrale ────────────────────────── */
.sms-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: #161616;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 2.5rem 2rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .5s ease, transform .5s ease;
}
.sms-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Logo */
.sms-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.sms-logo img { height: 34px; }

/* Switcher langue */
.sms-lang {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
}
[dir="rtl"] .sms-lang { right: auto; left: 1.25rem; }
.sms-lang-btn {
    text-decoration: none;
    color: rgba(255,255,255,.35);
    padding: 2px 7px;
    border-radius: 5px;
    transition: color .2s;
}
.sms-lang-btn.active { color: #E8202A; font-weight: 600; }
.sms-lang-sep { color: rgba(255,255,255,.15); }

/* Icône téléphone animée */
.sms-phone-icon {
    width: 72px; height: 72px;
    background: rgba(232,32,42,.12);
    border: 1.5px solid rgba(232,32,42,.3);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
    animation: phonePulse 2.5s ease-in-out infinite;
}
@keyframes phonePulse {
    0%,100% { box-shadow: 0 0 0 0   rgba(232,32,42,.3); }
    50%      { box-shadow: 0 0 0 12px rgba(232,32,42,0); }
}

/* En-tête */
.sms-header { text-align: center; margin-bottom: 2rem; }
.sms-header h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.9rem;
    color: #fff;
    margin: 0 0 .5rem;
    letter-spacing: .04em;
}
.sms-header p {
    color: rgba(255,255,255,.45);
    font-size: .88rem;
    line-height: 1.6;
    margin: 0;
}
.sms-header strong {
    color: #E8202A;
    font-weight: 700;
    letter-spacing: .05em;
}

/* ── Champ code OTP style ──────────────────── */
.sms-field { margin-bottom: 1.25rem; }
.sms-field label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .5rem;
}
.sms-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.sms-input-wrap input {
    width: 100%;
    padding: .85rem 1.1rem .85rem 3rem;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 12px;
    color: #fff;
    font-size: 1.4rem;
    font-family: 'Outfit', monospace;
    font-weight: 700;
    letter-spacing: .35em;
    text-align: center;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
[dir="rtl"] .sms-input-wrap input {
    padding: .85rem 3rem .85rem 1.1rem;
}
.sms-input-wrap input:focus {
    outline: none;
    border-color: #E8202A;
    background: rgba(232,32,42,.06);
    box-shadow: 0 0 0 3px rgba(232,32,42,.15);
}
.sms-input-wrap input::placeholder {
    color: rgba(255,255,255,.15);
    letter-spacing: .2em;
    font-size: 1.1rem;
}
.sms-eye-btn {
    position: absolute;
    right: 12px;
    background: none; border: none;
    cursor: pointer; color: rgba(255,255,255,.3);
    display: flex; align-items: center;
    padding: 4px;
    transition: color .2s;
}
[dir="rtl"] .sms-eye-btn { right: auto; left: 12px; }
.sms-eye-btn:hover { color: #E8202A; }

/* Bloc erreur */
.sms-error {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: rgba(232,32,42,.1);
    border: 1px solid rgba(232,32,42,.3);
    border-radius: 10px;
    padding: .75rem 1rem;
    color: #ff8080;
    font-size: .85rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    animation: shakeErr .35s ease;
}
@keyframes shakeErr {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}
.sms-error-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

/* Bouton submit */
.sms-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    padding: .88rem 1.5rem;
    background: #E8202A;
    border: none;
    border-radius: 11px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, box-shadow .2s, transform .15s;
    box-shadow: 0 4px 20px rgba(232,32,42,.3);
    margin: 0 auto 1.5rem auto;
}
.sms-submit:hover  { background: #c0181f; box-shadow: 0 6px 28px rgba(232,32,42,.45); }
.sms-submit:active { transform: scale(.97); }

/* Info bas de carte */
.sms-footer-info {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 1.25rem;
}
.sms-footer-info p {
    color: rgba(255,255,255,.3);
    font-size: .8rem;
    line-height: 1.6;
    margin: 0 0 .6rem;
}
.sms-resend-btn {
    background: none; border: none;
    color: rgba(232,32,42,.7);
    font-size: .82rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: color .2s;
}
.sms-resend-btn:hover { color: #E8202A; }
.sms-resend-btn:disabled { color: rgba(255,255,255,.2); cursor: default; }

/* Countdown renvoi */
.sms-countdown {
    font-size: .78rem;
    color: rgba(255,255,255,.25);
    margin-top: .3rem;
}

/* Lien retour */
.sms-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 1rem;
    color: rgba(255,255,255,.25);
    font-size: .8rem;
    text-decoration: none;
    transition: color .2s;
}
.sms-back:hover { color: rgba(255,255,255,.6); }
/* =====================================================
   PROFIL GARAGE — design sombre premium RDVCar
   ===================================================== */
:root {
    --pg-red:    #E8202A;
    --pg-red-d:  #c0181f;
    --pg-dark:   #0d0d0d;
    --pg-dark2:  #141414;
    --pg-dark3:  #1c1c1c;
    --pg-border: rgba(255,255,255,.08);
    --pg-text:   rgba(255,255,255,.9);
    --pg-muted:  rgba(255,255,255,.42);
    --pg-r:      14px;
}
.pg-body { background:var(--pg-dark); color:var(--pg-text); font-family:'Outfit','Cairo',sans-serif; min-height:100vh; }

/* ── Hero ─── */
.pg-hero { position:relative; height:260px; overflow:hidden; background:var(--pg-dark2); }
@media(max-width:640px){ .pg-hero{height:190px;} }
.pg-hero-img { width:100%; height:100%; object-fit:cover; }
.pg-hero-overlay { position:absolute;inset:0; background:linear-gradient(to bottom,transparent 30%,rgba(13,13,13,.95) 100%); }

/* ── Banner Photo1 (cadrage style Facebook) ── */
.pg-banner-wrap { position:relative; height:260px; overflow:hidden; background:#111; }
@media(max-width:640px){ .pg-banner-wrap{height:190px;} }

.pg-banner-img {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    user-select:none;
    -webkit-user-drag:none;
}

.pg-banner-editing .pg-banner-img {
    opacity:.85;
    outline:2px dashed rgba(255,255,255,.35);
    outline-offset:-3px;
}

.pg-banner-edit-btn {
    position:absolute; bottom:12px; right:14px; z-index:10;
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 14px; border-radius:8px; border:none; cursor:pointer;
    background:rgba(13,13,13,.72); backdrop-filter:blur(6px);
    color:#fff; font-size:.78rem; font-weight:600;
    box-shadow:0 2px 8px rgba(0,0,0,.45);
    transition:.2s ease;
}
.pg-banner-edit-btn:hover { background:rgba(13,13,13,.9); transform:translateY(-1px); }
.pg-banner-edit-btn svg { flex-shrink:0; }

.pg-banner-crop-bar {
    position:absolute; bottom:0; left:0; right:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px;
    background:rgba(13,13,13,.82); backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.08);
    animation:slideUpBar .18s ease;
}
@keyframes slideUpBar {
    from { transform:translateY(100%); opacity:0; }
    to   { transform:translateY(0);    opacity:1; }
}
.pg-banner-crop-hint { font-size:.78rem; color:rgba(255,255,255,.65); font-style:italic; }
.pg-banner-crop-actions { display:flex; gap:8px; }

.pg-banner-crop-cancel {
    padding:6px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.18);
    background:transparent; color:#ccc; font-size:.82rem; font-weight:600;
    cursor:pointer; transition:.2s;
}
.pg-banner-crop-cancel:hover { background:rgba(255,255,255,.08); color:#fff; }

.pg-banner-crop-save {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 16px; border-radius:8px; border:none;
    background:var(--rouge); color:#fff; font-size:.82rem; font-weight:700;
    cursor:pointer; transition:.2s; box-shadow:0 2px 8px rgba(232,32,42,.35);
}
.pg-banner-crop-save:hover { background:var(--rouge-dark); transform:translateY(-1px); }
.pg-banner-crop-save:disabled { opacity:.55; cursor:not-allowed; transform:none; }

@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* Carousel hero */
.pg-carousel-btn {
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; background:rgba(0,0,0,.6);
    border:none; border-radius:50%; color:#fff; font-size:1.1rem;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .2s; z-index:5;
}
.pg-carousel-btn:hover{background:var(--pg-red);}
.pg-carousel-btn.prev{left:.75rem;} .pg-carousel-btn.next{right:.75rem;}

/* ── Layout ─── */
.pg-layout { max-width:960px; margin:-3rem auto 0; padding:0 1.25rem 4rem; position:relative; z-index:2; }

/* ── Card ─── */
.pg-card {
    background:var(--pg-dark2); border:1px solid var(--pg-border);
    border-radius:20px; overflow:hidden; margin-bottom:1.25rem;
    animation:fadeSlideUp .4s ease both;
}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.pg-card-header { padding:1.5rem 1.75rem; border-bottom:1px solid var(--pg-border); }
.pg-name { font-family:'Bebas Neue',sans-serif; font-size:clamp(1.8rem,4vw,2.6rem); color:#fff; line-height:1.05; letter-spacing:.04em; margin:0 0 .35rem; }
.pg-category { display:inline-flex; align-items:center; gap:.4rem; background:rgba(232,32,42,.12); border:1px solid rgba(232,32,42,.25); color:#ff8080; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.25rem .75rem; border-radius:100px; }
.pg-address { display:flex; align-items:center; gap:.4rem; color:var(--pg-muted); font-size:.85rem; margin-top:.5rem; }

.pg-btn-group { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }
.pg-btn-reserve {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.7rem 1.4rem; background:var(--pg-red); border:none;
    border-radius:10px; color:#fff; font-size:.88rem; font-weight:700;
    font-family:inherit; cursor:pointer; text-decoration:none;
    transition:background .2s,box-shadow .2s,transform .15s;
    box-shadow:0 4px 18px rgba(232,32,42,.3);
}
.pg-btn-reserve:hover{background:var(--pg-red-d);box-shadow:0 6px 24px rgba(232,32,42,.45);}
.pg-btn-reserve:active{transform:scale(.97);}
.pg-btn-reserve img{width:18px;height:18px;filter:brightness(0) invert(1);}
.pg-btn-secondary {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.7rem 1.25rem; background:rgba(255,255,255,.05);
    border:1px solid var(--pg-border); border-radius:10px;
    color:var(--pg-muted); font-size:.85rem; font-weight:600;
    font-family:inherit; cursor:pointer; text-decoration:none;
    transition:background .2s,color .2s,border-color .2s;
}
.pg-btn-secondary:hover{background:rgba(255,255,255,.1);color:var(--pg-text);border-color:rgba(255,255,255,.2);}

/* ── Sections ─── */
.pg-section { padding:1.5rem 1.75rem; border-bottom:1px solid var(--pg-border); }
.pg-section:last-child { border-bottom:none; }
.pg-section-label { font-size:.7rem; font-weight:700; color:var(--pg-red); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.85rem; }

/* Services */
.pg-services-wrap { display:flex; flex-wrap:wrap; gap:.6rem; }
.pg-service-chip {
    display:inline-flex; align-items:center; gap:.45rem;
    background:rgba(255,255,255,.04); border:1px solid var(--pg-border);
    border-radius:9px; padding:.45rem .85rem;
    font-size:.8rem; font-weight:500; color:var(--pg-muted);
    transition:background .2s,border-color .2s,color .2s;
}
.pg-service-chip:hover{background:rgba(232,32,42,.1);border-color:rgba(232,32,42,.3);color:#fff;}
.pg-service-chip img{width:18px;height:18px;filter:brightness(0) invert(.6);}

/* Horaires */
.pg-horaires-grid { display:flex; flex-direction:column; gap:.35rem; }
.pg-day-row { display:flex; align-items:center; justify-content:space-between; padding:.45rem .75rem; border-radius:8px; font-size:.85rem; transition:background .2s; }
.pg-day-row:hover{background:rgba(255,255,255,.03);}
.pg-day-row.pg-day-today{background:rgba(232,32,42,.08);border:1px solid rgba(232,32,42,.2);}
.pg-day-name{color:var(--pg-text);font-weight:600;min-width:90px;}
.pg-day-hours{color:var(--pg-muted);font-size:.82rem;}
.pg-day-today .pg-day-name{color:#fff;} .pg-day-today .pg-day-hours{color:#ff8080;}

/* Carte mini */
.pg-map-wrap { border-radius:12px; overflow:hidden; height:200px; border:1px solid var(--pg-border); cursor:pointer; }
#pg-map-mini{width:100%;height:100%;}

/* Nav sticky mobile */
.pg-sticky-nav { display:none; position:fixed; bottom:0;left:0;right:0; z-index:200;
    background:rgba(14,14,14,.97); backdrop-filter:blur(16px);
    border-top:1px solid var(--pg-border); padding:.85rem 1.25rem; gap:.75rem; }
@media(max-width:768px){.pg-sticky-nav{display:flex;}}

/* ══ MODAL base ══ */
.pg-modal-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
    z-index:500; align-items:center; justify-content:center;
}
.pg-modal-overlay.open{display:flex;}
.pg-modal {
    background:#161616; border:1px solid rgba(255,255,255,.1);
    border-radius:22px; width:100%; max-width:540px;
    max-height:75vh; overflow-y:auto; padding:1.75rem 1.5rem 2.5rem;
    animation:slideUp .3s cubic-bezier(.25,.46,.45,.94);
}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.pg-modal-handle{width:40px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;margin:0 auto 1.5rem;cursor: pointer;}
.pg-modal-head{display: flex;}
.Xclose {cursor: pointer;}
.Xclose:hover {color: red;}
.pg-modal-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:#fff;margin-bottom:.35rem;letter-spacing:.04em;}
.pg-modal-sub{color:var(--pg-muted);font-size:.83rem;margin-bottom:1.5rem;}

/* Onglets */
.pg-modal-tabs { display:flex; background:rgba(255,255,255,.04); border:1px solid var(--pg-border); border-radius:10px; padding:3px; margin-bottom:1.5rem; gap:3px; }
.pg-modal-tab { flex:1; padding:.55rem; background:none; border:none; border-radius:8px; color:var(--pg-muted); font-size:.85rem; font-weight:600; font-family:inherit; cursor:pointer; transition:background .2s,color .2s; }
.pg-modal-tab.active{background:var(--pg-red);color:#fff;box-shadow:0 2px 10px rgba(232,32,42,.3);}

/* Champs */
.pg-modal-field{margin-bottom:.9rem;}
.pg-modal-field label{display:block;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.35rem;}
.pg-modal-field input,
.pg-modal-field select {
    width:100%; padding:.68rem 1rem;
    background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.1);
    border-radius:9px; color:#fff; font-size:.9rem; font-family:inherit;
    transition:border-color .2s,background .2s; appearance:none;
    box-sizing:border-box;
}
.pg-modal-field input:focus,.pg-modal-field select:focus{outline:none;border-color:var(--pg-red);background:rgba(232,32,42,.06);}
.pg-modal-field input::placeholder{color:rgba(255,255,255,.2);}
.pg-modal-field select option{background:#1e1e1e;}
.pg-modal-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
@media(max-width:400px){.pg-modal-row{grid-template-columns:1fr;}}

/* Choix jour */
.pg-jour-choice{display:flex;gap:.6rem;margin-bottom:.9rem;}
.pg-jour-btn {
    flex:1; padding:.65rem; background:rgba(255,255,255,.04);
    border:1.5px solid rgba(255,255,255,.1); border-radius:9px;
    color:var(--pg-muted); font-size:.82rem; font-weight:600;
    font-family:inherit; cursor:pointer; transition:all .2s; text-align:center;
}
.pg-jour-btn.active{background:rgba(232,32,42,.12);border-color:var(--pg-red);color:#fff;}

/* Submit */
.pg-modal-submit {
    display:flex; align-items:center; justify-content:center; gap:.55rem;
    width:100%; padding:.85rem; background:var(--pg-red);
    border:none; border-radius:11px; color:#fff;
    font-size:.95rem; font-weight:700; font-family:inherit;
    cursor:pointer; transition:background .2s,box-shadow .2s;
    box-shadow:0 4px 18px rgba(232,32,42,.3); margin-top:1rem;
}
.pg-modal-submit:hover{background:var(--pg-red-d);}

/* Erreur */
.pg-modal-error{background:rgba(232,32,42,.1);border:1px solid rgba(232,32,42,.3);border-radius:9px;padding:.65rem 1rem;color:#ff8080;font-size:.83rem;margin-bottom:.85rem;}

/* Eye btn */
.pg-modal-pw-wrap{position:relative;}
.pg-modal-eye{position:absolute;right:11px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--pg-muted);cursor:pointer;transition:color .2s;}
.pg-modal-eye:hover{color:var(--pg-red);}

/* CGU */
.pg-cgu-line{display:flex;align-items:flex-start;gap:.5rem;font-size:.8rem;color:var(--pg-muted);margin-top:.75rem;}
.pg-cgu-line input{accent-color:var(--pg-red);margin-top:2px;flex-shrink:0;}
.pg-cgu-line a{color:var(--pg-red);text-decoration:none;font-weight:600;}

/* Localisation domicile */
.pg-map-domicile{display:none;width:100%;height:240px;border-radius:10px;overflow:hidden;border:1px solid var(--pg-border);margin-bottom:.75rem;}
.pg-btn-localize{display:flex;align-items:center;gap:.5rem;width:100%;padding:.7rem 1rem;background:rgba(255,255,255,.05);border:1px solid var(--pg-border);border-radius:9px;color:var(--pg-muted);font-size:.85rem;font-weight:600;font-family:inherit;cursor:pointer;margin-bottom:.9rem;transition:background .2s,color .2s,border-color .2s;}
.pg-btn-localize:hover{background:rgba(232,32,42,.1);border-color:rgba(232,32,42,.3);color:#fff;}
.pg-btn-localize img{width:18px;height:18px;}

/* Modal carte */
.pg-modal-map-body{height:320px;border-radius:10px;overflow:hidden;margin-bottom:1rem;}
#pg-map-modal{width:100%;height:100%;}
.pg-map-ext-links{display:flex;gap:.75rem;justify-content:center;}
.pg-map-ext-links a img{height:36px;border-radius:6px;}

/* Responsive */
@media(max-width:640px){
    .pg-layout{padding:0 .75rem 5rem;margin-top:-2rem;}
    .pg-card-header,.pg-section{padding:1.1rem 1.25rem;}
}
/* =====================================================
   INSCRIPTION PRO — styles page
   Design multi-étapes sombre/rouge — cohérent avec cx-*
   ===================================================== */
:root {
    --pro-red:    #E8202A;
    --pro-red-d:  #c0181f;
    --pro-dark:   #0d0d0d;
    --pro-dark2:  #161616;
    --pro-dark3:  #1e1e1e;
    --pro-border: rgba(255,255,255,.09);
    --pro-text:   rgba(255,255,255,.88);
    --pro-muted:  rgb(231 231 231);
    --pro-radius: 14px;
    --pro-input-bg: rgba(255,255,255,.04);
    --pro-input-border: rgba(255,255,255,.12);
    --pro-input-focus: rgba(232,32,42,.5);
}

/* ── Fond global ────────────────────────────── */
.pro-page {
    min-height: 100vh;
    background: var(--pro-dark);
    font-family: 'Outfit', 'Cairo', sans-serif;
    color: var(--pro-text);
}

/* ── Header page ────────────────────────────── */
.pro-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(13,13,13,.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--pro-border);
    padding: .9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pro-header-logo img { height: 34px; }
.pro-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pro-lang {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
}
.pro-lang-btn {
    text-decoration: none;
    color: var(--pro-muted);
    padding: 3px 8px;
    border-radius: 5px;
    transition: color .2s;
}
.pro-lang-btn.active { color: var(--pro-red); font-weight: 600; }
.pro-lang-sep { color: var(--pro-border); }

.pro-header-connexion {
    font-size: .85rem;
    color: var(--pro-muted);
    text-decoration: none;
    padding: .4rem .9rem;
    border: 1px solid var(--pro-border);
    border-radius: 8px;
    transition: border-color .2s, color .2s;
}
.pro-header-connexion:hover { color: var(--pro-text); border-color: rgba(255,255,255,.3); }

/* ── Hero ──────────────────────────────────── */
.pro-hero {
    text-align: center;
    padding: 3.5rem 1.5rem 2rem;
    max-width: 700px;
    margin: 50px auto 0
}
.pro-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(232,32,42,.12);
    border: 1px solid rgba(232,32,42,.3);
    color: #ff6b6b;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .9rem;
    border-radius: 100px;
    margin-bottom: 1.25rem;
}
.pro-hero-badge::before { content: '⚡'; }

.pro-hero h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.05;
    color: #fff;
    margin: 0 0 .75rem;
    letter-spacing: .03em;
}
.pro-hero h1 span { color: var(--pro-red); }
.pro-hero p {
    color: var(--pro-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* ── Indicateur étapes ─────────────────────── */
.pro-steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 560px;
    margin: 2.5rem auto 0;
    padding: 0 1.5rem;
}
.pro-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    flex: 1;
    position: relative;
}
.pro-step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background: var(--pro-border);
    transition: background .4s;
}
.pro-step-item.done:not(:last-child)::after { background: var(--pro-red); }

.pro-step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--pro-border);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--pro-muted);
    background: var(--pro-dark2);
    transition: all .3s;
    position: relative;
    z-index: 1;
}
.pro-step-item.active .pro-step-num {
    border-color: var(--pro-red);
    color: #fff;
    background: var(--pro-red);
    box-shadow: 0 0 0 4px rgba(232,32,42,.2);
}
.pro-step-item.done .pro-step-num {
    border-color: var(--pro-red);
    background: var(--pro-red);
    color: #fff;
}
.pro-step-item.done .pro-step-num::after {
    content: '✓';
    position: absolute;
    font-size: .85rem;
}
.pro-step-item.done .pro-step-num span { display: none; }

.pro-step-label {
    font-size: .7rem;
    color: var(--pro-muted);
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: color .3s;
}
.pro-step-item.active .pro-step-label { color: var(--pro-text); }
.pro-step-item.done  .pro-step-label  { color: var(--pro-red); }

/* ── Wrapper formulaire ────────────────────── */
.pro-form-outer {
    max-width: 720px;
    margin: 2.5rem auto 0;
    padding: 0 1.25rem;
}

/* ── Sections / Cards ──────────────────────── */
.pro-section {
    background: var(--pro-dark2);
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
    display: none;
    animation: fadeSlideUp .35s ease both;
}
.pro-section.visible { display: block; }

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pro-section-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.pro-section-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(232,32,42,.15);
    border: 1px solid rgba(232,32,42,.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.pro-section-title h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
    letter-spacing: .04em;
}
.pro-section-title p {
    color: var(--pro-muted);
    font-size: .8rem;
    margin: .15rem 0 0;
}

/* ── Champs ────────────────────────────────── */
.pro-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1rem;
}
.pro-field:last-child { margin-bottom: 0; }

.pro-field label {
    font-size: .76rem;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.pro-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pro-input-icon {
    position: absolute;
    left: 13px;
    font-size: .95rem;
    pointer-events: none;
    z-index: 1;
}
[dir="rtl"] .pro-input-icon { left: auto; right: 13px; }

.pro-input-wrap input,
.pro-input-wrap select {
    width: 100%;
    padding: .72rem 1rem .72rem 2.5rem;
    background: var(--pro-input-bg);
    border: 1.5px solid var(--pro-input-border);
    border-radius: 10px;
    color: var(--pro-text);
    font-size: .92rem;
    font-family: inherit;
    appearance: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
[dir="rtl"] .pro-input-wrap input,
[dir="rtl"] .pro-input-wrap select {
    padding: .72rem 2.5rem .72rem 1rem;
}
.pro-input-wrap.no-icon input,
.pro-input-wrap.no-icon select {
    padding-left: 1rem;
}
[dir="rtl"] .pro-input-wrap.no-icon input,
[dir="rtl"] .pro-input-wrap.no-icon select {
    padding-right: 1rem;
}
.pro-input-wrap input:focus,
.pro-input-wrap select:focus {
    outline: none;
    border-color: var(--pro-red);
    background: rgba(232,32,42,.06);
    box-shadow: 0 0 0 3px var(--pro-input-focus);
}
.pro-input-wrap input::placeholder { color: rgba(255,255,255,.2); }
.pro-input-wrap select option { background: #1e1e1e; color: #fff; }

.pro-select-arrow {
    position: absolute;
    right: 13px;
    color: var(--pro-muted);
    font-size: .75rem;
    pointer-events: none;
}
[dir="rtl"] .pro-select-arrow { right: auto; left: 13px; }

/* Deux colonnes */
.pro-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
    margin-bottom: 1rem;
}
.pro-row .pro-field { margin-bottom: 0; }
@media (max-width: 520px) { .pro-row { grid-template-columns: 1fr; } }

/* Mot de passe œil */
.pro-eye-btn {
    position: absolute;
    right: 12px;
    background: none; border: none;
    cursor: pointer; color: var(--pro-muted);
    display: flex; align-items: center;
    padding: 4px;
    transition: color .2s;
}
[dir="rtl"] .pro-eye-btn { right: auto; left: 12px; }
.pro-eye-btn:hover { color: var(--pro-red); }

/* ── Grille services ───────────────────────── */
.pro-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}
.pro-service-label { cursor: pointer; }
.pro-service-label input[type="checkbox"] { display: none; }
.pro-service-card {
    background: var(--pro-input-bg);
    border: 1.5px solid var(--pro-input-border);
    border-radius: 12px;
    padding: .85rem .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    transition: border-color .2s, background .2s, transform .15s;
    user-select: none;
}
.pro-service-card:hover { border-color: rgba(232,32,42,.4); background: rgba(232,32,42,.06); }
.pro-service-label input:checked + .pro-service-card {
    border-color: var(--pro-red);
    background: rgba(232,32,42,.12);
    box-shadow: 0 0 0 3px rgba(232,32,42,.15);
    transform: scale(1.03);
}
.pro-service-label input:checked + .pro-service-card img { filter: brightness(0) invert(1); }
.pro-service-name {
    font-size: .68rem;
    font-weight: 600;
    text-align: center;
    color: var(--pro-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.3;
}
.pro-service-label input:checked + .pro-service-card .pro-service-name { color: #fff; }

/* Service domicile séparé */
.pro-domicile-wrap {
    border-top: 1px solid var(--pro-border);
    padding-top: 1rem;
    margin-top: .5rem;
}
.pro-domicile-label {
    font-size: .8rem;
    color: var(--pro-muted);
    margin-bottom: .65rem;
    line-height: 1.5;
}
.pro-domicile-card { max-width: 110px; }

/* ── Carte Leaflet ─────────────────────────── */
.pro-map-container {
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--pro-input-border);
    height: 280px;
    margin-bottom: 1rem;
    position: relative;
}
#pro-map { width: 100%; height: 100%; z-index: 1; }

.pro-map-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .62rem 1.2rem;
    background: rgba(232,32,42,.12);
    border: 1px solid rgba(232,32,42,.3);
    border-radius: 9px;
    color: #ff8080;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    font-family: inherit;
    margin-bottom: 1rem;
}
.pro-map-btn:hover { background: rgba(232,32,42,.2); color: #fff; border-color: var(--pro-red); }

.pro-coords {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}
.pro-coords input {
    background: var(--pro-input-bg);
    border: 1.5px solid var(--pro-input-border);
    border-radius: 9px;
    color: var(--pro-muted);
    font-size: .8rem;
    padding: .5rem .85rem;
    font-family: inherit;
    width: 100%;
}

/* ── Horaires ──────────────────────────────── */
.pro-horaires-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.pro-copy-btn {
    font-size: .75rem;
    padding: .4rem .85rem;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--pro-border);
    border-radius: 7px;
    color: var(--pro-muted);
    cursor: pointer;
    font-family: inherit;
    transition: background .2s, color .2s;
}
.pro-copy-btn:hover { background: rgba(255,255,255,.1); color: var(--pro-text); }

.pro-jour {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--pro-border);
    border-radius: 10px;
    padding: .85rem 1rem;
    margin-bottom: .55rem;
    transition: border-color .3s, background .3s;
}
.pro-jour.active { border-color: rgba(232,32,42,.25); background: rgba(232,32,42,.04); }

.pro-jour-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}
.pro-jour-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--pro-text);
    min-width: 80px;
}
.pro-switch {
    width: 40px; height: 22px;
    background: rgba(255,255,255,.1);
    border-radius: 100px;
    cursor: pointer;
    position: relative;
    transition: background .25s;
    flex-shrink: 0;
}
.pro-switch::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    top: 3px; left: 3px;
    transition: transform .25s, background .25s;
}
.pro-switch.active { background: var(--pro-red); }
.pro-switch.active::after { transform: translateX(18px); background: #fff; }

.pro-jour-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.pro-jour:not(.active) .pro-jour-controls { display: none; }

.pro-time-group {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.pro-time-group label {
    font-size: .68rem;
    color: var(--pro-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.pro-time-group input[type="time"] {
    background: var(--pro-input-bg);
    border: 1.5px solid var(--pro-input-border);
    border-radius: 8px;
    color: var(--pro-text);
    font-size: .85rem;
    padding: .45rem .7rem;
    font-family: inherit;
    width: 100%;
    transition: border-color .2s;
}
.pro-time-group input[type="time"]:focus {
    outline: none;
    border-color: var(--pro-red);
}
.pro-time-group input:disabled { opacity: .3; pointer-events: none; }

/* Toggle 24h */
.pro-jour-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid var(--pro-border);
}
.pro-jour:not(.active) .pro-jour-footer { display: none; }
.pro-jour-footer label {
    font-size: .75rem;
    color: var(--pro-muted);
    font-weight: 500;
}

/* ── Bloc erreur ───────────────────────────── */
.pro-error {
    background: rgba(232,32,42,.1);
    border: 1px solid rgba(232,32,42,.35);
    border-radius: 10px;
    padding: .9rem 1.1rem;
    color: #ff8080;
    font-size: .875rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}
.pro-error::before { content: '⚠️  '; }

/* ── CGU ───────────────────────────────────── */
.pro-cgu {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: 1.25rem;
    font-size: .85rem;
    color: var(--pro-muted);
}
.pro-cgu input[type="checkbox"] {
    width: 17px; height: 17px;
    accent-color: var(--pro-red);
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
}
.pro-cgu a { color: var(--pro-red); text-decoration: none; font-weight: 600; }

/* ── Boutons navigation ────────────────────── */
.pro-nav-btns {
    display: flex;
    gap: .85rem;
    margin-top: 1.5rem;
    justify-content: flex-end;
}
[dir="rtl"] .pro-nav-btns { justify-content: flex-start; }

.pro-btn-prev {
    padding: .78rem 1.5rem;
    background: transparent;
    border: 1.5px solid var(--pro-border);
    border-radius: 10px;
    color: var(--pro-muted);
    font-size: .9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.pro-btn-prev:hover { border-color: rgba(255,255,255,.3); color: var(--pro-text); }

.pro-btn-next,
.pro-btn-submit {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .78rem 1.75rem;
    background: var(--pro-red);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, box-shadow .2s, transform .15s;
    box-shadow: 0 4px 18px rgba(232,32,42,.3);
}
.pro-btn-next:hover,
.pro-btn-submit:hover  { background: var(--pro-red-d); box-shadow: 0 6px 24px rgba(232,32,42,.45); }
.pro-btn-next:active,
.pro-btn-submit:active { transform: scale(.97); }

/* ── Honeypot invisible ────────────────────── */
.pro-honey { display: none !important; }

/* ── Responsive ────────────────────────────── */
@media (max-width: 500px) {
    .pro-section { padding: 1.25rem 1rem; }
    .pro-hero h1 { font-size: 2.2rem; }
    .pro-services-grid { grid-template-columns: repeat(3, 1fr); }
    .pro-jour-controls { grid-template-columns: 1fr; }
}
/* =====================================================
   INSCRIPTION — styles propres à cette page
   Miroir exact du design cx-* de connexion.php
   ===================================================== */

/* ── Layout deux colonnes (identique .cx-page) ───── */
.reg-page {
    display: flex;
    min-height: 100vh;
}

/* ── Colonne gauche brand (identique .cx-left) ────── */
.reg-left {
    position: relative;
    flex: 0 0 42%;
    background: #0d0d0d;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.fix-left{
    position: fixed;
}
@media (max-width: 900px) { .reg-left { display: none; } }

.reg-left-inner {
    position: relative;
    z-index: 2;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 420px;
}
.reg-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(232,32,42,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232,32,42,.06) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
}
.reg-bg-glow {
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(232,32,42,.18) 0%, transparent 70%);
    top: -100px; left: -100px;
    z-index: 0;
    animation: glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse {
    0%,100% { transform: scale(1);   opacity: .7; }
    50%      { transform: scale(1.1); opacity: 1; }
}
.reg-logo { display: inline-block; margin-bottom: .5rem; z-index: 10; }
.reg-logo img { height: 38px; }

.reg-tagline h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 .75rem;
}
.reg-tagline h2 span { color: #E8202A; }
.reg-tagline p  { color: rgba(255,255,255,.55); font-size: .95rem; line-height: 1.6; }

.reg-stats {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
}
.reg-stat { text-align: center; }
.reg-stat strong { display: block; font-size: 1.4rem; font-weight: 700; color: #fff; }
.reg-stat strong span { color: #E8202A; }
.reg-stat small { font-size: .72rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .05em; }
.reg-stat-sep { width: 1px; height: 36px; background: rgba(255,255,255,.12); }

.reg-services-deco {
    display: flex; gap: .75rem; flex-wrap: wrap;
}
.reg-services-deco span {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    font-size: 1.2rem;
    transition: background .2s, border-color .2s;
}
.reg-services-deco span:hover {
    background: rgba(232,32,42,.15);
    border-color: rgba(232,32,42,.4);
}

/* ── Colonne droite formulaire ─────────────────────── */
.reg-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: #fafafa;
    padding: 2.5rem 1.5rem;
    overflow-y: auto;
}

[dir="rtl"] .reg-right { direction: rtl; }

.reg-form-wrapper {
    width: 100%;
    max-width: 520px;
    padding: 2.5rem 2.5rem 2rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 40px rgba(0,0,0,.08);
    opacity: 0;
    transform: translateY(20px);
}

/* Logo mobile */
.reg-logo-mobile {
    display: none;
    margin-bottom: 1.5rem;
}
.reg-logo-mobile img { height: 32px; }
@media (max-width: 900px) { .reg-logo-mobile { display: block; } }

/* Switcher langue */
.reg-lang {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-bottom: 1.5rem;
    font-size: .85rem;
    color: #aaa;
}
.reg-lang-btn {
    text-decoration: none;
    color: #aaa;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .2s;
}
.reg-lang-btn.active { color: #E8202A; font-weight: 600; }

/* En-tête */
.reg-form-header { margin-bottom: 1.75rem; }
.reg-form-header h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: #111;
    margin: 0 0 .3rem;
    letter-spacing: .03em;
}
.reg-form-header p { color: #888; font-size: .9rem; margin: 0; }

/* ── Fieldset (groupe de champs) ────────────────────── */
.reg-form { display: flex; flex-direction: column; gap: 0; }

.reg-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1rem;
}
.reg-field label {
    font-size: .8rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.reg-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.reg-input-icon {
    position: absolute;
    left: 14px;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}
[dir="rtl"] .reg-input-icon { left: auto; right: 14px; }

.reg-input-wrap input,
.reg-input-wrap select {
    width: 100%;
    padding: .72rem 1rem .72rem 2.6rem;
    border: 1.5px solid #e5e5e5;
    border-radius: 10px;
    font-size: .95rem;
    font-family: inherit;
    background: #fafafa;
    color: #111;
    transition: border-color .2s, box-shadow .2s, background .2s;
    appearance: none;
    -webkit-appearance: none;
}
[dir="rtl"] .reg-input-wrap input,
[dir="rtl"] .reg-input-wrap select {
    padding: .72rem 2.6rem .72rem 1rem;
    text-align: right;
}
.reg-input-wrap input:focus,
.reg-input-wrap select:focus {
    outline: none;
    border-color: #E8202A;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(232,32,42,.1);
}
.reg-input-wrap input::placeholder { color: #bbb; }

/* Champ sans icône (ex: select sans prefix) */
.reg-input-wrap.no-icon input,
.reg-input-wrap.no-icon select {
    padding-left: 1rem;
}
[dir="rtl"] .reg-input-wrap.no-icon input,
[dir="rtl"] .reg-input-wrap.no-icon select {
    padding-right: 1rem;
}

/* Flèche select custom */
.reg-select-arrow {
    position: absolute;
    right: 14px;
    pointer-events: none;
    color: #aaa;
    font-size: .8rem;
}
[dir="rtl"] .reg-select-arrow { right: auto; left: 14px; }

/* Deux colonnes côte à côte */
.reg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1rem;
}
@media (max-width: 480px) { .reg-row { grid-template-columns: 1fr; } }
.reg-row .reg-field { margin-bottom: 0; }

/* Champ mot de passe avec œil */
.reg-pw-wrap { position: relative; }
.reg-eye-btn {
    position: absolute;
    right: 12px;
    background: none; border: none;
    cursor: pointer;
    color: #aaa;
    padding: 4px;
    display: flex; align-items: center;
    transition: color .2s;
}
[dir="rtl"] .reg-eye-btn { right: auto; left: 12px; }
.reg-eye-btn:hover { color: #E8202A; }

/* Bloc erreur */
.reg-error {
    background: #fff5f5;
    border: 1px solid #ffc9c9;
    border-radius: 10px;
    padding: .75rem 1rem;
    color: #c0392b;
    font-size: .875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.reg-error span { font-size: 1rem; margin-right: .35rem; }

/* CGU */
.reg-cgu {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1.25rem;
    font-size: .85rem;
    color: #666;
}
.reg-cgu input[type="checkbox"] {
    width: 17px; height: 17px;
    margin-top: 2px;
    accent-color: #E8202A;
    flex-shrink: 0;
    cursor: pointer;
}
.reg-cgu a { color: #E8202A; text-decoration: none; font-weight: 600; }
.reg-cgu a:hover { text-decoration: underline; }

/* Bouton submit */
.reg-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .85rem 1.5rem;
    background: #E8202A;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(232,32,42,.25);
    margin-bottom: 1.25rem;
}
.reg-submit:hover  { background: #c0181f; box-shadow: 0 6px 24px rgba(232,32,42,.35); }
.reg-submit:active { transform: scale(.98); }

/* Séparateur */
.reg-separator {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    color: #ccc;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.reg-sep-line { flex: 1; height: 1px; background: #ececec; }

/* Lien connexion */
.reg-login-link {
    display: block;
    text-align: center;
    padding: .75rem;
    border: 1.5px solid #e5e5e5;
    border-radius: 10px;
    color: #333;
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}
.reg-login-link:hover {
    border-color: #E8202A;
    color: #E8202A;
    background: #fff5f5;
}

/* ── Progress steps (optionnel, indicateur visuel) ── */
.reg-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-bottom: 1.75rem;
}
.reg-step-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #e5e5e5;
    transition: background .3s, width .3s;
}
.reg-step-dot.active {
    background: #E8202A;
    width: 24px;
    border-radius: 4px;
}
/* =============================================
   PAGE LAVAGE — styles spécifiques
   Couleur d'accent du service : #eab308 (bleu eau)
   ============================================= */
:root {
    --srv-color:      #eab308;
    --srv-color-dark: #ca8a04;
    --srv-color-glow: rgba(234,179,8,0.12);
}

/* ── Hero ── */
.elec-hero {
    padding: 140px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.elec-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 40%, rgba(234,179,8,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 5%  70%, rgba(232,32,42,0.06) 0%, transparent 55%);
}
.elec-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.elec-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.lang-ar .breadcrumb { flex-direction: row-reverse; }
.breadcrumb a { color: #666; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--srv-color); }
.breadcrumb-sep { color: #333; }
.breadcrumb-current { color: var(--srv-color); font-weight: 600; }

/* Titre hero */
.elec-title-wrap { margin-bottom: 32px; }
.elec-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(234,179,8,0.1);
    border: 1px solid rgba(234,179,8,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--srv-color);
    margin-bottom: 16px;
}
.elec-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
body.lang-ar .elec-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.elec-hero-h1 .accent { color: var(--srv-color); }
.elec-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 36px;
}

/* Stat bar */
.elec-stat-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    padding-bottom: 48px;
}
body.lang-ar .elec-stat-bar { flex-direction: row-reverse; }
.elec-stat {
    padding: 0 40px 0 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 40px;
}
body.lang-ar .elec-stat {
    padding: 0 0 0 40px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    margin-right: 0; margin-left: 40px;
}
.elec-stat:last-child { border: none; margin: 0; padding: 0; }
.elec-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}
.elec-stat-num em { color: var(--srv-color); font-style: normal; font-size: 1.8rem; }
.elec-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    margin-top: 2px;
}
body.lang-ar .elec-stat-label { letter-spacing: 0; }

/* ── Panneau de recherche ── */
.search-panel {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}
.search-panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.lang-ar .search-panel-inner { flex-direction: row-reverse; }

/* Onglets Géo / Filtre */
.search-tabs {
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
body.lang-ar .search-tabs {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.search-tab {
    padding: 18px 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
}
body.lang-ar .search-tab { font-family: 'Cairo', sans-serif; }
.search-tab:hover { color: #aaa; }
.search-tab.active {
    color: var(--srv-color);
    border-bottom: 2px solid var(--srv-color);
}

/* Formulaires */
.search-forms { flex: 1; }
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 0 14px 24px;
    flex-wrap: wrap;
}
body.lang-ar .search-form { padding: 14px 24px 14px 0; }
.search-form.active { display: flex; }

.search-select, .search-input {
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.83rem;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
body.lang-ar .search-select, body.lang-ar .search-input { font-family: 'Cairo', sans-serif; }
.search-select:focus, .search-input:focus { border-color: var(--srv-color); }
.search-select { min-width: 200px; cursor: pointer; }
.search-select option { background: #1a1a1a; color: #fff; }

.btn-search {
    height: 42px;
    padding: 0 22px;
    background: var(--srv-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.lang-ar .btn-search { font-family: 'Cairo', sans-serif; }
.btn-search:hover { background: var(--srv-color-dark); transform: scale(1.02); }

.btn-geo {
    height: 42px;
    padding: 0 18px;
    background: rgba(234,179,8,0.1);
    color: var(--srv-color);
    border: 1px solid rgba(234,179,8,0.25);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
body.lang-ar .btn-geo { font-family: 'Cairo', sans-serif; }
.btn-geo:hover {
    background: rgba(234,179,8,0.18);
    border-color: rgba(234,179,8,0.5);
}
.btn-geo.loading { opacity: 0.6; pointer-events: none; }

/* ── Résultats ── */
.results-section {
    padding: 60px 0 100px;
    background: #111;
    min-height: 60vh;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}
body.lang-ar .results-header { flex-direction: row-reverse; }
.results-count {
    font-size: 0.8rem;
    color: #555;
}
.results-count strong { color: var(--srv-color); }

/* Mode badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.mode-badge.geo    { background: rgba(234,179,8,0.1);  color: var(--srv-color);  border: 1px solid rgba(234,179,8,0.2); }
.mode-badge.filter { background: rgba(232,32,42,0.1);   color: var(--rouge);       border: 1px solid rgba(232,32,42,0.2); }
.mode-badge.all    { background: rgba(255,255,255,0.05); color: #888;               border: 1px solid rgba(255,255,255,0.08); }

/* Grille garages */
.garages-grid-lav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Carte garage */
.garage-card-lav {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
}
.garage-card-lav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--srv-color);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}
.garage-card-lav:hover {
    border-color: rgba(234,179,8,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(234,179,8,0.05);
}
.garage-card-lav:hover::after { transform: scaleX(1); }

/* Photo / visuel */
.gcard-visual {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #0d2038);
    flex-shrink: 0;
}
.gcard-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.garage-card-lav:hover .gcard-visual img { transform: scale(1.05); }
.gcard-visual-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.15;
}
/* Badges sur la photo */
.gcard-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
body.lang-ar .gcard-badges { flex-direction: row-reverse; }
.gcard-vedette {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.gcard-vedette.gold { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.gcard-distance {
    background: rgba(234,179,8,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(234,179,8,0.3);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--srv-color);
}
/* Statut ouvert/fermé sur photo */
.gcard-statut {
    position: absolute;
    bottom: 10px;
    left: 12px;
}
body.lang-ar .gcard-statut { left: auto; right: 12px; }
.gcard-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.gcard-statut-pill.ouvert {
    background: rgba(34,197,94,0.2);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}
.gcard-statut-pill.ferme {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
}

/* Corps carte */
.gcard-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.gcard-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
body.lang-ar .gcard-name { font-family: 'Cairo', sans-serif; }

.gcard-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #666;
}
body.lang-ar .gcard-location { flex-direction: row-reverse; justify-content: flex-end; }

.gcard-horaire-detail {
    font-size: 0.72rem;
    color: #555;
    margin-top: 1px;
}

/* Services pills */
.gcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.lang-ar .gcard-pills { flex-direction: row-reverse; }
.gcard-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    transition: all 0.2s;
}
.gcard-pill.highlight {
    background: rgba(234,179,8,0.1);
    border-color: rgba(234,179,8,0.25);
    color: var(--srv-color);
}
.gcard-pill.domicile {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.2);
    color: #4ade80;
}

/* Lien bas */
.gcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}
body.lang-ar .gcard-footer { flex-direction: row-reverse; }
.gcard-rdv {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--srv-color);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.garage-card-lav:hover .gcard-rdv { gap: 10px; }
body.lang-ar .gcard-rdv { flex-direction: row-reverse; }
.gcard-vedette-stars { color: #fbbf24; font-size: 0.75rem; letter-spacing: 1px; }

/* ── État vide ── */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}
.no-results-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 10px; color: #888; font-weight: 500; }
.no-results p  { font-size: 0.85rem; color: #555; max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ── Squelette chargement ── */
.skeleton-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    animation: sk-pulse 1.6s ease-in-out infinite;
}
.skeleton-card .sk-img  { height: 170px; background: rgba(255,255,255,0.04); }
.skeleton-card .sk-line {
    height: 11px; background: rgba(255,255,255,0.05);
    border-radius: 6px; margin: 14px 18px 0;
}
.skeleton-card .sk-line.s { width: 50%; }
.skeleton-card .sk-line.xs { width: 30%; margin-bottom: 20px; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .garages-grid-lav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .elec-hero { padding: 110px 20px 0; }
    .search-panel { position: static; }
    .search-panel-inner { flex-direction: column; padding: 0 20px; }
    .search-tabs { border: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .search-form { padding: 14px 0; }
    .search-select { min-width: 0; flex: 1; }
    .results-section { padding: 40px 0 70px; }
    .garages-grid-lav { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .elec-stat-bar { gap: 0; flex-wrap: wrap; }
    .elec-stat { padding: 0 20px 0 0; margin-right: 20px; }
}
/* =============================================
   PAGE LAVAGE — styles spécifiques
   Couleur d'accent du service : #ec4899 (bleu eau)
   ============================================= */
:root {
    --srv-color:      #ec4899;
    --srv-color-dark: #db2777;
    --srv-color-glow: rgba(236,72,153,0.12);
}

/* ── Hero ── */
.carr-hero {
    padding: 140px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.carr-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 40%, rgba(236,72,153,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 5%  70%, rgba(232,32,42,0.06) 0%, transparent 55%);
}
.carr-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.carr-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.lang-ar .breadcrumb { flex-direction: row-reverse; }
.breadcrumb a { color: #666; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--srv-color); }
.breadcrumb-sep { color: #333; }
.breadcrumb-current { color: var(--srv-color); font-weight: 600; }

/* Titre hero */
.carr-title-wrap { margin-bottom: 32px; }
.carr-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(236,72,153,0.1);
    border: 1px solid rgba(236,72,153,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--srv-color);
    margin-bottom: 16px;
}
.carr-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
body.lang-ar .carr-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.carr-hero-h1 .accent { color: var(--srv-color); }
.carr-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 36px;
}

/* Stat bar */
.carr-stat-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    padding-bottom: 48px;
}
body.lang-ar .carr-stat-bar { flex-direction: row-reverse; }
.carr-stat {
    padding: 0 40px 0 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 40px;
}
body.lang-ar .carr-stat {
    padding: 0 0 0 40px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    margin-right: 0; margin-left: 40px;
}
.carr-stat:last-child { border: none; margin: 0; padding: 0; }
.carr-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}
.carr-stat-num em { color: var(--srv-color); font-style: normal; font-size: 1.8rem; }
.carr-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    margin-top: 2px;
}
body.lang-ar .carr-stat-label { letter-spacing: 0; }

/* ── Panneau de recherche ── */
.search-panel {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}
.search-panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.lang-ar .search-panel-inner { flex-direction: row-reverse; }

/* Onglets Géo / Filtre */
.search-tabs {
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
body.lang-ar .search-tabs {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.search-tab {
    padding: 18px 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
}
body.lang-ar .search-tab { font-family: 'Cairo', sans-serif; }
.search-tab:hover { color: #aaa; }
.search-tab.active {
    color: var(--srv-color);
    border-bottom: 2px solid var(--srv-color);
}

/* Formulaires */
.search-forms { flex: 1; }
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 0 14px 24px;
    flex-wrap: wrap;
}
body.lang-ar .search-form { padding: 14px 24px 14px 0; }
.search-form.active { display: flex; }

.search-select, .search-input {
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.83rem;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
body.lang-ar .search-select, body.lang-ar .search-input { font-family: 'Cairo', sans-serif; }
.search-select:focus, .search-input:focus { border-color: var(--srv-color); }
.search-select { min-width: 200px; cursor: pointer; }
.search-select option { background: #1a1a1a; color: #fff; }

.btn-search {
    height: 42px;
    padding: 0 22px;
    background: var(--srv-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.lang-ar .btn-search { font-family: 'Cairo', sans-serif; }
.btn-search:hover { background: var(--srv-color-dark); transform: scale(1.02); }

.btn-geo {
    height: 42px;
    padding: 0 18px;
    background: rgba(236,72,153,0.1);
    color: var(--srv-color);
    border: 1px solid rgba(236,72,153,0.25);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
body.lang-ar .btn-geo { font-family: 'Cairo', sans-serif; }
.btn-geo:hover {
    background: rgba(236,72,153,0.18);
    border-color: rgba(236,72,153,0.5);
}
.btn-geo.loading { opacity: 0.6; pointer-events: none; }

/* ── Résultats ── */
.results-section {
    padding: 60px 0 100px;
    background: #111;
    min-height: 60vh;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}
body.lang-ar .results-header { flex-direction: row-reverse; }
.results-count {
    font-size: 0.8rem;
    color: #555;
}
.results-count strong { color: var(--srv-color); }

/* Mode badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.mode-badge.geo    { background: rgba(236,72,153,0.1);  color: var(--srv-color);  border: 1px solid rgba(236,72,153,0.2); }
.mode-badge.filter { background: rgba(232,32,42,0.1);   color: var(--rouge);       border: 1px solid rgba(232,32,42,0.2); }
.mode-badge.all    { background: rgba(255,255,255,0.05); color: #888;               border: 1px solid rgba(255,255,255,0.08); }

/* Grille garages */
.garages-grid-lav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Carte garage */
.garage-card-lav {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
}
.garage-card-lav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--srv-color);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}
.garage-card-lav:hover {
    border-color: rgba(236,72,153,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(236,72,153,0.05);
}
.garage-card-lav:hover::after { transform: scaleX(1); }

/* Photo / visuel */
.gcard-visual {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #0d2038);
    flex-shrink: 0;
}
.gcard-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.garage-card-lav:hover .gcard-visual img { transform: scale(1.05); }
.gcard-visual-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.15;
}
/* Badges sur la photo */
.gcard-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
body.lang-ar .gcard-badges { flex-direction: row-reverse; }
.gcard-vedette {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.gcard-vedette.gold { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.gcard-distance {
    background: rgba(236,72,153,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(236,72,153,0.3);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--srv-color);
}
/* Statut ouvert/fermé sur photo */
.gcard-statut {
    position: absolute;
    bottom: 10px;
    left: 12px;
}
body.lang-ar .gcard-statut { left: auto; right: 12px; }
.gcard-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.gcard-statut-pill.ouvert {
    background: rgba(34,197,94,0.2);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}
.gcard-statut-pill.ferme {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
}

/* Corps carte */
.gcard-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.gcard-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
body.lang-ar .gcard-name { font-family: 'Cairo', sans-serif; }

.gcard-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #666;
}
body.lang-ar .gcard-location { flex-direction: row-reverse; justify-content: flex-end; }

.gcard-horaire-detail {
    font-size: 0.72rem;
    color: #555;
    margin-top: 1px;
}

/* Services pills */
.gcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.lang-ar .gcard-pills { flex-direction: row-reverse; }
.gcard-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    transition: all 0.2s;
}
.gcard-pill.highlight {
    background: rgba(236,72,153,0.1);
    border-color: rgba(236,72,153,0.25);
    color: var(--srv-color);
}
.gcard-pill.domicile {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.2);
    color: #4ade80;
}

/* Lien bas */
.gcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}
body.lang-ar .gcard-footer { flex-direction: row-reverse; }
.gcard-rdv {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--srv-color);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.garage-card-lav:hover .gcard-rdv { gap: 10px; }
body.lang-ar .gcard-rdv { flex-direction: row-reverse; }
.gcard-vedette-stars { color: #fbbf24; font-size: 0.75rem; letter-spacing: 1px; }

/* ── État vide ── */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}
.no-results-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 10px; color: #888; font-weight: 500; }
.no-results p  { font-size: 0.85rem; color: #555; max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ── Squelette chargement ── */
.skeleton-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    animation: sk-pulse 1.6s ease-in-out infinite;
}
.skeleton-card .sk-img  { height: 170px; background: rgba(255,255,255,0.04); }
.skeleton-card .sk-line {
    height: 11px; background: rgba(255,255,255,0.05);
    border-radius: 6px; margin: 14px 18px 0;
}
.skeleton-card .sk-line.s { width: 50%; }
.skeleton-card .sk-line.xs { width: 30%; margin-bottom: 20px; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .garages-grid-lav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .carr-hero { padding: 110px 20px 0; }
    .search-panel { position: static; }
    .search-panel-inner { flex-direction: column; padding: 0 20px; }
    .search-tabs { border: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .search-form { padding: 14px 0; }
    .search-select { min-width: 0; flex: 1; }
    .results-section { padding: 40px 0 70px; }
    .garages-grid-lav { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .carr-stat-bar { gap: 0; flex-wrap: wrap; }
    .carr-stat { padding: 0 20px 0 0; margin-right: 20px; }
}
/* =============================================
   PAGE LAVAGE — styles spécifiques
   Couleur d'accent du service : #22c55e (bleu eau)
   ============================================= */
:root {
    --srv-color:      #22c55e;
    --srv-color-dark: #16a34a;
    --srv-color-glow: rgba(34,197,94,0.12);
}

/* ── Hero ── */
.vid-hero {
    padding: 140px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.vid-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 40%, rgba(34,197,94,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 5%  70%, rgba(232,32,42,0.06) 0%, transparent 55%);
}
.vid-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.vid-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.lang-ar .breadcrumb { flex-direction: row-reverse; }
.breadcrumb a { color: #666; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--srv-color); }
.breadcrumb-sep { color: #333; }
.breadcrumb-current { color: var(--srv-color); font-weight: 600; }

/* Titre hero */
.vid-title-wrap { margin-bottom: 32px; }
.vid-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--srv-color);
    margin-bottom: 16px;
}
.vid-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
body.lang-ar .vid-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.vid-hero-h1 .accent { color: var(--srv-color); }
.vid-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 36px;
}

/* Stat bar */
.vid-stat-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    padding-bottom: 48px;
}
body.lang-ar .vid-stat-bar { flex-direction: row-reverse; }
.vid-stat {
    padding: 0 40px 0 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 40px;
}
body.lang-ar .vid-stat {
    padding: 0 0 0 40px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    margin-right: 0; margin-left: 40px;
}
.vid-stat:last-child { border: none; margin: 0; padding: 0; }
.vid-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}
.vid-stat-num em { color: var(--srv-color); font-style: normal; font-size: 1.8rem; }
.vid-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    margin-top: 2px;
}
body.lang-ar .vid-stat-label { letter-spacing: 0; }

/* ── Panneau de recherche ── */
.search-panel {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}
.search-panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.lang-ar .search-panel-inner { flex-direction: row-reverse; }

/* Onglets Géo / Filtre */
.search-tabs {
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
body.lang-ar .search-tabs {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.search-tab {
    padding: 18px 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
}
body.lang-ar .search-tab { font-family: 'Cairo', sans-serif; }
.search-tab:hover { color: #aaa; }
.search-tab.active {
    color: var(--srv-color);
    border-bottom: 2px solid var(--srv-color);
}

/* Formulaires */
.search-forms { flex: 1; }
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 0 14px 24px;
    flex-wrap: wrap;
}
body.lang-ar .search-form { padding: 14px 24px 14px 0; }
.search-form.active { display: flex; }

.search-select, .search-input {
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.83rem;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
body.lang-ar .search-select, body.lang-ar .search-input { font-family: 'Cairo', sans-serif; }
.search-select:focus, .search-input:focus { border-color: var(--srv-color); }
.search-select { min-width: 200px; cursor: pointer; }
.search-select option { background: #1a1a1a; color: #fff; }

.btn-search {
    height: 42px;
    padding: 0 22px;
    background: var(--srv-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.lang-ar .btn-search { font-family: 'Cairo', sans-serif; }
.btn-search:hover { background: var(--srv-color-dark); transform: scale(1.02); }

.btn-geo {
    height: 42px;
    padding: 0 18px;
    background: rgba(34,197,94,0.1);
    color: var(--srv-color);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
body.lang-ar .btn-geo { font-family: 'Cairo', sans-serif; }
.btn-geo:hover {
    background: rgba(34,197,94,0.18);
    border-color: rgba(34,197,94,0.5);
}
.btn-geo.loading { opacity: 0.6; pointer-events: none; }

/* ── Résultats ── */
.results-section {
    padding: 60px 0 100px;
    background: #111;
    min-height: 60vh;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}
body.lang-ar .results-header { flex-direction: row-reverse; }
.results-count {
    font-size: 0.8rem;
    color: #555;
}
.results-count strong { color: var(--srv-color); }

/* Mode badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.mode-badge.geo    { background: rgba(34,197,94,0.1);  color: var(--srv-color);  border: 1px solid rgba(34,197,94,0.2); }
.mode-badge.filter { background: rgba(232,32,42,0.1);   color: var(--rouge);       border: 1px solid rgba(232,32,42,0.2); }
.mode-badge.all    { background: rgba(255,255,255,0.05); color: #888;               border: 1px solid rgba(255,255,255,0.08); }

/* Grille garages */
.garages-grid-lav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Carte garage */
.garage-card-lav {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
}
.garage-card-lav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--srv-color);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}
.garage-card-lav:hover {
    border-color: rgba(34,197,94,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(34,197,94,0.05);
}
.garage-card-lav:hover::after { transform: scaleX(1); }

/* Photo / visuel */
.gcard-visual {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #0d2038);
    flex-shrink: 0;
}
.gcard-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.garage-card-lav:hover .gcard-visual img { transform: scale(1.05); }
.gcard-visual-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.15;
}
/* Badges sur la photo */
.gcard-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
body.lang-ar .gcard-badges { flex-direction: row-reverse; }
.gcard-vedette {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.gcard-vedette.gold { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.gcard-distance {
    background: rgba(34,197,94,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--srv-color);
}
/* Statut ouvert/fermé sur photo */
.gcard-statut {
    position: absolute;
    bottom: 10px;
    left: 12px;
}
body.lang-ar .gcard-statut { left: auto; right: 12px; }
.gcard-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.gcard-statut-pill.ouvert {
    background: rgba(34,197,94,0.2);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}
.gcard-statut-pill.ferme {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
}

/* Corps carte */
.gcard-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.gcard-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
body.lang-ar .gcard-name { font-family: 'Cairo', sans-serif; }

.gcard-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #666;
}
body.lang-ar .gcard-location { flex-direction: row-reverse; justify-content: flex-end; }

.gcard-horaire-detail {
    font-size: 0.72rem;
    color: #555;
    margin-top: 1px;
}

/* Services pills */
.gcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.lang-ar .gcard-pills { flex-direction: row-reverse; }
.gcard-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    transition: all 0.2s;
}
.gcard-pill.highlight {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.25);
    color: var(--srv-color);
}
.gcard-pill.domicile {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.2);
    color: #4ade80;
}

/* Lien bas */
.gcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}
body.lang-ar .gcard-footer { flex-direction: row-reverse; }
.gcard-rdv {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--srv-color);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.garage-card-lav:hover .gcard-rdv { gap: 10px; }
body.lang-ar .gcard-rdv { flex-direction: row-reverse; }
.gcard-vedette-stars { color: #fbbf24; font-size: 0.75rem; letter-spacing: 1px; }

/* ── État vide ── */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}
.no-results-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 10px; color: #888; font-weight: 500; }
.no-results p  { font-size: 0.85rem; color: #555; max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ── Squelette chargement ── */
.skeleton-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    animation: sk-pulse 1.6s ease-in-out infinite;
}
.skeleton-card .sk-img  { height: 170px; background: rgba(255,255,255,0.04); }
.skeleton-card .sk-line {
    height: 11px; background: rgba(255,255,255,0.05);
    border-radius: 6px; margin: 14px 18px 0;
}
.skeleton-card .sk-line.s { width: 50%; }
.skeleton-card .sk-line.xs { width: 30%; margin-bottom: 20px; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .garages-grid-lav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .vid-hero { padding: 110px 20px 0; }
    .search-panel { position: static; }
    .search-panel-inner { flex-direction: column; padding: 0 20px; }
    .search-tabs { border: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .search-form { padding: 14px 0; }
    .search-select { min-width: 0; flex: 1; }
    .results-section { padding: 40px 0 70px; }
    .garages-grid-lav { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .vid-stat-bar { gap: 0; flex-wrap: wrap; }
    .vid-stat { padding: 0 20px 0 0; margin-right: 20px; }
}
/* =============================================
   PAGE LAVAGE — styles spécifiques
   Couleur d'accent du service : #ef4444 (bleu eau)
   ============================================= */
:root {
    --srv-color:      #ef4444;
    --srv-color-dark: #dc2626;
    --srv-color-glow: rgba(239,68,68,0.12);
}

/* ── Hero ── */
.rem-hero {
    padding: 140px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.rem-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 40%, rgba(239,68,68,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 5%  70%, rgba(232,32,42,0.06) 0%, transparent 55%);
}
.rem-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.rem-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.lang-ar .breadcrumb { flex-direction: row-reverse; }
.breadcrumb a { color: #666; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--srv-color); }
.breadcrumb-sep { color: #333; }
.breadcrumb-current { color: var(--srv-color); font-weight: 600; }

/* Titre hero */
.rem-title-wrap { margin-bottom: 32px; }
.rem-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--srv-color);
    margin-bottom: 16px;
}
.rem-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
body.lang-ar .rem-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.rem-hero-h1 .accent { color: var(--srv-color); }
.rem-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 36px;
}

/* Stat bar */
.rem-stat-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    padding-bottom: 48px;
}
body.lang-ar .rem-stat-bar { flex-direction: row-reverse; }
.rem-stat {
    padding: 0 40px 0 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 40px;
}
body.lang-ar .rem-stat {
    padding: 0 0 0 40px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    margin-right: 0; margin-left: 40px;
}
.rem-stat:last-child { border: none; margin: 0; padding: 0; }
.rem-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}
.rem-stat-num em { color: var(--srv-color); font-style: normal; font-size: 1.8rem; }
.rem-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    margin-top: 2px;
}
body.lang-ar .rem-stat-label { letter-spacing: 0; }

/* ── Panneau de recherche ── */
.search-panel {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}
.search-panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.lang-ar .search-panel-inner { flex-direction: row-reverse; }

/* Onglets Géo / Filtre */
.search-tabs {
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
body.lang-ar .search-tabs {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.search-tab {
    padding: 18px 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
}
body.lang-ar .search-tab { font-family: 'Cairo', sans-serif; }
.search-tab:hover { color: #aaa; }
.search-tab.active {
    color: var(--srv-color);
    border-bottom: 2px solid var(--srv-color);
}

/* Formulaires */
.search-forms { flex: 1; }
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 0 14px 24px;
    flex-wrap: wrap;
}
body.lang-ar .search-form { padding: 14px 24px 14px 0; }
.search-form.active { display: flex; }

.search-select, .search-input {
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.83rem;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
body.lang-ar .search-select, body.lang-ar .search-input { font-family: 'Cairo', sans-serif; }
.search-select:focus, .search-input:focus { border-color: var(--srv-color); }
.search-select { min-width: 200px; cursor: pointer; }
.search-select option { background: #1a1a1a; color: #fff; }

.btn-search {
    height: 42px;
    padding: 0 22px;
    background: var(--srv-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.lang-ar .btn-search { font-family: 'Cairo', sans-serif; }
.btn-search:hover { background: var(--srv-color-dark); transform: scale(1.02); }

.btn-geo {
    height: 42px;
    padding: 0 18px;
    background: rgba(239,68,68,0.1);
    color: var(--srv-color);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
body.lang-ar .btn-geo { font-family: 'Cairo', sans-serif; }
.btn-geo:hover {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.5);
}
.btn-geo.loading { opacity: 0.6; pointer-events: none; }

/* ── Résultats ── */
.results-section {
    padding: 60px 0 100px;
    background: #111;
    min-height: 60vh;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}
body.lang-ar .results-header { flex-direction: row-reverse; }
.results-count {
    font-size: 0.8rem;
    color: #555;
}
.results-count strong { color: var(--srv-color); }

/* Mode badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.mode-badge.geo    { background: rgba(239,68,68,0.1);  color: var(--srv-color);  border: 1px solid rgba(239,68,68,0.2); }
.mode-badge.filter { background: rgba(232,32,42,0.1);   color: var(--rouge);       border: 1px solid rgba(232,32,42,0.2); }
.mode-badge.all    { background: rgba(255,255,255,0.05); color: #888;               border: 1px solid rgba(255,255,255,0.08); }

/* Grille garages */
.garages-grid-lav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Carte garage */
.garage-card-lav {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
}
.garage-card-lav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--srv-color);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}
.garage-card-lav:hover {
    border-color: rgba(239,68,68,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(239,68,68,0.05);
}
.garage-card-lav:hover::after { transform: scaleX(1); }

/* Photo / visuel */
.gcard-visual {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #0d2038);
    flex-shrink: 0;
}
.gcard-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.garage-card-lav:hover .gcard-visual img { transform: scale(1.05); }
.gcard-visual-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.15;
}
/* Badges sur la photo */
.gcard-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
body.lang-ar .gcard-badges { flex-direction: row-reverse; }
.gcard-vedette {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.gcard-vedette.gold { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.gcard-distance {
    background: rgba(239,68,68,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--srv-color);
}
/* Statut ouvert/fermé sur photo */
.gcard-statut {
    position: absolute;
    bottom: 10px;
    left: 12px;
}
body.lang-ar .gcard-statut { left: auto; right: 12px; }
.gcard-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.gcard-statut-pill.ouvert {
    background: rgba(239,68,68,0.2);
    color: #4ade80;
    border: 1px solid rgba(239,68,68,0.3);
}
.gcard-statut-pill.ferme {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
}

/* Corps carte */
.gcard-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.gcard-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
body.lang-ar .gcard-name { font-family: 'Cairo', sans-serif; }

.gcard-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #666;
}
body.lang-ar .gcard-location { flex-direction: row-reverse; justify-content: flex-end; }

.gcard-horaire-detail {
    font-size: 0.72rem;
    color: #555;
    margin-top: 1px;
}

/* Services pills */
.gcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.lang-ar .gcard-pills { flex-direction: row-reverse; }
.gcard-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    transition: all 0.2s;
}
.gcard-pill.highlight {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.25);
    color: var(--srv-color);
}
.gcard-pill.domicile {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.2);
    color: #4ade80;
}

/* Lien bas */
.gcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}
body.lang-ar .gcard-footer { flex-direction: row-reverse; }
.gcard-rdv {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--srv-color);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.garage-card-lav:hover .gcard-rdv { gap: 10px; }
body.lang-ar .gcard-rdv { flex-direction: row-reverse; }
.gcard-vedette-stars { color: #fbbf24; font-size: 0.75rem; letter-spacing: 1px; }

/* ── État vide ── */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}
.no-results-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 10px; color: #888; font-weight: 500; }
.no-results p  { font-size: 0.85rem; color: #555; max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ── Squelette chargement ── */
.skeleton-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    animation: sk-pulse 1.6s ease-in-out infinite;
}
.skeleton-card .sk-img  { height: 170px; background: rgba(255,255,255,0.04); }
.skeleton-card .sk-line {
    height: 11px; background: rgba(255,255,255,0.05);
    border-radius: 6px; margin: 14px 18px 0;
}
.skeleton-card .sk-line.s { width: 50%; }
.skeleton-card .sk-line.xs { width: 30%; margin-bottom: 20px; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .garages-grid-lav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .rem-hero { padding: 110px 20px 0; }
    .search-panel { position: static; }
    .search-panel-inner { flex-direction: column; padding: 0 20px; }
    .search-tabs { border: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .search-form { padding: 14px 0; }
    .search-select { min-width: 0; flex: 1; }
    .results-section { padding: 40px 0 70px; }
    .garages-grid-lav { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .rem-stat-bar { gap: 0; flex-wrap: wrap; }
    .rem-stat { padding: 0 20px 0 0; margin-right: 20px; }
}
/* =============================================
   PAGE LAVAGE — styles spécifiques
   Couleur d'accent du service : #f59e0b (bleu eau)
   ============================================= */
:root {
    --srv-color:      #f59e0b;
    --srv-color-dark: #d97706;
    --srv-color-glow: rgba(245,158,11,0.12);
}

/* ── Hero ── */
.serr-hero {
    padding: 140px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.serr-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 40%, rgba(245,158,11,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 5%  70%, rgba(232,32,42,0.06) 0%, transparent 55%);
}
.serr-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.serr-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.lang-ar .breadcrumb { flex-direction: row-reverse; }
.breadcrumb a { color: #666; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--srv-color); }
.breadcrumb-sep { color: #333; }
.breadcrumb-current { color: var(--srv-color); font-weight: 600; }

/* Titre hero */
.serr-title-wrap { margin-bottom: 32px; }
.serr-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--srv-color);
    margin-bottom: 16px;
}
.serr-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
body.lang-ar .serr-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.serr-hero-h1 .accent { color: var(--srv-color); }
.serr-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 36px;
}

/* Stat bar */
.serr-stat-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    padding-bottom: 48px;
}
body.lang-ar .serr-stat-bar { flex-direction: row-reverse; }
.serr-stat {
    padding: 0 40px 0 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 40px;
}
body.lang-ar .serr-stat {
    padding: 0 0 0 40px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    margin-right: 0; margin-left: 40px;
}
.serr-stat:last-child { border: none; margin: 0; padding: 0; }
.serr-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}
.serr-stat-num em { color: var(--srv-color); font-style: normal; font-size: 1.8rem; }
.serr-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    margin-top: 2px;
}
body.lang-ar .serr-stat-label { letter-spacing: 0; }

/* ── Panneau de recherche ── */
.search-panel {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}
.search-panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.lang-ar .search-panel-inner { flex-direction: row-reverse; }

/* Onglets Géo / Filtre */
.search-tabs {
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
body.lang-ar .search-tabs {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.search-tab {
    padding: 18px 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
}
body.lang-ar .search-tab { font-family: 'Cairo', sans-serif; }
.search-tab:hover { color: #aaa; }
.search-tab.active {
    color: var(--srv-color);
    border-bottom: 2px solid var(--srv-color);
}

/* Formulaires */
.search-forms { flex: 1; }
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 0 14px 24px;
    flex-wrap: wrap;
}
body.lang-ar .search-form { padding: 14px 24px 14px 0; }
.search-form.active { display: flex; }

.search-select, .search-input {
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.83rem;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
body.lang-ar .search-select, body.lang-ar .search-input { font-family: 'Cairo', sans-serif; }
.search-select:focus, .search-input:focus { border-color: var(--srv-color); }
.search-select { min-width: 200px; cursor: pointer; }
.search-select option { background: #1a1a1a; color: #fff; }

.btn-search {
    height: 42px;
    padding: 0 22px;
    background: var(--srv-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.lang-ar .btn-search { font-family: 'Cairo', sans-serif; }
.btn-search:hover { background: var(--srv-color-dark); transform: scale(1.02); }

.btn-geo {
    height: 42px;
    padding: 0 18px;
    background: rgba(245,158,11,0.1);
    color: var(--srv-color);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
body.lang-ar .btn-geo { font-family: 'Cairo', sans-serif; }
.btn-geo:hover {
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.5);
}
.btn-geo.loading { opacity: 0.6; pointer-events: none; }

/* ── Résultats ── */
.results-section {
    padding: 60px 0 100px;
    background: #111;
    min-height: 60vh;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}
body.lang-ar .results-header { flex-direction: row-reverse; }
.results-count {
    font-size: 0.8rem;
    color: #555;
}
.results-count strong { color: var(--srv-color); }

/* Mode badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.mode-badge.geo    { background: rgba(245,158,11,0.1);  color: var(--srv-color);  border: 1px solid rgba(245,158,11,0.2); }
.mode-badge.filter { background: rgba(232,32,42,0.1);   color: var(--rouge);       border: 1px solid rgba(232,32,42,0.2); }
.mode-badge.all    { background: rgba(255,255,255,0.05); color: #888;               border: 1px solid rgba(255,255,255,0.08); }

/* Grille garages */
.garages-grid-lav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Carte garage */
.garage-card-lav {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
}
.garage-card-lav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--srv-color);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}
.garage-card-lav:hover {
    border-color: rgba(245,158,11,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(245,158,11,0.05);
}
.garage-card-lav:hover::after { transform: scaleX(1); }

/* Photo / visuel */
.gcard-visual {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #0d2038);
    flex-shrink: 0;
}
.gcard-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.garage-card-lav:hover .gcard-visual img { transform: scale(1.05); }
.gcard-visual-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.15;
}
/* Badges sur la photo */
.gcard-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
body.lang-ar .gcard-badges { flex-direction: row-reverse; }
.gcard-vedette {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.gcard-vedette.gold { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.gcard-distance {
    background: rgba(245,158,11,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--srv-color);
}
/* Statut ouvert/fermé sur photo */
.gcard-statut {
    position: absolute;
    bottom: 10px;
    left: 12px;
}
body.lang-ar .gcard-statut { left: auto; right: 12px; }
.gcard-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.gcard-statut-pill.ouvert {
    background: rgba(245,158,11,0.2);
    color: #4ade80;
    border: 1px solid rgba(245,158,11,0.3);
}
.gcard-statut-pill.ferme {
    background: rgba(245,158,11,0.15);
    color: #f87171;
    border: 1px solid rgba(245,158,11,0.25);
}

/* Corps carte */
.gcard-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.gcard-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
body.lang-ar .gcard-name { font-family: 'Cairo', sans-serif; }

.gcard-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #666;
}
body.lang-ar .gcard-location { flex-direction: row-reverse; justify-content: flex-end; }

.gcard-horaire-detail {
    font-size: 0.72rem;
    color: #555;
    margin-top: 1px;
}

/* Services pills */
.gcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.lang-ar .gcard-pills { flex-direction: row-reverse; }
.gcard-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    transition: all 0.2s;
}
.gcard-pill.highlight {
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.25);
    color: var(--srv-color);
}
.gcard-pill.domicile {
    background: rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.2);
    color: #4ade80;
}

/* Lien bas */
.gcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}
body.lang-ar .gcard-footer { flex-direction: row-reverse; }
.gcard-rdv {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--srv-color);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.garage-card-lav:hover .gcard-rdv { gap: 10px; }
body.lang-ar .gcard-rdv { flex-direction: row-reverse; }
.gcard-vedette-stars { color: #fbbf24; font-size: 0.75rem; letter-spacing: 1px; }

/* ── État vide ── */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}
.no-results-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 10px; color: #888; font-weight: 500; }
.no-results p  { font-size: 0.85rem; color: #555; max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ── Squelette chargement ── */
.skeleton-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    animation: sk-pulse 1.6s ease-in-out infinite;
}
.skeleton-card .sk-img  { height: 170px; background: rgba(255,255,255,0.04); }
.skeleton-card .sk-line {
    height: 11px; background: rgba(255,255,255,0.05);
    border-radius: 6px; margin: 14px 18px 0;
}
.skeleton-card .sk-line.s { width: 50%; }
.skeleton-card .sk-line.xs { width: 30%; margin-bottom: 20px; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .garages-grid-lav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .serr-hero { padding: 110px 20px 0; }
    .search-panel { position: static; }
    .search-panel-inner { flex-direction: column; padding: 0 20px; }
    .search-tabs { border: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .search-form { padding: 14px 0; }
    .search-select { min-width: 0; flex: 1; }
    .results-section { padding: 40px 0 70px; }
    .garages-grid-lav { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .serr-stat-bar { gap: 0; flex-wrap: wrap; }
    .serr-stat { padding: 0 20px 0 0; margin-right: 20px; }
}
/* =============================================
   PAGE LAVAGE — styles spécifiques
   Couleur d'accent du service : #06b6d4 (bleu eau)
   ============================================= */
:root {
    --srv-color:      #06b6d4;
    --srv-color-dark: #0891b2;
    --srv-color-glow: rgba(6,182,212,0.12);
}

/* ── Hero ── */
.clim-hero {
    padding: 140px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.clim-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 40%, rgba(6,182,212,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 5%  70%, rgba(232,32,42,0.06) 0%, transparent 55%);
}
.clim-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.clim-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.lang-ar .breadcrumb { flex-direction: row-reverse; }
.breadcrumb a { color: #666; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--srv-color); }
.breadcrumb-sep { color: #333; }
.breadcrumb-current { color: var(--srv-color); font-weight: 600; }

/* Titre hero */
.clim-title-wrap { margin-bottom: 32px; }
.clim-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(6,182,212,0.1);
    border: 1px solid rgba(6,182,212,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--srv-color);
    margin-bottom: 16px;
}
.clim-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
body.lang-ar .clim-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.clim-hero-h1 .accent { color: var(--srv-color); }
.clim-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 36px;
}

/* Stat bar */
.clim-stat-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    padding-bottom: 48px;
}
body.lang-ar .clim-stat-bar { flex-direction: row-reverse; }
.clim-stat {
    padding: 0 40px 0 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 40px;
}
body.lang-ar .clim-stat {
    padding: 0 0 0 40px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    margin-right: 0; margin-left: 40px;
}
.clim-stat:last-child { border: none; margin: 0; padding: 0; }
.clim-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}
.clim-stat-num em { color: var(--srv-color); font-style: normal; font-size: 1.8rem; }
.clim-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    margin-top: 2px;
}
body.lang-ar .clim-stat-label { letter-spacing: 0; }

/* ── Panneau de recherche ── */
.search-panel {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}
.search-panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.lang-ar .search-panel-inner { flex-direction: row-reverse; }

/* Onglets Géo / Filtre */
.search-tabs {
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
body.lang-ar .search-tabs {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.search-tab {
    padding: 18px 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
}
body.lang-ar .search-tab { font-family: 'Cairo', sans-serif; }
.search-tab:hover { color: #aaa; }
.search-tab.active {
    color: var(--srv-color);
    border-bottom: 2px solid var(--srv-color);
}

/* Formulaires */
.search-forms { flex: 1; }
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 0 14px 24px;
    flex-wrap: wrap;
}
body.lang-ar .search-form { padding: 14px 24px 14px 0; }
.search-form.active { display: flex; }

.search-select, .search-input {
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.83rem;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
body.lang-ar .search-select, body.lang-ar .search-input { font-family: 'Cairo', sans-serif; }
.search-select:focus, .search-input:focus { border-color: var(--srv-color); }
.search-select { min-width: 200px; cursor: pointer; }
.search-select option { background: #1a1a1a; color: #fff; }

.btn-search {
    height: 42px;
    padding: 0 22px;
    background: var(--srv-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.lang-ar .btn-search { font-family: 'Cairo', sans-serif; }
.btn-search:hover { background: var(--srv-color-dark); transform: scale(1.02); }

.btn-geo {
    height: 42px;
    padding: 0 18px;
    background: rgba(6,182,212,0.1);
    color: var(--srv-color);
    border: 1px solid rgba(6,182,212,0.25);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
body.lang-ar .btn-geo { font-family: 'Cairo', sans-serif; }
.btn-geo:hover {
    background: rgba(6,182,212,0.18);
    border-color: rgba(6,182,212,0.5);
}
.btn-geo.loading { opacity: 0.6; pointer-events: none; }

/* ── Résultats ── */
.results-section {
    padding: 60px 0 100px;
    background: #111;
    min-height: 60vh;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}
body.lang-ar .results-header { flex-direction: row-reverse; }
.results-count {
    font-size: 0.8rem;
    color: #555;
}
.results-count strong { color: var(--srv-color); }

/* Mode badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.mode-badge.geo    { background: rgba(6,182,212,0.1);  color: var(--srv-color);  border: 1px solid rgba(6,182,212,0.2); }
.mode-badge.filter { background: rgba(232,32,42,0.1);   color: var(--rouge);       border: 1px solid rgba(232,32,42,0.2); }
.mode-badge.all    { background: rgba(255,255,255,0.05); color: #888;               border: 1px solid rgba(255,255,255,0.08); }

/* Grille garages */
.garages-grid-lav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Carte garage */
.garage-card-lav {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
}
.garage-card-lav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--srv-color);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}
.garage-card-lav:hover {
    border-color: rgba(6,182,212,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(6,182,212,0.05);
}
.garage-card-lav:hover::after { transform: scaleX(1); }

/* Photo / visuel */
.gcard-visual {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #0d2038);
    flex-shrink: 0;
}
.gcard-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.garage-card-lav:hover .gcard-visual img { transform: scale(1.05); }
.gcard-visual-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.15;
}
/* Badges sur la photo */
.gcard-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
body.lang-ar .gcard-badges { flex-direction: row-reverse; }
.gcard-vedette {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.gcard-vedette.gold { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.gcard-distance {
    background: rgba(6,182,212,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(6,182,212,0.3);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--srv-color);
}
/* Statut ouvert/fermé sur photo */
.gcard-statut {
    position: absolute;
    bottom: 10px;
    left: 12px;
}
body.lang-ar .gcard-statut { left: auto; right: 12px; }
.gcard-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.gcard-statut-pill.ouvert {
    background: rgba(6,182,212,0.2);
    color: #4ade80;
    border: 1px solid rgba(6,182,212,0.3);
}
.gcard-statut-pill.ferme {
    background: rgba(6,182,212,0.15);
    color: #f87171;
    border: 1px solid rgba(6,182,212,0.25);
}

/* Corps carte */
.gcard-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.gcard-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
body.lang-ar .gcard-name { font-family: 'Cairo', sans-serif; }

.gcard-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #666;
}
body.lang-ar .gcard-location { flex-direction: row-reverse; justify-content: flex-end; }

.gcard-horaire-detail {
    font-size: 0.72rem;
    color: #555;
    margin-top: 1px;
}

/* Services pills */
.gcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.lang-ar .gcard-pills { flex-direction: row-reverse; }
.gcard-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    transition: all 0.2s;
}
.gcard-pill.highlight {
    background: rgba(6,182,212,0.1);
    border-color: rgba(6,182,212,0.25);
    color: var(--srv-color);
}
.gcard-pill.domicile {
    background: rgba(6,182,212,0.08);
    border-color: rgba(6,182,212,0.2);
    color: #4ade80;
}

/* Lien bas */
.gcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}
body.lang-ar .gcard-footer { flex-direction: row-reverse; }
.gcard-rdv {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--srv-color);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.garage-card-lav:hover .gcard-rdv { gap: 10px; }
body.lang-ar .gcard-rdv { flex-direction: row-reverse; }
.gcard-vedette-stars { color: #fbbf24; font-size: 0.75rem; letter-spacing: 1px; }

/* ── État vide ── */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}
.no-results-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 10px; color: #888; font-weight: 500; }
.no-results p  { font-size: 0.85rem; color: #555; max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ── Squelette chargement ── */
.skeleton-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    animation: sk-pulse 1.6s ease-in-out infinite;
}
.skeleton-card .sk-img  { height: 170px; background: rgba(255,255,255,0.04); }
.skeleton-card .sk-line {
    height: 11px; background: rgba(255,255,255,0.05);
    border-radius: 6px; margin: 14px 18px 0;
}
.skeleton-card .sk-line.s { width: 50%; }
.skeleton-card .sk-line.xs { width: 30%; margin-bottom: 20px; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .garages-grid-lav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .clim-hero { padding: 110px 20px 0; }
    .search-panel { position: static; }
    .search-panel-inner { flex-direction: column; padding: 0 20px; }
    .search-tabs { border: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .search-form { padding: 14px 0; }
    .search-select { min-width: 0; flex: 1; }
    .results-section { padding: 40px 0 70px; }
    .garages-grid-lav { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .clim-stat-bar { gap: 0; flex-wrap: wrap; }
    .clim-stat { padding: 0 20px 0 0; margin-right: 20px; }
}
/* =============================================
   PAGE LAVAGE — styles spécifiques
   Couleur d'accent du service : #a855f7 (bleu eau)
   ============================================= */
:root {
    --srv-color:      #a855f7;
    --srv-color-dark: #9333ea;
    --srv-color-glow: rgba(168,85,247,0.12);
}

/* ── Hero ── */
.multi-hero {
    padding: 140px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.multi-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 40%, rgba(168,85,247,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 5%  70%, rgba(232,32,42,0.06) 0%, transparent 55%);
}
.multi-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.multi-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.lang-ar .breadcrumb { flex-direction: row-reverse; }
.breadcrumb a { color: #666; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--srv-color); }
.breadcrumb-sep { color: #333; }
.breadcrumb-current { color: var(--srv-color); font-weight: 600; }

/* Titre hero */
.multi-title-wrap { margin-bottom: 32px; }
.multi-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(168,85,247,0.1);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--srv-color);
    margin-bottom: 16px;
}
.multi-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
body.lang-ar .multi-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.multi-hero-h1 .accent { color: var(--srv-color); }
.multi-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 36px;
}

/* Stat bar */
.multi-stat-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    padding-bottom: 48px;
}
body.lang-ar .multi-stat-bar { flex-direction: row-reverse; }
.multi-stat {
    padding: 0 40px 0 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 40px;
}
body.lang-ar .multi-stat {
    padding: 0 0 0 40px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    margin-right: 0; margin-left: 40px;
}
.multi-stat:last-child { border: none; margin: 0; padding: 0; }
.multi-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}
.multi-stat-num em { color: var(--srv-color); font-style: normal; font-size: 1.8rem; }
.multi-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    margin-top: 2px;
}
body.lang-ar .multi-stat-label { letter-spacing: 0; }

/* ── Panneau de recherche ── */
.search-panel {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}
.search-panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.lang-ar .search-panel-inner { flex-direction: row-reverse; }

/* Onglets Géo / Filtre */
.search-tabs {
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
body.lang-ar .search-tabs {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.search-tab {
    padding: 18px 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
}
body.lang-ar .search-tab { font-family: 'Cairo', sans-serif; }
.search-tab:hover { color: #aaa; }
.search-tab.active {
    color: var(--srv-color);
    border-bottom: 2px solid var(--srv-color);
}

/* Formulaires */
.search-forms { flex: 1; }
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 0 14px 24px;
    flex-wrap: wrap;
}
body.lang-ar .search-form { padding: 14px 24px 14px 0; }
.search-form.active { display: flex; }

.search-select, .search-input {
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.83rem;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
body.lang-ar .search-select, body.lang-ar .search-input { font-family: 'Cairo', sans-serif; }
.search-select:focus, .search-input:focus { border-color: var(--srv-color); }
.search-select { min-width: 200px; cursor: pointer; }
.search-select option { background: #1a1a1a; color: #fff; }

.btn-search {
    height: 42px;
    padding: 0 22px;
    background: var(--srv-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.lang-ar .btn-search { font-family: 'Cairo', sans-serif; }
.btn-search:hover { background: var(--srv-color-dark); transform: scale(1.02); }

.btn-geo {
    height: 42px;
    padding: 0 18px;
    background: rgba(168,85,247,0.1);
    color: var(--srv-color);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
body.lang-ar .btn-geo { font-family: 'Cairo', sans-serif; }
.btn-geo:hover {
    background: rgba(168,85,247,0.18);
    border-color: rgba(168,85,247,0.5);
}
.btn-geo.loading { opacity: 0.6; pointer-events: none; }

/* ── Résultats ── */
.results-section {
    padding: 60px 0 100px;
    background: #111;
    min-height: 60vh;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}
body.lang-ar .results-header { flex-direction: row-reverse; }
.results-count {
    font-size: 0.8rem;
    color: #555;
}
.results-count strong { color: var(--srv-color); }

/* Mode badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.mode-badge.geo    { background: rgba(168,85,247,0.1);  color: var(--srv-color);  border: 1px solid rgba(168,85,247,0.2); }
.mode-badge.filter { background: rgba(232,32,42,0.1);   color: var(--rouge);       border: 1px solid rgba(232,32,42,0.2); }
.mode-badge.all    { background: rgba(255,255,255,0.05); color: #888;               border: 1px solid rgba(255,255,255,0.08); }

/* Grille garages */
.garages-grid-lav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Carte garage */
.garage-card-lav {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
}
.garage-card-lav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--srv-color);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}
.garage-card-lav:hover {
    border-color: rgba(168,85,247,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(168,85,247,0.05);
}
.garage-card-lav:hover::after { transform: scaleX(1); }

/* Photo / visuel */
.gcard-visual {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #0d2038);
    flex-shrink: 0;
}
.gcard-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.garage-card-lav:hover .gcard-visual img { transform: scale(1.05); }
.gcard-visual-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.15;
}
/* Badges sur la photo */
.gcard-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
body.lang-ar .gcard-badges { flex-direction: row-reverse; }
.gcard-vedette {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.gcard-vedette.gold { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.gcard-distance {
    background: rgba(168,85,247,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--srv-color);
}
/* Statut ouvert/fermé sur photo */
.gcard-statut {
    position: absolute;
    bottom: 10px;
    left: 12px;
}
body.lang-ar .gcard-statut { left: auto; right: 12px; }
.gcard-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.gcard-statut-pill.ouvert {
    background: rgba(168,85,247,0.2);
    color: #4ade80;
    border: 1px solid rgba(168,85,247,0.3);
}
.gcard-statut-pill.ferme {
    background: rgba(168,85,247,0.15);
    color: #f87171;
    border: 1px solid rgba(168,85,247,0.25);
}

/* Corps carte */
.gcard-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.gcard-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
body.lang-ar .gcard-name { font-family: 'Cairo', sans-serif; }

.gcard-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #666;
}
body.lang-ar .gcard-location { flex-direction: row-reverse; justify-content: flex-end; }

.gcard-horaire-detail {
    font-size: 0.72rem;
    color: #555;
    margin-top: 1px;
}

/* Services pills */
.gcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.lang-ar .gcard-pills { flex-direction: row-reverse; }
.gcard-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    transition: all 0.2s;
}
.gcard-pill.highlight {
    background: rgba(168,85,247,0.1);
    border-color: rgba(168,85,247,0.25);
    color: var(--srv-color);
}
.gcard-pill.domicile {
    background: rgba(168,85,247,0.08);
    border-color: rgba(168,85,247,0.2);
    color: #4ade80;
}

/* Lien bas */
.gcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}
body.lang-ar .gcard-footer { flex-direction: row-reverse; }
.gcard-rdv {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--srv-color);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.garage-card-lav:hover .gcard-rdv { gap: 10px; }
body.lang-ar .gcard-rdv { flex-direction: row-reverse; }
.gcard-vedette-stars { color: #fbbf24; font-size: 0.75rem; letter-spacing: 1px; }

/* ── État vide ── */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}
.no-results-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 10px; color: #888; font-weight: 500; }
.no-results p  { font-size: 0.85rem; color: #555; max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ── Squelette chargement ── */
.skeleton-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    animation: sk-pulse 1.6s ease-in-out infinite;
}
.skeleton-card .sk-img  { height: 170px; background: rgba(255,255,255,0.04); }
.skeleton-card .sk-line {
    height: 11px; background: rgba(255,255,255,0.05);
    border-radius: 6px; margin: 14px 18px 0;
}
.skeleton-card .sk-line.s { width: 50%; }
.skeleton-card .sk-line.xs { width: 30%; margin-bottom: 20px; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .garages-grid-lav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .multi-hero { padding: 110px 20px 0; }
    .search-panel { position: static; }
    .search-panel-inner { flex-direction: column; padding: 0 20px; }
    .search-tabs { border: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .search-form { padding: 14px 0; }
    .search-select { min-width: 0; flex: 1; }
    .results-section { padding: 40px 0 70px; }
    .garages-grid-lav { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .multi-stat-bar { gap: 0; flex-wrap: wrap; }
    .multi-stat { padding: 0 20px 0 0; margin-right: 20px; }
}
/* =============================================
   PAGE LAVAGE — styles spécifiques
   Couleur d'accent du service : #f97316 (bleu eau)
   ============================================= */
:root {
    --srv-color:      #f97316;
    --srv-color-dark: #ea580c;
    --srv-color-glow: rgba(249,115,22,0.12);
}

/* ── Hero ── */
.kios-hero {
    padding: 140px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.kios-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 40%, rgba(249,115,22,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 5%  70%, rgba(232,32,42,0.06) 0%, transparent 55%);
}
.kios-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.kios-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.lang-ar .breadcrumb { flex-direction: row-reverse; }
.breadcrumb a { color: #666; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--srv-color); }
.breadcrumb-sep { color: #333; }
.breadcrumb-current { color: var(--srv-color); font-weight: 600; }

/* Titre hero */
.kios-title-wrap { margin-bottom: 32px; }
.kios-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(249,115,22,0.1);
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--srv-color);
    margin-bottom: 16px;
}
.kios-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
body.lang-ar .kios-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.kios-hero-h1 .accent { color: var(--srv-color); }
.kios-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 36px;
}

/* Stat bar */
.kios-stat-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    padding-bottom: 48px;
}
body.lang-ar .kios-stat-bar { flex-direction: row-reverse; }
.kios-stat {
    padding: 0 40px 0 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 40px;
}
body.lang-ar .kios-stat {
    padding: 0 0 0 40px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    margin-right: 0; margin-left: 40px;
}
.kios-stat:last-child { border: none; margin: 0; padding: 0; }
.kios-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}
.kios-stat-num em { color: var(--srv-color); font-style: normal; font-size: 1.8rem; }
.kios-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    margin-top: 2px;
}
body.lang-ar .kios-stat-label { letter-spacing: 0; }

/* ── Panneau de recherche ── */
.search-panel {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}
.search-panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.lang-ar .search-panel-inner { flex-direction: row-reverse; }

/* Onglets Géo / Filtre */
.search-tabs {
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
body.lang-ar .search-tabs {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.search-tab {
    padding: 18px 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
}
body.lang-ar .search-tab { font-family: 'Cairo', sans-serif; }
.search-tab:hover { color: #aaa; }
.search-tab.active {
    color: var(--srv-color);
    border-bottom: 2px solid var(--srv-color);
}

/* Formulaires */
.search-forms { flex: 1; }
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 0 14px 24px;
    flex-wrap: wrap;
}
body.lang-ar .search-form { padding: 14px 24px 14px 0; }
.search-form.active { display: flex; }

.search-select, .search-input {
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.83rem;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
body.lang-ar .search-select, body.lang-ar .search-input { font-family: 'Cairo', sans-serif; }
.search-select:focus, .search-input:focus { border-color: var(--srv-color); }
.search-select { min-width: 200px; cursor: pointer; }
.search-select option { background: #1a1a1a; color: #fff; }

.btn-search {
    height: 42px;
    padding: 0 22px;
    background: var(--srv-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.lang-ar .btn-search { font-family: 'Cairo', sans-serif; }
.btn-search:hover { background: var(--srv-color-dark); transform: scale(1.02); }

.btn-geo {
    height: 42px;
    padding: 0 18px;
    background: rgba(249,115,22,0.1);
    color: var(--srv-color);
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
body.lang-ar .btn-geo { font-family: 'Cairo', sans-serif; }
.btn-geo:hover {
    background: rgba(249,115,22,0.18);
    border-color: rgba(249,115,22,0.5);
}
.btn-geo.loading { opacity: 0.6; pointer-events: none; }

/* ── Résultats ── */
.results-section {
    padding: 60px 0 100px;
    background: #111;
    min-height: 60vh;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}
body.lang-ar .results-header { flex-direction: row-reverse; }
.results-count {
    font-size: 0.8rem;
    color: #555;
}
.results-count strong { color: var(--srv-color); }

/* Mode badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.mode-badge.geo    { background: rgba(249,115,22,0.1);  color: var(--srv-color);  border: 1px solid rgba(249,115,22,0.2); }
.mode-badge.filter { background: rgba(232,32,42,0.1);   color: var(--rouge);       border: 1px solid rgba(232,32,42,0.2); }
.mode-badge.all    { background: rgba(255,255,255,0.05); color: #888;               border: 1px solid rgba(255,255,255,0.08); }

/* Grille garages */
.garages-grid-lav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Carte garage */
.garage-card-lav {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
}
.garage-card-lav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--srv-color);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}
.garage-card-lav:hover {
    border-color: rgba(249,115,22,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(249,115,22,0.05);
}
.garage-card-lav:hover::after { transform: scaleX(1); }

/* Photo / visuel */
.gcard-visual {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #0d2038);
    flex-shrink: 0;
}
.gcard-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.garage-card-lav:hover .gcard-visual img { transform: scale(1.05); }
.gcard-visual-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.15;
}
/* Badges sur la photo */
.gcard-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
body.lang-ar .gcard-badges { flex-direction: row-reverse; }
.gcard-vedette {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.gcard-vedette.gold { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.gcard-distance {
    background: rgba(249,115,22,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(249,115,22,0.3);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--srv-color);
}
/* Statut ouvert/fermé sur photo */
.gcard-statut {
    position: absolute;
    bottom: 10px;
    left: 12px;
}
body.lang-ar .gcard-statut { left: auto; right: 12px; }
.gcard-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.gcard-statut-pill.ouvert {
    background: rgba(249,115,22,0.2);
    color: #4ade80;
    border: 1px solid rgba(249,115,22,0.3);
}
.gcard-statut-pill.ferme {
    background: rgba(249,115,22,0.15);
    color: #f87171;
    border: 1px solid rgba(249,115,22,0.25);
}

/* Corps carte */
.gcard-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.gcard-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
body.lang-ar .gcard-name { font-family: 'Cairo', sans-serif; }

.gcard-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #666;
}
body.lang-ar .gcard-location { flex-direction: row-reverse; justify-content: flex-end; }

.gcard-horaire-detail {
    font-size: 0.72rem;
    color: #555;
    margin-top: 1px;
}

/* Services pills */
.gcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.lang-ar .gcard-pills { flex-direction: row-reverse; }
.gcard-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    transition: all 0.2s;
}
.gcard-pill.highlight {
    background: rgba(249,115,22,0.1);
    border-color: rgba(249,115,22,0.25);
    color: var(--srv-color);
}
.gcard-pill.domicile {
    background: rgba(249,115,22,0.08);
    border-color: rgba(249,115,22,0.2);
    color: #4ade80;
}

/* Lien bas */
.gcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}
body.lang-ar .gcard-footer { flex-direction: row-reverse; }
.gcard-rdv {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--srv-color);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.garage-card-lav:hover .gcard-rdv { gap: 10px; }
body.lang-ar .gcard-rdv { flex-direction: row-reverse; }
.gcard-vedette-stars { color: #fbbf24; font-size: 0.75rem; letter-spacing: 1px; }

/* ── État vide ── */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}
.no-results-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 10px; color: #888; font-weight: 500; }
.no-results p  { font-size: 0.85rem; color: #555; max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ── Squelette chargement ── */
.skeleton-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    animation: sk-pulse 1.6s ease-in-out infinite;
}
.skeleton-card .sk-img  { height: 170px; background: rgba(255,255,255,0.04); }
.skeleton-card .sk-line {
    height: 11px; background: rgba(255,255,255,0.05);
    border-radius: 6px; margin: 14px 18px 0;
}
.skeleton-card .sk-line.s { width: 50%; }
.skeleton-card .sk-line.xs { width: 30%; margin-bottom: 20px; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .garages-grid-lav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .kios-hero { padding: 110px 20px 0; }
    .search-panel { position: static; }
    .search-panel-inner { flex-direction: column; padding: 0 20px; }
    .search-tabs { border: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .search-form { padding: 14px 0; }
    .search-select { min-width: 0; flex: 1; }
    .results-section { padding: 40px 0 70px; }
    .garages-grid-lav { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .kios-stat-bar { gap: 0; flex-wrap: wrap; }
    .kios-stat { padding: 0 20px 0 0; margin-right: 20px; }
}
/* =============================================
   PAGE LAVAGE — styles spécifiques
   Couleur d'accent du service : #8b5cf6 (bleu eau)
   ============================================= */
:root {
    --srv-color:      #8b5cf6;
    --srv-color-dark: #7c3aed;
    --srv-color-glow: rgba(139,92,246,0.12);
}

/* ── Hero ── */
.pneu-hero {
    padding: 140px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.pneu-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 40%, rgba(139,92,246,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 5%  70%, rgba(232,32,42,0.06) 0%, transparent 55%);
}
.pneu-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.pneu-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.lang-ar .breadcrumb { flex-direction: row-reverse; }
.breadcrumb a { color: #666; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--srv-color); }
.breadcrumb-sep { color: #333; }
.breadcrumb-current { color: var(--srv-color); font-weight: 600; }

/* Titre hero */
.pneu-title-wrap { margin-bottom: 32px; }
.pneu-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(139,92,246,0.1);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--srv-color);
    margin-bottom: 16px;
}
.pneu-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
body.lang-ar .pneu-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.pneu-hero-h1 .accent { color: var(--srv-color); }
.pneu-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 36px;
}

/* Stat bar */
.pneu-stat-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    padding-bottom: 48px;
}
body.lang-ar .pneu-stat-bar { flex-direction: row-reverse; }
.pneu-stat {
    padding: 0 40px 0 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 40px;
}
body.lang-ar .pneu-stat {
    padding: 0 0 0 40px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    margin-right: 0; margin-left: 40px;
}
.pneu-stat:last-child { border: none; margin: 0; padding: 0; }
.pneu-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}
.pneu-stat-num em { color: var(--srv-color); font-style: normal; font-size: 1.8rem; }
.pneu-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    margin-top: 2px;
}
body.lang-ar .pneu-stat-label { letter-spacing: 0; }

/* ── Panneau de recherche ── */
.search-panel {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}
.search-panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.lang-ar .search-panel-inner { flex-direction: row-reverse; }

/* Onglets Géo / Filtre */
.search-tabs {
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
body.lang-ar .search-tabs {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.search-tab {
    padding: 18px 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
}
body.lang-ar .search-tab { font-family: 'Cairo', sans-serif; }
.search-tab:hover { color: #aaa; }
.search-tab.active {
    color: var(--srv-color);
    border-bottom: 2px solid var(--srv-color);
}

/* Formulaires */
.search-forms { flex: 1; }
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 0 14px 24px;
    flex-wrap: wrap;
}
body.lang-ar .search-form { padding: 14px 24px 14px 0; }
.search-form.active { display: flex; }

.search-select, .search-input {
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.83rem;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
body.lang-ar .search-select, body.lang-ar .search-input { font-family: 'Cairo', sans-serif; }
.search-select:focus, .search-input:focus { border-color: var(--srv-color); }
.search-select { min-width: 200px; cursor: pointer; }
.search-select option { background: #1a1a1a; color: #fff; }

.btn-search {
    height: 42px;
    padding: 0 22px;
    background: var(--srv-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.lang-ar .btn-search { font-family: 'Cairo', sans-serif; }
.btn-search:hover { background: var(--srv-color-dark); transform: scale(1.02); }

.btn-geo {
    height: 42px;
    padding: 0 18px;
    background: rgba(139,92,246,0.1);
    color: var(--srv-color);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
body.lang-ar .btn-geo { font-family: 'Cairo', sans-serif; }
.btn-geo:hover {
    background: rgba(139,92,246,0.18);
    border-color: rgba(139,92,246,0.5);
}
.btn-geo.loading { opacity: 0.6; pointer-events: none; }

/* ── Résultats ── */
.results-section {
    padding: 60px 0 100px;
    background: #111;
    min-height: 60vh;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}
body.lang-ar .results-header { flex-direction: row-reverse; }
.results-count {
    font-size: 0.8rem;
    color: #555;
}
.results-count strong { color: var(--srv-color); }

/* Mode badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.mode-badge.geo    { background: rgba(139,92,246,0.1);  color: var(--srv-color);  border: 1px solid rgba(139,92,246,0.2); }
.mode-badge.filter { background: rgba(232,32,42,0.1);   color: var(--rouge);       border: 1px solid rgba(232,32,42,0.2); }
.mode-badge.all    { background: rgba(255,255,255,0.05); color: #888;               border: 1px solid rgba(255,255,255,0.08); }

/* Grille garages */
.garages-grid-lav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Carte garage */
.garage-card-lav {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
}
.garage-card-lav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--srv-color);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}
.garage-card-lav:hover {
    border-color: rgba(139,92,246,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(139,92,246,0.05);
}
.garage-card-lav:hover::after { transform: scaleX(1); }

/* Photo / visuel */
.gcard-visual {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #0d2038);
    flex-shrink: 0;
}
.gcard-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.garage-card-lav:hover .gcard-visual img { transform: scale(1.05); }
.gcard-visual-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.15;
}
/* Badges sur la photo */
.gcard-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
body.lang-ar .gcard-badges { flex-direction: row-reverse; }
.gcard-vedette {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.gcard-vedette.gold { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.gcard-distance {
    background: rgba(139,92,246,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(139,92,246,0.3);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--srv-color);
}
/* Statut ouvert/fermé sur photo */
.gcard-statut {
    position: absolute;
    bottom: 10px;
    left: 12px;
}
body.lang-ar .gcard-statut { left: auto; right: 12px; }
.gcard-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.gcard-statut-pill.ouvert {
    background: rgba(34,197,94,0.2);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}
.gcard-statut-pill.ferme {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
}

/* Corps carte */
.gcard-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.gcard-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
body.lang-ar .gcard-name { font-family: 'Cairo', sans-serif; }

.gcard-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #666;
}
body.lang-ar .gcard-location { flex-direction: row-reverse; justify-content: flex-end; }

.gcard-horaire-detail {
    font-size: 0.72rem;
    color: #555;
    margin-top: 1px;
}

/* Services pills */
.gcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.lang-ar .gcard-pills { flex-direction: row-reverse; }
.gcard-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    transition: all 0.2s;
}
.gcard-pill.highlight {
    background: rgba(139,92,246,0.1);
    border-color: rgba(139,92,246,0.25);
    color: var(--srv-color);
}
.gcard-pill.domicile {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.2);
    color: #4ade80;
}

/* Lien bas */
.gcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}
body.lang-ar .gcard-footer { flex-direction: row-reverse; }
.gcard-rdv {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--srv-color);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.garage-card-lav:hover .gcard-rdv { gap: 10px; }
body.lang-ar .gcard-rdv { flex-direction: row-reverse; }
.gcard-vedette-stars { color: #fbbf24; font-size: 0.75rem; letter-spacing: 1px; }

/* ── État vide ── */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}
.no-results-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 10px; color: #888; font-weight: 500; }
.no-results p  { font-size: 0.85rem; color: #555; max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ── Squelette chargement ── */
.skeleton-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    animation: sk-pulse 1.6s ease-in-out infinite;
}
.skeleton-card .sk-img  { height: 170px; background: rgba(255,255,255,0.04); }
.skeleton-card .sk-line {
    height: 11px; background: rgba(255,255,255,0.05);
    border-radius: 6px; margin: 14px 18px 0;
}
.skeleton-card .sk-line.s { width: 50%; }
.skeleton-card .sk-line.xs { width: 30%; margin-bottom: 20px; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .garages-grid-lav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .pneu-hero { padding: 110px 20px 0; }
    .search-panel { position: static; }
    .search-panel-inner { flex-direction: column; padding: 0 20px; }
    .search-tabs { border: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .search-form { padding: 14px 0; }
    .search-select { min-width: 0; flex: 1; }
    .results-section { padding: 40px 0 70px; }
    .garages-grid-lav { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .pneu-stat-bar { gap: 0; flex-wrap: wrap; }
    .pneu-stat { padding: 0 20px 0 0; margin-right: 20px; }
}
/* =============================================
   PAGE LAVAGE — styles spécifiques
   Couleur d'accent du service : #0ea5e9 (bleu eau)
   ============================================= */
:root {
    --srv-color:      #0ea5e9;
    --srv-color-dark: #0284c7;
    --srv-color-glow: rgba(14,165,233,0.12);
}

/* ── Hero ── */
.lav-hero {
    padding: 140px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.lav-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 55% 70% at 75% 40%, rgba(14,165,233,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 5%  70%, rgba(232,32,42,0.06) 0%, transparent 55%);
}
.lav-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.lav-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
}

/* Fil d'Ariane */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.lang-ar .breadcrumb { flex-direction: row-reverse; }
.breadcrumb a { color: #666; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--srv-color); }
.breadcrumb-sep { color: #333; }
.breadcrumb-current { color: var(--srv-color); font-weight: 600; }

/* Titre hero */
.lav-title-wrap { margin-bottom: 32px; }
.lav-service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(14,165,233,0.1);
    border: 1px solid rgba(14,165,233,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--srv-color);
    margin-bottom: 16px;
}
.lav-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
body.lang-ar .lav-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.lav-hero-h1 .accent { color: var(--srv-color); }
.lav-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 36px;
}

/* Stat bar */
.lav-stat-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    padding-bottom: 48px;
}
body.lang-ar .lav-stat-bar { flex-direction: row-reverse; }
.lav-stat {
    padding: 0 40px 0 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 40px;
}
body.lang-ar .lav-stat {
    padding: 0 0 0 40px;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    margin-right: 0; margin-left: 40px;
}
.lav-stat:last-child { border: none; margin: 0; padding: 0; }
.lav-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #fff;
}
.lav-stat-num em { color: var(--srv-color); font-style: normal; font-size: 1.8rem; }
.lav-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    margin-top: 2px;
}
body.lang-ar .lav-stat-label { letter-spacing: 0; }

/* ── Panneau de recherche ── */
.search-panel {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}
.search-panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.lang-ar .search-panel-inner { flex-direction: row-reverse; }

/* Onglets Géo / Filtre */
.search-tabs {
    display: flex;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
body.lang-ar .search-tabs {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.search-tab {
    padding: 18px 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
}
body.lang-ar .search-tab { font-family: 'Cairo', sans-serif; }
.search-tab:hover { color: #aaa; }
.search-tab.active {
    color: var(--srv-color);
    border-bottom: 2px solid var(--srv-color);
}

/* Formulaires */
.search-forms { flex: 1; }
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 0 14px 24px;
    flex-wrap: wrap;
}
body.lang-ar .search-form { padding: 14px 24px 14px 0; }
.search-form.active { display: flex; }

.search-select, .search-input {
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.83rem;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
body.lang-ar .search-select, body.lang-ar .search-input { font-family: 'Cairo', sans-serif; }
.search-select:focus, .search-input:focus { border-color: var(--srv-color); }
.search-select { min-width: 200px; cursor: pointer; }
.search-select option { background: #1a1a1a; color: #fff; }

.btn-search {
    height: 42px;
    padding: 0 22px;
    background: var(--srv-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.lang-ar .btn-search { font-family: 'Cairo', sans-serif; }
.btn-search:hover { background: var(--srv-color-dark); transform: scale(1.02); }

.btn-geo {
    height: 42px;
    padding: 0 18px;
    background: rgba(14,165,233,0.1);
    color: var(--srv-color);
    border: 1px solid rgba(14,165,233,0.25);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
body.lang-ar .btn-geo { font-family: 'Cairo', sans-serif; }
.btn-geo:hover {
    background: rgba(14,165,233,0.18);
    border-color: rgba(14,165,233,0.5);
}
.btn-geo.loading { opacity: 0.6; pointer-events: none; }

/* ── Résultats ── */
.results-section {
    padding: 60px 0 100px;
    background: #111;
    min-height: 60vh;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}
body.lang-ar .results-header { flex-direction: row-reverse; }
.results-count {
    font-size: 0.8rem;
    color: #555;
}
.results-count strong { color: var(--srv-color); }

/* Mode badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.mode-badge.geo    { background: rgba(14,165,233,0.1);  color: var(--srv-color);  border: 1px solid rgba(14,165,233,0.2); }
.mode-badge.filter { background: rgba(232,32,42,0.1);   color: var(--rouge);       border: 1px solid rgba(232,32,42,0.2); }
.mode-badge.all    { background: rgba(255,255,255,0.05); color: #888;               border: 1px solid rgba(255,255,255,0.08); }

/* Grille garages */
.garages-grid-lav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Carte garage */
.garage-card-lav {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
}
.garage-card-lav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--srv-color);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}
.garage-card-lav:hover {
    border-color: rgba(14,165,233,0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(14,165,233,0.05);
}
.garage-card-lav:hover::after { transform: scaleX(1); }

/* Photo / visuel */
.gcard-visual {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #0d2038);
    flex-shrink: 0;
}
.gcard-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.garage-card-lav:hover .gcard-visual img { transform: scale(1.05); }
.gcard-visual-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.15;
}
/* Badges sur la photo */
.gcard-badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
body.lang-ar .gcard-badges { flex-direction: row-reverse; }
.gcard-vedette {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.gcard-vedette.gold { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.gcard-distance {
    background: rgba(14,165,233,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(14,165,233,0.3);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--srv-color);
}
/* Statut ouvert/fermé sur photo */
.gcard-statut {
    position: absolute;
    bottom: 10px;
    left: 12px;
}
body.lang-ar .gcard-statut { left: auto; right: 12px; }
.gcard-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.gcard-statut-pill.ouvert {
    background: rgba(34,197,94,0.2);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}
.gcard-statut-pill.ferme {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
}

/* Corps carte */
.gcard-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.gcard-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
body.lang-ar .gcard-name { font-family: 'Cairo', sans-serif; }

.gcard-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #666;
}
body.lang-ar .gcard-location { flex-direction: row-reverse; justify-content: flex-end; }

.gcard-horaire-detail {
    font-size: 0.72rem;
    color: #555;
    margin-top: 1px;
}

/* Services pills */
.gcard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.lang-ar .gcard-pills { flex-direction: row-reverse; }
.gcard-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    transition: all 0.2s;
}
.gcard-pill.highlight {
    background: rgba(14,165,233,0.1);
    border-color: rgba(14,165,233,0.25);
    color: var(--srv-color);
}
.gcard-pill.domicile {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.2);
    color: #4ade80;
}

/* Lien bas */
.gcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}
body.lang-ar .gcard-footer { flex-direction: row-reverse; }
.gcard-rdv {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--srv-color);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.garage-card-lav:hover .gcard-rdv { gap: 10px; }
body.lang-ar .gcard-rdv { flex-direction: row-reverse; }
.gcard-vedette-stars { color: #fbbf24; font-size: 0.75rem; letter-spacing: 1px; }

/* ── État vide ── */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}
.no-results-icon { font-size: 4rem; display: block; margin-bottom: 16px; }
.no-results h3 { font-size: 1.2rem; margin-bottom: 10px; color: #888; font-weight: 500; }
.no-results p  { font-size: 0.85rem; color: #555; max-width: 380px; margin: 0 auto; line-height: 1.7; }

/* ── Squelette chargement ── */
.skeleton-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
    animation: sk-pulse 1.6s ease-in-out infinite;
}
.skeleton-card .sk-img  { height: 170px; background: rgba(255,255,255,0.04); }
.skeleton-card .sk-line {
    height: 11px; background: rgba(255,255,255,0.05);
    border-radius: 6px; margin: 14px 18px 0;
}
.skeleton-card .sk-line.s { width: 50%; }
.skeleton-card .sk-line.xs { width: 30%; margin-bottom: 20px; }
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .garages-grid-lav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .lav-hero { padding: 110px 20px 0; }
    .search-panel { position: static; }
    .search-panel-inner { flex-direction: column; padding: 0 20px; }
    .search-tabs { border: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .search-form { padding: 14px 0; }
    .search-select { min-width: 0; flex: 1; }
    .results-section { padding: 40px 0 70px; }
    .garages-grid-lav { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .lav-stat-bar { gap: 0; flex-wrap: wrap; }
    .lav-stat { padding: 0 20px 0 0; margin-right: 20px; }
}

/* ── Page 404 ── */
.page-404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 80px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Fond identique au hero */
.page-404-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 55% at 50% 40%, rgba(232,32,42,0.1) 0%, transparent 70%),
        linear-gradient(135deg, #0d0d0d 0%, #1a0a0a 100%);
    z-index: 0;
}
.page-404-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
}

.page-404-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
}

/* Grand "404" */
.err-code {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(8rem, 22vw, 16rem);
    line-height: 0.85;
    letter-spacing: 4px;
    color: transparent;
    -webkit-text-stroke: 2px rgba(232,32,42,0.35);
    background: linear-gradient(135deg, rgba(232,32,42,0.15) 0%, transparent 60%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
    margin-bottom: 8px;
}
body.lang-ar .err-code {
    font-family: 'Bebas Neue', sans-serif; /* garde Bebas pour le chiffre */
    letter-spacing: 0;
}

/* Icône voiture */
.err-car {
    font-size: 3.5rem;
    margin-bottom: 20px;
    display: block;
    animation: err-bounce 2.5s ease-in-out infinite;
}
@keyframes err-bounce {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-10px); }
}

.err-headline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: 1px;
    margin-bottom: 16px;
    color: #fff;
}
body.lang-ar .err-headline {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    letter-spacing: 0;
}

.err-desc {
    font-size: 0.95rem;
    color: #888;
    line-height: 1.8;
    margin-bottom: 36px;
    font-weight: 300;
}

/* Boutons */
.err-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 52px;
}
.err-actions .btn-primary {
    padding: 13px 30px;
    font-size: 0.9rem;
    border-radius: 10px;
}
.err-actions .btn-outline {
    padding: 13px 30px;
    font-size: 0.9rem;
    border-radius: 10px;
}

/* Suggestions */
.err-suggest-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rouge);
    margin-bottom: 16px;
}
.err-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.err-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 0.82rem;
    color: #bbb;
    text-decoration: none;
    transition: all 0.25s;
}
.err-link:hover {
    background: rgba(232,32,42,0.12);
    border-color: rgba(232,32,42,0.35);
    color: #fff;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 480px) {
    .page-404 { padding: 100px 16px 60px; }
    .err-code  { font-size: clamp(6rem, 28vw, 10rem); }
    .err-actions { flex-direction: column; align-items: center; }
    .err-actions a { width: 100%; text-align: center; }
}
/* ---- RESET ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Outfit', sans-serif;
    background: var(--noir);
    color: var(--blanc);
    overflow-x: hidden;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ---- CONTAINER ---- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

.section-pad { padding: 100px 0; }

/* ---- SECTION TITLES ---- */
.section-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rouge);
    margin-bottom: 10px;
}

.section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 50px;
}

/* ---- BUTTONS ---- */
.btn-outline {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    color: var(--blanc);
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}
.btn-outline:hover { border-color: var(--rouge); color: var(--rouge); }

.btn-primary {
    display: inline-block;
    padding: 10px 22px;
    background: var(--rouge);
    border: none;
    border-radius: 8px;
    color: var(--blanc);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.btn-primary:hover { background: var(--rouge-dark); }

.btn-white {
    display: inline-block;
    padding: 14px 30px;
    background: var(--blanc);
    color: var(--rouge);
    border: none;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition);
}
.btn-white:hover { transform: scale(1.03); }

.btn-ghost-white {
    display: inline-block;
    padding: 14px 30px;
    background: transparent;
    color: var(--blanc);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition);
}
.btn-ghost-white:hover { border-color: rgba(255,255,255,0.8); }

/* ---- ANIMATIONS ---- */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.4); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1050;
    background: rgba(13,13,13,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: box-shadow var(--transition);
}
.navbar.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.5); }

.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 18px var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.logo-img {
    height: 42px;
    width: auto;
    display: block;
}
.logo-img-footer {
    height: 36px;
    margin-bottom: 14px;
}

.nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
    align-items: center;
}
.nav-links a {
    color: #ccc;
    font-size: 0.87rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color var(--transition);
}
.nav-links a:hover { color: var(--rouge); }
.nav-links button {
    color: #ccc;
    font-size: 0.87rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color var(--transition);
}
.nav-links button:hover { color: var(--rouge); }

.nav-mobile-only { display: none; }

.nav-cta { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

/* Lang switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 5px 10px;
}
.lang-btn {
    font-size: 0.8rem;
    font-weight: 700;
    color: #888;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
    padding: 2px 4px;
}
.lang-btn:hover { color: var(--blanc); }
.lang-btn.active { color: var(--rouge); border-bottom: 2px solid var(--rouge); }
.lang-sep { color: rgba(255,255,255,0.2); font-size: 0.75rem; }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1100;
    position: relative;
}
.hamburger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--blanc);
    border-radius: 2px;
    transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================
   HERO
   ============================================ */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding: 120px var(--pad-x) 160px;
    overflow: hidden;
}

.hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 70% 50%, rgba(232,32,42,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 80%, rgba(255,107,53,0.07) 0%, transparent 60%),
        linear-gradient(135deg, #0d0d0d 0%, #1a0a0a 100%);
}

.hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
}

.car-silhouette {
    position: absolute;
    right: 0; bottom: 80px;
    width: 55%;
    opacity: 0.07;
    pointer-events: none;
}

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

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(232,32,42,0.15);
    border: 1px solid rgba(232,32,42,0.3);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #ff8080;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.badge-dot {
    width: 6px; height: 6px;
    background: var(--rouge);
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.hero h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.2rem, 7vw, 6rem);
    line-height: 0.95;
    letter-spacing: 2px;
    margin-bottom: 24px;
}
.hero h1 .accent { color: var(--rouge); }
.hero h1 .underline-red {
    position: relative;
    display: inline-block;
}
.hero h1 .underline-red::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0; right: 0;
    height: 4px;
    background: var(--rouge);
    border-radius: 2px;
}

.hero-desc {
    font-size: 1rem;
    color: #aaa;
    line-height: 1.7;
    margin-bottom: 36px;
    font-weight: 300;
}

/* Search box */
.search-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    padding: 8px 8px 8px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    transition: border-color var(--transition);
}
.search-box:focus-within { border-color: var(--rouge); }

.search-icon { color: var(--rouge); font-size: 1.1rem; flex-shrink: 0; }

.search-box input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--blanc);
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
}
.search-box input::placeholder { color: #555; }

.search-divider {
    width: 1px; height: 26px;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.search-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 0.85rem;
    white-space: nowrap;
    padding: 0 6px;
}

.search-btn {
    background: var(--rouge);
    color: var(--blanc);
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition);
}
.search-btn:hover { background: var(--rouge-dark); }

.search-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.tag {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 0.78rem;
    color: #aaa;
    cursor: pointer;
    transition: all var(--transition);
}
.tag:hover {
    background: rgba(232,32,42,0.15);
    border-color: var(--rouge);
    color: var(--blanc);
}

/* Hero stats */
.hero-stats {
    position: absolute;
    bottom: 50px; left: var(--pad-x); right: var(--pad-x);
    display: flex;
    gap: 40px;
    z-index: 2;
    flex-wrap: wrap;
}

.stat { display: flex; flex-direction: column; }

@media (max-width: 768px) and (orientation: portrait) {
  .stat {
    transform: translateX(0);
    transition: transform 0.3s ease;
  }

  .stat:hover {
    transform: translateX(-60px);
    background: black;
    padding: 5px 10px;
    border-radius: 20px 0 0 20px;
    border: 1px solid var(--rouge);
    width: 135px;
  }
}

.stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--blanc);
    line-height: 1;
}
.stat-num span { color: var(--rouge); }
.stat-label {
    font-size: 0.74rem;
    color: var(--texte-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}
.stat-divider {
    width: 1px;
    background: rgba(255,255,255,0.1);
    align-self: stretch;
}

/* ============================================
   SERVICES
   ============================================ */
.services {
    background: var(--gris-fonce);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.service-card {
    background: var(--gris-moyen);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 28px 22px;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    display: block;
}
.service-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--rouge);
    transform: scaleX(0);
    transition: transform var(--transition);
}
.service-card:hover {
    border-color: rgba(232,32,42,0.3);
    transform: translateY(-4px);
    background: #303030;
}
.service-card:hover::before { transform: scaleX(1); }

.service-icon { font-size: 2rem; margin-bottom: 14px; display: block; }
.service-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
.service-count { font-size: 0.78rem; color: var(--texte-muted); }
.service-count span { color: var(--rouge); font-weight: 600; }

/* ============================================
   COMMENT ÇA MARCHE
   ============================================ */
.how { background: var(--noir); }

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.step { display: flex; flex-direction: column; gap: 14px; }

.step-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5rem;
    color: rgba(232,32,42,0.15);
    line-height: 1;
    transition: color var(--transition);
}
.step:hover .step-num { color: rgba(232,32,42,0.4); }

.step h3 { font-weight: 700; font-size: 1.1rem; }
.step p { color: var(--texte-muted); font-size: 0.88rem; line-height: 1.7; }

/* ============================================
   GARAGES EN VEDETTE
   ============================================ */
.featured { background: var(--gris-fonce); }

.featured-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 20px;
}
.featured-header .section-title { margin-bottom: 0; }

.garages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.garage-card {
    background: var(--gris-moyen);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all var(--transition);
    cursor: pointer;
    display: block;
}
.garage-card:hover {
    transform: translateY(-4px);
    border-color: rgba(232,32,42,0.25);
    box-shadow: var(--shadow);
}

.garage-img {
    height: 180px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.garage-img.g1 { background: linear-gradient(135deg, #1a1a2e, #16213e); }
.garage-img.g2 { background: linear-gradient(135deg, #1a2e1a, #162116); }
.garage-img.g3 { background: linear-gradient(135deg, #2e1a1a, #211616); }

.garage-img-icon { font-size: 3.5rem; opacity: 0.3; }

.garage-badge {
    position: absolute;
    top: 12px; left: 12px;
    padding: 4px 10px;
    background: var(--rouge);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.garage-rating {
    position: absolute;
    top: 12px; right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.garage-info { padding: 18px; }
.garage-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.garage-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--texte-muted);
    margin-bottom: 12px;
}
.garage-services { display: flex; flex-wrap: wrap; gap: 6px; }
.service-pill {
    padding: 3px 10px;
    background: rgba(232,32,42,0.1);
    border: 1px solid rgba(232,32,42,0.2);
    border-radius: 20px;
    font-size: 0.7rem;
    color: #ff9999;
}

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner {
    background: linear-gradient(135deg, var(--rouge) 0%, #c0392b 50%, #8b0000 100%);
    border-radius: 20px;
    padding: 64px 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
    margin-bottom: 100px;
}
.cta-banner::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}

.cta-text h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.cta-text p {
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
    max-width: 420px;
}
.cta-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 60px 0 30px;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 44px;
}

.footer-brand .logo { font-size: 1.7rem; margin-bottom: 14px; display: inline-block; }
.footer-brand p { font-size: 0.83rem; color: var(--texte-muted); line-height: 1.7; }

.footer-col h4 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blanc);
    margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
    color: var(--texte-muted);
    font-size: 0.83rem;
    transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--rouge); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--texte-muted);
    flex-wrap: wrap;
    gap: 10px;
}

/* ============================================
   RESPONSIVE – TABLET (≤ 1024px)
   ============================================ */
@media (max-width: 1024px) {
    :root { --pad-x: 36px; }

    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-brand { grid-column: 1 / -1; }

    .nav-links { gap: 20px; }
    .car-silhouette { opacity: 0.05; width: 60%; }
}

/* ============================================
   RESPONSIVE – MOBILE (≤ 768px)
   ============================================ */
@media (max-width: 768px) {
    :root { --pad-x: 20px; }

    .hamburger { display: flex; }
    .nav-cta { display: none; }
    .nav-mobile-only { display: none; }

    .nav-links {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(13,13,13,0.98);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        z-index: 999;
        overflow-y: auto;
        padding: 80px 30px 40px;
    }
    .nav-links.open { display: flex; height: max-content; }
    .nav-links.open .nav-mobile-only { display: flex; height: max-content; justify-content: center;}

    .nav-links > li {
        width: 100%;
        text-align: center;
        list-style: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding: 16px 0;
    }
    .nav-links > li:last-child { border-bottom: none; }
    .nav-links a { font-size: 1.1rem; display: block; }

    .nav-mobile-only .btn-outline,
    .nav-mobile-only .btn-primary {
        display: block;
        width: 100%;
        text-align: center;
        padding: 13px 20px;
        font-size: 1rem;
        border-radius: 10px;
    }

    .nav-mobile-only .lang-switcher { justify-content: center; }

    .hero {
        padding: 100px var(--pad-x) 45px;
        min-height: auto;
    }
    .hero-desc br { display: none; }
    .car-silhouette { display: none; }

    .search-box {
        flex-wrap: wrap;
        padding: 12px;
        gap: 8px;
    }
    .search-divider,
    .search-location { display: none; }
    .search-btn { width: 100%; text-align: center; padding: 12px; }

    .hero-stats {
        position: static;
        margin-top: 40px;
        gap: 20px;
    }
    .stat-divider { display: none; }

    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .section-pad { padding: 20px 0; }

    .steps { grid-template-columns: 1fr; gap: 32px; }
    .step-num { font-size: 3.5rem; }

    .garages-grid { grid-template-columns: 1fr; }
    .featured-header { flex-direction: column; align-items: flex-start; }

    .cta-banner {
        flex-direction: column;
        text-align: center;
        padding: 44px 28px;
    }
    .cta-text p { margin: 0 auto; }
    .cta-actions { justify-content: center; width: 100%; }
    .btn-white, .btn-ghost-white { flex: 1; text-align: center; }

    .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

/* ============================================
   RESPONSIVE – PETIT MOBILE (≤ 480px)
   ============================================ */
@media (max-width: 480px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr; }
    .search-tags { gap: 6px; }
    .tag { font-size: 0.72rem; padding: 4px 10px; }
    .hero-badge { font-size: 0.7rem; }
    .hero-stats { gap: 16px; }
    .stat-num { font-size: 1.7rem; }
}


/* ============================================
   2. CONNEXION_STYLE.CSS — PAGE CONNEXION
   ============================================ */

body.connexion-page {
    margin: 0;
    padding: 0;
    background: var(--noir);
    color: var(--blanc);
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

body.lang-ar.connexion-page {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
}

body.connexion-page .header { display: none; }
body.connexion-page footer  { display: none; }
body.connexion-page .Baricon_recherche { display: none; }

/* Layout split */
.cx-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/* Côté gauche — brand */
.cx-left {
    position: relative;
    background: var(--gris-fonce);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cx-left-inner {
    position: relative;
    z-index: 2;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: 100%;
    justify-content: center;
}

.cx-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 0;
}

.cx-bg-glow {
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(232,32,42,0.18) 0%, transparent 70%);
    z-index: 0;
}

.cx-logo { display: inline-block; z-index: 1; text-decoration: none; }
.cx-logo img { height: 48px; width: auto; display: block; }
.cx-logo-mobile { display: none; }
.cx-logo-mobile img { height: 40px; width: auto; display: block; }

.cx-tagline { z-index: 1; }
.cx-tagline h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.05;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.cx-tagline h2 span { color: var(--rouge); }
.cx-tagline p {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.7;
    font-weight: 300;
    max-width: 360px;
}

.cx-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 1;
}
.cx-stat { display: flex; flex-direction: column; gap: 2px; }
.cx-stat strong {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--blanc);
}
.cx-stat strong span { color: var(--rouge); }
.cx-stat small {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cx-stat-sep {
    width: 1px;
    height: 36px;
    background: var(--border);
}

.cx-services-deco {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    z-index: 1;
}
.cx-services-deco span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 1.3rem;
    transition: all 0.3s;
}
.cx-services-deco span:hover {
    background: rgba(232,32,42,0.1);
    border-color: rgba(232,32,42,0.3);
    transform: translateY(-3px);
}

/* Côté droit — formulaire */
.cx-right {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--noir);
    padding: 40px 24px;
}

.cx-form-wrapper {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.cx-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    font-size: 0.8rem;
    color: var(--muted);
}
.cx-lang-btn {
    color: var(--muted);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    padding: 2px 4px;
    transition: color 0.2s;
}
.cx-lang-btn:hover { color: var(--blanc); }
.cx-lang-btn.active {
    color: var(--rouge);
    border-bottom: 2px solid var(--rouge);
}

.cx-form-header h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.cx-form-header p {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 300;
}

.cx-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cx-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cx-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #bbb;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cx-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--gris-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}
.cx-input-wrap:focus-within {
    border-color: var(--rouge);
    box-shadow: 0 0 0 3px rgba(232,32,42,0.12);
}

.cx-input-icon {
    padding: 0 14px;
    font-size: 1rem;
    flex-shrink: 0;
    opacity: 0.5;
}

.cx-input-wrap input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--blanc);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    padding: 14px 14px 14px 0;
    min-width: 0;
}
.cx-input-wrap input::placeholder { color: #444; }

.cx-eye-btn {
    background: none;
    border: none;
    color: var(--muted);
    padding: 0 16px;
    cursor: pointer;
    transition: color 0.2s;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.cx-eye-btn:hover { color: var(--blanc); }

.cx-error {
    background: rgba(232,32,42,0.1);
    border: 1px solid rgba(232,32,42,0.3);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #ff8080;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: shake 0.4s ease;
}

.cx-forgot {
    text-align: right;
    margin-top: -6px;
}
.cx-forgot a {
    font-size: 0.8rem;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
}
.cx-forgot a:hover { color: var(--rouge); }

.cx-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--rouge);
    color: var(--blanc);
    border: none;
    border-radius: var(--radius);
    padding: 15px 28px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-top: 4px;
    width: 100%;
    letter-spacing: 0.3px;
}
.cx-submit:hover {
    background: var(--rouge-dark);
    transform: translateY(-1px);
}
.cx-submit:active { transform: translateY(0); }

.cx-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cx-sep-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.cx-create-btn {
    display: block;
    text-align: center;
    padding: 14px 28px;
    background: transparent;
    color: var(--blanc);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}
.cx-create-btn:hover {
    border-color: rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.04);
}

/* Connexion — RTL arabe */
body.lang-ar .cx-page { direction: rtl; }
body.lang-ar .cx-form-header h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    letter-spacing: 0;
}
body.lang-ar .cx-tagline h2 {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    letter-spacing: 0;
}
body.lang-ar .cx-logo { font-family: 'Bebas Neue', sans-serif; }
body.lang-ar .cx-lang { justify-content: flex-start; }
body.lang-ar .cx-forgot { text-align: left; }
body.lang-ar .cx-input-wrap input {
    text-align: right;
    padding: 14px 0 14px 14px;
}
body.lang-ar .cx-input-icon { order: 2; }
body.lang-ar .cx-eye-btn { order: 0; }
body.lang-ar .cx-stats { flex-direction: row-reverse; }
body.lang-ar .cx-field label { text-align: right; }

/* Connexion — tablet */
@media (max-width: 1024px) {
    .cx-left-inner { padding: 40px 36px; }
    .cx-tagline h2 { font-size: 2.2rem; }
}

/* Connexion — mobile */
@media (max-width: 768px) {
    body.connexion-page .headerMobil { display: flex; }

    .cx-page {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .cx-left { display: none; }

    .cx-right {
        min-height: 100vh;
        padding: 80px 20px 40px;
        align-items: flex-start;
    }
    .cx-form-wrapper {
        max-width: 100%;
        padding-top: 20px;
    }
    .cx-logo-mobile {
        display: block;
        margin-bottom: 8px;
    }
    .cx-logo-mobile img { height: 38px; width: auto; }
    .cx-lang { justify-content: flex-start; margin-bottom: 8px; }
    .cx-form-header h1 { font-size: 2rem; }
    .cx-submit { font-size: 0.95rem; }
}

@media (max-width: 480px) {
    .cx-right { padding: 30px 16px 30px; }
    .cx-form-header h1 { font-size: 1.8rem; }
}


/* ============================================
   3. STYLE-RTL.CSS — SURCHARGES ARABE
   ============================================ */

body.lang-ar {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    text-align: right;
}

/* Navbar RTL */
body.lang-ar .nav-inner { flex-direction: row-reverse; }
body.lang-ar .nav-cta { flex-direction: row-reverse; }
body.lang-ar .logo { flex-shrink: 0; }

/* Hero RTL */
body.lang-ar .hero {
    padding-right: var(--pad-x);
    padding-left: 0;
}
body.lang-ar .hero-content {
    margin-right: 0;
    margin-left: auto;
}
body.lang-ar .hero h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: clamp(2.8rem, 6vw, 5rem);
    letter-spacing: 0;
    line-height: 1.1;
}
body.lang-ar .hero-badge { flex-direction: row-reverse; }

body.lang-ar .search-tags {
    justify-content: flex-end;
    direction: rtl;
}
body.lang-ar .search-tags .tag { direction: rtl; }

body.lang-ar .hero-stats {
    flex-direction: row-reverse;
    right: var(--pad-x);
    left: var(--pad-x);
}
body.lang-ar .stat { align-items: flex-end; }
body.lang-ar .stat-label { text-align: right; }

/* Sections RTL */
body.lang-ar .section-label,
body.lang-ar .section-title { text-align: right; }
body.lang-ar .section-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    letter-spacing: 0;
    line-height: 1.2;
}

/* Services RTL */
body.lang-ar .service-card { text-align: right; }
body.lang-ar .services-grid { direction: rtl; }

/* Comment ça marche RTL */
body.lang-ar .steps { direction: rtl; }
body.lang-ar .step { text-align: right; }
body.lang-ar .step-num { font-family: 'Cairo', sans-serif; }
body.lang-ar .step h3 { font-family: 'Cairo', sans-serif; font-weight: 700; }

/* Garages RTL */
body.lang-ar .featured-header { flex-direction: row-reverse; }
body.lang-ar .garage-info { text-align: right; }
body.lang-ar .garage-meta { flex-direction: row-reverse; justify-content: flex-end; }
body.lang-ar .garage-services { justify-content: flex-end; direction: rtl; }
body.lang-ar .garage-badge { right: 12px; left: auto; }
body.lang-ar .garage-rating { left: 12px; right: auto; }
body.lang-ar .garage-name { font-family: 'Cairo', sans-serif; font-weight: 700; }

/* CTA banner RTL */
body.lang-ar .cta-banner { flex-direction: row-reverse; }
body.lang-ar .cta-text { text-align: right; }
body.lang-ar .cta-text h2 {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    letter-spacing: 0;
}
body.lang-ar .cta-text p { font-family: 'Cairo', sans-serif; }
body.lang-ar .cta-actions { flex-direction: row-reverse; }

/* Footer RTL */
body.lang-ar .footer-top { direction: rtl; text-align: right; }
body.lang-ar .footer-col h4 {
    text-align: right;
    font-family: 'Cairo', sans-serif;
}
body.lang-ar .footer-col ul { padding-right: 0; }
body.lang-ar .footer-col ul li a { font-family: 'Cairo', sans-serif; }
body.lang-ar .footer-bottom { flex-direction: row-reverse; }
body.lang-ar .footer-brand p { text-align: right; font-family: 'Cairo', sans-serif; }
body.lang-ar .footer-brand .logo-img-footer { margin-bottom: 14px; }

/* RTL mobile (≤ 768px) */
@media (max-width: 768px) {
    body.lang-ar .nav-inner { flex-direction: row-reverse; }

    body.lang-ar .nav-links.open {
        direction: rtl;
        text-align: right;
        align-items: center;
    }
    body.lang-ar .nav-links > li { text-align: center; }

    body.lang-ar .hero { padding: 100px var(--pad-x) 200px; }

    body.lang-ar .hero-stats {
        flex-direction: row-reverse;
        flex-wrap: wrap;
        position: static;
        margin-top: 40px;
    }

    body.lang-ar .search-tags {
        justify-content: flex-start;
        direction: rtl;
    }

    body.lang-ar .cta-banner { flex-direction: column; text-align: center; }
    body.lang-ar .cta-text { text-align: center; }
    body.lang-ar .cta-actions { flex-direction: row; justify-content: center; }

    body.lang-ar .featured-header { flex-direction: column; align-items: flex-end; }

    body.lang-ar .footer-bottom { flex-direction: column; text-align: center; }
    body.lang-ar .footer-top { grid-template-columns: 1fr 1fr; }
}

/* RTL petit mobile (≤ 480px) */
@media (max-width: 480px) {
    body.lang-ar .hero h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); }
    body.lang-ar .search-tags { justify-content: flex-start; }
    body.lang-ar .footer-top { grid-template-columns: 1fr; }
    body.lang-ar .footer-brand { grid-column: 1 / -1; }
}
/* =====================================================
   PROFIL GARAGE — design sombre premium RDVCar
   ===================================================== */
:root {
    --pg-red:    #E8202A;
    --pg-red-d:  #c0181f;
    --pg-dark:   #0d0d0d;
    --pg-dark2:  #141414;
    --pg-dark3:  #1c1c1c;
    --pg-border: rgba(255,255,255,.08);
    --pg-text:   rgba(255,255,255,.9);
    --pg-muted:  rgba(255,255,255,.42);
    --pg-r:      14px;
}
.pg-body { background:var(--pg-dark); color:var(--pg-text); font-family:'Outfit','Cairo',sans-serif; min-height:100vh; }

/* ── Hero ─── */
.pg-hero { position:relative; height:260px; overflow:hidden; background:var(--pg-dark2); }
@media(max-width:640px){ .pg-hero{height:190px;} }
.pg-hero-img { width:100%; height:100%; object-fit:cover; }
.pg-hero-overlay { position:absolute;inset:0; background:linear-gradient(to bottom,transparent 30%,rgba(13,13,13,.95) 100%); }

.pg-status-badge {
    position:absolute; top:1.1rem; right:1.25rem;
    display:flex; align-items:center; gap:.45rem;
    padding:.35rem .85rem; border-radius:100px;
    font-size:.75rem; font-weight:700; letter-spacing:.05em;
    backdrop-filter:blur(8px); border:1px solid;
}
[dir="rtl"] .pg-status-badge{right:auto;left:1.25rem;}
.pg-status-badge.open  {background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.4);color:#4ade80;}
.pg-status-badge.close {background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#f87171;}
.pg-status-dot{width:7px;height:7px;border-radius:50%;animation:blink 1.8s ease infinite;}
.open .pg-status-dot{background:#4ade80;} .close .pg-status-dot{background:#f87171;animation:none;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* Carousel hero */
.pg-carousel-btn {
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; background:rgba(0,0,0,.6);
    border:none; border-radius:50%; color:#fff; font-size:1.1rem;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .2s; z-index:5;
}
.pg-carousel-btn:hover{background:var(--pg-red);}
.pg-carousel-btn.prev{left:.75rem;} .pg-carousel-btn.next{right:.75rem;}

/* ── Layout ─── */
.pg-layout { max-width:960px; margin:-3rem auto 0; padding:0 1.25rem 4rem; position:relative; z-index:2; }

/* ── Card ─── */
.pg-card {
    background:var(--pg-dark2); border:1px solid var(--pg-border);
    border-radius:20px; overflow:hidden; margin-bottom:1.25rem;
    animation:fadeSlideUp .4s ease both;
}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.pg-card-header { padding:1.5rem 1.75rem; border-bottom:1px solid var(--pg-border); }
.pg-name { font-family:'Bebas Neue',sans-serif; font-size:clamp(1.8rem,4vw,2.6rem); color:#fff; line-height:1.05; letter-spacing:.04em; margin:0 0 .35rem; }
.pg-category { display:inline-flex; align-items:center; gap:.4rem; background:rgba(232,32,42,.12); border:1px solid rgba(232,32,42,.25); color:#ff8080; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.25rem .75rem; border-radius:100px; }
.pg-address { display:flex; align-items:center; gap:.4rem; color:var(--pg-muted); font-size:.85rem; margin-top:.5rem; }

.pg-btn-group { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }
.pg-btn-reserve {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.7rem 1.4rem; background:var(--pg-red); border:none;
    border-radius:10px; color:#fff; font-size:.88rem; font-weight:700;
    font-family:inherit; cursor:pointer; text-decoration:none;
    transition:background .2s,box-shadow .2s,transform .15s;
    box-shadow:0 4px 18px rgba(232,32,42,.3);
}
.pg-btn-reserve:hover{background:var(--pg-red-d);box-shadow:0 6px 24px rgba(232,32,42,.45);}
.pg-btn-reserve:active{transform:scale(.97);}
.pg-btn-reserve img{width:18px;height:18px;filter:brightness(0) invert(1);}
.pg-btn-secondary {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.7rem 1.25rem; background:rgba(255,255,255,.05);
    border:1px solid var(--pg-border); border-radius:10px;
    color:var(--pg-muted); font-size:.85rem; font-weight:600;
    font-family:inherit; cursor:pointer; text-decoration:none;
    transition:background .2s,color .2s,border-color .2s;
}
.pg-btn-secondary:hover{background:rgba(255,255,255,.1);color:var(--pg-text);border-color:rgba(255,255,255,.2);}

/* ── Sections ─── */
.pg-section { padding:1.5rem 1.75rem; border-bottom:1px solid var(--pg-border); }
.pg-section:last-child { border-bottom:none; }
.pg-section-label { font-size:.7rem; font-weight:700; color:var(--pg-red); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.85rem; }

/* Services */
.pg-services-wrap { display:flex; flex-wrap:wrap; gap:.6rem; }
.pg-service-chip {
    display:inline-flex; align-items:center; gap:.45rem;
    background:rgba(255,255,255,.04); border:1px solid var(--pg-border);
    border-radius:9px; padding:.45rem .85rem;
    font-size:.8rem; font-weight:500; color:var(--pg-muted);
    transition:background .2s,border-color .2s,color .2s;
}
.pg-service-chip:hover{background:rgba(232,32,42,.1);border-color:rgba(232,32,42,.3);color:#fff;}
.pg-service-chip img{width:18px;height:18px;filter:brightness(0) invert(.6);}

/* Horaires */
.pg-horaires-grid { display:flex; flex-direction:column; gap:.35rem; }
.pg-day-row { display:flex; align-items:center; justify-content:space-between; padding:.45rem .75rem; border-radius:8px; font-size:.85rem; transition:background .2s; }
.pg-day-row:hover{background:rgba(255,255,255,.03);}
.pg-day-row.pg-day-today{background:rgba(232,32,42,.08);border:1px solid rgba(232,32,42,.2);}
.pg-day-name{color:var(--pg-text);font-weight:600;min-width:90px;}
.pg-day-hours{color:var(--pg-muted);font-size:.82rem;}
.pg-day-today .pg-day-name{color:#fff;} .pg-day-today .pg-day-hours{color:#ff8080;}

/* Carte mini */
.pg-map-wrap { border-radius:12px; overflow:hidden; height:200px; border:1px solid var(--pg-border); cursor:pointer; }
#pg-map-mini{width:100%;height:100%;}

/* Nav sticky mobile */
.pg-sticky-nav { display:none; position:fixed; bottom:0;left:0;right:0; z-index:200;
    background:rgba(14,14,14,.97); backdrop-filter:blur(16px);
    border-top:1px solid var(--pg-border); padding:.85rem 1.25rem; gap:.75rem; }
@media(max-width:768px){.pg-sticky-nav{display:flex;}}

/* ══ MODAL base ══ */
.pg-modal-overlayCenter {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
    z-index:500; align-items:flex-end; justify-content:center;
    align-items: center;z-index: 10000;
}
.pg-modal-overlayCenter.open{display:flex;}
.pg-modalCenter {
    background:#161616; border:1px solid rgba(255,255,255,.1);
    border-radius:22px 22px 22px 22px ; width:100%; max-width:540px;
    max-height:92vh; overflow-y:auto; padding:1.75rem 1.5rem 2.5rem;
    animation:slideUp .3s cubic-bezier(.25,.46,.45,.94);
}
.pg-modal-btn {
    display: flex;
    justify-content: center;
}
/* ================================================
   PAGE SERVICES — styles spécifiques
   ================================================ */

/* ── Hero ── */
.srv-hero {
    padding: 150px var(--pad-x) 90px;
    position: relative;
    overflow: hidden;
}
.srv-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 60% 70% at 70% 50%, rgba(232,32,42,0.09) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 10% 80%, rgba(232,32,42,0.05) 0%, transparent 60%),
        #0d0d0d;
}
.srv-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 55px 55px;
}
.srv-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 40px;
}
body.lang-ar .srv-hero-inner { direction: rtl; }

.srv-hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.5rem, 8vw, 7rem);
    line-height: 0.9;
    letter-spacing: 3px;
    margin: 14px 0 22px;
}
body.lang-ar .srv-hero-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.5rem, 6vw, 5rem);
}
.srv-hero-title .accent { color: var(--rouge); }

.srv-hero-desc {
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    line-height: 1.75;
    max-width: 500px;
}

/* Compteurs côté droit */
.srv-hero-counters {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: center;
    min-width: 200px;
}
.srv-counter-item {
    padding: 20px 24px;
    border-left: 1px solid rgba(255,255,255,0.07);
    position: relative;
}
body.lang-ar .srv-counter-item {
    border-left: none;
    border-right: 1px solid rgba(255,255,255,0.07);
}
.srv-counter-item::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--rouge);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s ease;
}
body.lang-ar .srv-counter-item::before {
    left: auto; right: -1px;
}
.srv-counter-item.visible::before { transform: scaleY(1); }
.srv-counter-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--blanc);
}
.srv-counter-num em {
    font-style: normal;
    color: var(--rouge);
    font-size: 2rem;
}
.srv-counter-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--texte-muted);
    margin-top: 2px;
}
body.lang-ar .srv-counter-label { letter-spacing: 0; }

/* ── Barre filtre (déco) ── */
.srv-filter-bar {
    background: var(--gris-fonce);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 18px 0;
}
.srv-filter-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.srv-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rouge);
    margin-right: 6px;
    flex-shrink: 0;
}
body.lang-ar .srv-filter-label { margin-right: 0; margin-left: 6px; letter-spacing: 0; }
.srv-filter-tag {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.1);
    color: #ccc;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.srv-filter-tag:hover,
.srv-filter-tag.active {
    background: rgba(232,32,42,0.12);
    border-color: rgba(232,32,42,0.4);
    color: #fff;
}

/* ── Grille services ── */
.srv-grid-section {
    padding: 70px 0 110px;
    background: #111;
}
.srv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Carte */
.srv-card {
    background: #111;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}
.srv-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--card-color, var(--rouge));
    opacity: 0;
    transition: opacity 0.35s ease;
}
.srv-card:hover { background: #161616; }
.srv-card:hover::before { opacity: 0.04; }

/* Lueur colorée en hover */
.srv-card-glow {
    position: absolute;
    top: -60px; right: -60px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: var(--card-color, var(--rouge));
    opacity: 0;
    filter: blur(60px);
    transition: opacity 0.4s ease;
    pointer-events: none;
}
body.lang-ar .srv-card-glow { right: auto; left: -60px; }
.srv-card:hover .srv-card-glow { opacity: 0.18; }

/* Header carte */
.srv-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
body.lang-ar .srv-card-head { flex-direction: row-reverse; }

.srv-card-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    position: relative; z-index: 1;
    transition: border-color 0.3s, background 0.3s;
}
.srv-card:hover .srv-card-icon-wrap {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}

.srv-card-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #aaa;
    position: relative; z-index: 1;
    transition: all 0.3s;
    white-space: nowrap;
}
.srv-card-badge strong { color: var(--card-color, var(--rouge)); }
.srv-card:hover .srv-card-badge {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
}

/* Nom */
.srv-card-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    position: relative; z-index: 1;
    transition: color 0.3s;
}
body.lang-ar .srv-card-name { font-family: 'Cairo', sans-serif; font-weight: 800; }
.srv-card:hover .srv-card-name { color: var(--card-color, var(--blanc)); }

/* Description */
.srv-card-desc {
    font-size: 0.82rem;
    color: #666;
    line-height: 1.7;
    font-weight: 300;
    flex: 1;
    position: relative; z-index: 1;
    transition: color 0.3s;
}
body.lang-ar .srv-card-desc { font-family: 'Cairo', sans-serif; font-size: 0.85rem; }
.srv-card:hover .srv-card-desc { color: #888; }

/* Lien bas */
.srv-card-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
    position: relative; z-index: 1;
    transition: color 0.3s, gap 0.25s;
}
body.lang-ar .srv-card-link { flex-direction: row-reverse; }
.srv-card:hover .srv-card-link {
    color: var(--card-color, var(--rouge));
    gap: 12px;
}
body.lang-ar .srv-card:hover .srv-card-link { gap: 12px; }

/* Ligne de couleur en bas de carte */
.srv-card-line {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--card-color, var(--rouge));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
body.lang-ar .srv-card-line { transform-origin: right; }
.srv-card:hover .srv-card-line { transform: scaleX(1); }

/* ── CTA ── */
.srv-cta-section { background: #0d0d0d; padding: 0 0 100px; }

/* ── Vide ── */
.srv-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #555;
}
.srv-empty-state span { font-size: 3.5rem; display: block; margin-bottom: 20px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .srv-hero-inner { grid-template-columns: 1fr; }
    .srv-hero-counters {
        flex-direction: row;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.07);
        padding-top: 28px;
    }
    .srv-counter-item { border-left: none; padding: 0 28px 0 0; }
    .srv-counter-item::before { display: none; }
    .srv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .srv-hero { padding: 110px 20px 60px; }
    .srv-grid { grid-template-columns: 1fr; }
    .srv-card { padding: 26px 22px; }
    .srv-filter-inner { padding: 0 20px; }
    .srv-grid-section { padding: 50px 0 70px; }
}
@media (max-width: 480px) {
    .srv-hero-counters { flex-direction: column; gap: 16px; }
    .srv-hero-title { font-size: clamp(2.8rem, 12vw, 4rem); }
}
/* ============================================
   MON PROFIL — RDVCAR
   ============================================ */

.container-profil{
    width: var(--container);
    max-width: 900px;
    margin: 25px auto;
}

/* titre */
.profil-title{
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--blanc);
}

/* carte profil */

.card-profil{
    background: var(--gris-fonce);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* zone photo */

.profil-photo{
    text-align:center;
    margin-bottom:5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profil-photo img{
    width:110px;
    height:110px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--rouge);
}

/* grille formulaire */

.form-profil{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
}

/* champs */

.form-profil label{
    font-size:13px;
    color:var(--texte-muted);
    margin-bottom:6px;
    display:block;
}

.form-profil input{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--gris-clair);
    color:var(--gris-fonce);
    font-size:14px;
    transition:var(--transition);
}

.form-profil input:focus{
    outline:none;
    border-color:var(--rouge);
    box-shadow:0 0 0 2px rgba(232,32,42,0.2);
}

/* champ non modifiable */

.form-profil input:disabled{
    opacity:0.6;
}

/* bouton */

.btn-profil{
    grid-column:1 / -1;
    margin-top:20px;

    background:var(--rouge);
    color:var(--blanc);

    border:none;
    padding:14px;
    border-radius:10px;

    font-size:15px;
    font-weight:600;

    cursor:pointer;
    transition:var(--transition);
}

.btn-profil:hover{
    background:var(--rouge-dark);
    transform:translateY(-2px);
}

/* messages */

.alert{
    padding:14px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:14px;
}

.alert.success{
    background:rgba(34,197,94,0.15);
    border:1px solid rgba(34,197,94,0.3);
    color:#4ade80;
}

.alert.error{
    background:rgba(239,68,68,0.15);
    border:1px solid rgba(239,68,68,0.3);
    color:#f87171;
}

/* responsive */

@media (max-width:700px){

    .form-profil{
        grid-template-columns:1fr;
    }
    
    .card-profil{
        padding:25px;
    }

}
/* upload bouton */

.btn-upload{
    display:inline-block;
    margin-top:10px;
    padding:8px 14px;
    background:var(--gris-input);
    color:var(--blanc);
    border-radius:8px;
    font-size:13px;
    cursor:pointer;
    transition:var(--transition);
}

.btn-upload:hover{
    background:var(--rouge);
}

/* preview image animation */

.profil-photo img{
    transition:0.3s;
}

.profil-photo img:hover{
    transform:scale(1.05);
}
/* modal crop */

.crop-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.crop-container{
    width:90%;
    max-width:400px;
    background:#111;
    padding:20px;
    border-radius:14px;
}

.crop-container img{
    max-width:100%;
}

.crop-actions{
    display:flex;
    justify-content:space-between;
    margin-top:15px;
}

.btn-cancel{
    background:#444;
    color:#fff;
    border:none;
    padding:10px;
    border-radius:8px;
    cursor:pointer;
}
/* ============================================
   MON PROFIL — RDVCAR
   ============================================ */
.mg-wrapper{min-height:100vh;background:var(--noir);padding-top:80px;}

/* Hero */
.mg-hero{background:linear-gradient(135deg,#1a1a1a 0%,#111 100%);border-bottom:1px solid rgba(255,255,255,.06);padding:48px var(--pad-x) 36px;}
.mg-hero-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.mg-hero h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:var(--blanc);margin:0 0 6px;}
.mg-hero p{color:var(--texte-muted);font-size:.9rem;margin:0;}
.mg-stats-row{display:flex;gap:14px;flex-wrap:wrap;}
.mg-stat-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 20px;text-align:center;min-width:105px;}
.mg-stat-card .val{font-size:1.5rem;font-weight:800;color:var(--rouge);}
.mg-stat-card .lbl{font-size:.68rem;color:var(--texte-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px;}

/* Layout */
.mg-main{max-width:1100px;margin:40px auto;padding:0 var(--pad-x);display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start;}

/* Sidebar */
.mg-sidebar{position:sticky;top:100px;}
.mg-tab-nav{background:var(--gris-fonce);border:1px solid rgba(255,255,255,.07);border-radius:14px;list-style:none;padding:8px;margin:0;}
.mg-tab-nav li a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;color:var(--texte-muted);font-size:.875rem;font-weight:600;transition:all .2s;text-decoration:none;cursor:pointer;}
.mg-tab-nav li a:hover{background:rgba(255,255,255,.05);color:var(--blanc);}
.mg-tab-nav li a.active{background:var(--rouge);color:var(--blanc);}

/* Panels */
.mg-panel{display:none;}
.mg-panel.active{display:block;}

/* Card */
.mg-card{background:var(--gris-fonce);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);padding:30px 32px;margin-bottom:20px;}
.mg-card-title{font-size:1rem;font-weight:700;color:var(--blanc);margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px;}

/* Form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-grid .full{grid-column:1/-1;}
.form-group{display:flex;flex-direction:column;gap:7px;}
.form-group label{font-size:.78rem;font-weight:600;color:var(--texte-muted);text-transform:uppercase;letter-spacing:.8px;}
.form-group input,.form-group select{background:var(--gris-input);border:1px solid rgba(255,255,255,.1);border-radius:10px;color:var(--blanc);padding:12px 14px;font-size:.9rem;font-family:inherit;transition:border-color .2s;outline:none;width:100%;box-sizing:border-box;}
.form-group input:focus,.form-group select:focus{border-color:var(--rouge);}
.form-group select option{background:#1a1a1a;}

/* Flash */
.flash{border-radius:12px;padding:14px 18px;font-size:.875rem;font-weight:600;margin-bottom:20px;line-height:1.5;}
.flash.success{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#4ade80;}
.flash.error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#f87171;}

/* Btn save */
.btn-save{background:var(--rouge);color:#fff;border:none;border-radius:10px;padding:14px 32px;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .2s,transform .1s;width:100%;margin-top:8px;}
.btn-save:hover{background:var(--rouge-dark);}
.btn-save:active{transform:scale(.98);}
.btn-save:disabled{opacity:.5;cursor:not-allowed;}

/* Photos */
.photos-hint{font-size:.8rem;color:var(--texte-muted);margin-bottom:22px;line-height:1.6;}
.photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:16px;}
.photo-slot{border:2px dashed rgba(255,255,255,.12);border-radius:12px;overflow:hidden;position:relative;aspect-ratio:4/3;background:rgba(255,255,255,.03);transition:border-color .2s;}
.photo-slot:hover{border-color:var(--rouge);}
.photo-slot.has-photo{border-style:solid;border-color:rgba(255,255,255,.15);}
.photo-slot img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-slot-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;color:var(--texte-muted);cursor:pointer;}
.photo-slot-empty .upload-icon{font-size:2rem;}
.photo-slot-empty span{font-size:.75rem;}
.photo-overlay{position:absolute;inset:0;background:rgba(0,0,0,.65);opacity:0;transition:opacity .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.photo-slot:hover .photo-overlay{opacity:1;}
.photo-num{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:20px;}
body.lang-ar .photo-num{left:auto;right:8px;}
.btn-photo-change,.btn-photo-delete{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:none;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;}
.btn-photo-change{background:var(--rouge);color:#fff;}
.btn-photo-delete{background:rgba(255,255,255,.1);color:#fff;}
.btn-photo-delete:hover{background:rgba(239,68,68,.3);}
.photo-file-input{display:none;}

/* Services */
.srv-hint{font-size:.82rem;color:var(--texte-muted);margin-bottom:20px;line-height:1.6;}
.pro-services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px;margin-bottom:6px;}
.pro-service-label{cursor:pointer;}
.pro-service-label input[type="checkbox"]{display:none;}
.pro-service-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.08);border-radius:14px;padding:18px 12px;transition:all .2s;text-align:center;}
.pro-service-card img{width:44px;height:44px;object-fit:contain;filter:brightness(.7);transition:filter .2s;}
.pro-service-name{font-size:.75rem;font-weight:600;color:var(--texte-muted);transition:color .2s;line-height:1.3;}
.pro-service-label:hover .pro-service-card{border-color:rgba(232,32,42,.4);background:rgba(232,32,42,.06);}
.pro-service-label:hover .pro-service-card img{filter:brightness(1);}
.pro-service-label:hover .pro-service-name{color:var(--blanc);}
.pro-service-label input:checked+.pro-service-card{border-color:var(--rouge);background:rgba(232,32,42,.12);}
.pro-service-label input:checked+.pro-service-card img{filter:brightness(1);}
.pro-service-label input:checked+.pro-service-card .pro-service-name{color:var(--blanc);}
.pro-domicile-wrap{display:flex;align-items:center;gap:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px 20px;margin-top:20px;flex-wrap:wrap;flex-direction: column;}
.pro-domicile-label{font-size:.82rem;color:var(--texte-muted);flex:1;min-width:180px;line-height:1.5;}
.pro-domicile-cardModif{flex-shrink:0;}
.pro-domicile-cardModif .pro-service-card{flex-direction:row;padding:12px 20px;border-radius:12px;gap:12px;min-width:155px;}
.pro-domicile-cardModif .pro-service-card img{width:32px;height:32px;}
.pro-domicile-cardModif .pro-service-name{font-size:.85rem;white-space:nowrap;}

/* Horaires */
.pro-horaires-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.pro-copy-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:var(--blanc);font-size:.78rem;font-weight:600;padding:8px 16px;cursor:pointer;transition:background .2s;}
.pro-copy-btn:hover{background:rgba(255,255,255,.1);}
.pro-jour{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;margin-bottom:10px;overflow:hidden;transition:border-color .2s,background .2s;}
.pro-jour.active{border-color:rgba(232,32,42,.3);background:rgba(232,32,42,.04);}
.pro-jour-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;user-select:none;}
.pro-jour-name{font-size:.9rem;font-weight:700;color:var(--blanc);}
.pro-switch{width:44px;height:24px;background:rgba(255,255,255,.12);border-radius:24px;position:relative;cursor:pointer;transition:background .25s;flex-shrink:0;}
.pro-switch::after{content:'';position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:4px;left:4px;transition:transform .25s;}
.pro-switch.active{background:var(--rouge);}
.pro-switch.active::after{transform:translateX(20px);}
.pro-jour-controls{display:none;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 18px 14px;}
.pro-jour.active .pro-jour-controls{display:grid;}
.pro-time-group{display:flex;flex-direction:column;gap:6px;}
.pro-time-group label{font-size:.7rem;font-weight:600;color:var(--texte-muted);text-transform:uppercase;letter-spacing:.7px;}
.pro-time-group input[type="time"]{background:var(--gris-input);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--blanc);padding:9px 10px;font-size:.85rem;font-family:inherit;outline:none;width:100%;box-sizing:border-box;transition:border-color .2s;}
.pro-time-group input[type="time"]:focus{border-color:var(--rouge);}
.pro-time-group input[type="time"]:disabled{opacity:.3;}
.pro-jour-footer{display:none;align-items:center;gap:10px;padding:10px 18px 14px;border-top:1px solid rgba(255,255,255,.06);}
.pro-jour.active .pro-jour-footer{display:flex;}
.pro-jour-footer label{font-size:.8rem;color:var(--texte-muted);cursor:pointer;}

/* Carte */
.mg-map-wrap{margin-top:24px;}
.mg-map-subtitle{font-size:.78rem;font-weight:700;color:var(--blanc);margin:0 0 6px;display:flex;align-items:center;gap:8px;}
.mg-map-hint{font-size:.8rem;color:var(--texte-muted);margin:0 0 12px;line-height:1.6;}
#mg-map{width:100%;height:360px;border-radius:12px;border:1px solid rgba(255,255,255,.1);z-index:1;}
.pro-map-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
    color:var(--blanc);border-radius:9px;padding:10px 18px;
    font-size:.82rem;font-weight:600;cursor:pointer;transition:background .2s;
    margin-top:12px;font-family:inherit;
}
.pro-map-btn:hover{background:rgba(255,255,255,.14);}
.mg-coords{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    border-radius:10px;padding:10px 16px;margin-top:12px;
}
.mg-coords span{font-size:.72rem;color:var(--texte-muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px;}
.mg-coords code{font-size:.88rem;color:var(--blanc);font-family:monospace;background:rgba(255,255,255,.07);padding:3px 9px;border-radius:6px;}
.mg-coords-sep{color:rgba(255,255,255,.2);margin:0 2px;}

/* Responsive */
@media(max-width:900px){
    .mg-main{grid-template-columns:1fr;padding:0 20px;}
    .mg-sidebar{position:static;}
    .mg-tab-nav{display:flex;flex-wrap:wrap;gap:4px;}
    .mg-hero{padding:40px 20px 28px;}
    .mg-hero-inner{flex-direction:column;align-items:flex-start;}
    .form-grid{grid-template-columns:1fr;}
    .form-grid .full{grid-column:1;}
    .pro-jour-controls{grid-template-columns:1fr 1fr;}
    #mg-map{height:280px;}
}
@media(max-width:500px){
    .photos-grid{grid-template-columns:repeat(2,1fr);}
    .pro-services-grid{grid-template-columns:repeat(3,1fr);}
}

/* RTL */
body.lang-ar .form-group label{text-align:right;}
body.lang-ar .mg-card-title{flex-direction:row-reverse;}
body.lang-ar .pro-domicile-wrap{flex-direction:row-reverse;}
body.lang-ar .pro-horaires-header{flex-direction:row-reverse;}
body.lang-ar .pro-jour-top{flex-direction:row-reverse;}
body.lang-ar .pro-switch::after{left:auto;right:4px;}
body.lang-ar .pro-switch.active::after{transform:translateX(-20px);}

/* ── Page mes-reservations ── */
.resa-page {
    min-height: 100vh;
    background: var(--noir);
    padding: 100px var(--pad-x) 60px;
}
.resa-header {
    max-width: 900px;
    margin: 0 auto 40px;
}
.resa-header h1 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
    color: var(--blanc);
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}
.resa-header p {
    font-size: 0.9rem;
    color: var(--texte-muted);
}
.resa-header h1 span {
    color: var(--rouge);
}

/* ── Tableau ── */
.resa-table-wrap {
    max-width: 900px;
    margin: 0 auto;
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--gris-fonce);
    max-height: 65vh;
}
table.resa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
table.resa-table thead tr {
    background: var(--gris-moyen);
    border-bottom: 1px solid var(--border);
}
table.resa-table thead th {
    padding: 14px 18px;
    text-align: <?= $isAr ? 'right' : 'left' ?>;
    color: var(--texte-muted);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}
table.resa-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}
table.resa-table tbody tr:last-child {
    border-bottom: none;
}
table.resa-table tbody tr:hover {
    background: rgba(255,255,255,0.03);
}
table.resa-table tbody td {
    padding: 16px 18px;
    color: var(--blanc);
    vertical-align: middle;
    text-align: center;
}

/* ── Cellule service ── */
.resa-service {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.resa-service-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(249,115,22,0.12);
    border: 1px solid rgba(249,115,22,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.resa-service-name {
    font-weight: 600;
    color: var(--blanc);
    font-size: 0.88rem;
}
.resa-garage-name {
    font-size: 0.78rem;
    color: var(--texte-muted);
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Date/Heure ── */
.resa-date {
    font-weight: 600;
    color: var(--blanc);
}
.resa-heure {
    font-size: 0.78rem;
    color: var(--texte-muted);
    margin-top: 2px;
}

/* ── Badges statut ── */
.resa-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.resa-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}
.badge-attente {
    background: rgba(234,179,8,0.12);
    color: #facc15;
    border: 1px solid rgba(234,179,8,0.3);
}
.badge-confirme {
    background: rgba(34,197,94,0.12);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}
.badge-annule {
    background: rgba(239,68,68,0.12);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.3);
}
.badge-termine {
    background: rgba(148,163,184,0.1);
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,0.2);
}

/* ── Bouton annuler ── */
.btn-resa-annuler {
    background: transparent;
    border: 1px solid rgba(239,68,68,0.4);
    color: #f87171;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.btn-resa-annuler:hover {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.7);
}
.btn-resa-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── État vide ── */
.resa-empty {
    max-width: 900px;
    margin: 60px auto;
    text-align: center;
    padding: 60px 30px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--gris-fonce);
}
.resa-empty-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    display: block;
    opacity: 0.6;
}
.resa-empty h2 {
    font-size: 1.2rem;
    color: var(--blanc);
    margin-bottom: 10px;
}
.resa-empty p {
    font-size: 0.88rem;
    color: var(--texte-muted);
    margin-bottom: 28px;
}
.resa-empty .btn-primary {
    display: inline-block;
    background: var(--rouge);
    color: var(--blanc);
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition);
}
.resa-empty .btn-primary:hover {
    background: var(--rouge-dark);
    transform: translateY(-2px);
}

/* ── Modal annulation ── */
.pg-modal-overlayCenter {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
}
.pg-modal-overlayCenter.open {
    display: flex;
}
.pg-modalCenter {
    background: var(--gris-fonce);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 28px 28px;
    width: 90%;
    max-width: 420px;
    position: relative;
    animation: modalIn 0.25s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.94) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.pg-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.pg-modal-handle {
    width: 38px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    cursor: pointer;
}
.Xclose {
    font-size: 0.85rem;
    color: var(--texte-muted);
    cursor: pointer;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    transition: var(--transition);
}
.Xclose:hover { color: var(--blanc); background: rgba(255,255,255,0.06); }
.pg-modal-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--blanc);
    margin-bottom: 8px;
}
.pg-modal-sub {
    font-size: 0.85rem;
    color: var(--texte-muted);
    line-height: 1.6;
    margin-bottom: 22px;
}
.pg-modal-detail {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 24px;
}
.pg-modal-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.83rem;
    padding: 5px 0;
    gap: 12px;
}
.pg-modal-detail-row:not(:last-child) {
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 5px;
}
.pg-modal-detail-label {
    color: var(--texte-muted);
    flex-shrink: 0;
}
.pg-modal-detail-val {
    color: var(--blanc);
    font-weight: 600;
    text-align: <?= $isAr ? 'left' : 'right' ?>;
}
.pg-modal-btn {
    display: flex;
    gap: 12px;
}
.pg-modal-btn button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}
.btn-modal-confirm {
    background: var(--rouge);
    color: var(--blanc);
}
.btn-modal-confirm:hover {
    background: var(--rouge-dark);
}
.btn-modal-cancel {
    background: transparent;
    color: var(--texte-muted);
    border: 1px solid var(--border) !important;
}
.btn-modal-cancel:hover {
    background: rgba(255,255,255,0.05);
    color: var(--blanc);
}

/* ── Toast ── */
.resa-toast {
    position: fixed;
    bottom: 28px;
    <?= $isAr ? 'right' : 'left' ?>: 50%;
    transform: translateX(<?= $isAr ? '50%' : '-50%' ?>);
    background: var(--gris-moyen);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blanc);
    z-index: 9999;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}
.resa-toast.show {
    opacity: 1;
}
.resa-toast.toast-ok  { border-color: rgba(34,197,94,0.4);  color: #4ade80; }
.resa-toast.toast-err { border-color: rgba(239,68,68,0.4);  color: #f87171; }

/* ── Responsive ── */
@media (max-width: 700px) {
    .resa-page { padding: 90px 16px 50px; }
    table.resa-table thead th:nth-child(3),
    table.resa-table tbody td:nth-child(3) { display: none; }
    .pg-modal-btn { flex-direction: column; }
}
/* ── Lien garage ── */
.resa-garage-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.resa-garage-link:hover {
    color: var(--color-primary, #e63946);
    text-decoration: underline;
}

/* ── Icône localisation ── */
.resa-loc-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 5px;
    border-radius: 6px;
    color: var(--color-primary, #e63946);
    transition: background 0.18s, transform 0.15s;
    vertical-align: middle;
    margin-top: 3px;
}
.resa-loc-btn:hover {
    background: rgba(230, 57, 70, 0.10);
    transform: scale(1.12);
}
.resa-loc-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.resa-loc-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Modal carte ── */
#modal-carte {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.65);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#modal-carte.open {
    display: flex;
}
.carte-modal-box {
    background: #1a1a1a;
    border-radius: 18px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: carteSlideIn 0.28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes carteSlideIn {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.carte-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.carte-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.carte-modal-close {
    background: rgba(255,255,255,0.08);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s;
}
.carte-modal-close:hover {
    background: rgba(255,255,255,0.18);
}
#carte-leaflet {
    width: 100%;
    height: 320px;
}

/* Marqueur personnalise Leaflet */
.carte-custom-marker { background: transparent; border: none; }
.carte-custom-marker svg { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.35)); }

/* ── Bouton "Donner un avis" ─────────────────────── */
.btn-resa-noter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    background: var(--muted);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
}
.btn-resa-noter:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ── Badge "Avis envoyé" ─────────────────────────── */
.badge-note-ok {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* ── Étoiles de notation ─────────────────────────── */
.noter-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 6px;
}
.star-btn {
    background: none;
    border: none;
    font-size: 2.2rem;
    color: #4b5563;
    cursor: pointer;
    transition: color 0.15s, transform 0.12s;
    line-height: 1;
    padding: 0 2px;
}
.star-btn.hover,
.star-btn.active {
    color: #f59e0b;
    transform: scale(1.18);
}

/* ── Label de la note sélectionnée ──────────────── */
.noter-note-label {
    text-align: center;
    font-size: 0.85rem;
    color: #9ca3af;
    min-height: 20px;
    margin-bottom: 14px;
}

/* ── Zone de commentaire ─────────────────────────── */
.noter-textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: var(--text-primary, #f3f4f6);
    font-size: 0.88rem;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.noter-textarea:focus {
    outline: none;
    border-color: #f59e0b;
}
.noter-textarea::placeholder {
    color: #6b7280;
}

/* ── Compteur de caractères ──────────────────────── */
.noter-char-count {
    text-align: right;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 4px;
    margin-bottom: 10px;
}

/* ── Mention anonymat ────────────────────────────── */
.noter-anonymous-info {
    font-size: 0.78rem;
    color: #6b7280;
    text-align: center;
    margin: 4px 0 16px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}
/* ============================================
   PLANNING - variables & layout
   N'ecrase pas rdvcar_all.css (prefixe pl-)
============================================ */
:root {
    --pl-bg:         #0e0e0e;
    --pl-surface:    #161616;
    --pl-card:       #1c1c1c;
    --pl-border:     #2a2a2a;
    --pl-border2:    #333;
    --pl-text:       #e8e8e8;
    --pl-muted:      #777;
    --pl-amber:      #f59e0b;
    --pl-amber-dim:  rgba(245,158,11,.12);
    --pl-red:        #e63946;
    --pl-red-dim:    rgba(230,57,70,.12);
    --pl-green:      #22c55e;
    --pl-green-dim:  rgba(34,197,94,.12);
    --pl-bloque:     #8b5cf6;
    --pl-bloque-dim: rgba(139,92,246,.12);
    --pl-radius:     10px;
    --pl-font:       'DM Sans', sans-serif;
    --slot-h:        72px;
}

.pl-page {
    max-width: 1280px;
    margin: 50px auto;
    padding: 1.5rem 1.25rem 4rem;
}

/* Header */
.pl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--pl-border);
}
.pl-header-left h1 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--pl-text);
}
.pl-header-left h1 span { color: var(--pl-amber); }
.pl-header-left p {
    font-size: .82rem;
    color: var(--pl-muted);
    margin-top: .3rem;
    font-family: var(--pl-font);
}
.pl-header-right { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Stats */
.pl-stats { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.pl-stat {
    background: var(--pl-card);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    padding: .9rem 1.25rem;
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: center;
    gap: .85rem;
}
.pl-stat-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.pl-stat-icon.amber { background: var(--pl-amber-dim); }
.pl-stat-icon.green { background: var(--pl-green-dim); }
.pl-stat-val {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pl-text);
}
.pl-stat-label { font-size: .75rem; color: var(--pl-muted); margin-top: .2rem; font-family: var(--pl-font); }

/* Legende */
.pl-legend { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.25rem; align-items: center; }
.pl-legend-item { display: flex; align-items: center; gap: .4rem; font-size: .73rem; color: var(--pl-muted); font-family: var(--pl-font); }
.pl-legend-dot  { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Grille */
.pl-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pl-grid-wrap::-webkit-scrollbar { height: 5px; }
.pl-grid-wrap::-webkit-scrollbar-thumb { background: var(--pl-border2); border-radius: 3px; }
.pl-grid {
    display: grid;
    grid-template-columns: 64px repeat(3, 1fr);
    min-width: 620px;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    overflow: hidden;
}
.pl-col-header {
    background: var(--pl-card);
    padding: .9rem .5rem;
    text-align: center;
    border-bottom: 1px solid var(--pl-border);
    border-right: 1px solid var(--pl-border);
    position: sticky; top: 0; z-index: 10;
}
.pl-col-header:last-child { border-right: none; }
.pl-col-header-time {
    background: var(--pl-card);
    border-bottom: 1px solid var(--pl-border);
    border-right: 1px solid var(--pl-border);
    position: sticky; top: 0; z-index: 10;
}
.pl-day-label {
    font-size: .95rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--pl-text);
}
.pl-day-date { font-size: .72rem; color: var(--pl-muted); margin-top: .2rem; font-family: var(--pl-font); }
.pl-day-today .pl-day-label { color: var(--pl-amber); }
.pl-day-today .pl-day-date  { color: var(--pl-amber); opacity: .7; }
.pl-day-closed { font-size: .67rem; color: var(--pl-red); margin-top: .3rem; text-transform: uppercase; letter-spacing: .05em; font-family: var(--pl-font); }

/* Cellules */
.pl-time-cell {
    height: var(--slot-h);
    display: flex; align-items: center; justify-content: center;
    font-size: .67rem; color: var(--pl-muted);
    border-bottom: 1px solid var(--pl-border);
    border-right: 1px solid var(--pl-border);
    background: var(--pl-surface);
    user-select: none; position: relative;
    font-family: var(--pl-font);
}
.pl-slot {
    height: var(--slot-h);
    border-bottom: 1px solid var(--pl-border);
    border-right: 1px solid var(--pl-border);
    padding: 4px 5px; position: relative;
}
.pl-slot:last-child { border-right: none; }
.pl-slot-empty { cursor: pointer; }
.pl-slot-empty:hover { background: var(--pl-amber-dim); }
.pl-slot-empty:hover .pl-slot-add { opacity: 1; transform: scale(1); }
.pl-slot-add {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .62rem; color: var(--pl-amber);
    opacity: 0; transform: scale(.85);
    transition: opacity .15s, transform .15s;
    pointer-events: none; text-transform: uppercase; font-weight: 600;
    font-family: var(--pl-font);
}
.pl-slot-off {
    background: repeating-linear-gradient(
        135deg, transparent, transparent 4px,
        rgba(255,255,255,.018) 4px, rgba(255,255,255,.018) 8px
    );
    cursor: default;
}

/* Cartes resa */
.pl-card-resa {
    height: 100%; border-radius: 7px;
    padding: 5px 7px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 2px;
    cursor: pointer;
    transition: filter .15s, transform .1s;
    overflow: hidden;
}
.pl-card-resa:hover { filter: brightness(1.1); transform: scale(1.01); z-index: 5; }
.pl-card-resa.s-attente  { background: var(--pl-amber-dim);  border: 1px solid rgba(245,158,11,.25); }
.pl-card-resa.s-confirmee{ background: var(--pl-green-dim);   border: 1px solid rgba(34,197,94,.25);  }
.pl-card-resa.s-annule   { background: var(--pl-red-dim);     border: 1px solid rgba(230,57,70,.25);  opacity: .6; }
.pl-card-resa.s-bloque   { background: var(--pl-bloque-dim);  border: 1px solid rgba(139,92,246,.25); }
.pl-card-resa.s-decale   { background: rgba(251,191,36,.1);   border: 1px solid rgba(251,191,36,.3);  border-left: 3px solid #fbbf24; }
.pl-card-client {
    font-size: .7rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--pl-text); font-family: var(--pl-font);
}
.pl-card-service {
    font-size: .6rem; color: var(--pl-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--pl-font);
}
.pl-card-badges { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 1px; }
.pl-badge {
    font-size: .53rem; padding: 1px 5px; border-radius: 20px;
    font-weight: 700; text-transform: uppercase; white-space: nowrap;
    font-family: var(--pl-font);
}
.sg-attente  { background: #ccc;                    color: var(--muted); }
.sg-confirm  { background: rgba(34,197,94,.2);      color: #4ade80; }
.sg-annule   { background: rgba(230,57,70,.2);      color: #f87171; }
.sg-decale   { background: rgba(251,191,36,.2);     color: #fde68a; }
.sg-bloque   { background: rgba(139,92,246,.2);     color: #c4b5fd; }

/* Ligne heure actuelle */
.pl-now-line {
    position: absolute; left: 0; right: 0; height: 2px;
    background: var(--pl-red); z-index: 4; pointer-events: none;
}
.pl-now-line::before {
    content: ''; position: absolute;
    left: -4px; top: -3px; width: 8px; height: 8px;
    background: var(--pl-red); border-radius: 50%;
}

/* ============================================
   MODALS (prefixe pl- evite conflit pg-modal)
============================================ */
.pl-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(4px);
    z-index: 9000;
    align-items: center; justify-content: center;
    padding: 1rem;
}
.pl-modal-overlay.open { display: flex; }
.pl-modal {
    background: var(--pl-card);
    border: 1px solid var(--pl-border2);
    border-radius: 14px;
    width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
    padding: 0;
    box-shadow: 0 24px 64px rgba(0,0,0,.65);
    animation: plModalIn .2s ease;
    font-family: var(--pl-font);
}
@keyframes plModalIn {
    from { opacity:0; transform: translateY(16px) scale(.97); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}
.pl-modal-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--pl-border);
}
.pl-modal-top h3 { font-size: 1.05rem; font-weight: 700; color: var(--pl-text); }
.pl-modal-close {
    background: none; border: none; color: var(--pl-muted);
    font-size: 1.2rem; cursor: pointer;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: background .15s, color .15s;
}
.pl-modal-close:hover { background: var(--pl-border); color: var(--pl-text); }
.pl-modal-body { padding: 1.25rem 1.5rem; }

/* Infos resa */
.pl-resa-info {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: 8px; padding: .9rem 1rem; margin-bottom: 1.25rem;
}
.pl-resa-info-row {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .3rem 0; font-size: .83rem;
}
.pl-resa-info-row:not(:last-child) { border-bottom: 1px solid var(--pl-border); }
.pl-resa-info-lbl { color: var(--pl-muted); font-size: .73rem; min-width: 80px; flex-shrink: 0; }
.pl-resa-info-val { font-weight: 500; color: var(--pl-text); }

/* Actions */
.pl-modal-actions { display: flex; flex-direction: column; gap: .65rem; }
.pl-action-btn {
    width: 100%; padding: .78rem 1rem; border-radius: 8px; border: none;
    font-family: var(--pl-font); font-size: .85rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    transition: filter .15s, transform .1s;
}
.pl-action-btn:hover  { filter: brightness(1.12); transform: translateY(-1px); }
.pl-action-btn:active { transform: translateY(0); }
.pl-action-btn.confirm { background: var(--pl-green);  color: #000; }
.pl-action-btn.cancel  { background: var(--pl-red);    color: #fff; }
.pl-action-btn.delay   { background: var(--pl-amber);  color: #000; }
.pl-action-btn.unblock { background: var(--pl-bloque); color: #fff; }
.pl-action-btn.ghost   { background: var(--pl-surface); color: var(--pl-muted); border: 1px solid var(--pl-border2); }
.pl-action-btn.blk     { background: var(--pl-bloque); color: #fff; }

/* Picker delai */
.pl-delay-row { display: none; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.pl-delay-row.open { display: flex; }
.pl-delay-chip {
    flex: 1; min-width: 58px; padding: .5rem;
    border-radius: 7px; border: 1px solid var(--pl-border2);
    background: var(--pl-surface); color: var(--pl-text);
    font-size: .78rem; font-weight: 600; cursor: pointer; text-align: center;
    transition: border-color .15s, background .15s; font-family: var(--pl-font);
}
.pl-delay-chip:hover,
.pl-delay-chip.selected { border-color: var(--pl-amber); background: var(--pl-amber-dim); color: var(--pl-amber); }
.pl-delay-confirm {
    display: none; width: 100%; padding: .72rem; border-radius: 8px; border: none;
    background: var(--pl-amber); color: #000; font-weight: 700; font-size: .85rem;
    cursor: pointer; margin-top: .25rem; font-family: var(--pl-font);
    transition: filter .15s;
}
.pl-delay-confirm:hover { filter: brightness(1.1); }
.pl-delay-confirm.open { display: block; }

/* Champs modal bloquer */
.pl-field { margin-bottom: 1rem; }
.pl-field label {
    display: block; font-size: .73rem; color: var(--pl-muted);
    margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .05em;
    font-family: var(--pl-font);
}
.pl-field input,
.pl-field select {
    width: 100%; padding: .7rem .85rem;
    border-radius: 8px; border: 1px solid var(--pl-border2);
    background: var(--pl-surface); color: var(--pl-text);
    font-family: var(--pl-font); font-size: .85rem; outline: none;
    transition: border-color .15s;
}
.pl-field input:focus,
.pl-field select:focus { border-color: var(--pl-amber); }
.pl-field select option { background: var(--pl-card); color: var(--pl-text); }

/* Boutons header page */
.pl-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .65rem 1.1rem; border-radius: 8px; border: none;
    font-family: var(--pl-font); font-size: .83rem; font-weight: 600;
    cursor: pointer; transition: filter .15s, transform .1s; white-space: nowrap;
    text-decoration: none;
}
.pl-btn:hover  { filter: brightness(1.1); transform: translateY(-1px); }
.pl-btn.primary { background: var(--pl-amber); color: #000; }
.pl-btn.ghost   { background: var(--pl-card); border: 1px solid var(--pl-border2); color: var(--pl-text); }

/* Toast */
.pl-toast {
    position: fixed; bottom: 1.5rem; left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--pl-card); border: 1px solid var(--pl-border2);
    color: var(--pl-text); padding: .75rem 1.4rem;
    border-radius: 100px; font-size: .83rem; font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    opacity: 0; transition: opacity .25s, transform .25s;
    z-index: 99999; pointer-events: none; white-space: nowrap;
    font-family: var(--pl-font);
}
.pl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pl-toast.ok  { border-color: var(--pl-green); color: var(--pl-green); }
.pl-toast.err { border-color: var(--pl-red);   color: var(--pl-red);   }

@media (max-width: 640px) {
    .pl-header-left h1 { font-size: 1.3rem; }
    .pl-stat { min-width: 100px; padding: .7rem .9rem; }
    .pl-stat-val { font-size: 1.2rem; }
}

.pg-hero-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.pg-hero-track {
    display: flex;
    transition: transform 0.4s ease;
    width: 100%;
}

.pg-hero-track img {
    min-width: 100%;
    width: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

/* =============================================
   mentions-legales.css — styles spécifiques
   Accent : --rouge (#E8202A) — thème sombre
   ============================================= */

/* ── Hero ── */
.ml-hero {
    padding: 130px var(--pad-x) 0;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}
.ml-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 50% 60% at 80% 30%, rgba(232,32,42,0.07) 0%, transparent 65%),
        radial-gradient(ellipse 30% 40% at 10% 80%, rgba(232,32,42,0.04) 0%, transparent 55%);
}
.ml-hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 55px 55px;
}
.ml-hero-inner {
    position: relative; z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
    padding-bottom: 56px;
}
.ml-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232,32,42,0.1);
    border: 1px solid rgba(232,32,42,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rouge);
    margin-bottom: 18px;
}
body.lang-ar .ml-hero-badge { letter-spacing: 0; }
.ml-hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #fff;
}
body.lang-ar .ml-hero-h1 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
}
.ml-hero-h1 .accent { color: var(--rouge); }
.ml-hero-meta {
    font-size: 0.8rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ml-hero-meta span { color: var(--rouge); font-weight: 600; }

/* ── Layout ── */
.ml-layout {
    max-width: var(--container);
    margin: 0 auto;
    padding: 60px var(--pad-x) 80px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 56px;
    align-items: start;
}
@media (max-width: 900px) {
    .ml-layout { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px 60px; }
    .ml-hero    { padding: 110px 24px 0; }
}

/* ── Sidebar TOC ── */
.ml-toc {
    position: sticky;
    top: 90px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 24px 20px;
}
.ml-toc-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--rouge);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.lang-ar .ml-toc-title { letter-spacing: 0; }
.ml-toc ol {
    list-style: none;
    counter-reset: toc-cnt;
    padding: 0; margin: 0;
}
.ml-toc ol li {
    counter-increment: toc-cnt;
    padding: 2px 0;
}
.ml-toc ol li a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.8rem;
    color: #777;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.ml-toc ol li a::before {
    content: counter(toc-cnt, decimal-leading-zero);
    font-size: 0.65rem;
    color: var(--rouge);
    font-weight: 700;
    flex-shrink: 0;
}
.ml-toc ol li a:hover,
.ml-toc ol li a.active {
    background: rgba(232,32,42,0.08);
    color: #fff;
}

/* ── Content ── */
.ml-content { min-width: 0; }

.ml-section {
    margin-bottom: 52px;
    padding-bottom: 52px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    opacity: 0;
    transform: translateY(18px);
    animation: mlFadeUp 0.5s ease forwards;
}
.ml-section:last-of-type { border-bottom: none; }
.ml-section:nth-child(1) { animation-delay: 0.05s; }
.ml-section:nth-child(2) { animation-delay: 0.10s; }
.ml-section:nth-child(3) { animation-delay: 0.15s; }
.ml-section:nth-child(4) { animation-delay: 0.20s; }
.ml-section:nth-child(5) { animation-delay: 0.25s; }
.ml-section:nth-child(6) { animation-delay: 0.30s; }
.ml-section:nth-child(7) { animation-delay: 0.35s; }
@keyframes mlFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

.ml-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}
body.lang-ar .ml-section-header { flex-direction: row-reverse; }

.ml-section-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: var(--rouge);
    letter-spacing: 1px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 6px;
}
.ml-section h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 1.5px;
    color: #fff;
    line-height: 1;
}
body.lang-ar .ml-section h2 {
    font-family: 'Cairo', sans-serif;
    letter-spacing: 0;
    font-weight: 900;
}
.ml-section p {
    font-size: 0.92rem;
    color: #999;
    line-height: 1.85;
    margin-bottom: 12px;
}
.ml-section p:last-child { margin-bottom: 0; }
.ml-section p strong { color: #ccc; font-weight: 600; }
.ml-section p .accent { color: var(--rouge); }
.placeholder {
    color: var(--rouge);
    font-style: italic;
    font-weight: 600;
    opacity: 0.85;
}

/* ── Info cards grid ── */
.ml-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 18px 0;
}
@media (max-width: 600px) { .ml-grid { grid-template-columns: 1fr; } }

.ml-card {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 0.2s;
}
.ml-card:hover { border-color: rgba(232,32,42,0.25); }
.ml-card strong {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 4px;
}
body.lang-ar .ml-card strong { letter-spacing: 0; }
.ml-card em {
    font-style: normal;
    font-size: 0.88rem;
    color: #888;
}

/* ── Ligne directeur (hors grid) ── */
.ml-director {
    font-size: 0.9rem;
    color: #777;
    margin-top: 6px;
}
.ml-director strong { color: #aaa; font-weight: 500; }

/* ──────────── ### Avis Garage ### ──────────── */
/* ── Note moyenne header ─────────────────────── */
.pg-rating-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 10px;
    cursor: pointer;
}
.pg-stars-display { display: flex; gap: 2px; }
.pg-star          { font-size: 1rem; color: #374151; line-height: 1; }
.pg-star.filled   { color: #f59e0b; }
.pg-rating-val {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f59e0b;
}
.pg-rating-count  { font-size: 0.78rem; color: #6b7280; }

/* ── Section avis ────────────────────────────── */
.pg-avis-moyenne {
    float: right;
    font-size: 0.85rem;
    font-weight: 700;
    color: #f59e0b;
    background: rgba(245,158,11,.12);
    padding: 2px 10px;
    border-radius: 20px;
}
.pg-avis-list   { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pg-avis-item {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 12px 14px;
}
.pg-avis-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.pg-avis-stars  { display: flex; gap: 2px; }
.pg-avis-date   { font-size: 0.73rem; color: #6b7280; }
.pg-avis-comment {
    font-size: 0.85rem;
    color: rgba(255,255,255,.65);
    margin: 0;
    line-height: 1.5;
}
.pl-action-btn.done   { background: rgba(34,197,94,.15); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.pl-action-btn.done:hover { background: rgba(34,197,94,.25); }
.pl-action-btn.absent { background: rgba(156,163,175,.12); color: #9ca3af; border: 1px solid rgba(156,163,175,.25); }
.pl-action-btn.absent:hover { background: rgba(156,163,175,.22); }
.pl-badge.sg-terminee { background: rgba(34,197,94,.2);   color: #22c55e; }
.pl-badge.sg-absent   { background: rgba(156,163,175,.15); color: #9ca3af; }

/* =============================================
   RDVCar – Bouton téléchargement APK
   À ajouter à la fin de rdvcar_all.css
   ============================================= */

/* ── Bouton navbar ── */
.btn-app-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: transparent;
    border: 1px solid var(--rouge);
    border-radius: 8px;
    color: var(--rouge);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap;
    cursor: pointer;
}
.btn-app-nav:hover {
    background: var(--rouge);
    color: var(--blanc);
}

/* ── Bouton footer ── */
.btn-app-footer {
    font-size: 0.82rem;
    padding: 9px 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

/* ── Description footer ── */
.footer-app-desc {
    font-size: 0.82rem;
    color: var(--texte-muted);
    margin-bottom: 14px;
    line-height: 1.6;
}

/* ── Mobile : bouton pleine largeur dans le menu ── */
@media (max-width: 768px) {
    .nav-mobile-only .btn-app-nav {
        width: 100%;
        justify-content: center;
        padding: 11px 18px;
    }
}

/* ── RTL arabe ── */
body.lang-ar .btn-app-nav,
body.lang-ar .btn-app-footer {
    font-family: 'Cairo', sans-serif;
}
body.lang-ar .footer-app-desc {
    font-family: 'Cairo', sans-serif;
    text-align: right;
}

@media (max-width: 768px) and (orientation: portrait) {
    table.resa-table tbody td {
        padding: 16px 10px;
    }

    table.resa-table thead th {
        padding: 14px 10px;
    }
    .pro-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ml-toc {
        position: unset;
    }
    .pg-status-badge {
        position: unset;
        margin: 10px 0;
    }
    .pg-layout {
        padding: 0 .75rem 1rem;
    }
    .section-pad {
        padding: 10px 0;
    }
    .cta-banner {
        margin-bottom: 55px;
    }
}