/* ========================================================================== MODÈLE "VL" — Contrôle technique automobile Feuille de style principale — à charger APRÈS bootstrap.min.css (5.3.x) Auteur : modèle générique multi-partenaires (Smarty) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens de design -------------------------------------------------------------------------- */ :root { /* Palette : graphite refroidi + bronze-laiton + jaune signalisation. Le bronze-laiton est une teinte voisine de l'or mais nettement désaturée : elle se distingue clairement du jaune-accent (qui est à la même teinte à ±0° mais bien plus vif) tout en restant dans un registre "métal chaud" cohérent avec l'automobile. Le fond passe sur un graphite légèrement refroidi : le contraste avec le jaune vient de la clarté plutôt que d'un affrontement de teintes. */ --ct-ink: #181A1D; --ct-ink-rgb: 24, 26, 29; --ct-ink-2: #20242A; --ct-primary: #7A6A45; --ct-primary-rgb: 122, 106, 69; --ct-primary-600: #5C4F30; --ct-primary-600-rgb: 92, 79, 48; --ct-primary-050: #EFECE3; --ct-accent: #FFC94A; --ct-ok: #12A870; --ct-body: #56534B; --ct-heading: #181A1D; --ct-surface: #F7F6F3; --ct-border: #E7E3D9; --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: 122, 106, 69; --bs-link-color: var(--ct-primary); --bs-link-color-rgb: 122, 106, 69; --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: #FFD777; --bs-btn-hover-border-color: #FFD777; box-shadow: 0 12px 24px -14px rgba(255, 201, 74, .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-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); } } /* 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(255, 201, 74, .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); } .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(255, 201, 74, .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: #FFC94A; background: rgba(255, 201, 74, .14); border-color: rgba(255, 201, 74, .35); } .topbar .badge-live { font-size: .74rem; padding: .15rem .6rem; } .topbar .badge-live.is-closed { color: #FFC94A; } / --- 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: #FFC94A; } .embed-framedot:nth-child(3) { background: #12A870; } .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(255, 201, 74, .18); color: #B8860B; } .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); }