/* ========================================================================== CAPTURES PRODUIT v3 — 19/09/2026 captures réelles de l'environnement de démonstration (jeu demo-v2, Orvalis Automobiles). Carte des usages : docs/marketing/VISUAL-ASSET-MAP.md. Feuille à part, chargée après refonte.impra.css : elle ne dépend d'aucune couche lab--vN pour exister. Du Hero, elle ne règle qu'une chose — le conteneur de la fenêtre produit ; sa composition, ses couleurs et son mouvement restent dans refonte.impra.css. Les sélecteurs portent l'identifiant de la section : ils l'emportent sur les couches précédentes sans !important. Trois plages, parce que la page change de mise en page à chacune : ≥ 1180 px le cockpit est sur trois colonnes ; 768–1179 px il passe à deux colonnes et les cartes font 300 px de haut ; ≤ 767 px tout s'empile. ========================================================================== */ /* ── Une capture réelle ─────────────────────────────────────────────────── */ .pv3 { margin: 0; display: block; overflow: hidden; border-radius: 12px; background: #fff; } .pv3 picture, .pv3 img { display: block; width: 100%; height: auto; } .section--encre .pv3 { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(15, 23, 46, 0.14); } .section--papier .pv3 { box-shadow: 0 18px 50px -12px rgba(15, 23, 46, 0.26), 0 0 0 1px rgba(15, 23, 46, 0.07); } /* Hero : la fenêtre produit est passée en (AVIF, puis WebP) ; le conteneur doit rester un bloc de la taille de l'écran, sinon l'image en hauteur 100 % n'a plus de référence. La règle de la couche v8 sur .ha-ecran img continue de s'appliquer. */ .lab .hero .ha-ecran picture { display: block; width: 100%; height: 100%; } /* Téléphone : l'image, désormais dans , remplit l'écran comme l'ancienne (haut de l'écran visible). */ .mk-tel .ecran > picture { display: block; width: 100%; height: 100%; } .mk-tel .ecran > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* C · la carte du sourcing : la vraie, attribution OpenStreetMap comprise. Affichée à son format, sans recadrage : la légende et l'attribution doivent rester lisibles. */ /* D · la marge : « Où va l'argent ? » puis la marge nette, même écran. */ /* E · la journée : « À traiter » et indicateurs, puis véhicules à surveiller. */ /* ── Web et mobile (#terrain) ───────────────────────────────────────────── */ .lab #terrain .usages-fenetre picture, .lab #terrain .usages-fenetre img { display: block; width: 100%; height: auto; } /* ══ CINQ CARTES (#metier) — « Ce qu'IMPRA vous évite au quotidien. » ═══════════════ 28/09/2026 — cinq petites démonstrations du produit, sur la géométrie du 26/09 : grille 24 colonnes × 4 rangées (rangée ≈ 0,479 × colonne, unités cq), gap 24 — saisie 1–8 r1 (petite), marge 1–8 r2–4 (haute), plaque 9–16 r1–2 et alertes 17–24 r1–2 (carrés), documents 9–24 r3–4 (grande). Tablette 768–1099 : deux colonnes. Téléphone : une colonne, ordre du DOM (saisie, plaque, alertes, marge, documents). Fil rouge : une impulsion bleue fine (#1F74E7 / #4D94F5), jamais de halo. États : data-passe accumule les étapes franchies (js/refonte.impra.js, « 3b ») ; le HTML porte l'état final, peint tel quel sans script ou en mouvement réduit. ═══ */ .lab #metier { position: relative; overflow: hidden; background: var(--impra-clair); } /* respiration claire entre le parcours navy et web & mobile (26/09/2026) */ .lab #metier .cx-fond { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(48% 40% at 92% 0%, rgba(77, 148, 245, 0.10) 0%, rgba(77, 148, 245, 0) 70%); } .lab #metier > .conteneur { position: relative; } .lab #metier .tete-section--cockpit { align-items: center; } .lab #metier .tete-section--cockpit h2 { max-width: none; } .lab #metier .tete-section--cockpit h2 .titre-accent { color: #1F74E7; } .lab #metier .tete-section--cockpit .tete-lien { margin-top: 0; color: #1D6BD5; } .lab #metier .tete-section + .cockpit-v10 { margin-top: clamp(28px, 2.6vw, 40px); } /* — grille (base = téléphone : une colonne) — */ .lab #metier .cockpit-v10 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; container-type: inline-size; } .lab #metier .cx { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px; border-radius: 20px; overflow: hidden; color: #0F172E; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.07), 0 18px 40px -32px rgba(15, 23, 46, 0.28); } .lab #metier .cx-tete { position: relative; z-index: 2; } .lab #metier .cx-tete h3 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.014em; text-wrap: balance; } .lab #metier .cx-tete p { margin-top: 6px; font-size: 15px; line-height: 22px; color: #505967; max-width: 44ch; } .lab #metier .cx-scene { position: relative; transition: opacity 420ms ease; } /* — pièces partagées — */ .lab #metier .cx-ok { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #1F9D55; } .lab #metier .cx-ok::after { content: ""; width: 6.5px; height: 3.5px; margin-top: -1px; border-left: 1.7px solid #fff; border-bottom: 1.7px solid #fff; transform: rotate(-45deg); } .lab #metier .cx-plaque-mini { display: inline-flex; align-items: center; height: 20px; border-radius: 4px; overflow: hidden; background: #fff; color: #0F172E; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; box-shadow: 0 0 0 1px #C6CDD9; font-variant-numeric: tabular-nums; } .lab #metier .cx-plaque-mini i { align-self: stretch; display: flex; align-items: flex-end; justify-content: center; width: 9px; margin-right: 7px; padding-bottom: 3px; background: #1F3E8C; color: #fff; font-size: 5.5px; font-style: normal; letter-spacing: 0; } .lab #metier .cx-plaque-mini { padding-right: 8px; } .lab #metier .cx picture, .lab #metier .cx picture img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ── A · Une seule saisie (petite, navy) : fiche → trois usages ─────────────── */ .lab #metier .cx-scene--saisie { flex: 1; display: grid; grid-template-columns: auto minmax(28px, 1fr) auto; align-items: center; margin-top: 14px; } .lab #metier .cx-mini { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 12px 7px 7px; border-radius: 12px; background: #fff; color: #0F172E; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.7); } .lab #metier .cx-mini-photo { flex: none; width: 72px; height: 46px; border-radius: 8px; overflow: hidden; background: #EEF0F3; } .lab #metier .cx-mini-texte { display: grid; justify-items: start; row-gap: 5px; } .lab #metier .cx-mini-texte b { font-size: 14px; line-height: 18px; font-weight: 700; white-space: nowrap; } .lab #metier .cx-ramif { display: block; width: 100%; height: 90px; overflow: visible; } .lab #metier .cx-ramif--v { display: none; } .lab #metier .cx-ramif-trait { fill: none; stroke: rgba(77, 148, 245, 0.42); stroke-width: 1.5; } .lab #metier .cx-ramif-pouls { fill: none; stroke: #9CC4FA; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 18 100; stroke-dashoffset: 18; opacity: 0; } .lab #metier .cx-usages { display: grid; grid-auto-rows: 30px; margin: 0; padding: 0; list-style: none; } .lab #metier .cx-usages li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 16px; font-weight: 600; color: #DCE6F7; white-space: nowrap; } .lab #metier .cx-usages i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #1F74E7; color: #fff; box-shadow: 0 0 0 3px rgba(31, 116, 231, 0.18); transition: background-color 420ms ease, color 420ms ease, box-shadow 420ms ease; transition-delay: calc(var(--d, 0) * 110ms); } .lab #metier .cx-usages svg { width: 15px; height: 15px; } .lab #metier .cx--saisie:not([data-passe~="actif"]) .cx-usages i { background: rgba(77, 148, 245, 0.10); color: #7FA8E6; box-shadow: inset 0 0 0 1px rgba(77, 148, 245, 0.28); } .lab #metier .cx--saisie:not([data-passe~="actif"]) .cx-usages li { color: rgba(197, 211, 238, 0.7); } .lab #metier .cx-usages li { transition: color 420ms ease calc(var(--d, 0) * 110ms); } .lab[data-motion="prete"] #metier .cx--saisie[data-passe~="impulsion"] .cx-ramif-pouls { animation: cx-pouls 1150ms cubic-bezier(0.45, 0, 0.2, 1) both; } .lab[data-motion="prete"] #metier .cx--saisie[data-passe~="impulsion"] .cx-mini { animation: cx-depart 900ms ease-out both; } @keyframes cx-pouls { 0% { stroke-dashoffset: 18; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } } @keyframes cx-depart { 0% { box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.7), 0 0 0 0 rgba(77, 148, 245, 0.55); } 100% { box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.7), 0 0 0 9px rgba(77, 148, 245, 0); } } /* ── B · Une plaque (bleu pâle) : saisie → recherche → identifié → photo → données ─ */ .lab #metier .cx-scene--plaque { flex: 1; display: flex; flex-direction: column; margin-top: 18px; } .lab #metier .cx-plaque-ligne { display: flex; align-items: center; gap: 10px; max-width: 100%; } .lab #metier .cx-plaque { display: inline-flex; align-items: stretch; height: 48px; border-radius: 7px; overflow: hidden; background: #F4F7FA; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.35), 0 14px 26px -14px rgba(0, 0, 0, 0.55); } .lab #metier .cx-plaque-bande { position: relative; display: grid; grid-template-rows: 1fr auto; place-items: center; width: 27px; padding: 5px 0 4px; background: #1F3E8C; color: #fff; } .lab #metier .cx-plaque-bande b { font-size: 10px; line-height: 10px; font-weight: 700; } .lab #metier .cx-etoiles { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 216, 77, 0.95) 0.7px, transparent 0.9px) 0 0 / 3.5px 3.5px; -webkit-mask: radial-gradient(circle, transparent 4.2px, #000 4.6px, #000 6.6px, transparent 7px); mask: radial-gradient(circle, transparent 4.2px, #000 4.6px, #000 6.6px, transparent 7px); } .lab #metier .cx-plaque-num { display: flex; align-items: center; min-width: 186px; padding: 0 16px; font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: 0.1em; color: #14203A; white-space: pre; } .lab #metier .cx-curseur { display: none; width: 2px; height: 24px; margin-left: 2px; border-radius: 1px; background: #1F74E7; } .lab #metier .cx--plaque[data-passe=""] .cx-curseur, .lab #metier .cx--plaque[data-passe="frappe"] .cx-curseur { display: block; } .lab[data-motion="prete"] #metier .cx--plaque[data-passe=""] .cx-curseur, .lab[data-motion="prete"] #metier .cx--plaque[data-passe="frappe"] .cx-curseur { animation: cx-curseur 800ms steps(2, end) infinite; } .lab #metier .cx-plaque-btn { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: #1F74E7; color: #fff; box-shadow: 0 10px 20px -12px rgba(31, 116, 231, 0.8); transition: transform 160ms ease; } .lab #metier .cx-plaque-btn svg { width: 20px; height: 20px; transition: opacity 160ms ease; } .lab #metier .cx-loader { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(31, 116, 231, 0.25); border-top-color: #1F74E7; opacity: 0; } .lab #metier .cx-plaque-btn .cx-loader { width: 18px; height: 18px; border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; } .lab #metier .cx--plaque[data-passe~="recherche"]:not([data-passe~="identifie"]) .cx-plaque-btn { transform: scale(0.94); } .lab #metier .cx--plaque[data-passe~="recherche"]:not([data-passe~="identifie"]) .cx-loupe { opacity: 0; } .lab #metier .cx--plaque[data-passe~="recherche"]:not([data-passe~="identifie"]) .cx-loader { opacity: 1; } .lab[data-motion="prete"] #metier .cx--plaque[data-passe~="recherche"]:not([data-passe~="identifie"]) .cx-loader { animation: cx-rotation 700ms linear infinite; } /* résultat : la carte blanche, la pastille à cheval sur son bord */ .lab #metier .cx-resultat { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 26px; padding: 22px 14px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.08), 0 16px 32px -22px rgba(15, 23, 46, 0.4); transition: box-shadow 420ms ease; } .lab #metier .cx-resultat::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1.5px; border-radius: 1px; background: linear-gradient(90deg, transparent, #4D94F5 50%, transparent) no-repeat; background-size: 40% 100%; background-position: -60% 0; opacity: 0; } .lab[data-motion="prete"] #metier .cx--plaque[data-passe~="identifie"] .cx-resultat::before { animation: cx-balayage 900ms cubic-bezier(0.45, 0, 0.2, 1) both; } @keyframes cx-balayage { 0% { opacity: 0; background-position: -60% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 160% 0; } } .lab #metier .cx-identifie { position: absolute; left: 12px; top: -12px; display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 4px; border-radius: 999px; background: #E9F6EE; color: #17753F; font-size: 12.5px; line-height: 18px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px rgba(26, 127, 69, 0.2), 0 6px 14px -8px rgba(26, 127, 69, 0.45); transition: opacity 300ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .lab #metier .cx-resultat-corps { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); column-gap: 14px; align-items: center; } .lab #metier .cx-resultat-photo { position: relative; aspect-ratio: 1.6; border-radius: 10px; overflow: hidden; background: #EEF0F3; transition: opacity 480ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .lab #metier .cx-fiche { margin: 0; } .lab #metier .cx-fiche > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(15, 23, 46, 0.07); font-size: 13px; line-height: 17px; transition: opacity 360ms ease calc(var(--d, 0) * 90ms), transform 420ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0) * 90ms); } .lab #metier .cx-fiche > div:first-child { border-top: 0; } .lab #metier .cx-fiche dt { color: #6F7988; white-space: nowrap; } .lab #metier .cx-fiche dd { margin: 0; font-weight: 600; color: #0F172E; white-space: nowrap; } .lab #metier .cx-resultat-actions { display: flex; gap: 8px; margin: 12px 0 0; transition: opacity 360ms ease 380ms; } .lab #metier .cx-resultat-actions span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .lab #metier .cx-bouton-plein { background: #1F74E7; color: #fff; } .lab #metier .cx-bouton-clair { color: #26304A; box-shadow: inset 0 0 0 1px rgba(15, 23, 46, 0.14); } .lab #metier .cx--plaque:not([data-passe~="donnees"]) .cx-resultat-actions { opacity: 0; transition-delay: 0ms; } .lab #metier .cx-plaque-etat { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-size: 13px; color: #505967; opacity: 0; pointer-events: none; transition: opacity 240ms ease; } .lab #metier .cx-plaque-etat .cx-loader { position: static; opacity: 1; } .lab[data-motion="prete"] #metier .cx-plaque-etat .cx-loader { animation: cx-rotation 700ms linear infinite; } .lab #metier .cx--plaque[data-passe~="recherche"]:not([data-passe~="identifie"]) .cx-plaque-etat { opacity: 1; } /* états d'attente */ .lab #metier .cx--plaque:not([data-passe~="identifie"]) .cx-resultat { box-shadow: 0 0 0 1px rgba(29, 107, 213, 0.14); background: rgba(255, 255, 255, 0.55); } .lab #metier .cx--plaque:not([data-passe~="identifie"]) .cx-identifie { opacity: 0; transform: translateY(4px) scale(0.94); } .lab #metier .cx--plaque:not([data-passe~="photo"]) .cx-resultat-photo { opacity: 0; transform: scale(1.04); } .lab #metier .cx--plaque:not([data-passe~="donnees"]) .cx-fiche > div { opacity: 0; transform: translateX(-6px); } .lab #metier .cx--plaque:not([data-passe~="identifie"]) .cx-resultat-corps { visibility: hidden; } @keyframes cx-curseur { to { opacity: 0; } } @keyframes cx-rotation { to { transform: rotate(360deg); } } /* ── D · Votre marge (haute, blanche) : le véhicule, trois chiffres, la marge nette ─ */ .lab #metier .cx-scene--marge { flex: 1; display: flex; flex-direction: column; justify-content: space-between; row-gap: 12px; margin-top: 18px; } .lab #metier .cx-marge-vehicule { display: flex; flex-direction: column; padding: 8px 8px 12px; border-radius: 16px; background: #F5F7FB; box-shadow: inset 0 0 0 1px rgba(15, 23, 46, 0.06); } .lab #metier .cx-marge-photo { height: 150px; border-radius: 11px; overflow: hidden; background: #EEF0F3; } .lab #metier .cx-marge-photo img { object-position: 50% 58%; } .lab #metier .cx-marge-nom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 11px 6px 0; } .lab #metier .cx-marge-nom b { font-size: 16px; line-height: 20px; font-weight: 700; } .lab #metier .cx-marge-nom small { grid-column: 1; font-size: 13px; line-height: 17px; color: #6F7988; } .lab #metier .cx-marge-nom .cx-plaque-mini { grid-column: 2; grid-row: 1 / span 2; } .lab #metier .cx-calcul { position: relative; margin: 0; isolation: isolate; } .lab #metier .cx-calcul::before { content: ""; position: absolute; left: 13px; top: 22px; bottom: -12px; width: 1.5px; background: rgba(31, 116, 231, 0.22); } .lab #metier .cx-calcul > div { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px 10px 0; font-size: 14.5px; line-height: 20px; } .lab #metier .cx-calcul > div + div { border-top: 1px solid rgba(15, 23, 46, 0.06); } .lab #metier .cx-calcul dt { display: flex; align-items: center; gap: 12px; color: #505967; } .lab #metier .cx-calcul dt svg { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: #fff; color: #5B6B87; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.09); transition: color 700ms ease, box-shadow 700ms ease; } .lab #metier .cx-calcul dd { margin: 0; font-weight: 600; color: #0F172E; white-space: nowrap; } /* lecture calme (28/09/2026, à la demande de l'opérateur) : tout reste affiché ; un voile bleu très pâle passe d'une ligne à l'autre — achat, frais, vente — puis le liseré de la marge se renforce et s'efface */ .lab #metier .cx-calcul > div::before { content: ""; position: absolute; inset: 3px -10px; z-index: -1; border-radius: 10px; background: rgba(31, 116, 231, 0.055); opacity: 0; transition: opacity 800ms ease; } .lab #metier .cx--marge[data-passe~="achat"]:not([data-passe~="frais"]) .cx-calcul > div:nth-child(1)::before, .lab #metier .cx--marge[data-passe~="frais"]:not([data-passe~="vente"]) .cx-calcul > div:nth-child(2)::before, .lab #metier .cx--marge[data-passe~="vente"]:not([data-passe~="calcul"]) .cx-calcul > div:nth-child(3)::before { opacity: 1; } .lab #metier .cx--marge[data-passe~="achat"]:not([data-passe~="frais"]) .cx-calcul > div:nth-child(1) dt svg, .lab #metier .cx--marge[data-passe~="frais"]:not([data-passe~="vente"]) .cx-calcul > div:nth-child(2) dt svg, .lab #metier .cx--marge[data-passe~="vente"]:not([data-passe~="calcul"]) .cx-calcul > div:nth-child(3) dt svg { color: #1F74E7; box-shadow: 0 0 0 1px rgba(31, 116, 231, 0.3); } .lab #metier .cx-marge-nette { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 16px 18px; border-radius: 14px; background: #EAF6EF; box-shadow: inset 0 0 0 1px rgba(26, 127, 69, 0.14); transition: box-shadow 900ms ease, background-color 900ms ease; } .lab #metier .cx--marge[data-passe~="calcul"]:not([data-passe~="fin"]) .cx-marge-nette { background: #E3F3E9; box-shadow: inset 0 0 0 1px rgba(26, 127, 69, 0.32); } .lab #metier .cx-marge-lib { display: flex; align-items: center; gap: 11px; min-width: 0; color: #17753F; font-size: 15px; line-height: 19px; font-weight: 700; } .lab #metier .cx-marge-lib svg { flex: none; width: 22px; height: 22px; } .lab #metier .cx-marge-lib small { display: block; margin-top: 2px; font-size: 12px; line-height: 15px; font-weight: 500; color: #3C7453; } .lab #metier .cx-marge-valeur { font-size: clamp(30px, 2.45vw, 38px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: #17753F; white-space: nowrap; text-align: right; } /* ── C · Les bonnes actions (navy) v3 — 28/09/2026 : une frise de tâches, la tâche prioritaire au centre ── Tout reste sombre : « Aujourd'hui · 5 actions », une ligne verticale fine, deux tâches « À venir » très calmes et, entre elles, la tâche prioritaire (surface navy plus claire, filet rouge à gauche, échéance 06 oct.). Une impulsion descend la ligne, le compteur passe à 5, la tâche passe au premier plan. */ .lab #metier .cx-scene--alerte { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 12px; } .lab #metier .cx-jour { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; } .lab #metier .cx-jour small { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(197, 211, 238, 0.6); } .lab #metier .cx-jour > span { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: rgba(230, 236, 247, 0.86); } .lab #metier .cx-compte { display: inline-grid; font-size: 22px; line-height: 24px; font-weight: 800; color: #4D94F5; font-variant-numeric: tabular-nums; } .lab #metier .cx-compte > span { grid-area: 1 / 1; transition: opacity 280ms ease, transform 320ms ease; } .lab #metier .cx-compte-avant { opacity: 0; transform: translateY(-4px); } .lab #metier .cx--action:not([data-passe~="compte"]) .cx-compte-avant { opacity: 1; transform: none; } .lab #metier .cx--action:not([data-passe~="compte"]) .cx-compte-apres { opacity: 0; transform: translateY(4px); } /* la frise */ .lab #metier .cx-fil { position: relative; display: grid; row-gap: 8px; margin: 0; padding: 0; list-style: none; } .lab #metier .cx-fil::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 20px; width: 2px; margin-left: -1px; border-radius: 1px; background: linear-gradient(180deg, rgba(77, 148, 245, 0), #7FB2F8 50%, rgba(77, 148, 245, 0)) no-repeat 0 -44px / 100% 44px, rgba(124, 158, 226, 0.22); } .lab[data-motion="prete"] #metier .cx--action[data-passe~="impulsion"]:not([data-passe~="priorite"]) .cx-fil::before { animation: cx-fil-pouls 1500ms cubic-bezier(0.45, 0, 0.2, 1) both; } @keyframes cx-fil-pouls { from { background-position: 0 -44px, 0 0; } to { background-position: 0 52%, 0 0; } } .lab #metier .cx-etape { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: center; } .lab #metier .cx-noeud { position: relative; z-index: 1; justify-self: center; width: 8px; height: 8px; border-radius: 50%; background: #3A4868; box-shadow: 0 0 0 3px var(--impra-navy); transition: background-color 420ms ease, box-shadow 420ms ease, transform 420ms ease; } .lab #metier .cx-etape--active .cx-noeud { width: 14px; height: 14px; background: radial-gradient(circle, #fff 0 2.5px, #1F74E7 3px); box-shadow: 0 0 0 3px var(--impra-navy), 0 0 0 6px rgba(31, 116, 231, 0.22); } .lab #metier .cx--action:not([data-passe~="priorite"]) .cx-etape--active .cx-noeud { background: #3A4868; box-shadow: 0 0 0 3px var(--impra-navy); transform: scale(0.58); } /* tâches secondaires : volontairement calmes */ .lab #metier .cx-tache { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 7px 10px 7px 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px rgba(124, 158, 226, 0.1); } .lab #metier .cx-tache-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: rgba(197, 211, 238, 0.62); } .lab #metier .cx-tache-ico svg { width: 15px; height: 15px; } .lab #metier .cx-tache-txt { display: grid; min-width: 0; } .lab #metier .cx-tache-txt b { font-size: 13px; line-height: 17px; font-weight: 600; color: rgba(230, 236, 247, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lab #metier .cx-tache-txt small { font-size: 11.5px; line-height: 15px; color: rgba(197, 211, 238, 0.46); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lab #metier .cx-tache em { padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: rgba(197, 211, 238, 0.58); font-size: 11px; line-height: 14px; font-style: normal; font-weight: 600; white-space: nowrap; } /* la tâche prioritaire */ .lab #metier .cx-prio { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: start; padding: 12px 14px 13px 14px; border-radius: 14px; background: linear-gradient(180deg, #1A2746 0%, #16223E 100%); box-shadow: inset 0 0 0 1px rgba(124, 158, 226, 0.2), 0 16px 32px -24px rgba(0, 0, 0, 0.8); transition: opacity 560ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1); } .lab #metier .cx-prio::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #E4585B; transition: opacity 420ms ease; } .lab #metier .cx-date { display: grid; place-items: center; align-content: center; height: 52px; border-radius: 10px; background: rgba(228, 88, 91, 0.1); box-shadow: inset 0 0 0 1px rgba(228, 88, 91, 0.28); color: #F07E81; transition: opacity 420ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1); } .lab #metier .cx-date b { font-size: 20px; line-height: 22px; font-weight: 800; letter-spacing: -0.01em; } .lab #metier .cx-date small { font-size: 11px; line-height: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .lab #metier .cx-prio-corps { min-width: 0; } .lab #metier .cx-prio-corps > *, .lab #metier .cx-alerte-bouton { transition: opacity 360ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--d, 0) * 90ms); } .lab #metier .cx-alerte-cat { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 2px 7px; border-radius: 5px; background: rgba(228, 88, 91, 0.14); color: #F28B8D; font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .lab #metier .cx-alerte-cat i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .lab #metier .cx-alerte-titre { margin: 6px 0 0; font-size: 15.5px; line-height: 20px; font-weight: 700; letter-spacing: -0.01em; color: #F4F7FA; } .lab #metier .cx-alerte-vehicule { display: flex; align-items: center; gap: 9px; margin-top: 8px; } .lab #metier .cx-alerte-photo { flex: none; width: 52px; height: 32px; border-radius: 6px; overflow: hidden; background: #EEF0F3; } .lab #metier .cx-alerte-nom { display: grid; min-width: 0; } .lab #metier .cx-alerte-nom b { font-size: 13px; line-height: 16px; font-weight: 600; color: #E6ECF7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lab #metier .cx-alerte-nom small { font-size: 11.5px; line-height: 15px; letter-spacing: 0.04em; color: rgba(197, 211, 238, 0.62); } .lab #metier .cx-alerte-risque { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: 12.5px; line-height: 16px; font-weight: 600; color: #F2B544; } .lab #metier .cx-alerte-risque svg { flex: none; width: 14px; height: 14px; } .lab #metier .cx-alerte-bouton { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 8px; background: #1F74E7; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; } .lab #metier .cx-alerte-bouton svg { width: 13px; height: 13px; } /* états de départ : la tâche est là, en retrait ; elle passe au premier plan, puis son contenu arrive */ .lab #metier .cx--action:not([data-passe~="priorite"]) .cx-prio { opacity: 0.42; transform: translateY(10px) scale(0.99); } .lab #metier .cx--action:not([data-passe~="priorite"]) .cx-prio::before { opacity: 0; } .lab #metier .cx--action:not([data-passe~="priorite"]) .cx-date { opacity: 0; transform: scale(0.94); } .lab #metier .cx--action:not([data-passe~="cta"]) .cx-prio-corps > *, .lab #metier .cx--action:not([data-passe~="cta"]) .cx-alerte-bouton { opacity: 0; transform: translateY(4px); transition-delay: 0ms; } /* — C v3 : paliers — */ @media (min-width: 1100px) and (max-width: 1439px) { /* carte plus basse : les tâches secondaires perdent leur sous-ligne */ .lab #metier .cx-tache-txt small { display: none; } .lab #metier .cx-tache { padding-top: 6px; padding-bottom: 6px; } .lab #metier .cx-tache-ico { width: 26px; height: 26px; } .lab #metier .cx-jour { margin-bottom: 6px; } .lab #metier .cx-prio { padding-top: 11px; padding-bottom: 12px; } } @media (min-width: 1100px) and (max-width: 1279px) { /* carte étroite : une seule tâche secondaire */ .lab #metier .cx-fil > .cx-etape:last-child { display: none; } .lab #metier .cx-fil::before { bottom: 86px; } } @media (min-width: 768px) and (max-width: 1099px) { /* carte pleine largeur : le bouton passe à droite de la tâche */ .lab #metier .cx-prio { grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; padding: 14px 18px 14px 16px; } .lab #metier .cx-date { height: 56px; } .lab #metier .cx-alerte-bouton { grid-column: 3; grid-row: 1; align-self: center; height: 36px; padding: 0 14px; } .lab #metier .cx-fil { max-width: 720px; } } @media (max-width: 767px) { /* téléphone : sous-lignes secondaires masquées, bouton plus large */ .lab.lab--v8 #metier .cx-scene--alerte { margin-top: 14px; } .lab.lab--v8 #metier .cx-tache-txt small { display: none; } .lab.lab--v8 #metier .cx-tache-txt b { font-size: 13.5px; } .lab.lab--v8 #metier .cx-prio { grid-template-columns: 44px minmax(0, 1fr); column-gap: 11px; padding: 12px 12px 13px 14px; } .lab.lab--v8 #metier .cx-alerte-bouton { grid-column: 1 / -1; justify-self: stretch; justify-content: center; height: 40px; font-size: 14px; } .lab.lab--v8 #metier .cx-alerte-titre, .lab.lab--v8 #metier .cx-alerte-nom b { white-space: normal; } .lab.lab--v8 #metier .cx-alerte-photo { width: 44px; height: 28px; } .lab.lab--v8 #metier .cx-alerte-vehicule { gap: 8px; } } @media (max-width: 380px) { .lab.lab--v8 #metier .cx-prio { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; } .lab.lab--v8 #metier .cx-date { height: 48px; } .lab.lab--v8 #metier .cx-date b { font-size: 18px; } .lab.lab--v8 #metier .cx-tache em { padding: 3px 6px; } .lab.lab--v8 #metier .cx-tache-txt b { white-space: normal; } .lab.lab--v8 #metier .cx-alerte-photo { display: none; } /* très petit écran : le nom et la plaque suffisent à identifier le véhicule */ } /* ── E · Vos documents (grande) v2 — 28/09/2026 : dossier → impulsion → facture A4 + certificat ── Deux feuilles au format A4 (210 × 297), dessinées en unités cq : toutes les mesures d'une feuille suivent sa largeur, la page reste la même à toutes les tailles. Facture : gabarit de l'application ; certificat : structure du cerfa 15776*01 rempli par l'application, sans emblème. */ .lab #metier .cx-scene--docs { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; margin-top: 18px; } .lab #metier .cx-docs-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font-size: 12px; line-height: 16px; color: #6F7988; } .lab #metier .cx-docs-legende span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .lab #metier .cx-docs-legende i { flex: none; width: 9px; height: 9px; border-radius: 50%; } .lab #metier .cx-docs-du { background: #4D94F5; } .lab #metier .cx-docs-a { background: #F2B544; } /* le dossier */ .lab #metier .cx-dossier { position: relative; z-index: 2; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.08), 0 14px 30px -22px rgba(15, 23, 46, 0.4); } .lab #metier .cx-dossier-photo { aspect-ratio: 1.6; border-radius: 9px; overflow: hidden; background: #EEF0F3; } .lab #metier .cx-dossier-nom { display: grid; justify-items: start; row-gap: 6px; min-width: 0; } .lab #metier .cx-dossier-nom b { font-size: 14px; line-height: 17px; font-weight: 700; } .lab #metier .cx-dossier-infos { grid-column: 1 / -1; margin: 8px 0 0; } .lab #metier .cx-dossier-infos > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 2px; border-top: 1px solid rgba(15, 23, 46, 0.06); font-size: 12.5px; line-height: 17px; } .lab #metier .cx-dossier-infos dt { display: flex; align-items: center; gap: 8px; color: #6F7988; } .lab #metier .cx-dossier-infos dt svg { width: 15px; height: 15px; color: #7A8496; } .lab #metier .cx-dossier-infos dd { margin: 0; font-weight: 600; white-space: nowrap; } /* l'impulsion : une ligne fine, trois points de données (vertical par défaut, horizontal dès 768) */ .lab #metier .cx-flux { position: relative; justify-self: center; width: 2px; height: 40px; } .lab #metier .cx-flux-trait { position: absolute; inset: 0; border-radius: 1px; background: linear-gradient(180deg, rgba(31, 116, 231, 0.12), rgba(31, 116, 231, 0.5)); } .lab #metier .cx-flux-trait::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-right: 1.5px solid #1F74E7; border-bottom: 1.5px solid #1F74E7; transform: rotate(45deg); } .lab #metier .cx-flux-point { position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #1F74E7; box-shadow: 0 0 0 2.5px rgba(31, 116, 231, 0.15); opacity: 0; } .lab[data-motion="prete"] #metier .cx--docs[data-passe~="impulsion"]:not([data-passe~="cession"]) .cx-flux-point { animation: cx-flux-v 1100ms cubic-bezier(0.45, 0, 0.2, 1) calc(var(--d, 0) * 240ms) both; } @keyframes cx-flux-v { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px); } } /* les feuilles */ .lab #metier .cx-papiers { position: relative; aspect-ratio: 1 / 1.2; } .lab #metier .cx-a4 { position: absolute; container-type: inline-size; aspect-ratio: 210 / 297; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.09), 0 18px 36px -22px rgba(15, 23, 46, 0.5); transition: opacity 620ms ease, transform 720ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 620ms ease; } .lab #metier .cx-a4--facture { z-index: 2; left: 0; top: 9.5%; width: 74%; transform: rotate(-1.6deg); } .lab #metier .cx-a4--cession { z-index: 1; right: 1.5%; top: 0; width: 74%; transform: rotate(1.4deg); } .lab #metier .cx-a4-page { position: absolute; inset: 0; padding: 7cqw 7cqw 6cqw; overflow: hidden; color: #1A1F2B; font-size: 2.05cqw; line-height: 1.38; } .lab #metier .cx-a4-page p { margin: 0; } /* facture — gabarit de l'application */ .lab #metier .fa-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 4cqw; } .lab #metier .fa-emetteur { display: grid; justify-items: start; row-gap: 0.7cqw; font-size: 2.1cqw; color: #3B4250; } .lab #metier .fa-logo { display: block; width: 30cqw; height: auto; margin-bottom: 1.6cqw; } /* logo officiel, fichier du projet, proportions intactes */ .lab #metier .fa-titre { display: grid; justify-items: end; row-gap: 0.6cqw; max-width: 50%; text-align: right; font-size: 2.1cqw; color: #3B4250; } .lab #metier .fa-titre b { font-size: 3cqw; line-height: 1.25; font-weight: 700; color: #0F172E; } .lab #metier .fa-titre span:first-of-type { font-weight: 600; color: #0F172E; } .lab #metier .fa-client { margin-top: 6cqw !important; padding-top: 3.2cqw; border-top: 0.25cqw solid rgba(0, 0, 0, 0.2); font-size: 2.3cqw; } .lab #metier .fa-table { width: 100%; margin-top: 5.5cqw; border-collapse: collapse; font-size: 2.1cqw; } .lab #metier .fa-table th { padding: 1.6cqw 0; border-bottom: 0.3cqw solid #111; font-weight: 600; text-align: right; white-space: nowrap; } .lab #metier .fa-table th:first-child, .lab #metier .fa-table td:first-child { text-align: left; } .lab #metier .fa-table td { padding: 2cqw 1cqw; border-bottom: 0.2cqw solid rgba(0, 0, 0, 0.1); text-align: right; white-space: nowrap; vertical-align: top; } .lab #metier .fa-table td:first-child { width: 44%; padding-left: 1.4cqw; white-space: normal; } .lab #metier .fa-table th + th, .lab #metier .fa-table td + td { padding-left: 2.4cqw; } .lab #metier .fa-total { display: flex; justify-content: space-between; align-items: baseline; width: 50%; margin: 4cqw 0 0 auto !important; padding: 2cqw 1.4cqw; border-top: 0.3cqw solid #111; font-size: 2.6cqw; font-weight: 700; } .lab #metier .fa-total b { font-size: 3.1cqw; } .lab #metier .fa-pied { margin-top: 9cqw; padding-top: 3cqw; border-top: 0.2cqw solid rgba(0, 0, 0, 0.2); font-size: 1.75cqw; line-height: 1.5; color: #3B4250; } .lab #metier .fa-pied p + p { margin-top: 0.8cqw; } .lab #metier .fa-pied b { font-weight: 600; color: #1A1F2B; } /* certificat — structure du cerfa 15776*01, sans emblème */ .lab #metier .ce-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3cqw; align-items: start; } .lab #metier .ce-titre { display: grid; row-gap: 0.6cqw; text-align: center; color: #1E4E9D; } .lab #metier .ce-titre b { font-size: 2.9cqw; line-height: 1.2; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .lab #metier .ce-titre span { font-size: 2.1cqw; font-weight: 700; } .lab #metier .ce-titre small { font-size: 1.9cqw; color: #222; } .lab #metier .ce-num { font-size: 2.3cqw; font-weight: 700; color: #222; white-space: nowrap; } .lab #metier .ce-exemplaire { margin-top: 1.4cqw !important; text-align: right; font-size: 1.75cqw; font-style: italic; color: #444; } .lab #metier .ce-cadre { position: relative; margin-top: 4.2cqw; padding: 3.8cqw 3cqw 2.6cqw; border: 0.3cqw solid #2A4F9C; } .lab #metier .ce-legende { position: absolute; top: -2.2cqw; left: 3cqw; padding: 0 1.4cqw; background: #fff; color: #1E4E9D; font-size: 2.7cqw; line-height: 1.6; font-weight: 700; } .lab #metier .ce-legende small { font-size: 2cqw; font-weight: 600; } .lab #metier .ce-rang { display: grid; column-gap: 3cqw; align-items: end; } .lab #metier .ce-rang--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lab #metier .ce-rang--nom { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .lab #metier .ce-rang--signature { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lab #metier .ce-champ { display: grid; row-gap: 0.6cqw; margin-top: 1.6cqw !important; } .lab #metier .ce-champ small { font-size: 1.55cqw; line-height: 1.3; color: #333; } .lab #metier .ce-champ--ligne { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.6cqw; align-items: end; } .lab #metier .ce-champ--ligne small { font-size: 1.9cqw; } .lab #metier .ce-ligne, .lab #metier .ce-case { display: block; min-height: 3.4cqw; padding: 0 0.8cqw; border-bottom: 0.22cqw solid #555; font-size: 2.2cqw; line-height: 1.5; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; } .lab #metier .ce-case { display: inline-block; min-width: 13cqw; } .lab #metier .ce-cases { display: block; min-height: 3.6cqw; padding: 0 0 0 0.9cqw; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 2.2cqw; line-height: 3.6cqw; letter-spacing: 1.88cqw; font-weight: 600; white-space: nowrap; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0 3cqw, #555 3cqw 3.22cqw) left bottom / 100% 1.2cqw no-repeat, linear-gradient(#555, #555) left bottom / 100% 0.22cqw no-repeat; } .lab #metier .ce-cases--vide { width: 72%; } .lab #metier .ce-coches { display: flex; gap: 5cqw; margin-top: 0.6cqw !important; font-size: 1.95cqw; font-weight: 600; } .lab #metier .ce-coches i { display: inline-block; width: 1.9cqw; height: 1.9cqw; margin-right: 0.9cqw; vertical-align: -0.3cqw; border: 0.22cqw solid #333; } .lab #metier .ce-phrase { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.2cqw; margin-top: 2cqw !important; font-size: 2.05cqw; } .lab #metier .ce-signature { min-height: 6.5cqw; font-size: 1.95cqw; text-align: center; color: #222; } /* bleu : issu du dossier · ambre : à compléter (discrets) */ .lab #metier .cx-a4 .est-du, .lab #metier .cx-a4 .est-du .ce-ligne, .lab #metier .cx-a4 .est-du .ce-cases { color: #173F80; transition: color 420ms ease, background-color 420ms ease; transition-delay: calc(var(--d, 0) * 170ms); } .lab #metier .fa-emetteur .est-du, .lab #metier .fa-total.est-du, .lab #metier .fa-table tr.est-du td, .lab #metier .cx-a4 .est-du .ce-ligne, .lab #metier .cx-a4 .ce-case.est-du { background-color: rgba(77, 148, 245, 0.12); border-radius: 0.6cqw; } .lab #metier .cx-a4 .est-du .ce-cases { background-color: rgba(77, 148, 245, 0.12); } .lab #metier .fa-table tr.est-du td { border-radius: 0; } .lab #metier .cx-a4 .est-a, .lab #metier .cx-a4 .est-a .ce-ligne { color: #8A5B0C; font-weight: 500; } .lab #metier .fa-client .est-a, .lab #metier .cx-a4 .est-a .ce-ligne, .lab #metier .cx-a4 .ce-case.est-a { padding: 0 1.2cqw; border-radius: 0.6cqw; background: #FEF4E0; box-shadow: inset 0 0 0 0.25cqw rgba(224, 162, 58, 0.6); } .lab #metier .cx-a4 .est-a .ce-ligne, .lab #metier .cx-a4 .ce-case.est-a { border-bottom-color: #E0A23A; } .lab #metier .cx-docs-pret { position: absolute; right: 2%; bottom: -4px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 5px; border-radius: 999px; background: #E9F6EE; color: #17753F; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px rgba(26, 127, 69, 0.2), 0 8px 18px -12px rgba(26, 127, 69, 0.5); transition: opacity 380ms ease, transform 460ms cubic-bezier(0.22, 1, 0.36, 1); } /* états de départ : feuilles en retrait, champs connus encore vides */ .lab #metier .cx--docs:not([data-passe~="facture"]) .cx-a4--facture { opacity: 0.78; transform: rotate(-1.6deg) scale(0.985); box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.07), 0 10px 22px -18px rgba(15, 23, 46, 0.35); } .lab #metier .cx--docs:not([data-passe~="cession"]) .cx-a4--cession { opacity: 0.4; transform: translate(-8px, 6px) rotate(0.4deg); } .lab #metier .cx--docs:not([data-passe~="facture"]) .cx-a4--facture .est-du, .lab #metier .cx--docs:not([data-passe~="facture"]) .cx-a4--facture .est-du *, .lab #metier .cx--docs:not([data-passe~="cession"]) .cx-a4--cession .est-du, .lab #metier .cx--docs:not([data-passe~="cession"]) .cx-a4--cession .est-du * { color: transparent !important; transition-delay: 0ms; } .lab #metier .cx--docs:not([data-passe~="facture"]) .cx-a4--facture .est-du, .lab #metier .cx--docs:not([data-passe~="facture"]) .cx-a4--facture tr.est-du td { background-color: #EEF1F5; } .lab #metier .cx--docs:not([data-passe~="cession"]) .cx-a4--cession .est-du .ce-ligne, .lab #metier .cx--docs:not([data-passe~="cession"]) .cx-a4--cession .est-du .ce-cases, .lab #metier .cx--docs:not([data-passe~="cession"]) .cx-a4--cession .ce-case.est-du { background-color: #EEF1F5; } .lab #metier .cx-a4--cession .est-du, .lab #metier .cx-a4--cession .est-du .ce-ligne, .lab #metier .cx-a4--cession .est-du .ce-cases { transition-delay: calc(420ms + (var(--d, 3) - 3) * 160ms); } .lab #metier .cx--docs:not([data-passe~="pret"]) .cx-docs-pret { opacity: 0; transform: translateY(4px); } /* — C et E dès 768 : l'impulsion devient horizontale — */ @media (min-width: 768px) { .lab #metier .cx-flux { justify-self: stretch; align-self: center; width: auto; height: 2px; margin: 0 12px 0 8px; } .lab #metier .cx-flux-trait { background: linear-gradient(90deg, rgba(31, 116, 231, 0.12), rgba(31, 116, 231, 0.5)); } .lab #metier .cx-flux-trait::after { left: auto; right: -1px; top: 50%; bottom: auto; margin: -3.5px 0 0; transform: rotate(-45deg); } .lab #metier .cx-flux-point { left: 0; top: 50%; margin: -3px 0 0 -3px; } .lab[data-motion="prete"] #metier .cx--docs[data-passe~="impulsion"]:not([data-passe~="cession"]) .cx-flux-point { animation-name: cx-flux-h; } @keyframes cx-flux-h { 0% { opacity: 0; left: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; left: 100%; } } /* les deux feuilles, mesurées sur la hauteur disponible : centrées, 18 px de recouvrement (davantage si la place manque) */ .lab #metier .cx-papiers { container-type: size; --w1: calc(94cqh * 0.7071); --w2: calc(92cqh * 0.7071); --g: max(0px, calc((100cqw - var(--w1) - var(--w2) + 18px) / 2)); } .lab #metier .cx-a4--facture { left: var(--g); top: 2.5cqh; width: auto; height: 94cqh; } .lab #metier .cx-a4--cession { right: auto; left: min(calc(var(--g) + var(--w1) - 18px), calc(100cqw - var(--w2))); top: 4.5cqh; width: auto; height: 92cqh; } .lab #metier .cx-docs-pret { right: 2%; bottom: 1%; } } /* — E au bureau ≥ 1100 : en-tête et dossier à gauche, impulsion, feuilles sur toute la hauteur à droite — */ @media (min-width: 1100px) { .lab #metier .cx--docs { display: grid; grid-template-columns: minmax(0, 222px) minmax(0, 64px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; } .lab #metier .cx--docs .cx-tete { grid-column: 1 / 3; grid-row: 1; padding-right: 18px; } .lab #metier .cx-scene--docs { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; row-gap: 0; margin: 0; } .lab #metier .cx-dossier { grid-column: 1; grid-row: 2; align-self: center; grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; margin-top: 12px; } .lab #metier .cx-dossier-nom b { font-size: 13.5px; } .lab #metier .cx-docs-legende { font-size: 11.5px; } .lab #metier .cx-flux { grid-column: 2; grid-row: 2; margin-top: 12px; } .lab #metier .cx-papiers { grid-column: 3; grid-row: 1 / -1; aspect-ratio: auto; height: 100%; } .lab #metier .cx-docs-legende { grid-column: 1 / 3; grid-row: 3; align-self: end; padding-top: 10px; } } @media (min-width: 1100px) and (max-width: 1439px) { .lab #metier .cx--docs { grid-template-columns: minmax(0, 200px) minmax(0, 48px) minmax(0, 1fr); } .lab #metier .cx-dossier { grid-template-columns: 80px minmax(0, 1fr); padding: 8px; } .lab #metier .cx-dossier-nom b { font-size: 13px; } .lab #metier .cx-dossier-infos > div { padding: 4px 2px; font-size: 12px; } } /* — tablette 768–1099 : alertes en deux colonnes, documents en trois — */ @media (min-width: 768px) and (max-width: 1099px) { .lab #metier .cx-scene--docs { grid-template-columns: minmax(0, 170px) minmax(0, 36px) minmax(0, 1fr); align-items: center; } .lab #metier .cx-dossier { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } .lab #metier .cx-papiers { aspect-ratio: auto; height: 360px; } .lab #metier .cx-docs-legende { grid-column: 1 / -1; } } /* — téléphone ≤ 767 : l'alerte presque pleine largeur ; dossier, impulsion vers le bas, facture devant, certificat derrière — */ @media (max-width: 767px) { .lab.lab--v8 #metier .cx-dossier-infos > div { font-size: 13px; } } @media (max-width: 380px) { .lab.lab--v8 #metier .cx-a4--facture, .lab.lab--v8 #metier .cx-a4--cession { width: 78%; } .lab.lab--v8 #metier .cx-papiers { aspect-ratio: 1 / 1.27; } } /* — reprise de boucle : la scène s'efface, revient à l'état de départ, puis rejoue — */ .lab #metier .cx[data-sortie] .cx-scene { opacity: 0; } .lab #metier .cx[data-reinit] *, .lab #metier .cx[data-reinit] *::before, .lab #metier .cx[data-reinit] *::after { transition: none !important; animation: none !important; } /* — mouvement réduit : rien ne bouge, l'état final est peint — */ @media (prefers-reduced-motion: reduce) { .lab #metier .cx *, .lab #metier .cx *::before, .lab #metier .cx *::after, .lab #metier .cx-scene { animation: none !important; transition: none !important; } } /* — bureau ≥ 1100 : la grille — */ @media (min-width: 1100px) { .lab #metier .cockpit-v10 { --cx-rang: clamp(168px, calc((100cqw - 48px) / 3 * 0.479), 210px); grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(var(--cx-rang), auto)); gap: 24px; } .lab #metier .cx--saisie { grid-column: 1 / 9; grid-row: 1; } .lab #metier .cx--marge { grid-column: 1 / 9; grid-row: 2 / 5; } .lab #metier .cx--plaque { grid-column: 9 / 17; grid-row: 1 / 3; } .lab #metier .cx--action { grid-column: 17 / 25; grid-row: 1 / 3; } .lab #metier .cx--docs { grid-column: 9 / 25; grid-row: 3 / 5; } } @media (min-width: 1440px) { .lab #metier .cx-marge-photo { height: 200px; } } @media (min-width: 1100px) and (max-width: 1439px) { .lab #metier .cx-scene--saisie { margin-top: 10px; } .lab #metier .cx-ramif { height: 78px; } .lab #metier .cx-usages { grid-auto-rows: 26px; } .lab #metier .cx-mini-photo { width: 62px; height: 40px; } .lab #metier .cx-resultat-actions { display: none; } .lab #metier .cx-tete h3 { font-size: 20px; line-height: 26px; } .lab #metier .cx-tete p { font-size: 14px; line-height: 20px; } } @media (min-width: 1100px) and (max-width: 1279px) { .lab #metier .cx { padding: 20px; } .lab #metier .cx-mini-photo { width: 56px; height: 36px; } .lab #metier .cx-mini { gap: 8px; padding-right: 9px; } .lab #metier .cx-usages li { font-size: 12.5px; gap: 7px; } .lab #metier .cx-plaque { height: 44px; } .lab #metier .cx-plaque-num { min-width: 160px; padding: 0 12px; font-size: 20px; } .lab #metier .cx-plaque-btn { width: 44px; height: 44px; } .lab #metier .cx-marge-photo { height: 120px; } } /* — tablette 768–1099 : deux colonnes (saisie en haut, marge | plaque, alertes et documents en pleine largeur) — */ @media (min-width: 768px) and (max-width: 1099px) { .lab #metier .cockpit-v10 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .lab #metier .cx { padding: 22px; } .lab #metier .cx--saisie { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 20px; align-items: center; } .lab #metier .cx--saisie .cx-scene--saisie { margin-top: 0; } .lab #metier .cx--marge { grid-column: 1; grid-row: 2; } .lab #metier .cx--plaque { grid-column: 2; grid-row: 2; } .lab #metier .cx--action { grid-column: 1 / -1; grid-row: 3; } .lab #metier .cx--docs { grid-column: 1 / -1; grid-row: 4; } .lab #metier .cx-resultat { justify-content: flex-start; } .lab #metier .cx-resultat-corps { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } .lab #metier .cx-scene--saisie { grid-template-columns: auto minmax(24px, 80px) auto; justify-content: end; } .lab #metier .cx-mini { flex: none; } .lab #metier .cx-resultat-photo { justify-self: center; width: min(100%, 280px); height: auto; aspect-ratio: 1.6; } } /* — téléphone ≤ 767 : une colonne ; chaque démonstration garde son intention — */ @media (max-width: 767px) { .lab.lab--v8 #metier .cockpit-v10 { gap: 12px; } .lab.lab--v8 #metier .cx { padding: 20px 18px; border-radius: 18px; } .lab.lab--v8 #metier .cx-tete h3 { font-size: 20px; line-height: 26px; } .lab.lab--v8 #metier .cx-tete p { font-size: 14px; line-height: 20px; } /* A : le flux devient vertical — fiche, embranchement, trois usages en ligne */ .lab.lab--v8 #metier .cx-scene--saisie { grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: 16px; } .lab.lab--v8 #metier .cx-ramif--h { display: none; } .lab.lab--v8 #metier .cx-ramif--v { display: block; height: 34px; } .lab.lab--v8 #metier .cx-usages { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; width: 100%; } .lab.lab--v8 #metier .cx-usages li { flex-direction: column; gap: 6px; font-size: 12.5px; } .lab.lab--v8 #metier .cx-usages i { width: 32px; height: 32px; border-radius: 10px; } .lab.lab--v8 #metier .cx-usages svg { width: 17px; height: 17px; } /* B : plaque, puis le résultat ; la photo reste visible */ .lab.lab--v8 #metier .cx-plaque { height: 44px; } .lab.lab--v8 #metier .cx-plaque-num { min-width: 160px; padding: 0 12px; font-size: 20px; } .lab.lab--v8 #metier .cx-plaque-btn { width: 44px; height: 44px; } .lab.lab--v8 #metier .cx-resultat-corps { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); column-gap: 12px; } .lab.lab--v8 #metier .cx-fiche > div { padding: 5px 0; font-size: 12.5px; } /* D : photo, achat, frais, vente, puis la marge nette */ .lab.lab--v8 #metier .cx-marge-photo { flex: none; height: 150px; } .lab.lab--v8 #metier .cx-calcul > div { font-size: 14px; } .lab.lab--v8 #metier .cx-marge-nette { padding: 14px 14px; } .lab.lab--v8 #metier .cx-marge-lib { font-size: 14px; gap: 9px; } .lab.lab--v8 #metier .cx-marge-lib small { font-size: 11.5px; } .lab.lab--v8 #metier .cx-marge-valeur { font-size: 28px; } } /* ══ MISE EN ROUTE (#outils) — « Passez sur IMPRA sans repartir de zéro. » ══════════ 28/09/2026 — deux messages : la reprise du parc et le comptable. Fond navy, cartes navy à peine plus claires (même famille, liseré fin, aucune grande ombre), interfaces claires à l'intérieur : c'est ce contraste qui donne la profondeur. Deux colonnes dès 1100 px, même hauteur ; en dessous, les cartes s'empilent (reprise, puis comptable). Séquences : moteur des cinq cartes (data-passe) ; l'état final est dans le HTML. ═══ */ .lab #outils { position: relative; overflow: hidden; background: var(--impra-navy); } /* même navy que la sécurité qui suit : raccord invisible */ .lab #outils { --pad-bas: clamp(44px, 4vw, 60px); } /* raccord avec la sécurité (28/09/2026) : moins de vide sous les cartes */ /* La lueur du bas était centrée à 96 % de la hauteur : la section la coupait net, d'où une ligne visible à gauche au raccord avec la sécurité (même navy). Elle est remontée et s'éteint avant le bord (72 % + 70 % × 30 %). */ .lab #outils .od-fond { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 38% at 90% 6%, rgba(77, 148, 245, 0.14) 0%, rgba(77, 148, 245, 0) 70%), radial-gradient(40% 30% at 6% 72%, rgba(31, 116, 231, 0.10) 0%, rgba(31, 116, 231, 0) 70%); } .lab #outils > .conteneur { position: relative; } .lab #outils .tete-section h2 { max-width: none; } .lab #outils .tete-section .intro-section { margin-top: 12px; max-width: none; color: rgba(244, 247, 250, 0.76); } .lab #outils .tete-section + .mr-grille { margin-top: clamp(28px, 2.6vw, 40px); } /* — les deux cartes — */ .lab #outils .mr-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .lab #outils .mr { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px; border-radius: 22px; color: #F4F7FA; background: linear-gradient(180deg, #16223E 0%, #131E37 100%); box-shadow: inset 0 0 0 1px rgba(124, 158, 226, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 48px -40px rgba(0, 0, 0, 0.7); } .lab #outils .mr-tete { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: center; } .lab #outils .mr-pastille { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #1B2948; color: #6FA8F7; box-shadow: inset 0 0 0 1px rgba(124, 158, 226, 0.2); } .lab #outils .mr-pastille svg { width: 26px; height: 26px; } .lab #outils .mr-tete h3 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.016em; text-wrap: balance; } .lab #outils .mr-tete p { margin-top: 4px; font-size: 15.5px; line-height: 22px; color: rgba(197, 211, 238, 0.78); } .lab #outils .mr-scene { position: relative; flex: 1; display: grid; align-content: center; margin-top: 26px; transition: opacity 420ms ease; } /* — pièces communes des interfaces claires — */ .lab #outils .mr-panneau, .lab #outils .mr-dossier, .lab #outils .mr-acces { background: #fff; color: #0F172E; border-radius: 16px; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.06), 0 22px 44px -26px rgba(0, 0, 0, 0.75); } .lab #outils .mr-coche { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1F9D55; transition: background-color 320ms ease, box-shadow 320ms ease; } .lab #outils .mr-coche::after { content: ""; width: 7px; height: 4px; margin-top: -1.5px; border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg); transition: opacity 240ms ease; } .lab #outils .mr-attention { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #E39A22; } .lab #outils .mr-attention::after { content: "!"; color: #fff; font-size: 12px; line-height: 1; font-weight: 800; font-style: normal; } .lab #outils .mr-etat { justify-self: end; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; background: #E8F6EE; color: #17753F; font-size: 12px; font-weight: 600; white-space: nowrap; transition: opacity 320ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1); } .lab #outils .mr-lignes { margin: 0; padding: 0; list-style: none; } .lab #outils .mr-lignes li { display: grid; align-items: center; column-gap: 12px; padding: 9px 0; border-top: 1px solid rgba(15, 23, 46, 0.07); font-size: 14.5px; line-height: 19px; transition: opacity 360ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .lab #outils .mr-lignes li:first-child { border-top: 0; } .lab #outils .mr-lignes li > span { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── 1 · Reprise : sources → flux → le panneau IMPRA ─────────────────────────── */ .lab #outils .mr-scene--reprise { grid-template-columns: minmax(0, 176px) minmax(36px, 1fr) minmax(0, 384px); align-items: stretch; } .lab #outils .mr-sources { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .lab #outils .mr-sources li { position: relative; align-self: center; display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 16px 0 12px; border-radius: 14px; background: #1A2745; box-shadow: inset 0 0 0 1px rgba(124, 158, 226, 0.16); font-size: 14.5px; line-height: 18px; } .lab #outils .mr-sources b { font-weight: 600; color: #F4F7FA; white-space: nowrap; } .lab #outils .mr-src { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #EDF3FC; color: #1F74E7; } .lab #outils .mr-src svg { width: 21px; height: 21px; } .lab #outils .mr-port { position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #4D94F5; box-shadow: 0 0 0 3px rgba(77, 148, 245, 0.22); } .lab #outils .mr-flux-zone { position: relative; } .lab #outils .mr-flux { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; } .lab #outils .mr-flux--v { display: none; } .lab #outils .mr-flux-trait { fill: none; stroke: rgba(77, 148, 245, 0.5); stroke-width: 1.4; stroke-dasharray: 3 4; } .lab #outils .mr-flux-pouls { fill: none; stroke: #8DBBF8; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 16 100; stroke-dashoffset: 16; opacity: 0; } .lab #outils .mr-flux-fleche { position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-top: 1.8px solid #4D94F5; border-right: 1.8px solid #4D94F5; transform: rotate(45deg); } .lab[data-motion="prete"] #outils .mr--reprise[data-passe~="flux"] .mr-flux-pouls { animation: mr-pouls 1100ms cubic-bezier(0.45, 0, 0.2, 1) calc(var(--d, 0) * 320ms) both; } .lab[data-motion="prete"] #outils .mr--reprise[data-passe~="flux"] .mr-port { animation: mr-port 900ms ease-out calc(var(--d, 0) * 320ms) both; } @keyframes mr-pouls { 0% { stroke-dashoffset: 16; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } } @keyframes mr-port { 0% { box-shadow: 0 0 0 3px rgba(77, 148, 245, 0.22), 0 0 0 3px rgba(77, 148, 245, 0.5); } 100% { box-shadow: 0 0 0 3px rgba(77, 148, 245, 0.22), 0 0 0 10px rgba(77, 148, 245, 0); } } .lab #outils .mr-sources li .mr-port { transition-delay: calc(var(--d, 0) * 320ms); } /* le panneau */ .lab #outils .mr-panneau { align-self: center; padding: 18px 20px 18px; } .lab #outils .mr-logo { display: block; width: 84px; height: auto; } .lab #outils .mr-panneau-titre { margin: 14px 0 6px; font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; } .lab #outils .mr-lignes:not(.mr-lignes--dossier) li { grid-template-columns: 18px 18px minmax(0, 1fr) auto; } .lab #outils .mr-lignes li > svg { width: 18px; height: 18px; color: #4B5A75; } .lab #outils .mr-progression { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin-top: 10px; } .lab #outils .mr-barre { height: 6px; border-radius: 3px; background: #E6ECF5; overflow: hidden; } .lab #outils .mr-barre i { display: block; width: 100%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1F74E7, #4D94F5); transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1); } .lab #outils .mr-pct { min-width: 3.4em; text-align: right; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .lab #outils .mr-pret { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 11px 14px; border-radius: 11px; background: #E9F6EE; color: #17753F; font-size: 14.5px; line-height: 19px; font-weight: 700; transition: opacity 380ms ease, transform 460ms cubic-bezier(0.22, 1, 0.36, 1); } /* états de départ (le HTML porte l'état final) */ .lab #outils .mr--reprise:not([data-passe~="vehicules"]) [data-l="vehicules"], .lab #outils .mr--reprise:not([data-passe~="contacts"]) [data-l="contacts"], .lab #outils .mr--reprise:not([data-passe~="police"]) [data-l="police"], .lab #outils .mr--reprise:not([data-passe~="historique"]) [data-l="historique"] { color: #8A94A6; } .lab #outils .mr--reprise:not([data-passe~="vehicules"]) [data-l="vehicules"] .mr-coche, .lab #outils .mr--reprise:not([data-passe~="contacts"]) [data-l="contacts"] .mr-coche, .lab #outils .mr--reprise:not([data-passe~="police"]) [data-l="police"] .mr-coche, .lab #outils .mr--reprise:not([data-passe~="historique"]) [data-l="historique"] .mr-coche { background: transparent; box-shadow: inset 0 0 0 1.6px #CDD5E1; } .lab #outils .mr--reprise:not([data-passe~="vehicules"]) [data-l="vehicules"] .mr-coche::after, .lab #outils .mr--reprise:not([data-passe~="contacts"]) [data-l="contacts"] .mr-coche::after, .lab #outils .mr--reprise:not([data-passe~="police"]) [data-l="police"] .mr-coche::after, .lab #outils .mr--reprise:not([data-passe~="historique"]) [data-l="historique"] .mr-coche::after { opacity: 0; } .lab #outils .mr--reprise:not([data-passe~="vehicules"]) [data-l="vehicules"] .mr-etat, .lab #outils .mr--reprise:not([data-passe~="contacts"]) [data-l="contacts"] .mr-etat, .lab #outils .mr--reprise:not([data-passe~="police"]) [data-l="police"] .mr-etat, .lab #outils .mr--reprise:not([data-passe~="historique"]) [data-l="historique"] .mr-etat { opacity: 0; transform: translateX(-6px); } .lab #outils .mr--reprise:not([data-passe~="complet"]) .mr-barre i { width: 82%; } .lab #outils .mr--reprise:not([data-passe~="historique"]) .mr-barre i { width: 64%; } .lab #outils .mr--reprise:not([data-passe~="police"]) .mr-barre i { width: 46%; } .lab #outils .mr--reprise:not([data-passe~="contacts"]) .mr-barre i { width: 24%; } .lab #outils .mr--reprise:not([data-passe~="vehicules"]) .mr-barre i { width: 4%; } .lab #outils .mr--reprise:not([data-passe~="pret"]) .mr-pret { opacity: 0; transform: translateY(6px); } /* ── 2 · Comptable : le dossier du mois, puis l'accès ─────────────────────────── */ .lab #outils .mr-scene--comptable { grid-template-columns: minmax(0, 1fr); } .lab #outils .mr-dossier { grid-area: 1 / 1; position: relative; z-index: 1; width: 69%; padding: 16px 18px 10px; } .lab #outils .mr-dossier-tete { display: grid; grid-template-columns: 30px minmax(0, 1fr) 14px; align-items: center; column-gap: 12px; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid rgba(15, 23, 46, 0.07); font-size: 15px; line-height: 20px; } .lab #outils .mr-dossier-tete b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lab #outils .mr-chevron { width: 14px; height: 14px; color: #6F7988; } .lab #outils .mr-doc { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #EEF3FB; color: #1F74E7; font-style: normal; } .lab #outils .mr-doc svg { width: 17px; height: 17px; } .lab #outils .mr-lignes--dossier li { grid-template-columns: 18px 30px minmax(0, 1fr) auto auto; padding: 8px 0; } .lab #outils .mr-lignes--dossier small { font-size: 12.5px; color: #6F7988; white-space: nowrap; } .lab #outils .mr-lignes--dossier .mr-ambre > span { color: #0F172E; } .lab #outils .mr-lignes--dossier .mr-ambre small { color: #B06A0B; font-weight: 600; } .lab #outils .mr-lignes--dossier .mr-ambre .mr-doc { background: #FEF3E2; color: #C57A0E; } .lab #outils .mr-lignes--dossier .mr-ambre .mr-etat { background: #FEF3E2; color: #9A5B06; } .lab #outils .mr-acces { grid-area: 1 / 1; justify-self: end; align-self: start; position: relative; z-index: 2; width: 200px; margin-top: 76px; padding: 14px 16px 14px; transition: opacity 460ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1); } .lab #outils .mr-acces-tete { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14.5px; line-height: 18px; } .lab #outils .mr-acces-tete b { font-weight: 700; white-space: nowrap; } .lab #outils .mr-avatar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #EAF1FD; color: #1F74E7; } .lab #outils .mr-avatar svg { width: 17px; height: 17px; } .lab #outils .mr-acces ul { margin: 0; padding: 0; list-style: none; } .lab #outils .mr-acces li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; line-height: 18px; color: #26304A; white-space: nowrap; } /* le lien pointillé : de l'en-tête du dossier jusqu'au-dessus de l'accès, puis vers le bas */ .lab #outils .mr-lien-acces { position: absolute; left: 69%; right: 100px; top: 32px; height: 44px; border-top: 1.5px dashed rgba(77, 148, 245, 0.65); border-right: 1.5px dashed rgba(77, 148, 245, 0.65); border-top-right-radius: 12px; } .lab #outils .mr-lien-acces::after { content: ""; position: absolute; right: -4.75px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: #4D94F5; box-shadow: 0 0 0 3px rgba(77, 148, 245, 0.22); } /* états de départ */ .lab #outils .mr--comptable:not([data-passe~="ouvert"]) .mr-lignes--dossier li { opacity: 0; transform: translateY(4px); } .lab #outils .mr-lignes--dossier li:nth-child(2) { transition-delay: 70ms; } .lab #outils .mr-lignes--dossier li:nth-child(3) { transition-delay: 140ms; } .lab #outils .mr-lignes--dossier li:nth-child(4) { transition-delay: 210ms; } .lab #outils .mr--comptable:not([data-passe~="ventes"]) [data-l="ventes"] .mr-coche, .lab #outils .mr--comptable:not([data-passe~="achats"]) [data-l="achats"] .mr-coche, .lab #outils .mr--comptable:not([data-passe~="police"]) [data-l="police"] .mr-coche, .lab #outils .mr--comptable:not([data-passe~="export"]) [data-l="export"] .mr-coche { background: transparent; box-shadow: inset 0 0 0 1.6px #CDD5E1; } .lab #outils .mr--comptable:not([data-passe~="ventes"]) [data-l="ventes"] .mr-coche::after, .lab #outils .mr--comptable:not([data-passe~="achats"]) [data-l="achats"] .mr-coche::after, .lab #outils .mr--comptable:not([data-passe~="police"]) [data-l="police"] .mr-coche::after, .lab #outils .mr--comptable:not([data-passe~="export"]) [data-l="export"] .mr-coche::after { opacity: 0; } .lab #outils .mr--comptable:not([data-passe~="ventes"]) [data-l="ventes"] .mr-etat, .lab #outils .mr--comptable:not([data-passe~="achats"]) [data-l="achats"] .mr-etat, .lab #outils .mr--comptable:not([data-passe~="police"]) [data-l="police"] .mr-etat, .lab #outils .mr--comptable:not([data-passe~="export"]) [data-l="export"] .mr-etat { opacity: 0; transform: translateX(-6px); } .lab #outils .mr--comptable:not([data-passe~="pieces"]) [data-l="pieces"] { opacity: 0; transform: translateY(4px); } .lab #outils .mr--comptable:not([data-passe~="acces"]) .mr-acces { opacity: 0; transform: translate(14px, 0) scale(0.98); } .lab #outils .mr--comptable:not([data-passe~="acces"]) .mr-lien-acces { opacity: 0; } .lab #outils .mr-lien-acces { transition: opacity 420ms ease 200ms; } /* — reprise de boucle et mouvement réduit — */ .lab #outils .mr[data-sortie] .mr-scene { opacity: 0; } .lab #outils .mr[data-reinit] *, .lab #outils .mr[data-reinit] *::before, .lab #outils .mr[data-reinit] *::after { transition: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { .lab #outils .mr *, .lab #outils .mr *::before, .lab #outils .mr *::after, .lab #outils .mr-scene { animation: none !important; transition: none !important; } } /* — bureau ≥ 1100 : deux cartes côte à côte, même hauteur — */ @media (min-width: 1100px) { .lab #outils .mr-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } @media (min-width: 1100px) and (max-width: 1439px) { .lab #outils .mr { padding: 24px; } .lab #outils .mr-tete { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; } .lab #outils .mr-pastille { width: 48px; height: 48px; border-radius: 14px; } .lab #outils .mr-tete h3 { font-size: 21px; line-height: 27px; } .lab #outils .mr-tete p { font-size: 14.5px; line-height: 20px; } .lab #outils .mr-scene--reprise { grid-template-columns: minmax(0, 150px) minmax(28px, 1fr) minmax(0, 330px); } .lab #outils .mr-sources li { gap: 10px; height: 60px; padding: 0 12px 0 10px; font-size: 13.5px; } .lab #outils .mr-src { width: 34px; height: 34px; } .lab #outils .mr-lignes li { font-size: 13.5px; } .lab #outils .mr-dossier, .lab #outils .mr-lien-acces { width: auto; } .lab #outils .mr-dossier { width: 72%; } .lab #outils .mr-lien-acces { left: 72%; } .lab #outils .mr-acces { width: 190px; padding: 13px 14px; } .lab #outils .mr-acces-tete { font-size: 14px; gap: 8px; } .lab #outils .mr-acces li { font-size: 13.5px; } .lab #outils .mr-lien-acces { right: 95px; } .lab #outils .mr-lignes--dossier small { display: none; } .lab #outils .mr-lignes--dossier li { grid-template-columns: 18px 30px minmax(0, 1fr) auto; } } /* — tablette 768–1099 : cartes empilées en pleine largeur, scène bornée et centrée — */ @media (min-width: 768px) and (max-width: 1099px) { .lab #outils .mr-scene { align-self: center; width: 100%; max-width: 700px; } } /* — téléphone ≤ 767 : empilé, chaque carte réagencée — */ @media (max-width: 767px) { .lab.lab--v8 #outils .mr { padding: 22px 18px 20px; border-radius: 20px; } .lab.lab--v8 #outils .mr-tete { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; } .lab.lab--v8 #outils .mr-pastille { width: 44px; height: 44px; border-radius: 13px; } .lab.lab--v8 #outils .mr-pastille svg { width: 22px; height: 22px; } .lab.lab--v8 #outils .mr-tete h3 { font-size: 20px; line-height: 26px; } .lab.lab--v8 #outils .mr-tete p { font-size: 14.5px; line-height: 20px; } .lab.lab--v8 #outils .mr-scene { margin-top: 20px; } /* 1 : les trois sources en ligne, le flux descend vers le panneau */ .lab.lab--v8 #outils .mr-scene--reprise { grid-template-columns: minmax(0, 1fr); } .lab.lab--v8 #outils .mr-sources { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; } .lab.lab--v8 #outils .mr-sources li { align-self: stretch; flex-direction: column; justify-content: center; gap: 7px; height: auto; padding: 12px 4px 14px; text-align: center; font-size: 12.5px; line-height: 15px; } .lab.lab--v8 #outils .mr-sources b { white-space: normal; } .lab.lab--v8 #outils .mr-src { width: 34px; height: 34px; } .lab.lab--v8 #outils .mr-port { right: auto; left: 50%; top: auto; bottom: -4px; margin: 0 0 0 -4px; } .lab.lab--v8 #outils .mr-flux-zone { height: 44px; } .lab.lab--v8 #outils .mr-flux--h { display: none; } .lab.lab--v8 #outils .mr-flux--v { display: block; } .lab.lab--v8 #outils .mr-flux-fleche { right: auto; left: 50%; top: auto; bottom: 2px; margin: 0 0 0 -4.5px; transform: rotate(135deg); } .lab.lab--v8 #outils .mr-panneau { padding: 16px 16px 16px; } /* 2 : le dossier en pleine largeur, l'accès dessous, à cheval sur son bas */ .lab.lab--v8 #outils .mr-dossier { width: 100%; padding: 14px 14px 8px; } .lab.lab--v8 #outils .mr-lignes--dossier li { grid-template-columns: 18px 28px minmax(0, 1fr) auto; column-gap: 10px; font-size: 14px; } .lab.lab--v8 #outils .mr-lignes--dossier small { display: none; } .lab.lab--v8 #outils .mr-lignes--dossier .mr-ambre small { display: inline; } .lab.lab--v8 #outils .mr-lignes--dossier .mr-ambre .mr-etat { display: none; } .lab.lab--v8 #outils .mr-dossier-tete { align-items: start; } .lab.lab--v8 #outils .mr-dossier-tete b { white-space: normal; padding-top: 5px; } .lab.lab--v8 #outils .mr-chevron { margin-top: 8px; } .lab.lab--v8 #outils .mr-doc { width: 28px; height: 28px; } .lab.lab--v8 #outils .mr-acces { grid-area: 2 / 1; justify-self: end; width: 78%; min-width: 0; margin-top: -10px; } .lab.lab--v8 #outils .mr-lien-acces { display: none; } .lab.lab--v8 #outils .mr--comptable:not([data-passe~="acces"]) .mr-acces { transform: translate(0, 10px) scale(0.98); } } /* — très petits téléphones ≤ 380 : les icônes de ligne s'effacent (la coche reste), rien n'est coupé — */ @media (max-width: 380px) { .lab.lab--v8 #outils .mr { padding: 20px 14px 18px; } .lab.lab--v8 #outils .mr-panneau, .lab.lab--v8 #outils .mr-dossier { padding-left: 13px; padding-right: 13px; } .lab.lab--v8 #outils .mr-lignes:not(.mr-lignes--dossier) li { grid-template-columns: 18px minmax(0, 1fr) auto; } .lab.lab--v8 #outils .mr-lignes:not(.mr-lignes--dossier) li > svg { display: none; } .lab.lab--v8 #outils .mr-lignes--dossier li { grid-template-columns: 18px minmax(0, 1fr) auto; } .lab.lab--v8 #outils .mr-lignes--dossier li > .mr-doc { display: none; } .lab.lab--v8 #outils .mr-lignes li > span { white-space: normal; overflow: visible; } .lab.lab--v8 #outils .mr-etat { padding: 0 7px; font-size: 11.5px; } .lab.lab--v8 #outils .mr-sources b { font-size: 12px; } } /* ══ PARCOURS v5 (#parcours) — « Un véhicule. Un dossier. De l'achat à la vente. » ══ 28/09/2026 : refonte « dark premium » d'après la maquette fournie par l'opérateur (image de référence) et son brief. Section bleu nuit ; trois cartes sombres un cran plus claires que le fond (filet fin, lumière intérieure) ; surfaces claires réservées à la carte véhicule (vraie photo du Kuga), aux badges d'état, aux indicateurs et à l'écran du téléphone. Même Ford Kuga ZZ-486-GP du jeu de démo d'un bout à l'autre. */ .lab #parcours { --pv-carte: #142040; --pv-carte-bas: #101A33; --pv-filet: rgba(148, 178, 230, 0.15); --pv-doux: rgba(208, 219, 238, 0.74); --pv-bleu: #7FB0F6; --pv-vif: #3B82F6; --pv-surface: rgba(255, 255, 255, 0.03); --pv-surface-filet: rgba(148, 178, 230, 0.13); --pv-vert-clair: #E9F7EF; --pad-haut: clamp(56px, 5vw, 72px); position: relative; overflow: hidden; background: var(--impra-navy); } /* Une seule lueur, centrée derrière les cartes et éteinte bien avant le haut : aucun bord visible au raccord avec « Repères » */ .lab #parcours .pv4-fond { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 44% at 50% 66%, rgba(38, 98, 196, 0.22) 0%, rgba(38, 98, 196, 0.07) 52%, rgba(38, 98, 196, 0) 78%); } .lab #parcours > .conteneur { position: relative; } .lab #parcours .tete-section > div { max-width: none; } .lab #parcours .tete-section h2 { max-width: none; font-size: clamp(40px, 3.1vw, 60px); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; } .lab #parcours .tete-section .intro-section { margin-top: 14px; font-size: clamp(17px, 1.05vw, 20px); line-height: 1.4; color: var(--pv-doux); } /* ── Frise : 01 · 02 · 03 centrés sur leur carte, l'étape sous le numéro ; trait plein, point, puis pointillé ── */ .lab #parcours .pv4-timeline { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .lab #parcours .pv4-timeline li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; } .lab #parcours .pv4-ligne--avant { grid-column: 1; grid-row: 1; margin-left: -12px; } .lab #parcours .pv4-num { grid-column: 2; grid-row: 1; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0E1830; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1.5px var(--pv-vif), 0 0 0 5px rgba(59, 130, 246, 0.1), 0 0 22px rgba(59, 130, 246, 0.35); } .lab #parcours .pv4-ligne--apres { grid-column: 3; grid-row: 1; margin-right: -12px; } .lab #parcours .pv4-texte { grid-column: 1 / -1; grid-row: 2; display: grid; row-gap: 2px; justify-items: center; margin-top: 12px; text-align: center; } .lab #parcours .pv4-texte b { font-size: 16px; line-height: 20px; font-weight: 600; color: #F4F7FA; } .lab #parcours .pv4-texte small { font-size: 13px; line-height: 17px; color: rgba(203, 214, 235, 0.7); } .lab #parcours .pv4-ligne { position: relative; display: block; height: 0; transform-origin: 0 50%; } .lab #parcours .pv4-ligne--apres { border-top: 1.5px solid rgba(59, 130, 246, 0.85); } .lab #parcours .pv4-ligne--apres::after { content: ""; position: absolute; right: -3px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--pv-vif); box-shadow: 0 0 10px rgba(59, 130, 246, 0.8); } .lab #parcours .pv4-ligne--avant { border-top: 1.5px dashed rgba(111, 167, 245, 0.42); transform-origin: 100% 50%; } .lab #parcours .pv4-timeline li:first-child .pv4-ligne--avant, .lab #parcours .pv4-timeline li:last-child .pv4-ligne--apres { visibility: hidden; } /* ── Les trois cartes : sombres, même hauteur (la rangée s'aligne sur la plus haute) ── */ .lab #parcours .pv4-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 30px; } .lab #parcours .pv4 { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 540px; padding: 28px 30px 16px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, var(--pv-carte) 0%, var(--pv-carte-bas) 100%); color: #F4F7FA; box-shadow: inset 0 0 0 1px var(--pv-filet), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -36px rgba(2, 6, 18, 0.9); } .lab #parcours .pv4::before { content: ""; position: absolute; inset: 0 0 auto; height: 180px; pointer-events: none; background: radial-gradient(80% 100% at 20% 0%, rgba(111, 167, 245, 0.07), rgba(111, 167, 245, 0) 70%); } /* En-tête : l'icône à gauche, l'étape, le titre et la phrase dans une colonne à sa droite */ .lab #parcours .pv4-tete { position: relative; z-index: 3; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: start; } .lab #parcours .pv4-tete > :not(.pv4-icone) { grid-column: 2; } .lab #parcours .pv4-icone { grid-row: 1 / span 3; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: rgba(77, 148, 245, 0.08); color: var(--pv-bleu); box-shadow: inset 0 0 0 1px rgba(111, 167, 245, 0.26); } .lab #parcours .pv4-icone svg { width: 24px; height: 24px; } .lab #parcours .pv4-etape { margin-top: 2px; font-size: 12px; line-height: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #5B9BF4; } .lab #parcours .pv4 h3 { margin-top: 4px; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.022em; color: #fff; } .lab #parcours .pv4-tete > p:not(.pv4-etape) { margin-top: 8px; min-height: 46px; max-width: 34ch; font-size: 15px; line-height: 23px; color: var(--pv-doux); } .lab #parcours .pv4-scene { position: relative; flex: 1; min-height: 0; margin: 18px -14px 0; } /* Carte véhicule : la seule grande surface claire, vraie photo du Kuga sur fond studio */ .lab #parcours .pv4-vehicule { position: relative; z-index: 2; display: grid; grid-template-columns: 136px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 10px; align-content: center; align-items: center; padding: 14px 14px 14px 14px; border-radius: 16px; background: #fff; color: #0F172E; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 40px -24px rgba(2, 6, 18, 0.95); } .lab #parcours .pv4-photo { grid-row: 1 / 3; display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: #EEF0F3; } .lab #parcours .pv4-photo picture, .lab #parcours .pv4-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; } .lab #parcours .pv4-vehicule-nom { display: grid; row-gap: 3px; align-self: end; } .lab #parcours .pv4-vehicule-nom b { font-size: 18px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; } .lab #parcours .pv4-vehicule-nom small { font-size: 13px; line-height: 16px; color: #5E687A; } .lab #parcours .pv4-chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: start; } .lab #parcours .pv4-chips { flex-wrap: nowrap; } .lab #parcours .pv4-chips i { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 999px; background: #EEF1F6; font-style: normal; font-size: 11.5px; font-weight: 500; color: #26304A; white-space: nowrap; } /* Bloc de données : surface sombre à peine relevée, une icône par ligne, chiffres clairs et alignés */ .lab #parcours .pv4-bloc { position: relative; z-index: 1; padding: 2px 18px; border-radius: 14px; background: var(--pv-surface); box-shadow: inset 0 0 0 1px var(--pv-surface-filet); } .lab #parcours .pv4-bloc dl { margin: 0; } .lab #parcours .pv4-bloc dl > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(148, 178, 230, 0.1); font-size: 14px; line-height: 18px; } .lab #parcours .pv4-bloc dl > div:first-child { border-top: 0; } .lab #parcours .pv4-bloc dt { display: flex; align-items: center; gap: 12px; color: rgba(208, 219, 238, 0.74); white-space: nowrap; } .lab #parcours .pv4-dt-ico { flex: none; width: 19px; height: 19px; color: rgba(160, 186, 230, 0.9); } .lab #parcours .pv4-bloc dd { margin: 0; font-size: 15px; font-weight: 600; color: #fff; text-align: right; min-width: 0; } .lab #parcours .pv4-moins { color: rgba(222, 230, 244, 0.86); font-weight: 500; } /* Badges d'état : vert très clair, coche verte, posés à cheval sur l'angle de la carte véhicule */ .lab #parcours .pv4-flottant { position: absolute; z-index: 4; display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px 11px 12px; border-radius: 13px; background: var(--pv-vert-clair); color: #0F172E; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 18px 34px -18px rgba(2, 6, 18, 0.95); transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms ease; } .lab #parcours .pv4-flottant b { display: block; font-size: 13px; line-height: 16px; font-weight: 700; white-space: nowrap; } .lab #parcours .pv4-flottant small { display: block; margin-top: 2px; font-size: 11px; line-height: 14px; color: #4F5B6E; white-space: nowrap; } .lab #parcours .pv4-check { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: #1F9D55; box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.16); } .lab #parcours .pv4-check::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .lab #parcours .pv4-scene--achat .pv4-vehicule, .lab #parcours .pv4-scene--vente .pv4-vehicule { margin-top: 42px; padding-top: 18px; } .lab #parcours .pv4-scene--achat .pv4-flottant--dossier, .lab #parcours .pv4-scene--vente .pv4-flottant--vendu { right: -8px; top: 0; } .lab #parcours .pv4-scene--achat .pv4-bloc--achat { margin-top: 18px; } .lab #parcours .pv4-bloc--achat dl > div { padding: 19px 0; } /* Étape 2 : lueur bleue, téléphone centré posé bas, deux indicateurs reliés à lui par un arc pointillé */ .lab #parcours .pv4-scene--preparation { margin-top: 10px; container-type: inline-size; } .lab #parcours .pv4-halo { position: absolute; left: 50%; top: 0; width: 92cqw; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(59, 130, 246, 0.24), rgba(59, 130, 246, 0)); transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1); } .lab #parcours .pv4-tel { position: absolute; z-index: 2; left: 20cqw; top: 0; width: 60cqw; padding: 2.3cqw; border-radius: 11cqw; background: #07090F; box-shadow: 0 0 0 1.5px #2E3649, 0 0 0 2.5px rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 70px -30px rgba(0, 0, 0, 0.9), 0 0 50px -12px rgba(59, 130, 246, 0.35); transform-origin: 50% 30%; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } /* L'écran : conteneur de mesure, tout y est proportionnel à sa largeur (cqw) */ .lab #parcours .pv4-ecran { position: relative; overflow: hidden; border-radius: 8.8cqw; background: #F5F7FB; aspect-ratio: 393 / 852; container-type: inline-size; } .lab #parcours .pe { color: #0F172E; font-family: inherit; } .lab #parcours .pe::before { content: ""; position: absolute; left: 50%; top: 3.4cqw; width: 30cqw; height: 8.8cqw; border-radius: 99px; background: #07090F; transform: translateX(-50%); z-index: 2; } .lab #parcours .pe-statut { display: flex; align-items: center; justify-content: space-between; height: 15cqw; padding: 0 7cqw 0 10cqw; } .lab #parcours .pe-statut b { font-size: 4.6cqw; line-height: 1; font-weight: 600; letter-spacing: -0.01em; } .lab #parcours .pe-icones { display: inline-flex; align-items: center; gap: 1.6cqw; } .lab #parcours .pe-icones svg { display: block; height: 3.8cqw; width: auto; fill: currentColor; } .lab #parcours .pe-tete { display: grid; grid-template-columns: 9cqw minmax(0, 1fr) 9cqw; align-items: center; padding: 1cqw 4cqw 0; } .lab #parcours .pe-tete svg { width: 5.6cqw; height: 5.6cqw; color: #26304A; } .lab #parcours .pe-tete b { text-align: center; font-size: 5.4cqw; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; } .lab #parcours .pe-vehicule { display: grid; grid-template-columns: 30cqw minmax(0, 1fr); column-gap: 3.2cqw; align-items: center; margin: 3.6cqw 4cqw 0; padding: 2.6cqw; border-radius: 3.6cqw; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.06), 0 2px 6px -3px rgba(15, 23, 46, 0.18); } .lab #parcours .pe-photo { display: block; aspect-ratio: 3 / 2; border-radius: 2.2cqw; overflow: hidden; background: #EEF0F3; } .lab #parcours .pe-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; } .lab #parcours .pe-vehicule-nom { display: grid; min-width: 0; } .lab #parcours .pe-vehicule-nom b { font-size: 4.5cqw; line-height: 1.2; font-weight: 700; } .lab #parcours .pe-vehicule-nom small { font-size: 3.2cqw; line-height: 1.3; color: #6B7588; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lab #parcours .pe-puces { display: flex; gap: 1.2cqw; margin-top: 1.8cqw; } .lab #parcours .pe-puces i { font-style: normal; font-size: 2.9cqw; line-height: 1; font-weight: 500; padding: 1cqw 2cqw; border-radius: 99px; background: #EEF1F6; color: #26304A; white-space: nowrap; } .lab #parcours .pe-onglets { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 3.6cqw 4cqw 0; border-bottom: 1px solid #E2E7EF; } .lab #parcours .pe-onglet { position: relative; padding: 2.6cqw 0 2.8cqw; text-align: center; font-size: 4cqw; line-height: 1; font-weight: 500; color: #7A8496; } .lab #parcours .pe-onglet--actif { font-weight: 700; color: #0F172E; } .lab #parcours .pe-onglet--actif::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 0.8cqw; border-radius: 99px; background: #1D6BD5; } .lab #parcours .pe-frais { list-style: none; margin: 2.8cqw 4cqw 0; padding: 0.6cqw 3.2cqw; border-radius: 3.6cqw; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.05); } .lab #parcours .pe-frais li { display: grid; grid-template-columns: 9.4cqw minmax(0, 1fr) auto 5cqw; column-gap: 2.8cqw; align-items: center; padding: 3cqw 0; border-top: 1px solid #EEF1F6; } .lab #parcours .pe-frais li:first-child { border-top: 0; } .lab #parcours .pe-ico { display: grid; place-items: center; width: 9.4cqw; height: 9.4cqw; border-radius: 50%; background: #EAF1FD; color: #1D6BD5; } .lab #parcours .pe-ico svg { width: 5.2cqw; height: 5.2cqw; } .lab #parcours .pe-frais span { display: grid; min-width: 0; } .lab #parcours .pe-frais b { font-size: 3.8cqw; line-height: 1.25; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lab #parcours .pe-frais small { font-size: 2.9cqw; line-height: 1.3; color: #7A8496; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lab #parcours .pe-frais em { font-style: normal; font-size: 3.8cqw; font-weight: 700; white-space: nowrap; } .lab #parcours .pe-suppr { display: grid; place-items: center; color: #E5484D; } .lab #parcours .pe-suppr svg { width: 4.4cqw; height: 4.4cqw; } .lab #parcours .pe-ajouter { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; margin: 3.6cqw 4cqw 0; padding: 3cqw 0; border-radius: 3.2cqw; background: #fff; box-shadow: inset 0 0 0 1px #DCE4F0; font-size: 3.9cqw; line-height: 1; font-weight: 600; color: #1D6BD5; } .lab #parcours .pe-ajouter svg { width: 4.2cqw; height: 4.2cqw; } /* Indicateurs : juste à côté du téléphone (2,5 % d'écart), arc pointillé qui part du téléphone et les entoure */ .lab #parcours .pv4-ind { z-index: 3; flex-direction: column; justify-content: center; align-items: center; gap: 7px; width: 20cqw; min-height: 112px; padding: 12px 6px 11px; text-align: center; background: #F7F9FD; } .lab #parcours .pv4-ind > span { display: grid; row-gap: 3px; justify-items: center; } .lab #parcours .pv4-ind b { font-size: 15px; line-height: 18px; letter-spacing: -0.01em; } .lab #parcours .pv4-ind small { max-width: none; margin-top: 0; font-size: 11px; line-height: 14px; white-space: normal; } .lab #parcours .pv4-ind--marge { background: #E7F6EE; } .lab #parcours .pv4-ind--marge b { font-size: 19px; line-height: 23px; color: #1A7F45; } .lab #parcours .pv4-ind-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #E3ECFC; color: #1D6BD5; flex: none; } .lab #parcours .pv4-ind-ico svg { width: 17px; height: 17px; } .lab #parcours .pv4-ind-ico--vert { background: #D1EFDD; color: #1F9D55; } .lab #parcours .pv4-ind::before { display: none; } .lab #parcours .pv4-ind--frais { left: -2.5cqw; right: auto; top: 21cqw; } .lab #parcours .pv4-ind--marge { right: -2.5cqw; left: auto; top: 29cqw; } .lab #parcours .pv4-ind--marge small { font-size: 10px; white-space: nowrap; letter-spacing: -0.01em; } .lab #parcours .pv4-arc { position: absolute; z-index: 1; width: 36cqw; height: 206px; border: 1.5px dashed rgba(148, 178, 230, 0.4); border-radius: 50%; pointer-events: none; } .lab #parcours .pv4-arc--gauche { left: -6cqw; top: calc(21cqw - 47px); } .lab #parcours .pv4-arc--droite { right: -6cqw; top: calc(29cqw - 47px); } /* Étape 3 : même carte véhicule, puis la vente, la marge, deux preuves */ .lab #parcours .pv4-bloc--renta { margin-top: 16px; padding: 2px 10px 10px 18px; } .lab #parcours .pv4-bloc--renta dl { padding-right: 8px; } .lab #parcours .pv4-bloc--renta dl > div { padding: 10px 0; } .lab #parcours .pv4-nette { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 2px 0 0 -8px; padding: 12px 14px; border-radius: 11px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.08) 100%); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.28); } .lab #parcours .pv4-nette-lib { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 18px; font-weight: 600; color: #6EE7A0; } .lab #parcours .pv4-nette-ico { flex: none; width: 21px; height: 21px; color: #4ADE80; } .lab #parcours .pv4-nette small { display: block; margin-top: 1px; font-size: 10.5px; line-height: 13px; font-weight: 500; color: rgba(167, 243, 198, 0.6); } .lab #parcours .pv4-nette b { font-size: 26px; line-height: 1; font-weight: 700; letter-spacing: -0.015em; color: #5EE39A; white-space: nowrap; } .lab #parcours .pv4-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 11px; } .lab #parcours .pv4-duo > div { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 11px; border-radius: 13px; background: var(--pv-surface); box-shadow: inset 0 0 0 1px var(--pv-surface-filet); } .lab #parcours .pv4-duo-ico { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(77, 148, 245, 0.1); color: var(--pv-bleu); box-shadow: inset 0 0 0 1px rgba(111, 167, 245, 0.24); } .lab #parcours .pv4-duo-ico svg { width: 18px; height: 18px; } .lab #parcours .pv4-duo span { min-width: 0; } .lab #parcours .pv4-duo b { display: block; font-size: 13.5px; line-height: 17px; font-weight: 700; color: #fff; white-space: nowrap; } .lab #parcours .pv4-duo small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 14px; color: rgba(203, 214, 235, 0.7); } /* ── Mouvement : apparition en séquence (tête, fil, puis les trois cartes) ── */ .lab #parcours [data-reveal] { transition: none; } .lab[data-motion="prete"] #parcours .tete-section:not([data-reveal="visible"]), .lab[data-motion="prete"] #parcours .pv4-timeline:not([data-reveal="visible"]) { opacity: 0; transform: translateY(14px); } .lab[data-motion="prete"] #parcours .tete-section[data-reveal="visible"] { animation: pv4-entree 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } .lab[data-motion="prete"] #parcours .pv4-timeline[data-reveal="visible"] { animation: pv4-entree 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms backwards; } .lab[data-motion="prete"] #parcours .pv4-timeline:not([data-reveal="visible"]) .pv4-ligne { transform: scaleX(0); } .lab[data-motion="prete"] #parcours .pv4-timeline[data-reveal="visible"] .pv4-ligne { animation: pv4-trace 260ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } .lab[data-motion="prete"] #parcours .pv4-timeline[data-reveal="visible"] li:nth-child(1) .pv4-ligne--apres { animation-delay: 360ms; } .lab[data-motion="prete"] #parcours .pv4-timeline[data-reveal="visible"] li:nth-child(2) .pv4-ligne--avant { animation-delay: 600ms; } .lab[data-motion="prete"] #parcours .pv4-timeline[data-reveal="visible"] li:nth-child(2) .pv4-ligne--apres { animation-delay: 840ms; } .lab[data-motion="prete"] #parcours .pv4-timeline[data-reveal="visible"] li:nth-child(3) .pv4-ligne--avant { animation-delay: 1080ms; } .lab[data-motion="prete"] #parcours .pv4:not([data-reveal="visible"]) { opacity: 0; transform: translateY(20px) scale(0.99); } .lab[data-motion="prete"] #parcours .pv4[data-reveal="visible"] { animation: pv4-entree 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(160ms + var(--i, 0) * 110ms) backwards; } @keyframes pv4-entree { from { opacity: 0; transform: translateY(20px) scale(0.99); } to { opacity: 1; transform: none; } } @keyframes pv4-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Frise : jeu de lumière (28/09/2026, demande de l'opérateur). Une fois le fil tracé, une traînée claire parcourt le fil de 01 vers 03 et chaque bulle s'illumine à son passage. Cycle de 8 s : rejoué à la souris, joué une seule fois sur écran tactile (règle « rien ne bouge en boucle » du 25/09), rien en mouvement réduit. */ .lab #parcours .pv4-ligne::before { content: ""; position: absolute; left: 0; right: 0; top: -2.5px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, rgba(147, 197, 253, 0) 0%, #DBEAFE 50%, rgba(147, 197, 253, 0) 100%) no-repeat; background-size: 72px 100%; background-position: -72px 0; opacity: 0; filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.95)); pointer-events: none; } @keyframes pv4-bulle { 0%, 16%, 100% { transform: none; box-shadow: inset 0 0 0 1.5px var(--pv-vif), 0 0 0 5px rgba(59, 130, 246, 0.1), 0 0 22px rgba(59, 130, 246, 0.35); } 5% { transform: scale(1.08); box-shadow: inset 0 0 0 1.5px #BFDBFE, 0 0 0 8px rgba(96, 165, 250, 0.2), 0 0 40px rgba(96, 165, 250, 0.85); } } @keyframes pv4-comete { 0% { opacity: 0; background-position: -72px 0; } 1.5% { opacity: 1; } 9% { opacity: 1; background-position: calc(100% + 72px) 0; } 10%, 100% { opacity: 0; background-position: calc(100% + 72px) 0; } } .lab[data-motion="prete"] #parcours .pv4-timeline[data-reveal="visible"] .pv4-num { animation: pv4-bulle 8s cubic-bezier(0.4, 0, 0.2, 1) var(--pv-d, 1.6s) 1 both; } .lab[data-motion="prete"] #parcours .pv4-timeline[data-reveal="visible"] .pv4-ligne::before { animation: pv4-comete 8s cubic-bezier(0.45, 0, 0.35, 1) var(--pv-d, 1.85s) 1 both; } .lab #parcours .pv4-timeline li:nth-child(1) .pv4-num { --pv-d: 1.6s; } .lab #parcours .pv4-timeline li:nth-child(1) .pv4-ligne--apres { --pv-d: 1.85s; } .lab #parcours .pv4-timeline li:nth-child(2) .pv4-ligne--avant { --pv-d: 2.57s; } .lab #parcours .pv4-timeline li:nth-child(2) .pv4-num { --pv-d: 3.29s; } .lab #parcours .pv4-timeline li:nth-child(2) .pv4-ligne--apres { --pv-d: 3.5s; } .lab #parcours .pv4-timeline li:nth-child(3) .pv4-ligne--avant { --pv-d: 4.22s; } .lab #parcours .pv4-timeline li:nth-child(3) .pv4-num { --pv-d: 4.94s; } @media (hover: hover) and (pointer: fine) { .lab[data-motion="prete"] #parcours .pv4-timeline[data-reveal="visible"] .pv4-num, .lab[data-motion="prete"] #parcours .pv4-timeline[data-reveal="visible"] .pv4-ligne::before { animation-iteration-count: infinite; } } /* Survol (souris) : la carte se soulève à peine et son filet s'éclaire ; le téléphone monte vers le lecteur */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .lab #parcours .pv4 { transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 360ms ease; } .lab #parcours .pv4:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(148, 178, 230, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 36px 70px -38px rgba(2, 6, 18, 0.95); } .lab #parcours .pv4--preparation:hover .pv4-tel { transform: translateY(-8px); } .lab #parcours .pv4--preparation:hover .pv4-halo { opacity: 1; transform: translateX(-50%) scale(1.06); } .lab #parcours .pv4--achat:hover .pv4-flottant--dossier, .lab #parcours .pv4--vente:hover .pv4-flottant--vendu { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .lab #parcours .pv4, .lab #parcours .tete-section, .lab #parcours .pv4-timeline, .lab #parcours .pv4-ligne, .lab #parcours .pv4-tel, .lab #parcours .pv4-halo, .lab #parcours .pv4-flottant { animation: none !important; transition: none !important; opacity: 1; transform: none; } .lab #parcours .pv4-halo { transform: translateX(-50%); } .lab #parcours .pv4-num, .lab #parcours .pv4-ligne::before { animation: none !important; } } /* ── Grand écran (≥ 1600) : les cotes de la maquette, cartes d'environ 500 px ── */ @media (min-width: 1600px) { .lab #parcours .pv4-scene { margin-top: 12px; } .lab #parcours .pv4-vehicule { grid-template-columns: 150px minmax(0, 1fr); padding: 14px 16px 14px 14px; } .lab #parcours .pv4-scene--achat .pv4-vehicule, .lab #parcours .pv4-scene--vente .pv4-vehicule { margin-top: 26px; padding-top: 14px; } .lab #parcours .pv4-flottant small { max-width: 124px; white-space: normal; } .lab #parcours .pv4-chips i { height: 28px; padding: 0 12px; font-size: 12.5px; } .lab #parcours .pv4-vehicule-nom small { font-size: 14px; line-height: 18px; } .lab #parcours .pv4-tete > p:not(.pv4-etape) { font-size: 16px; line-height: 24px; } } /* ── Trois colonnes serrées (1180–1439) ─────────────────────────────────── */ @media (min-width: 1180px) and (max-width: 1439px) { .lab #parcours .pv4 { padding: 24px 22px 16px; } .lab #parcours .pv4-scene { margin-left: -10px; margin-right: -10px; } .lab #parcours .pv4-scene--achat .pv4-flottant--dossier, .lab #parcours .pv4-scene--vente .pv4-flottant--vendu { right: -2px; } .lab #parcours .pv4-tel { width: 56cqw; left: 22cqw; } .lab #parcours .pv4-ind { width: 19.5cqw; } .lab #parcours .pv4-ind--frais { left: 0; } .lab #parcours .pv4-ind--marge { right: 0; } .lab #parcours .pv4-arc--gauche { left: -4cqw; } .lab #parcours .pv4-arc--droite { right: -4cqw; } .lab #parcours .pv4-tete { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; } .lab #parcours .pv4-icone { width: 48px; height: 48px; border-radius: 12px; } .lab #parcours .pv4 h3 { font-size: 24px; line-height: 30px; } .lab #parcours .pv4-tete > p:not(.pv4-etape) { font-size: 14px; line-height: 21px; min-height: 42px; } .lab #parcours .pv4-vehicule { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 11px 10px; } .lab #parcours .pv4-vehicule-nom b { font-size: 16px; line-height: 20px; } .lab #parcours .pv4-vehicule-nom small { font-size: 12px; } .lab #parcours .pv4-chips { gap: 4px; } .lab #parcours .pv4-chips i { height: 23px; padding: 0 7px; font-size: 10.5px; } .lab #parcours .pv4-bloc { padding: 2px 14px; } .lab #parcours .pv4-bloc dl > div { padding: 12px 0; font-size: 13px; } .lab #parcours .pv4-bloc dd { font-size: 14px; } .lab #parcours .pv4-dt-ico { width: 17px; height: 17px; } .lab #parcours .pv4-bloc dt { gap: 9px; } .lab #parcours .pv4-ind { padding: 10px 5px 9px; } .lab #parcours .pv4-ind b { font-size: 13.5px; } .lab #parcours .pv4-ind small { font-size: 10.5px; line-height: 13px; } .lab #parcours .pv4-ind--marge b { font-size: 17px; } .lab #parcours .pv4-bloc--achat dl > div { padding: 21px 0; } .lab #parcours .pv4-bloc--renta { padding: 2px 8px 8px 14px; } .lab #parcours .pv4-nette { padding: 11px 12px; } .lab #parcours .pv4-nette-lib { font-size: 14px; gap: 9px; } .lab #parcours .pv4-nette b { font-size: 22px; } .lab #parcours .pv4-duo { gap: 8px; } .lab #parcours .pv4-duo > div { padding: 10px 9px; gap: 9px; } .lab #parcours .pv4-duo-ico { width: 32px; height: 32px; } .lab #parcours .pv4-duo b { font-size: 12.5px; } .lab #parcours .pv4-duo small { font-size: 10.5px; } } /* 1180–1279 : cartes les plus étroites, téléphone et indicateurs resserrés pour rester dans la carte */ @media (min-width: 1180px) and (max-width: 1279px) { .lab #parcours .pv4-ind small { font-size: 10px; line-height: 12px; } } /* ── Tablette : une colonne large, la frise reste horizontale ── */ @media (min-width: 768px) and (max-width: 1179px) { .lab #parcours .pv4-grille { grid-template-columns: 1fr; gap: 20px; } .lab #parcours .pv4 { max-width: 620px; width: 100%; min-height: 0; margin: 0 auto; } .lab #parcours .pv4--preparation { min-height: 560px; } .lab #parcours .pv4-timeline { max-width: 620px; margin-left: auto; margin-right: auto; gap: 8px; } } /* ── Téléphone : pile verticale, compositions réagencées ─────────────────── */ @media (max-width: 767px) { .lab.lab--v8 #parcours .tete-section .tete-lien { margin-top: 0; } .lab.lab--v8 #parcours .tete-section h2 { font-size: clamp(28px, 7.8vw, 34px); } .lab.lab--v8 #parcours .pv4-phrase { display: block; } /* trois phrases, trois lignes : « Un véhicule. » « Un dossier. » « De l'achat à la vente. » */ .lab.lab--v8 #parcours .pv4-grille { grid-template-columns: 1fr; gap: 16px; margin-top: 10px; } .lab.lab--v8 #parcours .pv4 { min-height: 0; padding: 20px 18px 18px; border-radius: 18px; } .lab.lab--v8 #parcours .pv4 h3 { font-size: 24px; line-height: 30px; } .lab.lab--v8 #parcours .pv4-tete > p:not(.pv4-etape) { min-height: 0; font-size: 15px; line-height: 22px; } .lab.lab--v8 #parcours .pv4-scene { flex: none; margin: 16px 0 0; } /* Carte véhicule : photo un peu plus petite, badge posé sous elle, à droite */ .lab.lab--v8 #parcours .pv4-vehicule { grid-template-columns: 104px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 10px 10px 10px 10px; } .lab.lab--v8 #parcours .pv4-vehicule-nom b { font-size: 17px; } .lab.lab--v8 #parcours .pv4-chips { gap: 4px; flex-wrap: wrap; } .lab.lab--v8 #parcours .pv4-chips i { height: 23px; padding: 0 7px; font-size: 11px; } .lab.lab--v8 #parcours .pv4-scene--achat .pv4-vehicule, .lab.lab--v8 #parcours .pv4-scene--vente .pv4-vehicule { margin-top: 42px; padding-top: 16px; } /* le badge se pose à cheval sur l'angle, comme au bureau, sans toucher le nom */ .lab.lab--v8 #parcours .pv4-flottant { padding: 10px 13px 10px 11px; } .lab.lab--v8 #parcours .pv4-flottant small { max-width: none; white-space: nowrap; } .lab.lab--v8 #parcours .pv4-scene--achat .pv4-flottant--dossier, .lab.lab--v8 #parcours .pv4-scene--vente .pv4-flottant--vendu { right: -6px; top: 0; } .lab.lab--v8 #parcours .pv4-scene--achat .pv4-bloc--achat, .lab.lab--v8 #parcours .pv4-bloc--renta { margin-top: 12px; } .lab.lab--v8 #parcours .pv4-bloc--achat dl > div { padding: 14px 0; } .lab.lab--v8 #parcours .pv4-bloc { padding: 2px 14px; } .lab.lab--v8 #parcours .pv4-bloc--renta { padding: 2px 8px 8px 14px; } .lab.lab--v8 #parcours .pv4-bloc dd { white-space: normal; } /* Préparation : téléphone centré, fondu par le bas, indicateurs en rangée dessous */ .lab.lab--v8 #parcours .pv4-scene--preparation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 322px auto; column-gap: 8px; row-gap: 12px; margin-top: 16px; } .lab.lab--v8 #parcours .pv4-scene--preparation > .pv4-tel { position: relative; left: auto; top: 0; grid-column: 1 / -1; grid-row: 1; width: 74cqw; margin: 0 auto; height: 322px; overflow: hidden; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; } .lab.lab--v8 #parcours .pv4-arc { display: none; } .lab.lab--v8 #parcours .pv4-scene--preparation .pv4-halo { grid-column: 1 / -1; top: 10px; } .lab.lab--v8 #parcours .pv4-ind { position: static; grid-row: 2; width: auto; min-height: 0; padding: 12px 10px 11px; } .lab.lab--v8 #parcours .pv4-ind::before { display: none; } .lab.lab--v8 #parcours .pv4-ind b { font-size: 15px; line-height: 18px; } .lab.lab--v8 #parcours .pv4-ind--marge b { font-size: 18px; line-height: 22px; } .lab.lab--v8 #parcours .pv4-ind small { font-size: 12px; line-height: 15px; } /* Vente : duo en colonne */ .lab.lab--v8 #parcours .pv4-duo { grid-template-columns: 1fr; } .lab.lab--v8 #parcours .pv4-nette b { font-size: 24px; } } /* ══ HERO · clin d'œil vers « Explorer IMPRA » (21/09/2026) ═════════════════ Une seule flèche courbe, fine et un peu manuscrite, bleu IMPRA, posée en bas à gauche du bouton, pointe sur son coin. Tracée une fois à l'arrivée, après les boutons ; rien en mouvement réduit ; absente sur téléphone. */ .lab.lab--v8 .hero .ha-actions { position: relative; } .lab.lab--v8 .hero .ha-clin { position: absolute; left: -16px; top: 44px; width: 90px; height: 60px; overflow: visible; color: #1F74E7; pointer-events: none; } .lab.lab--v8 .hero .ha-clin path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .lab.lab--v8[data-motion="prete"] .hero .ha-clin-courbe { stroke-dasharray: 130; stroke-dashoffset: 130; animation: ha-clin-trace 850ms cubic-bezier(0.4, 0, 0.4, 1) 1.15s forwards; } .lab.lab--v8[data-motion="prete"] .hero .ha-clin-pointe { stroke-dasharray: 26; stroke-dashoffset: 26; animation: ha-clin-trace 320ms ease-out 1.9s forwards; } @keyframes ha-clin-trace { to { stroke-dashoffset: 0; } } @keyframes ha-pastille-lisere { to { transform: translate(-50%, -50%) rotate(360deg); } } @media (max-width: 1179px) { .lab.lab--v8 .hero .ha-clin { left: -6px; top: 42px; width: 80px; height: 54px; } } @media (max-width: 767px) { .lab.lab--v8 .hero .ha-clin { display: none; } } @media (prefers-reduced-motion: reduce) { .lab.lab--v8 .hero .ha-clin path { animation: none !important; stroke-dashoffset: 0 !important; } .lab.lab--v8 .hero .ha-pastille-in::before { animation: none !important; } /* liseré statique : reflet à droite, près de la flèche */ } /* ══ WEB ET MOBILE v3 (#terrain) — deux usages, badges, cadrage stable ═══════ 21/09/2026. Colonne gauche : titre, sous-titre, « Sur le parc », « Au bureau », badges App Store / Google Play (visibles, inertes tant que les fiches n'existent pas), mention, CTA. À droite : un cadre à ratio fixe par palier (4:3 sur deux colonnes, 16:10 en tablette, 4:5 sur téléphone), photos en couverture avec un point focal par image et par palier — le cadrage ne dépend plus de la hauteur de l'écran. */ .lab #terrain .usages { align-items: center; } .lab #terrain .usages-liste { margin-top: 32px; } .lab #terrain .usage { padding: 18px 0 18px 20px; gap: 4px; } .lab #terrain .usage-titre { font-size: 20px; line-height: 28px; } .lab #terrain .usage-texte { font-size: 16px; line-height: 24px; } .lab #terrain .usages-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; } /* Badges : encre noire nette, ombre portée sur l'encre (le PNG Google garde sa marge de protection : la boîte fait 40 px, l'image 52 px, l'encre tombe pile dedans), survol qui soulève, pression qui enfonce, focus clavier visible. */ .lab #terrain .usages-stores .store-badge { position: relative; display: inline-flex; align-items: center; height: 40px; border-radius: 7px; overflow: hidden; background: #0B0B0C; opacity: 1; cursor: pointer; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.22), 0 1px 2px rgba(15, 23, 46, 0.2), 0 8px 18px -10px rgba(15, 23, 46, 0.45); transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms ease; -webkit-tap-highlight-color: transparent; } .lab #terrain .usages-stores .store-badge img { display: block; height: 40px; width: auto; } .lab #terrain .usages-stores .store-badge--google img { height: 52px; margin: -6px 0; } /* × 1,302 : marge de protection du PNG Google */ .lab #terrain .usages-stores .store-badge:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.28), 0 2px 4px rgba(15, 23, 46, 0.2), 0 14px 26px -12px rgba(15, 23, 46, 0.55); } .lab #terrain .usages-stores .store-badge:active { transform: translateY(0) scale(0.97); box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.3), 0 1px 2px rgba(15, 23, 46, 0.25), 0 4px 10px -8px rgba(15, 23, 46, 0.45); transition-duration: 90ms; } .lab #terrain .usages-stores .store-badge:focus-visible { outline: 2px solid #1F74E7; outline-offset: 3px; } .lab #terrain .usages-texte .microcopy b { font-weight: 600; color: #26304A; } .lab #terrain .usages-texte .microcopy { margin-top: 14px; max-width: 460px; font-size: 14px; line-height: 20px; color: #6F7988; } .lab #terrain .usages-cta { margin-top: 22px; } /* Le cadre : ratio fixe, coins, liseré, ombre douce */ .lab #terrain .usages-visuel { height: auto; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: #DDE3EC; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.08), 0 34px 60px -40px rgba(15, 23, 46, 0.45); } .lab #terrain .usages-ecran { position: absolute; inset: 0; } .lab #terrain .usages-ecran::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(15, 23, 46, 0.1); pointer-events: none; } .lab #terrain .usages-photo { position: absolute; inset: 0; margin: 0; } .lab #terrain .usages-photo picture, .lab #terrain .usages-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Points focaux : le téléphone dans la main (parc), l'écran du portable (bureau) */ .lab #terrain #ecran-parc .usages-photo img { object-position: 60% 50%; } .lab #terrain #ecran-bureau .usages-photo img { object-position: 50% 48%; } @media (min-width: 1180px) and (max-width: 1439px) { .lab #terrain .usages { column-gap: 40px; } .lab #terrain .usage-titre { font-size: 19px; line-height: 26px; } .lab #terrain .usage-texte { font-size: 15px; line-height: 23px; } } /* Tablette : une colonne, le cadre passe en 16:10 et garde le téléphone au centre droit */ @media (min-width: 768px) and (max-width: 1179px) { .lab #terrain .usages { row-gap: 32px; } .lab #terrain .usages-visuel { aspect-ratio: 16 / 10; } .lab #terrain #ecran-parc .usages-photo img { object-position: 58% 50%; } .lab #terrain #ecran-bureau .usages-photo img { object-position: 50% 42%; } .lab #terrain .usages-stores { margin-top: 22px; } } /* Téléphone : cadre 4:5 avec les recadrages mobiles, badges de 44 px faciles à toucher */ @media (max-width: 767px) { .lab.lab--v8 #terrain .usages-visuel { height: auto; aspect-ratio: 4 / 5; margin-top: 22px; border-radius: 18px; } .lab.lab--v8 #terrain #ecran-parc .usages-photo img { object-position: 50% 50%; } .lab.lab--v8 #terrain #ecran-bureau .usages-photo img { object-position: 50% 45%; } .lab.lab--v8 #terrain .usages-liste { margin-top: 26px; } .lab.lab--v8 #terrain .usages-texte > .usages-stores { order: 6; margin-top: 22px; gap: 10px; } .lab.lab--v8 #terrain .usages-texte > .microcopy { order: 7; margin-top: 12px; } .lab.lab--v8 #terrain .usages-cta { order: 8; align-self: stretch; justify-content: center; margin-top: 18px; min-height: 48px; } .lab.lab--v8 #terrain .usages-stores .store-badge { height: 44px; border-radius: 8px; } .lab.lab--v8 #terrain .usages-stores .store-badge img { height: 44px; } .lab.lab--v8 #terrain .usages-stores .store-badge--google img { height: 57px; margin: -6.5px 0; } } @media (prefers-reduced-motion: reduce) { .lab #terrain .usages-stores .store-badge { transition: none; } .lab #terrain .usages-stores .store-badge:hover, .lab #terrain .usages-stores .store-badge:active { transform: none; } } /* ══ HERO · une seule scène produit (22/09/2026, v4) ══════════════════════════ Haut du hero inchangé. `.ha-produit` est le canvas : la fenêtre au fond, le téléphone devant, qui commence à 60 % de la hauteur de la fenêtre et la traverse par le bas ; la carte « IMPRA aussi sur le parc. » + badges est posée à sa gauche, à cheval sur le bord bas de la fenêtre. Toute la géométrie se déduit de la largeur de la fenêtre (--fen-w) : hauteur (--fen-h), chevauchement (40 %), partie visible du téléphone (--vis = 1,5 × --tel-w) et débord réservé en padding (--deb) — aucune zone vide sous la scène. */ .lab.lab--v8 .hero .ha-contenu { padding-bottom: 8px; } .lab.lab--v8 .hero .ha-produit { --fen-w: min(1440px, (100vw - 48px) * 0.75); --fen-h: calc(var(--fen-w) * 0.5037 + 32px); --tel-w: 256px; --vis: calc(var(--tel-w) * 1.5); --chev: calc(var(--fen-h) * 0.4); --deb: calc(var(--vis) - var(--chev) + 8px); /* 27/09/2026 : géométrie extérieure d'avant le téléphone entier (b778110) restaurée à l'identique — 256 px de large, 1,5 × en hauteur, 40 % de chevauchement ; seul l'intérieur (écran) a changé ; fondu bas d'origine conservé */ position: relative; padding-bottom: var(--deb); } .lab.lab--v8 .hero .ha-produit::before { content: ""; position: absolute; left: -6%; right: -6%; top: -4%; bottom: var(--deb); z-index: -1; pointer-events: none; background: radial-gradient(56% 50% at 50% 50%, rgba(29, 107, 213, 0.12) 0%, rgba(29, 107, 213, 0.04) 48%, rgba(29, 107, 213, 0) 72%); } .lab.lab--v8 .hero .ha-fenetre { position: relative; z-index: 1; } /* La scène : de 60 % de la fenêtre jusqu'au bas du canvas, calée à 3,5 % du bord droit */ .lab.lab--v8 .hero .ha-scene-mobile { position: absolute; z-index: 3; right: 3.5%; top: calc(var(--fen-h) * 0.6); bottom: 0; width: var(--tel-w); } .lab.lab--v8 .hero .ha-scene-mobile::after { content: ""; position: absolute; z-index: -1; left: -30%; top: -12%; width: 160%; height: 120%; pointer-events: none; background: radial-gradient(50% 50% at 50% 45%, rgba(29, 107, 213, 0.13) 0%, rgba(77, 148, 245, 0.05) 50%, rgba(77, 148, 245, 0) 72%); } /* Le téléphone : contour fin, Dynamic Island, écran masqué ; devant la fenêtre, coupé en fondu par le bas (boîte de 1,5 × sa largeur, fondu de 66 % à 100 %) — le cadrage validé par l'opérateur le 27/09 au soir, image à l'appui ; l'appareil réel continue sous la boîte et n'a donc pas de bord bas. Aucun survol : le cadre ne bouge jamais, sinon son ombre serait coupée par ce rognage. */ .lab.lab--v8 .hero .ha-tel { position: relative; z-index: 2; width: var(--tel-w); height: var(--vis); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0) 100%); } .lab.lab--v8 .hero .ha-tel-cadre { position: relative; padding: calc(var(--tel-w) * 0.03); border-radius: calc(var(--tel-w) * 0.185); background: #0B0F1A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 0 0 1px rgba(11, 13, 24, 0.06), 0 2px 4px rgba(11, 13, 24, 0.18), 0 28px 56px -22px rgba(11, 13, 24, 0.6); } /* aucun état de survol : visuel produit, pas un bouton */ .lab.lab--v8 .hero .ha-tel-ecran { position: relative; overflow: hidden; border-radius: calc(var(--tel-w) * 0.155); background: #F5F7FB; } /* écran au rapport réel de la capture (jamais étirée), rayon = 18,5 % − 3 % ; fond = couleur du haut de la capture (zone d'état sous l'îlot) */ .lab.lab--v8 .hero .ha-tel-ilot { position: absolute; z-index: 3; left: 50%; top: calc(var(--tel-w) * 0.03); width: calc(var(--tel-w) * 0.3); height: calc(var(--tel-w) * 0.082); border-radius: 999px; background: #0B0F1A; transform: translateX(-50%); } .lab.lab--v8 .hero .ha-tel-ecran picture { display: block; padding-top: calc(var(--tel-w) * 0.095); } /* zone système : la capture (barre d'état vide de 49 px sur 2556) commence 6 px sous l'îlot */ .lab.lab--v8 .hero .ha-tel-ecran img { display: block; width: 100%; height: auto; } /* La carte mobile : à gauche du téléphone, à cheval sur le bord bas de la fenêtre */ .lab.lab--v8 .hero .ha-scene-texte { position: absolute; z-index: 3; right: calc(3.5% + var(--tel-w) + 22px); top: calc(var(--fen-h) - 70px); width: max-content; max-width: 296px; padding: 16px 18px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(15, 23, 46, 0.08); box-shadow: 0 1px 2px rgba(11, 13, 24, 0.05), 0 18px 40px -22px rgba(11, 13, 24, 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: left; } .lab.lab--v8 .hero .ha-scene-titre { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.012em; color: #0F172E; } .lab.lab--v8 .hero .ha-scene-ligne { margin: 4px 0 0; max-width: 28ch; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.005em; color: #667080; } .lab.lab--v8 .hero .ha-stores { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .lab.lab--v8 .hero .ha-stores .store-badge { position: relative; display: inline-flex; align-items: center; height: 32px; border-radius: 6px; overflow: hidden; background: #0B0B0C; opacity: 1; cursor: pointer; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.22), 0 1px 2px rgba(15, 23, 46, 0.2), 0 6px 14px -8px rgba(15, 23, 46, 0.45); transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms ease; -webkit-tap-highlight-color: transparent; } .lab.lab--v8 .hero .ha-stores .store-badge img { display: block; height: 32px; width: auto; } .lab.lab--v8 .hero .ha-stores .store-badge--google img { height: 41.7px; margin: -4.85px 0; } /* × 1,302 : marge de protection du PNG Google */ .lab.lab--v8 .hero .ha-stores .store-badge:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.28), 0 2px 4px rgba(15, 23, 46, 0.2), 0 12px 22px -10px rgba(15, 23, 46, 0.55); } .lab.lab--v8 .hero .ha-stores .store-badge:active { transform: translateY(0) scale(0.97); box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.3), 0 1px 2px rgba(15, 23, 46, 0.25), 0 4px 10px -8px rgba(15, 23, 46, 0.45); transition-duration: 90ms; } .lab.lab--v8 .hero .ha-stores .store-badge:focus-visible { outline: 2px solid #1F74E7; outline-offset: 3px; } /* Entrée quand le bas de la fenêtre arrive à l'écran : le téléphone se pose, puis la carte ; rien de permanent */ .lab.lab--v8 .hero .ha-scene-mobile[data-reveal] { transition: none; } .lab.lab--v8[data-motion="prete"] .hero .ha-scene-mobile:not([data-reveal="visible"]) .ha-tel { opacity: 0; transform: translate(16px, 24px) scale(0.98); } .lab.lab--v8[data-motion="prete"] .hero .ha-scene-mobile:not([data-reveal="visible"]) ~ .ha-scene-texte { opacity: 0; transform: translateY(12px); } .lab.lab--v8[data-motion="prete"] .hero .ha-scene-mobile[data-reveal="visible"] .ha-tel { animation: ha-tel-entree 680ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } .lab.lab--v8[data-motion="prete"] .hero .ha-scene-mobile[data-reveal="visible"] ~ .ha-scene-texte { animation: ha-texte-entree 520ms cubic-bezier(0.22, 1, 0.36, 1) 110ms backwards; } @keyframes ha-tel-entree { from { opacity: 0; transform: translate(16px, 24px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes ha-texte-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .lab.lab--v8 .hero .ha-tel, .lab.lab--v8 .hero .ha-tel-cadre, .lab.lab--v8 .hero .ha-scene-texte, .lab.lab--v8 .hero .ha-stores .store-badge { animation: none !important; transition: none !important; opacity: 1; transform: none; } .lab.lab--v8 .hero .ha-stores .store-badge:hover, .lab.lab--v8 .hero .ha-stores .store-badge:active { transform: none; } } /* Paliers : même relation spatiale, téléphone et badges un peu plus petits */ .lab.lab--v8 .hero .ha-phrase { max-width: 640px; } @media (min-width: 1280px) and (max-width: 1439px) { .lab.lab--v8 .hero .ha-produit { --tel-w: 236px; } } @media (min-width: 1024px) and (max-width: 1279px) { .lab.lab--v8 .hero .ha-produit { --tel-w: 216px; } .lab.lab--v8 .hero .ha-scene-texte { max-width: 270px; padding: 14px 16px; } .lab.lab--v8 .hero .ha-scene-titre { font-size: 16px; line-height: 21px; } } /* Tablette : fenêtre à 90 %, chevauchement réduit à 32 %, carte plus compacte */ @media (min-width: 768px) and (max-width: 1023px) { .lab.lab--v8 .hero .ha-produit { --fen-w: calc((100vw - 48px) * 0.9); --tel-w: 200px; --chev: calc(var(--fen-h) * 0.32); } .lab.lab--v8 .hero .ha-scene-mobile { right: 3%; top: calc(var(--fen-h) * 0.68); } .lab.lab--v8 .hero .ha-scene-texte { right: calc(3% + var(--tel-w) + 18px); top: calc(var(--fen-h) - 64px); max-width: 260px; padding: 14px 16px; } .lab.lab--v8 .hero .ha-scene-titre { font-size: 16px; line-height: 21px; } .lab.lab--v8 .hero .ha-stores .store-badge { height: 30px; } .lab.lab--v8 .hero .ha-stores .store-badge img { height: 30px; } .lab.lab--v8 .hero .ha-stores .store-badge--google img { height: 39px; margin: -4.5px 0; } } /* Le commutateur n'existe qu'en dessous de 1024 px */ .lab.lab--v8 .hero .ha-switch { display: none; } /* ── ≤ 1023 px : une seule vue à la fois — fenêtre OU téléphone, commutateur dessous, puis la carte stores ── Le canvas devient une grille : rangée 1 = la scène (fenêtre et téléphone superposés, hauteur de la fenêtre), rangée 2 = le commutateur, rangée 3 = la carte (seulement en vue « Sur le parc »). */ @media (max-width: 1023px) { .lab.lab--v8 .hero .ha-contenu { padding-bottom: 28px; } .lab.lab--v8 .hero .ha-produit { --tel-w: 230px; --deb: 0px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding-bottom: 0; } /* La scène téléphone est hors flux, calée sur la fenêtre (même hauteur, déduite de la largeur) : seule la fenêtre dimensionne la rangée */ .lab.lab--v8 .hero .ha-produit::before { bottom: 0; } .lab.lab--v8 .hero .ha-fenetre { grid-area: 1 / 1; z-index: 1; transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1), transform 450ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } .lab.lab--v8 .hero .ha-scene-mobile { position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: var(--fen-h); display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.97); transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1), transform 450ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 450ms; } .lab.lab--v8 .hero .ha-scene-mobile::after { left: 50%; top: 0; width: 100%; height: 100%; transform: translateX(-50%); background: radial-gradient(45% 50% at 50% 48%, rgba(29, 107, 213, 0.12) 0%, rgba(77, 148, 245, 0) 70%); } .lab.lab--v8 .hero .ha-produit[data-vue="parc"] .ha-fenetre { opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.985); transition-delay: 0s, 0s, 450ms; } .lab.lab--v8 .hero .ha-produit[data-vue="parc"] .ha-scene-mobile { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } /* Le téléphone prend la hauteur de la scène, coupé par le bas en fondu */ .lab.lab--v8 .hero .ha-tel { width: var(--tel-w); height: 100%; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0) 100%); } .lab.lab--v8[data-motion="prete"] .hero .ha-scene-mobile:not([data-reveal="visible"]) .ha-tel, .lab.lab--v8[data-motion="prete"] .hero .ha-scene-mobile[data-reveal="visible"] .ha-tel { opacity: 1; transform: none; animation: none; } .lab.lab--v8 .hero .ha-tel-cadre { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 0 0 1px rgba(11, 13, 24, 0.06), 0 2px 4px rgba(11, 13, 24, 0.18), 0 22px 40px -20px rgba(11, 13, 24, 0.5); } /* Le commutateur : capsule qui glisse, 240 × 44 */ .lab.lab--v8 .hero .ha-switch { grid-row: 2; justify-self: center; position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 240px; height: 44px; margin-top: 18px; padding: 4px; border-radius: 999px; background: #F2F5FA; box-shadow: inset 0 0 0 1px rgba(15, 23, 46, 0.1), inset 0 1px 2px rgba(15, 23, 46, 0.06); } .lab.lab--v8 .hero .ha-switch-capsule { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(29, 107, 213, 0.22), 0 1px 2px rgba(15, 23, 46, 0.12), 0 4px 10px -6px rgba(15, 23, 46, 0.25); transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .lab.lab--v8 .hero .ha-produit[data-vue="parc"] .ha-switch-capsule { transform: translateX(100%); } .lab.lab--v8 .hero .ha-switch-onglet { position: relative; z-index: 1; appearance: none; border: 0; background: none; padding: 0; border-radius: 999px; font-family: var(--ha-police); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.005em; color: #667080; cursor: pointer; transition: color 200ms ease; -webkit-tap-highlight-color: transparent; } .lab.lab--v8 .hero .ha-switch-onglet[aria-selected="true"] { color: #0F172E; } .lab.lab--v8 .hero .ha-switch-onglet:focus-visible { outline: 2px solid #1F74E7; outline-offset: 2px; } /* La carte stores : sous le commutateur, seulement sur le parc, sans cadre */ .lab.lab--v8 .hero .ha-scene-texte { grid-row: 3; position: static; display: none; justify-self: center; width: auto; max-width: none; margin-top: 18px; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: center; justify-items: center; } .lab.lab--v8 .hero .ha-produit[data-vue="parc"] .ha-scene-texte { display: grid; animation: ha-texte-entree 420ms cubic-bezier(0.22, 1, 0.36, 1) 120ms backwards; } .lab.lab--v8[data-motion="prete"] .hero .ha-scene-mobile:not([data-reveal="visible"]) ~ .ha-scene-texte { opacity: 1; transform: none; } .lab.lab--v8 .hero .ha-scene-titre { font-size: 18px; line-height: 24px; } .lab.lab--v8 .hero .ha-scene-ligne { font-size: 14px; line-height: 20px; max-width: 26ch; } .lab.lab--v8 .hero .ha-stores { flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; } .lab.lab--v8 .hero .ha-stores .store-badge { height: 38px; border-radius: 7px; } .lab.lab--v8 .hero .ha-stores .store-badge img { height: 38px; } .lab.lab--v8 .hero .ha-stores .store-badge--google img { height: 49.5px; margin: -5.75px 0; } } /* Tablette : la fenêtre entière à 90 %, téléphone de 230 px */ @media (min-width: 768px) and (max-width: 1023px) { .lab.lab--v8 .hero .ha-produit { --tel-w: 230px; } } /* Téléphone : fenêtre rognée sur sa partie utile (4:3), téléphone de 220 px */ @media (max-width: 767px) { .lab.lab--v8 .hero .ha-phrase { max-width: 24em; } .lab.lab--v8 .hero .ha-produit { --tel-w: 220px; --fen-w: calc(100vw - 32px); --fen-h: calc(var(--fen-w) * 0.75 + 31px); width: 100%; align-self: stretch; margin-top: 44px; } /* fenêtre 4:3 : hauteur = 0,75 × largeur + barre */ .lab.lab--v8 .hero .ha-produit::before { display: none; } .lab.lab--v8 .hero .ha-fenetre { width: 100%; border-radius: 14px; } .lab.lab--v8 .hero .ha-ecran { aspect-ratio: 4 / 3; } /* rognage utile : « Bonjour Yanis », « À traiter », indicateurs, sans la barre latérale */ .lab.lab--v8 .hero .ha-ecran img { width: 160%; max-width: none; height: auto; margin-left: -24%; object-fit: unset; } } @media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .lab.lab--v8 .hero .ha-fenetre, .lab.lab--v8 .hero .ha-scene-mobile, .lab.lab--v8 .hero .ha-switch-capsule, .lab.lab--v8 .hero .ha-scene-texte { transition: none !important; animation: none !important; } } /* ══ HERO · finition premium (25/09/2026) ═════════════════════════════════════ 1 · En-tête mobile : logo, « Essayer », menu — « Se connecter » passe dans le menu ; hauteur 64, respirations, bouton et burger dessinés proprement. 2 · Menu mobile : entrées à 20 px, sous-entrées à 16 px, actions en boutons pleine largeur (« Se connecter » devient un bouton fantôme). 3 · Desktop : fenêtre produit mieux mise en scène (cadre, ombres en couches, halo plus large) — la fenêtre reste la pièce principale. 4 · Mobile : commutateur avec icônes et capsule à liseré bleu ; bascule avec fondu, échelle, légère montée et flou de départ ; fenêtre mise en scène. */ /* ── 1 · En-tête mobile ────────────────────────────────────────────────── */ /* ── 3 · Desktop : la fenêtre produit mise en scène ────────────────────── */ .lab.lab--v8 .hero .ha-fenetre { border-radius: 18px; padding: 0 6px 6px; background: linear-gradient(180deg, #FBFCFE 0%, #F1F4F9 100%); box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(11, 13, 24, 0.04), 0 12px 24px -14px rgba(11, 13, 24, 0.12), 0 48px 96px -40px rgba(11, 13, 24, 0.28), 0 100px 140px -70px rgba(29, 107, 213, 0.22); } .lab.lab--v8 .hero .ha-barre { height: 30px; gap: 7px; padding: 0 10px; } .lab.lab--v8 .hero .ha-barre span { width: 10px; height: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .lab.lab--v8 .hero .ha-ecran { border: 1px solid rgba(15, 23, 46, 0.07); border-radius: 12px; } .lab.lab--v8 .hero .ha-produit::before { left: -10%; right: -10%; top: -10%; background: radial-gradient(60% 55% at 50% 42%, rgba(29, 107, 213, 0.15) 0%, rgba(29, 107, 213, 0.055) 45%, rgba(29, 107, 213, 0) 72%); } /* ── 4 · Mobile et tablette : commutateur, bascule, mise en scène ──────── */ @media (max-width: 1023px) { .lab.lab--v8 .hero .ha-switch { width: 268px; height: 46px; margin-top: 18px; padding: 4px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(15, 23, 46, 0.1); box-shadow: 0 1px 2px rgba(15, 23, 46, 0.05), 0 10px 24px -16px rgba(15, 23, 46, 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lab.lab--v8 .hero .ha-switch-capsule { top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 46, 0.14), 0 6px 14px -8px rgba(15, 23, 46, 0.3), 0 0 0 1px rgba(29, 107, 213, 0.14); transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1); } .lab.lab--v8 .hero .ha-switch-onglet { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.005em; color: #6B7688; transition: color 220ms ease; } .lab.lab--v8 .hero .ha-switch-onglet svg { width: 16px; height: 16px; flex: none; opacity: 0.75; transition: opacity 220ms ease, color 220ms ease; } .lab.lab--v8 .hero .ha-switch-onglet[aria-selected="true"] { color: #0F172E; } .lab.lab--v8 .hero .ha-switch-onglet[aria-selected="true"] svg { color: #1D6BD5; opacity: 1; } /* La bascule : la fenêtre s'efface (fondu, −8 px, 0,985), le téléphone arrive (fondu, +18 px → 0, 0,96 → 1, flou 6 px → net) */ .lab.lab--v8 .hero .ha-fenetre { transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } .lab.lab--v8 .hero .ha-scene-mobile { transform: translateY(18px) scale(0.96); filter: blur(6px); transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1), filter 380ms ease, visibility 0s linear 380ms; } .lab.lab--v8 .hero .ha-produit[data-vue="parc"] .ha-fenetre { transform: translateY(-8px) scale(0.985); transition-delay: 0s, 0s, 420ms; } .lab.lab--v8 .hero .ha-produit[data-vue="parc"] .ha-scene-mobile { transform: none; filter: blur(0px); transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1) 60ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 60ms, filter 520ms ease 60ms, visibility 0s linear 0s; } .lab.lab--v8 .hero .ha-produit[data-vue="parc"] .ha-scene-texte { animation: ha-texte-entree 460ms cubic-bezier(0.22, 1, 0.36, 1) 180ms backwards; } /* La carte mobile : badges de 36 px, ligne courte */ .lab.lab--v8 .hero .ha-scene-texte { margin-top: 20px; } .lab.lab--v8 .hero .ha-stores { margin-top: 12px; gap: 10px; } .lab.lab--v8 .hero .ha-stores .store-badge { height: 36px; border-radius: 7px; } .lab.lab--v8 .hero .ha-stores .store-badge img { height: 36px; } .lab.lab--v8 .hero .ha-stores .store-badge--google img { height: 46.9px; margin: -5.45px 0; } } @media (max-width: 767px) { /* La fenêtre sur téléphone : halo doux derrière, cadre plus léger, points de fenêtre discrets */ .lab.lab--v8 .hero .ha-produit::before { display: block; left: -10%; right: -10%; top: -8%; bottom: -2%; background: radial-gradient(60% 55% at 50% 40%, rgba(29, 107, 213, 0.13) 0%, rgba(29, 107, 213, 0.05) 45%, rgba(29, 107, 213, 0) 72%); } .lab.lab--v8 .hero .ha-fenetre { border-radius: 16px; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(11, 13, 24, 0.04), 0 20px 44px -24px rgba(11, 13, 24, 0.28), 0 60px 90px -50px rgba(29, 107, 213, 0.22); } .lab.lab--v8 .hero .ha-barre { height: 28px; } .lab.lab--v8 .hero .ha-barre span { width: 9px; height: 9px; } } @media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .lab.lab--v8 .hero .ha-scene-mobile, .lab.lab--v8 .hero .ha-produit[data-vue="parc"] .ha-scene-mobile { filter: none; transition: none !important; } .lab.lab--v8 .hero .ha-switch-onglet, .lab.lab--v8 .hero .ha-switch-onglet svg { transition: none; } } /* ══ EN-TÊTE ET MENU MOBILES · tiroir clair (25/09/2026) ══════════════════════ En-tête ≤ 767 : logo, « Essayer 30 jours » (« 30 jours à 0 € » sous 360 px), menu. Menu ≤ 1179 : voile flouté + panneau blanc qui glisse depuis la droite, tête (logo, croix), accordéons à hauteur animée, pied collant (CTA bleu, « Se connecter »). Retours tactiles : légère réduction + bleu très pâle. */ /* ══ HERO MOBILE · fenêtre à l'échelle des références (25/09/2026) ═══════════ Sous 768 px, la fenêtre produit n'est plus réduite pour tenir dans l'écran (texte illisible) : elle est rendue à ~0,6 de sa taille desktop — barre latérale, « Bonjour Yanis », À traiter et indicateurs lisibles —, calée à 16 px du bord gauche et coupée par le bord droit du viewport, comme les fenêtres produit de linear.app et attio.com sur téléphone. La section .hero est en overflow: clip : rien ne déborde dans la page. Le téléphone, le commutateur et la carte stores restent centrés sur la largeur de contenu. */ @media (max-width: 767px) { .lab.lab--v8 .hero .ha-produit { --fen-w: calc((100vw - 16px) * 2.4); --fen-h: calc(var(--fen-w) * 0.37 + 38px); width: calc(100% + 16px); margin-right: -16px; margin-top: 48px; } .lab.lab--v8 .hero .ha-fenetre { width: var(--fen-w); max-width: none; height: var(--fen-h); border-radius: 14px; } .lab.lab--v8 .hero .ha-ecran { aspect-ratio: auto; height: calc(var(--fen-h) - 34px); } /* 28 (barre) + 6 (marge basse du cadre) */ .lab.lab--v8 .hero .ha-ecran img { width: 100%; height: auto; margin-left: 0; object-fit: unset; } .lab.lab--v8 .hero .ha-produit::before { left: 0; right: 16px; } .lab.lab--v8 .hero .ha-scene-mobile { right: 16px; } .lab.lab--v8 .hero .ha-switch, .lab.lab--v8 .hero .ha-scene-texte { margin-right: 16px; } } /* ══ HERO MOBILE · fenêtre produit « à la Linear » (25/09/2026, v3) ═══════════ La scène centrée coupée des deux côtés (v2, même jour) a été rejetée (« écran énorme »). L'utilisateur veut la géométrie de linear.app sur iPhone : une fenêtre d'application posée à la gouttière gauche, son coin et sa barre latérale visibles, plus large que l'écran et coupée à DROITE seulement, d'environ 360 px de haut. Sous 1024 px : · `.ha-produit` reste la scène pleine largeur qui rogne elle-même (`overflow-x: clip`), jamais la page — aucun défilement horizontal. · La fenêtre garde le rapport réel de la capture (2960 × 1492, arrêtée à 94,5 % de sa hauteur, sous les indicateurs de Performance). Largeur --fen-w = 166 vw sur téléphone (622 / 647 / 714 px à 375 / 390 / 430, échelle 0,41 → 0,47, hauteur 325 → 368 px) ; 961 px fixes en tablette, la coupe se réduit jusqu'à 1008 px où la fenêtre tient entière. La coupe droite tombe dans la gouttière après « Ventes du mois » (téléphone) et après « Trésorerie » (tablette) : la moitié gauche du tableau de bord est complète — barre latérale, recherche, « Bonjour Yanis », À traiter avec ses boutons, Marge nette, Ventes du mois, Performance. · Points de la barre à leur place naturelle (coin visible). · Téléphone, commutateur et carte stores centrés sur le viewport ; la scène téléphone garde la hauteur de la fenêtre : aucun saut à la bascule. · Entrée : opacité 0 → 1, +24 px → 0, échelle 0,985 → 1 en 600 ms à l'apparition (data-reveal) ; rien en mouvement réduit. */ @media (max-width: 1023px) { .lab.lab--v8 .hero .ha-produit { --gout: 24px; --fen-w: 961px; --ecran-w: calc(var(--fen-w) - 12px); --fen-h: calc(var(--ecran-w) * 0.4764 + 34px); width: calc(100% + 2 * var(--gout)); max-width: none; margin: clamp(32px, 9vw, 40px) calc(-1 * var(--gout)) 0; align-self: center; overflow-x: clip; overflow-y: visible; } /* 34 / 35 / 39 px à 375 / 390 / 430, 40 en tablette : le CTA respire au-dessus du tableau de bord */ .lab.lab--v8 .hero .ha-produit::before { display: block; left: 0; right: 0; top: -6%; bottom: auto; height: var(--fen-h); background: radial-gradient(60% 60% at 50% 44%, rgba(29, 107, 213, 0.10) 0%, rgba(29, 107, 213, 0.035) 48%, rgba(29, 107, 213, 0) 72%); } .lab.lab--v8 .hero .ha-fenetre { grid-area: 1 / 1; justify-self: start; width: var(--fen-w); max-width: none; height: auto; margin-left: var(--gout); padding: 0 6px 6px; border-radius: 16px; background: linear-gradient(180deg, #F8FAFD 0%, #EFF3F8 100%); box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(11, 13, 24, 0.04), 0 18px 40px -22px rgba(11, 13, 24, 0.22), 0 48px 80px -44px rgba(29, 107, 213, 0.16); } .lab.lab--v8 .hero .ha-barre { height: 28px; gap: 6px; padding: 0 10px; } .lab.lab--v8 .hero .ha-barre span { width: 8px; height: 8px; } .lab.lab--v8 .hero .ha-ecran { aspect-ratio: 2960 / 1410; height: auto; border-radius: 10px; } .lab.lab--v8 .hero .ha-ecran img { width: 100%; max-width: none; height: 100%; margin-left: 0; object-fit: cover; object-position: left top; } .lab.lab--v8 .hero .ha-scene-mobile { left: 0; right: 0; } .lab.lab--v8 .hero .ha-switch { margin: clamp(28px, 8vw, 36px) 0 0; } /* 30 / 31 / 34 px à 375 / 390 / 430, 36 en tablette : le commutateur ne colle plus au tableau de bord */ .lab.lab--v8 .hero .ha-scene-texte { margin-right: 0; } /* Entrée de la fenêtre à l'apparition dans le viewport */ .lab.lab--v8[data-motion="prete"] .hero .ha-fenetre[data-reveal]:not([data-reveal="visible"]) { opacity: 0; animation: none; } .lab.lab--v8[data-motion="prete"] .hero .ha-fenetre[data-reveal="visible"] { animation: ha-fen-entree 600ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } } @media (max-width: 767px) { .lab.lab--v8 .hero .ha-produit { --gout: 16px; --fen-w: 166vw; --tel-w: clamp(232px, 66vw, 272px); --tel-h: calc(var(--tel-w) * 1.3); } /* téléphone à ~66 % de la largeur (257 px à 390), hauteur visible 1,3 × sa largeur : photo, prix, caractéristiques, fondu */ /* --tel-h : hauteur visible du téléphone = celle de l'ancienne version (299 px à 390), coupé en fondu sur « État du véhicule » */ .lab.lab--v8 .hero .ha-fenetre { border-radius: 14px; } /* Vue « Sur le parc » : le téléphone ne prend pas toute la hauteur de la scène — l'utilisateur préfère la version où l'on n'en voyait qu'une partie (photo, prix, caractéristiques, puis le fondu). Centré dans la scène, dont la hauteur reste celle de la fenêtre : aucun saut à la bascule. */ .lab.lab--v8 .hero .ha-tel { width: var(--tel-w); height: min(100%, var(--tel-h)); align-self: end; } /* calé sur le bord bas de la scène : même distance au commutateur que la fenêtre */ } @keyframes ha-fen-entree { from { opacity: 0; transform: translateY(24px) scale(0.985); } to { opacity: 1; transform: none; } } @media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .lab.lab--v8 .hero .ha-fenetre, .lab.lab--v8[data-motion="prete"] .hero .ha-fenetre[data-reveal]:not([data-reveal="visible"]) { animation: none !important; opacity: 1; } } /* ══ FIN DE PAGE SUR TÉLÉPHONE · toile et barre du navigateur (25/09/2026) ═════ Sur iPhone, ce qui déborde de la page (élastique en bas, zone système sous le footer) est peint avec la toile, c'est-à-dire le fond de `html` : il était blanc sous un footer bleu nuit → « plaque blanche » au bas de l'écran. La toile prend donc deux tons : blanc au-dessus de la page (l'en-tête est blanc), bleu nuit en dessous (le footer est bleu nuit). Le motif fait deux fois la hauteur de la page et se répète verticalement : sous la page on tombe sur le bleu nuit, au-dessus sur le blanc. L'interface de Safari elle-même n'est pas colorée (consigne du 25/09 : ne jamais essayer). */ html.lab-html { background-color: #fff; background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #0F172E 50%, #0F172E 75%, #fff 75%, #fff 100%); background-size: 100% 200%; background-repeat: repeat-y; } /* ══ MOBILE FINALE · passe complète avant commercialisation (25/09/2026) ═══════ Une vraie adaptation des petits écrans, pas un desktop réduit. Tout est scopé sous 768 px (ou 1024 quand c'est dit) : le desktop ne bouge pas. 1 · Hero : échelle d'espacement régulière (en-tête → badge 40, badge → titre 22, titre → phrase 18, phrase → CTA 28, CTA → CTA 12, CTA secondaire → fenêtre 56–72, fenêtre → commutateur 36–48), titre 36–46 px, CTA principal 56 px avec état pressé, CTA secondaire redessiné (52 px, filet #E5EAF2, flèche qui avance au toucher), commutateur en vrai segmented control, téléphone du parc à 66 % de la largeur, fin de hero raccourcie (dégradé de « Repères » compressé à 256 px). 2 · Boutons génériques : 54 px, coins 14, semi-gras, état pressé ; les secondaires en filet léger au lieu du rectangle vide. 3 · Titres de section 30–36 px. 4 · Métier : bénéfices du simulateur sur une colonne, téléphone GO/NO-GO entier, deux indicateurs au lieu de quatre. 5 · Parcours : téléphone de la préparation fondu par le bas. 6 · Outils : documents empilés proprement (CERFA + facture), textes lisibles. 7 · Révélations douces (une fois, à l'entrée) pour les blocs qui n'en avaient pas : preuves, formules, cartes secteurs. 8 · En-tête : safe-area haute ; tiroir : bouton « Explorer IMPRA ». */ @media (max-width: 767px) { /* 1 · Hero — rythme mobile (27/09/2026). Hiérarchie relevée sur le hero mobile d'attio.com (rythme seulement, pas le dessin) : en-tête → 48 px → badge compact → titre contenu (3 lignes à 390) → sous-titre resserré → CTA principal → lien « Explorer IMPRA → » → produit ~50 px plus bas. Tout en clamp / max-width, une seule requête média. */ .lab.lab--v8 .hero .ha-contenu { padding: 48px 16px 24px; } .lab.lab--v8 .hero .ha-pastille { max-width: min(94%, 360px); border: 0; border-radius: 999px; } .lab.lab--v8 .hero .ha-pastille-in { position: relative; isolation: isolate; overflow: hidden; gap: 6px; min-height: 38px; padding: 0 10px 0 13px; border-radius: 999px; background: transparent; font-size: clamp(12.5px, 3.33vw, 13.5px); line-height: 1.25; letter-spacing: -0.008em; text-align: center; } /* 12,5 / 13 / 13,5 px à 375 / 390 / 405+ : le libellé tient sur une ligne dès 360 px, passe sur deux à 320 */ .lab.lab--v8 .hero .ha-pastille svg { flex: none; width: 10px; height: 10px; } /* Liseré : gris neutre sur tout le tour, court reflet bleu qui parcourt lentement le bord — un dégradé conique tourne derrière un fond blanc en retrait de 1 px ; au repos (mouvement réduit) le reflet reste à droite, près de la flèche. */ .lab.lab--v8 .hero .ha-pastille-in::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 230%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(0deg); background: conic-gradient(from 180deg, #E3E8F0 0 74%, rgba(29, 107, 213, 0.72) 86%, rgba(125, 211, 252, 0.6) 91%, #E3E8F0 96%); } .lab.lab--v8 .hero .ha-pastille-in::after { content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: inherit; background: #fff; transition: background-color .2s ease; } .lab.lab--v8 .hero .ha-pastille:hover .ha-pastille-in { background: transparent; } .lab.lab--v8 .hero .ha-pastille:hover .ha-pastille-in::after, .lab.lab--v8 .hero .ha-pastille:active .ha-pastille-in::after { background: #F7F8F9; } .lab.lab--v8[data-motion="prete"] .hero .ha-pastille-in::before { animation: ha-pastille-lisere 6s linear 3; } /* trois tours de 6 s après l'arrivée, puis repos, reflet à droite — jamais de boucle infinie dans le hero sur écran tactile (règle du 25/09, « ça tremble ») */ .lab.lab--v8 .hero .ha-titre { margin-top: 34px; max-width: 10.5em; font-size: clamp(30px, 9.7vw, 44px); line-height: 1.02; letter-spacing: -0.022em; } /* 31 / 35 / 36 / 38 / 42 px à 320 / 360 / 375 / 390 / 430 : trois lignes partout */ .lab.lab--v8 .hero .ha-phrase { margin-top: 24px; max-width: 24em; font-size: 16px; line-height: 1.5; } .lab.lab--v8 .hero .ha-actions { margin-top: 26px; gap: 12px; max-width: 360px; } .lab.lab--v8 .hero .ha-bouton { transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms ease, border-color 160ms ease, box-shadow 140ms ease, color 160ms ease; -webkit-tap-highlight-color: transparent; } .lab.lab--v8 .hero .ha-bouton--premier { height: 54px; border-radius: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; box-shadow: 0 1px 2px rgba(15, 23, 46, 0.14), 0 6px 16px -10px rgba(29, 107, 213, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .lab.lab--v8 .hero .ha-bouton--premier:active { transform: scale(0.98); box-shadow: 0 1px 2px rgba(15, 23, 46, 0.12), 0 4px 10px -8px rgba(29, 107, 213, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* « Explorer IMPRA → » : action secondaire légère — texte navy, pas de carte ; zone tactile 44 px */ .lab.lab--v8 .hero .ha-bouton--second { align-self: center; width: auto; min-width: 0; height: 44px; padding: 0 12px; gap: 8px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: #0F172E; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .lab.lab--v8 .hero .ha-bouton--second .ha-fleche { display: inline-block; width: 16px; height: 16px; transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); } .lab.lab--v8 .hero .ha-bouton--second:active { transform: none; background: rgba(15, 23, 46, 0.04); } .lab.lab--v8 .hero .ha-bouton--second:active .ha-fleche { transform: translateX(3px); } .lab.lab--v8 .hero .ha-clin { display: block; left: calc(50% - 100px); top: calc(100% - 6px); width: 72px; height: 48px; } /* la flèche sourire, rétablie à la demande de l'opérateur (27/09 soir) : sous le lien, elle vise « Explorer IMPRA » */ .lab.lab--v8 .hero .ha-produit { margin-top: clamp(56px, 15vw, 64px); } /* la flèche (48 px) vit dans cet espace : 56 / 58 / 64 px à 375 / 390 / 430 */ .lab.lab--v8 .hero .ha-switch { width: min(100%, 300px); height: 48px; margin-top: clamp(36px, 10vw, 48px); padding: 4px; background: #EEF2F8; border: 1px solid rgba(15, 23, 46, 0.08); box-shadow: inset 0 1px 2px rgba(15, 23, 46, 0.05); -webkit-backdrop-filter: none; backdrop-filter: none; } /* 37 / 39 / 43 px à 375 / 390 / 430 */ .lab.lab--v8 .hero .ha-switch-capsule { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: #fff; box-shadow: 0 0 0 1px rgba(29, 107, 213, 0.14), 0 1px 2px rgba(15, 23, 46, 0.1), 0 4px 10px -6px rgba(15, 23, 46, 0.22); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } .lab.lab--v8 .hero .ha-switch-onglet { font-size: 15px; color: #5B6578; } .lab.lab--v8 .hero .ha-switch-onglet[aria-selected="true"] { color: #0F172E; } .lab.lab--v8 .hero .ha-stores .store-badge:active { transform: scale(0.97); } /* Fin du hero : le dégradé blanc → bleu nuit de « Repères » accompagne la transition sur 256 px au lieu de 410, et la section commence 88 px plus bas au lieu de 214 */ .lab.lab--v8 .section-preuve { --pad-haut: 88px; background: linear-gradient(180deg, var(--raccord-hero) 0px, #E3EAF6 20px, #C9D3E5 52px, #9AA8C5 86px, #66779B 118px, #3F5078 148px, #27365A 176px, #192543 204px, #121C36 232px, #0F172E 256px, #0F172E 100%); } .lab.lab--v8 .preuves-sociales { gap: 28px; } /* 2 · Boutons génériques (hors en-tête et tiroir, qui ont leur gabarit) */ .lab.lab--v8 .bouton { min-height: 54px; border-radius: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms ease, border-color 160ms ease, box-shadow 140ms ease; -webkit-tap-highlight-color: transparent; } .lab.lab--v8 .bouton:active { transform: scale(0.98); } .lab.lab--v8 .bouton--bleu { box-shadow: 0 1px 2px rgba(15, 23, 46, 0.14), 0 10px 22px -12px rgba(29, 107, 213, 0.5); } .lab.lab--v8 .bouton--contour { border-color: rgba(15, 23, 46, 0.14); background: rgba(255, 255, 255, 0.7); color: #0F172E; } .lab.lab--v8 .bouton--contour:active { background: #EEF3FA; } .lab.lab--v8 .section--encre .bouton--contour, .lab.lab--v8 .carte--finale .bouton--contour { border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.06); color: #fff; } .lab.lab--v8 .section--encre .bouton--contour:active, .lab.lab--v8 .carte--finale .bouton--contour:active { background: rgba(255, 255, 255, 0.14); } /* 3 · Titres de section : 32 px à 375, 33,5 à 390, 36 à 430 */ .lab.lab--v8 .section h2 { font-size: clamp(30px, 8.6vw, 36px); line-height: 1.12; } /* 4 · Métier */ /* 5 · Parcours : le téléphone de la préparation se fond au lieu d'être coupé net */ .lab.lab--v8 #parcours .pv4-scene--preparation > .pv4-tel { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0) 100%); } /* 8 · En-tête : safe-area haute (sans effet dans Safari, utile en plein écran) */ } @media (max-width: 359px) { .lab.lab--v8 .hero .ha-pastille-in { min-height: 36px; padding: 6px 9px 6px 12px; } /* à 320 px le libellé passe sur deux lignes, centrées */ } @media (max-width: 1023px) { /* 1 · Bascule Bureau / Parc : 300 ms de sortie, 360 ms d'entrée, flou 4 px */ .lab.lab--v8 .hero .ha-fenetre { transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } .lab.lab--v8 .hero .ha-scene-mobile { transform: translateY(14px) scale(0.985); filter: blur(4px); transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 300ms cubic-bezier(0.22, 1, 0.36, 1), filter 300ms ease, visibility 0s linear 300ms; } .lab.lab--v8 .hero .ha-produit[data-vue="parc"] .ha-fenetre { transform: translateY(-6px) scale(0.99); transition-delay: 0s, 0s, 300ms; } .lab.lab--v8 .hero .ha-produit[data-vue="parc"] .ha-scene-mobile { transform: none; filter: blur(0px); transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1) 40ms, transform 360ms cubic-bezier(0.22, 1, 0.36, 1) 40ms, filter 360ms ease 40ms, visibility 0s linear 0s; } /* 7 · Révélations douces, une fois, à l'entrée dans l'écran */ .lab.lab--v8[data-motion="prete"] .preuve-sociale[data-reveal], .lab.lab--v8[data-motion="prete"] .formule[data-reveal], .lab.lab--v8[data-motion="prete"] .carte--secteur[data-reveal] { transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 80ms); } .lab.lab--v8[data-motion="prete"] .preuve-sociale[data-reveal]:not([data-reveal="visible"]), .lab.lab--v8[data-motion="prete"] .formule[data-reveal]:not([data-reveal="visible"]), .lab.lab--v8[data-motion="prete"] .carte--secteur[data-reveal]:not([data-reveal="visible"]) { opacity: 0; transform: translateY(16px); } /* 8 · Tiroir : « Explorer IMPRA » entre le CTA et « Se connecter » */ } @media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .lab.lab--v8 .preuve-sociale[data-reveal], .lab.lab--v8 .formule[data-reveal], .lab.lab--v8 .carte--secteur[data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; } .lab.lab--v8 .hero .ha-bouton, .lab.lab--v8 .bouton { transition: none; } } /* ══ MOBILE FINALE · 2 — CTA plus sobres, hero animé comme sur ordinateur, parcours logique, tailles tactiles et textes (25/09/2026, retour de l'utilisateur) ═════ · CTA : 50 / 46 / 50 px au lieu de 56 / 52 / 54 ; « Explorer IMPRA » revient à sa largeur naturelle, centré, et retrouve la flèche sourire dessinée dessous, comme sur ordinateur (tracé animé à l'arrivée). · Titre : le balayage lumineux, réservé à la souris depuis l'incident « ça tremble », passe UNE fois au chargement sur tactile (3,6 s), puis le titre reste en encre pleine — pas de boucle. · Parcours : plus de frise 1-2-3 séparée des cartes ; chaque carte porte son numéro sur sa tuile d'icône et un fil pointillé relie les cartes. · Zones tactiles : badge du hero 40 px, commutateur 50 px, menu 44 × 44. · Textes lisibles : surtitres 13 px, tableaux du parcours 13,5 px, étapes 12,5 px, bénéfices et indicateurs de « Métier » 12,5–14 px, points d'« Outils » 12,5–13,5 px. */ @media (max-width: 767px) { .lab.lab--v8 .bouton { min-height: 50px; border-radius: 13px; font-size: 16px; } .lab.lab--v8 .hero .ha-switch { height: 50px; } .lab.lab--v8 .section .eyebrow, .lab.lab--v8 .section .eyebrow--clair { font-size: 13px; } .lab.lab--v8 #parcours .pv4-etape { font-size: 12.5px; line-height: 16px; letter-spacing: 0.1em; } .lab.lab--v8 #parcours .pv4-bloc dl > div { font-size: 13.5px; line-height: 17px; } .lab.lab--v8 #parcours .pv4-bloc dl > div dd { max-width: 58%; text-align: right; } /* Parcours : la séquence vit dans les cartes */ .lab.lab--v8 #parcours .pv4-timeline { display: none; } .lab.lab--v8 #parcours .pv4-grille { position: relative; margin-top: 24px; row-gap: 22px; } .lab.lab--v8 #parcours .pv4-grille::before { content: ""; position: absolute; left: 50%; top: 24px; bottom: 24px; border-left: 1px solid rgba(111, 167, 245, 0.34); } .lab.lab--v8 #parcours .pv4 { z-index: 1; } .lab.lab--v8 #parcours .pv4-tete { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; } .lab.lab--v8 #parcours .pv4-tete > :not(.pv4-icone) { grid-column: 2; } .lab.lab--v8 #parcours .pv4-icone { position: relative; overflow: visible; grid-row: 1 / span 2; width: 44px; height: 44px; margin-top: 2px; border-radius: 12px; } .lab.lab--v8 #parcours .pv4-icone::after { position: absolute; right: -7px; top: -7px; width: 21px; height: 21px; border-radius: 50%; background: #1D6BD5; color: #fff; font-size: 11.5px; line-height: 21px; font-weight: 700; text-align: center; box-shadow: 0 0 0 3px #152040; } .lab.lab--v8 #parcours .pv4--achat .pv4-icone::after { content: "1"; } .lab.lab--v8 #parcours .pv4--preparation .pv4-icone::after { content: "2"; } .lab.lab--v8 #parcours .pv4--vente .pv4-icone::after { content: "3"; } .lab.lab--v8 #parcours .pv4-etape { margin-top: 2px; } .lab.lab--v8 #parcours .pv4 h3 { margin-top: 2px; } .lab.lab--v8 #parcours .pv4-tete > p:not(.pv4-etape) { grid-column: 1 / -1; margin-top: 12px; } } @media (hover: none) and (max-width: 1023px) { @supports ((-webkit-background-clip: text) or (background-clip: text)) { .lab.lab--v8 .hero .ha-lueur { background-image: linear-gradient(100deg, var(--ha-encre) 0 42%, #1D6BD5 50%, var(--ha-encre) 58% 100%); background-size: 260% 100%; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ha-lueur 3.6s cubic-bezier(0.4, 0, 0.6, 1) 1.4s 1 forwards; } } } @media (prefers-reduced-motion: reduce) { .lab.lab--v8 .hero .ha-lueur { background-image: none; color: inherit; animation: none; } .lab.lab--v8 .hero .ha-clin path { animation: none !important; stroke-dashoffset: 0 !important; } } /* ══ NAVIGATION PRINCIPALE · liens directs, défilement fluide, état actif (25/09/2026) ══ Plus de menus déroulants : cinq destinations (Fonctionnalités → #fonctionnalites, Parcours véhicule → #parcours-vehicule, Web & mobile → #web-mobile, Tarifs → /tarifs, Aide → /aide). Les trois ancres sont des repères vides posés au bord haut de leur section (les ids historiques #metier / #parcours / #terrain restent valables) ; leur scroll-margin-top suit la hauteur réelle de l'en-tête (--nav-h, posée par js/refonte.impra.js). Survol : bleu IMPRA en 160 ms. Actif (section à l'écran, aria-current) : bleu + filet fin sous le libellé. Le défilement animé est dans js/refonte.impra.js (« 9 · Ancres »). */ .lab.lab--v8 .ancre { position: absolute; left: 0; top: 0; width: 0; height: 0; scroll-margin-top: calc(var(--nav-h, 78px) + 12px); } .lab.lab--v8 main > section[id]:focus { outline: none; } /* ══ RÉASSURANCE (#securite) · courte, avant les tarifs (26/09/2026) ════════════════ */ .lab.lab--v8 .securite--bref > .conteneur { padding-top: clamp(36px, 3.4vw, 48px); padding-bottom: clamp(48px, 4.6vw, 64px); grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: center; } .lab.lab--v8 .securite--bref h2 { margin-top: 10px; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.2; max-width: 20ch; } .lab.lab--v8 .securite--bref .lien-fleche { margin-top: 16px; } .lab.lab--v8 .securite--bref .garanties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .lab.lab--v8 .securite--bref .garantie { padding: 18px 18px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(124, 158, 226, 0.16); } .lab.lab--v8 .securite--bref .garantie svg { width: 30px; height: 30px; color: #7FB0F6; } .lab.lab--v8 .securite--bref .garantie h3 { margin-top: 12px; font-size: 16px; line-height: 22px; font-weight: 600; color: #F4F7FA; } .lab.lab--v8 .securite--bref .garantie p { margin-top: 4px; font-size: 14px; line-height: 21px; color: rgba(197, 211, 238, 0.72); } @media (max-width: 1023px) { .lab.lab--v8 .securite--bref > .conteneur { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } } @media (max-width: 767px) { .lab.lab--v8 .securite--bref .garanties { grid-template-columns: minmax(0, 1fr); gap: 10px; } .lab.lab--v8 .securite--bref .garantie { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 14px 16px; } .lab.lab--v8 .securite--bref .garantie svg { grid-row: 1 / 3; width: 26px; height: 26px; } .lab.lab--v8 .securite--bref .garantie h3 { margin-top: 0; } } /* ══ TARIFS · aiguillage avant les cartes, « entrée » définie (26/09/2026) ═══════════ */ .lab.lab--v8 .tarifs .tarifs-def { margin: 18px auto 0; max-width: 64ch; font-size: 15px; line-height: 23px; color: #505967; } .lab.lab--v8 .tarifs .tarifs-def b { color: #0F172E; font-weight: 600; } .lab.lab--v8 .tarifs .tarifs-guide { list-style: none; margin: 22px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .lab.lab--v8 .tarifs .tarifs-guide li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #E1E7F0; font-size: 14px; line-height: 18px; color: #505967; } .lab.lab--v8 .tarifs .tarifs-guide li b { color: #0F172E; font-weight: 600; } .lab.lab--v8 .tarifs .tarifs-guide li .tg-formule { flex: none; padding: 3px 9px; border-radius: 999px; background: #E8F0FD; color: #1D6BD5; font-weight: 700; font-size: 12.5px; line-height: 16px; white-space: nowrap; } .lab.lab--v8 .tarifs .tete-centree + .formules { margin-top: 40px; } @media (max-width: 767px) { .lab.lab--v8 .tarifs .tarifs-guide { gap: 8px; } .lab.lab--v8 .tarifs .tarifs-guide li { width: 100%; justify-content: space-between; padding: 10px 10px 10px 14px; text-align: left; } } /* ══ RYTHME DES FONDS (26/09/2026) ════════════════════════════════════════════ Une seule séquence : hero clair → dégradé de preuve vers var(--impra-navy) → parcours navy (cartes claires) → cinq cartes sur fond clair (deux cartes navy : texte et action ; plaque en bleu très pâle ; rentabilité et documents blanches) → web & mobile blanc → mise en route ET sécurité sur le même navy → tarifs et FAQ clairs → carte finale navy sur fond clair. Un seul dégradé structurel (hero → preuve) ; partout ailleurs des changements de fond francs. */ .lab.lab--v8 .section-usages { background: #FFFFFF; } .lab.lab--v8 #parcours { --pad-bas: clamp(64px, 6.2vw, 96px); } /* la rupture navy → clair vers les cinq cartes est voulue : on lui laisse de l'air, sans séparateur (64 px sur téléphone) */ .lab.lab--v8 .securite--bref { background: var(--impra-navy); } /* les deux cartes navy des cinq cartes : « Une seule saisie » et les alertes */ .lab #metier .cx--saisie, .lab #metier .cx--action { color: #F4F7FA; background: var(--impra-navy); box-shadow: inset 0 0 0 1px rgba(124, 158, 226, 0.16), 0 18px 40px -32px rgba(15, 23, 46, 0.45); } .lab #metier .cx--saisie .cx-tete p, .lab #metier .cx--action .cx-tete p { color: rgba(197, 211, 238, 0.76); } /* la carte plaque, bleu très pâle */ .lab #metier .cx--plaque { background: #EAF1FC; box-shadow: 0 0 0 1px rgba(29, 107, 213, 0.12), 0 18px 40px -32px rgba(15, 23, 46, 0.22); }