/* Châssis concession — feuille de complément. * * La mise en page, les proportions et les couleurs viennent de webflow.css : * la feuille du gabarit d'origine, scopée sous .tpl-concession. Ici ne vivent * que trois choses, et rien d'autre : * * 1. ce que le moteur Webflow faisait en JavaScript et qui doit se redire en * CSS (les états des animations au défilement) ; * 2. ce que le gabarit n'avait pas et qu'un site de l'usine exige * (lien d'évitement, zones d'erreur du formulaire, piège à robots) ; * 3. les quelques accroches propres au châssis (message de liste vide). * * Toute règle de disposition ajoutée ici serait une divergence avec le * gabarit : elle a sa place dans webflow-source.css, pas dans ce fichier. */ /* ---------- accès et formulaires ---------- */ .tpl-concession .cc-saut { position: absolute; left: -9999px; z-index: 1000; padding: 1em 1.5em; background: var(--red, #ec0000); color: #fff; } .tpl-concession .cc-saut:focus { left: 1em; top: 1em; } .tpl-concession :focus-visible { outline: 2px solid var(--red, #ec0000); outline-offset: 2px; } .cc-visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Le piège à robots : hors de l'écran, mais pas display:none (un robot lit la feuille de style aussi bien que nous). */ .tpl-concession .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .tpl-concession .field-error { display: block; min-height: 1.2em; font-size: 0.9em; color: var(--red, #ec0000); } /* Les champs du gabarit sont des rangées flexibles : la zone d'erreur passe à la ligne plutôt que de rogner la largeur de saisie. */ .tpl-concession .form-item-2 > .field-error { flex: 0 0 100%; } .tpl-concession .field-error:empty { min-height: 0; } /* Les encarts d'issue restent absents tant que contact.js ne les montre pas. */ .tpl-concession .form-success, .tpl-concession .form-error-global { display: none; } .tpl-concession .form-success.visible, .tpl-concession .form-error-global.visible { display: block; } /* Une liste vide se dit, elle ne laisse pas un trou. */ .tpl-concession .cc-vide { padding: 3em 0; text-align: center; font-size: 1.2em; opacity: 0.6; } /* ---------- animations ---------- */ /* Le gabarit confiait ces mouvements au moteur Webflow (jQuery + IX2, 1,8 Mo). Les états de départ ne sont armés que si assets/js/concession.js tourne (classe cc-anim sur ) : sans lui, la page reste entière et lisible. Les accroches sont celles du gabarit — ce sont les mêmes éléments que le moteur animait. */ .cc-anim .content-title-2, .cc-anim .content-anim-trigger, .cc-anim .service-3-cms-block .main-button, .cc-anim .heading.is-content-title-2, .cc-anim .services-paragraph-1, .cc-anim .text-block-11 { opacity: 0; transform: translate3d(0, 2rem, 0); transition: opacity 0.7s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.7s cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: calc(var(--cc-delai, 0) * 110ms); } .cc-anim .is-vu .content-title-2, .cc-anim .is-vu .content-anim-trigger, .cc-anim .is-vu .main-button, .cc-anim .is-vu.heading.is-content-title-2, .cc-anim .is-vu.services-paragraph-1, .cc-anim .is-vu.text-block-11, .cc-anim .is-vu .heading.is-content-title-2, .cc-anim .is-vu .services-paragraph-1, .cc-anim .is-vu .text-block-11 { opacity: 1; transform: none; } /* Le filet rouge qui borde une carte se déroule de haut en bas. */ .cc-anim .border-anim-trigger { transform: scaleY(0); transform-origin: top; } .cc-anim .is-vu .border-anim-trigger { transform: scaleY(1); transition: transform 0.9s cubic-bezier(0.075, 0.82, 0.165, 1); } /* Le balayage : la barre inclinée couvre la photo, puis la traverse. */ .cc-anim .animation-color-bg { display: block; transform: skew(-60deg) translateX(-30%); } .cc-anim .is-vu .animation-color-bg, .cc-anim .image-animation-trigger.is-vu .animation-color-bg { transform: skew(-60deg) translateX(260%); transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--cc-delai, 0) * 110ms); } /* Le relief : le média suit le pointeur dans sa perspective de 1000px. */ .tpl-concession ._3d-block .image-animation-trigger { transition: transform 0.4s ease-out; will-change: transform; } .tpl-concession ._3d-block:hover .image-animation-trigger { transform: rotateX(var(--cc-rx, 0deg)) rotateY(var(--cc-ry, 0deg)) scale(1.03); } /* Le préchargeur s'efface ; sans script il n'est jamais posé. */ .tpl-concession .preloader { transition: opacity 0.6s ease, visibility 0.6s ease; } .tpl-concession .preloader.is-parti { opacity: 0; visibility: hidden; pointer-events: none; } /* Défaut du gabarit d'origine : entre 768 et 991px, le conteneur du bas de page passe au blanc alors que son logo et son slogan sont blancs. Le bandeau devient vide. Le gabarit le noircit en dessous de 768 et le pied de page est noir au-dessus de 991 : il ne manque que cette bande. */ @media screen and (min-width: 768px) and (max-width: 991px) { .tpl-concession .container.top01 { background-color: var(--black, #000); } } /* La bascule de langue n'existe pas dans le gabarit : elle emprunte la place du tiroir de contact, dont le texte est blanc parce qu'il ne porte qu'une icône. Écrite en blanc sur la barre blanche, elle ne se voyait pas. */ .tpl-concession .nav-link-contact-grid.is-langue { /* La classe empruntée réserve 14em de large et 3em de marge intérieure : posée dans une colonne de la barre déjà occupée par le tiroir de contact et le bouton d'appel, elle poussait la barre hors de la fenêtre. Deux lettres n'ont pas besoin de cette place. */ flex: 0 0 auto; min-width: 0; padding: 0 1.4em; color: var(--black-2, #1a1a1a); font-family: var(--font-heading, "Saira"), sans-serif; font-size: 0.72em; font-weight: 600; letter-spacing: 0.2em; white-space: nowrap; } .tpl-concession .nav-link-contact-grid.is-langue:hover { color: var(--red, #ec0000); } /* Défaut du gabarit d'origine : une fiche de véhicule réserve 320px de large et la grille en pose trois de front. Sous 1100px environ, la troisième sort de la fenêtre et la page défile latéralement. Vérifié sur le site d'origine, qui déborde de la même quantité. Une piste de grille qui peut rétrécir et une fiche sans largeur plancher suffisent : la disposition ne change pas là où elle tenait déjà. */ .tpl-concession .product-card-2, .tpl-concession .product-card-3 { min-width: 0; } .tpl-concession .collection-list, .tpl-concession .collection-list-2, .tpl-concession .collection-list-3 { /* Une piste « 1fr » ne descend pas sous la largeur de son contenu ; c'est ce qui laissait la troisième fiche sortir. minmax(0, 1fr) l'autorise à rétrécir, sans rien changer au nombre de colonnes du gabarit. */ grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Le nombre de colonnes est un réglage du bloc : le gabarit n'en propose qu'un, et les trois classes qu'il emploie sont toutes à trois colonnes. */ .tpl-concession .cc-colonnes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-concession .cc-colonnes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media screen and (max-width: 991px) { .tpl-concession .collection-list, .tpl-concession .collection-list-2, .tpl-concession .collection-list-3, .tpl-concession .cc-colonnes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 600px) { .tpl-concession .collection-list, .tpl-concession .collection-list-2, .tpl-concession .collection-list-3, .tpl-concession .cc-colonnes-2, .tpl-concession .cc-colonnes-4 { grid-template-columns: minmax(0, 1fr); } } /* ---------- menu et dépliants sans le moteur Webflow ---------- */ /* L'ouverture d'un tiroir est celle du gabarit (.w--open) ; rien à ajouter. */ .tpl-concession .accordion-content[hidden] { display: none; } @media screen and (max-width: 991px) { /* Webflow déplaçait le menu dans une surcouche pleine largeur ; sans son moteur, le panneau prenait la largeur de ses six entrées en ligne et débordait de la fenêtre. */ .tpl-concession .nav-menu-grid { display: none; left: 0; right: 0; width: 100%; max-height: calc(100vh - 5.6em); overflow-y: auto; flex-direction: column; align-items: stretch; /* Le gabarit centre les entrées, ce qui va pour une rangée. En colonne, dès que le panneau dépasse la fenêtre, le centrage pousse le haut de la liste hors du cadre : les premières entrées deviennent inatteignables, le défilement ne les ramène pas. */ justify-content: flex-start; } .tpl-concession .navbar[data-menu="ouvert"] .nav-menu-grid { display: flex; } .tpl-concession .nav-menu-grid .nav-link, .tpl-concession .nav-menu-grid .dropdown-link { width: 100%; } .tpl-concession .nav-menu-grid .dropdown-link { display: block; } } @media (prefers-reduced-motion: reduce) { .tpl-concession *, .tpl-concession *::before, .tpl-concession *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } /* Rien ne doit rester invisible faute d'animation. */ .cc-anim .content-title-2, .cc-anim .content-anim-trigger, .cc-anim .service-3-cms-block .main-button, .cc-anim .heading.is-content-title-2, .cc-anim .services-paragraph-1, .cc-anim .text-block-11 { opacity: 1; transform: none; } .cc-anim .border-anim-trigger { transform: none; } .cc-anim .animation-color-bg { display: none; } }