/* ============================================================
Pôle Moto Quad & SSV — Design system
3 pôles, 1 accent each: QUAD16 (rouge), EMX16 (jaune), R16 MOTO (bleu)
============================================================ */
/* Font loaded via in each page's (with
preconnect) instead of @import here — @import serializes the request
behind this whole file's download+parse, which delays first paint.
Only the weights actually used anywhere in this file/site (400/600/700/
800) are requested — trimmed from 500/900 which nothing used. */
:root{
--ink: #0b0b0c;
--ink-soft: #3a3a3d;
--muted: #6c6c72;
--line: #e4e3e0;
--line-soft: #edece9;
--paper: #ffffff;
--paper-alt: #f6f5f2;
--paper-sunk: #efeee9;
--quad: #d81f26; /* QUAD16 rouge */
--emx: #f2b705; /* EMX16 jaune */
--r16: #1548c9; /* R16 MOTO bleu */
--ok: #16794f;
--ok-bg: #e7f5ee;
--info: #1548c9;
--info-bg: #eaf0fe;
/* Liquid glass surfaces */
--glass: rgba(255,255,255,.55);
--glass-strong: rgba(255,255,255,.72);
--glass-border: rgba(255,255,255,.65);
--glass-blur: blur(28px) saturate(180%);
--glass-blur-sm: blur(16px) saturate(160%);
--glass-shadow: 0 1px 1px rgba(255,255,255,.6) inset, 0 8px 32px -12px rgba(20,20,40,.18), 0 1px 3px rgba(20,20,40,.06);
--glass-shadow-pop: 0 1px 1px rgba(255,255,255,.7) inset, 0 24px 64px -20px rgba(20,20,40,.32);
--radius-lg: 34px;
--radius-md: 24px;
--radius-sm: 16px;
/* Product surfaces (vehicle cards, gallery, spec panels) use a tighter
radius than the editorial blocks: 34px reads soft/lifestyle, which
fights the mechanical subject. */
--radius-card: 20px;
/* Height of the fixed bottom CTA bar. Everything that has to sit clear
of it (body padding, compare badge, cookie banner) reads this instead
of repeating a magic number that then drifts. */
--cta-bar-h: 64px;
--shadow-card: 0 1px 1px rgba(255,255,255,.6) inset, 0 12px 32px -18px rgba(11,11,12,.18);
--shadow-pop: 0 20px 60px -20px rgba(11,11,12,.35);
--maxw: 1280px;
--font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-display: 'Manrope', 'Inter', -apple-system, sans-serif;
/* ---------------- Système de mouvement ----------------
Un vocabulaire commun pour toutes les animations du site, plutôt que
des durées écrites au cas par cas — on en comptait déjà dix valeurs
différentes (.1s, .12s, .15s, .18s, .2s, .22s, .25s, .35s, .7s), ce
qui donne une interface où rien ne bouge tout à fait à la même
vitesse. Trois durées suffisent à couvrir l'essentiel.
La courbe --ease-out est celle déjà employée dans le projet : une
sortie très amortie, qui donne l'impression que l'élément se pose
plutôt qu'il ne s'arrête. C'est ce qui distingue un mouvement de
qualité d'une simple transition linéaire. */
--dur-1: 150ms; /* couleur, ombre, opacité — doit rester imperceptible */
--dur-2: 220ms; /* survol, bascule d'état */
--dur-3: 320ms; /* menu, panneau, accordéon */
--dur-4: 520ms; /* apparition au défilement */
--ease-out: cubic-bezier(.2,.8,.2,1);
--ease-inout: cubic-bezier(.4,0,.2,1);
/* Dépassement très léger (1.06) : perceptible comme une matière qui se
pose, jamais comme un rebond de dessin animé. */
--ease-pose: cubic-bezier(.22,1.06,.36,1);
--lift-sm: -2px; /* élévation au survol, éléments secondaires */
--lift-md: -8px; /* cartes */
--rise: 24px; /* déplacement vertical à l'apparition */
--press: .96; /* compression à l'appui */
--zoom: 1.06; /* agrandissement d'une photo au survol */
--stagger: 80ms; /* décalage entre deux cartes d'une même rangée */
}
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
/* Consistent keyboard-focus indicator site-wide — mouse/touch clicks never
trigger :focus-visible, so this only shows up for keyboard navigation. */
:focus-visible{ outline: 2.5px solid var(--r16); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
/* Les délais aussi : une durée ramenée à 0,01 ms mais gardant 400 ms de
décalage laisserait le visiteur devant du vide, ce qui est exactement
ce que ce réglage cherche à éviter. */
*, *::before, *::after{ transition-delay: 0ms !important; animation-delay: 0ms !important; }
html{ scroll-behavior: auto; }
}
body{
margin: 0;
font-family: var(--font);
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
padding-bottom: var(--cta-bar-h); /* room for sticky CTA bar */
position: relative;
}
/* ambient liquid-glass background wash — fixed, blurred, behind everything */
body::before{
content: "";
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(38vw 38vw at 8% -6%, rgba(255,107,157,.16), transparent 60%),
radial-gradient(42vw 42vw at 92% 8%, rgba(96,165,250,.16), transparent 60%),
radial-gradient(36vw 36vw at 12% 92%, rgba(251,146,60,.13), transparent 60%),
radial-gradient(40vw 40vw at 88% 96%, rgba(167,139,250,.14), transparent 60%);
pointer-events: none;
}
.ai-text{
font-style: italic;
color: var(--ink);
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; }
p{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
input, select, textarea{ font-family: inherit; }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px){ .wrap{ padding: 0 20px; } }
.eyebrow{
display: inline-flex; align-items: center; gap: 8px;
font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted);
}
.eyebrow::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.eyebrow.quad::before{ background: var(--quad); }
.eyebrow.emx::before{ background: var(--emx); }
.eyebrow.r16::before{ background: var(--r16); }
/* tricolor divider bar — the recurring "3 pôles" motif */
.tri-bar{ height: 4px; width: 100%; border-radius: 999px; overflow: hidden; display: flex; }
.tri-bar span{ flex: 1; }
.tri-bar span:nth-child(1){ background: var(--quad); }
.tri-bar span:nth-child(2){ background: var(--emx); }
.tri-bar span:nth-child(3){ background: var(--r16); }
/* ---------------- Buttons ---------------- */
.btn{
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 22px; border-radius: 999px;
font-weight: 600; font-size: 15px; line-height: 1;
border: 1px solid transparent; white-space: nowrap;
/* transition : voir la section MOUVEMENT en fin de feuille */
}
/* Sur téléphone, un libellé long ne doit pas forcer un défilement latéral.
.btn porte white-space: nowrap : « Voir les 39 véhicules électriques dans
le catalogue → » mesurait 430px sur un écran de 390. Quatre pages
catégories débordaient ainsi horizontalement (électrique 60px, enfants
59px, 50cc 27px, SSV utilitaires 6px). On autorise le retour à la ligne
sous 560px, avec une interligne lisible puisque .btn est à line-height 1. */
@media (max-width: 560px){
.btn{ white-space: normal; text-align: center; line-height: 1.3; }
}
.btn-dark{ background: var(--ink); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -10px rgba(11,11,12,.5); }
.btn-dark:hover{ background: #232326; }
.btn-outline{
background: var(--glass); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
border-color: var(--glass-border); color: var(--ink); box-shadow: var(--glass-shadow);
}
.btn-outline:hover{ background: var(--glass-strong); }
.btn-ghost{
background: var(--glass); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
color: var(--ink); border-color: rgba(255,255,255,.4); box-shadow: var(--glass-shadow);
}
.btn-ghost:hover{ background: var(--glass-strong); }
.btn-sm{ padding: 9px 16px; font-size: 13.5px; }
.btn-block{ width: 100%; justify-content: center; }
/* ---------------- Skip link ---------------- */
.skip-link{
position: absolute; top: -60px; left: 12px; z-index: 100;
background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px;
font-size: 14px; font-weight: 700; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus{ top: 12px; }
/* ---------------- Site-wide announcement banner ---------------- */
/* Hidden by default — js/site-content.js shows it (and fills the text)
only when the admin's "Contenu du site > Bandeau d'annonce" field is
actually set, via #siteBanner. Without this element the admin's field
had nowhere to render — see applyBanner() in site-content.js. */
.site-banner{
display: none; background: var(--ink); color: #fff;
text-align: center; padding: 11px 44px 11px 20px; font-size: 13.5px; font-weight: 600;
line-height: 1.4; position: relative;
}
.site-banner.is-visible{ display: block; }
/* Tonalités du bandeau. Le noir (défaut) sert aux annonces courantes ;
l'alerte est réservée aux fermetures exceptionnelles, où un visiteur qui
ne lit pas la phrase doit quand même comprendre qu'il se passe quelque
chose avant de prendre la route. */
.site-banner.banner-alert{ background: #8c1d18; }
.site-banner.banner-ok{ background: #14603f; }
.site-banner .banner-text{ display: inline; }
.site-banner .banner-more{
display: none; background: none; border: none; padding: 0 0 0 6px;
color: #fff; font: inherit; text-decoration: underline; text-underline-offset: 2px;
}
@media (max-width: 760px){
/* One line by default, expandable on tap. Grid + minmax(0,auto) keeps
the clamped text from pushing the "Lire" button out of the row. */
.site-banner{
text-align: left; padding: 10px 42px 10px 16px; font-size: 13px;
align-items: baseline; gap: 0;
}
.site-banner.is-visible{ display: flex; }
.site-banner .banner-text{
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
overflow: hidden; min-width: 0; flex: 1;
}
.site-banner.expanded .banner-text{ -webkit-line-clamp: unset; overflow: visible; }
.site-banner .banner-more{ display: inline; flex: none; }
}
.site-banner .banner-close{
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.12);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 15px; line-height: 1; border: none; padding: 0;
}
.site-banner .banner-close:hover{ background: rgba(255,255,255,.22); }
/* ---------------- Cookie consent (see js/cookie-consent.js) ---------------- */
.cookie-consent{
position: fixed; left: 0; right: 0; bottom: var(--cta-bar-h); z-index: 55;
display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
background: rgba(11,11,12,.94); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
color: #fff; padding: 16px 24px; border-top: 1px solid rgba(255,255,255,.14);
box-shadow: 0 -12px 40px -20px rgba(0,0,0,.4);
}
.cookie-consent p{ font-size: 13.5px; line-height: 1.5; margin: 0; max-width: 62ch; color: rgba(255,255,255,.85); }
.cookie-consent a{ color: #fff; text-decoration: underline; }
.cookie-consent-actions{ display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.cookie-consent .btn-outline{ border-color: rgba(255,255,255,.3); color: #fff; }
.cookie-consent .btn-outline:hover{ background: rgba(255,255,255,.1); }
@media (max-width: 640px){ .cookie-consent{ justify-content: flex-start; text-align: left; padding: 16px 20px; } }
/* ---------------- Header ---------------- */
/* ============================================================
EN-TÊTE
============================================================
Quatre blocs sur une seule rangée : la marque, une colonne
« recherche au-dessus de Véhicules », la grille de navigation,
puis le téléphone et l'état d'ouverture poussés à droite.
La navigation est UNE seule grille de 5 colonnes sur 2 lignes,
pas deux rangées flex indépendantes. C'est ce qui garantit
l'alignement : chaque colonne se dimensionne sur le plus large
de ses deux libellés, et les deux boutons d'une même colonne
reçoivent donc exactement la même largeur, sans valeur écrite
à la main.
L'ancienne version empilait sept boutons sur la deuxième ligne
et les laissait passer à la ligne (flex-wrap) : à 1366 et
1440 px — les largeurs de portable les plus répandues — la
navigation s'étalait sur trois lignes et l'en-tête montait à
161 px. Regrouper Atelier, Reprise et Pièces sous « Services »
ramène à 5 + 5, ce qui tient sur deux lignes propres.
============================================================ */
.site-header{
position: sticky; top: 0; z-index: 40;
background: rgba(255,255,255,.72);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-bottom: 1px solid rgba(15,18,30,.07);
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.header-main{
display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
padding: 12px 16px;
}
.brand{ display: flex; align-items: center; flex-shrink: 0; }
/* width:auto conserve le rapport du fichier (256×144). */
.brand img{ height: 58px; width: auto; display: block; }
/* --- Colonne recherche + Véhicules --------------------------
align-items: stretch, donc le champ et le bouton font la même
largeur — c'est la colonne qui l'impose, pas leur contenu. */
.header-nav-col{
display: flex; flex-direction: column; align-items: stretch;
gap: 7px; width: 190px; flex-shrink: 0;
}
/* 248px : mesuré, pas choisi. À 214px le libellé « Rechercher un
véhicule… » était coupé en plein mot. À 1366px — la largeur la plus
contrainte où la navigation complète reste affichée — l'en-tête laisse
77px libres : en reprendre 34 garde 43px de marge. */
.header-search{
display: flex; align-items: center; gap: 8px;
background: var(--paper-alt); border: 1px solid var(--line); border-radius: 999px;
padding: 0 14px; height: 38px; box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease;
}
.header-search:focus-within{ border-color: var(--ink-soft); box-shadow: 0 0 0 3px rgba(21,72,201,.10); }
.header-search svg{ width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.header-search input{
border: none; background: none; outline: none; font: inherit; font-size: 14px;
color: var(--ink); width: 100%; min-width: 0;
}
.header-search input::placeholder{ color: var(--muted); }
/* --- Véhicules : le point d'entrée principal, en noir plein --- */
.nav-item{ position: relative; }
.nav-trigger{
display: flex; align-items: center; justify-content: center; gap: 7px;
width: 100%; height: 40px; padding: 0 16px; box-sizing: border-box;
border: 1px solid var(--ink); border-radius: 999px;
background: var(--ink); color: #fff;
font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
transition: background .15s ease, transform .12s ease;
}
.nav-trigger:hover{ background: #000; }
.nav-trigger:active{ transform: scale(.98); }
.nav-trigger .caret{ width: 13px; height: 13px; opacity: .8; transition: transform .18s ease; flex-shrink: 0; }
.nav-trigger[aria-expanded="true"] .caret{ transform: rotate(180deg); }
/* --- Grille de navigation : 5 colonnes, 2 lignes -------------
repeat(5, auto) : chaque colonne prend la largeur de son plus
large libellé. Les enfants sont en ordre de lecture — les cinq
premiers forment la ligne 1, les cinq suivants la ligne 2. */
.header-links{
display: grid;
grid-template-columns: repeat(6, auto);
gap: 8px;
align-content: center;
/* 0 0 auto : la grille ne rétrécit jamais. Avec « 0 1 auto » elle se
comprimait sous sa largeur naturelle (708px au lieu de 799px mesurés à
1150px), ce qui écrase les colonnes au lieu de basculer en compact. */
flex: 0 0 auto;
}
.header-links > a{
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
box-sizing: border-box; width: 100%;
height: 40px; padding: 0 13px; border-radius: 999px;
font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
color: var(--ink-soft); background: var(--glass);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
white-space: nowrap; cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.header-links > a:hover{ background: var(--glass-strong); color: var(--ink); border-color: rgba(15,18,30,.22); }
.header-links > a:active{ transform: scale(.98); }
/* Page courante — posée par js/nav.js à partir de l'URL. */
.header-links > a[aria-current="page"]{
background: var(--paper-sunk); color: var(--ink);
border-color: rgba(15,18,30,.28); font-weight: 700;
}
/* Focus clavier visible partout, sans halo au clic souris. */
.header-links > a:focus-visible,
.nav-trigger:focus-visible,
.nav-toggle:focus-visible,
.phone-pill:focus-visible,
.nav-menu a:focus-visible{
outline: 2px solid var(--ink); outline-offset: 2px;
}
/* Les trois pôles : la couleur reste un accent (pastille + bordure
au survol), jamais un aplat. */
.header-links .dot{ width: 7px; height: 7px; border-radius: 50%; flex: none; }
.header-links a.pole-quad .dot{ background: var(--quad); }
.header-links a.pole-emx .dot{ background: var(--emx); }
.header-links a.pole-r16 .dot{ background: var(--r16); }
.header-links a.pole-quad:hover{ border-color: var(--quad); }
.header-links a.pole-emx:hover{ border-color: var(--emx); }
.header-links a.pole-r16:hover{ border-color: var(--r16); }
/* --- Sous-menus ---------------------------------------------
Ouverture au clic (js/nav.js bascule l'attribut hidden), pas au
survol : le survol seul est inutilisable au toucher et au
clavier. Le survol reste un raccourci sur pointeur fin. */
.nav-menu{
position: absolute; z-index: 45;
background: rgba(255,255,255,.94);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border: 1px solid rgba(15,18,30,.10); border-radius: 16px;
box-shadow: 0 18px 44px -20px rgba(20,20,40,.35);
padding: 16px 18px;
}
.nav-menu{ top: calc(100% + 8px); left: 0; display: flex; gap: 28px; min-width: 460px; }
.nav-menu[hidden]{ display: none; }
/* Repli si nav.js n'a pas pris la main — fichier encore en cache après un
déploiement, script bloqué, erreur JS en amont. Sans lui, le panneau
porte `hidden` et rien ne peut plus l'ouvrir : le menu est mort. Tant que
data-ready est absent, le survol et le focus suffisent. */
.nav-item:not([data-ready]):hover .nav-menu[hidden],
.nav-item:not([data-ready]):focus-within .nav-menu[hidden]{ display: flex; }
.nav-menu-col .nav-menu-title{
display: block;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
color: var(--muted); margin-bottom: 8px;
}
.nav-menu-col a{
display: block; padding: 7px 0; font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
border-radius: 8px; transition: color .12s ease;
}
.nav-menu-col a:hover{ color: var(--r16); }
.mobile-nav a[aria-current="page"]{ color: var(--r16); }
/* --- Téléphone et état d'ouverture, poussés à droite --------- */
.header-cta{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
.phone-block{ display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.phone-block .open-state{ align-self: stretch; }
.phone-pill{
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
background: var(--ink); color: #fff; height: 40px; padding: 0 15px; border-radius: 999px;
font-weight: 700; font-size: 14px; letter-spacing: .01em; box-sizing: border-box;
}
.phone-pill svg{ width: 15px; height: 15px; flex-shrink: 0; }
.open-state{
display: inline-flex; align-items: center; gap: 6px; justify-content: center;
font-size: 12px; font-weight: 600; color: #1c6b46; background: #e8f4ee;
border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.open-state::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.open-state.closed{ color: #9b2c2c; background: #fdecec; }
.open-state.closed::before{ background: #c14646; }
.nav-toggle{
display: none; width: 44px; height: 44px; border-radius: 999px;
border: 1px solid var(--line); background: var(--paper);
align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg{ width: 20px; height: 20px; }
/* --- Bascule vers la navigation compacte --------------------
Seuil mesuré, pas choisi : la grille 5×2 tient jusqu'à 1320 px
environ. En dessous, une colonne déborderait et une troisième
ligne se formerait — exactement le défaut qu'on corrige. On
bascule donc AVANT, à 1320 px. 1366 et 1440 px restent donc en
navigation complète sur deux lignes. */
/* Palier intermédiaire : on garde les douze boutons le plus bas possible.
La grille en réclame 799px ; avec le logo, la colonne de recherche et le
bloc téléphone, le plancher est à 1320px. En masquant le seul champ de
recherche — qui reste accessible en haut du tiroir — on récupère 202px et
la navigation complète tient jusqu'à 1250px. « Véhicules » reste en place.
C'est ce palier qui évite que le menu disparaisse derrière un bouton sur
un écran de portable courant. */
@media (max-width: 1320px){
.header-search{ display: none; }
.header-nav-col{ width: auto; }
.header-main{ padding: 12px 14px; gap: 10px; }
/* Le numéro reste affiché : le masquer ne gagne rien, c'est l'état
d'ouverture (« Fermé · ouvre mardi 9h ») qui fixe la largeur du bloc
droit, et vous tenez à le garder. */
}
@media (max-width: 1250px){
.header-nav-col{ display: none; }
.header-links{ display: none; }
.header-main{ padding: 10px 20px; gap: 12px; }
.brand img{ height: 56px; }
.nav-toggle{ display: inline-flex; }
}
@media (max-width: 560px){
.header-cta .phone-pill span{ display: none; }
.header-cta .phone-pill{ padding: 0 13px; }
.brand img{ height: 48px; }
}
.mobile-nav{
/* `top` is corrected at open time by js/nav.js from the real header box
(the banner above it changes height); this inset is only the initial
value. Opaque background: at 75% the page underneath showed through
the menu labels. */
display: none; position: fixed; inset: 72px 0 0 0; z-index: 39;
background: var(--paper); overflow-y: auto;
}
.mobile-nav.open{ display: block; }
.mnav-inner{ padding: 18px 20px 40px; display: flex; flex-direction: column; gap: 22px; }
/* La recherche est le premier élément du tiroir : sur téléphone elle
remplace le champ de l'en-tête, masqué faute de place. */
.mnav-search{
display: flex; align-items: center; gap: 9px;
background: var(--paper-alt); border: 1px solid var(--line); border-radius: 999px;
padding: 0 16px; height: 48px; box-sizing: border-box;
}
.mnav-search:focus-within{ border-color: var(--ink-soft); box-shadow: 0 0 0 3px rgba(21,72,201,.10); }
.mnav-search svg{ width: 17px; height: 17px; color: var(--muted); flex: none; }
.mnav-search input{
border: none; background: none; outline: none; font: inherit; font-size: 16px;
color: var(--ink); width: 100%; min-width: 0;
}
/* 16px : en dessous, iOS Safari zoome la page au focus du champ. */
.mnav-search input::placeholder{ color: var(--muted); }
.mnav-group .mnav-title{
display: block;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
color: var(--muted); margin-bottom: 4px;
}
.mnav-group a{
display: block; padding: 14px 4px; min-height: 48px; box-sizing: border-box;
font-size: 17px; font-weight: 700;
border-bottom: 1px solid var(--line-soft); font-family: var(--font-display);
}
.mnav-group a:last-child{ border-bottom: none; }
.mnav-foot{ display: flex; flex-direction: column; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.mnav-map{ font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.mnav-hours{ font-size: 13px; color: var(--muted); }
/* ---------------- Sticky bottom CTA bar ---------------- */
.cta-bar{
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
display: grid; grid-template-columns: repeat(3,1fr);
background: rgba(10,10,14,.68);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border-top: 1px solid rgba(255,255,255,.14);
box-shadow: 0 -12px 40px -20px rgba(0,0,0,.4);
}
.cta-bar a{
display: flex; align-items: center; justify-content: center; gap: 8px;
color: #fff; font-size: 13.5px; font-weight: 600; padding: 16px 8px;
border-right: 1px solid rgba(255,255,255,.1);
transition: background .15s ease;
}
.cta-bar a:last-child{ border-right: none; }
.cta-bar a:hover{ background: rgba(255,255,255,.08); }
.cta-bar a .dot{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cta-bar a:nth-child(1) .dot{ background: var(--quad); }
.cta-bar a:nth-child(2) .dot{ background: var(--emx); }
.cta-bar a:nth-child(3) .dot{ background: var(--r16); }
@media (max-width: 560px){
:root{ --cta-bar-h: 56px; }
.cta-bar a span.label{ display: inline; }
/* These are the three most-tapped controls on the whole site; 12px was
below what is comfortably readable at arm's length. */
.cta-bar a{ font-size: 13.5px; padding: 13px 6px; line-height: 1.25; min-height: 56px; }
}
/* ---------------- Hero ---------------- */
/* 108px of tail padding pushed the first product a full screen down. */
.hero{ padding: 56px 0 56px; background: var(--paper); }
.hero .wrap{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero h1{
font-size: clamp(40px, 5.8vw, 74px); font-weight: 800; line-height: 1.01; letter-spacing: -0.035em;
margin: 20px 0 24px;
}
.hero h1 em{
font-style: italic;
color: var(--ink);
}
.hero p.lead{ font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; margin-bottom: 28px; }
.hero-actions{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-note{ font-size: 13.5px; color: var(--muted); }
.hero-note.hero-sub{ margin-top: -18px; margin-bottom: 14px; }
/* Real star row: grey stars behind, gold stars on top clipped to the
rating's percentage (90% = 4.5/5) so it reads as an actual star rating,
not just a single decorative icon. */
.stars{ position: relative; display: inline-block; line-height: 1; white-space: nowrap; flex: none; }
.stars-bg, .stars-fg{ display: flex; gap: 2px; }
.stars-bg svg{ color: #e4e3e0; }
.stars-fg{ position: absolute; inset: 0; overflow: hidden; width: var(--rating-pct, 90%); }
.stars-fg svg{ color: #f2b705; }
.google-rating{
display: inline-flex; align-items: center; gap: 18px; margin-top: 22px;
background: linear-gradient(180deg, #fffaf0, #fff5e0);
border: 1px solid #f3e1ad; border-radius: 20px;
padding: 18px 28px; box-shadow: 0 1px 1px rgba(255,255,255,.8) inset, 0 16px 40px -20px rgba(178,130,10,.35), var(--shadow-card);
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.google-rating .g-icon{ width: 30px; height: 30px; flex: none; }
.google-rating .grating-col{ display: flex; flex-direction: column; gap: 4px; }
.google-rating .stars svg{ width: 24px; height: 24px; }
.google-rating .grating-text{ font-size: 15px; font-weight: 700; color: var(--ink); }
.google-rating .grating-text b{ font-size: 23px; font-family: var(--font-display); }
.google-rating .grating-text .gr-muted{ color: var(--muted); font-weight: 600; font-size: 13.5px; }
.google-rating:hover{ border-color: #e0b94a; transform: translateY(var(--lift-sm)); box-shadow: 0 1px 1px rgba(255,255,255,.8) inset, 0 20px 48px -18px rgba(178,130,10,.45), var(--shadow-card); }
@media (max-width: 560px){ .google-rating{ flex-wrap: wrap; padding: 16px 20px; } }
.footer-rating{
display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
font-size: 13px; font-weight: 700; color: var(--ink-soft);
}
.footer-rating .stars svg{ width: 15px; height: 15px; }
.footer-rating span{ color: var(--muted); font-weight: 600; }
.footer-rating:hover{ color: var(--ink); }
.hero-visual{
background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 22px;
display: flex; flex-direction: column; gap: 16px; box-shadow: var(--glass-shadow-pop);
}
.pole-chip{
display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
background: var(--glass-strong); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
border-radius: var(--radius-md); padding: 26px 22px 20px;
border: 1px solid var(--glass-border); border-bottom: 4px solid var(--line); box-shadow: var(--glass-shadow);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
position: relative; overflow: hidden;
}
.pole-chip:hover{ transform: translateY(var(--lift-md)); box-shadow: var(--glass-shadow-pop); }
/* Diagonal light sweep on hover — a small "premium reveal" touch, not a
looping effect, so it never fights for attention while idle. */
.pole-chip::before{
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
transform: translateX(-120%); transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.pole-chip:hover::before{ transform: translateX(120%); }
.pole-chip.quad{ border-bottom-color: var(--quad); }
.pole-chip.emx{ border-bottom-color: var(--emx); }
.pole-chip.r16{ border-bottom-color: var(--r16); }
.pole-chip img{ height: 264px; width: 100%; max-width: 480px; object-fit: contain; position: relative; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pole-chip:hover img{ transform: scale(1.04); }
.pole-chip .count{ font-size: 14px; color: var(--muted); font-weight: 700; position: relative; }
@media (max-width: 900px){
.hero .wrap{ grid-template-columns: 1fr; }
.hero{ padding: 40px 0 64px; }
/* Below the two-column layout, .hero-visual's 3 cards used to stack
full-width with the logo still capped at max-width:260px — a small
centered logo floating in a mostly-empty wide card. Laying them out
as a row instead keeps each card sized to its content. */
.hero-visual{ flex-direction: row; flex-wrap: wrap; padding: 14px; gap: 10px; }
.pole-chip{ flex: 1 1 calc(33.333% - 7px); min-width: 132px; padding: 18px 10px 14px; gap: 10px; }
.pole-chip img{ height: 104px; max-width: 100%; }
.pole-chip .count{ font-size: 12px; }
}
@media (max-width: 620px){
/* The three pole cards are navigation shortcuts, not content. Stacked at
104px of logo each they pushed the first actual machine to 1699px —
two full screens. As a compact row they cost ~150px and still work. */
.hero{ padding: 28px 0 32px; }
/* clamp()'s lower bound wins on a phone, so the 40px floor made the H1
run to three lines and cost ~110px before anything else. */
.hero h1{ font-size: 34px; margin: 14px 0 16px; }
.hero .lead{ font-size: 16px; }
.hero-visual{ flex-wrap: nowrap; padding: 10px; gap: 8px; }
.pole-chip{ flex: 1 1 33.333%; min-width: 0; padding: 12px 6px 10px; gap: 6px; }
.pole-chip img{ height: 46px; }
.pole-chip .count{ font-size: 11px; }
.hero-actions .btn{ flex: 1 1 100%; justify-content: center; }
}
/* ---------------- Stats strip ---------------- */
.stats-strip{ border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); background: var(--glass); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); }
.stats-strip .wrap{ display: grid; grid-template-columns: repeat(3,1fr); }
.stat{ padding: 40px 24px; text-align: center; border-right: 1px solid rgba(11,11,12,.08); }
.stat:last-child{ border-right: none; }
.stat b{ display: block; font-family: var(--font-display); font-size: 38px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.stat span{ font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
@media (max-width: 640px){ .stat{ padding: 26px 10px; } .stat b{ font-size: 26px; } }
/* ---------------- Section headers ---------------- */
.section{ padding: 80px 0; }
.section-head{ max-width: 720px; margin-bottom: 48px; }
.section-head h2{ font-size: clamp(30px,3.6vw,46px); font-weight: 800; margin: 16px 0 14px; letter-spacing: -0.03em; }
.section-head p{ font-size: 16.5px; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 720px){ .section{ padding: 48px 0; } }
/* ---------------- Pôle rows (home) ---------------- */
.pole-rows{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.pole-row{
display: flex; flex-direction: column; gap: 16px; padding: 30px;
background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border-radius: var(--radius-lg);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
position: relative; overflow: hidden;
}
.pole-row:hover{ transform: translateY(var(--lift-md)); box-shadow: var(--glass-shadow-pop); border-color: rgba(11,11,12,.14); }
.pole-row::before{
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.45) 50%, transparent 58%);
transform: translateX(-120%); transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.pole-row:hover::before{ transform: translateX(120%); }
.pole-row > *{ position: relative; z-index: 1; }
.pole-row-top{ display: flex; align-items: center; justify-content: space-between; }
.pole-row-top .tag{ font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pole-row-top .n{ font-size: 12.5px; font-weight: 700; color: var(--muted); }
.brand-links{ display: flex; flex-wrap: wrap; gap: 8px; }
.brand-links a{
display: inline-flex; align-items: center; gap: 6px;
background: var(--glass-strong); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
border: 1px solid var(--glass-border); transition: border-color .15s ease, transform .15s ease;
}
.brand-links a:hover{ transform: translateY(var(--lift-sm)); }
.brand-links a:hover{ border-color: var(--ink); }
.pole-row-logo{
display: flex; align-items: center; justify-content: center; padding: 32px 20px;
background: var(--paper); border-radius: var(--radius-md); border: 1px solid var(--line-soft);
position: relative;
}
.pole-row-logo::after{
content: ""; position: absolute; left: 28px; right: 28px; bottom: 0;
height: 4px; border-radius: 4px 4px 0 0;
}
.pole-row.quad .pole-row-logo::after{ background: var(--quad); }
.pole-row.emx .pole-row-logo::after{ background: var(--emx); }
.pole-row.r16 .pole-row-logo::after{ background: var(--r16); }
.pole-row-logo img{ height: 160px; width: 100%; max-width: 260px; object-fit: contain; }
.pole-row-foot{ font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 980px){
.pole-rows{ grid-template-columns: 1fr; }
.pole-row-logo img{ height: 130px; }
}
/* ---------------- Cards / grid generic ---------------- */
.grid-3{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-2{ display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
@media (max-width: 900px){
.grid-3{ grid-template-columns: repeat(2,minmax(0,1fr)); }
/* Ces grilles contiennent 3 cartes. Passées à 2 colonnes, la troisième
restait seule sur sa ligne avec ~360 px de vide à droite. Quand le
nombre de cartes est impair, la dernière prend toute la largeur. */
.grid-3 > :last-child:nth-child(odd){ grid-column: 1 / -1; }
}
@media (max-width: 620px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }
.info-card{
background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border-radius: var(--radius-md); padding: 24px;
border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
transition: transform .2s ease, box-shadow .2s ease;
}
.info-card:hover{ transform: translateY(var(--lift-md)); box-shadow: var(--glass-shadow-pop); }
.info-card h3{ font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.info-card p{ color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.info-card .go{ margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
/* ---------------- Vehicle card ---------------- */
.vcard{
/* Deliberately NOT a glass surface. A 72%-white card on a white page has
no edge — the catalogue read as text floating on nothing. Solid fill +
a real border makes each vehicle a discrete object again. Dropping
backdrop-filter here also removes 49 simultaneous blur layers on the
catalogue, which is what made scrolling stutter on mid-range Android. */
background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none;
border: 1px solid var(--line); border-radius: var(--radius-card);
overflow: hidden; display: flex; flex-direction: column;
box-shadow: var(--shadow-card);
/* transition : voir la section MOUVEMENT en fin de feuille */
}
.vcard:hover{ transform: translateY(var(--lift-md)); border-color: rgba(11,11,12,.18); box-shadow: var(--shadow-pop); }
.vcard-media{ position: relative; aspect-ratio: 4/3; background: var(--paper-sunk); overflow: hidden; }
.vcard-media img{ width: 100%; height: 100%; object-fit: cover; }
.vcard-media.no-photo img{ display: none; }
/* Seconde vue au survol — voir js/card-photo-hover.js. Le fondu est court :
il doit se lire comme « il y a d'autres photos », pas comme une animation. */
.vcard-media .vcard-photo-2{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .22s ease; }
.vcard-media.show-second .vcard-photo-2{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .vcard-media .vcard-photo-2{ transition:none; } }
/* Missing-photo placeholder — filled by js/img-fallback.js with the model
name, so a card without a picture is still identifiable and clickable
instead of reading as a broken image. */
.vcard-media.no-photo, .vd-media.no-photo{ background: var(--paper-sunk); }
.no-photo-label{
position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px;
align-items: center; justify-content: center; text-align: center; padding: 16px;
}
.no-photo-label b{
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.no-photo-label span{ font-size: 14px; font-weight: 700; color: var(--ink-soft); line-height: 1.35; }
.vd-media .no-photo-label b{ font-size: 12.5px; }
.vd-media .no-photo-label span{ font-size: 18px; }
.vcard-media .badge{
position: absolute; top: 12px; left: 12px; background: var(--ink); color: #fff;
font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 6px 10px; border-radius: 999px;
}
.vcard-body{ padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.vcard-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vcard-brand{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vcard-model{ font-size: 18px; font-weight: 800; font-family: var(--font-display); line-height: 1.2; }
.vcard-pitch{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.vcard-tags{ display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill{
font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
background: var(--paper-sunk); color: var(--ink-soft);
}
.tag-pill.ok{ background: var(--ok-bg); color: var(--ok); }
.tag-pill.info{ background: var(--info-bg); color: var(--info); }
.tag-pill.warn{ background: #fdf1e0; color: #a8641a; }
.vcard-spec{ font-size: 13px; color: var(--muted); }
.vcard-foot{ margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vcard-price-label{ font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.vcard-price{ font-size: 20px; font-weight: 800; font-family: var(--font-display); letter-spacing: -.02em; }
/* Licence is the most discriminating fact on a card and used to be buried
mid-sentence in a grey spec line. It gets its own badge instead. */
.vcard-media .badge-licence{ left: auto; right: 12px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.vcard-media .compare-toggle{ top: auto; bottom: 10px; right: 10px; }
@media (hover: hover){
/* Tertiary action, tertiary weight: the label only appears on hover, so
"Comparer" stops competing with the card's own call to action. */
.vcard-media .compare-toggle .lbl{ display: none; }
.vcard:hover .compare-toggle .lbl, .compare-toggle.active .lbl{ display: inline; }
}
/* ---------------- Catalogue layout ---------------- */
.cat-layout{ display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: start; }
@media (max-width: 900px){ .cat-layout{ grid-template-columns: 1fr; } }
/* ---------------- Colonne de filtres (bureau) ----------------
Elle est collante, et c'est voulu : on garde les filtres sous les yeux
en parcourant les résultats. Mais elle n'avait aucune limite de hauteur.
Avec neuf groupes elle mesure 1 831 px pour une fenêtre de 900 px : plus
de la moitié des filtres — Motorisation, Style & usage, Disponibilité,
Marque — étaient tout simplement inatteignables, signalé le 08/09/2026.
L'ajout du groupe Puissance a rendu le défaut visible, mais il existait
avant : la colonne dépassait déjà l'écran.
Deuxième correction, plus ancienne : top valait 100px alors que l'en-tête
collant en fait 113. Le haut de la colonne passait donc sous l'en-tête.
On se cale désormais sur sa hauteur réelle, qui change au passage en
navigation compacte. */
/* --cta-bar-h est déjà défini plus haut (64px, 56px en petite largeur) et
sert au padding du body, à la pastille Comparer et à la barre d'essai.
Le redéclarer ici l'écrasait pour tout le site : on le réutilise. */
:root{ --header-h: 113px; }
@media (max-width: 1250px){ :root{ --header-h: 90px; } }
.filters{ position: sticky; top: 100px; display: flex; flex-direction: column; gap: 26px; }
@media (min-width: 901px){
.filters{
top: calc(var(--header-h) + 14px);
/* On réserve aussi la barre d'action fixe du bas (Appeler · Essai ·
Offre), sans quoi les derniers filtres se glissaient dessous. */
max-height: calc(100vh - var(--header-h) - var(--cta-bar-h) - 24px);
}
/* min-height:0 est indispensable : sans lui un enfant flex refuse de
descendre sous sa hauteur de contenu et ne défile jamais. */
.filters .filters-scroll{
flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding-right: 10px; scrollbar-width: thin;
scrollbar-color: rgba(11,11,12,.22) transparent;
}
.filters .filters-scroll::-webkit-scrollbar{ width: 8px; }
.filters .filters-scroll::-webkit-scrollbar-thumb{
background: rgba(11,11,12,.18); border-radius: 999px;
}
.filters .filters-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(11,11,12,.32); }
}
.filters .fgroup h4{ font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; font-weight: 700; }
.search-box{
display: flex; align-items: center; gap: 8px;
background: var(--glass); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
border: 1px solid var(--glass-border); border-radius: 16px; padding: 12px 14px; box-shadow: var(--glass-shadow);
}
.search-box:focus-within{ border-color: var(--ink); }
.search-box input{ border: none; background: transparent; outline: none; font-size: 14.5px; width: 100%; }
.opt-row{ display: flex; align-items: center; justify-content: space-between; padding: 7px 2px; font-size: 14px; cursor: pointer; border-radius: 8px; }
.opt-row:hover{ background: rgba(255,255,255,.5); }
.opt-row input{ margin-right: 8px; }
.opt-row .n{ color: var(--muted); font-size: 12.5px; }
.fselect{ width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; }
.clear-filters{ font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: underline; }
/* Sticky toolbar. Filters used to scroll away with the page, so changing
one after 20 cards meant scrolling ~10 000px back to the top. */
.cat-toolbar{
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
padding: 12px 0; background: var(--paper);
border-bottom: 1px solid var(--line-soft);
}
.cat-count{ font-size: 14.5px; color: var(--muted); margin-right: auto; }
.cat-count b{ color: var(--ink); }
.sort-select{ padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; background: var(--paper); }
.filters-toggle-inline{ display: none; align-items: center; gap: 7px; }
.filters-toggle-inline .fcount{
display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px;
padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700;
}
@media (max-width: 900px){ .filters-toggle-inline{ display: inline-flex; } }
.results-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 1080px){ .results-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .results-grid{ grid-template-columns: 1fr; } }
.empty-state{ padding: 60px 20px; text-align: center; color: var(--muted); }
.empty-state .empty-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
/* ---------------- Loading skeletons (catalogue/finder cards) ---------------- */
.skel-card{
border-radius: var(--radius-md); overflow:hidden; background: var(--glass);
border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
.skel-media{ aspect-ratio: 4/3; background: linear-gradient(100deg, rgba(11,11,12,.06) 30%, rgba(11,11,12,.11) 50%, rgba(11,11,12,.06) 70%); background-size: 200% 100%; animation: skel-shimmer 1.6s ease-in-out infinite; }
.skel-body{ padding: 18px; display:flex; flex-direction:column; gap:10px; }
.skel-line{ height: 12px; border-radius: 6px; background: linear-gradient(100deg, rgba(11,11,12,.06) 30%, rgba(11,11,12,.11) 50%, rgba(11,11,12,.06) 70%); background-size: 200% 100%; animation: skel-shimmer 1.6s ease-in-out infinite; }
.skel-line.w60{ width:60%; } .skel-line.w80{ width:80%; } .skel-line.w40{ width:40%; }
@keyframes skel-shimmer{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce){ .skel-media, .skel-line{ animation: none; } }
.load-more-wrap{ text-align: center; margin-top: 32px; }
.filters-toggle{ display: none; }
.filters-close{ display: none; }
.filters-apply{ display: none; }
.filters-scroll{ display: flex; flex-direction: column; gap: 26px; }
@media (max-width: 900px){
.filters-toggle{ display: inline-flex; margin-bottom: 18px; }
/* Full-height sheet with its own scroll area and a fixed action row, so
the visitor can always see how many vehicles are left and get out with
a thumb. Opaque: at 85% the page behind showed through the labels. */
.filters{
position: fixed; inset: 0; z-index: 60; background: var(--paper);
padding: 0; display: none; flex-direction: column; gap: 0;
}
.filters.open{ display: flex; }
.filters-close{ display: flex; justify-content: flex-end; padding: 12px 16px 4px; flex: none; }
.filters-scroll{ flex: 1; overflow-y: auto; padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 24px; -webkit-overflow-scrolling: touch; }
.filters-apply{
display: flex; gap: 10px; align-items: center; flex: none;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line); background: var(--paper);
box-shadow: 0 -8px 24px -18px rgba(11,11,12,.4);
}
.filters-apply .btn-dark{ flex: 1; justify-content: center; }
}
/* ---------------- Marques : en-tête de pôle + cartes ----------------
Le logo est le sujet de la carte, pas une vignette dans un coin. Les
logos fournis vont de 1:1 (Stark Future) à 5,6:1 (Kove) : les afficher
tels quels obligeait à les brider à 42px de haut, donc à les rendre tous
minuscules. Ici chacun est posé dans un cadre de hauteur fixe en
object-fit: contain — le cadre est identique partout, le logo occupe la
place qu'il peut, et l'ensemble se lit comme une planche cohérente.
L'étiquette de pôle qui figurait sur chaque carte a été retirée : elle
répétait le titre de la section juste au-dessus. La couleur du pôle passe
par un filet sous le logo, plus discret et tout aussi lisible. */
.pole-head{
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.pole-head-left{ display: flex; align-items: center; gap: 18px; }
.pole-head img{ height: 76px; width: auto; display: block; }
.pole-head .pole-label{
font-size: 12.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .09em; color: var(--muted);
}
.pole-head .pole-count{ font-size: 13.5px; color: var(--muted); margin-top: 3px; }
/* justify-content: center — trois pôles de 3, 4 et 6 marques. Dans une
grille à 3 colonnes, les 4 marques d'EMX16 laissaient une carte seule à
gauche avec deux emplacements vides. En flex centré, un reste de ligne
se place au milieu et l'ensemble reste équilibré. */
.brand-grid{
display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
margin-bottom: 56px;
}
.brand-card{
flex: 0 1 calc(33.333% - 14px); min-width: 260px; max-width: 420px;
background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border); border-radius: var(--radius-md);
display: flex; flex-direction: column; overflow: hidden;
box-shadow: var(--glass-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.brand-card:hover{ transform: translateY(var(--lift-md)); box-shadow: var(--glass-shadow-pop); }
.brand-card:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
/* Le cadre du logo : hauteur fixe, fond très légèrement creusé pour
détacher les logos clairs, et une marge intérieure généreuse pour que
les logos très larges (Kove, Talaria) ne touchent pas les bords. */
.brand-logo{
height: 132px; display: flex; align-items: center; justify-content: center;
padding: 22px 28px; background: #fff;
border-bottom: 1px solid var(--line-soft); position: relative;
/* Fond blanc et non gris clair : le logo Peugeot est un JPEG à fond blanc
opaque — les douze autres sont transparents — et laissait un rectangle
visible sur une plaque teintée. Le blanc absorbe ce cas, et couvrira de
même tout futur logo fourni sans transparence. */
}
/* height:100% plutôt que height:auto — sinon chaque logo s'affiche à sa
taille naturelle et le résultat reste inégal : le fichier Segway ne fait
que 140x60 px, il restait deux fois plus petit que Talaria. En imposant
la hauteur du cadre, tous atteignent la même ligne ; seuls les logos très
larges (Kove, Royal Enfield) sont ensuite bridés par max-width, ce qui
est le comportement attendu. L'agrandissement reste modéré — 1,5× au pire
sur Segway — et les trois logos vectoriels ne perdent rien. */
.brand-logo img{
height: 100%; width: auto; max-width: 100%;
object-fit: contain; display: block;
}
/* Filet aux couleurs du pôle, en remplacement de l'étiquette textuelle. */
.brand-logo::after{
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
}
.brand-card.pole-quad .brand-logo::after{ background: var(--quad); }
.brand-card.pole-emx .brand-logo::after{ background: var(--emx); }
.brand-card.pole-r16 .brand-logo::after{ background: var(--r16); }
.brand-card.pole-quad:hover{ border-color: var(--quad); }
.brand-card.pole-emx:hover{ border-color: var(--emx); }
.brand-card.pole-r16:hover{ border-color: var(--r16); }
.brand-body{ padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.brand-card .bname{ font-size: 21px; font-weight: 800; font-family: var(--font-display); letter-spacing: -.01em; }
.brand-card p{ color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; flex: 1; }
.brand-card .bfoot{
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-soft);
font-size: 13.5px; font-weight: 700;
}
.brand-card .bfoot .go{ color: var(--ink-soft); }
.brand-card:hover .bfoot .go{ color: var(--ink); }
@media (max-width: 900px){
.brand-card{ flex: 0 1 calc(50% - 10px); }
.pole-head img{ height: 62px; }
}
@media (max-width: 620px){
.brand-card{ flex: 1 1 100%; max-width: none; }
.brand-logo{ height: 118px; }
}
/* ---------------- Hours table ---------------- */
.hours-block{
display: grid; grid-template-columns: .85fr 1.15fr; gap: 0;
background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--glass-shadow-pop);
}
.hours-side{ background: rgba(11,11,12,.82); backdrop-filter: blur(20px); color: #fff; padding: 44px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.hours-side h3{ font-size: clamp(26px,3vw,36px); font-weight: 800; line-height: 1.1; }
.hours-side p{ color: rgba(255,255,255,.7); font-size: 14.5px; line-height: 1.6; }
.hours-table{ padding: 30px 40px; }
.hours-row{ display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.hours-row:last-child{ border-bottom: none; }
.hours-row .day{ font-weight: 700; }
.hours-row .time{ color: var(--muted); }
.hours-row.closed .time{ color: #c14646; }
@media (max-width: 760px){ .hours-block{ grid-template-columns: 1fr; } .hours-side, .hours-table{ padding: 32px 24px; } }
/* ---------------- Forms ---------------- */
.form-card{
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--radius-md); padding: 32px; box-shadow: var(--shadow-card);
}
@media (max-width: 640px){ .form-card{ padding: 22px 20px; } }
/* Success state — shown by js/form.js only after the backend confirms the
write. Kept actionable: the visitor is told when to expect an answer and
how to reach us faster if they need to. */
.form-confirm{
background: var(--ok-bg); border: 1px solid rgba(19,107,69,.18);
border-radius: var(--radius-md); padding: 26px 28px;
}
.form-confirm h3{ font-family: var(--font-display); font-size: 21px; font-weight: 800; margin-bottom: 8px; color: var(--ok); }
.form-confirm p{ font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.form-confirm a{ font-weight: 700; color: var(--ink); text-decoration: underline; }
.form-error{
background: #fdecec; border: 1px solid rgba(193,70,70,.25); color: #9b2c2c;
border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px;
}
/* minmax(0,1fr) et non 1fr : une piste 1fr a pour minimum automatique la
largeur minimale de son contenu, et ne descend jamais en dessous. Le