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 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); padding: 18px 20px 20px; } .catalogue-brand-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } /* 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 { margin: 0; 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; } .catalogue-brand-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .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; } }