:root { color-scheme: light; /* Charte graphique Nexiamo officielle (integree le 2026-08-25, dossier "charte graphique/") - corrige le Deep Navy (#102A35, pas #102035) et introduit le vrai --blue de marque (#438BCD, jusque-la un alias du teal) qui sert de point milieu au degrade de marque teal -> bleu -> violet. Police Manrope + JetBrains Mono (donnees chiffrees) chargees via Google Fonts dans le de chaque page. */ --ink: #102a35; --muted: #6b737a; --line: #dce3e6; --panel: #ffffff; --page: #f5f7f8; --soft: #e9edee; --accent: #12afa3; --accent-dark: #0a6f68; --accent-soft: #dff5f3; --navy: #102a35; --navy-2: #1b3b49; --blue: #438bcd; --blue-soft: #dff5f3; --gold: #ffad19; --gold-soft: #fff3d8; --amber: #f5a524; --amber-soft: #fff3d8; --red: #e5484d; --red-soft: #ffefed; --green: #22c55e; --green-soft: #e7f6ec; --violet: #7567f8; --violet-soft: #ebe9fe; --neutral: #9aa3a6; --brand-gradient: linear-gradient(120deg, var(--accent) 0%, var(--blue) 52%, var(--violet) 100%); --void-line: rgba(255, 255, 255, 0.09); --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --r-sm: 10px; --r-md: 18px; --r-lg: 26px; --r-pill: 100px; --ease: cubic-bezier(0.22, 0.9, 0.28, 1); --shadow-glow: 0 26px 54px -18px rgba(67, 139, 205, 0.38); --shadow: 0 18px 44px rgba(16, 32, 53, 0.14); --soft-shadow: 0 9px 24px rgba(16, 32, 53, 0.09); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-display); background: var(--page); color: var(--ink); min-height: 100vh; } .text-light { font-weight: 400; color: var(--muted); } button, input, select, textarea { font: inherit; } button { cursor: pointer; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(18, 175, 163, 0.26); outline-offset: 2px; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 28px; background: rgba(248, 251, 255, 0.88); border-bottom: 1px solid rgba(215, 226, 238, 0.86); box-shadow: 0 10px 30px rgba(16, 32, 53, 0.08); backdrop-filter: blur(18px); } .brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 170px; } .brand-logo { display: block; width: auto; height: 72px; max-width: 210px; object-fit: contain; object-position: center; /* Rebranding Nexiamo (2026-08-25) : le logo est un PNG transparent (verifie pixel par pixel, aucun halo dans le fichier) - le box-shadow/border-radius ci-dessous, pense pour l'ancien logo CVP (fond plein), dessinait un rectangle arrondi visible autour du logo. Retire pour qu'il flotte librement, plutot que d'ajouter un fond derriere pour le masquer. */ } .brand strong, .brand small { display: block; } .brand small { color: var(--muted); margin-top: 2px; } nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: flex-end; } /* Charte graphique : lien texte sobre (Manrope), pas de puce/pilule - soulignement en degrade de marque qui se deploie au survol/actif. */ nav a { position: relative; color: var(--muted); text-decoration: none; padding: 9px 2px; font-family: var(--font-display); font-weight: 500; font-size: 13.5px; transition: color 160ms ease; } nav a::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--brand-gradient); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease, ease); } nav a:hover { color: var(--accent-dark); } nav a:hover::after { transform: scaleX(1); } nav a.is-active { color: var(--accent-dark); } nav a.is-active::after { transform: scaleX(1); } .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; } .auth-actions { display: flex; align-items: center; gap: 8px; } .auth-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 14px; border-radius: 999px; font-weight: 900; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; } .login-link { border: 1px solid rgba(18, 175, 163, 0.18); background: rgba(255, 255, 255, 0.82); color: var(--accent-dark); } .signup-link { background: linear-gradient(135deg, var(--gold), #ffc65c); color: #24180a; box-shadow: 0 12px 24px rgba(255, 173, 25, 0.24); } .auth-actions a:hover { transform: translateY(-1px); } .account-menu { position: relative; } .header-message-link { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 14px; border: 1px solid rgba(18, 175, 163, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.82); color: var(--accent-dark); font-weight: 900; text-decoration: none; } .header-message-link:hover { background: var(--accent-soft); } .account-menu summary { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 16px; border-radius: 999px; background: var(--brand-gradient); color: #fff; cursor: pointer; font-weight: 900; list-style: none; box-shadow: 0 12px 24px rgba(18, 175, 163, 0.2); } .account-menu summary::-webkit-details-marker { display: none; } .account-menu-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; display: grid; min-width: 190px; padding: 8px; border: 1px solid rgba(215, 226, 238, 0.9); border-radius: 14px; background: #fff; box-shadow: var(--shadow); } .account-menu-panel a, .account-menu-panel button { display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--navy); font: inherit; font-weight: 800; text-align: left; text-decoration: none; } .account-menu-panel a:hover, .account-menu-panel button:hover { background: var(--accent-soft); } main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 56px; } .page { display: none; } .page.is-active { display: block; } .home-page { display: block; } .home-page > * + * { margin-top: clamp(96px, 10vw, 150px); } #homePage > .how-it-works-section, #homePage > .partner-strip, #homePage > .garage-map-section, #homePage > .faq-section { margin-top: 150px !important; } .hero { min-height: calc(100vh - 118px); display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr); gap: 34px; align-items: stretch; position: relative; } .hero-copy { padding: 24px 0; } /* Charte graphique : les "eyebrows" (etiquettes de section) sont en JetBrains Mono, espacees, precedees d'un petit trait en degrade de marque - pas en Manrope gras comme avant l'integration de la charte. */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 18px; height: 1.5px; background: var(--brand-gradient); display: inline-block; flex-shrink: 0; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; } h1 { max-width: 760px; margin-bottom: 18px; font-size: clamp(2.5rem, 7vw, 5.6rem); line-height: 0.95; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); } h2 { margin-bottom: 10px; font-size: 1.28rem; } .hero p, .page-heading p, .confirmation p { color: var(--muted); font-size: 1.08rem; line-height: 1.6; } .hero-media { position: relative; display: flex; align-items: center; } .hero img { width: 100%; height: auto; max-height: min(76vh, 720px); object-fit: contain; border-radius: 18px; box-shadow: var(--shadow); background: #061727; } .hero-visual-panel { position: relative; width: 100%; height: 100%; min-height: min(600px, 72vh); display: flex; flex-direction: column; justify-content: flex-end; padding: 44px 36px 76px; overflow: hidden; border-radius: 18px; background: linear-gradient(140deg, var(--navy) 0%, var(--accent-dark) 58%, var(--violet) 132%); box-shadow: var(--shadow); } .hero-visual-mark { position: absolute; top: -56px; right: -64px; width: min(58%, 380px); opacity: 0.92; filter: drop-shadow(0 20px 40px rgba(4, 12, 22, 0.4)); pointer-events: none; } .hero-visual-flow { position: relative; z-index: 1; display: grid; gap: 10px; } .hero-flow-step { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 14px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); } .hero-flow-index { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #fff; color: var(--accent-dark); font-weight: 900; font-size: 0.92rem; } .hero-flow-step p { margin: 0; color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.3; } .hero-flow-connector { width: 2px; height: 12px; margin-left: 29px; background: rgba(255, 255, 255, 0.3); } .hero-card { position: absolute; right: 24px; bottom: -22px; display: grid; gap: 4px; min-width: 245px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.52); border-radius: 14px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 18px 38px rgba(18, 31, 43, 0.18); backdrop-filter: blur(16px); } .hero-card span, .hero-card small { color: var(--muted); } .hero-card strong { color: var(--accent-dark); font-size: 1.42rem; } .banner-slot-top { width: min(1180px, calc(100% - 32px)); margin: 20px auto 0; } .banner-link { position: relative; display: block; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--soft-shadow); } .banner-link img { display: block; width: 100%; max-height: 320px; object-fit: cover; } .banner-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(16, 32, 53, 0.72); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .hero-actions, .button-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } .primary-button, .secondary-button { border: 0; border-radius: var(--r-pill, 999px); padding: 13px 18px; min-height: 48px; font-weight: 800; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; } .primary-button { background: var(--brand-gradient); color: var(--navy); box-shadow: 0 14px 26px rgba(18, 175, 163, 0.25); } .primary-button:hover { transform: translateY(-2px); box-shadow: 0 26px 54px -18px rgba(67, 139, 205, 0.45); } .secondary-button { background: rgba(255, 255, 255, 0.8); color: var(--ink); border: 1px solid var(--line); } .secondary-button:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--soft-shadow); } /* Charte graphique : variantes de boutons Ghost et Danger (en plus de Primaire/Secondaire deja existants), pour l'espace garage et au-dela. */ .ghost-button { border: 0; border-radius: var(--r-pill, 999px); padding: 13px 18px; min-height: 48px; font-weight: 800; background: transparent; color: var(--muted); text-decoration: none; transition: background 160ms ease, color 160ms ease; } .ghost-button:hover { background: var(--soft); color: var(--ink); } .danger-button { border: 1px solid rgba(229, 72, 77, 0.3); border-radius: var(--r-pill, 999px); padding: 13px 18px; min-height: 48px; font-weight: 800; background: var(--red-soft); color: var(--red); text-decoration: none; transition: background 160ms ease, box-shadow 160ms ease; } .danger-button:hover { background: var(--red); color: #fff; } .trust-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; } .trust-title { width: 100%; max-width: none; margin: 0 0 24px; color: var(--navy); font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.08; } .trust-strip span { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 12px; border: 1px solid rgba(217, 225, 230, 0.86); border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: var(--navy); font-weight: 800; font-size: 0.9rem; } .partner-strip { display: grid; gap: 18px; margin: 0; padding: 8px 0; overflow: hidden; } .partner-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; } .partner-heading h2 { max-width: 620px; margin: 0; color: var(--navy); font-size: clamp(1.4rem, 2.4vw, 2rem); } .partner-carousel { position: relative; overflow: hidden; padding: 4px 0; } .partner-carousel::before, .partner-carousel::after { position: absolute; top: 0; z-index: 2; width: 80px; height: 100%; content: ""; pointer-events: none; } .partner-carousel::before { left: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), transparent); } .partner-carousel::after { right: 0; background: linear-gradient(270deg, rgba(255, 255, 255, 0.96), transparent); } .partner-track { display: flex; width: max-content; gap: 14px; animation: partner-scroll 28s linear infinite; } .partner-carousel:hover .partner-track { animation-play-state: paused; } .partner-logo { display: grid; place-items: center; min-width: 190px; min-height: 78px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: none; } .partner-logo img { display: block; max-width: 150px; max-height: 48px; object-fit: contain; filter: grayscale(100%); opacity: 0.75; transition: filter 200ms ease, opacity 200ms ease; } .partner-logo:hover img { filter: grayscale(0%); opacity: 1; } .how-it-works-section { display: grid; gap: 0; } .garage-map-section { display: grid; gap: 18px; margin: 0; } .garage-map-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; } .garage-map-heading h2 { max-width: 720px; margin: 0; color: var(--navy); font-size: clamp(1.55rem, 2.8vw, 2.35rem); } .garage-map-layout { display: grid; grid-template-columns: minmax(280px, 0.74fr) minmax(420px, 1.26fr); gap: 18px; align-items: stretch; } .garage-list { display: grid; gap: 12px; } .garage-card { position: relative; padding: 18px; overflow: hidden; border: 1px solid rgba(215, 226, 238, 0.9); border-radius: 16px; background: rgba(255, 255, 255, 0.88); box-shadow: var(--soft-shadow); } .garage-card::after { position: absolute; right: -34px; bottom: -42px; width: 110px; height: 110px; content: ""; border-radius: 999px; background: rgba(255, 173, 25, 0.14); } .garage-card h3 { margin-bottom: 6px; color: var(--navy); font-size: 1.18rem; } .garage-card p { margin-bottom: 12px; color: var(--muted); } .garage-card strong { color: var(--accent-dark); } .garage-distance { display: inline-flex; align-items: center; min-height: 30px; margin-bottom: 12px; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 900; } .google-map-card { min-height: 430px; overflow: hidden; border: 1px solid rgba(215, 226, 238, 0.9); border-radius: 18px; background: #dfe9f2; box-shadow: var(--soft-shadow); } .google-map-card iframe { display: block; width: 100%; height: 100%; min-height: 430px; border: 0; } .faq-section { display: grid; gap: 20px; margin: 0; } .faq-heading { max-width: 760px; } .faq-heading h2 { margin-bottom: 10px; color: var(--navy); font-size: clamp(1.7rem, 3vw, 2.65rem); } .faq-heading p:last-child { color: var(--muted); line-height: 1.6; } .faq-list { display: grid; gap: 12px; } .faq-list details { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: none; overflow: hidden; } .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; color: var(--navy); cursor: pointer; font-weight: 900; list-style: none; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; content: "+"; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 900; } .faq-list details[open] summary::after { content: "-"; background: var(--gold-soft); color: #875708; } .faq-list details p { margin: 0; padding: 0 20px 18px; color: var(--muted); line-height: 1.65; } .cta-banner { position: relative; overflow: hidden; padding: 52px 44px; border-radius: 26px; background: linear-gradient(125deg, var(--navy) 0%, var(--accent-dark) 58%, var(--violet) 140%); box-shadow: var(--shadow); } .cta-banner-mark { position: absolute; top: -44px; right: -34px; z-index: 0; width: 260px; opacity: 0.16; pointer-events: none; } .cta-banner-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .cta-banner-copy { max-width: 560px; } .cta-banner .eyebrow { color: rgba(255, 255, 255, 0.78); } .cta-banner-copy h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); } .cta-banner-copy p { margin: 0; color: rgba(255, 255, 255, 0.82); line-height: 1.6; } .cta-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; } .cta-banner-actions .secondary-button { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.3); } .cta-banner-actions .secondary-button:hover { background: rgba(255, 255, 255, 0.22); } /* ============================================================ Accueil v2 (charte graphique officielle, integree 2026-08-25) Composants de la page d'accueil calques sur le modele fourni dans "charte graphique/files/nexiamo-accueil-v4.html" : section hero plein-navy, "comment ca marche" en flow-grid, Roolezen en num-list, Garage/Secretariat/Fleet/Assurance, promesse en timeline verticale, ecosysteme NX en chaine. Copie adaptee a nos vraies fonctionnalites (pas un copie-colle du mockup), liens re-brancher vers les vraies pages du site. ============================================================ */ .on-dark-section { background: var(--navy); color: #fff; position: relative; } /* Charte graphique : respiration verticale generreuse a l'interieur de chaque section-recit de l'accueil (pas seulement entre les sections). */ .story-section { padding: 56px 0 80px; } /* Les sections-recit sont plein-large (hors du conteneur 1180px de
, comme .hero-void) - ce wrap recentre leur contenu, comme le .wrap du modele fourni. */ .content-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .grad-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow.on-dark { color: rgba(255, 255, 255, 0.6); } .section-head-v2 { max-width: 680px; margin: 0 auto 48px; text-align: center; } .section-head-v2 .eyebrow { justify-content: center; } .section-head-v2 h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.16; color: var(--navy); } .section-head-v2.on-dark h2 { color: #fff; } .section-head-v2 p { color: var(--muted); font-size: 0.98rem; max-width: 56ch; margin: 12px auto 0; } .section-head-v2.on-dark p { color: rgba(255, 255, 255, 0.68); } /* reveal / stagger on scroll (IntersectionObserver toggles .in-view) */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.in-view { opacity: 1; transform: translateY(0); } .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .stagger.in-view > * { opacity: 1; transform: translateY(0); } .stagger.in-view > *:nth-child(1) { transition-delay: 0.02s; } .stagger.in-view > *:nth-child(2) { transition-delay: 0.1s; } .stagger.in-view > *:nth-child(3) { transition-delay: 0.18s; } .stagger.in-view > *:nth-child(4) { transition-delay: 0.26s; } .stagger.in-view > *:nth-child(5) { transition-delay: 0.34s; } @media (prefers-reduced-motion: reduce) { .reveal, .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* HERO plein-navy (accueil v2) */ .hero-void { position: relative; width: 100%; background: var(--navy); color: #fff; padding: 96px 24px 64px; overflow: hidden; } .hero-void .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.35; animation: orb-drift 18s ease-in-out infinite; pointer-events: none; } .hero-void .orb1 { width: 420px; height: 420px; background: radial-gradient(circle, var(--accent), transparent 70%); top: -140px; left: -100px; } .hero-void .orb2 { width: 460px; height: 460px; background: radial-gradient(circle, var(--violet), transparent 70%); top: -100px; right: -140px; animation-delay: -6s; } .hero-void .orb3 { width: 380px; height: 380px; background: radial-gradient(circle, var(--blue), transparent 70%); bottom: -200px; left: 40%; animation-delay: -11s; } @keyframes orb-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -24px) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .hero-void .orb { animation: none; } } .hero-void-inner { position: relative; z-index: 2; text-align: center; max-width: 760px; margin: 0 auto; } .hero-void-inner .eyebrow { justify-content: center; margin-bottom: 20px; } .hero-void-inner h1 { font-size: clamp(2rem, 4.8vw, 3.25rem); line-height: 1.14; margin-bottom: 22px; color: #fff; max-width: none; } .hero-void-inner .lede { font-size: 1.08rem; color: rgba(255, 255, 255, 0.68); max-width: 56ch; margin: 0 auto 34px; line-height: 1.6; } .hero-void .hero-actions { justify-content: center; margin-top: 0; } .hero-void .secondary-button { background: rgba(255, 255, 255, 0.06); border: 1.5px solid var(--void-line); color: #fff; } .hero-void .secondary-button:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.1); } /* journey card (5 etapes qui defilent) */ .journey-wrap { position: relative; z-index: 2; max-width: 1020px; margin: 56px auto 0; padding: 0 12px; } .journey-card { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--void-line); border-radius: var(--r-lg); backdrop-filter: blur(18px); padding: 36px 24px 26px; } .journey-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; position: relative; } .journey-row::before { content: ""; position: absolute; top: 23px; left: 8%; right: 8%; height: 1px; background: var(--void-line); } .j-step { text-align: center; position: relative; opacity: 0.4; transition: opacity 0.5s var(--ease); } .j-step.active { opacity: 1; } .j-step .j-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--navy-2); border: 1.5px solid var(--void-line); display: flex; align-items: center; justify-content: center; padding: 11px; margin: 0 auto 12px; position: relative; z-index: 2; transition: border-color 0.5s var(--ease), background 0.5s var(--ease), box-shadow 0.5s var(--ease); } .j-step .j-ic svg { width: 100%; height: 100%; stroke: rgba(255, 255, 255, 0.6); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .j-step.active .j-ic { border-color: transparent; background: var(--brand-gradient); box-shadow: 0 0 0 6px rgba(67, 139, 205, 0.14); } .j-step.active .j-ic svg { stroke: var(--navy); } .j-label { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; } .j-step.active .j-label { color: #fff; } @media (max-width: 700px) { .journey-row { grid-template-columns: 1fr; gap: 22px; } .journey-row::before { display: none; } } /* icon-wrap reutilisable (icones a trait fin, degrade teal->violet) */ .icon-wrap { width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; padding: 11px; flex-shrink: 0; } .icon-wrap svg { width: 100%; height: 100%; stroke: var(--accent-dark); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .icon-wrap.on-dark { background: rgba(255, 255, 255, 0.06); } .icon-wrap.on-dark svg { stroke: rgba(255, 255, 255, 0.85); } .icon-wrap.solid { background: var(--brand-gradient); } .icon-wrap.solid svg { stroke: var(--navy); } /* concept : acteurs connectes (version simplifiee, sans SVG anime) */ .dotbg { position: relative; } .dotbg::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(16, 32, 53, 0.1) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black, transparent); mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black, transparent); pointer-events: none; } .dotbg > * { position: relative; z-index: 1; } .actor-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .actor-card { text-align: center; padding: 22px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: none; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .actor-card:hover { transform: translateY(-4px); box-shadow: var(--soft-shadow); } .actor-card .icon-wrap { margin: 0 auto 14px; } .actor-card h3 { font-size: 0.95rem; margin-bottom: 4px; color: var(--navy); } .actor-card p { font-size: 0.82rem; color: var(--muted); margin: 0; } @media (max-width: 920px) { .actor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .actor-grid { grid-template-columns: 1fr 1fr; } } /* flow-grid ("comment ca fonctionne") */ .flow-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .flow-grid::before { content: ""; position: absolute; top: 23px; left: 8%; right: 8%; height: 1.5px; background: var(--brand-gradient); opacity: 0.28; } .flow-grid .flow-step { position: relative; z-index: 1; background: #fff; border-radius: var(--r-md); padding: 22px 18px; box-shadow: none; border: 1px solid var(--line); transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease); } .flow-grid .flow-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); } .flow-grid .flow-step .icon-wrap { margin-bottom: 16px; } .flow-grid .flow-step h3 { font-size: 1rem; margin-bottom: 6px; color: var(--navy); } .flow-grid .flow-step p { color: var(--muted); font-size: 0.82rem; margin: 0; } @media (max-width: 920px) { .flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow-grid::before { display: none; } } @media (max-width: 560px) { .flow-grid { grid-template-columns: 1fr; } } /* num-list (Roolezen) */ .num-list { display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; } .num-item { display: flex; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); } .num-item:last-child { border-bottom: none; } .num-item .num { font-family: var(--font-mono); font-size: 13px; color: transparent; -webkit-text-stroke: 1px var(--muted); flex-shrink: 0; width: 30px; padding-top: 2px; font-weight: 700; } .num-item h3 { font-size: 1.02rem; margin-bottom: 4px; color: var(--navy); } .num-item p { font-size: 0.88rem; color: var(--muted); margin: 0; } .closing-line { text-align: center; margin-top: 44px; font-size: 1.18rem; font-weight: 600; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.4; color: var(--navy); } /* cards3 (Nexiamo Garage) */ .cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .b-card { background: #fff; border-radius: var(--r-md); padding: 28px 24px; box-shadow: none; border: 1px solid var(--line); transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease); } .b-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); } .b-card .icon-wrap { margin-bottom: 16px; } .b-card h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--navy); } .b-card p { font-size: 0.86rem; color: var(--muted); margin: 0; } @media (max-width: 820px) { .cards3 { grid-template-columns: 1fr; } } /* situation / compare (probleme -> solution) */ .situation { background: #fff; border-radius: var(--r-lg); padding: 32px; margin-top: 40px; text-align: center; border: 1px solid var(--line); } .situation .prompt { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); margin-bottom: 20px; } .compare-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; max-width: 760px; margin: 0 auto; } .compare-flow .arrow { font-family: var(--font-mono); color: var(--muted); font-size: 0.82rem; } .compare-bad, .compare-good { padding: 14px 16px; font-family: var(--font-mono); font-size: 0.82rem; border-radius: var(--r-sm); } .compare-bad { background: var(--red-soft); border: 1px solid rgba(229, 72, 77, 0.3); color: #b91c1c; text-decoration: line-through; } .compare-good { background: var(--accent-soft); border: 1px solid rgba(18, 175, 163, 0.3); color: var(--accent-dark); } @media (max-width: 700px) { .compare-flow { grid-template-columns: 1fr; } .compare-flow .arrow { display: none; } } /* secretariat IA (fond sombre) */ .secret-flow { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; } .secret-node { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--void-line); backdrop-filter: blur(10px); border-radius: var(--r-md); padding: 14px 24px; text-align: center; font-size: 0.92rem; color: #fff; min-width: 270px; display: flex; align-items: center; justify-content: center; gap: 12px; } .secret-node.grad { background: var(--brand-gradient); color: var(--navy); font-weight: 600; border: none; } .secret-node .icon-wrap { width: 30px; height: 30px; padding: 6px; } .secret-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 420px; } .secret-tags span { font-family: var(--font-mono); font-size: 0.72rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--void-line); color: rgba(255, 255, 255, 0.6); padding: 7px 14px; border-radius: var(--r-pill); } .secret-arrow { color: rgba(255, 255, 255, 0.4); font-family: var(--font-mono); font-size: 0.82rem; } .promise { text-align: center; margin-top: 40px; font-size: 1.18rem; font-weight: 600; color: #fff; max-width: 560px; margin-left: auto; margin-right: auto; } /* Texture de grain discrete (mockup fourni 2026-08-26) */ .grain { position: relative; } .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ ROOLEZEN - mockup telephone (fourni 2026-08-26) ============================================================ */ .roolezen-split { display: grid; grid-template-columns: 1fr 0.85fr; gap: 60px; align-items: center; } @media (max-width: 900px) { .roolezen-split { grid-template-columns: 1fr; } } .rl-steps { display: flex; flex-direction: column; } .rl-step { display: flex; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); } .rl-step:last-child { border-bottom: none; } .rl-step .rl-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rl-step .rl-ic svg { width: 18px; height: 18px; stroke: var(--accent-dark); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .rl-step h3 { font-size: 0.97rem; margin-bottom: 4px; color: var(--navy); } .rl-step p { font-size: 0.82rem; color: var(--muted); margin: 0; } .rl-phone-wrap { display: flex; justify-content: center; } .rl-phone { width: 246px; height: 504px; border-radius: 40px; padding: 10px; position: relative; background: linear-gradient(155deg, #2a2e33, #0a0c0e 40%, #0a0c0e 60%, #1d2126); box-shadow: 0 28px 54px -18px rgba(16, 42, 53, 0.4), 0 2px 0 rgba(255, 255, 255, 0.5) inset, 0 -2px 0 rgba(0, 0, 0, 0.4) inset; } .rl-screen { width: 100%; height: 100%; background: var(--soft); border-radius: 31px; overflow: hidden; position: relative; display: flex; flex-direction: column; } .rl-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 88px; height: 22px; background: #0a0c0e; border-radius: 0 0 13px 13px; z-index: 10; } .rl-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--navy); } .rl-body { flex: 1; padding: 10px 18px 0; } .rl-app-name { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 4px 0 2px; } .rl-title { font-family: var(--font-display); font-weight: 800; font-size: 1rem; margin-bottom: 14px; color: var(--navy); } .rl-vehicle { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 9px 12px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(16, 42, 53, 0.05); } .rl-vehicle .rv-ic { width: 28px; height: 28px; border-radius: 9px; background: var(--violet-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rl-vehicle .rv-ic svg { width: 14px; height: 14px; stroke: var(--violet); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; } .rl-vehicle .rv-t1 { font-size: 0.72rem; font-weight: 700; color: var(--navy); } .rl-vehicle .rv-t2 { font-family: var(--font-mono); font-size: 0.53rem; color: var(--muted); } .rl-label { font-family: var(--font-mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; } .rl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .rl-chip { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; padding: 7px 11px; border-radius: var(--r-pill); background: #fff; color: var(--muted); box-shadow: 0 1px 2px rgba(16, 42, 53, 0.05); } .rl-chip.sel { background: var(--brand-gradient); color: var(--navy); box-shadow: 0 6px 14px -6px rgba(18, 175, 163, 0.4); } .rl-loc { display: flex; align-items: center; gap: 8px; font-size: 0.625rem; color: var(--muted); margin-bottom: 14px; } .rl-loc svg { width: 13px; height: 13px; stroke: var(--accent); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .rl-btn { background: var(--brand-gradient); color: var(--navy); text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; padding: 12px; border-radius: 14px; box-shadow: 0 10px 22px -8px rgba(18, 175, 163, 0.45); margin-bottom: 12px; } .rl-result { background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 20px -10px rgba(16, 42, 53, 0.18); border: 1px solid rgba(18, 175, 163, 0.18); } .rl-result .rr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .rl-result .rr-name { font-size: 0.69rem; font-weight: 700; color: var(--navy); } .rl-result .rr-badge { font-family: var(--font-mono); font-size: 0.47rem; font-weight: 700; background: rgba(18, 175, 163, 0.14); color: #0c7a70; padding: 2.5px 7px; border-radius: var(--r-pill); } .rl-result .rr-sub { font-size: 0.56rem; color: var(--muted); } /* ============================================================ PAGE TARIFS (nexiamo-garage mockup, integre 2026-08-26) ============================================================ */ .hero-split { position: relative; background: var(--navy); color: #fff; padding: 88px 24px; overflow: hidden; } .hero-split-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } @media (max-width: 920px) { .hero-split-grid { grid-template-columns: 1fr; } } .hero-split h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.15; margin-bottom: 22px; color: #fff; } .hero-split .lede { font-size: 1.03rem; color: rgba(255, 255, 255, 0.68); max-width: 52ch; margin-bottom: 32px; line-height: 1.6; } .hero-split .hero-note { font-family: var(--font-mono); font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); } /* steps (Comment ca marche) */ .steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; position: relative; } .steps-grid::before { content: ""; position: absolute; top: 26px; left: 10%; right: 10%; height: 1.5px; background: var(--brand-gradient); opacity: 0.3; } @media (max-width: 820px) { .steps-grid { grid-template-columns: 1fr; } .steps-grid::before { display: none; } } .step-card { background: #fff; border-radius: var(--r-lg); padding: 28px 26px; border: 1px solid var(--line); position: relative; z-index: 1; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); } .step-card .s-num { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-gradient); color: var(--navy); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .step-card h3 { font-size: 1.03rem; margin-bottom: 8px; color: var(--navy); } .step-card p { font-size: 0.84rem; color: var(--muted); margin: 0; } /* compare-strip (Pourquoi Nexiamo) */ .compare-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); } @media (max-width: 760px) { .compare-strip { grid-template-columns: 1fr; } } .cs-col { background: #fff; padding: 36px 32px; } .cs-col.bad { background: var(--red-soft); } .cs-col.good { background: var(--accent-soft); } .cs-col .tag { font-family: var(--font-mono); font-size: 0.69rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; display: block; } .cs-col.bad .tag { color: var(--red); } .cs-col.good .tag { color: var(--accent-dark); } .cs-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding: 0; } .cs-col li { font-size: 0.875rem; color: var(--ink); padding-left: 22px; position: relative; } .cs-col.bad li::before { content: "✕"; position: absolute; left: 0; color: var(--red); font-size: 0.75rem; top: 2px; } .cs-col.good li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-dark); font-size: 0.75rem; top: 2px; } /* feature rows (Fonctionnalites) */ .feat-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: center; padding: 48px 0; border-bottom: 1px solid var(--line); } .feat-row:last-child { border-bottom: none; } .feat-row:nth-child(even) { grid-template-columns: 1.1fr 0.9fr; } .feat-row:nth-child(even) .feat-visual { order: -1; } @media (max-width: 860px) { .feat-row, .feat-row:nth-child(even) { grid-template-columns: 1fr; } .feat-row:nth-child(even) .feat-visual { order: 0; } } .feat-text h3 { font-size: 1.3rem; margin: 16px 0 12px; color: var(--navy); } .feat-text p { color: var(--muted); font-size: 0.94rem; max-width: 44ch; margin: 0; } .feat-list { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; padding: 0; } .feat-list li { font-size: 0.84rem; color: var(--muted); padding-left: 20px; position: relative; } .feat-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--brand-gradient); border-radius: 1px; } .feat-visual { background: #fff; border-radius: var(--r-lg); padding: 26px; border: 1px solid var(--line); } /* .v-track/.vt-* est concu pour un fond sombre (fleet-dash) ; sur un .feat-visual (fond blanc), le texte/contour blancs sont illisibles. */ .feat-visual .vt-dot { border-color: var(--line); } .feat-visual .vt-step { gap: 12px; } .feat-visual .vt-dot { width: 13px; height: 13px; } .feat-visual .vt-label { font-size: 0.81rem; color: var(--muted); } .feat-visual .vt-step.done .vt-label, .feat-visual .vt-step.current .vt-label { color: var(--navy); } /* mini agenda visual */ .mini-cal { display: flex; flex-direction: column; gap: 8px; } .mini-cal-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--soft); } .mini-cal-row.hl { background: var(--accent-soft); border: 1px solid rgba(18, 175, 163, 0.2); } .mini-cal-row .t { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); width: 44px; flex-shrink: 0; } .mini-cal-row .lbl { font-size: 0.81rem; color: var(--ink); } /* mini call/flotte log */ .mini-log { display: flex; flex-direction: column; } .mini-log-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 0.81rem; color: var(--ink); } .mini-log-row:last-child { border-bottom: none; } .mini-log-row .badge { font-family: var(--font-mono); font-size: 0.66rem; padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-dark); white-space: nowrap; } /* mobile app phone mockup (reutilise le cadre .rl-phone/.rl-screen) */ .pmock-greet { font-size: 0.56rem; color: var(--muted); margin-top: 3px; } .pmock-name { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; margin-bottom: 11px; color: var(--navy); } .pmock-stats { display: flex; gap: 6px; margin-bottom: 12px; } .pmock-stat { flex: 1; background: #fff; border-radius: 10px; padding: 8px 6px; box-shadow: 0 1px 2px rgba(16, 42, 53, 0.05), 0 8px 16px -10px rgba(16, 42, 53, 0.14); } .pmock-stat .ic { width: 17px; height: 17px; border-radius: 5px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } .pmock-stat .ic svg { width: 9px; height: 9px; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .pmock-stat.teal .ic { background: rgba(18, 175, 163, 0.14); } .pmock-stat.teal .ic svg { stroke: var(--accent); } .pmock-stat.warn .ic { background: rgba(245, 165, 36, 0.16); } .pmock-stat.warn .ic svg { stroke: var(--amber); } .pmock-stat.violet .ic { background: rgba(117, 103, 248, 0.14); } .pmock-stat.violet .ic svg { stroke: var(--violet); } .pmock-stat .v { font-family: var(--font-mono); font-size: 0.84rem; font-weight: 700; color: var(--navy); } .pmock-stat .l { font-size: 0.375rem; color: var(--muted); margin-top: 1px; } .pmock-label { font-family: var(--font-mono); font-size: 0.47rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 7px; } .pmock-row { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 7px 8px; margin-bottom: 6px; box-shadow: 0 1px 2px rgba(16, 42, 53, 0.05); } .pmock-row .ric { width: 23px; height: 23px; border-radius: 7px; background: rgba(18, 175, 163, 0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pmock-row .ric svg { width: 11px; height: 11px; stroke: var(--accent); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } .pmock-row.warn .ric { background: rgba(245, 165, 36, 0.16); } .pmock-row.warn .ric svg { stroke: var(--amber); } .pmock-row .rt { flex: 1; min-width: 0; } .pmock-row .rt .t1 { font-size: 0.53rem; font-weight: 700; color: var(--navy); } .pmock-row .rt .t2 { font-size: 0.44rem; color: var(--muted); } .pmock-badge { font-family: var(--font-mono); font-size: 0.4rem; font-weight: 700; padding: 2.5px 6px; border-radius: var(--r-pill); background: rgba(18, 175, 163, 0.14); color: #0c7a70; white-space: nowrap; flex-shrink: 0; } .pmock-badge.warn { background: rgba(245, 165, 36, 0.18); color: #8a5a0a; } .pmock-tabbar-wrap { padding: 0 10px 10px; } .pmock-tabbar { display: flex; justify-content: space-around; align-items: center; padding: 7px 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); box-shadow: 0 8px 20px -10px rgba(16, 42, 53, 0.25); } .pmock-tab { width: 21px; height: 21px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .pmock-tab svg { width: 11px; height: 11px; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: var(--muted); } .pmock-tab.active { background: var(--brand-gradient); } .pmock-tab.active svg { stroke: #fff; } /* ============================================================ GARAGE - console d'appel animee (mockup fourni 2026-08-26) ============================================================ */ .garage-split { display: grid; grid-template-columns: 1fr 0.85fr; gap: 56px; align-items: center; margin-top: 48px; } @media (max-width: 900px) { .garage-split { grid-template-columns: 1fr; } } .garage-split .situation { margin-top: 0; text-align: left; padding: 32px; } .garage-split .compare-flow { grid-template-columns: 1fr; gap: 12px; max-width: none; margin: 0; } .garage-split .compare-flow .arrow { text-align: center; font-size: 0.75rem; } .console { background: var(--navy); border-radius: var(--r-lg); padding: 24px; box-shadow: 0 24px 48px -16px rgba(16, 42, 53, 0.35); position: relative; overflow: hidden; } .console-head { font-family: var(--font-mono); font-size: 0.69rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--void-line); padding-bottom: 14px; margin-bottom: 6px; position: relative; z-index: 1; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse-dot 1.6s infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } .console-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed var(--void-line); opacity: 0.28; transform: translateX(-6px); transition: opacity 0.5s, transform 0.5s; position: relative; z-index: 1; } .console-row:last-child { border-bottom: none; } .console-row.active { opacity: 1; transform: translateX(0); } .console-row .icon-wrap { width: 32px; height: 32px; padding: 7px; flex-shrink: 0; background: rgba(255, 255, 255, 0.06); } .console-row .icon-wrap svg { stroke: rgba(255, 255, 255, 0.55); } .console-row.active .icon-wrap { background: var(--brand-gradient); } .console-row.active .icon-wrap svg { stroke: var(--navy); } .cr-t1 { font-size: 0.84rem; color: #fff; font-weight: 600; } .cr-t2 { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); margin-top: 2px; } .console-row.active .cr-t2 { color: var(--accent); } .console-result { margin-top: 14px; font-family: var(--font-mono); font-size: 0.75rem; background: rgba(18, 175, 163, 0.1); border: 1px solid rgba(18, 175, 163, 0.28); color: var(--accent); border-radius: var(--r-sm); padding: 12px 14px; opacity: 0; transition: opacity 0.5s; position: relative; z-index: 1; } .console-result.show { opacity: 1; } /* ============================================================ SECRETARIAT IA - visuel anime (mockup fourni 2026-08-26) ============================================================ */ .ia-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: center; position: relative; z-index: 1; } @media (max-width: 900px) { .ia-split { grid-template-columns: 1fr; } } .ia-text .promise { text-align: left; margin: 22px 0 0; font-size: 1.25rem; max-width: none; } .ia-benefits { list-style: none; display: flex; flex-direction: column; gap: 13px; margin: 22px 0 0; padding: 0; } .ia-benefits li { display: flex; gap: 11px; align-items: flex-start; color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; } .ia-benefits li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-gradient); margin-top: 7px; flex-shrink: 0; } .ia-visual { display: flex; flex-direction: column; align-items: center; } .ia-call-label { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .ia-call-label svg { width: 13px; height: 13px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ia-wave { display: flex; align-items: center; gap: 3px; height: 38px; margin-bottom: 4px; } .ia-wave span { width: 3px; border-radius: 2px; background: var(--brand-gradient); display: block; animation: wave-bar 1.1s ease-in-out infinite; } @keyframes wave-bar { 0%, 100% { transform: scaleY(0.35); opacity: 0.7; } 50% { transform: scaleY(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ia-wave span { animation: none; transform: scaleY(0.7); } } .ia-connector { position: relative; width: 1.5px; height: 22px; background: linear-gradient(var(--accent), transparent); } .ia-connector.down { background: linear-gradient(transparent, var(--accent)); } .ia-flow-dot { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px 2px rgba(18, 175, 163, 0.65); animation: flow-down 1.8s linear infinite; opacity: 0; } @keyframes flow-down { 0% { top: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ia-flow-dot { display: none; } } .ia-orb-wrap { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; margin: 2px 0; } .ia-orb-wrap::before { content: ""; position: absolute; inset: -26px; background: radial-gradient(circle, rgba(18, 175, 163, 0.22), transparent 72%); filter: blur(8px); z-index: 0; } .hub-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid rgba(18, 175, 163, 0.25); transform: translate(-50%, -50%); animation: pulse-ring 3.2s var(--ease) infinite; } .ia-orb-wrap .hub-ring.r1, .ia-orb-wrap .hub-ring.r2, .ia-orb-wrap .hub-ring.r3 { width: 76px; height: 76px; } .ia-orb-wrap .hub-ring.r2 { animation-delay: 1.1s; } .ia-orb-wrap .hub-ring.r3 { animation-delay: 2.2s; } @keyframes pulse-ring { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hub-ring { animation: none; opacity: 0.25; } } .ia-orb { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 44px 4px rgba(18, 175, 163, 0.4); position: relative; z-index: 2; } .ia-orb svg { stroke: var(--navy); width: 28px; height: 28px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ia-orb-label { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-top: 10px; } .ia-tags-wrap { width: 100%; max-width: 420px; margin-top: 6px; } .ia-tags { display: flex; justify-content: space-between; gap: 6px; } .ia-tag-item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; } .ia-tag-item .stem { width: 1px; height: 14px; background: var(--void-line); animation: stem-glow 8s ease-in-out infinite; } .ia-tag-chip { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.53rem; font-weight: 600; padding: 6px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.55); border: 1px solid var(--void-line); white-space: nowrap; animation: tag-glow 8s ease-in-out infinite; text-align: center; } .ia-tag-chip svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } @keyframes tag-glow { 0%, 84%, 100% { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.55); border-color: var(--void-line); box-shadow: none; } 90%, 96% { background: var(--brand-gradient); color: var(--navy); border-color: transparent; box-shadow: 0 0 18px 2px rgba(18, 175, 163, 0.5); } } @keyframes stem-glow { 0%, 84%, 100% { background: var(--void-line); box-shadow: none; } 90%, 96% { background: var(--accent); box-shadow: 0 0 6px 1px rgba(18, 175, 163, 0.6); } } .ia-tag-item:nth-child(1) .ia-tag-chip, .ia-tag-item:nth-child(1) .stem { animation-delay: 0s; } .ia-tag-item:nth-child(2) .ia-tag-chip, .ia-tag-item:nth-child(2) .stem { animation-delay: 1.6s; } .ia-tag-item:nth-child(3) .ia-tag-chip, .ia-tag-item:nth-child(3) .stem { animation-delay: 3.2s; } .ia-tag-item:nth-child(4) .ia-tag-chip, .ia-tag-item:nth-child(4) .stem { animation-delay: 4.8s; } .ia-tag-item:nth-child(5) .ia-tag-chip, .ia-tag-item:nth-child(5) .stem { animation-delay: 6.4s; } @media (prefers-reduced-motion: reduce) { .ia-tag-chip, .ia-tag-item .stem { animation: none; } } .ia-result { margin-top: 20px; display: flex; align-items: center; gap: 13px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(18, 175, 163, 0.28); border-radius: var(--r-md); padding: 14px 20px; backdrop-filter: blur(8px); max-width: 340px; animation: result-pulse 8s ease-in-out infinite; } @keyframes result-pulse { 0%, 88%, 100% { box-shadow: none; border-color: rgba(18, 175, 163, 0.28); } 96% { box-shadow: 0 0 26px 2px rgba(18, 175, 163, 0.35); border-color: rgba(18, 175, 163, 0.65); } } @media (prefers-reduced-motion: reduce) { .ia-result { animation: none; } } .ia-result .icon-wrap { flex-shrink: 0; } .ia-result .rt1 { font-size: 0.84rem; font-weight: 600; color: #fff; } .ia-result .rt2 { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); margin-top: 2px; } /* fleet */ .fleet-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 48px; } .fleet-col { background: #fff; border-radius: var(--r-md); padding: 24px 18px; box-shadow: none; border: 1px solid var(--line); transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease); } .fleet-col:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); } .fleet-col .icon-wrap { margin-bottom: 12px; width: 40px; height: 40px; padding: 9px; } .fleet-col h3 { font-size: 0.92rem; margin-bottom: 6px; color: var(--navy); } .fleet-col p { font-size: 0.78rem; color: var(--muted); margin: 0; } @media (max-width: 920px) { .fleet-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .fleet-cols { grid-template-columns: 1fr; } } .fleet-dash { background: var(--navy); border: 1px solid var(--void-line); border-radius: var(--r-lg); padding: 28px; max-width: 760px; margin: 0 auto; box-shadow: 0 30px 60px -24px rgba(11, 14, 26, 0.35); } .fleet-dash-head { font-family: var(--font-mono); font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; display: flex; justify-content: space-between; } .fleet-dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; } .fleet-dash-stat { background: var(--navy-2); border-radius: var(--r-sm); padding: 16px; text-align: center; border: 1px solid var(--void-line); } .fleet-dash-stat .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .fleet-dash-stat .val { font-family: var(--font-mono); color: #fff; font-size: 1.25rem; font-weight: 500; } .fleet-dash-stat .lbl { font-family: var(--font-mono); font-size: 0.62rem; color: rgba(255, 255, 255, 0.5); margin-top: 4px; } .fleet-dash-vehicle { background: var(--navy-2); border: 1px solid var(--void-line); border-radius: var(--r-sm); padding: 20px; font-family: var(--font-mono); font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); } .fleet-dash-vehicle .title { color: #fff; font-size: 0.92rem; font-weight: 600; margin-bottom: 10px; font-family: var(--font-display); } .fleet-dash-vehicle .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--void-line); } .fleet-dash-vehicle .row:last-child { border-bottom: none; } @media (max-width: 600px) { .fleet-dash-stats { grid-template-columns: 1fr 1fr; } } /* ============================================================ FLEET v2 - donut + suivi vehicule (mockup fourni 2026-08-26) ============================================================ */ .fleet-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; margin-top: 10px; } @media (max-width: 900px) { .fleet-split { grid-template-columns: 1fr; } } .fleet-steps { display: flex; flex-direction: column; } .fleet-dash-top { display: flex; gap: 28px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; } .fleet-donut-wrap { position: relative; width: 132px; height: 132px; flex-shrink: 0; } .fleet-donut-wrap .center-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .fleet-donut-wrap .center-txt .n { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 700; color: #fff; } .fleet-donut-wrap .center-txt .l { font-family: var(--font-mono); font-size: 0.5rem; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.04em; } .fleet-legend { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 170px; } .fl-item { display: flex; align-items: center; gap: 9px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); } .fl-item .dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .fl-item .fl-count { margin-left: auto; font-family: var(--font-mono); color: #fff; font-weight: 600; } .v-track { display: flex; justify-content: space-between; position: relative; margin: 16px 0 4px; } .v-track::before { content: ""; position: absolute; top: 5px; left: 5%; right: 5%; height: 1.5px; background: var(--void-line); } .vt-step { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; z-index: 1; } .vt-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--navy-2); border: 1.5px solid var(--void-line); } .vt-step.done .vt-dot { background: var(--brand-gradient); border-color: transparent; } .vt-step.current .vt-dot { background: var(--brand-gradient); border-color: transparent; box-shadow: 0 0 0 4px rgba(18, 175, 163, 0.18); } .vt-label { font-size: 0.56rem; color: rgba(255, 255, 255, 0.55); text-align: center; white-space: nowrap; } .vt-step.done .vt-label, .vt-step.current .vt-label { color: #fff; } /* ============================================================ ASSURANCE v2 (mockup fourni 2026-08-26) ============================================================ */ .assure-hero { display: flex; flex-direction: column; align-items: center; } .assure-sources-row { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } .assure-source-card { background: #fff; border-radius: var(--r-lg); padding: 20px 26px; box-shadow: var(--soft-shadow); border: 1px solid var(--line); display: flex; align-items: center; gap: 14px; min-width: 230px; transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease); } .assure-source-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); } .assure-source-card .as-title { font-size: 0.875rem; font-weight: 700; color: var(--navy); } .assure-source-card .as-sub { font-size: 0.72rem; color: var(--muted); margin-top: 2px; } .assure-converge { display: block; margin: 0 auto; } .assure-note { text-align: center; max-width: 600px; margin: 36px auto 0; color: var(--muted); font-size: 0.9rem; } /* ============================================================ PROMESSE v2 - trajet anime en serpentin (mockup 2026-08-26) ============================================================ */ .promise-journey { position: relative; width: 100%; max-width: 840px; margin: 0 auto; display: block; } .promise-journey::before { content: ""; display: block; padding-top: 34%; } .promise-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pj-stop { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 7px; width: 118px; z-index: 2; } .pj-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-2); border: 1.5px solid var(--void-line); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.45); flex-shrink: 0; } .pj-ic svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pj-stop.final .pj-ic { background: var(--brand-gradient); border-color: transparent; box-shadow: 0 0 0 5px rgba(18, 175, 163, 0.15), 0 10px 22px -8px rgba(0, 0, 0, 0.45); } .pj-stop.final .pj-ic svg { stroke: var(--navy); } .pj-num { font-family: var(--font-mono); font-size: 0.56rem; color: var(--accent); letter-spacing: 0.04em; } .pj-label { font-size: 0.69rem; font-weight: 600; color: #fff; text-align: center; line-height: 1.3; } @media (max-width: 760px) { .promise-desktop { display: none; } .promise-mobile { display: block; } } @media (min-width: 761px) { .promise-mobile { display: none; } } /* ============================================================ ECOSYSTEME v2 - banniere Orchestration + 4 cartes (2026-08-26) ============================================================ */ .eco-banner { background: linear-gradient(135deg, var(--navy), var(--navy-2)); border-radius: var(--r-lg); padding: 32px 36px; margin-bottom: 22px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; box-shadow: 0 24px 48px -18px rgba(16, 42, 53, 0.35); position: relative; overflow: hidden; } .eco-banner::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(117, 103, 248, 0.25), transparent 70%); top: -80px; right: -40px; filter: blur(6px); } .eco-banner img { width: 52px; height: 52px; flex-shrink: 0; position: relative; z-index: 1; } .eco-banner .eb-text { position: relative; z-index: 1; flex: 1; min-width: 220px; } .eco-banner .eb-tag { font-family: var(--font-mono); font-size: 0.69rem; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 6px; } .eco-banner h3 { color: #fff; font-size: 1.19rem; margin-bottom: 6px; } .eco-banner p { color: rgba(255, 255, 255, 0.55); font-size: 0.84rem; max-width: 56ch; margin: 0; } .cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } @media (max-width: 920px) { .cards4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .cards4 { grid-template-columns: 1fr; } } /* assurance */ .assure-sources { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; } .assure-sources .src { font-family: var(--font-mono); font-size: 0.78rem; padding: 9px 16px; border-radius: var(--r-pill); border: 1px dashed var(--line); color: var(--muted); } .assure-flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; } .assure-flow .node { font-family: var(--font-mono); font-size: 0.78rem; background: #fff; border-radius: var(--r-pill); border: 1px solid var(--line); padding: 9px 16px; } .assure-flow .arrow { color: var(--muted); } /* action panels (agenda + journal d'appels) */ .action-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 800px) { .action-panels { grid-template-columns: 1fr; } } .action-panel { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--void-line); border-radius: var(--r-lg); backdrop-filter: blur(12px); padding: 24px; } .action-panel-head { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; } .agenda-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--void-line); font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); align-items: center; } .agenda-row:last-child { border-bottom: none; } .agenda-row .time { font-family: var(--font-mono); color: var(--accent); width: 48px; flex-shrink: 0; } .call-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--void-line); font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); } .call-row:last-child { border-bottom: none; } .call-row .status { font-family: var(--font-mono); font-size: 0.66rem; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(18, 175, 163, 0.16); color: var(--accent); white-space: nowrap; height: fit-content; } /* timeline verticale (promesse) */ .timeline-vert { max-width: 440px; margin: 0 auto; position: relative; padding-left: 38px; } .timeline-vert::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 1.5px; background: linear-gradient(var(--accent), var(--violet)); opacity: 0.4; } .t-item { position: relative; padding-bottom: 30px; } .t-item:last-child { padding-bottom: 0; } .t-item::before { content: ""; position: absolute; left: -38px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-gradient); box-shadow: 0 0 0 5px rgba(67, 139, 205, 0.1); } .t-item .t-text { color: #fff; font-size: 0.94rem; font-weight: 500; } /* ecosysteme NX (chaine) */ .eco-chain { display: flex; flex-direction: column; max-width: 620px; margin: 0 auto; } .eco-item { display: flex; align-items: center; gap: 18px; padding: 16px 4px; border-bottom: 1px solid var(--line); transition: padding-left 0.3s var(--ease); } .eco-item:hover { padding-left: 10px; } .eco-item:last-child { border-bottom: none; } .eco-item .tag { font-family: var(--font-mono); font-size: 0.72rem; background: var(--navy); color: #fff; padding: 7px 14px; border-radius: var(--r-pill); flex-shrink: 0; min-width: 150px; text-align: center; } .eco-item .desc { font-size: 0.86rem; color: var(--muted); } @media (max-width: 620px) { .eco-item { flex-direction: column; align-items: flex-start; gap: 8px; } .eco-item .tag { min-width: 0; } } @keyframes partner-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } } .value-grid, .result-grid, .upload-layout { display: grid; gap: 18px; } .value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; } .panel { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(217, 225, 230, 0.86); border-radius: 16px; box-shadow: var(--soft-shadow); backdrop-filter: blur(10px); } .value-grid article { padding: 22px; position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: none; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .value-grid article:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 34px rgba(16, 32, 53, 0.1); } .how-it-works-section .value-grid { position: relative; } .how-it-works-section .value-grid::before { content: ""; position: absolute; top: 44px; left: 0; right: 0; z-index: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px); } .how-it-works-section .value-grid article { z-index: 1; } .pillars-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .value-grid article::after { position: absolute; right: -42px; bottom: -48px; width: 126px; height: 126px; content: ""; border-radius: 999px; background: rgba(18, 175, 163, 0.11); } .value-grid article:nth-child(2)::after { background: rgba(50, 103, 177, 0.12); } .value-grid article:nth-child(3)::after { background: rgba(255, 173, 25, 0.17); } .value-grid span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 900; margin-bottom: 18px; box-shadow: 0 6px 14px rgba(16, 32, 53, 0.1); } .value-grid span svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } .value-grid article:nth-child(2) span { background: var(--blue-soft); color: var(--blue); } .value-grid article:nth-child(3) span { background: var(--gold-soft); color: #9a5a0d; } .value-grid article:nth-child(4) span { background: var(--violet-soft); color: var(--violet); } .value-grid article:nth-child(5) span { background: var(--green-soft); color: var(--green); } .value-grid article:nth-child(6) span { background: var(--red-soft); color: var(--red); } .value-grid article:nth-child(8) span { background: var(--blue-soft); color: var(--blue); } .value-grid article:nth-child(9) span { background: var(--gold-soft); color: #9a5a0d; } .pillars-section .pillars-grid article span { background: transparent; border: 1.5px solid currentColor; box-shadow: none; } .pillars-section .pillars-grid article:nth-child(2) span { color: #9a5a0d; } .pillars-section .pillars-grid article:nth-child(3) span { color: var(--violet); } .pillars-section .pillars-grid article:nth-child(4) span { color: var(--green); } .value-grid p, .panel p, .checklist li, .repair-card p, .quote-form label { color: var(--muted); line-height: 1.5; } .testimonial-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; } .testimonial-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: none; padding: 26px; display: grid; gap: 14px; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .testimonial-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 34px rgba(16, 32, 53, 0.1); } .testimonial-stars { color: var(--gold); font-size: 0.98rem; letter-spacing: 2px; } .testimonial-quote { color: var(--navy); font-size: 1.02rem; font-style: italic; line-height: 1.6; margin: 0; } .testimonial-author { display: grid; gap: 2px; } .testimonial-author strong { color: var(--navy); } .testimonial-author span { color: var(--muted); font-size: 0.88rem; } .blog-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; } .blog-card { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(217, 225, 230, 0.86); border-radius: 16px; box-shadow: var(--soft-shadow); backdrop-filter: blur(10px); overflow: hidden; display: grid; } .blog-card img { width: 100%; height: 180px; object-fit: cover; } .blog-card > div { display: grid; gap: 10px; padding: 22px; } .blog-card h2 { color: var(--navy); font-size: 1.2rem; margin: 0; } .blog-card p { color: var(--muted); line-height: 1.5; margin: 0; } .blog-article { display: grid; gap: 18px; margin: 20px auto; max-width: 760px; } .blog-article img { width: 100%; max-height: 420px; border-radius: 16px; object-fit: cover; } .blog-article h1 { color: var(--navy); margin: 0; } .blog-article #blogArticleBody { display: grid; gap: 16px; color: var(--ink); line-height: 1.7; } .blog-article #blogArticleBody h2, .blog-article #blogArticleBody h3 { color: var(--navy); } .blog-article #blogArticleBody img { width: 100%; border-radius: 12px; } .blog-article #blogArticleBody ul { padding-left: 22px; } /* ---------- Pages légales (CGU / CGV / mentions légales / confidentialité) ---------- */ .legal-doc-switcher { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 auto; max-width: 1040px; } .legal-doc-switcher a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 0.85rem; font-weight: 700; text-decoration: none; transition: all 0.15s ease; } .legal-doc-switcher a:hover { border-color: var(--accent); color: var(--accent-dark); } .legal-doc-switcher a.is-active { background: var(--brand-gradient); border-color: transparent; color: #fff; box-shadow: var(--soft-shadow); } .legal-hero { position: relative; display: grid; gap: 16px; margin: 0 auto; max-width: 1040px; padding: 40px 44px; border-radius: 28px; background: radial-gradient(circle at 100% 0%, rgba(255, 173, 25, 0.24), transparent 42%), radial-gradient(circle at 0% 100%, rgba(0, 119, 204, 0.24), transparent 40%), linear-gradient(135deg, var(--navy), var(--accent-dark)); color: #fff; overflow: hidden; } .legal-hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, 0.14); font-size: 1.6rem; } .legal-hero .eyebrow { color: var(--gold); margin: 0; } .legal-hero h1 { color: #fff; margin: 0; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.08; max-width: 720px; } .legal-hero-lead { color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 640px; font-size: 1.05rem; line-height: 1.6; } .legal-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; } .legal-meta-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.82rem; font-weight: 600; color: #fff; } .legal-print-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; border: none; background: #fff; color: var(--accent-dark); font-size: 0.85rem; font-weight: 800; cursor: pointer; transition: transform 0.15s ease; } .legal-print-btn:hover { transform: translateY(-1px); } .legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; margin: 0 auto; max-width: 1040px; align-items: start; } .legal-toc { position: sticky; top: 24px; display: grid; gap: 10px; padding: 22px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--soft-shadow); } .legal-toc-title { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .legal-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; max-height: 62vh; overflow-y: auto; } .legal-toc a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--muted); font-size: 0.86rem; font-weight: 600; text-decoration: none; line-height: 1.35; border-left: 2px solid transparent; transition: all 0.15s ease; } .legal-toc a:hover { color: var(--accent-dark); background: var(--accent-soft); } .legal-toc a.is-active { color: var(--accent-dark); background: var(--accent-soft); border-left-color: var(--accent); font-weight: 800; } .legal-content { display: grid; gap: 20px; margin: 0 0 12px; } .legal-article { display: grid; gap: 14px; padding: 28px 30px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--soft-shadow); scroll-margin-top: 24px; } .legal-article-head { display: flex; align-items: baseline; gap: 14px; } .legal-article-num { flex: none; font-size: 0.8rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 11px; } .legal-article h2 { color: var(--navy); font-size: 1.22rem; margin: 0; } .legal-article p, .legal-article li { color: var(--ink); line-height: 1.7; } .legal-article ul { display: grid; gap: 7px; padding-left: 22px; margin: 0; } .legal-article strong { color: var(--navy); } .legal-article a { color: var(--accent); font-weight: 700; } .legal-callout { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border-left: 4px solid var(--gold); background: var(--gold-soft); } .legal-callout strong { color: var(--navy); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } .legal-callout p { margin: 0; color: var(--ink); } .legal-callout-info { border-left-color: var(--accent); background: var(--accent-soft); } .legal-footer-note { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px; margin: 8px 0 40px; border-radius: 16px; background: var(--soft); border: 1px dashed var(--line); color: var(--muted); font-size: 0.88rem; line-height: 1.55; } .legal-back-to-top { position: fixed; right: 26px; bottom: 26px; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--brand-gradient); color: #fff; font-size: 1.2rem; box-shadow: var(--shadow); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: all 0.2s ease; z-index: 40; } .legal-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (max-width: 980px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } .legal-toc ol { max-height: none; } .legal-hero { padding: 30px 24px; } } @media print { .topbar, .site-footer, .legal-doc-switcher, .legal-toc, .legal-print-btn, .legal-back-to-top { display: none !important; } .legal-hero { background: none; color: var(--ink); padding: 0; } .legal-hero h1, .legal-hero .eyebrow { color: var(--navy); } .legal-hero-lead { color: var(--muted); } .legal-layout { grid-template-columns: 1fr; } .legal-article { box-shadow: none; border: none; padding: 0; break-inside: avoid; } } .page-heading { margin: 26px 0 24px; max-width: 860px; } .page-heading.compact h1 { font-size: clamp(2.2rem, 5vw, 4rem); } .upload-layout { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr); align-items: start; } .panel { padding: 24px; } .dropzone { display: grid; place-items: center; gap: 8px; min-height: 245px; padding: 28px; border: 2px dashed rgba(18, 175, 163, 0.36); border-radius: 16px; background: linear-gradient(135deg, rgba(228, 241, 255, 0.9), rgba(255, 243, 216, 0.78)), #f9fbfb; text-align: center; transition: border-color 160ms ease, transform 160ms ease, background 160ms ease; } .dropzone.is-dragging { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); } .dropzone input { position: absolute; opacity: 0; pointer-events: none; } .drop-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--brand-gradient); color: #fff; font-size: 2rem; line-height: 1; box-shadow: 0 14px 25px rgba(18, 175, 163, 0.24); } .import-status { margin: 18px 0; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, var(--soft), #f8fbfb); border: 1px solid rgba(217, 225, 230, 0.8); } textarea, input, select { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.92); color: var(--ink); padding: 12px 13px; transition: border-color 150ms ease, box-shadow 150ms ease; } textarea { resize: vertical; } /* Charte graphique : bordure teal au focus, erreur en rouge sous le champ */ textarea:focus, input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(18, 175, 163, 0.15); } textarea.is-invalid, input.is-invalid, select.is-invalid { border-color: var(--red); } textarea.is-invalid:focus, input.is-invalid:focus, select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.15); } .field-error-text { margin-top: 4px; color: var(--red); font-size: 0.78rem; } .checklist ul { padding-left: 20px; margin-bottom: 18px; } .mini-metric { display: grid; gap: 3px; margin-top: 16px; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), var(--accent-dark)); color: #fff; } .mini-metric strong { font-size: 2.1rem; } .mini-metric span { color: rgba(255, 255, 255, 0.78); line-height: 1.45; } .result-grid { grid-template-columns: 1fr 1fr; } .repairs-panel, .next-panel { grid-column: 1 / -1; } .verdict-panel { border-top: 5px solid var(--gold); } .estimate-panel { border-top: 5px solid var(--accent); } .repairs-panel { border-top: 5px solid var(--blue); } .next-panel { display: grid; gap: 4px; background: linear-gradient(135deg, rgba(16, 32, 53, 0.96), rgba(0, 59, 112, 0.92)), var(--navy); color: #fff; } .next-panel .eyebrow, .next-panel p { color: rgba(255, 255, 255, 0.78); } .next-panel .primary-button { justify-self: start; background: linear-gradient(135deg, var(--gold), #ffc65c); color: #24180a; box-shadow: 0 14px 26px rgba(255, 173, 25, 0.3); } .panel-title { display: flex; justify-content: space-between; gap: 16px; align-items: center; } .panel-title span { color: var(--muted); font-weight: 800; } .meter { height: 12px; overflow: hidden; border-radius: 999px; background: #e3e9ed; } .meter span { display: block; width: 0%; height: 100%; border-radius: inherit; background: var(--green); transition: width 220ms ease; } .estimate-panel h2, .verdict-panel h2 { font-size: 2.1rem; margin-bottom: 8px; } .repair-list { display: grid; gap: 12px; } .repair-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, #ffffff, #f7fbfb); } .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 82px; min-height: 32px; padding: 6px 9px; border-radius: 999px; font-weight: 900; font-size: 0.82rem; } .badge.major { background: var(--amber-soft); color: var(--amber); } .badge.critical { background: var(--red-soft); color: var(--red); } .badge.minor { background: var(--green-soft); color: var(--green); } .repair-price { font-weight: 900; white-space: nowrap; } .empty-state { padding: 18px; border-radius: 12px; background: var(--soft); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .quote-form { display: grid; gap: 18px; max-width: 920px; } .auth-page-layout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr); gap: 32px; align-items: start; margin-top: 28px; } .auth-page-copy { padding: 20px 0; } .auth-page-copy h1 { font-size: clamp(2.4rem, 5vw, 4.8rem); } .register-form { display: grid; gap: 18px; } .full-field { grid-column: 1 / -1; } .form-status { min-height: 24px; margin: 0; color: var(--green); font-weight: 800; } .form-status.is-error { color: var(--red); } .dashboard-page { display: grid; gap: 26px; margin-top: 28px; } .dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .dashboard-hero h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); } .dashboard-hero p:last-child { color: var(--muted); line-height: 1.6; } .dashboard-main-action { flex: 0 0 auto; text-decoration: none; } .dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .dashboard-card { display: grid; gap: 12px; padding: 22px; border: 1px solid rgba(215, 226, 238, 0.9); border-radius: 16px; background: rgba(255, 255, 255, 0.88); box-shadow: var(--soft-shadow); } .dashboard-card span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 900; } .dashboard-card h2 { margin: 0; color: var(--navy); } .dashboard-card p { color: var(--muted); } .dashboard-card a { color: var(--accent-dark); font-weight: 900; text-decoration: none; } .dashboard-body { min-height: 100vh; background: #ffffff; } .dashboard-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 104px; padding: 0 28px; border-bottom: 1px solid #e5e8ed; background: #fff; } .dashboard-brand { display: inline-flex; align-items: center; text-decoration: none; } .dashboard-brand img { display: block; width: 248px; height: 86px; object-fit: contain; } .dashboard-account { position: relative; } .dashboard-account summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; color: #26313f; cursor: pointer; list-style: none; } .dashboard-account summary::-webkit-details-marker { display: none; } .account-avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #252b33; border-radius: 999px; color: var(--accent-dark); font-weight: 900; } .account-avatar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .account-chevron { font-size: 1.1rem; line-height: 1; } .dashboard-account-panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 30; display: grid; gap: 0; width: min(250px, calc(100vw - 34px)); padding: 14px 16px; border: 1px solid #e1e5ea; background: #fff; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12); } .dashboard-account-panel a, .dashboard-account-panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; background: transparent; color: #333a45; font: inherit; font-size: 0.98rem; text-align: left; text-decoration: none; } .dashboard-account-panel svg { flex: 0 0 auto; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.85; } .dashboard-account-panel a:nth-child(2) { border-bottom: 1px solid #dfe4ea; padding-bottom: 14px; } .dashboard-account-panel button { padding-top: 14px; } .dashboard-account-panel a:hover, .dashboard-account-panel button:hover { color: var(--accent); } main.dashboard-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); width: 100%; min-height: calc(100vh - 104px); margin: 0; padding: 0; } .dashboard-sidebar { position: sticky; top: 104px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; height: calc(100vh - 104px); min-height: calc(100vh - 104px); overflow-y: auto; padding: 24px 8px 24px 4px; border-right: 1px solid #e5e8ed; background: #fff; } .dashboard-nav { display: grid; gap: 10px; } .dashboard-nav a { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 8px 0 7px; border-radius: 3px; color: #102a35; font-size: 0.94rem; font-weight: 500; text-decoration: none; } .dashboard-nav a:hover { background: #eef6ff; color: var(--accent-dark); transform: none; } .dashboard-nav a.is-current { background: var(--accent); color: #fff; } .dashboard-nav span { display: grid; place-items: center; width: 22px; color: inherit; font-size: 1.16rem; font-weight: 500; } .dashboard-nav svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } .dashboard-sidebar-gift { display: flex; align-items: flex-start; gap: 10px; padding: 12px 8px 0 10px; color: var(--accent); font-size: 0.9rem; font-weight: 500; line-height: 1.35; text-decoration: none; } .dashboard-sidebar-gift span { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border: 2px solid currentColor; border-radius: 8px; font-weight: 900; } .dashboard-content { min-width: 0; padding: 72px 38px 72px 36px; background: linear-gradient(180deg, rgba(244, 248, 252, 0.68), rgba(255, 255, 255, 0) 360px), #fff; } .dashboard-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; } .dashboard-welcome .eyebrow { margin-bottom: 12px; color: var(--accent); } .dashboard-welcome h1 { max-width: none; margin-bottom: 6px; color: #222832; font-size: clamp(2.35rem, 4.2vw, 3.1rem); font-weight: 650; line-height: 1.08; } .dashboard-welcome p:last-child { max-width: 820px; color: #6b737a; font-size: 1.2rem; line-height: 1.45; } .dashboard-primary-action, .dashboard-secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border-radius: 999px; font-weight: 900; text-decoration: none; white-space: nowrap; } .dashboard-primary-action { background: var(--brand-gradient); color: #fff; box-shadow: 0 14px 26px rgba(18, 175, 163, 0.22); } .dashboard-secondary-action { border: 1px solid rgba(18, 175, 163, 0.18); background: #fff; color: var(--accent-dark); } .dashboard-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 72px; } .dashboard-summary article { position: relative; min-height: 142px; padding: 22px; overflow: hidden; border: 1px solid #e2e9f1; border-radius: 18px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 16px 36px rgba(16, 32, 53, 0.07); } .dashboard-summary article::after { position: absolute; right: -42px; bottom: -54px; width: 130px; height: 130px; content: ""; border-radius: 999px; background: rgba(18, 175, 163, 0.1); } .dashboard-summary article:nth-child(2)::after { background: rgba(255, 173, 25, 0.18); } .dashboard-summary article:nth-child(3)::after { background: rgba(34, 115, 80, 0.12); } .dashboard-summary article:nth-child(4)::after { background: rgba(18, 175, 163, 0.15); } .dashboard-summary span { display: block; margin-bottom: 10px; color: #6b737a; font-size: 0.82rem; font-weight: 900; text-transform: uppercase; } .dashboard-summary strong { display: block; color: #102a35; font-size: 2rem; line-height: 1; } .dashboard-summary p { position: relative; z-index: 1; margin: 10px 0 0; color: #6b737a; line-height: 1.35; } .dashboard-essentials { display: grid; gap: 34px; } .dashboard-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .dashboard-section-heading h2 { margin: 0; color: #102a35; font-size: clamp(1.8rem, 3vw, 2.25rem); font-weight: 650; line-height: 1.15; } .dashboard-section-heading a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 900; text-decoration: none; white-space: nowrap; } .dashboard-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .dashboard-feature-card { display: grid; grid-template-rows: 224px 1fr; min-height: 430px; overflow: hidden; border: 1px solid #e5e8ed; border-radius: 4px; background: #fff; box-shadow: 0 18px 38px rgba(16, 32, 53, 0.08); transition: transform 180ms ease, box-shadow 180ms ease; } .dashboard-feature-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(16, 32, 53, 0.12); } .dashboard-card-visual { position: relative; display: grid; align-content: center; justify-items: start; gap: 12px; padding: 30px 36px; overflow: hidden; } .dashboard-card-visual::after { position: absolute; right: -38px; bottom: -64px; width: 190px; height: 190px; content: ""; border-radius: 999px; background: rgba(255, 255, 255, 0.28); } .dashboard-card-visual span, .dashboard-card-visual strong { position: relative; z-index: 1; } .dashboard-card-visual span { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; min-height: 44px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); color: var(--accent-dark); font-size: 1.35rem; font-weight: 900; } .dashboard-card-visual strong { color: #fff; font-size: 1.55rem; line-height: 1.1; } .visual-upload { background: linear-gradient(135deg, #0a6f68, #12afa3); } .visual-result { background: linear-gradient(135deg, #102a35, #12afa3); } .visual-garage { background: linear-gradient(135deg, #ffad19, #f5a524); } .visual-garage span, .visual-garage strong { color: #24180a; } .dashboard-card-copy { display: grid; align-content: start; justify-items: center; gap: 14px; padding: 36px 32px 30px; text-align: center; } .dashboard-card-copy h3 { margin: 0; color: #102a35; font-size: 1.45rem; line-height: 1.2; } .dashboard-card-copy p { margin: 0; color: #6b737a; font-size: 1rem; line-height: 1.5; } .dashboard-card-copy a { margin-top: 6px; color: var(--accent); font-weight: 900; text-decoration: none; } .dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 24px; margin-top: 48px; } .dashboard-progress-card, .dashboard-activity-card { display: grid; gap: 20px; align-content: start; padding: 28px; border: 1px solid #e5e8ed; border-radius: 18px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 38px rgba(16, 32, 53, 0.08); } .dashboard-section-heading.compact h2 { font-size: 1.45rem; } .dashboard-section-heading.compact span, .dashboard-section-heading.compact a { min-height: auto; padding: 0; border-radius: 0; background: transparent; color: var(--accent); box-shadow: none; font-size: 0.96rem; font-weight: 900; text-decoration: none; } .dashboard-progress-bar { height: 12px; overflow: hidden; border-radius: 999px; background: #e7eef6; } .dashboard-progress-bar span { display: block; width: 8%; height: 100%; border-radius: inherit; background: linear-gradient(135deg, var(--accent), var(--gold)); } .dashboard-steps { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; } .dashboard-steps li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; } .dashboard-steps li > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: #eef4fb; color: var(--accent-dark); font-weight: 900; } .dashboard-steps li.is-next > span { background: var(--accent); color: #fff; } .dashboard-steps strong { display: block; margin-bottom: 3px; color: #102a35; } .dashboard-steps p, .message-empty-state p { color: #6b737a; line-height: 1.45; } .message-empty-state { display: grid; justify-items: start; gap: 10px; min-height: 200px; padding: 24px; border-radius: 16px; background: linear-gradient(135deg, rgba(228, 241, 255, 0.94), rgba(255, 243, 216, 0.72)), #f7fbff; } .message-empty-state span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: #fff; color: var(--accent); font-size: 1.4rem; box-shadow: 0 10px 22px rgba(16, 32, 53, 0.08); } .message-empty-state strong { color: #102a35; font-size: 1.16rem; } .dashboard-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; } .dashboard-page-heading h1 { max-width: none; margin-bottom: 8px; color: #222832; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 650; line-height: 1.08; } .dashboard-page-heading p:last-child { max-width: 720px; margin: 0; color: #6b737a; font-size: 1.08rem; line-height: 1.5; } .analysis-table-card { overflow: hidden; border: 1px solid #e5e8ed; border-radius: 18px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 18px 38px rgba(16, 32, 53, 0.08); } .analysis-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; } .analysis-insights article { position: relative; min-height: 130px; padding: 22px; overflow: hidden; border: 1px solid #e5e8ed; border-radius: 18px; background: linear-gradient(135deg, #fff, #f7fbff); box-shadow: 0 14px 28px rgba(16, 32, 53, 0.06); } .analysis-insights article::after { position: absolute; right: -44px; bottom: -54px; width: 126px; height: 126px; content: ""; border-radius: 999px; background: rgba(18, 175, 163, 0.1); } .analysis-insights article:nth-child(2)::after { background: rgba(255, 173, 25, 0.16); } .analysis-insights article:nth-child(3)::after { background: rgba(34, 115, 80, 0.12); } .analysis-insights span { display: block; margin-bottom: 10px; color: #6b737a; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; } .analysis-insights strong { display: block; color: #102a35; font-size: 2rem; line-height: 1; } .analysis-insights p { position: relative; z-index: 1; margin: 10px 0 0; color: #6b737a; } .analysis-table-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 24px 28px; border-bottom: 1px solid #e5e8ed; } .analysis-table-header h2 { margin: 0; color: #102a35; font-size: 1.35rem; } .analysis-table-header p { margin: 6px 0 0; color: #6b737a; } .analysis-toolbar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .analysis-toolbar label { display: grid; gap: 6px; min-width: 220px; color: #6b737a; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; } .analysis-toolbar input, .analysis-toolbar select { min-height: 42px; border-radius: 999px; background: #fff; } .analysis-table-wrap { overflow-x: auto; } .analysis-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; } .analysis-table th, .analysis-table td { padding: 11px 10px; border-bottom: 1px solid #edf1f5; color: #26313f; font-size: 0.8rem; text-align: left; vertical-align: middle; } .analysis-table th { background: #f7fafc; color: #6b737a; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; } .analysis-table tbody tr:hover { background: #fbfdff; } .analysis-table tbody tr.analysis-markdown-row:hover { background: transparent; } .analysis-markdown-row td { padding: 0 10px 14px; background: #fbfdff; } .analysis-markdown-row details { border: 1px solid #dbe7f3; border-radius: 10px; background: #fff; padding: 10px 12px; } .analysis-markdown-row summary { cursor: pointer; color: var(--blue-strong); font-size: 0.78rem; font-weight: 800; } .analysis-markdown-row pre { overflow: auto; max-height: 260px; margin: 10px 0 0; padding: 12px; border-radius: 8px; background: #0b1826; color: #edf6ff; font-size: 0.76rem; line-height: 1.5; white-space: pre-wrap; } .analysis-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .analysis-detail-card { border: 1px solid #e5e8ed; border-radius: 18px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 16px 40px rgba(8, 25, 42, 0.08); padding: 22px; } .analysis-detail-wide { grid-column: 1 / -1; } .analysis-detail-card h2 { margin: 0 0 16px; color: #102a35; font-size: 1.05rem; } .analysis-detail-list { display: grid; gap: 12px; margin: 0; } .analysis-detail-list div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: start; } .analysis-detail-list dt { color: #6b737a; font-size: 0.82rem; font-weight: 800; } .analysis-detail-list dd { margin: 0; color: #102a35; font-size: 0.9rem; overflow-wrap: anywhere; } .analysis-detail-pre { overflow: auto; max-height: 420px; margin: 0; padding: 14px; border-radius: 10px; background: #0b1826; color: #edf6ff; font-size: 0.78rem; line-height: 1.55; white-space: pre-wrap; } .analysis-detail-card summary { cursor: pointer; color: var(--blue-strong); font-weight: 900; } .report-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .secondary-action { background: #fff; color: var(--blue-strong); border: 1px solid rgba(18, 175, 163, 0.18); box-shadow: none; } .repair-report { display: grid; gap: 18px; } .repair-report-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .repair-report-summary article, .repair-report-header, .repair-report-item, .repair-report-empty { border: 1px solid #e5e8ed; border-radius: 18px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 16px 40px rgba(8, 25, 42, 0.08); } .repair-report-summary article { padding: 18px; } .repair-report-summary span { display: block; margin-bottom: 8px; color: #6b737a; font-size: 0.76rem; font-weight: 900; text-transform: uppercase; } .repair-report-summary strong { display: block; color: #102a35; font-size: 1.15rem; overflow-wrap: anywhere; } .repair-report-summary p { margin: 6px 0 0; color: #6b737a; font-size: 0.84rem; } .repair-report-header { padding: 22px; } .repair-report-header h2 { margin: 0; color: #102a35; font-size: 1.25rem; } .repair-report-header p { margin: 8px 0 0; color: #6b737a; line-height: 1.5; } .repair-report-list { display: grid; gap: 14px; } .repair-report-item { padding: 20px; } .repair-report-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid #edf1f5; } .repair-report-item-head h3 { margin: 8px 0 4px; color: #102a35; font-size: 1.08rem; } .repair-report-item-head p { margin: 0; color: #6b737a; font-size: 0.82rem; } .repair-report-item-head strong { flex: 0 0 auto; color: var(--blue-strong); font-size: 1rem; white-space: nowrap; } .repair-level { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 119, 204, 0.1); color: var(--blue-strong); font-size: 0.74rem; font-weight: 900; text-transform: uppercase; } .repair-report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 16px; } .defect-code-details { margin-top: 16px; padding: 16px; border: 1px solid rgba(18, 175, 163, 0.16); border-radius: 14px; background: linear-gradient(135deg, rgba(0, 119, 204, 0.08), rgba(255, 170, 0, 0.08)); } .defect-code-details h4 { margin: 0 0 12px; color: #102a35; font-size: 0.98rem; } .defect-code-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; } .defect-code-details div { min-width: 0; } .defect-code-details dt { margin-bottom: 4px; color: #6b737a; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; } .defect-code-details dd { margin: 0; color: #26313f; font-size: 0.84rem; line-height: 1.45; overflow-wrap: anywhere; } .repair-report-grid div { min-height: 100%; padding: 12px; border-radius: 12px; background: #f7fafc; } .repair-report-grid span { display: block; margin-bottom: 6px; color: #6b737a; font-size: 0.74rem; font-weight: 900; text-transform: uppercase; } .repair-report-grid p, .repair-quote-advice { margin: 0; color: #26313f; font-size: 0.86rem; line-height: 1.45; } .repair-quote-advice { margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--gold); border-radius: 10px; background: rgba(255, 170, 0, 0.1); } .repair-report-empty { padding: 22px; color: #6b737a; line-height: 1.5; } .analysis-table td strong, .analysis-table td span { display: block; } .analysis-table td > span { margin-top: 4px; color: #6b737a; font-size: 0.78rem; } .analysis-table a:not(.admin-row-menu-item), .analysis-table button:not(.admin-act-icon):not(.admin-act-btn):not(.admin-row-menu-item) { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 10px; border: 1px solid rgba(18, 175, 163, 0.18); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 500; font-size: 0.78rem; font-family: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; } .analysis-table a:not(.admin-row-menu-item):hover, .analysis-table button:not(.admin-act-icon):not(.admin-act-btn):not(.admin-row-menu-item):hover { background: var(--accent); color: #fff; } .analysis-table button:not(.admin-act-icon):not(.admin-act-btn):not(.admin-row-menu-item):disabled { cursor: wait; opacity: 0.7; } .analysis-table td a + a, .analysis-table td a + button, .analysis-table td button + a, .analysis-table td button + button { margin-top: 6px; } .analysis-table .garage-submit-action { border-color: rgba(255, 170, 0, 0.34); background: rgba(255, 170, 0, 0.14); color: #8a5a00; white-space: normal; text-align: center; line-height: 1.2; } .analysis-table .garage-submit-action:hover { background: var(--gold); color: #102a35; } .garage-portal-body { background: linear-gradient(180deg, rgba(244, 248, 252, 0.96), rgba(255, 255, 255, 1) 34%), #f6f8fb; } .garage-portal-body .dashboard-topbar { border-bottom-color: rgba(0, 52, 92, 0.16); background: linear-gradient(90deg, #ffffff 0%, #f8fbff 52%, #fff6df 100%); } .garage-portal-body .dashboard-sidebar { border-right-color: rgba(0, 52, 92, 0.12); background: linear-gradient(180deg, #102a35 0%, #0b2a42 100%); } .garage-portal-body .dashboard-nav a { color: rgba(255, 255, 255, 0.78); } .garage-portal-body .dashboard-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .garage-portal-body .dashboard-nav a.is-current { background: linear-gradient(135deg, #12afa3, #12afa3); color: #fff; box-shadow: 0 10px 24px rgba(18, 175, 163, 0.24); } .garage-portal-body .dashboard-nav svg { stroke-width: 1.9; } .garage-shell .dashboard-content { gap: 26px; } .garage-page-heading { position: relative; overflow: hidden; align-items: center; min-height: 184px; padding: 30px; border: 1px solid rgba(0, 52, 92, 0.12); border-radius: 18px; background: linear-gradient(135deg, rgba(16, 32, 53, 0.96), rgba(0, 52, 92, 0.92)), #102a35; box-shadow: 0 18px 38px rgba(16, 32, 53, 0.16); } .garage-page-heading::after { position: absolute; right: 28px; bottom: -34px; width: 220px; height: 120px; content: ""; border: 1px solid rgba(255, 170, 0, 0.28); border-radius: 999px 999px 0 0; opacity: 0.65; } .garage-page-heading .eyebrow { color: #ffca66; } .garage-page-heading h1, .garage-page-heading p { position: relative; z-index: 1; } .garage-page-heading h1 { color: #fff; } .garage-page-heading p:last-child { color: rgba(235, 244, 255, 0.78); } .garage-ops-panel { position: relative; z-index: 1; display: grid; gap: 6px; min-width: 250px; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; background: rgba(255, 255, 255, 0.08); color: #fff; } .garage-ops-panel span, .garage-ops-panel small { color: rgba(235, 244, 255, 0.72); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } .garage-ops-panel strong { color: #ffbd2e; font-size: 1.35rem; } .garage-insights article { border-color: rgba(0, 52, 92, 0.12); background: linear-gradient(135deg, #ffffff, #f8fbff); } .garage-insights article::after { background: rgba(18, 175, 163, 0.1); } .garage-insights article:nth-child(2)::after { background: rgba(255, 170, 0, 0.18); } .garage-insights article:nth-child(3)::after { background: rgba(16, 32, 53, 0.1); } .garage-section-kicker { margin: 0 0 5px; color: #12afa3; font-size: 0.72rem; font-weight: 900; letter-spacing: 0; text-transform: uppercase; } .admin-heading-actions { display: grid; gap: 10px; justify-items: end; } .garage-shell .analysis-table-card, .admin-shell .analysis-table-card { border-color: rgba(0, 52, 92, 0.12); box-shadow: 0 16px 34px rgba(16, 32, 53, 0.08); } .garage-shell .analysis-table-header, .admin-shell .analysis-table-header { background: linear-gradient(90deg, #fff, #f8fbff); } .garage-analysis-table th { background: #eef5fb; color: #0a6f68; } .garage-analysis-table tbody tr:hover { background: #f7fbff; } .garage-pending-card { display: grid; gap: 12px; padding: 30px; } .garage-pending-card h2 { margin: 0; color: #102a35; font-size: 1.55rem; } .garage-pending-card p:not(.eyebrow) { max-width: 760px; margin: 0; color: #6b737a; line-height: 1.6; } .garage-quote-sent { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(34, 115, 80, 0.12); color: #22c55e; font-weight: 800; } .garage-quote-row td { background: #f4f8fc; } .garage-quote-form { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto; gap: 14px; align-items: end; padding: 18px; border: 1px solid rgba(0, 52, 92, 0.14); border-radius: 14px; background: linear-gradient(180deg, #fff, #f9fcff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } .garage-quote-form label { display: grid; gap: 6px; color: #6b737a; font-size: 0.76rem; font-weight: 900; text-transform: uppercase; } .garage-quote-form input, .garage-quote-form textarea { min-height: 42px; border-radius: 12px; font-size: 0.9rem; text-transform: none; } .garage-quote-form textarea { resize: vertical; } .garage-quote-form .primary-button { min-height: 42px; padding: 0 16px; white-space: nowrap; } .garage-report-detail, .garage-quote-items, .garage-quote-form .full-field { grid-column: 1 / -1; } .garage-report-detail { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid rgba(0, 52, 92, 0.14); border-radius: 14px; background: linear-gradient(135deg, rgba(18, 175, 163, 0.08), rgba(255, 170, 0, 0.1)), #fff; } .garage-report-detail h3 { margin: 0; color: #102a35; font-size: 1.05rem; } .garage-report-detail p { margin: 6px 0 0; color: #6b737a; } .garage-report-meta { display: grid; gap: 6px; min-width: 220px; color: #0a6f68; font-size: 0.82rem; font-weight: 800; } .garage-quote-items { display: grid; gap: 12px; } .garage-failure-quote { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%); gap: 14px; align-items: stretch; padding: 14px; border: 1px solid #dfe8f1; border-radius: 14px; background: #fff; } .garage-quote-defect-block, .garage-quote-pricing-block { min-width: 0; } .garage-quote-defect-block { display: grid; gap: 12px; align-content: start; padding-right: 12px; border-right: 1px solid #e7edf4; } .garage-quote-pricing-block { display: grid; align-content: center; } .garage-quote-calculation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; } .garage-quote-calculation-grid .quote-field-total { grid-column: 1 / -1; } .garage-quote-calculation-grid label { min-width: 0; } .garage-quote-calculation-grid input { width: 100%; min-height: 38px; padding-inline: 9px; } .garage-quote-calculation-grid input[readonly] { background: #eef5fb; color: #0a6f68; cursor: not-allowed; } .garage-failure-quote h4 { margin: 0; color: #102a35; font-size: 0.92rem; } .garage-failure-quote p, .garage-failure-quote small { display: block; margin: 5px 0 0; color: #6b737a; font-size: 0.78rem; line-height: 1.45; } .garage-failure-index { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 8px; border-radius: 8px; background: #102a35; color: #ffbd2e; font-weight: 900; } .garage-quote-total { display: grid; gap: 4px; justify-items: end; padding: 8px 12px; border-radius: 12px; background: #102a35; color: #fff; } .garage-quote-total span { color: #d6e7f8; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; } .garage-quote-total strong { font-size: 1.15rem; } .garage-profile-card { overflow: visible; } .garage-profile-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 24px; } .garage-profile-form label { display: grid; gap: 7px; color: #6b737a; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; } .garage-profile-form input, .garage-profile-form textarea { min-height: 44px; border-radius: 12px; font-size: 0.92rem; text-transform: none; } .garage-profile-form input:disabled { background: #f1f5f9; color: #6b737a; } .garage-profile-form textarea { resize: vertical; } .garage-profile-form .full-field { grid-column: 1 / -1; } .garage-profile-form .primary-button { justify-self: start; } .admin-shell .dashboard-content { gap: 26px; } .admin-login-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; max-width: 900px; } .admin-login-form label { display: grid; gap: 6px; color: #6b737a; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; } .admin-status { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--accent-soft, #dff5f3); color: #0c7a70; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.72rem; font-weight: 600; } .admin-status::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .admin-status-approved { background: var(--accent-soft, #dff5f3); color: #0c7a70; } .admin-status-pending { background: var(--amber-soft, #fff3d8); color: #8a5a0a; } .admin-status-rejected { background: var(--red-soft, #ffefed); color: #b4262a; } .admin-status-neutral { background: var(--soft, #eceff0); color: var(--muted, #6b737a); } .admin-table td span { display: block; margin-top: 4px; color: #6b737a; font-size: 0.76rem; } .assistant-ia-case-row { cursor: pointer; } .assistant-ia-case-row:hover { background: var(--soft, #f5f7fa); } .assistant-ia-case-row-escalated td { background: rgba(184, 38, 38, 0.045); } .assistant-ia-case-row-escalated:hover td { background: rgba(184, 38, 38, 0.09); } @media (max-width: 980px) { .garage-quote-form { grid-template-columns: 1fr; } .garage-failure-quote { grid-template-columns: 1fr; } .garage-quote-defect-block { padding-right: 0; padding-bottom: 12px; border-right: 0; border-bottom: 1px solid #e7edf4; } .garage-quote-calculation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-login-form { grid-template-columns: 1fr; } } @media (max-width: 560px) { .garage-quote-calculation-grid { grid-template-columns: 1fr; } } .analysis-preview-table a { color: var(--blue-strong); font-weight: 800; text-decoration: none; } .analysis-vehicle { display: flex; align-items: center; min-width: 0; } .analysis-table th:nth-child(1), .analysis-table td:nth-child(1) { width: 19%; } .analysis-table th:nth-child(2), .analysis-table td:nth-child(2) { width: 17%; } .analysis-table th:nth-child(3), .analysis-table td:nth-child(3) { width: 12%; } .analysis-table th:nth-child(4), .analysis-table td:nth-child(4) { width: 18%; } .analysis-table th:nth-child(5), .analysis-table td:nth-child(5) { width: 16%; } .analysis-table th:nth-child(6), .analysis-table td:nth-child(6) { width: 18%; } .quotes-table th:nth-child(1), .quotes-table td:nth-child(1) { width: 16%; } .quotes-table th:nth-child(2), .quotes-table td:nth-child(2) { width: 20%; } .quotes-table th:nth-child(3), .quotes-table td:nth-child(3) { width: 16%; } .quotes-table th:nth-child(4), .quotes-table td:nth-child(4) { width: 10%; } .quotes-table th:nth-child(5), .quotes-table td:nth-child(5) { width: 13%; } .quotes-table th:nth-child(6), .quotes-table td:nth-child(6) { width: 11%; } .quotes-table th:nth-child(7), .quotes-table td:nth-child(7) { width: 14%; } .garage-rdv-table th:nth-child(1), .garage-rdv-table td:nth-child(1) { width: 18%; } .garage-rdv-table th:nth-child(2), .garage-rdv-table td:nth-child(2) { width: 18%; } .garage-rdv-table th:nth-child(3), .garage-rdv-table td:nth-child(3) { width: 18%; } .garage-rdv-table th:nth-child(4), .garage-rdv-table td:nth-child(4) { width: 14%; } .garage-rdv-table th:nth-child(5), .garage-rdv-table td:nth-child(5) { width: 20%; } .garage-rdv-table th:nth-child(6), .garage-rdv-table td:nth-child(6) { width: 12%; } .appointment-slots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .appointment-slots article { border: 1px solid rgba(0, 52, 92, 0.12); border-radius: 12px; padding: 14px; background: #fff; } .appointment-slots article > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .appointment-loading { margin: 0; color: #6b737a; font-weight: 700; } .appointment-slots button { display: inline-grid; gap: 2px; min-width: 92px; min-height: 44px; align-content: center; border-radius: 10px; } .appointment-slots button span { font-weight: 900; } .appointment-slots button small { color: inherit; font-size: 0.68rem; opacity: 0.78; } .appointment-slots button.is-selected { background: #0f8f5f; border-color: #0f8f5f; color: #fff; } .appointment-slots button.is-disabled-choice { opacity: 0.45; cursor: not-allowed; } .messages-table th:nth-child(1), .messages-table td:nth-child(1) { width: 18%; } .messages-table th:nth-child(2), .messages-table td:nth-child(2) { width: 16%; } .messages-table th:nth-child(3), .messages-table td:nth-child(3) { width: 32%; } .messages-table th:nth-child(4), .messages-table td:nth-child(4) { width: 12%; } .messages-table th:nth-child(5), .messages-table td:nth-child(5) { width: 10%; } .messages-table th:nth-child(6), .messages-table td:nth-child(6) { width: 12%; } .analysis-date, .analysis-result { color: #102a35; } .analysis-result { font-weight: 900; } .analysis-table td strong { font-size: 0.82rem; } .analysis-badge, .analysis-status { min-height: 26px; padding: 5px 8px; font-size: 0.74rem; } .analysis-badge, .analysis-status { display: inline-flex !important; align-items: center; justify-content: center; min-height: 30px; padding: 6px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 900; white-space: nowrap; } .analysis-badge.high { background: var(--red-soft); color: var(--red); } .analysis-badge.medium { background: var(--gold-soft); color: #925d09; } .analysis-badge.low { background: var(--green-soft); color: var(--green); } .analysis-status.pending { background: var(--accent-soft); color: var(--accent-dark); } .analysis-status.active { background: var(--gold-soft); color: #925d09; } .analysis-status.done { background: var(--green-soft); color: var(--green); } .dashboard-upload-card { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(280px, 0.58fr); gap: 24px; align-items: stretch; } .dashboard-upload-zone { display: grid; place-items: center; align-content: center; gap: 14px; min-height: 390px; padding: 36px; border: 2px dashed rgba(18, 175, 163, 0.36); border-radius: 22px; background: linear-gradient(135deg, rgba(228, 241, 255, 0.92), rgba(255, 243, 216, 0.74)), #f8fbff; color: #102a35; text-align: center; cursor: pointer; } .dashboard-upload-zone input { position: absolute; opacity: 0; pointer-events: none; } .dashboard-upload-zone > span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 20px; background: var(--brand-gradient); color: #fff; box-shadow: 0 16px 30px rgba(18, 175, 163, 0.22); } .dashboard-upload-zone svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .dashboard-upload-zone strong { font-size: 1.45rem; } .dashboard-upload-zone small { color: #6b737a; font-size: 1rem; } .dashboard-upload-side { display: grid; align-content: start; gap: 18px; padding: 28px; border: 1px solid #e5e8ed; border-radius: 22px; background: #fff; box-shadow: 0 18px 38px rgba(16, 32, 53, 0.08); } .dashboard-upload-side h2 { margin: 0; color: #102a35; font-size: 1.35rem; } .dashboard-upload-side ul { display: grid; gap: 12px; margin: 0; padding-left: 20px; color: #6b737a; line-height: 1.5; } .analysis-preview-card { margin-top: 22px; overflow: hidden; border: 1px solid #e5e8ed; border-radius: 18px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 22px 48px rgba(8, 25, 42, 0.08); } .analysis-preview-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 22px; border-bottom: 1px solid #edf1f5; } .analysis-preview-header h2 { margin: 0; color: #102a35; font-size: 1.25rem; } .analysis-preview-header p:not(.eyebrow) { margin: 6px 0 0; color: #6b737a; } .analysis-preview-table-wrap { overflow-x: auto; } .analysis-preview-table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; } .analysis-preview-table th, .analysis-preview-table td { padding: 12px 10px; border-bottom: 1px solid #edf1f5; color: #26313f; font-size: 0.8rem; text-align: left; vertical-align: top; } .analysis-preview-table th { background: #f7fafc; color: #6b737a; font-size: 0.76rem; font-weight: 900; text-transform: uppercase; } .analysis-preview-table td strong, .analysis-preview-table td span { display: block; } .analysis-preview-table td span { margin-top: 4px; color: #6b737a; font-size: 0.76rem; } .uploaded-files { display: grid; gap: 10px; } .uploaded-file-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #e5e8ed; border-radius: 14px; background: #f8fbff; } .uploaded-file-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); font-size: 0.78rem; font-weight: 900; } .uploaded-file-card strong { display: block; overflow: hidden; color: #102a35; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; } .uploaded-file-card small { display: block; margin-top: 3px; color: #6b737a; } .uploaded-file-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-weight: 900; } .profile-layout { display: grid; grid-template-columns: minmax(240px, 0.34fr) minmax(420px, 0.66fr); gap: 24px; align-items: start; } .profile-summary-card, .profile-form-card { border: 1px solid #e5e8ed; border-radius: 22px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 18px 38px rgba(16, 32, 53, 0.08); } .profile-summary-card { display: grid; justify-items: center; gap: 12px; padding: 32px 24px; text-align: center; } .profile-avatar { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 999px; background: var(--brand-gradient); color: #fff; font-size: 1.6rem; font-weight: 900; box-shadow: 0 16px 30px rgba(18, 175, 163, 0.22); } .profile-summary-card h2 { margin: 8px 0 0; color: #102a35; font-size: 1.4rem; } .profile-summary-card p { margin: 0; color: #6b737a; } .profile-summary-card div { display: grid; gap: 5px; width: 100%; margin-top: 16px; padding: 18px; border-radius: 16px; background: #f7fbff; text-align: left; } .profile-summary-card div strong { color: #102a35; } .profile-summary-card div span { color: #6b737a; line-height: 1.45; } .profile-form-card { display: grid; gap: 18px; padding: 28px; } .profile-form-card label { display: grid; gap: 7px; color: #26313f; font-weight: 800; } .profile-actions { display: flex; gap: 12px; flex-wrap: wrap; } .quote-form label { display: grid; gap: 7px; font-weight: 800; } .quote-form textarea, .quote-form input, .quote-form select { margin-top: 2px; color: var(--ink); font-weight: 500; } .confirmation { display: grid; align-content: center; min-height: calc(100vh - 140px); max-width: 820px; padding: 42px; border-radius: 24px; background: rgba(255, 255, 255, 0.72); box-shadow: var(--soft-shadow); } .confirmation h1 { font-size: clamp(2.5rem, 6vw, 5rem); } .site-footer { margin-top: clamp(64px, 8vw, 110px); padding: 44px max(24px, calc((100vw - 1180px) / 2)) 36px; background: linear-gradient(135deg, var(--navy), var(--accent-dark)); color: #fff; } .footer-grid { display: grid; grid-template-columns: minmax(160px, 0.9fr) repeat(4, minmax(0, 1fr)); gap: 28px; } .footer-grid-v2 { grid-template-columns: minmax(160px, 0.9fr) repeat(3, minmax(0, 1fr)); } .footer-grid section { display: grid; align-content: start; gap: 10px; } .footer-grid h2 { margin: 0 0 8px; color: #fff; font-size: 1rem; } .footer-grid a { color: rgba(255, 255, 255, 0.76); text-decoration: none; line-height: 1.45; } .footer-grid a:hover { color: var(--gold); } .footer-logo-column { display: grid; place-items: center; padding: 12px; } .footer-logo-column img { /* Rebranding Nexiamo (2026-08-25) : le carton blanc (padding/radius/ background/shadow) dessinait un encadre visible sur le fond degrade du footer - retire pour laisser le logo flotter, comme pour .brand-logo. Ce fond etant sombre, ce contexte utilise la variante texte blanc (assets/logo-nexiamo-white.png), pas le logo texte fonce du header. */ display: block; width: min(190px, 100%); height: auto; } @media (max-width: 860px) { .topbar { align-items: flex-start; flex-direction: column; padding: 14px 16px; } .brand-logo { height: 58px; max-width: 174px; } nav { justify-content: flex-start; } .header-actions { align-items: flex-start; flex-direction: column; gap: 12px; width: 100%; } .auth-actions { width: 100%; flex-wrap: wrap; } main { width: min(100% - 24px, 1180px); padding-top: 18px; } .hero, .upload-layout, .result-grid, .auth-page-layout, .dashboard-grid, .value-grid, .testimonial-grid, .blog-grid, .form-grid { grid-template-columns: 1fr; } .dashboard-hero { align-items: flex-start; flex-direction: column; } .hero { min-height: auto; } .home-page > * + * { margin-top: 72px; } #homePage > .how-it-works-section, #homePage > .partner-strip, #homePage > .garage-map-section, #homePage > .faq-section { margin-top: 110px !important; } .hero img { height: auto; max-height: none; } h1 { font-size: clamp(2.35rem, 14vw, 4rem); } .partner-heading { align-items: start; flex-direction: column; } .partner-logo { min-width: 160px; } .garage-map-heading { align-items: start; flex-direction: column; } .garage-map-layout { grid-template-columns: 1fr; } .google-map-card, .google-map-card iframe { min-height: 340px; } .repair-card { grid-template-columns: 1fr; } .repair-price { white-space: normal; } .footer-grid { grid-template-columns: 1fr; } .dashboard-topbar { height: 84px; padding: 10px 14px; } .dashboard-brand img { width: 184px; height: 64px; } main.dashboard-shell { grid-template-columns: 1fr; } .dashboard-sidebar { position: sticky; top: 84px; z-index: 40; height: auto; min-height: auto; overflow-x: auto; overflow-y: hidden; padding: 10px 14px; border-right: 0; border-bottom: 1px solid #e5e8ed; } .dashboard-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .dashboard-nav a { flex: 0 0 auto; min-height: 42px; padding: 0 12px; font-size: 0.94rem; } .dashboard-nav span { width: auto; font-size: 1.1rem; } .dashboard-sidebar-gift { display: none; } .dashboard-content { padding: 38px 16px 46px; } .dashboard-welcome { align-items: flex-start; flex-direction: column; margin-bottom: 46px; } .dashboard-welcome h1 { font-size: clamp(2rem, 10vw, 2.6rem); } .dashboard-section-heading { align-items: flex-start; flex-direction: column; } .dashboard-page-heading { align-items: flex-start; flex-direction: column; gap: 18px; } .dashboard-feature-grid, .dashboard-status-grid, .dashboard-summary, .dashboard-lower-grid, .analysis-insights, .dashboard-upload-card, .profile-layout { grid-template-columns: 1fr; } .dashboard-summary { margin-bottom: 52px; } .dashboard-feature-card { grid-template-rows: 180px 1fr; min-height: auto; } .dashboard-account-panel { right: -4px; padding: 18px; } .analysis-table-header { align-items: flex-start; flex-direction: column; padding: 20px; } .analysis-detail-grid { grid-template-columns: 1fr; } .analysis-detail-list div { grid-template-columns: 1fr; gap: 4px; } .repair-report-summary, .repair-report-grid, .defect-code-details dl { grid-template-columns: 1fr; } .repair-report-item-head, .report-actions { align-items: flex-start; flex-direction: column; } .analysis-toolbar, .analysis-toolbar label, .analysis-toolbar select { width: 100%; } } @media (max-width: 640px) { html, body { max-width: 100%; overflow-x: hidden; } body { font-size: 15px; } .topbar { gap: 14px; } .brand-logo { max-width: 150px; height: 50px; } nav { width: 100%; gap: 8px; overflow-x: auto; padding-bottom: 4px; } nav a { flex: 0 0 auto; padding: 10px 12px; font-size: 0.92rem; white-space: nowrap; } .auth-actions a, .auth-actions button, .hero-actions a, .hero-actions button, .primary-button, .secondary-button, .dashboard-primary-action, .dashboard-secondary-action { justify-content: center; width: 100%; min-height: 46px; text-align: center; } main { width: min(100% - 20px, 1180px); } .hero { gap: 22px; padding-top: 12px; } .hero-copy, .upload-card, .result-card, .quote-card, .analysis-table-card, .profile-form-card, .confirmation { padding: 20px; border-radius: 14px; } h1 { font-size: clamp(2rem, 12vw, 3rem); line-height: 1.04; } h2 { font-size: clamp(1.35rem, 7vw, 2rem); } .hero p, .dashboard-page-heading p, .analysis-table-header p { font-size: 1rem; } .trust-title { font-size: clamp(1.8rem, 10vw, 2.5rem); } .how-it-works-grid, .partner-carousel, .faq-grid, .garage-list, .garage-map-layout { grid-template-columns: 1fr; } .site-footer { padding: 34px 18px 30px; } .footer-grid { gap: 24px; } .dashboard-topbar { height: 72px; padding: 8px 12px; } .dashboard-brand img { width: 148px; height: 52px; } .account-avatar, .dashboard-account summary { width: 42px; height: 42px; } .dashboard-account-panel { right: 0; width: min(86vw, 260px); } .dashboard-sidebar { top: 72px; padding: 8px 10px; } .dashboard-nav { scrollbar-width: thin; } .dashboard-nav a { min-height: 38px; padding: 0 10px; font-size: 0.84rem; } .dashboard-nav svg { width: 17px; height: 17px; } .dashboard-content { padding: 28px 10px 38px; } .dashboard-page-heading { gap: 14px; } .dashboard-page-heading h1, .dashboard-welcome h1 { font-size: clamp(1.75rem, 9vw, 2.35rem); } .analysis-insights { gap: 12px; } .analysis-insights article, .dashboard-summary article, .dashboard-feature-card, .garage-ops-panel { padding: 16px; border-radius: 12px; } .analysis-table-header { gap: 14px; padding: 16px; } .analysis-toolbar { display: grid; gap: 10px; } .analysis-toolbar input, .analysis-toolbar select { min-height: 44px; font-size: 0.95rem; } .analysis-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .analysis-table { min-width: 760px; font-size: 0.78rem; } .quotes-table { min-width: 880px; } .garage-rdv-table { min-width: 820px; } .garage-analysis-table { min-width: 900px; } .analysis-table th, .analysis-table td { padding: 10px 9px; white-space: normal; } .analysis-table a, .analysis-table button { min-height: 34px; padding: 7px 9px; font-size: 0.76rem; } .quote-detail-panel, .quote-rdv-panel { min-width: 0; } .appointment-slots { grid-template-columns: 1fr; } .garage-profile-form, .quote-form, .profile-form-card { grid-template-columns: 1fr; } .uploaded-file-card { grid-template-columns: auto minmax(0, 1fr) auto; } .uploaded-file-card strong, .uploaded-file-card small { overflow-wrap: anywhere; } } @media (max-width: 420px) { .brand-logo { max-width: 132px; height: 46px; } .dashboard-brand img { width: 130px; height: 46px; } .dashboard-nav a { gap: 6px; padding: 0 8px; } .dashboard-nav span { display: none; } .hero-copy, .upload-card, .result-card, .quote-card, .analysis-table-card, .profile-form-card { padding: 16px; } .analysis-table { min-width: 700px; font-size: 0.74rem; } .analysis-table th, .analysis-table td { padding: 8px 7px; } .analysis-table a, .analysis-table button { width: 100%; } .dashboard-content { padding-inline: 8px; } } .status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 5px 10px; border-radius: 999px; background: #eef6ff; color: #0a6f68; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.72rem; font-weight: 600; } .status-pill::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-pill--origin-secretary { background: var(--violet-soft); color: var(--violet); } .status-pill--origin-assistance { background: var(--green-soft); color: var(--green); } .status-pill--origin-roolezen { background: rgba(16, 32, 53, 0.08); color: var(--navy); } /* Charte graphique : 1 badge = 1 etat (succes/attention/erreur/info/neutre) */ .status-pill--success { background: var(--accent-soft); color: var(--accent-dark); } .status-pill--warning { background: var(--amber-soft); color: #8a5a0a; } .status-pill--error { background: var(--red-soft); color: var(--red); } .status-pill--info { background: var(--violet-soft); color: var(--violet); } .status-pill--neutral { background: var(--soft); color: var(--neutral); } .invoice-extra-line, .planning-slot-row { display: grid; grid-template-columns: minmax(180px, 1fr) 140px auto; gap: 10px; align-items: end; margin-top: 10px; } .planning-slot-row { grid-template-columns: minmax(130px, 1fr) 120px 120px 110px 100px auto; } .invoice-extra-line input, .planning-slot-row input, .planning-slot-row select { min-height: 42px; border: 1px solid #d9e2ec; border-radius: 8px; padding: 0 10px; } @media (max-width: 640px) { .invoice-extra-line, .planning-slot-row { grid-template-columns: 1fr; } } .invoice-download-link { display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--accent-dark); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 0; } .invoice-download-link:hover, .invoice-download-link:focus-visible { color: var(--accent); } .garage-portal-body .analysis-table-card, .garage-portal-body .profile-form-card { border-radius: 10px; box-shadow: 0 18px 42px rgba(0, 52, 92, 0.08); } .garage-portal-body .dashboard-page-heading, .garage-portal-body .analysis-insights { margin-bottom: 22px; } .garage-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } .garage-settings-card { display: grid; gap: 18px; padding: 0; overflow: hidden; } .garage-settings-card .analysis-table-header { padding: 22px 24px 0; } .garage-settings-form, .garage-compact-form { padding: 0 24px 24px; } .garage-compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .full-width-card { grid-column: 1 / -1; } .garage-opening-grid { display: grid; gap: 10px; } .garage-opening-row { display: grid; grid-template-columns: minmax(100px, 1fr) auto 130px 130px; gap: 10px; align-items: center; padding: 12px; border: 1px solid rgba(0, 52, 92, 0.12); border-radius: 10px; background: #f8fbff; } .garage-opening-row span { color: #102a35; font-weight: 800; } .garage-settings-table td span { display: block; margin-top: 3px; color: #6b737a; font-size: 0.78rem; } .status-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; } .status-success { background: rgba(34, 115, 80, 0.12); color: #22c55e; } .status-muted { background: rgba(102, 112, 133, 0.12); color: #6b737a; } @media (max-width: 980px) { .garage-settings-grid, .garage-compact-form { grid-template-columns: 1fr; } .garage-opening-row { grid-template-columns: 1fr; } } .garage-settings-grid { align-items: start; } .garage-settings-card { align-self: start; } .two-phase-opening { grid-template-columns: minmax(120px, 1fr) repeat(4, minmax(100px, 125px)); } .two-phase-opening label { display: grid; gap: 4px; } .two-phase-opening small { color: #6b737a; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; } .opening-day-toggle { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 10px; } .planning-config-list { display: grid; gap: 12px; } @media (max-width: 980px) { .two-phase-opening { grid-template-columns: 1fr 1fr; } .opening-day-toggle { grid-column: 1 / -1; } } .garage-settings-primary-card { grid-column: 1 / -1; } .garage-settings-primary-card .garage-settings-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .garage-settings-primary-card .full-field, .garage-settings-primary-card .primary-button { grid-column: 1 / -1; } @media (max-width: 980px) { .garage-settings-primary-card .garage-settings-form { grid-template-columns: 1fr; } } .garage-settings-access-card { grid-column: 1 / -1; } .two-phase-opening .opening-day-toggle { justify-content: flex-start; padding-left: 14px; } .two-phase-opening .opening-day-toggle input[type="checkbox"] { width: 18px; height: 18px; margin: 0 4px 0 0; flex: 0 0 auto; } .two-phase-opening .opening-day-toggle span { line-height: 1; } .garage-calendar-card { overflow: hidden; } .garage-calendar-header { align-items: center; gap: 18px; } .calendar-view-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .calendar-view-tabs button { min-height: 34px; border: 1px solid rgba(0, 52, 92, 0.14); border-radius: 999px; background: #fff; color: #0a6f68; font-size: 0.78rem; font-weight: 800; cursor: pointer; } .calendar-month-select-label { display: grid; gap: 3px; color: #6b737a; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; } .calendar-month-select-label select { width: 100%; min-height: 36px; border: 1px solid rgba(0, 52, 92, 0.14); border-radius: 999px; background: #fff; color: #0a6f68; font: inherit; font-size: 0.78rem; font-weight: 800; padding: 0 34px 0 12px; } .calendar-view-tabs button.is-active { border-color: rgba(18, 175, 163, 0.28); background: #12afa3; color: #fff; } .garage-calendar-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 0 24px 18px; color: #6b737a; } .garage-calendar-meta strong { color: #102a35; } .garage-calendar-view { padding: 0 24px 24px; } .calendar-day-panel, .calendar-week-grid article, .calendar-month-grid article, .calendar-quarter-grid article { border: 1px solid rgba(0, 52, 92, 0.12); border-radius: 12px; background: linear-gradient(180deg, #fff, #f8fbff); } .calendar-day-panel { display: grid; gap: 14px; padding: 18px; } .calendar-day-panel h3, .calendar-week-grid h3 { margin: 0; color: #0a6f68; } .calendar-slot-list, .calendar-week-grid article { display: grid; gap: 8px; } .calendar-slot { display: grid; grid-template-columns: 70px 70px auto; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 9px; background: rgba(18, 175, 163, 0.08); color: #0a6f68; font-size: 0.82rem; } .calendar-slot small { color: #6b737a; font-weight: 800; } .calendar-week-grid { display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 7px; overflow-x: auto; } .calendar-week-grid article { align-content: start; min-width: 104px; padding: 9px; } .calendar-week-grid .calendar-date-card { min-width: 108px; padding: 9px; } .calendar-week-grid h3 { font-size: 0.86rem; } .calendar-week-grid .calendar-slot { grid-template-columns: 1fr; gap: 0; min-width: 0; padding: 6px; font-size: 0.68rem; text-align: center; } .calendar-week-grid .calendar-slot strong { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 0.68rem; } .calendar-week-grid .calendar-week-slot { width: 100%; box-sizing: border-box; } .calendar-week-grid article p { margin: 0; color: #6b737a; } .calendar-month-grid { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); gap: 8px; } .calendar-month-grid article { min-height: 82px; padding: 10px; color: #6b737a; } .calendar-month-grid article.has-slots { border-color: rgba(18, 175, 163, 0.18); background: #f0f7ff; color: #0a6f68; } .calendar-month-grid article.is-selectable { cursor: pointer; box-shadow: 0 10px 22px rgba(18, 175, 163, 0.1); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .calendar-month-grid article.is-selectable:hover, .calendar-month-grid article.is-selectable:focus-visible { border-color: rgba(18, 175, 163, 0.56); box-shadow: 0 14px 28px rgba(18, 175, 163, 0.18); outline: none; transform: translateY(-1px); } .calendar-month-grid article.is-selected { border-color: var(--accent); background: #e4f1ff; box-shadow: 0 0 0 3px rgba(18, 175, 163, 0.14); } .calendar-month-grid strong, .calendar-quarter-grid strong { display: block; color: #102a35; font-size: 1.2rem; } .calendar-quarter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; } .calendar-quarter-grid article { padding: 14px; } .calendar-quarter-grid span, .calendar-quarter-grid small, .calendar-month-grid small, .calendar-month-grid span { display: block; color: #6b737a; font-size: 0.78rem; font-weight: 800; } @media (max-width: 760px) { .calendar-view-tabs { justify-content: flex-start; } .calendar-month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .garage-planning-availability-form { display: grid; gap: 16px; padding: 0 24px 24px; } .garage-planning-checkbox-table { min-width: 760px; } .planning-availability-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; } .planning-availability-toggle input[type="checkbox"] { width: 18px; height: 18px; margin: 0; } .garage-planning-checkbox-table tr.is-calendar-selected td { background: #eaf5ff; box-shadow: inset 0 1px 0 rgba(18, 175, 163, 0.08), inset 0 -1px 0 rgba(18, 175, 163, 0.08); } .garage-planning-checkbox-table tr.is-calendar-selected td:first-child { box-shadow: inset 4px 0 0 var(--accent); } .calendar-view-tabs { display: grid; grid-template-columns: repeat(3, minmax(92px, 1fr)); gap: 8px; justify-content: end; width: min(100%, 430px); } .calendar-view-tabs button { width: 100%; justify-content: center; padding-inline: 9px; } .calendar-view-tabs .calendar-month-select-label { grid-column: 1 / -1; width: 100%; } @media (max-width: 760px) { .calendar-view-tabs { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); } } .calendar-date-card.is-past, .calendar-quarter-month.is-past { opacity: 0.46; background: #eef1f4 !important; color: #8a94a6; pointer-events: none; filter: grayscale(0.8); } .calendar-date-card.is-past .calendar-slot, .calendar-slot.is-disabled { background: rgba(102, 112, 133, 0.12); color: #8a94a6; pointer-events: none; } .calendar-slot.is-booked { border: 1px dashed rgba(102, 112, 133, 0.42); background: #e4e7ec; color: #6b737a; text-decoration: none; } .calendar-slot.is-booked small { color: #6b737a; font-weight: 900; } .calendar-slot.is-past-slot { border: 1px dashed rgba(102, 112, 133, 0.34); background: #f1f3f6; color: #8a94a6; } .calendar-date-card.is-fully-locked { border-color: rgba(102, 112, 133, 0.18) !important; background: #f2f4f7 !important; color: #8a94a6 !important; cursor: not-allowed; } .garage-planning-checkbox-table tr.is-slot-locked { background: #f8fafc; color: #6b737a; } .garage-planning-checkbox-table tr.is-slot-locked .planning-availability-toggle { cursor: not-allowed; opacity: 0.55; } .planning-availability-toggle input[type="checkbox"]:disabled { cursor: not-allowed; accent-color: #98a2b3; } .calendar-week-grid h3 small { display: block; margin-top: 3px; color: #6b737a; font-size: 0.72rem; text-transform: uppercase; } .calendar-month-grid .is-empty { min-height: 82px; border: 1px dashed rgba(102, 112, 133, 0.12); border-radius: 12px; background: transparent; } .calendar-real-quarter { grid-template-columns: repeat(3, minmax(0, 1fr)); } .calendar-quarter-month { min-height: 118px; } @media (max-width: 760px) { .calendar-real-quarter { grid-template-columns: 1fr; } } .invoice-remove-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 1px solid rgba(220, 38, 38, 0.22); border-radius: 999px; background: rgba(220, 38, 38, 0.08); color: #b42318; font-family: inherit; font-size: 0.86rem; font-weight: 800; line-height: 1; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .invoice-remove-button:hover, .invoice-remove-button:focus-visible { border-color: rgba(220, 38, 38, 0.36); background: #dc2626; color: #fff; outline: none; transform: translateY(-1px); } /* Role-aware professional theming */ .dashboard-body { --role-accent: var(--accent); --role-accent-dark: var(--accent-dark); --role-accent-soft: var(--accent-soft); --role-highlight: var(--gold); --role-sidebar-start: #ffffff; --role-sidebar-end: #f8fbff; --role-sidebar-text: #102a35; --role-topbar-start: #ffffff; --role-topbar-end: #f8fbff; --role-card-ring: rgba(18, 175, 163, 0.12); } .dashboard-body:not(.garage-portal-body):not(.admin-portal-body) { background: radial-gradient(circle at 14% 8%, rgba(18, 175, 163, 0.12), transparent 28%), radial-gradient(circle at 92% 4%, rgba(255, 173, 25, 0.12), transparent 24%), #f6f9fc; } .dashboard-body:not(.garage-portal-body):not(.admin-portal-body) .dashboard-topbar { border-bottom-color: rgba(18, 175, 163, 0.12); background: linear-gradient(90deg, var(--role-topbar-start), var(--role-topbar-end) 70%, #fff8e7); box-shadow: 0 12px 32px rgba(16, 32, 53, 0.08); } .dashboard-body:not(.garage-portal-body):not(.admin-portal-body) .dashboard-sidebar { background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%); } .dashboard-body:not(.garage-portal-body):not(.admin-portal-body) .dashboard-nav a.is-current { background: var(--brand-gradient); box-shadow: 0 12px 24px rgba(18, 175, 163, 0.2); } .garage-portal-body { --role-accent: #006d83; --role-accent-dark: #0a6f68; --role-accent-soft: #e1f4f7; --role-highlight: var(--gold); --role-sidebar-start: #102a35; --role-sidebar-end: #003b52; --role-sidebar-text: rgba(255, 255, 255, 0.84); --role-card-ring: rgba(0, 109, 131, 0.16); } /* Charte graphique "Espace Garage" (PDF, integree 2026-08-25) : menu lateral sur fond Deep Navy, element actif distingue par un fond clair et un accent teal - les variables --role-sidebar-* existaient deja mais n'etaient consommees par aucune regle .garage-portal-body. */ .garage-portal-body .dashboard-topbar { border-bottom-color: rgba(0, 109, 131, 0.18); background: linear-gradient(90deg, #ffffff 0%, #eef8f8 70%, #e1f4f7 100%); box-shadow: 0 12px 32px rgba(16, 32, 53, 0.08); } .garage-portal-body .dashboard-sidebar { border-right: none; background: linear-gradient(180deg, var(--role-sidebar-start), var(--role-sidebar-end)); } .garage-portal-body .dashboard-nav a { color: var(--role-sidebar-text); } .garage-portal-body .dashboard-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .garage-portal-body .dashboard-nav a.is-current { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 3px 0 0 var(--accent); } .garage-portal-body .dashboard-sidebar-gift { color: var(--accent); } .admin-portal-body { --role-accent: var(--accent); --role-accent-dark: #102a35; --role-accent-soft: var(--accent-soft); --role-highlight: #12afa3; --role-sidebar-start: #102a35; --role-sidebar-end: #15283d; --role-sidebar-text: rgba(255, 255, 255, 0.84); --role-card-ring: rgba(18, 175, 163, 0.16); background: radial-gradient(circle at 12% 8%, rgba(117, 103, 248, 0.1), transparent 28%), radial-gradient(circle at 90% 0%, rgba(18, 175, 163, 0.14), transparent 26%), #f7f8fb; } .admin-portal-body .dashboard-topbar { border-bottom: 1px solid var(--line); background: #fff; box-shadow: none; } .admin-portal-body .dashboard-sidebar { border-right: none; background: linear-gradient(180deg, var(--role-sidebar-start), var(--role-sidebar-end)); } .admin-portal-body .dashboard-nav a { color: var(--role-sidebar-text); } .admin-portal-body .dashboard-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .admin-portal-body .dashboard-nav a.is-current { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 3px 0 0 var(--accent); } .admin-portal-body .dashboard-nav a.is-current span { color: var(--accent); } /* L'espace admin place le topbar DANS la colonne de contenu (a cote de la sidebar, pas au-dessus) pour que la sidebar occupe toute la hauteur de l'ecran avec le logo tout en haut - contrairement aux autres portails (garage) ou le topbar reste un bandeau pleine largeur au-dessus de tout. */ .admin-portal-body main.dashboard-shell { min-height: 100vh; } .admin-portal-body .dashboard-sidebar { top: 0; height: 100vh; min-height: 100vh; overflow: hidden; } /* Le logo (dashboard-sidebar-brand) reste fixe en haut de la palette ; seul le menu de navigation defile en interne si la liste depasse la hauteur de l'ecran. */ .admin-portal-body .dashboard-sidebar-brand { flex-shrink: 0; } .admin-portal-body .dashboard-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .admin-portal-body .dashboard-main-col { display: flex; flex-direction: column; min-width: 0; } .admin-portal-body .dashboard-topbar { position: sticky; top: 0; z-index: 40; height: auto; padding: 14px 28px; } .dashboard-nav-group-label { padding: 14px 12px 4px; color: var(--gray-light, #9aa3a6); font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .admin-portal-body .dashboard-nav-group-label { color: rgba(255, 255, 255, 0.4); } .dashboard-nav-group-label:first-child { padding-top: 0; } .admin-topbar-account { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; } @media (max-width: 860px) { .admin-topbar-search { display: none; } } .dashboard-sidebar-brand { display: flex; align-items: center; padding: 4px 12px 20px; text-decoration: none; } .dashboard-sidebar-brand img { width: auto; height: 60px; object-fit: contain; } .dashboard-nav a .badge-count { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--amber); color: var(--navy); font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.62rem; font-weight: 700; } .admin-portal-body .account-avatar { border: none; background: linear-gradient(135deg, var(--accent), var(--violet)); color: var(--navy); font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.72rem; font-weight: 700; } .admin-portal-body .admin-topbar-iconbtn { background: var(--soft, #eceff0); } .admin-portal-body .admin-topbar-iconbtn:hover { background: var(--accent-soft); color: var(--accent-dark); } /* Tableau de bord (Vue globale) */ .admin-dashboard-date { color: var(--muted, #6b737a); font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .admin-dashboard-heading .primary-button { display: inline-flex; align-items: center; gap: 8px; } .admin-dashboard-heading .primary-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .admin-dashboard-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; } @media (max-width: 1150px) { .admin-dashboard-cols { grid-template-columns: 1fr; } } .dashboard-nav-link-inline { color: var(--accent); font-size: 0.82rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .dashboard-nav-link-inline:hover { text-decoration: underline; } .admin-activity-feed { display: flex; flex-direction: column; gap: 2px; padding: 8px; } .admin-feed-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px; border-radius: 10px; } .admin-feed-row:hover { background: var(--page, #f5f7f8); } .admin-feed-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; margin-top: 1px; border-radius: 8px; } .admin-feed-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .admin-feed-icon.teal { background: var(--accent-soft); color: var(--accent-dark); } .admin-feed-icon.violet { background: var(--violet-soft); color: var(--violet); } .admin-feed-icon.amber { background: var(--amber-soft); color: #8a5a0a; } .admin-feed-icon.red { background: var(--red-soft); color: var(--red); } .admin-feed-info { flex: 1; min-width: 0; } .admin-feed-info .t1 { font-size: 0.86rem; font-weight: 700; color: var(--navy); } .admin-feed-info .t2 { font-size: 0.78rem; color: var(--muted, #6b737a); margin-top: 1px; } .admin-feed-time { flex-shrink: 0; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.68rem; color: var(--gray-light, #9aa3a6); white-space: nowrap; margin-top: 2px; } .admin-topbar-search { display: flex; align-items: center; gap: 10px; width: min(340px, 32vw); height: 36px; padding: 0 14px; border-radius: var(--r-pill, 999px); background: var(--soft, #eceff0); } .admin-topbar-search svg { flex-shrink: 0; width: 15px; height: 15px; color: var(--muted, #6b737a); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .admin-topbar-search input { width: 100%; border: none; background: none; color: var(--navy, #102a35); font-family: inherit; font-size: 13.5px; outline: none; } .admin-topbar-search input::placeholder { color: var(--gray-light, #9aa3a6); } .admin-topbar-actions { display: flex; align-items: center; gap: 14px; } .admin-topbar-iconbtn { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted, #6b737a); transition: background 0.2s; } .admin-topbar-iconbtn:hover { background: var(--soft, #eceff0); } .admin-topbar-iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .admin-topbar-iconbtn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--red, #e5484d); border: 1.5px solid #fff; } /* Cartes indicateurs (stat cards) - coherence avec la charte graphique */ .admin-portal-body .analysis-insights { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .admin-portal-body .analysis-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .admin-portal-body .analysis-insights article::after { display: none; } .admin-portal-body .analysis-insights .stat-icon-wrap { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-dark); } .admin-portal-body .analysis-insights .stat-icon-wrap svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .admin-portal-body .analysis-insights article:nth-child(2) .stat-icon-wrap { background: var(--amber-soft); color: #8a5a0a; } .admin-portal-body .analysis-insights article:nth-child(3) .stat-icon-wrap { background: var(--violet-soft); color: var(--violet); } .admin-portal-body .analysis-insights article:nth-child(4) .stat-icon-wrap { background: var(--soft); color: var(--navy); } .admin-portal-body .analysis-insights strong { font-family: var(--font-mono, "JetBrains Mono", monospace); font-weight: 700; } .admin-portal-body .analysis-insights .s-top { display: flex; align-items: center; justify-content: space-between; } .admin-portal-body .analysis-insights .s-trend { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.72rem; font-weight: 700; color: var(--accent); } .admin-portal-body .analysis-insights article { position: relative; overflow: hidden; } .admin-portal-body .analysis-insights .stat-spark { position: absolute; bottom: 0; left: 0; width: 100%; height: 26px; color: var(--accent); opacity: 0.45; } .admin-portal-body .analysis-insights article:nth-child(2) .stat-spark { color: var(--amber); } .admin-portal-body .analysis-insights article:nth-child(3) .stat-spark { color: var(--violet); } .admin-portal-body .analysis-insights article:nth-child(4) .stat-spark { color: var(--navy); } /* Barre de filtres Garages - override le grid a 4 colonnes fixes de .technical-center-filters (pense pour un autre formulaire) par une ligne flex : recherche compacte, statut compact, pills alignees a droite, tout tient sur une seule ligne. */ .technical-center-filters.admin-garages-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; } .admin-garages-filter-bar > label:first-child { flex: 0 1 320px; min-width: 200px; } .admin-garages-filter-bar > label:nth-child(2) { flex: 0 0 170px; } .admin-garages-filter-bar .admin-status-pills { flex: 1 1 auto; justify-content: flex-end; } /* Meme hauteur que les pills (38px) pour la recherche et le select - la regle .technical-center-filters input/select (14px de padding vertical, pensee pour un autre formulaire) donne sinon des champs plus hauts que les boutons de la meme ligne. */ .technical-center-filters.admin-garages-filter-bar input, .technical-center-filters.admin-garages-filter-bar select { height: 38px; padding: 0 14px; border-radius: 10px; } #garages .analysis-table th:nth-child(3), #garages .analysis-table td:nth-child(3), #garages .analysis-table th:nth-child(4), #garages .analysis-table td:nth-child(4) { text-align: center; } /* Filtres (recherche + select + pills rapides) */ .admin-status-pills { display: flex; gap: 6px; flex-wrap: wrap; } .admin-status-pill { display: inline-flex; align-items: center; height: 38px; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.72rem; font-weight: 600; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--muted); background: #fff; transition: all 0.2s var(--ease, ease); white-space: nowrap; } .admin-status-pill:hover { border-color: var(--accent); color: var(--navy); } .admin-status-pill.is-active { background: var(--navy); border-color: var(--navy); color: #fff; } /* Cellule garage (avatar + nom + contact), reutilisable pour toute liste admin de type acteur (garages, prospects, centres). */ .admin-g-cell { display: flex; align-items: center; gap: 12px; } .admin-g-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--soft); color: var(--navy); font-family: var(--font-display, "Manrope", sans-serif); font-weight: 800; font-size: 0.78rem; } .admin-g-name { font-size: 0.86rem; font-weight: 700; color: var(--navy); } .admin-g-contact { font-size: 0.72rem; color: var(--muted); margin-top: 1px; } .admin-mono-cell { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.78rem; color: var(--muted); } .admin-credits-cell { font-family: var(--font-mono, "JetBrains Mono", monospace); font-weight: 700; color: var(--navy); } .admin-credits-cell.is-zero { color: var(--gray-light, #9aa3a6); font-weight: 500; } /* Actions de ligne : boutons inline (valider/refuser) + menu "..." pour le reste (modifier/ajuster credits/supprimer/voir la fiche). */ .admin-row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; position: relative; } /* Scopees sous .admin-row-actions/.admin-row-menu (specificite superieure a .analysis-table button et a l'ancienne regle pilule button[data-admin-action$="-approve/-reject"]) pour eviter tout heritage de fond/bordure/pilule venant de ces regles generiques de tableau. */ .admin-row-actions .admin-act-btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; min-height: 0; padding: 0; border: none; border-radius: 8px; background: none; color: var(--muted); transition: background 0.15s, color 0.15s; } .admin-row-actions .admin-act-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .admin-row-actions .admin-act-btn:hover { background: var(--soft); color: var(--navy); } /* Icones d'action nues (valider/refuser) - jamais dans un encart/cercle, toujours colorees pour rester lisibles au premier coup d'oeil. */ .admin-row-actions .admin-act-icon { position: relative; flex-shrink: 0; width: 30px; height: 30px; min-height: 0; padding: 0; border: none; border-radius: 0; background: none; line-height: 0; } .admin-row-actions .admin-act-icon svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .admin-row-actions .admin-act-icon.is-approve { color: var(--accent); } /* Ajustement optique : le trace du check n'est pas symetrique dans son viewBox (contrairement au X), donc un centrage mathematique le laisse visuellement trop haut a cote du X - correction manuelle. */ .admin-row-actions .admin-act-icon.is-approve svg { top: calc(50% + 2px); } .admin-row-actions .admin-act-icon.is-approve:hover { color: var(--accent-dark); } .admin-row-actions .admin-act-icon.is-reject { color: var(--red); } .admin-row-actions .admin-act-icon.is-reject:hover { color: #b4262a; } .admin-row-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 200px; padding: 6px; background: #fff; border: 1px solid rgba(16, 42, 53, 0.06); border-radius: var(--r-md, 12px); box-shadow: 0 20px 40px -12px rgba(16, 42, 53, 0.28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s var(--ease, ease), transform 0.2s var(--ease, ease), visibility 0.2s; text-align: left; } .admin-row-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .admin-row-menu .admin-row-menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 0; padding: 9px 10px; border: none; border-radius: var(--r-sm, 8px); background: none; font-family: inherit; font-size: 0.8rem; font-weight: 600; color: var(--navy); text-align: left; text-decoration: none; white-space: normal; transition: background 0.15s; } .admin-row-menu .admin-row-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .admin-row-menu .admin-row-menu-item:hover { background: var(--page, #f5f7f8); color: var(--navy); } .admin-row-menu .admin-row-menu-item.is-danger { color: var(--red); } .admin-row-menu .admin-row-menu-item.is-danger svg { color: var(--red); } .admin-row-menu-sep { height: 1px; margin: 5px 2px; background: var(--line); } /* Pagination */ .admin-pagination-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); } .admin-pagination-info { font-size: 0.8rem; color: var(--muted); } .admin-pagination-info strong { color: var(--navy); } .admin-pager { display: flex; align-items: center; gap: 6px; } .admin-page-btn { min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--r-sm, 8px); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.76rem; color: var(--muted); border: 1px solid var(--line); background: #fff; transition: all 0.15s; } .admin-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--navy); } .admin-page-btn.is-active { background: var(--navy); color: #fff; border-color: var(--navy); } .admin-page-size-field { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); white-space: nowrap; } /* Meme gabarit que .admin-page-btn/"Page x/x" a cote (32px de haut, texte compact) - le select global (styles.css:4574, width:100%, padding 12px 13px) le rendait beaucoup plus large/haut et faisait passer "Par page" a la ligne faute de place. */ .admin-page-size-select { width: auto; height: 32px; padding: 0 8px; border-radius: var(--r-sm, 8px); font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.76rem; color: var(--muted); } .admin-page-btn:disabled { opacity: 0.35; cursor: not-allowed; } .admin-empty-state { padding: 50px 24px; text-align: center; } .admin-empty-state .e-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: var(--soft); color: var(--muted); } .admin-empty-state .e-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .admin-empty-state h4 { font-size: 0.88rem; margin-bottom: 4px; color: var(--navy); } .admin-empty-state p { font-size: 0.78rem; color: var(--muted); } /* Panneau "Repartition par region/departement" (carte + liste unifiees) */ .admin-region-panel { padding: 22px 24px; margin-bottom: 20px; } .admin-region-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .admin-region-head h3 { font-size: 0.95rem; color: var(--navy); } .admin-region-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--accent); cursor: pointer; } .admin-region-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .admin-region-note { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.72rem; color: var(--muted); margin-left: auto; } .admin-region-split { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; } @media (max-width: 980px) { .admin-region-split { grid-template-columns: 1fr; } } .admin-region-list { display: flex; flex-direction: column; gap: 8px; } .admin-region-row { display: grid; grid-template-columns: 170px 1fr 50px 100px; align-items: center; gap: 14px; padding: 8px 10px; border-radius: var(--r-sm, 8px); cursor: pointer; transition: background 0.15s; } .admin-region-row:hover { background: var(--page, #f5f7f8); } .admin-region-row.is-active { background: var(--accent-soft); } .admin-region-row.is-restricted { opacity: 0.4; pointer-events: none; cursor: not-allowed; } @media (max-width: 820px) { .admin-region-row { grid-template-columns: 120px 1fr 40px; } .admin-region-row .admin-region-priority { display: none; } } .admin-region-name { font-size: 0.82rem; font-weight: 700; color: var(--navy); } .admin-region-bar-track { height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; } .admin-region-bar-fill { height: 100%; border-radius: 999px; background: var(--brand-gradient, var(--accent)); transition: width 0.5s var(--ease, ease); } .admin-region-count { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.76rem; color: var(--muted); text-align: right; } .admin-region-priority { display: flex; justify-content: flex-end; } .admin-map-wrap { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--page, #f5f7f8); } .admin-map-wrap svg { display: block; width: 100%; height: auto; } .admin-map-legend { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; } .admin-map-legend .lg-item { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.66rem; color: var(--muted); } .admin-map-legend .lg-swatch { width: 11px; height: 11px; border-radius: 3px; } /* Fil d'Ariane (region/departement selectionnes) */ .admin-crumb-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .admin-crumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; } .admin-crumb a { color: var(--accent); font-weight: 600; } .admin-crumb a:hover { text-decoration: underline; } .admin-crumb .sep { color: var(--gray-light, #9aa3a6); } .admin-crumb .current { font-weight: 700; color: var(--navy); } .admin-crumb-count { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.76rem; font-weight: 700; color: var(--accent); } .admin-contact-empty { color: var(--gray-light, #9aa3a6); } .technical-center-filters.admin-prospects-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; /* Sans largeur explicite, ce conteneur (enfant unique d'un .analysis-table-header en display:flex/justify-content:space-between) se limite a son contenu min - le ratio 3:1:1 ci-dessous n'aurait alors aucun espace libre a distribuer et s'ecraserait au min-width de chacun. */ width: 100%; } /* Recherche = 3x la largeur de Statut/Priorite (pas de bouton "Filtrer" - la recherche se declenche automatiquement, cf listeners JS). Min-width volontairement bas : un min-width trop proche de la part "juste" (1/5 ou 3/5 de la largeur dispo) declenche le gel anti-violation du flexbox, qui ecrase le ratio 3:1:1 (verifie : 160px de min sur les selects cassait le ratio en 2:1:1 a 1440px). */ .technical-center-filters.admin-prospects-filter-bar > label { flex: 1 1 0; min-width: 110px; } .technical-center-filters.admin-prospects-filter-bar > label.admin-search-field { flex: 3 1 0; min-width: 220px; } /* Meme hauteur (38px) que les selects/bouton de la meme ligne - la regle .technical-center-filters input (14px de padding vertical) donnerait sinon un champ plus haut. Le padding vit sur .admin-search-input-wrap, l'input lui-meme est remis a plat (border/padding a 0) pour ne pas le doubler. */ .technical-center-filters.admin-prospects-filter-bar select { height: 38px; padding: 0 14px; border-radius: 10px; } .admin-search-input-wrap { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid rgba(0, 74, 112, 0.16); border-radius: 10px; background: #fff; box-sizing: border-box; } .admin-search-input-wrap svg { flex-shrink: 0; width: 15px; height: 15px; color: var(--muted, #6b737a); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } /* .admin-search-input-wrap input seul seul (0,1,1) est a egale specificite avec .technical-center-filters input (declaree plus loin dans le fichier) et perdrait sur l'ordre des regles - deux classes (0,2,0) pour gagner de maniere fiable, meme pattern que .admin-act-icon/.admin-act-btn plus haut. */ .admin-search-input-wrap .admin-search-input { width: 100%; border: none; border-radius: 0; padding: 0; outline: none; background: none; appearance: none; -webkit-appearance: none; font: inherit; font-size: 13.5px; color: var(--navy, #102a35); } .admin-search-input-wrap .admin-search-input::placeholder { color: var(--gray-light, #9aa3a6); } /* Etat de chargement (skeleton) - reutilise le meme quadrillage 4 colonnes que .analysis-insights le temps du premier chargement reel des donnees. */ .admin-skeleton { background: linear-gradient(90deg, var(--soft, #eceff0) 25%, #f8f9fa 37%, var(--soft, #eceff0) 63%); background-size: 400% 100%; animation: adminShimmer 1.4s ease infinite; border-radius: 10px; } @keyframes adminShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .admin-skeleton-stat { height: 108px; border-radius: var(--r-lg, 18px); } .admin-skeleton-row { height: 44px; margin: 6px 0; } .admin-fade-in { animation: adminFadeIn 0.45s var(--ease, ease) both; } @keyframes adminFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .admin-skeleton { animation: none; } .admin-fade-in { animation: none; } } /* Tableaux - en-tete mono, actions valider/refuser en pilule */ .admin-portal-body .analysis-table th { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; } .admin-portal-body button[data-admin-action$="-approve"]:not(.admin-act-icon), .admin-portal-body button[data-admin-action$="-reject"]:not(.admin-act-icon) { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; transition: background 0.15s, color 0.15s; } .admin-portal-body button[data-admin-action$="-approve"]:not(.admin-act-icon) { background: var(--accent-soft); color: #0c7a70; } .admin-portal-body button[data-admin-action$="-approve"]:not(.admin-act-icon):hover { background: var(--accent); color: #fff; } .admin-portal-body button[data-admin-action$="-reject"]:not(.admin-act-icon) { background: var(--red-soft); color: #b4262a; } .admin-portal-body button[data-admin-action$="-reject"]:not(.admin-act-icon):hover { background: var(--red); color: #fff; } .dashboard-body .dashboard-page-heading, .dashboard-body .analysis-table-card, .dashboard-body .profile-form-card, .dashboard-body .analysis-insights article, .dashboard-card { border-color: var(--role-card-ring); } .dashboard-body .eyebrow, .dashboard-body .dashboard-card a, .dashboard-body .dashboard-account-panel a:hover, .dashboard-body .dashboard-account-panel button:hover { color: var(--role-accent); } .dashboard-body .primary-button, .dashboard-body .dashboard-primary-action { background: linear-gradient(135deg, var(--role-accent), var(--blue)); box-shadow: 0 14px 28px rgba(18, 175, 163, 0.18); } .centers-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0; } .centers-hero { padding: 44px; border: 1px solid rgba(0, 74, 112, 0.12); border-radius: 26px; background: radial-gradient(circle at top left, rgba(0, 119, 204, 0.14), transparent 32%), radial-gradient(circle at bottom right, rgba(255, 173, 31, 0.24), transparent 28%), #fff; box-shadow: 0 24px 60px rgba(6, 48, 75, 0.11); } .centers-hero h1 { max-width: 820px; margin: 12px 0 14px; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.02; color: var(--ink); } .centers-hero > p { max-width: 760px; color: var(--muted); font-size: 1.12rem; line-height: 1.7; } .centers-search { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: end; gap: 14px; margin-top: 28px; } .centers-search label, .technical-center-filters label, .technical-center-admin-form label { display: grid; gap: 8px; color: var(--ink); font-weight: 800; } .centers-search input, .technical-center-filters input, .technical-center-filters select, .technical-center-admin-form input, .technical-center-admin-form select, .technical-center-admin-form textarea { width: 100%; border: 1px solid rgba(0, 74, 112, 0.16); border-radius: 14px; background: #fff; padding: 14px 16px; color: var(--ink); font: inherit; font-weight: 400; outline: none; } .centers-search input:focus, .technical-center-filters input:focus, .technical-center-filters select:focus, .technical-center-admin-form input:focus, .technical-center-admin-form select:focus, .technical-center-admin-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 119, 204, 0.12); } .centers-results-card { margin-top: 34px; } .centers-result-grid { display: grid; gap: 18px; } .center-result-card, .center-empty-card { padding: 24px; border: 1px solid rgba(0, 74, 112, 0.12); border-radius: 22px; background: #fff; } .center-result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .center-result-card h3, .center-empty-card h3 { margin: 8px 0; color: var(--ink); font-size: 1.35rem; } .center-network, .center-partner-badge { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 7px 11px; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; } .center-network { background: rgba(0, 119, 204, 0.1); color: var(--deep-blue); } .center-partner-badge { background: rgba(255, 173, 31, 0.22); color: #805404; } .center-result-card p, .center-empty-card p { color: var(--muted); } .center-distance { font-weight: 900; color: var(--blue) !important; } .center-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .technical-center-filters { display: grid; grid-template-columns: minmax(220px, 1fr) 140px 190px auto; gap: 14px; align-items: end; } .table-action-link { display: inline-flex; min-height: 40px; padding: 10px 14px; text-decoration: none; } .technical-center-detail-shell .dashboard-sidebar .dashboard-nav a { min-height: 46px; } .technical-center-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-bottom: 22px; } .technical-center-detail-grid > .analysis-table-card { padding: 26px; } .technical-center-detail-grid > .analysis-table-card > .analysis-table-header { padding: 24px 0; margin: -26px -26px 4px; padding-left: 26px; padding-right: 26px; } .technical-center-definition-list { display: grid; grid-template-columns: 150px 1fr; gap: 12px 18px; margin: 22px 0 0; } .technical-center-definition-list dt { color: var(--muted); font-weight: 800; } .technical-center-definition-list dd { margin: 0; color: var(--ink); font-weight: 700; } .technical-center-admin-form { display: grid; gap: 16px; margin-top: 18px; } .technical-center-qr-preview { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; } .technical-center-qr-preview canvas { border: 1px solid var(--line, #e5e5e5); border-radius: 12px; padding: 12px; background: #fff; } .technical-center-checkbox { display: flex !important; grid-template-columns: none !important; align-items: center; flex-direction: row; gap: 12px !important; } .technical-center-checkbox input { width: 18px; height: 18px; padding: 0; } .admin-permissions-grid { display: grid; gap: 10px; margin-top: 10px; } .admin-permission-row { display: grid; grid-template-columns: minmax(140px, 1fr) auto auto; align-items: center; gap: 16px; padding: 10px 14px; border: 1px solid rgba(0, 74, 112, 0.16); border-radius: 12px; } .admin-editing-banner { background: rgba(0, 119, 204, 0.1); border: 1px solid rgba(0, 119, 204, 0.3); border-radius: 10px; padding: 10px 14px; font-weight: 800; color: var(--blue, #438bcd); } .admin-territory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; max-height: 360px; overflow-y: auto; padding: 4px; } .territory-region-group { border: 1px solid rgba(0, 74, 112, 0.16); border-radius: 12px; padding: 10px 12px; } .territory-region-group legend { font-weight: 800; padding: 0 4px; } .territory-dept-option { font-weight: 400 !important; font-size: 0.85rem; } .technical-center-interactions { display: grid; gap: 12px; margin-top: 18px; } .technical-center-interactions article { border: 1px solid rgba(0, 74, 112, 0.12); border-radius: 16px; padding: 14px; background: rgba(235, 245, 252, 0.5); } .technical-center-interactions strong, .technical-center-interactions span { display: block; } .technical-center-interactions span { margin-top: 4px; color: var(--muted); font-size: 0.9rem; } .dashboard-body .status-pill.status-success { background: var(--green-soft); color: var(--green); } .dashboard-body .status-pill.status-warning { background: var(--gold-soft); color: #8a5a00; } .pricing-page { display: none; } .pricing-page.is-active { display: block; } .pricing-panel { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(215, 226, 238, 0.92); border-radius: 24px; box-shadow: 0 22px 52px rgba(16, 32, 53, 0.1); display: grid; gap: 22px; overflow: hidden; padding: 28px; } .pricing-header { align-items: end; display: flex; gap: 18px; justify-content: space-between; } .pricing-header h2 { color: var(--navy); margin: 0; } .pricing-status { color: var(--muted); margin: 0; } .pricing-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Choix du numero Secretariat IA (option A "j'ai deja mon numero" vs option B "louer un numero Nexiamo") - 2 blocs cote a cote, chacun independant du nombre de colonnes de .pricing-grid (qui garde ses 3 colonnes a l'interieur du bloc "louer"). */ .secretary-number-options { display: flex; flex-direction: column; gap: 20px; margin-top: 14px; } .gd-own-number-card .garage-profile-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 560px) { .gd-own-number-card .garage-profile-form { grid-template-columns: 1fr; } } .secretary-number-option { padding: 20px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); } .secretary-number-option h4 { margin: 0 0 6px; color: var(--navy); } .secretary-number-option > p { margin: 0 0 14px; color: var(--muted); font-size: 0.86rem; } .secretary-number-option .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .secretary-number-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .secretary-number-choice { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); transition: border-color 0.15s ease, background 0.15s ease; } .secretary-number-choice strong { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.92rem; } .secretary-number-choice span { font-size: 0.72rem; color: var(--muted); } .secretary-number-choice:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); } .secretary-number-choice:disabled { opacity: 0.5; cursor: not-allowed; } .pricing-card { background: radial-gradient(circle at 100% 0%, rgba(255, 173, 25, 0.18), transparent 30%), radial-gradient(circle at 100% 100%, rgba(0, 119, 204, 0.14), transparent 28%), #fff; border: 1px solid rgba(215, 226, 238, 0.94); border-radius: 22px; box-shadow: 0 18px 36px rgba(16, 32, 53, 0.08); display: grid; gap: 18px; padding: 24px; } .pricing-card h3 { color: var(--navy); font-size: clamp(1.35rem, 2vw, 1.8rem); margin: 6px 0 10px; } .pricing-card p, .pricing-card li, .pricing-price span { color: var(--muted); line-height: 1.55; } .pricing-price strong { color: var(--accent-dark); display: block; font-size: clamp(1.8rem, 3vw, 2.5rem); } .pricing-card ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; } .pricing-card li { align-items: center; display: flex; gap: 10px; } .pricing-card li::before { background: linear-gradient(135deg, var(--accent), var(--gold)); border-radius: 999px; color: #fff; content: "✓"; display: inline-grid; flex: 0 0 22px; font-size: 0.85rem; height: 22px; place-items: center; width: 22px; } @media (max-width: 980px) { .pricing-header { align-items: start; flex-direction: column; } .pricing-grid { grid-template-columns: 1fr; } } /* Pricing landing page - CVP partner plans */ .pricing-body { background: radial-gradient(circle at 8% 8%, rgba(0, 119, 204, 0.12), transparent 28%), radial-gradient(circle at 92% 2%, rgba(255, 173, 25, 0.16), transparent 24%), linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%); min-height: 100vh; } .pricing-body .pricing-topbar { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(18px); } .pricing-shell { display: grid; gap: 34px; margin: 0 auto; max-width: 1180px; padding: 34px 22px 70px; } .pricing-hero { align-items: center; display: grid; gap: 32px; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); min-height: 430px; padding: 44px 0 18px; } .pricing-hero-copy { display: grid; gap: 20px; } .pricing-hero h1 { color: var(--navy); font-size: clamp(2.45rem, 5.8vw, 5.2rem); line-height: 0.98; margin: 0; max-width: 920px; } .pricing-hero p { color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.55; margin: 0; max-width: 760px; } .pricing-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } .pricing-hero-actions a { text-decoration: none; } .pricing-hero-card { background: radial-gradient(circle at 100% 0%, rgba(255, 173, 25, 0.24), transparent 36%), radial-gradient(circle at 0% 100%, rgba(0, 119, 204, 0.18), transparent 34%), #fff; border: 1px solid rgba(215, 226, 238, 0.95); border-radius: 28px; box-shadow: 0 24px 64px rgba(16, 32, 53, 0.14); display: grid; gap: 16px; padding: 28px; } .pricing-hero-card strong { color: var(--navy); font-size: 1.65rem; line-height: 1.1; } .pricing-hero-card p { color: var(--muted); font-size: 1rem; line-height: 1.5; margin: 0; } .pricing-hero-badge, .pricing-popular { background: linear-gradient(135deg, var(--gold), #ffd271); border-radius: 999px; color: #24180a; display: inline-flex; font-size: 0.74rem; font-weight: 900; justify-self: start; letter-spacing: 0.04em; padding: 8px 12px; text-transform: uppercase; } .pricing-mini-stats { display: grid; gap: 10px; } .pricing-mini-stats span { align-items: center; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(215, 226, 238, 0.9); border-radius: 16px; color: var(--muted); display: flex; gap: 10px; padding: 12px; } .pricing-mini-stats b { color: var(--accent-dark); } .pricing-benefits { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pricing-benefits article, .pricing-body .pricing-compare, .pricing-support, .pricing-faq { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(215, 226, 238, 0.92); border-radius: 24px; box-shadow: 0 18px 44px rgba(16, 32, 53, 0.08); } .pricing-benefits article { display: grid; gap: 10px; padding: 24px; } .pricing-benefits span { align-items: center; background: rgba(0, 119, 204, 0.1); border-radius: 14px; color: var(--accent-dark); display: inline-flex; font-weight: 900; height: 42px; justify-content: center; width: 42px; } .pricing-benefits h2 { color: var(--navy); font-size: 1.2rem; margin: 0; } .pricing-benefits p, .pricing-header p:not(.eyebrow), .pricing-support p, .pricing-faq p { color: var(--muted); line-height: 1.55; margin: 0; } .pricing-body .pricing-panel, .pricing-body .pricing-compare { scroll-margin-top: 110px; } .pricing-body .pricing-header p:not(.eyebrow) { margin-top: 8px; } .pricing-grid-featured { align-items: stretch; } .pricing-body .pricing-card { min-height: 100%; position: relative; } .pricing-card.is-highlighted { border-color: rgba(255, 173, 25, 0.55); box-shadow: 0 28px 70px rgba(16, 32, 53, 0.16); transform: translateY(-10px); } .pricing-card.is-highlighted::before { background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 22px 22px 0 0; content: ""; height: 8px; inset: 0 0 auto; position: absolute; } .pricing-popular { position: absolute; right: 18px; top: 18px; } .pricing-body .pricing-card .primary-button { align-self: end; justify-content: center; width: 100%; } .pricing-compare { display: grid; gap: 20px; overflow: hidden; padding: 28px; } .pricing-compare-table-wrap { border: 1px solid rgba(215, 226, 238, 0.92); border-radius: 20px; overflow-x: auto; } .pricing-compare-table { border-collapse: collapse; min-width: 760px; width: 100%; } .pricing-compare-table th { background: #f7fbff; color: var(--navy); font-size: 0.82rem; letter-spacing: 0.03em; padding: 16px; text-align: left; text-transform: uppercase; } .pricing-compare-table td { border-top: 1px solid rgba(215, 226, 238, 0.92); color: var(--muted); padding: 15px 16px; } .pricing-compare-table td:first-child { color: var(--navy); font-weight: 800; } .compare-check { background: rgba(22, 163, 74, 0.12); border-radius: 999px; color: #16833c; display: inline-flex; font-weight: 900; padding: 7px 10px; } .compare-muted { color: #9aa8b7; } .pricing-support { align-items: center; display: flex; gap: 28px; justify-content: space-between; padding: 30px; } .pricing-support h2, .pricing-faq h2 { color: var(--navy); margin: 0 0 10px; } .pricing-faq { display: grid; gap: 14px; padding: 28px; } .pricing-faq details { background: #fff; border: 1px solid rgba(215, 226, 238, 0.92); border-radius: 18px; padding: 18px 20px; } .pricing-faq summary { color: var(--navy); cursor: pointer; font-weight: 900; } .pricing-faq details p { margin-top: 12px; } @media (max-width: 980px) { .pricing-hero, .pricing-benefits { grid-template-columns: 1fr; } .pricing-hero { min-height: auto; padding-top: 24px; } .pricing-card.is-highlighted { transform: none; } .pricing-support { align-items: stretch; flex-direction: column; } } /* Pricing catalogue alignment refinements */ .pricing-grid-featured { align-items: stretch; gap: 22px; grid-auto-rows: 1fr; } .pricing-grid-featured .pricing-card { display: grid; grid-template-rows: auto auto minmax(168px, 1fr) auto; height: 100%; min-height: 520px; padding: 28px; } .pricing-grid-featured .pricing-card > div:first-of-type { min-height: 162px; padding-right: 8px; } .pricing-grid-featured .pricing-card h3 { min-height: 2.25em; } .pricing-grid-featured .pricing-card p { margin-bottom: 0; } .pricing-grid-featured .pricing-price { align-self: start; border-bottom: 1px solid rgba(215, 226, 238, 0.82); border-top: 1px solid rgba(215, 226, 238, 0.82); min-height: 104px; padding: 18px 0 16px; } .pricing-grid-featured .pricing-price strong { line-height: 1; white-space: nowrap; } .pricing-grid-featured .pricing-card ul { align-content: start; min-height: 176px; } .pricing-grid-featured .pricing-card li { min-height: 28px; } .pricing-grid-featured .pricing-card .primary-button { align-self: end; margin-top: 8px; min-height: 54px; } .pricing-grid-featured .pricing-card.is-highlighted { transform: none; } .pricing-grid-featured .pricing-card.is-highlighted .pricing-popular { top: 16px; } @media (max-width: 980px) { .pricing-grid-featured { grid-auto-rows: auto; } .pricing-grid-featured .pricing-card { grid-template-rows: auto; min-height: auto; } .pricing-grid-featured .pricing-card > div:first-of-type, .pricing-grid-featured .pricing-card h3, .pricing-grid-featured .pricing-card ul, .pricing-grid-featured .pricing-price { min-height: 0; } } /* Abonnement isolé des packs RDV : l'abonnement est le préalable obligatoire, les packs ne sont qu'un complément pay-as-you-go affiché en dessous. */ .pricing-subscription-block { margin: 0 auto; max-width: 440px; } .pricing-subscription-block .pricing-card { min-height: 0; } .pricing-packs-intro { border-top: 1px solid rgba(215, 226, 238, 0.7); display: grid; gap: 6px; margin-top: 12px; padding-top: 28px; text-align: center; } .pricing-packs-intro h3 { color: var(--navy); font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin: 0; } .pricing-packs-intro p { color: var(--muted); margin: 0 auto; max-width: 640px; } .pricing-grid-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 980px) { .pricing-grid-packs { grid-template-columns: 1fr; } } /* Charte graphique : refonte visuelle des tarifs de l'accueil (mockup fourni 2026-08-26). Scope a .tarifs-v2 pour ne pas toucher tarifs.html, garage-parametrage.html ni admin.html qui partagent le meme composant .pricing-card / renderOfferCard() cote app.js. */ .tarifs-v2 .pricing-panel { background: #fff; border: none; box-shadow: none; } .tarifs-v2 .pricing-card { background: #fff; border: none; box-shadow: none; transition: transform 200ms ease, box-shadow 200ms ease; } .tarifs-v2 .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(16, 32, 53, 0.1); } .tarifs-v2 .pricing-card li::before { background: var(--brand-gradient); } .tarifs-v2 .pricing-price strong { color: var(--navy); } .tarifs-v2 .pricing-subscription-block .pricing-card { position: relative; border: none; background: linear-gradient(180deg, var(--accent-soft) 0%, #fff 140px); } .tarifs-v2 .pricing-subscription-block .pricing-card::before { content: ""; display: block; width: 46px; height: 46px; border-radius: 14px; background: var(--brand-gradient); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l1.5-4.5A2 2 0 0 1 6.4 7h11.2a2 2 0 0 1 1.9 1.5L21 13'/%3E%3Crect x='3' y='13' width='18' height='5' rx='1.5'/%3E%3Ccircle cx='7.5' cy='18' r='1.3'/%3E%3Ccircle cx='16.5' cy='18' r='1.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l1.5-4.5A2 2 0 0 1 6.4 7h11.2a2 2 0 0 1 1.9 1.5L21 13'/%3E%3Crect x='3' y='13' width='18' height='5' rx='1.5'/%3E%3Ccircle cx='7.5' cy='18' r='1.3'/%3E%3Ccircle cx='16.5' cy='18' r='1.3'/%3E%3C/svg%3E"); -webkit-mask-size: 60%; mask-size: 60%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; order: -1; } .tarifs-v2 .pricing-subscription-block .pricing-price { border-top: 1px solid rgba(18, 175, 163, 0.2); border-bottom: 1px solid rgba(18, 175, 163, 0.2); padding: 16px 0; } .tarifs-v2 .pricing-subscription-block .pricing-price strong { font-size: clamp(2.2rem, 4vw, 3rem); } .tarifs-v2 .pricing-grid-packs .pricing-card { text-align: center; padding: 22px 18px; } .tarifs-v2 .pricing-grid-packs .pricing-card > div:first-of-type { text-align: left; } .tarifs-v2 .pricing-grid-packs .pricing-price { justify-items: center; } /* Le wrapper
ne couvre en realite que la section FAQ de cette page (voir tarifs.html) - les regles .tarifs-v2 ci-dessus ne s'appliquent donc jamais aux cartes de tarifs elles-memes, qui vivent dans une
plus haut dans le document. Regle correctement portee, appliquee reellement : centre le prix (strong+span), laisse la description (hors .pricing-price) alignee a gauche comme aujourd'hui. */ .pricing-grid-packs .pricing-card .pricing-price { text-align: center; } .tarifs-v2 .pricing-grid-packs ul { justify-items: center; } .tarifs-v2 .pricing-grid-packs li { justify-content: center; } /* Pricing growth panel */ .pricing-growth-panel { align-items: stretch; background: radial-gradient(circle at 100% 0%, rgba(255, 173, 25, 0.18), transparent 30%), radial-gradient(circle at 0% 100%, rgba(0, 119, 204, 0.14), transparent 30%), #fff; border: 1px solid rgba(215, 226, 238, 0.92); border-radius: 24px; box-shadow: 0 22px 52px rgba(16, 32, 53, 0.1); display: grid; gap: 26px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); padding: 30px; } .pricing-growth-copy { display: grid; gap: 12px; align-content: center; } .pricing-growth-copy h2 { color: var(--navy); font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.05; margin: 0; } .pricing-growth-copy p:not(.eyebrow) { color: var(--muted); font-size: 1.04rem; line-height: 1.6; margin: 0; } .pricing-growth-list { display: grid; gap: 14px; } .pricing-growth-list article { background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(215, 226, 238, 0.92); border-radius: 18px; display: grid; gap: 6px; padding: 18px 20px; } .pricing-growth-list strong { color: var(--accent-dark); font-size: 1.05rem; } .pricing-growth-list span { color: var(--muted); line-height: 1.5; } @media (max-width: 980px) { .pricing-growth-panel { grid-template-columns: 1fr; padding: 24px; } } /* Detailed partner value panel */ .pricing-growth-panel-detailed { grid-template-columns: 1fr; } .pricing-growth-intro { display: grid; gap: 12px; max-width: 900px; } .pricing-growth-intro h2 { color: var(--navy); font-size: clamp(1.85rem, 3vw, 3rem); line-height: 1.08; margin: 0; } .pricing-growth-intro p:not(.eyebrow) { color: var(--muted); font-size: 1.1rem; line-height: 1.55; margin: 0; } .pricing-growth-detail-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pricing-growth-detail-grid article { background: rgba(255, 255, 255, 0.84); border: 1px solid rgba(215, 226, 238, 0.92); border-radius: 18px; box-shadow: 0 14px 30px rgba(16, 32, 53, 0.06); display: grid; gap: 10px; padding: 20px; } .pricing-growth-detail-grid h3 { color: var(--navy); font-size: 1.18rem; line-height: 1.25; margin: 0; } .pricing-growth-detail-grid p, .pricing-growth-detail-grid li { color: var(--muted); line-height: 1.55; } .pricing-growth-detail-grid p, .pricing-growth-detail-grid ul { margin: 0; } .pricing-growth-detail-grid ul { display: grid; gap: 6px; padding-left: 22px; } @media (max-width: 980px) { .pricing-growth-detail-grid { grid-template-columns: 1fr; } } @media (max-width: 980px) { .centers-shell { width: min(100% - 24px, 1180px); padding: 34px 0; } .centers-hero { padding: 28px 20px; } .centers-search, .technical-center-filters, .technical-center-detail-grid { grid-template-columns: 1fr; } .technical-center-definition-list { grid-template-columns: 1fr; } } .home-header-nav { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; gap: 8px; margin: 0 18px; } .home-header-nav a { position: relative; color: var(--muted); font-size: 0.98rem; font-weight: 850; padding: 10px 12px; text-decoration: none; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; white-space: nowrap; } .home-header-nav a::after { position: absolute; right: 12px; bottom: 5px; left: 12px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--accent)); content: ""; opacity: 0; transform: scaleX(0.4); transition: opacity 0.2s ease, transform 0.2s ease; } .home-header-nav a:hover, .home-header-nav a:focus-visible { color: var(--accent-dark); background: rgba(0, 119, 204, 0.06); border-radius: 999px; transform: translateY(-1px); } .home-header-nav a:hover::after, .home-header-nav a:focus-visible::after { opacity: 1; transform: scaleX(1); } .home-center-search-section { display: grid; gap: 22px; margin: 72px 0; padding: 38px; border: 1px solid rgba(0, 74, 112, 0.12); border-radius: 28px; background: radial-gradient(circle at 0% 0%, rgba(0, 119, 204, 0.13), transparent 34%), radial-gradient(circle at 100% 0%, rgba(255, 173, 31, 0.22), transparent 30%), #fff; box-shadow: 0 24px 58px rgba(6, 48, 75, 0.1); scroll-margin-top: 140px; } .home-center-search-copy { max-width: 860px; } .home-center-search-copy h2 { color: var(--ink); font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.05; margin: 8px 0 12px; } .home-center-search-copy p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; line-height: 1.65; margin: 0; } .home-centers-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-center-result-card { display: grid; align-content: start; } .home-centers-full-link { justify-self: start; text-decoration: none; } @media (max-width: 980px) { .home-header-nav { width: 100%; order: 3; } .home-header-nav a { width: 100%; text-align: center; } .home-center-search-section { margin: 42px 0; padding: 24px 18px; scroll-margin-top: 180px; } .home-centers-result-grid { grid-template-columns: 1fr; } } .cvp-map-card { margin-top: 34px; } .cvp-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: stretch; } .cvp-google-map, .home-partner-google-map { min-height: 460px; width: 100%; border: 1px solid rgba(0, 74, 112, 0.14); border-radius: 22px; overflow: hidden; background: radial-gradient(circle at 20% 10%, rgba(0, 119, 204, 0.13), transparent 32%), radial-gradient(circle at 90% 90%, rgba(255, 173, 31, 0.18), transparent 30%), #eef6fb; display: grid; place-items: center; color: var(--muted); font-weight: 800; } .cvp-google-map-card { display: grid; gap: 12px; } .home-partner-google-map { min-height: 430px; } .cvp-map-side-panel { border: 1px solid rgba(0, 74, 112, 0.12); border-radius: 20px; background: rgba(255, 255, 255, 0.88); padding: 18px; } .cvp-map-legend { display: grid; gap: 12px; margin-top: 16px; } .cvp-map-legend span { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; } .cvp-map-legend i { width: 14px; height: 14px; border-radius: 999px; display: inline-block; } .legend-user { background: #438bcd; } .legend-center { background: #f5a524; } .legend-garage { background: #16a34a; } .cvp-map-info { display: grid; gap: 8px; max-width: 260px; color: #0b1728; } .cvp-map-info span { color: #438bcd; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; } .cvp-map-info h3 { margin: 0; font-size: 1.05rem; } .cvp-map-info p { margin: 0; color: #53637a; line-height: 1.45; } .cvp-map-info div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .cvp-map-info a { border-radius: 999px; background: #438bcd; color: #fff; font-weight: 800; padding: 8px 10px; text-decoration: none; } .cvp-map-info a:first-child { background: #fff; border: 1px solid rgba(0, 74, 112, 0.18); color: #003b5c; } .garage-map-result .center-network { background: rgba(22, 163, 74, 0.12); color: #166534; } @media (max-width: 980px) { .cvp-map-layout { grid-template-columns: 1fr; } .cvp-google-map, .home-partner-google-map { min-height: 340px; } } .admin-portal-body:not(.admin-is-auth) .admin-shell { grid-template-columns: minmax(0, 760px); justify-content: center; } .admin-portal-body:not(.admin-is-auth) .dashboard-content { width: 100%; } .admin-portal-body:not(.admin-is-auth) #adminLoginPanel { margin-top: 28px; } .admin-view:not(.is-active) { display: none; } .admin-filter-bar { margin: 0 0 18px; padding: 0 22px 18px; } .admin-crud-actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 220px; } .admin-crud-actions button { min-height: 32px; padding: 6px 10px; border: 1px solid rgba(0, 74, 112, 0.14); border-radius: 999px; background: #fff; color: var(--accent-dark); font-weight: 800; cursor: pointer; } .admin-crud-actions .danger-button { border-color: rgba(184, 38, 38, 0.18); background: rgba(184, 38, 38, 0.08); color: #b82626; } /* Marketing garages : avatars, cellules identite, timeline d'interactions */ .entity-avatar { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--brand-gradient); color: #fff; font-size: 0.9rem; font-weight: 900; } .entity-avatar-lg { width: 56px; height: 56px; font-size: 1.2rem; } .table-entity-cell { display: flex; align-items: center; gap: 12px; } .page-heading-identity { display: flex; align-items: center; gap: 16px; } .interaction-row { display: flex; align-items: flex-start; gap: 12px; } .interaction-row > div { min-width: 0; flex: 1 1 auto; } .interaction-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .interaction-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .interaction-icon-success { background: var(--green-soft); color: var(--green); } .interaction-icon-warning { background: var(--gold-soft); color: #8a5a00; } .interaction-icon-danger { background: var(--red-soft); color: var(--red); } .interaction-icon-muted { background: #eef1f4; color: var(--muted); } /* ---------- Fiche prospect garage (mise en page evoluee) ---------- */ .prospect-detail-main > .analysis-table-card { padding: 26px; } .prospect-detail-main > .analysis-table-card > .analysis-table-header { padding: 24px 0; margin: -26px -26px 4px; padding-left: 26px; padding-right: 26px; } .prospect-detail-main > .analysis-table-card > form + .analysis-table-header { margin-top: 22px; } /* Chips "canal" (Email/Visite/Appel) au-dessus du formulaire de programmation d'envoi - purement indicatif (l'envoi automatique reste toujours un email reel), pilote juste le libelle/icone dans l'historique. */ .prospect-template-row { display: flex; gap: 10px; margin-bottom: 20px; } .prospect-tpl-chip { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.76rem; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--muted); background: #fff; cursor: pointer; transition: all 0.2s ease; } .prospect-tpl-chip:hover:not(.is-active) { border-color: var(--accent); color: var(--accent-dark); } .prospect-tpl-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; } .prospect-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Le formulaire d'envoi programme n'a que 2 champs sur cette rangee, mais le libelle "Relance automatique apres (jours, vide = aucune)" est plus long que "Date et heure d'envoi" et passe sur 2 lignes - sans ancrage, chaque label garde son propre empilement texte/champ, ce qui decale le champ le plus court plus haut que l'autre. On ancre les 2 labels en bas de leur case de grille pour que les CHAMPS restent sur la meme ligne. */ #scheduleEmailForm label { align-self: end; } /* input[type=datetime-local] rend intrinsequement ~2px plus haut qu'un input texte/nombre a padding identique (widget natif Chrome) - hauteur explicite sur les 2 champs de cette ligne pour les rendre uniformes. */ #scheduleEmailForm input { height: 48px; padding: 0 16px; box-sizing: border-box; } .prospect-form-grid .full-field { grid-column: 1 / -1; } .prospect-quick-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; } .prospect-quick-facts span { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--soft-shadow); } .prospect-quick-facts strong { color: var(--navy); font-size: 1.02rem; line-height: 1.2; } .prospect-quick-facts small { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; } .prospect-detail-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; } .prospect-detail-sidebar { position: sticky; top: 24px; display: grid; gap: 18px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--soft-shadow); } .prospect-sidebar-title { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .prospect-sidebar-list { display: grid; gap: 12px; margin: 0; } .prospect-sidebar-list dt { color: var(--muted); font-size: 0.76rem; font-weight: 700; margin-bottom: 2px; } .prospect-sidebar-list dd { margin: 0; color: var(--ink); font-weight: 700; word-break: break-word; } .prospect-sidebar-list dd a { color: var(--accent); text-decoration: none; } .prospect-sidebar-badges { display: flex; flex-wrap: wrap; gap: 8px; } .prospect-sidebar-empty { color: var(--muted); font-size: 0.9rem; line-height: 1.5; } /* Les 4 onglets partagent un seul bloc pilule (comme la maquette) plutot que d'etre 4 boutons individuellement encadres flottant sur le fond de page. */ .prospect-tabs { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; margin-bottom: 18px; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--soft-shadow); } .prospect-tabs button { padding: 9px 18px; border-radius: 999px; border: none; background: none; color: var(--muted); font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease; } .prospect-tabs button:hover:not(:disabled):not(.is-active) { color: var(--accent-dark); } .prospect-tabs button.is-active { background: var(--brand-gradient); color: #fff; box-shadow: var(--soft-shadow); } .prospect-tabs button:disabled { opacity: 0.4; cursor: not-allowed; } .prospect-timeline { display: grid; gap: 0; margin-top: 18px; position: relative; } /* La ligne verticale ne doit apparaitre que s'il y a au moins un element de timeline - sinon elle reste visible, superposee au message d'etat vide. */ .prospect-timeline:has(.prospect-timeline-empty)::before { display: none; } .prospect-timeline::before { content: ""; position: absolute; left: 16px; top: 4px; bottom: 4px; width: 2px; background: var(--line); } .prospect-timeline-item { position: relative; display: flex; gap: 14px; padding: 0 0 20px; } .prospect-timeline-item:last-child { padding-bottom: 0; } .prospect-timeline-item .interaction-icon { position: relative; z-index: 1; background: #fff; border: 2px solid var(--accent-soft); } .prospect-timeline-empty { padding: 18px; border-radius: 14px; background: var(--soft); color: var(--muted); text-align: center; } .prospect-quick-actions { display: flex; gap: 8px; } .prospect-qa-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; background: var(--soft); color: var(--muted); font-size: 0.68rem; font-weight: 700; transition: background 0.15s ease; } .prospect-qa-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .prospect-qa-btn:hover:not(:disabled) { background: var(--accent-soft); } .prospect-qa-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Pipeline (onglet Suivi commercial) - 4 etapes reelles de marketing_status (prospect/contacted/qualified/converted) ; "rejected" est un etat terminal hors pipeline lineaire, affiche a part (cf #prospectPipelineRejectedNote). */ .prospect-pipeline { display: flex; align-items: center; margin-bottom: 22px; } .prospect-pipe-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; position: relative; cursor: pointer; background: none; border: none; padding: 0; } .prospect-pipe-step:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; } .prospect-pipe-step.is-done:not(:last-child)::after { background: var(--accent); } .prospect-pipe-dot { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; z-index: 1; transition: all 0.2s ease; } .prospect-pipe-dot svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; opacity: 0; } .prospect-pipe-step.is-done .prospect-pipe-dot { background: var(--brand-gradient); border-color: transparent; } .prospect-pipe-step.is-done .prospect-pipe-dot svg { opacity: 1; } .prospect-pipe-step.is-current .prospect-pipe-dot { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); } .prospect-pipe-label { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-align: center; } .prospect-pipe-step.is-done .prospect-pipe-label, .prospect-pipe-step.is-current .prospect-pipe-label { color: var(--navy); } .prospect-assign-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--soft); border-radius: 12px; margin-bottom: 22px; } .prospect-assign-left { display: flex; align-items: center; gap: 12px; } .prospect-assign-k { display: block; font-size: 0.72rem; color: var(--muted); } .prospect-assign-v { display: block; font-size: 0.86rem; font-weight: 700; color: var(--navy); } .prospect-assign-link { font-size: 0.8rem; font-weight: 700; color: var(--accent); } .prospect-reminder-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; background: var(--gold-soft); border: 1px solid rgba(245, 165, 36, 0.25); margin-bottom: 24px; } .prospect-reminder-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: rgba(245, 165, 36, 0.18); color: #8a5a0a; } .prospect-reminder-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .prospect-reminder-text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .prospect-reminder-title { font-size: 0.86rem; font-weight: 700; color: var(--navy); } .prospect-reminder-sub { font-size: 0.76rem; color: var(--muted); margin-top: 1px; } .prospect-reminder-link { font-size: 0.8rem; font-weight: 700; color: var(--accent); flex-shrink: 0; } /* Checklist informative (onglet Conversion) - calculee depuis les vrais champs du prospect ; purement indicative, ne bloque jamais le vrai flux de conversion (recherche + liaison a un garage deja inscrit) juste en dessous. */ .prospect-progress-track { height: 8px; background: var(--soft); border-radius: 100px; overflow: hidden; margin-bottom: 8px; } .prospect-progress-fill { height: 100%; background: var(--brand-gradient); border-radius: 100px; transition: width 0.3s ease; } .prospect-progress-label { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 0.76rem; color: var(--muted); margin-bottom: 20px; } .prospect-checklist { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; } .prospect-check-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); } .prospect-check-row:last-child { border-bottom: none; } .prospect-check-ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .prospect-check-ic svg { width: 12px; height: 12px; stroke-width: 3; fill: none; } .prospect-check-row.is-ok .prospect-check-ic { background: var(--accent); } .prospect-check-row.is-ok .prospect-check-ic svg { stroke: #fff; } .prospect-check-row.is-missing .prospect-check-ic { background: var(--red-soft); border: 1.5px solid var(--red); } .prospect-check-row.is-missing .prospect-check-ic svg { stroke: var(--red); } .prospect-check-label { font-size: 0.86rem; font-weight: 600; flex: 1; color: var(--navy); } .prospect-check-row.is-missing .prospect-check-label { color: var(--muted); } .prospect-check-hint { font-size: 0.74rem; color: var(--red); } @media (max-width: 980px) { .prospect-quick-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prospect-detail-layout { grid-template-columns: 1fr; } .prospect-detail-sidebar { position: static; } .prospect-pipe-label { display: none; } } /* ---------- Onglet Activite (admin) ---------- */ #activite .analysis-insights { grid-template-columns: repeat(4, minmax(0, 1fr)); } .activity-category { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; } .activity-category-auth { background: var(--blue-soft); color: var(--blue); } .activity-category-garage { background: var(--green-soft); color: var(--green); } .activity-category-admin { background: var(--violet-soft); color: var(--violet); } #activityAdminTable td code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; color: var(--muted); } .activity-row-failed td { background: rgba(184, 38, 38, 0.045); } .activity-row-suspicious td { background: rgba(255, 170, 0, 0.09); } #activityStats article { position: relative; z-index: 0; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } #activityStats article:hover, #activityStats article:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(16, 32, 53, 0.12); outline: none; } /* Specificite #activityStats necessaire : .analysis-insights span (color, margin-bottom) est plus specifique qu'une simple classe et ecraserait sinon la couleur/l'espacement propres a chaque icone. */ #activityStats .activity-stat-icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; } #activityStats .activity-stat-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } #activityStats .activity-stat-icon-total { background: var(--blue-soft); color: var(--blue); } #activityStats .activity-stat-icon-failed { background: var(--red-soft); color: var(--red); } #activityStats .activity-stat-icon-suspicious { background: var(--gold-soft); color: #8a5a00; } #activityStats .activity-stat-icon-users { background: var(--violet-soft); color: var(--violet); } /* Suivi Assistant IA : cartes de stats dediees (plus riches que .analysis-insights generique - bande de couleur, icone en pastille, halo pulse sur "Escaladés" quand des dossiers l'exigent), et regroupement nowrap des badges de statut pour eviter qu'ils se cassent sur deux lignes dans une colonne etroite (retour utilisateur 2026-08-20). */ .assistant-ia-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; } .assistant-ia-stat-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 22px 20px 26px; overflow: hidden; border: 1px solid #e5e8ed; border-radius: 18px; background: linear-gradient(135deg, #fff, #f7fbff); box-shadow: 0 14px 28px rgba(16, 32, 53, 0.06); } .assistant-ia-stat-card::before { position: absolute; top: 0; left: 0; bottom: 0; width: 5px; content: ""; background: var(--blue); } .assistant-ia-stat-card-escalated::before { background: var(--red); } .assistant-ia-stat-card-resolution::before { background: var(--green); } .assistant-ia-stat-icon { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--blue-soft); color: var(--blue); } .assistant-ia-stat-card-escalated .assistant-ia-stat-icon { background: var(--red-soft); color: var(--red); } .assistant-ia-stat-card-resolution .assistant-ia-stat-icon { background: var(--green-soft); color: var(--green); } .assistant-ia-stat-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .assistant-ia-stat-card-escalated.is-active .assistant-ia-stat-icon { animation: assistantIaEscalatedPulse 1.8s ease-in-out infinite; } @keyframes assistantIaEscalatedPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 38, 38, 0.35); } 50% { box-shadow: 0 0 0 9px rgba(184, 38, 38, 0); } } .assistant-ia-stat-body { min-width: 0; } .assistant-ia-stat-label { display: block; margin-bottom: 6px; color: #6b737a; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; } .assistant-ia-stat-body strong { display: block; color: #102a35; font-size: 2.1rem; line-height: 1.1; } .assistant-ia-stat-card-escalated.is-active .assistant-ia-stat-body strong { color: var(--red); } .assistant-ia-stat-body p { margin: 6px 0 0; color: #6b737a; font-size: 0.85rem; } @media (max-width: 720px) { .assistant-ia-stats { grid-template-columns: 1fr; gap: 12px; } .assistant-ia-stat-card { padding: 16px 18px 16px 22px; border-radius: 14px; } } #assistantIaTable th:nth-child(1), #assistantIaTable td:nth-child(1) { width: 15%; } #assistantIaTable th:nth-child(2), #assistantIaTable td:nth-child(2) { width: 22%; } #assistantIaTable th:nth-child(3), #assistantIaTable td:nth-child(3) { width: 13%; } #assistantIaTable th:nth-child(4), #assistantIaTable td:nth-child(4) { width: 16%; } #assistantIaTable th:nth-child(5), #assistantIaTable td:nth-child(5) { width: 34%; } .assistant-ia-status-group { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; } .assistant-ia-status-group .admin-status { white-space: nowrap; } .assistant-ia-urgent-badge { padding: 0 8px; font-size: 0.72rem; } /* ---------- Onglet Bannieres (admin) ---------- */ #bannerStats { grid-template-columns: repeat(4, minmax(0, 1fr)); } #bannerStats .banner-stat-icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; } #bannerStats .banner-stat-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } #bannerStats .banner-stat-icon-active { background: var(--blue-soft); color: var(--blue); } #bannerStats .banner-stat-icon-impressions { background: var(--violet-soft); color: var(--violet); } #bannerStats .banner-stat-icon-clicks { background: var(--green-soft); color: var(--green); } #bannerStats .banner-stat-icon-ctr { background: var(--gold-soft); color: #8a5a00; } .banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 20px; } .banner-admin-card { overflow: hidden; border: 1px solid #e5e8ed; border-radius: 16px; background: #fff; box-shadow: var(--soft-shadow); } .banner-admin-card-media { position: relative; aspect-ratio: 16 / 9; background: var(--soft); } .banner-admin-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .banner-admin-card-media-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 0.85rem; } .banner-status-chip { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; } .banner-status-active { background: var(--green-soft); color: var(--green); } .banner-status-scheduled { background: var(--blue-soft); color: var(--blue); } .banner-status-expired { background: var(--red-soft); color: var(--red); } .banner-status-inactive { background: var(--soft); color: var(--muted); } .banner-admin-card-body { display: grid; gap: 8px; padding: 14px 16px 16px; } .banner-admin-card-body > strong { color: var(--navy); font-size: 0.98rem; } .banner-admin-card-badges { display: flex; flex-wrap: wrap; gap: 6px; } .banner-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; } .banner-chip-placement { background: var(--soft); color: var(--muted); } .banner-chip-internal { background: var(--blue-soft); color: var(--blue); } .banner-chip-sponsored { background: var(--gold-soft); color: #8a5a00; } .banner-admin-card-stats { margin: 0; color: var(--muted); font-size: 0.82rem; } .activity-detail-modal { width: min(560px, 92vw); padding: 0; border: none; border-radius: 20px; box-shadow: 0 30px 60px rgba(16, 32, 53, 0.28); } .activity-detail-modal::backdrop { background: rgba(16, 32, 53, 0.45); } .activity-detail-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); } .activity-detail-modal-header h3 { margin: 0; color: var(--navy); } .activity-detail-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 1rem; cursor: pointer; } .activity-detail-modal-close:hover { background: var(--accent-soft); color: var(--accent-dark); } .activity-detail-modal-body { max-height: 60vh; overflow-y: auto; padding: 12px 24px 24px; display: grid; gap: 10px; } .activity-detail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--soft); font-size: 0.9rem; } .activity-detail-row strong { color: var(--navy); } .activity-detail-row span { color: var(--muted); font-size: 0.82rem; white-space: nowrap; } .assistant-ia-chat-row { display: flex; flex-direction: column; gap: 4px; max-width: 82%; } .assistant-ia-chat-row-customer { justify-self: end; align-items: flex-end; } .assistant-ia-chat-row-agent { justify-self: start; align-items: flex-start; } .assistant-ia-chat-author { color: var(--muted); font-size: 0.76rem; } .assistant-ia-chat-bubble { margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 0.9rem; line-height: 1.4; white-space: pre-wrap; } .assistant-ia-chat-row-customer .assistant-ia-chat-bubble { background: #12afa3; color: #fff; border-bottom-right-radius: 4px; } .assistant-ia-chat-row-agent .assistant-ia-chat-bubble { background: var(--soft); color: var(--navy); border-bottom-left-radius: 4px; } .assistant-ia-chat-row-note { justify-self: center; align-items: center; max-width: 92%; } .assistant-ia-chat-row-note .assistant-ia-chat-bubble { background: #fff6d8; color: var(--navy); border: 1px dashed #e0c46a; } /* V2 "outils admin en ecriture" (point 3, 2026-08-21) */ .admin-assistant-ia-actions { display: grid; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--soft); } .admin-assistant-ia-actions-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .admin-assistant-ia-actions-row textarea { flex: 1; min-width: 200px; resize: vertical; font-family: inherit; font-size: 0.85rem; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); } .admin-assistant-ia-actions-row select, .admin-assistant-ia-actions-row input[type="text"] { font-size: 0.85rem; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); } .admin-assistant-ia-actions-row input[type="text"] { flex: 1; min-width: 160px; } .admin-assistant-ia-actions-status { margin: 0; min-height: 1.1em; font-size: 0.82rem; color: var(--accent-dark, #0a7a4a); } .admin-assistant-ia-actions-status.is-error { color: #b3261e; } /* V3 Epic E9 "Roolezen Fleet" (fleet.html, ticket T9.3) */ .fleet-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 12px 0; } .fleet-inline-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); } .fleet-inline-form input { font-size: 0.9rem; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); } /* V3 Epic E9 "Roolezen Fleet" (fleet.html, ticket T9.5) - assistant AGENT_FLEET */ .fleet-chat-panel { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); padding: 16px; } .fleet-chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding-right: 4px; } .fleet-chat-message { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 0.92rem; line-height: 1.4; white-space: pre-wrap; } .fleet-chat-message.from-manager { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .fleet-chat-message.from-agent { align-self: flex-start; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .fleet-chat-message.is-pending { opacity: 0.6; } .fleet-chat-form { display: flex; gap: 10px; } .fleet-chat-form input { flex: 1; font-size: 0.9rem; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); } .activity-detail-empty { padding: 18px; color: var(--muted); text-align: center; } /* Barre de filtres compacte (liste des prospects garages) */ .filters-panel { padding: 26px 26px 20px; } #prospectStats { margin-left: 26px; margin-right: 26px; } .compact-filters { grid-template-columns: minmax(220px, 520px) 130px 130px 110px; gap: 10px; } .compact-filters label { gap: 6px; font-size: 0.82rem; } .compact-filters input, .compact-filters select { padding: 9px 12px; border-radius: 10px; font-size: 0.88rem; } .compact-filters .primary-button { min-height: 40px; padding: 9px 16px; font-size: 0.88rem; } /* CVP user analysis refinements */ .user-analysis-table th { font-size: 0.7rem; letter-spacing: 0.04em; } .user-analysis-table td { font-size: 0.72rem; line-height: 1.32; } .user-analysis-table .analysis-vehicle strong, .user-analysis-table .analysis-date { font-size: 0.78rem; } .analysis-result-pill, .analysis-status-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 6px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; line-height: 1; white-space: nowrap; } .analysis-result-pill.is-bad, .analysis-status-pill.is-error-file { background: #fee2e2; color: #991b1b; } .analysis-result-pill.is-good { background: #dcfce7; color: #166534; } .analysis-result-pill.is-processing, .analysis-status-pill.is-processing { background: #dbeafe; color: #075985; } .analysis-result-pill.is-neutral, .analysis-status-pill.is-quote-needed { background: #fff7ed; color: #9a3412; } .analysis-status-pill.is-sent { background: #e0f2fe; color: #075985; } .analysis-actions-cell { display: flex; flex-wrap: wrap; gap: 7px; } .analysis-actions-cell a, .analysis-actions-cell button, .analysis-action-button { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 7px 10px; border: 1px solid rgba(0, 119, 204, 0.18); border-radius: 999px; background: linear-gradient(135deg, #438bcd, #0a6f68); color: #fff; box-shadow: 0 10px 20px rgba(18, 175, 163, 0.18); cursor: pointer; font-size: 0.68rem; font-weight: 700; line-height: 1; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease; } .analysis-action-button:hover { transform: translateY(-1px); box-shadow: 0 14px 24px rgba(18, 175, 163, 0.24); } .analysis-action-button.secondary { background: #fff; color: #073b5f; } .analysis-action-button.transmit { background: linear-gradient(135deg, #ffad1f, #f5a524); color: #16100a; } .analysis-action-button.danger { border-color: rgba(220, 38, 38, 0.22); background: linear-gradient(135deg, #dc2626, #991b1b); color: #fff; } .analysis-action-button:disabled { cursor: wait; opacity: 0.7; transform: none; } .password-form-card { margin-top: 22px; } .profile-security-heading h2 { margin: 0 0 6px; } .profile-security-heading p:last-child { margin: 0 0 18px; color: #6b737a; } .profile-form-card input, .profile-form-card textarea, .profile-form-card select, .profile-form-card dd, .profile-form-card span { font-weight: 400; } .analysis-detail-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr); gap: 22px; margin-bottom: 22px; padding: 28px; border: 1px solid rgba(0, 119, 204, 0.13); border-radius: 24px; background: radial-gradient(circle at 100% 0%, rgba(255, 173, 31, 0.18), transparent 34%), radial-gradient(circle at 0% 100%, rgba(0, 119, 204, 0.13), transparent 34%), #fff; box-shadow: 0 24px 54px rgba(16, 32, 53, 0.09); } .analysis-detail-hero h2 { margin: 0 0 8px; color: var(--ink); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; } .analysis-detail-hero p { margin: 0; color: #6b737a; } .analysis-detail-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: end; } .analysis-detail-kpis span { display: grid; gap: 8px; min-height: 100px; padding: 16px; border: 1px solid rgba(215, 226, 238, 0.92); border-radius: 18px; background: rgba(255, 255, 255, 0.78); color: #6b737a; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; } .analysis-detail-kpis strong { color: var(--navy); font-size: 1.35rem; line-height: 1.1; text-transform: none; } .analysis-detail-card { transition: transform 160ms ease, box-shadow 160ms ease; } .analysis-detail-card:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(16, 32, 53, 0.1); } @media (max-width: 980px) { .analysis-detail-hero, .analysis-detail-kpis { grid-template-columns: 1fr; } } /* Profile security layout and analysis action selector */ .profile-summary-card { grid-row: 1 / span 2; } .password-form-card { grid-column: 2; margin-top: 0; } .analysis-actions-cell.analysis-actions-selector { display: grid; min-width: 190px; gap: 9px; align-content: start; } .analysis-action-options { display: grid; gap: 6px; } .analysis-action-choice { display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 28px; padding: 6px 8px; border: 1px solid rgba(0, 119, 204, 0.16); border-radius: 10px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.9)); color: #0a334f; font-size: 0.68rem; font-weight: 700; line-height: 1.2; cursor: pointer; } .analysis-action-choice input { width: 14px; height: 14px; margin: 0; accent-color: #438bcd; } .analysis-action-choice span { overflow-wrap: anywhere; } .analysis-action-choice:has(input:checked) { border-color: rgba(0, 119, 204, 0.55); background: linear-gradient(135deg, rgba(0, 119, 204, 0.12), rgba(255, 173, 31, 0.12)); box-shadow: 0 8px 18px rgba(18, 175, 163, 0.13); } .analysis-action-choice.is-danger { border-color: rgba(220, 38, 38, 0.2); color: #991b1b; } .analysis-action-launch { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 8px 11px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #061b2d, #438bcd 58%, #ffad1f); color: #fff; box-shadow: 0 12px 24px rgba(0, 69, 118, 0.22); font-size: 0.69rem; font-weight: 800; letter-spacing: 0; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease; } .analysis-action-launch:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(0, 69, 118, 0.28); } .analysis-action-launch:disabled { cursor: wait; opacity: 0.7; transform: none; } @media (max-width: 980px) { .profile-summary-card, .password-form-card { grid-column: 1 / -1; grid-row: auto; } } /* Public technical center actions */ .center-actions a, .center-actions .primary-button, .center-actions .secondary-button { text-decoration: none; } .center-actions a:hover, .center-actions .primary-button:hover, .center-actions .secondary-button:hover { text-decoration: none; } /* Premium admin authentication */ .admin-portal-body:not(.admin-is-auth) { min-height: 100vh; background: radial-gradient(circle at 14% 12%, rgba(0, 119, 204, 0.16), transparent 30%), radial-gradient(circle at 86% 8%, rgba(255, 173, 31, 0.18), transparent 28%), linear-gradient(135deg, #f7fbff 0%, #eef6fb 52%, #fff7e7 100%); } .admin-portal-body:not(.admin-is-auth) .dashboard-topbar { border-bottom: 0; background: transparent; box-shadow: none; } .admin-portal-body:not(.admin-is-auth) .dashboard-topbar .dashboard-brand { pointer-events: none; } .admin-auth-panel { display: grid; place-items: center; min-height: calc(100vh - 150px); padding: 34px 16px 60px; } .admin-auth-card { position: relative; display: grid; gap: 24px; width: min(100%, 620px); padding: 34px; overflow: hidden; border: 1px solid rgba(0, 74, 112, 0.13); border-radius: 28px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 28px 70px rgba(16, 32, 53, 0.16); } .admin-auth-card::before, .admin-auth-card::after { position: absolute; width: 210px; height: 210px; border-radius: 999px; content: ""; pointer-events: none; } .admin-auth-card::before { right: -80px; top: -90px; background: rgba(255, 173, 31, 0.2); } .admin-auth-card::after { left: -95px; bottom: -100px; background: rgba(0, 119, 204, 0.14); } .admin-auth-brand, .admin-auth-copy, .admin-login-form, .admin-auth-footnote, #adminLoginStatus { position: relative; z-index: 1; } .admin-auth-brand { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .admin-auth-brand img { width: 138px; height: 76px; object-fit: contain; } .admin-auth-brand span { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 173, 31, 0.16); color: #102a35; font-size: 0.76rem; font-weight: 900; text-transform: uppercase; } .admin-auth-copy h1 { max-width: 560px; margin: 6px 0 10px; color: #102a35; font-size: clamp(2rem, 5vw, 3.15rem); line-height: 1.02; } .admin-auth-copy p:not(.eyebrow) { max-width: 520px; margin: 0; color: #6b737a; font-size: 1rem; line-height: 1.55; } .admin-auth-card .admin-login-form { grid-template-columns: 1fr; max-width: none; gap: 16px; } .admin-auth-card .admin-login-form label { color: #102a35; font-size: 0.78rem; } .admin-auth-card .admin-login-form input { min-height: 50px; border: 1px solid rgba(0, 74, 112, 0.16); border-radius: 14px; background: #fff; color: #102a35; font-size: 1rem; font-weight: 500; } .admin-auth-card .admin-login-form input:focus { border-color: rgba(0, 119, 204, 0.65); box-shadow: 0 0 0 4px rgba(0, 119, 204, 0.12); outline: none; } .admin-auth-card .primary-button { width: 100%; min-height: 52px; } .admin-auth-footnote { display: grid; gap: 5px; padding: 16px; border: 1px solid rgba(0, 119, 204, 0.12); border-radius: 18px; background: rgba(239, 248, 255, 0.82); color: #53637a; line-height: 1.45; } .admin-auth-footnote strong { color: #102a35; } @media (max-width: 620px) { .admin-auth-card { padding: 24px 18px; border-radius: 22px; } .admin-auth-brand { align-items: flex-start; flex-direction: column; } } /* Admin login visibility hardening */ .admin-portal-body:not(.admin-is-auth) #adminSidebar, .admin-portal-body:not(.admin-is-auth) #adminDashboard, .admin-portal-body:not(.admin-is-auth) #adminLogoutButton, .admin-portal-body:not(.admin-is-auth) .admin-sidebar, .admin-portal-body:not(.admin-is-auth) .admin-view { display: none !important; visibility: hidden !important; } .admin-portal-body:not(.admin-is-auth) .admin-shell { display: grid; grid-template-columns: minmax(0, 760px) !important; justify-content: center; background: transparent !important; padding-inline: 24px; } .admin-portal-body:not(.admin-is-auth) .dashboard-content { min-width: 0; width: 100%; background: transparent !important; } /* ============================================================ Espace garage - nouveau tableau de bord (garage-espace.html) Adapte de la maquette "nexiamo-garage-espace-dashboard" - classes prefixees .gd- pour ne jamais entrer en conflit avec .dashboard-topbar/ .dashboard-sidebar, toujours utilisees par les 7 autres pages garage pas encore migrees vers ce nouveau design. ============================================================ */ .gd-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* Reset jamais reporte depuis la maquette d'origine (elle l'avait en global sur tout le document) - sans lui, chaque retombe sur le style natif du navigateur (lien souligne). Pas de reset button-large equivalent ici : .gd-app button (0,1,1) battrait par specificite des composants comme .gd-icon-btn (0,1,0) qui posent volontairement leur propre bordure/fond - le reset border/background se fait donc au cas par cas, uniquement la ou c'est vraiment necessaire (.gd-profile-panel button). */ .gd-app a { color: inherit; text-decoration: none; } .gd-top-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 32px; background: linear-gradient(120deg, rgba(18, 175, 163, 0.06), rgba(117, 103, 248, 0.05)); border-bottom: 1px solid var(--line); flex-shrink: 0; } .gd-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Meme hauteur que le logo des autres pages garage (.dashboard-brand img, 86px) - la coherence visuelle entre pages prime sur le gabarit compact de la maquette d'origine. */ .gd-brand img { height: 86px; width: auto; object-fit: contain; } .gd-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill); height: 38px; padding: 0 16px; width: 100%; max-width: 400px; box-shadow: var(--soft-shadow); transition: border-color 0.2s; } .gd-search:focus-within { border-color: var(--accent); } .gd-search svg { width: 17px; height: 17px; color: var(--neutral); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gd-search input { border: none; outline: none; font-size: 14px; color: var(--navy); width: 100%; font-family: inherit; background: none; } .gd-search input::placeholder { color: var(--neutral); } @media (max-width: 900px) { .gd-search { display: none; } } .gd-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .gd-icon-btn { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); box-shadow: var(--soft-shadow); position: relative; flex-shrink: 0; } .gd-icon-btn:disabled { cursor: default; opacity: 0.6; } .gd-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-icon-btn .gd-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); border: 2px solid #fff; } .gd-profile-dd { position: relative; } .gd-profile-dd summary { list-style: none; cursor: pointer; } .gd-profile-dd summary::-webkit-details-marker { display: none; } .gd-profile-chip { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 6px 16px 6px 6px; box-shadow: var(--soft-shadow); } .gd-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-gradient); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gd-profile-chip .gd-name { font-size: 13.5px; font-weight: 700; color: var(--navy); white-space: nowrap; } .gd-profile-chip .gd-chevron { width: 14px; height: 14px; color: var(--neutral); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .gd-profile-panel { position: absolute; top: calc(100% + 12px); right: 0; background: #fff; border-radius: var(--r-lg); box-shadow: 0 22px 44px -14px rgba(16, 42, 53, 0.28); border: 1px solid rgba(16, 42, 53, 0.06); width: 230px; padding: 8px; z-index: 80; } .gd-profile-panel a, .gd-profile-panel button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px; border-radius: var(--r-md); border: none; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--navy); text-align: left; cursor: pointer; transition: background 0.15s; } .gd-profile-panel a:hover, .gd-profile-panel button:hover { background: var(--soft); } .gd-profile-panel svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-profile-panel .gd-danger { color: var(--red); } .gd-profile-panel .gd-danger svg { color: var(--red); } .gd-sep { height: 1px; background: var(--line); margin: 6px 4px; } .gd-body-row { flex: 1; display: flex; overflow: hidden; } .gd-sidebar { width: 250px; background: var(--navy); color: #fff; padding: 22px 14px; overflow-y: auto; flex-shrink: 0; } .gd-sidebar nav { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; } .gd-sidebar a { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: var(--r-md); color: rgba(245, 247, 248, 0.68); font-size: 14.5px; font-weight: 700; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .gd-sidebar a svg { width: 21px; height: 21px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-sidebar a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } .gd-sidebar a.is-current { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 3px 0 0 var(--accent); } .gd-sidebar a.is-current svg { color: var(--accent); } .gd-sidebar .gd-badge-count { margin-left: auto; font-family: var(--font-mono, monospace); font-size: 10.5px; background: var(--brand-gradient); color: var(--navy); padding: 2px 8px; border-radius: 100px; font-weight: 700; } .gd-main { flex: 1; overflow-y: auto; padding: 32px 36px 60px; } .gd-greet { font-size: 15px; color: var(--muted); } .gd-greet strong { color: var(--navy); } .gd-page-title { font-size: 27px; margin-top: 2px; margin-bottom: 26px; } .gd-hero { background: radial-gradient(120% 160% at 15% 15%, rgba(18, 175, 163, 0.2), transparent 60%), linear-gradient(135deg, var(--navy), var(--navy-2)); border-radius: 28px; padding: 36px 40px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 28px; box-shadow: var(--shadow); margin-bottom: 28px; flex-wrap: wrap; position: relative; overflow: hidden; } .gd-hero::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(117, 103, 248, 0.22), transparent 70%); top: -100px; right: -60px; } .gd-hero-left { position: relative; z-index: 1; max-width: 56ch; } .gd-hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.08); padding: 7px 16px; border-radius: var(--r-pill); font-family: var(--font-mono, monospace); font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 16px; } .gd-hero-badge .n { font-size: 15px; color: #fff; } .gd-hero-left h2 { font-size: 26px; color: #fff; margin-bottom: 10px; line-height: 1.25; } .gd-hero-left p { font-size: 14.5px; color: rgba(245, 247, 248, 0.75); margin-bottom: 22px; } .gd-btn { font-family: inherit; font-size: 14.5px; font-weight: 700; padding: 14px 26px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 9px; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .gd-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .gd-btn-primary { background: var(--brand-gradient); color: #04141a; } .gd-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(18, 175, 163, 0.5); } .gd-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .gd-hero-icon { position: relative; z-index: 1; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gd-hero-icon svg { width: 52px; height: 52px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .gd-section-label { font-size: 15px; font-weight: 800; margin-bottom: 16px; color: var(--navy); } /* auto-fit (pas un repeat(3) strict) : toutes les jauges ne s'affichent pas pour chaque garage (ex. pas de Secretariat IA si non souscrit) - evite une case vide disgracieuse quand 1 ou 2 cartes seulement sont visibles. */ .gd-sub-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 28px; } .gd-sub-card { background: #fff; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--soft-shadow); border: 1px solid rgba(16, 42, 53, 0.05); transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease); display: flex; gap: 18px; align-items: center; } .gd-sub-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .gd-sub-gauge { position: relative; width: 96px; height: 96px; flex-shrink: 0; } .gd-sub-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); } .gd-sub-gauge .track { fill: none; stroke: var(--soft); stroke-width: 11; } .gd-sub-gauge .fill { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); } .gd-sub-card.is-ok .gd-sub-gauge .fill { stroke: var(--accent); } .gd-sub-card.is-watch .gd-sub-gauge .fill { stroke: var(--amber); } .gd-sub-card.is-low .gd-sub-gauge .fill { stroke: var(--red); } .gd-sub-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gd-sub-gauge-center .n { font-family: var(--font-display, "Manrope", sans-serif); font-size: 22px; font-weight: 800; line-height: 1; color: var(--navy); } .gd-sub-gauge-center .u { font-size: 9.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; } .gd-sub-body { flex: 1; min-width: 0; } .gd-sub-title { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; } .gd-sub-val { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 6px; } .gd-sub-pace { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 100px; margin-bottom: 8px; } .gd-sub-card.is-ok .gd-sub-pace { background: var(--accent-soft); color: var(--accent-dark); } .gd-sub-card.is-watch .gd-sub-pace { background: var(--amber-soft); color: #8a5a0a; } .gd-sub-card.is-low .gd-sub-pace { background: var(--red-soft); color: #b4262a; } .gd-sub-sub { font-size: 11.5px; color: var(--neutral); margin-bottom: 8px; } .gd-sub-action { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--accent); } .gd-sub-card.is-watch .gd-sub-action, .gd-sub-card.is-low .gd-sub-action { color: var(--amber); } .gd-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; } @media (max-width: 1100px) { .gd-stats-row { grid-template-columns: 1fr; } } .gd-stat-card { background: #fff; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--soft-shadow); border: 1px solid rgba(16, 42, 53, 0.05); transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease); } .gd-stat-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .gd-stat-card .gd-sc-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .gd-stat-card .gd-sc-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-stat-card.teal .gd-sc-ic { background: var(--accent-soft); color: var(--accent); } .gd-stat-card.warn .gd-sc-ic { background: var(--amber-soft); color: var(--amber); } .gd-stat-card.success .gd-sc-ic { background: var(--accent-soft); color: var(--accent); } .gd-stat-card .gd-sc-val { font-family: var(--font-display, "Manrope", sans-serif); font-size: 32px; font-weight: 800; } .gd-stat-card .gd-sc-lbl { font-size: 13.5px; color: var(--muted); margin-top: 4px; font-weight: 600; } .gd-stat-card .gd-sc-hint { font-size: 12px; color: var(--neutral); margin-top: 10px; } .gd-stat-card .gd-sc-hint.ok { color: var(--accent); font-weight: 700; } .gd-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } @media (max-width: 1100px) { .gd-actions-grid { grid-template-columns: repeat(2, 1fr); } } .gd-action-card { background: #fff; border-radius: var(--r-lg); padding: 22px 18px; text-align: center; box-shadow: var(--soft-shadow); border: 1px solid rgba(16, 42, 53, 0.05); transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease); display: block; } .gd-action-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .gd-action-card .gd-ac-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .gd-action-card .gd-ac-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-action-card .gd-ac-label { font-size: 13.5px; font-weight: 700; color: var(--navy); } .gd-help-card { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: var(--r-lg); padding: 24px 26px; box-shadow: var(--soft-shadow); border: 1px solid rgba(16, 42, 53, 0.05); flex-wrap: wrap; margin-bottom: 28px; } .gd-help-card .gd-hc-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--violet-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gd-help-card .gd-hc-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--violet); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-help-card .gd-hc-text { flex: 1; min-width: 220px; } .gd-help-card .gd-hc-title { font-size: 15px; font-weight: 800; } .gd-help-card .gd-hc-sub { font-size: 13px; color: var(--muted); margin-top: 2px; } .gd-btn-ghost { background: var(--soft); color: var(--navy); } .gd-btn-ghost:hover { background: #e4e8ea; transform: translateY(-1px); } /* ------------------------------------------------------------ Espace garage - contenu de page generique (panels, tableaux riches, filtres, menus de ligne, toasts). Reutilise au-dela de garage-clients.html par toute page garage adoptant la coquille .gd-app. ------------------------------------------------------------ */ .gd-page-head p:last-child { font-size: 14px; color: var(--muted); max-width: 70ch; margin-bottom: 24px; } .gd-stats-row-h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; } @media (max-width: 900px) { .gd-stats-row-h { grid-template-columns: 1fr; } } .gd-stat-card-h { background: #fff; border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--soft-shadow); border: 1px solid rgba(16, 42, 53, 0.05); display: flex; align-items: center; gap: 14px; transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease); } .gd-stat-card-h:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .gd-stat-card-h .gd-s-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gd-stat-card-h .gd-s-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-stat-card-h.teal .gd-s-ic { background: var(--accent-soft); color: var(--accent); } .gd-stat-card-h.violet .gd-s-ic { background: var(--violet-soft); color: var(--violet); } .gd-stat-card-h.warn .gd-s-ic { background: var(--amber-soft); color: var(--amber); } .gd-stat-card-h .gd-s-val { font-family: var(--font-display, "Manrope", sans-serif); font-size: 22px; font-weight: 800; } .gd-stat-card-h .gd-s-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; } .gd-panel { background: #fff; border-radius: var(--r-lg); box-shadow: var(--soft-shadow); border: 1px solid rgba(16, 42, 53, 0.05); padding: 26px; } .gd-panel-title { font-size: 19px; margin-bottom: 4px; } .gd-panel-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; } .gd-filters-row { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; } .gd-field-search { flex: 1; min-width: 240px; position: relative; } .gd-field-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--neutral); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-field-search input { width: 100%; padding: 11px 14px 11px 38px; border: 1.5px solid var(--line); border-radius: var(--r-sm); font-size: 13.5px; color: var(--navy); outline: none; transition: border-color 0.2s; } .gd-field-search input:focus { border-color: var(--accent); } .gd-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; } .gd-filter-pill { font-family: var(--font-mono, monospace); font-size: 11.5px; font-weight: 700; padding: 9px 15px; border-radius: 100px; border: 1.5px solid var(--line); color: var(--muted); transition: all 0.2s var(--ease); white-space: nowrap; background: #fff; } .gd-filter-pill:hover { border-color: var(--accent); color: var(--navy); } .gd-filter-pill.active { background: var(--navy); border-color: var(--navy); color: #fff; } .gd-panel table { width: 100%; border-collapse: collapse; } .gd-panel thead th { text-align: left; font-family: var(--font-mono, monospace); font-size: 10.5px; text-transform: uppercase; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line); } .gd-panel tbody td { padding: 14px 8px; font-size: 13px; border-bottom: 1px solid var(--line); vertical-align: middle; } .gd-panel tbody tr:last-child td { border-bottom: none; } .gd-empty-block { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 44px 20px; } .gd-empty-block .gd-e-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--soft); color: var(--neutral); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .gd-empty-block .gd-e-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-empty-block h4 { font-size: 14.5px; margin-bottom: 4px; } .gd-empty-block p { font-size: 12.5px; color: var(--muted); max-width: 48ch; } .gd-badge { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; padding: 5px 11px; border-radius: 100px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .gd-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .gd-badge-success { background: var(--accent-soft); color: var(--accent-dark); } .gd-badge-neutral { background: var(--soft); color: var(--muted); } .gd-badge-warning { background: var(--amber-soft); color: #8a5a0a; } .gd-badge-info { background: var(--violet-soft); color: #5245c9; } .gd-cl-cell { display: flex; align-items: center; gap: 12px; } .gd-cl-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-gradient); color: #fff; font-family: var(--font-display, "Manrope", sans-serif); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gd-cl-name { font-size: 13.5px; font-weight: 700; color: var(--navy); } .gd-cl-phone { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .gd-veh-model { font-size: 13px; font-weight: 600; color: var(--navy); } .gd-veh-plate { font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--muted); margin-top: 1px; } .gd-rdv-date { font-size: 13px; font-weight: 600; color: var(--navy); } .gd-rdv-rel { font-size: 11.5px; color: var(--neutral); margin-top: 1px; } .gd-row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; position: relative; } .gd-act-btn { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; flex-shrink: 0; color: var(--muted); } .gd-act-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-act-btn:hover { background: var(--soft); color: var(--navy); } .gd-btn-relance { font-family: inherit; font-size: 12px; font-weight: 700; padding: 8px 15px; border-radius: var(--r-pill); background: var(--amber-soft); color: #8a5a0a; transition: background 0.2s, color 0.2s; white-space: nowrap; } .gd-btn-relance:hover { background: var(--amber); color: #fff; } .gd-row-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border-radius: var(--r-md); box-shadow: 0 20px 40px -12px rgba(16, 42, 53, 0.28); border: 1px solid rgba(16, 42, 53, 0.06); width: 210px; padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; z-index: 60; text-align: left; } .gd-row-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .gd-row-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--navy); transition: background 0.15s; } .gd-row-menu-item:hover { background: var(--soft); } .gd-row-menu-item svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-pagination-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 12px; } .gd-pagination-bar .gd-info { font-size: 12.5px; color: var(--muted); } .gd-pagination-bar .gd-info strong { color: var(--navy); } .gd-toast-stack { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 200; } .gd-toast { display: flex; align-items: center; gap: 12px; background: var(--navy); color: #fff; padding: 13px 18px; border-radius: var(--r-md); box-shadow: 0 16px 32px -10px rgba(16, 42, 53, 0.4); font-size: 13px; font-weight: 600; min-width: 260px; animation: gdToastIn 0.35s var(--ease) both; } .gd-toast.leaving { animation: gdToastOut 0.3s var(--ease) both; } @keyframes gdToastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes gdToastOut { to { opacity: 0; transform: translateX(20px); } } .gd-toast svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .admin-portal-body:not(.admin-is-auth) .dashboard-brand img { box-shadow: none; } /* ------------------------------------------------------------ Espace garage - Mon planning (garage-planning.html) ------------------------------------------------------------ */ .gd-info-banner { display: flex; align-items: center; gap: 16px; background: var(--accent-soft); border: 1px solid rgba(18, 175, 163, 0.22); border-radius: var(--r-lg); padding: 18px 24px; margin-bottom: 24px; flex-wrap: wrap; } .gd-info-banner .gd-ib-ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(18, 175, 163, 0.15); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gd-info-banner .gd-ib-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-info-banner .gd-ib-text { flex: 1; min-width: 220px; font-size: 13px; color: #0c7a70; } .gd-info-banner .gd-ib-text strong { color: var(--navy); } .gd-info-banner .gd-ib-link { font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; } .gd-panel-head-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 6px; } .gd-view-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gd-view-pills { display: flex; gap: 4px; background: var(--soft); border-radius: 100px; padding: 4px; } .gd-view-pill { font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 9px 16px; border: none; border-radius: 100px; background: none; color: var(--muted); cursor: pointer; transition: background 0.2s, color 0.2s; } .gd-view-pill.is-active { background: var(--brand-gradient); color: #fff; } .gd-month-select { width: auto; flex-shrink: 0; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 9px 30px 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--navy); outline: none; background: #fff url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236B737A%22 stroke-width=%222%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E') no-repeat right 10px center; } .gd-day-view-head { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 12px; flex-wrap: wrap; gap: 8px; } .gd-day-view-head .gd-dv-date { font-size: 13.5px; font-weight: 700; color: var(--accent); } .gd-day-view-head .gd-dv-count { font-size: 12.5px; color: var(--muted); } .gd-slots-grid { display: flex; flex-wrap: wrap; gap: 10px; } .gd-slot-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 16px; border-radius: var(--r-md); border: 1.5px solid var(--line); min-width: 100px; transition: all 0.2s var(--ease); background: #fff; } .gd-slot-chip.available { border-color: rgba(18, 175, 163, 0.3); background: var(--accent-soft); cursor: pointer; } .gd-slot-chip.available:hover { background: rgba(18, 175, 163, 0.1); } .gd-slot-chip.available.off { background: var(--soft); border-color: var(--line); opacity: 0.5; } .gd-slot-chip.is-locked, .gd-slot-chip.reserved { background: var(--navy); border-color: var(--navy); cursor: default; } .gd-slot-chip.is-past { background: var(--soft); border-color: var(--line); opacity: 0.55; cursor: default; } .gd-slot-time { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--navy); } .gd-slot-chip.is-locked .gd-slot-time, .gd-slot-chip.reserved .gd-slot-time { color: #fff; } .gd-slot-label { font-size: 10px; color: var(--accent); font-weight: 700; } .gd-slot-chip.is-locked .gd-slot-label, .gd-slot-chip.reserved .gd-slot-label { color: var(--neutral); } .gd-slot-chip.available.off .gd-slot-label { color: var(--muted); } /* Accordéon hebdomadaire (édition) */ .gd-week-day { border-radius: var(--r-md); border: 1px solid var(--line); margin-bottom: 10px; overflow: hidden; } .gd-week-day-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; transition: background 0.15s; flex-wrap: wrap; } .gd-week-day-head:hover { background: var(--soft); } .gd-week-day-head input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; } .gd-wd-day { font-size: 13.5px; font-weight: 700; width: 110px; flex-shrink: 0; } .gd-wd-hours { font-family: var(--font-mono); font-size: 12px; color: var(--muted); flex: 1; min-width: 140px; } .gd-wd-chevron { width: 16px; height: 16px; color: var(--neutral); transition: transform 0.2s; flex-shrink: 0; } .gd-week-day.open .gd-wd-chevron { transform: rotate(180deg); } .gd-week-day-body { display: none; padding: 6px 16px 16px 44px; border-top: 1px solid var(--line); } .gd-week-day.open .gd-week-day-body { display: block; } .gd-week-day-closed { font-size: 12.5px; color: var(--muted); } .gd-date-mode-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--violet-soft); border: 1px solid rgba(117, 103, 248, 0.25); border-radius: var(--r-md); padding: 12px 18px; margin-bottom: 18px; font-size: 13px; color: #5245c9; } .gd-date-mode-banner strong { color: var(--navy); } .gd-date-mode-banner button { font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; } .gd-save-bar { margin-top: 22px; } .gd-save-bar .gd-btn { width: 100%; justify-content: center; padding: 15px; font-size: 14px; } .gd-loading-text { font-size: 13px; color: var(--muted); padding: 12px 0; } /* Vue calendrier (lecture seule : jour / semaine / mois) */ .gd-calendar-view .gd-calendar-date-card { background: #fff; border-radius: var(--r-lg); border: 1px solid rgba(16, 42, 53, 0.05); box-shadow: var(--soft-shadow); padding: 18px 20px; } .gd-calendar-view .gd-calendar-date-card h3 { font-size: 14px; margin-bottom: 12px; text-transform: capitalize; } .gd-calendar-view .gd-calendar-date-card.is-past { opacity: 0.6; } .gd-calendar-week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .gd-calendar-week-grid .gd-calendar-date-card h3 { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; text-transform: capitalize; margin-bottom: 8px; } .gd-calendar-week-grid .gd-calendar-date-card h3 small { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); font-weight: 600; } .gd-calendar-week-grid .gd-slots-grid { gap: 6px; } .gd-calendar-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .gd-calendar-month-grid article { border-radius: var(--r-sm); border: 1px solid var(--line); padding: 10px 8px; min-height: 64px; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; } .gd-calendar-month-grid article.is-empty { border: none; } .gd-calendar-month-grid article strong { font-family: var(--font-display); font-size: 14px; color: var(--navy); } .gd-calendar-month-grid article.has-slots { border-color: rgba(18, 175, 163, 0.25); background: var(--accent-soft); } .gd-calendar-month-grid article.is-fully-locked { border-color: var(--line); background: var(--soft); } .gd-calendar-month-grid article.is-past { opacity: 0.55; } .gd-calendar-month-grid article.is-selectable { cursor: pointer; } .gd-calendar-month-grid article.is-selectable:hover, .gd-calendar-month-grid article.is-selectable:focus-visible { border-color: var(--accent); box-shadow: var(--soft-shadow); } .gd-calendar-month-grid article.is-selected { border-color: var(--violet); background: var(--violet-soft); } @media (max-width: 700px) { .gd-calendar-month-grid { grid-template-columns: repeat(7, minmax(34px, 1fr)); } .gd-calendar-month-grid article { min-height: 46px; padding: 6px 4px; font-size: 9.5px; } } /* ------------------------------------------------------------ Espace garage - Parametrage garage (garage-parametrage.html) ------------------------------------------------------------ */ .gd-tabs { display: flex; gap: 4px; background: #fff; border-radius: 100px; padding: 5px; box-shadow: var(--soft-shadow); border: 1px solid rgba(16, 42, 53, 0.05); margin-bottom: 24px; width: fit-content; flex-wrap: wrap; } .gd-tab-btn { font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 11px 20px; border: none; border-radius: 100px; background: none; color: var(--muted); cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; } .gd-tab-btn.is-active { background: var(--brand-gradient); color: #fff; } .gd-tab-panel { display: none; } .gd-tab-panel.is-active { display: block; animation: gdTabFadeIn 0.3s ease; } @keyframes gdTabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .gd-status-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; } @media (max-width: 800px) { .gd-status-row { grid-template-columns: 1fr; } } .gd-status-card { background: #fff; border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--soft-shadow); border: 1px solid rgba(16, 42, 53, 0.05); } .gd-status-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 8px; } .gd-status-val { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin-bottom: 6px; color: var(--navy); } .gd-status-hint { font-size: 12.5px; color: var(--neutral); } .gd-badge-danger { background: var(--red-soft); color: #b4262a; } .gd-warn-banner { display: flex; align-items: center; gap: 14px; background: var(--amber-soft); border: 1px solid rgba(245, 165, 36, 0.28); border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 22px; } .gd-warn-banner .gd-wb-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(245, 165, 36, 0.16); color: var(--amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gd-warn-banner .gd-wb-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-warn-banner .gd-wb-text { font-size: 13px; color: #8a5a0a; } /* Plages d'ouverture */ .gd-hours-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; } .gd-copy-btn { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: none; border-radius: 100px; background: var(--accent-soft); cursor: pointer; transition: background 0.2s; } .gd-copy-btn:hover { background: rgba(18, 175, 163, 0.18); } .gd-copy-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gd-hours-row { display: flex; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .gd-hours-row:last-child { border-bottom: none; } .gd-day-check { display: flex; align-items: center; gap: 10px; width: 130px; flex-shrink: 0; font-size: 13.5px; font-weight: 700; } .gd-day-check input { width: 17px; height: 17px; accent-color: var(--accent); } .gd-hours-times { display: flex; gap: 14px; flex-wrap: wrap; flex: 1; } .gd-time-field { display: flex; flex-direction: column; gap: 4px; } .gd-time-field label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; color: var(--neutral); } .gd-time-field input { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font-size: 12.5px; color: var(--navy); width: 100px; outline: none; } .gd-time-field input:focus { border-color: var(--accent); } .gd-weekend-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--neutral); margin: 16px 0 6px; padding-top: 8px; border-top: 1px dashed var(--line); } /* Les formulaires garage-compact-form/garage-profile-form/garage-settings-form portent un padding pense pour l'ancien .garage-settings-card ; a l'interieur d'un .gd-panel (qui a deja son propre padding), ce padding supplementaire decale les champs par rapport au titre/texte au-dessus. */ .gd-panel .garage-compact-form, .gd-panel .garage-profile-form, .gd-panel .garage-settings-form { padding: 0; } /* ------------------------------------------------------------ Espace garage - Mes RDV (garage-rdv.html) ------------------------------------------------------------ */ .gd-devis-amount { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--navy); } .gd-devis-msg { font-size: 11.5px; color: var(--muted); margin-top: 1px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-act-btn.is-danger:hover { background: var(--red-soft); color: #b4262a; } /* ------------------------------------------------------------ Espace garage - cartes d'offres (abonnement, packs, secretariat IA) ------------------------------------------------------------ */ .gd-pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; } @media (max-width: 700px) { .gd-pricing-grid { grid-template-columns: 1fr; } } .gd-price-card { background: #fff; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--soft-shadow); border: 1.5px solid rgba(16, 42, 53, 0.05); display: flex; flex-direction: column; position: relative; transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease); } .gd-price-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .gd-price-card.featured { border-color: var(--accent); } .gd-pc-tag { position: absolute; top: -11px; left: 24px; background: var(--brand-gradient); color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 4px 12px; border-radius: 100px; } .gd-price-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 6px; } .gd-pc-desc { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; min-height: 32px; } .gd-pc-amount { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--navy); margin-bottom: 16px; } .gd-price-card .gd-btn { width: 100%; justify-content: center; margin-top: auto; } .gd-price-card .gd-btn-primary { color: #fff; } .secretary-number-option .gd-pricing-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } /* ------------------------------------------------------------ Espace garage - Choix du numero Secretariat IA (garage-parametrage.html) ------------------------------------------------------------ */ .gd-back-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--muted); background: none; border: none; cursor: pointer; margin-bottom: 18px; transition: color 0.2s; } .gd-back-link:hover { color: var(--accent); } .gd-back-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gd-section-label { font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .gd-count { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 9px; border-radius: 100px; } .gd-number-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; } @media (max-width: 640px) { .gd-number-grid { grid-template-columns: repeat(2, 1fr); } } .gd-num-card { position: relative; background: var(--soft); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px 14px 14px 16px; cursor: pointer; text-align: left; font-family: inherit; transition: all 0.2s var(--ease); } .gd-num-card:hover { border-color: rgba(18, 175, 163, 0.4); background: #fff; } .gd-num-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(18, 175, 163, 0.12); } .gd-num-radio { position: absolute; top: 12px; right: 12px; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--neutral); background: #fff; transition: all 0.2s; } .gd-num-card.selected .gd-num-radio { border-color: var(--accent); background: var(--accent); } .gd-num-card.selected .gd-num-radio::after { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-radius: 50%; background: #fff; } .gd-num-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .gd-num-top svg { width: 13px; height: 13px; color: var(--neutral); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-num-card.selected .gd-num-top svg { color: var(--accent); } .gd-num-val { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--navy); } .gd-num-loc { font-size: 11.5px; color: var(--muted); padding-left: 21px; display: block; } .gd-picker-footer { display: flex; justify-content: flex-end; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); } .gd-scope-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 8px; } @media (max-width: 560px) { .gd-scope-grid { grid-template-columns: 1fr; } } .gd-scope-card { text-align: left; background: var(--soft); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 18px; cursor: pointer; font-family: inherit; transition: all 0.2s var(--ease); } .gd-scope-card:hover { border-color: rgba(18, 175, 163, 0.4); background: #fff; } .gd-scope-title { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 4px; } .gd-scope-desc { display: block; font-size: 12px; color: var(--muted); } .gd-region-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .gd-region-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 100px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s var(--ease); } .gd-region-chip:hover { border-color: var(--accent); background: var(--accent-soft); } .gd-region-count { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--muted); background: var(--soft); padding: 2px 8px; border-radius: 100px; } /* ------------------------------------------------------------ Modale de détail (garage-rdv.html et pages similaires) ------------------------------------------------------------ */ .gd-modal-overlay { position: fixed; inset: 0; background: rgba(16, 42, 53, 0.55); backdrop-filter: blur(2px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } .gd-modal-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; } .gd-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); } .gd-modal-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 4px; } .gd-modal-close { background: var(--soft); border: none; border-radius: 50%; width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: all 0.15s ease; } .gd-modal-close:hover { background: var(--line); color: var(--navy); } .gd-modal-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .gd-modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; } .gd-modal-section-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .gd-modal-row { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--navy); line-height: 1.5; } .gd-modal-row + .gd-modal-row { margin-top: 4px; } .gd-modal-row strong { font-weight: 700; min-width: 90px; flex-shrink: 0; color: var(--muted); font-weight: 600; } .gd-modal-message { background: var(--soft); border-radius: var(--r-md); padding: 12px 14px; font-size: 13px; color: var(--navy); line-height: 1.55; white-space: pre-wrap; } .gd-modal-badges { display: flex; gap: 8px; flex-wrap: wrap; } .gd-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 22px; border-top: 1px solid var(--line); } .gd-rdv-row-clickable { cursor: pointer; } .gd-rdv-row-clickable:hover { background: var(--soft); } @media (max-width: 420px) { .gd-modal-row { flex-direction: column; gap: 2px; } .gd-modal-row strong { min-width: 0; } } /* ------------------------------------------------------------ Espace garage - Factures (garage-factures.html) ------------------------------------------------------------ */ .gd-btn-download { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12px; font-weight: 700; padding: 8px 14px; border: none; border-radius: var(--r-pill); background: var(--soft); color: var(--navy); cursor: pointer; transition: background 0.2s; white-space: nowrap; } .gd-btn-download:hover { background: #e4e8ea; } .gd-btn-download svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ------------------------------------------------------------ Espace garage - Devis envoyes (garage-devis.html) ------------------------------------------------------------ */ .gd-quote-item-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; color: var(--muted); border-bottom: 1px dashed var(--line); } .gd-quote-item-line:last-child { border-bottom: none; } .gd-quote-item-line strong { color: var(--navy); } .gd-quote-message { margin-top: 10px; font-size: 13px; color: var(--muted); font-style: italic; } /* ------------------------------------------------------------ Espace garage - Assistance IA (garage-assistance.html) ------------------------------------------------------------ */ .gd-refresh-zone { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .gd-refresh-ts { font-size: 11.5px; color: var(--neutral); } .gd-btn-refresh { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--navy); background: #fff; border: 1.5px solid var(--line); padding: 10px 18px; border-radius: var(--r-pill); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .gd-btn-refresh:hover { border-color: var(--accent); box-shadow: var(--soft-shadow); } .gd-btn-refresh svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--ease); } .gd-btn-refresh.is-spinning svg { transform: rotate(360deg); } .gd-dossier-ref { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--navy); } .gd-dossier-sub { font-size: 11px; color: var(--neutral); margin-top: 1px; } .gd-creneau-txt { font-size: 12.5px; color: var(--muted); } .gd-creneau-txt.muted { color: var(--neutral); } tr.gd-muted-row { opacity: 0.55; } .gd-btn-urgent { font-family: inherit; font-size: 12px; font-weight: 700; padding: 8px 15px; border: none; border-radius: var(--r-pill); background: var(--accent); color: #fff; cursor: pointer; transition: opacity 0.2s; white-space: nowrap; } .gd-btn-urgent:hover { opacity: 0.9; } /* ------------------------------------------------------------ Espace garage - Profil garage (garage-profil.html) ------------------------------------------------------------ */ .gd-completion-card { margin-bottom: 20px; } .gd-completion-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; } .gd-completion-top .gd-c-label { font-size: 13px; font-weight: 700; color: var(--muted); } .gd-completion-top .gd-c-pct { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--amber); } .gd-completion-track { height: 9px; background: var(--soft); border-radius: 100px; overflow: hidden; } .gd-completion-fill { height: 100%; background: linear-gradient(90deg, var(--amber), var(--accent)); border-radius: 100px; transition: width 0.4s var(--ease); } .gd-completion-hint { font-size: 12px; color: var(--neutral); margin-top: 8px; } .gd-profile-top { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .gd-profile-top .gd-pt-avatar { width: 76px; height: 76px; border-radius: 20px; background: var(--brand-gradient); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gd-profile-top .gd-pt-title { font-size: 14.5px; font-weight: 700; color: var(--navy); } .gd-profile-top .gd-pt-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .gd-form-section { margin-bottom: 28px; } .gd-form-section:last-of-type { margin-bottom: 0; } .gd-fs-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .gd-fs-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } .gd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 700px) { .gd-form-grid { grid-template-columns: 1fr; } } .gd-field { display: flex; flex-direction: column; gap: 6px; } .gd-field.full-field { grid-column: 1 / -1; } .gd-field label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .gd-field input, .gd-field textarea { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; font-size: 13.5px; color: var(--navy); outline: none; font-family: inherit; transition: border-color 0.2s; } .gd-field input:focus, .gd-field textarea:focus { border-color: var(--accent); } .gd-field-locked { position: relative; } .gd-field-locked input { background: var(--soft); color: var(--muted); padding-right: 36px; } .gd-field-locked .gd-lock-ic { position: absolute; right: 12px; top: 38px; width: 15px; height: 15px; color: var(--neutral); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-field-hint { font-size: 11px; color: var(--neutral); margin-top: 4px; } .gd-tag-input-wrap { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gd-tag-input-wrap:focus-within { border-color: var(--accent); } .gd-spec-tag { display: flex; align-items: center; gap: 6px; background: var(--soft); color: var(--navy); font-size: 12.5px; font-weight: 600; padding: 6px 6px 6px 12px; border-radius: 100px; } .gd-spec-tag button { color: var(--muted); width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: none; cursor: pointer; transition: background 0.15s; } .gd-spec-tag button:hover { background: rgba(16, 42, 53, 0.1); } .gd-spec-tag button svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.5; } .gd-tag-input-wrap input { border: none; outline: none; flex: 1; min-width: 120px; font-size: 13.5px; padding: 6px; font-family: inherit; color: var(--navy); } .gd-form-actions { display: flex; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }