/* ========================================================================== AUTO'NOME — Portail national (site-principal) Feuille de style principale — à charger APRÈS bootstrap.min.css (5.3.x) Socle de jetons/composants repris du modèle VL_2026 (même famille visuelle), complété section 27 par les composants propres au portail national (recherche de centre, grille de partenaires, grille de départements). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens de design -------------------------------------------------------------------------- */ :root { /* Palette AUTO'NOME : bleu + vert modernes, inspirés du bleu et du vert du logo (route/prairie) mais réinterprétés dans un registre plus sobre/actuel plutôt que les teintes vives du logo. Le bleu porte la marque et les actions principales, le vert sert d'accent (CTA, signalétique) et d'une touche de vert discrète (coches, statut "ouvert"), réservée à des petits éléments ponctuels. Les neutres (fond, bordures, texte courant) sont recalés sur une base froide pour rester cohérents avec ce duo. */ --ct-ink: #181A1D; --ct-ink-rgb: 24, 26, 29; --ct-ink-2: #20242A; --ct-primary: #1B6FA8; --ct-primary-rgb: 27, 111, 168; --ct-primary-600: #14507A; --ct-primary-600-rgb: 20, 80, 122; --ct-primary-050: #E7F1F8; --ct-accent: #F2A93B; --ct-accent-rgb: 242, 169, 59; --ct-ok: #12A870; --ct-body: #4B5665; --ct-heading: #181A1D; --ct-surface: #F5F7FA; --ct-border: #E1E6EC; --ct-white: #FFFFFF; /* Typographie */ --ct-font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --ct-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --ct-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Rayons & ombres */ --ct-radius-sm: 10px; --ct-radius: 16px; --ct-radius-lg: 22px; --ct-shadow-sm: 0 2px 8px rgba(24, 26, 29, .06); --ct-shadow: 0 18px 40px -24px rgba(24, 26, 29, .35); --ct-shadow-lg: 0 40px 80px -40px rgba(24, 26, 29, .55); /* Hauteurs */ --ct-nav-h: 76px; /* Remap des variables Bootstrap */ --bs-body-font-family: var(--ct-font-body); --bs-body-color: var(--ct-body); --bs-body-bg: var(--ct-white); --bs-border-color: var(--ct-border); --bs-primary: var(--ct-primary); --bs-primary-rgb: 27, 111, 168; --bs-link-color: var(--ct-primary); --bs-link-color-rgb: 27, 111, 168; --bs-link-hover-color: var(--ct-primary-600); --bs-border-radius: var(--ct-radius-sm); --bs-heading-color: var(--ct-heading); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; /* Sur mobile, certains navigateurs gèrent le défilement au niveau de plutôt que : sans overflow-x caché ici aussi, un élément dépassant même légèrement la largeur de l'écran provoquait un défilement latéral (avec un espace blanc à droite) que body{overflow-x:hidden} seul ne suffisait pas à bloquer. */ overflow-x: hidden; } body { font-family: var(--ct-font-body); font-size: 1rem; line-height: 1.7; color: var(--ct-body); background: var(--ct-white); overflow-x: hidden; } h1, h2, h3, h4, h5, h6, .display-ct { font-family: var(--ct-font-display); color: var(--ct-heading); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } a { text-decoration: none; } img { max-width: 100%; } ::selection { background: var(--ct-accent); color: var(--ct-ink); } :focus-visible { outline: 3px solid var(--ct-primary); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--ct-ink); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--ct-radius-sm) 0; } .skip-link:focus { left: 0; color: #fff; } /* -------------------------------------------------------------------------- 3. Utilitaires maison -------------------------------------------------------------------------- */ .sec { padding: clamp(3.25rem, 6.5vw, 6rem) 0; } .sec--tight { padding: clamp(2.5rem, 4.5vw, 4rem) 0; } .sec--surface { background: var(--ct-surface); } .sec--ink { background: var(--ct-ink); color: rgba(255, 255, 255, .75); } .sec--ink h1, .sec--ink h2, .sec--ink h3, .sec--ink h4 { color: #fff; } .eyebrow { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--ct-font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ct-primary); margin-bottom: .9rem; } .eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--ct-accent); flex: none; } .eyebrow--light { color: #fff; } .sec-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; margin-bottom: 1rem; } .sec-lead { font-size: 1.0625rem; max-width: 62ch; margin-bottom: 0; } .sec-head--center { text-align: center; } .sec-head--center .eyebrow { justify-content: center; } .sec-head--center .sec-lead { margin-left: auto; margin-right: auto; } .text-accent { color: var(--ct-accent) !important; } .text-ct-primary { color: var(--ct-primary) !important; } .text-ink { color: var(--ct-ink) !important; } .bg-ink { background: var(--ct-ink) !important; } .mono { font-family: var(--ct-font-mono); } /* Bande signalétique (signature du modèle) */ .stripe-rule { height: 7px; border: 0; opacity: 1; background: repeating-linear-gradient(135deg, var(--ct-accent) 0 12px, var(--ct-ink) 12px 24px); } .sec--ink .stripe-rule, .footer .stripe-rule { background: repeating-linear-gradient(135deg, var(--ct-accent) 0 12px, transparent 12px 24px); } /* -------------------------------------------------------------------------- 4. Boutons -------------------------------------------------------------------------- */ .btn { font-family: var(--ct-font-body); font-weight: 700; border-radius: 999px; padding: .8rem 1.6rem; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; } .btn:active { transform: translateY(1px); } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--ct-primary); --bs-btn-border-color: var(--ct-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ct-primary-600); --bs-btn-hover-border-color: var(--ct-primary-600); --bs-btn-active-bg: var(--ct-primary-600); --bs-btn-active-border-color: var(--ct-primary-600); box-shadow: 0 12px 24px -12px rgba(var(--ct-primary-rgb), .85); } .btn-primary:hover { transform: translateY(-2px); } .btn-accent { --bs-btn-color: var(--ct-ink); --bs-btn-bg: var(--ct-accent); --bs-btn-border-color: var(--ct-accent); --bs-btn-hover-color: var(--ct-ink); --bs-btn-hover-bg: #F5BD5F; --bs-btn-hover-border-color: #F5BD5F; box-shadow: 0 12px 24px -14px rgba(var(--ct-accent-rgb), .9); } .btn-accent:hover { transform: translateY(-2px); } .btn-ink { --bs-btn-color: #fff; --bs-btn-bg: var(--ct-ink); --bs-btn-border-color: var(--ct-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ct-ink-2); --bs-btn-hover-border-color: var(--ct-ink-2); } .btn-outline-light { --bs-btn-border-color: rgba(255, 255, 255, .55); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--ct-ink); --bs-btn-hover-border-color: #fff; backdrop-filter: blur(4px); } .btn-outline-ink { --bs-btn-color: var(--ct-ink); --bs-btn-border-color: var(--ct-border); --bs-btn-bg: #fff; --bs-btn-hover-color: var(--ct-ink); --bs-btn-hover-bg: var(--ct-surface); --bs-btn-hover-border-color: var(--ct-ink); } .btn-lg { padding: 1rem 2rem; font-size: 1.0625rem; } .btn-sm { padding: .5rem 1rem; font-size: .85rem; } .btn-icon-square { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } /* -------------------------------------------------------------------------- 5. Spinner de chargement -------------------------------------------------------------------------- */ #spinner { opacity: 0; visibility: hidden; transition: opacity .4s ease-out, visibility 0s linear .4s; z-index: 99999; background: var(--ct-white); } #spinner.show { transition: opacity .4s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; } .spinner-ct { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ct-border); border-top-color: var(--ct-primary); animation: ct-spin .8s linear infinite; } @keyframes ct-spin { to { transform: rotate(360deg); } } /* Écran de chargement plein écran : une petite voiture qui roule, dans l'esprit "contrôle technique auto" plutôt qu'un rond générique — la caisse rebondit légèrement, les roues tournent, la route défile. */ .loader-car { display: flex; flex-direction: column; align-items: center; gap: .9rem; } .loader-car__svg { width: 160px; height: auto; animation: loaderCarBounce 1s ease-in-out infinite; } .loader-car__shadow { fill: rgba(24, 26, 29, .12); } /* Bicolore façon SUV/crossover récent : bas de caisse foncé (cladding, toute la silhouette) recouvert d'une carrosserie claire arrêtée plus haut, ne laissant dépasser qu'un bandeau sombre en bas. */ .loader-car__cladding { fill: var(--ct-ink); } .loader-car__body { fill: var(--ct-primary); } .loader-car__crease { stroke: rgba(255, 255, 255, .3); stroke-width: 1; } .loader-car__glass { fill: #C7D2DC; opacity: .92; } .loader-car__light { fill: var(--ct-accent); } .loader-car__taillight { fill: rgba(255, 255, 255, .55); } .loader-car__tire { fill: var(--ct-ink); } .loader-car__rim-ring { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; } .loader-car__spoke { stroke: var(--ct-accent); stroke-width: 1.6; stroke-linecap: round; } .loader-car__hub { fill: var(--ct-accent); } .loader-car__wheel { animation: loaderWheelSpin 1.4s linear infinite; } @keyframes loaderCarBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes loaderWheelSpin { to { transform: rotate(360deg); } } .loader-car__road { width: 110px; height: 4px; border-radius: 2px; background-image: repeating-linear-gradient(90deg, var(--ct-accent) 0 12px, transparent 12px 24px); animation: loaderRoadScroll 1s linear infinite; } @keyframes loaderRoadScroll { to { background-position: -24px 0; } } .loader-car__text { font-family: var(--ct-font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ct-body); } @media (prefers-reduced-motion: reduce) { .loader-car__svg, .loader-car__wheel, .loader-car__road { animation-duration: 2.4s; } } /* -------------------------------------------------------------------------- 6. Topbar -------------------------------------------------------------------------- */ .topbar { background: var(--ct-ink); color: rgba(255, 255, 255, .72); font-size: .875rem; position: relative; z-index: 1040; } .topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.75rem; min-height: 44px; padding: .35rem 0; } .topbar a { color: rgba(255, 255, 255, .72); transition: color .2s ease; } .topbar a:hover { color: var(--ct-accent); } .topbar i { color: var(--ct-accent); margin-right: .5rem; } .topbar__item { display: inline-flex; align-items: center; } /* -------------------------------------------------------------------------- 7. Navigation -------------------------------------------------------------------------- */ /* La topbar reste dans le flux, la navigation se pose juste en dessous et recouvre la bannière. */ .site-header { position: relative; z-index: 1040; } .nav-ct { position: absolute; top: 100%; left: 0; width: 100%; z-index: 1030; padding: .85rem 0; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .14); transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease; } .nav-ct.is-stuck { position: fixed; top: 0; background: #fff; border-bottom-color: transparent; box-shadow: 0 10px 30px -18px rgba(var(--ct-ink-rgb), .45); padding: .5rem 0; animation: ct-slide-down .35s ease; } @keyframes ct-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Nav "solide" : pages sans bannière plein écran derrière elle (toutes les pages sauf l'accueil). Reste dans le flux normal (pas de superposition avec le contenu) et opaque dès le départ (sinon le texte blanc de la nav transparente devient illisible sur le fond blanc de la page). */ .nav-ct--solid { position: sticky; top: 0; background: #fff; border-bottom-color: var(--ct-border); } .nav-ct--solid.is-stuck { animation: none; } .nav-ct--solid .nav-ct__brand img { height: 46px; } .nav-ct--solid .nav-ct__link { color: var(--ct-ink); } .nav-ct--solid .nav-ct__link:hover, .nav-ct--solid .nav-ct__link.is-active { color: var(--ct-primary); } .nav-ct--solid .nav-ct__tel { color: var(--ct-ink); } .nav-ct--solid .nav-ct__burger { color: var(--ct-ink); border-color: var(--ct-border); background: #fff; } /* Sur les pages intérieures, la nav est posée sur une bannière : même logique */ .nav-ct__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav-ct__brand { display: inline-flex; align-items: center; gap: .75rem; } .nav-ct__brand img { height: 52px; width: auto; max-width: 190px; object-fit: contain; transition: height .35s ease; } .nav-ct.is-stuck .nav-ct__brand img { height: 46px; } .nav-ct__brand-text { font-family: var(--ct-font-display); font-weight: 800; font-size: 1.1rem; color: #fff; line-height: 1.2; max-width: 15ch; } .nav-ct.is-stuck .nav-ct__brand-text { color: var(--ct-ink); } .nav-ct__menu { display: flex; align-items: center; gap: 1.75rem; margin: 0 auto 0 2.5rem; padding: 0; list-style: none; } .nav-ct__link { position: relative; font-weight: 600; font-size: .975rem; color: rgba(255, 255, 255, .9); padding: .35rem 0; transition: color .25s ease; } .nav-ct__link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 3px; width: 0; border-radius: 2px; background: var(--ct-accent); transition: width .3s ease; } .nav-ct__link:hover::after, .nav-ct__link.is-active::after { width: 100%; } .nav-ct__link:hover { color: #fff; } .nav-ct.is-stuck .nav-ct__link { color: var(--ct-ink); } .nav-ct.is-stuck .nav-ct__link:hover, .nav-ct.is-stuck .nav-ct__link.is-active { color: var(--ct-primary); } .nav-ct__actions { display: flex; align-items: center; gap: .6rem; } .nav-ct__tel { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ct-font-mono); font-size: .95rem; font-weight: 500; color: #fff; } .nav-ct.is-stuck .nav-ct__tel { color: var(--ct-ink); } .nav-ct__tel i { color: var(--ct-accent); } .nav-ct__burger { width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; display: none; align-items: center; justify-content: center; font-size: 1.25rem; } .nav-ct.is-stuck .nav-ct__burger { color: var(--ct-ink); border-color: var(--ct-border); background: #fff; } /* Menu mobile (offcanvas) */ .offcanvas-ct { background: var(--ct-ink); color: #fff; width: min(88vw, 360px); } .offcanvas-ct .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .12); } .offcanvas-ct .btn-close { filter: invert(1) grayscale(1) brightness(2); } .offcanvas-ct__link { display: flex; align-items: center; justify-content: space-between; padding: .95rem 0; font-family: var(--ct-font-display); font-size: 1.1rem; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .1); } .offcanvas-ct__link i { color: var(--ct-accent); font-size: .9rem; } .offcanvas-ct__link.is-active { color: var(--ct-accent); } @media (max-width: 991.98px) { .nav-ct__menu, .nav-ct__tel { display: none; } .nav-ct__burger { display: inline-flex; } .nav-ct__brand img { height: 44px; } .nav-ct__brand-text { font-size: .98rem; } } /* -------------------------------------------------------------------------- 8. Hero (accueil) -------------------------------------------------------------------------- */ .hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: center; padding: calc(var(--ct-nav-h) + 3.5rem) 0 3.5rem; overflow: hidden; background: var(--ct-primary-600); } .hero__media { position: absolute; inset: 0; } .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; } .hero__slide.is-active { opacity: 1; } .hero__slide.is-active { animation: ct-kenburns 14s ease-out forwards; } @keyframes ct-kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(var(--ct-primary-rgb), .88) 0%, rgba(var(--ct-ink-rgb), .74) 45%, rgba(var(--ct-ink-rgb), .32) 100%); } .hero__overlay::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 75% at 78% 25%, rgba(var(--ct-accent-rgb), .16) 0%, transparent 65%); } .hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(120% 90% at 20% 40%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(120% 90% at 20% 40%, #000 0%, transparent 75%); } .hero__content { position: relative; z-index: 2; } .hero__title { color: #fff; font-weight: 800; font-size: clamp(2.1rem, 5.4vw, 3.9rem); line-height: 1.05; margin-bottom: 1.1rem; text-wrap: balance; } .hero__text { color: rgba(255, 255, 255, .82); font-size: 1.075rem; max-width: 54ch; margin-bottom: 2rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; } .hero__points { list-style: none; padding: 0; margin: 2.25rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; color: rgba(255, 255, 255, .8); font-size: .95rem; } .hero__points li { display: inline-flex; align-items: center; gap: .5rem; } .hero__points i { color: var(--ct-ok); } /* Carte "vignette de contrôle" — élément signature */ .hero-card { position: relative; z-index: 2; background: rgba(var(--ct-ink-rgb), .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--ct-radius-lg); padding: 1.6rem; color: #fff; box-shadow: var(--ct-shadow-lg); overflow: hidden; } .hero-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(135deg, var(--ct-accent) 0 10px, transparent 10px 20px); } .hero-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0 1rem; border-bottom: 1px dashed rgba(255, 255, 255, .22); } .hero-card__label { font-family: var(--ct-font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .badge-ok { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; color: #6EE7B7; background: rgba(18, 168, 112, .16); border: 1px solid rgba(18, 168, 112, .4); padding: .3rem .7rem; border-radius: 999px; } .badge-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: ct-pulse 2.4s infinite; } @keyframes ct-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } .hero-card__price { display: flex; align-items: baseline; gap: .5rem; padding: 1.1rem 0 .35rem; } .hero-card__price strong { font-family: var(--ct-font-display); font-size: clamp(2.2rem, 5vw, 2.9rem); font-weight: 800; color: #fff; line-height: 1; } .hero-card__price span { color: rgba(255, 255, 255, .65); font-size: .95rem; } .hero-card__row { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .95rem; color: rgba(255, 255, 255, .82); } .hero-card__row i { color: var(--ct-accent); margin-top: .25rem; } .hero-card__row strong { display: block; color: #fff; font-family: var(--ct-font-mono); font-size: .92rem; font-weight: 500; } .hero-card .btn { width: 100%; margin-top: 1.1rem; } @media (max-width: 991.98px) { .hero { min-height: 0; padding: calc(var(--ct-nav-h) + 2.5rem) 0 2.5rem; } .hero__slide.is-active { animation: none; } .hero__overlay { background: linear-gradient(180deg, rgba(var(--ct-primary-rgb), .82) 0%, rgba(var(--ct-ink-rgb), .78) 100%); } .hero__overlay::after { display: none; } /* Le bouton mesurait 239.5px de contenu (exactement la taille de son texte) malgré flex:1 1 100%/width:100% affichés comme "actifs" dans l'inspecteur — la mise en page flex ne les traduisait pas en largeur réelle ici. On abandonne le flex pour ces boutons au profit d'un display:block classique, la méthode la plus fiable pour garantir une largeur à 100 % sans ambiguïté, avec !important pour être certain qu'aucune autre règle ne reprenne la main. */ .hero__actions { display: block !important; width: 100% !important; } .hero__actions .btn { display: block !important; width: 100% !important; box-sizing: border-box !important; margin-bottom: .75rem; } .hero__actions .btn:last-child { margin-bottom: 0; } .hero-card { margin-top: 2.25rem; width: 100% !important; box-sizing: border-box !important; } } /* Autres groupes de boutons construits avec les utilitaires Bootstrap bruts (d-flex flex-wrap gap-*), sans classe dédiée comme .hero__actions — horaires, bandeau CTA, page photos... Sans cette règle, les boutons se contentaient de la largeur de leur texte et laissaient un vide à côté au lieu de s'empiler pleine largeur comme le reste du site. */ @media (max-width: 991.98px) { .d-flex.flex-wrap.gap-2 > .btn, .d-flex.flex-wrap.gap-3 > .btn { flex: 1 1 100%; } } /* .row.g-5 (gouttière Bootstrap 3rem) sert à espacer deux colonnes côte à côte sur desktop (hero, à-propos, horaires, FAQ...). Sur mobile, ces colonnes passent en une seule pleine largeur, mais Bootstrap applique quand même cette gouttière comme padding gauche/ droite sur chaque colonne — EN PLUS du padding du .container lui-même — ce qui resserre le contenu (boutons, cartes...) plus que le reste du site et donnait l'impression que rien ne prenait toute la largeur de l'écran. On annule complètement la gouttière horizontale sur mobile (la verticale, utile pour l'espacement entre blocs empilés une fois la colonne repassée en pleine largeur, reste inchangée) : la colonne colle alors exactement au padding du .container, comme partout ailleurs sur la page. */ @media (max-width: 991.98px) { .row.g-5 { --bs-gutter-x: 0; } } /* -------------------------------------------------------------------------- 9. Bandeau de réassurance -------------------------------------------------------------------------- */ .assurance { position: relative; z-index: 3; margin-top: -3.5rem; } .assurance__inner { background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; } .assurance__item { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.35rem; border-right: 1px solid var(--ct-border); } .assurance__item:last-child { border-right: 0; } .assurance__icon { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--ct-primary-050); color: var(--ct-primary); font-size: 1.15rem; } .assurance__title { font-family: var(--ct-font-display); font-weight: 700; color: var(--ct-heading); font-size: 1rem; margin: 0; line-height: 1.3; } .assurance__text { font-size: .85rem; margin: 0; color: var(--ct-body); } @media (max-width: 991.98px) { /* La gouttière négative (-3.5rem) sert à faire chevaucher la carte sur le bas de la bannière sombre en desktop. En se contentant de la retirer (margin-top: 0) sur mobile, la carte blanche se retrouvait collée juste sous la bannière, sans aucun espace de respiration entre les deux. */ .assurance { margin-top: 2rem; } .assurance__inner { grid-template-columns: repeat(2, 1fr); } .assurance__item:nth-child(2n) { border-right: 0; } .assurance__item:nth-child(-n+2) { border-bottom: 1px solid var(--ct-border); } } @media (max-width: 575.98px) { .assurance__inner { grid-template-columns: 1fr; } .assurance__item { border-right: 0; border-bottom: 1px solid var(--ct-border); } .assurance__item:last-child { border-bottom: 0; } } /* -------------------------------------------------------------------------- 10. Blocs média (à propos / horaires) -------------------------------------------------------------------------- */ .media-frame { position: relative; isolation: isolate; background: var(--ct-surface); border-radius: var(--ct-radius-lg); min-height: 340px; } .media-frame img { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 340px; max-height: 560px; object-fit: cover; border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow); } .media-frame::after { content: ""; position: absolute; z-index: 0; width: 140px; height: 140px; right: -16px; bottom: -16px; border-radius: var(--ct-radius); background: repeating-linear-gradient(135deg, var(--ct-accent) 0 10px, transparent 10px 20px); } .media-frame--left::after { right: auto; left: -16px; } @media (max-width: 575.98px) { .media-frame::after { width: 90px; height: 90px; right: -8px; bottom: -8px; } .media-frame--left::after { right: auto; left: -8px; } } .contact-inline { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: var(--ct-radius); max-width: 380px; } .contact-inline__icon { width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--ct-ink); color: var(--ct-accent); display: grid; place-items: center; font-size: 1.1rem; } .contact-inline small { display: block; font-family: var(--ct-font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ct-body); } .contact-inline a { font-family: var(--ct-font-display); font-weight: 700; font-size: 1.2rem; color: var(--ct-heading); } .contact-inline a:hover { color: var(--ct-primary); } /* -------------------------------------------------------------------------- 11. Cartes prestations -------------------------------------------------------------------------- */ .card-service { height: 100%; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); padding: 1.75rem 1.5rem; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; position: relative; overflow: hidden; } .card-service::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--ct-primary); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .card-service:hover { transform: translateY(-6px); box-shadow: var(--ct-shadow); border-color: transparent; } .card-service:hover::after { transform: scaleX(1); } .card-service__icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--ct-primary-050); color: var(--ct-primary); font-size: 1.35rem; margin-bottom: 1.1rem; transition: background-color .3s ease, color .3s ease; } .card-service:hover .card-service__icon { background: var(--ct-primary); color: #fff; } .card-service h3 { font-size: 1.12rem; margin-bottom: .6rem; } .card-service p { margin: 0; font-size: .95rem; } /* -------------------------------------------------------------------------- 12. Étapes (déroulé du contrôle) -------------------------------------------------------------------------- */ .steps { position: relative; } .step { position: relative; padding-top: 2.25rem; } .step__num { position: absolute; top: 0; left: 0; font-family: var(--ct-font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .1em; color: var(--ct-primary); } .step::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--ct-border) 0 100%); } .step::after { content: ""; position: absolute; top: 3px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ct-primary); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--ct-primary-050); } .step__num { top: 26px; } .step h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; } .step p { font-size: .94rem; margin: 0; } @media (max-width: 767.98px) { .step::before { display: none; } /* padding-top: 0 (au lieu d'une vraie valeur) laissait la marge du

"remonter" hors du bloc par collapsing de marge, au lieu de créer de l'espace à l'intérieur — le titre se retrouvait alors rendu au même endroit que le badge "ÉTAPE 0X" (position absolute), d'où le texte mélangé. Un vrai padding-top empêche ce collapsing. / .step { padding-left: 2.25rem; padding-top: 1.6rem; } .step::after { top: 6px; } .stepnum { top: 2px; left: 1.9rem; } .step h3 { margin-top: .4rem; } } / -------------------------------------------------------------------------- 13. Horaires -------------------------------------------------------------------------- / .hours { border: 1px solid var(--ct-border); border-radius: var(--ct-radius); overflow: hidden; background: #fff; } .hoursrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--ct-border); font-size: .98rem; } .hoursrow:last-child { border-bottom: 0; } .hoursday { font-weight: 600; color: var(--ct-heading); } .hourstime { font-family: var(--ct-font-mono); font-size: .9rem; color: var(--ct-body); text-align: right; } .hoursrow.is-today { background: var(--ct-primary-050); box-shadow: inset 3px 0 0 var(--ct-primary); } .hoursrow.is-today .hoursday { color: var(--ct-primary); } .hoursrow.is-today .hoursday::after { content: "Aujourd'hui"; font-family: var(--ct-font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; background: var(--ct-primary); color: #fff; padding: .12rem .45rem; border-radius: 999px; margin-left: .6rem; vertical-align: middle; } / -------------------------------------------------------------------------- 14. Top info -------------------------------------------------------------------------- / .topinfo { background: var(--ct-ink); border-radius: var(--ct-radius-lg); color: rgba(255, 255, 255, .85); padding: clamp(1.75rem, 3vw, 2.5rem); position: relative; overflow: hidden; } .topinfo p, .topinfo p { color: rgba(255, 255, 255, .85) !important; } .topinfo::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 7px; background: repeating-linear-gradient(180deg, var(--ct-accent) 0 12px, transparent 12px 24px); } .topinfolabel { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ct-font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ct-accent); margin-bottom: .75rem; } .topinfo p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 15. Actualités (slider CSS scroll-snap) -------------------------------------------------------------------------- / .slider { position: relative; } .slidertrack { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .5rem; scrollbar-width: none; } .slidertrack::-webkit-scrollbar { display: none; } .slidertrack > { scroll-snap-align: start; } .slidernav { display: flex; gap: .5rem; } .sliderbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ct-border); background: #fff; color: var(--ct-ink); display: grid; place-items: center; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .sliderbtn:hover { background: var(--ct-ink); color: #fff; border-color: var(--ct-ink); } .sliderbtn:disabled { opacity: .35; cursor: not-allowed; } @media (min-width: 992px) { .slidertrack { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } .slidernav { display: none; } } .card-news { height: 100%; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); padding: 1.5rem; transition: box-shadow .3s ease, transform .3s ease; } .card-news:hover { box-shadow: var(--ct-shadow); transform: translateY(-4px); } .card-newstag { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--ct-font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ct-primary); background: var(--ct-primary-050); padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1rem; } .card-news h3 { font-size: 1.05rem; margin-bottom: .6rem; } .card-news p { font-size: .94rem; margin: 0; } /* -------------------------------------------------------------------------- 16. FAQ -------------------------------------------------------------------------- / .accordion-ct { --bs-accordion-border-color: var(--ct-border); } .accordion-ct .accordion-item { border: 1px solid var(--ct-border); border-radius: var(--ct-radius) !important; margin-bottom: .85rem; overflow: hidden; background: #fff; } .accordion-ct .accordion-button { font-family: var(--ct-font-display); font-weight: 700; font-size: 1.02rem; color: var(--ct-heading); background: #fff; padding: 1.15rem 1.35rem; box-shadow: none; } .accordion-ct .accordion-button:not(.collapsed) { color: var(--ct-primary); background: var(--ct-primary-050); } .accordion-ct .accordion-button:focus { box-shadow: none; } .accordion-ct .accordion-button::after { width: 1.1rem; height: 1.1rem; background-size: 1.1rem; } .accordion-ct .accordion-body { padding: 0 1.35rem 1.35rem; font-size: .96rem; } / -------------------------------------------------------------------------- 17. Bandeau d'appel à l'action -------------------------------------------------------------------------- / .cta-band { position: relative; background: var(--ct-ink); border-radius: var(--ct-radius-lg); padding: clamp(2rem, 5vw, 3.5rem); overflow: hidden; color: rgba(255, 255, 255, .8); } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 85% 15%, rgba(var(--ct-primary-rgb), .45) 0%, transparent 60%); } .cta-band > { position: relative; z-index: 1; } .cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.15rem); margin-bottom: .75rem; } /* -------------------------------------------------------------------------- 18. Bannière des pages intérieures -------------------------------------------------------------------------- / .page-hero { position: relative; padding: calc(var(--ct-nav-h) + 4.5rem) 0 3.5rem; background: var(--ct-primary-600) center/cover no-repeat; color: #fff; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(var(--ct-primary-600-rgb), .82) 0%, rgba(var(--ct-ink-rgb), .58) 100%); } .page-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(180deg, #000 0%, transparent 92%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%); } .page-heroinner { position: relative; z-index: 2; } .page-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 800; margin-bottom: .65rem; } .page-hero p { color: rgba(255, 255, 255, .78); max-width: 58ch; margin: 0; } .breadcrumb-ct { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-family: var(--ct-font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 1.1rem; } .breadcrumb-ct a { color: rgba(255, 255, 255, .8); } .breadcrumb-ct a:hover { color: var(--ct-accent); } / -------------------------------------------------------------------------- 19. Tarifs -------------------------------------------------------------------------- / .price-block { background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1.5rem; } .price-blocktitle { display: flex; align-items: center; gap: .75rem; font-size: 1.15rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ct-border); } .price-blocktitle i { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--ct-primary-050); color: var(--ct-primary); display: grid; place-items: center; font-size: 1rem; } .price-row { display: flex; align-items: baseline; gap: .75rem; padding: .8rem 0; border-bottom: 1px dashed var(--ct-border); } .price-row:last-child { border-bottom: 0; } .price-rowlabel { font-weight: 600; color: var(--ct-heading); } .price-rowdots { flex: 1; border-bottom: 1px dotted var(--ct-border); transform: translateY(-4px); min-width: 1rem; } .price-rowvalue { font-family: var(--ct-font-display); font-weight: 800; font-size: 1.1rem; color: var(--ct-primary); white-space: nowrap; } .price-row--highlight { background: var(--ct-primary-050); margin: 0 -.85rem; padding: .8rem .85rem; border-radius: var(--ct-radius-sm); border-bottom: 0; } .aside-card { background: var(--ct-ink); color: rgba(255, 255, 255, .8); border-radius: var(--ct-radius-lg); padding: 1.75rem; position: relative; overflow: hidden; } .aside-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(135deg, var(--ct-accent) 0 10px, transparent 10px 20px); } .aside-card h3 { color: #fff; font-size: 1.2rem; margin: .5rem 0 1rem; } .aside-card .btn { width: 100%; } .aside-cardrow { display: flex; gap: .8rem; padding: .8rem 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .94rem; } .aside-cardrow i { color: var(--ct-accent); margin-top: .3rem; } .aside-cardrow strong { display: block; color: #fff; font-weight: 600; } .aside-card a { color: #fff; } .aside-card a:hover { color: var(--ct-accent); } .fix-tarifs-btn { color: black !important; } @media (min-width: 992px) { .aside-sticky { position: sticky; top: calc(var(--ct-nav-h) + 1.5rem); } } / -------------------------------------------------------------------------- 20. Galerie photos -------------------------------------------------------------------------- / .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.15rem; } .galleryitem { position: relative; display: block; border-radius: var(--ct-radius); overflow: hidden; background: var(--ct-surface); aspect-ratio: 4 / 3; } .galleryitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .3, 1); } .galleryitem::after { content: ""; position: absolute; inset: 0; background-color: rgba(var(--ct-ink-rgb), .55); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity .35s ease; } .galleryitem:hover img { transform: scale(1.08); } .galleryitem:hover::after, .galleryitem:focus-visible::after { opacity: 1; } .galleryitem:nth-child(6n+1) { grid-column: span 2; aspect-ratio: 8 / 5; } @media (max-width: 991.98px) { .gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .gallery { grid-template-columns: 1fr; } .galleryitem:nth-child(6n+1) { grid-column: span 1; } } .modal-gallery .modal-content { background: transparent; border: 0; } .modal-gallery img { width: 100%; border-radius: var(--ct-radius); } .modal-gallery .btn-close { position: absolute; top: -3rem; right: 0; filter: invert(1) grayscale(1) brightness(2); opacity: 1; } / -------------------------------------------------------------------------- 21. Contact -------------------------------------------------------------------------- / .contact-card { height: 100%; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); padding: 1.75rem 1.5rem; text-align: center; transition: transform .3s ease, box-shadow .3s ease; } .contact-card:hover { transform: translateY(-5px); box-shadow: var(--ct-shadow); } .contact-cardicon { width: 58px; height: 58px; margin: 0 auto 1.1rem; border-radius: 16px; background: var(--ct-ink); color: var(--ct-accent); display: grid; place-items: center; font-size: 1.3rem; } .contact-card small { display: block; font-family: var(--ct-font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ct-body); margin-bottom: .35rem; } .contact-card a, .contact-card p { font-family: var(--ct-font-display); font-weight: 700; font-size: 1.08rem; color: var(--ct-heading); margin: 0; word-break: break-word; } .contact-card a:hover { color: var(--ct-primary); } .map-frame { border-radius: var(--ct-radius-lg); overflow: hidden; border: 1px solid var(--ct-border); box-shadow: var(--ct-shadow); line-height: 0; } .map-frame iframe { width: 100%; min-height: 420px; border: 0; display: block; } / -------------------------------------------------------------------------- 22. Pied de page -------------------------------------------------------------------------- / .footer { background: var(--ct-ink); color: rgba(255, 255, 255, .68); } / Liseré supérieur : un simple dégradé fin plutôt qu'une bande façon signalisation de chantier (peu adaptée à un pied de page de portail). / .footertop-accent { height: 3px; background: linear-gradient(90deg, var(--ct-primary) 0%, var(--ct-accent) 50%, var(--ct-ok) 100%); } .footer h3 { color: #fff; font-size: 1.02rem; margin-bottom: 1.35rem; position: relative; padding-bottom: .75rem; } .footer h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--ct-accent); } .footer a { color: rgba(255, 255, 255, .68); transition: color .25s ease, padding-left .25s ease; } .footer a:hover { color: #fff; } .footerlogo { max-height: 64px; width: auto; margin-bottom: 1.1rem; } .footerlinks a { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem 0; } .footerlinks a i { color: var(--ct-accent); font-size: .75rem; } .footerlinks a:hover { padding-left: .35rem; } .footercontact { display: flex; gap: .75rem; padding: .35rem 0; align-items: flex-start; } .footercontact i { color: var(--ct-accent); margin-top: .35rem; } .footerhours { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .92rem; } .footerhours span:last-child { font-family: var(--ct-font-mono); font-size: .84rem; text-align: right; } .footerbottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 1.35rem 0; font-size: .875rem; } .back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1035; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ct-primary); color: #fff; border: 0; box-shadow: var(--ct-shadow); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--ct-primary-600); color: #fff; } / -------------------------------------------------------------------------- Bandeau cookies (CookieConsent v3, cookieconsent.min.css chargé APRÈS cette feuille dans header.tpl — d'où le !important nécessaire pour la surcharger). Sa boîte flottante par défaut se positionne à gauche avec left:3em et max-width:24em (~432px cumulés), sans repli fiable sur les largeurs de téléphone courantes (~390-430px) : elle dépassait alors la largeur de l'écran et provoquait un défilement latéral sur TOUTES les pages, le bandeau étant chargé globalement (footer.tpl). On la contraint à toujours respecter la largeur de l'écran. / @media (max-width: 767.98px) { .cc-window { left: .75rem !important; right: .75rem !important; max-width: none !important; box-sizing: border-box !important; } } / Barre d'action mobile (téléphone + RDV toujours accessibles) / .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1036; display: none; gap: .5rem; padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--ct-border); } .mobile-bar .btn { flex: 1; padding: .7rem 1rem; font-size: .95rem; } @media (max-width: 767.98px) { .mobile-bar { display: flex; } body { padding-bottom: 4.5rem; } .back-to-top { bottom: 5.25rem; } } / -------------------------------------------------------------------------- 23. Animations d'apparition -------------------------------------------------------------------------- / .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } html:not(.js) [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } , ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } .heroslide.is-active { animation: none; } } /* -------------------------------------------------------------------------- 24. Impression -------------------------------------------------------------------------- / @media print { .nav-ct, .topbar, .mobile-bar, .back-to-top, .cta-band, .heromedia { display: none !important; } body { padding-bottom: 0; color: #000; } .sec { padding: 1rem 0; } } / ========================================================================== 25. COUCHE D'ANIMATION Tout ce qui suit est neutralisé par la règle prefers-reduced-motion située en fin de fichier. ========================================================================== / / --- 25.1 Barre de progression de lecture ------------------------------- / .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1060; pointer-events: none; background: transparent; } .scroll-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ct-primary), var(--ct-accent)); box-shadow: 0 0 12px rgba(var(--ct-accent-rgb), .6); transition: width .12s linear; } / --- 25.2 Entrée de la bannière ----------------------------------------- / @keyframes ct-hero-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes ct-hero-card { from { opacity: 0; transform: translateY(38px) scale(.97); } to { opacity: 1; transform: none; } } .herocontent .eyebrow { animation: ct-hero-up .8s .05s cubic-bezier(.2, .7, .3, 1) both; } .herotitle { animation: ct-hero-up .9s .15s cubic-bezier(.2, .7, .3, 1) both; } .herorotator { animation: ct-hero-up .9s .28s cubic-bezier(.2, .7, .3, 1) both; } .herotext { animation: ct-hero-up .9s .38s cubic-bezier(.2, .7, .3, 1) both; } .heroactions { animation: ct-hero-up .9s .48s cubic-bezier(.2, .7, .3, 1) both; } .heropoints { animation: ct-hero-up .9s .58s cubic-bezier(.2, .7, .3, 1) both; } .hero-card { animation: ct-hero-card 1s .4s cubic-bezier(.2, .7, .3, 1) both; } / Parallaxe : le fond glisse plus lentement que le contenu / .heromedia { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0); } / --- 25.3 Ligne de texte tournante -------------------------------------- / .herorotator { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .herorotator-label { font-family: var(--ct-font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); white-space: nowrap; } .rotator { position: relative; display: block; height: 1.75em; min-width: 16ch; overflow: hidden; font-family: var(--ct-font-display); font-weight: 700; font-size: clamp(1.05rem, 2.1vw, 1.35rem); color: var(--ct-accent); flex: 1 1 auto; } @media (max-width: 575.98px) { / Les phrases les plus longues ("le contrôle technique périodique", "le contrôle des émissions"...) dépassent largement les 16ch minimum une fois partagées avec .herorotator-label sur la même ligne : en overflow:hidden + white-space:nowrap, elles se retrouvaient coupées net. Le texte tournant passe donc sur sa propre ligne, pleine largeur, pour avoir la place de s'afficher en entier. / .herorotator { flex-direction: column; align-items: flex-start; gap: .35rem; } .rotator { width: 100%; } } .rotatoritem { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(100%); transition: transform .55s cubic-bezier(.2, .7, .3, 1), opacity .45s ease; } .rotatoritem.is-active { opacity: 1; transform: none; } .rotatoritem.is-leaving { opacity: 0; transform: translateY(-100%); } / --- 25.4 Pastille d'ouverture en temps réel ---------------------------- / .badge-live { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; transition: color .3s ease, background-color .3s ease, border-color .3s ease; } .badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .badge-live.is-open { color: #6EE7B7; background: rgba(18, 168, 112, .16); border-color: rgba(18, 168, 112, .4); } .badge-live.is-open::before { animation: ct-pulse 2.4s infinite; } .badge-live.is-closed { color: #98A2B3; background: rgba(75, 86, 101, .14); border-color: rgba(75, 86, 101, .35); } .topbar .badge-live { font-size: .74rem; padding: .15rem .6rem; } .topbar .badge-live.is-closed { color: #98A2B3; } / --- 25.5 Bande défilante ----------------------------------------------- / .marquee { background: var(--ct-ink); border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); overflow: hidden; padding: .9rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marqueetrack { display: flex; width: max-content; animation: ct-marquee 38s linear infinite; } .marquee:hover .marqueetrack { animation-play-state: paused; } .marqueeitem { display: inline-flex; align-items: center; gap: 1.75rem; padding-right: 1.75rem; font-family: var(--ct-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: rgba(255, 255, 255, .85); white-space: nowrap; } .marqueeitem::after { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--ct-accent); transform: rotate(45deg); flex: none; } @keyframes ct-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } / --- 25.6 Cartes prestations : halo suivant le curseur ------------------ / .card-service > { position: relative; z-index: 1; } .card-service::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--ct-primary-rgb), .12), transparent 62%); opacity: 0; transition: opacity .35s ease; } .card-service:hover::before { opacity: 1; } .card-serviceicon { transition: background-color .3s ease, color .3s ease, transform .45s cubic-bezier(.2, .7, .3, 1); } .card-service:hover .card-serviceicon { transform: translateY(-3px) rotate(-6deg); } /* --- 25.7 Étapes : la ligne se dessine ---------------------------------- / .stepline { position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--ct-primary), rgba(var(--ct-primary-rgb), .15)); transform: scaleX(0); transform-origin: left; transition: transform 1s .25s cubic-bezier(.2, .7, .3, 1); } .is-visible .stepline { transform: scaleX(1); } .step::after { transform: scale(0); transition: transform .5s .15s cubic-bezier(.34, 1.56, .64, 1); } .is-visible .step::after { transform: scale(1); } @media (max-width: 767.98px) { .stepline { display: none; } } / --- 25.8 Révélation des images par volet ------------------------------- / .js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.2, .7, .3, 1); } [data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); } .js [data-reveal="mask"] img { transform: scale(1.12); transition: transform 1.4s cubic-bezier(.2, .7, .3, 1); } [data-reveal="mask"].is-visible img { transform: scale(1); } / --- 25.9 Boutons : reflet au survol ------------------------------------ / .btn-primary, .btn-accent, .btn-ink { background-image: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .28) 47%, transparent 60%); background-size: 260% 100%; background-position: 140% 0; background-repeat: no-repeat; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, background-position .75s cubic-bezier(.2, .7, .3, 1); } .btn-primary:hover, .btn-accent:hover, .btn-ink:hover { background-position: -40% 0; } .btn-accent { background-image: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .55) 47%, transparent 60%); } / --- 25.10 Chiffres animés ---------------------------------------------- / .stat { display: flex; align-items: baseline; gap: .35rem; font-family: var(--ct-font-display); font-weight: 800; font-size: 1.45rem; color: var(--ct-heading); line-height: 1; } .stat small { font-size: .95rem; font-weight: 700; color: var(--ct-primary); } .assuranceitem { transition: background-color .3s ease; } .assuranceitem:hover { background: var(--ct-primary-050); } .assuranceicon { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); } .assuranceitem:hover .assuranceicon { transform: rotate(-8deg) scale(1.08); } / --- 25.11 Indicateur de défilement -------------------------------------- / / Le position:absolute est conservé (sort l'élément du flux flex de .hero, voir l'historique plus haut dans le fichier) mais l'indicateur lui-même n'est plus voulu du tout, ni sur desktop ni sur mobile : display:none à la place de inline-flex. / .heroscroll { position: absolute; left: 50%; bottom: 1.75rem; z-index: 3; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: .5rem; font-family: var(--ct-font-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .heroscroll:hover { color: #fff; } .heroscroll span { width: 24px; height: 38px; border: 2px solid currentColor; border-radius: 12px; position: relative; } .heroscroll span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px; background: var(--ct-accent); transform: translateX(-50%); animation: ct-scroll-dot 1.9s infinite; } @keyframes ct-scroll-dot { 0% { opacity: 0; transform: translate(-50%, 0); } 35% { opacity: 1; } 75% { opacity: 0; transform: translate(-50%, 13px); } 100% { opacity: 0; } } / --- 25.12 Retour en haut : anneau de progression ----------------------- / .back-to-top { position: fixed; } .back-to-top::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(var(--ct-accent) calc(var(--sp, 0) 1%), rgba(255, 255, 255, .28) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); } /* --- 25.13 Titres de section : trait qui se déploie ---------------------- / .sec-title { position: relative; } .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .6s .1s cubic-bezier(.2, .7, .3, 1); } .is-visible .eyebrow::before, .herocontent .eyebrow::before, .page-hero .eyebrow::before { transform: scaleX(1); } / --- 25.14 Accordéon et cartes : micro-mouvements ----------------------- / .accordion-ct .accordion-item { transition: box-shadow .3s ease, border-color .3s ease; } .accordion-ct .accordion-item:has(.accordion-button:not(.collapsed)) { box-shadow: var(--ct-shadow); border-color: transparent; } .card-news { position: relative; overflow: hidden; } .card-news::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--ct-accent); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2, .7, .3, 1); } .card-news:hover::after { transform: scaleX(1); } .price-row { transition: background-color .25s ease, transform .25s ease; } .price-row:hover { transform: translateX(4px); } .hoursrow { transition: background-color .25s ease; } .hoursrow:hover { background: var(--ct-surface); } .contact-cardicon { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); } .contact-card:hover .contact-cardicon { transform: rotate(-8deg) scale(1.06); } .galleryitem { transition: transform .35s cubic-bezier(.2, .7, .3, 1); } .galleryitem:hover { transform: translateY(-4px); } / --- 25.15 Neutralisation si l'utilisateur réduit les animations -------- / @media (prefers-reduced-motion: reduce) { .marqueetrack { animation: none; transform: none; } .heromedia { transform: none; } .rotator { height: auto; } .rotatoritem { position: static; opacity: 1; transform: none; } .rotatoritem:not(.is-active) { display: none; } .stepline, .step::after { transform: none; } [data-reveal="mask"] { clip-path: none; } [data-reveal="mask"] img { transform: none; } .eyebrow::before { transform: none; } .heroscroll span::after { animation: none; } } / Eyebrows hors zone d'apparition : le trait reste visible / .offcanvas-ct .eyebrow::before, .footer .eyebrow::before, .topbar .eyebrow::before { transform: scaleX(1); } / ========================================================================== 26. PAGES DE SERVICE (RDV en ligne, rappel, membres, mes contrôles, mentions légales, politique de cookies) ========================================================================== / / --- 26.1 Cadre d'intégration (iframes externes) ------------------------- / .embed-frame { background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow); overflow: hidden; } .embed-framehead { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.35rem; border-bottom: 1px solid var(--ct-border); background: var(--ct-surface); } .embed-framedot { width: 9px; height: 9px; border-radius: 50%; background: var(--ct-border); flex: none; } .embed-framedot:nth-child(2) { background: var(--ct-primary); } .embed-framedot:nth-child(3) { background: var(--ct-ok); } .embed-frametitle { margin-left: .5rem; font-family: var(--ct-font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--ct-body); } .embed-framebody { position: relative; background: #fff; } .embed-frame iframe { width: 100%; border: 0; display: block; } .embed-frameloading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .75rem; background: #fff; color: var(--ct-body); font-family: var(--ct-font-mono); font-size: .82rem; transition: opacity .4s ease, visibility .4s; } .embed-frameloading.is-hidden { opacity: 0; visibility: hidden; } .embed-frameloading .spinner-ct { width: 26px; height: 26px; border-width: 2.5px; } / --- 26.2 En-tête de page simple (sans image), pour les pages légales --- / .page-hero--plain { background: var(--ct-ink); padding: calc(var(--ct-nav-h) + 3.5rem) 0 2.75rem; } .page-hero--plain::before { background: radial-gradient(120% 140% at 15% 0%, rgba(var(--ct-primary-rgb), .35) 0%, transparent 60%); } .page-hero--plain::after { mask-image: linear-gradient(180deg, #000 0%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); } / --- 26.3 Contenu juridique ----------------------------------------------- / .legal { font-size: .98rem; line-height: 1.75; } .legal h2, .legal h3 { font-size: 1.1rem; margin-top: 2.25rem; margin-bottom: .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--ct-border); } .legal h2:first-child, .legal h3:first-child { margin-top: 0; } .legal p { margin-bottom: 1rem; } .legal ul { margin-bottom: 1rem; padding-left: 1.15rem; } .legal li { margin-bottom: .4rem; } .legal a { color: var(--ct-primary); font-weight: 600; } .legal a:hover { color: var(--ct-primary-600); } .legal strong { color: var(--ct-heading); } .legal-toc { background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: var(--ct-radius); padding: 1.5rem 1.6rem; margin-bottom: 2.5rem; } .legal-toctitle { font-family: var(--ct-font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ct-primary); margin-bottom: .9rem; } .legal-toc ol { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.15rem; font-size: .92rem; } .legal-toc li { break-inside: avoid; margin-bottom: .55rem; } .legal-toc a { color: var(--ct-heading); font-weight: 600; } .legal-toc a:hover { color: var(--ct-primary); padding-left: .25rem; } @media (max-width: 575.98px) { .legal-toc ol { columns: 1; } } .cookie-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0 2rem; } .cookie-type { background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); padding: 1.15rem 1.25rem; } .cookie-typeicon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--ct-primary-050); color: var(--ct-primary); margin-bottom: .75rem; font-size: 1rem; } .cookie-type.is-optional .cookie-typeicon { background: rgba(var(--ct-accent-rgb), .18); color: #A6720F; } .cookie-type h3 { font-size: .96rem; margin: 0 0 .4rem; border: 0; padding: 0; } .cookie-type p { font-size: .88rem; margin: 0; color: var(--ct-body); } @media (max-width: 575.98px) { .cookie-types { grid-template-columns: 1fr; } } / --- 26.4 Formulaire de recherche (rapports de contrôle) ------------------ / .search-panel { background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow); padding: clamp(1.75rem, 4vw, 2.75rem); } .search-panel .form-label { font-family: var(--ct-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ct-body); margin-bottom: .5rem; } .search-panel .form-control { border: 1px solid var(--ct-border); border-radius: var(--ct-radius-sm); padding: .75rem 1rem; font-size: 1rem; } .search-panel .form-control:focus { border-color: var(--ct-primary); box-shadow: 0 0 0 4px var(--ct-primary-050); } .search-panel .input-icon { position: relative; } .search-panel .input-icon i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ct-body); } .search-panel .input-icon .form-control { padding-left: 2.6rem; } .search-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.1rem; } .search-steps li { display: flex; gap: .9rem; font-size: .92rem; color: var(--ct-body); } .search-steps span { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ct-primary-050); color: var(--ct-primary); font-family: var(--ct-font-mono); font-size: .78rem; font-weight: 700; display: grid; place-items: center; } / --- 26.5 Bandeau d'information externe (redirection vers un partenaire) - / .partner-note { display: flex; align-items: flex-start; gap: .9rem; background: var(--ct-primary-050); border: 1px solid rgba(var(--ct-primary-rgb), .25); border-radius: var(--ct-radius); padding: 1.1rem 1.3rem; font-size: .92rem; color: var(--ct-heading); } .partner-note i { color: var(--ct-primary); font-size: 1.1rem; margin-top: .1rem; } .partner-note strong { display: block; margin-bottom: .2rem; } / --- 26.6 Vignette "prochaine étape" (cartes de contact secondaires) ----- / .next-step { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); padding: 1.1rem 1.25rem; height: 100%; transition: transform .3s ease, box-shadow .3s ease; } .next-step:hover { transform: translateY(-4px); box-shadow: var(--ct-shadow); } .next-stepicon { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--ct-primary-050); color: var(--ct-primary); font-size: 1.2rem; } .next-steptitle { font-family: var(--ct-font-display); font-weight: 700; font-size: .98rem; color: var(--ct-heading); margin: 0 0 .15rem; } .next-steptext { font-size: .85rem; color: var(--ct-body); margin: 0; } .next-steparrow { margin-left: auto; color: var(--ct-body); transition: transform .25s ease, color .25s ease; } .next-step:hover .next-steparrow { transform: translateX(4px); color: var(--ct-primary); } / ========================================================================== 27. PORTAIL NATIONAL (site-principal) Composants propres au site "maître" auto-nome.com : widget de recherche de centre (un seul composant, plusieurs tailles), grille de partenaires, grille de départements. Les jetons/composants ci-dessus (boutons, hero, cartes, footer, animations...) sont directement réutilisés. ========================================================================== / / --- 27.1 Widget de recherche de centre (remplace go/go2/go3) ------------ / .search-centre { position: relative; display: flex; gap: .6rem; background: #fff; padding: .5rem; border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow-lg); } .search-centrefield { position: relative; flex: 1; display: flex; align-items: center; } .search-centrefield i { position: absolute; left: 1.1rem; color: var(--ct-primary); font-size: 1.05rem; pointer-events: none; } .search-centreinput { width: 100%; border: 0; background: transparent; padding: .95rem 1rem .95rem 2.75rem; font-family: var(--ct-font-body); font-size: 1rem; color: var(--ct-heading); } .search-centreinput:focus { outline: none; } .search-centresubmit { flex: none; white-space: nowrap; } .search-centresuggestions { position: absolute; top: calc(100% + .6rem); left: 0; right: 0; / Largeur mini indépendante de la largeur du widget parent : dans une colonne étroite (ex. pied de page), la liste ne doit pas se resserrer au point de forcer le texte des suggestions à retourner à la ligne mot par mot (bug déjà vu : "42300 ( Roanne )" éclaté sur 4 lignes). / min-width: 280px; z-index: 20; margin: 0; padding: .4rem; list-style: none; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); box-shadow: var(--ct-shadow); max-height: 320px; overflow-y: auto; } .search-centresuggestions li + li { margin-top: .15rem; } .search-centresuggestions button { display: flex; align-items: center; gap: .6rem; width: 100%; border: 0; background: transparent; text-align: left; padding: .65rem .85rem; border-radius: var(--ct-radius-sm); font-size: .95rem; color: var(--ct-heading); / Une suggestion tient sur une seule ligne, tronquée si besoin — sans ça, dans un conteneur étroit, le texte revient à la ligne mot par mot ("42300 ( Roanne )" éclaté sur 4 lignes). / white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-centresuggestions button:hover, .search-centresuggestions button:focus-visible { background: var(--ct-primary-050); color: var(--ct-primary); } .search-centresuggestions button::before { content: "\f3ee"; / bi-geo-alt / font-family: "bootstrap-icons"; color: var(--ct-primary); font-size: .85rem; } @media (max-width: 575.98px) { .search-centre { flex-wrap: wrap; } .search-centresubmit { width: 100%; justify-content: center; } } / Variante compacte : intégrée à la barre de navigation / .search-centre--nav { box-shadow: none; border: 1px solid var(--ct-border); padding: .2rem; } .search-centre--nav .search-centreinput { padding: .5rem .75rem .5rem 2.4rem; font-size: .92rem; } .search-centre--nav .search-centrefield i { left: .85rem; font-size: .92rem; } .search-centre--nav .search-centresubmit { padding: .5rem .9rem; } / --- 27.2 Grille de partenaires ------------------------------------------ / .partners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .partners-griditem { display: flex; align-items: center; justify-content: center; height: 100px; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); padding: 1rem 1.25rem; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .partners-griditem:hover { transform: translateY(-4px); box-shadow: var(--ct-shadow); border-color: transparent; } .partners-griditem img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease; } .partners-griditem:hover img { filter: none; opacity: 1; } / --- 27.3 Grille de départements (recherche par secteur) ----------------- / .dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; } .dept-griditem { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-sm); font-size: .92rem; font-weight: 600; color: var(--ct-heading); transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; } .dept-griditem i { color: var(--ct-primary); } .dept-griditem:hover { background: var(--ct-ink); border-color: var(--ct-ink); color: #fff; transform: translateY(-2px); } .dept-griditem:hover i { color: var(--ct-accent); } .dept-griditem.is-disabled { color: var(--ct-body); opacity: .45; pointer-events: none; } / --- 27.8 Carte de France interactive (secteur.php) ----------------------- / .france-map { background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow); padding: clamp(1rem, 3vw, 2rem); } .france-mapsvg { width: 100%; height: auto; display: block; / Légère ombre portée sous l'ensemble des départements : détache la carte du fond au lieu de la laisser à plat/terne. / filter: drop-shadow(0 6px 14px rgba(var(--ct-ink-rgb), .1)); } .fr-dept-link { cursor: pointer; } .fr-dept { fill: #BFDCEC; stroke: #fff; stroke-width: 1.4; transition: fill .2s ease; } .fr-dept-link:hover .fr-dept, .fr-dept-link:focus-visible .fr-dept { fill: var(--ct-primary); } .fr-dept-link:active .fr-dept { fill: var(--ct-primary-600); } .fr-dept-link:focus { outline: none; } .fr-dept-link:focus-visible .fr-dept { stroke: var(--ct-accent); stroke-width: 2.4; } / --- 27.9 Carte "centre partenaire" (résultats visite.php) ---------------- / .card-centre { height: 100%; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; transition: transform .3s ease, box-shadow .3s ease; } .card-centre:hover { transform: translateY(-4px); box-shadow: var(--ct-shadow); } .card-centrehead { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; } .card-centrehead h3 { font-size: 1.05rem; margin: 0; } .card-centredist { flex: none; font-family: var(--ct-font-mono); font-size: .72rem; font-weight: 600; color: var(--ct-primary); background: var(--ct-primary-050); padding: .25rem .55rem; border-radius: 999px; white-space: nowrap; } .card-centreline { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--ct-body); margin: 0; } .card-centreline i { color: var(--ct-primary); } .card-centreline a { color: var(--ct-body); } .card-centreline a:hover { color: var(--ct-primary); } .card-centreactions { margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; gap: .5rem; } .card-centre__actions .btn { flex: 1 1 auto; } / --- 27.10 Sélecteur de date (rapport-controle-enligne-gc.php) ------------ / .ds_box { background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); box-shadow: var(--ct-shadow-lg); overflow: hidden; z-index: 1050; } .ds_tbl { background: #fff; border-collapse: collapse; } .ds_head { background: var(--ct-ink); color: #fff; font-family: var(--ct-font-body); font-size: .82rem; font-weight: 700; text-align: center; padding: .5rem .4rem; } .ds_subhead { background: var(--ct-surface); color: var(--ct-body); font-size: .78rem; font-weight: 700; text-align: center; padding: .35rem; } .ds_cell { background: #fff; color: var(--ct-heading); font-size: .85rem; text-align: center; padding: .5rem; cursor: pointer; transition: background-color .15s ease; } .ds_cell:hover { background: var(--ct-primary-050); color: var(--ct-primary); } / --- 27.11 Bannière d'accueil : illustration "scan" (remplace les photos) - Silhouette de véhicule (reprise du loader-car), faisceau de contrôle en mouvement et points validés qui s'allument à son passage — un visuel qui évoque directement le contrôle technique plutôt qu'une photo générique. / .heromedia--scan { background: radial-gradient(120% 100% at 18% 15%, var(--ct-primary) 0%, var(--ct-primary-600) 45%, var(--ct-ink) 100%); } .heroscan-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .heroscan-car-cladding { fill: rgba(0, 0, 0, .28); } .heroscan-car-body { fill: rgba(255, 255, 255, .09); stroke: rgba(255, 255, 255, .3); stroke-width: .5; } .heroscan-car-glass { fill: rgba(242, 169, 59, .22); } .heroscan-car-wheel { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .3); stroke-width: .5; } .heroscan-road { stroke: rgba(255, 255, 255, .22); stroke-width: 2; stroke-dasharray: 14 14; animation: hero-road-scroll 1.4s linear infinite; } @keyframes hero-road-scroll { to { stroke-dashoffset: -56; } } .heroscan-pin circle { fill: var(--ct-ok); } .heroscan-pin path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .heroscan-pin { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); animation: hero-pin-pulse 4s var(--delay, 0s) infinite; } @keyframes hero-pin-pulse { 0% { opacity: 0; transform: scale(.4); } 8% { opacity: 1; transform: scale(1.2); } 14% { transform: scale(1); } 75% { opacity: 1; transform: scale(1); } 88% { opacity: 0; transform: scale(.9); } 100% { opacity: 0; transform: scale(.9); } } .heroscan-beam { animation: hero-scan-sweep 4s linear infinite; } @keyframes hero-scan-sweep { to { transform: translateX(900px); } } / Vidéo de fond : au-dessus de l'illustration SVG (qui reste en secours, retirée uniquement côté JS — cf. main.js — sur mobile, en cas d'échec de chargement, ou si le visiteur préfère un mouvement réduit). / .herobg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } / --- 27.4 Bannière d'accueil du portail ----------------------------------- Composition volontairement différente de la bannière VL_2026 (pas de "hero-card" flottante, pas de bloc à deux colonnes) : ici la recherche EST la bannière, en une seule colonne centrée — le portail n'est pas un site de centre, sa page d'accueil doit avoir sa propre identité. / .hero--portal { min-height: min(58vh, 560px); padding-top: calc(var(--ct-nav-h) + 2.25rem); padding-bottom: 5rem; } .heroportal-inner { max-width: 760px; margin: 0 auto; text-align: center; } .heroportal-inner .herotext { margin-left: auto; margin-right: auto; } .heroportal-inner .heropoints { justify-content: center; } .hero-search { max-width: 620px; margin: 2rem auto 0; } .hero-search .search-centre { padding: .6rem; } .hero-searchlinks { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .9rem; font-size: .88rem; color: rgba(255, 255, 255, .68); } .hero-searchlinks a { color: #fff; font-weight: 600; padding-bottom: 1px; border-bottom: 1px solid rgba(255, 255, 255, .4); } .hero-searchlinks a:hover { border-color: var(--ct-accent); color: var(--ct-accent); } / --- 27.5 Bandeau de statistiques flottant --------------------------------- Traitement volontairement différent du bandeau ".assurance" de VL_2026 (pas de cartes à icônes rondes) : une seule barre sombre qui chevauche le bas de la bannière, séparateurs verticaux fins — signature du portail. / .stats-dock { position: relative; z-index: 3; margin-top: -3.25rem; } .stats-dockinner { background: var(--ct-ink); border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow-lg); padding: 1.5rem clamp(1rem, 3vw, 2.5rem); display: grid; grid-template-columns: repeat(4, 1fr); } .stats-dockitem { text-align: center; padding: 0 .5rem; border-left: 1px solid rgba(255, 255, 255, .12); } .stats-dockitem:first-child { border-left: 0; } .stats-dockvalue { display: block; font-family: var(--ct-font-display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: #fff; line-height: 1.2; } .stats-dockvalue small { font-size: .6em; color: var(--ct-accent); margin-left: .15rem; } .stats-docklabel { display: block; font-size: .78rem; color: rgba(255, 255, 255, .62); margin-top: .15rem; } @media (max-width: 767.98px) { .stats-dock { margin-top: -2.25rem; } .stats-dockinner { grid-template-columns: repeat(2, 1fr); row-gap: 1.25rem; } .stats-dockitem:nth-child(2) { border-left: 1px solid rgba(255, 255, 255, .12); } .stats-dockitem:nth-child(3) { border-left: 0; } } / --- 27.6 Étapes du portail (numérotation en jeton rond, pas en angle) ---- / .step-token { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; } .step-tokennum { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--ct-primary-050); color: var(--ct-primary); font-family: var(--ct-font-display); font-weight: 800; font-size: 1.2rem; flex: none; } .step-token h3 { font-size: 1.08rem; margin-bottom: .4rem; } .step-token p { font-size: .93rem; margin: 0; max-width: 30ch; } .step-tokenconnector { display: none; } @media (min-width: 768px) { .steps--token { position: relative; } .steps--token::before { content: ""; position: absolute; top: 27px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; background: repeating-linear-gradient(90deg, var(--ct-border) 0 10px, transparent 10px 18px); z-index: 0; } .step-token { position: relative; z-index: 1; } .step-tokennum { background: var(--ct-surface); border: 2px solid var(--ct-primary-050); } } / --- 27.7 Carrousel de partenaires (défilement continu) ------------------- */ .partners-carousel { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); } .partners-carouseltrack { display: flex; width: max-content; gap: 1.25rem; animation: partners-scroll 70s linear infinite; } .partners-carousel:hover .partners-carouseltrack { animation-play-state: paused; } .partners-carouselitem { flex: none; width: 150px; height: 92px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); padding: 1rem 1.25rem; } .partners-carouselitem img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease; } .partners-carouselitem:hover img { filter: none; opacity: 1; } @keyframes partners-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .partners-carouseltrack { animation: none; overflow-x: auto; } }