:root { --bg: #f4f6f9; --panel: #ffffff; --border: #e2e6ec; --text: #1b2432; --text-muted: #667085; --primary: #2c5fd6; --primary-dark: #1f47ab; --accent: #e8833a; --car1: #1c2536; --car1-light: #3a4a68; --car2: #d94141; --car2-light: #f08a8a; --asphalt: #6b7280; --asphalt-line: #ffffff; --radius: 12px; --shadow: 0 4px 16px rgba(20, 30, 50, 0.08); font-size: 16px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; max-width: 100%; background: var(--bg); color: var(--text); font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html { overflow-x: hidden; scroll-behavior: smooth; } body { overflow-x: hidden; } /* Le header est en position:fixed (voir header.site-header ci-dessous) : il est donc retiré du flux normal et n'occupe plus d'espace à sa place d'origine. Ce padding-top compense sa hauteur pour que le contenu de page ne démarre pas sous le header. --header-h est calculée dynamiquement en JS (assets/js/ header-fixed.js, chargé sur chaque page juste après le header) car la hauteur réelle du header varie selon les points de rupture (padding, taille du logo) et selon que header-right passe ou non à la ligne. La valeur en dur ci-dessous n'est qu'un repli avant l'exécution du script. */ body { padding-top: var(--header-h, 76px); } a { color: var(--primary); } .topbar { background: linear-gradient(90deg, var(--accent), #f0a15f); color: #fff; text-align: center; font-size: 0.85rem; font-weight: 600; padding: 6px 12px; letter-spacing: 0.2px; line-height: 1.4; } header.site-header { display: flex; align-items: center; /* PAS de justify-content:space-between ici, volontairement : avec 3 enfants (logo, nav, header-right) ça répartissait l'espace libre EN FONCTION de la largeur du contenu de header-right (compteur "X marques · Y modèles" présent sur le comparateur, absent sur la page stats) -- la nav se retrouvait donc à une position horizontale différente d'une page à l'autre, ce qui donnait l'impression que "les rubriques bougent" en changeant de page. Désormais : logo et nav restent collés l'un à l'autre (juste l'écart de `gap`, toujours identique), et c'est header-right seul qui est poussé au bord droit via margin-left:auto -- la position de la nav ne dépend donc plus jamais de ce qu'il y a à droite. */ flex-wrap: wrap; gap: 8px 16px; padding: 16px 28px; background: var(--panel); border-bottom: 1px solid var(--border); max-width: 100%; /* Fixe en haut de l'écran, y compris pendant le défilement : le sélecteur de langue, le compteur de modèles et la nav restent toujours accessibles, quelle que soit la longueur de la page. position:sticky a été essayé en premier (garde sa place dans le flux, pas de calcul de padding compensatoire nécessaire) mais s'est révélé cassé sur ce site en test réel (vérifié en navigateur : un header ou même un simple
sticky ajouté en tout premier enfant de ne restait pas fixe au défilement, alors qu'un équivalent en position:fixed restait bien ancré) -- cause exacte non isolée malgré plusieurs pistes testées (overflow du body, scroll-behavior). Basculé sur position:fixed, qui fonctionne de façon fiable ; le compensating padding-top est géré sur body (voir plus haut) via assets/js/ header-fixed.js. */ position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 40; } .header-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; } .header-nav a { padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; } .header-nav a:hover, .header-nav a:focus-visible { background: var(--bg); color: var(--text); } .header-nav a[aria-current="page"] { background: rgba(44, 95, 214, 0.1); color: var(--primary); } .logo { display: flex; align-items: center; text-decoration: none; } .logo-img { display: block; height: 34px; width: auto; } .header-right { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; /* Toujours plaqué au bord droit, quelle que soit la largeur de son propre contenu (compteur marques/modèles présent ou non selon la page) -- c'est ce qui garantit que le logo et la nav (à gauche) restent, eux, à une position fixe d'une page à l'autre. Voir le commentaire sur header.site-header. */ margin-left: auto; } .header-meta { font-size: 0.82rem; color: var(--text-muted); } .lang-switcher { position: relative; } .lang-current { border: 1.5px solid var(--border); background: #fff; border-radius: 8px; padding: 7px 12px; font-size: 0.82rem; font-weight: 700; cursor: pointer; color: var(--text); white-space: nowrap; } .lang-current:hover { border-color: var(--primary); color: var(--primary); } .lang-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; min-width: 150px; z-index: 30; display: flex; flex-direction: column; gap: 2px; } /* Le sélecteur de langue doit rester masqué tant qu'on n'a pas cliqué dessus : sans cette règle, le "display: flex" ci-dessus écrase l'attribut [hidden] et le menu reste visible en permanence. */ .lang-menu[hidden] { display: none; } .lang-option { display: block; padding: 8px 10px; border-radius: 7px; font-size: 0.88rem; color: var(--text); text-decoration: none; } .lang-option:hover { background: var(--bg); } .lang-option.active { background: rgba(44, 95, 214, 0.1); color: var(--primary-dark); font-weight: 700; pointer-events: none; } .prehome { background: linear-gradient(135deg, #f4f6f9 0%, #eef1f5 55%, #e8ecf3 100%); border-bottom: 1px solid var(--border); padding: 52px 24px 44px; text-align: center; } .prehome-inner { max-width: 760px; margin: 0 auto; position: relative; } .prehome-logo-wrap { display: flex; justify-content: center; margin-bottom: 30px; } .prehome-logo { height: 96px; width: auto; filter: drop-shadow(0 16px 28px rgba(44, 95, 214, 0.22)); } .prehome-title { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 16px; color: var(--text); } .prehome-sub { font-size: 1.1rem; color: var(--text-muted); margin: 0 auto 30px; line-height: 1.6; max-width: 560px; } .prehome-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; margin: 0 auto 40px; max-width: 640px; text-align: left; } /* Volontairement SANS fond blanc, bordure ni ombre : ces éléments sont purement informatifs (ils ne font rien au clic). Leur donner l'apparence d'un bouton (comme avant, avec pastille arrondie + ombre) laissait croire à tort qu'ils étaient cliquables, alors que seul le vrai CTA en dessous l'est. */ .prehome-feature { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; font-weight: 500; color: var(--text-muted); line-height: 1.4; cursor: default; } .prehome-feature-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(44, 95, 214, 0.1); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; } .prehome-cta { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; padding: 17px 34px; border-radius: 999px; box-shadow: 0 10px 28px rgba(44, 95, 214, 0.32); transition: transform 0.15s ease, box-shadow 0.15s ease; } .prehome-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(44, 95, 214, 0.4); } /* Version "vitrine" : page dédiée (plus de comparateur en dessous), on centre verticalement le bloc pour qu'il occupe joliment l'espace disponible, avec des touches de couleur douces en fond pour un rendu plus premium. */ .prehome-standalone { position: relative; overflow: hidden; min-height: calc(100vh - 74px); display: flex; align-items: center; padding: 64px 24px; background: radial-gradient(620px circle at 12% 18%, rgba(44, 95, 214, 0.10), transparent 60%), radial-gradient(520px circle at 88% 82%, rgba(232, 131, 58, 0.10), transparent 60%), linear-gradient(135deg, #f4f6f9 0%, #eef1f5 55%, #e8ecf3 100%); } /* ---------------- Sections de contenu sous la vitrine (comment ça marche, cas d'usage, FAQ) : du vrai texte structuré plutôt qu'un seul paragraphe, utile à la fois pour la lecture et pour le référencement. ---------------- */ .page-section { padding: 64px 24px; border-bottom: 1px solid var(--border); } .page-section:nth-of-type(even) { background: #fff; } .section-inner { max-width: 920px; margin: 0 auto; } .section-title { font-size: 1.7rem; font-weight: 800; text-align: center; margin: 0 0 12px; color: var(--text); } .section-sub { text-align: center; color: var(--text-muted); max-width: 560px; margin: 0 auto 40px; line-height: 1.6; } .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .step-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; text-align: left; } .step-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; font-weight: 800; font-size: 0.95rem; margin-bottom: 14px; } .step-card h3 { margin: 0 0 8px; font-size: 1.05rem; } .step-card p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; } .usecases-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .usecases-list li { display: flex; align-items: flex-start; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; font-size: 0.92rem; line-height: 1.5; color: var(--text); } .usecases-list li::before { content: "✓"; flex-shrink: 0; color: var(--primary); font-weight: 800; } /* Liens "comparaisons populaires" : quelques paires pré-remplies (?c1=...&c2=...) vers le comparateur, utiles pour le référencement (ancre de texte descriptive vers une page interne) et pour l'utilisateur pressé qui veut un exemple concret en un clic. */ .popular-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .popular-compare-link { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; font-size: 0.92rem; font-weight: 700; color: var(--text); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; } .popular-compare-link:hover, .popular-compare-link:focus-visible { border-color: var(--primary); box-shadow: var(--shadow); } .popular-compare-link::before { content: "⇄"; color: var(--primary); font-weight: 800; flex-shrink: 0; } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 20px; } .faq-item summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; position: relative; padding-right: 28px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 1.3rem; font-weight: 400; color: var(--primary); } .faq-item[open] summary::after { content: "−"; } .faq-item p { margin: 0 0 16px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; } /* Colonne latérale (vitrine des marques avec logo) + contenu principal. Le tout est plafonné en largeur et centré horizontalement (margin: 0 auto) : sans ça, sur un écran large, ce bloc reste collé au bord gauche de la page et laisse un grand vide à droite, ce qui donnait l'impression que le site entier était "poussé" vers la gauche plutôt que centré. */ .layout { display: grid; /* minmax(0, 1fr) et non un simple "1fr" : une grille CSS ne laisse jamais une colonne rétrécir sous la taille de son contenu (min-width:auto implicite). Comme cette colonne contient le SVG du comparateur (dessiné dans un repère de plusieurs milliers d'unités), sans ce correctif la grille refusait de rétrécir sous ~900px et le navigateur mobile dézoomait toute la page pour tout faire tenir. */ grid-template-columns: 240px minmax(0, 1fr); gap: 0; max-width: 1440px; margin: 0 auto; /* 74px (en-tête) + ~35px (fil d'Ariane, voir .breadcrumb) */ min-height: calc(100vh - 109px); width: 100%; } /* Fil d'Ariane : discret (petite taille, couleurs neutres), présent uniquement sur le comparateur (la page vitrine n'en a pas besoin, elle EST la racine "Accueil"). Aide au repérage ("je suis sur la page comparateur, la page d'accueil est juste à côté") et fournit un lien de retour toujours visible, sans dupliquer le logo déjà cliquable. */ .breadcrumb { padding: 8px 28px; font-size: 0.8rem; color: var(--text-muted); background: var(--panel); border-bottom: 1px solid var(--border); } .breadcrumb a { color: var(--text-muted); text-decoration: none; } .breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--primary); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; } aside.sidebar { border-right: 1px solid var(--border); padding: 22px 18px; background: var(--panel); min-width: 0; } aside.sidebar .sidebar-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 12px; font-weight: 700; } .brand-chip-list { display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; /* Réserve la place de la barre de défilement à l'avance : sans ça, une barre de défilement "flottante" (macOS, tactile...) qui n'apparaît qu'au moment de faire défiler la liste se superpose au contenu plutôt que de décaler la mise en page, et venait recouvrir le nombre de modèles aligné à droite de chaque marque. */ scrollbar-gutter: stable; padding-right: 6px; } .brand-chip { border: none; background: transparent; text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 0.92rem; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .brand-chip:hover { background: var(--bg); } /* Actif uniquement quand les DEUX voitures pointent vers cette marque : ce raccourci filtre les deux à la fois, l'état visuel doit rester honnête sur ce qu'il représente. */ .brand-chip.active { background: rgba(44, 95, 214, 0.1); color: var(--primary-dark); font-weight: 600; } .brand-chip .brand-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-chip .brand-logo { flex-shrink: 0; width: 18px; height: 18px; object-fit: contain; opacity: 0.85; } .brand-chip .count { color: var(--text-muted); font-size: 0.78rem; flex-shrink: 0; } main.content { padding: 28px 32px 48px; max-width: 1180px; min-width: 0; } main.content h1 { margin: 0 0 4px; font-size: 1.7rem; } main.content > p.lead { color: var(--text-muted); margin: 0 0 22px; font-size: 0.96rem; } .picker-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: end; margin-bottom: 26px; } .picker-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .picker-field label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; } .picker-field label.car1-label { color: var(--car1); } .picker-field label.car2-label { color: var(--car2); } /* Le sélecteur de marque de chaque voiture est un simple , se cale pile sur le bord bas du dernier champ -- quel que soit ce champ. */ .vs-badge { font-weight: 800; color: var(--text-muted); text-align: center; } .swap-btn { border: 1.5px solid var(--border); background: #fff; border-radius: 9px; padding: 9px 12px; cursor: pointer; font-size: 1.05rem; line-height: 1; } .swap-btn:hover { background: var(--bg); } /* Le résumé de comparaison (.stats-card) est empilé EN DESSOUS du schéma (.stage-card), plutôt qu'à côté en colonne latérale comme avant : ça laisse toute la largeur de la page aux graphes de comparaison (schéma vue de haut + graphique de hauteur, voir .stage-visuals), plutôt que de la partager avec le résumé (retour utilisateur du 2026-08-02 : "laisser plus de place aux graphes"). Le résumé lui-même profite aussi de cette pleine largeur pour s'organiser en 2 colonnes voiture 1/voiture 2 (voir .compare-header/.vs-bars) au lieu d'empiler les 2 fiches verticalement. */ .result-grid { display: flex; flex-direction: column; gap: 22px; } .stage-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; min-width: 0; } .stage-caption { font-size: 0.8rem; color: var(--text-muted); margin: 12px 2px 0; text-align: center; } .legend { display: flex; gap: 20px; justify-content: center; margin-bottom: 8px; flex-wrap: wrap; } /* Bascule "avec rétroviseurs dépliés" : change la largeur utilisée par le schéma et le mode garage (voir effectiveCar() dans app.js), reste sans effet visible pour un modèle qui n'a pas cette donnée (voir mirrors-note ci-dessous et carFact()). */ .mirror-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.85rem; font-weight: 600; color: var(--text); cursor: pointer; margin-bottom: 10px; } .mirrors-note { font-size: 0.78rem; color: var(--text-muted); margin: 8px 0 0; } .legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; } .view-toggle, .align-toggle { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .align-toggle { margin-bottom: 18px; } .align-toggle span { font-size: 0.8rem; color: var(--text-muted); margin-right: 2px; } .view-btn, .align-btn { border: 1.5px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--text-muted); overflow-wrap: break-word; } .view-btn:hover, .align-btn:hover { border-color: var(--primary); color: var(--primary); } .view-btn.active, .align-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* Anneau de focus visible au clavier sur tous les boutons de bascule (vue, alignement, inversion, marque, préréglages de garage) : par défaut ces boutons n'ont aucun style de focus propre et n'affichent que le focus natif du navigateur (souvent invisible sur fond blanc), ce qui rend la navigation au clavier difficile à suivre. :focus-visible n'affiche l'anneau qu'au clavier (pas au clic souris), pour ne pas ajouter de bruit visuel inutile à l'usage courant à la souris/tactile. */ .view-btn:focus-visible, .align-btn:focus-visible, .swap-btn:focus-visible, .brand-chip:focus-visible, .preset-btn:focus-visible, .lang-current:focus-visible, .lang-option:focus-visible, .catalogue-brand-header:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } .swatch.c1 { background: var(--car1); } .swatch.c2 { background: var(--car2); } .garage-panel { display: flex; flex-direction: column; gap: 10px; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; } .garage-presets { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .preset-btn { border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 6px 12px; font-size: 0.8rem; font-weight: 600; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.3; } .preset-btn:hover { border-color: var(--primary); color: var(--primary); } .preset-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } .preset-btn .preset-dims { font-size: 0.7rem; font-weight: 500; opacity: 0.8; } .garage-custom { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .garage-field { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); font-weight: 600; } .garage-input { width: 72px; padding: 6px 8px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 0.9rem; color: var(--text); } .garage-input:focus { outline: 2px solid var(--primary); } .garage-cars { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .garage-car-toggle { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; color: var(--text); cursor: pointer; } .garage-margin { font-size: 0.82rem; color: var(--text-muted); margin-top: 3px; } .garage-margin.over { color: var(--car2); font-weight: 600; } .car-fact.garage-miss { border-color: var(--car2); } svg#parkingSvg { width: 100%; max-width: 100%; height: auto; max-height: 72vh; display: block; margin: 0 auto; min-width: 0; } /* ---- "Comparaison de hauteur" : intégrée DANS la même stage-card que le schéma vue de haut, désormais À CÔTÉ de lui (et non plus en dessous, voir #stage-visuals) -- un seul bloc visuel cohérent avec la comparaison de tailles, les deux visibles au même niveau sans avoir à faire défiler la page (retour utilisateur du 2026-07-24 : "remonte la partie comparaison de hauteur plus au niveau de la comparaison de taille"). Toujours affichée quel que soit le mode choisi dans le view-toggle (côte à côte / superposition / garage -- tous en plan, vue de haut) puisque celle-ci est une vue de face dédiée à la hauteur, avec deux repères fixes (porte de garage standard, humain de 1,80 m) -- voir renderHeightChart() dans app.js. Contenu entièrement injecté par JS (buildHeightCard()) : le HTML ne fournit que 2 conteneurs (.stage-main pour le schéma, #heightCard vide pour le graphique de hauteur) à l'intérieur de #stage-visuals. */ .stage-visuals { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px 28px; align-items: start; } .stage-main { min-width: 0; } #heightCard { min-width: 0; padding-left: 24px; /* Séparateur discret plutôt qu'une bordure/ombre dupliquée : signale que c'est une sous-section distincte du schéma à côté, sans donner l'impression de deux cartes empilées. Devient un séparateur horizontal en dessous de 900px, voir plus bas -- les 2 colonnes repassent alors en une seule, empilée verticalement. */ border-left: 1px dashed var(--border); } .height-chart-title { margin: 0 0 14px; font-size: 1rem; font-weight: 800; color: var(--text); text-align: center; } svg#heightSvg { width: 100%; max-width: 620px; height: auto; max-height: 56vh; display: block; margin: 0 auto; min-width: 0; } .height-notes { max-width: 560px; margin: 14px auto 0; display: flex; flex-direction: column; gap: 4px; } .height-notes p { margin: 0; font-size: 0.88rem; color: var(--text); text-align: center; } .height-disclaimer { max-width: 620px; margin: 16px auto 0; } @media (max-width: 500px) { .height-chart-title { font-size: 1rem; } } .stats-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .stats-card h3 { margin: 0; font-size: 1rem; } .car-fact { border-left: 4px solid var(--border); padding: 4px 0 4px 12px; } .car-fact.c1 { border-color: var(--car1); } .car-fact.c2 { border-color: var(--car2); } .car-fact .name { font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 7px; } .car-fact-logo { flex-shrink: 0; width: 18px; height: 18px; object-fit: contain; opacity: 0.85; } .stats-card.loading { opacity: 0.55; transition: opacity 0.15s ease; } .cat { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg); color: var(--text-muted); padding: 2px 7px; border-radius: 999px; margin: 4px 0 6px; } /* Badge de catégorie coloré : un repère visuel rapide (gabarit citadine/berline en bleu, SUV en vert de plus en plus soutenu selon la taille, monospace en violet, sportive en rouge, utilitaire en ambre) sans dépendre uniquement du texte -- utile en un coup d'œil, notamment sur mobile où le texte de la catégorie est petit. */ .cat[data-cat="citadine"], .cat[data-cat="compacte"], .cat[data-cat="berline"] { background: #e8eefc; color: #2c5fd6; } .cat[data-cat="suv_compact"] { background: #e7f6ec; color: #2f9e52; } .cat[data-cat="suv_medium"] { background: #d9f0e2; color: #1f7a3d; } .cat[data-cat="suv_large"] { background: #c9e8d4; color: #145c2c; } .cat[data-cat="monospace"] { background: #f1e8fb; color: #7a3fc4; } .cat[data-cat="sportive"] { background: #fbe8e8; color: #c62828; } .cat[data-cat="utilitaire"] { background: #fbf1e0; color: #a8710a; } .car-fact .dims { font-size: 0.88rem; color: var(--text); line-height: 1.5; } .car-fact-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; } .fiche-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; text-decoration: none; background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(44, 95, 214, 0.3); transition: background 0.15s ease, transform 0.1s ease; } .fiche-btn:hover, .fiche-btn:focus-visible { background: var(--primary-dark); transform: translateY(-1px); } .fiche-btn-secondary { background: transparent; color: var(--primary); box-shadow: none; border: 1.5px solid var(--primary); } .fiche-btn-secondary:hover, .fiche-btn-secondary:focus-visible { background: rgba(44, 95, 214, 0.08); color: var(--primary-dark); } /* En-tête 2 colonnes voiture 1 / voiture 2 (logo+nom, catégorie, liens fiche, note rétroviseurs) -- profite de la pleine largeur récupérée en déplaçant le résumé sous les graphes (voir .result-grid) plutôt que d'empiler les 2 fiches verticalement. */ .compare-header { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } @media (max-width: 560px) { .compare-header { grid-template-columns: 1fr; gap: 14px; } } /* Barres "vs" combinées (longueur/largeur/hauteur/surface) : UNE seule piste par dimension, partagée entre les 2 voitures au prorata (v1/(v1+v2)), plutôt que 2 jeux de barres séparés calés chacun sur son propre maximum -- moitié moins de lignes pour la même info, et la proportion entre les 2 voitures se lit directement dans une seule barre. */ /* Tentative abandonnée (2026-08-03) : passer .vs-bars en grille CSS + .vs-bar-row en display:contents pour positionner le repère médian via grid-row:1/-1. Cassait totalement la mise en page en navigateur réel -- un item de grille explicitement placé (grid-column/grid-row) réserve ses cellules AVANT l'auto-placement des autres items, donc le repère (posé en colonne 2 sur toutes les lignes) faisait "sauter" tous les tracks/valeurs auto-placés d'une colonne à chaque ligne. Retour à la structure flex/grid d'origine (taille de graphique inchangée) + un unique overlay position:absolute sur .vs-bars, positionné par calc() plutôt que par la grille. */ .vs-bars { display: flex; flex-direction: column; gap: 10px; position: relative; } .vs-bar-row { display: grid; grid-template-columns: 56px 1fr 60px 60px; align-items: center; gap: 8px; } .vs-bar-label { font-size: 0.78rem; color: var(--text-muted); } .vs-bar-track { display: flex; position: relative; height: 9px; border-radius: 999px; background: var(--bg); overflow: hidden; } /* Ligne médiane (repère 50/50), continue sur toute la hauteur du bloc, quelle que soit la couleur qui domine dans chaque barre (retour utilisateur du 2026-08-02/03 : "pas visible quand c'est la couleur noire qui domine" + "rend la [ligne] continue traversant les graphes"). Un seul repère, en overlay position:absolute sur .vs-bars (pas par barre comme l'ancien ::after sur .vs-bar-track), du haut au bas du bloc -- donc plus de coupure dans les espaces entre barres. Position calculée par calc() pour retomber exactement au centre de la colonne piste (1fr) de .vs-bar-row : cette colonne va de 56px+8px=64px (bord gauche, après le libellé) à 64px+trackWidth (bord droit, avant les 2 colonnes de valeurs 60px+8px+60px+8px=136px) -- son centre est donc à 50% - (136px-64px)/2 = 50% - 36px du bord gauche de .vs-bars (à condition que .vs-bars n'ait pas son propre padding, ce qui est le cas). mix-blend-mode: difference (plutôt qu'une couleur fixe rgba(0,0,0,.28), invisible sur le remplissage sombre de la voiture 1) garantit un contraste visible qu'il tombe sur un fond clair (piste vide) ou un remplissage sombre (navy) ou coloré (rouge). */ .vs-bars::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 36px); width: 2px; background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 2; } .vs-bar-fill { display: block; height: 100%; transition: width 0.2s ease; } .vs-bar-fill.c1 { background: var(--car1); } .vs-bar-fill.c2 { background: var(--car2); } .vs-bar-val { font-size: 0.8rem; font-weight: 700; text-align: right; white-space: nowrap; } .vs-bar-val.c1 { color: var(--car1); } .vs-bar-val.c2 { color: var(--car2); } @media (max-width: 560px) { .vs-bar-row { grid-template-columns: 1fr; gap: 2px; } .vs-bar-val { text-align: left; } /* En dessous de 560px, .vs-bar-row s'empile en 1 seule colonne : la piste occupe alors toute la largeur de .vs-bars (comme le libellé et les valeurs), donc son centre réel est à 50% du bloc, pas à "50% - 36px" (qui suppose les 4 colonnes du mode large) -- on recale juste la position de l'overlay, le reste (mix-blend-mode, continuité sur toute la hauteur) ne change pas. */ .vs-bars::after { left: 50%; } } /* Chips compactes pour le résumé texte (qui est plus longue/large/haute/grande, ou égalité) : reprennent exactement les mêmes phrases que l'ancien .diff-box, juste présentées en puces qui s'enchaînent en ligne (avec un repère de couleur sur la voiture "gagnante") plutôt qu'empilées en paragraphe -- plus compact et plus graphique (retour utilisateur du 2026-08-02). */ .diff-chips { display: flex; flex-wrap: wrap; gap: 8px; } .diff-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border-radius: 999px; padding: 7px 12px; font-size: 0.82rem; line-height: 1.3; } .diff-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--border); } .diff-chip.c1::before { background: var(--car1); } .diff-chip.c2::before { background: var(--car2); } .fit-note { font-size: 0.8rem; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 10px; } .share-row { display: flex; gap: 8px; } .share-row button { flex: 1; border: 1.5px solid var(--border); background: #fff; border-radius: 8px; padding: 8px 10px; font-size: 0.82rem; cursor: pointer; font-weight: 600; color: var(--text); } .share-row button:hover { border-color: var(--primary); color: var(--primary); } /* Comme main.content, le pied de page était plafonné en largeur (max-width) mais sans margin:auto : il restait donc collé au bord gauche au lieu d'être centré, contribuant à l'effet "site poussé à gauche" sur les grands écrans. */ footer.site-footer { border-top: 1px solid var(--border); padding: 22px 32px 40px; color: var(--text-muted); font-size: 0.82rem; line-height: 1.6; max-width: 1440px; margin: 0 auto; } footer.site-footer a { display: inline-block; margin-top: 4px; color: var(--primary); font-weight: 600; text-decoration: none; } footer.site-footer a:hover, footer.site-footer a:focus-visible { text-decoration: underline; } @media (max-width: 900px) { .prehome { padding: 40px 20px 34px; } .prehome-logo { height: 72px; } .prehome-logo-wrap { margin-bottom: 22px; } .prehome-title { font-size: 1.9rem; } .prehome-sub { font-size: 0.95rem; } /* Sur la page vitrine dédiée, on désactive le centrage vertical plein écran : sur mobile, la hauteur de viewport varie trop (barre d'adresse, clavier...) et forcer une grande hauteur minimale crée un vide disgracieux avant le footer. */ .prehome-standalone { min-height: auto; padding: 44px 20px 40px; display: block; } .page-section { padding: 40px 18px; } .section-title { font-size: 1.4rem; } .steps-grid, .usecases-list { grid-template-columns: 1fr; } .prehome-features { grid-template-columns: 1fr; max-width: 420px; } .layout { grid-template-columns: minmax(0, 1fr); min-height: auto; } aside.sidebar { border-right: none; border-bottom: 1px solid var(--border); padding: 14px 16px; } .brand-chip-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: none; padding-bottom: 6px; scroll-snap-type: x proximity; } .brand-chip { flex: 0 0 auto; scroll-snap-align: start; padding: 9px 12px; } main.content { padding: 20px 16px 40px; } .picker-panel { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; } /* Le bouton d'inversion reste visible mais recentré au lieu d'être une colonne de grille */ .vs-badge { padding-bottom: 0; display: flex; justify-content: center; } .vs-badge .swap-btn { width: auto; padding: 10px 22px; font-size: 1.2rem; } /* Sous cette largeur, plus assez de place pour le schéma ET le graphique de hauteur côte à côte sans les rendre tous les deux minuscules -- on revient à un empilement vertical, avec le séparateur qui repasse du côté gauche au-dessus. */ .stage-visuals { grid-template-columns: minmax(0, 1fr); gap: 0; } #heightCard { padding-left: 0; border-left: none; margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--border); } /* Cibles tactiles plus grandes pour tous les boutons de mode/alignement/preset */ .view-btn, .align-btn, .preset-btn, .swap-btn, .share-row button { padding: 10px 16px; font-size: 0.88rem; } .garage-car-toggle { font-size: 0.9rem; } .garage-car-toggle input[type="checkbox"] { width: 18px; height: 18px; } /* Empêche le zoom automatique de Safari iOS au focus (nécessite >= 16px) */ select.car-select, select.brand-select, .garage-input { font-size: 16px; } main.content h1 { font-size: 1.3rem; } main.content > p.lead { font-size: 0.9rem; } .garage-panel { padding: 14px 12px; } .garage-custom { gap: 14px; } .garage-cars { gap: 14px; } } @media (max-width: 480px) { header.site-header { padding: 12px 16px; } .header-meta { display: none; } .logo-img { height: 26px; } .topbar { font-size: 0.76rem; padding: 6px 10px; } footer.site-footer { padding: 18px 16px 32px; font-size: 0.78rem; } .share-row { flex-direction: column; } .prehome-standalone { padding: 32px 16px 32px; } .prehome-logo { height: 56px; } .prehome-logo-wrap { margin-bottom: 18px; } .prehome-title { font-size: 1.55rem; } .prehome-sub { font-size: 0.9rem; margin-bottom: 20px; } .prehome-feature { font-size: 0.8rem; padding: 8px 13px; } .prehome-cta { padding: 13px 24px; font-size: 0.95rem; } /* Libère le plus de largeur possible pour le schéma : c'est l'élément qui a le plus besoin de place sur un petit écran, donc on réduit les marges qui l'entourent. */ main.content { padding: 16px 10px 32px; } .stage-card, .stats-card { padding: 12px 8px; } .picker-panel { padding: 12px; } svg#parkingSvg { max-height: 60vh; } } @media (max-width: 380px) { .view-toggle, .align-toggle, .garage-presets, .garage-custom, .garage-cars { gap: 6px; } .view-btn, .align-btn, .preset-btn { flex: 1 1 auto; text-align: center; } .view-btn { font-size: 0.78rem; padding: 9px 10px; } .picker-panel { padding: 12px; } .stage-card, .stats-card { padding: 10px 6px; } main.content h1 { font-size: 1.25rem; } } /* ---------------- Page "Évolution de la taille des voitures" (/stats/) ---------------- */ /* Les 2 premières sections (titre + contrôles/graphiques) forment un seul bloc de lecture -- espacement resserré entre elles et pas de séparateur, pour "remonter" les graphiques dans le viewport plutôt que les faire commencer après un plein écran de titre (retour utilisateur du 2026-07-24). La section Méthodologie plus bas garde l'espacement normal, comme un vrai bloc à part. */ #evolution-intro { padding: 40px 24px 12px; border-bottom: none; } #evolution-charts { padding-top: 8px; } #evolution-charts .section-inner { max-width: 1160px; } .evolution-controls { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 24px; } .evolution-control { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); } .evolution-control select { font: inherit; font-weight: 600; color: var(--text); padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); min-width: 200px; cursor: pointer; } .evolution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 24px; } .evolution-chart-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px 10px; } .evolution-chart-card h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--text); } .evolution-chart { width: 100%; height: auto; display: block; min-height: 260px; } .evolution-point-hit { cursor: pointer; } /* Tooltip personnalisé au survol d'un point (remplace les SVG natifs, voir assets/js/stats.js). Positionné en fixed et déplacé via JS au pointermove. */ .evolution-tooltip { position: fixed; z-index: 50; background: #1c2536; color: #fff; font-size: 0.85rem; line-height: 1.4; padding: 8px 12px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); pointer-events: none; max-width: 220px; white-space: nowrap; } .evolution-tooltip strong { color: #fff; } .evolution-tooltip-count { color: rgba(255, 255, 255, 0.65); font-size: 0.78rem; } .evolution-insight { margin: 28px auto 0; max-width: 760px; min-height: 88px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.05rem; font-weight: 600; color: var(--text); background: rgba(44, 95, 214, 0.07); border: 1px solid rgba(44, 95, 214, 0.18); border-radius: var(--radius); padding: 16px 20px; box-sizing: border-box; } @media (max-width: 900px) { .evolution-grid { grid-template-columns: 1fr; } } @media (max-width: 500px) { .evolution-controls { flex-direction: column; align-items: stretch; } .evolution-control select { min-width: 0; width: 100%; } } /* ---------------- Fiche modèle (/fiche/) et fiche génération (/generation/) ---------------- */ .fiche-inner, .generation-inner { max-width: 720px; } .fiche-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .fiche-logo { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; } .fiche-head h1 { margin: 0 0 6px; font-size: 1.5rem; } .fiche-blueprint { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 20px; display: flex; justify-content: center; } .fiche-blueprint svg { max-width: 320px; } .fiche-specs, .generation-specs { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 20px; margin-bottom: 28px; } .fiche-spec-row, .generation-spec-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; } .fiche-spec-row:last-child, .generation-spec-row:last-child { border-bottom: none; } .fiche-spec-row span, .generation-spec-row span { color: var(--text-muted); } .fiche-gen-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 28px; } .fiche-gen-card { display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .fiche-gen-card:hover, .fiche-gen-card:focus-visible { border-color: var(--primary); box-shadow: var(--shadow); } .fiche-gen-years { color: var(--text-muted); font-size: 0.85rem; } .fiche-gen-dims { font-size: 0.85rem; font-weight: 600; } .fiche-cta { margin-top: 8px; } .fiche-cta a, .generation-links a { display: inline-block; font-weight: 700; color: var(--primary); text-decoration: none; } .fiche-cta a:hover, .generation-links a:hover { text-decoration: underline; } .generation-links { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; } .critair-box { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0; } .critair-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 22px; min-width: 130px; } .critair-badge .fuel { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; } .critair-pill { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; font-size: 1.1rem; color: #fff; } .critair-pill[data-critair="1"] { background: #7b4fa6; } .critair-pill[data-critair="2"] { background: #e0b400; color: #2a2200; } .critair-pill[data-critair="3"] { background: #e8833a; } .critair-pill[data-critair="4"] { background: #8a3b2b; } .critair-pill[data-critair="5"] { background: #6b7280; } .critair-pill[data-critair="non_classe"] { background: #b0b8c4; font-size: 0.62rem; } .critair-disclaimer { font-size: 0.85rem; color: var(--text-muted); background: rgba(232, 131, 58, 0.08); border: 1px solid rgba(232, 131, 58, 0.25); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 24px; } @media (max-width: 500px) { .fiche-gen-list { grid-template-columns: 1fr; } .fiche-head { gap: 12px; } .fiche-logo { width: 44px; height: 44px; } } /* ---- Page Catalogue (/catalogue/) : modèles regroupés PAR MARQUE (un logo de marque agrandi par groupe, voir .catalogue-brand-logo -- remplace les anciennes icônes 28px par carte), avec recherche + filtre catégorie, sans passer par le comparateur 2-voitures. Le <select> marque a été retiré le 2026-07-21 : il faisait doublon avec ce regroupement visuel (voir commentaire en tête d'assets/js/catalogue.js). ---- */ .catalogue-controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-bottom: 18px; } .catalogue-search { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1.5px solid var(--border); font-size: 0.95rem; color: var(--text); background: #fff; } .catalogue-search:focus { outline: 2px solid var(--primary); } .catalogue-count { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 14px; } .catalogue-count b { color: var(--text); } .catalogue-grid { display: flex; flex-direction: column; gap: 26px; } .catalogue-brand-group { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); /* Le padding horizontal/bas vit sur le groupe ; le header (bouton) gère son propre padding pour que toute sa surface reste cliquable jusqu'aux bords. */ padding: 0 20px 20px; } /* Replié : pas de padding-bas ni de modèles visibles -- juste la ligne d'en-tête, pour que 67 marques tiennent dans une liste courte à parcourir. */ .catalogue-brand-group:not(.expanded) { padding-bottom: 0; } .catalogue-brand-heading { margin: 0; } /* Reset des styles <button> natifs : doit se fondre visuellement dans la carte, pas ressembler à un bouton de formulaire. Toute la ligne (logo + nom + compteur + chevron) est cliquable/activable au clavier -- c'est un vrai <button>, pas un div avec un rôle bricolé, pour l'accessibilité clavier/lecteur d'écran de base. */ .catalogue-brand-header { display: flex; align-items: center; gap: 14px; width: 100%; border: none; background: none; padding: 18px 0 14px; margin: 0; font: inherit; text-align: left; cursor: pointer; border-bottom: 1px solid var(--border); } .catalogue-brand-group:not(.expanded) .catalogue-brand-header { border-bottom: none; padding-bottom: 18px; } .catalogue-brand-header:hover .catalogue-brand-name { color: var(--primary); } /* Un seul logo par marque, sensiblement plus grand que les anciennes icônes 28px affichées sur chaque carte individuelle -- il porte à lui seul l'identité visuelle de tout le groupe qui suit. */ .catalogue-brand-logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; } .catalogue-brand-name { font-size: 1.15rem; font-weight: 800; color: var(--text); } .catalogue-brand-count { margin-left: auto; font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; } /* Chevron : pointe vers le bas replié, vers le haut déplié -- rotation CSS plutôt que deux caractères différents, pour une transition douce plutôt qu'un saut. */ .catalogue-brand-chevron { flex-shrink: 0; color: var(--text-muted); font-size: 0.8rem; transition: transform 0.15s ease; } .catalogue-brand-group.expanded .catalogue-brand-chevron { transform: rotate(180deg); } /* Wrapper commun affiché/masqué au dépli d'un groupe -- contient l'historique de marque (optionnel, voir .catalogue-brand-history) puis la grille de cartes modèle (.catalogue-brand-models). Les deux sont des enfants EN DEHORS l'un de l'autre (pas l'historique comme 1er item de la grille de cartes) : une 1ère version mettait l'historique en 1er enfant de .catalogue-brand-models avec grid-column:1/-1 pour qu'il occupe toute la largeur, mais ça a fini par étirer la hauteur des cartes voisines dans certains cas -- retour utilisateur du 2026-08-04, "ne pas impacter la taille des cartes des 1ers modèles". En sortant complètement l'historique de cette grille, sa propre hauteur ne peut plus jamais influencer celle des cartes. */ .catalogue-brand-content[hidden] { display: none; } .catalogue-brand-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } /* Petit historique de marque (2026-08-04) : une box à part, au-dessus de la grille de cartes modèle, légèrement démarquée par un fond teinté (var(--bg), le gris clair de fond de page, qui contraste avec le blanc de .catalogue-brand-group) plutôt qu'un simple paragraphe de texte muet -- pour bien la distinguer visuellement des cartes modèle qui suivent, comme demandé par l'utilisateur. */ .catalogue-brand-history { margin: 0 0 16px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; font-size: 0.88rem; line-height: 1.55; color: var(--text-muted); } .catalogue-model-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; text-decoration: none; color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease; min-width: 0; } .catalogue-model-link:hover, .catalogue-model-link:focus-visible { border-color: var(--primary); box-shadow: var(--shadow); } .catalogue-model-name { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .catalogue-empty { color: var(--text-muted); padding: 24px 0; } @media (max-width: 700px) { .catalogue-controls { grid-template-columns: 1fr; } .catalogue-brand-group { padding: 14px 14px 16px; } .catalogue-brand-logo { width: 36px; height: 36px; } .catalogue-brand-name { font-size: 1.02rem; } }