par défaut (760px max), plus étroit qu'une page pleine largeur, donc le .grid-3 générique (auto-fit, 240px min) ne tenait que 2 colonnes. Actif au-dessus de 700px ; en dessous, le comportement auto-fit par défaut de .grid-3 reprend la main et empile proprement sur mobile. */ @media (min-width: 701px) { .benefits-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .benefits-grid .card { padding: 18px; } } /* Carte sidebar "Nos outils" (14/09/2026) — version compacte, sur le côté, du bandeau .outils-banner, utilisée sur voiture-de-lannee.html et magazine.html à la demande de Serge (le bandeau plein format ne convenait pas à ces deux pages). Plusieurs boutons empilés dans une même sidebar-card : on ajoute un espacement entre eux, absent par défaut car .sidebar-card n'est pas un conteneur flex. */ .sidebar-card-outils a.btn-cta, .sidebar-card-outils a.btn-outline { margin-bottom: 8px; } .sidebar-card-outils a:last-child { margin-bottom: 0; } .sidebar-card-outils .sidebar-card-outils-soon { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: var(--or); color: var(--noir); font-size: 9px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; vertical-align: 1px; } /* Hero accueil en deux colonnes sur desktop */ .hero-split { max-width: 1100px; margin: 0 auto; padding: 56px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .hero-split .hero-text { text-align: left; animation: fade-in-left 0.7s ease both; } .hero-split .hero-text h1 { font-size: 38px; } .hero-split .hero-image { height: 420px; margin: 0; animation: fade-in-right 0.7s ease 0.15s both; } @keyframes fade-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } @keyframes fade-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 880px) { .hero-split { grid-template-columns: 1fr; padding: 40px 20px; } .hero-split .hero-text { text-align: center; } } /* Simulateur en deux colonnes sur desktop */ .sim-layout { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: 40px; align-items: start; } @media (max-width: 880px) { .sim-layout { grid-template-columns: 1fr; } } /* Images */ .hero-image { width: 100%; height: 380px; object-fit: cover; /* 21/09/2026 : les photos étaient désaturées de 15% (0.85) sur tout le site, ce qui participait nettement au ressenti "pas coloré" — corrigé en légère sursaturation (1.08) pour redonner leur couleur naturelle aux photos existantes, sans remplacer aucune image. */ filter: saturate(1.08) contrast(1.04); border-radius: 8px; } .hero-image-wrap { position: relative; margin: 0 0 40px; } .hero-image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,37,69,0) 40%, rgba(11,37,69,0.55) 100%); border-radius: 8px; } .card-image { width: 100%; height: 160px; object-fit: cover; filter: saturate(1.08) contrast(1.04); border-radius: 8px 8px 0 0; margin: -24px -24px 16px; width: calc(100% + 48px); } .card-icon-block { width: calc(100% + 48px); height: 160px; margin: -24px -24px 16px; border-radius: 8px 8px 0 0; background: linear-gradient(135deg, var(--noir) 0%, var(--or) 140%); display: flex; align-items: center; justify-content: center; } .card-image-full { height: 320px; object-fit: contain; background: var(--noir); filter: none; } .img-placeholder-hero { width: 100%; height: 320px; border-radius: 8px; background: repeating-linear-gradient(135deg, #eef0f3, #eef0f3 10px, #e2e5ea 10px, #e2e5ea 20px); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--gris-texte); margin-bottom: 24px; } .img-placeholder { width: 100%; height: 160px; border-radius: 8px 8px 0 0; margin: -24px -24px 16px; width: calc(100% + 48px); background: repeating-linear-gradient(135deg, #eef0f3, #eef0f3 10px, #e2e5ea 10px, #e2e5ea 20px); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--gris-texte); } /* Filet de sécurité pour la couverture du magazine (21/09/2026, élargissement de la couverture à la demande de Serge) — .heyzine-fold vient de heyzine.4.min.css (chargé depuis leur CDN) ; si ce fichier tarde à charger ou ne charge pas (réseau lent, bloqueur de scripts), cette règle locale garantit que l'image de couverture remplit quand même correctement son cadre (au lieu de s'afficher toute petite dans un grand cadre vide). Sans effet négatif si le CSS de Heyzine charge normalement : il définit le même comportement en interne pour ce composant. */ .heyzine-fold { position: relative; overflow: hidden; border-radius: 8px; background: var(--noir); } .heyzine-fold .img-front.fp-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Lecteur du magazine en fenêtre superposée (magazine.html uniquement, 10/09/2026) — évite de rediriger l'utilisateur vers heyzine.com pour lire le flip-book, il reste sur auto-phile.com. */ .magazine-modal { position: fixed; inset: 0; background: rgba(11, 37, 69, 0.75); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; animation: magazine-modal-fade 0.2s ease; } .magazine-modal[hidden] { display: none; } @keyframes magazine-modal-fade { from { opacity: 0; } to { opacity: 1; } } .magazine-modal-inner { position: relative; width: 100%; max-width: 960px; height: 85vh; background: var(--noir); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .magazine-modal-iframe { width: 100%; height: 100%; border: 0; display: block; } .magazine-modal-close { position: absolute; top: 10px; right: 10px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--blanc); color: var(--noir); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: transform 0.15s ease, background-color 0.15s ease; } .magazine-modal-close:hover { transform: scale(1.08); background: var(--or); color: var(--blanc); } @media (max-width: 640px) { .magazine-modal { padding: 0; } .magazine-modal-inner { max-width: 100%; height: 100%; border-radius: 0; } } /* --- Page d'accueil : bloc "Nos outils" dans le héros (le MVP du site, 14/09/2026) --- */ .hero-outils { padding: 40px 0 10px; } .hero-marque { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--or); font-weight: 700; margin: 0 0 6px; } .hero-outils h1 { font-size: 40px; margin: 0 0 10px; } .hero-outils .subtitle { color: var(--gris-texte); margin: 0 0 30px; max-width: 640px; } .card-outil { display: flex; flex-direction: column; position: relative; text-decoration: none; color: inherit; border-top: 3px solid var(--or); } .card-outil h3 { margin-top: 4px; } .card-outil > p { flex-grow: 1; } .card-outil--bientot { opacity: 0.72; border-top-color: #D7E3F4; } /* Chaque outil s'adresse à une personne différente, à un moment différent : ce repère remplace la numérotation 1/2/3, qui laissait croire à un parcours en trois étapes (retour de Serge). */ .outil-tag { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--or); font-weight: 700; margin-bottom: 2px; } .card-outil--bientot .outil-tag { color: var(--gris-texte); } /* Le bouton plein du héros (.btn-cta), repris dans les cartes outils. La carte entière étant cliquable, le bouton réagit au survol de la carte plutôt qu'à son propre survol. */ .outil-btn { align-self: flex-start; margin-top: 2px; } .card-outil:hover .outil-btn { background: var(--or); color: var(--noir); } .outil-btn--inactif, .card-outil--bientot:hover .outil-btn--inactif { background: #E8EDF5; color: var(--gris-texte) !important; box-shadow: none; cursor: default; } .pourquoi { padding: 10px 24px 50px; max-width: 760px; } .pourquoi h2 { margin-bottom: 8px; } .pourquoi p { color: var(--gris-texte); } /* --- Bandeau "chiffres clés" (page d'accueil) — couleur + mouvement (21/09/2026) --- */ .stats-band { padding: 40px 24px 44px; } .stats-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; } .stat-item { position: relative; overflow: hidden; text-align: center; padding: 22px 14px 18px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .stat-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--stat-color, var(--or)); } .stat-item:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(11,37,69,0.12); } .stat-item:nth-child(1) { --stat-color: #1BA672; } .stat-item:nth-child(2) { --stat-color: #2F80ED; } .stat-item:nth-child(3) { --stat-color: #F2994A; } .stat-item:nth-child(4) { --stat-color: #C9971F; } .stat-number { display: block; font-size: 2.2em; font-weight: 700; color: var(--noir); line-height: 1.1; font-variant-numeric: tabular-nums; } .stat-item:nth-child(1) .stat-number { color: #1BA672; } .stat-item:nth-child(2) .stat-number { color: #2F80ED; } .stat-item:nth-child(3) .stat-number { color: #F2994A; } .stat-item:nth-child(4) .stat-number { color: #C9971F; } .stat-label { display: block; margin-top: 6px; font-size: 13px; color: var(--gris-texte); } @media (max-width: 720px) { .stats-band-grid { grid-template-columns: repeat(2, 1fr); } } /* --- Bandeau "Nos outils", affiché sous l'en-tête sur la plupart des pages (14/09/2026) --- */ .outils-banner { background: linear-gradient(120deg, var(--noir) 0%, #123163 100%); color: var(--blanc); } /* Mise en page centrée (14/09/2026, retour de Serge : le texte à gauche et les boutons groupés au centre laissaient un grand vide à droite, l'ensemble ne semblait pas "ajusté") : tout le contenu du bandeau est maintenant centré en colonne — texte au-dessus, boutons en dessous — plutôt qu'étalé sur une seule ligne entre un bloc de texte et un bloc de boutons. */ /* Bandeau aminci (15/09/2026, retour de Serge : "trop large" / trop épais) : padding vertical et gap réduits, kicker et boutons resserrés, pour un bandeau plus fin sur toutes les pages. */ .outils-banner-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 24px; } .outils-banner-kicker { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--or); font-weight: 700; margin-bottom: 2px; } .outils-banner-text { max-width: 640px; } .outils-banner-text p { color: #C9D2E0; margin: 0; font-size: 13px; } .outils-banner-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .outils-banner-btn { padding: 8px 16px; font-size: 13px; white-space: nowrap; background: var(--or); } .outils-banner-btn:hover { background: var(--blanc); color: var(--noir); } .outils-banner-btn--ghost { background: transparent; box-shadow: none; border: 1px solid rgba(255,255,255,0.5); color: var(--blanc); } .outils-banner-btn--ghost:hover { background: rgba(255,255,255,0.12); color: var(--blanc); border-color: rgba(255,255,255,0.8); } /* Comparateur par budget : présent sur le même bandeau que les 2 autres (demande de Serge), mais dans un style volontairement plus discret puisqu'il mène à une page "bientôt disponible" plutôt qu'à un outil utilisable dès maintenant. */ .outils-banner-btn--soon { background: rgba(255,255,255,0.18); box-shadow: none; border: 1px solid rgba(255,255,255,0.45); color: var(--blanc); font-weight: 500; } .outils-banner-btn--soon:hover { background: rgba(255,255,255,0.28); color: var(--blanc); border-color: rgba(255,255,255,0.65); } .outils-banner-soon-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 10px; background: var(--or); color: var(--noir); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; vertical-align: 1px; } @media (max-width: 700px) { .outils-banner-inner { flex-direction: column; align-items: flex-start; padding: 12px 18px; } .outils-banner-links { width: 100%; } .outils-banner-btn { flex: 1; text-align: center; } } /* Illustrations des cartes de contenu (23/09/2026, demande de Serge : "crée des illustrations visuelles pour chaque point abordé", à partir de la page Passer à l'électrique). Petits dessins SVG en trait, écrits directement dans la page (aucune image à charger), sur un fond teinté de la couleur de la rubrique. Les traits prennent automatiquement la couleur d'accent de la page (.a) et le bleu marine de marque (.n) : la même illustration se recolore toute seule d'une rubrique à l'autre. Un détail par dessin bouge doucement (éclair qui pulse, roue ou clé qui tourne, barres qui montent...), coupé si le visiteur a demandé à réduire les animations dans son système. */ .card-illu { height: 116px; margin: 0 0 18px; border-radius: 8px; background: #F2F5F9; background: color-mix(in srgb, var(--accent, var(--or)) 9%, #ffffff); display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-illu svg { height: 104px; width: auto; max-width: 100%; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .card-illu .a { stroke: var(--accent, var(--or)); } .card-illu .n { stroke: var(--noir); } .card-illu .g { stroke: var(--noir); opacity: 0.35; } .card-illu .fa { fill: var(--accent, var(--or)); stroke: none; } .card-illu .fn { fill: var(--noir); stroke: none; } .card-illu .soft { fill: var(--accent, var(--or)); opacity: 0.16; stroke: none; } .card-illu text { font-family: 'Inter', sans-serif; font-weight: 600; stroke: none; } @keyframes illu-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } @keyframes illu-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes illu-swing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } } @keyframes illu-spin { to { transform: rotate(360deg); } } @keyframes illu-grow { 0% { transform: scaleY(0.15); } 35%, 100% { transform: scaleY(1); } } @keyframes illu-gap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.82); } } .card-illu .pulse { animation: illu-pulse 2.4s ease-in-out infinite; } .card-illu .bob { animation: illu-bob 3s ease-in-out infinite; transform-box: fill-box; } .card-illu .swing { animation: illu-swing 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .card-illu .spin { animation: illu-spin 14s linear infinite; transform-box: fill-box; transform-origin: center; } .card-illu .grow { animation: illu-grow 5s ease-out infinite; transform-box: fill-box; transform-origin: bottom; } .card-illu .gap { animation: illu-gap 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; } @media (prefers-reduced-motion: reduce) { .card-illu * { animation: none !important; } } /* ===== Animations automobiles dans les marges (23/09/2026) ===== Le contenu est injecté par js/layout.js (constante ANIMATION_MARGES : 1, 2 ou 3). Voir le commentaire dans ce fichier. Couleur d'accent de la rubrique, placé sous le contenu, masqué sous 1340px. */ body.deco-on::before, body.deco-on::after, html:has(body.deco-on)::before, html:has(body.deco-on)::after { display:none; } /* halos colorés retirés quand les animations sont actives : fond blanc cassé uni */ .deco-lane{position:fixed; top:120px; bottom:0; width:calc((100vw - 1100px) / 2); pointer-events:none; z-index:-1; display:none;} /* sous le bandeau bleu, l’en-tête et les cartes */ .deco-lane.l{left:0;} .deco-lane.r{right:0;} .deco-lane .ic{position:absolute; left:50%; width:56px; height:56px; margin-left:-28px; color:var(--accent, var(--or)); opacity:.4;} .deco-lane .ic svg{width:100%; height:100%; display:block;} @media (min-width:1340px){ .deco-lane{display:block;} } /* Option 1 : icônes flottantes */ @keyframes d-float{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-12px) rotate(var(--r,0deg));}} @keyframes d-steer{0%,100%{transform:rotate(-10deg);}50%{transform:rotate(10deg);}} .s1 .ic{animation:d-float 8s ease-in-out infinite;} .s1 .ic.steer{animation:d-steer 8s ease-in-out infinite;} /* Option 2 : route en mouvement */ @keyframes d-road{from{background-position-y:0;}to{background-position-y:46px;}} @keyframes d-drive{0%{top:-40px;}100%{top:100%;}} .s2 .road{position:absolute; top:0; bottom:0; left:50%; width:6px; margin-left:-3px; opacity:.3; background-image:repeating-linear-gradient(var(--accent, var(--or)) 0 24px, transparent 24px 46px); animation:d-road 3s linear infinite;} .s2 .edge{position:absolute; top:0; bottom:0; width:1px; background:var(--accent, var(--or)); opacity:.18;} .s2 .edge.a{left:calc(50% - 38px);} .s2 .edge.b{left:calc(50% + 38px);} .s2 .car{position:absolute; left:50%; width:32px; height:60px; margin-left:-16px; color:var(--accent, var(--or)); opacity:.5; animation:d-drive 18s linear infinite;} .s2 .car svg{width:100%; height:100%; display:block;} .r .s2 .car{animation-direction:reverse; animation-delay:-9s;} /* Option 3 : jauges & rotation */ @keyframes d-spin{to{transform:rotate(360deg);}} @keyframes d-needle{0%,100%{transform:rotate(-35deg);}50%{transform:rotate(35deg);}} .s3 .ic.spin svg{animation:d-spin 16s linear infinite;} .s3 .needle{transform-box:view-box; transform-origin:24px 27px; animation:d-needle 6s ease-in-out infinite;} @media (prefers-reduced-motion:reduce){ .deco-lane *{animation:none !important;} } /* Points illustrés dans les listes de conseils (23/09/2026, suite de la demande "des illustrations pour chaque point abordé", étendue aux pages Conseils, Sécurité routière, Financement, Assurance et Contact). Chaque puce est remplacée par une petite icône dessinée (SVG écrit dans la page), dans une pastille teintée de la couleur de la rubrique. Un seul détail bouge en continu sur certaines icônes (goutte, aiguille, repère...) ; les autres s'animent seulement au survol de la ligne. */ ul.illu-list { list-style: none; margin: 0 0 20px; padding: 0; } ul.illu-list > li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } ul.illu-list > li::marker { content: none; } .li-illu { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; background: #F2F5F9; background: color-mix(in srgb, var(--accent, var(--or)) 10%, #ffffff); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, background 0.3s ease; } ul.illu-list > li:hover .li-illu { transform: translateY(-2px) scale(1.06); background: color-mix(in srgb, var(--accent, var(--or)) 18%, #ffffff); } .li-illu svg { width: 36px; height: 36px; overflow: visible; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .li-txt { padding-top: 11px; flex: 1; min-width: 0; } .li-illu .a, .card-illu .a { stroke: var(--accent, var(--or)); } .li-illu .n, .card-illu .n { stroke: var(--noir); } .li-illu .fa { fill: var(--accent, var(--or)); stroke: none; } .li-illu .fn { fill: var(--noir); stroke: none; } .li-illu .soft { fill: var(--accent, var(--or)); opacity: 0.16; stroke: none; } .li-illu text, .card-illu text { font-family: 'Inter', sans-serif; font-weight: 600; stroke: none; } .li-illu .pulse, .card-illu .pulse { animation: illu-pulse 2.4s ease-in-out infinite; } .li-illu .bob, .card-illu .bob { animation: illu-bob 3s ease-in-out infinite; } @keyframes illu-needle { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(14deg); } } .li-illu .needle, .card-illu .needle, .li-illu .needle-s { animation: illu-needle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: left bottom; } .li-illu .tick, .card-illu .tick { animation: illu-spin 8s linear infinite; transform-box: fill-box; transform-origin: center bottom; } .li-illu .hspin, .li-illu .hswing, .card-illu .hspin, .card-illu .hswing { transform-box: fill-box; transform-origin: center; transition: transform 0.6s ease; } ul.illu-list > li:hover .hspin, .card:hover .card-illu .hspin { transform: rotate(180deg); } ul.illu-list > li:hover .hswing, .card:hover .card-illu .hswing { transform: rotate(-15deg); } @media (prefers-reduced-motion: reduce) { .li-illu *, .card-illu * { animation: none !important; transition: none !important; } } /* Page Magazine en deux colonnes (23/09/2026, demande de Serge : couverture un peu plus grande, mais titre, présentation et boutons toujours visibles sans défiler). La hauteur de la couverture suit la hauteur de l'écran (100vh moins l'en-tête et le bandeau), plafonnée à 540px : environ +25 % sur un écran d'ordinateur courant par rapport à l'ancienne mise en page empilée. */ .magazine-hero { display: grid; grid-template-columns: 1fr; grid-template-areas: "intro" "cover" "actions"; gap: 20px; justify-items: center; text-align: center; margin-bottom: 8px; } .magazine-hero-intro { grid-area: intro; } .magazine-hero-cover { grid-area: cover; } .magazine-hero-actions { grid-area: actions; } .magazine-hero h1 { margin-bottom: 6px; } .magazine-hero .trait-or { margin: 6px auto 12px; } .magazine-hero-intro p { margin: 0 auto; max-width: 46ch; } .magazine-hero h2 { margin: 0 0 8px; } .magazine-edition { margin: 0 0 18px; color: var(--gris-texte); } .magazine-edition strong { color: var(--noir); font-weight: 500; } .magazine-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .magazine-hero .heyzine-fold { height: min(62vh, 480px); width: auto; max-width: 100%; aspect-ratio: 358/523; margin: 0 auto; box-shadow: 0 14px 34px rgba(11, 37, 69, 0.18); } /* Le titre et le sous-titre intégrés au composant Heyzine s'affichaient par-dessus la couverture : ils sont désormais repris en texte à côté, donc masqués ici (l'effet de coin corné reste). */ .magazine-hero .heyzine-fold .fp-title, .magazine-hero .heyzine-fold .fp-subtitle { display: none; } @media (min-width: 900px) { .magazine-hero { grid-template-columns: auto minmax(0, 420px); grid-template-areas: "cover intro" "cover actions"; grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 22px; justify-content: center; justify-items: start; align-items: start; text-align: left; margin-top: -8px; } .magazine-hero-intro { align-self: end; } .magazine-hero .trait-or { margin: 6px 0 14px; } .magazine-hero-intro p { margin: 0; } .magazine-buttons { justify-content: flex-start; } .magazine-hero .heyzine-fold { height: min(calc(100vh - 300px), 540px); min-height: 330px; } }